/* =========================================================================
   IK / CODE — Stilblatt
   Reihenfolge: Schriften · Grundlagen · Material · Bausteine ·
                Abschnitte · Bewegung · Schmalbild · Reduzierte Bewegung
   ========================================================================= */

/* ----------------------------- Schriften ------------------------------- */
@font-face {
  font-family: "Sofia Sans Condensed";
  src: url("../fonts/SofiaSansCondensed-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-italic-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* ----------------------------- Grundlagen ------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--zink-500) var(--gruen-950);
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--lauf-schrift);
  font-size: var(--fs-text);
  line-height: var(--lh-text);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Die Seite trägt eine Siebdruck-Körnung. Emaille ist nie glatt. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
  font-family: var(--schild-schrift);
  font-weight: 800;
  line-height: var(--lh-mit);
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: var(--schrift-stark);
  margin: 0;
}

p { margin: 0 0 var(--raum-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--licht); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--licht-hell); }

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, textarea, select { font: inherit; color: inherit; }

/* Browserflächen gehören zur Gestaltung. */
::selection { background: var(--licht); color: var(--schrift-auf-licht); }
input, textarea { caret-color: var(--licht); }
:focus-visible {
  outline: var(--fokus-breite) solid var(--fokus-ring);
  outline-offset: var(--fokus-abstand);
  border-radius: 1px;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--gruen-950); }
::-webkit-scrollbar-thumb { background: var(--zink-600); border: 3px solid var(--gruen-950); }
::-webkit-scrollbar-thumb:hover { background: var(--zink-500); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.sprung {
  position: absolute; left: var(--raum-4); top: 0;
  transform: translateY(-140%);
  z-index: 200;
  background: var(--licht); color: var(--schrift-auf-licht);
  padding: var(--raum-3) var(--raum-5);
  font-family: var(--schild-schrift);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  text-decoration: none;
  transition: transform var(--tempo-mit) var(--kurve);
}
.sprung:focus { transform: translateY(0); }

/* ------------------------------ Bahnen --------------------------------- */
.bahn {
  width: min(100% - var(--rand) * 2, var(--bahn));
  margin-inline: auto;
}
.bahn-eng { max-width: var(--bahn-eng); }

/* ------------------------------ Material ------------------------------- */

/* Ein Schild: flache Fläche, Zinkrahmen, Lichtkante oben, Nieten in den Ecken. */
.schild {
  position: relative;
  background: var(--tafel);
  border: 1px solid var(--kante);
  border-radius: var(--radius-plate);
  box-shadow: var(--schatten-plate);
}
.schild::before {
  content: "";
  position: absolute; inset: 0;
  border-top: 1px solid rgb(255 255 255 / 0.09);
  border-bottom: 1px solid rgb(0 0 0 / 0.45);
  border-radius: inherit;
  pointer-events: none;
}
/* Nieten: zwei Punkte oben, zwei unten, echt gezeichnet. */
.schild.genietet::after {
  content: "";
  position: absolute; inset: 9px;
  pointer-events: none;
  background-image: var(--niete), var(--niete), var(--niete), var(--niete);
  background-size: 7px 7px;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
}

/* Das leuchtende Schild: Amberfläche, Schrift ausgestanzt. */
.schild-an {
  background: var(--licht);
  border-color: var(--licht-tief);
  color: var(--schrift-auf-licht);
  box-shadow: var(--schatten-licht);
}
.schild-an h1, .schild-an h2, .schild-an h3, .schild-an p { color: var(--schrift-auf-licht); }

/* Rollladen: waagerechte Lamellen, echtes Profil, kein Verlaufsschmus.
   Eine Lamelle ist 18px: Schattenfuge, Wölbung, Grat, Schattenfuge. */
.lamellen {
  background-color: var(--zink-700);
  background-image: repeating-linear-gradient(
    to bottom,
    #050806  0px, #050806  3px,
    #232C28  3px, #4E5852  9px,
    #6C766F  9px, #6C766F 13px,
    #414B45 13px, #1C2320 21px,
    #0A0E0C 21px, #050806 26px
  );
  background-size: 100% 26px;
}

/* Beschriftung im Schilderstil */
.marke {
  font-family: var(--schild-schrift);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-mini);
  color: var(--schrift-leise);
  line-height: 1.3;
}
.marke-licht { color: var(--licht); }

/* Zustandsmarke: gefülltes Quadrat = läuft, leeres = aus.
   Der Zustand steht als Form da, nicht nur als Farbe. */
.marke-zustand {
  display: inline-flex; align-items: center; gap: 0.55em;
}
.marke-zustand::before {
  content: "";
  width: 0.62em; height: 0.62em;
  border: 2px solid var(--licht);
  background: var(--licht);
  flex: none;
}
.marke-zustand[data-zustand="aus"]::before { background: transparent; border-color: var(--zink-400); }

/* --------------------------- Knöpfe / Links ---------------------------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95rem 1.5rem;
  font-family: var(--schild-schrift);
  font-weight: 800;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius-knopf);
  cursor: pointer;
  transition: background-color var(--tempo-kurz) linear,
              color var(--tempo-kurz) linear,
              transform var(--tempo-kurz) var(--kurve),
              box-shadow var(--tempo-kurz) linear;
}
/* Der Hauptknopf ist ein montiertes Leuchtschild: mittig, 80 % der Bahn.
   Auf 1440 px wären 80 % absurd — deshalb deckelt max-width bei 26rem.
   Ausgenommen ist die Kopfleiste, dort ist "Anrufen" ein Leistenelement. */
.knopf.knopf-licht {
  width: 80%;
  max-width: 26rem;
  margin-inline: auto;
  justify-content: center;
  text-align: center;
}
.kopfleiste .knopf.knopf-licht { width: auto; max-width: none; margin-inline: 0; }

.knopf-licht {
  background: var(--knopf-licht-grund);
  color: var(--knopf-licht-text);
  border-color: var(--licht-tief);
  box-shadow: 0 2px 0 var(--licht-tief);
}
.knopf-licht:hover { background: var(--knopf-licht-hover); color: var(--schrift-auf-licht); transform: translateY(-2px); box-shadow: 0 4px 0 var(--licht-tief); }
.knopf-licht:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--licht-tief); }

.knopf-kante {
  background: var(--knopf-kante-grund);
  color: var(--knopf-kante-text);
  border-color: var(--knopf-kante-linie);
}
.knopf-kante:hover { background: var(--gruen-700); border-color: var(--zink-300); color: var(--schrift-stark); transform: translateY(-2px); }
.knopf-kante:active { transform: translateY(1px); }

.knopf svg { width: 1.05em; height: 1.05em; flex: none; }

/* --------------------------- Abschnittskopf ---------------------------- */
.abschnitt { padding-block: var(--raum-9); position: relative; }
.abschnitt-tief { background: var(--grund-tief); }

.kopfzeile {
  display: grid;
  gap: var(--raum-4);
  margin-bottom: var(--raum-7);
  max-width: 52rem;
}
.kopfzeile h2 {
  font-size: var(--fs-gross);
  line-height: var(--lh-eng);
  letter-spacing: -0.018em;
  text-transform: uppercase;
}
.kopfzeile p { font-size: var(--fs-lead); color: var(--creme-300); max-width: 40rem; }

/* Schiene: dünne Zinkleiste, trennt die Abschnitte wie eine Montagekante. */
.schiene {
  height: 3px;
  background: linear-gradient(to bottom, var(--zink-500) 0 1px, var(--gruen-950) 1px 3px);
  border: 0;
  margin: 0;
}

/* ============================ 0 · Kopfleiste =========================== */
/* Deckend, sonst scheinen Überschriften durch die Leiste durch. */
.kopfleiste {
  position: sticky; top: 0; z-index: 80;
  background: var(--gruen-950);
  border-bottom: 1px solid var(--gruen-600);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.5), 0 10px 20px -14px rgb(0 0 0 / 0.9);
}
.kopfleiste-innen {
  display: flex; align-items: center; gap: var(--raum-5);
  min-height: 3.5rem;
}
.wortmarke {
  display: inline-flex; align-items: baseline; gap: 0.3em;
  font-family: var(--schild-schrift);
  font-weight: 900;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--schrift-stark);
  text-decoration: none;
  white-space: nowrap;
}
.wortmarke i { font-style: normal; color: var(--licht); }
.wortmarke:hover { color: var(--schrift-stark); }

/* Nur die breite Leiste — das Rollladenblatt hat sein eigenes Vokabular. */
.kopfleiste .breitnav { margin-left: auto; }
.kopfleiste .breitnav ul {
  display: flex; gap: var(--raum-5);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.4rem;
}
.kopfleiste .breitnav ul::-webkit-scrollbar { display: none; }
.kopfleiste .breitnav a {
  font-family: var(--schild-schrift);
  font-weight: 700; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--creme-300);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--tempo-kurz) linear, border-color var(--tempo-kurz) linear;
}
.kopfleiste .breitnav a:hover,
.kopfleiste .breitnav a[aria-current="true"] { color: var(--schrift-stark); border-bottom-color: var(--licht); }

.kopf-anruf { margin-left: auto; }
.kopf-anruf .knopf { padding: 0.5rem 1rem; font-size: 0.95rem; }

/* ---------- Schmalmenü: der Rollladen unter der Leiste ------------------
   Kein Overlay von der Stange. Der Knopf ist ein Zinkschild mit drei
   Lamellen; beim Öffnen fährt darunter ein Rollladenblatt aus der Leiste
   heraus, auf dem die Abschnitte als genietete Emailleplaketten sitzen.
   Zugeklappt liegt das ganze Blatt auf visibility:hidden — verzögert um die
   Einklappdauer, sonst springt es weg, bevor es eingefahren ist. Damit ist
   kein Link im zugeklappten Zustand per Tab erreichbar. */
.klappknopf {
  display: none;                 /* nur im Schmalbild, s. Media Query */
  align-items: center; gap: 0.5rem;
  margin-left: var(--raum-3);
  padding: 0.46rem 0.75rem 0.46rem 0.6rem;
  background: var(--gruen-800);
  border: 1px solid var(--zink-500);
  border-radius: var(--radius-knopf);
  box-shadow: 0 2px 0 var(--gruen-950);
  font-family: var(--schild-schrift);
  font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--creme-100);
  cursor: pointer;
  transition: background-color var(--tempo-kurz) linear, border-color var(--tempo-kurz) linear;
}
.klappknopf:hover { background: var(--gruen-700); border-color: var(--zink-300); }
/* Drei Lamellen mit Fuge — dasselbe Profil wie am großen Rollladen. */
.klapp-lamellen {
  width: 1.15rem; height: 0.95rem; flex: none;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--licht) 0 3px,
    var(--gruen-950) 3px 5px
  );
  border: 1px solid var(--licht-tief);
  transition: transform var(--tempo-mit) var(--kurve);
}
.klappknopf[aria-expanded="true"] .klapp-lamellen { transform: scaleY(0.42); }
.klappknopf[aria-expanded="true"] { background: var(--gruen-700); }
[data-wort-zu] { display: none; }
.klappknopf[aria-expanded="true"] [data-wort-auf] { display: none; }
.klappknopf[aria-expanded="true"] [data-wort-zu] { display: inline; }

