/* THERMENMEISTER · Design System v7 — "Zeile, Satz, Band"
   ---------------------------------------------------------------------------
   v7 aendert die FORM, nicht die Palette. Die Farbwelt aus v6 (hell
   durchgehend, ein Blau als Akzent, sparsam) gilt unveraendert weiter; der
   ganze Abschnitt darunter bleibt deshalb stehen und ist weiterhin die
   Wahrheit ueber Farbe.

   Was v7 aendert:

   1. Die Notdienstleiste ueber der Kopfleiste ist weg. Sie war das erste
      Element der Seite und trug eine Auskunft, die im Seitenkopf ohnehin noch
      einmal stand. Zwei Leisten uebereinander waren zwei Balken vor dem
      Inhalt.

   2. Der Seitenkopf ist nicht mehr der senkrechte Bruch (links Text, rechts
      Foto), sondern gestapelt: Zeile, Satz, Band. Begruendung steht beim
      Block ".hero".

   3. Anzeige gegen Fliesstext ueber die Breitenachse von Archivo statt ueber
      eine zweite Schriftfamilie. Begruendung steht bei "Typografie".

   4. Sechs Seitenfamilien mit eigener Form. Begruendung steht bei
      "Form je Seitenfamilie".

   Was bewusst NICHT passiert ist: kein zweiter Akzent, keine Akzentfarbe je
   Familie, keine dunkle Flaeche zurueck. Alle drei standen zur Debatte und
   sind aus denselben Gruenden verworfen worden, die unten schon stehen.
   ---------------------------------------------------------------------------

   THERMENMEISTER · Design System v6 — "Hell durchgehend"
   ---------------------------------------------------------------------------
   Vorgeschichte, damit niemand einen der Wege noch einmal geht: Graphit mit
   Blaupausen-Raster, Blau mit weichen Karten, Emailleblau als Fläche, Blau mit
   Fotogrund im Aufbau der Vorgängerseite, danach monochrom, danach Ton auf
   Graphit, danach Ton auf Creme, danach Weiß mit vier dunklen Bändern.
   Alles abgelehnt.

   Was jetzt steht: Weiß als Arbeitsgrund, Hellblau für die Bänder und Karten,
   ein weißliches Grau für den Fuß, und ein kräftigeres Blau als einziger
   Akzent, sparsam eingesetzt. Es gibt keine dunkle Fläche mehr.

   Der Bruch zur Vorversion: Notdienstleiste, Sparten-Karte, Meister-Karte,
   Abschlussband und Fuß waren Graphit. Fünf schwere Blöcke auf einer sonst
   weißen Seite lasen sich als fünf Unterbrechungen. Jetzt tragen dieselben
   Stellen Hellblau (#DEEBFA) beziehungsweise das weißliche Grau des Fußes,
   und die Seite läuft von oben bis unten in einer Helligkeit durch.

   Das kostet die Trennung durch Helligkeitssprung. Sie kommt zurück über
   Fläche gegen Kontur: was auf dem Band liegt, ist weiß gefüllt; was auf Weiß
   liegt, bekommt eine Haarlinie. Deshalb steht die zweite Sparten-Karte auf
   Weiß mit Rahmen und nicht mehr auf Hellgrau.

   "Sparsam" ist die eigentliche Regel. Blau als Akzent erscheint auf dem
   ruhenden Bildschirm an genau drei Sorten von Stellen: am Anrufknopf, an
   Preisen und am aktiven Navigationspunkt. Kleinlabels, Häkchen,
   Hinweiskästen und Bezirks-Chips bleiben grau. Sobald der Akzent auch
   dorthin wandert, ist er nicht mehr selten, sondern Dekoration.

   Ein zweiter Blauton ist reine Lesbarkeit, keine zweite Farbe: --akzent
   trägt weiße Schrift auf gefüllten Knöpfen, hat als Schrift auf dem
   hellblauen Band aber nur 4:1. Dort steht --akzent-lese.

   Die Grautöne sind zum Blau hin getönt, damit sie neben dem Akzent nicht
   schmutzig wirken. Reines Schwarz kommt nicht vor.

   Fotos laufen ohne jeden Filter. Ein Filter darüber macht aus echter Arbeit
   eine Stimmung, und die Farbe im Bild ist das Lebendigste an der Seite.

   Der Seitenkopf ist ein harter senkrechter Bruch: links die ruhige Fläche mit
   Headline und Anrufknopf, rechts das Foto randscharf. Kein Verlauf über dem
   Bild, keine schwebende Karte darauf. Die Preise stehen im Band direkt
   darunter, wo sie in voller Breite lesbar sind.

   Alles hängt an den Tokens direkt hier drunter. */

:root{
  color-scheme: light only;

  /* Bandfläche. Trägt Notdienstleiste, Sparten-Karte, Meister-Karte und
     Abschlussband. Der Name stammt aus der Zeit, in der das hier Graphit war;
     er bleibt, weil er in Seitenvorlagen und Altnamen hängt. Dunkel ist er
     nicht mehr: Text darauf steht in --ink und --grau. */
  --nacht:#DEEBFA;
  --nacht-2:#E9F1FC;
  --nacht-3:#F1F6FD;
  --nacht-linie:rgba(34,48,63,.15);
  --nacht-linie-2:rgba(34,48,63,.07);

  /* Fuellung auf einem Band: Weiss, halb durchscheinend. Auf dem hellen Blau
     ist Weiss die Aufhellung, die frueher die Weiss-Deckkraft auf Graphit war. */
  --band-fuell:rgba(255,255,255,.78);
  --band-fuell-2:rgba(255,255,255,.46);

  /* Der Fuss ist kein Blauband, sondern das hellste Grau der Seite. Sonst
     laufen Abschlussband und Fuss zu einem einzigen blauen Block zusammen. */
  --fuss:#F3F7FB;

  /* Weiß als Arbeitsgrund, darüber zwei sehr helle Blaustufen für Flächen
     und Linien. Alle Grautöne sind zum Blau hin getönt, damit sie zum Akzent
     passen und nicht schmutzig neben ihm stehen. */
  --grund:#FFFFFF;
  --grund-2:#F7FAFE;
  --grund-3:#EAF2FD;
  --linie:#E5EDF7;
  --linie-stark:#CCDAEB;

  --ink:#22303F;
  --ink-tief:#16222E;
  --grau:#556579;
  --grau-hell:#667284;

  /* Akzent, und zwar sparsam. Er markiert Preise, den Anrufknopf und den
     aktiven Zustand, sonst nichts. Kleinlabels und Häkchen bleiben bewusst
     grau, sonst wird aus "selten" schnell "überall".
     #1A6FDD trägt weiße Schrift mit 4,8:1. Heller ginge optisch, dann fällt
     der Anrufknopf aber unter 4,5:1 und ist der eine Knopf, der die Seite
     bezahlt. Die Aufhellung passiert deshalb im Grund, nicht im Akzent. */
  --akzent:#1A6FDD;
  --akzent-tief:#155FC4;
  --akzent-blass:#EAF2FD;
  /* Blau als Schrift auf einem hellblauen Band. Der Knopfton hat dort nur
     4:1 und faellt durch, dieser Ton traegt auf Weiss wie auf Band. */
  --akzent-lese:#1257BC;
  --akzent-hell:var(--akzent-lese);   /* Altname, jetzt der Leseton */

  /* Fremdmarke. Der Knopf traegt das echte WhatsApp-Gruen. Weisse Schrift
     kommt darauf nur auf 2:1 und ist am Telefon im Hellen nicht lesbar,
     deshalb steht die Schrift in Ink: 6,8:1 auf derselben Flaeche. */
  --wa:#25D366;
  --wa-knopf:#25D366;
  --wa-knopf-tief:#20BD5A;

  --ff:"Archivo","Helvetica Neue",Arial,sans-serif;

  /* Schriftgroessen. Vorher standen 24 einzelne Werte zwischen .62rem und
     .97rem im Stylesheet, ausgewuerfelt statt gestuft: bei 16px Wurzel sind
     das 10px bis 15px. Die halbe Seite lief dadurch als Kleingedrucktes,
     obwohl es Fliesstext war. Jetzt gibt es fuenf Stufen mit 13px als
     Untergrenze, und keine Stufe darunter. */
  --fs-label:.8125rem;   /* 13px · Versallabels, Schluessel, Fusszeilen-Titel */
  --fs-mini:.875rem;     /* 14px · Kleingedrucktes, Rechtliches */
  --fs-klein:.9375rem;   /* 15px · Meta, Bildunterschriften, Navigation */
  --fs-text:1rem;        /* 16px · Nebentext, der wirklich gelesen wird */
  --fs-gross:1.0625rem;  /* 17px · wie der Fliesstext */

  --max:1240px;
  --max-weit:1440px;
  --max-text:780px;
  --pad:clamp(20px,4vw,40px);
  /* Linke Kante der Inhaltsspalte, auch außerhalb von .wrap nutzbar. Der
     Vollton-Block im Kopf läuft bis zum Bildschirmrand, sein Text muss
     trotzdem exakt unter der Marke in der Kopfleiste stehen. */
  --rand: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));

  --gut-eng:clamp(34px,4vw,56px);
  --gut:clamp(58px,7vw,102px);
  --gut-weit:clamp(88px,10vw,150px);

  --r:8px;
  --r-s:6px;
  --r-l:12px;
  --r-pill:999px;

  --sch-1:0 1px 2px rgba(34,48,63,.06);
  --sch-2:0 1px 2px rgba(34,48,63,.05), 0 10px 26px -14px rgba(34,48,63,.22);
  --sch-3:0 2px 4px rgba(34,48,63,.05), 0 24px 56px -22px rgba(34,48,63,.32);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-aus:cubic-bezier(.22,.61,.36,1);

  /* Altnamen. Einzelne Seitenvorlagen setzen diese Tokens inline. */
  --emaille:var(--akzent);
  --emaille-tief:var(--ink-tief);
  --emaille-hell:var(--grau);
  --emaille-blass:var(--grund-2);
  --blau:var(--akzent);
  --blau-tief:var(--ink-tief);
  --blau-hell:var(--grau);
  --blau-blass:var(--grund-2);
  --blue:var(--akzent);
  --steel:var(--grau);
  --white:var(--grund);
  --line:var(--linie);
  --rule:var(--linie);
  --rule-hair:var(--linie);
  --rule-hell:var(--nacht-linie);
  --tinte:var(--ink);
  --gruen:var(--ink);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--grund);
  color:var(--ink);
  font-family:var(--ff);
  font-size:17px;
  line-height:1.62;
  font-variation-settings:"wdth" 100,"wght" 400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:2px}
.band-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--ink)}
::selection{background:var(--akzent-blass);color:var(--ink)}

