/* ==========================================================================
   Zwei Welten: Cumodis (Abo-Kunden, Kundennummer CM) und Projekte (Agenturkunden, DF)
   Jede Welt hat einen eigenen Farbton, damit man auf einen Blick sieht, wo man ist:
     Cumodis = Petrol, Projekte = Orange. Die neutrale Portalfarbe (Indigo) bleibt für alles Übrige.
   Eine Seite oder Karte mit der Klasse .welt-cumodis / .welt-projekte übersteuert --accent
   und färbt damit Knöpfe, Links, Fokusring und Auswahl automatisch im Farbton der Welt.
   Baut auf den Tokens aus app.css auf und wird danach geladen.
   ========================================================================== */

/* 1. Farbwerte ---------------------------------------------------------- */
:root {
    --cumodis: #0f766e;
    --cumodis-hover: #115e59;
    --cumodis-soft: #d5f3ee;
    --cumodis-text: #0b5f58;
    --cumodis-ring: rgb(15 118 110 / 0.3);

    --projekt: #c2410c;
    --projekt-hover: #9a3412;
    --projekt-soft: #ffe8d6;
    --projekt-text: #9a3412;
    --projekt-ring: rgb(194 65 12 / 0.3);
}

:root[data-theme="dark"] {
    --cumodis: #2dd4bf;
    --cumodis-hover: #5eead4;
    --cumodis-soft: #0d2b29;
    --cumodis-text: #5eead4;
    --cumodis-ring: rgb(45 212 191 / 0.35);

    --projekt: #fb923c;
    --projekt-hover: #fdba74;
    --projekt-soft: #33200e;
    --projekt-text: #fdba74;
    --projekt-ring: rgb(251 146 60 / 0.35);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --cumodis: #2dd4bf;
        --cumodis-hover: #5eead4;
        --cumodis-soft: #0d2b29;
        --cumodis-text: #5eead4;
        --cumodis-ring: rgb(45 212 191 / 0.35);

        --projekt: #fb923c;
        --projekt-hover: #fdba74;
        --projekt-soft: #33200e;
        --projekt-text: #fdba74;
        --projekt-ring: rgb(251 146 60 / 0.35);
    }
}

/* 2. Farbwelt einer Seite oder Karte ------------------------------------ */
.welt-cumodis {
    --accent: var(--cumodis);
    --accent-hover: var(--cumodis-hover);
    --accent-soft: var(--cumodis-soft);
    --accent-text: var(--cumodis-text);
    --ring: 0 0 0 3px var(--cumodis-ring);
}

.welt-projekte {
    --accent: var(--projekt);
    --accent-hover: var(--projekt-hover);
    --accent-soft: var(--projekt-soft);
    --accent-text: var(--projekt-text);
    --ring: 0 0 0 3px var(--projekt-ring);
}

/* Seitenkopf mit Farbbalken links */
.content.welt-cumodis .page-header,
.content.welt-projekte .page-header {
    padding-left: 16px;
    border-left: 4px solid var(--accent);
}

/* 3. Menü ----------------------------------------------------------------- */
.nav-title small {
    margin-left: 8px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.nav-punkt[data-welt="cumodis"],
.nav-group[data-welt="cumodis"] { --gruppe: var(--cumodis); --gruppe-soft: var(--cumodis-soft); --gruppe-text: var(--cumodis-text); }
.nav-punkt[data-welt="projekte"],
.nav-group[data-welt="projekte"] { --gruppe: var(--projekt); --gruppe-soft: var(--projekt-soft); --gruppe-text: var(--projekt-text); }

.nav-group[data-welt] .nav-title { display: flex; align-items: center; }
.nav-group[data-welt] .nav-title::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--gruppe);
}
.nav-group[data-welt] .nav-link.is-active,
.nav-punkt[data-welt] .nav-link.is-active,
.nav-punkt[data-welt] .nav-eltern.is-active { background: var(--gruppe-soft); color: var(--gruppe-text); }
.nav-group[data-welt] .nav-link.is-active::before,
.nav-punkt[data-welt] .nav-link.is-active::before,
.nav-punkt[data-welt] .nav-eltern.is-active::before { background: var(--gruppe); }
.nav-punkt[data-welt] > .nav-eltern > .icon:first-child { color: var(--gruppe); }

/* 4. Kundenart: Badges und Avatare --------------------------------------- */
.badge--cumodis { background: var(--cumodis-soft); color: var(--cumodis-text); border-color: transparent; }
.badge--projekte { background: var(--projekt-soft); color: var(--projekt-text); border-color: transparent; }

.avatar--firma.avatar--cumodis {
    color: var(--cumodis-text);
    background: linear-gradient(145deg, var(--cumodis-soft), color-mix(in srgb, var(--cumodis) 22%, var(--cumodis-soft)));
}
.avatar--firma.avatar--projekte {
    color: var(--projekt-text);
    background: linear-gradient(145deg, var(--projekt-soft), color-mix(in srgb, var(--projekt) 22%, var(--projekt-soft)));
}
/* Beides: linke Hälfte Cumodis, rechte Hälfte Projekte */
.avatar--firma.avatar--beide {
    color: var(--text);
    background: linear-gradient(105deg, var(--cumodis-soft) 50%, var(--projekt-soft) 50%);
}

/* 5. Reiter (Kundenart, Vertragsstatus) ----------------------------------- */
.reiter { display: flex; flex-wrap: wrap; gap: 6px; }
.reiter-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 0.9rem;
    font-weight: 560;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: nowrap;
}
.reiter-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.reiter-link.is-aktiv { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.reiter-zahl {
    padding: 0 8px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

.reiter-link--cumodis { color: var(--cumodis-text); border-color: color-mix(in srgb, var(--cumodis) 40%, var(--border)); }
.reiter-link--cumodis:hover { color: var(--cumodis-text); background: var(--cumodis-soft); }
.reiter-link--cumodis.is-aktiv { color: var(--on-accent); background: var(--cumodis); border-color: var(--cumodis); }

.reiter-link--projekte { color: var(--projekt-text); border-color: color-mix(in srgb, var(--projekt) 40%, var(--border)); }
.reiter-link--projekte:hover { color: var(--projekt-text); background: var(--projekt-soft); }
.reiter-link--projekte.is-aktiv { color: var(--on-accent); background: var(--projekt); border-color: var(--projekt); }

/* 6. Getrennte Blöcke in der Kundenakte ------------------------------------ */
.welten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 20px; align-items: start; }
.welt-block { overflow: hidden; border-top: 3px solid var(--accent); }
.welt-block .card-header { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.welt-block h2 { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-text); }
.welt-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--on-accent);
    background: var(--accent);
}
.welt-summe { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.welt-betrag { font-weight: 650; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .reiter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .content.welt-cumodis .page-header,
    .content.welt-projekte .page-header { padding-left: 12px; }
}