/* ============================================================
   KWC · HAUPT-STYLESHEET
   Reihenfolge der Blöcke, BINDEND. Wer sie ändert, bricht den Druck.
     1  Tokens              → tokens.css, separat, zuerst geladen
     2  Basis = MOBIL       → dieser Block. Keine Media Query.
     3  @media screen and (min-width:760px)
     4  @media print        → IMMER ZULETZT

   MOBILE FIRST, verbindlich. 90 Prozent der Nutzerinnen kommen mobil,
   vermutlich über die Hälfte mit iOS Safari.
     · Basis ist die Mobilfassung. Desktop ist der Zusatz, nie umgekehrt.
     · Kein max-width in einer Media Query. Nirgends. pruefung.py bricht.
     · Jede Media Query trägt "screen and". A4 misst bei 96 dpi nur 794 px,
       eine ungescopte Breakpoint-Regel greift sonst in der Druckvorschau mit.
     · Eingabefelder mindestens 16 px, sonst zoomt iOS Safari beim Fokus.
     · Tippziele mindestens 44 px hoch.
     · Kein Effekt, der nur auf :hover existiert.
   ============================================================ */

/* ---------- 2 · BASIS, MOBIL ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Sprungmarke aus header.php. Sichtbar NUR bei Tastaturfokus.
   Kein display:none und kein visibility:hidden - beides nimmt das
   Ziel aus der Tabulatorfolge und macht die Marke nutzlos. Deshalb
   ueber den Rand geschoben und bei :focus zurueckgeholt. */
.skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--kwc-ink); color:var(--kwc-paper);
  padding:12px 20px; border-radius:0 0 var(--kwc-radius) 0;
  font-family:var(--kwc-body); font-size:16px; text-decoration:none}
.skip:focus{left:0}
body{
  margin:0; background:var(--kwc-paper); color:var(--kwc-ink);
  font-family:var(--kwc-body); font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:0 24px}
.wrap-wide{max-width:1160px; margin:0 auto; padding:0 24px}
section{padding:64px 0}
section + section{border-top:1px solid var(--kwc-line)}

h1,h2,h3{margin:0 0 16px; font-weight:400}
h1{font-family:var(--kwc-display); font-size:36px; line-height:1.1; letter-spacing:-.3px}
h2{font-family:var(--kwc-display); font-size:28px; line-height:1.12; letter-spacing:-.3px}
h3{font-family:var(--kwc-body); font-size:18px; font-weight:600; line-height:1.35}
h1 i,h2 i{font-style:italic; color:var(--kwc-forest)}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.eyebrow{
  font-size:14px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--kwc-forest); margin:0 0 16px;
}
.lead{font-size:18px; line-height:1.55}
.meta{font-size:14px; line-height:1.5; color:var(--kwc-ink-55)}
.mono{font-family:var(--kwc-mono); font-weight:500; font-variant-numeric:tabular-nums}
sup a{color:var(--kwc-coral-deep); text-decoration:none; font-size:14px}

a{color:var(--kwc-coral-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--kwc-forest); outline-offset:3px;
}

