/* ============================================================================
   HAMMRICH HANDWERK & SERVICE · Homepage v2
   Design-Welt „NACHTGLAS" — Neugestaltung 09.09.2026 (Design & Frontend)
   ----------------------------------------------------------------------------
   Leitgedanke (der Grund fuer JEDE Entscheidung in dieser Datei):
   Hammrich verkauft nicht „Fenster", sondern die Kontrolle ueber Licht, Waerme
   und Ruhe. Deshalb ist die Seite aus NACHT und GEBAUTEM LICHT gemacht: ein
   tiefblauer Grund, auf dem die Inhalte als leuchtende, praezise gefasste
   Lichtscheiben liegen — wie erleuchtete Fenster in einer dunklen Fassade.
   Gold ist keine Dekoration, sondern KANTENLICHT.
   ----------------------------------------------------------------------------
   Was bewusst UNVERAENDERT bleibt (Firmenwahrheit, nicht Optik):
   - Firmenfarben Navy #003c60 und Champagner-Gold als Marken-Anker.
   - Alle Inhalte, Preise, Rechtstexte, Zusagen.
   Was ersetzt ist: Raster, Typografie, Materialsprache, Tiefe, Bewegung,
   Kopfzeile, Bildsprache der Flaechen.
   ----------------------------------------------------------------------------
   Barrierefreiheit: jedes Farbpaar in dieser Datei ist gerechnet, nicht
   geschaetzt. Die Werte stehen als Kommentar am Token. Grundlage WCAG 2.2 AA
   (4,5:1 Text, 3:1 grosse Schrift und Bedienelement-Abgrenzung 1.4.11).
   ============================================================================ */

/* ---------------------------------------------------------------- Schrift --
   Selbst gehostet, kein externer Aufruf (CSP default-src 'self').
   Anzeige + Fliesstext: SCHIBSTED GROTESK (variabel, SIL OFL 1.1, 46,8 KB)
   Messwerte:            SPLINE SANS MONO (variabel, SIL OFL 1.1, 36,5 KB)
   Lizenztexte und Begruendung: assets/fonts/LIESMICH.md

   Warum nicht die Systemschrift: die Seite sah auf jedem Geraet anders aus
   (San Francisco / Segoe UI / Roboto) — eine Marke, die Praezision verspricht,
   kann sich ihre Buchstaben nicht vom Betriebssystem leihen.
   Warum nicht Inter/Geist/Roboto: diese Schriften sind an der Optik generischer
   Oberflaechen abgenutzt (Detektor-Regel „overused-font"). Schibsted Grotesk ist
   eine norwegische Zeitungs-Grotesk mit hoher x-Hoehe und enger Laufweite — sie
   traegt deutsche Wortungetueme („Markenqualitaet", „Insektenschutz") ohne zu
   brechen. Entschieden am Bild im Direktvergleich, nicht am Namen.
   Spline Sans Mono traegt AUSSCHLIESSLICH Messwerte (Rufnummer, Zeiten, mm, °,
   %, Datum, Positionsmarken) — die zulaessige Verwendung von Monospace ist
   Daten und Messung, nicht das „Technik-Kostuem".
   Warum selbst gehostet: die Datenschutzerklaerung sagt zu, dass keine externen
   Schriftarten eingebunden werden. Ein Aufruf bei einem Schriftdienst wuerde die
   IP-Adresse jedes Besuchers an einen Dritten uebertragen. */
@font-face{
  font-family:'Schibsted Grotesk';
  /* Nur EINE Quelle, nur format('woff2'): die frueher ueblichen zwei Zeilen mit
     format('woff2-variations') verweisen auf dieselbe Datei und bringen heute
     nichts — variable Schnitte erkennt jeder aktuelle Browser von selbst. */
  src:url('assets/fonts/schibsted-grotesk-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Spline Sans Mono';
  src:url('assets/fonts/spline-sans-mono-var.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ----------------------------------------------------------------- Tokens -- */
:root{
  /* --- Nachtgrund (der Raum, in dem die Seite steht) --- */
  --void:#04090f;        /* Tiefnacht, Seitengrund */
  --void-2:#071322;      /* Nachtblau, Standard-Sektion */
  --void-3:#0b1e30;      /* gehobene Nachtflaeche (Karten auf Nacht) */
  --void-4:#102b42;      /* Nacht, angehoben (Hover, Rahmen) */

  /* --- Firmenfarben, unveraendert --- */
  --navy:#003c60;
  --navy-ink:#0f334f;
  --navy-lift:#0b4f7d;   /* weisse Schrift darauf 8,65:1 */

  /* --- Lichtscheiben (die leuchtenden Inhaltsflaechen) --- */
  --pane:#ffffff;
  --pane-2:#f7f5f0;      /* warme Lichtscheibe */
  --pane-3:#eeebe3;      /* ruhige Lichtscheibe / Einfassungen */
  --line:#e2ddd1;        /* Trennlinie auf Lichtscheibe */

  /* --- Text --- */
  --ink:#101820;         /* auf Lichtscheibe: 17,89:1 */
  --ink-2:#46545f;       /* zweite Ebene auf Lichtscheibe: 7,80:1 (weiss) / 7,09:1 (pane-2) */
  --ink-3:#5d6b78;       /* dritte Ebene, Bildunterschriften: 5,47:1 */
  --mist:#cfe0ee;        /* auf Nacht, kalt getoent: 13,82:1 — NIE Grau auf Farbe */
  --mist-2:#93a9bd;      /* zweite Ebene auf Nacht: 7,69:1 */
  --mist-3:#7d93a8;      /* Rahmen/Trennlinien auf Nacht: 5,87:1 */

  /* --- Gold = Kantenlicht --- */
  --gold:#c8a45c;        /* auf Nacht 7,93:1 — Flaechen, Linien, Rahmen */
  --gold-hi:#e6cf9a;     /* Gold-Schrift auf Nacht: 12,22:1 */
  --gold-ink:#7d5f22;    /* Gold-Schrift auf Lichtscheibe: 5,95:1 (weiss) / 5,41:1 (pane-2) */
  --gold-btn:#d8b76c;    /* Knopf-Flaeche; Navy-Schrift darauf 6,79:1 */
  --star:#8a6410;        /* Sterne in Bewertungen: 5,37:1 auf Weiss, 4,51:1 auf --pane-3.
                            Das uebliche Bewertungsgelb (#d9a520) erreicht auf Weiss nur
                            2,25:1 — bei fuenf Sternen nebeneinander sieht man das kaum,
                            gemessen faellt es sofort auf. Warmes Bronze-Gold statt Zitrone. */
  --gold-edge:#7d5f22;   /* 1px Kante am Gold-Knopf: 5,95:1 gegen weiss, 3,14:1 gegen Nacht
                            → erfuellt WCAG 1.4.11 auf BEIDEN Gruenden. Genau der Punkt,
                            an dem der alte Gold-Knopf im Kopf mit 2,10:1 gescheitert ist. */

  /* --- Zustandsfarben (Sprache, nie umgedeutet) --- */
  --ok:#1f6b39; --ok-bg:#e4f3ea; --ok-line:#bfe3cc;   /* 5,68:1 */
  --warn:#8a4b1f; --warn-bg:#faeede; --warn-line:#ecd3b8; /* 5,91:1 */

  /* --- Raster & Rhythmus (eine Skala, keine Zufallszahlen) --- */
  --wrap:1240px;
  --pad:clamp(20px,4.6vw,56px);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --sec:clamp(72px,10vh,132px);   /* Abstand zwischen Kapiteln */
  --r-s:10px; --r:16px; --r-l:26px; --r-xl:34px;
  --head-h:68px;

  /* --- Tiefe: jeder Schatten hat Versatz UND Weichheit, nie ein Farbhalo --- */
  --lift-1:0 1px 2px rgba(2,6,12,.30), 0 4px 12px -4px rgba(2,6,12,.28);
  --lift-2:0 2px 4px rgba(2,6,12,.26), 0 16px 34px -14px rgba(2,6,12,.42);
  --lift-3:0 4px 8px rgba(2,6,12,.26), 0 34px 70px -28px rgba(2,6,12,.60);
  --lift-pane:0 1px 0 rgba(255,255,255,.55) inset, 0 6px 14px -6px rgba(2,6,12,.45), 0 44px 96px -46px rgba(2,6,12,.72);

  /* --- Bewegung: EINE Kurvenfamilie fuer die ganze Seite --- */
  --e-out:cubic-bezier(.23,1,.32,1);        /* alles, was hereinkommt */
  --e-io:cubic-bezier(.77,0,.175,1);        /* alles, was sich auf dem Schirm bewegt */
  --e-drawer:cubic-bezier(.32,.72,0,1);     /* Schubladen, Menue, Panel */
  --t-tap:140ms;   /* Tastgefuehl */
  --t-ui:200ms;    /* Menue, Chip, Link */
  --t-panel:320ms; /* Flaechen */

  --font:'Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Feinkorn. Ohne Korn wirkt eine grosse dunkle Flaeche wie ein
     ausgeschalteter Bildschirm; mit Korn wirkt sie wie Material. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- Grundlage -- */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.006em;
  color:var(--mist);
  background:var(--void);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-variant-numeric:proportional-nums;
}

/* Der Grund ist nicht flach: zwei sehr leise Lichtwolken (Navy kalt oben,
   Gold warm weiter unten) geben der Nacht Tiefe, ohne bunt zu werden. */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1200px 720px at 78% -8%, rgba(0,86,138,.34), transparent 62%),
    radial-gradient(980px 640px at 8% 42%, rgba(0,60,96,.26), transparent 60%),
    radial-gradient(900px 700px at 92% 88%, rgba(168,132,61,.13), transparent 62%),
    var(--void);
}
/* Feinkorn ueber allem — 3,5 %, unter der Sichtbarkeitsschwelle als Muster,
   ueber der Schwelle als Materialgefuehl. */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:var(--grain);background-size:140px 140px;
  /* KEIN Blendmodus: „overlay" bewegt auf Beinahe-Schwarz praktisch nichts
     (gemessen Leuchtdichte-Spanne 0,0036 — unsichtbar). Graues Rauschen mit
     echter Deckkraft hebt den Nachtgrund und senkt die Lichtscheibe, ist also
     auf BEIDEN Gruenden zu sehen. Kein Alibi-Korn. */
  opacity:.055;
}

img,svg,video{display:block;max-width:100%}
a{color:var(--gold-hi);text-decoration:none}
b,strong{font-weight:640}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}

/* ---- Browser-Oberflaechen, die zur Gestaltung gehoeren -------------------
   Auswahlfarbe, Textmarke, Rollbalken und Fokusring kommen sonst aus dem
   Betriebssystem und gehoeren zu keinem Design. Hier gehoeren sie dazu. */
::selection{background:rgba(200,164,92,.34);color:#fff}
::-moz-selection{background:rgba(200,164,92,.34);color:#fff}
:root{caret-color:var(--gold)}
html{scrollbar-color:var(--void-4) var(--void);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--void-4);border-radius:99px;border:3px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:#1a3f5d}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:6px;
  box-shadow:0 0 0 6px rgba(200,164,92,.18);
}
/* Auf Lichtscheiben ist derselbe Ring dunkler getoent, sonst verschwindet er. */
.chapter.ch-light :focus-visible,.ablauf :focus-visible,.stimmen :focus-visible,
.region :focus-visible,.faq :focus-visible,.wizard :focus-visible,
.ebbox :focus-visible,.kontakt-form :focus-visible,.svpanel :focus-visible,
.privacy :focus-visible{
  outline-color:var(--gold-ink);
  box-shadow:0 0 0 6px rgba(125,95,34,.16);
}

.skip{
  position:fixed;left:-999px;top:12px;z-index:300;
  background:var(--gold-btn);color:var(--navy-ink);font-weight:640;
  padding:12px 20px;border-radius:99px;border:1px solid var(--gold-edge);
}
.skip:focus{left:12px}

/* Anker-Rueckfall ohne JavaScript (mit JS rechnet app.js die echte Kopfhoehe) */
section[id],[id]{scroll-margin-top:calc(var(--head-h) + 18px)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.wrap.narrow{max-width:900px}
.centered{text-align:center}

/* ================================================================ TYPO ==== */
/* Eine Skala mit sichtbaren Sprüngen. Grosse Grade werden enger gefuehrt
   (optischer Ausgleich), kleine Grade bekommen Luft. */
h1,h2,h3,.manifest-line,.svpanel-title,.h1-l{
  font-family:var(--font);font-weight:680;
  letter-spacing:-.032em;line-height:1.02;
  color:#fff;text-wrap:balance;
}
h1,.h1-l{
  font-size:clamp(2.55rem,6.1vw,5.1rem);
  font-weight:720;letter-spacing:-.042em;line-height:.98;
}
h2,.svpanel-title{
  font-size:clamp(1.95rem,4.1vw,3.15rem);
  letter-spacing:-.034em;line-height:1.06;margin-bottom:.48em;
}
h3{
  font-size:clamp(1.12rem,1.9vw,1.42rem);
  font-weight:640;letter-spacing:-.018em;line-height:1.22;color:inherit;
}
p,li,.lead,.hero-sub{text-wrap:pretty}
p{max-width:66ch}          /* Lesebreite, nicht Containerbreite */
.lead{
  font-size:clamp(1.08rem,1.6vw,1.26rem);
  line-height:1.55;color:var(--mist-2);max-width:60ch;font-weight:400;
}
.lead.centered{margin-left:auto;margin-right:auto}
.centered p,p.centered{margin-left:auto;margin-right:auto}

/* Auf Lichtscheiben kippt die ganze Textfarbfamilie um. */
.ch-light h2,.ablauf h2,.stimmen h2,.region h2,.faq h2,.erstb h2,
.ch-light h3,.ablauf h3,.stimmen h3,.region h3,.faq h3,
.svpanel-title{color:var(--navy-ink)}
.ch-light,.ablauf,.stimmen,.region,.faq,.erstb{color:var(--ink)}
.ch-light .lead,.ablauf .lead,.stimmen .lead,.region .lead,.faq .lead,.erstb .lead{color:var(--ink-2)}
h2.light,.premium h2,.funnel h2{color:#fff}
.lead.light{color:var(--mist-2)}

/* ---- Abschnittsmarke ----------------------------------------------------
   Bewusste Abweichung von der Impeccable-Grundregel „keine Kickerzeile ueber
   der Ueberschrift": die Marken bleiben, aber NICHT als dekorative Zeile.
   Sie sitzen als Messmarke IN einer Haarlinie, die den Abschnitt aufreisst —
   ein Trennzeichen mit Information, wie eine Positionsnummer im Aufmass.
   Ohne diese Marken verlieren Kunden UND Suchmaschinen die Zuordnung
   „dieser Abschnitt handelt von Sonnenschutz". */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:.72rem;font-weight:520;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-hi);margin:0 0 18px;max-width:none;
}
.eyebrow::after{
  content:'';flex:1 1 auto;height:1px;min-width:24px;
  background:linear-gradient(90deg,rgba(200,164,92,.55),rgba(200,164,92,0));
}
/* Der Grundton der Marke ist NACHT (--gold-hi), weil die Seite auf Nacht steht.
   Bis 10.09.2026 war es umgekehrt: der Standard war die Lichtscheiben-Farbe,
   und jede Nacht-Sektion musste den Modifikator .gold mitbringen. Wer ihn
   vergass, bekam --gold-ink auf Tiefnacht — gemessen 2,97:1 statt der noetigen
   4,5:1, also unlesbar, aber optisch nur „dezent". Genau so ist der Fehler an
   vier Abschnitten tagelang unbemerkt geblieben. Seitdem gilt: der haeufigere
   Grund ist der Standard, der seltenere ist die AUSDRUECKLICHE Ausnahme.

   Die Ausnahme haengt an der Sektion, nicht an einer HTML-Klasse: eine Sektion
   weiss, welchen Grund sie hat — eine vergessene Klasse weiss gar nichts.
   Vorbild dafuer stand mit .erstb .eyebrow (s.u.) schon im Haus.
   ⚠ .erstb gehoert NICHT in diese Liste: es steht trotz seiner Nennung in der
   Lichtscheiben-Gruppe (Z. ~259) auf Nacht. */
.svpanel .eyebrow,.ch-light .eyebrow,.ablauf .eyebrow,
.stimmen .eyebrow,.region .eyebrow,.faq .eyebrow{color:var(--gold-ink)}
.svpanel .eyebrow::after,.ch-light .eyebrow::after,.ablauf .eyebrow::after,
.stimmen .eyebrow::after,.region .eyebrow::after,.faq .eyebrow::after{
  background:linear-gradient(90deg,rgba(125,95,34,.5),rgba(125,95,34,0));
}
/* Der Modifikator steht NACH der Sektion und schlaegt sie deshalb: eine dunkle
   Insel in einer hellen Sektion bleibt so ohne neue Sonderregel moeglich. */
.eyebrow.light,.eyebrow.gold{color:var(--gold-hi)}
.eyebrow.light::after,.eyebrow.gold::after{
  background:linear-gradient(90deg,rgba(200,164,92,.55),rgba(200,164,92,0));
}
.eyebrow.centered{justify-content:center}
.eyebrow.centered::before{
  content:'';flex:1 1 auto;height:1px;min-width:24px;
  background:linear-gradient(270deg,rgba(200,164,92,.55),rgba(200,164,92,0));
}
/* Auch die zweite Haarlinie der zentrierten Marke braucht ihre helle Fassung —
   sonst erbt eine zentrierte Marke auf einer Lichtscheibe denselben Fehler. */
.svpanel .eyebrow.centered::before,.ch-light .eyebrow.centered::before,
.ablauf .eyebrow.centered::before,.stimmen .eyebrow.centered::before,
.region .eyebrow.centered::before,.faq .eyebrow.centered::before{
  background:linear-gradient(270deg,rgba(125,95,34,.5),rgba(125,95,34,0));
}
.eyebrow.centered::after{max-width:none}

/* Beschriftungen in den Schema-Zeichnungen */
.svg-lab{font-family:var(--font);font-size:15px;font-weight:620;letter-spacing:-.01em}
.svg-cap{font-family:var(--mono);font-size:12px;font-weight:450;letter-spacing:.02em;fill:var(--ink-3)}

/* ============================================================== KNOEPFE ==== */
/* Ein Knopf muss sich anfassen lassen. Deshalb: 0,97 beim Druecken in 140 ms,
   Hover nur auf Geraeten mit echtem Zeiger, und eine Kante, die die WCAG-
   Abgrenzung von 3:1 auf JEDEM Grund erfuellt. */
.btn{
  --btn-shift:0px;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:620;font-size:1rem;letter-spacing:-.012em;
  padding:15px 26px;min-height:50px;border-radius:99px;
  text-align:center;white-space:nowrap;
  transition:transform var(--t-tap) var(--e-out),
             box-shadow var(--t-ui) var(--e-out),
             background-color var(--t-ui) var(--e-out),
             border-color var(--t-ui) var(--e-out),
             color var(--t-ui) var(--e-out);
  transform:translateY(var(--btn-shift));
}
.btn:active{--btn-shift:0px;transform:scale(.972)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{--btn-shift:-2px}
}

/* Haupthandlung. Gold-Flaeche + Navy-Schrift 6,79:1, Kante --gold-edge. */
.btn-gold{
  background-color:var(--gold-btn);background-image:linear-gradient(176deg,#e2c583 0%,var(--gold-btn) 46%,#c9a55e 100%);
  color:var(--navy-ink);
  border:1px solid var(--gold-edge);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset, var(--lift-1);
}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--lift-2)}
}
/* Kantenlicht: ein feiner Lichtstreifen wandert beim Zeigen einmal ueber den
   Hauptknopf. Das ist der einzige Ort auf der Seite mit diesem Effekt —
   damit bleibt er ein Signal und wird nicht zur Tapete. */
