/* seite.css – Infoseite FLINTA* Club Deck, Fassung 2 (2026-10-18): Bühne mit Foto, Laufband, Galerie.
   Farben, Schriften und Leuchten nur über die Tokens aus fcd-ci.css. Handy zuerst. */

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

html {
  --band-h: 2.4rem;
  background: var(--fcd-nacht);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--fcd-nacht);
  color: var(--fcd-nebel);
  font-family: var(--fcd-font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

a { color: var(--fcd-weiss); text-decoration-color: var(--fcd-neon); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--fcd-roehre); }

:focus-visible {
  outline: 2px solid var(--fcd-neon);
  outline-offset: 2px;
  border-radius: var(--fcd-radius);
}

.huelle {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 48rem) { .huelle { padding-inline: 32px; } }

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

.sprung {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 20;
  background: var(--fcd-neon);
  color: var(--fcd-auf-neon);
  font-weight: 700;
  padding: .6rem 1rem;
  border-radius: var(--fcd-radius);
  text-decoration: none;
}
.sprung:focus { top: 16px; color: var(--fcd-auf-neon); }

/* ---------- Sprachen ---------- */
/* Ohne JavaScript stehen beide Sprachen untereinander; mit JavaScript nur die gewählte. */
[hidden] { display: none !important; }
html[data-sprache="de"] [lang="en"]:not(html):not(.immer),
html[data-sprache="en"] [lang="de"]:not(html):not(.immer) { display: none !important; }
html:not([data-sprache]) .zw[lang="en"]::before { content: " / "; color: var(--fcd-rauch); text-shadow: none; }
html:not([data-sprache]) p[lang="en"], html:not([data-sprache]) li[lang="en"] { color: var(--fcd-rauch); }

/* ---------- Leiste ---------- */
.leiste {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(18, 18, 18, .96); /* ohne backdrop-filter: spart Rechenzeit beim Scrollen */
  border-bottom: 1px solid var(--fcd-linie);
}
.leiste .huelle {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}
.kurz {
  font-family: var(--fcd-font-marke);
  font-size: 1.35rem;
  color: var(--fcd-roehre);
  text-decoration: none;
  text-shadow: var(--fcd-leuchten);
  white-space: nowrap;
}
.navi { display: none; gap: 1.5rem; margin-inline: auto; }
.navi a {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--fcd-nebel);
}
.navi a:hover { color: var(--fcd-roehre); }
@media (min-width: 48rem) { .navi { display: flex; } }

.sprachwahl { display: flex; gap: .25rem; margin-left: auto; }
.navi + .sprachwahl { margin-left: 0; }
@media (max-width: 47.99rem) { .navi + .sprachwahl { margin-left: auto; } }
.sprachwahl button {
  font: inherit;
  font-family: var(--fcd-font-daten);
  font-size: .8125rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  background: transparent;
  color: var(--fcd-rauch);
  border: 1px solid var(--fcd-beton);
  border-radius: var(--fcd-radius);
  cursor: pointer;
}
.sprachwahl button[aria-pressed="true"] { color: var(--fcd-auf-neon); background: var(--fcd-neon); border-color: var(--fcd-neon); }

/* ---------- Bühne ---------- */
.buehne {
  position: relative;
  /* Bühne füllt den ersten Bildschirm: Leiste oben, Laufband genau am unteren Rand */
  min-height: calc(100vh - 3.5rem - 1px - var(--band-h));
  min-height: calc(100svh - 3.5rem - 1px - var(--band-h));
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.buehne-bild { position: absolute; inset: 0; z-index: -1; }
.buehne-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.buehne::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,18,18,.1) 0%, rgba(18,18,18,.55) 40%, rgba(18,18,18,.88) 62%, var(--fcd-nacht) 96%);
}
.buehne-text { padding-block: 6rem 3rem; }
.ort {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .35rem .8rem;
  font-family: var(--fcd-font-daten);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fcd-weiss);
  background: rgba(18, 18, 18, .8);
  border: 1px solid color-mix(in srgb, var(--fcd-neon) 45%, transparent);
  border-radius: 999px;
}
.buehne h1 {
  margin: 0;
  font-family: var(--fcd-font-marke);
  font-weight: 400;
  font-size: clamp(3.2rem, 15vw, 8.5rem);
  line-height: .92;
}
.buehne h1 > span { display: block; }
.leitspruch {
  margin: 1.25rem 0 0;
  max-width: 28rem;
  font-size: clamp(1.125rem, 3.5vw, 1.375rem);
  color: var(--fcd-weiss);
  font-style: italic;
}
.knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

