@font-face {
  font-family: "Montserrat";
  src: url("/assets/schrift/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* ============================================================
   Novabeton — Scroll-Story
   Gerüst nach references/geruest.md, Muster nach references/snippets.md
   Gestaltungsregister: monochrom, weisser Grund, vollflächige Fotos.
   Bewusst nur eine Erscheinung (hell) — alle Farben explizit gesetzt.
   ============================================================ */

/* ------------------------------------------------------------------
   Markenpalette Novabeton — "04 · NATURAL EARTH"
   Die fünf Werte kommen aus dem Markenpaket, nicht aus einer Ableitung.
   Sie ersetzen die vorher improvisierte Sand-/Terrakotta-Palette.
   ------------------------------------------------------------------ */
:root {
  --tiefgruen:  #2E3A32;   /* Primärfarbe, trägt auch als Schriftfarbe */
  --salbei:     #7A8F7A;   /* Akzent */
  --betongrau:  #A7A7A7;
  --warmgrau:   #DAD7CE;
  --offwhite:   #F5F5F2;

  /* Rollen. Die Alphastufen sind aus dem Tiefgrün abgeleitet, nicht aus
     Schwarz — sonst kippen die Grautöne kalt und stehen quer zur Marke. */
  --tinte:      var(--tiefgruen);
  --tinte-70:   #2E3A32b3;
  --tinte-80:   #2E3A32cc;   /* Navigationslinks: 70 % ergab nur 4,54 zu 1 */
  /* Nebentext (Labels, Legenden, Hinweise). Vorher --tinte-45 = 2,41:1 auf
     Offwhite. Gerechnet (20.10.2026): ab 70 % sind es 4,5:1; 75 % = 5,2:1. */
  --tinte-leise: #2E3A32bf;
  /* Ränder von Eingabefeldern brauchen 3:1 (WCAG 1.4.11): ab 55 %. */
  --rand-feld:  #2E3A3299;
  --tinte-15:   #2E3A3226;   /* nur Trennlinien, keine Bedienelemente */
  --tinte-08:   #2E3A3214;
  --papier:     var(--offwhite);
  --papier-rein:#ffffff;
  --sand:       var(--salbei);   /* Akzentrolle, jetzt Salbeigrün */
  /* Salbei als SCHRIFT ist zu schwach: 3,18:1 auf Offwhite, 3,42:1 auf
     Tiefgrün. Gemischt aus den CI-Farben (20.10.2026 gerechnet): */
  --salbei-dunkel: #5F7161;   /* Salbei + 35 % Tiefgrün: 4,78:1 auf Offwhite */
  --salbei-hell:   #9BAB9B;   /* Salbei + 25 % Weiss:   4,92:1 auf Tiefgrün */
  --fehler:        #9c4a3c;   /* Fehlerrand, die CI hat keine Statusfarbe */
  --hell:       #ffffff;
  --hell-70:    #ffffffb3;
  /* Nebentext auf Tiefgrün. Vorher --hell-40 = 3,31:1; ab 53 % sind es 4,5:1. */
  --hell-leise: #ffffff99;
  --hell-18:    #ffffff2e;

  /* Hausschrift Montserrat aus dem Logo-Paket (SIL OFL 1.1), selbst
     gehostet, auf Latin reduziert: 56 KB für alle Strichstärken. */
  --schrift: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
             "Helvetica Neue", Arial, sans-serif;
  /* Seit 22.10.2026 (Feedback Novabeton: „modernere Schrift", die
     Schreibmaschinenschrift raus): Kleinzeilen in Montserrat statt Mono. */
  --mono: "Montserrat", ui-sans-serif, system-ui, sans-serif;

  --rand: clamp(1.25rem, 5vw, 5rem);
  --spalte: min(72rem, 100%);
  --weich: cubic-bezier(.4, 0, .2, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

/* Kein scroll-behavior: smooth — es verschluckt Sprünge und macht
   das Messen der Scroll-Position unzuverlässig (siehe Tor 4). */

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, source { max-width: 100%; }
img { display: block; height: auto; }

h1, h2, h3, .titel-gross, .titel-h2 {
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
/* .titel-gross: Folgezeilen des Wechseltexts im Hero, gleiche Optik wie h1,
   aber keine zweite h1 (seo-aeo-playbook §8). */
h1, .titel-gross { font-size: clamp(2.4rem, 1.4rem + 5.2vw, 5.5rem); }
h2, .titel-h2 { font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem); }

p { margin: 0; }

a { color: inherit; }

:where(a, button, [role="tab"]):focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
}

.sprungmarke {
  position: absolute; left: -100vw; top: .5rem; z-index: 100;
  background: var(--tinte); color: var(--hell);
  padding: .6rem 1rem; border-radius: 4px; text-decoration: none;
}
.sprungmarke:focus { left: .5rem; }

/* ---------- Augenmass: die kleine Kapitelzeile ---------- */
.augenmass {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
  margin-bottom: 1.5rem;
}
.augenmass--hell { color: var(--hell-leise); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-block;
  padding: .85rem 1.6rem;
  background: var(--tinte);
  color: var(--hell);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  border: 1px solid var(--tinte);
  transition: background 200ms var(--weich), color 200ms var(--weich);
}
.knopf:hover { background: transparent; color: var(--tinte); }
.knopf--leer { background: transparent; color: var(--hell); border-color: var(--hell-leise); }
.knopf--leer:hover { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.knopf--klein { padding: .5rem 1rem; font-size: .8rem; }

/* ---------- Kopf ---------- */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem var(--rand);
  /* Durchsichtig, aber nachgerechnet. Der Kopf liegt über dem Hero,
     und dessen dunkelste Stelle im Kopfstreifen ist praktisch schwarz
     (gemessen: 1 von 255). Bei 85 % Deckkraft hält die Schrift dort
     4,79 zu 1; bei 80 % fällt sie auf 4,37 und damit unter die
     geforderten 4,5.

     Die Weichzeichnung ist nicht nur Zierde: sie mittelt die dunkle
     Stelle mit ihrer Umgebung, der reale Fall wird dadurch besser als
     die pixelgenaue Rechnung. */
  background: color-mix(in srgb, var(--papier) 85%, transparent);
  backdrop-filter: blur(16px) saturate(1.08);
  border-bottom: 1px solid var(--tinte-08);
  transition: background 320ms var(--weich), color 320ms var(--weich),
              border-color 320ms var(--weich);
}

/* ------------------------------------------------------------------
   Der Kopf hat IMMER einen Grund. Vorher lag er über dem Hero frei,
   mit heller Schrift. Das war für das ursprüngliche dunkle Hallenfoto
   gebaut und fiel um, als der Hero zur hellen Studioaufnahme wurde:
   Kontrast 1,3 statt der geforderten 4,5 zu 1.

   Der Versuch, die Schriftfarbe aus dem Bild zu messen, hat den
   Kontrast zwar gedreht, aber die Einträge blieben über dem unruhigen
   Bildrand blass. Zwei Anläufe reichen — ein deckender Grund ist
   immer lesbar, unabhängig davon, welches Bild dahinter liegt.

   Der Preis ist ein heller Balken über dem vollflächigen Foto. Den
   nehme ich in Kauf; vertico.com macht es genauso.
   ------------------------------------------------------------------ */
.kopf__nav { display: flex; gap: 1.6rem; margin-right: auto; }
/* Nachgerechnet auf dem Offwhite-Grund: 70 % Deckkraft ergeben 4,54 zu 1
   und bestehen die geforderten 4,5 nur um vier Hundertstel. Bei 13,6 px
   Schriftgrösse ist das zu wenig Reserve — 80 % ergeben 6,06 zu 1. */
.kopf__nav a {
  font-size: .85rem; text-decoration: none; color: var(--tinte-80);
  transition: color 160ms;
}
.kopf__nav a:hover { color: var(--tinte); }
.kopf__aktionen { display: flex; align-items: center; gap: .8rem; }

.sprachwahl {
  font: 500 .78rem/1 var(--mono);
  letter-spacing: .08em;
  padding: .5rem .7rem;
  background: transparent;
  color: var(--tinte-70);
  border: 1px solid var(--tinte-15);
  cursor: pointer;
}
.sprachwahl:hover { color: var(--tinte); border-color: var(--tinte); }

/* Mobil bricht der Kopf um. Die Navigation selbst wird weiter unten
   behandelt (Abschnitt „Navigation"): sie ist dort ein aufklappbares
   Menü, kein waagrecht scrollbarer Streifen mehr. Der Streifen war
   benutzbar, aber bei acht Einträgen sah man immer nur drei.

   ACHTUNG: Hier stand vorher ein zweiter, widersprüchlicher Regelsatz
   für .kopf__nav (overflow-x, padding-bottom, gap). Er überlebte den
   Umbau und liess das Menü nur 7 Pixel hoch aufgehen. */
@media (max-width: 860px) {
  .kopf { flex-wrap: wrap; gap: .6rem 1rem; padding-bottom: .5rem; }
  .kopf__marke { margin-right: auto; }
}

/* ============================================================
   Gerüst — Sektion mit Strecke und angeheftetem Innenteil
   ============================================================ */
.sektion { height: var(--strecke, 300vh); position: relative; }
.sektion__buehne {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}

/* Ohne diese Regel bleibt bei reduzierter Bewegung eine hohe leere
   Scroll-Strecke stehen — schlechter als gar keine Animation. */
@media (prefers-reduced-motion: reduce) {
  .sektion { height: auto; }
  .sektion__buehne { position: static; height: auto; }
}

/* Mobil kürzere Strecken. Auf dem Telefon wird mit dem Daumen gescrollt;
   dieselbe Strecke in Viewport-Höhen fühlt sich dort doppelt so lang an.
   Ohne diese Kürzung sind es über siebzehn Bildschirmhöhen bis zum Fuss. */
/* Die Strecken stehen NUR hier. Vorher standen sie zusätzlich als
   style="--strecke: …" im HTML — das überstimmte die Handywerte unten,
   die Kürzung wirkte nie (gemessen 21.09.2026: Hero auf dem Telefon
   220vh statt 165vh). Hero 220 -> 300vh: Rückmeldung „ein bisschen
   weniger schnell". */
.sektion--hero   { --strecke: 300vh; }
.sektion--farbe  { --strecke: 340vh; }
.sektion--doppel { --strecke: 300vh; }

@media (max-width: 860px) {
  .sektion--hero      { --strecke: 225vh; }
  .sektion--farbe     { --strecke: 240vh; }
  .sektion--doppel    { --strecke: 230vh; }
}

/* ---------- Muster 4 · Text-Crossfade auf festem Anker ---------- */
.wechseltext { display: grid; }
.wechseltext > * {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 260ms linear;
}
.wechseltext > [data-aktiv] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wechseltext { display: block; }
  .wechseltext > * { opacity: 1; transition: none; margin-bottom: .6em; }
  .wechseltext > *:last-child { margin-bottom: 0; }
}

/* ---------- Deckungsgleicher Stapel ---------- */
.stapel { display: grid; }
.stapel > * {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 380ms var(--weich);
}
.stapel > [data-aktiv] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .stapel > * { transition: none; }
  /* Farbe: der Stapel wechselt nur beim Scrollen. Ohne Bewegung zeigte er
     nur das erste von drei Bildern — jetzt alle untereinander. */
  .farbe__bild .stapel { gap: 1rem; }
  .farbe__bild .stapel > * { grid-area: auto; opacity: 1; }
}

/* ============================================================
   1 · Hero
   ============================================================ */
/* Die Sektion selbst trägt den dunklen Grund, nicht nur die Bühne. Am
   Ende der Strecke löst sich die Bühne vom Kleben und fährt nach oben —
   ohne den Grund auf der Sektion läge der helle Papierton hinter dem
   frei liegenden Kopf, und dessen weisse Schrift wäre unlesbar. */
.sektion--hero { background: var(--tiefgruen); }
.sektion--hero .sektion__buehne { background: var(--tiefgruen); }


.hero__bild { position: absolute; inset: 0; }
.hero__bild img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}

