/* Maurice Morning Post — Design-Tokens & Layout (aus Design-Handoff V0.3) */

:root {
  --paper:#f5f2ec; --ink:#141009; --soft:#3a362c; --mute:#8d8776;
  --rule:#e2dbcc; --gold:#9c8a5f; --head:#110f08;
  --ph1:#e8e3d7; --ph2:#dad4c3; --chip:#ffffff; --chipbd:#e2dbcc;
  --cpol:#b23048; --ctech:#6a3fd6; --cwirt:#237a37; --cwiss:#0b857b;
  --cges:#c23f74; --cgam:#cf610f; --ckul:#9c7d1e; --cwelt:#2456a8;
  --cki:#0f7fa8;
  --ccell:#a8552e;   /* 26.07.: celluloid (Kino) — Kupfer */
  --schatten:0 18px 38px -18px rgba(0,0,0,.36);
}
[data-theme="dark"] {
  --paper:#141319; --ink:#f2eee6; --soft:#c9c4b7; --mute:#7d7869;
  --rule:#272531; --gold:#ad9560; --head:#f6f2e9;
  --ph1:#2b2740; --ph2:#211d33; --chip:#1e1c26; --chipbd:#2a2833;
  --cpol:#f0607a; --ctech:#a87bff; --cwirt:#6bcb77; --cwiss:#4ecdc4;
  --cges:#f78fb3; --cgam:#ff8c42; --ckul:#ffd166; --cwelt:#7fa8ff;
  --cki:#5ad0f0;
  --ccell:#ff9d73;
}

/* Rubrik-Akzent als Klasse (nutzt --acc) */
.c-politik{--acc:var(--cpol)} .c-tech{--acc:var(--ctech)} .c-wirtschaft{--acc:var(--cwirt)}
.c-wissenschaft{--acc:var(--cwiss)} .c-gesundheit{--acc:var(--cges)}
.c-gaming{--acc:var(--cgam)} .c-kultur{--acc:var(--ckul)} .c-gossip{--acc:var(--cwiss)}
.c-ki{--acc:var(--cki)}
.c-celluloid{--acc:var(--ccell)}
.c-weltblick{--acc:var(--cwelt)}

*{box-sizing:border-box; margin:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-weight:490; /* V0.5 */
  transition:background .35s ease, color .35s ease;
}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.serif{font-family:'Source Serif 4',Georgia,serif}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}

.container{max-width:1440px; margin:0 auto; padding:0 40px}
.schmal{max-width:1200px}

/* ---------- Utility-Bar & Masthead (Werte exakt aus Prototyp V0.4) ---------- */
.utility{display:flex; justify-content:space-between; align-items:center; padding:9px 4px 0; font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.toggle{cursor:pointer; border:1px solid var(--chipbd); background:var(--chip); border-radius:9999px; padding:6px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.toggle:hover{color:var(--gold)}
.masthead{text-align:center; padding:14px 0 0}
.eyebrow{font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--gold)}
.masthead h1{font-family:'Source Serif 4',serif; font-size:62px; line-height:1; font-weight:700; letter-spacing:-.028em; color:var(--head); margin-top:12px}
.masthead h1 a:hover{opacity:.85}
.sonntags-titel{font-family:'IBM Plex Sans',sans-serif; font-size:16px; font-weight:700; letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:var(--gold); margin-top:10px}

.datumszeile{display:flex; align-items:center; gap:20px; margin:20px 0 0; color:var(--mute); font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap}
.datumszeile::before,.datumszeile::after{content:""; flex:1; height:1px; background:var(--rule)}

/* ---------- Nav (Prototyp: Sans 11.5/600, .15em, Punkte 5px) ---------- */
nav[data-nav]{display:flex; justify-content:center; flex-wrap:wrap; gap:8px 26px; padding:14px 0 16px; border-bottom:1px solid var(--rule); font-family:'IBM Plex Sans',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase}
nav[data-nav] a, nav[data-nav] span{display:inline-flex; align-items:center; gap:7px; color:var(--soft)}
nav[data-nav] a:hover{color:var(--gold); transition:color .16s}
nav[data-nav] .punkt{width:5px; height:5px; border-radius:50%; background:var(--acc,var(--mute))}
nav[data-nav] span.bald{color:var(--mute); opacity:.55; cursor:default}

/* ---------- Hero-Grid ---------- */
.hero{display:grid; grid-template-columns:1.95fr 1fr .92fr; gap:0; padding:26px 0 34px}
.hero > *{padding:0 28px}
.hero > *:first-child{padding-left:0}
.hero > *:last-child{padding-right:0}
.hero .spalte-mitte{border-left:1px solid var(--rule); border-right:1px solid var(--rule)}

.kicker{display:inline-flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc,var(--gold))}
.kicker::before{content:""; width:22px; height:2px; background:var(--acc,var(--gold))}

.aufmacher h2{font-family:'Source Serif 4',serif; font-size:44px; line-height:1.08; font-weight:700; letter-spacing:-.02em; color:var(--head); margin:12px 0 14px}
.aufmacher .vorspann{font-family:'Source Serif 4',serif; font-style:italic; font-size:19.5px; line-height:1.5; color:var(--soft); margin-bottom:18px}
.aufmacher .fliess{font-size:17px; line-height:1.66; color:var(--soft)}
.aufmacher .fliess::first-letter{font-family:'Source Serif 4',serif; font-size:58px; font-weight:700; float:left; line-height:.9; padding:4px 10px 0 0; color:var(--head)}
/* Initiale NUR im ersten Fliess-Absatz — Breaking zeigt bis zu 3 (23.07.);
   first-of-type griffe nicht (der Vorspann ist ebenfalls ein <p>) */
.aufmacher .fliess ~ .fliess::first-letter{font-family:inherit; font-size:inherit; font-weight:inherit; float:none; line-height:inherit; padding:0; color:inherit}
.aufmacher .fliess + .fliess{margin-top:14px}
.byline{margin-top:16px; padding-top:12px; border-top:1px solid var(--rule); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}

/* Faktenkasten «Zahlen & Fakten» (U02 §2.5/§4: LLM liefert Zahlen, Code zeichnet) */
.faktenkasten{border-top:2px solid var(--head); border-bottom:1px solid var(--rule); padding:14px 0 12px; margin:6px 0 22px}
.faktenkasten h4{font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--head); margin-bottom:10px}
.fk-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px}
.fk-kachel{background:var(--chip); border:1px solid var(--chipbd); border-radius:10px; padding:12px 12px 10px; text-align:center}
.fk-wert{font-family:'Source Serif 4',serif; font-size:24px; font-weight:800; color:var(--head); line-height:1.1; overflow-wrap:break-word; hyphens:auto}
.fk-wert.fk-wert-lang{font-size:15px; line-height:1.3}
.fk-name{font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-top:5px}
.fk-quelle{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--mute); margin-top:9px}

/* Wikipedia-Verweis (U03 §5): maximal dezent — nur ein kleiner Punkt */
.wikiref{color:inherit; text-decoration:none}
.wikiref sup{color:var(--gold); font-size:.75em; line-height:0; margin-left:1px}
.wikiref:hover sup{color:var(--head)}

/* Korrekturspalte (U03 §3) */
.korr-leer{font-family:'Source Serif 4',serif; font-style:italic; font-size:15px; color:var(--soft); padding:8px 0}
.korr-hinweis{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.06em; color:var(--mute); margin-top:6px; text-transform:uppercase}

