/* ==========================================================================
   UNLISTED — Broadsheet
   Visuelles System nach Figma „NAO Website — Broadsheet Rebuild"
   (File vkkiqa30C4niH7swhTLexO, Seite „02 · Playground").

   Die Bauart in einem Satz: Papier, Tinte, Haarlinien. Keine Rundungen,
   keine Schatten, keine Farbverläufe auf Flächen. Alles sitzt in einem
   Rahmen aus 1px-Linien, jede Linie endet auf einer Kante.
   ========================================================================== */

:root {
  /* Flächen */
  --paper:        #f5f0e8;   /* Seitengrund */
  --ink:          #1b1327;   /* Tinte: Text, Linien, dunkle Flächen */
  --ink-media:    #241a33;   /* Bildplatzhalter */
  --lilac:        #d5c5f6;   /* einziger Akzent */
  --lilac-deep:   #c3adf1;   /* Akzent, angefasst */

  /* Tinte auf Papier */
  --on-light-75:  rgba(27, 19, 39, .75);
  --on-light-71:  rgba(27, 19, 39, .71);
  --on-light-66:  rgba(27, 19, 39, .66);
  --on-light-45:  rgba(27, 19, 39, .45);
  --on-light-12:  rgba(27, 19, 39, .12);

  /* Papier auf Tinte */
  --on-dark:      #f5f0e8;
  --on-dark-88:   rgba(245, 240, 232, .88);
  --on-dark-72:   rgba(245, 240, 232, .72);
  --on-dark-62:   rgba(245, 240, 232, .62);
  --on-dark-50:   rgba(245, 240, 232, .50);

  /* Haarlinien */
  --rule:         #1b1327;
  --rule-dark:    rgba(245, 240, 232, .40);
  --rule-dark-2:  rgba(245, 240, 232, .16);

  /* Schrift */
  --serif: "Inria Serif", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Raster — der Inhalt nutzt die volle Fensterbreite, nur der Rand steht fest */
  --pad:   64px;
  --kopf:  73px;   /* Höhe der Kopfleiste; das Hero-Skript misst sie und schreibt sie fort */

  /* Rückwärtskompatible Namen — alte Regeln greifen ins neue System */
  --bg: var(--paper);
  --surface: var(--paper);
  --accent: var(--lilac);
  --deep: var(--ink);
  --line: var(--rule);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.52;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
::selection { background: var(--lilac); color: var(--ink); }

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

/* --------------------------------------------------------------------------
   Schriftbild — die Stile aus der Figma-Bibliothek, 1:1
   letterSpacing steht dort in Prozent, hier als em.
   -------------------------------------------------------------------------- */

/* display/xl — 82 / 0.88 / −4.2 % */
.t-display {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(44px, 5.7vw, 82px); line-height: .88; letter-spacing: -.042em;
}
/* heading/lg — 64 / 0.94 / −2 % */
.t-h1 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 64px); line-height: .94; letter-spacing: -.02em;
}
/* heading/md — 58 / 0.96 / −3.2 % */
.t-h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(32px, 4vw, 58px); line-height: .96; letter-spacing: -.032em;
}
/* heading/sm — 38 / 1.0 / −2.4 % */
.t-h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -.024em;
}
/* serif/item — 28 / 1.15 / −1 % */
.t-item {
  font-family: var(--serif); font-weight: 700;
  font-size: 28px; line-height: 1.15; letter-spacing: -.01em;
}
/* serif/item-sm — 24 / 1.25 / −1 % */
.t-item-sm {
  font-family: var(--serif); font-weight: 700;
  font-size: 24px; line-height: 1.25; letter-spacing: -.01em;
}
/* serif/stat-md — 42 / 1.05 / −2 % */
.t-stat {
  font-family: var(--serif); font-weight: 700;
  font-size: 42px; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
/* body/lede — 17 / 1.7 */
.t-lede { font-size: 17px; line-height: 1.7; color: var(--on-light-71); }
/* body/relaxed — 15 / 1.75 */
.t-body { font-size: 15px; line-height: 1.75; color: var(--on-light-71); }
/* body/sm — 13 / 1.65 */
.t-sm { font-size: 13px; line-height: 1.65; color: var(--on-light-66); }
/* label/kicker — Inter 600 / 11 / 1 / 22 % */
.t-kicker {
  font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
}
/* label/micro — Inter 600 / 10 / 1.2 / 18 % */
.t-micro {
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase;
}
/* label/meta — Inter 600 / 11 / 1.3 / 14 % */
.t-meta {
  font-weight: 600; font-size: 11px; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase;
}
/* ui/data — Inter 600 / 15 / 1.3 */
.t-data { font-weight: 600; font-size: 15px; line-height: 1.3; font-variant-numeric: tabular-nums; }

/* Deutsche Komposita sind lang. Überschriften trennen, statt zu überlaufen. */
.hero__title, .card__title, .toprow__title, .promo__claim, .news__t, .card__name,
.pagehead h1, .sheet h1, .sheet__h2, .sect h2, .sectrow h2, .all__head h2,
.t-display, .t-h1, .t-h2, .t-h3, .t-item, .t-item-sm {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --------------------------------------------------------------------------
   Raster
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
}
/* Manche Seiten schachteln Kopf- und Fußzeile in eine .shell — dann trägt
   nur die äußere Hülle das Maß, sonst federt das Innenmaß doppelt. */
.shell .top__row, .shell .head__row,
.shell .foot__inner, .shell .foot__base {
  padding-left: 0; padding-right: 0;
}
main.shell { padding-bottom: 104px; }
section { scroll-margin-top: 120px; }

/* Abschnittskopf: Nummer/Name links, Lede rechts — „NAO / Section Head" */
.sect, .sectrow, .all__head {
  display: flex;
  align-items: flex-end;
  gap: 64px;
  padding: 88px 0 36px;
}
.sect h2, .sectrow h2, .all__head h2 {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(30px, 3.4vw, 46px); line-height: .96; letter-spacing: -.024em;
  color: var(--ink);
}
.sect .meta, .sectrow .meta, .all__count, .sect > span, .sectrow > span {
  flex: none;
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 6px;
}
.sect .meta a, .sectrow .meta a { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* Seitenkopf */
.pagehead { padding: 96px 0 56px; display: flex; gap: 64px; align-items: flex-end; }
.pagehead h1 {
  flex: 1 1 auto; margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(40px, 5vw, 72px); line-height: .92; letter-spacing: -.03em;
}
.pagehead p {
  flex: none; width: 340px; margin: 0;
  font-size: 17px; line-height: 1.7; color: var(--on-light-71);
}

/* --------------------------------------------------------------------------
   Kopfleiste
   -------------------------------------------------------------------------- */

.top, .head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
/* Marke und Navigation stehen links beieinander, alles Übrige rechts. */
.top__row, .head__row {
  display: flex; align-items: center; gap: 36px;
  height: 72px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.head .shell.head__row, .top .shell.top__row { padding: 0 var(--pad); }

.logo, .brand { flex: none; display: flex; align-items: center; color: var(--ink); min-width: 0; }

/* Wortmarke „unlisted" — Streichung über „listed", jetzt in Lilac auf Serif */
/* Die Wortmarke ist ein Inline-SVG, keine gesetzte Schrift mehr. Die Buchstaben
   tragen currentColor und folgen damit der Textfarbe — dunkel auf Papier, hell
   über dem Hero. Der Lilac-Strich steht fest im SVG; er ist der Akzent, nicht
   der Text, und soll gerade NICHT mitwandern.
   Seitenverhältnis 196.95 : 43.52 — die Breite ergibt sich aus der Höhe. */
svg.wordmark {
  display: block;
  height: 22px; width: auto;
  color: inherit;             /* erbt von .brand bzw. .foot — sonst bliebe die
                                 Marke über dem Hero dunkel statt hell zu werden */
  overflow: visible;          /* der 5er-Strich endet sonst auf der Kante */
}

.nav { display: flex; align-items: center; gap: 30px; flex: 0 0 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a, .nav__link {
  font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-light-66);
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover, .nav__link:hover { color: var(--ink); }
.nav a.is-active, .nav__link--active {
  color: var(--ink);
  border-bottom-color: var(--lilac);
  background: none; padding: 6px 0; border-radius: 0;
}

.top__right, .head__right { margin-left: auto; display: flex; align-items: center; gap: 20px; min-width: 0; }
.head__row > .nav { margin-right: auto; }

.search {
  flex: 1 1 auto; width: 260px; min-width: 110px; max-width: 280px; height: 38px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0 14px;
  font: inherit; font-size: 13px;
  color: var(--ink);
}
.search::placeholder { color: var(--on-light-45); }
.search:focus { outline: 0; background: rgba(213, 197, 246, .28); }

.stand {
  flex: none; white-space: nowrap;
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}

/* --------------------------------------------------------------------------
   Laufband
   -------------------------------------------------------------------------- */

/* Das Laufband liegt außerhalb des Satzspiegels: die Linie geht von Kante zu
   Kante, nur die Schlagzeilen rücken auf den Rand des Satzspiegels ein. */
.ticker {
  display: flex; align-items: stretch;
  width: 100%;
  padding-left: var(--pad);
  border-bottom: 1px solid var(--rule);
  height: 46px;
}
.ticker__win {
  flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 2%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2%, #000 88%, transparent);
}
.ticker__track { display: flex; gap: 40px; width: max-content; animation: tick 52s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track a {
  font-family: var(--serif); font-weight: 700;
  font-size: 17px; letter-spacing: -.01em; line-height: 1;
  color: var(--ink); white-space: nowrap;
}
.ticker__track a:hover { color: var(--on-light-66); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 20px)); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* --------------------------------------------------------------------------
   Bühne — Leitartikel + Top-Meldungen in einem Rahmen
   -------------------------------------------------------------------------- */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  border: 1px solid var(--rule);
  margin-top: 56px;
}

.hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: var(--on-dark);
  min-height: 480px;
  display: flex; flex-direction: column;
  padding: 44px;
  border-radius: 0;
}
.hero:hover { color: var(--on-dark); }
.hero__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(27, 19, 39, .58) 0%, rgba(27, 19, 39, .78) 55%, rgba(27, 19, 39, .94) 100%);
}
.hero > .hero__c { position: relative; z-index: 2; }
.hero__pill {
  display: inline-flex; width: fit-content;
  background: none; border: 1px solid var(--rule-dark);
  border-radius: 0; padding: 8px 14px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-88);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero__spacer { flex: 1 1 auto; min-height: 28px; }