.klappschild {
  display: none;                 /* nur im Schmalbild */
  position: absolute; top: 100%; left: 0; right: 0;
  overflow: hidden;              /* schneidet das eingefahrene Blatt ab */
  z-index: 79;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--tempo-mit);
}
.klappschild[data-offen] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.klapp-blatt {
  display: block;
  position: relative;
  padding: var(--raum-3) var(--rand) calc(var(--raum-4) + 14px);
  border-bottom: 1px solid var(--gruen-950);
  box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.95);
  transform: translateY(-100%);
  /* Das Stocken kam NICHT von fehlenden Bildern, sondern aus der Kurve:
     --kurve-hart ist easeInQuart. Nachgemessen stand das Blatt nach 60 ms bei
     0 %, nach 120 ms bei 3 %, nach 180 ms bei 20 % des Weges — es sieht aus,
     als hinge es, und schlägt dann in 80 ms den Rest durch. Am fallenden
     Rollladen ist genau das die Physik, an einem Menü liest es sich als Ruckler.
     Mit --kurve (expo-out) sind es 89 % nach 60 ms und 100 % nach 180 ms.
     Kein will-change nötig: der LayerTree zeigt, dass Chromium das Blatt wegen
     der laufenden transform-Transition ohnehin auf eine eigene Ebene hebt. */
  transition: transform var(--tempo-mit) var(--kurve);
}
.klappschild[data-offen] .klapp-blatt { transform: none; }
.klapp-blatt ul { display: grid; gap: 0.4rem; }
.klapp-blatt a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.72rem 0.9rem;
  background: var(--gruen-800);
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-plate);
  box-shadow: 0 2px 0 var(--gruen-950);
  font-family: var(--schild-schrift);
  font-weight: 700; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--creme-100);
  text-decoration: none;
  transition: border-color var(--tempo-kurz) linear, background-color var(--tempo-kurz) linear, color var(--tempo-kurz) linear;
}
/* Niete links, wie an jeder anderen Plakette der Seite. */
.klapp-blatt a::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--niete);
}
.klapp-blatt a:hover,
.klapp-blatt a[aria-current="true"] { border-color: var(--licht); background: var(--gruen-700); color: var(--schrift-stark); }
/* Schlussleiste des Blattes: dasselbe Bauteil wie am großen Rollladen. */
.klapp-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background:
    radial-gradient(circle at 22px 50%, #0A0E0C 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 22px) 50%, #0A0E0C 0 2.5px, transparent 3px),
    linear-gradient(to bottom, #7B857E 0 2px, #5A645E 2px 9px, #2C3532 9px 12px, #0A0E0C 12px 14px);
}

/* ============================== 1 · Kopf =============================== */
.kopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 5vw, 3.6rem) clamp(2.4rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--gruen-600);
}
.kopf-bild {
  position: absolute; inset: 0;
  z-index: 0;
}
.kopf-bild img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 55%;
  filter: saturate(0.6) brightness(0.72) contrast(1.05);
}
/* Die Nacht legt sich über das Foto. Flache Felder, kein Weichzeichner.
   Links dunkler, damit der Kasten steht; rechts bleibt die Werkstatt lesbar. */
.kopf-bild::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--gruen-950) 0%, color-mix(in srgb, var(--gruen-950) 72%, transparent) 42%, color-mix(in srgb, var(--gruen-900) 30%, transparent) 100%),
    linear-gradient(to bottom, color-mix(in srgb, var(--gruen-950) 62%, transparent) 0%, transparent 30%, color-mix(in srgb, var(--gruen-900) 55%, transparent) 82%, var(--gruen-900) 100%);
}
.kopf-innen { position: relative; z-index: 1; }

.kopf-oben {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-5);
  margin-bottom: var(--raum-5);
}
.ortsschild {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.34rem 0.8rem;
  background: var(--gruen-850);
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-knopf);
}

/* Der Leuchtkasten selbst. */
.leuchtkasten {
  position: relative;
  padding: clamp(1.4rem, 3.6vw, 2.6rem) clamp(1.3rem, 3.4vw, 2.8rem) clamp(1.5rem, 3.6vw, 2.4rem);
  background: var(--licht);
  border: 1px solid var(--licht-tief);
  border-radius: var(--radius-plate);
  box-shadow: 0 3px 0 var(--licht-tief), 0 30px 60px -26px rgb(0 0 0 / 0.95);
}
.leuchtkasten::before {
  content: "";
  position: absolute; inset: 6px;
  border: 1px solid color-mix(in srgb, var(--amber-700) 45%, transparent);
  pointer-events: none;
}
.leuchtkasten::after {
  content: "";
  position: absolute; inset: 14px;
  pointer-events: none;
  background-image: var(--niete), var(--niete), var(--niete), var(--niete);
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  opacity: 0.55;
}

.kopf h1 {
  font-size: var(--fs-mega);
  line-height: var(--lh-eng);
  letter-spacing: -0.028em;
  text-transform: uppercase;
  color: var(--schrift-auf-licht);
  font-weight: 900;
  margin: 0;
  text-wrap: balance;
}
.kopf h1 .zeile { display: block; }
.kopf h1 .schwach { font-weight: 500; letter-spacing: -0.016em; }

.kopf-unterzeile {
  margin-top: clamp(1rem, 2.4vw, 1.6rem);
  padding-top: clamp(0.9rem, 2vw, 1.3rem);
  border-top: 1px solid color-mix(in srgb, var(--amber-700) 55%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-6);
}
.kopf-unterzeile p {
  margin: 0;
  color: var(--gruen-900);
  font-weight: 600;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  max-width: 40rem;
}

.kopf-taten {
  display: flex; flex-wrap: wrap; gap: var(--raum-3);
  margin-top: clamp(1rem, 2.2vw, 1.6rem);
}
.knopf-auf-licht {
  background: var(--gruen-900);
  color: var(--creme-100);
  border-color: var(--gruen-950);
  box-shadow: 0 2px 0 var(--gruen-950);
}
.knopf-auf-licht:hover { background: var(--gruen-700); color: var(--creme-100); transform: translateY(-2px); box-shadow: 0 4px 0 var(--gruen-950); }
.knopf-auf-licht:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--gruen-950); }
.knopf-auf-licht-leer {
  background: transparent;
  color: var(--gruen-950);
  border-color: color-mix(in srgb, var(--amber-700) 70%, transparent);
}
.knopf-auf-licht-leer:hover { background: color-mix(in srgb, var(--amber-700) 18%, transparent); color: var(--gruen-950); transform: translateY(-2px); }

.kopf-fuss {
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
  display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-6);
  align-items: center;
}
.kopf-fuss .marke { color: var(--creme-300); }

/* ====================== 2 · Feierabend-Szene =========================== */
.szene {
  --p: 0;                      /* Scroll-Fortschritt 0..1, von JS gesetzt */
  position: relative;
  /* 420 -> 260 -> 180 -> jetzt 230vh (schmal 190vh). 180 war dem Inhaber zu
     hastig: die fünf Zettel lagen 0.10 auseinander, am Desktop also 72 px
     Scrollweg — schneller, als man eine Zeile liest. Jetzt liegen sie 0.13
     auseinander, das sind rund 152 px am Desktop und 78 px bei 375 px Breite,
     und jeder Zettel steht komplett, bevor der nächste anfängt einzublenden
     (voll deckend nach 0.056, danach 0.074 Ruhe = 87 px).
     Ereignisse: Rollladen unten 0.22 · Licht 0.26 ·
     Zettel 0.30 / 0.43 / 0.56 / 0.69 / 0.82 · Schlusssatz 0.88. */
  height: 230vh;
  background: var(--grund-tief);
}
.szene-halt {
  position: sticky; top: 0;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* Die Bühne klebt die ganze Szene über am Fensterrand — und das Statusschild
     ist ihre unterste Reihe, lag also die ganze Szene über auf derselben Ecke
     wie der fixierte Chat-Knopf. Der Knopf hat sich deshalb über den kompletten
     Scrollweg zurückgezogen (gemessen bei 375: unsichtbar über 1160 px, während
     die Szene nur 600 px lang ist). Das war kein Fehler der Kollisionsprüfung in
     js/chat.js, sondern der Geometrie: das Schild ist unten randlos, der Knopf
     sitzt unten rechts, die beiden können sich nicht ausweichen.
     Gelöst im Layout statt im Messen: die Bühne hält die Knopfecke frei, dafür
     braucht das Schild kein [data-chat-frei] mehr. Kein Umschalten pro Bild,
     also auch keine neue Flackerquelle. */
  padding-bottom: var(--chat-band);
}

/* Nachthimmel über dem Laden: von Abendblau nach Tiefschwarzgrün */
.szene-halt::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: var(--gruen-950);
  opacity: calc(0.25 + var(--p) * 0.75);
}

/* 3.5rem Leiste plus Luft, sonst läuft die Uhr hinter die Kopfleiste. */
.szene-uhr {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: var(--raum-4);
  padding: calc(3.5rem + var(--raum-4)) var(--rand) var(--raum-3);
}
.uhr-scheibe { width: 44px; height: 44px; flex: none; }
.uhr-scheibe circle { fill: var(--gruen-850); stroke: var(--zink-500); stroke-width: 2; }
.uhr-scheibe line { stroke: var(--creme-200); stroke-linecap: round; }
.uhr-scheibe .zeiger-h { stroke-width: 3.4; transform-origin: 50% 50%; transform: rotate(calc(150deg + var(--p) * 285deg)); }
.uhr-scheibe .zeiger-m { stroke-width: 2; stroke: var(--licht); transform-origin: 50% 50%; transform: rotate(calc(180deg + var(--p) * 3420deg)); }
.uhr-zeit {
  font-family: var(--schild-schrift);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.02em;
  color: var(--creme-100);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.uhr-tag { color: var(--schrift-leise); }

/* Der Laden */
.laden {
  position: relative; z-index: 2;
  /* Reihe UND Spalte müssen stehen. Nur grid-row zu setzen, hat die
     Auto-Platzierung dazu gebracht, Laden und Protokoll in zwei verschiedene
     Spalten zu legen — der Laden schrumpfte auf ein Fünftel der Breite und das
     Schaufenster mit ihm. Gleiche Zelle = echtes Übereinanderliegen. */
  grid-area: 2 / 1;
  margin-inline: var(--rand);
  align-self: center;
  height: min(63vh, 33rem);
  border: 1px solid var(--zink-600);
  border-bottom: 0;
  background: var(--gruen-950);
  overflow: hidden;
  display: grid;
}
.laden-fenster { grid-area: 1 / 1; position: relative; overflow: hidden; }
/* Der Filter ist FEST. Vorher hingen saturate() und brightness() an --p und
   wurden bei jedem Scrollbild neu gerechnet — ein laufendes Video jedes Bild
   neu zu filtern heißt: Videoebene raus aus dem Compositing, Vollrepaint auf
   dem Hauptthread, und weil die Bühne sticky ist, "schwimmt" der Inhalt
   sichtbar gegen den Scroll. Das Abdunkeln macht jetzt allein die Nachtfläche
   .szene-halt::before, die nur ihre Deckung ändert und dabei composited bleibt. */
.laden-fenster video {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.55) brightness(0.8);
}
/* Standbild nur für den Fall, dass keine Bewegung erlaubt ist. */
.laden-fenster img { display: none; width: 100%; height: 100%; object-fit: cover; }
/* Rollladen fällt von oben */
.laden-rollladen {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  transform: translateY(calc(-100% + min(var(--p) / 0.22, 1) * 100%));
  border-bottom: 4px solid var(--zink-600);
}
/* Die Schlussleiste des Rollladens: massiveres Profil als die Lamellen,
   mit den beiden Führungsbolzen. Bauteil, kein Zierstreifen. */
.laden-rollladen::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background:
    radial-gradient(circle at 22px 50%, #0A0E0C 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 22px) 50%, #0A0E0C 0 2.5px, transparent 3px),
    linear-gradient(to bottom, #7B857E 0 2px, #5A645E 2px 9px, #2C3532 9px 12px, #0A0E0C 12px 14px);
}

/* Was nachts im Laden passiert: Protokollzeilen, treten nacheinander auf */
/* Der Zettelstapel, den die Nacht produziert hat. Er ist der Lohn der Szene,
   also sitzt er mittig auf dem geschlossenen Rollladen, nicht am Rand.
   Er liegt über der ganzen Bühne statt im .laden-Kasten — der klippt für den
   fallenden Rollladen und schnitt auf kurzen Viewports die letzten Zeilen ab. */
.laden-protokoll {
  grid-area: 2 / 1;            /* dieselbe Zelle wie der Laden, darüberliegend */
  z-index: 3;
  align-self: center;
  justify-self: center;
  display: grid; gap: 0.3rem;
  /* Bewusst 100vw statt 100%: eine Prozentbreite gilt beim Ausmessen der
     1fr-Reihe als "auto", die Zeilen brächen dann auf Wortbreite um und die
     Reihe würde dreimal so hoch wie die Bühne. vw ist eine feste Länge. */
  width: min(100vw - 2 * var(--rand) - 2rem, 40rem);
  opacity: clamp(0, calc((var(--p) - 0.26) * 14), 1);
}
/* Jeder Zettel ist ein zweiteiliges Schild: Amberfeld mit der Uhrzeit,
   daneben die Zeile. Kein Akzentstrich am Rand, sondern zwei echte Felder.
   Kein translateX mehr: der Versatz lief in Bruchteilen eines Pixels mit dem
   Scroll mit, also wurde die Schrift bei jedem Bild auf einem anderen
   Subpixel-Raster gerastert — genau das Wackeln. Bleibt die gestaffelte
   Deckung, die reicht fürs "nacheinander" und läuft auf dem Compositor. */
.laden-protokoll li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  font-size: 0.82rem;
  line-height: 1.42;
  color: var(--creme-100);
  background: var(--gruen-950);
  border: 1px solid var(--gruen-500);
  box-shadow: 0 2px 0 #05100C;
  overflow: hidden;
  opacity: clamp(0, calc((var(--p) - var(--ab)) * 18), 1);
}
.laden-protokoll b {
  display: flex; align-items: center;
  padding: 0.3rem 0.6rem;
  background: var(--licht);
  color: var(--schrift-auf-licht);
  font-family: var(--schild-schrift);
  font-weight: 800; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.laden-protokoll li > span { padding: 0.3rem 0.65rem; }

/* Das Schild über der Tür: geht an, wenn der Rollladen unten ist. */
.szene-schild {
  position: relative; z-index: 4;
  grid-area: 3 / 1;
  margin: 0 var(--rand);
  padding: clamp(0.9rem, 2.4vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--zink-600);
  border-radius: 0 0 var(--radius-plate) var(--radius-plate);
  background: color-mix(in srgb, var(--licht) calc(var(--an, 0) * 100%), var(--gruen-850));
  transition: background-color var(--tempo-lang) linear;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2) var(--raum-5);
  min-height: 4.6rem;
}
.szene-schild p {
  margin: 0;
  font-family: var(--schild-schrift);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.1vw, 2rem);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--creme-200);
  transition: color var(--tempo-lang) linear;
}
.szene.ist-an .szene-schild p { color: var(--schrift-auf-licht); }
.szene.ist-an .szene-schild .marke { color: color-mix(in srgb, var(--gruen-950) 72%, transparent); }
.szene-schild .marke { flex: none; }

