/* =========================================================
   SCHRIFTEN — selbst gehostet (kein Google-Fonts-CDN,
   damit keine IP-Adressen an Google uebertragen werden).
   Variable Fonts: Archivo 400..900, Inter 400..700.
   ========================================================= */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(./assets/fonts/archivo-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(./assets/fonts/archivo-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: 400 700;
  font-display: swap;
  src: url(./assets/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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./assets/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;
}

/* =========================================================
   D2D-RECRUITING-KIT — Lead-Magnet-Landingpage
   Becker Consulting GmbH

   Palette direkt aus dem Leadmagneten (Navy / Signalblau /
   Papier). Formensprache: technischer Bauplan — Haarlinien,
   Rasterfelder, gekappte Ecken, Massband-Ticks. Bewusst
   anders als die Gold-Seite des Skript-Leadmagneten: keine
   Aurora-Wolken, kleinere Radien, harte Kanten.
   ========================================================= */

:root{
  /* --- Signalblau (aus dem PDF: #2E7BC4) --- */
  --blue:        #2E7BC4;
  --blue-light:  #5FA3DE;
  --blue-pale:   #A9C6E2;
  --blue-deep:   #1E5E9E;
  --blue-ink:    #1A548F;              /* AA-tauglich auf Papier */
  --blue-rgb:    46,123,196;

  /* --- Navy / Dunkel --- */
  --ink:         #0D2238;
  --ink-2:       #12304F;
  --ink-3:       #1E3A57;
  --ink-4:       #274764;

  /* --- Papier / Hell --- */
  --paper:       #F7F9FB;
  --paper-2:     #EAF0F6;
  --paper-3:     #DCE6EF;
  --white:       #ffffff;

  /* --- Text --- */
  --on-ink:      #E4EDF6;
  --on-ink-dim:  #9FB4C8;
  --on-ink-mute: #6A8099;
  --on-paper:      #0D2238;
  --on-paper-dim:  #44566A;
  --on-paper-mute: #6E8093;

  /* --- Meldungen --- */
  --warn:      #C0392B;
  --warn-ink:  #A32E22;
  --warn-bg:   #FDF2F0;
  --warn-line: rgba(192,57,43,.26);
  --warn-ring: rgba(192,57,43,.16);
  --ok:        #1F8A5F;

  /* Symbole als Maske: sie nehmen die Textfarbe an und bleiben scharf. */
  --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10 1.6a8.4 8.4 0 1 0 0 16.8 8.4 8.4 0 0 0 0-16.8Zm0 3.6a1.05 1.05 0 0 1 1.05 1.13l-.3 4.2a.75.75 0 0 1-1.5 0l-.3-4.2A1.05 1.05 0 0 1 10 5.2Zm0 7.5a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10 1.6a8.4 8.4 0 1 0 0 16.8 8.4 8.4 0 0 0 0-16.8Zm0 3.1a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Zm1.05 9.9h-2.1a.75.75 0 0 1 0-1.5h.3V9.9h-.3a.75.75 0 0 1 0-1.5h1.05c.41 0 .75.34.75.75v3.95h.3a.75.75 0 0 1 0 1.5Z'/%3E%3C/svg%3E");

  /* --- Linien --- */
  --line-dark:    rgba(169,198,226,.16);
  --line-dark-2:  rgba(169,198,226,.30);
  --line-light:   rgba(13,34,56,.075);
  --line-light-2: rgba(13,34,56,.16);

  /* --- Schatten --- */
  --sh-sm: 0 1px 2px rgba(13,34,56,.04), 0 8px 24px -14px rgba(13,34,56,.14);
  --sh-md: 0 2px 6px rgba(13,34,56,.05), 0 24px 54px -26px rgba(13,34,56,.30);
  --sh-lg: 0 40px 90px -42px rgba(13,34,56,.45);
  --glow:  0 18px 60px -22px rgba(var(--blue-rgb),.55);

  /* --- Typo --- */
  --display: 'Archivo', 'Inter', system-ui, -apple-system, sans-serif;
  --sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1220px;
  --rad:    14px;
  --rad-lg: 22px;

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring:   cubic-bezier(.34,1.42,.5,1);
}

/* =========================================================
   BASIS
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box }

/* `clip` statt `hidden`: `hidden` macht den Viewport zum Scrollcontainer,
   dann meldet er in der Handy-Emulation die Breite des Ueberlaufs statt
   die des Geraets. `clip` schneidet nur ab. */
html{ scroll-behavior:smooth; overflow-x:clip; scroll-padding-top:92px; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--on-paper);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img,picture,svg{ max-width:100%; display:block }
a{ color:inherit }
button{ font:inherit }

::selection{ background:rgba(var(--blue-rgb),.24) }

:where(a,button,summary,input,select,textarea):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:3px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--white);
  padding:12px 18px; border-radius:0 0 var(--rad) 0; font-weight:700;
}
.skip-link:focus{ left:0 }

.wrap{
  width:min(100% - 40px, var(--wrap));
  margin-inline:auto;
}
@media (max-width:640px){ .wrap{ width:min(100% - 32px, var(--wrap)) } }

/* =========================================================
   TYPOGRAFIE
   ========================================================= */
.display{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-.025em;
  line-height:1.04;
  margin:0;
  font-size:clamp(2.05rem, 5.5vw, 3.55rem);
}
.h2{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
  font-size:clamp(1.65rem, 4.1vw, 2.65rem);
  color:var(--on-paper);
}
.h2 em{ font-style:normal; color:var(--blue-ink); display:block }
.h2, .display{ text-wrap:balance }
.h2-light{ color:var(--white) }
.h2-light em{ color:var(--blue-light) }

.grad{
  display:block;
  color:var(--blue-light);
}

.sub{
  margin:14px 0 0;
  max-width:62ch;
  color:var(--on-paper-dim);
  font-size:clamp(1rem, 1.6vw, 1.09rem);
}
.sub-light{ color:var(--on-ink-dim) }

/* Weiche Pille mit Punkt — freundlicher als ein umrandetes Kaestchen. */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display);
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-ink);
  padding:7px 15px;
  background:rgba(var(--blue-rgb),.10);
  border-radius:100px;
}
.eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:var(--blue); flex:0 0 auto;
}
.section-ink .eyebrow,
.eyebrow--light{
  color:var(--blue-pale);
  background:rgba(var(--blue-rgb),.20);
}
.section-ink .eyebrow::before,
.eyebrow--light::before{ background:var(--blue-light) }

.head{ max-width:78ch; margin-bottom:clamp(34px,5vw,56px) }
.head .h2{ margin-top:16px }

/* =========================================================
   SEKTIONEN
   ========================================================= */
.section{
  position:relative;
  padding:clamp(64px, 9vw, 116px) 0;
  isolation:isolate;
}
.section-paper{ background:var(--paper) }
.section-paper-2{ background:var(--paper-2) }
.section-ink{ background:var(--ink); color:var(--on-ink) }
.section-ink p{ color:var(--on-ink-dim) }

/* Weiches Licht statt Konstruktionsraster: zwei grosse, flache
   Aufhellungen. Traegt Tiefe, ohne nach Bauzeichnung auszusehen. */
.section-ink::before{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(46,123,196,.22), transparent 62%),
    radial-gradient(80% 50% at 90% 110%, rgba(30,94,158,.16), transparent 70%);
}

/* Heller Abschnitt mit ruhigem Uebergang statt Massband-Ticks. */
.section-ruled{
  background-image:linear-gradient(180deg, rgba(234,240,246,.85), transparent 200px);
}

/* Foto-Sektionen */
.has-photo{ overflow:hidden }
.section-photo{ position:absolute; inset:0; z-index:-3 }
.section-photo img{ width:100%; height:100%; object-fit:cover }
.section-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,34,56,.95) 0%, rgba(13,34,56,.82) 45%, rgba(13,34,56,.96) 100%),
    linear-gradient(90deg, rgba(13,34,56,.8) 0%, rgba(30,94,158,.28) 55%, transparent 100%);
}

.ai-credit{
  position:absolute; right:16px; bottom:10px; margin:0;
  font-size:.68rem; letter-spacing:.06em;
  color:rgba(169,198,226,.55);
}
.ai-credit--flow{ position:static; text-align:right; padding:0 20px; margin:10px 0 0 }

/* =========================================================
   KNOEPFE — kantig, mit Innen-Haarlinie und gleitendem Pfeil
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px;
  border:1px solid transparent;
  border-radius:var(--rad);
  font-family:var(--display);
  font-weight:800;
  font-size:.95rem;
  letter-spacing:-.005em;
  text-decoration:none;
  cursor:pointer;
  overflow:hidden;
  transition:transform .28s var(--spring), box-shadow .28s var(--ease), background-color .2s, border-color .2s, color .2s;
}
.btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s var(--ease) }
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn:hover svg{ transform:translateY(2px) }
.btn[data-arrow="right"]:hover svg{ transform:translateX(3px) translateY(0) }

.btn-sm{ padding:10px 16px; font-size:.86rem }
/* 44px Tippflaeche nur dort, wo mit dem Finger gezielt wird — am Rechner
   wuerde die Mehrhoehe die Opt-In-Seite ueber ihre 100dvh druecken. */
@media (pointer: coarse){ .btn-sm{ min-height:44px } }
.btn-lg{ padding:17px 30px; font-size:1.04rem }
.btn-block{ width:100% }

.btn-blue{
  background:var(--blue);
  color:#fff;
  box-shadow:0 10px 28px -14px rgba(var(--blue-rgb),.8), inset 0 0 0 1px rgba(255,255,255,.16);
}
.btn-blue:hover{ background:var(--blue-deep); box-shadow:0 18px 40px -16px rgba(var(--blue-rgb),.85), inset 0 0 0 1px rgba(255,255,255,.22) }

.btn-ink{
  background:var(--ink);
  color:var(--white);
  box-shadow:0 10px 26px -16px rgba(13,34,56,.9), inset 0 0 0 1px rgba(169,198,226,.16);
}
.btn-ink:hover{ background:var(--ink-2) }

