/* froschhausen.info News — Design „Dorffunk"
   Moderne Lokalsender-Ästhetik auf Basis des Froschhäuser Wappens:
   Wappenrot, Gold, Silberschilf — warmes Papier, kräftige Typo, Frequenz-Details. */
:root{
  --papier:#FCFAF5;
  --karte:#FFFFFF;
  --tinte:#211B16;
  --grau:#4E453B;
  --rot:#A81E22;
  --rot-tief:#7E1418;
  --gold:#D9A521;
  --gold-hell:#F0C75E;
  --schilf:#3E6B4F;
  --linie:#EAE2D6;
  --radius:16px;
  --display:"Bricolage Grotesque",-apple-system,sans-serif;
  --text:"Albert Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono","SF Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--text);
  background:var(--papier);
  color:var(--tinte);
  line-height:1.72;
  font-size:clamp(1.0625rem,0.98rem + 0.35vw,1.2rem);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--tinte);text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--gold)}
a:hover{color:#000}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.rahmen{max-width:820px;margin:0 auto;padding:0 22px}

/* ── Kopf ─────────────────────────────── */
.kopf{background:var(--papier);border-bottom:3px double var(--tinte)}
.kopf-innen{max-width:820px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte)}
.logo svg{width:44px;height:47px;flex:0 0 auto}
.logo-wort{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.logo-wort .tld{color:var(--rot)}
.logo-unter{display:block;font-family:var(--mono);font-weight:400;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grau)}
/* flex-wrap ist Pflicht: Bei 606 px Breite ragte "Dorfseite" aus dem Viewport und
   die ganze Seite scrollte horizontal (gemessen 2026-08-05). */
.kopf-nav{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.92rem;font-weight:600}
.kopf-nav a{color:var(--tinte);text-decoration:none}
.kopf-nav a:hover{color:#A57F14}

/* ── Sendeleiste (Signatur) ───────────── */
.sendeleiste{background:var(--tinte);color:#F2EDE4}
.sendeleiste-innen{max-width:820px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;flex-wrap:wrap;row-gap:4px}
.onair-punkt{width:9px;height:9px;border-radius:50%;background:var(--gold-hell);box-shadow:0 0 0 0 rgba(240,199,94,.6);animation:puls 2.2s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(240,199,94,.55)}70%{box-shadow:0 0 0 9px rgba(240,199,94,0)}100%{box-shadow:0 0 0 0 rgba(240,199,94,0)}}
.sendeleiste b{color:var(--gold-hell);font-weight:600}
.sendeleiste .rechts{margin-left:auto;opacity:.9}
.sendeleiste .kostenlos{color:var(--gold-hell);font-weight:700}

/* ── Aufmacher ────────────────────────── */
.aufmacher{padding:58px 0 30px}
.dachzeile{font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte);font-weight:600}
h1.titel{
  font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,5.6vw,3.4rem);
  line-height:1.06;letter-spacing:-.025em;margin-top:14px;max-width:17ch;
}
h1.titel em{font-style:normal;box-shadow:inset 0 -0.42em var(--gold-hell)}
.vorspann{margin-top:18px;font-size:1.12rem;color:var(--grau);max-width:58ch}

