/* =====================================================================
   wivanto — Gestaltungsrichtung „Leuchtfeuer"
   Nachtdunkel, Farben pixelgenau aus dem Logo gemessen.
   Bewusst EIN Erscheinungsbild (kein Hell/Dunkel-Umschalter): Das
   Versprechen ist Erreichbarkeit, wenn sonst niemand da ist — die
   Farbe erzaehlt das mit. Siehe wiki/angebot-leistungen.md.

   Schrift: Inter, selbst gehostet (KEIN Google-Aufruf, DSGVO).
   ===================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens: aus dem Logo gemessen ---------- */
:root{
  --ground:#070D20;        /* Nacht */
  --ground-2:#0A122C;      /* Logo-Navy, erhoehte Flaeche */
  --ground-3:#0E1838;      /* Karte */
  --ink:#DFEBFA;           /* Turmweiss */
  --ink-2:#A9BDDC;         /* Fliesstext, 9,4:1 auf --ground */
  --ink-3:#8397BC;         /* Sekundaer, 6,2:1 */
  --beam:#18D8FC;          /* Laternenlicht — der Akzent */
  --sea:#0072F0;           /* Signalblau — der Fels */
  --on-beam:#04202B;       /* Text auf Cyan-Flaeche, 9,8:1 */
  --rule:rgba(223,235,250,.13);
  --rule-soft:rgba(223,235,250,.07);
  --ok:#4ADE80;
  --no:#FF8A8A;
  --shadow:0 2px 4px rgba(0,0,0,.35), 0 24px 60px -22px rgba(0,0,0,.85);
  --max:1140px;
  --pad:clamp(20px,5vw,40px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:148px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;line-height:1.06;letter-spacing:-.032em;text-wrap:balance;font-weight:800}
p{margin:0}
a{color:var(--beam);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--beam);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--beam);color:var(--on-beam);
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:600;z-index:200;
}
.skip:focus{left:0}

