/* Gestaltungssystem des Construction Hub.
   Alle Farben stehen nur in den :root-Blöcken (hell und dunkel); Regeln darunter verwenden ausschließlich Variablen.
   Kontraste (WCAG 2.2 AA) prüft der Test Oberflaeche/GestaltungssystemTests. */
:root {
    color-scheme: light dark;

    /* Betreiberfarbe – einzige Stelle, kommt später aus den Betreiber-Einstellungen.
       Bedingung: Schrift in --ch-auf-primaer darauf mindestens 4,5:1. */
    --ch-primaer: #0f5c6b;
    --ch-auf-primaer: #ffffff;

    /* Aus der Betreiberfarbe abgeleitet: Knöpfe, Links, aktive Navigation */
    --ch-betont: var(--ch-primaer);
    --ch-betont-stark: color-mix(in srgb, var(--ch-primaer) 80%, #000000);
    --ch-betont-zart: color-mix(in srgb, var(--ch-primaer) 8%, var(--ch-flaeche));
    --ch-auf-betont: var(--ch-auf-primaer);

    /* Tinte: dunkle Fläche der Begrüßung, aus der Betreiberfarbe abgeleitet; in beiden Modi gleich */
    --ch-tinte: color-mix(in srgb, var(--ch-primaer) 30%, #0a1114);
    --ch-auf-tinte: #f4f6f5;
    --ch-tinte-leise: #a9bcc0;
    --ch-tinte-linie: color-mix(in srgb, var(--ch-auf-tinte) 12%, var(--ch-tinte));
    /* Akzent: sparsam, wie eine Markierung im Plan */
    --ch-akzent: #b45309;
    --ch-akzent-hell: #f5a524;

    /* Flächen und Schrift: warmes Grau */
    --ch-hintergrund: #f6f5f2;
    --ch-flaeche: #ffffff;
    --ch-flaeche-gedaempft: #ecebe7;
    --ch-text: #1c2326;
    --ch-text-leise: #565f63;
    --ch-rand: #e0ddd7;
    --ch-rand-feld: #7d868a;
    --ch-fokus: var(--ch-akzent);

    /* Rückmeldungen und Hinweise */
    --ch-gefahr: #b42318;
    --ch-gefahr-zart: #fbebe9;
    --ch-auf-gefahr: #ffffff;
    --ch-erfolg: #1e6e43;
    --ch-erfolg-zart: #e8f3ec;
    --ch-hinweis: #8a4b08;
    --ch-hinweis-zart: #fbf1df;

    /* Diagrammflächen je Zustand (Stapelbalken): nebeneinander auch bei Farbfehlsichtigkeit unterscheidbar
       (geprüft mit dem Palettenprüfer: Helligkeit, Buntheit, CVD-Abstand); Bernstein unter 3:1 zur Fläche –
       deshalb trägt die Legende immer Wort und Zahl, und es gibt die Tabelle. */
    --ch-diagramm-erledigt: #2b8a57;
    --ch-diagramm-arbeit: #2f6f9f;
    --ch-diagramm-hinweis: #e3a23b;
    --ch-diagramm-fehler: #c2372d;
    --ch-diagramm-neutral: var(--ch-rand-feld);

    --ch-schatten-1: 0 1px 2px rgb(16 24 28 / 0.05);
    --ch-schatten-2: 0 1px 2px rgb(16 24 28 / 0.04), 0 14px 32px -10px rgb(16 24 28 / 0.2);
    --ch-schatten-3: 0 2px 4px rgb(6 14 17 / 0.2), 0 28px 56px -16px rgb(6 14 17 / 0.5);
    --ch-abdunkeln: rgb(28 35 38 / 0.45);

    /* Systemschriften, keine Webfonts */
    --ch-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --ch-groesse-klein: 0.875rem;
    --ch-groesse-text: 1rem;
    --ch-groesse-gross: 1.125rem;
    --ch-schrift-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --ch-groesse-h3: 1.125rem;
    --ch-groesse-h2: 1.5rem;
    --ch-groesse-h1: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);
    --ch-groesse-auftritt: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);

    --ch-abstand-1: 0.25rem;
    --ch-abstand-2: 0.5rem;
    --ch-abstand-3: 0.75rem;
    --ch-abstand-4: 1rem;
    --ch-abstand-5: 1.5rem;
    --ch-abstand-6: 2rem;
    --ch-abstand-7: 3rem;

    --ch-radius-klein: 0.5rem;
    --ch-radius: 0.75rem;
    --ch-radius-gross: 1rem;

    /* Breite des Inhalts auf öffentlichen Seiten */
    --ch-breite: 72rem;

    /* Bootstrap auf das Gestaltungssystem umstellen */
    --bs-body-font-family: var(--ch-schrift);
    --bs-body-font-size: var(--ch-groesse-text);
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--ch-text);
    --bs-body-bg: var(--ch-hintergrund);
    --bs-emphasis-color: var(--ch-text);
    --bs-heading-color: var(--ch-text);
    --bs-secondary-color: var(--ch-text-leise);
    --bs-secondary-bg: var(--ch-flaeche-gedaempft);
    --bs-tertiary-bg: var(--ch-flaeche-gedaempft);
    --bs-link-color: var(--ch-betont);
    --bs-link-hover-color: var(--ch-betont-stark);
    --bs-code-color: var(--ch-text);
    --bs-border-color: var(--ch-rand);
    --bs-border-color-translucent: var(--ch-rand);
    --bs-border-radius: var(--ch-radius-klein);
    --bs-border-radius-lg: var(--ch-radius);
}