@media (min-width: 60rem) {
  .buehne { align-items: center; }
  .buehne-bild { inset: 0 0 0 auto; width: 48%; }
  .buehne-bild img { object-position: center; }
  .buehne::after {
    background:
      linear-gradient(90deg, var(--fcd-nacht) 50%, rgba(18,18,18,.6) 62%, rgba(18,18,18,0) 80%),
      linear-gradient(0deg, var(--fcd-nacht) 0%, rgba(18,18,18,0) 22%);
  }
  .buehne-text { padding-block: 4rem; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .04em;
  text-decoration: none;
  transition: box-shadow .2s; /* keine Farbüberblendung: beim Farbwechsel soll es flackern, nicht blenden */
}
.knopf-haupt { background: var(--fcd-neon); color: var(--fcd-auf-neon); }
.knopf-haupt:hover { color: var(--fcd-auf-neon); box-shadow: var(--fcd-leuchten); }
.knopf-zweit { border: 1px solid var(--fcd-neon); color: var(--fcd-weiss); }
.knopf-zweit:hover { background: color-mix(in srgb, var(--fcd-neon) 12%, transparent); color: var(--fcd-weiss); }

/* ---------- Neon wie echte Röhren ----------
   Röhre: gleißend weißer Kern (Füllung + enger weißer Lichthof), dünne farbige Kontur, Schein in Stufen nach außen schwächer und violetter
   (in em, wächst mit der Schrift). Raumlicht: weicher Schein auf dem Hintergrund (::before), folgt --hell.
   Flackern erzeugt js/neon.js jedes Mal neu (ganzer Schriftzug, ein Wort oder ein Buchstabe). */
@property --hell { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --rand { syntax: "<color>"; inherits: true; initial-value: #ff5ef4; }

/* Neonfarben (Farbknopf in der Leiste, js/neon.js): html[data-farbe]. Je Farbe Kern, Rand, Schein-Stufen s0–s5,
   Raumlicht, die Zustände halb/glimm/aus und die Drehung für Bilder (Logo, Wortmarke). Standard: Magenta (CI).
   data-farbe wirkt auf html (alles) oder auf einzelne Schriftzüge, Buchstaben und Bilder (Farbwechsel-Show). */
:root, [data-farbe="magenta"] {
  --fcd-neon: #ff00ff; --fcd-roehre: #fcdbfc;
  --n-kern: #ffffff; --n-rand: #ff5ef4;
  --n-s0: #fff6ff; --n-s1: #ffb8fa; --n-s2: #ff4df5; --n-s3: rgba(255, 0, 230, .75); --n-s4: rgba(230, 0, 255, .48); --n-s5: rgba(180, 0, 255, .3);
  --n-raum1: rgba(255, 0, 210, .17); --n-raum2: rgba(190, 0, 255, .06);
  --n-halb-kern: #f0b6ec; --n-halb-rand: #d94ad2; --n-halb-s1: #ff9cf7; --n-halb-s2: rgba(255, 0, 230, .45); --n-halb-s3: rgba(200, 0, 255, .2);
  --n-glimm-kern: #86447f; --n-glimm-rand: #9a3592; --n-glimm-s: rgba(255, 0, 230, .3);
  --n-aus-kern: #3d2240; --n-aus-rand: #4f2a4c;
  --n-dreh: 0deg;
}
[data-farbe="violett"] {
  --fcd-neon: #9b5cff; --fcd-roehre: #e6dcff;
  --n-kern: #ffffff; --n-rand: #a66bff;
  --n-s0: #faf6ff; --n-s1: #d4bcff; --n-s2: #9b5cff; --n-s3: rgba(130, 40, 255, .75); --n-s4: rgba(100, 0, 255, .48); --n-s5: rgba(70, 0, 230, .3);
  --n-raum1: rgba(140, 40, 255, .17); --n-raum2: rgba(80, 0, 255, .06);
  --n-halb-kern: #c9b3ef; --n-halb-rand: #7f48d6; --n-halb-s1: #b48cff; --n-halb-s2: rgba(130, 40, 255, .45); --n-halb-s3: rgba(90, 0, 255, .2);
  --n-glimm-kern: #5c4482; --n-glimm-rand: #5e3596; --n-glimm-s: rgba(130, 40, 255, .3);
  --n-aus-kern: #2a2240; --n-aus-rand: #352a4f;
  --n-dreh: -35deg;
}
[data-farbe="rot"] {
  --fcd-neon: #ff3d63; --fcd-roehre: #ffd9e0;
  --n-kern: #ffffff; --n-rand: #ff4d6d;
  --n-s0: #fff6f7; --n-s1: #ffb3c0; --n-s2: #ff3d63; --n-s3: rgba(255, 20, 70, .75); --n-s4: rgba(255, 0, 90, .48); --n-s5: rgba(220, 0, 80, .3);
  --n-raum1: rgba(255, 20, 80, .17); --n-raum2: rgba(255, 0, 60, .06);
  --n-halb-kern: #efb3bd; --n-halb-rand: #d6405c; --n-halb-s1: #ff8fa3; --n-halb-s2: rgba(255, 20, 70, .45); --n-halb-s3: rgba(220, 0, 60, .2);
  --n-glimm-kern: #824450; --n-glimm-rand: #96354a; --n-glimm-s: rgba(255, 20, 70, .3);
  --n-aus-kern: #402229; --n-aus-rand: #4f2a31;
  --n-dreh: 45deg;
}
[data-farbe="tuerkis"] {
  --fcd-neon: #1fe6d6; --fcd-roehre: #d6fffb;
  --n-kern: #ffffff; --n-rand: #2ef2e0;
  --n-s0: #f6fffe; --n-s1: #b0fff6; --n-s2: #1fe6d6; --n-s3: rgba(0, 230, 210, .7); --n-s4: rgba(0, 190, 230, .45); --n-s5: rgba(0, 140, 220, .3);
  --n-raum1: rgba(0, 230, 210, .15); --n-raum2: rgba(0, 160, 255, .06);
  --n-halb-kern: #b0e6e0; --n-halb-rand: #24b8ab; --n-halb-s1: #7ff5e9; --n-halb-s2: rgba(0, 230, 210, .42); --n-halb-s3: rgba(0, 170, 230, .2);
  --n-glimm-kern: #3f7a74; --n-glimm-rand: #2c8279; --n-glimm-s: rgba(0, 230, 210, .28);
  --n-aus-kern: #1f3a3a; --n-aus-rand: #284a48;
  --n-dreh: -130deg;
}

/* weitere Neonfarben (aus der Grundfarbe abgeleitet) */
[data-farbe="gruen"] {
  --fcd-neon: #39ff14; --fcd-roehre: #e1ffdc; --n-kern: #ffffff; --n-rand: #74ff5a;
  --n-s0: #e1ffdc; --n-s1: #b0ffa1; --n-s2: #39ff14; --n-s3: rgba(57, 255, 20, 0.75);
  --n-s4: rgba(57, 255, 20, 0.48); --n-s5: rgba(57, 255, 20, 0.3); --n-raum1: rgba(57, 255, 20, 0.17); --n-raum2: rgba(57, 255, 20, 0.06);
  --n-halb-kern: #baffad; --n-halb-rand: #30d911; --n-halb-s1: #92ff7e; --n-halb-s2: rgba(57, 255, 20, 0.45);
  --n-halb-s3: rgba(57, 255, 20, 0.2); --n-glimm-kern: #318a20; --n-glimm-rand: #1f8c0b; --n-glimm-s: rgba(57, 255, 20, 0.3);
  --n-aus-kern: #1a4112; --n-aus-rand: #1d5413; --n-dreh: 171deg;
}
[data-farbe="gelb"] {
  --fcd-neon: #ffe600; --fcd-roehre: #fffbd9; --n-kern: #ffffff; --n-rand: #ffee4c;
  --n-s0: #fffbd9; --n-s1: #fff599; --n-s2: #ffe600; --n-s3: rgba(255, 230, 0, 0.75);
  --n-s4: rgba(255, 230, 0, 0.48); --n-s5: rgba(255, 230, 0, 0.3); --n-raum1: rgba(255, 230, 0, 0.17); --n-raum2: rgba(255, 230, 0, 0.06);
  --n-halb-kern: #fff6a6; --n-halb-rand: #d9c400; --n-halb-s1: #fff173; --n-halb-s2: rgba(255, 230, 0, 0.45);
  --n-halb-s3: rgba(255, 230, 0, 0.2); --n-glimm-kern: #8a7f17; --n-glimm-rand: #8c7f00; --n-glimm-s: rgba(255, 230, 0, 0.3);
  --n-aus-kern: #413c0e; --n-aus-rand: #544d0d; --n-dreh: 114deg;
}
[data-farbe="orange"] {
  --fcd-neon: #ff7a00; --fcd-roehre: #ffebd9; --n-kern: #ffffff; --n-rand: #ffa24c;
  --n-s0: #ffebd9; --n-s1: #ffca99; --n-s2: #ff7a00; --n-s3: rgba(255, 122, 0, 0.75);
  --n-s4: rgba(255, 122, 0, 0.48); --n-s5: rgba(255, 122, 0, 0.3); --n-raum1: rgba(255, 122, 0, 0.17); --n-raum2: rgba(255, 122, 0, 0.06);
  --n-halb-kern: #ffd0a6; --n-halb-rand: #d96800; --n-halb-s1: #ffb673; --n-halb-s2: rgba(255, 122, 0, 0.45);
  --n-halb-s3: rgba(255, 122, 0, 0.2); --n-glimm-kern: #8a4e17; --n-glimm-rand: #8c4300; --n-glimm-s: rgba(255, 122, 0, 0.3);
  --n-aus-kern: #41270e; --n-aus-rand: #542f0d; --n-dreh: 89deg;
}
[data-farbe="blau"] {
  --fcd-neon: #2e6bff; --fcd-roehre: #e0e9ff; --n-kern: #ffffff; --n-rand: #6d97ff;
  --n-s0: #e0e9ff; --n-s1: #abc4ff; --n-s2: #2e6bff; --n-s3: rgba(46, 107, 255, 0.75);
  --n-s4: rgba(46, 107, 255, 0.48); --n-s5: rgba(46, 107, 255, 0.3); --n-raum1: rgba(46, 107, 255, 0.17); --n-raum2: rgba(46, 107, 255, 0.06);
  --n-halb-kern: #b6cbff; --n-halb-rand: #275bd9; --n-halb-s1: #8caeff; --n-halb-s2: rgba(46, 107, 255, 0.45);
  --n-halb-s3: rgba(46, 107, 255, 0.2); --n-glimm-kern: #2c478a; --n-glimm-rand: #193b8c; --n-glimm-s: rgba(46, 107, 255, 0.3);
  --n-aus-kern: #182441; --n-aus-rand: #1a2b54; --n-dreh: -78deg;
}

/* Leuchten der Akzente folgt der Farbe (Knöpfe, Navigation, Kontakt) */
:root, [data-farbe] { --fcd-leuchten: 0 0 5px var(--fcd-neon), 0 0 10px var(--fcd-neon), 0 0 50px var(--fcd-neon); }

[data-neon]:not(img), .band-lauf > span {
  --hell: 1;
  color: var(--n-kern);
  --rand: var(--n-rand);
  -webkit-text-stroke: .016em var(--rand);
  text-shadow:
    0 0 .01em #fff,
    0 0 .035em var(--n-s0),
    0 0 .07em var(--n-s1),
    0 0 .13em var(--n-s2),
    0 0 .24em var(--n-s3),
    0 0 .42em var(--n-s4);
}
img[data-neon] { filter: hue-rotate(var(--n-dreh)); }
/* kleine Schrift: Kontur schmaler, Schein etwas weiter, damit es noch leuchtet */
.band-lauf > span, .kurz[data-neon] { -webkit-text-stroke-width: .014em; }
.band-lauf > span {
  text-shadow: 0 0 1px var(--n-s0), 0 0 3px var(--n-s1), 0 0 7px var(--n-s2), 0 0 14px var(--n-s4);
}
/* Raumlicht hinter größeren Schriftzügen */
.buehne h1[data-neon], h2[data-neon], .wert[data-neon] { position: relative; isolation: isolate; }
/* Raumlicht genau hinter dem Text: Box so breit wie der Text, nicht wie der Container */
.buehne h1[data-neon], .wert[data-neon] { width: fit-content; }
.zahl { align-items: flex-start; }
h2[data-neon] { display: inline-block; }
.buehne h1[data-neon]::before, h2[data-neon]::before, .wert[data-neon]::before {
  content: "";
  position: absolute;
  inset: -40% -12%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--n-raum1), var(--n-raum2) 60%, transparent);
  opacity: var(--hell);
  pointer-events: none;
  will-change: opacity; /* eigene Ebene: Flackern ändert nur die Deckkraft, kein Neuzeichnen */
}
.unterseite h2[data-neon]::before { inset: -30% -6%; background: radial-gradient(closest-side, var(--n-raum2), transparent); }

/* Brummen, sparsam: nur eine zweite Raumlicht-Schicht (::after) atmet in der Deckkraft – das rechnet die Grafikkarte,
   die Schrift selbst wird nicht neu gezeichnet. Dauer/Versatz je Schriftzug setzt js/neon.js; aus bei „Bewegung
   reduzieren“ (fcd-ci.css) und mit dem Knopf „Flackern ausschalten“. */
@keyframes brummen {
  0%   { opacity: .55; }
  13%  { opacity: .3; }
  27%  { opacity: .6; }
  41%  { opacity: .4; }
  55%  { opacity: .65; }
  68%  { opacity: .25; }
  82%  { opacity: .5; }
  100% { opacity: .55; }
}
.buehne h1[data-neon]::after, h2[data-neon]::after, .wert[data-neon]::after {
  content: "";
  position: absolute;
  inset: -40% -12%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--n-raum1), transparent 70%); /* fest: kein Neuzeichnen beim Flackern */
  pointer-events: none;
  will-change: opacity;
  animation: brummen 5.3s ease-in-out infinite;
  animation-duration: inherit;
  animation-delay: inherit;
}
.unterseite h2[data-neon]::after { display: none; }
html.neon-ruhig [data-neon]::after { animation: none; opacity: .45; }

