:root {
    --bg-main: #0b1120;
    --bg-card: #111827;
    --bg-input: #0f172a;
    --text-main: #f8fafc;
    --text-secondary: #cbd5e1; /* Upgrade von #94a3b8 — WCAG AA konform */
    --text-muted: #94a3b8;
    --text-hint: #71717a;
    --cyan: #38bdf8;
    --magenta: #ec4899;
    --purple: #a855f7;
    --green: #10b981;
    --red: #ef4444;
    --gold: #d4af37;
    --color-self: #34d399;
    --color-partner: #fbbf24;
    --color-together: #f472b6;
    --border: #1e293b;

    /* Status-Tokens, semantisch für Lebenszyklus-Zustände reserviert.
       --success für "live/aktiv", --warning für "preview/Aufmerksamkeit",
       --neutral für "draft/inaktiv". NICHT verwechseln mit --gold
       (Cosmic-Council-Auszeichnung) oder --green (generische Bestätigung):
       gleiche Hue, andere Bedeutung. Eigene Familie statt Aliasing, damit
       --gold/--green Werte ändern kann ohne Status-Semantik mitzuziehen.
       --neutral aliased auf --text-muted, damit Theme-Wechsel automatisch
       den themespezifischen Muted-Wert ergeben. Themes Nebula/Obsidian
       überschreiben --success und --warning mit theme-passenden Hex-Werten. */
    --success: #10b981;             /* Live, aktiv, freigegeben */
    --warning: #d4af37;             /* Vorschau, in Arbeit, Achtung */
    --neutral: var(--text-muted);   /* Entwurf, inaktiv, leer */

    --grad-cyan: linear-gradient(135deg, #38bdf8, #818cf8);
    --grad-logo: linear-gradient(135deg, var(--cyan), var(--purple));
    --grad-trilogie: linear-gradient(90deg, var(--cyan), var(--magenta), var(--purple));
    --grad-bg:
        radial-gradient(at 0% 0%, rgba(56, 189, 248, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(168, 85, 247, 0.05) 0px, transparent 50%);
    --text-glow-cyan: 0 0 20px rgba(56, 189, 248, 0.4);
    --text-glow-magenta: 0 0 20px rgba(236, 72, 153, 0.4);

    /* Design Tokens: Spacing */
    --sp-xs: 0.25rem;
    --sp-sm: 0.5rem;
    --sp-md: 1rem;
    --sp-lg: 1.5rem;
    --sp-xl: 2rem;
    --sp-2xl: 3rem;
    --sp-3xl: 4rem;

    /* Design Tokens: Typography
       Schrift-Diät:
       --fs-micro:  12px — NUR für Chrome (Badges, Mobile-Nav-Labels, Pills).
                          Niemals für Fliesstext.
       --fs-sm:     14px — Floor für Fliesstext (Caption, Hint, Helper).
       --fs-base:   16px — Body-Default.
       --fs-md:     18px — Lead, betonter Body.
       --fs-lg:     22px — Card-Title, Subhead.
       --fs-xl:     28px — H2, Section-Header.
       --fs-2xl:    36px — H1.
       --fs-3xl:    44px — Display, Hero. */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-micro: 0.75rem;   /* 12px — Chrome only */
    --fs-xs: 0.875rem;     /* 14px — alias auf --fs-sm, retained für legacy */
    --fs-sm: 0.875rem;     /* 14px — Body-Floor */
    --fs-base: 1rem;       /* 16px */
    --fs-md: 1.125rem;     /* 18px */
    --fs-lg: 1.375rem;     /* 22px */
    --fs-xl: 1.75rem;      /* 28px */
    --fs-2xl: 2.25rem;     /* 36px */
    --fs-3xl: 2.75rem;     /* 44px */
    --fs-4xl: 3.5rem;      /* 56px — retained für Hero */

    /* Font-Weights: Schrift-Diät. Kanonische 3-Stufen-Skala.
       Mapping (sweep-task): 400/500 → --fw-body, 600/700 → --fw-emphasis,
       800/900 → --fw-display. Komponenten-Inline-Styles werden inkrementell
       auf diese Tokens migriert. */
    --fw-body: 400;
    --fw-emphasis: 600;
    --fw-display: 800;

    /* Line-Heights: tight für Headlines/Display, body für Fliesstext (Default),
       relax für lange Erzähl-Passagen mit hoher Lesbarkeit. */
    --lh-tight: 1.2;
    --lh-body: 1.55;
    --lh-relax: 1.7;

    /* Design Tokens: Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    /* Design Tokens: Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 10px 30px rgba(0,0,0,0.3);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.4);
    --shadow-glow-cyan: 0 0 20px rgba(56, 189, 248, 0.3);
    --shadow-glow-magenta: 0 0 20px rgba(236, 72, 153, 0.3);

    /* App-Feel Easing-Tokens. Linear/ease wirkt webby, Spring-Curves wirken
       nativ. --ease-spring für Buttons/Cards (subtile Bounce), --ease-smooth
       für Sheet-Transitions (Material-style), --ease-decel für Eintritts-
       Animationen (verlangsamend). */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-decel: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Safe-Area-Insets als Tokens, damit Komponenten konsistent den iOS-
       Notch/Home-Indicator respektieren ohne env() zu duplizieren. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Z-Index-Stack-Tokens. Klare Hierarchie statt magic numbers verstreut.
       Nutze diese Tokens in neuen Komponenten und beim Refactor bestehender:
         nav      = persistente Navigation (Top + Bottom)
         dropdown = inline-Selects, Autocomplete-Listen
         sticky   = Sticky-Header, Date-Separators
         backdrop = Sheet-/Modal-Backdrops
         sheet    = Bottom-Sheets (Quick-Actions, Filter, Feedback)
         modal    = Bestätigungs-Dialoge (GlobalModal)
         toast    = Toast-Messages
         loadingbar = Page-Loading-Bar (immer ganz oben sichtbar)
         banner   = System-Banner (Cookie-Consent, Stealth, Impersonation) */
    --z-nav: 1000;
    --z-dropdown: 1500;
    --z-sticky: 2000;
    --z-backdrop: 8000;
    --z-sheet: 9000;
    --z-modal: 9500;
    --z-toast: 9700;
    --z-banner: 9800;
    --z-loadingbar: 9900;

    /* Mobile-Breakpoint-Tokens. Einheitliche 3-Tier-Strategie statt der
       aktuell gemischten 380/500/640/768. CSS-Variablen können nicht direkt
       in @media-Queries genutzt werden, daher liefere ich sie hier nur als
       Doku-Quelle der Wahrheit. Implementierung in @media literal:
         --bp-mobile: 480px   → @media (max-width: 480px)  (Phones)
         --bp-tablet: 768px   → @media (max-width: 768px)  (Tablets)
         --bp-desktop: 1024px → @media (min-width: 1024px) (Desktops)
       Bestehende 640/500/380-Breakpoints behalten wir bis zum Sweep, neue
       Komponenten nutzen 480/768/1024. */
    --bp-mobile: 480px;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;

    /* ── Print-Tokens (Dossier-Print-Layout) ────────────────────────────
       A4-Geometrie + Print-spezifische Akzent-/Watermark-Werte. Werden
       vom globalen @media print-Block (Ende dieser Datei) und von den
       Print-Komponenten konsumiert. Säulen-Akzente sind Aliase auf die
       drei Trilogie-Tokens, plus --pillar-relate (gold) für Synastrie/
       Umfeld. NICHT für Web-Layout verwenden, das hat eigene Tokens. */
    --print-page-width: 210mm;
    --print-page-height: 297mm;
    --print-page-margin-top: 18mm;
    --print-page-margin-bottom: 18mm;
    --print-page-margin-x: 16mm;
    --print-section-gap: 14mm;
    --print-footer-offset: 10mm;
    --print-pagenum-bg-color: rgba(255, 255, 255, 0.04);
    --print-watermark-color: rgba(212, 175, 55, 0.05);
    --print-divider-color: rgba(255, 255, 255, 0.06);

    --pillar-astro: var(--cyan);
    --pillar-hd: var(--magenta);
    --pillar-numero: var(--purple);
    --pillar-relate: var(--gold);
}

/* ─── Type-Layer ────────────────────────────────────────────────────────
   Element-Defaults via :where() (Spezifität 0, Komponenten-Styles
   überschreiben automatisch). Utility-Klassen für Inline-Nutzung.
   Tokens kommen aus :root oben.
   ──────────────────────────────────────────────────────────────────── */

:where(h1) {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-display);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    color: var(--text-main);
}
:where(h2) {
    font-size: var(--fs-xl);
    font-weight: var(--fw-display);
    line-height: var(--lh-tight);
    color: var(--text-main);
}
:where(h3) {
    font-size: var(--fs-lg);
    font-weight: var(--fw-emphasis);
    line-height: var(--lh-tight);
    color: var(--text-main);
}
:where(h4) {
    font-size: var(--fs-md);
    font-weight: var(--fw-emphasis);
    color: var(--text-main);
}
:where(h5) {
    font-size: var(--fs-base);
    font-weight: var(--fw-emphasis);
    color: var(--text-main);
}
:where(h6) {
    font-size: var(--fs-sm);
    font-weight: var(--fw-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
:where(p) {
    color: var(--text-secondary);
    line-height: var(--lh-body);
}
:where(small) {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
:where(strong, b) {
    font-weight: var(--fw-emphasis);
    color: var(--text-main);
}

/* Font-size utilities */
.fs-micro { font-size: var(--fs-micro); }
.fs-sm    { font-size: var(--fs-sm); }
.fs-base  { font-size: var(--fs-base); }
.fs-md    { font-size: var(--fs-md); }
.fs-lg    { font-size: var(--fs-lg); }
.fs-xl    { font-size: var(--fs-xl); }
.fs-2xl   { font-size: var(--fs-2xl); }
.fs-3xl   { font-size: var(--fs-3xl); }
.fs-4xl   { font-size: var(--fs-4xl); }

/* Font-weight utilities */
.fw-body     { font-weight: var(--fw-body); }
.fw-emphasis { font-weight: var(--fw-emphasis); }
.fw-display  { font-weight: var(--fw-display); }

/* Line-height utilities */
.lh-tight { line-height: var(--lh-tight); }
.lh-body  { line-height: var(--lh-body); }
.lh-relax { line-height: var(--lh-relax); }

/* Foreground-color utilities */
.fg-1 { color: var(--text-main); }
.fg-2 { color: var(--text-secondary); }
.fg-3 { color: var(--text-muted); }
.fg-4 { color: var(--text-hint); }

/* ─── View-Transitions ──────────────────────────────────────────────────
   Browsersupport: Chrome 111+, Safari 18+, Edge. Page-Wechsel wird zu
   einer nativen Cross-Fade/Slide-Animation, statt eines harten Reloads.
   Layout-Wrapper (Top-Bar, Bottom-Nav, Mehr-Sheet, Modal) bekommen eigene
   view-transition-name und werden NICHT animiert, damit sie persistent
   bleiben wie in einer nativen App. */
/* Forward (default): old slides out left, new slides in from right.
   Back (popstate, delta<0): old slides out right, new slides in from left.
   Beide Richtungen werden über das data-nav-dir-Attribut auf <html>
   gesteuert (gesetzt im onNavigate-Hook im Layout). */
::view-transition-old(root) {
    animation: vt-out-forward 0.22s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) both;
}
::view-transition-new(root) {
    animation: vt-in-forward 0.26s var(--ease-decel, cubic-bezier(0, 0, 0.2, 1)) both;
}
html[data-nav-dir="back"] ::view-transition-old(root) {
    animation: vt-out-back 0.22s var(--ease-smooth, cubic-bezier(0.4, 0, 0.2, 1)) both;
}
html[data-nav-dir="back"] ::view-transition-new(root) {
    animation: vt-in-back 0.26s var(--ease-decel, cubic-bezier(0, 0, 0.2, 1)) both;
}
@keyframes vt-out-forward {
    to { opacity: 0; transform: translateX(-24px); }
}
@keyframes vt-in-forward {
    from { opacity: 0; transform: translateX(24px); }
}
@keyframes vt-out-back {
    to { opacity: 0; transform: translateX(24px); }
}
@keyframes vt-in-back {
    from { opacity: 0; transform: translateX(-24px); }
}
/* Persistente Layout-Elemente: Top-Bar und Bottom-Nav bekommen eigene
   view-transition-names damit sie nicht mit-animiert werden. Ohne diese
   Marker würden sie beim Pagewechsel mit ein- und ausgefadet, was den
   App-Feel zerstört. */
.v2-top { view-transition-name: app-top; }
.v2-bottom { view-transition-name: app-bottom; }
::view-transition-group(app-top),
::view-transition-group(app-bottom) {
    animation-duration: 0s;
}

/* Image-Hero-Morph: Profilbilder bekommen pro user_id einen
   view-transition-name (siehe entdecken/+page.svelte und
   match/[id]/+page.svelte). Beim Klick auf eine Feed-Karte
   morpht das Bild aus der Karte zur grossen Avatar-Position auf
   der Detail-Seite, statt einen Hard-Cut zu zeigen. Spring-Easing
   gibt den nativen iOS-/Android-Look. */
::view-transition-group(*[id^="profile-"]) {
    animation-duration: 0.45s;
    animation-timing-function: var(--ease-smooth);
}

/* User-Präferenz: prefers-reduced-motion → keine Transitions. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* iOS-Auto-Zoom-Fix: Wenn ein Input/Textarea/Select <16px Schriftgrösse
   hat, zoomt iOS Safari beim Fokussieren rein (Accessibility-Default).
   Auf Mobile setzen wir mindestens 16px für alle Form-Elemente, das
   verhindert den Zoom ohne sichtbare Optik-Veränderung. Auf Desktop
   bleibt der Token-Wert (--fs-sm = 14px) erhalten. */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea, select {
        font-size: 16px !important;
    }
    /* Keyboard-Scroll-Fix: Wenn iOS einen Input fokussiert, scrollt es
       die Page nur dann zum Input wenn dieser dadurch von der Tastatur
       verdeckt würde. Mit scroll-margin-bottom geben wir dem Browser
       einen Hinweis "halte 80px Abstand zum Bottom" — dadurch landet
       der Input über der Bottom-Nav + Tastatur statt darunter. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
    textarea:focus,
    select:focus {
        scroll-margin-bottom: 80px;
        scroll-margin-top: 80px;
    }
    /* scroll-padding auf html, damit auch der Bottom-Nav-Bereich nicht
       als "freier Platz" gilt — sonst landet der Input zwar im Viewport,
       aber von der V2-Bottom-Nav verdeckt. */
    html {
        scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

/* ─── App-Feel Reset ────────────────────────────────────────────────────
   Globale Mobile-/Touch-Optimierungen: kein Browser-Tap-Highlight (der
   blaue Flash beim Tap), keine versehentlichen Pull-to-Refresh-Trigger,
   konsistentes Touch-Feedback. */
* {
    -webkit-tap-highlight-color: transparent;
}
html, body {
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
}
/* Active-Tap-Feedback: alle interaktiven Elemente bekommen einen
   leichten Scale-Pulse beim Drücken. Drei Stufen, alle touch-only:
     A = Standard-Cards (0.98), B = Hero-Cards mit brightness-Dim,
     C = Pills/Chips (0.94 spring). Reduced-motion-User bekommen
   Opacity-Dip als alternativen Indikator.

   NICHT global auf alle Buttons werfen ausserhalb dieses Blocks.
   Inline-Overrides (z.B. .hd-main-box, .qa-item) gehen separat. */
@media (hover: none) and (pointer: coarse) {
    /* Stufe A — Standard-Listen-Cards, Hub-Tiles, Setting-Rows. */
    button:not(:disabled):active,
    [role="button"]:not(:disabled):active,
    a:not(.no-tap-fx):active,
    .toggle-switch:active,
    .v2-tab:active,
    .v2-more-item:active,
    .v2-more-ws-item:active,
    .feed-grid-card:active,
    .like-card:active,
    .match-card:active,
    .resonance-card:active,
    .focus-card:active,
    .speed-card:active,
    .chat-item:active,
    .chat-link:active,
    .connection-bubble:active,
    .fp-card:active,
    .contact-card:active,
    .mini-card:active,
    .sr-press-card:active {
        transform: scale(0.98);
        transition: transform 120ms var(--ease-smooth);
    }
    /* Stufe B — Hero-Cards mit Bild/Background. Sanftes scale + brightness-Dip. */
    .sr-press-hero:active {
        transform: scale(0.985);
        filter: brightness(0.96);
        transition: transform 140ms var(--ease-smooth),
                    filter 140ms var(--ease-smooth);
    }
    /* Stufe C — Pills, Chips, kleine Action-Tags. Aggressiver via Spring. */
    .chip:active,
    .sr-press-pill:active {
        transform: scale(0.94);
        transition: transform 100ms var(--ease-spring);
    }
}

/* Reduced-Motion: kein scale/filter, nur Opacity-Dip als Press-Indikator. */
@media (prefers-reduced-motion: reduce) {
    .sr-press-card:active,
    .sr-press-hero:active,
    .sr-press-pill:active,
    .chip:active {
        transform: none;
        filter: none;
        opacity: 0.85;
        transition: opacity 80ms linear;
    }
}

/* ─── Skeleton-Utilities ─────────────────────────────────────────────────
   Shared Shimmer + Box/Line/Circle Primitives für Loading-States. Wird
   sowohl von SkeletonCard.svelte verwendet als auch von page-spezifischen
   Inline-Skeletons (match-detail, chat-room, kompass-guidance, blueprint,
   synergie). Reduced-Motion-User bekommen statisches Box ohne Sweep. */
.skel-shimmer {
    background: linear-gradient(90deg, #1a1a2e 25%, #252540 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: skel-shimmer 1.5s linear infinite;
}
.skel-box {
    background: #1a1a2e;
    border-radius: 8px;
}
.skel-line {
    height: 14px;
    background: #1a1a2e;
    border-radius: 7px;
}
.skel-circle {
    background: #1a1a2e;
    border-radius: 50%;
}
@keyframes skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .skel-shimmer {
        background: rgba(255, 255, 255, 0.04);
        animation: none;
        opacity: 0.6;
    }
}

/* Card-Hover-Lift-Standard für Pointer-Geräte. Greift überall, wo wir
   eine Card-Klasse rendern, damit Cards einheitlich auf Mausover
   reagieren. Bei :hover heben sie sich leicht und bekommen einen
   weicheren Schatten. Cards mit eigener .hover-Override greifen das
   weiterhin selbst. */
@media (hover: hover) {
    .feed-grid-card,
    .like-card,
    .match-card,
    .resonance-card,
    .fp-card,
    .contact-card,
    .chat-item,
    .connection-bubble {
        transition: transform 0.18s var(--ease-smooth), box-shadow 0.18s var(--ease-smooth);
    }
    .feed-grid-card:hover,
    .like-card:hover,
    .match-card:hover,
    .resonance-card:hover,
    .fp-card:hover,
    .contact-card:hover,
    .chat-item:hover,
    .connection-bubble:hover {
        transform: translateY(-3px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .feed-grid-card,
    .like-card,
    .match-card,
    .resonance-card,
    .fp-card,
    .contact-card,
    .chat-item,
    .connection-bubble {
        transition: none;
    }
    .feed-grid-card:hover,
    .like-card:hover,
    .match-card:hover,
    .resonance-card:hover,
    .fp-card:hover,
    .contact-card:hover,
    .chat-item:hover,
    .connection-bubble:hover {
        transform: none;
    }
}

/* ─── Stagger-In für Listen ─────────────────────────────────────────────
   Cards in einer Liste poppen nicht alle gleichzeitig in den Viewport,
   sondern fade-up mit ~40ms Versatz. Wirkt natürlich, gibt der Liste
   Lebendigkeit. Nur die ersten ~12 Items werden gestaffelt — alles
   darüber hinaus ist OK ohne Delay (Performance + lange Listen).

   Greift NUR beim Initial-Mount: html[data-initial-load] wird vom Layout
   für ~1s nach Page-Load gesetzt. Bei späteren Re-Renders (z.B. nach
   Pull-to-Refresh) ist das Attribut weg, daher keine Re-Animation. */
html[data-initial-load] .feed-grid > .feed-grid-card,
html[data-initial-load] .likes-grid > .like-card,
html[data-initial-load] .matches-list > .match-card,
html[data-initial-load] .resonance-grid > .resonance-card,
html[data-initial-load] .dialogues-list > .dialogue-item,
html[data-initial-load] .chat-list > .chat-item,
html[data-initial-load] .fp-grid > .fp-card,
html[data-initial-load] .contact-grid > .contact-card,
html[data-initial-load] .new-connections .connection-bubble {
    animation: sr-stagger-in 0.42s var(--ease-out-quint) backwards;
}
.feed-grid > :nth-child(1),  .likes-grid > :nth-child(1),  .matches-list > :nth-child(1),
.resonance-grid > :nth-child(1), .dialogues-list > :nth-child(1), .chat-list > :nth-child(1),
.fp-grid > :nth-child(1), .contact-grid > :nth-child(1) { animation-delay: 0ms; }
.feed-grid > :nth-child(2),  .likes-grid > :nth-child(2),  .matches-list > :nth-child(2),
.resonance-grid > :nth-child(2), .dialogues-list > :nth-child(2), .chat-list > :nth-child(2),
.fp-grid > :nth-child(2), .contact-grid > :nth-child(2) { animation-delay: 40ms; }
.feed-grid > :nth-child(3),  .likes-grid > :nth-child(3),  .matches-list > :nth-child(3),
.resonance-grid > :nth-child(3), .dialogues-list > :nth-child(3), .chat-list > :nth-child(3),
.fp-grid > :nth-child(3), .contact-grid > :nth-child(3) { animation-delay: 80ms; }
.feed-grid > :nth-child(4),  .likes-grid > :nth-child(4),  .matches-list > :nth-child(4),
.resonance-grid > :nth-child(4), .dialogues-list > :nth-child(4), .chat-list > :nth-child(4),
.fp-grid > :nth-child(4), .contact-grid > :nth-child(4) { animation-delay: 120ms; }
.feed-grid > :nth-child(5),  .likes-grid > :nth-child(5),  .matches-list > :nth-child(5),
.resonance-grid > :nth-child(5), .dialogues-list > :nth-child(5), .chat-list > :nth-child(5),
.fp-grid > :nth-child(5), .contact-grid > :nth-child(5) { animation-delay: 160ms; }
.feed-grid > :nth-child(6),  .likes-grid > :nth-child(6),  .matches-list > :nth-child(6),
.resonance-grid > :nth-child(6), .dialogues-list > :nth-child(6), .chat-list > :nth-child(6),
.fp-grid > :nth-child(6), .contact-grid > :nth-child(6) { animation-delay: 200ms; }
.feed-grid > :nth-child(7),  .likes-grid > :nth-child(7),  .matches-list > :nth-child(7),
.resonance-grid > :nth-child(7), .dialogues-list > :nth-child(7), .chat-list > :nth-child(7) { animation-delay: 240ms; }
.feed-grid > :nth-child(8),  .likes-grid > :nth-child(8),  .matches-list > :nth-child(8),
.resonance-grid > :nth-child(8), .dialogues-list > :nth-child(8), .chat-list > :nth-child(8) { animation-delay: 280ms; }
.feed-grid > :nth-child(n+9), .likes-grid > :nth-child(n+9), .matches-list > :nth-child(n+9),
.resonance-grid > :nth-child(n+9), .dialogues-list > :nth-child(n+9), .chat-list > :nth-child(n+9) { animation-delay: 320ms; }
@keyframes sr-stagger-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Optimistic Like-Burst ─────────────────────────────────────────────
   Klassen die JS direkt nach Klick auf die Karte/den Button setzt, damit
   sofort Feedback entsteht und der User nicht auf den Server wartet.
   - .opt-like-burst auf einem Heart-Icon: kurzer Scale-Pulse
   - .opt-card-out auf der Card: schnelles Fade+Scale-Out, danach kann
     die Card via state-Filter aus dem DOM entfernt werden. */
.opt-like-burst {
    animation: sr-like-burst 0.55s var(--ease-spring);
}
@keyframes sr-like-burst {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); filter: drop-shadow(0 0 14px rgba(236, 72, 153, 0.55)); }
    65%  { transform: scale(0.92); }
    100% { transform: scale(1); filter: none; }
}
.opt-card-out {
    animation: sr-card-out 0.32s var(--ease-smooth) forwards;
    pointer-events: none;
}
@keyframes sr-card-out {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.92) translateY(20px); }
}
@media (prefers-reduced-motion: reduce) {
    .opt-like-burst, .opt-card-out { animation: none; }
}

/* ─── Empty-State-Utilities ─────────────────────────────────────────────
   Hülle für „leere" Zustände. Wird intern von src/lib/components/
   EmptyState.svelte genutzt; Sonderfälle mit eigener Mark-up-Struktur
   (z.B. Filter-Tip mit Hinweisliste auf entdecken/+page.svelte) dürfen
   diese Klassen direkt verwenden ohne die Komponente.

   Default-Padding ist grosszügig, damit der Block auf Page-Level zentriert
   wirkt. .sr-empty.compact reduziert Padding und entfernt den max-width-
   Cap; nutzbar in In-Container-Kontexten wie Chat-Detail-Containern oder
   System-Chat wo die Page das eigene Padding bringt. */
.sr-empty {
    text-align: center;
    padding: clamp(2rem, 5vw, 4rem) 1.5rem;
    max-width: 520px;
    margin: 0 auto;
    color: var(--text-muted);
}
.sr-empty.compact {
    padding: 2rem 1rem;
    max-width: none;
}
.sr-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    opacity: 0.45;
    position: relative;
}
.sr-empty.compact .sr-empty-icon {
    margin-bottom: 0.75rem;
}
.sr-empty-title {
    font-size: var(--fs-xl);
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    margin: 0 0 0.75rem;
    font-weight: 600;
}
.sr-empty.compact .sr-empty-title {
    font-size: var(--fs-md);
    margin-bottom: 0.5rem;
}
.sr-empty-text {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--text-muted);
    max-width: 400px;
    margin: 0 auto 1.75rem;
}
.sr-empty.compact .sr-empty-text {
    margin-bottom: 0;
    font-size: var(--fs-sm);
}
.sr-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    max-width: 320px;
    margin: 0 auto;
}
.sr-empty-actions > .btn-gradient,
.sr-empty-actions > .btn-outline {
    text-decoration: none;
    flex: 1 1 140px;
    max-width: 100%;
    box-sizing: border-box;
}

