/* nestwärme Handbuch – gemeinsame Komponenten (Screen + Print)
   Typografische Größen werden über Custom Properties gesetzt, die screen.css
   und print.css jeweils belegen: --fs-body, --lh-body, --fs-h1 … */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Trennungen sparsam: Wort ab 10 Zeichen, mindestens 4 Zeichen vor und nach dem Strich (Safari: WebKit-Eigenschaften) */
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-lines: 2;
}
p, ul, ol, dl, h1, h2, h3, blockquote, figure { margin: 0; }
a { color: inherit; text-decoration-color: var(--c-p2); text-underline-offset: 0.15em; }
strong { font-weight: 700; }
em { font-style: italic; }

/* ---------------------------------------------------------------- Rhythmus */
.chapter-body > * + * { margin-top: var(--sp-p); }
.chapter-body > h2 { margin-top: var(--sp-h2); }
.chapter-body > h2 + * { margin-top: var(--sp-h2-after); }
.chapter-body > .imagine,
.chapter-body > .key-message,
.chapter-body > .objection,
.chapter-body > .deep-dive,
.chapter-body > .levels,
.chapter-body > .notes,
.chapter-body > .golden-circle,
.chapter-body > .idw,
.chapter-body > .faq-category { margin-top: var(--sp-block); }
.chapter-body > .imagine + *,
.chapter-body > .key-message + *,
.chapter-body > .objection + *,
.chapter-body > .deep-dive + *,
.chapter-body > .levels + *,
.chapter-body > .notes + *,
.chapter-body > .idw + * { margin-top: var(--sp-block); }
.chapter-body > .objection + .objection { margin-top: var(--sp-block-tight); }

/* ---------------------------------------------------------------- Text */
.kicker {
  font-size: var(--fs-small);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  hyphens: none;
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }
.p-strong { font-weight: 700; }
.list { list-style: none; padding-left: var(--bullet-indent, 1.5em); }
.list li { position: relative; }
.list li::before { content: ''; position: absolute; left: calc(-1 * var(--bullet-indent, 1.5em)); top: calc(0.5em * var(--lh-body, 1.5) - var(--bullet, 0.55em) / 2); width: var(--bullet, 0.55em); height: var(--bullet, 0.55em); border-radius: 50%; background: var(--c-p1); }
.list li + li { margin-top: 0.4em; }
.signature { margin-top: var(--sp-block); font-style: italic; }
.signature::first-line { font-family: var(--font-display); font-style: normal; font-size: 1.6em; }

/* ---------------------------------------------------------------- Kapitelkopf */
.chapter-head { position: relative; }
.chapter-head .kicker { margin-bottom: var(--sp-kicker); }
.chapter-head h1 {
  font-size: var(--fs-h1);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
  hyphens: manual;
  text-wrap: pretty;
}
.chapter-num { display: none; }
h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: 700; hyphens: manual; text-wrap: balance; }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; hyphens: manual; }

/* ---------------------------------------------------------------- Marker: die vier Zeichen
   Feste Größe (--mk-h), am Kopf des Bausteins – ein Hinweis auf die Art des Inhalts, kein Balken,
   der mit dem Text mitwächst. Geometrie über --mk-w (Balken), --mk-dot (Kreis), --mk-gap, --mk-h.
   Ein Marker ist ein absolut positionierter Kasten links vom Textblock, oben bündig mit dem Kicker. */
.marker { position: absolute; left: calc(-1 * var(--marker-col)); top: 0; width: var(--marker-col); height: var(--mk-h); display: block; pointer-events: none; }
.marker i { position: absolute; display: block; background: var(--marker); border-radius: 999px; }

/* verstehen: ein Balken + Punkt darunter (Kapitelkopf) */
.marker--line i:first-child { left: 0; top: 0; width: var(--mk-w); height: 100%; }
.marker--line i:last-child { left: calc((var(--mk-w) - var(--mk-dot)) / 2); top: calc(100% + var(--mk-gap) * 1.4); width: var(--mk-dot); height: var(--mk-dot); background: var(--marker-dot); }

/* vorstellen: Balken + Halbkreis rechts daneben („Stell dir vor …") */
.marker--imagine i:first-child { left: 0; top: 0; width: var(--mk-w); height: 100%; }
.marker--imagine i:last-child {
  left: calc(var(--mk-w) + var(--mk-gap)); top: 50%;
  width: calc(var(--mk-dot) * 0.75); height: calc(var(--mk-dot) * 1.6);
  transform: translateY(-50%);
  background: var(--marker-dot); border-radius: 0 999px 999px 0;
}

