/* ============================================================
   RADIO LIKEDEELER — Site-Stylesheet v1
   Lädt Fonts + Tokens + Komponenten und ergänzt das Seitenlayout.
   ============================================================ */
@import url('fonts.css');
@import url('tokens.css');
@import url('komponenten.css');

/* ---- Basis ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ld-papier);color:var(--ld-ink);
  font-family:var(--ld-font-text);line-height:var(--ld-lh);
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--ld-font-display);font-weight:400;text-transform:uppercase}
a{color:var(--ld-ink)}
img{max-width:100%}

/* ---- Topbar + Burger-Navigation ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.3rem;border-bottom:var(--ld-kante);
  background:var(--ld-papier);position:sticky;top:0;z-index:50;
}
.wordmark{
  font-family:var(--ld-font-display);font-size:1.05rem;text-transform:uppercase;
  color:var(--ld-ink);text-decoration:none;white-space:nowrap;
}
.wordmark span{background:var(--ld-gelb);padding:0 .25em}
nav.main{display:flex;gap:1.2rem;flex-wrap:wrap}
nav.main a{text-decoration:none;font-size:.85rem;font-weight:700;text-transform:uppercase}
nav.main a:hover,nav.main a.aktiv{background:var(--ld-gelb)}
.nav-schalter{display:none}
label.burger{display:none;cursor:pointer;border:var(--ld-kante);padding:.35rem .6rem;font-weight:700;font-size:.9rem;user-select:none}
@media(max-width:820px){
  label.burger{display:block}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--ld-papier);
    border-bottom:var(--ld-kante);
  }
  nav.main a{padding:.9rem 1.3rem;border-top:2px solid var(--ld-ink)}
  .nav-schalter:checked ~ nav.main{display:flex}
}

/* ---- Seitenkopf ---- */
.page-head{
  padding:3rem 1.3rem 2.6rem;border-bottom:var(--ld-kante);position:relative;
}
.page-head .inner{max-width:var(--ld-inhalt-breite);margin:0 auto;position:relative}
.page-head h1{font-size:var(--ld-t-xxl);line-height:.95;letter-spacing:-.02em}
.page-head .sub{margin-top:1rem;max-width:40rem;font-size:var(--ld-t-m)}
.page-head .sub b{background:var(--ld-ink);color:var(--ld-papier);padding:0 .3em}
.stamp-ecke{position:absolute;right:0;top:-.4rem;transform:rotate(8deg)}
@media(max-width:700px){.stamp-ecke{position:static;display:inline-block;margin-bottom:1rem;transform:rotate(-2deg)}}

/* ---- Hero (Startseite) ---- */
.hero{
  padding:3.2rem 1.3rem 3.6rem;position:relative;
}
.hero-inner{max-width:var(--ld-inhalt-breite);margin:0 auto;position:relative}
.hero h1{
  font-size:var(--ld-t-hero);line-height:.92;letter-spacing:-.02em;
}
.hero h1 .hl{background:var(--ld-gelb);box-shadow:.08em 0 0 var(--ld-gelb),-.08em 0 0 var(--ld-gelb)}
.hero .sub{margin-top:1.2rem;font-size:1rem;max-width:34rem}
.hero .sub b{background:var(--ld-ink);color:var(--ld-papier);padding:0 .3em}

/* Player-Erweiterungen (Startseite) */
.ld-player{margin-top:2.4rem;width:min(560px,100%)}
.ld-player .controls{display:flex;align-items:center;gap:1rem}
.ld-player .play svg{width:26px;height:26px;fill:currentColor}
.ld-player .hint{font-size:.78rem;color:#888;margin-top:.8rem}

/* ---- Sektionen ---- */
section.block{padding:3.8rem 1.3rem;border-top:var(--ld-kante)}
section.block:first-of-type{border-top:none}
.inner{max-width:var(--ld-inhalt-breite);margin:0 auto;position:relative}
.block h2{font-size:var(--ld-t-xl);letter-spacing:-.01em;margin-bottom:1.1rem}
.block h2 mark{background:var(--ld-gelb);padding:0 .15em}
.gelb-bg{background:var(--ld-gelb)}
.gelb-bg .ld-num{color:var(--ld-gelb)}
.lead{font-size:1rem;max-width:42rem}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:760px){.cols{grid-template-columns:1fr}}
.platt{
  border:3px solid var(--ld-ink);padding:1.2rem 1.4rem;font-style:italic;
  background:var(--ld-papier);box-shadow:var(--ld-schatten);
}
.platt b{font-style:normal;background:var(--ld-gelb);padding:0 .25em}
.note{margin-top:1.1rem;font-size:.8rem;font-style:italic;color:var(--ld-grau)}
.bildrechte{margin-top:.6rem;font-size:.75rem;color:var(--ld-grau-2);font-style:italic}