/* ---------- Kopfbereich ---------- */
.topbar{position:sticky;top:0;z-index:100;background:rgba(7,13,32,.92);backdrop-filter:blur(12px)}
@supports not (backdrop-filter:blur(12px)){ .topbar{background:#070D20} }

/* Angebots-Reiter */
.tabs{border-bottom:1px solid var(--rule-soft);background:rgba(4,8,22,.55)}
.tabs .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{
  /* 2026-08-25: von 13px auf 15px angehoben (Michas Wunsch). Die Reiter sind die
     fuenf Angebotsfelder — sie duerfen nicht kleiner wirken als die Unternavigation
     eines einzelnen Angebots. */
  position:relative;font-size:15px;padding:12px 16px;color:#93A6C9;white-space:nowrap;
  min-height:46px;display:flex;align-items:center;text-decoration:none;
}
.tab:hover{color:var(--ink-2);text-decoration:none}
.tab[aria-current="page"]{color:var(--beam)}
.tab[aria-current="page"]::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;
  background:var(--beam);border-radius:2px 2px 0 0;box-shadow:0 0 14px 1px rgba(24,216,252,.55);
}
.tab .soon{font-size:11.5px;color:#7286AF;margin-left:7px;letter-spacing:.04em}

/* Hauptnavigation */
.nav{border-bottom:1px solid var(--rule-soft)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand{display:flex;align-items:center}
.brand img{height:46px;width:auto}
.navlinks{display:flex;gap:4px;margin-left:auto}
.navlinks a{
  color:var(--ink-2);font-size:14.5px;padding:11px 12px;min-height:44px;
  display:flex;align-items:center;
}
.navlinks a:hover{color:var(--ink);text-decoration:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:15px;padding:13px 22px;border-radius:100px;
  min-height:48px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}
.btn-primary{background:var(--beam);color:var(--on-beam);box-shadow:0 0 0 0 rgba(24,216,252,.4)}
.btn-primary:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 26px -8px rgba(24,216,252,.6)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-ghost:hover{text-decoration:none;border-color:var(--beam);color:var(--beam)}
.nav .btn{padding:11px 18px;min-height:44px;font-size:14px}
.burger{display:none}

@media (max-width:900px){
  .navlinks{display:none}
  .burger{
    display:flex;align-items:center;justify-content:center;width:48px;height:48px;
    background:transparent;border:1px solid var(--rule);border-radius:10px;color:var(--ink);
    margin-left:auto;
  }
  .nav .btn{display:none}
  .mobilemenu{border-top:1px solid var(--rule-soft);background:var(--ground-2)}
  .mobilemenu[hidden]{display:none}
  .mobilemenu .wrap{display:flex;flex-direction:column;padding-top:8px;padding-bottom:16px}
  .mobilemenu a{color:var(--ink);padding:14px 0;min-height:48px;display:flex;align-items:center;border-bottom:1px solid var(--rule-soft)}
  .mobilemenu .btn{margin-top:14px}
}
@media (min-width:901px){ .mobilemenu{display:none} }

/* ---------- Der Leuchtturm ---------- */
.beacon{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.beacon .glow{
  position:absolute;inset:0;
  background:
    radial-gradient(340px 260px at 88% 72%, rgba(24,216,252,.22), transparent 70%),
    radial-gradient(1100px 800px at 4% 112%, rgba(0,114,240,.28), transparent 72%);
}
/* ---------- Leuchtturm-Buehne (aus YourEssenz uebernommen) ----------
   Fuenf Ebenen: Nachtfeld, WebGL-Lichtkegel, Turm-SVG, Laternenpuls, Bodennebel.
   Die Kegel drehen sich in 18 s einmal; die Laterne glimmt bei 25 % und 75 %
   mit auf — dann zeigt je ein Kegel nach vorn. Fehlt WebGL, entfaellt nur der
   Strahl, die Buehne bleibt stehen. */
/* Turmgroesse und Lichtfeld sind entkoppelt: Der Turm bleibt klein genug,
   dass Laterne und Fels frei stehen; das Kegel-Canvas ist ein Vielfaches
   davon und auf die Laterne zentriert — so reichen die Strahlen weit
   ueber den Turm hinaus. */
.szene{
  /* Angehoben von -36px: unter dem Fels muss der Slogan Platz haben, ohne
     dass .beacon ihn abschneidet. Alle anderen Ebenen (Laterne, Nebel,
     Nachtfeld) sitzen relativ zu dieser Box — deshalb wird die Box bewegt
     und NICHT der Turm verkleinert, sonst wandert der Laternenpuls weg. */
  position:absolute;right:15%;bottom:44px;
  width:clamp(240px,30vw,380px);aspect-ratio:1/1;
  pointer-events:none;
}

/* Ebene 0 · Nachtfeld: gibt dem Turm einen Raum statt einer leeren Flaeche */
.nachtfeld{
  position:absolute;inset:-6%;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,
    rgba(17,32,66,.55) 0%, rgba(13,22,44,.30) 40%, rgba(13,22,44,.12) 58%, transparent 74%);
}
/* Ebene 1 · Der Lichtkegel als Volumen */
/* Das Lichtfeld spannt die GANZE Seitenbreite — der Strahl soll bis zum
   linken Rand laufen und dort langsam verloeschen. Es liegt hinter dem Turm
   und blendet nach oben aus, damit ueber dem Text keine Kante entsteht.
   Der Jitter gegen das Banding hinterlaesst feines Korn; ein halbes Pixel
   Weichzeichnung tilgt es, ohne dem Strahl Form zu nehmen. */
.kegel3d{
  position:absolute;left:0;right:0;bottom:0;
  width:100%;height:clamp(280px,46vh,460px);
  filter:blur(.6px);
  -webkit-mask-image:linear-gradient(to top, #000 62%, transparent 100%);
  mask-image:linear-gradient(to top, #000 62%, transparent 100%);
}
/* Ebene 2 · Der Turm — Fassung ohne fest eingebaute Kegel */
.turm{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Ebene 5 · Slogan unter dem Fels. Breiter als der Turm, wie im Master:
   die Zeile spannt dort von x 120 bis 878, der Fels nur von 230 bis 771. */
.slogan{
  position:absolute;left:50%;top:94%;
  /* max-width:none hebt die globale Bildregel auf — die Zeile SOLL breiter
     sein als die Buehne, sonst stimmt das Verhaeltnis zum Master nicht. */
  width:132%;max-width:none;height:auto;
  transform:translateX(-50%);
}
/* Ebene 3 · Laternen-Puls, im Takt der Umdrehung */
.laterne{
  position:absolute;left:50%;top:27.7%;width:24%;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,
    rgba(53,200,255,.30) 0%, rgba(53,200,255,.10) 42%, transparent 68%);
  filter:blur(7px);
  mix-blend-mode:screen;   /* addiert Licht, statt den Turm zu ueberdecken */
}
/* Ebene 4 · Bodennebel */
.nebel{position:absolute;left:8%;right:8%;bottom:6%;height:24%}
.nebel i{
  position:absolute;inset:0;border-radius:50%;filter:blur(10px);
  background:radial-gradient(ellipse at 50% 60%,
    rgba(140,170,220,.18) 0%, rgba(140,170,220,.07) 55%, transparent 78%);
}
.nebel i:nth-child(2){
  inset:12% -10% -8% 26%;
  background:radial-gradient(ellipse at 50% 60%, rgba(120,150,205,.14) 0%, transparent 74%);
}
@media (prefers-reduced-motion:no-preference){
  .laterne{animation:laterne-puls 48s ease-in-out infinite}
  .nebel i:nth-child(1){animation:nebel-driften 70s ease-in-out infinite alternate}
  .nebel i:nth-child(2){animation:nebel-driften 95s ease-in-out infinite alternate-reverse}
}
/* Laternen-Puls: langsam (48s), sehr dezente Peaks — eher Atmen als Blinken */
@keyframes laterne-puls{
  0%,100%{opacity:.40;transform:translate(-50%,-50%) scale(.98)}
  18%{opacity:.48;transform:translate(-50%,-50%) scale(1.00)}
  25%{opacity:.60;transform:translate(-50%,-50%) scale(1.03)}
  32%{opacity:.48;transform:translate(-50%,-50%) scale(1.00)}
  68%{opacity:.48;transform:translate(-50%,-50%) scale(1.00)}
  75%{opacity:.60;transform:translate(-50%,-50%) scale(1.03)}
  82%{opacity:.48;transform:translate(-50%,-50%) scale(1.00)}
}
@keyframes nebel-driften{ from{transform:translateX(-3.5%)} to{transform:translateX(3.5%)} }
@media (max-width:900px){
  .szene{opacity:.6;width:clamp(260px,62vw,380px);right:2%;bottom:-36px}
  /* Schmal wird die Buehne zur Kulisse — eine Zeile, die 132 % ihrer
     Breite misst, liefe aus dem Bild und waere bei 60 % Deckkraft
     ohnehin nicht mehr zu lesen. */
  .slogan{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.03fr .97fr;gap:clamp(28px,4vw,52px);align-items:center;padding-top:clamp(48px,7vw,84px);padding-bottom:clamp(60px,9vw,120px)}
.hero h1{font-size:clamp(2.25rem,5.4vw,4rem);letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--beam)}
.hero .lede{color:var(--ink-2);margin-top:22px;font-size:clamp(1rem,1.5vw,1.12rem);max-width:46ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.hero .facts{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-direction:column;gap:10px;font-size:15px;color:var(--ink-2);max-width:44ch;
}
.hero .facts li{display:flex;align-items:flex-start;gap:11px;line-height:1.45}
.hero .facts{list-style:none;padding:0}
.hero .facts li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--beam);
  flex:0 0 auto;margin-top:8px;
}

/* Mitschnitt-Karte */
.call{
  align-self:start;
  background:rgba(10,18,44,.78);border:1px solid rgba(24,216,252,.22);border-radius:16px;
  padding:22px;box-shadow:var(--shadow);
}
@supports (backdrop-filter:blur(14px)){ .call{backdrop-filter:blur(14px)} }
.call-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.call-head .live{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--beam);letter-spacing:.09em;font-weight:600}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--beam);animation:pulse 2.6s ease-in-out infinite;flex:0 0 auto}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
@media (prefers-reduced-motion:reduce){ .pulse{animation:none} }
.call-head-right{display:flex;align-items:center;gap:12px}
.call-head .clock{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.call .replay{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:transparent;border:1px solid var(--rule);
  padding:5px 10px;border-radius:999px;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(-1px);
  transition:opacity .35s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.call .replay svg{opacity:.9}
.call.played .replay{opacity:1;pointer-events:auto}
.call .replay:hover{color:var(--beam);border-color:rgba(24,216,252,.5);background:rgba(24,216,252,.07)}
.call .replay:focus-visible{color:var(--beam);border-color:var(--beam)}
.turn{display:grid;grid-template-columns:auto 1fr;gap:11px;margin-bottom:13px;align-items:start}
.who{font-size:10px;letter-spacing:.1em;padding:4px 7px;border-radius:4px;margin-top:2px;white-space:nowrap;font-weight:600}
.who.k{background:rgba(0,114,240,.24);color:#8FC0FF}
.who.a{background:rgba(24,216,252,.16);color:var(--beam)}
.said{font-size:14.5px;line-height:1.5;color:#D3E1F5}

/* Sprecherwechsel-Spur: wer wann spricht */
.turns{position:relative;margin:18px 0 12px}
.lane{position:relative;height:13px;border-radius:3px;margin-bottom:5px;background:rgba(223,235,250,.06)}
.lane:last-of-type{margin-bottom:0}
.seg{
  position:absolute;top:0;bottom:0;border-radius:3px;
  opacity:.22;filter:saturate(.3) brightness(.75);
  transition:opacity .5s ease, filter .5s ease;
}
.seg.k{background:linear-gradient(90deg,rgba(0,114,240,.95),rgba(0,114,240,.6))}
.seg.a{background:linear-gradient(90deg,rgba(24,216,252,.95),rgba(24,216,252,.55))}
.call.playing .seg,
.call.played  .seg{opacity:1;filter:none}
.call.playing .seg{
  opacity:.22;filter:saturate(.3) brightness(.75);
  animation:seg-fill var(--dur,.6s) ease-out forwards;
  animation-delay:var(--delay,0s);
  box-shadow:0 0 0 0 rgba(24,216,252,0);
}
@keyframes seg-fill{
  0%  {opacity:.22;filter:saturate(.3) brightness(.75);box-shadow:0 0 0 0 rgba(24,216,252,0)}
  60% {opacity:1;  filter:saturate(1.1) brightness(1.15);box-shadow:0 0 14px 0 rgba(24,216,252,.45)}
  100%{opacity:1;  filter:none;                           box-shadow:0 0 0 0 rgba(24,216,252,0)}
}

.playhead{
  position:absolute;top:-4px;bottom:-4px;width:1.5px;
  background:var(--ink);opacity:0;left:1.5%;
  transition:opacity .3s ease;
}
.playhead::after{
  content:"";position:absolute;top:-3px;left:-2.75px;
  width:7px;height:7px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 10px rgba(223,235,250,.55);
}
.call.playing .playhead{
  opacity:.9;
  animation:playhead 5s linear forwards;
}
.call.played .playhead{opacity:0;animation:none;left:1.5%}
@keyframes playhead{0%{left:1.5%}100%{left:97%}}
@media (prefers-reduced-motion:reduce){
  .call .playhead{animation:none;opacity:0}
  .call .seg{opacity:1;filter:none;animation:none}
}
.lanekeys{display:flex;gap:16px;margin-top:9px;font-size:10px;letter-spacing:.09em;color:var(--ink-3);font-weight:600}
.lanekeys span{display:flex;align-items:center;gap:6px}
.lanekeys i{width:9px;height:9px;border-radius:2px;display:block}
.outcome{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;margin-top:14px;
  background:rgba(24,216,252,.09);border:1px solid rgba(24,216,252,.22);font-size:13.5px;color:#CFE9F5;line-height:1.45;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.outcome svg{flex:0 0 auto;margin-top:2px}
.outcome .check{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;flex:0 0 auto;margin-top:-2px;
  background:rgba(24,216,252,.15);color:#8DD9E8;
  transition:background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.call.playing .outcome,
.call.played  .outcome{
  background:rgba(24,216,252,.14);border-color:rgba(24,216,252,.45);
  box-shadow:0 0 0 1px rgba(24,216,252,.15), 0 10px 32px -16px rgba(24,216,252,.5);
}
.call.playing .outcome .check{
  animation:check-pop .55s cubic-bezier(.2,1.4,.4,1) 4.7s both;
}
.call.played .outcome .check{
  background:var(--beam);color:var(--on-beam);
}
@keyframes check-pop{
  0%  {transform:scale(.6);background:rgba(24,216,252,.15);color:#8DD9E8;box-shadow:0 0 0 0 rgba(24,216,252,0)}
  55% {transform:scale(1.25);background:var(--beam);color:var(--on-beam);box-shadow:0 0 0 10px rgba(24,216,252,.18)}
  100%{transform:scale(1);  background:var(--beam);color:var(--on-beam);box-shadow:0 0 0 0 rgba(24,216,252,0)}
}
@media (prefers-reduced-motion:reduce){
  .call .outcome .check{animation:none;background:var(--beam);color:var(--on-beam)}
}

/* ---------- Abschnitte ---------- */
.section{padding:clamp(60px,8vw,104px) 0;border-top:1px solid var(--rule-soft);position:relative}
.section > .wrap{position:relative;z-index:1}
.section h2{font-size:clamp(1.75rem,3.8vw,2.85rem)}
.section .intro{color:var(--ink-2);margin-top:18px;max-width:62ch;font-size:clamp(1rem,1.4vw,1.08rem)}
.section.tint{background:linear-gradient(180deg, var(--ground-2), var(--ground) 72%)}

/* Leistungen: bewusst KEIN gleichfoermiges Kartenraster */
.does{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 34px;margin-top:38px;border-top:1px solid var(--rule)}
.do{padding:24px 26px 26px 0;border-bottom:1px solid var(--rule-soft)}
.do h3{font-size:1.08rem;font-weight:600;letter-spacing:-.02em;display:grid;grid-template-columns:19px 1fr;gap:12px;align-items:start;line-height:1.3}
.do h3 svg{color:var(--beam);margin-top:3px}
.do p{color:var(--ink-2);font-size:15px;margin-top:9px;line-height:1.55;padding-left:31px}

/* Vergleich */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,52px);margin-top:44px;align-items:start}
.vcol h3{font-size:1.05rem;font-weight:600;margin-bottom:16px;letter-spacing:-.015em}
.vcol.now h3{color:var(--ink-3)}
.vcol.new h3{color:var(--beam)}
.vlist{list-style:none;margin:0;padding:0;font-size:15px}
.vlist li{display:flex;gap:11px;padding:11px 0;border-top:1px solid var(--rule-soft);line-height:1.45;align-items:flex-start}
.vlist li:first-child{border-top:1px solid var(--rule)}
.vcol.now .vlist li{color:var(--ink-3)}
.vlist svg{flex:0 0 auto;margin-top:3px}
.vs{
  align-self:center;font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);
  writing-mode:vertical-rl;padding:14px 0;font-weight:600;
}
@media (max-width:760px){
  .versus{grid-template-columns:1fr;gap:30px}
  .vs{writing-mode:horizontal-tb;padding:0;text-align:center}
}

/* Einwaende */
.doubts{margin-top:40px;border-top:1px solid var(--rule)}
.doubt{
  padding:26px 0;border-bottom:1px solid var(--rule-soft);
  display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(20px,4vw,48px);align-items:start;
}
@media (max-width:820px){ .doubt{grid-template-columns:1fr;gap:12px} }
.doubt h3{font-size:1.13rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.35}
.doubt p{color:var(--ink-2);font-size:15.5px;max-width:66ch;line-height:1.6}
.doubt p + p{margin-top:12px}

/* Preise */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.6vw,28px);margin-top:40px}
.price{background:var(--ground-3);border:1px solid var(--rule);border-radius:16px;padding:28px}
.price.key{border-color:rgba(24,216,252,.4)}
.price .label{font-size:11.5px;letter-spacing:.12em;color:var(--ink-3);font-weight:600}
.price .amount{
  font-size:clamp(2.3rem,5vw,3.2rem);font-weight:800;letter-spacing:-.045em;
  margin-top:10px;line-height:1;font-variant-numeric:tabular-nums;
}
.price .amount small{font-size:.42em;font-weight:600;letter-spacing:-.01em;color:var(--ink-3);margin-left:6px}
.price .note{color:var(--ink-2);font-size:15px;margin-top:14px;line-height:1.55}
.price ul{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--rule-soft);font-size:14.5px;color:var(--ink-2)}
.price li{display:flex;gap:10px;padding:7px 0;align-items:flex-start;line-height:1.45}
.price li svg{color:var(--beam);flex:0 0 auto;margin-top:3px}
.price .fn{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-soft);font-size:13px;line-height:1.55;color:var(--ink-3)}
.pricefoot{color:var(--ink-3);font-size:14.5px;margin-top:24px;max-width:66ch;line-height:1.55}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;margin-top:44px;border-top:1px solid var(--rule)}
.step{padding:22px 22px 24px 0;border-bottom:1px solid var(--rule-soft)}
.step b{display:block;font-size:12px;letter-spacing:.1em;color:var(--beam);font-weight:600;margin-bottom:9px}
.step h3{font-size:1.05rem;font-weight:600;letter-spacing:-.015em}
.step p{color:var(--ink-2);font-size:14.5px;margin-top:8px;line-height:1.5}

/* Person */
.person{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,44px);margin-top:40px;align-items:start}
/* Freigestellt: kein Rahmen, kein heller Kasten. Der Verlauf dahinter
   faengt die dunkle Kleidung auf, damit die Schultern nicht ins Nichts laufen. */
