/* ==========================================================================
   Fundament, tkohns.de
   --------------------------------------------------------------------------
   Das ist der Entwurf „Neu gedacht" vom 09.08.2026, unverändert übernommen
   und zum Gestaltungssystem der ganzen Website erklärt.

   Vorgeschichte, damit sie niemand wiederholt: Am 10.08. habe ich ein eigenes,
   schlankeres Fundament gebaut und die Startseite darin nachgezogen. Das Ergebnis
   war messbar enger und flacher: Abschnittsabstand 72 statt bis zu 140 Punkt,
   h1 bis 4,0 statt 4,6 rem, Seitenbreite 1120 statt 1180. Dazu fehlten die Dinge,
   die die Seite lebendig machen: die kursive Auszeichnung in der Hauptzeile mit
   dem Unterstrich, das feine Raster im Kopfbereich, die schwebende Karte, die
   Pillen, das Einblenden beim Scrollen. Thomas' Urteil war eindeutig, und die
   Zahlen gaben ihm recht.

   Geändert gegenüber dem Entwurf sind genau zwei Dinge:
     1. Überschriftenschrift Literata statt Gelasio, lokal eingebunden statt
        über Google Fonts. Entschieden am 10.08.
     2. Die Auszeichnung auf dunklem Grund steht in #9FC5EA. Das war im Entwurf
        schon so für `.card-band`, `.case` und `.final`, gilt jetzt überall.

   Klassennamen bleiben, wie sie sind. Sie umzubenennen hätte nur Fehler
   eingeführt, ohne dass eine Zeile besser aussieht.
   ========================================================================== */

@import url("schriften-website.css");

/* ============================================================
   tkohns. Startseite, neu gedacht
   Entwurf 2026-08-09
   ============================================================ */

:root{
  --navy:        #14293F;
  --navy-mid:    #1E3A5F;
  --navy-soft:   #40566E;
  --akzent:      #2F6099;   /* Akzentblau, ersetzt das frühere Karmesin */
  --akzent-hell: #4A7FBF;
  --akzent-dark: #26507F;
  --brand-rot:      #922B3E;  /* sparsam: Logo-Punkt, Auszeichnungs-Strich, Ziffern */
  --brand-rot-hell: #C4586A;  /* dieselbe Rolle auf dunklem Grund */
  --ivory:       #FEFEFE;   /* Grundfläche, das Off-White der Marke */
  --paper:       #FFFFFF;   /* Karten, damit sie sich abheben */
  --sand:        #F1F4F9;   /* ruhige Zwischenfläche, kühl statt beige */
  --sand-tief:   #E8EDF4;   /* die dunklere Hälfte in den Reiterkarten */
  --muted:       #5C6B7D;
  --line:        rgba(20,41,63,.12);
  --line-soft:   rgba(20,41,63,.07);
  --shadow-s:    0 1px 2px rgba(20,41,63,.04), 0 4px 16px rgba(20,41,63,.05);
  --shadow-m:    0 2px 4px rgba(20,41,63,.04), 0 18px 44px rgba(20,41,63,.09);
  --shadow-l:    0 4px 8px rgba(20,41,63,.05), 0 36px 80px rgba(20,41,63,.13);
  --r-s: 10px; --r-m: 18px; --r-l: 28px;
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ivory);
  color:var(--navy);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}

h1,h2,h3,.display{
  font-family:"Literata",Georgia,"Times New Roman",serif;
  /* Verteilt die Zeilen gleichmaessig, statt die letzte Zeile mit einem
     einzelnen Wort stehen zu lassen. Greift ueberall dort, wo kein fester
     Umbruch gesetzt ist. */
  text-wrap:balance;
  /* 600 statt 500, entschieden von Thomas am 10.08. am Regler der Schriftprobe.
     Literata ist für Bildschirme gezeichnet und verträgt die kräftigere Stufe,
     ohne fett zu wirken. Sie gibt der Kopfzeile den Halt, der bei 500 fehlte. */
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.12;
  margin:0;
}
h1{font-size:clamp(2.7rem,6.2vw,4.6rem); line-height:1.04; letter-spacing:-.028em}
h2{font-size:clamp(2rem,4vw,3.1rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem); line-height:1.25}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px}
/* Enger als im Entwurf, zweimal auf Thomas' Hinweis nachgezogen: erst von
   80 bis 140 auf 64 bis 112, am Abend des 10.08. noch einmal auf 52 bis 88.
   Zu bedenken ist dabei, dass sich der Wert verdoppelt: unten am einen und oben
   am naechsten Abschnitt. Zwischen zwei Bloecken liegen also bis zu 176 Punkt
   und nicht 88. Das ist der Grund, warum es hier grosszuegiger wirkt, als die
   Zahl vermuten laesst. */
.section{padding:clamp(52px,6vw,88px) 0}
.lead{font-size:clamp(1.08rem,1.4vw,1.24rem); color:var(--muted); line-height:1.62}

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.19em;
  text-transform:uppercase; color:var(--akzent);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
}
/* Der kurze Strich vor jeder Auszeichnung ist der Ort für Rot. Klein, aber überall wiederkehrend. */
.eyebrow::before{
  content:""; width:26px; height:2px; border-radius:2px; background:var(--brand-rot); opacity:.9;
}
/* Auf dunklem Grund stand hier bisher die aufgehellte Fassung. Thomas will am
   10.08. ueberall dasselbe Rot, auch dort. Es traegt weniger Kontrast gegen das
   Navy, ist aber dieselbe Farbe wie im Logo, und darum geht es. */
.card-band .eyebrow::before,
.case .eyebrow::before,
.final .eyebrow::before{background:var(--brand-rot); opacity:1}
.eyebrow.plain::before{display:none}

