/* ─────────────────────────────────────────────────────────────────────────────
   Media Agenda Monitor — editorial newsroom cockpit
   Warm newsprint paper · Fraunces italic display · Plex Sans body · Plex Mono data
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* paper · ink */
  --paper:        #f4efe4;
  --paper-2:      #ebe5d6;
  --paper-card:   #f8f4eb;
  --ink:          #14110b;
  --ink-2:        #2a261d;
  --rule:         #c9c1ac;
  --rule-soft:    #ddd7c5;
  --muted:        #6a6353;
  --muted-2:      #4a4334;

  /* signal */
  --signal:       #8b1d1d;
  --signal-soft:  #cba27a;
  --signal-bg:    #f0d8c7;

  /* type */
  --display: "Fraunces", "Hoefler Text", "Times New Roman", Georgia, serif;
  --body:    "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", "Courier New", monospace;

  /* rhythm */
  --r1: 4px;  --r2: 8px;  --r3: 12px;  --r4: 20px;  --r5: 32px;  --r6: 48px;  --r7: 72px;

  --maxw: 1520px;
}

* { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01" 1, "kern" 1;
  font-variant-ligatures: contextual;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(176,150,90,0.07), transparent 70%),
    radial-gradient(ellipse 800px 400px at -10% 30%, rgba(120,90,40,0.04), transparent 70%);
  background-attachment: fixed;
}

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ─── shared layout container ──────────────────────────────────────────── */
.masthead, .view-switcher, main, .colophon, .archive-nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* ─── archive navigation ───────────────────────────────────────────────── */
.archive-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--r3);
  padding-block: var(--r2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--rule-soft);
}
.archive-nav[hidden] { display: none; }
.archive-label { text-transform: uppercase; letter-spacing: 0.14em; }
.archive-step { color: var(--ink-2); text-decoration: none; }
.archive-step:hover { color: var(--signal); }
.archive-step.is-disabled { color: var(--rule); pointer-events: none; }

/* calendar popover */
.archive-cal { position: relative; }
.archive-date-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  padding: 3px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.archive-date-btn:hover, .archive-date-btn[aria-expanded="true"] { border-color: var(--ink); }
.archive-cal-icon { color: var(--signal); }
.archive-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 252px;
  padding: var(--r3);
  background: var(--paper-card);
  border: 1px solid var(--ink);
  box-shadow: 0 10px 30px rgba(20, 17, 11, 0.18);
}
.archive-popover[hidden] { display: none; }
.archive-cal-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin-bottom: var(--r2);
}
.archive-cal-title {
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: none;
}
.archive-cal-nav {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  width: 22px;
  height: 22px;
  cursor: pointer;
}
.archive-cal-nav:hover:not(:disabled) { border-color: var(--ink); color: var(--signal); }
.archive-cal-nav:disabled { color: var(--rule); cursor: default; }
.archive-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.archive-cal-weekdays span {
  text-align: center;
  font-size: 9px;
  color: var(--muted);
  padding-bottom: 3px;
}
.archive-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--rule);
  text-decoration: none;
  border: 1px solid transparent;
}
.archive-day.is-blank { border: 0; }
.archive-day.is-empty { color: var(--rule); }
.archive-day.is-available { color: var(--ink); cursor: pointer; }
.archive-day.is-available:hover { border-color: var(--ink); color: var(--signal); }
.archive-day.is-today { font-weight: 600; box-shadow: inset 0 -2px 0 var(--signal-soft); }
.archive-day.is-selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.archive-today {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background: transparent;
  border: 1px solid var(--signal);
  color: var(--signal);
  padding: 3px 10px;
  cursor: pointer;
}
.archive-today:hover:not(:disabled) { background: var(--signal); color: var(--paper); }
.archive-today:disabled { border-color: var(--rule); color: var(--rule); cursor: default; }

/* ─── masthead ─────────────────────────────────────────────────────────── */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--r6);
  align-items: end;
  padding-top: var(--r7);
  padding-bottom: var(--r5);
  border-bottom: 1px solid var(--ink);
}

.masthead-left { max-width: 60ch; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 var(--r2);
}
/* Masthead kicker is the house-brand home link (→ portal); keep it looking like the kicker. */
.masthead-left .kicker a { color: inherit; text-decoration: none; }
.masthead-left .kicker a:hover { color: var(--signal); }

.masthead h1 {
  font-family: var(--display);
  font-size: clamp(34px, 5.5vw, 72px);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 0.96;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.masthead h1 em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--ink-2);
}

.subtitle {
  font-family: var(--display);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  font-variation-settings: "opsz" 24, "SOFT" 60;
  font-style: italic;
  color: var(--muted-2);
  margin: var(--r3) 0 0;
  line-height: 1.4;
  max-width: 50ch;
}

.masthead-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px var(--r4);
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  align-self: end;
}
.masthead-meta > div {
  display: grid;
  grid-template-rows: auto auto;
  gap: 1px;
  min-width: 80px;
}
.masthead-meta dt {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 400;
}
.masthead-meta dd {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  letter-spacing: -0.005em;
}

/* ─── view switcher ────────────────────────────────────────────────────── */
.view-switcher {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--rule);
  margin-top: 0;
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 20;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* Wraps the tab buttons so the filter bay can drop to its own row on phones
   (the tabs become a horizontal scroll strip; the filter sits below). On desktop
   this is just a transparent flex row — layout is unchanged. */
.view-tabs {
  display: flex;
  align-items: stretch;
}

.view-tab {
  appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  font-variation-settings: "opsz" 36, "SOFT" 40;
  font-style: italic;
  color: var(--muted);
  padding: var(--r3) var(--r4);
  cursor: pointer;
  position: relative;
  letter-spacing: -0.01em;
  transition: color 120ms ease;
}
.view-tab + .view-tab { border-left: 1px solid var(--rule-soft); }
.view-tab:hover { color: var(--ink-2); }
.view-tab[aria-pressed="true"] {
  color: var(--ink);
}
.view-tab[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--ink);
}

.filter-bay {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--r3);
  padding-left: var(--r4);
}

.filter-label {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--r2);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.filter-label > span { user-select: none; }
#search-input, #source-filter {
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  outline: none;
  letter-spacing: 0;
  text-transform: none;
}
#search-input { width: clamp(180px, 18vw, 260px); }
#search-input::placeholder { color: var(--muted); font-style: italic; letter-spacing: 0; }
#search-input:focus, #source-filter:focus { border-color: var(--ink); }

/* ─── main spacing ─────────────────────────────────────────────────────── */
main { padding-top: 0; padding-bottom: var(--r6); }
.view { display: block; }
.view[hidden] { display: none; }

.leads-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border-top: 1px solid var(--rule-soft);
  border-left: 1px solid var(--rule-soft);
}

.leads-list-tall { grid-template-columns: 1fr; }

/* Verweildauer tab: leads grouped by source. Each group is one full-width grid
   cell (source head + its up-to-3 rows); the source name sits in the head so
   the rows themselves omit their outlet label. */
.lead-group { background: var(--paper); }
.lead-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: var(--r3) var(--r3) var(--r2);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.lead-group-head::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--outlet-accent, var(--ink));
  flex-shrink: 0;
}
.lead-group-items { list-style: none; margin: 0; padding: 0; }
.lead-group-items .lead { border-top: 1px solid var(--rule-soft); }
.lead-group-items .lead:first-child { border-top: none; }

