/* ==========================================================================
   coreforall.de — Markenstil des Relaunchs (08/2026)

   Lädt NACH auftritt.css und stellt nur diese Marke um: helles Design,
   Cyan als Markenfarbe, Anton für Titel, Space Grotesk für die Navigation,
   JetBrains Mono für Zahlen und Auszeichnungen. Die anderen Marken
   (coreev, tm) behalten das gemeinsame Grundgerüst unverändert.

   Warum eine eigene Datei und keine Weiche im gemeinsamen Stil: Der
   Relaunch ändert Farbe, Schrift UND Bauformen (Logo-Kopf, Genre-Band,
   wackelnde Datumskachel, Saalkarte). In auftritt.css eingeflochten wäre
   jede Zeile eine Falle für die Nachbar-Marken.
   ========================================================================== */

/* ── Schriften ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Anton";
  src: url("/statisch/schrift/anton-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/statisch/schrift/space-grotesk-600-latin.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/statisch/schrift/space-grotesk-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/statisch/schrift/jetbrains-mono-400-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/statisch/schrift/jetbrains-mono-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── Farb- und Schriftwerte ────────────────────────────────────────────── */

[data-marke="coreforall"] {
  --grund: #f7f9fa;
  --grund-2: #eef4f6;
  --flaeche: #ffffff;
  --flaeche-2: #fbfcfd;
  --rand: #dce4e8;
  --rand-stark: #b9c8cf;

  --text: #0f2430;
  --text-2: #5c6e79;
  --text-3: #8fa6b1;

  --marke: #0899b8;
  --marke-dunkel: #067a94;
  --akzent: #3fc4e0;
  --akzent-2: #7fd6ea;
  --auf-marke: #ffffff;
  --tinte: #0f2430;          /* das dunkle Blau der Flächen und Köpfe */
  --tinte-2: #0e3646;
  --nacht: #0a1a24;          /* Hintergrund der Veranstaltungsseite */
  --verlauf: linear-gradient(120deg, var(--tinte-2), var(--tinte));
  --schein: none;

  --ok: #17b890;
  --ok-flaeche: #eef9f2;
  --warn: #e0a343;
  --gefahr: #c0392b;
  --whatsapp: #25d366;

  --schrift: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-titel: "Anton", Impact, sans-serif;
  --schrift-nav: "Space Grotesk", var(--schrift);
  --schrift-mono: "JetBrains Mono", ui-monospace, monospace;
  --schrift-schild: var(--schrift-mono);
  --titel-sperrung: .01em;
  --titel-gewicht: 400;      /* Anton hat nur einen Schnitt */

  --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px;

  --schatten: 0 8px 24px rgba(15, 36, 48, .12);
  --schatten-klein: 0 3px 10px rgba(15, 36, 48, .18);

  background: var(--grund);
  color: var(--text);
}

/* Die Welten färben beim Relaunch NICHT mehr die ganze Seite um — die
   Marke bleibt hell/cyan, die Welt zeigt sich im Logo und im Filter.
   Ohne diese Rückstellung würden die Welt-Regeln aus auftritt.css das
   neue Design je Cookie wieder dunkel schalten. */
[data-marke="coreforall"][data-welt="club"],
[data-marke="coreforall"][data-welt="house"],
[data-marke="coreforall"][data-welt="techno"] {
  --grund: #f7f9fa; --grund-2: #eef4f6;
  --flaeche: #ffffff; --flaeche-2: #fbfcfd;
  --rand: #dce4e8; --rand-stark: #b9c8cf;
  --text: #0f2430; --text-2: #5c6e79; --text-3: #8fa6b1;
  --marke: #0899b8; --akzent: #3fc4e0;
  --verlauf: linear-gradient(120deg, var(--tinte-2), var(--tinte));
  --schein: none;
}

[data-marke="coreforall"] body { background: var(--grund); color: var(--text); }

