/* ══ PraeLux · Kommandozentrale ══════════════════════════════════════════
 * Farbtokens in drei Zuständen: der nackte :root-Block trägt Hell,
 * prefers-color-scheme trägt Dunkel für die Systemeinstellung, und
 * [data-theme] gewinnt in beide Richtungen, damit der Umschalter im Kopf
 * die Systemeinstellung überstimmen kann. Jede Farbe ist im nackten :root
 * definiert — eine Farbe, die es nur im Dunkelblock gibt, fehlt im
 * ungesetzten Zustand und das ist genau der Fehler, der zu weißer Schrift
 * auf weißem Grund führt.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    /* Flächen und Schrift */
    --c-canvas: #EFF2F6;
    --c-surface: #FFFFFF;
    --c-surface-2: #F6F8FA;
    --c-ink: #101828;
    --c-ink-2: #48566A;
    /* Gemessen: #76839A ergab auf weisser Flaeche 3,83:1 und auf
       --c-surface-2 nur 3,60:1 — unter den 4,5:1, die kleine Schrift
       braucht. Betroffen war eine ganze Klasse: Brotkrume, Einheiten,
       Fusszeilen, Tabellenkoepfe, Zeitangaben. Jetzt 5,7:1 / 5,4:1. */
    --c-ink-3: #5B677B;
    --c-line: #E0E5EC;
    --c-grid: #EAEEF3;
    --c-tint: #F0F3F7;

    /* Seitenleiste — dunkel in beiden Modi, das ist Absicht. Der Ton ist
       das PraeLux-Blau: dieselbe Farbe, die das Altsystem in .bg-praelux
       und in der Wortmarke fuehrt. Sie ist in Hell und Dunkel gleich,
       damit die Marke nicht die Farbe wechselt. */
    --c-rail: var(--c-brand-blau);
    --c-rail-ink: #EDF1F7;
    /* Gemessen auf --c-rail-hover, wo Suchfeld und Umgebungskennzeichen
       sitzen: bei .56 kam der Browser auf 4,4:1 — knapp unter den 4,5:1,
       die kleine Schrift braucht. Mit .62 sind es gut 5:1. */
    --c-rail-ink-2: rgba(237, 241, 247, .62);
    --c-rail-line: rgba(255, 255, 255, .08);
    --c-rail-hover: rgba(255, 255, 255, .06);
    --c-rail-active: rgba(91, 147, 240, .16);

    /* ── Die Marke ───────────────────────────────────────────────────
       Zwei Farben, beide verbindlich:

         PraeLux Blau   #152942  Pantone 2965c
                        CMYK 100 / 82 / 45 / 48 · RGB 21 / 41 / 66
         PraeLux Braun  #3B2D24  Pantone 2322c
                        CMYK  55 / 61 / 65 / 72 · RGB 59 / 45 / 36

       Wo unten eine dieser beiden Farben steht, steht sie als Marke und
       nicht als Geschmacksfrage. Aufhellungen davon tragen denselben
       Farbton und dieselbe Saettigung — sie sind dieselbe Farbe, nur
       heller, damit sie auf dunklem Grund noch lesbar ist. */
    --c-brand-blau: #152942;
    --c-brand-braun: #3B2D24;

    /* Akzent — das PraeLux-Blau. Es traegt die primaeren Knoepfe, die
       Verweise, den Fokusrahmen und jeden aktiven Zustand. Dieselbe Farbe
       wie die Seitenleiste: die Marke ist eine, nicht zwei. */
    --c-accent: var(--c-brand-blau);
    --c-accent-ink: #FFFFFF;
    --c-accent-soft: #E8EAEC;

    /* Derselbe Akzent auf der dunklen Leiste waere Navy auf Navy. Dort
       traegt eine Aufhellung derselben Farbe (gleicher Farbton, gleiche
       Saettigung, hoehere Helligkeit) — 5,6:1 auf der Leiste. */
    --c-rail-accent: #7BA3D5;

    /* Nutzerzeichen. Diese beiden Token fehlten: .av verwies auf sie, sie
       waren nirgends definiert — der Kreis hatte dadurch gar keine Farbe.
       Er traegt jetzt das PraeLux-Braun, die zweite Markenfarbe. Auf
       hellem Grund setzt er sich mit 13:1 ab; auf der navyfarbenen
       Leiste gibt ihm der Ring in .av die Kante. */
    --c-av: var(--c-brand-braun);
    --c-av-ink: #FFFFFF;

    /* Zustände — Textfarbe, Fläche und Füllfarbe sind drei Dinge */
    /* Gemessen: #0E7C55 auf --st-ok-bg ergab 4,49:1 — um ein Hundertstel
       unter den 4,5:1, die kleine Schrift braucht. Betroffen war jedes
       gruene Abzeichen (.pill.ok, .chip.ok). Jetzt 5,4:1. */
    --st-ok: #0B6E4B;
    --st-ok-bg: #DEF3EA;
    --st-ok-fill: #0E9F6E;
    --st-warn: #96590A;
    --st-warn-bg: #FBEFDA;
    --st-warn-fill: #D9860B;
    --st-bad: #B02318;
    --st-bad-bg: #FBE3E0;
    --st-bad-fill: #DC2626;

    /* Datenreihen — vier geprüfte Töne, nicht mehr. Eine fünfte Reihe wird
       zu kleinen Vielfachen, nicht zu einem fünften Ton.

       Reihe 1 liegt auf dem Markenton 213°. Das vorherige #2563EB war
       ein zweites, kräftigeres Blau neben dem Akzent — und stand bei
       Grünschwäche mit dem Violett von Reihe 3 bei einem Abstand von
       0,6 (OKLab ×100), also praktisch auf derselben Farbe. Mit #1F5FA8
       liegt das schlechteste Paar der Palette bei 10,7. */
    --s1: #1F5FA8;
    --s2: #0D9488;
    --s3: #7C3AED;
    --s4: #D97706;

    /* Karrierestufen als geordnete Blauskala — Rang ist eine Ordnung,
       keine Kategorie. Das Kürzel steht zusätzlich auf jeder Karte. */
    --t-lead: #0B3B6F;
    --t-senior: #1E6BB8;
    --t-junior: #5E9BDD;
    --t-trainee: #A8C6E4;
    --t-lead-ink: #fff;
    --t-senior-ink: #fff;
    --t-junior-ink: #fff;
    --t-trainee-ink: #0B2038;

    --tr-qm: #F1ECFB;

    /* Bänder unter einem Ziel-Bullet: schlecht, mittel, gut. Sie färben
       den Trog hinter dem Balken, damit man ohne Rechnen sieht, in
       welchem Bereich der Wert liegt. */
    --band-lo: #FBE3E0;
    --band-mid: #FBEFDA;
    --band-hi: #DEF3EA;

    --c-scrim: rgba(16, 24, 40, .5);
    --sh: 0 1px 2px rgba(16, 24, 40, .05);
    --sh-lift: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 22px -10px rgba(16, 24, 40, .2);
    --sh-dlg: 0 24px 60px -20px rgba(16, 24, 40, .45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --c-canvas: #080D14;
        --c-surface: #141C28;
        --c-surface-2: #1A2331;
        --c-ink: #E7ECF3;
        --c-ink-2: #98A6BA;
        --c-ink-3: #8D99A5;
        --c-line: #222C3B;
        --c-grid: #1C2534;
        --c-tint: #1A2331;
        --c-rail: var(--c-brand-blau);
        --c-rail-ink: #E7ECF3;
        --c-rail-ink-2: rgba(231, 236, 243, .62);
        --c-rail-line: rgba(255, 255, 255, .07);
        --c-rail-hover: rgba(255, 255, 255, .05);
        --c-rail-active: rgba(91, 147, 240, .18);
        /* Die Marke, aufgehellt: #152942 liegt auf dem dunklen Grund
           praktisch auf der Flaeche. Gleicher Farbton und gleiche
           Saettigung, nur hellere Stufe — 5,8:1 auf --c-surface. */
        --c-accent: #6C99D0;
        --c-accent-ink: #07101E;
        --c-accent-soft: #15243A;
        --st-ok: #4ED0A0;
        --st-ok-bg: rgba(78, 208, 160, .14);
        --st-ok-fill: #4ED0A0;
        --st-warn: #E9B460;
        --st-warn-bg: rgba(233, 180, 96, .14);
        --st-warn-fill: #E9B460;
        --st-bad: #F08A80;
        --st-bad-bg: rgba(240, 138, 128, .14);
        --st-bad-fill: #F08A80;
        --s1: #6C99D0;
        --s2: #0FA396;
        --s3: #8B6BF0;
        --s4: #C98410;
        --t-lead: #1E4C82;
        --t-senior: #3D7FC4;
        --t-junior: #6FA6DF;
        --t-trainee: #9CBBD8;
        --t-trainee-ink: #0B2038;
        --tr-qm: #2A2440;
        --band-lo: rgba(240, 138, 128, .16);
        --band-mid: rgba(233, 180, 96, .16);
        --band-hi: rgba(78, 208, 160, .16);
        --tr-qm: #2A2440;
    --band-lo: rgba(240, 138, 128, .16);
    --band-mid: rgba(233, 180, 96, .16);
    --band-hi: rgba(78, 208, 160, .16);
    --c-scrim: rgba(2, 5, 10, .66);
        --sh: 0 1px 2px rgba(0, 0, 0, .45);
        --sh-lift: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 26px -12px rgba(0, 0, 0, .75);
        --sh-dlg: 0 24px 60px -20px rgba(0, 0, 0, .85);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --c-canvas: #080D14;
    --c-surface: #141C28;
    --c-surface-2: #1A2331;
    --c-ink: #E7ECF3;
    --c-ink-2: #98A6BA;
    --c-ink-3: #8D99A5;
    --c-line: #222C3B;
    --c-grid: #1C2534;
    --c-tint: #1A2331;
    --c-rail: var(--c-brand-blau);
    --c-rail-ink: #E7ECF3;
    --c-rail-ink-2: rgba(231, 236, 243, .62);
    --c-rail-line: rgba(255, 255, 255, .07);
    --c-rail-hover: rgba(255, 255, 255, .05);
    --c-rail-active: rgba(91, 147, 240, .18);
    --c-accent: #6C99D0;
    --c-accent-ink: #07101E;
    --c-accent-soft: #15243A;
    --st-ok: #4ED0A0;
    --st-ok-bg: rgba(78, 208, 160, .14);
    --st-ok-fill: #4ED0A0;
    --st-warn: #E9B460;
    --st-warn-bg: rgba(233, 180, 96, .14);
    --st-warn-fill: #E9B460;
    --st-bad: #F08A80;
    --st-bad-bg: rgba(240, 138, 128, .14);
    --st-bad-fill: #F08A80;
    --s1: #6C99D0;
    --s2: #0FA396;
    --s3: #8B6BF0;
    --s4: #C98410;
    --t-lead: #1E4C82;
    --t-senior: #3D7FC4;
    --t-junior: #6FA6DF;
    --t-trainee: #9CBBD8;
    --t-trainee-ink: #0B2038;
    --c-scrim: rgba(2, 5, 10, .66);
    --sh: 0 1px 2px rgba(0, 0, 0, .45);
    --sh-lift: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 26px -12px rgba(0, 0, 0, .75);
    --sh-dlg: 0 24px 60px -20px rgba(0, 0, 0, .85);
}