.hero__title {
  margin: 26px 0 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(34px, 3.6vw, 54px); line-height: .96; letter-spacing: -.028em;
  color: var(--on-dark);
}
.hero__x {
  margin: 18px 0 0; max-width: 46ch;
  font-size: 17px; line-height: 1.7; color: var(--on-dark-72);
}
.hero__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 28px; padding-top: 20px;
  border-top: 1px solid var(--rule-dark-2);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.hero__when { color: var(--on-dark-62); }
.hero__go { color: var(--on-dark); }
.hero:hover .hero__go { color: var(--lilac); }

/* Top-Meldungen — Zeilen, durch Haarlinien getrennt */
.topcard {
  border-left: 1px solid var(--rule);
  display: flex; flex-direction: column;
  background: var(--paper);
}
.topcard h2 {
  margin: 0; padding: 22px 28px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-weight: 600; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.topcard__rows { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Die drei Zeilen teilen sich die Höhe der Spalte zu gleichen Teilen —
   sonst bleibt unter der dritten Meldung eine tote Fläche stehen. */
.toprow {
  flex: 1 1 0; min-height: max-content;
  display: flex; gap: 18px; align-items: center;
  padding: 22px 28px;
  border-bottom: 1px solid var(--on-light-12);
  transition: background .15s ease;
}
.toprow:last-child { border-bottom: 0; }
.toprow:hover { background: rgba(213, 197, 246, .3); }
.toprow__num {
  flex: none;
  font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1;
  color: var(--on-light-45);
  font-variant-numeric: tabular-nums;
}
.toprow__title {
  font-family: var(--serif); font-weight: 700;
  font-size: 20px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink);
}
.toprow__when {
  margin-top: 8px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}

/* --------------------------------------------------------------------------
   Werbebanner — Anzeige, CTA-Band und Risikohinweis
   Bauform aus dem Figma-Baustein „18 · Hinweis / Callout + CTA-Band".
   Als Anzeige gekennzeichnet: auf einer redaktionellen Seite muss Werbung
   vom Redaktionsteil unterscheidbar bleiben.
   -------------------------------------------------------------------------- */

.promo { display: flex; flex-direction: column; gap: 12px; margin-top: 56px; }
.promo__label {
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-45);
}
/* Ein Kasten: Anzeige und Risikohinweis stehen zusammen auf Tinte, getrennt
   von einer Haarlinie — der Hinweis gehört zum Angebot, nicht daneben. */
