/* -------------------------------------------------------------------------
   Schriften, selbst gehostet - kein externer Aufruf.
   Der Entwurf gibt nur die System-Schrift-Kette vor, die je nach Geraet eine
   andere Schrift ist (macOS SF Pro, Windows Segoe UI, Android Roboto) und die
   Seite dort unterschiedlich umbrechen laesst. Roboto wurde aus zwoelf
   Kandidaten nach gemessener Textbreite gegenueber SF Pro ausgewaehlt.
   Monospace: IBM Plex Mono - alle geprueften Monos haben wie SF Mono 0.6em
   Zeichenbreite, sie sind fuers Layout austauschbar.
   ------------------------------------------------------------------------- */
@font-face{font-family:'H4 Sans';src:url(assets/fonts/roboto-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'H4 Sans';src:url(assets/fonts/roboto-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'H4 Sans';src:url(assets/fonts/roboto-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'H4 Mono';src:url(assets/fonts/plexmono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'H4 Mono';src:url(assets/fonts/plexmono-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'H4 Mono';src:url(assets/fonts/plexmono-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* =========================================================================
   4H Solutions – Onepager
   EIN responsives Layout. Jeder Inhalt steht genau einmal im Markup.
   Aufbau: Mobil = Basis, darauf min-width 690px (Tablet) und 880px (Desktop).
   ========================================================================= */

:root{
  --marine:        #12355B;
  --marine-tief:   #0D2743;
  --tinte:         #2B2D42;
  --tinte-weich:   #5A6072;
  --nacht:         #212232;
  --gold:          #C48A3A;
  --gold-hell:     #CE9748;
  --gold-dunkel:   #96661F;
  --gold-tief:     #B87F31;
  --papier:        #F8F9FA;
  --weiss:         #FFFFFF;
  --dunst:         #E4E7EB;
  --linie:         rgba(43,45,66,.14);
  --linie-hell:    rgba(248,249,250,.18);
  --hell-72:       rgba(248,249,250,.72);
  --hell-42:       rgba(248,249,250,.42);
  --schrift:       'H4 Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:          'H4 Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --kopf-hoehe:    60px;
  --raster:        repeating-linear-gradient(135deg,rgba(248,249,250,.05) 0 2px,transparent 2px 10px);
  --raster-hell:   repeating-linear-gradient(135deg,rgba(18,53,91,.07) 0 2px,transparent 2px 10px);
  --raster-faq:    repeating-linear-gradient(135deg,rgba(18,53,91,.06) 0 2px,transparent 2px 11px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:68px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--schrift);
  font-size:16px;
  line-height:1.6;
  color:var(--tinte);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:600;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--marine)}
a:hover{color:var(--gold-dunkel)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- Grundgerüst: Innenbreite und Abschnittsabstände -------------- */

.wrap{padding-inline:20px}

.abschnitt{padding-block:56px}
.abschnitt--papier{background:var(--papier)}
.abschnitt--weiss{background:var(--weiss)}

/* ---------- Wiederkehrende Bausteine ------------------------------------ */

.marke{
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;   /* eine Stufe kraeftiger als die 400 des Entwurfs */
  color:var(--gold-dunkel);margin-bottom:16px;
}
.marke--hell{color:var(--gold-hell)}
.marke__strich{height:1px;flex:1;max-width:40px;background:var(--gold);opacity:.55}

.t-h2{font-size:25px;text-wrap:pretty}
.t-lead{font-size:17px;color:var(--tinte-weich);margin-top:14px;text-wrap:pretty}
.autor .t-lead,.kompendium .t-lead,.kontakt .t-lead{color:var(--hell-72)}

.kleintitel{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte-weich);font-weight:500;margin-bottom:14px;
}
.kleintitel--hell{color:var(--hell-72);margin-bottom:12px}

.bild{position:relative;overflow:hidden;border-radius:4px;display:grid;place-items:center}
.bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bild--hell{background:var(--dunst);background-image:var(--raster-hell);border:1px solid var(--linie)}
.bild--dunkel{background:var(--marine-tief);background-image:var(--raster)}
.bild--nacht{background:var(--nacht);background-image:var(--raster);border:1px solid var(--linie-hell)}
.bild--cover{
  background:var(--marine-tief);background-image:var(--raster);
  border:1px solid rgba(248,249,250,.22);border-radius:2px 5px 5px 2px;
}

.punkt{width:5px;height:5px;background:var(--gold);flex-shrink:0}


/* Knöpfe */
.knopf{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding-inline:20px;border-radius:4px;
  font-family:inherit;font-size:16px;font-weight:600;line-height:1.6;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background-color .15s,border-color .15s,color .15s;
}
/* Der Mobil-Entwurf setzt an Knoepfen keine Zeilenhoehe: Links erben 1.6,
   Buttons behalten die Voreinstellung. Ab Tablet steht dort ausdruecklich 1.2. */
button.knopf{line-height:normal}
.knopf--gold{background:var(--gold);border-color:var(--gold);color:var(--tinte)}
.knopf--gold:hover{background:var(--gold-tief);border-color:var(--gold-tief);color:var(--tinte)}
.knopf--rand{background:transparent;border-color:var(--hell-42);color:var(--papier);font-weight:500}
.knopf--rand:hover{border-color:var(--papier);background:rgba(255,255,255,.08);color:var(--papier)}
.knopf--marine{background:var(--marine);border-color:var(--marine);color:var(--weiss)}
.knopf--marine:hover{background:var(--marine-tief);border-color:var(--marine-tief);color:var(--weiss)}
.knopf--umriss{background:transparent;border-color:rgba(18,53,91,.42);color:var(--marine);font-weight:500}
.knopf--umriss:hover{border-color:var(--marine);background:rgba(18,53,91,.05);color:var(--marine)}
.knopf--voll{width:100%}

/* Formularteile */
.feldtitel{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.feld{
  font-family:inherit;font-size:16px;width:100%;padding:14px;
  border:1px solid var(--linie);border-radius:4px;
}
.feld--hell{color:var(--tinte);background:var(--weiss);border-color:rgba(43,45,66,.24)}
.feld--dunkel{color:var(--papier);background:rgba(255,255,255,.06);border-color:var(--linie-hell)}
.feld--flaeche{min-height:130px;resize:vertical}
.feld--dunkel::placeholder{color:var(--hell-42)}
.feld--dunkel:focus,.feld--hell:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(196,138,58,.22);
}
.zustimmung{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:14px;color:var(--tinte-weich);font-weight:400;
}
.zustimmung input{width:18px;height:18px;margin:3px 0 0;padding:0;flex-shrink:0;accent-color:var(--marine)}
.zustimmung a{color:inherit;text-decoration:underline}
.zustimmung--dunkel{color:var(--hell-72)}
.zustimmung--dunkel a{color:var(--gold-hell);text-decoration:none;border-bottom:1px solid rgba(206,151,72,.4)}
.hinweis{padding:12px 14px;border-radius:4px;font-size:14px}
.hinweis--marine{background:rgba(18,53,91,.07);border:1px solid rgba(18,53,91,.2);color:var(--marine)}
.hinweis--gold{background:rgba(196,138,58,.14);border:1px solid rgba(196,138,58,.4);color:var(--gold-hell)}

/* =========================================================================
   Kopfzeile und Navigation
   Ein <nav>: unter 690px die Schublade, darüber die Zeile im Kopf.
   ========================================================================= */

.kopf{
  position:sticky;top:0;z-index:200;height:var(--kopf-hoehe);
  background:rgba(248,249,250,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(10px);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .18s,border-color .18s;
}
.kopf.ist-gescrollt{background:rgba(248,249,250,.97);border-bottom-color:var(--linie)}
/* Solange die Schublade offen ist, muss backdrop-filter weg: ein Element mit
   backdrop-filter ist Bezugsrahmen fuer position:fixed-Nachfahren, die
   Schublade wuerde sonst an der Kopfzeile statt am Viewport haengen und auf
   Hoehe 0 zusammenfallen. Ohne Filter braucht der Kopf einen deckenden Grund. */
.kopf.menue-offen{
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:var(--papier);border-bottom-color:var(--linie);
}
.kopf__innen{height:100%;display:flex;align-items:center;gap:12px;padding-inline:20px}
.kopf__logo{display:flex;align-items:center;flex-shrink:0}
.kopf__logo img{height:34px;width:auto}
.kopf__aktionen{margin-left:auto;display:flex;align-items:center;gap:8px}

.knopf-kopf{
  display:inline-flex;align-items:center;height:40px;padding-inline:14px;border-radius:4px;
  background:var(--gold);border:1px solid var(--gold);color:var(--tinte);
  font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background-color .15s,border-color .15s;
}
.knopf-kopf:hover{background:var(--gold-tief);border-color:var(--gold-tief);color:var(--tinte)}

.menuschalter{
  width:44px;height:44px;display:grid;place-content:center;gap:5px;
  background:transparent;border:0;cursor:pointer;padding:0;
}
.menuschalter__balken{
  display:block;width:22px;height:1.5px;background:var(--marine);
  transition:transform .18s,opacity .18s;
}
.menuschalter[aria-expanded="true"] .menuschalter__balken:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menuschalter[aria-expanded="true"] .menuschalter__balken:nth-child(2){opacity:0}
.menuschalter[aria-expanded="true"] .menuschalter__balken:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Klappfeld (mobil): nur so hoch wie sein Inhalt, die Seite bleibt darunter
   sichtbar. Die Hoehenbegrenzung greift nur im Querformat. */
.kopfnav{display:none}
.kopfnav.ist-offen{
  display:flex;flex-direction:column;gap:2px;
  position:fixed;top:var(--kopf-hoehe);left:0;right:0;z-index:150;
  background:var(--marine);color:var(--papier);
  padding:20px;overflow-y:auto;
  max-height:calc(100vh - var(--kopf-hoehe));
  max-height:calc(100dvh - var(--kopf-hoehe));
  /* Goldkante, weil der Hero direkt darunter dasselbe Marineblau hat –
     ohne sie ist die Unterkante des Felds unsichtbar. */
  border-bottom:3px solid var(--gold);
  box-shadow:0 18px 40px rgba(3,14,28,.35);
}
.kopfnav a{
  display:flex;align-items:center;min-height:52px;
  font-size:21px;font-weight:500;color:var(--papier);text-decoration:none;
  border-bottom:1px solid var(--linie-hell);
}
.kopfnav a:hover{color:var(--gold-hell)}
.kopfnav__daten{
  margin-top:20px;padding-top:20px;border-top:1px solid var(--linie-hell);
  display:grid;gap:6px;font-size:14px;
}

/* Vorschau-Umschalter für die Hero-Varianten — mit den <template> entfernbar.
   Steht in der Schublade auf Blau, ab 690px in der hellen Kopfzeile. */
.varianten{
  align-self:start;margin-top:14px;
  display:inline-flex;border:1px solid var(--gold);border-radius:999px;overflow:hidden;
}
.varianten button{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;font-weight:600;
  padding:7px 11px;cursor:pointer;
  background:transparent;border:0;color:var(--gold-hell);
  transition:background-color .15s,color .15s;
}
.varianten button + button{border-left:1px solid rgba(196,138,58,.5)}
.varianten button:hover{background:rgba(196,138,58,.18)}
.varianten button[aria-pressed="true"]{background:var(--gold);color:var(--tinte)}

.kopfnav__daten a{min-height:0;font-size:14px;font-weight:400;border-bottom:0}

/* =========================================================================
   Hero
   ========================================================================= */

.held{background:var(--marine);color:var(--papier);overflow:hidden}
.held__text{padding:44px 20px 40px}
/* Im Hero steht die Auszeichnungszeile 2px tiefer als in allen anderen
   Abschnitten – so ist es in beiden kleinen Entwürfen angelegt. */
.held .marke{margin-bottom:18px}
.held__titel{
  font-size:32px;line-height:1.16;letter-spacing:-.015em;color:var(--papier);
  margin-bottom:16px;text-wrap:pretty;
}
.held__unter{font-size:17px;color:var(--hell-72);text-wrap:pretty}
.held__knoepfe{display:grid;gap:10px;margin-top:26px}
.held__bild{aspect-ratio:16/11;border-top:3px solid var(--gold);border-radius:0}

.merkmale{
  display:grid;gap:8px;margin-top:28px;padding-top:18px;
  border-top:1px solid var(--linie-hell);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--hell-72);
}
.merkmale li{display:flex;align-items:center;gap:10px}

/* ── Verborgene Hero-Fassungen ────────────────────────────────────────────
   Alle vier Fassungen stehen als echte Abschnitte im Dokument, drei davon mit
   `hidden`. Das Attribut allein reicht NICHT: `[hidden]{display:none}` steht im
   Browser-Stylesheet, und JEDE Autoren-Regel schlägt das — `.held1c` setzt
   display:flex und war damit gemessen 718px hoch sichtbar, obwohl `hidden`
   gesetzt war. (1d und 1e setzen kein display und wären zufällig verborgen
   geblieben; auf diesen Zufall ist kein Verlass.)
   Deshalb hier explizit, mit !important, damit auch eine spätere Regel in einer
   Media-Query eine verborgene Fassung nicht versehentlich einblendet.
   ========================================================================= */
section[data-hero][hidden]{display:none!important}

/* =========================================================================
   Hero-Variante 1c (Vorschau) — vollflächiges Bild, Text über Blau-Verlauf,
   Faktenleiste als Sockel. Desktopwerte stammen aus „Hero Varianten.dc.html";
   fuer Tablet und Mobil gibt es dort keinen Entwurf, die Werte unter 880px
   sind von mir abgeleitet (v.a. Verlaufsrichtung und Spaltenzahl im Sockel).
   Mitsamt Abschnitt und Umschalter entfernbar.
   ========================================================================= */

.held1c{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--marine-tief);color:var(--papier);
}
.held1c__bild{position:absolute;inset:0;background:var(--marine-tief);background-image:var(--raster)}
/* Hochkant rechtsbuendig ausschneiden, ab 880px mittig wie im Entwurf. */
.held1c__bild img{width:100%;height:100%;object-fit:cover;object-position:right center}
/* Hochkant traegt ein 90deg-Verlauf den Text nicht – bis 880px senkrecht. */
.held1c__schleier{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,53,91,.95) 0 58%,rgba(18,53,91,.80) 100%);
}
.held1c__inhalt{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding-block:44px}
.held1c__titel{
  font-size:32px;line-height:1.16;letter-spacing:-.015em;color:var(--papier);
  margin-bottom:16px;text-wrap:pretty;
}
.held1c__unter{font-size:17px;color:rgba(248,249,250,.78);text-wrap:pretty}
.held1c__knoepfe{display:grid;gap:10px;margin-top:26px}

.held1c__sockel{
  position:relative;z-index:1;
  background:rgba(13,39,67,.72);border-top:1px solid var(--linie-hell);
}
.fakten1c{
  display:grid;gap:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--hell-72);
}
.fakten1c li{display:flex;align-items:center;gap:9px;padding:13px 0}
.fakten1c li + li{border-top:1px solid var(--linie-hell)}

/* =========================================================================
   Hero-Variante 1d (Vorschau) — zentrierte Aussage, darunter ein
   randabfallender Bildstreifen aus drei Kacheln. Desktopwerte aus
   „Hero Varianten.dc.html"; die Kacheln behalten das Verhaeltnis 1.6986
   (424,66 × 250 im Entwurf) ueber aspect-ratio statt fester Hoehe.
   Unter 880px gibt es keinen Entwurf; die Werte dort sind abgeleitet.
   ========================================================================= */

.held1d{background:var(--marine);color:var(--papier);overflow:hidden;padding-top:44px}
.held1d__mitte{text-align:center;display:flex;flex-direction:column;align-items:center}
.held1d__marke{justify-content:center}   /* im Entwurf ohne Goldstrich */
.held1d__titel{
  font-size:32px;line-height:1.16;letter-spacing:-.015em;color:var(--papier);
  margin-bottom:16px;text-wrap:pretty;
}
.held1d__unter{font-size:17px;color:var(--hell-72);text-wrap:pretty}
.held1d__knoepfe{display:grid;gap:10px;margin-top:26px;width:100%}
.fakten1d{
  display:grid;justify-items:center;gap:8px;margin-top:28px;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--hell-72);
}
.fakten1d li{display:flex;align-items:center;gap:8px}
.held1d__streifen{
  margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:var(--linie-hell);
}
.held1d__bild{aspect-ratio:1;border-radius:0}

/* =========================================================================
   Hero-Variante 1e (Vorschau) — heller Einstieg auf Warmweiß, Blau als
   Akzent, drei versetzte Bilder. Desktopwerte aus „Hero Varianten.dc.html".
   Die Kacheln behalten die Seitenverhaeltnisse des Entwurfs (.6013 und
   1.2432) ueber aspect-ratio statt fester Hoehen – so bleiben sie auch bei
   der breiteren Containerbreite des Onepagers erhalten.
   Unter 880px gibt es keinen Entwurf; die Werte dort sind abgeleitet.
   ========================================================================= */

/* Keine Trennlinie nach unten: der Folgeabschnitt wird bei 1e weiss, der
   Farbwechsel trennt bereits. (Im Entwurf steht dort eine Linie, weil dort
   beide Flaechen warmweiss sind.) */
.held1e{
  background:var(--papier);color:var(--tinte);overflow:hidden;
  padding-block:44px 48px;
}
.held1e__raster{display:grid;gap:32px}
.held1e__titel{
  font-size:32px;line-height:1.16;letter-spacing:-.015em;color:var(--marine);
  margin-bottom:16px;text-wrap:pretty;
}
.held1e__unter{font-size:17px;color:var(--tinte-weich);text-wrap:pretty}
.held1e__knoepfe{display:grid;gap:10px;margin-top:26px}
.fakten1e{
  display:grid;gap:8px;margin-top:28px;padding-top:18px;
  border-top:1px solid var(--linie);
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--tinte-weich);
}
.fakten1e li{display:flex;align-items:center;gap:8px}

