/* Mytra, seite.css, Stand 05.11.2026
   Farben und Schriften aus dem Mytra-Logo (Abyss, Glow, UV; Michroma und Instrument Sans).
   Hausregel: keine Scrollfahrt (kein scroll-behavior: smooth), Sprünge über ruhiger-wechsel. */
:root {
  --abyss: #050B0D;
  --deep: #0A1517;
  --kelp: #143034;
  --moon: #E8EEF0;
  --mist: #93A8AC;
  --dusk: #6F878B;
  --glow: #5CF2D2;
  --glow-ink: #0A2B25;
  --uv: #7C6CFF;
  --beat: 0;
  --display: "Michroma", "Orbitron", "Arial Black", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --kopf: 64px;
  --ease: cubic-bezier(.2,.8,.2,1);
  /* ruhiger-wechsel: Fenster und Blende im Mytra-Dunkel */
  --rw-papier: #0A1517; --rw-tinte: #E8EEF0; --rw-linie: #143034; --rw-schleier: rgba(5,11,13,.6);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--abyss); color: var(--moon);
  font-family: var(--body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 4px; }
img, video { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--glow); color: var(--glow-ink); font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.wrap { width: min(1120px, calc(100% - 2 * clamp(16px, 5vw, 56px))); margin-inline: auto; }
.mitte { text-align: center; }
.eyebrow { font-family: var(--display); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--glow); }
h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(22px, 3.2vw, 34px); letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.2; margin: 12px 0 0; text-wrap: balance;
}
.lede { font-size: clamp(18px, 2vw, 21px); color: var(--moon); max-width: 62ch; margin: 18px 0 0; text-wrap: pretty; }
p { max-width: 65ch; }
.muted { color: var(--mist); }
.fein { margin-top: 18px; font-size: 14px; }

/* Effektlagen: Fortschritt, Korn, Cursorlicht */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; z-index: 30; background: linear-gradient(90deg, var(--glow), var(--uv)); box-shadow: 0 0 12px var(--glow); pointer-events: none; }
.grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 25; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0);} 20% { transform: translate(-4%,3%);} 40% { transform: translate(3%,-5%);} 60% { transform: translate(-2%,-2%);} 80% { transform: translate(4%,4%);} 100% { transform: translate(0,0);} }
.cursor { position: fixed; left: 0; top: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; z-index: 20; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(circle, rgba(92,242,210,.18) 0%, rgba(124,108,255,.08) 35%, transparent 70%); transition: opacity .4s; will-change: transform; }
body.has-cursor .cursor { opacity: 1; }
body.im-meer .cursor { opacity: 0; }

/* Kopfzeile */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--abyss) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--kelp) 80%, transparent); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--kopf); gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; position: relative; z-index: 2; }
.brand svg { width: 34px; height: 34px; transition: transform .6s var(--ease); }
.brand:hover svg { transform: rotate(180deg); }
.brand span { font-family: var(--display); font-size: 13px; letter-spacing: 0.3em; }
.nav { display: flex; gap: clamp(14px, 3vw, 34px); }
.nav a { position: relative; text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: 0.06em; color: var(--mist); padding: 6px 0; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--glow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); box-shadow: 0 0 10px var(--glow); }
.nav a:hover, .nav a.on { color: var(--moon); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.menu-knopf { display: none; position: relative; z-index: 2; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; border: 0; background: none; color: var(--moon); font-family: var(--display); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; cursor: pointer; }
.menu-linien { position: relative; width: 22px; height: 12px; }
.menu-linien i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), top .35s var(--ease); }
.menu-linien i:nth-child(1) { top: 0; } .menu-linien i:nth-child(2) { top: 10px; }
.menu-knopf[aria-expanded="true"] .menu-linien i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-knopf[aria-expanded="true"] .menu-linien i:nth-child(2) { top: 5px; transform: rotate(-45deg); }

/* Hero: Meer in Echtzeit-3D */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - var(--kopf)); display: flex; align-items: center; padding: clamp(28px, 6vh, 72px) 0 clamp(40px, 8vh, 96px); text-align: center; overflow: hidden;
  background: #04090b url("/assets/meer_standbild.jpg") center 40% / cover no-repeat; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; display: block; touch-action: pan-y; cursor: crosshair; }
