/* ================================================================
   apart wellness — neues Design (Stand 20.10.2026)
   Anlehnung an porsche.de (Vollbild-Einstieg, Bildkarten) und apple.de
   (große Produktkacheln, mittige Titel), dazu Glas-Optik (durchscheinende,
   weichgezeichnete Flächen über einem leisen Farbhintergrund) und
   Interaktion (Kippen der Karten, Lichtpunkt unter dem Zeiger, Regler).
   Marke: Logo, Burgund #8d0303, Schrift Jost. Keine schwarzen Flächen.
================================================================ */
:root {
  --weiss: #ffffff;
  --hellgrau: #f5f5f7;
  --tinte: #1d1d1f;
  --tinte-2: #6e6e73;
  --burgund: #8d0303;
  --burgund-hover: #a80d0d;
  --radius: 20px;
  --rand: clamp(16px, 2.2vw, 32px);
  --spalt: 12px;
  --kurve: cubic-bezier(.25, .1, .25, 1);

  /* Glas */
  --glas: rgba(255, 255, 255, .38);
  --glas-stark: rgba(255, 255, 255, .55);
  --glas-rand: rgba(255, 255, 255, .8);
  --glas-dunkel: rgba(18, 18, 20, .28);
  --glas-dunkel-rand: rgba(255, 255, 255, .22);
  --blur: 34px;
  --schatten: inset 0 1px 0 rgba(255, 255, 255, .75), 0 16px 48px rgba(30, 20, 20, .10);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #fff; }
body.n2 {
  margin: 0; background: var(--weiss); color: var(--tinte);
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Leiser Farbhintergrund (Wärme und Kälte der Marke), damit Glas etwas zu brechen hat */
body.n2::before {
  content: ''; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 36% at 14% 18%, rgba(141, 3, 3, .26), transparent 70%),
    radial-gradient(36% 32% at 86% 12%, rgba(226, 164, 98, .42), transparent 70%),
    radial-gradient(46% 42% at 72% 88%, rgba(136, 190, 216, .44), transparent 70%),
    radial-gradient(30% 30% at 22% 82%, rgba(141, 3, 3, .16), transparent 70%),
    radial-gradient(28% 26% at 50% 50%, rgba(226, 164, 98, .18), transparent 70%);
  filter: blur(54px);
  animation: aurora 40s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
figure { margin: 0; }
:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
.mittig { text-align: center; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 16px; top: 16px; z-index: 200; background: #fff; padding: 10px 16px; }
.ki { position: absolute; right: 12px; bottom: 12px; z-index: 2; font-size: 12px; line-height: 1; padding: 6px 9px; border-radius: 980px; background: rgba(20, 20, 22, .55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }

/* ── Glas-Grundform ── */
.glas, .weg, .kontakt__kachel, .ablauf, .einladung__glas, .check__form, .check__ergebnis, .kurz, .modell, .produkt, .warum__raster > div, .schritte__liste li, .spalten > div, .zeitstrahl > li,
.kontakt__formular, .temperatur, .faq__liste, .daten__liste, .fakten, .kachel, .fuss {
  position: relative;
  background: var(--glas);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
          backdrop-filter: blur(var(--blur)) saturate(170%);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten);
}
/* Lichtpunkt unter dem Zeiger (Koordinaten setzt js/neu2.js) */
.glas::after, .modell::after, .produkt::after, .warum__raster > div::after, .schritte__liste li::after, .spalten > div::after,
.zeitstrahl > li::after, .kontakt__formular::after, .temperatur::after, .kachel::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .45), transparent 62%);
  opacity: 0; transition: opacity 350ms var(--kurve);
}
.glas:hover::after, .modell:hover::after, .produkt:hover::after, .warum__raster > div:hover::after, .schritte__liste li:hover::after,
.spalten > div:hover::after, .zeitstrahl > li:hover::after, .kontakt__formular:hover::after, .temperatur:hover::after, .kachel:hover::after { opacity: 1; }

/* Kippen beim Überfahren (js/neu2.js setzt die Drehung) */
.kippt { transform-style: preserve-3d; transition: transform 320ms var(--kurve), box-shadow 320ms var(--kurve); will-change: transform; }
.kippt.ist-aktiv { transition: box-shadow 320ms var(--kurve); }

