/* ==========================================================================
   ECHOKAMMER — Festival für elektronische Musik (fiktiv)
   Brutal-Rave: Schwarz, gebrochenes Weiß, Acid-Lime, sparsam UV-Violett.
   ========================================================================== */

/* ---------- Schriften (lokal, latin + latin-ext) ---------- */
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/unbounded-latin-wght-normal.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: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/unbounded-latin-ext-wght-normal.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-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-latin-400-normal.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: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/space-mono-latin-ext-400-normal.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-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-mono-latin-700-normal.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: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-mono-latin-ext-700-normal.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;
}

/* ---------- Tokens ---------- */
:root {
  --schwarz: #0a0a0a;
  --flaeche: #111110;
  --flaeche-2: #171716;
  --weiss: #f0ede6;
  --weiss-matt: #c9c5bc;
  --grau: #8f8b82;
  --linie: rgba(240, 237, 230, 0.16);
  --linie-schwach: rgba(240, 237, 230, 0.06);
  --saeure: #c8ff00;
  --uv: #9b6bff;

  --display: "Unbounded", "Arial Black", "Helvetica Neue", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --rand: clamp(16px, 3.2vw, 48px);
  --kopf-h: 64px;
  --abstand: clamp(72px, 8.5vw, 136px);
  --weich: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: dark;
}
@media (max-width: 719px) {
  :root { --kopf-h: 56px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 8px);
  background: var(--schwarz);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--schwarz);
  color: var(--weiss);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.scroll-sperre { overflow: hidden; }

/* Feines Korn über allem (statisch, als Daten-SVG — keine externe Anfrage) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' 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 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

main { display: block; }
img, svg, canvas { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
.grau { color: var(--grau); }

::selection { background: var(--saeure); color: var(--schwarz); }

:focus-visible {
  outline: 2px solid var(--saeure);
  outline-offset: 3px;
}

.nur-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprung {
  position: fixed;
  left: var(--rand);
  top: 8px;
  z-index: 1100;
  padding: 10px 16px;
  background: var(--saeure);
  color: var(--schwarz);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
}
.sprung:focus { transform: none; outline-color: var(--weiss); }

.hinweis-nojs { padding: 24px 0; color: var(--grau); }

/* ---------- Eigener Cursor ---------- */
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
  mix-blend-mode: difference;
}
.hat-cursor .cursor { display: block; opacity: 0; transition: opacity 0.2s; }
.hat-cursor .cursor.ist-da { opacity: 1; }
.hat-cursor,
.hat-cursor * { cursor: none !important; }
.cursor::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  width: 4px;
  height: 4px;
  background: var(--saeure);
}
.cursor__rahmen {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--saeure);
  transition: left 0.25s var(--weich), top 0.25s var(--weich), width 0.25s var(--weich), height 0.25s var(--weich), transform 0.15s;
}
.cursor.ist-gross .cursor__rahmen { left: -26px; top: -26px; width: 52px; height: 52px; }
.cursor.ist-gedrueckt .cursor__rahmen { transform: scale(0.8); }
.cursor__text {
  position: absolute;
  left: 32px;
  top: 16px;
  padding: 1px 5px;
  color: var(--saeure);
  font: 700 10px/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cursor__text:empty { display: none; }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--kopf-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--rand);
  border-bottom: 1px solid var(--linie);
}
/* Blur auf einem Pseudo-Element: backdrop-filter am Header selbst würde ihn zum
   Containing Block für das fixierte Handy-Menü machen (Menü wäre dann 0 px hoch). */
.kopf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.kopf__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 15px/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.kopf__jahr { color: var(--saeure); font-family: var(--mono); font-weight: 700; font-size: 12px; margin-left: -4px; }
.logo-zeichen {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid var(--saeure);
  flex-shrink: 0;
}
.logo-zeichen::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--saeure);
  transform: scale(0.55);
  transition: transform 0.3s var(--weich);
}
.ton-an .logo-zeichen::after { transform: scale(1); }
.kopf__nav { margin-left: auto; }
.kopf__nav ul { display: flex; gap: clamp(14px, 1.8vw, 28px); list-style: none; }
.kopf__nav a {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  background: linear-gradient(var(--saeure), var(--saeure)) 0 100% / 0 2px no-repeat;
  transition: background-size 0.3s var(--weich), color 0.2s;
}
.kopf__nav a:hover { background-size: 100% 2px; color: var(--saeure); }
.kopf__nr { font-size: 9px; color: var(--saeure); line-height: 1; }

