/* ═══════════════════════════════════════════════════════════════════════
   Reponara — Webseite
   Aufbau nach senthora.ai, Farben aus dem Brandkit (brand/studio/tokens,
   »gebrannte Erde«: Terrakotta · Ocker · Salbei auf Creme). Tokens stehen oben; alles andere leitet sich ab.
   Die App-Nachbauten (.app, .lk, .bp, .lg, .st, .po, .dlg …) folgen der
   echten Oberfläche: eine Karte pro Zeile, „VERÖFFENTLICHT AUF" als
   Namenszeile, Datei-Punkte, Jahr-Marken, Batch-Panel mit Protokoll.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Grund und Flächen (Kit: Creme, Papier, Düne).
     Der Grund ist seit dem 14.09.2026 durchgehend Creme — der frühere
     Düne-Verlauf am Seitenanfang liess die Ueberschrift dort matt wirken. */
  --bg: #FAF6F0;
  --flaeche: #FFFCF7;
  --flaeche-2: #EDE1D0;
  /* Text (Dark textPrimary / textSecondary) */
  --text: #33261F;
  --gedaempft: #7A685A;
  --gedaempft-2: #59483B;
  /* Linien (Dark border) */
  --linie: rgba(51, 38, 31, .10);
  --linie-2: rgba(51, 38, 31, .18);
  /* Der eine Farbknall: Terrakotta/Ocker (Kit »gebrannte Erde«) */
  --akzent: #93472A;
  --akzent-text: #93472A;
  --akzent-2: #C1663F;
  --akzent-dim: rgba(193, 102, 63, .14);
  --verlauf: linear-gradient(100deg, #C1663F 0%, #B08240 55%, #7C8F6E 100%);
  /* Die Verlaufsfarben des Band-R — Logo-Chip und Leiterbahnen */
  --band: #C1663F;
  --band-hell: #D9895E;
  --band-dim: rgba(193, 102, 63, .14);
  --bahn: rgba(193, 102, 63, .40);
  --bahn-hell: #D9895E;
  /* Knöpfe wie in der App: Creme auf Röstbraun */
  --knopf: #33261F;
  --knopf-text: #FAF6F0;
  /* App-Karten-Palette (content_card.dart, Nacht) */
  --k-ink: #33261F;
  --k-muted: #7A685A;
  --k-leise: #A5988A;
  --k-gruen: #4F6243;
  --k-gold: #7E5A22;
  /* Flächen der App-Nachbauten. Die echte App ist hell mit dunkler
     Seitenleiste — die Nachbauten folgen ihr. */
  --a-bg: #EDE1D0;
  --a-flaeche: #FFFCF7;
  --a-flaeche-2: #F6EFE3;
  --a-linie: rgba(51, 38, 31, .12);
  --a-linie-2: rgba(51, 38, 31, .20);
  --a-seite: #2C211A;
  --gruen: #4F6243;
  /* Maße wie die Vorlage */
  --container: 1200px;
  --rand: clamp(20px, 5vw, 72px);
  --abstand: clamp(84px, 12vh, 150px);
  --abstand-titel: clamp(44px, 7vh, 76px);
  --fs-h2: clamp(30px, 4.4vw, 58px);
  --radius-karte: 22px;
  --radius-feld: 14px;
  --schrift: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --schrift-app: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Urbanist', sans-serif;
}

