/* ==========================================================================
   V-Datacenter - Gestaltungsgrundlage
   Alle Farben stehen hier als Custom Properties. Ein weiteres Thema ist ein
   reiner Variablentausch, ohne Aenderung an den Komponenten.
   ========================================================================== */

:root,
[data-theme="light"] {
    color-scheme: light;

    --flaeche-0: #F4F6F8;   /* Seitenhintergrund */
    --flaeche-1: #FFFFFF;   /* Karten */
    --flaeche-2: #EEF1F4;   /* Leiste, Tabellenkopf */
    --flaeche-3: #E6EAEF;   /* Hover */

    --rand: #E0E5EA;
    --rand-stark: #C8D1DA;

    --text-1: #16202B;
    --text-2: #61707F;
    --text-3: #93A0AC;

    --akzent: #E24B4A;      /* NWT-Rot, nur als Akzent */
    --akzent-tief: #C43C3B;
    --akzent-weich: rgba(226, 75, 74, .10);

    --ok: #16A34A;
    --ok-weich: rgba(22, 163, 74, .12);
    --warn: #C2740B;
    --warn-weich: rgba(194, 116, 11, .14);
    --info: #2563EB;
    --info-weich: rgba(37, 99, 235, .12);

    --schatten: 0 1px 2px rgba(16, 32, 48, .04), 0 6px 20px rgba(16, 32, 48, .05);
    --schatten-tief: 0 12px 32px rgba(16, 32, 48, .12);
}

[data-theme="dark"] {
    color-scheme: dark;

    --flaeche-0: #11151A;
    --flaeche-1: #191F26;
    --flaeche-2: #212932;
    --flaeche-3: #2A333D;

    --rand: #2B343E;
    --rand-stark: #3A4550;

    --text-1: #E7ECF2;
    --text-2: #97A5B4;
    --text-3: #6C7A88;

    --akzent: #F0605F;
    --akzent-tief: #E24B4A;
    --akzent-weich: rgba(240, 96, 95, .14);

    --ok: #3FBF6B;
    --ok-weich: rgba(63, 191, 107, .14);
    --warn: #E0972F;
    --warn-weich: rgba(224, 151, 47, .16);
    --info: #5B8DEF;
    --info-weich: rgba(91, 141, 239, .16);

    --schatten: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .28);
    --schatten-tief: 0 12px 32px rgba(0, 0, 0, .45);
}

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--flaeche-0);
    color: var(--text-1);
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.mono,
code {
    font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
    font-size: .92em;
    font-variant-numeric: tabular-nums;
}

h1 {
    font-size: 24px;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -.015em;
}

h2 {
    font-size: 17px;
    margin: 0;
    letter-spacing: -.01em;
}

h3.block-titel {
    font-size: 13px;
    font-weight: 600;
    margin: 18px 0 8px;
    color: var(--text-1);
}

p {
    margin: 0 0 10px;
}

.text-sek {
    color: var(--text-2);
    font-size: 14px;
}

a {
    color: var(--akzent);
}

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

/* ---------- Portal-Shell ------------------------------------------------- */

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

.seitenleiste {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    background: var(--flaeche-1);
    border-right: 1px solid var(--rand);
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.marke {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
}

.marke-zeichen {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 9px;
    background: var(--akzent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 15px;
}

.marke-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

    .marke-text strong {
        font-size: 14.5px;
        font-weight: 600;
    }

    .marke-text small {
        font-size: 12px;
        color: var(--text-2);
    }

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-eintrag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--text-2);
    text-decoration: none;
    font-size: 14px;
    transition: background .12s ease, color .12s ease;
}

    .nav-eintrag:hover {
        background: var(--flaeche-2);
        color: var(--text-1);
    }

    .nav-eintrag.active {
        background: var(--akzent-weich);
        color: var(--akzent);
        font-weight: 600;
    }

.nav-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: none;
}

    .nav-icon svg {
        width: 100%;
        height: 100%;
    }