/* ── Knöpfe: rund, Burgund ── */
.knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 980px;
  background: var(--burgund); color: #fff; border: 1px solid var(--burgund);
  font: 400 17px/1 'Jost', sans-serif; text-decoration: none; cursor: pointer;
  transition: background 200ms var(--kurve), color 200ms var(--kurve), transform 180ms var(--kurve), box-shadow 200ms var(--kurve);
}
.knopf:hover { background: var(--burgund-hover); border-color: var(--burgund-hover); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(141, 3, 3, .25); }
.knopf:active { transform: translateY(0) scale(.98); box-shadow: none; }
.knopf--rand { background: rgba(255, 255, 255, .3); color: var(--burgund); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knopf--rand:hover { background: var(--burgund); color: #fff; }
.knopf--weiss { background: rgba(255, 255, 255, .88); color: var(--tinte); border-color: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knopf--weiss:hover { background: #fff; border-color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.knopf--rand-weiss { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knopf--rand-weiss:hover { background: #fff; color: var(--tinte); }
.pfeillink, .textknopf { color: var(--burgund); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.pfeillink::after { content: ' ›'; margin-left: 4px; }
.pfeillink:hover, .textknopf:hover { text-decoration: underline; }

/* ── Kopfzeile: Glas, über dem Einstieg dunkel, danach hell ── */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 64px; padding: 0 var(--rand); color: #fff;
  background: rgba(18, 18, 20, .18); border-bottom: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  transition: background 350ms var(--kurve), color 350ms var(--kurve), border-color 350ms var(--kurve);
}
.kopf.ist-fest { background: rgba(255, 255, 255, .45); color: var(--tinte); border-bottom-color: rgba(255, 255, 255, .6); }
.kopf__menue { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; background: none; border: 0; color: inherit; font: 400 16px 'Jost', sans-serif; cursor: pointer; padding: 0; }
.kopf__striche, .kopf__striche::before, .kopf__striche::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform 300ms var(--kurve), top 300ms var(--kurve), background 300ms; }
.kopf__striche::before, .kopf__striche::after { content: ''; position: absolute; left: 0; }
.kopf__striche::before { top: -6px; } .kopf__striche::after { top: 6px; }
.menue-offen .kopf__striche { background: transparent; }
.menue-offen .kopf__striche::before { top: 0; transform: rotate(45deg); }
.menue-offen .kopf__striche::after { top: 0; transform: rotate(-45deg); }
.kopf__logo img { height: 34px; width: auto; }
.kopf__logo .logo-dunkel { display: none; }
.kopf.ist-fest .logo-hell { display: none; }
.kopf.ist-fest .logo-dunkel { display: block; }
.kopf__aktion { justify-self: end; color: inherit; text-decoration: none; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
.kopf__aktion:hover { text-decoration: underline; }

.menue {
  position: fixed; top: 64px; left: 0; right: 0; z-index: 99; color: var(--tinte);
  background: rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(34px) saturate(180%); backdrop-filter: blur(34px) saturate(180%);
  padding: 32px var(--rand) 48px; max-height: calc(100dvh - 64px); overflow-y: auto;
  opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
  transition: opacity 280ms var(--kurve), transform 280ms var(--kurve), visibility 0s linear 280ms;
}
.menue[hidden] { display: block; }
.menue.ist-offen { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.menue__spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 48px; max-width: 980px; margin: 0 auto; }
.menue__titel { font-size: 14px; color: var(--tinte-2); margin-bottom: 12px; }
.menue a { display: block; font-size: 22px; font-weight: 500; text-decoration: none; padding: 6px 0; transition: color 200ms, transform 200ms var(--kurve); }
.menue a:hover { color: var(--burgund); transform: translateX(4px); }

/* ── Einstieg: Vollbild-Diashow, Text im Glas ── */
.held { position: relative; height: 100svh; min-height: 560px; max-height: 1000px; background: #1a1a1a; color: #fff; overflow: hidden; }
.held__bilder { position: absolute; inset: -4%; transform: translate(var(--px, 0), var(--py, 0)); transition: transform 600ms var(--kurve); }
.held__bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--kurve); }
.held__bild.ist-aktiv { opacity: 1; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 7000ms linear; }
.held__bild.ist-aktiv img { transform: scale(1); }
.held__bild::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .22); }
.held__bild .ki { bottom: auto; top: 76px; }
.held__text {
  position: absolute; left: var(--rand); bottom: clamp(56px, 9vh, 104px); z-index: 2; max-width: 780px;
  padding: clamp(24px, 3vw, 40px); border-radius: 24px;
  background: var(--glas-dunkel); border: 1px solid var(--glas-dunkel-rand);
  -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.held h1 { font-size: clamp(40px, 5.6vw, 84px); font-weight: 500; letter-spacing: -0.03em; }
.held__text p { font-size: clamp(17px, 1.5vw, 22px); margin: 16px 0 26px; max-width: 36ch; }
.held__text .knoepfe { justify-content: flex-start; }
.held__punkte { position: absolute; right: var(--rand); bottom: clamp(56px, 9vh, 104px); z-index: 3; display: flex; gap: 2px; padding: 4px 6px; border-radius: 980px; background: var(--glas-dunkel); border: 1px solid var(--glas-dunkel-rand); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.held__punkte button { width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.held__punkte button:not(.held__pause)::before { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background 200ms, transform 200ms; }
.held__punkte button:not(.held__pause):hover::before { background: #fff; }
.held__punkte button.ist-aktiv::before { background: #fff; transform: scale(1.35); }

/* ── Privat und Gewerbe ── */
.bereiche { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalt); padding: var(--spalt) var(--spalt) 0; }
.bereich { position: relative; min-height: min(80vh, 760px); overflow: hidden; color: #fff; display: flex; align-items: flex-end; border-radius: var(--radius); }
.bereich__bild { position: absolute; inset: 0; }
.bereich__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--kurve); }
.bereich:hover .bereich__bild img { transform: scale(1.04); }
.bereich__text { position: relative; z-index: 1; margin: clamp(16px, 2.5vw, 32px); padding: clamp(24px, 3vw, 40px); max-width: 560px; border-radius: 20px; background: var(--glas-dunkel); border: 1px solid var(--glas-dunkel-rand); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.bereich h2 { font-size: clamp(36px, 4.2vw, 64px); }
.bereich p { font-size: clamp(17px, 1.4vw, 21px); margin: 12px 0 22px; }
.bereich .knoepfe { justify-content: flex-start; }

/* ── Anlagen: Glas-Kacheln über ihrem eigenen, weichgezeichneten Foto ── */
.anlagen { padding: clamp(80px, 9vw, 140px) var(--spalt) 0; }
.anlagen h2 { font-size: clamp(36px, 4.6vw, 64px); padding: 0 var(--rand); }
.anlagen__satz { font-size: clamp(19px, 1.6vw, 24px); color: var(--tinte-2); margin: 12px var(--rand) 40px; }
.kacheln__raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalt); }
.kachel {
  isolation: isolate; overflow: hidden; text-align: center; border-radius: var(--radius);
  padding: clamp(40px, 4.5vw, 56px) 24px 0; min-height: 600px;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 400ms var(--kurve), transform 400ms var(--kurve), filter 400ms var(--kurve), box-shadow 300ms var(--kurve);
}
.kachel::before { content: ''; position: absolute; inset: -60px; z-index: -1; background: var(--bg) center / cover no-repeat; filter: blur(36px) saturate(1.35); opacity: .55; }
.kachel > * { position: relative; z-index: 2; }
.kachel h2 { font-size: clamp(34px, 4vw, 52px); }
.kachel__satz { font-size: clamp(18px, 1.7vw, 24px); margin: 8px 0 20px; }
.kachel .knoepfe { margin-bottom: clamp(24px, 3vw, 40px); }
.kachel__bild { position: relative; width: 100%; max-width: 1100px; margin-top: auto; }
.kachel__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px 14px 0 0; transition: transform 700ms var(--kurve); }
.kachel:hover .kachel__bild img { transform: translateY(-6px); }
.kachel--shop { margin: 0 var(--spalt); min-height: 0; }
.kachel--shop .kachel__bild { max-width: 720px; }
.kachel--shop .kachel__bild img { aspect-ratio: 16 / 9; }
/* Regler-Filter: Treffer heben sich, der Rest tritt zurück */
.anlagen.ist-gefiltert .kachel:not(.ist-treffer) { opacity: .4; filter: saturate(.4); transform: scale(.985); }
.anlagen.ist-gefiltert .kachel.ist-treffer { box-shadow: 0 0 0 2px var(--burgund), var(--schatten); }

/* ── Temperaturregler ── */
.temperatur { border-radius: var(--radius); margin: 0 0 var(--spalt); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; }
.temperatur > * { position: relative; z-index: 2; }
.temperatur h3 { font-size: clamp(26px, 2.6vw, 36px); }
.temperatur__kopf p { margin-top: 10px; color: var(--tinte-2); }
.temperatur__regler output { display: block; font-size: clamp(44px, 5vw, 72px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.temperatur__regler input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--burgund); cursor: pointer; }
.temperatur__skala { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinte-2); margin-top: 4px; }
.temperatur__regler .textknopf { margin-top: 8px; font-size: 15px; }
.temperatur__regler .textknopf[hidden] { display: none; }

/* ── Referenzen: Bildkarten, Beschriftung im Glas ── */
.referenzen { padding: clamp(80px, 9vw, 140px) 0 clamp(64px, 7vw, 100px); }
.referenzen h2, .warum h2, .kontakt h2 { font-size: clamp(36px, 4.6vw, 64px); padding: 0 var(--rand); }
.referenzen__satz { font-size: clamp(19px, 1.6vw, 24px); color: var(--tinte-2); margin: 12px var(--rand) 48px; }
.karten { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 30vw, 440px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px var(--rand) 16px; scroll-padding: 0 var(--rand); scrollbar-width: none; cursor: grab; }
.karten.ist-gegriffen { cursor: grabbing; scroll-snap-type: none; }
.karten::-webkit-scrollbar { display: none; }
.karte { position: relative; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: #ddd; box-shadow: var(--schatten); }
.karte img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 700ms var(--kurve); user-select: none; -webkit-user-drag: none; }
.karte:hover img { transform: scale(1.04); }
.karte figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; color: #fff; font-size: 15px; padding: 14px 18px; border-radius: 14px; background: rgba(20, 20, 22, .24); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.karte figcaption strong { display: block; font-size: 22px; font-weight: 500; }
.karten__pfeile { display: flex; justify-content: flex-end; gap: 12px; padding: 8px var(--rand) 0; }
.pfeil { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glas-rand); background: var(--glas-stark); color: var(--tinte); font-size: 24px; line-height: 1; cursor: pointer; transition: background 200ms, transform 200ms var(--kurve); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pfeil:hover { background: #fff; transform: scale(1.06); }

/* ── Warum ── */
.warum { padding: clamp(80px, 9vw, 140px) var(--rand); }
.warum__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1240px; margin: 56px auto 0; }
.warum__raster > div { border-radius: var(--radius); padding: 28px; }
.warum__raster > div > * { position: relative; z-index: 2; }
.warum h3 { font-size: 22px; margin-bottom: 10px; }
.warum p { color: var(--tinte-2); font-size: 17px; }

/* ── Kontakt ── */
.kontakt { position: relative; isolation: isolate; padding: clamp(80px, 9vw, 140px) var(--rand); overflow: hidden; }
.kontakt::before { content: ''; position: absolute; inset: -80px; z-index: -1; background: url('../images/apart-showroom-werkstatt-800.webp') center / cover; filter: blur(36px) saturate(1.15); opacity: .38; }
.kontakt__satz { color: var(--tinte-2); font-size: clamp(18px, 1.5vw, 22px); margin-top: 12px; }
.kontakt__raster { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 80px); max-width: 1180px; margin: 64px auto 0; }
.kontakt__info h3 { font-size: 20px; margin: 0 0 8px; }
.kontakt__info p { margin-bottom: 28px; color: var(--tinte); }
.kontakt__info a { text-decoration: none; color: var(--burgund); }
.kontakt__formular { border-radius: var(--radius); padding: clamp(24px, 3vw, 44px); }
.kontakt__formular > * { position: relative; z-index: 2; }
.kontakt__formular h3 { font-size: 24px; margin-bottom: 24px; }
#contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld--breit, .formular__hinweis, #contact-submit, .formular__meldung { grid-column: 1 / -1; }
.feld label { font-size: 15px; color: var(--tinte); }
.feld input, .feld select, .feld textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; background: rgba(255, 255, 255, .5); font: inherit; color: var(--tinte); transition: border-color 200ms, background 200ms; }
.feld input:hover, .feld select:hover, .feld textarea:hover { background: rgba(255, 255, 255, .9); }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid #0071e3; outline-offset: 0; border-color: transparent; background: #fff; }
.formular__hinweis { font-size: 14px; color: var(--tinte-2); }
.formular__hinweis a { color: var(--tinte); }
#contact-submit { justify-self: start; }
.formular__meldung { font-size: 15px; min-height: 1.4em; }
.formular__meldung.error { color: var(--burgund); }
.contact-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__danke { display: none; margin-top: 20px; }
.formular__danke.visible { display: block; }

