/* ==========================================================================
   YOGI'S RADIO · kunterbuntes Kinderradio-Design
   Himmelblau · Sonnengelb · Wiesengrün · Koralle · Lila · Cremeweiß
   Schrift: Fredoka (Display) · Nunito (Text), selbst gehostet
   ========================================================================== */

@font-face { font-family: "Fredoka"; font-weight: 300 700; font-display: swap; src: url("../fonts/fredoka-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; }
@font-face { font-family: "Fredoka"; font-weight: 300 700; font-display: swap; src: url("../fonts/fredoka-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-weight: 300 900; font-display: swap; src: url("../fonts/nunito-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; }
@font-face { font-family: "Nunito"; font-weight: 300 900; font-display: swap; src: url("../fonts/nunito-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 300 900; font-display: swap; src: url("../fonts/nunito-latin-italic.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --sky: #4fc3f7; --sky-deep: #0288d1; --sky-light: #b3e5fc;
  --sun: #ffd54f; --sun-deep: #ffb300;
  --grass: #7ed957; --grass-deep: #43a047;
  --coral: #ff6b6b; --coral-deep: #e53935;
  --lila: #9b5de5; --lila-deep: #6a1b9a;
  --pink: #ff8fab; --mint: #80ffdb; --orange: #ff9f43;
  --cream: #fff8e7; --paper: #ffffff; --ink: #2b2d42; --ink-soft: #4a4e69; --muted: #6c7086;
  --line: #2b2d42;
  --font-display: "Fredoka", "Segoe UI Variable Display", system-ui, sans-serif;
  --font-text: "Nunito", "Segoe UI", system-ui, sans-serif;
  --radius: 28px; --radius-sm: 16px;
  --shadow-pop: 6px 6px 0 var(--ink);   /* dicker Comic-Schatten */
  --shadow-soft: 0 18px 40px -18px rgba(43,45,66,.35);
  --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --header-h: 84px;
  --wrap: min(1180px, 92vw);
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-text); font-size: clamp(16px, .5vw + 14px, 18px); line-height: 1.55; color: var(--ink);
  background: var(--cream);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(255,213,79,.45), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(79,195,247,.35), transparent 30%),
    radial-gradient(circle at 70% 90%, rgba(126,217,87,.3), transparent 30%),
    radial-gradient(circle at 15% 75%, rgba(255,143,171,.28), transparent 28%);
  background-attachment: fixed; min-height: 100dvh; overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--sun); }
:focus-visible { outline: 3px solid var(--sky-deep); outline-offset: 3px; border-radius: 8px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.kicker { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--lila-deep); background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: .25rem .9rem; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg); }
.muted { color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding-inline: max(4vw, calc((100vw - var(--wrap)) / 2));
  background: rgba(255,248,231,.85); backdrop-filter: blur(14px); border-bottom: 3px solid var(--ink);
}
.brand { display: flex; align-items: center; gap: .8rem; }
.brand-mark { width: 54px; height: 54px; border-radius: 18px; background: var(--sun); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; transform: rotate(-4deg); transition: transform .4s var(--ease-spring); }
.brand:hover .brand-mark { transform: rotate(6deg) scale(1.05); }
.brand-mark svg { width: 36px; height: 36px; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--ink); }
.brand-text small { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-deep); margin-top: .2rem; }