/* Buttons */
.btn{
  display:inline-block; font-family:var(--kwc-body); font-size:16px; font-weight:600;
  line-height:1.2; padding:16px 32px; border-radius:var(--kwc-pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; text-align:center; min-height:48px;
}
/* B17: weiss auf coral-deep = 6,60 zu 1. Auf --kwc-coral waren es
   4,02 und damit unter der Schwelle 4,5 fuer 16 px. Gemessen in
   test-barrierefreiheit.mjs, nicht geschaetzt. */
.btn-primary{background:var(--kwc-coral-deep); color:var(--kwc-white)}
.btn-primary:hover{background:var(--kwc-coral-deeper)}
.btn-secondary{background:transparent; color:var(--kwc-forest); border-color:var(--kwc-forest)}
.btn-block{display:block; width:100%}
.ctazone{margin:40px 0; text-align:center}
.ctanote{font-size:14px; color:var(--kwc-ink-55); margin:16px 0 0}

/* Karten und Flächen */
.card{background:var(--kwc-white); border:1px solid var(--kwc-line); border-radius:var(--kwc-radius); padding:24px}
.tint{background:var(--kwc-mint-tint); border-radius:var(--kwc-radius); padding:24px; color:var(--kwc-mint-ink)}
.tint h3{color:var(--kwc-mint-ink)}
.rule-box{border:1px solid var(--kwc-rule); border-radius:var(--kwc-radius); padding:24px}

/* Bilanz im ersten Fold der Ergebnisseite. Bewusst KEIN zweiter
   umrandeter Kasten neben .rule-box - der Kasten traegt links eine
   Kante statt eines Rahmens, sonst stehen zwei gleich aussehende
   Bloecke uebereinander und keiner fuehrt mehr. */
.bilanz{border-left:3px solid var(--kwc-forest); padding:4px 0 4px 20px; margin:0 0 24px}
.bilanz-kopf{font-weight:600; margin:0 0 12px}
.bilanz-liste{list-style:none; margin:0 0 16px; padding:0}
.bilanz-liste li{display:flex; gap:12px; align-items:flex-start; margin:0 0 8px; line-height:1.5}
.bilanz-mark{flex:0 0 auto; width:16px; font-family:var(--kwc-mono); line-height:1.5}
.bilanz-da .bilanz-mark{color:var(--kwc-forest)}
.bilanz-offen .bilanz-mark{color:var(--kwc-ink-55)}
.bilanz-offen .bilanz-text{color:var(--kwc-ink-55)}
/* Tippziel mindestens 44 px hoch, Auflage aus dem Brandguide. */
.bilanz-link{display:inline-block; min-height:44px; line-height:44px;
  font-weight:600; color:var(--kwc-coral-deep); text-decoration:none}
.bilanz-link:hover,.bilanz-link:focus{text-decoration:underline}
/* Auf Papier ist der Verweis auf einen Anker sinnlos. */
.alertbox{border-left:3px solid var(--kwc-alert); padding:0 0 0 16px; margin:24px 0}
.warnbox{border-left:3px solid var(--kwc-warn); padding:0 0 0 16px; margin:24px 0}

ol.numbered{margin:0; padding:0; list-style:none; counter-reset:n}
ol.numbered li{
  counter-increment:n; position:relative; padding:0 0 0 40px; margin:0 0 24px;
}
ol.numbered li::before{
  content:counter(n,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--kwc-mono); font-weight:500; font-size:16px; color:var(--kwc-forest);
}
ul.plain{margin:0 0 16px; padding:0 0 0 20px}
ul.plain li{margin:0 0 8px}

/* Fortschritt */
.progress{height:4px; background:var(--kwc-line); border-radius:var(--kwc-pill); overflow:hidden}
.progress > i{display:block; height:100%; background:var(--kwc-forest); border-radius:var(--kwc-pill)}
.progress-meta{font-size:14px; color:var(--kwc-ink-55); margin:8px 0 0; font-family:var(--kwc-mono)}

/* Antwortoptionen */
.opt{
  display:block; width:100%; text-align:left; background:var(--kwc-white); color:var(--kwc-ink);
  border:1px solid var(--kwc-rule); border-radius:var(--kwc-radius);
  padding:16px 24px; margin:0 0 8px; font-family:var(--kwc-body); font-size:16px;
  line-height:1.4; cursor:pointer; min-height:56px;
}
.opt:hover{border-color:var(--kwc-forest)}
/* Ausgewaehlter Zustand. BEIDE Schreibweisen noetig: Mehrfachauswahl
   traegt aria-pressed, Einfachauswahl und Matrix tragen seit dem
   A11y-Fix vom 05.08.2026 role=radio mit aria-checked. Nur
   aria-pressed zu formatieren liess Einfach- und Matrixfragen ohne
   jede sichtbare Auswahl zurueck - auf der Matrix war der
   Weiter-Knopf dadurch eine Sackgasse. */
.opt[aria-pressed="true"],
.opt[aria-checked="true"]{background:var(--kwc-mint-tint); border-color:var(--kwc-forest); color:var(--kwc-mint-ink)}

/* Score */
.score{font-family:var(--kwc-mono); font-weight:500; font-size:72px; line-height:1; letter-spacing:-2px}
.score small{font-size:24px; color:var(--kwc-ink-55); letter-spacing:0}
.oberfrage{font-size:16px; color:var(--kwc-ink-70); margin:16px 0 24px}
.bandtext{font-size:18px; line-height:1.5; margin:0 0 24px}
.closing{font-family:var(--kwc-display); font-size:28px; line-height:1.2; letter-spacing:-.3px}

/* Achsenbalken */
.bar{margin:0 0 24px}
.bar-top{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:0 0 8px}
.bar-label{font-size:16px; font-weight:600}
.bar-val{font-family:var(--kwc-mono); font-size:14px; color:var(--kwc-ink-55)}
.bar-track{height:8px; background:var(--kwc-mint-tint); border-radius:var(--kwc-pill); overflow:hidden}
.bar-fill{display:block; height:100%; background:var(--kwc-forest); border-radius:var(--kwc-pill)}
.bar-note{font-size:14px; color:var(--kwc-ink-55); margin:8px 0 0}
.legend{font-size:14px; color:var(--kwc-ink-70); margin:24px 0 0; padding:16px; background:var(--kwc-mint-tint); border-radius:var(--kwc-radius); color:var(--kwc-mint-ink)}

/* Gate */
.gate{background:var(--kwc-mint-tint); border-radius:var(--kwc-radius); padding:24px; color:var(--kwc-mint-ink)}
.gate h3{color:var(--kwc-mint-ink)}
.field{
  display:block; width:100%; font-family:var(--kwc-body); font-size:16px;
  padding:16px; border:1px solid var(--kwc-rule); border-radius:var(--kwc-radius);
  background:var(--kwc-white); color:var(--kwc-ink); margin:0 0 24px; min-height:56px;
}
.checks{margin:0 0 24px}
.check{display:flex; gap:16px; align-items:flex-start; padding:8px 0; cursor:pointer; font-size:16px; line-height:1.45}
.check input{width:24px; height:24px; margin:0; flex:0 0 auto; accent-color:var(--kwc-forest)}
.consent{font-size:14px; line-height:1.5; margin:0 0 24px}

/* FAQ */
details{border-top:1px solid var(--kwc-line); padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--kwc-line)}
summary{
  font-size:18px; font-weight:600; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; font-family:var(--kwc-mono); color:var(--kwc-forest); flex:0 0 auto}
