/* ==========================================================================
   mahler.rocks · Mahler Group – site.css
   „Neutral, aber krass" (Chris, 22.10.2026): Schwarz und gebrochenes Weiß,
   Plakattypografie. v1.2 („sehr verspielt animiert, Überschrift bunter"),
   v1.3 („sieht nach Spielzeugkasten aus, soll rockiger werden"): statt sechs
   Bonbonfarben eine Glut von Gelb über das Mahler-Orange bis Rot, hohle
   Plakatschrift, Korn. Je Marke deren Farbe aus dem eigenen Logo.
   Bewegt wird nur transform (Kanon 13.2, 13.5.2); jede Schleife ruht
   außerhalb des Fensters (12.19, waechter.js).
   Schriften wie Druckerei Mahler (Bricolage Grotesque, Inter), selbst gehostet
   (Kanon 7.6). Im Komponententeil stehen nur var()-Werte; Rohwerte nur in Tokens.
   ========================================================================== */

/* ---------- Schriften (Kanon 7.6) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-standard-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  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: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  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-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  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: "Inter";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
  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;
}

/* ---------- Tokens ---------- */
:root {
  --eyedee-stand: "Mahler Group v1.8 23.10.2026 · Kanon v5.18.4";   /* Versionsmarke 10.12a */

  --schwarz: #0b0b0b;
  --schwarz-rgb: 11 11 11;
  --flaeche: #151515;       /* Zeile beim Darüberfahren */
  --weiss: #f2f2ee;          /* auf --schwarz 17,6:1 */
  --grau: #9a9a94;           /* auf --schwarz 7,0:1, auf --flaeche 6,4:1 */
  --linie: #2c2c2a;
  --fehlt: #fff3c4;          /* Markierung offener Angaben (Klasse .fehlt) */
  --fehlt-ink: #0b0b0b;

  /* Glut (v1.3). Kontrast auf --schwarz / --flaeche (Kanon 5.27): */
  --glut-1: #ffc23a;         /* 12,2 / 11,3 */
  --glut-2: #ffb02e;         /* 10,8 / 10,0 */
  --glut-3: #ff8a1f;
  --orange: #f36717;         /* 6,3 / 5,9 — Logo der Druckerei */
  --rot: #ff3b1f;            /* 5,5 / 5,1 */
  --violett: #e040d8;        /* blickdicht.shop, Logo #a800a0 (3,0:1) aufgehellt — 5,5 / 5,1 */
  /* Glut läuft in das Violett von blickdicht aus (Chris, 23.10.2026). In der Zeichnung
     liegt das Violett damit genau auf der Glaswand, dem Motiv von blickdicht. */
  --glut: linear-gradient(90deg, var(--glut-1), var(--orange) 40%, var(--rot) 68%, var(--violett));

  /* Markenfarben aus den Logos, wo nötig aufgehellt für ≥ 4,5:1 */
  --marke-carvinyl: #c0c0c0;   /* Silber, wie Logo — 10,8 / 10,0 */
  --marke-anydeck: #c8a36a;    /* Logo #806030 (3,4:1) aufgehellt — 8,3 / 7,7 */
  --marke-blickdicht: var(--violett);

  /* Korn: statisches Rauschen als Bild (kein Filter auf Bewegtem, 12.19) */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --korn-deckkraft: .07;
  --kontur: max(1px, .01em);   /* sichtbare Kontur wächst mit der Schrift: 1 px am Handy, ~3 px im Plakat */

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;   --sp-8: 4rem;
  --sec-s: clamp(3rem, 6vw, 5rem);
  --sec-m: clamp(4rem, 10vw, 8rem);
  --ziel: 3.25rem;           /* 52 px Trefferfläche (Kanon 5.3) */

  --fs-1: .75rem; --fs-2: .875rem; --fs-3: 1rem; --fs-4: 1.125rem;
  --fs-5: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --fs-6: clamp(2.5rem, 1.2rem + 5vw, 5rem);
  --fs-marke: clamp(2.75rem, 1rem + 7vw, 7.5rem);
  --fs-mega: clamp(3.25rem, 0.25rem + 15.5vw, 20rem);
  --lh-eng: .86; --lh-titel: 1.05; --lh-normal: 1.6;
  --track-eng: -.025em; --track-weit: .14em;

  --r-1: 2px; --r-2: 6px;
  --ki-polster: .15rem .4rem;   /* KI-Angabe, dezent (unter der Spacing-Leiter) */
  --punkt: .16em;
  --breite-text: 38rem;
  --breite-seite: 96rem;
  --dur-1: .2s; --dur-2: .45s; --dur-3: .8s;
  --dur-welle: 2.4s; --dur-band: 36s;
  --takt: 45ms;              /* Versatz je Buchstabe */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hops: cubic-bezier(.3, 1.7, .5, 1);   /* mit Überschwinger */
  --kipp: 9deg; --kipp-klein: 2deg;
  --hub: .4em; --hub-klein: .1em;
  --hair: 1px;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;

  /* Kit-Bausteine (Agenturvermerk) lesen diese Namen; ohne sie greift ihr
     Rückfallgrau #6e6a64 — auf Schwarz unter 4,5:1 */
  --color-muted: var(--grau);
  --color-line: var(--linie);

  /* Barrierefreiheits-Panel (Kit): Knopf dunkel mit hellem Rand, Panel hell */
  --a11y-ink: #181818;
  --a11y-paper: #ffffff;
  --a11y-akzent: #181818;
  --a11y-akzent-grad: linear-gradient(var(--weiss), var(--weiss));
}

