/* Kelvin & Cruz Heating and Air, Demo-Website von TEAM Gold LLC (Oktober 2026).
   Erste Fassung. US-Betrieb: Englisch im HTML, Deutsch über ?lang=de.

   Gestaltungsidee: Temperatur. Ein kühles Off-White wie eine frisch gestrichene
   Innenwand, zwei Pole: Eisblau für Kühlen, Glut für Heizen, Tinte für Text.
   Space Grotesk für alles Gesprochene, Space Mono für alles, was ein Gerät anzeigt:
   Temperaturen, Preise, Uhrzeiten. Wellenlinien stehen für Luftstrom und Isothermen.

   Bewegung: wie Luft, die einmal durch den Raum zieht. Inhalte gleiten kurz herein,
   Bilder werden einmal von links freigegeben, Isothermen zeichnen sich einmal.
   Das Thermostat färbt den Raum zwischen Eis und Glut. prefers-reduced-motion
   zeigt alles sofort. */

:root {
  --bg: #f3f5f4;
  --bg-2: #e8eeec;
  --card: #ffffff;
  --ink: #14181c;
  --ink-soft: #4b555e;
  --ink-faint: #8a949c;
  --ice: #7cc6f0;
  --ice-pale: #dcefFa;
  --deep: #0f4c75;
  --ember: #e2552b;
  --ember-pale: #fbe1d6;
  --line: rgba(20, 24, 28, 0.12);
  --line-strong: rgba(20, 24, 28, 0.26);

  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --air: cubic-bezier(0.22, 0.7, 0.2, 1);
  --gutter: clamp(18px, 4vw, 56px);
  --max: 1240px;
  --hdr-h: 70px;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms var(--air) both vt-out; }
