/* ============================================================================
   02-elements.css — GLOBAL: geteilte Kleinteile

   Nur was in mehreren Komponenten vorkommt: Schaltflächen, Fliesstext,
   der schlichte Textblock. Alles Komponentenspezifische liegt beim
   jeweiligen Komponentenordner, NICHT hier.

   Auch hier: keine Container-Breiten — die kommen aus cmp-container.
   ============================================================================ */

/* ---- Schaltflächen ------------------------------------------------------- */
.x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 15px 26px 14px;
    font: var(--w-heading) var(--fs-btn)/1 var(--font-body);
    letter-spacing: .015em;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}
.x-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--faint); }

/* Hauptaktion: GRÜN. Gilt für alles ausser „Mitglied werden". */
.x-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}
.x-btn--primary:hover {
    background: var(--accent-ink);
    border-color: var(--accent-ink);
    color: var(--paper);
}

/* ─── DIE EINE ROTE SCHALTFLÄCHE ──────────────────────────────────────────
   Nur „Mitglied werden". Rot heisst auf dieser Website: hier passiert die
   eine Sache, die wir uns von Besuchern wünschen. Wer Rot ein zweites Mal
   einsetzen will, sollte erst prüfen, ob Grün nicht genügt.
   ------------------------------------------------------------------------ */
.x-btn--alert {
    background: var(--alert);
    border-color: var(--alert);
    color: var(--paper);
}
.x-btn--alert:hover {
    background: var(--alert-ink);
    border-color: var(--alert-ink);
    color: var(--paper);
}

/* Altname, damit bestehendes Markup weiterläuft — zeigt jetzt auf Grün. */
.x-btn--political {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
}
.x-btn--political:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); }

/* Abgeschaltet: der Knopf bleibt STEHEN, aber er tut nichts mehr.
   Fuer einen vergangenen Anlass ist das ehrlicher, als ihn zu entfernen —
   "Ich komme" gab es hier einmal, und dass es das nicht mehr gibt, ist
   selbst eine Auskunft. Ein <button disabled> ist dafuer das richtige
   Element: Tastatur und Screenreader wissen von sich aus Bescheid. */
.x-btn[disabled],
.x-btn[aria-disabled="true"] {
    background: var(--surface-2);
    border-color: var(--border-soft);
    color: var(--text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

.x-btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Schlichter Textblock ----------------------------------------------- */
/* Für Abschnitte, die nur aus Überschrift + Absatz + Link bestehen. */
.x-textblock {
    display: grid;
    gap: 1rem;
    max-width: 38rem;
}
.x-textblock p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-2);
}
.x-textblock--narrow { max-width: 34rem; }

/* ---- Fliesstext aus dem CMS --------------------------------------------- */
.x-prose { max-width: var(--measure); font-size: var(--fs-body); line-height: 1.65; }
.x-prose > * + * { margin-top: 1rem; }
.x-prose h2 { margin-top: 3rem; }
.x-prose h3, .x-prose h4 { margin-top: 2rem; }
.x-prose h2 + *, .x-prose h3 + *, .x-prose h4 + * { margin-top: .75rem; }
.x-prose ul, .x-prose ol { padding-left: 1.5rem; }
.x-prose li + li { margin-top: .5rem; }
.x-prose blockquote {
    padding-left: 1rem;
    border-left: 2px solid var(--border);
    color: var(--text-2);
    max-width: var(--measure-mid);
}
.x-prose figure { margin-block: 2rem; }
.x-prose figcaption {
    margin-top: .5rem;
    font-size: var(--fs-meta);
    color: var(--text-muted);
}

/* ---- Hinweiskasten ------------------------------------------------------ */
/* Für Vakanzen, Fristen, redaktionelle Anmerkungen. */
.x-notice {
    display: grid;
    gap: .375rem;
    padding: 1rem 1.125rem;
    background: var(--surface-2);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
}
.x-notice__title { margin: 0; font-size: var(--fs-small); font-weight: var(--w-heading, 500); color: var(--text); }
.x-notice__text  { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--text-2); max-width: var(--measure); }

.x-notice--brand     { background: var(--brand-tint); border-left-color: var(--brand); }
/* Rot ausschliesslich für politische Inhalte. */
.x-notice--political { background: var(--red-050);   border-left-color: var(--alert); }
.x-notice--accent    { background: var(--brand-tint);   border-left-color: var(--accent); }