/* Absolut positioniert heißt: gegen den Rand der Bühne, nicht gegen ihr
   Polster. Ohne das Band im bottom-Wert stünde der Hinweis in der freigehaltenen
   Ecke — bei 375 px reicht er bis 239 px, der Knopf beginnt bei 192 px. Mit dem
   Band bleibt er da, wo er war: mittig auf der Unterkante des Schildes. */
.szene-hinweis {
  position: absolute; z-index: 5; left: 50%; bottom: calc(var(--chat-band) + 0.9rem);
  transform: translateX(-50%);
  opacity: calc(1 - var(--p) * 5);
}

/* ======================= 3 · Automatisierung =========================== */
.stapel { display: grid; gap: var(--raum-6); }

/* Telefon: großes Feld, Beweis links, Nummer rechts */
.telefon {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  align-items: stretch;
}
.telefon-text { padding: clamp(1.5rem, 3.5vw, 2.8rem); }
.telefon-text h3 { font-size: var(--fs-titel); text-transform: uppercase; line-height: var(--lh-eng); letter-spacing: -0.015em; margin-bottom: var(--raum-4); }
.telefon-text > p { color: var(--creme-300); }

.telefon-beweis {
  background: var(--gruen-950);
  border-left: 1px solid var(--gruen-600);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  display: grid;
  align-content: start;
  gap: var(--raum-4);
}
.zettel {
  border: 1px solid var(--gruen-500);
  background: var(--gruen-850);
  border-radius: var(--radius-plate);
}
.zettel-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: var(--raum-3);
  padding: 0.55rem 0.9rem;
  background: var(--licht);
  color: var(--schrift-auf-licht);
  font-family: var(--schild-schrift);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--fs-mini);
}
.zettel dl {
  margin: 0;
  display: grid;
  grid-template-columns: 6.2rem 1fr;
}
.zettel dt, .zettel dd {
  margin: 0;
  padding: 0.5rem 0.9rem;
  border-top: 1px solid var(--gruen-700);
  font-size: var(--fs-klein);
}
.zettel dt {
  font-family: var(--schild-schrift);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--schrift-leise);
  border-right: 1px solid var(--gruen-700);
}
.zettel dd { color: var(--creme-100); }

.nummer-gross {
  display: block;
  font-family: var(--schild-schrift);
  font-weight: 900;
  font-size: clamp(1.75rem, 5vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--licht);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.nummer-gross:hover { color: var(--licht-hell); text-decoration: underline; text-decoration-thickness: 2px; }

/* Rezensions-Autopilot */
.rezension { display: grid; grid-template-columns: 0.85fr 1.15fr; }
.rezension-links { padding: clamp(1.5rem, 3.5vw, 2.8rem); border-right: 1px solid var(--gruen-600); }
.rezension-links h3 { font-size: var(--fs-titel); text-transform: uppercase; line-height: var(--lh-eng); letter-spacing: -0.015em; margin-bottom: var(--raum-4); }
.rezension-links p { color: var(--creme-300); }
.rezension-rechts { padding: clamp(1.3rem, 3vw, 2.2rem); background: var(--gruen-950); }

.reiter {
  display: flex; gap: 0;
  border: 1px solid var(--gruen-500);
  border-radius: var(--radius-knopf);
  overflow: hidden;
  margin-bottom: var(--raum-4);
}
.reiter button {
  flex: 1 1 0;
  background: var(--gruen-850);
  border: 0;
  border-right: 1px solid var(--gruen-500);
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  font-family: var(--schild-schrift);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.88rem;
  color: var(--creme-300);
  transition: background-color var(--tempo-kurz) linear, color var(--tempo-kurz) linear;
}
.reiter button:last-child { border-right: 0; }
.reiter button:hover { background: var(--gruen-700); color: var(--schrift-stark); }
.reiter button[aria-selected="true"] { background: var(--licht); color: var(--schrift-auf-licht); }
.reiter .sterne { letter-spacing: 0.1em; }

.tafel-rezension { display: grid; gap: var(--raum-4); }
.tafel-rezension[hidden] { display: none; }

.eintrag {
  border: 1px solid var(--gruen-600);
  background: var(--gruen-850);
  padding: var(--raum-4);
  border-radius: var(--radius-plate);
}
.eintrag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.9rem; margin-bottom: 0.6rem; }
.eintrag-kopf strong { font-family: var(--schild-schrift); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.01em; color: var(--creme-100); }
.eintrag p { font-size: var(--fs-klein); color: var(--creme-200); margin: 0; }

.sterne { font-family: var(--schild-schrift); font-weight: 700; color: var(--licht); white-space: nowrap; }
.sterne[data-wert="1"] { color: var(--aerger); }
.sterne .leer { color: var(--zink-500); }

.antwort {
  border: 1px solid var(--licht-tief);
  background: color-mix(in srgb, var(--licht) 10%, var(--gruen-850));
  border-left-width: 1px;
  padding: var(--raum-4);
  border-radius: var(--radius-plate);
}
.antwort .marke { color: var(--licht); margin-bottom: 0.5rem; display: block; }
.antwort p { font-size: var(--fs-klein); color: var(--creme-100); margin: 0; }
.antwort .wort { display: inline-block; }

/* Zwei-Spalten-Paar: Büro-Autopilot + E-Mail-Agent */
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-6); }
.kachel { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; align-content: start; gap: var(--raum-4); }
.kachel h3 { font-size: var(--fs-sub); text-transform: uppercase; letter-spacing: -0.005em; }
.kachel p { color: var(--creme-300); font-size: var(--fs-klein); }

.bund { display: grid; gap: 0; border-top: 1px solid var(--gruen-600); }
.bund li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.62rem 0;
  border-bottom: 1px solid var(--gruen-700);
  font-size: var(--fs-klein);
  color: var(--creme-100);
}
.bund li .marke-zustand::before { position: relative; top: 0.02em; }

.warnung {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1px solid var(--licht-tief);
  background: color-mix(in srgb, var(--licht) 12%, var(--gruen-850));
  padding: 0.8rem 1rem;
  border-radius: var(--radius-plate);
  font-size: var(--fs-klein);
  color: var(--creme-100);
}
.warnung svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--licht); margin-top: 0.15rem; }

/* Schilderwand: kleine Emailleschilder, unterschiedlich breit */
.schilderwand {
  display: flex; flex-wrap: wrap; gap: var(--raum-3);
}
.schilderwand li {
  padding: 0.62rem 1rem 0.62rem 0.9rem;
  background: var(--gruen-800);
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-plate);
  font-family: var(--schild-schrift);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.015em;
  color: var(--creme-200);
  box-shadow: 0 2px 0 var(--gruen-950);
  display: flex; align-items: center; gap: 0.55rem;
  transition: transform var(--tempo-kurz) var(--kurve), border-color var(--tempo-kurz) linear, color var(--tempo-kurz) linear;
}
.schilderwand li::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--niete);
}
.schilderwand li:hover { transform: translateY(-3px); border-color: var(--licht); color: var(--schrift-stark); }

.werkbank {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem;
  padding-top: var(--raum-5);
  border-top: 1px solid var(--gruen-700);
  margin-top: var(--raum-6);
}
.werkbank li { font-family: var(--schild-schrift); font-weight: 700; letter-spacing: 0.05em; color: var(--creme-300); font-size: 1rem; }

/* ========================== 4 · Webseiten ============================== */
/* Kopfzeile mit Foto daneben: füllt die rechte Hälfte, die sonst leer bliebe. */
.kopf-mit-bild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--raum-6);
  align-items: end;
  margin-bottom: var(--raum-7);
}
.kopf-mit-bild .kopfzeile { margin-bottom: 0; }
.kopf-mit-bild figure {
  margin: 0;
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-plate);
  overflow: hidden;
  box-shadow: var(--schatten-plate);
}
.kopf-mit-bild img {
  width: 100%; height: clamp(11rem, 20vw, 15rem); object-fit: cover;
  filter: saturate(0.6) brightness(0.78);
}

/* Drei Schilder, die von links nach rechts wachsen, auf einer Montageschiene. */
.stufen-bank { position: relative; }
.stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-5); align-items: end; }
.stufen-schiene {
  height: 6px;
  background: linear-gradient(to bottom, var(--zink-400) 0 1px, var(--zink-600) 1px 4px, var(--gruen-950) 4px 6px);
  margin-top: -1px;
}
.stufe { display: grid; align-content: end; }
.stufe-schild {
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  display: grid; gap: var(--raum-3); align-content: start;
}
.stufe:nth-child(1) .stufe-schild { min-height: 12rem; }
.stufe:nth-child(2) .stufe-schild { min-height: 15rem; }
.stufe:nth-child(3) .stufe-schild { min-height: 18rem; background: var(--tafel-hoch); border-color: var(--zink-500); }
.stufe h3 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.01em;
}
.stufe p { font-size: var(--fs-klein); color: var(--creme-300); }
.stufe .bund li { font-size: 0.86rem; padding: 0.45rem 0; }
.stufe-fuss { padding-top: var(--raum-3); }

.gruende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0 var(--raum-6);
  margin-top: var(--raum-7);
  border-top: 1px solid var(--gruen-600);
}
.gruende li {
  padding: var(--raum-4) 0;
  border-bottom: 1px solid var(--gruen-700);
  display: grid; grid-template-columns: auto 1fr; gap: 0.8rem;
  align-items: start;
  font-size: var(--fs-klein);
  color: var(--creme-200);
}
.gruende svg { width: 1.15rem; height: 1.15rem; color: var(--licht); margin-top: 0.15rem; }
.gruende b { color: var(--creme-100); font-weight: 700; }

/* Bildband: ein breites Foto als Atempause */
.bildband {
  position: relative;
  border-block: 1px solid var(--gruen-600);
  overflow: hidden;
  background: var(--gruen-950);
}
.bildband img {
  width: 100%;
  height: clamp(15rem, 34vw, 26rem);
  object-fit: cover;
  filter: saturate(0.55) brightness(0.6);
}
.bildband-text {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(1.2rem, 4vw, 2.6rem);
  background: linear-gradient(to top, color-mix(in srgb, var(--gruen-950) 94%, transparent), transparent);
}
.bildband-text p {
  margin: 0;
  font-family: var(--schild-schrift);
  font-weight: 800;
  font-size: clamp(1.3rem, 3.6vw, 2.4rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--creme-100);
  max-width: 34rem;
  text-wrap: balance;
}

/* ============================ 5 · Pakete =============================== */
/* Sechs Felder, drei Spalten: zwei volle Reihen, keine Löcher am Ende. */
.anschlagtafel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-plate);
  overflow: hidden;
  background: var(--tafel);
  box-shadow: var(--schatten-plate);
}
.anschlagtafel li {
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
  border-right: 1px solid var(--gruen-600);
  border-bottom: 1px solid var(--gruen-600);
  display: grid; gap: 0.5rem; align-content: start;
}
.anschlagtafel h3 {
  font-size: 1.18rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--creme-100);
}
.anschlagtafel p { font-size: var(--fs-klein); color: var(--creme-300); margin: 0; }
.anschlagtafel .hervor { background: var(--licht); }
.anschlagtafel .hervor h3, .anschlagtafel .hervor p { color: var(--schrift-auf-licht); }
.anschlagtafel .hervor .marke { color: color-mix(in srgb, var(--gruen-950) 70%, transparent); }