/* Flackerknopf (Flackern aus/an) und Farbknopf in der Leiste */
.flackerknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-left: auto; padding: 0;
  border: 1px solid var(--fcd-beton); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.flackerknopf:hover { border-color: var(--n-rand); }
.flackerknopf svg {
  width: 1.35rem; height: 1.35rem; overflow: visible;
  fill: none; stroke: var(--n-kern); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px var(--n-rand)) drop-shadow(0 0 4px var(--n-s2));
}
.flackerknopf .strich { display: none; stroke: var(--fcd-nebel); filter: none; }
.flackerknopf[aria-pressed="true"] svg { stroke: var(--fcd-rauch); filter: none; }
.flackerknopf[aria-pressed="true"] .strich { display: inline; }
.flackerknopf + .farbknopf { margin-left: 0; }
@media (min-width: 48rem) { .navi + .flackerknopf { margin-left: 0; } }
/* Flackern aus: kein Brummen */
/* Farbknopf in der Leiste */
.farbknopf {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-left: auto;
  border: 1px solid var(--fcd-beton); border-radius: 50%;
  background: transparent; cursor: pointer;
}
.farbknopf:hover { border-color: var(--n-rand); }
.farbknopf .punkt {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--n-kern);
  box-shadow: 0 0 0 2px var(--n-rand), 0 0 8px 2px var(--n-s2), 0 0 18px 4px var(--n-s4);
}
.farbknopf + .sprachwahl, .navi + .farbknopf + .sprachwahl { margin-left: 0; }
@media (min-width: 48rem) { .navi + .farbknopf { margin-left: 0; } }
/* Buchstaben/Wörter für das Flackern (von js/neon.js angelegt; Vorlesetext bleibt ungeteilt) */
/* ausgeschaltete Röhre (Buchstabe, Laufband-Wort, Bild) – js/neon.js schaltet so aus und zündet nach und nach */
.neon-zeichen.neon-aus, .band-lauf > span.neon-aus {
  color: var(--n-aus-kern) !important;
  --rand: var(--n-aus-rand) !important;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .08) !important;
}
img[data-neon].neon-aus { filter: hue-rotate(var(--n-dreh)) brightness(.35); }
/* noch nicht gezündet: ganzer Schriftzug aus, ohne Raumlicht und Brummen – html.neon-start (js/neon-vorab.js, bis
   neon.js läuft) bzw. .neon-dunkel am Schriftzug (js/neon.js, bis er beim Hineinscrollen zündet) */