/* Pulse-Glow hinter dem Icon. Opt-in via .sr-empty-pulse, defaultmässig
   aus. Reduced-Motion-User bekommen statisches Layout. */
.sr-empty-pulse {
    position: relative;
}
.sr-empty-pulse::before {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, transparent 60%);
    opacity: 0.2;
    z-index: -1;
    animation: sr-empty-pulse 4s ease-in-out infinite;
}
@keyframes sr-empty-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.18; }
    50%      { transform: scale(1.15); opacity: 0.32; }
}
@media (prefers-reduced-motion: reduce) {
    .sr-empty-pulse::before { animation: none; opacity: 0.18; }
}

/* ─── Snap-Scroll für horizontale Strips ───────────────────────────────
   Strips in der App scrollen sich aktuell free-form, was unprezise
   wirkt. Snap-mandatory lässt jedes Item beim Scrollen am linken Rand
   einrasten, wie auf iOS/Android. Greift überall wo eine bekannte
   Strip-Klasse rendered wird. */
.connections-scroll,
.next-scroll,
.chat-strip,
.zyklen-group-tabs,
.umfeld-scroll-strip {
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0.5rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.connections-scroll > *,
.next-scroll > *,
.chat-strip > *,
.zyklen-group-tabs > *,
.umfeld-scroll-strip > * {
    scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) {
    .feed-grid > .feed-grid-card,
    .likes-grid > .like-card,
    .matches-list > .match-card,
    .resonance-grid > .resonance-card,
    .dialogues-list > .dialogue-item,
    .chat-list > .chat-item,
    .fp-grid > .fp-card,
    .contact-grid > .contact-card,
    .new-connections .connection-bubble {
        animation: none;
    }
}

/* ─── App-Feel Atmosphere ───────────────────────────────────────────────
   Wiederverwendbare Animations-Utility-Klassen. Eingesetzt in:
   - .empty-state-illustration: Empty-States atmen sanft, statisches
     Icon wirkt sonst tot.
   - .badge-pulse: Likes/Resonanz-Counter pulsieren leicht, ziehen Auge.
   - .ripple-target: Tap-Ripple wie Material/iOS, via JS-Action gesetzt
     (ripple.js). Hier nur das Container-Setup (Overflow, Stacking).
   Alle Animationen respektieren prefers-reduced-motion. */
.empty-state-illustration,
.empty-icon {
    animation: sr-breathe 4.5s ease-in-out infinite;
    transform-origin: center;
}
@keyframes sr-breathe {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
}
.badge-pulse {
    animation: sr-badge-pulse 2.8s ease-in-out infinite;
}
@keyframes sr-badge-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.45); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(236, 72, 153, 0); }
}
/* Ripple-Container: Action liefert das eigentliche Ripple-Element,
   wir setzen hier nur Overflow + position:relative falls noch nicht
   gesetzt. Aufrufer kann use:ripple verwenden. */
