@font-face { font-family: "Plus Jakarta Sans"; src: url("../assets/fonts/PlusJakartaSans.woff") format("woff"); font-weight: 200 800; font-style: normal; font-display: swap; }

/* ═══════════════════════════════════════════════════════════════════════
   Reponara — Webseite (Stand 24.09.2026)
   Farben, Formen und Schrift nach brand/official/REPONARA-BRAND-KIT.md v1.0:
   Papiergrund, Karten #FFFAF6 mit warmer Linie #E8D9CC, Terrakotta als
   einzige Aktionsfarbe, der dunkle Focus-Verlauf als der eine starke Moment
   je Abschnitt. Überschriften in Plus Jakarta Sans (Kit: erlaubt für
   Marketing), Fließtext in der Systemschrift wie die App.
   Die App-Nachbauten stehen getrennt in css/app.css (Präfix a-).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #FAF6F0;
  --grund-fokus: #F6EEE6;
  --karte: #FFFAF6;
  --flaeche: #FFFCF7;
  --erhoben: #EDE1D0;
  --linie: #E8D9CC;
  --linie-2: #DCC8B6;
  --text: #33261F;
  --neben: #59483B;
  --leise: #6F6152;
  --akzent: #93472A;
  --akzent-hell: #C1663F;
  --ocker: #7E5A22;
  --salbei: #4F6243;
  --focus: linear-gradient(90deg, #302431 0%, #4A2D2D 52%, #68402E 100%);
  --titel-verlauf: linear-gradient(100deg, #A9573A 0%, #93472A 45%, #7E5A22 100%);
  /* Alte Namen, die die Hero-Szene noch liest */
  --gedaempft: var(--leise);
  --gedaempft-2: var(--neben);

  --container: 1200px;
  --rand: clamp(18px, 5vw, 72px);
  --abstand: clamp(56px, 8vh, 108px);
  --fs-h2: clamp(30px, 4.2vw, 54px);
  --radius: 16px;
  --radius-klein: 10px;
  --schatten: 0 3px 10px rgba(56, 36, 24, .025);
  --schatten-hoch: 0 24px 48px -28px rgba(56, 30, 18, .30), 0 3px 10px rgba(56, 36, 24, .03);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --schrift-titel: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

/* ── Grund ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--schrift); font-size: 17px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--akzent-hell); outline-offset: 3px; border-radius: 6px; }
main { display: block; }
section { position: relative; padding: var(--abstand) 0; scroll-margin-top: 70px; }
.container { width: min(var(--container), 100% - 2 * var(--rand)); margin-inline: auto; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--klein { width: 12px; height: 12px; }
.springen { position: absolute; left: -9999px; top: 10px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-klein); background: var(--text); color: var(--bg); font-weight: 600; }
.springen:focus { left: 10px; }
.unsichtbar { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Schrift ───────────────────────────────────────────────────────── */
.h2 { font-family: var(--schrift-titel); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; text-wrap: balance; }
.h2 .hervor { color: var(--akzent); }
/* Die Arbeitsweise-Überschrift sind zwei Sätze — jeder auf eigener Zeile,
   auch schmal (sonst begann der zweite mitten in der Zeile). */
#prinzipien .h2 .hervor { display: block; }
.kicker { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); }
.zeile { display: block; }
/* Der Verlauf füllt nur seinen Kasten — unten genug Platz für Unterlängen
   (das g in „Weniger“), der negative Rand hält den Zeilenabstand. */
.zeile--verlauf { display: inline-block; background: var(--titel-verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .18em; margin-bottom: -.12em; }

/* Abschnittskopf wie der Seitenkopf der App: Eyebrow, großer Titel und ein
   blasses Bereichszeichen dahinter (lib/widgets/focus_page_header.dart). */
.kopf { position: relative; isolation: isolate; margin-bottom: clamp(30px, 5vh, 52px); max-width: 780px; }
.kopf--mitte { margin-inline: auto; text-align: center; }
.kopf .kicker { margin-bottom: 14px; }
.kopf__satz { margin-top: 18px; color: var(--neben); font-size: clamp(16px, 1.3vw, 18px); max-width: 640px; }
.kopf--mitte .kopf__satz { margin-inline: auto; }
.kopf__motiv { position: absolute; z-index: -1; width: clamp(220px, 26vw, 330px); height: auto; aspect-ratio: 240 / 130; left: 50%; top: calc(clamp(220px, 26vw, 330px) * -.42); transform: translateX(-50%); pointer-events: none; }

/* ── Knöpfe ────────────────────────────────────────────────────────── */
/* Wie in der App: Terrakotta nur für die wichtigste Aktion, sonst Papier
   mit warmer Linie; Radius 10–12. */
.pille { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 12px; padding: 12px 20px; font-weight: 600; font-size: 15px; line-height: 1; border: 1px solid transparent; white-space: nowrap; transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.pille:hover { transform: translateY(-1px); }
.pille--gross { padding: 16px 24px; font-size: 16px; }
.pille--klein { padding: 9px 14px; font-size: 13px; border-radius: 10px; }
.pille--creme { background: var(--akzent); color: #fff; box-shadow: 0 10px 24px -12px rgba(147, 71, 42, .7); }
.pille--creme:hover { background: #803B22; }
.pille--geist { background: var(--karte); border-color: var(--linie); color: var(--text); box-shadow: var(--schatten); }
.pille--geist:hover { border-color: var(--linie-2); }
/* Solange es keinen Download gibt: ein ruhiger Hinweis in Terrakotta statt
   eines ausgegrauten Knopfs (der wirkte kaputt und hatte zu wenig Kontrast). */
.pille--bald { background: transparent; border-color: transparent; color: var(--akzent); box-shadow: none; cursor: default; padding-inline: 8px; font-size: 15px; }
.pille--bald:hover { transform: none; background: transparent; }
.pille--bald .icon { display: none; }
.pille--bald::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent-hell); box-shadow: 0 0 0 4px rgba(193, 102, 63, .16); }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); }

/* Einblenden beim Scrollen — nur mit JS, sonst bleibt alles sichtbar. */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1); }
.js .reveal--sichtbar { opacity: 1; transform: none; }

/* ── Navigation ────────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; right: 0; left: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
/* Lesefortschritt als feine Linie; --gelesen setzt main.js. */
.nav::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--gelesen, 0) * 100%); background: var(--focus); opacity: 0; transition: opacity .3s; }
.nav--fest::after { opacity: .9; }
.nav::before { content: ''; position: absolute; inset: 0 0 -36px 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(250, 246, 240, .92) 30%, rgba(250, 246, 240, 0)); transition: opacity .3s; }
.nav--fest::before { opacity: 0; }
.nav--fest { background: rgba(250, 246, 240, .84); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: var(--linie); }
.nav__innen { width: min(1320px, 100% - 2 * var(--rand)); margin-inline: auto; height: 84px; display: flex; align-items: center; gap: 24px; transition: height .35s cubic-bezier(.4, 0, .2, 1); }
.nav--fest .nav__innen { height: 64px; }
.nav__logo { display: flex; align-items: center; gap: 11px; flex: none; }
.nav__zeichen { width: 27px; height: 30px; flex: none; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
.nav__marke { display: flex; align-items: center; min-width: 0; }
.nav__name { font-family: var(--schrift-titel); font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
/* Optical alignment: the tall R and p descender sit inside the SVG canvas. */
.nav__wordmark { display: block; width: 140px; height: auto; transform: translateY(3px); }
.fuss__brand { display: flex; align-items: center; gap: 12px; }
.fuss__wordmark { display: block; width: 155px; height: auto; }
.nav__menue { display: flex; gap: 2px; margin-inline: auto; }
.nav__link { padding: 8px 12px; border-radius: 10px; font-size: 14px; color: var(--neben); transition: color .2s, background .2s; }
.nav__link:hover { color: var(--text); background: rgba(51, 38, 31, .05); }
.nav__rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav__sprache .icon { width: 15px; height: 15px; }
.nav__sprache .icon--klein { display: none; }
.nav__link { white-space: nowrap; }
.nav__burger { display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--linie); background: var(--karte); flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav__burger span { width: 16px; height: 1.5px; background: var(--neben); transition: transform .25s, opacity .25s; }
.nav--offen .nav__burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav--offen .nav__burger span:nth-child(2) { opacity: 0; }
.nav--offen .nav__burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Hero ──────────────────────────────────────────────────────────── */
/* ═══════════ Hero-Szene: Tor, Sonne, Dünen ═══════════
   Der erste Bildschirm ist eine Landschaft, in die man beim Scrollen
   hineinfährt. Alles Vektor und nur transform/opacity — damit es auch auf
   einem Handy flüssig bleibt. `--hero` (0 … 1) kommt aus main.js und misst,
   wie weit die Szene durchgescrollt ist; `--mx`/`--my` sind der weiche
   Mauszeiger-Versatz. */
.hero { position: relative; padding: 0 0 var(--boden); overflow: hidden; --boden: clamp(96px, 14vh, 180px); --szene-h: 100svh; }
/* Der Textblock hält seine Deckkraft, solange man ihn liest, und geht dann
   zügig — ein linearer Verlauf hätte ihn über die halbe Fahrt als blasses
   Gespenst stehen lassen. */
.hero__buehne { position: relative; z-index: 2; min-height: var(--szene-h, 100svh); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(92px + 20px) 0 clamp(80px, 14vh, 170px); transform: translate3d(0, calc(var(--hero, 0) * -96px), 0); opacity: calc(1 - max(0, var(--hero, 0) - .2) * 2.6); }

/* Die Szene reicht über den ersten Bildschirm hinaus: die Strecke unterhalb
   des Dünenkamms ist der Übergang in den nächsten Abschnitt. Alle Maße darin
   hängen an `svh`, nicht an der Szenenhöhe — sonst verschöbe sich der
   Sonnenstand, sobald das Band wächst. */
.szene { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--szene-h, 100svh) + var(--boden, 180px)); z-index: 0; pointer-events: none; overflow: hidden; }