/* Der Knopf steht mittig auf 80 % — der erklärende Satz darunter, ebenfalls
   mittig. Nebeneinander bräche die Zeile am 80-%-Knopf ohnehin um. */
.pakete-fuss {
  margin-top: var(--raum-7);
  display: grid; justify-items: center; gap: var(--raum-4);
}
.pakete-fuss p { margin: 0; color: var(--creme-300); font-size: var(--fs-klein); max-width: 34rem; text-align: center; }

/* ============================ 6 · Ablauf =============================== */
.ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; counter-reset: schritt; }
.ablauf li {
  position: relative;
  padding: var(--raum-6) var(--raum-5) var(--raum-5);
  border-right: 1px solid var(--gruen-600);
}
.ablauf li:last-child { border-right: 0; }
.ablauf li::before {
  counter-increment: schritt;
  content: counter(schritt, decimal-leading-zero);
  display: block;
  font-family: var(--schild-schrift);
  font-weight: 900;
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  line-height: 0.8;
  color: var(--licht);
  margin-bottom: var(--raum-4);
  font-variant-numeric: tabular-nums;
}
.ablauf h3 { font-size: var(--fs-sub); text-transform: uppercase; margin-bottom: 0.6rem; }
.ablauf p { font-size: var(--fs-klein); color: var(--creme-300); }
/* Montageschiene, auf der die drei Stationen sitzen */
.ablauf-schiene {
  height: 6px;
  background: linear-gradient(to bottom, var(--zink-400) 0 1px, var(--zink-600) 1px 4px, var(--gruen-950) 4px 6px);
  margin-bottom: -1px;
  position: relative;
}

/* ============================ 7 · Kontakt ============================== */
.kontakt { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--raum-7); align-items: start; }
.kontakt-links h2 { font-size: var(--fs-gross); line-height: var(--lh-eng); text-transform: uppercase; letter-spacing: -0.018em; margin-bottom: var(--raum-4); }
.kontakt-links p { color: var(--creme-300); font-size: var(--fs-lead); }
.direkt { display: grid; gap: var(--raum-3); margin-top: var(--raum-6); }
.direkt a {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--gruen-500);
  border-radius: var(--radius-plate);
  background: var(--gruen-850);
  color: var(--creme-100);
  text-decoration: none;
  font-family: var(--schild-schrift);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  transition: border-color var(--tempo-kurz) linear, background-color var(--tempo-kurz) linear, transform var(--tempo-kurz) var(--kurve);
}
.direkt a:hover { border-color: var(--licht); background: var(--gruen-800); transform: translateX(3px); }
.direkt svg { width: 1.2rem; height: 1.2rem; color: var(--licht); flex: none; }

.kontakt-bild {
  margin: var(--raum-6) 0 0;
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-plate);
  overflow: hidden;
  box-shadow: var(--schatten-plate);
}
.kontakt-bild img {
  width: 100%; height: clamp(9rem, 16vw, 13rem); object-fit: cover;
  filter: saturate(0.5) brightness(0.72);
}
.kontakt-bild figcaption {
  padding: 0.7rem 0.9rem;
  background: var(--gruen-850);
  border-top: 1px solid var(--gruen-600);
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: var(--fs-klein);
  font-family: var(--lauf-schrift);
  color: var(--creme-300);
}

form { display: grid; gap: var(--raum-4); }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
.feld { display: grid; gap: 0.4rem; }
.feld > label, .gruppe > legend {
  font-family: var(--schild-schrift);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--fs-mini);
  color: var(--creme-300);
}
.feld input, .feld textarea {
  width: 100%;
  background: var(--feld-grund);
  border: 1px solid var(--feld-linie);
  border-radius: var(--radius-knopf);
  color: var(--feld-text);
  padding: 0.72rem 0.85rem;
  font-size: var(--fs-text);
  transition: border-color var(--tempo-kurz) linear, background-color var(--tempo-kurz) linear;
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--feld-platzhalter); }
.feld input:hover, .feld textarea:hover { border-color: var(--zink-400); }
.feld input:focus, .feld textarea:focus { border-color: var(--feld-linie-fokus); background: var(--gruen-800); }
.feld textarea { min-height: 8rem; resize: vertical; }
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--aerger); }

.gruppe { border: 0; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.wahl { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.wahl label {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--gruen-500);
  border-radius: var(--radius-knopf);
  background: var(--gruen-850);
  cursor: pointer;
  font-size: var(--fs-klein);
  transition: border-color var(--tempo-kurz) linear, background-color var(--tempo-kurz) linear;
}
.wahl label:hover { border-color: var(--zink-300); }
.wahl input { accent-color: var(--licht); width: 1.05rem; height: 1.05rem; margin: 0; }
.wahl input:checked + span { color: var(--creme-100); font-weight: 600; }
.wahl label:has(input:checked) { border-color: var(--licht); background: var(--gruen-800); }

.form-fuss { display: grid; justify-items: center; gap: var(--raum-3); }
.form-fuss .marke { max-width: 26rem; text-align: center; }

.form-meldung {
  border: 1px solid var(--licht);
  background: color-mix(in srgb, var(--licht) 14%, var(--gruen-850));
  padding: var(--raum-4);
  border-radius: var(--radius-plate);
  display: grid; gap: 0.5rem;
}
.form-meldung[hidden] { display: none; }
.form-meldung strong { font-family: var(--schild-schrift); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--licht); }
.form-meldung p { font-size: var(--fs-klein); color: var(--creme-100); margin: 0; }

.honig { position: absolute; left: -9999px; }

/* ============================= 8 · Fuß ================================= */
.fuss {
  background: var(--gruen-950);
  border-top: 1px solid var(--gruen-600);
  padding-block: var(--raum-7) var(--raum-6);
}
.fuss-raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--raum-6);
  align-items: start;
}
.fuss h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--creme-300); margin-bottom: var(--raum-3); }
.fuss address { font-style: normal; font-size: var(--fs-klein); color: var(--creme-300); line-height: 1.75; }
/* Tippziel mindestens 24 px hoch (WCAG 2.2, 2.5.8). */
.fuss address a {
  display: inline-block;
  padding-block: 0.28rem;
  color: var(--creme-100);
  text-decoration-color: var(--zink-500);
}
.fuss address a:hover { color: var(--licht); }
.fuss-liste li { padding: 0.22rem 0; font-size: var(--fs-klein); color: var(--creme-300); }
.fuss-schluss {
  margin-top: var(--raum-6);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--gruen-700);
  display: flex; flex-wrap: wrap; gap: var(--raum-3) var(--raum-6); align-items: center;
}
/* Impressum und Datenschutz stehen als eigene Marke im Fuß, nicht als
   Kleingedrucktes: § 5 DDG verlangt sie leicht erkennbar. */
.fuss-recht { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5); }
.fuss-recht a {
  display: inline-block;
  padding-block: 0.28rem;
  font-family: var(--schild-schrift);
  font-weight: 700;
  font-size: var(--fs-klein);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--creme-100);
  text-decoration-color: var(--zink-500);
}
.fuss-recht a:hover { color: var(--licht); }

/* --------------------------- Nach oben ---------------------------------
   Sitzt links unten, nicht rechts. Rechts unten steht seit dem Einbau des
   KI-Chats erst der Startknopf und danach die Blase des ElevenLabs-Widgets —
   Fremdcode, dessen Maße wir nicht bestimmen. Zwei fixierte Flächen in
   derselben Ecke ist genau der Fall, vor dem die Monorepo-Regel warnt. */
#nach-oben {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 95;
  width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--licht-tief);
  background: var(--licht);
  color: var(--schrift-auf-licht);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--licht-tief), 0 12px 24px -10px rgb(0 0 0 / 0.8);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.9rem);
  transition: opacity var(--tempo-mit) var(--kurve),
              transform var(--tempo-mit) var(--kurve),
              visibility 0s linear var(--tempo-mit),
              background-color var(--tempo-kurz) linear;
}
#nach-oben.sichtbar {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
#nach-oben:hover { background: var(--licht-hell); }
#nach-oben:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--licht-tief); }
#nach-oben svg { width: 1.35rem; height: 1.35rem; }

/* ------------------------- KI-Chat-Starter -----------------------------
   Das Klingelschild neben der Tür: Zinkrahmen, Niete, ein Amberlämpchen für
   "es ist jemand da". Bewusst KEIN Amberfeld — das trägt schon der
   Nach-oben-Knopf in der anderen Ecke, und zwei leuchtende Flächen unten
   wären zwei Hauptsachen. Vor dem Klick geht kein Byte an ElevenLabs. */
#chat-start {
  position: fixed;
  right: var(--chat-ecke);
  bottom: var(--chat-ecke);
  z-index: 95;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.62rem 0.85rem;
  border: 1px solid var(--kante);
  border-radius: var(--radius-plate);
  background:
    radial-gradient(circle at 7px 7px, rgb(255 255 255 / 0.14) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) 7px, rgb(255 255 255 / 0.14) 0 1.6px, transparent 2.2px),
    var(--tafel-hoch);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.09),
    inset 0 -1px 0 rgb(0 0 0 / 0.45),
    0 2px 0 var(--gruen-950),
    0 14px 28px -14px rgb(0 0 0 / 0.85);
  color: var(--creme-200);
  font-family: var(--schild-schrift);
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.9rem);
  transition: opacity var(--tempo-mit) var(--kurve),
              transform var(--tempo-mit) var(--kurve),
              visibility 0s linear var(--tempo-mit),
              background-color var(--tempo-kurz) linear,
              border-color var(--tempo-kurz) linear;
}
#chat-start.sichtbar {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition-delay: 0s;
}
#chat-start:hover { border-color: var(--licht); color: var(--creme-100); }
#chat-start:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--gruen-950); }
#chat-start[aria-disabled="true"] { cursor: progress; color: var(--schrift-leise); }
#chat-start svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--licht); }
/* Das Lämpchen: Zustand als Form, nicht als Farbe allein — gefülltes Quadrat
   heißt "brennt", genau wie .marke-zustand überall sonst auf der Seite. */
#chat-start::after {
  content: "";
  width: 0.5rem; height: 0.5rem; flex: none;
  background: var(--licht);
  box-shadow: 0 0 0 1px var(--licht-tief);
}
@media (max-width: 26rem) {
  #chat-start { padding: 0.55rem 0.6rem; font-size: 0.88rem; gap: 0.42rem; }
}

/* ========================= 9 · Konfigurator ============================
   Von der alten Seite übernommen: Reihenfolge, Fragen, Preise und Logik sind
   unverändert. Nur das Material ist jetzt dieses hier — die Fortschritts-
   anzeige ist eine Montageschiene mit Amberfeld, jede Auswahl ein Schild,
   das gewählte leuchtet. Utility-Klasse .hidden, weil konfigurator.js sie
   umschaltet (identisch zur alten Datei, damit die Logik unangetastet bleibt).
   ===================================================================== */
.hidden { display: none !important; }

.wz-kopf { padding-block: var(--raum-8) var(--raum-6); }
.wz-kopf h1 {
  font-size: var(--fs-gross);
  line-height: var(--lh-eng);
  letter-spacing: -0.018em;
  text-transform: uppercase;
  margin-bottom: var(--raum-4);
}
.wz-kopf .lauf { color: var(--creme-300); font-size: var(--fs-lead); max-width: 44rem; }

.wz-kasten {
  padding: clamp(1.2rem, 3vw, 2.2rem);
  margin-bottom: var(--raum-8);
}
.wz-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--raum-4);
  margin-bottom: var(--raum-3);
}
/* Fortschritt als Montageschiene: das gelaufene Stück ist beleuchtet. */
.wz-schiene {
  height: 10px;
  background: var(--gruen-950);
  border: 1px solid var(--zink-600);
  overflow: hidden;
}
/* Kein Übergang auf width — das wäre eine Layout-Animation. Der Sprung ist
   ohnehin nur zusammen mit dem Schrittwechsel sichtbar. */
.wz-schiene i {
  display: block; height: 100%;
  background: var(--licht);
  border-right: 1px solid var(--licht-tief);
}