.held1e__bilder{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:14px;
  max-width:560px;
}
.held1e__bild{border-radius:4px}
.held1e__bild--hoch{grid-row:span 2;aspect-ratio:.6013}
/* Bildausschnitt der hohen Kachel um 30px nach links. */
.held1e__bild--hoch img{object-position:calc(50% - 30px) center}
.held1e__bild--quer{aspect-ratio:1.2432}
.held1e__bilder > :nth-child(2){margin-top:36px}
.held1e__bilder > :nth-child(3){margin-top:22px}

/* Nur solange 1e aktiv ist: der Hero ist jetzt selbst warmweiss, deshalb
   braucht die Kopfzeile ihre Trennlinie dauerhaft (im Entwurf ist sie da),
   und der Abschnitt darunter darf nicht dieselbe Farbe haben – er wird
   weiss, seine Karten warmweiss. */
.hat-hero-1e .kopf{border-bottom-color:var(--linie)}
.hat-hero-1e .abschnitt--nach-hero{background:var(--weiss)}
.hat-hero-1e .abschnitt--nach-hero .karte{background:var(--papier)}

/* =========================================================================
   01 Ausgangslage
   Mobil: Text, Karten, Bild. Ab 690px: Bild links neben dem Text.
   ========================================================================= */

.ausgangslage{
  display:grid;grid-template-columns:1fr;
  grid-template-areas:"text" "karten" "bild";
}
.ausgangslage__text{grid-area:text}
.ausgangslage__karten{grid-area:karten;margin-top:32px}
.ausgangslage__bild{grid-area:bild;aspect-ratio:4/3;margin-top:28px}

