/* Flora – Abschiedsseite. Pastell-Glas-Design nach jasonholweg.de. */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* Hero-Schriftzug wie auf jasonholweg.de: Montserrat Black mit J ohne Querbalken (OFL, siehe fonts/JHDisplay-OFL.txt) */
  font-family: "JH Display";
  src: url("fonts/jh-display-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --pearl: #f6f5fb;
  --white: #ffffff;
  --ink: #1d1b2a;
  --ink-2: #545169;
  --ink-3: #85829b;
  --line: rgba(29, 27, 42, 0.1);
  --accent: #5546c8;
  --focus: #6a5bf0;
  --lavender: #d9d0fb;
  --blue: #cfe3fd;
  --pink: #f8d5e6;
  --mint: #cfeee0;
  --peach: #fcdcc8;

  --font-display: "Clash Display", "Arial Black", system-ui, sans-serif;
  --font-name: "JH Display", "Arial Black", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-2: 420ms;
  --dur-3: 760ms;

  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius-l: clamp(22px, 2.4vw, 34px);
  --pad: clamp(24px, 4vw, 48px);
  /* Kopf über dem Hero: Logo-Breite folgt Breite und Höhe des Fensters, die Bühne beginnt darunter */
  --logo-b: clamp(92px, min(11vw, 16vh), 168px);
  --kopf-pad: clamp(12px, 2.2vh, 26px);
  --kopf-h: calc(var(--kopf-pad) + var(--logo-b) * 0.826 + 34px);

  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.3));
  --glass-border: rgba(255, 255, 255, 0.78);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(110, 98, 190, 0.14),
    0 16px 36px -18px rgba(70, 58, 150, 0.45),
    0 2px 8px -3px rgba(70, 58, 150, 0.16);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background:
    radial-gradient(60% 40% at 0% 34%, rgba(217, 208, 251, 0.55), rgba(217, 208, 251, 0) 70%),
    radial-gradient(50% 36% at 100% 50%, rgba(252, 220, 200, 0.5), rgba(252, 220, 200, 0) 70%),
    radial-gradient(60% 40% at 20% 92%, rgba(207, 238, 224, 0.6), rgba(207, 238, 224, 0) 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(248, 213, 230, 0.6), rgba(248, 213, 230, 0) 70%),
    var(--pearl);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; overflow-wrap: break-word; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--white); border-radius: 999px; }
.skip:focus { top: 16px; }

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ---------- Kopfzeile ---------- */

.top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  display: flex;
  justify-content: center;
  padding: var(--kopf-pad) 0 0;
  pointer-events: none;
}
.top__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--ink-2);
  font-size: clamp(0.8125rem, 1vw, 0.9375rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
}
.top__brand img { width: var(--logo-b); height: auto; mix-blend-mode: multiply; }

/* ---------- Hero ----------
   Aufbau wie auf jasonholweg.de: eine Bühne mit festem Seitenverhältnis, der Glas-Renderer
   liest den Verlauf aus dem CSS und zeichnet den Schriftzug als Glas. Eis und Tasse liegen
   auf einem eigenen Canvas (three.js) zwischen Glas und Text. */

.hero {
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 36rem;
  container-type: size;
  overflow: clip;
  background:
    radial-gradient(44% 50% at 50% 36%, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 80%),
    radial-gradient(52% 56% at 5% 3%, rgba(214, 219, 244, 0.95), rgba(214, 219, 244, 0) 72%),
    radial-gradient(38% 30% at 42% 0%, rgba(214, 230, 252, 0.85), rgba(214, 230, 252, 0) 72%),
    radial-gradient(50% 56% at 97% 5%, rgba(255, 236, 226, 1), rgba(255, 236, 226, 0) 72%),
    radial-gradient(40% 50% at 100% 55%, rgba(246, 222, 242, 0.95), rgba(246, 222, 242, 0) 72%),
    radial-gradient(36% 46% at 0% 46%, rgba(238, 245, 242, 0.95), rgba(238, 245, 242, 0) 72%),
    radial-gradient(46% 40% at 8% 100%, rgba(236, 218, 242, 1), rgba(236, 218, 242, 0) 72%),
    radial-gradient(52% 38% at 46% 104%, rgba(226, 211, 241, 0.95), rgba(226, 211, 241, 0) 72%),
    radial-gradient(44% 40% at 95% 100%, rgba(252, 229, 233, 0.95), rgba(252, 229, 233, 0) 72%),
    #f8f5fa;
}
.hero::after {
  /* weicher Übergang: Verlauf, Glaswellen, Eis und Tasse laufen unten in den Seitengrund aus.
     (Keine CSS-Maske – die würde das WebGL-Glas ausblenden.) */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  background: linear-gradient(rgba(246, 245, 251, 0), var(--pearl) 88%);
  pointer-events: none;
  z-index: 4;
}
.hero__gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.hero__gl.is-bereit { opacity: 1; }
.hero__gl--back { z-index: 0; }
.hero__gl--front { z-index: 20; }
.hero__obj {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
  touch-action: pan-y;
}
.hero.is-3d .hero__obj { opacity: 1; }