.ripple-target {
    position: relative;
    overflow: hidden;
}
.sr-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    pointer-events: none;
    animation: sr-ripple-anim 0.55s var(--ease-smooth) forwards;
}
@keyframes sr-ripple-anim {
    to {
        transform: scale(2.4);
        opacity: 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .empty-state-illustration,
    .badge-pulse { animation: none; }
    .sr-ripple { display: none; }
}

@keyframes logo-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px var(--cyan)); opacity: 0.9; }
    50% { filter: drop-shadow(0 0 18px var(--purple)); opacity: 1; }
}

@keyframes wave-infinite {
    0% { transform: translateX(0); }
    100% { transform: translateX(-30px); }
}
@keyframes point-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; filter: drop-shadow(0 0 4px #ec4899); }
    50% { transform: scale(1.6); opacity: 1; filter: drop-shadow(0 0 20px #ec4899) drop-shadow(0 0 40px #ec489966); }
}

html {
    /* Scrollbar-Gutter immer reservieren, damit zentrierte Elemente (Header,
       Footer, main) auf Seiten mit und ohne Scrollbar identisch positioniert
       werden. Verhindert den 7.5px-Sprung zwischen kurzen und langen Seiten. */
    scrollbar-gutter: stable;
    /* Backup-Background auf html: Safari hatte ab Version 16 einen Bug, bei dem
       die Kombination `background-attachment: fixed` + `radial-gradient` auf
       body die background-color komplett ignoriert hat (weisser Hintergrund).
       Indem wir bg-color zusätzlich auf html setzen, trägt der html-Layer
       die Hintergrundfarbe selbst wenn body's Background-Stack mal misslingt. */
    background-color: var(--bg-main);
}

body {
    /* Gradients ohne background-attachment: fixed — verhindert Safari-Bug
       (siehe html-Kommentar). Visual-Impact minimal weil Gradients eh auf
       opacity 0.05 sitzen. */
    background-color: var(--bg-main);
    background-image: var(--grad-bg);
    color: var(--text-main);
    /* Schrift-Diät: Plus Jakarta Sans als Primary (lokal via @fontsource —
       Schrems II konform), System-Stack als Fallback. Keine zweite Font-
       Familie mehr — deckt Display und Body. */
    font-family: var(--font-sans);
    font-size: var(--fs-base); /* 16px Default — keine impliziten 12px irgendwo */
    font-weight: var(--fw-body, 400);
    line-height: var(--lh-body);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
    z-index: -1;
}

/* --- LAYOUT STANDARD: 1200px max, responsive, ein Guss --- */
.page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .page-container { padding: 0 1rem; }
}

/* --- NAVIGATION --- */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 4rem;
    padding: 1.2rem 1.5rem;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 900;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    background: rgba(11, 17, 32, 0.85);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.top-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), var(--purple), transparent);
    border-radius: 2px;
}
/* Auf Seiten mit GlobalNav (Sub-Pages) soll top-nav nicht sticky sein */
:has(.global-nav-header) .top-nav {
    position: relative;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: transparent;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cyan);
    flex-shrink: 0;
}

.brand-name {
    font-weight: 900;
    letter-spacing: 3px;
    font-size: var(--fs-sm);
    color: var(--text-main);
}

.nav-links {
    display: flex;
    gap: 1.2rem;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    padding: 12px 0 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-item span {
    white-space: nowrap;
}
.nav-item.more-btn {
    flex-shrink: 0; /* MEHR darf nie verschwinden */
}

.nav-item.active { color: var(--cyan); }
.nav-item:hover { color: var(--text-main); }

@media (max-width: 768px) {
    .nav-links { display: none; } /* Hide top links on mobile */
    .top-nav { justify-content: center; padding-top: 2rem; margin-bottom: 2rem; position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; }
    .brand-name { font-size: var(--fs-sm); letter-spacing: 2px; }
    .container { padding-bottom: 90px; } /* Bottom nav (70px) + safe area */
    
    /* Ensure standalone buttons are centered and not offset */
    .action-buttons {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        gap: 1rem !important;
    }
    .action-buttons .btn-gradient, .action-buttons .btn-outline {
        display: block !important;
        max-width: 400px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- MOBILE BOTTOM NAV --- */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: rgba(11, 17, 32, 0.8);
    backdrop-filter: blur(20px);
    border-top: none;
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    padding: 0 10px;
    transition: transform 0.3s ease;
}
.mobile-bottom-nav.nav-hidden {
    transform: translateY(100%);
}

.nav-trilogie {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--magenta), var(--purple), transparent);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .mobile-bottom-nav { display: flex; }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: var(--fs-micro); /* 12px — Chrome-Token, lesbar statt 9.6px (0.6rem) */
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.mobile-nav-item.active { color: var(--cyan); }
.mobile-nav-item.lang-nav-item { justify-content: center; }
.mobile-nav-item .nav-svg { width: 20px; height: 20px; }

.mobile-nav-item .badge-dot {
    position: absolute;
    top: 12px;
    right: 25%;
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
    border: 2px solid var(--bg-main);
}

/* Landscape: compact bottom nav */
@media (orientation: landscape) and (max-height: 500px) {
    .mobile-bottom-nav {
        height: 44px;
        padding: 0 6px;
    }
    .mobile-nav-item {
        font-size: 0;
        gap: 0;
    }
    .mobile-nav-item .nav-svg {
        width: 18px;
        height: 18px;
    }
    .container { padding-bottom: 54px; }
}

/* --- MAIN CONTAINER --- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
@media (max-width: 500px) {
    .container { padding: 1rem 0.5rem; }
    .page-container { padding: 0 0.5rem; }
}
@media (max-width: 380px) {
    .astro-grid { grid-template-columns: 1fr; }
}

/* --- HEADER --- */
.page-header {
    text-align: center;
    margin-bottom: 3.5rem;
    margin-top: 1rem; /* Einheitlicher Startabstand von oben */
}
.gradient-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: var(--cyan);
    text-shadow: 0 0 40px rgba(56, 189, 248, 0.3);
    letter-spacing: -1px;
    word-break: break-word;
    hyphens: auto;
    overflow-wrap: break-word;
}
.subtitle { color: var(--text-secondary); font-size: var(--fs-lg); margin: 0; }

/* --- EINGABE PORTAL --- */
.portal-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.5rem;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
    .portal-box { padding: 1.5rem; }
}
@media (max-width: 500px) {
    .portal-box { padding: 1rem; }
}

.input-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
    .input-grid { grid-template-columns: 1fr 1fr; }
}

.input-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-micro);
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.input-group input:not([type="range"]), .portal-box input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.portal-box select, .portal-box textarea,
.autocomplete-wrapper input,
select, textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.8rem 1.2rem;
    min-height: 54px;
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--fs-base);
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s;
}
input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: auto;
    accent-color: var(--cyan);
    cursor: pointer;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.2);
}

/* Form Error States */
input.input-error, select.input-error, textarea.input-error {
    border-color: var(--red) !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}
.field-error {
    color: var(--red);
    font-size: var(--fs-xs);
    margin-top: var(--sp-xs);
    font-weight: 600;
}

/* Focus Ring — Accessibility */
*:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}
button:focus-visible, a:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Minimum Touch Target */
.touch-target {
    min-width: 48px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- SUBTLE SCROLLBAR — gleiche Stilistik wie die Header-Trilogie-Linie
   (Cyan → Magenta → Purple). Schlank, transparent, nicht dominant. --- */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--cyan), var(--magenta), var(--purple));
    border-radius: 999px;
    opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
    opacity: 1;
}

/* Firefox: thin scrollbar, cyan-magenta-purple trilogy nicht direkt möglich
   — Firefox unterstützt nur Einzelfarbe. Wir nutzen Magenta als Mittelwert
   der Trilogie, passt zur SoulResonance-Identität. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(236, 72, 153, 0.5) transparent;
}

/* --- VIEW TRANSITIONS --- */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 0.3s var(--ease-smooth) both fade-out;
}

::view-transition-new(root) {
    animation: 0.5s var(--ease-smooth) both fade-in;
}

@keyframes fade-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.98); }
}