/* Dunkel: nach Systemeinstellung, solange nicht „hell“ gewählt ist – oder ausdrücklich gewählt (Umschalter in der
   Kopfleiste setzt data-thema am <html>). Beide Blöcke müssen gleich sein; das prüft GestaltungssystemTests. */
@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) {
        --ch-betont: color-mix(in srgb, var(--ch-primaer) 40%, #ffffff);
        --ch-betont-stark: color-mix(in srgb, var(--ch-primaer) 25%, #ffffff);
        --ch-betont-zart: color-mix(in srgb, var(--ch-primaer) 50%, var(--ch-flaeche));
        --ch-auf-betont: #0d1416;

        --ch-hintergrund: #121719;
        --ch-flaeche: #1a2124;
        --ch-flaeche-gedaempft: #242c30;
        --ch-text: #e6e4e0;
        --ch-text-leise: #a7adb0;
        --ch-rand: #343d41;
        --ch-rand-feld: #7f898d;
        --ch-akzent: #f0a33a;

        --ch-gefahr: #f4978e;
        --ch-gefahr-zart: #3a1f1d;
        --ch-auf-gefahr: #0d1416;
        --ch-erfolg: #7fcf9f;
        --ch-erfolg-zart: #17301f;
        --ch-hinweis: #f2c27a;
        --ch-hinweis-zart: #33280f;
        --ch-diagramm-erledigt: #3a9d69;
        --ch-diagramm-arbeit: #4a8bcf;
        --ch-diagramm-hinweis: #b88a25;
        --ch-diagramm-fehler: #c8362f;

        --ch-schatten-1: 0 1px 2px rgb(0 0 0 / 0.4);
        --ch-schatten-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 32px -10px rgb(0 0 0 / 0.6);
        --ch-abdunkeln: rgb(0 0 0 / 0.6);
    
    }
}

:root[data-thema="dunkel"] {
    --ch-betont: color-mix(in srgb, var(--ch-primaer) 40%, #ffffff);
    --ch-betont-stark: color-mix(in srgb, var(--ch-primaer) 25%, #ffffff);
    --ch-betont-zart: color-mix(in srgb, var(--ch-primaer) 50%, var(--ch-flaeche));
    --ch-auf-betont: #0d1416;

    --ch-hintergrund: #121719;
    --ch-flaeche: #1a2124;
    --ch-flaeche-gedaempft: #242c30;
    --ch-text: #e6e4e0;
    --ch-text-leise: #a7adb0;
    --ch-rand: #343d41;
    --ch-rand-feld: #7f898d;
    --ch-akzent: #f0a33a;

    --ch-gefahr: #f4978e;
    --ch-gefahr-zart: #3a1f1d;
    --ch-auf-gefahr: #0d1416;
    --ch-erfolg: #7fcf9f;
    --ch-erfolg-zart: #17301f;
    --ch-hinweis: #f2c27a;
    --ch-hinweis-zart: #33280f;
    --ch-diagramm-erledigt: #3a9d69;
    --ch-diagramm-arbeit: #4a8bcf;
    --ch-diagramm-hinweis: #b88a25;
    --ch-diagramm-fehler: #c8362f;

    --ch-schatten-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --ch-schatten-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 14px 32px -10px rgb(0 0 0 / 0.6);
    --ch-abdunkeln: rgb(0 0 0 / 0.6);
    
}

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

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

/* Schrift und Überschriften */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, .h1 {
    font-size: var(--ch-groesse-h1);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

h2, .h2 {
    font-size: var(--ch-groesse-h2);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h3, .h3 {
    font-size: var(--ch-groesse-h3);
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

p {
    text-wrap: pretty;
}

.lead {
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1.55;
}

a {
    color: var(--ch-betont);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

hr {
    margin: var(--ch-abstand-5) 0;
    border-color: var(--ch-rand);
    opacity: 1;
}

code {
    font-family: var(--ch-schrift-mono);
    font-size: 0.9em;
}

::selection {
    background: var(--ch-betont);
    color: var(--ch-auf-betont);
}

/* Kleine Überzeile in Großbuchstaben, z. B. über Abschnitten */
.ch-etikett {
    font-family: var(--ch-schrift-mono);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Umschalter hell/dunkel: zeigt das Ziel – Mond im hellen, Sonne im dunklen Modus. Ohne JavaScript ausgeblendet. */
.ch-themaknopf {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--ch-text-leise);
}

    .ch-themaknopf:hover {
        border-color: var(--ch-rand);
        background: var(--ch-flaeche-gedaempft);
        color: var(--ch-text);
    }

    .ch-themaknopf .ch-symbol:first-child {
        display: none;
    }

@media (prefers-color-scheme: dark) {
    :root:not([data-thema="hell"]) .ch-themaknopf .ch-symbol:first-child {
        display: block;
    }

    :root:not([data-thema="hell"]) .ch-themaknopf .ch-symbol:last-child {
        display: none;
    }
}

:root[data-thema="dunkel"] .ch-themaknopf .ch-symbol:first-child {
    display: block;
}

:root[data-thema="dunkel"] .ch-themaknopf .ch-symbol:last-child {
    display: none;
}

@media (scripting: none) {
    .ch-themaknopf {
        display: none;
    }
}

/* Linien-Symbole (Components/Gemeinsam/Symbol.razor) */
.ch-symbol {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
    a, .btn, .form-control, .form-select {
        transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }
}

a:hover {
    color: var(--ch-betont-stark);
}

/* Sichtbarer Fokus überall gleich (WCAG 2.4.7/2.4.13) */
:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus-visible {
    outline: 3px solid var(--ch-fokus);
    outline-offset: 2px;
    box-shadow: none;
}

h1:focus,
[tabindex="-1"]:focus {
    outline: none;
}

/* Knöpfe: mindestens 44 px hoch (Baustelle, Handschuhe, Tablet) */
.btn {
    --bs-btn-padding-x: 1.125rem;
    --bs-btn-padding-y: 0.5625rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--ch-radius-klein);
    letter-spacing: -0.005em;
}

/* Zweitrangige Knöpfe: ruhig, mit Rand */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary {
    --bs-btn-color: var(--ch-text);
    --bs-btn-bg: var(--ch-flaeche);
    --bs-btn-border-color: var(--ch-rand-feld);
    --bs-btn-hover-color: var(--ch-text);
    --bs-btn-hover-bg: var(--ch-flaeche-gedaempft);
    --bs-btn-hover-border-color: var(--ch-text-leise);
    --bs-btn-active-color: var(--ch-text);
    --bs-btn-active-bg: var(--ch-flaeche-gedaempft);
    --bs-btn-active-border-color: var(--ch-text-leise);
}

/* Knöpfe mit Linien-Symbol vor dem Text (Symbol.razor) */
.btn:has(> .ch-symbol) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ch-abstand-2);
}

.btn > .ch-symbol {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-link {
    --bs-btn-color: var(--ch-betont);
    --bs-btn-hover-color: var(--ch-betont-stark);
    --bs-btn-font-weight: 500;
    text-underline-offset: 0.22em;
}

.btn-lg {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.75rem;
    --bs-btn-font-size: var(--ch-groesse-gross);
    --bs-btn-border-radius: var(--ch-radius-klein);
}

.btn-primary {
    --bs-btn-color: var(--ch-auf-betont);
    --bs-btn-bg: var(--ch-betont);
    --bs-btn-border-color: var(--ch-betont);
    --bs-btn-hover-color: var(--ch-auf-betont);
    --bs-btn-hover-bg: var(--ch-betont-stark);
    --bs-btn-hover-border-color: var(--ch-betont-stark);
    --bs-btn-active-color: var(--ch-auf-betont);
    --bs-btn-active-bg: var(--ch-betont-stark);
    --bs-btn-active-border-color: var(--ch-betont-stark);
    --bs-btn-disabled-color: var(--ch-auf-betont);
    --bs-btn-disabled-bg: var(--ch-betont);
    --bs-btn-disabled-border-color: var(--ch-betont);
}

.btn-danger {
    --bs-btn-color: var(--ch-auf-gefahr);
    --bs-btn-bg: var(--ch-gefahr);
    --bs-btn-border-color: var(--ch-gefahr);
    --bs-btn-hover-color: var(--ch-auf-gefahr);
    --bs-btn-hover-bg: var(--ch-gefahr);
    --bs-btn-hover-border-color: var(--ch-text);
    --bs-btn-active-color: var(--ch-auf-gefahr);
    --bs-btn-active-bg: var(--ch-gefahr);
    --bs-btn-active-border-color: var(--ch-text);
}

/* Formulare: Feldrand mindestens 3:1 (WCAG 1.4.11) */
.form-control,
.form-select,
.form-check-input,
.form-floating {
    --bs-body-bg: var(--ch-flaeche);
}

.form-control,
.form-select,
.form-check-input {
    border-color: var(--ch-rand-feld);
    color: var(--ch-text);
}

.form-control,
.form-select {
    border-radius: var(--ch-radius-klein);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--ch-text-leise);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ch-betont);
    outline-offset: 1px;
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--ch-flaeche-gedaempft);
    color: var(--ch-text-leise);
}

.form-label {
    font-weight: 500;
}

.checkbox > label {
    font-weight: 400;
}

.form-floating > label {
    color: var(--ch-text-leise) !important;
    font-weight: 400;
}

.form-check-input:checked {
    background-color: var(--ch-primaer);
    border-color: var(--ch-betont);
}

.form-text,
.text-secondary {
    color: var(--ch-text-leise) !important;
}

.validation-message,
.text-danger {
    color: var(--ch-gefahr) !important;
}

.text-success {
    color: var(--ch-erfolg) !important;
}

.text-info {
    color: var(--ch-betont) !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--ch-erfolg);
}

.invalid {
    outline: 1px solid var(--ch-gefahr);
}

/* Meldungen, Karten, Navigationsreiter */
.alert {
    --bs-alert-color: var(--ch-text);
    --bs-alert-border-radius: var(--ch-radius-klein);
    --bs-alert-padding-y: var(--ch-abstand-3);
    border-width: 0 0 0 3px;
}

.alert-danger {
    --bs-alert-bg: var(--ch-gefahr-zart);
    --bs-alert-border-color: var(--ch-gefahr);
}

.alert-success {
    --bs-alert-bg: var(--ch-erfolg-zart);
    --bs-alert-border-color: var(--ch-erfolg);
}

.alert-warning {
    --bs-alert-bg: var(--ch-hinweis-zart);
    --bs-alert-border-color: var(--ch-hinweis);
}

.alert-info {
    --bs-alert-bg: var(--ch-betont-zart);
    --bs-alert-border-color: var(--ch-betont);
}

.card {
    --bs-card-bg: var(--ch-flaeche);
    --bs-card-border-color: var(--ch-rand);
    --bs-card-border-radius: var(--ch-radius);
    --bs-card-spacer-x: var(--ch-abstand-5);
    --bs-card-spacer-y: var(--ch-abstand-5);
    box-shadow: var(--ch-schatten-1);
}

.nav {
    --bs-nav-link-color: var(--ch-betont);
    --bs-nav-link-hover-color: var(--ch-betont-stark);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--ch-radius-klein);
    --bs-nav-pills-link-active-color: var(--ch-text);
    --bs-nav-pills-link-active-bg: var(--ch-betont-zart);
    --bs-nav-link-color: var(--ch-text);
    --bs-nav-link-hover-color: var(--ch-text);
    gap: 2px;
}

    .nav-pills .nav-link:hover:not(.active) {
        background: var(--ch-flaeche-gedaempft);
    }

    .nav-pills .nav-link.active {
        font-weight: 600;
    }