html.neon-start [data-neon]:not(img), html.neon-start [data-neon] .neon-zeichen,
[data-neon].neon-dunkel:not(img), [data-neon].neon-dunkel .neon-zeichen {
  color: var(--n-aus-kern) !important;
  --rand: var(--n-aus-rand) !important;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, .08) !important;
}
html.neon-start [data-neon]::before, html.neon-start [data-neon]::after,
[data-neon].neon-dunkel::before, [data-neon].neon-dunkel::after { opacity: 0 !important; animation: none !important; }
html.neon-start img[data-neon], img[data-neon].neon-dunkel { filter: hue-rotate(var(--n-dreh)) brightness(.35); }
/* Buchstaben lösen ihre Farben selbst auf, damit jeder eine eigene Farbe tragen kann */
.neon-zeichen {
  color: var(--n-kern);
  --rand: var(--n-rand);
  text-shadow:
    0 0 .01em #fff,
    0 0 .035em var(--n-s0),
    0 0 .07em var(--n-s1),
    0 0 .13em var(--n-s2),
    0 0 .24em var(--n-s3),
    0 0 .42em var(--n-s4);
}
/* Titel: jeder Buchstabe auf eigener Grafik-Ebene – beim Flackern/Farbwechsel wird nur dieser Buchstabe neu
   gezeichnet statt des ganzen Titels mit seinem weiten Schein (vorher Ruckler während der Farb-Show) */