.person img{
  width:clamp(170px,21vw,230px);height:auto;
  background:radial-gradient(78% 62% at 50% 34%, rgba(0,114,240,.26), rgba(24,216,252,.07) 55%, transparent 74%);
  /* Schultern laufen nach unten aus, statt an der Fotokante abzubrechen */
  -webkit-mask-image:linear-gradient(to bottom, #000 74%, transparent 99%);
  mask-image:linear-gradient(to bottom, #000 74%, transparent 99%);
}
.person p{color:var(--ink-2);font-size:16px;line-height:1.65;max-width:62ch}
.person p + p{margin-top:14px}
.person strong{color:var(--ink);font-weight:600}
@media (max-width:700px){ .person{grid-template-columns:1fr} }

/* Kontakt */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(26px,4vw,48px);margin-top:40px;align-items:start}
@media (max-width:820px){ .contact{grid-template-columns:1fr} }
.channels{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:2px}
.channel{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--rule-soft);align-items:center}
.channel:first-child{border-top:1px solid var(--rule)}
.channel svg{color:var(--beam)}
.channel b{display:block;font-size:12px;letter-spacing:.09em;color:var(--ink-3);font-weight:600}
.channel span{font-size:15.5px;color:var(--ink)}
.badges{display:flex;flex-wrap:wrap;gap:9px}
.badge{font-size:13px;color:var(--ink-2);border:1px solid var(--rule);border-radius:100px;padding:7px 14px}

form{background:var(--ground-3);border:1px solid var(--rule);border-radius:16px;padding:clamp(20px,3vw,30px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:7px;font-weight:500}
.field .opt{color:var(--ink-3);font-weight:400}
input,textarea{
  width:100%;background:rgba(7,13,32,.6);border:1px solid var(--rule);border-radius:10px;
  padding:13px 14px;color:var(--ink);font:inherit;font-size:15.5px;min-height:48px;
}
input::placeholder,textarea::placeholder{color:#6E80A6}
input:focus,textarea:focus{outline:none;border-color:var(--beam);box-shadow:0 0 0 3px rgba(24,216,252,.16)}
textarea{min-height:120px;resize:vertical;line-height:1.55}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){ .row{grid-template-columns:1fr} }
.consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;cursor:pointer;min-height:44px}
.consent input{width:20px;height:20px;min-height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--beam)}
.consent span{font-size:13.5px;color:var(--ink-2);line-height:1.5}
.err{color:var(--no);font-size:13px;margin-top:6px;display:none}
.field.bad input,.field.bad textarea{border-color:var(--no)}
.field.bad .err{display:block}
.formnote{color:var(--ink-3);font-size:13.5px;margin-top:14px;line-height:1.5}
.status{margin-top:14px;font-size:14.5px;color:var(--beam)}

/* Fusszeile */
footer{border-top:1px solid var(--rule);padding:clamp(40px,5vw,60px) 0 40px;background:var(--ground-2)}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(24px,4vw,40px)}
@media (max-width:760px){ .footgrid{grid-template-columns:1fr;gap:28px} }
footer img{height:64px;width:auto}
.tagline{
  margin-top:14px;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--beam);font-weight:600;
}
.claim{color:var(--ink-2);font-size:15px;margin-top:18px;max-width:44ch;line-height:1.6}
footer h4{font-size:12px;letter-spacing:.11em;color:var(--ink-3);font-weight:600;margin-bottom:14px}
footer nav{display:flex;flex-direction:column;gap:2px}
footer nav a{color:var(--ink-2);font-size:14.5px;padding:9px 0;min-height:44px;display:flex;align-items:center}
footer nav a:hover{color:var(--beam);text-decoration:none}
.legal{margin-top:38px;padding-top:22px;border-top:1px solid var(--rule-soft);color:var(--ink-3);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 20px}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  /* Erst die Aussage, dann der Beweis — sonst weiss der Leser nicht, was er hoert. */
}

/* ============================================================
   UNTERSEITEN (apps.html u. a.) — Stand 2026-08-25
   Additiv: keine Regel der Startseite wird hier veraendert.
   Die Unterseiten haben keinen Leuchtturm — der Turm gehoert
   dem Flaggschiff. Stattdessen ein ruhiger Textkopf.
   ============================================================ */
.pagehead .wrap{padding-top:clamp(44px,6vw,76px);padding-bottom:clamp(30px,4vw,48px)}
.pagehead .kicker{
  font-size:12px;letter-spacing:.12em;font-weight:600;color:var(--beam);
  text-transform:uppercase;margin-bottom:14px;display:block;
}
.pagehead h1{font-size:clamp(2rem,4.4vw,3.15rem);letter-spacing:-.04em;max-width:19ch}
.pagehead .lede{color:var(--ink-2);margin-top:20px;font-size:clamp(1rem,1.4vw,1.1rem);max-width:58ch}
.pagehead .lede + .lede{margin-top:14px}
.pagehead .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
/* Fliesstext-Absaetze in Unterseiten-Abschnitten. Die Startseite kennt
   nur .intro; hier stehen laengere Gedanken, die eine Zeilenlaenge und
   einen Abstand brauchen, sonst laufen sie als Block ueber die Seite. */
.section p.text{color:var(--ink-2);max-width:64ch;margin-top:16px;font-size:16px;line-height:1.68}

/* ============================================================
   VIDEO-BEISPIELE (Film & Messe, 27.08.2026)
   Zwei Beispiele untereinander: erst der Weg, dann das Ergebnis.
   Eigenes Muster statt Inline-Styles, damit beide gleich sitzen
   und ein drittes Beispiel spaeter nichts kostet.
   ============================================================ */
.vex{margin-top:34px}
.vex + .vex{margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule-soft)}
.vex h3{font-size:clamp(1.15rem,2.1vw,1.45rem);font-weight:600;letter-spacing:-.022em;color:var(--ink);line-height:1.25;max-width:26ch}
.vex p.text{margin-top:12px}
.vex video{
  width:100%;height:auto;display:block;margin-top:22px;
  border-radius:16px;background:#000;
  box-shadow:0 18px 44px -22px rgba(3,7,18,.9);
}
.vex .vex-note{color:var(--ink-3);max-width:64ch;margin-top:14px;font-size:14px;line-height:1.6}

/* ============================================================
   LERNMODULE (Lerninhalte, 27.08.2026)
   Eine Liste, keine Kachelwand: jedes Modul ist ein Absatz mit
   Kopf, Eckdaten und einem Knopf, der es wirklich oeffnet.
   ============================================================ */