.lead {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--r3);
  padding: var(--r3) var(--r3) var(--r3);
  background: var(--paper);
  align-items: start;
}
.leads-list-tall .lead { grid-template-columns: 90px 1fr auto; padding: var(--r4) var(--r3); align-items: baseline; gap: var(--r4); }

.lead-rank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  letter-spacing: 0.05em;
}
.leads-list-tall .lead-rank { font-size: 13px; padding-top: 4px; }

.lead-min {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--signal);
  font-size: 13px;
  font-weight: 500;
}
.leads-list-tall .lead-min { font-size: 18px; font-weight: 500; }

.lead-body { min-width: 0; }

.lead-outlet {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lead-outlet::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--outlet-accent, var(--ink));
  flex-shrink: 0;
}

.lead-title {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  display: block;
  font-weight: 400;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.leads-list-tall .lead-title { font-size: 16px; line-height: 1.3; }
.lead-title:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--signal); text-decoration-thickness: 1px; }

/* ─── board: lean sections ─────────────────────────────────────────────── */
.board { padding-top: var(--r6); display: flex; flex-direction: column; gap: var(--r6); }

.lean-section { animation: fadeUp 600ms cubic-bezier(0.2, 0.6, 0.2, 1) backwards; }
.lean-section:nth-child(1) { animation-delay: 0ms; }
.lean-section:nth-child(2) { animation-delay: 70ms; }
.lean-section:nth-child(3) { animation-delay: 140ms; }
.lean-section:nth-child(4) { animation-delay: 210ms; }
.lean-section:nth-child(5) { animation-delay: 280ms; }
.lean-section:nth-child(6) { animation-delay: 350ms; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lean-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--r4);
  padding-bottom: var(--r3);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--r4);
}
.lean-header h3 {
  font-family: var(--display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 100, "SOFT" 90;
  letter-spacing: -0.025em;
  margin: 4px 0 0;
  line-height: 0.95;
  color: var(--ink);
}
.lean-header .kicker { margin: 0; }
.lean-header-text { min-width: 0; max-width: 60ch; }
.lean-subtitle {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.08em;
}
.lean-spectrum {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  justify-self: end;
  align-self: end;
  padding-bottom: 4px;
}
.spectrum-bar {
  position: relative;
  width: clamp(140px, 16vw, 200px);
  height: 1px;
  background: var(--ink);
}
.spectrum-bar::before, .spectrum-bar::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 11px;
  background: var(--ink);
}
.spectrum-bar::before { left: 0; }
.spectrum-bar::after  { right: 0; }
.spectrum-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--paper);
}