/* Sonntag ist Lesetag (U02 §3): mehr Weissraum, groesserer Auftritt */
body.sonntag .hero{padding:38px 0 46px}
body.sonntag .aufmacher h2{font-size:50px}
body.sonntag .band{padding:16px 0 40px}
body.sonntag article.teaser{padding:20px 0}

/* Druck (U03 §7 Interim): Browser-Druck -> ordentliches PDF */
@media print{
  .utility,.toggle,nav[data-nav],.mini-head,#mmp-progress,.zurueck,.blaettern{display:none !important}
  body{background:#fff}
  .hero{grid-template-columns:1fr; gap:0}
  .hero > *{padding:0; border:none}
  a{color:inherit}
  .band-grid{grid-template-columns:1fr 1fr}
  .wetter-widget,.foto,.foto-echt img{break-inside:avoid}
  article.teaser,.fk-kachel,.kuerze li{break-inside:avoid}
}

/* «Ausserdem in dieser Ausgabe» — fuellt die linke Hero-Spalte unter dem
   Aufmacher, damit bei langer Rail kein Weissraum-Loch klafft */
.ausserdem{border-top:2px solid var(--head); margin-top:26px; padding-top:12px}
.ausserdem h4{font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--head); margin-bottom:2px}
.ausserdem-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 32px}
.ausserdem-grid .a-teaser{display:block; padding:14px 0; border-bottom:1px solid var(--rule); transition:transform .24s cubic-bezier(.22,1,.36,1)}
.ausserdem-grid .a-teaser:hover{transform:translateY(-2px)}
.ausserdem-grid .a-teaser:hover h3{opacity:.82}
.ausserdem-grid .a-teaser h3{font-family:'Source Serif 4',serif; font-size:19px; line-height:1.22; font-weight:600; color:var(--head); margin:7px 0 6px}
.ausserdem-grid .a-teaser p{font-size:14.5px; line-height:1.5; color:var(--soft)}

/* Bild-Platzhalter (Fallback, wenn Quelle kein Bild liefert) */
.foto{background:repeating-linear-gradient(45deg,var(--ph1),var(--ph1) 14px,var(--ph2) 14px,var(--ph2) 28px); border:1px solid var(--rule); border-radius:12px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--mute); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; margin:16px 0}

/* Echte Artikelbilder (Vorschaubilder der Quellen, lokal gehostet) */
.foto-echt{margin:16px 0}
/* Grundregel (Maurice 20.07.): Bilder werden NIRGENDS beschnitten —
   Querformate fuellen die Breite, Hochformate stehen schmaler zentriert */
.foto-echt img{width:auto; max-width:100%; aspect-ratio:auto; height:auto; max-height:640px; object-fit:contain; margin:0 auto; border-radius:12px; border:1px solid var(--rule); display:block; background:var(--ph1)}
.foto-echt figcaption{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--mute); margin-top:6px}
.r-zeile .foto-echt{margin:0}
.r-aufmacher .foto-echt{margin:0}

/* Teaser (Mittelspalte + Karten) */
article.teaser{cursor:pointer; padding:16px 0; transition:transform .24s cubic-bezier(.22,1,.36,1)}
article.teaser + article.teaser{border-top:1px solid var(--rule)}
article.teaser:hover{transform:translateY(-3px)}
article.teaser:hover h3{opacity:.82}
.teaser h3{font-family:'Source Serif 4',serif; font-size:21px; line-height:1.14; font-weight:600; color:var(--head); margin:9px 0 8px}
.teaser p{font-size:15.5px; line-height:1.55; color:var(--soft)}

/* ---------- Rail (Werte 1:1 aus Prototyp V0.4) ---------- */
.rail h4, .mitte-kasten h4, .kuerze-ende h4{font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--head); padding-bottom:7px; border-bottom:1px solid var(--gold); margin-bottom:4px}
.ressort-grid .rail{position:sticky; top:96px; align-self:start}
.rail section + section{margin-top:22px}
.nummeriert{list-style:none; counter-reset:n}
.nummeriert li{counter-increment:n; display:flex; gap:13px; padding:9.5px 0; border-bottom:1px solid var(--rule); transition:background .2s, padding-left .2s}
.nummeriert li a{font-family:'Source Serif 4',serif; font-weight:600; font-size:16px; line-height:1.22; color:var(--ink)}
.nummeriert li:hover{background:var(--chip); padding-left:6px}
.nummeriert li::before{content:counter(n); font-family:'Source Serif 4',serif; font-variant-numeric:tabular-nums; font-size:22px; line-height:1; font-weight:700; color:var(--mute); min-width:22px}
.kuerze{list-style:none}
.kuerze li{display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--rule); font-size:14.5px; line-height:1.5; color:var(--soft)}
.kuerze .punkt{flex:none; width:7px; height:7px; border-radius:50%; margin-top:7px; background:var(--acc,var(--gold))}
.kuerze .q{color:var(--mute); font-size:12px; font-family:'IBM Plex Mono',monospace}
.kuerze a{color:var(--soft)}
.kuerze a:hover{color:var(--head)}

/* Wetter-Widget */
.wetter-widget{display:block; background:var(--chip); border:1px solid var(--chipbd); border-radius:12px; padding:12px 14px; cursor:pointer; transition:transform .24s cubic-bezier(.22,1,.36,1); overflow:hidden}
/* Widget traegt den Himmels-Verlauf der Wetterseite (data-sky, weiter unten);
   feste Textfarben, damit es in Hell UND Dunkel lesbar bleibt */
.wetter-widget .stadt{display:flex; justify-content:space-between; align-items:center; gap:8px}
.wetter-widget .wg{display:inline-flex; opacity:.85}
.wetter-widget[data-sky] .temp{color:#221f16}
.wetter-widget[data-sky] .stadt,.wetter-widget[data-sky] .cond,.wetter-widget[data-sky] .hilo{color:#4a453a}
.wetter-widget:hover{transform:translateY(-3px); box-shadow:var(--schatten)}
.wetter-widget .stadt{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute)}
.wetter-widget .temp{font-family:'Source Serif 4',serif; font-size:32px; font-weight:700; color:var(--head)}
.wetter-widget .cond{font-size:13px; color:var(--soft)}
.wetter-widget .hilo{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mute); margin-top:3px}

/* ---------- Ressort-Baender ---------- */
.band{padding:6px 0 22px}

/* Sonntagsausgabe: «Hintergrund der Woche» — gold abgesetzt, Serif-Teaser */
.sonntag-band{border-top:2px solid var(--gold); padding-top:14px}
.sonntag-band .balken-gold{display:inline-block; width:10px; height:14px; background:var(--gold); border-radius:2px; margin-right:10px}
.sonntag-band h5{font-size:23px; line-height:1.18}
.sonntag-band p{font-family:'Source Serif 4',serif; font-size:15.5px; line-height:1.55}
.sonntag-band .s-fuss{font-size:10.5px; letter-spacing:.08em; color:var(--mute); margin-top:8px; text-transform:uppercase}
.sonntag-grid{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}   /* passt sich iPad an */
.band-kopf{display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--gold); padding:10px 0 14px}
.band-kopf h3{display:inline-flex; align-items:center; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--head)}
.band-kopf h3 .balken{width:26px; height:12px; background:var(--acc,var(--gold)); border-radius:2px}
.band-kopf .alle{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mute)}
.band-kopf .alle:hover{color:var(--gold)}
.band-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.band-grid article{cursor:pointer; transition:transform .24s cubic-bezier(.22,1,.36,1)}
.band-grid article:hover{transform:translateY(-3px)}
.band-grid article:hover h5{opacity:.82}
.band-grid .over{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc,var(--gold))}
.band-grid h5{font-family:'Source Serif 4',serif; font-size:19.5px; line-height:1.25; font-weight:700; color:var(--head); margin:7px 0 7px}
.band-grid p{font-size:14.5px; line-height:1.5; color:var(--soft)}
.band-grid.dreier{grid-template-columns:repeat(3,1fr)}

