/* ==========================================================================
   Linknetz — Design-Tokens

   EINE Quelle fuer die Flaechen-, Text-, Groessen- und Zeitwerte des ganzen
   Produkts. Bis Paket 7 standen sie am Kopf von style.css; seit Paket 8
   liegen sie hier, weil die Profilseite (public/css/profile.css) dieselben
   Werte braucht, aber nicht die 27 KB Komponenten-CSS dahinter. Eine zweite
   Datei mit denselben Tokens waere garantierte Drift — dieselbe Begruendung,
   mit der Paket 7 die Icon-Pfade in EINE Datei gelegt hat.

   Wer diese Datei einbindet, bindet sie VOR style.css bzw. profile.css ein.
   Abnahme: test/design-tokens.test.js rechnet die Palette hier nach.

   LN-UX-401 (Nacht-Audit 2026-09-05): der frueherer Dark-Mode-Tokenblock
   ([data-theme="dark"], seit Commit 64bec43 "Theme-Umschalter gestrichen"
   unerreichbar) wurde entfernt statt reaktiviert. Ein per Toggle
   umschaltbarer Dark Mode ist damit aktuell keine unterstuetzte Option;
   hell/dunkel steuern .surface-light / .surface-dark pro Abschnitt.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Helle Abschnitte (Standard) — Spec Abschnitt "Design-Tokens".
     Flaechenleiter 2026-09-22 neu vergeben (Design-Review Paket 5, UI-K2/H7):
     vorher lag die Karte (--bg-surface #f6f5f2) DUNKLER als die Seite
     (--bg-base #fdfdfc), Abstand ΔL* 2,7 — und --bg-surface-elevated war ein
     Alias auf --bg-surface, die Ebene existierte gar nicht. Jetzt laeuft die
     Leiter in die konventionelle Richtung: samtige Seite, hellere Karte,
     weisse Elevation. Gerechnet in ΔL* (CIE L*, D65), weil das WCAG-Verhaeltnis
     fuer Flaechenabstufung im Dunklen gestaucht ist und dort taeuscht — beide
     Masse stehen in docs/reviews/2026-09-22-paket-5-kontrasttabelle.md. */
  --bg-base: #e9e7e0;
  --bg-surface: #f4f3ee;
  --bg-surface-alt: #e1dfd6;
  /* Border-Skala 2026-09-20 entdreht (Design-Review H2): vorher lief sie
     im hellen Theme rückwärts (--border-strong war der schwächste Wert,
     1,10:1). Jetzt monoton subtle < medium < strong, nachgerechnet gegen
     --bg-surface (relative Luminanz, WCAG 2.x); Werte am 22.09.2026 auf das
     neue --bg-surface #f4f3ee nachgezogen. */
  --border-subtle: #e6e4de;   /* 1,14:1  hairline */
  --border-medium: #d4d1c8;   /* 1,37:1  Standard-Rahmen */
  --border-strong: #b6b2a6;   /* 1,91:1  betonter Rahmen / Divider */
  --border-light: var(--border-subtle);
  /* Bedienelement-Rahmen (Inputs, Checkboxen) nach WCAG 1.4.11 (Non-Text
     Contrast, 3:1). Gemessen gegen BEIDE angrenzenden Flaechen: 3,50:1 gegen
     --bg-surface und 3,14:1 gegen --bg-input (= --bg-base), denn das Feld
     selbst ist zurueckgesetzt. Am 22.09.2026 von #8a8579 nachgezogen — auf
     dem neuen, dunkleren --bg-base waere der alte Wert auf 2,97:1 gefallen. */
  --border-control: #868173;
  --text-primary: #15161a;
  --text-secondary: #44464d;
  /* Die drei gedaempften Textwerte am 22.09.2026 nachgezogen (Paket 5): auf
     dem neuen, dunkleren --bg-base/-alt waeren #6b6d75 (4,17:1) und #6e7078
     (3,99:1) unter den WCAG-AA-Fließtextwert 4,5:1 gefallen. Geprueft gegen
     die dunkelste helle Flaeche --bg-surface-alt. */
  --text-muted: #5f6167;       /* 5,00:1 auf --bg-base, 4,64:1 auf --bg-surface-alt */
  /* H8: vorher #9a9ba1 = 2,54:1 auf --bg-surface, unter WCAG-AA-Fließtext. */
  --text-muted-2: #606268;     /* 5,48:1 auf --bg-surface, 4,57:1 auf --bg-surface-alt */
  --text-placeholder: #606268; /* 4,93:1 auf --bg-input (= --bg-base) */

  /* Gedämpfter Akzent auf hellem Grund (Handle-Anzeige, Preis-Häkchen) */
  --accent: oklch(0.45 0.13 140);
  /* Fokusring produktweit (H1) — folgt --accent, damit er in jedem
     Theme-Block automatisch mitwechselt. */
  --focus-ring: var(--accent);
  /* Textfarbe für Flächen, die komplett mit var(--accent) gefüllt sind
     (.btn-primary, .pricing-badge, .demo-link-toggle.is-on) — muss dem
     Kontext folgen wie --accent selbst: auf dem gedämpften hellen Grün
     hier heller Text, auf dem hellen Lime in .surface-dark unten dunkler
     Text. Ohne dieses Token hatte .btn-primary auf hellen Abschnitten
     (z. B. Bestätigungsseite) nur 2,71:1 Kontrast statt ~7:1 vorher. */
  --accent-contrast: #fdfdfc;
  /* Am 22.09.2026 abgedunkelt (Paket 5). Massgeblich ist nicht die Flaeche,
     sondern die eigene Pille: .status-pill-warn, .plan-note und
     .auth-info-banner
     legen denselben Ton als Text auf einen 8–14-%-Tint aus sich selbst. Auf
     dem neuen --bg-base ergab das fuer Rose 4,16:1 und fuer Amber 3,49:1 —
     Amber lag mit 4,20:1 schon vorher unter AA. Jetzt >= 4,6:1 in allen drei
     Faellen, Rechenweg in der Kontrasttabelle zu Paket 5. */
  --accent-emerald: #04684b;
  --accent-rose: #b01037;
  --accent-amber: #8f4108;

  /* Alt-Tokens als Alias auf den neuen, kontextabhängigen Akzent — dadurch
     färben sich .btn-primary, .skip-link, .badge-pulse-dot, .version-badge,
     .logo-icon-box, mockup-profile-handle & Co. automatisch passend zur
     jeweiligen Sektion (hell/dunkel), ohne jede einzelne Regel anzufassen. */
  --accent-cyan: var(--accent);
  --accent-cyan-glow: var(--accent);
  --cyan-primary: var(--accent);

  /* Rein dekorative Hintergrund-Glow-Blobs (.bg-glow-primary/-secondary) —
     bewusst unverändert, liegen stark verblasst/maskiert hinter dem Content
     und haben keinen Bezug zum Hell/Dunkel-Wechsel der Sektionen. */
  --accent-indigo: #4f46e5;
  --accent-purple: #7c3aed;
  --accent-blue: #2563eb;
  --bg-glow-opacity: 0.1;
  --glow-cyan: 0 0 15px rgba(163, 230, 53, 0.2);
  --glow-indigo: 0 0 20px rgba(79, 70, 229, 0.1);

  /* .glass-panel/.glass-card (u. a. vom Demo-Editor-Panel in Task 9
     wiederverwendet) und .claimer-card: bewusst vereinfacht auf eine
     blickdichte Oberflächenfarbe statt Glasmorphismus-Transparenz+Blur —
     wechselt dadurch automatisch mit dem umgebenden Surface-Kontext. */
  --bg-glass: var(--bg-surface);
  --bg-glass-card: var(--bg-surface);
  --border-glass: var(--border-subtle);
  --bg-input: var(--bg-base);
  --bg-input-focus: var(--bg-base);
  /* Die oberste Flaechenebene: Zeile auf der Karte, Popover, Modal, Toast.
     ΔL* 4,2 ueber --bg-surface (WCAG 1,111:1 — das Verhaeltnis unterschaetzt
     den Abstand am hellen Ende weniger stark als am dunklen, ist aber auch
     hier nicht das Mass fuer Flaechen). */
  --bg-surface-elevated: #ffffff;
  --bg-surface-subtle: var(--bg-surface-alt);

  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.08);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-window: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
  --shadow-popover: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.12);

  --font-main: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Typo-Skala (Design-Review Paket 6, UI-H5). Zehn Stufen: unten dicht, weil
     1 px bei Labelgroessen ein lesbarer Schritt ist, oben geometrisch (ca.
     1,2). Eine einzige geometrische Reihe kann beides nicht bedienen — der
     Minor-Third-Vorschlag des Berichts haette 139 von 161 Deklarationen
     verschoben und dabei Bedientext (.form-input, .btn) verkleinert.
     Kein --text-base: 16 px ist im Produkt nicht die Basis, 15 px ist es.
     Zuordnung jeder einzelnen Groesse:
     docs/reviews/2026-09-22-paket-6-typo-radius-tabelle.md */
  --type-2xs: 0.6875rem;  /* 11 px — Tab-Leiste, Meta ohne Eigeninhalt    */
  --type-xs:  0.75rem;    /* 12 px — Labels ueber Werten, Badges, Eyebrows */
  --type-sm:  0.8125rem;  /* 13 px — Formularlabels, Navigation, Fusszeile */
  --type-md:  0.875rem;   /* 14 px — sekundaerer Fliesstext, Unterzeilen   */
  --type-lg:  0.9375rem;  /* 15 px — Bedien- und Fliesstext (Standard)     */
  --type-xl:  1.0625rem;  /* 17 px — Lead, grosse Eingaben, kleine Titel   */
  --type-2xl: 1.25rem;    /* 20 px — Abschnitts-/Kartentitel, h2-Rolle     */
  --type-3xl: 1.5rem;     /* 24 px — Seitentitel, Modaltitel, KPI-Kachel   */
  --type-4xl: 1.75rem;    /* 28 px — Auth-Titel, grosse Kennzahl im Text   */
  --type-5xl: 2.25rem;    /* 36 px — Preis, Performance-Zahl, Rechtstitel  */

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  /* Halbschritte fuer den Feinabstand (UI-M2). Der Makro-Rhythmus ab 1,25rem
     war schon sauber; off-Raster lag ausschliesslich unter 20 px. */
  --space-0-5: 2px; --space-1-5: 6px; --space-2-5: 10px;
  --space-3-5: 14px; --space-4-5: 18px;

  /* Radius-Skala (UI-M1). Benannt nach der Rolle, die die Mockups den Werten
     geben — 11 px ist kein Versehen, sondern der Radius, den
     Dashboard.dc.html fuenfmal fuer Bedienelemente setzt. Neu ist nur --xs;
     die vier vorhandenen Tokens behalten ihren Wert. */
  --radius-xs:   8px;    /* Kleinchrome: Icon-Flaechen, Menuezeilen, Chips */
  --radius-sm:  11px;    /* Bedienelemente: Felder, Navigations-/Listenzeilen */
  --radius-md:  16px;    /* Karten im Raster                               */
  --radius-lg:  22px;    /* Grosse Flaechen: Modale, Auth-, Rechtskarte    */
  --radius-xl:  28px;    /* reserviert (Preiskarten, UI-M17 — nicht P6)    */
  --radius-pill: 999px;  /* Buttons, Badges, Schalter                      */

  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dunkle Abschnitte: Header, Hero, Tracker-Metrik-Karte, Pro-Preiskarte,
   Abschluss-CTA-Banner (siehe Spec) — als Klasse auf dem jeweiligen
   Sektions-Container statt eines globalen Seiten-Themes, weil die Seite
   bewusst zwischen hell und dunkel wechselt statt durchgehend einfarbig zu
   sein. Ersetzt den früheren, seit LN-UX-401 toten [data-theme="dark"]-Block.
   Überschreibt nur die Tokens, die sich zwischen hell/dunkel unterscheiden
   — alle Alias- und rein dekorativen Tokens von oben gelten unverändert
   weiter (kaskadieren aus :root). */