.outlets-grid {
  display: grid;
  /* auto-fit (vs auto-fill) collapses unused tracks, so a 3-outlet tier in a
     4-column layout stretches the 3 cards across the row instead of leaving an
     empty grey slot where the grid's --rule-soft background would show. */
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

.outlet {
  background: var(--paper);
  padding: var(--r3) var(--r3) var(--r4);
  display: flex;
  flex-direction: column;
  gap: var(--r3);
}

.outlet-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--r2) var(--r3);
  align-items: baseline;
  padding-bottom: var(--r3);
  border-bottom: 1px solid var(--rule-soft);
}
.outlet-mark {
  width: 12px;
  height: 12px;
  background: var(--outlet-accent, var(--ink));
  align-self: center;
  margin-top: 4px;
  position: relative;
  flex-shrink: 0;
}
.outlet-name {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  font-variation-settings: "opsz" 24, "SOFT" 40;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.outlet-meta {
  grid-column: 2;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.outlet-meta span { white-space: nowrap; }
.outlet-meta b {
  font-weight: 500;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Per-card lean badge — used in the international tier where leans are mixed.
   A small pill with a left→right tinted dot echoing the spectrum-dot motif. */
.lean-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 7px 1px 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 999px;
  color: var(--ink-2);
}
.lean-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lean-dot, var(--muted));
}
.lean-badge.lean-left         { --lean-dot: #9c2b25; }
.lean-badge.lean-center-left  { --lean-dot: #c06a3e; }
.lean-badge.lean-center       { --lean-dot: #8a7d5c; }
.lean-badge.lean-center-right { --lean-dot: #5a7a8c; }
.lean-badge.lean-conservative { --lean-dot: #3f5d7a; }
.lean-badge.lean-right        { --lean-dot: #2f4a6e; }

/* The international tier's header has no spectrum bar — keep its rhythm tidy. */
.lean-section-intl .lean-header { align-items: start; }

.headline-list {
  display: flex;
  flex-direction: column;
  gap: var(--r3);
  min-height: 1px;
}

/* Attention-signal outlets (Wikipedia / Google Trends) break out of the narrow
   card column to span the full tier width, and lay their entries out as a
   flowing grid of compact tiles that wrap to fill the row. */
.outlet-attention { grid-column: 1 / -1; }
.tile-grid {
  /* Flex (not grid) so tiles in every row — including a short last row — grow to
     fill the full width instead of leaving empty grey cells. The 1px gaps over
     the rule-soft background read as hairline separators between tiles. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  min-height: 1px;
}
.tile {
  flex: 1 1 240px;
  background: var(--paper);
  padding: var(--r2) var(--r3);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tile-rank {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.tile-title {
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.003em;
  overflow-wrap: anywhere;
}
.tile-title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--signal);
}
.tile-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}

.headline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--r3);
  align-items: baseline;
  position: relative;
}
.headline.is-hidden { display: none; }
.headline-rank {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  padding-top: 3px;
  min-width: 16px;
}
.headline-body { min-width: 0; }
.headline-title {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.003em;
  overflow-wrap: anywhere;   /* break raw URLs in social posts so they don't overflow narrow cards */
}
/* Themenüberlappung flag: small icon on articles that belong to a cluster, deep-links
   to the "Quellenvergleich als Seite" (new tab). Floated so the title wraps beside it. */
.topic-flag {
  float: right;
  margin: 1px 0 2px 8px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--muted-2);
  text-decoration: none;
}
.topic-flag:hover, .topic-flag:focus-visible {
  color: var(--signal);
}
/* In the Tagesbriefing prose the topic-flag is a trailing inline affordance, not a floated
   card flag — keep the same glyph/colour but let it sit at the end of the bullet's text. */
.digest-flag.topic-flag {
  float: none;
  margin: 0 0 0 6px;
  vertical-align: middle;
}
/* "Neu seit letztem Besuch" dot. Floated (like .topic-flag) so the block-level
   headline title wraps beside it instead of being pushed onto its own row. */
.new-flag {
  float: left;
  margin: 4px 6px 0 0;
  color: var(--signal);
  line-height: 0;
}
.headline-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.persistence {
  margin-top: 5px;
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--r2);
  align-items: center;
}
.persistence-bar {
  position: relative;
  height: 3px;
  background: var(--rule-soft);
  overflow: hidden;
}
.persistence-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--outlet-accent, var(--signal));
  min-width: 1px;
}
.persistence-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.persistence-num b {
  color: var(--ink-2);
  font-weight: 500;
}
.pub-rel {
  /* Always-on relative publication time shown next to Verweildauer. Reads
     as a quieter sibling — same mono cadence, slightly lighter. */
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.magnitude {
  /* Attention-signal weight (Wikipedia pageviews, Trends search volume) shown
     where other outlets show the Verweildauer. Carries the row's emphasis. */
  color: var(--ink-2);
  font-weight: 500;
}
.metric-full,
.related-row {
  /* Span both columns of the .persistence grid (84px | 1fr) so a full magnitude
     label or a row of related links isn't squeezed into the narrow first cell. */
  grid-column: 1 / -1;
}
.metric-full { white-space: normal; }
.related-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px var(--r2);
  margin-top: 2px;
}
.trend-related {
  /* Secondary link(s) to the news story behind a trending search term
     (Google Trends). Compact, mono, links to actual coverage. */
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--muted-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.trend-related:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lead-mag {
  /* Magnitude in the lead-min column: let it read as a number, not a duration. */
  white-space: nowrap;
}
.lead-pub {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.headline-tags {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tag {
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 5px;
  border: 1px solid var(--rule-soft);
  color: var(--muted-2);
}

/* Diagnostic notes when the age filter hides items. Subtle — sits below
   the headline list or as a single line within the leads strip. */
.board-filter-note,
.leads-filter-note {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 8px 0 0;
  border-top: 1px dashed var(--rule-soft);
  margin-top: 4px;
}
.leads-filter-note {
  border-top: none;
  padding: 6px 0 0;
  list-style: none;
}
.empty.empty-aged {
  color: var(--muted);
  font-style: italic;
  border-left: 2px solid var(--signal-soft);
  background: rgba(216, 177, 90, 0.08);
  padding: 8px 10px;
  font-size: 12px;
}

/* Tier-level controls: step the per-outlet headline cap up or down by
   HEADLINES_EXPAND_STEP rows. Two side-by-side buttons centered below the
   outlets grid; one or both may be present depending on whether expanding /
   reducing is currently meaningful. */
.tier-expand-row {
  display: flex;
  justify-content: center;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-top: none;
  width: max-content;
  margin: 0 auto;
}

/* ── Live feed ─────────────────────────────────────────────────────────── */
/* Reverse-chronological wire of headlines across all editorial sources. */
.live-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule-soft);
  background: var(--rule-soft);
}
.feed-row {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: var(--r3);
  align-items: baseline;
  padding: var(--r2) var(--r3);
  background: var(--paper);
  border-left: 3px solid var(--outlet-accent);
  border-bottom: 1px solid var(--rule-soft);
}
.feed-row:last-child { border-bottom: none; }
.feed-source {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-source a { color: inherit; text-decoration: none; }
.feed-source a:hover { color: var(--ink); }
.feed-headline { color: var(--ink); text-decoration: none; }
.feed-headline:hover { text-decoration: underline; }
.feed-row .topic-flag { margin-left: var(--r2); color: var(--muted); vertical-align: middle; }
.feed-time-cell { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.feed-time-cell .feed-time.stale { color: var(--accent, #b13a2e); }
/* New rows (brought in by an auto-refresh) flash from a darker paper to normal. */
@keyframes feedflash { from { background: var(--paper-2); } to { background: var(--paper); } }
.feed-row.feed-new { animation: feedflash 2.4s ease-out; }
.live-feed-foot { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: var(--r3) 0 0; text-align: center; }
@media (max-width: 640px) {
  .feed-row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .feed-source { grid-column: 1; }
  .feed-time-cell { grid-column: 2; grid-row: 1; }
  .feed-main { grid-column: 1 / -1; }
}

/* +5/−5 stepper injected on the separator after each international row — spans the
   full grid width and steps every card (column) in the row above it together. */
.intl-row-sep {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: var(--r4);
  padding: var(--r2) 0;
  background: var(--paper);
}
.tier-expand {
  appearance: none;
  background: var(--paper);
  border: none;
  padding: 6px 18px 7px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  cursor: pointer;
  transition: color 120ms ease;
}
.tier-expand:hover,
.tier-expand:focus-visible {
  color: var(--ink);
}
.tier-expand:focus-visible {
  outline: 1px dotted var(--rule);
  outline-offset: -3px;
}
.tier-expand-reduce { color: var(--muted-2); }
/* X-only politician placeholder cards: muted, with the platform-gap note. */
.outlet-placeholder { opacity: 0.62; }
.outlet-placeholder .outlet-name { color: var(--muted); }
.empty-placeholder {
  padding: var(--r3) 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted-2);
}
/* Imbalance disclosure callout (Meinungsführer / political voices). */
.skew-note {
  margin: var(--r3) 0 0;
  padding: var(--r3) var(--r4);
  border-left: 3px solid var(--rule);
  background: var(--rule-soft);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}
.skew-note strong { color: var(--ink); }

/* Divider for the "Internationale Presse" cluster section — mirrors the board's
   tier-header idiom (mono kicker + large italic display heading + ink underline). */
.cluster-section-head {
  background: var(--paper);            /* cover the .clusters grey-brown gap background */
  padding: var(--r5) var(--r3) var(--r3);
  border-bottom: 2px solid var(--ink);
}
.cluster-section-head .kicker { margin: 0; }
.cluster-section-head h3 {
  font-family: var(--display);
  font-size: clamp(24px, 2.8vw, 38px);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 100, "SOFT" 90;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 4px 0 0;
  color: var(--ink);
}
.cluster-section-head .cluster-section-note {
  margin: var(--r2) 0 0;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 70ch;
}
/* "Show more / less" toggle for a cluster section (paper bg covers the list's gap fill). */
.cluster-more-row {
  background: var(--paper);
  display: flex;
  justify-content: center;
  padding: var(--r4) 0;
}
.cluster-more {
  appearance: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 7px 20px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.cluster-more:hover, .cluster-more:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

/* Sub-group headings inside the Meinungsführer tab. */
.opinion-group { margin-bottom: var(--r5); }
.opinion-group-head {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 var(--r3);
  padding-bottom: var(--r2);
  border-bottom: 1px solid var(--rule-soft);
}
/* Per-source stepper inside a Staat & Behörden card: restore the top border the
   tier version drops, and space it from the headline list above. */
.tier-expand-row.card-expand-row {
  border-top: 1px solid var(--rule-soft);
  margin-top: var(--r2);
}


/* Stale modifier — the single publication-time label turns to the --signal
   palette once its item is >~2 days old, instead of a separate age badge, so
   the publication date shows once and never contradicts itself. Applied on top
   of .pub-rel / .lead-pub / .cluster-age. */
.stale {
  color: var(--signal);
  font-style: italic;
}

/* Cluster lists carry no always-on publication label, so their age label only
   appears when stale (staleOnly) and keeps the compact chip look it had as the
   former age badge. */
.cluster-age {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border: 1px solid var(--signal-soft);
  background: var(--signal-bg);
  white-space: nowrap;
}

/* ─── view: longest held ──────────────────────────────────────────────── */
.view-leads, .view-overlap { padding-top: var(--r5); }
.view-head { margin-top: var(--r4); margin-bottom: var(--r4); max-width: 70ch; }
.view-head h2 {
  font-family: var(--display);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -0.025em;
  margin: 0 0 var(--r3);
  line-height: 0.95;
}
.view-head h2 em { font-style: italic; font-weight: 200; }
.view-head .lede {
  font-family: var(--display);
  font-size: clamp(15px, 1.4vw, 17px);
  font-style: italic;
  font-variation-settings: "opsz" 24, "SOFT" 70;
  color: var(--muted-2);
  margin: 0;
  line-height: 1.45;
  max-width: 60ch;
}

/* ─── view: story overlap (clusters) ──────────────────────────────────── */
.clusters {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--rule-soft);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.cluster {
  background: var(--paper);
}
.cluster[open] { background: var(--paper-card); }

.cluster-summary {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: var(--r4);
  align-items: baseline;
  padding: var(--r4) var(--r3);
  cursor: pointer;
  list-style: none;
}
.cluster-summary:hover .cluster-headline { color: var(--ink-2); }
.cluster-summary::-webkit-details-marker { display: none; }
.cluster-summary::marker { display: none; }

.cluster-rank {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  padding-top: 4px;
}
.cluster-rank::before {
  content: "№ ";
  font-style: italic;
  font-size: 9px;
  text-transform: uppercase;
}

.cluster-headline {
  font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  font-variation-settings: "opsz" 36, "SOFT" 40;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  transition: color 120ms ease;
}

.cluster-counts {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  white-space: nowrap;
  align-self: center;
  text-transform: uppercase;
}
.cluster-counts b {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.cluster-meta {
  grid-column: 2 / -1;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--r3);
  align-items: center;
}
.cluster-tokens, .cluster-outlets {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cluster-tokens .token { font-style: italic; }

.outlet-chip {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.outlet-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--outlet-accent, var(--ink));
  flex-shrink: 0;
}

.cluster-body {
  border-top: 1px dashed var(--rule);
  padding: var(--r3) var(--r3) var(--r4);
  display: flex;
  flex-direction: column;
  gap: var(--r2);
}
.cluster-member {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--r4);
  align-items: baseline;
  padding: var(--r2) 0;
  border-bottom: 1px solid transparent;
}
.cluster-member + .cluster-member { border-top: 1px solid var(--rule-soft); padding-top: var(--r3); }

.cluster-member-outlet {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
}
.cluster-member-outlet::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--outlet-accent, var(--ink));
  flex-shrink: 0;
}
.cluster-member-title {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.003em;
}
.cluster-member-title:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.cluster-member-min {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ─── colophon ─────────────────────────────────────────────────────────── */
.colophon {
  margin-top: var(--r7);
  padding-top: var(--r4);
  padding-bottom: var(--r6);
  border-top: 1px solid var(--ink);
}
.colophon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--r5);
  margin-top: var(--r5);
  padding-top: var(--r4);
  border-top: 1px solid var(--rule-soft);
}
.colophon p {
  font-family: var(--body);
  font-size: 12px;
  color: var(--muted-2);
  line-height: 1.55;
  margin: var(--r2) 0 0;
}
.colophon p.kicker { color: var(--muted); margin-top: 0; }
/* Full-width floating row of source chips across the page (first colophon block). */
.colophon-sources { margin-top: 0; }
.source-flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r2) var(--r4);
  align-items: center;
  margin-top: var(--r3);
}
.source-flow .outlet-footer-chip { margin: 0; }
.colophon code {
  font-family: var(--mono);
  font-size: 11px;
  background: var(--paper-2);
  padding: 1px 4px;
}
.colophon .outlet-footer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-right: var(--r3);
  margin-bottom: var(--r2);
}
.colophon .outlet-footer-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--outlet-accent, var(--ink));
}