.nav-extern {
    margin-left: auto;
    width: 13px;
    height: 13px;
    display: inline-flex;
    color: var(--text-3);
}

    .nav-extern svg {
        width: 100%;
        height: 100%;
    }

.seitenleiste-fuss {
    margin-top: auto;
    border-top: 1px solid var(--rand);
    padding-top: 14px;
}

.fuss-notiz {
    font-size: 11.5px;
    color: var(--text-3);
    margin: 10px 0 0;
    padding-left: 11px;
}

.inhalt {
    padding: 26px 30px 60px;
    max-width: 1680px;
    width: 100%;
}

/* ---------- Kopf des Kundenbogens ---------------------------------------- */

.bogen-shell {
    min-height: 100vh;
}

.bogen-kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--flaeche-1);
    border-bottom: 1px solid var(--rand);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bogen-inhalt {
    /* Volle Breite, buendig links - die Tabellen brauchen jeden Zentimeter. */
    padding: 22px 24px 96px 14px;
    width: 100%;
}

.bogen-raster {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.abschnitt-leiste {
    position: sticky;
    top: 76px;
    background: var(--flaeche-1);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 12px 8px;
    box-shadow: var(--schatten);
}

.leiste-titel {
    font-size: 10.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 600;
    margin: 2px 0 8px;
    padding: 0 10px;
}

.leiste-eintrag {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--text-2);
    text-decoration: none;
    text-align: left;
    font: inherit;
    font-size: 13.4px;
    cursor: pointer;
}

    .leiste-eintrag:hover {
        background: var(--flaeche-2);
        color: var(--text-1);
    }

.leiste-nummer {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11.5px;
    color: var(--text-3);
    min-width: 12px;
}

.leiste-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leiste-eintrag.aktiv {
    background: var(--flaeche-2);
    color: var(--text-1);
    font-weight: 600;
}

.leiste-punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rand-stark);
    flex: none;
}

    .leiste-punkt.an {
        background: var(--ok);
    }

/* Die Kopfzeile des Bogens bleibt oben stehen - ohne diesen Abstand
   verschwindet die Ueberschrift beim Anspringen dahinter. */
.bogen-spalte > section[id^="abschnitt-"],
.bogen-spalte > .karte[id^="abschnitt-"] {
    scroll-margin-top: 78px;
}