.lmlist{margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule-soft)}
.lm + .lm{margin-top:clamp(34px,4vw,52px);padding-top:clamp(30px,3.5vw,44px);border-top:1px solid var(--rule-soft)}
.lm h3{font-size:clamp(1.15rem,2.1vw,1.45rem);font-weight:600;letter-spacing:-.022em;color:var(--ink);line-height:1.25}
.lm .lm-meta{margin-top:9px;font-size:13.5px;letter-spacing:.03em;color:var(--beam)}
.lm .lm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.lm .lm-hint{color:var(--ink-3);font-size:13px}
.lm .lm-frei{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:12px;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;color:#7BF0C4;
  border:1px solid rgba(79,224,172,.34);border-radius:100px;padding:7px 15px;
  background:rgba(79,224,172,.08);
}
.lm .lm-frei .dot{width:7px;height:7px;border-radius:50%;background:#4FE0AC;flex:none}
.lm .lm-shot{
  display:block;width:100%;height:auto;margin-bottom:22px;
  border-radius:14px;border:1px solid var(--rule-soft);
  box-shadow:0 18px 44px -24px rgba(3,7,18,.9);
}

/* Zwischenueberschrift in einem Fliesstext-Abschnitt (Lerninhalte, 27.08.2026) */
.section h3.sub{margin-top:clamp(34px,4vw,52px);font-size:clamp(1.1rem,2vw,1.35rem);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.3}
.section h3.sub + p.text{margin-top:12px}

/* „Ueber mich" ist kein Angebot, sondern die Person dahinter. Deshalb steht der
   Reiter rechts abgesetzt: die fuenf Angebotsfelder bleiben als Gruppe lesbar.
   Auf schmalen Schirmen scrollt die Leiste ohnehin — dort faellt der Abstand weg. */
.tab.tab-person{margin-left:auto;color:var(--ink-2)}
@media (max-width:760px){ .tab.tab-person{margin-left:14px} }

/* ============================================================
   ANRUF-ORB — Live-Gespraech mit dem Assistenten (25.08.2026)
   Laeuft ueber Vapi (Public Key, kein Backend), Stimme Cartesia
   Sonic 3 „Marlene". Das SDK wird ERST BEIM KLICK geladen —
   vorher geht keine Anfrage an einen fremden Server hinaus.
   ============================================================ */
.live-call{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
/* 26.08.2026: Der Orb steht OBEN in der Karte — erst das Angebot zu sprechen,
   darunter das Beispiel zur Veranschaulichung (Michas Reihenfolge). */
.live-call .zeile{display:flex;align-items:center;gap:19px}
.orb{
  /* 26.08.2026: von 64 auf 104 px — der Orb ist der Knopf, nicht die Beschriftung
     daneben (Michas Befund: „etwas viel selbst ausprobieren, dann lieber groesser"). */
  width:104px;height:104px;flex:0 0 auto;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:radial-gradient(circle at 34% 30%, #2AE6FF, var(--sea) 62%, #01337A);
  box-shadow:0 0 0 0 rgba(24,216,252,.45);transition:transform .18s ease;
  display:grid;place-items:center;color:#fff;
}
.orb:hover{transform:scale(1.05)}
.orb:active{transform:scale(.96)}
.orb svg{pointer-events:none}
.live-call[data-state="listening"] .orb{animation:orbpuls 1.7s ease-in-out infinite}
.live-call[data-state="speaking"]  .orb{animation:orbpuls .9s ease-in-out infinite}
.live-call[data-state="connecting"] .orb{opacity:.55}
@keyframes orbpuls{0%,100%{box-shadow:0 0 0 0 rgba(24,216,252,.45)}50%{box-shadow:0 0 0 24px rgba(24,216,252,0)}}
/* Im Ruhezustand atmet er langsam — sonst sieht man nicht, dass er ein Knopf ist. */
.live-call[data-state="idle"] .orb{animation:orbatem 3.6s ease-in-out infinite}
@keyframes orbatem{0%,100%{box-shadow:0 0 0 0 rgba(24,216,252,.30)}50%{box-shadow:0 0 0 13px rgba(24,216,252,0)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none !important}}
.live-call .text b{display:block;font-size:17px;letter-spacing:-.02em}
.live-call .text span{display:block;color:var(--ink-3);font-size:13px;line-height:1.45;margin-top:5px}
.live-call .mit{margin-top:14px;max-height:132px;overflow-y:auto}
.live-call .mit p{margin:0 0 7px;font-size:13.5px;line-height:1.5}
.live-call .mit .u{color:var(--ink-2)}
.live-call .mit .a{color:var(--beam)}
.live-call .fehler{color:#FF9A8B;font-size:13px;margin-top:9px}
/* Sprungziel Orb: die Kopfzeile klebt oben, deshalb Platz lassen —
   sonst schiebt sich der Orb beim Ankersprung unter die Leiste. */
#anhoeren{scroll-margin-top:120px}

/* ============================================================
   SPEICHERHINWEIS — 26.08.2026
   Die Seite speichert NICHTS ueber den Besucher: kein Tracking,
   keine Cookies, keine Reichweitenmessung. Gemerkt wird nur, dass
   dieser Hinweis gelesen wurde — sonst kaeme er bei jedem Aufruf
   wieder. Genau das steht auch drin; ein Hinweis, der etwas
   anderes behauptet als er tut, waere schlimmer als keiner.
   ============================================================ */
.hinweis{
  position:fixed;left:50%;transform:translateX(-50%);bottom:clamp(14px,2.5vw,26px);z-index:800;
  width:min(680px,calc(100vw - 28px));
  display:flex;align-items:flex-start;gap:16px;
  background:rgba(10,18,44,.94);backdrop-filter:blur(14px);
  border:1px solid var(--rule);border-radius:16px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
  padding:16px 18px;
}
.hinweis[hidden]{display:none}
.hinweis .zeichen{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:rgba(24,216,252,.10);color:var(--beam);
}
.hinweis .text{flex:1;min-width:0}
.hinweis .text b{display:block;font-size:15px;letter-spacing:-.01em}
.hinweis .text p{margin:5px 0 0;color:var(--ink-3);font-size:13.5px;line-height:1.5}
.hinweis .knoepfe{display:flex;gap:9px;align-items:center;flex:0 0 auto;align-self:center}
.hinweis .btn{padding:9px 16px;font-size:14px;min-height:0}
@media (max-width:660px){
  .hinweis{flex-wrap:wrap;gap:12px}
  .hinweis .knoepfe{width:100%;justify-content:flex-end}
}

/* ───── Test-CTA im Kontaktabschnitt ───── */
.test-cta{
  position:relative;
  margin:1.6rem 0 2.2rem;
  padding:1.5rem 1.8rem 1.7rem;
  background:linear-gradient(180deg, var(--ground-3) 0%, var(--ground-2) 100%);
  border:1px solid var(--rule);
  border-radius:18px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 0 0 1px rgba(24,216,252,.08), 0 18px 48px -24px rgba(24,216,252,.35);
}
.test-cta::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(135deg, var(--beam) 0%, var(--sea) 60%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  z-index:-1;
  opacity:.7;
  pointer-events:none;
}
.test-cta-head{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--beam);
  margin-bottom:.65rem;
}
.test-cta .conn-dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--beam);
  box-shadow:0 0 0 4px rgba(24,216,252,.18);
  animation:pulse-beam 1.8s ease-in-out infinite;
  flex:none;
}
@keyframes pulse-beam{
  0%,100%{box-shadow:0 0 0 4px rgba(24,216,252,.18)}
  50%    {box-shadow:0 0 0 8px rgba(24,216,252,0)}
}
@media (prefers-reduced-motion:reduce){
  .test-cta .conn-dot{animation:none}
}
.test-cta-kicker{
  margin:0 0 .5rem;
  font-weight:700;
  font-size:1.08rem;
  color:var(--ink);
  letter-spacing:-.01em;
}
.test-cta-number{
  display:inline-block;
  margin:.1rem 0 .95rem;
  font-size:clamp(2rem, 4.6vw, 2.75rem);
  font-weight:800;
  letter-spacing:.005em;
  line-height:1.08;
  color:var(--beam);
  text-decoration:none;
  background:linear-gradient(135deg, var(--beam) 0%, #6FE4FF 55%, var(--sea) 100%);
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(24,216,252,.25));
  transition:filter .2s ease;
}
.test-cta-number:hover,
.test-cta-number:focus-visible{
  filter:drop-shadow(0 0 22px rgba(24,216,252,.45)) brightness(1.1);
  text-decoration:none;
}
.test-cta-text{
  margin:0;
  max-width:62ch;
  color:var(--ink-2);
  line-height:1.6;
}
@media (max-width:640px){
  .test-cta{padding:1.3rem 1.2rem 1.4rem}
  .test-cta-number{font-size:2.05rem}
}

/* ───── Postfach-Beispiel (ersetzt die alte Call-Timeline) ───── */
.inbox{
  align-self:start;
  background:rgba(10,18,44,.78);
  border:1px solid rgba(24,216,252,.22);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
@supports (backdrop-filter:blur(14px)){ .inbox{backdrop-filter:blur(14px)} }

/* Markenverlauf-Ring, unaufdringlich */
.inbox::before{
  content:"";
  position:absolute;inset:0;
  padding:1px;
  border-radius:inherit;
  background:linear-gradient(140deg, rgba(24,216,252,.45) 0%, rgba(0,114,240,.35) 55%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  z-index:-1;pointer-events:none;
}

.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.inbox-title{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-2);letter-spacing:.01em}
.inbox-title svg{color:var(--beam);flex:0 0 auto}
.inbox-title strong{color:var(--ink);font-weight:700}
.inbox-head-right{display:flex;align-items:center;gap:12px}
.inbox-count{
  display:inline-flex;align-items:baseline;gap:5px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.inbox-count em{
  font-style:normal;font-weight:700;font-size:14px;color:var(--beam);
  font-variant-numeric:tabular-nums;min-width:12px;display:inline-block;text-align:right;
}
.inbox .replay{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:transparent;border:1px solid var(--rule);
  padding:5px 10px;border-radius:999px;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(-1px);
  transition:opacity .35s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.inbox.played .replay{opacity:1;pointer-events:auto}
.inbox .replay:hover{color:var(--beam);border-color:rgba(24,216,252,.5);background:rgba(24,216,252,.07)}
.inbox .replay:focus-visible{color:var(--beam);border-color:var(--beam)}

/* Mail-Liste */
.inbox-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.mail{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:14px;
  padding:12px 4px 12px 10px;
  border-top:1px solid var(--rule-soft);
  position:relative;
  opacity:0;
  transform:translateY(8px);
}
.mail:first-child{border-top:0;padding-top:6px}

/* Dezenter Marker links (ungelesen) */
.mail::before{
  content:"";
  position:absolute;
  left:-2px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--beam);
  box-shadow:0 0 10px rgba(24,216,252,.6);
  opacity:0;
  transition:opacity .3s ease;
}
.inbox.played .mail::before{opacity:.75}

.mail-time{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px;letter-spacing:.01em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  padding-top:3px;white-space:nowrap;
}
.mail-body{min-width:0}
.mail-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.mail-top strong{font-weight:700;color:var(--ink);font-size:14.5px;letter-spacing:-.01em}
.mail-body p{margin:0;font-size:13.5px;line-height:1.5;color:#C8D5EA}

/* Status-Chips */
.tag{
  display:inline-block;font-size:10.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;
}
.tag.rueckruf  {background:rgba(255,154,139,.14);color:#FFC2B5;border-color:rgba(255,154,139,.3)}
.tag.termin    {background:rgba(74,222,128,.14);color:#9DEFB7;border-color:rgba(74,222,128,.3)}
.tag.neu       {background:rgba(24,216,252,.14);color:var(--beam);border-color:rgba(24,216,252,.35)}
.tag.angenommen{background:rgba(0,114,240,.2); color:#A9CDFF;border-color:rgba(0,114,240,.4)}
.tag.info      {background:rgba(223,235,250,.07);color:var(--ink-3);border-color:rgba(223,235,250,.14)}

/* Fuss: der Vorteil in einem Satz */
.inbox-foot{
  margin:16px 0 0;
  display:flex;align-items:center;gap:9px;
  padding:11px 14px;border-radius:10px;
  background:rgba(24,216,252,.08);border:1px solid rgba(24,216,252,.2);
  font-size:13px;color:#CFE9F5;line-height:1.45;
}
.inbox-foot svg{color:var(--beam);flex:0 0 auto}
.inbox-foot strong{color:var(--ink);font-weight:700}

/* Animation: beim ersten Sichtbarwerden tropfen die Mails ein */
.inbox.playing .mail{
  animation:mail-drop .55s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:calc(150ms + var(--i) * 180ms);
}
.inbox.played .mail{opacity:1;transform:none}

@keyframes mail-drop{
  0%  {opacity:0;transform:translateY(10px)}
  60% {opacity:1;transform:translateY(-1px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Fuss blendet nach allen Mails ein */
.inbox-foot{opacity:0;transform:translateY(6px);transition:opacity .5s ease, transform .5s ease}
.inbox.playing .inbox-foot,
.inbox.played  .inbox-foot{opacity:1;transform:none;transition-delay:1.4s}

@media (prefers-reduced-motion:reduce){
  .mail{opacity:1;transform:none;animation:none}
  .inbox.played .mail::before{opacity:.75}
  .inbox-foot{opacity:1;transform:none}
}

@media (max-width:640px){
  .inbox{padding:18px}
  .inbox-title span{font-size:12px}
  .mail{grid-template-columns:46px 1fr;gap:10px;padding:11px 2px}
  .mail-time{font-size:11.5px}
}

/* ───── Sichtbarkeits-Scoreboard (Vorher/Nachher) ───── */
.scoreboard{
  margin:28px 0 0;padding:22px;
  background:linear-gradient(180deg, var(--ground-3) 0%, var(--ground-2) 100%);
  border:1px solid rgba(24,216,252,.22);border-radius:16px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate;
}
.scoreboard::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:linear-gradient(140deg, rgba(24,216,252,.45) 0%, rgba(0,114,240,.35) 55%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  z-index:-1;pointer-events:none;
}

.scoreboard-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.scoreboard-title{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2);letter-spacing:.01em}
.scoreboard-title svg{color:var(--beam);flex:0 0 auto}
.scoreboard-title strong{color:var(--ink);font-weight:700}
.scoreboard-head-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Pill-Switch Vorher/Nachher */
.switch{display:inline-flex;background:rgba(223,235,250,.05);border:1px solid var(--rule);border-radius:999px;padding:3px;gap:2px}
.switch-tab{
  font-family:inherit;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:transparent;border:0;cursor:pointer;
  padding:6px 14px;border-radius:999px;
  transition:background .25s ease, color .25s ease;
}
.switch-tab:hover{color:var(--ink)}
.switch-tab[aria-selected="true"]{background:var(--beam);color:var(--on-beam)}
.switch-tab:focus-visible{outline:2px solid var(--beam);outline-offset:2px}

.scoreboard .replay{
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);background:transparent;border:1px solid var(--rule);
  padding:5px 10px;border-radius:999px;cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.scoreboard .replay:hover{color:var(--beam);border-color:rgba(24,216,252,.5);background:rgba(24,216,252,.07)}

/* Hauptblock: links Score, rechts Dimensionen */
.scoreboard-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:28px;align-items:start}
@media (max-width:720px){
  .scoreboard-main{grid-template-columns:1fr;gap:20px}
}

.score-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.score-num{display:flex;align-items:baseline;gap:4px;line-height:1}
.score-value{
  font-size:clamp(3.4rem, 7vw, 4.6rem);font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(135deg, var(--beam) 0%, #6FE4FF 55%, var(--sea) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 20px rgba(24,216,252,.22));
  font-variant-numeric:tabular-nums;
  transition:filter .3s ease, background .4s ease;
}
/* Vorher-Zustand: Warnfarbe fuer Zahl und Fuellbalken */
.scoreboard[data-state="vor"] .score-value{
  background:linear-gradient(135deg, #F5B042 0%, #FFC770 55%, #FF8A42 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(245,176,66,.28));
}
.scoreboard[data-state="vor"] .score-fill{
  background:linear-gradient(90deg, #F5B042 0%, #FF9A42 100%);
  box-shadow:0 0 14px rgba(245,176,66,.4);
}
.score-of{font-size:1.2rem;color:var(--ink-3);font-weight:600}

.score-bar{position:relative;height:10px;background:rgba(223,235,250,.07);border-radius:999px;overflow:visible}
.score-fill{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--beam) 0%, var(--sea) 100%);
  box-shadow:0 0 16px rgba(24,216,252,.4);
  transition:width 1.1s cubic-bezier(.2,.9,.3,1);
}
.score-threshold{
  position:absolute;top:-6px;bottom:-6px;width:1.5px;background:var(--ink);opacity:.55;
  transform:translateX(-50%);
}
.score-threshold em{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  font-style:normal;font-size:10px;color:var(--ink-3);letter-spacing:.03em;
}

.score-status{
  display:flex;align-items:center;gap:9px;margin:4px 0 0;
  font-size:13px;line-height:1.45;color:var(--ink-2);
}
.status-icon{
  width:16px;height:16px;border-radius:50%;flex:0 0 auto;position:relative;
  transition:background .3s ease;
}
.status-icon.warn{background:rgba(245,176,66,.2);box-shadow:0 0 0 1px rgba(245,176,66,.5)}
.status-icon.warn::before{
  content:"!";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#F5B042;line-height:1;
}
.status-icon.ok{background:var(--beam)}
.status-icon.ok::before{
  content:"";position:absolute;left:4px;top:7px;width:3px;height:5px;
  border-right:2px solid var(--on-beam);border-bottom:2px solid var(--on-beam);
  transform:rotate(45deg);
}

/* Dimensionen rechts */
.score-dims{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.dim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:12px;align-items:center}
.dim-label{font-size:13px;color:var(--ink);line-height:1.3}
.dim-label em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:1px;letter-spacing:.02em}
.dim-bar{position:relative;height:8px;background:rgba(223,235,250,.07);border-radius:999px;overflow:hidden}
.dim-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--beam) 0%, var(--sea) 100%);
  box-shadow:0 0 10px rgba(24,216,252,.35);
  width:calc(var(--anteil, 0) * 1%);
  transition:width .9s cubic-bezier(.2,.9,.3,1), background .4s ease, box-shadow .4s ease;
}
.scoreboard[data-state="nach"] .dim .dim-bar i{
  background:linear-gradient(90deg, var(--beam) 0%, var(--sea) 100%);
}
/* Warn-Farbe nur im Vorher-Zustand und nur wenn Wert niedrig */
.scoreboard[data-state="vor"] .dim[data-vor="30"] .dim-bar i{
  background:linear-gradient(90deg, #FF7B59 0%, #F5B042 100%);
  box-shadow:0 0 10px rgba(245,124,89,.35);
}
.scoreboard[data-state="vor"] .dim[data-vor="70"] .dim-bar i{
  background:linear-gradient(90deg, #F5B042 0%, var(--beam) 100%);
}

.dim-value{
  font-size:12px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;min-width:30px;text-align:right;
}

.scoreboard-foot{
  margin:18px 0 0;padding:12px 14px;border-radius:10px;
  background:rgba(24,216,252,.08);border:1px solid rgba(24,216,252,.2);
  font-size:13px;color:#CFE9F5;line-height:1.5;
}
.scoreboard-foot strong{color:var(--ink);font-weight:700}

@media (prefers-reduced-motion:reduce){
  .score-fill, .dim-bar i, .score-value{transition:none}
}
@media (max-width:640px){
  .scoreboard{padding:18px}
  .dim{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;gap:10px}
  .dim-label{font-size:12.5px}
  .dim-label em{font-size:10px}
}

/* Hinweis unter dem Scoreboard: kleiner, dezenter, zur Einordnung */
.scoreboard-note{
  margin:10px 2px 0;
  font-size:12.5px;color:var(--ink-3);line-height:1.5;
  padding-left:14px;border-left:2px solid rgba(24,216,252,.25);
}
.scoreboard-note strong{color:var(--ink-2);font-weight:700}

/* ───── Auszug aus dem Übergabe-Papier (unter dem Scoreboard) ───── */
.auszug{
  margin:22px 0 0;padding:20px;
  background:rgba(10,18,44,.5);
  border:1px solid var(--rule);border-radius:14px;
}
.auszug-head{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  padding-bottom:12px;border-bottom:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--ink-2);
}
.auszug-head svg{color:var(--beam);flex:0 0 auto}
.auszug-head strong{color:var(--ink);font-weight:700}

.auszug-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.aend{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr);
  gap:16px;align-items:start;
  padding:14px 2px;
  border-top:1px solid var(--rule-soft);
}
.aend:first-child{border-top:0;padding-top:4px}
.aend-was strong{display:block;color:var(--ink);font-weight:700;font-size:14px;letter-spacing:-.01em}
.aend-was em{display:block;font-style:normal;color:var(--ink-3);font-size:11.5px;line-height:1.4;margin-top:3px}

.aend-wert{
  display:flex;flex-direction:column;gap:5px;
  font-size:13px;line-height:1.4;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;
}
.aend-vor{color:#F5B042}
.aend-nach{color:var(--beam)}
.aend-pill{
  display:inline-flex;align-items:center;
  font-family:"Inter",-apple-system,sans-serif;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;align-self:flex-start;
  border:1px solid currentColor;
  opacity:.75;
}
.aend-pill.vor {color:#F5B042}
.aend-pill.nach{color:var(--beam)}

.auszug-foot{
  margin:14px 0 0;padding:11px 14px;border-radius:10px;
  background:rgba(223,235,250,.04);
  font-size:12.5px;color:var(--ink-2);line-height:1.5;
}
.auszug-foot strong{color:var(--ink);font-weight:700}

@media (max-width:720px){
  .aend{grid-template-columns:1fr;gap:8px;padding:14px 2px}
  .aend-wert{flex-direction:row;align-items:baseline;gap:10px}
  .aend-pill{align-self:center}
}

/* ───── Werkzeuge-Seite ───── */

/* Tool-Card: Vorschaubild links, Beschreibung rechts */
.tool-card{
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);gap:36px;align-items:start;
  background:linear-gradient(180deg, var(--ground-3) 0%, var(--ground-2) 100%);
  border:1px solid var(--rule);border-radius:18px;padding:28px;
  box-shadow:var(--shadow);position:relative;overflow:hidden;isolation:isolate;
}
.tool-card::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:linear-gradient(140deg, rgba(24,216,252,.45) 0%, rgba(0,114,240,.35) 55%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  z-index:-1;pointer-events:none;
}
.tool-visual{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--rule);background:rgba(7,13,32,.6)}
.tool-visual img{width:100%;height:auto;display:block}
.tool-body{min-width:0}
.tool-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--beam);background:rgba(24,216,252,.1);border:1px solid rgba(24,216,252,.3);
  padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
.tool-body h2{font-size:clamp(1.9rem,3vw,2.4rem);margin:0 0 8px}
.tool-sub{font-size:16px;color:var(--ink-2);line-height:1.5;margin:0 0 16px}
.tool-body .text{margin:0 0 12px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.tool-body .text strong{color:var(--ink)}

.tool-pros{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:10px}
.tool-pros li{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-size:14px;line-height:1.5;color:var(--ink-2);
}
.tool-pros svg{color:var(--beam);margin-top:4px;flex:0 0 auto}
.tool-pros strong{color:var(--ink);font-weight:700}

.tool-cta{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.btn-xl{font-size:16px;padding:14px 24px;display:inline-flex;align-items:center;gap:10px}
.btn-xl svg{flex:0 0 auto}
.tool-cta-meta{font-size:12px;color:var(--ink-3);letter-spacing:.01em}

@media (max-width:860px){
  .tool-card{grid-template-columns:1fr;gap:22px;padding:22px}
}

/* Versprechen: zwei Spalten (OK / Nicht dabei) */
.versprechen-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.verspr{
  padding:22px;border-radius:14px;background:rgba(10,18,44,.5);
  border:1px solid var(--rule);
}
.verspr h3{display:flex;align-items:center;gap:9px;font-size:17px;margin:0 0 14px}
.verspr.ok   h3 svg{color:var(--beam)}
.verspr.nope h3 svg{color:#FF9A8B}
.verspr.ok  {border-color:rgba(24,216,252,.3)}
.verspr.nope{border-color:rgba(255,154,139,.25)}
.verspr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.verspr li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.verspr li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--ink-3);
}
.verspr.ok   li::before{background:var(--beam)}
.verspr.nope li::before{background:#FF9A8B}
.verspr a{color:var(--beam);border-bottom:1px solid rgba(24,216,252,.3)}

@media (max-width:720px){ .versprechen-grid{grid-template-columns:1fr} }

/* Pipeline: zukünftige Werkzeuge */
.pipeline{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.pipe-card{
  padding:22px;border-radius:14px;
  background:rgba(10,18,44,.4);border:1px dashed var(--rule);
}
.pipe-stage{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);background:rgba(223,235,250,.05);
  padding:4px 10px;border-radius:999px;margin-bottom:10px;
}
.pipe-card h3{font-size:19px;margin:0 0 8px;color:var(--ink)}
.pipe-card p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.pipeline-note{margin:22px 0 0;font-size:14px;color:var(--ink-3);line-height:1.55}
.pipeline-note a{color:var(--beam);border-bottom:1px solid rgba(24,216,252,.3)}

@media (max-width:720px){ .pipeline{grid-template-columns:1fr} }

/* ───── Betriebsakte-Seite ───── */

.pagehead-meta{
  margin:16px 0 0;font-size:12px;color:var(--ink-3);letter-spacing:.01em;
}

/* Merksatz: hervorgehobene Zeile */
.merksatz{
  margin:28px 0 0;padding:16px 20px;
  font-size:17px;line-height:1.5;color:var(--ink);
  background:rgba(24,216,252,.08);border-left:3px solid var(--beam);
  border-radius:0 10px 10px 0;max-width:52rem;
  font-weight:600;letter-spacing:-.01em;
}

/* Drei Schritte */
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px}
.step{
  display:grid;grid-template-columns:140px 1fr;gap:22px;align-items:start;
  padding:22px;border:1px solid var(--rule);border-radius:14px;
  background:rgba(10,18,44,.4);
}
.step-idx{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--beam);background:rgba(24,216,252,.1);border:1px solid rgba(24,216,252,.3);
  padding:5px 11px;border-radius:999px;align-self:start;
}
.step h3{margin:0 0 6px;font-size:17px;color:var(--ink);letter-spacing:-.01em}
.step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.step p strong{color:var(--ink);font-weight:700}
.step a{color:var(--beam);border-bottom:1px solid rgba(24,216,252,.3)}

@media (max-width:720px){ .step{grid-template-columns:1fr;gap:10px;padding:18px} }

/* Dokumente-Liste */
.docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:22px}
.doc{
  display:grid;grid-template-columns:12px 1fr;gap:14px;
  padding:18px 20px;background:rgba(10,18,44,.5);
  border:1px solid var(--rule);border-radius:12px;
}
.doc-dot{
  width:9px;height:9px;border-radius:50%;background:var(--beam);
  margin-top:7px;box-shadow:0 0 10px rgba(24,216,252,.5);
  grid-column:1;grid-row:1 / span 2;
}
.doc > h3{grid-column:2;grid-row:1}
.doc > p{grid-column:2;grid-row:2}
.doc-dot.amber{background:#F5B042;box-shadow:0 0 10px rgba(245,176,66,.5)}
.doc h3{
  margin:0 0 6px;font-size:15.5px;color:var(--ink);line-height:1.3;
  display:flex;flex-direction:column;gap:3px;
}
.doc h3 em{
  font-style:normal;font-size:11.5px;color:var(--ink-3);
  font-weight:400;letter-spacing:.01em;
}
.doc p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.docs-note{margin:20px 0 0;font-size:14px;line-height:1.55;color:var(--ink-3)}

/* Werkzeug-Fenster-Mock */
.fenster{
  margin:22px 0 0;border-radius:12px;overflow:hidden;
  background:rgba(7,13,32,.75);border:1px solid var(--rule);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.8);
}
.fenster-kopf{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 16px;background:rgba(10,18,44,.6);
  font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);
  border-bottom:1px solid var(--rule-soft);font-variant-numeric:tabular-nums;
}
.fenster-inhalt{padding:22px 20px}

.frage{margin:0 0 8px;font-size:18px;color:var(--ink);line-height:1.35;letter-spacing:-.01em}
.frage-warum{margin:0 0 18px;font-size:13px;color:var(--ink-3);font-style:italic}

.opt-liste{display:flex;flex-direction:column;gap:10px}
.opt{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:12px 14px;border:1px solid var(--rule-soft);border-radius:10px;
  background:rgba(223,235,250,.02);
}
.opt.gewaehlt{border-color:rgba(24,216,252,.4);background:rgba(24,216,252,.06)}
.kreis{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-3);
  margin-top:3px;flex:0 0 auto;position:relative;
}
.opt.gewaehlt .kreis{border-color:var(--beam)}
.kreis.voll::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--beam);
}
.opt > span:last-child{display:flex;flex-direction:column;gap:3px}
.opt b{font-weight:700;color:var(--ink);font-size:14px}
.opt b + span{color:var(--ink-3);font-size:13px;line-height:1.4}