/* Warmes Morgenlicht über dem oberen Rand. Es sinkt mit der Sonne. */
.szene__licht { position: absolute; left: 50%; top: -26svh; width: min(1500px, 130%); height: 92svh; transform: translate3d(calc(-50% + var(--mx, 0px) * .3), calc(var(--hero, 0) * 240px), 0) scale(calc(1 + var(--hero, 0) * .12)); background: radial-gradient(ellipse 52% 60% at 50% 50%, rgba(232, 168, 119, .5) 0%, rgba(232, 168, 119, .22) 38%, transparent 72%); filter: blur(14px); opacity: calc(1 - max(0, var(--hero, 0) - .45) * 1.5); }

/* Das Gestirn: Scheibe, Hof und ein Strahlenkranz, der sich sehr langsam
   dreht. Es steht hinter der Überschrift — deshalb hell und ohne harte
   Kanten, damit der Text darüber lesbar bleibt. */
.szene__gestirn { position: absolute; left: 50%; top: -12svh; width: min(58vh, 540px); aspect-ratio: 1; transform: translate3d(calc(-50% + var(--mx, 0px) * .5), calc(var(--my, 0px) * .4 + var(--hero, 0) * 640px), 0) scale(calc(1 + var(--hero, 0) * .1)); opacity: calc(1 - max(0, var(--hero, 0) - .72) * 3.4); }
.szene__gestirn img { width: 100%; height: 100%; display: block; }
/* Der weiche Lichthof hinter der Sonne — CSS statt Bild, damit er sich
   frei skalieren lässt. */
.szene__hof { position: absolute; left: 50%; top: 50%; width: 148%; height: 148%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(247, 206, 163, .5) 0%, rgba(240, 184, 132, .18) 42%, transparent 70%); }
/* Nach unten ausblenden: so liegen die Strahlen über der Überschrift, nicht
   im Fließtext — sonst wird der Textbereich unruhig. */
.szene__gestirn { -webkit-mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 46%, rgba(0,0,0,.4) 70%, transparent 88%); mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 46%, rgba(0,0,0,.4) 70%, transparent 88%); }
/* Die Drehung hängt am Scroll-Fortschritt: eine halbe Umdrehung über den
   ersten Bildschirm. Das ist der Teil, den man beim Scrollen wirklich sieht. */
.szene__scheibe { transform-origin: 50% 50%; transform: rotate(calc(var(--hero, 0) * 186deg)); transition: transform .12s linear; }
.szene__hof { animation: scheibeAtmen 7s ease-in-out infinite; }
@keyframes scheibeAtmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

/* Der Schein am Kamm: er wird stärker, je tiefer die Sonne steht. Das ist
   das Stück Licht, das bleibt, wenn die Scheibe schon weg ist — und was den
   nächsten Abschnitt noch warm anleuchtet. */
.szene__glut { position: absolute; left: 50%; top: calc(var(--szene-h, 100svh) - min(23svh, 210px) - 300px); width: min(1560px, 132%); height: 380px; transform: translate3d(calc(-50% + var(--mx, 0px) * .2), calc(var(--hero, 0) * 34px), 0); background: radial-gradient(ellipse 42% 56% at 50% 78%, rgba(211, 112, 55, .50) 0%, rgba(224, 150, 95, .24) 40%, transparent 72%); filter: blur(12px); opacity: calc(max(0, var(--hero, 0) - .24) * 1.9); }

/* Drei Dünenkämme. Sie stehen still — die Bewegung macht die Sonne, die
   dahinter untergeht. Liefen die Kämme mit, gäbe es keine Verdeckung, und an
   ihrer Unterkante risse der Sand auf. */
.szene__duenen { position: absolute; left: -6%; right: -6%; top: calc(var(--szene-h, 100svh) - min(23svh, 210px)); height: min(23svh, 210px); }
.szene__duene { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: block; }
.szene__duene--fern { transform: translate3d(calc(var(--mx, 0px) * .25), 0, 0); }
.szene__duene--mitte { transform: translate3d(calc(var(--mx, 0px) * .6), 0, 0); }
.szene__duene--nah { transform: translate3d(calc(var(--mx, 0px) * 1.1), 0, 0); }

/* Der Sand unterhalb des Kamms. Er deckt alles ab, was darunter liegt —
   auch die untergehende Sonne — und löst sich nach unten in Creme auf. Die
   beiden Kämme darin laufen beim Hereinscrollen des Portals gegenläufig. */
.szene__boden { position: absolute; left: 0; right: 0; top: calc(var(--szene-h, 100svh) - 2px); bottom: 0; background: linear-gradient(to bottom, #C79269 0%, #CE9E77 18%, #DDB995 44%, #EDDAC3 72%, var(--bg) 100%); }
/* Das Abendlicht, das der untergegangenen Sonne folgt: der Sand unterhalb des
   Kamms glüht nach, und dieses Licht steht noch, wenn der nächste Abschnitt
   schon im Bild ist. So hört die Szene nicht auf, sie geht über. */
.szene__boden::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 72% 128% at 50% 0%, rgba(202, 98, 44, .34) 0%, rgba(214, 138, 82, .15) 44%, transparent 76%); opacity: calc(max(0, var(--hero, 0) - .34) * 1.9); }
/* Der Kamm löst sich nach unten auf, statt mit einer waagerechten Kante zu
   enden — sonst liegt im Sand ein Streifen. */
.szene__kamm { position: absolute; left: -5%; width: 110%; top: -34px; height: 176px; display: block; transform: translate3d(calc(var(--mx, 0px) * -.5), 0, 0); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%); }

/* Hinweis zum Scrollen — verschwindet, sobald man es tut. Er hängt am ersten
   Bildschirm, nicht am Fuß der Szene, die jetzt weiter reicht. */
.szene__wink { position: absolute; left: 50%; top: calc(var(--szene-h, 100svh) - clamp(52px, 9vh, 78px)); z-index: 3; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gedaempft); opacity: calc(1 - var(--hero, 0) * 4); }
.szene__wink i { display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--akzent), transparent); animation: winkZieht 2.6s ease-in-out infinite; }
@keyframes winkZieht { 0%, 100% { transform: scaleY(.45); transform-origin: top; opacity: .5; } 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } }

/* ── Der Auftritt beim Laden ──────────────────────────────────────
   Gestaffelt statt alles auf einmal: erst Licht, dann zeichnet sich der
   Bogen, dann steigt die Sonne, dann laufen die Dünen ein, zuletzt der
   Titel. `html.szene-an` setzt main.js, sobald die Seite steht. */