/* Barrierefreiheits-Panel (Kit, Fremd-DOM 16.x): Das Panel ist hell, erbt aber die helle
   Schriftfarbe der Seite. Überschrift, Regler-Beschriftungen und Werte (--brand-deep) standen
   damit weiß auf weiß (Chris, 23.10.2026: „hier stimmen die Farben noch nicht"). Schrift des
   Panels deshalb auf seine eigene Tinte; Kit-Datei bleibt unverändert. */
.a11y-panel { color: var(--a11y-ink); --brand-deep: var(--a11y-ink); }

/* Schalter des Panels an die eigenen Tokens angeschlossen (Kanon 5.4). Das Kit-Panel setzt
   nur Kit-Namen (--ink, --muted, --brand, --lh); diese Seite färbt über --weiss, --grau,
   --glut — Kontrast, Farbschemata und Zeilenabstand liefen ins Leere (gemessen 23.10.2026).
   Kontrast: Grau wird Weiß, Linien heller, kein Korn, KI-Fläche dichter. */
body.a11y-contrast { --grau: var(--weiss); --color-muted: var(--weiss); --linie: #8a8a85; --korn-deckkraft: 0; }
body.a11y-contrast .ki-hinweis { background: rgb(var(--schwarz-rgb) / .9); }
/* Rot-Grün (Deuteranopie/Protanopie): Glut wird Gelb → Blau → Rosa (Okabe-Ito), alle ≥ 5,3:1 */
body.cb-rg {
  --glut-1: #f0e442; --glut-2: #e6c229; --glut-3: #9ccff0;
  --orange: #56b4e9; --rot: #3b8fdc; --violett: #cc79a7;
}
/* Blau-Gelb (Tritanopie): Glut wird Rosa → Rot, blickdicht Türkis, alle ≥ 4,5:1 (Rot 4,5 nur Großschrift) */
body.cb-by {
  --glut-1: #ff9e9e; --glut-2: #ff7b7b; --glut-3: #ff5c5c;
  --orange: #ff4d4d; --rot: #e0306b; --violett: #2ec4b6;
}
/* Abgeleitete Tokens neu auflösen, damit die Ersatzfarben in Verlauf und Akzenten ankommen */
body.cb-rg, body.cb-by {
  --glut: linear-gradient(90deg, var(--glut-1), var(--orange) 40%, var(--rot) 68%, var(--violett));
  --marke-blickdicht: var(--violett);
}
/* Zeilenabstand: Das Panel setzt --lh am body; Fließtext übernimmt ihn. */
body[style*="--lh"] :is(p, li, dd, address) { line-height: var(--lh, 1.6); }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--font-text);
  font-size: var(--fs-3);
  line-height: var(--lh-normal);
}
/* Korn hinter dem Inhalt (z-index -1): liegt über dem schwarzen Grund, unter Text
   und Fotos — Fotos und KI-Angabe bleiben unberührt. Steht still. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--korn); opacity: var(--korn-deckkraft);
  pointer-events: none;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--weiss); outline-offset: 3px; }
::selection { background: var(--weiss); color: var(--schwarz); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--sp-4); top: var(--sp-4); z-index: 1000;
  padding: var(--sp-3) var(--sp-4); background: var(--weiss); color: var(--schwarz);
  border-radius: var(--r-2); transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--breite-seite);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}
.etikett {
  font-size: var(--fs-1); font-weight: 600; letter-spacing: var(--track-weit);
  text-transform: uppercase; color: var(--grau);
}

/* ---------- Kopf ---------- */
.kopf { border-bottom: var(--hair) solid var(--linie); }
.kopf__in {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: var(--sp-8);
}
.gruppe-marke {
  font-family: var(--font-display); font-weight: 800; font-stretch: 80%;
  font-size: var(--fs-4); letter-spacing: var(--track-weit); text-transform: uppercase;
  text-decoration: none;
}
a.gruppe-marke { display: inline-flex; align-items: center; min-height: var(--ziel); }
.gruppe-marke, .kopf .etikett { white-space: nowrap; }
@media (max-width: 760px) { .nur-breit { display: none; } }