details[open] summary::after{content:'–'}
details > *:not(summary){margin-top:16px}

/* Quellenverzeichnis */
.srclist{margin:0; padding:0; list-style:none; counter-reset:s}
.srclist li{
  counter-increment:s; position:relative; padding:0 0 0 32px; margin:0 0 16px;
  font-size:14px; line-height:1.55; color:var(--kwc-ink-70);
}
.srclist li::before{
  content:counter(s)'.'; position:absolute; left:0; top:0;
  font-family:var(--kwc-mono); font-size:14px; color:var(--kwc-ink-55);
}
.srclist strong{color:var(--kwc-ink); font-weight:600}
.chips{font-size:14px; line-height:1.7; color:var(--kwc-ink-70)}

/* ---------- Danke-Seite, Blockabstände ---------- */
#page-danke .ctazone{margin:48px 0}
#page-danke .alertbox{margin:48px 0}
#page-danke .alertbox:last-child{margin-bottom:0}
#page-danke .doc-section{padding-top:56px}

/* ---------- Das Dokument, eingebettet auf der Danke-Seite ---------- */
.doc{
  background:var(--kwc-white); border:1px solid var(--kwc-line); border-radius:var(--kwc-radius);
  padding:24px; margin:0 0 24px; color:var(--kwc-ink);
}
.doc-kopf{border-bottom:1px solid var(--kwc-rule); padding:0 0 16px; margin:0 0 24px}
.doc-h1{font-family:var(--kwc-display); font-size:24px; line-height:1.15; margin:0 0 8px}
.doc-eyebrow{font-size:14px; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--kwc-forest); margin:0 0 8px}
.doc h4{font-family:var(--kwc-body); font-size:16px; font-weight:600; margin:24px 0 8px}
.doc-punkt{margin:0 0 24px}
.doc-frage{font-weight:600; font-size:16px; margin:0 0 8px}
.doc-hint{font-size:14px; color:var(--kwc-ink-70); margin:0 0 8px}
.doc-grundlage{font-family:var(--kwc-mono); font-size:14px; color:var(--kwc-ink-55); margin:0}
.doc-linie{height:24px; border-bottom:1px solid var(--kwc-rule); margin:0 0 8px}
.doc-fuss{border-top:1px solid var(--kwc-rule); padding:16px 0 0; margin:24px 0 0; font-size:14px; color:var(--kwc-ink-55)}

