/* Self-hosted (both SIL Open Font License 1.1, see fonts/OFL-*.txt), so no reader IP
   goes to a font CDN.
   Newsreader is a text face drawn for news: it carries a headline at 24px without
   shouting and stays readable at a glance, which is the whole job here. IBM Plex Sans
   Condensed takes the furniture -- outlet names and times -- because German mastheads
   are long and "Kölner Stadt-Anzeiger" has to sit on one line beside a headline. A serif
   for what is written, a condensed grotesk for what is machinery. */
@font-face { font-family: "Newsreader"; font-weight: 200 800; font-display: swap;
  src: url("fonts/newsreader-var.woff2") format("woff2-variations"); }
@font-face { font-family: "Plex Cond"; font-weight: 300; font-display: swap;
  src: url("fonts/plex-cond-300.woff2") format("woff2"); }
@font-face { font-family: "Plex Cond"; font-weight: 400; font-display: swap;
  src: url("fonts/plex-cond-400.woff2") format("woff2"); }
@font-face { font-family: "Plex Cond"; font-weight: 700; font-display: swap;
  src: url("fonts/plex-cond-700.woff2") format("woff2"); }

/* One palette, both themes. Each token names its light value first as a fallback for
   browsers without light-dark(), then the pair. Because light-dark() resolves against the
   used `color-scheme`, the switcher only has to change that one property -- there is no
   second copy of the palette to keep in step. Light is the page: off-white ground with
   the cards white on it; dark lifts off pure black and lifts the cards again off that. */
:root {
  color-scheme: dark light;
  /* Videotext. ARD-Text and ZDFtext delivered German headlines on a black screen for
     thirty years with no pictures at all -- the same constraint this site works under --
     and they navigated by colour key. So: near-black ground, panels one step up out of
     it, paper-white headlines for the thirty things a reader is scanning, and the
     saturated colour kept in the furniture where it codes rather than decorates.
     Dark is the design; light is a coherent inversion onto newsprint, not pure white. */
  --bg: #0a0b0d;      --bg: light-dark(#e7e5df, #0a0b0d);
  --ink: #f2f0ea;     --ink: light-dark(#16181b, #f2f0ea);
  --link: #8ad4e8;    --link: light-dark(#0f5f73, #8ad4e8);
  --grau: #9aa3ab;    --grau: light-dark(#5d646b, #9aa3ab);
  --grau2: #7b848c;   --grau2: light-dark(#767d84, #7b848c);
  --linie: #272b31;   --linie: light-dark(#cdd0cc, #272b31);
  --akzent: #8ad4e8;  --akzent: light-dark(#0f5f73, #8ad4e8);
  --frisch: #ff6b5e;  --frisch: light-dark(#c0271a, #ff6b5e);
  --grund: #15171b;   --grund: light-dark(#faf9f6, #15171b);
  --banner: #1c1f24;  --banner: light-dark(#eceae4, #1c1f24);
}
/* A reader's explicit choice overrides the operating system, in both directions. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* No gradient wash: a teletext screen is flat. The only depth is a slight fall-off at
     the edges, the way a CRT darkens away from centre. */
  background-color: var(--bg);
  background-image: radial-gradient(120% 90% at 50% 0%,
    color-mix(in srgb, var(--ink) 4%, transparent), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: "Plex Cond", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  text-wrap: pretty;
}
a { color: var(--link); text-decoration: none; transition: color .12s ease; }
a:visited { color: var(--link); }            /* a read page must not look like a different page */
a:hover { color: var(--ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.wrap { position: relative; width: min(1560px, 96vw); margin: 0 auto; padding: 0 8px; }

/* --- ad slots ------------------------------------------------------------- */
/* A slot is an empty box until an ad script fills it, and empty it takes no space: the
   page without ads is the design, not a page with holes in it. */
.anzeige { position: relative; display: grid; place-items: center; margin: 0 auto 26px; max-width: 100%; }
.anzeige:empty { display: none; }
.anzeige::before { content: "Anzeige"; position: absolute; top: -17px; left: 0; font-size: 11px;
  font-weight: 300; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--grau2); }
.anzeige.billboard { margin-top: 10px; }
.anzeige.leaderboard { grid-column: 1 / -1; }
.anzeigen { display: none; }
/* From 1408px up the page narrows to leave the same margin on both sides, and the rail
   sits in the right one, outside the content: with the rail blocked or unsold the page is
   still centred. The content is 940px at 1408 and grows with the window from 1604 on,
   keeping 332px a side for a 300px rail, up to the 1560 it has always had; between, the
   rail is 202 to 300px wide and takes the 200x600 sitebar. */
@media (min-width: 88rem) {
  :root { --inhalt: clamp(940px, 100vw - 664px, 1560px); --rand: calc((100vw - var(--inhalt)) / 2); }
  .wrap { width: var(--inhalt); }
  .inhalt { position: relative; }
  .anzeigen { display: block; position: absolute; top: 0; bottom: 0; left: calc(100% + 16px);
    width: min(300px, calc(var(--rand) - 32px)); }
  .anzeigen-innen { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 34px; }
  .anzeige.infeed { display: none; }   /* the rectangle lives in the rail here */
}

/* --- masthead ------------------------------------------------------------- */
/* After time.mk: the wordmark sits in the middle, the clock and the reach flank it, and
   a bar of sections runs underneath. */
/* The rule under the masthead is doubled, thick over thin, the way a paper sets it. */
.kopfzeile { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 22px 0 14px;
  border-bottom: 3px solid var(--ink); box-shadow: 0 2px 0 var(--bg), 0 3px 0 var(--ink); }
.kopfzeile h1 { grid-column: 2; margin: 0; font-family: "Newsreader", Georgia, serif;
  font-size: 64px; font-weight: 800; letter-spacing: -.012em; line-height: .95;
  color: var(--ink); text-align: center; font-variant: small-caps; }
.kopfzeile h1 a { color: inherit; }
.kopfzeile h1 a:hover { text-decoration: none; }
.kopfzeile .stand { grid-column: 1; margin: 0; color: var(--grau); font-size: 13px;
  font-weight: 300; letter-spacing: .1em; text-transform: uppercase; }
.kopfzeile .reichweite { grid-column: 3; margin: 0; color: var(--grau); font-size: 13px;
  font-weight: 300; text-align: right; letter-spacing: .1em; text-transform: uppercase; }
.kopfzeile time { color: var(--ink); font-weight: 700; }

.ressorts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px;
  padding: 9px 0 10px; margin: 0 0 18px; border-bottom: 1px solid var(--linie); }
.ressorts a { padding: 3px 13px; color: var(--ink); font-size: 15px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  border-bottom: 2px solid transparent; transition: border-color .12s ease, color .12s ease; }
.ressorts a:hover { color: var(--akzent); border-bottom-color: var(--linie);
  text-decoration: none; }
.ressorts a[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--akzent); }
.ressorts .nebenan { color: var(--grau); font-weight: 400; }

/* --- two columns of section boxes ----------------------------------------- */
/* The lead band stands across the full width above the columns, and sets its three
   stories side by side rather than stacked: it has to read as one row of the day's
   biggest news, not as a fourth section box that happens to be on top. */
.aufmacher { margin: 0 0 26px; }
.aufmacher .cluster { border-bottom: 0; padding-top: 12px; }
.aufmacher .cluster h3 { font-size: 27px; line-height: 32px; }
@media (min-width: 62rem) {
  .aufmacher .kasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 26px; }
  .aufmacher .cluster + .cluster { border-left: 1px solid var(--linie); padding-left: 26px; }
}

/* One grid of boxes rather than two stacks, so a row's two panels share a height and a
   short one shows the gap instead of dragging its column out of step. Columns are assigned
   explicitly: letting the grid auto-place would slide a box into a neighbour's empty cell
   and undo the fixed sides. */
.spalten { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 62rem) {
  .spalten { grid-template-columns: 1fr 1fr; column-gap: 34px; }
  .ressort.links  { grid-column: 1; }
  .ressort.rechts { grid-column: 2; }
}

/* A panel lifted out of the ground, with its own header -- the shape time.mk uses, and
   why its sections read as separate things rather than one long scroll. */
