/* ============================================================================
   wilhelmswerk.de — Seitenschicht über dem Markendesign-Kit
   ----------------------------------------------------------------------------
   Das Kit (wilhelmswerk.css) liefert Tokens, Schrift und die Bausteine einer
   Marketingseite. Hier steht nur, was diese eine Seite zusätzlich braucht:
   die Produktbühnen, die Geräterahmen und die Bewegung.

   Grundsätze, die hier durchgehalten werden:
   • Nichts bewegt sich, ohne dass es etwas erklärt.
   • Alle Endzustände stehen im CSS. Ohne JavaScript ist die Seite vollständig
     lesbar — die Choreografie in seite.js ist Zugabe, nicht Voraussetzung.
   • prefers-reduced-motion schaltet jede Bewegung ab, nicht nur die auffällige.
   ========================================================================== */

/* ── Ergänzende Tokens ───────────────────────────────────────────────────── */
:root {
  /* Zerfallsarten — dieselben vier Farben wie in nuklidkarte.svg und in der App */
  --nk-stabil: #16222e;
  --nk-beta-minus: #3b7fb5;
  --nk-beta-plus: #c8813a;
  --nk-alpha: #d8bd4a;

  /* Statusfarben. Grün heißt „gültig", Rot heißt „ungültig", und sonst nichts —
     die Hausfarbe ist Schiefer und damit bewusst keins von beidem.
     Begründung: decisions/2026-09-01-markenarchitektur-schulprodukte.md */
  --ok: #2f7d4f;
  --ok-weich: #eaf4ee;

  /* Die Silhouette im Ausweis. Gedämpft genug, dass sie als Platzhalter
     gelesen wird, und kräftig genug, dass sie bei 62 px noch eine Figur ist. */
  --pass-figur: #9fb0bf;

  --bewegung: 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Grundgerüst ─────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ww-ground); overflow-x: clip; }

/* Sprungmarke für Tastatur und Screenreader */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ww-brand); color: var(--ww-brand-on);
  padding: 12px 18px; border-radius: 0 0 var(--ww-radius-sm) 0;
}
.skip:focus { left: 0; }

/* Der Kopf bleibt stehen — auf einer langen Seite ist die Navigation sonst weg */
.kopf {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 252, 253, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms, background 240ms;
}
.kopf.gescrollt {
  border-bottom-color: var(--ww-line);
  background: rgba(251, 252, 253, 0.94);
}
.kopf .ww-header { border: 0; }

/* Mobile Navigation */
.nav-schalter {
  display: none; width: 42px; height: 38px; padding: 9px 8px;
  background: none; border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-sm); cursor: pointer;
}
.nav-schalter span {
  display: block; height: 1.5px; background: var(--ww-ink);
  transition: transform 240ms, opacity 180ms;
}
.nav-schalter span + span { margin-top: 5px; }
.nav-schalter.offen span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-schalter.offen span:nth-child(2) { opacity: 0; }
.nav-schalter.offen span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Reveal beim Scrollen ────────────────────────────────────────────────── */
/* Das Markup steht im Endzustand (.zeig.da). seite.js nimmt „da" nur dort weg,
   wo unterhalb des ersten Bildschirms noch etwas kommt — ohne JS bleibt also
   nichts unsichtbar. */
.zeig {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--bewegung), transform var(--bewegung);
}
.zeig.da { opacity: 1; transform: none; }
.v1 { transition-delay: 70ms; }
.v2 { transition-delay: 140ms; }
.v3 { transition-delay: 210ms; }
.v4 { transition-delay: 280ms; }
.v5 { transition-delay: 350ms; }

