/* =========================================================================
   Grundlage

   Die Palette ist um das Hausrot des Logos gebaut, #AC1638 bei OKLCH-Ton 21.
   Die Flächen sind deshalb warm neutral statt kühl, und die Leitfarbe der
   Daten ist ein Tintenblau. Rot und Blau nebeneinander ist die Paarung des
   gedruckten Dokuments, nicht der direkte Gegenton, der das Hausrot vorher
   bekämpft hat. Grün kommt gar nicht mehr vor.

   Die Werte sind gerechnet, nicht geschätzt. Die Statusskala hält unter
   Protanopie und Deuteranopie einen OKLab-Abstand von 11.2 im Dunkeln und
   18.3 am Tag, unter Normalsicht 17.9 und 25.0, alle über 3:1 Kontrast
   gegen ihre Panelfläche.
   ========================================================================= */

/* ------------------------------------------------ Tageslicht, auf Wunsch */

:root[data-thema="hell"] {
    color-scheme: light;

    /* Flächen - warmes Papier, das dem Hausrot entgegenkommt */
    --tiefe: #F0EBEA;
    --tiefe-tief: #E6DFDD;
    --pult: #FFFFFF;
    --pult-hoch: #F8F4F3;
    --glas: #CCC2BE;
    --glas-still: #E5DEDB;

    /* Schrift */
    --stimme: #1C1614;
    --stimme-leise: #574D49;
    --stimme-still: #857A75;

    /* Status - reserviert, immer mit Beschriftung, nie als Serienfarbe */
    --verfehlt: #96122F;
    --knapp: #B9821C;
    --ziel: #2D5FA0;

    /* Leitfarbe der Daten. Sie ist zugleich die Farbe des erreichten Ziels. */
    --eis: #2D5FA0;
    --eis-hell: #1D4478;

    /* Sequenzielle Rampe: wenig ist hell, viel ist dunkel */
    --rampe-1: #ECF0F6;
    --rampe-2: #CFDBEB;
    --rampe-3: #AFC4DE;
    --rampe-4: #8AA6CB;
    --rampe-5: #4C74A5;
    --rampe-6: #2B537F;

    --tinte-1: #1C1614;
    --tinte-2: #1C1614;
    --tinte-3: #1C1614;
    --tinte-4: #1C1614;
    --tinte-5: #FFFFFF;
    --tinte-6: #FFFFFF;

    /* Neutrale Rampe für Mitbewerber, immer direkt beschriftet */
    --neutral-1: #5A514C;
    --neutral-2: #776D67;
    --neutral-3: #968B84;

    --marke: #AC1638;
    --schatten: 0 10px 26px rgb(28 22 20 / 0.16);
}

/* --------------------------------------------- Nachtsicht, der Standard */

:root,
:root[data-thema="dunkel"] {
    color-scheme: dark;

    --tiefe: #14110F;
    --tiefe-tief: #0D0B0A;
    --pult: #1E1A18;
    --pult-hoch: #282320;
    --glas: #453E39;
    --glas-still: #302B27;

    --stimme: #EFE6DB;
    --stimme-leise: #B6A99D;
    --stimme-still: #8A7D72;

    --verfehlt: #E2596A;
    --knapp: #D89A2E;
    --ziel: #7FA8D8;

    --eis: #7FA8D8;
    --eis-hell: #A6C3E6;

    /* Im Dunkeln kippt der Anker: wenig ist dunkel, viel ist hell */
    --rampe-1: #1C2230;
    --rampe-2: #26344C;
    --rampe-3: #31486A;
    --rampe-4: #3E5D89;
    --rampe-5: #5B7FAE;
    --rampe-6: #8AA9D2;

    --tinte-1: #EFE6DB;
    --tinte-2: #EFE6DB;
    --tinte-3: #EFE6DB;
    --tinte-4: #EFE6DB;
    --tinte-5: #14110F;
    --tinte-6: #14110F;

    --neutral-1: #746A63;
    --neutral-2: #8A8079;
    --neutral-3: #A99E96;

    --marke: #F92050;
    --schatten: 0 12px 32px rgb(0 0 0 / 0.6);
}

/* ------------------------------------------------- Themenunabhängige Werte */

