/* =========================================================================
   VfL Zeitspiel — main.css
   HTML-First Design-System · bymueller.media
   Marke: Altrosa #ddc0c5 + Ink #151315 · Magazin/Sportmarke
   ========================================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Marke */
  --pink:        #ddc0c5;
  --pink-soft:   #efe2e5;
  --pink-tint:   #f7f4f5;
  --pink-deep:   #c9a3ab;
  --pink-bright: #e8a9b6;

  /* Dunkel */
  --ink:    #151315;
  --ink-2:  #201d20;
  --ink-3:  #2c282c;
  --ink-4:  #3a363a;

  /* Hell */
  --paper:  #f7f4f5;
  --white:  #ffffff;

  /* Text */
  --text:        #1a171a;
  --text-on-dark:#f4eef0;
  --muted:       #706970;
  --muted-dark:  #a99ea3;

  /* Akzent (sparsam) */
  --accent:      #a26575;   /* Vereinspink-Familie, lesbar auf hell + dunkel */
  --accent-soft: #cb99a4;

  /* Linien / Flächen */
  --border:       #e4dadd;
  --border-dark:  rgba(255,255,255,.10);

  /* Layout */
  --container-max: 1260px;
  --container-pad: clamp(1.15rem, 4.2vw, 3.25rem);
  --gutter:        clamp(1rem, 2.4vw, 2rem);

  /* Radius / Schatten */
  --radius:      14px;
  --radius-lg:   22px;
  --radius-pill: 999px;
  --shadow-sm:   0 1px 3px rgba(21,19,21,.07), 0 4px 14px rgba(21,19,21,.05);
  --shadow-md:   0 10px 30px rgba(21,19,21,.10);
  --shadow-lg:   0 24px 60px rgba(21,19,21,.20);

  /* Typo */
  --font-head:   'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body:   'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-script: 'Caveat', 'Space Grotesk', cursive;

  --fs-hero:  clamp(2.5rem, 1.7rem + 4.4vw, 5.2rem);
  --fs-h1:    clamp(2.3rem, 1.5rem + 3.6vw, 4.1rem);
  --fs-h2:    clamp(1.9rem, 1.35rem + 2.4vw, 3rem);
  --fs-h3:    clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-h4:    clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-lead:  clamp(1.12rem, 1.02rem + .45vw, 1.4rem);
  --fs-body:  clamp(1rem, .97rem + .18vw, 1.09rem);
  --fs-meta:  .82rem;

  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --header-h: 94px;

  /* v5.0 — Safe-Area nur im installierten PWA-Standalone-Modus.
     Im normalen Safari-Browsermodus bleibt --safe-top: 0px, damit der
     Header nicht künstlich nach unten verschoben wird. */
  --safe-top: 0px;
  --safe-bottom: 0px;
}
@media (display-mode: standalone) {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
/* v5.0/v5.1 — Safari-Mobile-Header-Fix
   ------------------------------------------------------------------
   v5.0: Der Header verwendet im normalen Browsermodus eine feste Höhe
   ohne safe-area-inset-top. Vorher (bis v4.9) rechnete .site-header
   env(safe-area-inset-top) in Höhe und padding ein und ein ::before-
   Pseudo-Element malte diesen Bereich opak dunkel. Safari iOS wertete
   den Wert positiv aus und verschob so Logo/Menü sichtbar nach unten.
   v5.1: Nach v5.0 blieb im Safari-Mobile-Screenshot ein heller Streifen
   zwischen URL-Bar und Header, weil der html/body-Hintergrund die
   Safari-Safe-Area nicht zuverlässig überdeckt. Fix: ein separates
   body::before deckt exakt env(safe-area-inset-top) dunkel ab, ohne die
   Header-Geometrie zu berühren (siehe body::before-Regel oben).
   Safe-Area-Anpassung im installierten Standalone-Modus über die
   separaten Variablen --safe-top / --safe-bottom (bei Bedarf). */
/* v4.8 — expliziter html/body-Reset + dunkler Hintergrund reicht in die
   Safe-Area hinein (iOS Safari mit viewport-fit=cover). margin/padding
   werden nochmal explizit auf 0 gesetzt, obwohl `* { margin: 0 }` das
   bereits abdeckt — Sichtbarkeit für spätere Reviews. */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--ink);
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,picture,video,svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button,input,select,textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul,ol { list-style: none; padding: 0; }
h1,h2,h3,h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; }

::selection { background: var(--pink); color: var(--ink); }
::-moz-selection { background: var(--pink); color: var(--ink); }

/* v5.1 — Safari-Safe-Area-Cap
   Auf iPhones mit Notch/Dynamic-Island wertet Safari env(safe-area-inset-top)
   positiv aus. Der html/body-Hintergrund allein reicht nicht zuverlässig in
   diese Zone hinein (v5.0 zeigte deshalb im Safari-Mobile-Screenshot einen
   sichtbaren hellen Streifen zwischen URL-Bar und Header). Ein separates
   fixiertes ::before deckt exakt diesen Bereich dunkel ab, ohne die
   Header-Geometrie zu berühren — Logo/Menü bleiben auf var(--header-h)
   zentriert. env() = 0 auf Desktop / Nicht-Notch-Geräten → Cap ist dort
   0 px hoch und unsichtbar. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--ink);
  z-index: 101; /* eine Ebene über .site-header (z-index: 100), damit halbtransparente Header-Varianten die Cap nicht durchscheinen lassen */
  pointer-events: none;
}

