/* ============================================================
   global.css: Technik-Geruest + Design-Tokens der Site.

   WICHTIG: Die :root-Bloecke unten sind die EINZIGE Stelle, an der
   Design lebt (Farben, Font, Typo-Scale, Abstaende, Radien, Schatten,
   Motion). Sections referenzieren nur Tokens, nie Literale.

   Nicht verhandelbar (Qualitaets-Untergrenzen, KEIN Design):
   Body-Schrift nie unter 17px, Touch-Targets min. 44px, WCAG-AA-
   Kontrast, Animationen nur mit transform + opacity.

   Fonts: self-hosted via css/fonts.css (DSGVO), NIE fonts.googleapis.com.
   ============================================================ */

/* ── CI Coolwerk · Richtung "Nachtblau Cinematic" (Redesign 2026-07-21) ──
   Charakter: dunkel, premium, cinematisch. Gebaut aus der echten Marke des
   Kunden (Markenleitfaden): Nachtblau als Grund, Stahlblau als einziger
   Akzent, Weiss als Kontrast. KEIN Koenigsblau (war Baukasten-Default).
   Tiefe entsteht aus geschichteten, blau getoenten Schatten + Flaechen-
   kontrast; Motion ist ruhig, weich, mit dezenter Feder. Das Logo entsteht
   im Video oben auf Nachtblau (das Video verschmilzt mit der Flaeche).
   Display-Headlines: Righteous (Coolvetica-nahe, OFL) — nur Hero/gross.
   Vollstaendige Referenz: ci.md
   ------------------------------------------------------------------ */
:root {
  /* ── Marken-Palette (Markenleitfaden) ── */
  --brand-night:            #18232A;  /* Logo-Nachtblau: Grundfarbe der Marke */
  --brand-steel:            #4F758B;  /* Logo-Stahlblau: der einzige Akzent    */

  /* ── Dunkle Flaechen-Leiter (Grund der cinematischen Seiten) ── */
  --color-ink:              #0F171C;  /* tiefste Ebene: Body-Grund (.theme-dark) */
  --color-night:            #18232A;  /* Logo-Nachtblau: Haupt-Sektionsflaeche   */
  --color-night-2:          #1E2C35;  /* elevated: Cards auf Dunkel              */
  --color-night-3:          #26363F;  /* hover / obere Kante auf Dunkel          */
  --color-border-dark:      rgba(146, 178, 199, 0.16);  /* Haarlinie auf Dunkel  */
  --color-border-dark-strong: rgba(146, 178, 199, 0.30);

  /* ── Stahlblau-Leiter (Akzent) ── */
  --color-steel:            #4F758B;  /* Marken-Stahlblau: Akzentflaechen        */
  --color-steel-bright:     #7CA6BF;  /* helleres Stahlblau: Icons/aktiv auf Dunkel */
  --color-steel-on-dark:    #9DBDCF;  /* Links/Eyebrow AUF Nachtblau (>7:1)      */
  --color-steel-deep:       #3B5A6B;  /* gedrueckt/dunkler                        */

  /* ── Aktionsfarbe auf HELL (Links, Preise, CTA auf Papier) ── */
  --color-brand-main:       #2C5266;  /* tiefes Stahlblau, ~7:1 auf Weiss         */
  --color-brand-darker:     #21404F;  /* Hover/Aktiv                              */
  --color-brand-lighter:    #3E6E86;  /* heller Akzent auf Hell                   */
  --color-brand-subtle:     #E7EEF2;  /* Stahl-Tint, btn-secondary hover          */
  --color-brand-steel:      #4F758B;  /* Kompat: Alt-Name, = --color-steel        */
  --color-brand-on-dark:    #9DBDCF;  /* Kompat: Alt-Name, = --color-steel-on-dark */

  /* ── Helle Flaechen (Content-Cards/Tabellen, auch auf Dunkel) ── */
  --color-bg-light:         #F4F7F9;  /* Papier: Grund heller (Alt-)Seiten        */
  --color-bg-dark:          #18232A;  /* Kompat: Alt-Name, = --color-night        */
  --color-bg-card:          #FFFFFF;  /* Card auf Hell                            */
  --color-bg-accent:        #E9EEF2;  /* abgesetzter heller Streifen             */
  --color-border:           #D3DDE4;  /* Haarlinie auf Hell                       */

  /* ── Text ── */
  --color-heading:          #16212A;  /* Ueberschriften auf Hell (Nachtblau)      */
  --color-body:             #3A4A54;  /* Fliesstext auf Hell (9:1)                */
  --color-text-muted:       #5B6C77;  /* Meta/Sublines auf Hell (5:1)             */
  --color-mist:             #E6EDF1;  /* Fliesstext auf Dunkel (13:1)             */
  --color-mist-dim:         #A8BCC7;  /* Meta/Sublines auf Dunkel (7:1)           */
  --color-off-white:        #E6EDF1;  /* Kompat: Alt-Name, = --color-mist         */
  --color-success:          #3FA372;  /* "ENTHALTEN"-Haken: funktionales Gruen    */
  --color-error:            #E2807F;  /* Formular-Fehlerkante auf Dunkel (4.5:1)  */

  /* ── Typografie ──
     Display: Righteous (retro-geometrisch, Coolvetica-nah) — NUR Hero + grosse
     Headlines, als Marken-Signal. Body/UI: IBM Plex Sans (Ingenieurs-Sans mit
     Tabellenziffern fuer die Preise). */
  --font-display:           'Righteous', 'IBM Plex Sans', -apple-system, sans-serif;
  --font-main:              'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-weight-heading:    600;
  --letter-spacing-h1:      -0.02em;
  --letter-spacing-h2:      -0.015em;
  --letter-spacing-display: 0.005em;  /* Righteous laeuft eng, minimal oeffnen */
  --font-size-body:         17px;
  --line-height-body:       1.7;
  --line-height-heading:    1.06;
  --font-size-h1:           72px;
  --font-size-h1-md:        52px;
  --font-size-h1-sm:        38px;
  --font-size-h2:           44px;
  --font-size-h2-md:        36px;
  --font-size-h2-sm:        29px;
  --font-size-h3:           28px;
  --font-size-h3-sm:        23px;
  --font-size-h4:           21px;
  --font-size-h5:           18px;
  --font-size-eyebrow:      13px;     /* einzige erlaubte Ausnahme unter 17px */

  /* ── Layout + Abstaende ── grosszuegig fuer den Premium-Eindruck. */
  --max-width:              1200px;
  --container-padding:      40px;
  --container-padding-sm:   20px;
  --section-padding:        112px 40px;
  --section-padding-mobile: 64px 20px;
  --header-gap-eyebrow:     14px;
  --header-gap-title:       18px;
  --header-gap-subline:     36px;

  /* ── Form + Tiefe ── gerundet = modern/premium (Bruch zum eckigen Alt-Look). */
  --radius-s:               10px;   /* Buttons, Inputs, Pills */
  --radius-m:               16px;   /* Cards, Bilder          */
  --radius-l:               24px;   /* grosse Panels          */
  --radius-pill:            999px;

  /* Schatten geschichtet + nachtblau getoent (kein flaches Standard-Grau). */
  --shadow-card:  0 1px 2px rgba(16, 33, 42, 0.06), 0 14px 30px -16px rgba(16, 33, 42, 0.18);
  --shadow-float: 0 2px 6px rgba(16, 33, 42, 0.08), 0 28px 56px -22px rgba(16, 33, 42, 0.30);
  --shadow-dark:  0 2px 10px rgba(0, 0, 0, 0.35), 0 34px 64px -26px rgba(0, 0, 0, 0.62);
  --glow-steel:   0 0 70px -14px rgba(124, 166, 191, 0.5);

  /* ── Motion ── ruhig, weich, dezente Feder (premium, nicht hektisch). */
  --ease-out:               cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:            cubic-bezier(0.34, 1.32, 0.5, 1);
  --duration-fast:          0.2s;
  --duration-med:           0.4s;
  --reveal-duration:        0.7s;
  --reveal-distance:        18px;
  /* Page-Load-Eingang (Markup: data-enter). Etwas weiter und langsamer als die
     Scroll-Reveals, damit der Seitenkopf als EINE Bewegung liest, nicht als
     mehrere Einzeleffekte. Das Kaltlicht geht am langsamsten auf. */
  --enter-duration:         0.72s;
  --enter-distance:         24px;
  --enter-glow-duration:    1.4s;
}

