/* ============================================================
   netzgewinn · Design 2.2 · kanonische Stildatei
   EINZIGE QUELLE DER WAHRHEIT für alle Seiten.
   Quelle: Startseite (variante-2-manifest-final) + Werkstatt.
   Regeln: 12-Spalten-Raster · Abstände Vielfache von 4 · nur Haarlinien.
   Fließtext genau zwei Größen (18/16). Überschriften Red Hat Text 700 aufrecht,
   ein Akzentwort je Überschrift in Redaction kursiv, Rubin tief.
   Fraunces, Lila (#836c9f), Sofia Pro, Rundungen und Pillen-Buttons sind VERBOTEN.
   Schriften werden separat geladen (fonts.css lokal, im Mockup base64).
   ============================================================ */

:root{
  --leinen:#fbfaf8; --ink:#1a1816; --ink-soft:#3d3a36; --line:#d9d2c7;
  --red:#c8242b; --red-deep:#9a1820; --red-wash:#f6e3e4;
  --turq-lt:#dff0ed; --turq-deep:#4f9d91;
  --sans:'Red Hat Text',system-ui,sans-serif;
  --serif:'Redaction',Georgia,serif;
  --plaster:'Plaster',Georgia,serif;
  --logo:'Red Hat Display',sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* Fließtext: NUR --t-base (18px) und --t-s (16px). Display: --t-m..--t-2xl. */
  --t-s:.8889rem; --t-base:1rem; --t-m:1.2222rem; --t-l:1.5556rem; --t-xl:2.2222rem; --t-2xl:3.1111rem;
  --gutter:24px; --edge:32px; --max:1100px;
  /* Vertikale Abstände — skalieren mit der Bildschirmgröße (siehe @media unten) */
  --pad-hero:var(--s9); --pad-sec:var(--s8);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:112.5%; } /* 1rem = 18px — rem-Basis ist html, nicht body */
body{ font-family:var(--sans); font-size:var(--t-base); line-height:1.6; color:var(--ink); background:var(--leinen); -webkit-font-smoothing:antialiased;
      /* Silbentrennung erst ab 14 Zeichen — in ALLEN Browsern.
         Chrome/Firefox: direkt über hyphenate-limit-chars. Safari/iOS kennt das nicht, erreicht die
         14er-Grenze aber über die WebKit-Werte: 7 Zeichen davor + 7 danach = frühestens ein 14-Zeichen-Wort
         hat überhaupt eine gültige Trennstelle. Kürzere Wörter wie „Inhaberin" bleiben so überall ganz. */
      hyphenate-limit-chars:14 7 7;
      -webkit-hyphenate-limit-before:7; -webkit-hyphenate-limit-after:7; }
a{ color:var(--ink); text-decoration:none; }
img{ display:block; max-width:100%; }
:focus-visible{ outline:3px solid var(--red-deep); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }

/* Raster & Trenner */
.grid{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--edge);
       display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); }
.hr{ grid-column:1 / 13; height:1px; background:var(--line); }
.hr--ink{ background:var(--ink); }

/* Bausteine · Text */
.eyebrow{ font-size:var(--t-s); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep); display:block; margin-bottom:var(--s4); }
.h2{ font-size:clamp(1.5rem,3.4vw,var(--t-l)); font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); }
.claim{ font-size:clamp(2.4rem,6vw,var(--t-2xl)); font-weight:700; line-height:1.08; letter-spacing:-.025em; }
.claim em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); letter-spacing:0; }
.lead{ font-size:var(--t-base); color:var(--ink); max-width:60ch; }
.lead + .lead{ margin-top:var(--s4); }
.lead b{ color:var(--ink); font-weight:600; }
.cap{ font-size:var(--t-s); color:var(--ink-soft); }
.cap a{ color:var(--red-deep); text-decoration:underline; }

/* Buttons — rechteckig, keine Rundung, keine Pille */
.btn{ display:inline-flex; align-items:center; gap:var(--s2); min-height:44px; padding:0 var(--s5);
      font-size:var(--t-s); font-weight:700; letter-spacing:.02em; font-family:inherit; border:0; cursor:pointer; color:#fff; background:var(--red); }
.btn:hover{ background:var(--red-deep); color:#fff; }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--leinen); }
.cta-alt{ font-size:var(--t-s); font-weight:600; color:var(--red-deep); }
.cta-alt:hover{ text-decoration:underline; }
.skip{ position:absolute; left:-9999px; } .skip:focus{ left:var(--edge); top:var(--s3); z-index:100; }

/* Logo */
.logo-svg{ height:60px; width:auto; display:block; color:var(--ink); }
.logo-svg--foot{ height:48px; }

/* Logo-Wortmarken-Gewichte (falls Wortmarke gesetzt statt SVG) */
.nw1{font-family:var(--logo);font-weight:300}
.nw2{font-family:var(--logo);font-weight:400}
.nw3{font-family:var(--logo);font-weight:500}
.nw4{font-family:var(--logo);font-weight:600}
.nw5{font-family:var(--logo);font-weight:700}

/* ── HEADER ── */
.site-head{ position:sticky; top:0; z-index:60; background:var(--leinen); }
.site-head__in{ align-items:center; padding-block:var(--s4); }
.brand{ grid-column:1 / 8; display:inline-flex; align-items:center; }
/* Menü-Knopf: kräftige rubinrote Balken (ohne Kasten). */
.burger{ grid-column:11 / 13; justify-self:end; width:52px; height:52px; background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.burger:hover span, .burger:hover span::before, .burger:hover span::after{ background:var(--red-deep); }
.burger span, .burger span::before, .burger span::after{ display:block; width:30px; height:4px; background:var(--red); position:relative; transition:transform .2s, background .18s; }
.burger span::before, .burger span::after{ content:''; position:absolute; left:0; }
.burger span::before{ top:-9px; } .burger span::after{ top:9px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); } .burger.open span::after{ top:0; transform:rotate(-45deg); }
.mobile-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%);
              width:100%; max-width:var(--max); display:none; background:var(--leinen);
              border-bottom:1px solid var(--line); box-shadow:0 16px 28px rgba(26,24,22,.10);
              padding:var(--s3) var(--edge) var(--s6); }