/* weitertragen: Balken, in der Mitte durch einen Punkt unterbrochen (Kernbotschaft) */
.marker--key i:nth-child(1) { left: 0; top: 0; width: var(--mk-w); height: calc(50% - var(--mk-dot) / 2 - var(--mk-gap)); }
.marker--key i:nth-child(2) { left: calc((var(--mk-w) - var(--mk-dot)) / 2); top: calc(50% - var(--mk-dot) / 2); width: var(--mk-dot); height: var(--mk-dot); background: var(--marker-dot); }
.marker--key i:nth-child(3) { left: 0; bottom: 0; width: var(--mk-w); height: calc(50% - var(--mk-dot) / 2 - var(--mk-gap)); }

/* austauschen: zwei Balken, dazwischen ein Punkt (Einwand / Frage & Antwort) */
.marker--dialog i:nth-child(1) { left: 0; top: 0; width: var(--mk-w); height: 100%; }
.marker--dialog i:nth-child(2) { left: calc(var(--mk-w) + var(--mk-gap)); top: 50%; width: var(--mk-dot); height: var(--mk-dot); transform: translateY(-50%); background: var(--marker-dot); }
.marker--dialog i:nth-child(3) { left: calc(var(--mk-w) + var(--mk-gap) * 2 + var(--mk-dot)); top: 25%; width: var(--mk-w); height: 50%; }

/* ---------------------------------------------------------------- Stell dir vor … */
.imagine { position: relative; }
.imagine .kicker--imagine { margin-bottom: var(--sp-kicker); }
.imagine-body p { font-style: italic; font-size: var(--fs-imagine); line-height: var(--lh-imagine); font-weight: 300; }
.imagine-body p + p { margin-top: 0.7em; }
.imagine-body strong { font-weight: 700; }

/* ---------------------------------------------------------------- Kernbotschaft */
.key-message { position: relative; }
.key-message p { font-size: var(--fs-key); line-height: var(--lh-key); font-weight: 700; hyphens: manual; text-wrap: balance; }
.key-message--inline p { font-size: var(--fs-key-inline); }
.key-label { display: block; font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4em; }

/* ---------------------------------------------------------------- Zitat */
.quote p { font-size: var(--fs-key); line-height: var(--lh-key); font-weight: 300; font-style: italic; }
.quote footer { margin-top: 0.6em; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------------------------------------------------------------- Einwand */
.objection { position: relative; }
.objection-q { font-size: var(--fs-h3); line-height: 1.3; font-weight: 700; hyphens: manual; }
.answer { margin-top: var(--sp-p); }
.answer-label { display: block; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.3em; }
.answer--inviting .answer-label { color: var(--c-p2); }
.answer--direct .answer-label { color: var(--accent); }
.answer p { font-size: var(--fs-answer); line-height: var(--lh-answer); }

/* ---------------------------------------------------------------- Vertiefungsbaustein */
.deep-dive { position: relative; }
.deep-dive .kicker { margin-bottom: var(--sp-kicker); }
.deep-dive h2 { margin-bottom: var(--sp-h2-after); }
.deep-dive-intro { margin-bottom: var(--sp-p); }
.list--topics { columns: 2; column-gap: 2em; padding-left: 1.2em; }
.list--topics li { break-inside: avoid; }
.deep-dive .key-message--inline { margin-top: var(--sp-block); }

/* ---------------------------------------------------------------- Drei Ebenen */
.levels-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto auto; gap: 0 var(--sp-block); }
.level { position: relative; display: grid; grid-row: span 3; grid-template-rows: subgrid; padding-top: 0.5em; border-top: var(--mk-w) solid var(--c-p1); }
.level--2 { border-top-color: var(--c-p3); }
.level--3 { border-top-color: var(--c-p6); }
.level-num { display: block; font-size: var(--fs-h1); font-weight: 700; line-height: 1; color: var(--ink); margin-bottom: 0.25em; }
.level h3 { font-size: var(--fs-h3); margin-bottom: 0.6em; align-self: start; }
.level-terms { list-style: none; padding: 0; }
.level-terms li { padding: 0.2em 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-answer); }
.levels-outro { margin-top: var(--sp-block); }