.btn-ghost{
  background:transparent;
  color:var(--on-ink);
  border-color:var(--line-dark-2);
}
.btn-ghost:hover{ background:rgba(169,198,226,.09); border-color:var(--blue-light); color:#fff }
.section-paper .btn-ghost,
.btn-ghost--dark{ color:var(--on-paper); border-color:var(--line-light-2) }
.section-paper .btn-ghost:hover{ background:rgba(13,34,56,.05); border-color:var(--ink) }

/* Lichtkante statt Glanz-Sweep: wandert einmal ueber die Oberkante. */
.btn-shine::after{
  content:''; position:absolute; left:-30%; top:0; width:30%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg);
  animation:shine 4.6s var(--ease) infinite;
}
@keyframes shine{ 0%,72%{ left:-30% } 92%,100%{ left:120% } }
@media (prefers-reduced-motion: reduce){ .btn-shine::after{ display:none } }

/* Tippflaeche auf Touch-Geraeten: kleine Textlinks bekommen ueber ein
   Pseudoelement 44px in der Hoehe, ohne dass sich am Layout etwas aendert.
   Waechst stattdessen die Zeile selbst, rutscht die Opt-In-Seite aus ihren
   100dvh heraus und fängt an zu scrollen. */
@media (pointer: coarse){
  .footer-links a,
  .opt-back,
  .opt-code-neu button{ position:relative }
  .fld-check input[type="checkbox"]::before{
    content:''; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%);
  }
  .footer-links a::after,
  .opt-back::after,
  .opt-code-neu button::after{
    content:''; position:absolute; left:-4px; right:-4px;
    top:50%; height:44px; transform:translateY(-50%);
  }
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:calc(var(--d, 0) * 80ms);
}
.reveal.visible{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none }
}

/* =========================================================
   FORTSCHRITTSBALKEN + TOPBAR
   ========================================================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--blue-deep), var(--blue-light));
  z-index:120;
}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:110;
  background:rgba(13,34,56,0);
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s;
}
.topbar.is-stuck{
  background:rgba(13,34,56,.86);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-dark);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 0;
}
.topbar-brand img{ width:104px; height:auto }

@media (max-width:560px){
  .topbar-brand img{ width:88px }
  .topbar .btn-sm{ padding:9px 13px; font-size:.8rem }
  .topbar .btn-sm svg{ width:16px; height:16px }
}

/* =========================================================
   HERO — Bauplan-Platte statt Aurora
   ========================================================= */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--on-ink);
  padding:clamp(118px, 15vw, 172px) 0 0;
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{ position:absolute; inset:0; z-index:-1 }
.hero-plate{
  position:absolute; inset:0;
  background:
    radial-gradient(95% 65% at 76% 4%, rgba(46,123,196,.40), transparent 64%),
    radial-gradient(70% 55% at 8% 96%, rgba(30,94,158,.30), transparent 68%),
    linear-gradient(180deg, #102B47 0%, #0D2238 52%, #0B1E33 100%);
}
/* Weiche Lichtflaechen statt Raster. Die Klasse heisst weiter `hero-grid`,
   weil Opt-In- und Dankeseite dasselbe Element einbinden. */
.hero-grid{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 45% at 18% 18%, rgba(95,163,222,.20), transparent 70%),
    radial-gradient(55% 45% at 86% 72%, rgba(46,123,196,.22), transparent 72%);
  filter:blur(6px);
}
.hero-noise{
  position:absolute; inset:0; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
}

.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
  padding-bottom:clamp(54px, 7vw, 84px);
}
@media (max-width:920px){
  .hero-inner{ grid-template-columns:1fr; text-align:left }
}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 17px;
  background:rgba(var(--blue-rgb),.22);
  border-radius:100px;
  font-family:var(--display);
  font-weight:800;
  font-size:.74rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#DCEAF7;
}
.badge-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--blue-light);
  box-shadow:0 0 0 4px rgba(var(--blue-rgb),.24);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.82) } }
@media (prefers-reduced-motion: reduce){ .badge-dot{ animation:none } }

.hero-copy .display{ margin:22px 0 0; color:#fff }
.hero-copy .lead{
  margin:20px 0 0;
  max-width:54ch;
  font-size:clamp(1.02rem, 1.8vw, 1.16rem);
  color:var(--on-ink-dim);
}
.hero-actions{ margin-top:30px; display:flex; flex-wrap:wrap; gap:12px }

/* Die vier Kanaele stehen im Hero, nicht erst weiter unten: sie sagen auf
   einen Blick, dass es hier ums Finden von Leuten geht. */
.hero-channels{ margin-top:36px }
.hero-channels-label{
  display:block; margin-bottom:12px;
  font-family:var(--display); font-weight:800;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ink-mute);
}
.hero-channels ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:9px;
}
.hero-channels li{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px 9px 12px;
  border-radius:100px;
  background:rgba(169,198,226,.10);
  border:1px solid rgba(169,198,226,.16);
  font-family:var(--display); font-weight:700;
  font-size:.9rem; color:#E4EDF6;
}
.hc-budget{
  font-family:var(--display); font-weight:900;
  font-size:.78rem; letter-spacing:-.04em;
  color:var(--blue-light);
  background:rgba(var(--blue-rgb),.24);
  border-radius:100px;
  min-width:30px; padding:3px 8px; text-align:center;
}
@media (max-width:420px){
  .hero-channels li{ font-size:.84rem; padding:8px 13px 8px 10px }
}

/* --- Cover auf einer Bauplan-Platte --- */
.hero-visual{ position:relative; display:flex; justify-content:center }
.kitplate{
  position:relative;
  width:min(100%, 420px);
  padding:24px;
  border:1px solid rgba(169,198,226,.18);
  border-radius:28px;
  background:
    linear-gradient(180deg, rgba(56,95,136,.55), rgba(20,48,76,.45));
  box-shadow:var(--sh-lg);
  backdrop-filter:blur(3px);
}

.kitplate-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:14px; margin-bottom:16px;
  border-bottom:1px solid rgba(169,198,226,.14);
  font-family:var(--display); font-weight:800;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-ink-mute);
}
.kitplate-head b{ color:var(--blue-light); font-weight:800 }

.kitcover{
  position:relative; margin:0;
  border-radius:12px; overflow:hidden;
  box-shadow:0 26px 60px -26px rgba(0,0,0,.85), 0 0 0 1px rgba(169,198,226,.2);
  transform:translateZ(0);
  transition:transform .5s var(--ease);
}
.kitcover img{ width:100%; height:auto }
.kitplate:hover .kitcover{ transform:translateY(-6px) }
@media (prefers-reduced-motion: reduce){ .kitplate:hover .kitcover{ transform:none } }
.kitcover-gloss{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.2) 0%, transparent 34%, transparent 70%, rgba(255,255,255,.08) 100%);
  pointer-events:none;
}

.kitplate-foot{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(169,198,226,.14);
}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px;
  border-radius:100px;
  font-size:.74rem; font-weight:600;
  color:var(--on-ink-dim);
  background:rgba(169,198,226,.10);
}
.chip b{ color:var(--blue-light); font-weight:800 }

/* --- Kanal-Laufband --- */
.ticker{
  border-top:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  background:rgba(46,123,196,.1);
  overflow:hidden;
  padding:12px 0;
}
.ticker-track{
  display:flex; align-items:center; gap:26px;
  width:max-content;
  animation:slide 34s linear infinite;
  font-family:var(--display); font-weight:800;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-pale);
}
.ticker-track i{ color:var(--blue); font-style:normal; font-size:.6rem }
@keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none } }

/* =========================================================
   GRUNDFORM: KARTE
   Weiche weisse Karte, die Farbe traegt die runde Ziffer —
   kein Signalstrich, keine Eckmarke. Diese Form traegt fast
   alle Sektionen.
   ========================================================= */
