/* Muster Haustechnik, Schwarz-Weiß-Design. Schrift: Red Hat Display (selbst gehostet). */

/* Scroll-Fix (Pflicht, iPhone) */
html,body{height:auto !important;min-height:100%;overflow-y:auto !important;
  overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom}

@font-face{font-family:"Red Hat Display";src:url("/referenzen/haustechnik/schriften/RedHatDisplay-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url("/referenzen/haustechnik/schriften/RedHatDisplay-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --tinte:#1a1a1a;
  --waerme:#e8722a;      /* Waerme: Puls, Ortspunkte, Nachher-Licht */
  --waerme-tief:#a8501a; /* dieselbe Waerme, dunkel genug fuer Schrift */
  --wasser:#2f7fbf;      /* der Rhein */
  --papier:#ffffff;
  --grau:#f4f4f2;
  --linie:#e3e3e0;
  --nebentext:#55554f;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Red Hat Display",-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinte);background:var(--papier);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-weight:700;line-height:1.2}
h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:18px}
h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:14px}
h3{font-size:19px}
p{margin-bottom:14px;color:var(--tinte)}
.innen{max-width:1120px;margin:0 auto;padding:0 20px}
.schmal{max-width:780px}
.mittig{text-align:center}
.breit-text{max-width:760px;color:var(--nebentext)}
.mittig.breit-text,p.mittig{margin-left:auto;margin-right:auto}
.abschnitt{padding:72px 0}
.abschnitt-grau{background:var(--grau)}
.abschnitt-dunkel{background:var(--tinte);color:#fff}
.abschnitt-dunkel h2,.abschnitt-dunkel p{color:#fff}
.abschnitt-dunkel .breit-text{color:#d6d6d2;margin-left:auto;margin-right:auto}
.seitenkopf{padding-bottom:40px}
.ico{flex:none}

/* Kopfzeile */
.kopfzeile{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--linie);z-index:50}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:72px}
.marke img{width:170px;height:auto}
.hauptmenue{display:flex;align-items:center;gap:26px;font-weight:700;font-size:16px}
.hauptmenue a{text-decoration:none}
.hauptmenue a:not(.knopf):hover{text-decoration:underline;text-underline-offset:5px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px}
.burger span{display:block;width:24px;height:2px;background:var(--tinte);margin:5px 0}

/* Aufklapp-Menü "Leistungen" */
.menue-punkt{position:relative;display:flex;align-items:center;padding:24px 0;margin:-24px 0}
.menue-punkt>a{display:inline-flex;align-items:center;gap:7px}
.menue-pfeil{display:inline-flex;transition:transform .18s}
.menue-punkt:hover .menue-pfeil,.menue-punkt:focus-within .menue-pfeil{transform:rotate(180deg)}
.untermenue{position:absolute;top:100%;left:-10px;min-width:246px;background:#fff;
  border:1px solid var(--linie);border-radius:12px;padding:8px;
  box-shadow:0 16px 36px rgba(0,0,0,.11);display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.menue-punkt:hover .untermenue,.menue-punkt:focus-within .untermenue{
  opacity:1;visibility:visible;transform:translateY(0)}
.untermenue a{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:9px;
  font-size:15.5px;white-space:nowrap}
.hauptmenue .untermenue a:not(.knopf):hover{background:var(--grau);text-decoration:none}
.untermenue-alle{border-top:1px solid var(--linie);border-radius:0 0 9px 9px;margin-top:4px;
  padding-top:13px;color:var(--nebentext)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--tinte);color:#fff;text-decoration:none;font-weight:700;font-size:16px;
  padding:13px 24px;border-radius:10px;border:2px solid var(--tinte);cursor:pointer;
  transition:opacity .15s}
.knopf:hover{opacity:.85}
.knopf-klein{padding:9px 16px;font-size:15px;border-radius:9px}
.knopf-umriss{background:transparent;color:var(--tinte)}
.knopf-weiss{background:#fff;color:var(--tinte);border-color:#fff}
.knopf-umriss-weiss{background:transparent;color:#fff;border-color:#fff}
.knopfreihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.abschnitt-dunkel .knopfreihe{justify-content:center}

/* Held (Startseite) */
.held{padding:64px 0}
.held-raster{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:stretch}
.held-text{display:flex;flex-direction:column;justify-content:center}
.vorzeile{font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nebentext);margin-bottom:14px}
.held-bildrahmen{border-radius:16px;overflow:hidden;min-height:340px}
.held-bildrahmen img,.held-bildrahmen video{width:100%;height:100%;object-fit:cover}

/* Stärken-Karten */
.staerken{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.staerken-drei{grid-template-columns:repeat(3,1fr)}
.staerke{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:24px;
  display:flex;flex-direction:column}
.karte-kopf{display:flex;align-items:center;gap:14px;min-height:56px;margin-bottom:8px}
/* Feste Höhe für die Überschrift: sonst sitzt eine zweizeilige Überschrift
   in der Nachbarkarte 12 Pixel höher als eine einzeilige. */
.karte-kopf h3{margin:0;min-height:46px;display:flex;align-items:center}
.staerke p{margin:0;color:var(--nebentext);font-size:15.5px}

/* Einfache Kacheln (Kontaktseite) */
.kachelreihe{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:34px}
.kachel{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:26px;
  width:340px;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.kachel:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(26,26,26,.10)}
.kachel p{color:var(--nebentext);font-size:15.5px;margin-bottom:16px}
.weiter{font-weight:700;font-size:15px;margin-top:auto}

/* Leistungs-Kacheln mit Bild (Freigabe Torben, 04.09.2026): festes 3er-Raster,
   sechs Kacheln, geht in zwei Dreierreihen auf (nie 2+1-Loch). Medienkopf mit
   fester Höhe, damit die Texte der Nachbarkacheln auf einer Ebene beginnen. */
.kachelreihe-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:34px;align-items:stretch}
.kachel-bild{background:#fff;border:1px solid var(--linie);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.kachel-bild:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(26,26,26,.10)}
.kachel-medien{height:185px;overflow:hidden;flex:none}
.kachel-medien img,.kachel-medien video{width:100%;height:100%;object-fit:cover;
  display:block;transition:transform .45s ease}
.kachel-bild:hover .kachel-medien img,.kachel-bild:hover .kachel-medien video{
  transform:scale(1.045)}
/* Wärmepumpen-Film: die Pumpe sitzt rechts im Bild, deshalb den Ausschnitt
   nach rechts schieben. Das Standbild liegt zusätzlich als Hintergrund
   dahinter, damit die Kachel beim Laden nie weiß wirkt. */
.kachel-medien-wp{background:url(/referenzen/haustechnik/filme/waermepumpe-vorschau.jpg) 72% 58%/cover no-repeat}
.kachel-medien-wp video{object-position:72% 58%}
.kachel-text{padding:20px 24px 24px;display:flex;flex-direction:column;flex:1}
.kachel-text p{color:var(--nebentext);font-size:15.5px;margin-bottom:16px}
/* Sechste Kachel "Individuelle Anfrage": dunkel als Einladung */
.kachel-anfrage{background:var(--tinte);border-color:var(--tinte);color:#fff}
.kachel-anfrage .kachel-text p{color:#d6d6d2}
.kachel-medien-dunkel{display:flex;align-items:center;justify-content:center;gap:20px;
  color:#fff;background:
    radial-gradient(closest-side at 50% 120%, rgba(255,255,255,.14), rgba(255,255,255,0) 78%),
    var(--tinte)}
.kachel-medien-dunkel .ico{opacity:.55;transition:opacity .3s,transform .3s}
.kachel-anfrage:hover .kachel-medien-dunkel .ico{opacity:.9;transform:translateY(-2px)}
.kachel-medien-dunkel .ico:nth-child(3){opacity:.95;width:44px;height:44px}

/* Schritte */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;align-items:stretch}
.schritt{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:24px;
  display:flex;flex-direction:column}
/* Zahl und Überschrift stehen in EINER Zeile (Torbens Regel: Überschrift
   neben dem Icon, nie darunter). */
.schritt-zahl{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:var(--tinte);color:#fff;font-weight:700;font-size:19px;flex:none}
.schritt h3{margin:0}
.schritt p{margin:0;color:var(--nebentext);font-size:15.5px}

/* ---- Ablauf-Kästchen: der orange Rahmen läuft durch --------------------
   Beim Herunterscrollen zeichnet sich um jedes Kästchen ein oranger Rahmen,
   läuft über das Verbindungsstück zum nächsten und bleibt danach stehen.
   Am Ende sind alle Kästchen umrandet und beim letzten Schritt erscheint
   ein grünes Häkchen. Läuft einmal, nicht in Dauerschleife.
   Die Farbwelt steckt in Variablen, damit derselbe Baustein bei anderen
   Gewerken anders klingt: Wärme (Standard), Strom, Wasser.            */
.ablauf{
  --glut-a:#ffa02e;      /* heller Anfang der Glut */
  --glut-b:#ff3d00;      /* tiefes Rot */
  --rohr:rgba(26,26,26,.10);
  --fertig:#16a34a;      /* Grün für das Häkchen am Schluss */
  --zeichnen:1.4s;       /* wie lange ein Rahmen zum Umlaufen braucht */
  --versatz:1.2s;        /* Abstand von Kästchen zu Kästchen */
}
.ablauf-strom{--glut-a:#7cc4ff;--glut-b:#1f7ae0}
.ablauf-wasser{--glut-a:#6fcbe8;--glut-b:#1b7fa8}

.schritt{position:relative;overflow:visible}
.schritt-inhalt{position:relative;z-index:1;display:flex;flex-direction:column;height:100%}

/* Der Rahmen liegt genau auf der Kante des Kästchens */
.rahmen{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:2}
.rahmen rect{fill:none;stroke:var(--glutstrich);stroke-width:2;
  stroke-dasharray:100;stroke-dashoffset:100}
.rahmen-halo{stroke-width:7;opacity:.18}
.laeuft .rahmen rect{animation:rahmen-zeichnen var(--zeichnen) ease-in-out forwards;
  animation-delay:calc(var(--nr) * var(--versatz))}
@keyframes rahmen-zeichnen{to{stroke-dashoffset:0}}

/* Verbindungsstück in der Mitte zwischen zwei Kästchen */
.schritt::before,.schritt::after{content:"";position:absolute;top:50%;right:-20px;
  width:20px;height:3px;margin-top:-1.5px;border-radius:2px}
.schritt::before{background:var(--rohr)}
.schritt::after{background:linear-gradient(90deg,var(--glut-a),var(--glut-b));
  transform:scaleX(0);transform-origin:left center}
.laeuft .schritt::after{animation:strecke-fuellen .35s ease-out forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen))}
.schritt:last-child::before,.schritt:last-child::after{display:none}
@keyframes strecke-fuellen{to{transform:scaleX(1)}}

/* Grünes Häkchen: erscheint, wenn der letzte Schritt umrandet ist */
.schritt-zahl{position:relative}
.zahl-ziffer{position:relative}
.fertig-haken{position:absolute;inset:0;border-radius:50%;background:var(--fertig);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5)}
.fertig-haken svg{width:24px;height:24px}
.laeuft .fertig-haken{animation:haken-stempel .5s cubic-bezier(.2,1.3,.5,1) forwards;
  animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen) + .15s)}
@keyframes haken-stempel{
  0%{opacity:0;transform:scale(.5)}
  60%{opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}

/* Ohne JavaScript und bei "Bewegung reduzieren" steht das fertige Bild da */
html:not(.js) .rahmen rect,
html:not(.js) .schritt::after{stroke-dashoffset:0;transform:scaleX(1)}
html:not(.js) .fertig-haken{opacity:1;transform:scale(1)}

/* Enger Bildschirm: zwei Kästchen nebeneinander, da passt kein
   Verbindungsstück dazwischen. */
@media (max-width:1000px){
  .schritt::before,.schritt::after{display:none}
}
/* Handy: die Kästchen stehen untereinander, das Verbindungsstück steht
   senkrecht zwischen ihnen. */
@media (max-width:560px){
  .schritt::before,.schritt::after{display:block;top:auto;bottom:-20px;
    left:50%;right:auto;width:3px;height:20px;margin-top:0;margin-left:-1.5px}
  .schritt::after{background:linear-gradient(180deg,var(--glut-a),var(--glut-b));
    transform:scaleY(0);transform-origin:top center}
  .laeuft .schritt::after{animation-name:strecke-fuellen-hoch}
  html:not(.js) .schritt::after{transform:scaleY(1)}
}
@keyframes strecke-fuellen-hoch{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .laeuft .rahmen rect,.laeuft .schritt::after,.laeuft .fertig-haken{animation:none}
  .rahmen rect{stroke-dashoffset:0}
  .schritt::after{transform:scaleX(1)}
  .fertig-haken{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce) and (max-width:560px){
  .schritt::after{transform:scaleY(1)}
}

/* Zweispalter: beide Kästen gleich hoch */
.zweispalter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.zweispalter>div:not(.bildrahmen){display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.zweispalter .knopf{margin-top:8px}
.bildrahmen{border-radius:16px;overflow:hidden;min-height:300px}
.bildrahmen img,.bildrahmen video{width:100%;height:100%;object-fit:cover}
.bild-breit{min-height:0}
.bild-breit img,.bild-breit video{aspect-ratio:16/7;object-fit:cover}

/* Leistungsseite */
.brotkrumen{font-size:14px;color:var(--nebentext);margin-bottom:16px}
.brotkrumen a{color:var(--nebentext)}
.zweispalter-breit{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:stretch}
.hakenliste{list-style:none;margin-top:10px}
.hakenliste li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--linie);font-size:16.5px}
.hakenliste li:last-child{border-bottom:0}
.hakenliste .ico{margin-top:4px}
.infokasten{background:var(--grau);border:1px solid var(--linie);border-radius:14px;padding:28px;
  display:flex;flex-direction:column;gap:12px;justify-content:center}
.infokasten p{color:var(--nebentext);font-size:15.5px;margin:0 0 4px}
.infokasten .knopf{width:100%}

/* Fragen */
.frage{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:0;margin-top:14px}
.frage summary{cursor:pointer;font-weight:700;padding:18px 22px;list-style:none;position:relative;padding-right:46px}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:22px;font-weight:400}
.frage[open] summary::after{content:"–"}
.frage p{padding:0 22px 18px;color:var(--nebentext);margin:0}

/* Kontakt */
.kontakt-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.kontakt-karten .kachel{width:auto}
.formular-raster{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:stretch}
.formular-bildrahmen{border-radius:14px;overflow:hidden}
.formular-bildrahmen img{width:100%;height:100%;object-fit:cover}
.formular-kasten{background:#fff;border:1px solid var(--linie);border-radius:14px;padding:32px}
form label{display:block;font-weight:700;font-size:15px;margin-bottom:16px}
form input,form select,form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;
  border:1px solid #c9c9c4;border-radius:9px;font:inherit;font-weight:400;background:#fff;color:var(--tinte)}
form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--tinte);outline-offset:1px}
form .knopf{width:100%}
.formular-hinweis{font-size:13.5px;color:var(--nebentext);margin:10px 0 0}

/* Rechtstexte */
.rechtstext h2{margin-top:34px}
.rechtstext h3{margin-top:24px;margin-bottom:8px}
.rechtstext h4{margin-top:18px;margin-bottom:6px;font-size:16.5px}
.rechtstext p{color:var(--nebentext)}

/* Google-Bewertungen (Daten in inhalte/google-bewertungen.json).
   Endlos laufendes Band, haelt bei Mausberuehrung und beim Antippen an.
   Gescrollt wird nur im Band selbst (.bew-band), nie die ganze Seite. */
.bewertungen{overflow:hidden}
.bew-kopf{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.g-logo{display:block;width:auto}
.bew-schnitt{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;color:var(--nebentext)}
.bew-schnitt strong{color:var(--tinte);font-size:18px}
.sterne{display:inline-flex;align-items:center;gap:2px;line-height:0}
.sterne svg{fill:#fbbc04;flex:none}
.bew-band{margin-top:26px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bew-band::-webkit-scrollbar{display:none}
.bew-lauf{display:flex;gap:20px;width:max-content;padding:4px 20px;
  animation:bew-laufen 64s linear infinite}
.bew-band:hover .bew-lauf,.bew-band:active .bew-lauf{animation-play-state:paused}
@keyframes bew-laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bew-lauf{animation:none}}
.bew-karte{width:340px;flex:none;background:#fff;border:1px solid var(--linie);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;text-align:left;margin:0}
.bew-karte blockquote{margin:12px 0 16px;font-size:16px;line-height:1.6;color:var(--tinte)}
.bew-karte figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--linie);padding-top:12px}
.bew-karte figcaption strong{font-size:16px}
.bew-karte figcaption span{font-size:14px;color:var(--nebentext)}
.bew-knoepfe{justify-content:center;margin-top:26px}
.bew-herkunft{max-width:760px;margin:18px auto 0;font-size:13.5px;line-height:1.55;color:var(--nebentext)}

/* Quellenangabe auf einem Kartenbild (Pflicht bei OpenStreetMap) */
.karten-quelle{position:absolute;right:8px;bottom:6px;margin:0;font-size:11.5px;
  color:var(--nebentext);background:rgba(255,255,255,.8);padding:2px 7px;border-radius:6px}

/* Google-Karte, laedt direkt mit der Seite */
.kartenfeld{margin-top:26px;border-radius:16px;overflow:hidden;
  border:1px solid var(--linie);background:var(--grau);aspect-ratio:16/9}
.kartenfeld iframe{display:block;width:100%;height:100%;border:0}
.kartenknoepfe{justify-content:center}

/* Einsatzgebiet: Kopf, dann die Karte ueber die volle Breite, darunter die
   Ortsliste. Die Karte ist eine Landschaft im Querformat. Neben einer hohen
   Textspalte blieb rundherum viel Weissraum (Rueckmeldung Torben, 04.09.2026),
   ueber die volle Breite passt sie ohne Leerflaechen. */
.gebiet-bereich{display:flex;flex-direction:column;align-items:center}
.gebiet-kopf{max-width:760px;text-align:center;margin-bottom:24px}
.gebiet-kopf .karte-kopf{justify-content:center;margin-bottom:6px}
.gebiet-kopf h2{margin:0}
.gebiet-kopf p{margin-bottom:0}
.gebiet-fuss{display:flex;flex-direction:column;align-items:center;text-align:center}
.gebiet-karte{position:relative;width:100%;max-width:900px;aspect-ratio:720/612;
  border-radius:16px;overflow:hidden;border:1px solid var(--linie);
  background:var(--grau)}
.gebiet-karte img{display:block;width:100%;height:100%;object-fit:cover}

/* 3D-Gelaendekarte des Einsatzgebiets mit Schutzkuppel.
   Das Relief ist ein gerechnetes Bild (werkzeuge/baue-gelaende.py) und liegt
   zweimal uebereinander: grau als Ausgangsbild und farbig als Schlussbild.
   Alles darueber ist gezeichnet (werkzeuge/baue-kuppel.py): Kuppel, Rhein,
   Waermestrecken, Ortsnamen, Firmenschild und die Servicefahrzeuge. Beides
   benutzt dieselbe Kamera, deshalb sitzt jede Linie genau im Gelaende.
   Ablauf: die Kuppel baut sich auf, das Firmenschild setzt sich auf
   Musterdorf, die Orte erscheinen, der Rhein zeichnet sich blau, dann
   fliesst die Waerme von der Zentrale in jeden Ort, die Fahrzeuge fahren
   los und zum Schluss wird die ganze Karte farbig und warm.
   Losgetreten wird das erst, wenn der Abschnitt ins Bild kommt: das Skript
   am Seitenende setzt dann die Klasse "laeuft". Ohne JavaScript steht das
   fertige Bild einfach da. */
.kuppelkarte{display:block;width:100%;height:100%}
html.js .kuppelkarte:not(.laeuft) .kuppel{opacity:0}
html.js .kuppelkarte:not(.laeuft) .k-warmbild{opacity:0}
.k-meridian,.k-ring,.k-kante,.k-fuss,.k-welle,.k-fahrweg,.k-fluss,
.k-waermespur{fill:none;stroke:var(--tinte);stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.k-meridian,.k-ring{stroke-width:1;opacity:.55}
.k-meridian.k-hinten,.k-ring.k-hinten{opacity:.17}
.k-kante{stroke-width:1.3;opacity:.65}
.k-fuss{stroke-width:1.6;opacity:.75}
.k-welle{stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.k-gitter{filter:drop-shadow(0 0 2px rgba(255,255,255,.8))}
.k-randsaum{fill:none;stroke-width:3;vector-effect:non-scaling-stroke}
.k-schattengitter{fill:none;stroke:var(--tinte);stroke-width:2.2;opacity:.24}

/* Der Rhein, Grenze zu Frankreich */
.k-fluss{stroke:var(--wasser);stroke-width:2.4;stroke-linejoin:round}
.k-fluss-name{font-size:12.5px;font-weight:700;fill:var(--wasser);
  stroke:#fff;stroke-width:3;paint-order:stroke;stroke-linejoin:round;
  letter-spacing:.03em}

/* Waermestrecken von der Zentrale in die Orte */
.k-waermespur{stroke:var(--waerme);stroke-width:1.8;
  filter:drop-shadow(0 0 3px rgba(232,114,42,.5))}
.k-warmlicht{opacity:0}

/* Orte: Punkt mit weissem Hof, Name klar und gut lesbar */
.k-ort-punkt{fill:var(--tinte)}
.k-ort-warm{fill:var(--waerme);opacity:0}
.k-ort-ring{fill:#fff}
.k-ort-welle{fill:none;stroke:var(--tinte);stroke-width:1.4}
.k-ort-punkt,.k-ort-warm,.k-ort-ring,.k-ort-welle{transform-box:fill-box;
  transform-origin:50% 50%}
.k-ort-name{font-family:"Red Hat Display",-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:.01em;fill:var(--tinte);
  stroke:#fff;stroke-width:3.4;paint-order:stroke;stroke-linejoin:round}
.k-name-gross{font-size:16.5px;stroke-width:4}

/* Sinnbilder (werkzeuge/sinnbilder.py): flache Silhouetten mit weisser
   Kontur. Das Muenster traegt seine Sandsteinfarbe, Wasser ist blau. */
.k-sb-flaeche{fill:var(--tinte);stroke:#fff;stroke-width:1.2;
  paint-order:stroke;stroke-linejoin:round}
.k-sb-linie{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round}
.k-muenster-bau{fill:#9d4a35;stroke:#fff;stroke-width:1.2;
  paint-order:stroke;stroke-linejoin:round}
.k-sb-dampf{fill:none;stroke:var(--tinte);stroke-width:2;stroke-linecap:round}
.k-sb-wasser,.k-sb-welle{fill:none;stroke:var(--wasser);stroke-width:2;
  stroke-linecap:round}
/* Wolf: Originalfigur aus dem Schallstadter Wappen, fein gezeichnet.
   Der Pfad ist stark verkleinert, deshalb braucht seine weisse Kontur
   eine eigene, mitskalierte Strichstaerke. */
.k-wolf-echt{stroke-width:16}
.k-sb-fuehler{fill:none;stroke:var(--tinte);stroke-width:1.3;stroke-linecap:round}
.k-sb-punkt{fill:var(--tinte)}
.k-sb-haus{fill:#a3703f;stroke:#fff;stroke-width:1.2;paint-order:stroke}
.k-sb-spirale{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round}
.k-sb-schnabel{fill:#c2511f;stroke:#fff;stroke-width:.8;paint-order:stroke}
.k-sb-bein{fill:none;stroke:#c2511f;stroke-width:1.6;stroke-linecap:round}

/* Das Muenster ploppt erst mit Musterstadt auf, nicht schon am Anfang
   (Rueckmeldung Torben, 04.09.2026: stand vorher plump von Beginn an da) */
.kuppelkarte.laeuft .k-wahrzeichen{transform-box:fill-box;
  transform-origin:50% 100%;
  animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay:calc(2.75s + var(--i)*.05s)}
html.js .kuppelkarte:not(.laeuft) .k-wahrzeichen{opacity:0}

/* Besonderheiten der Orte: erscheinen beim Klick auf den Ortsknopf */
.k-extra{opacity:0;pointer-events:none;transition:opacity .35s ease}
.k-extra.zeigt{opacity:1}
.k-extra-schatten{fill:var(--tinte);opacity:.2}
.k-extra.zeigt .k-extra-bild{transform-box:fill-box;transform-origin:50% 100%;
  animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) both}
.k-extra.zeigt .k-extra-blase{animation:k-auf .35s ease .25s both}
.k-blase-kasten{fill:#fff;stroke:var(--linie)}
.k-blase-zipfel{fill:#fff}
.k-blase-text{font-size:12.5px;font-weight:700;fill:var(--tinte)}

/* Der Wolf von Wolfsmuster hat am Schluss seinen Auftritt */
.kuppelkarte.laeuft .k-wolf-auftritt{
  animation:k-wolfszene 5s ease 10s both}
.kuppelkarte.laeuft .k-wolf-auftritt .k-extra-bild{transform-box:fill-box;
  transform-origin:50% 100%;
  animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) 10.1s both}
.kuppelkarte.laeuft .k-wolf-heult{transform-box:fill-box;
  transform-origin:50% 100%;animation:k-trotten 3.6s linear 10.3s both}


/* Firmenschild, sitzt mit der Spitze genau auf dem Betrieb in Musterdorf */
.k-schild-tafel{fill:#fff;stroke:var(--tinte);stroke-width:1.2;stroke-linejoin:round}
.k-schild-punkt{fill:var(--tinte)}
.k-schild-schatten{fill:var(--tinte);opacity:.22}

/* Servicefahrzeuge: die Wege bleiben blass, die Wagen fahren darauf */
.k-fahrweg{stroke-width:1.2;opacity:.22;stroke-dasharray:4 6}
.k-wagen-korb{fill:var(--tinte);stroke:#fff;stroke-width:1.4;
  paint-order:stroke;stroke-linejoin:round}
.k-wagen-rad{fill:var(--tinte);stroke:#fff;stroke-width:1.2;paint-order:stroke}
.k-wagen-logo{font-family:"Red Hat Display",-apple-system,"Helvetica Neue",
  Arial,sans-serif;font-size:5px;font-weight:800;font-style:italic;
  letter-spacing:.02em;fill:#fff;stroke:none}
.k-wagen{filter:drop-shadow(0 1px 2px rgba(255,255,255,.95))}

.k-koerper,.k-randsaum,.k-glanz,.k-lauflicht,.k-schatten,.k-orte,.k-wege,
.k-schild,.k-fahrzeuge,.k-fluss,.k-fluss-name,.k-waermespur,.k-warmbild{opacity:0}
/* Ohne JavaScript wird nichts bewegt, dann steht das fertige Bild da */
html:not(.js) .k-koerper,html:not(.js) .k-randsaum,html:not(.js) .k-schatten,
html:not(.js) .k-orte,html:not(.js) .k-wege,html:not(.js) .k-schild,
html:not(.js) .k-warmbild,html:not(.js) .k-fluss-name{opacity:1}
html:not(.js) .k-glanz{opacity:.4}
html:not(.js) .k-fluss{opacity:.85}
html:not(.js) .k-waermespur{opacity:.35}
html:not(.js) .k-warmlicht{opacity:1}
html:not(.js) .k-ort-warm{opacity:1}
html:not(.js) .k-ort-name{fill:var(--waerme-tief)}
/* Ohne JavaScript starten die Wagen nicht, dann bleiben sie weg */
html:not(.js) .k-fahrzeuge{display:none}

@keyframes k-ziehen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes k-auf{from{opacity:0}to{opacity:1}}
@keyframes k-auf-glanz{from{opacity:0}to{opacity:.4}}
@keyframes k-auf-fluss{from{opacity:0}to{opacity:.85}}
@keyframes k-auf-spur{from{opacity:0}to{opacity:.35}}
@keyframes k-warmtext{from{fill:var(--tinte)}to{fill:var(--waerme-tief)}}
@keyframes k-welle{0%{transform:scale(.04);opacity:0}
  14%{opacity:.5}100%{transform:scale(1.02);opacity:0}}
@keyframes k-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes k-warmpop{0%{transform:scale(0);opacity:0}
  55%{transform:scale(1.7);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes k-ortwelle{0%{transform:scale(.35);opacity:0}
  14%{opacity:.6}100%{transform:scale(3.6);opacity:0}}
@keyframes k-wolfszene{0%{opacity:0}8%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes k-trotten{from{transform:translateX(6px)}to{transform:translateX(-10px)}}
@keyframes k-schild-auf{from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}}
@keyframes k-lauf{0%{transform:translateX(0);opacity:0}
  5%{opacity:1}30%{transform:translateX(1440px);opacity:1}
  36%{transform:translateX(1440px);opacity:0}
  100%{transform:translateX(1440px);opacity:0}}

/* Ablauf: 1. Impuls ueber das Gebiet  2. Kuppelfuss  3. Laengslinien
   4. Ringe  5. Glas, Schatten, Lichtsaum  6. Firmenschild  7. Orte
   8. Rhein  9. Waerme fliesst in die Orte  10. Fahrzeuge  11. Farbe */
.kuppelkarte.laeuft .k-welle{animation:k-welle 1.5s cubic-bezier(.2,.7,.3,1) both}
.kuppelkarte.laeuft .k-welle2{animation-delay:.4s}
.kuppelkarte.laeuft .k-welle3{animation-delay:.8s}
.kuppelkarte.laeuft .k-fuss{stroke-dasharray:1;
  animation:k-ziehen 1.15s cubic-bezier(.4,0,.2,1) .2s both}
.kuppelkarte.laeuft .k-meridian{stroke-dasharray:1;
  animation:k-ziehen 1s cubic-bezier(.3,0,.2,1) both;
  animation-delay:calc(.7s + var(--i)*.05s)}
.kuppelkarte.laeuft .k-ring{stroke-dasharray:1;
  animation:k-ziehen .85s cubic-bezier(.3,0,.2,1) both;
  animation-delay:calc(1.35s + var(--i)*.09s)}
.kuppelkarte.laeuft .k-koerper{animation:k-auf 1.3s ease 1.95s both}
.kuppelkarte.laeuft .k-schatten{animation:k-auf 1.2s ease 2.05s both}
.kuppelkarte.laeuft .k-randsaum{animation:k-auf 1.2s ease 2.15s both}
.kuppelkarte.laeuft .k-kante{stroke-dasharray:1;
  animation:k-ziehen 1.1s cubic-bezier(.4,0,.2,1) 1.9s both}
.kuppelkarte.laeuft .k-glanz{animation:k-auf-glanz 1.1s ease 2.35s both}
.kuppelkarte.laeuft .k-schild{transform-box:fill-box;transform-origin:50% 100%;
  animation:k-schild-auf .7s cubic-bezier(.2,1.3,.4,1) 2.2s both}
.kuppelkarte.laeuft .k-orte{opacity:1}
.kuppelkarte.laeuft .k-ort-punkt,.kuppelkarte.laeuft .k-ort-ring{
  animation:k-pop .45s cubic-bezier(.2,1.5,.4,1) both;
  animation-delay:calc(2.6s + var(--i)*.05s)}
.kuppelkarte.laeuft .k-ort-welle{animation:k-ortwelle 1s ease-out both;
  animation-delay:calc(2.6s + var(--i)*.05s)}
.kuppelkarte.laeuft .k-fluss{stroke-dasharray:1;
  animation:k-ziehen 1.7s ease-out both, k-auf-fluss .6s ease both;
  animation-delay:calc(3.1s + var(--i)*.12s)}
.kuppelkarte.laeuft .k-fluss-name{animation:k-auf .7s ease 4.2s both}
.kuppelkarte.laeuft .k-waermespur{stroke-dasharray:1;
  animation:k-ziehen var(--t) cubic-bezier(.35,0,.45,1) both,
            k-auf-spur .35s ease both;
  animation-delay:calc(3.8s + var(--i)*.06s)}
/* Der Ort wird warm, sobald die Waerme dort ankommt */
.kuppelkarte.laeuft .k-ort-warm{
  animation:k-warmpop .6s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay:calc(3.8s + var(--i)*.06s + var(--t))}
.kuppelkarte.laeuft .k-ort-name{
  animation:k-auf .45s ease both, k-warmtext .8s ease both;
  animation-delay:calc(2.6s + var(--i)*.05s),
                  calc(3.8s + var(--i)*.06s + var(--t))}
.kuppelkarte.laeuft .k-wege{animation:k-auf 1s ease 6.0s both}
.kuppelkarte.laeuft .k-fahrzeuge{animation:k-auf 1s ease 6.3s both}
/* Zum Schluss wird aus der grauen Karte eine warme, gruene Landschaft */
.kuppelkarte.laeuft .k-warmbild{animation:k-auf 2s ease 7.2s both}
.kuppelkarte.laeuft .k-warmlicht{animation:k-auf 2.2s ease 7.4s both}
.kuppelkarte.laeuft .k-lauflicht{animation:k-lauf 11s ease-in-out 9.6s infinite}

@media (prefers-reduced-motion:reduce){
  html.js .kuppelkarte:not(.laeuft) .kuppel{opacity:1}
  html.js .kuppelkarte:not(.laeuft) .k-warmbild{opacity:1}
  .kuppelkarte *{animation:none !important}
  .kuppelkarte .k-koerper,.kuppelkarte .k-randsaum,.kuppelkarte .k-schatten,
  .kuppelkarte .k-orte,.kuppelkarte .k-wege,.kuppelkarte .k-schild,
  .kuppelkarte .k-warmbild,.kuppelkarte .k-fluss-name,
  .kuppelkarte .k-ort-warm,.kuppelkarte .k-warmlicht{opacity:1}
  .kuppelkarte .k-glanz{opacity:.4}
  .kuppelkarte .k-fluss{opacity:.85}
  .kuppelkarte .k-waermespur{opacity:.35}
  .kuppelkarte .k-ort-name{fill:var(--waerme-tief)}
  .kuppelkarte .k-welle,.kuppelkarte .k-ort-welle{opacity:0}
  .kuppelkarte .k-fahrzeuge{display:none}
}

.ortsliste{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:9px;margin:22px 0 18px;padding:0;max-width:900px}
.ortsliste li{list-style:none}
.orts-knopf{background:#fff;border:1px solid var(--linie);border-radius:999px;
  padding:7px 14px;font-size:15px;color:var(--tinte);font-family:inherit;
  cursor:pointer;transition:border-color .15s,transform .15s}
.orts-knopf:hover{border-color:var(--tinte);transform:translateY(-1px)}
.gebiet-hinweis{color:var(--nebentext);font-size:15.5px;margin:0 0 18px}
.fuss-gebiet{margin-top:14px;font-size:14.5px;line-height:1.55}
.fuss-gebiet strong{color:#fff}
.fusszeile a.fuss-gebiet-link{display:inline;padding:0;text-decoration:underline}

/* Fußzeile */
.fusszeile{background:var(--tinte);color:#fff;padding:56px 0 0;margin-top:0}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px}
.fusszeile h3{margin-bottom:12px;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.fusszeile p{color:#d6d6d2;font-size:15.5px}
.fusszeile a{display:block;color:#d6d6d2;text-decoration:none;font-size:15.5px;padding:3px 0}
.fusszeile a:hover{color:#fff;text-decoration:underline}
.fuss-logo{width:180px;height:auto;margin-bottom:14px}
.fuss-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.18);padding-top:18px;padding-bottom:18px;
  font-size:14.5px;color:#b9b9b4}
.fuss-rechts{display:flex;gap:20px}
.fuss-rechts a{display:inline;padding:0}

/* Handy */
@media (max-width:900px){
  .abschnitt{padding:52px 0}
  .held{padding:36px 0}
  .held-raster,.zweispalter,.zweispalter-breit,.formular-raster{grid-template-columns:1fr;gap:28px}
  /* Ein Bild klebt nie auf der Ueberschrift (Torben, 05.09.2026): steht das
     Bild gestapelt ueber dem Text, kommt zusaetzliche Luft dazwischen. */
  .zweispalter>.bildrahmen,.zweispalter-breit>.bildrahmen,
  .held-raster>.held-bildrahmen,.formular-raster>.formular-bildrahmen{margin-bottom:14px}
  .staerken,.schritte{grid-template-columns:1fr 1fr}
  .kachelreihe-bilder{grid-template-columns:1fr 1fr}
  .staerken-drei{grid-template-columns:1fr}
  .kontakt-karten{grid-template-columns:1fr}
  /* Am Handy ist die Karte klein: nur die wichtigsten Orte beschriften,
     dafuer groesser, sonst kann man die Namen nicht lesen. */
  .k-ort-name{font-size:19px;stroke-width:4.5}
  .k-name-gross{font-size:23px;stroke-width:5}
  .k-fluss-name{font-size:18px;stroke-width:4}
  .k-name-klein{display:none}
  .held-bildrahmen{min-height:240px;order:-1}
  .formular-bildrahmen{max-height:340px}
  .bew-karte{width:270px;padding:18px}
  .bew-knoepfe{flex-direction:column;align-items:stretch}
  .bew-knoepfe .knopf{width:100%}
  .kartenfeld{aspect-ratio:1/1}
  .burger{display:block}
  .hauptmenue{display:none;position:absolute;left:0;right:0;top:72px;background:#fff;
    border-bottom:1px solid var(--linie);flex-direction:column;align-items:stretch;
    padding:14px 20px;gap:4px}
  .hauptmenue.offen{display:flex}
  .hauptmenue a{padding:12px 4px}
  .menue-punkt{display:block;padding:0;margin:0}
  .menue-pfeil{display:none}
  .untermenue{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    border:0;border-left:2px solid var(--linie);border-radius:0;box-shadow:none;
    margin:0 0 4px 5px;padding:0 0 0 12px;gap:0}
  .untermenue a{padding:10px 4px;white-space:normal}
  .untermenue-alle{display:none}
  .hauptmenue .knopf-klein{justify-content:center;margin-top:8px}
}
/* Fusszeile: unter 760 Punkten eine Spalte (Regel aus dem Baukasten, hier
   verloren gegangen; am iPhone war die Kontakt-Spalte abgeschnitten,
   gemeldet von Torben am 06.09.2026). */
@media (max-width:760px){
  .fuss-raster{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .staerken,.staerken-drei,.schritte{grid-template-columns:1fr}
  .kachel{width:100%}
  .kachelreihe-bilder{grid-template-columns:1fr}
  .bild-breit img,.bild-breit video{aspect-ratio:16/10}
}

/* ================================================================
   Kauf-Leiste über der Demo (Standard aus dem Baukasten, 06.09.2026)
   Sichtbar, solange LIVE = False in werkzeuge/baue-seiten.py steht.
   Farbe ist bewusst das honeyflow-Blau und nicht die Kundenfarbe:
   die Leiste gehört zu uns, nicht zur Seite des Kunden.
   ================================================================ */
.kauf-leiste{background:#2540a8;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center}
.kauf-leiste .kauf-knopf{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#2540a8;
  font-weight:700;font-size:15px;text-decoration:none;padding:9px 20px;border-radius:999px;white-space:normal;line-height:1.35;max-width:100%}
.kauf-leiste .kauf-knopf:hover{background:#eef1fb}
.kauf-leiste .kauf-knopf svg{flex:none}
/* Auf sehr schmalen Geraeten (320 Punkte) schob der lange Knopftext die
   ganze Seite seitlich heraus: gemessen 349 statt 320 Punkte. Gefunden am
   04.09.2026 vom Asymmetrie-Waechter, Fehlerart B (Spitzer). */
@media (max-width:420px){
  .kauf-leiste{padding:9px 10px}
  .kauf-leiste .kauf-knopf{font-size:14px;padding:8px 14px}
}