/* ─── search highlight ─────────────────────────────────────────────────── */
mark {
  background: var(--signal-bg);
  color: var(--ink-2);
  padding: 0 2px;
  font-weight: 500;
}

/* ─── empty state ──────────────────────────────────────────────────────── */
.empty {
  padding: var(--r5) var(--r3);
  font-family: var(--display);
  font-style: italic;
  color: var(--muted);
  text-align: center;
  font-size: 15px;
}

/* ─── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .masthead { grid-template-columns: 1fr; gap: var(--r4); align-items: start; }
  .masthead-meta { grid-template-columns: repeat(3, 1fr); }
  .view-switcher { flex-wrap: wrap; padding-bottom: var(--r2); }
  .filter-bay { width: 100%; padding: var(--r2) 0; gap: var(--r2); }
  .filter-label { flex: 1; }
  #search-input, #source-filter { width: 100%; }
  .outlets-grid { grid-template-columns: 1fr; }
  .lean-header { grid-template-columns: 1fr; }
  .lean-spectrum { justify-self: start; }
  .cluster-member { grid-template-columns: 1fr; gap: var(--r1); }
  .cluster-member + .cluster-member { padding-top: var(--r3); }
}
@media (max-width: 560px) {
  .masthead-meta { grid-template-columns: repeat(2, 1fr); }
  .leads-list { grid-template-columns: 1fr; }
  .leads-list-tall .lead { grid-template-columns: 60px 1fr; }
  .leads-list-tall .lead-min { grid-column: 2; font-size: 14px; }

  /* Phone nav: the ≤960 rule wraps the six italic tabs into a tall stack that
     eats the first screen. Instead, let the nav wrap so the tabs (row 1) become a
     compact horizontal scroll strip and the filter drops to its own row (row 2). */
  .view-switcher {
    flex-wrap: wrap;
    padding-inline: 0;
    padding-bottom: 0;
  }
  .view-tabs {
    flex: 1 1 100%;                        /* full-width row 1 */
    overflow-x: auto;
    scrollbar-width: none;                 /* Firefox */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-inline: 14px;
  }
  .view-tabs::-webkit-scrollbar { display: none; }   /* Chromium / WebKit */
  .view-tab {
    flex: 0 0 auto;                        /* keep natural width; scroll, don't wrap/shrink */
    font-size: 15px;
    padding: var(--r3) 13px;
    scroll-snap-align: start;
  }
  .filter-bay {
    flex: 1 1 100%;                        /* filter on its own row 2, full width */
    width: 100%;
    margin-left: 0;
    border-top: 1px solid var(--rule-soft);
    padding: var(--r2) 14px;
  }
  .filter-label { flex: 1; }

  /* Story-overlap header: rank + headline on row 1, the count badges wrap to a
     second row instead of forcing the grid wider than the screen. */
  .cluster-summary { grid-template-columns: 26px 1fr; gap: var(--r2) var(--r3); }
  .cluster-counts { grid-column: 2; white-space: normal; align-self: start; }
  .cluster-headline { overflow-wrap: anywhere; }
}

/* ─── reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .lean-section { animation: none; }
  * { transition-duration: 0s !important; }
}

/* ─── Methodik-Seite (methodik.html) ───────────────────────────────────────
   Prose document reusing the masthead + .lean-badge palette. */
.doc { max-width: 1100px; margin: 0 auto; padding: var(--r6) clamp(20px, 4vw, 56px) var(--r7); }
.doc-home { color: var(--signal); text-decoration: none; }
.doc-home:hover { text-decoration: underline; text-underline-offset: 3px; }
.doc-section { margin: 0 0 var(--r6); max-width: 80ch; }
.doc-section h2 {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 60, "SOFT" 70;
  letter-spacing: -0.015em;
  margin: 0 0 var(--r3);
  padding-bottom: var(--r2);
  border-bottom: 1px solid var(--rule);
}
.doc-scale-note { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); }
.doc-section p { margin: 0 0 var(--r3); line-height: 1.6; }
.doc-section ul { margin: 0 0 var(--r3); padding-left: var(--r4); line-height: 1.6; }
.doc-section li { margin-bottom: 6px; }
.doc-note { font-size: 12px; color: var(--muted-2); border-left: 2px solid var(--signal-soft); padding-left: var(--r3); }