:root {
    --schrift-anzeige: "Archivo", "Arial Narrow", "Helvetica Neue", sans-serif;
    --schrift-text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;

    /* Größen - modulare Skala, Verhältnis 1.26 */
    --t-xs: 0.72rem;
    --t-s: 0.82rem;
    --t-m: 0.94rem;
    --t-l: 1.18rem;
    --t-xl: 1.75rem;
    --t-2xl: 2.6rem;
    --t-3xl: 4.4rem;

    --a-1: 4px;
    --a-2: 8px;
    --a-3: 14px;
    --a-4: 22px;
    --a-5: 34px;
    --a-6: 54px;

    --bahn: 1560px;
    --rund: 12px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--tiefe);
    color: var(--stimme);
    font-family: var(--schrift-text);
    font-size: var(--t-m);
    line-height: 1.55;
    font-feature-settings: "tnum" 0;
    -webkit-font-smoothing: antialiased;
}

/* Zahlen laufen überall auf gleicher Breite, damit Spalten stehen. */
table td,
table th,
.ablesung {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 {
    font-family: var(--schrift-anzeige);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.012em;
    margin: 0;
}

h1 {
    font-size: var(--t-xl);
    font-stretch: 118%;
    font-weight: 700;
}

h2 {
    font-size: var(--t-l);
    font-stretch: 112%;
}

h3 {
    font-size: var(--t-m);
    font-weight: 600;
    font-stretch: 106%;
}

p {
    margin: 0 0 var(--a-3);
    max-width: 68ch;
}

a {
    color: var(--eis);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--eis-hell);
}

:focus-visible {
    outline: 2px solid var(--eis);
    outline-offset: 3px;
    border-radius: 3px;
}

.sprung {
    position: absolute;
    left: -9999px;
}

.sprung:focus {
    left: var(--a-3);
    top: var(--a-3);
    z-index: 50;
    background: var(--pult-hoch);
    padding: var(--a-2) var(--a-3);
    border-radius: var(--rund);
}


/* ========================================================== Gesamtaufbau */

.huelle {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    min-height: 100vh;
}

/* ------------------------------------------------------------ Seitenleiste */

.seitenleiste {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    background: var(--tiefe-tief);
    border-right: 1px solid var(--glas);
    padding: var(--a-4) 0 var(--a-3);
    display: flex;
    flex-direction: column;
    gap: var(--a-4);
}

.marke {
    display: block;
    padding: 0 var(--a-4);
    flex: 0 0 auto;
}

/* Das Logo steht frei auf dem Grund. Im Dunkeln wird es angehoben, damit das
   Hausrot trägt: der Faktor lässt den Farbton unangetastet und hebt nur die
   Helligkeit, von 2.7:1 auf 4.8:1 gegen die Leistenfläche. */
.marke img {
    display: block;
    height: 34px;
    width: auto;
}

:root[data-thema="dunkel"] .marke img,
:root[data-thema="dunkel"] .briefkopf img {
    filter: brightness(1.45);
}

.leiste-auftrag {
    padding: 0 var(--a-4);
}

.leiste-projekt {
    font-size: var(--t-s);
    color: var(--stimme);
}

.leiste-kunde {
    font-size: var(--t-xs);
    color: var(--stimme-still);
    margin-top: 2px;
}

/* Die Wellenwahl steht in der Leiste gestapelt und im Seitenkopf in einer Zeile. */
.wellenwahl {
    display: flex;
    align-items: center;
    gap: var(--a-2);
}

.wellenwahl label {
    font-size: var(--t-xs);
    color: var(--stimme-still);
}

.seitenleiste .wellenwahl {
    display: grid;
    gap: 5px;
    padding: 0 var(--a-4);
}

.seitenleiste .wellenwahl select {
    width: 100%;
}

select,
button.knopf {
    font-family: var(--schrift-text);
    font-size: var(--t-s);
    color: var(--stimme);
    background: var(--pult);
    border: 1px solid var(--glas);
    border-radius: 8px;
    padding: 7px 12px;
    cursor: pointer;
}

select:hover,
button.knopf:hover {
    background: var(--pult-hoch);
}

/* ------------------------------------------------------------- Navigation */

.hauptnavigation {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 var(--a-3);
    flex: 1 1 auto;
}

.hauptnavigation a {
    display: block;
    position: relative;
    padding: 9px var(--a-3);
    border-radius: 8px;
    color: var(--stimme-leise);
    font-size: var(--t-s);
    text-decoration: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.hauptnavigation a:hover {
    background: var(--pult-hoch);
    color: var(--stimme);
}

/* Der aktive Eintrag trägt als einziges Element der Oberfläche das Hausrot. */
.hauptnavigation a[aria-current="page"] {
    background: var(--pult);
    color: var(--stimme);
    box-shadow: inset 0 0 0 1px var(--glas-still);
}

.hauptnavigation a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--marke);
}