/* ---------- Typografie ---------- */
/* Anzeige gegen Fliesstext. Archivo ist variabel und hat neben der Gewichts-
   auch eine Breitenachse von 85% bis 125%; benutzt wurde bisher nur "wdth" 100,
   auf jeder Ueberschrift und in jedem Absatz. Damit trug eine einzige Schrift-
   einstellung die ganze Seite, und Ueberschriften unterschieden sich vom Text
   nur durch Groesse und Fettung.

   Jetzt laufen H1 und H2 schmal (wdth 88) und schwer (wght 820), der Fliesstext
   bleibt auf 100/400. Das ist der Kontrast, den sonst eine zweite Schriftfamilie
   liefert, nur ohne zweite Datei: die Breitenachse steckt in der Woff2, die
   ohnehin geladen wird, und kostet kein einziges Byte extra. Die in fonts.css
   verworfene Serife bleibt damit verworfen.

   Schmale Versalien vertragen mehr Groesse, ohne die Zeile zu sprengen: die H1
   steht deshalb deutlich groesser als vorher und bricht trotzdem auf weniger
   Zeilen. */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.06;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(2.3rem,1.4rem + 3.4vw,4.6rem);font-variation-settings:"wdth" 88,"wght" 820;letter-spacing:-.035em;line-height:.97}
h2{font-size:clamp(1.8rem,1.3rem + 2.1vw,3.15rem);font-variation-settings:"wdth" 88,"wght" 800;letter-spacing:-.03em;line-height:1.03}
h3{font-size:clamp(1.16rem,1.05rem + .58vw,1.5rem);font-variation-settings:"wdth" 94,"wght" 720;letter-spacing:-.018em;line-height:1.24}
h4{font-size:1.08rem;font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.012em;line-height:1.34}
p{margin:0 0 1.05em;max-width:68ch}
.lead{font-size:clamp(1.03rem,1rem + .38vw,1.2rem);line-height:1.58;color:var(--grau);max-width:56ch}
strong,b{font-variation-settings:"wdth" 100,"wght" 680}

.eyebrow,.label{
  font-family:var(--ff);
  font-variation-settings:"wdth" 100,"wght" 650;
  letter-spacing:.115em;
  text-transform:uppercase;
  font-size:var(--fs-label);
}
.eyebrow{display:block;color:var(--grau);margin:0 0 16px}
.eyebrow.on-dark{color:var(--grau)}
.mono{font-variation-settings:"wdth" 100,"wght" 400;letter-spacing:0}
.num,.zahl{font-variant-numeric:tabular-nums}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap-weit{max-width:var(--max-weit)}
.wrap-narrow{max-width:var(--max-text)}
section{padding-block:var(--gut)}
section.eng{padding-block:var(--gut-eng)}
section.weit{padding-block:var(--gut-weit)}
.vollbreit{width:100vw;margin-inline:calc(50% - 50vw)}
.band-dark{background:var(--nacht);color:var(--grau)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--ink)}
.band-dark p,.band-dark .lead{color:var(--grau)}
.band-paper{background:var(--grund-2)}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-aus),transform .6s var(--ease-aus)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Buttons ----------
   Gefüllt heißt fast schwarz. Es gibt keine Signalfarbe, Wichtigkeit entsteht
   aus Fläche und Position. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ff);font-size:1rem;
  font-variation-settings:"wdth" 100,"wght" 690;
  letter-spacing:-.008em;
  padding:15px 26px;min-height:52px;
  border:1px solid transparent;border-radius:var(--r-s);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease-aus),border-color .2s var(--ease-aus),
             color .2s var(--ease-aus),transform .2s var(--ease-aus),box-shadow .2s var(--ease-aus);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--sch-2)}
.btn-dark:hover{background:var(--ink-tief);border-color:var(--ink-tief)}
/* Die Hauptaktion trägt als einziges Flächenelement den Akzent. */
.btn-flame,.btn-blue,.btn-water{background:var(--akzent);color:#fff;border-color:var(--akzent);box-shadow:var(--sch-2)}
.btn-flame:hover,.btn-blue:hover,.btn-water:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);box-shadow:var(--sch-3)}
/* Auf dem hellblauen Band ist Weiß keine Füllung mehr, sondern der Grund
   selbst. Gefüllt heißt dort deshalb dasselbe wie überall: der Akzent. */
.btn-hell{background:var(--akzent);color:#fff;border-color:var(--akzent);box-shadow:var(--sch-2)}
.btn-hell:hover{background:var(--akzent-tief);border-color:var(--akzent-tief);box-shadow:var(--sch-3)}
.btn-ghost{background:var(--grund);color:var(--ink);border-color:var(--linie-stark);box-shadow:var(--sch-1)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ghost.on-dark{background:var(--grund);color:var(--ink);border-color:var(--linie-stark);box-shadow:var(--sch-1)}
.btn-ghost.on-dark:hover{background:var(--grund);border-color:var(--ink);box-shadow:var(--sch-2)}
/* WhatsApp: gefüllt im Markengrün. Der Knopf steht neben dem blauen
   Anrufknopf und wird als zweiter Weg erkannt, bevor jemand liest. */
.btn-wa{background:var(--wa-knopf);color:var(--ink);border-color:var(--wa-knopf);box-shadow:var(--sch-2)}
.btn-wa:hover{background:var(--wa-knopf-tief);border-color:var(--wa-knopf-tief);box-shadow:var(--sch-3)}
.btn-wa svg{color:currentColor}
/* Die zweite Zeile steht sonst auf .76 Deckung. Auf dem hellen Gruen faellt
   sie damit unter 4,5:1, deshalb hier voll deckend. */
.btn-wa .sub{opacity:1;color:var(--ink-tief)}
.btn-wa.on-dark{background:var(--wa-knopf);color:var(--ink);border-color:var(--wa-knopf);box-shadow:var(--sch-2)}
.btn-wa.on-dark:hover{background:var(--wa-knopf-tief);border-color:var(--wa-knopf-tief);box-shadow:var(--sch-3)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-gross{font-size:1.04rem;padding:17px 30px;min-height:58px}
.btn .sub{display:block;font-size:var(--fs-label);font-variation-settings:"wdth" 100,"wght" 500;opacity:.76;letter-spacing:0;margin-top:2px}
.btn-zwei{flex-direction:column;align-items:flex-start;gap:0;text-align:left;padding-block:11px}

/* ---------- Kopf ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--grund);border-bottom:1px solid var(--linie)}
.site-header.gescrollt{box-shadow:var(--sch-2);border-bottom-color:transparent}
.site-header .wrap{max-width:var(--max-weit)}
.header-bar{display:flex;align-items:center;gap:clamp(12px,2.2vw,30px);min-height:74px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-mark{width:36px;height:36px;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-name{font-variation-settings:"wdth" 100,"wght" 770;font-size:1.06rem;letter-spacing:.005em;text-transform:uppercase;color:var(--ink)}
.brand-sub{font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;color:var(--grau);margin-top:5px;font-variation-settings:"wdth" 100,"wght" 600}
.site-footer .brand-name{color:var(--ink)}
.site-footer .brand-sub{color:var(--grau)}
.nav{display:flex;gap:clamp(1px,.35vw,7px);margin-left:auto;align-items:center;min-width:0}
.nav a{font-size:var(--fs-klein);font-variation-settings:"wdth" 100,"wght" 520;text-decoration:none;color:var(--grau);
  padding:9px clamp(7px,.75vw,11px);border-radius:var(--r-s);white-space:nowrap;
  transition:color .18s,background-color .18s}
.nav a:hover{color:var(--ink);background:var(--grund-2)}
.nav a.active{color:var(--akzent);font-variation-settings:"wdth" 100,"wght" 680;background:var(--akzent-blass)}
.header-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:clamp(6px,1.4vw,18px)}
.header-tel{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  background:var(--akzent);color:#fff;border-radius:var(--r-s);
  padding:12px 20px;font-variation-settings:"wdth" 100,"wght" 690;font-size:var(--fs-text);
  font-variant-numeric:tabular-nums;box-shadow:var(--sch-2);
  transition:background-color .2s var(--ease-aus),transform .2s var(--ease-aus),box-shadow .2s var(--ease-aus);
}
.header-tel:hover{background:var(--akzent-tief);transform:translateY(-1px);box-shadow:var(--sch-3)}
.header-tel svg{width:17px;height:17px}
.burger{display:none;background:var(--grund);border:1px solid var(--linie-stark);border-radius:var(--r-s);
  padding:13px;color:var(--ink);cursor:pointer}
.burger:hover{border-color:var(--ink)}
#mobnav{border-top:1px solid var(--linie);background:var(--grund)}
#mobnav .wrap{display:flex;flex-direction:column;padding-block:10px 18px}
#mobnav a{padding:14px 12px;text-decoration:none;font-size:1rem;border-radius:var(--r-s);color:var(--grau)}
#mobnav a.active{font-variation-settings:"wdth" 100,"wght" 700;color:var(--akzent);background:var(--akzent-blass)}
#mobnav a.btn{color:#fff;padding:15px 26px;justify-content:center}
@media(max-width:1200px){.nav{display:none}.burger{display:inline-flex}}
@media(max-width:560px){.header-tel .tel-num{display:none}.header-tel{padding:13px}}

/* ---------- Seitenkopf: Zeile, Satz, Band ----------
   Der senkrechte Bruch (links Text auf Flaeche, rechts Foto randscharf) ist
   raus. Er hat die Headline in eine halbe Spalte gesperrt: auf dem Desktop
   standen der wichtigsten Zeile der Seite rund 575px zur Verfuegung, weshalb
   sie auf zwei kurze Zeilen umbrechen musste und trotzdem knapp war. Jede
   Verlaengerung des Satzes hat den Anrufknopf unter die Kante gedrueckt.

   Die neue Form nimmt die Reihenfolge, in der jemand liest:
     Zeile   die H1 ueber die volle Spaltenbreite, schmal und gross
     Satz    darunter zwei Spalten - links was der Betrieb macht,
             rechts der Preis und der Knopf, den man drueckt
     Band    das Foto quer darunter, randlos, ohne Text darauf

   Das Foto traegt damit keine Schrift mehr und braucht keinen Verlauf, der
   Text lesbar macht. Es steht als Bild fuer sich, und der Knopf steht auf
   Weiss statt auf einem Bildrand.

   Ein Nebeneffekt zaehlt fuer die Ladezeit: LCP ist jetzt die H1 als Text und
   nicht mehr das grosse Foto rechts. Text rendert, sobald die Schrift da ist. */
.hero{
  padding-block:clamp(38px,4.6vw,72px) 0;
  background:var(--grund);
  color:var(--grau);
}
.hero-kopf{padding-bottom:clamp(34px,4vw,56px)}
.hero h1{color:var(--ink);max-width:19ch;margin-bottom:clamp(26px,3.2vw,42px)}

/* Zwei Spalten, bewusst ungleich: der Satz links liest sich, der Block rechts
   wird bedient. Gleich breit waeren sie zwei Absaetze nebeneinander. */
.hero-satz{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,72px);
  align-items:start;
  border-top:1px solid var(--linie);
  padding-top:clamp(24px,2.6vw,34px);
}
.hero .lead{color:var(--grau);margin-bottom:20px;max-width:44ch}
.hero-sagt .beweis{margin-bottom:0}
.hero-tut{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
/* Die beiden Knoepfe standen nebeneinander unterschiedlich breit, weil ihr
   Text unterschiedlich lang ist. In einer schmalen Spalte liest sich das als
   Versehen. Untereinander auf voller Spaltenbreite haben sie dieselbe Kante,
   und der Anrufknopf bleibt der groessere von beiden, weil er zuerst kommt. */
.hero-tut .btn-row{width:100%;flex-direction:column;align-items:stretch;gap:10px}
.hero-tut .btn{width:100%}
.hero-tut .preis-gross{margin:0}
.hero-tut .hero-cta{margin:0}
.hero-tut .hero-alt{margin:0}

/* Das Band laeuft von Rand zu Rand. Es sitzt als direktes Kind der Sektion
   ausserhalb von .wrap und braucht deshalb keinen 100vw-Trick, der auf einer
   Seite mit Scrollbalken ohnehin um deren Breite danebenliegt. */
.hero-band{
  aspect-ratio:16/6;
  overflow:hidden;
  background:var(--grund-3);
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
}
/* Die Fotos laufen unbearbeitet. Ein Filter darueber macht aus echter Arbeit
   eine Stimmung, und die Farbe im Bild ist das Lebendigste an der Seite. */
.hero-band img{width:100%;height:100%;object-fit:cover;object-position:56% 44%}

/* Einspaltiger Kopf fuer 404 und /danke: dort gibt es kein Foto. */
.hero-einfach{display:block;padding-block:clamp(48px,6vw,84px)}
.hero-einfach .wrap{max-width:var(--max)}

@media(max-width:920px){
  .hero{padding-top:clamp(28px,6vw,44px)}
  .hero h1{max-width:none}
  .hero-satz{grid-template-columns:1fr;gap:26px}
  .hero-tut{width:100%}
  .hero-band{aspect-ratio:3/2}
}
@media(max-width:560px){
  .hero-band{aspect-ratio:4/3}
}

.beweis{
  display:flex;flex-wrap:wrap;gap:7px 20px;margin:0 0 26px;padding:0;max-width:none;
  font-size:var(--fs-klein);color:var(--grau);font-variation-settings:"wdth" 100,"wght" 520;
}
.beweis span{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.beweis span::before{
  content:"";width:11px;height:8px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5.2 5 9.2 13 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5.2 5 9.2 13 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
}
.band-dark .beweis{color:var(--grau)}

.hero-cta{margin:0 0 16px;gap:12px}
.hero-alt{margin:0;font-size:var(--fs-klein);color:var(--grau-hell)}
.hero-alt a{color:var(--grau);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.hero-alt a:hover{color:var(--akzent)}
.band-dark .hero-alt{color:var(--grau)}
.band-dark .hero-alt a{color:var(--ink)}

.trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin:26px 0 0;padding-top:22px;
  border-top:1px solid var(--nacht-linie);font-size:var(--fs-klein);color:var(--grau);max-width:none;
}
.trust b{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 650}
.trust>span+span::before{
  content:"";display:inline-block;width:3px;height:3px;background:var(--linie-stark);
  margin:0 13px;vertical-align:middle;
}

.tel-gross{
  display:inline-block;text-decoration:none;color:var(--ink);
  font-size:clamp(1.6rem,1.05rem + 2vw,2.3rem);
  font-variation-settings:"wdth" 100,"wght" 760;
  letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;
}
.tel-gross:hover{text-decoration:underline;text-underline-offset:6px;color:var(--akzent)}
.band-dark .tel-gross{color:var(--ink)}
.tel-gross .vor{display:block;font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650;color:var(--grau);margin-bottom:9px}
.band-dark .tel-gross .vor{color:var(--grau)}

.preis-gross{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;flex-wrap:wrap;max-width:none}
.preis-gross .pk{font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650;color:var(--grau)}
.preis-gross .pv{font-size:clamp(1.55rem,1.1rem + 1.8vw,2.2rem);line-height:1;
  font-variation-settings:"wdth" 100,"wght" 760;letter-spacing:-.03em;color:var(--akzent);font-variant-numeric:tabular-nums}

/* ---------- Preisband unter dem Kopf ----------
   Ersetzt die schwebende Karte im Bild. In voller Breite lesbar, jede Spalte
   ist ein Link auf die Leistungsseite. */
.preisband{background:var(--grund);border-bottom:1px solid var(--linie)}
.preisband-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.preisband-grid>a,.preisband-grid>div{
  display:flex;flex-direction:column;gap:6px;padding:24px clamp(16px,2vw,28px);
  border-left:1px solid var(--linie);text-decoration:none;color:inherit;
  transition:background-color .18s var(--ease-aus);
}
.preisband-grid>a:hover{background:var(--grund-2)}
/* Der Akzent markiert Preise, nicht jede Angabe. Preiszellen sind Links,
   Faktenzellen sind divs, deshalb reicht der Elementtyp zur Unterscheidung. */
.preisband-grid>a .v{color:var(--akzent)}
/* Faktenzellen tragen ganze Wörter statt Zahlen und brauchen deshalb eine
   Stufe weniger, sonst reißt eine lange Angabe das Band auf drei Zeilen auf. */
.preisband-grid>div .v{font-size:clamp(1rem,.94rem + .32vw,1.15rem);line-height:1.3;text-wrap:balance}
.preisband-grid>:first-child{border-left:0;padding-left:0}
.preisband .k{font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;color:var(--grau);
  font-variation-settings:"wdth" 100,"wght" 640}
.preisband .v{font-variation-settings:"wdth" 100,"wght" 750;
  font-size:clamp(1.05rem,.95rem + .5vw,1.36rem);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.026em;display:flex;align-items:baseline;gap:5px}
.preisband .v small{font-size:var(--fs-label);text-transform:uppercase;color:var(--grau);
  font-variation-settings:"wdth" 100,"wght" 620;letter-spacing:.11em}
.preisband .d{font-size:var(--fs-mini);color:var(--grau);line-height:1.4}
@media(max-width:900px){
  .preisband-grid{grid-template-columns:repeat(2,1fr)}
  .preisband-grid>a,.preisband-grid>div{border-left:0;border-top:1px solid var(--linie);padding-inline:0}
  .preisband-grid>:nth-child(even){padding-left:clamp(16px,4vw,28px);border-left:1px solid var(--linie)}
  .preisband-grid>:nth-child(-n+2){border-top:0}
}

/* ---------- Faktenblock ---------- */
.facts{background:var(--grund);color:var(--ink);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.facts-head{padding:14px 20px;font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;
  font-variation-settings:"wdth" 100,"wght" 650;color:var(--grau);
  border-bottom:1px solid var(--linie);background:var(--grund-2)}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--linie)}
.fact:last-child{border-bottom:0}
.fact-k{font-size:var(--fs-klein);color:var(--grau)}
.fact-v{font-variation-settings:"wdth" 100,"wght" 720;font-size:1.04rem;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums;letter-spacing:-.018em}
.fact-v.is-blue,.fact-v.is-flame,.fact-v.is-water{color:var(--ink)}

/* ---------- Zwei Sparten, bewusst ungleich ---------- */
.worlds{display:grid;grid-template-columns:1.22fr .78fr;gap:clamp(18px,2vw,26px);align-items:stretch}
.world{padding:clamp(28px,3.2vw,44px);border-radius:var(--r-l);overflow:hidden}
.world-warm{background:var(--nacht);color:var(--grau)}
.world-warm h3{color:var(--ink)}
.world-warm p{color:var(--grau)}
/* Die zweite Karte war Hellgrau neben Graphit. Neben dem hellblauen Band
   wäre Hellgrau fast dieselbe Fläche, deshalb steht sie jetzt auf Weiß mit
   Kontur: der Unterschied ist Ton gegen Rahmen, nicht hell gegen dunkel. */
.world-cold{background:var(--grund);border:1px solid var(--linie)}
.world-tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);letter-spacing:.115em;
  text-transform:uppercase;font-variation-settings:"wdth" 100,"wght" 650;margin-bottom:16px;
  padding:7px 12px;border-radius:var(--r-s)}
.world-warm .world-tag{color:var(--akzent-lese);background:var(--band-fuell)}
.world-cold .world-tag{color:var(--grau);background:var(--grund-3)}
.world ul{list-style:none;margin:22px 0 0;padding:0}
.world li a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 0;text-decoration:none;border-top:1px solid var(--linie);
  transition:padding-left .22s var(--ease-aus)}
.world-warm li a{border-top-color:var(--nacht-linie)}
.world li a:hover{padding-left:7px}
.world li .t{font-variation-settings:"wdth" 100,"wght" 660;font-size:1rem;letter-spacing:-.014em;
  display:flex;align-items:center;gap:9px}
.world li .t::after{content:"";width:15px;height:9px;flex:none;opacity:0;transform:translateX(-4px);
  transition:opacity .22s var(--ease-aus),transform .22s var(--ease-aus);
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.world li a:hover .t::after{opacity:1;transform:none}
.world li .m{font-size:var(--fs-klein);white-space:nowrap;font-variant-numeric:tabular-nums;
  font-variation-settings:"wdth" 100,"wght" 620}
.world-warm li .m{color:var(--grau)}
.world-cold li .m{color:var(--grau)}
@media(max-width:880px){.worlds{grid-template-columns:1fr}}

/* ---------- Preistafel ---------- */
.ptable{width:100%;border-collapse:collapse;font-size:var(--fs-text)}
.ptable caption{text-align:left;font-size:var(--fs-klein);color:var(--grau);padding-bottom:18px;max-width:72ch}
.ptable th,.ptable td{text-align:left;padding:18px 18px 18px 0;border-bottom:1px solid var(--linie);vertical-align:middle}
.ptable thead th{font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;color:var(--grau);
  font-variation-settings:"wdth" 100,"wght" 640;padding-block:12px;border-bottom:1px solid var(--linie-stark)}
.ptable tbody tr{transition:background-color .18s}
.ptable tbody tr:hover{background:var(--grund-2)}
.ptable td:last-child,.ptable th:last-child{text-align:right;white-space:nowrap;padding-right:0}
.ptable .price{font-variation-settings:"wdth" 100,"wght" 760;font-size:1.4rem;letter-spacing:-.03em;
  color:var(--akzent);font-variant-numeric:tabular-nums}
.ptable .price small{font-size:var(--fs-label);font-variation-settings:"wdth" 100,"wght" 620;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau);display:block;margin-bottom:3px}
.table-scroll{overflow-x:auto}
/* Auf dem Telefon steht die Preisspalte sonst rechts ausserhalb des Bildes:
   die Tabelle scrollt zwar seitwaerts, aber niemand schiebt eine Preistabelle
   nach rechts, um die Zahl zu sehen, wegen der er die Seite geoeffnet hat.
   Unter 640px wird jede Zeile deshalb ein Block: Leistung, Betrag, Beschreibung
   untereinander, dieselbe Reihenfolge wie bei den Preiszeilen. */
@media(max-width:640px){
  .table-scroll{overflow-x:visible}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%}
  /* Die Bildunterschrift bleibt sonst eine table-caption neben Bloecken und
     faellt auf hundert Pixel Breite zusammen. */
  .ptable caption{display:block;max-width:none}
  .ptable thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
  .ptable tr{padding:18px 0;border-bottom:1px solid var(--linie)}
  .ptable td{padding:0;border:0}
  .ptable td:last-child{text-align:left;margin-top:8px}
  .ptable .price{font-size:1.24rem}
  .ptable .price small{display:inline;margin:0 6px 0 0}
}

/* ---------- Ablauf ---------- */
.steps{list-style:none;padding:0;margin:0}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,34px);
  padding:0 0 28px;position:relative;align-items:start}
.steps li:last-child{padding-bottom:0}
.steps .n{
  width:46px;height:46px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-klein);line-height:1;font-variation-settings:"wdth" 100,"wght" 700;
  font-variant-numeric:tabular-nums;color:var(--akzent-lese);background:var(--band-fuell);
  border:1px solid var(--nacht-linie);position:relative;z-index:1;
}
.steps li::before{content:"";position:absolute;left:22px;top:46px;bottom:6px;width:1px;background:var(--nacht-linie)}
.steps li:last-child::before{display:none}
.steps h4,.steps .sh{color:var(--ink);margin:10px 0 6px;font-size:1.08rem;
  font-variation-settings:"wdth" 100,"wght" 690;letter-spacing:-.016em;line-height:1.3}
.steps p{font-size:var(--fs-text);color:var(--grau);margin:0;max-width:56ch}
/* Auf weißem Grund war die Ziffernscheibe fast schwarz gefüllt und damit der
   dunkelste Punkt einer sonst durchgehend hellen Seite. Sie trägt jetzt
   dieselbe Bandfläche wie die Karten, mit Kontur statt Fülle. */
section:not(.band-dark):not(.hero) .steps .n{background:var(--nacht);border-color:var(--linie-stark);color:var(--akzent-lese)}
section:not(.band-dark):not(.hero) .steps li::before{background:var(--linie)}
section:not(.band-dark):not(.hero) .steps h4,section:not(.band-dark):not(.hero) .steps .sh{color:var(--ink)}
section:not(.band-dark):not(.hero) .steps p{color:var(--grau)}
@media(max-width:560px){.steps li{gap:16px}.steps .n{width:40px;height:40px;font-size:var(--fs-klein)}.steps li::before{left:19px;top:40px}}

/* ---------- Checkliste ---------- */
.checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,60px)}
.checklist li{display:flex;gap:14px;align-items:baseline;min-height:46px;padding:12px 0;
  border-bottom:1px solid var(--linie);font-size:var(--fs-text)}
.checklist .num{font-size:var(--fs-label);letter-spacing:.06em;color:var(--grau);flex:none;min-width:22px;
  font-variation-settings:"wdth" 100,"wght" 650;font-variant-numeric:tabular-nums}
.band-dark .checklist li{border-bottom-color:var(--nacht-linie)}
.band-dark .checklist .num{color:var(--grau)}
@media(max-width:720px){.checklist{grid-template-columns:1fr}}

/* ---------- Marken als Register ---------- */
.brands{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,3vw,48px);border-top:1px solid var(--linie)}
.brands a{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:19px 0;text-decoration:none;border-bottom:1px solid var(--linie);
  transition:padding-left .22s var(--ease-aus)}
.brands a:hover{padding-left:7px}
.brands .b{font-variation-settings:"wdth" 100,"wght" 690;font-size:1.06rem;letter-spacing:-.02em}
.brands .s{font-size:var(--fs-klein);color:var(--grau);text-align:right}
.band-dark .brands{border-top-color:var(--nacht-linie)}
.band-dark .brands a{border-bottom-color:var(--nacht-linie)}
.band-dark .brands .b{color:var(--ink)}
.band-dark .brands .s{color:var(--grau)}
@media(max-width:680px){.brands{grid-template-columns:1fr}}
.disclaimer{font-size:var(--fs-mini);line-height:1.62;color:var(--grau);margin-top:24px;max-width:80ch}

/* ---------- Der Meister ---------- */
.meister{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(30px,4vw,66px);align-items:start}
.portrait{
  background:var(--nacht);color:var(--grau);border-radius:var(--r-l);
  padding:clamp(26px,2.8vw,34px);display:flex;flex-direction:column;gap:26px;
}
.portrait-kopf{display:flex;align-items:center;gap:14px}
.portrait-kopf .brand-mark{width:36px;height:36px;color:var(--akzent-hell)}
.portrait .ph{font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;color:var(--grau);
  font-variation-settings:"wdth" 100,"wght" 640;line-height:1.6;display:block}
.portrait-rolle{font-size:var(--fs-klein);color:var(--grau);margin:0 0 20px}
.portrait-liste{list-style:none;margin:0;padding:0}
.portrait-liste li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-top:1px solid var(--nacht-linie)}
.portrait-liste span{font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;
  color:var(--grau);font-variation-settings:"wdth" 100,"wght" 640}
.portrait-liste b{font-size:var(--fs-text);color:var(--ink);font-variation-settings:"wdth" 100,"wght" 620}
.brief-name{font-variation-settings:"wdth" 100,"wght" 730;font-size:1.4rem;margin:0 0 4px;
  letter-spacing:-.024em;color:var(--ink)}
.brief-linie{border-top:1px solid var(--nacht-linie);padding-top:12px;margin-top:auto}
.sig{font-variation-settings:"wdth" 100,"wght" 710;font-size:1.2rem;letter-spacing:-.022em;margin:22px 0 0}
@media(max-width:820px){.meister{grid-template-columns:1fr}}

/* ---------- Bezirke ---------- */
.districts{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.districts li a,.districts li span{
  display:inline-block;padding:11px 18px;text-decoration:none;font-size:var(--fs-klein);border-radius:var(--r-s);
  background:var(--grund);color:var(--ink);border:1px solid var(--linie-stark);
  font-variation-settings:"wdth" 100,"wght" 620;font-variant-numeric:tabular-nums;
  transition:background-color .2s var(--ease-aus),border-color .2s var(--ease-aus),color .2s var(--ease-aus);
}
.districts li a:hover{background:var(--akzent);border-color:var(--akzent);color:#fff}
.districts .zt{background:none;color:var(--grau);border-style:dashed}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--linie)}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{display:flex;align-items:center;gap:18px;justify-content:space-between;
  padding:22px 4px;cursor:pointer;list-style:none;border-radius:var(--r-s);
  font-variation-settings:"wdth" 100,"wght" 670;font-size:clamp(1.01rem,.98rem + .26vw,1.12rem);
  letter-spacing:-.02em;transition:color .18s}
.faq summary:hover{color:var(--akzent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  /* Plus aus zwei Balken statt aus einem SVG: so folgt es dem Akzent-Token.
     Als Maske gebaut war der ganze Kreis gefüllt, weil in einer Alpha-Maske
     auch der Strich deckend ist und kein Loch ergibt. */
  content:"";flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--linie-stark);
  background:
    linear-gradient(var(--akzent),var(--akzent)) center/2px 11px no-repeat,
    linear-gradient(var(--akzent),var(--akzent)) center/11px 2px no-repeat;
  transition:transform .28s var(--ease-aus),border-color .18s;
}
.faq summary:hover::after{border-color:var(--akzent)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 4px 24px;max-width:72ch;color:var(--grau)}
.faq .a p:last-child{margin-bottom:0}

.faq-split{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:start}
/* 118px waren Kopfleiste plus Notdienstleiste. Die Leiste ist raus, der
   Versatz ist jetzt die Leistenhoehe (74px) plus Luft. */
.faq-kopf{position:sticky;top:92px}
.faq-kopf .lead{margin-bottom:24px;max-width:34ch}
@media(max-width:900px){.faq-split{grid-template-columns:1fr;gap:30px}.faq-kopf{position:static}}

.ablauf-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,76px);align-items:start}
.ablauf-split .bild{align-self:stretch}
.ablauf-split .bild img{height:100%;min-height:420px}
@media(max-width:900px){.ablauf-split{grid-template-columns:1fr}.ablauf-split .bild{display:none}}

/* ---------- Hinweis ---------- */
.hinweis{border:1px solid var(--linie);border-radius:var(--r);
  padding:20px 24px;margin:28px 0;background:var(--grund-2)}
.hinweis p{margin:0;font-size:var(--fs-text);max-width:68ch;color:var(--grau)}
.hinweis .lbl{display:block;font-size:var(--fs-label);font-variation-settings:"wdth" 100,"wght" 650;
  letter-spacing:.115em;text-transform:uppercase;color:var(--grau);margin-bottom:8px}
.hinweis-warn{background:var(--grund-3);border-color:var(--linie-stark)}
.band-dark .hinweis{background:var(--band-fuell);border-color:var(--nacht-linie)}
.band-dark .hinweis p{color:var(--grau)}
.band-dark .hinweis .lbl{color:var(--ink)}

/* ---------- Formular ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:var(--fs-klein);color:var(--ink);font-variation-settings:"wdth" 100,"wght" 640}
.field input,.field select,.field textarea{
  font-family:var(--ff);font-size:1rem;color:var(--ink);border-radius:var(--r-s);
  padding:14px 15px;border:1px solid var(--linie-stark);background:var(--grund);width:100%;
  transition:border-color .18s,box-shadow .18s;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--grund-3)}
.field label .pflicht{float:right;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grau);font-variation-settings:"wdth" 100,"wght" 620}
.form-note{font-size:var(--fs-klein);line-height:1.62;color:var(--grau)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

/* ---------- Fuß ---------- */
.site-footer{background:var(--fuss);color:var(--grau);border-top:1px solid var(--linie);
  padding-block:clamp(52px,6vw,80px) 28px;font-size:var(--fs-klein)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(24px,2.4vw,40px)}
.site-footer h5,.site-footer .fh{font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;color:var(--ink);
  margin:0 0 18px;font-variation-settings:"wdth" 100,"wght" 650;line-height:1.3}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.site-footer a{text-decoration:none;color:var(--grau);display:inline-block;padding-block:3px;
  transition:color .18s}
.site-footer a:hover{color:var(--akzent-lese)}
.footer-bottom{margin-top:clamp(36px,4vw,58px);padding-top:24px;border-top:1px solid var(--nacht-linie);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;font-size:var(--fs-mini);color:var(--grau)}
.footer-bottom .sep{margin-left:auto}
@media(max-width:1080px){.footer-top{grid-template-columns:1fr 1fr 1fr}
  .footer-top>:first-child{grid-column:1/-1;margin-bottom:10px}}
