/* ═══════════════════════════════════════════════════════════════════════════
   DAD Journal — Startseite, Ergänzungen (18.09.2026)
   Rein additiv: drei neue Blöcke (Start in drei Schritten, Vergleich mit der
   Tabelle, Hinweis auf die LRC Academy), eine Kaufleiste fürs Handy und die
   Korrektur der Einblendung auf Touch-Geräten. Bestehende Abschnitte bleiben
   unverändert. Abschalten: die Zeile mit landing-plus.css aus index.html nehmen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Touch: Inhalt ist sofort da. Beim schnellen Wischen blieben Bereiche sonst
   leer, bis die Einblendung nachkam (gemessen: 2 von 8 sichtbaren Elementen). */
@media (max-width:900px), (pointer:coarse){
  html body .fade{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ── Start in drei Schritten ────────────────────────────────────────────── */
.lp-start{max-width:1200px;margin:0 auto;padding:56px 40px 0;}
.lp-start-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--ds-6);flex-wrap:wrap;margin-bottom:var(--ds-7);}
.lp-start-kopf h2{font:600 22px/1.25 var(--ds-font);letter-spacing:-.02em;color:var(--ds-text);margin:0;}
.lp-start-kopf span{font:var(--ds-small);color:var(--ds-text-3);}
.lp-schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ds-5);}
.lp-schritt{display:flex;gap:var(--ds-6);padding:var(--ds-7);background:var(--ds-surface-2);border:1px solid var(--ds-border-subtle);border-radius:var(--ds-r-xl);}
.lp-schritt > i{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;font:600 14px var(--ds-font-mono);font-style:normal;
  color:var(--ds-brand-hover);background:var(--ds-brand-weak);border:1px solid var(--ds-brand-line);}
.lp-schritt b{display:block;font:600 15px/1.35 var(--ds-font);letter-spacing:-.012em;color:var(--ds-text);margin-bottom:var(--ds-3);}
.lp-schritt p{font:400 13.5px/1.6 var(--ds-font);color:var(--ds-text-2);margin:0;}

/* ── Vergleich: Tabelle oder Journal ────────────────────────────────────── */
.lp-vgl{margin-top:var(--ds-9);border:1px solid var(--ds-border);border-radius:var(--ds-r-xl);overflow:hidden;background:var(--ds-surface-2);}
.lp-vgl-kopf,.lp-vgl-z{display:grid;grid-template-columns:170px 1fr 1.15fr;}
.lp-vgl-kopf span{padding:13px 20px;font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);text-transform:uppercase;color:var(--ds-text-3);background:var(--ds-surface-1);}
.lp-vgl-kopf .wir{color:var(--ds-brand-hover);background:var(--ds-brand-weak);}
.lp-vgl-z{border-top:1px solid var(--ds-border-subtle);}
.lp-vgl-z > *{padding:15px 20px;font:400 13.5px/1.6 var(--ds-font);}
.lp-vgl-z b{font:600 14.5px/1.4 var(--ds-font);color:var(--ds-text);}
.lp-vgl-z span{display:flex;gap:10px;align-items:flex-start;}
.lp-vgl-z i{flex-shrink:0;width:19px;height:19px;display:grid;place-items:center;border-radius:50%;margin-top:1px;}
.lp-vgl-z i svg{width:10px;height:10px;}
.lp-alt{color:var(--ds-text-3);} .lp-alt i{color:var(--ds-neg);background:var(--ds-neg-weak);}
.lp-neu{color:var(--ds-text);background:rgba(61,125,255,.045);} .lp-neu i{color:#fff;background:var(--ds-brand);}
.lp-vgl-mehr{display:none;}
.lp-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-6);flex-wrap:wrap;margin-top:var(--ds-7);padding:var(--ds-7) var(--ds-8);
  border-radius:var(--ds-r-xl);border:1px solid var(--ds-brand-line);background:var(--ds-brand-weak);}
.lp-cta b{display:block;font:600 17px/1.3 var(--ds-font);letter-spacing:-.015em;color:var(--ds-text);}
.lp-cta span{font:var(--ds-body-sm);color:var(--ds-text-2);}

