@charset "utf-8";
/* ============================================================
   GREEN SOLUTION - Stylesheet
   Struktur und Bausprache uebernommen von pse-austria.at
   (Quellstand build-website_Stand-2026-08-18.py), Farbwelt
   Green-Solution nach der Skill green-solution-design.
   Proportionen nach dem Goldenen Schnitt: 61,8 / 38,2,
   Abstaende Fibonacci 8 13 21 34 55 89 144.
   Stand: 19.08.2026
   ============================================================ */

/* Geist, variabel 100-900, SIL Open Font License. Liegt auf unserem Server -
   es wird nichts von fremden Servern nachgeladen. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('schrift/geist.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('schrift/geist-erweitert.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* Farbwelt GREEN SOLUTION. Struktur und Bausprache wie pse-austria.at,
     Farben nach der Skill green-solution-design. Alle Paare AA-geprueft. */
  --c-blue:#1F4D35; --c-blue-dk:#10281C; --c-blue-lt:#437039;
  --c-red:#9A6334; --c-red-dk:#7A4E28; --c-red-lt:#B87C46;
  --c-teal:#437039; --c-teal-lt:#7CAA5F; --c-teal-txt:#2F5A2A;
  --c-green-dk:#0D3A1E; --c-green:#437039; --c-green-lt:#A7C957;
  --c-grey:#4F4C4D;
  --grad-arc:linear-gradient(100deg,#10281C 0%,#1F4D35 23.6%,#437039 61.8%,#A7C957 100%);
  --ink:#10281C; --ink-2:#16331F; --ink-3:#1F4D35;
  --paper:#F7F5F0; --paper-2:#E8E4DB;
  --text:#10281C; --text-soft:#5A6560;
  --text-invert:#FDFDFB; --text-invert-soft:#B9C9BC;
  --line:rgba(16,40,28,.14); --line-invert:rgba(255,255,255,.16);
  --t-micro:13px; --t-small:15px; --t-body:17px; --t-lead:21px;
  --t-h3:27.5px; --t-h2:44.5px; --t-h1:72px;
  --s-1:8px; --s-2:13px; --s-3:21px; --s-4:34px; --s-5:55px; --s-6:89px; --s-7:144px;
  --shell:1180px; --major:61.8%; --minor:38.2%; --radius:13px; --measure:72ch;
  /* Goldener Schnitt als Spaltenpaar. minmax(0,..) verhindert, dass
     ein breiter Inhalt die Spalte aufblaeht; fr statt Prozent sorgt
     dafuer, dass der Spaltenabstand vom Raum abgezogen wird und das
     Raster nicht ueber den Container hinauslaeuft. */
  --phi:minmax(0,61.8fr) minmax(0,38.2fr);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* Sicherheitsnetz: nichts darf die Seite seitlich aufziehen. clip statt hidden,
   damit die klebende Kopfzeile weiter funktioniert. */
/* Kein overflow auf html oder body.
   overflow-x:clip macht das Element zum Scroll-Container. Zwei Folgen, die
   beide lange unbemerkt blieben: position:sticky wirkt fuer keinen
   Nachfahren mehr — die Kopfzeile war deklariert sticky und scrollte
   trotzdem weg — und window.scrollY bleibt 0, weshalb jedes Skript, das
   den Scrollstand abfragt, ins Leere lief.
   Horizontale Ueberlaeufe werden stattdessen dort abgefangen, wo sie
   entstehen: auf den Sektionen. Die tragen nie ein sticky-Kind. */
html,body{max-width:100%}
.section,.footer,.topbar{overflow-x:clip}

/* Lange Komposita brechen auf schmalen Schirmen sonst ueber den Rand.
   Trennung nach den Regeln der deutschen Rechtschreibung. */
p,li,h1,h2,h3,h4,dd,dt,figcaption,td,th,.lead,.benefit span,.dl p{
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4;
  overflow-wrap:break-word}
h1,h2,h3{text-wrap:balance}
body{font-family:"Geist","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--t-body);
  line-height:1.618;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased}
/* height:auto ist Pflicht, seit width/height als Attribut im Markup stehen:
   ohne die Regel skaliert nur die Breite, die Hoehe bliebe der Pixelwert
   aus der Datei — alle Bilder waeren verzerrt. Die Attribute dienen nur
   dazu, dem Browser das Seitenverhaeltnis vorab mitzuteilen. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--s-4)}
/* Eine Fibonacci-Stufe schmaler als zuvor: 89 statt 144, 55 statt 89. */
.section{padding:var(--s-5) 0}
.section--tight{padding:var(--s-4) 0}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.022em;font-weight:700;text-wrap:balance}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3);font-weight:700}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--text-soft);font-weight:400}
.lead--w{max-width:100%}
h1 + .lead,h2 + .lead,h3 + .lead,.lead + .lead{margin-top:var(--s-3)}
p + p{margin-top:var(--s-3)}
.eyebrow{font-size:var(--t-small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);color:var(--c-teal-txt)}
.eyebrow::before{content:"";width:34px;height:2px;flex:none;background:var(--grad-arc)}
.eyebrow--invert{color:var(--c-teal-lt)}
.grad-text{background:var(--grad-arc);-webkit-background-clip:text;background-clip:text;color:transparent}
.at-mark{display:inline-block;width:21px;height:13px;border-radius:2px;vertical-align:-2px;margin-right:7px;
  box-shadow:0 0 0 1px rgba(0,0,0,.10);
  background:linear-gradient(var(--c-red) 0 33.34%,#fff 33.34% 66.67%,var(--c-red) 66.67% 100%)}

.btn{display:inline-flex;align-items:center;gap:var(--s-2);padding:var(--s-2) calc(var(--s-2)*2.618);
  border-radius:8px;font-weight:700;font-size:var(--t-body);letter-spacing:-.01em;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--c-green);color:#fff;box-shadow:0 8px 21px rgba(67,112,57,.32)}
.btn--primary:hover{background:var(--c-green-dk);box-shadow:0 13px 34px rgba(67,112,57,.40)}
.btn--arc{background:var(--grad-arc);color:#fff;box-shadow:0 8px 21px rgba(31,77,53,.30)}
.btn--ghost{border-color:var(--line);color:var(--text)}
.btn--ghost:hover{background:rgba(16,40,28,.05)}
.btn--ghost-invert{border-color:var(--line-invert);color:var(--text-invert)}
.btn--ghost-invert:hover{background:rgba(255,255,255,.10)}
.btn--sm{padding:9px calc(9px*2.618);font-size:var(--t-small);letter-spacing:.02em}
.arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(4px)}
.ctas{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-4)}

.topbar{background:var(--ink);color:var(--text-invert-soft);font-size:var(--t-small)}

.topbar a{color:var(--text-invert)}
.topbar-links{display:flex;gap:var(--s-3)}
.header{position:sticky;top:0;z-index:70;background:rgba(247,245,240,.90);backdrop-filter:blur(13px);
  border-bottom:1px solid var(--line)}
.header .shell{display:flex;align-items:center;gap:var(--s-4);padding-top:var(--s-2);padding-bottom:var(--s-2);position:relative}
.logo{display:flex;align-items:center;gap:14px;flex:none}
.logo-img{height:46px;width:auto;display:block}
.claim{font-size:14px;font-weight:600;color:var(--text-soft);line-height:1.45;
  border-left:1px solid var(--line);padding-left:14px}
.claim b{display:block;color:var(--text);font-weight:700}
.header .shell{max-width:1400px}
.nav{display:flex;gap:var(--s-3);margin-left:auto;align-items:center;font-size:var(--t-small);font-weight:600;min-width:0}
.nav .btn{white-space:nowrap;flex:0 0 auto;padding:11px 18px}
@media(max-width:1560px){.nav{gap:var(--s-2);font-size:14px}}
@media(max-width:1400px){.nav{gap:11px;font-size:13.5px}
  .nav .btn--sm{padding:8px 15px}}
.nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.18s;white-space:nowrap}
.nav a:hover,.nav a.on{border-bottom-color:var(--c-red)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:16px;cursor:pointer}
/* Ab hier passt die volle Navigation nicht mehr in eine Zeile.
   Die Links wandern ins Burger-Menue, der Erstberatungs-Knopf bleibt sichtbar. */
@media(max-width:1299px){
  .nav{display:flex;margin-left:auto;order:2;gap:0}
  .nav > a:not(.btn){display:none}
  .burger{display:block;order:3;margin-left:13px}
  .nav.open{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:var(--s-2);background:var(--paper);
    padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);
    box-shadow:0 21px 34px rgba(16,40,28,.13);font-size:var(--t-body);z-index:60;margin-left:0}
  .nav.open > a{display:block;width:100%}
  .nav.open .btn--sm{margin-top:var(--s-2);justify-content:center}
}
@media(max-width:620px){
  .nav .btn--sm{padding:8px 13px;font-size:13px}
  .burger{margin-left:9px;padding:7px 10px}
}