.buehne h1 .neon-wort { white-space: nowrap; }
.buehne h1 .neon-zeichen { display: inline-block; will-change: transform; }
/* Laufband: leichteres Leuchten (3 statt 8 Lagen) – bei der kleinen Schrift kein sichtbarer Unterschied, aber viel
   weniger Zeichenarbeit, wenn sich Farben ändern */
.band-lauf > span .neon-zeichen { text-shadow: 0 0 1px var(--n-s0), 0 0 4px var(--n-s2), 0 0 11px var(--n-s4); }
.neon-wort, .neon-zeichen { display: inline; -webkit-text-stroke-color: var(--rand); }

/* ---------- Laufband ---------- */
.band {
  overflow: hidden;
  box-sizing: border-box;
  height: var(--band-h);
  display: flex;
  align-items: center;
  border-block: 1px solid var(--fcd-linie);
  background: var(--fcd-nacht);
}
.band-lauf {
  display: flex;
  width: max-content;
  animation: band 90s linear infinite;
  will-change: transform; /* Hälfte = 4 Gruppen, breiter als übliche Bildschirme */
}
.band-lauf > span {
  font-family: var(--fcd-font-marke);
  font-size: clamp(.8rem, 1.6vw, .95rem);
  letter-spacing: .04em;
  white-space: nowrap;
  padding-inline: .8rem;
}
/* Trennzeichen mit eigenen festen Werten: flackert nicht mit dem Wort */
.band-lauf > span::after { content: "✱"; color: var(--n-s2); margin-left: 1.6rem; font-family: var(--fcd-font-text); -webkit-text-stroke: 0; text-shadow: 0 0 4px var(--n-s2), 0 0 10px var(--n-s4); }
@keyframes band { to { transform: translateX(-50%); } }

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(3.5rem, 10vw, 7rem); }
/* Raumlicht der Neon-Schriften darf nicht seitlich überstehen (kein waagerechtes Scrollen) */
.abschnitt, .unterseite { overflow-x: clip; }
.abschnitt + .abschnitt { border-top: 1px solid var(--fcd-linie); }

