@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url('../fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   sunset.css — neues Design "re:union Sunset" (25.09.2026)
   Hell, warm, farbig. Weisse Karten mit weichen Schatten auf Cremegrund,
   Bilder als leuchtende Medienkarten, Sonnenverlauf als Akzent.
   Regeln: keine Kapseln (Radius Knoepfe 12 px, Filter 10 px), keine Dropdowns.
   Liegt als letzte Stilschicht ueber style.css + cinematic.css.
   ===================================================================== */

:root {
  --bg: #FBF6F1;
  --bg-2: #F6EEE6;
  --surface: #FFFFFF;
  --surface-2: #F7F0EA;
  --line: #EDE3DA;
  --text: #1B1417;
  --muted: #6B5D64;
  --dim: #85777E;
  --accent: #EE3A1E;
  --accent-hot: #FF8A1F;
  --on-accent: #FFFFFF;

  --sun: linear-gradient(115deg, #FF3B1F 0%, #FF5E3A 40%, #FF9A3C 100%);
  --sun-soft: linear-gradient(135deg, #FFF3EC 0%, #FFE4D6 55%, #FFD4C0 100%);
  --lila: #6D4AFF;  --lila-soft: linear-gradient(135deg, #F7F3FF 0%, #EEE7FF 55%, #E3D8FF 100%);
  --tuerkis: #0E9F98; --tuerkis-soft: linear-gradient(135deg, #EFFBF9 0%, #DDF4F1 100%);
  --gold: #D98A00;  --gold-soft: linear-gradient(135deg, #FFF8E6 0%, #FFEDC2 100%);

  --r-s: 10px; --r: 18px; --r-l: 26px;
  --sh-1: 0 1px 2px rgba(70,35,20,.06), 0 8px 24px -14px rgba(70,35,20,.22);
  --sh-2: 0 2px 6px rgba(70,35,20,.08), 0 22px 44px -18px rgba(238,58,30,.32);
  --sh-media: 0 28px 70px -30px rgba(238,58,30,.55), 0 10px 26px -16px rgba(40,10,10,.45);

  --header-h: 64px;
  --player-h: 76px;
  --tabbar-h: 0px;
  --ff-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --ff-head: 'Bricolage Grotesque', 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

/* Dunkle Inseln (Bildflaechen, Footer, Club-Modus) behalten helle Schrift */
.club, .site-footer, .cine, .cine-cta, .cine-card, .showcard__art, .track-hero, .hero {
  --bg: #120C0E; --surface: #1B1316; --surface-2: #261B1F; --line: rgba(255,255,255,.12);
  --text: #FBF5F1; --muted: #C2B5BB; --dim: #9C8F95;
}

html { background: var(--bg); scroll-padding-top: 88px; }
body {
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(255,154,60,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(109,74,255,.06), transparent 60%),
    var(--bg);
  color: var(--text);
  padding-bottom: calc(var(--player-h) + var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
}
::selection { background: #FFD4C0; color: var(--text); }
a:hover { color: var(--accent); }

/* ---------- Typografie: freundlicher, weniger Versalien ---------- */
h1, h2, h3 { color: var(--text); }
.section h2, .section__head h2, .cine-sec__title {
  text-transform: none; letter-spacing: -.025em; font-weight: 700;
  font-size: clamp(26px, 3vw, 42px); line-height: 1.05;
}
.eyebrow { color: var(--accent); font-weight: 600; }
.mono.eyebrow, .eyebrow.mono { letter-spacing: .14em; }
.meta { color: var(--muted); }
.prose, .prose p { color: var(--text); }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.lead { color: var(--text); }

/* ---------- Kopfzeile: schwebende Glasleiste ---------- */
.site-header {
  top: 10px; margin: 10px clamp(10px, 1.6vw, 24px) 0;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r); box-shadow: var(--sh-1);
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
}
.site-header__inner { height: var(--header-h); max-width: none; padding-inline: 20px; }
.brand { font-size: 20px; letter-spacing: -.02em; color: var(--text); }
.brand b { background: var(--sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { gap: 4px; }
.nav a {
  font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 15px; color: var(--muted); padding: 8px 12px; border-radius: var(--r-s);
  transition: background .15s, color .15s;
}
.nav a:hover { color: var(--text); background: rgba(238,58,30,.06); }
.nav a.is-active { color: var(--accent); background: rgba(238,58,30,.09); box-shadow: none; padding-bottom: 8px; }

.lang-switch { border: 1px solid var(--line) !important; border-radius: var(--r-s) !important; background: var(--surface) !important; padding: 3px !important; }
.lang-switch__item { border-radius: 7px !important; color: var(--muted) !important; }
.lang-switch__item.is-active { background: var(--text) !important; color: #fff !important; }
.club-link { border-radius: var(--r-s) !important; background: var(--sun) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 20px -10px rgba(238,58,30,.8); }
.club-link__dot { background: #fff !important; }
.pwa-install { border-radius: var(--r-s) !important; border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--text) !important; }
.nav-toggle { border-radius: var(--r-s); border: 1px solid var(--line) !important; background: var(--surface); color: var(--text); }
.skip-nav { border-radius: var(--r-s); }

/* Brotkrumen ruhig */
.breadcrumbs { border: 0 !important; background: transparent !important; }
.breadcrumbs__list { padding-block: 14px 0 !important; }

/* ---------- Abschnitte ---------- */
.section { border-bottom: 0; padding: clamp(48px, 7vw, 96px) 0; }
.section--alt { background: var(--sun-soft); border-radius: var(--r-l); margin-inline: clamp(10px, 1.6vw, 24px); }
.section--alt + .section { border-top: 0; }
.section__more, .cine-sec__more { color: var(--accent); font-weight: 600; }

/* ---------- Karten ---------- */
.card, .news-card, .listen-card, .release, .showdetail__tracks, .contact-card,
.chart-issue, .rating-block, .comments-block, .dj-step, .shop-card, .product {
  background: var(--surface); border: 0 !important; border-radius: var(--r); box-shadow: var(--sh-1);
}
.card, .news-card, .shop-card, .product { overflow: hidden; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.card:hover, .news-card:hover, .shop-card:hover, .product:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: transparent; }
.card img, .news-card img { border-radius: 0; }

/* ---------- Knoepfe: kraeftig, Radius 12, keine Kapseln ---------- */
.btn, .cine__play, button.btn, a.btn {
  border-radius: 12px; background: var(--sun); color: #fff; border: 0;
  font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 15px;
  padding: 12px 20px; box-shadow: 0 10px 24px -12px rgba(238,58,30,.75);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:hover, .cine__play:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.05) saturate(1.05); background: var(--sun); }
.btn--ghost, a.btn--ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.btn--ghost:hover { color: var(--accent); background: var(--surface); }
.cine .btn--ghost, .cine__next { color: #fff; }

/* Felder — re:signal (26.09.2026): transparente Felder, 1,5 px Linie, 4 px Kante */
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], textarea, select {
  background: transparent !important; color: var(--ru-paper, #f5efe6) !important;
  border: 1.5px solid var(--ru-line, rgba(245,239,230,.22)) !important; border-radius: 4px !important;
  font-family: var(--ru-f-text, Manrope, sans-serif) !important; text-transform: none !important; letter-spacing: 0 !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--ru-cyan, #00e5ff) !important; box-shadow: none !important; outline: 0 !important; }
input:user-invalid, textarea:user-invalid { border-color: var(--ru-magenta, #ff2bd6) !important; }
label { color: var(--muted); }

/* ---------- Medienkarten (Kino-Koepfe) ---------- */
.cine, .cine-cta {
  margin: 14px clamp(10px, 1.6vw, 24px) 0; border-radius: var(--r-l);
  box-shadow: var(--sh-media); color: var(--text);
}
.cine { min-height: calc(100svh - var(--header-h) - 48px); }
.cine--page { min-height: clamp(340px, 52svh, 600px); }
.cine--klein { min-height: clamp(230px, 32svh, 340px); }
.cine__media { inset: -4% 0 0 0; }
.cine__shade, .cine-cta .cine__shade {
  background:
    linear-gradient(0deg, rgba(24,8,10,.74) 0%, rgba(24,8,10,.30) 36%, rgba(24,8,10,0) 60%),
    linear-gradient(90deg, rgba(24,8,10,.38) 0%, rgba(24,8,10,0) 50%);
}
.cine__grain { display: none; }
.cine__label { color: #FFD2BC; font-weight: 600; }
.cine__title { text-transform: none; letter-spacing: -.04em; font-size: clamp(44px, 7.5vw, 112px); line-height: .95; max-width: 15ch; }
.cine--page .cine__title--page { font-size: clamp(38px, 6vw, 88px); }
.cine__hl { background: linear-gradient(115deg, #FFB18A, #FFD27A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cine__track { color: rgba(255,255,255,.92); }
.cine__track em { color: rgba(255,255,255,.7); }
.cine__meta { color: rgba(255,255,255,.78); }
.cine__play { min-height: 54px; padding: 0 26px; font-size: 16px; }
.cine__play.is-playing { background: #fff; color: var(--text); }
.cine__next { border-bottom-color: rgba(255,255,255,.4); opacity: .95; }
.cine-cta { margin-top: clamp(56px, 8vw, 110px); min-height: 56svh; }
.cine-cta .cine__shade { background: linear-gradient(90deg, rgba(24,8,10,.8) 0%, rgba(24,8,10,.35) 50%, rgba(24,8,10,0) 100%); }
.cine-cta__text { color: rgba(255,255,255,.9); }

/* Jetzt-laeuft-Karte im Start-Kopf (weiss, schwebend) */
.cine-now {
  position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px); z-index: 2;
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  width: min(380px, 42vw); padding: 12px; border-radius: var(--r);
  background: rgba(255,255,255,.86); color: #1B1417;
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.5);
}
.cine-now img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; background: #eee; }
.cine-now__k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; font-family: var(--ff-mono); }
.cine-now__t { font-weight: 700; line-height: 1.2; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cine-now__a { color: #6B5D64; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Show-Karten ---------- */
.cine-card { border: 0; border-radius: var(--r); box-shadow: var(--sh-1); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.cine-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.cine-card__shade { background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(20,8,10,.72) 100%); }
.cine-card__time { color: #FFD2BC; font-weight: 600; }
.cine-card__title { text-transform: none; letter-spacing: -.02em; }
.cine-rail { padding-top: 6px; padding-bottom: 26px; }
.cine-sec__title { position: relative; padding-bottom: 14px; margin-bottom: 0; }
.cine-sec__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 4px; border-radius: 3px; background: var(--sun); }
.cine-sec__head { margin-bottom: 24px; align-items: flex-end; }
.cine-sec--shows {
  background: var(--lila-soft); border-radius: var(--r-l); margin: clamp(48px, 7vw, 96px) clamp(10px, 1.6vw, 24px) 0;
  padding: clamp(40px, 6vw, 80px) 0;
}
.cine-sec--shows .cine-sec__title::after { background: linear-gradient(115deg, #6D4AFF, #B38CFF); }

/* Show-Raster auf der Programmseite (schedule.js) */
.showcard { border-radius: var(--r) !important; overflow: hidden; box-shadow: var(--sh-1); border: 0 !important; background: var(--surface) !important; }
.showcard:hover { box-shadow: var(--sh-2); }
.showcard__art img, .showcard img { border-radius: 0; }

/* ---------- Verlauf, Wuensche, Sendeplan ---------- */
.history { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); padding: 4px 18px; }
.history__item { border-color: var(--line) !important; }
.history__art { border-radius: 10px; }
#requests-mount > * { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); border: 0 !important; }
.schedule { gap: 16px; }
.schedule__day { background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-1); padding: 18px 18px 8px; }
.schedule__day h3 { border-bottom-color: var(--line); color: var(--accent); font-weight: 600; }
.schedule__entry { border-radius: 12px; }
.schedule__entry:hover { background: var(--bg-2); }
.schedule__entry.is-now { background: var(--sun-soft); border-left: 0; padding-left: 12px; }

/* ---------- Player: schwebende weisse Karte ---------- */
.player {
  inset: auto clamp(10px, 1.6vw, 24px) calc(12px + var(--tabbar-h) + env(safe-area-inset-bottom)) clamp(10px, 1.6vw, 24px);
  height: var(--player-h); padding: 0 !important; border: 0;
  background: rgba(255,255,255,.9) !important; border-radius: var(--r);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 20px 50px -20px rgba(70,35,20,.45), 0 0 0 1px rgba(0,0,0,.04);
  grid-template-columns: 76px 1fr auto; overflow: hidden;
}
.player__btn { width: 56px; height: 56px; margin-left: 10px; border-radius: 14px; background: var(--sun); color: #fff; box-shadow: 0 10px 22px -10px rgba(238,58,30,.8); }
.player__btn:hover { background: var(--sun); color: #fff; filter: brightness(1.06); }
.player__btn[data-state="loading"] { background: var(--dim); }
.player__art { border-radius: 10px; }
.player__title { color: var(--text); }
.player__artist { color: var(--muted); }
.player__side { border-left: 1px solid var(--line); color: var(--muted); }
.player__side button { color: var(--muted); }
.player__side button:hover { color: var(--accent); }
.player__progress { background: transparent; }
.player__bar { background: var(--sun); }
.player__viz { opacity: .18; }
.player__sleep-menu { background: var(--surface) !important; border: 0 !important; border-radius: 14px !important; box-shadow: var(--sh-2); color: var(--text); }

/* ---------- App-Leiste unten (Handy + Web-App) ---------- */
.tabbar { display: none; }

/* ---------- Footer: warme dunkle Insel ---------- */
.site-footer {
  margin: clamp(56px, 8vw, 110px) clamp(10px, 1.6vw, 24px) 0; border-radius: var(--r-l) var(--r-l) 0 0; border-top: 0;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(255,120,60,.22), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(109,74,255,.18), transparent 60%),
    #1A1114;
  color: var(--text);
}
.site-footer h3, .site-footer h4 { color: #fff; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: #FFB18A; }
.newsletter-form__input { background: rgba(255,255,255,.08) !important; color: #fff !important; border-color: rgba(255,255,255,.18) !important; }
.newsletter-form__btn { background: var(--sun) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; }

/* ---------- Programm-, Show-, News-, Charts-, Label-, Shop-, Kontaktseiten ---------- */
.showdetail__art img { border-radius: var(--r); box-shadow: var(--sh-media); }
.showdetail__slots li { background: var(--surface); border-radius: 12px; box-shadow: var(--sh-1); }
.showdetail__list li { border-color: var(--line) !important; }
.news-cat { border-radius: var(--r-s) !important; background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--muted) !important; }
.news-cat.is-active { background: var(--text) !important; color: #fff !important; border-color: var(--text) !important; }
.news-cat__n { color: inherit; opacity: .7; }
.chart-row, .bp-row, .sc-row { border-color: var(--line) !important; border-radius: 12px; }
.chart-row:hover, .bp-row:hover, .sc-row:hover { background: var(--surface) !important; box-shadow: var(--sh-1); }
blockquote { border-left: 4px solid var(--accent); background: var(--sun-soft); border-radius: 0 var(--r) var(--r) 0; padding: 16px 20px; }

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  :root { --header-h: 58px; --player-h: 68px; --tabbar-h: 64px; }
  .site-header { top: 8px; margin: 8px 8px 0; border-radius: 16px; }
  .site-header__inner { padding-inline: 14px; }
  .nav { top: calc(var(--header-h) + 12px); left: 0; right: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--sh-2); border: 0; padding: 10px; }
  .nav a { font-size: 17px; padding: 14px 14px; border-bottom: 1px solid var(--line); border-radius: 10px; }
  .nav a:last-child { border-bottom: 0; }
  .nav a.is-active { box-shadow: none; padding-left: 14px; }
  .club-link__label { display: none; }

  .cine, .cine-cta { margin: 8px 8px 0; border-radius: 22px; }
  .cine { min-height: calc(100svh - var(--header-h) - var(--tabbar-h) - var(--player-h) - 48px); }
  .cine__title { font-size: clamp(38px, 11.5vw, 60px); }
  .cine--page .cine__title--page { font-size: clamp(34px, 10vw, 52px); }
  .cine-now { position: relative; right: auto; bottom: auto; width: auto; margin: 12px 8px 0; box-shadow: var(--sh-1); background: #fff; }
  .cine-sec--shows, .section--alt { margin-inline: 8px; border-radius: 22px; }
  .site-footer { margin-inline: 8px; }

  /* Player sitzt ueber der App-Leiste */
  .player { inset: auto 8px calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom)) 8px; grid-template-columns: 64px 1fr auto; border-radius: 16px; }
  .player__btn { width: 48px; height: 48px; margin-left: 8px; border-radius: 12px; }
  .player__side { border-left: 0; gap: 10px; padding: 0 12px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; z-index: 55; left: 0; right: 0; bottom: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255,255,255,.92); border-top: 1px solid var(--line);
    -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--muted); font: 500 11px/1 var(--ff-display); background: none; border: 0; text-decoration: none;
  }
  .tabbar svg { width: 24px; height: 24px; }
  .tabbar .is-active { color: var(--accent); }
  .tabbar .is-active svg { filter: drop-shadow(0 4px 8px rgba(238,58,30,.35)); }
}
@media (max-width: 420px) {
  .lang-switch__item { padding-inline: 7px !important; }
}

/* Installierte Web-App: randlos, Statusleiste beachten */
@media (display-mode: standalone) {
  .site-header { top: calc(6px + env(safe-area-inset-top)); margin-top: calc(6px + env(safe-area-inset-top)); }
  .pwa-install { display: none !important; }
}

/* App-Leiste: "Mehr" nutzt die vorhandene Menuesteuerung (.nav-toggle) */
.tabbar .nav-toggle { width: auto; height: auto; border: 0 !important; background: none; display: flex; }
@media (max-width: 820px) {
  .site-header .nav-toggle { display: none; }
}
.cine:has([data-cine-nowcard]:not([hidden])) .cine__track { display: none; }
@media (max-width: 820px) {
  .cine-now { position: relative; right: auto; bottom: auto; width: auto; margin: 4px 0 16px; grid-template-columns: 60px 1fr; padding: 10px; }
  .cine-now img { width: 60px; height: 60px; }
}

/* ---------- Nacharbeit 1 ---------- */
.cine { min-height: calc(100svh - var(--header-h) - var(--player-h) - 72px); }
@media (min-width: 821px) { .cine { min-height: max(520px, calc(100svh - var(--header-h) - var(--player-h) - 72px)); } }
.breadcrumbs + .section, .breadcrumbs + section, .breadcrumbs + .showdetail { padding-top: clamp(24px, 3vw, 40px); }
.showdetail__h2 { font-family: var(--ff-display); text-transform: none; letter-spacing: -.02em; font-size: clamp(20px, 2vw, 26px); color: var(--text); font-weight: 700; }
.showdetail__desc { font-size: clamp(17px, 1.4vw, 20px); color: var(--text); }

/* Charts: Archiv als sichtbare Monatsreihe statt Auswahlfeld */
.chart-archive { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.chart-archive a, .chart-archive__cur { font-size: 13px; padding: 7px 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.chart-archive a:hover { color: var(--accent); border-color: rgba(238,58,30,.35); }
.chart-archive__cur { background: var(--text); color: #fff; border-color: var(--text); font-weight: 600; }
.chart-table { background: var(--surface) !important; border-radius: var(--r) !important; box-shadow: var(--sh-1); }
.chart-issue { border-bottom: 0 !important; background: transparent !important; box-shadow: none !important; }
.chart-row__cover, .chart-row__cover img { border-radius: 8px; }

/* ---------- Nacharbeit 2 ---------- */
.showcard { gap: 4px; padding-bottom: 14px; }
.showcard__art { border: 0 !important; border-radius: 0; }
.showcard__title, .showcard__when { padding-inline: 14px; }
.showcard__title { font-size: 15px; font-weight: 700; margin-top: 8px; }
.showcard__when { font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.showcard.is-now { box-shadow: 0 0 0 2px var(--accent), var(--sh-2); }
.showcard__now { border-radius: 8px; background: var(--sun); font-family: var(--ff-display); letter-spacing: .02em; font-weight: 600; }
.schedule__day h3 { font-family: var(--ff-display); text-transform: none; letter-spacing: -.02em; font-size: 22px; color: var(--text); }
.schedule__time { color: var(--accent); font-weight: 600; }
.schedule__cover { border-radius: 10px; }
.cine-card__time { font-family: var(--ff-display); letter-spacing: .02em; text-transform: none; font-size: 12px; }
.section h2.mono, h2.mono { font-family: var(--ff-display); }
@media (max-width: 820px) {
  .showgrid { gap: 12px; }
  .showcard__title, .showcard__when { padding-inline: 10px; }
  .showcard__title { font-size: 14px; }
  .cine-sec__head { flex-wrap: wrap; gap: 8px 16px; }
}
.news-divider h2 { font-family: var(--ff-display) !important; text-transform: none !important; letter-spacing: -.025em !important; font-size: clamp(26px, 3vw, 40px) !important; color: var(--text) !important; }

/* ---------- Nacharbeit 3: DJ-Schritte, Auswahl-Kacheln, FAQ, Formulare ---------- */
.how-grid { border: 0 !important; gap: 14px !important; }
.how-step { background: var(--surface); border: 0 !important; border-radius: var(--r); box-shadow: var(--sh-1); }
.how-step__num { font-family: var(--ff-display) !important; font-weight: 700; font-size: 34px !important; letter-spacing: -.03em; background: var(--sun); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.how-step h3 { text-transform: none !important; letter-spacing: -.01em; font-size: 19px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip span { border-radius: 10px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; color: var(--text) !important;
  font-family: var(--ff-display) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; }
.chip input:checked + span { background: var(--text) !important; color: #fff !important; border-color: var(--text) !important; }
.chip:hover span { border-color: rgba(238,58,30,.4) !important; }
.faq__item { background: var(--surface) !important; border: 0 !important; border-radius: 14px !important; box-shadow: var(--sh-1); }
.faq__item[open] { box-shadow: var(--sh-2); }
.faq__q { font-weight: 600; }
.form__row label, .form label { font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.dj-cta__visual { border: 0 !important; border-radius: var(--r); box-shadow: var(--sh-1); }
.dj-cta__words span { border-radius: 8px !important; }
@media (max-width: 820px) { .how-grid { grid-template-columns: 1fr !important; } }

/* ---------- Nacharbeit 4: Menue auf dem Handy ---------- */
@media (max-width: 820px) {
  body.nav-open .player { opacity: 0; pointer-events: none; transform: translateY(12px); }
  .player { transition: opacity .2s, transform .2s; }
  .nav { max-height: calc(100svh - var(--header-h) - var(--tabbar-h) - 40px); overflow-y: auto; }
  .nav a { padding: 12px 14px; font-size: 17px; }
  .pwa-install { font-family: var(--ff-display) !important; text-transform: none !important; letter-spacing: 0 !important; padding: 8px 10px !important; font-size: 13px !important; }
}

/* ---------- Ueberschriften-Schrift (Bricolage Grotesque) ---------- */
h1, h2, .cine__title, .cine-sec__title, .section h2, .section__head h2, .cine-now__t, .showcard__title, .cine-card__title, .how-step h3, .news-divider h2, .schedule__day h3, .brand {
  font-family: var(--ff-head); font-optical-sizing: auto;
}
.cine__title { font-weight: 800; letter-spacing: -.045em; }
.cine-sec__title, .section h2 { font-weight: 800; letter-spacing: -.035em; }

/* =====================================================================
   KERN-AUSBAU "Mega Radio" (25.09.2026 23:10)
   ===================================================================== */

/* On-Air-Anzeige in der Kopfzeile */
.onair-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; padding: 7px 12px 7px 10px;
  border-radius: 10px; background: var(--sun-soft); color: var(--text); font-size: 13px; font-weight: 600;
  max-width: 260px; min-width: 0; white-space: nowrap; transition: box-shadow .2s, transform .2s;
}
.onair-badge:hover { color: var(--text); box-shadow: var(--sh-1); transform: translateY(-1px); }
.onair-badge__k { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.onair-badge__show { overflow: hidden; text-overflow: ellipsis; }
.onair-badge__eq, .player-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.onair-badge__eq i, .player-eq i { display: block; width: 3px; height: 40%; border-radius: 2px; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  body[data-playing="true"] .onair-badge__eq i, .onair-badge__eq i { animation: rr-eq 1.1s ease-in-out infinite; }
  .onair-badge__eq i:nth-child(2) { animation-delay: -.35s; animation-duration: .9s; }
  .onair-badge__eq i:nth-child(3) { animation-delay: -.7s; animation-duration: 1.3s; }
  body:not([data-playing="true"]) .onair-badge__eq i { animation-play-state: paused; }
}
@keyframes rr-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (max-width: 1180px) { .onair-badge__show { display: none; } }
@media (max-width: 820px) { .onair-badge { display: none; } }

/* Player: hochwertiger — Cover groesser, Titel in Kopfschrift, Pegel beim Spielen */
.player__art { width: 52px; height: 52px; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45); }
.player__title { font-family: var(--ff-head); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.player__artist { font-family: var(--ff-display); text-transform: none; letter-spacing: 0; font-size: 13px; }
.player__listeners { font-family: var(--ff-display); letter-spacing: 0; font-weight: 600; color: var(--text); }
.player__listeners::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(238,58,30,.15); }
body[data-playing="true"] .player__btn { background: var(--text); box-shadow: 0 10px 22px -10px rgba(27,20,23,.6); }
.player__progress { left: 16px; right: 16px; bottom: 6px; height: 3px; border-radius: 3px; background: rgba(0,0,0,.05); }
.player__bar { border-radius: 3px; }

/* App-Leiste: grosser Play-Knopf in der Mitte */
.tabbar__play { position: relative; }
.tabbar__playbtn {
  display: grid; place-items: center; width: 56px; height: 56px; margin-top: -22px; border-radius: 18px;
  background: var(--sun); color: #fff; box-shadow: 0 12px 26px -10px rgba(238,58,30,.85), 0 0 0 5px var(--bg);
  transition: transform .15s, background .2s;
}
.tabbar__play:active .tabbar__playbtn { transform: scale(.94); }
.tabbar__playbtn svg { width: 26px; height: 26px; }
.tabbar__playbtn .i-pause { display: none; }
body[data-playing="true"] .tabbar__playbtn { background: var(--text); box-shadow: 0 12px 26px -10px rgba(27,20,23,.6), 0 0 0 5px var(--bg); }
body[data-playing="true"] .tabbar__playbtn .i-play { display: none; }
body[data-playing="true"] .tabbar__playbtn .i-pause { display: block; }
@media (max-width: 820px) {
  /* Mit Play in der App-Leiste reicht im schwebenden Player die Info — Knopf bleibt, aber kleiner */
  .player__btn { width: 44px; height: 44px; border-radius: 12px; }
}

/* Footer: grosser Schriftzug */
.site-footer::before {
  content: "re:union"; display: block; font-family: var(--ff-head); font-weight: 800; letter-spacing: -.06em; line-height: .8;
  font-size: clamp(72px, 16vw, 240px); padding: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 48px) 0;
  background: linear-gradient(115deg, #FF6A3D 0%, #FFB35C 45%, #B38CFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: .9; pointer-events: none;
}
.site-footer h3 { font-family: var(--ff-head); text-transform: none; letter-spacing: -.01em; font-size: 15px; }
.site-footer__bottom { border-top-color: rgba(255,255,255,.1) !important; }
.site-footer::before { padding-bottom: clamp(20px, 3vw, 40px); }
@media (max-width: 820px) {
  .player { grid-template-columns: 0 1fr auto; height: 60px; }
  .player__btn { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
  .player__meta { padding-left: 8px; }
  :root { --player-h: 60px; }
}

/* ---------- Twitch-Live-Hinweis (nur bei echtem Live) ---------- */
.twitch-live {
  position: fixed; z-index: 56; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--player-h) + var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; max-width: min(720px, calc(100vw - 24px));
  padding: 12px 16px; border-radius: 14px; color: #fff; text-decoration: none;
  background: linear-gradient(115deg, #6D4AFF 0%, #9146FF 55%, #EE3A1E 140%);
  box-shadow: 0 18px 40px -16px rgba(109,74,255,.7);
}
.twitch-live[hidden] { display: none; }
.twitch-live:hover { color: #fff; transform: translateX(-50%) translateY(-2px); }
.twitch-live strong { font-family: var(--ff-head); font-weight: 800; white-space: nowrap; }
.twitch-live__t { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.twitch-live__cta { margin-left: auto; font-weight: 600; white-space: nowrap; padding-left: 8px; }
.twitch-live__dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; flex: none; box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
@media (prefers-reduced-motion: no-preference) { .twitch-live__dot { animation: rr-puls 1.6s ease-out infinite; } }
@keyframes rr-puls { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
.onair-badge.is-twitch { background: linear-gradient(115deg, #EEE7FF, #E3D8FF); }
.onair-badge.is-twitch .onair-badge__k { color: #6D4AFF; }
.onair-badge.is-twitch .onair-badge__eq i { background: #6D4AFF; }
@media (max-width: 820px) { .twitch-live__t { display: none; } .twitch-live { width: calc(100vw - 16px); } }

/* ---------- Twitch-Live: Hinweis mit Knopf + Live-Fenster (26.09.2026) ---------- */
.twitch-live { cursor: default; }
.twitch-live__btn { margin-left: auto; padding: 8px 12px; border-radius: 10px; border: 0; background: #fff; color: #5B2BD6; font-weight: 700; cursor: pointer; white-space: nowrap; }
.twitch-live__btn:hover { background: #F1EBFF; }
.twitch-live__cta { margin-left: 0; color: #fff; text-decoration: none; opacity: .9; }
.twitch-live__cta:hover { color: #fff; opacity: 1; text-decoration: underline; }
.twitch-fenster {
  position: fixed; z-index: 57; right: clamp(10px, 1.6vw, 24px);
  bottom: calc(var(--player-h) + var(--tabbar-h) + 24px + env(safe-area-inset-bottom));
  width: min(440px, calc(100vw - 20px)); border-radius: 16px; overflow: hidden;
  background: #120C22; color: #fff; box-shadow: 0 24px 60px -20px rgba(40,20,90,.7);
}
.twitch-fenster[hidden] { display: none; }
.twitch-fenster__kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(115deg, #6D4AFF, #9146FF); }
.twitch-fenster__kopf strong { font-family: var(--ff-head); font-weight: 800; font-size: 15px; margin-right: auto; }
.twitch-fenster__kopf button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.twitch-fenster__kopf button:hover { background: rgba(255,255,255,.3); }
.twitch-fenster__bild { position: relative; aspect-ratio: 16 / 9; background: #000; }
.twitch-fenster__bild img, .twitch-fenster__bild iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.twitch-fenster__bild.is-geladen img, .twitch-fenster__bild.is-geladen .twitch-fenster__vorhang { display: none; }
.twitch-fenster__vorhang { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; background: linear-gradient(180deg, rgba(18,12,34,.25), rgba(18,12,34,.8)); }
.twitch-fenster__laden { padding: 12px 18px; border-radius: 12px; border: 0; background: #fff; color: #5B2BD6; font-weight: 800; font-size: 15px; cursor: pointer; }
.twitch-fenster__vorhang p { margin: 0; font-size: 11.5px; line-height: 1.4; opacity: .8; max-width: 34ch; }
.twitch-fenster__fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; }
.twitch-fenster__fuss button { border: 0; background: none; color: #fff; font-weight: 600; cursor: pointer; padding: 0; }
.twitch-fenster__fuss a { color: #CDB8FF; text-decoration: none; }
.twitch-fenster.is-klein .twitch-fenster__bild, .twitch-fenster.is-klein .twitch-fenster__fuss { display: none; }
@media (max-width: 820px) {
  .twitch-fenster { left: 8px; right: 8px; width: auto; bottom: calc(var(--player-h) + var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); }
  .twitch-live { gap: 8px; padding: 10px 12px; }
  .twitch-live strong { font-size: 14px; white-space: normal; }
  .twitch-live__cta { display: none; }
}

/* Live-DJ on Air (Twitch-Uebernahme) */
.onair-badge.is-live-dj { background: linear-gradient(115deg, #FFE1D6, #FFD0E6); }
.onair-badge.is-live-dj .onair-badge__k { color: #D0103A; }
body[data-live-dj="on"] .player__title::before { content: "● "; color: #E0103A; }
/* Start-Kopf waehrend Live-DJ: Label rot pulsierend */
.cine.is-live-dj [data-cine-label] { color: #fff; background: #E0103A; padding: 4px 10px; border-radius: 8px; letter-spacing: .18em; }
@media (prefers-reduced-motion: no-preference) { .cine.is-live-dj [data-cine-label] { animation: rr-livepuls 1.8s ease-in-out infinite; } }
@keyframes rr-livepuls { 50% { box-shadow: 0 0 0 8px rgba(224,16,58,.18); } }
/* Zeitleiste: laufender Block waehrend Live-DJ */
.epg__slot.is-livedj .epg__item { border-color: #E0103A !important; box-shadow: 0 0 0 2px rgba(224,16,58,.25), 0 18px 40px -20px rgba(224,16,58,.55) !important; }
.epg__slot.is-livedj .epg__time b { color: #E0103A; }
.epg__slot.is-livedj .epg__title { font-weight: 800; }
.epg__statt { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }