/* amperatec.com · seitenspezifische Stile (Fassung 28.09.2026 nach joinspine.ai, Umstellung auf Nutzen am 29.09.2026).
   Setzt tokens.css und bundle.css (Kopien aus design/amperatec/) voraus; Ergebnisbild und Ablauf-Animation stylt
   ablauf.css, die Rechenhilfe rechner.css. Hier nur, was es nur auf dieser Website gibt: Sprunglink, Hero-Anordnung,
   Nutzen, Team, Versprechen, Herstellerliste, Anpassungen an Texte dieser Seite und die Rechtsseiten. Farben, Radien, Schatten, Schriftgrößen und Zeiten nur über
   die Variablen aus tokens.css; Abstände aus der Skala (var(--space-N)). */


/* ---------------------------------------------------------------- Sprunglink „Zum Inhalt“ */
.sprunglink {
  position: fixed;
  left: var(--space-16);
  top: var(--space-16);
  z-index: 100;
  padding: var(--space-10) 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--text-button);
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  translate: 0 calc(-100% - var(--space-24));
  transition: translate var(--dur-ui) var(--ease-standard);
}
.sprunglink:focus, .sprunglink:focus-visible { translate: 0 0; outline-offset: 3px; }
main:focus { outline: none; }

/* Wortgruppen, die nicht umbrechen sollen (Schrittnamen im Fließtext) */
.zusammen { white-space: nowrap; }

/* Sprungmarken der Fassungen bis 29.09.2026 vormittags (#schritte, #integrieren, #sequenz, #auswerten): Sie stehen am
   Anfang von „So funktioniert es“, damit alte Links und Lesezeichen dort landen statt am Seitenanfang (Prüfung TEC2-01). */
.anker-alt { display: block; height: 0; }


/* ---------------------------------------------------------------- Maßstab 90 % ab 1024 px (Jascha, 29.09.2026)
   Die Seite sah erst bei 90 % Browser-Zoom richtig aus. zoom verkleinert alles gleichmäßig, Medienabfragen rechnen weiter
   mit der echten Fensterbreite, ablauf.js rechnet Rechtecke beim Ziehen in CSS-Pixel zurück.
   Der Hero hängt nicht an der Fensterhöhe (30.09.2026): 100svh rechnen Chrome und Safari unter zoom verschieden, in Safari
   war der Hero zu hoch und der Abstand unter der Kopfzeile zu groß. Fester Abstand oben, Inhalt oben ausgerichtet. */
@media (min-width: 1024px) {
  html { zoom: .9; }
  .hero { min-height: 0; padding-top: calc(var(--header-h) + var(--space-40)); padding-bottom: var(--space-88); }
}

/* ---------------------------------------------------------------- Hero */
/* Die Plakette trägt eine lange Zielgruppenzeile. Geschützte Leerzeichen im Markup lassen sie nur nach einem „·“
   umbrechen; bricht sie um (Telefon), wird sie ein abgerundetes Feld statt einer Pille. Einzeilig (30 px hoch) sieht
   Radius 16 wie eine Pille aus. */
.hero__plakette { border-radius: var(--radius-item); text-wrap: balance; text-align: center; }
/* Untertitel auf zwei Zeilen, Umbruch nach dem ersten Satz (Leo, 01.10.2026): Satz 1 ist bei 24 px 729 px breit (englisch 718),
   mit dem ersten Wort von Satz 2 rund 790 px (englisch 782). 750 px trennt also in beiden Sprachen am Satzende. */
.hero__text > .lead-xl { max-width: 750px; }

/* Zwei Spalten erst ab 1360 px (Spezifikation: ab 1024). Darunter wäre die Textspalte neben einer Bühne mit breiter
   Anordnung (mindestens 600 px) zu schmal: Bei 1280 px fiele der Titel auf 53 px, unter das Minimum von 56 px (3.2).
   Von 1024 bis 1359 px deshalb wie am Tablet: Text mittig, Bühne darunter, höchstens 640 px breit (breite Anordnung),
   Titel --text-display, aber höchstens 60 px. So wächst der Titel mit der Breite nur: 56 px bei 1024, 60 px ab 1200,
   60,7 px bei 1360 (zweispaltig), 66,5 px ab 1440 (Prüfung GES-03, bewusste Abweichung). */
