/* nestwärme Handbuch – Online-Version
   Ein digitales Editorial: eine ruhige Lesespalte, links eine stille Navigation.
   Keine Cards, keine Dashboard-Optik. */

:root {
  --fs-body: 1.125rem;  --lh-body: 1.65;
  --fs-lead: 1.375rem;  --lh-lead: 1.5;
  --fs-small: 0.75rem;
  --fs-h1: clamp(2rem, 4.5vw, 2.75rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.2rem;
  --fs-part: clamp(2.6rem, 7vw, 4.5rem);
  --fs-imagine: 1.3rem; --lh-imagine: 1.5;
  --fs-key: 1.7rem;     --lh-key: 1.3;
  --fs-key-inline: 1.35rem;
  --fs-answer: 1.05rem; --lh-answer: 1.6;
  --idw-word: 2.6rem;
  --idw-glyph: 3rem;
  --bullet: 0.6em; --bullet-indent: 1.6em;
  --sb-w: 9.5rem; --sb-h: 3.6rem;
  --note-line: 2.2rem;

  --sp-p: 1.1em;
  --sp-h2: 2.6rem;
  --sp-h2-after: 0.9rem;
  --sp-kicker: 0.9rem;
  --sp-block: 3rem;
  --sp-block-tight: 2.2rem;

  --marker-col: 3.2rem;
  --mk-w: 7px;
  --mk-dot: 12px;
  --mk-gap: 4px;
  --mk-h: 60px;

  --measure: 40rem;
  --nav-w: 18rem;
}

html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { background: var(--ground); }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: var(--c-p1); padding: 0.5rem 1rem; z-index: 50; }

/* ---------------------------------------------------------------- Hero */
.hero { background: var(--c-p1); color: var(--ink); }
.hero-inner {
  max-width: calc(var(--nav-w) + var(--measure) + var(--marker-col) + 6rem);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) 1.5rem clamp(3rem, 8vw, 5rem);
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
/* Titel und Grafik sind SVG-Dateien (assets/titel.svg, assets/titel-grafik.svg) – Schrift als Pfade, keine Fallback-Glyphen */
.hero-mark { position: relative; display: flex; align-items: stretch; }
.hero-mark img { display: block; height: 100%; width: auto; max-height: 26rem; }
.hero-text { max-width: 44rem; }
.hero-title { margin: 0; }
.hero-title img { display: block; width: 100%; max-width: 34rem; height: auto; }
.hero-links { margin-top: 1rem; font-size: var(--fs-small); }
.hero-links a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--c-p4); }
.hero-sub { margin-top: 2rem; font-size: 1.25rem; line-height: 1.45; max-width: 30rem; }
.hero-focus { margin-top: 1.25rem; font-size: 1rem; line-height: 1.45; max-width: 30rem; }
.hero-focus::after { content: ''; }
.hero-meta { margin-top: 3rem; font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }

/* ---------------------------------------------------------------- Layout */
.layout {
  max-width: calc(var(--nav-w) + var(--measure) + var(--marker-col) + 6rem);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  gap: 3rem;
}
.book { padding: 3rem 0 6rem calc(var(--marker-col)); max-width: calc(var(--measure) + var(--marker-col)); }

/* ---------------------------------------------------------------- Navigation */
.toc--screen {
  position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto;
  padding: 2.5rem 1rem 2rem 0;
  font-size: 0.9rem; line-height: 1.4;
  scrollbar-width: thin;
}
.toc-head { font-weight: 700; margin-bottom: 1.5rem; }
.toc-head a { text-decoration: none; }
.toc--screen .toc-part { margin-top: 1.4rem; margin-bottom: 0.4rem; }
.toc--screen .toc-part a { text-decoration: none; }
.toc--screen .toc-item a { padding: 0.22rem 0.4rem 0.22rem 0; border-radius: 3px; color: var(--ink-soft); }
.toc--screen .toc-item a:hover { color: var(--ink); }
.toc--screen .toc-item.is-active a { color: var(--ink); font-weight: 700; }
.toc--screen .toc-item.is-active .toc-num { color: var(--ink); }
.toc--screen .toc-item--sub a { padding-left: 0; font-size: 0.85rem; }
.toc-foot { margin-top: 2rem; font-size: var(--fs-small); color: var(--ink-soft); }
.nav-toggle { display: none; }

/* ---------------------------------------------------------------- Kapitel */
.chapter { padding-top: 2rem; }
.chapter + .chapter { margin-top: 6rem; }
.chapter-head { margin-bottom: 2.5rem; }
.chapter-head .marker { top: 0.15rem; }
.section--part .chapter:first-of-type { padding-top: 0; }

/* ---------------------------------------------------------------- Teilauftakt (Screen) */
.part-opener { margin: 5rem 0 0 calc(-1 * var(--marker-col)); border-radius: 4px; }
.part-opener-inner { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4.5rem) calc(var(--marker-col) + 1.5rem); }
.part-mark { left: 1.2rem; top: clamp(2.5rem, 6vw, 4.5rem); height: calc(var(--mk-h) * 1.5); width: var(--marker-col); }
.part-label { margin-bottom: 1rem; }
.part-subtitle { margin-top: 1.5rem; max-width: 26rem; }
.part-intro { margin-top: 2rem; max-width: 30rem; }
.part-intro p { font-size: 1.05rem; line-height: 1.55; font-weight: 400; }