/* Der Clip liegt über dem Poster und wird erst sichtbar, wenn er
   wirklich ein Bild gezeichnet hat — story.js setzt dafür .hat-clip.
   Auf iOS bleibt ein stummes, nie abgespieltes Video nach einem Sprung
   schwarz; das Poster darf deshalb nicht schon bei loadedmetadata weg. */
.hero__clip { position: absolute; inset: 0; opacity: 0; transition: opacity 300ms linear; }
.sektion--hero.hat-clip .hero__clip { opacity: 1; }
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
  display: block;
}
/* Hochformat: Das Querformat-Video wird stark beschnitten. Die Säule
   steht im Clip bei 60 % der Breite; mittig beschnitten landete sie auf
   dem Telefon bei 88 % und ragte halb aus dem Bild. 63 % bringt sie in
   die Mitte (gerechnet für 375 × 812). Poster gleich, damit beim
   Wechsel Poster -> Clip nichts springt.
   Seit v8 (Logo auf dem Unterarm, 23.10.2026): 74 %. Bei 63 % lag der
   Unterarm mit dem Logo ausserhalb des Ausschnitts. Verglichen bei
   390 × 844 an drei Stellen des Clips: 74 % zeigt NOVA BETON ganz und die
   Säule vollständig; 78 % schneidet die Säule links an. */
@media (max-aspect-ratio: 1/1) {
  .hero__video,
  .hero__bild img { object-position: 63% 45%; }   /* Unterseiten: unverändert */
  .sektion--hero:not(.hero--unterseite) .hero__video,
  .sektion--hero:not(.hero--unterseite) .hero__bild img { object-position: 74% 45%; }
}

/* Weisse Schrift über hellem Grund ist unlesbar. Ein Textschatten
   trägt dort nicht — nötig ist ein Scrim-Verlauf hinter dem Text.
   Nur von unten, wie ursprünglich (der Verlauf von links wurde auf
   Rückmeldung zurückgenommen). Seit Version 2 des Clips ist die linke
   Hälfte heller Hintergrund; mit den alten Stufen (a6 bei 38 %, 33 bei
   68 %) hielt die Kleinzeile nur 2,4:1, die Überschrift 2,9:1. Die
   Textoberkante liegt bei 1400 × 900 auf 52 % von unten; deshalb reicht
   die kräftige Zone jetzt bis dorthin und fällt darüber schnell ab. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, #2E3A32f2 0%, #2E3A32d6 32%,
      #2E3A32a8 max(58%, 490px), #2E3A322a calc(max(58%, 490px) + 22vh), #2E3A3247 100%);
}
/* max(…, 490px): In niedrigen Fenstern reicht der Textblock prozentual
   höher (1000 × 700: Kleinzeile nur 3,7:1 mit festen 58 %). Die kräftige
   Zone folgt deshalb dem Text in Pixeln statt nur der Fensterhöhe. */
@media (max-aspect-ratio: 1/1) {
  /* Hochformat: Text liegt über der ganzen Breite, also kräftiger von
     unten (vorher nur 3,0:1 bei der Kleinzeile). */
  .hero__scrim {
    background: linear-gradient(to top, #2E3A32f7 0%, #2E3A32e6 50%, #2E3A32c2 76%, #2E3A3266 100%);
  }
}

.hero__inhalt {
  position: absolute; inset: auto 0 0 0;
  padding: 0 var(--rand) clamp(3rem, 9vh, 7rem);
  color: var(--hell);
  max-width: 58rem;
}
/* Auf dem unruhigen Hallenfoto trägt hell-40 nicht — die Zeile war
   praktisch unlesbar. */
/* Volles Weiss statt hell-70: über dem weissen Roboterarm im neuen
   Clip hielt die 70-%-Fassung nur 3,8:1 bei kleiner Schrift. */
.hero__inhalt .augenmass { color: var(--hell); }
.hero__unter {
  margin-top: 1.6rem;
  max-width: 42rem;
  color: var(--hell-70);
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
}
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.2rem; }
.hero__knoepfe .knopf { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.hero__knoepfe .knopf:hover { background: transparent; color: var(--hell); }
.hero__knoepfe .knopf--leer { background: transparent; color: var(--hell); border-color: var(--hell-leise); }
.hero__knoepfe .knopf--leer:hover { background: var(--hell); color: var(--tinte); }

/* ---------- Muster 11 · Filmvokabular ---------- */
.film {
  position: absolute; inset: auto auto 100% 0;
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 0 var(--rand);
  transform: translateY(-1.1rem);
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hell-leise);
}
/* tabular-nums ist zwingend: ohne es zappelt der Timecode in der Breite
   und zieht bei jeder Hundertstel das Layout mit. */
.film__code { font-variant-numeric: tabular-nums; letter-spacing: .1em; }

.film__balken {
  position: absolute; inset: auto 0 0 0; height: 2px; z-index: 3;
  background: color-mix(in srgb, var(--hell) 16%, transparent);
}
.film__balken > i {
  display: block; height: 100%; width: 0%;
  background: var(--sand);
  transition: width 90ms linear;   /* nur Glättung, nicht die Animation */
}

/* ---------- Liniengrafik über dem Hero ---------- */
.riss {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  --z: 0;                          /* Zeichenfortschritt, aus story.js */
}
.riss line {
  stroke: var(--hell-leise);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  /* Wirkt nur zusammen mit pathLength="100" im Markup — dort steht die
     Begründung. Die Einheit px ist nötig, weil calc() ohne Einheit für
     stroke-dashoffset ungültig ist. */
  stroke-dasharray: 100px;
  stroke-dashoffset: calc(100px - var(--z) * 100px);
}
/* Die Markierungen kommen zuletzt, wenn die Masslinie schon steht.
   Der Selektor braucht `line` mit: `.riss line` hat mit Klasse plus Typ
   die höhere Spezifität und würde eine reine Klassenregel überstimmen —
   im Browser gemessen, die Markierungen liefen sonst synchron mit.
   Sie starten erst bei --z = 0,6 und sind bei 1,0 fertig: der Faktor 250
   ist 100 geteilt durch die verbleibenden 0,4. */
.riss line.riss__tick {
  stroke-dashoffset: calc(100px - (max(var(--z, 0), 0.6) - 0.6) * 250px);
}
.riss__tick { stroke: var(--hell-70); }
.riss__mass {
  position: absolute; right: var(--rand); top: 46%;
  font: 500 .66rem/1 var(--mono);
  letter-spacing: .14em;
  color: var(--hell-70);
  opacity: var(--z, 0);
}
@media (max-width: 860px) {
  .riss, .riss__mass { display: none; }   /* zu wenig Platz, wirkt gedrängt */
}

@media (prefers-reduced-motion: reduce) {
  .film, .film__balken { display: none; }   /* reine Bewegungsanzeigen */
  .riss line { stroke-dashoffset: 0; }
  .riss__mass { opacity: 1; }
}