/* ---------- Mosaik «Ausserdem heute» + Rhythmus-Baender (Maurice 19.07.) ---------- */
.mosaik-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px 26px}
.mosaik-grid article{grid-column:span 3; border-top:2px solid var(--acc,var(--gold)); padding-top:12px; cursor:pointer; transition:transform .24s cubic-bezier(.22,1,.36,1)}
.mosaik-grid article:hover{transform:translateY(-3px)}
.mosaik-grid article:hover h5{opacity:.82}
.mosaik-grid .mo-gross{grid-column:span 6}
.mosaik-grid .mo-mittel{grid-column:span 4}
.mosaik-grid h5{font-family:'Source Serif 4',serif; font-size:16px; line-height:1.25; font-weight:700; color:var(--head); margin:7px 0 7px}
.mosaik-grid .mo-gross h5{font-size:23px; line-height:1.18}
.mosaik-grid .mo-mittel h5{font-size:18.5px}
.mosaik-grid p{font-size:14.5px; line-height:1.5; color:var(--soft)}
.mo-bild{width:auto; max-width:100%; aspect-ratio:auto; height:auto; max-height:420px; object-fit:contain; margin:0 auto 10px; display:block; border-radius:4px}
.mosaik-grid .over,.bd-lead .over,.bz-teaser .over{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc,var(--gold))}
.band-duo{display:grid; grid-template-columns:2fr 1fr; gap:26px}
.bd-lead{cursor:pointer}
.bd-lead:hover h5{opacity:.82}
.bd-lead h5{font-family:'Source Serif 4',serif; font-size:23px; line-height:1.2; font-weight:700; color:var(--head); margin:7px 0 8px}
.bd-lead p{font-size:15px; line-height:1.55; color:var(--soft)}
.bd-liste{list-style:none; border-left:1px solid var(--rule); padding-left:22px; display:flex; flex-direction:column; justify-content:center}
.bd-liste li{padding:8px 0}
.bd-liste li + li{border-top:1px solid var(--rule)}
.bd-liste a{font-family:'Source Serif 4',serif; font-size:16px; line-height:1.3; font-weight:600; color:var(--ink)}
.bd-liste a:hover{opacity:.8}
.band-zitat{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center}
.band-zitat blockquote{margin:0}
.band-zitat .bz-text{display:block; font-family:'Source Serif 4',serif; font-size:22px; line-height:1.4; font-style:italic; color:var(--head)}
.band-zitat footer{margin-top:10px; font-family:'IBM Plex Mono',monospace; font-size:11px; font-style:normal; color:var(--mute)}
.band-zitat blockquote a:hover .bz-text{opacity:.82}
.bz-teaser{display:flex; flex-direction:column; gap:14px}
.bz-teaser article + article{border-top:1px solid var(--rule); padding-top:14px}
.bz-teaser article{cursor:pointer}
.bz-teaser article:hover h5{opacity:.82}
.bz-teaser h5{font-family:'Source Serif 4',serif; font-size:17px; line-height:1.25; font-weight:700; color:var(--head); margin:6px 0 6px}
.bz-teaser p{font-size:14px; line-height:1.5; color:var(--soft)}