.mobile-menu.open{ display:block; }
.mobile-menu-inner{ max-width:var(--max); margin-inline:auto; }
.mobile-menu a:not(.btn){ display:block; padding:var(--s3) 0; font-size:var(--t-base); font-weight:600; border-top:1px solid var(--line); }
.mobile-menu a:first-child{ border-top:none; }
.mobile-menu a[aria-current]{ color:var(--red-deep); }
.mobile-menu .btn{ margin-top:var(--s5); }
/* Ausklappbare Untermenüs: Eltern-Link bleibt anklickbar, Pfeil-Knopf klappt auf/zu */
.mobile-menu .m-row{ display:flex; align-items:center; border-top:1px solid var(--line); }
.mobile-menu .m-row a{ flex:0 1 auto; border-top:0; }
.mobile-menu .m-toggle{ flex:0 0 44px; height:44px; padding:0; background:none; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); }
.mobile-menu .m-toggle svg{ width:18px; height:18px; transition:transform .2s; }
.mobile-menu .m-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mobile-menu .m-sub a{ padding-left:var(--s6); }

/* ── HERO-Varianten ── */
/* Manifest-Hero (Startseite) */
.manifest{ padding-block:var(--pad-hero) var(--pad-sec); }
.manifest__in{ grid-column:1 / 11; }
.manifest .eyebrow{ display:block; margin-bottom:var(--s5); }
.tagline{ margin-top:var(--s4); font-size:var(--t-m); font-weight:500; line-height:1.25; color:var(--ink); }
.say{ grid-column:1 / 9; margin-top:var(--s6); font-size:var(--t-base); color:var(--ink); }
.say b{ color:var(--ink); font-weight:600; }
.manifest__cta{ grid-column:1 / 13; margin-top:var(--s6); display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); }
/* Unterseiten-Hero (mit optionalem Bild). Hero-unten = Sektions-Polster (--pad-sec),
   damit der Abstand vor und hinter der Trennlinie gleich ist. Sektionen sind symmetrisch. */
.uhero{ padding-block:var(--pad-hero) var(--pad-sec); align-items:center; row-gap:var(--s6); }
.uhero__text{ grid-column:1 / 7; }
.uhero__text--wide{ grid-column:1 / 10; }
.uhero__claim{ font-size:clamp(2rem,5vw,var(--t-xl)); font-weight:700; line-height:1.13; letter-spacing:-.025em; }
.uhero__claim em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); letter-spacing:0; }
.uhero__say{ margin-top:var(--s5); font-size:var(--t-base); color:var(--ink); max-width:52ch; }
.uhero__cta{ margin-top:var(--s6); display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center; }
.uhero__figure{ grid-column:8 / 13; }
/* height:auto ist Pflicht — sonst gewinnt ein height-Attribut im HTML und das 4:5 wird ignoriert */
.uhero__figure img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
/* Rahmen nur um Grafik-Heros (Haarlinie Tinte) — die hellen iPad-Deckblätter (.xfade) und das
   Icon-Panel (.iconpanel) würden sonst auf Leinen mit dem Hintergrund verschwimmen.
   Foto-Heros (direktes > picture) bleiben rahmenlos. */
.uhero__figure > picture{ display:block; }
.uhero__figure > .xfade{ border:1px solid var(--ink); }
/* Ruhige Überblendung zweier Produkt-Deckblätter (Variante A/B). Respektiert reduced-motion. */
.xfade{ position:relative; aspect-ratio:4/5; }
.xfade picture{ position:absolute; inset:0; }
.xfade img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.xfade picture + picture{ opacity:0; animation:xfade 16s ease-in-out infinite; }
@keyframes xfade{ 0%,6%{ opacity:0; } 44%,56%{ opacity:1; } 94%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .xfade picture + picture{ animation:none; opacity:0; } }
/* Icon-Panel als Hero-Bild (4:5), z. B. Kunstfeld — Icon groß, Wortmarke klein darunter */
.iconpanel{ aspect-ratio:4/5; border:1px solid var(--ink); background:var(--leinen);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s6); padding:var(--s7); }
.iconpanel img{ width:56%; max-width:220px; height:auto; aspect-ratio:auto; object-fit:contain; }
.iconpanel figcaption, .iconpanel .word{ font-family:var(--sans); font-weight:600; font-size:var(--t-m);
  letter-spacing:.02em; color:var(--ink); }