.sheet{
  position:relative;
  background:var(--white);
  border:1px solid var(--line-light);
  border-radius:var(--rad-lg);
  padding:28px 26px;
  box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.sheet:hover{ transform:translateY(-4px); box-shadow:var(--sh-md) }
@media (prefers-reduced-motion: reduce){ .sheet:hover{ transform:none } }

.sheet--dark{
  background:rgba(169,198,226,.06);
  border-color:var(--line-dark);
  color:var(--on-ink);
  box-shadow:none;
}
.sheet--dark:hover{ background:rgba(169,198,226,.10) }
.sheet--dark h3{ color:#fff }

.sheet h3{
  font-family:var(--display); font-weight:800;
  font-size:1.07rem; line-height:1.25;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.sheet p{ margin:0; font-size:.95rem; color:var(--on-paper-dim) }
.sheet--dark p{ color:var(--on-ink-dim) }

/* Runde Ziffer statt Nummernschild. */
.tag{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  font-family:var(--display); font-weight:900;
  font-size:.82rem; letter-spacing:0;
  color:var(--blue-ink);
  background:rgba(var(--blue-rgb),.12);
  margin-bottom:14px;
}
.sheet--dark .tag,
.tag--light{ color:var(--blue-light); background:rgba(var(--blue-rgb),.22) }

/* =========================================================
   AUF-KEINEN-FALL-BOX — das Leitmotiv des Kits
   ========================================================= */
.nogo{
  position:relative;
  margin-top:clamp(28px,4vw,44px);
  padding:24px 26px 24px 64px;
  border:1px solid var(--warn-line);
  border-radius:var(--rad-lg);
  background:var(--warn-bg);
}
.nogo::before{
  content:''; position:absolute; left:24px; top:26px;
  width:22px; height:22px;
  background:var(--warn); 
  -webkit-mask:var(--icon-warn) center/contain no-repeat;
  mask:var(--icon-warn) center/contain no-repeat;
}
.nogo b{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--warn-ink);
  margin-bottom:6px;
}
.nogo p{ margin:0; font-size:.95rem; color:#5A3B36 }

.nogo--dark{
  background:rgba(192,57,43,.13);
  border-color:rgba(232,120,105,.38);
  border-left-color:#E87869;
}
.nogo--dark::before{ background:#F0A99D }
.nogo--dark b{ color:#F0A99D }
.nogo--dark p{ color:#E9D4D0 }

/* =========================================================
   MERKSATZ — Bandeinfassung statt Kapsel
   ========================================================= */
.merksatz{
  position:relative;
  margin:clamp(30px,4vw,46px) 0 0;
  padding:28px 32px;
  border:1px solid rgba(var(--blue-rgb),.32);
  border-radius:var(--rad-lg);
  background:linear-gradient(120deg, rgba(46,123,196,.24), rgba(46,123,196,.07));
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.02rem,2.1vw,1.28rem);
  line-height:1.4;
  color:#fff;
}
.merksatz-tag{
  display:block;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:8px; font-weight:900;
}
.merksatz--paper{
  background:linear-gradient(120deg, rgba(46,123,196,.12), rgba(46,123,196,.03));
  color:var(--on-paper);
}
.merksatz--paper .merksatz-tag{ color:var(--blue-ink) }

/* =========================================================
   01 · PROBLEM — Stundenkonto + Problemblaetter
   ========================================================= */
.timesheet{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid var(--line-light);
  border-radius:var(--rad-lg);
  overflow:hidden;
  background:var(--white);
  box-shadow:var(--sh-sm);
  margin-bottom:clamp(34px,5vw,52px);
}
@media (max-width:760px){ .timesheet{ grid-template-columns:1fr } }

.ts-col{ padding:28px 28px 30px }
.ts-col + .ts-col{ border-left:1px solid var(--line-light) }
@media (max-width:760px){ .ts-col + .ts-col{ border-left:0; border-top:1px solid var(--line-light) } }
.ts-col--now{ background:var(--paper-2) }

.ts-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:1px solid var(--line-light);
  font-family:var(--display); font-weight:800;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-paper-mute);
}
.ts-head b{ color:var(--blue-ink); font-size:.72rem; letter-spacing:.18em }
.ts-col--now .ts-head b{ color:var(--warn-ink) }

.ts-row{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 0;
  font-size:.94rem;
  color:var(--on-paper-dim);
}
.ts-row + .ts-row{ border-top:1px solid var(--line-light) }
.ts-row span{ flex:1 }
.ts-row b{
  font-family:var(--display); font-weight:800;
  color:var(--on-paper); white-space:nowrap;
}
.ts-row--sum{
  margin-top:8px; padding-top:13px;
  border-top:2px solid var(--line-light-2) !important;
  font-size:1rem;
}
.ts-row--sum b{ font-size:1.16rem; color:var(--blue-ink) }
.ts-col--now .ts-row--sum b{ color:var(--warn-ink) }

.pain-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
}
.pain .tag{ margin-bottom:10px }

.known{
  margin-top:clamp(28px,4vw,44px);
  padding:30px 32px;
  border:1px solid var(--line-light);
  border-radius:var(--rad-lg);
  background:linear-gradient(180deg, rgba(var(--blue-rgb),.05), rgba(var(--blue-rgb),.02));
  box-shadow:var(--sh-sm);
}
.known-title{
  margin:0 0 14px;
  font-family:var(--display); font-weight:800;
  font-size:1.05rem;
}
.known-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.known-list li{
  position:relative; padding-left:30px;
  font-size:.96rem; color:var(--on-paper-dim);
}
.known-list .x{
  position:absolute; left:0; top:.36em;
  width:18px; height:18px; border-radius:50%;
  background:rgba(192,57,43,.12);
}
.known-list .x::before,
.known-list .x::after{
  content:''; position:absolute; left:5px; right:5px; top:calc(50% - .75px); height:1.5px;
  border-radius:1px; background:var(--warn);
}
.known-list .x::before{ transform:rotate(45deg) }
.known-list .x::after{ transform:rotate(-45deg) }
.known-note{
  margin:18px 0 0; padding-top:18px;
  border-top:1px solid var(--line-light);
  font-size:.98rem; color:var(--on-paper-dim);
}
.known-note strong{ color:var(--on-paper) }

/* =========================================================
   02 · HEBEL — Rollenteilung + Rechnung
   ========================================================= */
.roles{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2.4vw,26px);
  align-items:stretch;
}
@media (max-width:820px){
  .roles{ grid-template-columns:1fr; gap:14px }
}
.role{
  position:relative;
  padding:28px 28px 30px;
  border:1px solid var(--line-dark);
  border-radius:var(--rad-lg);
  background:rgba(169,198,226,.06);
}
.role--him{ border-top:3px solid var(--blue) }
.role--you{ border-top:3px solid var(--blue-pale) }
.role-who{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:10px;
}
.role--you .role-who{ color:var(--blue-pale) }
.role h3{
  margin:0 0 12px;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.12rem,2.3vw,1.4rem);
  color:#fff; line-height:1.2;
}
.role p{ margin:0; font-size:.96rem }
.role-list{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px }
.role-list li{
  position:relative; padding-left:22px;
  font-size:.92rem; color:var(--on-ink-dim);
}
.role-list li::before{
  content:''; position:absolute; left:2px; top:.52em;
  width:7px; height:7px; border-radius:50%; background:var(--blue);
}
.role--you .role-list li::before{ background:var(--blue-pale) }