/* ---------- KI-Briefing (S5d, Mo+Do) + Handelswoche (S5e, Sa) — Uebergabe 19.07. ---------- */
.kib-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px 34px}
.kib{border-top:1px solid var(--rule); padding-top:12px}
.kib h5{font-family:'Source Serif 4',serif; font-size:18px; line-height:1.25; font-weight:700; margin:0 0 6px}
.kib h5 a{color:var(--head)}
.kib h5 a:hover{opacity:.8}
.kib p{font-size:14.5px; line-height:1.55; color:var(--soft)}
.kib-quelle{margin-top:7px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--gold)}
.handelswoche{padding:6px 0 30px}
.hw-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px 24px; margin-bottom:10px}
.hw{background:var(--chip); border:1px solid var(--chipbd); border-radius:10px; padding:12px 14px}
.hw-kopf{display:flex; justify-content:space-between; align-items:center; gap:8px}
.hw-name{font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--head)}
.hw-signal{font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.12em; padding:2px 7px; border-radius:99px}
.sig-kauf{background:#1c7c43; color:#fff}
.sig-verkauf{background:#b3352c; color:#fff}
.sig-halt,.sig-neutral{background:transparent; color:var(--mute); border:1px solid var(--chipbd)}
.hw-kurs{font-family:'Source Serif 4',serif; font-size:22px; font-weight:800; color:var(--head); margin:7px 0 3px}
.hw-einheit{font-size:11px; font-weight:400; color:var(--mute)}
.hw-wg{font-family:'IBM Plex Mono',monospace; font-size:12px; margin-left:6px}
.hw-wg.plus{color:#1c7c43}
.hw-wg.minus{color:#b3352c}
.hw-spark{width:100%; height:44px; margin:4px 0 6px}
.hw-spark polyline{stroke:var(--gold); stroke-width:2}
.hw-fakten{font-family:'IBM Plex Mono',monospace; font-size:10px; line-height:1.6; color:var(--mute)}
/* Analyse-Ausbau 25.07. (Maurice: «mehr Analysen wie beim alten Cron») */
.hw-kommentar{font-family:'Source Serif 4',serif; font-size:15px; line-height:1.7; color:var(--soft); max-width:74ch; margin:2px 0 18px}
.hw-kommentar strong{color:var(--head)}
.hw-analyse{border-top:1px solid var(--chipbd); margin-top:9px; padding-top:8px}
.hw-schlagzeile{font-family:'IBM Plex Sans',sans-serif; font-size:11.5px; font-weight:700; line-height:1.4; color:var(--head); margin-bottom:5px}
.hw-gruende{list-style:none; margin:0 0 6px; padding:0; font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; line-height:1.55; color:var(--mute)}
.hw-gruende li{padding-left:10px; position:relative}
.hw-gruende li::before{content:"·"; position:absolute; left:0; color:var(--gold); font-weight:700}
.hw-marken{font-family:'IBM Plex Mono',monospace; font-size:9.5px; line-height:1.6; letter-spacing:.01em; color:var(--soft)}
/* Version-1.0-Banderole (26.07., Maurice: «alte Schrift wie Tagi, 3D,
   groesser»): fette Fraktur UnifrakturCook, gepraegte 3D-Buchstaben */
.v1-ecke{position:absolute; top:0; right:0; width:280px; height:280px; overflow:hidden; pointer-events:none; z-index:6}
.v1-band{position:absolute; top:88px; right:-62px; transform:rotate(45deg); background:linear-gradient(180deg,#c9ab6d,#9c8a5f 62%,#8a7950); color:#171006; font-family:'Pirata One','UnifrakturCook','Source Serif 4',serif; font-weight:400; font-size:35px; line-height:1; letter-spacing:.05em; white-space:nowrap; padding:12px 80px; box-shadow:0 4px 18px rgba(0,0,0,.4); border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(0,0,0,.3); text-shadow:0 -1px 0 rgba(255,246,220,.5), 0 2px 0 #5c4d2f, 0 3px 0 #46391f, 0 4px 6px rgba(0,0,0,.45)}
/* Banderole aktiv: der Hell/Dunkel-Knopf weicht ihr nach links aus */
body:has(.v1-ecke) .toggle{margin-right:250px}
/* Serifen-V (27.07., Maurice: bessere Lesbarkeit) — V aus der Masthead-Serife */
.v1-v{font-family:'Source Serif 4',serif; font-weight:800; font-size:.92em; letter-spacing:0}
/* BETA-Zusatz (28.07., Maurice): normale Schrift neben der Fraktur */
.v1-beta{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:.42em; letter-spacing:.22em; vertical-align:.18em; padding-left:2px}

/* ---------- 1.0beta (26.07., schlafend bis Aktivierung) ---------- */
.hw-mehr{display:inline-block; margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em; color:var(--gold)}
.hw-mehr:hover{color:var(--head)}
a.km-kasten{display:block; color:inherit}
a.km-kasten:hover .km-titel, a.km-kasten:hover .km-signatur{color:var(--gold)}
/* Kommentar-Band (28.07.): flache Leiste unter der Titelzone */
.km-band{border-top:2px solid var(--head); border-bottom:1px solid var(--rule); margin:26px 0 6px}
.km-band a{display:flex; align-items:baseline; gap:22px; padding:13px 2px; color:inherit}
.km-band-kopf{flex:none; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.km-band-haupt{font-family:'Source Serif 4',serif; font-size:15.5px; line-height:1.5; color:var(--soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.km-band-haupt strong{color:var(--head)}
.km-band-mehr{flex:none; margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:var(--mute); white-space:nowrap}
.km-band a:hover .km-band-mehr, .km-band a:hover .km-band-kopf{color:var(--head)}
/* Zahl-des-Tages-Band (28.07., Platztausch mit dem Kommentar) */
.zt-band .zt-band-wert{flex:none; font-family:'Source Serif 4',serif; font-size:30px; font-weight:800; line-height:1; color:var(--head); letter-spacing:-.02em}
/* «Heute vor …» quer in der linken Spalte (28.07.) — drei Eintraege nebeneinander */
.heutevor-quer{margin-top:26px; border-top:1px solid var(--rule); padding-top:12px}
.heutevor-quer h4{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-bottom:12px}
.heutevor-quer .heutevor{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0 26px}
.heutevor-quer .heutevor li{display:flex; gap:10px; font-size:13px; line-height:1.55; color:var(--soft); border-left:1px solid var(--rule); padding-left:14px}
.heutevor-quer .heutevor li:first-child{border-left:none; padding-left:0}
.heutevor-quer .jahr{flex:none; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--gold)}
@media (max-width:900px){
  .heutevor-quer .heutevor{grid-template-columns:1fr; gap:10px}
  .heutevor-quer .heutevor li{border-left:none; padding-left:0}
}
.km-kasten .km-titel{font-family:'Source Serif 4',serif; font-size:17px; font-weight:800; line-height:1.35; color:var(--head); margin:2px 0 8px}
.km-text{font-family:'Source Serif 4',serif; font-size:14px; line-height:1.65; color:var(--soft); margin-bottom:9px}
.km-text:first-of-type::first-letter{font-weight:800; color:var(--head)}
.km-signatur{font-family:'IBM Plex Mono',monospace; font-size:10px; line-height:1.6; letter-spacing:.04em; color:var(--mute); border-top:1px solid var(--chipbd); padding-top:7px; margin-top:4px}
.km-signatur a{color:var(--mute)} .km-signatur a:hover{color:var(--gold)}
.zurueck{font-family:'IBM Plex Mono',monospace; font-size:11px; margin-bottom:14px}
.zurueck a{color:var(--mute)} .zurueck a:hover{color:var(--gold)}
.md-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:6px 0 14px}
.md-kurs{font-family:'Source Serif 4',serif; font-size:34px; font-weight:800; color:var(--head)}
.md-chart{width:100%; height:180px; background:var(--chip); border:1px solid var(--chipbd); border-radius:10px; padding:8px}
.md-chart polyline{stroke:var(--gold); stroke-width:2}
.md-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:18px 0 6px}
.md-zelle{background:var(--chip); border:1px solid var(--chipbd); border-radius:10px; padding:11px 12px}
.md-wert{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--head)}
.md-label{font-family:'IBM Plex Sans',sans-serif; font-size:10px; letter-spacing:.04em; color:var(--mute); margin-top:3px}
.md-analyse,.md-hist,.md-artikel{margin-top:26px}
.md-hist table{border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:11.5px; margin-top:8px}
.md-hist th{text-align:left; color:var(--mute); font-weight:400; letter-spacing:.06em; padding:4px 26px 6px 0; border-bottom:1px solid var(--rule)}
.md-hist td{padding:6px 26px 6px 0; border-bottom:1px solid var(--rule); color:var(--soft)}

/* ---------- Titelseiten-Extras A-D (Maurice 19.07.) ---------- */
.fuenfmin{list-style:none}
.fuenfmin li{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid var(--rule)}
.fuenfmin a{font-family:'Source Serif 4',serif; font-size:15px; line-height:1.3; font-weight:600; color:var(--ink)}
.fuenfmin a:hover{opacity:.8}
.fuenfmin .fm-zeit{flex:none; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--mute)}
.fm-summe{margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold)}
.zahl-tages .zt-wert{font-family:'Source Serif 4',serif; font-size:30px; font-weight:800; line-height:1.05; color:var(--head); margin-top:6px}
.zahl-tages .zt-wert.lang{font-size:21px; line-height:1.2}
.zahl-tages .zt-name{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin-top:5px}
.zahl-tages .zt-titel{font-size:13.5px; line-height:1.45; color:var(--soft); margin-top:7px}
.zahl-tages a:hover .zt-wert{opacity:.85}
.zahl-tages .fk-quelle{margin-top:7px}
.depeschen{border-top:2px solid var(--gold); margin-top:4px; padding:12px 0 26px}
.depeschen .dp-kopf{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--head); margin-bottom:14px}
.dp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.dp-grid a:hover .dp-titel{opacity:.8}
.dp-ort{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold)}
.dp-titel{display:block; font-family:'Source Serif 4',serif; font-size:15px; line-height:1.3; font-weight:600; color:var(--ink); margin-top:5px}
/* Breaking V2 (Maurice 23.07., zweite Runde): KEIN Vollbreiten-Solo —
   grosser Aufmacher links (breiter als normal), EIN kleinerer Artikel in
   der Mitte, Rail mit Wetter bleibt oben rechts. Die «Ausserdem»-
   Aufzaehlung schliesst an Breaking-Tagen die Seite ab (Template). */
.hero.breaking{grid-template-columns:2.35fr 1.05fr .92fr}
.hero.breaking .aufmacher h2{font-size:clamp(30px,2.9vw,40px); line-height:1.08}
.hero.breaking .aufmacher .vorspann{font-size:18px}
.hero.breaking .spalte-mitte .teaser h3{font-size:23px; line-height:1.2}
.ausserdem-ende{border-top:1px solid var(--rule); margin-top:36px; padding-top:22px}
/* Breaking-Loch-Fix (23.07.): kompakte Kaesten in der Mitte, In Kuerze
   als Querleiste am Seitenende — die Rail diktiert nicht mehr die Hoehe */
.mitte-kasten{margin-top:26px; padding-top:18px; border-top:1px solid var(--rule)}
.kuerze-ende{border-top:1px solid var(--rule); margin-top:30px; padding-top:20px}
.kuerze-ende .kuerze{column-count:3; column-gap:46px; margin-top:12px}
.kuerze-ende .kuerze li{break-inside:avoid; margin-bottom:13px}
.ausblick-text{font-size:17px; line-height:1.65; color:var(--soft); max-width:900px; margin:6px 0 4px}
/* Stadt als goldene Sparten-Kopfzeile (Maurice 24.07.: «noch zu unauffaellig») */
.ausblick-stadt{display:block; font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:16px 0 3px}
.kurz-notiert{margin-top:34px; border-top:1px solid var(--rule); padding-top:10px}
/* 26.07. (Maurice): 2x2-Raster — 2 nebeneinander, je 2 untereinander
   (Schriftgroesse kommt aus .kuerze li — eine font-size hier waere tot) */
.kurz-notiert .kn-zeilen{margin-top:10px; display:grid; grid-template-columns:repeat(2,1fr); max-width:1080px; gap:6px 44px; align-items:start}
.kurz-notiert .kn-zeilen li{margin-bottom:0; border-bottom:0}

/* ---------- Footer (mit Impressum-Charme + Statistik) ---------- */
footer.seite{border-top:1px solid var(--rule); margin-top:18px; padding:22px 0 34px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--mute)}
footer.seite > div{display:flex; flex-direction:column; gap:5px}

