/* ============================================================
   human-design – Theme über Bootstrap 5.3
   Dunkle, ruhige, mystische Anmutung. Bootstrap liefert Grid/
   Komponenten; das Aussehen wird hier via CSS-Variablen + eigene
   Schriften überschrieben. Schriften lokal (DSGVO).
   ============================================================ */

/* ---------- Schriften (self-hosted) ---------- */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('/assets/vendor/fonts/cormorant-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('/assets/vendor/fonts/cormorant-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/vendor/fonts/inter-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal; font-weight: 500; font-display: swap;
    src: url('/assets/vendor/fonts/inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal; font-weight: 600; font-display: swap;
    src: url('/assets/vendor/fonts/inter-600.woff2') format('woff2');
}

/* ---------- Variablen: gemeinsame BS-Bindings + Schriften ----------
   Die eigentliche Palette liegt in den Theme-Blöcken unten
   ([data-bs-theme="dark"] / [data-bs-theme="light"]). Die --bs-*-
   Bindings referenzieren --hd-*, das je aktivem Theme cascaded. */
:root {
    --bs-body-bg:          var(--hd-bg);
    --bs-body-color:       var(--hd-text);
    --bs-primary:          var(--hd-primary);
    --bs-primary-rgb:      var(--hd-primary-rgb);
    --bs-border-color:     var(--hd-border);
    --bs-link-color:       var(--hd-link);
    --bs-link-hover-color: var(--hd-link-hover);
    --bs-emphasis-color:   var(--hd-text);

    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --hd-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ---------- Dunkles Theme (Signatur: mystisch, Violett/Gold) ---------- */
[data-bs-theme="dark"] {
    --hd-bg:        #0d0f17;
    --hd-bg-2:      #11131d;
    --hd-surface:   #171a27;
    --hd-surface-2: #1d2030;
    --hd-text:      #ece9f5;
    --hd-muted:     #9b97b6;
    --hd-primary:   #8a7bf5;
    --hd-primary-d: #6a5ae0;
    --hd-primary-rgb: 138, 123, 245;
    --hd-accent:    #e0bd7e;
    --hd-navy:      #ece9f5;            /* Headings im Dunklen = heller Text */
    --hd-border:    #282b3e;
    --hd-header-bg: rgba(13, 15, 23, 0.82);
    --hd-link:       var(--hd-accent);
    --hd-link-hover: #efd6a4;
    /* Semantische Ampel (getrennt vom Akzent) – auf Dunkel lesbar aufgehellt */
    --hd-good:        #4fb286;
    --hd-good-rgb:    79, 178, 134;
    --hd-warning:     #e0b35a;
    --hd-warning-rgb: 224, 179, 90;
    --hd-danger:      #e57373;
    --hd-danger-rgb:  229, 115, 115;
}

/* ---------- Helles Theme (Google-clean + humdes-Navy + Gold) ---------- */
[data-bs-theme="light"] {
    --hd-bg:        #ffffff;
    --hd-bg-2:      #f8f9fa;
    --hd-surface:   #ffffff;
    --hd-surface-2: #f1f3f4;
    --hd-text:      #202124;
    --hd-muted:     #5f6368;
    --hd-primary:   #1a73e8;            /* Google-Blau */
    --hd-primary-d: #174ea6;
    --hd-primary-rgb: 26, 115, 232;
    --hd-accent:    #c79a55;            /* Gold */
    --hd-navy:      #252b5e;            /* humdes-Navy für Überschriften */
    --hd-border:    #dadce0;
    --hd-header-bg: rgba(255, 255, 255, 0.85);
    --hd-link:       #1a73e8;
    --hd-link-hover: #174ea6;
    /* Semantische Ampel (getrennt vom Akzent) – auf Weiß satt/kontrastreich */
    --hd-good:        #1e8e5a;
    --hd-good-rgb:    30, 142, 90;
    --hd-warning:     #b8860b;
    --hd-warning-rgb: 184, 134, 11;
    --hd-danger:      #c5221f;
    --hd-danger-rgb:  197, 34, 31;
}

/* ---------- Basis ---------- */
body {
    background: var(--hd-bg);
    color: var(--hd-text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Kosmische Hintergrund-Ebene (fix, hinter allem) ---------- */
.cosmic-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cosmic-bg .cb-aurora { position: absolute; inset: -10%; display: block; }
.cosmic-bg .cb-aurora {
    background:
        radial-gradient(1200px 700px at 82% -8%, rgba(138,123,245,0.20), transparent 58%),
        radial-gradient(1000px 620px at 8% 8%,  rgba(96,80,224,0.14),  transparent 55%),
        radial-gradient(1100px 700px at 12% 102%, rgba(224,189,126,0.10), transparent 55%),
        radial-gradient(900px 600px at 100% 80%, rgba(138,123,245,0.10), transparent 60%);
    filter: saturate(1.05);
}

/* Sternenhimmel-Canvas: sitzt im oberen Header-Bereich (Navbar+Hero), beide
   Themes (die Farben kommen aus dem JS-Palettenwechsel). */
.header-fx {
    position: absolute; top: 0; left: 0; width: 100%;
    height: min(100vh, 820px);
    z-index: -1; pointer-events: none;
    -webkit-mask: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.no-js .header-fx { display: none; }
/* zarte Vignette für Tiefe */
body::after {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(130% 100% at 50% 0%, transparent 60%, rgba(0,0,0,0.45) 100%);
}

h1, h2, h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--hd-font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.12;
}
.display-3, .display-4 { letter-spacing: 0.005em; }
.lead { color: var(--hd-muted); font-weight: 400; }
.text-muted, .text-secondary { color: var(--hd-muted) !important; }

a { text-decoration: none; }
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.eyebrow {
    text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem;
    font-weight: 600; color: var(--hd-accent); font-family: 'Inter', sans-serif;
}
hr { border-color: var(--hd-border); opacity: 1; }

/* ---------- Navbar ---------- */
.site-header {
    background: var(--hd-header-bg);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hd-border);
    position: sticky; top: 0; z-index: 1020;
}
.site-header .navbar-brand {
    font-family: var(--hd-font-display);
    font-size: 1.5rem; font-weight: 600; color: var(--hd-text);
    display: flex; align-items: center; gap: 0.55rem;
}
.site-header .navbar-brand img { width: 30px; height: 30px; }
.site-header .navbar-brand .brand-accent { color: var(--hd-accent); }
/* Marken-Claim neben dem Logo (ab Desktop, per d-none d-lg-inline im Markup). */
.site-header .navbar-claim {
    font-family: var(--hd-font-display);
    font-size: 1rem; color: var(--hd-muted);
    margin-left: 0.75rem; padding-left: 0.75rem;
    border-left: 1px solid var(--hd-border);
    white-space: nowrap;
}
.navbar .nav-link { color: var(--hd-muted); font-size: 0.95rem; transition: color .15s; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--hd-text); }
.dropdown-menu {
    --bs-dropdown-bg: var(--hd-surface);
    --bs-dropdown-border-color: var(--hd-border);
    --bs-dropdown-link-color: var(--hd-muted);
    --bs-dropdown-link-hover-bg: var(--hd-surface-2);
    --bs-dropdown-link-hover-color: var(--hd-text);
    --bs-dropdown-link-active-bg: var(--hd-primary-d);
}

/* ---------- Buttons ---------- */
.btn { border-radius: 0.6rem; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--hd-primary); --bs-btn-border-color: var(--hd-primary);
    --bs-btn-hover-bg: var(--hd-primary-d); --bs-btn-hover-border-color: var(--hd-primary-d);
    --bs-btn-active-bg: var(--hd-primary-d);
    box-shadow: 0 6px 22px -8px rgba(138,123,245,0.7);
}
.btn-outline-light {
    --bs-btn-color: var(--hd-text); --bs-btn-border-color: var(--hd-border);
    --bs-btn-hover-bg: var(--hd-surface-2); --bs-btn-hover-border-color: var(--hd-primary);
    --bs-btn-hover-color: var(--hd-text);
}

/* ---------- Akzente ---------- */
.text-accent { color: var(--hd-accent) !important; }
.link-accent { color: var(--hd-accent); }
.link-accent:hover { color: #efd6a4; }
/* Sprachumschalter: EIN Element mit dem Code der anderen Sprache
   (Navigations-Standard). Sieht aus wie der Theme-Knopf daneben. */
.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: .25rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--hd-muted);
    text-decoration: none;
    border-radius: .5rem;
    transition: color .15s ease, background-color .15s ease;
}
.lang-toggle:hover, .lang-toggle:focus-visible { color: var(--hd-text); background: var(--hd-surface-2, rgba(127,127,127,.12)); }