.framework-list { margin: 0; display: grid; gap: var(--r3); }
.framework-list > div { display: grid; grid-template-columns: 230px 1fr; gap: var(--r4); align-items: baseline; }
.framework-list dt { font-weight: 600; }
.framework-list dt a { color: var(--signal); text-decoration: none; }
.framework-list dt a:hover { text-decoration: underline; }
.framework-list dd { margin: 0; color: var(--ink-2); line-height: 1.55; }

.conf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--muted-2); }
.conf-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ink);
}
.conf-badge.conf-hoch    { background: #d9e8d0; border-color: #b3cfa0; }
.conf-badge.conf-mittel  { background: #f0e3c4; border-color: #d8c290; }
.conf-badge.conf-niedrig { background: #ecd9d2; border-color: #d3ab9a; }
.conf-badge.conf-na      { background: var(--paper-2); border-color: var(--rule); color: var(--muted); }

.lean-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lean-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
  padding: 0 var(--r3) var(--r2);
  border-bottom: 1px solid var(--ink);
}
.lean-table td { padding: var(--r3); border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.lean-table tbody tr:hover { background: var(--paper-card); }
.doc-outlet { white-space: nowrap; }
.doc-mark { display: inline-block; width: 9px; height: 9px; background: var(--outlet-accent, var(--ink)); margin-right: 7px; vertical-align: baseline; }
.doc-outlet-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.doc-outlet-name:hover { text-decoration: underline; }
.doc-country { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-left: 8px; }
.doc-conf { white-space: nowrap; }
.doc-basis { color: var(--ink-2); line-height: 1.5; min-width: 22ch; }
.doc-srcs { line-height: 1.9; }
.src-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 1px 7px;
  border-radius: 3px;
  margin: 0 4px 4px 0;
  color: var(--muted-2);
  white-space: nowrap;
}

@media (max-width: 820px) {
  .framework-list > div { grid-template-columns: 1fr; gap: 2px; }
  .lean-table, .lean-table thead, .lean-table tbody, .lean-table tr, .lean-table td { display: block; }
  .lean-table thead { display: none; }
  .lean-table tr { border-bottom: 1px solid var(--rule); padding: var(--r2) 0; }
  .lean-table td { border: 0; padding: 2px var(--r2); }
}

/* ─── topic page (/thema/:date/:slug) ──────────────────────────────────── */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}
.topic-outlet { background: var(--paper-card); padding: var(--r3) var(--r4); }
.topic-outlet h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--r2);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
.topic-mark { width: 9px; height: 9px; background: var(--outlet-accent, var(--ink)); flex-shrink: 0; }
.topic-outlet ul { list-style: none; margin: 0; padding: 0; }
.topic-outlet li { margin-bottom: var(--r2); line-height: 1.4; }
.topic-date { margin-left: var(--r2); font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.topic-outlet a { color: var(--ink); text-decoration: none; }
.topic-outlet a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--signal); }
.doc-body .cluster-tokens .token {
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  padding: 1px 7px;
  border-radius: 3px;
  color: var(--muted-2);
}

.cluster-link {
  display: inline-block;
  margin-top: var(--r3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--signal);
  text-decoration: none;
}
.cluster-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* outlet-name + footer chips now link to /quelle/:id */
.outlet-name a { color: inherit; text-decoration: none; }
.outlet-name a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--outlet-accent, var(--signal)); }
.colophon a.outlet-footer-chip { text-decoration: none; transition: color 100ms ease; }
.colophon a.outlet-footer-chip:hover { color: var(--ink); }

/* /quelle/:id headline list */
.quelle-heads { margin: 0; padding-left: 1.3em; }
.quelle-heads li { margin-bottom: var(--r2); line-height: 1.4; }
.quelle-heads a { color: var(--ink); text-decoration: none; }
.quelle-heads a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--signal); }

/* legal footer bar (every page): Impressum · Datenschutz · Methodik */
.doc-legalbar {
  max-width: var(--maxw);
  margin: var(--r5) auto 0;
  padding: var(--r4) clamp(20px, 4vw, 56px);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.doc-legalbar a { color: var(--muted-2); text-decoration: none; }
.doc-legalbar a:hover { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
.colophon-legal { margin-top: var(--r4); padding-inline: 0; }

/* ── Tagesbriefing (digest) view ───────────────────────────────────────── */
/* Prose view → a readable reading column (the board/clusters views are wide grids). */
.view-digest { max-width: 760px; }
.digest-timespan {
  font-family: var(--body); font-size: .9rem; color: var(--muted-2);
  margin: 0 0 var(--r4); padding: var(--r2) 0; border-bottom: 1px solid var(--rule-soft);
}
.digest-timespan strong { color: var(--ink); font-weight: 600; }
.digest-body h3 {
  font-family: var(--body); font-size: .82rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--signal);
  margin: var(--r5) 0 var(--r2); padding-bottom: var(--r1);
  border-bottom: 1px solid var(--rule-soft);
}
.digest-body h3:first-child { margin-top: 0; }
/* Ressort sub-heading ("Nach Ressort"): a serif display line in ink — visually distinct
   from the uppercase-red section header (h3) AND from the sans-serif bold entry leads. */
.digest-body h4 {
  font-family: var(--display); font-weight: 600; font-size: 1.18rem;
  color: var(--ink); margin: var(--r4) 0 var(--r1); letter-spacing: 0; line-height: 1.25;
}
.digest-body ul { list-style: none; margin: 0; padding: 0; }
.digest-body li {
  padding: var(--r3) 0; border-bottom: 1px solid var(--rule-soft); line-height: 1.6;
}
.digest-body li:last-child { border-bottom: 0; }
/* Expander drill-down rows ("Nach Ressort" +5): slightly recessed from the top-3 prose. */
.digest-body li.dim-extra { color: var(--muted-2); }
.digest-body li.dim-more-row {
  border-bottom: 0; padding: var(--r2) 0; display: flex; gap: var(--r2);
}
.digest-body p { margin: var(--r2) 0; line-height: 1.6; }
.digest-body strong { font-weight: 600; color: var(--ink); }
.digest-tag {
  display: inline-block; font-family: var(--body); font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px; border-radius: 2px;
  background: var(--paper-2); color: var(--muted-2); vertical-align: middle; margin: 0 2px;
}
.digest-tag--split { background: var(--signal-bg); color: var(--signal); }
.digest-foot {
  font-family: var(--body); font-size: .76rem; line-height: 1.5; color: var(--muted);
  margin: var(--r5) 0 0; padding-top: var(--r3); border-top: 1px solid var(--rule-soft);
}

/* ── Newsletter subscribe box (Tagesbriefing view) ─────────────────────── */
.newsletter-box {
  margin-top: var(--r6); padding: var(--r4);
  background: var(--paper-card); border: 1px solid var(--rule);
}
.newsletter-box .kicker {
  font-family: var(--body); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--signal); margin: 0 0 var(--r1);
}
.newsletter-box h3 { font-family: var(--display); font-size: 1.3rem; margin: 0 0 var(--r2); color: var(--ink); }
.newsletter-lede { font-family: var(--body); font-size: .92rem; line-height: 1.5; color: var(--muted); margin: 0 0 var(--r3); }
.newsletter-form { display: flex; flex-direction: column; gap: var(--r2); }
.newsletter-names { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r2); }
.newsletter-submit-row { display: grid; grid-template-columns: 1fr auto; gap: var(--r2); }
.newsletter-form input {
  font-family: var(--body); font-size: .95rem; padding: 10px 12px;
  border: 1px solid var(--rule); background: #fff; color: var(--ink); border-radius: 2px;
}
.newsletter-form input:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.newsletter-button {
  font-family: var(--body); font-weight: 600; font-size: .95rem; padding: 10px 22px;
  background: var(--signal); color: #fff; border: 0; border-radius: 2px; cursor: pointer; white-space: nowrap;
}
.newsletter-button:hover:not(:disabled) { background: #6f1717; }
.newsletter-button:disabled { opacity: .6; cursor: default; }
.newsletter-message { font-family: var(--body); font-size: .9rem; line-height: 1.5; color: var(--ink-2); margin: var(--r1) 0 0; }
.newsletter-message.newsletter-error { color: var(--signal); }
@media (max-width: 520px) {
  .newsletter-names, .newsletter-submit-row { grid-template-columns: 1fr; }
}

/* ── Newsletter link in the editions row (+ jump highlight) ─────────────── */
.archive-newsletter {
  margin-left: var(--r3); padding: 3px 0 3px var(--r3);
  border: 0; border-left: 1px solid var(--rule); background: transparent;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--signal); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.archive-newsletter:hover { color: var(--ink); }
/* brief highlight when the link jumps you to the signup box */
.newsletter-box--flash { animation: nlFlash 1.4s ease; }
@keyframes nlFlash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  18% { box-shadow: 0 0 0 3px var(--signal-bg); }
}