/* Grain-Overlay (dezente Körnung, ganze Seite) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------- Bild-Fill (verhindert schwarze Ränder unter Bildern) ---------- */
picture { display: block; }
.card__media, .mini-post__media, .next-event__media, .feature-main,
.media-frame, .album__cover, .ph, .card__media { position: relative; }
.card__media > picture, .mini-post__media > picture, .next-event__media > picture,
.feature-main > picture, .media-frame > picture, .album__cover > picture {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.card__media > picture img, .mini-post__media > picture img, .next-event__media > picture img,
.feature-main > picture img, .media-frame > picture img, .album__cover > picture img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Galerie-Kacheln: natürliche Höhe (Masonry) */
.ph > picture { display: block; }
.ph > picture img { width: 100%; height: auto; display: block; object-fit: cover; }

/* ---------- Standard-Icon-Größe ---------- */
.ic { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: 1500px; }
.container--narrow { max-width: 820px; }
/* Prose innerhalb der breiten Container linksbündig ausrichten
   (Impressum/Datenschutz — kein zentriert-eingerückter Textblock) */
.container.prose--left {
  max-width: var(--container-max);
}
.container.prose--left > * {
  max-width: 820px;
  margin-left: 0;
  margin-right: auto;
}

.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* Flächen-Themes */
.bg-ink   { background: var(--ink);   color: var(--text-on-dark); }
.bg-ink-2 { background: var(--ink-2); color: var(--text-on-dark); }
.bg-paper { background: var(--paper); color: var(--text); }
.bg-white { background: var(--white); color: var(--text); }
.bg-pink  { background: var(--pink);  color: var(--ink); }
.bg-pink-soft { background: var(--pink-soft); color: var(--ink); }

/* ---------- Typo-Helfer ---------- */
.script { font-family: var(--font-script); font-weight: 600; letter-spacing: 0; line-height: 1; }
.eyebrow {
  font-family: var(--font-head);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block;
}
.bg-ink .eyebrow, .bg-ink-2 .eyebrow { color: var(--accent-soft); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.bg-ink .lead, .bg-ink-2 .lead { color: var(--muted-dark); }
.prose p { margin-bottom: 1.15rem; max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }

/* ---------- Section Heading ---------- */
.sec-head { max-width: 760px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow::before { display: none; }
.sec-head h2 { font-size: var(--fs-h2); margin: .7rem 0 .9rem; }
.sec-head p { font-size: var(--fs-lead); color: var(--muted); }
.bg-ink .sec-head p, .bg-ink-2 .sec-head p { color: var(--muted-dark); }
.sec-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; max-width: none;
}
@media (max-width: 720px){ .sec-head--row { flex-direction: column; align-items: flex-start; } }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--pink); --btn-fg: var(--ink); --btn-bd: var(--pink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  letter-spacing: .01em;
  padding: 0 1.7em;
  min-height: 52px;                 /* einheitliche Höhe für alle .btn */
  min-width: 200px;                 /* einheitliche Mindestbreite */
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  transition: transform .35s var(--ease-out), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
  text-align: center; white-space: nowrap;
}
@media (max-width: 520px){
  .btn { min-width: 0; width: 100%; }   /* Mobil: volle Breite, gleich groß */
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(221,192,197,.28); }
.btn:active { transform: translateY(-1px); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn--pink:hover { background: var(--pink-bright); border-color: var(--pink-bright); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--ink:hover { background: var(--ink-3); border-color: var(--ink-3); box-shadow: var(--shadow-md); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: currentColor; }
/* v3.8 Fix: Hover — Text auf hellen Kontrast invertieren, statt Text und BG auf
   dieselbe Farbe zu setzen (führte zu schwarz-auf-schwarz auf bg-white/bg-paper). */
.btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.bg-ink .btn--ghost:hover, .bg-ink-2 .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.btn--ghost-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); border-color: #fff; }
/* Kleiner: nur Header-CTA und optionale Inline-Buttons — behalten eigene Mindestgröße */
.btn--sm { padding: 0 1.2em; min-height: 42px; min-width: 0; font-size: .88rem; }
.btn--block { width: 100%; min-width: 0; }

.link-arrow {
  font-family: var(--font-head); font-weight: 600; font-size: .95rem;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--accent);
}
.bg-ink .link-arrow, .bg-ink-2 .link-arrow { color: var(--accent-soft); }
.link-arrow svg { transition: transform .3s var(--ease-out); width: 1.05em; height: 1.05em; }
.link-arrow:hover svg { transform: translateX(5px); }
/* v2.7: Alle Inline-Text-Links website-weit einheitlich = var(--pink).
   Deckt Prose, Datenschutz-/Impressum-Text, Footer-Legal, reCAPTCHA-Legal, Cookie usw. ab.
   Kein var(--pink-deep) mehr für Text-Links (Hover darf abweichen). */
.link-inline,
.prose a,
.recaptcha-legal a,
.form-consent a,
.cookie p a,
.footer-legal a,
.contact-aside a,
.faq-item__a a,
.tracklist-note a {
  color: var(--pink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .2s var(--ease);
}
.link-inline:hover,
.prose a:hover,
.recaptcha-legal a:hover,
.form-consent a:hover,
.cookie p a:hover,
.footer-legal a:hover,
.contact-aside a:hover,
.faq-item__a a:hover,
.tracklist-note a:hover { color: #fff; }
/* Auf hellen Flächen (bg-white/bg-paper/bg-pink) auf Ink hovern statt auf Weiß */
.bg-white .link-inline:hover, .bg-white .prose a:hover, .bg-white .form-consent a:hover,
.bg-paper .link-inline:hover, .bg-paper .prose a:hover, .bg-paper .form-consent a:hover,
.bg-pink .link-inline:hover, .bg-pink .prose a:hover, .bg-pink .form-consent a:hover { color: var(--ink); }

.tag {
  display: inline-block;
  font-family: var(--font-head); font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .38em .8em; border-radius: var(--radius-pill);
  background: var(--pink); color: var(--ink);
}
.tag--outline { background: transparent; border: 1.4px solid var(--border); color: var(--muted); }
.bg-ink .tag--outline { border-color: var(--border-dark); color: var(--pink); }
.tag--credit {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .3em .8em .3em .35em;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease-out);
}
.tag--credit:hover { border-color: var(--pink); color: var(--pink); transform: translateY(-1px); }
.tag--credit .tag__logo {
  width: 26px; height: 26px; border-radius: 50%;
  display: block; flex-shrink: 0; object-fit: cover;
  user-select: none; -webkit-user-drag: none; -webkit-user-select: none;
}
.tag--credit span { line-height: 1; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
/* v5.0 — Header ohne env(safe-area-inset-top). Der dunkle html/body-
   Hintergrund deckt die Safari-Overscroll-Zone; der Header selbst
   startet bündig bei top: 0 und hat feste Höhe var(--header-h). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  min-height: var(--header-h);
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  transition:
    background .4s var(--ease),
    box-shadow .4s var(--ease),
    border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
  isolation: isolate;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  z-index: 2;
}
/* transparent über Hero */
.site-header[data-variant="transparent"] {
  background: linear-gradient(to bottom, rgba(21,19,21,.55), rgba(21,19,21,0));
}
/* fest beim Scrollen / auf Unterseiten */
.site-header[data-variant="solid"],
.site-header.is-scrolled {
  background: rgba(21,19,21,.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--border-dark);
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
}
/* Header-Höhe bleibt auf allen Seiten & beim Scrollen konstant */

.brand { display: inline-flex; align-items: center; gap: .75rem; color: #fff; flex-shrink: 0; cursor: pointer; }
.brand img, .brand__logo { width: 52px; height: 52px; display: block; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; }
.brand-word b, .brand-word span { user-select: none; -webkit-user-select: none; }
/* Inline-SVG-Logo: Text nicht markierbar, kein Tint-Effekt beim Klick */
.brand__logo text, .footer-logo text, .linkbio__logo text,
.brand__logo, .footer-logo, .linkbio__logo {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.brand__logo *, .footer-logo *, .linkbio__logo * { pointer-events: none; }
.brand-word { display: flex; flex-direction: column; line-height: 1; align-items: stretch; }
.brand-word b {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.22rem; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap;
}
/* v2.6: "Eschweiler" bekommt gleiche Größe/Weight wie "VfL Zeitspiel",
   JS verteilt Buchstaben auf gleiche Breite via letter-spacing (fitBrandSub).
   v4.7: Anti-Flicker — Span ist unsichtbar (nimmt aber Platz ein, kein CLS)
   bis JS die Klasse `is-fitted` setzt. Ohne das blitzte der Baseline-Wert
   (.04em) kurz auf, bevor JS auf den exakten Pixel-Wert wechselte. */
.brand-word span {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.22rem; text-transform: uppercase; color: var(--pink);
  margin-top: 4px;
  display: block; width: 100%;
  letter-spacing: .04em; /* Baseline-Tracking; JS setzt den exakten Wert */
  white-space: nowrap;
  visibility: hidden;
}
.brand-word.is-fitted span { visibility: visible; }
/* Fallback für Browser ohne JS / Reduced Motion: nach 2 s trotzdem sichtbar */
@media (prefers-reduced-motion: reduce) { .brand-word span { visibility: visible; } }
@media (max-width: 400px){ .brand-word span { display: none; } }

.nav-desktop { display: none; }
@media (min-width: 1024px){
  .nav-desktop { display: flex; align-items: center; gap: clamp(.6rem,1.6vw,1.6rem); }
  .nav-desktop a {
    position: relative; color: rgba(244,238,240,.88);
    font-family: var(--font-head); font-weight: 500; font-size: 1.02rem;
    padding: .6rem .2rem; transition: color .25s var(--ease);
  }
  .nav-desktop a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--pink); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease-out);
  }
  .nav-desktop a:hover { color: #fff; }
  .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-desktop a[aria-current="page"] { color: #fff; }
}
.header-cta { display: none; }
@media (min-width: 1024px){ .header-cta { display: inline-flex; } }

/* Burger — nur Icon, keine "Menü"-Beschriftung mehr; verwandelt sich in ein X */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; padding: .5rem; background: transparent; border: 0;
}
@media (min-width: 1024px){ .nav-toggle { display: none; } }
.nav-toggle .bars { position: relative; width: 26px; height: 20px; display: block; }
.nav-toggle .bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .35s var(--ease), opacity .2s var(--ease), top .35s var(--ease);
}
.nav-toggle .bars span:nth-child(1){ top: 0; }
.nav-toggle .bars span:nth-child(2){ top: 9px; }
.nav-toggle .bars span:nth-child(3){ top: 18px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){ top: 9px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){ top: 9px; transform: rotate(-45deg); }

/* v2.5 Mobile Menü — deckt kompletten Viewport, aber Content startet unter dem Header (padding-top).
   Kein Gap möglich, Header bleibt darüber sichtbar (z-index 100 > Menü z-index 90). */
/* v5.0: Menü-Content startet exakt unter dem Header (var(--header-h))
   ohne zusätzliches env(safe-area-inset-top) — die Safe-Area wird im
   normalen Safari-Browsermodus nicht mehr in die Header-Geometrie
   eingerechnet. */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  padding:
    calc(
      var(--header-h) +
      clamp(1rem, .7rem + 1.5vw, 1.75rem)
    )
    var(--container-pad)
    clamp(1.2rem, .8rem + 1.6vw, 2rem);
  transform: translateY(-100%);
  transition: transform .45s var(--ease-out);
  visibility: hidden;
  overflow: hidden;
}
/* Bei offenem Menü Header solide machen — Seite darunter darf nicht durchschimmern */
body.menu-open .site-header,
body.menu-open .site-header[data-variant="transparent"] {
  background: var(--ink);
  border-bottom-color: var(--border-dark);
}
.mobile-menu.is-open { transform: translateY(0); visibility: visible; }
.mobile-menu__head { display: none; } /* Kopfzeile im Menü entfällt — Header bleibt sichtbar */
.mobile-menu nav { display: flex; flex-direction: column; gap: 0; margin: 0; flex: 1; justify-content: center; }
.mobile-menu nav a {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.4rem, 1rem + 3vw, 2.2rem);
  color: var(--text-on-dark);
  padding: clamp(.35rem, .2rem + .6vw, .6rem) 0;
  display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid var(--border-dark);
  transition: color .25s var(--ease), padding-left .3s var(--ease-out);
}
.mobile-menu nav a .idx { font-size: .8rem; color: var(--pink); font-weight: 500; letter-spacing: .1em; }
.mobile-menu nav a:hover, .mobile-menu nav a[aria-current="page"] { color: var(--pink); padding-left: .6rem; }
.mobile-menu__foot { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.mobile-menu__social { display: flex; gap: .7rem; justify-content: center; }
.mobile-menu__social a {
  width: 44px; height: 44px; border-radius: 8px;
  border: 1.4px solid var(--border-dark);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.mobile-menu__social a:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.mobile-menu__social svg { width: 20px; height: 20px; }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Hero-Slider
   ========================================================================== */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh; /* v4.3: svh (small viewport height) statt dvh — stabil, verursacht keine Layout-Shifts mehr beim Ein-/Ausblenden der Mobile-URL-Bar (verantwortlich für CLS 0.032 in v4.2). */
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
  margin: 0;
  display: block;
  contain: layout paint; /* v4.3: Layout-/Paint-Isolation, verhindert dass Hero-interne Shifts nach außen propagieren. */
}
/* Sichere Fallbacks für alte Browser */
@supports not (height: 100svh) {
  .hero { height: 100vh; }
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.1s var(--ease);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide picture { position: absolute; inset: 0; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
  transform: scale(1.06);
  transition: transform 7s ease-out;
}
.hero__slide.is-active img { transform: scale(1); }
.hero__slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(21,19,21,.86) 0%, rgba(21,19,21,.30) 42%, rgba(21,19,21,.20) 70%, rgba(21,19,21,.5) 100%),
    linear-gradient(to right, rgba(21,19,21,.62), rgba(21,19,21,0) 62%);
}
.hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(3.4rem, 2rem + 6vw, 6rem);
}
.hero__content { max-width: 940px; }
.hero__eyebrow { color: var(--pink); margin-bottom: 1.1rem; }
.hero h1, .hero__title {
  font-size: var(--fs-hero); color: #fff; letter-spacing: -.03em;
  text-wrap: balance;
}
.hero__title .script { color: var(--pink); display: inline-block; }
.hero__text { font-size: var(--fs-lead); color: rgba(244,238,240,.9); max-width: 46ch; margin-top: 1.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }

/* Slide-Inhalt Fade */
.hero__caption { opacity: 0; transform: translateY(24px); }
.hero__slide.is-active .hero__caption,
.hero.is-first .hero__caption { animation: heroIn 1s var(--ease-out) forwards; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* Slider Controls */
.hero__controls {
  position: absolute; z-index: 3; left: 0; right: 0;
  bottom: clamp(1.2rem, 1rem + 1vw, 2rem);
}
.hero__controls .container { display: flex; align-items: center; gap: 1.2rem; justify-content: space-between; }
.hero__dots { display: flex; gap: .55rem; }
.hero__dots button {
  width: 34px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.32);
  overflow: hidden; position: relative;
}
.hero__dots button[aria-current="true"],
.hero__dots button[aria-selected="true"] { background: rgba(255,255,255,.32); }
.hero__dots button span {
  position: absolute; inset: 0; background: var(--pink); transform: scaleX(0); transform-origin: left;
}
.hero__dots button[aria-current="true"] span,
.hero__dots button[aria-selected="true"] span { animation: heroProg var(--hero-dur,7s) linear forwards; }
@keyframes heroProg { to { transform: scaleX(1); } }
.hero__arrows { display: flex; gap: .5rem; }
.hero__arrows button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.4px solid rgba(255,255,255,.4); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.hero__arrows button:hover { background: #fff; color: var(--ink); }
.hero__arrows svg { width: 20px; height: 20px; }
@media (max-width: 620px){ .hero__arrows { display: none; } }
@media (prefers-reduced-motion: reduce){
  .hero__slide img { transition: none; transform: none; }
  .hero__dots button span { animation: none !important; }
  .hero__caption { animation: none !important; opacity: 1; transform: none; }
}

/* Page-Hero (Unterseiten)
   ------------------------------------------------------------------
   v2.9: Einheitliche Höhe für ALLE Page-Heroes (unabhängig davon, ob
   die Beschreibung ein- oder zweizeilig umbricht). Umsetzung via
   `min-height` + vertikal zentriertem Content (`display: grid;
   align-content: center`). Höhe ist responsiv (`clamp`) und lässt bewusst
   Puffer für zweizeilige Descriptions auf schmaleren Viewports.
   Kein `overflow: hidden` auf Content-Ebene (Ellipsen etc. sind unerwünscht).
   Gilt global für Kontakt, Termine, Mannschaft, Sponsoring, FAQ, Musik usw. */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 5vw, 6rem));
  padding-bottom: clamp(2.6rem, 1.6rem + 4vw, 5rem);
  /* v4.9: feste Höhe (height) statt min-height — vorher wuchs z. B.
     mannschaft.html mit zweizeiligem Beschreibungstext über die 340 px
     hinaus, während zapfkahn.html bei 340 blieb. Jetzt identische Höhe
     auf allen Unterseiten. Boden auf 420 px angehoben, damit auch
     mehrzeiliger P-Text auf Mobile ohne Content-Expansion Platz findet. */
  height: clamp(420px, 26vw + 240px, 520px);
  display: grid;
  align-content: center;
  background: var(--ink); color: #fff; overflow: hidden;
}
.page-hero--image::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 30%;
  background-image: var(--hero-img);
  opacity: .34;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 100% at 12% 0%, rgba(178,58,95,.22), transparent 60%);
}
.page-hero .container { position: relative; z-index: 1; width: 100%; }
.page-hero h1 { font-size: var(--fs-h1); max-width: 18ch; text-wrap: balance; }
.page-hero p { font-size: var(--fs-lead); color: rgba(244,238,240,.85); max-width: 60ch; margin-top: 1.1rem; }