/* Karten (Ausgangslage + Ablauf) */
.karten{display:grid;grid-template-columns:1fr;gap:14px}
.karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:4px;
  padding:22px 20px;box-shadow:0 1px 2px rgba(43,45,66,.04);
}
.karte__nummer{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  color:var(--gold-dunkel);margin-bottom:10px;
}
.karte__titel{font-size:18px;margin-bottom:8px}
.karte__text{font-size:15px;color:var(--tinte-weich)}
.fortschritt{display:flex;gap:5px;margin-bottom:16px}
.fortschritt span{height:3px;flex:1;background:var(--linie)}
.fortschritt .ist-aktiv{background:var(--gold)}

/* Abschnittseinleitung (Ablauf, Beratung, FAQ) */
.intro{margin-bottom:0}
.intro + .karten{margin-top:32px}

/* =========================================================================
   02 Das Kompendium
   ========================================================================= */

.kompendium{background:var(--marine);color:var(--papier);padding-block:56px 0}
.kompendium .t-h2{color:var(--papier)}
.kompendium__raster{display:grid;grid-template-columns:1fr}
.merkmale--fakten{margin-top:22px}
.kompendium__cta{display:grid;gap:12px;margin-top:24px;justify-items:center}
.kompendium__cta .knopf{width:100%}
.kompendium__hinweis{font-size:14px;color:var(--hell-72)}
.kompendium__fussnote{margin-top:10px;font-size:14px;line-height:1.5;color:rgba(248,249,250,.55);padding-left:.62em;text-indent:-.62em}
.kompendium__cover{display:flex;justify-content:center;margin-top:34px}
.kompendium__cover .bild{
  width:min(240px,72%);aspect-ratio:5/7;margin-bottom:-48px;
  box-shadow:-14px 20px 44px rgba(3,14,28,.55);
}

/* Der Abschnitt, in den das Cover hineinragt */
.vorteile{padding-top:104px}

/* =========================================================================
   Vorteile + Auszug aus dem Inhalt
   ========================================================================= */

.vorteile__raster{display:grid;grid-template-columns:1fr}
.hakenliste{display:grid;gap:18px}
.hakenliste li{display:grid;grid-template-columns:17px 1fr;gap:11px;align-items:start}
.hakenliste strong{font-weight:600;display:block}
.hakenliste span{color:var(--tinte-weich);font-size:15px}
.haken{
  width:8px;height:15px;margin:4px 0 0 2px;
  border:1.6px solid var(--gold);border-top:0;border-left:0;transform:rotate(42deg);
}
.inhaltsauszug{margin-top:40px}
.kapitel{border-top:1px solid var(--linie)}
.kapitel li{
  display:flex;gap:13px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid var(--linie);font-size:15px;line-height:1.45;
}
.kapitel__nr{font-family:var(--mono);font-size:12px;color:var(--gold-dunkel);flex-shrink:0}

/* =========================================================================
   Leseprobe
   ========================================================================= */

.leseprobe-abschnitt{
  padding-block:44px;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
}
.leseprobe{display:grid;gap:24px}
.leseprobe__titel{font-size:22px}
.leseprobe__text{margin-top:12px}
.probeform__zeile .knopf{margin-top:10px;width:100%}
.probeform .zustimmung{margin-top:14px}
.probeform .hinweis{margin-top:14px}

/* =========================================================================
   03 Der Autor
   ========================================================================= */