/* ---------- Charme-Kaesten (S5b Extras) ---------- */
.heutevor{list-style:none}
.heutevor li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--rule); font-size:14.5px; line-height:1.5; color:var(--soft)}
.heutevor .jahr{font-family:'Source Serif 4',serif; font-weight:700; font-size:15px; color:var(--gold); flex:none; min-width:52px; font-variant-numeric:tabular-nums}
.maerkte{list-style:none}
.maerkte li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:12px 0; border-bottom:1px solid var(--rule)}
.maerkte .name{font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.maerkte .zahlen{text-align:right; white-space:nowrap}
.maerkte .kurs{font-family:'Source Serif 4',serif; font-weight:700; font-size:20px; color:var(--head); font-variant-numeric:tabular-nums}
.maerkte .delta{font-family:'IBM Plex Sans',sans-serif; font-size:12px; font-weight:600; margin-left:8px}
.maerkte .delta.plus{color:var(--cwirt)}
.maerkte .delta.minus{color:var(--cpol)}
.gestern-zeile{border-top:2px solid var(--head); padding:14px 0 0; margin-top:30px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute)}
.gestern-zeile .serif{font-family:'Source Serif 4',serif; font-size:16px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--soft); font-style:italic; margin-left:8px}

/* ---------- Sticky-Mini-Header ---------- */
.mini-head{position:fixed; top:0; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 6px 18px -12px rgba(0,0,0,.3); transform:translateY(-100%); transition:transform .28s cubic-bezier(.22,1,.36,1); z-index:50}
.mini-head.on{transform:translateY(0)}
.mini-head .inner{max-width:1440px; margin:0 auto; padding:10px 40px; display:flex; align-items:center; gap:26px}
.mini-head .logo{display:inline-flex; align-items:center; gap:9px; font-family:'Source Serif 4',serif; font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--head); white-space:nowrap}
.mini-head .logo::before{content:""; width:5px; height:22px; background:var(--gold)}
.mini-head nav{display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.mini-head nav a:hover{color:var(--gold)}
.mini-head nav a{display:inline-flex; align-items:center; gap:7px}
.mini-head .punkt{width:5px; height:5px; border-radius:50%; background:var(--acc,var(--mute))}
.mini-head .toggle{margin-left:auto}
@media (max-width:1400px){
  /* iPad 28.07. (Maurice, 2. Runde): mit Logo+Toggle wrappte die Leiste
     zum sichtverdeckenden Turm; ganz weg war sie ihm zu wenig. Unterhalb
     der sicheren Einzeilen-Breite bleibt darum NUR die Rubrikzeile —
     kompakt und zentriert, wie der klebende Kopfrest der Unterseiten. */
  .mini-head .logo, .mini-head .toggle{display:none}
  .mini-head .inner{padding:0 16px; justify-content:center}
  .mini-head nav{justify-content:center; gap:8px 18px; padding:10px 0 11px}
}

/* ---------- Sticky-Kopf (Unterseiten, V0.4: 3 Spalten + Nav darunter) ---------- */
/* Unterseiten-Kopf (26.07., Maurice: «Header springt beim Klick nach
   oben») — jetzt Masthead-Anatomie wie die Titelseite: grosser
   zentrierter Titel, Folio links, Knopf rechts. Sticky mit NEGATIVEM
   top: der Masthead scrollt weg, nur die Nav-Zeile bleibt kleben. */
.kopf{position:sticky; top:-158px; background:var(--paper); z-index:40; border-bottom:1px solid var(--rule)}
.kopf::before{content:""; display:block; height:1px; background:var(--gold); opacity:.55}
.kopf .inner{max-width:1440px; margin:0 auto; padding:14px 40px 0; display:block; position:relative; text-align:center}
.kopf .meta-links{position:absolute; left:40px; top:19px; font-size:11px; letter-spacing:.08em; color:var(--mute)}
.kopf .logo{display:inline-block; font-family:'Source Serif 4',serif; font-size:56px; font-weight:700; letter-spacing:-.028em; color:var(--head); white-space:nowrap; margin:40px 0 30px}
.kopf .toggle{position:absolute; right:40px; top:13px}
.kopf nav[data-nav]{border-bottom:none; padding-bottom:12px}

/* ---------- Ressort-Seite ---------- */
.section-head{padding:8px 0 8px}
.r-leer{font-family:'Source Serif 4',serif; font-style:italic; font-size:17.5px; line-height:1.6; color:var(--mute); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:34px 0; margin:10px 0}
.section-head h1{display:flex; align-items:center; gap:16px; font-family:'Source Serif 4',serif; font-size:52px; font-weight:800; letter-spacing:-.02em; color:var(--head); margin:8px 0}
.section-head h1 .balken{width:14px; height:40px; border-radius:3px; background:var(--acc,var(--gold))}
.section-head .meta{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mute)}
.ressort-grid{display:grid; grid-template-columns:1.75fr .9fr; gap:44px; padding:22px 0 40px}
.r-aufmacher{display:grid; grid-template-columns:1fr 1.1fr; gap:28px; padding-bottom:24px; border-bottom:1px solid var(--rule); cursor:pointer}
.r-aufmacher h2{font-family:'Source Serif 4',serif; font-size:30px; line-height:1.15; font-weight:700; color:var(--head); margin:10px 0 12px}
.r-aufmacher .vorspann{font-size:16.5px; line-height:1.55; color:var(--soft)}
.r-aufmacher .foto{margin:0}
.r-aufmacher:hover h2{opacity:.82}
.r-zeile{display:grid; grid-template-columns:1fr 380px; gap:28px; padding:22px 0; border-bottom:1px solid var(--rule); cursor:pointer}
.r-zeile h3{font-family:'Source Serif 4',serif; font-size:25px; line-height:1.2; font-weight:700; color:var(--head); margin:8px 0 9px}
.r-zeile p{font-size:16.5px; line-height:1.55; color:var(--soft)}
.r-zeile .foto{margin:0; aspect-ratio:16/10}
.r-zeile:hover h3{opacity:.82}
.r-fuss{display:flex; align-items:center; gap:12px; margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mute)}
.r-fuss .linie{flex:1; height:1px; background:var(--rule)}