.btn-gold::after{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.62) 50%,transparent 66%);
  transform:translateX(-120%);opacity:0;
}
@media (hover:hover) and (pointer:fine){
  .btn-gold:hover::after{animation:kantenlicht 720ms var(--e-out) forwards}
}
@keyframes kantenlicht{
  from{transform:translateX(-120%);opacity:.9}
  to{transform:translateX(120%);opacity:0}
}

/* Nebenweg auf LICHTSCHEIBEN. Navy-Flaeche gegen Weiss 11,57:1. */
.btn-navy{
  background:var(--navy);color:#fff;
  border:1px solid var(--navy-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, var(--lift-1);
}
@media (hover:hover) and (pointer:fine){
  .btn-navy:hover{background:var(--navy-lift);box-shadow:0 1px 0 rgba(255,255,255,.16) inset, var(--lift-2)}
}

/* Nebenweg auf NACHT. Kein Navy-Knopf auf Nacht — Navy-Flaeche erreicht dort
   nur 1,61:1 und wuerde als Bedienelement verschwinden. Stattdessen Glas mit
   heller Kante (--mist-3, 5,87:1 gegen Nacht). */
.btn-ghost{
  background:rgba(255,255,255,.055);color:#fff;
  border:1px solid var(--mist-3);
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
}
@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--mist)}
}
.btn-ghostgold{
  background:transparent;color:var(--gold-hi);
  border:1px solid var(--gold);
}
@media (hover:hover) and (pointer:fine){
  .btn-ghostgold:hover{background:rgba(200,164,92,.12);border-color:var(--gold-hi)}
}
/* Einzige Verwendung von .btn-ghostgold auf hellem Grund: der No-JS-Rueckfall
   im weissen Planer-Kasten. Dort auf --gold-ink (5,95:1) umstellen. */
.wizard-body .btn-ghostgold,.ebbox .btn-ghostgold{color:var(--gold-ink);border-color:var(--gold-ink)}
@media (hover:hover) and (pointer:fine){
  .wizard-body .btn-ghostgold:hover{background:rgba(125,95,34,.08)}
}

.btn-l{padding:18px 34px;font-size:1.06rem;min-height:58px}
.btn-s{padding:10px 20px;min-height:44px;font-size:.94rem}
/* Gezeichnete Symbole in Knoepfen: eine Groesse, eine Strichstaerke. */
.btn .ico,.mb-tel .ico,.svpanel-tel .ico{
  width:17px;height:17px;flex:0 0 auto;fill:currentColor;
}
.btn-ghost .ico{fill:var(--gold)}
.mb-tel .ico{fill:var(--gold)}
.svpanel-tel .ico{fill:var(--navy)}
.gal-pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-note{
  display:block;font-family:var(--mono);font-size:.7rem;font-weight:450;
  letter-spacing:.04em;opacity:.78;margin-top:2px;
}
.btn .btn-note{margin-left:2px}

/* ============================================================== KOPFZEILE == */
/* Der Kopf ist IMMER dunkel — auch im gescrollten Zustand. Zwei Gruende:
   (1) Der Gold-Knopf „Projekt planen" erreichte gegen das frueher helle
       Kopfband nur 2,10:1 und verfehlte damit WCAG 1.4.11 (3:1) am
       meistgeklickten Bedienelement der Seite. Gegen den Nachtgrund sind es
       9,70:1. Das Problem ist damit strukturell weg, nicht uebermalt.
   (2) Es laedt nur noch EINE Logodatei statt zwei (vorher 138,3 KB fuer die
       helle und die dunkle Fassung, von denen je Zustand nur eine sichtbar war
       — display:none verhindert das Laden eines <img> nicht). */
.top{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:rgba(4,9,15,.34);
  transition:background-color var(--t-panel) var(--e-out),
             backdrop-filter var(--t-panel) var(--e-out),
             box-shadow var(--t-panel) var(--e-out);
}
.top::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,164,92,.34) 22%,rgba(200,164,92,.34) 78%,transparent);
  opacity:0;transition:opacity var(--t-panel) var(--e-out);
}
.top.scrolled{
  background:rgba(4,9,15,.82);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.85);
}
.top.scrolled::after{opacity:1}

/* Der Kopf laeuft breiter als der Textkoerper (1240 px): er traegt keine
   Lesebreite, sondern Marke + Navigation + zwei Knoepfe. Mit dem engeren
   Seitenrand passt die vollstaendige Navigation ab 1300 px ins Fenster —
   gemessen, nicht geschaetzt (siehe Rechnung am 1300-px-Block). */
.top-inner{
  max-width:1560px;margin:0 auto;
  padding:10px clamp(16px,2.4vw,40px);
  display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);
  min-height:var(--head-h);
}

/* ---- Wortmarke ----------------------------------------------------------
   NEU und bewusste Abweichung von der Entscheidung vom 16.08.2026
   („Logo als vollstaendiges Motiv, keine horizontale Neukomposition"):
   Piktogramm links, Wortmarke rechts als ECHTER TEXT.
   Grund: im gestapelten Motiv sind 71,8 % der Bildhoehe Piktogramm. Bei einer
   praktikablen Kopfhoehe erreicht die Zeile „HANDWERK & SERVICE" nur 4,3 px
   Versalhoehe (lesbar ab ~7 px) — sie war bei JEDER vertretbaren Kopfgroesse
   unlesbar. Als Text ist sie bei 44 px Kopfmarke scharf, auf jedem Bildschirm,
   in jeder Auflösung, und der Firmenname steht als Text im Quelltext
   (auch fuer Suchmaschinen ein Gewinn). Mike entscheidet, ob das so bleibt. */
.brand{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  color:#fff;
  transition:opacity var(--t-ui) var(--e-out);
}
@media (hover:hover) and (pointer:fine){.brand:hover{opacity:.82}}
.brand-mark{
  height:40px;width:auto;flex:0 0 auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.brand-type{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-name{
  font-size:1.06rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;
}
/* MINDESTENS 11 px. Diese Zeile ist der Grund fuer die ganze Wortmarke —
   sie darf nicht wieder unter die Lesbarkeitsschwelle rutschen (9,3 px waren
   es im ersten Anlauf, der Qualitaetsboden setzt 11 px fuer funktionalen
   Text). Die Laufweite traegt hier die Wirkung, nicht die Groesse. */
.brand-sub{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.145em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;
}
/* Alte Logo-Bilder bleiben als Klassen bestehen, werden aber nicht mehr
   eingebunden — kein Verweis, kein Ladegewicht. */
.brand-dark,.brand-light{display:none}

/* ---- Hauptnavigation ---------------------------------------------------- */
.mainnav{display:flex;gap:clamp(9px,1.05vw,19px);margin-left:auto;align-items:center}
.mainnav a{
  position:relative;
  color:var(--mist);font-weight:520;font-size:.925rem;letter-spacing:-.008em;
  padding:8px 2px;white-space:nowrap;
  transition:color var(--t-ui) var(--e-out);
}
/* Die Unterstreichung waechst von links — eine gerichtete Bewegung liest sich
   als Antwort, ein Ein-/Ausblenden nur als Zustandswechsel. */
.mainnav a::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:1.5px;
  background:var(--gold);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-ui) var(--e-out);
}
.mainnav a:hover,.mainnav a.hier{color:#fff}
.mainnav a.hier::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .mainnav a:hover::after{transform:scaleX(1)}
}

.top-actions{display:flex;align-items:center;gap:clamp(6px,.7vw,12px);flex:0 0 auto}
/* margin-left:auto sitzt bei sichtbarer Navigation an der Navigation; sobald
   die Navigation eingeklappt ist (display:none), verliert der Geschwister-
   Selektor seinen Schieber — dann muss der Aktionsblock selbst schieben.
   Genau daran klebte der Kopfinhalt am 09.09. links. Siehe 1180-px-Block. */
.top-actions .btn{white-space:nowrap}

.top-tel{
  display:inline-flex;align-items:center;gap:9px;
  color:#fff;font-family:var(--mono);font-size:.9rem;font-weight:500;
  letter-spacing:.01em;
  padding:8px 12px;border-radius:99px;
  min-width:44px;min-height:44px;justify-content:center;
  border:1px solid transparent;
  transition:background-color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out);
}
.top-tel svg{width:17px;height:17px;fill:var(--gold);flex:0 0 auto}
@media (hover:hover) and (pointer:fine){
  .top-tel:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
}

/* ---- Burger ------------------------------------------------------------- */
.burger{
  display:none;width:44px;height:44px;border-radius:12px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  transition:background-color var(--t-ui) var(--e-out);
}
.burger span{
  display:block;width:19px;height:1.6px;border-radius:2px;background:#fff;
  transition:transform var(--t-ui) var(--e-out),opacity 120ms linear;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.4)}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ---- Mobiles Menue ------------------------------------------------------ */
.mobilemenu{
  display:none;position:absolute;left:0;right:0;top:100%;
  flex-direction:column;gap:2px;
  padding:14px var(--pad) 22px;
  background:rgba(4,9,15,.94);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid rgba(200,164,92,.24);
  box-shadow:0 26px 50px -22px rgba(0,0,0,.9);
  max-height:calc(100svh - var(--head-h));overflow-y:auto;
}
.mobilemenu a{
  color:var(--mist);font-weight:520;font-size:1.04rem;
  padding:13px 4px;min-height:48px;display:flex;align-items:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mobilemenu a:last-of-type{border-bottom:0}
.mobilemenu .btn{margin-top:14px;justify-content:center;color:var(--navy-ink)}
.mobilemenu a:active{background:rgba(255,255,255,.05)}

/* ---- Ausklapp-Feld Baugutachten (Lichtscheibe im dunklen Kopf) ---------- */
.svpanel{
  position:absolute;left:0;right:0;top:100%;
  max-height:0;overflow:hidden;
  background:var(--pane-2);color:var(--ink);
  border-top:1px solid rgba(200,164,92,.4);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
  transition:max-height 460ms var(--e-drawer);
}
.svpanel.open{max-height:calc(100svh - var(--head-h));overflow-y:auto}
.svpanel-inner{
  position:relative;max-width:var(--wrap);margin:0 auto;
  padding:clamp(28px,4vw,52px) var(--pad) clamp(32px,4vw,56px);
}
.svpanel-close{
  position:absolute;top:14px;right:var(--pad);
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--ink-2);
  border:1px solid var(--line);background:var(--pane);
  transition:background-color var(--t-ui) var(--e-out),transform var(--t-tap) var(--e-out);
}
.svpanel-close:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){.svpanel-close:hover{background:var(--pane-3);color:var(--ink)}}
.svpanel-lead{color:var(--ink-2);margin:0 0 26px;max-width:72ch;font-size:1.02rem}
/* Die zwei Leistungen sind Ebenen auf der Lichtscheibe, KEINE Karten darin.
   Bis 10.09.2026 lagen sie als weisse Karten mit Rahmen, Radius und Schatten
   auf der Flaeche .svpanel, die selbst schon Grund und Schatten traegt — das
   ist der „Kasten im Kasten", den DESIGN.md § 5 ausschliesst. Die Trennung
   kommt jetzt aus Haarlinie (senkrecht getrennt durch den Spaltenabstand) und
   Luft, wie beim Vorbild .promise-grid. Nebeneffekt, bewusst: der Text steht
   nun auf --pane-2 statt auf Weiss (nachgemessen, AA/AAA bleiben erfuellt). */
.svpanel-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(30px,3.6vw,56px);row-gap:clamp(22px,2.6vw,34px);
}
.svpanel-card{
  padding:22px 0 0;
  border-top:1px solid var(--line);
}
.svpanel-card>b{
  display:block;font-size:1.14rem;font-weight:660;letter-spacing:-.02em;
  color:var(--navy-ink);margin-bottom:6px;
}
.svpanel-card-lead{color:var(--ink-2);font-size:.96rem;margin-bottom:14px}
.svpanel-card ul{display:grid;gap:11px}
.svpanel-card li{
  position:relative;padding-left:20px;font-size:.95rem;color:var(--ink-2);line-height:1.55;
}
.svpanel-card li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--gold);transform:rotate(45deg);
}
.svpanel-card li b{color:var(--ink)}
.svpanel-note{
  margin:22px 0 24px;padding:14px 18px;
  background:var(--pane-3);border-radius:var(--r-s);
  font-size:.92rem;color:var(--ink-2);max-width:80ch;
  border-left:1px solid var(--gold);
}
.svpanel-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.svpanel-tel{
  font-family:var(--mono);font-weight:500;color:var(--navy);
  text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:rgba(0,60,96,.35);
}