.ton-knopf { cursor: pointer; }
.kopf__ton,
.pult__ton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid var(--saeure);
  background: transparent;
  color: var(--saeure);
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.kopf__ton:hover,
.pult__ton:hover,
.kopf__ton.ist-an,
.pult__ton.ist-an { background: var(--saeure); color: var(--schwarz); }
.ton-knopf:disabled { opacity: 0.5; cursor: not-allowed; }
.ton-knopf__balken { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ton-knopf__balken i {
  display: block;
  width: 2px;
  height: 30%;
  background: currentColor;
  transition: height 0.2s;
}
.ist-an .ton-knopf__balken i { animation: balken 0.9s ease-in-out infinite alternate; }
.ist-an .ton-knopf__balken i:nth-child(2) { animation-delay: -0.3s; }
.ist-an .ton-knopf__balken i:nth-child(3) { animation-delay: -0.6s; }
.ist-an .ton-knopf__balken i:nth-child(4) { animation-delay: -0.15s; }
@keyframes balken { from { height: 20%; } to { height: 100%; } }

.kopf__menue {
  display: none;
  min-height: 40px;
  padding: 8px 14px;
  border: 1.5px solid var(--linie);
  background: transparent;
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 1099px) {
  .kopf { gap: 10px; }
  .kopf__menue { display: inline-flex; align-items: center; }
  .kopf__ton { margin-left: auto; }
  .kopf__nav {
    position: fixed;
    inset: var(--kopf-h) 0 0;
    z-index: 99;
    display: none;
    margin: 0;
    padding: 32px var(--rand);
    background: var(--schwarz);
    overflow-y: auto;
  }
  .menue-offen .kopf__nav { display: block; }
  .kopf__nav ul { flex-direction: column; gap: 0; }
  .kopf__nav li { border-bottom: 1px solid var(--linie); }
  .kopf__nav a {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 16px 0;
    font: 800 clamp(1.6rem, 7vw, 2.6rem)/1 var(--display);
    letter-spacing: 0;
    background: none;
  }
  .kopf__nr { font: 700 12px var(--mono); }
}
@media (max-width: 400px) {
  .kopf__logo > span:not(.logo-zeichen) { font-size: 13px; }
  .kopf__jahr { display: none; }
  .kopf__ton { padding: 8px 10px; }
  .kopf__menue { padding: 8px 10px; }
}

/* ---------- Fortschrittsbalken (nur mit scroll-driven animations) ---------- */
.fortschritt { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.held {
  position: relative;
  min-height: 100vh;
  min-height: max(100svh, 600px);
  overflow: hidden;
  isolation: isolate;
  --puls: 0;
  --pegel: 0;
}
.held__leinwand {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--schwarz);
}
/* Technisches Raster über dem Tunnel */
.held__raster {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Abdunklung oben/unten: Meta-Zeilen und Anzeigen bleiben über den Ringen lesbar */
    linear-gradient(to top, rgba(10, 10, 10, 0.92), rgba(10, 10, 10, 0) 190px),
    linear-gradient(to bottom, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0) 170px),
    linear-gradient(to right, var(--linie-schwach) 1px, transparent 1px) var(--rand) 0 / calc((100% - 2 * var(--rand)) / 6) 100%,
    linear-gradient(to bottom, transparent calc(100% - 1px), var(--linie-schwach) 1px) 0 0 / 100% 25%;
}
.held__inhalt {
  position: relative;
  min-height: inherit;
  display: grid;
  /* minmax(0, 1fr): die max-content-Headline darf die Spalte nicht aufweiten,
     sonst misst die Fit-Berechnung die zu breite Spalte */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--kopf-h) + clamp(16px, 3vh, 32px)) var(--rand) clamp(14px, 2.4vh, 24px);
}
.held__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.held__meta-rechts { text-align: right; }

.held__buehne {
  --titel: min(var(--titel-fit, 15.5vw), calc((max(100svh, 600px) - 330px) / 1.72));
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 24px;
}
.held__titel {
  font-family: var(--display);
  font-size: var(--titel);
  line-height: 0.86;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.held__wortmarke {
  display: block;
  transform-origin: 0 100%;
  transform: scaleY(calc(1 + var(--puls) * 0.045));
}
.held__zeile { display: block; width: max-content; white-space: nowrap; }
/* --w (Schriftgewicht je Buchstabe) und --puls (Kick) kommen live aus dem Audiosignal */
.held__zeile .b { font-variation-settings: "wght" var(--w, 800); }
.held__wortmarke.ist-messen { font-size: 100px; transform: none; }
.held__wortmarke.ist-messen .b { font-variation-settings: "wght" 900 !important; }

/* Steuerung sitzt rechts neben „ECHO“ — dort liegt auch der Fluchtpunkt des Tunnels */
.held__steuer {
  position: absolute;
  right: 0;
  bottom: calc(var(--titel) * 0.86);
  height: calc(var(--titel) * 0.86);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2vw, 32px);
}
.held__ton-info {
  order: -1;
  max-width: 24ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--weiss-matt);
  text-align: right;
}
.held__ton {
  --groesse: clamp(104px, calc(var(--titel) * 0.72), 188px);
  position: relative;
  width: var(--groesse);
  height: var(--groesse);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border: 1.5px solid var(--saeure);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--saeure);
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.25s, color 0.25s, transform 0.3s var(--weich);
}
.held__ton:hover { background: var(--saeure); color: var(--schwarz); }
.held__ton:active { transform: scale(0.96); }
.held__ton.ist-an { background: var(--saeure); color: var(--schwarz); }
.held__ton-ring {
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid var(--saeure);
  transform: scale(calc(1 + var(--puls) * 0.22));
  opacity: calc(var(--puls) * 0.9);
  pointer-events: none;
}
.held__ton-symbol {
  width: 22px;
  height: 24px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.held__ton.ist-an .held__ton-symbol { width: 20px; height: 20px; clip-path: polygon(0 0, 38% 0, 38% 100%, 0 100%, 0 0, 62% 0, 100% 0, 100% 100%, 62% 100%, 62% 0); }

.held__fuss {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-top: clamp(14px, 2.2vh, 22px);
  padding-top: 14px;
  border-top: 1px solid var(--linie);
}
.countdown { display: flex; align-items: flex-end; gap: 20px; }
.countdown__titel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grau);
  padding-bottom: 6px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.countdown__zahlen { display: flex; gap: clamp(12px, 1.6vw, 24px); }
.countdown__feld { display: flex; flex-direction: column; }
.countdown__zahl { font: 700 clamp(1.5rem, 2.4vw, 2.3rem)/1 var(--mono); letter-spacing: -0.02em; }
.countdown__einheit { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grau); margin-top: 6px; }

.held__anzeige {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.held__anzeige div { display: flex; flex-direction: column; gap: 4px; }
.held__anzeige dt { color: var(--grau); }
.held__anzeige dd { margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.held__anzeige-signal dd::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--grau);
  border-radius: 50%;
}
.ton-an .held__anzeige-signal dd { color: var(--saeure); }
.ton-an .held__anzeige-signal dd::before { background: var(--saeure); box-shadow: 0 0 10px var(--saeure); }
.pegel { position: relative; width: 72px; height: 6px; background: var(--linie); overflow: hidden; }
.pegel__balken {
  position: absolute;
  inset: 0;
  background: var(--saeure);
  transform-origin: 0 50%;
  transform: scaleX(var(--pegel));
}

