/* Schriften: selbst gehostet aus /assets/fonts (SIL Open Font License, Lizenzdateien liegen daneben).
   Kein Abruf bei Google Fonts. */
@font-face{ font-family:"Anton"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/anton-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:italic; font-weight:400; font-display:swap; src:url("/assets/fonts/archivo-latin-400-italic.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/fonts/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face{ font-family:"Archivo"; font-style:normal; font-weight:800; font-display:swap; src:url("/assets/fonts/archivo-latin-800-normal.woff2") format("woff2"); }

  /* Layout: mobil-first, eine Spalte (max. 560px). Gelbe Bühne oben (Logo, Headline, Teamfoto),
     darunter schwarze Abschnitte. Funnel-Schritte schwarz mit gelben Akzenten.
     CI 2026: Gelb + Schwarz + Weiß, Display-Schrift schmal & fett wie das Logo.
     Bewusst nur ein Theme (Marken-Look). */
  :root{
    color-scheme: dark;
    --yellow:#F7DC4A;        /* Markengelb, RGB 247/220/74 */
    --yellow-soft:#F0D64A;   /* Gelb im Teamfoto */
    --olive:#8A7600;         /* dunkles Ende des Banner-Verlaufs */
    --ink:#0B0B0A;           /* Schwarz */
    --surface:#17160F;
    --line:#2E2C1C;
    --white:#FFFFFF;
    --muted:#B5B09A;
    --faint:#6E6A55;
    --danger:#FF6A5F;
    --placeholder:#FF9F1C;
    --display:"Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", "Arial Narrow", sans-serif;
    --body:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  }
  *{ box-sizing:border-box; }
  html{ background:var(--ink); }
  body{ overflow-x:clip; margin:0; background:var(--ink); color:var(--white); font-family:var(--body); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; }
  .wrap{ max-width:560px; margin:0 auto; padding-inline:20px; }

  /* Fokus */
  :where(button, a, input, video):focus-visible{ outline:3px solid var(--yellow); outline-offset:3px; }
  .on-yellow :where(button, a):focus-visible{ outline-color:var(--ink); }

  /* Typo */
  .display{ hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word; font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.005em; line-height:.98; text-wrap:balance; margin:0; }
  h1.display{ font-size:clamp(2.6rem, 12.5vw, 3.9rem); }
  h2.display, .flow h1.display{ font-size:clamp(1.9rem, 8.4vw, 2.6rem); margin-bottom:14px; }
  .tag{ display:inline-block; background:var(--ink); color:var(--yellow); padding:0 .18em; transform:rotate(-3deg); margin-block:.06em; }
  .eyebrow{ font:800 clamp(1.05rem, 4.2vw, 1.3rem) var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--yellow); margin:0 0 12px; }
  .muted{ color:var(--muted); }
  .small{ font-size:.85rem; }
  .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .ph{ color:var(--placeholder); font-weight:700; }
  .flow .ph{ color:#9E1208; background:var(--white); padding:0 4px; border-radius:3px; }

  /* Buttons */
  .btn{ text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:58px; padding:12px 20px; border-radius:10px; border:none; cursor:pointer; text-align:center; font:800 1.06rem/1.2 var(--body); }
  .btn small{ font-weight:500; font-size:.8rem; margin-top:3px; opacity:.85; }
  .btn-ink{ background:var(--ink); color:var(--white); }
  .btn-ink .hl{ color:var(--yellow); }
  .btn-yellow{ background:var(--yellow); color:var(--ink); }
  .btn-line-ink{ background:transparent; color:var(--ink); border:2px solid var(--ink); }
  .btn-line{ background:transparent; color:var(--white); border:2px solid #4A4733; }
  .btn:active{ transform:translateY(1px); }
  .btn[disabled]{ opacity:.6; cursor:wait; }
  .stack{ display:flex; flex-direction:column; gap:10px; }
  .row{ display:flex; gap:10px; }
  .row > *{ flex:1; min-width:0; }
  .textlink{ background:none; border:none; padding:0; font:inherit; color:var(--yellow); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .back{ background:none; border:none; padding:0; margin-bottom:18px; font:600 .88rem var(--body); color:var(--muted); text-decoration:underline; cursor:pointer; }

  /* ===== Landing: gelbe Bühne ===== */
  .stage{ position:relative; isolation:isolate; background:var(--yellow); color:var(--ink); overflow:hidden; }
  /* Banner mit leichter Deckkraft: weißes DAS-BÜRO-Logo zwischen den beiden Buttons, nach außen weich ausgeblendet.
     Größe und Lage (--bw/--bx/--by, Maske --mw/--mh/--mx/--my) berechnet placeBanner(). */
  .stage::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
    background-image:url("/assets/banner-hd.jpg"); background-repeat:no-repeat;
    background-size:var(--bw, cover); background-position:var(--bx, center) var(--by, center);
    -webkit-mask-image:radial-gradient(var(--mw, 50%) var(--mh, 50%) at var(--mx, 50%) var(--my, 50%), #000 60%, transparent 100%);
    mask-image:radial-gradient(var(--mw, 50%) var(--mh, 50%) at var(--mx, 50%) var(--my, 50%), #000 60%, transparent 100%); }
  .stage.banner-ready::before{ opacity:.3; }
  .stage .hero-top{ padding-block:28px 0; text-align:center; }
  .logo{ display:block; height:auto; }
  .stage .logo{ width:118px; margin:0 auto 18px; }
  .stage .lead{ font-size:1.08rem; font-weight:600; margin:14px auto 6px; max-width:34ch; }
  .stage .meta{ font-size:.92rem; font-weight:500; margin:0; opacity:.8; }

  /* Duo: Scheffel am linken, Frank am rechten Rand, Text + Buttons dazwischen.
     Beide Freisteller im gleichen Maßstab: Frank-Höhe = 0,98 × Scheffel-Höhe. */
  .duo{ --h:clamp(340px, 98vw, 470px); position:relative; height:calc(var(--h) + 56px); margin-top:18px; }
  .p{ position:absolute; bottom:0; width:auto; max-width:none; pointer-events:none; user-select:none; }
  .p-s{ height:calc(var(--h) * .88); left:calc(var(--h) * -.329); }   /* symmetrisch zu Frank */
  .p-f{ height:calc(var(--h) * .862); right:calc(var(--h) * -.235); }  /* Rand bei 80 % der Bildbreite: Teil des Gesichts sichtbar */
  .who{ position:absolute; bottom:12px; z-index:2; background:var(--ink); color:var(--yellow); font:700 .78rem var(--body); letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:4px; }
  .who-s{ left:12px; transform:rotate(-3deg); }
  .who-f{ right:12px; transform:rotate(3deg); }
  .duo-cta{ position:absolute; z-index:3; left:50%; top:0; bottom:52px; transform:translateX(-50%); width:min(270px, 68%); display:flex; flex-direction:column; justify-content:space-between; gap:10px; pointer-events:none; }
  .duo-cta .btn{ pointer-events:auto; }
  /* Handy/Tablet: "Jetzt bewerben" direkt unter dem Text, "Erst kennenlernen" unten zwischen den Oberkörpern – Gesichter bleiben frei */
  .duo-cta .btn{ box-shadow:0 6px 18px rgba(0,0,0,.25); }
  .btn-white{ background:var(--white); color:var(--ink); }
  .cta-top{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  /* Zusatzinfo zum Button: Häkchen-Zeile ohne Kasten, damit sie nicht wie ein zweiter Button wirkt */
  .checks{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 12px;
    font:800 .82rem/1.5 var(--body); color:var(--ink); text-shadow:0 0 6px var(--yellow), 0 0 10px var(--yellow), 0 0 14px var(--yellow); }
  .checks li::before{ content:"✓ "; }
  .checks .hl{ text-shadow:none; padding:0 4px; background:linear-gradient(transparent 12%, var(--white) 12% 88%, transparent 88%); box-decoration-break:clone; -webkit-box-decoration-break:clone; }

  /* Breite Bildschirme: Scheffel und Frank rahmen Text und Buttons ein */
  @media (min-width: 1100px){
    .stage{ --H:min(700px, 82vh); position:relative; min-height:calc(var(--H) + 30px); display:flex; flex-direction:column; justify-content:center; padding-block:24px 70px; }
    .stage .hero-top{ position:relative; z-index:3; max-width:500px; padding-block:0; }
    .stage h1.display{ font-size:clamp(3.2rem, 4.4vw, 4.4rem); }
    .duo{ position:static; height:auto; margin:22px auto 0; }
    .p-s{ height:var(--H); left:calc(var(--H) * -.374); }
    .p-f{ height:calc(var(--H) * .98); right:calc(var(--H) * -.268); }
    .duo-cta{ position:relative; left:auto; top:auto; bottom:auto; transform:none; width:330px; margin:0 auto; justify-content:flex-start; gap:clamp(96px, 14vh, 140px); }  /* Platz für das Banner-Logo */
    .who{ bottom:22px; }
    .who-s{ left:24px; }
    .who-f{ right:24px; }
  }
  @media (min-width: 1500px){
    .stage .hero-top{ max-width:560px; }
  }

  /* ===== Schwarze Abschnitte ===== */
  .section{ padding-block:52px 8px; }
  .money{ background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--yellow); border-radius:8px; padding:14px 16px; margin:0 0 6px; }
  .money strong{ color:var(--yellow); }

  /* Videos */
  .videos{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
  .vcard{ min-width:0; }
  .vcard video{ display:block; width:100%; max-width:100%; aspect-ratio:9/16; object-fit:cover; background:#000; border-radius:12px; border:2px solid var(--yellow); }
  .vcard .name{ font-family:var(--display); text-transform:uppercase; font-size:1.35rem; margin:8px 0 0; line-height:1; }
  .vcard .len{ font-size:.8rem; color:var(--muted); margin:2px 0 0; }

  /* Incentive-Videos: vier Clips im Querformat (16:9), alle gleich groß.
     Handy: wischbare Reihe, nächster Clip schaut rechts hervor. Ab 900 px: Raster 2 × 2, breiter als die Textspalte. */
  .reel-wrap{ margin-top:26px; width:100vw; margin-left:calc(50% - 50vw); }
  .reel{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-inline:16px; padding-block:2px; }
  .reel::-webkit-scrollbar{ display:none; }
  .clip{ margin:0; flex:0 0 84vw; aspect-ratio:16/9; scroll-snap-align:center; position:relative; min-width:0; }
  .clip video{ display:block; width:100%; height:100%; object-fit:cover; border-radius:12px; border:2px solid var(--yellow); background:#000; cursor:pointer; }
  .clip .snd{ position:absolute; right:8px; bottom:8px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; pointer-events:none; }
  .reel-hint{ text-align:center; font-size:.8rem; color:var(--muted); margin:10px 0 0; }
  @media (min-width: 900px){
    .reel-wrap{ width:min(1000px, 100vw - 40px); margin-left:50%; transform:translateX(-50%); }
    .reel{ display:grid; grid-template-columns:1fr 1fr; gap:14px; overflow:visible; padding-inline:0; }
    .clip{ flex:none; }
    .reel-hint .swipe{ display:none; }
  }

  /* Stimmen aus dem Team: gelbe Zitat-Karten (Variante A) zum Wischen.
     Handy/Tablet: wischbare Reihe, nächste Karte schaut rechts hervor. Ab 900 px: Karten nebeneinander, breiter als die Textspalte. */
  .voices{ --vw:min(84vw, 340px); margin-top:18px; width:100vw; margin-left:calc(50% - 50vw); }
  .voices-rail{ display:flex; gap:12px; overflow-x:auto; padding-inline:20px; scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch; }
  .voices-rail.dragging{ cursor:grabbing; }
  .voices-rail::-webkit-scrollbar{ display:none; }
  .voice{ position:relative; flex:0 0 var(--vw); aspect-ratio:899/1416; background:var(--yellow); color:var(--ink); border-radius:16px; overflow:hidden; padding:22px 18px 22px; margin:0; }
  .voice blockquote{ position:relative; z-index:2; margin:0; max-width:54%; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:1.25rem; line-height:1.06; text-wrap:balance; hyphens:auto; -webkit-hyphens:auto; }
  .voice blockquote::before{ content:"“"; display:block; font-size:4rem; line-height:.6; margin-bottom:6px; }
  .voice img{ position:absolute; bottom:0; width:auto; max-width:none; pointer-events:none; }
  /* Augen aller Personen auf gleicher Höhe (22,7 % der Kartenhöhe, wie bei Lennard):
     Bildhöhe = 77,3 % ÷ (1 − Augenhöhe im Bild). Tilman 12,2 %, Theo 13,8 %, Dilan 15,8 %. */
  .voice .v-tilman{ right:-26%; height:88%; }
  .voice .v-theo{ right:-26%; height:89.6%; }
  .voice .v-dilan{ right:-36%; height:91.8%; }  /* langes Haar braucht mehr Abstand zum Zitat */
  .voice .v-anita{ right:-38%; height:98%; }  /* langes Haar: mehr Abstand zum Zitat */
  .voice .v-lorenzo{ right:-30%; height:95%; }  /* Foto endet an der Hüfte: etwas kleiner, damit die Haare nicht anstoßen */
  .voice-narrow blockquote{ max-width:50%; }
  /* Judyta, Lennard: Foto als ganzes Kartenbild (Text herausretuschiert), Zitat, Namensschild und Rolle als echter Text wie bei den anderen */
  .voice-pic{ container-type:inline-size; }
  .voice-pic .card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left; }
  .voice figcaption{ position:absolute; z-index:2; left:18px; bottom:18px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
  .voice .name{ background:var(--ink); color:var(--yellow); font:700 .8rem var(--body); letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:4px; transform:rotate(-3deg); }
  .voice .role{ font:700 .82rem var(--body); color:var(--ink); background:rgba(247,220,74,.85); padding:0 3px; }
  .voices-hint{ text-align:center; font-size:.8rem; color:var(--muted); margin:10px 0 0; }
  @media (min-width: 900px){
    .voices{ --vw:300px; width:min(1240px, 100vw); margin-left:50%; transform:translateX(-50%); }
    .voices-rail{ gap:16px; }
    .voice{ container-type:inline-size; }
    .voice blockquote{ font-size:6.2cqw; }
    .voice .role{ font-size:3.9cqw; }
    .voice .name{ font-size:3.7cqw; }
  }

  /* Skills & Branche */
  .why-grid{ display:grid; gap:14px; margin-top:20px; }
  .why-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px 18px; min-width:0; }
  .why-card h3{ margin:0 0 10px; font-size:1.15rem; font-weight:800; color:var(--yellow); }
  .why-card p{ margin:0 0 12px; color:var(--muted); }
  .why-card p:last-child{ margin-bottom:0; }
  /* Skills-Kreis: Text in der Mitte, sechs Skills mit Emoji auf dem Ring */
  .ring-wrap{ min-width:0; }
  .ring{ position:relative; width:min(100%, 440px); aspect-ratio:1; margin:8px auto 0; }
  .ring::before{ content:""; position:absolute; inset:9%; border-radius:50%; border:2px dashed rgba(247,220,74,.55); }
  .ring-core{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52%; aspect-ratio:1; border-radius:50%; background:var(--yellow); color:var(--ink);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8%; box-shadow:0 0 0 8px rgba(247,220,74,.15); }
  .ring-core h3{ margin:0 0 6px; font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(1.05rem, 4.6vw, 1.45rem); line-height:1.05; text-wrap:balance; }
  .ring-core p{ margin:0; font-size:clamp(.74rem, 3vw, .9rem); font-weight:600; line-height:1.3; }
  .ring-skills{ list-style:none; margin:0; padding:0; }
  .skill{ position:absolute; transform:translate(-50%,-50%); width:26%; display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
  .skill .em{ width:clamp(46px, 13vw, 60px); aspect-ratio:1; border-radius:50%; background:var(--surface); border:2px solid var(--yellow); display:flex; align-items:center; justify-content:center; font-size:clamp(1.3rem, 5.5vw, 1.7rem); }
  .skill .lb{ font:800 clamp(.68rem, 2.9vw, .82rem)/1.15 var(--body); color:var(--white); hyphens:manual; }
  .ring-note{ text-align:center; color:var(--muted); margin:14px auto 0; max-width:44ch; }
  @media (prefers-reduced-motion: no-preference){
    .skill{ animation:pop .5s ease both; }
    .skill:nth-child(2){ animation-delay:.06s } .skill:nth-child(3){ animation-delay:.12s } .skill:nth-child(4){ animation-delay:.18s } .skill:nth-child(5){ animation-delay:.24s } .skill:nth-child(6){ animation-delay:.3s }
    @keyframes pop{ from{ opacity:.3; transform:translate(-50%,-50%) scale(.85); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
  }
  @media (min-width: 900px){
    .why-grid{ max-width:520px; margin-inline:auto; }
  }

  /* Benefits */
  .benefits{ display:grid; gap:20px; margin-top:22px; }
  .benefit{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; }
  .benefit .ico{ width:40px; height:40px; border-radius:8px; background:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }
  .benefit h3{ margin:0 0 2px; font-size:1.05rem; font-weight:800; }
  .benefit p{ margin:0; color:var(--muted); font-size:.95rem; }

  .closing{ position:relative; isolation:isolate; overflow:hidden; background:var(--yellow); color:var(--ink); margin-top:52px; }
  .closing .wrap{ position:relative; z-index:1; padding-block:110px 36px; }   /* oben Platz für die Pfeilspitze */
  /* Zickzack-Pfeil: startet blass hinter dem Text unten links, endet kräftig oben rechts */
  .growth{ position:absolute; inset:0; z-index:0; pointer-events:none; }
  .growth-line{ position:absolute; inset:0; width:100%; height:100%; }
  .growth-head{ position:absolute; width:58px; height:58px; left:calc(90% - 29px); top:calc(20% - 29px); transform-origin:50% 50%; }
  /* Scheffel sitzt rechts oben auf dem Bewerben-Button (KI-Entwurf): Sitzlinie (53 % der Bildhöhe) = Oberkante des Buttons, Beine hängen vor dem Button */
  .cta-seat{ position:relative; margin-top:12px; }
  .closing h2, .closing .wrap > p:not(.alt){ max-width:64%; }   /* Platz rechts für Scheffels Oberkörper */
  .seat-rider{ position:absolute; z-index:2; right:4%; height:220px; width:auto; max-width:none; bottom:calc(100% - 220px * .47); pointer-events:none; filter:drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
  .cta-seat .btn{ position:relative; z-index:1; }
  .cta-seat + .alt{ margin-top:30px; }
  @media (min-width: 900px){ .cta-seat + .alt{ margin-top:46px; } }
  @media (min-width: 900px){ .cta-seat{ margin-top:16px; } .seat-rider{ height:250px; right:6%; bottom:calc(100% - 250px * .47); } .closing h2, .closing .wrap > p:not(.alt){ max-width:70%; } }
  @media (min-width: 900px){ .closing .wrap{ padding-block:120px 48px; } .growth-head{ width:70px; height:70px; left:calc(90% - 35px); top:calc(20% - 35px); } }
  .closing p{ font-weight:500; margin:0 0 20px; }
  .closing .alt{ text-align:center; font-weight:600; margin:14px 0 0; font-size:.92rem; }
  .closing .textlink{ color:var(--ink); font-weight:800; }

  /* ===== Funnel-Seiten im Banner-Design =====
     Verlauf Oliv → Gelb wie im Banner, darüber das DAS-BÜRO-Logo als helles Muster. */
  .flow{ position:relative; isolation:isolate; min-height:100vh; display:flex; flex-direction:column; color:var(--ink);
    background:linear-gradient(90deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 72%, rgba(0,0,0,.22) 100%), var(--yellow); }
  .flowhead{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:16px 0; }
  .flowhead .logo{ width:84px; flex:0 0 auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
  .flowhead .progress{ margin-left:auto; }
  .home{ text-decoration:none; flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 12px; border:none; border-radius:8px; background:var(--ink); color:var(--white); font:700 .82rem var(--body); cursor:pointer; }
  .home span{ color:var(--yellow); font-size:1.05rem; line-height:1; }
  .progress:not([hidden]) + .home{ margin-left:0; }
  .progress{ flex:1; max-width:220px; }
  .bar{ height:6px; background:rgba(0,0,0,.18); border-radius:3px; overflow:hidden; }
  .bar span{ display:block; height:100%; width:0; background:var(--ink); animation:grow .35s ease both; }
  @keyframes grow{ from{ width:var(--from, 0); } }
  .progress .lbl{ font-size:.72rem; font-weight:700; color:var(--ink); margin-top:5px; text-align:right; letter-spacing:.06em; text-transform:uppercase; }
  .flow main{ flex:1; padding-block:30px 32px; }
  .flow .back{ color:var(--ink); }
  .flow .eyebrow{ color:var(--ink); }
  .flow .muted{ color:rgba(11,11,10,.75); }
  .flow .btn-yellow{ background:var(--ink); color:var(--yellow); }
  .flow .btn-line{ color:var(--ink); border-color:var(--ink); }
  .flow .textlink{ color:var(--ink); font-weight:800; }
  .flow .vcard video{ border-color:var(--ink); }
  .flow .vcard .len{ color:rgba(11,11,10,.7); }

  .options{ display:grid; gap:10px; }
  .option{ display:block; width:100%; text-align:left; background:var(--white); border:2px solid transparent; border-radius:10px; padding:16px 18px; min-height:58px; color:var(--ink); font:700 1rem var(--body); cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.12); }
  .option:hover{ border-color:var(--ink); }
  .option.picked{ background:var(--ink); color:var(--yellow); border-color:var(--ink); }

  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:.82rem; font-weight:700; color:var(--ink); margin-bottom:6px; }
  .field input{ width:100%; background:var(--white); color:var(--ink); border:2px solid transparent; border-radius:10px; padding:14px 16px; min-height:58px; font:400 1rem var(--body); }
  .field input::placeholder{ color:#6B6B6B; }
  .field input[aria-invalid="true"]{ border-color:#B3140A; }
  .error{ color:#9E1208; font-weight:700; font-size:.86rem; margin-top:6px; }
  .hint{ color:rgba(11,11,10,.75); margin:-4px 0 18px; }
  .note{ font-size:.8rem; color:rgba(11,11,10,.75); margin-top:14px; }
  .note a{ color:var(--ink); }
  .flow :where(button, a, input, video):focus-visible{ outline-color:var(--ink); }

  .stamp{ display:inline-block; font-family:var(--display); text-transform:uppercase; font-size:1.3rem; background:var(--ink); color:var(--yellow); padding:4px 12px; transform:rotate(-3deg); margin-bottom:18px; }
  .proto{ font-size:.75rem; color:var(--ink); border:1px dashed var(--ink); border-radius:8px; padding:8px 10px; margin-top:16px; }
  .legal h3{ font-size:1.05rem; font-weight:800; margin:22px 0 6px; }
  .legal p{ margin:0 0 10px; line-height:1.55; overflow-wrap:anywhere; }
  .legal .draft{ background:rgba(11,11,10,.08); border-left:4px solid var(--ink); padding:10px 12px; font-size:.88rem; font-weight:600; }
  .flow footer, .flow footer a{ color:rgba(11,11,10,.6); }

  footer{ text-align:center; padding-block:28px calc(20px + env(safe-area-inset-bottom, 0px)); font-size:.75rem; color:var(--faint); }
  footer a{ color:var(--faint); }

  /* Seitenwechsel: leichtes Einblenden wie im Prototyp */
  .flow main, .landing{ animation:rise .3s ease both; }
  @keyframes rise{ from{ opacity:.4; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce){ .flow main, .landing{ animation:none; } .bar span{ animation:none; } }
  .legal a{ overflow-wrap:anywhere; color:var(--ink); font-weight:600; }

  /* Spam-Falle (Honeypot): für Menschen unsichtbar */
  .hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }