/* ZIMMERMANN Heizung-Sanitär — Entwurf A "Das warme Haus"
   ---------------------------------------------------------------
   DREI FARBEN, mehr nicht:
     --nacht  #0d2140  Dunkelblau  — der Grund der ganzen Seite
     --gelb   #ffc233  Gelb        — die Wärme, der einzige Akzent
     --creme  #f0e9db  Gebrochenes Weiß — die Schrift

   Es gibt keine hellen Großflächen. Abschnitte werden durch feine
   Linien und Abstand getrennt, niemals durch eine zweite Nuance
   derselben Farbe. Alles Flächige entsteht aus Creme oder Gelb mit
   geringer Deckkraft auf dem Blau — dadurch bleibt es bei drei Farben.

   Kern der Seite ist das Haus im Querschnitt: beim Scrollen wandert
   die Wärme von der Wärmepumpe durch Keller, Steigleitung und
   Heizkörper bis ins Bad. Man sieht sofort, worum es geht.
*/

:root {
  color-scheme: dark;

  --nacht:   #0d2140;
  --gelb:    #ffc233;
  --creme:   #f0e9db;

  /* abgeleitete Stufen — immer noch dieselben drei Farben */
  --schrift-still: rgba(240,233,219,.72);   /* 7,5:1 */
  --schrift-leise: rgba(240,233,219,.62);   /* 5,9:1 */
  --linie:         rgba(240,233,219,.16);
  --linie-stark:   rgba(240,233,219,.34);
  --feld:          rgba(240,233,219,.045);
  --gelb-hauch:    rgba(255,194,51,.14);
  --kopf-grund:    rgba(13,33,64,.9);       /* Kopfzeile, leicht durchscheinend */
  --auf-gelb:      #0d2140;                 /* Schrift auf gelber Fläche, immer dunkel */

  /* Wortmarke nach dem Schild am Betrieb. Eigene zwei Farben - ein
     Markenzeichen behält seine Farben, unabhängig vom Untergrund.
     Das Blau ist das helle, satte Blau vom Schild. Der Kontrast im
     Zeichen ist niedrig - genau wie in Wirklichkeit. Zulässig, weil
     WCAG 1.4.3 Logos ausdrücklich von der Kontrastpflicht ausnimmt;
     jeder Seitentext erfüllt die Werte weiterhin.
     Seit das echte Logo als SVG eingebunden ist, stehen seine Farben in
     assets/logo.svg, nicht mehr hier. Diese beiden Werte gelten nur noch
     für das Browser-Symbol (favicon.svg) und dienen als Nachschlagestelle. */
  --schild-blau:   #1188e2;
  --schild-gelb:   #efd27a;
  --marke:         var(--gelb);             /* Farbe der Markierungsbalken */
  --link:          var(--gelb);             /* Textlinks auf Rechtstexten */
  --em:            var(--gelb);             /* das hervorgehobene Wort in der Bühne */

  --wrap: 1200px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--nacht); }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--creme);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .4em; font-weight: 800; line-height: 1.04; letter-spacing: -.036em; }
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.9rem); }
h3 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 750; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
address { font-style: normal; }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gelb); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.skip { position: absolute; left: -9999px; top: .5rem; background: var(--gelb); color: var(--auf-gelb); padding: .8rem 1.25rem; z-index: 100; font-weight: 750; }
.skip:focus { left: .5rem; }

/* ---------- Wortmarke ----------
   Das echte Logo des Betriebs als SVG (assets/logo.svg), Vektoren aus der
   Datei des Grafikers. Die blaue Platte gehört zum Logo und wird hier NICHT
   erzeugt — .brand ist nur die Hülle. Farben stehen in der SVG-Datei selbst.
   Der frühere Nachbau aus Systemschrift (scaleX(.70)) ist damit abgelöst. */
.brand { display: inline-block; line-height: 0; text-decoration: none; }
.brand__bild { display: block; height: 4.5rem; width: auto; }
@media (max-width: 420px) { .brand__bild { height: 3.4rem; } }

/* ---------- Kopf ---------- */
.header { position: sticky; top: 0; z-index: 60; background: var(--kopf-grund); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); }
.header__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; min-height: 76px; padding-block: .5rem; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.nav a:not(.btn) { text-decoration: none; color: var(--schrift-still); font-weight: 600; font-size: .95rem; padding: .55rem .75rem; position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem; height: 2px; background: var(--gelb); transform: scaleX(0); transform-origin: center; transition: transform .3s var(--ease); }
.nav a:not(.btn):hover { color: var(--creme); }
.nav a:not(.btn):hover::after { transform: scaleX(1); }
.nav__toggle { margin-left: auto; display: none; background: none; border: 2px solid var(--creme); color: var(--creme); padding: .5rem; cursor: pointer; }

/* ---------- Schaltflächen ---------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: .9rem 1.5rem; font-weight: 750; font-size: 1rem; letter-spacing: -.01em; text-decoration: none; border: 2px solid transparent; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--gelb { background: var(--gelb); color: var(--auf-gelb); border-color: var(--gelb); }
.btn--gelb:hover { background: var(--creme); border-color: var(--creme); color: var(--nacht); }
.btn--klar { background: transparent; color: var(--creme); border-color: var(--linie-stark); }
.btn--klar:hover { background: var(--creme); color: var(--nacht); border-color: var(--creme); }
.btn svg { flex: none; }
.nav .btn { padding: .65rem 1.15rem; font-size: .93rem; }

/* ---------- Bühne ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -35% -15% auto auto; width: 58rem; height: 58rem; border-radius: 50%; background: radial-gradient(circle, var(--gelb-hauch), transparent 62%); pointer-events: none; }
/* Zweispaltige Bühne: die Aussage links, das Gebäude rechts. Das Foto steht
   damit ganz oben - Kunden aus der Gegend erkennen den Betrieb sofort. */
.hero__inner {
  position: relative; padding-block: clamp(3.5rem, 7vw, 6rem);
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__bild { margin: 0; }
.hero__bild figcaption { margin-top: .8rem; font-size: .85rem; color: var(--schrift-leise); }
.js .hero__bild { animation: auftakt .8s var(--ease) both; animation-delay: .34s; }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 2.25rem; }
}
.hero__kicker { display: inline-flex; align-items: center; gap: .75rem; font-size: .78rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; color: var(--schrift-leise); margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
.hero__kicker::before { content: ""; width: 2.5rem; height: 4px; background: var(--marke); }
.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--em); }
.hero__lead { font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.5; color: var(--schrift-still); max-width: 34ch; margin: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1.75rem, 3vw, 2.5rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Zusagen ---------- */
.promises { border-block: 1px solid var(--linie); }
.promises__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.promises__grid > div { padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.25rem, 2.5vw, 2.5rem); border-left: 1px solid var(--linie); display: flex; gap: .8rem; align-items: flex-start; }
.promises__grid > div:first-child { border-left: 0; padding-left: 0; }
.promises svg { flex: none; color: var(--gelb); margin-top: .15rem; }
.promises p { font-size: .97rem; font-weight: 600; color: var(--schrift-still); }

/* =========================================================
   DAS HAUS — der Kern der Seite
   ========================================================= */

.haus { border-bottom: 1px solid var(--linie); }
.haus__spur { position: relative; }
.js .haus__spur { height: 420vh; }
.js .haus__fix { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.haus__raster { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; width: 100%; }

.haus__kopf { margin-bottom: 1.5rem; }
.haus__kopf h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

.haus__stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.haus__stufe { padding: .7rem 0 .7rem 1.35rem; border-left: 3px solid var(--linie); transition: border-color .35s var(--ease), opacity .35s var(--ease); }
.haus__stufe h3 { font-size: 1.02rem; margin-bottom: .15rem; }
.haus__stufe p { font-size: .93rem; color: var(--schrift-leise); margin: 0; }
.js .haus__stufe { opacity: .38; }
.js .haus__stufe[data-an] { opacity: 1; border-left-color: var(--gelb); }

/* Das Bild */
.haus__bild { position: relative; }
.haus__bild svg { display: block; width: 100%; height: auto; max-height: 74vh; }

/* Grundgerüst des Hauses */
.bau { fill: none; stroke: var(--creme); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; opacity: .5; }
.bau--fein { stroke-width: 1.6; opacity: .3; }
.erde { fill: var(--creme); opacity: .07; }
.raum { fill: var(--gelb); opacity: 0; transition: opacity .6s var(--ease); }
.geraet { fill: none; stroke: var(--creme); stroke-width: 2.2; stroke-linejoin: round; opacity: .55; transition: stroke .45s var(--ease), opacity .45s var(--ease); }
.geraet--an { stroke: var(--gelb); opacity: 1; }
.fuellung { fill: var(--nacht); }

/* Der Weg der Wärme: füllt sich mit dem Scrollen */
.leitung { fill: none; stroke: var(--gelb); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.leitung--grund { stroke: var(--creme); opacity: .18; }
/* Grundzustand: Leitung voll sichtbar. Den Versatz setzt das Skript,
   damit die Seite ohne JavaScript das fertige, warme Haus zeigt. */
.leitung--warm { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* Lüfterrad der Wärmepumpe */
.js .fluegel { transform-box: fill-box; transform-origin: center; }
.js [data-stufe] .fluegel { animation: dreh 3.2s linear infinite; animation-play-state: paused; }
.js [data-stufe="0"] .fluegel { animation-play-state: running; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* Wärme steigt auf */
.js .schwade { opacity: 0; transition: opacity .5s var(--ease); }
.js [data-stufe="3"] .schwade, .js [data-stufe="4"] .schwade { opacity: .55; animation: steigen 3s ease-in-out infinite; }
.js .schwade:nth-of-type(2) { animation-delay: .6s; }
.js .schwade:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes steigen { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .55; } 100% { transform: translateY(-14px); opacity: 0; } }

/* Räume werden warm, sobald die Wärme ankommt */
.js [data-stufe="3"] .raum, .js [data-stufe="4"] .raum { opacity: .1; }
.js [data-stufe="4"] .raum--bad { opacity: .17; }

/* Sonne und Strahlen auf die Kollektoren */
.zacken line { stroke-width: 2.6; }
.strahl { stroke-width: 3; stroke-dasharray: 9 13; stroke-linecap: round; }
.js .strahl { stroke-dashoffset: 0; }
.js [data-stufe="4"] .strahl { animation: strahlen 1.4s linear infinite; }
.js .strahl:nth-of-type(2) { animation-delay: .25s; }
.js .strahl:nth-of-type(3) { animation-delay: .5s; }
@keyframes strahlen { to { stroke-dashoffset: -44; } }

.haus__hinweis { margin-top: 1.25rem; font-size: .82rem; color: var(--schrift-leise); }

/* ---------- Abschnitte ---------- */
.section { padding-block: clamp(4.5rem, 9vw, 7.5rem); border-top: 1px solid var(--linie); }
.section:first-of-type { border-top: 0; }
.mark { display: block; width: 4rem; height: 9px; background: var(--marke); margin-bottom: 1.25rem; transform-origin: left center; }
.eyebrow { font-size: .78rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; color: var(--schrift-leise); margin: 0 0 .8rem; }
.section__head { max-width: 26rem; }
.section__head h2 { text-wrap: balance; hyphens: auto; hyphenate-limit-chars: 12 5 4; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--schrift-still); max-width: 46ch; }
.split { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }

/* ---------- Leistungen ---------- */
.services { border-top: 2px solid var(--linie-stark); }
.service { display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 14rem); gap: clamp(1.25rem, 3.5vw, 3rem); align-items: start; padding: clamp(2rem, 3.8vw, 2.9rem) 0; border-bottom: 1px solid var(--linie); transition: background-color .3s var(--ease), padding-left .3s var(--ease); }
.service:hover { background: var(--feld); padding-left: 1rem; }
.service__icon { color: var(--gelb); transition: transform .3s var(--ease); }
.service:hover .service__icon { transform: translateY(-3px) scale(1.06); }
.service h3 { margin-bottom: .35rem; }
.service p { color: var(--schrift-still); font-size: 1rem; max-width: 46ch; }
.service ul { list-style: none; margin: 0; padding: 0; font-size: .92rem; color: var(--schrift-leise); }
.service li { padding-left: .95rem; position: relative; }
.service li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 2px; background: var(--gelb); }