html.szene-warten .szene__licht, html.szene-warten .szene__gestirn, html.szene-warten .szene__duene, html.szene-warten .szene__wink, html.szene-warten .hero__titel .zeile, html.szene-warten .hero__text, html.szene-warten .hero__knoepfe, html.szene-warten .hero__hinweis { opacity: 0; }
html.szene-an .szene__licht { animation: szeneLicht 1.4s .05s cubic-bezier(.22,.7,.3,1) both; }
html.szene-an .szene__gestirn { animation: szeneGestirn 1.6s .24s cubic-bezier(.2,.8,.3,1) both; }
html.szene-an .szene__scheibe { animation: strahlenAuf 1.9s .45s cubic-bezier(.2,.8,.3,1) both; }
html.szene-an .szene__duene--fern { animation: szeneDuene 1.1s .72s cubic-bezier(.22,.8,.3,1) both; }
html.szene-an .szene__duene--mitte { animation: szeneDuene 1.1s .84s cubic-bezier(.22,.8,.3,1) both; }
html.szene-an .szene__duene--nah { animation: szeneDuene 1.1s .96s cubic-bezier(.22,.8,.3,1) both; }
html.szene-an .szene__wink { animation: szeneWink 1s 1.9s ease-out both; }
html.szene-an .hero__titel .zeile { animation: zeileAuf .95s cubic-bezier(.2,.75,.3,1) both; }
html.szene-an .hero__titel .zeile:nth-child(1) { animation-delay: 1.02s; }
html.szene-an .hero__titel .zeile:nth-child(2) { animation-delay: 1.18s; }
html.szene-an .hero__text { animation: zeileAuf .9s 1.36s cubic-bezier(.2,.75,.3,1) both; }
html.szene-an .hero__knoepfe { animation: zeileAuf .9s 1.5s cubic-bezier(.2,.75,.3,1) both; }
html.szene-an .hero__hinweis { animation: zeileAuf .9s 1.62s cubic-bezier(.2,.75,.3,1) both; }
@keyframes szeneLicht { from { opacity: 0; transform: translate3d(-50%, -40px, 0) scale(.86); } to { opacity: 1; } }
@keyframes szeneGestirn { from { opacity: 0; transform: translate3d(-50%, 90px, 0) scale(.72); } to { opacity: 1; } }
@keyframes strahlenAuf { from { opacity: 0; transform: rotate(-22deg) scale(.74); } to { opacity: 1; transform: none; } }
@keyframes szeneDuene { from { opacity: 0; transform: translate3d(0, 46px, 0); } to { opacity: 1; } }
@keyframes szeneWink { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; } }
@keyframes zeileAuf { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero__netz { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(147, 71, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(147, 71, 42, .045) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 42%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 60% 58% at 50% 42%, #000 25%, transparent 75%); animation: netzAtmen 9s ease-in-out infinite alternate; }
@keyframes netzAtmen { from { opacity: .55; } to { opacity: 1; } }
.hero__innen { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__titel { font-family: var(--schrift-titel); font-size: clamp(38px, 5.6vw, 76px); font-weight: 600; letter-spacing: -.03em; line-height: 1.03; max-width: 30ch; }
.hero__text { max-width: 690px; color: var(--gedaempft-2); font-size: clamp(16px, 1.35vw, 18.5px); margin-top: 26px; }
.hero__knoepfe { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.hero__hinweis { margin-top: 20px; font-size: 13px; letter-spacing: .06em; color: var(--gedaempft); }


/* ── Die Tour: ein App-Fenster, zehn Bereiche ─────────────────────────
   .tour__lauf ist so hoch wie zehn Etappen; darin klebt die Bühne. main.js
   rechnet aus der Scrollstellung, welcher Bereich aktiv ist, und schaltet
   Text, Fensterinhalt und Seitenleiste gemeinsam um. Ohne JS stehen die
   Texte untereinander und das Fenster zeigt das Dashboard. */
.tour { padding: 0; background: linear-gradient(var(--bg), var(--grund-fokus) 220px, var(--grund-fokus)); isolation: isolate; }
/* Farbnebel wie in mA.I.ssage (lib/maissage/vibe_stil.dart) */
.tour::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(36vw 36vw at 16% 18%, rgba(147, 71, 42, .10), transparent 70%),
    radial-gradient(38vw 38vw at 86% 30%, rgba(185, 140, 66, .10), transparent 70%),
    radial-gradient(42vw 42vw at 62% 92%, rgba(79, 98, 67, .08), transparent 70%),
    radial-gradient(38vw 38vw at 6% 84%, rgba(78, 102, 117, .07), transparent 70%); }
.tour__kopf { padding-top: clamp(24px, 6vh, 64px); }

/* Das Focus-Band der App als Auftakt: nach dem Sonnenuntergang die Dämmerung. */
.fokus-band { position: relative; overflow: hidden; border-radius: 20px; background: var(--focus); color: #FFF5E9; padding: clamp(22px, 3vw, 34px) clamp(22px, 3.2vw, 44px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; box-shadow: 0 30px 60px -34px rgba(48, 36, 49, .7); }
.fokus-band::after { content: ""; position: absolute; right: 6%; top: -150px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 170, 120, .22) 0%, rgba(208, 123, 98, .05) 56%, transparent 100%);
  border: 22px solid rgba(240, 182, 127, .12); box-shadow: 0 0 0 22px rgba(217, 155, 104, .07); }
.fokus-band__text { position: relative; z-index: 1; min-width: 0; }
.fokus-band__kicker { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #E4BC97; }
.fokus-band__titel { font-family: var(--schrift-titel); font-size: clamp(26px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin-top: 8px; }
.fokus-band__chips { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; }
.fokus-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: #51372C; border: 1px solid #8E6754; color: #FFF3E4; font-size: 14px; white-space: nowrap; }
.fokus-chip b { font-weight: 800; }
.fokus-chip svg { width: 17px; height: 17px; }

.tour__lauf { position: relative; }
.js .tour__lauf { height: calc(var(--n, 10) * 72svh + 100svh); }
/* Rollt jemand mit Schwung in die Tour (oder lässt sich ein Schwung sonst
   nicht abfangen), hält main.js die Seite einen Augenblick fest
   (html.tour-halt). Am <body>, nicht am <html>: sonst würde der Body wegen
   overflow-x zum eigenen Scrollbereich und die Bühne klebte nicht mehr.
   Die Rinne der Scrollleiste bleibt dabei stehen, damit nichts seitlich
   springt. */
html.tour-steuert { scrollbar-gutter: stable; }
html.tour-halt body { overflow: hidden; }
.tour__buehne { width: min(1440px, 100% - 2 * clamp(18px, 3vw, 48px)); margin-inline: auto; display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 56px); align-items: center; padding: clamp(36px, 6vh, 64px) 0; }
.js .tour__buehne { position: sticky; top: 0; height: 100svh; padding: 76px 0 24px; }
.tour__texte { position: relative; }
/* Alle Texte liegen im selben Rasterfeld: der Behälter ist so hoch wie der
   längste, und jeder beginnt oben — keine springende Überschrift. */
.js .tour__texte { display: grid; }
.tour__text { padding: 8px 0; }
/* Nur optisch verborgen, nicht per visibility: so bleiben alle zehn Texte im
   Lesefluss eines Bildschirmlesers, auch ohne zu scrollen. Sie enthalten
   nichts Bedienbares. */
.js .tour__text { grid-area: 1 / 1; opacity: 0; pointer-events: none; user-select: none; transform: translateY(14px); transition: opacity .45s cubic-bezier(.22, .61, .36, 1), transform .45s cubic-bezier(.22, .61, .36, 1); }
.js .tour__text.ist-aktiv { opacity: 1; pointer-events: auto; user-select: auto; transform: none; }
html:not(.js) .tour__text { padding: 20px 0; border-top: 1px solid var(--linie); }
.tour__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--tief, var(--akzent)) 78%, #33261F); }
.tour__eyebrow svg { width: 26px; height: 26px; }
.tour__text[data-bereich="maissage"] .tour__eyebrow { text-transform: none; letter-spacing: .06em; }
.tour__titel { font-family: var(--schrift-titel); font-size: clamp(28px, 2.8vw, 40px); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; margin-top: 14px; text-wrap: balance; }
.tour__satz { margin-top: 16px; color: var(--neben); font-size: 16.5px; line-height: 1.6; }
.tour__punkte { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.tour__punkte li { position: relative; padding-left: 22px; font-size: 15px; color: var(--text); line-height: 1.5; }
.tour__punkte li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 9px; height: 9px; border-radius: 3px; background: var(--hell, var(--akzent-hell)); box-shadow: inset 0 0 0 1.5px var(--tief, var(--akzent)); }

/* Fortschritt: zehn Striche, zugleich Sprungmarken für Tastatur und Maus. */
.tour__schritte { display: none; }
.js .tour__schritte { display: flex; gap: 5px; margin-top: 26px; }
.tour__schritt { flex: 1; height: 44px; padding: 20px 0; position: relative; }
.tour__schritt::before { content: ""; display: block; height: 4px; border-radius: 2px; background: rgba(51, 38, 31, .3); transition: background .3s; }
.tour__schritt.ist-aktiv::before, .tour__schritt.ist-vorbei::before { background: var(--akzent); }
.tour__schritt.ist-vorbei::before { opacity: .45; }

/* Das Fenster richtet sich auch an der Höhe aus: auf einem Laptop mit
   Dock (etwa 1440 × 700) lag sonst die Knopfzeile unter dem Rand. */
.tour__fenster { position: relative; width: 100%; max-width: calc((100svh - 110px) * 1120 / 740); justify-self: center; }
.tour__fenster .a-rahmen { position: relative; z-index: 1; }
.tour__fenster .a-eintrag:not(.a-f-settings) { cursor: pointer; }
/* Der Bogen aus dem Markenzeichen rahmt das Fenster beim Hereinscrollen und
   tritt zurück, sobald die Tour läuft. Zwei gespiegelte Hälften, jede von
   ihrem Fuß aus gezeichnet (--portal aus main.js). */
.tour__bogen { position: absolute; z-index: 0; left: -4.5%; right: -4.5%; top: -15%; bottom: 14%; pointer-events: none; opacity: calc(1 - var(--tour-p, 0) * 9); }
.tour__bogen svg { width: 100%; height: 100%; display: block; }
.tour__rand { stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--portal, 1) / .85)); }

/* ── Plattformen: wer was kann ─────────────────────────────────────── */
.plattformen { background: var(--grund-fokus); }
/* position: relative hält die unsichtbaren Zellbeschriftungen im Rollbereich —
   ohne das lagen sie rechts außerhalb und machten die Seite auf dem Handy breiter. */