.erklaer-zeile{
  margin:16px 0 0;display:flex;align-items:center;gap:9px;
  font-size:13px;color:var(--beam);cursor:default;
}
.erklaer-ikon{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:1px solid var(--beam);border-radius:50%;
  font-weight:700;font-size:11px;
}

/* Akte-Zeile */
.akte-zeile{
  display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--rule-soft);
}
.akte-zeile:last-child{border-bottom:0}
.akte-zeile > span{display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.akte-zeile small{font-size:11.5px;color:var(--ink-3);font-weight:400}
.akte-zeile em{font-style:normal;color:var(--ink-2);font-size:13px;line-height:1.5;margin-top:6px}
.akte-zeile b{
  font-weight:700;color:var(--beam);font-size:14px;
  padding:4px 10px;background:rgba(24,216,252,.1);border-radius:6px;
  border:1px solid rgba(24,216,252,.3);white-space:nowrap;align-self:start;
}

/* Kostenlos-Block */
.free-box{
  margin-top:26px;padding:40px 36px;text-align:center;
  background:linear-gradient(180deg, var(--ground-3) 0%, var(--ground-2) 100%);
  border:1px solid rgba(24,216,252,.3);border-radius:18px;
  box-shadow:0 0 0 1px rgba(24,216,252,.08), 0 20px 60px -28px rgba(24,216,252,.4);
  position:relative;overflow:hidden;isolation:isolate;
}
.free-box::before{
  content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;
  background:linear-gradient(135deg, var(--beam) 0%, var(--sea) 55%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  z-index:-1;opacity:.5;pointer-events:none;
}
.free-tag{
  display:inline-block;font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;
  background:linear-gradient(135deg, var(--beam) 0%, #6FE4FF 55%, var(--sea) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px rgba(24,216,252,.3));
  margin-bottom:14px;
}
.free-text{
  margin:0 auto 18px;max-width:46rem;
  font-size:17px;line-height:1.6;color:var(--ink);
}
.free-text strong{color:var(--beam);font-weight:700}
.free-why{
  margin:0 auto 22px;max-width:46rem;
  font-size:14.5px;line-height:1.55;color:var(--ink-2);
}
.free-why strong{color:var(--ink);font-weight:700}
.free-box .actions{justify-content:center;margin-top:8px}
.free-meta{margin:14px 0 0;font-size:12px;color:var(--ink-3);letter-spacing:.01em}

@media (max-width:640px){
  .free-box{padding:28px 20px}
  .akte-zeile{grid-template-columns:1fr;gap:6px}
  .akte-zeile b{align-self:flex-start}
}

/* „Zur Einordnung"-Absatz: dezenter, mit cyan-Linie links */
.intro-ehrlich{
  margin:14px 0 0;max-width:60rem;
  padding:14px 18px;border-left:2px solid rgba(24,216,252,.4);
  background:rgba(24,216,252,.05);border-radius:0 10px 10px 0;
  font-size:14.5px;color:var(--ink-2);line-height:1.6;
}
.intro-ehrlich strong{color:var(--ink);font-weight:700}

/* Pipe-Card „in Betrieb" – aktive Variante statt gestrichelter Umrandung */
.pipe-card.ready{
  border:1px solid rgba(24,216,252,.3);
  background:rgba(10,18,44,.6);
  box-shadow:0 0 0 1px rgba(24,216,252,.08);
}
.pipe-card.ready .pipe-stage{
  color:var(--beam);background:rgba(24,216,252,.1);border:1px solid rgba(24,216,252,.3);
}
.pipe-card.ready a{color:var(--beam);border-bottom:1px solid rgba(24,216,252,.3)}

/* Lernmodul-Badge „in Überarbeitung" o. ä. */
.lm-badge{
  display:inline-block;margin-left:9px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#F5B042;background:rgba(245,176,66,.1);border:1px solid rgba(245,176,66,.35);
  padding:3px 9px;border-radius:999px;vertical-align:middle;
  font-family:"Inter",-apple-system,sans-serif;
}

/* ============ Klebrige CTA-Leiste (unter Hauptnav, Teil der .topbar) ============ */
.cta-bar{
  background:rgba(4,8,22,.72);
  border-top:1px solid var(--rule-soft);
  border-bottom:1px solid var(--rule-soft);
}
.cta-bar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:9px 20px;min-height:48px;
}
.cta-call{
  display:inline-flex;align-items:center;gap:10px;
  color:var(--ink);text-decoration:none;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.2px;
}
.cta-call:hover{color:var(--beam);text-decoration:none}
.cta-dot{
  width:9px;height:9px;border-radius:50%;background:#2ecc71;
  box-shadow:0 0 0 0 rgba(46,204,113,.55);
  animation:cta-pulse 2.4s infinite;
  flex-shrink:0;
}
@keyframes cta-pulse{
  0%{box-shadow:0 0 0 0 rgba(46,204,113,.55)}
  70%{box-shadow:0 0 0 10px rgba(46,204,113,0)}
  100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}
}
@media (prefers-reduced-motion:reduce){
  .cta-dot{animation:none}
}
.cta-call-label{color:var(--ink-2);font-size:14px;font-weight:500}
.cta-call-number{font-size:16px}
.cta-contact{
  display:inline-flex;align-items:center;
  padding:9px 16px;border-radius:999px;
  background:var(--beam);color:var(--on-beam);
  font-weight:600;text-decoration:none;font-size:14px;
  min-height:38px;white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta-contact:hover{
  transform:translateY(-1px);text-decoration:none;
  box-shadow:0 6px 18px -6px rgba(24,216,252,.55);
}
.cta-bar--hidden{display:none}

@media (max-width:640px){
  .cta-bar .wrap{padding:7px 14px;min-height:44px}
  .cta-call-label{display:none}
  .cta-call-number{font-size:17px}
  .cta-contact{padding:8px 12px;font-size:13px}
}

/* ============ Branchenstreifen „Für wen passt das noch?" ============ */
.branchen h2{margin-bottom:10px}
.branchen .intro{color:var(--ink-2);max-width:62ch;margin:0 0 32px}
.branchen-grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}
.branche{
  padding:20px 20px 18px;
  background:rgba(223,235,250,.03);
  border:1px solid var(--rule-soft);
  border-radius:14px;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .18s ease, background .18s ease;
}
.branche:hover{
  border-color:rgba(24,216,252,.22);
  background:rgba(24,216,252,.04);
}
.branche-icon{
  color:var(--beam);
  opacity:.9;
}
.branche h3{
  margin:4px 0 2px;
  font-size:1.02rem;line-height:1.3;
  color:var(--ink);
  font-weight:600;
}
.branche p{
  margin:0;color:var(--ink-2);
  font-size:.94rem;line-height:1.55;
}
.branchen-foot{
  margin-top:28px;color:var(--ink-3);
  font-size:.92rem;max-width:70ch;
}
.branchen-foot strong{color:var(--ink-2);font-weight:600}

@media (max-width:520px){
  .branchen-grid{grid-template-columns:1fr}
}

/* ============ Farbige Rahmen für Kernblöcke ============ */
/* Warm-grau: ehrliche Hinweis-Kästen (Was er NICHT kann) */
.doubt{
  padding-left:clamp(16px,2.5vw,22px);
  border-left:3px solid rgba(169,189,220,.22);
  background:linear-gradient(90deg, rgba(169,189,220,.045), transparent 55%);
  border-radius:0 10px 10px 0;
  transition:border-left-color .18s ease;
}
.doubt:hover{
  border-left-color:rgba(169,189,220,.4);
}
@media (max-width:820px){
  .doubt{padding-left:14px}
}

/* Türkis: Markenblöcke (Preise) */
.price{
  border-color:rgba(24,216,252,.22);
  background:linear-gradient(180deg, rgba(24,216,252,.03), var(--ground-3) 60%);
}
.price.key{
  border-color:rgba(24,216,252,.55);
  box-shadow:0 0 0 1px rgba(24,216,252,.18), 0 10px 36px -14px rgba(24,216,252,.35);
}

/* ============ CTA-Leiste v2: Testnummer als echter Anruf-Button ============ */
/* Links grüner Button mit Telefonhörer, rechts Türkis-Kontakt */
.cta-bar .wrap{
  padding:10px 20px;min-height:56px;
}
.cta-call{
  /* Button-Look, überschreibt die ältere Link-Darstellung */
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 18px 8px 12px;
  background:#1AAE4D;
  color:#F2FFF6;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  min-height:44px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 2px 10px -4px rgba(26,174,77,.5);
}
.cta-call:hover{
  background:#19C055;
  color:#FFFFFF;
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 8px 22px -8px rgba(26,174,77,.6);
}
.cta-call:focus-visible{
  outline:2px solid #FFFFFF;outline-offset:3px;
}
.cta-call-icon{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#FFFFFF;
  flex-shrink:0;
}
.cta-call-pulse{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.5);
  animation:cta-call-pulse 2.2s infinite;
  pointer-events:none;
}
@keyframes cta-call-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}
  70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
  .cta-call-pulse{animation:none}
}
.cta-call-text{
  display:flex;flex-direction:column;line-height:1.1;gap:2px;
}
.cta-call-label{
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(242,255,246,.85);
}
.cta-call-number{
  font-size:17px;font-weight:700;letter-spacing:.3px;
  font-variant-numeric:tabular-nums;
  color:#FFFFFF;
}