/* ── Sektion (überall gleicher Rhythmus: Eyebrow → Überschrift → Inhalt) ── */
.sec{ padding-block:var(--pad-sec); }
.sec__head{ grid-column:1 / 13; margin-bottom:var(--s6); max-width:52ch; }
.col{ grid-column:1 / 9; }
.col--wide{ grid-column:1 / 13; }
.col--half{ grid-column:1 / 7; }

/* Übersichts-Zeilen (Plaster-Index, mit Pfeil) */
.toc{ grid-column:1 / 13; border-top:1px solid var(--ink); }
.row-idx{ display:grid; grid-template-columns:64px 1fr 48px; column-gap:var(--gutter); align-items:start;
        padding-block:var(--s6); border-bottom:1px solid var(--line); transition:padding-left .18s; }
.row-idx:hover{ padding-left:var(--s2); }
.row-idx__idx{ font-family:var(--plaster); font-size:var(--t-xl); line-height:1; color:var(--ink); }
.row-idx:hover .row-idx__idx{ color:var(--red); }
.row-idx__title{ display:block; font-size:var(--t-m); font-weight:600; letter-spacing:-.01em; line-height:1.1; }
.row-idx__desc{ display:block; margin-top:var(--s3); font-size:var(--t-base); color:var(--ink); }
.row-idx__arr{ font-size:var(--t-m); color:var(--red-deep); justify-self:end; }

/* Pfad-Zeilen (nummeriert, ohne Pfeil) */
.rows{ grid-column:1 / 13; border-top:1px solid var(--ink); }
.row{ display:grid; grid-template-columns:64px 1fr; column-gap:var(--gutter); align-items:start; padding-block:var(--s6); border-bottom:1px solid var(--line); }
.row__no{ font-family:var(--plaster); font-size:var(--t-xl); line-height:1; color:var(--ink); }
.row__title{ display:block; font-size:var(--t-m); font-weight:600; letter-spacing:-.01em; }
.row__desc{ display:block; margin-top:var(--s3); font-size:var(--t-base); color:var(--ink); max-width:56ch; }

/* Zwei-Spalten-Block (z. B. Einzelperson/Organisation, Basis/Erweitert) */
.split{ grid-column:1 / 13; display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); }
.split__item{ border-top:1px solid var(--ink); padding-top:var(--s4); }
.split__label{ font-size:var(--t-s); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep); margin-bottom:var(--s3); display:block; }
.split__item p{ font-size:var(--t-base); color:var(--ink); max-width:48ch; }

/* Preis-Liste (Formate & Preise) */
/* Ablauf-Schritte: vertikale Liste mit Plaster-Ordnungszahl (statt Kachel-Raster) */
.steps{ grid-column:1 / 10; border-top:1px solid var(--ink); }
.step{ display:grid; grid-template-columns:64px 1fr; column-gap:var(--gutter); align-items:baseline; padding-block:var(--s5); border-bottom:1px solid var(--line); }
.step__n{ font-family:var(--plaster); font-size:var(--t-xl); line-height:1; color:var(--ink); }
.step__t{ display:block; font-size:var(--t-m); font-weight:700; letter-spacing:-.01em; line-height:1.2; }
.step__d{ margin-top:var(--s2); font-size:var(--t-base); color:var(--ink); max-width:58ch; }

.prices{ grid-column:1 / 13; border-top:1px solid var(--ink); max-width:72ch; }
/* Preiszeile — überall gleich: Name links, Preis rechts, Button in eigener Zeile darunter. */
.price{ display:grid; grid-template-columns:1fr auto; column-gap:var(--s4); row-gap:var(--s4);
        align-items:baseline; padding-block:var(--s5); border-bottom:1px solid var(--line); }
.price__name{ grid-column:1; font-size:var(--t-base); color:var(--ink); }
.price__name small{ display:block; font-size:var(--t-s); color:var(--ink-soft); }
.price__val{ grid-column:2; justify-self:end; text-align:right; font-size:var(--t-m); font-weight:700; color:var(--ink); white-space:nowrap; }
.price__cta{ grid-column:1 / -1; justify-self:start; }

/* CTA-Zeile */
.cta-row{ grid-column:1 / 13; margin-top:var(--s6); display:flex; gap:var(--s4); flex-wrap:wrap; align-items:center; }

/* Übergang zur nächsten Seite (Zitat-artig) */
.handover{ grid-column:1 / 13; border-left:3px solid var(--red); padding:var(--s4) 0 var(--s4) var(--s5); }
.handover p{ font-size:var(--t-m); font-weight:500; color:var(--ink); max-width:48ch; }
.handover a{ display:inline-block; margin-top:var(--s3); color:var(--red-deep); font-weight:600; }

/* Karten-Raster */
.cards{ grid-column:1 / 13; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s5); }
.card{ border:1px solid var(--ink); padding:var(--s5); background:var(--leinen); }
.card__k{ font-size:var(--t-s); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--red-deep); display:block; margin-bottom:var(--s3); }
.card h3{ font-size:var(--t-m); font-weight:700; letter-spacing:-.01em; }
.card p{ margin-top:var(--s3); font-size:var(--t-base); color:var(--ink); }

