/* liquitec — Stylesheet der Website
 *
 * Grundlage ist das Design-System des Brandkit: eine Schrift, die Farbtafel,
 * die zweistufige Überschrift. Alles andere folgt daraus.
 *
 * Für den Bildschirm sind die Deck-Grössen (56 px Überschrift bei 1920)
 * nicht übernommen: eine Website wird auf dem Telefon gelesen. Gesetzt wird
 * mit clamp() zwischen einem Wert fürs Telefon und einem für den grossen
 * Bildschirm — proportionales Herunterrechnen macht Text auf dem Handy
 * unlesbar, das steht so auch im Design-System für Social-Formate.
 */

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(schrift/mavenpro-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(schrift/mavenpro-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* font-display:swap statt block: beim Deck wartet man lieber kurz, bei einer
   Website zählt, dass sofort etwas Lesbares steht. */

:root {
  --ink: #0A0B0D;
  --ink-2: #14171C;
  --line-dark: #2A3038;
  --paper: #FFFFFF;
  --surface: #F4F5F7;
  --line: #E3E5E9;
  --red: #E30613;
  --red-bright: #FF2436;
  /* Hover für rote Knöpfe mit weisser Schrift (6.22:1 statt 3.78:1). */
  --red-dunkel: #C4050F;
  --text: #101216;
  /* hell = Fliesstext auf Dunkel, aus der Farbtafel des Brandkit. Fehlte
     hier, obwohl zwei Regeln die Variable bereits ansprachen — sie liefen
     nur über ihren Rückfallwert. */
  --hell: #E7E9EC;
  /* Zweittext auf Hell. Der frühere Wert #6B7280 stand auf Weiss bei 4.83:1,
     auf dem grauen Band (--surface) aber nur bei 4.43:1 — knapp unter der
     Grenze von 4.5:1, und das graue Band trägt die Startseite. Nachgemessen
     am 20.09.2026, deshalb eine Spur dunkler: jetzt 5.15:1 auf Weiss und
     4.72:1 auf dem Band. */
  --mute: #666E7A;
  --faint: #A2A8B2;
  --dk-mute: #8A929C;
  /* Nur noch für den grauen Teil grosser Überschriften auf Dunkel. Der
     frühere Wert #5C646E lag auf --ink-2 bei genau 3.00:1 und trug zugleich
     kleine Schrift (Sprachumschalter, Fusszeile) bei 3.28:1 — zu wenig.
     Die kleinen Fälle laufen jetzt über --dk-mute (6.26:1). */
  --dk-faint: #68707B;

  --rand: clamp(20px, 5vw, 104px);
  --breite: 1280px;
}

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

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--text);
  font-family: 'Maven Pro', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
/* Das hochgestellte ® darf die Zeile nicht höher machen. Ohne das stand
   «bio-plus®» in den Brotkrumen tiefer als «Produkte», und in Absätzen mit
   Markennamen wurden einzelne Zeilenabstände grösser. */
sup { line-height: 0; }
a { color: inherit; text-decoration: none; }

.bahn {
  width: 100%;
  max-width: var(--breite);
  margin: 0 auto;
  padding-inline: var(--rand);
}

/* ---------- Kopfzeile ---------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 11, 13, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-dark);
}
.kopf .bahn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}
/* Das Logo misst 720 x 210, also 3.43:1. Höhe vorgeben, Breite rechnen
   lassen — sonst zieht es sich in die Breite. */
.kopf .marke img { height: 28px; width: auto; }
.kopf nav { display: flex; gap: clamp(14px, 2.2vw, 30px); align-items: center; }
/* Der Menüpunkt bekommt beim Überfahren die kurze rote Linie, dasselbe
   Zeichen wie unter jeder Überschrift — vorher wuchs ein Rahmen über die
   ganze Breite. Sie fährt aus der Mitte auf. */
.kopf nav > a, .kopf nav .klapp > a {
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--dk-mute);
  padding: 8px 0;
  white-space: nowrap;
  transition: color .18s ease;
}
.kopf nav > a::after, .kopf nav .klapp > a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--red-bright);
  transform: translateX(-50%);
  transition: width .24s cubic-bezier(.7, 0, .2, 1);
}
.kopf nav > a:hover, .kopf nav .klapp:hover > a,
.kopf nav > a:focus-visible, .kopf nav .klapp:focus-within > a { color: #fff; }
.kopf nav > a:hover::after, .kopf nav > a:focus-visible::after,
.kopf nav .klapp:hover > a::before, .kopf nav .klapp:focus-within > a::before { width: 100%; }
.kopf nav > a.an, .kopf nav .klapp > a.an { color: #fff; }
.kopf nav > a.an::after, .kopf nav .klapp > a.an::before { width: 100%; background: var(--red); }
.kopf nav sup { font-size: .6em; }

/* Rechts: Sprachwahl als Paar und ein ruhiger Kontaktknopf. */
.kopfrechts { display: flex; align-items: center; gap: 16px; }
.knopf.klein { min-height: 38px; padding: 0 18px; font-size: 15px; }
.navfuss { display: none; }

/* ---------- Klappmenü auf dem Telefon ---------- */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  margin-right: -10px;
  background: none;
  border: none;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--hell);
  transition: transform .25s cubic-bezier(.7, 0, .2, 1), opacity .2s ease;
}
.burger span + span { margin-top: 5px; }
.kopf.offen .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf.offen .burger span:nth-child(2) { opacity: 0; }
.kopf.offen .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .kopfrechts { display: none; }
  .burger { display: block; }
  /* Die Fläche steht unter der Kopfzeile und füllt den Rest des Bildschirms.
     Sie wird nicht ausgeblendet, sondern weggeschoben — so lässt sie sich
     weich öffnen, und die Verweise bleiben für Suchmaschinen im Quelltext. */
  /* An der Kopfzeile aufgehängt, nicht am Fenster: .kopf trägt einen
     backdrop-filter, und der macht die Leiste zum Bezugsrahmen auch für
     position:fixed. Mit top/bottom am Fenster gerechnet blieb die Fläche
     68 px hoch, und es war nur der erste Menüpunkt zu sehen. */
  .kopf nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 68px);
    height: calc(100dvh - 68px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--rand) 40px;
    background: var(--ink);
    border-top: 1px solid var(--line-dark);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .24s cubic-bezier(.2, .7, .2, 1), visibility .24s;
  }
  .kopf.offen nav { transform: none; opacity: 1; visibility: visible; }
  .kopf nav > a, .kopf nav .klapp > a {
    display: block;
    padding: 16px 0;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    border-bottom: 1px solid var(--line-dark);
  }
  .kopf nav > a::after, .kopf nav .klapp > a::before { display: none; }
  .kopf nav .klapp > a::after { display: none; }
  .kopf nav .klapp { position: static; }
  /* Das Produktmenü steht offen: ein zweites Klappen wäre ein Klick mehr
     für dasselbe Ziel. Bereiche untereinander, Detailseiten eingerückt
     unter ihrem Bereich. */
  /* visibility: inherit, nicht visible — ein Kind mit «visible» bleibt auch
     im versteckten Menü klickbar. So lag die (unsichtbare) Produktliste
     über dem Seitenkopf und fing auf dem Handy die Tipps ab: ein Tipp auf
     den Kopf öffnete z. B. bio-serv® (Meldung 09.10.2026). */
  .kopf nav .klappfeld {
    position: static;
    opacity: 1;
    visibility: inherit;
    transform: none;
    padding: 6px 0 14px;
    background: none;
    border: none;
  }
  .kopf nav .klappfeld::after { display: none; }
  .kopf .klappfeld .bahn.mega { display: block; height: auto; max-width: none; padding: 0; }
  /* Sonst gelten dieselben Regeln wie am Desktop: Bereiche bündig,
     Detailseiten eingerückt an einer Haarlinie. */
  .navfuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
  .navfuss .knopf { flex: 1; justify-content: center; }
  .sprache.innen { font-size: 16px; gap: 12px; }
}

/* ---------- Aufklappmenü ---------- */
/* Öffnet bei Hover und bei Tastaturfokus. Das :focus-within ist kein
   Beiwerk: ohne es kommt niemand mit der Tastatur an die Produktseiten. */
.klapp { position: relative; }
.klapp > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
/* Produktmenü. Grundregeln für das Klappmenü auf dem Telefon (dunkel, nur
   die Liste der Bereiche); ab 900 px ein helles Band mit Vorschau.
   Warum hell: die Produktfotos stehen meist auf Weiss — auf dunklem Grund
   wären sie harte Kacheln (Design-System), und das Band hebt sich so klar
   von der dunklen Kopfzeile ab. Vorher: vier gleichförmige Textspalten auf
   Schwarz, lesbar, aber monoton (Rückmeldung 06.10.2026).
   Rot trägt im Band nur die eine Marke am gewählten Bereich. */
.megatitel, .megavorschau { display: none; }
.megaliste ul { list-style: none; }
.kopf nav .megaliste ul a {
  display: block;
  padding: 10px 0 10px 14px;
  border-left: 1px solid var(--line-dark);
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #fff;
  white-space: normal;
}
.megaliste a small {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--dk-mute);
  margin-bottom: 2px;
}
.megaliste ul a .pfeilchen { display: none; }
/* Ohne Grösse füllte das SVG auf dem Telefon die ganze Breite (Meldung
   15.10.2026). Grundregel aus, Telefon und Desktop setzen es je selbst. */
.megaliste ul a .megasymbol { display: none; }
/* Telefon (Entscheid 15.10.2026, Variante B): rote Linie unter «Produkte»,
   Bereiche als Zeilen mit Haarlinie, kleines rotes Symbol links, Pfeil
   rechts. Alle Zeilen gleich hoch, auch Engineering ohne Markenzeile. */
@media (max-width: 899px) {
  .kopf nav .klapp > a { border-bottom: none; padding-bottom: 6px; }
  .kopf nav .klapp > a::after {
    display: block; content: ""; width: 30px; height: 3px; margin: 10px 0 0;
    border: 0; border-radius: 2px; background: var(--red); transform: none;
  }
  .kopf nav .megaliste ul a {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
    min-height: 71px; padding: 12px 0; border-left: none; border-bottom: 1px solid var(--line-dark);
  }
  .megaliste ul a .megasymbol { display: block; grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; stroke-width: 1.6; color: var(--red-bright); }
  .megaliste ul a small, .megaliste ul a span:not(.megasymbol) { grid-column: 2; }
  /* Ohne Markenzeile (Engineering) folgt der Titel direkt auf das Symbol und
     steht über beide Rasterzeilen, also mittig. */
  .megaliste ul a .megasymbol + span { grid-row: 1 / span 2; }
  .megaliste ul a .pfeilchen { display: block; grid-column: 3; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--dk-mute); }
  /* Aktueller Bereich: vorher roter Strich links, jetzt Markenzeile und Pfeil rot */
  .kopf nav .megaliste ul a.an small, .kopf nav .megaliste ul a.an .pfeilchen { color: var(--red-bright); }
}
.kopf nav .megaliste ul a.an { border-left-color: var(--red-bright); }
.kopf nav .megaalle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--hell);
}
.megaalle .pfeilchen { color: var(--dk-mute); transition: transform .2s ease; }
.megaalle:hover .pfeilchen { transform: translateX(3px); }