@keyframes fade-in {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

/* --- AUTOCOMPLETE --- */
.autocomplete-wrapper { position: relative; width: 100%; }
.suggestions-list {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg-card); border: 1px solid var(--cyan);
    border-radius: 8px; margin-top: 4px; max-height: 250px; overflow-y: auto;
    z-index: 1100; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.suggestion-item { padding: 1rem; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; }
.suggestion-item:hover, .suggestion-item.active-suggestion { background: rgba(56, 189, 248, 0.15); }
.suggestion-item .city { font-weight: 700; }
.suggestion-item .meta { font-size: var(--fs-sm); color: var(--text-muted); }

/* --- BUTTON HIERARCHY --- */
/* Primary: Gradient, strong CTA */
.btn-gradient {
    width: 100%; padding: 0.9rem 1.5rem; border: none; border-radius: var(--radius-md);
    background: var(--grad-cyan); color: white; font-size: var(--fs-lg);
    font-weight: 700; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s;
}
.btn-gradient:hover { transform: translateY(-2px); box-shadow: var(--text-glow-cyan); }
.btn-gradient:active { transform: translateY(0); }
.btn-gradient:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Feed Action Buttons (global to prevent hydration flash) */
.focus-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.action-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    padding: 0.9rem 0.5rem; border-radius: 14px; border: 1.5px solid; background: transparent;
    cursor: pointer; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
    font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.3px; min-width: 80px;
}
.action-btn svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.action-pass { border-color: rgba(148, 163, 184, 0.3); color: var(--text-muted); }
.action-pass:hover { border-color: var(--text-muted); color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.action-save { border-color: rgba(245,158,11,0.4); color: var(--gold, #f59e0b); }
.action-save:hover, .action-save.saved { border-color: var(--gold, #f59e0b); background: rgba(245,158,11,0.08); }
.action-like { border: none; background: linear-gradient(135deg, #38bdf8, #a855f7); color: white; font-weight: 700; }
.action-like:hover { box-shadow: 0 4px 20px rgba(56,189,248,0.3), 0 4px 20px rgba(168,85,247,0.3); transform: translateY(-1px); }
.focus-detail-link {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.75rem 1rem; border-radius: var(--radius-md, 12px);
    background: rgba(56,189,248,0.06); border: 1px solid rgba(56,189,248,0.25);
    color: var(--cyan, #38bdf8); font-size: var(--fs-sm); font-weight: 600;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.focus-detail-link:hover {
    background: rgba(56,189,248,0.12); border-color: var(--cyan, #38bdf8);
    box-shadow: 0 2px 12px rgba(56,189,248,0.15);
}
.focus-detail-link svg { flex-shrink: 0; }
@media (max-width: 640px) {
    .focus-actions { gap: 0.5rem; }
    .action-btn { padding: 0.75rem 0.4rem; font-size: var(--fs-micro); min-width: 60px; }
    .focus-detail-link { font-size: var(--fs-sm); padding: 0.65rem 0.75rem; }
}

/* Secondary: Outline, high contrast */
.btn-outline {
    width: 100%; padding: 0.9rem 1.5rem; border: 1px solid rgba(56, 189, 248, 0.5); border-radius: var(--radius-md);
    background: rgba(56, 189, 248, 0.08); color: var(--text-main); font-size: var(--fs-base); font-weight: 700;
    cursor: pointer; transition: all 0.3s;
}
.btn-outline:hover { background: rgba(56, 189, 248, 0.15); border-color: var(--cyan); }
.btn-outline:active { background: rgba(56, 189, 248, 0.2); }

/* Tertiary: Text-only, subtle */
.btn-text {
    padding: 0.8rem 1rem; border: none; border-radius: var(--radius-md);
    background: transparent; color: var(--text-secondary); font-size: var(--fs-sm);
    font-weight: 600; cursor: pointer; transition: color 0.3s;
}
.btn-text:hover { color: var(--cyan); }

.btn-gradient.compact, .btn-outline.compact { padding: 0.6rem 1rem; font-size: var(--fs-sm); }
.btn-gradient.large, .btn-outline.large { padding: 1.2rem 2rem; font-size: var(--fs-lg); }

/* Danger: Red outline */
.btn-danger {
    width: 100%; padding: 1.2rem; border: 1px solid rgba(239, 68, 68, 0.4); border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.08); color: var(--red); font-size: var(--fs-base); font-weight: 700;
    cursor: pointer; transition: all 0.3s;
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.15); border-color: var(--red); }

.action-buttons { display: flex; gap: var(--sp-md); margin-top: var(--sp-2xl); flex-direction: column; }
@media (min-width: 600px) { .action-buttons { flex-direction: row; } }

/* --- RESULT DASHBOARD & MATCH --- */
#dashboard, #resultSection { width: 100%; max-width: 1200px; animation: fadeIn 0.8s ease; margin: 0 auto; }

.result-name { text-align: center; font-size: var(--fs-3xl); letter-spacing: 5px; color: var(--cyan); font-weight: 800; margin-bottom: 2rem; text-shadow: var(--text-glow-cyan); text-transform: uppercase; }

.hd-main-box { 
    background: var(--bg-card); 
    border: 1px solid rgba(236, 72, 153, 0.3); 
    border-radius: 16px; 
    padding: 3rem 2rem; 
    margin-bottom: 2rem; 
    text-align: center; 
    transition: all 0.4s var(--ease-out-expo);
}
.hd-main-box:hover {
    transform: translateY(-4px);
    border-color: #ec4899;
    box-shadow: 0 20px 50px rgba(236, 72, 153, 0.15);
}
/* Stufe-A-konformer Press-State: scale statt translateY, damit User-
   Erwartung "down = press" erfüllt wird. Border + Shadow bleiben als
   visueller Akzent erhalten. Touch-only via @media (hover:none). */
@media (hover: none) and (pointer: coarse) {
    .hd-main-box:active {
        transform: scale(0.98);
        border-color: #ec4899;
        box-shadow: 0 8px 25px rgba(236, 72, 153, 0.2);
        transition: transform 120ms var(--ease-smooth),
                    border-color 120ms var(--ease-smooth),
                    box-shadow 120ms var(--ease-smooth);
    }
}

.hd-type {
    font-size: 4rem;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hd-type-rarity {
    font-size: var(--fs-micro); color: #94a3b8; letter-spacing: 2px; font-weight: 600;
    margin: 0 0 1rem 0; text-align: center;
}
.hd-type-deep {
    margin: 0 auto 2rem; padding: 1rem 1.5rem; max-width: 600px;
    font-size: var(--fs-sm); color: #94a3b8; line-height: 1.6; text-align: center;
    border-top: 1px solid rgba(236, 72, 153, 0.15);
}
.hd-type-deep :is(p) { margin: 0.25rem 0; }
.hd-type-deep :is(b, strong) { color: #cbd5e1; }
.text-glow-magenta { text-shadow: var(--text-glow-magenta); }
.text-glow-cyan { text-shadow: var(--text-glow-cyan); }

.hd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    text-align: left;
    overflow: hidden;
}
.hd-core-grid { grid-template-columns: repeat(3, 1fr); }
.hd-secondary-grid { grid-template-columns: 1fr 1fr; margin-top: 1rem; }

@media (max-width: 768px) {
    .hd-core-grid { grid-template-columns: 1fr; }
    .hd-secondary-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 769px) {
    .hd-grid { grid-template-columns: repeat(4, 1fr); }
    .hd-core-grid { grid-template-columns: repeat(3, 1fr); }
}
.data-card { background: var(--bg-input); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border); min-width: 0; overflow: hidden; }
.data-card .label { font-size: var(--fs-xs); color: var(--text-muted); letter-spacing: 1px; margin-bottom: 0.5rem; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.data-card .value { font-size: var(--fs-md); font-weight: 700; margin: 0; overflow-wrap: break-word; word-break: break-word; }
.data-card .subtitle { font-size: var(--fs-micro); color: var(--text-secondary); font-style: italic; margin: 0.3rem 0 0; line-height: 1.4; }
.data-card-highlight { background: linear-gradient(180deg, rgba(236, 72, 153, 0.06) 0%, var(--bg-input) 100%); border-color: rgba(236, 72, 153, 0.2); }
.data-card .deep-text {
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.06);
    font-size: var(--fs-sm); color: #94a3b8; line-height: 1.6; text-align: left;
}
.data-card .deep-text p { margin: 0 0 0.5rem; }
.data-card .deep-text p:last-child { margin-bottom: 0; }
.data-card .deep-text b { color: #cbd5e1; }
.data-card-highlight .value { font-size: var(--fs-md); }

.cyan { color: var(--cyan); }
.red { color: var(--red); }
.text-gold { color: var(--gold); }

/* 🌟 KANAL-TAG STYLING */
.channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
    border: 1px solid rgba(236, 72, 153, 0.25);
    padding: 4px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-weight: 700;
    font-size: var(--fs-sm);
}

.astro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.astro-card { background: var(--bg-card); padding: 2rem; border-radius: 12px; border: 1px solid var(--border); text-align: center; }
.astro-card .label { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 1rem; font-weight: 700; letter-spacing: 1px; }
.astro-card .sign { font-size: var(--fs-2xl); font-weight: 800; margin: 0 0 0.5rem 0; text-transform: uppercase; }
.astro-card .degrees { font-size: var(--fs-sm); font-weight: 600; margin: 0; }

/* --- FARBIGE TEXT BOXEN --- */
.text-boxes-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; }
@media (min-width: 768px) { .text-boxes-grid { grid-template-columns: 1fr 1fr; } }

.text-card { padding: 2rem; border-radius: 16px; border: 1px solid; background: rgba(17, 24, 39, 0.8); }
.text-card .card-title { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-base); font-weight: 800; letter-spacing: 2px; margin-top: 0; margin-bottom: 1.5rem; }
.text-card .card-content { font-size: var(--fs-sm); line-height: 1.7; color: var(--text-main); }

.theme-cyan { border-color: rgba(56, 189, 248, 0.5); }
.theme-cyan .card-title { color: var(--cyan); }
.theme-purple { border-color: rgba(168, 85, 247, 0.5); }
.theme-purple .card-title { color: var(--purple); }
.theme-green { border-color: rgba(16, 185, 129, 0.5); }
.theme-green .card-title { color: var(--green); }
.theme-gold { border-color: rgba(212, 175, 55, 0.5); background: rgba(212, 175, 55, 0.05); }
.theme-gold .card-title { color: var(--gold); }

/* --- KOSMISCHER RAT --- */
.cosmic-council { background: var(--bg-card); padding: 3rem; border-radius: 16px; border: 1px dashed var(--gold); }
.council-title { display: flex; align-items: center; gap: 0.5rem; color: var(--gold); font-size: var(--fs-md); margin-top: 0; margin-bottom: 1.5rem; letter-spacing: 2px; }
.council-content { font-size: var(--fs-base); line-height: 1.8; color: var(--text-main); }

/* --- 🌟 INFO SHEET (BOTTOM SHEET / MODAL) --- */
.info-sheet {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: none; z-index: 2000; align-items: flex-end; justify-content: center;
}
.info-sheet.active { display: flex; }
.info-sheet-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); backdrop-filter: blur(8px);
}
.info-sheet-content {
    position: relative; background: var(--bg-card); width: 100%; max-width: 550px;
    border-radius: 24px 24px 0 0; padding: 2.5rem; z-index: 2001;
    transform: translateY(100%); transition: transform 0.4s var(--ease-out-expo);
    overflow: hidden;
}
.info-sheet-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--purple));
}
.info-sheet.active .info-sheet-content { transform: translateY(0); }

@media (min-width: 768px) {
    .info-sheet { align-items: center; }
    .info-sheet-content { border-radius: 20px; transform: scale(0.9); opacity: 0; }
    .info-sheet.active .info-sheet-content { transform: scale(1); opacity: 1; }
}

.info-sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.info-sheet-header h3 { margin: 0; color: var(--cyan); letter-spacing: 2px; text-transform: uppercase; font-size: var(--fs-base); }
.close-info { cursor: pointer; color: var(--text-muted); font-size: 24px; transition: color 0.3s; }
.close-info:hover { color: white; }

/* 🌟 GLOSSAR CONTENT STYLING (Die Texte im Popup) */
.concept-box {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px dashed var(--border);
}

.concept-label {
    color: var(--cyan);
    font-size: var(--fs-sm);
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
}

.info-value-highlight {
    font-size: var(--fs-xl); font-weight: 800; color: var(--text-main);
    margin-bottom: 1rem; border-bottom: 2px solid var(--cyan);
    display: inline-block; padding-bottom: 5px;
}
.info-description-text { line-height: 1.8; color: var(--text-muted); font-size: var(--fs-base); }

@media (max-width: 640px) {
    .info-sheet-content {
        max-height: 70vh;
        overflow-y: auto;
        padding: 1rem;
    }
    .info-sheet-header {
        margin-bottom: 1rem;
    }
    .info-sheet-header h3 {
        font-size: var(--fs-sm);
    }
    .info-value-highlight {
        font-size: var(--fs-lg);
    }
    .info-description-text {
        font-size: var(--fs-sm);
        line-height: 1.6;
    }
    .concept-box {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    .concept-label {
        font-size: var(--fs-micro);
    }
}

.loader {
    display: none; text-align: center; color: var(--cyan); margin-top: 2rem; font-style: italic;
    font-size: var(--fs-sm); letter-spacing: 0.5px;
}
.loader::before {
    content: '';
    display: block;
    width: 48px; height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.06);
    border-top-color: var(--cyan);
    border-right-color: var(--magenta);
    border-bottom-color: var(--purple);
    animation: loaderSpin 1s linear infinite;
}
.loader-sub {
    display: block; margin-top: 0.5rem;
    font-size: var(--fs-micro); letter-spacing: 2px; font-style: normal; font-weight: 600;
    background: linear-gradient(90deg, var(--cyan), var(--purple), var(--magenta));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: loaderPulse 2s ease-in-out infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@keyframes loaderPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* --- EMPTY STATE PATTERN --- */
.empty-state { text-align: center; padding: 3rem 1.5rem; }
.empty-state .empty-icon { display: flex; justify-content: center; margin-bottom: 1rem; }
.empty-state .empty-icon svg { width: 48px; height: 48px; color: var(--text-muted); opacity: 0.5; }
.empty-state > svg { width: 48px; height: 48px; color: var(--text-muted); opacity: 0.5; margin: 0 auto 1rem; display: block; }
.empty-state h2 { font-size: var(--fs-lg); font-weight: 700; color: var(--text-main); margin-bottom: 0.5rem; }
.empty-state p { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 1.5rem; line-height: 1.6; }
.empty-state .btn-gradient { max-width: 250px; margin: 0 auto; }

/* --- SECTION DIVIDER --- */
.section-divider {
    height: 1px;
    margin: 2.5rem 0;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.3), rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3), transparent);
    border: none;
}
.section-divider.subtle {
    margin: 1.5rem 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}

/* --- TRILOGIE BORDER (Cyan→Magenta→Purple top accent for trinity sections) --- */
.trilogie-border {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #38bdf8, #ec4899, #a855f7) 1;
}
.trilogie-border-bottom {
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #38bdf8, #ec4899, #a855f7) 1;
}

/* =========================================================
   📱 MOBILE RESPONSIVENESS
   ========================================================= */
@media screen and (max-width: 768px) {
    .gradient-title { font-size: var(--fs-2xl); }
    .hd-type { font-size: var(--fs-2xl); }
    .hd-grid { grid-template-columns: 1fr 1fr; }
    .hd-core-grid { grid-template-columns: 1fr !important; }
    .astro-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .astro-card { padding: 1.2rem; }
    .astro-card .sign { font-size: var(--fs-lg); }
    .match-names-display { font-size: var(--fs-xl); }
    .info-value-highlight { font-size: var(--fs-lg); }
    .icon-button, .info-svg-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .mobile-nav-item { min-height: 48px; min-width: 48px; justify-content: center; }
}

/* =========================================================
   🌟 PREMIUM SVG ICON DESIGN V2.0
   ========================================================= */