/* ================================================================ HERO ==== */
.hero{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
  padding-bottom:0;
}
/* ---- Hochformat: der Hero darf nicht bildschirmhoch werden ---------------
   `min-height:100svh` zusammen mit `justify-content:flex-end` funktioniert im
   Breitformat, reisst im Hochformat aber ein Loch: der Inhalt braucht rund
   620 px, alles darueber wird leeres Foto. Gemessen (Kopfunterkante bis
   Abschnittsmarke): 768x1024 = 335 px leer (33 % der Bildhoehe) ·
   834x1112 = 424 px (38 %) · 1024x1366 = 643 px (47 %). Ein Deckel von 860 px
   laesst dem Bild seine Wirkung (860 px sind mehr als jede Laptop-Sichthoehe)
   und bringt das Loch auf 137–172 px zurueck. 860 liegt sicher ueber dem
   groessten gemessenen Inhaltsbedarf (689 px bei 768 px Breite).
   Nur ab 761 px, damit Handys hochkant unberuehrt bleiben. */
@media (orientation:portrait) and (min-width:761px){
  .hero{min-height:min(100svh,860px)}
}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:58% 50%}
/* Der Verlauf ist bewusst dreistufig: oben dunkel fuer den Kopf, in der Mitte
   fast offen (damit das Haus zu sehen ist), unten dunkel fuer die Schriftzone.
   Ein gleichmaessiger Schleier wuerde das Foto entwerten. */
.hero-shade{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(180deg,rgba(4,9,15,.80) 0%,rgba(4,9,15,.36) 24%,rgba(4,9,15,.30) 46%,rgba(4,9,15,.80) 76%,var(--void) 100%),
    linear-gradient(96deg,rgba(4,9,15,.90) 0%,rgba(4,9,15,.66) 44%,rgba(4,9,15,.30) 66%,rgba(4,9,15,.04) 84%);
}
/* Der EINE gestaltete Moment der Seite: ein Lichtkeil laeuft nach dem Laden
   genau einmal ueber das Bild — wie ein Rollladen, der aufgeht. Danach ist
   Ruhe. Alles andere auf der Seite reagiert nur noch auf den Besucher. */
.hero-sweep{
  position:absolute;inset:-10% -30%;z-index:-1;pointer-events:none;
  background:linear-gradient(104deg,transparent 30%,rgba(230,207,154,.16) 46%,rgba(255,255,255,.10) 52%,transparent 68%);
  transform:translateX(-70%);
  animation:lichtkeil 1900ms 260ms var(--e-out) both;
}
@keyframes lichtkeil{
  from{transform:translateX(-70%);opacity:0}
  18%{opacity:1}
  to{transform:translateX(70%);opacity:0}
}

.hero-inner{
  position:relative;
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:calc(var(--head-h) + clamp(48px,9vh,110px)) var(--pad) clamp(26px,4vh,44px);
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;
}
.h1-l{display:block}
/* Zeilenweiser Auftritt: 12 px Hub + Unschaerfe, die aufklart. Die Unschaerfe
   ist hier kein Effekt, sondern die Bildsprache des Produkts — Glas, das
   scharf wird. 90 ms Versatz, insgesamt unter 900 ms. */
.h1-l{animation:zeileauf 760ms var(--e-out) both}
.h1-l:nth-child(1){animation-delay:120ms}
.h1-l:nth-child(2){animation-delay:210ms}
.h1-l:nth-child(3){animation-delay:300ms}
@keyframes zeileauf{
  from{opacity:0;transform:translateY(14px);filter:blur(9px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.h1-accent{color:var(--gold-hi)}
h1{margin-bottom:22px;max-width:19ch}

.hero .eyebrow{
  color:var(--gold-hi);margin-bottom:20px;max-width:520px;
  animation:sanftauf 620ms 60ms var(--e-out) both;
}
.hero-sub{
  font-size:clamp(1.04rem,1.55vw,1.2rem);line-height:1.55;
  color:var(--mist);max-width:56ch;margin-bottom:clamp(24px,3.6vh,38px);
  animation:sanftauf 700ms 400ms var(--e-out) both;
}
@keyframes sanftauf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.hero-cta{
  display:flex;flex-wrap:wrap;gap:14px;
  animation:sanftauf 700ms 500ms var(--e-out) both;
}
.hero-cta .btn-ghost{font-family:var(--mono);font-weight:500;letter-spacing:.01em}

/* ---- Glas-Leiste mit den vier Zusagen ---------------------------------- */
/* Die Leiste ist die „Typenschild"-Zone: gefasstes Glas, Messmarken in
   Monospace, gleichmaessige Spalten. Sie traegt genau die Zusagen, die im
   Angebot auch schriftlich stehen. */
.trustbar{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--pad) clamp(16px,3vh,30px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  animation:sanftauf 760ms 620ms var(--e-out) both;
}
.trustbar span{
  position:relative;
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.775rem;font-weight:450;
  letter-spacing:.015em;line-height:1.35;
  color:var(--mist);
  padding:16px 18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
/* Gezeichneter Haken statt des Schriftzeichens: gleiche Winkel und
   Strichstaerke wie in den Nutzenlisten — ein Symbolsystem, keine Glyphe. */
.trustbar span::before{
  content:'';flex:0 0 auto;
  width:14px;height:8px;
  border-left:1.7px solid var(--gold);
  border-bottom:1.7px solid var(--gold);
  transform:rotate(-45deg) translate(1px,-2px);
}
.trustbar span:first-child{border-radius:var(--r) 0 0 var(--r)}
.trustbar span:last-child{border-radius:0 var(--r) var(--r) 0}
.trustbar span:not(:first-child){border-left:0}

.scrollcue{
  position:relative;z-index:2;
  margin:0 auto clamp(12px,2vh,20px);
  width:22px;height:34px;border-radius:12px;
  border:1px solid rgba(255,255,255,.28);
  display:flex;justify-content:center;padding-top:6px;
}
.scrollcue span{
  width:2px;height:7px;border-radius:2px;background:var(--gold);
  /* Sechs Laeufe, dann Ruhe: ein Wegweiser, der einmal zeigt, wohin es geht —
     keine Dauerschleife, die Aufmerksamkeit an sich bindet. */
  animation:cue 1900ms var(--e-io) 6;
}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.35}45%{transform:translateY(11px);opacity:1}}

/* ============================================================ MANIFEST ==== */
.manifest{position:relative;padding:clamp(80px,13vh,150px) 0 clamp(72px,11vh,132px)}
.manifest-line{
  font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:700;
  letter-spacing:-.038em;line-height:1.04;color:#fff;margin-bottom:26px;
}
.manifest-line em{font-style:normal;color:var(--gold-hi)}
.manifest-sub{
  font-size:clamp(1.04rem,1.5vw,1.18rem);line-height:1.62;
  color:var(--mist-2);max-width:64ch;margin-bottom:30px;
}
.proofchips{display:flex;flex-wrap:wrap;gap:10px;max-width:none}
.proofchips span{
  font-family:var(--mono);font-size:.755rem;font-weight:480;letter-spacing:.055em;
  text-transform:uppercase;color:var(--gold-hi);
  padding:9px 15px;border-radius:99px;
  border:1px solid rgba(200,164,92,.38);
  background:rgba(200,164,92,.07);
}

/* ======================================================= LEISTUNGS-RAIL === */
.rail{position:relative;padding:0 0 clamp(72px,10vh,120px)}
.rail-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;
}
/* Fuenf Lichtscheiben. Beim Zeigen hebt sich die Karte, das Kantenlicht am
   oberen Rand wird kraeftiger, das Piktogramm wandert 2 px nach oben —
   drei winzige Bewegungen, die zusammen „anfassbar" ergeben. */
.railcard{
  --edge:rgba(255,255,255,.10);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
  padding:26px 20px 22px;border-radius:var(--r-l);
  background-color:rgba(255,255,255,.05);background-image:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--edge);
  color:#fff;
  transition:transform var(--t-panel) var(--e-out),
             border-color var(--t-panel) var(--e-out),
             box-shadow var(--t-panel) var(--e-out),
             background-color var(--t-panel) var(--e-out);
}
.railcard::before{
  content:'';position:absolute;left:14%;right:14%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,164,92,.65),transparent);
  opacity:.5;transition:opacity var(--t-panel) var(--e-out),left var(--t-panel) var(--e-out),right var(--t-panel) var(--e-out);
}
.railcard-ico{display:block;width:52px;height:52px;margin-bottom:12px;transition:transform var(--t-panel) var(--e-out)}
.railcard-ico svg{width:100%;height:100%}
.railcard b{margin-top:auto;font-size:1.1rem;font-weight:640;letter-spacing:-.022em}
.railcard i{
  font-style:normal;font-family:var(--mono);font-size:.72rem;font-weight:450;
  letter-spacing:.055em;text-transform:uppercase;color:var(--gold);
}
.railcard::after{
  content:'→';position:absolute;right:20px;bottom:20px;
  font-size:.95rem;color:var(--gold);opacity:0;
  transform:translateX(-6px);
  transition:opacity var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .railcard:hover{
    --edge:rgba(200,164,92,.42);
    transform:translateY(-4px);
    background-color:rgba(255,255,255,.09);background-image:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
    box-shadow:var(--lift-3);
  }
  .railcard:hover::before{opacity:1;left:4%;right:4%}
  .railcard:hover .railcard-ico{transform:translateY(-2px)}
  .railcard:hover::after{opacity:1;transform:translateX(0)}
}
.railcard:active{transform:scale(.985)}
/* Piktogramm-Striche der Leistungssymbole */
/* Die Leistungssymbole werden an ZWEI Orten benutzt: auf den Nacht-Karten der
   Leistungsleiste und auf den WEISSEN Auswahlflaechen im Planer. Deshalb haengen
   ihre Farben an Tokens, die der Kontext umschaltet — sonst verschwindet auf
   Weiss die halbe Zeichnung. */
:root{
  --ico-frame:var(--gold);
  --ico-glass-f:rgba(207,224,238,.16);
  --ico-glass-s:rgba(207,224,238,.45);
  --ico-line:rgba(207,224,238,.55);
  --ico-mesh:rgba(207,224,238,.45);
}
.opt,.wizard,.ch-light,.ablauf,.stimmen,.region,.faq,.ebbox{
  --ico-frame:var(--gold-ink);
  --ico-glass-f:#dbe8f2;
  --ico-glass-s:#8fb0c6;
  --ico-line:#5d7c93;
  --ico-mesh:#6d8ba1;
}
.i-frame{fill:none;stroke:var(--ico-frame);stroke-width:2.2}
.i-glass{fill:var(--ico-glass-f);stroke:var(--ico-glass-s);stroke-width:1.2}
.i-line{stroke:var(--ico-line);stroke-width:1.6;fill:none}
.i-mesh{stroke:var(--ico-mesh);stroke-width:1;fill:none}
.i-gold{fill:var(--gold)}
/* Die Leistungssymbole standen vorher auf hellen Karten und trugen deshalb
   fest eingebaute Navy-Fuellungen (#10344f). Auf den neuen Nacht-Karten waeren
   sie unsichtbar gewesen — deshalb sind sie jetzt Klassen und werden hier
   gesetzt: gedeckte Blauflaeche fuer Koerper, Gold fuer Stoff und Volant. */
.i-solid{fill:#1c3d57}
.i-solid-2{fill:#8f7133}

/* =============================================================== KAPITEL == */
.chapter{position:relative;padding:var(--sec) 0}
.chapter-grid{
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:clamp(32px,4.5vw,72px);align-items:center;
}
.chapter-grid.rev .chapter-copy{order:1}
.chapter-grid.rev .chapter-stage{order:2}
.chapter-copy>*+*{margin-top:18px}
.chapter-copy .eyebrow{margin-top:0}
.chapter-copy h2{margin-bottom:0}
.sticky-stage{position:relative}
@media (min-width:981px){
  .sticky-stage{position:sticky;top:calc(var(--head-h) + 40px)}
}
.chapter-stage svg{width:100%;height:auto;border-radius:var(--r-l)}

/* ---- Lichtscheiben-Kapitel (Fenster · Sonnenschutz · Insektenschutz) ---
   Der Abschnitt ist eine grosse, gefasste Lichtscheibe, die auf der Nacht
   liegt: heller Grund, feine Kante, echter Versatz-Schatten. */
.ch-light{
  margin:0 var(--pad);padding:clamp(46px,6vw,84px) 0;
  background-color:var(--pane);background-image:linear-gradient(180deg,var(--pane) 0%,var(--pane-2) 100%);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--lift-pane);
  color:var(--ink);
}
.ch-light{margin-top:clamp(28px,4vh,56px)}
.ch-light+.ch-light{margin-top:var(--sec)}
.ch-light .wrap{padding-left:clamp(20px,3.4vw,44px);padding-right:clamp(20px,3.4vw,44px)}
.ch-light p{color:var(--ink-2)}
.ch-light p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,60,96,.4)}
.ch-light .chapter-stage svg{box-shadow:var(--lift-1);border:1px solid var(--line)}

/* ---- Nacht-Kapitel (Haustueren) --------------------------------------- */
.ch-dark{background-color:rgba(11,30,48,.6);background-image:linear-gradient(180deg,rgba(11,30,48,0) 0%,rgba(11,30,48,.4) 22%,rgba(11,30,48,.4) 78%,rgba(11,30,48,0) 100%)}
.ch-dark h2,.ch-dark h3{color:#fff}
.ch-dark p{color:var(--mist-2)}

/* ---- Daemmerungs-Kapitel (Markisen) ----------------------------------- */
.ch-dusk{position:relative}
.ch-dusk::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(900px 620px at 76% 46%,rgba(168,132,61,.19),transparent 66%);
}
.ch-dusk h2,.ch-dusk h3{color:#fff}
.ch-dusk p{color:var(--mist-2)}

/* ---- Nutzenlisten ----------------------------------------------------- */
.benefits{display:grid;gap:14px;max-width:62ch}
.benefits li{
  position:relative;padding-left:30px;line-height:1.55;color:var(--ink-2);
}
/* Der Haken ist gezeichnet, kein Unicode-Zeichen: gleiche Strichstaerke wie
   die Leistungssymbole, gleiche Ecke, gleiche Farbe. */
.benefits li::before{
  content:'';position:absolute;left:0;top:.42em;
  width:17px;height:17px;border-radius:5px;
  border:1px solid rgba(125,95,34,.42);
  background:rgba(200,164,92,.13);
}
.benefits li::after{
  content:'';position:absolute;left:5px;top:.78em;
  width:7px;height:3.5px;
  border-left:1.6px solid var(--gold-ink);
  border-bottom:1.6px solid var(--gold-ink);
  transform:rotate(-45deg);
}
.benefits li b{color:var(--ink);font-weight:640}
.benefits.light li{color:var(--mist-2)}
.benefits.light li b{color:#fff}
.benefits.light li::before{border-color:rgba(200,164,92,.5);background:rgba(200,164,92,.12)}
.benefits.light li::after{border-left-color:var(--gold-hi);border-bottom-color:var(--gold-hi)}

/* ---- Preis-Orientierung ----------------------------------------------- */
/* Das ist der ehrlichste Kasten der Seite — deshalb bekommt er die Form eines
   Typenschilds: Messwerte in Monospace, feine Kante, kein Ausruf. */
.pricehint{
  display:grid;gap:6px;max-width:60ch;
  padding:18px 20px;border-radius:var(--r);
  background:var(--pane-3);
  border:1px solid var(--line);
  border-left:1px solid var(--gold);
  font-size:.98rem;color:var(--ink-2);
}
.pricehint>b:first-child{
  font-family:var(--mono);font-size:.72rem;font-weight:520;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-ink);
}
.pricehint b{color:var(--ink);font-weight:660}
.pricehint small{display:block;font-size:.82rem;line-height:1.5;color:var(--ink-3)}
.pricehint.dark{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
  border-left-color:var(--gold);
  color:var(--mist-2);
}
.pricehint.dark>b:first-child{color:var(--gold-hi)}
.pricehint.dark b{color:#fff}
.pricehint.dark small{color:var(--mist-2);opacity:.85}

/* ---- Erklaertexte an den Schemazeichnungen ---------------------------- */
.scene-hint{
  margin-top:16px;padding:14px 18px;border-radius:var(--r-s);
  background:rgba(15,51,79,.05);
  border:1px solid var(--line);
  font-size:.9rem;line-height:1.55;color:var(--ink-2);
}
.scene-hint .nur-motion{color:var(--gold-ink);font-weight:560}
.ch-dark .scene-hint,.ch-dusk .scene-hint{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:var(--mist-2);
}

/* ---- Sonnenstand-Regler ------------------------------------------------ */
.sunslider{display:block;margin-top:18px}
.sunslider>span{
  display:block;font-family:var(--mono);font-size:.74rem;font-weight:480;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px;
}
.sunslider input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:44px;background:transparent;cursor:grab;
}
.sunslider input[type=range]:active{cursor:grabbing}
.sunslider input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;
  background:linear-gradient(90deg,rgba(15,51,79,.22),var(--gold),rgba(15,51,79,.22));
}
.sunslider input[type=range]::-moz-range-track{
  height:4px;border-radius:99px;
  background:linear-gradient(90deg,rgba(15,51,79,.22),var(--gold),rgba(15,51,79,.22));
}
.sunslider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;border-radius:50%;margin-top:-11px;
  background:radial-gradient(circle at 34% 30%,#f6e3b4,var(--gold-btn));
  border:1px solid var(--gold-edge);
  box-shadow:0 2px 8px rgba(2,6,12,.4);
  transition:transform var(--t-tap) var(--e-out);
}
.sunslider input[type=range]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f6e3b4,var(--gold-btn));
  border:1px solid var(--gold-edge);
  box-shadow:0 2px 8px rgba(2,6,12,.4);
}
.sunslider input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}