@media (min-width: 900px) {
  /* Die Menüpunkte reichen über die ganze Höhe der Kopfzeile. Sonst läge
     zwischen «Produkte» und dem Band ein Streifen, in dem der Zeiger das
     Menü verliert. */
  .kopf nav { align-self: stretch; }
  .kopf nav .klapp { position: static; align-self: stretch; display: flex; align-items: center; }
  .klappfeld {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    /* Schliessen mit kurzer Verzögerung: wer schräg vom Menüpunkt ins Band
       fährt, streift sonst kurz die Kante und alles klappt zu. */
    transition: opacity .18s ease .08s, transform .18s ease .08s, visibility 0s linear .26s;
  }
  .klapp:hover .klappfeld,
  .klapp:focus-within .klappfeld {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  /* Die Seite darunter tritt zurück. Durchlässig für den Zeiger: wer darauf
     fährt, verlässt das Menü, und es schliesst. */
  .klappfeld::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 100vh;
    background: rgba(10, 11, 13, .55);
    pointer-events: none;
  }
  .kopf .klappfeld .bahn.mega {
    display: grid;
    grid-template-columns: minmax(250px, .75fr) minmax(0, 2fr);
    gap: 0 clamp(32px, 4vw, 64px);
    /* .kopf .bahn zentriert senkrecht — hier beginnen beide Spalten oben. */
    align-items: stretch;
    height: auto;
    padding-block: 28px 32px;
  }

  /* Liste der Bereiche */
  .megatitel {
    display: block;
    margin: 0 0 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mute);
  }
  .megaliste { display: flex; flex-direction: column; }
  .kopf nav .megaliste ul a {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 7px 14px;
    border-left: none;
    border-radius: 6px;
    font-size: 15px;
    line-height: 20px;
    color: var(--text);
    transition: background .15s ease;
  }
  .megaliste ul a small { grid-column: 1; color: var(--mute); font-size: 11px; margin-bottom: 1px; }
  .megaliste ul a span { grid-column: 1; }
  .megaliste ul a .pfeilchen {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--mute);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .15s ease, transform .15s ease;
  }
  /* Gewählter Bereich: Fläche, Pfeil und die eine rote Marke links. */
  .kopf nav .megaliste ul a.zeigt { background: var(--surface); }
  .megaliste ul a.zeigt .pfeilchen { opacity: 1; transform: none; }
  .megaliste ul a.zeigt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 2px;
    border-radius: 1px;
    background: var(--red);
  }
  .kopf nav .megaliste ul a.an { border-left: none; }
  .kopf nav .megaalle { margin: auto 0 0 14px; padding-top: 16px; color: var(--text); }
  .megaalle .pfeilchen { color: var(--mute); }

  /* Vorschau */
  .megavorschau { display: block; border-left: 1px solid var(--line); padding-left: clamp(32px, 4vw, 64px); }
  .vorschau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
  .vorschau[hidden] { display: none; }
  .vorschaubild {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
  }
  .vorschaubild img { width: 100%; height: 100%; object-fit: cover; }
  .vorschaumarke { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; color: var(--mute); }
  .vorschautitel { margin-top: 4px; font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.3px; color: var(--text); }
  .vorschaulead { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--mute); max-width: 44ch; }
  .vorschauliste { list-style: none; margin-top: 16px; border-top: 1px solid var(--line); }
  .vorschauliste li { border-bottom: 1px solid var(--line); }
  .kopf nav .vorschauliste a, .vorschauliste.nurtext li {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--text);
    white-space: normal;
  }
  .vorschauliste.nurtext li { color: var(--mute); }
  .kopf nav .vorschauliste a:hover, .kopf nav .vorschauliste a.an { color: var(--text); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 4px; }
  .kopf nav .vorschautext .knopf { margin-top: 20px; }
}

/* ---------- Karussell im Kopfbereich ---------- */
/* Ein Video je Produkt, sichtbar ist eines. Weitere Teile kommen als
   Eintrag in inhalt.json dazu, ohne Änderung am Generator.
   .karussell stand hier schon einmal und wurde als toter Ballast entfernt,
   als das alte Bildstapel-Karussell dem Video wich. Jetzt ist die Klasse
   wieder in Gebrauch — und die Regel gehört dazu. */
.karussell { position: relative; }
.stueck { display: none; }
.stueck.an { display: block; }
.punkte {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
}
.punkte button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line-dark);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.punkte button:hover { background: var(--dk-faint); }
.punkte button.an { background: var(--red-bright); transform: scale(1.25); }
.sprache {
  display: flex;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dk-mute);
}
.sprache a.an { color: #fff; }

/* ---------- Bausteine ---------- */
.eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--red);
}
.dunkel .eyebrow, .hero .eyebrow { color: var(--red-bright); }
/* Auf dem grauen Band reicht das Markenrot für kleine Schrift nicht: #E30613
   ergibt dort 4.48:1. Das dunklere Rot bringt 5.70:1 und bleibt erkennbar
   liquitec-Rot. Flächen, Linien und Knöpfe behalten #E30613 — dort gilt die
   Textgrenze nicht. */
.grund .eyebrow { color: var(--red-dunkel); }
/* Bei Markennamen in Kleinschreibung nur 2.5 px sperren — 5 px sind für
   Versalien gedacht (Design-System). liquitec bleibt klein, auch hier. */
.eyebrow.marke { letter-spacing: 2.5px; text-transform: none; }

/* Die zweistufige Überschrift: erster Teil fett in Textfarbe, zweiter in
   Grau, Gewicht 500, nicht kursiv. Erkennungsmerkmal des Auftritts. */
h1, h2, h3 { font-weight: 700; letter-spacing: -.5px; line-height: 1.12; }
h1 { font-size: clamp(32px, 4.6vw, 56px); }
h2 { font-size: clamp(27px, 3.6vw, 44px); }
h3 { font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.2px; }
/* Der zweite, graue Teil einer zweistufigen Überschrift. Der Grundwert gilt
   für hellen Grund: #B4B9C1 stand dort bei 1.81:1 und verfehlte selbst die
   3:1 für grosse Schrift — er war für dunklen Grund gedacht und ist von dort
   auf die hellen Bänder durchgeschlagen (gemessen 20.09.2026). Jetzt
   3.37:1 auf dem Band, 3.68:1 auf Weiss. Dunkle Flächen setzen ihren
   eigenen Wert. */
em { font-style: normal; font-weight: 500; color: #7E8692; }
.dunkel em { color: var(--dk-faint); }
.hero em { color: #B4B9C1; }
/* Der zweite Teil bricht immer um — und zwar dort, wo er soll, nicht dort,
   wo die Zeile zufällig endet. */
h1 em, h2 em { display: block; }

.strich {
  width: 64px;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
  margin: 22px 0 0;
}
.dunkel .strich, .hero .strich { background: var(--red-bright); }

.lead {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  color: var(--mute);
  max-width: 58ch;
  margin-top: 22px;
}
.dunkel .lead, .hero .lead { color: var(--dk-mute); }

.abschnitt { padding-block: clamp(56px, 8vw, 116px); }
.dunkel { background: var(--ink); color: #fff; }
.grund { background: var(--surface); }

/* ---------- Kopfbereich ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding-block: clamp(52px, 7vw, 96px) 0;
  /* Senkrecht gestapelt: Raster, darunter die Kennzahlenleiste. Hier stand
     einmal ein waagrechter Flex-Behälter — die Leiste rutschte damit als
     dritte Spalte neben den Text, und das Bauteil schrumpfte. */
  display: flex;
  flex-direction: column;
}
.hero .hintergrund {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* Zurückgenommen, seit rechts das Bauteil steht: zwei Blickfänge auf
     derselben Fläche vertragen sich nicht. */
  opacity: .34;
}
/* Bilder laufen ins Schwarz aus, nie als hart abgesetzte Kachel.
   Der Schleier ist ein echtes Element und kein ::after — und weder er noch
   die Bahn tragen ein z-index. Das ist Absicht: z-index auf einem
   positionierten Element eröffnet einen Stapelkontext, und mix-blend-mode
   im Video mischt dann nur noch innerhalb der Bahn statt mit dem
   Kopfbereich. Das Schwarz des Videos bliebe als Kasten stehen. */
.hero .schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 22%, rgba(10, 11, 13, .72) 58%, rgba(10, 11, 13, .45) 100%),
    linear-gradient(0deg, var(--ink) 2%, transparent 42%);
}
.hero .bahn { position: relative; }

.heroraster { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  /* 1.12 zu .88: bei gleich breiten Spalten brach «Sterile Prozesstechnik»
     mit Trennstrich um — die Zeile braucht gemessene 585 px. Die
     Bildspalte gewinnt trotzdem, weil das Teil jetzt in einer eigenen
     Fläche steht statt frei auf dem Hintergrund. */
  .heroraster { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
}
.herotext .eyebrow { margin-bottom: 18px; }

/* Kennzahlen als Leiste über die ganze Bahn, oben und unten eine Haarlinie,
   dazwischen feine Trenner. Früher stand jede Zahl mit eigenem Strich links
   in der Textspalte; das waren vier senkrechte Linien mehr auf einer Fläche,
   die mit der roten Linie unter dem Titel ihr Zeichen schon hat. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  margin-top: clamp(48px, 6vw, 88px);
  border-block: 1px solid var(--line-dark);
}
.hero .kennzahlen { margin-bottom: clamp(40px, 5vw, 72px); }
.kennzahl { padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 28px); }
.kennzahl:first-child { padding-left: 0; }
.kennzahl + .kennzahl { border-left: 1px solid var(--line-dark); }
.kennzahl b {
  display: block;
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  white-space: nowrap;
}
.kennzahl span {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dk-mute);
  line-height: 1.35;
}
/* Auf dem Telefon zwei Spalten; die Trenner wandern nach oben, sonst stünde
   in der zweiten Zeile ein Strich vor der ersten Zahl. */
@media (max-width: 719px) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl, .kennzahl:first-child { padding: 18px 16px 18px 0; }
  .kennzahl + .kennzahl { border-left: none; }
  .kennzahl:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}

/* ---------- Knöpfe ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.knopf {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--hell);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.knopf:hover { border-color: var(--dk-mute); color: #fff; }
.knopf.rot { background: var(--red); border-color: var(--red); color: #fff; }
/* Dunkler Knopf auf hellem Grund, wo Rot schon vergeben ist (Produktmenü).
   Eigene Klasse, nicht .dunkel — die färbt ganze Abschnitte schwarz. */
