/* =========================================================
   App-Erkennung kr4z (nur Oberfläche): Streifen oben, Kennzeichen, App-Umschalter.
   Dazu eine eigene Rahmenfarbe (--app-chrome) für Seitenleiste, dunkle Kopfzeilen, Kopf-Karten
   und Hauptknöpfe sowie ein heller Ton (--app-tint) für den aktiven Menüpunkt – damit kr4z schon
   am Rahmen erkennbar ist. Kurse, Diagramme, Gewinn-/Verlustfarben und Statusfarben bleiben
   unverändert; alles gilt nur am Bildschirm, im Druck ist nichts davon zu sehen.
   ========================================================= */
:root {
    --app-accent: #6d28d9;      /* kr4z: Violett */
    --app-accent-ink: #fff;     /* Schrift auf der Akzentfarbe */
    --app-stripe-height: 4px;
    --app-color-hvt: #15803d;
    --app-color-privat: #1d4ed8;
    --app-color-kr4z: #6d28d9;
    /* Rahmen (statt des gemeinsamen Navy #10263b) */
    --app-chrome: #24124a;          /* kr4z: tiefes Violett – Weiß darauf 16,7:1 */
    --app-chrome-soft: #3a2470;     /* Verlauf der Kopf-Karten – Weiß darauf 12,6:1 */
    --app-hero: #4b2a9a;            /* Kopf-Karten (Vermögen …), heller als der Rahmen – Weiß 10,0:1, Mint 5,7:1 */
    --app-hero-soft: #5b3cb0;       /* Verlauf der Kopf-Karten – Weiß 7,7:1, Mint 4,4:1 */
    --app-hero-label: #ece4ff;      /* Label auf den Kopf-Karten – 6,9:1 auf #5b3cb0 */
    --app-chrome-text: #c3b6e2;     /* Menüpunkte auf dem Rahmen – 8,8:1 */
    --app-chrome-muted: #9d8fc4;    /* Beschriftungen auf dem Rahmen – 5,7:1 */
    /* Aktiver Menüpunkt: helles Violett statt Mint */
    --app-tint: #c9b6f7;
    --app-tint-bg: #efe9fd;         /* aktiver Eintrag der hellen Tab-Leiste am Handy */
    --app-tint-ink: #24124a;        /* Schrift auf dem hellen Ton – 9,1:1 bzw. 14,1:1 */
}

/* Streifen ganz oben auf jeder Seite */
body::before {
    position: fixed; z-index: 2147483000; top: 0; right: 0; left: 0;
    height: var(--app-stripe-height);
    background: var(--app-accent);
    content: "";
    pointer-events: none;
}

/* Kennzeichen neben dem Titel */
.app-badge {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    padding: 2px 7px; border-radius: 999px;
    color: var(--app-accent-ink); background: var(--app-accent);
    font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.5;
    text-transform: none; vertical-align: middle; white-space: nowrap;
}

/* Umschalter HVT · Privat · kr4z */
.app-switch {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 3px; border: 1px solid rgba(23, 48, 70, .12); border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: 11px; font-weight: 700; line-height: 1;
}
.app-switch-link {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 24px; padding: 4px 9px; border-radius: 999px;
    color: #4f6475; text-decoration: none; white-space: nowrap;
}
.app-switch-link::before {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--app-dot, currentColor); content: "";
}
.app-switch-hvt { --app-dot: var(--app-color-hvt); }
.app-switch-privat { --app-dot: var(--app-color-privat); }
.app-switch-kr4z { --app-dot: var(--app-color-kr4z); }
.app-switch-link:hover { color: #10263b; background: rgba(23, 48, 70, .07); }
.app-switch-link:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 1px; }
.app-switch-link[aria-current="page"] { color: var(--app-accent-ink); background: var(--app-accent); }
.app-switch-link[aria-current="page"]::before { background: var(--app-accent-ink); }