/* ── Player „Radiokonsole" ────────────── */
.konsole{
  margin-top:34px;background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius);padding:22px 24px;
  box-shadow:0 16px 40px -18px rgba(33,27,22,.28);
  display:flex;gap:20px;align-items:center;
}
.konsole-knopf{
  flex:0 0 auto;width:72px;height:72px;border-radius:50%;border:0;cursor:pointer;
  background:var(--tinte);color:#FCFAF5;display:grid;place-items:center;
  transition:transform .15s ease,background .15s ease;
}
.konsole-knopf:hover{background:#000;transform:scale(1.06)}
.konsole-knopf svg{width:28px;height:28px;fill:currentColor}
.konsole-mitte{flex:1;min-width:0}
.konsole-titel{font-family:var(--display);font-weight:600;font-size:1rem}
/* Frequenzskala: Lineal-Ticks + rote Nadel */
.skala{position:relative;margin-top:14px;height:34px;cursor:pointer}
.skala-band{
  position:absolute;inset:6px 0;border-radius:6px;background:
    repeating-linear-gradient(90deg,
      var(--linie) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(90deg,
      #D9CFC0 0 2px, transparent 2px 60px),
    linear-gradient(#FAF6EE,#FAF6EE);
}
.skala-fortschritt{
  position:absolute;inset:6px auto 6px 0;width:0%;border-radius:6px 0 0 6px;overflow:hidden;
  background:
    repeating-linear-gradient(90deg,
      rgba(33,27,22,.5) 0 2px, transparent 2px 12px),
    linear-gradient(rgba(217,165,33,.28),rgba(217,165,33,.28));
}
.skala-nadel{
  position:absolute;top:0;bottom:0;left:0%;width:3px;background:var(--tinte);
  border-radius:2px;transform:translateX(-1px);
}
.skala-nadel::after{
  content:"";position:absolute;top:-1px;left:50%;transform:translate(-50%,0);
  width:11px;height:11px;border-radius:50%;background:var(--gold);border:2.5px solid var(--tinte);
}
.konsole-zeit{margin-top:8px;font-family:var(--mono);font-size:.78rem;color:var(--grau);display:flex;justify-content:space-between}

/* ── Meldungen (Rundown) ──────────────── */
.meldungen{padding:34px 0 8px}
.meldung{margin:0 0 40px}
.meldung-kopf{display:flex;align-items:baseline;gap:14px}
.meldung-nr{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--tinte);white-space:nowrap}
.meldung-nr::after{content:"";display:inline-block;width:34px;height:1.5px;background:var(--gold);vertical-align:middle;margin-left:10px}
.meldung h2{font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.015em;line-height:1.2;margin-top:6px}
.meldung p{margin-top:12px;max-width:66ch}
.meldung ul{margin:12px 0 0 22px}

/* ── Karten ───────────────────────────── */
.karte{background:var(--karte);border:1px solid var(--linie);border-left:5px solid var(--tinte);border-radius:var(--radius);padding:26px 28px;margin:36px 0}
.karte h3{font-family:var(--display);font-weight:700;font-size:1.3rem}
.karte .karten-hinweis{color:var(--grau);font-size:.95rem;margin-top:6px}
.kalender{list-style:none;margin-top:16px}
.kalender li{display:flex;gap:16px;padding:10px 0;border-bottom:1px dashed var(--linie);align-items:baseline}
.kalender li:last-child{border-bottom:0}
.kalender .datum{font-family:var(--mono);font-size:.82rem;font-weight:600;color:var(--tinte);flex:0 0 104px;white-space:nowrap}
.kalender .hoehepunkt{font-weight:700;box-shadow:inset 0 -0.38em var(--gold-hell)}

.feed-zeile{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.feed-url{flex:1;min-width:230px;font-family:var(--mono);font-size:.8rem;background:var(--papier);border:1px solid var(--linie);border-radius:9px;padding:11px 13px;color:var(--grau);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.knopf{display:inline-block;border:0;border-radius:9px;padding:14px 22px;min-height:48px;cursor:pointer;background:var(--tinte);color:#FCFAF5;font-family:var(--text);font-weight:700;font-size:.98rem;text-decoration:none;transition:background .15s ease}
.knopf:hover{background:#000;color:#FCFAF5}
.knopf.zweit{background:transparent;color:var(--tinte);border:2px solid var(--tinte)}
.knopf.zweit:hover{background:var(--tinte);color:#FCFAF5}

/* ── Archiv ───────────────────────────── */
.archiv-titel{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:48px 0 16px;letter-spacing:-.02em}
.ausgabe{display:flex;gap:18px;align-items:baseline;padding:16px 4px;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--tinte)}
.ausgabe:hover{background:#FFF;color:var(--tinte)}
.ausgabe:hover .ausgabe-t{color:#A57F14}
.ausgabe-datum{font-family:var(--mono);font-size:.8rem;color:var(--grau);flex:0 0 118px;white-space:nowrap}
.ausgabe-t{font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.3;transition:color .15s ease}

/* ── Quellen & Kleingedrucktes ────────── */
.quellen{font-size:.92rem;color:var(--grau);margin-top:40px;padding-top:22px;border-top:1px solid var(--linie)}
.quellen h3{font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tinte);margin-bottom:10px}
.quellen ol{margin-left:22px}
.quellen li{margin-bottom:5px}

/* ── Fuß ──────────────────────────────── */
.fuss{background:var(--tinte);color:#CFC8BD;margin-top:64px}
.fuss-innen{max-width:820px;margin:0 auto;padding:38px 22px 46px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;font-size:.92rem}
.fuss a{color:#FCEFE0}
.fuss a:hover{color:var(--gold-hell)}
.fuss .logo-wort{color:#FCFAF5}
.fuss .tld{color:var(--gold-hell)}

@media(max-width:600px){
  .kopf-nav{gap:12px;font-size:.84rem}
  .aufmacher{padding:40px 0 22px}
  .konsole{padding:16px;gap:14px}
  .konsole-knopf{width:54px;height:54px}
  .sendeleiste-innen{font-size:.68rem}
  .sendeleiste .rechts{display:none}
  .ausgabe-datum{flex-basis:96px}
}

/* ── Details & Effekte ────────────────── */
/* Kopf bekommt Schatten beim Scrollen */
.kopf{position:sticky;top:0;z-index:60;transition:box-shadow .25s ease}
.kopf.gescrollt{box-shadow:0 6px 24px -12px rgba(33,27,22,.28)}

/* Frosch blinzelt: Pupillen alle paar Sekunden kurz zu */
.pupille{transform-origin:center;animation:blinzeln 6.5s infinite}
@keyframes blinzeln{
  0%,94%,100%{transform:scaleY(1)}
  96%,98%{transform:scaleY(0.08)}
}
.logo:hover .pupille{animation-duration:2.6s}

/* Meldungen gleiten beim Scrollen herein — nur wenn JS aktiv (body.js), sonst immer sichtbar */
body.js .meldung{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
body.js .meldung.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){body.js .meldung{opacity:1;transform:none}}

/* Meldungs-Nr: Goldlinie wächst bei Hover */
.meldung-nr::after{transition:width .3s ease}
.meldung:hover .meldung-nr::after{width:64px}

/* Links: Farbe der Unterstreichung schwingt auf Gold */
a{transition:color .15s ease,text-decoration-color .2s ease}
a:hover{text-decoration-color:var(--gold)}

/* Player: Nadel gleitet, Knopf drückt sich */
.skala-nadel,.skala-fortschritt{transition:left .12s linear,width .12s linear}
.konsole-knopf:active{transform:scale(.94)}
.konsole{transition:box-shadow .3s ease}
.konsole.spielt{box-shadow:0 20px 48px -16px rgba(33,27,22,.45)}

/* Mini-Equalizer neben dem Titel, nur beim Abspielen */
.eq{display:none;gap:2.5px;align-items:flex-end;height:14px;margin-left:10px;vertical-align:middle}
.konsole.spielt .eq{display:inline-flex}
.eq span{width:3px;border-radius:1.5px;background:var(--tinte);animation:eqhuepf 1s ease-in-out infinite}
.eq span:nth-child(2){animation-delay:.18s;background:var(--gold)}
.eq span:nth-child(3){animation-delay:.36s}
.eq span:nth-child(4){animation-delay:.52s;background:var(--gold)}
@keyframes eqhuepf{0%,100%{height:4px}50%{height:14px}}
@media (prefers-reduced-motion:reduce){.eq{display:none!important}}

/* ON-AIR-Leiste wechselt Text beim Abspielen */
.sendeleiste .onair-text::after{content:""}
body.spielt .sendeleiste{background:#000}

/* Kalender: Zeilen schieben sich bei Hover an */
.kalender li{transition:transform .18s ease,background .18s ease;border-radius:8px}
.kalender li:hover{transform:translateX(6px)}
.kalender .hoehepunkt{position:relative}

/* Archiv-Pfeil erscheint bei Hover */
.ausgabe{position:relative;transition:transform .18s ease}
.ausgabe::after{content:"→";position:absolute;right:10px;top:50%;transform:translate(8px,-50%);opacity:0;color:var(--tinte);font-weight:700;transition:opacity .18s ease,transform .18s ease}
.ausgabe:hover::after{opacity:1;transform:translate(0,-50%)}
.ausgabe:hover{transform:translateX(4px)}

/* Karten heben sich leicht */
.karte{transition:transform .2s ease,box-shadow .2s ease}
.karte:hover{transform:translateY(-2px);box-shadow:0 14px 34px -20px rgba(33,27,22,.3)}

/* Feinschliff kleine Screens */
@media(max-width:480px){
  body{font-size:1rem}
  .kopf-innen{padding:12px 16px;flex-wrap:wrap;row-gap:6px}
  .logo svg{width:38px;height:41px}
  .logo-wort{font-size:1.1rem}
  .logo-unter{display:none}
  .kopf-nav{font-size:.82rem;gap:14px;width:100%;justify-content:flex-end}
  .rahmen{padding:0 16px}
  .konsole{flex-direction:column;align-items:stretch;text-align:center}
  .konsole-knopf{margin:0 auto}
  .kalender .datum{flex-basis:88px;font-size:.74rem}
  .fuss-innen{flex-direction:column;align-items:flex-start;gap:12px}
  .ausgabe{flex-direction:column;gap:4px}
  /* .ausgabe-datum hat in der Zeilenansicht flex:0 0 118px — sobald die Ausgabe
     auf Spalte umbricht, wirkt diese Basis als HOEHE und riss eine ~118px-Luecke
     zwischen Datum und Schlagzeile (gemessen auf 375px, 2026-08-05). */
  .ausgabe-datum{flex:0 0 auto}
  .ausgabe::after{display:none}
}
@media(min-width:481px) and (max-width:768px){
  .rahmen{padding:0 24px}
}
@media(min-width:1400px){
  .aufmacher{padding-top:74px}
}


/* ── Kapitel-Sprungmarken ─────────────── */
.kapitel{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:2px}
.kapitel button{
  all:unset;display:flex;align-items:center;gap:14px;padding:13px 12px;border-radius:9px;
  cursor:pointer;font-family:var(--text);font-size:1rem;color:var(--tinte);min-height:48px;
  transition:background .15s ease;
}
.kapitel button:hover,.kapitel button:focus-visible{background:var(--papier)}
.kapitel .zeit{font-family:var(--mono);font-size:.85rem;color:var(--grau);flex:0 0 52px}
.kapitel .titel{font-weight:600}
.kapitel button.aktiv .titel{color:#8A6A10}
.kapitel button.aktiv .zeit{color:#8A6A10;font-weight:700}

/* ── Transkript ───────────────────────── */
.transkript{margin-top:18px}
.transkript summary{
  cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.05rem;
  padding:14px 0;list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;
}
.transkript summary::-webkit-details-marker{display:none}
.transkript summary::before{content:"▸";color:var(--gold);transition:transform .2s ease}
.transkript[open] summary::before{transform:rotate(90deg)}
.transkript-text{padding:6px 2px 10px;color:var(--tinte)}
.transkript-text p{margin-bottom:14px;max-width:68ch}
.transkript-text .kapitel-marke{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);margin:20px 0 6px}
.transkript-text .kapitel-marke:first-child{margin-top:0}

/* ── Kontakt-Karte ────────────────────── */
.karte.kontakt{border-left-color:var(--gold)}

/* Barrierefreiheit: groessere Klickflaechen ueberall, auch mobil */
@media(max-width:480px){
  .konsole-knopf{width:64px;height:64px}
  .kapitel button{padding:14px 10px}
}


/* ── Abo-Knöpfe (Deep-Links) ─────────── */
.abo-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.abo-knoepfe .knopf{flex:1 1 150px;text-align:center}
@media(max-width:480px){.abo-knoepfe{flex-direction:column}.abo-knoepfe .knopf{flex:1 1 auto}}

/* ── Archiv-Paginierung ───────────────── */
.blaettern{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
.blaettern-stand{font-family:var(--mono);font-size:.85rem;color:var(--grau)}
.blaettern .knopf[disabled]{opacity:.35;cursor:default;pointer-events:none}
@media(max-width:480px){
  .blaettern{flex-direction:column-reverse}
  .blaettern .knopf{width:100%}
}

/* ── Archiv als Karte ─────────────────── */
/* Die Ausgaben sitzen jetzt in einer .karte statt frei auf der Seite. Randlinien
   und Innenabstand werden angepasst, damit die Liste buendig in der Karte sitzt. */
.karte.archiv{padding-bottom:20px}
.karte.archiv .archiv-liste{margin-top:14px}
.karte.archiv .ausgabe{padding:16px 6px;border-bottom:1px solid var(--linie)}
.karte.archiv .ausgabe:last-child{border-bottom:0}
.karte.archiv .ausgabe:hover{background:#FFF}
/* Beim Blaettern scrollt die Seite zum Archiv — der Kopf ist sticky und wuerde
   die Ueberschrift sonst verdecken. */
#archiv,#transkript{scroll-margin-top:96px}

/* ── "Lieber lesen"-Knopf unter den Kapiteln ── */
/* Das Transkript lag bisher unsichtbar am Seitenende; dieser Knopf fuehrt hin. */
.lesen-zeile{margin-top:16px}
.lesen-knopf{display:inline-flex;align-items:center;gap:8px}
.zurueck-zeile{margin:32px 0}
@media(max-width:480px){
  .lesen-knopf,.zurueck-zeile .knopf{display:flex;width:100%;justify-content:center;text-align:center}
}

/* ── Mobile: Kopfnavigation darf umbrechen ── */
/* Fuenf Links passten bei 390 px nicht in eine Zeile — "Dorfseite" ragte aus dem
   Bild. Umbruch statt Ueberlauf, dazu groessere Tippflaechen. */
@media(max-width:600px){
  .kopf-nav{flex-wrap:wrap;justify-content:flex-start;row-gap:2px;column-gap:16px}
  .kopf-nav a{padding:6px 0;display:inline-block}
}
@media(max-width:480px){
  .kopf-nav{justify-content:flex-start;column-gap:14px}
  .karte{padding:20px 18px}
  .karte.archiv .ausgabe{padding:14px 2px}
}

/* ── Sonderausgabe ────────────────────────────────────────────
   Kennzeichnung fuer Ausgaben ausserhalb der taeglichen Reihe.
   Gold auf Tinte, damit sie sich vom Rot des Wappens abhebt
   (Juppi: „zuviel rot ist nix“). */
.sonder-marke{
  display:inline-block;background:var(--gold);color:var(--tinte);
  font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;white-space:nowrap;
}
.sendeleiste .sonder-marke{background:var(--gold-hell)}
.sonder-marke.klein{font-size:.62rem;padding:2px 7px;margin-right:8px;vertical-align:2px}
.sonder-tipp{border-left-color:var(--gold);background:linear-gradient(180deg,#FFFDF7,var(--karte))}
.sonder-tipp h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sonder-tipp .knopf{margin-top:14px}

/* Abo-Hauptweg: grosser Knopf zu Apple Podcasts.
   Bewusst gross und mit Abstand — die Zielgruppe reicht bis weit ueber 70,
   und Abonnieren soll nicht am Kopieren einer URL scheitern. */
.abo-haupt{margin:18px 0 22px}
.knopf.gross{font-size:1.08rem;padding:17px 30px;min-height:56px;background:var(--schilf)}
.knopf.gross:hover{background:#2F5340;color:#FCFAF5}

/* Hinweisband auf die Sonderausgabe, direkt unter der Dateline.
   Steht im ersten Bildschirm, damit die Sonderausgabe nicht uebersehen wird,
   waehrend der Aufmacher weiter die Tagesnews zeigt. */
.sonder-band{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  max-width:820px;margin:0 auto;padding:14px 22px;
  background:#FBF3DC;border-bottom:2px solid var(--gold);
  text-decoration:none;color:var(--tinte);
  transition:background .15s ease;
}
.sonder-band:hover{background:#F7EAC6}
.sonder-band-text{font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.3;flex:1 1 260px}
.sonder-band-mehr{font-family:var(--mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#8A6410;white-space:nowrap;margin-left:auto}
@media(max-width:600px){
  .sonder-band{padding:13px 18px;gap:10px}
  .sonder-band-text{font-size:.98rem;flex-basis:100%}
  .sonder-band-mehr{margin-left:0}
}