/* ══════════════════════════════════════════════════════════════
   Schriften — lokal ausgeliefert.
   Keine Verbindung zu fonts.googleapis.com oder fonts.gstatic.com,
   keine Cookies, damit kein Cookie-Banner nötig.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700; /* Variable Font, deckt alle Schnitte ab */
  font-display: swap;
  src: url("/fonts/source-serif-4-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-700.woff2") format("woff2");
}

/* ══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --paper: #fbfaf7;
  --paper-2: #f2efe8;
  --ink: #1a1a19;
  --ink-2: #3f3f3c;
  --ink-3: #6e6e69;
  --ink-4: #9a9a93;
  --rule: #dedbd2;
  --brand: #1f4d3f;
  --brand-2: #2d6b57;
  --flag: #8a5a1f;
  --flag-soft: #f7f0e5;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* 38rem statt 43rem (12.9.2026): Bei 43rem standen rund 85 Zeichen in
     einer Zeile, Tageszeitungen liegen bei 65 bis 75. Darueber verliert das
     Auge beim Ruecksprung die naechste Zeile. */
  --wrap: min(100% - 2.5rem, 38rem);
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* die Seite selbst scrollt nie horizontal */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.135rem; /* ≈ 18px */
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--brand);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Nur für Screenreader sichtbar. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  position: static;
  display: inline-block;
  padding: 0.6rem 1rem;
  font-family: var(--sans);
  background: var(--brand);
  color: #fff;
}

/* ── Masthead ── */
.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.mast-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 0;
}
.logo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}
.logo span {
  color: var(--brand-2);
}
.mast-tag {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
}
@media (max-width: 34rem) {
  .mast-tag {
    display: none;
  }
}

.crumb {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-4);
  padding: 1.1rem 0 0;
  letter-spacing: 0.02em;
}
.crumb a {
  color: var(--ink-3);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--brand);
}

/* ── Artikelkopf ── */
.kicker {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin: 1.6rem 0 0.75rem;
}
h1 {
  font-size: clamp(1.95rem, 5.4vw, 3rem);
  line-height: 1.13;
  letter-spacing: -0.022em;
  font-weight: 700;
  margin: 0 0 1rem;
  text-wrap: balance;
}
.standfirst {
  font-size: 1.235rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1.9rem;
}

.byline {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 0;
  border-block: 1px solid var(--rule);
  font-family: var(--sans);
}
.avatar {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  flex: none;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.byline-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.byline-meta {
  font-size: 0.79rem;
  color: var(--ink-3);
  line-height: 1.45;
}

/* ── Fließtext ── */
p {
  margin: 0 0 1.2rem;
}
h2 {
  font-size: clamp(1.42rem, 3.4vw, 1.78rem);
  line-height: 1.24;
  letter-spacing: -0.017em;
  font-weight: 700;
  margin: 2.7rem 0 0.85rem;
  text-wrap: balance;
}
h3 {
  font-size: 1.155rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 1.9rem 0 0.6rem;
}
.lead-cap::first-letter {
  float: left;
  font-size: 3.5rem;
  line-height: 0.82;
  font-weight: 700;
  margin: 0.28rem 0.55rem 0 0;
  color: var(--brand);
}

ul,
ol {
  margin: 0 0 1.25rem;
  padding-left: 1.3rem;
}
li {
  margin-bottom: 0.5rem;
}
li::marker {
  color: var(--brand-2);
}

/* ── Kennzeichnungshinweis (§ 5a Abs. 4 UWG) ──
   Bewusst nicht kleiner als der Fließtext und nicht ausgegraut. */
.notice {
  background: var(--flag-soft);
  border-left: 3px solid var(--flag);
  padding: 1rem 1.2rem;
  margin: 1.6rem 0 2rem;
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
  border-radius: 0 3px 3px 0;
}
.notice strong {
  color: var(--flag);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* ── Hervorgehobener Kasten ── */
.box {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.3rem 1.4rem;
  margin: 2.2rem 0;
}
.box-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 0.7rem;
}
.box h3 {
  margin-top: 0;
  font-size: 1.1rem;
}
.box > :last-child {
  margin-bottom: 0;
}

/* ── Zitat ── */
.pull {
  border-left: 3px solid var(--brand);
  margin: 2.1rem 0;
  padding: 0.15rem 0 0.15rem 1.3rem;
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
}
.pull p {
  margin: 0;
}
.pull cite {
  display: block;
  font-family: var(--sans);
  font-size: 0.83rem;
  font-style: normal;
  color: var(--ink-3);
  margin-top: 0.65rem;
  letter-spacing: 0.01em;
}

/* ── Checkliste ── */
.check {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0;
}
.check li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.7rem;
  font-size: 1.06rem;
}
.check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 2px;
  background: var(--brand-2);
}