/* ── Feedback (footer link + modal editor) ──────────────────────────────── */
.colophon-feedback { margin: var(--r2) 0 0; }
.feedback-link { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--signal); background: transparent; border: 0; padding: 0; cursor: pointer; }
.feedback-link:hover { color: var(--ink); }
.feedback-dialog { color-scheme: light; width: min(440px, 92vw); border: 1px solid var(--ink); border-radius: 8px; background: var(--paper-card); color: var(--ink); padding: var(--r4); box-shadow: 0 16px 48px rgba(20,17,11,.22); }
.feedback-dialog::backdrop { background: rgba(20,17,11,.4); }
.feedback-dialog .kicker { color: var(--signal); margin: 0 0 4px; }
.feedback-dialog h2 { font-family: var(--display); font-size: 1.35rem; margin: 0 0 var(--r2); }
.feedback-intro { font-family: var(--body); font-size: .9rem; line-height: 1.5; color: var(--muted); margin: 0 0 var(--r3); }
.feedback-dialog textarea, .feedback-dialog input[type=email] { width: 100%; font-family: var(--body); font-size: .95rem; padding: 10px 12px; border: 1px solid var(--rule); background: #fdfbf6; color: var(--ink); border-radius: 2px; margin-bottom: var(--r2); }
.feedback-dialog textarea { resize: vertical; }
.feedback-dialog textarea:focus, .feedback-dialog input:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.feedback-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.feedback-msg { font-family: var(--body); font-size: .88rem; line-height: 1.5; color: var(--ink-2); margin: 0 0 var(--r2); }
.feedback-msg.feedback-error { color: var(--signal); }
.feedback-actions { display: flex; justify-content: flex-end; gap: var(--r2); }
.feedback-cancel { font-family: var(--body); font-size: .9rem; background: transparent; border: 1px solid var(--rule); color: var(--ink-2); padding: 8px 14px; border-radius: 2px; cursor: pointer; }
.feedback-send { font-family: var(--body); font-weight: 600; font-size: .9rem; background: var(--signal); color: #fff; border: 0; padding: 8px 18px; border-radius: 2px; cursor: pointer; }
.feedback-send:disabled { opacity: .6; cursor: default; }

/* ── Spektrum des Tages view ──────────────────────────────────────────────
   A deliberate DARK radial-bubble panel inside the light paper portal. Ported
   from prototypes/briefing-graphic.template.html; all selectors namespaced
   under #view-spektrum / .spk-* so the dark palette never leaks. The d3 viz
   builds its DOM in web/spektrum.js. Self-hosted fonts only (no Google). */
#view-spektrum {
  /* warm "ink-on-night" darks, aligned to the brand paper palette */
  --spk-ink: #0b0a07; --spk-ink-2: #14110b; --spk-panel: #1a1712; --spk-line: #2b261d;
  --spk-text: #ece4d4; --spk-muted: #9a9080; --spk-faint: #6b6354;
  --spk-gold: #cba27a;          /* brand warm tan — the calm metallic accent */
  --spk-signal: #c0524a;        /* brand oxblood brightened for dark — the pop */
  --spk-serif: "Fraunces", Georgia, serif;
  --spk-ui: "IBM Plex Sans", system-ui, sans-serif;
  --spk-mono: "IBM Plex Mono", monospace;
  background: radial-gradient(120% 90% at 62% 38%, #1d1812 0%, var(--spk-ink-2) 42%, var(--spk-ink) 100%);
  color: var(--spk-text); border-radius: 6px; overflow: hidden;
  margin-top: var(--r5); -webkit-font-smoothing: antialiased;
}
#view-spektrum .spk-stage { display: grid; grid-template-columns: 236px 1fr; height: min(82vh, 880px); min-height: 560px; }

/* ── left rail ── */
#view-spektrum .spk-rail { padding: 26px 20px; display: flex; flex-direction: column; gap: 18px;
  border-right: 1px solid var(--spk-line); background: linear-gradient(180deg, rgba(18,21,31,.6), rgba(10,12,18,.2)); }
#view-spektrum .spk-brand { font-family: var(--spk-mono); font-size: 10px; letter-spacing: .3em; color: var(--spk-muted); text-transform: uppercase; }
#view-spektrum .spk-brand b { color: var(--spk-signal); font-weight: 500; }
#view-spektrum .spk-h1 { font-family: var(--spk-serif); font-weight: 300; font-size: 33px; line-height: .98; letter-spacing: -.01em; margin-top: 5px; color: var(--spk-text); }
#view-spektrum .spk-h1 em { font-style: italic; color: var(--spk-signal); }
#view-spektrum .spk-date { font-family: var(--spk-mono); font-size: 11.5px; color: var(--spk-muted); margin-top: 8px; letter-spacing: .04em; }
#view-spektrum .spk-lede { font-size: 12.5px; line-height: 1.5; color: var(--spk-muted); max-width: 30ch; }
#view-spektrum .spk-lede b { color: var(--spk-text); font-weight: 600; }
#view-spektrum .spk-legend { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
#view-spektrum .spk-legend-h { font-family: var(--spk-mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--spk-faint); margin-bottom: 4px; }
#view-spektrum .spk-lrow { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--spk-muted); }
#view-spektrum .spk-swatch { flex: none; color: var(--spk-muted); }
#view-spektrum .spk-swatch-gold { color: var(--spk-gold); }
#view-spektrum .spk-spectrumbar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2e9bd4, #d7cbb0 50%, #e35d2a); }
#view-spektrum .spk-ticks { display: flex; justify-content: space-between; font-family: var(--spk-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--spk-faint); text-transform: uppercase; margin-top: 5px; }
#view-spektrum .spk-hint { font-size: 11.5px; color: var(--spk-faint); line-height: 1.5; margin-top: 6px; }

/* ── radar field ── */
#view-spektrum .spk-field { position: relative; overflow: hidden; }
#view-spektrum .spk-radar { display: block; width: 100%; height: 100%; }
#view-spektrum .spk-empty { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 10%; text-align: center; color: var(--spk-muted); font-family: var(--spk-ui); font-size: 14px; }
#view-spektrum .spk-orbit { fill: none; stroke: var(--spk-line); stroke-width: 1; }
#view-spektrum .spk-ringlabel { font-family: var(--spk-mono); font-size: 9.5px; letter-spacing: .2em; fill: var(--spk-faint); text-transform: uppercase; }
#view-spektrum .spk-sweep { opacity: .5; mix-blend-mode: screen; }
#view-spektrum .spk-bubble { cursor: pointer; }
#view-spektrum .spk-bubble circle { stroke: rgba(0,0,0,.35); stroke-width: 1; transition: opacity .45s; }
#view-spektrum .spk-bubble:hover circle { stroke: var(--spk-gold); stroke-width: 1.6; }
#view-spektrum .spk-blabel { font-family: var(--spk-ui); font-size: 12.5px; font-weight: 600; fill: var(--spk-text); paint-order: stroke;
  stroke: rgba(8,10,16,.92); stroke-width: 3.5px; pointer-events: none; opacity: 0; transition: opacity .3s; letter-spacing: .005em; }