/* ---- Externer Verweis --------------------------------------------------- */
.x-linkout {
    display: grid;
    gap: .3125rem;
    padding: 1.125rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    max-width: 38rem;
    transition: border-color .14s ease, background-color .14s ease;
}
/* Weisse Karte auf getoentem Grund; beim Zeigen das gemeinsame Hellgruen
   (--brand-tint), dasselbe wie bei Menueeintraegen und aktiven Kacheln.
   Vorher war es umgekehrt: grau als Ruhezustand, weiss beim Zeigen —
   das las sich wie ein deaktiviertes Feld, das aufwacht. */
.x-linkout:hover,
.x-linkout:focus-visible {
    background: var(--brand-tint);
    border-color: var(--brand);
}
.x-linkout__title { font-size: var(--fs-h4); font-weight: var(--w-heading, 500); color: var(--text); }
.x-linkout__text  { font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
.x-linkout__url   { font-family: var(--font-body); font-size: var(--fs-meta); color: var(--brand-strong); word-break: break-all; }

/* ---- Hervorgehobene Kontaktzeile ---------------------------------------- */
.x-contact-line { font-size: var(--fs-lead); }
.x-contact-line a { color: var(--brand-strong); text-decoration: none; }
.x-contact-line a:hover { text-decoration: underline; }

/* ---- Detailseiten-Raster: Inhalt + Seitenspalte ------------------------- */
.x-eventgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 3rem;
    align-items: start;
}
.x-eventaside { display: grid; }

@media (max-width: 900px) {
    .x-eventgrid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

/* ---- Getönte Box in der Seitenspalte ------------------------------------ */
.x-card-tint {
    display: grid;
    justify-items: start;
    padding: 1.25rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-tint-2);
    border-radius: var(--radius-lg);
}
.x-card-tint h3 { margin: 0; font-size: var(--fs-h4); }

/* ---- Faktenliste -------------------------------------------------------- */
.x-facts { display: grid; gap: .75rem; margin: 0; }
.x-facts__row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border-soft);
}
.x-facts__row:last-child { border-bottom: 0; padding-bottom: 0; }
.x-facts__key { font-size: var(--fs-meta); color: var(--text-muted); }
.x-facts__val { margin: 0; font-size: var(--fs-small); color: var(--text); }