/* ── Tabelle ── */
.tbl-scroll {
  overflow-x: auto;
  margin: 1.7rem 0;
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-family: var(--sans);
  font-size: 0.92rem;
}
th {
  text-align: left;
  padding: 0.6rem 0.9rem 0.6rem 0;
  border-bottom: 2px solid var(--brand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}
td {
  padding: 0.72rem 0.9rem 0.72rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  vertical-align: top;
}
td strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Hinweis auf das Lernangebot ── */
.cta {
  background: var(--brand);
  color: #f4f7f5;
  border-radius: 5px;
  padding: 1.7rem 1.6rem;
  margin: 2.6rem 0;
}
.cta-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fc4b4;
  margin-bottom: 0.6rem;
}
.cta h2 {
  margin: 0 0 0.55rem;
  color: #fff;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.3;
}
.cta p {
  color: #cfe0d8;
  font-size: 1.02rem;
  margin-bottom: 1.15rem;
}
.cta a {
  display: inline-block;
  background: #fff;
  color: var(--brand);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.72rem 1.4rem;
  border-radius: 3px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta a:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.cta a:focus-visible {
  outline: 3px solid #9fc4b4;
  outline-offset: 3px;
}
.cta small {
  display: block;
  margin-top: 0.85rem;
  color: #9fc4b4;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ── Häufige Fragen ── */
.faq {
  margin: 1.6rem 0;
}
.faq details {
  border-bottom: 1px solid var(--rule);
  padding: 0.2rem 0;
}
.faq summary {
  cursor: pointer;
  padding: 0.85rem 0;
  font-weight: 600;
  font-size: 1.06rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  color: var(--brand-2);
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq p {
  padding: 0 0 0.95rem;
  color: var(--ink-2);
  font-size: 1.04rem;
  margin: 0;
}

/* ── Rechtsseiten ── */
.legal h2 {
  font-size: 1.25rem;
  margin: 2.1rem 0 0.6rem;
}
.legal .ph {
  background: var(--flag-soft);
  color: var(--flag);
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 600;
  padding: 0.1em 0.4em;
  border-radius: 2px;
}
.legal .addr {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.98rem;
  line-height: 1.75;
}

/* ── Footer ── */
footer {
  border-top: 1px solid var(--rule);
  margin-top: 3.4rem;
  padding: 2rem 0 3rem;
  font-family: var(--sans);
  font-size: 0.83rem;
  color: var(--ink-3);
  line-height: 1.65;
}
footer nav {
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.15rem;
}
footer a {
  color: var(--ink-3);
  text-decoration: none;
}
footer a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.disclaimer {
  font-size: 0.85rem;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  margin-top: 1rem;
}

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


/* --------------------------------------------------------------------------
   Grafiken im Artikel

   Zeitungsgrafik und nicht Werbebanner: Balken als Kontur mit leiser
   Fuellung, Zahlen in der Farbe ihres Balkens, keine deckenden Flaechen.
   Die Aussage traegt die Laenge, nicht die Saettigung.
   -------------------------------------------------------------------------- */

.aufmacher {
  margin: 0 0 2.4rem;
}

/* Die Grafik mitten im Text braucht oben Luft, die der Aufmacher nicht
   braucht -- der steht direkt unter der Byline. */
.aufmacher-klein {
  margin: 2.2rem 0 2.4rem;
}

.aufmacher svg {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
}

.g-etikett {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  fill: var(--ink-3);
}

.g-balken {
  fill: var(--brand);
  fill-opacity: 0.13;
  stroke: var(--brand);
  stroke-width: 1;
}

/* Die Warnfarbe traegt den Wert, um den es unangenehm steht. */
.g-balken-hoch {
  fill: #a4402f;
  fill-opacity: 0.13;
  stroke: #a4402f;
}

/* Die Saeule, um die es im Text geht -- sie ist die einzige, die
   auffaellt. Waeren alle betont, waere es keine. */
.g-balken-auf {
  fill-opacity: 0.3;
  stroke-width: 1.5;
}

.g-balkenwert {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
}

.g-balkenwert-klein {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
}

.g-saeulenwert {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
  fill: var(--ink-2);
}

.g-saeulenwert-auf {
  fill: var(--brand);
}

.g-wert-gut {
  fill: var(--brand);
}

.g-wert-hoch {
  fill: #a4402f;
}

.g-balkenname {
  font-family: var(--sans);
  font-size: 13px;
  fill: var(--ink-2);
}

.g-saeulenname {
  font-family: var(--sans);
  font-size: 12px;
  text-anchor: middle;
  fill: var(--ink-3);
}

.g-saeulenname-auf {
  fill: var(--brand);
  font-weight: 700;
}

.g-linie {
  stroke: var(--rule);
  stroke-width: 1;
}

.g-quelle {
  font-family: var(--sans);
  font-size: 11px;
  fill: var(--ink-3);
}

.aufmacher figcaption {
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin-top: 0.7rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--rule);
}

/* --------------------------------------------------------------------------
   Quellenverzeichnis

   Autoritaet ist keine Selbstbeschreibung: Ein Text, der behauptet,
   recherchiert zu sein, zaehlt kaum -- nachpruefbare Belege von Dritten
   zaehlen. Deshalb stehen sie sichtbar am Fuss und nicht versteckt.
   -------------------------------------------------------------------------- */

.quellen {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.quellen h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
}

.quellen ol {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
  padding-left: 1.2rem;
}

.quellen li {
  margin-bottom: 0.75rem;
}

.quellen a {
  color: var(--brand);
}

/* Der Ruecksprung zur Textstelle. Klein und ohne Unterstreichung -- er ist
   ein Werkzeug, keine Aussage. */
.zurueck {
  text-decoration: none;
  margin-left: 0.3rem;
  opacity: 0.6;
}

sup a {
  text-decoration: none;
  color: var(--brand);
  font-family: var(--sans);
  font-size: 0.7em;
  padding: 0 0.1em;
}

/* --------------------------------------------------------------------------
   Die Grafiken am Handy

   Die Zeichnung hat eine viewBox von 720 Einheiten und wird auf die
   Spaltenbreite gestreckt. Am Telefon sind das rund 350 Pixel, also Faktor
   0,49 -- eine Beschriftung mit 11 Einheiten kommt dort als 5 Pixel an und
   ist nicht mehr zu lesen. Gemessen, nicht geschaetzt: Das Verhaeltnis
   steht in der viewBox.

   Deshalb wachsen unter 34rem alle Schriften IN der Zeichnung, nicht die
   Zeichnung selbst. Die Werte sind so gewaehlt, dass der laengste String
   der jeweiligen Zeile noch in die 720 Einheiten passt -- beim Etikett
   zusaetzlich mit kleinerem Sperrsatz, weil es die laengste Zeile ist.
   -------------------------------------------------------------------------- */

@media (max-width: 34rem) {
  .g-etikett {
    font-size: 19px;
    letter-spacing: 0.05em;
  }
  .g-balkenwert {
    font-size: 34px;
  }
  .g-balkenwert-klein {
    font-size: 26px;
  }
  .g-balkenname {
    font-size: 22px;
  }
  .g-saeulenwert {
    font-size: 22px;
  }
  .g-saeulenname {
    font-size: 18px;
  }
  .g-quelle {
    font-size: 18px;
  }
}

/* ══════════════════════════════════════════════════════════════
   Zeitungsbauart (14.9.2026), nach Art der NZZ

   Vorher sah die Seite aus wie ein Essay-Blog: Cremepapier, Initiale,
   weiche Kaesten. Erster Umbau mit fetter serifenloser Schlagzeile wirkte
   "sehr normal". Gegen NZZ und Standard gemessen:
   - NZZ: Schlagzeile Serife 32px, Gewicht 500 (nicht fett); Lead
     serifenlos 20px; Fliesstext Serife 20/32px auf 640px; viel Weissraum,
     fast kein Beiwerk.
   - Standard: Fliesstext Serife 18/28px auf 615px.
   Umgesetzt mit freien Schriften, lokal ausgeliefert: Newsreader (fuer
   Nachrichtenseiten gezeichnet, optische Groessen) und Inter.
   Kein Nachbau eines bestimmten Blatts.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
  --paper: #ffffff;
  --paper-2: #f5f4f0;
  --ink: #121212;
  --ink-2: #2b2b2b;
  --ink-3: #636363;
  --rule: #e2e0da;
  --brand: #1d3f73;
  --brand-2: #1d3f73;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wide: min(100% - 2.5rem, 72rem);
}

body {
  background: #fff;
  font-family: var(--serif);
  font-size: 1.25rem; /* 20px wie NZZ */
  line-height: 1.6;
  font-optical-sizing: auto;
}
@media (max-width: 34rem) {
  body {
    font-size: 1.125rem;
  }
}

.wrap-wide {
  width: var(--wide);
  margin-inline: auto;
}
.wrap {
  width: min(100% - 2.5rem, 40rem);
}

/* ── Blattkopf ── */
.masthead {
  background: #fff;
  border-bottom: 1px solid var(--ink);
}
.mast-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.05rem 0 0.95rem;
}
.logo {
  grid-column: 2;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.55rem, 4vw, 2.1rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo span {
  margin-left: 0.22em;
  color: var(--brand);
  font-style: italic;
  font-weight: 500;
}
.mast-seite {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-3);
}
.mast-rechts {
  justify-self: end;
}
/* Rechtsseiten: nur die Wortmarke */
.masthead .wrap.mast-inner .logo {
  grid-column: 2;
}
.masthead .mast-tag {
  display: none;
}
@media (max-width: 40rem) {
  .mast-seite {
    display: none;
  }
}