::view-transition-new(root) { animation: 360ms var(--air) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateX(-10px); } }
.hdr { view-transition-name: site-header; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
::selection { background: var(--ice); color: var(--ink); }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Schrift --------------------------------------------------------------- */
.t-xxl, .t-xl, .t-l, .t-m { font-family: var(--sans); font-weight: 600; letter-spacing: -0.03em; overflow-wrap: break-word; }
.t-xxl { font-size: clamp(2.9rem, 7vw, 6.4rem); line-height: 0.98; letter-spacing: -0.045em; }
.t-xl { font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em; }
.t-l { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.06; }
.t-m { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.2; letter-spacing: -0.015em; }
.c-ice { color: var(--deep); }
.c-ember { color: var(--ember); }
.tag { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.tag::before { content: ""; width: 22px; height: 2px; background: linear-gradient(90deg, var(--ice) 50%, var(--ember) 50%); }
.lede { font-size: clamp(1.06rem, 1.35vw, 1.2rem); color: var(--ink-soft); max-width: 50ch; line-height: 1.6; }
.dim { color: var(--ink-soft); }
.small { font-size: 0.88rem; }

/* Knöpfe ---------------------------------------------------------------- */
.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; background: var(--ink); color: #fff; font-weight: 600; font-size: 1rem; transition: background-color 180ms linear, transform 180ms var(--air); }
.btn:hover { background: var(--deep); }
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform 300ms var(--air); }
.btn:hover .arr { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-ghost:hover { background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-sm { padding: 9px 16px; font-size: 0.92rem; border-radius: 8px; }
.link { color: var(--deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--ice); transition: text-decoration-color 150ms linear; }
.link:hover { text-decoration-color: var(--ember); }

/* Kopfzeile ------------------------------------------------------------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hdr-h); display: flex; align-items: center; background: rgba(243, 245, 244, 0.94); border-bottom: 1px solid var(--line); }
.hdr .wrap { width: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 34px; height: 34px; color: var(--ink); flex: none; }
.brand b { display: block; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.brand small { display: block; font-family: var(--mono); font-size: 0.68rem; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0.02em; }
.nav { display: flex; gap: 20px; }
.nav a { white-space: nowrap; text-decoration: none; font-size: 0.95rem; color: var(--ink-soft); padding: 6px 0; position: relative; transition: color 150ms linear; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--air); }
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.status { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.status .lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); }
.status.is-open .lamp { background: #2f9e6a; }
.status strong { color: var(--ink); font-weight: 700; }
.lang { background: none; border: 1.5px solid var(--line-strong); border-radius: 8px; padding: 5px 10px; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.lang:hover { border-color: var(--ink); }
.menu-btn { display: none; width: 44px; height: 44px; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 10px; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform 300ms var(--air); }
.menu-btn span:first-child { top: 16px; } .menu-btn span:last-child { top: 24px; }
.menu-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 45; background: var(--bg); padding: calc(var(--hdr-h) + 20px) var(--gutter) 28px; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; transform: translateX(-24px); visibility: hidden; transition: opacity 260ms linear, transform 400ms var(--air), visibility 0s 400ms; }
.menu-open .sheet { opacity: 1; transform: none; visibility: visible; transition: opacity 260ms linear, transform 400ms var(--air); }
.sheet nav { display: grid; }
.sheet nav a { font-size: clamp(1.7rem, 7.5vw, 2.4rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sheet nav a[aria-current="page"] { color: var(--ember); }
.sheet-foot { display: grid; gap: 4px; color: var(--ink-soft); font-size: 0.92rem; }
.menu-open { overflow: hidden; }
@media (max-width: 1340px) { .hdr .status { display: none; } }
@media (max-width: 1180px) { .nav { display: none; } .menu-btn { display: block; } }
@media (max-width: 640px) { .hdr .status, .hdr .btn { display: none; } }

/* Einblendungen: wie ein Luftzug ---------------------------------------- */
.js [data-rv] { opacity: 0; transform: translateX(-18px); transition: opacity 500ms var(--air), transform 800ms var(--air); transition-delay: var(--d, 0ms); }
.js [data-rv].is-in { opacity: 1; transform: none; }
/* clip-path liegt auf dem Kind: ein ganz weggeschnittenes Element meldet der IntersectionObserver in Chrome nie */
.js [data-wipe] > * { clip-path: inset(0 100% 0 0); transition: clip-path 1100ms var(--air); }
.js [data-wipe].is-in > * { clip-path: inset(0 0 0 0); }

/* Abschnitte ------------------------------------------------------------ */
.sec { padding: clamp(72px, 10vw, 130px) 0; }
.sec-tight-top { padding-top: clamp(30px, 4vw, 50px); }
.sec-cool { background: var(--bg-2); }
.sec-ink { background: var(--ink); color: #eef2f3; }
.sec-ink .lede, .sec-ink .dim { color: #a9b3ba; }
.sec-ink .tag { color: var(--ice); }
.head { margin-bottom: clamp(36px, 5vw, 60px); max-width: 760px; }
.head .t-l + .lede { margin-top: 16px; }
.head-row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* Bühne: echtes Foto (Phoenix am Abend) mit dunklem Verlauf, darauf weiße Schrift.
   Das Thermostat sitzt fest rechts und färbt nur seine eigene Mitte, nicht mehr
   die ganze Fläche (die wandernde Eis/Glut-Naht sah auf echten Bildschirmen wie
   ein Fehler aus). */
.stage { --dw: clamp(270px, 25vw, 360px); position: relative; min-height: 100svh; padding: calc(var(--hdr-h) + clamp(28px, 4vw, 56px)) 0 clamp(28px, 4vw, 48px); display: grid; grid-template-rows: auto auto auto; align-content: space-between; overflow: hidden;
  background: #0d1013; color: #fff; }
.stage-bg { position: absolute; inset: 0; z-index: 0; }
.stage-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.stage-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 13, 16, 0.86) 0%, rgba(10, 13, 16, 0.55) 48%, rgba(10, 13, 16, 0.2) 100%),
              linear-gradient(0deg, rgba(10, 13, 16, 0.75) 0%, rgba(10, 13, 16, 0) 45%); }
.stage-top, .stage-bottom { position: relative; z-index: 2; }
.t-hero { font-size: clamp(3.2rem, 9.6vw, 9.4rem); line-height: 0.88; letter-spacing: -0.055em; font-weight: 700; max-width: 9.5ch; }
.stage .tag { color: #fff; }
.stage .tag::before { background: #fff; }
.dial-row { position: relative; z-index: 3; height: calc(var(--dw) + 34px); margin: clamp(10px, 2vw, 24px) 0; }
.dial-seat { position: absolute; top: 0; width: var(--dw); left: calc(100% - var(--gutter) - var(--dw) / 2); transform: translateX(-50%); text-align: center; }
.seg { display: inline-flex; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: wrap; }
.seg-btn { background: none; border: 0; border-radius: 7px; padding: 7px 12px; cursor: pointer; font-size: 0.88rem; font-weight: 500; color: var(--ink-soft); transition: background-color 160ms linear, color 160ms linear; }
.seg-btn:hover { color: var(--ink); }
.seg-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.stage .hint { margin: 6px 0 0; color: #fff; opacity: 0.8; }
.stage-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; }
.stage-copy { max-width: 440px; }
.stage-copy .lede { color: #e6ecef; }
.stage .btn:not(.btn-ghost) { background: #fff; color: var(--ink); }
.stage .btn:not(.btn-ghost):hover { background: var(--ice-pale); }
.stage .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.stage .btn-ghost:hover { background: rgba(255, 255, 255, 0.15); }
.stage-panel { max-width: 360px; background: rgba(20, 24, 28, 0.92); color: #eef2f3; border-radius: 18px; padding: 20px 22px; }
.stage-panel .seg { border-color: rgba(238, 242, 243, 0.3); margin-bottom: 12px; }
.stage-panel .seg-btn { color: #b8c4cb; }
.stage-panel .seg-btn:hover { color: #fff; }
.stage-panel .seg-btn[aria-pressed="true"] { background: #eef2f3; color: var(--ink); }
.readout { margin: 0 0 14px; font-size: 0.78rem; color: #9aa6ad; }
.readout b { color: #fff; }
.mode { margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ice); }
.stage[data-mode="heat"] .mode { color: #ff8a63; }
.stage[data-mode="idle"] .mode { color: #eef2f3; }
.mode-text { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.45; color: #d6dde1; }
.stage-panel .link { color: #fff; text-decoration-color: var(--ice); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

.dial { width: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; display: block; }
.dial:active { cursor: grabbing; }
.dial:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 50%; }
.dial .face { fill: #f3f5f4; stroke: var(--ink); stroke-width: 3; }
.dial .track { fill: none; stroke: url(#trk); stroke-width: 10; stroke-linecap: round; opacity: 0.55; }
.dial .tick { stroke: var(--ink-faint); stroke-width: 1.5; }
.dial .tick.major { stroke: var(--ink); stroke-width: 2.5; }
.dial .needle { stroke: var(--ink); stroke-width: 2.5; }
.dial .knob { fill: var(--ink); stroke: #f3f5f4; stroke-width: 4; }
.dial .knob-g { transition: transform 120ms linear; transform-origin: 150px 150px; }
.dial .hub { fill: color-mix(in oklab, var(--ice-pale) calc((1 - var(--t)) * 100%), var(--ember-pale)); transition: fill 600ms var(--air); }
.dial .set { font-family: var(--mono); font-size: 56px; font-weight: 700; text-anchor: middle; fill: var(--ink); dominant-baseline: middle; }
.dial .unit, .dial .lim { font-family: var(--mono); font-size: 12px; text-anchor: middle; fill: var(--ink-soft); letter-spacing: 0.12em; }


@media (max-width: 940px) {
  .stage { min-height: 0; grid-template-rows: auto auto auto; }
  .dial-row { height: auto; }
  .dial-seat { position: relative; top: auto; left: auto; transform: none; width: min(78vw, 340px); margin: 6px auto 0; }
  .stage-bottom { flex-direction: column; align-items: stretch; }
  .stage-panel { max-width: none; }
}

/* Temperatur-Faden: jeder Abschnitt ist eine Temperatur ----------------- */
.thread { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.big-temp { margin: 0; display: flex; align-items: flex-start; line-height: 0.8; }
.big-temp .num { font-size: clamp(5.5rem, 17vw, 15rem); font-weight: 700; letter-spacing: -0.07em; }
.big-temp .deg { font-family: var(--mono); font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 700; margin-top: 0.3em; }
.when { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; }
.thread .t-l { max-width: 20ch; }
.thread .lede { margin-top: 14px; }
@media (max-width: 760px) { .thread { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

.sec-ice { background: var(--ice); }
.sec-ice .lede, .sec-ice .dim { color: #163a52; }
.sec-ice .big-temp { color: var(--deep); }
.sec-night { background: var(--deep); color: #eaf5fc; }
.sec-night .lede { color: #b6d6ea; }
.sec-night .big-temp { color: var(--ice); }
.sec-ink .big-temp { color: #ff8a63; }
.sec-pale { background: var(--ice-pale); }
.sec-pale .big-temp { color: var(--deep); }
.sec-white { background: #fff; padding-bottom: 0; }
.sec-white .big-temp { color: var(--ember); }
.sec-ember { background: var(--ember); color: var(--ink); }
.sec-ember .lede { color: #3a1408; }
.sec-ember .btn-ghost { box-shadow: inset 0 0 0 1.5px var(--ink); }
.more { margin-top: 32px; }

/* Bilder vollflächig, mutig angeschnitten */
.bleed { margin: 0 0 clamp(36px, 5vw, 60px); position: relative; }
.bleed img { width: 100%; height: clamp(260px, 42vw, 620px); object-fit: cover; }
.bleed-low { margin: clamp(56px, 7vw, 90px) 0 0; }
.sec-photo-top { padding-top: 0; }
.bleed-top { margin-bottom: clamp(48px, 6vw, 80px); }
.bleed figcaption { position: absolute; left: var(--gutter); bottom: 18px; background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; }

/* Leistungen als große Zeilen */
.svc-big { list-style: none; margin: 0; padding: 0; border-top: 2px solid currentColor; }
.svc-big li { border-bottom: 1px solid color-mix(in oklab, currentColor 30%, transparent); }
.svc-big a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 8px 32px; align-items: baseline; padding: clamp(18px, 2.4vw, 30px) 0; text-decoration: none; }
.svc-big .nm { font-size: clamp(1.5rem, 2.8vw, 2.4rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; transition: transform 300ms var(--air); }
.svc-big .ds { font-size: 1rem; opacity: 0.85; }
.svc-big .pr { font-size: 0.9rem; white-space: nowrap; }
.svc-big a:hover .nm { transform: translateX(8px); }
@media (max-width: 760px) { .svc-big a { grid-template-columns: minmax(0, 1fr) auto; } .svc-big .ds { grid-column: 1 / -1; } .svc-big .pr { grid-row: 1; grid-column: 2; } }

/* Fehlersucher: dunkle Bühne, großes Ergebnis --------------------------- */
.fixer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.fx-q { border: 0; margin: 0 0 24px; padding: 0; }
.fx-q legend { font-weight: 600; font-size: 1.08rem; margin-bottom: 10px; padding: 0; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; cursor: pointer; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pill span { display: inline-block; border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 9px 15px; font-size: 0.98rem; transition: background-color 150ms linear, color 150ms linear, border-color 150ms linear; }
.pill:hover span { border-color: var(--ink); }
.pill input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.pill input:focus-visible + span { outline: 2px solid var(--deep); outline-offset: 2px; }
.sec-ink .pill span { border-color: rgba(238, 242, 243, 0.3); }
.sec-ink .pill:hover span { border-color: #eef2f3; }
.sec-ink .pill input:checked + span { background: var(--ice); color: var(--ink); border-color: var(--ice); }
.sec-ink .pill input:focus-visible + span { outline-color: var(--ice); }
.fx-out { position: sticky; top: calc(var(--hdr-h) + 20px); background: var(--ice); color: var(--ink); border-radius: 22px; padding: clamp(24px, 3.5vw, 40px); transition: background-color 400ms var(--air); }
.fx-out.call { background: var(--ember); }
.fx-out.idle { background: #262d35; color: #eef2f3; }
.fx-verdict { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 18px; }
.fx-out.idle .fx-verdict { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.fx-steps { margin: 0 0 22px; padding-left: 1.3em; }
.fx-steps li { margin-bottom: 10px; line-height: 1.5; }
.fx-steps li.fresh { animation: step-in 500ms var(--air) both; animation-delay: calc(var(--i) * 90ms); }
@keyframes step-in { from { opacity: 0; transform: translateX(-10px); } }
.fx-out .btn { background: var(--ink); color: #fff; }
.fx-note { margin: 18px 0 0; opacity: 0.8; }
@media (max-width: 880px) { .fixer { grid-template-columns: minmax(0, 1fr); } .fx-out { position: static; } }

/* Wartungspläne: Jahreskreis ---------------------------------------------- */
.plans-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ring { width: 100%; max-width: 520px; display: block; margin: 0 auto; overflow: visible; }
.ring .seg-cool { fill: color-mix(in oklab, var(--ice) 55%, #fff); }
.ring .seg-heat { fill: color-mix(in oklab, var(--ember) 40%, #fff); }
.ring .segs path.now { stroke: var(--ink); stroke-width: 3; }
.ring .mlabels text { font-family: var(--mono); font-size: 13px; text-anchor: middle; fill: var(--ink-soft); }
.ring-hub { fill: #fff; stroke: var(--line); }
.ring-price { font-family: var(--mono); font-size: 54px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; fill: var(--ink); }
.ring-per { font-family: var(--mono); font-size: 14px; text-anchor: middle; fill: var(--ink-soft); }
.marks circle { transform-box: fill-box; transform-origin: center; animation: pop 500ms var(--air) both; animation-delay: calc(var(--i) * 70ms); }
.marks .m-ac { fill: var(--deep); }
.marks .m-heat { fill: var(--ember); }
.marks .m-filter { fill: #fff; stroke: var(--ink); stroke-width: 3; }
@keyframes pop { from { transform: scale(0); } }
.plan-pick { margin-bottom: 22px; }
.plan-note { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.25; margin-bottom: 18px; }
.key { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; color: var(--ink-soft); }
.key i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-left: 8px; }
.key i:first-child { margin-left: 0; }
.k-ac { background: var(--deep); }
.k-heat { background: var(--ember); }
.k-filter { background: #fff; box-shadow: inset 0 0 0 2.5px var(--ink); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; background: var(--card); margin-top: clamp(36px, 5vw, 56px); }
.plan-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 0.95rem; }
.plan-table th, .plan-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: 0; }
.plan-table thead th { vertical-align: bottom; font-weight: 600; }
.plan-table thead b { display: block; font-size: 1.6rem; margin-top: 4px; }
.plan-table thead small { color: var(--ink-soft); font-size: 0.78rem; }
.plan-table tbody th { font-weight: 500; color: var(--ink-soft); }
.plan-table td { font-family: var(--mono); font-size: 0.85rem; }
.plan-table td.yes span::before { content: "✓ "; color: var(--deep); }
.plan-table td.no { color: var(--ink-faint); }
.plan-table [data-plan-col] { transition: background-color 300ms linear; }
.plans[data-plan="none"] [data-plan-col="none"], .plans[data-plan="club"] [data-plan-col="club"], .plans[data-plan="plus"] [data-plan-col="plus"] { background: var(--ice-pale); }
@media (max-width: 880px) { .plans-grid { grid-template-columns: minmax(0, 1fr); } .ring { max-width: 420px; } }

/* Stimmen --------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.quote { margin: 0; padding: 26px 0 0; border-top: 3px solid var(--deep); }
.quote:nth-child(even) { border-top-color: var(--ember); }
.quote blockquote { margin: 0 0 16px; font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.45; letter-spacing: -0.01em; }
.quote figcaption { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); }
.quote figcaption b { color: var(--ink); }
.quotes-all { row-gap: 48px; }
@media (max-width: 760px) { .quotes { grid-template-columns: minmax(0, 1fr); } }

/* Schluss --------------------------------------------------------------- */
.cta { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 32px; align-items: end; }
.cta .t-xl { max-width: 16ch; margin-bottom: 18px; }
.cta-btns { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
@media (max-width: 820px) { .cta { grid-template-columns: minmax(0, 1fr); } }

/* Seitenkopf: vollflächig in Eis, Glut oder Nacht, mit großer Temperatur --- */
.phead { padding: calc(var(--hdr-h) + clamp(40px, 6vw, 80px)) 0 0; position: relative; }
.phead-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(24px, 4vw, 60px); align-items: end; }
.phead .t-xl { max-width: 16ch; margin-bottom: 20px; }
.phead-temp { margin: 0; display: grid; justify-items: end; line-height: 0.82; }
.phead-temp .num { font-size: clamp(5rem, 15vw, 13rem); font-weight: 700; letter-spacing: -0.07em; }
.phead-temp .deg { font-family: var(--mono); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.8rem); }
.phead-temp .when { margin: 12px 0 0; font-size: 0.75rem; }
.tone-ice { background: var(--ice); }
.tone-ice .phead-temp { color: var(--deep); }
.tone-ice .lede { color: #163a52; }
.tone-ember { background: var(--ember); }
.tone-ember .lede { color: #3a1408; }
.tone-ember .tag { color: var(--ink); }
.tone-ember .tag::before { background: var(--ink); }
.tone-ember .isotherm path { stroke: #fff; }
.tone-night { background: var(--deep); color: #eaf5fc; }
.tone-night .lede, .tone-night .crumbs, .tone-night .crumbs a { color: #b6d6ea; }
.tone-night .tag { color: var(--ice); }
.tone-night .phead-temp { color: var(--ice); }
.tone-pale { background: var(--ice-pale); }
.tone-pale .phead-temp { color: var(--deep); }
.crumbs { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 22px; }
.crumbs a { color: var(--ink); }
.isotherm { display: block; width: 100%; height: 60px; margin-top: clamp(24px, 4vw, 44px); }
.isotherm path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 1600; stroke-dashoffset: 0; opacity: 0.6; }
.tone-night .isotherm path { stroke: var(--ice); }
.js .isotherm path { stroke-dashoffset: 1600; transition: stroke-dashoffset 1800ms var(--air) 300ms; }
.js .isotherm.is-in path { stroke-dashoffset: 0; }
@media (max-width: 700px) { .phead-grid { grid-template-columns: minmax(0, 1fr); } .phead-temp { justify-items: start; } }

/* Leistungen im Detail -------------------------------------------------- */
.svc { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding: clamp(36px, 5vw, 60px) 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.svc:first-child { border-top: 0; padding-top: 0; }
.svc.has-pic { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; }
.svc-body { max-width: 62ch; }
.svc-meta { margin: 0 0 10px; font-size: 0.85rem; color: var(--deep); }
.svc.pole-ember .svc-meta { color: var(--ember); }
.svc .t-l { margin-bottom: 14px; }
.svc-pic img, .pic img { border-radius: 16px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pic img { aspect-ratio: 16 / 10; }
@media (max-width: 880px) { .svc.has-pic { grid-template-columns: minmax(0, 1fr); } }

/* Preise ---------------------------------------------------------------- */
.price-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.price-table th, .price-table td { padding: 18px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: 0; }
.price-table th { font-weight: 600; }
.price-table th small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.88rem; margin-top: 3px; }
.price-table td { text-align: right; white-space: nowrap; font-size: 0.95rem; }
@media (max-width: 520px) { .price-table { table-layout: fixed; } .price-table th { width: 64%; } .price-table th, .price-table td { padding: 14px 12px; overflow-wrap: anywhere; hyphens: auto; } .price-table td { white-space: normal; } }
.steps, .rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li, .rules li { border-top: 1px solid var(--line); padding: 18px 0; color: var(--ink-soft); }
.steps li b, .rules li b { display: block; color: var(--ink); font-size: 1.12rem; margin-bottom: 4px; }
.demo-note { font-size: 0.85rem; color: var(--ink-soft); border-left: 3px solid var(--ice); padding-left: 14px; margin-top: 26px; max-width: 70ch; }

/* Team ------------------------------------------------------------------ */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.person { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; background: var(--ice-pale); color: var(--deep); border: 2px solid var(--ice); }
.person.pole-ember .badge { background: var(--ember-pale); color: #a8381a; border-color: var(--ember); }
.person .t-m { margin-bottom: 2px; }
.role { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }
.person p:not(.role) { color: var(--ink-soft); font-size: 0.96rem; }

/* Über uns -------------------------------------------------------------- */
.years { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 36px); }
.years li { border-top: 3px solid var(--ice); padding-top: 18px; }
.years li:nth-child(even) { border-top-color: var(--ember); }
.years b { display: block; font-size: 1.6rem; margin-bottom: 10px; }
.years .t-m { margin-bottom: 8px; }
.years p { color: var(--ink-soft); font-size: 0.96rem; }
@media (max-width: 900px) { .years { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .years { grid-template-columns: minmax(0, 1fr); } }

/* Formular -------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 20px; }
.full { grid-column: 1 / -1; }
.field label, .field .lbl { display: block; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.field input, .field select, .field textarea { width: 100%; background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; transition: border-color 150ms linear; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--deep); }
.field textarea { min-height: 100px; resize: vertical; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--deep); flex: none; }
.form-hint { color: #b6391a; margin: 0; min-height: 1.4em; }
.sent { display: none; margin-top: 26px; }
.sent.on { display: grid; gap: 18px; justify-items: start; }
.ticket { display: grid; gap: 6px; padding: 18px 22px; background: var(--ink); color: #e9f6fd; border-radius: 12px; min-width: min(100%, 300px); border-left: 6px solid var(--ice); }
.ticket .tk-h { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--ice); }
.ticket b { font-size: 1.6rem; }
.ticket span:last-child { font-size: 0.85rem; color: #b8c4cb; }
.js .sent.on .ticket { animation: step-in 600ms var(--air) both; }
.side .t-m { margin-bottom: 8px; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Öffnungszeiten -------------------------------------------------------- */
.hours { border-collapse: collapse; width: 100%; max-width: 360px; font-size: 0.92rem; }
.hours td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.hours td:last-child { text-align: right; color: var(--ink-soft); font-family: var(--mono); font-size: 0.82rem; }
.hours tr.today td { color: var(--ink); font-weight: 600; }
.hours tr.today td:first-child::after { content: attr(data-today); margin-left: 8px; font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; background: var(--ice); color: var(--ink); padding: 1px 6px; border-radius: 4px; font-weight: 700; }

/* Rechtliches ----------------------------------------------------------- */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 80px); }
.legal aside { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; display: grid; gap: 8px; }
.legal aside a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.legal aside a:hover { color: var(--deep); }
.legal section { margin-bottom: 52px; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.legal .t-l { margin-bottom: 18px; }
.legal h3 { font-size: 1.1rem; margin: 24px 0 6px; }
.legal p { color: var(--ink-soft); max-width: 64ch; }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal aside { position: static; grid-auto-flow: column; justify-content: start; gap: 20px; } }

/* Fußzeile -------------------------------------------------------------- */
.foot { background: var(--ink); color: #e3e9ec; padding: clamp(56px, 8vw, 90px) 0 26px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 30px clamp(24px, 4vw, 52px); }
.foot .brand { margin-bottom: 16px; }
.foot .brand .mark { color: #e3e9ec; }
.foot .brand small { color: #9aa6ad; }
.foot p { color: #9aa6ad; font-size: 0.94rem; max-width: 34ch; }
.foot h4 { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); font-weight: 700; margin-bottom: 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.94rem; color: #9aa6ad; overflow-wrap: anywhere; }
.foot ul a { text-decoration: none; }
.foot ul a:hover { color: #fff; }
.foot .hours td { border-color: rgba(227, 233, 236, 0.14); }
.foot .hours td:last-child { color: #9aa6ad; }
.foot .hours tr.today td { color: #fff; }
.foot .hours { margin-bottom: 12px; }
.foot-demo { margin-top: 52px; padding-top: 20px; border-top: 1px solid rgba(227, 233, 236, 0.14); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: #7f8b93; }
.foot-demo strong { color: #c3ccd1; }
@media (max-width: 960px) { .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* Weniger Bewegung ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-rv] { opacity: 1 !important; transform: none !important; }
  .js [data-wipe] > * { clip-path: none !important; }
  .js .isotherm path { stroke-dashoffset: 0; }
}