@media (min-width: 1024px) and (max-width: 1359.98px) {
  .hero { display: block; min-height: 0; }
  .hero__raster { grid-template-columns: minmax(0, 1fr); gap: var(--space-48); }
  .hero__text { text-align: center; }
  .hero__text > :is(.plakette, .augenbraue, .lead-xl) { margin-inline: auto; }
  .hero__text .knopfzeile { justify-content: center; }
  .hero__buehne { width: 100%; max-width: 640px; margin-inline: auto; }
  .hero__text > .display { font-size: min(var(--text-display), 60px); }
}
/* Ab 1360 px: Textspalte etwas breiter als die Bühne (die Bühne braucht innen 546 px für die breite Anordnung,
   also mit Innenabstand 2 × 24 und Rand 2 × 1 mindestens 596 px; 600 mit Luft), und der Titel so groß, dass jeder der
   beiden Sätze auf eine Zeile passt („Kein Skript je Aufbau.“ ist 10,14 em breit), höchstens --text-display (72 px).
   Bei 1360 px ist die Textspalte 632 px breit, der Titel 60,7 px. */
@media (min-width: 1360px) {
  .hero__raster { grid-template-columns: minmax(0, 1fr) 584px; }
  /* Karte = Höhe des Textblocks (Jascha, 29.09.2026): 584 px ist die schmalste Karte mit breiter Anordnung (innen 546 px
     nach Rand und 16 px Innenabstand, hero.js). Bildtext und Markenhinweis hängen darunter und zählen nicht zur Höhe. */
  .hero__buehne { position: relative; }
  .hero-unterzeile { position: absolute; top: 100%; left: 0; right: 0; }
  .hero__text { container-type: inline-size; }
  /* Titel „Ihre Prüfstände arbeiten. Ihr Team entscheidet.“ (01.10.2026): jeder Satz auf einer Zeile. Der längere ist
     11,97 em breit (englisch „Your team makes the calls.“ 12,46 em), also höchstens 8,2 bzw. 7,9 % der Spaltenbreite.
     Bei 1710 px Fensterbreite sind das 68 bzw. 66 px statt 72 px. */
  .hero__text > .display { font-size: min(var(--text-display), 8.2cqi); }
  html[lang="en"] .hero__text > .display { font-size: min(var(--text-display), 7.9cqi); }
}


/* ---------------------------------------------------------------- Versprechen: Aussage ohne Karte, mittig */
.versprechen { padding-block: calc(var(--section-y) + var(--space-24)); }
.versprechen__innen { max-width: 760px; margin-inline: auto; text-align: center; }
.versprechen__innen > .plakette { margin-inline: auto; }
.versprechen__innen > .plakette + .titel { margin-top: var(--space-28); }
.versprechen__innen > .titel + .lead-l { margin: var(--space-20) auto 0; }