.ressort { --farbe: #99a2aa; margin: 0 0 26px; background: var(--grund);
  border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
  /* fills the row it shares, so the empty space sits inside the panel rather than
     leaving it stranded above the page ground */
  min-width: 0; display: flex; flex-direction: column; }
.kasten { flex: 1; }
/* The teletext colour keys, tempered enough to sit behind running text: red, cyan,
   green, yellow, magenta, blue, steel, grey. One per section, and the section bar is the
   only place any of them appears. */
[data-ressort="inland"]     { --farbe: light-dark(#b8342a, #ff6b5e); }
[data-ressort="ausland"]    { --farbe: light-dark(#0f6b7d, #56c8dd); }
[data-ressort="wirtschaft"] { --farbe: light-dark(#1a7a3c, #52d183); }
[data-ressort="sport"]      { --farbe: light-dark(#8a6a00, #e3c552); }
[data-ressort="panorama"]   { --farbe: light-dark(#a32a7a, #f07cc4); }
[data-ressort="kultur"]     { --farbe: light-dark(#3a4fb0, #8a9ff0); }
[data-ressort="wissen"]     { --farbe: light-dark(#44606e, #a8c2d0); }
[data-ressort="kommen"]     { --farbe: light-dark(#5d646b, #99a2aa); }
[data-ressort="top"]        { --farbe: light-dark(#0f5f73, #8ad4e8); }

/* The panel header: a colour key down the left edge, the section name in that same
   colour. Headlines are cyan and constant while section names vary, so the two never
   read as the same thing -- which is what an all-ink heading got wrong. */
.balken { display: flex; align-items: stretch; gap: 11px; margin: 0; min-height: 38px;
  padding: 0 13px 0 0; border-bottom: 1px solid var(--linie);
  background: var(--banner); }
.balken .tab { flex: none; width: 5px; align-self: stretch; background: var(--farbe); }
.balken span { align-self: center; font-size: 20px; font-weight: 700; line-height: 1.1;
  letter-spacing: .13em; text-transform: uppercase; color: var(--farbe); }
.balken em { margin-left: auto; align-self: center; font-style: normal; font-size: 12px;
  color: var(--grau); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; }
.balken a { color: inherit; }
.kasten { padding: 0 13px; }

/* Out of a section box, into the section's own page. Sits inside .kasten, so the last
   story above it keeps the rule that :last-child would otherwise take away. */
.mehr { margin: 0; padding: 12px 0 2px; font-size: 14px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; }
.mehr a { color: var(--akzent); }
.mehr a::after { content: " \2192"; }

/* --- one story ------------------------------------------------------------ */
.cluster { padding: 14px 0 15px; border-bottom: 1px solid var(--linie); }
.cluster:last-child { border-bottom: 0; }
.cluster h3 { margin: 0; font-family: "Newsreader", Georgia, serif; hyphens: auto; overflow-wrap: break-word;
  font-size: 23px; line-height: 28px; font-weight: 700; letter-spacing: -.008em;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
  gap: 3px 10px; }
/* The lead rests at the colour everything else hovers to, and hovers to the colour
   everything else rests at. Size already says which headline is the story; this makes
   the reports under it read as sources rather than as rival headlines. */
.cluster h3 > a { grid-column: 1 / -1; grid-row: 1; color: var(--ink); }
.cluster h3 > a:visited { color: var(--ink); }   /* a read story is still the story */
.cluster h3 > a:hover { color: var(--akzent); }
.cluster h3 .abo { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
.cluster h3 .quelle { grid-column: 1; grid-row: 2; justify-self: start; }
.cluster h3 > time { grid-column: 2; grid-row: 2; }

.berichte { list-style: none; margin: 8px 0 0; padding: 0; }
.berichte li { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 0 12px; padding: 4px 0; font-size: 16px; line-height: 22px; align-items: baseline; }
.berichte li > a { grid-column: 1; }
.berichte .abo { grid-column: 1; justify-self: end; }
.berichte .quelle { grid-column: 2; }
.berichte > li > time { grid-column: 3; min-width: 3.1em; text-align: right; }

/* The firehose is the whole page rather than a footnote under a headline, so it reads a
   size up: nothing competes with it for attention here. */
.strom li { font-size: 18px; line-height: 25px; padding: 6px 0; }
.strom li > a { color: var(--ink); }
.strom li > a:visited { color: var(--ink); }
.strom li > a:hover { color: var(--akzent); }

.quelle { color: var(--grau); font-size: 14px; font-weight: 300; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
time { color: var(--grau2); font-size: 14px; font-weight: 300; white-space: nowrap; }
.frisch { color: var(--frisch); font-weight: 700; }
.abo { border: 1px solid var(--linie); border-radius: 3px; padding: 0 5px;
  color: var(--grau); font-size: 13px; white-space: nowrap; }

.fuss { margin: 9px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pille { display: inline-block; padding: 1px 9px; border-radius: 4px; font-size: 12px;
  font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  background: color-mix(in srgb, var(--farbe) 16%, var(--grund));
  border: 1px solid color-mix(in srgb, var(--farbe) 42%, var(--linie));
  color: color-mix(in srgb, var(--farbe) 72%, var(--ink)); }
.pille:visited { color: color-mix(in srgb, var(--farbe) 72%, var(--ink)); }
.pille:hover { text-decoration: none; color: var(--ink);
  background: color-mix(in srgb, var(--farbe) 28%, var(--grund)); }
.haeuser { color: var(--grau); font-size: 14px; font-weight: 300; }

/* --- Im Kommen ------------------------------------------------------------ */
.kommen { margin-top: 26px; }
.kommen-liste { list-style: none; margin: 0; padding: 10px 14px 14px; display: grid; gap: 7px; }
.kommen-liste li { display: grid; grid-template-columns: minmax(0, 1fr) max-content max-content;
  gap: 0 12px; align-items: baseline; font-size: 16px; line-height: 22px; }
.kommen-liste li > a { grid-column: 1; }
.kommen-liste .abo { grid-column: 1; justify-self: end; }
.kommen-liste .quelle { grid-column: 2; }
.kommen-liste .pille { grid-column: 3; }

.empty { padding: 32px 0; color: var(--grau); max-width: 60ch; }

/* --- sources table -------------------------------------------------------- */
.quellen { overflow-x: auto; margin: 18px 0 40px; }
.quellen table { border-collapse: collapse; width: 100%; font-size: 16px; }
.quellen th, .quellen td { text-align: left; padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--linie); white-space: nowrap; }
.quellen th { font-size: 14px; font-weight: 700; color: var(--grau); }
.quellen .num { text-align: right; font-variant-numeric: tabular-nums; }
.quellen abbr { text-decoration: underline dotted; cursor: help; }

footer { border-top: 2px solid var(--ink); margin-top: 36px; padding: 16px 0 40px;
  color: var(--grau); font-size: 14px; line-height: 1.55; }
footer p { margin: 0 0 6px; max-width: 90ch; }
/* The theme switch sits in the top corner of every page. Two states only: the page
   follows the operating system until the button is touched, and the icon shows the theme
   in effect rather than the one a click would bring. */
.thema { position: absolute; top: 16px; right: 8px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  background: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--grau);
  transition: color .12s ease, background-color .12s ease; }
.thema:hover { color: var(--ink); background: var(--banner); }
.thema:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.thema svg { width: 21px; height: 21px; display: none; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.thema .mond { fill: currentColor; stroke: none; }
.thema[data-zeigt="mond"] .mond { display: block; }
.thema[data-zeigt="sonne"] .sonne { display: block; }
/* the masthead's right-hand text would otherwise run under the button */
.kopfzeile .reichweite { padding-right: 34px; }
footer a { text-decoration: underline; }

/* --- story page, day page, archive --------------------------------------- */
.masthead-sub { padding: 20px 0 14px; border-bottom: 2px solid var(--ink); }
.masthead-sub h1 { margin: 0; font-family: "Newsreader", Georgia, serif;
  font-size: 34px; line-height: 40px; font-weight: 700;
  color: var(--ink); max-width: 46ch; text-wrap: balance; }
.kicker { margin: 0 0 8px; font-size: 15px; color: var(--grau); }
.facts { margin: 12px 0 0; color: var(--grau); font-size: 17px; max-width: 90ch; }
.closed { color: var(--ink); font-weight: 700; }

.timeline { list-style: none; margin: 14px 0 40px; padding: 0; }
.timeline li { display: grid; grid-template-columns: 4.2em 12em minmax(0, 1fr); gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--linie); align-items: baseline;
  font-size: 18px; line-height: 24px; }
.timeline > li > time { grid-column: 1; font-size: 15px; }
.timeline .src { grid-column: 2; color: var(--grau); font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.timeline .head { grid-column: 3; min-width: 0; font-family: "Newsreader", Georgia, serif; }
.agentur { border: 1px dashed var(--linie); border-radius: 3px; padding: 0 5px;
  margin-left: 6px; color: var(--grau); font-size: 13px; white-space: nowrap; }

main > .cluster { padding: 14px 0; }
.also { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--linie); }
.also h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grau); }
.also ul { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 5px; }
.also li { font-size: 16px; }
.also .src { margin-left: 8px; color: var(--grau); font-size: 14px; }

.days { list-style: none; margin: 14px 0 40px; padding: 0; }
.days li { padding: 11px 0; border-bottom: 1px solid var(--linie); }
.days .day { font-family: "Newsreader", Georgia, serif; font-weight: 700; font-size: 20px; }
.days .count { margin-left: 10px; color: var(--grau); font-size: 14px; }
.days p { margin: 4px 0 0; color: var(--grau); font-size: 16px; }

.prose { max-width: 66ch; padding: 24px 0 48px; }
.prose h1 { margin: 0 0 20px; font-family: "Newsreader", Georgia, serif;
  font-size: 32px; font-weight: 800; }
.prose h2 { margin: 28px 0 8px; font-size: 19px; }
.todo { padding: 14px 16px; border: 2px dashed currentColor; border-radius: 4px; }

@media (max-width: 40rem) {
  .kopfzeile { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  /* The date may wrap here: kept on one line it is wider than half a phone, and a 1fr
     column cannot go below its content, so the whole masthead grew past the screen --
     the wordmark ran under the theme button and the reach line was cut off. The
     wordmark shrinks with the screen so that it clears the button on both sides. */
  .kopfzeile time { white-space: normal; }
  .kopfzeile h1 { grid-column: 1 / -1; grid-row: 1; font-size: min(38px, 7.6vw); padding: 0 36px; }
  .kopfzeile .stand { grid-row: 2; }
  .kopfzeile .reichweite { grid-column: 2; grid-row: 2; padding-right: 0; }
  .ressorts { justify-content: flex-start; }
  .ressorts a { padding: 6px 11px; font-size: 15px; }
  .balken span { font-size: 18px; }
  .cluster h3 { font-size: 21px; line-height: 26px; }
  .masthead-sub h1 { font-size: 27px; line-height: 33px; }
  .kommen-liste li { grid-template-columns: minmax(0, 1fr) max-content; }
  .kommen-liste li > a { grid-column: 1 / -1; grid-row: 1; }
  .kommen-liste .quelle { grid-column: 1; grid-row: 2; }
  .kommen-liste .pille { grid-column: 2; grid-row: 2; }
  .timeline li { grid-template-columns: 4.2em minmax(0, 1fr); }
  .timeline .src { grid-column: 2; grid-row: 2; }
  .timeline .head { grid-column: 1 / -1; grid-row: 1; }
}
/* A report row is headline, outlet, time on one line. The outlet column cannot shrink,
   so in a narrow story card the headline gets what is left and wraps a word per line.
   Narrow cards happen on phones, but also on a small laptop, where the lead band sets
   three cards in 300px each, and beside an ad rail. So the switch to the stacked row --
   headline above, outlet and time below -- follows the card's own width, not the
   screen's. */
.cluster { container-type: inline-size; }
@container (max-width: 24rem) {
  .berichte li { grid-template-columns: minmax(0, 1fr) max-content; }
  .berichte li > a { grid-column: 1 / -1; grid-row: 1; }
  .berichte .quelle { grid-column: 1; grid-row: 2; }
  .berichte > li > time { grid-column: 2; grid-row: 2; }
}

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