/* ==========================================================================
   tiefgang — Stylesheet (Look and Feel angelehnt an arto.ch)
   ========================================================================== */

@font-face{font-family:Gilroy;font-weight:500;font-style:normal;font-display:swap;
  src:url(../fonts/gilroy-medium.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:800;font-style:normal;font-display:swap;
  src:url(../fonts/gilroy-extrabold.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:400 700;font-style:normal;font-display:swap;
  src:url(../fonts/inter-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:Inter;font-weight:400 700;font-style:normal;font-display:swap;
  src:url(../fonts/inter-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}

:root{
  --coral:#f56856;
  --coral-ink:#c8200b;      /* 5.6:1 auf Weiss, fuer kleinen Text */
  --heading:#1c1b1a;
  --body:#3f3b39;           /* 10:1 auf Weiss */
  --paper:#ffffff;
  --paper-2:#f7f7f5;
  --muted:#6b6663;          /* 5.6:1 auf Weiss */
  --rule:#e2e0dd;
  --night:#141312;
  --night-2:#1f1d1c;
  --night-text:#e9e6e3;
  --night-muted:#b3aca7;    /* 8:1 auf --night */
  --focus:#1a5fd0;
  --head-font:Gilroy,"Segoe UI",system-ui,sans-serif;
  --body-font:Inter,system-ui,sans-serif;
  --measure:40rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body-font);font-size:1.125rem;line-height:1.65;color:var(--body);
  background:var(--night);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--head-font);font-weight:800;color:var(--heading);margin:0;line-height:1.2}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.dark :focus-visible{outline-color:#8fb6ff}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-80px;left:16px;z-index:200;background:#fff;color:var(--heading);
  padding:12px 20px;border-radius:6px;font-weight:700}
.skip-link:focus{top:12px}
.wrap{max-width:calc(var(--measure) + 40px);margin:0 auto;padding:0 20px}

/* --- Kopf ----------------------------------------------------------------- */
.masthead{background:radial-gradient(120% 90% at 85% 0%,#2b2624 0%,var(--night) 60%);color:var(--night-text);
  padding:48px 0 36px;position:relative;overflow:hidden}
.masthead .wrap{position:relative}
.eyebrow{font-family:var(--head-font);font-weight:800;font-size:.95rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--coral);margin:0 0 .6rem}

/* Logo: «tiefgang» mit Wasserlinie. Was unter der Linie liegt, ist korallrot. */
.logo{display:inline-block;text-decoration:none;color:#fff;position:relative;line-height:1}
.logo__word{display:block;font-family:var(--head-font);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(4rem,21vw,8.5rem);line-height:1.02;padding-bottom:.18em;
  background:linear-gradient(to bottom,#fff 0,#fff 70%,var(--coral) 70%,var(--coral) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.logo__line{position:absolute;left:-2%;right:-4%;top:calc(var(--wl,70%) - 7px);height:14px;
  pointer-events:none}
.logo__line svg{width:100%;height:14px;display:block}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.logo__word{color:#fff;background:none}}
.tagline{font-family:var(--head-font);font-weight:500;font-size:clamp(1.15rem,3.2vw,1.5rem);color:var(--night-text);
  margin:.6rem 0 0;max-width:34rem}

/* Status: letzte und naechste Ausgabe */
.status{display:flex;flex-wrap:wrap;gap:10px 14px;margin:28px 0 0;padding:0;list-style:none}
.status li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;
  padding:8px 16px;font-size:.95rem;color:var(--night-text)}
.status strong{color:#fff}
.status .dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--coral);
  margin-right:.5em;vertical-align:.08em}

/* Werkzeugleiste */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.btn{display:inline-flex;align-items:center;gap:.5em;font:700 1rem/1.2 var(--body-font);padding:14px 24px;
  border-radius:999px;border:2px solid var(--coral);background:var(--coral);color:#1c1b1a;text-decoration:none;
  cursor:pointer;min-height:48px}
.btn:hover{background:#ff8676;border-color:#ff8676}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff;color:var(--heading);border-color:#fff}
.btn svg{width:1.1em;height:1.1em;flex:none}

/* Kategorien-Panel */
.prefs{background:var(--night-2);color:var(--night-text);border-top:1px solid rgba(255,255,255,.08)}
.prefs[hidden]{display:none}
.prefs .wrap{padding-top:28px;padding-bottom:28px}
.prefs h2{color:#fff;font-size:1.4rem;margin-bottom:.4rem}
.prefs p{color:var(--night-muted);font-size:1rem;max-width:44rem}
.prefs fieldset{border:0;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:8px 20px}
.prefs legend{padding:0;margin-bottom:10px;font-weight:700;color:#fff}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--coral);flex:none}
.prefs__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.prefs__actions .btn{padding:10px 18px;min-height:44px}

/* --- Papier: Artikel auf hellem Grund ------------------------------------- */
.paper{background:var(--paper-2);color:var(--body);padding:40px 0 64px}
.edition-head{max-width:var(--measure);margin:0 auto 28px}
.edition-head h1{font-size:clamp(1.7rem,4.5vw,2.4rem)}
.edition-head .lead{font-size:1.2rem;color:var(--body);margin:.7rem 0 0}
.edition-head .episode{margin-top:18px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:16px 18px}
.edition-head .episode p{margin:0 0 8px;font-weight:700;color:var(--heading)}
audio{width:100%;display:block;height:44px}

.toc{max-width:var(--measure);margin:0 auto 36px;background:var(--paper);border:1px solid var(--rule);
  border-radius:14px;padding:18px 22px}
.toc h2{font-size:1.1rem;margin-bottom:.6rem}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin:.35em 0}
.toc a{color:var(--heading);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
.toc a:hover{color:var(--coral-ink)}
.toc .cat{color:var(--muted);font-size:.9rem}

.article{max-width:var(--measure);margin:0 auto 28px;background:var(--paper);border-radius:18px;
  padding:clamp(22px,5vw,44px);box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 28px rgba(0,0,0,.05)}
.article[hidden]{display:none}
.article__cat{font-family:var(--head-font);font-weight:800;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--coral-ink);margin:0 0 .5rem}
.article h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:.8rem}
.article__meta{font-size:.95rem;color:var(--muted);margin-bottom:1.1rem}
.article__audio{margin:0 0 1.4rem}
.article__audio .label{font-size:.9rem;color:var(--muted);margin-bottom:4px;display:block}
.article p{max-width:38rem}

.why{margin:1.6rem 0 1.4rem;background:#fff5f3;border-left:5px solid var(--coral);border-radius:0 12px 12px 0;
  padding:16px 20px}
.why h3{font-size:1.05rem;color:var(--heading);margin-bottom:.35rem}
.why p{margin:0}

.sources h3{font-size:1rem;margin-bottom:.4rem}
.sources ul{margin:0;padding:0;list-style:none;font-size:.97rem}
.sources li{padding:.45em 0;border-top:1px solid var(--rule)}
.sources a{color:var(--heading);font-weight:700;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
.sources a:hover{color:var(--coral-ink)}
.sources .src-meta{color:var(--muted)}
.to-top{display:inline-block;margin-top:1rem;font-size:.95rem;color:var(--muted)}

.empty{max-width:var(--measure);margin:0 auto;background:var(--paper);border-radius:18px;padding:28px}

.archive{max-width:var(--measure);margin:40px auto 0}
.archive h2{font-size:1.3rem;margin-bottom:.6rem}
.archive ul{margin:0;padding:0;list-style:none}
.archive li{padding:.5em 0;border-top:1px solid var(--rule)}
.archive a{color:var(--heading)}

/* Einfache Textseiten (Datenschutz) */
.page{max-width:var(--measure);margin:0 auto;background:var(--paper);border-radius:18px;padding:clamp(22px,5vw,44px)}
.page h1{font-size:clamp(1.8rem,5vw,2.4rem);margin-bottom:1rem}
.page h2{font-size:1.25rem;margin:1.8rem 0 .5rem}
.page ul{padding-left:1.2em}
.page a{color:var(--heading);text-decoration-color:var(--coral)}

/* --- Fuss ----------------------------------------------------------------- */
.site-footer{background:var(--night);color:var(--night-muted);padding:48px 0 56px;font-size:1rem}
.site-footer .logo__word{font-size:3rem}
.site-footer .grid{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:760px){.site-footer .grid{grid-template-columns:1.4fr 1fr}}
.site-footer h2{color:#fff;font-size:1.1rem;margin-bottom:.5rem}
.site-footer p{max-width:36rem}
.site-footer a{color:#fff;text-decoration-color:var(--coral);text-underline-offset:3px}
.site-footer ul{margin:0;padding:0;list-style:none}
.site-footer li{margin:.4em 0}

@media (max-width:520px){
  body{font-size:1.0625rem}
  .masthead{padding:32px 0 28px}
  .status li{font-size:.9rem}
  .btn{flex:1 1 auto;justify-content:center}
  .paper{padding-top:24px}
  .article{border-radius:14px}
}
@media print{
  .masthead .toolbar,.prefs,.status,audio,.article__audio,.toc,.site-footer{display:none}
  body,.paper{background:#fff}
  .article{box-shadow:none}
}