/* ---------- Artikel-Seite ---------- */
#mmp-progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--gold); z-index:60}
.zurueck{display:inline-block; margin:10px 0 6px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mute)}
.zurueck:hover{color:var(--gold)}
.artikel-grid{display:grid; grid-template-columns:1.7fr .9fr; gap:48px; padding:10px 0 48px}
.artikel h1{font-family:'Source Serif 4',serif; font-size:46px; line-height:1.08; font-weight:800; letter-spacing:-.02em; color:var(--head); margin:14px 0 16px}
/* Artikel- und Boulevard-Bilder werden NIE beschnitten (Maurice 20.07.):
   Querformate fuellen die Breite, Hochformate stehen schmaler und
   zentriert unter dem Hoehendeckel — Koepfe bleiben dran */
.artikel .foto-echt img,
.blvd-karte .foto-echt img{aspect-ratio:auto; width:auto; max-width:100%; height:auto; max-height:720px; object-fit:contain; margin:0 auto; display:block}
.artikel .vorspann{font-family:'Source Serif 4',serif; font-style:italic; font-size:21px; line-height:1.5; color:var(--soft); margin-bottom:14px}
.artikel .byline{border-top:none; border-bottom:1px solid var(--rule); padding:0 0 14px; margin:0 0 6px}
.artikel .fliess p{font-family:'Source Serif 4',serif; font-size:18.5px; line-height:1.72; color:var(--soft); margin:0 0 20px}
.artikel .fliess p:first-of-type::first-letter{font-family:'Source Serif 4',serif; font-size:58px; font-weight:700; float:left; line-height:.9; padding:5px 10px 0 0; color:var(--head)}
blockquote.zitat{border-left:3px solid var(--gold); margin:26px 0; padding:6px 0 6px 22px; font-family:'Source Serif 4',serif; font-style:italic; font-size:24px; line-height:1.4; color:var(--head)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 8px}
.tags span{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--mute); border:1px solid var(--chipbd); background:var(--chip); border-radius:6px; padding:4px 9px}
.quellenzeile{margin-top:18px; padding-top:14px; border-top:1px solid var(--rule); font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mute)}
.quellenzeile a{color:var(--gold)}
.weiter li{list-style:none; padding:9.5px 0; border-bottom:1px solid var(--rule)}
.weiter .over{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc,var(--gold))}
.weiter h5{font-family:'Source Serif 4',serif; font-size:18px; line-height:1.3; font-weight:700; color:var(--head); margin-top:5px}
.weiter a:hover h5{opacity:.82}