.promo__band {
  display: flex; flex-direction: column; gap: 28px;
  padding: 40px 48px;
  border: 1px solid var(--rule);
  background: var(--ink); color: var(--on-dark);
}
.promo__band:hover { color: var(--on-dark); }
.promo__row {
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.promo__text { display: block; min-width: 0; }
.promo__brand {
  display: block; margin-bottom: 14px;
  font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase; color: var(--lilac);
}
.promo__claim {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -.01em;
  color: var(--on-dark);
}
.promo__sub {
  display: block; margin-top: 12px; max-width: 56ch;
  font-size: 15px; line-height: 1.75; color: var(--on-dark-62);
}
.promo__btn {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  background: var(--lilac); color: var(--ink);
  font-weight: 600; font-size: 11px; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
}
.promo__btn::after { content: "↗"; font-size: 15px; letter-spacing: 0; }
.promo__band:hover .promo__btn { background: var(--paper); }
.promo__note {
  display: flex; gap: 32px; align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid var(--rule-dark-2);
}
.promo__note-l {
  flex: none;
  font-weight: 600; font-size: 10px; line-height: 1.65;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-50);
}
.promo__note-t {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; line-height: 1.65; color: var(--on-dark-50);
}

/* --------------------------------------------------------------------------
   Beitragsraster — Karten im gemeinsamen Rahmen, Haarlinien statt Lücken
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  border: 1px solid var(--rule);
  border-bottom: 0; border-right: 0;
}
.card {
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0; overflow: hidden;
  transition: background .15s ease;
}
.card:hover { background: rgba(213, 197, 246, .3); color: var(--ink); }
/* Text-Karten ohne Bild (Beteiligungen, Reihen) tragen ihr Innenmaß selbst */
article.card { padding: 26px 24px; gap: 14px; }

/* Das Bild füllt die Kachel randlos; unten schließt eine Haarlinie zum Text ab.
   Das Maß ist ein Seitenverhältnis, keine feste Höhe: Die Kachel wächst mit der
   Spalte statt bei jeder Fensterbreite anders zu beschneiden. 3:2 steht höher als
   das 16:9 der Titelbilder — beschnitten wird deshalb links, siehe .card__bg. */
.card__media {
  position: relative;
  aspect-ratio: 3 / 2; padding: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-media);
}
/* Leerzustand: Tinte mit Formatmarke — so steht es in der Figma-Bibliothek */
.card__media::after {
  content: "UNLISTED"; position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 10px; letter-spacing: .18em;
  color: rgba(245, 240, 232, .26);
}
/* Das Bild läuft im Fluss im Innenmaß des Rahmens. Absolut positioniert mit
   width/height:auto nähme ein <img> seine Eigengröße statt der Rahmenkante. */
/* Der Schnitt liegt rechtsbündig: Die Titelbilder tragen das Label „AI generiert"
   in der rechten unteren Ecke — ein mittiger Schnitt würde es anschneiden. Die
   Motive sind weiträumig, der fehlende linke Rand fällt nicht auf. */
.card__bg {
  position: relative; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 50%;
}
.card__overlay { display: none; }
.card__c, .card__content { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 26px; flex: 1 1 auto; }
.card__spacer { display: none; }
.card__metarow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.card__kicker {
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.card__when {
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-66);
}
.card__title {
  font-family: var(--serif); font-weight: 700;
  font-size: 24px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink);
}
.card__x { margin: 0; font-size: 13px; line-height: 1.65; color: var(--on-light-66); }
.card__foot {
  margin-top: auto; padding-top: 16px;
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--on-light-12);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}

/* --------------------------------------------------------------------------
   Bedienelemente
   -------------------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 28px; }
.filters button, .chip, .seg__btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule); background: none; color: var(--on-light-66);
  padding: 11px 18px; margin: 0 -1px -1px 0; border-radius: 0; cursor: pointer;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  transition: background .15s ease, color .15s ease;
}
/* Farbmarke der Reihe: ein Quadrat, kein Punkt — das Broadsheat kennt keine Rundung */
.dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 0; }
.filters button:hover, .chip:hover, .seg__btn:hover { background: rgba(213, 197, 246, .35); color: var(--ink); }
.filters button.is-active, .chip.is-active, .seg__btn.is-active {
  background: var(--lilac); color: var(--ink); border-color: var(--rule);
}
.cats { display: flex; flex-wrap: wrap; margin-bottom: 40px; }
.seg { display: inline-flex; margin-left: auto; }

