/* Sanitär & Heizung — „Wasser & Wärme"
   Eisblau, Tiefwasser, Türkis. Der Thermostat im Held schiebt --t von 0 (kalt) bis 1 (heiß):
   Akzentfarbe, Wasser und Dampf wärmen sich gemeinsam auf. Weiche Serifen, runde Formen, Wellenkanten. */
@property --t { syntax: "<number>"; inherits: true; initial-value: 0.28; }
:root {
  --eis: #dff0f3; --eis-2: #cbe6eb; --weiss: #fbfeff;
  --tief: #0e4c5c; --tief-2: #3d6f7c; --nacht: #0a3743;
  --tuerkis: #1d9aa8; --glut: #e4412b;
  --t: 0.28;
  --akzent: color-mix(in oklch longer hue, var(--tuerkis), var(--glut) calc(var(--t) * 100%));
  --fokus: var(--tief);
  --rand: clamp(1.1rem, 4.5vw, 4rem);
  --spur: rgb(14 76 92 / .16); --fuell: var(--akzent); --knopf: var(--weiss); --knopf-rand: 3px solid var(--akzent);
  --knopf-g: 26px; --spur-h: 8px; --knopf-schatten: 0 3px 10px rgb(14 76 92 / .25);
  --seg-an: var(--tief); --seg-an-text: var(--weiss);
  transition: --t .5s;
}
:root {
  /* Bausteine aus gemeinsam/rahmen.css */
  --b-akzent: var(--akzent); --b-akzent-text: #fff; --b-radius: 28px;
  --b-titel: "Fraunces", Georgia, serif; --b-zitat: "Fraunces", Georgia, serif;
  --b-text-2: var(--tief-2); --b-linie: rgb(14 76 92 / .14); --b-karte: var(--weiss);
  --akzent-flaeche: color-mix(in oklch, var(--akzent), #062c36 34%); /* Akzent unter weißer Schrift */ --b-fehler: #c0392b; --b-gut: #12876f;
  --kopf-fest-grund: rgb(223 240 243 / .82); --kopf-fest-text: var(--tief); --kopf-fest-rand: rgb(14 76 92 / .12);
  --menue-grund: var(--tief); --menue-text: var(--weiss); --menue-akzent: #7fd6e0; --menue-linie: rgb(255 255 255 / .14);
  --menue-schrift: "Fraunces", Georgia, serif; --menue-gewicht: 600;
  --menue-knopf-grund: rgb(251 254 255 / .7); --menue-knopf-rand: rgb(14 76 92 / .2);
}
body { background: var(--eis); color: var(--tief); font: 400 1.075rem/1.65 "Figtree", system-ui, sans-serif; }
h1, h2, h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 96; letter-spacing: -.02em; line-height: 1.02; }
h2 { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.rahmen { width: min(100% - 2 * var(--rand), 1240px); margin-inline: auto; }

/* ---------- Kopf ---------- */
.kopf { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--rand); }
.marke { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 600 1.15rem/1 "Fraunces", serif; font-variation-settings: "SOFT" 100; }
.marke svg { width: 1.6rem; fill: var(--akzent); }
.kopf nav { display: flex; gap: clamp(.8rem, 2.5vw, 2rem); font-weight: 600; background: rgb(251 254 255 / .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: .55rem 1.1rem; border-radius: 99px; }
.kopf nav a { text-decoration: none; }
.kopf nav a:hover { color: var(--akzent); }
@media (max-width: 700px) { .kopf nav { display: none; } }

/* ---------- Knöpfe ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .7rem 1.5rem; border-radius: 99px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: background-color .3s, transform .2s; }
.knopf:hover { transform: translateY(-2px); }
.knopf-voll { background: var(--akzent-flaeche); color: #fff; }
.knopf-hohl { border-color: var(--tief); }

/* ---------- Held ---------- */
.held { height: 100svh; min-height: 640px; max-height: 1080px; overflow: hidden; }
.held-ersatz { background: radial-gradient(80% 60% at 50% 40%, #bfe6ec, var(--eis)); }
.held-inhalt { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: 2rem; padding: 6rem var(--rand) 6rem; pointer-events: none; }
.held-inhalt > * { pointer-events: auto; }
.glas {
  max-width: 36rem; padding: clamp(1.6rem, 3.5vw, 2.8rem); border-radius: 32px;
  background: rgb(251 254 255 / .58); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgb(255 255 255 / .7); box-shadow: 0 20px 60px rgb(14 76 92 / .16);
}
.held h1 { font-size: clamp(3.2rem, 7.6vw, 6.8rem); font-weight: 650; }
.glas p { margin-top: 1rem; color: var(--tief-2); font-size: 1.1rem; }
.held-aktionen { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }

/* Thermostat */
.thermostat { position: relative; justify-self: center; width: min(22rem, 80vw); aspect-ratio: 1; display: grid; place-items: center; }
.skala { position: absolute; inset: 0; }
.skala i { position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; transform-origin: 50% 100%; }
.skala i::before { content: ""; position: absolute; top: 2%; left: 0; width: 2px; height: 5%; background: var(--tief); opacity: .35; border-radius: 1px; }
.skala i.gross::before { height: 8%; opacity: .7; }
.bogen { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; }
.bogen path { fill: none; stroke-width: 7; stroke-linecap: round; }
.bogen-grund { stroke: rgb(14 76 92 / .12); }
.bogen-wert { stroke: var(--akzent); stroke-dasharray: 30 100; transition: stroke-dasharray .15s; filter: drop-shadow(0 0 6px color-mix(in oklch, var(--akzent) 60%, transparent)); }
.drehregler#thermostat {
  width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e8f3f5 45%, #c9dfe4 100%);
  box-shadow: 0 30px 50px rgb(14 76 92 / .28), 0 8px 14px rgb(14 76 92 / .18), inset 0 -6px 12px rgb(14 76 92 / .12), inset 0 4px 8px #fff;
}
.drehregler#thermostat::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: repeating-conic-gradient(rgb(14 76 92 / .06) 0 3deg, transparent 3deg 6deg); mask: radial-gradient(circle, transparent 78%, #000 80%); }
.drehregler#thermostat:focus-visible { outline: 4px solid var(--akzent); outline-offset: 6px; }
.kerbe { position: absolute; left: 50%; top: 8%; width: 8px; height: 18%; margin-left: -4px; border-radius: 4px; background: var(--akzent); box-shadow: 0 0 10px var(--akzent); }
.anzeige { position: absolute; bottom: -1%; display: flex; align-items: baseline; gap: .15rem; font: 600 clamp(2rem, 4vw, 2.8rem)/1 "Fraunces", serif; font-variation-settings: "SOFT" 100; color: var(--tief); }
.anzeige .einheit { font-size: .6em; color: var(--akzent); }
.thermostat-tipp { position: absolute; bottom: -12%; font-size: .85rem; color: var(--tief-2); white-space: nowrap; }
.welle-unten { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 80px); z-index: 3; fill: var(--eis); }
@media (max-width: 860px) {
  .held { height: auto; min-height: 100svh; max-height: none; }
  .held-inhalt { position: relative; grid-template-columns: 1fr; padding: 5.5rem var(--rand) 7rem; gap: 3rem; }
  .thermostat { width: min(17rem, 78vw); }
}

/* ---------- Leistungen ---------- */
.leistungen { padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem); }
.fliesen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: 2.5rem; }
.fliese {
  position: relative; padding: 2rem 1.8rem; border-radius: 28px; background: var(--weiss); overflow: hidden;
  background-image: linear-gradient(rgb(14 76 92 / .05) 1.5px, transparent 1.5px), linear-gradient(90deg, rgb(14 76 92 / .05) 1.5px, transparent 1.5px);
  background-size: 44px 44px; background-position: -1px -1px;
  box-shadow: 0 1px 0 #fff inset, 0 12px 30px rgb(14 76 92 / .08);
}
.fliese::after { /* Tropfen, der beim Überfahren eine Welle schlägt */
  content: ""; position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  border: 2px solid var(--akzent); opacity: 0; pointer-events: none;
}
.fliese:hover::after { animation: ring 1.1s cubic-bezier(.2,.7,.3,1); }
@keyframes ring { from { opacity: .8; scale: 1; } to { opacity: 0; scale: 40; border-width: .1px; } }
.fliese svg { width: 3.6rem; fill: none; stroke: var(--akzent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fliese h3 { font-size: 2rem; margin: 1rem 0 .8rem; }
.fliese li { padding: .45rem 0; border-top: 1px solid rgb(14 76 92 / .1); color: var(--tief-2); }

/* ---------- Rechner ---------- */
.rechner-bereich { position: relative; background: var(--tief); color: var(--weiss); padding: clamp(6rem, 11vw, 9rem) 0 clamp(5rem, 9vw, 8rem);
  --spur: rgb(255 255 255 / .18); --knopf: var(--tief); --knopf-rand: 3px solid var(--weiss); --seg-an: var(--weiss); --seg-an-text: var(--tief); --fokus: #fff; }
.welle-oben { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(40px, 6vw, 80px); fill: var(--eis); }
.rechner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kopf kopf" "ein aus"; gap: 3rem clamp(2rem, 5vw, 5rem); }
.rechner-kopf { grid-area: kopf; max-width: 50rem; }
.rechner-kopf h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.rechner-kopf p { margin-top: 1rem; color: #b8d5dc; max-width: 38rem; }
.eingaben { grid-area: ein; display: grid; gap: 1.4rem; align-content: start; }
.eingaben label, .wahl legend, .legende-ersatz { color: #b8d5dc; font-size: .95rem; }
.eingaben output { font: 600 1.25rem/1 "Fraunces", serif; font-variation-settings: "SOFT" 100; }
.wahl { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.wahl .segmente > button { border-color: rgb(255 255 255 / .35); }
.zeile { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.stufen { border-color: rgb(255 255 255 / .35); }
.stufen output { font: 600 1.2rem/1 "Fraunces", serif; }
.stufen button:disabled { opacity: .3; cursor: default; }

.tanks { grid-area: aus; display: grid; gap: 1.8rem; align-content: start; }
.tank-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.tank { margin: 0; display: grid; gap: .8rem; }
.tank-koerper { position: relative; height: clamp(15rem, 30vw, 21rem); border-radius: 26px 26px 34px 34px; background: rgb(255 255 255 / .06); border: 2px solid rgb(255 255 255 / .22); overflow: hidden; }
.fuellung { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; transition: height 1.1s cubic-bezier(.3,1.2,.4,1); }
.fuellung svg { position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; max-width: none; height: 18px; animation: welle 3.2s linear infinite; }
.tank-neu .fuellung svg { animation-duration: 2.6s; animation-direction: reverse; }
@keyframes welle { to { translate: -50% 0; } }
.tank-alt .fuellung { background: linear-gradient(#f06a45, #c0361f); } .tank-alt .fuellung svg { fill: #f06a45; }
.tank-neu .fuellung { background: linear-gradient(#3cc3cf, #178794); } .tank-neu .fuellung svg { fill: #3cc3cf; }
.tank figcaption { display: grid; color: #b8d5dc; font-weight: 600; }
.tank figcaption b { font: 600 clamp(1.6rem, 3vw, 2.3rem)/1.1 "Fraunces", serif; font-variation-settings: "SOFT" 100; color: var(--weiss); margin-top: .2rem; }
.tank figcaption small { font-weight: 400; }
.ersparnis { padding: 1.2rem 1.4rem; border-radius: 22px; background: rgb(255 255 255 / .08); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.ersparnis span:first-child { color: #b8d5dc; font-weight: 600; }
.ersparnis b { font: 650 clamp(2.4rem, 5vw, 3.6rem)/1 "Fraunces", serif; font-variation-settings: "SOFT" 100; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.kennzahlen dt { font-size: .85rem; color: #b8d5dc; }
.kennzahlen dd { font: 600 1.25rem/1.2 "Fraunces", serif; font-variation-settings: "SOFT" 100; }
.annahmen { font-size: .82rem; color: #9fc2ca; }
@media (max-width: 900px) {
  .rechner { grid-template-columns: 1fr; grid-template-areas: "kopf" "ein" "aus"; }
  .kennzahlen { grid-template-columns: 1fr 1fr; }
}

/* ---------- Zahlen als Blasen ---------- */
.zahlen { padding: clamp(4rem, 8vw, 7rem) 0; }
.blasen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blasen > div { display: grid; place-content: center; text-align: center; aspect-ratio: 1; max-width: 17rem; width: 100%; justify-self: center; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffffff, var(--eis-2) 70%); box-shadow: inset -8px -12px 30px rgb(14 76 92 / .1), 0 20px 40px rgb(14 76 92 / .1);
  animation: schweben 7s ease-in-out infinite; }
.blasen > div:nth-child(2) { animation-delay: -2.3s; } .blasen > div:nth-child(3) { animation-delay: -4.6s; }
@keyframes schweben { 50% { translate: 0 -12px; } }
.blasen b { font: 600 clamp(2.6rem, 6vw, 4.6rem)/1 "Fraunces", serif; font-variation-settings: "SOFT" 100; }
.blasen dt { color: var(--tief-2); font-weight: 600; padding-inline: 1rem; }
.zahlen .musterhinweis { text-align: center; margin-top: 2rem; }
@media (max-width: 640px) { .blasen { grid-template-columns: 1fr; } .blasen > div { max-width: 13rem; } }

/* ---------- Notdienst ---------- */
.notdienst { background: var(--akzent-flaeche); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0; }
.notdienst-innen { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem 2.5rem; align-items: center; }
.notdienst h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.notdienst p { margin-top: .5rem; max-width: 36rem; opacity: .92; }
.notruf { font: 650 clamp(1.8rem, 3.6vw, 2.8rem)/1 "Fraunces", serif; font-variation-settings: "SOFT" 100; color: #fff; text-decoration: none; padding: .8rem 1.4rem; border: 2px solid #fff; border-radius: 99px; white-space: nowrap; }
.notruf:hover { background: #fff; color: var(--tief); }
.tropfen { width: 3.4rem; height: 4.2rem; position: relative; }
.tropfen span { position: absolute; inset: 0; background: #fff; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; clip-path: path("M27 0C27 0 0 32 0 45a27 27 0 0 0 54 0C54 32 27 0 27 0z"); animation: tropfen 2.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes tropfen { 0%, 100% { translate: 0 -6px; scale: .95 1.03; } 50% { translate: 0 4px; scale: 1.04 .96; } }
@media (max-width: 800px) { .notdienst-innen { grid-template-columns: 1fr; } .tropfen { display: none; } .notruf { justify-self: start; } }

/* ---------- Kontakt ---------- */
.kontakt-bereich { padding: clamp(4rem, 8vw, 7rem) 0; }
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.kontakt p { margin-top: .9rem; color: var(--tief-2); }
.anfrage { display: grid; gap: 1rem; padding: 2rem; border-radius: 28px; background: var(--weiss); box-shadow: 0 16px 40px rgb(14 76 92 / .1); }
.anfrage label { display: grid; gap: .35rem; font-weight: 600; }
.anfrage input, .anfrage select, .anfrage textarea { padding: .8rem 1rem; border: 1.5px solid var(--eis-2); border-radius: 14px; background: #f4fafb; color: var(--tief); }
.anfrage input:focus-visible, .anfrage select:focus-visible, .anfrage textarea:focus-visible { outline: 3px solid var(--akzent); outline-offset: 0; }
.anfrage .knopf { justify-self: start; }
.anfrage-antwort { min-height: 1.4em; font-weight: 600; color: var(--tuerkis); }
@media (max-width: 800px) { .kontakt { grid-template-columns: 1fr; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--nacht); color: #9fc2ca; padding: 0 0 5.5rem; font-size: .95rem; position: relative; }
.fuss::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * clamp(40px, 6vw, 80px) + 1px); height: clamp(40px, 6vw, 80px); background: var(--nacht);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 180 10 360 10 540 40 S 900 70 1080 40 S 1350 10 1440 30 V80 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 180 10 360 10 540 40 S 900 70 1080 40 S 1350 10 1440 30 V80 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.fuss-raster { --fuss-linie: rgb(255 255 255 / .12); }
.fuss .marke, .fuss a { color: var(--weiss); }
.fuss .marke svg { fill: #7fd6e0; }
.fuss .fuss-titel { color: #7fd6e0; opacity: 1; }

/* ---------- Neue Abschnitte ---------- */
.ton-weiss { background: var(--weiss); }
.ton-tief { background: var(--tief); color: var(--weiss); --b-linie: rgb(255 255 255 / .16); --b-akzent: #7fd6e0; --b-text-2: #b8d5dc; margin-top: clamp(40px, 6vw, 80px); }
.ton-tief::before, .ton-tief::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(40px, 6vw, 80px); background: var(--tief); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 180 10 360 10 540 40 S 900 70 1080 40 S 1350 10 1440 30 V80 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 180 10 360 10 540 40 S 900 70 1080 40 S 1350 10 1440 30 V80 H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.ton-tief::before { top: calc(-1 * clamp(40px, 6vw, 80px) + 1px); }
.ton-tief::after { bottom: calc(-1 * clamp(40px, 6vw, 80px) + 1px); rotate: 180deg; }
.ton-tief + section { padding-top: calc(var(--b-abstand) + clamp(40px, 6vw, 80px)); }
.kopf .menue-knopf, .kopf .kopf-ruf { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 700; }
.projekt-bild { box-shadow: 0 1px 0 #fff inset, 0 24px 50px -24px rgb(14 76 92 / .45); }
.projekt-daten dd { font: 600 1.3rem/1.1 "Fraunces", serif; font-variation-settings: "SOFT" 100; }
.projekte-hinweis, .stimmen-hinweis { margin-top: 2.5rem; }
.betrieb-lead { font-family: "Fraunces", serif; font-variation-settings: "SOFT" 100; font-weight: 500; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.35; }
.siegel li { background: var(--weiss); border-color: transparent; box-shadow: 0 10px 26px rgb(14 76 92 / .08); border-radius: 22px; }
.grundsaetze li { border-top: 2px solid var(--akzent); }
.team-bild { background: radial-gradient(circle at 32% 28%, #ffffff, var(--eis-2) 72%); color: var(--tief); box-shadow: inset -4px -6px 14px rgb(14 76 92 / .12), 0 8px 18px rgb(14 76 92 / .12); font: 600 1.3rem/1 "Fraunces", serif; }
.ablauf-schritte li::before { font-size: .9rem; }
.stimme { border: 0; box-shadow: 0 1px 0 #fff inset, 0 16px 40px rgb(14 76 92 / .09); background-image: linear-gradient(rgb(14 76 92 / .04) 1.5px, transparent 1.5px), linear-gradient(90deg, rgb(14 76 92 / .04) 1.5px, transparent 1.5px); background-size: 44px 44px; }
.stimme blockquote { font-variation-settings: "SOFT" 100; font-weight: 500; }
.fragen-liste summary { font-family: "Figtree", sans-serif; }
.kontakt-ruf a { font: 600 clamp(2rem, 4.2vw, 3rem)/1 "Fraunces", serif; font-variation-settings: "SOFT" 100; color: var(--tief); text-decoration: none; }
.kontakt-mail a, .zeiten, .gebiet { color: var(--tief); }
.anfrage select { background-color: #f4fafb; }