/* ---- Chips (Tuer-Konfigurator, Galerie) ------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.cfg-label{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-hi);margin:20px 0 9px;
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 16px;border-radius:99px;
  font-size:.92rem;font-weight:520;
  color:var(--mist);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.18);
  transition:transform var(--t-tap) var(--e-out),
             background-color var(--t-ui) var(--e-out),
             border-color var(--t-ui) var(--e-out),
             color var(--t-ui) var(--e-out);
}
.chip:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .chip:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.32);color:#fff}
}
.chip.on{
  background:var(--gold-btn);color:var(--navy-ink);
  border-color:var(--gold-edge);font-weight:620;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
.chip.swatch span{
  width:17px;height:17px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);flex:0 0 auto;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.chip.on.swatch span{border-color:rgba(15,51,79,.45)}
/* Chips auf Lichtscheiben (Galerie liegt auf Nacht — hier nur der Fall
   „heller Grund", damit die Klasse ueberall funktioniert) */
.ch-light .chip,.stimmen .chip,.ablauf .chip{
  color:var(--ink-2);background:var(--pane);border-color:var(--line);
}
.ch-light .chip.on,.stimmen .chip.on,.ablauf .chip.on{
  color:var(--navy-ink);background:var(--gold-btn);border-color:var(--gold-edge);
}

/* ============================================================== PREMIUM === */
.premium{position:relative;padding:var(--sec) 0}
.premium::before{
  content:'';position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,164,92,.34) 30%,rgba(200,164,92,.34) 70%,transparent);
}
.premium .lead{margin-bottom:clamp(38px,5vw,64px)}
/* Vier Versprechen als Raster mit HAARLINIEN statt Karten: die Trennung
   entsteht aus Licht, nicht aus Kaesten. Kaesten waeren hier der bequeme
   Behaelter — und vier gleich grosse Kaesten sind kein Aufbau. */
.promise-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid rgba(255,255,255,.11);
}
.promise{
  position:relative;
  padding:clamp(26px,3vw,40px) clamp(22px,2.6vw,38px);
  border-bottom:1px solid rgba(255,255,255,.11);
  transition:background-color var(--t-panel) var(--e-out);
}
.promise:nth-child(odd){border-right:1px solid rgba(255,255,255,.11)}
.promise::before{
  content:'';position:absolute;left:0;top:-1px;width:0;height:1px;
  background:var(--gold);
  transition:width 420ms var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .promise:hover{background:rgba(255,255,255,.035)}
  .promise:hover::before{width:100%}
}
.promise h3{font-size:clamp(1.16rem,1.8vw,1.42rem);color:#fff;margin-bottom:12px}
.promise p{color:var(--mist-2);font-size:.99rem;margin-bottom:14px}
.proof{
  display:block;font-family:var(--mono);font-size:.775rem;font-weight:450;
  line-height:1.5;letter-spacing:.01em;color:var(--gold-hi);
  padding-top:12px;border-top:1px solid rgba(200,164,92,.22);
}

/* ---- Vergleichs-Checkliste ------------------------------------------- */
.vergleich{
  margin-top:clamp(40px,5vw,72px);
  padding:clamp(28px,3.4vw,48px);
  border-radius:var(--r-l);
  background-color:var(--void-3);background-image:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid rgba(200,164,92,.26);
  box-shadow:var(--lift-2);
}
.vergleich h3{font-size:clamp(1.3rem,2.4vw,1.8rem);color:var(--gold-hi);margin-bottom:10px;letter-spacing:-.028em}
.vergleich>p{color:var(--mist-2);margin-bottom:22px}
.checkliste{display:grid;gap:13px;counter-reset:pruef}
.checkliste li{
  position:relative;padding-left:38px;color:var(--mist);line-height:1.55;font-size:.99rem;
  counter-increment:pruef;
}
/* Hier tragen die Nummern Information: es ist eine Pruefliste, die man
   Punkt fuer Punkt am fremden Angebot durchgeht. */
.checkliste li::before{
  content:counter(pruef,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:.74rem;font-weight:520;letter-spacing:.04em;
  color:var(--gold);
  width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(200,164,92,.32);
  background:rgba(200,164,92,.08);
}
.checkliste li b{color:#fff}
.vergleich-schluss{
  margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  color:var(--gold-hi);font-size:1.02rem;
}

/* ================================================================ ABLAUF == */
.ablauf{
  margin:var(--sec) var(--pad);
  padding:clamp(46px,6vw,84px) 0;
  background-color:var(--pane);background-image:linear-gradient(180deg,var(--pane) 0%,var(--pane-2) 100%);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--lift-pane);
  color:var(--ink);
}
.ablauf .wrap{padding-left:clamp(20px,3.4vw,44px);padding-right:clamp(20px,3.4vw,44px)}
.steps{position:relative;margin-top:clamp(34px,4vw,54px)}
/* Ein Lichtstrahl, der beim Scrollen mitwaechst — die Anzeige „wo im Ablauf
   sind wir". app.js setzt die Breite von #stepsFill. */
.steps-line{
  position:relative;height:2px;border-radius:2px;
  background:var(--line);margin-bottom:26px;overflow:hidden;
}
.steps-line span{
  display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-ink),var(--gold));
  box-shadow:0 0 12px rgba(200,164,92,.6);
  transition:width 620ms var(--e-out);
}
.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,24px)}
.step{
  position:relative;padding-top:20px;
  border-top:1px solid var(--line);
  transition:border-color var(--t-panel) var(--e-out);
}
.step::before{
  content:'';position:absolute;left:0;top:-4px;width:7px;height:7px;
  border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 3px var(--pane),0 0 10px rgba(200,164,92,.7);
}
.step b{
  display:block;font-family:var(--mono);font-size:.775rem;font-weight:520;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:9px;
}
.step p{font-size:.94rem;line-height:1.55;color:var(--ink-2);max-width:none}
.step p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}

.speedzusage{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  margin-top:clamp(34px,4vw,52px);
  padding:22px 26px;border-radius:var(--r);
  background:var(--pane-3);border:1px solid var(--line);
  font-size:1.02rem;color:var(--ink-2);
}
.speedzusage b{color:var(--ink)}
.speedzusage .btn{margin-left:auto}

/* =============================================================== PARTNER == */
.partner{padding:var(--sec) 0 0}
.partner-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,26px);margin-top:clamp(30px,3.6vw,48px);
}
.partnercard{
  display:flex;flex-direction:column;
  padding:26px 26px 28px;border-radius:var(--r-l);
  background-color:rgba(255,255,255,.05);background-image:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.11);
  transition:transform var(--t-panel) var(--e-out),
             border-color var(--t-panel) var(--e-out),
             box-shadow var(--t-panel) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .partnercard:hover{transform:translateY(-3px);border-color:rgba(200,164,92,.34);box-shadow:var(--lift-2)}
}
/* Hersteller-Logos sind fremde Marken — sie bekommen ihre eigene, HELLE
   Plakette. Ein Markenlogo auf dunklem Grund einzufaerben oder zu invertieren
   waere ein Eingriff in die Marke des Herstellers. */
/* Die Hersteller-Plakette ist KEINE Karte in der Karte, sondern das KOPFBAND
   der Karte: sie laeuft bis an die Kartenkante und ist unten von einer
   Haarlinie abgesetzt. Weiss muss sie sein — ein fremdes Markenlogo darf man
   nicht umfaerben oder invertieren, das waere ein Eingriff in die Marke des
   Herstellers. */
.partnerlogo{
  display:flex;align-items:center;justify-content:center;
  height:92px;padding:16px 24px;
  margin:-26px -26px 22px;
  background-color:var(--pane);
  border-radius:var(--r-l) var(--r-l) 0 0;
  border:0;border-bottom:1px solid rgba(255,255,255,.5);
}
.partnerlogo img{max-height:56px;width:auto;object-fit:contain}
.partnerlogo.wortmarke span{
  font-family:var(--font);font-size:1.28rem;font-weight:680;
  letter-spacing:.14em;color:var(--navy-ink);
}
.partnercard h3{color:#fff;margin-bottom:10px}
.partnercard p{color:var(--mist-2);font-size:.96rem;max-width:none}

/* =============================================================== GALERIE == */
.galerie{padding:var(--sec) 0}
.gal-chips{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 22px}
.gal-slider{position:relative;margin-top:8px}
.gal-viewport{
  overflow:hidden;border-radius:var(--r-l);
  border:1px solid rgba(255,255,255,.13);
  background:var(--void-3);
  box-shadow:var(--lift-3);
}
.gal-track{display:flex;transition:transform 620ms var(--e-out);will-change:transform}
.gal-track.no-anim{transition:none}
/* Hoehe MUSS an der Bildbahn begrenzt werden, nicht am Bild: unter den 13
   Motiven sind drei Hochformate. Ohne die Fassung hier streckt der Flex-Kasten
   alle Bahnen auf die Hoehe des hoechsten Bildes (gemessen 2.100 px statt 750).
   Gleiche Loesung wie im Bestand, bewusst uebernommen. */
.gal-slide{flex:0 0 100%;position:relative;aspect-ratio:3/2;max-height:66vh}
.gal-slide img{width:100%;height:100%;object-fit:cover;display:block}
.gal-pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;line-height:1;color:#fff;
  background:rgba(4,9,15,.62);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:background-color var(--t-ui) var(--e-out),transform var(--t-tap) var(--e-out);
}
.gal-pfeil:active{transform:translateY(-50%) scale(.93)}
@media (hover:hover) and (pointer:fine){
  .gal-pfeil:hover{background:rgba(4,9,15,.86);border-color:var(--gold)}
}
.gal-zurueck{left:14px}
.gal-weiter{right:14px}
.gal-fuss{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
  margin-top:16px;
}
.gal-caption{font-size:.95rem;color:var(--mist-2);flex:1 1 auto}
.gal-counter{font-family:var(--mono);font-size:.78rem;font-weight:480;letter-spacing:.08em;color:var(--gold)}
/* app.js erzeugt die Punkte als <span>, nicht als <button> — die Regel muss
   deshalb auf span sitzen (sonst bleibt die Anzeige unsichtbar). */
.gal-dots{display:flex;gap:7px;margin-top:14px}
.gal-dots span{
  width:26px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.22);
  transition:background-color var(--t-ui) var(--e-out),transform var(--t-ui) var(--e-out);
}
.gal-dots span.on{background:var(--gold);transform:scaleY(1.8)}
.gal-hinweis{margin-top:20px;font-size:.92rem;color:var(--mist-2)}
.gal-hinweis a{text-decoration:underline;text-underline-offset:3px}

/* =============================================================== STIMMEN == */
.stimmen{
  margin:var(--sec) var(--pad);
  padding:clamp(46px,6vw,84px) 0;
  background-color:var(--pane);background-image:linear-gradient(180deg,var(--pane) 0%,var(--pane-2) 100%);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--lift-pane);
  color:var(--ink);
}
.stimmen .wrap{padding-left:clamp(20px,3.4vw,44px);padding-right:clamp(20px,3.4vw,44px)}
.google-kopf{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:0 0 28px;padding:18px 22px;
  border-radius:var(--r);background:var(--pane);
  border:1px solid var(--line);box-shadow:var(--lift-1);
}
.google-sterne{color:var(--star);letter-spacing:.14em;font-size:1.06rem}
.google-kopf b{font-size:1.24rem;font-weight:680;letter-spacing:-.02em;color:var(--ink)}
.google-anzahl{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-3)}
.google-link{
  margin-left:auto;color:var(--navy);font-weight:560;font-size:.94rem;
  text-decoration:underline;text-underline-offset:4px;
}
.google-zitate{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.zitat{
  position:relative;
  padding:26px 24px 22px;border-radius:var(--r);
  background:var(--pane);border:1px solid var(--line);
  box-shadow:var(--lift-1);
  transition:transform var(--t-panel) var(--e-out),box-shadow var(--t-panel) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .zitat:hover{transform:translateY(-2px);box-shadow:var(--lift-2)}
}
.zitat p{font-size:.99rem;line-height:1.62;color:var(--ink);max-width:none}
.zitat footer{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.79rem;font-weight:500;letter-spacing:.005em;color:var(--ink-3);
}
.zitat.google::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(200,164,92,.35) 42%,transparent 88%);
  border-radius:var(--r) var(--r) 0 0;
}
.zitate{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px);margin-top:22px}
.zitat-sterne{text-align:center}
.sterne-gross{font-size:1.7rem;color:var(--star);letter-spacing:.2em;margin-bottom:8px}
.sterne-text{font-size:.96rem;color:var(--ink-2)}

.fb-prozess{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(22px,3vw,40px);
  margin:clamp(30px,3.6vw,48px) 0;
  padding:clamp(24px,3vw,38px);border-radius:var(--r-l);
  background:var(--pane-3);border:1px solid var(--line);
}
.fb-prozess-text h3{color:var(--navy-ink);margin-bottom:10px}
.fb-prozess-text p{color:var(--ink-2);font-size:.98rem}
.fb-fragen{display:grid;gap:10px;align-content:start}
.fb-fragen-titel{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-ink);
}
/* Zeilen, keine Karten. Vorher standen hier drei weisse Kaesten INNERHALB des
   Feedback-Kastens — Kasten im Kasten ist immer falsch (Impeccable-Boden).
   Die Trennung kommt jetzt aus einer Haarlinie, nicht aus einem Behaelter. */
.fb-frage{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 2px;
  border-bottom:1px solid var(--line);
  font-size:.92rem;color:var(--ink-2);
}
.fb-frage:first-of-type{border-top:1px solid var(--line)}
.fb-sterne{color:var(--star);letter-spacing:.08em;flex:0 0 auto;font-size:.86rem}
.fb-fragen-rest{font-size:.84rem;color:var(--ink-3);font-style:normal}