.more, .btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 32px; padding: 16px 26px;
  border: 1px solid var(--rule); background: var(--lilac); color: var(--ink);
  border-radius: 0; cursor: pointer;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.more:hover, .btn:hover { background: var(--ink); color: var(--paper); }
.btn::after { content: "↗"; font-size: 15px; letter-spacing: 0; }

.pill {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); padding: 7px 12px; border-radius: 0;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}

/* Zustände */
.state, .empty, .news__state {
  padding: 56px 0;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.state button {
  margin-left: 16px; padding: 10px 16px; cursor: pointer;
  border: 1px solid var(--rule); background: none; border-radius: 0;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.state button:hover { background: var(--lilac); }
.meta {
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-66);
}
.mono { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Artikel (artikel.html)
   -------------------------------------------------------------------------- */

.sheet { max-width: 760px; margin: 72px auto 0; padding: 0 0 64px; }
.sheet__top {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding-bottom: 22px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.sheet__top .redaktion { color: var(--ink); }
/* Zurück-Knopf vor dem Ressort — gleiche Bauform wie die Ressort-Marke */
.sheet__back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-right: 4px; padding: 7px 12px;
  border: 1px solid var(--rule); color: var(--ink);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  transition: background .15s ease;
}
.sheet__back::before { content: "←"; font-size: 14px; letter-spacing: 0; }
.sheet__back:hover { background: var(--lilac); color: var(--ink); }
.sheet h1 {
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px); line-height: .94; letter-spacing: -.028em;
}
.sheet__meta {
  margin-top: 24px; padding: 18px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 14px;
}
.sheet__when {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.sheet__sum { font-size: 17px; line-height: 1.7; color: var(--on-light-71); }
.sheet__lead {
  margin: 36px 0 0;
  font-size: 21px; line-height: 1.6; color: var(--ink);
}
.sheet__body { margin-top: 36px; font-size: 17px; line-height: 1.75; color: var(--on-light-75); }
.sheet__body p { margin: 0 0 24px; }
.sheet__body a { color: var(--ink); border-bottom: 1px solid var(--lilac); }
.sheet__body a:hover { background: var(--lilac); }
.sheet__h2 {
  margin: 52px 0 18px;
  font-family: var(--serif); font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.sheet__list { margin: 0 0 24px; padding-left: 20px; }
.sheet__list li { margin-bottom: 10px; }
.sheet__img { margin: 40px 0; border: 1px solid var(--rule); padding: 12px; background: var(--paper); }
.sheet__img img { width: 100%; }

/* Kennzahlenleiste im Artikel — „Section / Kennzahlenband".
   Flex statt Grid: die letzte Reihe verteilt ihre Kacheln auf die volle Breite,
   es bleiben nie leere Spalten mit halben Rahmen stehen. Die Haarlinien liegen
   auf jeder Kachel links und oben; der Versatz von −1px legt sie auf den
   Außenrahmen, sodass nirgends eine doppelte Linie entsteht.
   Die Werte kommen aus der Redaktion und sind mal „11", mal ein ganzer Satz —
   deshalb gleitender Schriftgrad, harter Wortumbruch und ein festes Mindestmaß
   je Kachel, damit die Reihen gleich hoch bleiben. */
.facts {
  display: flex; flex-wrap: wrap;
  margin: 40px 0;
  border: 1px solid var(--rule);
}
.fact {
  flex: 1 1 210px; min-width: 0;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 132px;
  margin: -1px 0 0 -1px;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  padding: 24px 22px;
}
.fact:first-child { background: var(--lilac); }
.fact__v {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(21px, 1.6vw, 30px); line-height: 1.12; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums; color: var(--ink);
  overflow-wrap: anywhere; hyphens: auto;
}
.fact__l {
  margin-top: auto;
  font-weight: 600; font-size: 10px; line-height: 1.45;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
  overflow-wrap: anywhere; hyphens: auto;
}

.srcbox { margin: 44px 0 0; border: 1px solid var(--rule); padding: 26px 28px; }
.srcbox__note {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66); margin-bottom: 14px;
}
.srcbox a { display: block; padding: 6px 0; color: var(--ink); font-size: 14px; }
.srcbox a:hover { color: var(--on-light-66); }

/* --------------------------------------------------------------------------
   Bereichs-Navigation in der Kopfzeile (alle Seiten)
   Versal-Marken auf einer Haarlinie; die aktive Seite trägt den Lilac-Balken
   unter sich, kein gefülltes Feld — Flächen gibt es im System nicht.
   -------------------------------------------------------------------------- */

.sitenav {
  /* Linksbündig direkt neben der Wortmarke — auf jeder Seite gleich, weil die
     rechte Gruppe über margin-left:auto weggedrückt wird statt zu schieben. */
  flex: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 28px; margin: 0;
}
.sitenav a {
  position: relative; padding: 4px 0;
  color: var(--on-light-66);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
.sitenav a:hover { color: var(--ink); }
.sitenav a[aria-current="page"] { color: var(--ink); }
.sitenav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--lilac);
}
@media (max-width: 720px) {
  .sitenav { flex: 1 0 100%; margin: 0; gap: 22px; }
}

/* --------------------------------------------------------------------------
   Holdings-Übersicht (holdings.html) und Fondsseite (fonds.html)
   -------------------------------------------------------------------------- */

.lede { padding: 44px 0 8px; max-width: 720px; }
.lede h1 {
  font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink); margin: 0;
}
.lede p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--on-light-66); }

