/* Gemeinsame Gestaltung für Beitrags-, Ressort- und Fehlerseiten. Die Startseite hat ihre Styles inline. */
:root{
  --ink:#111; --ink-2:#3d3d3d; --ink-3:#6f6f6f;
  --paper:#fff; --paper-2:#f4f2ee; --rule:#dcd8cf;
  --brand:#0f2a44; --red:#b3121b; --gold:#9a7b3c;
  --display:"Playfair Display",Georgia,serif;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:Inter,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:19px/1.6 var(--serif)}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}

.topbar{background:var(--brand);color:#c9d3de;font:500 12px/1 var(--sans)}
.topbar .wrap{display:flex;justify-content:space-between;gap:12px;padding-top:8px;padding-bottom:8px}
.topbar b{color:#fff;font-weight:600}
.mast{border-bottom:1px solid var(--ink)}
.mast .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:16px;padding-bottom:14px}
.mast .left{font:500 13px/1.3 var(--sans);color:var(--ink-3)}
.mast .right{display:flex;justify-content:flex-end}
.logo{display:flex;flex-direction:column;align-items:center;color:var(--ink);text-decoration:none}
.logo .pre{font:600 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.logo .w{font:400 50px/1 "UnifrakturMaguntia",serif}
.abo-link{font:700 13px/1 var(--sans);text-decoration:none;background:var(--red);color:#fff;padding:10px 14px;border-radius:2px;display:inline-flex;gap:7px;align-items:center}
.ressorts{border-bottom:3px solid var(--ink)}
.ressorts .wrap{display:flex;gap:24px;overflow-x:auto;white-space:nowrap;font:700 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;padding-top:13px;padding-bottom:13px;scrollbar-width:none}
.ressorts a{text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.ressorts a:hover,.ressorts a[aria-current]{border-bottom-color:var(--red)}

.lock{display:inline-flex;align-items:center;gap:6px;font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--red);color:#fff;font:700 16px/1.2 var(--sans);text-decoration:none;padding:15px 20px;border:0;border-radius:2px;cursor:pointer}
.btn:hover{background:#9a0f17}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--paper-2)}

/* Beitrag */
.crumbs{font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:28px 0 0}
.crumbs a{text-decoration:none;color:var(--red)}
.article{max-width:720px;margin:0 auto}
.article h1{font:800 clamp(30px,4.6vw,48px)/1.1 var(--display);letter-spacing:-.01em;margin:12px 0 16px}
.standfirst{font:400 22px/1.5 var(--serif);color:var(--ink-2);margin:0 0 20px}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 13px/1.4 var(--sans);color:var(--ink-3);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin:0 0 26px}
.byline b{color:var(--ink);font-weight:700}
.hero{margin:0 0 28px}
.hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--paper-2)}
.hero figcaption{font:500 12px/1.45 var(--sans);color:var(--ink-3);margin-top:8px}
.hero figcaption a{color:inherit}
.body p{margin:0 0 1.1em}
.body h2{font:700 25px/1.25 var(--display);margin:1.4em 0 .5em}
.body .fade{position:relative;max-height:9.5em;overflow:hidden}
.body .fade::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,0),#fff 85%)}
.paywall{border-top:4px solid var(--red);background:var(--paper-2);padding:26px 24px;font-family:var(--sans);margin:4px 0 0}
.paywall h2{font:800 clamp(24px,3vw,30px)/1.2 var(--display);margin:8px 0 8px}
.paywall p{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 18px}
.paywall .choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.paywall .choices .btn{flex-direction:column;gap:4px;padding:14px 16px}
.paywall .choices small{font:500 13px/1.2 var(--sans);opacity:.85}
.paywall .fine{font-size:13px;color:var(--ink-3);margin:14px 0 0}

/* Listen */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--ink);margin:44px 0 0;padding-bottom:8px}
.sec-title h2{font:800 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;margin:0}
.sec-title span{font:500 13px/1 var(--sans);color:var(--ink-3)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
.card{display:block;text-decoration:none;padding:20px 0 22px;border-bottom:1px solid var(--rule)}
.card img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--paper-2);margin:0 0 14px}
.card .res{font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
.card h3{font:700 22px/1.25 var(--display);margin:0 0 8px}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.card p{font:16px/1.5 var(--serif);color:var(--ink-2);margin:0 0 12px}
.ressort-head{padding:30px 0 6px}
.ressort-head h1{font:800 clamp(34px,5vw,52px)/1.08 var(--display);margin:0 0 8px}
.ressort-head p{margin:0;color:var(--ink-2);max-width:680px}

.notfound{max-width:680px;padding:56px 0 8px}
.notfound h1{font:800 clamp(30px,4.6vw,44px)/1.12 var(--display);margin:0 0 12px}
.notfound p{color:var(--ink-2);margin:0 0 22px}

footer{margin-top:64px;background:var(--brand);color:#c9d3de;font:13px/1.6 var(--sans);padding:28px 0 40px}
footer .logo{color:#fff;align-items:flex-start}
footer .logo .w{font-size:30px}
footer nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px}

@media (max-width:980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  body{font-size:18px}
  .mast .wrap{grid-template-columns:1fr auto;gap:10px}
  .mast .left,.logo .pre,.abo-link span,.topbar .wrap>span:last-child{display:none}
  .logo{align-items:flex-start}
  .logo .w{font-size:30px}
  .standfirst{font-size:19px}
  .cards,.paywall .choices{grid-template-columns:1fr}
  .paywall{padding:22px 16px}
}