@media(max-width:880px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr}}

/* ---------- Bild, Brotkrume, Schnellkontakt ---------- */
.ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.bild{border-radius:var(--r-l);overflow:hidden;background:var(--grund-3)}
.bild img{width:100%;height:100%;object-fit:cover;display:block}
.bild-hoch{aspect-ratio:4/5}
.bild-quer{aspect-ratio:16/10}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}

.hero-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.hero-points li{display:flex;align-items:center;gap:12px;font-size:var(--fs-text);
  color:var(--grau);padding:13px 0;border-bottom:1px solid var(--nacht-linie)}
.hero-points li:last-child{border-bottom:0}
.hero-points li::before{content:"";width:11px;height:8px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5.2 5 9.2 13 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5.2 5 9.2 13 1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-points li .ico{display:none}
.hero-quote{font-variation-settings:"wdth" 100,"wght" 710;font-size:clamp(1.2rem,1.05rem + .8vw,1.55rem);
  line-height:1.26;letter-spacing:-.026em;color:var(--ink);margin:0 0 12px;max-width:22ch}
.hero-quote-sub{font-size:var(--fs-text);color:var(--grau);max-width:38ch;margin-bottom:22px}

.krume{background:var(--grund);border-bottom:1px solid var(--linie)}
.krume ol{list-style:none;margin:0;padding:13px 0;display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-klein);color:var(--grau)}
.krume li{display:flex;align-items:center;gap:8px}
.krume li+li::before{content:"/";color:var(--linie-stark)}
.krume a{color:var(--grau);text-decoration:none;padding-block:3px}
.krume a:hover{color:var(--akzent);text-decoration:underline;text-underline-offset:3px}
.krume [aria-current]{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 620}

.actionbar{display:none}
@media(max-width:820px){
  .actionbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--grund);box-shadow:0 -2px 18px rgba(34,48,63,.13)}
  .actionbar a{display:flex;align-items:center;justify-content:center;gap:9px;min-height:58px;
    text-decoration:none;font-variation-settings:"wdth" 100,"wght" 690;font-size:1rem;
    padding:0 0 env(safe-area-inset-bottom)}
  .actionbar svg{width:20px;height:20px;flex:none}
  .ab-call{background:var(--akzent);color:#fff}
  .ab-wa{background:var(--wa-knopf);color:var(--ink)}
  .ab-wa svg{color:currentColor}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* ---------- Hilfsklassen ---------- */
.center{text-align:center}
/* Abschnittskopf. Vorher ein linksbuendiger Block bis 66ch: Augenbraue,
   Ueberschrift und Fliesstext standen untereinander in derselben Spalte und
   sahen damit aus wie der Anfang eines Textes, nicht wie der Kopf eines
   Abschnitts. Jetzt traegt er eine Oberlinie und zwei Spalten - links die
   Zeile, rechts die Erklaerung, unten buendig. Das ist die Form, die auch
   der Seitenkopf benutzt, eine Stufe kleiner.

   Die Zuordnung steht explizit auf Kind-Selektoren und nicht auf
   nth-child: beide Vorkommen im Haus haben die Reihenfolge Augenbraue,
   H2, Absatz, aber eine spaetere Seite mit zwei Absaetzen wuerde bei einer
   Zeilenbindung uebereinanderfallen. So fliesst ein zweiter Absatz einfach
   in der rechten Spalte weiter. */
.section-head{
  margin-bottom:clamp(30px,3.6vw,50px);
  max-width:none;
  border-top:2px solid var(--ink);
  padding-top:clamp(18px,2vw,26px);
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  column-gap:clamp(30px,5vw,80px);
  align-items:end;
}
.section-head>.eyebrow{grid-column:1;margin-bottom:12px}
.section-head>h2{grid-column:1;margin-bottom:0}
.section-head>p{grid-column:2;margin-bottom:0;max-width:46ch}
.section-head>p+p{margin-top:.9em}
@media(max-width:880px){
  .section-head{grid-template-columns:1fr;row-gap:18px;align-items:start}
  .section-head>.eyebrow,.section-head>h2,.section-head>p{grid-column:1}
}
/* Dieselbe Oberlinie wie am Abschnittskopf. Ohne sie trug von sieben
   Abschnitten der Startseite genau einer eine Linie und die uebrigen nicht:
   das las sich als Ausrutscher, nicht als Rhythmus. Die Linie ist das
   Gliederungsmittel der Seite, also muss sie an jedem Abschnittsanfang
   stehen oder an keinem. */
.split-head{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(30px,3.6vw,50px);
  border-top:2px solid var(--ink);padding-top:clamp(18px,2vw,26px)}
.split-head>div:first-child{flex:1 1 520px}
/* Abschnitte, die ihren Kopf ohne Huelle schreiben: dort steht die Augenbraue
   direkt in der Spalte. Der Seitenkopf ist ausgenommen, er beginnt die Seite
   und braucht keinen Trenner ueber sich. */
section:not(.hero)>.wrap>.eyebrow:first-child{
  border-top:2px solid var(--ink);padding-top:clamp(18px,2vw,26px);
  /* Die Augenbraue ist ein <p> und erbt damit max-width:68ch. Bei 13px sind
     das rund 390px, und die Linie reichte nur ueber ein Drittel der Spalte. */
  max-width:none}
/* Bei den Fragen sitzt der Kopf in der linken Spalte. Die Linie gehoert
   deshalb an das Gitter, sonst reicht sie nur ueber ein Drittel der Breite. */
.faq-split{border-top:2px solid var(--ink);padding-top:clamp(18px,2vw,26px)}
.faq-split>div>.eyebrow:first-child{border-top:0;padding-top:0}
.split-head>div:first-child .lead,.split-head>div:first-child p{max-width:60ch}
.wrap-narrow h3{margin-top:2em}
.wrap-narrow h3:first-of-type{margin-top:1.2em}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:14px 20px}
.skip:focus{left:0}
.tafel{display:inline-block;background:var(--ink);color:#fff;border-radius:var(--r-s);padding:12px 18px;
  text-decoration:none;font-variation-settings:"wdth" 100,"wght" 700;font-variant-numeric:tabular-nums}