/* Team */
.team{ grid-column:1 / 13; }
.tier-label{ font-size:var(--t-s); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep); margin:var(--s7) 0 var(--s2); }
.member{ display:grid; grid-template-columns:80px 1fr; column-gap:var(--s5); align-items:start; padding-block:var(--s5); border-top:1px solid var(--line); }
.member__ph{ width:80px; height:80px; border:1px solid var(--ink); background:var(--leinen); display:flex; align-items:center; justify-content:center; font-family:var(--plaster); font-size:var(--t-l); color:var(--ink-soft); overflow:hidden; }
.member__ph img{ width:100%; height:100%; object-fit:cover; }
.member__name{ font-size:var(--t-m); font-weight:700; letter-spacing:-.01em; }
.member__role{ display:block; margin-top:2px; font-size:var(--t-s); font-weight:600; color:var(--red-deep); }
.member__text{ margin-top:var(--s3); font-size:var(--t-base); color:var(--ink); max-width:60ch; }
.note{ grid-column:1 / 13; margin-top:var(--s6); font-size:var(--t-s); color:var(--ink-soft); }

/* Film / Video — Umrahmung als Haarlinie in Tinte, keine Rundung, kein Autoplay */
.film{ grid-column:1 / 13; }
.film__frame{ border:1px solid var(--ink); background:var(--ink); line-height:0; }
.film__frame video{ display:block; width:100%; height:auto; aspect-ratio:var(--film-ar, 16 / 9); background:var(--ink); }
.film figcaption{ margin-top:var(--s3); }

/* Beitragsliste (Impulse) — Aufbau wie die Team-Karten: kleines Vorschaubild, Haarlinie in Tinte */
.posts{ grid-column:1 / 13; border-top:1px solid var(--ink); }
.post{ display:grid; grid-template-columns:80px 1fr auto; column-gap:var(--s5); align-items:start;
       padding-block:var(--s5); border-bottom:1px solid var(--line); transition:padding-left .16s; }
.post:hover{ padding-left:var(--s2); }
/* Textspalte darf schrumpfen — sonst läuft die Vorschau über den Rand (Grid-Default min-width:auto). */
.post > span{ min-width:0; }
.post__title, .post__text{ overflow-wrap:break-word; hyphens:auto; }
.post__ph{ width:80px; height:80px; border:1px solid var(--ink); background:var(--leinen); overflow:hidden;
           display:flex; align-items:center; justify-content:center; font-family:var(--plaster); font-size:var(--t-m); color:var(--ink-soft); }
.post__ph img{ width:100%; height:100%; object-fit:cover; }
.post__title{ display:block; font-size:var(--t-m); font-weight:700; letter-spacing:-.01em; line-height:1.15; }
.post:hover .post__title{ color:var(--red-deep); }
.post__meta{ display:block; margin-top:var(--s2); font-size:var(--t-s); font-weight:600; color:var(--red-deep); }
.post__text{ margin-top:var(--s3); font-size:var(--t-base); color:var(--ink); max-width:58ch; }
.post__arr{ font-size:var(--t-m); color:var(--red-deep); align-self:center; }