@media (max-width: 1024px) {
  :root {
    --font-size-h1: var(--font-size-h1-md);
    --font-size-h2: var(--font-size-h2-md);
    --section-padding: 88px 40px;
  }
}
@media (max-width: 767px) {
  :root {
    /* Mobil: das horizontale Innenmass kommt AUSSCHLIESSLICH von .container (20px).
       Sections duerfen seitlich nicht zusaetzlich polstern, sonst stapelt es sich. */
    --section-padding: 64px 0;
    --font-size-h1: var(--font-size-h1-sm);
    --font-size-h2: var(--font-size-h2-sm);
    --font-size-h3: var(--font-size-h3-sm);
    --container-padding: var(--container-padding-sm);
    --header-gap-subline: 28px;
  }
}

/* ============================================================
   Ab hier nur noch Technik: alles referenziert Tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* KEIN scroll-behavior: smooth (kollidiert mit Lenis, Phase 5). */

/* Scroll-Anchoring aus (Bugfix 2026-08-31): Beim Reload standen die
   data-enter-Elemente noch auf opacity: 0, dadurch waehlte Chrome einen anderen
   Ankerknoten und korrigierte die Scrollposition - man landete auf schmalen
   Viewports ~118px (Startseite) bzw. ~87px (Unterseiten) unterhalb des Seitenanfangs,
   obwohl man oben war. Auf Desktopbreiten trat es nicht auf.
   Vertretbar, weil die Seite kein Layout-Shift-Problem hat, gegen das Anchoring
   schuetzen muesste: alle Bilder tragen width/height, gemessener CLS = 0.
   Die normale Scroll-Wiederherstellung (runtergescrollt -> neu laden -> Position
   bleibt) funktioniert davon unabhaengig weiter. */