/* ── Marke ─────────────────────────────────────────────────────────────── */
/* Echtes PraeLux-Logo. Die Grafik besteht ausschliesslich aus weissen
   Pixeln, Anker und Schriftzug sind ausgestanzt (Alpha 0). Sie wird erst
   auf farbigem Grund sichtbar; der Navy-Traeger tut genau das, ohne die
   Grafik umzufaerben — deshalb ist das Logo in beiden Modi identisch. */
:root {
    --pl-logo:url("data:image/png;base64,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");
}

.plmark {
    background-color: #152942;
    background-image: var(--pl-logo);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 50%;
    flex-shrink: 0;
    display: block;
    font-size: 0;
    color: transparent;
}

/* ── Grundlage ─────────────────────────────────────────────────────────── */

html,
body,
#__nuxt {
    @apply h-full;
}

body {
    background: var(--c-canvas);
    color: var(--c-ink);
    font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
    letter-spacing: -.012em;
}

/* Der Reset für Knöpfe liegt bewusst auf Spezifität 0, damit jede
   Komponentenregel ihn schlägt. Mit .app button hätte er (0,1,1) und würde
   gegen jede einzelne Klasse gewinnen — genau der Fehler, der im Entwurf
   dreimal aufgetreten ist. */
:where(button) {
    font: inherit;
    cursor: pointer;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: inherit;
}

:where(input, select, textarea) {
    font: inherit;
    color: inherit;
}

*:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

span[role="alert"] {
    @apply text-bad;
}

svg.ic {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    stroke-width: 1.75;
}

/* Zahlen, die untereinander stehen, brauchen gleiche Zeichenbreite */
.fig {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

/* Querscrollende Tabellen: der Schatten am rechten Rand sagt, dass da
   noch mehr kommt. Im Bestand steht dort ein Pfeil mit der Beschriftung
   „Mehr Spalten“ — das ist keine Bedienhilfe, sondern ein Hinweis. */
.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: inset -15px 0 12px -15px rgba(11, 32, 56, .3);
}

.scroll-x::-webkit-scrollbar {
    height: 8px;
}

.scroll-x::-webkit-scrollbar-thumb {
    background: var(--c-line);
    border-radius: 99px;
}

/* Nur für Bildschirmleser */
.vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}