.echtheit{
  margin-top:26px;padding:16px 20px;border-radius:var(--r-s);
  background:var(--pane);border:1px solid var(--line);
  border-left:1px solid var(--gold);
  font-size:.86rem;line-height:1.55;color:var(--ink-3);max-width:88ch;
}
.google-cta{margin-top:20px;font-size:1rem;color:var(--ink-2)}
.google-cta a{color:var(--navy);font-weight:560;text-decoration:underline;text-underline-offset:4px}
/* Bestandsklassen fuer die derzeit ausgeblendeten Referenzbilder */
.referenz-teaser{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.ref-bild{border-radius:var(--r);overflow:hidden}
.ref-bild.platzhalter{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  aspect-ratio:4/3;border:1px dashed var(--line);color:var(--ink-3);font-size:.9rem;
}
.ref-bild.platzhalter small{font-size:.78rem}

/* ================================================================ REGION == */
.region{
  margin:var(--sec) var(--pad);
  padding:clamp(46px,6vw,84px) 0;
  background-color:var(--pane);background-image:linear-gradient(180deg,var(--pane) 0%,var(--pane-2) 100%);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--lift-pane);
  color:var(--ink);
}
.region .wrap{padding-left:clamp(20px,3.4vw,44px);padding-right:clamp(20px,3.4vw,44px)}
.region-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,64px);align-items:start}
.region p{color:var(--ink-2)}
.region .chapter-stage svg{border:1px solid var(--line);box-shadow:var(--lift-1)}

.chef{
  display:flex;align-items:center;gap:16px;
  margin:26px 0;padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.chef-logo{
  width:58px;height:58px;flex:0 0 auto;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);
  box-shadow:0 2px 6px -2px rgba(2,6,12,.35);
}
.chef-logo img{width:36px;height:auto}
.chef-foto-echt{width:64px;height:64px;border-radius:16px;object-fit:cover;flex:0 0 auto}
.chef>div:last-child{display:flex;flex-direction:column;gap:1px}
.chef b{font-size:1.06rem;font-weight:660;color:var(--ink)}
.chef span{font-size:.88rem;color:var(--ink-3)}
.chef a{
  /* 5 px Polster: ohne sie ist das Beruehrziel genau 24 px hoch und liegt damit
     auf der AA-Grenze (WCAG 2.5.8). Mit Polster 34 px. */
  display:inline-block;padding:5px 0;
  font-family:var(--mono);font-size:.92rem;font-weight:500;color:var(--navy);
  text-decoration:underline;text-underline-offset:4px;margin-top:1px;
  width:fit-content;
}

.plz-check{
  margin:24px 0;padding:20px 22px;border-radius:var(--r);
  background:var(--pane-3);border:1px solid var(--line);
}
.plz-check label{display:block;font-size:.96rem;color:var(--ink-2);margin-bottom:12px}
.plz-check label b{color:var(--ink)}
.plz-row{display:flex;gap:10px;flex-wrap:wrap}
.plz-row input{
  flex:1 1 150px;min-width:0;
  font-family:var(--mono);font-size:1.02rem;letter-spacing:.1em;
  padding:13px 16px;min-height:50px;border-radius:99px;
  background:var(--pane);color:var(--ink);
  border:1px solid var(--line);
  transition:border-color var(--t-ui) var(--e-out),box-shadow var(--t-ui) var(--e-out);
}
.plz-row input:focus{border-color:var(--gold-ink);box-shadow:0 0 0 4px rgba(125,95,34,.13);outline:none}
.plz-row input::placeholder{color:var(--ink-3);opacity:.75;letter-spacing:.04em}
#plzResult{margin-top:14px;font-size:.95rem}
.notice{
  display:block;padding:13px 16px;border-radius:var(--r-s);
  font-size:.94rem;line-height:1.5;
}
.notice.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok)}
.notice.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn)}

.orte{margin-top:26px}
.orte>b{
  display:block;font-family:var(--mono);font-size:.72rem;font-weight:520;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px;
}
.orte p{font-size:.9rem;line-height:1.7;color:var(--ink-3);max-width:none;margin-bottom:8px}
.orte p span:first-child{
  display:block;font-weight:620;color:var(--ink-2);font-size:.86rem;
  letter-spacing:.01em;margin-bottom:1px;
}
.orte-note{font-style:normal;color:var(--ink-2)!important;margin-top:12px!important}

/* =================================================================== FAQ == */
.faq{
  margin:var(--sec) var(--pad);
  padding:clamp(46px,6vw,84px) 0;
  background-color:var(--pane);background-image:linear-gradient(180deg,var(--pane) 0%,var(--pane-2) 100%);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--lift-pane);
  color:var(--ink);
}
.faq .wrap{padding-left:clamp(20px,3.4vw,44px);padding-right:clamp(20px,3.4vw,44px)}
.faq-list{margin-top:26px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{
  position:relative;
  list-style:none;cursor:pointer;
  padding:20px 46px 20px 0;min-height:48px;
  font-size:1.04rem;font-weight:600;letter-spacing:-.016em;color:var(--navy-ink);
  transition:color var(--t-ui) var(--e-out);
}
.faq-list summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){
  .faq-list summary:hover{color:var(--gold-ink)}
}
/* Gezeichnetes Plus, das sich zum Minus dreht — kein Unicode-Pfeil. */
.faq-list summary::after,.faq-list summary::before{
  content:'';position:absolute;right:8px;top:calc(50% - .5px);
  width:13px;height:1.8px;border-radius:2px;background:var(--gold-ink);
  transition:transform var(--t-ui) var(--e-out),opacity var(--t-ui) var(--e-out);
}
.faq-list summary::before{transform:rotate(90deg)}
.faq-list details[open] summary::before{transform:rotate(0);opacity:0}
.faq-list details[open] summary{color:var(--gold-ink)}
.faq-list details p{
  padding:0 8px 22px 0;font-size:.98rem;line-height:1.65;color:var(--ink-2);max-width:74ch;
}
.faq-list details p a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.faq-list details[open] p{animation:faqauf 300ms var(--e-out) both}
@keyframes faqauf{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}

/* ================================================================ FUNNEL == */
.funnel{position:relative;padding:var(--sec) 0}
.funnel::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(820px 560px at 50% 30%,rgba(0,86,138,.28),transparent 68%);
}
.funnel .lead{margin-bottom:clamp(28px,3.6vw,44px)}
.wizard{
  border-radius:var(--r-xl);overflow:hidden;
  background:var(--pane);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--lift-pane);
  color:var(--ink);
}
.wizard-head{padding:22px clamp(20px,3vw,34px) 0}
.wizard-progress{
  height:4px;border-radius:2px;overflow:hidden;
  background-color:#e4e0d5;
}
.wizard-progress span{
  display:block;height:100%;width:16.6%;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-ink),var(--gold));
  box-shadow:0 0 10px rgba(200,164,92,.55);
  transition:width 460ms var(--e-out);
}
.wizard-step{
  margin-top:12px;font-family:var(--mono);font-size:.72rem;font-weight:520;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);
}
.wizard-body{padding:20px clamp(20px,3vw,34px) 26px}
.wizard-body h3{font-size:clamp(1.24rem,2.4vw,1.62rem);color:var(--navy-ink);margin-bottom:10px;letter-spacing:-.026em}
.wizard-body p{color:var(--ink-2)}
.wiz-sub{font-size:.95rem;color:var(--ink-3)!important;margin-bottom:16px}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:18px 0 6px}
/* Auswahlflaechen: die Kante wird gold, der Grund waermt sich an, und ein
   kleines Kantenlicht laeuft oben ein. Kein Haekchen-Symbol noetig. */
.opt{
  position:relative;overflow:hidden;
  text-align:left;padding:16px 18px;border-radius:var(--r);min-height:58px;
  font-size:1rem;font-weight:560;color:var(--ink);
  background:var(--pane-2);border:1px solid var(--line);
  transition:transform var(--t-tap) var(--e-out),
             border-color var(--t-ui) var(--e-out),
             background-color var(--t-ui) var(--e-out),
             box-shadow var(--t-ui) var(--e-out);
}
.opt:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .opt:hover{border-color:rgba(125,95,34,.45);background:var(--pane-3)}
}
.opt.on{
  border-color:var(--gold-edge);background:rgba(216,183,108,.18);
  box-shadow:0 0 0 1px var(--gold-edge) inset;font-weight:620;
}
.opt.on::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold);
  animation:optkante 320ms var(--e-out) both;
}
@keyframes optkante{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.wiz-fields{display:grid;gap:14px;margin-top:18px}
.wiz-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wizard label,.kontakt-form label,.wiz-fields label{
  display:block;font-family:var(--mono);font-size:.7rem;font-weight:520;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px;
}
.wizard input,.wizard textarea,.wizard select,
.kontakt-form input,.kontakt-form textarea,
.ebbox input,.ebbox textarea{
  width:100%;
  padding:14px 16px;min-height:52px;border-radius:var(--r-s);
  font-size:1rem;
  background:var(--pane-2);color:var(--ink);
  border:1px solid var(--line);
  transition:border-color var(--t-ui) var(--e-out),
             box-shadow var(--t-ui) var(--e-out),
             background-color var(--t-ui) var(--e-out);
}
.wizard textarea,.kontakt-form textarea{min-height:110px;resize:vertical;line-height:1.55}
.wizard input:focus,.wizard textarea:focus,
.kontakt-form input:focus,.kontakt-form textarea:focus,
.ebbox input:focus,.ebbox textarea:focus{
  outline:none;background:var(--pane);
  border-color:var(--gold-ink);
  box-shadow:0 0 0 4px rgba(125,95,34,.13);
}
.wizard input::placeholder,.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder,.ebbox input::placeholder{color:var(--ink-3);opacity:.7}
.feld-fehlt{border-color:var(--warn)!important;box-shadow:0 0 0 4px rgba(138,75,31,.12)!important}

.wiz-price{
  margin:18px 0;padding:18px 20px;border-radius:var(--r);
  background:var(--pane-3);border:1px solid var(--line);
  border-left:1px solid var(--gold);
  font-size:.98rem;color:var(--ink-2);
}
.wiz-price b{color:var(--ink)}
.wiz-summary{
  margin:16px 0;padding:16px 18px;border-radius:var(--r-s);
  background:var(--pane-2);border:1px solid var(--line);
  font-family:var(--mono);font-size:.85rem;line-height:1.7;color:var(--ink-2);
}
.wiz-summary b{font-family:var(--font);color:var(--ink)}
.wiz-done{text-align:center;padding:14px 0 6px}
.done-ico{
  width:62px;height:62px;margin:0 auto 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);
  font-size:1.7rem;
  animation:erledigt 520ms var(--e-out) both;
}
@keyframes erledigt{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
.wizard-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  padding:16px clamp(20px,3vw,34px) 20px;
  background:var(--pane-2);border-top:1px solid var(--line);
}
.wizard-back{
  font-size:.92rem;font-weight:560;color:var(--ink-2);
  min-height:44px;padding:8px 14px;border-radius:99px;
  transition:background-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .wizard-back:hover{background:var(--pane-3);color:var(--ink)}
}
.wizard-note{font-size:.8rem;line-height:1.5;color:var(--ink-3);margin-left:auto;max-width:52ch}
.wizard-note a,.form-note a,.ebnote a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.funnel-alt{margin-top:22px;text-align:center;color:var(--mist-2);font-size:.98rem}
.funnel-alt a{font-family:var(--mono);font-weight:500;text-decoration:underline;text-underline-offset:4px}

/* ========================================================= ERSTBERATUNG === */
.erstb{padding:0 0 var(--sec)}
.erstb .eyebrow{color:var(--gold-hi)}
.erstb .eyebrow::after{background:linear-gradient(90deg,rgba(200,164,92,.55),rgba(200,164,92,0))}
.erstb h2{color:#fff}
.erstb .lead{color:var(--mist-2)}
.ebbox{
  margin-top:26px;padding:clamp(22px,3vw,34px);
  border-radius:var(--r-xl);
  background:var(--pane);color:var(--ink);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--lift-pane);
}
.ebfall{color:var(--ink-2)}
.ebfall a,.ebbox a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.ebnote{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.8rem;line-height:1.5;color:var(--ink-3);
}
/* Terminraster: die Zeiten sind Messwerte, also Monospace und gleiche Breite. */
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;margin:14px 0 4px}
.slot{
  font-family:var(--mono);font-size:.92rem;font-weight:500;letter-spacing:.02em;
  min-height:48px;padding:12px 8px;border-radius:var(--r-s);
  background:var(--pane-2);color:var(--ink);border:1px solid var(--line);
  transition:transform var(--t-tap) var(--e-out),
             border-color var(--t-ui) var(--e-out),
             background-color var(--t-ui) var(--e-out);
}
.slot:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){
  .slot:hover{border-color:rgba(125,95,34,.5);background:var(--pane-3)}
}
.slot.on{background:var(--gold-btn);color:var(--navy-ink);border-color:var(--gold-edge);font-weight:620}
.slot[disabled],.slot.aus{opacity:.42;cursor:not-allowed;text-decoration:line-through}

/* =============================================================== KONTAKT == */
.kontakt{padding:0 0 var(--sec)}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.kontakt-list{display:grid;gap:2px;margin-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.kontakt-list li{
  display:grid;gap:3px;
  padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.kontakt-list b{
  font-family:var(--mono);font-size:.7rem;font-weight:520;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);
}
.kontakt-list a{
  font-size:1.14rem;font-weight:560;color:#fff;letter-spacing:-.016em;
  width:fit-content;
  border-bottom:1px solid rgba(200,164,92,.4);
  transition:border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .kontakt-list a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
}
.kontakt-list span{font-size:.9rem;color:var(--mist-2);line-height:1.5}
.kontakt-list span a{font-size:.95rem;font-weight:500}
.route-link{font-family:var(--mono);letter-spacing:.02em}

.kontakt-form{
  padding:clamp(24px,3vw,36px);border-radius:var(--r-xl);
  background:var(--pane);color:var(--ink);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--lift-pane);
  display:grid;gap:6px;
}
.kontakt-form h3{color:var(--navy-ink);margin-bottom:14px}
.kontakt-form label{margin-top:10px}
.kontakt-form .btn{margin-top:18px;justify-self:start}
.form-note{font-size:.8rem;line-height:1.5;color:var(--ink-3);margin-top:12px}
#kResult:not(:empty){margin-top:14px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* ================================================================ FOOTER == */
.footer{
  position:relative;
  padding:clamp(52px,6vw,84px) 0 0;
  border-top:1px solid rgba(255,255,255,.1);
  background-color:#050a11;background-image:linear-gradient(180deg,rgba(4,9,15,0),rgba(2,5,9,.6));
}
.footer::before{
  content:'';position:absolute;left:var(--pad);right:var(--pad);top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(200,164,92,.3) 40%,rgba(200,164,92,.3) 60%,transparent);
}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(24px,3vw,48px);padding-bottom:clamp(36px,4vw,56px);
}
.footer-grid img{height:52px;width:auto;margin-bottom:16px;opacity:.9}
.footer-grid b{
  display:block;font-family:var(--mono);font-size:.7rem;font-weight:520;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;
}
.footer-grid p{font-size:.9rem;line-height:1.75;color:var(--mist-2);max-width:38ch}
/* Die Fussbereich-Links stehen als Liste untereinander. Als reine Inline-Links
   waeren sie nur 19 px hoch — WCAG 2.5.8 (AA) verlangt 24 x 24 px, sobald ein
   Ziel nicht mitten im Fliesstext sitzt. Mit dem Polster sind es 31 px. */