html { overflow-anchor: none; }

body {
  font-family: var(--font-main);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-body);
  background: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cinematische Seiten opten in den dunklen Grund (index, klimaanlagen, montage).
   Alt-Seiten ohne diese Klasse bleiben hell und unveraendert lauffaehig. */
body.theme-dark { background: var(--color-ink); color: var(--color-mist); }

h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
}
h1 { font-size: var(--font-size-h1); letter-spacing: var(--letter-spacing-h1); }
h2 { font-size: var(--font-size-h2); letter-spacing: var(--letter-spacing-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }

/* Display-Utility: Righteous fuer grosse Marken-Headlines (Hero, Signature). */
.font-display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--letter-spacing-display); }

a { color: var(--color-brand-main); text-decoration: none; }
a:hover { color: var(--color-brand-darker); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-steel-bright);
  outline-offset: 2px;
  border-radius: 3px;
}

img { max-width: 100%; display: block; }

/* Tabellenziffern: jede Zahl, die als Argument auftritt (Preise), fluchtet vertikal. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 1; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ── Buttons ── Look komplett aus Tokens. min-height 48px = Touch-Target. */
.btn-primary, .btn-secondary, .btn-on-dark, .btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-spring),
    box-shadow var(--duration-fast) ease;
}
.btn-primary { background: var(--color-brand-main); color: #fff; box-shadow: 0 10px 24px -12px rgba(44, 82, 102, 0.7); }
.btn-primary:hover { background: var(--color-brand-darker); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(44, 82, 102, 0.8); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: transparent; color: var(--color-brand-main); box-shadow: inset 0 0 0 1.5px var(--color-border); }
.btn-secondary:hover { background: var(--color-brand-subtle); box-shadow: inset 0 0 0 1.5px var(--color-brand-lighter); }
.btn-secondary:active { transform: translateY(1px); }
/* Auf dunklen Flaechen: weisser Primaer-Button (max. Kontrast, premium). */
.btn-on-dark { background: #fff; color: var(--color-night); box-shadow: 0 12px 30px -12px rgba(0,0,0,0.5); }
.btn-on-dark:hover { background: var(--color-steel-bright); color: var(--color-night); transform: translateY(-2px); }
.btn-on-dark:active { transform: translateY(0); }
/* Sekundaer auf Dunkel: Stahl-Outline. */
.btn-outline-dark { background: transparent; color: var(--color-mist); box-shadow: inset 0 0 0 1.5px var(--color-border-dark-strong); }
.btn-outline-dark:hover { background: rgba(124, 166, 191, 0.12); color: #fff; box-shadow: inset 0 0 0 1.5px var(--color-steel-bright); transform: translateY(-2px); }

/* ── Section-Header: Eyebrow / Title / Subline (PFLICHT in jeder Section) ── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--font-size-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-brand-main);
  margin-bottom: var(--header-gap-eyebrow);
}
.section-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: currentColor;
  opacity: 0.6;
}
.section-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-h2);
  color: var(--color-heading);
  margin-bottom: var(--header-gap-title);
}
.section-subline {
  font-size: 19px;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: var(--header-gap-subline);
  max-width: 660px;
}
/* Theme-aware Section-Header (Header sitzen top-level in Sektionen, nie in hellen Cards). */
.theme-dark .section-eyebrow { color: var(--color-steel-on-dark); }
.theme-dark .section-title { color: #fff; }
.theme-dark .section-subline { color: var(--color-mist-dim); }
/* Links in Sublines: die Basis-Linkfarbe ist fuer HELLE Flaechen gebaut und
   verschwindet auf Nachtblau fast. Auf dunklen Seiten daher Stahl-auf-Dunkel. */
.theme-dark .section-subline a { color: var(--color-steel-on-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.theme-dark .section-subline a:hover { color: #fff; }

/* ── Page-Header ── dunkles Nachtblau-Band. Seit dem Umbau aller Unterseiten
   auf den cinematischen Split-Kopf (.sk-klimahero, unten) nutzen ihn nur noch
   die beiden Rechtsseiten in legal/. */
.sk-pagehead { background: var(--color-night); padding: 72px 0 76px; }
.sk-pagehead-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); }
.sk-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--color-mist-dim); margin-bottom: 22px; }
.sk-breadcrumb a { color: var(--color-steel-on-dark); }
.sk-breadcrumb a:hover { color: #fff; }
.sk-breadcrumb span[aria-hidden] { color: rgba(157, 189, 207, 0.45); }
/* overflow-wrap + hyphens: "Datenschutzerklaerung" ist ein einzelnes Wort und
   ragte auf 390px sonst aus dem Viewport (html lang="de" liefert die Trennung). */
.sk-pagehead h1 { font-size: var(--font-size-h1-md); line-height: var(--line-height-heading); letter-spacing: var(--letter-spacing-h1); color: #fff; max-width: 900px; overflow-wrap: break-word; hyphens: auto; }
.sk-pagehead-lead { font-size: 19px; line-height: 1.6; color: var(--color-mist-dim); max-width: 680px; margin-top: 18px; }
@media (max-width: 767px) { .sk-pagehead { padding: 48px 0 52px; } .sk-pagehead h1 { font-size: var(--font-size-h1-sm); } .sk-pagehead-lead { font-size: 18px; } }

/* ── Dunkler Split-Seitenkopf: der Kopf ALLER Unterseiten ──
   Cinematisch: Kaltlicht im Ruecken, Text links, rechts der "Beleg" der Seite.
   Was rechts steht, ist seitenspezifisch und liegt in der jeweiligen Section:
   klima = Hersteller-Logos, montage = Foto (.sk-klimahero-media, s. u.),
   service = Verrechnungssaetze, referenzen = Bildmosaik + Anzahl,
   faq = Sprungindex, ueber-uns = Kennzahlen, kontakt = Erreichbarkeit.
   Nur auf body.theme-dark-Seiten verwendet. */
.sk-klimahero { position: relative; background: var(--color-ink); padding: 64px 40px 84px; overflow: hidden; }
.sk-klimahero-glow { position: absolute; right: -10%; top: -30%; width: 760px; height: 620px; background: radial-gradient(ellipse at center, rgba(79, 117, 139, 0.28), transparent 62%); pointer-events: none; }
.sk-klimahero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 60px; }
.sk-klimahero-text .sk-breadcrumb { margin-bottom: 22px; }
.sk-klimahero h1 { font-size: clamp(38px, 5.6vw, 64px); color: #fff; letter-spacing: -0.02em; line-height: 1.04; }
.sk-klimahero-lead { font-size: 19px; line-height: 1.65; color: var(--color-mist-dim); max-width: 560px; margin: 22px 0 28px; }
.sk-klimahero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.sk-chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 13px; background: rgba(146, 178, 199, 0.08); border: 1px solid var(--color-border-dark); border-radius: var(--radius-pill); font-size: 14.5px; color: var(--color-mist); }
.sk-chip svg { color: var(--color-success); flex-shrink: 0; }
.sk-klimahero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.sk-klimahero-brandword { color: var(--color-steel-bright); font-weight: 600; }
/* Bild-Variante des Heros: nur noch montage-hero nutzt sie (klima-hero zeigt das Hersteller-Panel). */
.sk-klimahero-media { position: relative; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow-dark); border: 1px solid var(--color-border-dark); }
.sk-klimahero-media img { width: 100%; height: 100%; max-height: 480px; object-fit: cover; object-position: var(--focal, center); display: block; }
.sk-klimahero-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; font-size: 13.5px; font-weight: 500; color: #fff; background: linear-gradient(to top, rgba(9, 14, 18, 0.85), transparent); }
.sk-klimahero-brands { padding-left: 56px; border-left: 1px solid var(--color-border-dark); }
.sk-klimahero-brands-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-steel-bright); }
.sk-klimahero-brands ul { list-style: none; margin: 6px 0 0; padding: 0; }
.sk-klimahero-brands li { display: flex; align-items: center; min-height: 92px; padding: 10px 0; border-bottom: 1px solid var(--color-border-dark); }
.sk-klimahero-brands li:last-child { border-bottom: 0; }
.sk-brandlogo { display: block; width: auto; }
.sk-brandlogo.is-daikin { height: 40px; }
.sk-brandlogo.is-mitsubishi { height: 52px; }
.sk-brandlogo.is-hisense { height: 34px; }
.sk-klimahero-brands-note { font-size: 16px; line-height: 1.6; color: var(--color-mist-dim); margin-top: 18px; max-width: 42ch; }
@media (max-width: 900px) {
  .sk-klimahero-inner { grid-template-columns: 1fr; gap: 40px; }
  .sk-klimahero-media { order: -1; }
  .sk-klimahero-media img { max-height: 320px; }
  .sk-klimahero-brands { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border-dark); padding-top: 28px; }
  .sk-klimahero-brands li { min-height: 72px; }
  .sk-brandlogo.is-daikin { height: 32px; }
  .sk-brandlogo.is-mitsubishi { height: 42px; }
  .sk-brandlogo.is-hisense { height: 28px; }
}
@media (max-width: 767px) { .sk-klimahero { padding: 40px 0 60px; } }

