@import url("/static/fonts/newsreader.css");
@import url("/static/fonts/franklin.css");

/* ===============================================================
   Neumeldung – Editorial Design System
   Serife  : Newsreader      (Überschriften, Fließtext)
   Grotesk : Libre Franklin  (Kicker, Navigation, Meta)
   Beide Schriften liegen lokal, es wird nichts von fremden Servern geladen.
   =============================================================== */

:root{
  --ink:#111111;
  --ink-2:#333333;
  --ink-3:#5a5a5a;
  --muted:#767676;
  --rule:#dcdcdc;
  --rule-2:#ececec;
  --ink-strong:#111111;
  --bg:#ffffff;
  --bg-2:#f6f5f2;
  --accent:#9c1b1b;
  --focus:#1668d6;

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;

  --max:1240px;
  --text:690px;
  --gap:clamp(1.5rem,3vw,2.6rem);
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#f0eeea;
    --ink-2:#d2cfca;
    --ink-3:#a8a49e;
    --muted:#8f8b85;
    --rule:#2f2d2b;
    --rule-2:#232120;
    --ink-strong:#f0eeea;
    --bg:#0c0c0b;
    --bg-2:#161514;
    --accent:#e77a72;
    --focus:#6fa8f2;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 19px/1.62 var(--serif);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
img{max-width:100%;height:auto;display:block;background:var(--bg-2)}
.sr-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.small{font:400 .84rem/1.5 var(--sans);color:var(--ink-3)}

/* ---------- Zeitungskopf ---------------------------------------- */
.top{border-bottom:1px solid var(--ink-strong);margin-bottom:var(--gap)}
.masthead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:18px 0 14px}
.dateline,.edition{font:500 .68rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.edition{text-align:right}
.brand{font:800 clamp(2.1rem,6vw,3.9rem)/1 var(--serif);letter-spacing:-.04em;text-align:center;white-space:nowrap}
.mainnav{
  border-top:1px solid var(--rule);
  display:flex;justify-content:center;flex-wrap:wrap;gap:0 1.75rem;padding:.65rem 0;
  font:600 .76rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
}
.mainnav a{color:var(--ink-2);padding:.3rem 0;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease}
.mainnav a:hover{color:var(--accent);border-color:var(--accent)}

/* Mitlaufende Kopfzeile auf der Artikelseite */
.sticky{
  position:fixed;top:0;left:0;right:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--rule);transform:translateY(-102%);transition:transform .25s ease;
}
.sticky.show{transform:none}
.sticky .inner{max-width:var(--max);margin:0 auto;padding:.55rem 24px;display:flex;align-items:center;gap:1rem}
.sticky .sbrand{font:800 1.05rem/1 var(--serif);letter-spacing:-.02em;flex:none}
.sticky .stitle{font:600 .85rem/1.3 var(--sans);color:var(--ink-3);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:640px){.sticky .stitle{display:none}}

/* ---------- Typografie ------------------------------------------ */
h1{font:800 clamp(2.1rem,4.8vw,3.35rem)/1.08 var(--serif);letter-spacing:-.028em;margin:.1em 0 .3em}
h2{font:700 1.5rem/1.22 var(--serif);letter-spacing:-.016em;margin:2.5rem 0 .7rem}
h3{font:600 1.15rem/1.3 var(--serif);margin:1.8rem 0 .45rem}
p{margin:0 0 1.2rem}
.section-head{
  font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  border-top:2px solid var(--ink-strong);padding-top:.75rem;margin:var(--gap) 0 1.5rem;
}

/* ---------- Startseite ------------------------------------------ */
.frontpage{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:900px){
  .frontpage{grid-template-columns:minmax(0,2.15fr) minmax(260px,1fr)}
  .frontpage .aside{border-left:1px solid var(--rule);padding-left:var(--gap)}
}

.lead{display:grid;gap:1rem}
.lead img{width:100%;aspect-ratio:16/9;object-fit:cover}
.lead strong{font:800 clamp(1.9rem,4vw,3rem)/1.09 var(--serif);letter-spacing:-.028em;display:block}
.lead .dek{font:400 1.12rem/1.55 var(--serif);color:var(--ink-2);margin:0}
.lead a:hover strong{color:var(--accent)}