/* ---------- Buttons ---------- */
/* Der Knopf hat drei Bewegungen, die zusammen den Eindruck machen. Sie stammen
   aus der bisherigen Website und sind am 10.08. hierher zurueckgeholt worden,
   weil sie beim Neubau verlorengegangen waren.
     1. Der Grund ist kein flaches Blau, sondern ein Verlauf auf doppelter
        Flaeche. Beim Zeigen wandert seine Position, dadurch hellt der Knopf auf,
        ohne dass die Farbe springt.
     2. Ein schraeger Lichtstreifen laeuft einmal darueber. Das ist der Teil,
        den man sieht, ohne ihn benennen zu koennen.
     3. Eine haarfeine helle Oberkante, innen liegend. Sie gibt dem Knopf
        Koerper, wie Licht von oben.
   Der Streifen liegt ueber der Schrift, das ist Absicht: bei 45 Prozent Weiss
   ist er ein Reflex und kein Vorhang. */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  background:linear-gradient(135deg, var(--navy-mid), var(--akzent-dark), var(--navy-mid));
  background-size:200% 200%;
  color:#fff; text-decoration:none;
  padding:16px 28px; border-radius:999px; white-space:nowrap;
  font-size:.95rem; font-weight:600; letter-spacing:.005em;
  border:0; cursor:pointer;
  position:relative; overflow:hidden;
  box-shadow:0 2px 6px rgba(20,41,63,.20), 0 14px 30px rgba(20,41,63,.20),
             inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-position .6s var(--ease);
}
.btn::before{
  content:""; position:absolute; top:0; left:-75%;
  width:50%; height:100%; pointer-events:none;
  transform:skew(-20deg);
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.25) 45%,
             rgba(255,255,255,.45), rgba(255,255,255,.25) 55%, transparent);
  transition:left 1.4s var(--ease);
}
.btn:hover::before{left:125%}
.btn:hover{
  transform:translateY(-2px); background-position:100% 100%;
  box-shadow:0 4px 10px rgba(20,41,63,.22), 0 22px 44px rgba(20,41,63,.26),
             inset 0 1px 0 rgba(255,255,255,.18);
}
.btn .arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.btn.ghost{
  background:transparent; color:var(--navy);
  border:1px solid var(--line); box-shadow:none;
}
.btn.ghost::before{display:none}
.btn.ghost:hover{background:#fff; border-color:rgba(20,41,63,.25); box-shadow:var(--shadow-s)}

/* Die helle Fassung, fuer dunklen Grund. Sie behaelt den Lichtstreifen, er
   laeuft hier nur dunkel statt hell. Ohne das waere sie der einzige Knopf auf
   der Seite ohne Bewegung. */
.btn.light{
  background:linear-gradient(135deg,#fff,#EEF2F8,#fff); background-size:200% 200%;
  color:var(--navy); box-shadow:var(--shadow-m);
}
.btn.light::before{
  background:linear-gradient(120deg, transparent, rgba(20,41,63,.06) 45%,
             rgba(20,41,63,.12), rgba(20,41,63,.06) 55%, transparent);
}
.btn.light:hover{background-position:100% 100%; box-shadow:var(--shadow-l)}

/* Auf dunklem Grund ist der dunkelblaue Knopf kaum zu sehen. Dort gilt ueberall
   die helle Fassung, ohne dass jede Stelle im HTML die Klasse tragen muss.
   Am 10.08. auf Thomas' Hinweis. */
.card-band .btn:not(.ghost),
.case .btn:not(.ghost),
.final .btn:not(.ghost){
  background:linear-gradient(135deg,#fff,#EEF2F8,#fff); background-size:200% 200%;
  color:var(--navy); box-shadow:var(--shadow-m);
}
.card-band .btn:not(.ghost)::before,
.case .btn:not(.ghost)::before,
.final .btn:not(.ghost)::before{
  background:linear-gradient(120deg, transparent, rgba(20,41,63,.06) 45%,
             rgba(20,41,63,.12), rgba(20,41,63,.06) 55%, transparent);
}

/* Der Knopf in der Kopfzeile steht auf hellem Grund und soll dort nicht als
   blauer Block sitzen, sondern als ruhiger Umriss. So haelt es auch die
   bisherige Website. */
.nav-cta{
  padding:11px 22px; font-size:.88rem;
  background:transparent; color:var(--navy);
  border:1.5px solid var(--line); box-shadow:none;
}
.nav-cta::before{display:none}
.nav-cta:hover{
  background:#fff; color:var(--navy);
  border-color:var(--akzent); box-shadow:var(--shadow-s);
}

.linkline{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; font-weight:600; font-size:.95rem; color:var(--navy);
  border-bottom:1px solid rgba(20,41,63,.22); padding-bottom:3px;
  transition:color .3s, border-color .3s;
}
.linkline:hover{color:var(--akzent); border-color:var(--akzent)}

/* ============================================================
   Header
   ============================================================ */
/* Die Kopfzeile trug oben gar keinen Grund und bekam ihn erst beim Scrollen.
   Am ersten Bildschirm schwebten Logo und Menue dadurch frei auf Weiss und
   wirkten blass. Sie hat jetzt von Anfang an eine leichte Flaeche und eine
   feine Unterkante, beim Scrollen wird beides nur dichter. Am 10.08. auf
   Thomas' Hinweis geaendert. */
header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:18px 0;
  background:rgba(254,254,254,.78);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  transition:padding .4s var(--ease), background .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid var(--line-soft);
}
header.stuck{
  padding:12px 0; background:rgba(254,254,254,.93);
  border-color:var(--line);
  box-shadow:0 8px 24px rgba(20,41,63,.05);
}
.navrow{display:flex; align-items:center; justify-content:space-between; gap:28px}
/* Das Logo ist eine Datei, keine nachgebaute Schrift: Plus Jakarta Sans Bold, im SVG eingebettet */
.brand{display:block; line-height:0; flex:none}
.brand img{height:34px; width:auto; transition:opacity .3s}
.brand:hover img{opacity:.78}
nav.links{display:flex; align-items:center; gap:24px}
nav.links a{
  text-decoration:none; font-size:.92rem; font-weight:600; color:var(--navy);
  position:relative; padding:4px 0; transition:color .3s;
}
nav.links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--akzent); transition:width .35s var(--ease);
}
nav.links a:hover{color:var(--navy)}
nav.links a:hover::after{width:100%}
/* Aussehen steht oben bei den Knoepfen, damit es nicht an zwei Stellen liegt. */
@media(max-width:1040px){ nav.links{display:none} }

/* ============================================================
   Hero
   ============================================================ */
/* Oben deutlich weniger Polster. Vorher bis 200 Punkt, das war unter der
   festen Kopfzeile zu viel Leere. Unten mehr, weil die Modulkarte ueber
   die untere Kante des Fotos hinausragt. */
.hero{position:relative; padding:clamp(104px,10vw,150px) 0 clamp(84px,8vw,116px); overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-bg .blob{position:absolute; border-radius:50%; filter:blur(90px)}
.hero-bg .b1{width:640px; height:640px; right:-180px; top:-200px;
  background:radial-gradient(circle,rgba(30,58,95,.16),transparent 68%)}
.hero-bg .b2{width:520px; height:520px; left:-200px; top:180px;
  background:radial-gradient(circle,rgba(47,96,153,.11),transparent 68%)}
/* Das feine Gitternetz im Kopfbereich ist am 10.08. auf Thomas' Wunsch entfernt
   worden. Die weichen Farbflächen (.blob) bleiben, sie tragen die Tiefe allein. */
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.08fr .92fr; gap:70px; align-items:center;
}
@media(max-width:1020px){ .hero-grid{grid-template-columns:1fr; gap:56px} }

h1 .em{
  font-style:italic; color:var(--akzent);
  position:relative; white-space:nowrap;
}
h1 .em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em;
  /* Karmesin statt Blau, damit die Marke auf den ersten Blick auftaucht.
     Auf Thomas Wunsch vom 10.08.: das Rot soll vorne sichtbar sein. */
  background:linear-gradient(90deg,rgba(146,43,62,.55),rgba(146,43,62,.10));
  border-radius:3px;
  transform:scaleX(0); transform-origin:left;
  animation:swipe 1s .55s var(--ease) forwards;
}
@keyframes swipe{to{transform:scaleX(1)}}

.hero-sub{max-width:31em; margin-top:26px; font-size:clamp(1.08rem,1.35vw,1.24rem); color:var(--muted)}
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:38px}
.hero-note{
  display:flex; align-items:center; gap:9px; margin-top:22px;
  font-size:.88rem; color:var(--muted);
}
.hero-note svg{flex:none; color:var(--akzent)}