.knopf.tief { gap: 8px; background: var(--text); border-color: var(--text); color: #fff; }
.knopf.tief:hover { background: #000; border-color: #000; color: #fff; }
.knopf.tief .pfeilchen { color: inherit; transition: transform .2s ease; }
.knopf.tief:hover .pfeilchen { transform: translateX(3px); }
.knopf.rot:hover { background: var(--red-dunkel); border-color: var(--red-dunkel); color: #fff; }

/* ---------- Bewegung im Kopfbereich ---------- */
/* Die Teile steigen nacheinander auf, --i steht am Element. Danach zieht
   sich die rote Linie von links auf. Beides einmal beim Laden, nicht bei
   jedem Scrollen: der Kopfbereich ist das Erste, was man sieht.
   Kurze Verzögerungen mit Absicht — animation-fill-mode both hält ein
   Element bis zum Start auf Deckung null, und länger als eine halbe
   Sekunde soll niemand auf den Titel warten. */
@keyframes steigen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ziehen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.einzug { animation: steigen .8s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 90ms + 60ms) both; }
/* Die Hauptüberschrift steht sofort (19.10.2026). Chrome wertet Text, der
   beim Laden eine Animation hat, nicht als «grössten Inhalt» (LCP) — auch
   nicht mit 1 % Start oder nur gleitend (gemessen). Ohne gültigen LCP-Kandidaten
   zählte nur das Logo, und später neu gezeichneter Text (Infofeld des
   3D-Kopfs) setzte den LCP auf 17 s. Dachzeile, Einleitung und Knöpfe
   fahren weiter ein, die rote Linie zieht weiter auf. */
.einzug:has(> h1) { animation: none; }
.strich.zieht { transform-origin: left; animation: ziehen .7s cubic-bezier(.7, 0, .2, 1) .42s both; }

/* ---------- Das Bauteil im Kopfbereich ---------- */
.heroteil { position: relative; }
/* Das Teil steht in einer eigenen Fläche mit Haarlinie — wie ein Stück in
   der Vitrine, nicht wie ein Bild, das auf dem Hintergrund klebt. Die
   Fläche ist eine Spur heller als der Grund; das Video ist auf Schwarz
   gerechnet und wird über den Blendmodus «screen» eingerechnet, sein
   Schwarz nimmt damit genau diesen Ton an — ein sichtbarer Kasten um das
   Teil entsteht dabei nicht. */
.teilfeld {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--ink-2);
  overflow: hidden;
}
/* Ein weicher Schein hinter dem Teil. Kein Schlagschatten — den gibt das
   Design-System nicht her. */
.teilfeld::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 86%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(120, 140, 170, .2) 0%, transparent 66%);
  pointer-events: none;
}
.teilfeld .buehne { max-width: none; }
.teilname {
  position: relative;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dk-mute);
  text-align: center;
}
.teilname b { color: var(--red-bright); font-weight: 700; letter-spacing: 2px; }
.teilname span { color: var(--dk-mute); font-weight: 400; }
.teilname a { display: inline-flex; align-items: center; gap: 7px; color: var(--hell, #E7E9EC); }
.teilname a:hover { color: #fff; }
.teilname a:hover .pfeilchen { transform: translateX(3px); }
.pfeilchen {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--red-bright);
  transition: transform .2s ease;
}

/* ---------- Produktseite ---------- */
.produktkopf {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(44px, 6vw, 84px) clamp(30px, 4vw, 56px);
}
.produktraster { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .produktraster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.produktkopf .lead { color: var(--dk-mute); }
.produktkopf .strich { background: var(--red-bright); }
.produktkopf .eyebrow { color: var(--red-bright); }
.produktkopf h1 { font-size: clamp(30px, 4.2vw, 50px); }

/* Drei schlichte Karten ohne Bild — für Abschnitte, zu denen es kein
   ehrliches Foto gibt. Lieber kein Bild als ein beliebiges. */
.karten.drei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.karte.schlicht .kartentext { padding: 28px 28px 30px; }
/* Lange Einzelwörter wie «Grossflanschverbindung» haben keine Stelle, an
   der ein Umbruch von selbst passiert — sie liefen über den Kartenrand
   hinaus und wurden abgeschnitten. Silbentrennung statt kürzerer Namen:
   der nächste lange Produktname kommt bestimmt. */
.karte.schlicht h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}
.karte.schlicht .eyebrow { font-size: 12px; letter-spacing: 3px; margin-bottom: 12px; }
.karte.schlicht h3 { min-height: 0; }
/* In Viererreihen bleiben je Karte rund 250 px Satzbreite. 24 px Titel
   passten dort nicht: Edge trennt Deutsch ohne Woerterbuch nicht, und
   overflow-wrap brach Grossflanschverbindung ohne Strich mitten im Wort. */
.karten.vier .karte h3 { font-size: clamp(18px, 1.45vw, 20px); }
.karte.schlicht em { color: var(--faint); }
.karte.schlicht p { margin-top: 12px; }

/* ---------- Flanschzeilen ---------- */
.reihen { margin-top: 40px; display: grid; gap: 2px; }
.reihe {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: clamp(16px, 2.4vw, 32px);
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--line-dark);
}
.reihe:last-child { border-bottom: 1px solid var(--line-dark); }
.kurz {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--red-bright);
}
.reihe h4 { font-size: 18px; font-weight: 700; }
.reihe p { margin-top: 6px; font-size: 16px; font-weight: 400; color: var(--dk-mute); max-width: 62ch; }

/* Bildfeld auf hellem Grund — für freigestellte Bauteile, die auf Weiss
   gerendert sind. Das dunkle Bildfeld der Bereichskarten würde sie
   einrahmen wie ein Fenster. */
.bildfeld.hell { background: #fff; aspect-ratio: 4 / 3; }
/* Leeres Bildfeld: Platzhalter, bis die Karte ihr Bild hat. Es hält die
   Titel einer Reihe auf einer Linie — aber nur, solange alle drei Karten
   nebeneinander stehen. Brechen sie um, wäre es eine weisse Lücke über dem
   Text. Darum fragt die Regel die Breite der Reihe selbst ab, nicht die des
   Bildschirms: drei Spalten zu mindestens 290 px brauchen 870 px. */
.bildfeld.leer { background: transparent; }
.karten.drei { container-type: inline-size; }
@container (max-width: 869px) { .bildfeld.leer { display: none; } }
.bildfeld.hell img { object-fit: contain; }
/* Platzhalter: das Bild ist bestellt. Haarlinie und ein leiser Vermerk,
   keine Farbe — er soll die Gestaltung zeigen, nicht auffallen. */
.bildfeld.platzhalter { display: grid; place-items: center; border: 1px dashed var(--line); }
.bildfeld.platzhalter span { font-size: 13px; letter-spacing: .04em; color: var(--mute); }

/* Dichtungsreihen: das Kurzzeichen links, der Temperaturbereich als
   eigentliche Aussage gross daneben. Danach wird ausgewählt. */
.reihe.dicht { grid-template-columns: 128px 1fr; }
.reihe.dicht .kurz { font-size: 16px; letter-spacing: 0; color: var(--hell); }
.reihe.dicht h4 { font-size: 20px; letter-spacing: -.3px; color: var(--red-bright); }
.reihe.dicht p { margin-top: 4px; }

/* Merkmalliste auf hellem Grund — dieselbe Form wie auf Dunkel, nur mit
   den Tönen der hellen Fläche. */
.merkmale.hell li { color: var(--mute); }
.merkmale.hell li::after { background: var(--line); }
.merkmale.hell li::before { background: var(--red); }

/* ---------- Technische Daten ---------- */
.groessen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
}
.groessen span {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
}
.datenliste { margin-top: 34px; }
.datenliste > div {
  display: grid;
  gap: 4px clamp(16px, 3vw, 40px);
  padding: 15px 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) {
  .datenliste > div { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
}
.datenliste > div:last-child { border-bottom: 1px solid var(--line); }
.datenliste dt { font-size: 15px; font-weight: 700; }
.datenliste dd { font-size: 16px; font-weight: 400; color: var(--mute); }

/* Vier schlichte Karten nebeneinander — für die Antriebsvarianten. */
.karten.vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: 40px; }

/* ---------- Anfrage ---------- */
.anfrage { background: var(--paper); }
.anfrage .lead { max-width: 52ch; }
.wege { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.weg {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 700;
  transition: border-color .18s, color .18s;
}
.weg:hover { border-color: var(--red); color: var(--red); }
/* Der rote Knopf nach der allgemeinen Hover-Regel: stand er davor, färbte
   .weg:hover seine Schrift beim Überfahren rot — rot auf rot, unlesbar. */
.weg:first-child { background: var(--red); border-color: var(--red); color: #fff; }
/* Beim Überfahren dunkler, nicht heller: weiss auf #FF2436 hat nur 3.78:1
   (gemessen), auf #C4050F 6.22:1. #FF2436 ist im Brandkit das Rot für
   Akzente auf dunklem Grund, nicht für Flächen hinter weisser Schrift. */
.weg:first-child:hover { background: var(--red-dunkel); border-color: var(--red-dunkel); color: #fff; }

/* ---------- Anfrageformular ---------- */
/* Links Einleitung und direkter Weg, rechts das Formular. Vorher stand die
   rechte Hälfte des Blocks leer.
   Rot trägt hier nur der Absendeknopf. Telefon und Mail daneben sind
   deshalb schlichte Rahmen, nicht wie sonst der erste Weg rot gefüllt. */
.anfrageraster { display: grid; gap: clamp(36px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) {
  .anfrageraster { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.anfragetext .direkt { margin-top: 36px; font-size: 14px; font-weight: 700; color: var(--text); }
.anfragetext .wege { margin-top: 12px; }
.anfragetext .weg:first-child { background: none; border-color: var(--line); color: var(--text); }
.anfragetext .weg:first-child:hover { background: none; border-color: var(--text); color: var(--text); }
.anfragetext .weg:hover { border-color: var(--text); color: var(--text); }

.formular {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.felder { display: grid; gap: 18px 20px; }
@media (min-width: 600px) {
  .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feld.breit { grid-column: 1 / -1; }
}
.feld { display: flex; flex-direction: column; gap: 7px; }
.feld > span { font-size: 14px; font-weight: 700; color: var(--text); }
.feld abbr { color: var(--mute); font-size: inherit; vertical-align: baseline; text-decoration: none; cursor: help; }
/* Der Rand eines Eingabefelds muss sich mit 3:1 vom Grund abheben (WCAG
   1.4.11), sonst sieht man nicht, wo man tippen kann. --line käme auf Weiss
   nur auf 1.25:1. #868E99 ergibt 3.31:1. 16 px Schrift: darunter vergrössert
   Safari auf dem iPhone die Seite beim Antippen. */
.feld input, .feld select, .feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  background: var(--paper);
  border: 1px solid #868E99;
  border-radius: 6px;
  transition: border-color .18s ease;
}
.feld textarea { min-height: 136px; padding: 12px 14px; line-height: 24px; resize: vertical; }
.feld select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text) 50%),
    linear-gradient(135deg, var(--text) 50%, transparent 50%);
  background-position: calc(100% - 21px) 21px, calc(100% - 16px) 21px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.feld input::placeholder, .feld textarea::placeholder { color: var(--mute); opacity: 1; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--text); }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--text); outline: none; box-shadow: inset 0 0 0 1px var(--text); }
/* Erst nach dem ersten Versuch rot markieren, nicht schon beim Laden. */
.feld input:user-invalid, .feld textarea:user-invalid { border-color: var(--red-dunkel); }
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 22px;
  font-size: 15px;
  line-height: 22px;
  color: var(--mute);
  cursor: pointer;
}
.zustimmung input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--text); }
.absenden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 24px; }
.absenden .knopf { border: none; cursor: pointer; font: inherit; font-weight: 700; }
.absenden .knopf:disabled { opacity: .6; cursor: progress; }
.formstatus { font-size: 15px; color: var(--mute); }
.formstatus.fehler { color: var(--red-dunkel); font-weight: 700; }
/* Lockfeld: aus dem Bild geschoben statt display:none — manche Programme
   lassen unsichtbar gesetzte Felder bewusst leer. */
.lockfeld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Impressum und Datenschutz ---------- */
/* Überschrift links, Text rechts, Haarlinie dazwischen — wie ein Register.
   Text in --text auf Weiss, 16 px, Zeilen höchstens 68 Zeichen. */