.roles-arrow{
  display:flex; align-items:center; justify-content:center;
  color:var(--blue-light);
}
.roles-arrow svg{ width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
@media (max-width:820px){ .roles-arrow svg{ transform:rotate(90deg); width:26px; height:26px } }

/* --- Die Rechnung: Beleg mit Punktfuehrung --- */
.calc{
  margin-top:clamp(34px,5vw,54px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  border:1px solid var(--line-dark-2);
  border-radius:var(--rad-lg);
  overflow:hidden;
  background:rgba(13,34,56,.55);
  backdrop-filter:blur(2px);
}
@media (max-width:860px){ .calc{ grid-template-columns:1fr } }
.calc-col{ padding:24px 24px 26px }
.calc-col + .calc-col{ border-left:1px solid var(--line-dark) }
@media (max-width:860px){
  .calc-col + .calc-col{ border-left:0; border-top:1px solid var(--line-dark) }
}
.calc-col--out{ background:rgba(46,123,196,.16) }

.calc-head{
  display:block;
  padding-bottom:11px; margin-bottom:12px;
  border-bottom:1px solid var(--line-dark);
  font-family:var(--display); font-weight:900;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-ink-mute);
}
.calc-col--out .calc-head{ color:var(--blue-light) }

/* Belegzeile: Bezeichnung links, Wert rechts, gepunktete Trennlinie
   darunter. Die Punkte laufen bewusst NICHT im Text mit — bei langen
   Bezeichnungen in schmalen Spalten bricht das sonst auseinander. */
.calc-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:9px 0;
  font-size:.88rem; color:var(--on-ink-dim);
  border-bottom:1px solid rgba(169,198,226,.12);
}
.calc-row span{ flex:1 1 auto; min-width:0; hyphens:auto }
.calc-row b{
  flex:0 0 auto;
  font-family:var(--display); font-weight:800;
  color:#fff; white-space:nowrap;
}
.calc-row--sum{
  margin-top:10px; padding-top:14px;
  border-top:2px solid var(--line-dark-2);
  border-bottom:0;
  align-items:center;
}
.calc-row--sum b{ font-size:1.28rem; color:var(--blue-light) }
.calc-col--out .calc-row--sum b{ font-size:1.6rem; color:#fff }
.calc-row--minus b{ color:#F0A99D }

.calc-note{
  grid-column:1 / -1;
  padding:14px 24px 18px;
  border-top:1px solid var(--line-dark);
  background:rgba(13,34,56,.5);
  font-size:.79rem; line-height:1.55;
  color:var(--on-ink-mute);
  margin:0;
}

/* =========================================================
   03 · DIE VIER KANAELE — Karten mit Budget-Skala
   ========================================================= */
.channels{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:16px;
}
.channel{
  position:relative;
  display:flex; flex-direction:column;
  padding:28px 26px 26px;
  background:var(--white);
  border:1px solid var(--line-light);
  border-radius:var(--rad-lg);
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* Fortschrittsband oben: waechst mit dem Budget */
.channel::before{
  content:''; position:absolute; top:0; left:0; height:3px;
  width:calc(var(--budget, 1) * 25%);
  background:linear-gradient(90deg, var(--blue-deep), var(--blue-light));
}
.channel:hover{ transform:translateY(-5px); box-shadow:var(--sh-md) }
@media (prefers-reduced-motion: reduce){ .channel:hover{ transform:none } }

.channel-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:16px;
}
.channel-no{
  font-family:var(--display); font-weight:800;
  font-size:.72rem; letter-spacing:.1em;
  color:var(--blue-ink);
  padding:5px 12px;
  background:rgba(var(--blue-rgb),.12);
  border-radius:100px;
}
.budget{
  display:inline-flex; gap:3px;
  font-family:var(--display); font-weight:900; font-size:.92rem;
}
.budget span{ color:var(--paper-3) }
.budget span.on{ color:var(--blue) }

.channel-icon{
  width:38px; height:38px; margin-bottom:14px;
  color:var(--blue);
}
.channel-icon svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }

.channel h3{
  margin:0 0 8px;
  font-family:var(--display); font-weight:800;
  font-size:1.14rem; letter-spacing:-.012em;
}
.channel p{ margin:0; font-size:.94rem; color:var(--on-paper-dim) }
.channel > p:not(.channel-foot){ flex:1 1 auto }
.channel-foot{
  margin-top:18px; padding-top:15px;
  border-top:1px solid var(--line-light);
  font-size:.82rem; color:var(--on-paper-mute);
}
.channel-foot b{ color:var(--blue-ink); font-weight:700 }

.parallel-note{
  margin-top:clamp(24px,3.4vw,38px);
  padding:22px 26px 22px 58px;
  position:relative;
  border:1px solid rgba(var(--blue-rgb),.18);
  border-radius:var(--rad-lg);
  background:rgba(var(--blue-rgb),.07);
  font-size:.97rem;
  color:var(--on-paper-dim);
}
.parallel-note::before{
  content:''; position:absolute; left:20px; top:21px;
  width:20px; height:20px; background:var(--blue);
  -webkit-mask:var(--icon-info) center/contain no-repeat;
  mask:var(--icon-info) center/contain no-repeat;
}
.parallel-note strong{ color:var(--on-paper) }

/* =========================================================
   04 · BLICK INS KIT — Seitenkaskade
   ========================================================= */
.peek-section{ overflow:hidden }
.cascade{
  display:flex;
  gap:clamp(8px, 1.4vw, 18px);
  justify-content:center;
  align-items:flex-end;
  padding:10px 0 0;
  perspective:1400px;
}
.cascade figure{
  margin:0;
  flex:0 0 auto;
  width:clamp(96px, 12vw, 158px);
  border-radius:3px;
  overflow:hidden;
  border:1px solid rgba(169,198,226,.24);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.85);
  /* Jede Seite steigt eine Stufe hoeher und kippt leicht weg. */
  transform:translateY(calc(var(--i) * -13px)) rotateY(calc(var(--i) * -2.6deg));
  transform-origin:bottom center;
  transition:transform .55s var(--ease), filter .55s var(--ease), opacity .55s var(--ease);
  filter:saturate(.94) brightness(calc(1 - var(--i) * .035));
  opacity:calc(1 - var(--i) * .07);
}
.cascade figure img{ width:100%; height:auto }
.cascade:hover figure{ filter:none; opacity:1 }
.cascade figure:hover{ transform:translateY(calc(var(--i) * -13px - 12px)) rotateY(0deg) scale(1.04); z-index:2 }
@media (prefers-reduced-motion: reduce){
  .cascade figure{ transition:none }
  .cascade figure:hover{ transform:translateY(calc(var(--i) * -13px)) }
}
@media (max-width:760px){
  .cascade{
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .cascade figure{
    width:min(46vw, 210px);
    transform:none; filter:none; opacity:1;
    scroll-snap-align:center;
  }
  .cascade figure:hover{ transform:none }
}

/* Massband unter der Kaskade */
.pagescale{
  display:grid; grid-template-columns:repeat(8, 1fr);
  margin-top:clamp(22px,3vw,34px);
  border-top:1px solid var(--line-dark);
}
.pagescale span{
  position:relative; text-align:center;
  padding:12px 4px 0;
  font-family:var(--display); font-weight:800;
  font-size:.68rem; letter-spacing:.14em;
  color:var(--on-ink-mute);
}
.pagescale span::before{
  content:''; position:absolute; top:-3px; left:50%; margin-left:-2px;
  width:4px; height:4px; border-radius:50%;
  background:rgba(169,198,226,.45);
}
.pagescale span:last-child::before{ background:var(--blue-light) }
.pagescale span:last-child{ color:var(--blue-light) }
@media (max-width:560px){ .pagescale span{ padding:12px 8px 0; font-size:.62rem } }

/* =========================================================
   05 · FUNNEL — wo Kandidaten verloren gehen
   ========================================================= */
.funnel{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  counter-reset:fn;
}
@media (max-width:900px){ .funnel{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .funnel{ grid-template-columns:1fr } }

.fn{
  counter-increment:fn;
  position:relative;
  padding:24px 20px 22px;
  border:1px solid var(--line-light);
  border-radius:var(--rad-lg);
  background:var(--white);
  box-shadow:var(--sh-sm);
}
/* Verbindungspfeil zwischen den Stufen */
.fn:not(:last-child)::after{
  content:''; position:absolute; right:-9px; top:50%; z-index:2;
  width:9px; height:9px;
  border-top:2px solid rgba(var(--blue-rgb),.55);
  border-right:2px solid rgba(var(--blue-rgb),.55);
  border-radius:2px;
  transform:translate(-1px,-50%) rotate(45deg);
}
@media (max-width:900px){ .fn:not(:last-child)::after{ display:none } }

.fn-no{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  font-family:var(--display); font-weight:900;
  font-size:.76rem;
  color:var(--blue-ink);
  background:rgba(var(--blue-rgb),.12);
  margin-bottom:12px;
}
.fn-no::before{ content:'0' counter(fn) }
.fn--leak .fn-no{ background:rgba(192,57,43,.11) }
.fn h3{
  margin:0 0 6px;
  font-family:var(--display); font-weight:800;
  font-size:1.04rem; letter-spacing:-.005em;
}
.fn p{ margin:0; font-size:.86rem; color:var(--on-paper-dim) }

/* Die Stufen, die am haeufigsten uebersprungen werden. */
.fn--leak{
  border-color:rgba(192,57,43,.22);
  background:var(--warn-bg);
}
.fn--leak .fn-no{ color:var(--warn-ink) }
.fn--leak::before{
  content:'wird übersprungen';
  position:absolute; top:-11px; left:18px;
  padding:3px 11px;
  background:var(--warn); color:#fff;
  font-family:var(--display); font-weight:800;
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  border-radius:100px;
}

/* Sechs einzelne Karten mit Luft dazwischen statt eines Tabellenrasters. */
.mistakes{
  list-style:none; margin:clamp(34px,5vw,52px) 0 0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.mistakes li{
  padding:26px 24px;
  background:var(--white);
  border:1px solid var(--line-light);
  border-radius:var(--rad-lg);
  box-shadow:var(--sh-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.mistakes li:hover{ transform:translateY(-4px); box-shadow:var(--sh-md) }
@media (prefers-reduced-motion: reduce){ .mistakes li:hover{ transform:none } }

@media (max-width:900px){ .mistakes{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:560px){ .mistakes{ grid-template-columns:1fr } }

.mistakes li b{
  display:inline-block;
  font-family:var(--display); font-weight:800;
  font-size:.7rem; letter-spacing:.1em;
  color:var(--warn-ink); margin-bottom:12px;
  padding:5px 12px; border-radius:100px;
  background:rgba(192,57,43,.09);
}
.mistakes li h3{
  margin:0 0 6px;
  font-family:var(--display); font-weight:800; font-size:1.02rem;
}
.mistakes li p{ margin:0; font-size:.91rem; color:var(--on-paper-dim) }

/* =========================================================
   06 · REFERENZEN
   ========================================================= */
.cases{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:clamp(16px,2.4vw,26px);
}
.case{
  position:relative;
  display:flex; flex-direction:column;
  border:1px solid var(--line-dark);
  border-radius:var(--rad-lg);
  background:rgba(13,34,56,.62);
  backdrop-filter:blur(3px);
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .3s;
}
.case:hover{ transform:translateY(-5px); border-color:rgba(var(--blue-rgb),.5) }
@media (prefers-reduced-motion: reduce){ .case:hover{ transform:none } }

.case-head{ display:flex; gap:16px; align-items:center; padding:20px 22px; border-bottom:1px solid var(--line-dark) }
.case-photo{
  flex:0 0 auto; width:72px; height:90px;
  border-radius:4px; overflow:hidden;
  border:1px solid var(--line-dark-2);
}
.case-photo img{ width:100%; height:100%; object-fit:cover }
.case-tag{
  display:block;
  font-family:var(--display); font-weight:800;
  font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:5px;
}
.case-head h3{
  margin:0;
  font-family:var(--display); font-weight:900;
  font-size:1.26rem; color:#fff; letter-spacing:-.015em;
}

.case-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line-dark);
}
.case-stats > div{
  padding:16px 12px;
  text-align:center;
}
.case-stats > div + div{ border-left:1px solid var(--line-dark) }
.case-stats b{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:clamp(1.02rem,2.2vw,1.32rem);
  color:var(--blue-light); line-height:1.15;
}
.case-stats small{
  display:block; margin-top:4px;
  font-size:.69rem; line-height:1.35;
  color:var(--on-ink-mute);
}

.case-body{ padding:20px 22px 22px; display:grid; gap:12px; flex:1 }
.case-body h4{
  margin:0 0 3px;
  font-family:var(--display); font-weight:800;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-pale);
}
.case-body p{ margin:0; font-size:.92rem; color:var(--on-ink-dim) }

.case-lever{
  margin:0; padding:16px 22px;
  border-top:1px solid var(--line-dark);
  background:rgba(46,123,196,.14);
}
.case-lever b{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue-light); margin-bottom:6px;
}
.case-lever p{
  margin:0;
  font-family:var(--display); font-weight:700;
  font-size:.96rem; line-height:1.4; color:#fff;
}

/* =========================================================
   07 · WEITERE REFERENZEN
   ========================================================= */
.stimmen-cta{ margin-top:8px }

/* =========================================================
   08 · AUTOR
   ========================================================= */
.author{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,4vw,56px);
  align-items:center;
}
@media (max-width:840px){ .author{ grid-template-columns:1fr } }

.author-media{ position:relative; margin:0 }
.author-media figcaption{
  margin-top:16px;
  font-size:.82rem; line-height:1.6; color:var(--on-ink-mute);
}
.author-media figcaption b{ color:var(--on-ink-dim); font-weight:600 }
.author-media img{
  width:100%; height:auto;
  border-radius:24px;
  border:1px solid rgba(169,198,226,.16);
}
/* Weicher Rahmen statt Eckwinkel */
.author-media img{ box-shadow:var(--sh-lg) }

.author-copy .h2{ margin:16px 0 0 }
.author-copy p{ margin:16px 0 0; font-size:1rem; color:var(--on-ink-dim) }
.author-cta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px }

.author-facts{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; gap:0;
  border-top:1px solid var(--line-dark);
}
.author-facts li{
  display:flex; gap:14px; align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--line-dark);
  font-size:.94rem; color:var(--on-ink-dim);
}
.author-facts b{
  flex:0 0 auto;
  font-family:var(--display); font-weight:900;
  font-size:.72rem; letter-spacing:.14em;
  color:var(--blue-light);
  min-width:34px;
}

