/* ===================================================================
   klartext.css – gemeinsames Design „Klartext statt Fachchinesisch“
   Ruß → Klarheit, Messing, Big Shoulders Display + Atkinson Hyperlegible.
   Gilt für Startseite und Unterseiten. Startseiten-eigene Teile
   (Stufen, Schilder, Schornstein …) stehen inline in /index.html.
   Teil 1: Tokens, Schrift, Grundlagen, Kopfleiste, Knopf, Fuß, untere Leiste
   Teil 2: Unterseiten (alles unter .seite)
   =================================================================== */

/* Schriften lokal (keine Verbindung zu Google), SIL OFL 1.1, Lizenztexte in /schrift/ */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800 900;font-display:swap;src:url(/schrift/big-shoulders-display-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/atkinson-hyperlegible-400-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/schrift/atkinson-hyperlegible-700-latin.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url(/schrift/atkinson-hyperlegible-400-italic-latin.woff2) format("woff2")}
/* Ersatzschrift fuer die Kopfzeilen, solange Big Shoulders laedt: weniger Springen */
@font-face{font-family:"Kopf Fallback";src:local("Arial Narrow"),local("ArialNarrow"),local("Arial Narrow Bold");size-adjust:92%;ascent-override:100%;descent-override:22%}

:root{
  --russ:#14110E;
  --messing:#A8842C;
  --messing-hell:#C9A24A;
  --messing-dunkel:#7D6220;
  --messing-text:#654E18;   /* kleine Messing-Schrift auf Hell, Kontrast >= 4.5 */
  --sand:#D8CCB4;
  --papier:#FAF6EE;
  --gelb:#FFE45C;
  --kopf:"Big Shoulders Display","Kopf Fallback","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --text:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --leiste:56px;
}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--leiste) + 12px);-webkit-text-size-adjust:100%}
body{background:var(--russ);color:#F1EADC;font:400 1.0625rem/1.6 var(--text)}
html,body{overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--messing-hell);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph{background:var(--gelb);color:#1C1814;padding:0 .3em;font-weight:700;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 40px}}

/* ---------- Kopfleiste ---------- */
.leiste{position:sticky;top:0;z-index:100;height:var(--leiste);background:rgba(20,17,14,.94);
  border-bottom:1px solid rgba(168,132,44,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.leiste .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.marke{font:800 clamp(1.05rem,4.6vw,1.3rem)/1 var(--kopf);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:#F1EADC;white-space:nowrap}
.marke b{color:var(--messing-hell);font-weight:800}
/* rechte Seite der Leiste: Startseite .klarheit (mit Segmenten), Unterseiten .leiste-rechts */
.leiste-rechts{display:flex;align-items:center;gap:10px}
.leiste .knopf{display:none}
/* Heizprofi in der Leiste: auf dem Handy nur Symbol (44px Tippfläche), breit mit Text */
.anleitung{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;height:44px;padding:0 8px;flex:none;
  color:var(--messing-hell);text-decoration:none;border:1px solid rgba(201,162,74,.55);font:700 .8rem/1 var(--text);letter-spacing:.04em;white-space:nowrap}
.anleitung svg{width:20px;height:20px;flex:none}
.anleitung:hover{background:rgba(201,162,74,.12)}
.anleitung-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:379px){.leiste .wrap{gap:8px}}
@media (min-width:900px){.leiste .knopf{display:inline-flex;padding:10px 18px;font-size:.95rem}}
@media (min-width:1100px){.anleitung{padding:0 12px}.anleitung-text{position:static;width:auto;height:auto;overflow:visible;clip:auto}}
/* Unterseiten haben keine Segmente: dort steht „Heizprofi“ schon auf dem Handy als Wort */
@media (min-width:360px){.leiste-rechts .anleitung{padding:0 12px}.leiste-rechts .anleitung-text{position:static;width:auto;height:auto;overflow:visible;clip:auto}}

/* ---------- Knopf ---------- */
.knopf{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:14px 24px;border:0;cursor:pointer;text-decoration:none;
  font:700 1.05rem/1.1 var(--text);color:var(--russ);background:var(--messing-hell);
  box-shadow:inset 0 0 0 1px rgba(255,241,200,.35),0 2px 0 var(--messing-dunkel)}
.knopf::after{content:"";width:.55em;height:.55em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.knopf:hover{background:#D8B45E}
.knopf.dunkel{background:var(--russ);color:#F1EADC;box-shadow:0 2px 0 var(--messing)}
.knopf.dunkel:hover{background:#2B2520}

/* ---------- Fuß ---------- */
.fuss{background:var(--russ);color:#BDB2A2;padding:48px 0 40px;font-size:.95rem;border-top:3px solid var(--messing)}
.fuss .motto{font:900 clamp(2rem,10vw,3.6rem)/.9 var(--kopf);text-transform:uppercase;color:#F1EADC;margin-bottom:22px}
.fuss .motto span{color:var(--messing-hell)}
.fuss nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:16px}
.fuss nav a{color:#F1EADC;text-decoration:none;border-bottom:1px solid var(--messing);padding:12px 0}

/* ---------- Handy: Handlung unten, immer erreichbar (nur mit body.hat-unten) ---------- */
.unten{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(20,17,14,.96);border-top:1px solid rgba(168,132,44,.5);transition:transform .3s}
.unten .knopf{width:100%;justify-content:center}
.unten.weg{transform:translateY(110%)}
.hat-unten{padding-bottom:76px}
@media (min-width:900px){.unten{display:none}.hat-unten{padding-bottom:0}}

/* ---------- Ruhig, wenn gewünscht ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===================================================================
   Teil 2: Unterseiten
   Aufbau: <main class="seite"> mit einem dunklen Kopfstück
   (.abschnitt.seiten-held) und danach heller „Papier“-Bühne zum Lesen.
   =================================================================== */
.seite{--fg:#1C1814;--leise:#4F473F;--akzent:var(--messing-dunkel);--strich:rgba(101,78,24,.32);
  --quelle:#2F6A2A;--grenze:#9E2A17;--karte:#FFFDF8;
  --rand:max(16px,calc((100% - 1040px) / 2));
  background:var(--papier);color:var(--fg)}
@media (min-width:720px){.seite{--rand:max(40px,calc((100% - 1040px) / 2))}}
.seite :focus-visible{outline-color:#1C1814}
.seite a{text-decoration-color:var(--messing);text-decoration-thickness:2px;text-underline-offset:3px}
.seite b,.seite strong{font-weight:700}

/* Abschnitte: volle Breite, Inhalt auf 1040px */
.seite .abschnitt{padding:48px var(--rand)}
.seite .abschnitt + .abschnitt{border-top:1px solid var(--strich)}
@media (min-width:720px){.seite .abschnitt{padding-top:64px;padding-bottom:64px}}

/* Kopfstück: Ruß, Messing-Kante unten */
.seite .seiten-held{background:radial-gradient(120% 70% at 85% 0%,rgba(168,132,44,.10),transparent 60%),var(--russ);
  color:#F1EADC;border-bottom:3px solid var(--messing);padding-top:48px;padding-bottom:56px}
.seite .seiten-held + .abschnitt{border-top:0}
.seite .seiten-held :focus-visible{outline-color:var(--messing-hell)}
.seite .seiten-held a:not(.knopf){color:#F1EADC}
.dachzeile{font:700 .8rem/1.4 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--messing-text)}
.seiten-held .dachzeile{color:#BDB2A2}
.seite h1{font:900 clamp(2.5rem,11vw,5.6rem)/.9 var(--kopf);text-transform:uppercase;letter-spacing:-.01em;margin:18px 0 20px;
  hyphens:manual;overflow-wrap:break-word}
.seite .held{display:grid;gap:24px;align-items:end}
@media (min-width:860px){.seite .held{grid-template-columns:minmax(0,1fr) auto}}
.seite .held .knopf{justify-self:start}
.seite .lead{font-size:clamp(1.1rem,4.4vw,1.3rem);line-height:1.5;max-width:40ch}
.seiten-held .lead{color:#E4DBCB}
.seite .abschnitt:not(.seiten-held) .lead{color:var(--leise)}
.seite .stand{font:700 .8rem/1.4 var(--text);letter-spacing:.08em;text-transform:uppercase;color:#BDB2A2;margin-top:-6px}
.seite .klein{font-size:.92rem;color:var(--leise)}

/* Fließtext: lange Texte, ruhig und gut lesbar */
.fliesstext{max-width:68ch}
.fliesstext > * + *{margin-top:1em}
.seite h2,.fliesstext h2{font:800 clamp(1.5rem,5.4vw,2rem)/1.05 var(--kopf);text-transform:uppercase;letter-spacing:.01em;margin-top:2em;color:var(--fg)}
.fliesstext > h2:first-child{margin-top:0}
.fliesstext h2 + *{margin-top:.6em}
.fliesstext p,.fliesstext li{font-size:1.0625rem;line-height:1.65}
.fliesstext ul,.fliesstext ol.abs{padding-left:1.4em}
.fliesstext li + li{margin-top:.45em}
.fliesstext li::marker{color:var(--messing-dunkel);font-weight:700}

/* Schritte: nummerierte Messing-Kästchen wie auf der Startseite */
.seite ol.schritte{list-style:none;counter-reset:s;padding:0;margin-top:1.2em}
.seite ol.schritte li{counter-increment:s;position:relative;padding:0 0 22px 54px;margin:0}
.seite ol.schritte li::before{content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;display:grid;place-items:center;
  font:900 1.35rem/1 var(--kopf);color:var(--russ);background:var(--messing-hell)}
.seite ol.schritte li::after{content:"";position:absolute;left:17px;top:38px;bottom:6px;width:2px;background:var(--strich)}
.seite ol.schritte li:last-child{padding-bottom:4px}
.seite ol.schritte li:last-child::after{display:none}

/* Kästen und Hinweise */
.seite .hinweis{border-left:4px solid var(--messing);background:rgba(168,132,44,.09);padding:14px 18px}
.seite .kasten{background:var(--karte);border:1px solid var(--strich);border-top:3px solid var(--messing);padding:18px 20px}
.seite .kasten > * + *{margin-top:.8em}
.seite .kasten ul{padding-left:1.4em}
.seite .muster{background:var(--karte);border:1px dashed rgba(101,78,24,.55);border-left:4px solid var(--messing);padding:18px 20px;font-size:1rem;line-height:1.8}
.seite .quelle{background:#F2ECE1;padding:16px 20px;font-size:.95rem;border-top:1px solid var(--strich)}
.seite .quelle b{display:block;font:700 .74rem/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--messing-text);margin-bottom:6px}
.seite .abschluss{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-top:2em}
.seite .abschluss .klein{margin:0}
.seite .preisblock{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;border-top:2px solid var(--fg);border-bottom:1px solid var(--strich);padding:20px 0}
.seite .preisblock .zahl{font:900 clamp(3rem,14vw,4.2rem)/.9 var(--kopf);color:var(--fg);white-space:nowrap}
.seite .preisblock .zahl small{font:700 .8rem/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--leise)}
.seite .preisblock p{flex:1;min-width:220px;margin:0;color:var(--leise)}

/* Raster: nummerierte Karten */
.seite .raster{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));padding:0 var(--rand) 56px}
.seite .feld{display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--strich);border-top:4px solid var(--messing);padding:18px 20px 16px}
.seite .feld-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;font:900 1.7rem/1 var(--kopf);color:var(--akzent)}
.seite .etikett{font:700 .72rem/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--messing-text);border:1px solid var(--strich);padding:4px 8px}
.seite .feld h3{font:800 1.55rem/1.02 var(--kopf);text-transform:uppercase;letter-spacing:.01em;margin:12px 0 8px;hyphens:manual}
.seite .feld p{color:var(--leise);flex:1;font-size:1rem}
.seite .feld p + p{margin-top:.8em}
.seite .pfeil{display:inline-block;align-self:flex-start;margin-top:14px;padding:10px 0;font-weight:700;color:var(--fg)}
.seite .pfeil::after{content:" →";color:var(--akzent)}
.seite .grenze{margin-top:14px;padding-top:10px;border-top:1px solid var(--strich);font-size:.92rem;color:var(--leise)}
.seite .grenze b{color:var(--fg)}
.seite .feld .grenze{margin-top:auto;flex:none}
.seite .feld p:not(.grenze) + .grenze{margin-top:14px}

/* Leitsatz-Band (B2B) */
.seite .slogan-band{background:#0B0907;color:#F1EADC;border-top:3px solid var(--messing)}
.seite .slogan-band .dachzeile{color:#BDB2A2}
.seite .slogan-band + .abschnitt{border-top:0}
.seite .slogan{font:900 clamp(2.3rem,10vw,5rem)/.9 var(--kopf);text-transform:uppercase;margin-top:14px}
.seite .slogan b{color:var(--messing-hell);font-weight:900}

/* Befund (B2B) */
.seite .befund-kicker{font:700 .78rem/1.2 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--messing-text)}
.seite .befund-h1{font:900 clamp(2.2rem,9vw,3.8rem)/.9 var(--kopf);text-transform:uppercase}
.seite .befund-sub{margin:0 0 22px;max-width:52ch;color:var(--leise)}
.seite .zwei{display:grid;gap:18px}
@media (min-width:760px){.seite .zwei{grid-template-columns:repeat(2,minmax(0,1fr))}}
.seite .befund-panel{background:var(--karte);border:1px solid var(--strich);padding:16px}
.seite .befund-label{display:inline-block;font:700 .74rem/1.2 var(--text);letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border:1.5px solid currentColor;margin-bottom:12px}
.seite .befund-label.bad{color:var(--grenze)}
.seite .befund-label.ok{color:var(--quelle)}
.seite .befund-plate{border:1px solid var(--strich);margin-bottom:14px}
.seite .befund-plate svg{width:100%;height:auto}
.seite .befund-findings{list-style:none;display:grid;gap:10px}
.seite .befund-findings li{position:relative;padding-left:30px;font-size:1rem;line-height:1.5}
.seite .befund-findings .mark{position:absolute;left:0;top:1px;width:20px;height:20px;display:grid;place-items:center;font-weight:700;font-size:.8rem;border:1.5px solid currentColor}
.seite .vorher .mark{color:var(--grenze)}
.seite .nachher .mark{color:var(--quelle)}
.seite .befund-grenze{display:flex;gap:16px;align-items:center;background:var(--karte);border:1px solid var(--strich);border-left:6px solid var(--messing);padding:16px 18px;margin-top:22px}
.seite .befund-grenze svg{flex:none;width:58px;height:58px}
.seite .befund-grenze p{margin:0}
.seite .befund-payoff{font:900 clamp(2rem,8vw,3.4rem)/.92 var(--kopf);text-transform:uppercase;margin-top:28px}
.seite .befund-payoff b{color:var(--messing-dunkel);font-weight:900}
.seite .video{border:1px solid var(--strich);background:var(--russ)}
.seite .video video{display:block;width:100%;height:auto}
.seite .vor-raster{padding-bottom:24px}