/* ── Fuß: Glas, hell ── */
.fuss { margin: var(--spalt); border-radius: var(--radius); background: rgba(255, 255, 255, .3); color: var(--tinte-2); font-size: 14px; padding: 40px var(--rand) 24px; }
.fuss__spalten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1180px; margin: 0 auto; }
.fuss nav p { color: var(--tinte); font-weight: 500; margin-bottom: 10px; }
.fuss nav a { display: block; text-decoration: none; padding: 4px 0; transition: color 200ms; }
.fuss nav a:hover { color: var(--burgund); }
.fuss__unten { max-width: 1180px; margin: 32px auto 0; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .08); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fuss__unten a { color: var(--tinte); text-decoration: none; }

/* ── Handy-Leiste aus js/main.js ── */
.aw-leiste { display: none; }

/* ================================================================
   Unterseiten
================================================================ */
.n2--unterseite main { padding-top: 64px; }
.pfad { max-width: 1180px; margin: 24px auto 0; padding: 0 var(--rand); font-size: 14px; color: var(--tinte-2); }
.pfad a { color: var(--tinte-2); text-decoration: none; }
.pfad a:hover { color: var(--tinte); text-decoration: underline; }

.seitenkopf { text-align: center; padding: clamp(48px, 6vw, 88px) var(--rand) 32px; }
.seitenkopf h1 { font-size: clamp(48px, 6vw, 88px); }
.seitenkopf__satz { font-size: clamp(19px, 1.8vw, 26px); margin-top: 10px; }
.seitenkopf__hinweis { margin-top: 16px; font-size: 13px; color: var(--tinte-2); }
.modellnav { display: flex; justify-content: center; gap: clamp(16px, 3vw, 44px); margin-top: 44px; overflow-x: auto; padding: 8px; scrollbar-width: none; }
.modellnav::-webkit-scrollbar { display: none; }
.modellnav a { display: grid; justify-items: center; gap: 10px; text-decoration: none; font-size: 15px; min-width: 96px; }
.modellnav img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; box-shadow: var(--schatten); transition: transform 300ms var(--kurve); }
.modellnav a:hover img { transform: translateY(-4px) scale(1.04); }
.modellnav a:hover span { color: var(--burgund); }

.abschnitt { padding: clamp(56px, 6vw, 96px) var(--rand) 0; }
.abschnitt h2, .vergleich h2, .schritte h2, .faq h2, .daten h2, .weitere h2 { font-size: clamp(34px, 4.2vw, 56px); }
.abschnitt__satz { text-align: center; color: var(--tinte-2); font-size: clamp(18px, 1.5vw, 22px); margin: 10px auto 0; max-width: 60ch; }

.vergleich { padding: clamp(64px, 7vw, 112px) var(--rand); }
.vergleich__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1240px; margin: 48px auto 0; }
.modell { border-radius: var(--radius); padding: 20px 20px 28px; text-align: center; display: flex; flex-direction: column; }
.modell > * { position: relative; z-index: 2; }
.modell__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.modell__typ { margin-top: 20px; font-size: 15px; color: var(--tinte-2); }
.modell h3 { font-size: 28px; margin-top: 4px; }
.modell__wert { font-size: 22px; margin: 14px 0 18px; }
.modell__daten { margin: 0 0 24px; display: grid; gap: 14px; }
.modell__daten dt { font-size: 14px; color: var(--tinte-2); }
.modell__daten dd { margin: 2px 0 0; font-size: 17px; }
.modell .knoepfe { margin-top: auto; }

.schritte { padding: clamp(80px, 9vw, 140px) var(--rand) 0; }
.schritte__liste { list-style: none; padding: 0; margin: 48px auto 0; max-width: 1240px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: schritt; }
.schritte__liste li { border-radius: var(--radius); padding: 28px 24px; counter-increment: schritt; }
.schritte__liste li > * { position: relative; z-index: 2; }
.schritte__liste li::before { content: counter(schritt); position: relative; z-index: 2; display: block; font-size: 40px; font-weight: 500; color: var(--burgund); line-height: 1; margin-bottom: 18px; }
.schritte__liste h3 { font-size: 20px; margin-bottom: 8px; }
.schritte__liste p { font-size: 16px; color: var(--tinte-2); }