/* ---------- Karten ---------- */
.card-soft {
    position: relative;
    background: linear-gradient(180deg, rgba(29,32,48,0.72) 0%, rgba(17,19,29,0.66) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--hd-border);
    border-radius: 1rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* feine Verlaufs-Hairline oben */
.card-soft::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(140deg, rgba(138,123,245,0.45), transparent 40%, rgba(224,189,126,0.25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0.7; pointer-events: none;
}
a.card-soft, .card-soft a { color: inherit; }
a.card-soft:hover, .card-soft.hoverable:hover {
    transform: translateY(-4px);
    border-color: rgba(138,123,245,0.6);
    box-shadow: 0 24px 50px -24px rgba(0,0,0,0.85), 0 0 32px -10px rgba(138,123,245,0.35);
}
.card { --bs-card-bg: transparent; --bs-card-border-color: var(--hd-border); }
.icon-badge {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.75rem; background: rgba(138,123,245,0.14);
    border: 1px solid rgba(138,123,245,0.3); color: var(--hd-accent); font-size: 1.25rem;
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero .mandala {
    position: absolute; pointer-events: none; color: var(--hd-primary);
    opacity: 0.14; width: 820px; height: 820px; right: -240px; top: -300px;
    transform-origin: center;
    animation: hdSpin 160s linear infinite;
    -webkit-mask: radial-gradient(circle, #000 55%, transparent 78%);
            mask: radial-gradient(circle, #000 55%, transparent 78%);
}
@keyframes hdSpin { to { transform: rotate(360deg); } }
.hero .bodygraph {
    width: 100%; max-width: 320px;
    filter: drop-shadow(0 24px 60px rgba(138,123,245,0.35));
}
.hero-divider {
    position: relative; height: 1px; border: 0; margin-block: 0;
    background: linear-gradient(90deg, transparent, var(--hd-border) 30%, var(--hd-border) 70%, transparent);
}
.hero-divider::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
    transform: translate(-50%,-50%) rotate(45deg);
    background: var(--hd-accent); box-shadow: 0 0 14px 2px rgba(224,189,126,0.6);
}

/* ---------- Lange Inhaltstexte ---------- */
.content-body { color: var(--hd-text); font-size: 1.04rem; line-height: 1.85; }
.content-body h3 {
    font-family: var(--hd-font-display); font-weight: 600;
    font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--hd-text);
}
.content-body p { margin-bottom: 1.1rem; }
.content-body.dropcap > p:first-of-type::first-letter {
    font-family: var(--hd-font-display); font-size: 3.1rem; line-height: 0.8;
    float: left; padding: 0.1em 0.12em 0 0; color: var(--hd-accent);
}

/* Karte für Reader-Inhalte */
.prose-card {
    background: linear-gradient(180deg, var(--hd-surface) 0%, var(--hd-bg-2) 100%);
    border: 1px solid var(--hd-border); border-radius: 1.1rem;
    padding: clamp(1.25rem, 3vw, 2.4rem);
}

/* ---------- Tabellen ---------- */
.table {
    --bs-table-color: var(--hd-text); --bs-table-bg: transparent;
    --bs-table-border-color: var(--hd-border);
}
.table > :not(caption) > * > * { background: transparent; }

/* ---------- Badges / Preis ---------- */
.price-badge {
    display: inline-block; background: rgba(224,189,126,0.12);
    border: 1px solid rgba(224,189,126,0.5); color: var(--hd-accent);
    border-radius: 999px; padding: 0.18rem 0.7rem; font-weight: 600;
    font-size: 0.92rem; white-space: nowrap;
}
.badge.text-bg-dark { background: var(--hd-surface-2) !important; }

/* ---------- Demo-Banner ---------- */
.demo-banner {
    background: linear-gradient(90deg, rgba(224,189,126,0.16), rgba(138,123,245,0.12));
    border-bottom: 1px solid var(--hd-border);
    color: var(--hd-text); font-size: 0.85rem; padding-block: 0.4rem;
}
.demo-banner a { color: var(--hd-accent); }

/* Admin-Vorschau "Als Mitglied ansehen": deutlich abgesetzter Hinweisstreifen. */
.preview-banner {
    background: var(--hd-navy, #26315f);
    color: #fff; font-size: 0.85rem; padding-block: 0.4rem;
    border-bottom: 2px solid rgba(255,255,255,0.25);
}
.preview-banner .btn-light { font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--hd-bg-2);
    border-top: 1px solid var(--hd-border);
    color: var(--hd-muted); padding-block: 2rem; margin-top: 4rem;
}
.site-footer a { color: var(--hd-muted); }
.site-footer a:hover { color: var(--hd-text); }

/* ---------- Listengruppen ---------- */
.list-group-item { border-color: var(--hd-border); color: var(--hd-text); }

/* ---------- Forms ---------- */
/* background-COLOR, nie die Kurzform: sie loescht auch background-image.
   Daran haengt bei Bootstrap der Aufklapp-Pfeil der Auswahlliste und das rote
   Warnzeichen bei .is-invalid. Diese Datei laedt nach Bootstrap und gewinnt. */
.form-control, .form-select {
    background-color: var(--hd-bg-2); border-color: var(--hd-border); color: var(--hd-text);
}
.form-control:focus, .form-select:focus {
    background-color: var(--hd-bg-2); color: var(--hd-text);
    border-color: var(--hd-primary); box-shadow: 0 0 0 0.2rem rgba(var(--hd-primary-rgb), 0.2);
}
.form-control::placeholder { color: #6b6880; }
.form-check-input:checked { background-color: var(--hd-primary); border-color: var(--hd-primary); }

/* ---------- Kosmische Effekte ---------- */
/* Gradient-Text */
.text-cosmic {
    background: linear-gradient(100deg, #cfc6ff 0%, var(--hd-primary) 38%, var(--hd-accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.glow-text { text-shadow: 0 0 32px rgba(138,123,245,0.45); }

/* Icon-Badge mit Glow-Ring */
.icon-badge {
    box-shadow: 0 0 0 1px rgba(138,123,245,0.25), 0 8px 24px -10px rgba(138,123,245,0.55);
}

/* Sektions-Eyebrow mit Punkt */
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; }
.eyebrow::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--hd-accent); box-shadow: 0 0 10px 1px rgba(224,189,126,0.7);
}

/* ---------- Scroll-Reveal (einmalig, dezent) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease;
          transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
/* Fallback ohne JS: nach kurzer Zeit sichtbar */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero .mandala { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    * { scroll-behavior: auto !important; }
}

/* ============================================================
   Theme-Umschalter (Hell/Dunkel)
   ============================================================ */
.theme-toggle {
    background: transparent; border: 0; color: var(--hd-muted);
    font-size: 1.15rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer;
    display: inline-flex; align-items: center; transition: color .15s;
}
.theme-toggle:hover, .theme-toggle:focus { color: var(--hd-text); }
/* Passendes Icon je Theme: im Hellen Mond (→ dunkel), im Dunklen Sonne (→ hell) */
.theme-icon-dark, .theme-icon-light { display: none; }
[data-bs-theme="light"] .theme-icon-dark  { display: inline-block; }
[data-bs-theme="dark"]  .theme-icon-light { display: inline-block; }

/* ============================================================
   Helles Theme – Anpassung der dunklen Effekte/Komponenten
   ============================================================ */
/* Kosmische Ebenen wirken auf Weiß falsch → aus/sehr dezent */
[data-bs-theme="light"] .cosmic-bg { display: none; }
[data-bs-theme="light"] body::after { display: none; }
[data-bs-theme="light"] .hero .mandala { opacity: 0.05; }

/* Überschriften im humdes-Navy */
[data-bs-theme="light"] h1, [data-bs-theme="light"] h2, [data-bs-theme="light"] h3,
[data-bs-theme="light"] .display-1, [data-bs-theme="light"] .display-2,
[data-bs-theme="light"] .display-3, [data-bs-theme="light"] .display-4,
[data-bs-theme="light"] .display-5, [data-bs-theme="light"] .display-6,
[data-bs-theme="light"] .content-body h3,
[data-bs-theme="light"] .site-header .navbar-brand { color: var(--hd-navy); }

/* Karten: weiße Fläche + weicher Schatten statt dunklem Gradient */
[data-bs-theme="light"] .card-soft {
    background: var(--hd-surface);
    box-shadow: 0 1px 2px rgba(60,64,67,0.12), 0 1px 3px rgba(60,64,67,0.08);
}
[data-bs-theme="light"] .card-soft::before { opacity: 0.30; }
[data-bs-theme="light"] a.card-soft:hover,
[data-bs-theme="light"] .card-soft.hoverable:hover {
    border-color: rgba(26,115,232,0.5);
    box-shadow: 0 10px 24px -12px rgba(26,115,232,0.35), 0 2px 6px rgba(60,64,67,0.12);
}
[data-bs-theme="light"] .prose-card {
    background: var(--hd-surface);
    box-shadow: 0 1px 3px rgba(60,64,67,0.10);
}

/* Icon-Badge: heller Blau-Tint, Gold-Icon bleibt */
[data-bs-theme="light"] .icon-badge {
    background: rgba(26,115,232,0.10);
    border-color: rgba(26,115,232,0.25);
    box-shadow: none;
}

/* Gradient-Text: Navy → Blau → Gold; kein Glow */
[data-bs-theme="light"] .text-cosmic {
    background: linear-gradient(100deg, var(--hd-navy) 0%, var(--hd-primary) 45%, var(--hd-accent) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
[data-bs-theme="light"] .glow-text { text-shadow: none; }

/* Buttons */
[data-bs-theme="light"] .btn-primary { box-shadow: 0 6px 18px -10px rgba(26,115,232,0.6); }
[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: var(--hd-navy);
    --bs-btn-border-color: var(--hd-border);
    --bs-btn-hover-bg: var(--hd-surface-2);
    --bs-btn-hover-border-color: var(--hd-primary);
    --bs-btn-hover-color: var(--hd-navy);
    --bs-btn-active-bg: var(--hd-surface-2);
    --bs-btn-active-color: var(--hd-navy);
}

/* Dunkle Badges im Hellen als helle Chips */
[data-bs-theme="light"] .badge.text-bg-dark {
    background: var(--hd-surface-2) !important;
    color: var(--hd-text) !important;
}

/* Bodygraph-Schatten dezenter */
[data-bs-theme="light"] .hero .bodygraph { filter: drop-shadow(0 18px 40px rgba(26,115,232,0.22)); }

/* Formularfelder auf reinem Weiß */
[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select { background-color: #fff; }
[data-bs-theme="light"] .form-control:focus,
[data-bs-theme="light"] .form-select:focus { background-color: #fff; }
[data-bs-theme="light"] .form-control::placeholder { color: #80868b; }

/* --- Boerse/Directory (D1b): Mitglieder-Avatare --- */
.member-avatar {
    width: 72px; height: 72px; object-fit: cover;
    border-radius: 50%; flex: 0 0 auto;
    border: 1px solid rgba(128, 128, 128, 0.25);
}
.member-avatar-lg {
    width: 160px; height: 160px; object-fit: cover;
    border-radius: 1rem; border: 1px solid rgba(128, 128, 128, 0.25);
}
.min-w-0 { min-width: 0; }

/* --- Chat (D2a) --- */
.chat-window { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .25rem; }
.chat-msg { max-width: 78%; align-self: flex-start; }
.chat-msg.mine { align-self: flex-end; text-align: right; }
.chat-bubble { display: inline-block; padding: .5rem .75rem; border-radius: 1rem;
    background: rgba(128, 128, 128, .15); white-space: pre-wrap; word-break: break-word; text-align: left; }
.chat-msg.mine .chat-bubble { background: var(--bs-primary, #1a73e8); color: #fff; }
.chat-time { font-size: .7rem; color: var(--bs-secondary-color, #80868b); margin-top: .1rem; }

/* --- Navbar-Redesign: Sticky, Aktiv-Zustand, Icons, Konto-Menue --- */
.site-header { position: sticky; top: 0; z-index: 1030; transition: box-shadow .2s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .22); }
[data-bs-theme="light"] .site-header.is-scrolled { box-shadow: 0 2px 14px rgba(26, 115, 232, .12); }

.navbar .nav-link .bi { margin-right: .35rem; opacity: .9; }
.navbar .nav-link.nav-icon { font-size: 1.05rem; }
.navbar .nav-link.nav-icon .bi { margin-right: 0; }

/* Ein Punkt bleibt einzeilig. Ohne das rutscht bei knappem Platz das Icon über
   den Text statt dass die Leiste als Ganzes reagiert – genau das Bild, das
   diese Korrektur ausgelöst hat. */
@media (min-width: 1200px) {
    .site-header .navbar-nav .nav-link,
    .site-header .navbar-text { white-space: nowrap; }
}

/* Zwischen 1200 und 1399 px steht die Leiste offen, hat aber nur 1140 px
   Container – nachgemessen fehlen dort knapp 40 px. Statt den Umbruchpunkt
   noch weiter nach oben zu schieben (1366×768 ist eine verbreitete Auflösung
   und bekäme dann dauerhaft den Hamburger), rücken die Punkte hier enger
   zusammen. Ab 1400 px gelten wieder die normalen Abstände. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header .navbar-nav .nav-link { padding-left: .35rem; padding-right: .35rem; }
    .site-header .navbar-nav .nav-link .bi { margin-right: .25rem; }
}

/* Aktuelle Seite hervorheben */
.navbar .nav-link.active { color: var(--hd-text); font-weight: 600; }
.navbar .nav-link.active::after {
    content: ""; display: block; height: 2px; border-radius: 2px;
    background: var(--hd-primary, var(--bs-primary, #1a73e8)); margin-top: 2px;
}
/* Grenze haengt am Umbruchpunkt der Leiste (navbar-expand-xl), nicht an lg:
   im gestapelten Menue traegt die aktive Seite einen linken Balken statt des
   Unterstrichs. Wandert der Umbruchpunkt, muss diese Zeile mit. */
@media (max-width: 1199.98px) {
    .navbar .nav-link.active::after { display: none; }
    .navbar-collapse .nav-link.active { border-left: 3px solid var(--hd-primary, var(--bs-primary, #1a73e8)); padding-left: .5rem; }
}
.dropdown-item.active, .dropdown-item:active { background: var(--hd-primary-d); color: #fff; }
.dropdown-item .bi { margin-right: .5rem; opacity: .85; width: 1.15em; text-align: center; }

.dropdown-menu { min-width: 14rem; }

/* ---------- App: Welt-Bereiche (Persönlich/Kommerziell, E1) ----------
   .app-area ist der Wrapper der App-Controller (<main class="… app-area">).
   Je Welt (Body-Klasse world-privat/world-beruf) werden die
   --hd-primary/--hd-accent-Tokens innerhalb dieses Scopes überschrieben –
   Buttons, Links, Badges und Score-Ringe der App nehmen so die Welt-Farbe an,
   während die geteilte Top-Nav (nav.php) auf der Markenfarbe bleibt.

   .world-tint-* ist der zweite Weg in denselben Scope: der Welt-Umschalter
   (app/views/world-switch.php) steht im Konto-Menü und auf der Portal-Übersicht,
   also AUSSERHALB von .app-area und ohne world-*-Body-Klasse. Ohne diesen
   Selektor käme die aktive Welt dort in der Markenfarbe statt in ihrer eigenen.
   Er hängt an der Klasse selbst (nicht an einem Vorfahren), damit ihn ein
   einzelner Wrapper mitbringen kann, ohne die ganze Seite einzufärben. */

/* Persönlich = warm (Terrakotta), Kommerziell = navy/seriös (kühles Blau).
   Alle --hd-primary-Werte sind gegen Weiß (Button-/Badge-Text via
   --bs-primary) auf >= 4.5:1 WCAG-AA-Kontrast geprüft. */
[data-bs-theme="light"] .world-privat .app-area,
[data-bs-theme="light"] .world-tint-privat,
[data-bs-theme="light"] .world-privat.world-upsell {
    --hd-primary:     #c1592e;
    --hd-primary-d:   #a1481f;
    --hd-primary-rgb: 193, 89, 46;
    --hd-accent:      #c79a55;
}
[data-bs-theme="light"] .world-beruf .app-area,
[data-bs-theme="light"] .world-tint-beruf,
[data-bs-theme="light"] .world-beruf.world-upsell {
    --hd-primary:     #26315f;
    --hd-primary-d:   #1a2145;
    --hd-primary-rgb: 38, 49, 95;
    --hd-accent:      #5c7a99;
}
[data-bs-theme="dark"] .world-privat .app-area,
[data-bs-theme="dark"] .world-tint-privat,
[data-bs-theme="dark"] .world-privat.world-upsell {
    --hd-primary:     #b85c34;
    --hd-primary-d:   #96502e;
    --hd-primary-rgb: 184, 92, 52;
    --hd-accent:      #e0bd7e;
}
[data-bs-theme="dark"] .world-beruf .app-area,
[data-bs-theme="dark"] .world-tint-beruf,
[data-bs-theme="dark"] .world-beruf.world-upsell {
    --hd-primary:     #4a6bab;
    --hd-primary-d:   #3a5488;
    --hd-primary-rgb: 74, 107, 171;
    --hd-accent:      #9fb8d9;
}

/* Dezenter Welt-Wechsler: zwei Pills, aktive Welt hervorgehoben. Einziger Ort
   ist der App-Punkt der Kopfleiste (world-switch.php aus nav.php). */
.app-world-switch {
    display: inline-flex; gap: .25rem; padding: .2rem;
    background: var(--hd-surface-2); border: 1px solid var(--hd-border);
    border-radius: 2rem;
}
.world-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    padding: .35rem .8rem; border-radius: 2rem; min-height: 2rem;
    font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    color: var(--hd-muted); transition: background .15s, color .15s;
}
.world-pill:hover, .world-pill:focus-visible { color: var(--hd-text); background: rgba(var(--hd-primary-rgb), .1); }
.world-pill.active { background: var(--hd-primary-d, var(--hd-primary)); color: #fff; }
.world-pill.active:hover, .world-pill.active:focus-visible { color: #fff; }
.world-pill .bi { font-size: .9em; }
/* Gesperrte Welt: einladend-dezent statt abweisend/„kaputt" – volle Deckkraft,
   nur gedämpfte Farbe + Schloss-Icon; Hover lädt zum Freischalten ein, Klick
   fuehrt weiterhin zur Upsell-Seite. */
.world-pill.locked { color: var(--hd-muted); }
.world-pill.locked .bi { opacity: .8; }
.world-pill.locked:hover, .world-pill.locked:focus-visible { color: var(--hd-text); background: rgba(var(--hd-primary-rgb), .1); }
.world-pill.locked.active { background: var(--hd-surface-2); color: var(--hd-text); box-shadow: inset 0 0 0 1px var(--hd-border); }

/* Gesperrte Welt im Nav-Dropdown (nav.php, Ein-Welt-Fall) */
.dropdown-item.locked { color: var(--hd-muted); font-style: italic; }
.dropdown-item.locked:hover, .dropdown-item.locked:focus-visible { color: var(--hd-text); font-style: italic; }
.dropdown-item.locked .bi { opacity: .7; }

/* ---------- Welt-Upsell (world-upsell.php) ----------
   Welt-Bezug sofort sichtbar: großes Welt-Icon in Welt-Farbe (--hd-primary wird
   auf body-Ebene .world-*.world-upsell gesetzt) + „bald verfügbar"-Badge, damit
   der Platzhalter-CTA nicht wie ein toter Button wirkt. */
.world-upsell .world-badge {
    width: 72px; height: 72px; border-radius: 50%; margin-inline: auto;
    display: inline-flex; align-items: center; justify-content: center; font-size: 2rem;
    color: var(--hd-primary);
    background: rgba(var(--hd-primary-rgb), .12);
    border: 1px solid rgba(var(--hd-primary-rgb), .35);
}
.world-upsell .soon-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 600; color: var(--hd-muted);
    background: var(--hd-surface-2); border: 1px solid var(--hd-border);
    border-radius: 2rem; padding: .3rem .85rem;
}

/* ---------- Welt-Auswahl bei der Registrierung (registrieren.php) ----------
   Zwei Karten als Radio-Auswahl. Sofortiges Auswahl-Feedback via :has() (Ring +
   Welt-Icon), serverseitig bleibt zusätzlich .border-primary auf der gewählten
   Karte gesetzt (Reprint nach Fehler). */
.world-choice { cursor: pointer; display: block; }
.world-choice:hover { border-color: rgba(var(--hd-primary-rgb), .5); }
.world-choice:focus-within { box-shadow: 0 0 0 3px rgba(var(--hd-primary-rgb), .25); }
.world-choice:has(input:checked) {
    border-color: var(--hd-primary);
    box-shadow: 0 0 0 2px rgba(var(--hd-primary-rgb), .3);
}
.world-choice-ico {
    width: 40px; height: 40px; flex: 0 0 auto; border-radius: .6rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
    background: rgba(var(--hd-primary-rgb), .12); color: var(--hd-primary);
}

/* Konto-Menue (Avatar + Name) */
.account-toggle .nav-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hd-border);
}
.account-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Abmelden als Formular-Button im Dropdown wie ein normaler Eintrag */
.dropdown-menu form { margin: 0; }
.dropdown-menu form .dropdown-item { width: 100%; text-align: left; border: 0; background: none; }

/* ---------- Bodygraph (portal/chart.php) ---------- */
.hd-bodygraph { width: 100%; max-width: 440px; height: auto; display: block; margin-inline: auto; }

/* Zentren */
.hd-center { fill: none; stroke: var(--hd-border); stroke-width: 2; transition: fill .35s ease, stroke .35s ease; }
.hd-center.is-open { fill: none; stroke: var(--hd-border); }
.hd-center.is-defined { fill: url(#hdDef); stroke: none; filter: url(#hdGlow); }

/* Kanäle */
.hd-channel { fill: none; stroke: var(--hd-border); stroke-width: 2.4; stroke-linecap: round; opacity: .5; transition: stroke .35s ease, opacity .35s ease; }
.hd-channel.is-defined { stroke: url(#hdDef); stroke-width: 3.6; opacity: 1; }
.hd-channel.is-hanging { opacity: .5; }
.hd-channel-half { fill: none; stroke: url(#hdGold); stroke-width: 3.6; stroke-linecap: round; }

/* Tore */
.hd-gate circle { fill: var(--hd-surface); stroke: var(--hd-border); stroke-width: 1.4; transition: fill .35s ease, stroke .2s ease; }
.hd-gate .hd-gate-num { fill: var(--hd-muted); font-family: Inter, system-ui, sans-serif; font-size: 8px; font-weight: 600; pointer-events: none; user-select: none; }
.hd-gate.is-active circle { fill: url(#hdGold); stroke: var(--hd-accent); }
.hd-gate.is-active .hd-gate-num { fill: #1a1320; }
.hd-gate[tabindex] { cursor: help; }
.hd-gate[tabindex]:focus { outline: none; }
.hd-gate[tabindex]:hover circle,
.hd-gate[tabindex]:focus circle { stroke: var(--hd-primary); stroke-width: 2.6; }

/* Legende */
.hd-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.hd-legend .chip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--hd-muted); }
.hd-legend .swatch { width: 15px; height: 15px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.hd-legend .swatch.def { background: linear-gradient(135deg, #8a7bf5, #6a5ae0); }
.hd-legend .swatch.open { background: transparent; border: 1.5px solid var(--hd-border); }
.hd-legend .swatch.hang { background: linear-gradient(135deg, #e6c98a, #c79a55); }
.hd-legend .swatch.gate { background: linear-gradient(135deg, #e6c98a, #c79a55); border-radius: 50%; }

/* ---------- Gruppen-Bodygraph (/zusammenarbeit) ----------
   Vier Zustände statt zwei: von allen getragen · von mehreren · fragil (hängt an
   einer Person oder einer einzigen Verbindung) · von niemandem.
   Fragil trägt Farbe UND Strichelung – auf Farbe allein wäre die Aussage bei
   Farbschwäche und im Schwarzweißdruck weg. Muss NACH .hd-center.is-defined
   stehen: gleiche Spezifität, die spätere Regel gewinnt (dort steht stroke:none). */
.hd-center.is-team-all { stroke: var(--hd-primary); stroke-width: 2.4; }
.hd-center.is-team-many { filter: none; }
.hd-center.is-team-fragile {
    fill: url(#hdGold); filter: none;
    stroke: var(--hd-accent); stroke-width: 2.4; stroke-dasharray: 5 3;
}
/* Kanal, den keiner allein mitbringt – er entsteht erst zwischen zwei Menschen. */
.hd-channel.is-team-bridge { stroke: url(#hdGold); stroke-dasharray: 6 4; }
.hd-legend .swatch.team-all { background: linear-gradient(135deg, #8a7bf5, #6a5ae0); border: 2px solid var(--hd-primary); }
.hd-legend .swatch.team-many { background: linear-gradient(135deg, #8a7bf5, #6a5ae0); }
.hd-legend .swatch.team-fragile { background: linear-gradient(135deg, #e6c98a, #c79a55); border: 1.5px dashed var(--hd-accent); }

@media (prefers-reduced-motion: reduce) {
    .hd-center, .hd-channel, .hd-gate circle { transition: none; }
}

/* Chart-Detail: Zustands-Icons, Aktivierungs-Gruppen (Persönlichkeit/Design), Planeten-Glyphen */
.hd-ico-def { color: var(--hd-primary); }
.hd-ico-open { color: var(--hd-muted); }
.hd-side-personality { color: var(--hd-primary); }
.hd-side-design { color: var(--hd-accent); }
.hd-glyph { font-family: 'Segoe UI Symbol', 'Noto Sans Symbols2', 'Apple Symbols', 'DejaVu Sans', serif; font-size: 1.15rem; line-height: 1; width: 1.5em; display: inline-block; text-align: center; flex: 0 0 auto; }
.hd-act-row { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; border-bottom: 1px solid var(--hd-border); }
.hd-act-row:last-child { border-bottom: 0; }
.hd-act-name { flex: 1 1 auto; }
.hd-act-val { flex: 0 0 auto; color: var(--hd-text); font-variant-numeric: tabular-nums; }

/* Einheitlicher Seiten-Header + Chips */
.page-header { border-bottom: 1px solid var(--hd-border); padding-bottom: 1rem; }
.page-header .display-6 { line-height: 1.15; }
.page-header .icon-badge { flex: 0 0 auto; }
.page-header-actions { flex: 0 0 auto; }
.hd-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: .5rem; background: var(--hd-surface); border: 1px solid var(--hd-border); color: var(--hd-text); font-size: .8rem; line-height: 1.3; }
.hd-chip .bi { opacity: .8; }

/* ---------- Sektionskopf (section-head.php) ---------- */
.section-head { display: flex; align-items: center; gap: .75rem; }
.section-head-title {
    font-family: var(--hd-font-display); font-weight: 600;
    font-size: 1.35rem; line-height: 1.2; color: var(--hd-text);
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem;
}
[data-bs-theme="light"] .section-head-title { color: var(--hd-navy); }
.section-head-muted .section-head-title { font-size: 1.1rem; color: var(--hd-muted); }
.section-head-muted .icon-badge { background: var(--hd-surface); border-color: var(--hd-border); color: var(--hd-muted); box-shadow: none; }

/* Größen-Varianten für icon-badge */
.icon-badge-sm { width: 38px; height: 38px; border-radius: 0.65rem; font-size: 1.05rem;
                 box-shadow: 0 0 0 1px rgba(138,123,245,0.2); }
.icon-badge-lg { width: 64px; height: 64px; border-radius: 1rem; font-size: 1.9rem; }

/* ---------- Leerzustand (empty-state.php) ---------- */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: clamp(1.75rem, 5vw, 3rem) 1rem;
    border: 1px dashed var(--hd-border); border-radius: 1rem; background: var(--hd-bg-2);
}
/* im Chat-Fenster ohne Kasten-Optik, passend zu den weichen Bubbles */
.chat-window .empty-state { border: 0; background: transparent; margin-block: auto; }

/* ---------- Gegenseitiges Interesse (B3) ----------
   Nur --hd-*-Variablen, damit Hell- und Dunkelmodus ohne zweite Regel stimmen. */
.interest-mutual {
    border: 1px solid var(--hd-accent); border-radius: 0.85rem;
    padding: 0.65rem 0.85rem; background: var(--hd-bg-2);
    color: var(--hd-accent); font-weight: 600; text-align: left;
}
.interest-mutual .small { color: var(--hd-muted); font-weight: 400; }
/* Vorschlagschips: mehrzeilig lesbar statt auf eine Zeile gequetscht. */
.opener-suggest .btn { white-space: normal; line-height: 1.35; }
/* Herz in der Boersenkarte: ueber der Karte, damit der Klick nicht navigiert. */
.interest-corner {
    position: absolute; top: .4rem; right: .5rem; z-index: 2; margin: 0; line-height: 1;
}
.interest-corner .btn { text-decoration: none; }

/* ---------- „Ich suche"-Toggles (btn-check) ---------- */
.seek-toggle .btn { border-radius: 999px; }
.seek-toggle .btn .bi { margin-right: .3rem; }
/* Häkchen nur bei ausgewählter Option zeigen */
.seek-toggle .btn-check:not(:checked) + .btn .bi { display: none; }
/* deutlicher Auswahl-Zustand (Light + Dark) */
.seek-toggle .btn-check:checked + .btn {
    background: rgba(var(--hd-primary-rgb), 0.15);
    border-color: var(--hd-primary);
    color: var(--hd-text);
    font-weight: 600;
}

/* ---------- Foto-Upload-Vorschau ---------- */
.upload-preview {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 1rem; border: 1px solid var(--hd-border);
    border-radius: .85rem; background: var(--hd-bg-2);
}

/* ---------- Onboarding-Fortschritt (onboarding.php) ---------- */
.onboarding .progress {
    height: .5rem; border-radius: 999px;
    background: var(--hd-bg-2); border: 1px solid var(--hd-border);
}
.onboarding .progress-bar { background: var(--hd-primary); border-radius: 999px; }

.onboarding-steps .onboarding-step + .onboarding-step {
    border-top: 1px solid var(--hd-border);
}
.onboarding-icon { font-size: 1.15rem; line-height: 1.6; flex: 0 0 auto; }

/* Zustände: erledigt (grün), wartet auf Freigabe (dezent), offen (blass) */
.onboarding-step-done  .onboarding-icon { color: var(--bs-success); }
.onboarding-step-waiting .onboarding-icon { color: var(--hd-accent); }
.onboarding-step-open  .onboarding-icon { color: var(--hd-muted); opacity: .7; }
/* Erledigtes tritt optisch zurück – der Blick soll beim nächsten Schritt landen. */
.onboarding-step-done .fw-semibold { color: var(--hd-muted); font-weight: 500 !important; }

/* ---------- Transit-Wetter (portal/transit.php) ---------- */
.transit-list li + li { border-top: 1px solid var(--hd-border); }
.transit-icon { font-size: 1.1rem; line-height: 1.6; flex: 0 0 auto; }

/* Aufklappbarer Tagesstand: Marker weg, Zeile als Ganzes klickbar */
details.card-soft > summary { list-style: none; }
details.card-soft > summary::-webkit-details-marker { display: none; }
details.card-soft > summary::after {
    content: "\F282";                       /* bi-chevron-down */
    font-family: bootstrap-icons; float: right; opacity: .6; transition: transform .15s;
}
details.card-soft[open] > summary::after { transform: rotate(180deg); }

/* Teaser auf der Startseite */
.transit-teaser { border-left: 3px solid var(--hd-accent); }

/* ---------- KI-Guide (portal/guide.php) ---------- */
.guide-topics li + li { border-top: 1px solid var(--hd-border); }

.guide-thread { display: flex; flex-direction: column; gap: .75rem; }
.guide-msg {
    padding: .75rem 1rem; border-radius: 1rem;
    border: 1px solid var(--hd-border); background: var(--hd-bg-2);
    max-width: 90%;
}
.guide-msg > :last-child { margin-bottom: 0; }
/* Frage rechts, Antwort links – gleiche Bubble-Logik wie der Mitglieder-Chat. */
.guide-msg-user {
    align-self: flex-end;
    background: rgba(var(--hd-primary-rgb), 0.12);
    border-color: var(--hd-primary);
}
.guide-msg-bot { align-self: flex-start; }

/* ---------- Kontoseite ---------- */

/* Abschnittsnavigation: scrollt ab lg mit, damit man bei langen Formularen
   nicht nach oben zurueck muss. Unterhalb lg steht sie normal ueber dem Inhalt. */
@media (min-width: 992px) {
    .account-nav { position: sticky; top: 1.5rem; }
}
.account-nav .list-group-item { background: var(--hd-bg-2); border-color: var(--hd-border); }
.account-nav .list-group-item.active { border-color: var(--hd-primary); }
.account-nav-danger { color: var(--bs-danger); }

/* Statuskarte: Zeilen mit fuehrendem Icon, ohne Aufzaehlungspunkte. */
.account-facts li { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; }
.account-facts li > i { flex: 0 0 auto; }

/* Bodygraph in der Uebersicht deutlich kleiner als auf der Chart-Seite
   (dort max-width 440px) - hier ist er Blickfang, nicht Arbeitsflaeche. */
.account-bodygraph .hd-bodygraph { max-width: 190px; }

/* Benachrichtigungen: Beschriftung links, Auswahl rechts. */
.notify-rows { display: flex; flex-direction: column; }
.notify-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .75rem 0;
}
.notify-row + .notify-row { border-top: 1px solid var(--hd-border); }
.notify-row-control { flex: 0 0 auto; width: 12rem; max-width: 45%; }
@media (max-width: 575.98px) {
    .notify-row { flex-direction: column; align-items: stretch; gap: .35rem; }
    .notify-row-control { width: 100%; max-width: none; }
}

/* Loeschbereich sichtbar abgesetzt - eine unwiderrufliche Aktion soll sich
   nicht wie die vier Speichern-Formulare darueber anfuehlen. */
.card-danger { border-color: rgba(var(--bs-danger-rgb), .45); }

/* ---------- Himmelsrad (transit-wheel.php) ---------- */

.hd-wheel { width: 100%; max-width: 380px; height: auto; display: block; margin-inline: auto; }

/* Tor-Segmente: vier Zustaende, aufsteigend nach Aussagekraft.
   Ein Tor, das heute einen Kanal schliesst, muss sofort ins Auge fallen. */
.hd-wheel-seg { fill: var(--hd-bg-2); stroke: var(--hd-border); stroke-width: .6; transition: fill .35s ease; }
.hd-wheel-seg.is-own    { fill: rgba(var(--hd-primary-rgb), .16); }
.hd-wheel-seg.is-active { fill: rgba(var(--hd-primary-rgb), .45); stroke: var(--hd-primary); }
.hd-wheel-seg.is-new    { fill: var(--hd-primary); stroke: var(--hd-primary); }

.hd-wheel-num {
    font-size: 5.2px; fill: var(--hd-muted);
    text-anchor: middle; dominant-baseline: middle;
    font-variant-numeric: tabular-nums; pointer-events: none;
}
.hd-wheel-ray { stroke: var(--hd-border); stroke-width: .7; }

.hd-wheel-body circle { fill: var(--hd-surface); stroke: var(--hd-primary); stroke-width: 1.2; }
.hd-wheel-body text {
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols2', 'Apple Symbols', 'DejaVu Sans', serif;
    font-size: 9px; fill: var(--hd-text);
    text-anchor: middle; dominant-baseline: central;
}

.hd-wheel-legend {
    display: flex; flex-wrap: wrap; gap: .25rem 1rem;
    justify-content: center; margin-top: .75rem;
    font-size: .78rem; color: var(--hd-muted);
}
.hd-wheel-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.hd-wheel-key {
    width: .7rem; height: .7rem; border-radius: .2rem; display: inline-block;
    border: 1px solid var(--hd-border);
}
.hd-wheel-key.is-new    { background: var(--hd-primary); border-color: var(--hd-primary); }
.hd-wheel-key.is-active { background: rgba(var(--hd-primary-rgb), .45); border-color: var(--hd-primary); }
.hd-wheel-key.is-own    { background: rgba(var(--hd-primary-rgb), .16); }

/* ---------- Planeten-Kacheln ---------- */

.planet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }
.planet-tile {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .6rem .4rem; border-radius: .6rem;
    background: var(--hd-bg-2); border: 1px solid var(--hd-border);
    text-align: center; transition: border-color .25s ease, background .25s ease;
}
.planet-tile.is-active { border-color: var(--hd-primary); }
.planet-tile.is-new    { border-color: var(--hd-primary); background: rgba(var(--hd-primary-rgb), .12); }
.planet-glyph {
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols2', 'Apple Symbols', 'DejaVu Sans', serif;
    font-size: 1.5rem; line-height: 1.1;
}
.planet-name { font-size: .78rem; }
.planet-pos  { font-size: .8rem; font-variant-numeric: tabular-nums; }

/* Prioritaets-Sichtbarkeit: dezenter Stern vor dem Namen, kein Werbebanner. */
.boost-star { font-size: .8em; vertical-align: baseline; }

/* ============================================================
   REDESIGN 2026-07-23 — Score-Ringe, Podium, Dashboard-Hierarchie,
   Chart-Hero, Mini-Bodygraph. Alle Farben aus --hd-* (beide Themes).
   ============================================================ */

/* --hd-ring-track / --hd-glow je Theme */
[data-bs-theme="dark"]  { --hd-ring-track: #242739; --hd-glow: rgba(138,123,245,.26); }
[data-bs-theme="light"] { --hd-ring-track: #e6e2d7; --hd-glow: rgba(26,115,232,.14); }

/* ---------- Score-Ring (conic-gradient, kein SVG) ---------- */
.score-ring {
    --pct: 0; --sz: 56px;
    width: var(--sz); height: var(--sz); flex: none;
    border-radius: 50%; display: grid; place-items: center; position: relative;
    background: conic-gradient(from -90deg,
        var(--hd-accent) calc(var(--pct) * 3.6deg), var(--hd-ring-track, var(--hd-surface-2)) 0);
}
.score-ring::before {
    content: ""; position: absolute; inset: calc(var(--sz) / 11);
    border-radius: 50%; background: var(--hd-surface);
}
.score-ring b {
    position: relative; font-family: var(--hd-font-display, Georgia, serif);
    font-weight: 600; font-size: calc(var(--sz) / 3.3); line-height: 1;
    color: var(--hd-text); font-variant-numeric: tabular-nums;
}
.score-ring b::after { content: "%"; font-size: .55em; color: var(--hd-muted); margin-left: 1px; }
.score-ring-hero { --sz: 104px; } .score-ring-lg { --sz: 84px; }
.score-ring-md   { --sz: 64px; }  .score-ring-sm { --sz: 52px; }
.score-ring-xs   { --sz: 40px; }
.score-ring-xs b::after { display: none; }

/* ---------- Mini-Bodygraph (Karten) ---------- */
.hd-bodygraph.is-mini { max-width: none; width: 100%; }
.hd-bodygraph.is-mini .hd-center.is-defined { filter: none; }
.hd-bodygraph.is-mini .hd-channel { stroke-width: 3.2; }
.hd-bodygraph.is-mini .hd-channel.is-defined { stroke-width: 5; }
.bg-slot { flex: none; display: grid; place-items: center; }

/* ---------- HD-Typ-Glyph ---------- */
.hd-typ-glyph {
    width: 26px; height: 26px; border-radius: .5rem; flex: none;
    display: inline-grid; place-items: center; font-size: .95rem;
    background: rgba(var(--hd-primary-rgb), .14); color: var(--hd-primary);
}
.hd-typ-glyph.is-gold { background: rgba(224, 189, 126, .18); color: var(--hd-accent); }

/* ---------- Podium (Matches / Börse nach Match) ---------- */
.podium { display: flex; flex-direction: column; gap: 16px; }
.podium .rank {
    position: absolute; top: 10px; left: 13px; z-index: 1;
    font-family: var(--hd-font-display, Georgia, serif); font-size: .82rem;
    color: var(--hd-muted); font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.p-hero {
    display: flex; gap: 20px; align-items: center; padding: 22px; position: relative;
    background: radial-gradient(130% 150% at 100% 0, rgba(224,189,126,.13), transparent 55%), var(--hd-surface);
    border: 1px solid color-mix(in srgb, var(--hd-accent) 34%, var(--hd-border));
}
.p-hero .member-avatar { width: 92px; height: 92px; }
.p-hero .bg-slot { width: 92px; }
.p-hero .matchname { font-size: 1.5rem; }
.p-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.p-mid  { display: flex; gap: 16px; align-items: center; padding: 16px 18px; position: relative; }
.p-mid .member-avatar { width: 60px; height: 60px; }
.p-mid .bg-slot { width: 54px; }
.p-small { display: flex; gap: 12px; align-items: center; padding: 12px 14px; position: relative; }
.p-small .member-avatar { width: 46px; height: 46px; }
.p-tiny-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.p-tiny {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 8px; text-align: center; text-decoration: none; color: inherit;
}
.p-tiny .member-avatar { width: 44px; height: 44px; }
.p-tiny .p-tiny-name {
    font-size: .78rem; font-weight: 600; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.matchname { display: flex; align-items: center; gap: 8px; font-family: var(--hd-font-display, Georgia, serif);
    font-weight: 600; line-height: 1.15; }
.matchname .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-mode { font-size: .82rem; color: var(--hd-muted); }
#matchRest { display: none; }
#matchRest.is-open { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
@media (max-width: 720px) {
    .p-row2 { grid-template-columns: 1fr; }
    .p-tiny-row, #matchRest.is-open { grid-template-columns: repeat(3, 1fr) !important; }
    .p-hero { flex-wrap: wrap; }
    .p-hero .bg-slot { display: none; }
}

/* ---------- Dashboard-Hierarchie ---------- */
/* .dash-hook / .hero-match sind am 2026-07-25 entfallen – sie gehörten zur
   Karte „Top-Treffer heute", die beim Cockpit-Umbau der Portal-Übersicht
   weggefallen ist. Ebenso .dash-statbar, ersetzt durch die Mitgliedschafts-
   Sidebar (.portal-side, siehe Block am Dateiende). */
.dash-events { display: flex; flex-direction: column; gap: 10px; }
.dash-event { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.dash-event .ev-dot {
    width: 9px; height: 9px; border-radius: 50%; flex: none;
    background: var(--hd-accent); box-shadow: 0 0 0 4px rgba(224,189,126,.16);
}
.dash-event .ev-dot.is-primary { background: var(--hd-primary); box-shadow: 0 0 0 4px rgba(var(--hd-primary-rgb),.16); }
.dash-event .ev-dot.is-muted { background: var(--hd-muted); box-shadow: none; }
.dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px) { .dash-tiles { grid-template-columns: repeat(2, 1fr); } }
.dash-tile {
    padding: 16px; display: flex; flex-direction: column; gap: 7px;
    text-decoration: none; color: inherit; transition: transform .12s ease, border-color .12s ease;
}
.dash-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hd-primary) 45%, var(--hd-border)); }
.dash-tile-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.dash-tile .ib {
    width: 42px; height: 42px; border-radius: .7rem; display: grid; place-items: center;
    background: rgba(var(--hd-primary-rgb), .14); color: var(--hd-primary); font-size: 1.15rem;
}
.dash-tile .tile-cnt {
    margin-left: auto; font-family: var(--hd-font-display, Georgia, serif);
    font-size: 1.3rem; color: var(--hd-accent); font-variant-numeric: tabular-nums;
}
.dash-tile .tile-sub { font-size: .82rem; color: var(--hd-muted); }

/* ---------- Chart-Hero (portal/chart.php) ---------- */
.chart-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; }
@media (max-width: 860px) { .chart-hero { grid-template-columns: 1fr; } }
.bg-stage {
    position: relative; display: grid; place-items: center; padding: 12px; border-radius: 1.2rem;
    background: radial-gradient(58% 54% at 50% 42%, var(--hd-glow, rgba(138,123,245,.22)), transparent 70%);
}
.bg-stage .hd-bodygraph { max-width: 400px; filter: drop-shadow(0 12px 40px rgba(0,0,0,.28)); }
.chart-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .chart-facts { grid-template-columns: 1fr; } }
.chart-fact { padding: 16px; }
.chart-fact .v { font-family: var(--hd-font-display, Georgia, serif); font-size: 1.25rem; font-weight: 600; margin-top: 4px; }

/* ============================================================
   STARTSEITE 2026-07-23 — Partnersuche-Landingpage.
   Alle Farben aus --hd-* (beide Themes). Nutzt .card-soft, .hero, .mandala,
   .score-ring, .hd-bodygraph.is-mini aus dem Bestand.
   ============================================================ */

/* Hero */
.home-hero .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; position: relative; }
@media (max-width: 860px) { .home-hero .hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.home-hero h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); margin: .4rem 0 .2rem; }
.home-hero .hero-sub { font-family: var(--hd-font-display); font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    color: var(--hd-accent); font-weight: 500; margin-bottom: 1rem; }
.home-hero .hero-lead { color: var(--hd-muted); font-size: 1.08rem; max-width: 34rem; margin-bottom: 1.5rem; }
.home-hero .hero-fine { color: var(--hd-muted); font-size: .85rem; margin-top: .9rem; }

/* Mechanik-Visualisierung: zwei Bodygraphs + Ring-Bruecke */
.match-visual { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.match-visual .mv-graph { flex: none; filter: drop-shadow(0 14px 40px rgba(0,0,0,.28)); }
.match-visual .mv-graph .hd-bodygraph { max-width: none; }
.match-visual .mv-line { position: absolute; top: 50%; left: 14%; right: 14%; height: 2px; z-index: 0;
    background: linear-gradient(90deg, transparent, var(--hd-accent), transparent); opacity: .5; }
.match-visual .mv-bridge { display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 1; }
.match-visual .mv-bridge .lbl { font-size: .72rem; color: var(--hd-muted); text-align: center; max-width: 96px; }

/* Sektions-Titel zentriert */
.home-sec { padding: 52px 0; }
.home-center { text-align: center; margin-bottom: 28px; }
.home-center .lead { color: var(--hd-muted); max-width: 40rem; margin: .6rem auto 0; }

/* USP */
.home-usp { display: grid; grid-template-columns: .9fr 1.1fr; gap: 36px; align-items: center; }
@media (max-width: 820px) { .home-usp { grid-template-columns: 1fr; } }
.home-usp .big { font-family: var(--hd-font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.15; }
.home-usp .big em { color: var(--hd-accent); font-style: normal; }

/* Schritte */
.home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .home-steps { grid-template-columns: 1fr; } }
.home-step { padding: 22px; }
.home-step .n { font-family: var(--hd-font-display); font-size: 2.2rem; color: var(--hd-accent); line-height: 1; }
.home-step h3 { font-size: 1.15rem; margin: .5rem 0 .3rem; }
.home-step p { color: var(--hd-muted); font-size: .92rem; margin: 0; }

/* Beispiel-Personas */
.home-personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .home-personas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .home-personas { grid-template-columns: 1fr; } }
.home-persona { padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.home-persona .pg { width: 78px; }
.home-persona .pg .hd-bodygraph { max-width: none; }
.home-persona .nm { font-family: var(--hd-font-display); font-weight: 600; font-size: 1.05rem; }
.home-persona .ty { font-size: .8rem; color: var(--hd-muted); }

/* Feature-Kacheln */
.home-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px) { .home-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .home-features { grid-template-columns: 1fr; } }
.home-feat { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.home-feat .ib { width: 44px; height: 44px; border-radius: .7rem; display: grid; place-items: center;
    background: rgba(var(--hd-primary-rgb), .14); color: var(--hd-primary); font-size: 1.3rem; }
.home-feat b { font-size: 1.02rem; }
.home-feat p { color: var(--hd-muted); font-size: .88rem; margin: 0; }

/* Tarif-Teaser */
.home-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 820px) { .home-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .home-plans { grid-template-columns: 1fr; } }
.home-plan { padding: 20px; text-align: center; position: relative; }
.home-plan.is-free { border-color: color-mix(in srgb, var(--hd-accent) 45%, var(--hd-border));
    background: radial-gradient(120% 120% at 50% 0, rgba(224,189,126,.1), transparent 60%), var(--hd-surface); }
.home-plan .pn { font-family: var(--hd-font-display); font-size: 1.3rem; font-weight: 600; }
.home-plan .pr { font-size: 1.7rem; font-family: var(--hd-font-display); font-weight: 600; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.home-plan .pr small { font-size: .8rem; color: var(--hd-muted); font-family: var(--hd-font-body, inherit); }
.home-plan .pd { font-size: .82rem; color: var(--hd-muted); min-height: 2.6em; margin-bottom: .8rem; }
.home-plan .ribbon { position: absolute; top: 12px; right: 12px; font-size: .62rem; text-transform: uppercase;
    letter-spacing: .12em; background: var(--hd-accent); color: #2a2113; border-radius: 999px; padding: .15rem .55rem; font-weight: 700; }

/* Wissen als Vertrauensanker */
.home-know { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
@media (max-width: 820px) { .home-know { grid-template-columns: 1fr; } }
.home-know-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.home-ktile { padding: 16px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.home-ktile .ib { width: 40px; height: 40px; border-radius: .6rem; display: grid; place-items: center;
    background: rgba(var(--hd-primary-rgb), .12); color: var(--hd-primary); }

/* Abschluss-CTA-Band */
.home-cta-band { padding: 64px 0; text-align: center; position: relative; overflow: hidden;
    background: radial-gradient(80% 120% at 50% 0, var(--hd-glow, rgba(138,123,245,.22)), transparent 65%); }
.home-cta-band h2 { font-size: clamp(2rem, 4vw, 2.6rem); margin-bottom: .5rem; }
.home-cta-band p { color: var(--hd-muted); margin: 0 auto 1.5rem; max-width: 34rem; }

/* ============================================================
   ADMIN-COCKPIT + SERVER-SVG-CHARTS  (2026-07-23)
   Alle Farben über --hd-* (beide Themes) + semantische Ampel
   (--hd-good/-warning/-danger). Charts sind rein serverseitig
   gerendertes SVG/HTML (kein JS, keine Lib) – siehe app/views/charts/.
   ============================================================ */

/* Chart-Farbpalette: --c wird je Serie/Segment gesetzt und vererbt sich
   an die SVG-Kinder. Nur von den Chart-Partials genutzt. */
.c-1 { --c: var(--hd-primary); }
.c-2 { --c: var(--hd-accent); }
.c-3 { --c: var(--hd-good); }
.c-4 { --c: var(--hd-muted); }

/* --- Chart-Primitive --- */
.chart-svg { width: 100%; height: auto; display: block; }
.chart-axis  { stroke: var(--hd-border); stroke-width: 1; }
.chart-grid  { stroke: var(--hd-border); stroke-width: 1; stroke-dasharray: 3 5; opacity: .55; }
.chart-xlabel, .chart-ylabel { fill: var(--hd-muted); font-size: 11px; }
.chart-title { font-size: 1rem; font-weight: 600; margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.chart-title .bi { color: var(--hd-accent); }
.chart-note { color: var(--hd-muted); font-size: .8rem; margin-top: .6rem; }

.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; font-size: .82rem; color: var(--hd-muted); }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg i { width: 10px; height: 10px; border-radius: 2px; background: var(--c, var(--hd-primary)); }
.chart-legend .lg b { color: var(--hd-text); font-variant-numeric: tabular-nums; }

/* Balken */
.bars .bar-rect { fill: var(--c, var(--hd-primary)); transition: opacity .15s; }
.bars .bar-rect:hover { opacity: .78; }

/* Fläche/Trend */
.area-fill { fill: var(--c, var(--hd-primary)); opacity: .14; }
.area-line { stroke: var(--c, var(--hd-primary)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area-dot  { fill: var(--c, var(--hd-primary)); }

/* Sparkline (KPI-Kacheln) */
.spark { display: block; width: 100%; height: 100%; color: var(--c, var(--hd-primary)); }
.spark .spark-line { stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-dot  { fill: currentColor; }

/* Donut */
.chart-donut { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-svg { width: 132px; height: 132px; flex: none; }
.donut-track { stroke: var(--hd-border); }
.donut-seg { stroke: var(--c, var(--hd-primary)); }
.donut-center { fill: var(--hd-text); font-size: 20px; font-weight: 700; font-family: var(--hd-font-display, Georgia, serif); }
.donut-center-sub { fill: var(--hd-muted); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; }
.donut-legend { flex-direction: column; align-items: flex-start; gap: 7px; margin-top: 0; }

/* Trichter (Conversion-Funnel) */
.funnel-chart { display: flex; flex-direction: column; gap: 9px; }
.funnel-row { display: grid; grid-template-columns: 168px 1fr; gap: 14px; align-items: center; }
.funnel-label { font-size: .86rem; color: var(--hd-text); text-align: right; }
/* Grid, nicht Flex: Die Balkenbreite kommt als Prozentwert aus dem Markup
   (charts/funnel.php). Im Flex-Container bezog sie sich auf den GESAMTEN Track –
   die erste Stufe hat aber per Definition 100 %, und rechts standen noch
   Prozenttext, Vorstufen-Chip und zwei Abstände. Ergebnis waren 41 px, die über
   die Karte hinausragten. Im Grid bezieht sich die Prozentbreite auf die erste
   Spalte, also auf den Platz, der nach den Texten übrig bleibt.
   `grid-auto-flow: column` lässt Text und Chip in implizite Spalten wandern
   (statt in eine neue Zeile) und erzeugt keinen leeren Abstand, wenn der Chip
   fehlt – erste Stufe oder $funnel_steplabel nicht gesetzt. */
.funnel-track { display: grid; grid-auto-flow: column; grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: max-content; align-items: center; gap: 10px; }
.funnel-bar { height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: flex-end;
    padding: 0 10px; background: var(--c, var(--hd-primary)); min-width: 2.6rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.funnel-count { color: #fff; font-weight: 700; font-size: .82rem; text-shadow: 0 1px 2px rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
/* Mindestbreiten, damit die Zahlen ZWISCHEN den Zeilen fluchten: Jede Zeile ist
   ein eigenes Grid, dessen Spalten sich sonst nach dem eigenen Text richten –
   „100,0 %" wäre breiter als „25,0 %" und die Spalten versetzt. */
.funnel-share { font-size: .82rem; color: var(--hd-muted); font-variant-numeric: tabular-nums;
    min-width: 3.6rem; text-align: right; }
.funnel-step { font-size: .72rem; color: var(--hd-good); font-variant-numeric: tabular-nums;
    min-width: 3.4rem; text-align: right; }
.funnel-step.is-low { color: var(--hd-danger); }
@media (max-width: 560px) {
    .funnel-row { grid-template-columns: 1fr; gap: 3px; }
    .funnel-label { text-align: left; }
}

/* --- KPI-Kacheln --- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.kpi-label { font-size: .8rem; color: var(--hd-muted); display: flex; align-items: center; gap: 6px; }
.kpi-label .bi { color: var(--hd-accent); }
.kpi-value { font-family: var(--hd-font-display, Georgia, serif); font-size: 2rem; font-weight: 700; line-height: 1.05; color: var(--hd-text); font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 1rem; color: var(--hd-muted); font-family: var(--hd-font-body, inherit); }
.kpi-delta { font-size: .78rem; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.kpi-delta.up { color: var(--hd-good); }
.kpi-delta.down { color: var(--hd-danger); }
.kpi-delta.flat { color: var(--hd-muted); }
.kpi-spark { height: 28px; margin-top: 8px; }

/* --- Aktions-Inbox --- */
.admin-inbox { display: flex; flex-direction: column; }
.inbox-row { display: flex; align-items: center; gap: 13px; padding: 13px 6px; border-top: 1px solid var(--hd-border);
    text-decoration: none; color: inherit; transition: background .12s; }
.inbox-row:first-child { border-top: 0; }
.inbox-row:hover { background: rgba(var(--hd-primary-rgb), .07); }
.inbox-ico { width: 40px; height: 40px; border-radius: .65rem; display: grid; place-items: center; flex: none; font-size: 1.15rem; }
.inbox-ico.danger { background: rgba(var(--hd-danger-rgb), .16); color: var(--hd-danger); }
.inbox-ico.warn   { background: rgba(var(--hd-warning-rgb), .18); color: var(--hd-warning); }
.inbox-ico.info   { background: rgba(var(--hd-primary-rgb), .14); color: var(--hd-primary); }
.inbox-txt { flex: 1; min-width: 0; }
.inbox-txt b { display: block; color: var(--hd-text); }
.inbox-txt span { font-size: .82rem; color: var(--hd-muted); }
.inbox-count { font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--hd-text); }
.inbox-row .bi-chevron-right { color: var(--hd-muted); }
.inbox-empty { display: flex; align-items: center; gap: 10px; padding: 15px 6px; color: var(--hd-good); }
.inbox-empty .bi { font-size: 1.3rem; }

/* --- Sekundär-Kacheln (Zähler, klickbar) --- */
.admin-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) { .admin-tiles { grid-template-columns: repeat(2, 1fr); } }
.admin-tile { padding: 16px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 2px; transition: transform .12s, border-color .12s; }
.admin-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hd-accent) 45%, var(--hd-border)); }
.admin-tile .bi { font-size: 1.25rem; color: var(--hd-accent); }
.admin-tile .v { font-size: 1.7rem; font-weight: 700; font-family: var(--hd-font-display, Georgia, serif); font-variant-numeric: tabular-nums; }
.admin-tile .l { font-size: .82rem; color: var(--hd-muted); }

/* Cockpit-Raster: zwei Spalten (Wachstum | Inbox), darunter Funnel | Donut */
.cockpit-2col { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 900px) { .cockpit-2col { grid-template-columns: 1fr; } }

/* ============================================================
   NAVIGATION — Kopfleiste (Stand 2026-07-25)
   Ausgeloggt endet die Leiste mit zwei gleich hohen Schaltflächen
   (Registrieren gefüllt, Anmelden als Umriss). Eingeloggt trägt das
   Avatar-Menü alles Weitere, einspaltig mit Abschnitten.
   ============================================================ */

/* CTA-Paar: nicht umbrechen, gleiche Höhe, auf Mobil untereinander bündig */
.site-header .nav-cta { white-space: nowrap; }
/* Ebenfalls am Umbruchpunkt der Leiste: unterhalb davon stehen die beiden
   Knoepfe im aufgeklappten Menue untereinander statt nebeneinander. */
@media (max-width: 1199.98px) {
    .site-header .nav-cta { display: inline-block; margin-top: .25rem; }
}

/* Avatar-Menü: breiter als die Standard-Dropdowns (14rem), weil hier
   Abschnitts-Überschriften und längere Beschriftungen zusammenkommen. */
.account-menu { min-width: 17rem; }

/* Kopfzeile des Menüs: wer bin ich, welcher Tarif. Kein Link, nur Auskunft. */
.account-head {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem 1rem .35rem;
}
.account-head-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--hd-border); flex: none;
}
.account-head-icon { font-size: 1.9rem; color: var(--hd-muted); line-height: 1; }
.account-head-text { display: flex; flex-direction: column; min-width: 0; }
.account-head-text strong {
    color: var(--hd-text); font-size: .95rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-head-plan { color: var(--hd-accent); font-size: .78rem; letter-spacing: .04em; }

/* Abschnitts-Überschriften sollen als Struktur lesbar sein und nicht wie
   klickbare Einträge – klein, gesperrt, gedämpft. */
.account-menu .dropdown-header {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
    font-weight: 600; color: var(--hd-muted); padding-bottom: .15rem;
}

/* Nicht freigeschaltete Welt: erkennbar zurückgenommen, aber klickbar
   (führt auf die Upsell-Seite) – deshalb kein disabled. */
.account-menu .dropdown-item.locked { color: var(--hd-muted) !important; }
.account-menu .dropdown-item.locked .bi { opacity: .8; }

/* Avatar-Menü: Hell/Dunkel-, Sprach- und Upgrade-Zeile */
.dropdown-menu .theme-item { display: flex; align-items: center; gap: .5rem; width: 100%;
    background: none; border: 0; text-align: left; cursor: pointer; }
.dropdown-menu .lang-item { display: flex; align-items: center; gap: .5rem; }
.dropdown-menu .lang-item .lang-toggle { margin-left: auto; }
.dropdown-menu .upgrade-item { color: var(--hd-accent) !important; font-weight: 600; }
.dropdown-menu .upgrade-item .bi { color: var(--hd-accent); }
.dropdown-menu .upgrade-item:hover,
.dropdown-menu .upgrade-item:focus { background: color-mix(in srgb, var(--hd-accent) 14%, transparent); color: var(--hd-accent) !important; }

/* ---------- Wissens-Kartendecks (app/views/card-deck.php) ----------
   Nur Bestands-Token (--hd-*), deshalb tragen beide Themes ohne eigene Regeln. */

.deck { display: block; }

/* Karte: Text links, Bild rechts. Darunter einspaltig mit dem Bild ÜBER dem
   Text - auf dem Handy will man zuerst sehen, worum es geht. */
.deck-card { height: 100%; }
.deck-card-body { display: flex; flex-direction: column-reverse; gap: 1.25rem; }
.deck-text { min-width: 0; }
.deck-art {
    flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: center;
    align-self: center;
}
.deck-art > * { max-width: 11rem; }
@media (min-width: 992px) {
    .deck-card-body { flex-direction: row; align-items: flex-start; gap: 1.75rem; }
    .deck-text { flex: 1 1 auto; }
    .deck-art { flex: 0 0 11rem; align-self: flex-start; position: sticky; top: 1rem; }
    .deck-art > * { max-width: none; width: 100%; }
}
.deck-title { margin-top: .15rem; }

/* Ohne JavaScript: alle Karten untereinander, Bedienleiste weg. Eine
   Schaltfläche, die nichts tun kann, ist schlimmer als keine. */
.deck.is-static .carousel-item { display: block !important; margin-bottom: 1.25rem; }
.deck.is-static .deck-nav { display: none; }

/* ---- Kartenbilder (app/views/hd-emblem.php) ---- */
.hd-emblem { display: block; width: 100%; height: auto; }
.hd-em-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Körper-Ausschnitte: Zentrumsform, Tore, Kanalverbindung */
.hd-em-center { fill: color-mix(in srgb, var(--hd-primary) 16%, transparent); stroke: var(--hd-border); stroke-width: 2.4; }
.hd-em-channel { stroke: url(#hdEmGold); stroke-width: 6; stroke-linecap: round; }
.hd-em-gate circle { fill: var(--hd-surface); stroke: var(--hd-border); stroke-width: 1.6; }
.hd-em-gate text { fill: var(--hd-muted); font-family: Inter, system-ui, sans-serif; font-weight: 600; user-select: none; }
.hd-em-gate.is-on circle { fill: url(#hdEmGold); stroke: var(--hd-accent); stroke-width: 2.4; filter: url(#hdEmGlow); }
.hd-em-gate.is-on text { fill: #1a1320; font-weight: 700; }

/* Planetenmotive: Striche und Flächen zentral, damit die 13 eine Familie sind */
.hd-em-planet { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18)); }
.hd-em-planet .p-l { fill: none; stroke: var(--hd-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hd-em-planet .p-f { fill: url(#hdEmDef); }
.hd-em-planet .p-sun { fill: url(#hdEmSun); }
.hd-em-planet .p-sun-g { filter: url(#hdEmGlow); }
/* Striche, die AUF einer Füllung liegen (Erde), brauchen Kontrast statt Akzent */
.hd-em-planet .p-on-fill { stroke: color-mix(in srgb, #fff 78%, transparent); stroke-width: 1.8; }
.hd-em-glyph { display: block; font-size: 3.4rem; line-height: 1; text-align: center; color: var(--hd-accent); }

/* ---- Unterpunkte einer Karte ---- */
.deck-facet { display: flex; gap: .8rem; padding: .8rem 0; border-top: 1px solid var(--hd-border); }
.deck-facet:first-of-type { border-top: 0; padding-top: 0; }
.deck-facet-icon {
    flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: .65rem; display: grid; place-items: center;
    background: color-mix(in srgb, var(--hd-primary) 14%, transparent); color: var(--hd-primary); font-size: .95rem;
}
.deck-facet-label {
    display: block; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--hd-muted); margin-bottom: .12rem;
}

/* Kompass: der Bodygraph ist dort Beiwerk zu den Faktenkarten, nicht das
   Hauptmotiv - 60 % der Spalte, also 40 % schmaler als zuvor. */
.kompass-bg .hd-bodygraph { max-width: 60%; }

/* Karte in der Karte: die Darstellung, die sonst auf der Detailseite steht */
.deck-inner {
    background: color-mix(in srgb, var(--hd-primary) 6%, transparent);
    border: 1px solid var(--hd-border);
    border-radius: .9rem;
    padding: 1.1rem 1.25rem;
    margin-inline: auto;
    max-width: 46rem;
}
.deck-inner > :first-child { margin-top: 0; }
.deck-inner > :last-child { margin-bottom: 0; }
.deck-inner h3, .deck-inner h4 { font-size: 1rem; margin-top: 1.1rem; margin-bottom: .3rem; color: var(--hd-accent); }
.deck-inner > h3:first-child, .deck-inner > h4:first-child { margin-top: 0; }

/* Label-Listen aus den aufbereiteten Briefing-Texten (knowledge_prettify) */
.content-body dl.kv { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .9rem 0; }
.content-body dl.kv dt {
    font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--hd-muted); font-weight: 600; white-space: nowrap;
}
.content-body dl.kv dd { margin: 0; }
@media (max-width: 34rem) {
    /* Zu schmal für zwei Spalten: Label über den Wert. */
    .content-body dl.kv { grid-template-columns: 1fr; gap: .1rem; }
    .content-body dl.kv dd { margin-bottom: .55rem; }
}

/* Sinnbild für Kategorien ohne eigenes Bild (FAQ, Themen, Anwendungen) */
.deck-emblem { display: block; font-size: 2.6rem; line-height: 1; color: var(--hd-accent); text-align: center; }

/* Profil-Linien: sechs Balken, die beiden aktiven in Gold */
.deck-lines { display: flex; flex-direction: column; gap: .32rem; width: 100%; }
.deck-line { display: flex; align-items: center; gap: .55rem; }
.deck-line em { font-style: normal; font-size: .72rem; color: var(--hd-muted); width: 1rem; text-align: right; flex: 0 0 auto; }
.deck-line::after {
    content: ""; flex: 1 1 auto; height: .4rem; border-radius: 999px;
    background: var(--hd-border); opacity: .55;
}
.deck-line.is-on em { color: var(--hd-accent); font-weight: 700; }
.deck-line.is-on::after { background: linear-gradient(90deg, #e6c98a, #c79a55); opacity: 1; height: .58rem; }

/* ---- Bedienleiste: GENAU EINE ZEILE ----
   Bootstraps .form-select ist display:block;width:100% - im Flex-Container nahm
   das Sprungmenü dadurch die ganze Zeile und drückte die Pfeile heraus. Deshalb
   hier width:auto und ein eigener flex-basis-Wert. */
.deck-nav { display: none; align-items: center; gap: .6rem; margin-top: 1.25rem; flex-wrap: nowrap; }
.deck.js-ready .deck-nav { display: flex; }
.deck-arrow { flex: 0 0 auto; }
.deck-jump { width: auto; flex: 0 1 16rem; min-width: 0; }
.deck-dots { display: flex; gap: .38rem; flex-wrap: nowrap; min-width: 0; overflow-x: auto; padding: .2rem 0; }
.deck-dot {
    flex: 0 0 auto; width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 50%;
    background: var(--hd-border); opacity: .55; transition: transform .2s ease, background .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.deck-dot:hover { opacity: 1; }
.deck-dot.active {
    background: var(--hd-accent); opacity: 1; transform: scale(1.35);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hd-accent) 28%, transparent);
}
.deck-counter { flex: 0 0 auto; margin-left: auto; font-size: .82rem; color: var(--hd-muted); white-space: nowrap; }
.deck-detail { margin-top: .35rem; }
.deck-detail summary { cursor: pointer; color: var(--hd-primary); font-size: .9rem; }
.deck-detail[open] summary { margin-bottom: .35rem; }
.deck-link { display: inline-block; margin-top: .9rem; }

/* Sehr schmal: der Zähler weicht, nie die Pfeile */
@media (max-width: 26rem) {
    .deck-counter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .deck-dot, .hd-em-gate circle { transition: none; }
}


/* =====================================================================
   Portal-Cockpit + Welt-Umschalter (2026-07-25)
   Scope: app/views/world-switch.php, app/views/portal-membership.php,
          portal/index.php. Nur --hd-*-Tokens, damit beide Themes tragen.
   ===================================================================== */

/* ---------- Welt-Umschalter, Variante 'compact' (Konto-Menü) ---------- */
.world-switch-item { padding: .15rem .75rem .35rem; }
.world-switch-item .app-world-switch { display: flex; width: 100%; }
.world-switch-item .world-pill { flex: 1 1 0; }

/* ---------- Portal-Übersicht: Inhalt + mitscrollende Mitgliedschaft ----------
   align-items: start ist Pflicht – sonst streckt der Grid-Track das Aside auf
   volle Zeilenhöhe und position: sticky hat nichts, woran es kleben könnte. */
.portal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}
.portal-side { position: sticky; top: 1.5rem; }

@media (max-width: 991.98px) {
    /* Quellreihenfolge ist [main, aside] – einspaltig stapelt die Mitgliedschaft
       damit unter den Inhalt, ohne dass es dafür ein order: braucht. */
    .portal-grid { grid-template-columns: 1fr; }
    .portal-side { position: static; }
}

/* Kacheln stehen jetzt in der schmaleren Hauptspalte: zwei statt vier. Als
   Modifier, damit die Basisregel für andere Verwender unverändert bleibt. */
.dash-tiles.is-narrow { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 575.98px) {
    .dash-tiles.is-narrow { grid-template-columns: 1fr; }
}

/* ---------- Mitgliedschafts-Sidebar (portal-membership.php) ---------- */
.side-plan-name {
    font-family: var(--hd-font-display, Georgia, serif);
    font-size: 1.45rem; line-height: 1.2; margin: 0;
}
.side-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.side-stat {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .55rem .3rem; border-radius: .7rem;
    background: var(--hd-surface-2); text-decoration: none; color: var(--hd-text);
    transition: background .15s;
}
.side-stat:hover, .side-stat:focus-visible { background: rgba(var(--hd-primary-rgb), .12); color: var(--hd-text); }
.side-stat b {
    font-family: var(--hd-font-display, Georgia, serif);
    font-size: 1.2rem; font-variant-numeric: tabular-nums; color: var(--hd-accent);
}
.side-stat span { font-size: .72rem; color: var(--hd-muted); text-align: center; line-height: 1.2; }

.quota-row + .quota-row { margin-top: .6rem; }
.quota-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.quota-head span:last-child { color: var(--hd-muted); white-space: nowrap; }
.quota-bar { height: 5px; border-radius: 3px; background: var(--hd-surface-2); overflow: hidden; margin-top: .3rem; }
.quota-bar > i { display: block; height: 100%; background: var(--hd-primary); border-radius: 3px; }
/* Aufgebraucht: Warnfarbe statt stillem Voll-Balken. */
.quota-row.is-empty .quota-bar > i { background: var(--hd-warning); }

.portal-side .btn { width: 100%; }
.side-cancel {
    background: none; border: 0; padding: 0;
    font-size: .8rem; color: var(--hd-muted); text-decoration: underline;
}
.side-cancel:hover, .side-cancel:focus-visible { color: var(--hd-text); }

/* ---------- Tarifseite ----------
   Aufbau ab xl: die vier Ebenen-Koepfe als Tabellenkoepfe ueber allem, darunter
   der kostenlose Einstieg quer, darunter Stufe 1 und Stufe 2, rechts das
   Gesamtpaket ueber die volle Hoehe.

       +--------+--------+--------+---------+--------+
       |        | Portal | Privat | Beruf   |Komplett|   <- Koepfe (Zeile 1)
       +--------+--------+--------+---------+--------+
       |  Kostenlos starten                 | Guide  |   <- Einstieg (Zeile 2)
       +--------+--------+--------+---------+  VIP   |
       |        |Kompass |  Plus  |  Plus   | (volle |   <- Stufe 1 (Zeile 3)
       +--------+--------+--------+---------+ Hoehe) |
       |        | Tiefe  |Premium |Premium  |        |   <- Stufe 2 (Zeile 4)
       +--------+--------+--------+---------+--------+

   WARUM DER EINSTIEG QUER LIEGT: Er gilt fuer alle drei Ebenen. Als vierte
   Karte in der Portal-Spalte las er sich wie eine Portal-Stufe - und die
   Boersen wirkten, als begaennen sie erst bei 9,90.

   WARUM DIE KOEPFE GANZ OBEN STEHEN: Zwischen Einstieg und Stufen zerschnitten
   sie die Spalte in zwei Haelften. Als Tabellenkoepfe beschriften sie die ganze
   Saeule von oben herab, den Einstieg eingeschlossen.

   WARUM JEDE KARTE EIN EIGENES RASTERFELD IST: Lag eine Ebene als ein Stapel im
   Raster, war jede Spalte ein eigener Flex-Container - die Kanten zwischen
   Stufe 1 und 2 fluchteten nicht, und weil die Portal-Karten nur fuenf Zeilen
   haben, endete die Portal-Spalte rund 220 px ueber den Welten. Als eigene
   Rasterfelder teilen sich alle drei dieselben Zeilen und enden zwangslaeufig
   gleich.

   Grid statt Bootstrap-Spalten, weil sich "ueber drei Spalten" und "ueber alle
   Zeilen" mit Rows/Cols nicht ausdruecken laesst. Darunter stapelt alles. */
.plan-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 1200px) {
    /* Fuenf Spalten: ein Einzug, die drei Ebenen, das Gesamtpaket. Die erste
       Spalte bleibt LEER - das ist Absicht, kein Rest. Der kostenlose Einstieg
       beginnt links davor und die Bezahlstufen ruecken darunter ein; dadurch
       liest sich der Einstieg als eigene Ebene und nicht als vierte Stufe im
       selben Raster.

       Platzierung explizit statt per Auto-Placement: sonst fiele die erste
       Ebene in die leere Spalte, sobald jemand eine Section umsortiert. */
    .plan-grid {
        grid-template-columns: 0.77fr repeat(4, minmax(0, 1fr));
        /* Die Zeilen MUESSEN ausdruecklich benannt sein. `-1` zaehlt von der
           letzten Linie des EXPLIZITEN Rasters rueckwaerts; ohne
           grid-template-rows gibt es nur eine einzige Linie, Linie 1 ist dann
           gleich Linie -1, Start und Ende fallen zusammen und der Browser wirft
           die Endangabe weg. Genau daran scheiterte
           `.plan-col-bundle { grid-row: 1 / -1 }` bisher stillschweigend: die
           Spalte belegte nur die Zeile des Einstiegs, und die Guide-Karte hing
           oben statt unten buendig abzuschliessen. */
        grid-template-rows: auto auto auto auto;  /* Koepfe · Einstieg · Stufe 1 · Stufe 2 */
    }

    /* Die Koepfe sitzen auf der Grundlinie ihrer Zeile, damit unterschiedlich
       lange Erklaertexte unten buendig stehen statt oben. */
    .plan-col-head    { grid-row: 1; align-self: end; }
    .plan-head-portal { grid-column: 2; }
    .plan-head-privat { grid-column: 3; }
    .plan-head-beruf  { grid-column: 4; }
    .plan-head-bundle { grid-column: 5; }

    /* Bis Spalte 5, also buendig mit der letzten Ebenen-Spalte. Endete die
       Zeile mitten ueber "Privat", staende dort eine Kante ohne Bezug. */
    .plan-free       { grid-column: 1 / 5; grid-row: 2; }

    /* Die Ebene selbst verschwindet als Kasten, damit ihre beiden Karten
       unmittelbar Rasterfelder werden (siehe oben). Das Gesamtpaket bekommt
       das NICHT: es braucht seinen eigenen Kasten fuer `position: relative`
       und den ::before-Rahmen - mit `display: contents` gaebe es kein Element,
       an dem der Rahmen haengen koennte. */
    .plan-col { display: contents; }
    /* Die Spalte steht an den KARTEN, nicht an der Ebene: mit
       `display: contents` hat die Section keinen Kasten mehr, an dem eine
       grid-column haengen koennte - die Karten fielen sonst per
       Auto-Platzierung in die leere Einzugsspalte. */
    .plan-col-portal > .plan-card-wrap { grid-column: 2; }
    .plan-col-privat > .plan-card-wrap { grid-column: 3; }
    .plan-col-beruf  > .plan-card-wrap { grid-column: 4; }
    .plan-row-1 { grid-row: 3; }
    .plan-row-2 { grid-row: 4; }

    .plan-col-bundle { grid-column: 5; grid-row: 2 / -1; }
}
@media (max-width: 1199.98px) {
    /* Gestapelt bleibt die Ebene ein Block: Kopf oben, darunter ihre Stufen.
       Der Abstand kommt hier von der Ebene selbst, weil es unterhalb des
       Rasters keinen Raster-Abstand mehr gibt, der die Karten trennt. */
    .plan-col { display: flex; flex-direction: column; gap: 1rem; }
}

/* Der Einstieg: Kopfzeile ueber die volle Breite, darunter die zwei
   Leistungsgruppen - ausgerichtet an den Ebenen, ueber denen sie stehen. */
.plan-free-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Kopfzeile: Titel links, Preis mittig, Knopf rechts. Sie liegt bewusst NICHT
   im Spaltenraster - die erste Rasterspalte ist der schmale Einzug (rund 90 px
   bei 1200), dort passt weder Titel noch Knopf hinein. */
.plan-free-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.5rem;
}
.plan-free-head > .min-w-0 { flex: 1 1 18rem; }
.plan-free-head .plan-free-cta { margin-left: auto; min-width: 12rem; }

.plan-free-cols {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* Zwischen Tablet und Raster: schlicht nebeneinander, es gibt hier noch
       keine Spalten, an denen sich etwas ausrichten liesse. */
    .plan-free-cols { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
    /* Dieselben Anteile und derselbe Abstand wie im aeusseren Raster:
       Einzug (leer) · Portal · Privat+Beruflich. Damit steht "Im Portal" ueber
       der Portal-Spalte und "In deiner Welt" ueber den beiden Welten.

       ANMERKUNG: Auf den Pixel fluchten die Kanten nicht - dazwischen liegt der
       Innenabstand der Karte (card-body), der alles gleichmaessig nach innen
       schiebt. Die Verhaeltnisse stimmen, die Zuordnung ist lesbar; pixelgenau
       ginge nur ohne seitliches Padding, was den Rahmen an den Text stossen
       liesse. */
    .plan-free-cols { grid-template-columns: 0.77fr 1fr 2fr; gap: 1.5rem; }
    .plan-free-cols > :first-child { grid-column: 2; }
    .plan-free-cols > :last-child  { grid-column: 3; }
}
.plan-free-group { border-left: 2px solid var(--hd-border); padding-left: 1rem; }
@media (max-width: 767.98px) {
    .plan-free-group { border-left: 0; padding-left: 0; }
}

/* Leistungsgruppen auf der Gesamtpaket-Karte: „Im Portal", „In beiden Welten",
   „Nur im Gesamtpaket". Kein linker Balken wie bei .plan-free-group - die Karte
   hat schon einen Rahmen, ein zweiter Strich daneben waere Zierrat. Getrennt
   wird durch eine feine Linie, die den letzten Block auslaesst. */
.plan-bundle-group + .plan-bundle-group {
    border-top: 1px solid var(--hd-border);
    padding-top: .8rem;
    margin-top: .8rem;
}
/* Der Abstand zur Coach-Flaeche haengt an DIESER, nicht an der letzten Gruppe:
   `:last-of-type` zaehlt alle <div>-Geschwister im card-body, und das letzte
   ist der Knopf-Container - eine Regel auf .plan-bundle-group:last-of-type
   haette also nie gegriffen. Ab 1200 px ueberschreibt margin-top: auto diesen
   Wert und verteilt den Rest der Spaltenhoehe. */

/* Einladung an Coaches im Gesamtpaket - abgesetzt als eigene Flaeche, damit sie
   nicht als weitere Leistungsgruppe missverstanden wird. Toenung in der
   Primaerfarbe, weil es fuer den Akzent kein --hd-accent-rgb gibt; dieselbe
   Handschrift wie der Rahmen um die Spalte. */
.plan-coach {
    background: rgba(var(--hd-primary-rgb), .09);
    border: 1px solid rgba(var(--hd-primary-rgb), .28);
    border-radius: .8rem;
    padding: .9rem 1rem;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}
.plan-coach-head {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: .55rem;
}
/* Der Punkt vor jedem Eyebrow entfaellt hier: die Plakette daneben markiert den
   Block schon, und in der schmalen Buendel-Spalte kostet er die Zeile, die der
   Titel zum Umbruch braucht. */
.plan-coach-head .eyebrow::before { content: none; }
/* Die Plakette traegt hier den Akzent, nicht die Primaerfarbe: auf der
   getoenten Flaeche verschwaende sie sonst. */
.plan-coach-head .icon-badge {
    background: rgba(var(--hd-primary-rgb), .18);
    color: var(--hd-accent);
}
.plan-coach-tools li {
    display: flex; gap: .5rem; align-items: flex-start;
    margin-bottom: .3rem;
}
.plan-coach-tools .bi {
    flex: none; color: var(--hd-accent); font-size: .9rem; margin-top: .15rem;
}

/* Am Karten-Wrapper statt an der Ebene: `.plan-col` ist ab 1200 px
   `display: contents` und damit als Vorfahre unzuverlaessig - und die
   Buendel-Karte liegt ohnehin ausserhalb einer Ebene. */
.plan-card-wrap .card-soft { border-radius: .9rem; }
.plan-card-wrap .card-body { padding: 1.15rem; }
.plan-card-wrap { display: flex; }
.plan-card-wrap > .card { width: 100%; }

/* Platz fuer das Abzeichen auch in Karten ohne eines. Sonst ruecken die Karten
   ohne "Beliebt" um eine Zeile nach oben und die Kartentitel einer Reihe
   beginnen auf verschiedenen Hoehen. */
.plan-badge-slot { min-height: 1.85rem; }

/* Aufklapp-Knopf unter einer gekuerzten Leistungsliste. Kein Knopf-Aussehen:
   er gehoert zur Liste, nicht zu den Handlungen der Karte. */
.plan-feat-more {
    display: inline-flex; align-items: center; gap: .35rem;
    background: none; border: 0; padding: .15rem 0;
    font-size: .82rem; font-weight: 600; color: var(--hd-accent);
    cursor: pointer;
}
/* `hidden` allein reicht an beiden Stellen NICHT: die Regel dafuer steht im
   Browser-Stylesheet und verliert gegen jede Autorenregel - beim Knopf gegen
   das inline-flex hier, bei den Zeilen sogar gegen Bootstraps
   `.d-flex { display: flex !important }`. Ohne diese zwei Zeilen blieben
   Knopf und eingeklappte Zeilen einfach sichtbar. */
.plan-feat-more[hidden] { display: none; }
.plan-feat-extra[hidden] { display: none !important; }
.plan-feat-more:hover { text-decoration: underline; }
.plan-feat-more:focus-visible {
    outline: 2px solid var(--hd-accent);
    outline-offset: 3px;
    border-radius: .25rem;
}
.plan-feat-more .bi { font-size: .8rem; transition: transform .18s ease; }
.plan-feat-more[aria-expanded="true"] .bi { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
    .plan-feat-more .bi { transition: none; }
}

/* Das Gesamtpaket hebt sich als ganze Spalte ab, nicht nur als Karte: ein
   ruhiger Rahmen um die Spalte, damit im Vier-Spalten-Raster sofort erkennbar
   ist, dass hier ein Angebot ANDERER Art steht (ein Vertrag statt einer Stufe). */
.plan-col-bundle {
    position: relative;
}
/* Der ::before-Rahmen ist ein positioniertes Pseudo-Element und wuerde sonst
   UEBER der Karte liegen (ein Schleier auf dem Text). Der Selektor zeigte
   frueher auf einen `.d-flex`-Stapel, den es hier nicht mehr gibt - die Karte
   lag deshalb bis zuletzt unter dem Verlauf. */
.plan-col-bundle > .plan-card-wrap {
    position: relative;
    z-index: 1;
}
.plan-col-bundle::before {
    content: "";
    position: absolute;
    inset: -0.75rem 0.15rem -0.75rem 0.15rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(var(--hd-primary-rgb), 0.45);
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(var(--hd-primary-rgb), 0.16), transparent 70%),
        linear-gradient(180deg, rgba(var(--hd-primary-rgb), 0.07), rgba(0, 0, 0, 0) 60%);
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}
/* Im Raster fuellt die einzelne Buendel-Karte die Hoehe der Nachbarspalten,
   sonst haengt sie oben und der Rahmen wirkt angeschnitten. */
@media (min-width: 1200px) {
    .plan-col-bundle { display: flex; flex-direction: column; }
    .plan-col-bundle .plan-card-wrap { flex: 1 1 auto; }
    /* Die Karte reicht ueber drei Rasterzeilen. Ohne das saesse das Angebot
       oben und der Knopf ganz unten, mit einem Loch dazwischen: so steht das
       Angebot oben, Einladung und Handlung stehen zusammen am Fuss. */
    .plan-col-bundle .plan-coach { margin-top: auto; }
}
/* Unterhalb des Vier-Spalten-Rasters braucht der Rahmen Luft nach unten,
   sonst stoesst er an die naechste gestapelte Ebene. */
@media (max-width: 1199.98px) {
    .plan-col-bundle { margin-bottom: 1.25rem; }
}

/* ---------- Verwaltung: Listen-Leiste (admin-toolbar.php) ----------
   Eine Zeile über jeder Liste: Suche, Statusfilter, Trefferzahl, Aktionen.
   Umbricht auf schmalen Schirmen, damit die Suche nicht zusammengedrückt wird. */
.admin-toolbar-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
}
.admin-toolbar-search { flex: 1 1 16rem; min-width: 12rem; }
/* search_box.php bringt sein eigenes mb-3 mit – in der Leiste stört das. */
.admin-toolbar-search form { margin-bottom: 0 !important; }
.admin-toolbar-count { color: var(--hd-muted); font-size: .85rem; white-space: nowrap; }
.admin-toolbar-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

.admin-filter { display: inline-flex; gap: .25rem; padding: .2rem;
    background: var(--hd-surface-2); border: 1px solid var(--hd-border); border-radius: 2rem; }
.admin-filter-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .8rem; border-radius: 2rem;
    font-size: .85rem; color: var(--hd-muted); text-decoration: none;
    transition: background .15s, color .15s;
}
.admin-filter-pill:hover, .admin-filter-pill:focus-visible { color: var(--hd-text); }
.admin-filter-pill.active {
    background: rgba(var(--hd-primary-rgb), .16);
    color: var(--hd-text); font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(var(--hd-primary-rgb), .45);
}

/* Sammelauswahl: die Aktionsleiste bleibt sichtbar, wird aber erst scharf,
   wenn wirklich etwas markiert ist (JS setzt disabled). */
.bulk-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .6rem .85rem; margin-bottom: 1rem;
    background: var(--hd-surface-2); border: 1px solid var(--hd-border); border-radius: .75rem;
}
.bulk-bar[hidden] { display: none; }
.bulk-count { color: var(--hd-muted); font-size: .85rem; margin-right: auto; }
.bulk-card { position: relative; }
.bulk-card .bulk-check {
    position: absolute; top: .6rem; left: .6rem; z-index: 2;
    width: 1.15rem; height: 1.15rem;
}
/* Markierte Karte deutlich absetzen – sonst verliert man bei 30 Kacheln den
   Überblick, was gleich mit einem Klick verarbeitet wird. */
.bulk-card:has(.bulk-check:checked) > .card {
    border-color: var(--hd-primary);
    box-shadow: inset 0 0 0 1px var(--hd-primary);
}

/* ---------- Beziehungsleiste der Wissensseiten ----------
   Tor -> Zentrum -> Kanal: die fachlichen Nachbarn eines Artikels. Bewusst
   ruhig gehalten - die Leiste steht unter dem Text und soll den Weiterweg
   anbieten, nicht mit ihm konkurrieren. Label und Liste stehen ab sm
   nebeneinander, darunter gestapelt. */
.knowledge-relations .rel-group {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: .6rem 0;
    border-top: 1px solid var(--hd-border);
}
.knowledge-relations .rel-group:first-of-type { border-top: 0; padding-top: 0; }

.knowledge-relations .rel-label {
    flex: 0 0 auto;
    min-width: 6rem;
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hd-muted);
    padding-top: .1rem;
}
.knowledge-relations .rel-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ---------- Chart-Einstieg im Wissensbereich ----------
   Eine Zeile: Symbol, Text, Knopf. Steht auf der Uebersicht ueber dem Raster
   und unter jedem der neun Kartendecks - der Rechner ist das Angebot, das
   Lexikon drumherum ist Nachschlagewerk. Ab md nebeneinander, darunter
   gestapelt und mittig, damit der Knopf auf dem Handy volle Breite bekommt. */
.knowledge-chart-cta .card-body {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.knowledge-chart-cta .min-w-0 { flex: 1 1 16rem; }

@media (max-width: 575.98px) {
    .knowledge-chart-cta .card-body { justify-content: center; text-align: center; }
    .knowledge-chart-cta .btn { width: 100%; }
}

/* ---------- Chart-Pruefung: Tagesband (/chart-pruefen) ----------
   Ein Streifen fuer 24 Stunden. Jeder Abschnitt ist ein eigenes Chart, seine
   Breite ist sein Anteil am Tag (die Prozentwerte stehen inline, weil sie
   Daten sind, keine Gestaltung - Muster wie views/charts/funnel.php).

   Die vier Farben sind ABSICHTLICH neutral und nicht rot/gruen: Ein spaeterer
   Abschnitt ist nicht "schlechter" als ein frueherer, er ist nur ein anderer.
   Die Wertung steht in der Urteilskarte darueber, nicht im Band. */
.cc-band {
    position: relative;
    display: flex;
    height: 1.5rem;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--hd-border);
}
.cc-seg { display: block; height: 100%; }
.cc-seg-0 { background: rgba(var(--hd-primary-rgb), .70); }
.cc-seg-1 { background: rgba(var(--hd-primary-rgb), .45); }
.cc-seg-2 { background: rgba(var(--hd-primary-rgb), .85); }
.cc-seg-3 { background: rgba(var(--hd-primary-rgb), .30); }

/* Die eigene Geburtszeit als Marke im Band. transform, damit der Strich auf
   dem Wert sitzt und nicht rechts daneben. */
.cc-mark {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-1px);
    background: var(--hd-accent);
}

/* Die Zeile mit der eigenen Geburtszeit - und im Knoten-Block die Seite, auf
   der die Konvention tatsaechlich etwas verschiebt. */
.cc-row-mine > * { background: rgba(var(--hd-primary-rgb), .10); }

/* Die Urteilskarte traegt ihre Einstufung als linke Kante. Farbe hier ist
   Aussage, nicht Schmuck: gruen = haelt den Tag, gelb = Profil wackelt,
   rot = Typ oder Autoritaet kippen. */
.cc-verdict { border-left: 4px solid var(--hd-border); }
.cc-verdict.cc-stable   { border-left-color: var(--hd-good); }
.cc-verdict.cc-soft     { border-left-color: var(--hd-warning); }
.cc-verdict.cc-critical { border-left-color: var(--hd-danger); }

/* ---------- Ortssuche am Geburtsort-Feld (assets/js/place-picker.js) ----------
   Die Liste haengt am Feld, nicht am Formular: sie sitzt zwischen Eingabe und
   .invalid-feedback, weshalb der Wrapper KEINEN Platz einnehmen darf, solange
   nichts vorgeschlagen wird (sonst verschiebt sich das Formular bei jedem
   Tastendruck). Deshalb position: relative mit Hoehe 0 und die Liste absolut
   darueber.

   Ohne das Skript existiert nichts davon - das Feld bleibt ein Textfeld. */
.place-suggest-wrap {
    position: relative;
    height: 0;
}
.place-suggest {
    position: absolute;
    z-index: 5;
    top: .25rem;
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem;
    max-height: 17rem;
    overflow-y: auto;
    background: var(--hd-surface);
    border: 1px solid var(--hd-border);
    border-radius: .5rem;
    box-shadow: 0 .75rem 1.75rem rgba(0, 0, 0, .28);
}
.place-suggest-item {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .4rem .6rem;
    border-radius: .375rem;
    cursor: pointer;
}
/* Tastatur und Maus fuehren zum selben Zustand - .is-active setzt place-picker.js. */
.place-suggest-item.is-active,
.place-suggest-item:hover {
    background: var(--hd-surface-2);
}
.place-suggest-name { font-weight: 600; }
.place-suggest-region,
.place-suggest-tz {
    color: var(--hd-muted);
    font-size: .8125rem;
}
.place-suggest-tz { margin-left: auto; }

@media (max-width: 575.98px) {
    /* Auf dem Handy ist die Zeitzone die unwichtigste der drei Angaben und
       wuerde den Ortsnamen umbrechen lassen. */
    .place-suggest-tz { display: none; }
}

/* =====================================================================
   Vier Ansichten der Vergleichsseite
   Zu portal/vergleich.php + assets/js/compare-tabs.js.

   OHNE JAVASCRIPT bleibt die Leiste verborgen und alle vier Bereiche stehen
   untereinander - die Seite in ihrer Reihenfolge von vor der Umstellung. Eine
   Schaltfläche, die nichts tun kann, ist schlimmer als keine (dasselbe Muster
   wie .deck-nav weiter oben). Es braucht deshalb KEIN is-static wie beim
   Kartendeck: dort hebt es Bootstraps eigenes display:none auf, hier gibt es
   nichts aufzuheben - die Abwesenheit von .js-ready genügt.

   Wortschatz von .world-pill, aber als <button>. Der Zustand hängt an
   aria-selected und nicht an einer zweiten Klasse: das Skript muss das Attribut
   ohnehin setzen, also ist es der einzige Wahrheitsort.
   ===================================================================== */

.cmp-tabs {
    display: none;                 /* erst .js-ready schaltet die Leiste frei */
    flex-wrap: wrap;
    gap: .25rem;
    padding: .2rem;
    margin-bottom: 1.75rem;
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border);
    border-radius: 2rem;
}
.cmp-switch.js-ready .cmp-tabs { display: flex; }

.cmp-tab {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.25rem;
    padding: .45rem .9rem;
    border: 0;
    border-radius: 2rem;
    background: none;
    color: var(--hd-muted);
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.cmp-tab:hover { color: var(--hd-text); background: rgba(var(--hd-primary-rgb), .1); }
.cmp-tab[aria-selected="true"],
.cmp-tab[aria-selected="true"]:hover { background: var(--hd-primary-d); color: #fff; }
.cmp-tab .bi { font-size: .9em; }

/* Fokusring nach INNEN: der Reiter sitzt auf der eingefärbten Leiste, ein
   äußerer Ring würde vom Nachbarreiter und vom Leistenrand verdeckt.
   --hd-accent, weil --hd-primary der Füllung des aktiven Reiters gleicht und
   darauf verschwinden würde. */
.cmp-tab:focus { outline: none; }
.cmp-tab:focus-visible { outline: 2px solid var(--hd-accent); outline-offset: -3px; }

/* Gestapelt (ohne Skript) braucht es Luft zwischen den Bereichen - sie ersetzt
   das mt-4/mt-5, das die Überschriften vorher trugen. Geschaltet steht immer
   nur einer da und braucht keinen Vorlauf.

   KEIN overflow auf .cmp-pane: das würde die Vorschlagsliste der Ortssuche
   abschneiden (.place-suggest ist absolut positioniert in einem
   height:0-Wrapper). */
.cmp-pane + .cmp-pane { margin-top: 3rem; }
.cmp-switch.js-ready .cmp-pane { display: none; margin-top: 0; }
.cmp-switch.js-ready .cmp-pane.is-active { display: block; }

/* Schmal: vier Beschriftungen passen nicht in eine Zeile. Sie brechen um statt
   zu rollen - eine Rollleiste versteckt einen vierten Reiter, den dann niemand
   sucht. Zwei Reihen vertragen den Stadion-Radius nicht. */
@media (max-width: 30rem) {
    .cmp-tabs { border-radius: 1rem; }
    .cmp-tab { flex: 1 1 40%; }
}

/* ---------- Team-Vorschau (/zusammenarbeit) ----------
   Acht Personenzeilen und eine 8x8-Matrix; beides muss auf dem Telefon
   funktionieren, ohne dass die Seite seitlich rollt. */
.team-row[hidden] { display: none; }
.team-row { border-top: 1px solid var(--hd-border); padding-top: 1.25rem; margin-top: 1.25rem; }
.team-row:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.team-row-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.team-row-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; flex: 0 0 auto;
    border-radius: 50%; background: rgba(var(--hd-primary-rgb), .15);
    color: var(--hd-primary); font-size: .82rem; font-weight: 700;
}

/* Die Matrix rollt in ihrem eigenen Kasten - die Seite selbst nie. */
.team-matrix { overflow-x: auto; }
.team-matrix table { margin: 0; min-width: 22rem; }
.team-matrix th, .team-matrix td { text-align: center; white-space: nowrap; vertical-align: middle; }
.team-matrix th[scope="row"] { text-align: left; }
.team-matrix td.is-self { color: var(--hd-muted); }
/* Drei Baender statt eines Verlaufs: ein Wert wie "64" ist indikativ, eine
   feine Abstufung waere eine Genauigkeit, die er nicht hat. */
.team-score { display: inline-block; min-width: 2.6rem; padding: .15rem .4rem; border-radius: .5rem; font-weight: 600; }
.team-score.is-hi { background: rgba(var(--hd-primary-rgb), .22); color: var(--hd-text); }
.team-score.is-mid { background: rgba(var(--hd-primary-rgb), .1); color: var(--hd-text); }
.team-score.is-lo { background: none; color: var(--hd-muted); }

/* ============================================================
   15. Druck
   ------------------------------------------------------------
   Die Beratung verspricht "dauerhaft in deinem Bereich, druckbar". Es gibt
   bewusst KEINE PDF-Bibliothek im Projekt (composer.json: nur PHPMailer und
   Stripe) - der Browser kann das laengst, und eine Abhaengigkeit mehr will
   gepflegt werden. Damit "Als PDF speichern" ein Ergebnis liefert, das man
   aufheben moechte, faellt hier alles weg, was auf Papier nichts verloren hat.
   ============================================================ */
@media print {
    /* Bildschirmkunst kostet Toner und sagt auf Papier nichts. */
    .cosmic-bg, .header-fx, .hero .mandala { display: none !important; }

    /* Bedienelemente: was man nicht anklicken kann, gehoert nicht aufs Blatt. */
    .site-header, .site-footer, .navbar, .btn, .plan-feat-more,
    .home-cta-band, .pagination, .search-box { display: none !important; }

    /* Heller Grund unabhaengig vom gewaehlten Erscheinungsbild - der
       Dunkelmodus wuerde sonst als schwarze Flaeche gedruckt. */
    :root, [data-bs-theme] {
        --hd-bg: #ffffff; --hd-bg-2: #ffffff;
        --hd-surface: #ffffff; --hd-surface-2: #ffffff;
        --hd-text: #000000; --hd-muted: #333333;
        --hd-border: #999999;
    }
    body { background: #fff !important; color: #000 !important; }

    /* Karten werden zu schlichten Abschnitten: Schatten und Verlaeufe
       drucken sich als graue Kaesten. */
    .card, .card-soft, .prose-card {
        background: none !important;
        box-shadow: none !important;
        border: 1px solid #999 !important;
    }
    .card-soft::before { display: none !important; }

    /* Ueberschriften nicht allein am Seitenende zuruecklassen. */
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
    .card, .prose-card, li { break-inside: avoid; page-break-inside: avoid; }

    /* Aufgeklappte Leistungslisten: der Knopf ist weg, die Zeilen bleiben. */
    .plan-feat-extra { display: list-item !important; }

    /* Ziel eines Links ausschreiben - auf Papier ist er sonst verloren.
       Nur bei echten externen Adressen, nicht bei Ankern. */
    .content-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }

    /* Team-Vorschau (/zusammenarbeit): die Paarmatrix darf nicht ueber den
       Umbruch zerrissen werden - ohne Kopfzeile ist die untere Haelfte
       unlesbar. Und die Zentrumsflaechen brauchen auf Weiss einen Rand, sonst
       verschwindet "offen" gegen das Blatt. */
    .team-matrix, .team-matrix table { break-inside: avoid; page-break-inside: avoid; }
    .hd-center { stroke: #666 !important; }
    .hd-center.is-team-fragile { stroke: #000 !important; }
}