/* ── Bühne oben ──────────────────────────────────────────────────────────── */
.buehne {
  position: relative; overflow: clip;
  background: linear-gradient(180deg, var(--ww-sky-1) 0%, var(--ww-sky-2) 54%, var(--ww-ground) 100%);
  padding-block: clamp(48px, 7vw, 84px) clamp(56px, 8vw, 96px);
}
.blase {
  position: absolute; border-radius: 50%;
  filter: blur(64px); pointer-events: none; z-index: 0;
}
.raster {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(rgba(90, 125, 155, 0.28) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(black 26%, transparent 78%);
}
.buehne__inhalt {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
/* Gilt fuer alle Raster dieser Seite: ohne min-width: 0 setzt der breiteste
   unumbrechbare Inhalt die Spaltenbreite. Genau daran lief die frühere
   Zerfallsketten-Grafik auf dem Telefon aus dem Bild. */
.buehne__inhalt > *,
.produkt__gitter > *,
.kontakt__gitter > * { min-width: 0; }
.buehne .ww-h1 { margin-block: var(--ww-space-3) var(--ww-space-3); }
.buehne__marke { color: var(--ww-brand); }

/* Vertrauenszeile unter den Knöpfen */
.belege {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin-top: var(--ww-space-5); padding-top: var(--ww-space-4);
  border-top: 1px solid rgba(90, 125, 155, 0.24);
  font-family: var(--ww-font-mono); font-size: var(--ww-text-micro);
  color: var(--ww-label); letter-spacing: 0.02em;
}
.belege span { display: inline-flex; align-items: center; gap: 7px; }
.belege span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ww-brand); opacity: 0.55;
}

/* ── Geräterahmen ────────────────────────────────────────────────────────── */
.geraet {
  position: relative; margin-inline: auto;
  border-radius: 22px; background: #1b2833;
  padding: 9px; box-shadow: 0 30px 60px -28px rgba(16, 38, 58, 0.62), 0 2px 6px rgba(16, 38, 58, 0.18);
}
.geraet--phone::before {               /* Kameraauge, nur am Telefon */
  content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #33475a;
}
.geraet--tablet { width: min(500px, 100%); padding: 10px; }
.geraet--tablet .geraet__glas { aspect-ratio: 4 / 3; height: auto; }
.geraet--phone {
  width: min(258px, 78vw); aspect-ratio: 9 / 19; border-radius: 30px; padding: 8px; padding-top: 8px;
}
.geraet--phone .geraet__glas { border-radius: 23px; }
.geraet--phone .kerbe {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 82px; height: 18px; background: #1b2833; border-radius: 0 0 11px 11px; z-index: 3;
}
.geraet__glas {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  border-radius: 13px; background: var(--ww-surface);
}

/* Schwebende Merkposten am Tablet */
.merker {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; background: var(--ww-surface);
  border: 1px solid var(--ww-line); border-radius: 999px;
  box-shadow: 0 12px 28px -18px rgba(16, 38, 58, 0.55);
  font-size: 12.5px; font-weight: 500; color: var(--ww-ink);
  white-space: nowrap;
}
.merker em {
  font-family: var(--ww-font-mono); font-style: normal;
  font-size: 10.5px; color: var(--ww-ink-faint);
}
.merker--a { left: -30px; top: 16%; }
.merker--b { left: -18px; bottom: 12%; }

.scrollwink {
  display: flex; justify-content: center; margin-top: var(--ww-space-6);
  font-family: var(--ww-font-mono); font-size: var(--ww-text-micro);
  color: var(--ww-label); transition: opacity 320ms;
}
.scrollwink span { display: inline-flex; align-items: center; gap: 9px; }
.scrollwink b { font-weight: 400; animation: sinken 1.9s ease-in-out infinite; }
@keyframes sinken { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── Produktbühnen ───────────────────────────────────────────────────────── */
.produkt { border-top: 1px solid var(--ww-line); }
.produkt--hell { background: var(--ww-surface); }
.produkt__gitter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.produkt--gedreht .produkt__buehne { order: -1; }
.produkt__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: var(--ww-space-3); }
.produkt__nr {
  font-family: var(--ww-font-mono); font-size: var(--ww-text-micro);
  color: var(--ww-ink-faint); letter-spacing: 0.06em;
}
.marke-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--ww-line-strong); background: var(--ww-surface);
  font-family: var(--ww-font-mono); font-size: 11px; color: var(--ww-ink-soft);
}
.marke-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ww-brand);
}
.marke-status--live::before { background: var(--ok); }