.nav-svg { width: 22px; height: 22px; }

.input-svg { width: 20px; height: 20px; color: var(--cyan); margin-right: 4px; }

/* Grössere Icons für die Astro-Cards */
.astro-svg { width: 18px; height: 18px; color: var(--cyan); margin-right: 4px; }

/* Grössere Icons für die Text-Boxen-Header */
.title-svg { width: 24px; height: 24px; margin-right: 8px; }

/* 🌟 Die Fragezeichen-Icons (Jetzt farbig und animiert!) */
.icon-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    outline: none;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none !important;
}

.info-svg-btn {
    display: inline-flex;
    vertical-align: middle;
}

.info-svg {
    width: 18px;
    height: 18px;
    margin-left: 6px;
    cursor: pointer;
    color: var(--cyan); /* Strahlendes Cyan als Basis */
    opacity: 0.8;
    vertical-align: middle;
    transition: opacity 0.3s, transform 0.2s var(--ease-overshoot);
}

.info-svg:hover {
    opacity: 1;
    transform: scale(1.25);
    filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.6));
}

.close-info {
    width: 24px;
    height: 24px;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.3s, transform 0.2s;
}

.close-info:hover {
    color: white;
    transform: rotate(90deg);
}
/* =========================================================
   🌟 THEMATISCHE KARTEN-ICONS (Das V2.0 Upgrade)
   ========================================================= */

/* Das grosse Logo oben in jeder Datenkarte */
.thematic-svg {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    display: block;
    filter: drop-shadow(0 0 8px currentColor);
    opacity: 0.9;
}
@media (max-width: 640px) {
    .thematic-svg {
        width: 24px;
        height: 24px;
        margin-bottom: 6px;
    }
}

/* Farben für die thematischen Logos */
.color-cyan { color: var(--cyan); }
.color-gold { color: var(--gold); }
.color-purple { color: var(--purple); }
.color-green { color: var(--green); }
.color-red { color: var(--red); }

/* Die Karte selbst bekommt etwas mehr Platz nach oben */
.data-card {
    position: relative;
    padding: 1.8rem 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (max-width: 640px) {
    .data-card {
        padding: 1rem 1rem 0.8rem;
    }
    .data-card .label { font-size: var(--fs-micro) !important; margin-bottom: 0.3rem !important; }
    .data-card .value { font-size: var(--fs-base) !important; }
    .data-card-highlight .value { font-size: var(--fs-base) !important; }
}

/* =========================================================
   🌟 DIE INFO-FRAGEZEICHEN (Deutlich sichtbar & farbig!)
   ========================================================= */

/* Wir erzwingen die Farbe und Grösse der kleinen Info-Trigger */
svg.info-svg, 
svg.info-trigger, 
svg.info-trigger-channel {
    width: 18px !important;
    height: 18px !important;
    color: var(--cyan) !important; /* Hier wird das triste Grau überschrieben */
    opacity: 0.8;
    margin-left: 6px;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.3s var(--ease-overshoot);
}

svg.info-svg:hover, 
svg.info-trigger:hover, 
svg.info-trigger-channel:hover {
    opacity: 1;
    color: #fff !important; /* Wird weiss beim Drüberfahren */
    transform: scale(1.3) rotate(10deg);
    filter: drop-shadow(0 0 6px var(--cyan));
}
/* =========================================================
   🌟 COSMIC MATCH STYLES
   ========================================================= */

.match-setup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    width: 100%;
}
@media (max-width: 768px) {
    .match-setup { flex-direction: column; }
}

.person-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.column-title {
    font-size: var(--fs-sm);
    letter-spacing: 3px;
    font-weight: 900;
    margin-bottom: 1rem;
    text-align: center;
}

.match-heart {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ec4899;
    filter: drop-shadow(0 0 15px rgba(236, 72, 153, 0.4));
}
.match-heart svg {
    width: 100%;
    height: 100%;
}

/* Result Header */
.score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 4rem;
}

.score-names {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    justify-content: center;
}

.name-display {
    font-size: var(--fs-3xl);
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--text-main);
    text-shadow: 0 0 20px rgba(255,255,255,0.1);
}

.heart-icon {
    font-size: var(--fs-2xl);
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
}

/* Der grosse Score Kreis in der Mitte */
.score-circle {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 8px solid rgba(56, 189, 248, 0.1);
    border-top-color: var(--cyan);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 50px rgba(56, 189, 248, 0.1);
    transform: rotate(-45deg); 
    transition: all 0.5s ease;
}
.score-circle > * { transform: rotate(45deg); }

.score-number { 
    font-size: 5rem; 
    font-weight: 900; 
    color: var(--text-main); 
    line-height: 1;
    text-shadow: var(--text-glow-cyan);
}

/* Formular Boxen */
.theme-cyan-box { border-top: 4px solid var(--cyan); }
.theme-cyan-box .small-title { color: var(--cyan); letter-spacing: 3px; }

.theme-purple-box { border-top: 4px solid var(--purple); }
.theme-purple-box .column-title { letter-spacing: 3px; }

/* Breakdown Grid (Die Werte unter dem Kreis) */
.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 3rem;
    margin-bottom: 4rem;
}

@media (max-width: 768px) {
    .breakdown-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.breakdown-item { 
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
}

.breakdown-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.04);
}

/* Theme Sync für Breakdown Items */
.breakdown-item.astro { border-color: rgba(56, 189, 248, 0.2); background: linear-gradient(180deg, rgba(56, 189, 248, 0.05) 0%, transparent 100%); }
.breakdown-item.astro:hover { border-color: var(--cyan); box-shadow: 0 15px 40px rgba(56, 189, 248, 0.15); }

.breakdown-item.numero { border-color: rgba(168, 85, 247, 0.2); background: linear-gradient(180deg, rgba(168, 85, 247, 0.05) 0%, transparent 100%); }
.breakdown-item.numero:hover { border-color: var(--purple); box-shadow: 0 15px 40px rgba(168, 85, 247, 0.15); }

.breakdown-item.hd { border-color: rgba(236, 72, 153, 0.2); background: linear-gradient(180deg, rgba(236, 72, 153, 0.05) 0%, transparent 100%); }
.breakdown-item.hd:hover { border-color: #ec4899; box-shadow: 0 15px 40px rgba(236, 72, 153, 0.15); }

.bd-val { font-size: var(--fs-3xl); font-weight: 900; color: var(--text-main); margin-bottom: 2px; }
.bd-max { font-size: var(--fs-sm); color: var(--text-muted); opacity: 0.6; }
.bd-label { 
    font-size: var(--fs-micro); 
    letter-spacing: 2px; 
    color: var(--text-muted); 
    margin-bottom: 1rem; 
    font-weight: 800; 
    text-transform: uppercase; 
}

.breakdown-item.astro .bd-label { color: var(--cyan); }
.breakdown-item.numero .bd-label { color: var(--purple); }
.breakdown-item.hd .bd-label { color: #ec4899; }

/* Progress bar in breakdown items */
.bd-bar { width: 100%; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 0.5rem; overflow: hidden; }
.bd-bar-fill { height: 100%; border-radius: 2px; transition: width 1.5s var(--ease-out-expo); }
.breakdown-item.astro .bd-bar-fill { background: linear-gradient(90deg, var(--cyan), #818cf8); }
.breakdown-item.hd .bd-bar-fill { background: linear-gradient(90deg, #ec4899, #f43f5e); }
.breakdown-item.numero .bd-bar-fill { background: linear-gradient(90deg, #a855f7, #d946ef); }

.purple { color: var(--purple); }
.magenta { color: #ec4899; }

/* --- PREMIUM MATCH CARD DESIGN --- */
.text-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 2.2rem;
    transition: all 0.4s var(--ease-out-expo);
    position: relative;
}

.text-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.04);
}

/* Theme Variations */
.theme-cyan { border-color: rgba(56, 189, 248, 0.2); background: linear-gradient(180deg, rgba(56, 189, 248, 0.05) 0%, transparent 100%); }
.theme-cyan:hover { border-color: var(--cyan); box-shadow: 0 15px 40px rgba(56, 189, 248, 0.15); }
.theme-cyan .card-title { color: var(--cyan); }

.theme-purple { border-color: rgba(168, 85, 247, 0.2); background: linear-gradient(180deg, rgba(168, 85, 247, 0.05) 0%, transparent 100%); }
.theme-purple:hover { border-color: var(--purple); box-shadow: 0 15px 40px rgba(168, 85, 247, 0.15); }
.theme-purple .card-title { color: var(--purple); }

.theme-magenta { border-color: rgba(236, 72, 153, 0.2); background: linear-gradient(180deg, rgba(236, 72, 153, 0.05) 0%, transparent 100%); }
.theme-magenta:hover { border-color: #ec4899; box-shadow: 0 15px 40px rgba(236, 72, 153, 0.15); }
.theme-magenta .card-title { color: #ec4899; }

.theme-red { border-color: rgba(239, 68, 68, 0.2); background: linear-gradient(180deg, rgba(239, 68, 68, 0.05) 0%, transparent 100%); }
.theme-red:hover { border-color: var(--red); box-shadow: 0 15px 40px rgba(239, 68, 68, 0.15); }
.theme-red .card-title { color: var(--red); }

.theme-rose { border-color: rgba(244, 114, 182, 0.2); background: linear-gradient(180deg, rgba(244, 114, 182, 0.05) 0%, transparent 100%); }
.theme-rose:hover { border-color: #f472b6; box-shadow: 0 15px 40px rgba(244, 114, 182, 0.15); }
.theme-rose .card-title { color: #f472b6; }

/* Card Header & Badges */
.card-header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.badge {
    padding: 5px 14px;
    border-radius: 30px;
    font-size: var(--fs-micro);
    font-weight: 900;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.cyan-bg { background: var(--cyan); box-shadow: 0 0 15px rgba(56, 189, 248, 0.4); }
.purple-bg { background: var(--purple); box-shadow: 0 0 15px rgba(168, 85, 247, 0.4); }
.magenta-bg { background: #ec4899; box-shadow: 0 0 15px rgba(236, 72, 153, 0.4); }

/* Elite Match List */
.match-list { list-style: none; padding: 0; margin: 0; }
.match-list li {
    position: relative;
    padding-left: 2.2rem;
    margin-bottom: 1.5rem;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: var(--fs-sm);
}
.match-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: -2px;
    font-size: var(--fs-md);
    transition: all 0.3s;
}
.text-card:hover .match-list li::before { transform: scale(1.2) rotate(15deg); }

.theme-cyan .match-list li::before { color: var(--cyan); }
.theme-purple .match-list li::before { color: var(--purple); }
.theme-magenta .match-list li::before { color: #ec4899; }
.theme-red .match-list li::before { color: var(--red); }
.theme-rose .match-list li::before { color: #f472b6; }

.match-list .highlight { 
    color: var(--text-main); 
    font-weight: 700; 
    display: block; 
    margin-bottom: 0.3rem; 
    letter-spacing: 0.5px;
}

/* Ausrichtung für die Info-SVGs in der Liste */
.info-trigger-match {
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
}
/* --- COSMIC COUNCIL UPGRADE --- */
.cosmic-council {
    margin-top: 4rem;
    padding: 3rem;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.08) 0%, transparent 100%);
    border: 1px dashed rgba(212, 175, 55, 0.4);
    border-radius: 30px;
    position: relative;
    transition: all 0.4s ease;
}

.cosmic-council:hover {
    border-style: solid;
    border-color: var(--gold);
    box-shadow: 0 20px 50px rgba(212, 175, 55, 0.1);
}

.council-title {
    color: var(--gold);
    font-size: var(--fs-lg);
    font-weight: 900;
    letter-spacing: 3px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-transform: uppercase;
}

.council-content {
    color: var(--text-main);
    line-height: 1.8;
    font-size: var(--fs-base);
}

.council-content h4 {
    color: var(--cyan);
    font-size: var(--fs-base);
    margin-top: 2.5rem;
    margin-bottom: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 800;
}

/* 🌈 ENERGETISCHE BRÜCKEN (Composite Channels) */
.bridge-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .bridge-grid { grid-template-columns: 1fr 1fr; } }

.bridge-card { 
    background: rgba(236, 72, 153, 0.05); 
    border: 1px solid rgba(236, 72, 153, 0.2); 
    border-radius: 12px; 
    padding: 1.5rem; 
    transition: transform 0.3s;
}
.bridge-card:hover { transform: translateY(-4px); border-color: var(--magenta); }
.bridge-card--companion { background: rgba(52, 211, 153, 0.05); border-color: rgba(52, 211, 153, 0.2); }
.bridge-card--companion:hover { border-color: #34d399; }
.bridge-card--dominance { background: rgba(148, 163, 184, 0.04); border-color: rgba(148, 163, 184, 0.15); }
.bridge-card--dominance:hover { border-color: #94a3b8; }
.bridge-title { color: var(--magenta); font-weight: 700; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 10px; }
.bridge-text { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-muted); }
.bridge-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 1px; color: rgba(236, 72, 153, 0.6); margin-bottom: 4px; display: block; }

/* 🌈 UNIFIED RANGE SLIDER STYLES (Multi-Thumb Support) */
.range-container {
    position: relative;
    height: 32px;
    width: 100%;
    margin-top: 1rem;
}
/* Track + Fill vertikal mittig in der Container-Höhe — sonst klebt die Linie
   am oberen Rand und der Thumb (auf der Input-Mittelachse) sitzt darunter. */
.range-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.range-fill {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 6px;
    background: var(--grad-cyan);
    border-radius: 10px;
    z-index: 1;
    pointer-events: none;
}

.range-input-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    background: none !important;
    border: none !important;
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    z-index: 2;
}

/* Native Track explizit 6px hoch — gleiche Höhe wie die dekorative .range-track
   hinter dem Input. Dadurch sitzt der Thumb mittig auf der sichtbaren Linie. */
.range-input-field::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent !important;
    border: none;
}
.range-input-field::-moz-range-track {
    height: 6px;
    background: transparent !important;
    border: none;
}

/* Thumbs: Webkit */
.range-input-field::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 2.5px solid var(--magenta);
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
    pointer-events: auto;
    transition: transform 0.2s;
    /* Track 6px, Thumb 20px → Thumb nach oben verschieben, damit er mittig
       auf der Track-Linie sitzt: -(20 - 6) / 2 = -7px */
    margin-top: -7px;
}
.range-input-field::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Thumbs: Firefox */
.range-input-field::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 2.5px solid var(--magenta);
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.4);
    pointer-events: auto;
    transition: transform 0.2s;
    box-sizing: border-box;
}
.range-input-field::-moz-range-thumb:hover { transform: scale(1.15); }

.thumb-right { z-index: 3; }

.tech-detail-item { margin-bottom: 0.8rem; font-size: var(--fs-sm); }

/* --- TABLET BREAKPOINT (768-1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .gradient-title { font-size: var(--fs-3xl); }
    .hd-grid { grid-template-columns: repeat(2, 1fr); }
    .hd-core-grid { grid-template-columns: repeat(3, 1fr); }
    .portal-box { padding: 2rem; }
    .top-nav { padding: 2rem 1rem 1rem; }
    .nav-item { font-size: var(--fs-micro); }
    .nav-links { gap: 0.8rem; }
}

/* --- BODY TEXT UPGRADE --- */
/* Targeted text color upgrade for WCAG AA compliance — excludes dossier (has own theme) */
.page-header p, .portal-box p, .deep-card p,
.text-card p, .analysis-text, .info-row span, .kosmos-cta-hint {
    color: var(--text-secondary);
}

/* --- DEEP HTML (content.db rendered text) -----------------------------
   Centralized canonical styles for HTML rendered from content.db via {@html …}.
   Replaces 12+ scattered local definitions across signatur/tagesenergie/eltern-kind.
   Dossier-Render/Print/Child has its own scoped variant under .dossier-wrapper. */
.deep-html {
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--text-secondary);
}
.deep-html p { margin: 0 0 0.8rem; }
.deep-html p:first-child {
    font-size: var(--fs-micro);
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 1rem;
}
.deep-html p:last-child { margin-bottom: 0; }
.deep-html p:only-child {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 0;
}
.deep-html b, .deep-html strong { color: var(--text-main); font-weight: 700; }
.deep-html em, .deep-html i { font-style: italic; color: var(--text-main); }
.deep-html ul, .deep-html ol { padding-left: 1.5rem; margin: 0 0 0.8rem; }
.deep-html li { margin-bottom: 0.3rem; line-height: 1.6; }
.deep-html h2, .deep-html h3 {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-main);
    margin: 1.2rem 0 0.5rem;
    letter-spacing: 0.2px;
}
.deep-html h2:first-child, .deep-html h3:first-child { margin-top: 0; }
/* .no-title — opt out of the eyebrow style for first paragraph */
.deep-html.no-title p:first-child {
    font-size: inherit;
    color: inherit;
    letter-spacing: 0;
    font-weight: inherit;
    margin-bottom: 0.8rem;
}
/* .compact — tighter spacing for cards */
.deep-html.compact { line-height: 1.6; }
.deep-html.compact p { margin: 0 0 0.5rem; }
.deep-html.compact p:first-child { margin-bottom: 0.6rem; }

/* --- COLLAPSIBLE SECTIONS --- */
.collapsible-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--sp-md) 0;
    user-select: none;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
}
.collapsible-header .chevron {
    transition: transform 0.3s;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.collapsible-header .chevron.open {
    transform: rotate(180deg);
}
.collapsible-content {
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}
.collapsible-content.open {
    max-height: 5000px;
    opacity: 1;
    overflow: visible;
}

/* --- BREADCRUMBS --- */

/* --- STICKY TABLE OF CONTENTS --- */
.sticky-toc {
    position: sticky;
    top: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-lg);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}
.sticky-toc h4 {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    letter-spacing: 2px;
    font-weight: 700;
    margin: 0 0 var(--sp-md) 0;
}
.sticky-toc a {
    display: block;
    padding: var(--sp-xs) 0;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: color 0.2s;
    border-left: 2px solid transparent;
    padding-left: var(--sp-sm);
}
.sticky-toc a:hover, .sticky-toc a.active {
    color: var(--cyan);
    border-left-color: var(--cyan);
}

/* --- FARBLEGENDE --- */
.color-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-lg);
    flex-wrap: wrap;
    padding: var(--sp-sm) var(--sp-lg);
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    margin-bottom: var(--sp-xl);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.color-legend-item {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}
.color-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --- SWIPE CARD (Feed) --- */
@media (max-width: 768px) {
    .swipe-container {
        touch-action: pan-y;
        overflow: hidden;
    }
    .swipe-card {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .swipe-card.swiping-left {
        transform: translateX(-100px) rotate(-5deg);
        opacity: 0.5;
    }
    .swipe-card.swiping-right {
        transform: translateX(100px) rotate(5deg);
        opacity: 0.5;
    }
}

/* --- PROGRESS BAR --- */
.progress-bar-container {
    width: 100%;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    margin: var(--sp-sm) 0;
}
.progress-bar-fill {
    height: 100%;
    background: var(--grad-cyan);
    border-radius: 2px;
    transition: width 0.5s ease;
}
.progress-text {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--sp-xs);
}