/* Fläche unter dem Kopf: hier wird die Bühne eingepasst – der Schriftzug kann so nie unter das Logo rutschen */
.hero__flaeche {
  position: absolute;
  inset: var(--kopf-h) 0 0;
  z-index: 3;
  container-type: size;
  pointer-events: none;
}
.hero__stage {
  --stage-ar: 16 / 9;
  --type-size: 13;     /* cqw */
  --type-top: 5;       /* % der Bühnenhöhe */
  --text-top: 51;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(100cqw, calc(100cqh * var(--stage-ar)));
  aspect-ratio: var(--stage-ar);
  translate: -50% -50%;
  container-type: size;
  pointer-events: none;
}
.hero__name {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--type-top) * 1%);
  margin: 0;
  font-family: var(--font-name);
  font-weight: 900;
  font-size: calc(var(--type-size) * 1cqw);
  line-height: 0.9;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  transition: opacity 700ms var(--ease-out);
}
.hero__line { position: relative; display: block; }
.hero__line:first-child { z-index: 1; }
.hero__line > span {
  display: inline-block;
  background: linear-gradient(100deg, #a6d8e6 0%, #9fb5f5 24%, #aecbf6 44%, #b6a9f1 66%, #e2b3e0 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0.012em 0.008em rgba(255, 255, 255, 0.9)) drop-shadow(0 0.04em 0.05em rgba(96, 84, 170, 0.22));
}
/* Mit WebGL übernimmt die Glasschrift (die DOM-Schrift bleibt für Screenreader und Suche). */
.hero.ist-glas .hero__name { opacity: 0; }

.hero__text {
  position: absolute;
  left: 50%;
  top: calc(var(--text-top) * 1%);
  width: min(620px, 50cqw);
  translate: -50% 0;
  text-align: center;
  pointer-events: auto;
}
.hero__lead {
  margin: 0 auto 26px;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.35cqw, 1.25rem);
  line-height: 1.55;
}

@media (max-aspect-ratio: 5/4) {
  .hero__stage { --stage-ar: 4 / 5; --type-size: 13; --type-top: 7; --text-top: 32; }
  .hero__text { width: min(520px, 76cqw); }
  .hero__lead { font-size: clamp(1rem, 2.6cqw, 1.2rem); }
}
@media (max-aspect-ratio: 2/3) {
  .hero__stage { --stage-ar: 9 / 16; --type-size: 13.6; --type-top: 10; --text-top: 29; }
  .hero__text { width: 86cqw; }
  .hero__lead { font-size: clamp(0.98rem, 4.4cqw, 1.1rem); margin-bottom: 20px; }
}

/* ---------- Ich schließe Flora: volle Breite, hängende Schilder ---------- */

.schluss {
  position: relative;
  isolation: isolate;
  /* beginnt im selben Grundton, in dem der Hero ausläuft */
  background: linear-gradient(var(--pearl), rgba(246, 245, 251, 0) 70%);
  padding: clamp(72px, 10vw, 140px) var(--gutter) clamp(64px, 9vw, 120px);
  text-align: center;
}
.schluss__gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.schluss.is-3d .schluss__gl { opacity: 1; }
.schluss.ist-zeigbar { cursor: pointer; }
.schluss__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.schluss { min-height: 640px; }
.schluss.schilder-oben { min-height: 0; padding-top: calc(min(230px, 40vw) + 120px); }
.schluss__titel {
  margin-bottom: 28px;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1;
}
.schluss__text p { margin: 0 auto 1em; color: var(--ink-2); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; }
.schluss__text p:last-child { margin-bottom: 0; }
.schluss__text .schluss__hallo { color: var(--ink); font-weight: 600; }

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.button:hover { transform: translateY(-2px) scale(1.02); }
.button--dark { background: var(--ink); color: var(--white); box-shadow: 0 16px 36px -18px rgba(29, 27, 42, 0.7); }