.crumb {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-3);
  padding-top: 1.1rem;
  width: min(100%, 40rem);
  margin-inline: auto;
}

/* ── Eine Spalte, mittig ── */
.blatt {
  width: min(100%, 40rem); /* 640px */
  margin-inline: auto;
}

/* ── Artikelkopf ── */
/* § 5a Abs. 4 UWG: eigene Zeile, Fliesstextgroesse der Schrift, volle
   Textfarbe, Rahmen (Otto, 14.9.2026). */
.anzeige-zeile {
  margin: 2.6rem 0 0;
}
.anzeige {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 0.1rem 0.5rem;
  line-height: 1.35;
}
.kopfzeile {
  margin: 1.1rem 0 0.6rem;
}
.kicker {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand);
  margin: 0;
}
h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.012em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}
.standfirst {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 350;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 1.4rem;
}
.byline {
  display: block;
  border: 0;
  padding: 0 0 1.6rem;
  font-family: var(--sans);
}
.byline p {
  margin: 0;
}
.byline-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}
.byline-meta {
  font-size: 0.8rem;
  font-weight: 350;
  color: var(--ink-3);
}

/* ── Auf einen Blick ── */
.kurz {
  border-block: 1px solid var(--ink);
  padding: 1.1rem 0 0.4rem;
  margin: 0 0 2.4rem;
  font-family: var(--sans);
}
.kurz-titel {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.kurz ul {
  margin: 0;
  padding-left: 1.1rem;
}
.kurz li {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 0.55rem;
}
.kurz li::marker {
  color: var(--ink);
}

/* ── Fliesstext ── */
p {
  margin: 0 0 1.35rem;
}
h2 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 1.7rem);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.008em;
  margin: 2.8rem 0 0.8rem;
  scroll-margin-top: 1rem;
}
h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}
.lead {
  font-size: inherit;
}
li::marker {
  color: var(--ink-3);
}

