/* ==========================================================================
   christopherhellermann.de — Unterseiten-Stylesheet (ENTWURF)

   Schwarz, Weiss, Grau. Genau eine Farbe: ein dunkles Lila, und das nur
   dort, wo etwas anklickbar ist oder auf einen Zeiger reagiert. Alles
   andere traegt die Typografie.

   Die Grautoene sind minimal ins Violette gezogen, damit sie zum Akzent
   gehoeren und nicht wie ein zufaelliges Systemgrau wirken.
   ========================================================================== */

:root{
  /* Flächen */
  --paper:#f8f7fa;
  --paper-2:#f1f0f4;
  --surface:#ffffff;

  /* Text */
  --ink:#15131a;
  --ink-soft:#55515e;
  --ink-mute:#6f6b79;

  /* Linien */
  --line:#e4e2ea;
  --line-soft:#eeecf2;

  /* Der einzige Farbton der Seite. Sparsam einsetzen: Knöpfe,
     Zeigerzustände, hervorgehobene Wörter in Überschriften. Sonst nichts. */
  --lila:#4a2a6d;
  --lila-deep:#38204f;
  --lila-soft:#f0ecf6;

  /* Schrift */
  --font-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-head:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --maxw:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(21,19,26,.04),0 14px 34px -22px rgba(21,19,26,.22);
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;letter-spacing:-.01em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.1}
h2{font-size:clamp(1.55rem,3.1vw,2.15rem);line-height:1.2}
h3{font-size:1.15rem;line-height:1.35}
h1 b,h2 b,h3 b{font-weight:400;color:var(--lila)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--ink);text-decoration-color:var(--lila);text-underline-offset:3px}
strong{font-weight:600}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:16px;
}
.kicker::before{content:"";width:26px;height:1px;background:var(--ink-mute);opacity:.55}

.lead{font-size:1.12rem;line-height:1.65;color:var(--ink-soft);max-width:62ch}
.sub{color:var(--ink-soft);max-width:66ch;font-size:1.01rem}

/* ---------- Knöpfe ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border:1px solid var(--line);border-radius:2px;
  background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:.92rem;font-weight:500;
  text-decoration:none;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{border-color:var(--lila);transform:translateY(-1px)}
.btn--primary{background:var(--lila);border-color:var(--lila);color:#fff}
.btn--primary:hover{background:var(--lila-deep);border-color:var(--lila-deep)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
:focus-visible{outline:2px solid var(--lila);outline-offset:3px;border-radius:2px}

/* ---------- Kopfzeile ---------- */
header#hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,246,.92);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
header#hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 14px -8px rgba(30,28,25,.3)}
.nav{display:flex;align-items:center;gap:18px;height:66px}
/* Nur der Name, einzeilig. Kein Bildzeichen, kein Zusatz, keine Farbe.
   Die Serifenschrift traegt es allein; Lila erscheint erst beim Zeiger. */
.brand{
  font-family:var(--font-head);font-size:1.14rem;letter-spacing:.005em;
  text-decoration:none;color:var(--ink);margin-right:auto;white-space:nowrap;
  transition:color .18s var(--ease);
}
.brand:hover{color:var(--lila)}
@media (max-width:420px){.brand{font-size:1.02rem}}

.nav-links{display:flex;align-items:center;gap:4px}
.lnk{
  padding:8px 12px;border-radius:2px;
  font-size:.86rem;color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  transition:color .18s var(--ease),background .18s var(--ease);
}
.lnk:hover{color:var(--lila);background:var(--paper-2)}
.nav-cta{
  margin-left:8px;padding:9px 16px;border-radius:2px;
  background:var(--lila);color:#fff;
  font-size:.85rem;font-weight:500;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease);
}
.nav-cta:hover{background:var(--lila-deep)}
/* Zwischen 860 und 1000 px standen „Warum ich" und „Was du bekommst" zweizeilig
   im Kopf. Lieber die Links ausblenden, der CTA trägt die Zeile allein. */
@media (max-width:1000px){.nav-links .lnk{display:none}}