/* Breadcrumbs */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: var(--muted-dark); margin-bottom: 1.3rem; align-items: center; }
.breadcrumbs a { color: rgba(244,238,240,.7); }
.breadcrumbs a:hover { color: var(--pink); }
.breadcrumbs .sep { opacity: .5; }
.breadcrumbs [aria-current] { color: var(--pink); }

/* ==========================================================================
   Intro / Split
   ========================================================================== */
.intro-split { display: grid; gap: clamp(1.6rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 900px){ .intro-split { grid-template-columns: 1.05fr .95fr; } }
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(1.2rem,3vw,3rem); margin-top: 2rem; }
.stat { }
.stat b { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.9rem,1.3rem+2vw,2.9rem); display: block; line-height: 1; letter-spacing: -.02em; }
.stat span { font-size: .82rem; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; }
.bg-ink .stat span, .bg-ink-2 .stat span { color: var(--muted-dark); }
.bg-ink .stat b, .bg-ink-2 .stat b { color: var(--pink); }

.media-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.media-frame--wide { aspect-ratio: 16/11; }
.media-frame--portrait { aspect-ratio: 3/4; }
.media-frame--portrait img { object-position: center 80%; }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-badge {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  background: rgba(21,19,21,.72); backdrop-filter: blur(6px);
  color: #fff; padding: .6rem 1rem; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-size: .82rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .5rem;
}

/* ==========================================================================
   Next Event (Feature)
   ========================================================================== */
.next-event {
  display: grid; gap: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ink-2); box-shadow: var(--shadow-lg);
}
@media (min-width: 860px){ .next-event { grid-template-columns: 1.1fr 1fr; } }
.next-event__media { position: relative; min-height: 300px; }
.next-event__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.next-event__media::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent, rgba(32,29,32,.7)); }
.next-event__body { padding: clamp(1.8rem, 1.2rem + 3vw, 3.4rem); color: var(--text-on-dark); }
.next-event__date {
  display: inline-flex; align-items: baseline; gap: .6rem; margin-bottom: 1rem;
  font-family: var(--font-head);
}
.next-event__date b { font-size: 2.4rem; line-height: 1; color: var(--pink); font-weight: 600; }
.next-event__date span { font-size: .95rem; color: var(--muted-dark); text-transform: uppercase; letter-spacing: .08em; }
.next-event__body h3 { font-size: var(--fs-h3); margin-bottom: .9rem; }
.event-meta { display: flex; flex-direction: column; gap: .5rem; margin: 1.2rem 0 1.6rem; }
.event-meta li { display: flex; align-items: center; gap: .7rem; color: var(--muted-dark); font-size: .95rem; }
.event-meta svg { width: 18px; height: 18px; color: var(--pink); flex-shrink: 0; }
.countdown { display: flex; gap: .8rem; margin: 1.4rem 0; }
.countdown div { background: var(--ink-3); border-radius: 12px; padding: .7rem .9rem; text-align: center; min-width: 62px; }
.countdown b { font-family: var(--font-head); font-size: 1.6rem; line-height: 1; color: #fff; display: block; }
.countdown span { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); }

/* ==========================================================================
   Cards-Grid (Events, News, Gallery, Video, Partner)
   ========================================================================== */
.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .grid--2, .grid--3 { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.bg-ink .card, .bg-ink-2 .card { background: var(--ink-2); color: var(--text-on-dark); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card__media { position: relative; overflow: hidden; aspect-ratio: 3/2; background: var(--ink-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__tags { position: absolute; top: .8rem; left: .8rem; display: flex; gap: .4rem; z-index: 2; }
.card__body { padding: 1.3rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.card__meta { font-size: var(--fs-meta); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: .6rem; font-family: var(--font-head); }
.bg-ink .card__meta, .card.on-dark .card__meta { color: var(--pink); }
.card__body h3 { font-size: var(--fs-h4); margin-bottom: .55rem; line-height: 1.2; }
.card__body p { font-size: .95rem; color: var(--muted); flex: 1; }
.card .on-dark p, .bg-ink .card p { color: var(--muted-dark); }
.card__foot { margin-top: 1.1rem; }
.stretched-link::after { content:""; position: absolute; inset: 0; z-index: 3; }

/* Event-Datumsblock in Karten */
.date-chip {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  background: rgba(21,19,21,.82); color: #fff; backdrop-filter: blur(6px);
  border-radius: 12px; text-align: center; padding: .45rem .6rem; min-width: 54px;
  font-family: var(--font-head);
}
.date-chip b { display: block; font-size: 1.35rem; line-height: 1; }
.date-chip span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); }

/* Featured Article (Magazin) */
.feature-grid { display: grid; gap: var(--gutter); }
@media (min-width: 900px){ .feature-grid { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.feature-main {
  position: relative; display: block;
  border-radius: var(--radius-lg); overflow: hidden;
  width: 100%; max-width: 100%; box-sizing: border-box;
  min-height: 340px; aspect-ratio: 4/3;
  background: var(--ink-2);
  color: #fff;
}
@media (min-width: 900px){ .feature-main { aspect-ratio: auto; height: 100%; min-height: 520px; } }
@media (max-width: 520px){ .feature-main { aspect-ratio: auto; min-height: 380px; } }
.feature-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.feature-main:hover img { transform: scale(1.04); }
.feature-main::after {
  content:""; position:absolute; inset:0; z-index: 1;
  background:
    linear-gradient(to top, rgba(21,19,21,.95) 0%, rgba(21,19,21,.72) 30%, rgba(21,19,21,.10) 65%, transparent 100%);
}
.feature-main__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.6rem, 1rem + 3vw, 2.6rem);
  color: #fff;
  display: flex; flex-direction: column; gap: .6rem;
}
.feature-main__body h3 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.3rem); margin: 0; color: #fff; text-wrap: balance; }
.feature-main__body p { color: rgba(244,238,240,.92); font-size: 1rem; margin: 0; max-width: 60ch; }
.feature-main__body .tag { align-self: flex-start; }
.feature-side { display: flex; flex-direction: column; gap: clamp(1.2rem, 1rem + 1vw, 2rem); justify-content: space-between; }
.mini-post { display: grid; grid-template-columns: 128px 1fr; gap: 1.25rem; align-items: center; }
@media (max-width: 520px){ .mini-post { grid-template-columns: 96px 1fr; gap: 1rem; } }
.mini-post__media {
  position: relative; width: 128px; height: 128px;
  border-radius: 14px; overflow: hidden; background: var(--ink-3);
}
@media (max-width: 520px){ .mini-post__media { width: 96px; height: 96px; } }
.mini-post__media > picture,
.mini-post__media > picture > img,
.mini-post__media > img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: center 40%;
  display: block;
  transition: transform .6s var(--ease-out);
}
.mini-post:hover .mini-post__media img { transform: scale(1.06); }
.mini-post h4 { font-size: 1.02rem; line-height: 1.25; margin-bottom: .25rem; }
.mini-post span { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.bg-ink .mini-post span { color: var(--pink); }

/* ==========================================================================
   Spieler-Grid
   ========================================================================== */
.player-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.5rem, .3rem + .6vw, 1rem);
  background: transparent;
  border: none;
}
@media (max-width: 1080px){ .player-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 780px) { .player-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 520px) { .player-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .55rem; } }
.player {
  position: relative;
  background: var(--ink-2);
  padding: 1.4rem 1.2rem;
  display: flex; flex-direction: column; gap: .3rem;
  aspect-ratio: 3/4;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--radius);
  isolation: isolate;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.player:hover { transform: translateY(-4px); box-shadow: 0 22px 40px rgba(21,19,21,.28); }
/* v3.0 Root-Cause-Fix — Hover-Vereinheitlichung .player__media
   ------------------------------------------------------------------
   Problem: Auf der Startseite (Karten im .player-scroll) hat sich beim
   Mouseover die äußere Form der Karte (Border/Radius) verändert und das
   Bild ist über den Karten-Rahmen hinausgezoomt. Auf der Mannschaftsseite
   (Karten im .player-grid) verhielt es sich sauber.
   Ursache: `.player__media` hatte `overflow: hidden`, aber `.player` als
   Ur-Container besitzt ebenfalls `overflow: hidden` und `border-radius`.
   Der Scale-Transform auf `.player__media img` hat auf der Startseite
   durch das Zusammenspiel von `isolation: isolate` + horizontalem Scroll-
   Container den GPU-Layer neu komponiert; im Zusammenspiel mit dem
   Ink-Gradient-`::after` (z-index 1) und der `filter`-Transition kam es
   in Safari zu subpixeligem Border-Radius-Flicker.
   Lösung: Radius vererben, `will-change` explizit setzen, damit der
   Compositor konsistent bleibt. Nur das `img` wird transformiert, alle
   umschließenden Elemente bleiben statisch (kein Layout-Shift). */
/* v3.5 Root-Cause-Fix — Schwarze Ränder um Spielerfotos
   ------------------------------------------------------------------
   Problem (v3.4): Bei manchen Spielerkarten war ein sichtbarer dunkler
   Rand um das Foto zu sehen (der `.player`-Hintergrund `var(--ink-2)`
   scheint durch). Grund: `backface-visibility: hidden` + `will-change:
   transform` + `filter` zwingen das img in einen eigenen GPU-Compositing-
   Layer. Wenn dessen Bounds durch Subpixel-Rundung (bei bestimmten Zoom-
   Stufen und DPRs) 0.5–1 px innerhalb der Container-Kante liegen, scheint
   der dunkle `.player`-BG an den Kanten durch → sieht wie ein Rahmen aus.
   Fix v3.5:
   1. Das img überschießt den Container um 1 px auf jeder Seite
      (`inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px)`),
      damit Subpixel-Rundung nie einen Spalt hinterlässt. Der `.player`
      hat weiterhin `overflow: hidden` → der Überstand wird sauber
      abgeschnitten.
   2. `backface-visibility: hidden` entfernt (Compositing-Layer bleibt via
      `will-change: transform` bestehen, aber ohne strikte Layer-Bounds).
   3. `filter: saturate` wird auf `.player__media` (Container) verschoben —
      der GPU-Layer beim img behandelt dann nur noch den transform, was
      Subpixel-Artefakte weiter reduziert. */
/* v3.8 Fix — Schwarze Rand-Artefakte um Foto-Karten endgültig lösen
   ------------------------------------------------------------------
   Bisher (v3.5) hatte `.player` weiterhin `background: var(--ink-2)` — d.h.
   der dunkle Hintergrund lag konzeptionell unter dem Foto. Bei bestimmten
   DPRs/Zoom-Stufen schimmerte er trotzdem als 0,5–1 px dunkler Rand durch.
   Fix v3.8: für Foto-Karten den `.player`-Hintergrund komplett neutralisieren
   (transparent) — es gibt keinen dunklen Layer mehr, der durchkommen könnte.
   Karten ohne Foto behalten ihren pink/ink-Gradient-Fallback (Regel unten). */