.footer-grid p a{display:inline-block;padding:6px 0}
.footer-grid a{
  color:var(--mist-2);
  transition:color var(--t-ui) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .footer-grid a:hover{color:var(--gold-hi)}
}
.footer-marken{margin-top:14px;font-size:.78rem!important;color:#7d93a8!important;line-height:1.6!important}
.footer-base{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  max-width:var(--wrap);margin:0 auto;
  padding:20px var(--pad) 24px;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:.74rem;font-weight:450;letter-spacing:.03em;color:var(--mist-3);
}
/* Auf der Startseite steht hier nur Text, auf Impressum und Datenschutz stehen
   Links („Startseite · Datenschutz"). Gemessen waren sie 75 x 14 px — WCAG
   2.5.8 verlangt 24 x 24 px, und es sind Navigationslinks, nicht Links mitten
   im Fliesstext (fuer die die Ausnahme gilt). Das Polster wirkt nur senkrecht,
   damit der Trennpunkt „·" seinen Abstand behaelt. */
.footer-base a{display:inline-block;padding-block:5px;min-height:24px}

/* Sprung nach oben (app.js setzt .da) */
.nachoben{
  position:fixed;right:20px;bottom:24px;z-index:90;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.1rem;
  background:rgba(4,9,15,.7);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;pointer-events:none;transform:translateY(10px) scale(.94);
  transition:opacity var(--t-panel) var(--e-out),transform var(--t-panel) var(--e-out),
             background-color var(--t-ui) var(--e-out);
}
.nachoben.da{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
@media (hover:hover) and (pointer:fine){
  .nachoben:hover{background:rgba(4,9,15,.9);border-color:var(--gold)}
}
.nachoben:active{transform:scale(.92)}

/* ====================================================== MOBILE LEISTE ==== */
.mobilebar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  gap:1px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(4,9,15,.9);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid rgba(200,164,92,.26);
}
.mb-tel,.mb-cta{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;border-radius:99px;font-weight:620;font-size:.98rem;
  transition:transform var(--t-tap) var(--e-out);
}
.mb-tel:active,.mb-cta:active{transform:scale(.97)}
.mb-tel{
  color:#fff;background:rgba(255,255,255,.06);
  border:1px solid var(--mist-3);margin-right:8px;
  font-family:var(--mono);font-weight:500;
}
.mb-cta{
  color:var(--navy-ink);
  background-color:var(--gold-btn);background-image:linear-gradient(176deg,#e2c583,var(--gold-btn) 46%,#c9a55e);
  border:1px solid var(--gold-edge);
}

/* =================================================== DATENSCHUTZ-HINWEIS == */
.privacy{
  position:fixed;right:16px;left:auto;bottom:16px;z-index:150;
  max-width:430px;
  padding:20px 22px;border-radius:var(--r-l);
  background:var(--pane);color:var(--ink);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:var(--lift-3);
  animation:hinweisauf 420ms 700ms var(--e-out) both;
}
@keyframes hinweisauf{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
.privacy p{font-size:.86rem;line-height:1.6;color:var(--ink-2);margin-bottom:16px;max-width:none}
.privacy p b{color:var(--ink)}
.privacy a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.privacy[hidden]{display:none}

/* ============================================== REVEAL BEIM SCROLLEN ====== */
/* EIN Muster fuer die ganze Seite: 10 px Hub aus einem bereits sichtbaren
   Grundzustand. Kein Element startet bei opacity:0 ohne JS — wer JavaScript
   aus hat, sieht die vollstaendige Seite (.js wird von app.js gesetzt). */
.js [data-reveal]{
  opacity:0;transform:translateY(12px);
  transition:opacity 620ms var(--e-out),transform 620ms var(--e-out);
}
.js [data-reveal].in{opacity:1;transform:translateY(0)}
/* Gestaffelte Kinder in Rastern: 60 ms Versatz, hoert nach dem 6. Kind auf. */
.js .promise-grid .promise:nth-child(2){transition-delay:60ms}
.js .promise-grid .promise:nth-child(3){transition-delay:120ms}
.js .promise-grid .promise:nth-child(4){transition-delay:180ms}
.js .steps-grid .step:nth-child(2){transition-delay:60ms}
.js .steps-grid .step:nth-child(3){transition-delay:120ms}
.js .steps-grid .step:nth-child(4){transition-delay:180ms}
.js .steps-grid .step:nth-child(5){transition-delay:240ms}
.js .partner-grid .partnercard:nth-child(2){transition-delay:70ms}
.js .partner-grid .partnercard:nth-child(3){transition-delay:140ms}
.js .google-zitate .zitat:nth-child(2){transition-delay:70ms}
.js .google-zitate .zitat:nth-child(3){transition-delay:140ms}


/* ================================================== SZENEN (Mechanik) ===== */
/* Diese Regeln steuern die interaktiven Schemazeichnungen. Sie sind Mechanik,
   nicht Optik — Werte und Selektoren aus dem Bestand uebernommen, damit die
   Zeichnungen nach der Neugestaltung genauso funktionieren wie vorher
   (app.js setzt --p von 0 bis 1 auf [data-scrub], nicht die Breite). */

/* Szene Fenster: die drei Scheiben fahren beim Scrollen auseinander */
.scene-fenster .pane{transition:transform .1s linear}
[data-scrub] .pane-1{transform:translateX(calc(var(--p,0) * -46px))}
[data-scrub] .pane-3{transform:translateX(calc(var(--p,0) * 46px))}
.scene-fenster .pane-labels{opacity:calc((var(--p,0) - .35) * 2.2)}
.scene-fenster .cold path{stroke-dasharray:70;stroke-dashoffset:calc(70 - var(--p,0) * 70)}
.scene-fenster .warm{opacity:calc(.35 + var(--p,0) * .65)}
.fen-rahmen rect{transition:none}

/* Szene Haustuer: Farbe, Modell und Griff wechseln weich */
.door-config{margin:22px 0 4px}
#tuerFill,#tuerSeitenRahmen{transition:fill 380ms var(--e-out)}
#tuerLichtband,#tuerKassetten,#tuerLandhaus,
#griffStange,#griffBuegel,#griffKnauf{transition:opacity 320ms var(--e-out)}
.griffFill{transition:fill 380ms var(--e-out)}
.griffStroke{transition:stroke 380ms var(--e-out)}

/* Szene Sonnenschutz: Lamellen folgen dem Regler */
#lamellen rect{transition:transform 220ms var(--e-out)}
#sonne{transition:transform 220ms var(--e-out)}
#raumlicht{transition:opacity 320ms var(--e-out)}

/* Szene Markise: app.js setzt .aus (= ausgefahren) */
#markiseTuch{transform:scaleX(.28);transform-origin:132px 60px;transition:transform 1100ms var(--e-drawer)}
#markiseSchatten{opacity:.06;transition:opacity 1100ms var(--e-out)}
.markise-detail{opacity:0;transition:opacity 500ms var(--e-out) 800ms}
.scene-markise.aus #markiseTuch{transform:scaleX(1)}
.scene-markise.aus #markiseSchatten{opacity:.28}
.scene-markise.aus .markise-detail{opacity:1}

/* Szene Insektenschutz: Muecken prallen ab, frische Luft stroemt */
.muecke{offset-rotate:0deg}
.m1{offset-path:path("M60 90 Q 90 140 106 170 Q 90 200 60 230 Q 90 160 106 170");animation:flug 7s var(--e-io) infinite}
.m2{offset-path:path("M50 300 Q 80 280 104 262 Q 76 240 54 210 Q 82 250 104 262");animation:flug 9s var(--e-io) infinite .8s}
.m3{offset-path:path("M74 40 Q 96 90 110 120 Q 92 96 70 80 Q 96 100 110 120");animation:flug 8s var(--e-io) infinite 1.6s}
@keyframes flug{0%{offset-distance:0%}50%{offset-distance:50%}100%{offset-distance:100%}}
.luft{stroke-dasharray:8 10;animation:luftzug 3.4s linear infinite}
.l2{animation-delay:.6s}
.l3{animation-delay:1.2s}
@keyframes luftzug{to{stroke-dashoffset:-72}}

/* Szene Region: der Standortpunkt atmet ganz leise */
.ort circle:nth-child(2){animation:puls 3.6s var(--e-io) infinite}
@keyframes puls{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.22);opacity:.1}}

/* Fortschrittslinie im Ablauf: waechst mit dem Scroll-Fortschritt --p */
.steps-line span{
  width:100%;transform:scaleX(var(--p,0));transform-origin:left center;
  transition:transform .1s linear;
}

/* ================================================== RECHTSSEITEN ========= */
/* Impressum und Datenschutz: EINE grosse Lichtscheibe auf demselben
   Nachtgrund. Der Rechtstext selbst bleibt Wort fuer Wort unveraendert —
   nur die Fassung ist neu. Lesbarkeit hat hier Vorrang vor allem anderen:
   ein Mass von 72 Zeichen, 1,7-facher Zeilenabstand, ruhige Zwischentitel. */
.legal{
  max-width:940px;margin:0 auto;
  padding:calc(var(--head-h) + clamp(44px,7vh,86px)) clamp(22px,4vw,60px) clamp(56px,7vw,96px);
}
.legal-sheet{
  background-color:var(--pane);background-image:linear-gradient(180deg,var(--pane) 0%,var(--pane-2) 100%);
  color:var(--ink);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--lift-pane);
  padding:clamp(30px,5vw,64px);
}
.legal h1{
  font-size:clamp(2rem,4.4vw,3.1rem);color:var(--navy-ink);
  letter-spacing:-.034em;margin-bottom:clamp(26px,3vw,38px);
  /* „Datenschutzerklaerung" ist EIN Wort von 331 px Breite. Unter 375 px passt
     es in kein Blatt (bei 320 px stehen nur 256 px Textbreite zur Verfuegung)
     und dehnte den Layout-Viewport auf konstant 374 px — die ganze Seite lief
     dann waagerecht ueber, das „g" fehlte sichtbar. Silbentrennung loest das
     ohne Verkleinerung: `lang="de"` steht im <html>-Tag, also trennt der
     Browser an echten Silbengrenzen. `break-word` ist nur die Rueckfalllinie
     fuer den Fall, dass ein Wort auch ohne Trennstelle zu lang wird. */
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}
.legal .legal-stand{
  font-family:var(--mono);font-size:.74rem;font-weight:480;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
  padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line);
}
.legal h2{
  font-size:clamp(1.16rem,2vw,1.42rem);color:var(--navy-ink);
  letter-spacing:-.018em;margin:36px 0 12px;padding-top:22px;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.legal h3{font-size:1.04rem;color:var(--ink);margin:22px 0 8px}
.legal p,.legal li{
  font-size:.98rem;line-height:1.72;color:var(--ink-2);max-width:72ch;
}
.legal p+p{margin-top:12px}
.legal ul,.legal ol{margin:12px 0;display:grid;gap:9px}
.legal li{position:relative;padding-left:20px}
.legal li::before{
  content:'';position:absolute;left:2px;top:.66em;
  width:6px;height:6px;border-radius:2px;background:var(--gold);transform:rotate(45deg);
}
.legal ol{counter-reset:leg}
.legal ol>li{counter-increment:leg;padding-left:30px}
.legal ol>li::before{
  content:counter(leg) '.';
  width:auto;height:auto;background:none;transform:none;top:0;left:2px;
  font-family:var(--mono);font-size:.86rem;color:var(--gold-ink);
}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.legal b,.legal strong{color:var(--ink)}
.legal address{font-style:normal}
.legal .notice{margin:18px 0;max-width:72ch}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.93rem}
.legal th,.legal td{
  text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:top;
}
.legal th{
  font-family:var(--mono);font-size:.7rem;font-weight:520;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-ink);
}
.legal a.backlink,.backlink{
  display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;
  margin-bottom:26px;min-height:44px;padding:10px 18px 10px 14px;
  border-radius:99px;
  font-size:.94rem;font-weight:560;color:var(--mist);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.18);
  transition:background-color var(--t-ui) var(--e-out),border-color var(--t-ui) var(--e-out),color var(--t-ui) var(--e-out);
}
@media (hover:hover) and (pointer:fine){
  .backlink:hover{background:rgba(255,255,255,.11);border-color:var(--gold);color:#fff}
}
.legal .todo,.legal .fehlt{
  display:block;margin:18px 0;padding:16px 18px;border-radius:var(--r-s);
  background:var(--warn-bg);border:1px solid var(--warn-line);
  border-left:1px solid var(--warn);
  color:var(--warn);font-size:.9rem;line-height:1.6;max-width:76ch;
}
.legal .gut{
  display:block;margin:18px 0;padding:16px 18px;border-radius:var(--r-s);
  background:var(--ok-bg);border:1px solid var(--ok-line);
  color:var(--ok);font-size:.9rem;line-height:1.6;max-width:76ch;
}

/* ============================================== BREITEN-ABSTUFUNGEN ====== */

/* ---- Kopfzeile: ZWEI gerechnete Umschaltpunkte -------------------------
   Beide Werte sind im laufenden Browser AUSGEMESSEN, nicht gerundet (Lehre
   vom 09.09.2026: „ein Umschaltpunkt wird gerechnet, nicht gerundet").
   Gemessener Bedarf der vollstaendigen Kopfzeile (Chromium, Schibsted Grotesk):
     Wortmarke 192 + Luft 20 + 8 Navigationspunkte 624 + Luft 20
     + Aktionsblock 328 (Telefon mit Nummer 132 · Gold-Knopf 152)
     zzgl. 2 x Seitenrand.
   Messreihe mit erzwungener Navigation (Restabstand rechts):
     1140 -> −61 · 1180 -> −26 · 1200 -> −9 (alles Ueberlauf) · 1240 -> +26 · 1280 -> +31.
   Mit Telefon als reines Symbol (44 px statt 132 px):
     1000 -> −51 · 1040 -> −16 (Ueberlauf) · 1060 -> +1 · 1080 -> +18 · 1100 -> +26.
   Beide Werte nach dem Schriftwechsel NEU gemessen — eine andere Schrift
   verschiebt jeden Umschaltpunkt.
   Daraus die drei Stufen:
     ab 1240 px  volle Kopfzeile mit ausgeschriebener Rufnummer
     1080–1239  volle Navigation, Telefon nur als Symbol
     bis 1079   Burger — die Navigation bleibt durchgehend erreichbar
                (Hausregel „Navigation immer erreichbar"). */
@media (max-width:1239px){
  .top-tel span{display:none}
  .top-tel{padding:8px;width:44px}
}
@media (max-width:1079px){
  .mainnav{display:none}
  .burger{display:flex}
  /* display:none nimmt die Navigation NICHT aus dem Geschwister-Verhaeltnis:
     ohne diese Zeile verliert der Aktionsblock seinen Schieber und der ganze
     Kopfinhalt klebt links. Genau dieser Fehler ist am 09.09. passiert. */
  .top-actions{margin-left:auto}
  .mobilemenu.open{display:flex}
}

/* ---- 1080 px: Raster von fuenf auf drei bzw. zwei Spalten ------------- */
@media (max-width:1080px){
  .rail-grid{grid-template-columns:repeat(3,1fr)}
  .steps-grid{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .trustbar{grid-template-columns:repeat(2,1fr);gap:1px}
  .trustbar span:first-child{border-radius:var(--r) 0 0 0}
  .trustbar span:nth-child(2){border-radius:0 var(--r) 0 0;border-left:0}
  .trustbar span:nth-child(3){border-radius:0 0 0 var(--r);border-top:0}
  .trustbar span:nth-child(4){border-radius:0 0 var(--r) 0;border-left:0;border-top:0}
  .google-zitate{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* ---- 980 px: die Kapitel werden einspaltig ---------------------------- */
@media (max-width:980px){
  .chapter-grid{grid-template-columns:1fr;gap:32px}
  .chapter-grid.rev .chapter-copy{order:1}
  .chapter-grid.rev .chapter-stage{order:2}
  .region-grid{grid-template-columns:1fr;gap:34px}
  .kontakt-grid{grid-template-columns:1fr;gap:30px}
  .promise-grid{grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.11)}
  .promise:nth-child(odd){border-right:0}
  .fb-prozess{grid-template-columns:1fr}
  .zitate{grid-template-columns:1fr}
  .partner-grid{grid-template-columns:1fr;gap:14px}
  .partnerlogo{height:80px}
  .speedzusage .btn{margin-left:0}
}

/* ---- 760 px: Handy-Aufbau -------------------------------------------- */
@media (max-width:760px){
  :root{--head-h:60px}
  body{font-size:16.5px}
  .svpanel-grid{grid-template-columns:1fr}
  .rail-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .steps-grid{grid-template-columns:1fr;row-gap:24px}
  .trustbar{grid-template-columns:1fr;gap:0}
  .trustbar span{border-radius:0;border-left:1px solid rgba(255,255,255,.10);border-top:0}
  .trustbar span:first-child{border-radius:var(--r) var(--r) 0 0;border-top:1px solid rgba(255,255,255,.10)}
  .trustbar span:last-child{border-radius:0 0 var(--r) var(--r)}
  .trustbar span:not(:first-child){border-left:1px solid rgba(255,255,255,.10)}

  /* Die Lichtscheiben ruecken naeher an den Rand und werden flacher gerundet,
     damit auf dem Handy kein Rahmen die Lesebreite kostet. */
  .ch-light,.ablauf,.stimmen,.region,.faq{
    margin-left:12px;margin-right:12px;border-radius:var(--r-l);
  }
  .ch-light .wrap,.ablauf .wrap,.stimmen .wrap,.region .wrap,.faq .wrap{
    padding-left:18px;padding-right:18px;
  }
  h1,.h1-l{font-size:clamp(2.15rem,9.4vw,3rem);letter-spacing:-.035em}
  h1{max-width:none}
  .hero{min-height:auto}
  .hero-inner{padding-top:calc(var(--head-h) + 64px);padding-bottom:22px}
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%}
  .hero-sub{margin-bottom:22px}
  .scrollcue{display:none}

  .mobilebar{display:flex}
  /* Platz fuer die feste Handy-Leiste, damit sie nie Inhalt verdeckt */
  body{padding-bottom:78px}
  /* Impressum und Datenschutz haben KEINE Handy-Fussleiste (kein .mobilebar
     im Quelltext). Dort standen die 78 px als toter Streifen unter dem
     Fussbereich. Die Reserve haengt jetzt am Vorhandensein der Leiste statt an
     der Breite. Browser ohne `:has()` behalten das Polster — harmlos. */
  body:not(:has(.mobilebar)){padding-bottom:0}
  .nachoben{bottom:86px;right:14px}
  .privacy{left:10px;right:10px;bottom:82px;max-width:none}

  .promise{padding:24px 0}
  .promise:nth-child(odd){border-right:0}
  .vergleich{padding:24px 20px}
  .wizard-note{margin-left:0}
  .speedzusage{flex-direction:column;align-items:flex-start}
  .gal-pfeil{width:44px;height:44px;font-size:1.25rem}
  .gal-zurueck{left:8px}
  .gal-weiter{right:8px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-base{flex-direction:column;gap:6px}
  /* Der Gold-Knopf im Kopf entfaellt am Handy: die feste Fussleiste traegt
     denselben Weg, und im Kopf hat er den Burger aus dem Bild gedraengt
     (bei 390 px 40 px Ueberlauf, am Bild nachgewiesen). */
  .top-actions .btn{display:none}
  .brand-mark{height:34px}
  .brand-name{font-size:.96rem;letter-spacing:.11em}
  .brand-sub{font-size:11px;letter-spacing:.1em}
  .legal{padding-top:calc(var(--head-h) + 30px)}
  .legal-sheet{padding:24px 20px}
  .svpanel-inner{padding-top:24px}
  .svpanel-close{top:10px;right:14px}
}

/* ---- Kurzer Handy-Bildschirm ------------------------------------------
   Auf 360 x 640 und 375 x 667 (verbreitete Geraete) darf der Kopfabstand den
   Hauptknopf nicht gegen die feste Fussleiste schieben. Lehre vom 09.09.2026:
   Kopfhoehe immer GEGEN die fixierte Fussleiste rechnen, nicht nur gegen den
   Bildschirmrand. */
@media (max-width:760px) and (max-height:700px){
  :root{--head-h:54px}
  .hero-inner{padding-top:calc(var(--head-h) + 34px);padding-bottom:16px}
  .hero-sub{margin-bottom:16px;font-size:1rem}
  h1,.h1-l{font-size:2rem}
}

/* ---- 420 px: sehr schmal --------------------------------------------- */
@media (max-width:420px){
  :root{--pad:16px}
  /* Die Marke bricht hier zweizeilig um; die Haarlinie haengt dann allein am
     Ende der ERSTEN Zeile und trennt nichts mehr. Eine Linie, die nichts
     trennt, ist Dekoration — und die verbietet DESIGN.md § 1. */
  .hero .eyebrow::after{display:none}
  .rail-grid{grid-template-columns:1fr}
  .proofchips span{font-size:.7rem;padding:8px 12px}
  .google-kopf{gap:8px}
  .google-link{margin-left:0}
  .slotgrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .wiz-2col{grid-template-columns:1fr}
  .brand-sub{letter-spacing:.06em}
}

/* ---- FLACHES FENSTER (ab 761 px Breite, bis 780 px Hoehe) --------------
   Die Handy-Stufe hat ihre Kurzbildschirm-Regel (max-height 700), fuer Tablet
   quer und Laptop fehlte sie. Folge, an der gerenderten Seite gemessen: die
   Zusagenleiste — das „Typenschild" mit genau den vier Zusagen, die auch im
   Angebot stehen — war auf REALEN Fensterhoehen zu 0 % sichtbar:
     1280x620  0 %  ·  1366x640  0 %  ·  1093x614 (Zoom 125 %)  0 %
     911x512 (Zoom 150 %)  0 %  ·  1440x750  59 %  ·  1366x768  75 %
   Ursache ist nicht die Breite, sondern die Hoehe des Hero-Inhalts: bei
   1366 px Breite braucht er 764 px, ein 1366x768-Laptop zeigt nach Abzug der
   Browserleisten aber nur rund 640 px. Gespart werden 211 px, verteilt auf
   sechs Stellen statt einer einzigen groben Kuerzung:
     Kopfabstand −43 · H1 (82 → 56 px) −76 · Abschnittsmarke −8
     · Fliesstext-Abstand −13 · Scroll-Wegweiser −49 · Fussabstand −14
     · Polster der Zusagenleiste −8
   Die Schwelle liegt bei 800 px, nicht bei 780: bei 780 blieb die Leiste an
   1440 x 790 und 1440 x 780 noch 10–15 px unter der Kante, seit der Schriftgrad
   gleitet statt hart zu schalten (siehe die H1-Zeile weiter unten). 1280 x 800
   faellt damit mit in die Stufe — dort aendert sich der Schriftgrad um 2,8 px
   (78 → 75,2), also unter der Wahrnehmungsschwelle, und die Leiste rueckt
   weiter nach oben statt an der Kante zu kleben. */
@media (min-width:761px) and (max-height:800px){
  .hero-inner{
    padding-top:calc(var(--head-h) + clamp(14px,2.4vh,30px));
    padding-bottom:clamp(10px,1.6vh,20px);
  }
  /* NICHT `clamp(...,4.3vw,3.5rem)`: ein fester Deckel schaltet an der
     780-px-Schwelle hart um. Gegengeprueft am 10.09.2026: 1440 x 790 ergab
     81,6 px, 1440 x 780 nur 56 px — 31 % Sprung bei 10 px Fensterunterschied,
     und genau dort liegt der haeufigste Fall (1440 x 900-Schirm minus
     Browserleisten). Mit `min(6.1vw, 9.4vh)` bleibt die Breitenformel der
     Grundskala erhalten und wird nur von der HOEHE gedeckelt — der Grad
     gleitet dadurch mit dem Fenster: 790 px → 73,3 px statt 81,6 (10 % statt
     31 % Sprung), 640 px → 60,2 px, 512 px → 48,1 px. */
  h1,.h1-l{font-size:clamp(2.2rem,min(6.1vw,9.4vh),5.1rem)}
  .hero .eyebrow{margin-bottom:12px}
  .hero-sub{margin-bottom:clamp(12px,2vh,20px)}
  /* Der Wegweiser zeigt, dass es weitergeht. Wenn der Bildschirm so flach ist,
     dass er die Zusagen verdraengt, zeigt er das Falsche. */
  .scrollcue{display:none}
  .trustbar span{padding:10px 16px}
  /* Der Hero-Verlauf ist in PROZENT gebaut: die dunkle Schriftzone beginnt bei
     76 % der Hero-Hoehe. Auf einem flachen Fenster steht der Fliesstext aber
     schon bei 42–55 % — also mitten in der offenen, hellen Bildmitte. Am
     gerenderten Bildpixel gemessen (844x390, hellstes Pixel der Textzone):
     3,74:1 im Bestand, nach der Stauchung 3,24:1 — beides unter den noetigen
     4,5:1. Fuer flache Fenster wandert die dunkle Zone deshalb nach oben; die
     offene Bildmitte bleibt erhalten, sie wird nur schmaler. Nachgemessen:
     844x390 → 7,7:1 · 911x512 → 8,4:1 · 1366x768 unveraendert gut. */
  .hero-shade{
    background:
      linear-gradient(180deg,rgba(4,9,15,.80) 0%,rgba(4,9,15,.40) 18%,rgba(4,9,15,.44) 38%,rgba(4,9,15,.78) 68%,var(--void) 100%),
      linear-gradient(96deg,rgba(4,9,15,.90) 0%,rgba(4,9,15,.66) 44%,rgba(4,9,15,.30) 66%,rgba(4,9,15,.04) 84%);
  }
}

/* ---- SEHR FLACHES FENSTER (Handy quer, ~390 px Hoehe) ------------------
   844x390 war der schlechteste gemessene Fall: die Unterkante der beiden
   Hauptknoepfe lag bei 495 px — bei 390 px Fensterhoehe also KEIN einziges
   Bedienelement ueber der Falz. Die Stufe oben bringt sie auf 401 px, hier
   fehlen die letzten 33 px: kleinere Kopfzeile (wie in der Handy-Kurzstufe),
   kleinere H1 und ein engerer Fliesstext. Gerechnet endet der Knopf dann bei
   368 px. */
@media (min-width:761px) and (max-height:480px){
  /* `--head-h:54px` allein macht den Kopf NICHT 54 px hoch: `min-height` ist
     eine Untergrenze, die Hoehe kommt aus dem Inhalt (Wortmarke 38 px + 2 x
     10 px Polster = 58, mit der Zusatzzeile 66). Gemessen am 10.09.2026: die
     Abschnittsmarke stand danach 2 px unter der Kopfkante und las sich wie ein
     Fehler. Deshalb wird hier auch die Wortmarke kleiner — erst dann greift
     die Untergrenze, und der Kopfabstand ist wieder ein Abstand. */
  :root{--head-h:54px}
  /* Die Kopfhoehe kommt aus der Wortmarke (Name + Zusatzzeile = 46 px), nicht
     aus `--head-h`; nachgemessen 66 px trotz `min-height:54px`. Erst mit
     kleinerem Kopfpolster greift die Untergrenze wieder. Die Zusatzzeile bleibt
     bei 11 px — DESIGN.md § 3 verbietet, sie kleiner zu setzen. */
  .top-inner{padding-top:5px;padding-bottom:5px}
  .brand-mark{height:30px}
  h1,.h1-l{font-size:clamp(1.7rem,3.4vw,2.3rem)}
  .hero-inner{padding-top:calc(var(--head-h) + 18px)}
  .hero .eyebrow{margin-bottom:8px}
  .hero-sub{font-size:.92rem;line-height:1.35;margin-bottom:6px}
  .btn-l{min-height:44px;padding:11px 24px;font-size:.98rem}
}

/* ---- Hinweis als randlose Fussleiste (unter 430 px Bildhoehe) ------------
   Auch als schmale Karte lag der Datenschutz-Hinweis bei 844 x 390 noch auf
   beiden Hauptknoepfen — der Besucher sah beim ERSTEN Aufruf keine
   Handlungsaufforderung (Fund der Gegenpruefung 10.09.2026, gemessene
   Ueberdeckung 766 x 32 px). Zwei Massnahmen zusammen loesen das:
   der Hinweis wird zur randlosen Fussleiste (bottom 0, 66 statt 104 px), und
   der Hero-Inhalt darueber ist um 22 px enger gesetzt (Zeilen oben).
   Nachgerechnet: Knopfunterkante 318 px, Leistenoberkante 324 px — 6 px Luft.
   ⚠ Nicht gewaehlt wurde `padding-bottom` an `body:has(.privacy:not([hidden]))`:
   gemessen wirkungslos, weil der Hero hier inhaltsgetrieben ist (581 px Inhalt
   in einem 390-px-Fenster) und `justify-content:flex-end` deshalb keinen
   freien Raum zu verteilen hat — das Polster verlaengert nur den Hero. */
@media (max-height:430px) and (min-width:761px){
  .privacy{
    left:0;right:0;bottom:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;
    padding:9px 16px;gap:12px;
  }
  .privacy p{font-size:.74rem;line-height:1.42}
  .privacy .btn{min-height:38px;padding:7px 16px;font-size:.88rem}
}

/* ---- Datenschutz-Hinweis auf flachen Fenstern: Leiste statt Karte -------
   Als Karte ist der Hinweis rund 230 px hoch und 430 px breit. Bei 844x390
   sind das 59 % der Bildhoehe — er stand mitten in der Ueberschrift; bei
   1366x768 verdeckt er zwei der vier Zusagen. Ueber die ganze Breite gelegt
   und einzeilig gesetzt wird er rund 100 px hoch und liegt nur noch auf dem
   unteren Streifen. Der Text bleibt Wort fuer Wort derselbe. Am Handy
   hochkant gilt weiterhin die Regel in der 760-px-Stufe. */
@media (max-height:560px) and (min-width:761px){
  .privacy{
    left:14px;right:14px;bottom:14px;max-width:none;
    padding:12px 16px;
    display:flex;align-items:center;gap:16px;
  }
  .privacy p{margin-bottom:0;font-size:.8rem;line-height:1.5}
  .privacy .btn{flex:0 0 auto}
}


/* ================================================= WENIGER BEWEGUNG ===== */
/* „Weniger Bewegung" heisst weniger und sanfter — nicht null. Was der
   Verstaendlichkeit dient (Ein-/Ausblenden, Farbwechsel), bleibt; alles, was
   sich BEWEGT, wird abgeschaltet. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .js [data-reveal]{opacity:1;transform:none}
  .hero-sweep{display:none}
  .h1-l{opacity:1;transform:none;filter:none}
  .hero .eyebrow,.hero-sub,.hero-cta,.trustbar{opacity:1;transform:none}
  .scrollcue{display:none}
  [data-scrub] .pane-1,[data-scrub] .pane-3{transform:none}
  .scene-fenster .pane-labels{opacity:1}
  .scene-fenster .cold path{stroke-dashoffset:0}
  .scene-fenster .warm{opacity:1}
  .muecke,.luft,.ort circle:nth-child(2){animation:none}
  .luft{stroke-dashoffset:0;opacity:.85}
  #markiseTuch{transform:scaleX(1)}
  #markiseSchatten{opacity:.28}
  .markise-detail{opacity:1}
  .steps-line span{transform:scaleX(1)}
  .btn-gold::after{display:none}
  /* Der Hinweis „beim Scrollen oeffnet sich die Verglasung" waere hier eine
     Luege — die Zeichnung bewegt sich nicht mehr. */
  .nur-motion{display:none}
}

/* ============================================================ DRUCK ===== */
/* Impressum und Datenschutz werden ausgedruckt und abgelegt. Dann ist Nacht
   das falsche Material. */
@media print{
  body::before,.grain,.top,.mobilebar,.nachoben,.privacy,.svpanel,.backlink{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .legal{padding:0;max-width:none}
  .legal-sheet{box-shadow:none;border:0;padding:0;background:#fff}
  .legal h1,.legal h2,.legal h3{color:#000}
  .legal p,.legal li,.legal td{color:#1a1a1a}
  a{color:#000;text-decoration:underline}
}

/* ============================================ EINZELHEITEN / RESTE ======= */
/* Kleinteile, die im Aufbau vorkommen und eine eigene Regel brauchen. */

/* Der Umbruch in der Hero-Unterzeile trennt die Leistungsaufzaehlung vom
   Markensatz. Er bleibt auf ALLEN Groessen stehen: ohne ihn liest sich
   "... Insektenschutz Markenqualitaet von Internorm ..." wie ein Satz. */
.br-desk{display:inline}

/* Hersteller-Bildlogos gegenueber der Wortmarken-Ersatzfassung */
.partnerlogo.echt{padding:16px 26px}
.partnerlogo.echt img{max-height:48px;width:auto;object-fit:contain}

/* Galerie-Kategorien: dieselbe Chip-Optik, aber auf Nachtgrund */
.gal-chip{color:var(--mist);background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.18)}
.gal-chip.on{color:var(--navy-ink);background:var(--gold-btn);border-color:var(--gold-edge)}

/* Die mittlere Scheibe der Fensterszene bleibt stehen — nur die aeussere
   linke und rechte fahren auseinander. Regel steht hier, damit die Klasse
   dokumentiert ist und niemand sie fuer vergessen haelt. */
.pane-2{transform:none}
/* Die erste Luftlinie hat keinen Versatz (l2/l3 folgen zeitversetzt). */
.l1{animation-delay:0s}

/* Szenen-Rahmen: gleiche Rundung und Fassung fuer alle Schemazeichnungen */
.scene-fenster,.scene-tuer,.scene-sonne,.scene-markise,.scene-insekt,.scene-karte{
  width:100%;height:auto;border-radius:var(--r-l);
}
.scene-karte{background:var(--pane-2)}
/* Der Erklaertext unter der Fensterszene traegt den Hinweis auf die
   Scroll-Bewegung und ist deshalb kein reiner Bildtext. */
.scene-erklaerung{text-align:left}


/* ============ LEUCHTKISTEN (Leistungs-Redesign Stufe 3, Mike 27.09.) ============ */
.lv-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:18px;margin-top:38px;
}
.lv-card{grid-column:span 2}
.lv-card--wide{grid-column:span 3}

.lv-card{
  --edge:rgba(255,255,255,.10);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--r-l);
  background-color:rgba(255,255,255,.05);
  background-image:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  border:1px solid var(--edge);
  color:#fff;text-decoration:none;
  transition:transform var(--t-panel) var(--e-out),
             border-color var(--t-panel) var(--e-out),
             box-shadow var(--t-panel) var(--e-out),
             background-color var(--t-panel) var(--e-out);
}
/* Gold-Grundlinie: bei Zeigen/Fokus laeuft sie voll auf — der Weg wird sichtbar */
.lv-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-panel) var(--e-out);
}
.lv-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lv-card:focus-visible::after{transform:scaleX(1)}

/* Icon-Buehne: Schein von oben, feine Trennkante nach unten */
.lv-stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  height:148px;flex:none;
  background:radial-gradient(120% 100% at 50% 0%,rgba(200,164,92,.10),rgba(4,9,15,0) 62%),
             linear-gradient(180deg,rgba(11,30,48,.85),rgba(11,30,48,.12));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.lv-stage svg{width:92px;height:92px;transition:transform var(--t-panel) var(--e-out)}
.lv-stage::after{  /* Bodenreflex unter dem Piktogramm */
  content:'';position:absolute;left:50%;bottom:14px;width:64px;height:8px;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.5),transparent 70%);
  filter:blur(3px);
}