/* ---------- Fragefluss, Block 2 ---------- */
/* Mobile first. Jedes Tippziel mindestens 44 px, Daumenreichweite. */
.antworten{margin-top:32px}
.opt-multi[aria-pressed="true"]::after{content:" \2713"}
.matrix-zeile{border:0; padding:0; margin:0 0 28px}
.matrix-zeile legend{padding:0; margin:0 0 12px; font-weight:500; line-height:1.4}
/* Offene Zeile nach einem blockierten Weiter-Klick. Farbe allein
   traegt die Aussage nicht, deshalb steht zusaetzlich der Hinweistext
   ueber der Steuerung. */
.matrix-zeile.fehlt legend{color:var(--kwc-alert)}
.matrix-zeile.fehlt .opt{border-color:var(--kwc-alert)}
.matrix-schalter{display:flex; gap:8px}
.matrix-schalter .opt{flex:1 1 0; min-width:0; text-align:center; margin:0;
  padding:14px 8px; min-height:48px; hyphens:auto}
.zusatzfrage{margin-top:24px; padding-top:24px; border-top:1px solid var(--kwc-line)}
.btn-ghost{background:transparent; color:var(--kwc-ink-70);
  border:1px solid var(--kwc-line); margin-bottom:12px}
/* Nach jedem Fragewechsel bekommt die Ueberschrift den Fokus, damit ein
   Screenreader vorn weiterliest. Sichtbar sein muss dieser Fokus nur bei
   Tastaturbedienung, sonst steht auf dem Handy ein Rahmen um die Frage. */
[data-kwc-flow] h2:focus:not(:focus-visible){outline:none}

/* Kein :hover-only. Ruecmeldung kommt ueber aria-pressed und :active,
   ein Touchgeraet kennt kein Schweben. */
.opt:active,.btn:active{transform:translateY(1px)}


/* ---------- Ergebnisseite, Block 4 ---------- */
.achse{margin:0 0 20px}
.achse-label{margin:0 0 8px; font-size:15px; color:var(--kwc-ink-70)}
.balken{background:var(--kwc-line); border-radius:var(--kwc-pill); height:12px; overflow:hidden}
.balken > i{display:block; height:100%; background:var(--kwc-forest); border-radius:var(--kwc-pill)}
/* Legende sichtbar, nie als Tooltip. Auf einem Touchgeraet ist ein
   Tooltip kein Bedienelement, sondern versteckte Information. */