.autor{background:var(--tinte);color:var(--papier)}
.autor .t-h2{color:var(--papier)}
.autor__raster{
  display:grid;grid-template-columns:1fr;
  grid-template-areas:"bild" "intro" "vita" "schwerpunkte";
}
.autor__bild{grid-area:bild;aspect-ratio:4/3;margin-bottom:28px}
.autor__intro{grid-area:intro}

.vita{
  grid-area:vita;margin-top:32px;display:grid;gap:22px;
  border-left:1px solid var(--linie-hell);padding-left:22px;
  --punkt-links:-27px;
}
.vita li{position:relative}
.vita__punkt{
  position:absolute;left:var(--punkt-links);top:7px;width:9px;height:9px;
  background:var(--tinte);border:1.5px solid var(--gold);border-radius:50%;
}
.vita__stufe{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--gold-hell);
  display:block;margin-bottom:3px;
}
.vita__titel{font-weight:600;font-size:16px;display:block}
.vita__text{color:var(--hell-72);font-size:15px}

.schwerpunkte{grid-area:schwerpunkte;margin-top:34px;padding-top:22px;border-top:1px solid var(--linie-hell)}
.schwerpunkte__liste{display:flex;flex-wrap:wrap;gap:8px}
.schwerpunkte__gruppe{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(248,249,250,.55);margin-bottom:9px}
.schwerpunkte__liste + .schwerpunkte__gruppe{margin-top:18px}
.schwerpunkte__liste span{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;padding:6px 12px;
  border:1px solid var(--linie-hell);border-radius:999px;color:var(--hell-72);white-space:nowrap;
}

/* =========================================================================
   05 Beratung
   ========================================================================= */

.angebot{
  display:flex;flex-direction:column;
  background:var(--papier);border:1px solid var(--linie);border-top:3px solid var(--marine);
  border-radius:4px;padding:22px 20px;
}
.angebot--breit{border-top-color:var(--gold)}

/* 05 Beratung: Stufung der Flaechen, goldener Knopf auf der dritten Karte */
#beratung .angebot:nth-child(1){background:var(--weiss);border-top-color:rgba(18,53,91,.34)}
#beratung .angebot:nth-child(2){background:rgba(18,53,91,.18);border-top-color:var(--marine)}
#beratung .angebot:nth-child(3){
  background:var(--marine-tief);border-color:rgba(248,249,250,.14);
  border-top-color:var(--gold);color:var(--papier);
}
#beratung .angebot:nth-child(3) .angebot__text,
#beratung .angebot:nth-child(3) .strichliste{color:var(--hell-72)}
#beratung .angebot:nth-child(3) .knopf{background:var(--gold);border-color:var(--gold);color:var(--tinte);font-weight:600}
#beratung .angebot:nth-child(3) .knopf:hover{background:var(--gold-tief);border-color:var(--gold-tief);color:var(--tinte)}
.angebot__kopf{grid-area:kopf}
.angebot__titel{font-size:18px;margin-bottom:6px}
.angebot__text{color:var(--tinte-weich);font-size:15px;margin-bottom:16px}
.strichliste{grid-area:liste;display:grid;gap:8px;margin-bottom:20px;font-size:14px;color:var(--tinte-weich)}
.strichliste li{display:grid;grid-template-columns:14px 1fr;gap:8px;align-items:start}
.strich{width:6px;height:1.5px;background:var(--gold);margin-top:11px}
.angebot__cta{grid-area:cta;margin-top:auto}

/* =========================================================================
   06 FAQ
   ========================================================================= */

/* Das FAQ-Bild hat im Entwurf eine eigene Schraffur (feiner, weitere Teilung). */
.faq-bild{aspect-ratio:16/10;margin:26px 0 30px;background-image:var(--raster-faq)}
/* Zwei eigenstaendige Spalten wie im Entwurf. Ein gemeinsames Raster waere
   falsch: dort teilen sich beide Spalten die Zeilen, und ein aufgeklappter
   Eintrag links reisst rechts eine Luecke auf. */
.faq-spalte{border-top:1px solid var(--linie)}
.faq-spalte + .faq-spalte{border-top:0}   /* gestapelt sonst doppelte Linie */
.faq-eintrag{border-bottom:1px solid var(--linie)}
.faq-frage{font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:inherit}
.faq-schalter{
  display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  width:100%;padding:16px 2px;background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-weight:500;font-size:16px;line-height:1.45;
  color:var(--tinte);text-align:left;
}
.faq-schalter:hover{color:var(--marine)}
.faq-zeichen{font-family:var(--mono);font-size:17px;color:var(--gold-dunkel);flex-shrink:0;align-self:center}
.faq-antwort{padding:0 2px 18px;color:var(--tinte-weich);font-size:15px}

/* =========================================================================
   07 Kontakt
   Mobil: Intro, Formular, Daten. Tablet: Intro, Daten, Formular.
   Desktop: Intro+Daten links, Formular rechts.
   ========================================================================= */

.kontakt{background:var(--marine);color:var(--papier)}
.kontakt .t-h2{color:var(--papier)}
.kontakt__raster{
  display:grid;grid-template-columns:1fr;row-gap:0;
  grid-template-areas:"intro" "form" "daten";
}
.kontakt__intro{grid-area:intro}
.kontakt__form{grid-area:form;display:grid;gap:14px;margin-top:28px}
.kontakt__daten{grid-area:daten;display:grid;gap:20px;margin-top:36px}
.kontaktkarte{border-top:1px solid var(--linie-hell);padding-top:14px}
.kontaktkarte__titel{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hell-72);margin-bottom:6px;
}
.kontaktkarte__wert{font-size:19px;line-height:1.3}
.kontaktkarte__wert a{
  color:var(--papier);text-decoration:none;
  border-bottom:1px solid rgba(206,151,72,.55);word-break:break-word;
}
.kontaktkarte__wert a:hover{color:var(--gold-hell)}
.kontaktkarte__ort{font-size:16px;color:var(--hell-72)}
.kontakt__form .feldtitel{color:var(--papier)}

/* =========================================================================
   Fußzeile
   ========================================================================= */

.fuss{background:var(--nacht);color:var(--hell-72);padding-block:44px 28px;font-size:15px}
.fuss__raster{
  display:grid;grid-template-columns:1fr 1fr;gap:32px 20px;
  grid-template-areas:"marke marke" "inhalt kontakt" "recht .";
}
.fuss__marke{grid-area:marke;margin-bottom:2px}
.fuss__inhalt{grid-area:inhalt}
.fuss__kontakt{grid-area:kontakt}
.fuss__recht{grid-area:recht}
.fuss__logo{height:36px;width:auto;margin-bottom:16px}
.fuss__claim{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-hell);margin-bottom:12px;
}
.kleintitel--fuss{color:var(--papier);margin-bottom:12px}
.fussliste{display:grid;gap:10px}
.fussliste a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.fussliste a:hover{color:var(--papier);border-bottom-color:var(--linie-hell)}
.fussliste__ort{line-height:1.5}
.umbruch{word-break:break-word}
.fuss__zeile{margin-top:32px;padding-top:16px;border-top:1px solid var(--linie-hell);font-size:13px}

/* =========================================================================
   ============================  TABLET  ab 690px  =========================
   ========================================================================= */