/* Fließtext-Seiten (Beiträge, Rechtstexte) */
.prose{ grid-column:1 / 9; }
.prose > :first-child{ margin-top:0; }
.prose h2{ font-size:var(--t-l); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:var(--s6); margin-bottom:var(--s4); }
.prose h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); }
.prose h3{ font-size:var(--t-m); font-weight:700; margin-top:var(--s6); margin-bottom:var(--s3); }
.prose p{ font-size:var(--t-base); color:var(--ink); max-width:64ch; }
.prose p + p{ margin-top:var(--s4); }
.prose a{ color:var(--red-deep); text-decoration:underline; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ol{ counter-reset:li; list-style:none; margin-top:var(--s4); max-width:64ch; }
.prose ol li{ counter-increment:li; position:relative; padding-left:2.2rem; padding-block:var(--s1); font-size:var(--t-base); color:var(--ink); }
.prose ol li::before{ content:counter(li) "."; position:absolute; left:0; top:var(--s1); color:var(--red-deep); font-weight:600; }
.prose ul{ list-style:none; margin-top:var(--s4); max-width:64ch; }
.prose ul li{ position:relative; padding-left:1.4rem; padding-block:var(--s1); font-size:var(--t-base); color:var(--ink); }
.prose ul li::before{ content:"—"; position:absolute; left:0; top:var(--s1); color:var(--red-deep); }
.prose .stand{ margin-top:var(--s7); font-size:var(--t-s); color:var(--ink-soft); }

/* Beitrags-Blöcke (Impulse): Infobox, Download, Button, Zitat — im Prosa-Fluss gestylt */
.prose .block-infobox{ display:grid; grid-template-columns:auto 1fr; gap:var(--s4); margin-top:var(--s5); padding:var(--s4) var(--s5); border:1px solid var(--line); border-left:3px solid var(--red); max-width:64ch; }
.prose .infobox-icon{ color:var(--red-deep); }
.prose .infobox-icon svg{ width:22px; height:22px; display:block; }
.prose .infobox-label{ font-weight:700; margin-bottom:var(--s1); }
.prose .infobox-text p{ margin:0; }
.prose .infobox-text p + p{ margin-top:var(--s2); }
/* Nach dem Infobox-Kasten braucht der folgende Fließtext Luft (sonst rangeklatscht). */
.prose .block-infobox + *{ margin-top:var(--s5); }
.prose .block-download{ margin-top:var(--s5); max-width:64ch; }
.prose .download-link{ display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5); border:1px solid var(--ink); color:var(--ink); text-decoration:none; }
.prose .download-link:hover{ background:var(--ink); color:var(--leinen); }
.prose .download-icon{ width:24px; height:24px; flex:0 0 auto; }
.prose .download-info{ display:flex; flex-direction:column; }
.prose .download-text{ font-weight:600; }
.prose .download-meta{ font-size:var(--t-s); color:var(--ink-soft); }
.prose .download-link:hover .download-meta{ color:var(--leinen); }
.prose .block-button{ margin-top:var(--s5); }
.prose .block-button a{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s5); font-size:var(--t-s); font-weight:700; letter-spacing:.02em; color:#fff; background:var(--red); }
.prose .block-button a:hover{ background:var(--red-deep); }
.prose .block-button .btn-outline, .prose .block-button .btn-light{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.prose .block-button .btn-outline:hover, .prose .block-button .btn-light:hover{ background:var(--ink); color:var(--leinen); }
.prose blockquote{ margin-top:var(--s5); padding-left:var(--s5); border-left:3px solid var(--red); font-size:var(--t-m); font-style:italic; color:var(--ink); max-width:60ch; }
.prose blockquote p{ margin:0; }
.prose blockquote p + p{ margin-top:var(--s3); }
.prose blockquote cite, .prose blockquote footer{ display:block; margin-top:var(--s3); font-size:var(--t-s); font-style:normal; color:var(--ink-soft); }
/* Line-Block (horizontale Linie) im Beitrag ausblenden — wirkt im Textfluss störend */
.prose hr{ display:none; }
/* FAQ-Accordion: aufklappbare Fragen mit kleinem +/–-Indikator (kein überdimensioniertes Icon) */
.prose .block-accordion{ margin-top:var(--s5); border-top:1px solid var(--line); max-width:64ch; }
.prose .accordion-item{ border-bottom:1px solid var(--line); }
.prose .accordion-trigger{ display:flex; justify-content:space-between; align-items:center; gap:var(--s4); padding:var(--s4) 0; font-weight:600; cursor:pointer; list-style:none; }
.prose .accordion-trigger::-webkit-details-marker{ display:none; }
.prose .accordion-chevron{ display:none; }
.prose .accordion-trigger::after{ content:"+"; flex:0 0 auto; font-size:var(--t-m); font-weight:400; line-height:1; color:var(--red-deep); }
.prose .accordion-item[open] .accordion-trigger::after{ content:"–"; }
.prose .accordion-content{ padding-bottom:var(--s4); }
.prose .accordion-content > :first-child{ margin-top:0; }
/* Entscheidungs-Schritte (z. B. "Bin ich pflichtig?"): "Schritt N: …" als nummerierter Schritt */
.prose h2.schritt, .prose h3.schritt{ display:flex; align-items:baseline; gap:var(--s4); }
.prose .schritt__n{ flex:0 0 auto; font-family:var(--plaster); font-size:var(--t-xl); line-height:1; color:var(--red); }
.prose .schritt__q{ font-size:var(--t-l); font-weight:700; line-height:1.15; letter-spacing:-.02em; }

/* Entscheidungsbaum "Bin ich pflichtig?" (bfsg-tree): Frage-Karte + Ja/Nein-Ergebnis je Schritt */
.prose .bfsg-tree{ margin-top:var(--s8); }
.prose .bfsg-tree__header{ margin-bottom:var(--s6); }
.prose .bfsg-tree__eyebrow{ margin:0; font-size:var(--t-s); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--red-deep); }
.prose .bfsg-tree h2{ margin:var(--s3) 0 0; font-size:clamp(1.8rem,4.5vw,var(--t-xl)); font-weight:700; line-height:1.1; letter-spacing:-.025em; }
.prose .bfsg-tree h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); }
.prose .bfsg-tree__sub{ margin-top:var(--s3); font-size:var(--t-base); color:var(--ink-soft); max-width:52ch; }
.prose .bfsg-tree__steps{ list-style:none; margin:0; padding:0; max-width:none; display:flex; flex-direction:column; gap:var(--s6); }
.prose .bfsg-tree__step{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4) var(--s5); align-items:start; padding:0; margin:0; }
.prose .bfsg-tree__step::before{ content:none; }
.prose .bfsg-tree__question{ border:1px solid var(--ink); padding:var(--s5); }
.prose .bfsg-tree__step-num{ margin:0; font-family:var(--serif); font-style:italic; font-size:var(--t-base); color:var(--red-deep); }
.prose .bfsg-tree__question h3{ margin:var(--s2) 0 0; font-size:var(--t-m); font-weight:700; line-height:1.2; }
.prose .bfsg-tree__why{ margin-top:var(--s3); color:var(--ink); }
.prose .bfsg-tree__ref{ margin-top:var(--s4); font-size:var(--t-s); color:var(--ink-soft); }
.prose .bfsg-tree__branch-label{ display:block; margin-bottom:var(--s2); font-size:var(--t-s); font-weight:700; }
.prose .bfsg-tree__branch--pflicht .bfsg-tree__branch-label{ color:var(--red-deep); }
.prose .bfsg-tree__branch--frei .bfsg-tree__branch-label{ color:var(--turq-deep); }
.prose .bfsg-tree__result{ border:1px solid; padding:var(--s5); }
.prose .bfsg-tree__result--pflicht{ background:var(--red-wash); border-color:var(--red); }
.prose .bfsg-tree__result--frei{ background:var(--turq-lt); border-color:var(--turq-deep); }
.prose .bfsg-tree__result-tag{ margin:0; font-size:var(--t-s); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.prose .bfsg-tree__result h4{ margin:var(--s2) 0 0; font-size:var(--t-m); font-weight:700; line-height:1.2; }
.prose .bfsg-tree__result h4 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); }
.prose .bfsg-tree__result-detail{ margin-top:var(--s3); color:var(--ink); }
.prose .bfsg-tree__branch-no{ grid-column:1 / -1; margin:var(--s3) 0 0; padding-top:var(--s5); border-top:1px dashed var(--line); font-style:italic; color:var(--ink-soft); }
.prose .bfsg-tree__final{ margin-top:var(--s6); max-width:none; }
.prose .bfsg-tree__sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:640px){ .prose .bfsg-tree__step{ grid-template-columns:1fr; } }