/* ---------- Einstieg ---------- */
.intro { padding-block: var(--sec-s) 0; }
.intro h1 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%;
  font-size: var(--fs-mega); line-height: var(--lh-eng); letter-spacing: var(--track-eng);
}
.titel__zeile { display: block; }

/* Buchstaben einzeln (für das Anhüpfen). Der Text steht für Screenreader einmal
   ganz (.sr-only), die Buchstaben sind aria-hidden. Wörter brechen nie in sich.
   Erste Zeile hohl, zweite Zeile glüht von Gelb nach Rot. */
.wort { display: inline-block; white-space: nowrap; }
.z { display: inline-block; }
/* Hohl: Die Schrift ist variabel und hat überlappende Konturen — eine reine Kontur
   zeigt die Überlappungen innen als Linien. Deshalb doppelt breite Kontur ZUERST
   malen, dann mit Schwarz füllen (paint-order): die Füllung deckt die innere Hälfte
   und alle Überlappungen, außen bleibt eine saubere Kontur. */
.titel__zeile--hohl .z, .band__teil b:nth-of-type(even), .wortmarke {
  color: var(--schwarz);
  -webkit-text-stroke: calc(var(--kontur) * 2) var(--kontur-farbe, var(--weiss));
  paint-order: stroke fill;
}
/* Ohne Konturschrift kein hohler Text, sondern voller — nie unsichtbar */
@supports not (-webkit-text-stroke: 1px) {
  .titel__zeile--hohl .z, .band__teil b:nth-of-type(even) { color: var(--weiss); }
  .wortmarke { color: var(--orange); }
}
.g1 { color: var(--glut-1); } .g2 { color: var(--glut-2); } .g3 { color: var(--glut-3); }
.g4 { color: var(--orange); } .g5 { color: var(--rot); } .g6 { color: var(--violett); }

/* „mahler.rocks" — die künftige Domain als Teil der Marke: in der Wortmarke im Fuß
   „.rocks" voll in der Glut, im Laufband als Wort mit Verlaufsfüllung. */
.wortmarke .wort--voll { -webkit-text-stroke: 0; }
.band__domain {
  text-transform: none;
  background: var(--glut); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-stroke: 0;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .band__domain { color: var(--orange); background: none; }
}
.z:nth-child(even) { --kipp: calc(var(--kipp-klein) * -4.5); }
.z:nth-child(2) { --n: 1; } .z:nth-child(3) { --n: 2; } .z:nth-child(4) { --n: 3; }
.z:nth-child(5) { --n: 4; } .z:nth-child(6) { --n: 5; } .z:nth-child(7) { --n: 6; }
.z:nth-child(8) { --n: 7; } .z:nth-child(9) { --n: 8; }
.wort + .wort { --w: 5; }
.titel__zeile + .titel__zeile .wort { --w: 13; }
.titel__zeile + .titel__zeile .wort + .wort { --w: 16; }