@media (max-width: 560px) {
    .x-facts__row { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
}

/* ---- Galerie ------------------------------------------------------------ */
.x-gallery {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.x-gallery__item {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.x-gallery__item > img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Leerzustand -------------------------------------------------------- */
/* Eine Auflistung darf leer sein. Das ist ein Zustand, kein Fehler —
   und er verdient dieselbe Sorgfalt wie der gefüllte Fall. */
/* Leerzustand: LINKSBÜNDIG wie jeder andere Text dieser Website.
   Vorher zentriert — in einer schmalen Seitenspalte wurde daraus ein
   Flattersatz über sechs Zeilen, bei dem jede Zeile woanders anfängt.
   Zentriert liest sich nur, was kurz ist; dieser Hinweis ist es nicht. */
.x-empty {
    display: grid;
    justify-items: start;
    gap: .75rem;
    padding: 2rem 1.25rem;
    text-align: left;
    background: #fff;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.x-empty__title {
    margin: 0;
    font-size: var(--fs-h4);
    font-weight: var(--w-heading, 500);
    color: var(--text);
}
.x-empty__text {
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.55;
    color: var(--text-2);
    max-width: var(--measure-lead);
}

/* ---- Beitrags-Kopfzeile ------------------------------------------------- */
/* ---- Label / Kategorie-Etikett — EINE einzige Quelle ---------------------
   Vorher gab es DREI verschiedene Bausteine für dieselbe Sache: eine
   Kategorie/Art an einem Eintrag. Alle drei sahen anders aus — grüner Text
   ohne Rahmen auf der Anlasszeile, ein grüner Kasten mit Rahmen auf der
   Karte, ein ROTER Kasten auf der Detailseite (der Kommentar dort log:
   "alles ausser Politik bleibt neutral" — stimmte aber nie, JEDE Kategorie
   bekam Rot). Jetzt EIN Baustein, wortgleich aus
   typography-style-guide-roboto-green.html übernommen (Abschnitt
   "Label / Overline / Rubric"). Alle drei Stellen nutzen ab jetzt class="label". */
.label {
    display: inline-block;
    font-size: var(--fs-label);
    font-weight: var(--w-heading);
    line-height: var(--lh-ui);
    letter-spacing: var(--tr-label);
    text-transform: uppercase;
    color: var(--accent);
}
.label--ink   { color: var(--ink, var(--text)); }
.label--muted { color: var(--muted, var(--text-muted)); }
.label--boxed {
    color: var(--paper, #fff);
    background: var(--accent);
    padding: 5px 9px 4px;
}
.label--outline {
    color: var(--ink, var(--text));
    border: 1px solid var(--line, var(--border));
    padding: 5px 9px 4px;
}

/* Etikett als farbiges Plaettchen — die Rubrik eines Eintrags.
   Uebernommen aus ds-svp-community V1 (.c-label--chip). Ohne Rubrik-Klasse
   bleibt es neutral grau; mit einer wird es zum Erkennungszeichen. */
.label--chip {
    padding: 5px 9px 4px;
    background: var(--surface-2);
    text-decoration: none;
}
a.label--chip:hover { background: var(--brand-tint-2); color: var(--green-800); }

.label--politik      { color: var(--cat-politik-fg); }
.label--anlass       { color: var(--cat-anlass-fg); }
.label--vereinsleben { color: var(--cat-vereinsleben-fg); }
.label--ilpaese      { color: var(--cat-ilpaese-fg); }

.label--chip.label--politik      { background: var(--cat-politik-bg); }
.label--chip.label--anlass       { background: var(--cat-anlass-bg); }
.label--chip.label--vereinsleben { background: var(--cat-vereinsleben-bg); }
.label--chip.label--ilpaese      { background: var(--cat-ilpaese-bg); }

/* Kategorie · Datum · Lesedauer. Auf der DETAILSEITE gehört das hin —
   auf der Übersichtskarte wäre es Lärm (NOTION-STRUKTUR, Regel 3). */
.x-articlemeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .625rem;
    font-size: var(--fs-meta);
    color: var(--text-muted);
}
.x-articlemeta__sep { color: var(--border); }

/* ---- Hakenliste ---------------------------------------------------------
   Fuer Aufzaehlungen, die Zusagen sind — "was Sie als Mitglied erhalten".
   Ein Punkt sagt "hier steht noch etwas", ein Haken sagt "das bekommen Sie".
   Der Haken ist aus zwei Rahmenkanten gebaut, nicht aus einem Zeichen: so
   sieht er in jeder Schrift gleich aus und hat immer die Akzentfarbe. */
.x-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .625rem;
    max-width: 42rem;
}
.x-checklist li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: .625rem;
    align-items: start;
    font-size: var(--fs-body-sm);
    line-height: 1.5;
    color: var(--text-2);
}
.x-checklist li::before {
    content: "";
    width: .4375rem;
    height: .8125rem;
    margin: .25rem auto 0;
    border: solid var(--brand);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- Dateiliste --------------------------------------------------------- */
.x-filelist { display: grid; list-style: none; margin: 0; padding: 0; max-width: 42rem; }
/* Eine Zeile, kein Raster. Vorher drei feste Spalten (Plakette | Name |
   Groesse) — das zwang jeden Anhang in genau diese drei Teile und fiel in
   schmalen Behaeltern auseinander. Jetzt legt die Zeile einfach nebeneinander,
   was der Anhang-Baustein liefert, und bricht um, wenn es eng wird. */
.x-file {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .375rem .75rem;
    padding: .75rem;
    border-radius: var(--radius);
    border-top: 1px solid var(--border-soft);
}
/* Der Name nimmt die Zeile, die Angabe haengt sich dahinter. */
.x-file .x-file__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.x-file .x-file__meta { flex: 0 0 auto; }
.x-file:last-child { border-bottom: 1px solid var(--border-soft); }
.x-file:hover { background: var(--surface-2); }
.x-file__type {
    padding: 4px 7px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    font: var(--w-heading, 500) var(--fs-meta)/1 var(--font-body);
}
.x-file__name { font: var(--w-heading, 500) var(--fs-small)/1.45 var(--font-body); color: var(--text); text-decoration: none; }
.x-file__name:hover { color: var(--brand-strong); }
.x-file__meta { font-size: var(--fs-meta); color: var(--text-muted); }

/* Auf dem Telefon bleibt die Groesse jetzt stehen: die Zeile bricht ohnehin
   um, und eine Angabe zu verstecken, weil der Platz knapp ist, nimmt genau
   die Information weg, wegen der jemand hinschaut. */

/* ---- Abstands-Hilfsklassen ----------------------------------------------
   EINE Skala fuer alle Abstaende. Die Werte stehen als Variablen da, damit
   ein Baustein denselben Abstand SELBST setzen kann, statt ihn jeder Seite
   als Klasse ins Markup zu schreiben. Ein Abstand, den man je Seite von
   Hand anhaengt, wird irgendwo vergessen — und dann klebt das Element am
   Text darueber. */
:root {
    --u-mt-s: .75rem;
    --u-mt:   1.5rem;
    --u-mt-l: 2.5rem;
}
.u-mt   { margin-top: var(--u-mt); }
.u-mt-s { margin-top: var(--u-mt-s); }
.u-mt-l { margin-top: var(--u-mt-l); }

/* ---- Nur Demo: Seitenwechsler. Vor Produktion entfernen. ---------------- */
.demo-nav {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    padding: .75rem 0;
    font-size: var(--fs-meta);
}
.demo-nav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}
.demo-nav__label { font-weight: var(--w-heading, 500); color: var(--text-muted); }
.demo-nav a { color: var(--text-2); text-decoration: none; }
.demo-nav a:hover { color: var(--text); text-decoration: underline; }
.demo-nav a[aria-current="page"] { color: var(--text); font-weight: var(--w-heading, 500); }
.demo-nav__spacer { margin-left: auto; }

/* ---- Interessen-Chips --------------------------------------------------- */
/* Die nicht-politische Ebene: Hobbys, die Mitglieder verbinden. */
.x-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.x-chip {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: var(--fs-meta);
    text-decoration: none;
    transition: border-color .14s ease, color .14s ease;
}
.x-chip:hover { border-color: var(--brand); color: var(--brand-strong); }
.x-chip__n { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Mitgliedsprofil ---------------------------------------------------- */
.x-profile {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.x-profile__aside { display: grid; justify-items: stretch; }
.x-profile__portrait {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.x-profile__portrait > img { width: 100%; height: 100%; object-fit: cover; }

.x-profile__main { display: grid; justify-items: start; min-width: 0; }
.x-profile__badge {
    margin: 0 0 .5rem;
    padding: 3px 8px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-2);
    font-size: var(--fs-meta);
    font-weight: var(--w-heading, 500);
}
.x-profile__name {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-h1);
    font-weight: var(--w-display, 400);
    line-height: 1.14;
    letter-spacing: var(--tr-h1);
}
.x-profile__role { margin: .25rem 0 0; font-size: var(--fs-lead); color: var(--brand-strong); }
.x-profile__bio  { margin: 1rem 0 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); max-width: var(--measure-mid); }

@media (max-width: 860px) {
    .x-profile { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .x-profile__aside { max-width: 320px; }
}

/* ---- Zahlenreihe -------------------------------------------------------- */
.x-stats { display: flex; flex-wrap: wrap; gap: 2rem; }
.x-stat { display: grid; gap: .125rem; }
.x-stat__num {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: var(--w-heading, 500);
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.x-stat__label { font-size: var(--fs-meta); color: var(--text-muted); }

/* ---- Info-Karten (Politik / News) --------------------------------------- */
.x-infogrid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.x-infocard {
    padding: 1.125rem 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.x-infocard h3 { font-size: var(--fs-h4); }
.x-infocard__img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--surface-2);
}

/* Bild im Fliesstext.
   Vorher nur "width: 100%": ein Hochformat wurde dadurch turmhoch, ein
   Breitbild lief ueber die ganze Spalte — dasselbe Element sah auf jeder
   Seite anders aus. Jetzt ein fester Rahmen wie bei einer Karte: begrenzte
   Breite, festes Seitenverhaeltnis, Bildausschnitt statt Verzerrung. */
.x-figure-img {
    display: block;
    width: 100%;
    max-width: 27rem;          /* Kartenformat, nicht Bildschirmbreite */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 30%;   /* Gesichter sitzen oben, nicht in der Mitte */
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

/* Die Bildunterschrift bleibt beim Bild, nicht bei der Textspalte. */
figure:has(> .x-figure-img) { margin: 0; max-width: 27rem; }

/* ---- Das Bild EINES BEITRAGS -------------------------------------------
   Nicht dasselbe wie .x-figure-img, und der Unterschied ist keiner des
   Geschmacks:

     .x-figure-img   SCHMUCK. Ein festes Seitenverhaeltnis ist hier richtig —
                     die Seite soll ruhig wirken, und was am Rand wegfaellt,
                     fehlt niemandem.

     .x-articleimg   INHALT. Der Autor hat dieses Bild zum Text geliefert.
                     Was hier wegfaellt, ist Inhalt des Beitrags.

   Deshalb wird hier NICHTS beschnitten. Kein aspect-ratio, kein object-fit:
   cover — nur zwei Schranken, innerhalb derer das Bild vollstaendig bleibt.

   WARUM DAS WICHTIG IST: die Bilder der Beitraege haben Seitenverhaeltnisse
   von 0,75 bis 2,50. Auf 4:3 beschnitten zeigte der Scan der Gruendung
   Ascona noch 53 % seiner Breite — die halbe Namensliste des neuen Vorstands
   war weggeschnitten. Ein beschnittenes Dokument ist ein verlorenes Dokument.

   max-height statt max-width loest zugleich das alte Problem, dass ein
   Hochformat (die Titelseite von „il Paese", 0,75) turmhoch wurde: es wird
   kleiner, nicht angeschnitten.                                          */
.x-articleimg {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 34rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

/* Der Abstand nach oben gehoert dem Baustein, nicht der Seite.
   Vorher stand im Markup <figure class="u-mt"> — auf jeder Seite von Hand.
   Auf einer wurde es vergessen, und das Bild klebte am Text. Jetzt bringt
   die Figur ihren Abstand selbst mit, aus derselben Skala wie .u-mt.

   :first-child bekommt keinen: steht die Figur zuoberst in ihrer Spalte,
   waere der Abstand doppelt. */
figure:has(> .x-articleimg) { margin: var(--u-mt) 0 0; }
figure:has(> .x-articleimg):first-child { margin-top: 0; }

/* Der Anhang unter einem Beitrag: gleicher Abstand wie zwischen zwei
   Absätzen, und links auf derselben Kante wie Text und Bild. So steht
   die Datei am Ende des Textes, statt darunter zu schweben. */
.x-prose + .x-filelist,
.x-filelist.u-mt { margin-top: 1.5rem; }

/* ---- Beitragskarten (Preise) ------------------------------------------- */
.x-pricegrid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.x-pricecard {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.x-pricecard h3 { font-size: var(--fs-h4); }
.x-pricecard__amount {
    margin: .5rem 0;
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: var(--w-heading, 500);
    letter-spacing: -.01em;
    color: var(--brand-strong);
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   HERO-TITEL — der EINZIGE Ort mit der zweiten Schrift
   ----------------------------------------------------------------------------
   03-php-03-hero ist eine bestehende, projektübergreifende Komponente.
   Ihre Datei bleibt deshalb unangetastet; die Schriftwahl für DIESES Projekt
   steht hier.

   Roboto Condensed erscheint auf jeder Seite genau einmal: im grossen
   Seitentitel. Sonst nirgends. Eine zweite Schrift ist ein Werkzeug für
   den einen lauten Moment — keine Dekoration für den ganzen Tag.
   ============================================================================ */
/* `body` davor erhöht die Spezifität auf 0,0,2,2. Nötig, weil die
   Komponente ihr eigenes Stylesheet ERST IM BODY einbindet und mit
   gleicher Spezifität (0,0,2,1) sonst gewinnt — inklusive ihrer
   Media-Queries, die Media-Queries erhöhen die Spezifität nämlich nicht. */
body .page-heading .inner-content h2 {
    font-family: var(--font-display);
    font-weight: var(--w-display, 400);
    font-size: clamp(2.5rem, 1.62rem + 4.20vw, 4.5rem);   /* 40 → 72 */
    line-height: var(--lh-hero);
    letter-spacing: var(--tr-hero);
}

body .page-heading .inner-content span {
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    line-height: 1.5;
}