/* ==========================================================================
   Scheidung Online - Kanzlei Theo Schmidt
   Styling im Look des Claude-Design-Mockups. Schlankes, portierbares CSS.
   ========================================================================== */

/* --- Schriften lokal (DSGVO-konform, kein Google-CDN) --- */
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-800-normal.woff2') format('woff2'); }

:root{
  --brand:#274b3f; --brand-dark:#1e3c32; --brand-deep:#1c352c; --save:#2f7a5c;
  --accent:#2f5d4f; --sage:#9fc2b2; --mist:#dfeae2; --hero-sub:#bcd2c8;
  --ink:#1c2521; --muted:#4f5852; --muted2:#56635c; --muted3:#6b7269; --faint:#8a8478;
  --bg:#ffffff; --bg-soft:#f3f6f3; --bg-cream:#faf9f6; --bg-mint:#eef5f0;
  --line:#eef1ee; --line2:#e1e8e2; --line3:#e7e2d9; --line4:#e8ece7;
  --radius:16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;}
img{max-width:100%;display:block;}
h1,h2,h3,p{margin:0;}
a{color:inherit;}

.wrap{max-width:1160px;margin:0 auto;}
.sec{padding:clamp(44px,5vw,62px) clamp(20px,5vw,56px);}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.h2{font-size:clamp(24px,3.2vw,30px);font-weight:800;letter-spacing:-0.02em;}
.lead{font-size:16px;line-height:1.6;color:var(--muted);}

/* --- Header --- */
.hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:14px clamp(18px,5vw,56px);background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.hdr .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--brand);letter-spacing:-0.01em;}
.hdr .logo .mark{width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;}
.hdr nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);}
.hdr nav a{font-size:14.5px;color:var(--muted);text-decoration:none;}
.hdr nav a.tel{font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap;}

.btn{font-family:inherit;cursor:pointer;border:0;border-radius:10px;font-weight:700;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;}
.btn-primary{background:var(--brand);color:#fff;font-size:14px;padding:10px 18px;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-lg{font-size:15px;padding:14px 22px;border-radius:12px;display:inline-flex;align-items:center;gap:8px;}

/* --- Hero --- */
.hero{background:var(--brand);color:#fff;}
.hero .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:stretch;}
.hero .copy{padding:clamp(40px,5vw,64px) clamp(20px,5vw,56px);display:flex;flex-direction:column;justify-content:center;}
/* Breite Screens: fester Einzug links, Text rueckt naeher ans Bild, bleibt aber voll breit */
@media(min-width:1500px){ .hero .copy{padding-left:160px;} }
.hero .kicker{font-size:12.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--sage);margin-bottom:16px;}
.hero h1{font-size:clamp(30px,4.6vw,46px);line-height:1.07;font-weight:800;letter-spacing:-0.03em;max-width:640px;margin-bottom:18px;}
.hero .sub{font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:var(--hero-sub);max-width:560px;margin-bottom:26px;}
.hero .cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;max-width:680px;}
.cta-card{display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:0;border-radius:var(--radius);
  padding:20px;cursor:pointer;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,background .15s ease;}