.hero.ohne-gl canvas { display: none; }
.hero .geo { position: absolute; left: 50%; top: var(--geo-y, 34%); width: min(120vw, 1300px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -2; opacity: .09; pointer-events: none; mix-blend-mode: screen; animation: spin 240s linear infinite;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 62%); mask-image: linear-gradient(to bottom, #000 40%, transparent 62%); }
.hero .geo svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 140px; z-index: -1; background: linear-gradient(to bottom, transparent, var(--abyss)); pointer-events: none; }
.hero-inhalt { position: relative; pointer-events: none; }
.hero-inhalt a, .hero-inhalt button { pointer-events: auto; }
.hero .eyebrow { animation: rise .9s var(--ease) .2s backwards; text-shadow: 0 0 18px rgba(5,11,13,.9); }
.hero .signet { width: min(680px, 88vw); margin: clamp(18px, 4vh, 40px) auto 0; perspective: 1200px; font-size: inherit; font-weight: inherit; }
.hero .signet svg { width: 100%; height: auto; overflow: visible; transform-style: preserve-3d; transition: transform .25s ease-out; filter: drop-shadow(0 0 calc(14px + var(--beat) * 26px) rgba(92,242,210,calc(.16 + var(--beat) * .28))); }
/* Signal-Intro: Achse zeichnet, Orbs zünden, Ring läuft, Buchstaben treten aus dem Dunkel.
   Alle Verzögerungen tragen 0,5 s Vorlauf, damit intro.js das Signet übernehmen kann; ohne Intro zieht intro.js den Vorlauf wieder ab. */
.signet .l { animation: emerge 1.4s var(--ease) 1.05s backwards; }
.signet .arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s cubic-bezier(.4,0,.2,1) .85s forwards; }
.signet .ax { transform-box: fill-box; transform-origin: center; animation: grow .7s var(--ease) .6s backwards; }
.signet .orb { transform-box: fill-box; transform-origin: center; animation: ignite .8s var(--ease) 1s backwards; filter: drop-shadow(0 0 calc(3px + var(--beat) * 9px) var(--glow)); }
.signet .halo { transform-box: fill-box; transform-origin: center; animation: ignite .9s var(--ease) 1.2s backwards, breathe 3.2s ease-in-out 2.1s infinite; }
.signet .dot { animation: emerge 1s ease 1.4s backwards; }
@keyframes emerge { from { opacity: 0; filter: blur(10px); transform: scale(.985); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ignite { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.18); opacity: .9; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero .lede { margin: clamp(22px, 5vh, 54px) auto 0; text-shadow: 0 1px 14px rgba(5,11,13,.95), 0 0 2px rgba(5,11,13,.8); animation: rise .9s var(--ease) 1.1s backwards; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero .cta { animation: rise .9s var(--ease) 1.25s backwards; }
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 13px 22px; border-radius: 999px; cursor: pointer;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; border: 1px solid color-mix(in srgb, var(--mist) 34%, transparent); color: var(--moon);
  background: color-mix(in srgb, var(--abyss) 55%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .25s, transform .25s, box-shadow .25s, color .25s;
}
.btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(92,242,210,.28) 50%, transparent 70%); transform: translateX(-110%); transition: transform .7s var(--ease); pointer-events: none; }
.btn:hover::before { transform: translateX(110%); }
.btn:hover { border-color: var(--glow); transform: translateY(-2px); box-shadow: 0 8px 30px -10px rgba(92,242,210,.5); }
.btn.solid { background: var(--glow); color: var(--glow-ink); border-color: var(--glow); box-shadow: 0 0 calc(10px + var(--beat) * 24px) rgba(92,242,210,.35); }
.btn.solid::before { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); }
.btn svg { width: 16px; height: 16px; position: relative; flex: none; }
.btn.klein { min-height: 40px; padding: 10px 16px; font-size: 10px; }
.btn.beat { gap: 12px; }
.btn.beat .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.btn.beat .eq i { width: 3px; height: 4px; background: currentColor; border-radius: 1px; transition: height .12s; }
.btn.beat.on { border-color: var(--glow); color: var(--glow); }
.btn.beat.on .eq i:nth-child(1) { height: calc(4px + var(--beat) * 10px); }
.btn.beat.on .eq i:nth-child(2) { height: calc(6px + var(--beat) * 8px); }
.btn.beat.on .eq i:nth-child(3) { height: calc(3px + var(--beat) * 11px); }
.btn.beat.on .eq i:nth-child(4) { height: calc(7px + var(--beat) * 6px); }
section[id] { scroll-margin-top: var(--kopf, 64px); }
.next {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; justify-content: center;
  padding: 10px 18px 10px 14px; border: 1px solid var(--kelp); border-radius: 999px;
  background: color-mix(in srgb, var(--deep) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 14px; color: var(--mist); text-decoration: none; transition: border-color .25s;
  animation: rise .9s var(--ease) 1.4s backwards;
}
.next:hover { border-color: var(--glow); }
.next b { color: var(--moon); font-weight: 600; font-variant-numeric: tabular-nums; }
.next .cd { color: var(--glow); font-variant-numeric: tabular-nums; }
.next .cd:not(:empty)::before { content: '\00B7\00A0'; color: var(--mist); }
.next .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(92,242,210,.55);} 70% { box-shadow: 0 0 0 10px rgba(92,242,210,0);} 100% { box-shadow: 0 0 0 0 rgba(92,242,210,0);} }
.hint { width: fit-content; max-width: min(620px, 100%); margin: 14px auto 0; padding: 7px 16px; border-radius: 14px; background: rgba(5,11,13,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; color: var(--mist); letter-spacing: .03em; text-shadow: 0 0 3px rgba(5,11,13,.9); /* eigene Glasfläche wie die Gig-Zeile: steht auf der hellen Mondspiegelung, Schatten allein trug nicht */ animation: rise .9s ease 1.5s backwards; transition: opacity .8s; }
.hint.weg { opacity: 0; }

/* Abschnitte und Enthüllung beim Scrollen (Startzustand nur per JS, ohne JS ist alles sichtbar) */
section { position: relative; padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--kelp); overflow: hidden; }
.rv { opacity: .45; transform: translateY(18px); filter: blur(3px); }
.rv.in { opacity: 1; transform: none; filter: none; /* none statt blur(0): ein bleibender Filter macht das Element zum Bezugsrahmen für absolute Kinder und hält eine Ebene im Speicher */ transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s; }
.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 28px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--kelp); }
.facts div span { display: block; }
.facts .k, .lineup .k { font-family: var(--display); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dusk); margin: 0; }
.facts .v { margin-top: 6px; font-weight: 500; }