.matrix { position: relative; overflow-x: auto; border-radius: 20px; }
.matrix td { position: relative; }
.matrix table { width: 100%; min-width: 640px; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; box-shadow: var(--schatten-hoch); }
.matrix col.matrix__erste { width: 22%; }
.matrix th, .matrix td { padding: 13px 16px; text-align: left; border-bottom: 1px solid #F0E4D8; vertical-align: top; }
.matrix tbody th:not([colspan]), .matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--karte); }
.matrix thead th:first-child { background: #FBF4EC; }
.matrix tr:last-child td, .matrix tr:last-child th { border-bottom: 0; }
.matrix thead th { font-size: 13px; font-weight: 700; color: var(--neben); background: #FBF4EC; }
.matrix thead th:first-child { border-top-left-radius: 20px; }
.matrix thead th:last-child { border-top-right-radius: 20px; }
.matrix thead th span { display: inline-flex; align-items: center; gap: 8px; }
.matrix thead svg { width: 22px; height: 22px; }
.matrix tbody th { font-size: 15px; font-weight: 700; white-space: nowrap; }
.matrix tbody th i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--f); margin-right: 10px; vertical-align: 1px; }
.matrix td { font-size: 13px; color: var(--leise); }
.matrix .ja, .matrix .teils { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.matrix .ja::before, .matrix .teils::before, .matrix__muster { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--salbei); box-shadow: 0 0 0 3px rgba(79, 98, 67, .14); }
.matrix .teils::before, .matrix__muster.teils { background: linear-gradient(90deg, var(--ocker) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ocker), 0 0 0 3px rgba(126, 90, 34, .12); }
.matrix .nein { color: var(--leise); }
.matrix__muster.nein { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; font-style: normal; color: var(--leise); }
.matrix small { display: block; margin-top: 3px; font-size: 12px; color: var(--leise); line-height: 1.35; }
.matrix__gruppe th { position: static; padding-top: 18px; padding-bottom: 8px; font-size: 11px !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--akzent) !important; background: transparent; }
.matrix__legende { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin-top: 20px; font-size: 13.5px; color: var(--neben); }
.matrix__legende span { display: inline-flex; align-items: center; gap: 8px; }
.matrix__fuss { margin-top: 10px; text-align: center; font-size: 13.5px; color: var(--leise); }