/* =========================================================
   09 · ABLAUF — drei Schritte auf einer Zeitachse
   ========================================================= */
.how{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  position:relative;
}
/* Spitze am Ende der Achse — sonst laeuft die Linie hinter dem letzten
   Punkt ins Leere. */
.how::after{
  content:''; position:absolute; top:-6px; right:-1px;
  width:11px; height:11px;
  border-top:2px solid var(--line-dark-2);
  border-right:2px solid var(--line-dark-2);
  transform:rotate(45deg);
}
@media (max-width:820px){
  .how::after{
    top:auto; bottom:-1px; right:auto; left:-6px;
    transform:rotate(135deg);
  }
}
@media (max-width:820px){ .how{ grid-template-columns:1fr } }

.how-step{
  position:relative;
  padding:34px 24px 26px;
  border-top:2px solid var(--line-dark-2);
}
@media (max-width:820px){
  .how-step{ border-top:0; border-left:2px solid var(--line-dark-2); padding:6px 0 26px 26px }
}
.how-step::before{
  content:''; position:absolute; top:-7px; left:24px;
  width:12px; height:12px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 5px rgba(46,123,196,.22);
}
@media (max-width:820px){ .how-step::before{ top:4px; left:-7px } }

.how-num{
  display:block;
  font-family:var(--display); font-weight:900;
  font-size:.72rem; letter-spacing:.2em;
  color:var(--blue-light); margin-bottom:9px;
}
.how-step h3{
  margin:0 0 7px;
  font-family:var(--display); font-weight:800;
  font-size:1.18rem; color:#fff;
}
.how-step p{ margin:0; font-size:.94rem; color:var(--on-ink-dim) }

.steps-cta{ margin-top:clamp(30px,4vw,44px); display:flex; flex-wrap:wrap; gap:12px }

/* =========================================================
   10 · FAQ
   ========================================================= */
.faq-wrap{
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(26px,4vw,58px);
  align-items:start;
}
@media (max-width:880px){ .faq-wrap{ grid-template-columns:1fr } }
.faq-head .h2{ margin:16px 0 22px }

.faq-list{ display:grid; gap:0; border-top:1px solid var(--line-light-2) }

.faq-item{
  border-bottom:1px solid var(--line-light-2);
  background:transparent;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex; align-items:flex-start; gap:14px;
  padding:19px 2px;
  font-family:var(--display); font-weight:800;
  font-size:1.02rem; line-height:1.35;
  color:var(--on-paper);
  transition:color .2s;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary:hover{ color:var(--blue-ink) }
.faq-item summary::after{
  content:''; flex:0 0 auto; margin-left:auto;
  width:15px; height:15px; margin-top:5px;
  border-right:2px solid var(--blue);
  border-bottom:2px solid var(--blue);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(-135deg) }
.faq-item[open] summary{ color:var(--blue-ink) }
.faq-a{ padding:0 2px 21px 0 }
.faq-a p{ margin:0; font-size:.97rem; color:var(--on-paper-dim) }

/* =========================================================
   11 · FINALER CTA
   ========================================================= */
.final-cta{
  position:relative;
  background:var(--ink);
  color:var(--on-ink);
  text-align:center;
  overflow:hidden;
}
.final-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(46,123,196,.36), transparent 66%),
    linear-gradient(180deg, #0B1D30, var(--ink));
}
.final-bg .hero-grid{ mask-image:radial-gradient(90% 80% at 50% 0%, #000 25%, transparent 78%) }
.final-inner{ max-width:820px; margin-inline:auto }
.final-title{ color:#fff }
.final-cta .lead{ margin:20px auto 30px; max-width:56ch; color:var(--on-ink-dim); font-size:1.06rem }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:#0A1C2E;
  color:var(--on-ink-dim);
  border-top:1px solid var(--line-dark);
  padding:38px 0;
}
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px;
}
.footer-brand img{ width:112px; height:auto }
.footer-copy{ margin:0; font-size:.86rem }
.footer-links{ display:flex; flex-wrap:wrap; gap:18px; font-size:.86rem }
.footer-links a{ text-decoration:none; color:var(--on-ink-dim); transition:color .2s }
.footer-links a:hover{ color:var(--blue-light) }

/* =========================================================
   STICKY CTA (mobil)
   ========================================================= */
.sticky-cta{
  position:fixed; left:12px; right:12px; bottom:12px; z-index:105;
  display:none; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 12px 11px 16px;
  background:rgba(13,34,56,.94);
  backdrop-filter:blur(14px);
  border:1px solid var(--line-dark-2);
  border-radius:var(--rad);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.8);
  transform:translateY(130%);
  transition:transform .45s var(--ease);
}
.sticky-cta.show{ transform:none }
.sticky-cta-text{ display:grid; line-height:1.2; min-width:0 }
.sticky-cta-text b{
  font-family:var(--display); font-weight:800; font-size:.86rem; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sticky-cta-text small{ font-size:.72rem; color:var(--on-ink-mute) }
@media (max-width:760px){ .sticky-cta{ display:flex } }
@media (max-width:760px){ body{ padding-bottom:0 } }

/* =========================================================
   CONSENT-BANNER
   ========================================================= */
/* Schwebende Karte, nicht randlose Leiste — dieselbe Form wie auf der
   Skript-Landingpage, nur in der blauen Palette. consent.js misst die
   Hoehe selbst (`--cc-h`), die Opt-In-Seite haelt sie damit frei. */
.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:130;
  padding:16px;
  transform:translateY(120%);
  transition:transform .5s var(--ease);
}
.cc.show{ transform:translateY(0) }
.cc-inner{
  max-width:940px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:18px 22px;
  background:rgba(11,29,48,.96);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid var(--line-dark-2);
  border-radius:var(--rad-lg);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.85);
}
.cc-text{ margin:0; flex:1 1 320px; font-size:.86rem; line-height:1.55; color:var(--on-ink-dim) }
.cc-text a{ color:var(--blue-light); text-decoration:underline; text-underline-offset:2px }
.cc-actions{ display:flex; flex-wrap:wrap; gap:10px }
@media (max-width:760px){
  .cc-actions{ width:100% }
  .cc-actions .btn{ flex:1 }
}

/* =========================================================
   SEITENFAECHER
   Wird nur noch von der Opt-In-Seite gebraucht; die Landingpage
   zeigt die Seiten als Kaskade (.cascade).
   ========================================================= */
.peek-fan{
  --n:  5;                       /* sichtbare Seiten */
  --pw: min(210px, 20vw);        /* Breite einer Seite */
  --step: 62%;                   /* Versatz, relativ zur Seitenbreite */
  position:relative;
  height:calc(var(--pw) / 0.704 + 26px);
  margin-top:8px;
}
.peek-page{
  position:absolute; top:13px; left:0;
  width:var(--pw);
  border-radius:4px;
  overflow:hidden;
  transform-origin:50% 60%;
  transform:
    translateX(calc(var(--i) * var(--step)))
    rotate(var(--r,0deg))
    scale(var(--s,1));
  box-shadow:0 26px 60px -26px rgba(0,0,0,.95), 0 0 0 1px rgba(169,198,226,.14);
  transition:filter .5s var(--ease), opacity .5s var(--ease);
}
.peek-page img{ width:100%; height:auto; pointer-events:none; user-select:none; }
.peek-page:nth-child(1){ z-index:5; --r:-2deg; }
.peek-page:nth-child(2){ z-index:4; --r:1.4deg; }
.peek-page:nth-child(3){ z-index:3; --r:2.6deg; --s:.965; }
.peek-page:nth-child(4){ z-index:2; --r:3.6deg; --s:.935; }
.peek-page:nth-child(5){ z-index:1; --r:4.6deg; --s:.905; }
/* =========================================================
   OPT-IN-SEITE (optin.html)
   Eigenstaendige Seite hinter jedem CTA. Kein Header ausser
   dem Logo, Footer bleibt: Logo / Inhalt / Footer sitzen in
   einem Raster ueber der vollen Viewporthoehe. Passt alles,
   scrollt nichts — der Normalfall.
   Die Karte scrollt nie innen. Fehlt die Hoehe (flaches
   Fenster, geoeffnete Bildschirmtastatur), waechst das Raster
   ueber den Viewport hinaus und die ganze Seite scrollt. Ein
   Formular in einem eigenen Scrollfenster gibt es damit
   nirgends — und abgeschnitten wird auch nichts.
   ========================================================= */
html.optin, .optin-page{ min-height:100%; }
html.optin{ scroll-behavior:auto; }
.optin-page{ background:var(--ink); }

.opt-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.opt-photo, .opt-photo img{ position:absolute; inset:0; width:100%; height:100%; }
.opt-photo img{ object-fit:cover; object-position:50% 42%; }
/* Dunkel genug fuer weissen Text, hell genug, dass das Foto noch
   zu sehen ist — deshalb nur ein leichter Querverlauf ueber den
   Grundschleier. */
.opt-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(13,34,56,.80) 0%, rgba(13,34,56,.46) 40%, rgba(13,34,56,.88) 100%),
    linear-gradient(90deg, rgba(13,34,56,.76) 0%, rgba(13,34,56,.2) 58%, rgba(13,34,56,.5) 100%);
}
/* Unter 940px liegt die Karte fast ueber dem ganzen Bild — dort darf
   der Hintergrund ruhiger sein. */
@media (max-width:939.98px){
  .opt-veil{
    background:
      linear-gradient(180deg, rgba(13,34,56,.74) 0%, rgba(13,34,56,.5) 45%, rgba(13,34,56,.9) 100%);
  }
}
.opt-bg .hero-grid, .opt-bg .hero-noise{ position:absolute; }

/* --- Raster ueber die volle Hoehe --- */
.opt-shell{
  position:relative; z-index:1;
  min-height:100dvh;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(12px,1.8vh,20px) clamp(16px,4vw,40px)
          calc(clamp(10px,1.5vh,18px) + env(safe-area-inset-bottom) + var(--cc-h,0px));
  transition:padding-bottom .45s var(--ease);
  gap:clamp(8px,1.4vh,16px);
}