/* ── Konfigurator (Signature-Element) ── Kategorie-Tabs + Produkt-/Paketblöcke.
   Seitenübergreifend genutzt von klima-konfig und montage-konfig. Tab-Logik in
   js/main.js ([data-konfig]); ohne JS sind alle Panels sichtbar. */
.sk-konfig { background: var(--color-night); padding: var(--section-padding); }
.sk-konfig .section-subline { color: var(--color-mist-dim); }
.sk-konfig-tool { margin-top: 20px; }
.sk-konfig-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.sk-konfig-tab { display: flex; align-items: center; gap: 14px; padding: 18px 22px; background: var(--color-night-2); border: 1px solid var(--color-border-dark); border-radius: var(--radius-m); cursor: pointer; text-align: left; transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-spring); }
.sk-konfig-tab:hover { transform: translateY(-2px); border-color: var(--color-border-dark-strong); }
.sk-konfig-tab-dot { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: rgba(124, 166, 191, 0.14); color: var(--color-steel-bright); font-size: 15px; font-weight: 700; transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease; }
.sk-konfig-tab-txt { display: flex; flex-direction: column; line-height: 1.2; }
.sk-konfig-tab-txt strong { font-size: 18px; color: var(--color-mist); }
.sk-konfig-tab-txt small { font-size: 13px; color: var(--color-mist-dim); margin-top: 2px; }
.sk-konfig-tab.is-active { background: var(--color-steel); border-color: var(--color-steel-bright); }
.sk-konfig-tab.is-active .sk-konfig-tab-dot { background: #fff; color: var(--color-night); }
.sk-konfig-tab.is-active .sk-konfig-tab-txt strong,
.sk-konfig-tab.is-active .sk-konfig-tab-txt small { color: #fff; }
.sk-konfig-tab:focus-visible { outline: 2px solid var(--color-steel-bright); outline-offset: 2px; }
/* Der aktive Tab liegt bereits auf vollem Stahlblau. Dort wuerde das Kaltlicht
   nur matschen, also aus - der Spotlight zeigt die WAEHLBAREN Tabs. */
.sk-konfig-tab.is-active:hover::before,
.sk-konfig-tab.is-active:hover::after { opacity: 0; }
.sk-konfig-panel { display: flex; flex-direction: column; gap: 14px; }
html.js .sk-konfig-panel.is-hidden { display: none; }
.sk-konfig-hint { font-size: 16px; color: var(--color-mist-dim); margin-bottom: 6px; }
.sk-konfig-hint strong { color: var(--color-mist); font-weight: 600; }
/* Kein overflow: hidden - das wuerde das Randlicht von data-spotlight abschneiden.
   Stattdessen traegt der Kopf denselben Radius, damit sein Hover-Hintergrund
   in der gerundeten Karte bleibt. */
.sk-prod { background: var(--color-night-2); border: 1px solid var(--color-border-dark); border-radius: var(--radius-l); }
.sk-prod[open], .sk-prod.is-static { border-color: var(--color-border-dark-strong); box-shadow: var(--shadow-dark); }
.sk-prod-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px; cursor: pointer; list-style: none; border-radius: var(--radius-l); }
.sk-prod-head::-webkit-details-marker { display: none; }
.sk-prod-head:hover { background: rgba(124, 166, 191, 0.05); }
.sk-prod-head:focus-visible { outline: 2px solid var(--color-steel-bright); outline-offset: -2px; }
.sk-prod.is-static .sk-prod-head { cursor: default; }
.sk-prod.is-static .sk-prod-head:hover { background: none; }
.sk-prod-id { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.sk-prod-id strong { font-size: 22px; color: #fff; letter-spacing: -0.01em; }
.sk-prod-id span { font-size: 14px; color: var(--color-mist-dim); margin-top: 3px; }
.sk-prod-logo { display: block; width: auto; }
.sk-prod-logo.is-hisense { height: 22px; }
.sk-prod-logo.is-daikin { height: 24px; }
.sk-prod-logo.is-mitsubishi { height: 34px; }
.sk-prod-id .sk-prod-logo + span { margin-top: 8px; }
.sk-prod-meta { display: flex; align-items: center; gap: 16px; }
.sk-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-night); background: var(--color-steel-bright); padding: 5px 11px; border-radius: var(--radius-pill); white-space: nowrap; }
.sk-prod-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.sk-prod-price small { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-mist-dim); }
.sk-prod-price b { font-size: 24px; font-weight: 700; color: var(--color-steel-bright); letter-spacing: -0.01em; }
.sk-prod-price b.sk-price-request { font-size: 18px; font-weight: 600; line-height: 1.35; }
/* ── Nettozeile unter dem Preis ── Kundenentscheid 2026-08-29: BRUTTO gross,
   netto klein daneben. Grund ist die PAngV: gegenueber Privatkunden muss der
   Endpreis inkl. MwSt. der prominente sein, der Nettobetrag darf danebenstehen.
   Deshalb steht diese Zeile immer UNTER dem Bruttobetrag, nie davor.
   Erbt sonst Groesse, Farbe und Laufweite des Preises, also alles zuruecksetzen. */
