/* ============================================================================
   katew Leadmagnet-Seiten - Design-System v3 (Basis v2, Schicht v3 am Ende)
   Gebaut am 17.09.2026, gilt fuer genau vier Seiten:
     /so-funktioniert-katew   public/lm/so-funktioniert.html
     /check/fahrdienst        public/lm/fahrdienst-check.html
     /hilfe/fahrten-mappe     public/lm/fahrten-mappe.html
     /fuer-einrichtungen/fahrten-rechner  public/lm/fahrten-rechner.html
   ----------------------------------------------------------------------------
   Diese Datei ist die PLAIN-CSS-Fassung der Token-Schicht aus
   styles/globals.css (@layer components, PR #273). Die vier Leadmagnet-Seiten
   laufen nicht durch pages/_app.js und sehen Tailwind nie, deshalb liegt hier
   eine 1:1-Uebersetzung. Werte NICHT abweichen lassen: wer globals.css aendert,
   aendert diese Datei mit.

   DER ORDNER /lm/assets/ TRAEGT max-age=31536000, immutable (next.config.js).
   Jede spaetere Aenderung laeuft ueber einen NEUEN Dateinamen mit neuem
   Inhaltshash, nie ueber Ueberschreiben. Wer diese Datei an Ort und Stelle
   aendert, erreicht bestehende Besucher bis zu ein Jahr lang nicht.

   Gestrichen gegenueber dem alten Leadmagnet-CSS (die fuenf Brueche aus dem
   Auftrag, plus zwei, die beim Messen dazukamen):
     1. --grad-signature  #2563EB -> #3B82F6 -> #06B6D4   (Dreifarb-Kopflinie)
     2. h1 .hl mit background-clip:text                   (Clip-Text)
     3. .eyebrow / .kicker als Pille                      (Eyebrow-Pillen)
     4. body::before radial-gradient                      (Farbglow)
     5. transform: rotate(-1.1deg)                        (gedrehte Karten)
     6. filter: blur(6px)                                 (Weichzeichner)
     7. blau eingefaerbte Schatten rgba(37,99,235,.22)    (Wolken statt Kante)
   ========================================================================== */

@font-face{
  font-family:'Plus Jakarta Sans';
  src:url(/lm/assets/jakarta-latin-var.woff2) format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url(/lm/assets/inter-latin-var.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* Farben exakt wie globals.css :root */
  --k-blue:#2563eb;
  --k-blue-dark:#1d4ed8;
  --k-emerald:#10b981;
  --k-emerald-dark:#047857;
  --k-ink:#0b1220;
  --k-line:#e5e7eb;
  --k-surface:#f8fafc;
  --k-accent:#eff6ff;

  --k-grad:linear-gradient(90deg,#1d4ed8 0%,#10b981 100%);

  /* KNOPF-VERLAUF, gemessene Abweichung vom Knopf auf katew.de.
     Entschieden am 17.09.2026: gilt NUR auf diesen vier Seiten. Die gleiche
     Umstellung in styles/globals.css ist ein eigener Vorgang und steht hier
     bewusst nicht drin.
     Gemessen am gerenderten Knopf (Chrome, 1440 px, Pixelprobe ueber der
     Schrift): weisser Text auf --k-grad (#1d4ed8 -> #10b981) reisst am rechten
     Ende auf 2,6:1 ab, WCAG AA verlangt 4,5:1. Der Knopfverlauf endet deshalb
     auf #047857 (emerald-700), dem im Brand-Design-System Paragraf 1 genau
     dafuer vorgesehenen Ton. Die Signatur bleibt Blau nach Gruen, nur das
     Gruen ist das dunkle. Messwerte der gebauten Seiten stehen im PR. */
  --k-grad-knopf:linear-gradient(90deg,#1d4ed8 0%,#047857 100%);

  --k-e1:0 1px 2px rgba(11,18,32,.04), 0 1px 3px rgba(11,18,32,.06);
  --k-e2:0 2px 4px rgba(11,18,32,.04), 0 8px 18px -8px rgba(11,18,32,.12);
  --k-e3:0 4px 8px rgba(11,18,32,.04), 0 20px 40px -16px rgba(11,18,32,.18);
  --k-e4:0 8px 16px rgba(11,18,32,.05), 0 32px 64px -24px rgba(11,18,32,.22);

  --k-ease:cubic-bezier(.2,.8,.2,1);

  /* Nur fuer die statischen Seiten: Lesetext-Toene aus dem Bestand */
  --k-slate700:#334155; --k-slate600:#475569; --k-slate500:#64748b;
  --font-display:'Plus Jakarta Sans','Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:16px;}
body{
  margin:0; background:#fff; color:var(--k-slate700);
  font-family:var(--font-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;}

/* --- Typografie-Skala (1:1 aus globals.css) ------------------------------ */
.k-display{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.5rem,1.35rem + 3.6vw,4.5rem);
  line-height:1.04; letter-spacing:-.035em; color:var(--k-ink);
  margin:0; text-wrap:balance;
}
/* Leadmagnet-Sonderfall: die H1 tragen ganze Saetze, nicht zwei Woerter.
   4,5 rem waeren auf 1440 eine Wand. Deshalb eine gedeckelte Variante, die
   Kurve bleibt dieselbe. */
.k-display.k-display-satz{font-size:clamp(1.95rem,1.25rem + 2vw,2.7rem); letter-spacing:-.03em;}
.k-h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.875rem,1.15rem + 2.1vw,3rem);
  line-height:1.1; letter-spacing:-.028em; color:var(--k-ink); margin:0;
}
.k-h2.k-h2-satz{font-size:clamp(1.55rem,1.1rem + 1.25vw,2.1rem);}
.k-h3{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.5rem);
  line-height:1.25; letter-spacing:-.018em; color:var(--k-ink); margin:0;
}
.k-h4{font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  line-height:1.3; letter-spacing:-.012em; color:var(--k-ink); margin:0;}
.k-lede{
  font-family:var(--font-body);
  font-size:clamp(1rem,.94rem + .28vw,1.1875rem);
  line-height:1.6; letter-spacing:-.005em; color:#475569; margin:0;
}
/* Betonung in Headlines: solide Markenfarbe statt Verlaufs-Clip-Text. */
.k-accent-word{color:var(--k-blue-dark);}
/* Zweiter Satz der H1 beginnt auf eigener Zeile, sonst haengt er hinten dran. */
.k-accent-zeile{display:block;}
p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}
b,strong{color:var(--k-ink); font-weight:600;}
a{color:var(--k-blue-dark);}