/* ── Grund ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 50% -180px, rgba(193, 102, 63, .05), transparent 62%);
  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(--band-hell); outline-offset: 3px; border-radius: 6px; }
main { display: block; }
section { position: relative; padding: var(--abstand) 0; scroll-margin-top: 78px; }
.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: 100px; background: var(--knopf-text); color: var(--knopf); font-weight: 600; }
.springen:focus { left: 10px; }

/* ── Schrift ───────────────────────────────────────────────────────── */
.h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin-bottom: clamp(28px, 5vh, 56px); }
.h2--mitte { text-align: center; }
.h3 { font-size: clamp(26px, 3vw, 41px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.h2 .hervor { color: var(--gedaempft-2); }
.h3 .hervor { color: var(--akzent); }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--akzent-text); margin-bottom: 18px; }
.kicker--mitte { text-align: center; }
.zeile { display: block; }
.zeile--verlauf { display: inline-block; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Bausteine ─────────────────────────────────────────────────────── */
.pille { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 100px; padding: 12px 22px; 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; }
.pille:hover { transform: translateY(-1px); }
.pille--gross { padding: 16px 26px; font-size: 16px; }
.pille--klein { padding: 9px 16px; font-size: 13px; }
.pille--creme { background: var(--knopf-text); color: var(--knopf); box-shadow: 0 10px 30px rgba(51, 38, 31, .17); }
.pille--creme:hover { background: #453427; }
.pille--verlauf { background: var(--verlauf); color: #fff; box-shadow: 0 0 24px rgba(193, 102, 63, .4); }
.pille--verlauf:hover { box-shadow: 0 0 34px rgba(193, 102, 63, .55); }
.pille--geist { background: rgba(51, 38, 31, .05); border-color: var(--linie-2); color: var(--gedaempft-2); }
.pille--geist:hover { background: rgba(51, 38, 31, .09); color: var(--text); }
.pille[aria-disabled="true"] { opacity: .55; cursor: default; box-shadow: none; }
.pille[aria-disabled="true"]:hover { transform: none; }

.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-karte); box-shadow: 0 16px 30px -8px rgba(51, 38, 31, .19), 0 3px 8px -2px rgba(51, 38, 31, .14); }

.chip { display: grid; place-items: center; }
.chip img { border-radius: 22%; filter: drop-shadow(0 10px 30px rgba(193, 102, 63, .55)); animation: chipAtmen 4.5s ease-in-out infinite; }
@keyframes chipAtmen {
  0%, 100% { filter: drop-shadow(0 10px 30px rgba(193, 102, 63, .55)); }
  50% { filter: drop-shadow(0 14px 40px rgba(193, 102, 63, .8)); }
}

/* Leiterbahnen und Lichtpulse (SVG) */
.verlauf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Die Leiterbahnen tragen den Marken-Verlauf (Terrakotta -> Ocker -> Salbei).
   Je Leiste ein eigener Verlauf, weil die Koordinatensysteme verschieden sind. */
.verbinder__bahn, .bahnen path { fill: none; stroke: url(#bahnV); stroke-width: 2.2; opacity: .9; vector-effect: non-scaling-stroke; }
.bahnen path { stroke: url(#bahnH); }
.technik__bahnen .verbinder__bahn { stroke: url(#bahnT); }
.verbinder__punkt, .knoten circle { fill: var(--akzent-2); filter: drop-shadow(0 0 7px rgba(176, 130, 64, .75)); }
.verbinder__puls { fill: none; stroke: var(--akzent-2); stroke-width: 3.2; filter: drop-shadow(0 0 5px rgba(193, 102, 63, .8)); stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 30 900; animation: pulsLauf 4s linear infinite; filter: drop-shadow(0 0 5px var(--band-hell)); }
.verbinder__puls--quer { stroke-dasharray: 24 700; animation-name: pulsLaufQuer; animation-duration: 3.2s; }
.verbinder__puls--v2 { animation-delay: -1.1s; }
.verbinder__puls--v3 { animation-delay: -2.1s; }
.verbinder__puls--v4 { animation-delay: -.6s; }
/* main.js setzt `bahn--ruhe` auf Träger außerhalb des Sichtfelds — dort ruhen die Pulse (kein Filter-Neuzeichnen pro Bild) */
.bahn--ruhe .verbinder__puls, .bahn--ruhe .puls, .bahn--ruhe .bp--live *, .bahn--ruhe .lg--live *, .bahn--ruhe .marquee, .bahn--ruhe .chip img, .bahn--ruhe .fortschritt div { animation-play-state: paused !important; }
.puls { fill: none; stroke: var(--bahn-hell); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 40 1500; animation: pulsLaufHero 5s linear infinite; filter: drop-shadow(0 0 6px var(--band-hell)); }
.puls--2 { animation-delay: -1.6s; }
.puls--3 { animation-delay: -3.1s; }
.puls--4 { animation-delay: -4.2s; }
@keyframes pulsLauf { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -900; } }
@keyframes pulsLaufQuer { from { stroke-dashoffset: 24; } to { stroke-dashoffset: -700; } }
@keyframes pulsLaufHero { from { stroke-dashoffset: 40; } to { stroke-dashoffset: -1500; } }

.verbinder { height: 260px; display: flex; justify-content: center; position: relative; }
.verbinder svg { height: 100%; width: auto; }
.verbinder--spiegel svg { transform: scaleX(-1); }
.verbinder--kurz { height: 140px; }

/* Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.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 am unteren Rand der Leiste; --gelesen setzt main.js. */
.nav::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: calc(var(--gelesen, 0) * 100%); background: var(--verlauf); opacity: 0; transition: opacity .3s; }
.nav--fest::after { opacity: .9; }
.nav--fest { background: rgba(250, 246, 240, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: var(--linie); box-shadow: 0 10px 30px -22px rgba(51, 38, 31, .5); }
.nav__innen { width: min(1320px, 100% - 2 * var(--rand)); margin-inline: auto; height: 92px; display: flex; align-items: center; gap: 24px; transition: height .35s cubic-bezier(.4, 0, .2, 1); }
.nav--fest .nav__innen { height: 66px; }
.nav__logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; flex: none; }
/* Wortmarke mit Zeile darunter; die Zeile faehrt beim Scrollen ein. */
.nav__marke { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav__spruch { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: .01em; color: var(--gedaempft); white-space: nowrap; overflow: hidden; max-height: 18px; opacity: .95; transition: max-height .35s cubic-bezier(.4, 0, .2, 1), opacity .25s, margin-top .35s; }
.nav--fest .nav__spruch { max-height: 0; opacity: 0; margin-top: -3px; }
/* flex: none — die Wortmarke ist ein Bild mit fester Groesse; ohne das
   schrumpft der Behaelter unter 1080 px und das Bild laeuft ins Menue. */
.nav__logo img.nav__wortmarke { width: auto; height: 22px; filter: none; transition: height .35s cubic-bezier(.4, 0, .2, 1); }
.nav--fest .nav__logo img.nav__wortmarke { height: 20px; }
.tor { width: 46px; height: 46px; flex: none; overflow: visible; transition: width .35s cubic-bezier(.4, 0, .2, 1), height .35s cubic-bezier(.4, 0, .2, 1), filter .35s; filter: drop-shadow(0 6px 14px rgba(147, 71, 42, .28)); }
.nav--fest .tor { width: 34px; height: 34px; filter: drop-shadow(0 3px 8px rgba(147, 71, 42, .22)); }
/* Die Sonne steigt im Torbogen — 0 = hinter den Dünen, 1 = im Scheitel.
   11,4 Einheiten ist der volle Weg vom Dünenkamm bis unter den Bogenscheitel. */
.tor__sonne { transform: translateY(calc(var(--sonne, 0) * -11.4px)); transition: transform .3s cubic-bezier(.34, 1.2, .64, 1); }
/* Der Himmel hellt mit der Sonne auf: tiefes Abendrot unten, warmer Tag oben. */
.tor__tag { opacity: var(--sonne, 0); transition: opacity .45s ease-out; }
/* Einmal beim Laden: die Sonne geht langsam auf. */
html.sonnenaufgang .tor__sonne { transition: transform 1.5s cubic-bezier(.22, .78, .3, 1); }
html.sonnenaufgang .tor__tag { transition: opacity 1.5s ease-out; }
.nav__logo:hover .tor { filter: drop-shadow(0 8px 18px rgba(147, 71, 42, .38)); }
.nav__menue { display: flex; gap: 4px; margin-inline: auto; }
.nav__link { padding: 8px 12px; border-radius: 100px; font-size: 14px; color: var(--gedaempft-2); 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__burger { display: none; width: 42px; height: 42px; border-radius: 100px; border: 1px solid var(--linie-2); background: rgba(51, 38, 31, .05); flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.nav__burger span { width: 16px; height: 1.5px; background: var(--gedaempft-2); 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 clamp(40px, 7vh, 90px); overflow: hidden; --boden: clamp(170px, 25vh, 300px); }
/* 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: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(92px + 20px) 0 clamp(110px, 19vh, 220px); 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(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(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(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(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), calc(var(--portal, 0) * -34px), 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(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(193, 102, 63, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(193, 102, 63, .055) 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-size: clamp(38px, 5.6vw, 74px); font-weight: 600; letter-spacing: -.02em; line-height: 1.04; max-width: 30ch; }
.hero__text { max-width: 680px; 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); }

.schaltkreis { position: relative; height: 220px; margin-top: clamp(36px, 7vh, 80px); }
.schaltkreis__svg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.chip--hero { position: absolute; left: 50%; top: 110px; transform: translate(-50%, -50%); }
.chip--hero img { width: 76px; height: 76px; }

/* ── Statement ─────────────────────────────────────────────────────── */
.statement { padding: clamp(20px, 4vh, 40px) 0; }
.statement .container { position: relative; }
.statement .container::before, .statement .container::after { content: ''; position: absolute; top: -36px; bottom: -36px; width: 64px; border: 1px solid var(--bahn); opacity: .6; pointer-events: none; }
.statement .container::before { left: 0; border-right: 0; border-radius: 40px 0 0 40px; }
.statement .container::after { right: 0; border-left: 0; border-radius: 0 40px 40px 0; }
.statement__text { max-width: 860px; margin: 0 auto; text-align: center; font-size: clamp(24px, 3.3vw, 42px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.wort { color: rgba(51, 38, 31, .22); transition: color .35s; }
.wort--an { color: var(--text); }

/* ── So funktioniert's ─────────────────────────────────────────────── */
.schritte { background: linear-gradient(rgba(193, 102, 63, 0), rgba(193, 102, 63, .06) 20%, rgba(193, 102, 63, .06) 80%, rgba(193, 102, 63, 0)); }
.schritte__raster { display: grid; grid-template-columns: 1fr 480px; gap: 64px; align-items: start; }
.schritte__zaehler { color: var(--band-hell); font-weight: 600; font-size: 22px; letter-spacing: .02em; margin-bottom: 10px; text-align: right; }
.schritte__ol { position: relative; padding-left: 28px; border-left: 1px solid var(--linie-2); }
.schritt { position: relative; padding: 22px 0 26px; opacity: .62; transition: opacity .4s; cursor: pointer; }
.schritt + .schritt { border-top: 1px solid var(--linie); }
.schritt--aktiv { opacity: 1; }
.schritt::before { content: ''; position: absolute; left: -33.5px; top: 31px; width: 9px; height: 9px; border-radius: 50%; background: var(--flaeche-2); border: 1px solid var(--linie-2); transition: background .4s, box-shadow .4s; }
.schritt--aktiv::before { background: var(--band-hell); border-color: var(--band-hell); box-shadow: 0 0 0 5px rgba(193, 102, 63, .18), 0 0 14px var(--band-hell); }
.schritt__nr { font-size: 12px; letter-spacing: .3em; color: var(--band-hell); font-weight: 600; }
.schritt__titel { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; margin-top: 6px; }
.schritt__text { color: var(--gedaempft); font-size: 15px; margin-top: 10px; max-width: 540px; }
.schritt__linie { display: block; height: 2px; width: 0; margin-top: 18px; background: var(--verlauf); border-radius: 2px; transition: width .6s ease; }
.schritt--aktiv .schritt__linie { width: 120px; }
.schritte__bild { position: sticky; top: 110px; padding: 14px; }
.bild { position: absolute; top: 46px; right: 14px; bottom: 14px; left: 14px; opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .45s, transform .45s; pointer-events: none; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.bild--aktiv { opacity: 1; transform: none; }

/* ═══════════ App-Nachbauten ═══════════ */
.app { position: relative; background: var(--a-bg); border: 1px solid rgba(51, 38, 31, .14); border-radius: 16px; box-shadow: 0 26px 60px -26px rgba(51, 38, 31, .30), 0 8px 24px -16px rgba(51, 38, 31, .20); overflow: hidden; text-align: left; font-family: var(--schrift-app); font-size: 11px; line-height: 1.35; color: var(--k-ink); }
.app__leiste { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--a-linie); background: rgba(51, 38, 31, .06); }
.app__leiste span { width: 10px; height: 10px; border-radius: 50%; background: #3A3C55; }
.app__leiste span:nth-child(1) { background: #FF5F57; }
.app__leiste span:nth-child(2) { background: #FEBC2E; }
.app__leiste span:nth-child(3) { background: #28C840; }
.app__leiste em { font-style: normal; margin-inline: auto; color: var(--gedaempft); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.app__koerper { display: grid; grid-template-columns: 54px 1fr; min-height: 260px; }
.app__koerper--zwei { grid-template-columns: 54px 1fr 1fr; }
/* Seitenleiste wie die App seit dem Boho-Umbau: dunkles Röstbraun, sieben
   beschriftete Einträge (Library … Zahlen), Einstellungen unten. */
.app__seite { background: var(--a-seite); border-right: 1px solid var(--a-linie); padding: 8px 3px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; }
.app__seite i { border-radius: 7px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 1px 3px; color: rgba(250, 246, 240, .55); }
.app__seite i svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app__seite i u { text-decoration: none; font-style: normal; font-size: 5.5px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; max-width: 100%; }
.app__seite i.ist-aktiv { background: rgba(217, 137, 94, .22); color: #F6E9DB; }
.app__seite .app__logo { padding: 0; margin: 0 auto 6px; background: transparent; }
.app__seite .app__logo img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.app__seite .unten { margin-top: auto; }
.app__inhalt { padding: 12px; min-width: 0; }
.app__inhalt--frei { padding: 14px 16px 16px; }
.app__pane { padding: 12px; min-width: 0; position: relative; }
.app__pane--upload { border-left: 1px solid var(--a-linie); background: rgba(51, 38, 31, .035); }
.app__panekopf { display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--gedaempft); margin-bottom: 10px; letter-spacing: .02em; }
.app__zaehler { font-weight: 500; }
.app__pillen { display: flex; gap: 4px; }
.app__pillen i { width: 14px; height: 8px; border-radius: 100px; background: var(--f); opacity: .85; }
/* eingebauter Browser (Upload-Bereich) */
.app__browser { padding: 10px 12px 12px; border-right: 1px solid var(--linie); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.app__tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.app__tabs span { font-size: 8.5px; padding: 4px 8px; border-radius: 7px 7px 0 0; background: rgba(51, 38, 31, .05); border: 1px solid var(--a-linie); border-bottom: 0; color: var(--gedaempft); display: flex; gap: 5px; align-items: center; }
.app__tabs span::before { content: ''; width: 7px; height: 7px; border-radius: 3px; background: var(--f); }
.app__tabs span.ist { background: var(--a-flaeche); color: var(--k-ink); }
.app__url { height: 18px; border-radius: 7px; background: var(--a-flaeche); border: 1px solid var(--a-linie); display: flex; align-items: center; padding: 0 8px; }
.app__url i { height: 5px; width: 45%; border-radius: 3px; background: rgba(51, 38, 31, .18); }
.app__form { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 10px; border: 1px solid var(--a-linie); background: var(--a-flaeche); }
.app__formzeile { display: flex; gap: 8px; align-items: center; }
.app__formzeile .fortschritt { flex: 1; margin: 0; }

/* Library-Karte („Aura-Karte") */
.lk { position: relative; border-radius: 14px; padding: 12px 14px 12px; background: var(--a-flaeche); border: 1px solid rgba(51, 38, 31, .10); box-shadow: 0 10px 24px -14px rgba(51, 38, 31, .28); overflow: hidden; --aura: 255, 111, 168; }
.lk::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 14px; pointer-events: none; background: radial-gradient(120% 110% at -10% -20%, rgba(var(--aura), .55) 0%, rgba(var(--aura), .22) 34%, transparent 62%); }
.lk > * { position: relative; }
.lk--gruen { --aura: 95, 227, 161; }
.lk--pink { --aura: 255, 111, 168; }
.lk--zweite { opacity: .8; margin-top: 8px; }
.lk--mini { padding: 10px 12px; }
.lk__kopf { display: flex; gap: 10px; align-items: flex-start; }
.lk__thumb { width: 64px; height: 38px; border-radius: 7px; flex: none; }
.lk__info { flex: 1; min-width: 0; }
.lk__kicker { font-size: 7.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--k-leise); }
.lk__titel { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--k-ink); line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lk__unter { font-size: 9px; color: var(--k-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.lk__upload { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 7px; background: rgba(193, 102, 63, .09); border: 1px solid rgba(193, 102, 63, .32); color: #93472A; font-size: 9px; font-weight: 600; white-space: nowrap; flex: none; }
.lk__upload b { font-weight: 700; }
.lk__upload i { font-style: normal; font-size: 8px; font-weight: 700; padding: 0 5px; border-radius: 6px; background: rgba(193, 102, 63, .16); }
.lk__upload u { text-decoration: none; font-size: 8px; opacity: .8; }
.lk__upload--aus { background: var(--a-flaeche-2); border-color: var(--a-linie-2); color: var(--k-muted); }
.lk__upload--offen { background: rgba(193, 102, 63, .18); box-shadow: 0 0 0 2px rgba(193, 102, 63, .25); }
.lk__aktionen { display: flex; flex-direction: column; gap: 3px; flex: none; }
.lk__aktionen s { width: 16px; height: 16px; border-radius: 5px; background: var(--a-flaeche-2); border: 1px solid var(--a-linie-2); text-decoration: none; }
.lk__fz { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 8px; letter-spacing: .04em; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.lk__fz b { color: var(--k-ink); font-weight: 700; font-size: 10px; }
.lk__balken { height: 4px; border-radius: 2px; background: rgba(51, 38, 31, .10); margin-top: 5px; overflow: hidden; }
.lk__balken i { display: block; height: 100%; width: var(--p, 0%); border-radius: 2px; background: var(--verlauf); }
.lk__label { font-size: 7.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--k-leise); margin-top: 11px; }
.lk__pz { font-size: 9.5px; line-height: 1.9; color: var(--k-leise); margin-top: 2px; word-spacing: .1em; }
.lk__pz span.an { color: var(--k-ink); font-weight: 600; }
.lk__pz span.aus { text-decoration: line-through; }
.lk__haar { height: 1px; background: var(--a-linie); margin: 10px 0; }
.lk__dateien { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.lk__dateien span { font-size: 9px; color: var(--k-muted); display: inline-flex; align-items: center; gap: 5px; }
.lk__dateien span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--k-leise); }
.lk__dateien span.da { color: var(--k-ink); font-weight: 500; }
.lk__dateien span.da::before { width: 6px; height: 6px; border: 0; background: var(--k-gruen); }
.lk__jahre { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; }
.lk__jahre > span:not(.zustand) { font-size: 8.5px; padding: 2px 7px; border-radius: 100px; border: 1px solid var(--a-linie-2); color: var(--k-muted); display: inline-flex; align-items: center; gap: 4px; }
.lk__jahre > span:not(.zustand)::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; }
.lk__jahre > span.an { color: var(--f); border-color: color-mix(in srgb, var(--f) 45%, transparent); background: color-mix(in srgb, var(--f) 12%, transparent); font-weight: 600; }
/* Upload-Menü der Karte */
.menue { position: absolute; right: 12px; top: 56px; z-index: 2; background: var(--a-flaeche); border: 1px solid var(--a-linie-2); border-radius: 10px; box-shadow: 0 14px 34px rgba(51, 38, 31, .18); padding: 6px; min-width: 160px; }
.menue__kopf { font-size: 8px; color: var(--k-muted); padding: 4px 8px 5px; }
.menue__zeile { display: flex; align-items: center; gap: 7px; font-size: 9.5px; padding: 5px 8px; border-radius: 6px; color: var(--k-ink); }
.menue__zeile i { width: 7px; height: 7px; border-radius: 50%; background: var(--f); flex: none; }
.menue__zeile--stapel { color: #7E5A22; font-weight: 800; }
.menue__zeile--stapel svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toast { align-self: center; padding: 6px 12px; border-radius: 100px; background: var(--flaeche-2); border: 1px solid rgba(193, 102, 63, .5); font-size: 9.5px; color: var(--k-ink); box-shadow: 0 10px 30px rgba(51, 38, 31, .20); }

/* Bausteine für Formulare in den Nachbauten */
.m-label { font-size: 7.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-muted); margin: 8px 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.m-label em { font-style: normal; color: #93472A; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 8.5px; }
.m-feld { background: var(--a-flaeche); border: 1px solid var(--a-linie-2); border-radius: 7px; padding: 6px 8px; font-size: 9.5px; color: var(--k-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-feld--mehr { white-space: normal; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.m-feld--hint { color: var(--k-muted); }
.m-feld--fremd { background: var(--a-flaeche-2); border-color: var(--a-linie-2); }
.m-feld--kurz { width: 64px; flex: none; }
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chips span { font-size: 8.5px; padding: 3px 8px; border-radius: 100px; background: var(--a-flaeche-2); border: 1px solid var(--a-linie-2); color: var(--k-ink); white-space: nowrap; }
.m-chips span.ist { background: rgba(193, 102, 63, .14); border-color: rgba(193, 102, 63, .5); }
.m-chips span.ist[style*="--f"] { background: color-mix(in srgb, var(--f) 16%, transparent); border-color: color-mix(in srgb, var(--f) 55%, transparent); }
.m-chips--klein span { font-size: 8px; padding: 2px 6px; }
.m-chips--fremd span { background: var(--a-flaeche-2); }
.m-knoepfe { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.m-knoepfe small { font-size: 8px; color: var(--k-muted); }
.m-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 10px; border-radius: 8px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.m-knopf--akzent { background: #93472A; color: #fff; }
.m-knopf--gruen { background: #4F6243; color: #fff; }
.m-knopf--text { background: transparent; color: #93472A; }
.m-knopf--mini { padding: 3px 8px; font-size: 8.5px; border-radius: 6px; }
.m-knopf--klein { padding: 4px 8px; font-size: 8.5px; }
.m-check { width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--a-linie-2); display: inline-block; flex: none; }
.m-check.an { background: #93472A; border-color: #93472A; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background-size: 70%; background-position: center; background-repeat: no-repeat; }

/* Upload-Steuerspalte */
.up { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.up__clip { display: flex; gap: 8px; align-items: center; background: var(--a-flaeche); border: 1px solid rgba(79, 98, 67, .55); border-radius: 10px; padding: 7px; min-width: 0; }
.up__clip .lk__thumb { width: 54px; height: 32px; }
.up__clip > div { min-width: 0; }
.up__cliptitel { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up__clipchip { display: inline-block; font-size: 8px; padding: 1px 6px; border-radius: 100px; background: rgba(79, 98, 67, .16); color: #3E5535; margin-top: 3px; }
.up__cliptags { font-size: 8.5px; color: var(--k-muted); margin-top: 2px; }
.up__hinweis { font-size: 8px; color: var(--k-muted); line-height: 1.35; }
.up .m-knopf { width: 100%; white-space: normal; text-align: center; }

/* Batch-Panel */
.bp { background: var(--a-flaeche); border: 1px solid var(--a-linie); border-radius: 12px; padding: 10px 11px; }
.bp__kopf { font-size: 10px; font-weight: 700; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp__zeile { display: grid; grid-template-columns: 9px 66px 1fr 44px; gap: 8px; align-items: center; font-size: 9.5px; padding: 5px 0; border-top: 1px solid var(--a-linie); }
.bp__zeile i { width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.bp__name { font-weight: 600; white-space: nowrap; }
.bp__status { position: relative; height: 13px; min-width: 0; }
.bp__status em { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; }
.s-wartet { color: var(--k-muted); }
.s-laeuft { color: var(--k-ink); opacity: 0; }
.s-bereit { color: var(--k-gruen); font-weight: 600; opacity: 0; }
.bp__balken { display: block; height: 4px; border-radius: 2px; background: rgba(51, 38, 31, .10); overflow: hidden; }
.bp__balken u { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; border-radius: 2px; background: var(--verlauf); }
.bp__fuss { font-size: 8.5px; color: var(--k-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--a-linie); }
.bp--fertig .s-bereit { opacity: 1; }
.bp--fertig .bp__zeile { grid-template-columns: 9px 66px 1fr; }
/* Der Lauf im Hero: 16 s Schleife in AUSFÜHRUNGS-Reihenfolge — C4S, dann MV, PH, iWC, FapHouse zuletzt.
   Die Zeilen stehen in Kachel-Reihenfolge (FapHouse an 2) und tragen darum den Keyframe-Satz 5. */
.bp--live .bp__zeile--1 .s-wartet { animation: bpW1 16s steps(1) infinite forwards; } .bp--live .bp__zeile--1 .s-laeuft { animation: bpL1 16s steps(1) infinite forwards; } .bp--live .bp__zeile--1 .s-bereit { animation: bpB1 16s steps(1) infinite forwards; } .bp--live .bp__zeile--1 .bp__balken u { animation: bpBar1 16s linear infinite forwards; }
.bp--live .bp__zeile--2 .s-wartet { animation: bpW2 16s steps(1) infinite forwards; } .bp--live .bp__zeile--2 .s-laeuft { animation: bpL2 16s steps(1) infinite forwards; } .bp--live .bp__zeile--2 .s-bereit { animation: bpB2 16s steps(1) infinite forwards; } .bp--live .bp__zeile--2 .bp__balken u { animation: bpBar2 16s linear infinite forwards; }
.bp--live .bp__zeile--3 .s-wartet { animation: bpW3 16s steps(1) infinite forwards; } .bp--live .bp__zeile--3 .s-laeuft { animation: bpL3 16s steps(1) infinite forwards; } .bp--live .bp__zeile--3 .s-bereit { animation: bpB3 16s steps(1) infinite forwards; } .bp--live .bp__zeile--3 .bp__balken u { animation: bpBar3 16s linear infinite forwards; }
.bp--live .bp__zeile--4 .s-wartet { animation: bpW4 16s steps(1) infinite forwards; } .bp--live .bp__zeile--4 .s-laeuft { animation: bpL4 16s steps(1) infinite forwards; } .bp--live .bp__zeile--4 .s-bereit { animation: bpB4 16s steps(1) infinite forwards; } .bp--live .bp__zeile--4 .bp__balken u { animation: bpBar4 16s linear infinite forwards; }
.bp--live .bp__zeile--5 .s-wartet { animation: bpW5 16s steps(1) infinite forwards; } .bp--live .bp__zeile--5 .s-laeuft { animation: bpL5 16s steps(1) infinite forwards; } .bp--live .bp__zeile--5 .s-bereit { animation: bpB5 16s steps(1) infinite forwards; } .bp--live .bp__zeile--5 .bp__balken u { animation: bpBar5 16s linear infinite forwards; }
@keyframes bpW1 { 0% { opacity: 1; } 3% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpL1 { 0% { opacity: 0; } 3% { opacity: 1; } 19% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpB1 { 0% { opacity: 0; } 19% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bpBar1 { 0%, 3% { transform: scaleX(0); } 19%, 100% { transform: scaleX(1); } }
@keyframes bpW2 { 0% { opacity: 1; } 19% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpL2 { 0% { opacity: 0; } 19% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpB2 { 0% { opacity: 0; } 41% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bpBar2 { 0%, 19% { transform: scaleX(0); } 41%, 100% { transform: scaleX(1); } }
@keyframes bpW3 { 0% { opacity: 1; } 41% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpL3 { 0% { opacity: 0; } 41% { opacity: 1; } 59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpB3 { 0% { opacity: 0; } 59% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bpBar3 { 0%, 41% { transform: scaleX(0); } 59%, 100% { transform: scaleX(1); } }
@keyframes bpW4 { 0% { opacity: 1; } 59% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpL4 { 0% { opacity: 0; } 59% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpB4 { 0% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bpBar4 { 0%, 59% { transform: scaleX(0); } 75%, 100% { transform: scaleX(1); } }
@keyframes bpW5 { 0% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpL5 { 0% { opacity: 0; } 75% { opacity: 1; } 88% { opacity: 0; } 100% { opacity: 0; } }
@keyframes bpB5 { 0% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bpBar5 { 0%, 75% { transform: scaleX(0); } 88%, 100% { transform: scaleX(1); } }

/* Protokoll */
.lg { background: var(--a-flaeche-2); border: 1px solid var(--a-linie); border-radius: 10px; padding: 7px 9px 8px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lg__tabs { display: flex; gap: 10px; font-size: 8.5px; color: var(--k-muted); margin-bottom: 3px; order: -1; }
.lg__tabs .ist { color: var(--k-ink); border-bottom: 1px solid #93472A; }
.lg__zeile { font-size: 8.5px; line-height: 1.35; color: var(--gedaempft-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg--live { flex-direction: column-reverse; justify-content: flex-end; max-height: 150px; overflow: hidden; }
.lg--live .lg__tabs { order: 1; }
.lg--live .lg__zeile { opacity: 0; }
.lg--live .lg__zeile--1 { animation: lg1 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--2 { animation: lg2 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--3 { animation: lg3 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--4 { animation: lg4 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--5 { animation: lg5 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--6 { animation: lg6 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--7 { animation: lg7 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--8 { animation: lg8 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--9 { animation: lg9 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--10 { animation: lg10 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--11 { animation: lg11 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--12 { animation: lg12 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--13 { animation: lg13 16s steps(1) infinite forwards; }
.lg--live .lg__zeile--14 { animation: lg14 16s steps(1) infinite forwards; }
@keyframes lg1 { 0%, 100% { opacity: 1; } }
@keyframes lg2 { 0% { opacity: 0; } 3% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg3 { 0% { opacity: 0; } 6% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg4 { 0% { opacity: 0; } 11% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg5 { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg6 { 0% { opacity: 0; } 19% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg7 { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg8 { 0% { opacity: 0; } 27% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg9 { 0% { opacity: 0; } 41% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg10 { 0% { opacity: 0; } 59% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg11 { 0% { opacity: 0; } 59% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg12 { 0% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg13 { 0% { opacity: 0; } 88% { opacity: 1; } 100% { opacity: 1; } }
@keyframes lg14 { 0% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } }

/* Dialoge */
.dlg { background: var(--a-flaeche); border: 1px solid var(--a-linie-2); border-radius: 14px; padding: 14px; box-shadow: 0 20px 50px rgba(51, 38, 31, .22); max-width: 380px; align-self: center; width: 100%; }
.dlg--klein { max-width: 340px; }
.dlg__titel { font-size: 12px; font-weight: 700; }
.dlg__sub { font-size: 9px; color: var(--k-muted); margin-top: 3px; }
.dlg__alle { font-size: 8.5px; color: #93472A; margin: 6px 0 4px; }
.dlg__zeile { display: flex; align-items: center; gap: 8px; font-size: 10px; padding: 5px 0; }
.dlg__zeile i { width: 8px; height: 8px; border-radius: 50%; background: var(--f); }
.dlg__block { background: rgba(126, 90, 34, .10); border: 1px solid rgba(126, 90, 34, .34); border-radius: 10px; padding: 8px; margin: 8px 0; }
.dlg__blocktitel { font-size: 9.5px; font-weight: 700; }
.dlg__datum { font-size: 9px; color: var(--gedaempft-2); margin: 3px 0 5px; }
.dlg__knoepfe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* Studio */
.st { display: flex; flex-direction: column; gap: 8px; }
.st__kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st__kopf i { width: 18px; height: 18px; border-radius: 6px; background: var(--verlauf); flex: none; }
.st__kopf b { font-size: 13px; font-weight: 800; }
.st__kopf small { font-size: 8.5px; color: var(--k-muted); margin-left: auto; }
.st__umschalter { display: flex; gap: 6px; }
.st__umschalter span, .po__tabs span { font-size: 9px; padding: 4px 10px; border-radius: 100px; border: 1px solid var(--a-linie-2); background: var(--a-flaeche); color: var(--gedaempft-2); }
.st__umschalter span.ist, .po__tabs span.ist { background: rgba(193, 102, 63, .14); border: 1.5px solid #93472A; color: var(--k-ink); font-weight: 800; }
.st__karte { background: var(--a-flaeche); border: 1px solid var(--a-linie); border-radius: 12px; padding: 10px 11px 11px; box-shadow: 0 12px 30px -18px rgba(51, 38, 31, .35); }
.st__titel { font-size: 10.5px; font-weight: 700; }
.st__banner { background: rgba(193, 102, 63, .14); border-radius: 7px; padding: 4px 8px; font-size: 8.5px; color: #93472A; margin-top: 6px; }

/* Posten */
.po { display: flex; flex-direction: column; gap: 8px; }
.po__tabs { display: flex; gap: 6px; }
.st__kopf .i-senden { background: var(--verlauf); }
.po__drop { display: flex; align-items: center; gap: 10px; border: 1px dashed var(--a-linie-2); border-radius: 10px; padding: 8px 10px; font-size: 9px; color: var(--k-muted); margin-top: 6px; }
.po__dateien { display: flex; gap: 4px; }
.po__dateien i { width: 28px; height: 18px; border-radius: 4px; display: block; }
.po__box { border: 1px solid rgba(193, 102, 63, .3); border-radius: 10px; padding: 8px; margin: 8px 0 2px; }
.po__boxtitel { font-size: 9.5px; font-weight: 700; }
.po__zeile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 2px; }
.po__bestaetigung { background: rgba(193, 102, 63, .14); border: 1px solid rgba(193, 102, 63, .45); border-radius: 10px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.po__bestaetigung b { font-size: 10px; }

/* Library-Kopf: FilterBar und Schnellfilter */
.fb { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; flex-wrap: wrap; }
.fb__suche { flex: 1 1 90px; max-width: 120px; height: 20px; border-radius: 6px; background: var(--a-flaeche); border: 1px solid var(--a-linie-2); padding: 0 8px; font-size: 9px; color: var(--k-muted); display: flex; align-items: center; }
.fb__knopf { font-size: 8.5px; padding: 3px 7px; border-radius: 6px; background: var(--a-flaeche); border: 1px solid var(--a-linie-2); color: var(--k-muted); }

/* Thumbnails: abstrakte Farbflächen in den App-Farben */
.thumb--1 { background: linear-gradient(135deg, #93472A, #C1663F); }
.thumb--2 { background: linear-gradient(135deg, #93472A, #D9895E); }
.thumb--3 { background: linear-gradient(135deg, #D9895E, #C1663F 130%); }
.fortschritt { height: 6px; width: 80px; border-radius: 3px; background: rgba(51, 38, 31, .1); overflow: hidden; }
.fortschritt div { height: 100%; width: 60%; background: var(--verlauf); border-radius: 3px; animation: laden 2.6s ease-in-out infinite; }
.fortschritt--gross { width: 100%; height: 8px; }
@keyframes laden { 0% { width: 18%; } 60% { width: 86%; } 100% { width: 18%; } }


/* Das Portal um die App-Attrappe: der Bogen rahmt jetzt das Bild statt die
   Überschrift — so kreuzt keine Linie mehr den Text, und der Screenshot
   bekommt Rahmen und Bildzeile. */
.portal { position: relative; margin-top: clamp(96px, 15vh, 180px); padding: clamp(34px, 6vh, 70px) clamp(16px, 4vw, 60px) 0; transform: translate3d(0, calc((1 - var(--portal, 1)) * 70px), 0) scale(calc(.965 + var(--portal, 1) * .035)); transform-origin: 50% 0; }
/* Der Bogen zeichnet sich, während der Abschnitt hereinfährt. */
/* Der Bogen wächst beim Hereinscrollen aus beiden Füßen nach oben und
   schließt sich am Scheitel. Dafür sind es zwei gespiegelte Hälften, jede von
   ihrem Fuß aus gezeichnet: ein einziger Pfad mit dreiteiliger Strichliste
   lief in Chrome sichtbar schief (rechts rund 7 % kürzer als links). Von einer
   Seite gezeichnet endete die Linie mitten in der Luft und las sich wie ein
   Fehler. `pathLength="1"` macht die Rechnung unabhängig von der echten
   Pfadlänge. */
.portal__rand { stroke-dasharray: 1; stroke-dashoffset: calc(1 - min(1, var(--portal, 1) / .85)); }
.portal__text { opacity: calc(var(--portal, 1) * 1.25 - .15); transform: translate3d(0, calc((1 - var(--portal, 1)) * 26px), 0); }
.portal__punkte li { opacity: calc(var(--portal, 1) * 1.6 - .6); transform: translate3d(0, calc((1 - var(--portal, 1)) * 18px), 0); }
.portal__text { position: relative; z-index: 2; max-width: 720px; margin: 0 auto clamp(26px, 4vh, 44px); text-align: center; }
.portal__text .kicker { margin-bottom: 12px; }
.portal__titel { font-size: clamp(26px, 3.4vw, 44px); margin-bottom: 14px; }
.portal__satz { color: var(--gedaempft-2); font-size: clamp(15px, 1.25vw, 17px); max-width: 620px; margin-inline: auto; }
/* Drei Bildunterschriften: sie sagen, was im Bild zu sehen ist — ohne sie
   stand die Attrappe ohne Zusammenhang da. */
.portal__punkte { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 34px); max-width: 940px; margin: clamp(26px, 4vh, 44px) auto 0; }
.portal__punkte li { display: flex; flex-direction: column; gap: 5px; text-align: left; padding-left: 14px; border-left: 2px solid rgba(193, 102, 63, .35); }
.portal__punkte b { font-size: 14px; font-weight: 700; color: var(--text); }
.portal__punkte span { font-size: 13.5px; line-height: 1.5; color: var(--gedaempft); }
.portal__rahmen { position: absolute; left: 0; right: 0; top: 0; bottom: 18%; z-index: 0; pointer-events: none; }
.portal__rahmen svg { width: 100%; height: 100%; display: block; }
.portal .app--hero { position: relative; z-index: 1; margin-top: 0; }

/* Lagen der Nachbauten */
.app--hero { width: min(936px, calc(100% - 32px)); margin-top: clamp(48px, 6vh, 72px); margin-inline: auto; }
.app--hero .lk { margin-top: 0; overflow: visible; } /* das offene Upload-Menü darf über die Karte hinausragen */
@media (min-width: 1200px) { .app--hero { zoom: 1.12; } }
.app--schritte { min-height: 440px; }
.app--bereich { width: min(560px, 100%); margin-inline: auto; }
.app--bereich .app__koerper { min-height: 300px; }

/* ═══════════ Neue Attrappen-Bausteine (v3: sechs Bereiche) ═══════════ */
/* Fokus-Band: dunkles Band mit Kicker, Titel und Zähler-Chips (Library,
   Upload, Posten — wie das Band der App). */
.fkb { background: #33261F; border-radius: 10px; padding: 7px 10px; display: flex; align-items: center; gap: 10px; }
.fkb__links { min-width: 0; margin-right: auto; flex: none; }
.fkb__kicker { font-size: 6.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #D9A987; white-space: nowrap; }
.fkb__titel { font-size: 9.5px; font-weight: 700; color: #FAF6F0; margin-top: 1px; white-space: nowrap; }
.fkb__chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.fkb__chips span { font-size: 7.5px; padding: 2.5px 7px; border-radius: 100px; border: 1px solid rgba(250, 246, 240, .22); color: #EFE4D6; white-space: nowrap; display: inline-flex; gap: 4px; align-items: baseline; }
.fkb__chips span b { font-weight: 700; color: #fff; }
.fkb__chips span.aus { opacity: .45; }

/* Zählzeile mit Ansichten-Knöpfen (Library) */
.azeile { display: flex; align-items: center; gap: 4px; margin: 7px 0; flex-wrap: wrap; }
.azeile__zahl { font-size: 8.5px; color: var(--k-muted); margin-right: auto; }
.azeile .k { font-size: 8px; padding: 2.5px 8px; border-radius: 100px; border: 1px solid var(--a-linie-2); background: var(--a-flaeche); color: var(--gedaempft-2); white-space: nowrap; }
.azeile .k.ist { background: #33261F; color: #FAF6F0; border-color: #33261F; font-weight: 700; }

/* Karten-Zusätze: Plakette, Zustands-Pille, Umsatzzeile */
.lk__badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.lk__badges span { font-size: 6.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 1.5px 6px; border-radius: 5px; background: rgba(126, 90, 34, .14); color: #7E5A22; border: 1px solid rgba(126, 90, 34, .4); }
.zustand { font-size: 7.5px; padding: 2px 8px; border-radius: 100px; font-weight: 700; white-space: nowrap; margin-left: auto; }
.zustand--offen { background: rgba(147, 71, 42, .1); color: #93472A; border: 1px solid rgba(147, 71, 42, .35); }
.zustand--fertig { background: rgba(79, 98, 67, .14); color: #4F6243; border: 1px solid rgba(79, 98, 67, .4); }
.lk__jahre .zustand { margin-left: auto; }
.lk__umsatz { font-size: 8.5px; color: var(--k-muted); margin-top: 7px; font-variant-numeric: tabular-nums; }
.lk__umsatz b { color: var(--k-ink); font-weight: 700; }
.lk__tipp { font-size: 8px; color: #7E5A22; margin-top: 3px; }

/* Upload-Bereich: Kopf, Plattform-Reihe, linke Kartenspalte, Kalender */
.upx { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.upx__kopf { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.upx__titel { font-size: 12px; font-weight: 800; flex: none; }
.upx__sub { font-size: 8px; color: var(--k-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plreihe { display: flex; gap: 4px; align-items: center; }
.plreihe__kachel { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 7.5px; font-weight: 600; padding: 4px 6px; border-radius: 8px; background: var(--a-flaeche); border: 1px solid var(--a-linie); color: var(--k-ink); min-width: 0; }
.plreihe__kachel i { width: 6px; height: 6px; border-radius: 50%; background: var(--f); flex: none; }
.plreihe__kachel s { text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plreihe__kachel em { font-style: normal; margin-left: auto; font-size: 6.5px; font-weight: 700; padding: 1px 5px; border-radius: 100px; flex: none; }
.plreihe__kachel em.offen { background: rgba(147, 71, 42, .1); color: #93472A; }
.plreihe__kachel em.fertig { background: rgba(79, 98, 67, .14); color: #4F6243; }
.plreihe__kachel.ist { border-color: rgba(147, 71, 42, .55); box-shadow: 0 0 0 1px rgba(147, 71, 42, .3); background: #FBF3EA; }
.plreihe__prozent { display: flex; align-items: center; gap: 4px; font-size: 8px; color: var(--k-muted); flex: none; }
.plreihe__balken { width: 34px; height: 4px; border-radius: 2px; background: rgba(51, 38, 31, .12); overflow: hidden; }
.plreihe__balken i { display: block; height: 100%; width: 60%; background: #93472A; border-radius: 2px; }
.upx__koerper { display: grid; grid-template-columns: 170px 1fr; gap: 8px; align-items: start; min-width: 0; }
.uk { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uk__karte { background: var(--a-flaeche); border: 1px solid var(--a-linie); border-radius: 10px; padding: 7px 8px; }
.uk__titel { font-size: 7.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-muted); margin-bottom: 5px; display: flex; justify-content: space-between; align-items: baseline; }
.uk__titel em { font-style: normal; color: #93472A; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 8px; }
.uk .m-knopf { width: 100%; }
.uk .up__hinweis { margin-top: 5px; }
.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.wahl span { font-size: 7.5px; padding: 4px 4px; border-radius: 7px; border: 1px solid var(--a-linie-2); background: var(--a-flaeche-2); color: var(--gedaempft-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wahl span.ist { border-color: rgba(147, 71, 42, .55); color: #93472A; font-weight: 700; background: #FBF3EA; }
.ukal__kopf { display: flex; justify-content: space-between; gap: 6px; font-size: 7.5px; color: var(--k-muted); margin-bottom: 3px; }
.ukal__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ukal__raster span { font-size: 6.5px; text-align: center; padding: 2px 0; border-radius: 4px; color: var(--k-leise); }
.ukal__raster span.p { background: rgba(147, 71, 42, .12); color: #93472A; font-weight: 700; }
.ukal__raster span.g { background: rgba(79, 98, 67, .16); color: #4F6243; font-weight: 700; }
.abhakleiste { display: flex; align-items: center; gap: 6px; background: var(--a-flaeche); border: 1px solid var(--a-linie); border-radius: 9px; padding: 5px 8px; font-size: 8.5px; }
.abhakleiste b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abhakleiste .m-knopf { margin-left: auto; flex: none; }
.upx .app__browser { border-right: 0; padding: 0; }

/* Schalter (PPV-Formular, Grok-Kasten) */
.m-schalter { display: inline-flex; align-items: flex-start; gap: 5px; font-size: 8px; font-weight: 600; color: var(--k-ink); }
.m-schalter i { width: 16px; height: 9px; border-radius: 100px; background: rgba(51, 38, 31, .2); position: relative; flex: none; margin-top: 1px; }
.m-schalter i::after { content: ''; position: absolute; top: 1px; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: #FFFCF7; }
.m-schalter.an i { background: #4F6243; }
.m-schalter.an i::after { left: auto; right: 1px; }
.m-schalter small { display: block; font-weight: 400; font-size: 6.5px; color: var(--k-muted); margin-top: 1px; }
.st__drei { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 6px; }
.st__vier { display: grid; grid-template-columns: .7fr .5fr 1.5fr 1.1fr; gap: 6px; margin-top: 6px; }
.st__schalter { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.m-feld--wahl { display: flex; justify-content: space-between; gap: 6px; }
.m-feld--wahl::after { content: '▾'; color: var(--k-muted); font-size: 8px; }

/* Posten: Kompositor links, Planer-Spalte rechts */
.pox { display: grid; grid-template-columns: 1fr 118px; gap: 8px; align-items: start; min-width: 0; }
.plan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.plan__karte { background: var(--a-flaeche); border: 1px solid var(--a-linie); border-radius: 10px; padding: 6px 7px; }
.plan__kopf { font-size: 7.5px; font-weight: 700; color: var(--k-ink); }
.plan__sub { font-size: 6.5px; color: var(--k-muted); margin-top: 1px; }
.plan__raster { margin-top: 4px; }
.plan__tag { font-size: 6.5px; font-weight: 700; color: var(--k-muted); margin-top: 6px; }
.plan__zeile { font-size: 7px; color: var(--gedaempft-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po__grokzeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.po__grokzeile .m-chips { margin-left: auto; }
.po__fansly { display: flex; justify-content: space-between; gap: 8px; font-size: 8px; color: var(--gedaempft-2); border: 1px solid var(--a-linie); border-radius: 8px; padding: 5px 8px; margin-top: 6px; }
.po__fansly b { font-weight: 700; color: var(--k-ink); }

/* Doppelreihe Trailer & Zahlen */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.duo__karte { padding: 26px 26px 24px; }
.duo__karte .h3 { font-size: clamp(20px, 2vw, 26px); }
.duo__karte > p { color: var(--gedaempft-2); font-size: 14.5px; margin-top: 12px; }
.duo__karte .abzeichen { margin-bottom: 14px; }
.duo__bild { margin-top: 18px; }
.app--duo { width: 100%; }
.film { display: flex; gap: 3px; }
.film i { flex: 1; aspect-ratio: 16 / 10; border-radius: 4px; opacity: .8; }
.film i.an { outline: 2px solid #93472A; outline-offset: 1px; opacity: 1; }
.trz { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.zbal { display: flex; gap: 5px; align-items: flex-end; height: 52px; margin-top: 2px; }
.zbal i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #C1663F, #B08240); opacity: .9; }
.zbal i.prog { background: repeating-linear-gradient(135deg, #7C8F6E 0 3px, #93A583 3px 6px); }
.upx__zwei { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6px; }
.zwert { font-size: 13px; font-weight: 800; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.zspanne { font-size: 7px; color: var(--k-muted); margin-top: 2px; }
.zteile { display: flex; flex-direction: column; gap: 4px; }
.zteile span { display: flex; align-items: center; gap: 5px; font-size: 7px; color: var(--k-muted); }
.zteile i { width: 6px; height: 6px; border-radius: 50%; background: var(--f); flex: none; }
.zteile u { text-decoration: none; flex: 1; height: 4px; border-radius: 2px; background: rgba(51, 38, 31, .1); position: relative; overflow: hidden; }
.zteile u::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: var(--p, 50%); background: var(--f); border-radius: 2px; }

/* ── Die vier Bereiche ─────────────────────────────────────────────── */
.bereiche { background: linear-gradient(rgba(193, 102, 63, 0), rgba(193, 102, 63, .05) 20%, rgba(193, 102, 63, .05) 80%, rgba(193, 102, 63, 0)); }
.bereich { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; padding: 30px 0; }
.bereich--umgekehrt .bereich__text { order: 2; }
.bereich--umgekehrt .bereich__bild { padding: 14px; order: 1; }
.bereich__text p { color: var(--gedaempft-2); margin-top: 18px; font-size: 17px; max-width: 520px; }
.abzeichen { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 100px; background: var(--verlauf); color: var(--knopf); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; box-shadow: 0 0 18px rgba(193, 102, 63, .35); }
.abzeichen::before { content: '★'; font-size: 10px; }
.punkte { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.punkte li { position: relative; padding-left: 24px; font-size: 15px; color: var(--gedaempft-2); }
.punkte li::before { content: ''; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 10px rgba(193, 102, 63, .8); }
.bereich-verbinder { height: 90px; max-width: 800px; margin: 0 auto; }
.bereich-verbinder svg { width: 100%; height: 100%; display: block; }

/* ── Funktionen ────────────────────────────────────────────────────── */
.funktionen { background: linear-gradient(rgba(176, 130, 64, 0), rgba(176, 130, 64, .05) 20%, rgba(176, 130, 64, .05) 80%, rgba(176, 130, 64, 0)); }
.funktionen__netz { display: grid; grid-template-columns: 1fr 200px 1fr; gap: 22px; align-items: center; }
.funktionen__spalte { display: flex; flex-direction: column; gap: 16px; }
.fkarte { display: flex; gap: 14px; padding: 20px 22px; align-items: flex-start; }
.fkarte__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--linie-2); display: grid; place-items: center; color: var(--band-hell); flex: none; }
.fkarte h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.fkarte p { color: var(--gedaempft); font-size: 14px; margin-top: 4px; }
.funktionen__mitte { position: relative; height: 400px; display: grid; place-items: center; margin-inline: -22px; /* die Bahnen reichen bis an die Karten heran */ }
.funktionen__bahnen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.chip--gross { position: relative; }
.chip--gross img { width: 84px; height: 84px; }

/* ── Plattformen ───────────────────────────────────────────────────── */
.plattformen { padding: clamp(50px, 7vh, 80px) 0; overflow: hidden; }
.marquee { display: flex; gap: 14px; width: max-content; margin-top: 28px; animation: marquee 30s linear infinite; }
.marquee__spur { display: flex; gap: 14px; }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }
.plattform { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 100px; background: var(--flaeche); border: 1px solid var(--linie-2); font-weight: 600; font-size: 15px; color: var(--gedaempft-2); white-space: nowrap; }
.plattform i { width: 10px; height: 10px; border-radius: 50%; background: var(--f); box-shadow: 0 0 10px var(--f); }
.plattform em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 100px; background: rgba(193, 102, 63, .14); color: var(--band-hell); }
.plattform--eigene { border-style: dashed; color: var(--gedaempft); }
.plattform--eigene i { background: transparent; border: 1px dashed var(--gedaempft); box-shadow: none; }

/* ── Unter der Haube ───────────────────────────────────────────────── */
.technik { background: linear-gradient(rgba(193, 102, 63, 0), rgba(193, 102, 63, .055) 20%, rgba(193, 102, 63, .055) 80%, rgba(193, 102, 63, 0)); }
.technik__raster { display: grid; grid-template-columns: 190px 300px 1fr; align-items: stretch; max-width: 1000px; margin-inline: auto; }
.technik__kacheln { display: flex; flex-direction: column; gap: 22px; position: relative; }
.technik__kacheln::before { content: ''; position: absolute; left: 50%; top: 30px; bottom: 30px; width: 1px; background: var(--bahn); }
.kachel { position: relative; height: 88px; border-radius: 18px; background: var(--flaeche); border: 1px solid var(--linie-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--gedaempft-2); font-size: 12px; font-weight: 600; }
.kachel .icon { width: 22px; height: 22px; color: var(--text); }
.kachel--logo { background: linear-gradient(145deg, #FFFCF7, #EDE1D0); border-color: rgba(193, 102, 63, .45); box-shadow: 0 10px 30px rgba(193, 102, 63, .35); color: var(--text); }
.kachel--logo img { width: 38px; height: 38px; }
.technik__bahnen svg { width: 100%; height: 100%; display: block; }
.technik__zeilen { display: flex; flex-direction: column; gap: 22px; }
.tzeile { height: 88px; display: flex; flex-direction: column; justify-content: center; }
.tzeile h3 { font-size: 18px; font-weight: 600; }
.tzeile p { color: var(--gedaempft); font-size: 14px; margin-top: 4px; }

/* ── Die Rechnung (eine Karte → fünf Plattformen) ──────────────────── */
.mehr { background: linear-gradient(rgba(193, 102, 63, 0), rgba(193, 102, 63, .05) 20%, rgba(193, 102, 63, .05) 80%, rgba(193, 102, 63, 0)); }
.mehr__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.mehr__text .h2 { margin-bottom: 0; }
.mehr__punkte { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.mehr__punkte li { display: flex; gap: 12px; align-items: center; font-size: 16px; color: var(--gedaempft-2); }
.mehr__icon { width: 30px; height: 30px; border-radius: 9px; background: var(--flaeche-2); border: 1px solid var(--linie-2); display: grid; place-items: center; color: var(--akzent); flex: none; }
.mehr__icon .icon { width: 15px; height: 15px; }
.kennzahl { margin-top: 28px; padding: 22px 24px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; max-width: 470px; }
.kennzahl__zahl { font-size: clamp(26px, 3vw, 40px); font-weight: 700; letter-spacing: -.02em; background: var(--verlauf); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.kennzahl p { font-size: 13px; color: var(--gedaempft); line-height: 1.5; }
.kennzahl strong { color: var(--text); font-weight: 600; }
.mehr__knoepfe { margin-top: 26px; }
.faecher { display: grid; grid-template-columns: 170px 1fr 150px; align-items: center; }
.faecher__karte { background: var(--a-flaeche); border: 1px solid var(--a-linie); border-radius: 16px; padding: 14px; box-shadow: 0 22px 50px -20px rgba(51, 38, 31, .42), 0 0 0 1px rgba(193, 102, 63, .1); }
.faecher__thumb { aspect-ratio: 16 / 9; border-radius: 9px; }
.faecher__kt { font-size: 13px; font-weight: 700; margin-top: 10px; }
.faecher__ks { font-size: 9.5px; color: var(--gedaempft); margin-top: 3px; line-height: 1.4; }
.faecher__bahnen { width: 100%; height: 320px; display: block; }
.faecher__ziele { display: grid; grid-template-rows: repeat(5, 64px); align-items: center; }
.faecher__ziele .plattform { font-size: 13px; padding: 9px 14px; }

/* ── Preis ─────────────────────────────────────────────────────────── */
.preis { background: linear-gradient(rgba(193, 102, 63, 0), rgba(193, 102, 63, .07) 25%, rgba(193, 102, 63, .07) 75%, rgba(193, 102, 63, 0)); }
/* Umschalter monatlich / jährlich: main.js kippt `preis--jahr` am Abschnitt,
   die je-monat/je-jahr-Spannen zeigen den passenden Betrag. */
.preis__umschalter { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; }
.preis__zeitraum { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px; border: 1px solid var(--linie-2); background: var(--flaeche); color: var(--gedaempft-2); font-weight: 600; font-size: 14px; transition: background .2s, color .2s, border-color .2s; }
.preis__zeitraum.ist { background: var(--knopf); color: var(--knopf-text); border-color: var(--knopf); }
.preis__zeitraum em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: rgba(79, 98, 67, .14); color: #4F6243; }
.preis__zeitraum.ist em { background: rgba(250, 246, 240, .22); color: var(--knopf-text); }
.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: 24px; max-width: 900px; margin-inline: auto; align-items: stretch; }
.preis__karte { max-width: 540px; margin-inline: auto; padding: 36px 32px; text-align: center; }
.preis__raster .preis__karte { max-width: none; margin-inline: 0; position: relative; display: flex; flex-direction: column; }
.preis__raster .punkte { flex: 1; }
.preis__raster .preis__betrag { font-size: clamp(30px, 3.4vw, 44px); }
.preis__stufe { font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gedaempft-2); margin-bottom: 10px; }
.preis__karte--pro { border-color: rgba(147, 71, 42, .5); box-shadow: 0 0 0 1px rgba(147, 71, 42, .22), 0 20px 44px -14px rgba(147, 71, 42, .35); }
.preis__empfohlen { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); margin-bottom: 0; }
.preis__betrag { font-size: clamp(34px, 4vw, 52px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.preis__hinweis { color: var(--gedaempft-2); font-size: 15px; margin: 12px auto 0; max-width: 420px; }
.preis__enthalten { margin-top: 28px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--band-hell); font-weight: 700; }
.preis__karte .punkte { margin: 14px auto 0; text-align: left; max-width: 400px; }
.preis__knoepfe { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 28px; }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { background: linear-gradient(rgba(193, 102, 63, 0), rgba(193, 102, 63, .043) 20%, rgba(193, 102, 63, .043) 80%, rgba(193, 102, 63, 0)); }
.faq__innen { max-width: 988px; }
.faq__liste { display: flex; flex-direction: column; gap: 12px; }
.faq-eintrag { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; transition: border-color .3s, box-shadow .3s; }
.faq-eintrag.faq--offen { border-color: rgba(193, 102, 63, .45); box-shadow: 0 0 0 1px rgba(193, 102, 63, .15), 0 10px 30px -10px rgba(193, 102, 63, .25); }
.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: 20px 22px; text-align: left; font-size: 17px; font-weight: 600; border-radius: 16px; }
.faq-zeichen { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(193, 102, 63, .6); color: var(--akzent); position: relative; flex: none; }
.faq-zeichen::before, .faq-zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; 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(--gedaempft-2); font-size: 15px; line-height: 1.6; }
.faq-antwort[hidden] { display: none; }

/* ── Schluss ───────────────────────────────────────────────────────── */
.cta__innen { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta__titel { font-size: clamp(36px, 5.6vw, 72px); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.cta__text { margin-top: 22px; color: var(--gedaempft-2); max-width: 520px; }
.cta__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.cta__abzeichen { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; margin-top: 34px; color: var(--gedaempft); font-size: 13px; letter-spacing: .04em; }
.cta__abzeichen li { display: flex; gap: 8px; align-items: center; }
.cta__abzeichen .icon { color: var(--band-hell); width: 16px; height: 16px; }

/* ── Fußzeile ──────────────────────────────────────────────────────── */
.fuss { border-top: 1px solid var(--linie); padding: 60px 0 50px; }
.fuss__innen { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.tor--fuss { filter: drop-shadow(0 4px 10px rgba(147, 71, 42, .22)); }
.fuss__links { display: flex; gap: 10px; font-size: 14px; color: var(--gedaempft-2); flex-wrap: wrap; justify-content: center; }
.fuss__links a:hover { color: var(--text); }
.fuss__copy { font-size: 13px; color: var(--gedaempft); }

/* ── Platzhalterseiten (Impressum, Datenschutz) ───────────────────── */
.seite { padding-top: calc(92px + clamp(36px, 7vh, 80px)); min-height: 70vh; }
.seite__innen { max-width: 760px; }
.seite h1 { font-size: clamp(34px, 4.4vw, 58px); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin-bottom: 18px; }
.seite__hinweis { color: var(--gedaempft-2); margin-bottom: 36px; }
.seite h2 { font-size: 20px; font-weight: 600; margin-top: 30px; margin-bottom: 8px; }
.seite p { color: var(--gedaempft-2); }
.platzhalter { display: inline-block; padding: 10px 14px; border-radius: 10px; border: 1px dashed rgba(193, 102, 63, .6); color: var(--akzent); font-weight: 600; margin-top: 4px; }
.seite__zurueck { display: inline-block; margin-top: 48px; color: var(--gedaempft-2); }
.seite__zurueck:hover { color: var(--text); }

/* ── Responsiv ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* Schmal gezogen wird aus dem Bogen eine steile Spitze, deren Schenkel
     mitten durch Überschrift und Fließtext laufen — das sähe aus wie
     durchgestrichen. Die helle Torfläche bleibt, die Linie entfällt. */
  .portal__rand { display: none; }
  .schritte__raster { grid-template-columns: 1fr 400px; gap: 40px; }
  .funktionen__netz { grid-template-columns: 1fr 150px 1fr; }
  .technik__raster { grid-template-columns: 160px 180px 1fr; }
  .mehr__raster { grid-template-columns: 1fr 1fr; gap: 40px; }
  .faecher { grid-template-columns: 150px 1fr 140px; }
  .bereich { gap: 36px; }
}
@media (max-width: 900px) {
  .nav__menue { position: absolute; top: 66px; left: var(--rand); right: var(--rand); flex-direction: column; padding: 10px; background: rgba(255, 252, 247, .98); border: 1px solid var(--linie); border-radius: 18px; box-shadow: 0 20px 50px rgba(51, 38, 31, .25); display: none; margin: 0; }
  .nav--offen .nav__menue { display: flex; }
  .nav__link { padding: 12px 14px; font-size: 15px; }
  .nav__burger { display: flex; }
  .nav__spruch { display: none; }
  .nav__cta { display: none; }
  .app__koerper--zwei { grid-template-columns: 44px 1fr; }
  .app__koerper--zwei .app__pane--upload { grid-column: 2; border-left: 0; border-top: 1px solid var(--linie); }
  .app__koerper--zwei .app__seite { grid-row: 1 / -1; }
  .app__browser { border-right: 0; border-bottom: 1px solid var(--linie); }
  .schritte__raster { grid-template-columns: 1fr; }
  .schritte__bild { position: static; width: 100%; max-width: 560px; margin-inline: auto; order: -1; margin-bottom: 8px; }
  .schritte__zaehler { text-align: left; }
  .bereich { grid-template-columns: 1fr; gap: 28px; padding: 18px 0; }
  .bereich--umgekehrt .bereich__text, .bereich--umgekehrt .bereich__bild { order: 0; }
  .bereich-verbinder { display: none; }
  .duo { grid-template-columns: 1fr; gap: 20px; }
  .funktionen__netz { grid-template-columns: 1fr; gap: 16px; }
  .funktionen__mitte { height: 120px; margin-inline: 0; }
  .funktionen__bahnen { display: none; }
  .technik__raster { grid-template-columns: 1fr; gap: 20px; max-width: 560px; }
  .technik__bahnen { display: none; }
  .technik__kacheln { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .technik__kacheln::before { display: none; }
  .kachel { flex: 1 1 calc(50% - 12px); height: 76px; }
  .technik__zeilen { gap: 0; }
  .tzeile { height: auto; padding: 14px 0; border-top: 1px solid var(--linie); }
  .mehr__raster { grid-template-columns: 1fr; gap: 40px; }
  .portal__punkte { grid-template-columns: 1fr; gap: 16px; max-width: 460px; }
  .preis__raster { grid-template-columns: 1fr; max-width: 540px; gap: 28px; }
  .faecher { grid-template-columns: 1fr; gap: 14px; max-width: 420px; margin-inline: auto; }
  .faecher__bahnen { display: none; }
  .faecher__ziele { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .statement .container::before, .statement .container::after { display: none; }
  .verbinder { height: 160px; }
  .verbinder--kurz { height: 100px; }
}
@media (max-width: 640px) {
  .hero__buehne { padding-top: calc(66px + 16px); min-height: 92svh; }
  /* Auf schmalen Bildschirmen ist der Text viel länger — ein Bogen quer
     durch den Fliesstext sähe aus wie durchgestrichen. Dort bleibt die helle
     Lichtfläche mit Sonne und Dünen, die Umrisslinie entfällt. */
  .szene__gestirn { width: min(62vw, 290px); top: -9svh; }
  .szene__glut { height: 260px; top: calc(100svh - min(23svh, 210px) - 110px); }
  .hero__titel { font-size: clamp(32px, 9vw, 44px); max-width: none; }
  .hero__knoepfe { width: 100%; flex-direction: column; }
  .pille--gross { width: 100%; padding: 15px 20px; font-size: 15px; }
  .schaltkreis { height: 170px; }
  .chip--hero { top: 85px; }
  .chip--hero img { width: 58px; height: 58px; }
  .app__seite { display: none; }
  .app__koerper, .app__koerper--zwei { grid-template-columns: 1fr; }
  .upx__koerper, .pox { grid-template-columns: 1fr; }
  .plreihe { flex-wrap: wrap; }
  .plreihe__kachel { flex: 1 1 30%; }
  .fkb__chips span:nth-child(n+5) { display: none; }
  .app__koerper--zwei .app__pane--upload { grid-column: 1; }
  .app--schritte { min-height: 470px; }
  .bild { top: 44px; right: 10px; bottom: 10px; left: 10px; }
  .bild .m-feld--mehr { -webkit-line-clamp: 2; }
  .lk__aktionen { display: none; }
  .po__zeile { grid-template-columns: 1fr; }
  .st__drei, .st__vier { grid-template-columns: 1fr; }
  .preis__karte { padding: 28px 18px; }
  .preis__knoepfe { width: 100%; }
  .faq-frage { font-size: 15px; padding: 16px; }
  .faq-antwort { padding: 0 16px 16px; font-size: 14px; }
  .kennzahl { grid-template-columns: 1fr; gap: 10px; }
  .cta__abzeichen { gap: 12px 18px; }
  .fuss { padding: 44px 0 36px; }
}

/* ── Weniger Bewegung ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .verbinder__puls, .puls { display: none; }
  .marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__spur { flex-wrap: wrap; justify-content: center; }
  .marquee__spur[aria-hidden="true"] { display: none; }
  .wort { color: var(--text); }
  .tor, .tor__sonne, .nav__innen, .nav__logo img.nav__wortmarke, .nav__spruch { transition: none !important; }
  /* Hero-Schleife: Endzustand fest, unabhängig vom Animations-Verhalten */
  .bp--live .s-wartet, .bp--live .s-laeuft { opacity: 0 !important; }
  .bp--live .s-bereit { opacity: 1 !important; }
  .bp--live .bp__balken u { transform: scaleX(1) !important; }
  .lg--live .lg__zeile { opacity: 1 !important; }
}
/* Derselbe Zustand als Testhaken (main.js setzt die Klasse auch bei reduced-motion) */
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 { scroll-behavior: auto; }
html.keine-bewegung .reveal { opacity: 1; transform: none; }
html.keine-bewegung .verbinder__puls, html.keine-bewegung .puls { display: none; }
html.keine-bewegung .marquee { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
html.keine-bewegung .marquee__spur { flex-wrap: wrap; justify-content: center; }
html.keine-bewegung .marquee__spur[aria-hidden="true"] { display: none; }
html.keine-bewegung .wort { color: var(--text); }
html.keine-bewegung .tor, html.keine-bewegung .tor__sonne, html.keine-bewegung .nav__innen, html.keine-bewegung .nav__logo img.nav__wortmarke, html.keine-bewegung .nav__spruch { transition: none !important; }
html.keine-bewegung .bp--live .s-wartet, html.keine-bewegung .bp--live .s-laeuft { opacity: 0 !important; }
html.keine-bewegung .bp--live .s-bereit { opacity: 1 !important; }
html.keine-bewegung .bp--live .bp__balken u { transform: scaleX(1) !important; }
html.keine-bewegung .lg--live .lg__zeile { opacity: 1 !important; }
/* ?statisch (Testhaken für Aufnahmen): Nav mitrollen lassen */
html.statisch .nav { position: absolute; }