/* Handy und Tablet hochkant: Play-Knopf mittig im freien Raum über dem Titel */
@media (max-width: 719px), (max-width: 1100px) and (orientation: portrait) {
  .held__buehne { justify-content: stretch; }
  .held__steuer {
    position: static;
    order: -1;
    flex: 1;
    height: auto;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 12px 0 20px;
  }
  .held__ton { --groesse: clamp(116px, 26vw, 180px); }
  .held__ton-info { order: 0; text-align: center; max-width: 30ch; }
}
@media (max-width: 719px) {
  .held__meta { font-size: 11px; }
  .held__fuss { gap: 14px; }
  .held__anzeige { gap: 8px 18px; }
  .held__anzeige-akkord,
  .held__anzeige-pegel { display: none; }
  .countdown__titel { display: none; }
}

/* ==========================================================================
   LAUFBÄNDER
   ========================================================================== */
.band-huelle {
  position: relative;
  z-index: 2;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(14px, 3vw, 56px);
}
.band-huelle--oben { margin-top: -1px; }
.band {
  position: relative;
  overflow: hidden;
  width: 108%;
  margin-left: -4%;
  border-block: 1px solid var(--linie);
  background: var(--schwarz);
}
.band--saeure {
  background: var(--saeure);
  color: var(--schwarz);
  border-color: var(--saeure);
  transform: rotate(-1.5deg);
}
.band--kontur { transform: rotate(1.2deg); }
.band__spur { display: flex; width: max-content; will-change: transform; }
.band__gruppe {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.45em;
  padding: 0.2em 0.45em 0.2em 0;
  font: 800 clamp(2rem, 6.4vw, 6rem)/1 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.band--kontur .band__gruppe { font-size: clamp(1.6rem, 4.6vw, 4.4rem); }
.band .hohl { color: var(--saeure); }
.stern {
  display: inline-block;
  flex-shrink: 0;
  width: 0.62em;
  height: 0.62em;
  background: currentColor;
  clip-path: polygon(50% 0, 56.12% 35.22%, 85.36% 14.64%, 64.78% 43.88%, 100% 50%, 64.78% 56.12%, 85.36% 85.36%, 56.12% 64.78%, 50% 100%, 43.88% 64.78%, 14.64% 85.36%, 35.22% 56.12%, 0 50%, 35.22% 43.88%, 14.64% 14.64%, 43.88% 35.22%);
}
.band--kontur .stern { background: var(--saeure); }

@media (prefers-reduced-motion: no-preference) {
  .band.ist-bereit.ist-sichtbar .band__spur { animation: band-laufen var(--dauer, 30s) linear infinite; }
  .band.ist-bereit.ist-sichtbar .band__spur--rueckwaerts { animation-direction: reverse; }
  .band.ist-sichtbar .stern { animation: stern-drehen 6s linear infinite; }
}
@keyframes band-laufen { to { transform: translate3d(calc(-1 * var(--gruppe, 50%)), 0, 0); } }
@keyframes stern-drehen { to { transform: rotate(360deg); } }

/* ==========================================================================
   ABSCHNITTE — gemeinsames Gerüst
   ========================================================================== */
.abschnitt {
  position: relative;
  padding: var(--abstand) var(--rand);
}
.abschnitt__kopf {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px 24px;
  margin-bottom: clamp(40px, 6vw, 88px);
}
.abschnitt__nr {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grau);
}
.abschnitt__nr span { color: var(--saeure); }
.abschnitt__nr::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
  transform-origin: 0 50%;
}
.abschnitt__titel {
  grid-column: 1 / -1;
  font: 800 clamp(2.4rem, 10.4vw, 11.5rem)/0.86 var(--display);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.abschnitt__lead {
  grid-column: 7 / -1;
  max-width: 54ch;
  font-size: clamp(15px, 1.15vw, 17px);
  color: var(--weiss-matt);
}
@media (max-width: 959px) {
  .abschnitt__lead { grid-column: 1 / -1; }
}

/* ==========================================================================
   01 MANIFEST
   ========================================================================== */
.manifest__text {
  max-width: 22em;
  font: 300 clamp(1.45rem, 3.5vw, 3.5rem)/1.16 var(--display);
  letter-spacing: -0.015em;
}
.manifest__text .wort { display: inline; }
.manifest__text em { font-style: normal; font-weight: 600; color: var(--saeure); }
.zahlen {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(56px, 8vw, 120px) 0 0;
  border-top: 1px solid var(--linie);
}
.zahlen__feld {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 20px 0 0;
  border-right: 1px solid var(--linie);
}
.zahlen__feld + .zahlen__feld { padding-left: 20px; }
.zahlen__feld:last-child { border-right: 0; }
.zahlen dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); }
.zahlen dd { margin: 0; font: 800 clamp(3.2rem, 9vw, 9rem)/0.85 var(--display); letter-spacing: -0.04em; }
.zahlen__feld--akzent dd { color: var(--saeure); }
@media (max-width: 719px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahlen__feld { padding: 18px 12px 18px 0; border-bottom: 1px solid var(--linie); }
  .zahlen__feld + .zahlen__feld { padding-left: 0; }
  .zahlen__feld:nth-child(2n) { border-right: 0; padding-left: 14px; }
}

/* ==========================================================================
   02 MISCHPULT
   ========================================================================== */