.faq { padding: clamp(80px, 9vw, 140px) var(--rand) 0; }
.faq__liste { max-width: 900px; margin: 48px auto 0; border-radius: var(--radius); padding: 8px 32px; }
.faq__kategorie { font-size: 24px; margin: 36px 0 6px; color: var(--burgund); }
.faq details { border-bottom: 1px solid rgba(0, 0, 0, .08); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-size: 20px; font-weight: 500; position: relative; transition: color 200ms; }
.faq summary:hover { color: var(--burgund); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 300; color: var(--burgund); transition: transform 300ms var(--kurve); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--tinte); max-width: 70ch; animation: einblenden 350ms var(--kurve); }
.faq details a:not(.knopf) { color: var(--burgund); }
@keyframes einblenden { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.text-mittig { max-width: 820px; margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--rand) clamp(64px, 7vw, 112px); text-align: center; }
.text-mittig h2 { font-size: clamp(34px, 4.2vw, 56px); margin-bottom: 24px; }
.text-mittig p { font-size: clamp(19px, 1.6vw, 22px); color: var(--tinte); }
.text-mittig p + p { margin-top: 16px; }
.text-mittig a:not(.knopf) { color: var(--burgund); }

.produktkopf { text-align: center; padding: clamp(40px, 5vw, 72px) var(--rand) 0; }
.produktkopf__art { font-size: 17px; color: var(--burgund); }
.produktkopf h1 { font-size: clamp(56px, 8vw, 120px); margin-top: 6px; }
.produktkopf__satz { font-size: clamp(20px, 2vw, 28px); margin: 12px 0 28px; }
.produktkopf__bild { position: relative; max-width: 1200px; margin: clamp(32px, 4vw, 56px) auto 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.produktkopf__bild img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.eckdaten { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: clamp(48px, 6vw, 88px) auto; padding: 0 var(--rand); text-align: center; gap: 24px; }
.eckdaten__wert { font-size: clamp(34px, 4vw, 56px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.eckdaten p:not(.eckdaten__wert) { color: var(--tinte-2); margin-top: 6px; }

.daten { padding: clamp(64px, 7vw, 112px) var(--rand) 0; }
.daten__liste { max-width: 900px; margin: 48px auto 0; padding: 12px 36px; border-radius: var(--radius); display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.daten__liste div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.daten__liste div:nth-last-child(-n + 2) { border-bottom: 0; }
.daten__liste dt { color: var(--tinte-2); }
.daten__liste dd { margin: 0; text-align: right; }

.weitere { padding: clamp(80px, 9vw, 140px) var(--rand) 0; }
.weitere__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 48px auto 0; }
.weitere__karte { display: grid; gap: 4px; text-decoration: none; text-align: center; }
.weitere__bild { position: relative; display: block; border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; box-shadow: var(--schatten); }
.weitere__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 600ms var(--kurve); }
.weitere__karte:hover img { transform: scale(1.04); }
.weitere__karte .ki { color: #fff; }
.weitere__karte strong { font-size: 22px; font-weight: 500; }
.weitere__karte span:not(.ki) { color: var(--tinte-2); }

.produkte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 40px auto 0; }
.produkt { border-radius: var(--radius); padding: 20px 20px 28px; text-align: center; display: flex; flex-direction: column; }
.produkt > * { position: relative; z-index: 2; }
.produkt figure { position: relative; }
.produkt img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.produkt h3 { font-size: 22px; margin-top: 18px; }
.produkt p { color: var(--tinte-2); margin: 8px 0 18px; font-size: 16px; }
.produkt .knoepfe { margin-top: auto; }

.spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1180px; margin: 48px auto 0; }
.spalten--4 { grid-template-columns: repeat(4, 1fr); }
.spalten > div { border-radius: var(--radius); padding: 28px; }
.spalten > div > * { position: relative; z-index: 2; }
.spalten h3 { font-size: 22px; margin-bottom: 10px; }
.spalten p, .spalten li { font-size: 17px; color: var(--tinte); }
.spalten ul { margin: 0; padding-left: 20px; }
.spalten a:not(.knopf) { color: var(--burgund); }

.zeitstrahl { list-style: none; padding: 0; max-width: 900px; margin: 48px auto 0; display: grid; gap: 16px; }
.zeitstrahl > li { display: grid; grid-template-columns: 120px 1fr; gap: 24px; border-radius: var(--radius); padding: 24px 28px; }
.zeitstrahl > li > * { position: relative; z-index: 2; }
.zeitstrahl .jahr { font-size: 34px; font-weight: 500; color: var(--burgund); line-height: 1; }
.zeitstrahl h3 { font-size: 22px; margin-bottom: 8px; }
.zeitstrahl p { color: var(--tinte); }
.zeitstrahl ul { margin: 8px 0 0; padding-left: 18px; color: var(--tinte); }

.textblock { max-width: 780px; margin: 0 auto; padding: 0 var(--rand); }
.textblock h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 64px 0 16px; }
.textblock h3 { font-size: 22px; margin: 32px 0 10px; }
.textblock p { margin: 0 0 16px; }
.textblock .lead { font-size: 21px; color: var(--tinte-2); }
.textblock ul, .textblock ol { padding-left: 22px; margin: 0 0 16px; }
.textblock li { margin-bottom: 6px; }
.textblock a:not(.knopf) { color: var(--burgund); }
.textblock figure { position: relative; margin: 24px 0; border-radius: var(--radius); overflow: hidden; }
.textblock blockquote { margin: 24px 0; padding: 20px 24px; border-left: 4px solid var(--burgund); background: var(--glas); border-radius: 0 14px 14px 0; font-size: 20px; }
.textblock blockquote p { margin: 0; }
.textblock blockquote cite { display: block; margin-top: 8px; font-style: normal; font-size: 15px; color: var(--tinte-2); }
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 24px 0; padding: 20px; border-radius: 14px; text-align: center; }
.fakten div { position: relative; z-index: 2; }
.fakten dt { font-size: 26px; font-weight: 500; color: var(--burgund); }
.fakten dd { margin: 4px 0 0; font-size: 14px; color: var(--tinte-2); }

.rechtstext { max-width: 820px; margin: 0 auto; padding: 0 var(--rand) clamp(64px, 7vw, 112px); }
.rechtstext h2, .rechtstext .impressum-block-title, .rechtstext .dsgvo-block-title { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; margin: 48px 0 12px; }
.rechtstext h3 { font-size: 20px; margin: 28px 0 8px; }
.rechtstext p, .rechtstext li { font-size: 17px; margin: 0 0 10px; }
.rechtstext a:not(.knopf) { color: var(--burgund); }
.rechtstext .dsgvo-note, .rechtstext .impressum-note { background: var(--glas); border: 1px solid var(--glas-rand); border-radius: 12px; padding: 16px 20px; font-size: 15px; margin: 12px 0; }
.rechtstext .back-link, .rechtstext .impressum-eyebrow, .rechtstext .dsgvo-eyebrow { display: none; }

/* ── Einblenden beim Scrollen ── */
.js-bewegung [data-auftritt] { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--kurve), transform 800ms var(--kurve); }
.js-bewegung [data-auftritt].ist-sichtbar { opacity: 1; transform: none; }
.js-bewegung .kippt[data-auftritt].ist-sichtbar { transition: opacity 800ms var(--kurve), transform 320ms var(--kurve); }