/* Gig */
.gig { border-top: 0; padding-top: clamp(64px, 9vw, 120px); padding-bottom: clamp(64px, 9vw, 120px); isolation: isolate; }
.gig-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .34; filter: saturate(1.1) contrast(1.05); }
.gig::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(120% 80% at 80% 20%, rgba(124,108,255,.16), transparent 60%),
  linear-gradient(90deg, rgba(5,11,13,.94) 0%, rgba(5,11,13,.82) 48%, rgba(5,11,13,.58) 100%),
  linear-gradient(to bottom, var(--abyss), transparent 18%, transparent 82%, var(--abyss)); }
.gig h2 { font-size: clamp(30px, 6vw, 72px); letter-spacing: .04em; line-height: 1.05; margin-top: 14px; text-shadow: 0 0 40px rgba(92,242,210,calc(.12 + var(--beat) * .2)); }
.gig-datum { font-family: var(--display); font-size: clamp(18px, 2.6vw, 28px); letter-spacing: .1em; color: var(--glow); margin: 18px 0 0; font-variant-numeric: tabular-nums; }
.gig-datum span { color: var(--moon); }
.gig-ort { margin: 10px 0 0; color: var(--mist); }
.gig-ort b { color: var(--moon); font-weight: 600; }
.gig-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 72px); margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(26px, 4vw, 40px); border-top: 1px solid var(--kelp); align-items: start; }
.lineup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.lineup-oben { gap: 6px 26px; margin-top: 14px !important; }
.lineup-oben li { font-family: var(--display); font-size: clamp(20px, 2.8vw, 32px); letter-spacing: .06em; text-transform: uppercase; }
.lineup-unten { gap: 6px 22px; margin-top: 14px !important; }
.lineup-unten li { font-family: var(--display); font-size: clamp(13px, 1.5vw, 16px); letter-spacing: .16em; text-transform: uppercase; color: var(--mist); }
.lineup-unten li.ich { color: var(--glow); text-shadow: 0 0 calc(8px + var(--beat) * 16px) rgba(92,242,210,.6); }
.gig-fein { margin: 22px 0 0; font-size: 14px; color: var(--dusk); }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.countdown div { text-align: center; padding: 16px 6px 12px; border: 1px solid var(--kelp); border-radius: 16px; background: color-mix(in srgb, var(--deep) 70%, transparent); }
.countdown b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.1; color: var(--glow); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(92,242,210,.45); }
.countdown span { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--dusk); }
.kasse { margin: 16px 0 0; color: var(--mist); font-size: 15px; }
.gig-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* Sound */
#sound .flower { position: absolute; right: -18%; top: 50%; width: min(70vw, 760px); aspect-ratio: 1; transform: translateY(-50%); opacity: .14; pointer-events: none; animation: spin2 180s linear infinite reverse; }
@keyframes spin2 { to { transform: translateY(-50%) rotate(360deg); } }
#sound .flower svg { width: 100%; height: 100%; }
.ringframe { position: relative; padding: 26px; }
.ringframe .orbit { position: absolute; inset: 0; width: 100%; height: 100%; animation: orbit 40s linear infinite; }
@keyframes orbit { to { transform: rotate(360deg); } }
.ringframe .orbit circle { fill: none; stroke: var(--glow); stroke-width: .6; stroke-dasharray: 2 9; opacity: .7; }
.ringframe .orbit .mark { fill: var(--glow); stroke: none; filter: drop-shadow(0 0 8px var(--glow)); }
.portrait { position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--kelp); max-width: 440px; margin-inline: auto; transform: translateZ(0); }
.portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.05); transition: transform 1.2s var(--ease), filter .6s; }
.ringframe:hover .portrait img { transform: scale(1.06); filter: saturate(.6) contrast(1.1) hue-rotate(-10deg); }
.portrait::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(92,242,210,.25), inset 0 -60px 90px rgba(5,11,13,.55); }
.portrait::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: linear-gradient(160deg, rgba(92,242,210,0) 40%, rgba(124,108,255,.18) 100%); mix-blend-mode: screen; opacity: 0; transition: opacity .6s; }
.ringframe:hover .portrait::before { opacity: 1; }