.kennung {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0 0 .75rem;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fcd-rauch);
}
.kennung .nr { font-family: var(--fcd-font-daten); color: var(--fcd-neon); }

h2 {
  margin: 0 0 1.75rem;
  font-family: var(--fcd-font-marke);
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 3.75rem);
  line-height: 1.05;
  color: var(--fcd-weiss);
}
h3 { color: var(--fcd-weiss); }
p { margin: 0 0 1rem; max-width: 40rem; }
strong { color: var(--fcd-weiss); }

.hinweis { font-size: .875rem; color: var(--fcd-rauch); }

/* Über uns */
.ueber .huelle { display: grid; gap: 2.5rem; }
.ueber-text p { font-size: 1.125rem; }
.ueber-bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--fcd-radius); }
@media (min-width: 60rem) {
  .ueber .huelle { grid-template-columns: 1.2fr .8fr; align-items: center; gap: 4rem; }
}

figcaption {
  margin-top: .6rem;
  font-family: var(--fcd-font-daten);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--fcd-rauch);
}

/* Zahlen */
.zahlen-abschnitt { background: var(--fcd-kohle); }
.zahlen {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 48rem) { .zahlen { grid-template-columns: 1fr 1fr 2fr; gap: 2rem; } }
.zahl { display: flex; flex-direction: column; gap: .5rem; }
.wert {
  font-family: var(--fcd-font-marke);
  font-size: clamp(3rem, 10vw, 4.75rem);
  line-height: 1;
  color: var(--fcd-roehre);
  text-shadow: var(--fcd-leuchten);
}
.wert.orte {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.1em;
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  line-height: 1.25;
}
/* kleines, ruhiges Trennzeichen zwischen den Clubs – nur wenn zwei nebeneinanderstehen (js/orte.js setzt mit-trenner).
   Der Abstand bleibt gleich, damit der Umbruch durch das Zeichen nicht springt. */