@media (max-width:640px){
  .cta-bar .wrap{padding:8px 14px;min-height:52px;gap:10px}
  .cta-call{padding:6px 14px 6px 8px;gap:10px;min-height:40px}
  .cta-call-icon{width:30px;height:30px}
  .cta-call-label{display:none}
  .cta-call-number{font-size:16px}
  .cta-contact{padding:8px 12px;font-size:13px}
}

/* ============ CTA-Leiste v3: Anruf-Button in Marken-Türkis ============ */
.cta-call{
  background:var(--beam);
  color:var(--on-beam);
  box-shadow:0 2px 10px -4px rgba(24,216,252,.45);
}
.cta-call:hover{
  background:var(--beam);
  color:var(--on-beam);
  box-shadow:0 8px 22px -8px rgba(24,216,252,.6);
}
.cta-call-icon{
  background:rgba(4,32,43,.18);
  color:var(--on-beam);
}
.cta-call-pulse{
  box-shadow:0 0 0 0 rgba(4,32,43,.35);
  animation-name:cta-call-pulse-dark;
}
@keyframes cta-call-pulse-dark{
  0%{box-shadow:0 0 0 0 rgba(4,32,43,.35)}
  70%{box-shadow:0 0 0 10px rgba(4,32,43,0)}
  100%{box-shadow:0 0 0 0 rgba(4,32,43,0)}
}
.cta-call-label{color:rgba(4,32,43,.72)}
.cta-call-number{color:var(--on-beam)}