.hero__marke {
  position: absolute; right: var(--rand); bottom: clamp(3rem, 9vh, 7rem);
  display: grid; gap: .7rem; justify-items: center;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--hell-leise);
}
.hero__marke i { width: 1px; height: 3rem; background: var(--hell-18); }
@media (max-width: 800px) { .hero__marke { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sektion--hero .sektion__buehne { min-height: 90svh; position: relative; }
  .hero__inhalt { position: relative; padding-top: 60svh; }
}

/* ============================================================
   2 · Farb-Aggregat — Muster 3 (gekoppelter Verlauf)
   ============================================================ */
.sektion--farbe .sektion__buehne { background: #232823; }

.farbe__grund {
  position: absolute; inset: 0;
  /* --bg wird aus story.js in oklch interpoliert */
  /* Der Abfall lief auf #131313, ein neutrales Fast-Schwarz. In der
     Marke ist die dunkle Fläche Tiefgrün — sonst sitzt ein kalter
     Rand um den Verlauf. */
  background: radial-gradient(130% 110% at 22% 12%, var(--bg, #283028), #1F2421 78%);
}

.farbe__raster {
  position: relative; height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 6rem var(--rand) 3rem;
  color: var(--hell);
}
.farbe__text { max-width: 34rem; }
.farbe__lauf {
  margin-top: 1.6rem;
  color: var(--hell-70);
  max-width: 34rem;
}
.wechseltext--farbe { min-height: 3.4em; }

.farbe__bild .stapel > * { border-radius: 2px; overflow: hidden; }
.farbe__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.kennwerte {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin: 2.6rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hell-18);
}
.kennwerte div { display: grid; gap: .35rem; }
.kennwerte dt {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hell-leise);
}
.kennwerte dd { margin: 0; font-size: 1.05rem; font-weight: 500; }

@media (max-width: 900px) {
  .farbe__raster { grid-template-columns: 1fr; align-content: center; gap: 2rem; }
  .farbe__bild { order: -1; }
  .farbe__bild img { aspect-ratio: 16 / 10; }
  .kennwerte { gap: 1.4rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sektion--farbe .sektion__buehne { min-height: auto; }
  .farbe__raster { padding-block: 5rem; }
}

/* ============================================================
   Block — die ruhigen, nicht gescrollten Sektionen
   ============================================================ */
.block {
  padding: clamp(5rem, 13vh, 10rem) var(--rand);
  background: var(--papier);
}
.block--dunkel { background: var(--tinte); color: var(--hell); }
.block--dunkel .block__lauf { color: var(--hell-70); }

.block__kopf { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.block__lauf { margin-top: 1.4rem; color: var(--tinte-70); }

/* ---------- 4 · Muster 5 · Produkt-Switcher ---------- */
.switcher {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Die Spalte ist der Bezugsrahmen für das wandernde Thumbnail. */
.switcher__spalte { position: relative; }
.switcher__liste { list-style: none; margin: 0; padding: 0; }

.switcher__cta { margin-top: 1.6rem; }


.switcher__liste button {
  display: block; width: 100%; text-align: left;
  padding: .95rem 0;
  background: none; border: 0;
  border-bottom: 1px solid var(--tinte-15);
  font: inherit; font-size: 1.05rem;
  color: var(--tinte-leise);
  cursor: pointer;
  transition: color 200ms, padding-left 240ms var(--weich);
}
.switcher__liste button:hover { color: var(--tinte-70); }
.switcher__liste button[aria-selected="true"] {
  color: var(--tinte);
  font-weight: 600;
  padding-left: .9rem;
  border-bottom-color: var(--tinte);
}
.switcher__liste button[aria-selected="true"]::before {
  content: ""; position: absolute; margin-left: -.9rem; margin-top: .55em;
  width: .4rem; height: .4rem; background: var(--sand); border-radius: 50%;
}

.switcher__buehne { display: grid; gap: 1.8rem; }
.stapel--bild img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.stapel--liste { align-items: start; }
.stapel--liste ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 2.5rem;
}
.stapel--liste li {
  padding: .5rem 0 .5rem 1.1rem;
  position: relative;
  color: var(--tinte-70);
  break-inside: avoid;
}
.stapel--liste li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: .45rem; height: 1px; background: var(--tinte-leise);
}
/* Der Stapel legt alle Panels übereinander; hidden würde sie aus dem
   Raster nehmen und die Höhe kollabieren lassen. Deshalb steuert die
   Opazität die Sichtbarkeit und inert die Bedienbarkeit. */
.stapel--liste ul[hidden] { display: block; }

@media (max-width: 860px) {
  .switcher { grid-template-columns: 1fr; }
  .stapel--liste ul { columns: 1; }
}

/* ---------- Muster 8 · Gestaffelte Liste ---------- */
/* Ausblenden nur, wenn das Skript läuft (Klasse js, gesetzt im <head>).
   Vorher galt opacity: 0 ohne Bedingung — ohne JavaScript fehlten
   Beweispunkte, Kennliste, Ablauf und die ganze Referenzgalerie. */
.js .staffel > li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 460ms var(--weich), transform 460ms var(--weich);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js .staffel[data-sichtbar] > li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .staffel > li { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
}

.kennliste {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--hell-18);
}
.kennliste > li {
  display: grid; gap: .5rem; align-content: start;
  padding: 1.8rem 1.5rem 1.8rem 0;
  border-bottom: 1px solid var(--hell-18);
}

.kennliste__wert {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.kennliste__name { color: var(--hell-leise); font-size: .9rem; line-height: 1.45; }
.kennliste__stand { margin-top: 1.5rem; color: var(--hell-leise); font-size: .8rem; }

.anlage__bild { margin: clamp(3rem, 8vh, 5rem) 0 0; }
.anlage__bild img { width: 100%; background: var(--hell); }
.anlage__bild figcaption {
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--hell-leise);
}
/* Foto der Anlage: Querformat, auf dem Telefon etwas höher beschnitten,
   damit Roboter und Säule nicht zu Streichhölzern werden. */
.anlage__foto img { aspect-ratio: 3 / 2; object-fit: cover; object-position: 40% 50%; }
@media (max-width: 700px) { .anlage__foto img { aspect-ratio: 4 / 3; } }

/* ---------- 6 · Muster 9 · Synchronisierte Doppelspalte ---------- */
.sektion--doppel .sektion__buehne { background: var(--papier); }

.doppel {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 6rem var(--rand) 4rem;
}
.doppel__worte { --zeile: 5.2rem; }
.doppel__fenster { overflow: hidden; height: var(--zeile); }
.doppel__fenster--text { --zeile: 7.5rem; margin-top: 1.4rem; }

.streifen {
  list-style: none; margin: 0; padding: 0;
  transform: translateY(calc(var(--i, 0) * -1 * var(--zeile)));
  transition: transform 460ms var(--weich);
}
.streifen > li {
  height: var(--zeile);
  display: grid; align-content: center;
  opacity: .22;
  transition: opacity 320ms;
}
.streifen > li[data-aktiv] { opacity: 1; }

.doppel__band > li {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.025em;
}
.doppel__texte > li {
  font-size: 1rem;
  color: var(--tinte-70);
  max-width: 30rem;
  align-content: start;
}

/* Die Bildspalte schiebt ebenfalls — kein Crossfade. Das koppelt die
   beiden Spalten sichtbar aneinander. */
.doppel__bilder { --bildhoehe: min(74svh, 34rem); overflow: hidden; height: var(--bildhoehe); }
.doppel__filmstreifen {
  transform: translateY(calc(var(--i, 0) * -1 * var(--bildhoehe)));
  transition: transform 460ms var(--weich);
}
.doppel__filmstreifen img {
  height: var(--bildhoehe);
  width: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .doppel { grid-template-columns: 1fr; align-content: center; gap: 1.6rem; padding-top: 5.5rem; }
  .doppel__worte { --zeile: 3.6rem; }
  .doppel__fenster--text { --zeile: 6.5rem; }
  .doppel__bilder { --bildhoehe: 38svh; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .doppel { grid-template-columns: 1fr; padding-block: 5rem; }
  .doppel__fenster, .doppel__bilder { height: auto; overflow: visible; }
  .streifen, .doppel__filmstreifen { transform: none; transition: none; }
  .streifen > li { height: auto; opacity: 1; padding-block: .4rem; }
  .doppel__filmstreifen img { height: auto; aspect-ratio: 4 / 3; }
  .doppel__filmstreifen { display: grid; gap: 1rem; margin-top: 2rem; }
}

/* ---------- 7 · Galerie ---------- */
.galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.galerie > li { display: grid; gap: .8rem; }
.galerie--gross { grid-column: span 2; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galerie--gross img { aspect-ratio: 16 / 10; }
.galerie span {
  font: 500 .74rem/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-leise);
}
@media (max-width: 700px) { .galerie--gross { grid-column: auto; } }

/* ---------- 8 · Kontakt ---------- */
.block--kontakt { border-top: 1px solid var(--tinte-15); }
.kontakt { max-width: 46rem; }
.kontakt .block__lauf { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); }
.kontakt__hinweis {
  margin-top: 2rem;
  padding: .8rem 1rem;
  border-left: 2px solid var(--sand);
  font-size: .85rem;
  color: var(--tinte-leise);
  background: var(--tinte-08);
}

/* ---------- Fuss ---------- */
.fuss {
  padding: 2.5rem var(--rand) 3rem;
  background: var(--tinte); color: var(--hell-70);
  font-size: .85rem;
}
.fuss__zeile {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 1rem 2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hell-18);
}
.fuss__marke { font-weight: 700; color: var(--hell); letter-spacing: -.03em; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-left: auto; }
.fuss nav a { text-decoration: none; transition: color 160ms; }
.fuss nav a:hover { color: var(--hell); }
.fuss__klein { margin-top: 1.4rem; color: var(--hell-leise); font-size: .78rem; }

/* ---------------------------------------------------------------
   Logo Novabeton (Fassung 6.5.10, Schrift A, festgelegt 21.10.2026)
   ---------------------------------------------------------------
   Bildmarke: Säule mit Taille (assets/logo-novabeton.svg).
   Schriftzug: NOVA BETON in Montserrat, als Pfade eingebettet — keine
   Schriftdatei, keine Anfrage. Die beiden Pfade färben sich über
   `currentColor` der Klassen -a/-b: NOVA Tiefgrün, BETON Salbeigrün.
   Quelle und Neuerzeugung: world/logo_bauen.py.

   Grösse in em: .kopf__marke setzt die Schriftgrösse, der Schriftzug
   ist .74em hoch (= Versalhöhe plus Überhang des O), die Säule 1.7em.
   Damit bleiben die bisherigen Masse der Kopfzeile erhalten.        */
.kopf__marke {
  display: flex; align-items: center;
  font-size: 1.05rem;
  text-decoration: none;
}
.kopf__wort { display: block; height: .74em; width: auto; }
.kopf__marke-a { color: var(--tiefgruen); }
.kopf__marke-b { color: var(--salbei); }


/* Fuss: Säule (Negativfassung) links über zwei Zeilen, rechts der
   Schriftzug, darunter der Zusatz. */
.fuss__marke {
  display: grid; grid-template-columns: auto auto;
  justify-content: start; align-items: center;
  column-gap: .8rem; row-gap: .55rem;
}
.fuss__zeichen { grid-row: 1 / span 2; height: 2.6rem; width: auto; }
.fuss__wort { display: block; height: .82rem; width: auto; }
.fuss__marke-a { color: var(--hell); }
.fuss__marke-b { color: var(--salbei-hell); }
.fuss__claim {
  grid-column: 2;
  font: 400 .68rem/1 var(--mono);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--hell-leise);
}