.rechtskopf { padding-block: clamp(40px, 5vw, 72px) clamp(36px, 4.5vw, 60px); }
.rechtstext { background: var(--paper); }
.rechtsblock { display: grid; gap: 10px clamp(24px, 4vw, 64px); padding-block: 26px; border-top: 1px solid var(--line); }
.rechtsblock:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) {
  .rechtsblock { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.rechtsblock h2 { font-size: 17px; font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.rechtsblock p { max-width: 68ch; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--text); }
.rechtsblock p + p { margin-top: 12px; }
.rechtsblock a { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 3px; }
.rechtsblock a:hover { color: var(--red-dunkel); }
/* Verkaufsbedingungen vor der anwaltlichen Prüfung (19.10.2026): sichtbarer
   Vermerk im dunklen Kopf, damit der Entwurf nicht als gültig gelesen wird.
   Weg damit über recht.terms.entwurf = false in inhalt.json. */
.entwurfshinweis { display: inline-block; margin-top: 20px; padding: 6px 12px; border: 1px solid var(--red);
  border-radius: 3px; font-size: 14px; font-weight: 500; letter-spacing: .02em; color: #fff; }
.zustimmung a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.fuss .unten a { color: var(--dk-mute); }
.fuss .unten a:hover { color: #fff; }

/* ---------- Danke-Seite ---------- */
.dankekopf { min-height: calc(100vh - 68px - 220px); display: flex; align-items: center; }
.dankekopf .bahn { width: 100%; }
.dankekopf .knoepfe { margin-top: 36px; }
.dankehinweis { margin-top: 18px; max-width: 60ch; color: var(--dk-mute); }
.dankekopf .lead a, .dankehinweis a { color: var(--hell); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--red-bright); }
.dankekopf .lead a:hover, .dankehinweis a:hover { color: #fff; }
/* ---------- Datenblätter beim Produkt ---------- */
/* Früher ein Knopf im Anfrageblock am Seitenende — dort sucht niemand ein
   Datenblatt. Jetzt unter der Einleitung im Kopf oder unter der Überschrift
   des Abschnitts, zu dem es gehört. Öffnet im eigenen Reiter, kein
   download-Attribut (sonst lädt der Browser herunter statt anzuzeigen). */
.blaetter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.blattlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 18px 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--text);
  transition: border-color .2s ease;
}
.blattlink span { display: flex; flex-direction: column; line-height: 1.25; }
.blattlink b { font-size: 15px; font-weight: 700; }
.blattlink small { font-size: 13px; font-weight: 500; color: var(--mute); margin-top: 2px; }
.blattsymbol { width: 22px; height: 22px; flex: none; color: var(--red); }
.blattlink:hover, .blattlink:focus-visible { border-color: var(--text); }
.blaetter.aufdunkel .blattlink { background: transparent; border-color: var(--line-dark); color: #fff; }
.blaetter.aufdunkel .blattlink small { color: var(--dk-mute); }
.blaetter.aufdunkel .blattsymbol { color: var(--red-bright); }
.blaetter.aufdunkel .blattlink:hover, .blaetter.aufdunkel .blattlink:focus-visible { border-color: var(--dk-mute); }

/* Die Spalte, in der die scrollgeführte Bildfolge steht. min-width:0 ist
   nötig, weil Rasterspalten sonst nicht unter ihren Inhalt schrumpfen und
   die Seite auf schmalen Schirmen quer herausläuft. */
.teil { position: relative; min-width: 0; }

/* ---------- Der Videoplatz ---------- */
/* Das Video ist auf reines Schwarz gerechnet, nicht mit Transparenz: VP9 mit
   Alphakanal wog 770 KB, H.264 auf Schwarz 278 KB bei gleicher Bildzahl.
   Das Schwarz verschwindet über den Blendmodus «screen» — bei einem hellen
   Edelstahlteil auf fast schwarzem Grund ist das von echter Transparenz
   kaum zu unterscheiden.
   Die weiche Maske ist die Rückfallebene: greift das Blenden nicht, steht
   dort kein harter Kasten, sondern ein weich auslaufender dunkler Kreis. */
.buehne.film { position: relative; max-width: 620px; margin-inline: auto; aspect-ratio: 1; }
.buehne.film video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .buehne.film video { mix-blend-mode: normal; }
}

/* ---------- Bildfolgen ---------- */
/* Ein Stapel Bilder, von denen genau eines sichtbar ist. Das Seitenverhältnis
   steht als style am Element, damit beim Laden nichts springt. */
.buehne { position: relative; max-width: 620px; margin-inline: auto; }
.buehne img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}
.buehne img.an { opacity: 1; }
/* Hier stand eine Überblendung zwischen den Einzelbildern. Sie war die
   Ursache des Blinkens: zwei Bilder mit Transparenz übereinander, beide auf
   halber Deckung, ergeben zusammen 0.75 statt 1.0 — der dunkle Grund schien
   durch. Der Kopfbereich läuft jetzt als Video, die scrollgeführte Folge
   braucht keine Blende, weil der Besucher die Zeitachse in der Hand hat. */

/* ---------- Bereichskarten ---------- */
/* Die Karten stehen in einem Raster aus Haarlinien, wie eine technische
   Tabelle — kein Kasten je Karte, kein Schatten, kein roter Rand links.
   Der rote Linksrand kam aus den Folienkarten des Deck; auf der Website
   stand er neunmal nebeneinander, und Rot markiert je Fläche genau eine
   Sache. Das Erkennungszeichen ist die kurze Linie unter dem Titel.
   Rahmen: das Raster zieht oben und links, jede Zelle rechts und unten.
   So entsteht jede Linie genau einmal, egal wie viele Spalten passen. */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  margin-top: 56px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.karte {
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(20px, 2vw, 28px) clamp(20px, 2.1vw, 30px) clamp(24px, 2.3vw, 32px);
  display: flex;
  flex-direction: column;
}
.bildfeld { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); border-radius: 4px; }
.bildfeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.karte:hover .bildfeld img { transform: scale(1.04); }
.kartentext { padding-top: 24px; display: flex; flex-direction: column; flex: 1; }
.karte.schlicht .kartentext, .karte:not(:has(.bildfeld)) .kartentext { padding-top: 0; }

/* Die kurze Linie unter dem Kartentitel. Sie wächst beim Überfahren auf die
   Länge der Titellinie (64 px) und wird rot — auf der ganzen Fläche ist dann
   genau diese eine Linie rot.
   Auf der Startseite ist h3 ein Flex-Behälter, unten bündig, mit fester
   Mindesthöhe: ein- und zweizeilige Titel nebeneinander liessen die Linie
   sonst auf verschiedenen Höhen stehen. Der Titel steckt dafür in einem
   span, sonst zerfiele ein Titel mit ® in einzelne Flex-Stücke. */
.karte h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--text);
  transition: width .38s cubic-bezier(.7, 0, .2, 1), background .38s ease;
}
.karte:hover h3::after, .karte:focus-within h3::after { width: 64px; background: var(--red); }
/* Mindesthöhe für Marke plus eine Titelzeile. Vorher waren zwei Titelzeilen
   reserviert — unter einer Liste fiel das nicht auf, ohne sie klaffte bei
   acht von neun Karten eine Lücke unter dem Bild. Die eine Karte ohne Marke
   («Engineering und Referenzen») bricht auf zwei Zeilen und kommt damit auf
   fast dieselbe Höhe: 2 × 1.12 em gegen 1.12 em plus Markenzeile. */
.raster .karte h3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(1.12em + 42px);
}
/* «Zum Bereich» steht in jeder Reihe auf derselben Höhe, gleich wie lang
   der Satz darüber ist. */
.raster .kartenweg { margin-top: auto; padding-top: 16px; }
/* Im Raster der Startseite neun Karten nebeneinander: Marke und Pfeil in
   Grau, sonst stünden achtzehn rote Marken auf einer Fläche. Rot wird nur
   die Karte unter dem Zeiger — Linie und Pfeil. */
.raster .karte h3 small { color: var(--mute); }
.raster .kartenweg .pfeilchen { color: var(--mute); transition: transform .2s ease, color .2s ease; }
.raster .karte.verweis:hover .kartenweg .pfeilchen,
.raster .karte.verweis:focus-within .kartenweg .pfeilchen { color: var(--red); }
.karte h3 small {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--red);
  margin-bottom: 5px;
}
.karte p { font-size: 16px; font-weight: 400; color: var(--mute); margin-top: 14px; }
/* Neu im Portfolio (19.10.2026): weisser Grund zwischen grauem Raster und
   dunklem Band; «Neu» als kleine rote Zeile über der Marke. */
.neuheiten { background: var(--paper); }
/* Zwei Titelzeilen reserviert: «lean bottom system (LBS)» passt in eine,
   die beiden anderen brechen — sonst stünden die Linien nicht auf einer Höhe. */
.neuheiten .raster .karte h3 { min-height: calc(2 * 1.12em + 62px); }
.karte h3 .neumarke { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--red); }
/* margin-top:auto schiebt die Liste an den Fuss der Karte — damit steht der
   Trennstrich in einer Reihe auf gleicher Höhe, gleich wie lang der Text ist. */
.karte ul {
  list-style: none;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.karte li {
  font-size: 15px;
  font-weight: 500;
  color: var(--mute);
  padding: 3px 0 3px 14px;
  position: relative;
}
.karte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 5px;
  height: 1px;
  background: var(--faint);
}
.karte li.rest { color: var(--faint); font-weight: 400; }

/* Anklickbare Karte. Nur Bereiche mit eigener Seite bekommen sie — ein
   Verweis, der nirgendwohin führt, ist schlimmer als keiner. */
.karte.verweis > a { display: flex; flex-direction: column; height: 100%; }
.kartenweg {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}
.karte.verweis:hover .kartenweg .pfeilchen { transform: translateX(3px); }
.kartenweg .pfeilchen { color: var(--red); }

/* ---------- Zweispaltiger Abschnitt ---------- */
.bereich { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
@media (min-width: 860px) {
  .bereich { grid-template-columns: 1fr 1fr; }
}

/* Die roten Striche sahen bei gebrochener Bildschirmskalierung ungleich
   dick aus. Gemessen am 20.09.2026 mit --force-device-scale-factor:
   bei 1.25 schwankte die Farbmenge je Strich um 33 %, bei 1.75 um 25 %;
   bei 1, 1.5 und 2 war sie gleich.
   Ursache war die Trennlinie: 1 px mal 1.25 sind 1.25 Gerätepixel, der
   Browser malt aber ganze Zeilen. Der übrige Viertelpixel verschiebt den
   nächsten Eintrag, summiert sich über vier Einträge zu einem ganzen
   Pixel — und der 2 px hohe Strich (2.5 Gerätepixel) rundet dann mal auf
   zwei, mal auf drei Zeilen.
   Deshalb trägt die Linie nicht mehr zum Layout bei: sie liegt als
   ::after darüber. Jeder Eintrag ist damit genau 44 px hoch (10 + 24 + 10),
   ein zweizeiliger 68 px, und bei jeder Skalierung liegt jeder Eintrag
   gleich im Pixelraster. Zeilenhöhe fest in px, nicht 1.5 — 15 px mal 1.5
   wären 22.5 px und brächten denselben halben Pixel zurück. */
.merkmale { list-style: none; margin-top: 30px; }
/* Merkmale ohne Bild (19.10.2026): volle Breite, Liste zweispaltig. */
@media (min-width: 900px) {
  .bereich.ohnebild { grid-template-columns: minmax(0, 1fr); }
  .bereich.ohnebild .merkmale { columns: 2; column-gap: clamp(28px, 4vw, 64px); }
  .bereich.ohnebild .merkmale li { break-inside: avoid; }
}
.merkmale li {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--dk-mute);
  padding: 10px 0 10px 22px;
  position: relative;
}
.merkmale li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-dark);
}
.merkmale li:first-child::after { display: none; }
.merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 9px;
  height: 2px;
  background: var(--red-bright);
}

/* ---------- Fusszeile ---------- */
.fuss { background: var(--ink); color: var(--dk-mute); padding-block: 56px 36px; font-size: 15px; }
/* Schlusszeile: der Anspruch noch einmal gross, zweistufig wie jede
   Überschrift. Darunter eine Haarlinie und vier Spalten. */