.bogen-spalte {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.bogen-titel {
    margin-bottom: 6px;
}

.bogen-vorspann {
    max-width: 74ch;
    margin-bottom: 18px;
}

/* ---------- Karten ------------------------------------------------------- */

.karte {
    background: var(--flaeche-1);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: var(--schatten);
    margin-bottom: 14px;
}

.karte-schmal {
    max-width: 720px;
}

.karte-mittig {
    max-width: 560px;
    margin: 60px auto;
    text-align: center;
}

.karte-leer {
    text-align: center;
    padding: 46px 22px;
}

.karte-titel {
    margin-bottom: 12px;
}

.seiten-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.abschnitt-kopf {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.abschnitt-nummer {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    color: var(--text-3);
}

.abschnitt-hinweis {
    color: var(--text-2);
    font-size: 13.6px;
    margin: 4px 0 16px;
    max-width: 88ch;
}

.leer-hinweis {
    margin: 6px 0 0;
}

/* ---------- Kennzahlen --------------------------------------------------- */

.kennzahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.kennzahl {
    background: var(--flaeche-1);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 15px 17px;
    box-shadow: var(--schatten);
}

.kennzahl-wert {
    display: block;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.kennzahl-einheit {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    margin-left: 4px;
}

.kennzahl-text {
    display: block;
    font-size: 12.6px;
    color: var(--text-2);
    margin-top: 3px;
}

/* ---------- Verteilungsbalken -------------------------------------------- */

.verteilung {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--flaeche-2);
    margin-bottom: 10px;
}

.verteilung-teil {
    min-width: 0;
}

.verteilung-rz {
    background: var(--info);
}

.verteilung-lokal {
    background: var(--ok);
}

.verteilung-offen {
    background: var(--warn);
}

.legende {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-2);
}

.punkt {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.punkt-rz {
    background: var(--info);
}

.punkt-lokal {
    background: var(--ok);
}

.punkt-offen {
    background: var(--warn);
}

/* ---------- Felder ------------------------------------------------------- */

.feld-raster {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 18px;
}

.feld-raster-2 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.feld {
    margin-bottom: 12px;
    min-width: 0;
}

    .feld label {
        display: block;
        font-size: 13.4px;
        margin-bottom: 5px;
        color: var(--text-1);
    }

.eingabe {
    width: 100%;
    font: inherit;
    font-size: 14px;
    color: var(--text-1);
    background: var(--flaeche-1);
    border: 1px solid var(--rand-stark);
    border-radius: 9px;
    padding: 8px 11px;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .eingabe:focus {
        border-color: var(--akzent);
        box-shadow: 0 0 0 3px var(--akzent-weich);
        outline: none;
    }

    .eingabe::placeholder {
        color: var(--text-3);
    }

textarea.eingabe {
    resize: vertical;
    line-height: 1.45;
    min-height: 44px;
}

select.eingabe {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                      linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
    background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
}

.frageliste {
    margin: 2px 0 10px;
    padding-left: 20px;
    color: var(--text-2);
    font-size: 13.6px;
}

    .frageliste li {
        margin-bottom: 4px;
    }

.antwortliste {
    margin: 8px 0 0;
    display: grid;
    grid-template-columns: minmax(200px, 340px) minmax(0, 1fr);
    gap: 2px 20px;
}

    .antwortliste dt {
        font-size: 13.2px;
        color: var(--text-2);
        padding: 7px 0;
        border-top: 1px solid var(--rand);
    }

    .antwortliste dd {
        margin: 0;
        font-size: 14px;
        padding: 7px 0;
        border-top: 1px solid var(--rand);
        white-space: pre-wrap;
    }

/* ---------- Tabellen ----------------------------------------------------- */

.tabelle-rahmen {
    overflow-x: auto;
    border: 1px solid var(--rand);
    border-radius: 11px;
    background: var(--flaeche-1);
}

.gitter {
    border-collapse: collapse;
    width: 100%;
    min-width: 640px;
}

    .gitter th {
        background: var(--flaeche-2);
        text-align: left;
        font-size: 11.5px;
        letter-spacing: .03em;
        font-weight: 600;
        color: var(--text-2);
        padding: 8px 9px;
        border-bottom: 1px solid var(--rand);
        white-space: nowrap;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .gitter td {
        padding: 0;
        border-bottom: 1px solid var(--rand);
        border-right: 1px solid var(--rand);
        vertical-align: middle;
    }

        .gitter td:last-child {
            border-right: 0;
        }

    .gitter tbody tr:last-child td {
        border-bottom: 0;
    }

.spalte-nummer {
    width: 36px;
    text-align: right;
    padding: 0 9px !important;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
    color: var(--text-3);
    background: var(--flaeche-2);
}

.spalte-aktion {
    width: 34px;
    background: var(--flaeche-2);
}

.zelle-eingabe {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-family: ui-monospace, Consolas, "Liberation Mono", monospace;
    font-size: 12.8px;
    color: var(--text-1);
    padding: 7px 9px;
}

    .zelle-eingabe:focus {
        background: var(--akzent-weich);
        outline: 2px solid var(--akzent);
        outline-offset: -2px;
        border-radius: 3px;
    }

.zelle-auswahl {
    appearance: none;
    cursor: pointer;
    color: var(--text-1);
}

/* Die aufgeklappte Liste wird vom Betriebssystem gezeichnet und erbt die
   Farben nicht. Ohne diese Regel steht im dunklen Thema dunkle Schrift
   auf dunklem Grund. */
select option,
.zelle-auswahl option,
select.eingabe option {
    background-color: var(--flaeche-1);
    color: var(--text-1);
}

select:invalid,
select option[value=""] {
    color: var(--text-3);
}

/* Felder mit Vorschlagsliste bekommen einen dezenten Hinweis. */
.zelle-eingabe[list] {
    background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                      linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
    background-position: calc(100% - 12px) 55%, calc(100% - 8px) 55%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    padding-right: 22px;
}

.zelle-fest {
    display: block;
    padding: 7px 9px;
    font-size: 13.2px;
    color: var(--text-1);
}

.zeile-weg {
    border: 0;
    background: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 5px 7px;
    display: inline-flex;
    border-radius: 6px;
}

    .zeile-weg svg {
        width: 15px;
        height: 15px;
    }

    .zeile-weg:hover {
        color: var(--akzent);
        background: var(--akzent-weich);
    }

.gitter-leer {
    padding: 18px !important;
    text-align: center;
    color: var(--text-3);
    font-size: 13.4px;
}

.gitter-liste td {
    padding: 10px 11px;
    font-size: 14px;
}

.zeile-klickbar {
    cursor: pointer;
}

    .zeile-klickbar:hover td {
        background: var(--flaeche-2);
    }

.zellen-haupt {
    display: block;
    font-weight: 500;
}

.zellen-neben {
    display: block;
    font-size: 12.5px;
    color: var(--text-2);
}

.zellen-aktionen {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    padding-right: 11px !important;
}

.tabelle-werkzeuge {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tabelle-zaehler {
    margin-left: auto;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.2px;
    color: var(--text-3);
}

.einfuegen-flaeche {
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px dashed var(--rand-stark);
    border-radius: 11px;
    background: var(--flaeche-2);
}

.einfuegen-hinweis {
    font-size: 13.2px;
    color: var(--text-2);
    margin-bottom: 9px;
}

.einfuegen-feld {
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12.6px;
}

/* ---------- Schaltflaechen ----------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 13.6px;
    padding: 8px 14px;
    border-radius: 9px;
    border: 1px solid var(--rand-stark);
    background: var(--flaeche-1);
    color: var(--text-1);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, transform .06s ease;
}

    .knopf:hover {
        background: var(--flaeche-2);
    }

    .knopf:active {
        transform: translateY(1px);
    }

    .knopf:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.knopf-primaer {
    background: var(--akzent);
    border-color: var(--akzent);
    color: #fff;
    font-weight: 500;
}

    .knopf-primaer:hover {
        background: var(--akzent-tief);
        border-color: var(--akzent-tief);
    }

.knopf-still {
    background: transparent;
    color: var(--text-2);
}

    .knopf-still:hover {
        background: var(--flaeche-2);
        color: var(--text-1);
    }

.knopf-voll {
    width: 100%;
    justify-content: flex-start;
    border: 0;
}

.knopf-klein {
    font-size: 12.6px;
    padding: 5px 10px;
}

.knopf-datei {
    position: relative;
    overflow: hidden;
}

    .knopf-datei input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

.knopf-zeile {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ---------- Zustandsmarken ----------------------------------------------- */

.pill {
    display: inline-flex;
    align-items: center;
    font-size: 11.4px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--flaeche-2);
    color: var(--text-2);
    white-space: nowrap;
}

.pill-ok {
    background: var(--ok-weich);
    color: var(--ok);
}

.pill-warn {
    background: var(--warn-weich);
    color: var(--warn);
}

.pill-info {
    background: var(--info-weich);
    color: var(--info);
}

.meldung {
    font-size: 13.2px;
    padding: 8px 12px;
    border-radius: 9px;
    margin-top: 10px;
}

.meldung-ok {
    background: var(--ok-weich);
    color: var(--ok);
}

.meldung-fehler {
    background: var(--akzent-weich);
    color: var(--akzent);
}

.erfolg-zeichen {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ok-weich);
    color: var(--ok);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
}

    .erfolg-zeichen svg {
        width: 22px;
        height: 22px;
    }

.link-kasten {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--flaeche-2);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 14px 0 4px;
    overflow-x: auto;
}

    .link-kasten code {
        flex: 1;
        white-space: nowrap;
    }

.bogen-abschluss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

    .bogen-abschluss p {
        margin: 4px 0 0;
        max-width: 60ch;
    }

.speicher-leiste {
    position: fixed;
    right: 18px;
    bottom: 16px;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--flaeche-1);
    border: 1px solid var(--rand);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12.6px;
    color: var(--text-2);
    box-shadow: var(--schatten-tief);
}

.speicher-punkt {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rand-stark);
}

    .speicher-punkt.an {
        background: var(--ok);
    }