/* --- Flaechen ------------------------------------------------------------ */
.k-card{
  background:#fff; border:1px solid var(--k-line); border-radius:14px;
  box-shadow:var(--k-e1);
  transition:box-shadow .28s var(--k-ease), border-color .28s var(--k-ease), transform .28s var(--k-ease);
}
.k-card-hover:hover{border-color:#d7dde5; box-shadow:var(--k-e3); transform:translateY(-2px);}
.k-hairline{border-top:1px solid var(--k-line);}
.k-surface{background:var(--k-surface);}

/* --- Buttons (1:1 aus globals.css) --------------------------------------- */
.k-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:600; font-size:.9375rem;
  line-height:1; letter-spacing:-.01em; border-radius:10px;
  padding:0 1.25rem; height:44px; white-space:nowrap; text-decoration:none;
  border:0; cursor:pointer;
  transition:box-shadow .22s var(--k-ease), transform .22s var(--k-ease),
    background-color .22s var(--k-ease), color .22s var(--k-ease),
    border-color .22s var(--k-ease), filter .22s var(--k-ease);
}
.k-btn:focus-visible{outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--k-blue);}
.k-btn-lg{height:52px; padding:0 1.75rem; font-size:1rem; border-radius:12px;}
.k-btn-primary{color:#fff; background-image:var(--k-grad-knopf); box-shadow:var(--k-e2);}
.k-btn-primary:hover{filter:saturate(1.06) brightness(1.04); box-shadow:var(--k-e3); transform:translateY(-1px);}
.k-btn-primary:active{transform:translateY(0); filter:brightness(.97);}
.k-btn-secondary{color:var(--k-ink); background:#fff; border:1px solid var(--k-line); box-shadow:var(--k-e1);}
.k-btn-secondary:hover{border-color:#cbd5e1; box-shadow:var(--k-e2); transform:translateY(-1px);}
.k-fokus:focus-visible{outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--k-blue);}
.k-link{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body);
  font-weight:600; font-size:.9375rem; color:var(--k-blue-dark); text-decoration:none;
  transition:color .2s var(--k-ease);
}
.k-link:hover{color:var(--k-blue);}
.k-link svg{transition:transform .24s var(--k-ease);}
.k-link:hover svg{transform:translateX(3px);}

/* --- Bewegung ------------------------------------------------------------ */
@keyframes kRise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.k-rise{animation:kRise .6s var(--k-ease) both;}
@media (prefers-reduced-motion:reduce){
  .k-rise,.k-btn,.k-card,.k-link svg{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ==========================================================================
   Seitengeruest der Leadmagnet-Seiten
   ========================================================================== */
.k-topbar{height:4px; background:var(--k-grad);}
.wrap{max-width:1160px; margin:0 auto; padding:0 40px;}
.wrap-schmal{max-width:820px; margin:0 auto; padding:0 40px;}

.k-kopf{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 0;}
.k-kopf img{height:30px; width:auto; display:block;}
.k-kopf-rechts{font-size:13px; color:var(--k-slate500); text-align:right; line-height:1.45;}
.k-kopf-rechts b{color:var(--k-slate700);}
.k-tel{display:inline-flex; align-items:center; gap:6px; color:var(--k-blue-dark);
  text-decoration:none; font-weight:600;}
.k-tel:hover{color:var(--k-blue);}

.sec{padding:64px 0;}
.sec-eng{padding:48px 0;}
.sec-kopf{max-width:46rem; margin:0 0 32px;}
.sec-kopf .k-lede{margin-top:12px;}

/* Raster */
.g2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.g3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.g4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}

/* Hero */
.hero{display:grid; grid-template-columns:1.12fr .88fr; gap:52px; align-items:start; padding:28px 0 8px;}
.hero-satz{margin:16px 0 0;}
.hero-liste{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px;}
.hero-liste li{display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.5;}
.hero-tat{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:28px 0 0;}
.hero-danach{margin:12px 0 0; font-size:13.5px; color:var(--k-slate500);}

.ck{flex:0 0 auto; width:24px; height:24px; border-radius:7px; background:var(--k-accent);
  color:var(--k-blue-dark); display:flex; align-items:center; justify-content:center; margin-top:2px;}

/* Vertrauenszeile statt Eyebrow-Pille */
.k-zeile{
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--k-slate500); margin:0 0 14px;
}
.k-zeile i{font-style:normal; color:var(--k-emerald-dark);}

/* Herkunftskasten (Autoritaet) */
.k-herkunft{display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  background:var(--k-surface); border:1px solid var(--k-line); border-radius:14px;
  font-size:14.5px; line-height:1.55; color:var(--k-slate600); margin:24px 0 0;}
.k-herkunft img{width:44px; height:44px; border-radius:50%; flex:0 0 auto; object-fit:cover;}

/* Pflichthinweis-Kasten: bewusst ruhig, nie rot */
.k-hinweis{background:var(--k-accent); border:1px solid #dbeafe; border-radius:14px;
  padding:18px 20px; font-size:15px; line-height:1.6; color:var(--k-slate600);}
.k-hinweis b{color:var(--k-blue-dark);}

/* Schritte */
.k-schritt{display:flex; gap:14px; align-items:flex-start;}
.k-schritt .nr{flex:0 0 auto; width:30px; height:30px; border-radius:9px;
  background:var(--k-grad); color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center;}

/* Bildkarten */
figure.k-bild{margin:0; border:1px solid var(--k-line); border-radius:14px; overflow:hidden; background:#fff;}
figure.k-bild img{display:block; width:100%; height:176px; object-fit:cover;}
figure.k-bild figcaption{padding:16px 18px;}
figure.k-bild figcaption p{font-size:14.5px; color:var(--k-slate600); margin:8px 0 0;}
.k-bildquelle{display:block; margin-top:10px; font-size:12px; color:var(--k-slate500);}

/* Sprungmarken-Band */
.k-inhalt{display:flex; flex-wrap:wrap; gap:8px; padding:14px 0 0;}
.k-inhalt a{font-size:13.5px; font-weight:600; color:var(--k-slate600); text-decoration:none;
  border:1px solid var(--k-line); border-radius:8px; padding:7px 12px; background:#fff;}
.k-inhalt a:hover{border-color:#cbd5e1; color:var(--k-ink);}

/* Werkzeug-Rahmen */
.k-werkzeug{border:1px solid var(--k-line); border-radius:14px; background:#fff; box-shadow:var(--k-e2); overflow:hidden;}
.k-werkzeug-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--k-line); background:var(--k-surface);
  font-size:13.5px; font-weight:600; color:var(--k-slate600);}
.k-schiene{height:4px; background:#eef2f7;}
.k-schiene i{display:block; height:100%; background:var(--k-grad); width:0; transition:width .4s var(--k-ease);}
.k-werkzeug-koerper{padding:26px 22px;}
.k-werkzeug-fuss{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; border-top:1px solid var(--k-line); font-size:13px; color:var(--k-slate500);}

/* Antwortflaechen */
.k-wahl{display:grid; gap:12px; margin:20px 0 0;}
.k-wahl button{display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; text-align:left; background:#fff;
  border:1px solid var(--k-line); border-radius:12px; padding:16px 18px; cursor:pointer;
  font-family:var(--font-body); font-size:15.5px; color:var(--k-slate700); box-shadow:var(--k-e1);
  transition:border-color .2s var(--k-ease), box-shadow .2s var(--k-ease), transform .2s var(--k-ease);}
.k-wahl button:hover{border-color:var(--k-blue); box-shadow:var(--k-e2); transform:translateY(-1px);}
.k-wahl button b{display:block; margin-bottom:2px;}

/* Ampeln */
.k-ampel{display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:12px;
  border:1px solid var(--k-line); background:#fff; font-size:14.5px;}
.k-ampel span.p{width:10px; height:10px; border-radius:50%; flex:0 0 auto;}
.k-ampel.steht{background:#f0fdf4; border-color:#bbf7d0;} .k-ampel.steht .p{background:var(--k-emerald-dark);}
.k-ampel.offen{background:#fffbeb; border-color:#fde68a;} .k-ampel.offen .p{background:#b45309;}
.k-ampel.rot{background:#fef2f2; border-color:#fecaca;} .k-ampel.rot .p{background:#b91c1c;}

/* Regler */
.k-frage{padding:22px 0; border-top:1px solid var(--k-line);}
.k-frage:first-child{border-top:0; padding-top:0;}
.k-frage .lbl{display:flex; gap:12px; align-items:flex-start;}
.k-frage .lbl i{flex:0 0 auto; width:24px; height:24px; border-radius:7px; background:var(--k-accent);
  color:var(--k-blue-dark); font-style:normal; font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center; margin-top:2px;}
.k-frage .hilf{font-size:14px; color:var(--k-slate500); margin:8px 0 0 36px;}
.k-regler{display:flex; align-items:center; gap:16px; margin:14px 0 0 36px;}
.k-wert{font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--k-ink);
  min-width:96px; border:1px solid var(--k-line); border-radius:10px; padding:8px 12px; text-align:center;}
.k-wert small{display:block; font-family:var(--font-body); font-weight:600; font-size:11px;
  color:var(--k-slate500); letter-spacing:.04em; text-transform:uppercase;}
input[type=range]{flex:1; accent-color:var(--k-blue); min-width:0;}
.k-opt{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0 36px;}
.k-opt label{border:1px solid var(--k-line); border-radius:9px; padding:8px 12px; font-size:14px;
  cursor:pointer; background:#fff;}
.k-opt input{margin-right:6px;}
.k-opt label:has(input:checked){border-color:var(--k-blue); background:var(--k-accent); color:var(--k-blue-dark); font-weight:600;}

/* Ergebnis */
.k-ergebnis{border:1px solid var(--k-line); border-radius:14px; background:#fff; box-shadow:var(--k-e2); padding:26px 24px;}
.k-zahl{font-family:var(--font-display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2.4rem,1.6rem + 2.4vw,3.4rem); line-height:1; color:var(--k-ink);}
.k-zahl-unter{font-size:14.5px; color:var(--k-slate500); margin-top:8px;}

/* FAQ */
details.k-faq{border-bottom:1px solid var(--k-line); padding:16px 0;}
details.k-faq summary{list-style:none; cursor:pointer; font-family:var(--font-display);
  font-weight:700; font-size:16.5px; color:var(--k-ink); display:flex; justify-content:space-between; gap:16px;}
details.k-faq summary::-webkit-details-marker{display:none;}
details.k-faq summary::after{content:"+"; color:var(--k-blue-dark); font-weight:700;}
details.k-faq[open] summary::after{content:"\2013";}
details.k-faq p{margin:12px 0 0; font-size:15.5px; color:var(--k-slate600);}

/* P.S. */
.k-ps{border-left:3px solid var(--k-emerald-dark); padding:4px 0 4px 18px;
  font-size:15.5px; line-height:1.6; color:var(--k-slate600);}
.k-ps b{color:var(--k-ink);}

/* Fussbereich */
.k-fuss{background:var(--k-surface); border-top:1px solid var(--k-line); padding:36px 0 44px;
  font-size:13.5px; color:var(--k-slate500);}
.k-fuss a{color:var(--k-slate600); text-decoration:none; font-weight:600;}
.k-fuss nav{display:flex; gap:18px; flex-wrap:wrap; margin:12px 0;}

/* Mobile Aktionsleiste: der eine Hebel bei 10.000 px Seitenlaenge */
.k-leiste{display:none;}
/* [hidden] verliert sonst gegen die Klasse aus der Medienabfrage. */
.k-leiste[hidden]{display:none !important;}
@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:32px;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .wrap,.wrap-schmal{padding:0 20px;}
  .sec{padding:44px 0;}
  .k-leiste{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);
    border-top:1px solid var(--k-line); box-shadow:0 -6px 20px -12px rgba(11,18,32,.3);
    backdrop-filter:saturate(1.2) blur(6px);
  }
  .k-leiste .k-btn{flex:1 1 auto; min-width:0;}
  .k-leiste .k-btn-secondary{flex:0 0 auto; width:52px; padding:0;}
  body{padding-bottom:76px;}
  .k-werkzeug-koerper{padding:20px 16px;}
  .k-regler{margin-left:0;} .k-frage .hilf{margin-left:0;} .k-opt{margin-left:0;}
  .k-wert{min-width:84px;}
}
@media (max-width:560px){
  /* Auf dem Telefon traegt die Kopfzeile nur noch die Telefonnummer.
     Der Betreibersatz steht im Herkunftskasten und im Fussbereich, dort
     bleibt er lesbar statt dreizeilig in den Kopf gequetscht. */
  .k-kopf-rechts .betreiber{display:none;}
  .k-kopf-rechts{font-size:14px;}
}
@media (max-width:400px){
  .wrap,.wrap-schmal{padding:0 14px;}
  .k-regler{flex-wrap:wrap; gap:10px;}
  /* 320 px: 'white-space:nowrap' auf dem Knopf schiebt lange Beschriftungen
     ueber die rechte Kante. Gemessen am 17.09.2026 auf /fuer-einrichtungen/
     fahrten-rechner: scrollWidth 365 bei clientWidth 320, 17 Elemente ueber
     der Kante. Ab hier darf der Knopf umbrechen. */
  .k-btn{white-space:normal; text-align:center; line-height:1.25; height:auto;
    min-height:44px; padding:11px 14px;}
  .k-btn-lg{min-height:52px; padding:14px 16px; font-size:.9375rem;}
}
@media (min-width:901px){ .k-nur-mobil{display:none;} }

/* ==========================================================================
   Ergaenzungen fuer die vier gebauten Seiten (17.09.2026)
   ========================================================================== */

/* Kleine Versalzeile in Karten (ersetzt die Eyebrow-Pille .card-num). */
.karte-nr{font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--k-slate500); margin:0 0 8px;}

/* Aufzaehlung in Karten. */
.karte-liste{margin:12px 0 0; padding-left:18px; font-size:15px; line-height:1.5;
  color:var(--k-slate600); display:grid; gap:6px;}

/* Ein Satz fuer den falsch angekommenen Leser. Kein Kasten, kein Menue. */
.umleitung{margin:16px 0 0; font-size:13.5px; line-height:1.55; color:var(--k-slate500);}
.umleitung a{color:var(--k-blue-dark); font-weight:600; text-decoration:underline; text-underline-offset:3px;}

/* Vertrauenszeile am Abschnittsende (frueher .trust / .trustline mit Pillen). */
.k-trust{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px;
  font-size:13.5px; color:var(--k-slate500);}
.k-trust span{display:inline-flex; align-items:center; gap:7px;}
.k-trust span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--k-emerald-dark);}

/* Sichtbarer Fokus auf allem, was man mit der Tastatur erreichen kann.
   .k-btn:focus-visible ist spezifischer und behaelt seinen eigenen Ring. */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
details:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--k-blue); outline-offset:2px; border-radius:6px;
}

/* Pflichtzeile: ruhig, nie rot, steht direkt an der Handlungsflaeche. */
.k-abgrenzung{margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--k-slate500);}
.k-abgrenzung b{color:var(--k-slate700);}

/* Bedienelemente auf dem Telefon mindestens 44 px hoch (Befund 13 aus dem
   Bestand, dort mit 48 px auf jedem Telefonlink). Bleibt erhalten. */
@media (max-width:600px){
  .k-tel{min-height:44px;}
  .k-leiste .k-btn{min-height:48px;}
}

/* Die Aktionsleiste darf den Fussbereich nicht verdecken. */
@media (max-width:900px){ .k-fuss{padding-bottom:84px;} }

/* Bildkarten: auf dem Telefon darf das Motiv hoeher stehen. */
@media (max-width:640px){ figure.k-bild img{height:200px;} }

/* Im Druck verschwindet alles, was nur der Bedienung dient. */
@media print{
  .k-leiste, .k-inhalt, .k-topbar{display:none !important;}
}

/* ==========================================================================
   katew Leadmagnet-Seiten, Design-System v3 (Funnel-Redesign 27.09.2026)
   --------------------------------------------------------------------------
   Alles oberhalb dieser Zeile ist unveraendert aus katew-lm-v2-c2d04479.css
   uebernommen, damit Werkzeuge, Druckansichten und Tokens weiter greifen.
   Ab hier die neue Schicht im Stil der redesignten Startseite, von
   /fuer-anbieter, des Kopfs aus PR #334 und der Anmeldeseite /auth (#336):
   Markenflaeche #0B1220 -> #1E3A8A -> #065F46 mit Punktraster (wortgleich
   BRAND_FLAECHE in components/auth/AuthNutzen.jsx), Blau #2563EB,
   Gruen #10B981, Inter als Anzeige- und Lesetext.
   Keine neue Schrift: Inter und Plus Jakarta Sans liegen schon unter
   /lm/assets/. Plus Jakarta bleibt geladen, weil die eingebetteten
   SVG-Motive sie benutzen.
   Aufbau-Vorbilder aus der 21st.dev-Registry (nur als Gestaltungsvorlage
   gelesen, kein Code und keine Abhaengigkeit uebernommen): "Hero Section"
   (id 8439), "How It Works" (19861), "Process Timeline" (28381),
   "Gradient CTA Banner" (28147), "Accordion" (23530).
   ========================================================================== */
:root{
  --font-display:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --k-flaeche:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(145deg,#0B1220 0%,#1E3A8A 55%,#065F46 100%);
  --k-radius:18px;
}
.k-display,.k-h2,.k-h3,.k-h4{font-feature-settings:"ss01","cv11"; letter-spacing:-.032em;}
.k-display.k-display-satz{font-size:clamp(2.1rem,1.3rem + 2.5vw,3.35rem); line-height:1.06; font-weight:800;}
.k-h2.k-h2-satz{font-size:clamp(1.65rem,1.15rem + 1.5vw,2.4rem); font-weight:750;}
.k-topbar{display:none;}

/* Knoepfe: Pille, wie der Seitenkopf aus #334 */
.k-btn{border-radius:999px;}
.k-btn-lg{border-radius:999px; height:56px; padding:0 1.9rem; font-size:1.02rem;}
.k-btn-primary{background-image:linear-gradient(90deg,#2563EB 0%,#1D4ED8 45%,#047857 100%);
  box-shadow:0 10px 24px -10px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.18);}
.k-btn-hell{color:#0B1220; background:#fff; box-shadow:0 10px 30px -12px rgba(0,0,0,.45);}
.k-btn-hell:hover{transform:translateY(-1px); background:#F8FAFC;}
.k-card{border-radius:var(--k-radius);}

/* --- Markenflaeche oben: Kopf + Hero ------------------------------------- */
.lm-top{position:relative; color:#E2E8F0; background-color:#0B1220; background-image:var(--k-flaeche);
  background-size:22px 22px,100% 100%; padding:14px 0 84px; overflow:hidden;}
.lm-top::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(255,255,255,.12);}
.lm-top .k-kopf{margin-top:6px; padding:10px 12px 10px 22px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);}
.lm-top .k-kopf img,.lm-top .k-kopf .klogo{filter:brightness(0) invert(1); height:26px;}
.lm-top .k-kopf-rechts{color:#CBD5E1;}
.lm-top .k-kopf-rechts b{color:#fff;}
.lm-top .k-kopf .k-tel{color:#0B1220; background:#fff; border-radius:999px; padding:8px 14px; margin-left:6px;}
.lm-top .hero{padding-top:56px; gap:56px; align-items:center;}
.lm-top .hero > div:first-child .k-display{color:#fff;}
.lm-top .hero > div:first-child .k-accent-word,
.lm-top .hero > div:first-child .hl{color:#6EE7B7;}
.lm-top .hero > div:first-child .k-lede{color:#CBD5E1;}
.lm-top .hero > div:first-child b,.lm-top .hero > div:first-child strong{color:#fff;}
.lm-top .hero > div:first-child .k-zeile{color:#A7F3D0; letter-spacing:.14em; font-size:12px;}
.lm-top .hero-liste li{color:#E2E8F0;}
.lm-top .ck{background:rgba(16,185,129,.18); color:#6EE7B7; box-shadow:inset 0 0 0 1px rgba(110,231,183,.3);}
.lm-top .hero-tat span,.lm-top .hero-danach,.lm-top .k-abgrenzung,.lm-top .hero-tel{color:#CBD5E1 !important;}
.lm-top .hero > div:first-child .k-tel,.lm-top .hero-tel a,.lm-top .hero > div:first-child .k-link{color:#fff;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:4px;}
.lm-top .k-herkunft{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#E2E8F0;}
.lm-top .k-herkunft img{box-shadow:0 0 0 2px rgba(255,255,255,.5);}
/* Rechte Spalte: der Leadmagnet als schwebende Vorschau */
.lm-top .hero > div:last-child{position:relative; color:var(--k-slate700);}
.lm-top .hero > div:last-child::before{content:""; position:absolute; inset:-28px -18px; border-radius:32px;
  background:radial-gradient(60% 60% at 60% 40%, rgba(16,185,129,.28), transparent 70%); pointer-events:none;}
.lm-top .hero > div:last-child > *{position:relative;}
.lm-top .hero > div:last-child .k-card{border:0; box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 40px 80px -30px rgba(0,0,0,.6);}
.lm-vorschau-etikett{display:inline-flex; align-items:center; gap:8px; margin:0 0 12px; font-size:12px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#A7F3D0;}
.lm-vorschau-etikett::before{content:""; width:8px; height:8px; border-radius:50%; background:#10B981;
  box-shadow:0 0 0 4px rgba(16,185,129,.25);}
.umleitung{margin-top:22px;}

/* --- Abschnitte ---------------------------------------------------------- */
.sec{padding:88px 0;}
.k-hairline{border-top:0;}
.k-surface{background:#F8FAFC;}
.sec-kopf{margin-bottom:40px;}
.lm-kicker{display:block; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--k-blue); margin:0 0 12px;}

/* Nutzen in drei Punkten (Feature-Grid) */
.lm-nutzen{padding:72px 0 40px;}
.lm-nutzen .g3{gap:22px;}
.lm-feat{position:relative; padding:28px 26px; border-radius:var(--k-radius); background:#fff;
  border:1px solid var(--k-line); box-shadow:var(--k-e1); transition:box-shadow .28s var(--k-ease), transform .28s var(--k-ease);}
.lm-feat:hover{box-shadow:var(--k-e3); transform:translateY(-2px);}
.lm-ico{width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#fff; background:linear-gradient(135deg,#1D4ED8 0%,#047857 100%); box-shadow:0 0 0 6px #EFF6FF;}
.lm-feat h3{margin:20px 0 8px;}
.lm-feat p{font-size:15.5px; color:var(--k-slate600); margin:0;}

/* Ablauf in drei Schritten (Timeline) */
.lm-schritte{padding:40px 0 88px;}
.lm-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative;}
.lm-steps::before{content:""; position:absolute; top:27px; left:12%; right:12%; height:2px;
  background:linear-gradient(90deg,#2563EB,#10B981); opacity:.35;}
.lm-steps li{position:relative; text-align:center; padding:0 10px;}
.lm-steps .nr{position:relative; z-index:1; width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; color:#fff;
  background:linear-gradient(135deg,#1D4ED8,#047857); box-shadow:0 0 0 8px #fff, 0 12px 24px -10px rgba(29,78,216,.6);}
.lm-steps h3{margin:0 0 6px;}
.lm-steps p{font-size:15px; color:var(--k-slate600); margin:0 auto; max-width:22rem;}

/* Vertrauen: nur Belegtes, keine Zahlen, keine Logos */
.lm-vertrauen{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:48px; border:1px solid var(--k-line);
  border-radius:var(--k-radius); background:#fff; overflow:hidden;}
.lm-vertrauen > div{display:flex; gap:12px; align-items:flex-start; padding:20px 22px; font-size:14.5px; line-height:1.5; color:var(--k-slate600);}
.lm-vertrauen > div + div{border-left:1px solid var(--k-line);}
.lm-vertrauen svg{flex:0 0 auto; color:var(--k-emerald-dark); margin-top:1px;}
.lm-vertrauen b{display:block; color:var(--k-ink);}

/* FAQ als Akkordeon-Karten */
details.k-faq{background:#fff; border:1px solid var(--k-line); border-radius:14px; padding:0; margin:0 0 10px;
  box-shadow:var(--k-e1); transition:border-color .2s var(--k-ease), box-shadow .2s var(--k-ease);}
details.k-faq[open]{border-color:#BFDBFE; box-shadow:var(--k-e2);}
details.k-faq summary{padding:18px 22px; align-items:center; font-family:var(--font-display); font-weight:650;}
details.k-faq summary::after{content:""; flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:#EFF6FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:transform .25s var(--k-ease);}
details.k-faq[open] summary::after{content:""; transform:rotate(180deg);}
details.k-faq > p,details.k-faq > div{padding:0 22px 20px; margin:0;}
.faq .faq-item{background:#fff; border:1px solid var(--k-line); border-radius:14px; padding:18px 22px; margin:0 0 10px; box-shadow:var(--k-e1);}

/* CTA-Band (wiederholter Handlungsaufruf) */
.lm-band{padding:0 0 96px;}
.lm-band-in{position:relative; overflow:hidden; border-radius:28px; padding:56px 48px; text-align:center; color:#E2E8F0;
  background-color:#0B1220; background-image:var(--k-flaeche); background-size:22px 22px,100% 100%;}
.lm-band-in h2{color:#fff; max-width:34rem; margin:0 auto;}
.lm-band-in p{max-width:36rem; margin:14px auto 0; color:#CBD5E1; font-size:16px;}
.lm-band-tat{display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; align-items:center; margin-top:28px;}
.lm-band-tat .k-tel{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:4px;}
.lm-band-fuss{font-size:13.5px !important; color:#A7F3D0 !important; margin-top:18px !important;}

/* Mobile Sticky-CTA: Glas, Pille */
@media (max-width:900px){
  .k-leiste,#mini-ergebnis{border-top:1px solid rgba(11,18,32,.08);}
  .k-leiste .k-btn{border-radius:999px;}
}

/* Fussbereich dunkel wie auf katew.de */
.k-fuss{background:#0B1220; border-top:0; color:#94A3B8;}
.k-fuss b{color:#E2E8F0;}
.k-fuss a{color:#E2E8F0;}

@media (max-width:900px){
  .lm-top{padding-bottom:56px;}
  .lm-top .hero{padding-top:32px; gap:36px;}
  .lm-top .k-kopf{padding:8px 8px 8px 16px;}
  .sec{padding:60px 0;}
  .lm-nutzen{padding:52px 0 24px;}
  .lm-schritte{padding:28px 0 60px;}
  .lm-steps{grid-template-columns:1fr; gap:26px;}
  .lm-steps::before{top:28px; bottom:28px; left:27px; right:auto; width:2px; height:auto; background:linear-gradient(180deg,#2563EB,#10B981);}
  .lm-steps li{text-align:left; padding:0 0 0 76px; min-height:56px;}
  .lm-steps .nr{position:absolute; left:0; top:0; margin:0;}
  .lm-steps p{margin:0;}
  .lm-vertrauen{grid-template-columns:1fr;}
  .lm-vertrauen > div + div{border-left:0; border-top:1px solid var(--k-line);}
  .lm-band{padding-bottom:64px;}
  .lm-band-in{padding:40px 22px; border-radius:22px;}
  .lm-top .hero > div:last-child::before{display:none;}
}
@media (max-width:560px){
  .lm-top .k-kopf .k-tel{padding:8px 12px; font-size:14px;}
  .lm-band-tat .k-btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){ .lm-feat,details.k-faq summary::after{transition:none !important;} }
@media print{ .lm-top{background:#fff !important; color:#000;} .lm-band{display:none !important;} }

/* ==========================================================================
   Struktur v3 (27.09.2026, Auftrag Dino): acht feste Bereiche je Seite
   1 Hero + Probleme, 2 Storys, 3 Loesung, 4 ohne/mit katew,
   5 So funktioniert's + Wege, 6 Kunden (bis zur Freigabe ausgeblendet),
   7 Zahlen, 8 Abschluss mit Kalender. Jeder Bereich endet mit
   "Jetzt Konto eröffnen".
   ========================================================================== */
.lm-probleme{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:10px;}
.lm-probleme-titel{margin:24px 0 0; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#FCA5A5;}
.lm-probleme li{display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.45; color:#E2E8F0;}
.lm-probleme li::before{content:""; flex:0 0 auto; width:22px; height:22px; margin-top:1px; border-radius:7px;
  background:rgba(248,113,113,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FCA5A5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow:inset 0 0 0 1px rgba(252,165,165,.3);}
.lm-hero-sub{margin:12px 0 0; font-size:14px; color:#CBD5E1;}
.lm-hero-sub a{color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:4px;}

.lm-bereich{padding:88px 0;}
.lm-bereich.hell{background:#F8FAFC;}
.lm-cta-zeile{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:44px; text-align:center;}
.lm-cta-zeile small{font-size:13.5px; color:var(--k-slate500); max-width:34rem; line-height:1.5;}
.lm-cta-solo{padding:8px 0 72px;}

/* 2 Storys */
.lm-storys{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.lm-story{position:relative; background:#fff; border:1px solid var(--k-line); border-radius:var(--k-radius); padding:26px 24px 24px; box-shadow:var(--k-e1);}
.lm-story::before{content:"\201E"; position:absolute; top:6px; right:18px; font-size:64px; line-height:1; color:#DBEAFE; font-weight:800;}
.lm-story .etikett{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--k-slate500); margin:0 0 12px;}
.lm-story h3{margin:0 0 10px;}
.lm-story p{font-size:15.5px; color:var(--k-slate600); margin:0;}
.lm-hinweis-klein{margin:16px 0 0; font-size:13px; color:var(--k-slate500);}

/* 3 Loesung */
.lm-loesung{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;}
.lm-loesung .k-lede{margin-top:14px;}
.lm-haken{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.lm-haken li{display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid var(--k-line); border-radius:14px; padding:16px 18px; box-shadow:var(--k-e1); font-size:15.5px; color:var(--k-slate600);}
.lm-haken li::before{content:""; flex:0 0 auto; width:28px; height:28px; border-radius:50%;
  background:linear-gradient(135deg,#1D4ED8,#047857) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/14px no-repeat;}
.lm-haken b{display:block; color:var(--k-ink);}

/* 4 Vergleich */
.lm-vergleich{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.lm-spalte{border-radius:var(--k-radius); padding:28px 26px;}
.lm-spalte h3{margin:0 0 16px; display:flex; align-items:center; gap:10px;}
.lm-spalte ul{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.lm-spalte li{display:flex; gap:12px; font-size:15.5px; line-height:1.45;}
.lm-spalte li::before{flex:0 0 auto; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-top:1px;}
.lm-ohne{background:#fff; border:1px solid var(--k-line); color:var(--k-slate600);}
.lm-ohne li::before{content:"\2013"; background:#F1F5F9; color:#64748B;}
.lm-mit{color:#E2E8F0; background-color:#0B1220; background-image:var(--k-flaeche); background-size:22px 22px,100% 100%;}
.lm-mit h3{color:#fff;}
.lm-mit li::before{content:"\2713"; background:rgba(16,185,129,.25); color:#6EE7B7;}

/* 5 Wege */
.lm-wege{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px; margin-top:44px;}
.lm-weg{display:block; text-decoration:none; background:#fff; border:1px solid var(--k-line); border-radius:16px; padding:22px 20px; box-shadow:var(--k-e1); color:var(--k-slate600); font-size:15px; transition:box-shadow .25s var(--k-ease), transform .25s var(--k-ease), border-color .25s var(--k-ease);}
a.lm-weg:hover{border-color:#BFDBFE; box-shadow:var(--k-e3); transform:translateY(-2px);}
.lm-weg h3{margin:14px 0 6px;}
.lm-weg .lm-ico{width:40px; height:40px; border-radius:12px; box-shadow:none;}
.lm-weg .mehr{display:inline-block; margin-top:10px; font-weight:600; color:var(--k-blue-dark);}
.lm-wege-titel{margin:56px 0 0;}

/* 6 Kunden: bis zur Freigabe ausgeblendet */
[data-katew-freigabe="kunden"]{display:none !important;}

/* 7 Zahlen */
.lm-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.lm-fact{text-align:center; border-radius:var(--k-radius); padding:34px 20px; background:#fff; border:1px solid var(--k-line); box-shadow:var(--k-e2);}
.lm-fact b{display:block; font-size:clamp(2.4rem,1.6rem + 2.4vw,3.4rem); font-weight:800; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(90deg,#1D4ED8,#047857); -webkit-background-clip:text; background-clip:text; color:transparent;}
.lm-fact span{display:block; margin-top:10px; font-size:15px; font-weight:600; color:var(--k-slate600);}

@media (max-width:900px){
  .lm-bereich{padding:60px 0;}
  .lm-storys,.lm-loesung,.lm-vergleich,.lm-facts{grid-template-columns:1fr;}
  .lm-loesung{gap:28px;}
  .lm-cta-zeile .k-btn{width:100%;}
}