/* ---- Sendeplan (Startseite) ---- */
.plan-tab{border:var(--ld-kante);max-width:720px;background:var(--ld-weiss)}
.plan-tab .slot{display:grid;grid-template-columns:120px 1fr;border-bottom:var(--ld-kante)}
.plan-tab .slot:last-child{border-bottom:none}
.plan-tab .zeit{font-weight:700;padding:.8rem 1rem;border-right:var(--ld-kante);background:var(--ld-gelb)}
.plan-tab .txt{padding:.8rem 1rem}
.plan-tab .name{font-family:var(--ld-font-display);text-transform:uppercase;display:block;font-size:1rem}
.plan-tab .name a{text-decoration:none}
.plan-tab .name a:hover{background:var(--ld-gelb)}
.plan-tab .who{font-size:.85rem;color:var(--ld-grau)}
@media(max-width:520px){.plan-tab .slot{grid-template-columns:92px 1fr}}

/* ---- Kalender (Veranstaltungen) ---- */
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.8rem}
.monat{
  font-family:var(--ld-font-display);text-transform:uppercase;font-size:1.2rem;
  background:var(--ld-ink);color:var(--ld-papier);display:inline-block;
  padding:.2rem .8rem;margin:1.8rem 0 .9rem;
}
.monat.weg{display:none}
.ld-event{margin-bottom:.9rem}
.ld-event.weg{display:none}
.ld-event p{font-size:.88rem;margin-top:.3rem}
.ld-event .tags{margin-top:.5rem}