/* ---------- Wärmepumpe: kein Farbblock, nur Gelb als Akzent ---------- */
.zahl { font-size: clamp(4rem, 13vw, 9rem); font-weight: 850; letter-spacing: -.055em; line-height: .9; color: var(--gelb); display: block; }
.zahl small { display: block; font-size: clamp(.9rem, 1.4vw, 1.05rem); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--schrift-still); margin-top: .6rem; }
.vermerk { font-size: .86rem; color: var(--schrift-leise); margin-top: 1.5rem; }

/* ---------- Ablauf ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); counter-reset: s; }
.step { border-top: 2px solid var(--linie-stark); padding-top: 1rem; }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); display: block; font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 850; letter-spacing: -.05em; line-height: 1; color: var(--gelb); margin-bottom: .5rem; }
.step p { color: var(--schrift-still); font-size: .97rem; }

/* ---------- Über uns ---------- */
.quote { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.35; letter-spacing: -.025em; font-weight: 650; margin: 2rem 0 0; padding-top: 2rem; border-top: 2px solid var(--gelb); max-width: 26ch; }
/* Fotos: fester Bildausschnitt, damit ein anderes Foto später nicht das
   Layout verschiebt. Kein Rahmen, keine runden Ecken - wie der Rest. */
.bild { max-width: 40rem; }
.betriebsfoto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--feld); }
.bild figcaption { margin-top: .8rem; font-size: .85rem; color: var(--schrift-leise); }

/* Platzhalter bleibt für Stellen, an denen noch ein Foto fehlt */
.photo-slot { aspect-ratio: 4 / 3; max-width: 34rem; border: 2px dashed var(--linie-stark); display: grid; place-content: center; text-align: center; gap: .4rem; padding: 1.5rem; }
.photo-slot b { font-size: .95rem; }
.photo-slot small { color: var(--schrift-leise); font-size: .82rem; max-width: 22em; }

/* ---------- Kontakt ---------- */
.phone { display: inline-block; text-decoration: none; font-size: clamp(2.5rem, 8.5vw, 5.2rem); font-weight: 850; letter-spacing: -.05em; line-height: 1; padding-bottom: .12em; position: relative; }
.phone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--gelb); transform-origin: left center; transition: transform .35s var(--ease); }
.phone:hover { color: var(--gelb); }
.phone:hover::after { transform: scaleY(1.5); }
.phone__label { display: block; font-size: .78rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; color: var(--schrift-leise); margin: 0 0 .9rem; }
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2.5rem; margin-top: clamp(2.75rem, 5vw, 3.75rem); padding-top: 2.5rem; border-top: 1px solid var(--linie); }
.details h3 { font-size: .78rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; color: var(--schrift-leise); margin-bottom: .6rem; }
.details p, .details address { font-size: 1rem; color: var(--schrift-still); }
.details a { font-weight: 650; }
.details a:hover { color: var(--gelb); }
.hours { margin: 0; font-size: 1rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.hours dt { color: var(--schrift-leise); }
.hours dd { margin: 0; font-weight: 650; color: var(--schrift-still); }

/* ---------- Fuß ---------- */
.footer { border-top: 1px solid var(--linie); color: var(--schrift-leise); padding-block: clamp(3rem, 6vw, 4rem) 2rem; font-size: .95rem; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--creme); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.footer h3 { color: var(--creme); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__bar { border-top: 1px solid var(--linie); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .8rem 1.75rem; align-items: center; font-size: .88rem; }
.footer__bar nav { display: flex; gap: 1.5rem; margin-left: auto; }

/* ---------- Rechtstexte ---------- */
.legal { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.legal__body { max-width: 44rem; }
.legal h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); margin-bottom: .6em; }
.legal__body h2 { font-size: 1.28rem; letter-spacing: -.02em; margin-top: 2.4rem; }
.legal__body h2:first-of-type { margin-top: 1.4rem; }
.legal__body h3 { font-size: 1.02rem; margin-top: 1.7rem; }
.legal__body p, .legal__body li, .legal__body address { color: var(--schrift-still); }
.legal a { color: var(--link); }
.back { display: inline-flex; align-items: center; gap: .5rem; font-weight: 750; text-decoration: none; font-size: .95rem; margin-bottom: 1.4rem; }
.back:hover { color: var(--gelb); }
/* Hinweise für die Redaktion — bleiben in den drei Farben */
.todo { background: var(--gelb-hauch); border: 1px solid var(--gelb); border-left-width: 5px; padding: 1rem 1.25rem; margin: 1.4rem 0; font-size: .95rem; color: var(--creme); }
.todo strong { color: var(--gelb); }
mark.ph { background: var(--gelb); color: var(--auf-gelb); padding: .05em .3em; font-weight: 700; }

/* =========================================================
   Unterseiten zu den Leistungen
   ========================================================= */

.topic { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); }
.topic h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); max-width: 16ch; }
.topic .lead { margin-top: 1.5rem; font-size: clamp(1.08rem, 1.8vw, 1.3rem); }