/* Floor: Videowand */
.floor-kopf { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.wand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); width: min(1320px, calc(100% - 2 * clamp(16px, 4vw, 40px))); margin: clamp(28px, 4vw, 44px) auto 0; perspective: 1400px; }
.clip { position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 9 / 16; background: var(--deep); border: 1px solid var(--kelp); transform: rotateY(var(--dreh, 0deg)) translateZ(0); transition: transform .8s var(--ease), border-color .4s, box-shadow .4s; }
.clip:nth-child(1) { --dreh: 9deg; } .clip:nth-child(2) { --dreh: 4deg; } .clip:nth-child(4) { --dreh: -4deg; } .clip:nth-child(5) { --dreh: -9deg; }
.clip:nth-child(even) { margin-top: 36px; }
.clip:hover { transform: rotateY(0deg) translateY(-6px); border-color: var(--glow); box-shadow: 0 30px 70px -30px rgba(92,242,210,.45); }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; font-size: 12.5px; letter-spacing: .04em; color: var(--moon); background: linear-gradient(to top, rgba(5,11,13,.9), transparent); }
.floor-fein { margin: 22px 0 0; font-size: 13px; color: var(--dusk); }

/* Laufband: Gespielt bei */
.ticker { overflow: hidden; margin-top: 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ticker:hover .played { animation-play-state: paused; }
.played { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: ticker 38s linear infinite; }
@keyframes ticker { to { transform: translateX(-50%); } }
.played li { font-family: var(--display); font-size: clamp(12px, 1.3vw, 15px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--moon); padding: 0 34px; position: relative; text-align: center; white-space: nowrap; }
.played li::before { content: ""; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--glow); opacity: .85; box-shadow: 0 0 10px var(--glow); }
.played li small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: var(--mist); margin-top: 4px; }

/* Dates */
.dates { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--kelp); }
.dates li { position: relative; display: grid; grid-template-columns: 170px 1fr auto; gap: 18px; align-items: center; padding: 20px 14px; margin: 0 -14px; border-bottom: 1px solid var(--kelp); border-radius: 10px; transition: background .3s; }
.dates li:hover { background: rgba(92,242,210,.045); }
.dates .d { font-family: var(--display); font-size: 15px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.dates .d small { display: block; font-family: var(--body); font-size: 12px; letter-spacing: 0.08em; color: var(--dusk); text-transform: uppercase; margin-top: 4px; }
.dates .e b { display: block; font-weight: 600; }
.dates .e span { color: var(--mist); font-size: 15px; }
.dates .tag { font-family: var(--display); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--kelp); color: var(--mist); white-space: nowrap; }
.dates li.up { background: linear-gradient(90deg, rgba(92,242,210,.07), transparent 60%); }
.dates li.up .tag { border-color: var(--glow); color: var(--glow); box-shadow: 0 0 calc(6px + var(--beat) * 14px) rgba(92,242,210,.35); }
.dates li.up .d { color: var(--glow); text-shadow: 0 0 18px rgba(92,242,210,.5); }
.dates li.past { opacity: .74; }
.dates li.past .d small { color: var(--mist); }   /* mit der Deckkraft .74 sonst nur 3,3:1 */
.nav-klein { display: flex; gap: clamp(16px, 3vw, 30px); }
.nav-klein a { color: var(--mist); text-decoration: none; font-size: 15px; padding: 8px 0; }
.nav-klein a:hover { color: var(--moon); }

/* Sets: Karten mit Scheinwerfer-Rand und Neigung */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; perspective: 1200px; }
.card { position: relative; display: block; padding: 28px; border-radius: 18px; background: var(--deep); text-decoration: none; transform-style: preserve-3d; transition: transform .35s var(--ease), box-shadow .35s; --mx: 50%; --my: 50%; }
.card::before { content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1px; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(92,242,210,.9), rgba(20,48,52,.9) 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(92,242,210,.10), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
.card:hover::after { opacity: 1; }
.card:hover { box-shadow: 0 30px 60px -30px rgba(92,242,210,.35); }
.card .k { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--glow); }
.card .k svg { width: 18px; height: 18px; }
.card h3 { font-family: var(--body); font-weight: 600; font-size: 22px; margin: 14px 0 6px; }
.card p { margin: 0; color: var(--mist); font-size: 15px; }
.card .arrow { position: absolute; right: 24px; top: 26px; color: var(--dusk); transition: transform .35s, color .35s; }
.card:hover .arrow { transform: translate(4px, -4px); color: var(--glow); }

/* Weitersagen */
.weiter::before { content: ""; position: absolute; right: -10%; top: -20%; width: 700px; height: 700px; background: radial-gradient(circle, rgba(92,242,210,.07), transparent 62%); pointer-events: none; }
.weiter-raster { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.qr { margin: 0; justify-self: center; text-align: center; }
.qr svg { width: min(240px, 60vw); height: auto; padding: 16px; border-radius: 22px; background: var(--moon); box-shadow: 0 0 calc(30px + var(--beat) * 30px) rgba(92,242,210,.28); }
.qr figcaption { margin-top: 14px; font-size: 13px; color: var(--mist); }
.status { min-height: 1.6em; margin: 14px 0 0; font-size: 14px; color: var(--glow); }

/* Booking */
.booking { text-align: center; }
.booking::before { content: ""; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(124,108,255,.10), rgba(92,242,210,.05) 40%, transparent 65%); pointer-events: none; }
.booking .lede { margin-inline: auto; }
.booking .cta { margin-top: 30px; }
.booking .note { margin: 22px auto 0; font-size: 14px; color: var(--dusk); }