/* Einstieg: Buchstaben hüpfen an ihren Platz — nur transform, ab dem ersten Bild
   deckend sichtbar (13.5.2), reines CSS (13.5.1). */
.intro h1 .z {
  animation: hops var(--dur-3) var(--hops) backwards;
  animation-delay: calc((var(--w, 0) + var(--n, 0)) * var(--takt));
  transition: transform var(--dur-1) var(--hops);
}
@keyframes hops {
  from { transform: translateY(var(--hub)) rotate(var(--kipp)); }
  to   { transform: none; }
}
.intro__unten {
  display: grid; gap: var(--sp-6);
  margin-top: var(--sp-7); padding-block: var(--sp-6);
  border-top: var(--hair) solid var(--linie);
}
.intro__lead { max-width: var(--breite-text); font-size: var(--fs-4); color: var(--grau); }
.intro__lead strong { color: var(--weiss); font-weight: 500; }
.sprung { list-style: none; margin: 0; padding: 0; display: grid; }
.sprung a {
  display: flex; align-items: baseline; gap: var(--sp-4);
  min-height: var(--ziel); padding-block: var(--sp-2);
  border-bottom: var(--hair) solid var(--linie);
  text-decoration: none; font-weight: 500;
}
.sprung__nr { font-size: var(--fs-1); font-weight: 700; color: var(--akzent, var(--grau)); font-variant-numeric: tabular-nums; }

/* Je Marke deren Farbe aus dem Logo, in Sprungliste und Markenzeile gleich */
.sprung li:nth-child(1), .marken__liste li:nth-child(1) { --akzent: var(--orange); }
.sprung li:nth-child(2), .marken__liste li:nth-child(2) { --akzent: var(--marke-carvinyl); }
.sprung li:nth-child(3), .marken__liste li:nth-child(3) { --akzent: var(--marke-anydeck); }
.sprung li:nth-child(4), .marken__liste li:nth-child(4) { --akzent: var(--marke-blickdicht); }

/* Zeichnung: weiße Linien auf Schwarz (invertiert, Papierton fällt weg); darüber
   die Glut mit multiply — Schwarz bleibt schwarz, die Linien glühen.
   Alles steht still, kein Filter in Bewegung (13.2).
   Vier gleich große Felder, je ein Motiv auf das Feld gerechnet, Haarlinien
   dazwischen, Nummer wie in der Sprungliste (v1.7, Chris: „die Größen der einzelnen
   Bereiche gleich groß"). Zwei Spalten unter 761 px. */