.wz-step { display: none; border: 0; padding: 0; margin: var(--raum-6) 0 0; }
.wz-step.active { display: block; }
.wz-step > legend {
  font-family: var(--schild-schrift);
  font-weight: 800;
  font-size: var(--fs-titel);
  line-height: var(--lh-eng);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--schrift-stark);
  padding: 0;
}
.wz-step > legend .licht { color: var(--licht); }
.wz-hinweis { color: var(--creme-300); font-size: var(--fs-klein); margin: var(--raum-3) 0 var(--raum-5); }
.wz-feld-titel {
  display: block;
  font-family: var(--schild-schrift);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--fs-mini);
  color: var(--creme-300);
  margin: var(--raum-5) 0 var(--raum-3);
}
.wz-feld-titel:first-of-type { margin-top: 0; }
.wz-feld-titel .leise { text-transform: none; letter-spacing: 0.01em; color: var(--schrift-leise); font-family: var(--lauf-schrift); font-weight: 400; }
.wz-klein { font-size: var(--fs-mini); color: var(--creme-400); line-height: 1.65; margin-top: var(--raum-3); }
/* Laufende Summe im Paket-Schritt. Sie ist eine Ansage, kein Preisschild —
   deshalb kein Rahmen und keine Flaeche, nur Gewicht und Akzentfarbe. */
.wz-summe { margin: var(--raum-4) 0 0; font-weight: 600; color: var(--licht); }
/* Briefing (briefing.html): dieselben Feldgruppen wie im Konfigurator, aber alle
   untereinander statt als Assistent-Schritte. .wz-step ist per Default versteckt
   und wird erst per .active eingeblendet — .br-block braucht das nicht. */
.br-block { display: block; border: 0; padding: 0; margin: 0 0 var(--raum-7, 3rem); }

/* Eingaben nutzen dieselben .feld-Regeln wie das Kontaktformular. */
.wz-step select, .wz-step input[type="time"] {
  width: 100%;
  background: var(--feld-grund);
  border: 1px solid var(--feld-linie);
  border-radius: var(--radius-knopf);
  color: var(--feld-text);
  padding: 0.72rem 0.85rem;
  font-size: var(--fs-text);
}
.wz-step select:focus, .wz-step input[type="time"]:focus { border-color: var(--feld-linie-fokus); background: var(--gruen-800); }
.wz-step select option { background: var(--gruen-850); color: var(--creme-100); }
.wz-raster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-4); }
.wz-raster-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--raum-4); }

/* Ein Wahlschild: flach, Zinkrahmen, gewählt leuchtet es. */
.wahlschild {
  position: relative;
  display: block;
  padding: 0.9rem 1rem;
  background: var(--gruen-850);
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-plate);
  box-shadow: 0 2px 0 var(--gruen-950);
  cursor: pointer;
  transition: border-color var(--tempo-kurz) linear, background-color var(--tempo-kurz) linear, transform var(--tempo-kurz) var(--kurve);
}
.wahlschild:hover { border-color: var(--zink-300); transform: translateY(-2px); }
.wahlschild input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahlschild:has(input:focus-visible),
.wahlschild.fokus { outline: var(--fokus-breite) solid var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.wahlschild .name {
  display: flex; align-items: center; gap: 0.55em;
  font-family: var(--schild-schrift);
  font-weight: 800; font-size: 1.12rem;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--creme-100);
}
.wahlschild .name::before {
  content: "";
  width: 0.62em; height: 0.62em; flex: none;
  border: 2px solid var(--zink-400);
  background: transparent;
}
.wahlschild.on .name::before,
.wahlschild:has(input:checked) .name::before { border-color: var(--licht); background: var(--licht); }
.wahlschild.on,
.wahlschild:has(input:checked) { border-color: var(--licht); background: var(--gruen-800); }
.wahlschild .preis {
  font-family: var(--schild-schrift);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--licht);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wahlschild .preis span { font-size: 0.9rem; font-weight: 700; color: var(--creme-300); }
.wahlschild .was { font-size: var(--fs-klein); color: var(--creme-300); margin-top: 0.45rem; }
.wahlschild .zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; }
.wahlschild.aus { opacity: 0.55; cursor: not-allowed; }
.wahlschild.aus:hover { transform: none; border-color: var(--zink-600); }
.wahlschild .sperrmarke {
  font-family: var(--schild-schrift);
  font-weight: 700; font-size: var(--fs-mini);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gruen-950);
  /* zink-400 (5,35:1) unter die 8,6:1-Hausregel gerutscht (Audit 2026-09-01).
     zink-300 statt zink-400: gleiche Zink-Familie, nur einen Schritt heller,
     8,7:1. Dunkler waere falsch — dunkler Text auf noch dunklerem Grund
     senkt den Kontrast weiter, nicht umgekehrt. */
  background: var(--zink-300);
  padding: 0.1rem 0.4rem;
}
.wz-schildreihe { display: grid; gap: var(--raum-3); }

/* Plakette: kleine Mehrfachauswahl, dieselbe Familie wie .schilderwand */
.plaketten { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.plakette {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: var(--gruen-800);
  border: 1px solid var(--zink-600);
  border-radius: var(--radius-plate);
  box-shadow: 0 2px 0 var(--gruen-950);
  font-family: var(--schild-schrift);
  font-weight: 700; font-size: 1.02rem;
  color: var(--creme-200);
  cursor: pointer;
  transition: transform var(--tempo-kurz) var(--kurve), border-color var(--tempo-kurz) linear, background-color var(--tempo-kurz) linear, color var(--tempo-kurz) linear;
}
.plakette input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plakette::before {
  content: "";
  width: 0.62em; height: 0.62em; flex: none;
  border: 2px solid var(--zink-400);
  background: transparent;
}
.plakette:hover { transform: translateY(-2px); border-color: var(--zink-300); }
.plakette.on,
.plakette:has(input:checked) { border-color: var(--licht); background: var(--gruen-700); color: var(--schrift-stark); }
.plakette.on::before,
.plakette:has(input:checked)::before { border-color: var(--licht); background: var(--licht); }
.plakette:has(input:focus-visible) { outline: var(--fokus-breite) solid var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.plakette.aus { opacity: 0.5; cursor: not-allowed; }
.plakette.aus:hover { transform: none; }

/* Farbwelt: die Muster liegen als flache Felder nebeneinander, kein Verlauf. */
.farbwelten { display: grid; gap: var(--raum-3); }
.farbwelt { display: flex; align-items: center; gap: var(--raum-4); }
.farbwelt .muster { display: flex; flex: none; border: 1px solid var(--zink-500); }
.farbwelt .muster i { display: block; width: 1.5rem; height: 2.2rem; }
.wz-eigenfarben {
  margin-top: var(--raum-3);
  padding: var(--raum-4);
  border: 1px solid var(--licht-tief);
  background: color-mix(in srgb, var(--licht) 8%, var(--gruen-850));
  border-radius: var(--radius-plate);
}
.wz-eigenfarben .reihe { display: flex; flex-wrap: wrap; gap: var(--raum-4); margin-top: var(--raum-3); }
.wz-eigenfarben label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-klein); color: var(--creme-300); }
.wz-farbwahl { width: 3rem; height: 2rem; padding: 0; border: 1px solid var(--zink-500); background: var(--gruen-850); cursor: pointer; }

/* Zeilen-UI (Leistungen, Team, Öffnungszeiten) */
.wz-row { display: grid; gap: var(--raum-2); margin-bottom: var(--raum-2); }
.wz-row-leistung { grid-template-columns: 2fr 1fr 2fr auto; }
.wz-row-team { grid-template-columns: 1fr 1fr auto; }
.wz-row input[type="text"], .wz-row input[type="url"] {
  width: 100%;
  background: var(--feld-grund);
  border: 1px solid var(--feld-linie);
  border-radius: var(--radius-knopf);
  color: var(--feld-text);
  padding: 0.65rem 0.8rem;
  font-size: var(--fs-klein);
}
.wz-row input::placeholder { color: var(--feld-platzhalter); }
.wz-row input:focus { border-color: var(--feld-linie-fokus); background: var(--gruen-800); }
.wz-row-del {
  background: var(--gruen-850);
  border: 1px solid var(--zink-600);
  color: var(--creme-300);
  cursor: pointer;
  padding: 0 0.8rem;
  border-radius: var(--radius-knopf);
  font-size: 1.1rem; line-height: 1;
}
.wz-row-del:hover { border-color: var(--aerger); color: var(--aerger); }
.wz-zeit-row {
  display: grid; grid-template-columns: 5.5rem 1fr 1fr auto;
  align-items: center; gap: var(--raum-2);
  font-size: var(--fs-klein);
}
.wz-zeit-tag { font-family: var(--schild-schrift); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--creme-300); }
.wz-zeit-zu { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--creme-300); }
.wz-zeit-zu input { accent-color: var(--licht); width: 1.05rem; height: 1.05rem; }
.wz-textlink {
  background: none; border: 0; padding: 0.4rem 0;
  color: var(--licht); cursor: pointer;
  font-family: var(--schild-schrift); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; font-size: var(--fs-mini);
}
.wz-textlink:hover { color: var(--licht-hell); text-decoration: underline; }

.wz-datei { font-size: var(--fs-klein); color: var(--creme-300); }
.wz-datei::file-selector-button {
  margin-right: 0.8rem;
  background: var(--gruen-700);
  border: 1px solid var(--zink-500);
  border-radius: var(--radius-knopf);
  color: var(--creme-100);
  font-family: var(--schild-schrift);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}
.wz-datei::file-selector-button:hover { background: var(--gruen-600); }
#upload-liste { margin-top: var(--raum-2); font-size: var(--fs-mini); color: var(--creme-300); }
#upload-liste li { padding: 0.15rem 0; }

/* Überblick: eine Anschlagtafel mit Zeilen, Gesamtsumme als Leuchtfeld. */
.sumrow {
  display: grid; grid-template-columns: 11rem 1fr; gap: var(--raum-3);
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--gruen-600);
  border-top: 0;
  font-size: var(--fs-klein);
  color: var(--creme-100);
  background: var(--gruen-850);
}
.sumrow:first-child { border-top: 1px solid var(--gruen-600); }
.sumrow .k {
  font-family: var(--schild-schrift);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  font-size: var(--fs-mini);
  color: var(--schrift-leise);
}
.sumrow.total {
  background: var(--licht);
  border-color: var(--licht-tief);
  align-items: center;
}
.sumrow.total .k, .sumrow.total .v { color: var(--schrift-auf-licht); }
.sumrow.total .v {
  font-family: var(--schild-schrift);
  font-weight: 900; font-size: 1.5rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wz-abschluss {
  margin-top: var(--raum-5);
  padding: var(--raum-5);
  border: 1px solid var(--licht-tief);
  background: color-mix(in srgb, var(--licht) 10%, var(--gruen-850));
  border-radius: var(--radius-plate);
  display: grid; gap: var(--raum-4);
}
.wz-zustimmung { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--fs-klein); color: var(--creme-200); cursor: pointer; }
.wz-zustimmung input { accent-color: var(--licht); width: 1.15rem; height: 1.15rem; flex: none; margin-top: 0.15rem; }
/* Fluchtet mit dem Zustimmungstext, nicht mit dem Kästchen: 1,15rem Kasten
   plus 0,7rem Abstand. */
.wz-zustimmung-recht {
  margin: 0.35rem 0 0 calc(1.15rem + 0.7rem);
  font-size: var(--fs-klein);
  color: var(--creme-300);
}
.wz-zustimmung-recht a { display: inline-block; padding-block: 0.28rem; color: var(--creme-100); text-decoration-color: var(--zink-500); }
.wz-zustimmung-recht a:hover { color: var(--licht); }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

.wz-err {
  color: var(--aerger);
  font-family: var(--schild-schrift);
  font-weight: 700; letter-spacing: 0.03em; font-size: 1.05rem;
  margin-top: var(--raum-4);
}
.wz-err:empty { display: none; }

.wz-fuss {
  display: flex; align-items: center; gap: var(--raum-4);
  margin-top: var(--raum-6);
  padding-top: var(--raum-5);
  border-top: 1px solid var(--gruen-700);
}
.wz-fuss .knopf-kante { margin-right: auto; }
/* "Weiter" ist die vorwärtsgerichtete Tat und trägt darum die Lichtkante,
   ohne den 80-%-Hauptknopf zu sein — hier stehen zwei Knöpfe nebeneinander. */
.wz-fuss .knopf-weiter { margin-left: auto; border-color: var(--licht); color: var(--licht); }
.wz-fuss .knopf-weiter:hover { background: var(--gruen-700); border-color: var(--licht-hell); color: var(--licht-hell); }

/* ========================= 10 · Rechtsseiten ===========================
   Impressum und Datenschutz. Read-Fläche: der Text führt, das Material tritt
   zurück. Trotzdem dieselbe Welt — der Titel steht im Leuchtkasten, der Text
   auf einer genieteten Tafel, die Ziffern sind Zinkplättchen. Satzbreite
   bewusst auf 34rem gedeckelt (gemessen 66–72 Zeichen). */