.pult__geraet {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  --led: 0;
}
.pult__geraet > * { background: var(--flaeche); padding: clamp(14px, 1.7vw, 26px); min-width: 0; }
.pult__leiste {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-block: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pult__modell { margin-right: auto; }
.pult__modell .grau { margin-left: 8px; }
.pult__status { display: flex; align-items: center; gap: 8px; color: var(--grau); }
.pult__lampe { width: 8px; height: 8px; border-radius: 50%; background: var(--grau); }
.ton-an .pult__status { color: var(--saeure); }
.ton-an .pult__lampe { background: var(--saeure); box-shadow: 0 0 10px var(--saeure); }

.pult__spuren { grid-column: 1 / 7; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.spur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 148px;
  padding: 14px;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--grau);
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.spur:hover { border-color: var(--saeure); color: var(--weiss); }
.spur[aria-pressed="true"] { background: var(--saeure); border-color: var(--saeure); color: var(--schwarz); }
.spur__kopf { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.spur__led {
  width: 12px;
  height: 12px;
  background: currentColor;
  opacity: calc(0.2 + var(--led) * 0.8);
  transform: scale(calc(0.7 + var(--led) * 0.3));
}
.spur__name { margin-top: auto; font: 800 clamp(1.3rem, 2.1vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: -0.02em; }
.spur__info { font-size: 11px; line-height: 1.35; }

.pult__regler { grid-column: 7 / 11; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.regler-feld { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.regler {
  width: clamp(72px, 6.6vw, 104px);
  aspect-ratio: 1;
  border-radius: 50%;
  touch-action: none;
  cursor: ns-resize;
  -webkit-user-select: none;
  user-select: none;
  --anteil: 0;
}
.regler:focus-visible { outline-offset: 5px; }
.regler svg { display: block; width: 100%; height: 100%; overflow: visible; }
.regler__spur,
.regler__wert { fill: none; stroke-width: 7; }
.regler__spur { stroke: rgba(240, 237, 230, 0.13); }
.regler__wert { stroke: var(--saeure); }
.regler__kappe { fill: var(--flaeche-2); stroke: rgba(240, 237, 230, 0.28); stroke-width: 1.2; transition: fill 0.15s; }
.regler:hover .regler__kappe,
.regler.ist-aktiv .regler__kappe { fill: #232321; }
.regler__zeiger {
  stroke: var(--weiss);
  stroke-width: 5;
  transform-origin: 50px 50px;
  transform: rotate(calc(-135deg + var(--anteil) * 270deg));
}
.regler-feld__name { margin-top: 4px; font: 700 13px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.regler-feld__wert { font-size: 12px; font-weight: 700; color: var(--saeure); white-space: nowrap; }

.pult__bpm { grid-column: 11 / -1; display: flex; flex-direction: column; justify-content: flex-end; }
.pult__bpm-zahl { font: 800 clamp(2.6rem, 5.4vw, 6rem)/0.85 var(--display); letter-spacing: -0.04em; color: var(--saeure); }
.pult__bpm-einheit { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--grau); margin-top: 8px; }

.pult__seq { grid-column: 1 / 9; }
.seq { display: grid; gap: 6px; align-content: center; }
.seq__zeile { display: grid; grid-template-columns: 3.4rem repeat(16, minmax(0, 1fr)); gap: 3px; align-items: center; }
.seq__name { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }
.seq__zelle {
  --v: 0;
  height: clamp(18px, 2.2vw, 28px);
  background: rgba(240, 237, 230, 0.06);
  transition: background-color 0.08s;
}
.seq__zelle:nth-child(4n + 2):not(:nth-child(2)) { margin-left: 5px; }
.seq__zelle.ist-gesetzt { background: rgba(200, 255, 0, calc(0.16 + var(--v) * 0.5)); }
.seq__zelle.ist-jetzt { background-color: rgba(240, 237, 230, 0.26); }
.seq__zelle.ist-gesetzt.ist-jetzt { background: var(--saeure); }
.pult__oszi { grid-column: 9 / -1; display: block; width: 100%; height: 100%; min-height: 150px; padding: 0 !important; }

.pult__hinweis { grid-column: 1 / -1; font-size: 11px; color: var(--grau); letter-spacing: 0.04em; padding-block: 12px !important; }

@media (max-width: 1099px) {
  .pult__spuren { grid-column: 1 / -1; }
  .pult__regler { grid-column: 1 / 9; }
  .pult__bpm { grid-column: 9 / -1; }
  .pult__seq { grid-column: 1 / -1; }
  .pult__oszi { grid-column: 1 / -1; height: 140px; }
}
@media (max-width: 719px) {
  .pult__spuren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spur { min-height: 112px; }
  .pult__regler { grid-column: 1 / -1; }
  .pult__bpm { display: none; }
  .pult__modell .grau { display: none; }
  .pult__ton { width: 100%; justify-content: center; }
  .seq__zeile { grid-template-columns: 2.6rem repeat(16, minmax(0, 1fr)); gap: 2px; }
  .seq__name { font-size: 9px; }
  .seq__zelle:nth-child(4n + 2):not(:nth-child(2)) { margin-left: 3px; }
  .pult__oszi { height: 110px; min-height: 0; }
}

/* ==========================================================================
   03 LINE-UP
   ========================================================================== */
.lineup__raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  list-style: none;
  border-top: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
}
.act {
  position: relative;
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "nr art" "name name" "wann wann";
  align-content: space-between;
  gap: 14px 12px;
  min-height: 150px;
  padding: 16px 18px 18px;
  border-right: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  transition: background 0.2s;
}
.act--1 { grid-column: span 6; min-height: clamp(180px, 15vw, 236px); }
.act--2 { grid-column: span 4; min-height: 164px; }
.act--3 { min-height: 128px; }
@media (min-width: 1300px) {
  .act--3 { grid-column: span 2; padding: 14px 16px 16px; }
  .act--3 .act__name { font-size: clamp(0.95rem, 1.12vw, 1.3rem); }
}
.act:hover,
.act.ist-glitch { background: var(--flaeche-2); }
.act__nr { grid-area: nr; font-size: 11px; font-weight: 700; color: var(--grau); transition: color 0.2s; }
.act:hover .act__nr { color: var(--saeure); }
.act__art {
  grid-area: art;
  justify-self: end;
  align-self: start;
  padding: 2px 7px;
  border: 1px solid var(--linie);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--weiss-matt);
}
.act__art--live { border-color: var(--saeure); color: var(--saeure); }
.act__name {
  grid-area: name;
  font: 700 clamp(1rem, 1.35vw, 1.4rem)/1 var(--display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: manual;
}
.act--1 .act__name { font-size: clamp(1.55rem, 3.6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 0.92; }
.act--2 .act__name { font-size: clamp(1.25rem, 2.1vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; }
.act__glyphen { position: relative; display: block; }
.act__wann { grid-area: wann; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grau); }

/* Glitch: zwei Farbebenen (Lime/Violett) mit Versatz und wandernden Clip-Path-Schnitten.
   Keine Bilder, nur CSS; der lesbare Name darunter bleibt ruhig. */
.act__glyphen::before,
.act__glyphen::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  .act:hover .act__glyphen::before,
  .act.ist-glitch .act__glyphen::before {
    opacity: 1;
    color: var(--saeure);
    animation: glitch-a 1.3s linear infinite alternate;
  }
  .act:hover .act__glyphen::after,
  .act.ist-glitch .act__glyphen::after {
    opacity: 1;
    color: var(--uv);
    animation: glitch-b 1.1s linear infinite alternate;
  }
  .act:hover .act__glyphen,
  .act.ist-glitch .act__glyphen { animation: glitch-kante 1.6s linear infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .act:hover .act__glyphen { color: var(--saeure); }
}
@keyframes glitch-a {
  0% { clip-path: inset(0 0 74% 0); transform: translate(-0.06em, 0); }
  20% { clip-path: inset(34% 0 44% 0); transform: translate(0.05em, 0); }
  40% { clip-path: inset(72% 0 4% 0); transform: translate(-0.03em, 0); }
  60% { clip-path: inset(12% 0 62% 0); transform: translate(0.07em, 0); }
  80% { clip-path: inset(48% 0 30% 0); transform: translate(-0.05em, 0); }
  100% { clip-path: inset(84% 0 0 0); transform: translate(0.04em, 0); }
}
@keyframes glitch-b {
  0% { clip-path: inset(62% 0 14% 0); transform: translate(0.06em, 0.01em); }
  25% { clip-path: inset(8% 0 70% 0); transform: translate(-0.05em, 0); }
  50% { clip-path: inset(40% 0 36% 0); transform: translate(0.08em, -0.01em); }
  75% { clip-path: inset(82% 0 2% 0); transform: translate(-0.04em, 0); }
  100% { clip-path: inset(20% 0 52% 0); transform: translate(0.05em, 0); }
}
@keyframes glitch-kante {
  0%, 100% { clip-path: inset(0 0 0 0); transform: none; }
  48% { clip-path: inset(0 0 0 0); transform: none; }
  50% { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%, 0 42%, 100% 42%, 100% 100%, 0 100%); transform: translateX(0.02em); }
  54% { clip-path: inset(0 0 0 0); transform: none; }
}

@media (max-width: 1099px) {
  .act { grid-column: span 4; }
  .act--1 { grid-column: span 6; }
  .act--2 { grid-column: span 6; }
}
/* Handy: Headliner als Karten, Stufe 2 als kompakte Zeilen, Stufe 3 als fließende Plakatzeile */
@media (max-width: 719px) {
  .lineup__raster { display: block; border-left: 0; }
  .act--1,
  .act--2 { border-right: 0; min-height: 0; }
  .act--1 { gap: 18px 12px; padding: 16px 0 20px; }
  .act--1 .act__name { font-size: clamp(1.6rem, 8.4vw, 2.2rem); }
  .act--2 {
    grid-template-columns: 1fr auto;
    grid-template-areas: "name art" "wann wann";
    gap: 6px 12px;
    padding: 14px 0 16px;
  }
  .act--2 .act__nr { display: none; }
  .act--2 .act__name { font-size: 1.2rem; }
  .act--3 {
    display: inline;
    padding: 0;
    border: 0;
    background: none !important;
    font: 700 1.05rem/1.75 var(--display);
  }
  .act--3 .act__nr,
  .act--3 .act__art,
  .act--3 .act__wann { display: none; }
  .act--3 .act__name,
  .act--3 .act__glyphen { display: inline; font-size: inherit; line-height: inherit; white-space: nowrap; }
  .act--3::after { content: "\00a0/ "; color: var(--saeure); }
  .act--3:last-child::after { content: ""; }
  .act--2 + .act--3::before {
    content: "+ Entdeckungen";
    display: block;
    margin: 28px 0 10px;
    font: 700 11px/1.4 var(--mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grau);
  }
}

/* ==========================================================================
   04 TIMETABLE
   ========================================================================== */
.tt__steuer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 28px;
}
.tt__tabs { display: flex; gap: 0; border: 1px solid var(--linie); }
.tt__tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 112px;
  padding: 14px 20px;
  border: 0;
  border-right: 1px solid var(--linie);
  background: transparent;
  color: var(--weiss-matt);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tt__tab:last-child { border-right: 0; }
.tt__tab:hover { color: var(--saeure); }
.tt__tab[aria-selected="true"] { background: var(--saeure); color: var(--schwarz); }
.tt__tab:focus-visible { outline-offset: -5px; outline-color: var(--weiss); }
.tt__tab[aria-selected="true"]:focus-visible { outline-color: var(--schwarz); }
.tt__tab-tag { font: 800 clamp(1.4rem, 2.4vw, 2.2rem)/1 var(--display); text-transform: uppercase; }
.tt__tab-datum { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }

.tt__filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--linie);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover { border-color: var(--weiss); }
.chip[aria-pressed="true"] { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
.chip--turbine::before,
.chip--kessel::before,
.chip--ufer::before { content: ""; width: 10px; height: 10px; background: var(--farbe); }
.chip--turbine { --farbe: var(--saeure); }
.chip--kessel { --farbe: var(--weiss); }
.chip--ufer { --farbe: var(--uv); }
.chip--kessel[aria-pressed="true"]::before { background: var(--schwarz); }

.tt__panel:focus-visible { outline-offset: 8px; }
.tt__raster {
  --zeile: 22px;
  display: grid;
  grid-template-columns: 4.6rem repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--zeilen, 32), var(--zeile));
  column-gap: 10px;
  list-style: none;
}
.tt__kopf {
  grid-row: 1;
  position: sticky;
  top: var(--kopf-h);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0 12px;
  margin-bottom: 8px;
  background: var(--schwarz);
  border-bottom: 3px solid var(--farbe);
}
.tt__kopf-name { font: 800 clamp(1.1rem, 1.8vw, 1.6rem)/1 var(--display); text-transform: uppercase; }
.tt__kopf-info { font-size: 11px; color: var(--grau); letter-spacing: 0.04em; }
.tt__linie {
  grid-column: 1 / -1;
  z-index: 0;
  border-top: 1px solid var(--linie);
  padding-top: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--grau);
  letter-spacing: 0.06em;
}
.tt__slot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: 3px 0 2px;
  padding: 8px 10px;
  overflow: hidden;
  background: var(--flaeche-2);
  border-left: 3px solid var(--farbe);
  transition: background 0.2s, transform 0.2s var(--weich);
}
.tt__slot:hover { background: #1f1f1d; transform: translateX(3px); }
[data-buehne="turbine"] { --farbe: var(--saeure); }
[data-buehne="kessel"] { --farbe: var(--weiss); }
[data-buehne="ufer"] { --farbe: var(--uv); }
.tt__zeit { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--weiss-matt); }
.tt__name { font: 700 clamp(0.82rem, 1.05vw, 1rem)/1.12 var(--display); text-transform: uppercase; overflow-wrap: break-word; }
.tt__buehne { display: none; }
.tt__zusatz {
  align-self: flex-start;
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tt__slot--haupt { background: var(--saeure); color: var(--schwarz); border-left-color: var(--schwarz); }
.tt__slot--haupt:hover { background: #d6ff3d; }
.tt__slot--haupt .tt__zeit { color: var(--schwarz); }
.tt__slot--haupt .tt__name { font-weight: 800; font-size: clamp(0.95rem, 1.3vw, 1.25rem); }

/* Bühnenfilter */
.tt[data-filter="turbine"] .tt__slot:not([data-buehne="turbine"]),
.tt[data-filter="kessel"] .tt__slot:not([data-buehne="kessel"]),
.tt[data-filter="ufer"] .tt__slot:not([data-buehne="ufer"]),
.tt[data-filter="turbine"] .tt__kopf:not([data-buehne="turbine"]),
.tt[data-filter="kessel"] .tt__kopf:not([data-buehne="kessel"]),
.tt[data-filter="ufer"] .tt__kopf:not([data-buehne="ufer"]) { display: none; }
/* Gefiltert: eine Bühne als kompakte Liste statt halbleerem Raster */
.tt:not([data-filter="alle"]) .tt__raster { display: block; border-top: 3px solid var(--farbe-filter, var(--weiss)); }
.tt[data-filter="turbine"] { --farbe-filter: var(--saeure); }
.tt[data-filter="ufer"] { --farbe-filter: var(--uv); }
.tt:not([data-filter="alle"]) .tt__kopf,
.tt:not([data-filter="alle"]) .tt__linie { display: none; }
.tt:not([data-filter="alle"]) .tt__slot {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  grid-template-areas: "zeit name zusatz";
  align-items: center;
  gap: 8px 24px;
  margin: 0;
  padding: 20px 20px;
  border-bottom: 1px solid var(--linie);
}
.tt:not([data-filter="alle"]) .tt__zeit { grid-area: zeit; font-size: 13px; }
.tt:not([data-filter="alle"]) .tt__name { grid-area: name; font-size: clamp(1.1rem, 2.1vw, 2rem); }
.tt:not([data-filter="alle"]) .tt__zusatz { grid-area: zusatz; align-self: center; }

/* Handy: chronologische Liste statt Raster */
@media (max-width: 899px) {
  .tt__raster { display: block; border-top: 1px solid var(--linie); }
  .tt__kopf,
  .tt__linie { display: none; }
  .tt__slot,
  .tt:not([data-filter="alle"]) .tt__slot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "zeit buehne zusatz" "name name name";
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    padding: 14px 14px 16px;
    border-left-width: 4px;
    border-bottom: 1px solid var(--linie);
  }
  .tt__slot:hover { transform: none; }
  .tt__zeit { grid-area: zeit; font-size: 12px; }
  .tt__buehne { grid-area: buehne; display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--farbe); }
  .tt__slot--haupt .tt__buehne { color: var(--schwarz); }
  .tt__zusatz { grid-area: zusatz; }
  .tt__name { grid-area: name; font-size: 1.12rem; }
  .tt__slot--haupt .tt__name { font-size: 1.3rem; }
  .tt__tabs { width: 100%; }
  .tt__tab { flex: 1; min-width: 0; padding: 12px 14px; }
}