.legende{font-size:15px; color:var(--kwc-ink-70); margin-top:16px}
.punkt{border-top:1px solid var(--kwc-line); padding-top:24px; margin-top:24px}
.punkt:first-of-type{border-top:0; padding-top:0; margin-top:0}
.punkt-nr{font-family:var(--kwc-mono); font-size:15px; color:var(--kwc-coral-deep); margin:0 0 4px}
/* Hinweisbloecke tragen KEIN Schliessen-Symbol und sind nicht
   einklappbar. Auflage aus 00-invarianten.md, gilt fuer TB-S7, TB-S9
   und TB-S8. Deshalb hier auch kein details/summary. */
/* Abstand zwischen zwei aufeinanderfolgenden Bausteinen unterhalb
   der Top-3. h3 hat global keinen oberen Abstand, deshalb klebte der
   Zwischentitel am letzten Absatz des Blocks davor. Der Abstand sitzt
   am Block, nicht an der Ueberschrift: sonst faengt der erste Block
   der Sektion mit einer Luecke unter der Einleitung an. */
.tb + .tb{margin-top:32px}
.tb h3{margin:0 0 8px}

.tb.hinweis{background:var(--kwc-mint-tint); color:var(--kwc-mint-ink);
  border-radius:var(--kwc-radius); padding:24px; margin:0 0 20px}
.tb.hinweis p{margin:0}
.bandtext{font-size:20px; line-height:1.5; margin:0 0 24px}


/* ---------- Gate, Block 5 ---------- */
.gate-frage{font-weight:600; margin:28px 0 12px}
.consent{font-size:15px; color:var(--kwc-mint-ink); margin:20px 0}
.gate-fehler{color:var(--kwc-alert); font-weight:500; margin:0 0 12px}
/* Honigtopf. Kein display:none, manche Automaten ueberspringen genau das.
   Fuer Menschen unsichtbar, fuer die Tastatur nicht erreichbar. */
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.gate .field{margin-bottom:8px}