.zurueck { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; font-size: .92rem; color: var(--schrift-leise); margin-bottom: 1.5rem; }
.zurueck:hover { color: var(--gelb); }

.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.punkte li { padding-left: 1.7rem; position: relative; color: var(--schrift-still); }
.punkte li::before { content: ""; position: absolute; left: 0; top: .62em; width: 11px; height: 3px; background: var(--gelb); }
.punkte b { color: var(--creme); font-weight: 700; }

.bloecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: clamp(2rem, 4vw, 3.25rem); }
.block { border-top: 2px solid var(--linie-stark); padding-top: 1rem; }
.block h3 { margin-bottom: .4rem; }
.block p { color: var(--schrift-still); font-size: .97rem; }

/* Externe Herstellerinformationen */
.extern { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.extern li { border-bottom: 1px solid var(--linie); }
.extern li:first-child { border-top: 1px solid var(--linie); }
.extern a { display: flex; align-items: baseline; gap: .9rem; padding: 1rem .25rem; text-decoration: none; transition: padding-left .25s var(--ease), background-color .25s var(--ease); }
.extern a:hover { background: var(--feld); padding-left: .9rem; }
.extern .pfeil { color: var(--gelb); font-weight: 800; flex: none; }
.extern .titel { font-weight: 700; }
.extern .quelle { margin-left: auto; font-size: .82rem; color: var(--schrift-leise); white-space: nowrap; }
.extern-hinweis { font-size: .85rem; color: var(--schrift-leise); margin-top: 1rem; }

/* Verweise auf die anderen Leistungen */
/* Eigene Rahmen statt Durchscheinen des Containers - sonst faellt eine
   halbleere letzte Zeile als hellerer Block auf. */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.25rem; }
.kachel { border: 1px solid var(--linie); padding: 1.25rem; text-decoration: none; display: block; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
.kachel:hover { border-color: var(--linie-stark); }
.kachel:hover { background: var(--feld); }
.kachel b { display: block; font-size: 1.02rem; margin-bottom: .2rem; }
.kachel span { font-size: .88rem; color: var(--schrift-leise); }
.kachel[aria-current] { background: var(--feld); border-color: var(--gelb); }
.kachel[aria-current] b { color: var(--gelb); }

/* Abschlussaufruf */
.ruf { border-top: 1px solid var(--linie); }
.ruf__inner { padding-block: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; }
.ruf h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 18ch; margin: 0; }
.ruf__tat { display: flex; flex-wrap: wrap; gap: .8rem; margin-left: auto; }