.bauplan {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hair);
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  background: var(--linie); border-block: var(--hair) solid var(--linie); overflow: hidden;
}
.bauplan::after {
  content: ""; position: absolute; inset: 0;
  background: var(--glut); mix-blend-mode: multiply;
  pointer-events: none;
}
.bauplan li { position: relative; background: var(--schwarz); }
.bauplan img {
  width: 100%; aspect-ratio: 1;
  filter: invert(1) grayscale(1) contrast(1.15);
  mix-blend-mode: lighten;
  opacity: .9;
}
.bauplan__nr {
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 1;
  font-size: var(--fs-1); font-weight: 700; letter-spacing: var(--track-weit);
  color: var(--weiss); font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) { .bauplan { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Laufband (eine Dauerschleife, ruht außerhalb des Fensters, 12.19) ---------- */
.band { overflow: hidden; border-block: var(--hair) solid var(--linie); padding-block: var(--sp-4); }
.band__spur { display: flex; width: max-content; animation: band var(--dur-band) linear infinite; }
.band__teil {
  display: flex; align-items: center; gap: var(--sp-7); padding-right: var(--sp-7);
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%;
  font-size: var(--fs-6); line-height: var(--lh-eng); text-transform: uppercase; white-space: nowrap;
}
/* Wörter abwechselnd voll und hohl, dazwischen eine kleine Raute in Orange als Takt —
   klein und mit Luft (v1.7, Chris: „zu wild … zu eng oder die Rauten so auffällig") */
.band__teil b { font-weight: inherit; }
.band__teil i {
  display: inline-block; flex: 0 0 auto; width: var(--punkt); height: var(--punkt);
  background: var(--orange); transform: rotate(45deg);
}
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- Marken ---------- */
.marken { padding-block: var(--sec-m) var(--sec-s); }
.marken__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.marken h2 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 80%;
  font-size: var(--fs-6); line-height: var(--lh-titel); letter-spacing: var(--track-eng);
}
/* Ohne Abschlusslinie: Der Fuß zieht direkt darunter seine eigene (Chris, 23.10.2026: „überflüssig") */
.marken__liste { list-style: none; margin: var(--sp-7) 0 0; padding: 0; }

.zeile {
  display: grid; gap: var(--sp-5);
  padding-block: var(--sp-7);
  border-top: var(--hair) solid var(--linie);
  text-decoration: none; color: inherit;
  scroll-margin-top: var(--sp-6);
  transition: background-color var(--dur-2) var(--ease);
}
.zeile__nr {
  display: inline-block; justify-self: start; align-self: start;
  font-size: var(--fs-2); font-weight: 700; color: var(--akzent); font-variant-numeric: tabular-nums;
  transition: transform var(--dur-2) var(--hops);
}
.zeile__name {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%;
  font-size: var(--fs-marke); line-height: var(--lh-eng); letter-spacing: var(--track-eng);
  overflow-wrap: anywhere;
  transition: transform var(--dur-2) var(--hops), color var(--dur-1) var(--ease);
}
.zeile__text { display: grid; gap: var(--sp-4); align-content: start; }
/* Logo der Marke über dem Namen (Logos für dunklen Grund gezeichnet; Druckerei als
   helle Fassung der SVG). Der Name steht daneben als Text, das Logo hat alt="". */
.zeile__logo { height: var(--sp-6); width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.zeile__beschreibung { max-width: var(--breite-text); color: var(--grau); }
.zeile__ziel {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--ziel); font-weight: 600;
}
.zeile__ziel svg { width: var(--sp-5); height: var(--sp-5); transition: transform var(--dur-1) var(--ease); }

/* Der Rahmen steht still (er trägt die KI-Angabe, 5.2a); gekippt wird nur das Foto darin. */
.zeile__bild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-1); }
.zeile__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-2) var(--hops); }
.zeile:focus-visible { outline-offset: -2px; }

/* Aktive Zeile (Maus oder Tastatur): Name rückt ein und nimmt die Akzentfarbe an,
   die Nummer dreht sich, das Foto kippt leicht. Nur transform und Farbe. */
.zeile:focus-visible { background: var(--flaeche); }
.zeile:focus-visible .zeile__name { color: var(--akzent); transform: translateX(var(--sp-4)); }
.zeile:focus-visible .zeile__nr { transform: rotate(calc(var(--kipp) * -2)) scale(1.6); }
.zeile:focus-visible .zeile__bild img { transform: scale(1.1) rotate(var(--kipp-klein)); }
.zeile:focus-visible .zeile__ziel svg { transform: translate(var(--sp-1), calc(var(--sp-1) * -1)); }

@media (hover: hover) {
  /* Mit Maus: Fotos schwarzweiß über eine Sättigungsebene, Farbe beim Darüberfahren.
     Animiert wird die Deckkraft der Ebene, kein Filter (13.2). Auf Touch bleiben
     die Fotos farbig — dort gibt es kein Darüberfahren. */
  .zeile__bild::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--schwarz); mix-blend-mode: saturation;
    transition: opacity var(--dur-2) var(--ease);
    pointer-events: none;
  }
  .zeile:focus-visible .zeile__bild::after,
  .zeile:hover .zeile__bild::after { opacity: 0; }
  .zeile:hover { background: var(--flaeche); }
  .zeile:hover .zeile__name { color: var(--akzent); transform: translateX(var(--sp-4)); }
  .zeile:hover .zeile__nr { transform: rotate(calc(var(--kipp) * -2)) scale(1.6); }
  .zeile:hover .zeile__bild img { transform: scale(1.1) rotate(var(--kipp-klein)); }
  .zeile:hover .zeile__ziel svg { transform: translate(var(--sp-1), calc(var(--sp-1) * -1)); }
  .sprung a:hover { color: var(--akzent); }
  .intro h1 .z:hover { transform: translateY(calc(var(--hub-klein) * -1.5)) rotate(var(--kipp)); }
  .titel__zeile--hohl .z:hover { color: var(--orange); --kontur-farbe: var(--orange); }
  .band:hover .band__spur { animation-play-state: paused; }
  .fuss a:hover { text-decoration: underline; text-underline-offset: .2em; }
}