/* ── Weniger Bewegung ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.n2::before { animation: none; }
  .held__bild, .held__bild img, .held__bilder { transition: none; }
  .js-bewegung [data-auftritt] { opacity: 1; transform: none; transition: none; }
  .faq details p { animation: none; }
}

/* ── Tablet ── */
@media (max-width: 1100px) {
  .vergleich__raster { grid-template-columns: 1fr 1fr; }
  .schritte__liste { grid-template-columns: 1fr 1fr; }
  .warum__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --blur: 22px; }
  .kacheln__raster { grid-template-columns: 1fr; }
  .kachel { min-height: 0; }
  .bereiche { grid-template-columns: 1fr; }
  .bereich { min-height: 520px; }
  .temperatur { grid-template-columns: 1fr; }
  .kontakt__raster { grid-template-columns: 1fr; }
  .fuss__spalten { grid-template-columns: 1fr 1fr; }
  .menue__spalten { grid-template-columns: 1fr; gap: 24px; }
  .produkte, .spalten, .spalten--4 { grid-template-columns: 1fr 1fr; }
}

/* ── Handy ── */
@media (max-width: 600px) {
  :root { --blur: 16px; }
  body.n2 { font-size: 17px; }
  body.n2::before { filter: blur(40px); animation: none; }
  .kopf__aktion { font-size: 15px; }
  .held__text { right: var(--rand); bottom: 100px; padding: 20px; }
  .held__punkte { left: var(--rand); right: auto; bottom: 28px; }
  .held__bild .ki { top: auto; bottom: 36px; }
  .bereich__text { margin: 12px; }
  .kachel { padding-top: 36px; }
  .kachel::before { filter: blur(30px); }
  .kachel__bild img { aspect-ratio: 4 / 3; }
  .karten { grid-auto-columns: 78vw; }
  .warum__raster { grid-template-columns: 1fr; gap: 16px; }
  #contact-form { grid-template-columns: 1fr; }
  .fuss__spalten { grid-template-columns: 1fr; }
  .modellnav { justify-content: flex-start; }
  .vergleich__raster, .schritte__liste, .weitere__raster, .produkte, .spalten, .spalten--4 { grid-template-columns: 1fr; }
  .eckdaten { grid-template-columns: 1fr; }
  .daten__liste { grid-template-columns: 1fr; padding: 8px 20px; }
  .daten__liste div:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(0, 0, 0, .08); }
  .daten__liste div:last-child { border-bottom: 0; }
  .faq__liste { padding: 4px 18px; }
  .produktkopf__bild img { aspect-ratio: 4 / 3; }
  .zeitstrahl > li { grid-template-columns: 1fr; gap: 8px; }
  .aw-leiste { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .72); border-top: 1px solid rgba(0, 0, 0, .06); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .aw-leiste a, .aw-leiste button { flex: 1; min-height: 46px; border-radius: 980px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font: 400 16px 'Jost', sans-serif; border: 1px solid var(--burgund); }
  .aw-leiste__anrufen { background: rgba(255, 255, 255, .8); color: var(--burgund); }
  .aw-leiste__anfrage { background: var(--burgund); color: #fff; }
  .aw-leiste .fas { display: none; }
  body.hat-aw-leiste { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* Unterseiten: Kopfzeile von Anfang an hell mit dunkler Schrift (kein Übergang nötig) */
.n2--unterseite .kopf { background: rgba(255, 255, 255, .45); color: var(--tinte); border-bottom-color: rgba(255, 255, 255, .6); }
.n2--unterseite .kopf .logo-hell { display: none; }
.n2--unterseite .kopf .logo-dunkel { display: block; }

/* Hero-Überschrift: Zeile 1 „Wellness“, Zeile 2 „von 2 bis 110 Grad.“ */
.held h1 { white-space: nowrap; }
.held__text { max-width: 920px; }
@media (max-width: 760px) { .held h1 { white-space: normal; font-size: clamp(34px, 9.5vw, 48px); } }

/* ================================================================
   Hooks gegen die drei Hürden: Scheu vor dem Anruf, Scheu vor dem
   ersten Kontakt, Angst vor Datenfreigabe (Stand 20.10.2026)
================================================================ */
[hidden] { display: none !important; }

/* ── Kontakt auf Ihre Art: vier gleichwertige Wege ── */
.wege { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 40px); max-width: 1180px; margin: clamp(48px, 5vw, 72px) auto 0; }
.weg { display: grid; gap: 12px; justify-items: center; align-content: start; text-align: center; padding: clamp(32px, 3vw, 44px) 28px; min-height: 250px; border-radius: var(--radius); text-decoration: none; color: var(--tinte); transition: transform 300ms var(--kurve); }
.weg > * { position: relative; z-index: 2; }
.weg:hover { transform: translateY(-4px); }
.weg__symbol { width: 64px; height: 64px; padding: 16px; border-radius: 50%; background: rgba(141, 3, 3, .08); fill: var(--burgund); margin-bottom: 6px; transition: background 300ms; }
.weg:hover .weg__symbol { background: rgba(141, 3, 3, .14); }
.weg strong { font-size: 22px; font-weight: 500; }
.weg span { font-size: 16px; color: var(--tinte-2); line-height: 1.45; max-width: 24ch; }
.kontakt .kontakt__raster { margin-top: clamp(80px, 8vw, 128px); }
.ablauf { padding: clamp(28px, 3vw, 40px); border-radius: var(--radius); }
.ablauf > * { position: relative; z-index: 2; }
.ablauf h3 { font-size: 22px; margin-bottom: 16px; }
.ablauf ol { margin: 0; padding-left: 22px; color: var(--tinte); font-size: 17px; }
.ablauf li + li { margin-top: 12px; }
.kontakt__check { max-width: 820px; margin: 40px auto 0; color: var(--tinte-2); font-size: 16px; }
.kontakt__check a { color: var(--burgund); }

/* ── Formular: wenig Pflicht, Antwortweg wählbar, Vertrauenszeile ── */
.formular__satz { color: var(--tinte-2); margin: -16px 0 20px; font-size: 16px; }
.feld label small, .feld legend small { display: block; font-size: 13px; color: var(--tinte-2); font-weight: 400; }
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }
.feld legend { font-size: 15px; color: var(--tinte); padding: 0; margin-bottom: 6px; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 980px; border: 1px solid rgba(0, 0, 0, .12); background: rgba(255, 255, 255, .5); cursor: pointer; font-size: 16px; color: var(--tinte); transition: background 200ms, border-color 200ms, color 200ms; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label:hover { background: rgba(255, 255, 255, .9); }
.wahl label.ist-gewaehlt, .wahl label:has(input:checked) { background: var(--burgund); border-color: var(--burgund); color: #fff; }
.wahl input:focus-visible + span { outline: 3px solid #0071e3; outline-offset: 8px; border-radius: 4px; }
.feld .ist-fehler { border-color: var(--burgund); background: rgba(141, 3, 3, .06); }
.formular__hinweis strong { color: var(--tinte); font-weight: 500; }
#contact-form .formular__meldung:empty { display: none; }

/* ── Fuß: Folgen und Vertrauenszeile ── */
.fuss__spalten { grid-template-columns: repeat(5, 1fr); }
.fuss__folgen a { display: flex; align-items: center; gap: 8px; }
.fuss__folgen svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.fuss__vertrauen { width: 100%; color: var(--tinte); font-weight: 500; }

/* ── Startseite: Einladung ohne Hürde ── */
.einladung { padding: clamp(40px, 5vw, 80px) var(--rand) 0; }
.einladung__glas { max-width: 980px; margin: 0 auto; padding: clamp(32px, 4vw, 56px); border-radius: var(--radius); text-align: center; }
.einladung__glas > * { position: relative; z-index: 2; }
.einladung h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 16px; }
.einladung p { font-size: clamp(18px, 1.5vw, 21px); max-width: 60ch; margin: 0 auto 24px; color: var(--tinte); }
.einladung__zeile { margin: 20px auto 0; font-size: 15px; color: var(--tinte-2); }

/* ── Raum-Check ── */
.check { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; max-width: 1180px; margin: 24px auto 0; padding: 0 var(--rand); align-items: start; }
.check__form, .check__ergebnis { border-radius: var(--radius); padding: clamp(24px, 3vw, 40px); display: grid; gap: 18px; align-content: start; }
.check__form > *, .check__ergebnis > * { position: relative; z-index: 2; }
.check h2 { font-size: clamp(28px, 3vw, 40px); }
.check__satz { color: var(--tinte-2); font-size: 16px; margin-top: -8px; }
.check__masse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.einheit { position: relative; }
.einheit input { padding-right: 44px; }
.einheit span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--tinte-2); font-size: 15px; pointer-events: none; }
.ergebnisse { display: grid; gap: 12px; }
.ergebnisse:empty { display: none; }
.ergebnis { padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); }
.ergebnis__status { display: inline-block; font-size: 13px; letter-spacing: .02em; padding: 4px 10px; border-radius: 980px; margin-bottom: 8px; background: rgba(0, 0, 0, .06); color: var(--tinte-2); }
.ergebnis--passt .ergebnis__status { background: rgba(141, 3, 3, .1); color: var(--burgund); }
.ergebnis--knapp .ergebnis__status { background: rgba(226, 164, 98, .3); color: #7a4a00; }
.ergebnis h3 { font-size: 20px; margin-bottom: 6px; }
.ergebnis ul { margin: 0; padding-left: 20px; font-size: 15px; color: var(--tinte); }
.ergebnis li + li { margin-top: 4px; }
.ergebnis__modell { margin-top: 10px; font-size: 15px; }
.ergebnis__modell a { color: var(--burgund); }
.check__hinweis { font-size: 14px; color: var(--tinte-2); }
.check__weiter { display: grid; gap: 14px; }
.check__weiter .knoepfe { justify-content: flex-start; }

/* ── Datenschutz: Kurzfassung ── */
.kurz { max-width: 820px; margin: 0 auto; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); }
.kurz > * { position: relative; z-index: 2; }
.kurz h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
.kurz ul { margin: 0 0 12px; padding-left: 22px; font-size: 17px; color: var(--tinte); }
.kurz li + li { margin-top: 6px; }
.kurz p { font-size: 15px; color: var(--tinte-2); }