.wert.orte > span { position: relative; }
.wert.orte > span.mit-trenner::after {
  position: absolute; right: -.55em; transform: translateX(50%);
  content: "·";
  color: var(--n-rand);
  opacity: .55;
  font-family: var(--fcd-font-text);
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.was { color: var(--fcd-nebel); }

/* Galerie: Handy einspaltig, ab Tablet zwei, ab Desktop drei Spalten mit breiten Querformaten */
.galerie { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
.g-quer { grid-column: span 2; }
.galerie figure { display: block; margin: 0; }
/* Seitenverhältnis direkt am Foto (Block): reserviert den Platz vor dem Laden und braucht keine Prozent-Höhen –
   Safari rechnet height: 100% in Flex-Elementen anders (Fotos erschienen dort in Originalgröße, Seite sprang). */
.galerie picture { display: block; overflow: hidden; border-radius: var(--fcd-radius); }
.galerie img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--fcd-radius); }
.galerie picture img { transition: transform .5s ease, filter .5s ease; filter: saturate(1.05); }
.galerie figure:hover picture img { transform: scale(1.03); filter: saturate(1.2); }
.g-hoch img { aspect-ratio: 2 / 3; }
.g-quer img { aspect-ratio: 3 / 2; }
@media (min-width: 40rem) { .galerie { gap: 1rem; } }
/* unter 3 Spalten: letztes Hochformat über die volle Breite, damit keine halbe Zeile frei bleibt */
@media (max-width: 63.99rem) { .g-breit-schmal { grid-column: span 2; } .g-breit-schmal img { aspect-ratio: 3 / 2; } }
@media (min-width: 64rem) {
  .galerie { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: 1.25rem; }
  .g-quer { grid-column: span 2; }
  /* Querformat über zwei Spalten so hoch wie die Hochformate daneben (2 Spalten + Abstand : 1,5 Spalten) */
  .g-quer img { aspect-ratio: 1.37; }
}
}