.aside h2{margin:0 0 1rem;font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  border-top:2px solid var(--ink-strong);padding-top:.75rem}
.briefs{list-style:none;margin:0;padding:0}
.briefs li{padding:.9rem 0;border-bottom:1px solid var(--rule-2)}
.briefs li:last-child{border-bottom:0}
.briefs strong{font:600 1.02rem/1.32 var(--serif);display:block;margin:.15rem 0 .2rem}
.briefs a:hover strong{color:var(--accent)}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.cards li{border-top:1px solid var(--rule);padding-top:1rem}
.cards img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:.7rem}
.cards strong{font:600 1.18rem/1.28 var(--serif);letter-spacing:-.012em;display:block;margin-bottom:.35rem}
.cards a:hover strong{color:var(--accent)}
.cards .small{display:block;margin-bottom:.45rem}
.cards.list{grid-template-columns:1fr;gap:0}
.cards.list li{padding:1.5rem 0}
@media (min-width:720px){
  .cards.list a{display:grid;grid-template-columns:240px 1fr;gap:0 1.6rem;align-items:start}
  .cards.list img{margin-bottom:0}
}
.cat{font:700 .7rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.4rem}
.date{font:400 .74rem/1 var(--sans);color:var(--muted)}

.cats{margin-top:var(--gap)}
.cats ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cats a{display:inline-block;padding:.5rem 1rem;border:1px solid var(--rule);
  font:600 .8rem/1 var(--sans);transition:border-color .18s ease,color .18s ease}
.cats a:hover{border-color:var(--ink-strong);color:var(--accent)}

/* ---------- Artikel --------------------------------------------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none}
.progress-fill{height:100%;width:0;background:var(--accent)}

.crumbs{font:500 .74rem/1 var(--sans);color:var(--muted);letter-spacing:.02em;margin:0 0 1.2rem}
.crumbs a:hover{color:var(--accent)}
.kicker{margin:0}
.kicker a{font:700 .74rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}

.article{max-width:var(--text);margin:0 auto}
.article.static h2{font-size:1.28rem}
.dek{font:400 1.2rem/1.5 var(--serif);color:var(--ink-2);margin:.4rem 0 1.4rem}
.byline{font:500 .78rem/1.6 var(--sans);color:var(--ink-3);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.8rem 0;margin:1.2rem 0 1.6rem}
figure.hero{margin:0 0 1.9rem}
figure.hero img{width:100%}
figcaption{font:400 .78rem/1.5 var(--sans);color:var(--muted);
  padding:.55rem 0 .7rem;border-bottom:1px solid var(--rule)}

.answer{background:var(--bg-2);border-left:3px solid var(--accent);padding:1.15rem 1.3rem;margin:0 0 1.9rem}
.answer h2{margin:0 0 .5rem;font:700 .72rem/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
.answer p{margin:0;font-size:1.05rem;line-height:1.55}

.toc{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.1rem 0;margin:0 0 2.2rem}
.toc h2{margin:0 0 .6rem;font:700 .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.toc ol{margin:0;padding-left:1.2rem;font:400 .95rem/1.75 var(--sans);color:var(--ink-2)}
.toc a:hover{color:var(--accent)}

/* Initial im ersten Absatz des ersten Abschnitts */
.article > section:not(.answer) p:first-of-type::first-letter{font-size:inherit}
.article > section.opener > p:first-of-type::first-letter{
  float:left;font:800 3.9rem/.82 var(--serif);margin:.06em .1em 0 0;
}

.faq h3{margin-top:1.6rem}
.sources{border-top:1px solid var(--rule);margin-top:2.6rem;padding-top:.4rem}
.sources h2{font:700 .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;margin-top:1.3rem}
.sources ul{font:400 .92rem/1.65 var(--sans);padding-left:1.15rem;margin:0}
.sources li{margin:.4rem 0}
.sources a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.sources a:hover{text-decoration-color:currentColor}