/* Die Haarlinie trennt die Auswertung von dem, was das Haus verlässt. */
.hauptnavigation a.trennt {
    margin-top: var(--a-4);
}

/* Die Linie liegt im Abstand über dem Eintrag, nicht in seiner Fläche. */
.hauptnavigation a.trennt::after {
    content: "";
    position: absolute;
    left: var(--a-3);
    right: var(--a-3);
    top: calc(var(--a-4) / -2);
    border-top: 1px solid var(--glas);
}

.leiste-fuss {
    padding: var(--a-3) var(--a-4) 0;
    border-top: 1px solid var(--glas);
    display: grid;
    gap: var(--a-3);
    justify-items: start;
}

.leiste-hinweis {
    font-size: var(--t-xs);
    color: var(--stimme-still);
    line-height: 1.4;
    margin: 0;
    max-width: none;
}

/* Der Themenschalter trägt eine kleine Scheibe: voll im Dunkeln, offen am Tag. */
.themenschalter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
}

.themenschalter::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid currentColor;
}

:root[data-thema="dunkel"] .themenschalter::before {
    background: currentColor;
}

/* ---------------------------------------------------------- Arbeitsfläche */

.arbeitsflaeche {
    min-width: 0;
}

/* Der Inhalt füllt die Arbeitsfläche neben der Leiste aus. Die Obergrenze
   greift erst auf sehr breiten Bildschirmen und teilt den Rest dann auf
   beide Seiten, statt ihn rechts liegen zu lassen. */
main {
    max-width: 1900px;
    margin-inline: auto;
    padding: var(--a-5) var(--a-5) var(--a-6);
}

.seitenkopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--a-4);
    flex-wrap: wrap;
    margin-bottom: var(--a-4);
}

.seitenkopf p {
    margin: var(--a-1) 0 0;
    color: var(--stimme-leise);
    font-size: var(--t-s);
}

/* -------------------------------------------------------------- Bewegung */

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

/* ---------------------------------------------------------- Schmale Sicht */

@media (max-width: 1240px) {
    .huelle {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    main {
        padding: var(--a-4) var(--a-4) var(--a-5);
    }
}

/* Unter 900 Pixeln wird aus der Leiste eine Kopfzeile, die mitscrollt. */
@media (max-width: 900px) {
    :root {
        --t-3xl: 3rem;
        --t-2xl: 2rem;
    }

    .huelle {
        grid-template-columns: minmax(0, 1fr);
    }

    .seitenleiste {
        position: static;
        height: auto;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--glas-still);
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: var(--a-3);
        padding: var(--a-3) 0;
    }

    .marke,
    .leiste-auftrag {
        padding-left: var(--a-3);
    }

    .seitenleiste .wellenwahl {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        padding: 0 var(--a-3) 0 0;
        grid-template-columns: auto auto;
        align-items: center;
        gap: var(--a-2);
    }

    .seitenleiste .wellenwahl select {
        width: auto;
    }

    .leiste-auftrag {
        grid-column: 1;
        grid-row: 2;
    }

    .hauptnavigation {
        grid-column: 1 / -1;
        grid-row: 3;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--a-1);
        padding: 0 var(--a-3) 2px;
    }

    .hauptnavigation a {
        white-space: nowrap;
        border-radius: 999px;
        padding: 6px 12px;
    }

    .hauptnavigation a[aria-current="page"]::before {
        left: var(--a-3);
        right: var(--a-3);
        top: auto;
        bottom: 0;
        width: auto;
        height: 2px;
        border-radius: 2px 2px 0 0;
    }

    .hauptnavigation a.trennt {
        margin-top: 0;
        padding-top: 6px;
        margin-left: var(--a-2);
    }

    .hauptnavigation a.trennt::after {
        left: calc(var(--a-2) / -2);
        right: auto;
        top: 6px;
        bottom: 6px;
        border-top: none;
        border-left: 1px solid var(--glas-still);
    }

    .leiste-fuss {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        padding: 0 var(--a-3) 0 0;
        border-top: none;
    }

    .leiste-hinweis {
        display: none;
    }

    main {
        padding: var(--a-4) var(--a-3) var(--a-5);
    }
}