/* ---------- Hero ---------- */
.sub-hero{position:relative;padding:52px 0 64px;overflow:hidden;background:linear-gradient(180deg,var(--paper-2) 0%,var(--paper) 62%)}
.crumbs{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-mute);margin-bottom:30px;letter-spacing:.03em}
.crumbs a{color:var(--ink-mute);text-decoration:none}
.crumbs a:hover{color:var(--lila)}
.crumbs .sep{margin:0 8px;opacity:.5}
.crumbs .cur{color:var(--ink-soft)}

/* Die Textspalte ist bewusst breiter als das Video. Vorher war es umgekehrt,
   dadurch hatte die Überschrift zu wenig Platz und brach gedrückt um. */
.hero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:center}
.hs-text .lead{margin-top:22px;max-width:54ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:10px 30px;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-mute);
}
.hero-trust span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-mute);opacity:.9}

.video-buehne{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video-buehne video{display:block;width:100%;height:auto}
.video-ton{
  position:absolute;left:16px;bottom:16px;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px;border:0;border-radius:2px;
  background:rgba(251,249,246,.94);color:var(--ink);
  font-family:var(--font-body);font-size:.83rem;font-weight:500;cursor:pointer;
  transition:background .2s var(--ease);
}
.video-ton:hover{background:#fff}
.video-play{display:inline-flex;width:17px;height:17px;color:var(--lila)}
.video-play svg{width:100%;height:100%}

/* Umbruchpunkt liegt höher als früher: Bei breiterem Rahmen wird die
   Textspalte sonst schon knapp, bevor die Spalten überhaupt umbrechen. */
@media (max-width:1000px){
  .hero-split{grid-template-columns:1fr;gap:34px}
  .sub-hero{padding:34px 0 46px}
}

/* ---------- Sektionen ---------- */
.rule{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto}
.section{padding:82px 0}
.sec-head{margin-bottom:44px}
.sec-head h2{margin-bottom:14px}
@media (max-width:700px){.section{padding:58px 0}}

.note{
  margin-top:34px;padding:20px 24px;
  background:var(--paper-2);border-left:2px solid var(--ink);border-radius:0 2px 2px 0;
}
.note p{font-size:.97rem;color:var(--ink-soft);max-width:74ch}
.note strong{color:var(--ink)}

/* ---------- Karten ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:26px 26px 24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
/* Ergänzt am 11.09.2026: Seit dem Ratgeber-Block ist die ganze Karte ein
   Link (<a class="card">). Ohne diese Zeile erbt jeder Text darin den
   Unterstrich aus der a-Regel, und die Karte sieht aus wie ein Textlink,
   der über drei Zeilen läuft. Die Karte zeigt ihre Klickbarkeit über
   Rahmen und Hover, nicht über Unterstriche. */
a.card{ text-decoration:none; color:inherit; }
a.card:hover{ border-color:var(--lila); }
.card .cat{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px;
}
.card h3{margin-bottom:10px}
.card p{font-size:.95rem;color:var(--ink-soft)}
.card-foot{margin-top:auto;padding-top:18px}
.go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.9rem;font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
}
.go .arr{transition:transform .2s var(--ease)}
.go:hover{color:var(--lila);border-bottom-color:var(--lila)}
.go:hover .arr{transform:translateX(3px)}

/* ---------- Berufswege ---------- */
.stages{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
@media (max-width:900px){.stages{grid-template-columns:1fr}}
.stage{
  background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:26px 24px;box-shadow:var(--shadow);
}
.stage.is-featured{border-color:var(--ink);background:linear-gradient(180deg,var(--paper-2) 0%,var(--surface) 34%)}
.snum{
  display:block;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px;
}
.stage h3{margin-bottom:10px}
.stage>p{font-size:.94rem;color:var(--ink-soft);margin-bottom:14px}
.points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.points li{position:relative;padding-left:20px;font-size:.92rem;color:var(--ink-soft);line-height:1.55}
.points li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--ink);
}

/* ---------- Die sechs Wochen ---------- */
.weeks{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.week{
  display:grid;grid-template-columns:160px minmax(0,1fr) 250px;gap:40px;
  padding:26px 0;border-bottom:1px solid var(--line);align-items:start;
}
.wmeta{display:flex;flex-direction:column;gap:5px}
.wnum{font-family:var(--font-head);font-size:1.22rem;color:var(--ink)}
.wwho{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mute);
}
.week h3{margin-bottom:8px}
.week p{font-size:.95rem;color:var(--ink-soft);max-width:64ch}
.wres{
  font-size:.88rem;color:var(--ink-soft);
  background:var(--paper-2);border-radius:2px;padding:14px 16px;
}
.wres b{
  display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:5px;
}
@media (max-width:960px){
  .week{grid-template-columns:1fr;gap:14px}
  .wmeta{flex-direction:row;align-items:baseline;gap:14px}
}