/* ---------------------------------------------------------------- Geräte und Integratoren */
/* Herstellerliste über die ganze Breite der zweigeteilten Karte, zwischen den Hälften und der Stat-Zeile */
.hersteller {
  grid-column: 1 / -1;
  min-width: 0;
  padding: var(--space-28) var(--space-24);
  border-top: 1px solid var(--line);
}
.hersteller__titel {
  font-size: var(--text-h3-l);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hersteller__einleitung {
  max-width: var(--measure);
  margin-top: var(--space-10);
  font-size: var(--text-mittel);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.hersteller__liste { display: grid; margin-top: var(--space-24); }
.hersteller__liste > div { padding: var(--space-12) 0; border-top: 1px solid var(--line-2); }
.hersteller__liste dt { font-size: var(--text-title-s); line-height: 1.5; font-weight: 700; color: var(--ink); }
.hersteller__liste dd { margin: var(--space-2) 0 0; font-size: var(--text-mittel); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.hersteller__hinweis {
  margin-top: var(--space-20);
  font-size: var(--text-small);
  line-height: 1.45;
  color: var(--muted);
}
@media (min-width: 640px) {
  .hersteller { padding: var(--space-40) var(--space-48); }
  .hersteller__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-40); }
}
@media (min-width: 1200px) {
  .hersteller {
    display: grid;
    grid-template-columns: minmax(260px, .8fr) minmax(0, 2fr);
    column-gap: var(--space-56);
    padding: var(--space-48) 52px;                                   /* 52 wie die Hälften (gemessen) */
  }
  .hersteller__kopf { grid-row: 1 / span 2; }
  .hersteller__liste { margin-top: 0; }
  .hersteller__liste > div:nth-child(-n+2) { border-top: 0; padding-top: 0; }
  .hersteller__hinweis { grid-column: 2; }
}

/* Stat-Zeile: unsere Werte sind Wörter, nicht Zahlen („Sicherer Zustand“). Wert über dem Text, damit der Text
   in der Drittelspalte nicht auf wenige Pixel schrumpft */
.geraete .statzeile__zelle { flex-direction: column; align-items: center; gap: var(--space-6); }
.geraete .statzeile__text { max-width: 280px; }
@media (min-width: 1024px) {
  .geraete .statzeile__zelle { align-items: flex-start; }
}


/* ---------------------------------------------------------------- Häufige Fragen */
/* Titelspalte so breit, dass „Kurze Antworten.“ (44 px: 370 px) nicht umbricht; Grundlage: min. 280 px */
@media (min-width: 1024px) {
  .fragen-raster { grid-template-columns: minmax(380px, .8fr) minmax(0, 1.4fr); }
}


/* ---------------------------------------------------------------- Footer: Schlusszeile */
/* Die beiden Sätze der Schlusszeile sind zusammen rund 1300 px breit und passen auch bei 1920 px nicht nebeneinander
   (8.11: ab 768 einzeilig). Deshalb untereinander über die volle Breite, linksbündig, jeder ab 1024 px auf einer Zeile;
   bricht einer um, dann ausgeglichen, ohne einzelnes Wort am Ende (Prüfung GES-08). */
.fuss__schluss > p { text-wrap: balance; }
@media (min-width: 768px) {
  .fuss__schluss { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .fuss__schluss > :last-child { text-align: left; }
}


/* ---------------------------------------------------------------- Rechtsseiten (Impressum, Datenschutz) */
.recht-abschnitt { padding-top: calc(var(--header-h) + var(--space-24)); }
@media (min-width: 1024px) { .recht-abschnitt { padding-top: calc(var(--header-h) + var(--space-32)); } }
.recht { max-width: 760px; }
.recht > * { max-width: var(--measure-wide); }
.recht h1 { max-width: none; }
.recht__stand { margin-top: var(--space-14); font-size: var(--text-mittel); line-height: 1.5; color: var(--muted); }
.recht__kurz {
  margin-top: var(--space-28);
  padding: var(--space-16) var(--space-20);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-inner);
  background: var(--bg);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-2);
}
.recht h2 {
  margin-top: var(--space-40);
  font-size: var(--text-h3-l);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.recht h2 + * { margin-top: var(--space-12); }
.recht p { font-size: var(--text-body); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.recht p + p, .recht p + dl, .recht dl + p { margin-top: var(--space-12); }
.recht strong { font-weight: 700; color: var(--ink); }
.recht dl { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-2); }
.recht dt { padding-top: var(--space-10); font-size: var(--text-title-s); line-height: 1.5; font-weight: 700; color: var(--ink); }
.recht dd { margin: 0; padding: var(--space-2) 0 var(--space-10); border-bottom: 1px solid var(--line-2); font-size: var(--text-body); line-height: 1.6; color: var(--ink-2); }
@media (min-width: 640px) {
  .recht dl { grid-template-columns: 180px minmax(0, 1fr); }
  /* Beschriftung (14 px) auf der Grundlinie des Werts (16 px): 3 px tiefer als oben bündig (gemessen, Prüfung GES-21) */
  .recht dt { padding: calc(var(--space-10) + 3px) var(--space-16) var(--space-10) 0; border-bottom: 1px solid var(--line-2); }
  .recht dd { padding: var(--space-10) 0; }
}
/* Telefon und E-Mail im Impressum: Tippfläche ≥ 40 px (10) ohne sichtbare Änderung */
.recht dd a[href^="tel:"], .recht dd a[href^="mailto:"] { display: inline-block; padding-block: 10px; margin-block: -10px; line-height: 1.25; }
.recht .recht__zurueck { margin-top: var(--space-48); }
.recht .recht__zurueck .knopf { width: auto; }

/* Footer der Rechtsseiten: die dunkle Lasche sitzt auf dem Seitengrund statt auf dem weißen Abschluss */
.unterseite .fuss { margin-top: var(--section-y); background: transparent; }

/* Hochschul-Logos unter den Fragen (Leo, 28.09.: ohne Beschriftung, dunkles Band entfällt) */
.fragen__logos { display: flex; align-items: center; gap: var(--space-32, 32px); list-style: none; margin: var(--space-32, 32px) 0 0; padding: var(--space-24, 24px) 0 0; border-top: 1px solid var(--line); }
.fragen__logo { display: block; width: auto; }
.fragen__logo--tum { height: 28px; }
.fragen__logo--hec { height: 36px; }


/* ---------------------------------------------------------------- Nutzen, nach Rolle (29.09.2026)
   Zwei Gruppen in inneren Flächen: links Test- und Laboringenieure (Nutzer), rechts Labor- und Prüffeldleitung (Zahler),
   je drei Punkte mit Häkchen, Titel und einem Satz. Aufbau wie die Checkliste (8.3), aber größer, weil hier der Nutzen
   der ganzen Seite steht. */
.nutzen__gruppen { display: grid; gap: var(--space-16); margin-top: var(--space-40); }
.nutzen__gruppe {
  min-width: 0;
  padding: var(--space-20) var(--space-20) var(--space-8);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-inner);
  text-align: left;
}
.nutzen__rolle {
  font-size: var(--text-eyebrow);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.nutzen__liste { list-style: none; margin-top: var(--space-8); }
.nutzen__punkt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-12);
  padding: var(--space-16) 0;
}
.nutzen__punkt + .nutzen__punkt { border-top: 1px solid var(--line-2); }
.nutzen__haken { grid-row: 1 / span 2; margin-top: 3px; color: var(--accent); }
.nutzen__titel {
  font-size: var(--text-h3-l);
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.nutzen__text {
  margin-top: var(--space-4);
  font-size: var(--text-mittel);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .nutzen__gruppe { padding: var(--space-28) var(--space-28) var(--space-12); }
}
@media (min-width: 900px) {
  .nutzen__gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); margin-top: var(--space-48); }
}