.rechtsseite { padding-block: var(--raum-8) var(--raum-9); }
.rechtsseite .leuchtkasten { max-width: 46rem; }
.rechtsseite h1 {
  font-size: var(--fs-gross);
  line-height: var(--lh-eng);
  letter-spacing: -0.022em;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--schrift-auf-licht);
  margin: 0;
}
.rechtsseite .leuchtkasten p {
  margin-top: var(--raum-3);
  color: var(--gruen-900);
  font-weight: 600;
  max-width: 34rem;
}

.rechtstext {
  margin-top: var(--raum-6);
  max-width: 52rem;
  padding: clamp(1.4rem, 3.4vw, 2.6rem) clamp(1.3rem, 3.2vw, 2.4rem);
}
.rechtstext section + section {
  margin-top: var(--raum-6);
  padding-top: var(--raum-5);
  border-top: 1px solid var(--gruen-600);
}
.rechtstext h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem;
  font-family: var(--schild-schrift);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: var(--lh-mit);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--creme-100);
  margin-bottom: var(--raum-3);
}
/* Die Ziffer ist ein Zinkplättchen, kein Randstrich. */
.rechtstext h2 .ziffer {
  flex: none;
  padding: 0.1rem 0.42rem;
  background: var(--gruen-700);
  border: 1px solid var(--zink-600);
  color: var(--creme-200);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.rechtstext p {
  max-width: 34rem;
  color: var(--creme-300);
  line-height: var(--lh-text);
}
.rechtstext p + p { margin-top: var(--raum-3); }
.rechtstext a { color: var(--creme-100); text-decoration-color: var(--zink-400); }
.rechtstext a:hover { color: var(--licht); }
.rechtstext .stand { margin-top: var(--raum-6); font-size: var(--fs-mini); color: var(--schrift-leise); }
.rechtsseite .zurueck { margin-top: var(--raum-6); }

.seitenfuss {
  border-top: 1px solid var(--gruen-600);
  background: var(--gruen-950);
  padding-block: var(--raum-5);
}
.seitenfuss .bahn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-6); }
.seitenfuss a { color: var(--creme-200); text-decoration-color: var(--zink-500); padding-block: 0.28rem; }
.seitenfuss a:hover { color: var(--licht); }
.seitenfuss .marke { margin-left: auto; }

.wz-danke { padding-block: var(--raum-9) var(--raum-8); text-align: center; }
.wz-danke .leuchtkasten { max-width: 44rem; margin-inline: auto; text-align: left; }
.wz-danke h1 { font-size: var(--fs-gross); line-height: var(--lh-eng); text-transform: uppercase; letter-spacing: -0.018em; color: var(--schrift-auf-licht); }
.wz-danke .leuchtkasten p { color: var(--gruen-900); font-weight: 600; margin-top: var(--raum-4); }
.wz-danke .nachsatz { color: var(--creme-300); font-size: var(--fs-klein); max-width: 34rem; margin: var(--raum-5) auto 0; }

@media (max-width: 48rem) {
  .wz-raster, .wz-raster-3 { grid-template-columns: 1fr; }
  .wz-row-leistung, .wz-row-team { grid-template-columns: 1fr; }
  .wz-row-del { padding: 0.5rem; }
  .sumrow { grid-template-columns: 1fr; gap: 0.2rem; }
  .wz-fuss { flex-wrap: wrap; }
}

/* ============================ Bewegung ================================= */
/* Auftritt beim Scrollen: gestaffelt, aus einem bereits sichtbaren Zustand
   heraus gedacht — ohne JS bleibt alles sichtbar (Regel unten in .js-an). */
.js-an .auftritt {
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity var(--tempo-lang) var(--kurve),
    transform var(--tempo-lang) var(--kurve),
    filter var(--tempo-lang) var(--kurve);
  filter: blur(3px);
  transition-delay: calc(var(--verzug, 0) * 90ms);
}
.js-an .auftritt.da { opacity: 1; transform: none; filter: none; }

/* ========================== Schmalbild ================================= */
@media (max-width: 62rem) {
  .telefon, .rezension, .kontakt, .fuss-raster { grid-template-columns: 1fr; }
  .telefon-beweis { border-left: 0; border-top: 1px solid var(--gruen-600); }
  .rezension-links { border-right: 0; border-bottom: 1px solid var(--gruen-600); }
  .paar { grid-template-columns: 1fr; }
  .kopf-mit-bild { grid-template-columns: 1fr; gap: var(--raum-5); }
  .anschlagtafel { grid-template-columns: repeat(2, 1fr); }
  .stufen { grid-template-columns: 1fr; }
  .stufen-schiene { display: none; }
  .stufe:nth-child(1) .stufe-schild,
  .stufe:nth-child(2) .stufe-schild,
  .stufe:nth-child(3) .stufe-schild { min-height: 0; }
  .ablauf { grid-template-columns: 1fr; }
  .ablauf li { border-right: 0; border-bottom: 1px solid var(--gruen-600); }
  .ablauf li:last-child { border-bottom: 0; }
  .kontakt { gap: var(--raum-6); }
}

@media (max-width: 48rem) {
  :root { --fs-mega: clamp(2.9rem, 14.5vw, 5rem); }
  .abschnitt { padding-block: var(--raum-8); }
  .kopfleiste .breitnav { display: none; }
  .kopf-anruf { display: block; margin-left: auto; }
  .klappknopf { display: inline-flex; }
  .klappschild { display: block; }
  .feldreihe { grid-template-columns: 1fr; }
  /* Kürzerer Weg als am Desktop: am Handy scrollt es sich schneller weg.
     Verhältnis zum Desktop bleibt (150/180 -> 190/230). */
  .szene { height: 190vh; }
  .szene-uhr { padding-top: calc(3.5rem + var(--raum-2)); }
  /* Das Schaufenster bekommt hier das Format des Films statt eines Hochformats.
     Grund: Der Film ist 1920x1080 quer, der Kasten war bei 375 px 338x420 hoch.
     object-fit:cover zeigt dann nur 45 % der Bildbreite (Quelle 27 %..73 %) —
     die Kundin im Stuhl sitzt bei 15 %..34 % und war damit halb aus dem Bild.
     Das ist keine Frage der Auflösung: eine kleinere Datei zeigt denselben
     Ausschnitt, nur unschärfer. Mit 4:3 sind es 75 % der Breite (12,5 %..87,5 %),
     also Kundin, Schreibtisch und Sanduhr vollständig. Am oberen Rand dieser
     Abfrage ändert sich fast nichts (699x524 statt 699x528), erst zum Handy hin
     flacht der Kasten ab. Das Poster hat dasselbe Seitenverhältnis wie der Film
     und wird davon mitgenommen. */
  .laden { height: auto; aspect-ratio: 4 / 3; }
  /* Die Zettel sind hier kleiner, damit der Stapel in den flacheren Kasten
     passt: 225 px hoch gegen 253 px Kastenhöhe bei 375 px, 242 px bei 360 px. */
  .laden-protokoll { gap: 0.25rem; }
  .laden-protokoll li { font-size: 0.74rem; line-height: 1.36; }
  .laden-protokoll b { padding: 0.24rem 0.45rem; }
  .laden-protokoll li > span { padding: 0.24rem 0.5rem; }
  .anschlagtafel { grid-template-columns: 1fr; }
  .fuss-raster { gap: var(--raum-5); }
}

@media (min-width: 48.01rem) { .kopf-anruf { display: none; } }

@media (max-width: 26rem) {
  /* Beim 360er-Prüflauf aufgefallen: Wortmarke + "Anrufen" + "Menü" brauchen in
     voller Größe 374 px. Bei 375 px passte das auf den letzten Pixel, ab 360 px
     stand der Menüknopf über dem rechten Rand — und bei 320 px (WCAG 1.4.10
     Reflow) erst recht. Die Leiste wird darum unterhalb 26 rem enger gesetzt,
     ohne dass ein Element verschwindet: kleinere Wortmarke, knappere Abstände. */
  .kopfleiste-innen { gap: var(--raum-3); }
  .wortmarke { font-size: 1.15rem; }
  .kopf-anruf .knopf { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
  .klappknopf { margin-left: var(--raum-2); padding: 0.46rem 0.55rem; gap: 0.4rem; font-size: 0.95rem; }
  .reiter { flex-wrap: wrap; }
  .reiter button { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--gruen-500); }
  .reiter button:last-child { border-bottom: 0; }
  .kopf-taten .knopf { width: 100%; justify-content: center; }
}

/* ============================ Sprachwahl =============================== */
/* Der Kasten, der bei jedem Seitenaufruf nach der Sprache fragt. Es wird
   nichts gespeichert (Vorgabe des Inhabers, js/sprache.js).
   <dialog> statt selbstgebautem Overlay: Fokusfalle, Escape, Deckel und
   Top-Layer kommen vom Browser. Ein Nachbau davon wären sechzig Zeilen JS,
   die alle drei Dinge schlechter können.
   Kein Auftritt, keine Blende: der Kasten ist beim ersten Bild schon da,
   eine Einblendung wäre nur eine Verzögerung vor einer Frage. */
.sprachwahl {
  margin: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--schrift);
  width: min(100% - var(--rand) * 2, 30rem);
}
.sprachwahl::backdrop { background: rgb(6 18 14 / 0.9); }

.sprachwahl-blatt { padding: clamp(1.5rem, 4vw, 2.2rem); }

/* Kein <h*>: der Kasten ist kein Kapitel der Seite, sondern eine Frage davor.
   Seinen zugänglichen Namen holt sich das <dialog> per aria-labelledby. */
.sprachwahl-titel {
  font-family: var(--schild-schrift);
  font-weight: 900;
  font-size: var(--fs-sub);
  line-height: var(--lh-mit);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--schrift-stark);
  margin: var(--raum-3) 0 var(--raum-2);
}
.sprachwahl-blatt p { font-size: var(--fs-klein); }

.sprachwahl-taten {
  display: grid;
  gap: var(--raum-3);
  margin-block: var(--raum-5) var(--raum-4);
}
.sprachwahl-taten form { margin: 0; }
/* Beide Wege gleich breit: der Kasten ist eine Gabelung, keine Empfehlung.
   Deshalb hier ohne die 80-%-Deckelung, die .knopf-licht sonst mitbringt. */
.sprachwahl-taten .knopf {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  justify-content: center;
}
.sprachwahl-fuss { color: var(--schrift-leise); }

/* ======================= Reduzierte Bewegung =========================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js-an .auftritt { opacity: 1; transform: none; filter: none; }
  #nach-oben { transform: none; }
  .knopf:hover, .direkt a:hover, .schilderwand li:hover { transform: none; }

  /* Die Feierabend-Szene steht still und zeigt ihren Endzustand:
     Rollladen unten, Schild an, Protokoll vollständig lesbar. */
  .szene { height: auto; }
  /* Kein Raster mehr: ohne Bühne stapeln sich Uhr, Laden, Zettel und Schild
     einfach untereinander, statt sich die mittlere Reihe zu teilen. */
  /* padding-bottom hält in der bewegten Fassung die Ecke des Chat-Knopfs frei.
     Hier klebt nichts, das Schild scrollt wie jeder andere Absatz vorbei —
     reservierte Luft wäre nur ein Loch unter der Szene. */
  .szene-halt { position: static; display: block; height: auto; min-height: 0; padding-bottom: 0; }
  .szene-halt::before { opacity: 1; }
  .laden-rollladen { transform: none; }
  /* Statt des Videos steht hier das Standbild des geschlossenen Ladens. */
  .laden-fenster video { display: none; }
  .laden-fenster img { display: block; filter: saturate(0.4) brightness(0.4); }
  /* aspect-ratio muss hier weg: mit min-height rechnet das Verhältnis rückwärts
     und leitet die BREITE aus der Höhe ab (22rem × 4/3 = 469 px bei 375 px
     Fenster) — das schob die Seite quer. Ohne Video braucht es das Verhältnis
     ohnehin nicht, hier steht das Standbild des geschlossenen Ladens. */
  .laden { aspect-ratio: auto; height: auto; min-height: 22rem; }
  /* Ohne Bühne kein Überlagern: der Zettelstapel steht im Fluss unter dem Laden. */
  .laden-protokoll { opacity: 1; margin: var(--raum-5) auto 0; }
  .laden-protokoll li { opacity: 1; transform: none; }
  .szene-schild { background: var(--licht); }
  .szene-schild p { color: var(--schrift-auf-licht); }
  .szene-schild .marke { color: color-mix(in srgb, var(--gruen-950) 72%, transparent); }
  .uhr-scheibe .zeiger-h { transform: rotate(30deg); }
  .uhr-scheibe .zeiger-m { transform: rotate(180deg); }
  .szene-hinweis { display: none; }
  .kopf-bild img { filter: saturate(0.45) brightness(0.42); }
}