/* Konto-Seiten ohne Anmeldung (Anmelden, Passwort vergessen, Einrichtung): ruhige Karte in der Mitte.
   Die Klasse setzt MainLayout; die Seiten selbst bleiben unverändert. */
.ch-inhalt-schmal > h1 {
    margin-bottom: var(--ch-abstand-3);
    font-size: 1.75rem;
}

.ch-inhalt-schmal h2 {
    margin-bottom: var(--ch-abstand-4);
    color: var(--ch-text-leise);
    font-size: var(--ch-groesse-text);
    font-weight: 400;
    letter-spacing: 0;
}

    .ch-inhalt-schmal h2 + hr {
        display: none;
    }

.ch-inhalt-schmal .row > * {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

.ch-inhalt-schmal p:last-child {
    margin-bottom: 0;
}

/* Wiederkehrende Bausteine */
.ch-hinweis {
    margin-bottom: var(--ch-abstand-5);
    padding: var(--ch-abstand-4) var(--ch-abstand-5);
    border-left: 3px solid var(--ch-hinweis);
    border-radius: var(--ch-radius-klein);
    background: var(--ch-hinweis-zart);
    color: var(--ch-text);
}

    .ch-hinweis > :last-child {
        margin-bottom: 0;
    }

.ch-leer {
    padding: var(--ch-abstand-6) var(--ch-abstand-5);
    border: 1px solid var(--ch-rand);
    border-radius: var(--ch-radius);
    background: var(--ch-flaeche);
    color: var(--ch-text-leise);
}

    .ch-leer > :last-child {
        margin-bottom: 0;
    }

.ch-bald {
    display: inline-block;
    padding: 0 var(--ch-abstand-2);
    border: 1px solid var(--ch-rand);
    border-radius: 999px;
    color: var(--ch-text-leise);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.375rem;
    white-space: nowrap;
}

/* Raster für Kennzahl-Kacheln (Components/Gemeinsam/Kennzahl.razor) */
.ch-kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--ch-abstand-3);
    margin-bottom: var(--ch-abstand-5);
}