/* ── So arbeitet Reponara ──────────────────────────────────────────── */
.prinzipien__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.prinzip { padding: 26px 24px 24px; position: relative; overflow: hidden; }
.prinzip__icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(147, 71, 42, .10); color: var(--akzent); }
.prinzip__icon svg { width: 20px; height: 20px; }
.prinzip h3 { font-family: var(--schrift-titel); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin-top: 16px; text-wrap: balance; }
.prinzip p { margin-top: 8px; font-size: 15px; color: var(--neben); line-height: 1.6; }
.prinzip--held { background: var(--focus); border: 0; color: #FFF5E9; grid-row: span 2; display: flex; flex-direction: column; box-shadow: 0 30px 60px -34px rgba(48, 36, 49, .7); }
.prinzip--held .prinzip__icon { background: rgba(255, 255, 255, .14); color: #FFE7D2; }
.prinzip--held h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.prinzip--held p { color: rgba(255, 245, 233, .78); }
.prinzip--held ul { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.prinzip--held li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: #FFF5E9; line-height: 1.45; }
.prinzip--held li svg { width: 17px; height: 17px; color: #E4BC97; flex: none; margin-top: 2px; }
.prinzip--breit { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 20px 24px; }
.prinzip--breit .prinzip__icon { grid-row: span 2; }
.prinzip--breit h3 { margin-top: 0; }
.prinzip--breit p { margin-top: 4px; }

/* ── Preis ─────────────────────────────────────────────────────────── */
.preis { background: var(--grund-fokus); }
.preis__umschalter { display: flex; justify-content: center; gap: 6px; margin: 0 auto 32px; padding: 5px; width: fit-content; border-radius: 14px; background: var(--karte); border: 1px solid var(--linie); }
.preis__zeitraum { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; color: var(--neben); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.preis__zeitraum.ist { background: var(--text); color: var(--flaeche); }
.preis__zeitraum em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: rgba(79, 98, 67, .14); color: var(--salbei); }
.preis__zeitraum.ist em { background: rgba(250, 246, 240, .2); color: var(--flaeche); }
.preis .je-jahr { display: none; }
.preis--jahr .je-monat { display: none; }
.preis--jahr .je-jahr { display: inline; }
.preis__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin-inline: auto; align-items: stretch; }
/* Drei Pakete: zwei Einstiege für verschiedene Creator, dazu Komplett. */
.preis__raster--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; }
.preis__fuer { margin-top: 6px; font-size: 14px; color: var(--neben); }
.preis__ersparnis { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--salbei); }
.preis__karte { position: relative; display: flex; flex-direction: column; padding: 32px 30px 28px; box-shadow: var(--schatten-hoch); }
.preis__stufe { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--neben); }
.preis__betrag { font-family: var(--schrift-titel); font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-top: 10px; }
.preis__hinweis { color: var(--neben); font-size: 14.5px; margin-top: 6px; }
.preis__enthalten { margin-top: 26px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); font-weight: 700; }
.punkte { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.punkte li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.5; }
.punkte li::before { content: ""; position: absolute; left: 0; top: .2em; width: 17px; height: 17px; border-radius: 50%; background: rgba(79, 98, 67, .13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F6243' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.preis__knoepfe { display: flex; margin-top: 26px; }
.preis__knoepfe .pille { width: 100%; }
.preis__karte--pro { border-color: rgba(147, 71, 42, .45); box-shadow: 0 0 0 1px rgba(147, 71, 42, .16), 0 30px 60px -32px rgba(147, 71, 42, .5); }
.preis__empfohlen { position: absolute; top: -13px; right: 24px; padding: 5px 12px; border-radius: 9px; background: var(--focus); color: #FFF5E9; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { padding-bottom: calc(var(--abstand) * .45); }
.faq__innen { max-width: 900px; }
.faq__liste { display: flex; flex-direction: column; gap: 10px; }
.faq-eintrag { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); transition: border-color .3s, box-shadow .3s; }
.faq-eintrag.faq--offen { border-color: rgba(147, 71, 42, .35); box-shadow: 0 16px 34px -24px rgba(147, 71, 42, .45); }
.faq-eintrag h3 { font-size: inherit; font-weight: inherit; }
.faq-frage { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; text-align: left; font-size: 16.5px; font-weight: 600; border-radius: var(--radius); }
.faq-zeichen { width: 28px; height: 28px; border-radius: 9px; background: var(--erhoben); color: var(--akzent); position: relative; flex: none; }
.faq-zeichen::before, .faq-zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.8px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s; }
.faq-zeichen::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq--offen .faq-zeichen::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-antwort { padding: 0 22px 22px; color: var(--neben); font-size: 15.5px; line-height: 1.65; max-width: 760px; }
.faq-antwort[hidden] { display: none; }

/* ── Schluss ───────────────────────────────────────────────────────── */
.cta { padding-bottom: calc(var(--abstand) * .8); }
.cta__innen { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta__zeichen { width: 40px; height: 45px; margin-bottom: 22px; filter: drop-shadow(0 10px 20px rgba(147, 71, 42, .25)); }
.cta__titel { font-family: var(--schrift-titel); font-size: clamp(34px, 5.2vw, 66px); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; text-wrap: balance; }
.cta__text { margin-top: 20px; color: var(--neben); max-width: 540px; }
.cta__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.cta__abzeichen { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.cta__abzeichen li { display: inline-flex; gap: 8px; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px; background: var(--erhoben); color: var(--neben); font-size: 13px; }
.cta__abzeichen .icon { color: var(--akzent); width: 15px; height: 15px; }

/* ── Fußzeile ──────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--linie); padding: 50px 0 44px; background: var(--grund-fokus); }
.fuss__innen { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.fuss__zeichen { width: 32px; height: 36px; }
.fuss__links { display: flex; gap: 10px; font-size: 14px; color: var(--neben); flex-wrap: wrap; justify-content: center; }
.fuss__links a:hover { color: var(--text); }
.fuss__kontakt { display: inline-flex; gap: 10px; }
.fuss__copy { font-size: 13px; color: var(--leise); }

/* ── Rechtsseiten ──────────────────────────────────────────────────── */
.seite { padding-top: calc(84px + clamp(36px, 7vh, 80px)); min-height: 70vh; }
.seite__innen { max-width: 760px; }
.seite h1 { hyphens: auto; overflow-wrap: break-word; font-family: var(--schrift-titel); font-size: clamp(34px, 4.4vw, 54px); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin-bottom: 18px; }
.seite__hinweis { color: var(--neben); margin-bottom: 36px; }
.seite h2 { font-family: var(--schrift-titel); font-size: 20px; font-weight: 600; margin-top: 30px; margin-bottom: 8px; }
.seite p { color: var(--neben); }
.platzhalter { display: inline-block; padding: 10px 14px; border-radius: 10px; border: 1px dashed rgba(147, 71, 42, .6); color: var(--akzent); font-weight: 600; margin-top: 4px; }
.seite__zurueck { display: inline-block; margin-top: 48px; color: var(--neben); }
.seite__zurueck:hover { color: var(--text); }

@media (max-width: 1080px) and (orientation: landscape) {
  .preis__raster--drei { grid-template-columns: 1fr; max-width: 560px; }
}
/* ── Responsiv ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .prinzipien__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prinzip--held { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .tour__buehne { grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); gap: 26px; }
  .tour__satz { font-size: 15.5px; }
}
@media (max-width: 1180px) {
  .nav__menue { position: absolute; top: 64px; left: var(--rand); right: var(--rand); flex-direction: column; padding: 10px; background: rgba(255, 250, 246, .98); border: 1px solid var(--linie); border-radius: 18px; box-shadow: 0 20px 50px rgba(51, 38, 31, .2); display: none; margin: 0; }
  .nav--offen .nav__menue { display: flex; }
  .nav--offen .nav__menue .nav__menue-cta { display: flex; margin-top: 6px; }
  .nav__link { padding: 12px 14px; font-size: 16px; }
  .nav__burger { display: flex; }
  .nav__cta { display: none; }
  .nav__innen { height: 64px; }
  .hero__buehne { padding-top: calc(64px + 20px); }
}
@media (orientation: portrait) and (max-width: 1180px) {
  /* Handy und Tablet hochkant: Fenster oben, Text darunter. */
  .tour__buehne { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .js .tour__buehne { align-content: center; align-content: safe center; padding: 72px 0 16px; }
  .tour__fenster { order: -1; width: 100%; max-width: calc((100svh - 380px) * 1120 / 740); margin-inline: auto; }
  .tour__bogen { display: none; }
  .tour__links { display: flex; flex-direction: column; }
  .js .tour__schritte { order: -1; margin: 0 0 12px; }
  .tour__titel { font-size: clamp(24px, 6vw, 32px); margin-top: 10px; }
  .tour__satz { margin-top: 10px; font-size: 15px; }
  .tour__punkte { margin-top: 12px; gap: 6px; }
  .tour__punkte li { font-size: 14px; }
  .fokus-band { border-radius: 16px; }
  .preis__raster { grid-template-columns: 1fr; max-width: 520px; }
  .preis__raster--drei { grid-template-columns: 1fr; }
}
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1180px) {
  .hero { --szene-h: 76svh; }
  /* Die Sonne steht knapp über der Titeloberkante, gerechnet von der Mitte
     des Inhalts aus (Polster oben 84, unten wie .hero__buehne). Mittig
     hinter dem Titel liefen die Strahlen durch Fließtext und Knöpfe. */
  .szene__gestirn { width: min(46vh, 460px); top: calc((84px + var(--szene-h) - clamp(110px, 19vh, 220px)) / 2 - 190px - min(46vh, 460px) * .5); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  /* Der Leitspruch ist auch eingeklappt noch so breit wie sein Text — auf dem
     Handy schob er Sprachknopf und Menü aus dem Bild. */
  .nav__logo { min-width: 0; }
  .nav__rechts { gap: 8px; }
  .nav__sprache { padding: 9px 11px; }
  .hero__titel { font-size: clamp(32px, 9vw, 44px); }
  /* Kleine Handys (etwa 375 × 553 in Safari): Der Inhalt ist höher als der
     Bildschirm — die Szene wächst mit, sonst lägen „Scrollen“ und die Dünen
     auf Hinweiszeile und Knöpfen. */
  .hero { --szene-h: max(100svh, 690px); }
  .hero__knoepfe, .cta__knoepfe { width: 100%; flex-direction: column; }
  .fuss__links > span[aria-hidden], .fuss__kontakt > span[aria-hidden] { display: none; }
  .fuss__links a { padding: 10px 8px; }
  .nav__sprache { min-height: 42px; }
  .matrix table { min-width: 540px; }
  .matrix th, .matrix td { padding: 12px 10px; }
  .matrix col.matrix__erste { width: 118px; }
  .pille--gross { width: 100%; padding: 15px 20px; font-size: 15px; }
  .prinzipien__raster { grid-template-columns: minmax(0, 1fr); }
  .fokus-chip { height: 36px; font-size: 13px; padding: 0 11px; }
  .kopf__motiv { width: 190px; top: -88px; }
  .faq-frage { font-size: 15.5px; padding: 17px 18px; }
  .faq-antwort { padding: 0 18px 18px; font-size: 15px; }
}
@media (max-width: 420px) {
  .nav__innen { gap: 10px; }
  .nav__logo { gap: 8px; }
  .nav__wordmark { width: 118px; }
}
@media (max-height: 760px) {
  .tour__satz { font-size: 15px; margin-top: 10px; }
  .tour__punkte { margin-top: 12px; gap: 6px; }
  .tour__punkte li { font-size: 14px; }
}
/* Kleines Handy hochkant, Safari mit Leisten: Punkte weg, Titel kleiner —
   sonst bliebe für das Fenster kaum Platz. */
@media (orientation: portrait) and (max-height: 620px) {
  .tour__fenster { max-width: calc((100svh - 300px) * 1120 / 740); }
  .tour__titel { font-size: 22px; margin-top: 8px; }
  .tour__satz { font-size: 14.5px; line-height: 1.5; margin-top: 8px; }
}
/* Handy quer und niedrige Fenster: zweispaltig bleiben, das Fenster an der
   Höhe ausrichten — gestapelt sähe man den Text nie. */
@media (max-height: 560px) and (orientation: landscape) {
  /* Der Hero-Inhalt ist hier höher als der Bildschirm — die Szene wächst mit,
     sonst liefe der Dünenkamm durch die Knöpfe. */
  .hero { --szene-h: 560px; }
  .szene__wink { display: none; }
  .js .tour__buehne { padding: 72px 0 10px; }
  .tour__fenster { width: 100%; max-width: calc((100svh - 70px) * 1120 / 740); justify-self: center; }
  .tour__bogen { display: none; }
  .tour__titel { font-size: 22px; margin-top: 8px; }
}

/* ── Automatik: von Hand gegen Reponara ───────────────────────────── */
.automatik { background: var(--bg); }
.auto__vergleich { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 18px; max-width: 1080px; margin: 0 auto; align-items: stretch; }
.auto__spalte { padding: 30px 30px 26px; border-radius: var(--radius); display: flex; flex-direction: column; }
.auto__spalte--hand { box-shadow: none; }
.auto__spalte--reponara { background: var(--focus); color: #FFF5E9; box-shadow: 0 30px 60px -34px rgba(48, 36, 49, .7); }
.auto__etikett { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--neben); }
.auto__spalte--reponara .auto__etikett { color: #F4C9A9; }
.auto__schritte { list-style: none; counter-reset: schritt; margin-top: 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.auto__schritte li { counter-increment: schritt; position: relative; padding-left: 38px; font-size: 15.5px; line-height: 1.5; color: var(--neben); }
.auto__schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; background: var(--erhoben); color: var(--neben); }
.auto__spalte--reponara .auto__schritte li { color: #FFF5E9; }
.auto__spalte--reponara .auto__schritte li::before { background: rgba(255, 245, 233, .14); color: #FFF5E9; }
.auto__spalte--reponara .auto__schritte li:last-child { font-weight: 600; }
.auto__spalte--reponara .auto__schritte li:last-child::before { background: var(--akzent-hell); color: #fff; }
.auto__mal { margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--linie); font-weight: 700; color: var(--akzent); }
.auto__spalte--reponara .auto__mal { border-top-color: rgba(255, 245, 233, .22); color: #F4C9A9; }
.kanaele { max-width: 1080px; margin: 18px auto 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; padding: 28px 30px; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); }
.kanaele__titel { font-family: var(--schrift-titel); font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.kanaele__text p { margin-top: 10px; color: var(--neben); font-size: 15.5px; line-height: 1.6; }
.kanaele__bild { display: flex; flex-direction: column; gap: 14px; }
.kanaele__zeile { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; }
.kanaele__name { font-size: 13px; font-weight: 700; color: var(--neben); }
.kanaele__balken { display: flex; gap: 3px; height: 34px; }
.kanaele__balken i { flex: 1; display: grid; place-items: center; border-radius: 7px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
.kanaele__balken--hand i { background: var(--erhoben); color: var(--neben); }
.kanaele__balken--rep { width: 14%; min-width: 120px; }
.kanaele__balken--rep i { background: var(--akzent); color: #fff; white-space: nowrap; padding: 0 10px; }

/* ── Pakete: was du bekommst ──────────────────────────────────────── */
.pakete { background: var(--grund-fokus); }
.pakete__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 1080px; margin: 0 auto; }
.paket { padding: 30px 30px 26px; display: flex; flex-direction: column; }
.paket__kopf { display: flex; gap: 14px; align-items: center; }
.paket__zeichen { width: 46px; height: 46px; padding: 10px; border-radius: 12px; background: var(--erhoben); flex: none; display: grid; place-items: center; }
.paket__zeichen svg { width: 26px; height: 26px; }
.paket__name { font-family: var(--schrift-titel); font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.paket__fuer { margin-top: 2px; font-size: 14px; color: var(--neben); }
.paket__etikett { margin-top: 24px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--akzent); }
.paket__punkte { flex: none; }
.paket__du { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: rgba(79, 98, 67, .1); font-size: 15px; color: var(--text); }
.paket__du b { color: var(--salbei); }
.paket__plattformen { margin-top: 14px; font-size: 13px; color: var(--leise); }
.pakete__komplett { max-width: 1080px; margin: 18px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 26px; border-radius: var(--radius); background: var(--focus); color: #FFF5E9; }
.pakete__komplett p { font-size: 16px; }
.pakete__komplett .pille { flex: none; }
.preis__auto { margin-top: 10px; display: inline-flex; align-self: flex-start; padding: 5px 10px; border-radius: 8px; background: rgba(79, 98, 67, .12); color: var(--salbei); font-size: 13px; font-weight: 700; }
@media (max-width: 860px) {
  .auto__vergleich, .pakete__raster, .kanaele { grid-template-columns: minmax(0, 1fr); }
  .pakete__komplett { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .auto__spalte, .paket { padding: 24px 20px 22px; }
  .kanaele { padding: 22px 20px; }
  .kanaele__zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .kanaele__balken i { font-size: 9px; }
}

/* ── Prüfung 08.10.2026 (impeccable) ──────────────────────────────── */
/* Im ersten Bildschirm hat „Reponara entdecken“ den Vorrang: der Knopf oben
   ist dort nur umrandet und füllt sich, sobald der Hero vorbei ist. */
.nav:not(.nav--weiter) .nav__cta { background: transparent; color: var(--akzent); box-shadow: inset 0 0 0 1.5px rgba(147, 71, 42, .5); }
.nav:not(.nav--weiter) .nav__cta:hover { background: rgba(147, 71, 42, .06); }
.nav__menue-cta { display: none; }


/* Tourtext, der nicht in die Bühne passt, scrollt in sich (Handy mit
   Leisten, 200 % Zoom, niedrige Fenster) — statt abgeschnitten oder
   ausgeblendet zu werden. Ein Verlauf zeigt, dass mehr kommt. */
.tour__texte.ist-ueberlang { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
@media (orientation: portrait) and (max-width: 1180px) {
  .js .tour__buehne { grid-template-rows: auto minmax(0, max-content); }
  .js .tour__links { align-self: stretch; min-height: 0; }
  .js .tour__texte { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .js .tour__text:not(.ist-aktiv) { position: absolute; inset: 0 0 auto 0; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .js .tour__buehne { grid-template-rows: minmax(0, 1fr); }
  .js .tour__links { align-self: stretch; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  .js .tour__texte { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .js .tour__text:not(.ist-aktiv) { position: absolute; inset: 0 0 auto 0; }
}

/* Handy: ein lesbarer Ausschnitt je Bereich statt der ganzen App in
   Briefmarkengröße. main.js setzt --s (≈ 0,6) und den Ausschnitt --ax/--ay. */
@media (max-width: 640px) {
  .tour .tour__fenster { max-width: none; }
  .tour__fenster .a-rahmen { aspect-ratio: auto; height: clamp(170px, 34svh, 300px); }
  .tour__fenster .a-fenster { transform: translate(calc(var(--ax, 0) * var(--s) * -1px), calc(var(--ay, 0) * var(--s) * -1px)) scale(var(--s)); transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
  .hero { --boden: 110px; }
  .preis__fuss { text-align: left; }
}

/* Abschluss */
.preis__fuss { max-width: 900px; margin: 22px auto 0; text-align: center; font-size: 14px; line-height: 1.6; color: var(--neben); }
.cta__adresse { margin-top: 16px; font-size: 15px; color: var(--neben); }
.cta__mail { color: var(--akzent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Fragen in Gruppen */
.faq__liste { gap: 34px; }
.faq-gruppe { display: flex; flex-direction: column; gap: 10px; }
.faq-gruppe__titel { font-family: var(--schrift-titel); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px 4px; color: var(--text); }
.faq-eintrag h4 { font-size: inherit; font-weight: inherit; margin: 0; }

/* Ränder der Browserflächen in der Markenfarbe */
::selection { background: rgba(193, 102, 63, .22); color: var(--text); }

/* Kontrastmodus (Windows): Zustände über Rand und Systemfarben statt Fläche. */
@media (forced-colors: active) {
  .tour__schritt::before { background: GrayText; forced-color-adjust: none; }
  .tour__schritt.ist-aktiv::before, .tour__schritt.ist-vorbei::before { background: Highlight; }
  .matrix .ja::before, .matrix__muster.ja { forced-color-adjust: none; background: CanvasText; }
  .matrix .teils::before, .matrix__muster.teils { forced-color-adjust: none; background: linear-gradient(90deg, CanvasText 50%, Canvas 50%); box-shadow: inset 0 0 0 1.5px CanvasText; }
  .pille, .faq-eintrag, .karte { border: 1px solid CanvasText; }
}

/* Druck: alles sichtbar, keine feste Leiste, keine Szene. */
@media print {
  .nav, .szene, .hero__netz, .tour__bogen, .tour__schritte, .springen, .szene__wink { display: none !important; }
  .js .reveal, html.szene-warten .hero__titel .zeile, html.szene-warten .hero__text, html.szene-warten .hero__knoepfe, html.szene-warten .hero__hinweis { opacity: 1 !important; transform: none !important; }
  .js .tour__lauf { height: auto; }
  .js .tour__buehne { position: static; height: auto; }
  .js .tour__text { position: static !important; opacity: 1 !important; transform: none !important; }
  .js .tour__texte { display: block; overflow: visible; }
  .tour__fenster { display: none; }
  .faq-antwort[hidden] { display: block; }
  .zeile--verlauf { -webkit-text-fill-color: currentColor; color: var(--akzent); background: none; }
  .hero__buehne { min-height: 0; transform: none !important; opacity: 1 !important; }
  body { background: #fff; }
}

/* ── Weniger Bewegung ──────────────────────────────────────────────── */
/* main.js setzt html.keine-bewegung bei prefers-reduced-motion (und beim
   Testhaken ?statisch) — deshalb steht der Block nur einmal. */
html.keine-bewegung { scroll-behavior: auto; }
html.keine-bewegung *, html.keine-bewegung *::before, html.keine-bewegung *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.keine-bewegung.js .reveal, html.keine-bewegung .reveal { opacity: 1; transform: none; }
html.keine-bewegung .szene__hof, html.keine-bewegung .hero__netz, html.keine-bewegung .szene__wink i { animation: none !important; }
html.statisch .nav { position: absolute; }

/* ── Warteliste (Schluss-Abschnitt) ──────────────────────────────── */
.warteliste { width: min(560px, 100%); margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.warteliste__zeile { width: 100%; display: flex; gap: 10px; }
.warteliste__feld { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--text); background: var(--karte); border: 1px solid var(--linie-2); border-radius: 12px; padding: 0 16px; min-height: 50px; box-shadow: var(--schatten); transition: border-color .2s, box-shadow .2s; }
.warteliste__feld::placeholder { color: var(--leise); opacity: 1; }
.warteliste__feld:focus { outline: none; border-color: var(--akzent-hell); box-shadow: 0 0 0 3px rgba(193, 102, 63, .18); }
.warteliste__feld[aria-invalid="true"] { border-color: var(--akzent); }
.warteliste__knopf { flex: none; }
.warteliste__knopf:disabled { opacity: .7; cursor: progress; transform: none; }
.warteliste__pakete { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.warteliste__pakete legend { float: left; margin-right: 6px; font-size: 14px; color: var(--neben); }
.warteliste__wahl { position: relative; display: inline-flex; cursor: pointer; }
.warteliste__wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.warteliste__wahl span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); font-size: 14px; font-weight: 600; color: var(--neben); transition: background .2s, border-color .2s, color .2s; }
.warteliste__wahl:hover span { border-color: var(--linie-2); }
.warteliste__wahl input:checked + span { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.warteliste__wahl input:focus-visible + span { outline: 2px solid var(--akzent-hell); outline-offset: 3px; }
.warteliste__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.warteliste__meldung { font-size: 15px; color: var(--neben); min-height: 0; }
.warteliste__meldung:empty { display: none; }
.warteliste__meldung--fehler { color: var(--akzent); font-weight: 600; }
.warteliste__meldung--ok { color: var(--salbei); font-weight: 600; max-width: 480px; }
.warteliste__hinweis { font-size: 13px; color: var(--leise); }
.warteliste__hinweis a { text-decoration: underline; text-underline-offset: 2px; }
.warteliste--fertig .warteliste__zeile, .warteliste--fertig .warteliste__pakete { display: none; }
@media (max-width: 640px) {
  .warteliste__zeile { flex-direction: column; }
  .warteliste__knopf { width: 100%; }
  .warteliste__pakete legend { float: none; width: 100%; margin: 0 0 2px; }
}

/* ── Durchgang (Hero): ein Clip in fünf Schritten ─────────────────────
   Aufbau wie die Instagram-Clips: Papierkarte, Schrittleiste oben, je
   Schritt eine Szene. main.js setzt .ist-aktiv (Szene) und .ist-an (Teile
   ab ihrem Zeitpunkt), die Bewegung liegt hier. */
.durchgang { position: relative; z-index: 2; width: min(540px, 100%); text-align: left; background: var(--karte); border: 1px solid var(--linie); border-radius: 22px; box-shadow: 0 40px 80px -42px rgba(86, 44, 22, .45), 0 3px 10px rgba(56, 36, 24, .04); padding: 16px 16px 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dg__kopf { display: flex; align-items: center; gap: 8px; }
.dg__schritte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; flex: 1; min-width: 0; }
.dg__schritt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 4px 4px; border-radius: 8px; text-align: left; color: var(--leise); font-size: 11.5px; font-weight: 600; line-height: 1.15; }
.dg__schritt:hover { color: var(--text); }
.dg__schritt::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 3px; background: var(--erhoben); }
.dg__schritt::after { content: ''; position: absolute; left: 4px; top: 6px; height: 3px; border-radius: 3px; width: 0; background: var(--akzent); }
.dg__schritt.ist-durch::after { width: calc(100% - 8px); }
.dg__schritt.ist-aktiv { color: var(--text); }
.dg__schritt.ist-aktiv::after { width: calc((100% - 8px) * var(--dg-fortschritt, 0)); }
.dg__schritt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dg__pause { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--neben); border: 1px solid var(--linie); background: var(--karte); }
.dg__pause:hover { border-color: var(--linie-2); }
.dg__pause svg { width: 12px; height: 12px; fill: currentColor; }
.dg__pause .dg__spiel { display: none; }
.dg__pause.ist-angehalten .dg__spiel { display: block; }
.dg__pause.ist-angehalten .dg__halt { display: none; }
html.keine-bewegung .dg__pause { display: none; }

.dg__buehne { position: relative; margin-top: 12px; height: 336px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); overflow: hidden; }
.dg__szene { position: absolute; inset: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s, transform .45s, visibility 0s .45s; }
.dg__szene.ist-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .45s .1s, transform .45s .1s, visibility 0s; }
.dg__etikett { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ocker); font-weight: 700; }
.dg__fuss { margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--neben); }
.dg__fuss b { font-family: var(--schrift-titel); font-size: 15px; color: var(--text); font-weight: 600; }

/* gemeinsame Teile */
[data-ab] { transition: opacity .4s, transform .5s cubic-bezier(.2,.75,.3,1), background .3s, border-color .3s, color .3s, width .9s cubic-bezier(.4,0,.2,1); }
.dg__auf { opacity: 0; transform: translateY(6px); }
.dg__auf.ist-an { opacity: 1; transform: none; }
.dg__haken { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--salbei); }
.dg__haken::before { content: '✓'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(79, 98, 67, .14); font-size: 10px; }
.dg__zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dg__bild { background-size: cover; background-position: center; border-radius: 8px; }
.dg__tippt::after { content: ''; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--akzent); animation: dgCursor .8s steps(1) infinite; }
@keyframes dgCursor { 50% { opacity: 0; } }
.dg__pille { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--erhoben); color: var(--text); font-size: 12px; font-weight: 600; }

/* 1 · Hinzufügen */
.dg__ablage { position: relative; flex: 1; border: 1.5px dashed var(--linie-2); border-radius: 12px; display: grid; place-items: center; color: var(--leise); font-size: 13px; transition: border-color .3s, background .3s; }
.dg__ablage.ist-an { border-color: var(--akzent-hell); background: rgba(193, 102, 63, .05); }
.dg__datei { position: absolute; right: 18px; top: 46px; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten-hoch); font-size: 12.5px; font-weight: 600; transform: translate(40px, -30px) rotate(4deg); opacity: 0; transition: transform 1s cubic-bezier(.2,.75,.3,1), opacity .4s; }
.dg__datei .dg__bild { width: 40px; height: 26px; }
.dg__datei.ist-an { opacity: 1; transform: translate(-120px, 92px) rotate(0); }
.dg__datei.ist-weg { opacity: 0; transform: translate(-120px, 100px) scale(.9); }
.dg__eintrag { position: absolute; inset: 18px; display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-content: center; opacity: 0; transform: scale(.97); }
.dg__eintrag.ist-an { opacity: 1; transform: none; }
.dg__eintrag .dg__bild { height: 100px; }
.dg__eintrag h4 { margin: 0 0 4px; font-family: var(--schrift-titel); font-size: 17px; font-weight: 600; }
.dg__eintrag p { font-size: 12.5px; color: var(--neben); }
.dg__ordner { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

/* 2 · Trailer & Thumbnail */
.dg__streifen { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; height: 54px; }
.dg__streifen i { border-radius: 4px; background-size: 800% 100%; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .3s, transform .3s; }
.dg__streifen i.ist-an { outline-color: var(--akzent-hell); transform: translateY(-3px); }
.dg__spur { position: relative; height: 26px; border-radius: 7px; background: var(--erhoben); overflow: hidden; }
.dg__spur b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #C1663F, #93472A); border-radius: 7px; }
.dg__spur b.ist-an { width: 100%; transition: width 1.4s cubic-bezier(.4,0,.2,1); }
.dg__spur span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; color: #fff; mix-blend-mode: normal; }
.dg__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dg__kachel { border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); padding: 9px; display: flex; flex-direction: column; gap: 7px; }
.dg__kachel .dg__bild { height: 62px; }
.dg__kachel small { font-size: 11px; color: var(--leise); }

/* 3 · Texte */
.dg__quelle { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(126, 90, 34, .1); color: var(--ocker); font-size: 11.5px; font-weight: 700; }
.dg__feld { border: 1px solid var(--linie); border-radius: 9px; background: var(--karte); padding: 7px 10px; }
.dg__feld small { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--leise); font-weight: 700; margin-bottom: 2px; }
.dg__feld p { font-size: 13px; min-height: 1.4em; }
.dg__feld--lang p { min-height: 2.8em; color: var(--neben); }
.dg__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.dg__chips .dg__pille { font-size: 11.5px; padding: 3px 9px; opacity: 0; transform: scale(.8); }
.dg__chips .dg__pille.ist-an { opacity: 1; transform: none; }

/* 4 · Upload */
.dg__plattformen { display: flex; flex-direction: column; gap: 5px; }
.dg__pf { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--linie); border-radius: 9px; background: var(--karte); font-size: 12px; }
.dg__pf b { font-size: 12.5px; }
.dg__pf .dg__spur { height: 6px; }
.dg__pf .dg__spur b { transition: width .45s; }
.dg__pf .dg__haken { opacity: 0; }
.dg__pf.ist-an { border-color: rgba(79, 98, 67, .35); background: rgba(79, 98, 67, .05); }
.dg__pf.ist-an .dg__spur b { width: 100%; background: var(--salbei); }
.dg__pf.ist-an .dg__haken { opacity: 1; }
.dg__stapel { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--neben); padding-top: 4px; }
.dg__stapel .dg__bild { width: 34px; height: 22px; border-radius: 5px; opacity: .45; outline: 2px solid transparent; transition: opacity .3s, outline-color .3s; }
.dg__stapel .dg__bild.ist-an { opacity: 1; outline-color: var(--salbei); }

/* 5 · Posten */
.dg__kanaele { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dg__kanal { border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.dg__kanal b { font-size: 13px; }
.dg__kanal.ist-an { border-color: rgba(79, 98, 67, .35); }
.dg__teaser { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; }
.dg__teaser .dg__bild { height: 44px; }
.dg__laengen { display: flex; gap: 5px; }
.dg__laengen .dg__pille { font-size: 11px; padding: 3px 9px; background: var(--karte); border: 1px solid var(--linie); }
.dg__laengen .dg__pille.ist-an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.dg__promo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dg__promo .dg__kanal { padding: 7px 9px; }
.dg__promo small { font-size: 10.5px; color: var(--leise); line-height: 1.3; }
.dg__knopf { align-self: flex-start; position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; background: var(--akzent); color: #fff; font-size: 13px; font-weight: 700; box-shadow: 0 10px 22px -12px rgba(147, 71, 42, .8); }
@keyframes dgKlick { 40% { transform: scale(.95); } }
/* Zeiger: fliegt von unten rechts auf seinen Knopf und drückt ihn */
.dg__wahl { position: relative; }
.dg__zeiger { position: absolute; right: -6px; bottom: -12px; width: 20px; height: 20px; pointer-events: none; opacity: 0; transform: translate(34px, 30px); transition: transform .7s cubic-bezier(.3,.7,.3,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.22)); }
.dg__zeiger.ist-an { opacity: 1; transform: none; }
.dg__knopf:has(.dg__zeiger.ist-an), .dg__wahl:has(.dg__zeiger.ist-an) { animation: dgKlick .45s .65s ease; }
.dg__wahl:has(.dg__zeiger.ist-an) { background: var(--akzent); color: #fff; transition-delay: .7s; }
/* Nach dem Ablegen: Datei und Ablage weichen der fertigen Karte */
.dg__ablage.ist-an span { opacity: 0; }
.dg__szene:has(.dg__eintrag.ist-an) .dg__datei { opacity: 0; transform: translate(-120px, 100px) scale(.9); }
.dg__szene:has(.dg__eintrag.ist-an) .dg__ablage { border-color: transparent; background: transparent; }

html.keine-bewegung .durchgang *, html.keine-bewegung .durchgang *::after { transition: none !important; animation: none !important; }

/* Hero mit Durchgang: Text links, Durchgang rechts (ab 1100 px) */
.hero__buehne { gap: 40px; }
.hero__kopf { display: flex; flex-direction: column; align-items: center; }
html.szene-warten .durchgang { opacity: 0; }
html.szene-an .durchgang { animation: zeileAuf 1s 1.7s cubic-bezier(.2,.75,.3,1) both; }
@media (min-width: 1100px) {
  .hero__innen { text-align: left; }
  .hero__buehne { display: grid; grid-template-columns: minmax(0, 1fr) 540px; align-items: center; column-gap: clamp(36px, 5vw, 80px); }
  .hero__kopf { align-items: flex-start; }
  .hero__titel { font-size: clamp(44px, 4.6vw, 68px); }
  .hero__knoepfe { justify-content: flex-start; }
}
@media (max-width: 1099px) {
  .durchgang { margin-inline: auto; }
  /* Untereinander: nur der Textblock blendet beim Scrollen aus — der
     Durchgang darunter kommt ja erst dann ins Bild. */
  .hero__buehne { transform: none; opacity: 1; }
  .hero__kopf { transform: translate3d(0, calc(var(--hero, 0) * -96px), 0); opacity: calc(1 - max(0, var(--hero, 0) - .2) * 2.6); }
}
@media (max-width: 640px) {
  .durchgang { padding: 12px 10px 10px; border-radius: 18px; }
  .dg__schritt { font-size: 10px; }
  .dg__buehne { height: 392px; }
  .dg__szene { padding: 12px; gap: 8px; }
  .dg__eintrag { grid-template-columns: 1fr; gap: 8px; align-content: start; top: 40px; }
  .dg__fuss span { display: none; }
  .dg__feld { padding: 6px 9px; }
  .dg__quelle { font-size: 10.5px; padding: 4px 8px; }
  .dg__eintrag .dg__bild { height: 90px; }
  .dg__datei.ist-an { transform: translate(-80px, 92px) rotate(0); }
  .dg__promo small { display: none; }
}

/* ── Funktionen: sechs Kacheln mit kleinen Schaubildern ──────────────
   Ersetzt die Tour mit den App-Fenstern (bis 18.10.2026). Jede Kachel hat
   eine eigene Ton-Farbe (--ton); das Schaubild läuft einmal ab, wenn die
   Kachel ins Bild kommt (.ist-sichtbar, Reihenfolge über --i). */
.funktionen { padding-top: calc(var(--abstand) * .6); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.kachel { --ton: var(--akzent); position: relative; display: flex; flex-direction: column; gap: 22px; padding: 26px; border-radius: 24px; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); overflow: hidden; }
.kachel--breit { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 28px; }
.kachel--salbei { --ton: #4F6243; } .kachel--ocker { --ton: #7E5A22; } .kachel--terra { --ton: #93472A; } .kachel--blau { --ton: #4B5F6E; } .kachel--rose { --ton: #8A4A57; }
.kachel__kicker { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--ton); }
.kachel__titel { margin-top: 10px; font-family: var(--schrift-titel); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
.kachel__satz { margin-top: 12px; font-size: 15.5px; color: var(--neben); max-width: 46ch; }
.kachel__bild { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--ton) 8%, var(--flaeche)); border: 1px solid color-mix(in srgb, var(--ton) 16%, var(--linie)); margin-top: auto; font-size: 13px; }
.kachel--breit .kachel__bild { margin-top: 0; }

/* Auftritt der Teile: erst beim Sichtbarwerden */
.js .kachel [style*="--i"] { opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .55s cubic-bezier(.2,.75,.3,1); transition-delay: calc(var(--i) * .09s + .05s); }
.js .kachel.ist-sichtbar [style*="--i"] { opacity: 1; transform: none; }

/* Upload: Reihen füllen sich */
.sb-reihen { display: flex; flex-direction: column; gap: 6px; }
.sb-reihe { display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); }
.sb-reihe b { font-size: 12.5px; }
.sb-balken { position: relative; height: 6px; border-radius: 6px; background: var(--erhoben); overflow: hidden; }
.sb-balken::after { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--ton); border-radius: 6px; transition: transform .7s cubic-bezier(.4,0,.2,1); transition-delay: calc(var(--i) * .09s + .25s); }
.kachel.ist-sichtbar .sb-balken::after, html:not(.js) .sb-balken::after { transform: none; }
.sb-ok { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--ton); }
.sb-ok::before { content: '✓'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in srgb, var(--ton) 16%, transparent); font-size: 10px; }
.sb-knopf { align-self: flex-start; margin-top: 4px; padding: 10px 16px; border-radius: 10px; background: var(--akzent); color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 10px 22px -12px rgba(147, 71, 42, .8); }

/* Texte: Stichworte → Titel → Plattformen */
.sb-chips, .sb-pillen, .sb-ergebnis { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-chips span { padding: 5px 11px; border-radius: 999px; background: var(--karte); border: 1px dashed color-mix(in srgb, var(--ton) 40%, var(--linie)); font-size: 12.5px; font-weight: 600; }
.sb-zeile { padding: 9px 12px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); }
.sb-zeile small { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--leise); font-weight: 700; }
.sb-zeile p { font-size: 14px; font-weight: 600; margin-top: 2px; }
.sb-pillen span, .sb-ergebnis span { padding: 4px 10px; border-radius: 999px; background: var(--ton); color: #fff; font-size: 11.5px; font-weight: 700; }
.sb-ergebnis span::before { content: '✓ '; }

/* Trailer: Filmstreifen, Spur, Ergebnis */
.sb-film { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; height: 58px; }
.sb-film i { border-radius: 6px; background: url(../assets/app/strand.webp) var(--x) 50% / 600% auto; opacity: .55; }
.sb-film i.sb-wahl { opacity: 1; box-shadow: 0 0 0 2px var(--karte), 0 0 0 4px var(--ton); }
.sb-spur { position: relative; height: 26px; border-radius: 8px; background: var(--erhoben); overflow: hidden; }
.sb-spur i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #C1663F, #93472A); transition: transform 1.2s cubic-bezier(.4,0,.2,1) .9s; }
.kachel.ist-sichtbar .sb-spur i, html:not(.js) .sb-spur i { transform: none; }
.sb-spur span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; color: #fff; }

/* Posten */
.sb-kanaele { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-kanaele--drei { grid-template-columns: repeat(3, 1fr); }
.sb-kanal { display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); }
.sb-kanal b { font-size: 13px; }
.sb-kanal small { font-size: 11px; color: var(--leise); line-height: 1.3; }
.sb-teaser { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie); font-weight: 600; font-size: 12.5px; }
.sb-teaser i { height: 38px; border-radius: 7px; background: url(../assets/app/strand.webp) center / cover; }
.sb-teaser b { padding: 3px 9px; border-radius: 999px; background: var(--ton); color: #fff; font-size: 11px; }

/* Chats */
.sb-chat { display: flex; flex-direction: column; gap: 8px; }
.sb-blase { max-width: 88%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.4; }
.sb-blase--fan { align-self: flex-start; background: var(--karte); border: 1px solid var(--linie); border-bottom-left-radius: 5px; }
.sb-hinweis { align-self: flex-end; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ton); margin-top: 4px; }
.sb-blase--vorschlag { align-self: flex-end; background: var(--karte); border: 1px dashed color-mix(in srgb, var(--ton) 45%, var(--linie)); border-bottom-right-radius: 5px; color: var(--neben); }
.sb-blase--gewaehlt { background: var(--ton); border: 1px solid var(--ton); color: #fff; }

/* Umsätze: Säulen */
.sb-saeulen { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 8px; height: 150px; }
.sb-saeulen span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; font-size: 10.5px; font-weight: 700; color: var(--neben); }
.sb-saeulen i { width: 100%; height: var(--h); border-radius: 7px 7px 3px 3px; background: linear-gradient(to top, color-mix(in srgb, var(--ton) 70%, #fff), var(--ton)); transform-origin: bottom; }
.js .kachel .sb-saeulen span[style*="--i"] { transform: none; }
.js .kachel .sb-saeulen i { transform: scaleY(0); transition: transform .8s cubic-bezier(.2,.75,.3,1); transition-delay: calc(var(--i) * .12s + .3s); }
.js .kachel.ist-sichtbar .sb-saeulen i { transform: none; }
.sb-beispiel { align-self: flex-end; font-size: 11px; color: var(--leise); }

html.keine-bewegung .kachel *, html.keine-bewegung .kachel *::after { transition: none !important; }

@media (max-width: 1080px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .kachel--breit { grid-column: span 2; }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
  .kachel, .kachel--breit { grid-column: auto; display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 20px; }
  .kachel__bild { padding: 14px; }
  .sb-reihe { grid-template-columns: 76px 1fr auto; padding: 7px 10px; }
  .sb-kanaele--drei { grid-template-columns: 1fr 1fr 1fr; }
  .sb-kanal small { font-size: 10.5px; }
}
.funktionen .kanaele { max-width: none; border-radius: 24px; }