/* ---------- Anpassung an kleine Fenster ---------------------------------- */

@media (max-width: 1000px) {
    .shell {
        grid-template-columns: 1fr;
    }

    .seitenleiste {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        border-right: 0;
        border-bottom: 1px solid var(--rand);
        padding: 10px 14px;
    }

    .nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .seitenleiste-fuss {
        margin-top: 0;
        margin-left: auto;
        border-top: 0;
        padding-top: 0;
    }

    .fuss-notiz {
        display: none;
    }

    .knopf-voll {
        width: auto;
    }

    .inhalt {
        padding: 18px 14px 60px;
    }

    .bogen-raster {
        grid-template-columns: 1fr;
    }

    .abschnitt-leiste {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .leiste-titel {
        display: none;
    }

    .leiste-eintrag {
        width: auto;
    }

    .antwortliste {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .antwortliste dd {
            border-top: 0;
            padding-top: 0;
            padding-bottom: 10px;
        }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- Druck -------------------------------------------------------- */

@media print {
    .seitenleiste,
    .abschnitt-leiste,
    .bogen-kopf,
    .speicher-leiste,
    .tabelle-werkzeuge,
    .knopf,
    .spalte-aktion,
    .zeile-weg {
        display: none !important;
    }

    body {
        background: #fff;
        font-size: 11px;
    }

    .shell,
    .bogen-raster {
        display: block;
    }

    .karte {
        border: 0;
        border-top: 1.5px solid #333;
        border-radius: 0;
        box-shadow: none;
        padding: 8px 0;
        margin-bottom: 8px;
        break-inside: avoid;
    }
}

/* Blazor-eigene Fehleranzeige an das Thema angleichen */
#blazor-error-ui {
    background: var(--warn-weich);
    color: var(--warn);
    bottom: 0;
    display: none;
    left: 0;
    padding: 10px 16px;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 16px;
        top: 10px;
    }

/* ---------- Anmeldung ----------------------------------------------------- */

.karte-anmeldung {
    max-width: 400px;
    margin: 64px auto;
}

/* Fliesstext bleibt lesbar, auch wenn die Karte breit ist. */
.bogen-vorspann,
.abschnitt-hinweis,
.einfuegen-hinweis {
    max-width: 96ch;
}

    .karte-anmeldung h1 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .karte-anmeldung .text-sek {
        margin-bottom: 20px;
    }

.anmeldung-zeichen {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--akzent-weich);
    color: var(--akzent);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
}

    .anmeldung-zeichen svg {
        width: 20px;
        height: 20px;
    }

.knopf-voll-breit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.feld-fehler {
    display: block;
    font-size: 12.4px;
    color: var(--akzent);
    margin-top: 4px;
}

/* Blazor setzt diese Klassen an geprüfte Eingabefelder */
.eingabe.invalid {
    border-color: var(--akzent);
}

.validation-message {
    display: block;
    font-size: 12.4px;
    color: var(--akzent);
    margin-top: 4px;
}

.marke-gross {
    justify-content: center;
    margin-bottom: 14px;
}

    .marke-gross .marke-zeichen {
        width: 44px;
        height: 44px;
        font-size: 20px;
        border-radius: 13px;
    }

/* ---------- Skizze -------------------------------------------------------- */

.seiten-kopf-eng {
    margin-bottom: 12px;
}

.skizze-rahmen {
    border: 1px solid var(--rand);
    border-radius: 11px;
    background: #F4F6F8;
    padding: 10px;
    overflow-x: auto;
}

    .skizze-rahmen svg {
        display: block;
        width: 100%;
        height: auto;
        min-width: 760px;
    }

.knopf-zeile-mittig {
    justify-content: center;
}

/* ---------- Kopfbereich des Kundenbogens --------------------------------- */

.kopf-rechts {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ---------------------------------------------------------------------------
   Mehrseitiger Ablauf des Kundenformulars
--------------------------------------------------------------------------- */

.schritt-fortschritt {
    height: 5px;
    border-radius: 3px;
    background: var(--flaeche-2);
    overflow: hidden;
    margin-bottom: 16px;
}

.schritt-balken {
    height: 100%;
    border-radius: 3px;
    background: var(--akzent);
    transition: width 0.25s ease;
}

.schritt-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 4px 2px 28px;
}

.schritt-anzeige {
    color: var(--text-3);
    font-size: 13px;
}

/* Ein Feld, das im Zweispaltenraster die volle Breite belegt. */
.feld-breit {
    grid-column: 1 / -1;
}

.pruefliste {
    list-style: none;
    margin: 14px 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pruefliste li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: 8px;
}

.pruefliste li:hover {
    background: var(--flaeche-2);
}

.pruefliste-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--text-1);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.pruefliste-link:hover {
    color: var(--akzent);
}