/* ---------------------------------------------------------------- Wer Amperatec baut (29.09.2026)
   Kurz, ohne Lebenslauf und ohne Fotos: Rolle, Name, ein bis zwei Sätze. Leo mit Kontakt, weil er Ansprechpartner ist. */
.team__liste { display: grid; gap: var(--space-16); margin-top: var(--space-40); list-style: none; }
.team__person {
  min-width: 0;
  padding: var(--space-24);
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-inner);
  text-align: left;
}
.team__rolle {
  font-size: var(--text-eyebrow);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.team__name {
  margin-top: var(--space-6);
  font-size: var(--text-h3-l);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--ink);
}
.team__text {
  margin-top: var(--space-8);
  font-size: var(--text-mittel);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}
.team__kontakt { margin-top: var(--space-12); font-size: var(--text-mittel); line-height: 1.5; }
/* Tippfläche 40 px hoch ohne sichtbare Änderung, wie die Kontaktlinks im Abschluss (spine-spec.md 10, Prüfung TEC2-11) */
.team__kontakt a { display: inline-block; padding-block: 10px; margin-block: -10px; line-height: 20px; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .team__person { padding: var(--space-28); }
}
@media (min-width: 768px) {
  .team__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-20); margin-top: var(--space-48); }
}


/* ---------------------------------------------------------------- Druck und „Als PDF sichern“ (Prüfung TEC2-03)
   Die Kopfzeile blendet bundle.css aus. Hier: Sprunglink weg, Hero ohne Platz für die Kopfzeile, Fenster und Karten nicht
   mitten durch umbrechen. */