.price-net {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-mist-dim);
  margin-top: 3px;
  white-space: nowrap;
}
.sk-prod-chev { width: 12px; height: 12px; border-right: 2px solid var(--color-mist-dim); border-bottom: 2px solid var(--color-mist-dim); transform: rotate(45deg); transition: transform var(--duration-fast) var(--ease-out); flex-shrink: 0; }
.sk-prod[open] .sk-prod-chev { transform: rotate(-135deg); }

/* ── Akkordeon-Aufklappen (Konfiguratoren + FAQ) ──
   Zwei Ebenen, damit es in jedem Browser gut aussieht:
   1. Hoehe: ::details-content laesst sich animieren, sobald interpolate-size
      das Keyword auto interpolierbar macht (Chrome/Safari/Firefox aktuell).
      Aeltere Browser ignorieren beides und klappen wie bisher sofort auf.
   2. Inhalt: faedt zusaetzlich ein und gleitet leicht nach unten - das laeuft
      ueberall, auch ohne ::details-content, und traegt die eigentliche Wirkung.
   Nur transform + opacity, wie fuer alle Animationen im Projekt. */
:root { interpolate-size: allow-keywords; }

.sk-prod::details-content,
.sk-faq-item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--duration-med) var(--ease-out),
              content-visibility var(--duration-med) allow-discrete;
}
.sk-prod[open]::details-content,
.sk-faq-item[open]::details-content { block-size: auto; }