.player--photo { background: transparent; }
.player__media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  filter: saturate(.95);
  transition: filter .5s var(--ease-out);
}
.player:hover .player__media { filter: saturate(1); }
.player__media picture { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.player__media img {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover; object-position: center 30%;
  display: block;
  transform: scale(1);
  transform-origin: center 40%;
  transition: transform .6s var(--ease-out);
  will-change: transform;
}
.player:hover .player__media img { transform: scale(1.06); }
/* Touch-Geräte: keine hängenden Hover-Zustände */
@media (hover: none) {
  .player:hover .player__media img { transform: scale(1); }
  .player:hover .player__media { filter: saturate(.95); }
}
@media (prefers-reduced-motion: reduce){
  .player__media img, .player__media { transition: none; }
  .player:hover .player__media img { transform: none; }
}
/* Ink-Gradient sichert Lesbarkeit von Alias/Name unten */
.player--photo::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, rgba(21,19,21,.92) 0%, rgba(21,19,21,.55) 32%, rgba(21,19,21,.05) 62%, transparent 100%);
}
/* Fallback für Karten ohne Foto */
.player:not(.player--photo) {
  background: linear-gradient(135deg, var(--ink-2) 0%, var(--ink-3) 100%);
}
.player__num {
  position: absolute; top: .55rem; right: .95rem; z-index: 2;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.4rem, 1.8rem + 1.6vw, 3.6rem); line-height: 1;
  color: rgba(255,255,255,.28);
  letter-spacing: -.04em;
  text-shadow: 0 2px 12px rgba(21,19,21,.5);
  pointer-events: none;
}
.player:not(.player--photo) .player__num { color: rgba(221,192,197,.18); text-shadow: none; }
.player__alias {
  position: relative; z-index: 2;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.02rem, .9rem + .35vw, 1.28rem);
  line-height: 1.05; letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.player__name {
  position: relative; z-index: 2;
  font-size: clamp(.82rem, .78rem + .12vw, .95rem);
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.player__role {
  position: relative; z-index: 2; margin-bottom: .5rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.player__role .tag {
  font-size: .58rem;
  background: var(--accent); color: #fff;
  padding: .3rem .65rem;
  letter-spacing: .08em;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
/* Dark-Container-Kontext (Fallback ohne Photo): auf hellen Sections */
.bg-white .player:not(.player--photo),
.bg-paper .player:not(.player--photo) {
  background: linear-gradient(135deg, var(--pink-tint) 0%, var(--pink-soft) 100%);
}
.bg-white .player:not(.player--photo) .player__alias,
.bg-paper .player:not(.player--photo) .player__alias { color: var(--ink); text-shadow: none; }
.bg-white .player:not(.player--photo) .player__name,
.bg-paper .player:not(.player--photo) .player__name { color: var(--muted); text-shadow: none; }
.bg-white .player:not(.player--photo) .player__num,
.bg-paper .player:not(.player--photo) .player__num { color: rgba(21,19,21,.10); }

/* Mannschaftsvorschau Slider (horizontal)
   -----------------------------------------------------------------------
   v3.0 Root-Cause-Fix — Überbreite auf der Startseite (.player-scroll
   ragte rechts über die anderen Container-Inhalte hinaus).
   Ursache: die Kombination aus `margin-inline: calc(-1 * var(--container-pad))`
   und `padding-inline: var(--container-pad)` verlangt vom `.container`
   ein sauberes `overflow: hidden` oder eine identische Breite. Auf einigen
   Viewports (insb. wenn Scrollbar sichtbar ist) rechnet der Grid-Track-Layer
   die volle Grid-Track-Breite in die Overflow-Berechnung ein, wodurch der
   Container 8-14 px breiter wirkt als seine Nachbarn (.btn, .next-event).
   Fix: `min-width: 0` auf allen Track-Children erzwingen und den negativen
   Margin nur soweit „einfangen“, wie tatsächlich Padding vorhanden ist.
   Zusätzlich: der wrapper `.reveal.player-scroll-wrap` bekommt sein eigenes
   `overflow-x: clip` (moderne Browser) → schneidet nur horizontal,
   Reveals/Sticky/etc. bleiben unberührt. Global `overflow-x: hidden` auf
   `body` bleibt als Sicherheitsnetz, ist aber nicht mehr die primäre Lösung. */
.player-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 260px);
  gap: var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
  /* Statt symmetrischem negativem Margin: nur den linken Rand ausdehnen,
     rechts einen exakten padding-Puffer für die letzte Karte lassen. */
  margin-inline: 0;
  padding-inline-end: var(--container-pad);
  scroll-padding-inline-end: var(--container-pad);
  scrollbar-width: thin;
  /* Overflow-X wird durch max-width beschränkt statt clip — verhindert
     dass die Grid-Track-Breite den Container aufbläst. */
  max-width: 100%;
  min-width: 0;
}
.player-scroll > * { scroll-snap-align: start; min-width: 0; }
.player-scroll .player { aspect-ratio: 3/4; }
.player-scroll-item { display: block; }
/* Wrapper des Scrollers isoliert horizontales Overflow, damit keine Track-
   Overshoot-Werte an die Elternebene weitergegeben werden. */
.player-scroll-wrap { position: relative; overflow-x: clip; min-width: 0; max-width: 100%; }
@supports not (overflow-x: clip) { .player-scroll-wrap { overflow-x: hidden; } }
@media (max-width: 900px){
  .player-scroll { padding-inline-end: 0; scroll-padding-inline-end: 0; }
}

/* ==========================================================================
   Galerie / Lightbox
   ========================================================================== */
.masonry { columns: 4 220px; column-gap: var(--gutter); }
@media (max-width: 640px){ .masonry { columns: 2 150px; column-gap: 12px; } }
.masonry .ph { break-inside: avoid; margin-bottom: var(--gutter); }
.ph {
  position: relative; display: block; border-radius: 10px; overflow: hidden;
  background: var(--ink-3); cursor: zoom-in;
}
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .4s; display: block; }
.ph::after { content:""; position:absolute; inset:0; background: rgba(21,19,21,0); transition: background .35s var(--ease); }
.ph:hover img { transform: scale(1.05); }
.ph:hover::after { background: rgba(21,19,21,.14); }
.ph__zoom { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .3s var(--ease-out); }
.ph:hover .ph__zoom { opacity: 1; transform: scale(1); }
.ph__zoom svg { width: 16px; height: 16px; color: var(--ink); }

.lightbox {
  position: fixed; inset: 0; z-index: 500; background: rgba(12,10,12,.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { position: relative; max-width: 92vw; max-height: 84vh; }
.lightbox__stage img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: 6px; box-shadow: var(--shadow-lg); }
.lightbox__cap { color: rgba(244,238,240,.8); text-align: center; margin-top: 1rem; font-size: .9rem; }
.lightbox__cap b { color: var(--pink); font-family: var(--font-head); }
.lb-btn {
  position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1.4px solid rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center; transition: background .25s, transform .25s var(--ease-out);
}
.lb-btn:hover { background: rgba(255,255,255,.2); }
.lb-close { top: 1.2rem; right: 1.2rem; }
.lb-prev { top: 50%; left: 1.2rem; transform: translateY(-50%); }
.lb-next { top: 50%; right: 1.2rem; transform: translateY(-50%); }
.lb-btn svg { width: 22px; height: 22px; }
.lightbox__counter { position: absolute; top: 1.5rem; left: 1.5rem; color: rgba(244,238,240,.7); font-family: var(--font-head); font-size: .9rem; }
@media (max-width: 640px){ .lb-prev { left: .5rem; } .lb-next { right: .5rem; } .lb-btn { width: 44px; height: 44px; } }

/* ==========================================================================
   Musik
   ========================================================================== */
.album {
  display: grid; gap: clamp(1.8rem, 1rem + 4vw, 4.5rem); align-items: center;
}
.album > * { min-width: 0; }
@media (min-width: 860px){ .album { grid-template-columns: minmax(280px, 380px) 1fr; } }
.album__body { max-width: 60ch; }
.bg-pink .album h2 { color: var(--ink); }
.bg-pink .album .lead { color: var(--ink); opacity: .8; }
.bg-pink .album .eyebrow { color: var(--ink); }
.bg-pink .album .eyebrow::before { background: var(--ink); }
.bg-pink .album__meta div span { color: rgba(21,19,21,.6); }
.bg-pink .album__meta div b { color: var(--ink); }

/* Zwei-Alben-Reihe + Playlist-Karte */
.album__cover { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 1; }
.album__cover img { width: 100%; height: 100%; object-fit: cover; }
.album__meta { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin: 1.4rem 0 1.8rem; }
.album__meta div span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); display: block; }
.album__meta div b { font-family: var(--font-head); font-size: 1.15rem; }
.platforms { display: flex; flex-wrap: wrap; gap: .6rem; }
.platform {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.05rem; border-radius: var(--radius-pill);
  border: 1.4px solid var(--border-dark); color: #fff;
  font-family: var(--font-head); font-weight: 500; font-size: .88rem;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s, transform .3s var(--ease-out);
}
.platform:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); transform: translateY(-2px); }
.platform svg { width: 20px; height: 20px; }
.platforms--grid-lg .platform svg { width: 24px; height: 24px; }

.tracklist { columns: 2 240px; column-gap: 2.5rem; }
@media (max-width: 560px){ .tracklist { columns: 1; } }
.tracklist--single { columns: 1; }
.tracklist li { break-inside: avoid; display: flex; gap: .9rem; padding: .55rem 0; border-bottom: 1px solid var(--border-dark); align-items: baseline; }
.tracklist li span { font-family: var(--font-head); color: var(--pink); font-size: .85rem; min-width: 1.8rem; }
.tracklist li b { font-weight: 400; font-size: .96rem; flex: 1; }
.tracklist li em {
  font-style: normal;
  font-family: var(--font-head);
  color: var(--muted); font-size: .82rem;
  font-variant-numeric: tabular-nums;
  margin-left: auto; flex-shrink: 0;
}
.bg-paper .tracklist li { border-color: var(--border); }
.bg-paper .tracklist li span { color: var(--accent); }
.bg-paper .tracklist li em { color: var(--muted); }

/* ---------- Album-Karten (Musik-Seite) ---------- */
.album-cards { display: grid; gap: clamp(1.4rem, 1rem + 2vw, 2.4rem); }
@media (min-width: 860px){ .album-cards { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.album-card {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--ink-2); border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .4s var(--ease-out), border-color .25s;
}
.album-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); }
.album-card--primary { border-color: rgba(221,192,197,.45); box-shadow: 0 22px 60px rgba(0,0,0,.25); }
.album-card__cover { position: relative; aspect-ratio: 1; overflow: hidden; }
.album-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-card__body { padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); display: flex; flex-direction: column; gap: .8rem; color: #fff; }
.album-card__tag { font-family: var(--font-head); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.album-card h3 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); margin: 0; }
.album-card__meta { color: var(--muted-dark); font-size: .9rem; margin: 0; }
.album-card__desc { color: rgba(244,238,240,.85); font-size: 1rem; margin: .3rem 0 .8rem; }
.album-card__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .6rem; }

/* ---------- Playlist-Band (Full-Width Hero) ---------- */
.playlist-band { padding-block: clamp(3.5rem, 2rem + 5vw, 6rem); }
.playlist-hero {
  display: grid; gap: clamp(1.8rem, 1rem + 4vw, 4rem); align-items: center;
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg); overflow: hidden;
  padding: clamp(1.6rem, 1rem + 3vw, 3rem);
  box-shadow: 0 24px 60px rgba(21,19,21,.18);
}
@media (min-width: 780px){
  .playlist-hero { grid-template-columns: minmax(220px, 320px) 1fr; padding: clamp(2rem, 1.5rem + 2vw, 3.4rem); }
}
.playlist-hero__cover { border-radius: 18px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.playlist-hero__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.playlist-hero__body { display: flex; flex-direction: column; gap: 1rem; }
.playlist-hero__body h2 { color: #fff; font-size: clamp(2rem, 1.4rem + 2.8vw, 3.2rem); margin: 0; text-wrap: balance; }
.playlist-hero__body .lead { color: rgba(244,238,240,.9); }
.playlist-hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 1rem + 2vw, 3rem); margin: .6rem 0 1rem; }
.playlist-hero__stats div { display: flex; flex-direction: column; gap: .15rem; }
.playlist-hero__stats b { font-family: var(--font-head); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 600; color: var(--pink); line-height: 1; }
.playlist-hero__stats span { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted-dark); }
.playlist-hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.bg-pink .playlist-hero .btn--ghost-ink { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.bg-pink .playlist-hero .btn--ghost-ink:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }

/* ---------- Zweispaltige Tracklisten ---------- */
.tracklists { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.8rem); align-items: start; }
@media (min-width: 860px){ .tracklists { grid-template-columns: 1fr 1fr; } }
.tracklist-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.tracklist-col__head { display: flex; gap: 1rem; align-items: center; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tracklist-col__head img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; box-shadow: var(--shadow-sm); }
.tracklist-col__head b { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; }
.tracklist-col__head span { display: block; color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.tracklist-note p { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; }
.tracklist-note .platform { border-color: var(--border); color: var(--text); background: var(--pink-tint); }
.tracklist-note .platform:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- Plattformen als Grid ---------- */
.platforms--grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
@media (max-width: 720px){ .platforms--grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px){ .platforms--grid { grid-template-columns: 1fr; } }
.platforms--grid .platform { justify-content: center; padding-block: .95rem; font-size: .95rem; }
.bg-ink .platforms--grid .platform { border-color: var(--border-dark); color: #fff; background: var(--ink-2); }
.bg-ink .platforms--grid .platform:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); }

/* ---------- Künstlerprofile: eigene abgehobene Section ---------- */
.artist-follow-band {
  background: linear-gradient(135deg, var(--pink-tint) 0%, var(--pink-soft) 60%, var(--pink) 100%);
  padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem);
}
.artist-follow {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 1.5rem + 2vw, 3rem);
  box-shadow: 0 24px 60px rgba(21,19,21,.10);
  max-width: 960px; margin-inline: auto;
}
.artist-follow__head { text-align: center; margin-bottom: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.artist-follow__head .eyebrow { justify-content: center; }
.artist-follow__head h2 { color: var(--ink); font-size: var(--fs-h3); margin: .6rem 0 .5rem; }
.artist-follow__head p { color: var(--muted); font-size: .95rem; max-width: 52ch; margin-inline: auto; }
.artist-follow .platforms--grid .platform {
  background: var(--pink-tint);
  color: var(--ink);
  border-color: var(--border);
  min-height: 56px;
}
.artist-follow .platforms--grid .platform:hover {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.artist-follow .platforms--grid .platform svg { color: var(--ink); --_bi: var(--pink-tint); }
.artist-follow .platforms--grid .platform:hover svg { color: #fff; --_bi: var(--ink); }
.platforms--grid-lg .platform { min-height: 60px; font-size: 1rem; }

/* ==========================================================================
   Partner / Social
   ========================================================================== */
.partner-card { display: flex; gap: 1.3rem; align-items: flex-start; padding: 1.6rem; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease-out), box-shadow .4s; }
.bg-ink .partner-card, .bg-ink-2 .partner-card { background: var(--ink-2); }
.partner-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.partner-card__logo { width: 72px; height: 72px; border-radius: 50%; background: transparent; display: grid; place-items: center; flex-shrink: 0; color: var(--pink); font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; overflow: hidden; }
.partner-card__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.partner-card__links { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin-top: .8rem; }
.partner-card__links .link-arrow { font-size: .88rem; }
.ad-card { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem 1.6rem; box-shadow: var(--shadow-sm); }
.ad-card__text { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ad-card__text p { color: var(--muted); font-size: .95rem; margin: 0; max-width: 52ch; }
.partner-card h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.partner-card p { font-size: .92rem; color: var(--muted); }
.bg-ink .partner-card p, .bg-ink-2 .partner-card p { color: var(--muted-dark); }

/* Social-Grid v2.6: quadratische Karten, Inhalte komplett zentriert. Desktop 4-spaltig, Mobil 2×2. */
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.social-card {
  position: relative; display: flex; flex-direction: column; gap: .9rem;
  padding: 1.4rem; border-radius: var(--radius);
  background: var(--ink-2); color: #fff; overflow: hidden;
  transition: transform .4s var(--ease-out);
  border: 1px solid var(--border-dark);
  aspect-ratio: 1 / 1;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.social-card:hover { transform: translateY(-5px); }
.social-card__icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-3); color: var(--pink); }
.social-card__icon svg { width: 24px; height: 24px; }
.social-card b { font-family: var(--font-head); font-size: 1.15rem; }
.social-card span { font-size: .86rem; color: var(--muted-dark); }
.social-card:hover .social-card__icon { background: var(--pink); color: var(--ink); }
@media (max-width: 860px){
  .social-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .social-card { padding: 1.1rem; gap: .6rem; }
  .social-card b { font-size: 1rem; }
  .social-card span { font-size: .78rem; }
}

/* ==========================================================================
   CTA-Band
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; text-align: center; padding-block: clamp(3rem, 2rem + 3vw, 4.75rem); }
.cta-band__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.cta-band .eyebrow { margin-bottom: 1rem; }
.cta-band h2 { font-size: var(--fs-h2); color: #fff; margin-bottom: 1.3rem; text-wrap: balance; }
/* v4.7: globales .btn-row (vorher nur CTA-band). Ohne diese Regel stapelten
   die Buttons in .section .btn-row als inline-flex ohne Gap, wodurch die
   Abmessungen anders wirkten als in der CTA-Band unten. */
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.cta-band .btn-row { justify-content: center; }
.cta-pattern {
  position: absolute; inset: 0; z-index: 0; opacity: .22;
  background-image: var(--pattern);
  background-size: cover;              /* proportional füllen, keine Verzerrung */
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 15%, rgba(21,19,21,.65) 85%);
}

/* ==========================================================================
   Formular
   ========================================================================== */
.form-grid { display: grid; gap: clamp(1.6rem,1rem+3vw,3.5rem); }
@media (min-width: 900px){ .form-grid { grid-template-columns: .85fr 1.15fr; } }
/* v2.9 Formular — Root-Cause-Fix Column-Alignment via CSS Subgrid
   ------------------------------------------------------------------
   Historie des Bugs:
   – Bis v2.4 funktionierte das Alignment, weil jedes `.field` innerhalb `.field-2`
     dieselbe Content-Höhe hatte und das Grid die Zellen automatisch stretched.
   – v2.7 hat mit `.field label { line-height: 1.25; min-height: 1.25em }` eine
     em/unitless-relative Label-Höhe eingeführt. Font-Metrik-Rundungen zwischen
     Safari und Chrome und leicht unterschiedliche Inhalte (mit/ohne `<span class="req">`)
     führen zu subpixeligen Höhendifferenzen → Labels sitzen zwischen den Spalten
     auf minimal unterschiedlichen Y-Positionen → Inputs entsprechend versetzt.
   – v2.8 hat via `height: 1.15rem` versucht, die Labelhöhe zu erzwingen, was aber
     fragil ist: sobald ein Label wrapt, ein `.field-error` aktiv wird oder ein anderer
     Feldtyp abweichende Content-Höhe hat, kippt die Ausrichtung sofort wieder.
   Die saubere Lösung ist Subgrid:
   `.field-2` definiert 3 Row-Tracks (Label / Input / Error), und beide `.field`-
   Spalten übernehmen dieselben Tracks per `grid-template-rows: subgrid`. Damit sitzen
   Labels, Inputs und Errors zwingend auf identischen Y-Achsen — unabhängig von
   Label-Text-Länge, Fehlerzuständen oder Browser-Font-Metriken. Kein Workaround
   (keine negativen Margins, keine transforms, keine absolute Positionierung, keine
   feld-spezifischen Padding-Werte). */

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 0; }
.field + .field, .field-2 + .field, .field + .field-2, .field-2 + .field-2 { margin-top: .7rem; }
.field label {
  font-family: var(--font-head); font-weight: 500;
  font-size: .88rem;
  line-height: 1.25;
  margin: 0;
}
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  width: 100%; padding: .8rem 1rem; border-radius: 11px; min-height: 48px; height: 48px;
  border: 1.5px solid var(--border-dark); background: var(--ink-3); color: #fff;
  font-size: 1rem; line-height: 1.3;
  transition: border-color .25s var(--ease), background .25s;
  box-sizing: border-box;
}
.field textarea { height: auto; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a99ea3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem;
}
.field textarea { min-height: 130px; height: auto; }
.bg-paper .field input, .bg-paper .field select, .bg-paper .field textarea, .bg-white .field input, .bg-white .field select, .bg-white .field textarea {
  background: var(--white); color: var(--text); border-color: var(--border);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-dark); }
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pink); }

/* Basis-Layout: 2 Spalten, align-items: start als Fallback für nicht-subgrid-Browser */
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; align-items: start; }
@media (max-width: 540px){ .field-2 { grid-template-columns: 1fr; gap: .7rem; } }
.field-error { color: var(--accent-soft); font-size: .78rem; min-height: 1rem; margin-top: 0; line-height: 1.2; }

/* Subgrid: teilt Row-Tracks zwischen beiden Spalten → identische Baselines für
   Label, Input und Error. Alle modernen Browser (Chrome 117+, Safari 16+, FF 71+). */