/* Beitrags-Hero (Impulse): im Beitrag s/w, bei Hover farbig (Vorschau bleibt farbig) */
/* Beitragskopf: weniger Luft zwischen Text und Hero-Foto */
.uhero--beitrag{ padding-bottom:var(--s4); }
.beitrag-hero{ margin-top:var(--s2); margin-bottom:var(--s7); }
.beitrag-hero img{ grid-column:1 / 9; width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--ink); filter:grayscale(1); transition:filter .5s ease; }
.beitrag-hero:hover img{ filter:grayscale(0); }
@media (prefers-reduced-motion:reduce){ .beitrag-hero img{ transition:none; } }
/* Zurück-Link über dem Beitragstitel */
.beitrag-back{ display:inline-block; margin-bottom:var(--s4); font-size:var(--t-s); font-weight:600; color:var(--red-deep); }
.beitrag-back:hover{ text-decoration:underline; }
/* Autoren-Karte am Beitragsende */
.author{ grid-column:1 / 9; display:flex; gap:var(--s5); align-items:flex-start; margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--ink); }
.author__img{ width:76px; height:76px; flex:0 0 auto; object-fit:cover; border:1px solid var(--ink); }
.author__name{ display:block; font-weight:700; font-size:var(--t-m); }
.author__bio{ margin-top:var(--s2); color:var(--ink); max-width:58ch; }

/* Redaktions-Hinweis (nur im Entwurf — vor Live entfernen) */
.hint{ grid-column:1 / 9; border-left:3px solid var(--red); background:var(--red-wash);
       padding:var(--s4) var(--s5); margin-top:var(--s6); font-size:var(--t-s); color:var(--ink); }
.hint b{ color:var(--red-deep); }
.hint ul{ list-style:none; margin-top:var(--s3); }
.hint li{ display:grid; grid-template-columns:1.2rem 1fr; padding-block:2px; }
.hint li::before{ content:"—"; color:var(--red-deep); }

/* Definitionsliste (z. B. Werte) */
.deflist{ grid-column:1 / 13; border-top:1px solid var(--ink); max-width:74ch; }
.deflist__item{ padding-block:var(--s4); border-bottom:1px solid var(--line); }
.deflist__term{ display:block; font-size:var(--t-m); font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.deflist__def{ display:block; margin-top:var(--s3); font-size:var(--t-base); color:var(--ink); max-width:66ch; }
.deflist__letter{ grid-column:1 / 13; font-family:var(--plaster); font-size:var(--t-l); color:var(--ink); margin-top:var(--s6); }

/* Preise / Angebote — Preise bewusst dezent (Fließtextgröße) */
.offers{ grid-column:1 / 13; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s5); }
.offer{ border:1px solid var(--ink); padding:var(--s5); background:var(--leinen); }
.offer__head{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4); border-bottom:1px solid var(--line); padding-bottom:var(--s3); }
.offer__name{ font-size:var(--t-m); font-weight:700; letter-spacing:-.01em; }
.offer__name small{ display:block; margin-top:2px; font-size:var(--t-s); font-weight:600; letter-spacing:0; color:var(--ink-soft); }
.offer__price{ font-size:var(--t-base); font-weight:700; color:var(--red-deep); white-space:nowrap; }
.offer__note{ margin-top:var(--s3); font-size:var(--t-s); color:var(--ink-soft); }
.offer > p{ margin-top:var(--s3); font-size:var(--t-base); color:var(--ink); }
.offer__list{ list-style:none; margin-top:var(--s4); }
.offer__list li{ position:relative; padding-block:var(--s2); padding-left:var(--s5); font-size:var(--t-base); color:var(--ink); }
.offer__list li::before{ content:"—"; position:absolute; left:0; color:var(--red); }
/* „Ausgangspunkt"-Angebot: volle Breite über einem Karten-Raster (statt als 4. Karte umzubrechen).
   Titel/Preis als breite Kopfzeile, Beschreibung darunter auf lesbare Breite begrenzt. */
.offer--feature{ grid-column:1 / 13; }
.offer--feature > p{ max-width:70ch; }