/* Rechter Kontakt-Button wird jetzt sekundär (Ghost), damit nur Anrufen primär leuchtet */
.cta-contact{
  background:transparent;
  color:var(--beam);
  border:1px solid rgba(24,216,252,.45);
  box-shadow:none;
}
.cta-contact:hover{
  background:rgba(24,216,252,.08);
  color:var(--beam);
  border-color:var(--beam);
  box-shadow:none;
}

/* ============ CTA-Leiste v4: Erklärzeile in der Mitte ============ */
.cta-note{
  flex:1;
  margin:0;
  padding:0 20px;
  text-align:center;
  color:var(--ink-2);
  font-size:13.5px;
  line-height:1.4;
  max-width:52ch;
}
/* Unter 900px wird die Erklärung ausgeblendet, damit die Leiste schlank bleibt */
@media (max-width:900px){
  .cta-note{display:none}
}

/* ============ Anruf-Button im „Jetzt live erreichbar"-Banner ============ */
.test-cta-button{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:22px;
  padding:12px 24px 12px 14px;
  background:var(--beam);
  color:var(--on-beam);
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  min-height:48px;
  transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 4px 16px -6px rgba(24,216,252,.55);
}
.test-cta-button:hover{
  color:var(--on-beam);
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 10px 28px -8px rgba(24,216,252,.7);
}
.test-cta-button:focus-visible{
  outline:2px solid var(--beam);outline-offset:3px;
}
.test-cta-button-icon{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(4,32,43,.18);
  color:var(--on-beam);
  flex-shrink:0;
}
.test-cta-button-pulse{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(4,32,43,.4);
  animation:cta-call-pulse-dark 2.2s infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .test-cta-button-pulse{animation:none}
}
@media (max-width:520px){
  .test-cta-button{width:100%;justify-content:center;font-size:15px}
}

/* ============ Hinweis-Zeile unter dem Posteingang: Live-Agent ============ */
.inbox-note{
  margin:10px 0 0;
  display:flex;align-items:flex-start;gap:9px;
  padding:11px 14px;border-radius:10px;
  background:rgba(24,216,252,.05);
  border:1px solid rgba(24,216,252,.18);
  color:var(--ink-2);
  font-size:13.5px;line-height:1.5;
}
.inbox-note svg{color:var(--beam);flex:0 0 auto;margin-top:3px}

/* Alte CTA-Erklärzeile ist raus — Regel bleibt ohne Treffer, kein Aufräumbedarf */

/* ============ Hinweis zur Stimme im „Selbst testen"-Kanal ============ */
.channel-note{
  display:block;
  margin-top:8px;
  color:var(--ink-3);
  font-style:normal;
  font-size:13.5px;
  line-height:1.5;
}

/* ============ Zwei-Wege-Hinweis im Live-Banner ============ */
.test-cta-ways{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(24,216,252,.18);
  font-size:.95em;
}
.test-cta-ways strong{color:var(--beam);font-weight:700}

/* ============ Posteingang: neuer Notfall-Tag ============ */
.tag.notfall{
  background:rgba(255,76,76,.16);
  color:#FFB4B4;
  border-color:rgba(255,76,76,.45);
  font-weight:700;
  letter-spacing:.04em;
}

/* ============ Live-Banner als eigene Section direkt nach Hero ============ */
.anhoeren-section{
  padding:clamp(32px,5vw,56px) 0;
  background:linear-gradient(180deg, var(--ground-2), var(--ground) 72%);
  border-top:1px solid var(--rule-soft);
}
.test-cta.test-cta--wide{
  margin:0 auto;
  max-width:900px;
  padding:clamp(28px,4vw,44px) clamp(28px,4vw,52px);
}
.test-cta.test-cta--wide .test-cta-number{
  display:block;
  font-size:clamp(2.2rem,5.2vw,3.6rem);
  margin:12px 0 8px;
}
.test-cta.test-cta--wide .test-cta-kicker{
  font-size:clamp(1.1rem,2vw,1.3rem);
}

/* ============ Posteingang-Tabs: Branchen-Umschaltung ohne JS ============ */
/* Radio-Inputs verschwinden visuell, steuern aber über :checked ~ den Zustand */
.inbox-radio{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;height:0;
}

.inbox-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  margin:6px 0 14px;
  padding:4px;
  background:rgba(4,8,22,.4);
  border:1px solid var(--rule-soft);
  border-radius:12px;
}
.inbox-tab{
  flex:1 1 auto;
  padding:7px 12px;
  text-align:center;
  font-size:13px;font-weight:600;
  color:var(--ink-3);
  background:transparent;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
  line-height:1.2;
}
.inbox-tab:hover{
  color:var(--ink-2);
  background:rgba(223,235,250,.04);
}

/* Fokus-Zustand (für Tastatur) auf dem jeweiligen Label */
.inbox-radio:focus-visible + .inbox-tab,
.inbox-radio:focus-visible ~ .inbox-tabs .inbox-tab{
  outline:none;
}
#inbox-set-mix:focus-visible    ~ .inbox-tabs .inbox-tab[data-set="mix"],
#inbox-set-gastro:focus-visible ~ .inbox-tabs .inbox-tab[data-set="gastro"],
#inbox-set-haus:focus-visible   ~ .inbox-tabs .inbox-tab[data-set="haus"],
#inbox-set-kfz:focus-visible    ~ .inbox-tabs .inbox-tab[data-set="kfz"]{
  outline:2px solid var(--beam);outline-offset:2px;
}

/* Aktiver Tab leuchtet Türkis */
#inbox-set-mix:checked    ~ .inbox-tabs .inbox-tab[data-set="mix"],
#inbox-set-gastro:checked ~ .inbox-tabs .inbox-tab[data-set="gastro"],
#inbox-set-haus:checked   ~ .inbox-tabs .inbox-tab[data-set="haus"],
#inbox-set-kfz:checked    ~ .inbox-tabs .inbox-tab[data-set="kfz"]{
  background:rgba(24,216,252,.14);
  color:var(--beam);
  box-shadow:0 0 0 1px rgba(24,216,252,.3);
}

/* Standardmäßig alle Sets ausblenden, aktives einblenden */
.inbox-list[data-set]{display:none}
#inbox-set-mix:checked    ~ .inbox-list[data-set="mix"],
#inbox-set-gastro:checked ~ .inbox-list[data-set="gastro"],
#inbox-set-haus:checked   ~ .inbox-list[data-set="haus"],
#inbox-set-kfz:checked    ~ .inbox-list[data-set="kfz"]{
  display:block;
}

@media (max-width:520px){
  .inbox-tab{flex:1 1 calc(50% - 6px);font-size:12.5px;padding:7px 8px}
}

/* Zwischensatz vor dem Live-Banner */
.anhoeren-lede{
  max-width:900px;
  margin:0 auto 18px;
  text-align:center;
  color:var(--ink-2);
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  letter-spacing:.2px;
}

/* ============ Hell/Dunkel-Umschalter (Button in der Topbar) ============ */
.theme-toggle{
  background:transparent;
  border:1px solid var(--rule);
  color:var(--ink-2);
  width:40px;height:40px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
  margin-left:8px;
  flex-shrink:0;
}
.theme-toggle:hover{
  color:var(--beam);
  border-color:rgba(24,216,252,.4);
  background:rgba(24,216,252,.06);
}
.theme-toggle:focus-visible{outline:2px solid var(--beam);outline-offset:3px}
.theme-icon{display:none}
/* Dunkel-Modus (Standard): Mond-Icon anzeigen (Klick -> hell) */
.theme-icon-moon{display:block}
html[data-theme="light"] .theme-icon-moon{display:none}
html[data-theme="light"] .theme-icon-sun{display:block}