.surface-dark {
  color-scheme: dark;
  --bg-base: #0e0f12;
  --bg-surface: #16171c;
  --bg-surface-alt: #1a1b21;
  --border-subtle: #22242b;
  --border-medium: #2a2c34;
  --border-strong: #2f313a;
  --border-light: var(--border-subtle);
  /* Dunkler Gegenwert zu --border-control (H2): --border-strong liegt hier
     bei nur 1,38:1 gegen --bg-surface, für WCAG 1.4.11 (3:1) reicht das
     nicht. #616470 → 3,04:1 gegen --bg-surface (#16171c) / 3,25:1 gegen
     --bg-base (#0e0f12), siehe Report. */
  --border-control: #616470;
  --text-primary: #f6f5f2;
  --text-secondary: #b4b6bd;
  --text-muted: #9fa2ab;
  --text-muted-2: #8a8d96;
  --text-placeholder: #8a8d96;
  --accent: oklch(0.84 0.18 125);
  --focus-ring: var(--accent);
  --accent-contrast: #0e0f12;
  --accent-emerald: #34d399;
  --accent-rose: #fda4af;
  --accent-amber: #fcd34d;
  --accent-cyan: var(--accent);
  --accent-cyan-glow: var(--accent);
  --cyan-primary: var(--accent);
  --bg-glass: var(--bg-surface);
  --bg-glass-card: var(--bg-surface);
  --border-glass: var(--border-subtle);
  --bg-input: var(--bg-base);
  --bg-input-focus: var(--bg-base);
  /* Im Dunklen laeuft Elevation zwingend ueber hellere Flaechen — ein
     schwarzer Schlagschatten auf #0e0f12 ist per Definition unsichtbar
     (HIG, Material 3). ΔL* 7,4 ueber --bg-surface und 5,4 ueber
     --bg-surface-alt. Das WCAG-Verhaeltnis dazu ist 1,186:1 und taugt hier
     nicht als Mass: es ist am dunklen Ende gestaucht. Nach oben begrenzt
     wird der Wert vom schwaechsten Textton: --text-muted-2 #8a8d96 steht
     darauf noch bei 4,55:1, ab etwa #242731 faellt er unter WCAG AA. */
  --bg-surface-elevated: #232630;
  --bg-surface-subtle: var(--bg-surface-alt);
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-active: rgba(255, 255, 255, 0.1);
  --shadow-card: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-window: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
  background: var(--bg-base);
  color: var(--text-primary);
}