/* Mixe */
.mixe-abschnitt {
  background:
    radial-gradient(60rem 30rem at 15% 50%, color-mix(in srgb, var(--fcd-neon) 14%, transparent), transparent 70%),
    var(--fcd-nacht);
}
.mixe { display: grid; gap: 2rem; align-items: center; }
.mixe .bild img { width: 100%; max-width: 15rem; margin-inline: auto; border-radius: 50%; box-shadow: 0 0 40px color-mix(in srgb, var(--fcd-neon) 35%, transparent); }
@media (min-width: 48rem) { .mixe .bild img { max-width: 22rem; } }
@media (min-width: 48rem) { .mixe { grid-template-columns: 22rem 1fr; gap: 4rem; } }
.mixe h2 { font-size: clamp(1.9rem, 5.5vw, 3rem); }

/* Kontakt */
.kontakt { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--fcd-linie); }
.kontakt li { border-bottom: 1px solid var(--fcd-linie); }
.kontakt a {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "art pfeil" "wo pfeil";
  align-items: center;
  gap: .15rem 1rem;
  padding: 1.25rem 0;
  text-decoration: none;
}
.kontakt .art {
  grid-area: art;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fcd-rauch);
}
.kontakt .wo {
  grid-area: wo;
  font-family: var(--fcd-font-marke);
  font-size: clamp(1.4rem, 5.5vw, 2.4rem);
  color: var(--fcd-weiss);
  overflow-wrap: anywhere;
  transition: color .2s, text-shadow .2s;
}
.kontakt .pfeil { grid-area: pfeil; font-size: 1.5rem; color: var(--fcd-neon); }
.kontakt a:hover .wo, .kontakt a:focus-visible .wo { color: var(--fcd-roehre); text-shadow: var(--fcd-leuchten); }
@media (min-width: 48rem) {
  .kontakt a { grid-template-columns: 10rem 1fr auto; grid-template-areas: "art wo pfeil"; }
}

/* ---------- Fuß ---------- */
.fuss {
  border-top: 1px solid var(--fcd-linie);
  background: #0b0b0b;
  padding-block: 3rem 2rem;
  font-size: .875rem;
  color: var(--fcd-rauch);
}
.fuss-logo { margin: 0 0 1.25rem; font-family: var(--fcd-font-marke); font-size: 3.4rem; line-height: 1; } /* Schriftzug statt Bild: flackert Buchstabe für Buchstabe */
.unten {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fcd-linie);
}
.unten a { color: var(--fcd-nebel); }

/* ---------- Unterseite (Impressum) ---------- */
.unterseite { padding-block: 3rem 5rem; }
.unterseite h1 {
  margin: 0 0 2rem;
  font-family: var(--fcd-font-marke);
  font-weight: 400;
  font-size: clamp(2.5rem, 9vw, 4.5rem);
}
.unterseite h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 2.25rem 0 .75rem; }
.unterseite ul { max-width: 44rem; padding-left: 1.25rem; }
.unterseite li { margin-bottom: .6rem; }
.unterseite li::marker { color: var(--fcd-neon); }
html:not([data-sprache]) .unterseite div[lang="en"] { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--fcd-linie); }
.zurueck { margin-top: 3rem; }