[data-marke="coreforall"] h1,
[data-marke="coreforall"] h2,
[data-marke="coreforall"] h3 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
}

[data-marke="coreforall"] .verlaufstext {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--marke);
}

/* Leicht gekippte Überschriften — das Erkennungszeichen des Entwurfs.
   Nur die großen; ein gekipptes Formular-Label wäre ein Zeichenfehler. */
[data-marke="coreforall"] .gekippt { display: inline-block; transform: rotate(-1.3deg); }
[data-marke="coreforall"] .gekippt-r { display: inline-block; transform: rotate(1.2deg); }

/* ── Kopf: großes Logo zentriert, Navigation darunter ──────────────────── */

[data-marke="coreforall"] .kopf {
  background: var(--tinte);
  border-bottom: 0;
  position: static;
  backdrop-filter: none;
}
[data-marke="coreforall"] .kopf-in {
  flex-direction: column;
  gap: 2px;
  padding: 18px 16px 14px;
  min-height: 0;
}
[data-marke="coreforall"] .wortmarke { margin: 0 auto; }
/* Die Textmarke weicht nur, wenn das große Logo wirklich da ist — die
   Rechtsseiten erben das Grundgerüst direkt und behalten Wort + Zeichen.
   Ohne :has() bleibt die Textmarke stehen; das ist der harmlose Rückfall. */