/* ── Grafik ── */
.aufmacher svg {
  background: #fff;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  padding: 1.1rem 0 0.3rem;
}
.aufmacher figcaption {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 350;
  color: var(--ink-3);
  border: 0;
  padding: 0;
}
.g-balken {
  fill: var(--ink);
  fill-opacity: 0.07;
  stroke: var(--ink);
}

/* ── Zitat: gross, Serife, kursiv, ohne Balken ── */
.pull {
  border: 0;
  margin: 2.6rem 0;
  padding: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.4vw, 1.9rem);
  line-height: 1.3;
  text-align: center;
}
.pull cite {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-style: normal;
  margin-top: 0.8rem;
}

/* ── Kaesten ── */
.box {
  background: var(--paper-2);
  border: 0;
  border-radius: 0;
  padding: 1.4rem 1.5rem;
}
.box-label,
.cta-label,
.ueber-titel {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.box h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
}
.box p {
  font-size: 1.08rem;
}
.check li {
  font-size: 1.1rem;
}
.check li::before {
  border-radius: 50%;
  background: var(--ink);
  width: 0.4rem;
  height: 0.4rem;
  top: 0.72em;
}
table {
  font-family: var(--sans);
}
th {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.cta {
  background: var(--paper-2);
  color: var(--ink);
  border-radius: 0;
  border-top: 1px solid var(--ink);
}
.cta h2 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
}
.cta p {
  color: var(--ink-2);
}
.cta-label,
.cta small {
  color: var(--ink-3);
}
.cta a {
  background: var(--ink);
  color: #fff;
  border-radius: 0;
  font-family: var(--sans);
  font-weight: 500;
}
.faq summary {
  font-family: var(--sans);
  font-size: 1rem;
}
.faq summary::after {
  color: var(--ink);
}
.faq p {
  font-size: 1.08rem;
}
.quellen {
  border-top: 1px solid var(--ink);
}
.quellen h2 {
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 600;
}