/* Spiegelbild zu .surface-dark oben: setzt einzelne verschachtelte
   Elemente innerhalb eines dunklen Vorfahren gezielt wieder auf die
   helle Tokenpalette zurück. Erster Anwendungsfall: die Free-Plan-Karte
   auf der jetzt durchgehend dunklen Preise-Seite, die laut Mockup bewusst
   als helle Kontrastkarte zur Pro-Karte gestaltet ist. */
.surface-light {
  color-scheme: light;
  /* Spiegelt :root — jede Aenderung dort gehoert auch hierher. */
  --bg-base: #e9e7e0;
  --bg-surface: #f4f3ee;
  --bg-surface-alt: #e1dfd6;
  --border-subtle: #e6e4de;
  --border-medium: #d4d1c8;
  --border-strong: #b6b2a6;
  --border-light: var(--border-subtle);
  --border-control: #868173;
  --text-primary: #15161a;
  --text-secondary: #44464d;
  --text-muted: #5f6167;
  --text-muted-2: #606268;
  --text-placeholder: #606268;
  --accent: oklch(0.45 0.13 140);
  --focus-ring: var(--accent);
  --accent-contrast: #fdfdfc;
  --accent-emerald: #04684b;
  --accent-rose: #b01037;
  --accent-amber: #8f4108;
  --accent-cyan: var(--accent);
  --accent-cyan-glow: var(--accent);
  --cyan-primary: var(--accent);
  --bg-glass: var(--bg-surface);
  --bg-glass-card: var(--bg-surface);
  --border-glass: var(--border-subtle);
  --bg-input: var(--bg-base);
  --bg-input-focus: var(--bg-base);
  --bg-surface-elevated: #ffffff;
  --bg-surface-subtle: var(--bg-surface-alt);
  --bg-hover: rgba(0, 0, 0, 0.04);
  --bg-active: rgba(0, 0, 0, 0.08);
  --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  --shadow-window: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.08);
  background: var(--bg-base);
  color: var(--text-primary);
}