/* --- TYPING INDICATOR --- */
.typing-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: var(--sp-sm) var(--sp-md);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-style: italic;
}
.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typing-bounce 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typing-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* --- READ RECEIPTS --- */
.read-receipt {
    font-size: var(--fs-micro);
    color: var(--text-hint);
    display: flex;
    align-items: center;
    gap: 2px;
}
.read-receipt svg { width: 14px; height: 14px; }
.read-receipt.read { color: var(--cyan); }

/* --- CHAT iOS KEYBOARD FIX --- */
@supports (-webkit-touch-callout: none) {
    .chat-input-area {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* --- ONBOARDING TOOLTIP --- */
.onboarding-tooltip {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--cyan);
    border-radius: var(--radius-md);
    padding: var(--sp-md) var(--sp-lg);
    box-shadow: var(--shadow-md), var(--shadow-glow-cyan);
    z-index: 1500;
    max-width: 280px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}
.onboarding-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--cyan);
}
.onboarding-tooltip .tooltip-title {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--sp-xs);
}
.onboarding-tooltip .tooltip-dismiss {
    margin-top: var(--sp-sm);
    font-size: var(--fs-xs);
    color: var(--cyan);
    cursor: pointer;
    text-align: right;
}

/* --- TRUST SIGNALS --- */
.trust-signals {
    display: flex;
    justify-content: center;
    gap: var(--sp-xl);
    flex-wrap: wrap;
    margin: var(--sp-xl) 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
.trust-item {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
}
.trust-item svg { width: 16px; height: 16px; color: var(--green); }

/* --- RANGE SLIDER MOBILE FIX --- */
@media (max-width: 768px) {
    .range-input-container {
        flex-direction: column !important;
        gap: var(--sp-md);
    }
    .range-input-container .range-labels {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* =========================================================
   DESIGN THEMES
   ========================================================= */

/* KOSMOS (Default) — no overrides needed, it's the base */
[data-design="kosmos"] {}

/* NEBULA — warm, ethereal, softer */
[data-design="nebula"] {
    --bg-main: #0d0a1a;
    --bg-card: #151027;
    --bg-input: #120e20;
    --border: #2a1f4a;
    --text-main: #f0e6ff;
    --text-secondary: #c4b5d9;
    --text-muted: #8b7aad;
    --cyan: #6dd5fa;
    --magenta: #f472b6;
    --purple: #c084fc;
    --gold: #fbbf24;
    --green: #34d399;
    --color-self: #6ee7b7;
    --color-partner: #fcd34d;
    --color-together: #f9a8d4;
    --red: #fb7185;
    --success: #34d399;
    --warning: #fbbf24;
    --grad-cyan: linear-gradient(135deg, #6dd5fa, #c084fc);
    --grad-logo: linear-gradient(135deg, #c084fc, #f472b6);
    --text-glow-cyan: 0 0 20px rgba(109, 213, 250, 0.3);
    --text-glow-magenta: 0 0 20px rgba(244, 114, 182, 0.3);
    --shadow-glow-cyan: 0 0 20px rgba(109, 213, 250, 0.2);
    --shadow-glow-magenta: 0 0 20px rgba(244, 114, 182, 0.2);
}
[data-design="nebula"] body {
    background: #0d0a1a;
    background-image: radial-gradient(ellipse at 20% 50%, rgba(192, 132, 252, 0.06) 0%, transparent 50%),
                       radial-gradient(ellipse at 80% 20%, rgba(109, 213, 250, 0.04) 0%, transparent 50%),
                       radial-gradient(ellipse at 50% 80%, rgba(244, 114, 182, 0.04) 0%, transparent 50%);
}
[data-design="nebula"] .gradient-title {
    background: linear-gradient(135deg, #c084fc, #f472b6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
[data-design="nebula"] .btn-gradient {
    background: linear-gradient(135deg, #c084fc, #f472b6) !important;
}
[data-design="nebula"] .btn-outline {
    border-color: rgba(192, 132, 252, 0.4) !important;
}
[data-design="nebula"] .btn-outline:hover {
    border-color: #c084fc !important;
    background: rgba(192, 132, 252, 0.1) !important;
}
[data-design="nebula"] .portal-box,
[data-design="nebula"] .hd-main-box,
[data-design="nebula"] .cosmic-council {
    backdrop-filter: blur(12px);
    background: rgba(21, 16, 39, 0.7) !important;
}
[data-design="nebula"] .data-card,
[data-design="nebula"] .astro-card {
    backdrop-filter: blur(8px);
    background: rgba(18, 14, 32, 0.6) !important;
}
[data-design="nebula"] .top-nav {
    background: rgba(13, 10, 26, 0.85) !important;
    backdrop-filter: blur(16px);
}
[data-design="nebula"] .mobile-bottom-nav {
    background: rgba(13, 10, 26, 0.9) !important;
    backdrop-filter: blur(16px);
}

/* OBSIDIAN — minimal, sharp, high contrast */
[data-design="obsidian"] {
    --bg-main: #050505;
    --bg-card: #0a0a0a;
    --bg-input: #080808;
    --border: #1a1a1a;
    --text-main: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    --cyan: #22d3ee;
    --magenta: #f43f5e;
    --purple: #a78bfa;
    --gold: #eab308;
    --green: #22c55e;
    --color-self: #34d399;
    --color-partner: #f59e0b;
    --color-together: #fb7185;
    --red: #ef4444;
    --success: #22c55e;
    --warning: #eab308;
    --grad-cyan: linear-gradient(135deg, #22d3ee, #a78bfa);
    --grad-logo: linear-gradient(135deg, #22d3ee, #f43f5e);
    --text-glow-cyan: 0 0 12px rgba(34, 211, 238, 0.25);
    --text-glow-magenta: 0 0 12px rgba(244, 63, 94, 0.25);
    --shadow-glow-cyan: 0 0 12px rgba(34, 211, 238, 0.15);
    --shadow-glow-magenta: 0 0 12px rgba(244, 63, 94, 0.15);
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
}
[data-design="obsidian"] body {
    background: #050505;
}
[data-design="obsidian"] .gradient-title {
    background: linear-gradient(135deg, #22d3ee, #f43f5e) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
[data-design="obsidian"] .btn-gradient {
    background: linear-gradient(135deg, #22d3ee, #a78bfa) !important;
    border-radius: 4px !important;
}
[data-design="obsidian"] .btn-outline {
    border-color: rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
}
[data-design="obsidian"] .btn-outline:hover {
    border-color: #22d3ee !important;
    background: rgba(34, 211, 238, 0.05) !important;
}
[data-design="obsidian"] .portal-box,
[data-design="obsidian"] .hd-main-box,
[data-design="obsidian"] .cosmic-council {
    background: #0a0a0a !important;
    border-radius: 8px !important;
    border-color: #1a1a1a !important;
}
[data-design="obsidian"] .data-card,
[data-design="obsidian"] .astro-card {
    background: #080808 !important;
    border-radius: 6px !important;
    border-color: #1a1a1a !important;
}
[data-design="obsidian"] .data-card:hover,
[data-design="obsidian"] .astro-card:hover {
    border-color: #333 !important;
    transform: none !important;
    box-shadow: none !important;
}
[data-design="obsidian"] .text-card {
    border-radius: 6px !important;
    background: #0a0a0a !important;
}
[data-design="obsidian"] .bridge-card {
    border-radius: 6px !important;
}
[data-design="obsidian"] .top-nav {
    background: rgba(5, 5, 5, 0.95) !important;
    border-bottom-color: #1a1a1a !important;
}
[data-design="obsidian"] .mobile-bottom-nav {
    background: rgba(5, 5, 5, 0.95) !important;
}
[data-design="obsidian"] .breakdown-item {
    border-radius: 8px !important;
}
[data-design="obsidian"] .channel-tag {
    border-radius: 4px !important;
}
[data-design="obsidian"] .score-circle-container .resonance-waves { display: none; }
[data-design="obsidian"] .hd-main-box:hover {
    transform: none !important;
    box-shadow: inset 0 0 0 1px #333 !important;
}

/* ============================================================
   Soft-Glow Variant (Phase 1 Test-Variante, Plan 01)
   Aktiviert via [data-design="essenz-soft-glow"] auf <html>,
   gesetzt von src/hooks.server.js wenn admin_config
   essenz_design_variant = 'soft-glow' UND Pfad /(heute|du|verbindungen).

   Nur für /(essenz)/-Routen. Tiefen-Modus + Coach-Workspace
   bleiben unberuehrt (data-design bleibt 'kosmos' dort).

   Token-Overrides cascaden über CSS-Variablen, Element-Overrides
   nutzen tatsaechliche Klassen-Namen aus components/essenz/*.svelte:
   essenz-bottom, essenz-side, essenz-top, essenz-hero-headline,
   essenz-push-card, mood-bubble, essenz-tab-container, essenz-tab-pill,
   trilogy-dots.

   Vollausarbeitung dokumentiert in
   .planning/phases/01-uc1-foundation/01-DESIGN-VARIANT-B.md Pkt 5.
   ============================================================ */
[data-design="essenz-soft-glow"] {
    --bg-main: #0a1228;
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-input: rgba(0, 0, 0, 0.25);
    --border: rgba(255, 255, 255, 0.08);

    --blur-card: 32px;
    --blur-nav: 40px;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    --fw-display: 700;

    --color-self: #5eead4;
    --color-partner: #fde68a;
    --color-together: #f9a8d4;

    --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 60px rgba(56, 189, 248, 0.04);
    --shadow-glow-cyan: 0 0 28px rgba(56, 189, 248, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-glow-magenta: 0 0 28px rgba(236, 72, 153, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Aurora-Pulse-Background (subtile Position-Shift der Radial-Glows) */
[data-design="essenz-soft-glow"] body {
    background: var(--bg-main);
    background-image:
        radial-gradient(ellipse at 18% 12%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 82% 88%, rgba(168, 85, 247, 0.10) 0%, transparent 50%);
    background-size: 110% 110%;
    animation: aurora-pulse 18s var(--ease-smooth) infinite;
}

@keyframes aurora-pulse {
    0%, 100% { background-position: 0% 0%, 100% 100%; }
    50%      { background-position: 8% 4%, 92% 96%; }
}

@media (prefers-reduced-motion: reduce) {
    [data-design="essenz-soft-glow"] body { animation: none; }
}

/* Trilogy-Dots (3-Punkt-Konstellation), ersetzt 2px-Trilogie-Linie.
   Component TrilogyDots.svelte nutzt .trilogy-dot-Wrapper + 3 Spans.
   Wir matchen sowohl die Spec-Variante .trilogy-dots i als auch den
   tatsaechlichen Component-Aufbau. */
[data-design="essenz-soft-glow"] .trilogy-dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

[data-design="essenz-soft-glow"] .trilogy-dots i,
[data-design="essenz-soft-glow"] .trilogy-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c, var(--cyan));
    box-shadow: 0 0 10px var(--c, var(--cyan)), 0 0 4px var(--c, var(--cyan));
    animation: dot-breathe 4s var(--ease-smooth) infinite;
    display: inline-block;
}

[data-design="essenz-soft-glow"] .trilogy-dots i:nth-child(2),
[data-design="essenz-soft-glow"] .trilogy-dots .dot:nth-child(2) { animation-delay: 1.3s; }

[data-design="essenz-soft-glow"] .trilogy-dots i:nth-child(3),
[data-design="essenz-soft-glow"] .trilogy-dots .dot:nth-child(3) { animation-delay: 2.6s; }

@keyframes dot-breathe {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    [data-design="essenz-soft-glow"] .trilogy-dots i,
    [data-design="essenz-soft-glow"] .trilogy-dots .dot { animation: none; }
}

/* 2px-Trilogie-Linie ausblenden wo Soft-Glow uebernimmt (gradient-line
   ist position:fixed in EssenzShell.svelte, sichtbar als globaler Strip
   am Top). */
[data-design="essenz-soft-glow"] .essenz-gradient-line { display: none; }

/* Frosted Hero-Card (TrilogieSyntheseHero und weitere
   Essenz-Hero-Karten). */
[data-design="essenz-soft-glow"] .essenz-hero,
[data-design="essenz-soft-glow"] .essenz-card {
    background: var(--bg-card);
    backdrop-filter: blur(var(--blur-card));
    -webkit-backdrop-filter: blur(var(--blur-card));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Hero-Headline weiss + Cyan-Glow statt gradient-text.
   Component nutzt .essenz-hero-headline; Spec listet auch .hero-headline. */
[data-design="essenz-soft-glow"] .essenz-hero-headline,
[data-design="essenz-soft-glow"] .hero-headline {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    color: var(--text-main);
    text-shadow: 0 0 40px rgba(56, 189, 248, 0.45);
    font-weight: var(--fw-display);
    letter-spacing: -0.4px;
}

/* Card-Hover, Scale statt Translate (Push-Cards + interaktive Cards). */
[data-design="essenz-soft-glow"] .essenz-card-interactive:hover,
[data-design="essenz-soft-glow"] .essenz-push-card:hover {
    transform: scale(1.015);
    box-shadow: var(--shadow-md), 0 0 36px rgba(56, 189, 248, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

[data-design="essenz-soft-glow"] .essenz-card-interactive:active,
[data-design="essenz-soft-glow"] .essenz-push-card:active {
    transform: scale(0.985);
    transition-duration: 120ms;
}

/* Bottom-Nav, höher (76px), stärker frosted. Component-Klasse heisst
   .essenz-bottom (nicht .essenz-nav-bottom wie in der Spec gelistet). */
[data-design="essenz-soft-glow"] .essenz-bottom {
    height: calc(76px + var(--safe-bottom));
    background: rgba(10, 18, 40, 0.85);
    backdrop-filter: blur(var(--blur-nav));
    -webkit-backdrop-filter: blur(var(--blur-nav));
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Sidebar-Variante (Desktop), stärker frosted, breiter (264px).
   Component-Klasse heisst .essenz-side. */
[data-design="essenz-soft-glow"] .essenz-side {
    width: 264px;
    background: rgba(10, 18, 40, 0.7);
    backdrop-filter: blur(var(--blur-nav));
    -webkit-backdrop-filter: blur(var(--blur-nav));
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* Top-Bar mobile, frosted abgestimmt. */
[data-design="essenz-soft-glow"] .essenz-top {
    background: rgba(10, 18, 40, 0.75);
    backdrop-filter: blur(var(--blur-nav));
    -webkit-backdrop-filter: blur(var(--blur-nav));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* MoodBubble-Variante, vollrund + frosted, magenta-Halo wenn aktiv. */
[data-design="essenz-soft-glow"] .mood-bubble {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-design="essenz-soft-glow"] .mood-bubble.active {
    background: rgba(236, 72, 153, 0.35);
    box-shadow: var(--shadow-glow-magenta);
    border-color: rgba(236, 72, 153, 0.45);
}

/* Tab-Switch (VerbindungenTabSwitch), vollrund + frosted, cyan-Active. */
[data-design="essenz-soft-glow"] .essenz-tab-container {
    padding: 6px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

[data-design="essenz-soft-glow"] .essenz-tab-pill {
    border-radius: var(--radius-pill);
    padding: 10px 22px;
    transition: all 320ms var(--ease-out-expo);
}

[data-design="essenz-soft-glow"] .essenz-tab-pill.active {
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.35);
    color: var(--cyan);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    [data-design="essenz-soft-glow"] .essenz-tab-pill { transition: none; }
}

/* Landscape orientation fixes */
@media (orientation: landscape) and (max-height: 500px) {
    .page-header {
        padding-top: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    .gradient-title {
        font-size: var(--fs-md) !important;
    }
    .portal-box, .theme-purple-box, .theme-cyan-box {
        padding: 1rem !important;
    }
}

/* ─── Print-Layer (Dossier-PDF) ─────────────────────────────────────────
   Globale Druckregeln + Print-Komponenten-Klassen (Mockup-Struktur).
   Schritt 2 des Print-Refactors: .section-header / .theme-block / .fact-
   grid / .fact-cell / .deep-block werden hier global definiert, sodass
   sowohl /dossier/render als auch /dossier/print die gleiche Druck-
   Geometrie konsumieren. Mockup-Referenz: docs/design-system/preview/
   dossier-print.html. data-pillar-Akzent-Mapping läuft unabhängig von
   @media, sodass die Akzentfarben auch im Web-Browse sichtbar sind. */

/* Akzent pro Säule, vom data-pillar-Attribut der Seite vererbt.
   --accent-bg ist eine 5%-opake rgba-Variante derselben Pillar-Farbe,
   damit theme-block / accent-Hintergruende ohne color-mix() auskommen.
   Hintergrund: html2canvas (im /render-Pfad für PDF-Export) versteht
   weder color-mix noch oklch — daher rgba mit harten RGB-Werten. */
.dossier-page[data-pillar="astro"],
.dossier-page-header[data-pillar="astro"]   { --accent: var(--pillar-astro);  --accent-bg: rgba(56, 189, 248, 0.05); }
.dossier-page[data-pillar="hd"],
.dossier-page-header[data-pillar="hd"]      { --accent: var(--pillar-hd);     --accent-bg: rgba(236, 72, 153, 0.05); }
.dossier-page[data-pillar="numero"],
.dossier-page-header[data-pillar="numero"]  { --accent: var(--pillar-numero); --accent-bg: rgba(168, 85, 247, 0.05); }
.dossier-page[data-pillar="relate"],
.dossier-page-header[data-pillar="relate"]  { --accent: var(--pillar-relate); --accent-bg: rgba(212, 175, 55, 0.05); }

/* Default-Akzent für Seiten ohne data-pillar (Cover, TOC, Impuls). */
.dossier-document {
    --accent: var(--cyan);
}

/* .dossier-page = Sektion-Marker. Page-break wird via @media print gesteuert
   (page-break-after: always), so dass jede Sektion auf einer neuen A4-Seite
   beginnt. Section-interne Pagination uebernehmen die @page-Regeln (s.u.):
   bei langem Content (TOC mit 20+ Items, HD-Variablen-Vertiefung) bricht
   Chromium natuerlich auf weitere A4-Seiten um, mit Footer pro Seite via
   @page-Margin-Boxes. */
.dossier-page {
    position: relative;
}

/* Coach-Watermark (Schritt 4a — Rendering-Layer).
   Wird per data-watermark="<text>" auf .dossier-document aktiviert. Text
   kommt aus coach_branding.watermark_text bzw. praxis_name (Fallback).
   Positionierung via position: fixed, sodass Puppeteer das Element auf
   JEDER gedruckten Seite repliziert — kein per-Sektion-Plumbing.
   Cover wird per .cover isolation: isolate + opake background-color
   maskiert (siehe DossierCover.svelte). Impuls bleibt absichtlich
   sichtbar als Coach-Branding-Closer.
   Farbe: rgba mit hartem RGB-Wert von --gold #d4af37 — color-mix(oklch)
   wird von html2canvas (PDF-Pfad in /render) nicht unterstützt. */
.dossier-document[data-watermark]::before {
    content: attr(data-watermark);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-32deg);
    font-size: 96pt;
    font-weight: 800;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.05);
    pointer-events: none;
    z-index: 1;
    white-space: nowrap;
    user-select: none;
}

/* Cover maskiert Watermark via opaker Background + isolation. Damit
   bleibt das Cover „clean" trotz fixed-positioniertem Watermark im
   Document-Hintergrund. */
.dossier-page.cover {
    isolation: isolate;
}
.dossier-page.cover > * {
    position: relative;
    z-index: 2;
}

/* Section-Header-Komposition (Mockup-Style). Wird von DossierPageHeader
   gerendert und ersetzt das alte .header-section / .page-num / .h-line
   Trio. Die 64pt Hintergrund-Pagenum (.section-num) lebt vom Akzent-
   freien --print-pagenum-bg-color. Der Akzent landet auf .section-rule. */
.dossier-section-header {
    display: flex;
    align-items: baseline;
    gap: 6mm;
    margin-bottom: 6mm;
    position: relative;
    z-index: 2;
}
.dossier-section-header .section-num {
    font-size: 64pt;
    font-weight: 900;
    color: var(--print-pagenum-bg-color);
    line-height: 0.85;
    letter-spacing: -3px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.dossier-section-header .section-title-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2mm;
    align-self: end;
    padding-bottom: 2mm;
}
.dossier-section-header .section-eyebrow {
    font-size: 9pt;
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0;
}
.dossier-section-header .section-title {
    font-size: 22pt;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0;
    line-height: 1.1;
}
.dossier-section-header .section-rule {
    height: 2px;
    margin: 0 0 6mm;
    background: linear-gradient(90deg, var(--accent), transparent);
    border: 0;
    position: relative;
    z-index: 2;
}

/* Print-relevante Bausteine. --accent-bg ist die html2canvas-kompatible
   rgba-Variante von --accent 5%. Fallback rgba(255,255,255,0.04) für
   data-pillar-lose Container (.dossier-document ohne pillar-Attribut). */
.dossier-document .theme-block {
    padding: 6mm 7mm;
    background: var(--accent-bg, rgba(255, 255, 255, 0.04));
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    margin-bottom: 5mm;
    break-inside: avoid;
    page-break-inside: avoid;
}
.dossier-document .theme-block .label {
    font-size: 8pt;
    letter-spacing: 2px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 2mm;
    display: block;
}
.dossier-document .theme-block h3 {
    margin: 0 0 3mm;
    font-size: 16pt;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.3px;
}
.dossier-document .theme-block p {
    margin: 0;
    font-size: 10pt;
    color: #cbd5e1;
    line-height: 1.7;
    text-wrap: pretty;
}
.dossier-document .theme-block p + p { margin-top: 3mm; }
.dossier-document .theme-block strong {
    color: #fff;
    font-weight: 700;
}

.dossier-document .fact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3mm;
    margin: 0 0 5mm;
    break-inside: avoid;
    page-break-inside: avoid;
}
.dossier-document .fact-cell {
    padding: 4mm 5mm;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.dossier-document .fact-cell .label {
    font-size: 7.5pt;
    letter-spacing: 1.6px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 2mm;
    display: block;
}
.dossier-document .fact-cell .value {
    font-size: 12pt;
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -0.2px;
}
.dossier-document .fact-cell .value small {
    display: block;
    font-size: 8.5pt;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 1mm;
    letter-spacing: 0.2px;
}

/* Dossier-Komponenten-Styles (geteilt zwischen /render und /print).
   Vorher in render/+page.svelte als :global() — jetzt zentral hier,
   damit print-Route identische Optik bekommt ohne 700 Zeilen Duplikat. */

/* Section header (alt-Stil, von DossierSingle / DossierHDSection genutzt). */
.dossier-document .header-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}
.dossier-document .page-num {
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    line-height: 1;
}
.dossier-document .header-section h2 {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 5px;
    margin: 0;
    color: #fff;
}
.dossier-document .h-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--accent, var(--cyan)), transparent);
}

/* Card-Komposition. */
.dossier-document .main-card {
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 2rem;
}
.dossier-document .main-card h3 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 1rem 0;
    color: var(--accent, var(--cyan));
}
.dossier-document .description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #94a3b8;
}

.dossier-document .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.dossier-document .card.secondary {
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dossier-document .card.secondary h4 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: #fff;
}
.dossier-document .card-desc {
    font-size: 0.78rem;
    line-height: 1.55;
    color: #64748b;
    margin: 0;
}

.dossier-document .label {
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: #94a3b8;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1rem;
    display: block;
}

/* Berechnungsangaben (DossierCalcBasis). */
.dossier-document .calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 4rem;
}
.dossier-document .calc-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
}
.dossier-document .calc-value {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-top: 0.3rem;
}

/* Planet-Tafel. */
.dossier-document .planet-table-section { margin-top: 1rem; }
.dossier-document .planet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.dossier-document .planet-table thead th {
    text-align: left;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: #94a3b8;
    font-weight: 900;
    text-transform: uppercase;
    padding: 0.8rem 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}
.dossier-document .planet-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.dossier-document .planet-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}
.dossier-document .planet-table tbody td {
    padding: 0.75rem 1rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.dossier-document .planet-table .row-highlight td {
    color: #fff;
    font-weight: 600;
}
.dossier-document .planet-table .row-highlight {
    background: rgba(56, 189, 248, 0.04);
}
.dossier-document .planet-table .sign-col {
    color: var(--cyan);
    font-weight: 700;
}

/* Section-Intro / Fortsetzung-Marker. */
.dossier-document .section-intro {
    font-size: 0.82rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 2rem;
    max-width: 700px;
    font-style: italic;
}
.dossier-document .fortsetzung-marker {
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    text-transform: uppercase;
    font-weight: 600;
}

/* Deep content blocks (HTML aus content.db, gerendert via {@html}). */
.dossier-document .deep-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.dossier-document .deep-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
    overflow: hidden;
    break-inside: avoid;
    page-break-inside: avoid;
}
.dossier-document .deep-block.accent-bar {
    border-left: 3px solid var(--accent, var(--cyan));
}
.dossier-document .deep-html {
    font-size: 0.82rem;
    line-height: 1.65;
    color: #94a3b8;
}
.dossier-document .deep-html p { margin: 0 0 0.8rem; }
.dossier-document .deep-html p:first-child {
    font-size: 0.7rem;
    color: #94a3b8;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin-bottom: 1rem;
}
.dossier-document .deep-html p:last-child { margin-bottom: 0; }
.dossier-document .deep-html b { color: #cbd5e1; font-weight: 700; }
.dossier-document .deep-html.no-title p:first-child {
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
    font-weight: inherit;
    margin-bottom: 0.8rem;
}

/* HD-Variables. */
.dossier-document .var-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.dossier-document .var-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    flex: 1;
    min-width: 140px;
}
.dossier-document .var-label {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: #94a3b8;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}
.dossier-document .var-value { font-size: 1rem; font-weight: 700; color: #fff; }
.dossier-document .var-hint {
    display: block;
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 0.2rem;
    font-style: italic;
}

/* Astro-Hero (Sonne/Mond/Aszendent Kreise). */
.dossier-document .astro-stack { display: flex; flex-direction: column; gap: 2.5rem; }
.dossier-document .astro-item { display: flex; gap: 2rem; }
.dossier-document .icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.dossier-document .astro-content h3 {
    font-size: 1.5rem;
    margin: 0 0 0.8rem 0;
    color: var(--purple);
}

/* Numero-Hero. */
.dossier-document .numero-hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.dossier-document .big-number {
    font-size: 10rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, var(--purple), transparent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.5;
    margin-bottom: -1rem;
}
.dossier-document .numero-text h3 {
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

/* Year-Overview Months. */
.dossier-document .months-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.dossier-document .month-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    break-inside: avoid;
    page-break-inside: avoid;
}
.dossier-document .month-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.dossier-document .month-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: #cbd5e1;
}
.dossier-document .month-num {
    font-size: 1.2rem;
    font-weight: 900;
}
.dossier-document .month-text {
    font-size: 0.75rem;
    color: #94a3b8;
    line-height: 1.55;
}

/* Cosmic Counsel (Impuls-Closing). */
.dossier-document .cosmic-counsel { max-width: 700px; margin: 0 auto; }
.dossier-document .cosmic-counsel p {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #94a3b8;
    margin-bottom: 1.5rem;
    text-align: left;
    hyphens: manual;
    word-break: normal;
    overflow-wrap: break-word;
}
.dossier-document .cosmic-counsel b { color: #e2e8f0; font-weight: 700; }
.dossier-document .cosmic-counsel p:first-child {
    font-size: 1.15rem;
    color: #cbd5e1;
}

/* Cover: pre-title / user-name / brand. */
.dossier-document .pre-title {
    font-size: 1.2rem;
    letter-spacing: 8px;
    color: var(--cyan);
    display: block;
    margin-bottom: 0.5rem;
}
.dossier-document .user-name {
    font-size: 5rem;
    font-weight: 900;
    margin: 0;
    line-height: 0.9;
    letter-spacing: -2px;
}
.dossier-document .name-highlight {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--purple);
    margin-top: 1rem;
}
.dossier-document .brand-badge {
    font-size: 0.7rem;
    letter-spacing: 6px;
    color: #94a3b8;
    margin-bottom: 2rem;
    font-weight: 900;
}
.dossier-document .divider-gold {
    width: 80px;
    height: 3px;
    background: var(--grad-gold, linear-gradient(90deg, #d4af37, #f59e0b));
    margin: 4rem auto;
    border-radius: 10px;
}
.dossier-document .meta-item .label {
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: #444;
    font-weight: 900;
    margin-bottom: 0.5rem;
    display: block;
}
.dossier-document .meta-item .val {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* CSS Paged Media: Full-Bleed A4, KEINE weissen Papier-Raender.
   Architektur: 1 .dossier-page = 1 A4-Seite, full-bleed dunkler Hintergrund
   wie in der Coach-Preview (/soul-kosmos/coach/dossier/[id]). Inhalt sitzt
   mit Innen-Padding (3.5rem 4rem ≈ 14mm 17mm) im dunklen Panel.

   Wichtig: @page margin: 0 — sonst macht Chromium weisse Streifen oben/
   unten/links/rechts. Footer (Brand-Mark + "SEITE N") rendert nicht mehr
   über @bottom-left/@bottom-right Margin-Boxes (die brauchen >0 Margins),
   sondern als ::before/::after innerhalb der .dossier-page selbst, damit
   sie auf dem dunklen Hintergrund sichtbar bleiben. */
/* @page Margin: vertikale 14mm Marge gibt jeder physisch generierten
   A4-Seite (auch denen aus Auto-Page-Breaks bei langen Sektionen) einen
   konsistenten Atemraum am Top und Bottom. Lateral 0 für Full-Bleed.
   Der dunkle Hintergrund (html/body) faerbt diesen Margin-Bereich, sodass
   der User keinen weissen Streifen sieht — Chromium uebernimmt bei
   print-color-adjust:exact die html-bg auch in @page-Margin-Box.
   Cover braucht 0 Margin (full-bleed Hero), das ueberschreibt @page :first. */
@page {
    size: A4;
    margin: 14mm 0;
    background-color: #111827;
}
@page :first {
    margin: 0;
}

@media print {
    html, body {
        margin: 0;
        padding: 0;
        background: var(--bg-card, #111827);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    /* Box-sizing border-box auf den ganzen Dossier-Subtree, damit Padding
       in mm-Einheiten konsistent IN den deklarierten Dimensions sitzt. */
    .dossier-document,
    .dossier-document * {
        box-sizing: border-box;
    }
    .dossier-document {
        margin: 0;
        gap: 0;
    }

    /* .dossier-page = Sektion-Marker. Full-Bleed dunkler Hintergrund
       (var(--bg-card)) wie in der Coach-Preview. min-height nutzt
       die nutzbare A4-Höhe (297 - 2*14 = 269mm) damit kurze Sektionen
       die Page fuellen. Laengere Sektionen ueberlaufen automatisch in
       weitere A4-Seiten, dort sorgt @page margin für Top/Bottom-Padding.
       Lateral 16mm Padding (= insgesamt 32mm Innenabstand) im Block selbst.
       Vertikales Padding nur 4mm — der Rest kommt von @page margin. */
    .dossier-page {
        width: 210mm;
        min-height: 269mm;
        margin: 0;
        padding: 4mm 16mm;
        position: relative;
        background-color: var(--bg-card, #111827);
        background-image: var(--wm-url, none);
        background-size: 600px 180px;
        background-repeat: repeat;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        page-break-after: always;
        break-after: page;
        /* clone lässt den Background auf jedem Fragment einer langen
           Sektion (z.B. TOC über 3 Seiten) neu zeichnen, sonst paintet
           Chromium nur das erste Fragment, der Rest zeigt body-bg. */
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    .dossier-page:last-child {
        page-break-after: auto;
        break-after: auto;
    }

    /* Cover: clean, eigene Hintergrund-Glows. Volle 297mm Höhe weil
       @page :first margin 0 setzt. Eigenes Padding 16mm seitlich. */
    .dossier-page.cover {
        height: 297mm;
        min-height: 297mm;
        padding: 0;
        overflow: hidden;
        background:
            radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 50%),
            radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.12), transparent 50%),
            var(--bg-card, #111827);
    }

    /* break-inside: avoid hält themen-/deep-Bloecke zusammen. Wenn ein
       Block nicht auf die aktuelle Seite passt, wird er komplett auf die
       naechste verschoben statt mittendrin zerschnitten. */
    .theme-block,
    .deep-block,
    .fact-cell {
        widows: 3;
        orphans: 3;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* TOC-Pagination: Kategorie-Header darf nicht als letztes Element
       auf einer Seite stehen, sonst landet ein einzelnes Item alleine
       auf der naechsten Seite (sichtbares Beispiel: ABSCHLUSS endet
       Seite 3, "Kosmischer Impuls" alleine auf Seite 4). break-after
       avoid + break-before avoid funktionieren in Chromium nur in
       Kombination, deshalb beide Richtungen setzen. */
    .toc-cat-header {
        break-after: avoid-page;
        page-break-after: avoid;
    }
    .toc-cat-header + .toc-item {
        break-before: avoid-page;
        page-break-before: avoid;
    }

    /* Bodygraph-Page: PageHeader + Intro + SVG + Legende müssen zusammen
       auf eine A4-Seite (269mm Nutzhoehe). Budget:
       Header ~22mm + Intro ~8mm + SVG 170mm + Margin 4mm + Legend 12mm
       = ~216mm, sicher unter 269mm. SVG-Höhe via Container-Höhe deckeln
       (max-height auf SVG selbst greift bei width:100%/height:auto nicht).
       break-inside: avoid auf der ganzen .dossier-page.hd-bodygraph waere
       hier kontraproduktiv (gesamte Sektion darf wenn noetig page-breaken). */
    .dossier-document .hd-chart-wrap {
        max-width: 150mm;
        margin: 0 auto;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .dossier-document .hd-svg {
        width: 100%;
        height: auto;
        max-height: 170mm;
        display: block;
    }
    .dossier-document .hd-info {
        margin-top: 4mm;
    }
    .dossier-document .hd-legend {
        padding: 6mm 8mm;
        gap: 4mm 10mm;
    }
}