/* ---------------------------------------------------------------
   Machbarkeits-Check
   --------------------------------------------------------------- */
.check { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.check__felder {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem 1.5rem;
}
/* min-width: 0 auf BEIDEN Rasterebenen. Ein input bringt von sich aus
   rund 20 Zeichen Mindestbreite mit; ohne die Freigabe wächst die
   Feldzeile über ihre Spalte hinaus und das „m" landet auf der Zahl
   des Nachbarfeldes. Gemessen: Spalte 229 px, Zeile 295 px. */
.check__feld { display: grid; gap: .5rem; margin: 0; min-width: 0; }
.check__feld > span { min-width: 0; }
.check__feld label {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--hell-leise);
}
.check__feld > span { display: flex; align-items: baseline; gap: .5rem;
  border-bottom: 1px solid var(--hell-leise); }
.check__feld input {
  flex: 1 1 0; min-width: 0; width: 100%;
  background: transparent; border: 0; padding: .5rem 0;
  color: var(--hell);
  font: 600 1.6rem/1.2 var(--schrift);
  font-variant-numeric: tabular-nums;
}
.check__feld input:focus { outline: none; }
.check__feld > span:focus-within {
  border-bottom-color: var(--salbei-hell);
  /* Vorher nur die 1-px-Linie umgefärbt — zu schwacher Fokus. */
  outline: 2px solid var(--salbei-hell); outline-offset: 4px; border-radius: 2px;
}
.check__feld input::placeholder { color: var(--hell-leise); }
.check__feld i { font-style: normal; color: var(--hell-leise); font-size: .9rem; }

.check__ergebnis {
  display: block; margin-top: 1.6rem; min-height: 1.6em;
  font-size: 1.05rem; color: var(--hell-70);
}
.check__ergebnis[data-zustand="passt"]  { color: var(--salbei-hell); font-weight: 600; }
.check__ergebnis[data-zustand="knapp"]  { color: var(--warmgrau); font-weight: 600; }
.check__ergebnis[data-zustand="zu-gross"] { color: var(--hell); font-weight: 600; }

.kennliste--check { margin-bottom: 2rem; }
.check__fussnote { max-width: 44rem; color: var(--hell-leise); font-size: .9rem; }

/* ---------------------------------------------------------------
   Ablauf
   --------------------------------------------------------------- */
.ablauf {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.ablauf > li { display: grid; gap: .7rem; align-content: start; }
.ablauf__nr {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .16em;
  color: var(--salbei-dunkel);
}
.ablauf h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.ablauf p { color: var(--tinte-70); font-size: .95rem; }

/* Bildstreifen unter dem Ablauf: ein grosses, zwei kleine Bilder */
.bildstreifen {
  list-style: none; margin: clamp(3rem, 8vh, 5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
}
.bildstreifen > li { display: grid; gap: .8rem; align-content: start; min-width: 0; }
.bildstreifen img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--hell); }
.bildstreifen--gross img { aspect-ratio: 8 / 5; }
.bildstreifen span {
  font: 500 .74rem/1.4 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-leise);
}
@media (max-width: 900px) {
  .bildstreifen { grid-template-columns: 1fr 1fr; }
  .bildstreifen--gross { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------
   Anfrageformular
   --------------------------------------------------------------- */
.anfrage { margin-top: 2.5rem; max-width: 40rem; }
/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein Feld wie jedes
   andere. Nicht display:none — manche Bots ueberspringen das. */
.anfrage__falle { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.anfrage__raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.2rem 1.5rem;
}
.anfrage__feld { display: grid; gap: .45rem; margin: 0; }
.anfrage__feld--breit { grid-column: 1 / -1; }
.anfrage__feld label {
  font: 500 .75rem/1.3 var(--mono);   /* vorher .68rem = 10,9 px, Minimum 12 px */
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte-leise);
}
.anfrage__feld input, .anfrage__feld textarea {
  font: inherit; font-size: 1rem;
  color: var(--tinte);
  background: var(--papier-rein);
  border: 1px solid var(--rand-feld);
  padding: .7rem .8rem;
  border-radius: 2px;
  resize: vertical;
}
.anfrage__feld input:focus-visible, .anfrage__feld textarea:focus-visible {
  outline: 2px solid var(--salbei); outline-offset: 1px; border-color: var(--salbei);
}
.anfrage__feld :is(input, textarea):user-invalid { border-color: var(--fehler); }
.anfrage__aktion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-top: 1.6rem;
}
.anfrage__klein { font-size: .82rem; color: var(--tinte-leise); max-width: 22rem; }

/* ---------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------
   Zwei Ergänzungen: eine Markierung der Sektion, in der man gerade
   steht, und mobil ein echtes Menü statt des scrollbaren Streifens.
   Der Streifen war benutzbar, aber bei acht Einträgen sieht man immer
   nur drei und weiss nicht, dass es weitergeht.               */

/* Sektionsmarkierung. aria-current setzt story.js; die Linie darunter
   wächst aus der Mitte, damit sie nicht springt. */
.kopf__nav a { position: relative; }
.kopf__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.35rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: center;
  transition: transform 260ms var(--weich);
}
.kopf__nav a[aria-current="true"] { color: var(--tinte); }
.kopf__nav a[aria-current="true"]::after { transform: scaleX(1); }

/* ---------- Menüknopf, nur mobil ---------- */
.menuknopf { display: none; }

@media (max-width: 860px) {
  .menuknopf {
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem;
    margin-left: .4rem;
    background: transparent;
    border: 1px solid var(--tinte-15);
    border-radius: 2px;
    cursor: pointer;
    order: 2;
  }
  /* Drei Striche aus einem Element: der mittlere ist der Balken selbst,
     die äusseren sind seine Pseudoelemente. Diese Grundregel hatte ich
     beim Aufräumen der alten Kopf-Zustände mit einem zu gierigen
     Ausdruck versehentlich mitgelöscht — übrig blieb ein leerer
     Rahmen ohne Striche. */
  .menuknopf__balken,
  .menuknopf__balken::before,
  .menuknopf__balken::after {
    content: ""; display: block;
    width: 1.05rem; height: 1.5px;
    background: var(--tinte);
    transition: transform 240ms var(--weich), opacity 160ms linear;
  }
  /* Die beiden äusseren brauchen einen positionierten Bezug, sonst
     rutschen sie auf den nächsten positionierten Vorfahren. */
  .menuknopf { position: relative; }
  .menuknopf__balken::before { position: absolute; transform: translateY(-.36rem); }
  .menuknopf__balken::after  { position: absolute; transform: translateY(.36rem); }

  .kopf[data-menue="offen"] .menuknopf__balken { background: transparent; }
  .kopf[data-menue="offen"] .menuknopf__balken::before { transform: rotate(45deg); }
  .kopf[data-menue="offen"] .menuknopf__balken::after  { transform: rotate(-45deg); }

  /* Die Navigation wird zum aufklappbaren Feld. Sie bleibt im Markup
     stehen und wird nicht display:none — sonst verliert der Screenreader
     sie ganz. Stattdessen Höhe null plus inert aus story.js. */
  .kopf__nav {
    order: 4; width: 100%; margin-right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms var(--weich);
  }
  .kopf[data-menue="offen"] .kopf__nav { max-height: 70svh; overflow-y: auto; }
  .kopf__nav a {
    padding: .85rem .2rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--tinte-08);
    white-space: nowrap;
  }
  .kopf__nav a::after { display: none; }   /* die Linie trägt hier nicht */
  .kopf__nav a[aria-current="true"] { font-weight: 600; }
  .kopf__nav a[aria-current="true"]::before {
    content: ""; display: inline-block;
    width: .35rem; height: .35rem; margin-right: .5rem;
    vertical-align: middle;
    background: var(--salbei); border-radius: 50%;
  }
  /* Offenes Menü über hellem Grund, auch wenn der Kopf über dem Hero
     sonst frei liegt — sonst steht die Liste auf dem Foto. */
  .kopf[data-menue="offen"] {
    background: color-mix(in srgb, var(--papier) 96%, transparent);
    backdrop-filter: blur(14px);
    color: var(--tinte);
  }
  .kopf[data-menue="offen"] .kopf__nav a { color: var(--tinte-70); }
  .kopf[data-menue="offen"] .kopf__marke-a { color: var(--tiefgruen); }
  .kopf[data-menue="offen"] .menuknopf__balken::before,
  .kopf[data-menue="offen"] .menuknopf__balken::after { background: var(--tinte); }

  @media (prefers-reduced-motion: reduce) {
    .kopf__nav { transition: none; }
    .menuknopf__balken,
    .menuknopf__balken::before,
    .menuknopf__balken::after { transition: none; }
  }
}

/* ===============================================================
   Mobilfassung — gemessen, nicht geschätzt
   ===============================================================
   Gemessen bei 375 px Breite: dreizehn Tippziele unter 44 Pixeln und
   eine kleinste Schriftgrösse von 9,6 px. 44 px ist die Grösse, die
   Apple und Google unabhängig voneinander als Mindestmass für einen
   Fingertipp nennen — darunter trifft man daneben.

   Vergrössert wird über Polsterung, nicht über die Schrift: die
   Beschriftungen sollen ihre Grösse behalten.                      */