footer { border-top: 1px solid var(--kelp); padding: 40px 0 calc(56px + env(safe-area-inset-bottom)); color: var(--dusk); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; align-items: flex-start; }
footer .recht { display: flex; flex-direction: column; gap: 10px; flex-basis: 100%; }
footer details { max-width: 80ch; }
footer details p { margin: 10px 0 0; line-height: 1.55; }
footer summary { cursor: pointer; color: var(--mist); min-height: 32px; display: inline-flex; align-items: center; }
footer .soc { display: flex; gap: 18px; }
footer .soc a { text-decoration: none; color: var(--mist); font-size: 13px; letter-spacing: 0.08em; padding: 6px 0; }
footer .soc a:hover { color: var(--moon); }

@media (max-width: 960px) {
  .wand { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(46vw, 260px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px clamp(16px, 4vw, 40px) 18px; width: 100%; scrollbar-width: none; }
  .wand::-webkit-scrollbar { display: none; }
  .clip { scroll-snap-align: center; --dreh: 0deg !important; }
  .clip:nth-child(even) { margin-top: 0; }
}
@media (max-width: 820px) {
  .split, .gig-raster, .weiter-raster { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .cards { grid-template-columns: 1fr; }
  .dates li { grid-template-columns: 1fr; gap: 6px; }
  .dates .tag { justify-self: start; }
  .cursor { display: none; }
  .menu-knopf { display: inline-flex; }
  .nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: var(--kopf) 24px 40px; height: 100dvh;
    background: rgba(5,11,13,.97); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
  .nav a { font-family: var(--display); font-size: 22px; letter-spacing: .14em; text-transform: uppercase; color: var(--moon); padding: 12px 0; }
  body.menu-offen .nav { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
  body.menu-offen { overflow: hidden; }
  .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5,11,13,.9); }
  .qr { justify-self: center; text-align: center; }
  .qr svg { width: min(200px, 54vw); }
}
@media (max-width: 480px) {
  .facts { grid-template-columns: 1fr; }
  .brand span { display: none; }
  .hero .cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 360px; margin-inline: auto; }
  .hero .cta .btn { padding-inline: 12px; letter-spacing: .16em; }
  .hero .cta .btn.solid, .hero .cta .btn.beat { grid-column: 1 / -1; }
  .hero .cta .btn.beat { justify-self: center; min-width: 50%; }
  .hero .signet { margin-top: 26px; }
  .hero .lede { font-size: 17.5px; margin-top: 34px; }
  .next { border-radius: 22px; row-gap: 2px; }
  .next .cd { flex-basis: 100%; text-align: center; }
  .next .cd:not(:empty)::before { content: none; }
  .nav-klein { gap: 13px; }
  .nav-klein a { font-size: 14px; }
  .countdown { gap: 6px; }
  .countdown div { padding: 12px 2px 10px; border-radius: 12px; }
  .countdown span { letter-spacing: .14em; }
  .gig-knoepfe .btn { flex: 1 1 auto; }
}
@media (hover: none) { .cursor { display: none; } .hero canvas { cursor: default; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .signet .arc { stroke-dashoffset: 0; }
  .grain, .hero .geo, #sound .flower, .ringframe .orbit { animation: none; }
  .played { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 14px 0; }
  .ticker { -webkit-mask-image: none; mask-image: none; }
  .played li[aria-hidden="true"] { display: none; }
  .rv { opacity: 1; transform: none; filter: none; }
  .clip { transform: none; }
}

/* ---------- Sound: Mini-Knopf läuft beim Scrollen mit, Drop-Blitz ---------- */
.klang-mini { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(92,242,210,.55); background: rgba(5,11,13,.78); color: var(--glow); font: 600 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer;
  box-shadow: 0 0 calc(10px + var(--beat) * 26px) rgba(92,242,210, calc(.14 + var(--beat) * .3));
  opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; transition: opacity .35s, transform .35s var(--ease); }
.klang-mini .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.klang-mini .eq i { width: 3px; height: 4px; background: currentColor; border-radius: 1px; }
.klang-mini .eq i:nth-child(1) { height: calc(4px + var(--beat) * 10px); }
.klang-mini .eq i:nth-child(2) { height: calc(6px + var(--beat) * 8px); }
.klang-mini .eq i:nth-child(3) { height: calc(3px + var(--beat) * 11px); }
.klang-mini .eq i:nth-child(4) { height: calc(7px + var(--beat) * 6px); }
.klang-mini:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
body.klang-an.hero-weg .klang-mini { opacity: 1; transform: none; pointer-events: auto; }
.klang-teil:empty { display: none; }
.hero .blitz { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 50% at 50% var(--blitz-y, 40%), rgba(92,242,210,.34), rgba(124,108,255,.12) 45%, transparent 70%); }
body.drop .hero .blitz { animation: dropblitz .9s ease-out; }
@keyframes dropblitz { from { opacity: 1; } to { opacity: 0; } }
/* Intro: Funken über dem Meer, lassen Klicks durch */
.hero canvas.funken { z-index: 1; pointer-events: none; cursor: auto; touch-action: auto; mix-blend-mode: screen; }
.hero.ohne-gl canvas.funken { display: block; }
@media (prefers-reduced-motion: reduce) { body.drop .hero .blitz { animation: none; } .hero canvas.funken { display: none; } .klang-mini { transition: none; } }