/* Variante auf dunkler Fläche (Seitenleiste) */
.app-switch--dark { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); }
.app-switch--dark .app-switch-link { color: #b6c6d2; }
.app-switch--dark .app-switch-link:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.app-switch--dark .app-switch-link[aria-current="page"] { color: var(--app-accent-ink); background: var(--app-accent); }

/* Platzierung in der kr4z-Oberfläche: Logo-Kachel „K4“ in Violett, Umschalter in Seitenleiste und Menü */
.kz-brand .kz-mark, .ck-brand .ck-mark { color: var(--app-accent-ink); background: var(--app-accent); }
.kz-sidebar > .app-switch, .ck-sidebar > .app-switch { align-self: flex-start; max-width: 100%; box-sizing: border-box; margin: -20px 0 22px 10px; }
.kz-sidebar > .app-switch .app-switch-link, .ck-sidebar > .app-switch .app-switch-link { padding: 4px 7px; }
.app-menu-nav .premium-nav-inner > .app-switch { align-self: flex-start; flex: 0 0 auto; margin: 0 0 6px; pointer-events: auto; }
/* Im App-Menü gelten sonst die Stile der Menüpunkte (Spalten, 9 px) – hier zurück auf die Pillen-Form */
.bottom-nav.premium-nav .premium-nav-inner > .app-switch .app-switch-link {
    flex: 0 0 auto !important; flex-direction: row !important; gap: 5px !important;
    width: auto !important; min-width: 0 !important; min-height: 30px !important; padding: 6px 11px !important;
    border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
    color: #4f6475 !important; background: transparent !important;
    font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important;
}
.bottom-nav.premium-nav .premium-nav-inner > .app-switch .app-switch-link[aria-current="page"] { color: var(--app-accent-ink) !important; background: var(--app-accent) !important; }
.app-switch--top { display: none; }
.ck-eyebrow .app-badge { margin-left: 6px; }
/* Seiten mit gemeinsamer Kopfzeile (nav()): Kennzeichen hinter dem Seitentitel */
body:has(.kz-sidebar) header.topbar > .brand::after {
    display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
    color: var(--app-accent-ink); background: var(--app-accent);
    font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; vertical-align: middle;
    content: "kr4z";
}
.login-switch { display: flex; width: max-content; margin: 0 auto 14px; }

@media (max-width: 900px) {
    .app-switch--top { display: inline-flex; margin-bottom: 10px; }
}

/* =========================================================
   Rahmenfarbe je App (nur Bildschirm). Über die vorhandenen Tokens (--ck-navy/--ck-mint im
   Cockpit, --kz-navy/--kz-mint auf den übrigen Seiten) – aber nur innerhalb von Rahmen,
   Kopf-Karten und Hauptknöpfen umdefiniert, damit Überschriften, Kurse und Diagramme
   unverändert bleiben. „body“ vor einigen Regeln: diese Datei lädt vor cockpit.css/kz-theme.css.
   ========================================================= */
@media screen {
    /* Cockpit „Heute“: Seitenleiste, Kopf-Karte, Tab-Leiste */
    .ck-sidebar { --ck-navy: var(--app-chrome); --ck-mint: var(--app-tint); }
    .ck-sidebar .ck-nav-item.active { --ck-navy: var(--app-tint-ink); }
    body .ck-sidebar .ck-nav-item:not(.active):not(:hover) { color: var(--app-chrome-text); }
    body .ck-brand small { color: var(--app-chrome-muted); }
    .ck-hero { --ck-navy: var(--app-hero); --ck-navy-soft: var(--app-hero-soft); }
    body .ck-hero .ck-eyebrow.ck-on-dark { color: var(--app-hero-label); }
    body .ck-tabbar > a.active { color: var(--app-tint-ink); background: var(--app-tint-bg); }

    /* Übrige Seiten (nav()): Seitenleiste, Tab-Leiste, Kopfzeile, Menü */
    .kz-sidebar { --kz-navy: var(--app-chrome); --kz-mint: var(--app-tint); }
    .kz-sidebar .kz-side-item.active { --kz-navy: var(--app-tint-ink); }
    body .kz-sidebar .kz-side-item:not(.active):not(:hover) { color: var(--app-chrome-text) !important; }
    body .kz-brand small { color: var(--app-chrome-muted); }
    body .kz-tabbar .active { color: var(--app-tint-ink); background: var(--app-tint-bg); }
    header.topbar,
    .app-menu-nav { --kz-navy: var(--app-chrome); }

    /* Hauptknöpfe und aktive Reiter (bisher Navy) */
    .btn.primary,
    .chip.on,
    .research-hub-tab.active,
    .activity-tabs a.active { --kz-navy: var(--app-chrome); }

    /* Dunkle Kopf-Karten (Vermögen, ETFs, Aktien, Krypto) */
    .portfolio-hero,
    .crypto-hero,
    .dashboard-calm .calm-balance { --kz-navy: var(--app-hero); --kz-navy-2: var(--app-hero-soft); }
    body .portfolio-hero .portfolio-kicker,
    body .crypto-hero .crypto-kicker { color: var(--app-hero-label) !important; }
    .portfolio-hero .btn.primary,
    .crypto-hero .btn.primary { --kz-mint: var(--app-tint); --kz-navy: var(--app-tint-ink); }

    /* Anmeldung */
    .login-switch ~ .card .btn.primary { border-color: var(--app-chrome); background: var(--app-chrome); }
}

@media print {
    body::before, .app-switch, .app-badge { display: none !important; }
    body:has(.kz-sidebar) header.topbar > .brand::after { display: none !important; }
}