@media (max-width: 860px) {

  /* --- Kopfzeile: drei Bedienelemente plus Wortmarke in einer Reihe --- */
  .kopf { gap: .5rem .6rem; }
  /* 42 px gemessen, zwei zu wenig — die Polsterung schliesst die Lücke. */
  .kopf__marke { padding: .62rem 0; font-size: 1rem; }

  /* Die gesperrten Kleinbeschriftungen lagen bei 10,9 px. Auf einem
     Telefon ist das an der Grenze des Lesbaren. */
  .check__feld label, .anfrage__feld label, .kennwerte dt { font-size: .74rem; }

  .menuknopf { width: 2.75rem; height: 2.75rem; }        /* 44 px */
  .sprachwahl { min-height: 2.75rem; padding: .5rem .75rem; }
  .kopf .knopf--klein { min-height: 2.75rem; display: grid; place-items: center; }

  /* Die Einträge im offenen Menü sind mit .85rem Polsterung schon bei
     54 px — sie bleiben. */

  /* --- Fusszeile: die Verweise lagen bei 22 px --- */
  .fuss nav { gap: 0 1.4rem; width: 100%; margin-left: 0; }
  .fuss nav a { display: block; padding: .7rem 0; min-height: 2.75rem; }

  /* --- Knöpfe im Inhalt --- */
  .knopf { min-height: 2.75rem; display: inline-grid; place-items: center; }
  .switcher__liste button { min-height: 2.75rem; }

  /* --- Kleinste Schriften anheben --- */
  .galerie span { font-size: .72rem; }
  .augenmass { font-size: .7rem; }

  /* --- Die graue Tippfläche von iOS stört bei eigenen Zuständen --- */
  a, button, [role="tab"] { -webkit-tap-highlight-color: transparent; }

  /* --- Der Fortschrittsbalken des Hero sitzt unten und ist mit 2 px
         auf einem Telefon kaum sichtbar. --- */
  .film__balken { height: 3px; }

  /* --- Sichere Ränder: der Fuss darf nicht unter den Home-Indikator --- */
  .fuss { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
  .kopf { padding-left: max(var(--rand), env(safe-area-inset-left));
          padding-right: max(var(--rand), env(safe-area-inset-right)); }
}

/* Ohne Weichzeichnung fehlt die Mittelung, dann muss die Deckkraft
   höher — sonst steht die Schrift direkt auf dem harten Bildkontrast. */
@supports not (backdrop-filter: blur(1px)) {
  .kopf { background: color-mix(in srgb, var(--papier) 95%, transparent); }
}

/* Das offene Menü bleibt deckender: dort steht eine ganze Liste über
   dem Bild, nicht nur eine Zeile. */
@media (max-width: 860px) {
  .kopf[data-menue="offen"] {
    background: color-mix(in srgb, var(--papier) 97%, transparent);
  }
}

/* ---------------------------------------------------------------
   Beweispunkte zwischen Hero und Farb-Sektion
   ---------------------------------------------------------------
   Drei Zahlen mit je einem Satz. Hier stand vorher erst eine Reihe
   von vier Attributwörtern über die volle Breite, dann der
   Markenzusatz — beides Schmuck. An dieser Stelle, direkt nach dem
   Hero, will der Leser einen Grund, weiterzulesen, keine Haltung.

   Die Zahl trägt, der Satz erklärt. Deshalb steht die Zahl gross und
   der Satz klein darunter, nicht nebeneinander.                   */
.beweis {
  background: var(--papier);
  border-bottom: 1px solid var(--tinte-08);
  padding: clamp(3rem, 8vh, 5rem) var(--rand);
}
.beweis__liste {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: var(--spalte);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
}
.beweis__liste > li {
  display: grid; gap: .6rem; align-content: start;
  min-width: 0;
}
.beweis__zahl {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}
/* Der erste Beweispunkt ist der stärkste — er bekommt den Akzent. */
.beweis__liste > li:first-child .beweis__zahl { color: var(--salbei); }
.beweis__text {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinte-70);
  max-width: 26ch;
}

/* ---------------------------------------------------------------
   Bildmarke neben der Wortmarke
   ---------------------------------------------------------------
   Seit 21.10.2026 die festgelegte Säule (Logo 6.5.10). Die Datei hängt
   an einem festen Dateinamen, damit ein Austausch eine reine
   Dateioperation bleibt.

   Höhe an der Schrift ausgerichtet, nicht an einem festen Wert: so
   bleibt das Verhältnis stimmig, wenn die Wortmarke skaliert.       */
.kopf__marke { gap: .55rem; }
.kopf__zeichen {
  width: auto;
  height: 1.7em;
  flex: 0 0 auto;
}
.kopf__marke-wort { display: flex; align-items: baseline; }

@media (max-width: 860px) {
  /* Auf dem Telefon konkurriert das Zeichen mit Menüknopf, Sprachwahl
     und Kontaktknopf um dieselbe Zeile. */
  .kopf__zeichen { height: 1.5em; }
}

/* Schmale Telefone: Die Kopfzeile brach in zwei Zeilen um. Gemessen bei
   375 px: Marke 153 + Aktionen 138 + Menüknopf 44 + Abstände 26 = 361 px
   auf 335 px Platz. Bei 360 px fehlten 41 px. Geholt wird der Platz
   über Abstände, Laufweite und Innenabstand. Die Tippflächen bleiben
   44 px hoch, nur schmaler. */
@media (max-width: 420px) {
  .kopf { gap: .5rem; }
  .menuknopf { margin-left: 0; }
  .kopf__aktionen { gap: .4rem; }
  .kopf__marke { font-size: .92rem; gap: .45rem; }
  .kopf .knopf--klein { padding-left: .75rem; padding-right: .75rem; }
  .sprachwahl { padding-left: .6rem; padding-right: .6rem; }
}


/* ===============================================================
   Ohne JavaScript — derselbe Ruhezustand wie bei reduzierter Bewegung
   ---------------------------------------------------------------
   Die Klasse js setzt ein Einzeiler im <head>. Fehlt sie (Skript
   blockiert, Fehler, Crawler ohne JS), bleiben sonst lange, leere
   Scroll-Strecken mit nur dem ersten Eintrag stehen (Farbe 340vh,
   Bauteile 300vh). Regeln gespiegelt aus den reduced-motion-Blöcken.
   =============================================================== */
html:not(.js) .sektion { height: auto; }
html:not(.js) .sektion__buehne { position: static; height: auto; }
html:not(.js) .wechseltext { display: block; }
html:not(.js) .wechseltext > * { opacity: 1; margin-bottom: .6em; }
html:not(.js) .wechseltext > *:last-child { margin-bottom: 0; }
html:not(.js) .film, html:not(.js) .film__balken, html:not(.js) .hero__clip { display: none; }
html:not(.js) .riss line { stroke-dashoffset: 0; }
html:not(.js) .riss__mass { opacity: 1; }
html:not(.js) .sektion--hero .sektion__buehne { min-height: 90svh; position: relative; }
html:not(.js) .hero__inhalt { position: relative; padding-top: 60svh; }
html:not(.js) .sektion--farbe .sektion__buehne { min-height: auto; }
html:not(.js) .farbe__raster { padding-block: 5rem; }
html:not(.js) .stapel { gap: 1rem; }
html:not(.js) .stapel > * { grid-area: auto; opacity: 1; }
html:not(.js) .doppel { grid-template-columns: 1fr; padding-block: 5rem; }
html:not(.js) .doppel__fenster, html:not(.js) .doppel__bilder { height: auto; overflow: visible; }
html:not(.js) .streifen, html:not(.js) .doppel__filmstreifen { transform: none; }
html:not(.js) .streifen > li { height: auto; opacity: 1; padding-block: .4rem; }
html:not(.js) .doppel__filmstreifen img { height: auto; aspect-ratio: 4 / 3; }
html:not(.js) .doppel__filmstreifen { display: grid; gap: 1rem; margin-top: 2rem; }
/* Ohne Skript lässt sich das Handy-Menü nicht öffnen: Links offen zeigen. */
@media (max-width: 860px) {
  html:not(.js) .menuknopf { display: none; }
  html:not(.js) .kopf__nav { max-height: none; overflow: visible; }
}


/* ---------- 9 · Häufige Fragen ---------- */
.fragen { max-width: 52rem; border-top: 1px solid var(--tinte-15); }
.fragen__eintrag { border-bottom: 1px solid var(--tinte-15); }
.fragen__eintrag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 0; cursor: pointer; list-style: none;
  min-height: 2.75rem;   /* 44 px Tippfläche */
}
.fragen__eintrag summary::-webkit-details-marker { display: none; }
.fragen__eintrag summary h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.fragen__eintrag summary::after {
  content: "+"; flex: none; font: 400 1.4rem/1 var(--schrift); color: var(--salbei-dunkel);
  transition: transform 200ms var(--weich);
}
.fragen__eintrag[open] summary::after { transform: rotate(45deg); }
.fragen__eintrag summary:focus-visible { outline: 2px solid var(--salbei-dunkel); outline-offset: 4px; }
.fragen__eintrag p { padding: 0 0 1.4rem; max-width: 44rem; color: var(--tinte-70); }
@media (prefers-reduced-motion: reduce) { .fragen__eintrag summary::after { transition: none; } }


/* ---------- Formular: Pflicht, Fehler am Feld, Senden ---------- */
.anfrage__pflicht { font-size: .85rem; color: var(--tinte-leise); margin-bottom: 1rem; }
.anfrage__fehler { font-size: .85rem; color: var(--fehler); font-weight: 600; }
.anfrage__feld :is(input, textarea)[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }
.anfrage__hinweis { margin-top: 1rem; font-size: .82rem; color: var(--tinte-leise); max-width: 34rem; }
.anfrage[data-zustand="sendet"] .knopf { opacity: .7; cursor: progress; }