.authorbox{background:var(--bg-2);padding:1.3rem 1.4rem;margin:2.8rem 0 0}
.authorbox h2{margin:0 0 .5rem;font:700 .72rem/1 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.authorbox p{margin:0;font-size:.97rem;line-height:1.6}

.inline-more{border-top:2px solid var(--ink-strong);border-bottom:1px solid var(--rule);
  padding:.85rem 0 1.1rem;margin:2.4rem 0}
.inline-more h2{margin:0 0 .6rem;font:700 .72rem/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent)}
.inline-more ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.inline-more a{font:600 1.02rem/1.35 var(--serif)}
.inline-more a:hover{color:var(--accent)}

.related{max-width:var(--text);margin:3.2rem auto 0;border-top:2px solid var(--ink-strong);padding-top:.75rem}
.related h2{font:700 .74rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:1rem 0 1.4rem}

/* ---------- Vorlesefunktion ------------------------------------- */
.player{display:flex;align-items:center;gap:.95rem;border:1px solid var(--rule);
  padding:.75rem .95rem;margin:0 0 1.9rem;background:var(--bg-2)}
.player[hidden]{display:none}
.player .play{flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;border:none;
  background:var(--ink-strong);color:var(--bg);display:grid;place-items:center;transition:opacity .18s ease}
.player .play:hover{opacity:.82}
.player .play:disabled{opacity:.4;cursor:not-allowed}
.player .play svg{width:20px;height:20px;fill:currentColor}
.pmeta{flex:1;min-width:0;display:grid;gap:.5rem}
.ptitle{font:600 .84rem/1.2 var(--sans)}
.pbar{height:4px;background:var(--rule);cursor:pointer;overflow:hidden}
.pfill{height:100%;width:0;background:var(--accent);transition:width .25s linear}
.ptime{flex:none;font:500 .78rem/1 var(--sans);color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:2.8rem;text-align:right}
.pspeed{flex:none;cursor:pointer;background:none;border:1px solid var(--rule);
  padding:.35rem .65rem;color:var(--ink-3);font:600 .74rem/1 var(--sans);
  transition:border-color .18s ease,color .18s ease}
.pspeed:hover{border-color:var(--ink-strong);color:var(--ink)}
.pspeed[hidden]{display:none}

/* ---------- Fuß -------------------------------------------------- */
.foot{border-top:1px solid var(--ink-strong);margin-top:4rem;padding:1.8rem 0 3.5rem}
.foot .fbrand{font:800 1.5rem/1 var(--serif);letter-spacing:-.03em;margin-bottom:.8rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;font:600 .82rem/1 var(--sans);margin-bottom:1rem}
.foot nav a{color:var(--ink-2)}
.foot nav a:hover{color:var(--accent)}
.foot .small{max-width:54ch}

/* ---------- Anpassungen ------------------------------------------ */
@media (max-width:900px){
  .masthead{grid-template-columns:1fr;gap:.35rem;text-align:center}
  .dateline{text-align:center}
  .edition{display:none}
}
@media (max-width:600px){
  body{font-size:18px}
  .wrap{padding:0 18px}
  .mainnav{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:0 1.25rem}
  .mainnav::-webkit-scrollbar{display:none}
  .player{gap:.7rem;padding:.65rem .75rem}
  .pspeed{display:none}
  .article > section.opener > p:first-of-type::first-letter{font-size:3.2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

@media print{
  .top,.sticky,.foot,.toc,.player,.related,.progress,.inline-more{display:none}
  body{font-size:11pt;color:#000;background:#fff}
  .article{max-width:none}
}

/* Empfehlungen unter dem Beitrag: volle Breite statt Textspalte */
.related{max-width:var(--max)}
.related .cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.more-cats ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.more-cats a{display:inline-block;padding:.5rem 1rem;border:1px solid var(--rule);
  font:600 .8rem/1 var(--sans);transition:border-color .18s ease,color .18s ease}
.more-cats a:hover{border-color:var(--ink-strong);color:var(--accent)}