/* Inhalt in der Breite öffentlicher Seiten */
.ch-breite {
    width: 100%;
    max-width: var(--ch-breite);
    margin-inline: auto;
    padding-inline: var(--ch-abstand-4);
}

@media (min-width: 48rem) {
    .ch-breite {
        padding-inline: var(--ch-abstand-6);
    }
}

/* Abschnitte der Startseite */
.ch-abschnitt {
    padding-block: var(--ch-abstand-7);
}

    .ch-abschnitt h2 {
        margin-bottom: var(--ch-abstand-2);
        font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
    }

.ch-abschnitt-einleitung {
    max-width: 38rem;
    margin-bottom: 0;
    color: var(--ch-text-leise);
    font-size: var(--ch-groesse-gross);
}

/* Sehr schmal: Knöpfe nur mit Symbol; die Beschriftung bleibt für Screenreader erhalten. */
@media (max-width: 35.99rem) {
    .ch-knopftext {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.blazor-error-boundary {
    background: var(--ch-gefahr-zart);
    border-left: 4px solid var(--ch-gefahr);
    border-radius: var(--ch-radius);
    padding: var(--ch-abstand-4);
    color: var(--ch-text);
}

    .blazor-error-boundary::after {
        content: "Ein Fehler ist aufgetreten."
    }