.site-nav { display: flex; justify-content: center; gap: .3rem; flex-wrap: nowrap; }
.site-nav a { white-space: nowrap; padding: .5rem .95rem; border-radius: 999px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink-soft); border: 3px solid transparent; transition: .2s; }
.site-nav a:hover { background: #fff; border-color: var(--ink); transform: translateY(-2px) rotate(-1deg); }
.site-nav a[aria-current="page"] { background: var(--sun); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.site-nav a:nth-child(2):hover { background: var(--sky-light); } .site-nav a:nth-child(3):hover { background: #e1bee7; } .site-nav a:nth-child(4):hover { background: #dcedc8; } .site-nav a:nth-child(5):hover { background: #ffe0b2; }
.header-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; }

/* Player */
.player { display: flex; align-items: center; gap: .7rem; padding: .3rem .6rem .3rem .3rem; border-radius: 999px; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); max-width: 420px; }
.play-btn { --size: 54px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; background: var(--coral); color: #fff; border: 3px solid var(--ink); transition: transform .3s var(--ease-spring), background .3s; }
.play-btn:hover { transform: scale(1.08) rotate(-6deg); }
.play-btn:active { transform: scale(.95); }
.play-btn svg { width: 24px; height: 24px; }
.play-btn .ico-pause, .play-btn .ico-play { position: absolute; transition: opacity .2s, transform .3s var(--ease-spring); }
.play-btn .ico-pause { opacity: 0; transform: scale(.6); }
.player[data-state="playing"] .play-btn { background: var(--grass-deep); }
.player[data-state="playing"] .play-btn .ico-pause { opacity: 1; transform: scale(1); }
.player[data-state="playing"] .play-btn .ico-play { opacity: 0; transform: scale(.6); }
.play-btn::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px dashed var(--coral); opacity: 0; }
.player[data-state="playing"] .play-btn::before { opacity: .9; border-color: var(--grass-deep); animation: spin 6s linear infinite; }
.player[data-state="connecting"] .play-btn::before, .player[data-state="intro"] .play-btn::before, .player[data-state="reconnecting"] .play-btn::before { opacity: 1; border-style: solid; border-color: transparent; border-top-color: var(--sky-deep); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.player-cover { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ink); object-fit: cover; opacity: 0; transition: opacity .4s; flex: none; }
.player-cover.ist-da { opacity: 1; }
.player-text { min-width: 0; line-height: 1.15; }
.player-text .onair { display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.player-text .onair .dot { width: 8px; height: 8px; border-radius: 50%; background: #cfd8dc; }
.player[data-state="playing"] .onair { color: var(--coral-deep); }
.player[data-state="playing"] .onair .dot { background: var(--coral); animation: dot 1.4s ease-out infinite; }
@keyframes dot { 0% { box-shadow: 0 0 0 0 rgba(255,107,107,.6); } 100% { box-shadow: 0 0 0 9px transparent; } }
.player-title { font-weight: 800; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 230px; }
.player-status { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-label { display: inline-flex; flex: none; margin-left: .2rem; }
.ai-label img { height: 30px; width: auto; border-radius: 6px; }

@media (max-width: 1240px) { .player-text { display: none; } .ai-label { display: none; } }
@media (max-width: 1040px) {
  .site-header { gap: .6rem; }
  .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49; flex-direction: column; gap: .3rem; padding: 1rem 5vw 1.4rem; background: rgba(255,248,231,.97); border-bottom: 3px solid var(--ink); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .25s var(--ease-out); }
  .site-nav.offen { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav a { font-size: 1.2rem; padding: .8rem 1rem; }
  .nav-toggle { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
  .brand-text small { display: none; }
}
@media (max-width: 560px) { .site-header { padding-inline: 3vw; gap: .4rem; } .brand-text { display: none; } .player-cover { display: none; } .play-btn { --size: 48px; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.5rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; background: var(--sun); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow-pop); transition: transform .3s var(--ease-spring), box-shadow .2s; }
.btn:hover { transform: translate(-2px,-2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.btn.coral { background: var(--coral); color: #fff; }
.btn.sky { background: var(--sky); }
.btn.grass { background: var(--grass); }
.btn.big { padding: 1.2rem 2rem; font-size: 1.4rem; }
.btn svg { width: 1.2em; height: 1.2em; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: calc(100svh - var(--header-h)); overflow: clip; display: grid; align-items: center; isolation: isolate; }
.hero-sky { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #8fd8ff 0%, #c8ecff 55%, var(--cream) 100%); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.sonne { position: absolute; top: 6%; right: 8%; width: clamp(110px, 14vw, 200px); aspect-ratio: 1; z-index: -1; animation: sonne 24s linear infinite; }
.sonne .strahlen { position: absolute; inset: -30%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,213,79,.55) 0 10deg, transparent 10deg 22.5deg); animation: spin 40s linear infinite; }
.sonne .kern { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, var(--sun) 60%, var(--sun-deep)); border: 4px solid var(--ink); }
.sonne .gesicht { position: absolute; inset: 0; }
@keyframes sonne { 0%,100% { transform: translateY(0) } 50% { transform: translateY(10px) } }
.wolke { position: absolute; z-index: -1; width: 160px; height: 60px; background: #fff; border-radius: 60px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(43,45,66,.15); animation: wolke linear infinite; }
.wolke::before, .wolke::after { content: ""; position: absolute; background: #fff; border: 3px solid var(--ink); border-radius: 50%; }
.wolke::before { width: 70px; height: 70px; left: 25px; top: -35px; border-bottom: 0; }
.wolke::after { width: 50px; height: 50px; left: 80px; top: -22px; border-bottom: 0; }
.wolke.w1 { top: 14%; left: -200px; animation-duration: 70s; }
.wolke.w2 { top: 32%; left: -260px; animation-duration: 95s; animation-delay: -40s; transform: scale(.7); }
.wolke.w3 { top: 8%; left: -220px; animation-duration: 120s; animation-delay: -70s; transform: scale(.55); }
@keyframes wolke { from { translate: 0 0; } to { translate: calc(100vw + 300px) 0; } }
.huegel { position: absolute; left: -5%; right: -5%; bottom: -2px; height: 26%; z-index: -1; }

.hero-inner { position: relative; width: var(--wrap); margin-inline: auto; padding: clamp(2rem, 6vh, 4rem) 0 clamp(4rem, 10vh, 7rem); display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero-title { font-size: clamp(2.8rem, 8vw, 6.8rem); line-height: .98; margin-top: 1rem; }
.hero-title .zeile { display: block; overflow: hidden; }
.hero-title .zeile > span { display: inline-block; animation: zeile .8s var(--ease-spring) both; }
.hero-title .zeile:nth-child(2) > span { animation-delay: .1s; }
.hero-title .zeile:nth-child(3) > span { animation-delay: .2s; }
@keyframes zeile { from { transform: translateY(110%) rotate(3deg); opacity: 0; } }
.hero-title .bunt { background: linear-gradient(90deg, var(--coral), var(--orange), var(--sun-deep), var(--grass-deep), var(--sky-deep), var(--lila)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-title .wackel { display: inline-block; animation: wackel 3s ease-in-out infinite; }
@keyframes wackel { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.hero-lead { margin-top: 1.2rem; max-width: 42ch; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 600; color: var(--ink-soft); animation: rise .9s .3s var(--ease-out) both; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; animation: rise .9s .4s var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* Plattenspieler-Karte */
.now-card { justify-self: end; width: min(100%, 420px); background: #fff; border: 4px solid var(--ink); border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow-pop); position: relative; animation: rise 1s .3s var(--ease-spring) both; transform: rotate(1.5deg); }
.now-card .sticker { position: absolute; top: -18px; left: 22px; background: var(--coral); color: #fff; font-family: var(--font-display); font-weight: 700; padding: .25rem .8rem; border-radius: 999px; border: 3px solid var(--ink); transform: rotate(-4deg); }
.platte { position: relative; aspect-ratio: 1; margin: 1rem auto .8rem; width: min(100%, 260px); }
.platte .vinyl { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, #2b2d42 0 5px, #3d405b 5px 7px); border: 4px solid var(--ink); animation: spin 6s linear infinite; animation-play-state: paused; }
.platte.dreht .vinyl { animation-play-state: running; }
.platte .cover { position: absolute; inset: 18%; border-radius: 50%; overflow: hidden; border: 4px solid var(--ink); background: var(--sun); display: grid; place-items: center; }
.platte .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.platte .cover img.aktiv { opacity: 1; }
.platte .cover svg { width: 45%; height: 45%; color: var(--ink); }
.platte .loch { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); z-index: 2; }
.platte .arm { position: absolute; right: -6%; top: -4%; width: 28%; height: 60%; transform-origin: 85% 10%; transform: rotate(-25deg); transition: transform .8s var(--ease-spring); }
.platte.dreht .arm { transform: rotate(0deg); }
.now-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; text-align: center; }
.now-artist { text-align: center; color: var(--muted); font-weight: 700; margin-top: .2rem; }
.now-progress { height: 10px; background: #eee; border: 3px solid var(--ink); border-radius: 999px; margin-top: .9rem; overflow: hidden; }
.now-progress > i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--coral) 0 12px, var(--sun) 12px 24px, var(--grass) 24px 36px, var(--sky) 36px 48px); transition: width 1s linear; }
.now-next { margin-top: .6rem; font-size: .85rem; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-show { display: flex; align-items: center; gap: .7rem; margin-top: 1rem; padding-top: .9rem; border-top: 3px dashed #e0e0e0; font-size: .95rem; }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; } .now-card { justify-self: center; transform: none; } }

/* ---------- Abschnitte ---------- */
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-top: .7rem; }
.section-head h2 .bunt { color: var(--coral-deep); }
.section-head .mehr { white-space: nowrap; font-family: var(--font-display); font-weight: 700; color: var(--sky-deep); display: inline-flex; align-items: center; gap: .4rem; }
.section-head .mehr svg { width: 1em; height: 1em; transition: transform .3s var(--ease-spring); }
.section-head .mehr:hover svg { transform: translateX(5px); }
@media (max-width: 640px) { .section-head { flex-direction: column; align-items: start; } }

.reveal { opacity: 0; transform: translateY(24px) rotate(.5deg); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.sichtbar { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .reveal { opacity: 1; transform: none; transition: none; animation: reveal both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  @keyframes reveal { from { opacity: 0; transform: translateY(24px) rotate(.5deg); } to { opacity: 1; transform: none; } }
}

.card { background: #fff; border: 3px solid var(--ink); border-radius: var(--radius); padding: 1.2rem; position: relative; box-shadow: 5px 5px 0 var(--ink); transition: transform .35s var(--ease-spring), box-shadow .2s; }
.card:hover { transform: translate(-2px,-3px) rotate(-.6deg); box-shadow: 8px 9px 0 var(--ink); }
.card.gelb { background: #fff6cc; } .card.blau { background: #e3f6ff; } .card.gruen { background: #e8f8dd; } .card.rosa { background: #ffe3ea; } .card.lila { background: #f1e4ff; } .card.orange { background: #ffeccf; }

/* Avatare (Figuren) */
.avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; overflow: hidden; position: relative; background: var(--sun); border: 3px solid var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.2rem; }
.avatar img, .avatar svg { width: 100%; height: 100%; object-fit: cover; }
.avatar.gross { width: 100%; height: auto; aspect-ratio: 1; border-radius: var(--radius); font-size: 4rem; border-width: 4px; }
.avatar.yogi { background: var(--sky-light); } .avatar.baba { background: #ffe0b2; }
.avatars { display: flex; }
.avatars .avatar { margin-left: -12px; }
.avatars .avatar:first-child { margin-left: 0; }

/* Timeline */
.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 290px); gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .8rem .4rem 1.6rem; margin-inline: -.4rem; scrollbar-width: thin; }
.timeline .show { scroll-snap-align: start; display: flex; flex-direction: column; gap: .8rem; min-height: 230px; }
.timeline .show.laeuft { background: #fff6cc; border-color: var(--coral-deep); }
.timeline .show.vorbei { opacity: .55; }
.show-zeit { display: flex; justify-content: space-between; align-items: center; font-weight: 900; font-size: .85rem; color: var(--muted); }
.tag-chip { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; background: #fff; border: 2px solid var(--ink); font-weight: 900; color: var(--ink); }
.show.laeuft .tag-chip { background: var(--coral); color: #fff; }
.show-name { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.05; }
.show-hosts { display: flex; align-items: center; gap: .6rem; margin-top: auto; }
.show-hosts .avatar { width: 44px; height: 44px; font-size: 1rem; }
.show-hosts .namen { font-weight: 800; font-size: .95rem; }
.show-hosts .namen small { display: block; font-weight: 600; color: var(--muted); font-size: .75rem; }
.show-meta { font-size: .8rem; color: var(--muted); font-weight: 700; }

/* Wochenplan */
.woche-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.woche-tabs button, .playlist-tabs button, .themen-filter button { padding: .55rem 1.05rem; border-radius: 999px; font-family: var(--font-display); font-weight: 700; background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .2s; }
.woche-tabs button:hover, .playlist-tabs button:hover, .themen-filter button:hover { transform: translate(-1px,-1px); }
.woche-tabs button[aria-selected="true"], .playlist-tabs button[aria-selected="true"], .themen-filter button[aria-pressed="true"] { background: var(--sun); }
.woche-liste { display: grid; gap: .8rem; }
.woche-zeile { display: grid; grid-template-columns: 110px 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: #fff; border: 3px solid var(--ink); }
.woche-zeile.laeuft { background: #fff6cc; border-color: var(--coral-deep); }
.woche-zeile .zeit { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; }
.woche-zeile .zeit small { display: block; font-size: .75rem; color: var(--muted); font-weight: 700; }
.woche-zeile .name { font-weight: 800; font-size: 1.1rem; }
.woche-zeile .name small { display: block; font-weight: 600; color: var(--muted); font-size: .82rem; }
@media (max-width: 600px) { .woche-zeile { grid-template-columns: 80px 1fr; } .woche-zeile .show-hosts { grid-column: 1 / -1; } }

/* Figuren-Karten */
.hosts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
.host-card { display: flex; flex-direction: column; gap: .9rem; }
.host-card .name { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; }
.host-card .rolle { font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-deep); }
.host-card .text { color: var(--ink-soft); font-size: .98rem; font-weight: 600; }
.host-card .shows { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: auto; }
.chip { font-size: .75rem; font-weight: 800; padding: .3rem .7rem; border-radius: 999px; background: #fff; border: 2px solid var(--ink); }

/* Themen + Clips */
.themen-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.themen-grid { columns: 3 300px; column-gap: 1.2rem; }
.thema { break-inside: avoid; margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.thema-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .78rem; color: var(--muted); font-weight: 800; }
.typ { display: inline-flex; align-items: center; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; padding: .25rem .65rem; border-radius: 999px; border: 2px solid var(--ink); }
.typ[data-typ="news"] { background: var(--sky-light); } .typ[data-typ="localnews"] { background: #e8f8dd; } .typ[data-typ="weather"] { background: #fff6cc; } .typ[data-typ="traffic"] { background: #ffe0b2; }
.typ[data-typ="feature"], .typ[data-typ="opener"], .typ[data-typ="outro"], .typ[data-typ="fun"] { background: #f1e4ff; }
.thema-text { font-size: .98rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.thema.offen .thema-text { -webkit-line-clamp: unset; line-clamp: unset; }
.thema-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .82rem; color: var(--muted); font-weight: 700; }
.thema-foot .sprecher { display: flex; align-items: center; gap: .4rem; }
.thema-foot .sprecher .avatar { width: 26px; height: 26px; font-size: .7rem; border-width: 2px; }
.mini-play { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem .4rem .6rem; border-radius: 999px; background: var(--sun); border: 2px solid var(--ink); font-weight: 900; font-size: .82rem; transition: transform .3s var(--ease-spring); }
.mini-play:hover { transform: scale(1.06) rotate(-2deg); }
.mini-play svg { width: 16px; height: 16px; }
.mini-play[aria-pressed="true"] { background: var(--grass); }
.clips { display: grid; gap: .8rem; }
.clip { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; padding: .8rem 1rem; border-radius: var(--radius-sm); background: #fff; border: 3px solid var(--ink); transition: transform .2s; }
.clip.spielt { background: #e8f8dd; }
.clip-btn { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); border: 3px solid var(--ink); position: relative; transition: transform .3s var(--ease-spring); }
.clip-btn:hover { transform: scale(1.08); }
.clip-btn svg { width: 22px; height: 22px; position: absolute; transition: opacity .2s; }
.clip-btn .ico-pause { opacity: 0; }
.clip.spielt .clip-btn { background: var(--grass); }
.clip.spielt .clip-btn .ico-pause { opacity: 1; } .clip.spielt .clip-btn .ico-play { opacity: 0; }
.clip-text { min-width: 0; }
.clip-text .t { font-size: .98rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clip.spielt .clip-text .t, .clip.offen .clip-text .t { -webkit-line-clamp: unset; line-clamp: unset; }
.clip-text .m { display: flex; gap: .6rem; align-items: center; font-size: .78rem; color: var(--muted); margin-top: .35rem; flex-wrap: wrap; font-weight: 700; }
.clip-text .m .sprecher { display: inline-flex; align-items: center; gap: .35rem; }
.clip-text .m .avatar { width: 22px; height: 22px; font-size: .6rem; border-width: 2px; }
.clip-bar { height: 8px; background: #eee; border: 2px solid var(--ink); border-radius: 999px; margin-top: .5rem; overflow: hidden; }
.clip-bar > i { display: block; height: 100%; width: 0; background: var(--grass); }
.clip-zeit { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--muted); white-space: nowrap; }
.clip-zeit small { display: block; font-size: .72rem; text-align: right; }

/* Playlist */
.playlist { display: grid; gap: .6rem; }
.playlist-tabs { display: flex; gap: .4rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.song { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center; padding: .6rem .9rem; border-radius: var(--radius-sm); border: 3px solid transparent; transition: .2s; }
.song:hover { background: #fff; border-color: var(--ink); }
.song.jetzt { background: #fff6cc; border-color: var(--coral-deep); }
.song-cover { width: 64px; height: 64px; border-radius: 14px; border: 3px solid var(--ink); object-fit: cover; background: var(--sky-light); }
.song-cover.leer { display: grid; place-items: center; }
.song-cover.leer svg { width: 26px; height: 26px; }
.song-text .t { font-weight: 900; font-size: 1.05rem; }
.song-text .a { color: var(--muted); font-weight: 700; font-size: .9rem; }
.song-zeit { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.song-zeit small { display: block; font-size: .7rem; text-align: right; }
.cover-fluss { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); margin-block: 1.5rem; }
.cover-fluss .spur { display: flex; gap: 1rem; width: max-content; animation: fluss 60s linear infinite; }
.cover-fluss:hover .spur { animation-play-state: paused; }
.cover-fluss img { width: 110px; height: 110px; border-radius: 20px; border: 3px solid var(--ink); object-fit: cover; flex: none; transition: transform .4s var(--ease-spring); }
.cover-fluss img:nth-child(odd) { transform: rotate(-3deg); } .cover-fluss img:nth-child(even) { transform: rotate(3deg); }
.cover-fluss img:hover { transform: scale(1.1) rotate(0); }
@keyframes fluss { to { transform: translateX(-50%); } }

/* KI-Hinweis (Sticker-Kasten, kein Popup) */
.ki-box { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: #fff; border: 4px dashed var(--lila); box-shadow: var(--shadow-soft); }
.ki-box .robo { width: 86px; height: 86px; flex: none; animation: wackel 4s ease-in-out infinite; }
.ki-box h3 { font-size: 1.5rem; }
.ki-box p { color: var(--ink-soft); font-weight: 600; margin-top: .3rem; }
@media (max-width: 760px) { .ki-box { grid-template-columns: auto 1fr; } .ki-box .btn { grid-column: 1 / -1; justify-self: start; } }

/* Inhaltsseiten */
.page { padding-block: clamp(2.5rem, 6vw, 5rem); }
.page-head { margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.page-head h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); margin-top: .8rem; }
.page-head .lead { color: var(--ink-soft); font-size: 1.2rem; font-weight: 600; max-width: 60ch; margin-top: 1rem; }
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.8rem; margin: 2.4rem 0 .8rem; }
.prose h3 { font-size: 1.25rem; margin: 1.6rem 0 .5rem; }
.prose p, .prose li { color: var(--ink-soft); margin-bottom: .9rem; font-weight: 600; }
.prose li { margin-bottom: .4rem; }
.prose strong { color: var(--ink); }
.prose a { color: var(--sky-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose .box { padding: 1.2rem 1.4rem; border-radius: var(--radius-sm); background: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); margin: 1.4rem 0; }
.prose .box p:last-child { margin-bottom: 0; }
.zitat { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--ink); border-left: 6px solid var(--coral); padding-left: 1rem; margin: 1.5rem 0; }
.zitat small { display: block; font-family: var(--font-text); font-size: .9rem; color: var(--muted); margin-top: .4rem; }
.leer { padding: 2rem; text-align: center; color: var(--muted); border: 3px dashed var(--ink); border-radius: var(--radius-sm); font-weight: 700; background: #fff; }
.skeleton { position: relative; overflow: hidden; background: #fff; border: 3px dashed #ddd; border-radius: var(--radius-sm); min-height: 120px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,213,79,.35), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* Footer */
.site-footer { border-top: 4px solid var(--ink); margin-top: 3rem; padding: 3rem 0 2.5rem; background: #fff; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2rem; }
.footer-grid h4 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-deep); margin-bottom: .8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-weight: 700; }
.footer-grid a:hover { color: var(--coral-deep); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 3px dashed #e0e0e0; font-size: .85rem; color: var(--muted); font-weight: 700; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.toast { position: fixed; left: 50%; bottom: 1.4rem; z-index: 90; transform: translate(-50%, 20px); padding: .8rem 1.3rem; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 800; font-size: .95rem; opacity: 0; pointer-events: none; transition: .35s var(--ease-spring); }
.toast.zeigen { opacity: 1; transform: translate(-50%, 0); }

@view-transition { navigation: auto; }
::view-transition-old(seite) { animation: vt-out .25s var(--ease-out) both; }
::view-transition-new(seite) { animation: vt-in .45s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
#app { view-transition-name: seite; }
.intro[hidden] { display: none; }