/* ==========================================================================
   Grundschicht

   Reset, Seitenrahmen, Fokusring und Icon-System stehen seit Paket 8 hier
   und nicht mehr in style.css: die Profilseite laedt style.css nicht, braucht
   aber jede dieser Regeln. Der Reset in beiden Dateien waere genau die
   Doppelquelle, die diese Aufteilung vermeiden soll.
   ========================================================================== */

/* Fokusring produktweit (Design-Review H1). :where() hat Spezifität 0 und
   überschreibt daher nie bestehende Komponentenregeln — border-radius
   folgt automatisch der Form des fokussierten Elements. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: inherit;
}

html {
  box-sizing: border-box;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

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

/* N-UI-M2: Bedienelemente erben die Schrift nicht von selbst — ohne diese
   Regel stand jeder Knopf ohne eigene Familie in Arial 13,33 px (Profilknopf
   der Seitenleiste, Demo-Schalter der Startseite). Bewusst nicht `font:
   inherit`: das zoege auch die line-height 1.6 des body in jeden Knopf und
   machte alle .btn hoeher. */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* P13: <code> stand in der Systemschrift „monospace" (UA-Standard) statt in der
   ausgelieferten Mono. <strong> in einem 600er-Label forderte `bolder` = 900 an,
   ausgeliefert ist bis 700 (N-UI-N7). Beides fing erst die erweiterte
   Zusicherung 8. */
code, kbd, samp, pre {
  font-family: var(--font-mono);
  /* Adressen als Code („linknetz.de/ihrname/impressum") haben keine
     Umbruchstelle und ragten bei 320px aus der Rechtskarte. */
  overflow-wrap: anywhere;
}

strong, b {
  font-weight: 700;
}

/* N-UI-N1 (P15): Ueberschriften erbten die 1.6 des body; umbrochen klaffte
   „Hallo, E2E- / Testkonto!" auseinander. Klassen mit eigener Zeilenhoehe
   gewinnen weiter. */
h1, h2, h3 {
  line-height: 1.2;
}

[id] {
  scroll-margin-top: 90px;
}

body {
  /* Gefunden per Playwright/WebKit-Mobile-Review 2026-09-16: der
     Browser-Standardrand auf <body> (8px, aus dem User-Agent-Stylesheet)
     wurde nie zurückgesetzt. width:100% berechnet sich relativ zum
     Viewport, der Rand kommt oben drauf — auf schmalen Viewports (z. B.
     iPhone 13 Pro, 390px) ragte die Seite dadurch 8px über den rechten
     Rand hinaus (horizontaler Overflow, site-weit, auf allen 5 Seiten).
     overflow-x:clip allein verhindert das nicht, weil der Rand die Box
     selbst vergrößert, nicht nur ihren Inhalt. */
  margin: 0;
  font-family: var(--font-main);
  /* N-UI-N3 (P15): ohne Angabe galten die 16px des Browsers, ausserhalb der
     Skala (Basis 15px) — und kein Test sah geerbte Werte. */
  font-size: var(--type-lg);
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Mobile Notbremse gegen horizontalen Ueberlauf. Stand bis Paket 8 im grossen
   640px-Block von style.css und gehoert zur Grundschicht, nicht zu den
   Komponenten. */
@media (max-width: 640px) {
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
  }
}