/* ── Über diesen Beitrag ── */
.ueber-beitrag {
  margin-top: 2.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.55;
}
.ueber-beitrag p {
  margin: 0;
}
.ueber-titel {
  margin-bottom: 0.35rem !important;
}

/* ── Fuss ── */
footer {
  border-top: 1px solid var(--ink);
  margin-top: 4rem;
  font-family: var(--sans);
}
.footer-logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--ink);
  margin: 0 0 1rem;
}
.footer-logo span {
  margin-left: 0.22em;
  color: var(--brand);
  font-style: italic;
  font-weight: 500;
}

/* ── Rechtsseiten ── */
.legal h1 {
  margin-top: 2rem;
}
.legal .addr {
  font-style: normal;
  border-radius: 0;
}

/* Keine doppelte Linie, wenn die Grafik direkt unter "Auf einen Blick" steht. */
.kurz + .aufmacher svg {
  border-top: 0;
  padding-top: 0;
}

/* Die hervorgehobene Saeule (50-59) behaelt ihre Betonung: Der Zeitungsblock
   setzt alle Balken auf leises Grau und hat sie sonst mit ueberschrieben. */
.g-balken-auf {
  fill: var(--brand);
  fill-opacity: 0.16;
  stroke: var(--brand);
  stroke-width: 1.5;
}

/* "Anzeige" exakt in Fliesstextgroesse (Otto, 14.9.2026): 1em erbt die
   Groesse des Fliesstexts, 20px am Rechner, 18px am Handy. */
.anzeige {
  font-size: 1em;
}

/* ══════════════════════════════════════════════════════════════
   Grafiken nach Zeitungsart (14.9.2026)

   Vorher: gerahmte, grau gefuellte Kaesten mit der Zahl darin -- sah aus
   wie ein Formular, nicht wie eine Zeitungsgrafik. Jetzt wie in den
   Grafiken von NZZ und Standard: eine Aussage als Titel, darunter was
   gemessen wurde, schmale Balken ohne Rahmen auf einer Skala mit
   Haarlinien, der Wert direkt am Balkenende, Quelle klein darunter.
   Hervorgehoben ist nur der eine Wert, um den es geht -- der Rest grau.
   HTML statt SVG, damit die Schrift am Handy nicht mitschrumpft.
   ══════════════════════════════════════════════════════════════ */