/* ==========================================================================
   05 TICKETS
   ========================================================================== */
.tickets__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  border: 1px solid var(--linie);
}
.ticket {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 540px;
  padding: clamp(20px, 2.6vw, 38px);
  border-right: 1px solid var(--linie);
  transition: box-shadow 0.25s;
}
.ticket:last-child { border-right: 0; }
.ticket:hover { box-shadow: inset 0 0 0 2px var(--saeure); }
.ticket--hervor { background: var(--saeure); color: var(--schwarz); }
.ticket--hervor:hover { box-shadow: inset 0 0 0 2px var(--schwarz); }
.ticket__stufe { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.ticket__name { font: 800 clamp(1.3rem, 2vw, 1.9rem)/1 var(--display); text-transform: uppercase; letter-spacing: -0.02em; }
.ticket__preis { display: flex; align-items: flex-start; font: 800 clamp(4.4rem, 9vw, 9.5rem)/0.82 var(--display); letter-spacing: -0.05em; }
.ticket__waehrung { font-size: 0.36em; margin: 0.08em 0 0 0.12em; letter-spacing: 0; }
.ticket__leistungen { list-style: none; border-top: 1px solid currentColor; font-size: 14px; }
.ticket__leistungen li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); }
.ticket--hervor .ticket__leistungen li { border-color: rgba(10, 10, 10, 0.25); }
.ticket__leistungen li::before { content: "+"; font-weight: 700; color: var(--saeure); }
.ticket--hervor .ticket__leistungen li::before { color: var(--schwarz); }
.ticket__knopf { margin-top: auto; }