/* Raster, das die Breite ausfüllt: die Karten teilen sich die Zeile zu gleichen
   Teilen, es wird nie seitlich gescrollt. Keine Trennlinien mehr — die Karten
   stehen frei auf dem Papier, das Bild gibt ihnen den Halt, den vorher der
   Rahmen gab. */
.frail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 34px 32px;
  margin-bottom: 26px;
}

.fcard {
  display: flex; flex-direction: column; gap: 7px;
  color: var(--ink); background: transparent;
  padding: 0; min-width: 0;
}
/* 16:9 statt 4:3: Die Karten werden mit wenigen Fonds je Klasse sehr breit, und
   ein hochformatiges Bild würde dann turmhoch. Der Deckel hält es auch dann flach. */
.fcard__media {
  width: 100%; aspect-ratio: 16 / 9; max-height: 340px; margin-bottom: 11px;
  background: var(--paper); overflow: hidden;
}
.fcard__media img { width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter, solange kein Produktbild hochgeladen ist */
.fcard__media--leer {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); padding: 16px; text-align: center;
}
.fcard__media--leer span {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-45);
}
.fcard:hover .fcard__name { border-bottom-color: var(--ink); }
.fcard__mgr {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.fcard__name {
  font-family: var(--serif); font-weight: 700; font-size: 21px; line-height: 1.18;
  letter-spacing: -.01em;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  align-self: flex-start;
}
.fcard__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; }
.fcard__isin, .fcard__ziel {
  font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink);
}
.fcard__ziel { font-weight: 600; }
.fcard__count {
  margin-top: 6px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-45);
}

@media (max-width: 560px) {
  .frail { grid-template-columns: 1fr; gap: 28px; }
}

.holdings__rest {
  margin: 0 0 48px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--on-light-66);
}

.fonds__media { margin: 8px 0 26px; border-bottom: 1px solid var(--rule); }
.fonds__media img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.fonds__facts { border-bottom: 1px solid var(--rule); margin-bottom: 4px; }

.fonds__mgr {
  margin-top: 10px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.fonds__note { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 720px; }

.complist { list-style: none; margin: 0 0 40px; padding: 0; border-top: 1px solid var(--rule); }
.complist__i {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.complist__i b { font-family: var(--serif); font-weight: 700; font-size: 18px; }
.complist__i span { font-size: 14px; line-height: 1.5; color: var(--on-light-66); flex: 1 1 320px; }

/* --------------------------------------------------------------------------
   Fondssteckbrief unter dem Artikel (artikel.html)
   Die Angaben kommen aus api/nao.php, nicht aus dem Artikeltext. Der Block ist
   ein Beleg, kein Werbekasten: Haarlinienrahmen wie überall, Lilac nur als
   Oberkante, damit er sich vom Fließtext absetzt, ohne ihn zu überstimmen.
   -------------------------------------------------------------------------- */

.fundcard {
  margin: 44px 0 0;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--lilac);
  background: var(--paper);
}
/* Produktbild: volle Breite über dem Kopf, 3:1 beschnitten — es soll die Karte
   anführen, nicht sie beherrschen. */
.fundcard__media { border-bottom: 1px solid var(--rule); }
.fundcard__media img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }

.fundcard__head { padding: 26px 28px 22px; }
.fundcard__kicker {
  margin: 0 0 12px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.fundcard__name {
  font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.1;
  letter-spacing: -.018em; color: var(--ink); margin: 0;
}
.fundcard__mgr {
  margin: 8px 0 0;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}

/* Kennzahlen nebeneinander: Label oben klein, Wert darunter groß. Die Haarlinien
   trennen die Spalten; die Reihe umbricht, ohne dass Werte verrutschen. */
.fundcard__facts {
  display: flex; flex-wrap: wrap;
  border-top: 1px solid var(--rule);
}
.ffact {
  flex: 1 1 148px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 20px 18px;
  border-right: 1px solid var(--rule);
}
.ffact:last-child { border-right: 0; }
.ffact__l {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.ffact__v {
  font-size: 17px; line-height: 1.2; color: var(--ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}

.fundcard__note {
  margin: 0; padding: 22px 28px 0;
  font-size: 15px; line-height: 1.6; color: var(--ink);
}
.fundcard__foot { padding: 20px 28px 24px; }
.fundcard__risk { margin: 0; font-size: 12px; line-height: 1.5; color: var(--on-light-66); }
.fundcard__links {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--rule);
}
.fundcard__src { color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.fundcard__src:hover { color: var(--on-light-66); border-color: var(--on-light-66); }

@media (max-width: 560px) {
  .fundcard__head, .fundcard__note, .fundcard__foot { padding-left: 18px; padding-right: 18px; }
  .fundcard__name { font-size: 25px; }
  .ffact { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ffact:last-child { border-bottom: 0; }
}


/* --------------------------------------------------------------------------
   Marktbild (marktbild.html)
   -------------------------------------------------------------------------- */

.mapcard { border: 1px solid var(--rule); background: var(--paper); padding: 12px; }
.hm { position: relative; width: 100%; height: 620px; }
.hm__tile { position: absolute; overflow: hidden; padding: 10px 12px; }
.hm__tile > b {
  display: block;
  font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -.01em;
}
.hm__tile > span {
  display: block; margin-top: 5px;
  font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.hm__sector { position: absolute; pointer-events: none; border: 1px solid var(--paper); }
.hm__sechead {
  position: absolute; z-index: 3; pointer-events: none;
  display: flex; align-items: baseline; gap: 12px;
  padding: 4px 2px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.hm__legend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 12px; padding: 16px 12px 6px;
  border-top: 1px solid var(--rule);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.hm__scale { display: inline-flex; align-items: center; gap: 6px; }
.hm__swatch { width: 30px; height: 12px; display: inline-block; border: 1px solid var(--on-light-12); }
.hm__tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--ink); color: var(--on-dark);
  border: 1px solid var(--rule); border-radius: 0;
  padding: 14px 16px; font-size: 13px; line-height: 1.5;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Entwicklung (entwicklung.html)
   -------------------------------------------------------------------------- */

.bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  margin-bottom: 0; padding-bottom: 20px;
}
.bar__label {
  margin-right: 20px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.chart { border: 1px solid var(--rule); padding: 12px; background: var(--paper); }
.chart svg { display: block; width: 100%; }
#chart svg { height: 460px; }
figure.chart { margin: 40px 0; }
figure.chart figcaption {
  padding: 0 4px 14px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.chart__src {
  margin: 14px 0 0; padding: 14px 4px 0;
  border-top: 1px solid var(--on-light-12);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.chart__src a { color: var(--ink); border-bottom: 1px solid var(--lilac); }
.chart__legend {
  display: flex; flex-wrap: wrap; gap: 28px; margin-top: 14px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.axisline { stroke: var(--on-light-12); stroke-width: 1; }
.lastlab { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .1em; }
.cross { stroke: var(--on-light-45); stroke-width: 1; }
.tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--ink); color: var(--on-dark);
  border: 1px solid var(--rule); border-radius: 0;
  padding: 14px 16px; font-size: 13px; line-height: 1.5;
}
.row { display: flex; justify-content: space-between; gap: 18px; }
.card__name { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.card__val { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.card__delta { font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.card__delta.is-up { color: var(--ink); }
.card__delta.is-down { color: var(--on-light-45); }
.card__meta, .card__note {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}
.card__note { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Beteiligungen (nao.html)
   -------------------------------------------------------------------------- */

.fund { padding-top: 16px; }
.fund__note { margin: 0 0 28px; font-size: 15px; line-height: 1.75; color: var(--on-light-71); max-width: 62ch; }
.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.card__more, .card__close {
  flex: none; align-self: flex-start;
  border: 1px solid var(--rule); background: none; cursor: pointer;
  padding: 10px 14px; border-radius: 0;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
}
.card__more:hover, .card__close:hover { background: var(--lilac); }
.card.is-open { background: rgba(213, 197, 246, .3); }
.news { border-top: 1px solid var(--on-light-12); margin-top: 18px; padding-top: 4px; }
.news__item { display: block; padding: 14px 0; border-bottom: 1px solid var(--on-light-12); }
.news__item:last-child { border-bottom: 0; }
.news__t { font-family: var(--serif); font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.news__m {
  margin-top: 6px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-light-66);
}

/* --------------------------------------------------------------------------
   Fuß
   -------------------------------------------------------------------------- */

.foot {
  margin-top: 104px;
  background: var(--ink); color: var(--on-dark-72);
  padding: 96px 0 0;
}
.foot__inner {
  display: flex; gap: 64px; align-items: flex-start;
  width: 100%;
  margin: 0 auto; padding: 0 var(--pad) 72px;
}
.foot__inner > div:first-child { flex: 1 1 auto; min-width: 0; }
.foot__brand, .foot__logo, .foot__brandrow { color: var(--on-dark); margin-bottom: 20px; }
.foot svg.wordmark { height: clamp(30px, 3.2vw, 46px); }
.foot__claim {
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--lilac); margin-bottom: 16px;
}
.foot__tag { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.75; color: var(--on-dark-62); }

.foot__cols { flex: none; display: flex; gap: 64px; flex-wrap: wrap; }
.foot__cols > div, .foot__col { display: flex; flex-direction: column; min-width: 150px; }
.foot__cols h3, .foot__h, .foot__col > span:first-child, .foot__cols > div > span:first-child {
  margin: 0 0 18px;
  font-weight: 600; font-size: 10px; line-height: 1.2;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-50);
}
.foot__cols a, .foot__col a {
  display: block; padding: 6px 0;
  font-size: 15px; color: var(--on-dark-72);
  transition: color .15s ease;
}
.foot__cols a:hover, .foot__col a:hover { color: var(--lilac); }

.foot__base {
  width: 100%;
  margin: 0 auto; padding: 26px var(--pad) 40px;
  border-top: 1px solid var(--rule-dark-2);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-dark-50);
}

/* --------------------------------------------------------------------------
   Schmalere Fenster
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --pad: 40px; }
  .sect, .sectrow, .all__head, .pagehead { gap: 40px; }
}

@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .topcard { border-left: 0; border-top: 1px solid var(--rule); }
  .toprow { flex: 0 0 auto; }
  .promo__row { flex-direction: column; align-items: flex-start; gap: 28px; }
  .promo__note { flex-direction: column; gap: 12px; }
  .pagehead { flex-direction: column; align-items: flex-start; gap: 24px; }
  .pagehead p { width: 100%; max-width: 52ch; }
  .foot__inner { flex-direction: column; gap: 56px; }
}

@media (max-width: 720px) {
  :root { --pad: 20px; }
  /* Die Bereichs-Navigation rückt in eine zweite Zeile: Die Zeile darf umbrechen
     und wächst mit — mit fester Höhe stand die Navigation vorher im Aus. */
  .top__row, .head__row, .head .shell.head__row, .top .shell.top__row {
    height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px 20px;
    padding-top: 12px; padding-bottom: 12px;
  }
  .head__row > .brand { order: 1; }
  .head__row > .head__right { order: 2; }
  .head__row > .sitenav { order: 3; }
  .nav { flex: 1 1 auto; gap: 22px; }
  .hero__title { font-size: 30px; }
  .pagehead h1 { font-size: 34px; }
  .sheet h1 { font-size: 30px; }
  .sheet__h2 { font-size: 24px; }
  .card__title { font-size: 21px; }
  .toprow__title { font-size: 18px; }
  .promo__claim { font-size: 21px; }
  .foot svg.wordmark { height: 28px; }
  .stand { display: none; }
  .search { max-width: 46vw; }
  .sect, .sectrow, .all__head { flex-direction: column; align-items: flex-start; gap: 16px; padding: 64px 0 28px; }
  .hero { padding: 30px 24px; min-height: 420px; }
  .grid { grid-template-columns: 1fr; }
  .promo__band { padding: 28px 24px; gap: 24px; }
  .foot { padding-top: 64px; }
  .foot__cols { gap: 40px; }
  .hm { height: 520px; }
}

/* --------------------------------------------------------------------------
   Seiten-Hero (private-markets.html, holdings.html)
   Randlos über die volle Breite, Bild mit flachem Tintenschleier darüber —
   ein Schleier, kein Verlauf: Flächen bleiben im System ungestuft.
   Ohne Bild bleibt die Tintenfläche stehen, die Seite sieht trotzdem fertig aus.
   -------------------------------------------------------------------------- */

.phero {
  position: relative;
  display: flex; flex-direction: column;
  /* Die Höhe sitzt am Hero, nicht am Inhalt: So teilen sich Text und Nachrichtenband
     denselben Schirm, statt dass das Band darunter herausrutscht. */
  /* Der Hero läuft UNTER die Kopfleiste hindurch, damit sie transparent über dem
     Bild liegen kann statt über Papier zu schweben. Der Textblock hält mit seinem
     Innenabstand Abstand zur Leiste. */
  margin-top: calc(-1 * var(--kopf));
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.phero__media { position: absolute; inset: 0; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__scrim { position: absolute; inset: 0; background: rgba(27, 19, 39, .62); }
.phero__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  /* Volle Bildschirmhöhe abzüglich der 72px hohen Kopfleiste — so füllt der Hero
     genau den ersten Schirm und der Knopf bleibt sichtbar. svh statt vh, weil die
     Adressleiste mobiler Browser sonst den unteren Rand abschneidet. */
  flex: 1 1 auto;
  padding-top: calc(104px + var(--kopf)); padding-bottom: 56px;
  justify-content: flex-end;
}
.phero__kicker {
  margin: 0 0 22px;
  font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--on-dark-72);
}
.phero__title {
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(38px, 5.4vw, 78px); line-height: .98; letter-spacing: -.03em;
  color: var(--on-dark);
}
.phero__lede {
  margin: 22px 0 0; max-width: 560px;
  font-size: 17px; line-height: 1.6; color: var(--on-dark-72);
}
.phero__cta {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 40px;
  margin-top: 34px; min-width: 300px; padding: 20px 24px;
  background: var(--lilac); color: var(--ink);
  font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.phero__cta:hover { background: var(--lilac-deep); }

/* Nachrichtenband auf der Unterkante des Heroes — auf Tinte statt auf Papier */
.phero .ticker {
  position: relative; z-index: 2;
  flex: none;
  border-top: 1px solid var(--rule-dark-2);
  border-bottom: 0;
  background: rgba(27, 19, 39, .55);
}
.phero .ticker__track a { color: var(--on-dark); }
.phero .ticker__track a:hover { color: var(--on-dark-72); }

@media (max-width: 560px) {
  .phero__inner { padding-top: calc(72px + var(--kopf)); padding-bottom: 48px; }
  .phero__cta { min-width: 0; width: 100%; gap: 20px; }
}

/* Kopfleiste über dem Hero: durchsichtig mit heller Schrift, bis der Hero
   durchgescrollt ist. Den Wechsel schaltet ein IntersectionObserver, kein
   Scroll-Listener — der feuert bei jedem Pixel, der Beobachter genau zweimal. */
.head--over, .top--over {
  background: transparent;
  border-bottom-color: transparent;
}
.head--over .brand, .top--over .logo,
.head--over .sitenav a[aria-current="page"], .top--over .sitenav a[aria-current="page"],
.head--over .stand, .top--over .stand { color: var(--on-dark); }
.head--over .sitenav a, .top--over .sitenav a { color: var(--on-dark-72); }
.head--over .sitenav a:hover, .top--over .sitenav a:hover { color: var(--on-dark); }
.head--over .search, .top--over .search {
  background: rgba(245, 240, 232, .12); color: var(--on-dark);
  border-color: var(--rule-dark-2);
}
.head--over .search::placeholder, .top--over .search::placeholder { color: var(--on-dark-50); }

/* --------------------------------------------------------------------------
   So funktioniert es (so-funktioniert-es.html)
   Die Erklärseite baut aus denselben Teilen wie der Rest: Abschnittsköpfe,
   Kartenraster, Kennzahlenband. Neu sind nur die Bauteile, die eine Abfolge
   zeigen — Stationen, Schritte, Fahrplan, Anatomie. Alles Haarlinie, kein
   Füllton, Lilac nur als Marke.
   -------------------------------------------------------------------------- */

.how__intro {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px; align-items: start;
  padding: 88px 0 0;
}
.how__intro h2 {
  margin: 0;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.06; letter-spacing: -.024em;
  /* Keine automatische Trennung: „Zu-schnitt" und „Her-mes" in einer Leitzeile sind
     schlimmer als ein etwas ungleicher Zeilenfall. */
  overflow-wrap: normal; hyphens: manual;
}
.how__intro p { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--on-light-71); }
.how__intro p:last-child { margin-bottom: 0; }
.how__p { margin: 0 0 18px; max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--on-light-75); }
.how__p a { color: var(--ink); border-bottom: 1px solid var(--lilac); }
.how__p a:hover { background: var(--lilac); }
.how__p--first { margin-top: -8px; }
.how__toc { margin: 36px 0 0; }
.how__toc .chip { cursor: pointer; }

/* Neun Regeln in drei Spalten — vier Spalten ließen eine Karte allein in der letzten Reihe */
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

/* Fondsseite: Luft zwischen Kopfleiste und Zurück-Knopf */
.fonds__head { padding-top: 40px; }

/* Stationen — die Kette in einer Zeile, Haarlinien statt Pfeile */
.flow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 1px solid var(--rule); border-right: 0; border-bottom: 0;
}
.flow__st {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 24px 30px; min-height: 230px;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.flow__no {
  font-family: var(--serif); font-weight: 700; font-size: 34px; line-height: 1;
  letter-spacing: -.02em; color: var(--on-light-45); font-variant-numeric: tabular-nums;
}
.flow__time {
  display: inline-flex; width: fit-content; padding-bottom: 4px;
  border-bottom: 3px solid var(--lilac);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.flow__t { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; }
.flow__x { margin: 0; font-size: 13px; line-height: 1.65; color: var(--on-light-66); }
.flow__out {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--on-light-12);
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-66);
}

/* Fahrplan */
.tt__wrap { overflow-x: auto; }
.tt { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); }
.tt th, .tt td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tt th { font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-66); }
.tt td { font-size: 15px; line-height: 1.6; color: var(--on-light-75); }
.tt td:first-child {
  font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: -.01em;
  white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink);
}
.tt td:nth-child(2) { color: var(--ink); font-weight: 600; }
.tt tr:last-child td { border-bottom: 0; }
.tt .tt__tmp td { color: var(--on-light-66); }
.tt .tt__tmp td:first-child, .tt .tt__tmp td:nth-child(2) { color: var(--on-light-66); }

/* Schritte — Nummer und Zeitfenster links, Erklärung rechts */
.step {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px;
  padding: 44px 0 48px; border-top: 1px solid var(--rule);
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.step__side { display: flex; flex-direction: column; gap: 10px; }
.step__no {
  font-family: var(--serif); font-weight: 700; font-size: 54px; line-height: .9;
  letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.step__time { font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-66); }
.step__job {
  display: inline-flex; width: fit-content; padding-bottom: 4px;
  border-bottom: 3px solid var(--lilac);
  font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.step h3 {
  margin: 0 0 16px;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -.02em;
  overflow-wrap: break-word; hyphens: auto;
}
.step p { margin: 0 0 16px; max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--on-light-75); }
.step ol, .step ul { margin: 0 0 18px; padding-left: 22px; max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--on-light-75); }
.step li { margin-bottom: 8px; }
.step li::marker { font-weight: 600; color: var(--ink); }
.step__io { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); margin-top: 24px; max-width: 760px; }
.step__io > div { padding: 16px 20px; }
.step__io > div + div { border-left: 1px solid var(--rule); }
.step__io b {
  display: block; margin-bottom: 8px;
  font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-66);
}
.step__io span { font-size: 14px; line-height: 1.6; color: var(--ink); }