/* ============ Hell-Modus: alle Overrides ============ */
html[data-theme="light"]{
  --ground:#FFFFFF;
  --ground-2:#F4F7FC;
  --ground-3:#ECF0F8;
  --ink:#0A1226;
  --ink-2:#3A4A6B;
  --ink-3:#5F7294;
  --on-beam:#04202B;
  --rule:rgba(10,18,38,.14);
  --rule-soft:rgba(10,18,38,.07);
  --shadow:0 1px 2px rgba(10,18,38,.08), 0 10px 32px -14px rgba(10,18,38,.18);
}
html[data-theme="light"] body{
  background:var(--ground);color:var(--ink);
}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule-soft)}
@supports not (backdrop-filter:blur(12px)){
  html[data-theme="light"] .topbar{background:#FFFFFF}
}
html[data-theme="light"] .tabs{background:rgba(244,247,252,.65);border-bottom:1px solid var(--rule-soft)}
html[data-theme="light"] .tab{color:#56688A}
html[data-theme="light"] .tab:hover{color:var(--ink-2)}
html[data-theme="light"] .cta-bar{background:rgba(236,240,248,.75);border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
html[data-theme="light"] .mobilemenu{background:#FFFFFF;border-bottom:1px solid var(--rule-soft)}
html[data-theme="light"] .mobilemenu a{color:var(--ink-2)}

/* Logo: hell-blaue SVG-Elemente auf Weiss schlecht lesbar — dunkel setzen.
   Gilt für Nav-Logo (.brand img) und Footer-Logo (footer img). */
html[data-theme="light"] .brand img,
html[data-theme="light"] footer img{
  filter:invert(1) hue-rotate(180deg) saturate(1.2);
}

/* Leuchtturm-Buehne gehoert zur Nachtmetapher — im Hellmodus komplett aus */
html[data-theme="light"] .beacon,
html[data-theme="light"] .szene,
html[data-theme="light"] .kegel3d,
html[data-theme="light"] .nachtfeld,
html[data-theme="light"] .nebel,
html[data-theme="light"] .laterne{display:none !important}
html[data-theme="light"] .hero{background:linear-gradient(180deg, #F7F9FD, #FFFFFF 55%)}

/* Sektionen mit Tönung */
html[data-theme="light"] .section.tint{
  background:linear-gradient(180deg, var(--ground-2), var(--ground) 72%);
}
html[data-theme="light"] .anhoeren-section{
  background:linear-gradient(180deg, var(--ground-2), var(--ground) 72%);
}

/* Posteingang-Kasten + Mails */
html[data-theme="light"] .inbox{background:#FFFFFF;border:1px solid var(--rule-soft);box-shadow:var(--shadow)}
html[data-theme="light"] .inbox-head{background:rgba(244,247,252,.6);border-bottom:1px solid var(--rule-soft)}
html[data-theme="light"] .inbox-tabs{background:rgba(244,247,252,.75);border:1px solid var(--rule-soft)}
html[data-theme="light"] .mail-time{color:var(--ink-3)}
html[data-theme="light"] .mail p{color:var(--ink-2)}
html[data-theme="light"] .inbox-foot{background:rgba(244,247,252,.6);border:1px solid var(--rule-soft)}
html[data-theme="light"] .replay{background:#FFFFFF;color:var(--ink-2);border:1px solid var(--rule)}
html[data-theme="light"] .replay:hover{color:var(--beam);border-color:var(--beam)}

/* Tag-Farben im Light-Mode: etwas dunklerer Text für Kontrast */
html[data-theme="light"] .tag.rueckruf  {background:rgba(234,88,47,.10);color:#B04824;border-color:rgba(234,88,47,.3)}
html[data-theme="light"] .tag.termin    {background:rgba(34,170,80,.10); color:#1E7A3C;border-color:rgba(34,170,80,.3)}
html[data-theme="light"] .tag.neu       {background:rgba(24,170,215,.10);color:#0E7FA4;border-color:rgba(24,170,215,.35)}
html[data-theme="light"] .tag.angenommen{background:rgba(0,114,240,.10); color:#0054B5;border-color:rgba(0,114,240,.35)}
html[data-theme="light"] .tag.info      {background:rgba(10,18,38,.06); color:var(--ink-3);border-color:rgba(10,18,38,.14)}
html[data-theme="light"] .tag.notfall   {background:rgba(220,38,38,.10);color:#A52020;border-color:rgba(220,38,38,.45)}

/* Preis-Karten, Branchen-Kacheln, Doubt-Kaesten */
html[data-theme="light"] .price{
  background:#FFFFFF;
  border-color:rgba(24,216,252,.3);
  box-shadow:var(--shadow);
  background-image:linear-gradient(180deg, rgba(24,216,252,.04), #FFFFFF 60%);
}
html[data-theme="light"] .price.key{
  box-shadow:0 0 0 1px rgba(24,216,252,.35), 0 10px 28px -14px rgba(24,216,252,.25);
}
html[data-theme="light"] .branche{
  background:#FFFFFF;
  border-color:var(--rule-soft);
  box-shadow:var(--shadow);
}
html[data-theme="light"] .branche:hover{background:rgba(24,216,252,.05);border-color:rgba(24,216,252,.3)}
html[data-theme="light"] .doubt{
  background:linear-gradient(90deg, rgba(10,18,38,.04), transparent 55%);
  border-left-color:rgba(10,18,38,.18);
}

/* Live-Banner (test-cta) */
html[data-theme="light"] .test-cta{background:linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 100%)}

/* Kontakt-Formular */
html[data-theme="light"] .contact input,
html[data-theme="light"] .contact textarea,
html[data-theme="light"] .contact select{
  background:#FFFFFF;color:var(--ink);border-color:var(--rule);
}
html[data-theme="light"] .contact input:focus,
html[data-theme="light"] .contact textarea:focus,
html[data-theme="light"] .contact select:focus{
  border-color:var(--beam);
}
html[data-theme="light"] .contact{background:#FFFFFF;border:1px solid var(--rule-soft);box-shadow:var(--shadow)}
html[data-theme="light"] .channel{color:var(--ink-2)}
html[data-theme="light"] .badge{background:rgba(10,18,38,.05);color:var(--ink-2);border:1px solid var(--rule-soft)}

/* Footer */
html[data-theme="light"] footer{background:#F4F7FC;border-top:1px solid var(--rule-soft);color:var(--ink-2)}
html[data-theme="light"] footer a{color:var(--ink-2)}
html[data-theme="light"] footer a:hover{color:var(--beam)}

/* Vergleich NOW vs NEW */
html[data-theme="light"] .vcol{background:#FFFFFF;border:1px solid var(--rule-soft);box-shadow:var(--shadow)}
html[data-theme="light"] .vcol.now h3{color:#A52020}
html[data-theme="light"] .vcol.new h3{color:#1E7A3C}

/* Steps-Pfad */
html[data-theme="light"] .steps{border-top:1px solid var(--rule)}
html[data-theme="light"] .step{border-right:1px solid var(--rule-soft)}
html[data-theme="light"] .step .num{color:var(--ink-3)}

/* Mobile-Menu-Reiter */
html[data-theme="light"] .burger{color:var(--ink-2)}

/* Steps-Boxen (In vier Schritten dorthin): im Hellmodus weiß statt dunkelblau */
html[data-theme="light"] .step{
  background:#FFFFFF;
  border:1px solid var(--rule-soft);
  box-shadow:var(--shadow);
}
html[data-theme="light"] .step h3{color:var(--ink)}
html[data-theme="light"] .step p{color:var(--ink-2)}
html[data-theme="light"] .step p strong{color:var(--ink)}
html[data-theme="light"] .steps{border-top:none}

/* ============ Datenweg (Einwand „Was passiert mit den Daten?") ============
   Schmale Kurzfassung des Schaubilds; die Vollansicht liegt auf datenfluss.html. */
.datenweg{
  --dw-eu:#4ADE80;--dw-us:#F5B14A;
  margin:22px 0 0;max-width:66ch;
}
html[data-theme="light"] .datenweg{--dw-eu:#1E7A3C;--dw-us:#A85608}
.datenweg figcaption{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.dw-zonen{
  list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:end;
}
.dw-zone{--dw:var(--dw-eu);position:relative;min-width:0}
.dw-zone.dw-us{--dw:var(--dw-us)}
.dw-zone-name{display:block;font-size:12.5px;font-weight:600;color:var(--dw);line-height:1.35;padding-bottom:8px}
.dw-zone ol{
  list-style:none;margin:0;padding:0;border-top:2px solid var(--dw);
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.dw-zone ol li{position:relative;padding-top:15px;min-width:0}
.dw-zone ol li::before{
  content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;
  background:var(--dw);box-shadow:0 0 0 3px var(--ground);
}
/* Pfeil in der Luecke zwischen den Zonen */
.dw-zone ol{position:relative}
.dw-zone.dw-eu ol::after{
  content:"";position:absolute;right:-17px;top:-5.5px;
  width:7px;height:7px;border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);
  transform:rotate(45deg);
}
.dw-rolle{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.3}
.dw-name{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;margin-top:2px}
.doubt .dw-mehr{margin-top:16px;font-size:14px}
.dw-mehr a{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.dw-mehr svg{flex:0 0 auto;transition:transform .2s cubic-bezier(.16,1,.3,1)}
.dw-mehr a:hover svg{transform:translateX(3px)}
@media (max-width:520px){
  .dw-zonen{grid-template-columns:1fr;gap:20px}
  .dw-zone.dw-eu ol::after{display:none}
}
@media (prefers-reduced-motion:reduce){ .dw-mehr svg{transition:none} }

/* ============ Seite datenfluss.html ============ */
.schaubild{margin:0}
.schaubild > a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow);background:#fff}
.schaubild img{width:100%;height:auto}
.schaubild figcaption{margin-top:14px;color:var(--ink-3);font-size:14px;display:flex;flex-wrap:wrap;gap:6px 22px}
.weg{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rule);counter-reset:weg}
.weg li{
  counter-increment:weg;padding:22px 0;border-bottom:1px solid var(--rule-soft);
  display:grid;grid-template-columns:2.2rem minmax(0,.8fr) minmax(0,1.6fr);gap:6px clamp(14px,3vw,36px);align-items:baseline;
}
.weg li::before{content:counter(weg);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.weg h3{font-size:1.08rem;font-weight:600;letter-spacing:-.02em;line-height:1.35}
.weg h3 span{display:block;font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-top:3px}
.weg p{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:62ch}
.weg .weg-vertrag{display:block;margin-top:8px;font-size:13.5px;font-weight:600;color:var(--dw-eu)}
.weg .us .weg-vertrag{color:var(--dw-us)}
.weg{--dw-eu:#4ADE80;--dw-us:#F5B14A}
html[data-theme="light"] .weg{--dw-eu:#1E7A3C;--dw-us:#A85608}
@media (max-width:720px){
  .weg li{grid-template-columns:2.2rem minmax(0,1fr)}
  .weg p{grid-column:2}
}
.begriffe{margin:32px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.begriffe dt{font-weight:600;color:var(--ink);font-size:1.02rem;letter-spacing:-.015em}
.begriffe dd{margin:8px 0 0;color:var(--ink-2);font-size:15px;line-height:1.6}
@media (max-width:820px){ .begriffe{grid-template-columns:1fr} }
.stand{margin-top:36px;color:var(--ink-3);font-size:13.5px;max-width:70ch;line-height:1.6}
.pagehead .verfasser{margin-top:18px;color:var(--ink-3);font-size:14px}
.prosa p{color:var(--ink-2);max-width:68ch;margin-top:18px;line-height:1.7}
.prosa h2{max-width:24ch}
.prosa-fragen{margin-top:48px;border-top:1px solid var(--rule);padding-top:8px}
.prosa-fragen h3{font-size:1.13rem;font-weight:600;letter-spacing:-.02em;line-height:1.35;margin-top:28px}
.prosa-fragen p{margin-top:10px;font-size:15.5px;line-height:1.6}