/* ---------- Fuß ---------- */
/* Unten Platz für den schwebenden Barrierefreiheits-Knopf (unten links). */
.fuss { padding-block: var(--sp-7) calc(var(--sp-8) + var(--sp-6)); font-size: var(--fs-2); border-top: var(--hair) solid var(--linie); }
.fuss__raster { display: grid; gap: var(--sp-5); }
.fuss__nap { font-style: normal; color: var(--grau); }
.fuss__nap strong { color: var(--weiss); font-weight: 600; }
.fuss__rechts { display: grid; gap: var(--sp-3); }
.fuss__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); list-style: none; margin: 0; padding: 0; }
.fuss__links a, .fuss__nap a {
  display: inline-flex; align-items: center; min-height: var(--ziel); text-decoration: none; color: var(--weiss);
}
.credit { color: var(--grau); }
/* Agenturvermerk: nur „eyedee®" ist der Link (Kanon 1.2), Trefferfläche 52 px (5.3) */
.credit a { display: inline-flex; align-items: center; min-height: var(--ziel); text-decoration: none; }
/* Im Flex-Link wirkt vertical-align: super nicht — ® über die Lage hochstellen (1.3) */
.credit a sup { position: relative; top: -.5em; }
.wortmarke {
  margin-top: var(--sp-7);
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%;
  font-size: var(--fs-mega); line-height: var(--lh-eng); letter-spacing: var(--track-eng);
  white-space: nowrap; overflow: hidden;
  padding-block: var(--sp-4) var(--sp-6);   /* Raum für den Hub der Welle und die Unterlänge des „p", sonst schneidet overflow ab */
  user-select: none;
  --kontur-farbe: var(--orange);   /* hohl in Orange (Regel bei .titel__zeile--hohl) */
}
/* Erst wenn spiel.js „los" setzt (Wortmarke im Bild, Bewegung erlaubt): einmal
   anhüpfen, danach eine sanfte Welle. Ohne Skript steht sie bunt und still. */
.wortmarke.los .z {
  animation: hops var(--dur-3) var(--hops) backwards, welle var(--dur-welle) ease-in-out infinite;
  animation-delay: calc((var(--w, 0) + var(--n, 0)) * var(--takt)),
                   calc(var(--dur-3) + (var(--w, 0) + var(--n, 0)) * var(--takt) * 3);
}
@keyframes welle {
  0%, 100% { transform: none; }
  50%      { transform: translateY(calc(var(--hub-klein) * -1)); }
}

/* ---------- Rechtsseiten ---------- */
.recht { padding-block: var(--sec-s); overflow-wrap: break-word; hyphens: auto; }
.recht h1 {
  font-family: var(--font-display); font-weight: 800; font-stretch: 75%;
  font-size: var(--fs-6); line-height: var(--lh-titel); letter-spacing: var(--track-eng);
}
.recht h2 { margin-top: var(--sp-6); font-family: var(--font-display); font-weight: 700; font-stretch: 85%; font-size: var(--fs-5); line-height: var(--lh-titel); scroll-margin-top: var(--sp-6); }
/* Inhaltsverzeichnis der Rechtsseiten (Kanon 7.8a): Sprungmarken auf jede h2, Rücksprung am Ende */
.recht .inhalt { margin-top: var(--sp-6); padding: var(--sp-5); max-width: var(--breite-text); background: var(--flaeche); border-radius: var(--r-2); scroll-margin-top: var(--sp-6); }
.recht .inhalt h2 { margin-top: 0; }
.recht .inhalt ol { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); }
.recht .inhalt a { display: inline-flex; align-items: center; min-height: var(--ziel); }
.recht p { margin-top: var(--sp-3); max-width: var(--breite-text); }
.recht a { color: var(--weiss); }
.recht .zurueck { display: inline-flex; align-items: center; min-height: var(--ziel); margin-top: var(--sp-6); font-weight: 600; }
.fehlt { background: var(--fehlt); color: var(--fehlt-ink); padding-inline: var(--sp-1); }