/* Quellenleiter */
.ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: l; }
.ladder li {
  display: grid; grid-template-columns: 64px 280px minmax(0, 1fr); gap: 32px;
  padding: 22px 0; border-bottom: 1px solid var(--rule); counter-increment: l;
}
.ladder li::before {
  content: counter(l, decimal-leading-zero);
  font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--on-light-45); font-variant-numeric: tabular-nums;
}
.ladder b { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.ladder span { font-size: 15px; line-height: 1.65; color: var(--on-light-71); }

/* Anatomie eines Artikels — Schema links, Erklärung rechts */
.anat { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
.anat__sheet { border: 1px solid var(--rule); padding: 18px; background: var(--paper); }
.anat__blk {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border: 1px solid var(--rule); margin-top: -1px; padding: 12px 14px;
}
.anat__blk:first-child { margin-top: 0; }
.anat__blk--tall { min-height: 84px; }
.anat__blk--ink { background: var(--ink); color: var(--on-dark); }
.anat__blk--lilac { border-top: 3px solid var(--lilac); }
.anat__blk b { font-weight: 600; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.anat__blk i { font-style: normal; font-weight: 600; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-45); text-align: right; }
.anat__blk--ink i { color: var(--on-dark-50); }

/* Begriffsliste — auch für das Glossar */
.defs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.defs li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.defs b { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.defs span { font-size: 14px; line-height: 1.65; color: var(--on-light-71); }

/* Die Zusage auf Tinte */
.how__ink {
  margin-top: 56px; padding: 44px 48px;
  border: 1px solid var(--rule); background: var(--ink); color: var(--on-dark);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: end;
}
.how__ink .k { display: block; margin-bottom: 14px; font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--lilac); }
.how__ink h3 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(26px, 3vw, 40px); line-height: 1.05; letter-spacing: -.024em; }
.how__ink p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--on-dark-72); }

@media (max-width: 900px) {
  .how__intro, .anat, .how__ink { grid-template-columns: 1fr; gap: 28px; }
  .step { grid-template-columns: 1fr; gap: 20px; padding: 36px 0; }
  .step__side { flex-direction: row; align-items: baseline; gap: 18px; flex-wrap: wrap; }
  .step__no { font-size: 40px; }
  .ladder li { grid-template-columns: 48px minmax(0, 1fr); gap: 12px 20px; }
  .ladder li::before { grid-row: 1 / span 2; }
  .ladder span { grid-column: 2; }
  .defs li { grid-template-columns: 1fr; gap: 6px; }
  .step__io { grid-template-columns: 1fr; }
  .step__io > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .how__ink { padding: 32px 24px; }
}