/* Plattform-Design-Tokens + Chrome-Ersatz für den externen Spiegel */
:root {
    --ds-page: #ffffff;
    --ds-raised: #f5f5f7;
    --ds-ink: #1d1d1f;
    --ds-ink-2: #6e6e73;
    --ds-ink-3: #86868b;
    --ds-hairline: rgba(0, 0, 0, 0.08);
    --ds-teal: #0a7f6e;
    --ds-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
html, body { margin: 0; }
body { background: var(--ds-page); color: var(--ds-ink); font-family: var(--ds-font-display); }
.mirror-filecard { max-width: 1016px; margin: 0 auto; padding: 24px; }
.mirror-header { /* übernimmt .hero h1 Regeln der jeweiligen Seite */ }
.mirror-closing { font-size: 12px; color: var(--ds-ink-3); text-align: center; line-height: 1.6; padding: 24px 24px 48px; }
.mirror-caption { font-size: 12.5px; color: var(--ds-ink-2); text-align: center; }
.mirror-group { margin: 32px 0; }
.mirror-group-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-ink-2); margin: 0 0 12px; }
.mirror-note { font-size: 12.5px; color: var(--ds-ink-3); text-align: center; padding: 0 24px 24px; }

/* Nutzerwunsch 24.10.2026: unselektierte Filter-Pills schwarz statt iOS-Default-Blau */
.filters button { color: var(--ds-ink); }
.filters button[aria-pressed="true"] { color: var(--ds-page); }

/* Nutzerwunsch 24.10.2026 22:12: schwere Titelschrift (Referenz Haupttitel), AI mit blauem Verlauf, Metazeile mit Aktualisierungszeit (Stamp wird bei jedem Deploy neu gebacken) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/inter-800.woff2?v=3') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url('fonts/inter-900.woff2?v=3') format('woff2'); }
.hero-head .hero-meta { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ds-ink-2); margin: 0 0 14px; }
.hero h1.mirror-header { font-family: 'Inter', var(--ds-font-display); font-weight: 900; letter-spacing: -0.045em; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/inter-300.woff2?v=4') format('woff2'); }
.hero h1 .airun { display: inline-block; background: linear-gradient(100deg, #0f62d2 0%, #42b0f5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero h1 .paren { font-weight: 300; }
.hero h1 .airun .paren { -webkit-text-fill-color: var(--ds-ink); color: var(--ds-ink); }

/* Nutzerwunsch 24.10.2026 22:38 (Voice + annotierter Screenshot): Titel groesser;
   mehr Abstand UNTER dem Tab, gilt fuer beide Bereiche (Favoriten + Bibliothek).
   Ersetzt die unbestaetigte 22:22-Frage (40% Meta->Titel NICHT uebernommen). */
.hero h1.mirror-header { font-size: clamp(48px, 8.5vw, 84px); }
.tabs-top { margin: -8px 0 56px; }