/* Textkoerper: drei Stufen */
.lv-body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px;flex:1}
.lv-body b{font-size:1.22rem;font-weight:640;letter-spacing:-.02em;color:#fff;line-height:1.15}
.lv-promise{font-size:.95rem;line-height:1.5;color:var(--mist-2)}
.lv-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi);
}
.lv-cta::after{content:'→';transition:transform var(--t-ui) var(--e-out)}

/* „Beliebt"-Marke */
.lv-badge{
  position:absolute;top:14px;right:14px;z-index:1;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:99px;
  background:var(--gold-btn);color:var(--navy-ink);
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid rgba(4,9,15,.25);
}
.lv-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--navy-ink)}

/* Zeigen (nur Geraete mit echtem Zeiger) */
@media (hover:hover) and (pointer:fine){
  .lv-card:hover{
    --edge:rgba(200,164,92,.42);
    transform:translateY(-5px);
    background-color:rgba(255,255,255,.09);
    box-shadow:var(--lift-3);
  }
  .lv-card:hover::after{transform:scaleX(1)}
  .lv-card:hover .lv-stage svg{transform:translateY(-4px)}
  .lv-card:hover .lv-cta::after{transform:translateX(4px)}
  .lv-card:hover .lv-stage::after{transform:translateX(-50%) scale(.85);opacity:.6}
  .lv-stage::after{transition:transform var(--t-panel) var(--e-out),opacity var(--t-panel) var(--e-out)}
}
.lv-card:active{transform:scale(.985)}