/* ── Hinweis auf die LRC Academy ────────────────────────────────────────── */
.lp-lrc{max-width:1200px;margin:0 auto;padding:0 40px 72px;}
.lp-lrc-in{display:flex;align-items:center;gap:var(--ds-7);flex-wrap:wrap;padding:var(--ds-7) var(--ds-8);border-radius:var(--ds-r-xl);
  background:var(--ds-surface-2);border:1px solid var(--ds-border-subtle);}
.lp-lrc-in > div{flex:1;min-width:240px;}
.lp-lrc-in small{display:block;font:var(--ds-overline);letter-spacing:var(--ds-ls-overline);text-transform:uppercase;color:#e0a83a;margin-bottom:6px;}
.lp-lrc-in b{display:block;font:600 16px/1.35 var(--ds-font);letter-spacing:-.012em;color:var(--ds-text);}
.lp-lrc-in p{font:400 13.5px/1.6 var(--ds-font);color:var(--ds-text-2);margin:4px 0 0;}
.lp-lrc-in a{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:var(--ds-r-lg);text-decoration:none;
  font:550 13.5px var(--ds-font);color:#e0a83a;border:1px solid rgba(224,168,58,.34);background:rgba(224,168,58,.08);transition:background var(--ds-fast) var(--ds-ease);}
.lp-lrc-in a:hover{background:rgba(224,168,58,.16);}

/* ── Kaufleiste fürs Handy ──────────────────────────────────────────────── */
.lp-dock{display:none;}
@media (max-width:760px){
  .lp-dock{display:flex;align-items:center;gap:12px;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:190;
    padding:9px 10px 9px 16px;border-radius:16px;background:rgba(13,15,19,.97);border:1px solid var(--ds-border);box-shadow:0 12px 40px rgba(0,0,0,.6);
    transform:translateY(140%);transition:transform .35s cubic-bezier(.32,.72,0,1);}
  .lp-dock.an{transform:none;}
  .lp-dock div{flex:1;min-width:0;}
  .lp-dock b{display:block;font:600 14px/1.2 var(--ds-font);color:var(--ds-text);}
  .lp-dock span{font:var(--ds-caption);color:var(--ds-text-3);}
  .lp-dock a{flex-shrink:0;display:inline-flex;align-items:center;height:42px;padding:0 18px;border-radius:11px;text-decoration:none;
    font:600 14px var(--ds-font);color:#fff;background:var(--ds-brand);}
  footer{padding-bottom:96px !important;}
}

@media (max-width:900px){
  .lp-start{padding:40px 20px 0;}
  .lp-schritte{grid-template-columns:1fr;gap:var(--ds-4);}
  .lp-schritt{padding:var(--ds-6);}
  .lp-vgl-kopf{display:none;}
  .lp-vgl-z{grid-template-columns:1fr;}
  .lp-vgl-z > *{padding:11px 16px;}
  .lp-vgl-z b{padding-top:16px;font-size:15.5px;}
  .lp-vgl-z .lp-neu{margin:0 12px 14px;border-radius:10px;border:1px solid var(--ds-brand-line);}
  .lp-vgl:not(.alle) .lp-vgl-z:nth-child(n+5){display:none;}
  .lp-vgl-z span{font-size:14px !important;line-height:1.55 !important;}
  .lp-vgl:not(.alle) .lp-vgl-mehr{display:flex;}
  .lp-vgl-mehr{align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;border:0;border-top:1px solid var(--ds-border-subtle);
    background:var(--ds-surface-1);color:var(--ds-brand-hover);font:600 14px var(--ds-font);cursor:pointer;}
  .lp-cta{padding:var(--ds-6);}
  .lp-cta .h-btn{width:100%;justify-content:center;text-align:center;}
  .lp-lrc{padding:0 20px 48px;}
  .lp-lrc-in{padding:var(--ds-6);}
  .lp-lrc-in a{width:100%;justify-content:center;}
}


/* ═══ (landing-plus) Kopfleiste, neu am 04.10.2026 ════════════════════════
   Rechner: Logo links, Menü als Pillengruppe genau mittig (aktiver Bereich
   blau), rechts Anmelden und der blaue Startknopf. Bis 900 px: Logo,
   Startknopf und Menüknopf; das Menü öffnet als Blatt unter der Leiste.
   Die Leiste schließt bündig ans Kursband an (vorher 2 px Lücke am Handy). */
body > nav.kl{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:60px;padding:0 24px;}
nav.kl .nav-brand{justify-self:start;}
nav.kl .nav-brand img{height:28px;}
nav.kl .nav-center{justify-self:center;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);}
nav.kl .nav-center a{padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:500;line-height:1.2;color:rgba(232,236,244,.66);transition:color .18s ease,background .18s ease,box-shadow .18s ease;}
nav.kl .nav-center a:hover{color:#fff;background:rgba(255,255,255,.06);}
nav.kl .nav-center a.akt{color:#fff;background:rgba(61,125,255,.16);box-shadow:inset 0 0 0 1px rgba(61,125,255,.40);}
nav.kl .nav-center a:focus-visible,nav.kl .nav-login:focus-visible,nav.kl .nav-start:focus-visible,nav.kl .kl-knopf:focus-visible{outline:2px solid #3d7dff;outline-offset:2px;}
nav.kl .nav-right{justify-self:end;gap:6px;}
nav.kl .nav-login{padding:8px 14px;border-radius:999px;}
nav.kl .nav-start{padding:8px 17px;border-radius:999px;background:#3d7dff;color:#fff;font-weight:600;
  box-shadow:0 0 0 1px rgba(61,125,255,.55),0 8px 22px -10px rgba(61,125,255,.9);}
nav.kl .nav-start:hover{background:#5590ff;}
nav.kl .i18n-switch{margin-left:4px;border-radius:999px;}
nav.kl .i18n-switch .i18n-b{border-radius:999px;padding:4px 8px;}
nav.kl .kl-knopf{display:none;}
.ticker-strip{top:60px;}

/* Menüknopf und Blatt */
nav.kl .kl-knopf{width:40px;height:40px;padding:0;border-radius:999px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);-webkit-tap-highlight-color:transparent;}
nav.kl .kl-knopf span{display:block;width:16px;height:1.6px;border-radius:2px;background:#e9edf5;transition:transform .22s ease;}
nav.kl.kl-offen .kl-knopf{background:rgba(255,255,255,.08);}
nav.kl.kl-offen .kl-knopf span:first-child{transform:translateY(3.3px) rotate(45deg);}
nav.kl.kl-offen .kl-knopf span:last-child{transform:translateY(-3.3px) rotate(-45deg);}
.kl-hinter{position:fixed;inset:0;z-index:195;background:rgba(3,5,9,.6);opacity:0;transition:opacity .2s ease;}
.kl-hinter.an{opacity:1;}
.kl-blatt{position:fixed;top:64px;left:10px;right:10px;z-index:205;padding:8px;border-radius:18px;background:#0b0f17;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 28px 60px -16px rgba(0,0,0,.75);max-height:calc(100dvh - 80px);overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top center;transition:opacity .2s ease,transform .2s ease;}
.kl-blatt.an{opacity:1;transform:none;}
.kl-zeile{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:12px;color:#e9edf5;text-decoration:none;-webkit-tap-highlight-color:transparent;}
.kl-zeile:hover,.kl-zeile:active{background:rgba(255,255,255,.05);}
.kl-zeile.akt{background:rgba(61,125,255,.12);}
.kl-zeile::after{content:'';flex-shrink:0;margin-left:auto;width:7px;height:7px;border-top:1.6px solid rgba(255,255,255,.32);border-right:1.6px solid rgba(255,255,255,.32);transform:rotate(45deg);}
.kl-ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#7ea8ff;background:rgba(61,125,255,.12);border:1px solid rgba(61,125,255,.24);}
.kl-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.kl-t b{font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.25;}
.kl-t i{font-family:var(--sans);font-size:12.5px;font-style:normal;line-height:1.35;color:rgba(232,236,244,.55);}
.kl-aktionen{display:grid;grid-template-columns:1fr 1.45fr;gap:8px;margin-top:6px;padding:12px 4px 6px;border-top:1px solid rgba(255,255,255,.07);}
.kl-anmelden,.kl-start{display:flex;align-items:center;justify-content:center;height:46px;border-radius:12px;font-family:var(--sans);font-size:14.5px;font-weight:600;text-decoration:none;}
.kl-anmelden{color:#e9edf5;border:1px solid rgba(255,255,255,.14);}
.kl-start{color:#fff;background:#3d7dff;}
.kl-sprache{display:flex;align-items:center;justify-content:space-between;padding:10px 8px 4px;font-family:var(--sans);font-size:12.5px;color:rgba(232,236,244,.55);}
.kl-seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.10);}
.kl-seg button{border:0;background:none;cursor:pointer;padding:6px 12px;border-radius:999px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:rgba(232,236,244,.6);}
.kl-seg button.an{background:rgba(255,255,255,.10);color:#fff;}
html.kl-sperre{overflow:hidden;}

@media (max-width:900px){
  body > nav.kl{grid-template-columns:auto 1fr;gap:10px;height:56px;padding:0 12px 0 16px;}
  html body > nav.kl .nav-center,html body > nav.kl .nav-login,html body > nav.kl .i18n-switch{display:none !important;}
  nav.kl .nav-right{gap:8px;}
  html body > nav.kl .nav-start{padding:9px 15px !important;font-size:13px;}
  nav.kl .kl-knopf{display:inline-flex;}
  .ticker-strip{top:56px;}
  .hero{padding-top:132px;}
}
@media (max-width:640px){
  .hero{padding-top:128px;}
}
@media (min-width:901px){ .kl-blatt,.kl-hinter{display:none !important;} }
@media (prefers-reduced-motion:reduce){ .kl-blatt,.kl-hinter,nav.kl .kl-knopf span,nav.kl .nav-center a{transition:none;} }

/* ═══ (landing-plus) Einstieg, neu am 12.10.2026 ═══════════════════════════
   Ein Hauptknopf; Angebot und Aktion als ruhige Textzeilen statt zweier
   leuchtender Kästen. Am Handy blendet sich der Knopf in der Kopfleiste aus,
   solange der Hauptknopf zu sehen ist (Skript bei #hero-btns). */
.hero .hero-btns{margin:0 0 16px;}
.hero .hero-offer{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin:0 0 6px;padding:0;border:0;border-radius:0;background:none;
  font:400 13.5px/1.5 var(--sans);color:var(--text2);}
.hero .hero-offer .ho-frei{font:600 13.5px/1.5 var(--sans);letter-spacing:0;text-transform:none;
  color:#e8ecf5;background:none;padding:0;border-radius:0;}
.hero .hero-offer .ho-frei::after{content:'·';margin-left:8px;color:var(--dim);font-weight:400;}
.hero .hero-offer .ho-dann{font-size:13.5px;padding:0;white-space:normal;color:var(--text2);}
.hero .hero-promo{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  margin:0 0 26px;padding:0;border:0;border-radius:0;background:none;width:auto;}
.hero .hero-promo .hp-code{font:700 11px/1 var(--mono,'Courier New',monospace);letter-spacing:.14em;
  color:#9fc0ff;background:rgba(61,125,255,.14);box-shadow:inset 0 0 0 1px rgba(61,125,255,.4);
  border-radius:999px;padding:5px 10px;}
.hero .hero-promo .hp-txt{font:500 13px/1.45 var(--sans);color:var(--text2);letter-spacing:0;}
.hero .hero-promo[hidden]{display:none !important;}

@media (max-width:640px){
  .hero .hero-btns{flex-direction:column;align-items:stretch;gap:4px;margin-bottom:14px;}
  .hero .hero-btns .h-btn-primary{flex:none;padding:15px 18px;font-size:15.5px;border-radius:12px;}
  /* Preise als schlichter Textlink unter dem Hauptknopf statt zweitem Knopf */
  .hero .hero-btns .h-btn-ghost{flex:none;border:0;background:none;color:var(--text2);
    padding:10px 18px;font-size:14px;text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:rgba(255,255,255,.25);}
  .hero .hero-offer{flex-direction:column;gap:1px;}
  .hero .hero-offer,.hero .hero-offer .ho-frei,.hero .hero-offer .ho-dann{font-size:13.5px;}
  .hero .hero-offer .ho-frei::after{display:none;}
  .hero .hero-promo{margin-bottom:22px;padding:0 6px;}
  .hero .hero-promo .hp-txt{font-size:12.5px;text-align:center;}
}
@media (max-width:900px){
  html body > nav.kl .nav-start{transition:opacity .2s ease,visibility .2s ease;}
  html.hero-knopf-sichtbar body > nav.kl .nav-start{opacity:0;visibility:hidden;}
}

/* ═══ (landing-plus) Echte Ansicht, neu am 12.10.2026 ═════════════════════ */
.echt{max-width:1200px;margin:0 auto;padding:56px 40px 24px;}
.echt-kopf{text-align:center;max-width:620px;margin:0 auto 36px;}
.echt-eyebrow{display:inline-block;font:600 11px/1 var(--mono,monospace);letter-spacing:.14em;text-transform:uppercase;
  color:#7ea6ff;margin-bottom:14px;}
.echt-kopf h2{font:600 clamp(26px,3.2vw,36px)/1.15 var(--sans);letter-spacing:-.02em;color:#f2f4f8;margin:0 0 12px;}
.echt-kopf p{font:400 15.5px/1.6 var(--sans);color:var(--text2);margin:0;}
.echt-bild{position:relative;margin:0 auto;max-width:1040px;padding:0 0 56px;}
.echt-rechner{position:relative;border-radius:14px;overflow:hidden;background:#0b0d10;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(61,125,255,.08);}
.echt-leiste{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#101318;
  border-bottom:1px solid rgba(255,255,255,.06);}
.echt-leiste i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14);}
.echt-leiste span{margin-left:12px;font:500 11.5px var(--sans);color:#6d747f;}
.echt-rechner img{display:block;width:100%;height:auto;}
.echt-handy{position:absolute;right:-28px;bottom:0;width:23%;max-width:236px;border-radius:30px;overflow:hidden;
  border:6px solid #1a1d23;background:#08090b;box-shadow:0 30px 70px rgba(0,0,0,.65);}
.echt-handy img{display:block;width:100%;height:auto;}
.echt-bild figcaption{margin-top:18px;text-align:center;font:400 12px/1.5 var(--sans);color:var(--dim);}

@media (max-width:1120px){ .echt-handy{right:12px;} }
@media (max-width:640px){
  .echt{padding:40px 16px 8px;}
  .echt-kopf{margin-bottom:24px;}
  .echt-kopf p{font-size:14.5px;}
  .echt-bild{padding:0;}
  /* Am Handy ist das Rechnerbild zu klein zum Lesen — dort zählt das Handybild.
     Oben angeschnitten: Kopf, Seitentitel und die ersten Kennzahlen. */
  .echt-rechner{display:none;}
  .echt-handy{position:relative;right:auto;bottom:auto;width:74%;max-width:290px;margin:0 auto;aspect-ratio:390/620;border-radius:28px;}
  .echt-handy img{height:100%;object-fit:cover;object-position:top;}
  .echt-bild figcaption{margin-top:14px;padding:0 12px;}
}

/* ═══ (landing-plus) Länge, neu am 12.10.2026 ════════════════════════════════
   Gemessen am Handy: 11.413 px, davon rund 1.300 px reiner Innenabstand —
   „.section{padding:110px 40px}“ stand im Stil NACH der Handy-Regel (64 px)
   und galt deshalb überall. Unter jedem Untertitel lagen zusätzlich ~86 px
   (26 px Polster, Linie, 60 px Rand). Inhalte bleiben vollständig; Ablauf
   und Vertrauen zeigen am Handy die ersten Einträge, der Rest per Knopf. */
html body .section{padding-top:88px;padding-bottom:88px;}
html body .section .s-sub{margin-bottom:40px;}
@media (min-width:761px){ html body .section.band{padding-top:104px;padding-bottom:104px;} }
.lp-mehr{display:none;}
@media (max-width:760px){
  html body .section,html body .section.band{padding-top:60px;padding-bottom:60px;}
  html body .section .s-sub{margin-bottom:24px;padding-bottom:18px;}
  #vergleich .lp-vgl,#ablauf .flow,#vertrauen .trust-grid{margin-top:0;}
  #ablauf .flow:not(.alle) .flow-step:nth-child(n+5){display:none;}
  #vertrauen .trust-grid:not(.alle) .trust-card:nth-child(n+4){display:none;}
  .lp-mehr{display:flex;align-items:center;justify-content:center;width:100%;margin-top:14px;padding:14px;cursor:pointer;
    border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
    color:#7ea6ff;font:600 14px var(--sans);}
  .lp-mehr[hidden]{display:none;}
  .rate-cta{margin-top:24px;}
  /* Preiskarten: gleich breit statt nach Inhalt (Monat war 260 px, Jahr 310 px) */
  #pricing .pricing-wrap{align-items:stretch;max-width:420px;margin:0 auto;}
  #pricing .pricing-wrap .price-card{max-width:none;min-width:0;}
  #pricing .s-sub{margin-bottom:28px !important;}
}