[data-marke="coreforall"] .wortmarke:has(.marken-logo) .wm,
[data-marke="coreforall"] .wortmarke:has(.marken-logo) .bildmarke { display: none; }
[data-marke="coreforall"] .wortmarke .wm { color: #ffffff; }

/* Welt-Logos: Alle vier stehen im Dokument, das Dokumentattribut
   entscheidet — serverseitig aufgelöst, kein Aufblitzen. */
[data-marke="coreforall"] .marken-logo { height: 88px; width: auto; display: none; }
[data-marke="coreforall"] .marken-logo.logo-alle { display: block; }
[data-marke="coreforall"][data-welt="club"] .marken-logo { display: none; }
[data-marke="coreforall"][data-welt="club"] .marken-logo.logo-club { display: block; }
[data-marke="coreforall"][data-welt="house"] .marken-logo { display: none; }
[data-marke="coreforall"][data-welt="house"] .marken-logo.logo-house { display: block; }
[data-marke="coreforall"][data-welt="techno"] .marken-logo { display: none; }
[data-marke="coreforall"][data-welt="techno"] .marken-logo.logo-techno { display: block; }

[data-marke="coreforall"] .kopf-mitte {
  order: 3; width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 30px;
}
[data-marke="coreforall"] .hauptnav a {
  font-family: var(--schrift-nav);
  font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #dce9ef;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
[data-marke="coreforall"] .hauptnav a:hover { color: #ffffff; background: none; }
[data-marke="coreforall"] .hauptnav a[aria-current="page"] {
  color: #ffffff; background: none;
  border-bottom-color: var(--akzent);
}
[data-marke="coreforall"] .kopf-rechts { order: 3; }
[data-marke="coreforall"] .kopf-konto {
  font-family: var(--schrift-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--marke); border-color: var(--marke);
  color: #ffffff; white-space: nowrap;
}
[data-marke="coreforall"] .kopf-konto:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }
[data-marke="coreforall"] .weltwahl a { color: #8fa6b1; }
[data-marke="coreforall"] .weltwahl a:hover { color: #ffffff; }
[data-marke="coreforall"] .weltwahl a[aria-current="true"] { color: #ffffff; border-color: var(--akzent); }
[data-marke="coreforall"] .menue-knopf span { background: #dce9ef; }
[data-marke="coreforall"] .menue { background: var(--tinte); }
[data-marke="coreforall"] .menue a { color: #dce9ef; }

/* Das Startvideo füllt den ersten Bildschirm — der dunkle Kopf sitzt
   nahtlos darüber, das Video übernimmt den Rest der Höhe. */
[data-marke="coreforall"] .kopfbild-voll {
  position: relative;
  min-height: calc(100vh - 170px);
  display: flex; align-items: center;
  overflow: hidden;
}
@media (max-width: 768px) {
  [data-marke="coreforall"] .kopfbild-voll { min-height: calc(100svh - 150px); }
  [data-marke="coreforall"] .marken-logo { height: 64px; }
  [data-marke="coreforall"] .cf-termin { flex-basis: 280px; }
  [data-marke="coreforall"] [data-einspaltig] { grid-template-columns: 1fr !important; }
  /* Durchgang 10.09.2026: Die Markenregel oben setzt Felder auf 14px —
     unter 16px zoomt iOS beim Tippen in die Seite (Galerie, Kontakt,
     Fundsachen). Auf dem Handy gilt wieder die Grundregel des Gerüsts. */
  [data-marke="coreforall"] .feld input,
  [data-marke="coreforall"] .feld textarea,
  [data-marke="coreforall"] .feld select { font-size: 16px; }
}

/* ── Knöpfe ────────────────────────────────────────────────────────────── */

[data-marke="coreforall"] .knopf {
  font-family: var(--schrift-mono);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 999px;
}
[data-marke="coreforall"] .knopf-haupt {
  background: var(--marke); border-color: var(--marke); color: #ffffff;
  box-shadow: none;
}
[data-marke="coreforall"] .knopf-haupt:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }
[data-marke="coreforall"] .knopf-rand { border-color: var(--rand-stark); color: var(--text); background: transparent; }
[data-marke="coreforall"] .knopf-rand:hover { border-color: var(--marke); color: var(--marke); background: transparent; }
[data-marke="coreforall"] .dunkel .knopf-rand,
[data-marke="coreforall"] .kopfbild .knopf-rand { border-color: rgba(255,255,255,.4); color: #ffffff; }
[data-marke="coreforall"] .dunkel .knopf-rand:hover,
[data-marke="coreforall"] .kopfbild .knopf-rand:hover { border-color: var(--akzent); color: var(--akzent); }

/* ── Laufband und Logo-Rotation ────────────────────────────────────────── */

[data-marke="coreforall"] .laufband {
  background: var(--flaeche);
  border-block: 1px solid var(--rand);
  color: var(--rand-stark);
}
[data-marke="coreforall"] .laufband-spur span {
  font-family: var(--schrift-titel);
  font-size: 20px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rand-stark);
}

@keyframes cf-logo-rotation {
  0%, 30%   { opacity: 1; }
  33%, 100% { opacity: 0; }
}
.cf-rotband {
  background: var(--tinte);
  padding: 56px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-align: center;
}
.cf-rotband-buehne { position: relative; height: 150px; width: min(420px, 82vw); }
.cf-rotband-buehne img {
  position: absolute; inset: 0; margin: auto;
  max-height: 150px; max-width: 100%;
  opacity: 0;
  animation: cf-logo-rotation 3s linear infinite;
}
.cf-rotband-buehne img:nth-child(2) { animation-delay: 1s; }
.cf-rotband-buehne img:nth-child(3) { animation-delay: 2s; }
@media (prefers-reduced-motion: reduce) {
  .cf-rotband-buehne img { animation: none; }
  .cf-rotband-buehne img:first-child { opacity: 1; }
}
.cf-rotband-satz {
  font-family: var(--schrift-titel);
  font-size: 30px; text-transform: uppercase; color: #ffffff;
  letter-spacing: .03em; margin-top: 10px;
}
.cf-rotband-satz b { color: var(--akzent); font-weight: 400; }
.cf-rotband-unter {
  font-family: var(--schrift-mono);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: #8fa6b1; margin-top: 8px;
}

/* ── Terminkarten (4:5, wackelnde Datumskachel, Genre-Band) ────────────── */

@keyframes cf-wackeln {
  0%, 90%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(-3deg); }
  94% { transform: rotate(3deg); }
  96% { transform: rotate(-2deg); }
  98% { transform: rotate(1.5deg); }
}

.cf-termine {
  display: flex; gap: 20px;
  overflow-x: auto; padding: 12px 0 16px;
  scroll-snap-type: x proximity;
}
.cf-termin {
  flex: 0 0 320px; scroll-snap-align: start;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  padding: 16px 16px 0;
  display: flex; flex-direction: column;
  transition: border-color .15s;
}
.cf-termin:hover { border-color: var(--marke); }
.cf-termin-bild {
  aspect-ratio: 4 / 5; position: relative; background: var(--grund-2);
}
.cf-termin-bild > a { position: absolute; inset: 0; display: block; }
.cf-termin-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-termin-leer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--verlauf);
}
.cf-termin-leer img { width: 70%; height: auto; object-fit: contain; opacity: .9; }
.cf-datum {
  position: absolute; top: -8px; left: -8px; pointer-events: none;
  background: var(--tinte); color: #ffffff;
  padding: 9px 12px;
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  animation: cf-wackeln 4s ease-in-out infinite;
  transform-origin: top center;
}
@media (prefers-reduced-motion: reduce) { .cf-datum { animation: none; } }
.cf-datum .tag { font-family: var(--schrift-titel); font-size: 22px; }
.cf-datum .monat, .cf-datum .jahr {
  font-family: var(--schrift-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase;
}
.cf-genre {
  position: absolute; top: -8px; right: -8px; pointer-events: none;
  font-family: var(--schrift-titel);
  font-size: 17px; letter-spacing: .08em; text-transform: uppercase;
  color: #ffffff; background: var(--marke);
  padding: 8px 16px; transform: rotate(2deg);
  box-shadow: 0 3px 10px rgba(15, 36, 48, .25);
}
.cf-schild {
  position: absolute; bottom: 10px; left: 10px;
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(15, 36, 48, .85); color: #ffffff;
  padding: 5px 10px; border-radius: 999px;
}
.cf-schild.ton-ok { color: #7ff0cf; }
.cf-schild.ton-warn { color: #ffd58a; }
.cf-schild.ton-gefahr { color: #ff9c8f; }
.cf-termin-text {
  padding: 18px 4px 20px;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.cf-termin-text h3 {
  font-size: 24px; margin: 0;
  color: var(--marke); line-height: 1.12;
}
.cf-termin-zeile {
  border-top: 1px dotted var(--rand-stark); padding-top: 10px; margin: 0;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--schrift-mono); font-size: 12px; color: var(--text-2);
}
.cf-termin-zeile .mark { color: var(--marke); }
.cf-termin-fuss {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cf-termin-preis {
  font-family: var(--schrift-mono);
  font-size: 14px; font-weight: 700; color: var(--text);
}

/* Genre-Filterknöpfe: „Alle“ gerade, die Welten leicht gekippt. */
.cf-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.cf-filter a {
  font-family: var(--schrift-mono);
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  padding: 11px 22px; text-decoration: none;
  background: var(--grund-2); color: var(--text-2);
  border: 1px solid var(--rand);
  transform: rotate(2deg);
}
.cf-filter a.f-alle {
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3); transform: none; padding: 12px 26px;
}
.cf-filter a:hover { color: var(--marke); text-decoration: none; }
.cf-filter a[aria-current="true"] { background: var(--tinte); color: #ffffff; font-weight: 700; border-color: var(--tinte); }
.cf-filter a.f-alle[aria-current="true"] {
  background: transparent; color: var(--text);
  border-bottom-color: var(--text);
}

/* ── Kopfvideo der Startseite ──────────────────────────────────────────── */

[data-marke="coreforall"] .kopfbild { background: var(--nacht); }
[data-marke="coreforall"] .kopfbild-schleier {
  background: linear-gradient(180deg, rgba(8, 22, 30, .45), rgba(8, 22, 30, .72));
}
[data-marke="coreforall"] .kopfbild h1,
[data-marke="coreforall"] .kopfbild .kopfbild-text { color: #ffffff; }
[data-marke="coreforall"] .kopfbild .oberzeile { color: var(--akzent); }

.cf-scrollhinweis {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none;
}
.cf-scrollhinweis .wort {
  font-family: var(--schrift-mono); font-size: 10px; letter-spacing: .22em;
  color: #c9d8df; text-transform: uppercase;
}
.cf-scrollhinweis .rahmen {
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6);
  border-radius: 999px; display: flex; justify-content: center;
  padding-top: 7px; box-sizing: border-box;
}
@keyframes cf-scrollpunkt {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
.cf-scrollhinweis .punkt {
  width: 4px; height: 9px; border-radius: 999px; background: var(--akzent);
  animation: cf-scrollpunkt 1.8s ease-in-out infinite;
}
@media (max-width: 768px) { .cf-scrollhinweis { display: none; } }

/* ── Flächen, Karten, dunkle Kästen ────────────────────────────────────── */

.cf-karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--r-lg); padding: 26px 28px;
}
.cf-karte-dunkel {
  background: var(--verlauf); border-radius: var(--r-lg);
  padding: 28px 32px; color: #c9d8df;
}
.cf-karte-dunkel h2, .cf-karte-dunkel h3, .cf-karte-dunkel .titel { color: #ffffff; }
.cf-hinweis-ok {
  background: var(--ok-flaeche); border: 1px solid var(--ok);
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: 13px; color: var(--text); line-height: 1.5;
}
.cf-mono {
  font-family: var(--schrift-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
}

/* ── FAQ (Aufklapper) ──────────────────────────────────────────────────── */

.cf-faq details {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--r-sm); padding: 16px 20px;
}
.cf-faq details + details { margin-top: 10px; }
.cf-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 15px; font-weight: 600; color: var(--text);
  cursor: pointer; list-style: none;
}
.cf-faq summary::-webkit-details-marker { display: none; }
.cf-faq .plus { color: var(--marke); font-size: 20px; transition: transform .2s; }
.cf-faq details[open] .plus { transform: rotate(45deg); }
.cf-faq details p { font-size: 14px; line-height: 1.65; color: var(--text-2); margin: 12px 0 4px; }

/* ── Formulare ─────────────────────────────────────────────────────────── */

[data-marke="coreforall"] .feld label {
  font-family: var(--schrift-mono);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2);
}
[data-marke="coreforall"] .feld input,
[data-marke="coreforall"] .feld textarea,
[data-marke="coreforall"] .feld select {
  border: 1px solid var(--rand); border-radius: var(--r-md);
  padding: 13px 15px; font-size: 14px;
  font-family: var(--schrift); color: var(--text);
  background: var(--grund);
}
[data-marke="coreforall"] .feld input:focus,
[data-marke="coreforall"] .feld textarea:focus {
  border-color: var(--marke); outline: 2px solid rgba(8, 153, 184, .2);
}
.cf-dunkelform input, .cf-dunkelform textarea {
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
}
.cf-dunkelform input::placeholder, .cf-dunkelform textarea::placeholder { color: #8fa6b1; }
.cf-dunkelform label { color: #c9d8df !important; }

/* ── WhatsApp-Knopf (schwebend) ────────────────────────────────────────── */

.wa-schweber {
  position: fixed; bottom: 24px; right: 24px; z-index: 41;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
/* Der Hinweis über dem Knopf (R-06): lesbar vor dem Klick, ohne Skript. */
.wa-hinweis {
  font-family: var(--schrift-mono, ui-monospace);
  font-size: 10.5px; letter-spacing: .03em; line-height: 1.3;
  color: #ffffff; background: rgba(15, 36, 48, .86);
  border-radius: 999px; padding: 5px 11px;
}
.wa-hinweis a { color: #ffffff; text-decoration: underline; }
.wa-knopf {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--schrift-mono, ui-monospace);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 20px 12px 14px; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 36, 48, .3);
  background: #25d366; color: #ffffff; text-decoration: none;
}
.wa-knopf:hover { background: #1eb958; color: #ffffff; text-decoration: none; }
.wa-knopf img { display: block; border-radius: 6px; }

/* ── Fuß ───────────────────────────────────────────────────────────────── */

[data-marke="coreforall"] .fuss {
  background: var(--tinte); color: #c9d8df;
  border-top: 0;
}
[data-marke="coreforall"] .fuss .wm { color: #ffffff; }
[data-marke="coreforall"] .fuss-gruppe h2 {
  font-family: var(--schrift-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #8fa6b1;
}
[data-marke="coreforall"] .fuss-gruppe a { color: #eef4f6; }
[data-marke="coreforall"] .fuss-gruppe a:hover { color: var(--akzent); }
[data-marke="coreforall"] .fuss-marke p { color: #8fa6b1; }
[data-marke="coreforall"] .fuss-verweis { color: #8fa6b1; }
[data-marke="coreforall"] .fuss-verweis a { color: var(--akzent); }
[data-marke="coreforall"] .fuss-recht a {
  font-family: var(--schrift-mono); font-size: 11px; color: #8fa6b1;
}
[data-marke="coreforall"] .fuss-recht a:hover { color: #ffffff; }
.fuss-kanaele { display: flex; gap: 16px; align-items: center; margin-top: 10px; }
.fuss-kanaele img { display: block; border-radius: 5px; }

/* ── Kaufleiste (Veranstaltungsseite) ──────────────────────────────────── */

@keyframes cf-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.cf-kaufleiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(10, 26, 36, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.15);
}
.cf-kaufleiste-in {
  max-width: 1280px; margin: 0 auto; padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cf-kaufleiste .name {
  font-family: var(--schrift-titel); font-size: 20px;
  text-transform: uppercase; color: #ffffff;
}
.cf-kaufleiste .preis { font-family: var(--schrift-mono); font-size: 13px; color: #8fa6b1; }
.cf-kaufleiste .stand {
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ok); animation: cf-puls 2s ease-in-out infinite;
}
@media (max-width: 768px) { .cf-kaufleiste-in { padding: 12px 16px; } }

/* ── Kasse: Schritte, Ticketzeilen, Saalkarte ──────────────────────────── */

.cf-schritte { display: flex; align-items: center; }
.cf-schritt { display: flex; align-items: center; }
.cf-schritt:not(:last-child) { flex: 1; }
.cf-schritt .punkt {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  background: var(--rand); color: var(--text-3);
}
.cf-schritt.jetzt .punkt { background: var(--marke); color: #ffffff; }
.cf-schritt.erledigt .punkt { background: var(--ok); color: #ffffff; }
.cf-schritt .wort { font-size: 14px; color: var(--text-3); margin-left: 9px; }
.cf-schritt.jetzt .wort { color: var(--text); font-weight: 600; }
.cf-schritt.erledigt .wort { color: var(--ok); }
.cf-schritt .linie { flex: 1; height: 1px; background: var(--rand-stark); margin: 0 14px; }
@media (max-width: 768px) { .cf-schritt .wort { display: none; } }

.cf-ticketzeile {
  display: grid; grid-template-columns: 1fr auto auto; gap: 22px;
  align-items: center; padding: 16px 0;
  border-top: 1px solid var(--grund-2);
}
.cf-ticketzeile.gewaehlt { background: linear-gradient(90deg, rgba(8,153,184,.05), transparent); }
.cf-ticketzeile.aus { opacity: .6; }
.cf-ticketzeile .name { font-size: 16px; font-weight: 600; color: var(--text); }
.cf-ticketzeile .hinweis { font-size: 13px; line-height: 1.55; color: var(--text-2); margin-top: 4px; }
.cf-ticketzeile .preis { font-size: 16px; font-weight: 600; color: var(--text); white-space: nowrap; }
@media (max-width: 768px) {
  .cf-ticketzeile { display: flex; flex-wrap: wrap; gap: 10px 16px; }
  .cf-ticketzeile > div:first-child { flex: 1 1 100%; }
}
.cf-zaehler { display: flex; align-items: center; gap: 10px; }
.cf-zaehler button {
  width: 36px; height: 36px; border-radius: 50%; font-size: 17px;
  cursor: pointer; line-height: 1;
  border: 1px solid var(--marke); background: var(--flaeche); color: var(--marke);
}
.cf-zaehler button:disabled {
  border-color: var(--rand); background: var(--grund); color: var(--rand-stark);
  cursor: default;
}
.cf-zaehler .stand { font-size: 16px; font-weight: 600; min-width: 20px; text-align: center; }

/* Saalkarte */
.cf-saal {
  background: var(--flaeche-2); border: 1px solid #e3e9ed; border-radius: 12px;
  padding: 28px; display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.cf-saal .dj {
  background: var(--tinte); border-radius: 12px; padding: 14px 30px;
  display: flex; align-items: center; gap: 18px;
  box-shadow: 0 6px 18px rgba(15, 36, 48, .28);
  color: #ffffff;
}
.cf-saal .dj .box { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--akzent); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
.cf-saal .dj .box i { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.cf-saal .dj .wort { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 14px; font-weight: 700; letter-spacing: .24em; }
.cf-saal .dj .strich { width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--akzent), var(--marke)); }
.cf-zone {
  border: 1px solid #e3e9ed; background: var(--flaeche); border-radius: 14px;
  padding: 18px 26px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cf-zone .tische { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.cf-zone .zeile { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--text); }
.cf-zone .zeile small { font-weight: 400; color: var(--text-3); }
.cf-tisch {
  width: 58px; height: 58px; border-radius: 50%;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; transition: transform .12s;
  background: #e8f6ee; border: 2px solid #2ea36b; color: #1d7a4e; cursor: pointer;
}
.cf-tisch.gewaehlt {
  background: #f5c04e; border-color: #d9a32e; color: var(--text);
  box-shadow: 0 4px 12px rgba(217, 163, 46, .35); transform: scale(1.06);
}
.cf-tisch.belegt {
  background: #e7ebee; border-color: #c8d2d8; color: #9aa8b0;
  cursor: default; text-decoration: line-through;
}
/* Die Checkbox IST der Tisch — gewählt färbt der :has()-Selektor, ganz
   ohne Skript. Browser ohne :has() zeigen die Wahl über den Fokusring;
   geprüft wird die Auswahl ohnehin serverseitig. */
.cf-tisch { position: relative; }
.cf-tisch:has(input:checked) {
  background: #f5c04e; border-color: #d9a32e; color: var(--text);
  box-shadow: 0 4px 12px rgba(217, 163, 46, .35); transform: scale(1.06);
}
.cf-tisch:has(input:focus-visible) { outline: 3px solid var(--marke); }
@media (max-width: 768px) { .cf-tisch { width: 44px; height: 44px; font-size: 11px; } }
.cf-saal .bar {
  border: 1px solid #e3e9ed; background: var(--flaeche); border-radius: 12px;
  padding: 12px 10px; display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font-size: 13px; font-weight: 700; letter-spacing: .18em; color: var(--text-2);
}
.cf-saal .floor {
  flex: 1; border: 1px dashed var(--rand-stark); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; min-height: 110px;
  font-size: 14px; font-weight: 700; letter-spacing: .18em; color: var(--text-3);
}
.cf-saal .eingang {
  border: 1px solid #e3e9ed; background: var(--flaeche); border-radius: 8px;
  padding: 8px 40px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; color: var(--text-3);
}
.cf-legende { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.cf-legende i {
  width: 16px; height: 16px; border-radius: 50%; display: inline-block;
  box-sizing: border-box; vertical-align: -3px; margin-right: 8px;
}
.cf-legende .frei i { background: #e8f6ee; border: 2px solid #2ea36b; }
.cf-legende .gewaehlt i { background: #f5c04e; border: 2px solid #d9a32e; }
.cf-legende .belegt i { background: #e7ebee; border: 2px solid #b9c8cf; }

/* Zahlarten */
.cf-zahlart {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: 10px; cursor: pointer;
  background: var(--flaeche); width: 100%; box-sizing: border-box;
  border: 1px solid var(--rand); text-align: left;
}
.cf-zahlart img { height: 24px; object-fit: contain; }
.cf-zahlart input { accent-color: var(--marke); width: 18px; height: 18px; }
.cf-zahlart:has(input:checked) {
  border: 2px solid var(--marke); background: rgba(8, 153, 184, .04);
  padding: 14px 17px;
}

/* ── QR-Kachel im Konto ────────────────────────────────────────────────── */

.cf-qr {
  background: var(--tinte); border-radius: 8px; padding: 14px;
  display: flex; align-items: center; justify-content: center;
}
.cf-qr img { width: 100%; height: auto; image-rendering: pixelated; }

/* ── Team ──────────────────────────────────────────────────────────────── */

.cf-person {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-sm);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
  align-items: center; text-align: center;
  transition: border-color .15s;
}
.cf-person:hover { border-color: var(--marke); }
.cf-person img {
  width: 110px; height: 110px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--grund-2);
}
.cf-person .ohne-foto {
  width: 110px; height: 110px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tinte-2), var(--marke));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--schrift-titel); font-size: 34px; color: #ffffff;
  letter-spacing: .04em;
}
.cf-person .name {
  font-family: var(--schrift-titel); font-size: 18px;
  text-transform: uppercase; color: var(--text); line-height: 1.15;
}
.cf-person .rolle {
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--marke); text-transform: uppercase; margin-top: 5px;
}

/* ── Veranstaltungsseite: dunkle Bühne ─────────────────────────────────── */

[data-marke="coreforall"] .ev-kopf {
  background: var(--nacht);
  color: #c9d8df;
}
[data-marke="coreforall"] .ev-kopf h1 {
  color: #ffffff;
  display: inline-block; transform: rotate(-1.5deg);
  font-size: clamp(40px, 6vw, 76px); line-height: .98;
}
[data-marke="coreforall"] .ev-kopf .ev-oberzeile,
[data-marke="coreforall"] .ev-kopf .ev-oberzeile a { color: var(--akzent); }
[data-marke="coreforall"] .ev-fakten dt {
  font-family: var(--schrift-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #8fa6b1;
}
[data-marke="coreforall"] .ev-fakten dd { color: #eef4f6; }
[data-marke="coreforall"] .ev-zusagen li { color: #c9d8df; }
[data-marke="coreforall"] .ev-gebuehr { color: #8fa6b1; }
[data-marke="coreforall"] .ev-gebuehr a { color: var(--akzent); }
[data-marke="coreforall"] .ev-vorverkauf { color: #ffd58a; }
[data-marke="coreforall"] .ev-warteliste,
[data-marke="coreforall"] .ev-hinweis {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--r-lg); padding: 20px 24px;
}
[data-marke="coreforall"] .ev-warteliste h2,
[data-marke="coreforall"] .ev-hinweis h2 { color: #ffffff; }
[data-marke="coreforall"] .ev-kopf .feld label { color: #c9d8df; }
[data-marke="coreforall"] .ev-kopf .feld input {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .07); color: #ffffff;
}

/* ── Gruß ──────────────────────────────────────────────────────────────── */

[data-marke="coreforall"] .hallo { background: var(--tinte); }
[data-marke="coreforall"] .hallo-wort { color: #ffffff; }