/* Nur für Screenreader und Suchmaschinen (h1, seit der Hero deaktiviert ist). */
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ohne Hero ist .beweis der erste Abschnitt und läge unter dem fixen Kopf
   (gemessen 84 px hoch, 20.10.2026). Abstand oben um die Kopfhöhe erhöhen. */
.nur-vorlesen + .beweis {
  padding-top: calc(clamp(3rem, 8vh, 5rem) + 5.5rem);
}


/* ===============================================================
   Unterseiten (seit 21.10.2026) — erzeugt von world/seiten.py
   ---------------------------------------------------------------
   Dieselben Bausteine wie die Startseite. Neu sind nur: kürzere
   Hero-Strecke, Brotkrumen, Bauteilliste, Kacheln, Weiterführung,
   Rechtstexte. Alle Farben aus den Rollen oben, keine neuen Werte. */

/* Hero der Unterseiten: kürzer, das Thema steht im ersten Bild. */
.sektion--hero.hero--unterseite { --strecke: 220vh; }
@media (max-width: 860px) { .sektion--hero.hero--unterseite { --strecke: 170vh; } }
/* Ohne Clip fährt das Standbild mit dem Fortschritt leicht heran
   (--p aus story.js). Mit Clip übernimmt das Video. */
.hero--unterseite .hero__bild img {
  transform: scale(calc(1.02 + var(--p, 0) * .08));
  transform-origin: 50% 60%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .hero--unterseite .hero__bild img { transform: none; } }
.hero__hinweis {
  margin-top: 1rem; font: 500 .68rem/1.4 var(--mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--hell-leise);
}

/* Brotkrumen oben im Hero */
.pfad { margin-bottom: 1.2rem; font: 500 .72rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pfad li + li::before { content: "/"; margin-right: .4rem; color: var(--hell-leise); }
.pfad a { color: var(--hell); text-decoration: none; border-bottom: 1px solid var(--hell-leise); }
.pfad a:hover { border-bottom-color: var(--hell); }
.pfad [aria-current] { color: var(--hell-70); }

/* Aktuelle Seite in der Kopfnavigation */
.kopf__nav a[aria-current="page"] { color: var(--tinte); }
.kopf__nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Bauteilliste eines Bereichs: nummeriert, zwei Spalten */
.bauteilliste {
  list-style: none; margin: 0; padding: 0;
  /* Höchstens drei Spalten: bei 16rem wurden es am Rechner fünf, die
     Namen brachen dann in jedem Eintrag um (gemessen bei 1440 px). */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  column-gap: 2.5rem;
  border-top: 1px solid var(--tinte-15);
}
.bauteilliste > li {
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .3rem 1rem;
  padding: 1.4rem 1.5rem 1.4rem 0; border-bottom: 1px solid var(--tinte-15);
}
.bauteilliste__nr { font: 500 .78rem/1.9 var(--mono); color: var(--salbei-dunkel); }
.bauteilliste__name { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }
.bauteilliste__text { grid-column: 2; color: var(--tinte-70); font-size: .95rem; }
.block--dunkel .bauteilliste { border-top-color: var(--hell-18); }
.block--dunkel .bauteilliste > li { border-bottom-color: var(--hell-18); }
.block--dunkel .bauteilliste__nr { color: var(--salbei-hell); }
.block--dunkel .bauteilliste__text { color: var(--hell-70); }

/* Kacheln: Übersicht der Bereiche und "weitere Bereiche" */
.kacheln {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
.kacheln a { display: grid; gap: .9rem; text-decoration: none; color: inherit; }
.kacheln img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 500ms var(--weich);
}
.kacheln picture { overflow: hidden; display: block; }
.kacheln a:hover img { transform: scale(1.04); }
.kacheln__titel { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; }
.kacheln__text { color: var(--tinte-70); font-size: .92rem; }
.kacheln__weiter { font: 500 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--salbei-dunkel); }
.kacheln a:focus-visible { outline: 2px solid var(--sand); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .kacheln img { transition: none; } .kacheln a:hover img { transform: none; } }