/* Merkmalsliste */
.merkmale { list-style: none; margin: var(--ww-space-4) 0 0; padding: 0; }
.merkmale li {
  position: relative; padding: 13px 0 13px 26px;
  border-top: 1px solid var(--ww-line);
  font-size: var(--ww-text-body); color: var(--ww-ink-soft); line-height: 1.55;
}
.merkmale li:last-child { border-bottom: 1px solid var(--ww-line); }
.merkmale li::before {
  content: ""; position: absolute; left: 2px; top: 21px;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--ww-brand); opacity: 0.28;
}
.merkmale b { color: var(--ww-ink); font-weight: 600; }

/* ── Echte Bildschirmfotos aus der App ───────────────────────────────────── */
/* Quelle: die deutschen App-Store-Screenshots des Nuklidkarte-Projekts.
   Zugeschnitten von werkzeug/app-bilder.py, sonst unveraendert. Nichts hier
   ist nachgebaut — deshalb steht die App-Oberflaeche auch ohne gefaelschte
   Werkzeugleiste da. */
.app-schirm {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  /* Keine eigene Animation. Vorher lief hier ein Wisch über 1,9 s plus 0,26 s
     Verzögerung — das Bild ist nach rund 250 ms geladen, der Wisch hat es also
     achtmal so lange verdeckt wie das Laden gedauert hat und sah dabei aus wie
     ein Ladebalken. Eine Animation, die einen Ladevorgang nachahmt, wird als
     einer gelesen.
     Ein Ersatz-Einblenden wäre doppelt gemoppelt: der Geräterahmen trägt schon
     `.zeig .v2` und blendet mit der Staffelung der Bühne ein. Ausserdem darf
     ein Bild dieser Größe nie von `opacity: 0` starten — in einem Hintergrund-
     Tab pausiert die Animation, und dann steht da nichts. */
}

.app-teil { margin: 0; }
.app-teil img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--ww-line); border-radius: var(--ww-radius-md);
}
.app-teil--breit { position: relative; }
/* Die schwebende Karteikarte am Tablet */
.app-teil--kern {
  position: absolute; z-index: 3; right: -46px; bottom: -22px;
  width: 216px; border-radius: var(--ww-radius-md);
  box-shadow: 0 24px 50px -20px rgba(16, 38, 58, 0.55);
}
.app-teil--kern img { border-radius: var(--ww-radius-md); border-color: rgba(255,255,255,.9); border-width: 3px; }

/* Ring um Blei-206 — die Pointe des Bildes. Prozentkoordinaten, damit er
   mitwandert, wenn das Bild skaliert. */