#view-spektrum .spk-lab { pointer-events: none; }
#view-spektrum .spk-leader { stroke: var(--spk-gold); stroke-width: 1; opacity: .4; }
#view-spektrum .spk-leaderdot { fill: var(--spk-gold); opacity: .6; }
#view-spektrum .spk-plate { fill: rgba(17,14,9,.88); stroke: var(--spk-line); stroke-width: 1; }
#view-spektrum .spk-labtext { font-family: var(--spk-ui); font-size: 13px; font-weight: 600; fill: var(--spk-text); dominant-baseline: middle; }
#view-spektrum .spk-hub { fill: none; stroke: var(--spk-gold); stroke-width: 1; opacity: .5; }
#view-spektrum .spk-hubtext { font-family: var(--spk-mono); font-size: 9px; letter-spacing: .24em; fill: var(--spk-gold); text-anchor: middle; text-transform: uppercase; opacity: .8; }
#view-spektrum .spk-member circle { stroke: rgba(8,10,16,.6); stroke-width: 1; }
#view-spektrum .spk-memberline { stroke: var(--spk-faint); stroke-width: .6; opacity: .4; }

/* ── tooltip & detail card ── */
#view-spektrum .spk-tip { position: absolute; pointer-events: none; z-index: 20; opacity: 0; transition: opacity .12s;
  background: rgba(12,15,23,.94); border: 1px solid var(--spk-line); border-radius: 10px; padding: 11px 13px; max-width: 280px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
#view-spektrum .spk-tip-h { font-family: var(--spk-serif); font-size: 15px; line-height: 1.18; margin-bottom: 7px; color: var(--spk-text); }
#view-spektrum .spk-tip-m { font-family: var(--spk-mono); font-size: 10.5px; color: var(--spk-muted); letter-spacing: .04em; display: flex; gap: 10px; flex-wrap: wrap; }
#view-spektrum .spk-tip-m b { color: var(--spk-gold); font-weight: 500; }
#view-spektrum .spk-detail { position: absolute; right: 26px; top: 26px; width: 330px; z-index: 18;
  background: linear-gradient(180deg, rgba(18,21,31,.97), rgba(12,15,23,.97)); border: 1px solid var(--spk-line); border-radius: 14px;
  padding: 20px; box-shadow: 0 26px 60px rgba(0,0,0,.55); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .35s cubic-bezier(.2,.8,.2,1); }
#view-spektrum .spk-detail.on { opacity: 1; transform: none; pointer-events: auto; }
#view-spektrum .spk-cat { font-family: var(--spk-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--spk-gold); }
#view-spektrum .spk-detail-h { font-family: var(--spk-serif); font-weight: 400; font-size: 21px; line-height: 1.12; margin: 8px 0 12px; color: var(--spk-text); }
#view-spektrum .spk-stat { display: flex; gap: 18px; font-family: var(--spk-mono); font-size: 11px; color: var(--spk-muted); border-top: 1px solid var(--spk-line); border-bottom: 1px solid var(--spk-line); padding: 10px 0; margin-bottom: 12px; }
#view-spektrum .spk-stat b { display: block; color: var(--spk-text); font-size: 17px; font-weight: 500; }
#view-spektrum .spk-arts { display: flex; flex-direction: column; gap: 9px; max-height: 38vh; overflow: auto; }
#view-spektrum .spk-art { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.3; }
#view-spektrum .spk-art .spk-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
#view-spektrum .spk-o { color: var(--spk-muted); }
#view-spektrum .spk-o b { color: var(--spk-text); font-weight: 600; display: block; font-size: 11px; }
#view-spektrum .spk-close { position: absolute; top: 14px; right: 15px; cursor: pointer; color: var(--spk-faint); font-family: var(--spk-mono); font-size: 16px; }
#view-spektrum .spk-close:hover { color: var(--spk-text); }
#view-spektrum .spk-arts::-webkit-scrollbar { width: 5px; }
#view-spektrum .spk-arts::-webkit-scrollbar-thumb { background: var(--spk-line); border-radius: 3px; }

@media (max-width: 640px) {
  #view-spektrum .spk-stage { grid-template-columns: 1fr; height: auto; }
  #view-spektrum .spk-rail { border-right: 0; border-bottom: 1px solid var(--spk-line); }
  #view-spektrum .spk-field { height: 70vh; }
}
#view-spektrum .spk-loading { padding: 60px; text-align: center; color: var(--spk-muted); font-family: var(--spk-ui); font-size: 14px; }

/* ── Spektrum-Atlas: the zoomable topical map (web/atlas.js) ──────────────────
   Same warm ink-on-night palette as #view-spektrum, scoped under #view-atlas /
   .atl-* so it never leaks. Built client-side by web/atlas.js. */
#view-atlas {
  --atl-ink: #0b0a07; --atl-ink-2: #14110b; --atl-panel: #1a1712; --atl-line: #2b261d;
  --atl-text: #ece4d4; --atl-muted: #9a9080; --atl-faint: #6b6354;
  --atl-gold: #cba27a; --atl-signal: #c0524a;
  --atl-serif: "Fraunces", Georgia, serif;
  --atl-ui: "IBM Plex Sans", system-ui, sans-serif;
  --atl-mono: "IBM Plex Mono", monospace;
  background: radial-gradient(120% 90% at 38% 32%, #1d1812 0%, var(--atl-ink-2) 42%, var(--atl-ink) 100%);
  color: var(--atl-text); border-radius: 6px; overflow: hidden;
  margin-top: var(--r5); -webkit-font-smoothing: antialiased;
}
#view-atlas .atl-stage { display: grid; grid-template-columns: 236px 1fr; height: min(82vh, 880px); min-height: 560px; }

#view-atlas .atl-rail { padding: 26px 20px; display: flex; flex-direction: column; gap: 18px;
  border-right: 1px solid var(--atl-line); background: linear-gradient(180deg, rgba(18,21,31,.6), rgba(10,12,18,.2)); }