/* ---------- KI-Kennzeichnung (Kanon 7.10, 7.14, 7.15, 5.2c) ----------
   Träger ist der vorhandene, positionierte Bildrahmen (.zeile__bild); die Angabe
   liegt über der Sättigungsebene. Ecke unten rechts: unten links sitzt der
   Barrierefreiheits-Knopf (5.2b).
   Dezent (Chris, 23.10.2026: „deutlich kleiner und nicht so kontrastreich"): kleine
   Schrift, mittlere Stärke, Fläche 60 % — die Untergrenze für ≥ 4,5:1 liegt bei 58 %
   (Weiß auf #0b0b0b über weißem Bildgrund: 60 % = 5,17:1, 55 % = 4,35:1). */
.ki-hinweis {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2); z-index: 999;
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--ki-polster);
  border-radius: var(--r-1);
  background: rgb(var(--schwarz-rgb) / .6);
  font-family: var(--font-text); font-weight: 500; letter-spacing: .05em;
}
.ki-hinweis .ki-icon {
  display: block; flex: 0 0 auto;
  background: url("../img/ai-icons/ai-icon-light.svg") center / contain no-repeat;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}

/* ---------- Umbrüche (Kanon 5.0) ---------- */
@media (min-width: 761px) {
  .intro__unten { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Zweispaltig: Der Seitenkopf passt so bis 1920×950 und 1280×560 (12.21, Messung D) */
  .sprung { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
  .zeile { grid-template-columns: 4rem 1fr; }
  .zeile__nr { padding-top: var(--sp-3); }
  .zeile__bild { grid-column: 2; }
  .fuss__raster { grid-template-columns: 1fr auto; align-items: start; }
  .fuss__rechts { justify-items: end; }
}
@media (min-width: 1001px) {
  .zeile { grid-template-columns: 5rem minmax(0, 7fr) minmax(0, 5fr); align-items: start; padding-inline: var(--sp-4); }
  .zeile__bild { grid-column: 3; grid-row: 1; }
  .zeile__text { grid-column: 2; grid-row: 1; }
}
/* Flache Fenster (12.21): Einstieg passt bis 1280×560 ohne Scrollen */
@media (max-height: 760px) and (min-width: 761px) {
  .intro h1 { font-size: clamp(3rem, 1rem + 8vw, 9rem); }
  .intro__unten { margin-top: var(--sp-5); padding-block: var(--sp-4); }
}

/* Bewegung reduzieren (13.4, 13.13): Systemeinstellung oder Schalter im Panel.
   Alles steht an seinem Ende — Buchstaben an ihrem Platz, Laufband still.
   Selektoren mindestens so spezifisch wie die Regeln, die die Bewegung starten
   (.intro h1 .z) — sonst gewinnt die Bewegung. So in v1.2/v1.3 passiert, in p.006 behoben. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro h1 .z, .wortmarke.los .z, .band__spur { animation: none; }
  .intro h1 .z, .zeile, .zeile__name, .zeile__nr, .zeile__bild img, .zeile__bild::after, .zeile__ziel svg { transition: none; }
}
body.a11y-motion .intro h1 .z, body.a11y-motion .wortmarke.los .z, body.a11y-motion .band__spur { animation: none; }
body.a11y-motion :is(.intro h1 .z, .zeile, .zeile__name, .zeile__nr, .zeile__bild img, .zeile__bild::after, .zeile__ziel svg) { transition: none; }

/* ==========================================================================
   Kanon 5.2a Härteblock: Die KI-Angabe darf von keiner Bild- oder Absatzregel
   erfasst werden. Am Ende, außerhalb jeder Medienabfrage, mit !important.
   ========================================================================== */
.ki-hinweis {
  margin: 0 !important;
  color: #fff !important;
  font-size: .6rem !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  text-transform: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.ki-hinweis .ki-icon {
  position: static !important;
  width: .95em !important;
  height: .95em !important;
  transform: none !important;
  filter: none !important;
}

/* Kanon 12.19 Härteblock: Abschnitte außerhalb des Fensters (waechter.js) halten
   jede CSS-Animation an — auch solche, die eine spätere Regel neu setzt. */
.ruht, .ruht * { animation-play-state: paused !important; }