.opt-head{ display:flex; justify-content:center; }
.opt-brand{ display:inline-flex; align-items:center; min-height:44px; padding:4px; }
.opt-brand img{ height:clamp(30px,4vh,40px); width:auto; }

/* Kein min-height:0 mehr in der Kette Shell -> Hauptzeile -> Raster ->
   Karte: keines der Glieder darf unter seinen Inhalt schrumpfen. Reicht
   die Viewporthoehe nicht, waechst die Shell und die Seite scrollt. */
.opt-main{ display:flex; }
.opt-grid{
  flex:1 1 auto;
  width:100%; max-width:1080px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(18px,3.4vh,34px);
}

/* --- Linke Spalte --- */
.opt-aside{ flex:0 0 auto; max-width:520px; min-width:0; }
.opt-aside .eyebrow{ color:var(--blue); margin-bottom:.7rem; }
.opt-title{
  font-family:var(--display); font-weight:800;
  letter-spacing:-.028em; line-height:1.04;
  font-size:clamp(1.75rem,3.4vw + .4rem,3.15rem);
  color:var(--white); text-wrap:balance;
}
.opt-title .grad{ display:block; color:var(--blue-light); }
.opt-points{ list-style:none; margin-top:clamp(14px,2.4vh,24px); display:grid; gap:.62rem;
  text-shadow:0 1px 12px rgba(0,0,0,.55); }
.opt-points li{
  position:relative; padding-left:30px;
  font-size:.95rem; line-height:1.5; color:var(--on-ink-dim);
}
.opt-points li::before{
  content:""; position:absolute; left:0; top:.34em;
  width:17px; height:17px; border-radius:50%;
  background:rgba(var(--blue-rgb),.18);
  border:1px solid rgba(var(--blue-rgb),.5);
}
.opt-points li::after{
  content:""; position:absolute; left:5px; top:calc(.34em + 5px);
  width:7px; height:4px;
  border-left:2px solid var(--blue-light); border-bottom:2px solid var(--blue-light);
  transform:rotate(-45deg);
}
/* --- Titelseite mit angedeutetem Rest des Kits ---
   Die Faecher-Mechanik der Landingpage (.peek-fan/.peek-page) wird
   uebernommen, aber enger gestellt: --step 62% waere hier ueber 600px
   breit und wuerde aus der Spalte laufen. Mit 34% liegen die Seiten
   dicht gestapelt, die Titelseite bleibt fast unverdeckt, und die
   unscharfen Kanten dahinter zeigen, dass da noch mehr kommt. */
.opt-fan{
  display:none;
  --n:  5;
  /* Hoehe UND Breite begrenzen die Seite. 22vh allein wuerde in einem
     schmalen, hohen Fenster einen Faecher ergeben, der aus der Spalte
     laeuft — die Seiten liegen absolut, max-width kappt sie nicht. Die
     13vw sind auf die schmalste Zweispalten-Lage gerechnet: dort bleibt
     die Spalte bei rund 338px, der Faecher misst das 2,36-fache einer
     Seite und muss darunter bleiben. */
  --pw: clamp(128px, min(22vh, 13vw), 205px);
  --step: 34%;
  width:calc(var(--pw) * (1 + (var(--n) - 1) * .34));
  max-width:100%;
  margin-top:clamp(16px,2.6vh,26px);
}
.opt-fan .peek-page{ border-radius:6px; }
/* Die Titelseite traegt die Spalte: ganz scharf, mit etwas mehr Schatten
   als die Seiten dahinter. Ab Seite 2 wird progressiv verwischt — die
   Werte sind schwaecher als auf der Landingpage, weil die Seiten hier
   kleiner sind und sonst zu Matsch zerlaufen. */
.opt-fan .peek-page:nth-child(1){
  box-shadow:0 26px 52px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.12);
}
.opt-fan .peek-page:nth-child(2){ filter:blur(1.6px); opacity:.6; }
.opt-fan .peek-page:nth-child(3){ filter:blur(3px);   opacity:.42; }
.opt-fan .peek-page:nth-child(4){ filter:blur(4.5px); opacity:.3;  }
.opt-fan .peek-page:nth-child(5){ filter:blur(6px);   opacity:.2;  }

/* --- Formularkarte --- */
/* Der blaue Schein liegt als Schlagschatten unter der Karte, nicht als
   eigenes Element — so bleibt er auch dann vollstaendig, wenn die Karte
   der laengste Teil der Seite ist. */
.opt-card{
  flex:0 0 auto;
  width:100%; max-width:480px; min-width:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 58%, #E7EEF5 100%);
  border-radius:var(--rad-lg);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 -2px 0 rgba(var(--blue-rgb),.4) inset,
    0 42px 96px -40px rgba(0,0,0,.9),
    0 40px 80px -26px rgba(var(--blue-rgb),.62),
    0 18px 40px -14px rgba(var(--blue-rgb),.45),
    0 4px 14px -6px rgba(var(--blue-rgb),.3);
  padding:clamp(20px,3.2vh,32px) clamp(18px,3vw,30px);
}
/* Die weicheren Abstaende der Landingpage kosten hier Hoehe. Solange das
   Consent-Banner unten Platz braucht, passt die Karte sonst nicht mehr in
   die 100dvh — deshalb sitzt sie etwas enger als die Karten draussen. */
.opt-card{ padding:clamp(16px,2.3vh,22px) clamp(18px,3vw,28px); }
.opt-form{ gap:clamp(9px,1.35vh,12px); }

.opt-card-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.24rem,2.2vw,1.5rem); letter-spacing:-.022em; line-height:1.16;
  color:var(--on-paper); margin-bottom:clamp(12px,1.8vh,16px);
}
/* Die Ueberschrift links steht nur breiten Fenstern zur Verfuegung.
   Darunter uebernimmt die Karte den Aufhaenger. */
.ct-eng{ display:none; }