@media (min-width:690px){

  :root{--kopf-hoehe:66px}
  html{scroll-padding-top:72px}
  body{font-size:17px}
  h1,h2,h3,h4{line-height:1.19}

  .wrap{padding-inline:40px}
  .abschnitt{padding-block:72px}

  /* Bausteine */
  .marke{font-size:12px;letter-spacing:.15em;gap:12px;margin-bottom:18px}
  .marke__strich{max-width:56px}
  .t-h2{font-size:30px}
  .t-lead{margin-top:16px}
  .kleintitel{font-size:12px;margin-bottom:14px}
  .kleintitel--hell{margin-bottom:14px}
  .knopf,button.knopf{padding-inline:26px;line-height:1.2}
  .feld{min-height:52px;padding:0 14px}
  .feld--flaeche{min-height:150px;padding:14px}
  .zustimmung{gap:12px}
  .hinweis{padding:14px 16px;font-size:15px}

  /* Kopf: Schublade wird zur Zeile */
  .kopf{height:66px}
  .kopf__innen{gap:19px;padding-inline:32px}
  .kopf__logo img{height:38px}
  /* Rechts ausgerichtet wird ab hier die Navigation; der Knopf schliesst
     direkt an sie an (Abstand = flex-gap der Kopfzeile). */
  .kopf__aktionen{margin-left:0;gap:0}
  .knopf-kopf{height:44px;padding-inline:16px;font-size:14px}
  .menuschalter{display:none}

  /* .ist-offen mitnennen: die Klasse hat hoehere Spezifitaet und wuerde sonst
     hier gewinnen, falls das Feld beim Vergroessern offen geblieben ist. */
  .kopfnav,.kopfnav.ist-offen{
    display:flex;flex-direction:row;align-items:center;gap:19px;
    position:static;margin-left:auto;padding:0;background:none;overflow:visible;
    max-height:none;border-bottom:0;box-shadow:none;
  }
  .kopfnav a{
    min-height:0;font-size:14px;font-weight:400;color:var(--tinte-weich);
    padding-block:6px;border-bottom:0;white-space:nowrap;
  }
  .kopfnav a:hover{color:var(--marine)}
  /* Beide gibt es nur in der Schublade. Die Spezifitaet muss .kopfnav a
     (0,1,1) schlagen, sonst gewinnt dessen display:flex. */
  .kopfnav a.kopfnav__kontaktlink{display:none}
  .kopfnav__daten{display:none}
  /* In der Kopfzeile ist der Platz zwischen 690 und 880px knapp – dort
     die kompakte Form, sonst laeuft die Zeile ueber. */
  .varianten{align-self:center;margin-top:0}
  .varianten button{color:var(--gold-dunkel);padding:4px 5px;font-size:10px;letter-spacing:normal}
  .varianten button[aria-pressed="true"]{color:var(--tinte)}

  /* Hero */
  .held__text{padding:56px 40px 60px}
  .held .marke{margin-bottom:20px}
  .held__titel{font-size:42px;line-height:1.13;letter-spacing:-.015em;margin-bottom:20px;max-width:11.95em}
  .held__unter{font-size:18px;max-width:60ch}
  .held__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
  .held__knoepfe .knopf{width:auto}
  .held__bild{aspect-ratio:auto;height:300px}
  .merkmale{
    display:flex;flex-wrap:wrap;gap:10px 28px;
    margin-top:34px;padding-top:20px;font-size:12.5px;
  }
  .merkmale li{gap:9px}
  /* Vier Punkte im Hero: zwei und zwei, nicht nach Platz umbrechen.
     Der Kompendium-Abschnitt behaelt seine eigene dreiteilige Zeile. */
  .merkmale--vier{display:grid;grid-template-columns:auto auto;justify-content:start}

  /* Hero-Variante 1c */
  .held1c{min-height:520px}
  .held1c__inhalt{padding-block:64px}
  .held1c__titel{font-size:42px;line-height:1.13;letter-spacing:-.015em;margin-bottom:20px;max-width:11.95em}
  .held1c__unter{font-size:18px;max-width:60ch}
  .held1c__knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
  .held1c__knoepfe .knopf{width:auto}
  .fakten1c{grid-template-columns:1fr 1fr;font-size:12.5px;letter-spacing:.05em}
  .fakten1c li{padding:16px 0}
  .fakten1c li + li{border-top:0}
  .fakten1c li:nth-child(n+3){border-top:1px solid var(--linie-hell)}
  .fakten1c li:nth-child(even){padding-left:24px;border-left:1px solid var(--linie-hell)}

  /* Hero-Variante 1d */
  .held1d{padding-top:64px}
  .held1d__titel{font-size:42px;line-height:1.13;letter-spacing:-.015em;margin-bottom:20px;max-width:11.95em}
  .held1d__unter{font-size:18px;max-width:60ch}
  .held1d__knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:32px;width:auto}
  .held1d__knoepfe .knopf{width:auto}
  .fakten1d{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
    margin-top:34px;font-size:12.5px;letter-spacing:.05em;
  }
  .held1d__streifen{margin-top:48px}
  .held1d__bild{aspect-ratio:1.35}

  /* Hero-Variante 1e */
  .held1e{padding-block:64px 68px}
  .held1e__raster{gap:40px}
  .held1e__titel{font-size:42px;line-height:1.14;letter-spacing:-.015em;margin-bottom:20px;max-width:11.95em}
  .held1e__unter{font-size:18px;max-width:60ch}
  .held1e__knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
  .held1e__knoepfe .knopf{width:auto}
  /* Zwei und zwei, nicht nach Platz umbrechen – im Entwurf stehen die vier
     Punkte in zwei Zeilen zu zweit. */
  .fakten1e{
    display:grid;grid-template-columns:auto auto;justify-content:start;
    gap:10px 26px;margin-top:34px;padding-top:22px;
    font-size:12.5px;letter-spacing:.05em;
  }

  /* 01 Ausgangslage */
  .ausgangslage{
    grid-template-columns:.88fr 1.12fr;
    grid-template-areas:"bild text" "karten karten";
    column-gap:32px;
  }
  .ausgangslage__bild{aspect-ratio:4/5;margin-top:0;align-self:center}
  .ausgangslage__text{align-self:center}
  .ausgangslage__karten{margin-top:44px}

  .karten{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .karte{padding:24px 22px}
  .karte__nummer{margin-bottom:12px}
  .karte__titel{font-size:17px;letter-spacing:-.005em}
  .fortschritt{margin-bottom:18px}
  .karten .fortschritt + .karte__nummer{margin-bottom:11px}

  .intro{max-width:60ch;margin-bottom:36px}
  .intro + .karten{margin-top:0}

  /* 02 Das Kompendium */
  .kompendium{padding-block:64px}
  .kompendium__raster{grid-template-columns:1.12fr .88fr;column-gap:32px;align-items:center}
  .merkmale--fakten{display:grid;gap:9px;margin-top:24px;padding-top:18px}
  .kompendium__cta{
    display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:26px;justify-items:stretch;
  }
  .kompendium__cta .knopf{width:auto}
  .kompendium__hinweis{font-size:15px}
  .kompendium__cover{margin-top:0}
  .kompendium__cover .bild{width:min(258px,100%);margin-bottom:0;box-shadow:-18px 26px 50px rgba(3,14,28,.55)}
  .vorteile{padding-top:72px}

  /* Vorteile */
  .hakenliste{gap:16px}
  .hakenliste li{grid-template-columns:22px 1fr;gap:12px}
  .hakenliste span{font-size:16px}
  .haken{margin:7px 0 0 4px}
  .inhaltsauszug{margin-top:48px}
  .kapitel li{gap:16px;padding:14px 0;font-size:16px;line-height:1.6}
  .kapitel__nr{font-size:13px}

  /* Leseprobe – Abstand muss nach .abschnitt stehen, sonst gewinnt dessen
     72px aus diesem Block (gleiche Spezifität, spätere Regel). */
  .leseprobe-abschnitt{padding-block:44px}
  .leseprobe{gap:26px}
  .leseprobe__titel{font-size:24px}
  .leseprobe__text{max-width:62ch;margin-top:12px}
  .probeform__zeile{display:flex;flex-wrap:wrap;gap:12px}
  .probeform__zeile .feld{flex:1 1 260px;width:100%}
  .probeform__zeile .knopf{margin-top:0;width:auto}
  .probeform .zustimmung{margin-top:16px}
  .probeform .hinweis{margin-top:16px}

  /* 03 Autor */
  .autor__raster{
    grid-template-columns:.8fr 1.2fr;
    grid-template-areas:"bild intro" "vita vita" "schwerpunkte schwerpunkte";
    column-gap:32px;align-items:start;
  }
  .autor__bild{aspect-ratio:9/10;margin-bottom:0}
  .vita{
    grid-template-columns:1fr 1fr;gap:24px 32px;margin-top:34px;
    border-left:0;padding-left:0;--punkt-links:-5px;
  }
  .vita li{border-left:1px solid var(--linie-hell);padding-left:20px}
  .vita__punkt{top:8px}
  .vita__stufe{font-size:12px}
  .vita__titel{font-size:17px}
  .schwerpunkte{margin-top:36px;padding-top:24px}
  .schwerpunkte__liste span{font-size:12.5px;letter-spacing:.04em}

  /* 05 Beratung */
  .karten--angebot{grid-template-columns:1fr 1fr}
  .angebot{padding:26px 24px}
  .angebot__titel{margin-bottom:7px;letter-spacing:-.005em}
  .angebot__text{margin-bottom:18px}
  .strichliste{gap:9px;margin-bottom:22px;font-size:15px;color:var(--tinte-weich)}
  .strichliste li{gap:10px}
  /* Karte 3 über die volle Breite, innen zweispaltig */
  /* Im Entwurf steht der Knopf im Fluss unter dem Text, die Liste daneben.
     Die zweite Zeile ist 1fr: sie nimmt den Ueberschuss auf, den die ueber
     beide Zeilen laufende Liste sonst auf beide Zeilen verteilen wuerde –
     dann saesse der Knopf tiefer als im Entwurf. */
  .angebot--breit{
    grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"kopf liste" "cta liste";
    grid-template-rows:auto 1fr;
    column-gap:32px;row-gap:0;
  }
  .angebot--breit .angebot__text{margin-bottom:0}
  .angebot--breit .strichliste{margin-bottom:0}
  .angebot--breit .angebot__cta{margin-top:22px;align-self:start}

  /* 06 FAQ */
  .faq-intro{margin-bottom:30px}
  .faq-bild{aspect-ratio:auto;height:260px;margin:0 0 36px}
  .faq-schalter{gap:20px;min-height:56px;padding:16px 4px;font-size:17px}
  .faq-zeichen{font-size:18px}
  .faq-antwort{padding:0 48px 22px 4px;font-size:16px;max-width:70ch}

  /* 07 Kontakt */
  .kontakt__raster{grid-template-areas:"intro" "daten" "form"}
  .kontakt__intro{max-width:60ch}
  .kontakt__daten{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
  .kontaktkarte__titel{font-size:11.5px;margin-bottom:7px}
  .kontaktkarte__wert{font-size:17px;line-height:1.35}
  .kontakt__form{grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
  .feldgruppe--breit{grid-column:1 / -1}

  /* Fußzeile */
  .fuss{padding-block:48px 28px}
  .fuss__raster{
    grid-template-columns:1.35fr 1fr 1.2fr;
    grid-template-areas:"marke inhalt kontakt" "marke inhalt recht";
    gap:22px 32px;align-content:start;
  }
  .fuss__marke{margin-bottom:0}
  .fuss__logo{margin-bottom:14px}
  .fuss__claim{font-size:11.5px}
  .kleintitel--fuss{font-size:11.5px;margin-bottom:14px}
  .fussliste{gap:9px}
  .fussliste__ort{margin-top:4px}
  .fuss__zeile{margin-top:32px;padding-top:18px}
}

/* =========================================================================
   ===========================  DESKTOP  ab 880px  =========================
   ========================================================================= */

@media (min-width:880px){

  :root{--kopf-hoehe:72px}
  html{scroll-padding-top:88px}
  body{line-height:1.65}
  h1,h2,h3,h4{line-height:1.18}

  .wrap{width:min(100% - 2.5rem,1250px);margin-inline:auto;padding-inline:0}
  .abschnitt{padding-block:clamp(4.5rem,9vw,7.5rem)}

  /* Bausteine */
  .marke{font-size:.75rem;letter-spacing:.16em;gap:.7rem;margin-bottom:1.1rem}
  .marke__strich{max-width:64px}
  .t-h2{font-size:clamp(1.6rem,3.1vw,2.35rem)}
  .t-lead{font-size:clamp(1.05rem,1.6vw,1.2rem);margin-top:1.15rem}
  .t-lead--schmal{max-width:52ch}
  .t-lead--breit{max-width:62ch;margin-top:1.1rem}  /* Autor und Kontakt */
  .kleintitel{font-size:.74rem;margin-bottom:1rem}
  .kleintitel--hell{font-size:.74rem;margin-bottom:.9rem}
  .knopf,button.knopf{min-height:0;padding:.95rem 1.6rem;font-size:1rem}
  .feld{min-height:0;padding:.82rem .95rem;font-size:1rem}
  .feld--flaeche{min-height:150px;padding:.82rem .95rem}
  .zustimmung{gap:.7rem;font-size:.86rem}
  .zustimmung input{width:17px;height:17px;margin-top:.2rem}
  .hinweis{padding:.85rem 1.1rem;font-size:.92rem}

  /* Kopf */
  .kopf{height:72px;background:rgba(248,249,250,.92)}
  .kopf__innen{gap:30px;padding-inline:0;width:min(100% - 2.5rem,1250px);margin-inline:auto}
  .kopf__logo img{height:44px}
  .knopf-kopf{height:auto;padding:10px 17px;font-size:14px}
  .kopfnav{gap:30px}
  .kopfnav a{font-size:15px;border-bottom:2px solid transparent}
  .varianten button{padding:6px 9px;font-size:11px;letter-spacing:.08em}

  /* Hero */
  .held{display:grid;grid-template-columns:1.06fr .94fr;min-height:600px}
  .held__text{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(3.5rem,7vw,6rem) 3.5rem clamp(4rem,8vw,6.5rem) max(1.25rem,calc((100vw - 1250px) / 2));
  }
  .held .marke{margin-bottom:1.1rem}   /* am Desktop wieder wie überall */
  .held__titel{
    font-size:clamp(2rem,4.4vw,3.15rem);line-height:1.14;letter-spacing:-.015em;
    margin-bottom:1.4rem;max-width:11.95em;   /* erste Zeile = "Die groessten Kostentreiber" */
  }
  .held__unter{font-size:clamp(1.05rem,1.55vw,1.18rem);max-width:52ch}
  .held__knoepfe{gap:.85rem;margin-top:2.2rem}
  .held__bild{height:auto;border-top:0;border-left:3px solid var(--gold)}
  .merkmale{gap:.65rem 1.6rem;margin-top:2.4rem;padding-top:1.5rem;font-size:.79rem;letter-spacing:.05em}
  .merkmale li{gap:.5rem}

  /* Hero-Variante 1c — ab hier die Werte des Entwurfs */
  .held1c{min-height:620px}
  .held1c__bild img{object-position:center}
  .held1c__schleier{
    background:linear-gradient(90deg,rgba(18,53,91,.97) 0 34%,rgba(18,53,91,.86) 52%,rgba(18,53,91,.42) 100%);
  }
  .held1c__inhalt{padding-block:118px}   /* 88px aus dem Entwurf + 30px */
  .held1c__titel{
    /* Schriftgroesse wie im Entwurf. Die Breitengrenze steht so, dass die
       erste Zeile genau "Die groessten Kostentreiber" fasst: der Satzteil
       misst 10.85em, mit dem folgenden " in" waeren es 11.78em. 11.2em liegt
       dazwischen. In em, damit die Grenze mit der Schriftgroesse mitwaechst. */
    font-size:clamp(2.6rem,4.2vw,3.375rem);line-height:1.12;letter-spacing:-.015em;
    margin-bottom:22px;max-width:11.95em;
  }
  .held1c__unter{font-size:19px;line-height:1.65;max-width:48ch}
  .held1c__knoepfe{gap:14px;margin-top:34px}
  .held1c__knoepfe .knopf{padding:15px 26px}
  .fakten1c{grid-template-columns:repeat(4,1fr)}
  .fakten1c li{padding:20px 0}
  .fakten1c li:nth-child(n+3){border-top:0}
  .fakten1c li:nth-child(n+2){padding-left:24px;border-left:1px solid var(--linie-hell)}

  /* Hero-Variante 1d — ab hier die Werte des Entwurfs */
  .held1d{padding-top:84px}
  .held1d__marke{margin-bottom:18px}   /* der Entwurf sagt hier 18px, nicht 1.1rem */
  .held1d__titel{font-size:52px;line-height:1.13;letter-spacing:-.015em;margin-bottom:20px;max-width:11.95em}
  .held1d__unter{font-size:19px;line-height:1.65;max-width:60ch}
  .held1d__knoepfe{gap:14px;margin-top:32px}
  .held1d__knoepfe .knopf{padding:15px 26px}
  .fakten1d{margin-top:34px}
  .held1d__streifen{margin-top:62px}
  .held1d__bild{aspect-ratio:1.6986}

  /* Hero-Variante 1e — ab hier die Werte des Entwurfs */
  .held1e{padding-block:82px 88px}
  .held1e__raster{grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
  .held1e__titel{font-size:50px;line-height:1.14;letter-spacing:-.015em;margin-bottom:22px;max-width:11.95em}
  .held1e__unter{font-size:19px;line-height:1.65;max-width:52ch}
  .held1e__knoepfe{gap:14px;margin-top:34px}
  .held1e__knoepfe .knopf{padding:15px 26px}
  .fakten1e{margin-top:38px;padding-top:24px}
  .held1e__bilder{max-width:none}

  /* 01 Ausgangslage */
  .ausgangslage{grid-template-columns:.95fr 1.05fr;column-gap:clamp(2rem,4vw,3.5rem)}
  .ausgangslage__bild{aspect-ratio:517/420}
  .ausgangslage__karten{margin-top:3.5rem}

  .karten{gap:1.25rem}
  .karte{padding:1.9rem 1.7rem}
  .karte__nummer{font-size:.78rem;margin-bottom:.85rem}
  .karte__titel{font-size:1.1rem;margin-bottom:.55rem}
  .karte__text{font-size:.98rem}
  .fortschritt{margin-bottom:1.3rem}
  .karten .fortschritt + .karte__nummer{margin-bottom:.8rem}

  .intro{max-width:68ch;margin-bottom:3.2rem}

  /* 02 Das Kompendium */
  .kompendium{padding-block:clamp(4rem,7vw,5.5rem) 0}
  .kompendium__raster{
    grid-template-columns:1.08fr .92fr;column-gap:clamp(2rem,4vw,3.5rem);align-items:end;
  }
  .kompendium__text{padding-bottom:clamp(4rem,7vw,5.5rem)}
  .merkmale--fakten{
    display:flex;flex-wrap:wrap;gap:1.75rem;margin-top:1.9rem;padding-top:1.4rem;
  }
  .merkmale--fakten li{gap:.55rem}   /* im Hero sind es .5rem */
  .kompendium__cta{gap:1.25rem;margin-top:1.9rem}
  .kompendium__hinweis{font-size:.93rem}
  .kompendium__fussnote{margin-top:.7rem}
  .kompendium__cover .bild{
    width:min(330px,90%);margin-bottom:-72px;box-shadow:-22px 30px 60px rgba(3,14,28,.55);
  }
  .vorteile{padding-top:calc(clamp(4.5rem,9vw,7.5rem) + 72px)}

  /* Vorteile: zwei Spalten */
  .vorteile__raster{
    grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;
  }
  .hakenliste{gap:1.05rem}
  .hakenliste li{gap:.85rem}
  .hakenliste span{font-size:.97rem}
  .haken{margin:.5rem 0 0 4px}
  .inhaltsauszug{margin-top:0}
  .kapitel li{gap:1rem;padding:.9rem 0;font-size:.97rem;line-height:inherit}
  .kapitel__nr{font-size:.8rem}

  /* Leseprobe */
  .leseprobe-abschnitt{padding-block:clamp(2.8rem,5vw,4rem)}
  .leseprobe{grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
  .leseprobe__titel{font-size:clamp(1.35rem,2.4vw,1.8rem)}
  .leseprobe__text{margin-top:.9rem}
  .probeform__zeile{gap:.7rem}
  .probeform__zeile .feld{flex:1 1 240px}
  .probeform .zustimmung{margin-top:1rem}
  .probeform .hinweis{margin-top:1rem}
  .feldtitel{font-size:.88rem;margin-bottom:.4rem}

  /* 03 Autor: Bild links, alles Weitere rechts.
     Das Bild läuft über alle drei Zeilen und richtet sich oben aus – sonst
     bestimmt seine Höhe die erste Zeile und schiebt Vita und Schwerpunkte
     nach unten (im Entwurf ist die Textspalte ein einziges Rasterfeld). */
  .autor__raster{
    grid-template-columns:.82fr 1fr;
    grid-template-areas:"bild intro" "bild vita" "bild schwerpunkte";
    column-gap:clamp(2.2rem,4.5vw,3.8rem);
  }
  /* Das Bild laeuft mit, bis die Textspalte rechts durch ist. Sein Rasterfeld
     reicht ueber alle drei Zeilen, also endet das Mitlaufen genau dort. */
  .autor__bild{
    aspect-ratio:9/8;align-self:start;
    position:sticky;top:calc(var(--kopf-hoehe) + 2rem);
  }
  .vita{
    grid-template-columns:1fr;gap:1.6rem;margin-top:2.2rem;
    border-left:1px solid var(--linie-hell);padding-left:1.6rem;
    --punkt-links:calc(-1.6rem - 5px);
  }
  .vita li{border-left:0;padding-left:0}
  .vita__punkt{top:.55rem}
  .vita__stufe{font-size:.76rem;margin-bottom:.2rem}
  .vita__titel{font-size:1.02rem}
  .vita__text{font-size:.93rem}
  .schwerpunkte{margin-top:2.6rem;padding-top:1.7rem}
  .schwerpunkte__liste{gap:.5rem}
  .schwerpunkte__liste span{font-size:.78rem;padding:.34rem .72rem}

  /* 05 Beratung: drei gleiche Spalten */
  .karten--angebot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .angebot{padding:1.9rem 1.7rem}
  .angebot--breit{
    grid-column:auto;display:flex;flex-direction:column;
    grid-template-columns:none;grid-template-areas:none;gap:0;
  }
  .angebot__titel{font-size:1.1rem;margin-bottom:.5rem}
  .angebot__text{font-size:.97rem;margin-bottom:1.2rem}
  .angebot--breit .angebot__text{margin-bottom:1.2rem}
  .strichliste{gap:.55rem;margin-bottom:1.6rem;font-size:.93rem}
  .angebot--breit .strichliste{margin-bottom:1.6rem}
  .strichliste li{gap:.6rem;grid-template-columns:14px 1fr}
  .strich{margin-top:.72rem}
  .angebot--breit .angebot__cta{margin-top:auto}

  /* 06 FAQ: zwei Spalten nebeneinander, jede fuer sich */
  .faq-intro{margin-bottom:2.4rem}
  .faq-bild{height:300px;margin:0 0 3rem}
  .faq-liste{
    display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(2rem,4vw,3.5rem);align-items:start;
  }
  .faq-spalte + .faq-spalte{border-top:1px solid var(--linie)}
  .faq-schalter{gap:1.2rem;min-height:0;padding:1.35rem .25rem;font-size:1.04rem;line-height:1.5}
  .faq-zeichen{font-size:1.1rem}
  .faq-antwort{padding:0 3rem 1.6rem .25rem;font-size:.99rem}

  /* 07 Kontakt: Intro + Daten links, Formular rechts */
  .kontakt__raster{
    grid-template-columns:1fr .95fr;
    grid-template-areas:"intro form" "daten form";
    column-gap:clamp(2.4rem,5vw,4.5rem);row-gap:clamp(2rem,3.5vw,2.8rem);
    align-items:start;
  }
  .kontakt__intro{max-width:none}
  .kontakt__daten{grid-template-columns:1fr;gap:1.6rem;margin-top:0}
  .kontaktkarte{padding-top:1.1rem}
  .kontaktkarte__titel{font-size:.73rem;margin-bottom:.5rem}
  .kontaktkarte__wert{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.3}
  .kontaktkarte__ort{font-size:1rem}
  .kontakt__form{grid-template-columns:1fr;gap:1.1rem;margin-top:0}

  /* Fußzeile: vier Spalten */
  .fuss{padding-block:clamp(3rem,5vw,4rem) 2rem;font-size:.92rem}
  .fuss__raster{
    grid-template-columns:1.5fr 1fr 1.2fr 1fr;
    grid-template-areas:"marke inhalt kontakt recht";
    gap:2.5rem;
  }
  .fuss__logo{height:40px;margin-bottom:1.1rem}
  .fuss__claim{font-size:.74rem;letter-spacing:.18em;margin-bottom:.9rem}
  .kleintitel--fuss{font-size:.73rem;margin-bottom:1rem}
  .fussliste{gap:.6rem}
  .fussliste__ort{margin-top:.3rem}
  .fuss__zeile{margin-top:2.8rem;padding-top:1.5rem;font-size:.84rem}
}


/* ── Nur im CMS-Editor: alle FAQ-Antworten aufklappen ──────────────────────
   Der Editor markiert Textstellen unabhängig von ihrer Sichtbarkeit als
   bearbeitbar — die eingeklappten Antworten WAREN also schon editierbar, nur
   unsichtbar. Deshalb genügt eine reine Darstellungsregel.

   Bewusst per CSS und NICHT per Attribut: das `hidden` bleibt im DOM stehen,
   und weil das CMS beim Veröffentlichen das lebende DOM serialisiert, kann der
   aufgeklappte Zustand gar nicht erst in die gespeicherte Datei geraten. Der
   Besucher sieht die Antworten weiterhin eingeklappt.

   Greift nur, wenn die Editor-Oberfläche im Dokument liegt (`[data-cms-ui]`) —
   auf der ausgelieferten Seite existiert dieses Element nicht, die Regel ist
   dort also wirkungslos. */
html:has([data-cms-ui]) .faq-antwort[hidden] {
    display: block !important;
}

/* Zwischen 880 und 1060px ist die Textspalte im Hero 1e so schmal, dass die
   vier Faktenpunkte im 2x2-Raster umbrechen. Nur dort ruecken die beiden
   Spalten zusammen; ausserhalb bleibt der Abstand bei 26px. */
@media (min-width:880px) and (max-width:1060px){
  .fakten1e{column-gap:18px}
}

/* Bis 955px reicht selbst der kleinere Spaltenabstand nicht - dort stehen die
   vier Punkte einspaltig untereinander, damit keiner umbricht. */
@media (min-width:880px) and (max-width:955px){
  .fakten1e{grid-template-columns:auto;gap:9px}
}

/* 02 Kompendium: Preis in Gold neben dem Knopf, Verfuegbarkeit darunter.
   Der Block ist absichtlich etwas niedriger als der Knopf, damit die Zeile
   ruhig bleibt. Nebeneinander erst ab 880px - zwischen 690 und 879px ist die
   Textspalte zu schmal, dort steht der Block unter dem Knopf. */
.kompendium__preisblock{display:flex;flex-direction:column;gap:3px;align-items:center}
.kompendium__preis{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.kompendium__preis-zahl{
  font-size:26px;line-height:1;font-weight:600;color:var(--gold-hell);letter-spacing:-.02em;
}
.kompendium__preis-zusatz{
  font-family:var(--mono);font-size:12px;letter-spacing:.03em;
  color:var(--hell-72);font-weight:500;
}
.kompendium__preisblock .kompendium__hinweis{line-height:1.3}
.kompendium__anrechnung{font-size:14px;line-height:1.3;color:var(--hell-72)}

@media (min-width:690px){
  .kompendium__cta{
    display:grid;grid-template-columns:auto;justify-content:start;justify-items:start;gap:14px;
  }
  .kompendium__preisblock{align-items:flex-start;gap:2px}
  .kompendium__preisblock .kompendium__hinweis{font-size:14px}
  .kompendium__anrechnung{font-size:14px}
}

/* Nebeneinander erst ab 1060px: darunter wird der Knopf so schmal, dass seine
   Beschriftung umbricht. Bis dahin steht der Preisblock unter dem Knopf. */
@media (min-width:1060px){
  .kompendium__cta{display:flex;flex-wrap:nowrap;align-items:center;gap:22px}
}

/* Bot-Falle: fuer Menschen unsichtbar, Bots fuellen sie aus. Nicht display:none,
   das erkennen manche Bots. */
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------------------------------------------------------------------
   Rechtsseiten (Impressum, Datenschutz). Eigene, ruhige Textspalte - sie
   benutzen dieselben Farben, Schriften und den Inhaltsrahmen der Startseite.
--------------------------------------------------------------------------- */
.rechtskopf{background:var(--papier);border-bottom:1px solid var(--linie);padding:18px 0}
.rechtskopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.rechtskopf img{height:34px;width:auto}
.rechtskopf a.zurueck{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marine);font-weight:500;
}
.rechtstext{max-width:74ch;padding-block:44px 64px}
.rechtstext h1{font-size:30px;line-height:1.18;letter-spacing:-.015em;color:var(--marine);margin-bottom:26px}
.rechtstext h2{font-size:20px;margin:38px 0 10px;color:var(--tinte)}
.rechtstext h3{font-size:16px;margin:24px 0 6px;color:var(--tinte)}
.rechtstext p,.rechtstext li{font-size:16px;line-height:1.7;color:var(--tinte-weich)}
.rechtstext p{margin-bottom:12px}
.rechtstext ul{list-style:disc;padding-left:22px;margin-bottom:14px}
.rechtstext li{margin-bottom:6px}
.rechtstext a{color:var(--marine);text-decoration:underline;text-underline-offset:2px}
.rechtstext strong{color:var(--tinte);font-weight:600}
.rechtstext .stand{
  font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--tinte-weich);
  margin-top:40px;padding-top:14px;border-top:1px solid var(--linie);
}
/* Sichtbare Luecke - faellt beim Ueberfliegen auf, damit nichts unbemerkt
   mit Platzhaltern online geht. */
.luecke{
  background:rgba(196,138,58,.16);border:1px dashed var(--gold-dunkel);
  color:var(--gold-dunkel);font-weight:600;padding:1px 7px;border-radius:3px;
}
@media (min-width:880px){
  .rechtstext{padding-block:64px 96px}
  .rechtstext h1{font-size:38px}
  .rechtstext h2{font-size:22px}
}