/* ---------- Die acht Kapitel ---------- */
.chapters{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
@media (max-width:860px){.chapters{grid-template-columns:1fr}}
.chap{
  display:grid;grid-template-columns:52px 1fr;gap:18px;
  padding:22px 0;border-top:1px solid var(--line);
}
.cnum{
  font-family:var(--font-head);font-size:1.5rem;color:var(--ink-mute);
  line-height:1;padding-top:4px;font-variant-numeric:tabular-nums;
}
.chap h3{margin-bottom:6px}
.chap p{font-size:.93rem;color:var(--ink-soft)}

/* ---------- Was es nicht ist ---------- */
.nots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
@media (max-width:860px){.nots{grid-template-columns:1fr}}
.nots li{
  padding:20px 0 20px 30px;border-top:1px solid var(--line);
  position:relative;font-size:.95rem;color:var(--ink-soft);line-height:1.6;
  max-width:60ch;
}
.nots li::before{
  content:"";position:absolute;left:0;top:29px;
  width:13px;height:1px;background:var(--ink);
}
.nots b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px;font-size:1rem}

/* ---------- Meine Geschichte ---------- */
.story{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.story-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:60px;align-items:start}
@media (max-width:1050px){.story-grid{grid-template-columns:1fr;gap:32px}}
.story-portrait{
  position:relative;border-radius:3px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
}
.story-portrait img{display:block;width:100%;height:auto}
.story-body h2{margin-bottom:18px}
.story-body p{color:var(--ink-soft);max-width:64ch}
.pullquote{
  font-family:var(--font-head);font-size:1.32rem;line-height:1.45;
  color:var(--ink);border-left:2px solid var(--ink);
  padding:4px 0 4px 22px;margin:28px 0;max-width:56ch;
}
/* Zwei Zeilen statt einer langen: Name, darunter die Qualifikationen.
   Vorher stand alles in einer Zeile mit seitlichem Rollbalken, was auf
   schmalen Fenstern unbrauchbar war. */
.signature{
  margin-top:28px;display:flex;flex-direction:column;gap:3px;
  font-size:.8rem;letter-spacing:.02em;color:var(--ink-mute);
}
.signature b{font-size:.92rem;font-weight:600;color:var(--ink-soft);letter-spacing:0}

/* Platzhalter für Inhalte, die Chris noch liefert */
.entwurf-luecke{
  margin:26px 0;padding:18px 22px;
  border:1px dashed var(--ink-mute);border-radius:3px;
  background:var(--lila-soft);
}
.entwurf-luecke p{font-size:.92rem;color:var(--ink);max-width:70ch;margin:0}
.entwurf-luecke b{
  display:block;font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lila);margin-bottom:6px;
}

/* ---------- Person ---------- */
.person{display:grid;grid-template-columns:160px minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:760px){.person{grid-template-columns:1fr;gap:26px}}
.portrait{
  width:160px;height:160px;border-radius:50%;overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;position:relative;
}
.portrait img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.monogram{font-family:var(--font-head);font-size:2.4rem;color:var(--ink-mute)}
.p-role{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  color:var(--ink-mute);margin-bottom:16px;line-height:1.7;
}
.p-body p{color:var(--ink-soft);max-width:64ch}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--font-head);font-size:1.08rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:1.5px solid var(--lila);border-bottom:1.5px solid var(--lila);
  transform:rotate(45deg);transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{color:var(--lila)}
.faq-body{padding:0 40px 22px 0}
.faq-body p{font-size:.96rem;color:var(--ink-soft);max-width:72ch}

/* ---------- CTA-Band ---------- */
.cta-band{background:var(--paper-2);border-top:1px solid var(--line);padding:82px 0}
.cta-band h2{margin-bottom:14px}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta-note{
  margin-top:22px;font-size:.86rem;color:var(--ink-mute);
  line-height:1.7;max-width:60ch;
}