/* Breite Karten (Reihe 2): Buehne links, Text rechts */
.lv-card--wide .lv-stage{width:150px;height:auto;align-self:stretch;border-bottom:0;border-right:1px solid rgba(255,255,255,.06)}
.lv-card--wide{flex-direction:row}
.lv-card--wide .lv-body{padding:24px}

/* ---- Preview-Animationen je Piktogramm (nur bei Zeigen/Fokus, subtil) ---- */
.lv-card .lv-glare,.lv-card .lv-doorlight{opacity:0;transition:opacity var(--t-ui) var(--e-out)}
.lv-card .a-door,.lv-card .a-blade,.lv-card .a-tail,.lv-card .a-muecke{
  transition:transform var(--t-panel) var(--e-out),opacity var(--t-panel) var(--e-out);
}
.lv-card .a-door{transform-origin:21px 12px}
.lv-card .a-tail{transform-origin:32px 14px}
@media (hover:hover) and (pointer:fine){
  .lv-card:hover .lv-glare{opacity:.5;animation:lvGlare 1.1s var(--e-out) both}
  .lv-card:hover .lv-doorlight{opacity:.9}
  .lv-card:hover .a-door{transform:translateX(-2px)}
  .lv-card:hover .a-blade{transform:translateY(-5px)}
  .lv-card:hover .a-tail{transform:rotate(2.2deg)}
  .lv-card:hover .a-muecke{transform:translate(-12px,-10px);opacity:0}
}
@keyframes lvGlare{
  0%{opacity:0;transform:translateX(-8px)}
  40%{opacity:.5}
  100%{opacity:0;transform:translateX(10px)}
}
@media (prefers-reduced-motion:reduce){
  .lv-card,.lv-card *{animation:none!important;transition:none!important}
}

/* Piktogramm-Striche (unveraendert aus style.css) */
:root{--ico-frame:var(--gold);--ico-glass-f:rgba(207,224,238,.16);--ico-glass-s:rgba(207,224,238,.45);--ico-line:rgba(207,224,238,.55)}
.i-frame{fill:none;stroke:var(--ico-frame);stroke-width:2.2}
.i-glass{fill:var(--ico-glass-f);stroke:var(--ico-glass-s);stroke-width:1.2}
.i-line{stroke:var(--ico-line);stroke-width:1.6;fill:none}
.i-gold{fill:var(--gold)}
.i-solid{fill:#1c3d57}

/* ---- Responsiv ---- */
@media (max-width:1080px){
  .lv-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .lv-card,.lv-card--wide{grid-column:auto}
  .lv-card--wide{flex-direction:column}
  .lv-card--wide .lv-stage{width:auto;height:148px;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .lv-card--wide .lv-body{padding:20px 22px 22px}
}
@media (max-width:760px){
  .lv-grid{grid-template-columns:1fr;gap:12px;margin-top:26px}
  /* Handy: liegende Karten, Buehne links — ganze Karte bleibt Touch-Ziel (>> 44 px) */
  .lv-card,.lv-card--wide{grid-column:auto;flex-direction:row;min-height:104px}
  .lv-stage{width:104px;height:auto;align-self:stretch;border-bottom:0;border-right:1px solid rgba(255,255,255,.06)}
  .lv-stage svg{width:56px;height:56px}
  .lv-stage::after{display:none}
  .lv-body{padding:16px 18px;gap:5px}
  .lv-body b{font-size:1.08rem}
  .lv-promise{font-size:.9rem}
  .lv-cta{margin-top:6px}
  .lv-badge{top:10px;right:10px}
}

/* n rect{transition:none}
@media (prefers-reduced-motion:reduce){.scene-fenster .pane{transition:none}.nur-motion{display:none}}

/* ============================================================
   NEU: KAPITEL-PREMIUM (kx-*) — Musterkapitel #fenster
   Gleiche Craft-Familie wie die Leuchtkisten (lv-*):
   Icon-Buehne mit Gold-Schein, Gold-Grundlinie, Typenschild-Fakten,
   Buehne mit Tab + Kantenlicht. Namespace kx- greift nicht in lv-*.
   ============================================================ */

/* --- Kopf: Eyebrow -> Versprechen -> kurzer Anriss (keine Textwueste) --- */
.kx-head{max-width:800px}
.kx-head h2{
  font-size:clamp(1.95rem,3.8vw,3.05rem);font-weight:640;letter-spacing:-.032em;
  line-height:1.06;color:var(--navy-ink);margin:0 0 16px;
}
.kx-lead{font-size:1.07rem;line-height:1.66;color:var(--ink-2);max-width:60ch}

/* --- Drei Nutzen-Karten (lv-DNA: Icon-Buehne, Gold-Grundlinie) --- */
.kx-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kx-card{
  --kxi-ink:#0f334f; --kxi-gold:#c8a45c;
  position:relative;display:flex;flex-direction:column;gap:9px;
  padding:22px 22px 24px;border-radius:var(--r);
  background:var(--pane);border:1px solid var(--line);
  box-shadow:var(--lift-1);
  transition:transform var(--t-panel) var(--e-out),box-shadow var(--t-panel) var(--e-out);
}
.kx-card::after{ /* Gold-Grundlinie: laeuft bei Zeigen/Fokus voll auf */
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-panel) var(--e-out);
}
.kx-card b{font-size:1.09rem;font-weight:640;letter-spacing:-.015em;color:var(--ink);line-height:1.2}
.kx-card p{font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.kx-ico{
  width:54px;height:54px;flex:0 0 auto;border-radius:15px;
  display:grid;place-items:center;margin-bottom:6px;
  background:radial-gradient(120% 100% at 50% 0%,rgba(200,164,92,.20),rgba(200,164,92,0) 70%),var(--pane-3);
  border:1px solid var(--line);
}
.kx-ico svg{width:34px;height:34px}
.kx-ico svg{transition:transform var(--t-panel) var(--e-out)}
.kxi{stroke:var(--kxi-ink)}      /* Strichfarbe Profil */
.kxi-g{stroke:var(--kxi-gold)}   /* Gold-Akzent (dekorativ) */
.kxi-fg{fill:var(--kxi-gold);stroke:none}

/* --- Szenen-Buehne: das Herzstueck, in einen wertigen Rahmen gestellt --- */
.kx-stage{
  position:relative;width:100%;max-width:760px;margin-inline:auto;
}
.kx-screen{
  position:relative;border-radius:var(--r-l);overflow:hidden;
  background:linear-gradient(180deg,var(--pane) 0%,var(--pane-2) 100%);
  border:1px solid var(--line);
  box-shadow:var(--lift-2), var(--lift-3);
}
.kx-screen::before{ /* Buehnenlicht von oben — wie lv-stage, in Licht */
  content:'';position:absolute;inset:0 0 auto 0;height:64px;z-index:1;pointer-events:none;
  background:radial-gradient(80% 100% at 50% 0%,rgba(200,164,92,.15),rgba(200,164,92,0) 72%);
}
.kx-screen{display:flex;justify-content:center;align-items:stretch}
.kx-screen svg{width:min(100%,560px);height:auto;display:block;max-height:430px}
.kx-tab{
  position:absolute;top:16px;left:16px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:99px;
  background:rgba(4,9,15,.80);color:var(--gold-hi);
  border:1px solid rgba(200,164,92,.38);
  font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
}
.kx-tab::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}
.kx-caption{
  margin:16px auto 0;max-width:66ch;text-align:center;
  font-size:.93rem;line-height:1.55;color:var(--ink-3);
}
.kx-caption .nur-motion{color:var(--gold-ink);font-weight:560}

/* --- Fakten-Streifen: Typenschild-DNA aus .pricehint, als Messleiste --- */
.kx-facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:var(--r);overflow:hidden;
  background:var(--pane-3);border:1px solid var(--line);border-left:2px solid var(--gold);
  box-shadow:var(--lift-1);
}
.kx-facts>div{padding:18px 20px 20px}
.kx-facts>div+div{border-left:1px solid var(--line)}
.kx-facts dt{
  font-family:var(--mono);font-size:.66rem;font-weight:520;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);
}
.kx-facts dd{
  margin-top:7px;font-family:var(--mono);font-weight:560;
  font-size:clamp(1.22rem,1.5vw,1.42rem);letter-spacing:-.02em;
  color:var(--navy-ink);line-height:1.1;
}
.kx-facts small{display:block;margin-top:5px;font-size:.8rem;line-height:1.45;color:var(--ink-2)}

/* --- CTA-Zeile: Hauptknopf + Gold-Pfeil + Nebennotiz --- */
.kx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.kx-cta .btn{
  min-height:56px;padding:16px 30px;font-size:1.05rem;
}
.kx-cta .kx-arrow{width:19px;height:19px;flex:0 0 auto;stroke:var(--gold-hi);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-ui) var(--e-out)}
.kx-cta-note{
  font-family:var(--mono);font-size:.74rem;font-weight:460;
  letter-spacing:.03em;line-height:1.6;color:var(--ink-3);max-width:44ch;
}

/* --- Zeigen (nur Geraete mit echtem Zeiger) --- */
@media (hover:hover) and (pointer:fine){
  .kx-card:hover{transform:translateY(-4px);box-shadow:var(--lift-2)}
  .kx-card:hover::after{transform:scaleX(1)}
  .kx-card:hover .kx-ico svg{transform:translateY(-3px)}
  .kx-cta .btn:hover .kx-arrow{transform:translateX(4px)}
}

/* --- Rhythmus der Bausteine --- */
.kx-body{display:grid;gap:clamp(30px,4vw,52px)}

/* --- Responsiv: 900 und darunter einspaltig, Karten liegend --- */
@media (max-width:900px){
  .kx-head h2{font-size:clamp(1.8rem,6vw,2.35rem)}
  .kx-cards{grid-template-columns:1fr;gap:10px}
  .kx-card{flex-direction:row;align-items:flex-start;gap:16px;padding:16px 18px}
  .kx-ico{width:52px;height:52px;margin-bottom:0}
  .kx-ico svg{width:30px;height:30px}
  .kx-card b{font-size:1.02rem}
  .kx-card p{font-size:.9rem}
  .kx-facts{grid-template-columns:repeat(2,1fr)}
  .kx-facts>div:nth-child(odd){border-left:0}
  .kx-facts>div:nth-child(n+3){border-top:1px solid var(--line)}
  .kx-facts>div{padding:14px 16px 16px}
  .kx-facts dd{font-size:1.16rem}
  .kx-cta .btn{width:100%;justify-content:center}
  .kx-cta-note{max-width:none}
}

/* --- Bewegungsreduzierung: alles steht still, nichts faehrt --- */
@media (prefers-reduced-motion:reduce){
  .kx-card,.kx-card::after,.kx-ico svg,.kx-cta .kx-arrow,.btn{transition:none!important;animation:none!important}
  .nur-motion{display:none}
}

/* Nur Preview-Kontext (kein Teil des Redesigns) */
.pv-badge{position:fixed;left:14px;bottom:14px;z-index:50;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-2);background:rgba(4,9,15,.7);border:1px solid rgba(200,164,92,.3);
  border-radius:99px;padding:7px 12px}