/* ---------------------------------------------------------------------------
   Pflege des Fragenkatalogs in der Verwaltung
--------------------------------------------------------------------------- */

.editor-kopfzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.editor-titel {
    flex: 1;
    min-width: 160px;
    font-weight: 600;
}

.editor-art {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
}

.editor-schluessel {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-3);
    background: var(--flaeche-2);
    border-radius: 6px;
    padding: 3px 8px;
}

.editor-schluessel-klein {
    font-size: 12px;
    color: var(--text-3);
}

.editor-werkzeuge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.werkzeug {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--rand);
    border-radius: 7px;
    background: var(--flaeche-1);
    color: var(--text-2);
    cursor: pointer;
    padding: 0;
}

.werkzeug svg {
    width: 15px;
    height: 15px;
}

.werkzeug:hover:not(:disabled) {
    background: var(--flaeche-2);
    color: var(--text-1);
}

.werkzeug:disabled {
    opacity: 0.35;
    cursor: default;
}

.werkzeug-rot:hover:not(:disabled) {
    color: var(--akzent);
    border-color: var(--akzent);
}

.editor-block {
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
    background: var(--flaeche-0);
}

.editor-schalterzeile {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    margin-bottom: 12px;
}

.editor-schalter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--text-2);
    cursor: pointer;
}

.editor-schalter input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--akzent);
}

.eingabe-zahl {
    width: 68px;
    padding: 5px 8px;
}

.eingabe-inline {
    width: 240px;
    max-width: 100%;
}

.eingabe-schmal {
    width: 190px;
    flex: 0 0 auto;
}

.editor-spalten .zelle-eingabe {
    min-height: 30px;
}

.editor-optionen {
    resize: vertical;
    min-height: 30px;
    font: inherit;
}

.spalte-aktion-breit {
    width: 100px;
    white-space: nowrap;
    text-align: right;
}

.kopf-neben {
    font-weight: 400;
    color: var(--text-3);
}

.editor-feld {
    padding: 10px 0;
    border-bottom: 1px solid var(--rand);
}

.editor-feld:last-child {
    border-bottom: 0;
}

.editor-feldzeile {
    display: flex;
    align-items: center;
    gap: 10px;
}

.editor-felddetails {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 7px;
    padding-left: 2px;
}

.editor-fusszeile {
    align-items: center;
    flex-wrap: wrap;
}

.editor-trenner {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--rand);
    margin: 0 8px;
}