/* ---------------------------------------------------------------- Stell dir vor … (Screen: Unterbrechung im Lesefluss) */
.imagine { padding: 1.2rem 0 1.2rem 0; }
.imagine .marker { top: 1.2rem; }

/* ---------------------------------------------------------------- Kernbotschaft */
.key-message { padding: 0.6rem 0; }
.key-message .marker { top: 0.5rem; }

/* ---------------------------------------------------------------- Einwand */
.objection { padding: 0.4rem 0; }
.objection .marker { top: 0.5rem; }
.objection-q { font-size: 1.3rem; }
.answer { padding-left: 0; }

/* ---------------------------------------------------------------- Vertiefung */
.deep-dive { padding: 2.5rem 0 0; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- Drei Ebenen */
.levels-list { gap: 2rem; }

/* ---------------------------------------------------------------- FAQ */
.faq summary { cursor: pointer; list-style: none; position: relative; padding-right: 2rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.25rem; top: 0.55em; width: 10px; height: 10px;
  border-radius: 50%; background: var(--c-p4); transition: transform 0.2s;
}
.faq[open] summary::after { transform: scale(0.55); background: var(--c-p2); }
.faq summary:hover { color: var(--c-p8); }
.faq--open .faq-q { color: var(--ink-soft); font-weight: 400; }

/* ---------------------------------------------------------------- Notizen (Screen: visuelle Entsprechung) */
.notes { padding: 1.5rem 0 0; }
.notes-lines { max-height: 9rem; opacity: 0.9; }
.notes::after { content: 'Im gedruckten Arbeitsbuch ist hier Platz zum Schreiben.'; display: block; margin-top: 0.75rem; font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------------------------------------------------------------- Golden Circle / ICH-DU-WIR */
.golden-circle, .idw { padding: 2rem 0; }
.gc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2.5rem; align-items: start; }
.gc-rings { max-width: 20rem; margin: 0 auto; }
.gc-rings-stack { max-width: 20rem; margin: 0 auto; }
.gc-ring, .gc-word { transition: stroke 0.5s ease, fill 0.5s ease, stroke-width 0.5s ease, font-size 0.3s ease; }
.subbrands { padding: 2rem 0 0; }

.marks-reduced .imagine .marker { top: 1.2rem; bottom: 1.2rem; }

/* Notizfüller (Print) online nur als kleiner Hinweis */
.notes--fill { padding-top: 0; }
.notes--fill .notes-lines { max-height: 4.5rem; }
.notes--fill .notes-title { font-size: 1rem; color: var(--ink-soft); font-weight: 400; }
.list--compact { columns: 2; column-gap: 2rem; }
.list--compact li { break-inside: avoid; }

/* ---------------------------------------------------------------- Kolophon */
.colophon { margin-top: 6rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- Responsiv */
@media (max-width: 64rem) {
  :root { --nav-w: 0px; --marker-col: 2.4rem; }
  .layout { display: block; }
  .book { padding-top: 2rem; }
  .nav-toggle {
    display: block; position: sticky; top: 0; z-index: 30;
    width: calc(100% + 3rem); margin: 0 -1.5rem;
    background: var(--ground); border: 0; border-bottom: 1px solid var(--rule);
    padding: 0.8rem 1.5rem; text-align: left; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer;
  }
  .nav-toggle::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c-p4); margin-right: 0.6rem; vertical-align: 0.05em; }
  .toc--screen {
    display: none; position: fixed; inset: 3.2rem 0 0 0; z-index: 25;
    background: var(--ground); padding: 1.5rem; max-height: none; overflow-y: auto;
  }
  body.nav-open .toc--screen { display: block; }
  body.nav-open { overflow: hidden; }
  .hero-inner { grid-template-columns: 2.6rem 1fr; gap: 1rem; }
  .levels-list, .gc-layout, .idw-steps { grid-template-columns: 1fr; }
  .subbrands-grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .idw-step::after { display: none; }
  .list--topics { columns: 1; }
  .part-opener { margin-left: calc(-1 * var(--marker-col)); }
}
@media (max-width: 40rem) {
  :root { --fs-body: 1.05rem; --fs-key: 1.4rem; --fs-imagine: 1.15rem; --marker-col: 2rem; --mk-w: 5px; --mk-dot: 9px; --mk-gap: 3px; --mk-h: 44px; }
  .layout, .hero-inner { padding-left: 1rem; padding-right: 1rem; }
  .nav-toggle { width: calc(100% + 2rem); margin: 0 -1rem; padding-left: 1rem; }
  .part-opener-inner { padding-left: calc(var(--marker-col) + 1rem); }
}

@media print {
  /* Der Druck geht über print.html – falls jemand die Online-Version druckt, wenigstens die Navigation weg. */
  .toc--screen, .nav-toggle, .hero-mark { display: none; }
  .layout { display: block; }
}