/* ---------- Abschnitte: je Abschnitt eine Technik aus dem Katalog, Stand 05.11.2026 (js/abschnitte.js, js/qualle.js) ---------- */
/* Hero: Lichtring um den Sound-Knopf (cc-technik-conic-rand-property), eine Runde in 8 Schlägen, mit Ton in 4 */
@property --winkel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn.beat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--winkel), transparent 0deg 240deg, rgba(92,242,210,.18) 285deg, var(--glow) 335deg, #fff 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: kreisen 3.478s linear infinite; }
.btn.beat.on::after { animation-duration: 1.739s; }
@keyframes kreisen { to { --winkel: 360deg; } }

/* Gig: Entschlüsseln (text-entschluesselung-scramble). Der echte Text bleibt im Fluss, die Kopie liegt darüber */
.scr-an { position: relative; }
.scr-an, .scr-an * { -webkit-text-fill-color: transparent; text-shadow: none !important; }
.scr-an > .scr, .scr-an > .scr * { -webkit-text-fill-color: currentColor; }
.scr { position: absolute; inset: 0; pointer-events: none; }
.gig h2.scr-an > .scr { text-shadow: 0 0 40px rgba(92,242,210,.3) !important; }
.gig-datum > .scr { color: var(--glow); }

/* Sound: Tanzbühne aus reinen Divs (cc-e5): Kegel schwenken über 8 Takte, EQ zappelt und schlägt im Takt aus, Spiegelboden */
@property --z { syntax: '<number>'; inherits: false; initial-value: 0; }
.buehne { position: relative; height: clamp(170px, 21vw, 250px); margin-top: clamp(40px, 6vw, 72px); border-radius: 22px; overflow: hidden; border: 1px solid var(--kelp);
  background: radial-gradient(5px 5px at 23% 3px, #fff, rgba(92,242,210,.6) 60%, transparent), radial-gradient(5px 5px at 50% 3px, #fff, rgba(124,108,255,.7) 60%, transparent),
    radial-gradient(5px 5px at 77% 3px, #fff, rgba(92,242,210,.6) 60%, transparent),
    radial-gradient(120% 90% at 50% 0%, rgba(124,108,255,.16), transparent 60%), linear-gradient(to bottom, #07110f, var(--abyss) 72%); }
.buehne .kegel i { position: absolute; top: 0; width: 26%; height: 125%; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(1.5px);
  opacity: calc(.55 + var(--beat) * .45); clip-path: polygon(48.5% 0, 51.5% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(92,242,210,.7), rgba(92,242,210,.12) 60%, rgba(92,242,210,0) 88%);
  animation: schwenk 13.913s ease-in-out infinite alternate; }
.buehne .kegel i:nth-child(1) { left: 10%; --von: -26deg; --bis: 18deg; }
.buehne .kegel i:nth-child(2) { left: 37%; --von: 22deg; --bis: -22deg; animation-delay: -3.478s; background: linear-gradient(to bottom, rgba(124,108,255,.8), rgba(124,108,255,.14) 60%, rgba(124,108,255,0) 88%); }
.buehne .kegel i:nth-child(3) { left: 64%; --von: 24deg; --bis: -16deg; animation-delay: -6.956s; }
@keyframes schwenk { from { transform: rotate(var(--von)); } to { transform: rotate(var(--bis)); } }
.buehne .eqr { position: absolute; left: 50%; width: min(86%, 640px); transform: translateX(-50%); bottom: 32%; height: 40%; display: flex; align-items: flex-end; gap: clamp(2px, .4vw, 5px);
  -webkit-box-reflect: below 2px linear-gradient(transparent 35%, rgba(255,255,255,.3)); }
.buehne .eqr i { flex: 1; height: 100%; border-radius: 2px 2px 0 0; transform-origin: 50% 100%;
  background: linear-gradient(to top, var(--glow), rgba(92,242,210,.45) 65%, rgba(124,108,255,.75));
  transform: scaleY(calc(.08 + var(--z) * .22 + var(--beat) * var(--n, .5) * .7));
  animation: zappel var(--d, .4s) ease-in-out infinite alternate; }
body.klang-an .buehne .eqr i { transform: scaleY(calc(.1 + var(--z) * .25 + var(--beat) * var(--n, .5) * .9)); }
@keyframes zappel { to { --z: 1; } }
.buehne .boden { position: absolute; left: 0; right: 0; bottom: 32%; height: 1px; background: linear-gradient(90deg, transparent, rgba(92,242,210,.75), transparent); box-shadow: 0 0 18px rgba(92,242,210,.5); }
.buehne .pult { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); white-space: nowrap; font: 10px/1 var(--display); letter-spacing: .38em; text-transform: uppercase; color: var(--mist); }
.buehne:not(.sicht) *, .buehne:not(.sicht) { animation-play-state: paused; }

/* Floor: aufklappende Streifengalerie (cc-d9), nur ab 961 px; der offene Clip zeigt sich ganz im Hochformat */
@media (min-width: 961px) {
  .wand.streifen { --h: clamp(440px, 64vh, 620px); display: flex; gap: 14px; height: var(--h); width: min(1120px, calc(100% - 2 * clamp(16px, 5vw, 56px))); perspective: none; }
  .wand.streifen .clip { flex: 1 1 0; min-width: 0; height: 100%; aspect-ratio: auto; margin-top: 0; transform: none; cursor: pointer; filter: saturate(.7) brightness(.6);
    transition: flex .8s var(--ease), filter .6s, border-color .4s, box-shadow .4s; }
  .wand.streifen .clip.offen { flex: 0 0 calc(var(--h) * .5625); filter: none; cursor: default; border-color: var(--glow); box-shadow: 0 30px 80px -30px rgba(92,242,210,.5); }
  .wand.streifen .clip:not(.offen):hover { transform: none; filter: saturate(.9) brightness(.8); }
  .wand.streifen .clip figcaption { opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .5s var(--ease); }
  .wand.streifen .clip.offen figcaption { opacity: 1; transform: none; transition-delay: .35s; }
}

/* Dates: Aufdeckung mit leuchtender Kante (bild-aufdeckung-intersection-observer), Zeile für Zeile */
.dates.aufdecken li { clip-path: inset(0 100% 0 0 round 10px); }
.dates.aufdecken li.auf { clip-path: inset(0 0 0 0 round 10px); transition: clip-path 1.1s var(--ease) calc(var(--i, 0) * .09s), background .3s; }
.dates.aufdecken li::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent calc(100% - 90px), rgba(92,242,210,.22) calc(100% - 4px), var(--glow)); }
.dates.aufdecken li.auf::after { animation: kantelauf 1.1s var(--ease) calc(var(--i, 0) * .09s) both, kanteaus 1.1s linear calc(var(--i, 0) * .09s) both; }
@keyframes kantelauf { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes kanteaus { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }

/* Sets: Musikplayer-Kachel in reinem CSS (cc-d10): Platte dreht beim Hinzeigen oder mit Ton, Laufbalken über 16 Schläge */
.spieler { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 14px; border-radius: 14px; background: rgba(5,11,13,.6); border: 1px solid var(--kelp); transform: translateZ(18px); }
.scheibe { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0 4px, var(--glow-ink) 4.5px 9px, transparent 9.5px), repeating-radial-gradient(circle, #0c191b 0 1.5px, #15292c 2px 3px);
  box-shadow: 0 0 0 1px rgba(92,242,210,.25), 0 6px 18px -6px rgba(0,0,0,.85); animation: platte 1.739s linear infinite paused; }
.scheibe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 40deg, rgba(255,255,255,.16) 60deg, transparent 80deg 220deg, rgba(255,255,255,.09) 240deg, transparent 260deg); }
@keyframes platte { to { transform: rotate(360deg); } }
.card:hover .scheibe, .card:focus-visible .scheibe, body.klang-an .scheibe { animation-play-state: running; }
.spieler.film .scheibe { border-radius: 12px; animation: none; background: linear-gradient(135deg, rgba(124,108,255,.9), rgba(92,242,210,.9)); transform: scale(calc(1 + var(--beat) * .06)); }
.spieler.film .scheibe::after { inset: 14px 12px 14px 18px; border-radius: 0; background: var(--abyss); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.spur { flex: 1; min-width: 0; display: grid; gap: 8px; }
.hoeren { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--moon); }
.lauf { height: 3px; border-radius: 3px; background: var(--kelp); overflow: hidden; }
.lauf i { display: block; height: 100%; background: linear-gradient(90deg, var(--glow), var(--uv)); transform-origin: 0 50%; transform: scaleX(.18); }
.card:hover .lauf i, .card:focus-visible .lauf i, body.klang-an .lauf i { animation: laufbalken 6.956s linear infinite; }
@keyframes laufbalken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.eqm { flex: none; display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; }
.eqm i { width: 3px; height: 100%; border-radius: 1px; background: var(--glow); transform-origin: 50% 100%; transform: scaleY(calc(.2 + var(--beat) * .8)); }
.eqm i:nth-child(2) { transform: scaleY(calc(.4 + var(--beat) * .5)); }
.eqm i:nth-child(3) { transform: scaleY(calc(.15 + var(--beat) * .85)); }
.eqm i:nth-child(4) { transform: scaleY(calc(.35 + var(--beat) * .45)); }
.eqm i:nth-child(5) { transform: scaleY(calc(.25 + var(--beat) * .6)); }