/* ---------- Abschnitte ---------- */

.section { position: relative; padding-block: clamp(24px, 4vw, 44px); }
.section--last { padding-bottom: clamp(48px, 8vw, 96px); }
.section__head { margin-bottom: clamp(20px, 3vw, 32px); }

.eyebrow {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* Glas: zweilagig wie auf jasonholweg.de – Verlauf, Lichtkante oben, weicher Lavendel-Schatten,
   dazu ein wandernder Glanz, der dem Zeiger folgt (--gx/--gy aus JS). */
.glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--pad);
  border-radius: var(--radius-l);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(420px circle at var(--gx, 20%) var(--gy, 0%), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 60%),
    linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.prose p { margin-bottom: 1em; color: var(--ink-2); font-size: 1.125rem; }
.prose p:last-child { margin-bottom: 0; }
.prose .prose__hello { color: var(--ink); font-weight: 600; }

/* Kacheln: Bild füllt oben und seitlich, Text darunter auf dem Glas. */

.tiles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.tile {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  color: inherit;
  text-decoration: none;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  will-change: transform;
}
.tile:hover { box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-border), 0 30px 60px -30px rgba(70, 58, 150, 0.55); }
.tile__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 55%;
  transition: transform 1.2s var(--ease-out);
}
.tile:hover .tile__img { transform: scale(1.04); }
.tile--press .tile__img { aspect-ratio: 16 / 11; object-position: 45% 25%; }
.tile__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; flex: 1; }
.tile__kicker { color: var(--ink-3); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.tile__title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.tile__text { color: var(--ink-2); font-size: 0.975rem; }
.tile__cta { margin-top: auto; padding-top: 6px; color: var(--accent); font-weight: 600; }

/* Von Herzen: Winterszene über die volle Breite (Frostfest) */

.winter {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 9vw, 120px) var(--gutter) 0;
  text-align: center;
  /* kühler Winterhimmel, oben und unten im Seitengrund auslaufend */
  background:
    radial-gradient(60% 50% at 50% 30%, rgba(214, 226, 250, 0.75), rgba(214, 226, 250, 0) 72%),
    radial-gradient(40% 40% at 15% 70%, rgba(226, 216, 248, 0.6), rgba(226, 216, 248, 0) 72%),
    radial-gradient(40% 40% at 85% 65%, rgba(210, 232, 246, 0.6), rgba(210, 232, 246, 0) 72%);
}
.winter__gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}
.winter.is-3d .winter__gl { opacity: 1; }
.winter.ist-zeigbar { cursor: pointer; }
.winter__text { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }
.winter__titel { max-width: 22ch; margin-inline: auto; font-size: clamp(1.75rem, 3.6vw, 2.9rem); line-height: 1.08; }
.winter__freude { margin-top: 18px; color: var(--ink-2); font-size: 1.25rem; }
.winter__gruss { margin-top: 10px; color: var(--ink); font-size: 1.25rem; font-weight: 600; }
.winter__sign { margin-top: 16px; color: var(--accent); font-size: 1.125rem; font-style: italic; font-weight: 500; }
.winter__buehne {
  position: relative;
  z-index: 1;
  height: clamp(300px, 34vw, 480px);
  margin: clamp(8px, 2vw, 24px) calc(-1 * var(--gutter)) 0;
  pointer-events: none;
}
.winter__ebene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Weiter */

.glass--next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: 0;
  background:
    radial-gradient(50% 90% at 100% 0%, rgba(207, 227, 253, 0.65), rgba(207, 227, 253, 0) 70%),
    radial-gradient(50% 70% at 70% 100%, rgba(207, 238, 224, 0.6), rgba(207, 238, 224, 0) 70%),
    var(--glass-bg);
}
.next__copy { padding: var(--pad); padding-right: 0; }
.next__copy h2 { margin-bottom: 14px; }
.next__copy > p { color: var(--ink-2); font-size: 1.0625rem; }
.next__list { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 8px; }
.next__list a {
  display: block;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
  color: var(--ink-2);
  font-size: 0.975rem;
  text-decoration: none;
  transition: transform var(--dur-2) var(--ease-spring), background var(--dur-2);
}
.next__list a:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.85); }
.next__list strong { color: var(--ink); }