/* Interaktiver Check (Quiz) — Design 2.2 */
.quiz{ grid-column:1 / 13; max-width:66ch; }
.hidden{ display:none !important; }
.quiz__bar{ display:flex; gap:var(--s2); margin-bottom:var(--s6); }
.quiz__step{ flex:1; height:3px; background:var(--line); }
.quiz__step.active{ background:var(--red); }
.quiz__step.done{ background:var(--ink); }
.quiz__count{ font-size:var(--t-s); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep); margin-bottom:var(--s3); display:block; }
.quiz-card h3{ font-size:clamp(1.4rem,3vw,var(--t-l)); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.quiz-card > p{ margin-top:var(--s3); color:var(--ink); max-width:60ch; }
.quiz-card .memo{ margin-top:var(--s4); font-size:var(--t-s); color:var(--red-deep); border-left:3px solid var(--red); padding-left:var(--s4); }
.quiz-opts{ margin-top:var(--s6); display:grid; gap:var(--s4); }
.quiz-opt{ text-align:left; border:1px solid var(--ink); background:var(--leinen); padding:var(--s5); cursor:pointer; width:100%; font-family:var(--sans); transition:background .15s; }
.quiz-opt:hover, .quiz-opt:focus-visible{ background:var(--red-wash); }
.quiz-opt[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); }
.quiz-opt[aria-pressed="true"] .quiz-opt__label{ color:var(--leinen); }
.quiz-opt[aria-pressed="true"] .quiz-opt__hint{ color:var(--leinen); opacity:.75; }
.quiz-opt__label{ font-size:var(--t-m); font-weight:600; color:var(--ink); display:block; }
.quiz-opt__hint{ margin-top:var(--s2); font-size:var(--t-s); color:var(--ink-soft); display:block; }
.quiz-nav{ margin-top:var(--s6); display:flex; justify-content:space-between; gap:var(--s4); }
.quiz-nav button[disabled]{ opacity:.35; cursor:not-allowed; }
.quiz-result{ border:1px solid var(--ink); padding:var(--s7); }
.quiz-result__head{ display:flex; align-items:baseline; gap:var(--s5); }
.quiz-result__score{ font-family:var(--plaster); font-size:var(--t-2xl); line-height:.9; color:var(--red); }
.quiz-result__score small{ display:block; font-family:var(--sans); font-size:var(--t-s); font-weight:600; color:var(--ink-soft); letter-spacing:.02em; }
.quiz-result h3{ font-size:var(--t-xl); font-weight:700; letter-spacing:-.02em; }
.quiz-result__summary{ margin-top:var(--s4); font-size:var(--t-m); font-weight:500; color:var(--ink); }
.quiz-result__summary em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); }
.quiz-result__detail{ margin-top:var(--s4); color:var(--ink); max-width:60ch; }
.recap{ margin-top:var(--s7); border-top:1px solid var(--line); }
.recap-item{ display:grid; grid-template-columns:2rem 1fr auto; gap:var(--s4); align-items:baseline; padding-block:var(--s3); border-bottom:1px solid var(--line); font-size:var(--t-s); }
.recap-num{ font-family:var(--plaster); color:var(--ink); }
.recap-q{ color:var(--ink); }
.recap-a{ font-weight:600; }
.recap-a.agent{ color:var(--turq-deep); }
.recap-a.mensch{ color:var(--red-deep); }

/* Checks-Liste */
.checks{ grid-column:1 / 13; list-style:none; border-top:1px solid var(--line); max-width:64ch; margin-top:var(--s5); }
.checks li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3); align-items:start; padding-block:var(--s4); border-bottom:1px solid var(--line); font-size:var(--t-base); }
.checks svg{ width:22px; height:22px; color:var(--red); flex-shrink:0; margin-top:2px; }

/* Ausklapper */
.tech{ grid-column:1 / 13; margin-top:var(--s5); }
.tech summary{ font-size:var(--t-s); font-weight:600; color:var(--red-deep); cursor:pointer; }
.tech p{ margin-top:var(--s4); font-size:var(--t-base); color:var(--ink); max-width:60ch; }

/* Qualifikation — Jahr als roter Kennsatz über Titel/Träger, rechts der Zertifikat-Link. */
.quali{ grid-column:1 / 10; margin-top:var(--s7); }
.quali__label{ font-size:var(--t-s); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep); margin-bottom:var(--s4); }
.quali__list{ list-style:none; border-top:1px solid var(--ink); }
.quali__item{ display:grid; grid-template-columns:1fr auto; column-gap:var(--s5); align-items:start;
              padding-block:var(--s4); border-bottom:1px solid var(--line); }
.quali__body{ min-width:0; }
.quali__year{ display:block; font-size:var(--t-s); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep); margin-bottom:var(--s1); }
.quali__title{ display:block; font-size:var(--t-m); font-weight:700; letter-spacing:-.01em; line-height:1.2; color:var(--ink); }
.quali__org{ display:block; margin-top:2px; font-size:var(--t-s); color:var(--ink-soft); }
.quali__doc{ align-self:center; display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-s); font-weight:600; color:var(--red-deep); white-space:nowrap; }
.quali__doc svg{ width:15px; height:15px; flex:0 0 auto; }
.quali__doc:hover{ text-decoration:underline; }

/* Formular */
.form-field{ margin-bottom:var(--s4); }
.form-field label{ display:block; font-size:var(--t-s); font-weight:600; color:var(--ink); margin-bottom:var(--s2); }
.form-field input, .form-field textarea{ width:100%; padding:12px 14px; border:1px solid var(--ink); background:#fff; font-family:var(--sans); font-size:var(--t-base); color:var(--ink); }
.form-field input:focus, .form-field textarea:focus{ outline:none; border-color:var(--red-deep); box-shadow:0 0 0 3px var(--red-wash); }

/* Abschluss-Block */
.end{ padding-block:var(--pad-sec); }
.end__in{ grid-column:1 / 9; }
.end h2{ font-size:clamp(1.8rem,4vw,var(--t-xl)); font-weight:700; letter-spacing:-.02em; line-height:1.14; }
.end h2 em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--red-deep); }
.end p{ margin:var(--s3) 0 var(--s5); color:var(--ink); }

