/* ==========================================================================
   php-net.pro — Print-Ressortseite Dev: "DEV." (Boulevard/BILD-Anmutung).
   Roter Logo-Block, Screamer in Anton (immer Weight 400 — h1/h3-Default 700
   liesse Safari Faux-Bold interpolieren; Tracking groessenrelativ:
   >=90px -.03em · ~60-90px -.025em · ~30-60px -.015em; line-height >=1.12,
   Antons Versal-Umlaute/Akzente kollidieren sonst mit der Zeile darueber —
   alles empirisch, Jack 20.07.). Dark = Nacht-Boulevard, Weiss warm gedimmt.
   Konzept: mockups/news/mockup-sect-dev-blatt.html
   ========================================================================== */

@font-face {
	font-family: 'Anton';
	src: url('/fonts/anton.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('/fonts/archivo-var.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('/fonts/archivo-italic-var.woff2') format('woff2-variations');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	color-scheme: light;
	--desk: #d9d9d9;
	--white: #fff;
	--paper: #fff;
	--ink: #000;
	--ink-3: #666;
	--red: #dd0b2f;
	--yellow: #ffec00;
	--screamer-font: 'Anton', 'Arial Narrow', Impact, sans-serif;
	--sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

/* Nacht-Boulevard: Schwarz, warmweisse Rahmen/Schrift, Rot eine Stufe greller;
   Gelb-Flaechen behalten IMMER schwarze Schrift */
:root[data-theme="dark"] {
	color-scheme: dark;
	--desk: #030303;
	--paper: #121110;
	--white: #eae3d4;
	--ink: #e2dbce;
	--ink-3: #8a8477;
	--red: #f5133c;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--desk); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.4; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

.sheet { max-width: 1180px; margin: 26px auto 60px; padding: 0 0 30px; background: var(--paper); box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }

.utility { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); padding: 8px 26px; border-bottom: 1px solid var(--ink-3); }
.utility a { margin-left: 12px; }
.utility a:first-child { margin-left: 0; }
.utility .active { color: var(--red); font-weight: 900; }
.mode-toggle { background: none; border: 1px solid currentColor; border-radius: 4px; color: inherit; font: inherit; cursor: pointer; margin-left: 12px; padding: 1px 7px; }

/* ---- Kopf: roter Logo-Block + Datumszeile ---- */
.masthead { display: flex; align-items: stretch; gap: 18px; padding: 14px 26px 10px; }
.logoblock { background: var(--red); color: var(--white); font-family: var(--screamer-font); font-weight: 400; letter-spacing: -.025em; font-size: 74px; line-height: 1; padding: 10px 22px 14px; transform: skew(-4deg); box-shadow: 4px 4px 0 #000; }
.logoblock i { font-style: normal; display: block; transform: skew(4deg); }
.masthead-side { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.claim { margin: 0; font-weight: 900; font-style: italic; font-size: clamp(15px, 2vw, 21px); text-transform: uppercase; line-height: 1.15; }
.claim b { background: var(--yellow); color: #000; padding: 0 4px; }
.mast-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11px; font-weight: 700; text-transform: uppercase; border-top: 3px solid var(--ink); padding-top: 5px; }
.mast-meta .price { color: var(--red); }
.mast-meta .langs a { margin-left: 6px; }
.mast-meta .langs .active { color: var(--red); }

/* ---- Top-Teaser-Streifen ---- */
.topstrip { display: flex; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); margin: 0 26px 14px; }
.topstrip .strip-item { flex: 1; margin: 0; padding: 8px 12px; font-weight: 900; font-size: 13.5px; text-transform: uppercase; line-height: 1.2; }
.topstrip .strip-item + .strip-item { border-left: 3px solid var(--ink); }
.topstrip .strip-item .pg { color: var(--red); white-space: nowrap; }

/* ---- Screamer ---- */
.screamer-wrap { position: relative; padding: 4px 26px 12px; }
.kicker-red { display: inline-block; background: var(--red); color: var(--white); font-weight: 900; text-transform: uppercase; font-size: 14px; padding: 3px 10px; letter-spacing: .04em; transform: rotate(-1deg); }
.screamer { font-family: var(--screamer-font); font-weight: 400; font-size: clamp(46px, 8.2vw, 104px); line-height: 1.12; text-transform: uppercase; margin: 8px 0 6px; letter-spacing: -.03em; overflow-wrap: anywhere; }
.screamer .r { color: var(--red); }
.subscreamer { font-size: clamp(16px, 2.4vw, 22px); font-weight: 900; font-style: italic; margin: 0 0 8px; }
.screamer-body { max-width: 720px; font-size: 15.5px; font-weight: 400; margin: 0; }
.arrowline { font-weight: 900; color: var(--red); text-transform: uppercase; font-size: 13.5px; margin: 8px 0 0; }

/* Burst-Stern — Gelb traegt immer Schwarz. Float statt absolute: echte
   Titel sind lang, der Screamer lief sonst UNTER den Stern (Befund 20.07.) */
.burst { float: right; margin: 0 0 12px 26px; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--yellow); color: #000; clip-path: polygon(50% 0%, 61% 12%, 76% 5%, 79% 21%, 95% 21%, 89% 36%, 100% 45%, 88% 55%, 95% 70%, 79% 70%, 76% 86%, 61% 79%, 50% 92%, 39% 79%, 24% 86%, 21% 70%, 5% 70%, 12% 55%, 0% 45%, 11% 36%, 5% 21%, 21% 21%, 24% 5%, 39% 12%); transform: rotate(8deg); font-weight: 900; font-size: 15px; line-height: 1.05; text-transform: uppercase; }
.burst span { display: block; max-width: 62%; }
.burst small { display: block; font-size: 10.5px; }

/* ---- Kasten-Collage ---- */
.collage { display: grid; grid-template-columns: 1.15fr .85fr 1fr; gap: 14px; padding: 6px 26px 0; }
.box { border: 3px solid var(--ink); padding: 12px 14px; min-width: 0; }
.box .bk { display: inline-block; background: var(--ink); color: var(--paper); font-weight: 900; font-size: 11px; text-transform: uppercase; padding: 2px 8px; margin-bottom: 6px; }
.box .bk.red { background: var(--red); color: var(--white); }
.box h3 { font-family: var(--screamer-font); font-weight: 400; font-size: 30px; line-height: 1.15; text-transform: uppercase; margin: 0 0 6px; letter-spacing: -.015em; overflow-wrap: anywhere; }
.box h3 .r { color: var(--red); }
.box p { margin: 0; font-size: 13.5px; }
.box .pg { font-weight: 900; color: var(--red); text-transform: uppercase; font-size: 12px; }
/* Schwarz-Kasten bleibt in beiden Themes schwarz — im Dark traegt ihn der Rahmen */
.box-invert { background: #000; color: var(--white); }
.box-invert h3 .y { color: var(--yellow); }
.box-invert .pg { color: var(--yellow); }

/* Frage-Kasten quer — Gelb traegt immer Schwarz */
.question-band { margin: 14px 26px 0; border: 3px solid var(--ink); background: var(--yellow); color: #000; padding: 12px 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.question-band h3 { font-family: var(--screamer-font); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 3.4vw, 36px); line-height: 1.15; margin: 0; flex: 1; letter-spacing: -.015em; }
.question-band .q-note { margin: 0; font-size: 12.5px; font-weight: 700; max-width: 320px; }
.question-band .pg { color: var(--red); font-weight: 900; }

/* ---- "Ausserdem"-Spalten ---- */
.also { margin: 14px 26px 0; border-top: 3px solid var(--ink); padding-top: 10px; column-count: 2; column-gap: 40px; }
.also p { margin: 0 0 8px; font-weight: 900; font-size: 13px; text-transform: uppercase; line-height: 1.25; break-inside: avoid; }
.also p b { color: var(--red); }

/* ---- Blaettern + Leerzustand + Colophon ---- */
.pager { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 14px 26px 0; border-top: 3px solid var(--ink); padding-top: 8px; font-size: 13px; font-weight: 900; text-transform: uppercase; }
.pager a { color: var(--red); }
.pager .pos { color: var(--ink-3); }
.section-empty { padding: 46px 26px 36px; text-align: center; font-style: italic; }
.credit { margin: 12px 26px 0; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.credit a { margin-right: 10px; }

@media (max-width: 900px) {
	.sheet { margin: 0; box-shadow: none; }
	.masthead, .screamer-wrap, .section-empty { padding-left: 16px; padding-right: 16px; }
	.utility { padding: 8px 16px; }
	.topstrip, .collage, .question-band, .also, .pager, .credit { margin-left: 16px; margin-right: 16px; }
	.collage { grid-template-columns: 1fr; }
	.logoblock { font-size: 46px; }
	.burst { display: none; }
	.topstrip { flex-direction: column; }
	.topstrip .strip-item + .strip-item { border-left: 0; border-top: 3px solid var(--ink); }
	.also { column-count: 1; }
}

/* ---- Artikelseite (Boulevard-Innenseite) ---- */

.logoblock-small { font-size: 46px; padding: 8px 16px 10px; }
.art.screamer-wrap { padding-bottom: 4px; }
.art-screamer { font-size: clamp(36px, 5.4vw, 72px); }
.art-body { max-width: 760px; font-size: 15.5px; line-height: 1.55; margin-top: 12px; }
.art-body > p { margin: 0 0 .9em; overflow-wrap: anywhere; }
.art-attrib { font-size: 12px; color: var(--ink-3); }
.art-source { display: inline-block; margin-top: 4px; background: var(--ink); color: var(--paper); font-weight: 900; text-transform: uppercase; font-size: 12px; padding: 4px 10px; }
.ai-label { margin: 14px 0 0; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); }
.art-back { margin-top: 12px; }