/* ---------- Gespraechsleitfaden, Block 6 ---------- */
/* Uebernommen aus gespraechsleitfaden/beispiel.html, abgenommen und
   gegen die Druckprobe geprueft. EINE Aenderung: das Beispiel setzte
   die Desktop-Werte als Basis und korrigierte sie in einem
   max-width-Fenster nach unten. Hier ist es gedreht, Basis ist die
   schmale Fassung. Kein Wert wurde erfunden, keiner ging verloren.
   Die Druckregeln stehen unveraendert im letzten Block. */
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{font-family:var(--kwc-body); color:var(--kwc-ink); background:var(--kwc-paper); -webkit-font-smoothing:antialiased}
.hinweis{border-left:3px solid var(--kwc-alert); padding:0 0 0 24px; margin:0 0 64px}
.hinweis h3{font-family:var(--kwc-body); font-size:18px; font-weight:600; margin:0 0 12px}
.hinweis p{font-size:17px; line-height:1.6; margin:0; color:var(--kwc-ink)}
.blattstapel{padding:0 12px 96px}
.blatt{width:210mm; max-width:100%; margin:0 auto 32px; background:var(--kwc-white); padding:10mm 7mm 8mm; border:1px solid var(--kwc-line)}
.blatt.fix{min-height:0; display:flex; flex-direction:column}
.blatt.fix .blattinhalt{flex:1 1 auto; display:flex; flex-direction:column; min-height:0}
.kopf{border-bottom:2pt solid var(--kwc-ink); padding-bottom:var(--u); margin-bottom:calc(var(--u)*3)}
.kopf h2{font-family:var(--kwc-display); font-weight:400; font-size:19pt; line-height:1.08; letter-spacing:-0.4pt; margin:0 0 calc(var(--u)*1.5)}
.kopfzeile{display:flex; justify-content:space-between; align-items:baseline; gap:calc(var(--u)*2); flex-wrap:wrap}
.namenszeile{font-size:10.5pt; margin:0; color:var(--kwc-ink)}
.namenszeile i{display:inline-block; width:38mm; border-bottom:.75pt solid var(--kwc-rule); margin-left:calc(var(--u)/2)}
.kopfmeta{font-family:var(--kwc-mono); font-size:9.5pt; color:var(--kwc-ink-55); margin:0}
.abschnitt{margin:0 0 calc(var(--u)*4)}
.abschnitt:last-child{margin-bottom:0}
.abschnitt > h3{font-family:var(--kwc-body); font-size:10pt; font-weight:500; letter-spacing:1.5px; text-transform:uppercase; color:var(--kwc-forest); margin:0 0 calc(var(--u)*1.5); padding-bottom:calc(var(--u)*.75); border-bottom:1px solid var(--kwc-line); break-after:avoid}
.kurz{font-size:11pt; line-height:1.5; display:grid; grid-template-columns:1fr; gap:calc(var(--u)*.75)}
.kurz div{display:flex; gap:calc(var(--u)*1.5)}
.kurz span:first-child{flex:0 0 34mm; color:var(--kwc-ink-55)}
.kurz span:last-child{font-weight:500}
.intro{font-size:10.5pt; line-height:1.55; color:var(--kwc-ink-70); margin:0 0 calc(var(--u)*1.5); max-width:150mm}
.leiste{font-size:11pt; line-height:1.6; display:flex; flex-wrap:wrap; gap:var(--u) calc(var(--u)*2)}
.leiste span{white-space:nowrap}
.leiste b{font-family:var(--kwc-mono); font-weight:500; color:var(--kwc-forest); margin-right:calc(var(--u)/2)}
.leiste b.offen{color:var(--kwc-alert)}
.anfordern{font-size:10.5pt; line-height:1.55; margin:calc(var(--u)*1.5) 0 0; background:var(--kwc-mint-tint); color:var(--kwc-mint-ink); border-radius:var(--kwc-radius); padding:calc(var(--u)*1.5) calc(var(--u)*2)}
.anfordern b{font-weight:600}
.anfliste{font-size:11pt; line-height:1.5}
.anfliste div{display:flex; gap:calc(var(--u)*1.5); padding:calc(var(--u)/2) 0; align-items:center}
.marke{flex:0 0 6mm; font-family:var(--kwc-mono); font-weight:500; color:var(--kwc-forest); text-align:center}
.marke.offen{color:var(--kwc-alert)}
.rahmen{border-left:2pt solid var(--kwc-forest); padding:0 0 0 calc(var(--u)*2); margin:0 0 calc(var(--u)*3); break-inside:avoid}
.rahmen:last-child{margin-bottom:0}
.rahmen p{font-size:10.5pt; line-height:1.55; margin:0 0 var(--u); max-width:150mm}
.rahmen .frage{font-weight:600; font-size:11.5pt; line-height:1.45}
.punkt{break-inside:avoid; page-break-inside:avoid; margin:0 0 calc(var(--u)*2.5)}
.punkt:last-child{margin-bottom:0}
.punkt.kompakt{margin:0 0 calc(var(--u)*2.5)}
.punktkopf{display:flex; align-items:baseline; gap:calc(var(--u)*1.5); margin:0 0 var(--u)}
.rang{font-family:var(--kwc-mono); font-size:11.5pt; font-weight:500; color:var(--kwc-forest); flex:0 0 auto}
.titel{font-size:13pt; font-weight:600; line-height:1.25; flex:1 1 auto}
.haken{flex:0 0 auto; width:4.5mm; height:4.5mm; border:.75pt solid var(--kwc-rule); border-radius:1mm; display:inline-block; align-self:center}
.punktleib{padding-left:0}
.frage{font-size:11.5pt; font-weight:600; line-height:1.45; margin:0 0 var(--u); max-width:142mm}
.hintergrund{font-size:10.5pt; line-height:1.55; color:var(--kwc-ink-70); margin:0 0 var(--u); max-width:142mm}
.grundlage{font-family:var(--kwc-mono); font-size:9.5pt; line-height:1.45; color:var(--kwc-ink-55); margin:0 0 calc(var(--u)*1.5); max-width:142mm}
.grundlage.offen{color:var(--kwc-warn)}
.antwortfeld{height:16.92mm; background:repeating-linear-gradient(to bottom,
    transparent 0 8.2mm, var(--kwc-rule) 8.2mm 8.46mm)}