/* ── FOOTER ── */
.site-foot{ margin-top:var(--s9); }
.site-foot__in{ padding-block:var(--s7) var(--s4); row-gap:var(--s6); }
.site-foot__brand{ grid-column:1 / 6; }
.logo-svg--foot{ margin-bottom:var(--s4); }
.site-foot__tag{ font-size:var(--t-s); color:var(--ink-soft); max-width:32ch; }
.site-foot__nav{ grid-column:6 / 13; display:flex; flex-wrap:wrap; gap:var(--s6) var(--s7); justify-content:flex-end; }
.foot-col{ display:flex; flex-direction:column; gap:var(--s2); }
.foot-h{ font-size:var(--t-s); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--red-deep); margin-bottom:var(--s2); }
.foot-col a{ font-size:var(--t-s); color:var(--ink-soft); }
.foot-col a:hover{ color:var(--red-deep); }
.site-foot__base{ padding-block:var(--s3) var(--s7); align-items:baseline; }
.site-foot__base p{ grid-column:1 / 13; font-size:var(--t-s); color:var(--ink-soft); letter-spacing:.03em; }

/* ── SILBENTRENNUNG ──
   Sinnvolle Trennung nur wo nötig (lange Komposita wie „Kleinstunternehmen"),
   damit in schmalen Spalten/auf dem Handy nichts überläuft. Nutzt lang="de".
   Überschriften trennen NICHT per Silbe (sähe unruhig aus), brechen aber notfalls. */
.lead, .say, .tagline, .cap,
.uhero__say, .manifest .say,
.prose p, .prose li, .prose blockquote,
.row__title, .row__desc, .row-idx__title, .row-idx__desc,
.step__t, .step__d, .split__item p, .deflist__term, .deflist__def,
.card h3, .card p, .member__text, .quali__list li, .offer > p, .offer__list li,
.post__title, .post__text, .handover p, .end p, .price__name{
  overflow-wrap:break-word; hyphens:auto;
}
/* Überschriften trennen nur, wenn ein einzelnes Wort zu lang für die Zeile ist
   (z. B. „Berufshaftpflichtversicherung") — normale Überschriften bleiben ungetrennt. */
.h2, .claim, .uhero__claim, .prose h2, .prose h3, .end h2{ overflow-wrap:break-word; hyphens:auto; }

/* ── RESPONSIV ── */
@media (max-width:820px){
  :root{ --pad-hero:var(--s8); --pad-sec:var(--s7); }
  .brand{ grid-column:1 / 10; }
  .manifest__in, .say{ grid-column:1 / 13; }
  .uhero__text, .uhero__text--wide, .col, .col--half, .quali, .prose, .end__in, .steps{ grid-column:1 / 13; }
  /* Text zuerst, Bild darunter — das Hero-Foto folgt dem Text (kein order:-1 mehr). */
  .uhero__figure{ grid-column:1 / 13; max-width:360px; }
  .split{ grid-template-columns:1fr; gap:var(--s5); }
  .site-foot__brand, .site-foot__nav{ grid-column:1 / 13; } .site-foot__nav{ justify-content:flex-start; }
}
@media (max-width:640px){
  :root{ --pad-hero:var(--s7); --pad-sec:var(--s6);
         /* Fließtext auf dem Handy je 1px größer (18→19 / 16→17). Nur Fließtext, nicht die Displaygrößen. */
         --t-base:1.0556rem; --t-s:.9444rem; }
  /* Logo und Menü-Knopf etwas größer greifbar. */
  .logo-svg{ height:72px; }
  .logo-svg--foot{ height:58px; }
  .burger{ width:52px; height:52px; }
  .burger span, .burger span::before, .burger span::after{ width:32px; }
  .burger span::before{ top:-10px; } .burger span::after{ top:10px; }
  /* Pflaster-Zahl-Listen einheitlich: kleinere Zahl, klarer Abstand zum Text, engere Zeilen. */
  .row-idx, .row, .step{ grid-template-columns:40px 1fr; column-gap:var(--s4); padding-block:var(--s4); align-items:start; }
  .row-idx__idx, .row__no, .step__n{ font-size:var(--t-l); }
  .row-idx__arr{ display:none; }
  .beitrag-hero img{ grid-column:1 / 13; }
  .member{ grid-template-columns:64px 1fr; } .member__ph{ width:64px; height:64px; }
  .post{ grid-template-columns:64px 1fr; } .post__ph{ width:64px; height:64px; } .post__arr{ display:none; }
  /* Quali-Liste: Zertifikat-Link rückt unter den Eintrag. */
  .quali__item{ grid-template-columns:1fr; }
  .quali__doc{ justify-self:start; align-self:auto; margin-top:var(--s3); }
  /* CTA-Abschluss unten weniger Polster, Footer rückt näher. */
  .end{ padding-bottom:var(--s4); }
  .site-foot{ margin-top:var(--s7); }
  .site-foot__base p{ grid-column:1 / 13; text-align:left; }
}