/* Vertrauensleiste */
.trust{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px;
}
.trust span{font-size:.79rem; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); font-weight:600}
.trust .t-item{font-size:.9rem; font-weight:600; color:var(--navy-soft); display:flex; align-items:center; gap:8px}
.trust .t-item::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--brand-rot); opacity:.65}
.trust img{height:30px; width:auto; opacity:.85}

/* ---------- Modul-Karte im Hero ---------- */
.modulcard{
  position:relative; background:var(--paper); border:1px solid var(--line-soft);
  /* unten mehr Platz: dort hängt die Porträtkarte über die Kante */
  border-radius:var(--r-l); padding:30px 30px 54px; box-shadow:var(--shadow-l);
  transform:perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition:transform .8s var(--ease);
}
.modulcard:hover{transform:perspective(1400px) rotateY(0deg) rotateX(0deg)}
.mc-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px}
.mc-tag{
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--akzent); background:rgba(47,96,153,.07);
  padding:6px 12px; border-radius:999px;
}
.mc-time{font-size:.8rem; color:var(--muted)}
.mc-title{font-family:"Literata",Georgia,serif; font-size:1.5rem; margin-bottom:6px}
.mc-desc{font-size:.88rem; color:var(--muted); margin-bottom:24px}
.mc-bar{height:5px; border-radius:999px; background:var(--sand); overflow:hidden; margin-bottom:26px}
.mc-bar i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--navy-mid),var(--akzent)); transition:width 2.4s var(--ease)}
.modulcard.on .mc-bar i{width:100%}
.mc-row{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-top:1px solid var(--line-soft);
  opacity:.35; transform:translateX(-6px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.modulcard.on .mc-row{opacity:1; transform:none}
.modulcard.on .mc-row:nth-child(1){transition-delay:.35s}
.modulcard.on .mc-row:nth-child(2){transition-delay:.75s}
.modulcard.on .mc-row:nth-child(3){transition-delay:1.15s}
.mc-check{
  flex:none; width:24px; height:24px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center;
  color:#fff; background:transparent; transition:background .5s var(--ease), border-color .5s;
}
.mc-check svg{opacity:0; transition:opacity .4s .1s}
.modulcard.on .mc-row .mc-check{background:var(--navy-mid); border-color:var(--navy-mid)}
.modulcard.on .mc-row .mc-check svg{opacity:1}
.mc-row b{font-weight:600; font-size:.95rem; display:block}
.mc-row em{font-style:normal; font-size:.82rem; color:var(--muted)}
.mc-foot{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.85rem; color:var(--muted);
}
.mc-foot b{color:var(--navy); font-weight:600}
/* Die schwebende Karte trägt jetzt ein Porträt statt einer Aussage.
   Zwei Gründe, beide von Thomas am 10.08.: die dunkle Kachel saß über der
   Fußzeile der Modulkarte und verdeckte „Gehört Ihnen. Ohne Bindung an mich.",
   und der ganze Kopfbereich war zu kühl. Ein Gesicht wärmt, wo Text es nicht kann.
   Sie sitzt jetzt unten links, also über der leeren Ecke, nicht über dem Text. */
.mc-float{
  position:absolute; left:-34px; bottom:-40px;
  display:flex; align-items:center; gap:18px;
  /* Dünner Rahmen in Karmesin, der zweite Ort fuer Waerme im Kopfbereich */
  background:var(--paper); border:1px solid rgba(146,43,62,.45);
  /* Grosszuegiger als beim ersten Anlauf. Thomas: zu gequetscht.
     Oben und unten 18 statt 12, rechts 30 statt 20. */
  border-radius:var(--r-m); padding:18px 30px 18px 18px;
  box-shadow:var(--shadow-l); margin:0; max-width:none;
}
.mc-float img{
  width:62px; height:62px; border-radius:50%; object-fit:cover; object-position:50% 16%;
  flex:none;
}
/* Beide Zeilen bleiben einzeilig. Ohne das bricht „Berufspaedagoge" um,
   und die Karte wirkt wieder gequetscht statt luftig. */
.mc-float figcaption{line-height:1.4; white-space:nowrap}
.mc-float b{
  display:block; font-family:"Literata",Georgia,serif; font-weight:600;
  font-size:1.02rem; line-height:1.3; color:var(--navy); margin-bottom:5px;
}
.mc-float span{font-size:.82rem; color:var(--muted)}
@media(max-width:1020px){ .mc-float{left:auto; right:0} }
@media(max-width:520px){ .mc-float{position:static; margin-top:22px} .modulcard{transform:none} }

/* ============================================================
   Visitenkarten-Band
   ============================================================ */
.card-band{
  background:var(--navy); color:#fff; position:relative; overflow:hidden;
}
.card-band::after{
  content:""; position:absolute; right:-140px; top:-140px; width:520px; height:520px;
  border-radius:50%; background:radial-gradient(circle,rgba(47,96,153,.30),transparent 66%);
}
/* Volle Breite statt 900 px, und eine Stufe kleiner. Thomas am 10.08.:
   „Das darf über die ganze Breite gehen und muss nicht zu riesig sein." */
.card-band .inner{position:relative; z-index:1; text-align:center}
.card-band .eyebrow{color:#9FC5EA}
.card-band .statement{
  font-family:"Literata",Georgia,serif; font-weight:400;
  font-size:clamp(1.3rem,2.1vw,1.85rem); line-height:1.45; letter-spacing:-.015em;
}
.card-band .statement b{font-weight:600; color:#fff}
.card-band .statement .hl{color:#BFDBF7; font-style:italic}
.card-band .sig{
  margin-top:34px; font-size:.9rem; letter-spacing:.05em; opacity:.62;
}

/* ============================================================
   Drei Schritte
   ============================================================ */
/* Ueberschrift links bekommt mehr Platz als der Vorspann rechts. Gemessen:
   „Mehr passiert bei Ihnen nicht." braucht 681 Punkt, „wie weit Sie gehen
   wollen." 586. Bei halbe-halbe (528) brachen beide um und liessen einzelne
   Woerter allein stehen. Bei 1.3 zu 0.7 sind es 686 Punkt, alle festen
   Umbrueche halten. */
/* Zwei Drittel Ueberschrift, ein Drittel Text, und der rechte Text beginnt auf
   Hoehe der Ueberschrift, nicht auf Hoehe der Auszeichnung darueber.
   Warum es ein Raster mit zwei Zeilen ist und keine Randabstaende: Die
   Auszeichnung steht in Zeile eins, Ueberschrift und Text stehen beide in
   Zeile zwei. Damit sind sie oben buendig, egal wie hoch die Auszeichnung
   gerade ist oder ob sie umbricht. Ein fester Abstand von oben waere geraten
   und bei jeder Schriftaenderung wieder falsch.
   Das innere div wird dafuer mit `display:contents` aufgeloest, seine Kinder
   werden dadurch selbst zu Rasterfeldern. Der Aufbau ist auf allen Seiten
   derselbe: div mit Auszeichnung und Ueberschrift, daneben ein Absatz. */
.head-2col{
  display:grid; grid-template-columns:2fr 1fr;
  column-gap:60px; align-items:start; margin-bottom:64px;
}
.head-2col > div{display:contents}
.head-2col > div > .eyebrow{grid-column:1; grid-row:1}
.head-2col > div > h2{grid-column:1; grid-row:2; margin-top:0}
.head-2col > *:not(div){grid-column:2; grid-row:2; margin-top:0}

/* Die Ueberschriftenspalte ist enger als frueher, dadurch brachen Zeilen an
   schlechten Stellen. Der Ausgleich verteilt sie gleichmaessig. */
.head-2col h2{text-wrap:balance}

@media(max-width:860px){
  .head-2col{grid-template-columns:1fr}
  .head-2col > div > .eyebrow{grid-row:1}
  .head-2col > div > h2{grid-row:2}
  .head-2col > *:not(div){grid-column:1; grid-row:3; margin-top:24px}
}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
@media(max-width:860px){ .steps{grid-template-columns:1fr} }
.step{
  padding:38px 34px 38px 0; border-top:2px solid var(--navy);
  position:relative; display:flex; flex-direction:column;
}
.step + .step{padding-left:34px; border-left:1px solid var(--line-soft)}
@media(max-width:860px){ .step + .step{padding-left:0; border-left:0} }
.step .n{
  font-family:"Literata",Georgia,serif; font-size:.95rem; font-weight:600;
  color:var(--brand-rot); letter-spacing:.08em; display:block; margin-bottom:16px;
}
.step h3{margin-bottom:12px}
.step p{font-size:.96rem; color:var(--muted)}
.step .tag{
  align-self:flex-start; margin-top:auto; font-size:.78rem; font-weight:600;
  letter-spacing:.06em; color:var(--navy-soft);
  background:var(--sand); padding:6px 13px; border-radius:999px;
}
.step p{margin-bottom:22px}

/* ============================================================
   Erklärsituation (Foto)
   ============================================================ */
.fotoband{margin-top:clamp(48px,5vw,66px); position:relative}
.fotoband figure{margin:0; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l); position:relative}
.fotoband img{
  width:100%; aspect-ratio:3/1; object-fit:cover; object-position:62% 44%;
  display:block;
}
.fotoband figure::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(0deg,rgba(20,41,63,.55) 0%,rgba(20,41,63,.12) 34%,transparent 56%),
    linear-gradient(100deg,rgba(20,41,63,.66) 0%,rgba(20,41,63,.30) 36%,transparent 64%);
}
.fotoband figcaption{
  position:absolute; left:clamp(28px,4vw,52px); bottom:clamp(28px,4vw,46px);
  z-index:2; color:#fff; max-width:23em;
}
.fotoband figcaption b{
  display:block; font-family:"Literata",Georgia,serif; font-weight:600;
  font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.26; margin-bottom:7px;
}
.fotoband figcaption span{font-size:.92rem; color:rgba(255,255,255,.8); line-height:1.5; display:block}
@media(max-width:620px){
  .fotoband img{aspect-ratio:4/5}
  .fotoband figure::after{background:linear-gradient(0deg,rgba(20,41,63,.82) 0%,rgba(20,41,63,.3) 46%,transparent 72%)}
  .fotoband figcaption{left:24px; right:24px; bottom:24px; max-width:none}
}

/* ============================================================
   WissensHub
   ============================================================ */
.hubgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media(max-width:820px){ .hubgrid{grid-template-columns:1fr} }
.hub{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--r-m);
  padding:34px 32px; box-shadow:var(--shadow-s);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.hub:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.hub .n{
  font-family:"Literata",Georgia,serif; font-size:.9rem; font-weight:600; color:var(--brand-rot);
  letter-spacing:.08em; display:block; margin-bottom:14px;
}
.hub h3{margin-bottom:10px}
.hub p{font-size:.95rem; color:var(--muted)}
/* Der WissensHub stand am 10.08. noch als vier Karten nebeneinander. Thomas'
   Urteil: nichtssagend, und ab dort wird die Seite textlastig. Jetzt sind es
   Reiter, dieselbe Bedienung wie bei „Ihr Weg" darueber. Damit steht statt
   vier Textbloecken immer nur einer da, und rechts daneben ein Satz zum
   Merken statt weiterer Fliesstext. Die Merksaetze sind nicht neu erfunden,
   sie stecken alle im jeweiligen Absatz. */
.pane-r.merksatz{display:flex; align-items:center}
.pane-r.merksatz p{
  margin:0; color:var(--navy);
  font-family:"Literata",Georgia,serif;
  font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.35; text-wrap:balance;
}
.pane-l .n{
  font-family:"Literata",Georgia,serif; font-size:.9rem; font-weight:600;
  color:var(--brand-rot); letter-spacing:.08em; display:block; margin-bottom:14px;
}

.hub-foot{
  margin-top:40px; padding-top:28px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.hub-foot .claim{font-family:"Literata",Georgia,serif; font-size:clamp(1.3rem,2.2vw,1.75rem)}

/* ============================================================
   Ressourcen
   ============================================================ */
.reso{
  display:grid; grid-template-columns:.42fr .58fr; gap:0;
  border:1px solid var(--line-soft); border-radius:var(--r-l); overflow:hidden;
  background:var(--paper); box-shadow:var(--shadow-m);
}
@media(max-width:820px){ .reso{grid-template-columns:1fr} }
.reso-cover{
  background:linear-gradient(155deg,#1E3A5F,#14293F 60%,#2F6099);
  color:#fff; padding:clamp(34px,4vw,48px);
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
  min-height:300px; position:relative; overflow:hidden;
}
.reso-cover::after{
  content:""; position:absolute; right:-90px; bottom:-90px; width:280px; height:280px;
  border-radius:50%; border:1px solid rgba(255,255,255,.14);
}
.reso-cover .kick{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; opacity:.72}
.reso-cover .tt{font-family:"Literata",Georgia,serif; font-size:1.75rem; line-height:1.2; position:relative; z-index:1}
.reso-cover .by{font-size:.8rem; opacity:.6}
.reso-body{padding:clamp(34px,4vw,48px); display:flex; flex-direction:column; justify-content:center}
.reso-body p{color:var(--muted)}
.reso-cta{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:28px}

/* ============================================================
   Momente (Flip-Karten)
   ============================================================ */
.moments{background:linear-gradient(180deg,var(--ivory),var(--sand) 52%,var(--ivory))}
.mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:980px){ .mgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .mgrid{grid-template-columns:1fr} }
.moment{
  position:relative; min-height:230px; cursor:pointer;
  perspective:1400px; background:none; border:0; padding:0; text-align:left;
}
.moment .face{
  position:absolute; inset:0; border-radius:var(--r-m); padding:30px;
  display:flex; flex-direction:column; justify-content:space-between;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .75s var(--ease), box-shadow .4s;
}
.moment .front{
  background:var(--paper); border:1px solid var(--line-soft); box-shadow:var(--shadow-s);
}
.moment:hover .front{box-shadow:var(--shadow-m)}
.moment .back{
  background:var(--navy); color:#fff; transform:rotateY(180deg);
  box-shadow:var(--shadow-m);
}
.moment.flipped .front{transform:rotateY(180deg)}
.moment.flipped .back{transform:rotateY(360deg)}
.moment q{
  font-family:"Literata",Georgia,serif; font-size:1.16rem; line-height:1.42; quotes:"„" "“";
  display:block;
}
.moment .who{font-size:.79rem; color:var(--muted); letter-spacing:.03em}
.moment .flipnote{
  font-size:.75rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--akzent); display:flex; align-items:center; gap:8px;
}
.moment .back .label{
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-rot); margin-bottom:12px; display:block;
}
.moment .back p{font-size:1.02rem; line-height:1.5}
.moments .after{
  margin-top:46px; text-align:center; font-size:1.02rem; color:var(--muted);
}

/* ============================================================
   Rechner
   ============================================================ */
.calc{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-l);
  background:var(--paper); border:1px solid var(--line-soft);
}
@media(max-width:860px){ .calc{grid-template-columns:1fr} }
.calc-l{padding:clamp(34px,4vw,52px)}
.calc-r{
  background:var(--navy); color:#fff; padding:clamp(34px,4vw,52px);
  display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.calc-r::after{
  content:""; position:absolute; left:-90px; bottom:-90px; width:340px; height:340px;
  border-radius:50%; background:radial-gradient(circle,rgba(47,96,153,.34),transparent 66%);
}
.calc-r > *{position:relative; z-index:1}
.field{margin-bottom:32px}
.field:last-child{margin-bottom:0}
.field label{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px}
.field .lb{font-size:.95rem; font-weight:500}
.field .val{font-family:"Literata",Georgia,serif; font-size:1.3rem; font-weight:600; color:var(--akzent); white-space:nowrap}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:999px;
  background:var(--sand); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--akzent); cursor:grab;
  box-shadow:0 2px 8px rgba(20,41,63,.16);
  transition:transform .25s var(--ease), box-shadow .25s;
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12); box-shadow:0 4px 14px rgba(47,96,153,.3)}
input[type=range]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%; background:var(--paper);
  border:1.5px solid var(--akzent); cursor:grab;
}
.calc-out .num{
  font-family:"Literata",Georgia,serif; font-size:clamp(3.4rem,7vw,5.4rem); line-height:1;
  font-weight:600; letter-spacing:-.03em;
}
.calc-out .unit{font-size:1.05rem; margin-top:10px; letter-spacing:.04em;
  color:var(--brand-rot); font-weight:600}