.bild-ring {
  position: absolute; left: 0.6%; top: 55.5%; width: 11.6%; height: 27%;
  border: 2px solid var(--ok); border-radius: 3px;
  box-shadow: 0 0 0 3px rgba(47, 125, 79, 0.16);
  opacity: 0; transform: scale(1.25);
  transition: opacity 460ms ease, transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bild-ring.da { opacity: 1; transform: none; }

/* Bildnoten: was auf dem Bildschirmfoto zu sehen ist, in Worten */
.bildnoten { list-style: none; margin: var(--ww-space-4) 0 0; padding: 0; display: grid; gap: 2px; }
/* grid-template-columns braucht genau zwei Kinder je <li> — Farbfeld und ein
   Element mit dem Text. Loser Fließtext neben <b> wären eigene Rasterzellen,
   und aus drei Zeilen würden zehn. */
.bildnoten li {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 9px 10px 9px 4px; border-radius: var(--ww-radius-sm);
  font-size: var(--ww-text-caption); color: var(--ww-ink-soft); line-height: 1.55;
  opacity: 0.42; transition: opacity 420ms ease, background 420ms ease;
}
.bildnoten li.da { opacity: 1; background: #f2f6f9; }
.produkt--hell .bildnoten li.da { background: var(--ww-surface); }
.bildnoten b { color: var(--ww-ink); font-weight: 600; }
.bildnoten i { width: 12px; height: 12px; border-radius: 2px; margin-top: 4px; display: block; }
/* Farben aus der App selbst: Alpha gold, Beta blau, stabil grau */
.n-alpha { background: #d9b30a; }
.n-beta  { background: #64b5f0; }
.n-ende  { background: #9aa4ad; }

/* ── Running Robots: echte App im Tablet und auf dem zweiten Bildschirm ─── */
.robots-szene > .ww-meta { margin-bottom: var(--ww-space-3); }
.robots-szene .geraet { margin-block: 0; }
.robots-szene__zweites { margin-top: var(--ww-space-5); }
.leinwand {
  margin: 0; padding: 7px; background: #1b2833;
  border: 1px solid #33475a; border-radius: 4px;
  box-shadow: var(--ww-shadow-panel);
}
.leinwand img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.n-weg { background: #36b886; }
.n-ansage { background: #ffb51b; }
.n-pult { background: #667bdc; }
.robots-szene .szene-tafel__fuss {
  margin-top: var(--ww-space-4); padding-top: var(--ww-space-3);
  border-top: 1px solid var(--ww-line);
  font-size: var(--ww-text-caption); line-height: 1.6; color: var(--ww-ink-muted);
}

/* Hilfe und Datenschutz der App verwenden dieselbe Seitenschicht. */
.sprachen {
  display: flex; gap: var(--ww-space-3); justify-content: flex-end;
  margin-bottom: var(--ww-space-4); font-family: var(--ww-font-mono);
  font-size: var(--ww-text-caption);
}
.sprachen [aria-current="page"] { font-weight: 600; text-decoration: none; }
.hilfe__intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
  margin-bottom: var(--ww-space-6);
}
.hilfe__intro > * { min-width: 0; }
.hilfe__intro figure { margin: 0; }
.hilfe__intro .ww-h1, .app-recht .ww-h1 { margin-block: var(--ww-space-3) var(--ww-space-4); }
.hilfe__intro .marke-status { margin-bottom: var(--ww-space-4); }
.hilfe__intro figcaption { margin-top: var(--ww-space-3); color: var(--ww-ink-faint); font-size: var(--ww-text-caption); }

/* Running-Robots-Videos: echte App-Aufnahmen. Ohne Geräterahmen – im iPad-Video läuft auch die Bühne,
   und die gehört auf den Beamer, nicht ins iPad. */
.robots-videos { margin-bottom: var(--ww-space-6); }
.robots-videos__gitter {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr);
  gap: clamp(20px, 4vw, 48px); align-items: start; margin-top: var(--ww-space-4);
}
.robots-videos figure { margin: 0; }
.robots-video {
  display: block; width: 100%; height: auto; border-radius: 14px; background: #1b2833;
  box-shadow: 0 30px 60px -28px rgba(16, 38, 58, 0.62), 0 2px 6px rgba(16, 38, 58, 0.18);
}
.robots-videos__telefon .robots-video { max-width: 260px; margin-inline: auto; border-radius: 24px; }
.robots-videos figcaption { margin-top: var(--ww-space-3); color: var(--ww-ink-faint); font-size: var(--ww-text-caption); }

/* Atomatlas: echte Bildschirmfotos der Fassung 2.1, zugeschnitten von werkzeug/atomatlas-bilder.py.
   Ohne Statusleiste ist das iPad-Foto breiter als 4:3; der Rahmen folgt dem Bild, statt es zu beschneiden. */
.geraet--tablet .geraet__glas--frei { aspect-ratio: auto; }
.app-foto { display: block; width: 100%; height: auto; }
.atlas-bilder { margin-bottom: var(--ww-space-6); }
.atlas-bilder__gitter {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px); align-items: start; margin-top: var(--ww-space-4);
}
.atlas-bilder figure { margin: 0; }
.atlas-bild {
  display: block; width: 100%; height: auto; border-radius: 14px;
  border: 1px solid var(--ww-line); background: var(--ww-surface);
  box-shadow: 0 30px 60px -28px rgba(16, 38, 58, 0.62), 0 2px 6px rgba(16, 38, 58, 0.18);
}
.atlas-bilder figcaption { margin-top: var(--ww-space-3); color: var(--ww-ink-faint); font-size: var(--ww-text-caption); }

/* Farblegende unter der Buehne */
.farblegende {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
  margin-top: var(--ww-space-6);
  font-family: var(--ww-font-mono); font-size: var(--ww-text-micro); color: var(--ww-label);
}
.farblegende span { display: inline-flex; align-items: center; gap: 7px; }
.farblegende span::before {
  content: ""; width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}
.farblegende .f-alpha::before  { background: #f6f2a8; }
.farblegende .f-bm::before     { background: #a9d8f5; }
.farblegende .f-bp::before     { background: #e0b8ee; }
.farblegende .f-sf::before     { background: #b6e6b6; }
.farblegende .f-stabil::before { background: #d3d6d9; }
.farblegende em {
  font-style: normal; font-family: var(--ww-font-sans);
  font-size: var(--ww-text-caption); color: var(--ww-ink-muted);
}

/* ── Szene: Schulausweis ─────────────────────────────────────────────────── */
.ausweis-szene { display: grid; gap: var(--ww-space-4); justify-items: center; }
.ausweis {
  position: relative; width: min(340px, 100%); aspect-ratio: 85.6 / 54;
  background: var(--ww-surface); border: 1px solid var(--ww-line);
  border-radius: 2px;                    /* rechte Ecken — ID-1 rundet erst beim Schneiden */
  box-shadow: var(--ww-shadow-panel); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
}
.ausweis__band {
  background: var(--ww-brand); color: var(--ww-brand-on);
  padding: 9px 12px 8px;                 /* volles Kopfband, keine schmale Leiste */
}
.ausweis__band b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.ausweis__band span {
  display: block; font-family: var(--ww-font-mono); font-size: 9px;
  color: var(--ww-brand-quiet); margin-top: 2px;
}
.ausweis__leib { display: grid; grid-template-columns: 62px 1fr auto; gap: 11px; padding: 11px 12px; }
.ausweis__bild {
  display: block; width: 100%; height: auto; aspect-ratio: 35 / 45;
  border-radius: 2px; border: 1px solid var(--ww-line);
  align-self: start;
}
.ausweis__feld { min-width: 0; }
.ausweis__feld dt {
  font-family: var(--ww-font-mono); font-size: 8px; letter-spacing: 0.06em;
  color: var(--ww-ink-faint); text-transform: uppercase;
}
.ausweis__feld dd {
  margin: 1px 0 8px; font-size: 13px; font-weight: 600; color: var(--ww-ink);
  overflow-wrap: anywhere;
}
.ausweis__feld dd.klein { font-size: 10.5px; font-weight: 400; font-family: var(--ww-font-mono); }
.ausweis__qr { width: 62px; height: 62px; align-self: end; }

/* Der Prüfstrahl wandert einmal über die Karte */
.ausweis__strahl {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(47, 125, 79, 0.16) 46%, rgba(47, 125, 79, 0.5) 50%, rgba(47, 125, 79, 0.16) 54%, transparent 100%);
  transform: translateY(-100%); opacity: 0;
}
.ausweis.prueft .ausweis__strahl { animation: strahl 1150ms ease-in-out forwards; }
@keyframes strahl {
  0% { transform: translateY(-100%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

.pruefzeile {
  display: flex; align-items: center; gap: 11px;
  width: min(340px, 100%); padding: 11px 14px;
  border: 1px solid var(--ww-line); border-radius: var(--ww-radius-md);
  background: var(--ww-surface);
  font-family: var(--ww-font-mono); font-size: 11.5px; color: var(--ww-ink-soft);
  transition: border-color 320ms, background 320ms;
}
.pruefzeile.gueltig { border-color: var(--ok); background: var(--ok-weich); color: #1f5537; }
.pruefzeile__haken {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--ww-line-strong); display: grid; place-items: center;
  transition: border-color 320ms, background 320ms, transform 320ms;
}
.pruefzeile.gueltig .pruefzeile__haken {
  border-color: var(--ok); background: var(--ok); transform: scale(1.06);
}
.pruefzeile__haken svg { width: 11px; height: 11px; opacity: 0; transition: opacity 240ms 120ms; }
.pruefzeile.gueltig .pruefzeile__haken svg { opacity: 1; }
.pruefzeile__ort { margin-left: auto; color: var(--ww-ink-faint); }
.pruefzeile.gueltig .pruefzeile__ort { color: #3d6b51; }

/* ── Grundsätze ──────────────────────────────────────────────────────────── */
.grundsaetze {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1px; background: var(--ww-line);
  border: 1px solid var(--ww-line); border-radius: var(--ww-radius-md); overflow: hidden;
}
.grundsatz { padding: var(--ww-space-5) var(--ww-space-4); background: var(--ww-surface); }
.grundsatz h3 {
  margin: 0 0 var(--ww-space-2); font-size: var(--ww-text-h3);
  letter-spacing: var(--ww-track-h3); color: var(--ww-ink);
}
.grundsatz p { margin: 0; font-size: var(--ww-text-small); color: var(--ww-ink-soft); line-height: 1.65; }
.grundsatz__marke {
  display: block; margin-bottom: var(--ww-space-3);
  font-family: var(--ww-font-mono); font-size: var(--ww-text-micro);
  color: var(--ww-ink-faint); letter-spacing: 0.06em;
}

/* ── Kontakt und Fuß ─────────────────────────────────────────────────────── */
.kontakt { background: var(--ww-brand); color: var(--ww-brand-on); }
.kontakt .ww-h2, .kontakt .ww-eyebrow { color: var(--ww-brand-on); }
.kontakt .ww-eyebrow { color: var(--ww-brand-quiet); }
.kontakt p { color: var(--ww-brand-quiet); }
.kontakt__gitter {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
/* Achtung Spezifität: das Kit setzt `.ww a:not(.ww-btn) { color: var(--ww-brand) }`
   — das ist (0,2,1) und schlägt eine einfache Klasse. Auf den dunklen Flächen
   stünde Schiefer auf Schiefer, also unsichtbar. Deshalb tragen alle Links auf
   dunklem Grund hier den Elementselektor mit. */
.kontakt a.kontakt__weg {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 20px; border: 1px solid #405464; border-radius: var(--ww-radius-md);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--ww-font-mono); font-size: var(--ww-text-small);
  color: var(--ww-brand-on); text-decoration: none;
  transition: border-color 220ms, background 220ms, color 220ms;
}
.kontakt a.kontakt__weg:hover {
  border-color: #7d95a8; background: rgba(255, 255, 255, 0.08); color: var(--ww-brand-on);
}
.kontakt .ww-terminal { margin: 0; }

.fuss { background: var(--ww-brand-deep); color: var(--ww-brand-quiet); padding-block: var(--ww-space-6); }
.fuss a, .fuss a:not(.ww-btn) {
  color: var(--ww-brand-quiet); text-decoration: none; border-bottom: 1px solid #2b3f4f;
}
.fuss a:hover, .fuss a:not(.ww-btn):hover { color: #fff; border-bottom-color: #7d95a8; }
.fuss__reihe {
  display: flex; flex-wrap: wrap; gap: var(--ww-space-3) var(--ww-space-5);
  align-items: center; justify-content: space-between;
  font-size: var(--ww-text-caption);
}
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--ww-space-4); }
.fuss__fein {
  margin-top: var(--ww-space-4); padding-top: var(--ww-space-4);
  border-top: 1px solid #253748;
  font-family: var(--ww-font-mono); font-size: var(--ww-text-micro); color: #6b8296;
  line-height: 1.7;
}

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.recht { max-width: 74ch; overflow-wrap: anywhere; }
/* Sprungziel innerhalb einer Seite: der Kopf klebt oben und verdeckt sonst die
   Überschrift. Die Nuklidkarte 1.8 öffnet /Nuklidkarte/#privacy und #impressum. */
.recht [id] { scroll-margin-top: 84px; }
.recht h2 {
  margin: var(--ww-space-6) 0 var(--ww-space-3);
  font-size: 21px; letter-spacing: var(--ww-track-h3); color: var(--ww-ink);
}
.recht h3 {
  margin: var(--ww-space-5) 0 var(--ww-space-2);
  font-size: var(--ww-text-body-lg); color: var(--ww-ink);
}
.recht p, .recht li { color: var(--ww-ink-soft); line-height: 1.72; font-size: var(--ww-text-body); }
.recht p { margin: 0 0 var(--ww-space-3); }
.recht ul { margin: 0 0 var(--ww-space-3); padding-left: 20px; }
.recht li { margin-bottom: 7px; }
.recht dl {
  margin: 0 0 var(--ww-space-4); display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr); gap: 7px 20px;
}
.recht dt { font-family: var(--ww-font-mono); font-size: var(--ww-text-caption); color: var(--ww-ink-faint); }
.recht dd { margin: 0; color: var(--ww-ink); }
.recht .hinweis {
  padding: var(--ww-space-4); border-left: 3px solid var(--ww-brand);
  background: var(--ww-surface); border-radius: 0 var(--ww-radius-sm) var(--ww-radius-sm) 0;
}
.recht .hinweis p:last-child { margin-bottom: 0; }

/* ── Schmale Fenster ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  /* minmax(0, 1fr), nicht 1fr: eine Rasterzelle ist sonst mindestens so breit
     wie ihr breitester unumbrechbarer Inhalt. Die frühere Zerfallsketten-Grafik
     hatte 480 px Mindestbreite und schob den ganzen Abschnitt über den Bildrand. */
  .buehne__inhalt, .produkt__gitter, .kontakt__gitter, .hilfe__intro, .robots-videos__gitter { grid-template-columns: minmax(0, 1fr); }
  .produkt--gedreht .produkt__buehne { order: 0; }
  /* NICHT justify-self: center — das lässt die Rasterzelle auf Inhaltsbreite
     schrumpfen, und `width: min(500px, 100%)` im Gerät bezieht sich dann auf
     eine Breite, die es selbst bestimmt. Ergebnis war ein 44 px breites Tablet.
     Das Gerät zentriert sich ohnehin über margin-inline: auto. */
  .buehne__geraet { justify-self: stretch; }
  .app-teil--kern { right: 4px; width: 200px; }
  .merker--a { left: 4px; }
  .merker--b { left: 4px; }
  /* Verwandlung über die volle Breite, die beiden Blätter darunter nebeneinander. */
  .atlas-bilder__gitter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .atlas-bilder__gitter > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .atlas-bilder__gitter { grid-template-columns: minmax(0, 1fr); }
  .atlas-bilder__blatt .atlas-bild { max-width: 320px; margin-inline: auto; }
}
@media (max-width: 1100px) {
  .nav-schalter { display: block; }
  /* Das Kit stapelt den Kopf unter 640 px (dort läuft die Navigation unter die
     Wortmarke). Hier gibt es stattdessen einen Schalter — Wortmarke und Schalter
     gehören deshalb nebeneinander, sonst ist der Kopf doppelt so hoch. */
  .kopf .ww-header {
    flex-direction: row; align-items: center; gap: var(--ww-space-3);
  }
  .kopf .ww-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px var(--ww-gutter) 18px;
    background: var(--ww-ground); border-bottom: 1px solid var(--ww-line);
    box-shadow: var(--ww-shadow-panel);
  }
  .kopf .ww-nav.offen { display: flex; }
  .kopf .ww-nav a { padding: 12px 0; border-bottom: 1px solid var(--ww-line); }
  .kopf .ww-nav a.ww-btn { margin-top: 12px; border-bottom: 0; justify-content: center; }
}
@media (max-width: 700px) {
  :root { --ww-gutter: 22px; --ww-section-y: 58px; }
  .merker, .app-teil--kern { display: none; }  /* auf dem Telefon nur das Gerät */
  .grundsaetze { grid-template-columns: minmax(0, 1fr); }
  .recht dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .recht dd { margin-bottom: var(--ww-space-3); }
  .fuss__reihe { flex-direction: column; align-items: flex-start; }
}

/* ── Bewegung abbestellt ─────────────────────────────────────────────────── */
/* Nicht nur das Auffällige: auch der Kartenaufbau und die Endzustände. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .zeig { opacity: 1; transform: none; }
  .bild-ring, .bildnoten li { opacity: 1; }
}

/* ── Druck ───────────────────────────────────────────────────────────────── */
@media print {
  .kopf, .scrollwink, .blase, .raster, .geraet, .kontakt { display: none; }
  body { background: #fff; }
  .recht { max-width: none; }
}

/* ── Nachtrag: schmale Schirme ───────────────────────────────────────────── */
@media (max-width: 560px) {
  /* Zwei verschieden breite Knöpfe untereinander sehen aus wie ein Versehen */
  .ww-actions { flex-direction: column; align-items: stretch; }
  .ww-actions .ww-btn { justify-content: center; text-align: center; }
}