/* Mehr-Verweis in den Leistungszeilen der Startseite */
.mehr { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; margin-right: 1.5rem; font-size: .92rem; font-weight: 700; text-decoration: none; color: var(--gelb); }
.mehr:hover { text-decoration: underline; }

/* Herstellerinfos - Bezeichnung "ONLINE-INFO" wie auf der alten Website,
   damit Stammkunden sie wiedererkennen. Bewusst als normaler Textfluss,
   damit in der schmalen Spalte nichts stapelt. */
.online-info { display: block; margin-top: .7rem; font-size: .92rem; text-decoration: none; color: var(--schrift-still); }
.online-info:hover { color: var(--creme); }
.online-info:hover .oi { color: var(--gelb); }
.oi { white-space: nowrap; font-size: .72rem; font-weight: 800; letter-spacing: .11em; color: var(--schrift-leise); transition: color .2s var(--ease); }

@media (max-width: 700px) {
  .extern a { flex-wrap: wrap; }
  .extern .quelle { margin-left: 0; width: 100%; }
  .ruf__tat { margin-left: 0; }
}

/* =========================================================
   Bewegung — ohne JavaScript ist alles sichtbar
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in:nth-child(2) { transition-delay: .07s; }
.js .reveal.is-in:nth-child(3) { transition-delay: .14s; }
.js .reveal.is-in:nth-child(4) { transition-delay: .21s; }
.js .reveal.is-in:nth-child(5) { transition-delay: .28s; }
.js .reveal.is-in:nth-child(6) { transition-delay: .35s; }
.js .mark { transform: scaleX(0); }
.js .is-in .mark, .js .mark.is-in { transform: scaleX(1); transition: transform .6s var(--ease) .1s; }
.js .hero__kicker, .js .hero h1, .js .hero__lead, .js .hero__cta { animation: auftakt .8s var(--ease) both; }
.js .hero h1 { animation-delay: .08s; }
.js .hero__lead { animation-delay: .18s; }
.js .hero__cta { animation-delay: .26s; }
@keyframes auftakt { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .hero::before { animation: atmen 14s ease-in-out infinite; }
@keyframes atmen { 0%,100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* Ruhemodus: keine Bewegung, Haus vollständig warm, kein Sticky */
.ruhe .haus__spur, .js.ruhe .haus__spur { height: auto !important; }
.ruhe .haus__fix, .js.ruhe .haus__fix { position: static !important; height: auto !important; padding-block: 3rem; }
.ruhe .haus__stufe { opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .mark { transform: scaleX(1) !important; }
  .js .haus__spur { height: auto !important; }
  .js .haus__fix { position: static !important; height: auto !important; padding-block: 3rem; }
  .js .haus__stufe { opacity: 1 !important; }
  .js .leitung--warm { stroke-dashoffset: 0 !important; }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1000px) {
  .haus__raster { grid-template-columns: 1fr; gap: 1.5rem; }
  .js .haus__fix { height: auto; position: static; padding-block: 3rem; }
  .js .haus__spur { height: auto; }
  .js .haus__stufe { opacity: 1; }
  .haus__bild svg { max-height: none; }
}
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .service { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .service ul { grid-column: 2; }
  .promises__grid { grid-template-columns: 1fr; }
  .promises__grid > div { border-left: 0; border-top: 1px solid var(--linie); padding-inline: 0; }
  .promises__grid > div:first-child { border-top: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--linie); padding-top: .5rem; }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) { padding: .85rem .1rem; border-bottom: 1px solid var(--linie); }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: .8rem; justify-content: center; }
  .nav__toggle { display: block; }
  .header { position: static; }
  .nav--simple { display: flex; flex-direction: row; flex-wrap: wrap; width: auto; border-top: 0; padding-top: 0; }
  .nav--simple a:not(.btn) { padding: .5rem .55rem; border-bottom: 0; }
  .nav--simple .btn { margin-top: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bar nav { margin-left: 0; }
}
@media print { .header, .footer, .hero__cta, .haus { display: none; } body { background: #fff; color: #000; } }