/* ---------------------------------------------------------------- FAQ */
.faq-category > h2 { margin-bottom: var(--sp-h2-after); }
.faq-list > * + * { margin-top: var(--sp-p); }
.faq { border-top: 1px solid var(--rule); padding-top: var(--sp-p); }
.faq-q { font-weight: 700; font-size: var(--fs-body); line-height: var(--lh-body); hyphens: manual; }
.faq-a { margin-top: 0.5em; }
.faq-a p + p { margin-top: 0.6em; }
.faq-a p { font-size: var(--fs-answer); line-height: var(--lh-answer); }
.faq-pending { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 0.25em; }

/* ---------------------------------------------------------------- Notizen */
.notes { position: relative; }
.notes .kicker { margin-bottom: var(--sp-kicker); }
.notes-title { font-size: var(--fs-h2); margin-bottom: var(--sp-p); }
.notes-lines i { display: block; height: var(--note-line); border-bottom: var(--rule-w, 1px) solid var(--rule); }

/* ---------------------------------------------------------------- Golden Circle
   Drei Stufen: data-step 1 = nur Kern (why), 2 = + how, 3 = + what. Flache CI-Farben, kein Schatten. */
.gc-intro { margin-bottom: var(--sp-block); font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }
.gc-rings { width: 100%; height: auto; display: block; overflow: visible; }
.gc-ring--why { fill: var(--c-p4); }
.gc-ring--how { stroke: var(--c-s5); stroke-width: 0.8; }
.gc-ring--what { stroke: var(--c-s5); stroke-width: 0.8; }
.gc-rings[data-step="2"] .gc-ring--how, .gc-rings[data-step="3"] .gc-ring--how { stroke: var(--c-p2); stroke-width: 30; }
.gc-rings[data-step="3"] .gc-ring--what { stroke: var(--c-p1); stroke-width: 30; }
.gc-word { font-family: var(--font-display); font-size: 17px; fill: var(--c-s6); }
.gc-word--why { fill: #fff; }
.gc-rings[data-step="2"] .gc-word--how, .gc-rings[data-step="3"] .gc-word--how { fill: var(--ink); }
.gc-rings[data-step="3"] .gc-word--what { fill: var(--ink); }
.gc-rings[data-step="1"] .gc-word--why, .gc-rings[data-step="2"] .gc-word--how, .gc-rings[data-step="3"] .gc-word--what { font-size: 20px; }
.gc-label { font-family: var(--font-display); font-size: var(--fs-part); line-height: 1; color: var(--c-p4); margin-bottom: 0.35em; }
.gc-step--how .gc-label { color: var(--c-p2); }
.gc-step--what .gc-label { color: var(--c-p2); }
.gc-text p + p { margin-top: var(--sp-p); }
.gc-text p { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }
.gc-text strong { font-weight: 700; }
/* Variante „gold“: nur Gelb und Ocker. Nicht erreichte Ringe als feine Kontur, Wörter in Ocker; erreichte Ringe gefüllt, Wörter in Schwarz. */
.gc-rings--gold .gd { fill: none; stroke: var(--c-p2); stroke-width: 0.7; }
.gc-rings--gold .gp { fill: none; }
.gc-rings--gold .gd-why { fill: var(--c-p2); stroke: none; }
.gc-rings--gold[data-step="2"] .gd-how, .gc-rings--gold[data-step="3"] .gd-how { fill: var(--c-p1); stroke: none; }
.gc-rings--gold[data-step="2"] .gp-how, .gc-rings--gold[data-step="3"] .gp-how { fill: var(--paper, var(--ground, #fff)); }
.gc-rings--gold[data-step="3"] .gd-what { fill: var(--c-p1); stroke: none; }
.gc-rings--gold[data-step="3"] .gp-what { fill: var(--paper, var(--ground, #fff)); }
.gc-rings--gold .gc-word { fill: var(--c-p2); font-size: 18px; }
.gc-rings--gold .gc-word--why { fill: var(--ink); font-size: 22px; }
.gc-rings--gold[data-step="2"] .gc-word--how, .gc-rings--gold[data-step="3"] .gc-word--how { fill: var(--ink); font-size: 22px; }
.gc-rings--gold[data-step="3"] .gc-word--what { fill: var(--ink); font-size: 22px; }
.gc-rings--gold .gc-word--how, .gc-rings--gold .gc-word--what { cursor: pointer; }
/* Variante „bleed“: Kreis über den Rand (nur Print) */
.gc-bleed-svg .gb-what, .gc-bleed-svg .gb-how { fill: var(--c-p1); }
.gc-bleed-svg .gb-gap { fill: var(--paper, #fff); }
.gc-bleed-svg .gb-why { fill: var(--c-p2); }
.gc-bleed-svg .gb-word { font-family: var(--font-display); font-size: 13px; fill: var(--ink); }
.gc-bleed-svg .gb-word--why { font-size: 17px; }
/* Variante „corner“: gelbe Doppelseite, Kreis oben links (Farben wie in der Skizze: Kern Orange, how Gelb, what Ocker) */
.gc-corner .gk-base, .gc-corner .gk-gap { fill: var(--paper, #fff); }
.gc-corner .gk-what { fill: var(--c-p2); }
.gc-corner .gk-how { fill: var(--c-p1); }
.gc-corner .gk-why { fill: var(--c-p3); }
.gc-corner .gk-word { font-family: var(--font-display); font-size: 12px; fill: var(--paper, #fff); }
.gc-corner .gk-word--why { font-size: 14px; }
/* Variante „spread“: Doppelseite */
.gc-entry + .gc-entry { margin-top: var(--sp-block); }
.gc-entry .gc-label { font-size: var(--fs-h2); color: var(--c-p2); }
.gc-entry p + p { margin-top: var(--sp-p); }
.gc-step--why .gc-rings--gold + .gc-text .gc-label { color: var(--c-p2); }
/* Eigene Grafiken (drei Dateien): Screen zeigt nur die aktive Stufe */
.gc-rings-stack { position: relative; }
.golden-circle--screen .gc-rings--own { display: none; }
.golden-circle--screen[data-step="1"] .gc-rings--own[data-step="1"],
.golden-circle--screen[data-step="2"] .gc-rings--own[data-step="2"],
.golden-circle--screen[data-step="3"] .gc-rings--own[data-step="3"] { display: block; }
/* Screen: Reiter – die Texte liegen übereinander, damit die Grafik nicht springt */
.gc-panes { display: grid; }
.gc-pane { grid-area: 1 / 1; }
.gc-pane[hidden] { display: block; visibility: hidden; }
/* Screen: Reiter */
.gc-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.gc-tab { font: inherit; font-family: var(--font-display); font-size: 1.4rem; padding: 0.2em 0.6em; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.gc-tab[aria-selected="true"] { background: var(--c-p1); color: var(--ink); }
.gc-pane p + p { margin-top: 0.8em; }

/* ---------------------------------------------------------------- Angebote je Marke (Subbrands) */
.subbrands > .kicker { margin-bottom: var(--sp-kicker); }
.subbrands > h2 { margin-bottom: var(--sp-h2-after); }
/* Zwei Spalten, spaltenweise gefüllt: Marke 1 und 4, 2 und 5, 3 und 6 stehen jeweils auf gleicher Höhe. */
.subbrands-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--sb-rows, 3), auto); grid-auto-flow: column; column-gap: var(--sp-block); row-gap: var(--sp-block); margin-top: var(--sp-block); align-items: start; }
.subbrand { break-inside: avoid; }
/* Die Subbrand-SVGs bringen ihren gelben Kasten selbst mit (gleiches Format 276.8 × 113.7); nur die Breite wird gesetzt. */
.subbrand-mark { width: var(--sb-w, 9rem); }
.subbrand-mark img { display: block; width: 100%; height: auto; }
.subbrand-items { list-style: none; padding: 0; margin-top: 0.6em; }
.subbrand-items li { padding: 0.28em 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-answer); line-height: 1.35; font-weight: 700; hyphens: manual; }

/* ---------------------------------------------------------------- ICH – DU – WIR */
.idw-intro { font-weight: 700; margin-bottom: var(--sp-block); }
/* Drei Spalten: Zeichen und Wort zentriert über dem Text; zwischen den Spalten je ein abgerundeter gelber Balken. */
.idw-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--idw-gap, var(--sp-block)); }
.idw-step { position: relative; }
.idw-step { --idw-pad: calc(var(--idw-glyph) * 0.5); }
.idw-step:not(:last-child)::after { content: ''; position: absolute; top: calc(var(--idw-glyph) * 0.5 - var(--mk-w) / 2); left: calc(50% + var(--idw-glyph) * var(--gw, 40) / 80 + var(--idw-pad)); width: calc(100% + var(--idw-gap, var(--sp-block)) - var(--idw-glyph) * (var(--gw, 40) + var(--gw-next, 40)) / 80 - 2 * var(--idw-pad)); height: var(--mk-w); background: var(--c-p1); border-radius: 999px; }
.idw-glyph { display: block; height: var(--idw-glyph); width: auto; margin: 0 auto 0.5em; overflow: visible; }
.idw-step p { text-align: center; hyphens: manual; }
.idw-glyph .g-acc { fill: var(--c-p4); } .idw-glyph .g-sun { fill: var(--c-p1); }
.idw-word { display: block; text-align: center; font-size: var(--idw-word); line-height: 1; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 0.4em; }
.idw-step:nth-child(2) .idw-word { color: var(--c-p4); }
.idw-step:nth-child(3) .idw-word { color: var(--c-p6); }
.idw-outro { margin-top: var(--sp-block); }
.idw-outro p { font-weight: 700; }
.idw-outro p + p { margin-top: 0.5em; }

/* ---------------------------------------------------------------- Illustration (Platzhalter) */
.illustration-placeholder { border: 1px dashed var(--c-s6); color: var(--ink-soft); font-size: var(--fs-small); padding: 1.5em; text-align: center; }
.illustration figcaption { font-size: var(--fs-small); color: var(--ink-soft); margin-top: 0.4em; }

/* ---------------------------------------------------------------- Teilauftakt */
.part-opener { background: var(--c-p1); color: var(--ink); position: relative; overflow: hidden; }
.part-opener-inner { position: relative; }
.part-label { font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.part-title { font-size: var(--fs-part); line-height: 1.02; font-weight: 700; letter-spacing: -0.015em; hyphens: manual; text-wrap: balance; }
.part-subtitle { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }
.part-mark { position: absolute; display: block; }
.part-mark i { position: absolute; display: block; border-radius: 999px; background: var(--paper); }
.part-mark i:first-child { left: 0; top: 0; width: var(--mk-w); height: 100%; }
.part-mark i:last-child { left: calc((var(--mk-w) - var(--mk-dot)) / 2); top: calc(100% + var(--mk-gap) * 1.6); width: var(--mk-dot); height: var(--mk-dot); background: var(--c-p4); }
.part-intro p { font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; }
.part-intro p + p { margin-top: var(--sp-p); }

/* ---------------------------------------------------------------- Inhalt */
.toc-chapters { list-style: none; padding: 0; }
.toc-part { font-weight: 700; }
.toc-part-label { color: var(--accent); }
.toc-part a { display: block; }
.toc-part-label, .toc-part-title { display: block; }
.toc-num--empty::before { content: '\200B'; }  /* leere Nummer: Grundlinie wie Text, nicht Boxunterkante */
.toc-item a { display: flex; gap: 0.6em; text-decoration: none; }
.toc-num { flex: 0 0 1.6em; text-align: right; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.toc-item--sub .toc-title { color: var(--ink-soft); }

/* ---------------------------------------------------------------- Legende */
.legend { display: grid; gap: var(--sp-block); }
.legend-item { display: grid; grid-template-columns: var(--marker-col) 1fr; gap: var(--sp-p); align-items: stretch; }
.legend-item dt { position: relative; min-height: calc(var(--mk-h) + var(--mk-dot) + var(--mk-gap) * 2); }
.legend-item dt .marker { left: 0; }
.legend-item dd { margin: 0; }
.legend-note { margin-top: var(--sp-block); font-weight: 300; font-size: var(--fs-lead); line-height: var(--lh-lead); }

/* ---------------------------------------------------------------- Kolophon */
.colophon { font-size: var(--fs-small); color: var(--ink-soft); }
.colophon p + p { margin-top: 0.5em; }
.url { color: var(--accent); font-weight: 700; }

/* ---------------------------------------------------------------- Zeichen-Modus „reduziert“
   Nur „Stell dir vor …“ (die warme Linie am Rand, wie im Text versprochen) und die Kernbotschaft
   tragen ein Zeichen; Kapitelköpfe und Einwände sind typografisch eindeutig genug. */
.marks-reduced .chapter-head .marker, .marks-reduced .objection .marker { display: none; }
.marks-reduced .imagine .marker { height: auto; bottom: var(--mk-top-imagine, 0); }
.marks-reduced .imagine .marker i:last-child { display: none; }
.marks-reduced .key-message .marker { display: none; }