.knopf {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  border: 1.5px solid var(--weiss);
  background: var(--weiss);
  color: var(--schwarz);
  font: 800 14px/1 var(--display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.knopf::after { content: ""; width: 14px; height: 14px; background: currentColor; clip-path: polygon(0 40%, 60% 40%, 60% 10%, 100% 50%, 60% 90%, 60% 60%, 0 60%); transition: transform 0.25s var(--weich); }
.knopf:hover { background: var(--saeure); border-color: var(--saeure); }
.knopf:hover::after { transform: translateX(4px); }
.knopf--dunkel { background: var(--schwarz); border-color: var(--schwarz); color: var(--saeure); }
.knopf--dunkel:hover { background: var(--weiss); border-color: var(--weiss); color: var(--schwarz); }
.ticket--hervor :focus-visible { outline-color: var(--schwarz); }
.tickets__fuss { max-width: 70ch; margin-top: 28px; font-size: 14px; color: var(--weiss-matt); }
.tickets__fuss strong { color: var(--saeure); }

@media (max-width: 959px) {
  .tickets__liste { grid-template-columns: 1fr; }
  .ticket { min-height: 0; border-right: 0; border-bottom: 1px solid var(--linie); }
  .ticket:last-child { border-bottom: 0; }
  .ticket__knopf { margin-top: 8px; }
}

/* ==========================================================================
   06 ANFAHRT
   ========================================================================== */
.anfahrt__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.karte { margin: 0; padding: clamp(10px, 1.4vw, 18px); border: 1px solid var(--linie); color: var(--weiss); background: var(--flaeche); }
.karte__svg { display: block; width: 100%; height: auto; }
.karte__kanal { fill: rgba(155, 107, 255, 0.16); stroke: var(--uv); stroke-width: 1.5; }
.karte__bruecke { stroke: var(--weiss); stroke-opacity: 0.35; stroke-width: 12; }
.karte__tram { fill: none; stroke: var(--weiss); stroke-width: 2.5; stroke-dasharray: 9 6; }
.karte__halt { fill: var(--schwarz); stroke: var(--weiss); stroke-width: 3; }
.karte__weg { fill: none; stroke: var(--saeure); stroke-width: 3; stroke-dasharray: 1 7; stroke-linecap: round; }
.karte__halle { fill: var(--saeure); }
.karte__ufer { fill: none; stroke: var(--saeure); stroke-width: 2; stroke-dasharray: 4 4; }
.karte__rad { fill: none; stroke: var(--weiss); stroke-width: 1.5; }
.karte__nord { fill: var(--weiss); }
.karte__text { font: 700 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; fill: var(--weiss); }
.karte__text--gross { font: 800 22px var(--display); letter-spacing: 0; fill: var(--schwarz); }
.karte__text--dunkel { fill: var(--schwarz); }
.karte__text--wasser { fill: var(--uv); }
@media (max-width: 719px) {
  .karte__text { font-size: 13.5px; }
  .karte__text--dunkel { font-size: 12px; }
  .karte__text--gross { font-size: 26px; }
}
.karte figcaption { margin-top: 10px; font-size: 11px; color: var(--grau); letter-spacing: 0.04em; }

.anfahrt__adresse { font: 700 clamp(1.3rem, 2.2vw, 2rem)/1.15 var(--display); font-style: normal; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 28px; }
.wege { margin: 0; border-top: 1px solid var(--linie); }
.wege__zeile { display: grid; grid-template-columns: 5.5rem 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.wege dt { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--saeure); padding-top: 2px; }
.wege dd { margin: 0; color: var(--weiss-matt); }
@media (max-width: 899px) {
  .anfahrt__raster { grid-template-columns: 1fr; }
}

/* ==========================================================================
   07 AWARENESS — der eine Ort, an dem Violett die Fläche bekommt
   ========================================================================== */
.awareness { background: var(--uv); color: var(--schwarz); }
.awareness .abschnitt__nr,
.awareness .abschnitt__nr span { color: var(--schwarz); }
.awareness .abschnitt__nr::after { background: rgba(10, 10, 10, 0.35); }
.awareness .abschnitt__lead { color: var(--schwarz); font-weight: 700; }
.awareness :focus-visible { outline-color: var(--schwarz); }
.regeln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; counter-reset: regel; border-top: 2px solid var(--schwarz); }
.regel { counter-increment: regel; display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 28px 0; border-right: 1px solid rgba(10, 10, 10, 0.3); }
.regel + .regel { padding-left: 22px; }
.regel:last-child { border-right: 0; }
.regel::before { content: counter(regel, decimal-leading-zero); font: 800 clamp(2.4rem, 4vw, 3.8rem)/1 var(--display); letter-spacing: -0.04em; }
.regel__titel { font: 800 clamp(1.1rem, 1.5vw, 1.4rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.regel p { font-size: 14px; }
.awareness__gratis {
  margin-top: clamp(36px, 5vw, 64px);
  padding: 18px 0 0;
  border-top: 2px solid var(--schwarz);
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 1099px) {
  .regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .regel { border-bottom: 1px solid rgba(10, 10, 10, 0.3); }
  .regel:nth-child(2n) { border-right: 0; }
  .regel:nth-child(3) { padding-left: 0; }
}
@media (max-width: 599px) {
  .regeln { grid-template-columns: 1fr; }
  .regel,
  .regel + .regel { padding: 20px 0 24px; border-right: 0; }
}

/* ==========================================================================
   08 FAQ
   ========================================================================== */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(24px, 4vw, 64px); align-items: start; }
.faq .abschnitt__kopf { position: sticky; top: calc(var(--kopf-h) + 24px); }
.faq__liste { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font: 600 clamp(1rem, 1.6vw, 1.45rem)/1.25 var(--display);
  transition: color 0.2s;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat;
  transition: transform 0.3s var(--weich);
}
.frage summary:hover { color: var(--saeure); }
.frage[open] summary { color: var(--saeure); }
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { max-width: 62ch; padding: 0 0 26px; color: var(--weiss-matt); }
@media (max-width: 899px) {
  .faq { grid-template-columns: 1fr; }
  .faq .abschnitt__kopf { position: static; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.fuss { position: relative; padding: clamp(56px, 8vw, 120px) var(--rand) 28px; border-top: 1px solid var(--linie); overflow: hidden; }
.fuss__marke {
  margin: 0 0 clamp(36px, 5vw, 72px);
  font: 900 var(--fit, calc((100vw - 2 * var(--rand)) / 9.4))/0.8 var(--display);
  letter-spacing: -0.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--saeure);
}
.fuss__marke span { display: inline-block; transform-origin: 50% 100%; }
.fuss__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; font-size: 13px; }
.fuss__spalte ul { list-style: none; display: grid; gap: 4px; }
.fuss__spalte a { text-decoration: none; }
.fuss__spalte a:hover { color: var(--saeure); }
.fuss__technik { color: var(--grau); }
.fuss__studie {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 18px;
  border-top: 1px solid var(--linie);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--grau);
}
.fuss__studie a { color: var(--saeure); text-underline-offset: 4px; }
@media (max-width: 719px) {
  .fuss__raster { grid-template-columns: 1fr; }
}

/* ==========================================================================
   DEMO-HINWEIS (Dialog)
   ========================================================================== */
.hinweis {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 1.5px solid var(--saeure);
  background: var(--schwarz);
  color: var(--weiss);
}
.hinweis::backdrop { background: rgba(10, 10, 10, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hinweis__innen { display: grid; gap: 18px; padding: clamp(24px, 4vw, 44px); }
.hinweis__marke { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grau); }
.hinweis__titel { font: 800 clamp(1.8rem, 5vw, 2.8rem)/0.95 var(--display); text-transform: uppercase; letter-spacing: -0.03em; color: var(--saeure); }
.hinweis .knopf { margin-top: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .hinweis[open] { animation: hinweis-auf 0.35s var(--weich); }
}
@keyframes hinweis-auf { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* ==========================================================================
   SCROLL-DRIVEN ANIMATIONS — nur wo unterstützt und Bewegung erwünscht.
   Ohne Unterstützung (z. B. Firefox) bleibt alles im Endzustand sichtbar.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fortschritt {
      display: block;
      position: fixed;
      left: 0;
      top: calc(var(--kopf-h) - 2px);
      z-index: 101;
      width: 100%;
      height: 2px;
      background: var(--saeure);
      transform-origin: 0 50%;
      animation: ska-breite linear both;
      animation-timeline: scroll(root);
    }

    /* Hero: Inhalt driftet beim Rausscrollen nach oben, Tunnel zoomt */
    .held__inhalt {
      animation: held-weg linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    .held__leinwand {
      animation: tunnel-zoom linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }

    /* Überschriften wischen von links auf, Linie läuft mit */
    .abschnitt__titel {
      animation: wischen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .abschnitt__nr::after {
      animation: ska-breite linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    /* Manifest: jedes Wort hellt auf, sobald es in den Blick kommt */
    .manifest__text .wort {
      animation: wort-hell linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 42%;
    }
    .manifest__text em.wort { animation-name: wort-akzent; }
    .zahlen dd {
      animation: hochfahren linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    /* Laufbänder kippen beim Durchscrollen */
    .band--saeure {
      animation: band-kippen linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .band--kontur {
      animation: band-kippen-2 linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    .pult__geraet {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .act {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .ticket {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    .ticket:nth-child(2) { animation-range: entry 4% cover 26%; }
    .ticket:nth-child(3) { animation-range: entry 8% cover 30%; }
    .regel {
      animation: aufsteigen linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    /* Karte: Tram-Striche fahren, Fußweg zeichnet sich */
    .karte__tram {
      animation: tram-fahren linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .karte__weg {
      animation: weg-laufen linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }

    .fuss__marke span {
      animation: marke-auf linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
  }
}

@keyframes ska-breite { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes held-weg { to { transform: translateY(-14%); opacity: 0.35; } }
@keyframes tunnel-zoom { to { transform: scale(1.18); } }
@keyframes wischen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes wort-hell { from { color: #34332f; } to { color: var(--weiss); } }
@keyframes wort-akzent { from { color: #34332f; } to { color: var(--saeure); } }
@keyframes hochfahren { from { transform: translateY(35%); opacity: 0.1; } to { transform: none; opacity: 1; } }
@keyframes aufsteigen { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes band-kippen { from { transform: rotate(-3deg); } to { transform: rotate(0.5deg); } }
@keyframes band-kippen-2 { from { transform: rotate(2.4deg); } to { transform: rotate(-0.6deg); } }
@keyframes tram-fahren { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -150; } }
@keyframes weg-laufen { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes marke-auf { from { transform: translateY(45%) scaleY(0.3); } to { transform: none; } }

/* ---------- Reduzierte Bewegung: alles Flackernde aus ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .held__wortmarke { transform: none; }
  .held__ton-ring { display: none; }
}