/* ---------- Wetter-Seite V0.5: Himmels-Poster ---------- */
[data-sky="klar"]{background:linear-gradient(160deg,#f6e8c2 0%,#efd28e 55%,#e2b166 100%)}
[data-sky="wolken"]{background:linear-gradient(160deg,#e9e2ce 0%,#d3c9ac 60%,#b4a98a 100%)}
[data-sky="regen"]{background:linear-gradient(160deg,#d9d7c9 0%,#b3b3a2 60%,#8f9180 100%)}
[data-sky="nacht"]{background:linear-gradient(160deg,#232842 0%,#2e3354 60%,#454a74 100%)}
[data-sky="morgen"]{background:linear-gradient(160deg,#2b2f4a 0%,#8a5a62 62%,#d9a06b 100%)}
[data-sky="nacht"] span,[data-sky="nacht"] div,[data-sky="nacht"] h3,
[data-sky="morgen"] span,[data-sky="morgen"] div,[data-sky="morgen"] h3{color:#ecebf4 !important}

.service-head{border-bottom:2px solid var(--head); padding-bottom:16px; margin-bottom:28px}
.service-head .s-eyebrow{font-family:'IBM Plex Sans',sans-serif; font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:10px}
.service-head h1{margin:0; font-family:'Source Serif 4',serif; font-weight:800; font-size:52px; line-height:1; letter-spacing:-.02em; color:var(--head); display:flex; align-items:center; gap:16px}
.service-head .balken{width:12px; height:44px; background:var(--gold); display:inline-block}
.service-head .meta{margin-top:12px; font-size:11.5px; color:var(--mute)}

.wgrid{display:grid; grid-template-columns:1fr 1fr; gap:34px}
.poster{position:relative; border-radius:16px; overflow:hidden; padding:24px 26px 20px; border:1px solid var(--rule)}
.poster .ghost{position:absolute; right:-26px; top:-26px; opacity:.18; color:#2f2c24}
.poster > *{position:relative}
.poster .p-kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.poster .p-stadt{font-family:'Source Serif 4',serif; font-weight:800; font-size:34px; letter-spacing:-.02em; color:#221f16}
.poster .p-cond{font-family:'Source Serif 4',serif; font-style:italic; font-size:17px; color:#4a453a; margin-top:3px}
.poster .p-rechts{text-align:right}
.poster .p-temp{font-family:'Source Serif 4',serif; font-weight:800; font-size:68px; line-height:.85; letter-spacing:-.03em; color:#221f16; font-variant-numeric:tabular-nums}
.poster .p-hilo{font-size:11px; color:#4a453a; margin-top:8px; white-space:nowrap}
.poster .p-zeile{display:flex; gap:14px; margin-top:12px; font-size:10.5px; color:#4a453a; flex-wrap:wrap}
.poster .p-zeile span{white-space:nowrap}
.poster .p-webcam{margin-top:18px; border-radius:10px; overflow:hidden; aspect-ratio:21/7; box-shadow:0 16px 34px -18px rgba(0,0,0,.5); position:relative}
.poster .p-webcam img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.poster .p-live{position:absolute; left:9px; bottom:8px; z-index:2; font-size:9.5px; color:#f4f2ea !important; background:rgba(22,19,12,.55); padding:2px 7px; border-radius:3px; white-space:nowrap}
.poster .p-spark{display:flex; align-items:center; gap:12px; margin-top:16px}
.poster .p-spark span{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#4a453a}
.poster .p-linie{height:1px; background:rgba(30,26,16,.16); margin:12px 0 10px}
.poster .p-tage{display:flex; gap:6px}
.poster .p-tag{flex:1; text-align:center}
.poster .p-tag .t{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#4a453a}
.poster .p-tag .hi{font-family:'Source Serif 4',serif; font-size:19px; font-weight:700; color:#221f16; margin-top:4px}
.poster .p-tag .lo{font-size:11px; color:#4a453a}
.poster .p-tag .c{font-size:11px; color:#4a453a; margin-top:2px}
[data-sky="nacht"].poster .ghost, [data-sky="morgen"].poster .ghost{color:#ecebf4}

.weltband{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding:10px 0 34px}
.weltkarte{border-radius:14px; padding:18px 18px 15px; min-height:176px; min-width:0; display:flex; flex-direction:column; gap:11px; border:1px solid var(--rule)}
.weltkarte .w-kopf{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.weltkarte .w-stadt{font-family:'Source Serif 4',serif; font-weight:700; font-size:21px; color:#221f16}
.weltkarte .w-glyphe{color:#4a453a; display:inline-flex; flex:none}
.weltkarte .w-mitte{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.weltkarte .w-temp{font-family:'Source Serif 4',serif; font-weight:800; font-size:40px; line-height:.9; color:#221f16; font-variant-numeric:tabular-nums}
.weltkarte .w-cond{font-family:'Source Serif 4',serif; font-style:italic; font-size:14.5px; color:#4a453a; text-align:right; min-width:0}
.weltkarte .w-band{display:flex; align-items:center; gap:8px; margin-top:auto}
.weltkarte .w-band .mono{font-size:10.5px; color:#4a453a; white-space:nowrap}
.weltkarte .skala{position:relative; flex:1; height:4px; border-radius:9999px; background:rgba(110,110,132,.32); display:inline-block; overflow:hidden}
.weltkarte .fuellung{position:absolute; top:0; bottom:0; border-radius:9999px; background:linear-gradient(90deg,#7fa3cf,#e3b45e)}
.weltkarte .w-fuss{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 8px; font-size:10.5px; color:#4a453a}
.hinweis{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--mute); padding-bottom:30px}

/* ---------- Leitartikel (V0.5: Politik & Wirtschaft) ---------- */
.leitartikel{display:block; border-top:2px solid var(--head); padding:14px 0 24px; border-bottom:1px solid var(--rule); margin-bottom:6px; cursor:pointer}
.leitartikel .kicker{font-family:'IBM Plex Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:.15em}
.leitartikel h2{margin:10px 0 12px; font-family:'Source Serif 4',serif; font-weight:800; font-size:38px; line-height:1.05; letter-spacing:-.02em; color:var(--head); text-wrap:balance; max-width:26ch}
.leitartikel .vorspann{margin:0 0 12px; font-family:'Source Serif 4',serif; font-style:italic; font-size:18.5px; line-height:1.5; color:var(--soft); max-width:56ch}
.leitartikel .l-meta{font-family:'IBM Plex Sans',sans-serif; font-size:11px; color:var(--mute)}
.leitartikel:hover h2{opacity:.82}

/* ---------- Gaming-Sonderlayout (V0.5) ---------- */
.g-hero{display:grid; grid-template-columns:1.6fr 1fr; gap:30px; padding-bottom:10px; border-bottom:1px solid var(--rule); margin-bottom:6px}
.g-bild{width:100%; aspect-ratio:16/9; border-radius:3px; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--ph1),var(--ph2))}
.g-bild img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.g-badge-zeile{display:flex; justify-content:flex-end; margin:-12px 10px 0 0; position:relative; z-index:2}
.g-badge{background:var(--cgam); color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:4px 10px; border-radius:4px; box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.g-kicker{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cgam); margin-top:2px}
.g-haupt{display:block; cursor:pointer}
.g-haupt h2{margin:7px 0 10px; font-family:'Source Serif 4',serif; font-weight:700; font-size:33px; line-height:1.06; letter-spacing:-.015em; color:var(--head); text-wrap:balance}
.g-haupt p{margin:0 0 10px; font-family:'Source Serif 4',serif; font-size:16.5px; line-height:1.5; color:var(--soft); max-width:58ch}
.g-meta{font-family:'IBM Plex Sans',sans-serif; font-size:11px; color:var(--mute)}
.g-seite{display:flex; flex-direction:column}
.g-zweit{display:block; cursor:pointer; padding-bottom:16px}
.g-zweit h3{margin:6px 0 6px; font-family:'Source Serif 4',serif; font-weight:600; font-size:21px; line-height:1.16; color:var(--head)}
.g-text{display:block; cursor:pointer; padding-top:16px; border-top:1px solid var(--rule)}
.g-text h3{margin:6px 0 6px; font-family:'Source Serif 4',serif; font-weight:600; font-size:20px; line-height:1.16; color:var(--head)}
.g-text p{margin:0; font-family:'Source Serif 4',serif; font-size:14.5px; line-height:1.42; color:var(--soft)}
.g-haupt:hover h2, .g-zweit:hover h3, .g-text:hover h3, .g-zeile:hover h3{opacity:.82}
.g-zeile{display:grid; grid-template-columns:128px 1fr; gap:20px; padding:15px 0; border-bottom:1px solid var(--rule); cursor:pointer}
.g-thumb{aspect-ratio:1; border-radius:3px; position:relative; overflow:hidden; align-self:start; background:linear-gradient(135deg,var(--ph1),var(--ph2))}
.g-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
/* Blur-Backdrop (24.07., Maurice: Letterbox-Balken «sehen billig aus»):
   dasselbe Bild geblurt als Fuellung hinter dem unbeschnittenen Bild —
   Deko-Layer darf beschnitten sein, der Inhalt liegt komplett darueber */
.g-bild .g-blur, .g-thumb .g-blur{object-fit:cover; filter:blur(22px) saturate(1.15) brightness(.72); transform:scale(1.12)}
.g-thumb-ph{position:absolute; inset:0}
.g-inhalt{align-self:center}
.g-inhalt h3{margin:5px 0 6px; font-family:'Source Serif 4',serif; font-weight:600; font-size:21px; line-height:1.18; color:var(--head)}
.g-inhalt p{margin:0; font-size:15px; line-height:1.5; color:var(--soft)}
.g-notizen{margin-top:24px; border-top:2px solid var(--head); padding-top:14px}
.g-notizen ul{list-style:none; margin:0; padding:0}
.g-notizen li{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--rule)}
.g-notizen .n-titel{font-family:'Source Serif 4',serif; font-weight:600; font-size:16px; color:var(--ink)}
.g-notizen .n-zeit{font-size:10.5px; color:var(--mute); white-space:nowrap}

/* ---------- «Aus dem Blatt» (V0.5, Ende jeder Ressort-Seite) ---------- */
.adb{margin-top:34px; border-top:2px solid var(--head); padding-top:14px}
.adb-kopf{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.adb-kopf .titel{font-family:'IBM Plex Sans',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--head)}
.adb-kopf .linie{flex:1; height:1px; background:var(--rule)}
.adb-kopf .mono{font-size:10px; letter-spacing:.1em; color:var(--mute)}
.adb-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 38px}
.adb-zeile{display:flex; gap:12px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--rule); cursor:pointer}
.adb-zeile .label{font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--acc,var(--gold)); flex:none; min-width:96px}
.adb-zeile .titel{font-family:'Source Serif 4',serif; font-weight:600; font-size:17px; line-height:1.25; color:var(--ink)}
.adb-zeile:hover .titel{opacity:.82}

/* ---------- Deckblatt (V0.4 Login-Optik; Auth macht nginx) ---------- */
body.deckblatt{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 24px}
.deck-karte{width:460px; max-width:100%; text-align:center}
.deck-karte .eyebrow.gold{margin-top:34px; font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--gold)}
.deck-karte h1{font-family:'Source Serif 4',serif; font-size:42px; line-height:1; font-weight:700; letter-spacing:-.025em; color:var(--head); margin:14px 0 8px}
.deck-datum{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mute)}
.deck-karte .linie{height:1px; background:var(--gold); opacity:.55}
.deck-karte .linie.unten{margin-top:34px}
.deck-form{margin-top:34px; display:flex; flex-direction:column; gap:12px}
.deck-input{width:100%; box-sizing:border-box; background:var(--chip); border:1px solid var(--chipbd); border-radius:9999px; padding:13px 22px; font-family:'IBM Plex Sans',sans-serif; font-size:15px; color:var(--ink); outline:none; text-align:center}
.deck-input:focus{border-color:var(--gold)}
.deck-knopf{display:block; width:100%; background:var(--head); color:var(--paper); border:none; border-radius:9999px; padding:13px; font-family:'IBM Plex Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.deck-knopf:hover{opacity:.92}
.deck-fehler{font-family:'IBM Plex Sans',sans-serif; font-size:12.5px; color:var(--cpol); margin-top:2px}
.deck-fuss{margin-top:30px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--mute)}

/* ---------- Artikel-Blättern (V0.4) ---------- */
.blaettern{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:32px; border-top:2px solid var(--head); padding-top:16px}
.blaettern .richtung{font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mute); margin-bottom:6px}
.blaettern .btitel{font-family:'Source Serif 4',serif; font-weight:600; font-size:17px; line-height:1.25; color:var(--head)}
.blaettern a:hover .btitel{opacity:.82}
.blaettern .rechts{grid-column:2; text-align:right}

/* ---------- Gossip-Boulevard (V0.4) ---------- */
.blvd-aufmacher{display:block; cursor:pointer}
.blvd-aufmacher .foto-echt{margin:0 0 18px}
.blvd-aufmacher .foto-echt img{aspect-ratio:auto; width:auto; max-width:100%; height:auto; max-height:700px; object-fit:contain; margin:0 auto; display:block}
.blvd-aufmacher h2{font-family:'Source Serif 4',serif; font-style:italic; font-size:40px; line-height:1.12; font-weight:700; letter-spacing:-.02em; color:var(--head); margin:12px 0 12px}
.blvd-aufmacher .vorspann{font-size:17.5px; line-height:1.55; color:var(--soft)}
.blvd-aufmacher:hover h2{opacity:.82}
.bild-abend{display:block}
.bild-abend img{width:auto; max-width:100%; aspect-ratio:auto; height:auto; max-height:560px; object-fit:contain; margin:0 auto; display:block; border-radius:12px; border:1px solid var(--rule)}
.bild-abend .unterschrift{font-family:'Source Serif 4',serif; font-size:16px; line-height:1.4; color:var(--head); margin-top:10px}
.bild-abend .credit{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--mute); margin-top:4px}
/* Spalten-Satz statt striktem Raster: Textkarten ohne Bild hinterlassen
   keine Grid-Loecher mehr (Maurice 20.07.) */
.blvd-grid{columns:3; column-gap:30px; padding:26px 0 10px}
.blvd-grid .blvd-karte{break-inside:avoid; margin-bottom:30px}
.blvd-karte{display:block; cursor:pointer; transition:transform .24s cubic-bezier(.22,1,.36,1)}
.blvd-karte:hover{transform:translateY(-3px)}
.blvd-karte.versetzt{transform:none}
.blvd-karte.versetzt:hover{transform:translateY(-3px)}
.blvd-karte .foto-echt{margin:0 0 12px}
.blvd-karte h3{font-family:'Source Serif 4',serif; font-size:22px; line-height:1.22; font-weight:700; color:var(--head); margin:0 0 8px}
.blvd-karte h3.gross{font-style:italic; font-size:24px; line-height:1.2}
.blvd-karte .druckregel{height:2px; background:var(--head); margin-bottom:14px}
.blvd-karte p{font-size:15px; line-height:1.55; color:var(--soft)}
.blvd-karte .meta{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--mute); margin-top:10px}
.zitat-abend{text-align:center; padding:44px 60px 40px; margin-top:40px; border-top:1px solid var(--rule)}
.zitat-abend .label{font-family:'IBM Plex Sans',sans-serif; font-size:10px; font-weight:600; letter-spacing:.42em; text-transform:uppercase; color:var(--gold)}
.zitat-abend blockquote{font-family:'Source Serif 4',serif; font-style:italic; font-size:30px; line-height:1.4; color:var(--head); margin:18px auto 14px; max-width:900px}
.zitat-abend blockquote::before{content:"« "; color:var(--gold)}
.zitat-abend blockquote::after{content:" »"; color:var(--gold)}
.zitat-abend .meta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--mute)}
.zitat-abend .meta:hover{color:var(--gold)}

/* ---------- Responsive (iPad Hochformat) ---------- */
@media (max-width:900px){
  .kurz-notiert .kn-zeilen{grid-template-columns:1fr}
  .kurz-notiert .kn-zeilen li{border-bottom:1px solid var(--rule)}
  .md-grid{grid-template-columns:repeat(2,1fr)}
  .container{padding:0 24px}
  .masthead h1{font-size:46px}
  .hero{grid-template-columns:1fr 1fr}
  .hero .aufmacher{grid-column:1/-1; border-bottom:1px solid var(--rule); padding:0 0 24px}
  .hero .spalte-mitte{border-left:none; padding-left:0}
  .hero .rail{padding-right:0}
  .band-grid,.band-grid.dreier{grid-template-columns:repeat(2,1fr)}
  .mosaik-grid article,.mosaik-grid .mo-gross,.mosaik-grid .mo-mittel{grid-column:span 6}
  .band-duo,.band-zitat{grid-template-columns:1fr}
  .bd-liste{border-left:none; padding-left:0}
  .dp-grid{grid-template-columns:repeat(2,1fr)}
  .hero.breaking{grid-template-columns:1fr 1fr}
  .hero.breaking .aufmacher h2{font-size:34px}
  .kuerze-ende .kuerze{column-count:1}
  .kib-grid{grid-template-columns:1fr}
  .hw-grid{grid-template-columns:repeat(2,1fr)}
  .ressort-grid,.artikel-grid{grid-template-columns:1fr}
  .wetter-karten{grid-template-columns:1fr}
  .weltband{grid-template-columns:repeat(2,1fr)}
  .r-zeile{grid-template-columns:1fr}
  .section-head h1{font-size:40px}
  .blvd-grid{columns:2}
  .blvd-karte.versetzt{transform:none}
  .zitat-abend{padding:34px 10px 30px}
  .zitat-abend blockquote{font-size:24px}
  .wgrid{grid-template-columns:1fr}
  .weltband{grid-template-columns:repeat(2,1fr)}
  .g-hero{grid-template-columns:1fr}
  .g-zeile{grid-template-columns:104px 1fr}
  .adb-grid{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1250px){
  /* Kaskaden-Fix 24.07.: stand NACH der 900er-Query und ueberschrieb
     deren 2-Spalten-Weltband auf iPad hochkant */
  .weltband{grid-template-columns:repeat(3,1fr)}
}


/* ---------- V0.8 Titelseiten-Politur (Maurice 24.07.) ----------
   Reine Veredelungs-Schicht: Karten, Hover, Folio-Linie, Fokus.
   Keine Layout-/Hoehenaenderungen — die Spaltenbalance bleibt. */
.hero{border-bottom:2px solid var(--head)}
.mitte-kasten, .zahl-tages.mitte-kasten{background:var(--chip); border:1px solid var(--chipbd); border-radius:14px; padding:16px 18px 14px; border-top:1px solid var(--chipbd)}
.mitte-kasten + .mitte-kasten{margin-top:18px}
.ausserdem-grid .a-teaser{border:1px solid var(--chipbd); border-radius:12px; padding:14px 16px; transition:transform .18s ease, background .18s ease, box-shadow .18s ease}
.ausserdem-grid .a-teaser:hover{background:var(--chip); transform:translateY(-2px); box-shadow:var(--schatten)}
.spalte-mitte .teaser h3, .band h5, .mosaik-grid h5, .weiter h5{transition:color .16s ease}
.spalte-mitte .teaser:hover h3, .band a:hover h5, .mosaik-grid a:hover h5, .weiter a:hover h5{color:var(--gold)}
.mosaik-grid article{transition:transform .18s ease}
.mosaik-grid article:hover{transform:translateY(-2px)}
.kurz-notiert .kn-zeilen a:hover, .kuerze a:hover{color:var(--gold)}
a:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:4px}
.gestern-zeile{border-top:2px solid var(--head); padding-top:14px}