@keyframes sk-accordion-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.sk-prod[open] > .sk-prod-body,
.sk-faq-item[open] > .sk-faq-body {
  animation: sk-accordion-in var(--duration-med) var(--ease-out) both;
}
/* Gleiche Bewegung beim Wechsel der Konfigurator-Kategorie (Mono/Duo/Trio),
   damit der Panelwechsel nicht hart umspringt. */
html.js .sk-konfig-panel:not(.is-hidden) {
  animation: sk-accordion-in var(--duration-med) var(--ease-out) both;
}
/* Screenshots und reduzierte Bewegung: sofort im Endzustand. */
html.screenshot .sk-prod[open] > .sk-prod-body,
html.screenshot .sk-faq-item[open] > .sk-faq-body,
html.screenshot .sk-konfig-panel:not(.is-hidden) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sk-prod::details-content,
  .sk-faq-item::details-content,
  .sk-prod-chev { transition: none; }
  .sk-prod[open] > .sk-prod-body,
  .sk-faq-item[open] > .sk-faq-body,
  html.js .sk-konfig-panel:not(.is-hidden) { animation: none; }
}
.sk-prod-body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px; padding: 8px 28px 30px; align-items: start; }
/* Die Produktfotos sind echte Handybilder in GEMISCHTER Ausrichtung (quer und hochkant).
   Deshalb ein quadratischer Rahmen: der vertraegt beide. Ein Hochkantfoto behaelt darin
   75 % seiner Hoehe (der frueher erzwungene 4:3-Rahmen liess nur 56 % uebrig und schnitt
   damit genau das Geraet ab, das oben an der Wand haengt), ein Querfoto behaelt 75 % der
   Breite. Haupt- und Detailbilder nutzen denselben Rahmen, dadurch fluchtet die Spalte. */
/* --focal = Bildfokus je Foto (am Element gesetzt): haelt das Geraet im Rahmen, wenn cover beschneidet. */
.sk-prod-media img { width: 100%; height: auto; display: block; border-radius: var(--radius-m); object-fit: cover; object-position: var(--focal, center); aspect-ratio: 1 / 1; }
.sk-prod-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.sk-prod-vh { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-steel-on-dark); margin: 0 0 12px; }
.sk-prod-vh span { color: var(--color-mist-dim); font-weight: 400; }
.sk-variants + .sk-prod-vh, .sk-incl + .sk-prod-vh { margin-top: 22px; }
.sk-variants { list-style: none; display: flex; flex-direction: column; gap: 2px; margin-bottom: 26px; }
.sk-variants li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 16px; background: rgba(146, 178, 199, 0.05); border: 1px solid var(--color-border-dark); border-radius: var(--radius-s); }
.sk-variant-l { font-size: 15.5px; color: var(--color-mist); }
.sk-variant-p { display: flex; flex-direction: column; align-items: flex-end; font-size: 19px; font-weight: 700; color: #fff; white-space: nowrap; line-height: 1.15; }
.sk-incl { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin-bottom: 26px; }
.sk-incl.sk-incl-1 { grid-template-columns: 1fr; }
.sk-incl li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.4; color: var(--color-mist); }
.sk-incl li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; background: var(--color-success); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.sk-prod-cta { width: 100%; }
.sk-konfig-tax { margin-top: 22px; font-size: 14px; color: var(--color-mist-dim); max-width: 780px; }

/* Hinweis-Panel ("weitere Hersteller"): frueher eine eigene Section direkt nach
   sk-konfig, optisch angehaengt (kein eigenes Band). Jetzt Teil derselben Section,
   deshalb kein eigener Section-Hintergrund/-Padding mehr noetig - nur ein Abstand
   nach oben zur Preistafel. */