.calc-out p{margin-top:26px; font-size:1rem; opacity:.82; max-width:26em}
.calc-out .fine{margin-top:18px; font-size:.78rem; opacity:.5}

/* ============================================================
   Wege (Tabs)
   ============================================================ */
.tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px}
.tab{
  background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:13px 24px; cursor:pointer; font-size:.93rem; font-weight:600; color:var(--navy-soft);
  transition:all .35s var(--ease);
}
.tab:hover{border-color:rgba(20,41,63,.3); color:var(--navy)}
.tab[aria-selected=true]{background:var(--navy); border-color:var(--navy); color:#fff; box-shadow:var(--shadow-m)}
.pane{display:none}
.pane.active{display:block; animation:fadeUp .55s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.pane-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:0;
  border:1px solid var(--line-soft); border-radius:var(--r-l); overflow:hidden;
  background:var(--paper); box-shadow:var(--shadow-m);
}
@media(max-width:920px){ .pane-grid{grid-template-columns:1fr} }
.pane-l{padding:clamp(34px,4vw,54px)}
.pane-l h3{font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:16px}
.pane-l p{color:var(--muted)}
.pane-r{background:var(--sand-tief); padding:clamp(34px,4vw,54px)}
.spec{display:flex; gap:16px; padding:17px 0; border-bottom:1px solid rgba(20,41,63,.09)}
.spec:last-of-type{border-bottom:0}
.spec .k{flex:none; width:120px; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600; padding-top:3px}
.spec .v{font-size:.98rem; font-weight:500}
.pane-r .out{
  margin-top:22px; padding:20px 22px; background:var(--paper);
  border-radius:var(--r-m); border:1px solid var(--line-soft); box-shadow:var(--shadow-s);
}
.pane-r .out b{display:block; font-family:"Literata",Georgia,serif; font-size:1.1rem; margin-bottom:5px}
.pane-r .out span{font-size:.9rem; color:var(--muted)}
.pane-cta{margin-top:34px; display:flex; flex-wrap:wrap; gap:18px; align-items:center}

/* ============================================================
   Fall
   ============================================================ */
.case{background:var(--navy); color:#fff; position:relative; overflow:hidden}
.case::before{
  content:""; position:absolute; left:50%; top:-260px; width:760px; height:760px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle,rgba(47,96,153,.22),transparent 64%);
}
.case .inner{position:relative; z-index:1}
.case .eyebrow{color:#9FC5EA}
.case-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
@media(max-width:900px){ .case-grid{grid-template-columns:1fr; gap:44px} }
.case h2{color:#fff; margin-bottom:24px}
.case p{color:rgba(255,255,255,.76)}
.quotebox{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-l); padding:clamp(32px,4vw,46px); backdrop-filter:blur(8px);
}
.quotebox q{font-family:"Literata",Georgia,serif; font-size:clamp(1.3rem,2.1vw,1.6rem); line-height:1.45; quotes:"„" "“"}
.quotebox q::before,.quotebox q::after{color:#9FC5EA}
.quotebox .by{margin-top:26px; display:flex; align-items:center; gap:13px; font-size:.9rem}
.quotebox .by .ln{width:26px; height:1px; background:rgba(255,255,255,.35)}
.quotebox .by b{font-weight:600}
.quotebox .by span{color:rgba(255,255,255,.6)}
.case-facts{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.case-facts i{
  font-style:normal; font-size:.83rem; padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
}
.case a.linkline{color:#fff; border-color:rgba(255,255,255,.35)}
.case a.linkline:hover{color:#BFDBF7; border-color:#BFDBF7}

/* ============================================================
   Person
   ============================================================ */
.person-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center}
@media(max-width:900px){ .person-grid{grid-template-columns:1fr; gap:44px} }
.portrait{position:relative}
.portrait img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:62% 34%;
  border-radius:var(--r-l); box-shadow:var(--shadow-l); position:relative; z-index:1;
}
.portrait::before{
  content:""; position:absolute; inset:22px -22px -22px 22px;
  border-radius:var(--r-l); border:1px solid var(--line);
}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:52px; border-top:1px solid var(--line-soft);
}
@media(max-width:700px){ .stats{grid-template-columns:repeat(2,1fr)} }
.stat{padding:26px 20px 0 0}
.stat + .stat{padding-left:20px; border-left:1px solid var(--line-soft)}
@media(max-width:700px){ .stat:nth-child(3){border-left:0; padding-left:0} }
.stat b{
  display:block; font-family:"Literata",Georgia,serif; font-size:clamp(1.9rem,3.2vw,2.5rem);
  font-weight:600; letter-spacing:-.02em; line-height:1;
}
.stat span{display:block; margin-top:9px; font-size:.83rem; color:var(--muted); line-height:1.4}

/* ============================================================
   Schluss-CTA
   ============================================================ */
/* Der Verlauf endet unten auf genau der Farbe der Fusszeile. Vorher lief er
   nach #2A3F55 aus und stiess dort auf das dunklere Navy des Fusses, das war
   eine sichtbare Kante quer ueber die Seite. Jetzt geht das eine ins andere
   ueber. Wer die Reihenfolge aendert, muss die Fusszeile mitaendern. */
.final{
  background:linear-gradient(160deg,#1E3A5F 0%,#2A3F55 42%,#14293F 100%);
  color:#fff; position:relative; overflow:hidden;
}
.final::after{
  content:""; position:absolute; right:-180px; bottom:-220px; width:660px; height:660px;
  border-radius:50%; background:radial-gradient(circle,rgba(47,96,153,.32),transparent 66%);
}
.final .inner{position:relative; z-index:1; max-width:760px}
.final .eyebrow{color:#9FC5EA}
.final h2{color:#fff; font-size:clamp(2.2rem,4.6vw,3.5rem)}
.final p{color:rgba(255,255,255,.78); font-size:1.1rem; margin-top:22px; max-width:34em}
.final .row{display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:40px}
.final .meta{
  margin-top:34px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; gap:12px 34px; font-size:.88rem; color:rgba(255,255,255,.62);
}

/* ---------- Footer ---------- */
footer{background:var(--navy); color:rgba(255,255,255,.58); padding:62px 0 34px; font-size:.86rem}
footer a{text-decoration:none; transition:color .3s}
footer a:hover{color:#fff}
.fcols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px}
@media(max-width:860px){ .fcols{grid-template-columns:1fr 1fr; gap:34px} }
@media(max-width:520px){ .fcols{grid-template-columns:1fr} }
.fcols > div{display:flex; flex-direction:column; gap:11px; align-items:flex-start}
.fcols b{color:#fff; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; margin-bottom:4px}
.fcols p{margin:0; line-height:1.65}
.fbrand{height:30px; width:auto; margin-bottom:4px}
.frow{margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px}
footer img{height:26px; opacity:.55; filter:brightness(0) invert(1)}

/* ---------- Reveal ---------- */
/* Ohne JavaScript bleibt alles sichtbar, die Klasse js kommt aus dem Inline-Skript im head */
.js .rv{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js .rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  *{animation:none !important}
}

/* ---------- Kleine Bildschirme ---------- */
@media(max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 22px}
  h1{font-size:2.15rem}
  h1 .em{white-space:normal}
  h1 .em::after{display:none}
  .brand img{height:24px}
  .nav-cta{padding:11px 17px; font-size:.8rem}
  .hero{padding:112px 0 70px}
  .modulcard{padding:24px}
  .quotebox q{font-size:1.15rem}
  .moment{min-height:250px}
  .step{padding-right:0}
  .trust{gap:12px 20px}
}

/* ---------- Fortschrittsbalken ---------- */
.progress{position:fixed; top:0; left:0; height:2px; z-index:200;
  background:linear-gradient(90deg,var(--navy-mid),var(--akzent)); width:0}

/* ============================================================
   Reinschauen, die Tür ins Demo-Modul
   Ergänzt am 10.08.2026. Im Entwurf gab es diesen Abschnitt nicht,
   er ist mit derselben Sprache gebaut: Karte auf Papier, Pille als
   Etikett, ein Feld, ein Häkchen, ein Knopf.
   ============================================================ */
.demo-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center;
}
@media(max-width:900px){ .demo-grid{grid-template-columns:1fr; gap:40px} }

.demo-liste{list-style:none; padding:0; margin:26px 0 0}
.demo-liste li{
  position:relative; padding-left:30px; margin-top:13px;
  font-size:.96rem; color:var(--muted); line-height:1.55;
}
.demo-liste li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:8px; height:8px; border-radius:50%; background:var(--brand-rot); opacity:.9;
}

.demo-karte{
  background:var(--paper); border:1px solid var(--line-soft);
  border-radius:var(--r-l); padding:clamp(28px,3.4vw,40px);
  box-shadow:var(--shadow-l);
}
.demo-karte .mc-title{margin-top:16px}
.demo-karte .mc-desc{margin-bottom:4px}

.feld{display:block; margin-top:24px}
.feld > span{display:block; font-size:.8rem; font-weight:600; letter-spacing:.04em; margin-bottom:8px}
.feld input[type="email"], .feld input[type="text"], .feld textarea{
  width:100%; padding:15px 17px;
  font:inherit; color:var(--navy); background:var(--ivory);
  border:1px solid var(--line); border-radius:var(--r-s);
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.feld input:focus, .feld textarea:focus{
  outline:none; background:#fff;
  border-color:var(--akzent); box-shadow:0 0 0 3px rgba(47,96,153,.14);
}

.haken{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start;
  margin:20px 0 26px; cursor:pointer;
  font-size:.86rem; color:var(--muted); line-height:1.5;
}
.haken input{margin-top:.2em; width:1.05em; height:1.05em; accent-color:var(--akzent); flex:none}

.demo-fuss{margin-top:16px; font-size:.82rem; color:var(--muted)}

/* Tastaturbedienung muss sichtbar bleiben, überall */
:focus-visible{outline:2px solid var(--akzent); outline-offset:3px; border-radius:4px}


/* ============================================================
   Zwischen-CTA
   --------------------------------------------------------------
   Wörtlich übernommen aus der Landingpage, die live ist:
   `Code by Loveable/src/styles.css`, `.ee-cta-zeile` ab Zeile 1941.
   Thomas hat genau diesen Baustein als Vorbild geschickt.

   Erster Anlauf war eine schmale Zeile mit Textlink, das war zu leise.
   Jetzt: waagerechte Trennlinie, darunter mittig ein kurzer Satz in
   halbfett, darunter ein echter Knopf. Der Satz steht in Inter, nicht
   in Literata, das ist im Vorbild so und hält ihn vom Überschriften-
   register fern.
   ============================================================ */
/* Die Trennlinie ueber dem Zwischen-CTA laeuft in Rot. Am 10.08. so entschieden,
   damit die Naht zwischen Abschnitt und Aufforderung sichtbar wird, statt im
   Grau zu verschwinden. Die Zeile darunter steht in Literata und leicht: sie
   stand vorher in Inter und halbfett und wirkte dadurch wie ein Fremdkoerper
   zwischen den Ueberschriften ringsum. */
.cta-strip{
  margin-top:66px;
  padding-top:46px;
  position:relative;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:22px;
}
/* Der Strich laeuft nur ueber zwei Drittel und sitzt mittig, wie der Inhalt
   darunter. Als Rahmenlinie ginge das nicht, die haelt sich immer an die volle
   Breite ihres Kastens. */
.cta-strip::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:66%; height:1px; background:rgba(146,43,62,.55);
}
.cta-strip p{
  margin:0;
  font-family:"Literata",Georgia,serif;
  font-size:1.34rem; font-weight:400;
  letter-spacing:-.012em; line-height:1.45;
  color:var(--navy); max-width:46ch;
}
@media(max-width:640px){ .cta-strip{margin-top:46px; padding-top:34px} }

/* Auf dunklem Grund */
.card-band .cta-strip::before, .case .cta-strip::before, .final .cta-strip::before{background:var(--brand-rot)}
.card-band .cta-strip p, .case .cta-strip p, .final .cta-strip p{color:#fff}

/* Ein Abschnitt mit Zwischen-CTA braucht unten weniger Polster. Der Streifen
   sitzt sonst zusaetzlich zum Abstand und macht die Naht laenger statt kuerzer. */
.section:has(.cta-strip){padding-bottom:clamp(46px,4.6vw,68px)}


/* ============================================================
   Kopfbereich mit Foto
   --------------------------------------------------------------
   Ergaenzt am 10.08.2026. Thomas: der erste Blick wirkte nicht, ein
   Foto waermt den Einstieg. Genommen ist dieselbe Szene wie auf der
   laufenden Website. Die Modulkarte liegt jetzt ueber der unteren
   rechten Ecke des Fotos, die Portraetkarte haengt an ihrer linken
   unteren Ecke. Skizze von Thomas.

   Das Erklaerfoto im Abschnitt „So laeuft es" ist dafuer entfallen:
   es zeigte dieselbe Szene in einem anderen Ausschnitt, und zweimal
   derselbe Moment auf einer Seite ist schwaecher als einmal gut.
   ============================================================ */
.hero-media{position:relative}
.hero-foto{
  /* height:auto ist noetig. Ohne das gewinnt das height-Attribut im Markup
     gegen aspect-ratio, und das Bild behaelt seine Originalhoehe. */
  width:100%; height:auto; aspect-ratio:2/3;
  /* 54 Prozent: gemessen an drei Ausschnitten. Damit sitzt Thomas im
     linken Drittel, das die Karte frei laesst, die beiden anderen liegen
     darunter. Bei 34 Prozent lag sein Gesicht halb unter der Karte. */
  object-fit:cover; object-position:54% 30%;
  border-radius:var(--r-l); box-shadow:var(--shadow-l); display:block;
}
/* Die Karte sitzt unten rechts. Thomas sitzt im Foto links, sein Gesicht
   bleibt damit frei, verdeckt werden die beiden rechts. Ansage vom 10.08.
   Dazu wandert der Bildausschnitt nach links (object-position 38%), sonst
   rutscht Thomas aus dem Bild. */
.hero-media .modulcard{
  position:absolute; right:-30px; left:auto; bottom:-40px;
  width:296px;
  transform:none;                    /* ueber dem Foto keine Drehung */
  padding:20px 20px 40px;
}
.hero-media .modulcard:hover{transform:none}
.hero-media .mc-top{margin-bottom:14px}
.hero-media .mc-title{font-size:1.1rem}
/* Der Beschreibungssatz faellt im Kopfbereich weg, die drei Zeilen
   darunter sagen dasselbe. Ohne ihn wird die Karte 55 Punkt kuerzer
   und rutscht in die untere Haelfte des Fotos. */
.hero-media .mc-desc{display:none}
.hero-media .mc-bar{margin-bottom:18px}
.hero-media .mc-row{padding:8px 0}
.hero-media .mc-row b{font-size:.88rem}
.hero-media .mc-row em{font-size:.78rem}
.hero-media .mc-foot{margin-top:16px; padding-top:14px; font-size:.74rem}

@media(max-width:1020px){
  /* Untereinander statt nebeneinander. Die Karte ueberlappt die untere
     Bildkante um 64 Punkt.

     `position:relative; z-index:1` ist hier nicht Kosmetik, sondern noetig.
     Ohne das zeichnet der Browser das Bild ueber den **Hintergrund** der
     Karte, aber unter deren **Text**: Hintergruende aller Bloecke kommen in
     der Zeichenreihenfolge zuerst, danach erst die Inhalte, und ein Bild
     zaehlt dort als Inhalt. Sichtbar war das daran, dass „Lernmodul" und
     „38 Min. Lernzeit" frei auf dem Foto standen, waehrend die weisse Karte
     erst darunter begann. */
  .hero-foto{aspect-ratio:16/10}
  .hero-media .modulcard{
    position:relative; z-index:1;
    /* right/left aus der breiten Fassung zuruecksetzen. Bei `relative`
       wirken sie weiter und haben die Karte 30 Punkt nach rechts geschoben. */
    right:auto; left:auto; bottom:auto;
    width:auto; max-width:420px; margin:-64px auto 0;
  }
  .hero-media .mc-float{position:static; margin-top:20px; left:auto; right:auto}
}

/* --- Der Satz ueber dem CTA-Knopf bleibt einzeilig, wo er passt ------ */
.cta-strip p{max-width:74ch; text-wrap:balance}

/* Die Portraetkarte wandert auf die rechte Seite der Modulkarte, sonst
   rutscht sie in die Textspalte. */
.hero-media .mc-float{left:-30px; right:auto; bottom:-34px}


/* Rasterfelder duerfen schrumpfen. Ohne min-width:0 haelt ein Kind mit
   `white-space:nowrap` die ganze Spalte auf seiner Mindestbreite fest. */
.hero-grid > *{min-width:0}

/* Auf dem Handy darf die Namenszeile wieder umbrechen. Dort ist kein Platz,
   und `nowrap` hat die Kopfspalte 22 Punkt ueber den Rand gedrueckt. */
@media(max-width:620px){
  .mc-float figcaption{white-space:normal}
  .mc-float{padding:16px 18px 16px 16px; gap:14px}
  .mc-float img{width:54px; height:54px}
}


/* ============================================================
   Bausteine der Angebotsseite
   Ergaenzt am 10.08.2026. Alles in derselben Sprache wie der Entwurf:
   Karten auf Papier, Pillen als Etikett, Karmesin nur als Ziffer.
   ============================================================ */

/* --- Drei Anlaesse nebeneinander -------------------------------------- */
.hubgrid.drei{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){ .hubgrid.drei{grid-template-columns:1fr} }

/* --- Aufzaehlung mit fetter Vorderhaelfte ------------------------------ */
.punkte{list-style:none; padding:0; margin:0}
.punkte li{
  padding:20px 0; border-top:1px solid var(--line-soft);
  font-size:1rem; color:var(--muted); line-height:1.6;
}
.punkte li:first-child{border-top:0}
.punkte b{color:var(--navy); font-weight:600; display:block; margin-bottom:3px}

/* --- Die Saetze, die man selbst schon gesagt hat ----------------------- */
.saetze{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.saetze li{
  background:var(--paper); border:1px solid var(--line-soft);
  border-left:3px solid var(--brand-rot);
  border-radius:var(--r-s); padding:20px 26px;
  font-family:"Literata",Georgia,serif; font-size:1.12rem; line-height:1.45;
  box-shadow:var(--shadow-s);
}
.saetze li::before{content:"„"} .saetze li::after{content:"“"}

/* --- Gegenueberstellung Handbuch --------------------------------------- */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; align-items:stretch}
@media(max-width:760px){ .vs{grid-template-columns:1fr} .vs .vs-titel.zweite{margin-top:22px} }
.vs .vs-titel{
  font-size:.72rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--muted); padding-bottom:4px;
}
.vs .vs-titel.zweite{color:var(--brand-rot)}
.vs .feld{
  background:var(--sand); border-radius:var(--r-s); padding:18px 22px;
  font-size:.98rem; color:var(--muted); line-height:1.45; margin:0;
}
.vs .feld.wichtig{
  background:var(--paper); border:1px solid var(--line-soft);
  color:var(--navy); box-shadow:var(--shadow-s);
}
.merksatz{
  margin:44px 0 0; padding:30px 0 0; border-top:1px solid var(--line);
  font-family:"Literata",Georgia,serif;
  font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.45; max-width:40ch;
}

/* --- Fuenf Schritte untereinander -------------------------------------- */
.flow{display:grid; gap:0}
.flow-zeile{
  display:grid; grid-template-columns:76px 1fr 260px; gap:28px; align-items:start;
  padding:30px 0; border-top:1px solid var(--line-soft);
}
.flow-zeile:first-child{border-top:0}
@media(max-width:860px){
  .flow-zeile{grid-template-columns:56px 1fr; gap:18px}
  .flow-zeile > *{min-width:0}
  .flow-zeile .flow-part{grid-column:2; margin-top:6px}
}
.flow-zeile .n{
  font-family:"Literata",Georgia,serif; font-size:1.7rem; font-weight:600;
  color:var(--brand-rot); letter-spacing:-.02em; line-height:1;
}
.flow-zeile h3{margin-bottom:8px}
.flow-zeile p{font-size:.98rem; color:var(--muted); margin:0}
.flow-part{
  justify-self:start; align-self:center;
  font-size:.82rem; font-weight:600; letter-spacing:.04em;
  background:var(--sand); color:var(--navy-soft);
  padding:9px 16px; border-radius:999px; white-space:nowrap;
}
.flow-zeile.ergebnis .flow-part{background:var(--navy); color:#fff}

/* --- Was Sie bekommen --------------------------------------------------- */
.leistung{list-style:none; padding:0; margin:0}
.leistung li{
  display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start;
  padding:13px 0; font-size:1rem; line-height:1.5;
}
.leistung li::before{
  content:""; width:22px; height:22px; border-radius:50%; margin-top:2px;
  background:var(--akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* --- Haeufige Fragen ---------------------------------------------------- */
.faq{max-width:52em}
.faq details{border-bottom:1px solid var(--line); padding:6px 0}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:26px;
  padding:22px 0; cursor:pointer; list-style:none;
  font-family:"Literata",Georgia,serif; font-size:1.12rem; font-weight:600;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--akzent)}
.faq summary::after{
  content:""; flex:none; width:13px; height:13px;
  border-right:2px solid var(--akzent); border-bottom:2px solid var(--akzent);
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 0 24px; color:var(--muted); max-width:60ch}
.faq details p + p{margin-top:14px}

/* --- Abgrenzung --------------------------------------------------------- */
.abgrenzung{
  background:var(--sand); border-radius:var(--r-l); padding:clamp(30px,3.6vw,44px);
  display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:start;
}
@media(max-width:760px){ .abgrenzung{grid-template-columns:1fr; gap:18px} }
.abgrenzung h3{margin:0}
.abgrenzung p{font-size:.98rem; color:var(--muted)}


/* Steht bewusst ganz am Ende: `.flow-part{white-space:nowrap}` weiter oben
   ist gleich stark und wuerde sonst gewinnen. Ohne diese Regel sprengt die
   laengste Pille („Ihr Part: 3 Termine a 60 bis 90 Minuten") die Spalte, und
   die Seite bekommt auf dem Handy 25 Punkt Ueberlauf. */
@media(max-width:860px){
  .flow-part{white-space:normal}
}

/* Reduzierte Kopfzeile auf der Gespraechsseite: kein Menue, kein Knopf.
   Wer hier ist, soll nicht mehr abbiegen. */
header.schmal .navrow{padding-block:14px}
body.ziel .hero{padding-top:clamp(96px,9vw,132px)}
/* Die Hauptzeile steht hier in einer halben Spalte. Gemessen: „Zwanzig
   Minuten." braucht bei 73,6 px 589 Punkt, die Spalte hat 552. Eine Stufe
   kleiner, dann bleibt sie zweizeilig. */
body.ziel h1{font-size:clamp(2.4rem,5vw,4rem)}

/* Kennzeichnung optionaler Felder */
.feld .optional{
  font-style:normal; font-weight:400; color:var(--muted);
  font-size:.76rem; letter-spacing:0; margin-left:6px;
}


/* ============================================================
   Bausteine der Wissensseite
   ============================================================ */
.reportkarte{display:flex; flex-direction:column; text-decoration:none; overflow:hidden; padding:0}
.reportkarte img{
  width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:50% 12%;
  border-bottom:1px solid var(--line-soft);
}
.reportkarte .kick,
.reportkarte h3,
.reportkarte p,
.reportkarte .linkline{margin-inline:32px}
.reportkarte .kick{
  display:block; margin-top:26px; margin-bottom:10px;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-rot);
}
.reportkarte p{margin-bottom:0}
.reportkarte .linkline{align-self:flex-start; margin-bottom:30px}
.reportkarte:hover .linkline{color:var(--akzent); border-color:var(--akzent)}

.beitragsliste{list-style:none; padding:0; margin:0}
.beitragsliste li{
  display:grid; grid-template-columns:150px 1fr auto; gap:26px; align-items:baseline;
  padding:26px 0; border-top:1px solid var(--line);
}
.beitragsliste li:first-child{border-top:0}
@media(max-width:760px){
  .beitragsliste li{grid-template-columns:1fr auto; gap:8px 18px}
  .beitragsliste .thema{grid-column:1 / -1}
}
.beitragsliste .thema{
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brand-rot);
}
.beitragsliste h3{font-size:clamp(1.1rem,1.6vw,1.35rem); margin:0}
.beitragsliste .status{
  font-size:.76rem; font-weight:600; letter-spacing:.06em; white-space:nowrap;
  color:var(--muted); background:var(--paper); border:1px solid var(--line);
  padding:6px 13px; border-radius:999px;
}


/* ============================================================
   Rechtstexte
   Lange Fliesstexte brauchen eine schmale Spalte und klare Stufen.
   ============================================================ */
.rechtstext{max-width:44em}
.rechtstext h2{
  font-size:clamp(1.3rem,2vw,1.7rem);
  margin:clamp(38px,4vw,52px) 0 14px;
  padding-top:clamp(30px,3vw,40px);
  border-top:1px solid var(--line-soft);
}
.rechtstext > h2:first-child{margin-top:0; padding-top:0; border-top:0}
.rechtstext h3{font-size:1.05rem; margin:26px 0 8px}
.rechtstext p{color:var(--muted); line-height:1.7}
.rechtstext a{color:var(--akzent); text-decoration:underline; text-underline-offset:.18em}
.rechtstext a:hover{color:var(--akzent-dark)}

/* Das Feld der Maschinenabwehr muss im Seitenfluss existieren, aber unsichtbar
   sein. `display:none` reicht nicht: manche Einsendeprogramme ueberspringen
   verborgene Felder gezielt. Deshalb aus dem Bild geschoben. */
.honigtopf{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}