/* Weitersagen: Download-Knopf füllt sich wie Wasser (cc-a5), der Knopf ist der Fortschritt */
a[data-fortschritt] .flut { position: absolute; inset: 0; pointer-events: none; background: rgba(92,242,210,.3);
  transform: translateY(calc((1 - var(--p, 0)) * (100% + 8px))); transition: transform .3s linear, opacity .3s; }
a[data-fortschritt] .flut::before { content: ""; position: absolute; left: 0; right: -24px; top: -6px; height: 6px;
  background: radial-gradient(12px 7px at 12px 7px, rgba(92,242,210,.3) 98%, transparent 100%) 0 0 / 24px 6px repeat-x; animation: welle .9s linear infinite; }
@keyframes welle { to { transform: translateX(-24px); } }
a[data-fortschritt] .lbl { position: relative; font-variant-numeric: tabular-nums; }
a[data-fortschritt].laedt { border-color: var(--glow); cursor: progress; }
a[data-fortschritt].ohne-mass .flut { transform: translateY(55%); }
a[data-fortschritt].fertig { background: var(--glow); color: var(--glow-ink); border-color: var(--glow); }
a[data-fortschritt].fertig .flut { opacity: 0; }
a[data-fortschritt].fehler { border-color: var(--uv); }

/* Booking: Kontaktzeile aus Tastenkappen (cc-c4), die Hauptkappe leuchtet im Takt */
.tasten { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 16px; margin: 34px 0 0; padding: 0 0 8px; list-style: none; }
.kappe { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left;
  min-width: 214px; min-height: 64px; padding: 13px 20px 15px; border-radius: 16px; text-decoration: none; color: var(--moon);
  background: linear-gradient(180deg, #13292c, #0b1a1c); border: 1px solid #1f4145;
  box-shadow: 0 6px 0 #061113, 0 7px 0 #1f4145, 0 16px 28px -10px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), border-color .25s; }
.kappe svg { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--glow); }
.kappe span { font: 11px/1.3 var(--display); letter-spacing: .2em; text-transform: uppercase; }
.kappe small { font-size: 13px; line-height: 1.3; color: var(--mist); }
.kappe:hover { transform: translateY(-2px); border-color: rgba(92,242,210,.6); box-shadow: 0 8px 0 #061113, 0 9px 0 rgba(92,242,210,.45), 0 20px 34px -10px rgba(92,242,210,.28), inset 0 1px 0 rgba(255,255,255,.1); }
.kappe:active { transform: translateY(5px); box-shadow: 0 1px 0 #061113, 0 2px 0 #1f4145, 0 4px 10px -4px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05); }
.kappe.haupt { color: var(--glow-ink); border-color: #a4fbe9; background: linear-gradient(180deg, #86f8e2, var(--glow));
  box-shadow: 0 6px 0 #1d8a76, 0 7px 0 #0a2b25, 0 0 calc(12px + var(--beat) * 30px) rgba(92,242,210,.42), inset 0 1px 0 rgba(255,255,255,.6); }
.kappe.haupt svg { color: var(--glow-ink); }
.kappe.haupt small { color: #0c3a32; }
.kappe.haupt:hover { box-shadow: 0 8px 0 #1d8a76, 0 9px 0 #0a2b25, 0 0 calc(18px + var(--beat) * 34px) rgba(92,242,210,.55), inset 0 1px 0 rgba(255,255,255,.6); }
.kappe.haupt:active { box-shadow: 0 1px 0 #1d8a76, 0 2px 0 #0a2b25, 0 0 12px rgba(92,242,210,.4), inset 0 1px 0 rgba(255,255,255,.5); }

/* Footer: Impressum und Datenschutz klappen weich auf (faq-details-summary-hoehenanimation), sonst wie gewohnt */
footer summary { list-style: none; }
footer summary::-webkit-details-marker { display: none; }
footer summary::after { content: "+"; content: "+" / ""; display: inline-block; margin-left: 10px; color: var(--glow); font-size: 18px; line-height: 1; transition: transform .3s var(--ease); }
footer details[open] > summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  footer details { interpolate-size: allow-keywords; }
  footer details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  footer details[open]::details-content { height: auto; }
}

/* 404: Leuchtqualle (cc-technik-kettenfolger) */
.hero canvas.qualle { z-index: -2; pointer-events: none; cursor: auto; touch-action: auto; }

@media (max-width: 480px) {
  .tasten { display: grid; grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .kappe { min-width: 0; }
  .buehne .pult { letter-spacing: .26em; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.beat::after { animation: none; background: conic-gradient(from 200deg, transparent 0deg 240deg, var(--glow) 330deg, transparent 360deg); }
  .buehne .kegel i { animation: none; transform: rotate(var(--von)); }
  .buehne .eqr i, body.klang-an .buehne .eqr i { animation: none; transform: scaleY(calc(.15 + var(--n, .5) * .5)); }
  .scheibe, .lauf i, a[data-fortschritt] .flut::before { animation: none !important; }
  .kappe { transition: none; }
}