.next__stage {
  position: relative;
  align-self: stretch;
  min-height: 460px;
}
.next__stage > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: pan-y;
}
.next__stage > canvas:active { cursor: grabbing; }
.next__stage > canvas.ist-zeigbar { cursor: pointer; }
.next__layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.next__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 4;
  color: var(--ink-3);
  font-size: 0.8125rem;
  text-align: center;
  pointer-events: none;
}
.next__stage.hat-gedreht .next__hint { opacity: 0; transition: opacity 600ms; }
.next__fallback { display: none; position: absolute; left: 50%; top: 50%; width: 140px; translate: -50% -50%; }
.next__stage.ist-ohne-3d .next__fallback { display: block; }
.next__stage.ist-ohne-3d .mito, .next__stage.ist-ohne-3d .next__hint { display: none; }

.mito {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 400ms;
}
.mito.ist-bereit { opacity: 1; }
.mito img { width: 100%; height: 100%; filter: drop-shadow(0 10px 10px rgba(30, 40, 80, 0.25)); transform-origin: 50% 90%; }
.mito.ist-hops img { animation: mito-hops 620ms var(--ease-spring); }
@keyframes mito-hops {
  30% { transform: translateY(-26px) scale(0.92, 1.08); }
  60% { transform: translateY(0) scale(1.1, 0.88); }
}

/* Sprechblasen (Legrior-Stil) */
.lg-blase {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 220px;
  margin: 0;
  padding: 9px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px -12px rgba(40, 30, 90, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  animation: blase-rein 380ms var(--ease-spring) both;
  pointer-events: none;
}
.lg-blase::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--spitze, 0px));
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px;
}
.lg-blase__wer { display: block; margin-bottom: 2px; color: var(--accent); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.lg-blase.ist-weg { animation: blase-raus 260ms var(--ease-out) both; }
@keyframes blase-rein { from { opacity: 0; scale: 0.6; } }
@keyframes blase-raus { to { opacity: 0; scale: 0.85; } }

/* Rechtsseiten (Impressum, Datenschutz) */

.top--statisch { position: relative; padding-bottom: 8px; }
.recht-seite {
  background:
    radial-gradient(50% 30% at 5% 0%, rgba(214, 219, 244, 0.9), rgba(214, 219, 244, 0) 72%),
    radial-gradient(45% 30% at 97% 3%, rgba(255, 236, 226, 0.9), rgba(255, 236, 226, 0) 72%),
    radial-gradient(60% 40% at 20% 92%, rgba(207, 238, 224, 0.55), rgba(207, 238, 224, 0) 70%),
    radial-gradient(50% 40% at 90% 100%, rgba(248, 213, 230, 0.55), rgba(248, 213, 230, 0) 70%),
    var(--pearl);
}
.recht { max-width: 820px; padding: clamp(24px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); text-align: center; }
.recht__titel { margin-bottom: clamp(20px, 3vw, 32px); font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; }
.recht__karte { text-align: left; }
.recht__karte h2 { margin: 28px 0 8px; font-size: clamp(1.125rem, 1.8vw, 1.3rem); line-height: 1.25; }
.recht__karte p { margin: 0 0 0.9em; color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.recht__karte a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
.recht__hinweis {
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  color: var(--ink) !important;
  font-weight: 500;
}
.recht__zurueck { margin-top: 28px; }

/* Footer */

.foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.9375rem; }
.foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot__nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* Einblenden */

.reveal {
  animation: reveal var(--dur-3) var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
  animation-timeline: view();
  animation-range: entry 0% entry 35%;
}
.reveal[data-delay="1"] { --reveal-delay: 120ms; }
.reveal[data-delay="2"] { --reveal-delay: 240ms; }
@supports not (animation-timeline: view()) { .reveal { animation: none; } }
@keyframes reveal { from { opacity: 0; translate: 0 22px; } }

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .tile { grid-column: span 6; }
  .tile--press { grid-column: span 12; }
  .tile--press .tile__img { aspect-ratio: 16 / 9; }
  .glass--next { grid-template-columns: 1fr; }
  .next__copy { padding: var(--pad) var(--pad) 0; }
  .next__stage { min-height: 380px; }
}

@media (max-width: 640px) {
  .tiles { gap: 14px; }
  .tile__body { padding: 14px 14px 16px; }
  .tile__title { font-size: 1.0625rem; }
  .tile:not(.tile--press) .tile__text { display: none; }
  .next__stage { min-height: 340px; }
  .mito { width: 72px; height: 72px; }
  .foot__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { animation: none !important; }
  .button, .tile, .tile__img { transition: none; }
}