@media (prefers-contrast: more) {
  :root {
    --schrift: var(--creme-100);
    --schrift-leise: var(--creme-300);
    --linie: var(--zink-400);
    --kante: var(--zink-300);
  }
}

@media print {
  .kopfleiste, #nach-oben, .szene-hinweis, .bildband { display: none; }
  body { background: #fff; color: #000; }
}

/* ========================= 11 · Warenkorb ================================
   Plan docs/superpowers/plans/2026-08-31-ikcode-warenkorb.md, Abschnitt 2.
   Kein eigener Kombi-Container (Korrektur Inhaber 31.08., Plan Abschnitt 3
   Punkt 5): die vier Kombi-Pakete rechnen unsichtbar in warenkorb.js,
   sichtbar werden sie nur als Warenkorb-Position und als Hinweis an der
   bestehenden Produktkarte (.marginal). Handgeschrieben, kein CSS-Build
   (DESIGN.md § Ausliefern). Werte aus dem freigegebenen Entwurf
   _ikcode-brainstorm/warenkorb-mockup.html übernommen. ==================== */

.wz-rechner { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--raum-5); align-items: start; }
/* top: var(--raum-4) allein maß am Fensterrand, nicht an der sticky
   Kopfleiste — beim Scrollen rutschte die Karte teils unter die Kopfleiste
   (Befund Inhaber 2026-09-01). --kopf-hoehe schiebt sie darunter. */
.wz-warenkorb { position: sticky; top: calc(var(--kopf-hoehe) + var(--raum-4)); }

.wk { padding: 1.1rem 1.2rem; display: grid; gap: var(--raum-3); align-content: start; }
.wk-leer { color: var(--creme-300); font-size: var(--fs-klein); margin: 0; }
.wk-pos { border-top: 1px solid var(--linie); padding-top: var(--raum-3); }
.wk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.wk-name { font-family: var(--schild-schrift); font-weight: 800; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--schrift-stark); }
.wk-preis { font-family: var(--schild-schrift); font-weight: 900; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--schrift-stark); }
.wk-preis span { font-size: 0.75rem; font-weight: 700; color: var(--creme-300); }
.wk-enthalten { font-size: var(--fs-mini); color: var(--creme-300); margin: 0.15rem 0 0; }
/* Google-Freigabe-Hinweis in der Position (Plan Abschnitt 8, nachgezogen
   2026-09-01 — hinweiseFuer() gab es seit Abschnitt 1, aber keine Stelle rief
   sie auf). Bewusst NICHT --aerger, das ist keine Fehlermeldung: Zink mit
   Randstrich, wie im Plan vorgegeben. */
.wk-ehrlich { margin: 0.4rem 0 0; padding: 0.5rem 0.65rem; border: 1px solid var(--zink-500); border-radius: var(--radius-knopf); font-size: var(--fs-mini); color: var(--creme-200); }
.wk-weg { background: none; border: 0; color: var(--creme-300); font-family: var(--lauf-schrift); font-size: var(--fs-mini); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0.28rem 0; margin-top: 0.1rem; }
.wk-weg:hover { color: var(--schrift-stark); }
.wk-weg:focus-visible { outline: var(--fokus-breite) solid var(--fokus-ring); outline-offset: var(--fokus-abstand); }

/* Sparfläche: die einzige Amberfläche im Warenkorb (DESIGN.md, Plan Abschnitt
   7 — der Sparbetrag ist Amber, nicht Grün, sonst verschwände er im grünen
   Grund). */
.wk-spar { padding: 0.7rem 0.85rem; display: grid; gap: 0.05rem; position: relative; }
.wk-spar[hidden] { display: none; }
.wk-spar .titel { font-family: var(--schild-schrift); font-weight: 700; font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: 0.11em; }
.wk-spar .zahl { font-family: var(--schild-schrift); font-weight: 900; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.wk-spar .zahl span { font-size: 0.95rem; font-weight: 700; }
/* Kein opacity mehr (Audit-Befund 2026-09-01): auf der Amberflaeche druecken
   82% Deckkraft den Kontrast von 9,35:1 auf 6,80:1, unter die 8,6:1-Hausregel.
   Die Abstufung zur fetten .zahl steht schon durch Groesse/Gewicht da. */
.wk-spar .grund { font-size: var(--fs-mini); line-height: 1.4; margin: 0.25rem 0 0; }

/* Leuchte-Effekt: eine Reihe kleiner Lampen am oberen Rand, die einmal
   durchlaufen, wenn der Sparbetrag STEIGT (Plan Abschnitt 7, js/konfigurator.js
   animiereSpar). Quadrate statt Kreise, Zustand ist auch hier eine Form. Kein
   Glimmen, kein Weichzeichner — respektiert prefers-reduced-motion über die
   bestehende globale Regel weiter unten in dieser Datei. */
.lampen { position: absolute; top: 3px; left: 10px; right: 10px; display: flex; justify-content: space-between; pointer-events: none; }
.lampen i { width: 5px; height: 5px; background: var(--schrift-auf-licht); opacity: 0.22; }
.wk-spar.frisch .lampen i { animation: lauflicht 900ms var(--kurve) 1; }
@keyframes lauflicht { 0%, 100% { opacity: 0.22; } 45% { opacity: 0.85; } }

.wk-summe { border-top: 1px solid var(--linie); padding-top: var(--raum-3); display: grid; gap: 0.2rem; }
.wk-summe[hidden] { display: none; }
.wk-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.wk-zeile .k { font-family: var(--schild-schrift); font-weight: 700; text-transform: uppercase; letter-spacing: 0.11em; font-size: var(--fs-mini); color: var(--creme-300); }
.wk-gesamt { font-family: var(--schild-schrift); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--schrift-stark); font-variant-numeric: tabular-nums; border-radius: 3px; }
.wk-gesamt span { font-size: 0.85rem; font-weight: 700; color: var(--creme-300); }
/* Preis-Blitz (Befund Inhaber 2026-09-01: eine Aenderung der Gesamtsumme
   ging beim Ankreuzen unter). box-shadow statt padding, damit nichts
   reflowt; kein Weichzeichner, harte Kante wie ueberall sonst. Die
   Amberflaeche scheint hinter dem verschachtelten "/Mon."-span durch,
   der bekommt deshalb dieselbe kurze Umfaerbung, sonst stuende Creme auf
   Amber und waere schlecht lesbar. */
.wk-gesamt.frisch { animation: preisblitz var(--tempo-lang) var(--kurve) 1; }
.wk-gesamt.frisch span { animation: preisblitz-beischrift var(--tempo-lang) var(--kurve) 1; }
@keyframes preisblitz {
  0% { box-shadow: 0 0 0 0.3em var(--licht); background: var(--licht); color: var(--schrift-auf-licht); }
  100% { box-shadow: 0 0 0 0 var(--licht); background: transparent; color: var(--schrift-stark); }
}
@keyframes preisblitz-beischrift {
  0% { color: var(--schrift-auf-licht); }
  100% { color: var(--creme-300); }
}
.wk-einmal { font-size: var(--fs-mini); color: var(--creme-300); margin: 0; }
.wk-einmal[hidden] { display: none; }

/* Der Aufpreis am noch nicht gesetzten Haken, direkt an der bestehenden
   Produktkarte statt an einer eigenen Kombi-Karte (Entscheidung Inhaber
   31.08.). Block statt inline, sonst klebt der Hinweis hinter .was in
   derselben Zeile (DESIGN.md-Fallstrick, betrifft hier .marginal genauso wie
   .was). Wo wirklich etwas zu holen ist, wird daraus ein kleines Leuchtschild:
   Amberrand, ein Pixel breit, kein Schein (Amber ist Fläche, nie Glow). */
.marginal { display: block; font-family: var(--schild-schrift); font-weight: 700; font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: 0.08em; color: var(--creme-300); margin-top: 0.55rem; }
.marginal:empty { margin-top: 0; }
.marginal s { color: var(--creme-300); text-decoration-thickness: 1px; }
.marginal.leuchtet { color: var(--licht-hell); background: var(--gruen-850); border: 1px solid var(--licht-tief); border-radius: var(--radius-knopf); padding: 0.3rem 0.55rem; box-shadow: 0 2px 0 var(--gruen-950); }
.marginal.leuchtet s { color: var(--creme-300); }

/* "im Sichtbar-werden-Paket" usw.: dieselbe Plakette wie frueher "im
   Bündel", jetzt allgemein fuer jedes Produkt, das gerade ueber ein
   Buendel/Kombi-Paket abgerechnet wird (.wahlschild .sperrmarke ist bereits
   an anderer Stelle in dieser Datei definiert). */

/* Die Klappe je Warenkorb-Position (Plan Abschnitt 7): kein Akkordeon, kein
   <details>, kein rotierendes Chevron. Typografie wie .reiter button, Flaeche
   wie .schild, Zustand als Quadrat (leer/gefuellt) statt nur als Farbe. */
/* Solange unbeantwortet: lautes Leuchtschild, dieselbe Formel wie
   .marginal.leuchtet (Amberrand + harter Versatz-Schatten, kein Glow).
   .fertig faellt zurueck auf ein leises, kleines Schild — das Zurueckfallen
   IST die Bestaetigung "erledigt" (Befund Inhaber 2026-09-01: die Klappe
   ging als kleiner dezenter Knopf unter, Fragen wurden vergessen). Zustand
   ist Form, nicht nur Farbe: gefuellter vs. hohler Punkt in ::before. */
