/* ==========================================================================
   Kachelofenbau Thieme, Entwurf Startseite v01
   Grundfarbe Weiss, Grautoene, Orange als Akzent (Originalton aus dem Logo).
   Nur HTML und CSS, kein JavaScript, keine fremden Server.
   ========================================================================== */

:root{
  --orange:#F16B37;        /* Originalton aus dem Logo, Knoepfe und Akzente */
  --orange-d:#D2521F;      /* Hover */
  --orange-t:#C04A17;      /* nur fuer kleine Textmarken auf Weiss */
  --orange-hell:#FFF3EC;   /* getoente Flaeche */
  --orange-h:#FF9066;      /* Aufhellung fuer dunkle Flaechen */

  --weiss:#FFFFFF;
  --grau-1:#F6F6F5;
  --grau-2:#EDEDEB;
  --grau-3:#DCDCD9;
  --grau-4:#6E6B64;
  --grau-5:#5B5854;
  --grau-6:#26251F;

  --linie:#E4E4E1;
  --linie-dunkel:rgba(255,255,255,.15);
  /* Schriften an einer Stelle. Wechsel: build/schriften.py laufen lassen
     und hier die beiden Zeilen tauschen. */
  --schrift-kopf:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-text:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --breit:1240px;
  --schatten:0 1px 2px rgba(38,37,31,.05), 0 10px 30px rgba(38,37,31,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--weiss);color:var(--grau-6);
  font:400 16.5px/1.7 var(--schrift-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* Zeilenhoehe waechst, je kleiner die Ueberschrift ist. Bei 1.14 stossen im
   Deutschen die Umlautpunkte der naechsten Zeile an die Unterlaengen der oberen. */
/* Grotesk statt Serif: die Kontur kommt jetzt aus dem Gewicht, nicht aus der Form.
   Zwei Stufen, 800 fuer Display und Zahlen, 600 fuer alle uebrigen Ueberschriften.
   Negative Laufweite waechst mit der Groesse, sonst faellt der Satz auseinander. */
/* Grundabstand nach unten in em, waechst also mit der Schriftgroesse.
   Im normalen Fluss faellt er mit einem margin-top des Folgeelements
   zusammen, der groessere Wert gewinnt. */
h1,h2,h3,h4{font-family:var(--schrift-kopf);font-weight:600;margin:0 0 .5em;line-height:1.3;letter-spacing:-.015em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}

.huelle{width:100%;max-width:var(--breit);margin:0 auto;padding:0 24px}
.springen{position:absolute;left:12px;top:12px;transform:translateY(-180%);background:var(--grau-6);color:#fff;padding:12px 18px;z-index:200;transition:transform .15s ease}
.springen:focus{transform:none}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- Symbole ---------- */
.symbolvorrat{position:absolute;width:0;height:0;overflow:hidden}
.ic{
  width:22px;height:22px;flex:none;display:inline-block;vertical-align:-.22em;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
.ic-mini{width:15px;height:15px;stroke-width:1.9;vertical-align:-.16em}
.ic-gross{width:30px;height:30px;stroke-width:1.4}

/* ---------- Knoepfe ---------- */
.knopf{
  display:inline-flex;align-items:center;gap:10px;
  font:600 16px/1.3 var(--schrift-text);text-align:center;
  padding:15px 26px;min-height:52px;border-radius:3px;text-decoration:none;border:1px solid transparent;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.knopf-orange{background:var(--orange);color:#fff}
.knopf-orange:hover{background:var(--orange-d)}
.knopf-linie{border-color:var(--grau-3);color:var(--grau-6);background:var(--weiss)}
.knopf-linie:hover{border-color:var(--grau-6);background:var(--grau-6);color:#fff}
.hell.knopf-linie{border-color:rgba(255,255,255,.45);background:transparent;color:#fff}
.hell.knopf-linie:hover{background:#fff;color:var(--grau-6);border-color:#fff}

/* ---------- Kopfzeile: einziges Band ganz oben ---------- */
.kopf{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linie);backdrop-filter:blur(8px)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-top:15px;padding-bottom:15px}
.marke{display:block;text-decoration:none;flex:none}
.marke img{width:224px;height:72px}

.menue ul{display:flex;gap:30px;font:400 16px/1.3 var(--schrift-text);color:var(--grau-5)}
/* Kontakt steht auf dem Desktop nur als Knopf rechts, nicht doppelt im Menue */
.menue .nur-mobil{display:none}
.menue a{text-decoration:none;white-space:nowrap;padding-bottom:5px;border-bottom:2px solid transparent}
.menue a:hover{color:var(--grau-6);border-bottom-color:var(--orange)}
.kopf-rechts{display:flex;align-items:center;gap:26px}
.kopf-cta{display:inline-flex;padding:13px 22px;font-size:15px}

.menue-schalter{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}
.menue-knopf{display:none}
.menue-schalter:focus-visible ~ .huelle .menue-knopf{outline:3px solid var(--orange);outline-offset:3px}

/* ---------- Titelbereich: vollflaechiges Bild ---------- */
.titel{position:relative;background:var(--weiss);border-bottom:1px solid var(--linie);overflow:hidden;isolation:isolate}
.titel-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 58%;z-index:-2}
.titel-schleier{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(94deg,
      rgba(255,255,255,.985) 0%,
      rgba(255,255,255,.955) 19%,
      rgba(255,255,255,.85) 30%,
      rgba(255,255,255,.44) 39%,
      rgba(255,255,255,.10) 50%,
      rgba(255,255,255,0) 63%);
}
.titel-innen{position:relative;padding-top:100px;padding-bottom:100px}
.titel-innen > *{max-width:480px}
.titel-innen .vor{max-width:452px}

.titel-kicker{
  display:inline-flex;align-items:center;gap:11px;
  font:600 12px/1.45 var(--schrift-text);letter-spacing:.17em;text-transform:uppercase;
  color:var(--orange-t);margin-bottom:22px;
}
.titel-kicker::before{content:"";width:26px;height:2px;background:var(--orange);flex:none}
.titel h1{font-size:clamp(32px,4vw,48px);font-weight:800;line-height:1.14;letter-spacing:-.032em;color:var(--grau-6)}

.fp{display:block;margin-top:20px;padding-top:18px;border-top:1px solid var(--linie)}
.fp small{display:block;font:600 11px/1 var(--schrift-text);letter-spacing:.2em;text-transform:uppercase;color:var(--grau-4);margin-bottom:9px}
.fp b{
  display:block;font-family:var(--schrift-kopf);font-weight:800;
  font-size:clamp(35px,5.4vw,64px);line-height:1.02;color:var(--orange);letter-spacing:-.04em;white-space:nowrap;
}
/* Vorgabe nem: Fliesstext im Titelbereich schwarz, nicht gedaempft */
.titel p.vor{font-size:18px;line-height:1.68;color:var(--grau-6);margin:24px 0 0}
.titel-knoepfe{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}

.siegel{
  position:absolute;right:56px;top:56px;
  width:162px;height:162px;border-radius:50%;
  background:var(--weiss);box-shadow:0 4px 26px rgba(38,37,31,.22);border:1px solid var(--linie);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
}
.siegel::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid var(--orange);opacity:.4}
.siegel-o,.siegel-u{font:600 9.5px/1.3 var(--schrift-text);letter-spacing:.19em;text-transform:uppercase;color:var(--grau-4)}
.siegel-z{font-family:var(--schrift-kopf);font-weight:800;font-size:40px;line-height:1;color:var(--orange);letter-spacing:-.035em}


/* ==========================================================================
   Faktenkarte auf der Bildkante und Zusagen
   --------------------------------------------------------------------------
   Vorher standen hier zwei fast gleiche Vierer-Raster uebereinander, beide mit
   Symbolkreis, Ueberschrift und Text. Jetzt zwei gegensaetzliche Formen:
   oben ein Datenblatt, darunter Kopf links und Liste rechts.
   Die Karte ragt nur oberhalb von 900 px ins Titelbild. Genau dort haengt das
   Rundsiegel oben rechts, ab 900 px sitzt es unten rechts. Deshalb faellt die
   Ueberlappung dort auf null und .titel, .titel-innen und .siegel bleiben
   unangetastet.
   ========================================================================== */

/* ---------- Faktenkarte ---------- */
.faktenband{position:relative;z-index:1;background:var(--weiss)}
.faktenkarte{
  margin-top:-56px;
  background:var(--weiss);
  border:1px solid var(--grau-3);      /* nicht --linie: haelt auf schwachen Schirmen */
  border-top:3px solid var(--orange);
  border-radius:3px;
  box-shadow:0 2px 6px rgba(38,37,31,.05), 0 12px 30px rgba(38,37,31,.10);
}
/* Ungleiche Spaltenanteile, damit "Kachelofen- und Luftheizungsbauer," einzeilig
   passt und der Kammername nicht gekuerzt werden muss. */
.faktengitter{
  display:grid;grid-template-columns:.96fr .94fr 1.08fr 1.02fr;
  margin:0;padding:30px 14px 28px;
}
.faktengitter dd{margin:0}
.fakt{min-width:0;padding:2px 24px;border-left:1px solid var(--grau-3)}
.fakt:first-child{border-left:0}
.fakt-marke{
  margin:0 0 12px;
  font:600 11px/1.4 var(--schrift-text);letter-spacing:.19em;text-transform:uppercase;
  color:var(--orange-t);
}
.fakt-wert{
  margin:0 0 10px;
  font-family:var(--schrift-kopf);font-weight:800;
  font-size:clamp(22px,1.95vw,26px);line-height:1.18;letter-spacing:-.028em;
  color:var(--grau-6);
}
.fakt-zusatz{
  font:400 14.5px/1.55 var(--schrift-text);color:var(--grau-4);
  min-height:45px;                     /* haelt alle vier Zellen auf zwei Zeilen */
  hyphens:auto;-webkit-hyphens:auto;
}
.faktenfuss{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:0 26px;padding:8px 26px;
  border-top:1px solid var(--grau-3);background:var(--orange-hell);
}
.faktenfuss-ort{
  display:flex;align-items:center;gap:11px;margin:0;
  font:400 14.5px/1.55 var(--schrift-text);color:var(--grau-5);
}
.faktenfuss .ic{color:var(--orange-t);flex:none}
.faktenfuss-tel{
  display:inline-flex;align-items:center;gap:11px;min-height:44px;text-decoration:none;
  font:600 16px/1.4 var(--schrift-text);color:var(--grau-6);
}
.faktenfuss-tel:hover{color:var(--orange-t);text-decoration:underline}

/* ---------- Zusagen: Kopf links, vier Zeilen rechts ---------- */
.ab-zusagen{padding:76px 0 84px}
.zusagen-raster{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.55fr);
  gap:0 60px;align-items:start;
}
.zusagen-kopf h2{
  font-size:clamp(27px,2.8vw,36px);line-height:1.2;letter-spacing:-.028em;
  max-width:none;color:var(--grau-6);
}
.zusagen-kopf .fuehrung{font-size:17px;max-width:34em;margin-top:17px}
.zusagen-kopf .mehr-zeile{margin:28px 0 0}
.zusagen{display:grid;border-bottom:1px solid var(--grau-3)}
/* Ueberschrift und Text liegen in .zu-text, nicht direkt im Raster. Damit kann
   der Absatz beim Umschalten auf eine Spalte nicht in die Symbolspalte rutschen. */
.zu{
  display:grid;grid-template-columns:54px minmax(0,1fr);gap:0 22px;align-items:start;
  padding:22px 0;border-top:1px solid var(--grau-3);
}
.zu-ring{
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange-hell);color:var(--orange-t);
  border:1px solid rgba(241,107,55,.28);
  /* --orange-t statt --orange: Logo-Orange auf der getoenten Flaeche ergibt nur
     2,80 zu 1 und verfehlt die 3,0 fuer Nichttext. Die Textvariante ergibt 4,56 zu 1. */
}
.zu h3{font-size:20px;line-height:1.32;letter-spacing:-.012em;color:var(--grau-6)}
.zu p{
  font:400 16px/1.68 var(--schrift-text);color:var(--grau-5);margin:0;max-width:33em;
  hyphens:auto;-webkit-hyphens:auto;
}

@media (max-width:1120px){
  .faktenkarte{margin-top:-40px}
  .faktengitter{grid-template-columns:repeat(2,minmax(0,1fr));padding:26px 14px 24px}
  .fakt{padding:0 24px 20px}
  .fakt:nth-child(n+3){padding:20px 24px 0;border-top:1px solid var(--grau-3)}
  .fakt:nth-child(odd){border-left:0}
  .fakt-zusatz{min-height:0}
  .ab-zusagen{padding:62px 0 70px}
  .zusagen-raster{grid-template-columns:minmax(0,1fr);gap:36px 0}
  .zusagen-kopf .fuehrung{max-width:60em}
}
@media (max-width:900px){
  .faktenkarte{margin-top:0}           /* ab hier haengt das Siegel unten rechts */
  .ab-zusagen{padding:54px 0 62px}
  .zu{gap:0 18px;padding:22px 0}
}
@media (max-width:620px){
  .faktengitter{grid-template-columns:minmax(0,1fr);padding:12px 12px 10px}
  .fakt,.fakt:nth-child(n+3){
    display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);
    column-gap:16px;align-items:baseline;
    padding:14px 10px;border-left:0;border-top:1px solid var(--grau-3);
  }
  .fakt:first-child{border-top:0}
  .fakt-marke{margin:0;letter-spacing:.14em}
  .fakt-wert{grid-column:2;font-size:21px;margin:0}
  /* Erklaersatz ueber beide Spalten, sonst braucht er auf 375 px vier statt
     zwei Zeilen und die Karte waechst um 135 px. */
  .fakt-zusatz{grid-column:1/-1;margin-top:7px}
  .faktenfuss{padding:6px 18px}
  .ab-zusagen{padding:46px 0 54px}
  .zu{grid-template-columns:minmax(0,1fr);padding:20px 0}
  .zu-ring{width:46px;height:46px;margin-bottom:11px}
  .zu-ring .ic-gross{width:26px;height:26px}
  .zu h3{font-size:19px}
  .zu p{font-size:15.5px}
}

/* ---------- Abschnitte ---------- */
.ab{padding:92px 0}
.ab-schmal{padding:72px 0}
.ab-grau{background:var(--grau-1)}
.ab-dunkel{background:var(--grau-6);color:#fff}

.kicker{display:inline-flex;align-items:center;gap:8px;font:600 12px/1.45 var(--schrift-text);letter-spacing:.17em;text-transform:uppercase;color:var(--orange-t);margin-bottom:15px}
.ab h2{font-size:clamp(28px,3.3vw,40px);line-height:1.18;letter-spacing:-.028em;max-width:20ch;color:var(--grau-6)}
.ab h2.weit{max-width:26ch}
.fuehrung{font-size:18px;line-height:1.7;color:var(--grau-5);max-width:62ch;margin-top:19px}
.kopfzeile{max-width:760px;margin-bottom:48px}
.kopfzeile.mitte{margin-left:auto;margin-right:auto;text-align:center}
.kopfzeile.mitte h2,.kopfzeile.mitte .fuehrung{margin-left:auto;margin-right:auto}

/* Dunkle Abschnitte: nach den hellen Regeln, sonst gewinnt .ab h2 */
.ab-dunkel h2,.ab-dunkel h3,.ab-dunkel h4{color:#fff}
.ab-dunkel .kicker{color:var(--orange-h)}
.ab-dunkel .fuehrung{color:rgba(255,255,255,.74)}


/* ---------- Betrieb: Bild plus drei Punkte ---------- */
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.zwei-bild img{width:100%;object-fit:cover;aspect-ratio:11/8;border-radius:3px}
/* Historische Dokumente werden nicht beschnitten, das Bild behaelt sein Format. */
.zwei-bild-nativ img{aspect-ratio:auto}
.bildunterschrift{font:400 13.5px/1.55 var(--schrift-text);color:var(--grau-4);margin-top:12px;padding-left:14px;border-left:2px solid var(--orange)}
.drei-punkte{display:grid;gap:28px}
.punkt h3{display:flex;align-items:flex-start;gap:11px;font-size:20px;letter-spacing:-.014em;color:var(--grau-6)}
.punkt h3 .ic{color:var(--orange);margin-top:3px}
.punkt p{font:400 16px/1.65 var(--schrift-text);color:var(--grau-5);margin:0;padding-left:33px;max-width:64ch}

/* ---------- Ofenarten ---------- */
.arten{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
/* Ofenart-Seiten: die eigene Bauart steht nicht mit im Raster, drei Karten */
.arten-drei{grid-template-columns:repeat(3,1fr)}
.art{background:var(--weiss);border:1px solid var(--linie);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.art:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:var(--grau-3)}
/* Auf den Karten stehen Freisteller mit Transparenz, keine Fotos.
   Deshalb contain statt cover, dazu eine getoente Buehne: auf Weiss loesen
   sich die hellen Kacheln und Rohre der Zeichnungen sonst auf. */
.art-bild{position:relative;display:block;background:var(--orange-hell);
  border-bottom:1px solid rgba(241,107,55,.18)}
.art-bild img{aspect-ratio:56/77;object-fit:contain;width:100%;padding:20px 18px 26px}
.art-marke{
  position:absolute;left:14px;bottom:-19px;width:44px;height:44px;border-radius:50%;
  background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 12px rgba(38,37,31,.24);
}
.art-text{padding:34px 20px 24px;flex:1;display:flex;flex-direction:column}
.art h3{font-size:20px;letter-spacing:-.014em;color:var(--grau-6)}
.art p{font:400 15px/1.58 var(--schrift-text);color:var(--grau-5);margin:0}
.art-mehr{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:600 13.5px/1.35 var(--schrift-text);color:var(--orange-t)}

/* ---------- Verweis auf die Referenzen unter den Ofenart-Karten ---------- */
.inspo-verweis{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px 40px;
  margin-top:26px;background:var(--orange-hell);border:1px solid rgba(241,107,55,.22);
  border-radius:3px;padding:28px 34px}
.inspo-verweis h3{font-size:22px;letter-spacing:-.014em;margin-bottom:.3em}
.inspo-verweis p{margin:0;color:var(--grau-5);max-width:64ch}
.inspo-verweis .knopf{justify-self:end}

/* ---------- Ablauf ---------- */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;counter-reset:s}
.schritt{counter-increment:s;position:relative;padding-top:26px;border-top:2px solid var(--orange)}
.schritt::before{
  content:"0" counter(s);position:absolute;top:-13px;right:0;background:var(--grau-1);padding-left:10px;
  font:600 13px/1 var(--schrift-text);letter-spacing:.13em;color:var(--orange-t);
}
.s-ring{
  width:52px;height:52px;border-radius:50%;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--weiss);color:var(--orange);border:1px solid rgba(241,107,55,.3);
}
.schritt h3{font-size:19.5px;letter-spacing:-.014em;color:var(--grau-6)}
.schritt p{font:400 15.5px/1.62 var(--schrift-text);color:var(--grau-5);margin:0}

/* ---------- Inspirationen ---------- */
.galerie{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.galerie img{width:100%;aspect-ratio:52/70;object-fit:cover;border-radius:3px}
.galerie figure{margin:0}
.galerie figcaption{font:600 11.5px/1.4 var(--schrift-text);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:11px}

/* ---------- Leistungen ---------- */
.leistungen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:3px;overflow:hidden}
.leistung{background:var(--weiss);padding:30px 28px;transition:background .18s ease}
.leistung:hover{background:var(--orange-hell)}
.leistung .ic-gross{color:var(--orange);margin-bottom:14px}
.leistung h3{font-size:18.5px;letter-spacing:-.01em;color:var(--grau-6)}
.leistung p{font:400 15px/1.6 var(--schrift-text);color:var(--grau-5);margin:0}

/* ---------- CTA-Band ---------- */
.band{background:var(--orange-hell);border-top:1px solid rgba(241,107,55,.22);border-bottom:1px solid rgba(241,107,55,.22)}
.band-innen{display:flex;flex-wrap:wrap;gap:30px 50px;align-items:center;justify-content:space-between;padding:44px 24px}
.band h2{font-size:clamp(25px,2.8vw,33px);line-height:1.18;letter-spacing:-.026em;color:var(--grau-6);max-width:21ch}
.band p{font:400 16.5px/1.6 var(--schrift-text);color:var(--grau-5);margin:0;max-width:52ch}
.band-knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.band .knopf-linie{background:transparent;border-color:var(--grau-3)}

/* ---------- Region ---------- */
.orte{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.orte li{font:400 15px/1.35 var(--schrift-text);padding:10px 17px;border:1px solid var(--grau-3);border-radius:3px;background:var(--weiss);color:var(--grau-5)}

/* ---------- Fragen ---------- */
.fragen{max-width:860px;margin-top:4px}
.frage{border-bottom:1px solid var(--linie)}
.frage summary{cursor:pointer;list-style:none;padding:24px 46px 24px 0;position:relative;
  font-family:var(--schrift-kopf);font-weight:600;font-size:19.5px;line-height:1.42;letter-spacing:-.012em;color:var(--grau-6)}
.frage summary::-webkit-details-marker{display:none}
.frage summary:hover{color:var(--orange-t)}
.frage summary::after{content:"";position:absolute;right:8px;top:33px;width:12px;height:12px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg);transition:transform .2s ease}
.frage[open] summary::after{transform:rotate(-135deg);top:37px}
.frage .antwort{padding:0 40px 26px 0;color:var(--grau-5);font-size:16.5px;line-height:1.7}

/* ---------- Kontakt ---------- */
.kontakt-gitter{display:grid;grid-template-columns:1.02fr 1fr;gap:64px;align-items:start}
.adresse{font-style:normal;display:grid;gap:20px;margin-top:32px}
.a-zeile{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.78)}
.a-zeile .ic{color:var(--orange-h);margin-top:4px}
.a-zeile strong{color:#fff}
.kanaele{display:grid;gap:1px;background:var(--linie-dunkel);border:1px solid var(--linie-dunkel);border-radius:3px;overflow:hidden}
.kanal{background:#31302A;padding:22px 24px;display:flex;gap:18px;align-items:center;text-decoration:none;transition:background .18s ease}
.kanal:hover{background:#3C3B33}
.kanal > .ic-gross{color:var(--orange-h)}
.k-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.k-art{font:600 11px/1.4 var(--schrift-text);letter-spacing:.19em;text-transform:uppercase;color:var(--orange-h)}
.k-wert{font-family:var(--schrift-kopf);font-weight:700;font-size:23px;line-height:1.28;letter-spacing:-.018em;color:#fff;overflow-wrap:anywhere}
.k-zu{font:400 13.5px/1.5 var(--schrift-text);color:rgba(255,255,255,.58)}

/* ---------- Der Meister: Freisteller auf getoenter Buehne ----------
   meister.webp ist ein Freisteller (280 x 570). Er steht ohne unteres Polster
   auf der Kante der Karte, so wirkt die Person auf die Flaeche gestellt statt
   in einen Kasten gelegt. */
.meister{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:end;
  margin:32px 0 0;background:var(--orange-hell);border:1px solid rgba(241,107,55,.22);
  border-radius:3px;padding:24px 26px 0}
.meister img{display:block;width:100%;height:auto}
.meister figcaption{padding-bottom:22px;font:400 15px/1.6 var(--schrift-text);color:var(--grau-5)}
.meister figcaption strong{display:block;font-family:var(--schrift-kopf);font-weight:600;
  font-size:17.5px;letter-spacing:-.012em;color:var(--grau-6);margin-bottom:3px}
.meister figcaption .kicker{margin-bottom:10px}

/* Breite Fassung auf der Leistungsseite */
.meister-band{display:grid;grid-template-columns:210px 1fr;gap:58px;align-items:end;
  background:var(--orange-hell);border:1px solid rgba(241,107,55,.22);border-radius:3px;
  padding:0 52px}
.meister-band .meister-bild{align-self:end;padding-top:40px}
.meister-band img{display:block;width:100%;height:auto}
.meister-band .meister-text{padding:44px 0 40px}
.meister-band .meister-text .fuehrung{max-width:56ch}
.meister-band .knopf{margin-top:26px}

/* ---------- Fusszeile ---------- */
.fuss{background:var(--grau-1);border-top:1px solid var(--linie);color:var(--grau-5);font-size:15px;padding:54px 0 26px}
.fuss-gitter{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:36px;border-bottom:1px solid var(--linie)}
.fuss-logo{width:200px;height:64px;margin-bottom:18px}
/* Spaltentitel als p statt h4, sonst springt die Gliederung von h2 auf h4 */
.fuss-titel{font-family:var(--schrift-kopf);font-weight:600;font-size:16.5px;
  letter-spacing:-.008em;color:var(--grau-6);margin:0 0 15px}
.fuss-nap{margin-top:16px}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--orange-t)}
.fuss ul{display:grid;gap:10px}
.fuss-unten{display:flex;flex-wrap:wrap;gap:14px 32px;justify-content:space-between;padding-top:24px;font-size:14px;color:var(--grau-4)}

/* ---------- Entwurfs-Hinweis (steht am Seitenende, nicht ueber dem Menue) ---------- */
.entwurf{background:var(--grau-6);color:rgba(255,255,255,.8);font:600 13px/1.5 var(--schrift-text);text-align:center;padding:12px 24px;margin:0}

/* ==========================================================================
   Bausteine der Unterseiten
   ========================================================================== */

/* aktiver Menuepunkt */
.menue a.an{color:var(--grau-6);border-bottom-color:var(--orange)}

/* Kopfband der Unterseiten */
.seitenkopf{position:relative;overflow:hidden;isolation:isolate;background:var(--grau-6);color:#fff;
  min-height:430px;display:flex;align-items:center}
/* object-position wird je Seite gesetzt, Wert aus build/bildlage.py */
.seitenkopf-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:-2}
.seitenkopf-schleier{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,rgba(20,19,16,.94) 0%,rgba(20,19,16,.90) 30%,rgba(20,19,16,.62) 48%,rgba(20,19,16,.34) 70%,rgba(20,19,16,.22) 100%)}
.seitenkopf-innen{position:relative;width:100%;padding-top:70px;padding-bottom:70px;max-width:var(--breit)}
.seitenkopf h1{font-size:clamp(31px,3.9vw,48px);font-weight:800;line-height:1.14;letter-spacing:-.032em;color:#fff;max-width:18ch;margin-top:4px}
.seitenkopf .titel-kicker{color:var(--orange-h);margin-bottom:16px}
.seitenkopf .titel-kicker::before{background:var(--orange-h)}
.seitenkopf-unter{font-size:18px;line-height:1.66;color:rgba(255,255,255,.8);max-width:58ch;margin-top:20px}

/* Brotkrume */
.krume{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font:400 13.5px/1.4 var(--schrift-text);
  color:rgba(255,255,255,.62);margin-bottom:22px}
.krume a{text-decoration:none}
.krume a:hover{color:#fff}
.krume .ic{color:var(--orange-h)}
.ab-recht .krume{color:var(--grau-4)}
.ab-recht .krume a:hover{color:var(--orange-t)}
.ab-recht .krume .ic{color:var(--orange)}

/* Lesetexte */
.lesetext{display:grid;gap:44px;max-width:80ch}
.lesetext-schmal{max-width:74ch;gap:0;display:block}
.text-block h2{font-size:clamp(23px,2.4vw,29px);line-height:1.22;letter-spacing:-.022em;max-width:27ch}
.text-block p{font-size:16.5px;line-height:1.72;color:var(--grau-5);max-width:74ch}
.text-block .liste{margin-top:18px}

/* Rechtstexte */
.ab-recht{padding:64px 0 92px}
.ab-recht h1{font-size:clamp(31px,3.9vw,44px);font-weight:800;line-height:1.14;letter-spacing:-.03em;margin-bottom:34px}
.ab-recht h2{font-size:21px;margin:36px 0 10px}
.ab-recht h3{font-size:18px;margin:24px 0 8px}
.ab-recht p,.ab-recht li{font-size:16.5px;line-height:1.72;color:var(--grau-5)}
.ab-recht ul{list-style:disc;padding-left:22px;margin:0 0 16px}
.ab-recht li{margin-bottom:6px}
.ab-recht a{color:var(--orange-t)}
.hinweis-kasten{display:flex;gap:18px;align-items:flex-start;background:var(--orange-hell);
  border-left:3px solid var(--orange);padding:24px 26px;margin-bottom:34px}
.hinweis-kasten .ic-gross{color:var(--orange);flex:none;margin-top:2px}
.hinweis-kasten h2{font-size:19.5px;letter-spacing:-.012em}
.hinweis-kasten p{margin:0}
.offen-hinweis{border-left:3px solid var(--grau-3);padding-left:16px;font-size:15px;color:var(--grau-4)}
.stand-hinweis{margin-top:34px;font-size:15px;color:var(--grau-4)}

/* Leistungen ausfuehrlich */
.leistungen-lang{display:grid;gap:2px;background:var(--linie);border:1px solid var(--linie);border-radius:3px;overflow:hidden}
.leistung-lang{background:var(--weiss);display:flex;gap:26px;padding:32px 30px}
.l-ring{width:58px;height:58px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--orange-hell);color:var(--orange);border:1px solid rgba(241,107,55,.28)}
.leistung-lang h2{font-size:21px;letter-spacing:-.016em;max-width:none}
.leistung-lang p{font-size:16px;line-height:1.68;color:var(--grau-5)}

/* Listen */
.liste{display:grid;gap:13px}
.liste li{position:relative;padding-left:28px;font-size:16.5px;line-height:1.6;color:var(--grau-5);max-width:74ch}
.liste li strong{color:var(--grau-6)}
.liste li::before{content:"";position:absolute;left:0;top:9px;width:10px;height:10px;background:var(--orange);transform:rotate(45deg)}
.liste-zwei{grid-template-columns:1fr 1fr;gap:20px 46px}
.ab-dunkel .liste li{color:rgba(255,255,255,.78)}
.ab-dunkel .liste li strong{color:#fff}

/* Vergleichstabelle */
.tabelle-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:3px;background:var(--weiss)}
.vergleich{border-collapse:collapse;width:100%;min-width:640px;font-size:15.5px}
.vergleich th,.vergleich td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--linie);vertical-align:top}
.vergleich thead th{font:600 12px/1.4 var(--schrift-text);letter-spacing:.11em;text-transform:uppercase;
  color:var(--orange-t);background:var(--grau-1)}
.vergleich tbody th{font-family:var(--schrift-kopf);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--grau-6);white-space:nowrap}
.vergleich td{color:var(--grau-5)}
.vergleich tbody tr:last-child th,.vergleich tbody tr:last-child td{border-bottom:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Galerie mit drei Spalten */
.galerie-drei{grid-template-columns:repeat(3,1fr);gap:18px}

/* helle Kontaktkacheln */
.adresse-hell .a-zeile{color:var(--grau-5)}
.adresse-hell .a-zeile strong{color:var(--grau-6)}
.adresse-hell .a-zeile .ic{color:var(--orange)}
.kanaele-hell{background:var(--linie);border-color:var(--linie)}
.kanaele-hell .kanal{background:var(--weiss)}
.kanaele-hell .kanal:hover{background:var(--orange-hell)}
.kanaele-hell .kanal > .ic-gross{color:var(--orange)}
.kanaele-hell .k-art{color:var(--orange-t)}
.kanaele-hell .k-wert{color:var(--grau-6)}
.kanaele-hell .k-zu{color:var(--grau-4)}

/* Zeile mit weiterfuehrendem Knopf */
.mehr-zeile{margin-top:38px}
.zwei-schmal{align-items:center}

@media (max-width:1120px){
  .galerie-drei{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .seitenkopf{min-height:340px}
  .seitenkopf-innen{padding-top:48px;padding-bottom:48px}
  .liste-zwei{grid-template-columns:1fr;gap:13px}
  .leistung-lang{flex-direction:column;gap:16px;padding:26px 22px}
  .lesetext{gap:34px}
}
@media (max-width:620px){
  .galerie-drei{grid-template-columns:repeat(2,1fr);gap:12px}
  .seitenkopf{min-height:280px}
  .hinweis-kasten{flex-direction:column;gap:12px;padding:20px}
  .ab-recht{padding:44px 0 66px}
}

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */
@media (max-width:1120px){
  .arten{grid-template-columns:repeat(2,1fr)}
  .arten-drei{grid-template-columns:repeat(3,1fr)}
  .galerie{grid-template-columns:repeat(3,1fr)}
  .leistungen{grid-template-columns:repeat(2,1fr)}
  .schritte{grid-template-columns:repeat(2,1fr);gap:32px 28px}
  .zwei{gap:44px}
  .marke img{width:196px;height:63px}
  .menue ul{gap:22px;font-size:15px}
  .titel-innen{padding-top:84px;padding-bottom:84px}
  .siegel{right:28px;top:34px;width:138px;height:138px}
  .siegel-z{font-size:36px}
}

@media (max-width:900px){
  .menue-knopf{display:flex;align-items:center;gap:9px;cursor:pointer;
    font:600 14px/1 var(--schrift-text);padding:12px 15px;border:1px solid var(--grau-3);border-radius:3px}
  .menue-knopf .balken{display:block;width:17px;height:9px;border-top:2px solid var(--grau-6);border-bottom:2px solid var(--grau-6)}
  .menue{display:none;position:absolute;left:0;right:0;top:100%;background:var(--weiss);
    border-bottom:1px solid var(--linie);box-shadow:var(--schatten)}
  .menue ul{flex-direction:column;gap:0;padding:8px 24px 20px}
  .menue li{border-top:1px solid var(--linie)}
  .menue .nur-mobil{display:list-item}
  .menue a{display:block;padding:16px 0;font-size:17px;border:0}
  /* Der Schalter ist Geschwister von .huelle, das Menue liegt darin */
  .menue-schalter:checked ~ .huelle .menue{display:block}

  .titel-innen{padding-top:52px;padding-bottom:240px}
  .titel-innen > *,.titel-innen .vor{max-width:none}
  .titel-schleier{background:linear-gradient(178deg,
      rgba(255,255,255,.985) 0%,
      rgba(255,255,255,.955) 36%,
      rgba(255,255,255,.60) 48%,
      rgba(255,255,255,.16) 60%,
      rgba(255,255,255,.03) 76%,
      rgba(255,255,255,0) 100%)}
  .siegel{right:20px;top:auto;bottom:24px;width:120px;height:120px}
  .siegel-z{font-size:32px}
  .zwei,.kontakt-gitter{grid-template-columns:1fr;gap:40px}
  .inspo-verweis{grid-template-columns:1fr;padding:24px 22px}
  .inspo-verweis .knopf{justify-self:start}
  .ab{padding:66px 0}
  .ab-schmal{padding:56px 0}
  .band-innen{padding:36px 24px}
}

@media (max-width:620px){
  body{font-size:16.5px}
  .huelle{padding:0 18px}
  .marke img{width:158px;height:51px}
  .kopf-innen{gap:10px}
  .kopf-rechts{gap:10px}
  .kopf-cta{padding:12px 15px;font-size:14px}
  .menue-knopf{padding:11px 12px;gap:0}
  .menue-knopf .wort{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .arten,.arten-drei,.leistungen,.schritte{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(2,1fr)}
  .titel-knoepfe .knopf{width:100%;justify-content:center}
  .titel-innen{padding-bottom:190px}
  .fuss-gitter{grid-template-columns:1fr;gap:32px}
  .k-wert{font-size:20px}
  .kanal{padding:20px 18px;gap:14px}
  .siegel{right:14px;bottom:18px;width:104px;height:104px}
  .siegel-z{font-size:28px}
  .siegel-o,.siegel-u{font-size:8.5px}
  .band-knoepfe .knopf{width:100%;justify-content:center}
  .punkt p{padding-left:0}
  .meister{grid-template-columns:96px 1fr;gap:18px;padding:18px 18px 0}
  .meister figcaption{padding-bottom:16px;font-size:14px}
}

/* Meisterkarte der Leistungsseite: unter 900 px eine Spalte, das Foto bleibt
   auf der Unterkante stehen. */
@media (max-width:900px){
  .meister-band{grid-template-columns:1fr;gap:0;padding:0 28px}
  .meister-band .meister-text{padding:30px 0 32px}
  .meister-band .meister-bild{order:2;padding-top:0;width:min(180px,52%)}
}

/* ---------- Deutscher Satz in schmalen Spalten ----------
   Zusammensetzungen wie "Strahlungswaerme" reissen in 200-px-Spalten grosse
   Luecken. Silbentrennung glaettet das, die Seite ist als lang="de" ausgezeichnet. */
.art p,.zu p,.schritt p,.leistung p,.fakt-zusatz,.galerie figcaption,.k-zu{
  hyphens:auto;-webkit-hyphens:auto;
}
/* Verhindert einzelne Woerter auf der letzten Zeile von Ueberschriften */
h1,h2,h3,h4,.fuehrung,.seitenkopf-unter{text-wrap:pretty}

/* ==========================================================================
   Schnitt-Lehrtafel: getoente Buehne, Nummern im Bild, Legende daneben
   --------------------------------------------------------------------------
   Die fuenf Bilder sind Freisteller mit Alphakanal, sie brauchen keinen
   weissen Kasten. Was sie brauchen, ist ein Grund: die weissen Sockel,
   Bodenplatten und der Pufferspeicher verlieren auf Weiss ihre Unterkante.
   Deshalb steht das Motiv auf --orange-hell mit einer feinen orangefarbenen
   Linie, also genau der Rezeptur, die .art-bild weiter unten auf derselben
   Seite bereits benutzt (stil.css, Abschnitt Ofenarten).

   Die Nummern liegen in Prozent auf .schnitt-rahmen, und .schnitt-rahmen
   umschliesst das Bild pixelgenau. Nicht auf .schnitt-buehne setzen, deren
   Polster wuerde alle Werte verschieben. Die Werte gelten fuer die
   beschnittenen WebP aus build/bilder.py, nicht fuer die Original-PNG.

   Kein JavaScript.
   Anhaengen an assets/stil.css nach dem Abschnitt "Bausteine der Unterseiten".
   ========================================================================== */

.ab-schnitt{border-top:1px solid var(--linie)}
.ab-schnitt .kopfzeile{margin-bottom:44px}

.schnitt{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);
  gap:18px 48px;align-items:start;margin:0;
}
.schnitt-buehne{grid-column:1;grid-row:1}
.schnitt-unterschrift{grid-column:1;grid-row:2;max-width:74ch}
.schnitt-legende{grid-column:2;grid-row:1 / span 2;padding-top:2px;min-width:0}

/* ---------- Buehne ---------- */
.schnitt-buehne{
  background:var(--orange-hell);
  border:1px solid rgba(241,107,55,.22);
  border-radius:3px;
  padding:32px 32px 36px;
}
.schnitt-rahmen{position:relative;width:100%;max-width:var(--bildbreite,640px);margin:0 auto}
.schnitt-rahmen img{display:block;width:100%;height:auto}

/* ---------- Nummern im Bild ---------- */
.schnitt-marken{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.schnitt-marke{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  /* Weiss auf --orange-t ergibt 4,96 zu 1. Auf dem Logo-Orange waeren es
     nur 3,05 zu 1, das reicht fuer die Ziffer nicht. */
  background:var(--orange-t);color:#fff;
  font-family:var(--schrift-kopf);font-weight:800;font-size:15px;line-height:1;letter-spacing:0;
  /* Der weisse Ring traegt die Nummer sowohl ueber dem Feuer als auch ueber
     hellem Putz und heller Kachel. */
  box-shadow:0 0 0 3px rgba(255,255,255,.94),0 2px 7px rgba(38,37,31,.28);
}

/* ---------- Legende ---------- */
.schnitt-rubrik{
  margin:0 0 18px;
  font:600 11px/1.4 var(--schrift-text);letter-spacing:.19em;text-transform:uppercase;
  color:var(--grau-4);
}
.schnitt-teile{counter-reset:st;display:grid;gap:17px;margin:0;padding:0;list-style:none}
.schnitt-teile li{
  counter-increment:st;position:relative;padding-left:40px;
  font:400 15.5px/1.62 var(--schrift-text);color:var(--grau-5);
  hyphens:auto;-webkit-hyphens:auto;   /* "Speicherkoerper" in schmaler Spalte */
}
.schnitt-teile li::before{
  content:counter(st);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--orange-t);color:#fff;
  font-family:var(--schrift-kopf);font-weight:800;font-size:13px;line-height:1;
}
.schnitt-teile b{display:block;margin-bottom:2px;font-weight:600;font-size:16px;letter-spacing:-.008em;color:var(--grau-6)}

.schnitt-quelle{
  display:flex;align-items:flex-start;gap:10px;
  margin:24px 0 0;padding-top:16px;border-top:1px solid var(--linie);
  font:400 13.5px/1.6 var(--schrift-text);color:var(--grau-4);
}
.schnitt-quelle .ic{color:var(--orange);flex:none;margin-top:3px}
.schnitt-quelle a{color:var(--orange-t)}

/* ---------- Hochformat: das Anlagenschema, 620 zu 1010 ---------- */
.schnitt-hoch{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
.schnitt-hoch .schnitt-buehne{padding:28px 28px 32px}
.schnitt-hoch .schnitt-legende{align-self:center}

/* ---------- Kaminoefen: kein Schnitt, sondern das fertige Geraet ----------
   Bewusst graue Buehne statt der getoenten: das freigestellte Produktfoto
   stammt nicht aus einer Planung und darf nicht aussehen wie die vier
   Schnittdarstellungen. */
.schnitt-geraet{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.schnitt-geraet .schnitt-buehne{background:var(--grau-1);border-color:var(--grau-3);padding:34px}
.schnitt-geraet .schnitt-legende{align-self:center}
.schnitt-hinweis{font:400 16.5px/1.72 var(--schrift-text);color:var(--grau-5);max-width:58ch;margin:0 0 18px}
.schnitt-hinweis:last-of-type{margin-bottom:0}
.schnitt-mehr{margin-top:28px}


/* ==========================================================================
   Umbruchpunkte
   ========================================================================== */

@media (max-width:1120px){
  .schnitt{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px 36px}
  .schnitt-hoch{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .schnitt-geraet{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .schnitt-buehne{padding:26px 24px 30px}
  .schnitt-geraet .schnitt-buehne{padding:28px}
  .schnitt-marke{width:30px;height:30px;font-size:14px}
  .schnitt-teile{gap:16px}
  .schnitt-teile li{padding-left:36px;font-size:15px}
  .schnitt-teile li::before{width:24px;height:24px;font-size:12.5px}
  .schnitt-teile b{font-size:15.5px}
  .ab-schnitt .kopfzeile{margin-bottom:38px}
}

@media (max-width:900px){
  /* Eine Spalte, Reihenfolge Buehne, Bildunterschrift, Legende.
     Die Unterschrift wandert damit zwischen Bild und Legende, obwohl sie im
     Quelltext als letztes Kind von figure steht. Das verlangt die HTML-Regel
     fuer figcaption, und im Modul gibt es keine anklickbaren Elemente ausser
     dem Knopf auf der Kaminoefen-Seite, die Fokusreihenfolge faellt also
     nicht auf. */
  .schnitt,.schnitt-hoch,.schnitt-geraet{grid-template-columns:minmax(0,1fr);gap:26px}
  .schnitt-buehne{grid-column:1;grid-row:1}
  .schnitt-unterschrift{grid-column:1;grid-row:2;max-width:none}
  .schnitt-legende{grid-column:1;grid-row:3;padding-top:0}
  .schnitt-hoch .schnitt-legende,.schnitt-geraet .schnitt-legende{align-self:start}
  /* Zwei Spalten, sonst steht unter einem breiten Bild eine sehr lange
     duenne Liste. */
  .schnitt-teile{grid-template-columns:1fr 1fr;gap:20px 32px}
  /* Ohne diesen Deckel liefe das Hochformat ueber die volle Breite und waere
     allein fuer das Bild hoeher als der Schirm. */
  .schnitt-hoch .schnitt-rahmen{max-width:min(var(--bildbreite,400px),58vw)}
  .ab-schnitt .kopfzeile{margin-bottom:32px}
}

@media (max-width:620px){
  .schnitt,.schnitt-hoch,.schnitt-geraet{gap:22px}
  .schnitt-buehne{padding:16px 14px 22px}
  .schnitt-geraet .schnitt-buehne{padding:22px}
  /* Der Deckel wird gelockert, sonst wird das Schema auf dem Telefon zu
     klein und die beiden Leitungen sind nicht mehr zu verfolgen. */
  .schnitt-hoch .schnitt-rahmen{max-width:min(var(--bildbreite,400px),72vw)}
  /* Die Nummern bleiben. Der engste Abstand zweier Punkte liegt bei 375 px
     Schirmbreite bei 47 px, der Punkt misst 27 px. Ohne die Punkte im Bild
     zeigt die Legende auf nichts mehr. */
  .schnitt-marke{width:27px;height:27px;font-size:13px;
    box-shadow:0 0 0 2.5px rgba(255,255,255,.94),0 2px 6px rgba(38,37,31,.28)}
  .schnitt-teile{grid-template-columns:1fr;gap:15px}
  .schnitt-teile li{padding-left:34px}
  .schnitt-teile li::before{width:23px;height:23px;font-size:12px}
  .schnitt-hinweis{font-size:16px;margin-bottom:16px}
  .schnitt-mehr{margin-top:24px}
}

@media print{
  .schnitt,.schnitt-hoch,.schnitt-geraet{grid-template-columns:minmax(0,1fr)}
  .schnitt-buehne{grid-row:1}
  .schnitt-unterschrift{grid-row:2}
  .schnitt-legende{grid-column:1;grid-row:3}
  .schnitt-teile{grid-template-columns:1fr}
  .schnitt-marke{box-shadow:0 0 0 2px #fff}
}

/* ---------- Tippflaechen und Rhythmus auf kleinen Schirmen ---------- */
@media (max-width:900px){
  /* Fingerbedienung: Links in Listen brauchen Flaeche, nicht nur Schrift */
  .fuss ul a,.menue a{display:block;padding:10px 0}
  .fuss ul{gap:2px}
  .fuss-unten a{display:inline-block;padding:11px 0}
  .krume a{display:inline-block;padding:12px 0}
  .fuss-nap a{padding:9px 0}
  .menue-knopf{min-height:44px}
  .kopf-cta{min-height:44px}
  .fuss-nap a{display:inline-block}
}
@media (max-width:620px){
  .ab{padding:56px 0}
  .ab-schmal{padding:46px 0}
  .kopfzeile{margin-bottom:34px}
  .band-innen{padding:30px 18px}
  .knopf{width:auto}
  .titel-knoepfe{gap:10px}
  .titel h1{line-height:1.2}
  .seitenkopf h1{line-height:1.2}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

@media print{
  .kopf,.entwurf,.titel-knoepfe,.band-knoepfe{display:none}
  body{background:#fff;color:#000}
}


/* ==========================================================================
   Referenzen: Raster, Filter und Lightbox ohne JavaScript
   --------------------------------------------------------------------------
   Mechanik:
   - Fuenf versteckte Radio-Knoepfe stehen in .huelle unmittelbar vor der
     Chip-Leiste, beide sind Geschwister des Rasters. Sichtbarkeit laeuft
     ueber #f-x:checked ~ .galerie-raster .kachel:not(.r-x). Zusaetzliche
     Wrapper um Leiste oder Raster brechen die Kette.
   - Ein Overlay je Bild am Seitenende, geoeffnet ueber :target. Vor, zurueck
     und schliessen sind reine Anker. Schliessen zeigt auf #foto-zu, eine
     Kennung, die es absichtlich nicht gibt: kein Sprung, die Seite behaelt
     ihre Scrollposition.
   - Einblenden ueber @starting-style, das Ausblenden der Lightbox braucht
     transition-behavior:allow-discrete und liegt deshalb in @supports.
     Browser ohne Unterstuetzung oeffnen und schliessen hart, alles bleibt
     bedienbar.
   - Kacheln verschwinden beim Filtern bewusst ohne Uebergang: ein
     verzoegertes display liesse das Raster mehrfach springen.
   - Bekannte Grenze ohne JavaScript: kein Fokusfang im Overlay, kein
     Schliessen per Escape, und geblaettert wird immer durch alle Bilder,
     nicht durch die gefilterte Menge.
   ========================================================================== */

/* ---------- Filter ---------- */
.f-schalter{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}

.galerie-leiste{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.chip{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:10px 18px;
  border:1px solid rgba(255,255,255,.24);border-radius:3px;
  font:600 14.5px/1.2 var(--schrift-text);color:rgba(255,255,255,.78);
  cursor:pointer;transition:color .18s ease,border-color .18s ease;
}
.chip-z{font:600 12.5px/1 var(--schrift-text);color:rgba(255,255,255,.55)}
@media (hover:hover){
  .chip:hover{color:#fff;border-color:rgba(255,255,255,.55)}
}

/* aktiver Chip: nur die Kante wird orange, Orange bleibt Akzent */
#f-alle:checked ~ .galerie-leiste .chip[for="f-alle"],
#f-modern:checked ~ .galerie-leiste .chip[for="f-modern"],
#f-klassisch:checked ~ .galerie-leiste .chip[for="f-klassisch"],
#f-kamine:checked ~ .galerie-leiste .chip[for="f-kamine"],
#f-kaminoefen:checked ~ .galerie-leiste .chip[for="f-kaminoefen"],
#f-kacheloefen:checked ~ .galerie-leiste .chip[for="f-kacheloefen"]{
  color:#fff;border-color:var(--orange);
}
#f-alle:checked ~ .galerie-leiste .chip[for="f-alle"] .chip-z,
#f-modern:checked ~ .galerie-leiste .chip[for="f-modern"] .chip-z,
#f-klassisch:checked ~ .galerie-leiste .chip[for="f-klassisch"] .chip-z,
#f-kamine:checked ~ .galerie-leiste .chip[for="f-kamine"] .chip-z,
#f-kaminoefen:checked ~ .galerie-leiste .chip[for="f-kaminoefen"] .chip-z,
#f-kacheloefen:checked ~ .galerie-leiste .chip[for="f-kacheloefen"] .chip-z{
  color:var(--orange-h);
}

/* Tastatur: der Fokusring des unsichtbaren Radios erscheint am Chip */
#f-alle:focus-visible ~ .galerie-leiste .chip[for="f-alle"],
#f-modern:focus-visible ~ .galerie-leiste .chip[for="f-modern"],
#f-klassisch:focus-visible ~ .galerie-leiste .chip[for="f-klassisch"],
#f-kamine:focus-visible ~ .galerie-leiste .chip[for="f-kamine"],
#f-kaminoefen:focus-visible ~ .galerie-leiste .chip[for="f-kaminoefen"],
#f-kacheloefen:focus-visible ~ .galerie-leiste .chip[for="f-kacheloefen"]{
  outline:3px solid var(--orange);outline-offset:3px;
}

/* Sichtbarkeit: alles ausser der gewaehlten Gruppe verschwindet sofort */
#f-modern:checked ~ .galerie-raster .kachel:not(.r-modern):not(.kachel-feuer),
#f-klassisch:checked ~ .galerie-raster .kachel:not(.r-klassisch):not(.kachel-feuer),
#f-kamine:checked ~ .galerie-raster .kachel:not(.r-kamin):not(.kachel-feuer),
#f-kaminoefen:checked ~ .galerie-raster .kachel:not(.r-kaminofen):not(.kachel-feuer),
#f-kacheloefen:checked ~ .galerie-raster .kachel:not(.r-kachelofen):not(.kachel-feuer){display:none}

/* ---------- Raster ---------- */
.galerie-raster{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  margin:0;padding:0;list-style:none;
  /* dense stopft die Luecken, die zweispaltige Querformate reissen */
  grid-auto-flow:dense;
}
.kachel{margin:0;transition:opacity .22s ease,transform .22s ease}
/* neu eingeblendete Kacheln steigen kurz auf; wirkt auch beim ersten Aufbau */
@starting-style{
  .kachel{opacity:0;transform:translateY(10px)}
}

.kachel{position:relative}
.kachel .kachel-bild{position:relative;display:block;height:100%;border-radius:3px;cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease}
/* Bildnummer unten rechts auf jeder Kachel, zugleich Anfrage-Link:
   der Betreff der Mail traegt die Nummer, so kann der Kunde am Telefon
   oder per Mail eindeutig Bezug nehmen. Das Feuer-Schlussbild hat keine. */
.ref-marke{position:absolute;right:10px;bottom:10px;z-index:1;
  background:rgba(38,37,31,.78);color:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.22);
  font:600 11px/1 var(--schrift-text);letter-spacing:.09em;
  padding:6px 9px 5px;border-radius:2px;text-decoration:none;
  transition:background .18s ease,border-color .18s ease}
.ref-marke:hover{background:var(--orange-t);border-color:var(--orange-h);color:#fff}
.ref-marke:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
/* Anfrage-Link in der Grossansicht */
.lb-ref{color:var(--orange-h);text-decoration:underline;text-underline-offset:2px}
.kachel img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;border-radius:3px;background:#31302A}
/* feine Kante als eigene Lage: eine innenliegende box-shadow laege unter dem Bild */
.kachel .kachel-bild::after{content:"";position:absolute;inset:0;border-radius:3px;border:1px solid rgba(255,255,255,.08);transition:border-color .2s ease}
@media (hover:hover){
  .kachel .kachel-bild:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
  .kachel .kachel-bild:hover::after{border-color:var(--orange)}
}

/* Querformate (alt-14 bis alt-16): zwei Spalten, kein Beschnitt auf Hochformat.
   14/9 liegt knapp ueber dem Verhaeltnis von zwei Spalten plus Fuge zur
   Hochformat-Zeilenhoehe. So bestimmen weiter die Hochformate die Zeile,
   das Querformat streckt sich auf Zeilenhoehe und object-fit:cover nimmt
   wenige Prozent oben und unten, nie seitlich. */
.kachel-quer{grid-column:span 2}
.kachel-quer img{aspect-ratio:14/9}

/* ---------- Lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:300;
  display:none;align-items:center;justify-content:center;
  padding:84px 104px 44px;
  background:rgba(17,16,13,.97);
  opacity:0;
}
.lb:target{display:flex;opacity:1}
/* Der weiche Wechsel braucht allow-discrete. Nicht aus dem @supports ziehen:
   Browser ohne Unterstuetzung wuerden die Kurzform sonst zwar verwerfen,
   aber nur solange sie in einem Stueck bleibt. */
@supports (transition-behavior:allow-discrete){
  .lb{transition:opacity .2s ease,display .2s ease allow-discrete}
  @starting-style{
    .lb:target{opacity:0}
  }
}

/* solange ein Overlay offen ist, steht die Seite dahinter still
   (Zusatznutzen, Browser ohne :has ignorieren die Regel) */
html:has(.lb:target){overflow:hidden}

/* Klick auf den Grund schliesst */
.lb-hinter{position:absolute;inset:0}

.lb-inhalt{position:relative;margin:0;min-width:0;max-width:100%;text-align:center;transition:transform .22s ease}
@starting-style{
  .lb:target .lb-inhalt{transform:scale(.985)}
}
.lb-inhalt img{
  display:block;margin:0 auto;width:auto;height:auto;
  max-width:min(1080px,100%);
  max-height:calc(100vh - 210px);max-height:calc(100dvh - 210px);
  border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.lb figcaption{margin-top:16px;font:400 13.5px/1.5 var(--schrift-text);color:rgba(255,255,255,.55)}
.lb figcaption b{display:block;margin-bottom:2px;font:600 15.5px/1.4 var(--schrift-kopf);letter-spacing:-.01em;color:rgba(255,255,255,.92)}
/* Ofenart-Marke im Kicker-Duktus, mit Orangelinie davor */
.lb-marke{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:7px;
  font:600 11px/1.4 var(--schrift-text);letter-spacing:.19em;text-transform:uppercase;
  color:var(--orange-h);
}
.lb-marke::before{content:"";width:20px;height:2px;background:var(--orange);flex:none}

/* Alte Motive nicht ueber ihre Originalbreite aufblasen:
   lb-b400 = alt-01 bis alt-13, lb-b468 = alt-17/18, lb-b602 = alt-14 bis alt-16 */
.lb-b400 .lb-inhalt img{max-width:min(400px,100%)}
.lb-b468 .lb-inhalt img{max-width:min(468px,100%)}
.lb-b602 .lb-inhalt img{max-width:min(602px,100%)}

/* Steuerung: Anker als runde Tasten, alle mindestens 44 px */
.lb-zu,.lb-vor,.lb-zurueck{
  position:absolute;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  transition:background .18s ease,border-color .18s ease;
}
@media (hover:hover){
  .lb-zu:hover,.lb-vor:hover,.lb-zurueck:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.45)}
}
.lb-zu{top:24px;right:24px}
.lb-zurueck{left:24px;top:50%;transform:translateY(-50%)}
.lb-vor{right:24px;top:50%;transform:translateY(-50%)}
.lb-zurueck .ic{transform:rotate(180deg)}

/* ==========================================================================
   Umbruchpunkte der Galerie
   ========================================================================== */

@media (max-width:1120px){
  .galerie-raster{gap:18px}
  .galerie-leiste{margin-bottom:30px}
  .lb{padding:76px 92px 40px}
}

@media (max-width:900px){
  .galerie-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Querformat belegt hier die volle Zeile und bestimmt sie selbst */
  .lb{padding:72px 74px 32px}
  .lb-zu,.lb-vor,.lb-zurueck{width:48px;height:48px}
  .lb-zu{top:16px;right:16px}
  .lb-zurueck{left:14px}
  .lb-vor{right:14px}
}

@media (max-width:620px){
  .galerie-raster{gap:10px}
  .galerie-leiste{gap:8px;margin-bottom:26px}
  /* fuenf Chips in zwei Zeilen, jede Tippflaeche bleibt bei 44 px Hoehe */
  .chip{padding:9px 13px;gap:7px;font-size:13.5px}
  .chip-z{font-size:12px}
  /* Blaettern liegt unten mittig nebeneinander in Daumenreichweite,
     die Pfeile verdecken so kein Motiv */
  .lb{padding:64px 12px 92px}
  .lb-inhalt img{max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px)}
  .lb-zu,.lb-vor,.lb-zurueck{width:48px;height:48px}
  .lb-zu{top:12px;right:12px}
  .lb-zurueck,.lb-vor{top:auto;bottom:20px;transform:none}
  .lb-zurueck{left:calc(50% - 58px)}
  .lb-vor{right:auto;left:calc(50% + 10px)}
}

/* ---------- Bewegung reduziert ----------
   Der globale Block oben setzt transition:none !important auf alles,
   dieser Block haelt das Modul auch fuer sich allein ruhig. */
@media (prefers-reduced-motion:reduce){
  .kachel,.kachel .kachel-bild,.ref-marke,.chip,.lb,.lb-inhalt,.lb-zu,.lb-vor,.lb-zurueck{transition:none}
  .kachel .kachel-bild:hover{transform:none}
}

/* ---------- Druck: alle Bilder, ungefiltert, ohne Overlays ---------- */
@media print{
  #galerie{background:#fff;color:#000}
  #galerie h2,#galerie .kicker,#galerie .fuehrung{color:#000}
  .galerie-leiste{display:none}
  .galerie-raster{grid-template-columns:repeat(3,1fr);gap:12px}
  .galerie-raster .kachel{display:block !important}
  .kachel .kachel-bild::after{display:none}
  .lb{display:none !important}
}