/* ---------- Fußzeile ---------- */
footer{background:var(--paper);border-top:1px solid var(--line);padding:54px 0 34px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:38px}
/* Startseite: fünf Blöcke nebeneinander, Kontakt ganz rechts. Die Anteile
   folgen den längsten Einträgen je Spalte („Ruhestands-Cashflow-Check"),
   der Abstand ist etwas enger, damit alles in den Rahmen passt. */
.foot-grid--5{grid-template-columns:1.15fr .8fr .95fr 1.15fr .95fr;gap:30px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .word{font-family:var(--font-head);font-size:1.1rem;color:var(--ink)}
.foot-brand p{margin-top:10px;font-size:.9rem;color:var(--ink-mute);max-width:30ch}
.foot-col h4{
  font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:14px;
}
.foot-col a,.foot-col span{display:block;font-size:.9rem;color:var(--ink-soft);text-decoration:none;padding:4px 0}
.foot-col a:hover{color:var(--lila)}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-mute);
}
.legal{display:flex;gap:20px}
.legal a{color:var(--ink-mute);text-decoration:none}
.legal a:hover{color:var(--lila)}
.foot-note{margin-top:18px;font-size:.78rem;color:var(--ink-mute);line-height:1.7;max-width:88ch}

/* ---------- Entwurfs-Banner ---------- */
.entwurf-banner{
  background:var(--lila-deep);color:#fff;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-align:center;padding:8px 16px;
}

/* ---------- Einblenden ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.go .arr,.faq summary::after{transition:none}
}

/* ==========================================================================
   Formular und Abschnitte des Rechners

   Der Ruhestands-Cashflow-Check stammt aus einem eigenen Repo und wurde fuer
   das Stylesheet von hellermann.vc geschrieben. Diese Klassen lagen dort in
   subpages.css und fehlten hier. Sie sind auf die Token dieser Seite
   uebersetzt, nicht kopiert.

   ⚠️ .hp ist das Honigtopf-Feld gegen automatisierte Eintraege. Ohne diese
   Regel steht es sichtbar im Formular, echte Menschen fuellen es aus, und
   ihre Absendung wird serverseitig als Spam abgewiesen. Nicht entfernen.
   ========================================================================== */

.frm{display:flex;flex-direction:column;gap:16px}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.frm .row{grid-template-columns:1fr}}

.field label{
  display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
  margin-bottom:8px;
}
.field .req,.req{color:var(--lila)}
.field input,.field textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:3px;color:var(--ink);font-family:var(--font-body);font-size:15px;
  padding:12px 14px;transition:border-color .25s var(--ease);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--lila)}
.field textarea{resize:vertical;min-height:78px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}

.consent{
  display:flex;gap:11px;align-items:flex-start;
  font-size:12.5px;color:var(--ink-soft);line-height:1.5;cursor:pointer;
}
.consent input{margin-top:2px;accent-color:var(--lila);width:15px;height:15px;flex:none}
.consent a{color:var(--lila);border-bottom:1px solid var(--line)}
.consent a:hover{color:var(--ink)}

.frm .submit{margin-top:4px}
.frm .submit .btn{width:100%;justify-content:center;cursor:pointer;border:0}

/* Honigtopf: fuer Menschen unsichtbar, fuer Skripte auffindbar. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-note{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-mute);
  margin:14px 0 0;text-align:center;letter-spacing:.02em;
}
.form-msg{display:none;text-align:center;padding:26px 6px 10px}
.form-msg.show{display:block}
.form-msg .ic{
  width:58px;height:58px;border-radius:50%;border:1px solid var(--line);
  color:var(--lila);display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:14px;
}
.form-msg h3{margin-bottom:8px}
.form-msg p{color:var(--ink-soft);font-size:.95rem;max-width:52ch;margin-inline:auto}

.section.slim{padding:clamp(56px,8vh,92px) 0}
.card.static:hover{transform:none;box-shadow:var(--shadow);border-color:var(--line)}
/* Dekorativer Lichtschein aus dem alten Auftritt. Der Hero dieser Seite
   traegt seinen Verlauf selbst, der zusaetzliche Schein wuerde doppeln. */
.sub-hero .glow{display:none}