@media (max-width: 1000px) {
  .wege { grid-template-columns: 1fr 1fr; }
  .fuss__spalten { grid-template-columns: repeat(3, 1fr); }
  .check { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wege { grid-template-columns: 1fr; gap: 14px; }
  .weg { grid-template-columns: 56px 1fr; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; justify-items: start; text-align: left; min-height: 0; padding: 18px 20px; }
  .weg__symbol { grid-row: 1 / 3; width: 56px; height: 56px; padding: 14px; margin: 0; align-self: center; }
  .weg strong { font-size: 19px; }
  .weg span { font-size: 15px; max-width: none; }
  .kontakt .kontakt__raster { margin-top: 56px; }
  .fuss__spalten { grid-template-columns: 1fr 1fr; }
  .check__masse { grid-template-columns: 1fr 1fr; }
  .aw-leiste__nachricht { background: var(--burgund); color: #fff; }
  .aw-leiste__wa { background: rgba(255, 255, 255, .8); color: var(--burgund); }
  .aw-leiste { transition: transform 300ms var(--kurve), opacity 300ms; }
  .aw-leiste.ist-versteckt { transform: translateY(110%); opacity: 0; pointer-events: none; }
}
/* Formular halbiert: Kontaktspalten gleich breit, Formular kompakt */
.kontakt__raster { grid-template-columns: 1fr 1fr; }
.kontakt__formular h3 { margin-bottom: 20px; }
.formular__satz { margin: -12px 0 16px; }
.kurz a { color: var(--burgund); }
@media (max-width: 1000px) { .kontakt__raster { grid-template-columns: 1fr; } }

/* ── Kontakt: Showroom, Zeiten, Direkt als drei Kacheln; darunter Ablauf neben Formular ── */
.kontakt__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); max-width: 1180px; margin: clamp(56px, 6vw, 96px) auto 0; }
.kontakt__kachel { border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); display: grid; gap: 10px; align-content: start; justify-items: start; }
.kontakt__kachel > * { position: relative; z-index: 2; }
.kontakt__kachel h3 { font-size: 22px; }
.kontakt__kachel p { color: var(--tinte); font-size: 17px; line-height: 1.5; margin: 0; }
.kontakt__kachel a { color: var(--burgund); text-decoration: none; }
.kontakt__kachel a:hover { text-decoration: underline; }
.kontakt__kachel .pfeillink { min-height: 0; margin-top: 2px; }
.kontakt__klein { font-size: 15px; color: var(--tinte-2); }
.kontakt__symbol { width: 48px; height: 48px; padding: 11px; border-radius: 50%; background: rgba(141, 3, 3, .08); fill: var(--burgund); margin-bottom: 4px; }
.kontakt .kontakt__raster { margin-top: clamp(56px, 6vw, 96px); grid-template-columns: 1fr 1.2fr; gap: clamp(20px, 2.5vw, 32px); align-items: start; }
@media (max-width: 1000px) {
  .kontakt__kacheln { grid-template-columns: 1fr; gap: 14px; }
  .kontakt .kontakt__raster { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  .kontakt__kacheln, .kontakt .kontakt__raster { margin-top: 40px; }
  .kontakt__kachel, .ablauf { padding: 22px; }
}

/* ── Startseite: Anlagen als Karussell, Regler darunter, Treffer-Kachel ploppt auf ── */
/* Spalten sind schmaler als die Kacheln: die mittlere steht vorn in voller Größe, die Nachbarn halb so groß dahinter */
.anlagen__karussell { --kachel-breite: clamp(320px, 52vw, 760px); --spalte: calc(var(--kachel-breite) * .78); display: grid; grid-auto-flow: column; grid-auto-columns: var(--spalte); gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 28px calc(50% - var(--spalte) / 2) 32px; scrollbar-width: none; cursor: grab; }
.anlagen__karussell.ist-gegriffen { cursor: grabbing; scroll-snap-type: none; }
.anlagen__karussell::-webkit-scrollbar { display: none; }
.anlagen__karussell:focus-visible { outline: 3px solid #0071e3; outline-offset: -3px; border-radius: var(--radius); }
/* Die Kachel in der Mitte ist groß, die Nachbarn links und rechts werden kleiner (--nah setzt neu2.js beim Scrollen: 1 = mittig, 0 = eine Kachelbreite entfernt) */
.anlagen__karussell .kachel { width: var(--kachel-breite); justify-self: center; scroll-snap-align: center; min-height: 0; padding-top: clamp(32px, 3.5vw, 48px); transform: scale(calc(.5 + .5 * var(--nah, 0))); opacity: calc(.55 + .45 * var(--nah, 0)); transition: box-shadow 300ms var(--kurve), filter 300ms var(--kurve); }
.anlagen__karussell .kachel h2 { font-size: clamp(28px, 3vw, 44px); }
.anlagen__karussell .kachel__satz { font-size: clamp(17px, 1.4vw, 21px); margin-bottom: 16px; }
.anlagen__karussell .kachel .knoepfe { margin-bottom: clamp(20px, 2.5vw, 32px); }
.anlagen__karussell .kachel__bild { max-width: none; }
.anlagen__karussell .kachel__bild img { aspect-ratio: 16 / 10; }
.anlagen__pfeile { justify-content: center; padding-top: 4px; }
.anlagen .temperatur { margin: clamp(32px, 4vw, 56px) var(--spalt) 0; }
.temperatur__treffer { margin-top: 14px; font-size: 17px; color: var(--burgund); font-weight: 500; min-height: 1.5em; }
.temperatur__treffer:empty { display: none; }
@keyframes ploppen { 50% { transform: scale(1.045); } }
.anlagen.ist-gefiltert .kachel.ist-treffer { box-shadow: 0 0 0 3px var(--burgund), var(--schatten); }
.anlagen.ist-gefiltert .anlagen__karussell .kachel:not(.ist-treffer) { opacity: calc(.35 + .3 * var(--nah, 0)); filter: saturate(.4); transform: scale(calc(.5 + .5 * var(--nah, 0))); }
.kachel.ploppt { animation: ploppen 520ms var(--kurve); }
@media (prefers-reduced-motion: reduce) { .kachel.ploppt { animation: none; } }
@media (max-width: 760px) {
  .anlagen__karussell { --kachel-breite: 78vw; padding: 16px calc(50% - var(--spalte) / 2) 20px; }
  .anlagen .temperatur { margin-top: 24px; }
}

/* ── Temperaturband: der farbige Thermometer der alten Seite, jetzt als Regler unter dem Karussell ── */
.temperatur--band { grid-template-columns: 1fr; gap: 20px; }
.temperatur--band .temperatur__kopf p { max-width: 70ch; }
.temperatur__band output { display: block; font-size: clamp(44px, 5vw, 72px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.band { position: relative; height: 48px; display: flex; align-items: center; }
.band::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 14px; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, #2e6e8e 0%, #7fa8b8 22%, #d9c9a8 45%, #c97b4a 68%, var(--burgund) 100%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .6); }
.band input[type="range"] { position: relative; z-index: 1; width: 100%; height: 48px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.band input[type="range"]::-webkit-slider-runnable-track { height: 14px; background: transparent; border: 0; }
.band input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--burgund); box-shadow: 0 2px 10px rgba(0, 0, 0, .28); cursor: grab; }
.band input[type="range"]::-moz-range-track { height: 14px; background: transparent; border: 0; }
.band input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--burgund); box-shadow: 0 2px 10px rgba(0, 0, 0, .28); cursor: grab; }
.band input[type="range"]:focus-visible { outline: 3px solid #0071e3; outline-offset: 6px; border-radius: 999px; }
.temperatur--band .temperatur__skala { margin-top: 2px; }
.band__stops { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 22px; }
.band__stop { background: none; border: 0; border-top: 3px solid var(--farbe, var(--burgund)); padding: 12px 2px 0; font: inherit; text-align: left; cursor: pointer; color: var(--tinte); display: grid; gap: 2px; align-content: start; min-height: 44px; border-radius: 0; transition: color 200ms, transform 200ms var(--kurve); }
.band__stop .band__temp { font-size: 14px; color: var(--tinte-2); }
.band__stop strong { font-weight: 500; font-size: 16px; line-height: 1.2; }
.band__stop:hover { color: var(--burgund); transform: translateY(-2px); }
.band__stop.ist-treffer { color: var(--burgund); }
.band__stop.ist-treffer .band__temp { color: var(--burgund); font-weight: 500; }
.band__stop:focus-visible { outline: 3px solid #0071e3; outline-offset: 4px; }
.temperatur--band .temperatur__treffer { margin-top: 18px; }
.temperatur--band .textknopf { margin-top: 4px; font-size: 15px; }
@media (max-width: 1000px) { .band__stops { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) {
  .band__stops { grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
  .band__stop strong { font-size: 15px; }
}

/* ── Temperaturband als eigener Abschnitt, Marken sind Links ── */
.band-sektion { padding: clamp(40px, 5vw, 80px) var(--spalt) 0; }
.band-sektion .temperatur { margin: 0; }
.temperatur--band h2 { font-size: clamp(26px, 2.6vw, 36px); }
.band__stop { text-decoration: none; }
.anlagen__karussell .kachel.ist-klon { pointer-events: auto; }

/* ================================================================
   Kontaktformular „Drei Fragen“ (Sieger der Entwurfsrunde vom 20.10.2026):
   drei Glaskacheln, Fragen statt Felder, Linien statt Kästen, Häkchen sobald ausgefüllt
================================================================ */
:root { --fokus: #0071e3; }
.kontakt .kontakt__raster.kontakt__raster--voll { grid-template-columns: 1fr; gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
#nachricht { scroll-margin-top: 84px; }
.kontakt__formular.kontakt__formular--stufen { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kontakt__formular--stufen::after { display: none; }
.kontakt__formular--stufen h3 { text-align: center; font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; }
.kontakt__formular--stufen .formular__satz { text-align: center; max-width: 60ch; margin: 0 auto clamp(28px, 3vw, 40px); font-size: clamp(16px, 1.3vw, 18px); }
.kontakt__formular--stufen #contact-form { display: block; }

/* Die drei Stufen: Glas (heller als die Info-Kacheln), Nummer in Burgund, Fokus hebt die Kachel */
.stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); counter-reset: stufe; }
.stufe { min-width: 0; border-radius: var(--radius); padding: clamp(24px, 2.6vw, 36px); counter-increment: stufe; background: color-mix(in srgb, var(--weiss) 64%, transparent); transition: box-shadow 300ms var(--kurve); }
.stufe > * { position: relative; z-index: 2; }
.stufe::before { content: counter(stufe); position: relative; z-index: 2; display: block; font-size: 40px; font-weight: 500; line-height: 1; color: var(--burgund); margin-bottom: 18px; }
.stufe:focus-within { box-shadow: 0 0 0 2px color-mix(in srgb, var(--burgund) 35%, transparent), var(--schatten); }
.stufe fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.stufe legend.stufe__frage { float: left; width: 100%; }
.stufe__frage { display: block; padding: 0; margin: 0 0 18px; min-height: 2.4em; font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--tinte); }
.stufe__frage small { display: inline-block; vertical-align: middle; margin-left: 8px; transform: translateY(-2px); padding: 3px 10px; border-radius: 980px; background: color-mix(in srgb, var(--tinte) 6%, transparent); color: var(--tinte-2); font-size: 13px; font-weight: 400; letter-spacing: .02em; }

/* Eingaben als Schreiblinie statt Kasten */
.stufe__eingabe { display: block; width: 100%; min-width: 0; min-height: 56px; margin: 0; padding: 10px 0 12px; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--tinte) 14%, transparent); border-radius: 0; background: transparent; font-family: inherit; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; color: var(--tinte); -webkit-appearance: none; appearance: none; transition: border-color 200ms var(--kurve); }
.stufe__eingabe::placeholder { color: var(--tinte-2); opacity: .7; }
.stufe__eingabe:hover { border-bottom-color: var(--tinte-2); }
.stufe__eingabe:focus-visible { outline-offset: 6px; border-radius: 4px; border-bottom-color: var(--burgund); }
textarea.stufe__eingabe { resize: vertical; min-height: 88px; max-height: 240px; field-sizing: content; }
@supports (field-sizing: content) { textarea.stufe__eingabe { resize: none; } }
.stufe__eingabe.ist-fehler { border-bottom-color: var(--burgund); }
.stufe.ist-fehler { box-shadow: 0 0 0 2px var(--burgund), var(--schatten); }
.stufe__hinweis { display: block; margin: 10px 0 0; font-size: 15px; line-height: 1.4; color: var(--tinte-2); }
.stufe__hinweis.ist-fehlertext { color: var(--burgund); font-weight: 500; }
.stufe__betreff { display: block; margin-top: 10px; font-size: 14px; color: var(--tinte-2); }
.stufe__ziel + .stufe__ziel { margin-top: 18px; }

/* Antwortweg als Kapsel mit drei Segmenten */
.stufe__wahl { display: flex; gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 980px; background: color-mix(in srgb, var(--weiss) 50%, transparent); border: 1px solid var(--glas-rand); }
.stufe__wahl label { position: relative; flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 8px; border-radius: 980px; font-size: 15px; color: var(--tinte); cursor: pointer; white-space: nowrap; transition: background 200ms var(--kurve), color 200ms var(--kurve); }
.stufe__wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.stufe__wahl label:hover { background: color-mix(in srgb, var(--weiss) 90%, transparent); }
.stufe__wahl label.ist-gewaehlt, .stufe__wahl label:has(input:checked) { background: var(--burgund); color: var(--weiss); }
.stufe__wahl label:has(input:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 2px; }

/* Häkchen oben rechts, sobald die Stufe ausgefüllt ist (Klasse von formular.js; ohne JS über :has) */
.stufe .stufe__haken { position: absolute; top: clamp(22px, 2.4vw, 32px); right: clamp(22px, 2.4vw, 32px); z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: var(--burgund); color: var(--weiss); display: grid; place-items: center; opacity: 0; transform: scale(.5); transition: opacity 250ms var(--kurve), transform 350ms cubic-bezier(.2, 1.4, .4, 1); }
.stufe__haken svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.stufe.ist-fertig .stufe__haken { opacity: 1; transform: scale(1); }
#contact-form:not(.hat-js) .stufe:has(.stufe__eingabe:not(:placeholder-shown)) .stufe__haken { opacity: 1; transform: scale(1); }

/* Abschluss: Knopf mittig, Beruhigung, Zusagen, Datenschutz */
.stufen__abschluss { display: grid; justify-items: center; gap: 14px; margin-top: clamp(28px, 3.5vw, 48px); text-align: center; }
.kontakt__formular--stufen #contact-submit { justify-self: center; min-height: 54px; padding: 0 36px; font-size: 18px; }
.kontakt__formular--stufen #contact-submit:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.kontakt__formular--stufen .formular__meldung { max-width: 56ch; font-size: 16px; }
.formular__beruhigung { margin: 0; font-size: 15px; color: var(--tinte-2); }
.vertrauen { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 15px; font-weight: 500; color: var(--tinte); }
.vertrauen li { display: inline-flex; align-items: center; gap: 8px; }
.vertrauen li::before { content: ''; width: 6px; height: 11px; margin-top: -3px; border: solid var(--burgund); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kontakt__formular--stufen .formular__hinweis { max-width: 62ch; margin: 0; font-size: 14px; color: var(--tinte-2); }

/* Dankes-Zustand */
.kontakt__formular--stufen .formular__danke { margin: 0 auto; max-width: 720px; border-radius: var(--radius); padding: clamp(32px, 4vw, 56px); text-align: center; }
.kontakt__formular--stufen .formular__danke.visible { display: grid; justify-items: center; gap: 12px; }
.kontakt__formular--stufen .formular__danke > * { position: relative; z-index: 2; }
.kontakt__formular--stufen .formular__danke p { max-width: 48ch; color: var(--tinte); }
.danke__symbol { width: 60px; height: 60px; padding: 16px; border-radius: 50%; background: color-mix(in srgb, var(--burgund) 8%, transparent); color: var(--burgund); margin-bottom: 6px; }
.danke__symbol svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.danke__titel { font-size: clamp(22px, 2.2vw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.danke__titel strong { font-weight: inherit; }

/* Ablauf unter dem Formular als ruhige Leiste mit drei Spalten */
.kontakt__raster--voll .ablauf { padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px); }
.kontakt__raster--voll .ablauf h3 { font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 20px; }
.kontakt__raster--voll .ablauf ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 36px); font-size: 16px; color: var(--tinte-2); }
.kontakt__raster--voll .ablauf li { margin: 0; padding-top: 14px; border-top: 2px solid color-mix(in srgb, var(--burgund) 14%, transparent); line-height: 1.45; }
.kontakt__raster--voll .ablauf li strong { display: block; margin-bottom: 4px; font-size: 18px; font-weight: 500; color: var(--tinte); }

@media (prefers-reduced-motion: reduce) {
  .stufe, .stufe__eingabe, .stufe__wahl label, .stufe .stufe__haken { transition: none; }
}
@media (max-width: 1100px) {
  .stufen { grid-template-columns: 1fr; gap: 14px; }
  .stufe__frage { min-height: 0; }
  .kontakt__raster--voll .ablauf ol { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  .stufe { padding: 22px; }
  .stufe::before { font-size: 32px; margin-bottom: 12px; }
  .stufe__frage { font-size: 21px; margin-bottom: 14px; }
  .stufe .stufe__haken { top: 20px; right: 20px; }
  .stufe__eingabe { font-size: 19px; min-height: 52px; }
  .kontakt__formular--stufen #contact-submit { width: 100%; }
  .vertrauen { gap: 6px 14px; font-size: 14px; }
  .kontakt__raster--voll .ablauf { padding: 22px; }
}

/* ── Korrekturen aus der Launch-Prüfung (20.10.2026) ── */
/* Pause-Knopf der Diashow */
.held__pause { display: grid; place-items: center; color: #fff; }
.held__pause svg { width: 14px; height: 14px; fill: currentColor; opacity: .85; }
.held__pause:hover svg { opacity: 1; }
.held__pause.ist-angehalten svg rect:last-child { display: none; }
.held__pause.ist-angehalten svg rect:first-child { x: 5px; width: 6px; }
/* Lesbarkeit von weißem Text über hellen Fotos */
.karte figcaption { background: rgba(20, 20, 22, .55); }
.bereich__text { background: rgba(18, 18, 20, .55); }
/* Kleintexte im Kontaktbereich liegen auf dem weichgezeichneten Showroom-Foto: dunkler setzen */
.stufe__hinweis, .stufe__betreff, .formular__beruhigung, .kontakt__formular--stufen .formular__hinweis, .kontakt__check, .weg span, .kontakt__klein { color: #4a4a4f; }