.grafik {
  margin: 0 0 2.6rem;
  font-family: var(--sans);
  border-top: 1px solid var(--ink);
  padding-top: 1rem;
}
.kurz + .grafik {
  border-top: 0;
  padding-top: 0;
}
.grafik-klein {
  margin-top: 2.4rem;
}
.grafik-titel {
  font-size: 1.08rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.grafik-unter {
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-3);
  margin: 0 0 1.3rem;
}

/* Balken waagrecht */
.gb {
  --lbl: 7.2rem;
  position: relative;
}
.gb-reihe {
  display: grid;
  grid-template-columns: var(--lbl) 1fr;
  align-items: center;
  column-gap: 0.9rem;
  padding: 0.5rem 0;
  position: relative;
  z-index: 1;
}
.gb-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.gb-name small {
  display: block;
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--ink-3);
}
.gb-spur {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.gb-balken {
  height: 1.55rem;
  width: var(--w);
  background: #c9c7c0;
  border-radius: 0 2px 2px 0;
  flex: none;
}
.gb-reihe.an .gb-balken {
  background: var(--brand);
}
.gb-wert {
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Skala: Haarlinien hinter den Balken, Zahlen darunter */
.gb-skala {
  display: grid;
  grid-template-columns: var(--lbl) 1fr;
  column-gap: 0.9rem;
  margin-top: 0.2rem;
}
.gb-ticks {
  grid-column: 2;
  position: relative;
  height: 1.2rem;
  border-top: 1px solid var(--ink);
}
.gb-ticks span {
  position: absolute;
  left: var(--p);
  transform: translateX(-50%);
  top: 0.25rem;
  font-size: 0.72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.gb-ticks span:first-child {
  transform: none;
}
.gb-gitter {
  position: absolute;
  inset: 0 0 1.4rem calc(var(--lbl) + 0.9rem);
  pointer-events: none;
}
.gb-gitter i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p);
  border-left: 1px solid var(--rule);
}

/* Saeulen senkrecht */
.gs {
  position: relative;
  height: 13rem;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 0.6rem;
  align-items: end;
  border-bottom: 1px solid var(--ink);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px);
  background-size: 100% calc(100% / var(--linien));
  background-position: 0 0;
}
.gs-saeule {
  height: var(--h);
  background: #c9c7c0;
  border-radius: 2px 2px 0 0;
  position: relative;
}
.gs-saeule.an {
  background: var(--brand);
}
.gs-saeule b {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 0.25rem;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gs-namen {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 0.6rem;
  margin-top: 0.35rem;
}
.gs-namen span {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.gs-namen span.an {
  color: var(--ink);
  font-weight: 650;
}

.grafik-quelle {
  font-size: 0.74rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0;
}
.grafik figcaption {
  font-family: var(--sans);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

@media (max-width: 34rem) {
  .gb {
    --lbl: 4.6rem;
  }
  .gs {
    gap: 0.3rem;
  }
  .gs-saeule b {
    font-size: 0.72rem;
  }
  .gs-namen {
    gap: 0.3rem;
  }
  .gs-namen span {
    font-size: 0.68rem;
  }
}
.gb {
  --lbl: 9.5rem;
}
.gb-ticks span:last-child {
  transform: translateX(-100%);
}
@media (max-width: 34rem) {
  .gb {
    --lbl: 5.4rem;
  }
}
/* Die Skala endet bei 82 % der Spur: rechts bleibt Platz fuer den Wert am
   laengsten Balken, sonst ragt "929 Tage" am Handy aus der Spalte. */
.gb-balken {
  width: calc(var(--w) * 0.82);
}
.gb-ticks span,
.gb-ticks span:last-child {
  left: calc(var(--p) * 0.82);
  transform: translateX(-50%);
}
.gb-ticks span:first-child {
  transform: none;
}
.gb-gitter i {
  left: calc(var(--p) * 0.82);
}
.gb-ticks {
  border-top: 0;
}
.gb-ticks::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 82%;
  border-top: 1px solid var(--ink);
}