/* ==========================================================================
   Icon-System (Design-Review Paket 7, UI-H4)
   ========================================================================== */

/* Die Praesentation steht HIER und nicht als Attribut am <svg>: vor P7 lagen
   27 Inline-SVGs mit je eigener stroke-width (2 und 2.5) und je eigener
   Groesse (15/16/17/18/22 px bei identischer viewBox) im Produkt — an 27
   Stellen aenderbar heisst in der Praxis: nirgends. Strichstaerke 2 nach dem
   Second-Brain-Standard "Lucide Vector Icons".

   `stroke: currentColor` ist der Kern des Pakets, nicht Kosmetik: Emoji
   erben `color` nicht (am 22.09.2026 im Browser gemessen: 11 von 12), jeder
   :hover-, .active- und Gefahrzustand lief auf ihnen ins Leere. Ein Icon mit
   fester Farbe — wie sie die Mockups teils setzen — waere derselbe Fehler in
   anderer Form.

   Die Wortmarke in app-sidebar.ejs ist bewusst KEIN .icon: sie traegt ihre
   2.5 wie im Favicon und in den Mockups. Marke, nicht Bedienelement. */
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Fuer Icons IM Fliesstext. In Flex-Zeilen (Navigation, Werkzeugzeilen)
     richtet align-items aus und vertical-align ist wirkungslos. */
  vertical-align: -0.18em;
}

/* Zeilenaktionen und Aufzaehlungshaken — die 15px der Mockups. */
.icon-sm {
  width: 15px;
  height: 15px;
}

/* Leerzustaende: dort stand vorher eine Glyphe bei --type-5xl (36px).
   Einzige Abweichung von Strichstaerke 2, und zwar damit das Gewicht GLEICH
   bleibt: stroke-width gilt im viewBox-Raster (24), bei 40px Darstellung
   waere eine 2 effektiv 3,3 Geraetepixel dick gegenueber 1,5 bei 18px.
   1,5 ergibt hier 2,5 — dieselbe optische Linie wie im uebrigen Satz. */
.icon-lg {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
}

/* Gefuellte Icons (star) tragen keine Kontur. */
.icon-fill {
  fill: currentColor;
  stroke: none;
}

/* Nutzt den vorhandenen @keyframes spin (weiter unten, seit dem
   Hero-Namenspruefer) — ein zweiter, identischer Keyframe waere Drift. */
.icon-spin { animation: spin 1s linear infinite; }

/* Bewusst NICHT `animation: none`: das hier ist eine Ladeanzeige, keine
   Dekoration. Steht sie still, ist sie ein Rad ohne Aussage. Langsamer
   drehen erfuellt den Zweck von prefers-reduced-motion (keine schnelle
   Bewegung) und behaelt die Information. */
@media (prefers-reduced-motion: reduce) {
  .icon-spin { animation-duration: 3s; }
}

/* Icon in einer Ueberschrift: skaliert mit der Schriftgroesse statt auf
   18px festzustehen — .page-title ist je nach Breite 1,5 bis 2 rem gross. */
.page-title-icon {
  width: 0.85em;
  height: 0.85em;
  margin-right: var(--space-2);
  color: var(--text-muted);
}

/* Nur fuer Screenreader. Gebraucht seit Paket 7: wo vorher ein ✓ als
   Textzeichen stand, ist das Icon `aria-hidden` — in einer Vergleichstabelle
   waere die Zelle damit fuer Screenreader LEER, obwohl das Haken die einzige
   Aussage der Zelle ist. `clip-path` statt `clip`, und 1px statt 0, weil
   Elemente ohne Ausdehnung von manchen Screenreadern uebersprungen werden. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}