.wk-klappe {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; margin-top: 0.6rem;
  background: var(--gruen-850); border: 1px solid var(--licht-tief); border-radius: var(--radius-knopf);
  box-shadow: 0 2px 0 var(--gruen-950);
  padding: 0.65rem 0.75rem; cursor: pointer; text-align: left;
  font-family: var(--schild-schrift); font-weight: 700; font-size: var(--fs-klein);
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--licht-hell);
  transition: background-color var(--tempo-kurz) linear, border-color var(--tempo-kurz) linear;
}
.wk-klappe:hover { background: var(--gruen-700); border-color: var(--licht); }
.wk-klappe:focus-visible { outline: var(--fokus-breite) solid var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.wk-klappe::before { content: ""; width: 0.62em; height: 0.62em; flex: none; border: 2px solid var(--licht); background: var(--licht); }
.wk-klappe.fertig {
  color: var(--creme-300); background: transparent; border-color: var(--zink-600);
  box-shadow: none; font-size: var(--fs-mini); font-weight: 700; padding: 0.5rem 0.6rem;
}
.wk-klappe.fertig::before { border-color: var(--zink-400); background: transparent; }
.wk-blatt {
  display: grid; gap: var(--raum-4); background: var(--gruen-850); border: 1px solid var(--zink-600);
  border-top: 0; padding: 0.85rem 0.7rem; margin-top: -1px;
}
.wk-blatt[hidden] { display: none; }
.wk-frage { display: grid; gap: 0.45rem; }
.wk-frage > p { margin: 0; font-size: var(--fs-klein); color: var(--schrift-stark); }

/* Farbwelt als eine Zeile statt sechs Karten (Plan Abschnitt 3 Punkt 8):
   sechs schmale Streifen, der Name der Wahl steht darunter. Der Streifen
   allein traegt keine Bedeutung, darum aria-label je Knopf und die Wahl
   zusaetzlich als Form (gefuelltes Amberquadrat an der Ecke). */
.farbzeile { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.farbwahl {
  position: relative; display: block; padding: 3px; background: var(--gruen-800);
  border: 1px solid var(--zink-600); border-radius: var(--radius-knopf); cursor: pointer;
  transition: border-color var(--tempo-kurz) linear, transform var(--tempo-kurz) var(--kurve);
}
.farbwahl:hover { border-color: var(--zink-300); transform: translateY(-2px); }
.farbwahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.farbwahl:has(input:focus-visible) { outline: var(--fokus-breite) solid var(--fokus-ring); outline-offset: var(--fokus-abstand); }
.farbwahl:has(input:checked) { border-color: var(--licht); }
.farbwahl:has(input:checked)::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 8px; height: 8px;
  background: var(--licht); border: 1px solid var(--gruen-950);
}
.streifen { display: flex; gap: 1px; }
.streifen i { display: block; width: 11px; height: 22px; }
.farbname {
  margin: 0.45rem 0 0; font-family: var(--schild-schrift); font-weight: 700;
  font-size: var(--fs-mini); text-transform: uppercase; letter-spacing: 0.09em; color: var(--creme-300);
}
.farbname.gewaehlt { color: var(--schrift-stark); }
.eigene { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.15rem; }
.eigene[hidden] { display: none; }
.eigene input[type="color"] {
  inline-size: 34px; block-size: 26px; padding: 0; border: 1px solid var(--zink-600);
  background: var(--gruen-850); border-radius: 2px; cursor: pointer;
}

/* Preisleiste + Rollladen-Schublade: nur am Handy sichtbar (Plan Abschnitt
   11, Bauabschnitt 4). Am Rechner bleibt .wz-warenkorb unveraendert die
   sticky Spalte aus Abschnitt 2, hier passiert nichts — Basisregeln stehen
   ausserhalb der Media Query, damit sie unter dem Breakpoint niemanden
   ueberraschen. */
.wz-preisleiste { display: none; }
.wz-dunkel {
  display: none; position: fixed; inset: 0; background: rgb(6 18 14 / 0.62); z-index: 28;
  opacity: 0; visibility: hidden;
  transition: opacity var(--tempo-mit) linear, visibility 0s linear var(--tempo-mit);
}
.wz-dunkel.auf { opacity: 1; visibility: visible; transition-delay: 0s; }
.wk-lamellen { display: none; }
.wk-schliessen {
  display: none; background: none; border: 0; color: var(--creme-300);
  font-family: var(--schild-schrift); font-weight: 700; font-size: var(--fs-mini);
  text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;
}
.wk-schliessen:focus-visible { outline: var(--fokus-breite) solid var(--fokus-ring); outline-offset: var(--fokus-abstand); }

@media (max-width: 62rem) {
  .wz-rechner { grid-template-columns: 1fr; }

  /* .wz-warenkorb bleibt dasselbe Element wie am Rechner (keine zweite
     Kopie, Plan Abschnitt 6, Fallstrick "Warenkorb steht zweimal im
     Dokument") — hier wird es zur Schublade statt zur sticky Spalte: unten
     fixiert, standardmaessig ausgefahren unter dem sichtbaren Rand, faehrt
     beim Oeffnen hoch. visibility verzoegert nur beim Schliessen (wie bei
     .klappschild weiter oben in dieser Datei), sonst bliebe die
     zugeklappte Schublade per Tab erreichbar. */
  .wz-warenkorb {
    /* top:auto ist Pflicht: die Rechner-Regel oben setzt top:var(--raum-4),
       das gilt sonst weiter (position allein setzt top nicht zurueck) und
       die Schublade saesse oben am Fenster statt unten, teils unter der
       Kopfleiste. */
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30;
    max-height: 86%; display: flex; flex-direction: column;
    background: var(--gruen-850); border-top: 1px solid var(--kante-hell);
    transform: translateY(100%); visibility: hidden;
    transition: transform var(--tempo-mit) var(--kurve), visibility 0s linear var(--tempo-mit);
  }
  .wz-warenkorb.auf { transform: none; visibility: visible; transition-delay: 0s; }
  .wz-warenkorb #warenkorb { overflow-y: auto; }

  .wk-lamellen { display: block; height: 16px; flex: none; }
  .wk-schliessen { display: block; padding: 0.6rem var(--rand) 0.3rem; text-align: right; }
  .wz-dunkel { display: block; }

  /* Preisleiste haelt selbst die rechte Ecke frei (--chat-band aus
     tokens.css), statt den Chat-Knopf per [data-chat-frei] zurueckweichen zu
     lassen — der Mechanismus ist fuer vorbeiscrollende Flaechen gedacht,
     eine klebende Leiste zoege ihn sonst ueber den ganzen Scrollweg zurueck
     (Plan Abschnitt 6). */
  .wz-preisleiste {
    display: flex; justify-content: space-between; align-items: center; gap: 0.7rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--tafel); border-top: 1px solid var(--kante-hell);
    box-shadow: 0 -14px 28px -14px rgb(0 0 0 / 0.85);
    padding: 0.6rem 0.9rem;
    /* Reserviert die Ecke fuer #chat-start, das dort bleibt (kein
       [data-chat-frei] — das ist fuer vorbeiscrollende Flaechen und zoege
       den Knopf ueber den gesamten Schritt zurueck, Plan Abschnitt 6).
       --chat-band passt hier NICHT: das ist eine Hoehe (Knopf-Hoehe plus
       Abstand), der Chat-Knopf braucht an dieser Stelle aber Breite.
       Gemessen bei 375px Fensterbreite: Knopf 166px breit, dazu
       --chat-ecke Abstand zum Rand — 11rem plus --chat-ecke deckt das mit
       etwas Luft, auch bei breiteren Fenstern bis zum 62rem-Breakpoint. */
    padding-right: calc(var(--chat-ecke) + 11rem);
  }
  .wz-preisleiste .betrag {
    font-family: var(--schild-schrift); font-weight: 900; font-size: 1.35rem; line-height: 1;
    color: var(--schrift-stark); font-variant-numeric: tabular-nums; margin: 0;
  }
  .wz-preisleiste .betrag span { font-size: 0.7rem; font-weight: 700; color: var(--creme-300); }
  .wz-preisleiste .gespart {
    font-family: var(--schild-schrift); font-weight: 700; font-size: var(--fs-mini);
    text-transform: uppercase; letter-spacing: 0.08em; color: var(--licht-hell); margin: 0;
  }
  .wz-preisleiste .oeffner {
    display: flex; align-items: center; gap: 0.4rem; background: var(--licht);
    color: var(--schrift-auf-licht); border: 1px solid var(--licht-tief); border-radius: var(--radius-knopf);
    box-shadow: 0 2px 0 var(--licht-tief); padding: 0.5rem 0.8rem; cursor: pointer;
    font-family: var(--schild-schrift); font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em;
  }
  .wz-preisleiste .oeffner:focus-visible { outline: var(--fokus-breite) solid var(--fokus-ring); outline-offset: var(--fokus-abstand); }

  /* Kollisionsregel (Plan Abschnitt 6): wo unten schon eine fixierte Leiste
     steht, weicht "Nach oben" komplett, statt sich zu ueberlagern — wie bei
     Soylu (dort mobil die Termin-Leiste). Nur auf Seiten mit Preisleiste. */
  body:has(#wz-preisleiste) #nach-oben { display: none; }
}

/* --- Hero: die Nummer als Haupt-Aktion (Spec 2026-09-03) --------------- */
/* Der Anruf ist die stärkste Aktion der Seite, weil der Interessent nichts
   glauben muss. Deshalb steht die Nummer im Knopf statt nur im href. */
.knopf-ruf {
  align-items: center;
  gap: .7rem;
  padding-block: .7rem;
}
.knopf-ruf-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.knopf-ruf-nummer {
  font-size: 1.15em;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.knopf-ruf-zusatz {
  font-size: .72em;
  opacity: .78;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kopf-ruf-hinweis {
  /* .marke ist für dunklen Grund gebaut (--schrift-leise, ein blasses Creme).
     Dieser Hinweis sitzt aber auf der hellen Amberfläche des Leuchtkastens,
     dort wäre das kaum lesbar. Farbe deshalb wie die anderen Absätze im
     Leuchtkasten explizit auf dunkles Grün gesetzt (gleiche Wahl wie bei
     .kopf-unterzeile p und .rechtsseite .leuchtkasten p). */
  color: var(--gruen-900);
  margin-top: .85rem;
  max-width: 30rem;
}
@media (max-width: 30rem) {
  .knopf-ruf-nummer { font-size: 1.05em; }
}

/* --- Zielgruppen-Weiche (Spec 2026-09-03) ----------------------------- */
/* Zwei Karten nebeneinander, auf dem Handy untereinander. Sie sortieren den
   Besucher ein, bevor er auf Beispiele trifft, die zur anderen Branche gehören. */
.weiche-karten {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .weiche-karten { grid-template-columns: 1fr 1fr; }
}
/* .schild liefert selbst kein Innenpolster (das übernehmen sonst Wrapper wie
   .telefon-text oder .kachel) — ohne eigenes Padding säße der Karteninhalt
   bündig am Zinkrahmen. Gleicher Wert wie .kachel, das nächstähnliche Muster. */
.weiche-karte {
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.weiche-karte .weiche-satz {
  margin: .55rem 0 1rem;
  font-size: 1.05rem;
  line-height: 1.45;
}
.weiche-karte .bund a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* --- Rückruf-Beispiele für beide Zielgruppen (Spec 2026-09-03) -------- */
/* Nutzt die Reiter-Gestaltung der Rezensionen mit. Hier ohne Sterne, deshalb
   etwas schmaler. */
.tafel-rueckruf[hidden] { display: none; }
.tafel-rueckruf { margin-top: .9rem; }
/* .telefon-beweis ist (anders als .rezension-rechts) selbst ein Grid mit
   eigenem gap — der wirkt zusätzlich zu .reiter's margin-bottom und dem
   margin-top oben, macht den Abstand Reiter->Tafel sonst fast dreifach
   (46px statt 16px, gemessen). Hier beides kappen, Grid-gap traegt genug. */
.telefon-beweis .reiter { margin-bottom: 0; }
.telefon-beweis .tafel-rueckruf { margin-top: 0; }

/* --- Problem vor Lösung (Spec 2026-09-03) ----------------------------- */
/* Der Betrieb erkennt seine Lage im ersten Halbsatz wieder, bevor von
   Technik die Rede ist. Der fette Teil ist das Problem, der Rest das Ergebnis. */
.problem-zeile {
  margin: .35rem 0 .9rem;
  padding-left: .85rem;
  border-left: 2px solid var(--linie);
  line-height: 1.5;
}
.problem-zeile b { font-weight: 600; }

/* --- Technik für Neugierige (Spec 2026-09-03) ------------------------- */
/* Steht bewusst hinter allem, was verkauft. Belegt technische Tiefe für die,
   die danach suchen, und hält sie von denen fern, die damit nichts anfangen. */
.technik-klappe > summary {
  cursor: pointer;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .55rem 0;
}
.technik-klappe[open] > summary { margin-bottom: .6rem; }
.technik-liste { margin-top: .7rem; display: grid; gap: .45rem; }
.technik-liste b { font-weight: 600; }

/* --- Rechner (Spec 2026-09-03) ---------------------------------------- */
/* Die Zahl ist eine Schätzung und sieht auch so aus: gerundete Spanne,
   Hinweis direkt darunter statt im Kleingedruckten. */
.rechner-bank {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 48rem) {
  .rechner-bank { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.rechner-felder { display: grid; gap: 1rem; }
.rechner-feld { display: grid; gap: .35rem; }
.rechner-feld span { font-size: .9rem; }
/* Grund, Rahmen und Textfarbe kommen aus .feld (Zeile 1164). Hier steht nur,
   was ein Zahlenfeld anders braucht als ein Textfeld: es darf schmal sein. */
.rechner-feld input { max-width: 12rem; }
.rechner-summe {
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  margin: .3rem 0 .8rem;
  line-height: 1.1;
}
.rechner-hinweis { font-size: .88rem; line-height: 1.55; opacity: .85; }
.rechner-gegenwert { margin-top: .8rem; font-weight: 600; }

/* --- Referenzen (Spec 2026-09-03) ------------------------------------- */
/* Ausgelegt auf mehrere Kacheln, geht mit einer live. Sobald ein Kunde der
   Nennung zustimmt, kommt sein Fall als weiteres <li> dazu, mehr nicht. */
.ref-karten {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) {
  .ref-karten { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
}
.ref-karte { padding: clamp(1.4rem, 3vw, 2.2rem); }
.ref-karte h3 { margin: .4rem 0 .6rem; }
.ref-karte p + p { margin-top: .7rem; }

/* --- Häufige Fragen (Spec 2026-09-03) --------------------------------- */
/* <details> statt eigener Klapp-Logik: funktioniert ohne JavaScript, ist
   von Haus aus für Screenreader bedienbar und durchsuchbar. */
.fragen-liste { display: grid; gap: .2rem; }
.fragen-liste details {
  border-top: 1px solid var(--linie);
  padding: .1rem 0;
}
.fragen-liste details:last-child { border-bottom: 1px solid var(--linie); }
.fragen-liste summary {
  cursor: pointer;
  padding: .95rem 0;
  font-weight: 600;
  line-height: 1.4;
}
.fragen-liste details > p {
  padding: 0 0 1rem;
  max-width: 46rem;
  line-height: 1.6;
}

/* Die eine Zusage, die beim E-Mail-Agenten alles trägt: er schickt nichts los,
   was der Betrieb nicht gelesen hat. */
.zusage b { font-weight: 600; }

/* --- Überleitung zum Webseiten-Kapitel (Spec 2026-09-03) -------------- */
/* Rahmt die Webseite als Ergänzung zur Automatisierung, nicht als eigenes
   Hauptangebot. Steht über der Überschrift, damit sie zuerst gelesen wird. */
.ueberleitung {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: .6rem;
  max-width: 34rem;
}