@media print {
  .sprunglink { display: none !important; }
  .hero { padding-top: var(--space-24); }
  .recht-abschnitt { padding-top: var(--space-24); }
  :is(.hero-ergebnis, .ab-szene, .fenster, .nutzen__gruppe, .team__person, .frage, .vergleich__karte, .rechner__eingaben, .rechner__ergebnis) { break-inside: avoid; }
}


/* ---------------------------------------------------------------- Team: Hochschul-Logo in der Karte der Person (Jascha, 29.09.2026)
   Grau oben rechts neben Rolle und Name: TUM bei Jascha, HEC bei Leonard. */
.team__kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.team__kopfzeile > div { min-width: 0; }
.team__logo { display: block; flex: none; width: auto; filter: grayscale(1); opacity: .55; }
.team__logo--tum { height: 36px; }
.team__logo--hec { height: 48px; }
/* Leonard: TUM und HEC Paris nebeneinander (01.10.2026) */
.team__logos { display: flex; flex: none; align-items: center; gap: var(--space-24); }

/* ---------------------------------------------------------------- Abschluss: Titel auf zwei Zeilen (Jascha, 29.09.2026)
   „für Geräte verschiedener Hersteller.“ braucht bei 64 px rund 1090 px; Unterzeile, Knöpfe und Kontaktzeile bleiben 760 px. */
.abschluss__innen { max-width: 1160px; }
.abschluss__innen > :not(.titel) { max-width: 760px; margin-inline: auto; }

/* ---------------------------------------------------------------- Sprachumschalter DE/EN in der Kopfzeile (29.09.2026)
   Ab 640 px neben dem Knopf, darunter nur im Telefon-Menü. en/index.html erzeugt design/werkzeuge/uebersetzung/amperatec_en.py. */
.kopf__sprache { display: none; }
@media (min-width: 640px) {
  .kopf__sprache {
    display: inline-flex; align-items: center; min-height: 40px; padding-inline: var(--space-10);
    border-radius: var(--radius-item); font-size: var(--text-nav); font-weight: 600; letter-spacing: .04em;
    color: var(--ink-2); text-decoration: none;
  }
  .kopf__sprache:hover { color: var(--ink); }
}

/* ---------------------------------------------------------------- Ruhiger (Leo, 01./02.10.2026)
   Bewusste Abweichung vom Design-System (design/amperatec/components/bundle.css), Akzentfarbe unverändert:
   Plakette als Beschriftung wie auf einem Datenblatt (Mono, Haarlinie) statt hellblauer Pille, und Einblenden ohne Federn.
   Bleibt es dabei, im Design-System nachziehen (README, Abschnitt „Ändern und Abgleichen“). */
.plakette {
  gap: 10px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
}
.plakette::before { content: ""; flex: none; width: 18px; height: 1px; background: currentColor; }
:where(.karte--dunkel, .karte--verlauf, .auf-dunkel) .plakette { background: none; color: var(--on-ink-muted); }
.hero__plakette { border-radius: 0; }
.textblock > .plakette + * { margin-top: var(--space-20); }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal="pop-gruppe"] > *, .js [data-reveal="pop"], .js [data-reveal="zahl"] {
    transition-duration: var(--dur-state);
    transition-timing-function: var(--ease-standard);
  }
  .js [data-reveal="pop-gruppe"]:not(.is-visible) > *, .js [data-reveal="pop"]:not(.is-visible), .js [data-reveal="zahl"]:not(.is-visible) {
    transform: translateY(6px);
  }
}

/* ---------------------------------------------------------------- Für wen: Branchen (Leo, 01./02.10.2026)
   Raster mit Haarlinien wie ein Datenblatt, Nummer in Mono, je Branche ein 3D-Rendering (transparentes WebP, Quelle
   design/werkzeuge/branchen/). 1 Spalte am Telefon, 2 ab 640 px, 3 ab 1024 px. */