.abschnitt.wachsend{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
.notizfeld{flex:1 1 auto; min-height:25mm; background:repeating-linear-gradient(to bottom,
    transparent 0 8.2mm, var(--kwc-rule) 8.2mm 8.46mm)}
.schritt{break-inside:avoid; margin:0 0 calc(var(--u)*3)}
.schritt:last-of-type{margin-bottom:0}
.schrittkopf{display:flex; align-items:baseline; gap:calc(var(--u)*1.5); margin:0 0 var(--u)}
.schritt .titel{font-size:12pt}
.schritt p{font-size:11pt; line-height:1.55; margin:0; max-width:150mm}
.limitsatz{font-size:10.5pt; line-height:1.55; color:var(--kwc-ink-70); margin:calc(var(--u)*3) 0 0; max-width:150mm}
.partnerliste{font-size:11pt; line-height:1.55}
.partnerliste div{display:flex; gap:calc(var(--u)*1.5); padding:var(--u) 0; break-inside:avoid}
.partnerliste .marke{color:var(--kwc-rule)}
/* Das Kaestchen steht rechts aussen und oben, nicht mittig: die
   Partnerzeilen sind bis zu drei Zeilen lang. Im Beispiel stand das
   als style-Attribut im Markup, hier als Regel. */
.partnerliste .haken{margin-left:auto; align-self:flex-start}
.quellen{font-size:10pt; line-height:1.55}
.quellen div{display:flex; gap:calc(var(--u)*1.5); padding:calc(var(--u)/2) 0}
.quellen .nr{flex:0 0 6mm; font-family:var(--kwc-mono); color:var(--kwc-forest)}
.quellenhinweis{font-size:10pt; line-height:1.55; color:var(--kwc-ink-70); margin:calc(var(--u)*1.5) 0 0; max-width:150mm}
.herkunft{font-size:10.5pt; line-height:1.55; color:var(--kwc-ink-70); margin:0 0 calc(var(--u)*2); max-width:150mm}
.fussrahmen{width:100%; border-collapse:collapse}
.fussrahmen td{padding:0; vertical-align:top}
.fuss{border-top:1px solid var(--kwc-line); padding-top:calc(var(--u)*1.5); margin-top:calc(var(--u)*4); font-size:9.5pt; line-height:1.5; color:var(--kwc-ink-55)}
.dankeseite{padding:56px 20px 0}
.hero{margin-bottom:64px}
.hero h1{font-size:36px}
.hero .sub{font-size:16px}
.knopf{font-size:16px; padding:16px 28px; width:100%}
.hinweis p,.mailblock p{font-size:16px}
.mailblock h2{font-size:28px}
.mailblock{margin-bottom:64px}

/* ---------- 3 · DESKTOP ---------- */
@media screen and (min-width:760px){
  /* Gespraechsleitfaden, breite Vorschau. Die Werte stammen aus der
     Basis des abgenommenen Beispiels. */
.blattstapel{padding:0 24px 96px}
  .blatt{padding:20mm 25mm 22mm}
  .blatt.fix{min-height:297mm}
  .kopf h2{font-size:24pt}
  .namenszeile i{width:62mm}
  .kurz{grid-template-columns:1fr 1fr; gap:var(--u) calc(var(--u)*3)}
  .kurz span:first-child{flex:0 0 36mm}
  .punktleib{padding-left:10mm}

  body{font-size:18px}
  .wrap,.wrap-wide{padding:0 40px}
  section{padding:96px 0}
  h1{font-size:48px}
  h2{font-size:34px}
  h3{font-size:20px}
  .lead{font-size:19px}
  .score{font-size:96px}
  .closing{font-size:34px}
  .card,.tint,.gate,.rule-box,.doc{padding:32px}
  .ctazone{margin:64px 0}
  #page-danke .ctazone{margin:64px 0}
  #page-danke .alertbox{margin:64px 0}
  #page-danke .doc-section{padding-top:72px}
  .btn-block{display:inline-block; width:auto}
}

/* ---------- 4 · DRUCK, IMMER ZULETZT ----------
   A4 misst bei 96 dpi 794 px. Jeder ungeschützte Breakpoint würde
   hier mitgreifen. Deshalb steht dieser Block am Ende und alle
   Breakpoints oben tragen "screen and". */
@page{size:A4; margin:20mm 25mm 22mm}

@media print{
  #panel,.noprint{display:none !important}
  .skip{display:none !important}
  .bilanz-link{display:none !important}
  body{background:var(--kwc-white); padding:0; font-size:11pt; line-height:1.5}
  .page{display:none !important}
  .page.active{display:block !important}
  section{padding:0; border:none}
  .wrap{max-width:none; padding:0}
  .doc{border:none; border-radius:0; padding:0; margin:0}
  .doc-h1{font-size:24pt}
  .doc-eyebrow{font-size:10pt}
  .doc h4{font-size:13pt}
  .doc-frage{font-size:11pt}
  .doc-hint{font-size:10.5pt}
  .doc-grundlage,.doc-fuss{font-size:9.5pt}
  .doc-linie{height:8.46mm}
  .doc-punkt{break-inside:avoid; page-break-inside:avoid}
  .doc h4{break-after:avoid; page-break-after:avoid}
  /* Bogenstruktur, Spezifikation 7.1. Die drei wichtigsten Fragen
     stehen immer gemeinsam auf einem Blatt. */
  .bogen{break-after:page; page-break-after:always}
  .bogen-letzter{break-after:auto; page-break-after:auto}
  .bogen:has(> h4:first-child + .doc-punkt){break-inside:avoid}
  a{color:inherit; text-decoration:none}


  /* Gespraechsleitfaden. Unveraendert aus dem abgenommenen
     Beispiel, gegen leitfaden-druckprobe.pdf geprueft. */
body{background:var(--kwc-white)}
.blattstapel{padding:0}
  .blatt{width:auto;max-width:none;margin:0;padding:0;border:0;min-height:0;display:block}
  /* Fester Bogen: genau eine Druckseite. Satzspiegel 255 mm, davon
     252 mm Mindesthöhe, damit Rundung nicht auf eine Leerseite läuft.
     Die Fußzeile sitzt über Flexbox IN dieser Höhe, nicht darunter.
     Hier stand zusätzlich .blatt.umbruch .fussrahmen{height:252mm}
     als Rest aus dem Beispiel. .fussrahmen ist dort die Tabelle des
     Fragenbogens, dieses Dokument benutzt sie nicht. Entfernt. */
  .blatt.umbruch{break-after:page;page-break-after:always}
  .blatt.umbruch.fix{min-height:252mm}

  /* Was beim Drehen von Desktop-first auf Mobile-first in das
     min-width-Fenster gewandert ist, gilt auf Papier genauso: A4 ist
     breit. Ohne diese vier Zeilen druckte "Kurz zu mir" einspaltig,
     und die Fragen rutschten ueber sechs statt vier Seiten. Gefunden
     in der zweiten Druckprobe von Block 6. */
  .kurz{grid-template-columns:1fr 1fr; gap:var(--u) calc(var(--u)*3)}
  .kurz span:first-child{flex:0 0 36mm}
  .punktleib{padding-left:10mm}
  .kopf h2{font-size:24pt}
  .namenszeile i{width:62mm}
.punkt,.schritt,.rahmen,.partnerliste div{break-inside:avoid;page-break-inside:avoid}
  .abschnitt > h3{break-after:avoid;page-break-after:avoid}
  .fuss{margin-top:calc(var(--u)*3)}
}