.cta-card:hover{transform:translateY(-2px);}
.cta-card .ico{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;}
.cta-card .tag{font-size:11.5px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.cta-card .name{margin:6px 0 5px;font-size:18px;font-weight:700;}
.cta-card .desc{font-size:13.5px;line-height:1.45;}
.cta-card .go{display:inline-flex;align-items:center;gap:5px;margin-top:14px;font-size:14px;font-weight:700;}
.cta-card.light{background:#fff;}
.cta-card.light:hover{box-shadow:0 14px 30px rgba(0,0,0,0.25);}
.cta-card.light .ico{background:var(--bg-mint);}
.cta-card.light .tag{color:var(--accent);}
.cta-card.light .name{color:var(--ink);}
.cta-card.light .desc{color:#56635c;}
.cta-card.light .go{color:var(--brand);}
.cta-card.ghost{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.22);}
.cta-card.ghost:hover{background:rgba(255,255,255,0.14);}
.cta-card.ghost .ico{background:rgba(255,255,255,0.12);}
.cta-card.ghost .tag{color:var(--sage);}
.cta-card.ghost .name{color:#fff;}
.cta-card.ghost .desc{color:var(--hero-sub);}
.cta-card.ghost .go{color:#fff;}
.hero .media{position:relative;min-height:clamp(280px,34vw,560px);background:#254a40;overflow:hidden;}
.hero .media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--sage);
  font-size:13px;text-align:center;padding:20px;background:linear-gradient(135deg,#2a5348,#1c352e);}

/* --- Botschaft / Feature-Karten --- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.feature{background:var(--bg-soft);border:1px solid var(--line2);border-radius:var(--radius);padding:24px 22px;}
.feature .ico{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;margin-bottom:15px;}
.feature .t{font-size:18px;font-weight:700;margin-bottom:6px;}
.feature p{font-size:14.5px;line-height:1.55;color:var(--muted);}
.disclaimer{margin-top:18px;font-size:13px;line-height:1.5;color:var(--faint);max-width:680px;}

/* --- Trust Stats --- */
.stats{background:var(--bg-soft);border-top:1px solid var(--line4);border-bottom:1px solid var(--line4);
  padding:clamp(28px,4vw,40px) clamp(20px,5vw,56px);}
.stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;}
.stats .num{font-size:clamp(26px,3vw,32px);font-weight:800;letter-spacing:-0.02em;color:var(--brand);}
.stats .lbl{font-size:14px;color:var(--muted3);margin-top:3px;}

/* --- Team --- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;}
.person{border:1px solid var(--line3);border-radius:var(--radius);overflow:hidden;}
.person .photo{height:240px;background:linear-gradient(160deg,#e9efe9,#dbe6df);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:34px;font-weight:800;}
.person .body{padding:18px 20px;}
.person .nm{font-size:17px;font-weight:700;}
.person .role{font-size:14px;color:var(--muted3);margin-top:4px;line-height:1.45;}

/* --- Ablauf --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;}
.step .no{font-size:14px;font-weight:800;color:var(--accent);margin-bottom:10px;}
.step .t{font-size:17px;font-weight:700;margin-bottom:6px;}
.step .d{font-size:14.5px;line-height:1.55;color:var(--muted);}

/* --- Kosten --- */
.kosten .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:44px;align-items:center;}
.pricecard{background:var(--bg-soft);border:1px solid var(--line2);border-radius:18px;padding:30px;}
.pricecard .cap{font-size:14px;color:var(--muted3);margin-bottom:6px;}
.pricecard .big{font-size:clamp(28px,4vw,34px);font-weight:800;color:var(--save);letter-spacing:-0.02em;}
.pricecard .note{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5;}

/* --- Infopaket --- */
.info .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;align-items:center;max-width:1000px;margin:0 auto;}
.info-card{background:#fff;border:1px solid var(--line2);border-radius:18px;padding:26px;}
.info-card label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.field{width:100%;font-family:inherit;font-size:15px;padding:13px 14px;border:1px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink);}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,93,79,0.12);}

/* --- FAQ --- */
.faq{max-width:820px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line3);padding:18px 0;}
.faq details:last-child{border-bottom:0;}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:17px;font-weight:700;list-style:none;cursor:pointer;}
.faq summary::-webkit-details-marker{display:none;}
.faq .plus{color:var(--accent);font-size:22px;font-weight:400;transition:transform .2s;}
.faq details[open] .plus{transform:rotate(45deg);}
.faq p{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--muted);}

/* --- Footer --- */
.ftr{background:var(--brand-deep);color:#cdd9d2;padding:clamp(36px,4vw,48px) clamp(20px,5vw,56px);}
.ftr .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px;}
.ftr .logo{display:inline-flex;background:#fff;border-radius:10px;padding:9px 13px;margin-bottom:16px;font-weight:800;color:var(--brand);}
.ftr .col h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;}
.ftr .col div{font-size:14px;line-height:1.9;}
.ftr .legal{margin-top:32px;border-top:1px solid rgba(255,255,255,0.12);padding-top:18px;font-size:12.5px;color:#8fa399;}

/* ==========================================================================
   Overlay + Funnel
   ========================================================================== */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(18,28,24,0.58);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:24px;}
.overlay.open{display:flex;animation:ovFade .2s ease;}
.panel{position:relative;width:100%;max-width:500px;max-height:min(90vh,720px);background:#fff;display:flex;flex-direction:column;
  border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(16,30,26,0.38),0 6px 18px rgba(16,30,26,0.14);animation:ovPop .3s cubic-bezier(.16,1,.3,1);}