.branchen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin-top: var(--space-40);
  list-style: none;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-inner);
  overflow: hidden;
}
.branchen-zelle {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
  padding: var(--space-20) var(--space-24) var(--space-24);
  background: var(--surface);
}
.branchen-nr { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .08em; color: var(--muted); }
.branchen-bild { display: block; width: 100%; height: 168px; margin: var(--space-4) 0 var(--space-12); object-fit: contain; object-position: center bottom; }
.branchen-name { font-size: var(--text-h3-l); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
@media (min-width: 640px) {
  .branchen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .branchen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-48); }
  .branchen-zelle { padding: var(--space-24) var(--space-28) var(--space-28); }
  .branchen-bild { height: 184px; }
}

/* ---------------------------------------------------------------- Hero mittig: Vision (Leo, 02.10.2026)
   Text mittig, darunter die breite Bühne „Fragen an Ihr Labor“ (laborfrage.js), dahinter ein feines Raster, das zu den
   Rändern ausläuft. Die Höhe folgt dem Inhalt (kein 100svh, siehe Hinweis zu Safari oben). Ersetzt ab 1360 px die
   zweispaltige Aufteilung mit der Karte neben dem Text. */
.hero--mitte { position: relative; isolation: isolate; overflow: clip; }
.hero--mitte::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 36%, #000 18%, transparent 74%);
          mask-image: radial-gradient(ellipse 72% 60% at 50% 36%, #000 18%, transparent 74%);
}
.hero--mitte .hero__raster { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-40); }
.hero--mitte .hero__text { width: 100%; max-width: 1040px; text-align: center; }
.hero--mitte .hero__text > :is(.plakette, .lead-xl) { margin-inline: auto; }
.hero--mitte .hero__text .knopfzeile { justify-content: center; }
@media (min-width: 1024px) { .hero--mitte .hero__raster { gap: var(--space-56); } }

/* Untertitel: zwei Zeilen, Umbruch nach dem ersten Satz („Hardware-Tests“ macht ihn länger als 750 px) */
.hero--mitte .hero__text > .lead-xl { max-width: 860px; }

/* Hero „Ein Labor, ein Tag“ (Leo, 02.10.2026 abends): zweispaltig ab 1024 px, damit Titel, Untertitel, Knöpfe und Bild in den
   ersten Bildschirm passen. Bildspalte 46 %, höchstens 600 px; Titel wie bisher je Satz eine Zeile (8,2 % der Textspalte). */