.tafel .oben{display:block;font-size:var(--fs-label);letter-spacing:.115em;text-transform:uppercase;opacity:.76;margin-bottom:4px}
.tafel .zahl{display:block;font-size:clamp(1.3rem,1rem + 1.3vw,1.9rem);line-height:1}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .btn:hover,.header-tel:hover{transform:none}
}
@media print{
  .site-header,.site-footer,.btn,.actionbar,.hero-band{display:none}
  body{background:#fff;font-size:11pt;padding-bottom:0}
  .hero{display:block;background:#fff;color:#000;padding-block:0}
  .hero-satz{grid-template-columns:1fr;border-top:0}
  .hero h1,.hero .lead,.hero .beweis{color:#000}
}

/* ===========================================================================
   v6 · Layout-Korrekturen an den Landingpages
   ---------------------------------------------------------------------------
   Drei Fehler, die am Bildschirm sichtbar waren und im Quelltext nicht:

   1. Doppelter Abstand. Zwei weisse Sektionen hintereinander ergaben
      102px unten plus 102px oben, also gut 200px Nichts mitten in der Seite.
      Auf einer Seite, die zum Anruf fuehren soll, ist das reines Scrollen.
   2. Gebrochene linke Kante. .wrap-narrow war mittig zentriert, waehrend
      alle anderen Sektionen an der 1240er-Spalte links stehen. Der Fliesstext
      sprang dadurch nach rechts ein und wieder zurueck.
   3. Das Abschlussband. Headline, Fliesstext und Knopfreihe standen in einem
      .split-head, dessen linke Spalte zu schmal war: die Ueberschrift brach
      mit Bindestrich um und die Knoepfe schwebten auf halber Hoehe daneben.
   =========================================================================== */

/* 1 · Gleicher Grund, gleicher Abstand. Nur der obere Rand faellt weg, der
      untere der Vorgaengersektion traegt den Abstand allein. */
section:not(.band-paper):not(.band-dark):not(.hero) + section:not(.band-paper):not(.band-dark),
section.band-paper + section.band-paper,
section.band-dark + section.band-dark{padding-top:0}

/* 2 · Schmale Textspalte an derselben linken Kante wie alles andere.
      --rand ist genau der Abstand vom Fensterrand zur Inhaltsspalte. */
.wrap-narrow{max-width:none;margin-inline:0;padding-left:var(--rand);padding-right:var(--pad)}
.wrap-narrow>*{max-width:var(--max-text)}

/* 3 · Abschlussband: Text links, Knoepfe rechts, beides auf einer Achse.
      Die Ueberschrift bekommt eine eigene Obergrenze, damit sie an einer
      Wortgrenze umbricht statt an einem Bindestrich. */
.cta-split{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(26px,4vw,64px);align-items:center;margin-bottom:0}
.cta-split h2{max-width:17ch;margin-bottom:14px;hyphens:none}
.cta-split .lead{margin-bottom:0;max-width:44ch}
.cta-split .btn-row{justify-content:flex-end;flex:none}
@media(max-width:900px){
  .cta-split{grid-template-columns:1fr;align-items:start}
  .cta-split h2{max-width:20ch}
  .cta-split .btn-row{justify-content:flex-start}
}

/* 4 · Register mit Richtungsanzeige. Die Zeilen in "Weiter im Haus" sahen
      aus wie Fliesstext und nicht wie Links: derselbe Pfeil wie in den
      Sparten-Karten macht sie ohne neue Formensprache anklickbar. */
.brands .b{display:flex;align-items:center;gap:9px}
.brands .b::after{content:"";width:15px;height:9px;flex:none;opacity:0;transform:translateX(-4px);
  transition:opacity .22s var(--ease-aus),transform .22s var(--ease-aus);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.brands a:hover .b::after{opacity:1;transform:none}
.brands a:hover .b{color:var(--akzent)}

/* 5 · Der Anrufknopf im FAQ-Kopf war als .btn-ghost das leiseste Element der
      Zeile, obwohl die Nummer der Umsatzweg ist. Er bekommt jetzt Fuellung. */
.faq-kopf .btn{width:auto}

/* 6 · Eine Checkliste mit vier Punkten in zwei Spalten sieht leer aus.
      Ab fuenf Punkten lohnen zwei Spalten, darunter liest eine besser. */
.checklist.eng{grid-template-columns:1fr;max-width:var(--max-text)}

/* 7 · Preiskarten-Reihe fuer die Leistungsseiten. Kein Karten-Raster mit drei
      gleichen Kacheln, sondern eine Zeilenliste mit Preis rechts: dieselbe
      Formensprache wie das Preisband oben, nur ohne Rahmen um jedes Element. */
.leistungen{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
/* Zwei Zeilen links, eine durchgehende Spalte rechts. Ohne die benannten
   Bereiche setzt die hoehere Preiszelle die Zeilenhoehe und schiebt die
   Beschreibung um zwei Zentimeter unter ihre Ueberschrift. */
.leistungen li{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"t p" "d p";gap:0 clamp(20px,3vw,40px);
  align-items:start;padding:20px 0;border-bottom:1px solid var(--linie)}
.leistungen .lt{grid-area:t;font-variation-settings:"wdth" 100,"wght" 690;
  font-size:1.06rem;letter-spacing:-.02em;line-height:1.35}
.leistungen .ld{grid-area:d;font-size:var(--fs-klein);color:var(--grau);margin:5px 0 0;max-width:62ch}
/* "ab" steht neben dem Betrag, nicht darueber: genau wie im Preisband oben.
   Uebereinander gestellt reisst es die Zeile auf und die Zahl rutscht unter
   die Grundlinie der Ueberschrift. */
.leistungen .lp{grid-area:p;display:flex;align-items:baseline;gap:6px;justify-content:flex-end;
  font-variation-settings:"wdth" 100,"wght" 760;font-size:1.24rem;letter-spacing:-.03em;
  color:var(--akzent);font-variant-numeric:tabular-nums;white-space:nowrap}
.leistungen .lp small{font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--grau);font-variation-settings:"wdth" 100,"wght" 620}
/* Fehlercode-Variante: rechts steht kein Betrag, sondern die Bedeutung der
   Abschaltung. Die darf umbrechen, sonst laeuft sie aus der Zeile. */
/* Kein Versalsatz und keine Laufweite: "Sicherheitstemperaturbegrenzer" ist
   30 Zeichen lang, hat keine Trennstelle und schiebt sich als Versalzeile aus
   der Spalte. In gemischter Schreibung passt dasselbe Wort in zwei Zeilen. */
.leistungen.codes .lp{white-space:normal;text-align:right;display:block;max-width:26ch;
  font-size:var(--fs-klein);letter-spacing:0;text-transform:none;line-height:1.45;
  overflow-wrap:anywhere;hyphens:auto;
  font-variation-settings:"wdth" 100,"wght" 640;color:var(--ink)}
.leistungen.codes .lt{font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media(max-width:640px){
  .leistungen li{grid-template-columns:1fr;grid-template-areas:"t" "p" "d";gap:0}
  .leistungen .lp{justify-content:flex-start;margin-top:6px}
  .leistungen.codes .lp{text-align:left;max-width:none}
}

/* ---------- Marken-Wand ----------
   Acht Herstellerzeichen als Raster aus Haarlinien, kein Karten-Raster: keine
   Schatten, keine Radien, keine Kacheln, die schweben. Dieselbe Formensprache
   wie die Preiszeilen und die Checkliste, nur zweidimensional.

   Der Kern ist der Ruhezustand. Acht fremde Markenfarben nebeneinander sind
   acht Akzente, und die Seite hat genau einen. Entsättigt und auf halber
   Deckkraft bleibt die Wand ein Raster aus Zeichen, das sich einordnet;
   Vaillant-Grün, Viessmann-Rot und Junkers-Blau kommen erst, wenn jemand mit
   dem Zeiger fragt. Auf dem Telefon gibt es kein Hover: dort stehen die
   Zeichen dauerhaft farbig, weil es nichts zu schonen gibt, was sonst
   ununterbrochen bunt wäre. */
.marken-wand{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--linie);border-left:1px solid var(--linie);
}
.marken-wand li{border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.marken-wand a{
  position:relative;display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px);
  height:100%;padding:clamp(20px,2.2vw,26px);text-decoration:none;color:inherit;
  transition:background-color .24s var(--ease-aus);
}
.marken-wand a:hover,.marken-wand a:focus-visible{background:var(--grund-2)}

/* Die Zeichen haben von Haus aus sehr verschiedene Seitenverhältnisse: der
   Junkers-Schriftzug ist breit und flach, das Wolf-Zeichen fast quadratisch.
   Eine feste Zeilenhöhe plus object-fit stellt sie auf eine gemeinsame
   optische Größe, ohne eines davon zu verzerren. */
.marken-wand .mw-zeichen{
  display:flex;align-items:center;height:44px;
  transition:transform .3s var(--ease-aus),filter .3s var(--ease-aus),opacity .3s var(--ease-aus);
  filter:grayscale(1) contrast(.92);opacity:.52;transform-origin:left center;
}
.marken-wand .mw-zeichen img{max-width:100%;max-height:calc(100% * var(--opt,1));
  width:auto;height:auto;object-fit:contain}
.marken-wand a:hover .mw-zeichen,.marken-wand a:focus-visible .mw-zeichen{
  filter:none;opacity:1;transform:translateY(-2px) scale(1.035);
}

/* Weishaupt liegt als Zeichen nicht vor. Statt eines nachgezeichneten Logos
   steht der Name in der Hausschrift, deutlich als Schrift erkennbar. */
.marken-wand .mw-zeichen-wort{
  font-variation-settings:"wdth" 100,"wght" 760;font-size:1.5rem;
  letter-spacing:-.035em;color:var(--ink);line-height:1;
}

.marken-wand .mw-text{display:flex;flex-direction:column;gap:4px}
.marken-wand .b{
  font-variation-settings:"wdth" 100,"wght" 690;font-size:1rem;letter-spacing:-.02em;
  transition:color .2s var(--ease-aus);
}
.marken-wand .s{font-size:var(--fs-klein);line-height:1.5;color:var(--grau)}
.marken-wand a:hover .b,.marken-wand a:focus-visible .b{color:var(--akzent)}

/* Der Akzentstrich läuft von links über die untere Haarlinie der Zelle. Er
   ist der einzige blaue Punkt der Wand und existiert nur im Hover. */
.marken-wand a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--akzent);transform:scaleX(0);transform-origin:left center;
  transition:transform .34s var(--ease-aus);
}
.marken-wand a:hover::after,.marken-wand a:focus-visible::after{transform:scaleX(1)}

/* Gestaffeltes Einblenden. Die Wand baut sich von links oben auf, statt als
   ganzer Block zu erscheinen. 55 ms pro Zelle: über acht Zellen sind das
   knapp vier Zehntel, das liest sich als eine Bewegung und nicht als Kette. */
.marken-wand li.reveal{transition-delay:calc(var(--i,0) * 55ms)}

@media(hover:none){
  .marken-wand .mw-zeichen{filter:none;opacity:1}
}
@media(max-width:960px){.marken-wand{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){
  .marken-wand{grid-template-columns:repeat(2,1fr)}
  .marken-wand a{padding:18px 16px}
  .marken-wand .mw-zeichen{height:40px}
  .marken-wand .mw-zeichen-wort{font-size:1.24rem}
}
/* Ohne JavaScript setzt niemand die Klasse .in, und eine Regel, die den
   Inhalt auf opacity:0 stellt, versteckt ihn dann dauerhaft. Bei den acht
   Zellen waere das die ganze Sektion. .reveal stand zwar schon vorher im
   Stylesheet, benutzt hat es aber keine Seite: die Marken-Wand ist der erste
   Fall, und damit auch der erste, der den Ausfall abfangen muss. */
@media(scripting:none){
  .marken-wand li.reveal,.marken-kopf.reveal{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .marken-wand li.reveal{transition-delay:0s}
  .marken-wand .mw-zeichen,.marken-wand a::after,.marken-wand a{transition:none}
  .marken-wand a:hover .mw-zeichen,.marken-wand a:focus-visible .mw-zeichen{transform:none}
}

/* ---------- Zeichen im Kopf einer Markenseite ----------
   Auf der Einzelseite steht das Zeichen farbig neben der Überschrift. Hier
   ist es keine Wand aus acht Fremdfarben, sondern das eine Gerät, um das es
   auf dieser Seite geht: da darf es die Farbe des Herstellers tragen. */
.marken-kopf{display:flex;align-items:center;gap:clamp(18px,2.4vw,28px);
  padding-bottom:clamp(20px,2.4vw,26px);margin-bottom:clamp(22px,2.6vw,30px);
  border-bottom:1px solid var(--linie)}
.marken-kopf .mk-zeichen{display:flex;align-items:center;height:clamp(42px,5vw,62px);flex:none}
.marken-kopf .mk-zeichen img{max-width:min(260px,44vw);
  max-height:calc(100% * var(--opt,1));width:auto;height:auto;object-fit:contain}
.marken-kopf .mk-zeichen-wort{font-variation-settings:"wdth" 100,"wght" 780;
  font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.04em;color:var(--ink);line-height:1}
.marken-kopf .eyebrow{margin-bottom:6px}
.marken-kopf h2{margin:0}
@media(max-width:560px){
  .marken-kopf{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ---------- Bewegung ----------
   Die Seite stand bis hierher vollkommen still: Hover gab es an Zeilen und an
   der Marken-Wand, beim Scrollen bewegte sich nichts. Das liest sich nicht
   ruhig, sondern unfertig, weil jeder Abschnitt gleichzeitig und fertig da
   ist, sobald man ihn erreicht.

   Gebaut ist das Einblenden mit scroll-getriebenen Animationen
   (animation-timeline: view()) statt mit einem IntersectionObserver. Das hat
   drei Gründe, und alle drei sind hier entscheidend:

   1. Kein JavaScript. Die Content-Security-Policy erlaubt kein inline-Skript,
      also gäbe es keinen Weg, vor dem ersten Bild eine Klasse zu setzen. Der
      Umweg über site.js am Seitenende blitzt: der Inhalt steht erst sichtbar
      da und wird dann auf opacity:0 gezogen.
   2. Kein verstecktbarer Inhalt. Wo view() fehlt (Firefox), greift die ganze
      Regel nicht und alles steht schlicht sichtbar da. Bei einer Lösung mit
      opacity:0 plus JS wäre bei einem Skriptfehler der halbe Text weg, und
      das auf einer Seite, die von der Suche lebt.
   3. Der Fortschritt hängt am Scrollstand, nicht an einem Timer. Wer schnell
      scrollt, sieht die Bewegung schnell; wer mitten im Abschnitt landet,
      sieht sie gar nicht erst halb.

   Die Staffelung entsteht von selbst: jede Zelle hat ihre eigene Zeitleiste
   und startet, wenn sie selbst in den Blick kommt. Es gibt deshalb keine
   Verzögerungsketten, die man pflegen müsste.

   Bewegt werden nur opacity und transform, beides läuft im Compositor. Die
   Strecke ist absichtlich kurz (14px): sichtbar genug, dass der Abschnitt
   ankommt, kurz genug, dass es nicht wie ein Aufzug wirkt. */

@keyframes tm-auf{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    /* Ein Takt pro Abschnitt: die Überschrift kommt als Block, danach die
       Reihen einzeln. Mehr Elemente in dieser Liste heißt nicht mehr
       Lebendigkeit, sondern Unruhe. */
    .section-head,
    .split-head,
    .world,
    .portrait,
    .meister>*:last-child,
    .steps li,
    .checklist li,
    .districts li,
    .faq details,
    .brands a,
    .ptable tbody tr,
    .footer-top>*{
      animation:tm-auf linear both;
      animation-timeline:view();
      /* Start, sobald das Element den unteren Rand überschreitet, fertig auf
         halbem Weg herein. Läuft es bis "cover", ist die Bewegung erst in der
         Bildmitte vorbei und wirkt zäh. */
      animation-range:entry 0% entry 55%;
    }

    /* Reihen laufen kürzer als Blöcke. Eine Liste aus zwanzig Punkten, in der
       jede Zeile die volle Strecke fährt, ist ein Flimmern und kein
       Einblenden. */
    .checklist li,
    .ptable tbody tr,
    .districts li,
    .footer-top>*{
      animation-range:entry 0% entry 32%;
    }

    /* Das Bild neben dem Ablauf und die Fotos in den Textbändern kommen
       ruhiger als der Text daneben: ein Foto, das springt, sieht nach
       Werbebanner aus. */
    .bild{
      animation:tm-auf linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%;
    }
  }

  /* Der Seitenkopf steht beim Laden schon im Blick und hat deshalb keine
     Scroll-Strecke, über die er einblenden könnte. Er bekommt einen eigenen,
     kurzen Auftritt beim Laden.

     Bewusst ausgenommen: das Foto im Band. Es ist das groesste Element der
     Seite; eine Animation darauf wuerde den gemessenen Ladezeitpunkt nach
     hinten schieben, ohne dass es besser aussieht. Seit der Kopf gestapelt
     ist, ist die H1 der LCP-Kandidat - die laeuft mit .5s an und ist damit
     frueher fertig, als das Foto vorher ueberhaupt geladen war. */
  .hero-kopf>*{
    animation:tm-auf .5s var(--ease-aus) both;
  }
  .hero-kopf>*:nth-child(1){animation-delay:.02s}
  .hero-kopf>*:nth-child(2){animation-delay:.08s}
  .hero-kopf>*:nth-child(3){animation-delay:.14s}
  .hero-kopf>*:nth-child(n+4){animation-delay:.2s}
}

/* ---------- Aufklappen der Fragen ----------
   Die Antworten sprangen bisher hart auf. Mit ::details-content lässt sich
   das native details-Element animieren, ohne die Mechanik nachzubauen:
   interpolate-size erlaubt den Übergang nach auto, allow-discrete blendet
   content-visibility am Ende statt am Anfang um.

   Alles hinter @supports selector(): wo das fehlt, klappt die Antwort auf wie
   bisher. Das ist kein Ausfall, nur weniger Bewegung. */
@supports selector(::details-content){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    block-size:0;overflow:hidden;
    transition:block-size .32s var(--ease-aus),content-visibility .32s allow-discrete;
  }
  .faq details[open]::details-content{block-size:auto}
  @media(prefers-reduced-motion:reduce){
    .faq details::details-content{transition:none}
  }
}

/* ---------- Nachgezogene Hover-Zustände ----------
   Die beiden Sparten-Karten waren die einzigen großen Flächen ohne jede
   Reaktion: die Zeilen darin antworteten auf den Zeiger, der Block selbst
   nicht. Ein leichtes Anheben genügt, damit die Karte als ein Element lesbar
   bleibt und nicht als Rahmen um fremde Zeilen. */
.world{
  transition:transform .3s var(--ease-aus),box-shadow .3s var(--ease-aus);
}
.world:hover{transform:translateY(-3px);box-shadow:var(--sch-3)}

/* Die Bezirks-Chips sprangen im Hover von Weiß auf fast Schwarz. Das ist ein
   harter Wechsel für ein Element, von dem acht nebeneinander stehen. Die
   Füllung bleibt, dazu kommt ein Anheben. */
.districts li a{
  transition:background-color .2s var(--ease-aus),border-color .2s var(--ease-aus),
             color .2s var(--ease-aus),transform .2s var(--ease-aus),box-shadow .2s var(--ease-aus);
}
.districts li a:hover{transform:translateY(-2px);box-shadow:var(--sch-2)}

@media(prefers-reduced-motion:reduce){
  .world,.districts li a{transition:none}
  .world:hover,.districts li a:hover{transform:none}
}

/* ---------- Kopfleiste im Scroll ----------
   Die Leiste war auch im gescrollten Zustand deckend weiß. Auf einer Seite,
   die unter der Leiste durchläuft, ist das eine Kante ohne Tiefe: der Inhalt
   verschwindet hart darunter. Ein leicht durchscheinender Grund mit
   Weichzeichner zeigt an, dass darunter etwas weiterläuft.

   Der Weichzeichner steht hinter @supports: wo er fehlt, bleibt der Grund
   deckend weiß, und das ist genau der bisherige Zustand. Ohne die Abfrage
   wäre die Leiste dort halbtransparent ohne Weichzeichnung, und der Text der
   Navigation läge lesbar-schlecht über dem durchscheinenden Inhalt. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .site-header.gescrollt{
    background:color-mix(in srgb, var(--grund) 82%, transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);
    backdrop-filter:saturate(1.6) blur(14px);
  }
}

/* ---------- Sprungziele unter der Leiste ----------
   Die Leiste klebt oben und ist rund 74px hoch. Ein Sprung auf #inhalt legte
   den Anfang des Inhalts deshalb exakt darunter: der Sprunglink für die
   Tastatur landete auf einer Stelle, die man nicht sieht. scroll-margin-top
   hält den nötigen Abstand frei, ohne am Layout etwas zu ändern. */
[id]{scroll-margin-top:calc(74px + 18px)}

/* ---------- Form je Seitenfamilie ----------
   43 Seiten liefen bis hierher durch dieselbe Form: gleicher Kopf, gleiche
   Abschnittsfolge, gleiche Masse, nur anderer Text. Eine Markenseite, eine
   Bezirksseite und das Impressum haben aber verschiedene Aufgaben.

   Umgeschaltet wird die FORM, nicht die Farbe: Kopfgroesse, Textmass, ob ein
   Foto laeuft, wie die Abschnittskoepfe stehen. Sechs Familien mit sechs
   eigenen Akzentfarben waeren kein System mehr, sondern sechs Seiten - und
   der Akzent ist laut Kopf dieser Datei genau das, was selten bleiben muss.

   Die Klasse steht am Body und wird in build.py aus dem Pfad gesetzt. */

/* --- Start: die groesste Zeile des Hauses -------------------------------- */
.f-start .hero h1{font-size:clamp(2.4rem,1.4rem + 4.2vw,5.4rem);max-width:16ch}
.f-start .hero-band{aspect-ratio:16/5.4}

/* --- Waerme und Wasser: die Leistungsseiten ------------------------------
   Sie tragen das Geschaeft und bleiben deshalb am naechsten an der Startseite.
   Unterschied: Wasser laeuft haeufiger als Notfall an, der Kopf steht enger
   und das Band flacher, damit der Anrufknopf frueher kommt. */
.f-wasser .hero{padding-top:clamp(30px,3.6vw,54px)}
.f-wasser .hero-band{aspect-ratio:16/5}
/* Das Wasserbild traegt seine Aussage oben: die undichte Verschraubung und der
   fallende Tropfen. Bei den globalen 44% schneidet das flachere Band genau die
   Verschraubung ab, uebrig bleibt eine Schuessel. Deshalb hier hoeher sitzen. */
.f-wasser .hero-band img{object-position:56% 28%}

/* --- Marke: das Zeichen ist das Bild ------------------------------------
   Auf einer Vaillant-Seite ist das Vaillant-Zeichen das Motiv, nicht ein
   Stockfoto von fremden Haenden. Das Band entfaellt hier komplett - in
   build.py auch aus dem Quelltext, damit die Datei gar nicht erst geladen
   wird - und der Kopf wird dafuer kompakter. */
.f-marke .hero{padding-bottom:clamp(30px,3.4vw,48px);border-bottom:1px solid var(--linie)}
.f-marke .hero h1{font-size:clamp(2.2rem,1.35rem + 2.7vw,3.4rem);max-width:none}
.f-marke .hero-satz{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}

/* Zeile und Zeichen nebeneinander. Das Zeichen steht rechts oben, wo sonst
   der Weissraum neben der Ueberschrift liegt, und beantwortet die stille
   Frage "reden die von meinem Geraet", bevor der erste Satz gelesen ist.
   Farbig, nicht entsaettigt: hier stehen nicht acht Fremdfarben nebeneinander
   wie in der Marken-Wand, sondern das eine Geraet, um das es geht. */
.hero-zeile{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,64px);
  align-items:center;
  /* Die H1 gibt ihren Abstand an die Zeile ab, sonst sitzt die Oberlinie des
     Satzes direkt auf den Unterlaengen von "Reparatur". */
  margin-bottom:clamp(26px,3.2vw,42px);
}
.hero-zeile-txt{min-width:0}
.hero-zeile-txt h1{margin-bottom:0}
.hero-zeichen{display:flex;align-items:center;justify-content:flex-end;flex:none}
.hero-zeichen img{max-width:min(300px,26vw);max-height:calc(clamp(56px,7vw,104px) * var(--opt,1));
  width:auto;height:auto;object-fit:contain}
/* Weishaupt liegt als Zeichen nicht vor: dort steht der Name in der
   Hausschrift, sichtbar als Schrift und nicht als nachgezeichnetes Logo. */
.hero-zeichen .mk-zeichen-wort{
  font-variation-settings:"wdth" 88,"wght" 800;
  font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.035em;color:var(--grau);line-height:1;
}
@media(max-width:720px){
  .hero-zeile{grid-template-columns:1fr;gap:22px}
  .hero-zeichen{justify-content:flex-start;order:-1}
  .hero-zeichen img{max-width:52vw;max-height:calc(64px * var(--opt,1))}
}

/* --- Lokal: der Ort steht vor der Leistung ------------------------------
   Die Bezirksseiten beantworten "kommt ihr zu mir". Die Zeile darf dafuer
   schmaler und die Auskunft breiter stehen. */
.f-lokal .hero h1{max-width:15ch}
.f-lokal .hero-satz{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.f-lokal .hero-band{aspect-ratio:16/4.6}
.f-lokal .districts{margin-top:4px}

/* --- Dienst: Preise, Kontakt, Recht -------------------------------------
   Utility-Seiten. Kein Foto, kein grosser Auftritt: wer hier ist, sucht eine
   Zahl oder eine Adresse. Der Kopf schrumpft auf das Noetige, das Textmass
   wird schmaler, damit Fliesstext und Tabellen ruhig lesbar sind. */
.f-dienst .hero{padding-block:clamp(30px,3.4vw,52px) 0;border-bottom:1px solid var(--linie)}
.f-dienst .hero h1{font-size:clamp(2.1rem,1.35rem + 2.4vw,3.2rem);max-width:20ch;
  margin-bottom:clamp(20px,2.2vw,28px)}
.f-dienst .hero-kopf{padding-bottom:clamp(26px,3vw,40px)}
.f-dienst .hero-satz{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}

/* Auf Recht-Seiten steht ohnehin nur Fliesstext. Dort ist die zweite Spalte
   mit Preis und Knopf eine Behauptung von Handlung, wo keine ist. */
.f-dienst .hero-satz:has(.hero-tut:empty){grid-template-columns:1fr}

@media(max-width:920px){
  .f-start .hero h1,.f-marke .hero h1,.f-lokal .hero h1,.f-dienst .hero h1{max-width:none}
  /* Die Familienregeln stehen im Stylesheet hinter dem Seitenkopf und haben
     dessen Umbruch auf eine Spalte deshalb wieder ueberschrieben: auf dem
     Handy standen Text und Knopfspalte weiter nebeneinander, und die Knoepfe
     liefen rechts aus dem Bild. Gleiche Spezifitaet, spaetere Stelle - der
     Umbruch muss hier noch einmal stehen. */
  .f-marke .hero-satz,.f-lokal .hero-satz,.f-dienst .hero-satz{grid-template-columns:1fr}
}

/* ---------- Handy ----------
   Steht bewusst am Dateiende: überschreibt Blöcke weiter oben, und eine
   Media Query erhöht die Spezifität nicht. */
@media(max-width:560px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn,.btn-row>.btn{width:100%}
  .trust{flex-direction:column;align-items:flex-start;gap:8px}
  .trust>span+span::before{display:none}
  .split-head{align-items:flex-start}
}

/* ===========================================================================
   v7 · Lesbarkeit und Abschluss
   ---------------------------------------------------------------------------
   Zwei Befunde am Bildschirm, die im Quelltext nicht auffielen:

   1. Die Seite lief zur Haelfte als Kleingedrucktes. Im Stylesheet standen
      24 verschiedene Schriftgroessen zwischen .62rem und .97rem, also 10px
      bis 15px bei 16px Wurzel. Versallabels, Preisbeschriftungen, Meta und
      Fliesstext lagen alle in diesem Band und waren dadurch nicht mehr
      voneinander unterscheidbar: alles gleich klein, nichts gewichtet.
      Ersetzt durch fuenf Stufen mit 13px als harter Untergrenze.
      Die Laufweite der Versalien ging von .145em auf .115em zurueck, weil
      weit gesperrte Versalien erst ab etwa 15px ruhig wirken.

   2. Die zweite Handlung war jeweils die leiseste auf dem Schirm.
      "Zur Thermenwartung" und "Alle Marken" standen als hauchduenner
      Umriss neben einer Ueberschrift in 40px. Wer nicht anruft, sollte
      wenigstens weiterklicken koennen, und dafuer muss der Weg sichtbar
      sein. Sie bekommen jetzt Kontur und Gewicht, bleiben aber ohne
      Fuellung: der Akzent gehoert weiter allein der Hauptaktion.
   =========================================================================== */

/* 1 · Zweite Handlung sichtbar machen. Kein Blau, nur Kontur und Gewicht,
      damit die Rangfolge zum Anrufknopf erhalten bleibt. */
.btn-ghost{border-color:var(--linie-stark);color:var(--ink);
  font-variation-settings:"wdth" 100,"wght" 710;box-shadow:var(--sch-1)}
.btn-ghost:hover{border-color:var(--ink);background:var(--grund-2);box-shadow:var(--sch-2)}

/* 2 · Die Preiszellen im Band unter dem Kopf sind Links, sahen aber aus wie
      Text. Erst beim Ueberfahren zeigte sich, dass dort etwas passiert.
      Ein Pfeil an der Beschriftung macht es vorher sichtbar. */
.preisband-grid>a .k{display:flex;align-items:center;gap:7px}
.preisband-grid>a .k::after{
  content:"";width:13px;height:8px;flex:none;background:currentColor;opacity:.45;
  transform:translateX(-2px);transition:opacity .22s var(--ease-aus),transform .22s var(--ease-aus);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.preisband-grid>a:hover .k{color:var(--akzent)}
.preisband-grid>a:hover .k::after{opacity:1;transform:none}

/* 3 · Die Nummer in der Notdienstleiste ist der kuerzeste Weg zum Auftrag
      und war ein 12px-Text am rechten Rand. */

/* 4 · Der Rueckruf-Link unter den Knoepfen faengt alle auf, die gerade nicht
      telefonieren koennen. Er stand in der hellsten Grauabstufung der Seite. */
.hero-alt{color:var(--grau)}
.hero-alt a{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 620;
  text-decoration-color:var(--linie-stark)}
.hero-alt a:hover{color:var(--akzent);text-decoration-color:currentColor}

/* 5 · Anrufen schlaegt schreiben. Auf dem Handy bekommt der Anrufknopf
      deshalb zwei Drittel der Leiste statt der Haelfte. */
@media(max-width:820px){
  .actionbar{grid-template-columns:1.9fr 1fr}
  .actionbar a{min-height:62px;font-size:var(--fs-gross)}
}

/* 6 · Der Hinweiskasten trug links einen 3px-Balken. Ein farbiger Seitenrand
      ist die Standardgeste fuer "Kasten mit Bedeutung" und sieht auf jeder
      zweiten Seite im Netz gleich aus. Rahmen, Flaeche und das Versallabel
      sagen dasselbe, ohne die Anleihe. */
.hinweis .lbl{color:var(--ink)}
.hinweis-warn{background:var(--grund-3);border-color:var(--linie-stark)}

/* 7 · Versallabels umbrechen jetzt haeufiger, weil sie groesser sind.
      Ohne Ausgleich bleibt auf der zweiten Zeile ein einzelnes Wort stehen. */
.eyebrow,.label{text-wrap:balance}
@media(max-width:560px){
  .eyebrow,.label{letter-spacing:.09em}
}

/* ===========================================================================
   v8 · Merksaetze bekommen eine Form
   ---------------------------------------------------------------------------
   Befund am Bildschirm: die Erklaerabschnitte -- "Warum das jedes Jahr sein
   muss", "Bevor Sie anrufen", "Was Sie tun koennen, bis wir da sind" -- waren
   drei bis vier Absaetze Fliesstext untereinander, unterschieden nur durch ein
   fettes Wort am Zeilenanfang. Auf dem Schirm ist das eine graue Wand: der
   Vorsatz traegt die Gliederung, sieht aber aus wie Text.

   Diese Absaetze sind jetzt eine Liste mit Zeichen, Merkzeile und Erklaerung.
   Was dabei bewusst NICHT passiert ist:

   - Keine drei gleich grossen Kacheln nebeneinander. Das ist der Griff, an dem
     man eine Vorlage erkennt, und auf dem Telefon werden daraus drei Bloecke
     zum Scrollen statt einer Liste zum Ueberfliegen.
   - Keine durchgehende Linie zwischen den Zeichen wie bei .steps. Dort ist sie
     richtig, weil ein Ablauf eine Reihenfolge hat. Drei Gruende haben keine,
     und die Linie wuerde eine behaupten.
   - Kein Akzentblau in die Zeichen. Der Akzent markiert Preise, den Anrufknopf
     und den aktiven Navigationspunkt, sonst nichts. Zwoelf blaue Zeichen auf
     einer Seite waeren kein Akzent mehr, sondern ein Muster.
   =========================================================================== */

.gruende{list-style:none;margin:26px 0 30px;padding:0}
.gruende li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,2.4vw,26px);align-items:start;
  padding:22px 0;border-top:1px solid var(--linie)}
.gruende li:first-child{border-top:0;padding-top:4px}

/* Das Zeichen sitzt in einem Quadrat mit Kontur, nicht in einer gefuellten
   Scheibe: gefuellt waere es der dunkelste Punkt einer durchgehend hellen
   Seite und zoege den Blick vom Text weg, den es begleiten soll. Das ist
   dieselbe Entscheidung, die die Ziffernscheibe im Ablauf schon getroffen
   hat, und die Ecke des Quadrats haelt die Merkzeilen von den Ablaufschritten
   auseinander. */
.gruende .gz{
  width:42px;height:42px;flex:none;border-radius:var(--r-s);
  display:flex;align-items:center;justify-content:center;
  background:var(--grund-3);border:1px solid var(--linie-stark);color:var(--ink);
}
.gruende .gz .ico{width:21px;height:21px}
/* Die Merkzeile steht auf der Mitte des Quadrats, nicht auf seiner Oberkante:
   ein 42er Quadrat neben einer 22px hohen Zeile sieht sonst aus, als haenge es
   ueber dem Text. Dieselben 10px stehen aus demselben Grund an .steps .sh.

   Der Selektor traegt .wrap-narrow mit, obwohl es hier nichts einschraenkt:
   ".wrap-narrow h3:first-of-type" weiter oben gibt Zwischenueberschriften im
   Fliesstext 1,2em Vorlauf und ist spezifischer als ".gruende .gt". Weil jede
   Merkzeile in ihrem eigenen div steckt, ist auch jede "first-of-type" -- die
   Regel griff also auf allen dreien und schob sie unter ihr Quadrat. */
.wrap-narrow .gruende .gt,
.gruende .gt{margin:10px 0 6px;font-size:1.08rem;
  font-variation-settings:"wdth" 96,"wght" 700;letter-spacing:-.018em;
  line-height:1.28;color:var(--ink);text-wrap:balance}
.gruende p{margin:0;font-size:var(--fs-text);color:var(--grau);max-width:60ch}

/* Der Hinweiskasten steht oft direkt unter so einer Liste. Ohne Zeichen im
   Label steht er dann als der einzige Block ohne Sinnbild dazwischen. */
.hinweis .lbl{display:flex;align-items:center;gap:9px}
.hinweis .lbl .hinweis-ikon{width:17px;height:17px;color:var(--grau)}
.hinweis-warn .lbl .hinweis-ikon{color:var(--ink)}

/* Auf dem Telefon nimmt das Quadrat neben zwei Zeilen Merkzeile zu viel von
   der Textbreite weg. Es rueckt ueber die Zeile, kleiner. */
@media(max-width:560px){
  .gruende li{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .gruende .gz{width:36px;height:36px}
  .gruende .gz .ico{width:19px;height:19px}
  .wrap-narrow .gruende .gt,.gruende .gt{margin-top:0}
}

/* Auf dem dunklen Abschlussband und auf dem hellblauen Band traegt das
   Quadrat die Bandfaerbung, sonst steht ein weisser Fleck darauf. */
.band-paper .gruende .gz,.band-dark .gruende .gz{
  background:var(--band-fuell);border-color:var(--nacht-linie)}
.band-paper .gruende li,.band-dark .gruende li{border-top-color:var(--nacht-linie-2)}