.opt-form{ display:grid; gap:clamp(11px,1.7vh,15px); }
.opt-form[hidden]{ display:none; }
.fld-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fld{ display:grid; gap:6px; min-width:0; }
.fld label{
  font-family:var(--display); font-weight:700;
  font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--on-paper-dim);
}
.opt-form input[type="text"],
.opt-form input[type="email"],
.opt-form input[type="tel"]{
  width:100%; min-width:0;
  height:clamp(46px,6vh,52px);
  padding:0 14px;
  font-family:var(--sans); font-size:1rem; color:var(--on-paper);
  background:var(--white);
  border:1px solid var(--line-light-2); border-radius:var(--rad);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.opt-form input::placeholder{ color:var(--on-paper-mute); opacity:.8; }
.opt-form input:focus-visible{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(var(--blue-rgb),.22);
}

/* --- Telefonfeld mit Laenderwahl --- */
.tel-field{
  position:relative;
  display:flex; align-items:stretch;
  height:clamp(46px,6vh,52px);
  background:var(--white);
  border:1px solid var(--line-light-2); border-radius:var(--rad);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tel-field:focus-within{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(var(--blue-rgb),.22);
}
.opt-form .tel-field input[type="tel"]{
  height:100%; border:0; border-radius:0 var(--rad) var(--rad) 0;
  padding-left:10px; background:transparent;
}
.opt-form .tel-field input[type="tel"]:focus-visible{ box-shadow:none; }
.tel-country{
  display:flex; align-items:center; gap:.34rem;
  padding:0 9px 0 13px;
  background:transparent; border:0;
  border-right:1px solid var(--line-light);
  border-radius:var(--rad) 0 0 12px;
  cursor:pointer; color:var(--on-paper);
  font-family:var(--sans); font-size:.95rem;
  transition:background .2s var(--ease);
}
.tel-country:hover{ background:rgba(13,34,56,.045); }
.tel-country:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.tel-flag{ font-size:1.12rem; line-height:1; }
.tel-dial{ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tel-caret{ width:15px; height:15px; fill:none; stroke:var(--on-paper-mute); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .22s var(--ease); }
.tel-country[aria-expanded="true"] .tel-caret{ transform:rotate(180deg); }

.tel-list{
  position:absolute; left:0; bottom:calc(100% + 8px); z-index:30;
  width:min(320px,calc(100vw - 60px));
  max-height:min(266px,44vh); overflow-y:auto; overscroll-behavior:contain;
  margin:0; padding:6px; list-style:none;
  background:var(--white); border:1px solid var(--line-light-2);
  border-radius:var(--rad); box-shadow:0 26px 60px -22px rgba(13,34,56,.6);
}
.tel-list[hidden]{ display:none; }
.tel-opt{
  display:flex; align-items:center; gap:.6rem;
  padding:9px 10px; min-height:42px;
  border-radius:4px; cursor:pointer;
  font-size:.92rem; color:var(--on-paper);
}
.tel-opt:hover, .tel-opt.is-active{ background:rgba(var(--blue-rgb),.14); }
.tel-opt[aria-selected="true"]{ font-weight:600; }
.tel-opt .tel-opt-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tel-opt .tel-opt-dial{ color:var(--on-paper-mute); font-variant-numeric:tabular-nums; }

/* --- Hinweise und Fehlermeldungen ---
   Eine Zeile aus Symbol und Text, wie sie ein Formular ueblicherweise
   zeigt: der Hinweis ruhig in Grau, der Fehler in Rot, die Meldung zum
   ganzen Formular als eigener Kasten. Die Symbole liegen als Maske
   darunter und nehmen die Textfarbe an. */
.fld-err, .fld-hint{
  display:flex; align-items:flex-start; gap:6px;
  line-height:1.45;
}
.fld-err[hidden], .fld-hint[hidden]{ display:none; }
.fld-err::before, .fld-hint::before{
  content:''; flex:0 0 auto;
  width:14px; height:14px; margin-top:.14em;
  background:currentColor;
  -webkit-mask:var(--icon-warn) center/contain no-repeat;
  mask:var(--icon-warn) center/contain no-repeat;
}
.fld-err{
  font-size:.8rem; color:var(--warn-ink);
  animation:meldung-auf .2s var(--ease-out) both;
}
.fld-hint{ font-size:.76rem; color:var(--on-paper-mute); }
.fld-hint::before{
  -webkit-mask-image:var(--icon-info);
  mask-image:var(--icon-info);
  opacity:.75;
}

/* Betrifft die Meldung das ganze Formular, steht sie als Kasten da —
   sonst geht der eine rote Satz zwischen den Feldern unter. */
.fld-err--form{
  gap:9px; margin-top:2px;
  padding:10px 12px;
  font-size:.82rem;
  background:var(--warn-bg);
  border:1px solid var(--warn-line);
  border-radius:var(--rad);
}
.fld-err--form::before{ width:16px; height:16px; margin-top:.04em; color:var(--warn); }

@keyframes meldung-auf{
  from{ opacity:0; transform:translateY(-3px); }
  to  { opacity:1; transform:none; }
}

/* Fehlerzustand am Feld: derselbe Ring wie beim Fokus, nur in Rot —
   damit die Farbe nicht der einzige Traeger der Aussage bleibt, steht
   die Meldung darunter. Steht hinter dem Fokus-Stil, damit auch ein
   angefasstes Feld rot bleibt, solange die Meldung gilt. */
.fld.is-bad input,
.tel-field.is-bad,
.tel-field.is-bad:focus-within,
.opt-code.is-bad .code-boxes input{
  border-color:var(--warn);
  box-shadow:0 0 0 3px var(--warn-ring);
}
.fld.is-bad input:focus-visible,
.opt-code.is-bad .code-boxes input:focus-visible{
  border-color:var(--warn);
  box-shadow:0 0 0 3px var(--warn-ring);
}

/* --- Checkbox --- */
.fld-check{ display:flex; align-items:flex-start; gap:11px; margin-top:2px; }
.fld-check input[type="checkbox"]{
  position:relative;
  flex:0 0 auto; width:21px; height:21px; margin-top:1px;
  -webkit-appearance:none; appearance:none;
  background:var(--white);
  border:1px solid var(--line-light-2); border-radius:6px;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.fld-check input[type="checkbox"]:checked{
  background:var(--blue);
  border-color:var(--blue-deep);
}
.fld-check input[type="checkbox"]:checked::after{
  content:""; display:block;
  width:10px; height:5px; margin:5px 0 0 4px;
  border-left:2px solid #ffffff; border-bottom:2px solid #ffffff;
  transform:rotate(-45deg);
}
.fld-check input[type="checkbox"]:focus-visible{
  outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(var(--blue-rgb),.22);
}
.fld-check.is-bad input[type="checkbox"]{
  border-color:var(--warn);
  box-shadow:0 0 0 3px var(--warn-ring);
}
.fld-check label{
  font-family:var(--sans); font-weight:400; text-transform:none; letter-spacing:0;
  font-size:.82rem; line-height:1.5; color:var(--on-paper-dim); cursor:pointer;
}
.fld-check label a{ color:var(--blue-ink); text-decoration:underline; text-underline-offset:2px; }

.opt-form .btn{ margin-top:4px; }
.opt-note{ font-size:.76rem; line-height:1.45; color:var(--on-paper-mute); text-align:center; }

/* Spamfalle */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Erfolgszustand --- */
.opt-done{ display:grid; gap:14px; justify-items:center; text-align:center; padding:clamp(6px,1.6vh,16px) 0; }
.opt-done[hidden]{ display:none; }
.opt-done-icon{
  display:grid; place-items:center;
  width:58px; height:58px; border-radius:50%;
  background:rgba(var(--blue-rgb),.16);
  border:1px solid rgba(var(--blue-rgb),.45);
}
.opt-done-icon svg{ width:26px; height:26px; fill:none; stroke:var(--blue-ink); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }
.opt-done .opt-card-title{ margin-bottom:0; }
.opt-done-text{ font-size:.92rem; line-height:1.55; color:var(--on-paper-dim); max-width:34ch; }
.opt-back{ font-size:.83rem; color:var(--on-paper-mute); text-decoration:underline; text-underline-offset:3px; }
.opt-back:hover{ color:var(--blue-ink); }

/* --- Footer --- */
.opt-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px clamp(14px,3vw,26px);
  padding-top:clamp(6px,1.1vh,11px);
  border-top:1px solid var(--line-dark);
  text-align:center;
}
.opt-foot .footer-links{ gap:clamp(12px,2.4vw,20px); }
.opt-ai{ font-size:.72rem; font-style:italic; color:var(--on-ink-mute); flex-basis:100%; }

/* --- Zwei Spalten, sobald Platz da ist --- */
@media (min-width:940px){
  .opt-grid{ flex-direction:row; align-items:center; justify-content:center; gap:clamp(34px,5vw,72px); }
  .opt-aside{ flex:1 1 0; position:relative; }
  /* Weicher Lichtkegel hinter dem Text: haelt Ueberschrift und Punkte
     lesbar, ohne das ganze Foto abzudunkeln. */
  .opt-aside::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    inset:-14% -18% -12% -24%;
    background:radial-gradient(ellipse 68% 62% at 40% 50%,
      rgba(13,34,56,.9) 0%, rgba(13,34,56,.68) 46%, rgba(13,34,56,0) 82%);
  }
  .opt-card{ flex:0 1 480px; }
  .opt-foot{ justify-content:space-between; text-align:left; }
  .opt-ai{ flex-basis:auto; }
}
/* Erst ab genug Breite UND Hoehe — darunter traegt die Karte die Seite
   allein und der Faecher wuerde nur Hoehe kosten. */
@media (min-width:940px) and (min-height:720px){
  .opt-fan{ display:block; }
}

/* Unter 940px traegt die Karte die Seite — Aufzaehlung und Cover
   wuerden nur Hoehe kosten. Die Ueberschrift bleibt, aber einzeilig
   gesetzt und ohne harten Umbruch. */
/* Unter 940px traegt die Karte die Seite allein: Nebenspalte raus,
   Aufhaenger in die Karte, Abstaende enger — sonst passt das
   Formular nicht ohne Scrollen auf ein Handydisplay. */
@media (max-width:939.98px){
  /* Die Ueberschrift steht auch hier ueber der Karte, nicht darin — mit
     derselben Schrift und derselben Akzentfarbe wie im Breiten. Vom
     Rest der linken Spalte bleibt nichts: Punkte und Faecher haben
     neben dem Formular keinen Platz. Gleiche Breite wie die Karte,
     mittig gesetzt: sie steht ueber der Karte, nicht neben ihr, und
     bekommt so auf beiden Seiten denselben Rand. */
  .opt-aside{ display:block; width:100%; max-width:480px; text-align:center; }
  .opt-aside .eyebrow,
  .opt-points,
  .opt-fan{ display:none; }
  /* Der Kartentitel des Formulars faellt dafuer weg — aber nur dieser:
     „Kurz bestaetigen" in Schritt 2 traegt dieselbe Klasse. */
  #formTitel{ display:none; }
  /* In Schritt 2 fuehrt die Karte selbst; die Frage nach der Adresse
     gehoert dann nicht mehr darueber. */
  .opt-grid.zeigt-code .opt-aside{ display:none; }

  .ct-weit{ display:none; }
  .ct-eng{ display:inline; }
  .opt-card{ padding:20px 18px; }
  .opt-card-title{ font-size:1.28rem; margin-bottom:15px; }
  .opt-form{ gap:12px; }
  .fld{ gap:4px; }
  .fld label{ font-size:.74rem; }
  .opt-form input[type="text"],
  .opt-form input[type="email"],
  .opt-form input[type="tel"],
  .tel-field{ height:48px; }
  .opt-foot{ gap:4px 11px; padding-top:9px; }
  .opt-foot .footer-copy, .opt-foot .footer-links a, .opt-ai{ font-size:.7rem; }
  .opt-foot .footer-links{ gap:11px; }
  .opt-ai{ flex-basis:auto; }
}

/* Flache Fenster: alles enger schnueren, damit nichts scrollt. */
@media (max-height:700px){
  .opt-aside .eyebrow{ display:none; }
  .opt-card{ padding:15px 18px; }
  .opt-card-title{ font-size:1.1rem; margin-bottom:11px; }
  .opt-form{ gap:9px; }
  .fld{ gap:3px; }
  .opt-form input[type="text"],
  .opt-form input[type="email"],
  .opt-form input[type="tel"],
  .tel-field{ height:46px; }
  .opt-form .btn-lg{ min-height:48px; font-size:.94rem; }
  .fld-check label{ font-size:.76rem; line-height:1.42; }
  /* Auf flachen Displays weichen die Hinweiszeilen der Hoehe. */
  .opt-note, .fld-hint{ display:none; }
}
@media (max-height:700px) and (max-width:939.98px){
  .opt-shell{ gap:8px; }
  .opt-card{ padding:13px 16px; }
}
@media (max-height:660px) and (max-width:939.98px){
  .opt-shell{ gap:6px; }
  .opt-card{ padding:11px 15px; }
  .opt-card-title{ margin-bottom:9px; }
}
@media (max-width:379.98px){
  .opt-foot .footer-copy, .opt-foot .footer-links a, .opt-ai{ font-size:.67rem; }
  .opt-foot .footer-links{ gap:9px; }
  .opt-foot{ gap:3px 9px; }
}
@media (max-height:600px){
  .opt-aside{ display:none; }
  /* Faellt die linke Spalte ganz weg, traegt wieder die Karte die
     Ueberschrift — sonst stuende keine mehr da. `:not([hidden])`, damit
     optin.js sie in Schritt 2 weiterhin wegblenden kann. */
  #formTitel:not([hidden]){ display:block; }
  .opt-brand img{ height:30px; }
  .opt-ai{ display:none; }
}

/* Vor- und Nachname bleiben nebeneinander, solange die Spalten nicht
   unter ~110px fallen — gestapelt wuerden sie zu viel Hoehe kosten. */
@media (max-width:400px){
  .tel-country{ padding:0 7px 0 10px; }
  .opt-form input[type="text"],
  .opt-form input[type="email"],
  .opt-form input[type="tel"]{ font-size:1rem; padding:0 12px; }
}

@media (prefers-reduced-motion:reduce){
  .opt-title .grad{ animation:none; }
  .fld-err{ animation:none; }
}

/* =========================================================
   SCHRITT 2 — CODE AUS DER SMS (optin.html)
   ========================================================= */
.opt-code{ display:grid; gap:clamp(12px,1.9vh,16px); }
.opt-code[hidden]{ display:none; }

.opt-zurueck{
  justify-self:start;
  display:inline-flex; align-items:center; gap:.3rem;
  min-height:36px; padding:0 8px 0 4px; margin:-4px 0 -6px -4px;
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:.8rem; color:var(--on-paper-mute);
  border-radius:6px;
  transition:color .2s var(--ease);
}
.opt-zurueck:hover{ color:var(--blue-ink); }
.opt-zurueck:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
.opt-zurueck svg{ width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

.opt-code .opt-card-title{ margin-bottom:0; }
.opt-code-text{ font-size:.88rem; line-height:1.55; color:var(--on-paper-dim); }
.opt-code-text b{ color:var(--on-paper); font-weight:600; white-space:nowrap; }

.opt-code-form{ display:grid; gap:clamp(11px,1.7vh,15px); }

.code-boxes{ display:flex; gap:clamp(6px,2.2vw,10px); }
.code-boxes input{
  flex:1 1 0; min-width:0; width:100%;
  height:clamp(50px,7vh,60px); padding:0;
  text-align:center;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.15rem,4.4vw,1.45rem);
  font-variant-numeric:tabular-nums;
  color:var(--on-paper); background:var(--white);
  border:1px solid var(--line-light-2); border-radius:var(--rad);
  -webkit-appearance:none; appearance:none;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.code-boxes input:focus-visible{
  outline:none; border-color:var(--blue); transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(var(--blue-rgb),.22);
}

.opt-code-neu{ text-align:center; font-size:.8rem; color:var(--on-paper-mute); }
.opt-code-neu button{
  background:none; border:0; padding:2px 4px; cursor:pointer;
  font:inherit; color:var(--blue-ink);
  text-decoration:underline; text-underline-offset:2px;
  border-radius:6px;
}
.opt-code-neu button:hover{ color:var(--blue-deep); }
.opt-code-neu button:disabled{ color:var(--on-paper-mute); text-decoration:none; cursor:default; }
.opt-code-neu button:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

/* =========================================================
   DANKESEITE (danke.html)
   Gleicher Rahmen wie die Opt-In-Seite, aber ohne Scroll-Sperre:
   hier darf die Seite wachsen, wenn der Inhalt es braucht.
   ========================================================= */
.danke-page{ background:var(--ink); color:var(--on-ink); }
.dk-shell{ height:auto; min-height:100dvh; }
/* Hier steht Fliesstext direkt auf dem Foto, nicht nur eine Ueberschrift —
   der Schleier darf deshalb kraeftiger sein als auf der Opt-In-Seite. */
.danke-page .opt-veil{
  background:
    linear-gradient(180deg, rgba(13,34,56,.86) 0%, rgba(13,34,56,.66) 42%, rgba(13,34,56,.92) 100%),
    linear-gradient(90deg, rgba(13,34,56,.5) 0%, rgba(13,34,56,.34) 55%, rgba(13,34,56,.6) 100%);
}

.dk-grid{
  flex:1 1 auto; min-height:0;
  width:100%; max-width:1080px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(22px,4vh,44px);
  text-align:center;
}

/* --- Cover mit Strahlenkranz --- */
.dk-visual{ position:relative; flex:0 0 auto; display:grid; place-items:center; isolation:isolate; }
.dk-cover{
  width:clamp(128px,20vh,208px); height:auto;
  border-radius:6px;
  transform:rotate(-3.5deg);
  box-shadow:0 34px 70px -26px rgba(0,0,0,.9), 0 0 46px -8px rgba(var(--blue-rgb),.55);
}
.dk-halo{
  position:absolute; z-index:-1; inset:-38%;
  background:radial-gradient(circle, rgba(var(--blue-rgb),.5) 0%, rgba(var(--blue-rgb),.12) 42%, transparent 70%);
  filter:blur(26px);
}
/* Konzentrische Konstruktionsringe statt Strahlenkranz — dieselbe
   Bauplan-Sprache wie auf der Landingpage. */
.dk-rays{
  position:absolute; z-index:-2; width:210%; aspect-ratio:1;
  background:repeating-radial-gradient(circle,
    rgba(var(--blue-rgb),.26) 0 1px, transparent 1px 34px);
  -webkit-mask-image:radial-gradient(circle, #000 10%, transparent 64%);
  mask-image:radial-gradient(circle, #000 10%, transparent 64%);
  animation:dkDreh 90s linear infinite;
}
@keyframes dkDreh{ to{ transform:rotate(360deg); } }

/* Einmaliger Funkenflug beim Aufbau — kein Dauerlauf. */
.dk-funke{
  position:absolute; left:50%; top:50%;
  width:7px; height:7px; border-radius:50%;
  background:var(--blue-pale);
  box-shadow:0 0 12px rgba(var(--blue-rgb),.95);
  opacity:0;
  animation:dkFunke 1.25s var(--ease-out) both;
}
.dk-funke.f1{ --dx:-132px; --dy:-96px; animation-delay:.20s; }
.dk-funke.f2{ --dx: 128px; --dy:-104px; animation-delay:.28s; }
.dk-funke.f3{ --dx:-150px; --dy:  58px; animation-delay:.36s; }
.dk-funke.f4{ --dx: 146px; --dy:  66px; animation-delay:.24s; }
.dk-funke.f5{ --dx: -46px; --dy:-138px; animation-delay:.42s; }
.dk-funke.f6{ --dx:  62px; --dy: 134px; animation-delay:.33s; }
@keyframes dkFunke{
  0%  { transform:translate(-50%,-50%) scale(.25); opacity:0; }
  22% { opacity:1; }
  100%{ transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity:0; }
}

/* --- Text --- */
.dk-copy{
  flex:0 1 auto; max-width:560px; min-width:0; position:relative;
  display:grid; gap:clamp(11px,1.7vh,16px); justify-items:center;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
/* Weicher Lichtkegel hinter dem Text — wie auf der Opt-In-Seite. */
.dk-copy::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-12% -16%;
  background:radial-gradient(ellipse 62% 60% at 50% 50%,
    rgba(13,34,56,.76) 0%, rgba(13,34,56,.5) 50%, rgba(13,34,56,0) 80%);
}
/* Die Akzentzeile bleibt schattenfrei, sonst wirkt das Blau stumpf. */
.dk-title .grad{ text-shadow:none; }

.dk-badge{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:7px 15px 7px 11px; border-radius:2px;
  background:rgba(var(--blue-rgb),.14);
  border:1px solid rgba(var(--blue-rgb),.42);
  font-family:var(--display); font-weight:700;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-light);
}
.dk-badge svg{ width:15px; height:15px; fill:none; stroke:var(--blue-light);
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

.dk-title{
  font-family:var(--display); font-weight:800;
  letter-spacing:-.028em; line-height:1.05;
  font-size:clamp(1.85rem,3.1vw + .7rem,3.3rem);
  color:var(--white); text-wrap:balance;
}
.dk-title .grad{ display:block; color:var(--blue-light); }
.dk-sub{ font-size:clamp(.96rem,1.4vw,1.08rem); line-height:1.65; color:var(--on-ink-dim); max-width:46ch; }
.dk-cta{ margin-top:4px; min-width:min(100%,300px); }
.dk-mail{ font-size:.83rem; line-height:1.55; color:var(--on-ink-dim); max-width:48ch; }
.dk-mail span{ color:var(--on-ink); }

/* Ohne Download-Knopf traegt dieser Absatz die Aussage der Seite —
   er bekommt das Gewicht, das vorher der Knopf hatte. */
.dk-mail--gross{
  font-size:clamp(.92rem,1.7vh,1.02rem);
  line-height:1.6;
  color:var(--on-ink);
  border-left:2px solid var(--blue);
  padding-left:clamp(12px,1.6vw,18px);
  margin-top:clamp(6px,1.4vh,14px);
}
.dk-mail--gross span{ color:var(--blue-light); font-weight:600; }

.dk-steps{
  list-style:none; counter-reset:dk;
  display:grid; gap:.5rem; margin-top:clamp(6px,1.4vh,14px);
  text-align:left; width:100%;
}
.dk-steps li{
  counter-increment:dk;
  position:relative; padding-left:34px;
  font-size:.88rem; line-height:1.5; color:var(--on-ink-dim);
}
.dk-steps li b{ color:var(--on-ink); font-weight:600; }
.dk-steps li::before{
  content:counter(dk);
  position:absolute; left:0; top:.05em;
  display:grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  background:rgba(var(--blue-rgb),.16);
  border:1px solid rgba(var(--blue-rgb),.45);
  font-family:var(--display); font-size:.72rem; font-weight:700; color:var(--blue-light);
}

.danke-page .opt-back{ color:var(--on-ink-mute); }
.danke-page .opt-back:hover{ color:var(--blue); }

@media (min-width:900px){
  .dk-grid{ flex-direction:row; align-items:center; justify-content:center; gap:clamp(40px,5.5vw,76px); text-align:left; }
  .dk-copy{ justify-items:start; }
  .dk-steps{ margin-top:6px; }
  .dk-cover{ width:clamp(180px,26vh,262px); }
}

@media (max-height:700px){
  .dk-steps{ display:none; }
  .dk-cover{ width:clamp(112px,17vh,168px); }
}

@media (prefers-reduced-motion:reduce){
  .dk-rays{ animation:none; }
  .dk-funke{ display:none; }
  .dk-title .grad{ animation:none; }
}