@media (min-width: 1024px) {
  .hero--labor .hero__raster { grid-template-columns: minmax(0, 1fr) minmax(0, min(46%, 600px)); gap: clamp(32px, 4vw, 72px); align-items: center; }
  .hero--labor .hero__text { text-align: left; container-type: inline-size; }
  .hero--labor .hero__text > :is(.plakette, .augenbraue, .lead-xl) { margin-inline: 0; }
  .hero--labor .hero__text .knopfzeile { justify-content: flex-start; }
  .hero--labor .hero__buehne { width: 100%; max-width: none; margin: 0; }
  .hero--labor .hero__text > .display { font-size: min(var(--text-display), 8.2cqi); }
  html[lang="en"] .hero--labor .hero__text > .display { font-size: min(var(--text-display), 7.9cqi); }
  .hero--labor { padding-bottom: var(--space-64); }
  .hero--labor .hero__text > .lead-xl { max-width: none; font-size: 22px; }
}
/* Untertitel: Umbruch nach dem ersten Satz, wo er bei 22 px auf eine Zeile passt (Satz 1: 776 px, Textspalte ab 1360 px rund 800) */
.hero-umbruch { display: none; }
@media (min-width: 1360px) { .hero-umbruch { display: inline; } }
@media (max-width: 1023.98px) {
  .hero--labor .hero__buehne { width: 100%; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 639.98px) {
  .ab-kopf .plakette__zusatz { display: none; }
}

/* ---------------------------------------------------------------- Hero-Bild „Ein Labor, ein Tag“ (nachtlabor.js, Leo 02.10.2026)
   Isometrisches Labor als Vektorgrafik; Farben als Variablen an der SVG (Tag, Dämmerung, Nacht). */
.nl { position: relative; width: 100%; margin: 0; }
.nl-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nl-svg .f { stroke-width: .7; stroke-linejoin: round; }
.nl-svg .linie { fill: none; stroke-width: 1; }
.nl-svg .kabel { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nl-svg .puls { fill: none; stroke: #6f9dff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 99999; }
.nl-svg .puls--hof { stroke: #2f6bff; stroke-width: 10; stroke-opacity: calc(var(--puls) * .28); }
.nl-svg .welle { fill: none; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.nl-svg .raster { fill: none; stroke-width: .7; stroke-opacity: .22; }
.nl-svg .zeiger { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.nl-svg .zeiger--stunde { stroke-width: 3.2; }
.nl-svg .strich { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.nl-svg .sterne { fill: #f3f6ff; }
.nl-svg .hoefe { mix-blend-mode: screen; }
.nl-svg .gitter { fill: none; stroke-width: 1; }
.nl-svg .ring { fill: none; stroke-width: 1.4; }
.nl-svg .ring-strich { fill: none; stroke-width: 1.4; stroke-linecap: round; }
.nl-svg .ring-strich--stark { stroke-width: 2; }
.nl-knopf { position: absolute; right: 4%; bottom: 3%; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface); color: var(--muted); border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgb(10 14 26 / .08);
  opacity: .0; transition: opacity var(--dur-state) var(--ease-standard), color var(--dur-state) var(--ease-standard); }
.nl:hover .nl-knopf, .nl-knopf:focus-visible, .nl-knopf[data-modus="weiter"] { opacity: 1; }
@media (hover: none) { .nl-knopf { opacity: .85; } }
@media (hover: hover) { .nl-knopf:hover { color: var(--ink); } }
.nl-knopf svg { width: 11px; height: 11px; fill: currentColor; }
.nl-knopf .nl-symbol { display: none; }
.nl-knopf[data-modus="anhalten"] .nl-symbol--anhalten, .nl-knopf[data-modus="weiter"] .nl-symbol--weiter { display: block; }



/* ---------------------------------------------------------------- Sicher ohne Aufsicht (Leo, 02.10.2026)
   Ersetzt das Versprechen „Der Aufbau wechselt“. Vier Punkte im Haarlinien-Raster wie „Für wen“, der vierte („Jede Zahl mit
   Quelle“) ist hervorgehoben: Er unterscheidet die Antworten von einer Tabelle in einem allgemeinen KI-Assistenten. */
.sicher__raster { display: grid; gap: 1px; margin-top: var(--space-40); list-style: none; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius-inner); overflow: hidden; }
.sicher__punkt { display: grid; align-content: start; gap: var(--space-10); padding: var(--space-24); background: var(--surface); }
.sicher__nr { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .08em; color: var(--muted); }
.sicher__titel { font-size: var(--text-h3-l); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.sicher__text { font-size: var(--text-mittel); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.sicher__punkt--quelle { background: var(--bg); }
.sicher__punkt--quelle .sicher__titel { color: var(--accent); }
@media (min-width: 640px) { .sicher__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .sicher__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-48); }
  .sicher__punkt { padding: var(--space-28); }
}

/* ---------------------------------------------------------------- Herstellerliste aufklappbar (Leo, 02.10.2026) */
.hersteller__aufklapp { min-width: 0; }
.hersteller__auf {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin-top: var(--space-12);
  list-style: none; cursor: pointer; font-size: var(--text-mittel); font-weight: 600; color: var(--accent);
}
.hersteller__auf::-webkit-details-marker { display: none; }
.hersteller__auf::after {
  content: ""; width: 7px; height: 7px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-ui) var(--ease-standard);
}
.hersteller__aufklapp[open] > .hersteller__auf::after { transform: translateY(2px) rotate(-135deg); }
.hersteller__auf-offen, .hersteller__aufklapp[open] .hersteller__auf-zu { display: none; }
.hersteller__aufklapp[open] .hersteller__auf-offen { display: inline; }
@media (min-width: 1200px) {
  .hersteller__aufklapp { grid-column: 2; grid-row: 1 / span 2; }
  .hersteller__auf { margin-top: 0; }
  .hersteller__aufklapp[open] .hersteller__liste { margin-top: var(--space-16); }
}