.sk-konfig-hinweis {
  display: flex; align-items: center; gap: 26px;
  margin-top: 40px;
  padding: 34px 40px;
  background: linear-gradient(120deg, var(--color-night-2), var(--color-night));
  border: 1px solid var(--color-border-dark);
  border-left: 3px solid var(--color-steel);
  border-radius: var(--radius-l);
}
.sk-konfig-hinweis-ic {
  display: grid; place-items: center;
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 16px;
  background: rgba(124, 166, 191, 0.12);
  color: var(--color-steel-bright);
}
.sk-konfig-hinweis-body { flex: 1; }
.sk-konfig-hinweis-body h3 { font-size: var(--font-size-h4); color: #fff; margin-bottom: 6px; }
.sk-konfig-hinweis-body p { font-size: 16px; line-height: 1.6; color: var(--color-mist-dim); max-width: 620px; }
.sk-konfig-hinweis-cta { flex-shrink: 0; }

@media (max-width: 900px) {
  .sk-konfig-tabs { grid-template-columns: 1fr; gap: 10px; }
  .sk-prod-body { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 767px) {
  /* Kein Umbruch der Kopfzeile: sonst rutscht der Preisblock unter Logo und
     Bezeichnung und der Kopf wird knapp doppelt so hoch. Stattdessen darf die
     linke Spalte schrumpfen (min-width: 0) und ihre Bezeichnung umbrechen -
     Preis und Chevron bleiben so auch auf 360px-Geraeten in der ersten Zeile. */
  .sk-prod-head { padding: 20px; gap: 12px; flex-wrap: nowrap; }
  .sk-prod-id { min-width: 0; }
  .sk-prod-logo { max-width: 100%; }
  .sk-prod-meta { gap: 12px; }
  .sk-prod-id strong { font-size: 19px; }
  .sk-prod-body { padding: 4px 20px 24px; }
  .sk-incl { grid-template-columns: 1fr; }
  /* Bestseller-Badge nur ab Tablet. Auf dem Handy hat die Kopfzeile 348px:
     Logo-Block (146) + Preis (120) + Chevron (17) + Abstaende sind schon ~307px,
     das Badge braeuchte weitere 95px. Mit Badge brach deshalb genau diese eine
     Karte auf 155px Hoehe um, waehrend Mitsubishi und Daikin bei ~100px lagen. */
  .sk-badge { display: none; }
  .sk-konfig-hinweis { flex-direction: column; align-items: flex-start; gap: 18px; padding: 28px 24px; margin-top: 28px; }
  .sk-konfig-hinweis-cta { width: 100%; }
}

/* ── Lenis Smooth Scroll (Init in js/main.js) ──
   Minimal-Set aus lenis.css. Die Original-Regel `.lenis-smooth iframe {
   pointer-events: none }` fehlt bewusst: sie wuerde die Google-Maps-Karte
   unbedienbar machen. Stattdessen traegt der Karten-Container
   data-lenis-prevent, damit das Mausrad dort in der Karte landet. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* Sticky-Nav (80px) darf das Anker-Ziel nicht verdecken. Gilt fuer Klick,
   Deep-Link und Lenis gleichermassen (Lenis liest scroll-margin-top aus). */
section[id] { scroll-margin-top: 104px; }

/* ── Eingangsanimation beim Seitenaufruf (Markup: data-enter) ──
   Bewusst REINES CSS und ohne JS-Gate (anders als data-reveal): laeuft einmal
   beim Laden, `both` haelt den Endzustand, ohne JS ist alles trotzdem sichtbar.
   Die Reihenfolge steuert --d direkt am Element (Choreografie steht in der
   jeweiligen Section, damit man sie dort liest, wo das Markup liegt).
     data-enter           Text, Buttons, Chips: steigen auf
     data-enter="media"   Bild/Video: steigt auf und kommt minimal heran
     data-enter="glow"    Kaltlicht hinter dem Seitenkopf: geht langsam auf
     data-enter="nav"     Navigationsleiste (nur cinematische Seiten, s. u.)
   Der Glow animiert ueber die eigenstaendige `scale`-Property statt ueber
   transform: die Glow-Elemente tragen teils schon ein eigenes transform
   (translateY(-50%)), das dadurch erhalten bleibt. */
@keyframes sk-enter-rise  { from { opacity: 0; transform: translateY(var(--enter-distance)); } }
@keyframes sk-enter-media { from { opacity: 0; transform: translateY(var(--enter-distance)) scale(0.965); } }
@keyframes sk-enter-glow  { from { opacity: 0; scale: 0.72; } }
@keyframes sk-enter-nav   { from { opacity: 0; } }

[data-enter] {
  animation: sk-enter-rise var(--enter-duration) var(--ease-out) both;
  animation-delay: var(--d, 0s);
}
[data-enter="media"] { animation-name: sk-enter-media; animation-duration: 0.9s; }
[data-enter="glow"]  { animation-name: sk-enter-glow; animation-duration: var(--enter-glow-duration); }
/* Nav: NUR opacity. Ein transform auf der sticky Nav wuerde zum Containing
   Block fuer das position:fixed Mobile-Menue (<=1024px) und dessen Lage kippen. */
[data-enter="nav"]   { animation-name: sk-enter-nav; animation-duration: 0.55s; }
/* Der Eingang gehoert zum cinematischen Auftritt (index, klimaanlagen, montage).
   Auf den hellen Alt-Seiten bleibt die Nav unangetastet. */
body:not(.theme-dark) [data-enter="nav"] { animation: none; opacity: 1; }

html.screenshot [data-enter] { opacity: 1 !important; transform: none !important; scale: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  [data-enter] { opacity: 1; transform: none; scale: none; animation: none; }
}

/* ── Reveal-Animationen (Init in js/main.js) ── */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
html.screenshot [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ── Kaltlicht-Spotlight (Cards, Markup: data-spotlight) ──
   Cursor-folgender Glow + 1px-Randlicht. js/main.js setzt --spot-x/--spot-y
   (nur hover + feiner Pointer); ohne JS/auf Touch statischer Glow oben rechts. */
[data-spotlight] { position: relative; }
[data-spotlight]::before,
[data-spotlight]::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-med) ease;
  pointer-events: none;
}
[data-spotlight]::before { /* Flaechen-Glow */
  inset: 0;
  background: radial-gradient(260px circle at var(--spot-x, 78%) var(--spot-y, 12%), rgba(124, 166, 191, 0.2), transparent 68%);
}
[data-spotlight]::after { /* Randlicht: Ring per Mask ausgestanzt, liegt auf der Card-Border */
  inset: -1px;
  padding: 1px;
  background: radial-gradient(240px circle at var(--spot-x, 78%) var(--spot-y, 12%), rgba(178, 205, 220, 0.95), rgba(124, 166, 191, 0.22) 50%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
[data-spotlight]:hover::before,
[data-spotlight]:hover::after,
[data-spotlight]:focus-visible::before,
[data-spotlight]:focus-visible::after { opacity: 1; }
html.screenshot [data-spotlight]::before,
html.screenshot [data-spotlight]::after { transition: none; }

/* ── Rechtsseiten (legal/) ── */
/* Cinematisch dunkel wie alle anderen Seiten (body.theme-dark auf legal/*.html) -
   frueher hell/hart kodiert, dadurch fielen Impressum/Datenschutz optisch aus der Site raus. */
.sk-legal { padding: 64px 40px 88px; background: var(--color-ink); }
/* Der Container behaelt die normale Seitenbreite, damit die linke Textkante mit
   der H1 im Seitenkopf fluchtet. Die Lesebreite begrenzen stattdessen die
   Bloecke darin (760px ist die angenehme Zeilenlaenge fuer Fliesstext). */
.sk-legal-inner { max-width: var(--max-width); }
.sk-legal-inner > * { max-width: 760px; }
.sk-legal-inner h2 { font-size: var(--font-size-h3); color: #fff; margin: 40px 0 16px; }
.sk-legal-inner h3 { font-size: var(--font-size-h4); color: #fff; margin: 30px 0 10px; }
/* Die Datenschutzerklaerung des Generators staffelt h2 > h3 > h4. Ohne eigene
   h4-Regel laege h4 auf denselben 21px wie h3 und die Ebene ginge verloren. */
.sk-legal-inner h4 { font-size: 18px; color: #fff; margin: 24px 0 8px; }
.sk-legal-inner p { font-size: 17px; line-height: 1.75; color: var(--color-mist-dim); margin-bottom: 14px; }
/* Lange URLs im Generator-Text (z.B. dataprivacyframework.gov) duerfen umbrechen,
   sonst schieben sie die Seite auf schmalen Handys seitlich raus. */
.sk-legal-inner a { color: var(--color-steel-on-dark); text-decoration: underline; overflow-wrap: anywhere; }
.sk-legal-inner ul { margin: 0 0 14px 22px; display: flex; flex-direction: column; gap: 8px; }
.sk-legal-inner li { font-size: 17px; line-height: 1.6; color: var(--color-mist-dim); }
.sk-legal-todo { padding: 22px 26px; background: var(--color-night-2); border-left: 3px solid var(--color-steel); border-radius: var(--radius-s); color: var(--color-mist-dim); }
@media (max-width: 767px) { .sk-legal { padding: 40px 0 60px; } }

/* ── Lightbox (Referenzgalerie) ── */
.sk-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 32px; background: rgba(9, 14, 18, 0.92); }
.sk-lightbox img { max-width: min(1100px, 100%); max-height: 90vh; width: auto; height: auto; border-radius: var(--radius-m); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.sk-lightbox-close { position: absolute; top: 20px; right: 24px; width: 48px; height: 48px; display: grid; place-items: center; font-size: 32px; line-height: 1; color: #fff; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-s); }
.sk-lightbox-close:hover { color: var(--color-steel-bright); }
.sk-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Google Maps Zwei-Klick (Markup: snippets/google-maps-consent.html) ── */
.map-consent { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: var(--color-bg-accent); }
/* Schmal wird 16:9 zu flach fuer Hinweistext + Button: der Kasten waechst dann
   mit dem Inhalt, das Vorschaubild fuellt ihn weiter (position:absolute). */
@media (max-width: 767px) { .map-consent { aspect-ratio: auto; min-height: 340px; } }
.map-consent > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(0.85); }
.map-consent-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(24, 35, 42, 0.62); }
.map-consent-overlay p { color: var(--color-mist); font-size: var(--font-size-body); max-width: 520px; }
.map-consent-overlay a { color: #fff; text-decoration: underline; }
/* Die Kartenvorschau ist ein helles Bild. Auf den cinematischen Seiten wuerde
   sie als leuchtendes Rechteck aus der Flaeche springen, deshalb dunkler
   abgeblendet und mit staerkerem Scrim. */
body.theme-dark .map-consent > img { filter: blur(2px) brightness(0.42) saturate(0.8); }
body.theme-dark .map-consent-overlay { background: rgba(15, 23, 28, 0.66); }