.panel-hd{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line4);background:#fbfcfb;}
.panel-hd .ttl{font-size:13px;font-weight:600;color:var(--muted2);}
.panel-close{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted2);padding:6px 8px;border-radius:8px;}
.panel-close:hover{background:#eef2ef;}
.panel-body{flex:1;overflow-y:auto;background:#fff;}
@keyframes ovFade{from{opacity:0;}to{opacity:1;}}
@keyframes ovPop{from{transform:translateY(14px) scale(.97);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
@keyframes ovSheet{from{transform:translateY(100%);}to{transform:translateY(0);}}
@media(max-width:600px){
  .overlay{padding:0;align-items:flex-end;}
  .panel{max-width:100%;max-height:92dvh;border-radius:22px 22px 0 0;animation:ovSheet .3s cubic-bezier(.16,1,.3,1);}
}

/* Funnel */
/* Unten nur ein kleiner Abstand. Der Fussbereich klebt zwar am unteren Rand,
   steht aber als letztes Element im Fluss und nimmt sich seinen Platz selbst.
   Bei voller Scrollposition liegt er auf seiner natuerlichen Stelle und
   verdeckt nichts. Wer hier Platz fuer ihn reserviert, erzeugt nur tote Hoehe
   und damit eine Scroll-Leiste, obwohl der Inhalt passt. */
.funnel{padding:22px clamp(18px,5vw,30px) 22px;}
/* Frageschritte vertragen mehr Luft unter der letzten Kachel. Ergebnis- und
   Kontaktschritt bleiben bei 22px: dort deckelt max-height das Panel bei
   720px, und die Ergebnis-Kachel bringt eigenen Innenabstand mit. */
.funnel.frage{padding-bottom:28px;}
/* Der Aussenabstand des letzten Blocks ragt sonst unten heraus und zaehlt
   ebenfalls zur Scrollhoehe. */
.step-pane > :last-child{margin-bottom:0;}
.progress{position:sticky;top:0;background:#fff;padding:6px 0 16px;z-index:2;}
.progress .track{height:6px;background:#e8ece7;border-radius:999px;overflow:hidden;}
.progress .bar{height:100%;width:0;background:var(--accent);border-radius:999px;transition:width .3s ease;}
.progress .meta{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;color:var(--muted3);}
.step-pane{display:none;animation:stepIn .25s ease;}
.step-pane.active{display:block;}
@keyframes stepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.q{font-size:20px;font-weight:800;letter-spacing:-0.01em;margin:6px 0 4px;}
.q-sub{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.5;}

/* --- Einwilligung mit eigener Fehlerzeile --- */
/* Der Platz fuer die Meldung ist RESERVIERT. Erschiene sie erst beim Fehler,
   wuechse die Seite in dem Moment, und der Knopf spraenge unter dem Finger
   weg. Auf dem Telefon waere das schlimmer als gar keine Meldung. */
.consent-row{margin-bottom:4px;}
.consent-row .consent-err{
  min-height:20px;margin:2px 0 0 26px;
  font-size:13px;line-height:1.45;color:var(--warn);
}
/* Das Ankreuzfeld selbst wird markiert, so wie die uebrigen Pflichtfelder. */
.consent-row.fehlerhaft .consent{color:var(--warn);}
.consent-row.fehlerhaft input[type=checkbox]{
  outline:2px solid var(--warn);outline-offset:2px;border-radius:3px;
}

/* --- Erklaerungen zu einzelnen Begriffen --- */
/* Aufklappbar per Klick, nicht per Hover: auf dem Telefon gibt es kein
   Hover. Die Knoepfe sind bewusst leise gesetzt, sie sollen als Angebot
   lesbar sein und nicht mit den Antworten um Aufmerksamkeit ringen. */
.hilfen{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 16px;}
.hilfe{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--line2);border-radius:999px;
  padding:6px 12px 6px 8px;font:inherit;font-size:13px;color:var(--muted);
  cursor:pointer;line-height:1.3;
}
.hilfe:hover{border-color:var(--accent);color:var(--accent);}
.hilfe .fz{
  display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;border-radius:50%;
  background:var(--bg-mint);color:var(--accent);font-size:12px;font-weight:700;
}
.hilfe.offen{border-color:var(--accent);color:var(--accent);background:var(--bg-mint);}
.hilfe-text{
  background:var(--bg-mint);border-radius:8px;padding:12px 14px;margin:0 0 14px;
  font-size:14px;line-height:1.55;color:var(--muted);
}
.hilfe-text strong{color:var(--ink);}

.opts{display:grid;gap:10px;}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;font-family:inherit;
  font-size:15.5px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line2);border-radius:12px;
  padding:16px 18px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;}
.opt:hover{border-color:var(--sage);background:#f7faf8;}
.opt.sel{border-color:var(--accent);background:var(--bg-mint);box-shadow:0 0 0 3px rgba(47,93,79,0.10);}
.opt .chev{color:var(--accent);opacity:0;transition:opacity .15s;}
.opt.sel .chev{opacity:1;}

.revealed{margin-top:18px;padding-top:16px;border-top:1px solid var(--line2);}
.fieldrow{margin-bottom:16px;}
.field.is-invalid{border-color:#c0392b;background:#fffbfa;}
.fielderr{margin-top:6px;font-size:13px;line-height:1.45;color:#c0392b;}

.fieldrow label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px;}
.hint{font-size:12.5px;color:var(--muted3);margin-top:6px;line-height:1.4;}
.reassure{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--muted3);margin-top:14px;line-height:1.45;}
.reassure svg{flex-shrink:0;margin-top:1px;}

/* Result */
.result{background:var(--bg-soft);border:1px solid var(--line2);border-radius:16px;padding:24px;margin-bottom:18px;}
.result .cap{font-size:13px;color:var(--muted3);text-transform:uppercase;letter-spacing:0.05em;font-weight:700;margin-bottom:8px;}
.result .range{font-size:clamp(26px,7vw,34px);font-weight:800;color:var(--brand);letter-spacing:-0.02em;line-height:1.1;}
.result .brk{margin-top:16px;display:grid;gap:8px;}
.result .brk .li{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:8px 0;border-top:1px solid var(--line2);}
.result .saveline{margin-top:8px;font-size:clamp(20px,6vw,27px);font-weight:800;color:var(--save);letter-spacing:-0.01em;}
.result .save{margin-top:14px;background:#eaf3ee;border:1px solid #cfe4d8;border-radius:10px;padding:12px 14px;font-size:13.5px;color:#245c47;line-height:1.5;}

/* Funnel footer (sticky actions) */
.funnel-foot{position:sticky;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line4);
  padding:14px clamp(18px,5vw,30px);display:flex;gap:10px;align-items:center;}
.f-back{background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:var(--muted2);cursor:pointer;padding:12px 10px;border-radius:10px;}
.f-back:hover{background:#f1f4f1;}
.f-next{flex:1;background:var(--brand);color:#fff;font-family:inherit;font-size:15px;font-weight:700;border:0;border-radius:12px;padding:15px 20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;}
.f-next:hover{background:var(--brand-dark);}
.f-next:disabled{opacity:0.45;cursor:not-allowed;}

/* Consent + honeypot */
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.5;margin-top:8px;}
.consent input{margin-top:3px;width:17px;height:17px;flex-shrink:0;accent-color:var(--accent);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.err{color:#b3261e;font-size:13px;margin-top:8px;display:none;}
.done{text-align:center;padding:26px 8px;}
.done .check{width:60px;height:60px;border-radius:50%;background:var(--bg-mint);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.done h3{font-size:22px;font-weight:800;margin-bottom:8px;}
.done p{font-size:15px;color:var(--muted);line-height:1.6;max-width:380px;margin:0 auto;}

/* Sticky mobile CTA */
.mcta{position:fixed;bottom:0;left:0;right:0;z-index:50;display:none;gap:10px;padding:10px 14px;background:rgba(255,255,255,0.96);border-top:1px solid var(--line);backdrop-filter:blur(8px);}
.mcta .btn{flex:1;text-align:center;}
.mcta .btn-ghost{background:var(--bg-mint);color:var(--brand);}
@media(max-width:720px){ .mcta{display:flex;} body{padding-bottom:70px;} }

/* Notice for demo */
.demo-note{background:#fff8e6;border-bottom:1px solid #f0e2b8;color:#7a5d12;font-size:13px;text-align:center;padding:8px 16px;}

/* --- Ratgeber / Artikel --- */
.article{max-width:780px;margin:0 auto;}
.article h1{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-0.02em;margin:6px 0 16px;}
.article h2{font-size:21px;font-weight:800;margin:30px 0 10px;}
.article p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 14px;}
.article .intro{font-size:17.5px;color:var(--ink);}
.crumb{font-size:13px;color:var(--muted3);margin-bottom:12px;}
.crumb a{color:var(--accent);text-decoration:none;}
.badge-soon{display:inline-block;font-size:12px;font-weight:700;color:var(--muted3);background:#eef1ee;border-radius:999px;padding:4px 10px;margin-top:12px;}
.cardlink{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;}
.cardlink:hover{text-decoration:underline;}
.cta-band{background:var(--bg-mint);border:1px solid #cfe4d8;border-radius:16px;padding:22px 24px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:34px;}
.cta-band .t{font-size:16.5px;font-weight:700;color:var(--ink);max-width:520px;}

/* Footer-Links (Platzhalter) */
.ftr a{color:inherit;text-decoration:none;}
.ftr a:hover{text-decoration:underline;}