#view-atlas .atl-brand { font-family: var(--atl-mono); font-size: 10px; letter-spacing: .3em; color: var(--atl-muted); text-transform: uppercase; }
#view-atlas .atl-brand b { color: var(--atl-signal); font-weight: 500; }
#view-atlas .atl-h1 { font-family: var(--atl-serif); font-weight: 300; font-size: 33px; line-height: .98; letter-spacing: -.01em; margin-top: 5px; color: var(--atl-text); }
#view-atlas .atl-h1 em { font-style: italic; color: var(--atl-signal); }
#view-atlas .atl-date { font-family: var(--atl-mono); font-size: 11.5px; color: var(--atl-muted); margin-top: 8px; letter-spacing: .04em; }
#view-atlas .atl-lede { font-size: 12.5px; line-height: 1.5; color: var(--atl-muted); max-width: 30ch; }
#view-atlas .atl-lede b { color: var(--atl-text); font-weight: 600; }
#view-atlas .atl-legend { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
#view-atlas .atl-legend-h { font-family: var(--atl-mono); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--atl-faint); margin-bottom: 4px; }
#view-atlas .atl-lrow { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--atl-muted); }
#view-atlas .atl-swatch { flex: none; color: var(--atl-muted); }
#view-atlas .atl-swatch-gold { color: var(--atl-gold); }
#view-atlas .atl-spectrumbar { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #2e9bd4, #d7cbb0 50%, #e35d2a); }
#view-atlas .atl-ticks { display: flex; justify-content: space-between; font-family: var(--atl-mono); font-size: 9.5px; letter-spacing: .12em; color: var(--atl-faint); text-transform: uppercase; margin-top: 5px; }
#view-atlas .atl-hint { font-size: 11.5px; color: var(--atl-faint); line-height: 1.5; margin-top: 6px; }

#view-atlas .atl-field { position: relative; overflow: hidden; }
#view-atlas .atl-map { display: block; width: 100%; height: 100%; cursor: grab; }
#view-atlas .atl-map:active { cursor: grabbing; }
#view-atlas .atl-empty { position: absolute; inset: 0; display: grid; place-content: center; padding: 0 10%; text-align: center; color: var(--atl-muted); font-family: var(--atl-ui); font-size: 14px; }
#view-atlas .atl-bubble { cursor: pointer; }
#view-atlas .atl-bubble circle { stroke: rgba(0,0,0,.35); stroke-width: 1; transition: fill-opacity .3s; }
#view-atlas .atl-bubble:hover circle { stroke: var(--atl-gold); stroke-width: 1.6; }
#view-atlas .atl-label { font-family: var(--atl-ui); font-weight: 600; fill: var(--atl-text); paint-order: stroke;
  stroke: rgba(8,10,16,.92); pointer-events: none; letter-spacing: .005em; }
#view-atlas .atl-member circle { stroke: rgba(8,10,16,.6); stroke-width: 1; }
#view-atlas .atl-memberline { stroke: var(--atl-faint); stroke-width: .6; opacity: .4; }

#view-atlas .atl-reset { position: absolute; left: 16px; bottom: 14px; z-index: 16; cursor: pointer;
  background: rgba(17,14,9,.88); color: var(--atl-muted); border: 1px solid var(--atl-line); border-radius: 8px;
  font-family: var(--atl-mono); font-size: 11px; letter-spacing: .08em; padding: 7px 11px; }
#view-atlas .atl-reset:hover { color: var(--atl-text); border-color: var(--atl-gold); }

#view-atlas .atl-tip { position: absolute; pointer-events: none; z-index: 20; opacity: 0; transition: opacity .12s;
  background: rgba(12,15,23,.94); border: 1px solid var(--atl-line); border-radius: 10px; padding: 11px 13px; max-width: 280px; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
#view-atlas .atl-tip-h { font-family: var(--atl-serif); font-size: 15px; line-height: 1.18; margin-bottom: 7px; color: var(--atl-text); }
#view-atlas .atl-tip-m { font-family: var(--atl-mono); font-size: 10.5px; color: var(--atl-muted); letter-spacing: .04em; display: flex; gap: 10px; flex-wrap: wrap; }
#view-atlas .atl-tip-m b { color: var(--atl-gold); font-weight: 500; }
#view-atlas .atl-detail { position: absolute; right: 26px; top: 26px; width: 330px; z-index: 18;
  background: linear-gradient(180deg, rgba(18,21,31,.97), rgba(12,15,23,.97)); border: 1px solid var(--atl-line); border-radius: 14px;
  padding: 20px; box-shadow: 0 26px 60px rgba(0,0,0,.55); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .35s cubic-bezier(.2,.8,.2,1); }
#view-atlas .atl-detail.on { opacity: 1; transform: none; pointer-events: auto; }
#view-atlas .atl-cat { font-family: var(--atl-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--atl-gold); }
#view-atlas .atl-detail-h { font-family: var(--atl-serif); font-weight: 400; font-size: 21px; line-height: 1.12; margin: 8px 0 12px; color: var(--atl-text); }
#view-atlas .atl-stat { display: flex; gap: 18px; font-family: var(--atl-mono); font-size: 11px; color: var(--atl-muted); border-top: 1px solid var(--atl-line); border-bottom: 1px solid var(--atl-line); padding: 10px 0; margin-bottom: 12px; }
#view-atlas .atl-stat b { display: block; color: var(--atl-text); font-size: 17px; font-weight: 500; }
#view-atlas .atl-arts { display: flex; flex-direction: column; gap: 9px; max-height: 38vh; overflow: auto; }
#view-atlas .atl-art { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.3; }
#view-atlas .atl-art .atl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 4px; }
#view-atlas .atl-o { color: var(--atl-muted); }
#view-atlas .atl-o b { color: var(--atl-text); font-weight: 600; display: block; font-size: 11px; }
#view-atlas .atl-close { position: absolute; top: 14px; right: 15px; cursor: pointer; color: var(--atl-faint); font-family: var(--atl-mono); font-size: 16px; }
#view-atlas .atl-close:hover { color: var(--atl-text); }

@media (max-width: 640px) {
  #view-atlas .atl-stage { grid-template-columns: 1fr; height: auto; }
  #view-atlas .atl-rail { border-right: 0; border-bottom: 1px solid var(--atl-line); }
  #view-atlas .atl-field { height: 70vh; }
}

/* ── Tagesbriefing sub-tabs (Text · Spektrum · Atlas) ─────────────────────────
   A secondary strip that drops to its own full-width row under the main tabs,
   shown only while a briefing view is active (toggled via the [hidden] attr). */
.view-switcher { flex-wrap: wrap; }
.subtabs { flex-basis: 100%; order: 99; display: flex; align-items: stretch; gap: 0;
  border-top: 1px solid var(--rule-soft); }
.subtabs[hidden] { display: none; }   /* author display:flex would beat the UA [hidden] rule */
.subtab { appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--display); font-style: italic; font-variation-settings: "opsz" 24, "SOFT" 40;
  font-size: 14px; color: var(--muted); padding: var(--r2) var(--r4); position: relative;
  letter-spacing: -0.01em; transition: color 120ms ease; }
.subtab + .subtab { border-left: 1px solid var(--rule-soft); }
.subtab:hover { color: var(--ink-2); }
.subtab[aria-pressed="true"] { color: var(--ink); }
.subtab[aria-pressed="true"]::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--ink); }
.view-tab-chev { font-size: .62em; margin-left: 5px; vertical-align: middle; opacity: .55; font-style: normal; }
.view-atlas .atl-loading, .atl-loading { padding: 60px; text-align: center; color: #9a9080; font-family: var(--body, system-ui); font-size: 14px; }