/* Weiterführung am Seitenende: ein Satz, ein Knopf */
.weiter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 3rem;
}
.weiter p { max-width: 38rem; font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.weiter__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; }
.block--dunkel .weiter .knopf { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.block--dunkel .weiter .knopf:hover { background: transparent; color: var(--hell); }
.block--dunkel .weiter .knopf--leer { background: transparent; color: var(--hell); border-color: var(--hell-leise); }

/* Zweispaltiger Textblock mit Bild */
.text-bild {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.text-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.text-bild figcaption { margin-top: .8rem; font-size: .85rem; color: var(--tinte-leise); }
.block--dunkel .text-bild figcaption { color: var(--hell-leise); }
.text-bild__text p + p { margin-top: 1rem; }
.text-bild__text p { color: var(--tinte-70); }
.block--dunkel .text-bild__text p { color: var(--hell-70); }
@media (max-width: 900px) { .text-bild { grid-template-columns: 1fr; } }

/* Rechtstexte: ruhig, lesbar, ohne Effekte */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin: 2.6rem 0 .8rem; }
.rechtstext p, .rechtstext li { color: var(--tinte-70); }
.rechtstext p + p { margin-top: .8rem; }
.rechtstext ul { padding-left: 1.2rem; margin: .6rem 0 0; }
.luecke {
  display: inline-block; padding: 0 .35rem;
  background: var(--tinte-08); border: 1px dashed var(--rand-feld);
  font: 500 .85em/1.5 var(--mono); color: var(--tinte);
}
.entwurf {
  margin-bottom: 2rem; padding: .8rem 1rem;
  border-left: 2px solid var(--fehler); background: var(--tinte-08);
  font-size: .9rem; color: var(--tinte);
}

/* Fuss: zweite Zeile mit Rechtlichem */
.fuss__recht { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 1rem; font-size: .78rem; }
.fuss__recht a { color: var(--hell-leise); text-decoration: none; }
.fuss__recht a:hover { color: var(--hell); }

/* Ohne JavaScript: Hero der Unterseiten wie auf der Startseite */
html:not(.js) .hero--unterseite .hero__bild img { transform: none; }

/* Weiterführende Links der Startseite auf die Unterseiten */
.mehr { margin-top: clamp(2rem, 5vh, 3rem); }
.knopf--hell { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.knopf--hell:hover { background: transparent; color: var(--hell); }


/* ===============================================================
   Telefon-Feinschliff — gemessen 21.10.2026 auf allen 17 Seiten bei
   375 × 812, 390 × 664 (grosses Telefon mit Browserleiste) und 320 × 568.
   Befunde vorher: Kopf bei 320 px zweizeilig (133 px), Hero-Text und
   Bildstapel-Abschnitte ragten unter den Kopf oder unten aus der
   Bühne, Brotkrumen 14 px hoch, Filmzeile 10,9 px Schrift.
   =============================================================== */

/* Kopf: bei 320 px passten Marke (133) + Sprache/Kontakt (119) +
   Menü (44) nicht in eine Zeile. Ohne Zeichen ist die Marke 104 px. */
@media (max-width: 360px) {
  .kopf { padding-left: 1rem; padding-right: 1rem; }
  .kopf__zeichen { display: none; }
  /* Logo 6.5.10 (21.10.2026): der Schriftzug ist bei .74em 115 px breit,
     die alte Textmarke 104 px — bei 320 px brach der Menüknopf in die
     zweite Zeile. .66em ergibt 103 px. */
  .kopf__wort { height: .66em; }
}

/* Lesbare Mindestgrösse für die kleinen Monozeilen */
.film, .hero__hinweis { font-size: .72rem; }

/* Tippziele mindestens 24 px hoch (WCAG 2.5.8) */
.pfad a { display: inline-block; padding-block: .4rem; }
.fuss__recht a { display: inline-block; padding-block: .35rem; }

/* Niedrige Telefone: Hero-Inhalt muss unter dem Kopf beginnen */
@media (max-width: 860px) and (max-height: 720px) {
  h1, .titel-gross { font-size: clamp(1.9rem, 1.1rem + 4.4vw, 2.5rem); }
  .hero__unter { margin-top: .9rem; font-size: .95rem; line-height: 1.5; }
  .hero__knoepfe { margin-top: 1.1rem; gap: .5rem; }
  .hero__knoepfe .knopf { padding: .7rem 1.1rem; }
  .hero__inhalt { padding-bottom: 1.6rem; }
  .pfad { margin-bottom: .5rem; }
  .hero__hinweis { display: none; }
}

/* Bildstapel-Abschnitte (Farbe, Merkmale) auf dem Telefon: von oben
   unter dem Kopf aufbauen statt mittig — mittig ragte der Inhalt oben
   unter den Kopf und unten aus der Bühne. Bild fest begrenzt. */
@media (max-width: 900px) {
  .farbe__raster { align-content: start; gap: 1.1rem; padding-top: 5.6rem; padding-bottom: 1.2rem; }
  .farbe__bild img { aspect-ratio: auto; height: min(30svh, 16rem); }
  .farbe__lauf { margin-top: .9rem; font-size: .95rem; line-height: 1.5; }
  .kennwerte { margin-top: 1.1rem; padding-top: .9rem; gap: .7rem 1.6rem; }
  .wechseltext--farbe { min-height: 0; }
}
@media (max-width: 900px) and (max-height: 760px) {
  .farbe__bild img { height: min(24svh, 11rem); }
  .farbe__raster h2, .farbe__raster .titel-h2 { font-size: clamp(1.6rem, 1rem + 3.4vw, 2.1rem); }
  /* Die Kennwerte stehen auf jeder dieser Seiten zusätzlich im Check. */
  .kennwerte { display: none; }
}

/* Lange deutsche Wörter (Datenschutzerklärung) bei 320 px umbrechen */
h1, h2, .titel-gross, .titel-h2 { overflow-wrap: break-word; hyphens: auto; }
/* Doppelspalte auf niedrigen Telefonen: mittig ragte sie bei 320 × 568
   11 px unter den Kopf (gemessen). Von oben aufbauen, Bild kleiner. */
@media (max-width: 900px) and (max-height: 720px) {
  .doppel { align-content: start; padding-top: 5.4rem; gap: 1.1rem; }
  .doppel__bilder { --bildhoehe: 30svh; }
}

/* Rechtstexte: Abstand unter der Überschrift (stand bei 320 px direkt am Absatz) */
.rechtstext h1 { margin-bottom: 1.4rem; }


/* ===============================================================
   Druckbahn — Farbe-Seite (Prototyp 21.10.2026)
   Gerechnetes Bauteil rechts (Telefon: oben), Text links unten.
   Bis das Bauteil gerechnet ist, steht das echte Foto da (auch ohne
   JavaScript, ohne WebGL, bei einem Ladefehler).
   =============================================================== */
.sektion--hero.hero--druck { --strecke: 340vh; }
@media (max-width: 860px) { .sektion--hero.hero--druck { --strecke: 240vh; } }
.hero--druck .sektion__buehne {
  background: radial-gradient(120% 90% at 72% 40%, #39413b 0%, #262c28 55%, #1c201d 100%);
}
.druck__buehne { position: absolute; inset: 0 0 0 36%; }
.druck__buehne canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.druck__ersatz { position: absolute; inset: 14% 8% 14% 6%; transition: opacity 500ms var(--weich); }
.druck__ersatz img { width: 100%; height: 100%; object-fit: cover; }
.hat-druck .druck__ersatz { opacity: 0; visibility: hidden; }
.hero--druck .hero__inhalt { max-width: 40rem; }
/* Die Überschrift teilt sich die Breite mit dem Bauteil: kleiner als im
   Vollbild-Hero, sonst brach sie bei 1440 px in vier Zeilen. */
.hero--druck h1, .hero--druck .titel-gross { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.3rem); }
.hero--druck .hero__scrim { display: none; }
/* Telefon: Bauteil und Text untereinander statt übereinander. Mit festen
   Prozenten überlappten sie bei 375 × 812 um 87 px (Bauteil bis 438,
   Text ab 351). Das Bauteil nimmt jetzt den Platz über dem Text. */
@media (max-width: 860px) {
  .hero--druck .sektion__buehne { display: flex; flex-direction: column; padding-top: 5.2rem; }
  .druck__buehne { position: relative; inset: auto; flex: 1 1 auto; min-height: 9rem; }
  .druck__ersatz { inset: 4% 12%; }
  .hero--druck .hero__inhalt { position: relative; inset: auto; padding-top: .4rem; }
  .hero--druck .film { display: none; }
}
/* Niedrige Telefone: Text lief bei 320 × 568 33 px über die Bühne, bei
   360 × 740 blieben dem Bauteil nur 144 px.
   Der Untertitel steht direkt darunter in der Farbwahl ohnehin nochmals. */
@media (max-width: 860px) and (max-height: 780px) {
  .hero--druck .hero__unter { display: none; }
}

/* Farbwahl: Leinwand links, Knöpfe rechts */
.farbwahl { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.farbwahl__leinwand {
  position: relative; aspect-ratio: 1 / 1; max-height: 78svh;
  background: radial-gradient(110% 90% at 50% 35%, #39413b 0%, #232824 70%);
}
.farbwahl__leinwand canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.farbwahl__leinwand .druck__ersatz { inset: 0; }
.farbwahl__knoepfe { display: grid; gap: .75rem; margin-top: 1.8rem; }
.farbwahl__knoepfe button {
  display: grid; grid-template-columns: 3.2rem 1fr; align-items: center; gap: 1rem;
  padding: .7rem 1rem; min-height: 3.5rem;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--hell-18);
  transition: border-color 200ms, background 200ms;
}
.farbwahl__knoepfe button:hover { border-color: var(--hell-leise); }
.farbwahl__knoepfe button[aria-pressed="true"] { border-color: var(--hell); background: #ffffff10; }
.farbwahl__knoepfe button:focus-visible { outline: 2px solid var(--salbei-hell); outline-offset: 3px; }
.farbwahl__probe { height: 2.2rem; border-radius: 2px; background: linear-gradient(90deg, var(--a), var(--b)); }
.farbwahl__name { font-weight: 600; }
.farbwahl__quelle { display: block; font-size: .82rem; color: var(--hell-leise); font-weight: 400; }
.farbwahl__hinweis { margin-top: 1.4rem; font: 500 .72rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hell-leise); }
@media (max-width: 900px) { .farbwahl { grid-template-columns: 1fr; } .farbwahl__leinwand { max-height: 60svh; } }


/* ===============================================================
   Feedback Novabeton (22.10.2026)
   =============================================================== */
/* Kleinzeilen: Montserrat statt Mono; etwas weniger Sperrung, sie läuft breiter. */
.augenmass, .film, .hero__hinweis, .pfad, .galerie span, .bildstreifen span,
.kacheln__weiter, .farbwahl__hinweis, .anfrage__feld label { letter-spacing: .1em; }
/* Foto der Anlage und des Teams: ganz in einem Bildschirm, ohne Scrollen. */
.anlage__foto img { max-height: calc(100svh - 12rem); }
/* Kontaktblock mit echten Angaben */
.kontakt__angaben { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.4rem 2.4rem; font-style: normal; }
.kontakt__angaben dt { font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.kontakt__angaben dd { margin: .35rem 0 0; }
.kontakt__angaben a { text-decoration: none; border-bottom: 1px solid var(--tinte-15); }
.kontakt__angaben a:hover { border-bottom-color: var(--tinte); }
.check__ergebnis[data-zustand="zu-gross"] { color: var(--salbei-hell); }
/* Kopf bei 320 px: Montserrat läuft breiter, es fehlten 2 px für eine
   Zeile (Marke 103 + Sprache/Kontakt 127 + Menü 44 + Abstände 16 = 290
   bei 288 Platz) → Kopf brach wieder auf 129 px um. Knöpfe kompakter. */
@media (max-width: 360px) {
  .kopf .knopf--klein { padding-left: .55rem; padding-right: .55rem; }
  .sprachwahl { padding-left: .45rem; padding-right: .45rem; }
}

/* ---------- Konfigurator (Farbe-Seite, 22.10.2026) ---------- */
.konfig { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.konfig__leinwand {
  position: sticky; top: 6rem;
  aspect-ratio: 1 / 1; max-height: calc(100svh - 8rem);
  background: radial-gradient(110% 90% at 50% 35%, #39413b 0%, #232824 70%);
}
.konfig__leinwand canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.konfig__leinwand .druck__ersatz { inset: 0; }
.konfig__steuerung .block__kopf { margin-bottom: 1.6rem; }
.konfig__gruppe { border: 0; margin: 0 0 1.4rem; padding: 0; min-width: 0; }
.konfig__gruppe legend {
  padding: 0; margin-bottom: .7rem;
  font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hell-leise);
}
.konfig__wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.konfig__wahl button {
  display: flex; align-items: center; gap: .7rem; min-height: 2.9rem; padding: .55rem .8rem;
  background: transparent; color: var(--hell); font: inherit; font-size: .92rem; text-align: left; cursor: pointer;
  border: 1px solid var(--hell-18); transition: border-color 200ms, background 200ms;
}
.konfig__wahl button:hover { border-color: var(--hell-leise); }
.konfig__wahl button[aria-pressed="true"] { border-color: var(--hell); background: #ffffff12; font-weight: 600; }
.konfig__wahl button:focus-visible { outline: 2px solid var(--salbei-hell); outline-offset: 3px; }
.konfig__wahl--farbe .farbwahl__probe { width: 1.8rem; height: 1.2rem; flex: none; }
.konfig__regler { display: grid; grid-template-columns: 4.5rem 1fr 4.5rem; align-items: center; gap: .8rem; margin: 0 0 .6rem; }
.konfig__regler label { font-size: .92rem; }
.konfig__regler output { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }
.konfig__regler input[type=range] { width: 100%; accent-color: var(--salbei-hell); min-height: 2rem; }
.konfig__ergebnis { min-height: 3em; margin: .6rem 0 1.2rem; }
.konfig__aktion .knopf { background: var(--hell); color: var(--tinte); border-color: var(--hell); }
.konfig__aktion .knopf:hover { background: transparent; color: var(--hell); }
@media (max-width: 900px) {
  .konfig { grid-template-columns: 1fr; }
  /* Telefon: das Bild bleibt beim Wählen oben stehen */
  .konfig__leinwand { top: 4.9rem; z-index: 2; aspect-ratio: auto; height: 38svh; max-height: none; }
}
/* Startseite: Säule rechts (Feedback „Säule auf der rechten Seite"),
   Telefon: Bild oben, wie auf der Farbe-Seite. */
.konfig--rechts { grid-template-columns: 1fr 1.15fr; }
.konfig--rechts .konfig__leinwand { order: 2; }
@media (max-width: 900px) {
  .konfig--rechts { grid-template-columns: 1fr; }
  .konfig--rechts .konfig__leinwand { order: -1; }
}

/* ---------- Konfigurator, Ausbau (22.10.2026) ---------- */
.konfig__leinwand canvas { touch-action: pan-y; cursor: grab; }
.konfig__leinwand canvas:active { cursor: grabbing; }
.konfig__ansicht {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
}
.konfig__ansicht button {
  min-width: 2.4rem; min-height: 2.4rem; padding: 0 .5rem;
  background: #1c201dcc; color: var(--hell); border: 1px solid var(--hell-18);
  font: 600 1rem/1 var(--schrift); cursor: pointer;
}
.konfig__ansicht button:hover { border-color: var(--hell-leise); }
.konfig__ansicht button:focus-visible { outline: 2px solid var(--salbei-hell); outline-offset: 2px; }
.konfig__person {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; padding: 0 .7rem;
  background: #1c201dcc; border: 1px solid var(--hell-18); font-size: .82rem; color: var(--hell); cursor: pointer;
}
.konfig__person input { accent-color: var(--salbei-hell); width: 1rem; height: 1rem; }
.konfig__tipp {
  position: absolute; right: .8rem; top: .7rem; margin: 0;
  font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hell-leise);
}
.konfig__legende { margin: 0 0 .7rem; font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--hell-leise); }
.konfig__vorlagen { display: flex; flex-wrap: wrap; gap: .45rem; }
.konfig__vorlage {
  min-height: 2.6rem; padding: .45rem .9rem; border-radius: 999px;
  background: transparent; color: var(--hell); border: 1px solid var(--hell-18);
  font: 500 .85rem/1.2 var(--schrift); cursor: pointer;
}
.konfig__vorlage:hover { border-color: var(--hell); background: #ffffff12; }
.konfig__vorlage:focus-visible { outline: 2px solid var(--salbei-hell); outline-offset: 3px; }
.konfig__wahl--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.konfig__aktion { display: flex; flex-wrap: wrap; gap: .6rem; }
.konfig__aktion .knopf--leer { background: transparent; color: var(--hell); border-color: var(--hell-leise); cursor: pointer; font: inherit; font-size: .9rem; font-weight: 500; }
.konfig__aktion .knopf--leer:hover { background: var(--hell); color: var(--tinte); }
.konfig__meldung { min-height: 1.4em; margin: .6rem 0 0; font-size: .88rem; color: var(--salbei-hell); word-break: break-all; }
@media (max-width: 520px) { .konfig__wahl--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .konfig__tipp { display: none; } }
/* Telefon: Ansichts-Leiste in EINER Zeile. Vorher zwei Zeilen, 82 px hoch,
   sie verdeckte 27–38 % des Bildes (gemessen 320–390 px). */
@media (max-width: 900px) {
  .konfig__ansicht { left: .4rem; bottom: .4rem; right: .4rem; flex-wrap: nowrap; gap: .25rem; }
  .konfig__ansicht button { min-width: 2.1rem; min-height: 2.1rem; padding: 0 .3rem; font-size: .9rem; }
  .konfig__person { min-height: 2.1rem; padding: 0 .5rem; font-size: .75rem; white-space: nowrap; margin-left: auto; }
}
/* 320 px: „Person 1,75 m" ragte 23 px über den Rand → nur „1,75 m". */
@media (max-width: 400px) { .konfig__person-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
/* Eigene Farben (Feedback 22.10.2026: „Farben auch auswählen können") */
.konfig__eigen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .9rem; }
.konfig__eigen .konfig__legende { width: 100%; margin: 0; }
.konfig__farbfeld { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .3rem .8rem .3rem .35rem; border: 1px solid var(--hell-18); cursor: pointer; font-size: .9rem; }
.konfig__farbfeld:hover { border-color: var(--hell-leise); }
.konfig__farbfeld input { width: 2.2rem; height: 1.9rem; padding: 0; border: 0; background: none; cursor: pointer; }
.konfig__farbfeld:focus-within { outline: 2px solid var(--salbei-hell); outline-offset: 2px; }
.konfig__eigen[data-aktiv] .konfig__farbfeld { border-color: var(--hell); background: #ffffff12; }
.konfig__klein { font-size: .8rem; color: var(--hell-leise); }
/* „12,00 m" brach in der Anzeige um */
.konfig__regler { grid-template-columns: 4.5rem 1fr 5.6rem; }
.konfig__regler output { white-space: nowrap; }

/* ---------- Mosaik und Grossansicht (Feedback 22.10.2026:
   „Aufstellung der Bilder überdenken") ---------- */
.mosaik {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(9rem, 15vw, 16rem); grid-auto-flow: dense;
  gap: clamp(.5rem, 1.2vw, 1rem);
}
.mosaik__teil { min-width: 0; grid-column: span 4; }
.mosaik--gross { grid-column: span 8; grid-row: span 2; }
.mosaik--hoch { grid-row: span 2; }
.mosaik__link { position: relative; display: block; height: 100%; overflow: hidden; color: var(--hell); text-decoration: none; background: var(--tinte-08); }
.mosaik__link picture, .mosaik__link img { display: block; width: 100%; height: 100%; }
.mosaik__link img { object-fit: cover; transition: transform 700ms var(--weich); }
.mosaik__link::after {
  content: ""; position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(to top, #1c201dcc, transparent);
  pointer-events: none;
}
.mosaik__titel {
  position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 1;
  font-weight: 600; font-size: clamp(.9rem, .8rem + .3vw, 1.05rem); letter-spacing: -.01em; line-height: 1.25;
}
.mosaik__link:hover img { transform: scale(1.04); }
.mosaik__link:focus-visible { outline: 3px solid var(--salbei); outline-offset: 3px; }
@media (max-width: 700px) {
  .mosaik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .mosaik__teil { grid-column: span 1; }
  .mosaik--gross { grid-column: span 2; grid-row: span 1; }
  .mosaik--hoch { grid-row: span 2; }
}
@media (prefers-reduced-motion: reduce) { .mosaik__link img { transition: none; } .mosaik__link:hover img { transform: none; } }

.lichtbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #0f1210f2; color: var(--hell);
}
.lichtbox::backdrop { background: #0f1210cc; }
.lichtbox[open] { display: grid; grid-template-rows: 1fr auto; }
.lichtbox__bild { min-height: 0; display: grid; place-items: center; padding: 4rem 4.5rem 1rem; }
.lichtbox__bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lichtbox__fuss { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem 1.4rem; }
.lichtbox__titel { margin: 0; font-weight: 600; }
.lichtbox__zahl { font: 500 .78rem/1 var(--mono); letter-spacing: .1em; color: var(--hell-leise); }
.lichtbox button {
  position: absolute; min-width: 2.8rem; min-height: 2.8rem;
  background: #1c201dcc; color: var(--hell); border: 1px solid var(--hell-18); font: 600 1.2rem/1 var(--schrift); cursor: pointer;
}
.lichtbox button:hover { border-color: var(--hell); }
.lichtbox button:focus-visible { outline: 2px solid var(--salbei-hell); outline-offset: 2px; }
.lichtbox__zu { top: 1rem; right: 1rem; }
.lichtbox__zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.lichtbox__vor { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) { .lichtbox__bild { padding: 3.8rem .5rem 1rem; } .lichtbox__zurueck, .lichtbox__vor { top: auto; bottom: 4.2rem; transform: none; } }

/* ============================================================
   Dunkler Grund (Feedback Novabeton 22.10.2026:
   „Hintergrundfarbe versuchen mit schwarz -> Container Kontrast").
   Entscheid 23.10.2026 (Arianis): beide Fassungen, per Knopf umschaltbar.
   Hell ist der Ausgangszustand; das Skript im <head> setzt data-grund.
   Flächen, die vorher Tiefgrün auf Offwhite waren, bleiben Tiefgrün:
   sie sind jetzt die Container, die sich vom Schwarz abheben.
   ============================================================ */
:root[data-grund="schwarz"] {
  --papier:      #0D0F0E;
  --papier-rein: #181B19;
  --tinte:       #F5F5F2;
  --tinte-70:    #F5F5F2b3;
  --tinte-80:    #F5F5F2cc;
  --tinte-leise: #F5F5F2b3;
  --rand-feld:   #F5F5F280;
  --tinte-15:    #F5F5F226;
  --tinte-08:    #F5F5F214;
  --salbei-dunkel: var(--salbei-hell);
  color-scheme: dark;
}
:root[data-grund="schwarz"] .block--dunkel,
:root[data-grund="schwarz"] .fuss { background: var(--tiefgruen); }
:root[data-grund="schwarz"] .sprungmarke { background: var(--tiefgruen); }
:root[data-grund="schwarz"] .knopf { color: var(--papier); }
:root[data-grund="schwarz"] .knopf:hover { color: var(--tinte); }
:root[data-grund="schwarz"] .knopf--leer { color: var(--hell); }
:root[data-grund="schwarz"] .knopf--leer:hover { color: var(--papier); }
:root[data-grund="schwarz"] .kopf__marke-a { color: var(--offwhite); }
:root[data-grund="schwarz"] .kopf__zeichen { content: url("/assets/logo-novabeton-negativ.svg"); }

/* Knopf hell/dunkel: im Kopf neben der Sprachwahl; mobil (Kopf ist bei
   320 px schon voll) als Zeile im aufklappbaren Menü. */
.grundwahl {
  display: inline-grid; place-items: center;
  padding: .4rem .5rem;
  background: transparent; color: var(--tinte-70);
  border: 1px solid var(--tinte-15); cursor: pointer;
}
.grundwahl:hover { color: var(--tinte); border-color: var(--tinte); }
.grundwahl--menue { display: none; }
@media (max-width: 860px) {
  .kopf__aktionen .grundwahl { display: none; }
  .grundwahl--menue {
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem .2rem; border: 0; border-bottom: 1px solid var(--tinte-08);
    font: 500 1rem/1.2 var(--schrift); text-align: left; color: var(--tinte-70);
  }
}

/* KI-Bilder sichtbar beschriftet (Feedback: fehlende Bilder per KI, dann
   kennzeichnen). Text aus data-hinweis, englisch aus data-hinweis-en. */
.visualisierung { position: relative; display: block; }
.visualisierung::after {
  content: attr(data-hinweis);
  position: absolute; left: .75rem; bottom: .75rem;
  padding: .3rem .55rem;
  font: 600 .68rem/1 var(--schrift); letter-spacing: .1em; text-transform: uppercase;
  color: var(--hell); background: #1c201dcc;
  pointer-events: none;
}
html[lang="en"] .visualisierung::after { content: attr(data-hinweis-en); }