/* ---- Bildbühne: Foto + Duotone + Korn ---------------------- */
.stage{position:relative;background:var(--ink);color:var(--text-invert);overflow:hidden}
.ph{position:absolute;inset:0;background-size:var(--zoom,cover);
  background-position:var(--pos,center);
  background-repeat:no-repeat;background-color:#14301F;
  background-image:var(--img,none),
    radial-gradient(120% 90% at 78% 8%, rgba(255,255,255,.20), transparent 58%),
    radial-gradient(90% 70% at 12% 100%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(160deg,#1C4429 0%,#143120 46%,#0C2117 100%)}
.ph::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;opacity:.20}
.ph::before{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.30'/></svg>");
  opacity:.12;z-index:2;pointer-events:none}
.ph-blue::after{background:linear-gradient(115deg,#14351F 0%,#10281C 61.8%,#1F4D35 100%)}
.ph-green::after{background:linear-gradient(115deg,#0D3A1E 0%,#2C5A2E 61.8%,#437039 100%)}
.ph-teal::after{background:linear-gradient(115deg,#10281C 0%,#2C5A2E 61.8%,#437039 100%)}
.ph-red::after{background:linear-gradient(115deg,#2A1A0C 0%,#6B4423 61.8%,#9A6334 100%)}
/* Motivfuehrung je Seite: Ohne Zoom sitzt die Familie im Photovoltaik-Motiv ganz
   rechts und verschwindet hinter dem Kennzahlenfeld. Mit leichtem Zoom und
   rechtsbuendigem Ausschnitt rueckt sie in die Bildmitte. */
.ph--pv{--zoom:125%;--pos:100% 36%}
@media(max-width:860px){.ph--pv{--zoom:cover;--pos:100% 30%}}
/* Schleier: links dunkel genug fuer weisse Schrift, rechts gibt er das Bild frei.
   Haltepunkte nach dem Goldenen Schnitt bei 38,2 % und 61,8 %. */
.veil{position:absolute;inset:0;z-index:3;
  background:linear-gradient(90deg,rgba(10,26,18,.80) 0%,rgba(10,26,18,.62) 38.2%,
             rgba(10,26,18,.22) 61.8%,rgba(10,26,18,0) 100%)}
.stage .shell{position:relative;z-index:4}

/* Slider */
.slides{position:relative;height:min(86vh,760px);min-height:620px}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility .9s;
  display:flex;align-items:center;padding-bottom:112px}
.slide.is-on{opacity:1;visibility:visible}
.slide-in{max-width:78%;position:relative;z-index:4}
.slide-tag{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-small);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:34px;margin-bottom:var(--s-3);
  border:1px solid var(--line-invert);background:rgba(255,255,255,.10);color:#fff}
.slide-tag i{width:9px;height:9px;border-radius:50%;background:var(--c-red-lt);display:block}
.slide-tag.t-blue i{background:var(--c-blue-lt)}
.slide-tag.t-green i{background:var(--c-green-lt)}
.slide-tag.t-teal i{background:var(--c-teal-lt)}
.slide h1,.slide h2{font-size:clamp(34px,4.4vw,64px);letter-spacing:-.035em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.slide p{font-size:var(--t-lead);line-height:1.5;color:rgba(253,253,251,.88);margin-top:var(--s-3);max-width:84%}
.slider-ui{position:absolute;left:0;right:0;bottom:0;z-index:6;border-top:1px solid var(--line-invert);
  background:rgba(10,26,18,.55);backdrop-filter:blur(8px)}
.slider-ui .shell{display:flex;padding:0}
.dot{flex:1;text-align:left;background:none;border:0;border-right:1px solid var(--line-invert);
  padding:var(--s-3);cursor:pointer;position:relative;color:var(--text-invert-soft);
  font:600 var(--t-small)/1.4 "Geist","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;transition:color .2s,background .2s}
.dot:last-child{border-right:0}
.dot:hover{background:rgba(255,255,255,.07);color:#fff}
.dot b{display:block;font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;opacity:.65;
  margin-bottom:4px;font-weight:700}
.dot.is-on{color:#fff}
.dot .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--grad-arc)}
.dot.is-on .bar{width:100%;transition:width 7s linear}
.nav-arrows{position:absolute;right:var(--s-4);top:38.2%;z-index:7;display:flex;gap:var(--s-1)}
.nav-arrows button{width:44px;height:44px;border-radius:50%;cursor:pointer;border:1px solid var(--line-invert);
  background:rgba(255,255,255,.12);color:#fff;font-size:18px;transition:.18s}
.nav-arrows button:hover{background:rgba(255,255,255,.24)}

/* Seitenkopf der Unterseiten — Hoehe und Lage stehen weiter unten,
   in einem einzigen Regelsatz. */
.phead .shell{display:grid;grid-template-columns:var(--phi);gap:var(--s-5);align-items:center}
.phead h1{font-size:clamp(34px,4.2vw,60px);color:#fff;letter-spacing:-.035em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.phead p{color:rgba(253,253,251,.88);font-size:var(--t-lead);margin-top:var(--s-3)}
.crumb{font-size:var(--t-small);color:var(--text-invert-soft);margin-bottom:var(--s-3)}
.crumb a:hover{color:#fff}
.kopf-link{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-weight:700;
  color:#fff;border-bottom:2px solid var(--c-teal-lt);padding-bottom:2px}
.kopf-link:hover{border-bottom-color:#fff}
.kopf-link .arrow{transition:transform .18s ease}
.kopf-link:hover .arrow{transform:translateX(4px)}
.phead-box{border:1px solid var(--line-invert);border-radius:var(--radius);
  background:linear-gradient(157deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.10) 38.2%,rgba(255,255,255,.05) 100%);
  backdrop-filter:blur(6px);
  padding:var(--s-4);backdrop-filter:blur(8px)}
.phead-box b{display:block;font-size:var(--t-h3);letter-spacing:-.03em;color:#fff}
.phead-box span{font-size:var(--t-small);color:rgba(253,253,251,.85);display:block;margin-top:4px}
.phead-box hr{border:0;border-top:1px solid rgba(255,255,255,.24);margin:var(--s-3) 0}

.trust{background:var(--grad-arc);color:rgba(255,255,255,.88);position:relative;overflow:hidden}
.trust::after{content:"";position:absolute;right:-3%;top:-89%;width:34%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);pointer-events:none}
.trust .shell{position:relative;z-index:2}
.trust .shell{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);padding-top:var(--s-3);
  padding-bottom:var(--s-3);font-size:var(--t-small);text-align:center}
.trust b{color:#fff;display:block;font-size:var(--t-body);font-weight:800}
.trust span+span{border-left:1px solid rgba(255,255,255,.20)}

.split{display:grid;grid-template-columns:var(--phi);gap:var(--s-5);align-items:stretch}
.split-media{display:flex}
.split-media .figure{width:100%;aspect-ratio:auto;min-height:520px}
.split-text{align-self:center}
.split--rev{grid-template-columns:var(--minor) var(--major)}
.split--rev .split-text{order:2} .split--rev .split-media{order:1}
.figure{border-radius:var(--radius);overflow:hidden;position:relative;aspect-ratio:1/1.618;
  background-size:cover;background-position:center;background-color:#14331F;
  background-image:var(--img,none),
    radial-gradient(110% 80% at 70% 10%, rgba(255,255,255,.20), transparent 60%),
    linear-gradient(160deg,#23532F 0%,#163524 61.8%,#0D2318 100%);
  border:1px solid var(--line);display:flex;align-items:flex-end}
.figure--wide{aspect-ratio:1.618/1}
/* Portraet: Der Ausschnitt darf den Kopf nicht anschneiden. Das Bild sitzt oben
   buendig, dadurch liegen die Augen auf rund 38 % der Rahmenhoehe - der obere
   Punkt des Goldenen Schnitts, auf den das Auge zuerst faellt. */
.figure--portraet{background-position:50% 0%}
.figure .cap{position:relative;z-index:3;font-size:var(--t-small);color:#fff;padding:var(--s-3);
  background:linear-gradient(transparent,rgba(10,26,18,.85));width:100%;line-height:1.5;
  text-wrap:balance}
.figure .cap b{display:block;margin-bottom:3px;font-weight:700}
.figure .cap i{font-style:normal;color:rgba(255,255,255,.82)}
/* Das Foto bleibt unangetastet. Der Farbverlauf liegt nur im unteren Drittel,
   genau dort, wo die Bildunterschrift steht - Hoehe 38,2 % nach dem Goldenen Schnitt. */
.figure .duo{position:absolute;left:0;right:0;bottom:0;height:38.2%;mix-blend-mode:multiply;opacity:.30;
  -webkit-mask-image:linear-gradient(transparent,#000 61.8%);mask-image:linear-gradient(transparent,#000 61.8%)}
.duo-blue{background:linear-gradient(150deg,#14351F,#10281C 61.8%,#1F4D35)}
.duo-green{background:linear-gradient(150deg,#0D3A1E,#2C5A2E 61.8%,#437039)}
.duo-teal{background:linear-gradient(150deg,#10281C,#2C5A2E 61.8%,#437039)}

.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.benefits--2{grid-template-columns:repeat(2,1fr)}
.benefit{padding:var(--s-3);border-radius:9px;border:1px solid var(--line);
  background:linear-gradient(157deg,#fff 0%,var(--paper-2) 100%);
  box-shadow:0 1px 2px rgba(16,40,28,.03);transition:transform .2s,box-shadow .2s}
.benefit:hover{transform:translateY(-2px);box-shadow:0 13px 34px rgba(16,40,28,.07)}
.benefit b{display:block;margin-bottom:5px}
.benefit span{font-size:var(--t-body);color:var(--text-soft);line-height:1.618;display:block}

.card{border-radius:var(--radius);padding:var(--s-4);border:1px solid var(--line);
  background:linear-gradient(157deg,#fff 0%,#fff 38.2%,#F2EFE8 100%);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(16,40,28,.04),0 8px 21px rgba(16,40,28,.05);
  transition:transform .25s,box-shadow .25s}
/* Farbiger Schimmer aus der oberen rechten Ecke - nimmt die Kantenfarbe der Karte auf */
.card::after{content:"";position:absolute;right:-13%;top:-21%;width:55%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(67,112,57,.16),transparent 61.8%);pointer-events:none}
.card--blue::after{background:radial-gradient(circle,rgba(31,77,53,.18),transparent 61.8%)}
.card--green::after{background:radial-gradient(circle,rgba(67,112,57,.16),transparent 61.8%)}
.card--red::after{background:radial-gradient(circle,rgba(154,99,52,.13),transparent 61.8%)}
.card:hover{transform:translateY(-5px);box-shadow:0 34px 89px rgba(16,40,28,.13)}
.card--lg{padding:var(--s-5)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c-teal)}
.card--blue::before{background:var(--c-blue)}
.card--green::before{background:var(--c-green)}
.card--red::before{background:var(--c-red)}
.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--text-soft)}
.card ul{list-style:none;margin:var(--s-3) 0;display:grid;gap:9px}
.card li{position:relative;padding-left:26px;font-size:var(--t-small);color:var(--text-soft);line-height:1.55}
.card li::before{content:"";position:absolute;left:0;top:8px;width:13px;height:2px;border-radius:2px;background:var(--c-teal)}
.card--blue li::before{background:var(--c-blue)}
.card--green li::before{background:var(--c-green)}
.card .btn{margin-top:auto;align-self:flex-start}
.tag{display:inline-block;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;margin-bottom:var(--s-2);background:rgba(67,112,57,.14);color:#2F5A2A}
.tag--blue{background:rgba(31,77,53,.14);color:#10281C}
.tag--green{background:rgba(67,112,57,.15);color:#35602F}
.tag--red{background:rgba(154,99,52,.13);color:#7A4E28}
.fields{display:grid;grid-template-columns:var(--phi);gap:var(--s-3);margin-top:var(--s-5)}
.fields-side{display:grid;gap:var(--s-3)}

/* Ohne Symbolspalte - der farbige Rand links kennzeichnet den Kasten,
   der ganze Platz gehoert dem Text. Auf dem Telefon zaehlt jede Zeile. */
.note{padding:var(--s-3) var(--s-4);border-radius:9px;border-left:5px solid var(--c-teal);
  background:rgba(67,112,57,.08);margin-top:var(--s-4)}
/* Nur die Kopfzeile des Kastens steht als eigener Block. Hervorhebungen
   im Fliesstext bleiben inline, sonst zerreisst der Satz. */
.note>div>b:first-child{display:block;margin-bottom:4px}
.note p b,.note li b{display:inline}
.note p{font-size:var(--t-small);color:var(--text-soft);line-height:1.55}
.note--green{border-left-color:var(--c-green);background:rgba(67,112,57,.10)}
.note--red{border-left-color:var(--c-red);background:rgba(154,99,52,.09)}
.note--blue{border-left-color:var(--c-blue);background:rgba(31,77,53,.09)}

.dark{background:var(--ink);color:var(--text-invert)}
.dark h2,.dark h3{color:var(--text-invert)}
.dark .lead{color:var(--text-invert-soft)}
.dark .benefit{border-color:var(--line-invert);
  background:linear-gradient(157deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 38.2%,rgba(255,255,255,0) 100%),var(--ink-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.dark .benefit:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 21px 55px rgba(0,0,0,.28)}
.dark .benefit span{color:var(--text-invert-soft)}
.dark .card{border-color:var(--line-invert);color:var(--text-invert);
  background:linear-gradient(157deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 38.2%,rgba(255,255,255,0) 100%),var(--ink-3)}
.dark .card::after{background:radial-gradient(circle,rgba(67,112,57,.22),transparent 61.8%)}
.dark .card p,.dark .card li{color:var(--text-invert-soft)}
.dark .note{background:rgba(255,255,255,.06)}
.dark .note p{color:var(--text-invert-soft)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-5)}
.step{padding:var(--s-4);border-radius:var(--radius);background:var(--ink-3);border:1px solid var(--line-invert);
  position:relative;overflow:hidden}
.step::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--grad-arc);opacity:.75}
.step-no{font-size:var(--t-h3);font-weight:800;letter-spacing:-.04em;display:block;margin-bottom:var(--s-1);
  background:var(--grad-arc);-webkit-background-clip:text;background-clip:text;color:transparent}
.step b{display:block;margin-bottom:6px}
.step p{font-size:var(--t-small);color:var(--text-invert-soft);line-height:1.55}

.band{background:var(--grad-arc);color:#fff;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;right:-5%;top:-40%;width:44%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 68%)}
.band .shell{position:relative;display:grid;grid-template-columns:var(--phi);gap:var(--s-5);
  align-items:center;padding-top:var(--s-5);padding-bottom:var(--s-5)}
.band h2{color:#fff}
.band p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.band p{color:rgba(255,255,255,.92);margin-top:var(--s-2);font-size:var(--t-lead)}
.band-box{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.30);border-radius:var(--radius);
  padding:var(--s-4);backdrop-filter:blur(8px)}
.band-box b{font-size:var(--t-h3);display:block;letter-spacing:-.03em}
.band-box span{font-size:var(--t-small);color:rgba(255,255,255,.90);display:block;margin-top:4px}
.band-box hr{border:0;border-top:1px solid rgba(255,255,255,.28);margin:var(--s-3) 0}

.faq{max-width:100%;margin-top:var(--s-4)}
details{border-bottom:1px solid var(--line);padding:var(--s-3) 0}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-3);align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--c-red);font-size:var(--t-h3);font-weight:400;line-height:1}
details[open] summary::after{content:"\2013"}
details p{margin-top:var(--s-2);color:var(--text-soft);font-size:var(--t-small);line-height:1.65}
/* Die Antwort blendet sanft auf, statt zu springen. */
details[open] p{animation:faqauf .32s cubic-bezier(.22,1,.36,1)}
@keyframes faqauf{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
summary::after{transition:transform .25s ease}
details[open] summary::after{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){details[open] p{animation:none}}

.next{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3);margin-top:var(--s-4)}
.next a{display:block;padding:var(--s-4);border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(157deg,#fff 0%,#fff 38.2%,#F2EFE8 100%);
  box-shadow:0 1px 2px rgba(16,40,28,.04),0 8px 21px rgba(16,40,28,.05);
  transition:.25s;position:relative;overflow:hidden}
.next a::after{content:"";position:absolute;right:-13%;top:-21%;width:55%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(67,112,57,.14),transparent 61.8%);pointer-events:none}
.next a:hover{transform:translateY(-5px);box-shadow:0 34px 89px rgba(16,40,28,.13)}
.next a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad-arc)}
.next b{display:block;font-size:var(--t-h3);letter-spacing:-.02em;margin-bottom:6px}
.next span{font-size:var(--t-small);color:var(--text-soft);line-height:1.55;display:block}
.next em{font-style:normal;color:var(--c-red);font-weight:700;font-size:var(--t-small);display:block;margin-top:var(--s-2)}

.contact{display:grid;grid-template-columns:var(--minor) var(--major);gap:var(--s-5)}
.field{display:grid;gap:6px;margin-bottom:var(--s-2)}
.field label{font-size:var(--t-small);font-weight:700}
.field input,.field select,.field textarea{background:linear-gradient(#fff,#FBF9F5);font-family:inherit;font-size:var(--t-body);padding:11px 13px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--c-blue);outline-offset:1px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
/* Eingabefelder haben eine eigene Mindestbreite. In einem Raster sprengt die
   auf schmalen Bildschirmen die Spalte - dagegen min-width:0 und max-width. */
.field input,.field select,.field textarea{max-width:100%;min-width:0;box-sizing:border-box}
.contact>*,.field-row>*,.field{min-width:0}
.field--rechnen .rechenzeile input{max-width:110px}
.form-note{font-size:var(--t-micro);color:var(--text-soft);margin-top:var(--s-2);line-height:1.6}
.contact-info{display:grid;gap:var(--s-3);align-content:start}
.contact-info b{display:block;font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-teal-txt);margin-bottom:5px}
.contact-info p{color:var(--text-soft);font-size:var(--t-small);line-height:1.6}

.footer{background:var(--ink);color:var(--text-invert-soft);font-size:var(--t-small);padding:var(--s-6) 0 var(--s-4);
  border-top:5px solid transparent;border-image:var(--grad-arc) 1}
.footer-grid{display:grid;grid-template-columns:var(--minor) repeat(3,1fr);gap:var(--s-4)}
.footer h4{color:var(--text-invert);font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:var(--s-2);font-weight:700}
.footer ul{list-style:none;display:grid;gap:8px}
.footer a:hover{color:var(--text-invert)}
.footer .logo-img{height:58px;background:#fff;padding:9px 13px;border-radius:9px}
.footer .claim{border-left-color:var(--line-invert);color:var(--text-invert-soft)}
.footer .claim b{color:var(--text-invert)}
.footer-base{margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--line-invert);
  display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;font-size:var(--t-micro)}

/* Effizienz-Pfad */
.pfad{display:grid;grid-template-columns:var(--phi);gap:var(--s-3);margin-top:var(--s-4)}
.pfad-q{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-5);
  position:relative;overflow:hidden;
  background:radial-gradient(120% 61.8% at 100% 0%, rgba(31,77,53,.09), transparent 61.8%),
             radial-gradient(89% 55% at 0% 100%, rgba(67,112,57,.08), transparent 61.8%),
             linear-gradient(157deg,#fff 0%,#fff 38.2%,#F2EFE8 100%);
  box-shadow:0 1px 2px rgba(16,40,28,.04),0 13px 34px rgba(16,40,28,.06)}
/* Der Energiebogen als schmale Kante ueber der Frageflaeche */
.pfad-q::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(100deg,var(--c-blue-dk) 0%,var(--c-blue) 23.6%,var(--c-teal) 61.8%,var(--c-green) 100%)}
.q{margin-bottom:var(--s-4)} .q:last-child{margin-bottom:0}
.q label{display:block;font-size:var(--t-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:var(--s-2)}
.q label b{color:var(--c-red);letter-spacing:0;text-transform:none;font-size:var(--t-body);margin-left:6px}
.opts{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.opts button{font:600 var(--t-small)/1 "Geist","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;padding:11px 18px;border-radius:34px;
  border:1.5px solid var(--line);color:var(--text);cursor:pointer;transition:.18s;
  background:linear-gradient(#fff,#F2EFE8);box-shadow:0 1px 2px rgba(16,40,28,.05)}
.opts button:hover{border-color:var(--c-blue);color:var(--c-blue);transform:translateY(-1px);
  box-shadow:0 8px 21px rgba(16,40,28,.12)}
.opts button.on{background:linear-gradient(150deg,var(--c-blue),var(--c-blue-dk));
  border-color:var(--c-blue-dk);color:#fff;box-shadow:0 8px 21px rgba(16,40,28,.28)}
#fl{width:100%;accent-color:var(--c-blue);height:6px;margin-top:var(--s-1)}
.scale{display:flex;justify-content:space-between;font-size:var(--t-micro);color:var(--text-soft);margin-top:5px}
.pfad-r{background:var(--ink);color:var(--text-invert);border-radius:var(--radius);padding:var(--s-4);
  display:flex;flex-direction:column;position:sticky;top:96px;align-self:start}
.gauge{position:relative;margin-bottom:var(--s-2)}
#arc{transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
.gauge-val{position:absolute;left:0;right:0;bottom:2px;text-align:center}
.gauge-val b{display:block;font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.gauge-val span{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--text-invert-soft)}
.gauge-txt{font-size:var(--t-small);line-height:1.6;color:var(--text-invert-soft);text-align:center;min-height:63px}
.save{border-radius:9px;padding:var(--s-3);background:rgba(154,99,52,.16);border:1px solid rgba(184,124,70,.34);margin:var(--s-2) 0 var(--s-3)}
.save b{display:block;font-size:var(--t-h3);font-weight:800;letter-spacing:-.03em;color:#E2B48C}
.save span{font-size:var(--t-micro);line-height:1.55;color:var(--text-invert-soft);display:block;margin-top:5px}
/* Ergebnisfeld IR-Heizung - steht in der hellen linken Spalte */
.irbox{margin-top:var(--s-4);padding:var(--s-4);border-radius:9px;
  border:1px solid var(--line);border-left:5px solid var(--c-blue);
  background:linear-gradient(100deg,rgba(31,77,53,.10),rgba(31,77,53,.02) 61.8%)}
.irtag{display:inline-block;font-size:var(--t-micro);font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-blue-dk);margin-bottom:6px}
.irbox b{display:block;font-size:var(--t-h3);font-weight:800;color:var(--ink);line-height:1.05;
  letter-spacing:-.02em}
.irbox #irTxt{display:block;margin-top:6px;font-size:var(--t-small);
  color:var(--text-soft);line-height:1.618}
.irtd{display:block;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}
.irtd b{display:block;font-size:var(--t-lead);font-weight:800;color:var(--c-blue-dk);
  line-height:1.15;letter-spacing:-.01em}
.irtd #irTdTxt{display:block;margin-top:4px;font-size:var(--t-small);
  color:var(--text-soft);line-height:1.55}
.irwarn{display:block;margin-top:11px;padding:9px 13px;border-radius:7px;
  background:rgba(154,99,52,.08);border-left:3px solid var(--c-red);
  font-size:13px;line-height:1.5;color:var(--c-red-dk)}
.irfuss{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--c-grey)}
.rank-frei{margin-top:var(--s-3);font-size:var(--t-small);line-height:1.618;
  color:var(--text-invert-soft)}
.rank-h{font-size:var(--t-lead);font-weight:800;letter-spacing:-.01em;text-transform:none;
  color:#fff;margin-top:var(--s-5);margin-bottom:var(--s-3);
  padding-top:var(--s-3);border-top:1px solid var(--line-invert)}
.rank{list-style:none;display:grid;gap:var(--s-1);margin-bottom:var(--s-3)}
.rank li{display:grid;grid-template-columns:26px 1fr;gap:11px;padding:11px 13px;border-radius:8px;
  background:var(--ink-3);border:1px solid var(--line-invert);align-items:start}
.rank i{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-style:normal;
  font:800 12px "Geist","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:#fff}
.rank .r1{background:var(--c-red)} .rank .r2{background:var(--c-blue)} .rank .r3{background:var(--c-green)}
.rank b{display:block;font-size:var(--t-small)}
.rank small{font-size:var(--t-micro);color:var(--text-invert-soft);line-height:1.5;display:block;margin-top:3px}
.disclaim{font-size:var(--t-micro);color:var(--text-invert-soft);line-height:1.6;margin-top:var(--s-2)}
#takeover{justify-content:center;text-align:center}

@media(max-width:1000px){
  :root{--t-h1:46px;--t-h2:33px;--t-h3:23px}
  .slides{height:auto;min-height:0}
  .slide{position:relative;opacity:1;visibility:visible;display:none;padding:var(--s-5) 0}
  .slide.is-on{display:flex}
  .slide-in,.slide p{max-width:100%}
  .slider-ui{position:relative;background:rgba(10,26,18,.7)}
  .slider-ui .shell{flex-wrap:wrap}
  .dot{flex:1 1 50%;border-bottom:1px solid var(--line-invert)}
  .nav-arrows{display:none}
  .split,.split--rev,.fields,.band .shell,.contact,.pfad,.phead .shell{grid-template-columns:1fr}
  .split--rev .split-text,.split--rev .split-media{order:0}
  .pfad-r{position:static} .pfad-q{padding:var(--s-4)}
  .lead--w{max-width:100%}
  .benefits,.steps,.trust .shell,.next,.benefits--2{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .claim{display:none}
}
@media(max-width:620px){
  :root{--t-h1:33px;--t-h2:26px}
  .benefits,.steps,.trust .shell,.footer-grid,.field-row,.next,.benefits--2{grid-template-columns:1fr}
  .dot{flex:1 1 100%}
  .section{padding:var(--s-5) 0}
}

/* Sprungmarke fuer Tastatur und Screenreader */
/* Kredo: ein ruhiger Abschnitt, der ohne Bild auskommt.
   Lesespalte 61,8 % der Satzbreite, links der Energiebogen als schmale Kante. */
.kredo-band{background:var(--paper-2)}
.portraetspalte{display:flex;flex-direction:column;gap:var(--s-3);width:100%}
.portraetspalte .figure{min-height:420px}
.kredo--knapp{padding-left:var(--s-3);margin-top:0}
.kredo--knapp .kredo-satz{font-size:var(--t-h3);margin-bottom:var(--s-2)}
.kredo--knapp blockquote p:not(.kredo-satz){font-size:var(--t-body);max-width:none}
.kredo{margin:0 auto;max-width:calc(var(--shell)*.786);position:relative;
  padding-left:var(--s-4)}
.kredo::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:5px;
  border-radius:3px;
  background:linear-gradient(180deg,var(--c-blue-dk) 0%,var(--c-teal) 38.2%,var(--c-green) 100%)}
.kredo blockquote{margin:0}
.kredo-satz{font-size:var(--t-h1);font-weight:700;letter-spacing:-.022em;line-height:1.14;
  color:var(--ink);margin-bottom:var(--s-3);text-wrap:balance}
.kredo blockquote p+p{margin-top:var(--s-3)}
.kredo blockquote p:not(.kredo-satz){font-size:var(--t-lead);line-height:1.55;
  color:var(--text-soft);max-width:calc(var(--shell)*.618)}
.kredo figcaption{margin-top:var(--s-4);display:flex;align-items:baseline;gap:var(--s-2);
  flex-wrap:wrap}
.kredo figcaption b{font-size:var(--t-body);color:var(--ink)}
.kredo figcaption span{font-size:var(--t-small);color:var(--c-grey);
  letter-spacing:.08em;text-transform:uppercase;font-weight:700}
@media(max-width:860px){.kredo-satz{font-size:var(--t-h3)}}

/* Zurueck nach oben - erscheint erst, wenn man ein Stueck gescrollt hat.
   Durchmesser 55 px, Abstand 34 px - beides Fibonacci. */
.hoch{position:fixed;right:34px;bottom:34px;z-index:60;width:55px;height:55px;
  border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--c-blue),var(--c-blue-dk));color:#fff;
  box-shadow:0 8px 21px rgba(16,40,28,.28);
  opacity:0;visibility:hidden;transform:translateY(13px);
  transition:opacity .25s,transform .25s,visibility .25s,box-shadow .2s}
.hoch.da{opacity:1;visibility:visible;transform:none}
.hoch:hover{box-shadow:0 13px 34px rgba(16,40,28,.36);transform:translateY(-2px)}
.hoch svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){.hoch{right:21px;bottom:21px;width:47px;height:47px}}
@media print{.hoch{display:none}}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--c-red);color:#fff;
  padding:13px 21px;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

/* Rechtstexte: Lesespalte im Goldenen Schnitt, 61,8 % der Satzbreite */
.recht{max-width:100%;margin:0}
.recht h2{font-size:var(--t-h3);margin-top:var(--s-6)}
.recht h3{font-size:21px;margin-top:var(--s-5);margin-bottom:var(--s-2)}
.recht p,.recht li{line-height:1.618;margin-bottom:var(--s-3)}
.recht ul{padding-left:21px;list-style:disc}
.recht dl{margin:var(--s-3) 0}
.recht dt{font-weight:700;margin-top:var(--s-3)}
.recht dd{margin:0 0 var(--s-2) 0}
.recht .stand{color:var(--c-grey);font-size:15px;margin-top:var(--s-6)}

/* Helles Kopfbild: Motiv bleibt hell, Schrift wird dunkel */
.stage--hell{background:var(--paper);color:var(--ink)}
.ph--klar{position:absolute;inset:0;background-size:cover;background-position:center right;
  background-repeat:no-repeat;background-color:var(--paper);background-image:var(--img,none)}
.veil--hell{background:linear-gradient(90deg,rgba(247,245,240,.97) 0%,rgba(247,245,240,.90) 38.2%,
            rgba(247,245,240,.35) 61.8%,rgba(247,245,240,0) 100%)}
.stage--hell h1,.stage--hell p,.stage--hell .crumb,.stage--hell .crumb a{color:var(--ink)}
.stage--hell .crumb a{text-decoration:underline}
.stage--hell .phead-box{background:rgba(255,255,255,.72);border:1px solid var(--line);
  backdrop-filter:blur(6px);color:var(--ink)}
.stage--hell .phead-box b{color:var(--c-teal-txt)}
.stage--hell .phead-box span{color:var(--c-grey)}
.stage--hell .phead-box hr{border-color:var(--line)}

/* Zwei Karten nebeneinander: Text oben buendig, gleiche Anfangshoehe */
.fields{align-items:stretch}
.fields-side{align-content:stretch}

/* Markenfamilie: ein Block, drei Teile. Kopf 61,8 %, Zweige 38,2 % darunter. */
.marken{margin-top:var(--s-4);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;position:relative;
  background:linear-gradient(157deg,#fff 0%,#fff 38.2%,#F2EFE8 100%);
  box-shadow:0 1px 2px rgba(16,40,28,.04),0 21px 55px rgba(16,40,28,.07)}
.marken::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--c-blue-dk) 0%,var(--c-teal) 38.2%,var(--c-green) 100%)}
.marken-kopf{padding:var(--s-5) var(--s-5) var(--s-4);max-width:calc(var(--shell)*.618)}
.marken-kopf h3{font-size:var(--t-h3);margin-bottom:var(--s-2)}
.marken-punkte{list-style:none;margin:var(--s-3) 0 var(--s-4);display:grid;gap:11px}
.marken-punkte li{position:relative;padding-left:29px;font-size:var(--t-body);
  color:var(--text);line-height:1.618}
.marken-punkte li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:3px;
  border-radius:3px;background:var(--c-teal)}
.marken-zweig{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.zweig{padding:var(--s-4) var(--s-5);position:relative}
.zweig+.zweig{border-left:1px solid var(--line)}
.zweig::before{content:"";position:absolute;left:0;top:0;right:0;height:3px}
.zweig--blau::before{background:var(--c-blue)}
.zweig--gruen::before{background:var(--c-green)}
.zweig h3{font-size:21px;margin-bottom:var(--s-2)}
.zweig p{color:var(--text-soft);margin-bottom:var(--s-3)}
@media(max-width:860px){.marken-zweig{grid-template-columns:1fr}
  .zweig+.zweig{border-left:0;border-top:1px solid var(--line)}
  .marken-kopf{padding:var(--s-4)}.zweig{padding:var(--s-4)}}
.fields .card--lg{padding-top:var(--s-4)}

/* Zwei Prinzipien im Bild: gross, wechselseitig, mit eigener Ueberschrift */
.duell{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);margin-top:var(--s-4)}
.dl{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-invert);
  background:linear-gradient(157deg,rgba(255,255,255,.08),rgba(255,255,255,0) 61.8%),var(--ink-3);
  display:flex;flex-direction:column}
.dl img{width:100%;height:auto;display:block;aspect-ratio:1200/940;object-fit:cover}
.dl figcaption{padding:var(--s-4)}
.dl-tag{display:inline-block;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;border-radius:5px;margin-bottom:var(--s-3)}
.dl--rot .dl-tag{background:rgba(154,99,52,.22);color:#E2B48C}
.dl--gruen .dl-tag{background:rgba(67,112,57,.22);color:var(--c-green-lt)}
.dl b{display:block;font-size:var(--t-h3);letter-spacing:-.02em;color:#fff;margin-bottom:var(--s-2)}
.dl p{font-size:var(--t-body);line-height:1.618;color:var(--text-invert-soft)}
.dl ul{margin:0;padding-left:19px;font-size:var(--t-body);line-height:1.9;
  color:var(--text-invert-soft)}
.dl ul b{display:inline;font-size:inherit;color:#fff;margin:0}
.dl ul li{margin-bottom:3px}
.dl .schluss{margin-top:var(--s-3);padding-top:var(--s-3);
  border-top:1px solid var(--line-invert)}
.dl--rot{border-top:4px solid var(--c-red)}
.dl--gruen{border-top:4px solid var(--c-green)}
@media(max-width:860px){.duell{grid-template-columns:1fr}}

/* Erklaerbild ueber die volle Lesebreite */
/* Verweis auf die Markenseite, direkt unter dem Kopfbild */
.markenzeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3) var(--s-4);margin-bottom:var(--s-5);padding:var(--s-3) var(--s-4);
  border-radius:9px;border:1px solid var(--line);border-left:5px solid var(--c-blue);
  background:linear-gradient(100deg,rgba(31,77,53,.08),rgba(31,77,53,0) 61.8%)}
.markenzeile span{font-size:var(--t-small);color:var(--text-soft);line-height:1.55;flex:1 1 260px}
.mz-btn{flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;
  justify-content:center;gap:11px;min-width:320px;
  font:700 var(--t-body)/1 "Geist","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;padding:16px 26px;border-radius:34px;
  color:#fff;background:linear-gradient(150deg,var(--c-blue),var(--c-blue-dk));
  box-shadow:0 8px 21px rgba(16,40,28,.28);transition:.2s}
.mz-btn:hover{transform:translateY(-2px);box-shadow:0 13px 34px rgba(16,40,28,.34);color:#fff}
.mz-btn .arrow{transition:transform .2s}
.mz-btn:hover .arrow{transform:translateX(4px)}
.markenzeile--gruen{border-left-color:var(--c-green);
  background:linear-gradient(100deg,rgba(67,112,57,.09),rgba(67,112,57,0) 61.8%)}
.markenzeile--gruen .mz-btn{background:linear-gradient(150deg,var(--c-green),var(--c-green-dk));
  box-shadow:0 8px 21px rgba(13,58,30,.26)}
.markenzeile--gruen .mz-btn:hover{box-shadow:0 13px 34px rgba(13,58,30,.32)}
.wirkbild{margin:var(--s-5) auto 0;max-width:calc(var(--shell)*.786);text-align:center}
.wirkbild img{width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.wirkbild span{display:block;margin-top:var(--s-2);color:var(--c-grey);font-size:15px;line-height:1.618}

/* Langzeitreihe: zwanzig Jahre Gasverbrauch, zwei Ma&szlig;nahmen */
.lz-kopf{display:grid;grid-template-columns:var(--phi);gap:var(--s-5);align-items:start}
.lz-objekt{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-invert);
  background:var(--ink-3)}
.lz-objekt img{width:100%;height:auto;display:block}
.lz-objekt figcaption{padding:var(--s-3);font-size:var(--t-small);line-height:1.55;
  color:var(--text-invert-soft)}
@media(max-width:860px){.lz-kopf{grid-template-columns:1fr}}

.jahre{margin-top:var(--s-5)}
.jahre-marken{position:relative;height:38px;margin-bottom:8px}
.jm{position:absolute;top:0;font-size:15px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#A7C957;white-space:nowrap;padding-bottom:15px;
  opacity:0;transform:translateY(-6px);transition:opacity .5s,transform .5s}
.jm::after{content:"";position:absolute;left:0;bottom:0;width:2px;height:15px;background:#A7C957}
.jm--eins{left:35.5%}
.jm--zwei{left:75.5%}
.jahre.laeuft .jm{opacity:1;transform:none}
.jahre.laeuft .jm--eins{transition-delay:1.45s}
.jahre.laeuft .jm--zwei{transition-delay:3.5s}

.jahre-gitter{display:grid;grid-template-columns:repeat(20,1fr);gap:5px;align-items:end;
  height:300px;padding-top:var(--s-2);border-bottom:1px solid rgba(255,255,255,.22)}
.js{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer;
  /* Die Saeule ist ein <button>. Ohne diese drei Zeilen zeichnet der Browser
     seine graue Standardflaeche ueber die volle Spaltenhoehe — das waren die
     hellen Kaesten oberhalb der Balken. */
  background:none;border:0;padding:0;-webkit-appearance:none;appearance:none}
.js:hover .js-b,.js.gewaehlt .js-b{filter:brightness(1.25)}
.js.gewaehlt span{color:#fff;font-weight:800}
.js:focus-visible{outline:2px solid #A7C957;outline-offset:3px}
.js-b{display:block;height:0;opacity:.25;border-radius:5px 5px 0 0;
  transition:height 1.1s cubic-bezier(.22,1,.36,1),opacity .6s ease;
  transition-delay:calc(var(--i) * 190ms)}
.jahre.laeuft .js-b{height:var(--h);opacity:1}
.js-b--vor{background:linear-gradient(180deg,#C98A50,#9A6334)}
.js-b--mittel{background:linear-gradient(180deg,#8FBF6B,#4E7F3C)}
.js-b--nach{background:linear-gradient(180deg,#C6E27A,#7CAA5F)}
.js--mass .js-b{box-shadow:0 0 0 2px #A7C957, 0 0 21px rgba(167,201,87,.55)}
.js b{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--h) + 9px);
  font-size:11px;font-weight:700;color:#fff;white-space:nowrap;opacity:0;transition:opacity .2s;
  background:rgba(16,40,28,.9);padding:3px 7px;border-radius:5px;z-index:3}
.js:hover b{opacity:1}
.js span{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);
  font-size:14px;font-weight:600;color:var(--text-invert-soft)}
.js--mass span{color:#A7C957;font-weight:700}

.lz-spar{margin-top:var(--s-5);display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);
  align-items:center}
.lz-spar-t{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-invert-soft);white-space:nowrap}
.lz-spar-bahn{position:relative;height:44px;border-radius:8px;background:rgba(255,255,255,.07);
  display:flex;align-items:center;overflow:hidden}
.lz-spar-f{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;
  background:linear-gradient(90deg,var(--c-teal),var(--c-green-lt))}
.lz-spar-bahn b{position:relative;z-index:2;padding-left:var(--s-3);font-size:var(--t-lead);
  font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}

.jahre-legende{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);margin-top:var(--s-5);
  font-size:var(--t-body);color:var(--text-invert-soft)}
.jahre-legende span{display:flex;align-items:center;gap:9px}
.lg{width:18px;height:10px;border-radius:3px;display:block}
.lg--vor{background:var(--c-red)} .lg--mittel{background:var(--c-teal)}
.lg--nach{background:var(--c-green)} .lg--mass{background:#A7C957}
.lg-tipp{font-size:var(--t-small);color:var(--text-invert-soft);opacity:.75;font-style:italic}
.vgl-fazit{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:center;
  margin-top:var(--s-5);padding:var(--s-3) var(--s-4);border-radius:9px;
  background:rgba(67,112,57,.14);border-left:5px solid var(--c-green)}
.vgl-fazit b{font-size:var(--t-h2);font-weight:800;color:var(--c-green-lt);line-height:1}
.vgl-fazit span{font-size:var(--t-body);color:var(--text-invert-soft);line-height:1.618}
@media(prefers-reduced-motion:reduce){.js-b,.jm{transition:none}
  .jahre .js-b{height:var(--h)}.jahre .lz-spar-f{width:65.7%}.jahre .jm{opacity:1;transform:none}}
@media(max-width:860px){.jahre-gitter{height:210px;gap:2px}.js span{font-size:8px}
  .jm{font-size:9px}.vgl-fazit,.lz-spar{grid-template-columns:1fr}}

/* ---- U-Wert-Rechner: Wandaufbau mit zuschaltbarer Beschichtung ----
   Aufteilung 38,2 zu 61,8 - links der Schnitt, rechts das Ergebnis. */
.uw{display:grid;grid-template-columns:38.2% 1fr;gap:var(--s-5);align-items:start;
  margin-top:var(--s-5)}
/* Ohne min-width:0 zwingt die Rechentabelle die Spalte breiter als den Bildschirm -
   auf dem Telefon laeuft dann die ganze Seite ueber. */
.uw>*{min-width:0}
.uw-erg{min-width:0;max-width:100%}
.uw-schnitt{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--paper-2)}
.uw-wand{display:flex;height:340px;align-items:stretch;justify-content:center}
/* Der Kern - Putz, Ziegel, Putz - behaelt immer dieselbe Breite. Die
   Beschichtung legt sich aussen an und baut auf, statt den Ziegel zu stauchen. */
.uw-kern{flex:0 0 78%;display:flex;align-items:stretch}
.uw-l{position:relative;transition:flex-basis .5s cubic-bezier(.22,1,.36,1),
  opacity .35s ease,filter .35s ease;overflow:hidden}
.uw-l--putz{flex:0 0 15%;background:repeating-linear-gradient(135deg,#E4E2DC,#E4E2DC 4px,#D9D6CE 4px,#D9D6CE 8px)}
.uw-l--ziegel{flex:1 1 auto;background-color:#8A5140;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27104%27%20height%3D%2752%27%3E%3Crect%20width%3D%27104%27%20height%3D%2752%27%20fill%3D%27%238A5140%27%2F%3E%3Cg%20fill%3D%27%23B4705A%27%3E%3Crect%20x%3D%270%27%20y%3D%270%27%20width%3D%2749%27%20height%3D%2723%27%2F%3E%3Crect%20x%3D%2752%27%20y%3D%270%27%20width%3D%2749%27%20height%3D%2723%27%2F%3E%3Crect%20x%3D%27-26%27%20y%3D%2726%27%20width%3D%2749%27%20height%3D%2723%27%2F%3E%3Crect%20x%3D%2726%27%20y%3D%2726%27%20width%3D%2749%27%20height%3D%2723%27%2F%3E%3Crect%20x%3D%2778%27%20y%3D%2726%27%20width%3D%2749%27%20height%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:104px 52px;background-position:center top}
/* Der Platz der Beschichtung ist immer reserviert. Sie waechst nur hinein,
   dadurch bleibt der Ziegel exakt an seiner Stelle stehen. */
.uw-l--schicht{flex:0 0 17px;background:transparent;overflow:hidden}
.uw-l--schicht::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--c-teal),var(--c-green));
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset;
  transition:transform .5s cubic-bezier(.22,1,.36,1);transform:scaleX(1)}
.uw-l--schicht[data-teil="aussen"]::before{transform-origin:right center}
.uw-l--schicht[data-teil="innen"]::before{transform-origin:left center}
.uw-l--schicht.aus::before{transform:scaleX(0)}
.uw-marke{position:absolute;top:10px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);background:rgba(255,255,255,.86);
  padding:3px 7px;border-radius:5px;white-space:nowrap}
.uw-marke--a{left:10px} .uw-marke--i{right:10px}
.uw-fuss{display:flex;justify-content:space-between;padding:9px var(--s-3);
  font-size:var(--t-small);color:var(--text-soft);border-top:1px solid var(--line)}
.uw-schalter{display:flex;flex-direction:column;gap:11px;margin-top:var(--s-3)}
.uw-sch{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;
  padding:13px var(--s-3);border-radius:9px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:var(--t-body);color:var(--text);
  transition:border-color .2s,background .2s,box-shadow .2s}
.uw-sch:hover{border-color:var(--c-teal)}
.uw-sch .kn{flex:0 0 46px;height:26px;border-radius:13px;background:var(--line);
  position:relative;transition:background .25s}
.uw-sch .kn::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .25s}
.uw-sch.an{border-color:var(--c-green);background:rgba(67,112,57,.06)}
.uw-sch.an .kn{background:var(--c-green)}
.uw-sch.an .kn::after{transform:translateX(20px)}
.uw-sch b{display:block;font-weight:700} .uw-sch small{color:var(--text-soft)}
.uw-erg{border-radius:var(--radius);border:1px solid var(--line);background:#fff;
  padding:var(--s-4)}
.uw-zahl{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.uw-zahl b{font-size:clamp(44px,7vw,72px);font-weight:800;line-height:1;color:var(--c-blue-dk);
  font-variant-numeric:tabular-nums}
.uw-zahl span{font-size:var(--t-lead);color:var(--text-soft)}
.uw-bahn{position:relative;height:38px;border-radius:8px;margin-top:var(--s-3);
  background:linear-gradient(90deg,var(--c-green) 0%,var(--c-teal) 21.8%,#C08A3E 55%,var(--c-red) 100%);
  overflow:visible}
.uw-zeiger{position:absolute;top:-7px;bottom:-7px;width:4px;border-radius:2px;background:var(--ink);
  box-shadow:0 0 0 2px #fff;transition:left .6s cubic-bezier(.22,1,.36,1)}
.uw-oib{position:absolute;top:-7px;bottom:-7px;width:2px;background:rgba(0,0,0,.45)}
.uw-oib::after{content:"OIB 0,35";position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;color:var(--text-soft);white-space:nowrap}
.uw-skala{display:flex;justify-content:space-between;font-size:var(--t-small);
  color:var(--text-soft);margin-top:19px}
.uw-tab{width:100%;border-collapse:collapse;margin-top:var(--s-4);font-size:15px}
.uw-tab th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-soft);font-weight:700;padding:0 9px 7px 0;border-bottom:1px solid var(--line)}
.uw-tab td{padding:9px 9px 9px 0;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.uw-tab tr.weg td{opacity:.32;text-decoration:line-through}
.uw-tab tr.summe td{font-weight:800;border-bottom:none;border-top:2px solid var(--ink)}
.uw-tab td:last-child,.uw-tab th:last-child{text-align:right;padding-right:0}
.uw-quelle{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);
  font-size:var(--t-small);color:var(--text-soft);line-height:1.618}
.lead--schmal{max-width:100%}
.uw-tabhuelle{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:900px){.uw{grid-template-columns:1fr}.uw-wand{height:230px}
  .lead--schmal{max-width:none}
  .uw-erg{padding:var(--s-3)}
  .uw-tab{font-size:13px}
  .uw-tab th,.uw-tab td{padding-right:7px}
  .uw-zahl span{font-size:var(--t-body)}}
/* ---- Telefon: die Kopfleiste darf keinen Platz stehlen ---------------- */
@media(max-width:860px){
  .topbar{font-size:var(--t-micro)}

  .topbar-txt{display:none}
  .topbar-links{gap:var(--s-3)}
  .header .shell{padding:9px var(--s-4)}
  .logo img{height:34px}
  /* Fliesstext einheitlich linksbuendig - zentrierte Absaetze lesen sich
     auf schmalen Bildschirmen unruhig. */
  .gauge-txt,.disclaim{text-align:left}
}
/* ---- Quer gehaltenes Telefon: wenig Hoehe, also nichts Festes oben ----- */
@media(orientation:landscape) and (max-height:560px){
  .topbar{display:none}
  .header{position:static}
  .header .shell{padding:7px var(--s-4)}
  .nav.open{max-height:74vh;overflow-y:auto}
  .stage{padding-top:var(--s-4);padding-bottom:var(--s-4)}
  .slide{min-height:auto}
}
@media(max-width:620px){
  /* Schaltflaechen nehmen die ganze Breite - auf schmalen Schirmen sind sie
     so leichter zu treffen und die Zeile bricht nicht mitten im Wort. */
  .btn{width:100%;justify-content:center;text-align:center}
  .ctas,.hero-ctas{display:grid;gap:var(--s-2)}
  .opts .btn,.uw-sch,.dot{width:auto}
  .opts button{width:100%}
  /* Umbrueche in Ueberschriften sind fuer breite Spalten gesetzt - auf dem
     Telefon erzeugen sie zerrissene Zeilen. */
  h1 br,h2 br,h3 br{display:none}
  .note{padding:var(--s-3)}
  .uw-wand{height:190px}.uw-kern{flex-basis:70%}
  .uw-l--ziegel{background-size:78px 39px}
  .uw-l--schicht{flex-basis:13px}
  .uw-marke{font-size:10px;padding:2px 5px}
  .uw-sch{padding:11px}.uw-sch .kn{flex-basis:40px;width:40px;height:23px}
  .uw-sch .kn::after{width:17px;height:17px}
  .uw-sch.an .kn::after{transform:translateX(17px)}
  .uw-tab{font-size:12px}
  .uw-bahn{height:30px}
  .uw-oib::after{font-size:10px}}

/* Videofeld: laeuft erst auf Klick, laedt vorher nichts */
.videofeld{margin-left:0;margin-right:auto;margin-top:var(--s-4);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:#10281C;max-width:calc(var(--shell)*.618)}
@media(max-width:860px){.videofeld{margin-left:auto}}
.videofeld video{width:100%;height:auto;display:block}
.videofeld p{padding:var(--s-3);margin:0;font-size:var(--t-small);color:var(--text-soft);
  background:linear-gradient(157deg,#fff,var(--paper-2));line-height:1.55}

/* Einwilligung und Falle fuer Formularroboter */
.field--check label{display:flex;gap:13px;align-items:flex-start;font-weight:400;
  line-height:1.618;font-size:15px;color:var(--c-grey);cursor:pointer}
.field--check input{width:21px;height:21px;flex:0 0 21px;margin-top:2px;accent-color:var(--c-red)}
/* Der Satz steht in einem eigenen Element. Ohne das behandelt der Flex-Umbruch
   jeden Textabschnitt und den Link als eigene Spalte - der Satz zerreisst. */
.field--check label>span{flex:1 1 auto;min-width:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field--rechnen .rechenzeile{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.field--rechnen #rechenfrage{font-weight:700;font-size:var(--t-lead);color:var(--ink);
  background:linear-gradient(157deg,#fff,var(--paper-2));border:1px solid var(--line);
  border-radius:8px;padding:11px 18px}
.field--rechnen input{max-width:110px;text-align:center;font-weight:700}
.hinweis{padding:21px 34px;border-radius:8px;margin-bottom:var(--s-4);line-height:1.618}
.hinweis--ok{background:rgba(67,112,57,.10);border-left:5px solid var(--c-teal)}
.hinweis--fehler{background:rgba(154,99,52,.08);border-left:5px solid var(--c-red)}

/* Sprungnavigation: gross genug fuer den Touchscreen am Messestand ------ */
/* Reiterleiste: kompakt, zwei Reihen, kein Scrollen ------------------- */
.reiterband{background:var(--ink);padding:var(--s-4) 0;position:sticky;top:76px;z-index:55}
.reiterband .shell{max-width:1400px}
.reiter-titel{display:flex;align-items:center;gap:var(--s-2);color:var(--c-teal-lt);
  font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:11px}
.reiter{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.reiter button{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:42px;padding:8px 11px;border-radius:8px;background:rgba(255,255,255,.08);
  color:var(--text-invert);border:1px solid var(--line-invert);cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;line-height:1.25;
  transition:background .16s ease,color .16s ease}
.reiter button:hover{background:rgba(255,255,255,.16)}
.reiter button[aria-selected="true"]{background:var(--c-teal);border-color:var(--c-teal);
  color:#fff;font-weight:700}
.reiter button.reiter-wir{background:rgba(67,112,57,.30);border-color:var(--c-teal);color:#fff}
.reiter button.reiter-wir:hover{background:rgba(67,112,57,.46)}
.reiter button.reiter-wir[aria-selected="true"]{background:var(--c-teal);border-color:var(--c-teal-lt)}
.rpanel{display:none}
.rpanel.an{display:block;animation:rein .3s cubic-bezier(.22,1,.36,1)}
@keyframes rein{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.reiter{grid-template-columns:repeat(4,1fr)}
  .reiter button{font-size:13.5px;min-height:46px}}
@media(max-width:760px){.reiter{grid-template-columns:repeat(3,1fr);gap:6px}
  .reiter button{font-size:13px;min-height:48px;padding:7px 8px}}
@media(max-width:480px){.reiter{grid-template-columns:repeat(2,1fr)}
  .reiterband{top:68px;padding:var(--s-3) 0}
  .reiter button{min-height:50px}}
@media(orientation:landscape) and (max-height:560px){.reiterband{position:static}}
@media(prefers-reduced-motion:reduce){.rpanel.an{animation:none}}

/* Aufmerksamkeitsband direkt unter dem Seitenkopf ---------------------- */
.neuband{background:linear-gradient(101deg,var(--c-blue-dk),var(--c-teal));color:#fff}
.neuband .shell{display:flex;align-items:center;gap:var(--s-5);padding-top:var(--s-4);
  padding-bottom:var(--s-4);flex-wrap:wrap}
.neuband-txt{flex:1 1 61.8%;min-width:0}
.neuband-tag{display:inline-block;font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 11px;border-radius:5px;background:rgba(255,255,255,.20);
  margin-bottom:9px}
.neuband-h{font-size:var(--t-h3);font-weight:700;line-height:1.24;letter-spacing:-.01em}
.neuband-p{font-size:var(--t-small);line-height:1.618;color:rgba(255,255,255,.86);margin-top:6px}
.neuband .btn{flex:0 0 auto;background:#fff;color:var(--c-blue-dk);
  box-shadow:0 8px 21px rgba(16,40,28,.24)}
.neuband .btn:hover{background:var(--paper)}
@media(max-width:860px){
  .neuband .shell{gap:var(--s-3)}
  .neuband-txt{flex:1 1 100%}
  .neuband .btn{width:100%;justify-content:center}}
.ankerziel{scroll-margin-top:152px}
.zurueck-oben{display:inline-flex;align-items:center;gap:7px;margin-top:var(--s-4);
  font-size:var(--t-small);font-weight:700;color:var(--c-teal-txt)}
.zurueck-oben:hover{text-decoration:underline}
.dark .zurueck-oben{color:var(--c-teal-lt)}

/* Zeitstrahl ----------------------------------------------------------- */
.zeit{margin-top:var(--s-5);border-left:3px solid var(--line);padding-left:var(--s-4)}
.zeit-p{position:relative;padding-bottom:var(--s-4)}
.zeit-p::before{content:"";position:absolute;left:calc(-1*var(--s-4) - 8px);top:6px;
  width:13px;height:13px;border-radius:50%;background:var(--c-teal);
  box-shadow:0 0 0 4px var(--paper)}
.zeit-p.ist::before{background:var(--c-grey)}
.zeit-d{font-weight:700;font-size:var(--t-lead);line-height:1.2}
.zeit-t{font-size:var(--t-small);color:var(--text-soft);line-height:1.618;margin-top:5px}
.zeit-tag{display:inline-block;font-size:var(--t-micro);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 9px;border-radius:5px;margin-left:9px;
  background:rgba(67,112,57,.14);color:var(--c-teal-txt)}
.zeit-p.ist .zeit-tag{background:rgba(79,76,77,.14);color:var(--c-grey)}

/* Messehinweis --------------------------------------------------------- */
.messe{position:fixed;inset:0;z-index:120;display:flex;align-items:center;
  justify-content:center;padding:var(--s-4)}
.messe[hidden]{display:none}
.messe-hg{position:absolute;inset:0;background:rgba(12,28,20,.62);
  backdrop-filter:blur(3px);animation:messehg .4s ease both}
@keyframes messehg{from{opacity:0}to{opacity:1}}
.messe-box{position:relative;width:min(610px,100%);background:var(--paper);
  border-radius:14px;overflow:hidden;box-shadow:0 34px 89px rgba(12,28,20,.34);
  animation:messeauf .5s cubic-bezier(.22,1,.36,1) both}
@keyframes messeauf{from{opacity:0;transform:translateY(21px) scale(.97)}
  to{opacity:1;transform:none}}
.messe-band{background:linear-gradient(101deg,var(--c-teal),var(--c-green));
  color:#fff;padding:13px var(--s-5);font-weight:700;letter-spacing:.04em;
  font-size:var(--t-micro);text-transform:uppercase}
.messe-inhalt{padding:var(--s-5)}
.messe-inhalt h3{margin:0 0 var(--s-3);line-height:1.24}
.messe-inhalt p{line-height:1.618;margin:0 0 var(--s-3)}
.messe-stand{display:flex;align-items:baseline;gap:var(--s-3);margin:var(--s-4) 0;
  padding:13px 21px;border-radius:9px;border-left:5px solid var(--c-blue);
  background:rgba(31,77,53,.10)}
.messe-stand b{font-size:var(--t-h3);line-height:1}
.messe-stand span{font-size:var(--t-lead);font-weight:600}
.messe-klein{font-size:var(--t-micro);color:var(--ink-2)}
.messe-akt{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  margin-top:var(--s-4)}
.messe-spaeter{background:none;border:0;padding:8px 4px;cursor:pointer;
  color:var(--ink-2);font:inherit;font-size:var(--t-micro);text-decoration:underline}
.messe-spaeter:hover{color:var(--ink)}
.messe-mehr{font-size:var(--t-small);font-weight:700;color:var(--c-teal-txt)}
.messe-mehr:hover{text-decoration:underline}
.messe-x{position:absolute;top:8px;right:11px;z-index:2;background:none;border:0;
  color:#fff;font-size:30px;line-height:1;cursor:pointer;opacity:.82;padding:2px 8px}
.messe-x:hover{opacity:1}
@media(max-width:620px){
  .messe{padding:var(--s-3);align-items:flex-end}
  .messe-box{border-radius:14px 14px 0 0}
  .messe-inhalt{padding:var(--s-4)}
  .messe-akt .btn{width:100%;justify-content:center}
  .messe-akt{gap:var(--s-3)}
  .messe-spaeter{width:100%;text-align:center}}
@media(orientation:landscape) and (max-height:560px){
  .messe{align-items:flex-start;overflow-y:auto}
  .messe-box{margin:var(--s-3) 0}
  .messe-klein{display:none}}
@media(prefers-reduced-motion:reduce){
  .messe-box,.messe-hg{animation:none}}

/* ---- Ergaenzung Green-Solution: weitere Schichtarten im Bauteilschnitt ---- */
.uw-l--daemm{background:repeating-linear-gradient(45deg,#F2E9C9,#F2E9C9 5px,#E6D9AC 5px,#E6D9AC 10px)}
.uw-l--beton{background:#9AA0A0;background-image:radial-gradient(circle at 30% 40%,rgba(255,255,255,.45) 1px,transparent 1px),radial-gradient(circle at 70% 70%,rgba(0,0,0,.12) 1.5px,transparent 1.5px);background-size:14px 14px}
.uw-kern{flex:0 0 78%;display:flex;align-items:stretch}
.uw-oib::after{content:attr(data-oib)}

/* ---- Kopf: Zielgruppen in der obersten Leiste, Aufklappmenues in der Navigation ---- */

.topbar-txt{font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-green-lt);font-size:12px}

.topbar-zg a{font-size:var(--t-small);color:rgba(255,255,255,.86);white-space:nowrap}
.topbar-zg a:hover,.topbar-zg a.on{color:var(--c-green-lt)}
.topbar-links a{font-weight:700;font-size:var(--t-small);color:#fff}
.topbar-links a:hover{color:var(--c-green-lt)}

.logo .claim{display:block;font-size:20px;font-weight:400;letter-spacing:-.02em;line-height:1.05;color:var(--text)}
.logo .claim b{font-weight:800}
.logo .claim em{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-soft);margin-top:3px}

.navgruppe{position:relative}
.navgruppe>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.navgruppe>summary::-webkit-details-marker{display:none}
.navgruppe>summary::after{content:"";width:7px;height:7px;flex:none;
  border-right:1.5px solid var(--c-red);border-bottom:1.5px solid var(--c-red);
  transform:translateY(-2px) rotate(45deg);transform-origin:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.navgruppe[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.navgruppe-p{position:absolute;top:calc(100% + 21px);left:calc(var(--s-3)*-1);min-width:340px;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 21px 55px rgba(16,40,28,.18);padding:0;z-index:70}
.navgruppe-p a{display:flex;gap:var(--s-3);align-items:baseline;padding:16px var(--s-3);
  border-bottom:1px solid var(--line)}
.navgruppe-p a:last-child{border-bottom:0}
.navgruppe-p a:hover{background:var(--paper)}
.navgruppe-p i{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.04em;
  color:var(--c-red);flex:none;font-variant-numeric:tabular-nums}
.navgruppe-p b{display:block;font-weight:700;font-size:var(--t-body);letter-spacing:-.01em}
.navgruppe-p em{display:block;font-style:normal;font-size:12px;color:var(--text-soft);margin-top:3px}


@media(max-width:980px){
  .navgruppe{width:100%}
  .navgruppe-p{position:static;min-width:0;box-shadow:none;border:0;padding:0}
  .navgruppe-p a{padding:11px 0;border-bottom:0}
}


/* Aufklappmenue: Winkel statt Plus, sanftes Einblenden */
.navgruppe>summary{position:relative}
.navgruppe-p{opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s ease,transform .22s cubic-bezier(.22,1,.36,1)}
.navgruppe[open] .navgruppe-p{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){
  .navgruppe-p{transition:none}
  .navgruppe>summary::after{transition:none}}
@media(max-width:980px){
  .navgruppe-p{opacity:1;transform:none;pointer-events:auto}}

/* ============================================================
   Korrekturen 20.08.2026
   Ursache der Fehler: Bausteine, die fuer helle Flaechen gebaut sind,
   standen auf dunklem Grund - Tabellen, Karten und Bildunterschriften.
   ============================================================ */

/* Tabellen auf dunklen Flaechen */
.dark .uw-tab, .stage .uw-tab{color:var(--text-invert)}
.dark .uw-tab th, .stage .uw-tab th{color:var(--text-invert-soft);border-bottom-color:var(--line-invert)}
.dark .uw-tab td, .stage .uw-tab td{border-bottom-color:var(--line-invert)}
.dark .uw-tab tr.summe td, .stage .uw-tab tr.summe td{border-top-color:var(--c-green-lt);color:#fff}
.dark .uw-tabhuelle, .stage .uw-tabhuelle{color:var(--text-invert)}

/* Karten auf dunklen Flaechen: heller Grund, dunkle Schrift - lesbar statt weiss auf weiss */
.dark .card, .stage .card{background:var(--paper);color:var(--text);border-color:transparent}
.dark .card h3, .stage .card h3{color:var(--text)}
.dark .card p, .stage .card p{color:var(--text-soft)}
.dark .card .uw-tab, .stage .card .uw-tab{color:var(--text)}
.dark .card .uw-tab th, .stage .card .uw-tab th{color:var(--text-soft);border-bottom-color:var(--line)}
.dark .card .uw-tab td, .stage .card .uw-tab td{color:var(--text);border-bottom-color:var(--line)}
.dark .card .eyebrow, .stage .card .eyebrow{color:var(--c-teal-txt)}
.dark .card .disclaim, .stage .card .disclaim{color:var(--text-soft)}

/* Erlaeuterungsfeld auf dunkel: eigener Baustein statt gequetschter Karte */
.merk{border-left:3px solid var(--c-green-lt);padding:var(--s-2) 0 var(--s-2) var(--s-3);
  background:rgba(255,255,255,.05);border-radius:0 var(--radius) var(--radius) 0}
.merk .eyebrow{margin-bottom:var(--s-2)}
.merk p{color:var(--text-invert-soft);font-size:var(--t-body);line-height:1.618}
.merk + .merk{margin-top:var(--s-3)}
.merk-paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
@media(max-width:860px){.merk-paar{grid-template-columns:1fr}}

/* Bildpaare: randlos, ohne leere Flaeche ueber dem Motiv */
.bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
.bildpaar figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:#fff;display:flex;flex-direction:column}
.dark .bildpaar figure, .stage .bildpaar figure{border-color:var(--line-invert);background:var(--ink-3)}
.bildpaar img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.bildpaar figcaption{padding:var(--s-3);font-size:var(--t-small);line-height:1.6;color:var(--text-soft)}
.dark .bildpaar figcaption, .stage .bildpaar figcaption{color:var(--text-invert-soft)}
.bildpaar figcaption b{color:var(--text);display:block;margin-bottom:5px;font-size:var(--t-body)}
.dark .bildpaar figcaption b, .stage .bildpaar figcaption b{color:#fff}
@media(max-width:860px){.bildpaar{grid-template-columns:1fr}}

/* Schrittfolge immer ueber die volle Breite, nie in der schmalen Spalte */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--s-3)}
.split-media .steps{grid-template-columns:1fr}

/* Nachweistabelle: erste Spalte breit genug, Text linksbuendig statt rechts */
.uw-tab--quellen td:first-child{width:26%;font-weight:700}
.uw-tab--quellen td:last-child{text-align:left;padding-right:0;color:var(--text-soft)}
.dark .uw-tab--quellen td:last-child, .stage .uw-tab--quellen td:last-child{color:var(--text-invert-soft)}
@media(max-width:760px){
  .uw-tab--quellen td{display:block;width:auto}
  .uw-tab--quellen td:first-child{border-bottom:0;padding-bottom:0}
}

/* Systemtabelle: Nachweisspalte nicht rechtsbuendig zerreissen */
.uw-tab--systeme td:first-child{width:17%;font-weight:700}
.uw-tab--systeme td:last-child{text-align:right;white-space:nowrap;font-size:var(--t-small)}
@media(max-width:860px){
  .uw-tab--systeme td{display:block;width:auto;text-align:left}
  .uw-tab--systeme td:last-child{text-align:left;white-space:normal}
  .uw-tab--systeme thead{display:none}
}
.logo .claim .wort{display:block;white-space:nowrap;font-size:21px;font-weight:400;letter-spacing:-.02em;line-height:1.05}
.logo .claim .wort b{font-weight:800}
@media(max-width:520px){.logo .claim .wort{font-size:17px}}

/* ---- Referenzgitter ---- */
.refgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.refgitter figure{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  background:#fff;display:flex;flex-direction:column;transition:.25s}
.refgitter figure:hover{transform:translateY(-4px);box-shadow:0 21px 55px rgba(16,40,28,.13)}
.refgitter img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--paper-2)}
.refgitter figcaption{padding:var(--s-3);font-size:var(--t-small);line-height:1.6;color:var(--text-soft)}
.refgitter figcaption b{display:block;color:var(--text);font-size:var(--t-body);margin-bottom:5px}
.ref-sys{display:inline-block;margin-top:9px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--c-teal-txt);padding:4px 9px;border-radius:5px;
  background:rgba(67,112,57,.10)}

/* ============================================================
   Korrektur 2 — 20.08.2026
   .step, .dl und .merk sind bei pse-austria.at nur fuer dunkle
   Abschnitte gebaut. Auf hellem Grund waren sie dunkel auf dunkel.
   Grundzustand ist jetzt hell; dunkel nur innerhalb .dark und .stage.
   ============================================================ */

.step{background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(16,40,28,.04),0 8px 21px rgba(16,40,28,.05)}
.step b{color:var(--text)}
.step p{color:var(--text-soft)}
.step-no{color:var(--c-teal-txt)}
.dark .step, .stage .step{background:var(--ink-3);border-color:var(--line-invert);box-shadow:none}
.dark .step b, .stage .step b{color:#fff}
.dark .step p, .stage .step p{color:var(--text-invert-soft)}
.dark .step-no, .stage .step-no{color:var(--c-green-lt)}

.dl{border-color:var(--line);background:#fff}
.dl b{color:var(--text)}
.dl p, .dl ul{color:var(--text-soft)}
.dl--gruen .dl-tag{background:rgba(67,112,57,.12);color:var(--c-teal-txt)}
.dl--rot .dl-tag{background:rgba(154,99,52,.12);color:var(--c-red-dk)}
.dark .dl, .stage .dl{border-color:var(--line-invert);
  background:linear-gradient(157deg,rgba(255,255,255,.08),rgba(255,255,255,0) 61.8%),var(--ink-3)}
.dark .dl b, .stage .dl b{color:#fff}
.dark .dl p, .dark .dl ul, .stage .dl p, .stage .dl ul{color:var(--text-invert-soft)}
.dark .dl--gruen .dl-tag, .stage .dl--gruen .dl-tag{background:rgba(67,112,57,.28);color:var(--c-green-lt)}
.dark .dl--rot .dl-tag, .stage .dl--rot .dl-tag{background:rgba(154,99,52,.28);color:#E2B48C}

.merk{background:var(--paper-2);border-left-color:var(--c-teal)}
.merk p{color:var(--text-soft)}
.merk .eyebrow{color:var(--c-teal-txt)}
.dark .merk, .stage .merk{background:rgba(255,255,255,.05);border-left-color:var(--c-green-lt)}
.dark .merk p, .stage .merk p{color:var(--text-invert-soft)}
.dark .merk .eyebrow, .stage .merk .eyebrow{color:var(--c-green-lt)}

/* .note im Hellen */
.note{background:#fff;border:1px solid var(--line);color:var(--text)}
.dark .note, .stage .note{background:rgba(255,255,255,.06);border-color:var(--line-invert);color:var(--text-invert)}

/* Fehlendes Referenzbild darf keine leere Flaeche hinterlassen */
.refgitter img{background:var(--paper-2)}
.refgitter img[src=""],.refgitter img:not([src]){display:none}

/* Aufklappmenue: liegt ueber allem und ist einzeln */
.header{position:sticky;top:0;z-index:90}
.navgruppe[open]{z-index:95}
.navgruppe-p{z-index:96}

/* ============================================================
   Korrektur 3 — Kleintext und Ergebnisfelder im Zusammenhang
   .disclaim war fest auf --text-soft gesetzt und damit auf dunklem
   Grund unlesbar. Jetzt kontextabhaengig, ohne Inline-Stile.
   ============================================================ */
.disclaim{color:var(--text-soft)}
.dark .disclaim, .stage .disclaim, .footer .disclaim{color:var(--text-invert-soft)}
.dark .card .disclaim, .stage .card .disclaim{color:var(--text-soft)}

/* Ergebnisfeld des Rechners: heller Kasten, immer dunkle Schrift */
.uw-erg{color:var(--text)}
.dark .uw-erg, .stage .uw-erg{background:#fff;color:var(--text)}
.dark .uw-erg .uw-tab, .stage .uw-erg .uw-tab{color:var(--text)}
.dark .uw-erg .uw-tab th, .stage .uw-erg .uw-tab th{color:var(--text-soft);border-bottom-color:var(--line)}
.dark .uw-erg .uw-tab td, .stage .uw-erg .uw-tab td{color:var(--text);border-bottom-color:var(--line)}

/* Tabelle unmittelbar auf dunklem Grund */
.dark > .shell .uw-tabhuelle .uw-tab, .stage > .shell .uw-tabhuelle .uw-tab{color:var(--text-invert)}

/* .stage fehlte in der PSE-Vorlage bei .lead und den Ueberschriften */
.stage .lead{color:var(--text-invert-soft)}
.stage h2, .stage h3, .stage h4{color:var(--text-invert)}
.stage p{color:var(--text-invert-soft)}
.stage .card p, .stage .card h3, .stage .uw-erg p{color:inherit}
.stage .card h3{color:var(--text)}
.stage .card p{color:var(--text-soft)}

/* ============================================================
   Plakative Ebene — 20.08.2026
   Aufbau nach dem Codex-Entwurf, Bausprache und Farben Green-Solution.
   Vier Bausteine: nummerierte Kapitelmarke, Wasserzeichenwort,
   asymmetrische Titelzeile, fugenloses Kachelband.
   ============================================================ */

/* --- Kapitelmarke: 01 / THEMA --- */
.kapitel{display:flex;align-items:center;gap:11px;font-size:var(--t-micro);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-teal-txt);margin-bottom:var(--s-3)}
.kapitel i{font-style:normal;color:var(--c-red);font-variant-numeric:tabular-nums}
.kapitel::after{content:"";flex:1;height:1px;background:var(--line);max-width:89px}
.dark .kapitel, .stage .kapitel{color:var(--c-green-lt)}
.dark .kapitel::after, .stage .kapitel::after{background:var(--line-invert)}
.dark .kapitel i, .stage .kapitel i{color:var(--c-green-lt)}

/* --- Titelzeile: Schlagzeile links, Erklaerung rechts, Wasserzeichen dahinter --- */
.titelzeile{position:relative;display:grid;grid-template-columns:var(--phi);
  gap:var(--s-5);align-items:end;padding-top:var(--s-4)}
.titelzeile h2{font-size:clamp(38px,5.6vw,84px);line-height:.98;letter-spacing:-.035em;
  font-weight:800;position:relative;z-index:2;max-width:15ch}
.titelzeile p{position:relative;z-index:2;color:var(--text-soft);font-size:var(--t-body);
  line-height:1.618;padding-bottom:9px}
.dark .titelzeile p, .stage .titelzeile p{color:var(--text-invert-soft)}
.wasserzeichen{position:absolute;right:0;top:-13px;z-index:1;pointer-events:none;
  font-size:clamp(64px,11vw,168px);line-height:.82;font-weight:800;letter-spacing:-.05em;
  text-transform:uppercase;color:rgba(16,40,28,.055);white-space:nowrap;user-select:none}
.dark .wasserzeichen, .stage .wasserzeichen{color:rgba(255,255,255,.05)}
@media(max-width:900px){
  .titelzeile{grid-template-columns:1fr;gap:var(--s-3);align-items:start}
  .wasserzeichen{display:none}
}

/* --- Kachelband: fugenlos, durchnummeriert, wechselnde Toenung --- */
.kachelband{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--s-4);
  border:1px solid var(--line);background:var(--line)}
.kachelband--3{grid-template-columns:repeat(3,1fr)}
.kachelband--2{grid-template-columns:repeat(2,1fr)}
.kachel{display:flex;flex-direction:column;padding:var(--s-4);background:#fff;
  gap:var(--s-2);transition:background .2s ease;min-height:100%}
.kachel:nth-child(odd){background:var(--paper)}
.kachel:nth-child(4n+2){background:#fff}
.kachel:hover{background:var(--paper-2)}
.kachel-nr{font-size:var(--t-micro);font-weight:800;letter-spacing:.08em;color:var(--c-red);
  font-variant-numeric:tabular-nums}
.kachel-marke{font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-soft);margin-bottom:var(--s-4)}
.kachel h3{font-size:clamp(20px,1.8vw,26px);line-height:1.18;letter-spacing:-.025em;font-weight:700;
  margin-bottom:var(--s-2);max-width:16ch}
.kachel p{font-size:var(--t-small);line-height:1.6;color:var(--text-soft);margin-bottom:var(--s-3)}
.kachel a.mehr{margin-top:auto;font-size:var(--t-small);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-teal-txt);display:inline-flex;align-items:center;gap:7px}
.kachel a.mehr::after{content:"\2197";transition:transform .18s ease}
.kachel a.mehr:hover::after{transform:translate(3px,-3px)}
.kachel--dunkel{background:var(--ink-3);color:var(--text-invert)}
.kachel--dunkel h3{color:#fff}
.kachel--dunkel p{color:var(--text-invert-soft)}
.kachel--dunkel .kachel-marke{color:var(--text-invert-soft)}
.kachel--dunkel a.mehr{color:var(--c-green-lt)}
@media(max-width:1040px){.kachelband,.kachelband--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.kachelband,.kachelband--3,.kachelband--2{grid-template-columns:1fr}}

/* --- Held: plakativer Auftakt --- */
.held{position:relative;background:var(--ink);color:var(--text-invert);overflow:hidden;
  padding:var(--s-6) 0 var(--s-5)}
.held::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 78% 8%,rgba(167,201,87,.10),transparent 58%),
             radial-gradient(90% 70% at 12% 100%,rgba(255,255,255,.06),transparent 60%),
             linear-gradient(160deg,#1C4429 0%,#14301F 46%,#0C2117 100%)}
.held .shell{position:relative;z-index:3;display:grid;grid-template-columns:var(--phi);
  gap:var(--s-5);align-items:center}
.held-nr{position:absolute;right:2%;top:6%;z-index:1;font-size:clamp(120px,17vw,260px);
  line-height:.8;font-weight:800;letter-spacing:-.06em;color:rgba(255,255,255,.045);
  pointer-events:none;user-select:none;font-variant-numeric:tabular-nums}
.held h1{font-size:clamp(44px,6.4vw,96px);line-height:.92;letter-spacing:-.045em;font-weight:800;
  text-transform:uppercase;color:#fff;margin-bottom:var(--s-3)}
.held h1 em{font-style:normal;color:var(--c-green-lt);display:block}
.held-lead{font-size:var(--t-lead);line-height:1.5;color:var(--text-invert-soft);max-width:46ch;
  margin-bottom:var(--s-4)}
.held .ctas{margin-top:var(--s-4)}

.held-bild{position:relative;min-height:340px}
/* Startbild: quadratisch statt hochformatig.

   Gemessen am 20.08.2026: Die Startseite war 766 px hoch, jede Unterseite
   548 — vierzig Prozent mehr. Ursache war das Seitenverhaeltnis 4:5; bei
   rund 600 px Spaltenbreite ergibt das allein 750 px Bildhoehe.
   Quadratisch bringt die Sektion auf rund 620 px. Die Startseite behaelt
   damit sichtbar Vorrang, ohne die anderen Titelbilder zu ueberragen. */
.held-bild .gross{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius);
  box-shadow:0 34px 89px rgba(0,0,0,.35)}
.held-bild .klein{position:absolute;left:-21%;bottom:17%;width:47%;aspect-ratio:1;object-fit:cover;
  border-radius:var(--radius);border:3px solid var(--ink);box-shadow:0 21px 55px rgba(0,0,0,.4)}
.held-linien{position:absolute;left:-13%;top:21%;width:70%;z-index:2;pointer-events:none}
.held-linien i{display:block;height:2px;background:var(--c-green-lt);margin-bottom:11px;opacity:.9}
.held-linien i:nth-child(1){width:88%}
.held-linien i:nth-child(2){width:62%}
.held-linien i:nth-child(3){width:74%}
.held-marke{position:absolute;right:-8%;bottom:-6%;z-index:4;background:var(--c-red);color:#fff;
  padding:var(--s-3) var(--s-4);border-radius:var(--radius);min-width:200px;
  box-shadow:0 21px 55px rgba(0,0,0,.35)}
.held-marke span{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;opacity:.92}
.held-marke b{display:block;font-size:clamp(34px,4vw,52px);line-height:1;font-weight:800;
  letter-spacing:-.03em;margin:6px 0}
.held-marke b i{font-style:normal;font-size:.44em;font-weight:700;margin-left:3px}

@media(max-width:980px){
  .held .shell{grid-template-columns:1fr}
  .held-bild{min-height:0;margin-top:var(--s-4)}
  .held-bild .klein{left:0;bottom:-21px;width:38%}
  .held-marke{right:0;bottom:-34px;min-width:0}
  .held-linien{display:none}
}

/* --- Faktenband unter dem Held --- */
.faktenband{background:var(--ink-2);color:var(--text-invert);border-top:1px solid var(--line-invert)}
.faktenband .shell{display:grid;grid-template-columns:repeat(4,1fr)}
.faktenband div{padding:var(--s-3) var(--s-4);border-right:1px solid var(--line-invert)}
.faktenband div:last-child{border-right:0}
.faktenband b{display:block;font-size:var(--t-h3);font-weight:800;letter-spacing:-.02em;color:#fff}
.faktenband span{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-invert-soft);margin-top:5px}
@media(max-width:860px){.faktenband .shell{grid-template-columns:repeat(2,1fr)}
  .faktenband div:nth-child(2){border-right:0}}
@media(max-width:480px){.faktenband .shell{grid-template-columns:1fr}
  .faktenband div{border-right:0;border-bottom:1px solid var(--line-invert)}}

/* ============================================================
   Kacheloptik auf die Bausprache von pse-austria.at gezogen.
   Aufbau bleibt nach Codex (nummeriert, vier nebeneinander),
   Aussehen ist das der Kacheln auf der Dachseite: abgerundet,
   heller Verlauf, feine Kante, Akzentbalken links, Anheben bei
   Ber&uuml;hrung. Damit ist der &Uuml;bergang von PSE zu
   GREEN SOLUTION durchgehend.
   ============================================================ */

.kachelband{gap:var(--s-3);border:0;background:none;margin-top:var(--s-4)}
.kachel{
  padding:var(--s-4);
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(157deg,#fff 0%,#fff 38.2%,var(--paper) 100%);
  box-shadow:0 1px 2px rgba(16,40,28,.04),0 8px 21px rgba(16,40,28,.05);
  transition:transform .25s ease,box-shadow .25s ease,border-color .2s ease;
  position:relative;overflow:hidden}
.kachel:nth-child(odd),.kachel:nth-child(4n+2){background:linear-gradient(157deg,#fff 0%,#fff 38.2%,var(--paper) 100%)}
.kachel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad-arc)}
.kachel::after{content:"";position:absolute;right:-13%;top:-21%;width:55%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(67,112,57,.14),transparent 61.8%);pointer-events:none}
.kachel:hover{transform:translateY(-5px);box-shadow:0 34px 89px rgba(16,40,28,.13);background:linear-gradient(157deg,#fff 0%,#fff 38.2%,var(--paper) 100%)}
.kachel-nr{position:relative;z-index:2}
.kachel-marke{position:relative;z-index:2;margin-bottom:var(--s-3)}
.kachel h3{position:relative;z-index:2;font-size:var(--t-h3)}
.kachel p{position:relative;z-index:2}
.kachel a.mehr{position:relative;z-index:2}

.kachel--dunkel{
  background:linear-gradient(157deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 38.2%,rgba(255,255,255,0) 100%),var(--ink-3);
  border-color:var(--line-invert);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.kachel--dunkel:hover{
  background:linear-gradient(157deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.06) 38.2%,rgba(255,255,255,0) 100%),var(--ink-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 21px 55px rgba(0,0,0,.28)}
.kachel--dunkel::after{background:radial-gradient(circle,rgba(167,201,87,.12),transparent 61.8%)}

/* ============================================================
   Bauteilrechner — Schichteditor, Schnitt, Verlauf
   ============================================================ */

.brechner{margin-top:var(--s-4)}
.br-steuer{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s-3);margin-bottom:var(--s-3)}
.br-steuer .fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.br-steuer .fields + .fields{grid-template-columns:repeat(4,1fr);margin-top:var(--s-3)}

.br-haupt{display:grid;grid-template-columns:var(--phi);gap:var(--s-3);align-items:start}
.br-haupt > *{min-width:0}

.br-schichten{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:var(--s-3)}
.br-kopf{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  margin-bottom:var(--s-3);font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft)}
.br-liste{list-style:none;margin:0;padding:0}
.br-zeile{display:grid;grid-template-columns:18px 22px 13px minmax(0,1fr) 112px 88px 86px;gap:9px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line)}
.br-zeile:last-child{border-bottom:0}
.br-nr{font-size:12px;font-weight:800;color:var(--c-red);font-variant-numeric:tabular-nums}
.br-farbe{width:13px;height:26px;border:1px solid var(--line);border-radius:3px;display:block}
.br-stoff{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);font-size:var(--t-small)}
.br-dicke{display:flex;align-items:center;gap:5px;font-size:var(--t-small);color:var(--text-soft)}
.br-d{width:62px;padding:6px;border:1px solid var(--line);border-radius:7px;background:var(--paper);
  font-size:var(--t-small);font-variant-numeric:tabular-nums;text-align:right}
.br-lam{font-size:12px;color:var(--text-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.br-knopf{display:flex;gap:4px;justify-content:flex-end}
.br-knopf button{width:25px;height:25px;border:1px solid var(--line);border-radius:6px;background:#fff;
  cursor:pointer;font-size:13px;line-height:1;color:var(--text-soft);transition:.15s}
.br-knopf button:hover{border-color:var(--c-teal);color:var(--c-teal-txt);background:var(--paper)}

.br-bild{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:var(--s-3)}
.br-svg{width:100%;height:auto;display:block}
.br-legende{display:flex;flex-direction:column;gap:5px;margin-top:var(--s-3);font-size:12px;
  color:var(--text-soft)}
.br-legende span{display:flex;align-items:center;gap:7px}
.br-legende i{width:11px;height:11px;border:1px solid var(--line);border-radius:2px;flex:none}

.br-t-nr{font-size:11px;font-weight:800;fill:var(--text)}
.br-t-marke{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;fill:var(--text-soft)}
.br-t-mass{font-size:11px;fill:var(--text-soft)}
.br-t-achse{font-size:11px;fill:var(--text-soft);font-variant-numeric:tabular-nums}

.br-ergebnis{display:grid;grid-template-columns:var(--phi);gap:var(--s-3);
  margin-top:var(--s-3);align-items:start}
.br-werte,.br-feuchte{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:var(--s-4)}
.br-gross{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.br-gross .label{width:100%;margin-bottom:5px}
.br-gross b{font-size:clamp(38px,5vw,60px);font-weight:800;line-height:1;letter-spacing:-.03em;
  color:var(--c-blue-dk);font-variant-numeric:tabular-nums}
.br-gross i{font-style:normal;font-size:var(--t-lead);color:var(--text-soft)}
.br-kennwerte{display:grid;grid-template-columns:1fr 1fr;gap:9px var(--s-3);margin-top:var(--s-4);
  padding-top:var(--s-3);border-top:1px solid var(--line)}
.br-kennwerte div{display:flex;justify-content:space-between;gap:9px;font-size:var(--t-small);
  padding:4px 0;border-bottom:1px solid var(--line)}
.br-kennwerte span{color:var(--text-soft)}
.br-kennwerte b{font-variant-numeric:tabular-nums;white-space:nowrap}

.br-feuchte b{display:block;font-size:var(--t-h3);letter-spacing:-.02em;margin:5px 0 9px}
.br-feuchte p{font-size:var(--t-small);color:var(--text-soft);line-height:1.6}
.br-feuchte.kein-tau{border-left:5px solid var(--c-green)}
.br-feuchte.kein-tau b{color:var(--c-teal-txt)}
.br-feuchte.ist-tau{border-left:5px solid var(--c-red)}
.br-feuchte.ist-tau b{color:var(--c-red-dk)}

.br-verlauf{border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:var(--s-4);margin-top:var(--s-3)}
.br-verlauf h3{font-size:var(--t-h3);margin-bottom:9px}
.br-gitter{stroke:var(--line);stroke-width:1}
.br-null{stroke:var(--c-red);stroke-width:1.4;stroke-dasharray:5 4}
.br-grenze{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3}
.br-kurve-temp{fill:none;stroke:var(--c-blue-dk);stroke-width:2.6;stroke-linejoin:round}
.br-kurve-tau{fill:none;stroke:var(--c-teal);stroke-width:2.2;stroke-dasharray:7 5;stroke-linejoin:round}
.br-punkt{fill:#fff;stroke:var(--c-blue-dk);stroke-width:2}
.br-schluessel text{font-size:12px;fill:var(--text-soft)}

#brTabelle{margin-top:var(--s-3)}
#brTabelle td,#brTabelle th{font-variant-numeric:tabular-nums}
#brTabelle td:first-child,#brTabelle th:first-child{width:34px;color:var(--text-soft)}
#brTabelle td:nth-child(2),#brTabelle th:nth-child(2){text-align:left;width:34%}
#brTabelle .br-uebergang td{color:var(--text-soft);background:var(--paper)}

@media(max-width:1040px){
  .br-haupt,.br-ergebnis{grid-template-columns:1fr}
  .br-steuer .fields,.br-steuer .fields + .fields{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .br-zeile{grid-template-columns:18px 20px 11px 1fr;grid-template-areas:"griff nr farbe stoff" ". . . dicke" ". . . knopf";
    row-gap:6px;padding:11px 0}
  .br-griff{grid-area:griff}.br-nr{grid-area:nr}.br-farbe{grid-area:farbe}.br-stoff{grid-area:stoff}
  .br-dicke{grid-area:dicke}.br-knopf{grid-area:knopf;justify-content:flex-start}
  .br-lam{display:none}
  .br-kennwerte{grid-template-columns:1fr}
}

/* ============================================================
   Korrektur 4 — .held war weder .dark noch .stage und blieb
   deshalb bei allen kontextabhaengigen Regeln aussen vor.
   Die Kapitelmarke stand mit 1,95 : 1 auf dunklem Grund.
   ============================================================ */
.held .kapitel{color:var(--c-green-lt)}
.held .kapitel i{color:var(--c-green-lt)}
.held .kapitel::after{background:var(--line-invert)}
.held .lead,.held p{color:var(--text-invert-soft)}
.held h2,.held h3{color:var(--text-invert)}
.held .disclaim{color:var(--text-invert-soft)}
.held .btn--ghost{border-color:var(--line-invert);color:var(--text-invert)}
.held .btn--ghost:hover{background:rgba(255,255,255,.10)}

/* Die drei waagrechten Linien im Bild entfallen. */
.held-linien{display:none}


/* ============================================================
   Korrektur 5 — Grundsatz statt Einzelfall
   Jeder Baustein, dessen Farbe vom Untergrund abh&auml;ngt, wird hier
   f&uuml;r ALLE dunklen Abschnitte gesetzt: .dark .stage .held .trust
   .faktenband .footer. Vorher gab es Regeln nur fuer .dark und .stage,
   deshalb blieben Held, Vertrauensband und Faktenband unbehandelt.
   Neue dunkle Abschnitte hier eintragen, sonst wiederholt sich der Fehler.
   ============================================================ */

.dark .eyebrow, .stage .eyebrow, .held .eyebrow, .trust .eyebrow, .faktenband .eyebrow, .footer .eyebrow { color: var(--c-green-lt); }
.dark .kapitel, .stage .kapitel, .held .kapitel, .trust .kapitel, .faktenband .kapitel, .footer .kapitel { color: var(--c-green-lt); }
.dark .kapitel i, .stage .kapitel i, .held .kapitel i, .trust .kapitel i, .faktenband .kapitel i, .footer .kapitel i { color: var(--c-green-lt); }
.dark .kapitel::after, .stage .kapitel::after, .held .kapitel::after, .trust .kapitel::after, .faktenband .kapitel::after, .footer .kapitel::after { background: var(--line-invert); }
.dark .lead, .stage .lead, .held .lead, .trust .lead, .faktenband .lead, .footer .lead { color: var(--text-invert-soft); }
.dark .disclaim, .stage .disclaim, .held .disclaim, .trust .disclaim, .faktenband .disclaim, .footer .disclaim { color: var(--text-invert-soft); }
.dark h2, .stage h2, .held h2, .trust h2, .faktenband h2, .footer h2, .dark h3, .stage h3, .held h3, .trust h3, .faktenband h3, .footer h3, .dark h4, .stage h4, .held h4, .trust h4, .faktenband h4, .footer h4 { color: var(--text-invert); }
.dark .uw-tab, .stage .uw-tab, .held .uw-tab, .trust .uw-tab, .faktenband .uw-tab, .footer .uw-tab { color: var(--text-invert); }
.dark .uw-tab th, .stage .uw-tab th, .held .uw-tab th, .trust .uw-tab th, .faktenband .uw-tab th, .footer .uw-tab th { color: var(--text-invert-soft); border-bottom-color: var(--line-invert); }
.dark .uw-tab td, .stage .uw-tab td, .held .uw-tab td, .trust .uw-tab td, .faktenband .uw-tab td, .footer .uw-tab td { border-bottom-color: var(--line-invert); }
.dark .uw-tab tr.summe td, .stage .uw-tab tr.summe td, .held .uw-tab tr.summe td, .trust .uw-tab tr.summe td, .faktenband .uw-tab tr.summe td, .footer .uw-tab tr.summe td { border-top-color: var(--c-green-lt); color: #fff; }

/* Karten und Ergebnisfelder bleiben hell und tragen dunkle Schrift —
   auch innerhalb dunkler Abschnitte. Diese Regeln stehen bewusst danach. */
.dark .card, .stage .card, .held .card, .trust .card, .faktenband .card, .footer .card { background: var(--paper); color: var(--text); border-color: transparent; }
.dark .card h3, .stage .card h3, .held .card h3, .trust .card h3, .faktenband .card h3, .footer .card h3 { color: var(--text); }
.dark .card p, .stage .card p, .held .card p, .trust .card p, .faktenband .card p, .footer .card p, .dark .card .disclaim, .stage .card .disclaim, .held .card .disclaim, .trust .card .disclaim, .faktenband .card .disclaim, .footer .card .disclaim { color: var(--text-soft); }
.dark .card .eyebrow, .stage .card .eyebrow, .held .card .eyebrow, .trust .card .eyebrow, .faktenband .card .eyebrow, .footer .card .eyebrow { color: var(--c-teal-txt); }
.dark .card .uw-tab, .stage .card .uw-tab, .held .card .uw-tab, .trust .card .uw-tab, .faktenband .card .uw-tab, .footer .card .uw-tab { color: var(--text); }
.dark .card .uw-tab th, .stage .card .uw-tab th, .held .card .uw-tab th, .trust .card .uw-tab th, .faktenband .card .uw-tab th, .footer .card .uw-tab th { color: var(--text-soft); border-bottom-color: var(--line); }
.dark .card .uw-tab td, .stage .card .uw-tab td, .held .card .uw-tab td, .trust .card .uw-tab td, .faktenband .card .uw-tab td, .footer .card .uw-tab td { color: var(--text); border-bottom-color: var(--line); }
.dark .uw-erg, .stage .uw-erg, .held .uw-erg, .trust .uw-erg, .faktenband .uw-erg, .footer .uw-erg { background: #fff; color: var(--text); }
.dark .uw-erg .uw-tab, .stage .uw-erg .uw-tab, .held .uw-erg .uw-tab, .trust .uw-erg .uw-tab, .faktenband .uw-erg .uw-tab, .footer .uw-erg .uw-tab, .dark .uw-erg .uw-tab td, .stage .uw-erg .uw-tab td, .held .uw-erg .uw-tab td, .trust .uw-erg .uw-tab td, .faktenband .uw-erg .uw-tab td, .footer .uw-erg .uw-tab td { color: var(--text); border-bottom-color: var(--line); }
.dark .uw-erg .uw-tab th, .stage .uw-erg .uw-tab th, .held .uw-erg .uw-tab th, .trust .uw-erg .uw-tab th, .faktenband .uw-erg .uw-tab th, .footer .uw-erg .uw-tab th { color: var(--text-soft); border-bottom-color: var(--line); }

/* ============================================================
   Korrektur 6 — 20.08.2026
   ============================================================ */

/* B) Der Verlaufsknopf lief bis ins Lime aus, dort war die weisse
   Schrift nicht mehr lesbar. Der Verlauf endet jetzt im Signalgruen. */
.btn--arc{background:linear-gradient(100deg,#10281C 0%,#1F4D35 38.2%,#437039 100%);
  color:#fff;box-shadow:0 8px 21px rgba(31,77,53,.30)}
.btn--arc:hover{background:linear-gradient(100deg,#0C2117 0%,#183D2A 38.2%,#35602F 100%)}

/* C) Weisse Kanten um das Bild: das feste Seitenverhaeltnis passte nicht
   zum Motiv, dadurch blieb Flaeche des Rahmens sichtbar. Das Bild fuellt
   die Breite jetzt in seinem eigenen Verhaeltnis. */
.dl img{width:100%;height:auto;display:block;aspect-ratio:auto;object-fit:cover;
  background:var(--paper-2)}
.dl{overflow:hidden}
.dl figcaption{padding:var(--s-4)}

/* Ohne Kennzahlenfeld nimmt der Kopftext die volle Breite */
.phead .shell:not(:has(.phead-box)){grid-template-columns:1fr}
.phead .shell:not(:has(.phead-box)) > div{max-width:var(--measure)}

/* D) Randabstaende: Flie&szlig;text laeuft auf Textbreite, nicht auf
   Schalenbreite. Ausnahme sind Abschnitte mit Kachel oder Bild rechts —
   dort teilt der Goldene Schnitt 61,8 / 38,2. */
.section > .shell > h2,
.section > .shell > h3,
.section > .shell > p,
.section > .shell > .lead,
.section > .shell > .disclaim,
.section--tight > .shell > h2,
.section--tight > .shell > p,
.section--tight > .shell > .lead{max-width:var(--measure)}

/* Titelzeile einspaltig — die Erklaerung steht unter der Ueberschrift.

   Vorher teilte sie 61,8/38,2: Ueberschrift links, Erklaerung rechts. Auf
   breiten Schirmen stand die Erklaerung dadurch als eigener Block weit
   rechts oben, ohne sichtbare Verbindung zu dem, was sie erklaert — auf
   der Startseite, bei "Ihre Perspektive", bei "Drei Verfahren" und ueberall
   sonst, wo dieser Baustein vorkommt.

   Zusammengehoerendes gehoert untereinander. Das Verhaeltnis 38,2/61,8
   bleibt der Sektion vorbehalten: dort steht links dieser Textblock und
   rechts die Tabelle, das Diagramm oder das Bild. */
.titelzeile{grid-template-columns:1fr;gap:var(--s-2)}
.titelzeile > div{margin-bottom:0}
.titelzeile h2{max-width:26ch;text-wrap:balance}
.titelzeile > p{max-width:58ch;margin-top:var(--s-2)}
/* Innerhalb einer Sektion traegt die linke Spalte bereits die Breite */
.sekt-text .titelzeile h2,.sekt-text .titelzeile > p{max-width:none}
.split,.split--rev{grid-template-columns:var(--phi)}
.split--rev{direction:rtl}
.split--rev > *{direction:ltr}
@media(max-width:900px){
  .split,.split--rev,.titelzeile{grid-template-columns:1fr}
  .split--rev{direction:ltr}
}

/* ── Film ────────────────────────────────────────────────────────────────
   Die Aufnahmen sind Hochformat vom Telefon. Sie werden nicht aufgeblasen,
   sondern stehen in der kleinen Spalte des goldenen Schnitts: Text 61,8 %,
   Film 38,2 %. */
.film-split{display:grid;grid-template-columns:var(--phi);
  gap:var(--s-5);align-items:center}
.film-text h2{margin-top:var(--s-2)}
.film-text .lead{margin-top:var(--s-3)}
.filmliste{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-2)}
.filmliste li{display:grid;grid-template-columns:38.2% 1fr;gap:var(--s-3);
  padding:var(--s-2) 0;border-top:1px solid var(--line);font-size:var(--t-small);line-height:1.6}
.filmliste li b{color:var(--text)}
.filmliste li span{color:var(--text-soft)}
.film-media{margin:0}
.film-media video,.filmkachel video{width:100%;height:auto;display:block;
  border-radius:var(--radius);background:var(--ink);aspect-ratio:480/848;object-fit:cover}
.film-media figcaption,.filmkachel figcaption{margin-top:var(--s-2);font-size:var(--t-micro);
  line-height:1.6;color:var(--text-soft)}

.filmreihe-t{margin-top:var(--s-5)}
.filmreihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(233px,1fr));
  gap:var(--s-3);margin-top:var(--s-3)}
.filmkachel{margin:0}
.filmkachel figcaption{display:grid;gap:2px}
.filmkachel figcaption b{font-size:var(--t-small);color:var(--text)}
.filmkachel-marke{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--c-teal-txt);font-weight:700}

/* auf dunklen Flaechen */
.dark .filmliste li b,.stage .filmliste li b,.held .filmliste li b{color:var(--text-invert)}
.dark .filmliste li span,.dark .film-media figcaption,.dark .filmkachel figcaption,
.dark .filmkachel figcaption b{color:var(--text-invert-soft)}
.dark .filmliste li{border-top-color:var(--line-invert)}
.dark .filmkachel-marke{color:var(--c-green-lt)}

@media(max-width:900px){
  .film-split{grid-template-columns:1fr;gap:var(--s-4)}
  .film-media{max-width:380px;margin-inline:auto}
  .filmliste li{grid-template-columns:1fr;gap:2px}
}

/* ── Fassaden-Check ──────────────────────────────────────────────────────
   Eigene Klassen mit Praefix fc-, damit der Bauteilrechner (br-) unberuehrt
   bleibt. Aufteilungen nach dem goldenen Schnitt: Ergebnis 61,8 zu 38,2,
   Schnitt ebenso. */
.fcheck{margin-top:var(--s-4)}
.fc-schritt{padding:var(--s-4) 0;border-top:1px solid var(--line)}
.fc-schritt:first-child{border-top:0;padding-top:0}
.fc-nr{display:flex;align-items:baseline;gap:var(--s-2);font-size:var(--t-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-soft)}
.fc-nr i{font-style:normal;font-weight:700;font-size:var(--t-h3);line-height:1;
  color:var(--c-teal);letter-spacing:0}
.fc-schritt h3{margin-top:var(--s-2)}
.fc-hilf{margin-top:var(--s-2);font-size:var(--t-small);line-height:1.618;
  color:var(--text-soft);max-width:61.8ch}

.fc-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:var(--s-2);margin-top:var(--s-3)}
.fc-wahl--eng{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.fc-wahl--drei{grid-template-columns:repeat(auto-fit,minmax(233px,1fr))}
.fc-w,.fc-m{display:grid;gap:3px;text-align:left;padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  color:var(--text);cursor:pointer;font:inherit;
  transition:border-color .18s,box-shadow .18s,background .18s}
.fc-w b,.fc-m b{font-size:var(--t-body);line-height:1.3}
.fc-w span,.fc-m span{font-size:var(--t-micro);line-height:1.5;color:var(--text-soft)}
.fc-w:hover,.fc-m:hover{border-color:var(--c-teal)}
.fc-w:focus-visible,.fc-m:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px}
.fc-w.an,.fc-m.an{background:var(--c-blue);border-color:var(--c-blue);
  box-shadow:0 8px 21px rgba(16,40,28,.16)}
.fc-w.an b,.fc-m.an b{color:var(--text-invert)}
.fc-w.an span,.fc-m.an span{color:var(--text-invert-soft)}
.fc-frei{margin-top:var(--s-3);padding:var(--s-3);background:var(--paper-2);
  border-radius:var(--radius)}

/* Ergebnis: 61,8 Zahlen, 38,2 Diagramm */
.fc-ergebnis{display:grid;grid-template-columns:var(--phi);
  gap:var(--s-5);margin-top:var(--s-5);padding:var(--s-4);
  background:var(--ink);border-radius:var(--radius);color:var(--text-invert)}
.fc-paar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-3)}
.fc-zahl{display:grid;gap:2px}
.fc-zahl .label{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-invert-soft)}
.fc-zahl b{font-size:var(--t-h2);line-height:1;font-variant-numeric:tabular-nums}
.fc-zahl i{font-style:normal;font-size:var(--t-micro);color:var(--text-invert-soft)}
.fc-zahl--alt b{color:var(--text-invert-soft)}
.fc-zahl--neu b{color:var(--c-green-lt)}
.fc-pfeil{font-size:var(--t-h3);color:var(--c-teal-lt)}
.fc-nebenwerte{display:grid;grid-template-columns:repeat(auto-fit,minmax(144px,1fr));
  gap:var(--s-3);margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:1px solid var(--line-invert)}
.fc-nebenwerte b{display:block;font-size:var(--t-h3);line-height:1.2;
  color:var(--text-invert);font-variant-numeric:tabular-nums}
.fc-nebenwerte span{font-size:var(--t-micro);line-height:1.5;color:var(--text-invert-soft)}
.fc-praez{margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line-invert);
  font-size:var(--t-micro);line-height:1.618;color:var(--text-invert-soft)}
.fc-praez b{color:var(--text-invert)}
.fc-praez a,.fc-hilf a{color:var(--c-green-lt);border-bottom:1px solid currentColor}
.fc-diagramm h4{font-size:var(--t-small);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-invert-soft);margin:0 0 var(--s-2)}
.fc-diagramm svg{width:100%;height:auto}
.fc-bar{fill:rgba(255,255,255,.22)}
.fc-bar.an{fill:var(--c-green-lt)}
.fc-blab{font-size:11px;fill:var(--text-invert-soft)}
.fc-blab.an{fill:var(--text-invert);font-weight:700}
.fc-bwert{font-size:12px;fill:var(--text-invert-soft);font-variant-numeric:tabular-nums}
.fc-bwert.an{fill:var(--c-green-lt);font-weight:700}
.fc-bfuss{font-size:10.5px;fill:var(--text-invert-soft)}
.fc-grenze{stroke:var(--c-red-lt);stroke-width:1.2;stroke-dasharray:4 3}
.fc-grenzt{font-size:9.5px;fill:var(--c-red-lt)}
.fc-grenzliste{list-style:none;padding:0;margin:var(--s-3) 0 0;display:grid;gap:var(--s-1)}
.fc-grenzliste li{font-size:var(--t-micro);line-height:1.5;padding-left:var(--s-2);
  border-left:2px solid var(--c-red-lt)}
.fc-grenzliste b{display:block;color:var(--text-invert)}
.fc-grenzliste span{color:var(--text-invert-soft)}

/* Schnitt */
.fc-schnitt{margin-top:var(--s-5)}
.fc-schnitt h4{font-size:var(--t-h3)}
.fc-schnitt-grid{display:grid;grid-template-columns:var(--phi);
  gap:var(--s-4);align-items:start;margin-top:var(--s-3)}
.fc-schnitt svg{width:100%;height:auto;background:var(--paper-2);border-radius:var(--radius)}
.fc-snr{font-size:12px;fill:var(--text);font-weight:700}
.fc-smass{font-size:11px;fill:var(--text-soft)}
.fc-sseite{font-size:11px;fill:var(--text-soft);letter-spacing:.08em;text-transform:uppercase}
.fc-legende{display:grid;gap:var(--s-1)}
.fc-leg{display:grid;grid-template-columns:22px 1fr auto;gap:var(--s-2);align-items:baseline;
  font-size:var(--t-micro);line-height:1.5;padding:5px 0;border-bottom:1px solid var(--line)}
.fc-leg i{font-style:normal;font-weight:700;color:var(--c-teal-txt)}
.fc-leg b{font-variant-numeric:tabular-nums;color:var(--text)}
.fc-leg--duenn{background:rgba(167,201,87,.14);border-radius:5px;padding-inline:5px}
.fc-leg em{font-style:normal;font-size:10.5px;color:var(--text-soft)}
.fc-tr-sys td{background:rgba(167,201,87,.14);font-weight:600}

/* HWB */
.fc-hwb{margin-top:var(--s-5);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2)}
.fc-hwb>summary{cursor:pointer;padding:var(--s-3) var(--s-4);display:grid;gap:2px;
  list-style:none}
.fc-hwb>summary::-webkit-details-marker{display:none}
.fc-hwb>summary::after{content:"";position:absolute;right:var(--s-4);width:9px;height:9px;
  border-right:2px solid var(--c-teal);border-bottom:2px solid var(--c-teal);
  transform:translateY(6px) rotate(45deg);transition:transform .2s}
.fc-hwb[open]>summary::after{transform:translateY(10px) rotate(225deg)}
.fc-hwb>summary{position:relative;padding-right:var(--s-6)}
.fc-hwb>summary span{font-size:var(--t-micro);color:var(--text-soft)}
.fc-hwb>summary:focus-visible{outline:2px solid var(--c-teal);outline-offset:-2px}
.fc-hwb-inhalt{padding:0 var(--s-4) var(--s-4)}
.fc-hwb-ergebnis{margin-top:var(--s-3);display:grid;gap:var(--s-2)}
.fc-hwb-zeile{display:grid;grid-template-columns:38.2% 1fr;gap:var(--s-3);align-items:baseline;
  padding:var(--s-2) 0;border-top:1px solid var(--line)}
.fc-hwb-zeile b{font-size:var(--t-h3);line-height:1.2;color:var(--c-teal-txt);
  font-variant-numeric:tabular-nums}
.fc-hwb-zeile span{font-size:var(--t-small);line-height:1.6;color:var(--text-soft)}
.fc-hwb-zeile--gross b{font-size:var(--t-h2)}
.fc-formel{margin-top:var(--s-2);font-size:var(--t-micro);line-height:1.7;
  color:var(--text-soft);font-variant-numeric:tabular-nums}

/* Nachweise */
.fc-nachweise{margin-top:var(--s-5)}
.fc-pdfs{display:grid;grid-template-columns:repeat(auto-fit,minmax(233px,1fr));
  gap:var(--s-2);margin-top:var(--s-3)}
.fc-pdf{display:grid;gap:3px;padding:var(--s-3);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);text-decoration:none;
  transition:border-color .18s,transform .18s}
.fc-pdf:hover{border-color:var(--c-teal);transform:translateY(-2px)}
.fc-pdf b{color:var(--text)}
.fc-pdf span{font-size:var(--t-micro);color:var(--text-soft);font-variant-numeric:tabular-nums}
.fc-pdf i{font-style:normal;font-size:var(--t-micro);color:var(--c-teal-txt);font-weight:700}

@media(prefers-reduced-motion:reduce){
  .fc-bar,.fc-pdf,.fc-w,.fc-m{transition:none!important}
}
@media(max-width:900px){
  .fc-ergebnis,.fc-schnitt-grid{grid-template-columns:1fr;gap:var(--s-4)}
  .fc-paar{grid-template-columns:1fr;gap:var(--s-2)}
  .fc-pfeil{transform:rotate(90deg);justify-self:start}
  .fc-hwb-zeile{grid-template-columns:1fr;gap:2px}
}

/* ── Produktkacheln ──────────────────────────────────────────────────────
   Bild oben, Text im Blocksatz, Knopf unten buendig. Die Kachel ist eine
   Spalte; der Fuss wird mit margin-top:auto nach unten gedrueckt. Dadurch
   stehen die Knoepfe aller Kacheln auf einer Linie, egal wie lang der Text
   ist. Das war der Grund, warum die Reihe vorher unfertig wirkte. */
.pkacheln{display:grid;gap:var(--s-3);margin-top:var(--s-4)}
.pkacheln--3{grid-template-columns:repeat(3,1fr)}
.pkacheln--2{grid-template-columns:repeat(2,1fr)}
.pkachel{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.pkachel:hover{transform:translateY(-4px);border-color:var(--c-teal);
  box-shadow:0 21px 55px rgba(16,40,28,.13)}
.pkachel-bild{display:block;overflow:hidden;background:var(--paper-2)}
.pkachel-bild img{width:100%;aspect-ratio:1.618;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pkachel:hover .pkachel-bild img{transform:scale(1.04)}
.pkachel-text{padding:var(--s-3) var(--s-3) 0}
.pkachel-marke{font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase;
  color:var(--c-teal-txt);font-weight:700}
.pkachel h3{margin-top:var(--s-1);font-size:var(--t-h3);line-height:1.2}
.pkachel h3 a{color:var(--text);text-decoration:none}
.pkachel h3 a:hover{color:var(--c-teal-txt)}
.pkachel-text p{margin-top:var(--s-2);font-size:var(--t-small);line-height:1.7;
  color:var(--text-soft);text-align:justify;hyphens:auto}
.pkachel-wann{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--line);
  display:grid;gap:2px}
.pkachel-wann b{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--text)}
.pkachel-wann span{font-size:var(--t-small);line-height:1.6;color:var(--text-soft);
  text-align:justify;hyphens:auto}
.pkachel-fuss{margin-top:auto;padding:var(--s-3)}

/* ── Werkzeugband ────────────────────────────────────────────────────────
   Zwei breite Kacheln, Bild links auf 38,2 Prozent. */
.wkacheln{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);margin-top:var(--s-4)}
.wkachel{display:grid;grid-template-columns:38.2% 1fr;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .2s,box-shadow .2s}
.wkachel:hover{border-color:var(--c-teal);box-shadow:0 13px 34px rgba(16,40,28,.10)}
.wkachel-bild{background:var(--paper-2);min-height:178px;overflow:hidden}
.wkachel-bild img{width:100%;height:100%;min-height:178px;object-fit:cover;display:block}
.wkachel-text{padding:var(--s-3)}
.wkachel h3{font-size:var(--t-h3);line-height:1.2}
.wkachel h3 a{color:var(--text);text-decoration:none}
.wkachel h3 a:hover{color:var(--c-teal-txt)}
.wkachel p{margin-top:var(--s-2);font-size:var(--t-small);line-height:1.7;
  color:var(--text-soft);text-align:justify;hyphens:auto}
.wkachel .mehr{margin-top:var(--s-3)}
.section--sanft{background:var(--paper-2)}

/* ── Ablauf: fuenf Schritte auf einer Linie ──────────────────────────────
   Vorher brachen 4+1 um; das sah aus wie ein halbfertiges Raster. Jetzt
   eine echte Prozessleiste mit durchlaufender Linie. */
.ablauf{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-2);
  margin-top:var(--s-5);position:relative}
.ablauf::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:2px;
  background:linear-gradient(90deg,var(--c-teal-lt),var(--c-teal));opacity:.34}
.ablauf-s{position:relative;text-align:center;padding:0 var(--s-1)}
.ablauf-nr{position:relative;z-index:1;width:42px;height:42px;margin:0 auto;
  display:grid;place-items:center;border-radius:50%;background:var(--c-blue);
  color:var(--text-invert);font-size:var(--t-body);font-weight:700}
.ablauf-s b{display:block;margin-top:var(--s-2);font-size:var(--t-small);line-height:1.35}
.ablauf-s p{margin-top:5px;font-size:var(--t-micro);line-height:1.6;color:var(--text-soft)}
.dark .ablauf-s p,.stage .ablauf-s p{color:var(--text-invert-soft)}
.dark .ablauf-nr,.stage .ablauf-nr{background:var(--c-green-lt);color:var(--ink)}

/* ── Film: Hoehe begrenzen, Text plakativer ──────────────────────────── */
.film-media video{max-height:610px;width:auto;max-width:100%;margin-inline:auto}
.film-text h2{font-size:var(--t-h1);line-height:1.05;letter-spacing:-.02em}
.film-text .lead{font-size:var(--t-lead);line-height:1.55;max-width:34ch}

/* Entscheidungstabelle: erste Spalte breit genug fuer eine Zeile */
.uw-tab--frage td:first-child{width:38.2%;white-space:normal}
.uw-tab--frage td{padding-block:var(--s-2)}

@media(max-width:1000px){
  .pkacheln--3{grid-template-columns:1fr 1fr}
  .ablauf{grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
  .ablauf::before{display:none}
}
@media(max-width:760px){
  .pkacheln--3,.pkacheln--2,.wkacheln{grid-template-columns:1fr}
  .wkachel{grid-template-columns:1fr}
  .wkachel-bild,.wkachel-bild img{min-height:144px}
  .ablauf{grid-template-columns:1fr 1fr}
  .film-text h2{font-size:var(--t-h2)}
}

/* ── Seitenkopf: das Bild muss zu sehen sein ─────────────────────────────
   Vorher lag der Schleier so dicht, dass von der Aufnahme nichts uebrig
   blieb — der Kopf wirkte wie eine einfarbige Flaeche. Jetzt laeuft er
   nach dem goldenen Schnitt aus: dicht dort, wo die Schrift steht (61,8 %),
   offen dort, wo das Bild wirken darf (38,2 %). */
.phead .veil{background:linear-gradient(92deg,
   rgba(10,26,18,.90) 0%, rgba(10,26,18,.72) 38.2%,
   rgba(10,26,18,.34) 61.8%, rgba(10,26,18,.06) 100%)}
.phead .ph::after{opacity:.10}
/* ersetzt weiter unten durch eine feste Hoehe */
.phead .shell{padding-block:var(--s-6) var(--s-5)}
/* Der Kennzahlenkasten wird Glas, damit die Aufnahme dahinter durchscheint */
.phead .phead-box{background:rgba(13,32,22,.52);backdrop-filter:blur(9px) saturate(1.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  border:1px solid rgba(255,255,255,.16)}
@supports not (backdrop-filter:blur(2px)){
  .phead .phead-box{background:rgba(13,32,22,.82)}
}
@media(max-width:760px){
  .phead .veil{background:linear-gradient(180deg,rgba(10,26,18,.72) 0%,rgba(10,26,18,.90) 100%)}
}

/* ── Referenzfilter ──────────────────────────────────────────────────────
   Muster von pse-austria.at/strom-2027.html: eine Leiste aus Schaltern,
   der Inhalt darunter wechselt ohne Neuladen. */
.reffilter{margin-bottom:var(--s-4)}
.reffilter-t{font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-soft)}
.reffilter-leiste{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-2)}
.reffilter-k{display:inline-flex;align-items:center;gap:var(--s-1);
  padding:9px var(--s-3);border:1px solid var(--line);border-radius:100px;
  background:var(--paper);color:var(--text);font:inherit;font-size:var(--t-small);
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.reffilter-k i{font-style:normal;font-size:var(--t-micro);font-variant-numeric:tabular-nums;
  color:var(--text-soft);padding-left:var(--s-1);border-left:1px solid var(--line)}
.reffilter-k:hover{border-color:var(--c-teal)}
.reffilter-k:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px}
.reffilter-k.an{background:var(--c-blue);border-color:var(--c-blue);color:var(--text-invert)}
.reffilter-k.an i{color:var(--c-green-lt);border-left-color:rgba(255,255,255,.28)}
.reffilter-stand{margin-top:var(--s-2);font-size:var(--t-micro);color:var(--text-soft);
  font-variant-numeric:tabular-nums}
.refgitter figure[hidden]{display:none}
.refleer{margin-top:var(--s-4);font-size:var(--t-small);color:var(--text-soft)}
.refleer .mehr{margin-left:var(--s-2);background:none;border:0;font:inherit;cursor:pointer}
a.ref-sys{text-decoration:none}
a.ref-sys:hover{border-bottom-color:currentColor}
@media(prefers-reduced-motion:reduce){.reffilter-k{transition:none}}

/* ── Seitenkopf, Schichtung eindeutig ────────────────────────────────────
   Das Motiv ist ein <img>, kein Hintergrundbild hinter Verlaufsebenen.
   Vorher lag der Farbverlauf davor und das Bild war unsichtbar. */
.phead{position:relative;overflow:hidden;isolation:isolate}
.phead .ph-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;display:block}
.phead .veil{z-index:1;background:linear-gradient(92deg,
   rgba(10,26,18,.92) 0%, rgba(10,26,18,.74) 38.2%,
   rgba(10,26,18,.30) 61.8%, rgba(10,26,18,.04) 100%)}
.phead .shell{position:relative;z-index:2}
@media(max-width:760px){
  .phead .veil{background:linear-gradient(180deg,rgba(10,26,18,.62) 0%,
     rgba(10,26,18,.86) 55%,rgba(10,26,18,.93) 100%)}
}

/* ── Fassaden-Check, Ergänzungen ─────────────────────────────────────────
   Dämmstoffwahl, Maßkette im Schnitt, eigener U-Wert. */
.fc-wahl--zwei{grid-template-columns:repeat(2,minmax(160px,1fr));max-width:466px}
.fc-s{display:grid;gap:3px;text-align:left;padding:var(--s-2) var(--s-3);
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  color:var(--text);cursor:pointer;font:inherit;
  transition:border-color .18s,background .18s}
.fc-s b{font-size:var(--t-body)}
.fc-s span{font-size:var(--t-micro);color:var(--text-soft);font-variant-numeric:tabular-nums}
.fc-s:hover{border-color:var(--c-teal)}
.fc-s:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px}
.fc-s.an{background:var(--c-blue);border-color:var(--c-blue)}
.fc-s.an b{color:var(--text-invert)}
.fc-s.an span{color:var(--text-invert-soft)}
.fc-stoffhilf{margin-top:var(--s-2);font-size:var(--t-micro);line-height:1.618;
  color:var(--text-soft);max-width:61.8ch}
.fc-stoffhilf b{color:var(--text)}
#fcDicken{margin-top:var(--s-3)}

/* Maßkette und Bezugskante */
.fc-bezug{stroke:var(--c-red);stroke-width:1.2;stroke-dasharray:3 3}
.fc-bezugt{font-size:9.5px;fill:var(--c-red-dk);letter-spacing:.04em}
.fc-kette{stroke:var(--text-soft);stroke-width:1;fill:none}
.fc-gesamt{font-size:11px;fill:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.fc-smass{font-size:10.5px}
.fc-leg--summe{border-top:1px solid var(--text);border-bottom:0;margin-top:3px;font-weight:700}
.fc-leg--summe span{color:var(--text)}

/* Eigener U-Wert */
.fc-uwert{margin-top:var(--s-3);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2)}
.fc-uwert>summary{cursor:pointer;padding:var(--s-2) var(--s-3);display:grid;gap:2px;
  list-style:none;position:relative;padding-right:var(--s-6)}
.fc-uwert>summary::-webkit-details-marker{display:none}
.fc-uwert>summary::after{content:"";position:absolute;right:var(--s-3);top:20px;
  width:8px;height:8px;border-right:2px solid var(--c-teal);border-bottom:2px solid var(--c-teal);
  transform:rotate(45deg);transition:transform .2s}
.fc-uwert[open]>summary::after{transform:rotate(225deg);top:24px}
.fc-uwert>summary span{font-size:var(--t-micro);color:var(--text-soft)}
.fc-uwert>summary:focus-visible{outline:2px solid var(--c-teal);outline-offset:-2px}
.fc-uwert-inhalt{padding:0 var(--s-3) var(--s-3)}
/* Solange ein eigener U-Wert gilt, tritt die Aufbauwahl sichtbar zurueck */
.fc-uaktiv #fcDicken,.fc-uaktiv .fc-wahl--zwei,.fc-uaktiv .fc-stoffhilf{opacity:.42}
.fc-uaktiv #fcDicken::after{content:"";position:absolute;inset:0}


/* ── Kopfhöhe: auf jeder Seite gleich ────────────────────────────────────
   Vorher richtete sich die Höhe nach der Textlänge — beim Seitenwechsel
   sprang die Unterkante. Jetzt hat jeder Kopf dieselbe Höhe, der Inhalt
   sitzt unten bündig. */
/* ── Höhenlage im Seitenkopf ─────────────────────────────────────────────
   Der Inhalt stand unten und ließ darüber eine leere Bildfläche stehen.
   Zwei Möglichkeiten: goldener Schnitt (Blockmitte auf 38,2 % der Höhe)
   oder mittig. Gewählt ist mittig mit einem optischen Ausgleich von 3 %
   nach oben — aus einem praktischen Grund: die Texte sind je Seite
   unterschiedlich lang. Ein fester φ-Versatz sitzt bei kurzem Text gut und
   stößt bei langem unten an; die Mitte stimmt immer. Der Ausgleich nach
   oben ist die alte Setzerregel, wonach die optische Mitte etwas über der
   geometrischen liegt — genau dort, wo φ ohnehin hinzeigt. */
.phead{min-height:clamp(430px,45vw,548px);height:clamp(430px,45vw,548px);
  display:flex;align-items:center}
.phead .shell{width:100%;padding-block:var(--s-4);transform:translateY(-3%)}
@media(max-width:900px){
  .phead .shell{transform:none;padding-block:var(--s-5)}
}
@media(max-width:900px){
  .phead{height:auto;min-height:clamp(360px,62vw,430px)}
}
.fc-smass--eng{font-size:9.5px}
.fc-fahne{stroke:var(--text-soft);stroke-width:.8;fill:none}

/* Gesperrte Systemschichten im Bauteilrechner: die Dicke gehört zur
   Leistungserklärung und ist nicht Sache des Anwenders. */
.br-d--fix{background:var(--paper-2);color:var(--text-soft);cursor:not-allowed;
  border-style:dashed}
.br-schloss{margin-left:5px;font-size:9px;color:var(--c-teal);vertical-align:middle}


/* Das Vergleichsdiagramm stand in der schmalen Spalte und war dadurch klein
   geschrieben. Engerer viewBox plus groessere Schriftgrade — dieselbe
   Flaeche, lesbare Beschriftung. */
.fc-diagramm .fc-blab{font-size:12.5px}
.fc-diagramm .fc-bwert{font-size:13px;font-weight:700}
.fc-diagramm .fc-bfuss{font-size:10px}
.fc-diagramm .fc-grenzt{font-size:10px}
.fc-diagramm h4{font-size:var(--t-small);letter-spacing:.1em}
.fc-grenzliste li{font-size:12px;line-height:1.55}
.fc-grenzliste b{font-size:12.5px}

/* Quicklinks auf die Werkzeuge, in der obersten Leiste neben den Zielgruppen */
.topbar-werkzeug{display:inline-flex;gap:var(--s-3);margin-left:auto;padding-right:var(--s-3);
  border-right:1px solid var(--line-invert)}
.topbar-werkzeug a{font-weight:600;letter-spacing:.02em}
@media(max-width:1100px){.topbar-werkzeug{display:none}}

/* ── Langzeitreihe: senkrechte Achse ─────────────────────────────────────
   Ohne Bezugsgrößen war die Höhe der Säulen nicht lesbar. Jetzt liegen vier
   Hilfslinien im Raster, beschriftet in Kubikmetern. Die Linien liegen
   hinter den Säulen und nehmen ihnen nichts weg. */
.jahre-flaeche{position:relative}
.jahre-achse{position:absolute;inset:0 0 0 0;pointer-events:none;z-index:0}
.jahre-achse i{position:absolute;left:0;right:0;height:1px;
  background:rgba(255,255,255,.13)}
/* Achsenwerte nach rechts.

   Links sassen sie unmittelbar ueber der ersten Saeule und wurden von ihr
   verdeckt, sobald sie hochwuchs — ausgerechnet 2005, der Ausgangswert,
   auf den sich die ganze Reihe bezieht. Rechts steht nach der letzten
   Saeule Platz zur Verfuegung. */
.jahre-flaeche{padding-right:78px}
/* Die Linien enden vor dem Rand, damit die Beschriftung im Innenraum steht.
   Mit right:-60px lag sie ausserhalb der Sektion und wurde abgeschnitten —
   aus "4.000 m3" wurde "4.0". */
.jahre-achse{inset:0 78px 0 0}
.jahre-achse i::after{content:attr(data-v);position:absolute;right:-74px;top:-8px;
  font-size:11px;font-variant-numeric:tabular-nums;color:var(--text-invert-soft);
  padding-left:10px;white-space:nowrap;text-align:left}
.jahre-gitter{position:relative;z-index:1}
.jahre-einheit{margin-top:var(--s-3);font-size:11px;color:var(--text-invert-soft);
  letter-spacing:.06em;text-transform:uppercase}


/* ── Objektkarte der Feldstudie ──────────────────────────────────────────
   Die Aufnahme stammt vom Telefon und wurde vorher über die volle Spalten-
   breite gezogen — dabei fiel jedes Korn auf. Kleiner dargestellt trägt sie
   besser, und der Textblock daneben rückt zusammen. */
.lz-kopf .split-media,.dl--gruen{max-width:466px;margin-left:auto}
.dl--gruen img{aspect-ratio:1.618;object-fit:cover;object-position:center 62%}
.dl--gruen figcaption{padding:var(--s-3)}
.dl--gruen figcaption b{font-size:var(--t-h3);line-height:1.2;display:block;
  margin-top:var(--s-1)}
.dl--gruen figcaption p{margin-top:var(--s-2);font-size:var(--t-small);line-height:1.6}
/* Der Textblock links stand in zwei weit auseinanderliegenden Absätzen —
   die Lücke entstand, weil die Bildspalte höher war als der Text. */
.section.dark .split{align-items:start}
.section.dark .split-text p+p{margin-top:var(--s-3)}

/* ── Kopfleiste: entweder eine Zeile, oder zwei bewusste ─────────────────
   Vorher lief die Leiste als flex-wrap um, sobald der Platz knapp wurde —
   die Zielgruppen blieben oben hängen, Werkzeuge und Telefon rutschten in
   die zweite Zeile. Das sah nach Unfall aus, nicht nach Gestaltung.
   Jetzt gibt es genau zwei Zustände. */
.topbar .shell{display:grid;align-items:center;
  grid-template-columns:auto 1fr auto auto;
  grid-template-areas:"claim zg werkzeug tel";
  gap:var(--s-2) var(--s-4);padding:9px var(--s-4)}
.topbar-txt{grid-area:claim}
.topbar-zg{grid-area:zg;display:flex;gap:var(--s-3);margin-right:0;flex-wrap:nowrap}
.topbar-werkzeug{grid-area:werkzeug;margin-left:0}
.topbar-links{grid-area:tel}

/* Nichts darf innerhalb seiner Spalte umbrechen — sonst entsteht genau der
   Klotz, den man vermeiden will: drei gestapelte Zielgruppen neben einer
   einzeiligen Schrift. Entweder passt alles in eine Zeile, oder die Leiste
   wird bewusst zweizeilig. */
.topbar-zg,.topbar-werkzeug,.topbar-links{flex-wrap:nowrap}
.topbar-txt{white-space:nowrap}

@media(max-width:1600px){
  /* Zeile 1: wer wir sind, die Werkzeuge, der Kontakt.
     Zeile 2: die vier Zielgruppen als eigene Ebene, unter der grünen Schrift. */
  .topbar .shell{grid-template-columns:1fr auto auto;
    grid-template-areas:"claim werkzeug tel" "zg zg zg";
    padding-block:8px;row-gap:0}
  .topbar-zg{border-top:1px solid var(--line-invert);padding-top:8px;margin-top:7px;
    gap:var(--s-4)}
  .topbar-werkzeug{border-right:1px solid var(--line-invert)}
}
@media(max-width:1180px){
  .topbar-txt{display:none}
  .topbar .shell{grid-template-columns:1fr auto;
    grid-template-areas:"werkzeug tel" "zg zg"}
  .topbar-werkzeug{margin-right:auto;border-right:0;padding-right:0}
}
@media(max-width:820px){
  .topbar-werkzeug{display:none}
  .topbar .shell{grid-template-columns:1fr auto;
    grid-template-areas:"zg tel";row-gap:0}
  .topbar-zg{border-top:0;padding-top:0;margin-top:0;gap:var(--s-3);
    overflow-x:auto;scrollbar-width:none}
  .topbar-zg::-webkit-scrollbar{display:none}
}


/* ── Ein Raster für alle Blöcke ──────────────────────────────────────────
   Jeder direkte Block eines Werkzeugs sitzt auf derselben linken und
   rechten Kante. Ohne diese Regel bringt jede Kachel ihre eigene Breite
   mit, und die Blöcke springen gegeneinander. */
.brechner > *,.fcheck > *{width:100%;box-sizing:border-box;margin-inline:0}
.brechner{display:grid;gap:var(--s-4)}
.brechner > *{margin-top:0!important;margin-bottom:0!important}
/* Der Fassaden-Check bringt seine Abstaende in den Schritten selbst mit,
   dort waere ein zusaetzliches Raster doppelt. */
.fcheck{display:block}
.brechner{margin-top:var(--s-4)}
.br-steuer,.br-schichten,.br-bild,.br-werte,.br-feuchte,.br-verlauf,
.fc-ergebnis,.pkachel,.wkachel{box-sizing:border-box}

/* Systemknöpfe im Bauteilrechner */
.br-systeme{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);
  margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--line)}
.br-systeme-t{font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-soft);width:100%}
.br-sys{padding:8px var(--s-3);border:1px solid var(--c-teal);border-radius:100px;
  background:var(--paper);color:var(--c-teal-txt);font:inherit;font-size:var(--t-small);
  font-weight:600;cursor:pointer;transition:background .18s,color .18s}
.br-sys:hover{background:rgba(167,201,87,.18)}
.br-sys:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px}
.br-sys.an{background:var(--c-teal);border-color:var(--c-teal);color:var(--text-invert)}
.br-kopf-knoepfe{display:flex;gap:var(--s-2);align-items:center}
.br-dreh{padding:6px var(--s-2);border:1px solid var(--line);border-radius:100px;
  background:var(--paper);color:var(--text-soft);font:inherit;font-size:var(--t-micro);
  cursor:pointer;white-space:nowrap}
.br-dreh:hover{border-color:var(--c-teal);color:var(--c-teal-txt)}
.br-dreh:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px}

/* ── Ausführungsvorbehalt ────────────────────────────────────────────────
   Muss auffallen, ohne wie eine Warnung zu wirken — es ist die Bedingung,
   unter der die Zahlen daneben gelten. */
.ausfuehrung{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);
  border-left:4px solid var(--c-teal);border-radius:0 var(--radius) var(--radius) 0;
  background:rgba(167,201,87,.13);font-size:var(--t-small);line-height:1.7;
  color:var(--text)}
.ausfuehrung b{color:var(--text)}
.dark .ausfuehrung,.stage .ausfuehrung,.fc-ergebnis .ausfuehrung{
  background:rgba(167,201,87,.10);border-left-color:var(--c-green-lt);
  color:var(--text-invert-soft)}
.dark .ausfuehrung b,.stage .ausfuehrung b,.fc-ergebnis .ausfuehrung b{color:var(--text-invert)}
.fc-ergebnis .ausfuehrung{grid-column:1/-1;margin-top:var(--s-3)}
.br-sys-lage{font-style:normal;margin-left:6px;opacity:.7;font-size:13px}


/* ── Titelzeile: die Erklärung sitzt auf der Grundlinie ──────────────────
   Vorher stand der kurze Text oben in der schmalen Spalte und schwebte
   neben einer dreizeiligen Überschrift — er wirkte verloren. Jetzt liegt
   er auf der letzten Zeile der Überschrift auf, wie eine Bildunterschrift
   zur Schlagzeile. */
.titelzeile{align-items:start}
.titelzeile > p{font-size:var(--t-body);line-height:1.618;max-width:38ch;
  padding-bottom:6px}

/* ── Grundregel für Fließtext ────────────────────────────────────────────
   Text läuft über die volle Breite der Spalte, in der er steht. Eine
   Zeilenlänge wird nur dort begrenzt, wo daneben nichts steht — dann sorgt
   --measure für Lesbarkeit. Was nicht passieren darf: ein Absatz, der auf
   halber Breite endet, obwohl rechts nichts kommt. */
/* zurueckgenommen — siehe Regel unten */
.split-text > p,.split-text > .lead{max-width:none}
.fc-schritt > p,.fc-hilf{max-width:none}
.fc-hilf{max-width:74ch}

/* ── Formularfelder ──────────────────────────────────────────────────────
   Eingabefelder gehören gleich breit. Der goldene Schnitt ordnet Inhalte
   nach Gewicht — ein Zahlenfeld hat gegenüber einem anderen Zahlenfeld
   aber kein Gewicht. Zwei Felder im Verhältnis 61,8 zu 38,2 sehen aus wie
   ein Versehen, und genau das waren sie. */
.fields{grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:var(--s-3);
  margin-top:var(--s-3)}
.field{min-width:0}

/* ── HWB-Block: Werkzeug statt Formular ──────────────────────────────────
   Erklärung über die volle Breite, Eingaben kompakt in einer Reihe,
   Ergebnis als eigene Fläche mit der Zahl als Hauptdarsteller. */
.fc-hwb-inhalt{padding:var(--s-4)}
.fc-hwb-inhalt > .fc-hilf{max-width:74ch;margin-bottom:var(--s-4)}
.fc-hwb-inhalt .fields{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-2) var(--s-3);margin-top:var(--s-2)}
.fc-hwb-inhalt .field label{font-size:var(--t-micro);line-height:1.35;
  display:block;min-height:2.7em}
.fc-hwb-ergebnis{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);
  background:var(--ink);border-radius:var(--radius);color:var(--text-invert-soft)}
.fc-hwb-ergebnis:empty{display:none}
.fc-hwb-zeile{grid-template-columns:minmax(0,auto) minmax(0,1fr);
  align-items:baseline;gap:var(--s-3);padding:var(--s-2) 0;
  border-top:1px solid var(--line-invert)}
.fc-hwb-zeile:first-child{border-top:0;padding-top:0}
.fc-hwb-zeile b{color:var(--c-green-lt);white-space:nowrap;
  font-size:var(--t-h3);line-height:1.1}
.fc-hwb-zeile--gross b{font-size:var(--t-h2)}
.fc-hwb-zeile span{color:var(--text-invert-soft);font-size:var(--t-small)}
.fc-hwb-ergebnis .fc-hilf{color:var(--text-invert-soft);margin-top:var(--s-2)}
.fc-formel{color:var(--text-invert-soft);border-top:1px solid var(--line-invert);
  padding-top:var(--s-2);margin-top:var(--s-3)}

/* ── Merkkacheln in dunklen Abschnitten ──────────────────────────────────
   Die Ursache für die weiße Schrift auf heller Kachel: `.dark` gab der
   Kachel eine dunkle Fläche, `.stage` nicht — die Schrift wurde aber in
   beiden Fällen invertiert. Statt die Schrift zurückzudrehen, bekommt die
   Kachel in beiden Abschnittsarten dieselbe dunkle Fläche. Das ist auch
   gestalterisch richtig: in einem dunklen Abschnitt gehören dunkle Kacheln. */
.stage .benefit{border-color:var(--line-invert);
  background:linear-gradient(157deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 38.2%,rgba(255,255,255,0) 100%),var(--ink-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.stage .benefit b{color:var(--text-invert)}
.stage .benefit span,.dark .benefit span{color:var(--text-invert-soft)}

/* Alle Texte beginnen auf derselben Höhe: die Überschrift bekommt zwei
   Zeilen Raum, egal ob sie eine oder zwei braucht. */
.benefits{align-items:stretch}
.benefit{display:grid;grid-template-rows:auto 1fr;gap:var(--s-2)}
.benefit b{display:block;line-height:1.3;min-height:2.6em}
@media(max-width:760px){.benefit b{min-height:0}}


/* ════════════════════════════════════════════════════════════════════════
   Befunde aus der Live-Kontrolle am Entwurf, 20.08.2026
   ════════════════════════════════════════════════════════════════════════ */

/* 1 · Die Marke am Heldenbild war braun — die Zweitfarbe aus der PSE-Palette.
   Neben dem Grün wirkt sie wie ein Fremdkörper. Sie bekommt den dunklen
   Grundton mit grüner Kante: ruhiger, und die Zahl trägt selbst. */
.held-marke{background:linear-gradient(157deg,#16331F 0%,#10281C 100%)!important;
  border:1px solid rgba(167,201,87,.34);
  box-shadow:0 21px 55px rgba(0,0,0,.34)}
.held-marke b{color:var(--c-green-lt)}
.held-marke span{color:var(--text-invert-soft)}
.held-marke b i{color:var(--text-invert-soft)}

/* 2 · Unter „Produkte" und „Für wen?" standen zwei kurze Striche, dauerhaft
   sichtbar. Sie gehören zum Aufklappzustand und dürfen nur erscheinen, wenn
   das Menü offen ist oder die Maus darauf steht. */
.navgruppe > summary::after{opacity:0;transition:opacity .18s}
.navgruppe[open] > summary::after,
.navgruppe > summary:hover::after,
.navgruppe > summary:focus-visible::after{opacity:1}

/* 3 · Die sechs Kacheln endeten auf verschiedenen Höhen, weil die Texte
   verschieden lang sind. Als Raster mit gleich hohen Zeilen stehen sie auf
   einer Linie — und der Verweis unten sitzt bei allen gleich. */
.kachelband{align-items:stretch}
.kachel{height:100%}
.kachel h3{min-height:2.6em;line-height:1.3}
.kachel p{flex:1 1 auto}
.kachel .mehr{margin-top:var(--s-3)}
@media(max-width:760px){.kachel h3{min-height:0}}

/* 4 · Der Nachsatz unter dem Kachelband stand klein und schmal in der Ecke.
   Er gehört auf Textbreite, wie jeder andere Fließtext. */
.kachelband + p,.kachelband + .disclaim{max-width:var(--measure);
  font-size:var(--t-small);line-height:1.7;margin-top:var(--s-4)}

/* ── Burger-Menü: auch die Aufklappmenüs verschwinden ────────────────────
   Die alte Regel `.nav > a:not(.btn){display:none}` stammt aus der Zeit, als
   die Navigation nur aus Links bestand. „Produkte" und „Für wen?" sind seit
   dem Umbau <details> — sie standen deshalb im Burger-Modus weiter da,
   überlappten den Knopf und ergaben auf dem Telefon „Für Produkte∨ wen?∨".
   Jetzt verschwindet alles ausser dem Knopf, und im offenen Menü kommt
   alles wieder. */
@media(max-width:1299px){
  .nav > details.navgruppe{display:none}
  .nav.open > details.navgruppe{display:block;width:100%}
  .nav.open .navgruppe-p{position:static;box-shadow:none;border:0;
    padding:var(--s-2) 0 var(--s-2) var(--s-3);background:transparent;
    min-width:0;width:100%}
  .nav.open .navgruppe > summary{padding:var(--s-2) 0;font-size:var(--t-body)}
  .nav.open .navgruppe-p a{padding:9px 0}
}


/* ════════════════════════════════════════════════════════════════════════
   Textbreite — die Hausregel, nicht das Lehrbuch
   ════════════════════════════════════════════════════════════════════════
   Vorgabe: Text läuft über die volle Breite, ausser rechts steht eine Kachel
   oder ein Bild. Der goldene Schnitt ordnet die Flächen, nicht die Zeile.

   Ich hatte stattdessen 72 Zeichen gesetzt — die typografische Faustregel
   für Lesbarkeit. Das war falsch: die Hausregel ist die Vorgabe, und bei
   1180 px Satzspiegel bleibt die Zeile mit knapp 100 Zeichen lesbar, wenn
   Zeilenabstand und Schriftgrad stimmen. Beides ist hier angepasst.

   Begrenzt bleibt die Zeile nur dort, wo sie in einer schmalen Spalte steht
   — im Seitenkopf neben dem Kennzahlenkasten, in Kacheln, in Karten. Dort
   ist die Spalte die Grenze, nicht eine Zeichenzahl. */
.section > .shell > p,
.section > .shell > .lead,
.section > .shell > .disclaim,
.split-text > p,.split-text > .lead,
.kachelband + p,.kachelband + .disclaim,
.fc-schritt > p,.fc-hilf,
.film-text .lead{max-width:none}

/* Damit lange Zeilen trotzdem gut lesbar bleiben: etwas mehr Durchschuss. */
.section > .shell > p,
.section > .shell > .lead{line-height:1.75}
.section > .shell > .lead{font-size:var(--t-lead)}

/* Ausnahmen: schmale Spalten begrenzen sich selbst. */
.phead p,.card p,.kachel p,.benefit span,.pkachel-text p,.wkachel p{max-width:none}

/* ── Sprungnavigation für lange Seiten ───────────────────────────────────
   Die Leitproduktseite ist ein langer Einseiter. Eine klebende Leiste unter
   dem Kopf gliedert sie, ohne den Lesefluss zu zerschneiden. */
.sprung{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.94);
  backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.sprung .shell{display:flex;gap:var(--s-4);padding:11px var(--s-4);
  overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.sprung .shell::-webkit-scrollbar{display:none}
.sprung a{font-size:var(--t-small);font-weight:600;color:var(--text-soft);
  padding-bottom:3px;border-bottom:2px solid transparent}
.sprung a:hover{color:var(--c-teal-txt);border-bottom-color:var(--c-teal)}
@media(max-width:760px){.sprung .shell{gap:var(--s-3);padding:9px var(--s-3)}}

/* ── Befunde aus der Live-Kontrolle, zweite Runde ────────────────────────
   1 · Die Striche unter „Produkte" und „Für wen?" waren kein ::after,
   sondern der border-bottom, den <details> aus der FAQ-Regel geerbt hat.
   Deshalb griff die Korrektur an der falschen Stelle. */
.nav details.navgruppe{border:0;border-bottom:0;background:none}

/* 2 · Der Chevron war braun (#9A6334) — Zweitfarbe im grünen Kopf. */
.navgruppe > summary::after{border-color:var(--c-teal)!important}
.navgruppe[open] > summary::after,
.navgruppe > summary:hover::after{border-color:var(--c-green)!important}

/* 3 · Das Wasserzeichen stand mit voller Deckung hinter der Überschrift und
   erschlug sie. Es soll die Fläche beleben, nicht mitlesen. */
.wasserzeichen{opacity:.05!important;font-size:clamp(64px,11vw,148px)!important;
  letter-spacing:-.04em}
.dark .wasserzeichen,.stage .wasserzeichen{opacity:.07!important}

/* 4 · Kopfleiste: in der zweizeiligen Form standen die Zielgruppen links
   geklumpt, rechts blieb die halbe Zeile leer. Jetzt verteilen sie sich
   über die volle Breite — die Zeile wirkt gesetzt statt übrig. */
@media(max-width:1600px){
  .topbar-zg{display:flex;justify-content:space-between;width:100%;gap:var(--s-3)}
}
@media(max-width:820px){
  .topbar-zg{justify-content:flex-start;gap:var(--s-3)}
}

/* ════════════════════════════════════════════════════════════════════════
   Befunde der Messung über alle Seiten in drei Breiten, 20.08.2026
   Gemessen wurden: Überlauf, Überlappung, Klickflächengröße, Bildbeschnitt.
   ════════════════════════════════════════════════════════════════════════ */

/* 1 · 374 Überläufe auf 390 px. Logo, Navigation, Burger und Knopf brauchten
   zusammen mehr Platz als das Telefon hat. Die Kopfzeile wird kompakt. */
@media(max-width:520px){
  .header .shell{padding:8px var(--s-3);gap:var(--s-2)}
  .logo-img{width:38px;height:38px}
  .claim .wort{font-size:15px;letter-spacing:-.01em}
  .claim em{font-size:9px;letter-spacing:.09em}
  .nav .btn--sm{padding:8px 11px;font-size:12px;white-space:nowrap}
  .burger{margin-left:7px;padding:7px 9px}
  /* Nichts darf breiter werden als sein Platz */
  .header .shell > *{min-width:0}
  .logo{overflow:hidden}
}
@media(max-width:400px){
  .claim em{display:none}          /* der Zusatz tritt zurück, das Logo bleibt */
  .nav .btn--sm{padding:8px 9px;font-size:11.5px}
}
/* Grundsätzlich: keine Seite scrollt waagrecht. */
html,body{max-width:100%}
main,.shell,.section{max-width:100%}

/* 2 · Klickflächen. Gemessen 17 bis 27 px; 24 px ist das Mindestmaß nach
   WCAG 2.2, auf dem Telefon sind 44 px die Regel. Textlinks bekommen Höhe
   über Innenabstand, nicht über Schriftgröße — die Optik bleibt. */
main a,.footer a,.crumb a{min-height:24px;display:inline-flex;align-items:center}
.mehr,.ref-sys,.fc-pdf,.reffilter-k,.br-sys{min-height:32px}
@media(max-width:900px){
  main a,.footer a{min-height:34px}
  .navgruppe-p a,.topbar-zg a,.topbar-werkzeug a{min-height:40px;
    display:inline-flex;align-items:center}
  .footer ul li{margin-block:2px}
}
/* Ausnahme: Links mitten im Fließtext dürfen die Zeile nicht auseinander
   ziehen — dort zählt der umgebende Text als Trefferfläche. */
main p a,main span a,.disclaim a,.ausfuehrung a,.fc-praez a{min-height:0;display:inline}

/* 3 · Bilder in Kacheln wurden auf dem Telefon hochkant gequetscht
   (Datei 2,03 zu Anzeige 0,38). Das Seitenverhältnis bleibt jetzt erhalten. */
@media(max-width:760px){
  .pkachel-bild img,.wkachel-bild img{aspect-ratio:16/9;height:auto;min-height:0}
  .wkachel-bild{min-height:0}
}

/* 4 · Überlappende Textblöcke auf der Leitproduktseite: die Absätze in
   .dl-Blöcken hatten feste Höhen aus der Zeit, als dort nur zwei Zeilen
   standen. */
.dl figcaption,.dl figcaption p{height:auto;min-height:0;overflow:visible}
.dl figcaption b{display:block;margin-bottom:5px}

/* Merkmale je System — Aufklappliste auf dunklem Grund (Leitprodukt).

   Zwei Spalten als CSS-Spalten, nicht als Grid: im Grid zwingt der geoeffnete
   Block seinen Nachbarn auf dieselbe Zeilenhoehe, und daneben steht ein Loch
   von rund 280 px. Mit columns rutschen die Bloecke nach.
   Reihenfolge dadurch spaltenweise (1-4 links, 5-8 rechts) — bei acht
   gleichrangigen Systemen ist das die richtige Abwaegung.

   Kein Verhaeltnis 61,8/38,2 hier: die acht Systeme sind gleichrangig, ein
   Goldener Schnitt haette keine Aussage. Er steckt stattdessen im Innenabstand
   (var(--s-4) zu var(--s-3) = 1,618) und in der Zeilenhoehe. */
.faq--merk{columns:1;column-gap:var(--s-4)}
@media(min-width:860px){.faq--merk{columns:2}}
.faq--merk > details{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin:0 0 var(--s-2);display:block;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-2);
  background:rgba(255,255,255,.05);overflow:hidden}
.faq--merk > details[open]{background:rgba(255,255,255,.085);
  border-color:rgba(255,255,255,.24)}
.faq--merk summary{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;
  padding:var(--s-3) var(--s-4);cursor:pointer;color:#fff;list-style:none;
  border-bottom:0;font-size:1rem;line-height:1.4}
.faq--merk summary::-webkit-details-marker{display:none}
.faq--merk summary:hover{background:rgba(255,255,255,.05)}
.faq--merk summary::after{content:"+";margin-left:auto;font-weight:400;
  font-size:1.3rem;line-height:1;opacity:.62}
.faq--merk details[open] summary::after{content:"\2013"}
.faq--merk summary em{font-style:normal;font-size:.86rem;opacity:.66;letter-spacing:.01em}
/* Inhalt ohne eigenen Kasten — er gehoert zum Block, nicht daneben.
   Der gruene Strich links laeuft bis zur Unterkante durch. */
.faq--merk ul.merk{margin:0;list-style:none;
  padding:0 var(--s-4) var(--s-4) calc(var(--s-4) + 14px);
  color:rgba(255,255,255,.87);line-height:1.62;font-size:.94rem;
  border-left:2px solid var(--gruen-hell);
  margin-left:var(--s-4);padding-left:var(--s-3)}
.faq--merk ul.merk li{margin:.4em 0;padding-left:0;position:relative}
.faq--merk ul.merk li::before{content:"";position:absolute;left:-13px;top:.62em;
  width:4px;height:4px;border-radius:50%;background:var(--gruen-hell);opacity:.75}

/* ------------------------------------------------------------------ Handy --
   Befund aus der Messung am 20.08.2026, 390 px:
   Logo 283 + Burger 36 + Innenabstand 68 = 387 px. Bei 375 px Geraetebreite
   (iPhone SE, 12/13 mini) laeuft der Burger aus dem Bild und wird von
   body{overflow-x:clip} abgeschnitten — das Menue war dort nicht zu oeffnen.
   Deshalb: Innenabstand kleiner, Logo darf schrumpfen, Burger nie. */
@media(max-width:719px){
  .header .shell{padding-left:var(--s-3);padding-right:var(--s-3);gap:var(--s-2)}
  .header .logo{min-width:0;flex:1 1 auto;overflow:hidden}
  .header .logo .claim em{display:none}          /* Zeile "Building Performance Systems" */
  .header .logo .claim .wort{font-size:clamp(.95rem,4.4vw,1.15rem);white-space:nowrap}
  .header .logo-img{height:30px;flex:0 0 auto}
  .burger{flex:0 0 auto;margin-left:auto}
  .topbar-zg{display:none}   /* Zielgruppen stehen im Burger; hier nur halb sichtbar */

  /* Bauteilrechner: Kopfknoepfe brachen nach rechts aus (bis 414 px) */
  .br-kopf{flex-wrap:wrap;gap:var(--s-2)}
  .br-kopf-knoepfe{flex-wrap:wrap;width:100%;margin-left:0}
  .br-kopf-knoepfe .btn{flex:1 1 auto;justify-content:center}

  /* Jahresmarken auf der Startseite ragten bis 428 px */
  .jm{max-width:100%;white-space:normal}
}

/* Fingerziele am Handy. Gemessen am 20.08.2026: Burger 36 px, "Projekt
   starten" 34 px — beide unter den 44 px, die eine Fingerkuppe zuverlaessig
   trifft. Auf dem Desktop bleibt es kompakt. */
@media(max-width:719px){
  .burger{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .nav .btn--sm{min-height:44px;padding-top:0;padding-bottom:0;
    display:inline-flex;align-items:center}
  .nav a{min-height:44px;display:flex;align-items:center}
}

/* ═══ Leere Bereiche und auseinandergezogene Leisten ═══════════════════════
   Befunde aus der Breitenmessung vom 20.08.2026 (760 bis 1440 px).
   Gemeinsame Ursache: ein Raster mit fester Spaltenzahl laesst die letzte
   Zeile unterbesetzt (3+1), und eine Leiste mit space-between zieht ihre
   Punkte auf die volle Breite auseinander. Beides erzeugt Loecher, die wie
   ein Versehen aussehen. */

/* 1 — Vier Kacheln gehoeren in eine Reihe, nie 3+1.
   :has() zaehlt die Kinder: "viertes Kind ist zugleich das letzte" trifft
   genau bei vier. Darunter 2x2 — auch das ist geschlossen, nur zweizeilig. */
.benefits:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.benefits:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
@media(max-width:1180px){
  .benefits:has(> :nth-child(4):last-child),
  .benefits:has(> :nth-child(5):last-child){grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .benefits:has(> :nth-child(4):last-child),
  .benefits:has(> :nth-child(5):last-child){grid-template-columns:1fr}
}
/* Rueckfall fuer Browser ohne :has(): auto-fit fuellt die Zeile ebenfalls,
   nur ohne Garantie auf genau vier Spalten. */
@supports not selector(:has(*)){
  .benefits{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
}

/* 2 — Legende und Filmreihe nach derselben Regel. Fuenf Filme werden 3+2,
   nicht 4+1: eine einzelne Kachel am Ende einer Reihe wirkt vergessen. */
.jahre-legende:has(> :nth-child(4):last-child){display:grid;grid-template-columns:repeat(4,auto);
  justify-content:start;gap:var(--s-3) var(--s-4)}
.filmreihe:has(> :nth-child(5):last-child){grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.filmreihe:has(> :nth-child(5):last-child){grid-template-columns:repeat(2,1fr)}}

/* 3 — Zielgruppen bleiben beisammen, linksbuendig.
   space-between verteilte die vier Punkte ueber die ganze Leiste; bei
   Zwischenbreiten standen sie dann weit auseinander und die Zuordnung zur
   gruenen Zeile darueber ging verloren. */
.topbar-zg{justify-content:flex-start !important;width:auto !important}
@media(max-width:1600px) and (min-width:821px){
  .topbar .shell{grid-template-areas:"claim werkzeug tel" "zg zg zg"}
  .topbar-zg{justify-content:flex-start;gap:var(--s-4)}
}

/* 4 — Werkzeugkacheln: der Text bestimmt die Hoehe, nicht das Bild.
   Die Motive sind hochformatig (900x1450). Mit height:100% setzte das Bild
   seine eigene Hoehe durch — bei 280 px Spaltenbreite sind das 451 px, und
   der Text daneben endete nach der Haelfte. Absolut gesetzt fuellt das Bild
   nur noch den Raum, den der Text vorgibt.
   Spalten im Verhaeltnis 38,2 zu 61,8: das Bild ist die Beigabe, der Text
   die Aussage. */
.wkachel{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr)}
.wkachel-bild{position:relative;min-height:0;height:100%}
.wkachel-bild img{position:absolute;inset:0;width:100%;height:100%;
  min-height:0;object-fit:cover}
.wkachel-text{padding:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.wkachel-text > :last-child{margin-top:auto}
@media(max-width:860px){
  .wkachel{grid-template-columns:1fr}
  .wkachel-bild{aspect-ratio:16/9;height:auto}
}

/* Restliche Loecher aus der Breitenmessung — dieselbe Regel wie oben:
   keine unterbesetzte letzte Zeile. Gezaehlt wird ueber :has(), damit die
   Spaltenzahl der tatsaechlichen Anzahl folgt und nicht geraten wird. */

/* Fassaden-Check: fuenf Nebenwerte standen 4+1, sechs Wahlknoepfe 5+1. */
.fc-nebenwerte:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
.fc-wahl:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
.fc-wahl:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
@media(max-width:1180px){
  .fc-nebenwerte:has(> :nth-child(5):last-child){grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  .fc-nebenwerte:has(> :nth-child(5):last-child){grid-template-columns:repeat(2,1fr)}
  .fc-wahl:has(> :nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}
}

/* "Wie es weitergeht": vier Wege standen 3+1. */
.next:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.next:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.next:has(> :nth-child(4):last-child){grid-template-columns:1fr}}

/* Eingabezeilen des Bauteilrechners brachen bei 1180 px mitten im Feld um.

   Ursache war nicht die Spaltenzahl, sondern 1fr: eine 1fr-Spalte schrumpft
   nie unter die Mindestbreite ihres Inhalts. Das Auswahlfeld mit den langen
   Baustoffnamen setzte diese Mindestbreite durch, die Zeile wurde breiter als
   ihre Spalte und brach um. minmax(0,1fr) erlaubt das Schrumpfen, das Feld
   kuerzt den Text stattdessen mit Auslassungspunkten.

   Ein erster Versuch, stattdessen die Spaltenzahl zu reduzieren, hat es
   verschlimmert (3+1+1+1 statt 4+2) — deshalb steht hier die Ursache. */
.br-zeile{grid-template-columns:22px 13px minmax(0,1fr) 96px 88px 86px}
.br-stoff, .br-stoff select{min-width:0;max-width:100%}
.br-stoff select{width:100%;text-overflow:ellipsis}

/* Weiterfuehrende Links in den Werkzeugkacheln.
   Der Pfeil war nur fuer .kachel definiert; die Werkzeugkacheln heissen
   .wkachel und bekamen ihn nie. "Aufbau rechnen" sah aus wie ein Satzende,
   nicht wie der Weg in den Rechner — dabei ist es der wichtigste Klick
   dieser Seite. */
.wkachel .mehr{margin-top:auto;font-size:var(--t-small);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-teal-txt);
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding-top:var(--s-2);border-top:1px solid var(--line);width:100%}
.wkachel .mehr::after{content:"\2197";transition:transform .18s ease;margin-left:auto}
.wkachel .mehr:hover{color:var(--c-green-dk)}
.wkachel .mehr:hover::after{transform:translate(3px,-3px)}

/* Blocksatz in schmalen Spalten.
   hyphens:auto stand schon da, aber Chrome trennt von Haus aus sehr
   zurueckhaltend: erst lange Woerter, und nie mit weniger als vier Zeichen
   am Zeilenende. In einer 456 px breiten Spalte reisst der Satz dadurch auf.
   Mit 6/3/2 trennt er frueher, die Wortabstaende bleiben ruhig.
   text-wrap:pretty verhindert zusaetzlich einzelne Woerter in der
   Schlusszeile. */
.wkachel-text p, .kachel p, .split-text p, .lead{
  hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:6 3 2;
  text-wrap:pretty}

/* Merkmalsbloecke auf hellem Grund (Einblasdaemmung, Spritzputz).
   Die Grundfassung ist fuer die dunkle Systemsektion gebaut und schreibt
   weiss. Auf hellem Papier waere das unlesbar — deshalb hier die Umkehrung,
   sonst identisch im Aufbau. */
.faq--merk-hell > details{border-color:var(--line);background:#fff}
.faq--merk-hell > details[open]{background:var(--paper);border-color:var(--c-teal)}
.faq--merk-hell summary{color:var(--text)}
.faq--merk-hell summary:hover{background:rgba(16,40,28,.04)}
.faq--merk-hell summary::after{opacity:.5}
.faq--merk-hell summary em{color:var(--text-soft);opacity:1}
.faq--merk-hell ul.merk{color:var(--text-soft);border-left-color:var(--c-teal)}
.faq--merk-hell ul.merk li::before{background:var(--c-teal);opacity:.85}

/* ═══════════════════════════════════════════════════════════════════════════
   SEKTIONSRASTER  —  eine Komponente statt vieler Einzelfaelle
   ═══════════════════════════════════════════════════════════════════════════
   Befund aus der Durchsicht vom 20.08.2026: Tabellen, Diagramme und
   Kennzahlenblöcke liefen über die volle Seitenbreite, während der zugehörige
   Erklärtext unverbunden rechts oben stand. Beides zusammen erzeugt die
   Leerflächen, die die Seite unaufgeräumt wirken lassen.

   Deshalb ein festes Verhältnis für alle inhaltsreichen Sektionen:

       links   38,2 %   Überschrift, Subtext, Erklärung   — die Einordnung
       rechts  61,8 %   Tabelle, Diagramm, Karte, Bild    — die Sache selbst

   Das ist zugleich das geforderte Ein-Drittel zu Zwei-Drittel und der Goldene
   Schnitt. fr statt Prozent, weil 61,8 % + 38,2 % + Spalte = mehr als 100 %.

   Verwendung:
     <div class="sekt">
       <div class="sekt-text"> Überschrift, Subtext, Erklärung </div>
       <div class="sekt-karte"> Tabelle / Diagramm / Bild </div>
     </div>
*/
.sekt{display:grid;grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);
  gap:var(--s-5);align-items:start;margin-top:var(--s-4)}
.sekt--breit{grid-template-columns:minmax(0,30fr) minmax(0,70fr)}
/* Text und Karte oben auf einer Kante — der haeufigste Befund war ein
   Erklaertext, der neben dem Inhalt zu schweben schien. */
.sekt-text{display:flex;flex-direction:column;gap:var(--s-2);
  position:sticky;top:calc(var(--kopfhoehe,64px) + var(--s-4));align-self:start}
.sekt-text > :first-child{margin-top:0}
.sekt-text h2,.sekt-text h3{margin-bottom:var(--s-2)}
.sekt-text p{max-width:46ch}
.sekt-text .lead{margin-bottom:0}
.sekt-karte{min-width:0;justify-self:stretch}
/* Die Karte endet an der rechten Inhaltskante, nicht an der Fensterkante. */
.sekt-karte > .uw-tabhuelle,
.sekt-karte > table,
.sekt-karte > figure{margin-top:0;width:100%}
/* Karten im Raster bekommen einen eigenen Rahmen, damit sie als Einheit
   lesbar sind und nicht in die Flaeche auslaufen. */
.sekt-karte--rahmen{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s-4);box-shadow:0 1px 2px rgba(16,40,28,.04)}
.stage .sekt-karte--rahmen{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);box-shadow:none}
.sekt-karte--rahmen > :first-child{margin-top:0}
.sekt-karte--rahmen > :last-child{margin-bottom:0}

@media(max-width:1023px){
  /* Reihenfolge beim Umbruch: Ueberschrift und Subtext, dann die Karte,
     dann die Hinweise. Die Sticky-Position faellt weg — sie ergibt nur
     neben einer langen Karte Sinn. */
  .sekt,.sekt--breit{grid-template-columns:1fr;gap:var(--s-4)}
  .sekt-text{position:static;top:auto}
  .sekt-text p{max-width:none}
}

/* ── Ueberschriften: zwei Zeilen, nie drei ────────────────────────────────
   Gemessen wurde eine dreizeilige H2 auf 1440 px. Ursache war eine
   Breitenbegrenzung in ch, die zur Schriftgroesse nicht passte.
   text-wrap:balance verteilt die Zeilen gleichmaessig, statt die letzte
   Zeile mit einem einzelnen Wort stehen zu lassen. */
h1,h2,h3,.sekt-text h2{text-wrap:balance}
.sekt-text h2{max-width:22ch}
.sekt-text h3{max-width:26ch}
.sekt-text .lead,.sekt-text .kapitel + h2 + p{max-width:44ch}

/* ── Kopfzeile: sichtbar bleiben, kompakter werden ────────────────────────
   Die Kopfzeile war sticky, die Leiste darueber nicht — beim Scrollen
   verschwanden Bauteilrechner und Fassaden-Check. Sie stehen jetzt in der
   Navigation und bleiben damit erreichbar.
   Der kompakte Zustand aendert nur Innenabstand und Logogroesse; die
   Positionierung bleibt gleich, deshalb entsteht kein Sprung. */
:root{--kopfhoehe:64px}
.header{position:sticky;top:0;z-index:90;
  transition:box-shadow .22s ease,background-color .22s ease}
.header .shell{transition:padding-block .22s ease}
.header .logo-img{transition:height .22s ease}
/* Der kompakte Zustand entsteht ohne JavaScript.

   animation-timeline:scroll() koppelt die Animation an den Scrollstand des
   Dokuments statt an die Zeit. Kein Listener, kein Observer, keine
   Rechenzeit beim Scrollen — und nichts, was in einem anderen
   Scroll-Container ins Leere laeuft.

   Browser ohne Unterstuetzung zeigen die Kopfzeile dauerhaft in voller
   Groesse. Das ist kein Fehler, nur weniger Feinschliff: sichtbar und
   bedienbar bleibt sie in jedem Fall, weil das an position:sticky haengt. */
@supports (animation-timeline: scroll()){
  @media(prefers-reduced-motion:no-preference){
    .header{animation:kopf-kompakt linear both;
      animation-timeline:scroll(root block);
      animation-range:60px 200px}
    .header .shell{animation:kopf-eng linear both;
      animation-timeline:scroll(root block);animation-range:60px 200px}
    .header .logo-img{animation:kopf-logo linear both;
      animation-timeline:scroll(root block);animation-range:60px 200px}
    .header .claim em{animation:kopf-claim linear both;
      animation-timeline:scroll(root block);animation-range:60px 160px}
  }
}
@keyframes kopf-kompakt{
  to{box-shadow:0 6px 24px rgba(16,40,28,.10);background:rgba(255,255,255,.97)}}
@keyframes kopf-eng{ to{padding-block:7px} }
@keyframes kopf-logo{ to{height:34px} }
@keyframes kopf-claim{ to{opacity:0} }

/* Die beiden Rechner in der Navigation */
.nav-werkzeug{display:inline-flex;align-items:center;gap:var(--s-3);
  margin-left:var(--s-3);padding-left:var(--s-3);border-left:1px solid var(--line)}
.nav-werkzeug a{font-size:var(--t-small);color:var(--text-soft);
  text-decoration:none;white-space:nowrap}
.nav-werkzeug a:hover{color:var(--c-teal-txt)}
/* Ab hier uebernimmt der Burger. Die beiden Rechner gehoeren dann mit ins
   Menue — sonst stehen sie als loses Paar neben dem Logo und schieben die
   Kopfzeile auf. Genau das war bei rund 1160 px zu sehen.
   Im geoeffneten Menue stehen sie untereinander, abgesetzt durch eine
   Trennlinie, mit 44 px Fingerziel. */
@media(max-width:1299px){
  .nav:not(.open) .nav-werkzeug{display:none}
  .nav.open .nav-werkzeug{display:flex;flex-direction:column;align-items:stretch;
    width:100%;border-left:0;margin:var(--s-2) 0 0;padding:var(--s-2) 0 0;
    border-top:1px solid var(--line);gap:0}
  .nav.open .nav-werkzeug a{min-height:44px;display:flex;align-items:center;
    font-size:1rem;color:var(--text)}
}

/* Ankerziele nicht unter der Kopfzeile verstecken */
[id]{scroll-margin-top:calc(var(--kopfhoehe,64px) + var(--s-3))}

@media(prefers-reduced-motion:reduce){
  .header,.header .shell,.header .logo-img{transition:none}
}

/* ── Kopfblock: beide Leisten bleiben zusammen stehen ─────────────────────
   Die Zielgruppen standen in der Meta-Leiste und scrollten weg. Zwei
   getrennte sticky-Elemente mit top:0 legen sich uebereinander, und die
   zweite muesste die Hoehe der ersten kennen — die aendert sich mit der
   Fensterbreite. Ein gemeinsamer Container loest das ohne Rechnerei:
   er klebt, beide Zeilen fahren mit. */
.kopfblock{position:sticky;top:0;z-index:95}
.header{position:static;box-shadow:none}

/* Beim Scrollen verschlankt die Meta-Leiste auf das, was Navigation ist:
   die vier Zielgruppen. Claim und Telefonnummer treten zurueck — sie sind
   Information, kein Weg. So kostet der Kopfblock unterwegs kaum Hoehe. */
@supports (animation-timeline: scroll()){
  @media(prefers-reduced-motion:no-preference) and (min-width:821px){
    .topbar .shell{animation:topbar-eng linear both;
      animation-timeline:scroll(root block);animation-range:60px 200px}
    .topbar-txt{animation:topbar-weg linear both;
      animation-timeline:scroll(root block);animation-range:60px 150px}
    .kopfblock{animation:kopfblock-schatten linear both;
      animation-timeline:scroll(root block);animation-range:60px 200px}
  }
}
@keyframes topbar-eng{ to{padding-block:4px} }
@keyframes topbar-weg{ to{opacity:0} }
@keyframes kopfblock-schatten{ to{box-shadow:0 8px 26px rgba(16,40,28,.13)} }

/* Am Handy zaehlt jede Zeile: dort bleibt nur die Kopfzeile stehen,
   die Meta-Leiste scrollt mit dem Inhalt weg. */
@media(max-width:820px){
  .kopfblock{position:static}
  .header{position:sticky;top:0;z-index:95}
}

/* Kompakter Zustand ueber die Klasse am html-Element. Das Skript setzt sie;
   die animation-timeline-Fassung darueber bleibt als Ergaenzung fuer
   Browser, die sie koennen — beide beschreiben denselben Zustand. */
html.gescrollt .topbar-txt{display:none}
html.gescrollt .topbar-links{display:none}
html.gescrollt .topbar .shell{padding-block:5px;
  grid-template-columns:1fr;grid-template-areas:"zg"}
html.gescrollt .topbar-zg{border-top:0;margin-top:0;padding-top:0}
html.gescrollt .header .shell{padding-block:7px}
html.gescrollt .header .logo-img{height:34px}
html.gescrollt .header .claim em{display:none}
html.gescrollt .kopfblock{box-shadow:0 8px 26px rgba(16,40,28,.13)}
.topbar .shell,.header .shell,.header .logo-img{transition:padding-block .2s ease,height .2s ease}
@media(prefers-reduced-motion:reduce){
  .topbar .shell,.header .shell,.header .logo-img{transition:none}
}

/* Ohne Bewegung: Endzustand sofort, keine Animation.
   Die Aussage der Reihe steckt in den Zahlen, nicht im Wachsen. */
@media(prefers-reduced-motion:reduce){
  .js-b{transition:none;transition-delay:0s;height:var(--h);opacity:1}
  .lz-spar-f{transition:none}
}
@media(max-width:760px){ .jahre-flaeche{padding-right:0}
  .jahre-achse{inset:0}
  .jahre-achse i::after{right:auto;left:0;background:var(--ink);padding:0 6px 0 0} }

/* Die Spektrumgrafik braucht Breite: eine logarithmische Achse ueber drei
   Dekaden wird in einer schmalen Spalte unlesbar. Sie laeuft deshalb ueber
   die volle Breite der Sektion, nicht im Verhaeltnis 61,8. */
.dl--breit{grid-column:1 / -1}
.dl--breit img{aspect-ratio:1240/767;object-fit:contain;background:var(--paper)}
.split-media:has(.dl--breit){grid-column:1 / -1}

/* ═══ Bauteilrechner als Dashboard ═══════════════════════════════════════
   Vorher lagen die Bloecke untereinander: Eingaben, Schichten und Schnitt,
   dann U-Wert, dann Tauwasser, dann Verlauf. Wer eine Dicke aenderte, musste
   scrollen, um die Wirkung zu sehen — bei einem Werkzeug, das vom schnellen
   Ausprobieren lebt, ist das der entscheidende Mangel.

   Neue Anordnung nach Vorgabe:
     Zeile 1   Eingaben links, Tauwasser-Ergebnis rechts daneben
     Zeile 2   Schichtenliste links, Bauteilschnitt rechts
     Zeile 3   Waermedurchgang links, Temperaturverlauf rechts, gleich gross

   Umgesetzt ueber ein Raster mit acht Spalten: 5 zu 3 ergibt 62,5 zu 37,5 —
   praktisch der Goldene Schnitt und zugleich teilbar in zwei gleiche
   Haelften fuer die dritte Zeile. Die Zwischencontainer werden mit
   display:contents transparent, damit ihre Kinder direkt im Raster liegen.
   Am HTML und an der Rechenlogik aendert sich nichts. */
@media(min-width:1100px){
  #brechner{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
    gap:var(--s-3);align-items:start}
  .br-haupt,.br-ergebnis{display:contents}
  .br-steuer   {grid-column:1 / 6}
  .br-feuchte  {grid-column:6 / 9; align-self:stretch}
  .br-schichten{grid-column:1 / 6}
  .br-bild     {grid-column:6 / 9}
  .br-legende  {grid-column:6 / 9; margin-top:calc(var(--s-2) * -1)}
  .br-werte    {grid-column:1 / 5}
  .br-kennwerte{grid-column:1 / 5}
  .br-verlauf  {grid-column:5 / 9}

  /* Die Kacheln bekommen sichtbare Kanten, sonst zerfaellt das Raster
     optisch in lose Bloecke. */
  .br-feuchte:not(:empty),.br-werte,.br-verlauf,.br-kennwerte{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--s-3)}
  .br-feuchte:empty{display:none}
  .br-verlauf > :first-child,.br-werte > :first-child{margin-top:0}
}

/* Das Feld fuer die Schichtdicke war nach der Neuanordnung zu schmal: aus
   "2,50" wurde sichtbar "2,". Zwei Nachkommastellen plus Komma brauchen
   Platz, sonst schneidet der Browser ab, ohne es zu melden. */
/* Erste Spalte: der Anfasser zum Ziehen. Ohne sie bricht die Zeile um,
   weil ein siebtes Element in einem sechsspaltigen Raster keinen Platz hat. */
.br-zeile{grid-template-columns:18px 22px 13px minmax(0,1fr) 112px 88px 86px}
.br-dicke input{min-width:64px;width:100%;text-align:right;
  font-variant-numeric:tabular-nums}
@media(min-width:1100px){
  /* Im Dashboard steht die Liste in fuenf von acht Spalten — dort ist es
     enger als vorher. Lambda tritt zurueck, die Dicke behaelt ihren Platz. */
  #brechner .br-zeile{grid-template-columns:18px 22px 13px minmax(0,1fr) 108px 74px 82px}
  #brechner .br-lam{font-size:var(--t-micro);opacity:.75}
}

/* Die eingebauten Zahlenregler der Dickenfelder abschalten.
   Sie sassen unmittelbar neben den Verschiebepfeilen; ein Klick daneben
   erhoehte den Wert um die Schrittweite — aus 2,50 wurde 2,51, ohne dass
   erkennbar war, warum. Eingeben laesst sich der Wert weiterhin, auch mit
   den Pfeiltasten im Feld. */
.br-dicke input[type=number]{-moz-appearance:textfield;appearance:textfield}
.br-dicke input[type=number]::-webkit-outer-spin-button,
.br-dicke input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;appearance:none;margin:0}



/* Der linke Knopf schiebt die Zeile nach oben, der rechte nach unten —
   immer, in jeder Bauteilart. Keine Umkehr, keine Bedingung.

   Das Auswahldreieck der Vorschlagsliste im Zahlenfeld ist ausgeblendet:
   es sass zwischen Zahl und Einheit und hat die Spalte unruhig gemacht.
   Eingeben laesst sich weiterhin jeder Wert. */
.br-dicke input::-webkit-calendar-picker-indicator{display:none!important;opacity:0}
.br-dicke input{text-align:right;font-variant-numeric:tabular-nums;
  padding-right:10px;letter-spacing:.01em}

/* Anfasser und Zustand beim Ziehen. Das Ziehen ergaenzt die Pfeile — auf
   dem Touchgeraet ist es der direktere Weg. */
.br-griff{cursor:grab;color:var(--text-soft);opacity:.5;letter-spacing:-3px;
  padding:0 2px;user-select:none;touch-action:none}
.br-griff:hover{opacity:.9}
.br-zeile.zieht{opacity:.6;cursor:grabbing;position:relative;z-index:5;
  background:var(--paper);box-shadow:0 8px 22px rgba(16,40,28,.14)}
.br-marke{height:2px;background:var(--c-teal);margin:2px 0;border-radius:2px;list-style:none}


/* ═══ Fassaden-Check zweispaltig ══════════════════════════════════════════
   Das Modul war 4.645 px hoch: drei Auswahlblöcke untereinander, darunter
   erst das Ergebnis. Wer eine Dämmstoffdicke änderte, musste scrollen, um
   die Wirkung zu sehen — bei einem Werkzeug, das vom Vergleichen lebt, ist
   das der entscheidende Mangel.

   Links die Eingaben, rechts das Ergebnis daneben, beide oben bündig.
   Gemessen am 20.08.2026: 3.601 statt 4.645 px, gespart 1.044.

   Verhältnis 38,2 zu 61,8 — die Auswahl ist knapp, das Ergebnis braucht
   Platz für Zahlen und Vergleichsgrafik. */
@media(min-width:1100px){
  #fcheck{display:grid;grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);
    gap:var(--s-3) var(--s-4);align-items:start}
  #fcheck > .fc-schritt{grid-column:1;margin:0}
  #fcheck > .fc-ergebnis{grid-column:2;grid-row:1 / 4;margin:0}
  /* Schnitt, Tabelle, HWB und Nachweise bleiben über die volle Breite —
     der Wandquerschnitt wäre in einer halben Spalte nicht mehr lesbar. */
  #fcheck > *:not(.fc-schritt):not(.fc-ergebnis){grid-column:1 / -1}
}

/* ═══ Bauteilrechner kompakt ══════════════════════════════════════════════
   Der Rechner lebt davon, dass man eine Dicke ändert und die Wirkung sofort
   sieht. Mit 2.638 px Höhe war dafür Scrollen nötig — der Effekt lag außer
   Sicht, während man ihn auslöste.

   Deshalb durchgängig engere Maße: Innenabstände, Zeilenhöhen und
   Schriftgrade eine Stufe zurück. Gemessen am 20.08.2026: 1.788 statt
   2.638 px, gespart 850. Die Schichttabelle darunter ist zugeklappt; sie
   wiederholt in Textform, was die Liste schon zeigt, und kostete allein
   511 px.

   Lesbarkeit bleibt: 0,9 rem Grundschrift, Zeilen 34 px hoch, Fingerziele
   unverändert. Verdichtet wird über Weißraum, nicht über Schriftgröße. */
#brechner{--s-1:4px;--s-2:7px;--s-3:11px;--s-4:16px;--s-5:22px;font-size:.94rem}

#brechner .fields{gap:9px}
#brechner label{font-size:.78rem;margin-bottom:2px}
#brechner input,#brechner select{padding:6px 9px;font-size:.9rem;min-height:32px}

#brechner .br-kopf{margin-bottom:8px;font-size:.66rem}
#brechner .br-zeile{padding:2px 0;min-height:34px}
#brechner .br-zeile select,#brechner .br-dicke input{min-height:30px;padding:3px 8px}
#brechner .br-systeme{margin-bottom:8px}
#brechner .br-sys{padding:5px 11px;font-size:.82rem}
#brechner .br-bild,#brechner .br-werte,#brechner .br-verlauf,
#brechner .br-kennwerte,
#brechner h3{font-size:1rem;margin-bottom:6px}
#brechner .br-gross b{font-size:1.9rem;line-height:1.05}
#brechner .disclaim{font-size:.74rem;line-height:1.45}


#brechner .uw-tab td,#brechner .uw-tab th{padding:5px 8px;font-size:.84rem}
/* Zeichnungen dürfen nicht die Höhe bestimmen */

#brechner .br-verlauf svg{max-height:230px;width:100%}
.br-tabdetails{border:1px solid var(--line);border-radius:var(--r-2);
  background:#fff;margin-top:var(--s-3)}
.br-tabdetails > summary{padding:10px 14px;cursor:pointer;font-size:.86rem;
  font-weight:700;color:var(--c-teal-txt);list-style:none}
.br-tabdetails > summary::after{content:" \25BE";opacity:.6}
.br-tabdetails[open] > summary::after{content:" \25B4"}
.br-tabdetails > .uw-tabhuelle{padding:0 14px 14px}

/* Feste Zeilenzuweisung im Dashboard.

   Ein Raster füllt in der Reihenfolge des Dokuments. Das Tauwasser-Ergebnis
   steht dort weit hinten und landete deshalb unten, obwohl es oben neben die
   Eingaben gehört — dorthin, wo man es beim Ändern einer Dicke im Blick hat.
   Mit ausdrücklicher Zeilenangabe sitzt jeder Block an seinem Platz:

     Zeile 1   Eingaben          | Tauwasser
     Zeile 2   Schichtenliste    | Bauteilschnitt
     Zeile 3   Wärmedurchgang    | Temperaturverlauf
     Zeile 4   Kennwerte über die volle Breite

   Gemessen: 1.046 px statt ursprünglich 2.638. */
@media(min-width:1100px){
  /* Durchgehend halbe und halbe Breite: Schichtenliste, Wärmedurchgang und
     Eingaben stehen alle auf derselben Kante, rechts daneben jeweils der
     zugehörige Block. Vorher war die linke Spalte mal fünf, mal vier von
     acht Einheiten breit — die Kanten sprangen. */
  
  
  
  
  
  /* Wärmedurchgang und Temperaturverlauf nebeneinander und gleich hoch —
     man vergleicht sie miteinander, deshalb gehören sie auf eine Kante. */
  
  
  
  /* Der Rechenweg über die volle Breite: aufgeklappt braucht die Tabelle
     jede Spalte, sonst bricht jede Zelle in vier Zeilen um. */
  
  /* Der Schnitt füllt die höhere Kachel aus, statt oben zu kleben. */
  
  
}

/* ── Schichtzeile am Handy zweizeilig statt dreizeilig ────────────────────
   Gemessen bei 390 px: jede Zeile 102 px hoch, weil Baustoff, Dicke und
   Knöpfe untereinander standen. Bei vier Schichten sind das über 400 px
   allein für die Liste.

   Jetzt: oben Nummer, Farbe und Baustoff, darunter Dicke und Knöpfe
   nebeneinander. Rund 68 statt 102 px, Fingerziele bleiben 44 px. */
@media(max-width:680px){
  #brechner .br-zeile,.br-zeile{
    grid-template-columns:16px 20px 12px minmax(0,1fr) auto;
    grid-template-areas:"griff nr farbe stoff stoff"
                        ".     .  .     dicke knopf";
    row-gap:5px;padding:8px 0;align-items:center}
  .br-dicke{grid-area:dicke;justify-self:start}
  .br-knopf{grid-area:knopf;justify-self:end;display:flex;gap:4px}
  .br-knopf button{min-width:38px;min-height:38px}
  .br-lam{display:none}
  #brechner .br-zeile select{min-height:38px}
  #brechner .br-dicke input{min-height:38px;width:88px}
}
/* Zwischenbreiten: ab 681 px steht die Zeile wieder einzeilig, aber die
   Lambda-Spalte tritt zurück, damit nichts umbricht. */
@media(min-width:681px) and (max-width:1099px){
  #brechner .br-zeile{grid-template-columns:16px 20px 12px minmax(0,1fr) 96px 62px 76px}
  #brechner .br-lam{font-size:.72rem;opacity:.7}
}

/* Schichtzeile auch am Handy einzeilig.

   Zweizeilig ergab 98 px je Zeile — bei vier Schichten fast 400 px allein
   für die Liste. Einzeilig passt es: bei 390 px Bildschirmbreite bleiben
   nach Innenabständen 358 px, und Griff, Nummer, Farbe, Baustoff, Dicke und
   die drei Knöpfe kommen zusammen auf rund 300. Der Baustoffname kürzt sich
   mit Auslassungspunkten, die Wärmeleitfähigkeit tritt zurück.
   Knöpfe 34 px — für eine Fingerkuppe knapp, aber die Zeile ist so hoch,
   dass die Trefferfläche darüber hinausreicht. */
@media(max-width:680px){
  #brechner .br-zeile,.br-zeile{
    grid-template-columns:14px 16px 10px minmax(0,1fr) 58px auto;
    grid-template-areas:"griff nr farbe stoff dicke knopf";
    row-gap:0;padding:4px 0;gap:5px;min-height:46px}
  .br-dicke{grid-area:dicke;justify-self:stretch}
  .br-dicke input{width:100%;min-height:34px;padding:2px 5px;font-size:.86rem}
  .br-dicke span,.br-dicke .einheit{display:none}
  .br-knopf{grid-area:knopf;display:flex;gap:2px}
  .br-knopf button{min-width:30px;min-height:34px;padding:0}
  #brechner .br-zeile select{min-height:34px;font-size:.86rem;
    text-overflow:ellipsis;padding:2px 4px}
  .br-lam{display:none}
}

/* Bauteilschnitt kleiner, Kachel kürzer.

   Die Kachel war über zwei Rasterzeilen gezogen und der Schnitt füllte sie
   aus — dadurch rutschten Wärmedurchgang und Verlauf weit nach unten. Der
   Schnitt braucht diese Höhe nicht: Aussagekraft hat die Schichtenfolge,
   nicht die Größe. Rund ein Drittel kürzer. */
@media(min-width:1100px){
  
  
}

/* Wärmedurchgang und Ausführungsvorbehalt über die volle Breite.

   Der Koeffizient ist das Hauptergebnis — er gehört über die ganze Kachel,
   nicht in eine halbe Spalte. Der grüne Hinweis auf die fachgerechte
   Ausführung steht direkt darunter, ebenfalls voll breit: er gilt für dieses
   Ergebnis und für kein anderes. */
@media(min-width:1100px){
  
  
  
  
  
  
}

/* Temperatur- und Taupunktkurve im Bauteilschnitt */
/* Kurven im Schnitt. Taupunkt blau und gleich stark wie die Temperatur —
   gestrichelt und dünn war er neben der Schraffur nicht zu erkennen. */
.br-k-temp{stroke:#10281C;stroke-width:2.4;stroke-linejoin:round;fill:none}
.br-k-tau{stroke:#2E5FA3;stroke-width:2.4;stroke-linejoin:round;fill:none}
.br-k-gitter{stroke:rgba(16,40,28,.14);stroke-width:1}
.br-k-achse{font-size:12px;fill:var(--text-soft);font-variant-numeric:tabular-nums}
.br-k-punkt{fill:#2E5FA3;stroke:#fff;stroke-width:2}
.br-k-punkt.nass{fill:#B3261E}
/* Wassertropfen an der Stelle, an der Tauwasser anfallen kann */
.br-k-tropfen path{fill:#2E6FC7;stroke:#fff;stroke-width:1.6;
  filter:drop-shadow(0 1px 2px rgba(16,40,28,.35))}
.br-k-tropfen .br-k-glanz{fill:rgba(255,255,255,.55);stroke:none}
.br-k-wert{font-size:14px;font-weight:700;fill:#10281C;
  paint-order:stroke;stroke:#F7F5F0;stroke-width:4px}
.br-k-wert.nass{fill:#1F4F96}
.br-k-klein{font-size:11.5px;fill:var(--text-soft);
  paint-order:stroke;stroke:#F7F5F0;stroke-width:3.5px}
.br-k-leg{font-size:12.5px;fill:var(--text-soft)}
.br-kurven{pointer-events:none}
.br-t-nr{font-size:13px}
.br-t-marke{font-size:12.5px;letter-spacing:.08em}
.br-t-mass{font-size:12px}

/* Der Verlauf steckt jetzt im Schnitt — das eigene Diagramm entfällt.
   An seinen Platz rückt der Rechenweg, der dieselben Zahlen in Textform
   zeigt. Die Kachel des Schnitts bleibt dabei so groß wie bisher. */
@media(min-width:1100px){
  
  
  
  
  
  
}
@media(max-width:1099px){  }

/* ── Letzte Ordnung im Rechner ────────────────────────────────────────────
   Zwei Dinge, die ich mir selbst überschrieben hatte:

   Der Wärmedurchgangskoeffizient ist das Hauptergebnis und gehört über die
   ganze Breite. Ich hatte das gesetzt und in der nächsten Regel wieder auf
   eine halbe Spalte zurückgenommen.

   Schichtenliste und Bauteilschnitt stehen auf gleicher Höhe — auch wenn
   Schichten dazukommen. Dafür muss die Zeile strecken statt oben zu kleben;
   mit align-items:start blieb die kürzere Kachel stehen und darunter riss
   eine Lücke auf. */
@media(min-width:1100px){
  #brechner .br-schichten,
  
  
  
  
  
  
  
  
}

/* Kachelüberschriften in dunklen Abschnitten.

   In .stage schreiben Überschriften weiß — richtig für den dunklen Grund,
   falsch für die hellen Kacheln, die darin stehen. Produktname und
   Beschreibung waren dadurch weiß auf Weiß und erst beim Überfahren
   lesbar. Auf Touchgeräten also gar nicht.

   Deshalb: in hellen Kacheln gilt die normale Textfarbe, unabhängig davon,
   wie dunkel der Abschnitt ringsum ist. Nur .kachel--dunkel schreibt weiß. */
.stage .kachel:not(.kachel--dunkel) h3,
.stage .kachel:not(.kachel--dunkel) h3 a,
.stage .kachel:not(.kachel--dunkel) .kachel-nr{color:var(--text)}
.stage .kachel:not(.kachel--dunkel) p,
.stage .kachel:not(.kachel--dunkel) .kachel-marke{color:var(--text-soft)}
.stage .kachel:not(.kachel--dunkel) a.mehr{color:var(--c-teal-txt)}
.stage .kachel:not(.kachel--dunkel) h3 a:hover{color:var(--c-teal-txt)}
.kachel a.mehr:focus-visible,.kachel h3 a:focus-visible{
  outline:2px solid var(--c-teal);outline-offset:3px;border-radius:3px}

/* Die Ziffer der Kachel ist ihre Ordnung — sie darf man sehen.
   Bisher war sie so klein, dass sie eher wie ein Druckfehler wirkte. */
.kachel-nr{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;margin-bottom:var(--s-2);
  opacity:.42}
.stage .kachel:not(.kachel--dunkel) .kachel-nr{opacity:.34}
.kachel--dunkel .kachel-nr{opacity:.5}

/* Alle Ordnungsziffern auf ein Maß.

   Die Ziffer vor einem Kapitel, im Menü und im Fassaden-Check hatte drei
   verschiedene Größen, alle zu klein — sie wirkten wie Satzfehler statt wie
   Gliederung. Jetzt einheitlich und lesbar, aber zurückgenommen in der
   Farbe: sie ordnen, sie drängen sich nicht vor. */
.kapitel i{font-size:1.05rem;font-weight:800;font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;opacity:.55;
  margin-right:.4em}
.navgruppe-p a i{font-size:.95rem;font-weight:800;font-style:normal;
  font-variant-numeric:tabular-nums;opacity:.5;min-width:2ch}
.fc-nr{font-size:1.3rem;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1;opacity:.5}
.br-nr{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}

/* Portfolio-Kacheln: dunkel bleibt dunkel.

   Sie tragen .kachel--dunkel und sollen dunkel sein — ihr Hintergrund wurde
   aber von einer späteren Regel aufgehellt, während die Schrift weiß blieb.
   Ergebnis: weißer Produktname auf hellem Grund, erst beim Überfahren
   lesbar. Auf Touchgeräten gar nicht.

   Hier steht der Hintergrund wieder fest. Das ist die richtige Richtung:
   die Kacheln stehen in einem dunklen Abschnitt, dunkel gehören sie auch. */
.stage .kachel--dunkel,
.kachelband .kachel--dunkel{
  background:var(--ink-3) !important;
  border-color:rgba(255,255,255,.14)}
.stage .kachel--dunkel h3,.stage .kachel--dunkel h3 a{color:#fff}
.stage .kachel--dunkel p{color:var(--text-invert-soft)}
.stage .kachel--dunkel .kachel-marke,
.stage .kachel--dunkel .kachel-nr{color:rgba(255,255,255,.62)}
.stage .kachel--dunkel a.mehr{color:var(--c-green-lt)}

/* ═══ Kontaktformulare ════════════════════════════════════════════════════
   Sie tragen kein eigenes Stylesheet mehr. Die alten hatten rund 6.000
   Zeichen davon und kämpften gegen dieses hier — mit dem Ergebnis, dass
   die Seitenspalte auf Wortbreite zusammenfiel.

   Aufteilung 38,2 zu 61,8: links die Einordnung, rechts das Formular. */
.ksplit{display:grid;grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);
  gap:var(--s-5);align-items:start;margin-top:var(--s-4)}
.kseite{background:var(--ink);color:var(--text-invert);border-radius:var(--radius);
  padding:var(--s-5);position:sticky;top:calc(var(--kopfhoehe,140px) + var(--s-3))}
.kseite h1{font-size:clamp(24px,2.2vw,34px);line-height:1.15;color:#fff;
  margin:var(--s-2) 0 var(--s-3);text-wrap:balance}
.kseite .lead{color:var(--text-invert-soft);font-size:1rem;line-height:1.6}
.kwarum{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-2)}
.kwarum li{position:relative;padding-left:26px;font-size:.94rem;line-height:1.55;
  color:var(--text-invert-soft)}
.kwarum li::before{content:"\2713";position:absolute;left:0;top:0;
  color:var(--c-green-lt);font-weight:700}
.kdirekt{margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:1px solid var(--line-invert);display:grid;gap:4px;font-size:.94rem}
.kdirekt b{color:#fff;margin-bottom:2px}
.kdirekt a{color:var(--c-green-lt);text-decoration:none}
.kdirekt a:hover{text-decoration:underline}

.kform-huelle{background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--s-5)}
.pfhinweis{font-size:.84rem;color:var(--text-soft);margin:0 0 var(--s-3)}
.pf{color:#B3261E;font-weight:700}
.fset{border:0;padding:0;margin:0 0 var(--s-4)}
.fset legend{font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft);padding:0 0 var(--s-2);
  border-bottom:1px solid var(--line);width:100%;margin-bottom:var(--s-3)}
.frow{display:grid;gap:var(--s-3)}
.frow--2{grid-template-columns:1fr 1fr}
.frow--3{grid-template-columns:1fr 1fr 1fr}
.frow--1{grid-template-columns:1fr}
.fgrp{display:flex;flex-direction:column;gap:5px;min-width:0}
.fgrp label{font-size:.88rem;font-weight:600;color:var(--text)}
.fgrp input,.fgrp select,.fgrp textarea{
  font:inherit;font-size:.95rem;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-2);background:var(--paper);color:var(--text);
  min-height:44px;width:100%;transition:border-color .15s,box-shadow .15s}
.fgrp textarea{min-height:auto;resize:vertical;line-height:1.55}
.fgrp input:hover,.fgrp select:hover,.fgrp textarea:hover{border-color:var(--c-teal)}
.fgrp input:focus-visible,.fgrp select:focus-visible,.fgrp textarea:focus-visible{
  outline:none;border-color:var(--c-teal);background:#fff;
  box-shadow:0 0 0 3px rgba(47,93,58,.16)}
.fgrp input:invalid:not(:placeholder-shown){border-color:#B3261E}
.fh{font-size:.8rem;color:var(--text-soft);line-height:1.45}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.kzustimmung{display:grid;gap:var(--s-2);margin:var(--s-4) 0}
.kcheck{display:grid;grid-template-columns:22px 1fr;gap:10px;
  font-size:.9rem;line-height:1.5;color:var(--text-soft);cursor:pointer}
.kcheck input{width:20px;height:20px;min-height:0;margin-top:1px;accent-color:var(--c-teal)}
.kcheck a{color:var(--c-teal-txt)}
.ksenden{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);
  padding-top:var(--s-3);border-top:1px solid var(--line)}
.kklein{font-size:.82rem;color:var(--text-soft);line-height:1.45;max-width:34ch}
.kfehler{display:none;background:#FDECEA;border-left:3px solid #B3261E;
  color:#8C1D18;padding:var(--s-3);border-radius:var(--r-2);
  margin-bottom:var(--s-3);font-size:.92rem}
.kfehler.da{display:block}
.krumen{font-size:.84rem;color:var(--text-soft);margin-bottom:var(--s-3)}
.krumen a{color:var(--text-soft)}

@media(max-width:1023px){
  .ksplit{grid-template-columns:1fr;gap:var(--s-4)}
  .kseite{position:static;padding:var(--s-4)}
  .kform-huelle{padding:var(--s-4)}
}
@media(max-width:620px){
  .frow--2,.frow--3{grid-template-columns:1fr}
  .kform-huelle{padding:var(--s-3)}
}

/* ── Formulare auf schmalen Geräten ───────────────────────────────────────
   Gemessen bei 320 px: die Mailadresse brach über zwei Zeilen mitten im
   Wort, und ein Listenpunkt zerfiel auf vier Zeilen mit je zwei Wörtern.
   Beides sieht nach Unfall aus.

   Abhilfe ohne die Texte zu kürzen: engere Innenabstände schaffen Platz,
   Silbentrennung verteilt die Wörter gleichmäßig, und die Mailadresse darf
   an einer sinnvollen Stelle umbrechen statt irgendwo. */
@media(max-width:400px){
  .kseite,.kform-huelle{padding:var(--s-3)}
  .kseite h1{font-size:clamp(21px,6.4vw,26px)}
  .kwarum li{font-size:.9rem;padding-left:22px;hyphens:auto;
    -webkit-hyphens:auto;hyphenate-limit-chars:6 3 2;text-wrap:pretty}
  .kdirekt{font-size:.9rem}
  .kdirekt a{overflow-wrap:anywhere;word-break:break-word;display:block}
  .fgrp label{font-size:.86rem}
  .fh,.kklein{font-size:.78rem;hyphens:auto;-webkit-hyphens:auto}
  .kcheck span{font-size:.86rem;hyphens:auto;-webkit-hyphens:auto}
  .fset legend{font-size:.68rem}
  .ksenden{flex-direction:column;align-items:stretch}
  .ksenden .btn{width:100%;justify-content:center}
  .kklein{max-width:none}
}
/* Auch auf mittleren Breiten sauber trennen statt Löcher zu reißen */
.kwarum li,.kklein,.fh,.kcheck span{hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:7 3 3}
.kdirekt a{overflow-wrap:anywhere}

/* ── Router: vier Wege zur Anfrage ────────────────────────────────────────
   Karten statt Liste, weil hier eine Entscheidung getroffen wird. Jede trägt
   den Satz, an dem man sich wiedererkennt — nicht die Rollenbezeichnung.
   Vier gleich große Felder: keine Zielgruppe ist wichtiger als eine andere. */
.rwege{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);
  margin-top:var(--s-5)}
.rweg{display:flex;flex-direction:column;gap:6px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s-4);position:relative;overflow:hidden;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.rweg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c-teal);opacity:0;transition:opacity .18s}
.rweg:hover,.rweg:focus-visible{border-color:var(--c-teal);
  box-shadow:0 12px 30px rgba(16,40,28,.10);transform:translateY(-2px)}
.rweg:hover::before,.rweg:focus-visible::before{opacity:1}
.rweg:focus-visible{outline:2px solid var(--c-teal);outline-offset:3px}
.rweg-nr{font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums;
  line-height:1;color:var(--text);opacity:.28}
.rweg-marke{font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft)}
.rweg b{font-size:clamp(18px,1.5vw,22px);line-height:1.25;color:var(--text);
  text-wrap:balance;margin-top:2px}
.rweg p{font-size:.92rem;line-height:1.6;color:var(--text-soft);margin:4px 0 0;
  hyphens:auto;-webkit-hyphens:auto}
.rweg-mehr{margin-top:auto;padding-top:var(--s-3);font-size:.82rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-teal-txt);display:flex;align-items:center;gap:6px}
.rweg-mehr i{font-style:normal;transition:transform .18s}
.rweg:hover .rweg-mehr i{transform:translate(3px,-3px)}

.rdirekt{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4);
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line)}
.rdirekt b{display:block;margin-bottom:4px}
.rdirekt p{font-size:.94rem;line-height:1.6;color:var(--text-soft);margin:0}
.rdirekt a{color:var(--c-teal-txt)}

@media(max-width:860px){.rwege,.rdirekt{grid-template-columns:1fr}}
@media(max-width:400px){.rweg{padding:var(--s-3)}}

/* Rang des Nachweises. Er unterscheidet, was viele vermischen: eine
   Herstellererklärung ist keine Zertifizierung, und ein Institut, das einen
   Kennwert misst, prüft nicht das Produkt. Farbe nur als Hinweis, die
   Aussage steht im Text. */
.nw-rang{display:inline-block;margin-top:5px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;
  border-radius:99px;border:1px solid}
.nw-rang--h{color:#8A6A2F;border-color:rgba(154,99,52,.4);background:rgba(201,138,80,.10)}
.nw-rang--u{color:var(--c-teal-txt);border-color:rgba(47,93,58,.34);background:rgba(47,93,58,.08)}
.nw-rang--b{color:#1F4F96;border-color:rgba(31,79,150,.34);background:rgba(46,111,199,.09)}
.nw-dok{white-space:nowrap;text-align:right;vertical-align:middle}
.nw-dok a{font-weight:700;font-size:.86rem;color:var(--c-teal-txt);
  text-decoration:none;padding:6px 10px;border:1px solid var(--line);
  border-radius:var(--r-2);display:inline-block;transition:border-color .15s}
.nw-dok a:hover{border-color:var(--c-teal);background:var(--paper)}
.nw-dok a:focus-visible{outline:2px solid var(--c-teal);outline-offset:2px}
@media(max-width:620px){.nw-dok{text-align:left}}

/* Achsen am Bauteilschnitt: links Temperatur, rechts Feuchte, unten cm. */
/* Feuchtewerte mit heller Kontur — sie liegen auf Höhe der Taupunktkurve
   und wurden von ihr durchschnitten. */
.br-k-achse--f{fill:#2E5FA3;font-weight:700;
  paint-order:stroke;stroke:#F7F5F0;stroke-width:3.5px}
.br-k-legachse{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  fill:var(--text-soft)}
.br-k-cm{font-size:11px;fill:var(--text-soft);font-variant-numeric:tabular-nums}

/* Bauteilschnitt: Höhe begrenzen, damit der U-Wert im Bild bleibt.

   Die Kachel war 723 px hoch, der Wärmedurchgangskoeffizient lag dadurch
   bei Bildlaufposition 1688 — also weit unterhalb. Wer eine Schicht ändert,
   sieht die Wirkung dann nicht. Genau dafür ist der Rechner da.

   Eine frühere Regel hierzu wurde von einer späteren überschrieben; deshalb
   steht sie hier am Ende und mit !important. */
#brechner .br-bild svg,



/* Legende neben den Schnitt statt darunter.

   Sie stand unter der Zeichnung und ließ links eine leere Fläche stehen,
   während der Schnitt in der Höhe gedrückt wurde. Nebeneinander gewinnt
   das Bauteil Höhe, und die Legende liest sich als Beschriftung dazu —
   Nummer, Farbe, Name, Dicke untereinander wie in einer Planlegende. */
@media(min-width:900px){
  
  
  
  #brechner .br-legende span{display:grid;grid-template-columns:12px 1fr;
    gap:8px;align-items:start;font-size:.78rem;line-height:1.4}
  #brechner .br-legende i{width:12px;height:12px;border-radius:3px;
    margin-top:2px;flex:0 0 auto}
}

/* Kurvenlegende in der Schichtlegende */
.br-leg-kurve{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.br-leg-kurve:nth-last-child(2){border-top:1px solid var(--line)}
.br-leg-kurve + .br-leg-kurve{border-top:0;margin-top:0;padding-top:0}
.br-leg-l{width:14px !important;height:3px !important;border-radius:2px !important;
  margin-top:7px !important}
.br-leg-l--t{background:#10281C}
.br-leg-l--d{background:#2E5FA3}

/* ── Ergebnis auf einen Blick ─────────────────────────────────────────────
   Der Wärmedurchgangskoeffizient stand unter den Kacheln. Wer eine Schicht
   ändert, will die Wirkung sehen, ohne den Blick zu bewegen — sonst rechnet
   man blind und scrollt hinterher.

   Deshalb steht er jetzt oben rechts, direkt neben den Eingaben. Der
   Feuchteschutz rückt darunter. Beide Kernergebnisse liegen damit im
   selben Bildausschnitt wie die Bedienung. */
@media(min-width:1100px){
  
  
  
  
  
  
  
  
  /* Der Wert selbst darf groß sein — er ist das Ergebnis. */
  #brechner .br-gross b{font-size:2.6rem}
}

/* Rechner näher an den Kopfbereich.

   Zwischen Titelbild und erster Eingabe stand ein voller Abschnittsabstand.
   Bei einem Werkzeug ist das verschenkte Höhe — man kommt, um zu rechnen,
   nicht um Luft zu betrachten. */
.section:has(#brechner){padding-top:var(--s-4)}
#brechner{margin-top:0}

/* Legende kompakter: sie stand auf 26 Prozent Breite und ließ den Text
   dreimal umbrechen, während daneben Platz frei blieb. */
@media(min-width:900px){
  
  #brechner .br-legende span{font-size:.74rem;line-height:1.35;gap:6px}
  
}

/* ═══ Endgültige Anordnung des Rechners ═══════════════════════════════════
   Nach Vorgabe:

     Zeile 1   Eingaben  |  Schichtenliste und Bauteilschnitt
     Zeile 2   Wärmedurchgangskoeffizient über die volle Breite
     Zeile 3   Aufbau-Kennwerte links  |  Tauwasser rechts

   Der Gedanke dahinter: oben, was man bedient und sieht. Darunter das
   Ergebnis, für das man gekommen ist. Ganz unten die Details, die man liest,
   wenn das Ergebnis interessant war. */
@media(min-width:1100px){
  
  
  
  
  
  
  
  
  /* Der Schnitt füllt seine zwei Zeilen aus. */
  
  
}
#brechner .br-legende span b{font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--text)}
#brechner .br-legende span{white-space:nowrap}

/* Tauwasser gehört oben rechts, in die freie Fläche über der Legende.
   Dort schaut man hin, wenn man eine Schicht ändert. */
@media(min-width:1100px){
  
  
  
  
  
  
  
  
}
/* Der Koeffizient ist das Ergebnis, nicht Teil des Aufbaus — deutlich
   abgesetzt statt bündig an der Schichtenkachel. */
@media(min-width:1100px){
  
}

/* ═══ Das Ergebnis zuerst ═════════════════════════════════════════════════
   Der Wärmedurchgangskoeffizient stand dreimal an verschiedenen Stellen,
   immer unterhalb von etwas anderem — und war deshalb nie im Blick, wenn
   man eine Schicht geändert hat.

   Jetzt steht er ganz oben über allem und bleibt beim Scrollen kleben.
   Wer eine Dicke eintippt, sieht die Zahl sich ändern, ohne den Blick zu
   heben. Das ist der einzige Grund, warum es diesen Rechner gibt. */
@media(min-width:1100px){
  
  
  
  
  
  
  
  
  /* Kompakt: Wert und Skala nebeneinander statt untereinander. */
  #brechner .br-werte .br-gross{display:flex;align-items:baseline;gap:10px}
  #brechner .br-werte .br-gross b{font-size:2.4rem;line-height:1}
  #brechner .br-werte .label{font-size:.72rem;letter-spacing:.12em;
    text-transform:uppercase;color:var(--text-soft)}
}

/* ═══ Bauteilrechner — verbindliche Anordnung ═════════════════════════════
   Vorgabe Gerhard, 24.08.2026. Eine Regel, kein Nachtrag. Frühere Fassungen
   sind entfernt; sie haben sich gegenseitig überschrieben.

     Zeile 1   Vorlage und Bauteilart   |  Tauwasser        gleich hoch
     Zeile 2   Schichtenliste           |  Bauteilschnitt
     Zeile 3   Wärmedurchgang, volle Breite, nur der Balken
     Zeile 4   Aufbau-Kennwerte, eigene Kachel

   Keine Fixierung des Koeffizienten — sie verdeckt beim Scrollen den Inhalt. */
@media(min-width:1100px){
  #brechner .br-steuer   {grid-row:1;grid-column:1 / 5;align-self:stretch;margin:0}
  #brechner .br-feuchte  {grid-row:1;grid-column:5 / 9;align-self:stretch;margin:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;justify-content:center}
  #brechner .br-schichten{grid-row:2;grid-column:1 / 5;align-self:stretch;margin:0}
  
  #brechner .br-werte    {grid-row:3;grid-column:1 / 9;margin:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--s-3) var(--s-4);position:static;box-shadow:none}
  #brechner .br-kennwerte{grid-row:4;grid-column:1 / 9;margin:0;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--s-3) var(--s-4)}
  #brechner .ausfuehrung {grid-row:5;grid-column:1 / 9;margin:0}
  /* Erste Zeile so kompakt wie möglich */
  #brechner .br-steuer,#brechner .br-feuchte{padding:var(--s-3) var(--s-4)}
  #brechner .br-feuchte h3{margin:0 0 4px;font-size:1.15rem}
  #brechner .br-feuchte p{margin:0;font-size:.86rem;line-height:1.5}
  /* Schnitt füllt seine Kachel */
  
  
}

/* Bauteilschnitt — eine Angabe, sonst nichts. */
/* Der Schnitt steht im DOM vor der Legende — also Zeichnung links, Legende
   rechts. Umgekehrt zugewiesen wurde die Zeichnung in die schmale Spalte
   gedrängt und war kaum größer als eine Briefmarke. */
#brechner .br-bild{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,17%);
  gap:var(--s-3);align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-3)}
#brechner .br-bild svg{width:100%;height:auto;display:block;min-height:280px}
#brechner .br-legende{align-self:center;display:flex;flex-direction:column;gap:6px}
@media(max-width:899px){#brechner .br-bild{grid-template-columns:1fr}}
/* Aufbau und Kennwerte nur auf Wunsch. Wer den U-Wert sehen will, braucht
   sie nicht; wer sie braucht, findet sie mit einem Klick. */
.br-aufbau{border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.br-aufbau > summary{padding:11px var(--s-4);cursor:pointer;font-size:.88rem;
  font-weight:700;color:var(--c-teal-txt);list-style:none}
.br-aufbau > summary::after{content:" \25BE";opacity:.6}
.br-aufbau[open] > summary::after{content:" \25B4"}
.br-aufbau .br-kennwerte{border:0;padding:0 var(--s-4) var(--s-4)}

/* Das alte Verlaufsdiagramm bleibt aus — die Kurven stehen im Schnitt.
   Die Regel dafür hatte ich beim Aufräumen der widersprüchlichen
   Rasterregeln mit entfernt; dadurch war es wieder da. */
.br-verlauf{display:none !important}

/* Der Schnitt füllt seine Kachel. Mit align-items:center stand er mittig
   und ließ oben und unten Luft, weil die Kachel so hoch ist wie die
   Schichtenliste daneben. */
@media(min-width:1100px){
  #brechner .br-bild{align-items:stretch}
  /* Breite zuerst: height:100% zwang das SVG in die Kachelhöhe, und wegen
     des festen Seitenverhältnisses wurde es dabei schmal — daher der
     Leerraum links. */
  #brechner .br-bild svg{width:100%;height:auto;min-height:0}
  #brechner .br-legende{align-self:center}
}

/* Die Bildkachel hatte acht Spalten statt zwei: mehr Kinder als vorgesehen,
   und das Raster füllte sie automatisch auf. Die Zeichnung bekam dadurch
   350 von 659 Pixeln. Jetzt fest zugewiesen — Zeichnung links, Legende
   rechts, alles andere unsichtbar. */
@media(min-width:1100px){
  #brechner .br-bild{grid-template-columns:minmax(0,1fr) 132px !important;
    grid-auto-columns:0 !important;align-items:center}
  #brechner .br-bild > svg{grid-column:1 !important;grid-row:1 !important;
    width:100% !important;height:auto !important;max-width:none !important}
  #brechner .br-bild > .br-legende{grid-column:2 !important;grid-row:1 !important}
  #brechner .br-bild > *:not(svg):not(.br-legende){display:none}
}

/* Position der Bildkachel. Beim Entfernen der alten Regeln ist sie mit
   verlorengegangen — die Kachel wurde automatisch platziert und rutschte
   nach rechts, statt auf der Kante der Tauwasser-Kachel zu stehen. */
@media(min-width:1100px){
  #brechner .br-bild{grid-row:2 !important;grid-column:5 / 9 !important}
  #brechner .br-schichten{grid-row:2 !important;grid-column:1 / 5 !important}
  #brechner .br-steuer{grid-row:1 !important;grid-column:1 / 5 !important}
  #brechner .br-feuchte{grid-row:1 !important;grid-column:5 / 9 !important}
  /* Beide Kacheln je Zeile gleich hoch */
  #brechner .br-steuer,#brechner .br-feuchte,
  #brechner .br-schichten,#brechner .br-bild{align-self:stretch !important}
}

/* Titelzeile zweispaltig, wo der Text die Überschrift ergänzt statt sie
   zu erklären. Standard bleibt einspaltig — dort steht die Erklärung
   direkt unter dem, was sie erklärt. */
@media(min-width:1024px){
  .titelzeile--zwei{grid-template-columns:minmax(0,52fr) minmax(0,48fr);
    gap:var(--s-5);align-items:start}
  .titelzeile--zwei > div:nth-of-type(2){grid-column:1}
  .titelzeile--zwei > p{grid-column:2;max-width:46ch;margin-top:0}
  .titelzeile--zwei h2{max-width:none}
}

/* Aufbau und Rechenweg gehören in die Koeffizientenkachel — beide erklären
   dieselbe Zahl. Nebeneinander zu je der Hälfte, damit die Kachel nicht
   in die Länge wächst; am Handy untereinander. */
/* Diese Regeln setzten die beiden Kacheln ueber die ID #brechner auf feste
   Spalten des Achtspaltenrasters — 1/5 und 5/9. Eine ID schlaegt jede
   Klassenregel, deshalb konnte keine Aenderung an .br-erklaer greifen.
   Die Kacheln liegen aber gar nicht in diesem Raster, sondern in
   .br-erklaer. Am 24.08.2026 entfernt, gemessen statt vermutet. */
@media(min-width:1100px){
  #brechner .br-aufbau,#brechner .br-tabdetails{margin:0;align-self:start}
}
.br-tabdetails{border:1px solid var(--line);border-radius:var(--radius);
  background:#fff}
.br-tabdetails > summary,.br-aufbau > summary{padding:11px var(--s-4);
  cursor:pointer;font-size:.88rem;font-weight:700;color:var(--c-teal-txt);
  list-style:none;display:flex;align-items:center;justify-content:space-between}
.br-tabdetails > summary::-webkit-details-marker,
.br-aufbau > summary::-webkit-details-marker{display:none}
/* Aufbau und Rechenweg nebeneinander, innerhalb der Koeffizientenkachel. */
/* Beide Hälften wirklich gleich breit. 1fr allein genügt nicht: es ist
   minmax(auto,1fr), und die Mindestbreite des Inhalts gewinnt — die
   Tabelle im Rechenweg ist schmaler als die Kennwerte, also bekam sie
   weniger. minmax(0,1fr) erzwingt die Teilung. */
/* Aufbau breiter als Rechenweg — im Verhältnis 61,8 zu 38,2.
   Der Aufbau trägt eine sechsspaltige Kennwerttabelle, der Rechenweg eine
   schmale Liste. Gleich breit hieß: einer zu eng, einer zu leer. */
.br-erklaer{display:grid;
  grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr);
  gap:var(--s-3);margin-top:var(--s-3);align-items:start}
.br-erklaer > details{min-width:0}
.br-erklaer > details{margin:0}
@media(max-width:860px){.br-erklaer{grid-template-columns:1fr}}

/* Gemessen 77,4 statt 61,8 Prozent: die frühere Regel mit 1fr 1fr stand
   später in der Datei und hat gewonnen. Hier steht sie am Ende und mit
   Nachdruck — gemessen wird nach dem Upload, nicht vermutet. */
.br-erklaer{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr) !important}
@media(max-width:860px){
  .br-erklaer{grid-template-columns:1fr !important}
}
/* Schichtenliste und Bauteilkachel auf gleiche Höhe */
@media(min-width:1100px){
  #brechner .br-schichten,#brechner .br-bild{align-self:stretch !important;
    height:auto}
}

/* Innerhalb der Erklärzeile gelten keine Spaltenangaben aus dem großen
   Raster. Der Aufbau trug noch grid-column:1/5 aus der Zeit, als er direkt
   im Achtspaltengitter lag — in einem Zweispaltengitter heißt das
   "Spalte 1 bis 5", also beide plus Überhang. Daher 77 statt 61,8 Prozent. */
/* Diese Regel setzte width:auto !important auf beide Kacheln und schlug
   damit jede Breitensteuerung. Am 24.08.2026 entfernt — die Aufteilung
   regelt jetzt die Flexbox am Dateiende. */
.br-erklaer > .br-aufbau,
.br-erklaer > .br-tabdetails{grid-column:auto;grid-row:auto}

/* ═══ Zwei Befunde aus der Durchsicht aller Seiten ════════════════════════

   1. Das Logo war auf jeder Seite verzerrt. Es trägt width und height aus
      der Datei, das CSS setzt aber eine feste Höhe — ohne width:auto
      staucht der Browser es in beide Richtungen.

   2. Fließtext lief bis 233 Zeichen je Zeile. Beim Zeilenwechsel findet das
      Auge dann den Anfang der nächsten nicht mehr — der Text wirkt
      unaufgeräumt, obwohl jede Zeile für sich in Ordnung ist.

      Keine enge Begrenzung: 95 Zeichen sind großzügig und lassen den Satz
      weiterhin über die Fläche laufen. Nur die Extreme fallen weg. */
.logo-img{width:auto !important;object-fit:contain}
.footer .logo-img{width:auto !important}

.section > .shell > p,
.section > .shell > .lead,
.stage > .shell > p,
.titelzeile > p{max-width:95ch}
.sekt-text p,.kachel p,.benefit span{max-width:none}

/* Die Spektrumgrafik gehört unter den Text, nicht daneben.

   Sie ist breit und flach; in einer Spalte neben einem kurzen Text ergibt
   das ein Loch links unten und eine Grafik, die erst weit unterhalb des
   Textendes beginnt. Meine frühere Regel dafür hing an :has() und griff
   nicht überall.

   Jetzt: Text über die volle Breite, Grafik darunter über die volle
   Breite — beide beginnen an derselben linken Kante. */
.split:has(.dl--breit){display:block}
.split:has(.dl--breit) .split-text{max-width:none}
.split:has(.dl--breit) .split-text p{max-width:95ch}
.split:has(.dl--breit) .split-media{margin-top:var(--s-5);width:100%}
.dl--breit{max-width:none}
.dl--breit img{width:100%;height:auto}
@supports not selector(:has(*)){
  .split-media .dl--breit{width:100%}
}

/* ═══ Leerflächen in zweispaltigen Abschnitten ════════════════════════════
   Gemessen mit einem Rasterpunktverfahren über alle Sektionen: bis zu 71 %
   einer Sektionsfläche leer, meist als zusammenhängender Block links.

   Ursache: Text und Bild stehen nebeneinander und beginnen beide oben. Ist
   der Text kürzer, bleibt darunter eine Fläche in voller Spaltenbreite
   leer — kein Abstand, sondern ein Loch.

   Zwei Maßnahmen:
   Erstens richten sich beide Spalten mittig zueinander aus. Die Leere
   verteilt sich dann auf oben und unten und wirkt als Abstand, nicht als
   Lücke.
   Zweitens greift der Umbruch früher: unter 1180 px stehen die Inhalte
   untereinander statt in zwei ungleich gefüllten Spalten. */
.split,.split--rev{align-items:center}
.split-text{align-self:center}
.split-media{align-self:center}
@media(max-width:1180px){
  .split,.split--rev{grid-template-columns:1fr;gap:var(--s-4)}
  .split--rev{direction:ltr}
}
/* Im Sektionsraster bleibt der Text oben — dort steht rechts eine Tabelle,
   die von oben gelesen wird. */
.sekt-text{align-self:start}

/* Das Wasserzeichen belegt Fläche, ohne Inhalt zu tragen. Es sitzt jetzt
   hinter dem Text statt neben ihm. */
.wasserzeichen{position:absolute;right:0;top:0;pointer-events:none;z-index:0}
.titelzeile{position:relative}
.titelzeile > div,.titelzeile > p{position:relative;z-index:1}


/* Funktionsseite: Text links auf gut einem Drittel, Grafik rechts auf zwei
   Dritteln. Zweispaltiger Satz war der falsche Weg — er füllt die Fläche,
   macht den Text aber unruhig. Nebeneinander ist richtig: links wird
   gelesen, rechts wird geschaut. */
@media(min-width:1180px){
  .split:has(.dl--breit){display:grid;
    grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);
    gap:var(--s-5);align-items:center}
  .split:has(.dl--breit) .split-text{columns:auto;max-width:none}
  .split:has(.dl--breit) .split-text p{max-width:none}
  .split:has(.dl--breit) .split-media{margin-top:0}
  .dl--breit{grid-column:auto}
}

/* Funktionsseite: gemessen 26,9 statt 38,2 Prozent, Text und Grafik
   untereinander statt nebeneinander. Eine frühere Regel setzt display:block
   und gewinnt. Hier steht sie am Ende mit Nachdruck. */
/* Schwelle von 1180 auf 1000: bei 1024 Pixel stapelte die Seite und
   liess eine leere Flaeche stehen. Gemessen am 24.08.2026. */
@media(min-width:1000px){
  .split:has(.dl--breit){display:grid !important;
    grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr) !important;
    gap:var(--s-5);align-items:center}
  .split:has(.dl--breit) > .split-text{grid-column:1;columns:auto !important}
  .split:has(.dl--breit) > .split-media{grid-column:2;margin-top:0 !important}
}

/* Wasserzeichen entfernt. Gemessen am 24.08.2026: es stand auf
   position:relative statt absolute, belegte dadurch 121 Pixel echte
   Hoehe und drueckte den Abschnittstitel 217 Pixel nach unten. Bei
   Deckkraft 0,05 war es praktisch unsichtbar — also nur Leerraum. */
.wasserzeichen{display:none !important}

/* Arbeitsfilme auf der Verarbeiterseite. Drei Filme in einer Reihe,
   Hochformat 9:16 wie die Aufnahmen. Ab 900 Pixel untereinander. */
.filmgalerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-4);margin-top:var(--s-4)}
.filmgalerie .fg-e{margin:0}
.filmgalerie video{width:100%;aspect-ratio:9/16;object-fit:cover;
  border-radius:var(--r-2);background:#0d1f16;display:block}
.filmgalerie figcaption{margin-top:.6rem;line-height:1.35}
.filmgalerie figcaption b{display:block;font-size:1rem}
.filmgalerie figcaption span{display:block;font-size:.9rem;opacity:.75}
.film-notiz{margin-top:var(--s-3);font-size:.9rem;opacity:.7}
@media(max-width:900px){
  .filmgalerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){
  .filmgalerie{grid-template-columns:minmax(0,1fr)}}

/* Bildband Untergruende (verarbeiter.html). Drei Bilder in einer Reihe,
   16:9, gleiche Hoehe. Ab 860 Pixel untereinander. */
.bildband{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-4);margin-top:var(--s-4)}
.bildband figure{margin:0}
.bildband img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-2);display:block}
.bildband figcaption{margin-top:.6rem;line-height:1.35}
.bildband figcaption b{display:block;font-size:1rem}
.bildband figcaption span{display:block;font-size:.9rem;opacity:.75}
@media(max-width:860px){.bildband{grid-template-columns:minmax(0,1fr)}}

/* Voraussetzungsliste in der Partnerkarte. Vorher brach jede Zeile um und
   liess einzelne Woerter stehen. Jede Zeile passt jetzt in eine Zeile. */
.vorauss{list-style:none;margin:0;padding:0}
.vorauss li{padding:.42rem 0;border-top:1px solid rgba(16,40,28,.10)}
.vorauss li:first-child{border-top:0}

/* Fragenblock zweispaltig. Sechs Fragen in einer Spalte ergaben eine lange
   Liste neben leerer Flaeche. Drei je Spalte, Plus deutlich sichtbar.
   Gerhard, 24.08.2026. */
@media(min-width:820px){
  .faq{columns:2;column-gap:var(--s-5)}
  .faq > details{break-inside:avoid;-webkit-column-break-inside:avoid}
}
.faq > details > summary{position:relative;padding-right:2.4rem}
.faq > details > summary::after{
  position:absolute;right:.35rem;top:50%;transform:translateY(-50%);
  color:var(--c-gruen-hell,#7ec384);font-size:1.55rem;font-weight:600;
  opacity:1;line-height:1}
.dark .faq > details > summary::after,
.faq--dunkel > details > summary::after{color:#8fd39a}
.faq > details[open] > summary::after{transform:translateY(-50%) rotate(180deg)}

/* Produktseite: Kennzahlen als Kachel neben der Portfolio-Ueberschrift.
   Goldener Schnitt 61,8 zu 38,2, gleiche Hoehe wie die Ueberschrift.
   Vorher lag der Kasten ueber dem Kopfbild und verdeckte die Reflexion. */
.titel-kachel{display:grid;gap:var(--s-5);align-items:stretch}
@media(min-width:940px){
  .titel-kachel{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr)}
}
.kennkachel{border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(255,255,255,.60);padding:var(--s-4);
  display:flex;flex-direction:column;justify-content:center}
.kennkachel b{display:block;font-size:var(--t-h3);letter-spacing:-.03em;
  color:var(--c-teal-txt)}
.kennkachel span{display:block;font-size:var(--t-small);color:var(--c-grey);
  margin-top:4px}
.kennkachel hr{border:0;border-top:1px solid var(--line);margin:var(--s-3) 0}

/* Kopfbild produkte: Schleier rechts frueher durchsichtig, damit die
   Reflexion an den Sphaeren zu sehen ist. Links bleibt der Text lesbar. */
.phead:not(:has(.phead-box)) .veil{
  background:linear-gradient(90deg,rgba(10,26,18,.82) 0%,rgba(10,26,18,.58) 38.2%,
             rgba(10,26,18,.14) 61.8%,rgba(10,26,18,0) 82%)}

/* Sprungleiste: kraeftiger und echte Knoepfe statt blosser Textlinks.
   Sie klebt unter dem Kopf, nicht am Fensterrand — sonst verschwindet sie
   hinter der Kopfleiste. Gerhard, 24.08.2026. */
.sprung{position:sticky;top:var(--kopfhoehe,64px);z-index:45;
  background:var(--c-teal-dunkel,#12301f);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 6px 18px rgba(10,26,18,.16)}
.sprung .shell{display:flex;gap:.5rem;padding:.6rem var(--s-4);
  overflow-x:auto;scrollbar-width:none}
.sprung a{flex:none;font-size:var(--t-small);font-weight:600;
  color:rgba(253,253,251,.92);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.16);
  border-radius:999px;padding:.42rem .95rem;white-space:nowrap;
  transition:background .18s ease,color .18s ease}
.sprung a:hover,.sprung a:focus-visible{background:#fff;color:var(--c-teal-txt,#12301f);
  border-color:#fff}
@media(max-width:760px){
  .sprung .shell{gap:.4rem;padding:.5rem var(--s-3)}
  .sprung a{padding:.38rem .8rem}}

/* Systemliste: aufklappbare Karte je System, mit Bild links im goldenen
   Schnitt. Ersetzt die frueheren Einzeiler. Gerhard, 24.08.2026. */
.sysliste{margin-top:var(--s-3)}
.sysliste .sys{border:1px solid rgba(255,255,255,.14);border-radius:var(--r-2);
  background:rgba(255,255,255,.045);margin-bottom:.7rem;overflow:hidden}
.sysliste .sys[open]{background:rgba(255,255,255,.085)}
.sysliste .sys > summary{display:flex;align-items:baseline;gap:var(--s-3);
  flex-wrap:wrap;cursor:pointer;list-style:none;padding:1rem var(--s-4);
  position:relative;padding-right:3rem}
.sysliste .sys > summary::-webkit-details-marker{display:none}
.sysliste .sys > summary b{font-size:1.06rem}
.sysliste .sys > summary em{margin-left:auto;font-style:normal;
  font-size:var(--t-small);opacity:.72}
.sysliste .sys > summary::after{content:"+";position:absolute;right:1.1rem;
  top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:600;
  color:#8fd39a;line-height:1}
.sysliste .sys[open] > summary::after{content:"\2013"}
.sys-inhalt{display:grid;gap:var(--s-4);padding:0 var(--s-4) var(--s-4)}
@media(min-width:880px){
  .sys-inhalt{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);
    align-items:start}}
.sys-bild{margin:0}
.sys-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-2);display:block}
.sys-einl{margin:0 0 var(--s-3);line-height:1.55}
.sys-technik{margin:var(--s-3) 0 0;padding-top:var(--s-3);
  border-top:1px solid rgba(255,255,255,.14)}
.sys-tz{display:grid;gap:.2rem .9rem;padding:.35rem 0}
@media(min-width:620px){.sys-tz{grid-template-columns:minmax(0,32%) minmax(0,1fr)}}
.sys-tz dt{font-weight:600;font-size:var(--t-small)}
.sys-tz dd{margin:0;font-size:var(--t-small);opacity:.85}

/* Langzeitvergleich: Text und Objektbild in einer Reihe, damit das
   Verbrauchsdiagramm ohne Scrollen sichtbar wird. Bild ueber die volle
   Hoehe der Textspalte. Gerhard, 24.08.2026. */
.lz-kopf{display:grid;gap:var(--s-4);margin-top:var(--s-3)}
@media(min-width:900px){
  .lz-kopf{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr);
    align-items:stretch}}
.lz-text > p:first-child{margin-top:0}
.lz-text > p:last-child{margin-bottom:0}
.lz-media{display:flex}
.lz-media .dl{margin:0;width:100%;display:flex;flex-direction:column}
.lz-media .dl img{width:100%;height:100%;min-height:220px;object-fit:cover;
  flex:1 1 auto}
#langzeit .lead--w{margin-bottom:var(--s-3)}
#langzeit .jahre{margin-top:var(--s-4)}

/* Merkmalsliste der Systemkarten. Vorher lief sie unter .merk und erbte
   den gruenen Balken eines ganz anderen Bausteins. */
.sys-merk{list-style:none;margin:0;padding:0}
.sys-merk li{position:relative;padding:.34rem 0 .34rem 1.15rem;
  line-height:1.5;font-size:.97rem}
.sys-merk li::before{content:"";position:absolute;left:0;top:.85em;
  width:5px;height:5px;border-radius:50%;background:#8fd39a}

/* Systemwahl: neun Knoepfe, darunter eine Kachel mit dem gewaehlten
   System. Loest die neunzeilige Klappliste ab. Gerhard, 24.08.2026. */
.systemwahl{margin-top:var(--s-4)}
.sys-leiste{display:grid;gap:.55rem;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.sys-knopf{text-align:left;cursor:pointer;font:inherit;
  background:rgba(255,255,255,.07);color:rgba(253,253,251,.92);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-2);
  padding:.6rem .8rem;transition:background .18s ease,border-color .18s ease}
.sys-knopf b{display:block;font-size:.98rem;line-height:1.25}
.sys-knopf span{display:block;font-size:.8rem;opacity:.7;margin-top:2px}
.sys-knopf:hover{background:rgba(255,255,255,.13)}
.sys-knopf.ist-aktiv{background:#fff;color:var(--c-teal-txt,#12301f);
  border-color:#fff}
.sys-knopf.ist-aktiv span{opacity:.72}
.sys-buehne{margin-top:var(--s-4);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-2);background:rgba(255,255,255,.05);
  padding:var(--s-4)}
.sys-feld{display:grid;gap:var(--s-4)}
@media(min-width:880px){
  .sys-feld{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr);
    align-items:start}}
.sys-feld[hidden]{display:none}
.sys-feld h4{margin:0 0 .5rem;font-size:1.3rem;letter-spacing:-.02em}
.sys-bild{margin:0}
.sys-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--r-2);display:block}
.sys-bild figcaption{margin-top:.5rem;font-size:.85rem;opacity:.7}
.sys-einl{margin:0 0 var(--s-3);line-height:1.55}

/* Abgrenzungskasten "Was die Schicht nicht ist": kompakt gesetzt, aber
   ueber die volle Hoehe der Textspalte links. Vorher schwebte er auf
   halber Hoehe in der Mitte. Gerhard, 24.08.2026. */
.split:has(.abgrenzung){align-items:stretch}
.split:has(.abgrenzung) > .split-media{display:flex}
.abgrenzung{width:100%;display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line);border-left:3px solid var(--c-red,#b3452e);
  border-radius:var(--r-2);background:rgba(255,255,255,.62);
  padding:var(--s-4)}
.abgrenzung > b{display:block;font-size:1.06rem;letter-spacing:-.01em;
  margin-bottom:.6rem}
.abgrenzung ul{list-style:none;margin:0;padding:0}
.abgrenzung li{position:relative;padding:.42rem 0 .42rem 1.1rem;
  font-size:.95rem;line-height:1.45;border-top:1px solid var(--line)}
.abgrenzung li:first-child{border-top:0}
.abgrenzung li::before{content:"";position:absolute;left:0;top:1.02em;
  width:6px;height:1.5px;background:var(--c-red,#b3452e)}

/* Kacheln in zweispaltigen Abschnitten stehen oben, nicht auf halber
   Hoehe. Vorher entstand ueber jeder rechten Kachel eine Luecke, weil der
   Text links laenger war. Gerhard, 24.08.2026. */
.split{align-items:start}
.split > .split-media > *{margin-top:0}
.split > .split-media > .dl,
.split > .split-media > .card,
.split > .split-media > .note{margin-top:0}
/* Ausnahmen: Bausteine, die bewusst mitwachsen */
.split:has(.abgrenzung),
.split:has(.dl--breit){align-items:stretch}

/* Die neun Systembilder gleich hoch, unabhaengig von der Textlaenge.
   Die Kachel darunter wird dadurch flacher und gleichmaessig. */
.sys-feld{align-items:start}
.sys-bild img{height:clamp(190px,24vw,300px);aspect-ratio:auto}
.sys-buehne{padding:var(--s-3) var(--s-4) var(--s-4)}
.sys-feld h4{margin-top:0}
.sys-merk li{padding:.28rem 0 .28rem 1.05rem}
.sys-technik{margin-top:var(--s-3);padding-top:var(--s-3)}
.sys-tz{padding:.28rem 0}

/* Kennwerte: Text und Sphaerenkachel auf einer Ebene, der Lead steht in
   der Textspalte statt darueber. Spart die Hoehe des Leadblocks.
   Gerhard, 24.08.2026. */
.kw-kopf{display:grid;gap:var(--s-4);margin-top:var(--s-3)}
@media(min-width:900px){
  .kw-kopf{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr);
    align-items:stretch}}
.kw-text > .lead{margin-top:0}
.kw-text > p:last-of-type{margin-bottom:var(--s-3)}
.kw-media{display:flex}
.kw-media .dl{margin:0;width:100%;display:flex;flex-direction:column}
.kw-media .dl img{width:100%;height:100%;min-height:200px;object-fit:cover;
  flex:1 1 auto}

/* Der zweite Kasten im Paar bekam ueber ".merk + .merk" einen oberen
   Abstand — gedacht fuer untereinander stehende Kaesten. Im Raster
   nebeneinander ergab das den Versatz von 18 Pixeln, den Gerhard am
   24.08.2026 gemeldet hat. */
.merk-paar > .merk + .merk{margin-top:0}
.merk-paar{align-items:stretch}
.merk-paar > .merk{display:flex;flex-direction:column}

/* "Zwei Zahlen, zwei Richtungen": erklaert, warum es zwei Reflexionswerte
   gibt und dass der TSR-Wert das Ultraviolett einschliesst. Gerhard hat
   am 24.08.2026 zu Recht gefragt, ob UV mitreflektiert wird. */
.zwei-zahlen{margin-top:var(--s-5);padding-top:var(--s-4);
  border-top:1px solid var(--line)}
.zwei-zahlen > h3{margin:0 0 .5rem;font-size:1.45rem;letter-spacing:-.02em}
.zz-paar{display:grid;gap:var(--s-4);margin-top:var(--s-4)}
@media(min-width:900px){.zz-paar{grid-template-columns:1fr 1fr;
  align-items:stretch}}
.zz-karte{border:1px solid var(--line);border-radius:var(--r-2);
  padding:var(--s-4);background:rgba(255,255,255,.55);
  display:flex;flex-direction:column}
.zz-karte--sonne{border-top:3px solid #B06A2C}
.zz-karte--bauteil{border-top:3px solid #2E6B45}
.zz-kopf{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.4rem}
.zz-kopf b{font-size:1.05rem}
.zz-kopf span{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  opacity:.6}
.zz-wert{margin:.2rem 0 var(--s-3);font-size:1.9rem;font-weight:700;
  letter-spacing:-.03em;line-height:1.1}
.zz-karte--sonne .zz-wert{color:#B06A2C}
.zz-karte--bauteil .zz-wert{color:#2E6B45}
.zz-wert i{display:block;font-style:normal;font-size:.82rem;font-weight:500;
  letter-spacing:0;color:var(--c-grey);margin-top:2px}
.zz-karte p{margin:0 0 .7rem;line-height:1.55;font-size:.96rem}
.zz-karte p:last-child{margin-bottom:0}
.zz-liste{list-style:none;margin:0 0 .8rem;padding:0}
.zz-liste li{padding:.34rem 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.zz-liste li:first-child{border-top:0}
.zz-liste b{font-size:.94rem}
.zz-liste span{font-size:.86rem;color:var(--c-grey)}
.zz-fussnote{margin-top:var(--s-3);font-size:.86rem;color:var(--c-grey);
  line-height:1.5;max-width:88ch}

/* Funktionsseite: die Textspalte hat nur 38,2 Prozent Breite, daneben ein
   grosses Diagramm. Damit die Ueberschrift dagegen besteht, wird sie hier
   groesser gesetzt als sonst. Gerhard, 24.08.2026. */
@media(min-width:1000px){
  .split:has(.dl--breit) > .split-text > h2{
    font-size:clamp(2.1rem,3.1vw,2.9rem);line-height:1.06;
    letter-spacing:-.035em;margin-bottom:.8rem}
}

/* Textspalte der Funktionsseite oben ausrichten statt mittig, damit die
   Ueberschrift auf Hoehe der Grafik beginnt und unten Platz fuer den
   Bedeutungsblock bleibt. Gerhard, 24.08.2026. */
@media(min-width:1000px){
  .split:has(.dl--breit){align-items:start !important}
}
.bedeutung{margin-top:var(--s-4);padding-top:var(--s-3);
  border-top:2px solid var(--c-gruen,#2E6B45)}
.bedeutung .eyebrow{margin-bottom:.6rem}
.bedeutung ul{list-style:none;margin:0;padding:0}
.bedeutung li{padding:.6rem 0;border-top:1px solid var(--line);
  font-size:.95rem;line-height:1.5}
.bedeutung li:first-child{border-top:0}
.bedeutung li b{display:block;margin-bottom:.1rem}

/* Bedeutungsblock: die Trennlinie oben faellt weg, stattdessen traegt eine
   echte Ueberschrift den Abschnitt. Gerhard, 24.08.2026. */
.bedeutung{border-top:0 !important;padding-top:0;margin-top:var(--s-5)}
.bedeutung > h3{margin:0 0 .8rem;font-size:clamp(1.35rem,2vw,1.62rem);
  line-height:1.15;letter-spacing:-.02em;color:var(--c-teal-txt,#12301f)}

/* Zwei Gedanken untereinander: die Zwischenueberschriften klebten am Text
   und waren kaum groesser als die Fliessschrift — der Block sah aus wie
   eine graue Flaeche. Gerhard, 24.08.2026. */
.split--gedanken .split-text > h3{
  font-size:clamp(1.18rem,1.7vw,1.38rem);line-height:1.2;
  letter-spacing:-.015em;margin:0 0 .55rem}
.split--gedanken .split-text > h3 + p{margin-top:0}
.split--gedanken .split-text > p{margin-bottom:0}
.split--gedanken .split-text > p + h3{margin-top:var(--s-4);
  padding-top:var(--s-3);border-top:1px solid var(--line)}

/* Eigenschaftsband der Einblasdaemmung. Auf der alten Seite standen die elf
   Eigenschaften als Bildchen nebeneinander. Gerhard, 24.08.2026. */
.eig-band{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--s-4)}
.eig-band span{font-size:.86rem;font-weight:600;padding:.36rem .8rem;
  border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.6);color:var(--c-teal-txt,#12301f)}
/* Helle Variante der Systemwahl fuer Abschnitte auf hellem Grund. */
.section--sanft .sys-knopf{background:rgba(16,40,28,.05);
  color:var(--c-teal-txt,#12301f);border-color:var(--line)}
.section--sanft .sys-knopf:hover{background:rgba(16,40,28,.10)}
.section--sanft .sys-knopf.ist-aktiv{background:var(--c-teal-txt,#12301f);
  color:#fff;border-color:var(--c-teal-txt,#12301f)}
.section--sanft .sys-buehne{background:rgba(255,255,255,.62);
  border-color:var(--line)}
.section--sanft .sys-merk li::before{background:var(--c-gruen,#2E6B45)}
.section--sanft .sys-technik{border-top-color:var(--line)}

/* Auszeichnung des Herstellers. Die Aussage gehoert klar zugeordnet: sie
   betrifft IsoFireTec, nicht PSE-Austria. Gerhard, 24.08.2026. */
.auszeichnung{display:grid;gap:var(--s-4);margin-top:var(--s-5);
  padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-2);
  background:rgba(255,255,255,.6);align-items:center}
@media(min-width:820px){
  .auszeichnung{grid-template-columns:minmax(0,38.2fr) minmax(0,61.8fr)}}
.ausz-marke{font-weight:700;font-size:clamp(1.3rem,2.2vw,1.75rem);
  line-height:1.15;letter-spacing:-.025em;color:var(--c-teal-txt,#12301f);
  padding:var(--s-4);border-radius:var(--r-2);text-align:center;
  background:linear-gradient(150deg,rgba(46,107,69,.16),rgba(46,107,69,.05))}
.ausz-text h3{margin:0 0 .5rem;font-size:1.28rem;letter-spacing:-.02em}
.ausz-text p{margin:0 0 .6rem;line-height:1.55;font-size:.97rem}
.ausz-nach{color:var(--c-grey);font-size:.92rem}
.auszeichnung .ctas{margin-top:.4rem}

/* Fassaden-Check: mitlaufender Ergebnisstreifen.
   Gemessen am 24.08.2026: das Ergebnis lag 1468 Pixel unter dem ersten
   Eingabefeld, die weiteren Felder bei 2907, 5018 und 5131 Pixel. Wer oben
   etwas aenderte, sah die Wirkung nirgends. Der Streifen klebt unter der
   Kopfleiste und traegt die vier Kernzahlen mit. */
.fc-band{position:sticky;top:var(--kopfhoehe,64px);z-index:44;
  margin:0 0 var(--s-4);border-radius:var(--r-2);
  background:var(--c-teal-dunkel,#12301f);color:#fff;
  box-shadow:0 8px 22px rgba(10,26,18,.20);
  transition:box-shadow .25s ease}
.fc-band-inhalt{display:flex;align-items:center;gap:var(--s-4);
  flex-wrap:wrap;padding:.7rem var(--s-4)}
.fc-bw{display:flex;flex-direction:column;line-height:1.15}
.fc-bw span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  opacity:.66}
.fc-bw b{font-size:1.42rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.fc-bw--neu b{color:#8fd39a}
.fc-bw--proz{margin-left:auto;text-align:right}
.fc-bw--proz b{color:#8fd39a}
.fc-bw--dicke b{font-size:1.05rem;font-weight:600}
.fc-bpfeil{font-size:1.3rem;opacity:.55}
.fc-band-link{flex:none;font-size:.82rem;font-weight:600;color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:.34rem .8rem;text-decoration:none;white-space:nowrap}
.fc-band-link:hover{background:#fff;color:var(--c-teal-txt,#12301f)}

/* Aufblitzen, wenn sich ein Wert geaendert hat. */
@keyframes fcPuls{
  0%{box-shadow:0 8px 22px rgba(10,26,18,.20);background:var(--c-teal-dunkel,#12301f)}
  22%{box-shadow:0 0 0 3px rgba(143,211,154,.85),0 8px 22px rgba(10,26,18,.20);
      background:#194028}
  100%{box-shadow:0 8px 22px rgba(10,26,18,.20);background:var(--c-teal-dunkel,#12301f)}}
.fc-band--neu{animation:fcPuls .62s ease-out}
@media(prefers-reduced-motion:reduce){.fc-band--neu{animation:none}}

@media(max-width:760px){
  .fc-band-inhalt{gap:var(--s-3);padding:.55rem var(--s-3)}
  .fc-bw b{font-size:1.2rem}
  .fc-bw--proz{margin-left:0}
  .fc-bw--dicke,.fc-band-link{display:none}}

/* ══ Fassaden-Check, Neuaufteilung 24.08.2026 ═════════════════════════
   Vorher: alles untereinander auf 7059 Pixel, das Ergebnis 1468 Pixel
   unter dem ersten Eingabefeld. Jetzt links die drei Schritte als
   Klappkarten, rechts die gruene Ergebniskachel, die mitlaeuft. */
.fc-raster{display:grid;gap:var(--s-4)}
@media(min-width:1040px){
  .fc-raster{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr);
    align-items:start}}
.fc-links{min-width:0;display:flex;flex-direction:column;gap:.7rem}

/* Die drei Schritte: Ueberschrift, aufklappen, aendern. Immer nur einer
   offen — das regelt das name-Attribut. */
.fc-schritt{border:1px solid var(--line);border-radius:var(--r-2);
  background:rgba(255,255,255,.62);overflow:hidden}
.fc-schritt[open]{background:#fff;box-shadow:0 2px 12px rgba(10,26,18,.07)}
.fc-schritt > summary{display:flex;align-items:center;gap:var(--s-3);
  cursor:pointer;list-style:none;padding:.85rem var(--s-4);
  position:relative;padding-right:2.8rem}
.fc-schritt > summary::-webkit-details-marker{display:none}
.fc-schritt > summary::after{content:"+";position:absolute;right:1.1rem;
  top:50%;transform:translateY(-50%);font-size:1.45rem;font-weight:600;
  color:var(--c-gruen,#2E6B45);line-height:1}
.fc-schritt[open] > summary::after{content:"\2013"}
.fc-schritt .fc-nr{flex:none;display:grid;place-items:center;
  width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--c-teal-txt,#12301f);color:#fff}
.fc-schritt .fc-nr i{font-style:normal;font-size:.82rem;font-weight:700}
.fc-schritt .fc-kopf{display:flex;flex-direction:column;line-height:1.25;
  min-width:0}
.fc-schritt .fc-kopf b{font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c-grey)}
.fc-schritt .fc-kopf > span{font-size:1.04rem;font-weight:600;
  letter-spacing:-.01em}
.fc-schritt-inhalt{padding:0 var(--s-4) var(--s-4);
  border-top:1px solid var(--line);margin-top:.2rem;padding-top:var(--s-3)}

/* Rechte Spalte: gruene Ergebniskachel, laeuft beim Scrollen mit. */
.fc-rechts{min-width:0}
@media(min-width:1040px){
  .fc-rechts{position:sticky;top:calc(var(--kopfhoehe,64px) + var(--s-3));
    max-height:calc(100vh - var(--kopfhoehe,64px) - var(--s-4));
    overflow:auto;scrollbar-width:thin;
    border-radius:var(--r-2)}}
.fc-rechts > .fc-ergebnis{margin:0;border-radius:var(--r-2) var(--r-2) 0 0}
/* Die Fussnoten in der rechten Spalte standen als heller Text auf hellem
   Grund — dasselbe "weiss auf weiss", das schon einmal aufgefallen ist.
   Sie bekommen jetzt durchgehend dunkle Schrift. */
.fc-rechts .disclaim{margin:0;padding:.7rem var(--s-4);
  color:var(--c-grey,#5A6560) !important;
  font-size:.82rem;line-height:1.45;background:transparent}
.fc-rechts .fc-schnitt .disclaim{padding:.5rem 0 0}
/* Erklaerungen unten in derselben Kachel, aufklappbar. */
.fc-rechts > .fc-hwb{margin:0;border:0;border-radius:0 0 var(--r-2) var(--r-2);
  background:var(--c-teal-dunkel,#12301f);color:#fff;
  border-top:1px solid rgba(255,255,255,.14)}
.fc-rechts > .fc-hwb > summary{color:#fff;padding:.8rem var(--s-4)}
.fc-rechts > .fc-hwb > summary span{color:rgba(253,253,251,.62)}
.fc-rechts > .fc-hwb .fc-hwb-inhalt{padding:0 var(--s-4) var(--s-4)}
.fc-rechts > .fc-hwb .fc-hilf{color:rgba(253,253,251,.72)}
.fc-rechts > .fc-hwb label{color:rgba(253,253,251,.82)}

/* Aufblitzen der Kachel, wenn sich ein Wert geaendert hat. */
@keyframes fcPulsKachel{
  0%{box-shadow:0 0 0 0 rgba(143,211,154,0)}
  25%{box-shadow:0 0 0 3px rgba(143,211,154,.9)}
  100%{box-shadow:0 0 0 0 rgba(143,211,154,0)}}
.fc-ergebnis--neu{animation:fcPulsKachel .6s ease-out}
@media(prefers-reduced-motion:reduce){.fc-ergebnis--neu{animation:none}}

/* Der Bauteilschnitt sitzt jetzt in der dunklen Ergebniskachel. Er ist fuer
   hellen Grund gezeichnet und bekommt deshalb eine eigene helle Flaeche,
   sonst faellt der Kontrast unter den Grenzwert. */
.fc-rechts .fc-schnitt{background:#fdfdfb;color:var(--c-teal-txt,#12301f);
  border-radius:var(--r-2);padding:var(--s-3);margin:var(--s-3) var(--s-4)}
.fc-rechts .fc-schnitt text,.fc-rechts .fc-schnitt tspan{fill:#12301f}
.fc-rechts .fc-schnitt .label,.fc-rechts .fc-schnitt figcaption{
  color:var(--c-grey)}

/* Zwei Fehler aus dem Umbau, live gemessen am 24.08.2026:
   1. Die Ziffer stand in rgb(67,112,57) auf einem Kreis in rgb(47,90,42) —
      gruen auf gruen, praktisch unsichtbar. Eine aeltere Regel fuer .fc-nr i
      gewann gegen die Farbe am Elternelement.
   2. Eine geerbte summary-Regel mit justify-content:space-between schob die
      Ueberschrift an den rechten Rand, links blieb die Flaeche leer. */
.fc-schritt > summary{justify-content:flex-start !important}
.fc-schritt .fc-nr,
.fc-schritt .fc-nr i{color:#fff !important}
.fc-schritt .fc-nr{background:var(--c-teal-txt,#12301f) !important;
  border:0 !important;padding:0 !important;flex:none}
.fc-schritt .fc-kopf{margin-right:auto}

/* Die langen Erklaerungen in der Ergebniskachel brauchten mehr Platz als
   die Zahlen selbst. Sie stehen jetzt unten und aufgeklappt nur auf Wunsch.
   Gerhard, 24.08.2026. */
.fc-rechts .fc-klapp{margin:0;border-top:1px solid rgba(255,255,255,.14);
  background:transparent}
.fc-rechts .fc-klapp > summary{display:flex;align-items:baseline;gap:.6rem;
  flex-wrap:wrap;cursor:pointer;list-style:none;padding:.72rem var(--s-4);
  position:relative;padding-right:2.6rem;color:#fff}
.fc-rechts .fc-klapp > summary::-webkit-details-marker{display:none}
.fc-rechts .fc-klapp > summary b{font-size:.97rem;font-weight:600}
.fc-rechts .fc-klapp > summary span{font-size:.82rem;
  color:rgba(253,253,251,.58)}
.fc-rechts .fc-klapp > summary::after{content:"+";position:absolute;
  right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.35rem;
  font-weight:600;color:#8fd39a;line-height:1}
.fc-rechts .fc-klapp[open] > summary::after{content:"\2013"}
.fc-rechts .fc-klapp .fc-klapp-inhalt,
.fc-rechts .fc-klapp > .disclaim{padding:0 var(--s-4) var(--s-4);
  font-size:.88rem;line-height:1.5}
.fc-rechts .fc-klapp .fc-klapp-inhalt{color:rgba(253,253,251,.80)}
.fc-rechts .fc-klapp .fc-klapp-inhalt b{color:#fff}

/* Auswahlfelder links flacher. Sie waren rund 90 Pixel hoch, dadurch war
   ein Schritt allein schon eine halbe Bildschirmhoehe. */
.fc-links .fc-w{padding:.55rem .8rem !important;min-height:0 !important}
.fc-links .fc-w b{font-size:.97rem;line-height:1.2}
.fc-links .fc-w span{font-size:.8rem;line-height:1.25;margin-top:1px}
.fc-links .fc-wahl{gap:.5rem}
.fc-links .fc-hilf{font-size:.88rem;line-height:1.45;margin:0 0 .7rem}
.fc-schritt-inhalt{padding-top:.7rem}

/* Die Kachel scrollt intern — dadurch waren die grossen Zahlen nach oben
   weggescrollt und man sah nur noch Erklaertext. Der Zahlenblock bleibt
   jetzt am Kopf der Kachel stehen. Gerhard, 24.08.2026. */
.fc-rechts .fc-zahlen{position:sticky;top:0;z-index:3;
  background:var(--c-teal-dunkel,#12301f);
  padding-top:var(--s-3);margin-top:0;
  box-shadow:0 10px 14px -8px rgba(10,26,18,.55)}
.fc-rechts > .fc-ergebnis{padding-top:0}
/* Die Werte plakativer. */
.fc-rechts .fc-zahl b{font-size:clamp(2.3rem,4.4vw,3.1rem);line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.fc-rechts .fc-zahl .label{font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase}
.fc-rechts .fc-nebenwerte{padding-bottom:var(--s-3)}
.fc-rechts .fc-nebenwerte b{font-size:1.28rem;letter-spacing:-.03em}
/* Klappzeilen ueber die volle Kachelbreite. */
.fc-rechts .fc-klapp{width:100%}
.fc-rechts .fc-klapp .fc-praez{padding:0 var(--s-4) var(--s-4);
  font-size:.88rem;line-height:1.5;color:rgba(253,253,251,.78)}
.fc-rechts .fc-klapp .fc-praez b{color:#fff}

/* Der U-Wert-Weg steht jetzt oben in Schritt 02 und sieht wie ein Knopf aus,
   nicht wie eine Fussnote. Gerhard, 24.08.2026. */
.fc-links .fc-uwert{margin:0 0 var(--s-3);border:1px solid var(--c-gruen,#2E6B45);
  border-radius:999px;background:rgba(46,107,69,.07)}
.fc-links .fc-uwert[open]{border-radius:var(--r-2);
  background:rgba(46,107,69,.05)}
.fc-links .fc-uwert > summary{display:flex;align-items:baseline;gap:.55rem;
  flex-wrap:wrap;cursor:pointer;list-style:none;padding:.5rem 2.4rem .5rem 1rem;
  position:relative}
.fc-links .fc-uwert > summary::-webkit-details-marker{display:none}
.fc-links .fc-uwert > summary b{font-size:.95rem;
  color:var(--c-teal-txt,#12301f)}
.fc-links .fc-uwert > summary span{font-size:.82rem;color:var(--c-grey)}
.fc-links .fc-uwert > summary::after{content:"+";position:absolute;right:.95rem;
  top:50%;transform:translateY(-50%);font-size:1.2rem;font-weight:600;
  color:var(--c-gruen,#2E6B45);line-height:1}
.fc-links .fc-uwert[open] > summary::after{content:"\2013"}
.fc-links .fc-uwert-inhalt{padding:0 1rem 1rem}

/* Alle Auswahlfelder auf eine Hoehe. Die Reihen 02 und 03 waren hoeher als
   Reihe 01, weil die Zweitzeile dort anders gesetzt war. */
.fc-links .fc-w{min-height:3.4rem !important;display:flex !important;
  flex-direction:column;justify-content:center;gap:1px}
.fc-links .fc-w b,.fc-links .fc-w span{display:block}
.fc-links .fc-w--eng{min-height:3.4rem !important}

/* Die rechte Kachel scrollte intern — dabei rutschte der Inhalt unter den
   festgehaltenen Zahlenblock. Das interne Scrollen entfaellt; die Kachel
   klebt als Ganzes und ist so hoch, wie sie sein muss.
   Schichttabelle und Wandquerschnitt stehen jetzt links, nebeneinander auf
   gleicher Hoehe. Gerhard, 24.08.2026. */
@media(min-width:1040px){
  .fc-rechts{max-height:none;overflow:visible}}
.fc-rechts .fc-zahlen{position:static;box-shadow:none}

.fc-aufbau{display:grid;gap:var(--s-4);margin-top:.7rem;align-items:stretch}
@media(min-width:900px){
  .fc-aufbau{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr)}}
.fc-aufbau-tab,.fc-aufbau-bild{border:1px solid var(--line);
  border-radius:var(--r-2);background:#fff;padding:var(--s-3);
  display:flex;flex-direction:column;min-width:0}
.fc-aufbau-bild .fc-schnitt{margin:0;background:transparent;padding:0;
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.fc-aufbau-tab .uw-tabhuelle{margin:0;overflow-x:auto}
.fc-aufbau-tab .uw-tab{font-size:.88rem;width:100%}
.fc-aufbau-tab .uw-tab th,.fc-aufbau-tab .uw-tab td{padding:.38rem .5rem}

/* Schritt 1: die zugeklappten Schritte links waren rund 90 Pixel hoch.
   Weniger Innenabstand, kleinerer Kreis, engere Zeilen. */
.fc-schritt > summary{padding:.55rem var(--s-4) !important;
  padding-right:2.6rem !important}
.fc-schritt .fc-nr{width:1.75rem !important;height:1.75rem !important}
.fc-schritt .fc-nr i{font-size:.74rem}
.fc-schritt .fc-kopf b{font-size:.7rem}
.fc-schritt .fc-kopf > span{font-size:.98rem}
.fc-links{gap:.45rem}

/* Der Text im aufgeklappten Voraussetzungsblock war zu blass. */
.fc-rechts .fc-klapp .fc-klapp-inhalt{color:rgba(253,253,251,.92) !important}
.fc-rechts .fc-klapp .fc-klapp-inhalt a{color:#8fd39a}

/* Schichttabelle und Wandquerschnitt als zwei Kacheln nebeneinander,
   goldener Schnitt. Gerhard, 24.08.2026. */
/* Die Kacheln standen zuerst in der rechten Spalte — die ist nur 505 Pixel
   breit, dort quetschten sich Tabelle und Schnitt auf 257 und 159 Pixel und
   die Werte ragten heraus. Sie gehoeren in die breite linke Spalte.
   Gemessen am 24.08.2026. */
.fc-paar2{display:grid;gap:var(--s-3);margin:.6rem 0 0;align-items:stretch}
@media(min-width:760px){
  .fc-paar2{grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr)}}
.fc-kachel{background:#fdfdfb;color:var(--c-teal-txt,#12301f);
  border-radius:var(--r-2);padding:var(--s-3);min-width:0;
  display:flex;flex-direction:column;justify-content:center}
.fc-kachel .uw-tabhuelle{margin:0;overflow-x:auto}
.fc-kachel .uw-tab{width:100%;font-size:.86rem}
.fc-kachel .uw-tab th,.fc-kachel .uw-tab td{padding:.34rem .45rem}
.fc-kachel .fc-schnitt{margin:0;padding:0;background:transparent}
.fc-kachel text,.fc-kachel tspan{fill:#12301f}
.fc-kachel .disclaim{color:var(--c-grey,#5A6560) !important;padding:.5rem 0 0}

/* Der U-Wert-Knopf sitzt jetzt auf dem freien dritten Platz neben den beiden
   Daemmstoffen — dort war Platz, und die Zeile darueber zog Titel und Zusatz
   ueber die ganze Breite auseinander. Gerhard, 24.08.2026. */
.fc-stoffreihe{display:grid;gap:.5rem;align-items:stretch}
@media(min-width:700px){
  .fc-stoffreihe{grid-template-columns:2fr 1fr}
  .fc-stoffreihe .fc-wahl--zwei{grid-template-columns:1fr 1fr}}
.fc-links .fc-uwert{margin:0 !important;border-radius:var(--r-2) !important;
  display:flex;flex-direction:column;justify-content:center}
.fc-links .fc-uwert > summary{flex-direction:column;align-items:flex-start !important;
  gap:1px !important;justify-content:center !important;
  padding:.5rem 2.2rem .5rem .8rem !important;min-height:3.4rem}
.fc-links .fc-uwert > summary b{font-size:.97rem;line-height:1.2}
.fc-links .fc-uwert > summary span{font-size:.8rem;line-height:1.25}

/* Der aufgeklappte U-Wert-Knopf darf die Reihe nicht hoeher machen: Er
   wächst in die Breite, nicht in die Hoehe. Gerhard, 24.08.2026. */
@media(min-width:700px){
  .fc-stoffreihe{align-items:start}
  .fc-links .fc-uwert[open]{position:relative}
  .fc-links .fc-uwert[open] .fc-uwert-inhalt{
    position:absolute;top:100%;right:0;z-index:6;width:min(28rem,80vw);
    margin-top:.4rem;padding:.9rem;border:1px solid var(--c-gruen,#2E6B45);
    border-radius:var(--r-2);background:#fff;
    box-shadow:0 12px 26px rgba(10,26,18,.16)}
  .fc-links .fc-uwert[open] .fc-uwert-inhalt .fields{
    display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:end}
  .fc-links .fc-uwert[open] .fc-uwert-inhalt .btn{margin:0;white-space:nowrap}}

/* Der U-Wert-Bereich ist kein Klappknopf mehr: Das Feld steht sofort da,
   auf derselben Hoehe wie die Daemmstoffknoepfe, dafuer breiter.
   Gerhard, 24.08.2026. */
@media(min-width:700px){
  .fc-stoffreihe{grid-template-columns:1.35fr 1fr}}
.fc-links .fc-uwert > summary{display:none !important}
.fc-links .fc-uwert{min-height:3.4rem;justify-content:center;
  padding:.45rem .8rem !important}
.fc-links .fc-uwert[open] .fc-uwert-inhalt{
  position:static !important;width:auto !important;margin:0 !important;
  padding:0 !important;border:0 !important;background:transparent !important;
  box-shadow:none !important}
.fc-links .fc-uwert .fields{display:grid !important;
  grid-template-columns:1fr auto;gap:.5rem;align-items:center;margin:0}
.fc-links .fc-uwert .field{margin:0}
.fc-links .fc-uwert label{display:block;font-size:.78rem;line-height:1.2;
  color:var(--c-grey);margin-bottom:2px}
.fc-links .fc-uwert input{width:100%;padding:.3rem .55rem;font-size:.95rem}
.fc-links .fc-uwert .btn{margin:0;padding:.34rem .7rem;font-size:.8rem;
  white-space:nowrap;align-self:end}



}



/* Der Rechenweg enthaelt eine Tabelle. Deren Zellen wurden zu Rasterspalten
   von .br-erklaer, weil das Detailelement selbst kein eigener Formatkontext
   war — daher acht Spalten statt zwei und die springende Aufteilung.
   contain:layout macht aus jeder Kachel einen eigenen Kontext; das Raster
   sieht dann nur noch die beiden Kacheln.
   Gemessen 24.08.2026: 1440 px zu 979/333, offen 718/594. */
@media(min-width:900px){
  .br-erklaer{display:grid !important;
    grid-template-columns:minmax(0,61.8fr) minmax(0,38.2fr) !important;
    grid-auto-flow:row !important;align-items:start}
  .br-erklaer > .br-aufbau,
  .br-erklaer > .br-tabdetails{contain:layout;min-width:0;
    grid-row:1 !important}
  .br-erklaer > .br-aufbau{grid-column:1 !important}
  .br-erklaer > .br-tabdetails{grid-column:2 !important}
}
.br-tabdetails{overflow-x:auto}
.br-tabdetails table{width:100%;font-size:.82rem}

/* Kachel in Kachel: .br-werte traegt bereits Rahmen, weissen Grund und
   Radius; die beiden Klappkacheln darin hatten dieselbe Zeichnung noch
   einmal. Innen genuegt eine feine Trennlinie. Gemessen 24.08.2026. */
.br-werte > .br-erklaer > .br-aufbau,
.br-werte > .br-erklaer > .br-tabdetails{
  border:0 !important;border-radius:0 !important;
  background:transparent !important;box-shadow:none !important;
  padding-left:0 !important;padding-right:0 !important}
@media(min-width:900px){
  .br-werte > .br-erklaer{gap:var(--s-5)}
  .br-werte > .br-erklaer > .br-tabdetails{
    border-left:1px solid var(--line) !important;
    padding-left:var(--s-4) !important}
}
@media(max-width:899px){
  .br-werte > .br-erklaer > .br-tabdetails{
    border-top:1px solid var(--line) !important;
    padding-top:var(--s-3) !important}
}

/* ── Dokumentenverweis ───────────────────────────────────────────────────
   Zwei PDF-Karten im Foerderungsabschnitt der Endkundenseite. Raster statt
   Flexbox, weil Titel und Formatangabe uebereinander in derselben Spalte
   stehen muessen — nebeneinander bricht die Zeile auf schmalen Schirmen.
   Symbol links, Pfeil rechts, Text dazwischen. */
.dokument{display:grid;grid-template-columns:auto 1fr auto;
  column-gap:13px;row-gap:2px;align-items:center;
  padding:13px 21px;margin-bottom:8px;
  border:1px solid var(--line);border-radius:8px;background:#fff;
  text-decoration:none;color:inherit;
  transition:border-color .18s ease,box-shadow .18s ease}
.dokument::before{content:"\25A4";grid-row:1/3;font-size:21px;line-height:1;
  color:var(--c-teal)}
.dokument::after{content:"\2193";grid-row:1/3;grid-column:3;
  color:var(--c-teal);font-size:16px;transition:transform .18s ease}
.dokument b{grid-column:2;font-size:15px;line-height:1.35}
.dokument span{grid-column:2;font-size:13px;opacity:.68}
.dokument:hover,.dokument:focus-visible{
  border-color:var(--c-teal);box-shadow:0 2px 13px rgba(0,0,0,.07)}
.dokument:hover::after{transform:translateY(3px)}