/* ---- Archiv ---- */
.folgen{border:var(--ld-kante);background:var(--ld-weiss);max-width:900px}
.folge{
  display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;
  padding:.85rem 1.1rem;border-bottom:var(--ld-kante);
}
.folge:last-child{border-bottom:none}
.folge.weg{display:none}
.folge .datum{font-weight:700;font-size:.82rem;background:var(--ld-gelb);padding:.2rem .55rem;white-space:nowrap}
.folge .titel{font-size:.9rem}
.folge .titel b{font-family:var(--ld-font-display);text-transform:uppercase;font-size:.85rem;display:block}
.folge .show{font-size:.72rem;font-weight:700;text-transform:uppercase;background:var(--ld-ink);color:var(--ld-papier);padding:.15rem .5rem;white-space:nowrap}
@media(max-width:640px){
  .folge{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  .folge .show{grid-column:2}
  .folge .ld-btn{grid-column:1/-1;justify-self:start}
}
.feeds{margin-top:1.2rem;font-size:.88rem}
.feeds a{font-weight:700}
.album{display:grid;grid-template-columns:180px 1fr;gap:1.6rem;align-items:start;max-width:760px;margin-top:1.6rem}
.cover{
  aspect-ratio:1;border:var(--ld-kante);background:var(--ld-ink);color:var(--ld-gelb);
  display:grid;place-items:center;font-family:var(--ld-font-display);text-transform:uppercase;
  text-align:center;font-size:.9rem;padding:1rem;box-shadow:var(--ld-schatten);
}
.album h3{font-size:1.2rem;margin-bottom:.3rem}
.album .wer{font-size:.85rem;font-weight:700;color:var(--ld-rot);margin-bottom:.6rem}
.album p{font-size:.9rem}
@media(max-width:560px){.album{grid-template-columns:1fr}.cover{max-width:180px}}
.mech{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:1.6rem}
.mech .m{background:var(--ld-weiss);border:var(--ld-kante);box-shadow:var(--ld-schatten);padding:1.2rem 1.3rem}
.mech h3{font-size:1rem;margin-bottom:.4rem}
.mech p{font-size:.86rem}
.mech .wie{margin-top:.6rem;font-size:.78rem;font-weight:700;background:var(--ld-gelb);display:inline-block;padding:.1rem .5rem}

/* ---- Mitmachen ---- */
.leiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:1.8rem}
.stufe{background:var(--ld-weiss);border:var(--ld-kante);box-shadow:var(--ld-schatten);padding:1.3rem}
.gelb-bg .stufe{box-shadow:8px 8px 0 rgba(16,16,16,.85)}
.stufe .snum{font-family:var(--ld-font-display);font-size:2.6rem;line-height:1;color:var(--ld-rot)}
.stufe h3{font-size:1.1rem;margin:.4rem 0 .5rem}
.stufe p{font-size:.88rem}
.stufe .hinweis{margin-top:.7rem;font-size:.8rem;background:var(--ld-gelb);display:inline-block;padding:.1rem .5rem;font-weight:700}
.redaktionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1.6rem}
.red{border:var(--ld-kante);background:var(--ld-papier);padding:1.1rem 1.2rem}
.red h3{font-size:1rem;margin-bottom:.3rem}
.red p{font-size:.85rem;color:#444}
ul.roh{list-style:none;margin-top:1rem;max-width:42rem}
ul.roh li{padding:.55rem 0;border-bottom:2px solid var(--ld-ink);font-size:.92rem}
ul.roh li::before{content:"→ ";font-weight:700;color:var(--ld-rot)}

/* ---- Sendungsseite ---- */
.zurueck{max-width:var(--ld-inhalt-breite);margin:1.4rem auto 0;padding:0 1.3rem;font-size:.85rem;font-weight:700}
.zurueck a{text-decoration:none}
.zurueck a:hover{background:var(--ld-gelb)}
.sendezeit{display:inline-block;background:var(--ld-ink);color:var(--ld-gelb);font-weight:700;font-size:.9rem;padding:.3rem .8rem;margin-bottom:.9rem}
.macher{margin-top:1.4rem;display:flex;gap:1rem;flex-wrap:wrap}
.macher .m{border:var(--ld-kante);padding:.5rem .9rem;font-size:.85rem;background:var(--ld-weiss)}
.macher .m b{font-family:var(--ld-font-display);text-transform:uppercase;font-size:.8rem;display:block}

/* ---- Rechtsseiten ---- */
main.schmal{max-width:760px;margin:0 auto;padding:2.6rem 1.3rem 4rem}
main.schmal h1{font-size:var(--ld-t-xl);margin-bottom:1.6rem}
main.schmal h1 .hl{background:var(--ld-gelb)}
main.schmal h2{font-size:1.05rem;margin:2rem 0 .6rem;border-bottom:var(--ld-kante);padding-bottom:.3rem}
main.schmal p,main.schmal li{font-size:.92rem;margin:.4rem 0}
main.schmal ul{margin:.4rem 0 .4rem 1.3rem}
.platzhalter{background:var(--ld-gelb);font-weight:700;padding:0 .3em}
.gut{background:var(--ld-weiss);border:var(--ld-kante);box-shadow:var(--ld-schatten-gelb);padding:1.1rem 1.3rem;margin:1.4rem 0}
.gut b{font-family:var(--ld-font-display);text-transform:uppercase;font-size:.85rem}

/* ---- Kontakt-Karte ---- */
.kontakt-card{
  margin-top:1.4rem;background:var(--ld-weiss);border:var(--ld-kante);
  box-shadow:var(--ld-schatten);padding:1.4rem;max-width:460px;
}
.kontakt-card p{margin:.25rem 0}

/* ---- Schraffur (Token-Klasse in tokens.css) + Hero nutzen sie ---- */

/* ---- Footer ---- */
footer.site{
  background:var(--ld-ink);color:var(--ld-grau-d);
  padding:2.2rem 1.3rem 3rem;text-align:center;font-size:.85rem;
  border-top:6px solid var(--ld-gelb);
}
footer.site .fm{font-family:var(--ld-font-display);text-transform:uppercase;color:var(--ld-papier);margin-bottom:.3rem}
footer.site nav{margin:.7rem 0 0}
footer.site nav a{margin:0 .7rem;color:var(--ld-grau-d)}
footer.site nav a:hover{color:var(--ld-gelb)}