.fussclaim {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.5px;
  color: #fff;
  padding-bottom: clamp(32px, 4vw, 48px);
  margin-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line-dark);
}
.fussclaim em { display: block; color: var(--dk-faint); }
.fuss .zeilen { display: grid; gap: 36px 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (min-width: 960px) {
  .fuss .zeilen { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.fuss img { height: 30px; width: auto; }
.fussmarke p { margin-top: 16px; max-width: 34ch; }
.fuss h4 { font-size: 14px; font-weight: 700; letter-spacing: 2.5px; color: #fff; margin-bottom: 14px; }
.fuss ul { list-style: none; display: grid; gap: 7px; }
.fuss .zeilen p + ul { margin-top: 12px; }
.fuss a { transition: color .18s ease; }
.fuss a:hover { color: #fff; }
.fuss .unten {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  color: var(--dk-mute);
  font-size: 14px;
}

/* ---------- Partnerseite ---------- */
.partnerkopf {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(52px, 7vw, 100px) clamp(40px, 5vw, 72px);
}
.partnerraster { display: grid; gap: 24px clamp(32px, 5vw, 72px); align-items: end; }
@media (min-width: 900px) {
  .partnerraster { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}
.partnerkopf .eyebrow { color: var(--red-bright); }
.partnerkopf .strich { background: var(--red-bright); }
.partnerkopf .lead { color: var(--dk-mute); margin-top: 0; }
.partnerkopf em { color: var(--dk-faint); }

.kartenfeld {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  border-block: 1px solid var(--line-dark);
}
.weltkarte { display: block; width: 100%; height: auto; overflow: visible; }
.weltkarte .gitter line { stroke: #1B1F25; stroke-width: 1; }
.weltkarte .gitter .aequator { stroke: var(--line-dark); stroke-dasharray: 3 5; }
/* Dunkler Rand um die Standorte: seit das Land heller ist (Rasterpunkte
   #6A7582), liefen weisse Punkte ohne Rand ins Raster hinein. */
/* Jeder Standort ist eine Gruppe: unsichtbare Trefferfläche und Punkt. */
.weltkarte .ort { cursor: pointer; outline: none; }
.weltkarte .treffer { fill: transparent; }
/* Der Hauptsitz liegt über allen anderen Punkten, damit er im dichten
   Europa-Haufen immer zu treffen ist. */
.weltkarte .hq .treffer { r: 16px; }
.weltkarte .punkt {
  fill: var(--hell);
  stroke: var(--ink);
  stroke-width: 2.5;
  paint-order: stroke;
  transition: fill .25s ease, r .25s cubic-bezier(.2, .7, .2, 1);
}
.weltkarte .ort:hover .punkt,
.weltkarte .ort:focus-visible .punkt,
.weltkarte .ort.offen .punkt { fill: #fff; r: 7px; }
/* Tastaturfokus sichtbar, auch am Hauptsitz. */
.weltkarte .ort:focus-visible .treffer { stroke: var(--hell); stroke-width: 1.5; stroke-dasharray: 3 3; }
.weltkarte .ort.aus { pointer-events: none; }
.weltkarte .ort.aus .punkt { fill: var(--line-dark); r: 3px; }

/* Fenster am Kartenpunkt: Inhalt der Kontaktkarte, dunkel auf der dunklen
   Kartenfläche. Kein Schlagschatten (Design-System) — abgesetzt durch Rand
   und die hellere Fläche ink-2. */
.kartenfenster.kontakt, .kartenfenster {
  position: absolute;
  z-index: 5;
  width: min(320px, calc(100% - 16px));
  padding: 20px 22px 22px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  color: #fff;
  animation: fenster .18s cubic-bezier(.2, .7, .2, 1);
}
.kartenfenster.unten { animation-name: fensterUnten; }
@keyframes fenster { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fensterUnten { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kartenfenster .laender { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; line-height: 1.5; text-transform: uppercase; color: var(--dk-mute); }
.kartenfenster.sitz .laender { color: var(--red-bright); }
.kartenfenster h3 { margin-top: 8px; font-size: 20px; letter-spacing: -.3px; }
.kartenfenster h3::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--hell); }
.kartenfenster.sitz h3::after { background: var(--red-bright); }
.kartenfenster .person { margin-top: 12px; font-size: 15px; font-weight: 700; }
.kartenfenster .person span { display: block; font-size: 14px; font-weight: 500; color: var(--dk-mute); }
.kartenfenster .ort { margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--dk-mute); }
.kartenfenster .wege { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-dark); }
/* Verweise klar als klickbar: hell, beim Überfahren unterstrichen. Mindesthöhe
   für den Finger. */
.kartenfenster .wege a {
  display: flex;
  align-items: center;
  min-height: 32px;
  font-size: 15px;
  font-weight: 500;
  color: var(--hell);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.kartenfenster .wege a:hover, .kartenfenster .wege a:focus-visible { color: #fff; text-decoration-color: var(--red-bright); }
.kartenfenster .wege small { margin-right: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--dk-mute); }
/* Der Hauptsitz ist der einzige rote Punkt. Der Ring pulsiert langsam —
   die einzige Dauerbewegung der Seite, und sie sitzt dort, wo man anfragt. */
.weltkarte .sitz { fill: var(--red-bright); }
.weltkarte .sitzring {
  fill: none;
  stroke: var(--red-bright);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: puls 2.6s ease-out infinite;
}
@keyframes puls { from { transform: scale(1); opacity: .8; } to { transform: scale(3.8); opacity: 0; } }
.weltkarte text {
  font-family: 'Maven Pro', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  fill: var(--hell);
  /* Dunkler Hof um die Schrift: über dem helleren Landraster gingen graue
     Ortsnamen unter (Mexiko-Stadt, Shanghai, Baku). */
  stroke: var(--ink);
  stroke-width: 4px;
  stroke-linejoin: round;
  paint-order: stroke;
}
.weltkarte .hauptort { fill: #fff; font-weight: 700; }
.weltkarte .schilder line { stroke: var(--dk-faint); stroke-width: 1; }
/* Auf dem Telefon ist die Karte rund 350 px breit; 14 px im viewBox würden
   zu 4 px Schrift. Dann lieber keine Beschriftung. */
/* Und die Punkte wachsen: 4.5 Einheiten im viewBox sind bei 360 px Breite
   gut 1 px. */
@media (max-width: 719px) {
  .weltkarte .schilder { display: none; }
  .weltkarte .punkt { r: 11px; }
  .weltkarte .ort:hover .punkt, .weltkarte .ort.offen .punkt { r: 15px; }
  .weltkarte .ort.aus .punkt { r: 7px; }
  .weltkarte .treffer { r: 30px; }
  .weltkarte .sitz, .weltkarte .sitzring { r: 14px; }
}

.partnerliste { background: var(--surface); }
.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(20px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
}
.reiter button {
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--mute);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 10px 0 14px;
  min-height: 44px;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.reiter button span { font-weight: 500; color: var(--faint); margin-left: 4px; }
.reiter button:hover { color: var(--text); }
.reiter button.an { color: var(--text); border-bottom-color: var(--red); }

.kontakte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin-top: 32px;
}
.kontakt {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(22px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease;
}
/* display:flex schlägt das hidden-Attribut des Browsers — ohne diese Regel
   blieben gefilterte Karten stehen. */
.kontakt[hidden] { display: none; }
.kontakt:hover { border-color: var(--faint); }
.kontakt .laender {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--mute);
}
.kontakt h3 { margin-top: 12px; font-size: 22px; letter-spacing: -.3px; }
.kontakt h3::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-top: 14px;
  border-radius: 2px;
  background: var(--text);
  transition: width .38s cubic-bezier(.7, 0, .2, 1), background .38s ease;
}
.kontakt:hover h3::after { width: 64px; background: var(--red); }
.kontakt .person { margin-top: 14px; font-size: 16px; font-weight: 700; }
.kontakt .person span { display: block; font-size: 15px; font-weight: 500; color: var(--mute); }
.kontakt .ort { margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--mute); }
.kontakt .wege {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding-top: 20px;
}
.kontakt .wege a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
  transition: color .2s ease;
}
.kontakt .wege a:hover { color: var(--red); }
.kontakt .wege small { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--faint); }
.kontakt .ort + .wege, .kontakt h3 + .ort { margin-top: 14px; }
/* Der Hauptsitz dunkel — die eine Karte, die immer stehen bleibt. */
.kontakt.sitz { background: var(--ink); border-color: var(--ink); color: #fff; }
.kontakt.sitz .laender { color: var(--red-bright); }
.kontakt.sitz h3::after { background: var(--red-bright); }
.kontakt.sitz .ort { color: var(--dk-mute); }
.kontakt.sitz .wege a { color: var(--hell); }
.kontakt.sitz .wege a:hover { color: #fff; }

/* ---------- Brotkrumen ---------- */
/* Auf der Schriftlinie ausgerichtet, nicht am oberen Rand: ein Eintrag mit
   ® stand sonst tiefer als seine Nachbarn (Meldung 06.10.2026). */
.krumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--dk-mute);
}
.krumen a { color: var(--dk-mute); transition: color .2s ease; }
.krumen a:hover { color: #fff; }
.krumen [aria-current] { color: var(--hell); }


/* ---------- Balkendiagramm ---------- */
/* Eine Messgrösse, waagrechte Balken, Wert direkt daneben. Balken in
   #4A525C (8.1:1 auf Weiss): neutral, kein Rot — ein guter Wert ist nie
   rot. Der Fall ohne Ergebnis schraffiert und in Worten benannt, nicht nur
   über die Farbe. Die Balken wachsen beim Erscheinen aus der Achse. */
.balken { margin-top: clamp(32px, 4vw, 48px); max-width: 920px; }
.balken figcaption { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 18px; }
.balkenzeile {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 12rem);
  align-items: center;
  gap: 16px;
  padding-block: 9px;
}
.bz-name { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.25; }
.bz-name small { display: block; font-size: 13px; font-weight: 500; color: var(--mute); }
.bz-spur {
  position: relative;
  height: 22px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%);
  border-left: 1px solid #868E99;
}
.bz-balken {
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: var(--w);
  background: #4A525C;
  border-radius: 0 4px 4px 0;
  transform-origin: left;
}
.balkenzeile.offen .bz-balken {
  background: repeating-linear-gradient(135deg, #868E99 0 2px, transparent 2px 7px);
  border: 1px solid #868E99;
  border-left: none;
}
.bz-wert { font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.balkenzeile.offen .bz-wert { font-weight: 500; color: var(--mute); font-size: 14px; line-height: 1.3; }
.balkenachse { position: relative; height: 22px; margin-left: calc(min(11rem, 100%) + 16px); margin-right: calc(12rem + 16px); }
.balkenachse span {
  position: absolute;
  left: var(--x);
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.balken.auf .bz-balken { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) calc(.2s + var(--j, 0) * 90ms); }
.balken.auf.da .bz-balken { transform: none; }
@media (max-width: 719px) {
  .balkenzeile { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .bz-spur { grid-column: 1 / -1; grid-row: 2; }
  .bz-wert { text-align: right; }
  .balkenzeile.offen .bz-wert { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  .balkenachse { margin-left: 0; margin-right: 0; }
}

/* ---------- Bildfolge (FEM-Plots) ---------- */
.folgenbild { aspect-ratio: 504 / 488; }
.folgenbild img { object-fit: contain; }

/* ---------- Kapitel ---------- */
/* Leiste unter dem Bereichskopf, läuft unter der Kopfzeile mit (68 px).
   Grau 5.15:1 auf Weiss, das aktuelle Kapitel schwarz mit roter Linie —
   die eine rote Marke dieser Fläche. Kein Weichzeichner im Hintergrund:
   der kostet beim Scrollen Rechenzeit auf langen Seiten. */
.kapitel {
  position: sticky;
  top: 68px;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.kapitel ol {
  display: flex;
  gap: 0 clamp(20px, 2.4vw, 34px);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.kapitel ol::-webkit-scrollbar { display: none; }
/* Läuft die Leiste über, blendet sie rechts aus — sonst endet sie mitten
   in einem Wort und niemand ahnt, dass es weitergeht. */
.kapitel ol.voll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.kapitel ol.voll.ende { -webkit-mask-image: none; mask-image: none; }
.kapitel li { flex: none; }
.kapitel a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 0 13px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mute);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.kapitel a b { font-size: 12px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.kapitel a:hover { color: var(--text); }
.kapitel a.an { color: var(--text); border-bottom-color: var(--red); }
/* Sprungziel unter Kopfzeile (68) und Leiste (52) plus Luft. */
[data-kapitel] { scroll-margin-top: 132px; }

/* Kapitelnummer über dem Abschnittstitel, «04 · fundafom®». */
.kapitelzeile { display: flex; align-items: baseline; gap: 10px; }
.kapitelzeile .nr { font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.kapitelzeile i { font-style: normal; }
.kapitelzeile .marke { letter-spacing: 2.5px; text-transform: none; }

/* ---------- Bereichsseite ---------- */
.bereichskopf {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(44px, 6vw, 88px) clamp(52px, 7vw, 104px);
}
.bereichskopf .hintergrund {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Vorher .5 hinter einem Schleier, der rechts noch .45 deckte: vom Bild
     kamen rechnerisch 27 % an, und die neun Bereichsköpfe standen als
     schwarze Bänder da (gemessen 20.09.2026 am Bildschirmfoto). Jetzt
     deutlich mehr Bild, dafür ein Schleier, der über der Textspalte fest
     deckt und erst rechts aufmacht. */
  opacity: .78;
}
.bereichskopf .schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 12%, rgba(10, 11, 13, .86) 40%, rgba(10, 11, 13, .58) 70%, rgba(10, 11, 13, .45) 100%),
    linear-gradient(0deg, rgba(10, 11, 13, .96) 0%, rgba(10, 11, 13, .22) 32%, transparent 52%);
}
/* Helle Aufnahmen (Produktfoto auf Weiss) brauchen mehr Abdunklung, sonst
   steht die weisse Schrift auf hellem Grund. */
.bereichskopf .schleier.stark { background: linear-gradient(90deg, var(--ink) 30%, rgba(10, 11, 13, .86) 100%); }
.bereichskopf .bahn { position: relative; }
.bereichsraster { display: grid; gap: 36px clamp(32px, 5vw, 80px); align-items: end; }
@media (min-width: 960px) {
  .bereichsraster { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.bereichskopf .eyebrow { color: var(--red-bright); }
.bereichskopf .strich { background: var(--red-bright); }
.bereichskopf .lead { color: var(--dk-mute); }
.bereichskopf em { color: var(--dk-faint); }
.kopfpunkte { margin-top: 0; }
.kopfpunkte li { color: var(--hell); }

/* Zwei, drei oder vier Karten je Reihe, nach Anzahl der Einträge. */
.karten.zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }  /* auto-fit: keine leere dritte Spalte (07.10.2026) */

/* Unterzeile einer Karte: ordnet ein, ist aber keine Marke. Grau statt rot —
   Rot markiert je Fläche genau eine Sache, und in einer Viererreihe standen
   sonst vier rote Zeilen. */
.karte h3 small.unter { color: var(--mute); letter-spacing: .5px; font-weight: 700; }
/* Reihe aus lauter Hochformaten (Rührwerke): hohes Bildfeld, sonst stehen
   die schlanken Maschinen winzig in einem Querformat. */
.karten.hoch .bildfeld { aspect-ratio: 4 / 5; }

/* Hinweis unter einem Abschnitt: grauer Kasten, Eyebrow und ein Satz. */
.hinweis {
  margin-top: 28px;
  padding: 22px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px 28px;
}
@media (min-width: 720px) { .hinweis { grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; } }
.grund .hinweis { background: var(--paper); }
.abschnitt:not(.grund) .hinweis { background: var(--surface); }
.hinweis .eyebrow { font-size: 12px; letter-spacing: 3px; }
.hinweis p:last-child { font-size: 16px; color: var(--mute); }

/* Produktprogramm: Spalten mit Listen, getrennt durch Haarlinien oben. */
.programm { display: grid; gap: 8px clamp(24px, 3vw, 44px); margin-top: 48px; }
.programm.zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.programm.drei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.programm.vier { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.spalte { border-top: 2px solid var(--text); padding-top: 18px; }
.spalte h3 { font-size: clamp(18px, 1.5vw, 21px); }
.spalte .merkmale { margin-top: 12px; }
/* Kleinere Schrift, aber dieselbe Zeilenhöhe: 15 px mal 1.5 wären 22.5 px
   und damit eine halbe Pixelzeile je Eintrag — genau das, was die Striche
   ungleich dick macht. */
.spalte .merkmale li { font-size: 15px; line-height: 24px; }

/* Merkmale neben einem Bild */
.seitenbild .bildfeld { aspect-ratio: 4 / 3; }
.dunkel .seitenbild .bildfeld { background: var(--ink-2); }

/* Detail: grosses Bild mit Erklärung links, rechts drei Punkte. */
.detail { display: grid; gap: 28px clamp(28px, 4vw, 64px); margin-top: 48px; align-items: start; }
@media (min-width: 900px) { .detail { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.detail figure .bildfeld { aspect-ratio: 4 / 3; }
.detail figcaption { display: flex; flex-direction: column; margin-top: 18px; }
.detail figcaption small, .punkt h3 small {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--mute);
}
.detail figcaption b { font-size: 21px; margin-top: 4px; }
.detail figcaption span { font-size: 16px; font-weight: 400; color: var(--mute); margin-top: 8px; max-width: 58ch; }
.detailpunkte { display: grid; }
.punkt { padding: 22px 0; border-top: 1px solid var(--line); }
.punkt:last-child { border-bottom: 1px solid var(--line); }
.punkt h3 { display: flex; flex-direction: column; font-size: 19px; }
.punkt h3 small { margin-bottom: 4px; }
.punkt p { margin-top: 8px; font-size: 16px; font-weight: 400; color: var(--mute); }
/* Mit Bildern: zwei mal zwei statt Liste */
.detailpunkte.mitbild { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.detailpunkte.mitbild .punkt { border: none; padding: 0; }
.detailpunkte.mitbild .bildfeld { aspect-ratio: 4 / 3; margin-bottom: 12px; }

/* Vergleich */
.vergleich .bildfeld { aspect-ratio: 4 / 3; }
.wert { display: flex; align-items: baseline; gap: 8px; margin-top: 0 !important; }
.wert b { font-size: clamp(40px, 4.4vw, 60px); font-weight: 700; letter-spacing: -1.5px; line-height: 1; color: var(--text); }
.wert span { font-size: 15px; font-weight: 500; color: var(--mute); }
.karte.bezug .wert b { color: var(--faint); }
.vergleich h3 { margin-top: 14px; }

/* Baugrössentabelle: auf dem Telefon waagrecht scrollbar, nie die Seite. */
.tabellenfeld { margin-top: 40px; overflow-x: auto; border-top: 2px solid var(--text); }
/* Mindestbreite steht am Element, 105 px je Spalte: die zweispaltige
   Druckstufentabelle war mit festen 860 px auf dem Telefon nur quer
   scrollend lesbar. */
.baugroessen { width: 100%; border-collapse: collapse; font-size: 15px; }
.baugroessen th, .baugroessen td { padding: 13px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.baugroessen th:first-child, .baugroessen td:first-child { text-align: left; padding-left: 0; }
.baugroessen thead th { font-size: 13px; font-weight: 700; color: var(--text); vertical-align: bottom; white-space: normal; }
.baugroessen thead small { display: block; font-weight: 500; color: var(--faint); margin-top: 2px; }
.baugroessen tbody th { font-weight: 700; }
.baugroessen td { font-weight: 400; color: var(--mute); font-variant-numeric: tabular-nums; }
.baugroessen tbody tr:hover td, .baugroessen tbody tr:hover th { background: var(--surface); }
/* Die erste Spalte bleibt beim Querscrollen stehen. Ohne sie weiss man auf
   dem Telefon nach zwei Spalten nicht mehr, zu welcher Baugrösse ein Wert
   gehört. Sie braucht einen eigenen Grund, sonst scheinen die Werte
   darunter durch, und eine Haarlinie als Kante zum scrollenden Teil. */
.baugroessen th:first-child, .baugroessen td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding-right: 16px;
}
.baugroessen tbody tr:hover th:first-child, .baugroessen tbody tr:hover td:first-child { background: var(--surface); }
.abschnitt.grund .baugroessen th:first-child, .abschnitt.grund .baugroessen td:first-child { background: var(--surface); }
.abschnitt.grund .baugroessen tbody tr:hover th:first-child { background: var(--paper); }

/* Produktkopf ohne Bild: eine Spalte, Satzbreite begrenzt. */
@media (min-width: 900px) {
  .produktraster.ohnebild { grid-template-columns: minmax(0, 820px); }
}

/* ---------- Kopfbild ohne Video ---------- */
.kopfbild { position: relative; max-width: 620px; margin-inline: auto; }
.kopfbild img {
  width: 100%;
  height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 100%);
}
/* Freigestelltes Render: keine Maske, ganz sichtbar, Höhe begrenzt —
   ein stehendes Rührwerk wäre bei voller Spaltenbreite höher als der Kopf. */
.kopfbild.frei img {
  -webkit-mask-image: none;
  mask-image: none;
  width: auto;
  max-width: 100%;
  max-height: min(600px, 72vh);
  margin-inline: auto;
  display: block;
}
/* Telefon: Bild steht unter dem Text, 600 px wären fast ein ganzer Bildschirm */
@media (max-width: 899px) { .kopfbild.frei img { max-height: min(420px, 55vh); } }

/* ---------- Auftauchen beim Scrollen ---------- */
/* 22 px Weg, weich abgebremst. In Reihen gestaffelt: --i ist die Spalte,
   jede Spalte 80 ms später. Die rote Linie unter einem Titel zieht sich
   auf, sobald ihr Block im Bild ist.
   Die Verzögerung gilt nur für Deckung und Lage; sonst hinge sie auch am
   Überfahren und die Karte reagierte träge. */
/* Weg und Dauer stehen als eigene Werte, damit ein Block sie nach seinem
   Gewicht setzen kann. Ein grosses Foto braucht mehr Weg, um überhaupt als
   Bewegung gelesen zu werden; eine Reihe kurzer Kennzahlen zappelt bei
   demselben Weg gegeneinander, weil er im Verhältnis zur Zeichenhöhe zu
   gross ist. --j staffelt zusätzlich nach Zeile, gedeckelt bei drei — sonst
   wartet die zehnte Tabellenzeile, die ohnehin erst später ins Bild kommt. */
.auf {
  --auf-weg: 22px;
  --auf-dauer: .6s;
  opacity: 0;
  transform: translateY(var(--auf-weg));
  transition:
    opacity var(--auf-dauer) cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 80ms + min(var(--j, 0), 3) * 40ms),
    transform var(--auf-dauer) cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 80ms + min(var(--j, 0), 3) * 40ms),
    border-color .2s ease;
}
.auf.da { opacity: 1; transform: none; }
/* Grosse Flächen brauchen mehr Weg, sonst wirkt die Bewegung an ihrem Rand
   wie ein Zittern statt wie ein Auftauchen. Die zusätzliche Zeit hält die
   Geschwindigkeit nahe an der Grundform. */
.auf.gross { --auf-weg: 34px; --auf-dauer: .75s; }
/* Die Linie hängt proportional an der Dauer des Blocks: eine kurze Zeile
   soll ihre Linie nicht erst nach einer festen Viertelsekunde bekommen. */
.auf .strich {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform calc(var(--auf-dauer, .6s) * .8) cubic-bezier(.7, 0, .2, 1)
    calc(var(--auf-dauer, .6s) * .35);
}
.auf.da .strich { transform: scaleX(1); }

/* Hier stand eine stehende Überschrift (position: sticky) neben einem
   weiterlaufenden Abschnitt. Wieder entfernt: unsere Abschnitte passen
   nicht dazu. Das Programm hat drei bis vier eigene Spalten, die in der
   schmaleren Hälfte auf 200 px zusammenfielen; die Baugrössentabelle
   braucht bei zehn Spalten 1050 px und müsste dort quer scrollen, obwohl
   sie heute ganz ins Bild passt; die Begriffslisten sind mit fünf Zeilen
   zu kurz, um überhaupt an etwas vorbeizuscrollen. */

/* ---------- Zeiger und Tastatur ---------- */
.karte { transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.karte:hover, .karte:focus-within { transform: translateY(-3px); }
/* Fokusring für die Tastatur. Bisher gab es keinen: Verweise und Knöpfe
   wechselten beim Fokus nur die Farbe, dieselbe Änderung wie beim
   Überfahren — wer ohne Maus bedient, sah kaum, wo er steht.
   --red-bright ist die einzige der beiden Rottöne, die auf jedem hier
   vorkommenden Grund über 3:1 bleibt (WCAG 1.4.11): auf Weiss 3.78:1, auf
   --ink 5.21:1, auf --line-dark 3.52:1. Das normale Rot fällt auf
   --line-dark auf 2.73:1 und bestünde dort nicht.
   :where() hält die Spezifität bei null, damit die Regel bestehende
   Farbwechsel ergänzt statt mit ihnen um Vorrang zu streiten. */
:where(a, button, .knopf, .weg, .blattlink, [tabindex]):focus-visible {
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Kennzahlen, die beim Erscheinen hochzählen: feste Ziffernbreite, sonst
   ändert die Zahl beim Zählen laufend ihre Breite und der Text daneben
   ruckt mit. */
.zaehler { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kapitel ol { scroll-behavior: auto; }
  .balken.auf .bz-balken { transform: none; transition: none; }
  .auf, .auf .strich { opacity: 1; transform: none; transition: none; }
  .einzug, .strich.zieht, .weltkarte .sitzring { animation: none; }
  .karte:hover .bildfeld img { transform: none; }
  .karte:hover, .karte:focus-within { transform: none; }
}

/* Marken mit Bindestrich nicht umbrechen (bau.mjs marke). Eigenes Element
   statt span: «.blattlink span» und andere Regeln für alle Spans darunter
   hätten es erfasst (® rutschte in eine eigene Zeile). */
nw-marke { white-space: nowrap; }

/* Kartenreihen bündig (bereichsteile.mjs karten, 07.10.2026): Bild, Titel,
   Text und «Zum Produkt» stehen in jeder Reihe auf gleicher Höhe. Jede Karte
   belegt vier Zeilen des Rasters und übernimmt sie (subgrid); ein
   zweizeiliger Titel macht damit die Titelzeile der ganzen Reihe höher,
   statt nur seine Karte zu verschieben. Der Titelblock steht unten bündig:
   so liegen Strich und Text auf einer Linie (vorher Höhenversatz auf der
   Schlauchseite, Meldung 07.10.2026). */
.karten.buendig > .karte { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
.karten.buendig > .karte.verweis > a { display: grid; grid-template-rows: subgrid; grid-row: span 4; height: auto; }
.karten.buendig .kartentext { display: contents; }
.karten.buendig .bildfeld { grid-row: 1; }
.karten.buendig .karte h3 { grid-row: 2; display: flex; flex-direction: column; justify-content: flex-end; }
.karten.buendig .karte:has(.bildfeld) h3 { margin-top: 24px; }
.karten.buendig .karte p:not(.kartenweg) { grid-row: 3; }
.karten.buendig .kartenweg { grid-row: 4; align-self: end; }

/* Standbilder statt 3D-Animation (08.10.2026, bau.mjs videoplatz und
   prinzipAbschnitt). Freigestelltes Render mit Transparenz direkt auf der
   dunklen Fläche — kein Blendmodus nötig wie beim Video. */
.buehne.film.standbild img { position: static; width: 100%; height: 100%; object-fit: contain; opacity: 1; display: block; }
.standbildteil img { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }

/* ---------- 3D-Kopf «Ausstellungsraum» (Startseite) ----------
   Ein Produkt steht gross auf einer Lichtinsel, die übrigen kreisen auf
   einem Ring dahinter (seite/js/hero3d.js). Die Leinwand nimmt Klicks an;
   der Text darüber bleibt bedienbar, die leeren Flächen der Bahn nicht. */
.hero3d { min-height: min(100svh, 980px); justify-content: space-between; isolation: isolate; }
.h3d-buehne { position: absolute; inset: 0; z-index: 0; }
.h3d-buehne canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important;
  opacity: 0; transition: opacity 1.4s ease; touch-action: pan-y; }
.h3d-buehne.bereit canvas { opacity: 1; }
.h3d-buehne.zeigt canvas { cursor: pointer; }
.h3d-buehne.zieht canvas { cursor: grabbing; }
/* Rückfallbild: ein Bild der Szene selbst (werkzeug/hero3d-standbild.mjs),
   deckt die Bühne wie die Leinwand; Handy bekommt die hochkant gerechnete
   Fassung (picture). Die Szene blendet darüber ein. */
/* Desktop: Das Bild ist 1532 : 1072 (= 0,28 : 0,4, die beiden Grenzen der
   Teilgrösse in hero3d.js). «contain» in einem Feld Breite × min(Höhe,
   Fensterhöhe) skaliert es genau wie die Szene das Teil; object-position
   66,5 % 43 % legt den Punkt des Teils auf dieselbe Stelle wie die Szene
   (bx = 0,665 w, by = 0,43 vh). Durchsichtiger Grund, darum keine Kante. */
.h3d-ersatz { pointer-events: none; transition: opacity 1s ease; }
.h3d-ersatz-desktop { position: absolute; left: 0; top: 0; width: 100%; height: min(100%, 100svh);
  object-fit: contain; object-position: 66.5% 43%; }
/* Handy: unten am Raster verankert wie Teil und Infofeld in hero3d.js;
   Höhe = der Abstand unter dem Text (gleicher clamp wie .h3d-raster). */
.h3d-ersatz-handy { display: none; position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  height: clamp(460px, 62vh, 620px); object-fit: cover; object-position: 50% 100%; }
.hero3d.lebt .h3d-ersatz-handy { opacity: 0; }
@media (max-width: 899px) { .h3d-ersatz-desktop { display: none; } .h3d-ersatz-handy { display: block; } }
.h3d-buehne.bereit .h3d-ersatz { opacity: 0; }
.h3d-schleier { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 6%, rgba(10, 11, 13, .78) 30%, rgba(10, 11, 13, .1) 54%, transparent 64%),
    linear-gradient(0deg, var(--ink) 0%, transparent 22%),
    linear-gradient(180deg, rgba(10, 11, 13, .7) 0%, transparent 18%); }
.hero3d .bahn { z-index: 2; pointer-events: none; }
.hero3d .herotext, .hero3d .kennzahlen { pointer-events: auto; }
.h3d-raster { position: relative; display: grid; align-items: center; min-height: clamp(440px, 64svh, 700px); }
.hero3d .herotext { max-width: 620px; }

/* Infofeld zum Produkt vorne: flache Leiste unter der Lichtinsel. Links
   Marke, Name, Satz; rechts Zähler, Pfeile, Verweis. Ohne Szene unsichtbar. */
.h3d-panel {
  position: absolute; z-index: 3; width: min(600px, calc(100vw - 2 * var(--rand)));
  left: clamp(var(--rand), calc(var(--panel-links, 66%) - 300px), calc(100vw - var(--rand) - 600px));
  top: var(--panel-oben, 60%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center;
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--line-dark); border-radius: 8px;
  background: linear-gradient(160deg, rgba(28, 32, 38, .74), rgba(14, 16, 20, .66));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transform: translateY(12px); transition: opacity .8s ease, transform .8s ease;
}
.hero3d.lebt .h3d-panel { opacity: 1; transform: none; }
.hero3d:not(.lebt) .h3d-panel { visibility: hidden; }
.h3d-panel > * { transition: opacity .35s ease, transform .35s ease; }
.h3d-panel.wechsel .h3p-text { opacity: 0; transform: translateY(4px); }
.h3p-text { min-width: 0; }
.h3p-marke { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 2.5px; color: var(--dk-mute); }
.h3p-name { display: flex; align-items: center; gap: 12px; margin-top: 3px; font-size: 19px; font-weight: 700; line-height: 1.25; color: #fff; letter-spacing: -.2px; }
.h3p-name::after { content: ""; flex: none; width: 22px; height: 3px; border-radius: 2px; background: var(--red-bright); }
/* Der Satz läuft über zwei Zeilen statt abgeschnitten (Meldung 12.10.2026) */
/* Immer zwei Zeilen hoch, auch bei kurzem Satz — sonst sprang das Feld samt
   Pfeilen beim Wechsel (Meldung 12.10.2026) */
.h3p-satz { margin-top: 4px; font-size: 14px; line-height: 1.45; min-height: 2.9em; color: var(--dk-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h3p-seite { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.h3p-zeile { display: flex; align-items: center; gap: 10px; }
.h3p-zaehler { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; color: var(--dk-mute); font-variant-numeric: tabular-nums; }
.h3p-zaehler b { color: #fff; }
.h3p-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; }
.h3p-link .pfeilchen { color: var(--red-bright); transition: transform .2s ease; }
.h3p-link:hover .pfeilchen, .h3p-link:focus-visible .pfeilchen { transform: translateX(3px); }
.h3p-nav { display: flex; gap: 6px; }
.h3p-nav button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-dark); background: transparent; color: var(--hell); cursor: pointer;
  transition: border-color .2s ease, background .2s ease; }
.h3p-nav button:hover, .h3p-nav button:focus-visible { border-color: var(--dk-mute); background: rgba(255, 255, 255, .06); }
.h3p-zurueck .pfeilchen { transform: scaleX(-1); }
.h3p-weiter .pfeilchen { transform: none; }

/* Namensschild beim Überfahren eines Teils im Ring */
.h3d-etikett { position: absolute; z-index: 3; left: 0; top: 0; pointer-events: none;
  padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line-dark);
  background: rgba(14, 16, 20, .82); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
  opacity: 0; transform: translate(var(--ex, 0), var(--ey, 0)); transition: opacity .2s ease; }
.h3d-etikett.an { opacity: 1; }
.h3d-etikett small { display: block; font-size: 11px; letter-spacing: 2px; color: var(--dk-mute); font-weight: 700; }

@media (max-width: 899px) {
  .h3d-schleier { background: linear-gradient(180deg, var(--ink) 16%, rgba(10, 11, 13, .55) 40%, transparent 54%, transparent 88%, var(--ink) 100%); }
  /* Platz unter dem Text für Teil und Infofeld: feste Spanne statt 58vh,
     damit hohe Fenster die Bühne nicht aufblähen; hero3d.js verankert Teil
     und Infofeld am unteren Ende dieses Rasters. */
  .h3d-raster { align-items: start; min-height: 0; padding-bottom: clamp(460px, 62vh, 620px); }
  .h3d-panel { left: var(--rand); right: var(--rand); width: auto; padding: 12px 14px 10px; column-gap: 12px; row-gap: 8px; }
  .h3p-satz { font-size: 13px; margin-top: 2px; }
  .h3p-name { font-size: 16px; }
  .h3p-name::after { display: none; }
  /* Zwei Zeilen: oben Marke, Name und Satz über die ganze Breite; unten
     links «Zum Produkt», rechts Zähler mit Pfeilen (12.10.2026: der Satz
     war auf dem Handy versteckt, danach in der halben Breite abgeschnitten) */
  .h3p-seite { display: contents; }
  .h3p-text { grid-column: 1 / -1; grid-row: 1; padding-bottom: 8px; border-bottom: 1px solid var(--line-dark); }
  .h3p-zeile { grid-column: 2; grid-row: 2; justify-self: end; }
  .h3p-link { grid-column: 1; grid-row: 2; justify-self: start; align-self: center; font-size: 13.5px; }
}

/* Bildreihe im Datenabschnitt (bereichsteile.daten, «bilder») */
.datenbilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 34px; }
.datenbilder figure { margin: 0; }
.datenbilder figcaption { margin-top: 12px; font-size: 14px; color: var(--mute); }
@media (max-width: 720px) { .datenbilder { grid-template-columns: 1fr; } }

/* Bereichsraster der Startseite: Seit bio-smart® weg ist (09.10.2026), sind
   es acht Kacheln. Bei drei Spalten bliebe rechts unten ein leeres Feld.
   Ab 1104 px (Inhalt ≥ 3 × 330 px) läuft das Raster auf sechs Teilspalten;
   eine letzte Reihe mit genau zwei Kacheln teilt sich die volle Breite. Das
   Bild wird dort breiter statt höher; wegen der festen Innenabstände ergibt
   gleiche Höhe gemessen 64 : 25 statt 16 : 10 (1440 px: 198 px). */
@media (min-width: 1104px) {
  .karten.raster { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .karten.raster > .karte { grid-column: span 2; }
  .karten.raster > .karte:nth-child(3n+1):nth-last-child(2),
  .karten.raster > .karte:nth-child(3n+2):nth-last-child(1) { grid-column: span 3; }
  .karten.raster > .karte:nth-child(3n+1):nth-last-child(2) .bildfeld,
  .karten.raster > .karte:nth-child(3n+2):nth-last-child(1) .bildfeld { aspect-ratio: 64 / 25; }
}

/* Fortschritt bis zum nächsten Wechsel im Infofeld: die rote Linie der Marke
   füllt sich von links (hero3d.js setzt --fortschritt je Bild). */
.h3d-panel { overflow: hidden; }
.h3d-panel::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: calc(100% * var(--fortschritt, 0)); background: var(--red); opacity: .9; }

/* ---------- Feinschliff (09.10.2026) ----------
   Kleine Bewegungen, die Bedienbarkeit zeigen, ohne zu blinken: Knöpfe heben
   sich beim Überfahren, Karten und Datenblätter bekommen Tiefe, die Seite
   erscheint weich statt hart. Bei «Bewegung reduzieren» entfällt alles. */
.knopf { transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .25s ease; }
.knopf.rot:hover, .knopf.rot:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 26px -10px rgba(227, 6, 19, .55); }
.knopf:not(.rot):hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(0); transition-duration: .08s; }
.karte { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.karte:hover, .karte:focus-within { box-shadow: 0 22px 44px -28px rgba(16, 18, 22, .45); }
.blattlink { transition: border-color .18s ease, transform .2s ease, box-shadow .25s ease; }
.blattlink:hover, .blattlink:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 24px -18px rgba(16, 18, 22, .4); }
/* Die rote Linie der Marke zieht sich beim Erscheinen auch unter h2 der
   Abschnitte (bisher nur Kopfbereiche): .auf .strich ist schon gesetzt. */
/* Kein Einblenden von main mehr (19.10.2026). Es liess den ganzen Inhalt
   beim ersten Zeichnen durchsichtig, und Chrome wertet solchen Inhalt nicht
   als «grössten Inhalt» (LCP) — auch nicht bei 1 % Start (gemessen). Gewertet
   wurde nur das Logo in der Kopfzeile, später dann irgendetwas, das neu
   gezeichnet wurde (Standbild beim Ausblenden, Infotext des 3D-Kopfs) —
   LCP 9–17 s statt 0,9 s. Die Einfahr-Animationen der Kopfbereiche bleiben. */
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
  .knopf, .karte, .blattlink { transition: none; transform: none !important; }
}

/* Aufnahme des Rückfallbilds (?standbild): nur die Szene bleibt sichtbar */
body.h3d-standbild .kopf, body.h3d-standbild .h3d-schleier, body.h3d-standbild .hero3d .bahn,
body.h3d-standbild .h3d-panel, body.h3d-standbild .h3d-etikett, body.h3d-standbild .kennzahlen { visibility: hidden; }
body.h3d-standbild, body.h3d-standbild .hero3d, body.h3d-standbild .h3d-buehne { background: transparent; }
body.h3d-standbild .h3d-ersatz { display: none; }

/* ---------- Lange Seiten (09.10.2026) ---------- */
/* Lesefortschritt: seit 09.10.2026 an der Kopfzeile (.kopf::after), damit
   er auf jeder Seite da ist, nicht nur auf Seiten mit Kapitelleiste. */
/* «Nach oben»: runder dunkler Knopf unten rechts, erscheint nach einer
   Bildschirmhöhe. Der Pfeil zeigt nach oben (gedreht). */
.nachoben { position: fixed; right: clamp(16px, 3vw, 36px); bottom: clamp(16px, 3vw, 36px); z-index: 40;
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-dark); background: rgba(14, 16, 20, .9); color: var(--hell); cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, border-color .2s ease, background .2s ease; }
.nachoben .pfeilchen { transform: rotate(-90deg); color: inherit; transition: color .2s ease; }
.nachoben.da { opacity: 1; transform: none; pointer-events: auto; }
.nachoben:hover, .nachoben:focus-visible { border-color: var(--dk-mute); background: var(--ink-2); }
.nachoben:hover .pfeilchen { color: var(--red-bright); }
/* Kopfpunkte der Bereichsseite steigen nacheinander auf, nicht als Block */
.kopfpunkte.einzug { animation: none; }
.kopfpunkte.einzug li { animation: steigen .7s cubic-bezier(.2, .7, .2, 1) calc(var(--j, 0) * 70ms + 300ms) both; }
.kopfpunkte.einzug li:nth-child(1) { --j: 0; } .kopfpunkte.einzug li:nth-child(2) { --j: 1; } .kopfpunkte.einzug li:nth-child(3) { --j: 2; }
.kopfpunkte.einzug li:nth-child(4) { --j: 3; } .kopfpunkte.einzug li:nth-child(5) { --j: 4; } .kopfpunkte.einzug li:nth-child(6) { --j: 5; }
.kopfpunkte.einzug li:nth-child(n+7) { --j: 6; }
@media (prefers-reduced-motion: reduce) { .kopfpunkte.einzug li { animation: none; } .nachoben { transition: none; } }

/* ---------- Kopfzeile: Fortschritt, Verdichten, roter Knopf (09.10.2026) ---------- */
/* Rote Linie am unteren Rand der Kopfzeile, wächst mit dem Lesen (Skript
   setzt --lesefortschritt). Auf jeder Seite, nicht nur mit Kapitelleiste. */
.kopf::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: calc(100% * var(--lesefortschritt, 0)); background: var(--red); pointer-events: none; }
/* Ab 40 px Scrollweg wird die Leiste schmaler und bekommt einen Schatten;
   die Kapitelleiste rückt nach. */
.kopf .bahn { transition: height .28s cubic-bezier(.2, .7, .2, 1); }
.kopf .marke img { transition: height .28s cubic-bezier(.2, .7, .2, 1); }
.kopf { transition: box-shadow .3s ease, background .3s ease; }
.kopf.kompakt .bahn { height: 56px; }
.kopf.kompakt .marke img { height: 24px; }
.kopf.kompakt { background: rgba(10, 11, 13, .96); box-shadow: 0 12px 32px -18px rgba(0, 0, 0, .75); }
.kopf.kompakt + main .kapitel { top: 56px; }
.kopf.kompakt + main [data-kapitel] { scroll-margin-top: 120px; }
/* Der rote Knopf rechts: «Anfrage», der eine Weg, der konvertiert. */
.kopf .knopf.klein.rot { padding: 0 20px; }
/* Lange Kennwerte */
.kennzahl b.lang { font-size: clamp(22px, 2.3vw, 32px); letter-spacing: -.5px; margin-top: .41em; }   /* Grundlinie wie die grossen Werte */
.kennzahl { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .kopf .bahn, .kopf .marke img { transition: none; } }

/* ---------- Mega-Menü und Anfrage, Feinschliff (09.10.2026) ---------- */
@media (min-width: 900px) {
  /* Symbol je Bereich links in der Zeile; die Zeilen erscheinen gestaffelt */
  .kopf nav .megaliste ul a { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .megaliste ul a .megasymbol { display: block; grid-column: 1; grid-row: 1 / span 2; width: 22px; height: 22px; stroke-width: 1.6; color: var(--mute); transition: color .15s ease; }
  .megaliste ul a small, .megaliste ul a span:not(.megasymbol) { grid-column: 2; }
  .megaliste ul a .pfeilchen { grid-column: 3; }
  .megaliste ul a:hover .megasymbol, .megaliste ul a.zeigt .megasymbol { color: var(--red); }
  .megaliste li { opacity: 0; transform: translateX(-6px); }
  .klapp:hover .megaliste li, .klapp:focus-within .megaliste li {
    animation: megaRein .32s cubic-bezier(.2, .7, .2, 1) calc(var(--k, 0) * 28ms + 40ms) both; }
  @keyframes megaRein { to { opacity: 1; transform: none; } }
  .klappfeld { box-shadow: 0 28px 56px -30px rgba(0, 0, 0, .45); }
  .vorschaubild { border: 1px solid var(--line); }
  /* Die rote Linie der Marke unter dem Titel der Vorschau */
  .vorschautitel::after { content: ""; display: block; width: 30px; height: 3px; margin-top: 10px; border-radius: 2px; background: var(--red); }
  .vorschauwege { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 20px; }
  .kopf nav .vorschauwege .knopf { margin-top: 0; }
  .kopf nav .vorschauanfrage { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; padding: 0; }
  .vorschauanfrage .pfeilchen { color: var(--red); transition: transform .2s ease; }
  .kopf nav .vorschauanfrage:hover .pfeilchen { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .megaliste li { opacity: 1; transform: none; animation: none !important; } }
/* Anfrage: Karte mit Tiefe, direkte Wege mit Symbol, Knopf auf dem Handy breit */
.formular { box-shadow: 0 34px 64px -44px rgba(16, 18, 22, .4); }
.weg { display: inline-flex; align-items: center; gap: 10px; }
.wegsymbol { width: 18px; height: 18px; flex: none; color: var(--red); }
@media (max-width: 599px) { .absenden .knopf { width: 100%; justify-content: center; } }

/* ---------- Bereichskopf mit Render (09.10.2026) ---------- */
/* Rechts das freigestellte Teil auf einer Lichtinsel, links Text und die
   Punkte darunter. Kein Foto, kein Schleier: der Grund ist die Marke. */
.bereichskopf.mitteil::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 52% at 74% 58%, rgba(150, 165, 190, .16), rgba(120, 135, 160, .05) 55%, transparent 100%); }
.bereichskopf.mitteil .bereichsraster { align-items: center; }
.bereichskopf.mitteil .kopfpunkte { margin-top: 28px; }
.kopfteil { position: relative; display: flex; justify-content: center; }
.kopfteil img { display: block; width: 100%; max-width: 560px; height: auto; }
/* Hohe, schmale Teile (fundafom®, 470 × 1225, 19.10.2026) liefen sonst auf
   über 1400 px Höhe. Gedeckelt, eingepasst — nicht verzerrt. */
.kopfteil img { max-height: min(640px, 75vh); object-fit: contain; }
@media (min-width: 960px) {
  .bereichskopf.mitteil .bereichsraster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
@media (max-width: 959px) {
  .kopfteil img { max-width: 420px; }
  .bereichskopf.mitteil::before { background: radial-gradient(ellipse 50% 30% at 50% 84%, rgba(150, 165, 190, .14), transparent 100%); }
}

/* ---------- Funktionsprinzip mit Marken (12.10.2026) ---------- */
/* Nummerierte rote Punkte auf dem Schnittbild, dunkler Ring für Kontrast auf
   hellem Stahl; die Legende darunter trägt dieselben Nummern. */
.prinzipfigur .prinzipbild { position: relative; max-width: 500px; margin-inline: auto; }
.prinzipfigur .prinzipbild img { max-width: none; width: 100%; }
.prinzipmarke { position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 26px; text-align: center;
  box-shadow: 0 0 0 3px rgba(10, 11, 13, .8), 0 6px 16px -6px rgba(0, 0, 0, .8); }
.prinzipmarke span { display: block; }
.auf.da .prinzipmarke, .standbildteil:not(.auf) .prinzipmarke { animation: markeAuf .5s cubic-bezier(.2, .7, .2, 1) calc(var(--j, 0) * 110ms + .3s) both; }
@keyframes markeAuf { from { opacity: 0; transform: translate(-50%, -50%) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.prinziplegende { list-style: none; counter-reset: marke; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
  max-width: 560px; margin: 22px auto 0; font-size: 14px; line-height: 1.4; color: var(--hell); }
.prinziplegende li { counter-increment: marke; display: flex; align-items: flex-start; gap: 10px; }
.prinziplegende li::before { content: counter(marke); flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
@media (max-width: 520px) { .prinziplegende { grid-template-columns: 1fr; } .prinzipmarke { width: 22px; height: 22px; line-height: 22px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .prinzipmarke { animation: none !important; } }

/* Social Media im Fuss (12.10.2026): drei Zeichen unter dem Logo */
.sozial { display: flex; gap: 10px; margin-top: 18px; }
.sozial a { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-dark); border-radius: 8px;
  color: var(--dk-mute); transition: color .18s ease, border-color .18s ease, background .18s ease; }
.sozial svg { width: 20px; height: 20px; }
.sozial a:hover, .sozial a:focus-visible { color: #fff; border-color: var(--dk-mute); background: rgba(255, 255, 255, .05); }