@supports (grid-template-rows: subgrid) {
  .field-2 {
    grid-template-rows: auto auto auto;   /* Label / Input / Error */
    column-gap: .9rem;
    row-gap: 0;
    align-items: stretch;                 /* wird von Subgrid-Child neutralisiert */
  }
  .field-2 > .field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: .35rem;
    margin-top: 0;
  }
  @media (max-width: 540px){
    .field-2 { grid-template-rows: none; column-gap: 0; row-gap: .7rem; }
    .field-2 > .field { display: flex; flex-direction: column; grid-row: auto; }
  }
}
.form-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: var(--muted-dark); margin-top: 1rem; margin-bottom: 1.1rem; }
.form-consent input { width: 20px; height: 20px; margin-top: .15rem; flex-shrink: 0; accent-color: var(--accent); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.form-status { margin-top: 1rem; padding: 1rem 1.2rem; border-radius: 11px; font-size: .92rem; display: none; }
.form-status.is-ok { display: block; background: rgba(90,180,120,.15); border: 1px solid rgba(90,180,120,.4); color: #bfe6cc; }
.form-status.is-err { display: block; background: rgba(178,58,95,.15); border: 1px solid rgba(178,58,95,.4); color: var(--accent-soft); }

.contact-aside li { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.3rem; }
.contact-aside svg { width: 22px; height: 22px; color: var(--pink); flex-shrink: 0; margin-top: 2px; }
.contact-aside b { font-family: var(--font-head); display: block; }
.contact-aside span, .contact-aside a { color: var(--muted-dark); font-size: .95rem; }
.contact-aside a:hover { color: var(--pink); }

/* ==========================================================================
   Filter-Bar
   ========================================================================== */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter-bar button {
  font-family: var(--font-head); font-weight: 500; font-size: .86rem;
  padding: .5rem 1.05rem; border-radius: var(--radius-pill);
  border: 1.4px solid var(--border); color: var(--muted);
  transition: all .25s var(--ease);
}
.bg-ink .filter-bar button, .bg-ink-2 .filter-bar button { border-color: var(--border-dark); color: var(--muted-dark); }
.filter-bar button:hover { border-color: var(--pink); color: var(--text); }
.bg-ink .filter-bar button:hover { color: #fff; }
.filter-bar button[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.is-hidden { display: none !important; }

/* Instagram-Embed (Consent) */
.ig-embed__placeholder { background: var(--ink-2); border: 1px solid var(--border-dark); border-radius: var(--radius-lg);
  padding: clamp(2rem,1.5rem+3vw,3.2rem); text-align: center; display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.ig-embed__placeholder p { color: var(--text-on-dark); }
.ig-embed__placeholder b { color: var(--pink); }

/* Instagram-Feed (lokal, kein CDN, siehe assets/js/ig-feed.js) */
.ig-feed { max-width: 1180px; margin-inline: auto; min-height: 320px; }
.ig-feed__grid {
  display: grid; gap: clamp(.6rem, .4rem + .5vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px){ .ig-feed__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 600px){ .ig-feed__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ig-item {
  position: relative; display: block; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 14px; background: var(--ink-2);
  transition: transform .35s var(--ease-out), box-shadow .3s;
  border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; font: inherit;
}
.ig-item:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.ig-item__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.ig-item:hover .ig-item__img { transform: scale(1.05); }
.ig-item__badge {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(21,19,21,.55); color: #fff;
  backdrop-filter: blur(4px);
}
.ig-item__badge svg { width: 16px; height: 16px; }
.ig-item__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2rem .85rem .95rem; font-size: .8rem; line-height: 1.4; color: #fff;
  background: linear-gradient(to top, rgba(21,19,21,.94) 0%, rgba(21,19,21,.72) 55%, transparent 100%);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Fallback falls -webkit-line-clamp nicht greift: 3 Zeilen + Padding als Deckel */
  max-height: calc((.8rem * 1.4) * 3 + 2rem + .95rem);
  opacity: 0; transition: opacity .3s var(--ease);
}
.ig-item:hover .ig-item__cap, .ig-item:focus-visible .ig-item__cap { opacity: 1; }
.ig-feed__empty {
  padding: 2.4rem 1rem; text-align: center;
  color: var(--muted-dark); border-radius: var(--radius-lg);
  background: var(--ink-2); border: 1px dashed var(--border-dark);
}
.ig-feed__empty a { color: var(--pink); }
/* v3.0 Consent-Platzhalter für Instagram (blockiert bis zur Zustimmung) */
.ig-feed__consent {
  padding: clamp(1.8rem, 1.2rem + 2vw, 2.6rem);
  text-align: center;
  color: var(--text-on-dark);
  background: var(--ink-2);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  max-width: 640px; margin-inline: auto;
  display: flex; flex-direction: column; gap: 1rem; align-items: center;
}

/* v3.3: Spotify-Embed mit Consent-Gate + Skeleton */
.spotify-embed { position: relative; min-height: 152px; border-radius: 12px; overflow: hidden; }
.spotify-embed__consent {
  padding: 1.4rem; text-align: center;
  color: var(--text-on-dark);
  background: var(--ink-2);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 1rem; align-items: center;
}
.spotify-embed__consent p { color: var(--muted-dark); max-width: 52ch; margin: 0; font-size: .92rem; }
.spotify-embed__consent b { color: var(--pink); font-family: var(--font-head); }
.spotify-embed__consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.spotify-embed iframe { border-radius: 12px; border: 0; display: block; width: 100%; }

/* v3.3: Skeleton-Loader während der Feed lädt (nach Consent) */
.ig-feed__skeleton {
  display: grid; gap: clamp(.6rem, .4rem + .5vw, 1rem);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px; margin-inline: auto;
}
@media (max-width: 900px){ .ig-feed__skeleton { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 600px){ .ig-feed__skeleton { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ig-feed__skeleton-item {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: linear-gradient(90deg, var(--ink-2) 0%, var(--ink-3) 50%, var(--ink-2) 100%);
  background-size: 200% 100%;
  animation: ig-skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes ig-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce){
  .ig-feed__skeleton-item { animation: none; }
}
.ig-feed__consent p { color: var(--muted-dark); max-width: 52ch; margin: 0; font-size: .95rem; }
.ig-feed__consent b { color: var(--pink); font-family: var(--font-head); }
.ig-feed__consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Instagram-Lightbox — DSGVO-freundlich, kein IG-Embed-Skript */
.ig-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,8,10,.88); backdrop-filter: blur(6px);
  padding: 2rem; opacity: 0; transition: opacity .25s var(--ease-out);
}
.ig-lightbox[hidden] { display: none !important; }
.ig-lightbox.is-open { display: flex; opacity: 1; }
.ig-lightbox__stage {
  position: relative; max-width: min(560px, 100%); width: 100%;
  max-height: calc(100vh - 4rem);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.ig-lightbox__media {
  position: relative; width: 100%; max-height: 78vh;
  border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
}
.ig-lightbox__media video,
.ig-lightbox__media img {
  display: block; max-width: 100%; max-height: 78vh;
  width: auto; height: auto; object-fit: contain; background: #000;
}
.ig-lightbox__cap {
  color: #f0e6ea; font-size: .9rem; line-height: 1.45;
  max-width: 100%; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ig-lightbox__actions {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; justify-content: center;
}
.ig-lightbox__actions a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border-radius: var(--radius-pill);
  background: var(--pink); color: var(--ink); font-weight: 600; font-size: .88rem;
  text-decoration: none; transition: transform .2s var(--ease);
}
.ig-lightbox__actions a:hover { transform: translateY(-1px); }
.ig-lightbox__close {
  position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right));
  z-index: 10000;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.18); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; transition: background .2s, transform .2s;
  backdrop-filter: blur(6px);
}
.ig-lightbox__close:hover { background: rgba(255,255,255,.32); transform: scale(1.05); }
.ig-lightbox__close:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.ig-lightbox__close svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .ig-lightbox { padding: 1rem; }
  .ig-lightbox__close { width: 40px; height: 40px; }
}
body.ig-lightbox-open { overflow: hidden; }

/* Google reCAPTCHA v3 — Badge komplett ausblenden (Google-Legal-Notice steht am Formular)
   Google injiziert `right: 14px !important` inline auf das Badge — daher `display: none` statt visibility */
.recaptcha-legal {
  margin-top: 1rem; font-size: .78rem; line-height: 1.5; color: var(--muted);
  text-align: center;
}
/* v2.7: reCAPTCHA-Links folgen dem globalen Inline-Link-Style (var(--pink)) —
   die Regel oben (Selektor-Liste) übernimmt die Farbe. */

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state svg { width: 46px; height: 46px; margin-inline: auto; color: var(--pink-deep); margin-bottom: 1rem; }

/* Timeline (Termine Liste) */
.event-row {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 1.5rem; align-items: center;
  padding: 1.5rem 0; border-bottom: 1px solid var(--border);
}
.bg-ink .event-row, .bg-ink-2 .event-row { border-color: var(--border-dark); }
.event-row__date { text-align: center; }
.event-row__date b { font-family: var(--font-head); font-size: 2rem; line-height: 1; display: block; color: var(--accent); }
.bg-ink .event-row__date b { color: var(--pink); }
.event-row__date span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.event-row h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.event-row__meta { color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.event-row__meta span { display: inline-flex; align-items: center; gap: .38rem; }
.event-row__meta svg { color: var(--pink-deep); }
.bg-ink .event-row__meta svg { color: var(--pink); }
.bg-ink .event-row__meta { color: var(--muted-dark); }
@media (max-width: 720px){
  .event-row { grid-template-columns: 72px 1fr; }
  .event-row__cta { grid-column: 2; justify-self: start; }
}

/* Ergebnis-Box */
.result-box { background: var(--ink-2); border-radius: var(--radius); padding: 1.5rem; color: #fff; }
.result-box h4 { color: var(--pink); margin-bottom: .8rem; }
.result-box .score { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid var(--border-dark); font-size: .95rem; }
.result-box .score b { font-family: var(--font-head); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--text-on-dark); padding-top: clamp(3rem,2rem+4vw,5rem); }
.footer-top {
  display: grid;
  gap: clamp(2.5rem, 1.8rem + 3vw, 3.6rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
}
@media (min-width: 860px){ .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: start; gap: clamp(2rem, 1rem + 2vw, 3rem); } }
@media (max-width: 860px){
  .footer-top { gap: 2.6rem; }
  .footer-col h3 { padding-top: 1.4rem; border-top: 1px solid var(--border-dark); }
  .footer-brand + .footer-col h3 { padding-top: 0; border-top: none; }
  /* Mobile: kompletter Footer zentriert */
  .footer-brand { text-align: center; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
  .footer-social { justify-content: center; }
  .footer-logo-link { display: inline-block; }
  .footer-col { text-align: center; }
  .footer-col h3 { text-align: center; }
  .footer-col ul { display: flex; flex-direction: column; align-items: center; }
}
.footer-logo-link { display: inline-block; margin-bottom: 1.2rem; }
.footer-logo { width: 110px; height: 110px; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; }
.footer-brand p { color: var(--muted-dark); font-size: .95rem; margin-top: 1rem; max-width: 42ch; }
/* v4.1: Footer-Claim wieder groß (v3.0-Rhythmus), aber semantisch als
   <p class="footer-claim"> (nicht h2 — v3.9 hat h2 zu p zurückgeführt,
   damit sich der Claim nicht als wiederholte identische H2 auf jeder
   Unterseite ausbreitet). Nur die visuelle Größe wird zurückgesetzt. */
.footer-claim {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(3.6rem, 2.6rem + 3.8vw, 6.2rem);
  color: var(--pink);
  margin: .6rem 0 1.3rem;
  line-height: 1.02;
  letter-spacing: -.01em;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  text-wrap: balance;
  display: block;
}
@media (max-width: 520px){
  .footer-claim {
    font-size: clamp(2.6rem, 1.8rem + 4vw, 3.4rem);
    line-height: 1.06;
    margin: .5rem 0 1rem;
  }
}
.footer-col h3 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); margin-bottom: 1.1rem; }
.footer-col li { margin-bottom: .6rem; }
.footer-col a { color: var(--muted-dark); font-size: .95rem; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: .7rem; margin-top: 1.3rem; }
.footer-social a { width: 42px; height: 42px; border-radius: 8px; border: 1.4px solid var(--border-dark); display: grid; place-items: center; color: #fff; transition: background .25s, color .25s, border-color .25s; }
.footer-social a:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.footer-social svg { width: 19px; height: 19px; }
.footer-legal {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  text-align: center; padding: 1.8rem 0 2.4rem; font-size: .82rem; color: var(--muted-dark);
}
.footer-legal__meta { margin: 0; line-height: 1.6; }
.footer-legal__credit { color: var(--muted-dark); }
.footer-legal__credit a { color: var(--pink); font-weight: 500; }
.footer-legal__credit a:hover { color: #fff; }
.footer-legal__sep { color: var(--muted-dark); opacity: .55; }
@media (max-width: 720px){
  .footer-legal__sep { display: none; }
  .footer-legal__credit { display: block; margin-top: .3rem; }
}
.footer-legal__links { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; justify-content: center; }
.footer-legal a:hover { color: var(--pink); }
@media (min-width: 720px){
  .footer-legal { flex-direction: row; justify-content: space-between; align-items: baseline; text-align: left; }
}

/* ==========================================================================
   Scroll-Reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{ transition-delay: .08s; }
.reveal[data-delay="2"]{ transition-delay: .16s; }
.reveal[data-delay="3"]{ transition-delay: .24s; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Scroll-to-top — v3.3: sichere Safe-Area-Berechnung (max) verhindert
   Überlappung mit iOS-Safari-Toolbar auch wenn env() = 0 zurückgibt. */
.to-top {
  position: fixed; right: 1.25rem;
  bottom: max(1.25rem, calc(1.25rem + env(safe-area-inset-bottom, 0px)));
  width: 48px; height: 48px; border-radius: 50%; z-index: 90;
  background: var(--pink); color: var(--ink); border: 1.5px solid rgba(255,255,255,.6);
  display: grid; place-items: center; box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none; transform: translateY(20px) scale(.7);
  transition: opacity .35s var(--ease), transform .45s var(--ease-out);
}
.to-top.is-show { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 20px; height: 20px; }
/* v2.6: Bei offenem Mobile-Menü Scroll-to-Top-Button ausblenden,
   damit er nicht über dem Shop-Button/Menü-CTA liegt. */
body.menu-open .to-top { opacity: 0 !important; pointer-events: none !important; visibility: hidden; }

/* ---------- Galerie-CTA (iCloud) ---------- */
.gallery-cta {
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
}
.gallery-cta p { color: var(--muted-dark); max-width: 52ch; }

/* ---------- Pink-Weiß-Band (Marke, große Schrift) ---------- */
.bg-pink-white { background: var(--pink); color: var(--ink); }
.bg-pink-white .eyebrow { color: var(--ink); }
.bg-pink-white .eyebrow::before { background: var(--ink); }
.pink-band { text-align: center; }
.pink-band__inner { max-width: 940px; margin-inline: auto; }
.pink-band h2 { color: var(--ink); font-size: clamp(2rem, 1.4rem + 3.4vw, 4rem); text-wrap: balance; letter-spacing: -.02em; }
.pink-band h2 .script { color: var(--ink); }
.pink-band p { color: var(--ink); font-size: var(--fs-lead); margin-top: 1rem; opacity: .92; max-width: 62ch; margin-inline: auto; }
.pink-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(1.2rem, 2vw + 1rem, 3rem);
  margin-top: 2.6rem;
  text-align: center;
}
@media (max-width: 720px){ .pink-stats { grid-template-columns: repeat(2, 1fr); row-gap: 1.6rem; } }
.pink-stats .stat { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.pink-stats .stat b { color: var(--ink); font-family: var(--font-head); font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1; font-weight: 600; }
.pink-stats .stat span { color: var(--ink); opacity: .78; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; text-align: center; line-height: 1.35; }
.bg-pink-white .btn--ghost, .bg-pink-white .btn--ghost-ink {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink);
}
.bg-pink-white .btn--ghost:hover, .bg-pink-white .btn--ghost-ink:hover {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink);
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: .8rem; margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.4rem); }
.faq-item {
  background: var(--pink-tint); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-item[open] { border-color: var(--pink); box-shadow: 0 8px 24px rgba(21,19,21,.06); }
.faq-item summary {
  list-style: none;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; line-height: 1.35;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q { flex: 1; }
.faq-item__ic {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  display: grid; place-items: center;
  transition: transform .3s var(--ease), background .25s;
}
.faq-item__ic svg { width: 18px; height: 18px; }
.faq-item[open] .faq-item__ic { transform: rotate(90deg); background: var(--pink); }
.faq-item__a {
  padding: 0 1.4rem 1.3rem;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.6;
}
.faq-item__a p { margin: 0; }
.faq-footer { text-align: center; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.faq-footer p { color: var(--muted); font-size: 1rem; margin: 0; }

/* ---------- Sponsoren-/Werbebanner (Footer) ---------- */
.sponsor-section { padding-block: clamp(3rem, 2rem + 3vw, 4.75rem); }
/* v2.7 mobil: einheitliche seitliche Ränder (Container-Padding), Kacheln nutzen fast volle Breite */
@media (max-width: 520px){
  .sponsor-section .container { padding-inline: 1rem; }
  .sponsor-section { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
}
.sponsor-section__head { text-align: center; max-width: 640px; margin: 0 auto clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.sponsor-section__head .eyebrow { justify-content: center; margin-bottom: .8rem; }
.sponsor-section__head h2 { font-size: var(--fs-h3); color: #fff; margin-bottom: .7rem; }
.sponsor-section__head p { color: var(--muted-dark); font-size: .95rem; }
.sponsor-section__head .link-arrow { color: var(--pink); }
/* v2.6 Sponsor-Design: dunkle, borderlose Kacheln nach User-Vorlage (Designvorschlag).
   Border wegen zu sichtbarer Rand-Optik entfernt, Kacheln als solide ink-3-Tiles. */
.sponsor-lead {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .9rem;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2rem) clamp(1rem, .5rem + 3vw, 3.5rem);
  /* v2.7: Vertikaler Abstand zum Grid = Grid-Gap (visuelle Symmetrie) */
  margin-bottom: clamp(.7rem, .5rem + .5vw, 1.2rem);
  border: 0;
  border-radius: 22px;
  background: var(--ink-3);
  transition: transform .3s var(--ease-out), background .25s;
  min-height: 140px; text-align: center;
}
.sponsor-lead:hover { transform: translateY(-3px); background: #2e2a2d; }
.sponsor-lead img {
  display: block; margin: 0 auto;
  max-height: 66px; max-width: min(360px, 62%);
  width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.sponsor-lead__tag {
  font-family: var(--font-head); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted-dark); white-space: nowrap;
}
@media (max-width: 520px){
  /* v2.7 Sponsor-Layout mobil: einheitlicher Rhythmus — margin-bottom = grid-gap. */
  .sponsor-lead { min-height: 128px; padding: 1.3rem 1rem; gap: .55rem; margin-bottom: .9rem; width: 100%; box-sizing: border-box; border-radius: 18px; }
  .sponsor-lead img { max-height: 60px; max-width: 88%; }
  .sponsor-lead__tag { font-size: .62rem; letter-spacing: .16em; }
}
/* Sponsor-Slots: img/svg-text unmarkierbar */
.sponsor-slot img, .sponsor-slot svg { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; pointer-events: none; }
.sponsor-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0,1fr));
  gap: clamp(.7rem, .5rem + .5vw, 1.2rem);
  /* v2.8: align-items: start damit `aspect-ratio` auf .sponsor-slot nicht durch stretch überschrieben wird */
  align-items: start;
  width: 100%; box-sizing: border-box; margin: 0; padding: 0;
}
@media (max-width: 1024px){ .sponsor-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
/* v2.8 mobil: exakt 2 Spalten, gleiche Gaps horizontal/vertikal, keine ungenutzte Fläche */
@media (max-width: 520px){ .sponsor-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; } }
/* v2.8 Root-Cause-Fix Sponsor-Grid iOS Safari:
   v2.7 nutzte `display: grid; place-items: center` KOMBINIERT mit `aspect-ratio: 1/1` und
   `min-height: 0` auf dem Grid-Item, das selbst in einem `minmax(0, 1fr)`-Parent-Grid liegt.
   iOS Safari (WebKit-Bug) rechnet in dieser Konstellation gelegentlich die intrinsische
   Höhe aus dem Inhalt statt aus `aspect-ratio` — Kacheln kollabieren dann visuell auf
   die Höhe des Logo-/Textinhalts statt Quadrat zu sein. Der Responsive-Simulator zeigt
   das nicht, weil er die WebKit-Bug-Path nicht triggert.
   Fix: `display: flex` statt `display: grid; place-items: center` (Flex-Container triggert
   den Bug nicht) und die Aspect-Ratio wird zusätzlich mit einem `::before`-Padding-Hack
   als Fallback abgesichert (funktioniert in JEDER Safari-Version). */
.sponsor-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3/2;
  background: var(--ink-3); border: 0; border-radius: 18px;
  color: var(--muted-dark);
  transition: background .25s var(--ease), color .25s, transform .3s var(--ease-out);
  text-align: center; padding: .8rem;
  box-sizing: border-box; min-width: 0; width: 100%;
  /* iOS Safari: aspect-ratio-fallback via padding-top-Hack (0-Höhe + padding = 66.66% = 3:2) */
}
/* Padding-Hack als Fallback — greift nur wenn aspect-ratio nicht unterstützt oder buggy */
@supports not (aspect-ratio: 1) {
  .sponsor-slot { aspect-ratio: auto; height: 0; padding-bottom: 66.66%; padding-top: 0; }
  .sponsor-slot > * { position: absolute; inset: .8rem; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 520px){
  /* v2.8 mobil: quadratische Kacheln (1:1), gleiche Ränder/Gaps, Apple-Settings-Optik.
     Explizite width + aspect-ratio + flex-Layout garantieren identische Größe auf iOS Safari. */
  .sponsor-slot { aspect-ratio: 1/1; padding: .8rem; border-radius: 18px; }
  @supports not (aspect-ratio: 1) {
    .sponsor-slot { aspect-ratio: auto; height: 0; padding-bottom: 100%; padding-top: 0; }
  }
  .sponsor-slot img { max-width: 82%; max-height: 82%; }
  .sponsor-slot span { font-size: .72rem; letter-spacing: .08em; }
}
.sponsor-slot:hover { background: #2e2a2d; color: var(--pink); transform: translateY(-3px); }
.sponsor-slot span { font-family: var(--font-head); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.sponsor-slot img { max-width: 74%; max-height: 74%; width: auto; height: auto; object-fit: contain; }
.sponsor-slot--filled { background: var(--ink-3); }

/* ---------- Link-in-Bio (/link) + Album2026 Landingpage ----------
   v3.0: Ausreichender Abstand oberhalb des Logos, damit es auf iOS-Geräten
   mit Notch/Dynamic Island nicht am oberen Rand klebt. Kombiniert clamp
   (proportional zur Viewport-Höhe) mit env(safe-area-inset-top). */
.linkbio { min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding-top: calc(clamp(2rem, 1rem + 4vh, 4rem) + env(safe-area-inset-top, 0px));
  padding-inline: var(--container-pad);
  padding-bottom: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  text-align: center; }
.linkbio__logo { width: 108px; height: 108px; margin-bottom: 1.1rem; }
.linkbio h1 { color: #fff; font-size: clamp(1.8rem,1.4rem+2vw,2.6rem); }
.linkbio__sub { color: var(--pink); font-family: var(--font-script); font-size: 1.9rem; line-height: 1; margin-top: .3rem; }
.linkbio__list { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: .8rem; margin: 2rem 0; }
.linkbtn { display: flex; align-items: center; gap: .8rem; justify-content: center; position: relative;
  padding: 1.05rem 1.4rem; border-radius: var(--radius-pill); background: var(--ink-2);
  border: 1.4px solid var(--border-dark); color: #fff; font-family: var(--font-head); font-weight: 600;
  transition: background .25s var(--ease), color .25s, border-color .25s, transform .3s var(--ease-out); }
.linkbtn:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); transform: translateY(-2px); }
.linkbtn--primary { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.linkbtn--primary:hover { background: var(--pink-bright); border-color: var(--pink-bright); }
.linkbtn svg { width: 20px; height: 20px; }
.linkbio__social { display: flex; gap: .8rem; justify-content: center; margin-top: .6rem; }
.linkbio__social a { width: 48px; height: 48px; border-radius: 50%; border: 1.4px solid var(--border-dark);
  display: grid; place-items: center; color: #fff; transition: background .25s, color .25s, border-color .25s; }
.linkbio__social a:hover { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.linkbio__social svg { width: 22px; height: 22px; }
/* v3.0 Album-2026 Landingpage (eigenständig, orientiert an .linkbio) */
.album-lp {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding-top: calc(clamp(2rem, 1rem + 4vh, 4rem) + env(safe-area-inset-top, 0px));
  padding-inline: var(--container-pad);
  padding-bottom: clamp(2.5rem, 2rem + 4vw, 4.5rem);
  text-align: center;
  color: var(--text-on-dark);
}
.album-lp__logo-link { display: inline-block; margin-bottom: 1.2rem; }
.album-lp__logo { width: 78px; height: 78px; }
.album-lp__eyebrow {
  font-family: var(--font-head); font-weight: 600;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--pink);
  margin-bottom: .8rem;
}
.album-lp__title {
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.album-lp__sub {
  color: rgba(244,238,240,.85);
  max-width: 38ch;
  margin: 0 auto 1.6rem;
  font-size: 1.02rem;
  line-height: 1.5;
}
.album-lp__cover {
  width: min(320px, 78vw);
  aspect-ratio: 1;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  margin-bottom: 1.2rem;
}
.album-lp__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-lp__meta {
  color: var(--muted-dark);
  font-size: .82rem; letter-spacing: .04em;
  margin: 0 0 1.6rem;
  font-family: var(--font-head);
}
.album-lp__platforms {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column; gap: .7rem;
  margin-bottom: 1.4rem;
}
.album-lp__more {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column; gap: .55rem;
  margin-bottom: 1.6rem;
}
.linkbtn--ghost {
  background: transparent;
  border: 1.4px solid var(--border-dark);
  color: var(--text-on-dark);
}
.linkbtn--ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: var(--pink);
  color: #fff;
}

/* v3.0 Linkbio-Footer: © · Gestaltung · Rechtliche Links — echter Umbruch */
.linkbio__foot {
  margin-top: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  padding-bottom: max(1.2rem, env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: .6rem;
  color: var(--muted-dark); font-size: .82rem; line-height: 1.55;
  text-align: center;
  max-width: 520px; width: 100%;
}
.linkbio__foot p { margin: 0; }
.linkbio__foot a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }
.linkbio__foot a:hover { color: #fff; }
/* Album-LP: gleiches Footer-Muster wie Linkbio */
.album-lp .linkbio__foot { max-width: 520px; }
.linkbio__legal { display: flex; flex-wrap: wrap; gap: .4rem .8rem; justify-content: center; align-items: baseline; }
.linkbio__legal a { color: var(--muted-dark); text-decoration: none; }
.linkbio__legal a:hover { color: var(--pink); }
.linkbio__legal span { color: var(--muted-dark); opacity: .6; }
/* v3.3: Button-Icons via Flex-Gap (kein vertical-align-Hack).
   .btn hat bereits `display:inline-flex; align-items:center; gap:.55rem` —
   damit sind Icons automatisch vertikal zentriert. */
.btn > svg.ic { width: 18px; height: 18px; margin: 0; flex-shrink: 0; }

/* ---------- Utilities ---------- */
.dev-badge {
  position: fixed; left: 1rem; top: calc(var(--header-h) + .6rem); z-index: 80;
  background: var(--accent); color: #fff; font-family: var(--font-head); font-weight: 600;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  opacity: .9;
}

/* Cookie-Banner v3.0 (Legacy — bleibt für Rückwärtskompatibilität) */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 400;
  max-width: 520px; margin-inline: auto;
  background: var(--ink-2); border: 1px solid var(--border-dark); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow-lg); color: var(--text-on-dark);
  transform: translateY(160%); transition: transform .5s var(--ease-out);
}
.cookie.is-show { transform: none; }
.cookie p { font-size: .88rem; color: var(--muted-dark); margin-bottom: 1rem; }
.cookie p a { color: var(--pink); text-decoration: underline; }

/* ==========================================================================
   Cookie-Modal (v3.1) — zentraler Overlay-Dialog mit unscharfem Hintergrund
   ==========================================================================
   Struktur (analog sweet.catering):
   - Full-viewport-Overlay (position: fixed) mit backdrop-blur
   - Zentrale Box (max ~28rem), abgerundet, mit Cookie-Icon oben
   - Titel „Cookies & Statistik", Beschreibungstext, zwei Buttons
   - Primary-CTA (Alle akzeptieren) als solide Pill; Secondary (Nur essenzielle)
     als dezenter Textlink
   - Schließen-X oben rechts (funktional wie „Nur essenzielle" — kein Erzwingen
     von Zustimmung; die Wahl wird als „essential" gespeichert)
   ========================================================================== */
.cookie-modal {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.cookie-modal[hidden] { display: none; }
.cookie-modal.is-open { opacity: 1; visibility: visible; }
/* v4.6: Backdrop ist rein visuell — Klick schließt das Modal NICHT (Cursor
   default statt pointer, damit kein Interaktions-Hint entsteht). Etwas
   dunkler + stärkerer Blur, damit die Seite als „gesperrt" wahrgenommen wird. */
.cookie-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 8, 10, .68);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  cursor: default;
}
.cookie-modal__box {
  position: relative;
  width: 100%; max-width: 30rem;
  background: var(--ink-2);
  color: var(--text-on-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1rem + 2vw, 2.4rem);
  box-shadow: 0 32px 80px rgba(0, 0, 0, .55);
  transform: scale(.96);
  transition: transform .3s var(--ease-out);
  max-height: calc(100dvh - 2.4rem);
  overflow-y: auto;
}
.cookie-modal.is-open .cookie-modal__box { transform: scale(1); }
.cookie-modal__icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(245, 233, 201, .12);
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.cookie-modal__icon svg { width: 40px; height: 40px; }
/* v3.6: Inline-SVG-Badge — nur das SVG, kein zusätzlicher Rahmen/Kreis.
   Das SVG hat bereits seinen eigenen weißen Kreis. */
.cookie-modal__logo {
  display: block;
  margin-bottom: 1.1rem;
  background: transparent;
  border: 0;
  padding: 0;
}
.cookie-modal__brand { width: 64px; height: 64px; display: block; }
.cookie-modal__brand * { pointer-events: none; }
.cookie-modal__title {
  font-family: var(--font-head);
  font-size: 1.35rem; font-weight: 600;
  color: #fff; margin: 0 0 .6rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.cookie-modal__desc {
  font-size: .92rem;
  color: var(--muted-dark);
  line-height: 1.6;
  margin: 0 0 1.4rem;
}
.cookie-modal__desc a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cookie-modal__desc a:hover { color: #fff; }
.cookie-modal__actions {
  display: flex; flex-direction: column; gap: .6rem;
}
.cookie-modal__accept {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 1.6em;
  border-radius: var(--radius-pill);
  background: var(--pink); color: var(--ink);
  border: 1.5px solid var(--pink);
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease-out), box-shadow .3s var(--ease);
}
.cookie-modal__accept:hover {
  background: var(--pink-bright); border-color: var(--pink-bright);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(221, 192, 197, .28);
}
/* v4.1: „Nur essenzielle" zurück zum dezenten Text-Link (kein Button).
   Rationale: Der Button-Style (v3.3) lud optisch zum Klicken ein; wir
   wollen die Ablehnung ermöglichen, aber nicht bewerben. Jetzt schlichter
   unterstrichener Link, mittig unter dem Accept-Button. */
.cookie-modal__essential {
  display: inline-block;
  padding: .5rem .8rem;
  margin-top: .1rem;
  background: transparent;
  border: 0;
  color: var(--muted-dark);
  font-family: var(--font-head); font-weight: 400; font-size: .88rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color .2s var(--ease);
  text-align: center;
  align-self: center;
}
.cookie-modal__essential:hover {
  color: #fff;
}
.cookie-modal__close {
  position: absolute; top: .8rem; right: .8rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--muted-dark);
  display: grid; place-items: center; cursor: pointer;
  transition: color .2s, background .2s;
}
.cookie-modal__close:hover { color: #fff; background: rgba(255,255,255,.08); }
.cookie-modal__close svg { width: 18px; height: 18px; }
@media (max-width: 480px){
  .cookie-modal__box { padding: 1.6rem 1.4rem; }
  .cookie-modal__title { font-size: 1.2rem; }
  .cookie-modal__desc { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce){
  .cookie-modal, .cookie-modal__box { transition: none; transform: none; }
}
body.cookie-modal-open { overflow: hidden; }

/* v4.6: reCAPTCHA-Badge ausblenden. Google erlaubt das Verstecken der
   floatenden Badge (.grecaptcha-badge / .rc-anchor), sofern der geforderte
   Rechtstext („Diese Seite ist durch reCAPTCHA geschützt — es gelten
   Google-Datenschutz und Google-AGB.") sichtbar auf der Seite bleibt.
   Der Text steht bei uns direkt unter dem Absenden-Button des Kontakt-
   Formulars (p.recaptcha-legal). Wichtig: `visibility: hidden` statt
   `display: none`, damit das Script weiter funktioniert. */
.grecaptcha-badge { visibility: hidden !important; }

/* =============================================================================
   v3.7 — Spieler-Detailseiten + Fehlerseiten
   ============================================================================= */

/* Player Detail — 2-Spalten (Portrait | Steckbrief) */
.player-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 1rem + 3vw, 3.2rem);
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
}
@media (max-width: 780px){
  .player-detail { grid-template-columns: 1fr; gap: 1.6rem; }
}

.player-detail__photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 2 / 3;
  background: var(--ink-2);
  position: relative;
}
/* v4.9: picture-Wrapper füllt den 2:3-Container komplett — vorher
   sizte picture auf seine intrinsische img-Größe und ließ die Ecken
   der Photo-Karte in var(--ink-2) durchscheinen (bei Zapfkahn sichtbar
   als schwarzer Bereich). Muster analog .card__media > picture usw. */
.player-detail__photo > picture {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.player-detail__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

/* Platzhalter wenn kein Bild vorhanden */
.player-detail__photo--placeholder {
  background: linear-gradient(135deg, var(--pink) 0%, var(--pink-bright, #f0a2b4) 100%);
  display: grid;
  place-items: center;
  color: #fff;
  text-align: center;
  padding: 2rem;
}
.player-detail__num {
  font-family: var(--font-head, "Space Grotesk");
  font-weight: 700;
  font-size: clamp(5rem, 3rem + 8vw, 9rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -.04em;
}
.player-detail__ph-alias {
  font-family: var(--font-head, "Space Grotesk");
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  margin-top: .6rem;
}

.player-detail__body { min-width: 0; }
.player-detail__h2 {
  font-size: var(--fs-h2);
  margin: .6rem 0 .4rem;
  line-height: 1.05;
}
.player-detail__lead {
  color: var(--muted);
  font-family: var(--font-head, "Space Grotesk");
  font-weight: 500;
  margin: 0 0 1.6rem;
}

.player-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .55rem 1.4rem;
  margin: 1.4rem 0 0;
  font-size: .98rem;
}
.player-facts dt {
  font-family: var(--font-head, "Space Grotesk");
  font-weight: 600;
  color: var(--muted);
}
.player-facts dd { margin: 0; }

/* v3.8: Zitat-Block sitzt in der rechten Spalte, direkt unter dem Steckbrief
   (siehe .player-detail__body). Kein separater centered Block mehr —
   layoutet in der Breite der Body-Spalte, links-bündig. */
.player-quote {
  margin: clamp(1.6rem, 1rem + 1.5vw, 2.4rem) 0 0;
  padding: clamp(1.2rem, .9rem + 1.4vw, 1.8rem) clamp(1.2rem, .9rem + 1.4vw, 1.6rem);
  background: var(--paper, #f7f2f3);
  border-left: 4px solid var(--pink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
  position: relative;
}
.player-quote__mark {
  width: 30px; height: 30px;
  color: var(--pink);
  display: block;
  margin: 0 0 .5rem;
}
.player-quote blockquote {
  font-family: var(--font-head, "Space Grotesk");
  font-size: clamp(1.05rem, .85rem + .7vw, 1.35rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  quotes: "\201E" "\201C"; /* dt. „ und " als Escape, verhindert PostCSS-Unclosed-String-Error */
}
.player-quote blockquote::before { content: open-quote; }
.player-quote blockquote::after  { content: close-quote; }
.player-quote cite {
  display: block;
  margin-top: .8rem;
  font-style: normal;
  color: var(--muted);
  font-family: var(--font-head, "Space Grotesk");
  font-size: .9rem;
}

/* Error page */
.error-page { text-align: center; }
.error-page__code {
  display: block;
  font-family: var(--font-head, "Space Grotesk");
  font-weight: 700;
  font-size: clamp(5rem, 4rem + 10vw, 11rem);
  line-height: 1;
  color: var(--pink);
  letter-spacing: -.04em;
  margin-bottom: .6rem;
}