/* ez.erechnung – Design „Dunkle Seitenleiste, ruhige Fläche“ (Plan 0011).
   Alle Farben hier als Tokens; Bootstrap wird über seine CSS-Variablen eingefärbt. Ohne Anmeldung abrufbar,
   damit Login, Impressum und Datenschutz denselben Stil haben. */

:root {
    --ez-leiste: #1c2330;
    --ez-leiste-text: #c9d1dc;
    --ez-leiste-gedaempft: #8b96a8;
    --ez-leiste-aktiv: #2e3a4d;
    --ez-leiste-linie: #2e3a4d;
    --ez-flaeche: #f4f5f7;
    --ez-karte: #ffffff;
    --ez-linie: #e1e5ea;
    --ez-text: #1c2330;
    --ez-gedaempft: #6b7686;
    --ez-akzent: #2d8a7a;
    --ez-akzent-hover: #247466;
    --ez-akzent-rgb: 45, 138, 122;
    --ez-akzent-hell: #dff3ee;
    --ez-akzent-dunkel: #1f6b5e;
    --ez-warn-hell: #fbeccc;
    --ez-warn-dunkel: #7a5208;
    --ez-fehler: #c0392b;
    --ez-fehler-hell: #fbe4e1;
    --ez-fehler-dunkel: #8e2a1f;
    --ez-neutral-hell: #e8ebf0;
    --ez-neutral-dunkel: #3a4556;
    --ez-radius: 8px;
    --ez-schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ez-leiste: #0f141c;
        --ez-leiste-aktiv: #232d3d;
        --ez-leiste-linie: #232d3d;
        --ez-flaeche: #121821;
        --ez-karte: #1a2230;
        --ez-linie: #2a3546;
        --ez-text: #e3e8ef;
        --ez-gedaempft: #93a0b2;
        --ez-akzent: #3fb19f;
        --ez-akzent-hover: #56c2b1;
        --ez-akzent-rgb: 63, 177, 159;
        --ez-akzent-hell: #17352f;
        --ez-akzent-dunkel: #8fe0d2;
        --ez-warn-hell: #3b2e12;
        --ez-warn-dunkel: #f3cf85;
        --ez-fehler: #e0695c;
        --ez-fehler-hell: #3d1d1a;
        --ez-fehler-dunkel: #f4b4ac;
        --ez-neutral-hell: #263142;
        --ez-neutral-dunkel: #c3ccd8;
        color-scheme: dark;
    }
}

/* --- Bootstrap einfärben --- */
:root {
    --bs-body-font-family: var(--ez-schrift);
    --bs-body-bg: var(--ez-karte);
    --bs-body-color: var(--ez-text);
    --bs-emphasis-color: var(--ez-text);
    --bs-secondary-color: var(--ez-gedaempft);
    --bs-tertiary-bg: var(--ez-flaeche);
    --bs-border-color: var(--ez-linie);
    --bs-border-radius: var(--ez-radius);
    --bs-link-color: var(--ez-akzent);
    --bs-link-color-rgb: var(--ez-akzent-rgb);
    --bs-link-hover-color: var(--ez-akzent-hover);
    --bs-link-hover-color-rgb: var(--ez-akzent-rgb);
    --bs-primary: var(--ez-akzent);
    --bs-primary-rgb: var(--ez-akzent-rgb);
    --bs-focus-ring-color: rgba(var(--ez-akzent-rgb), .25);
    --bs-heading-color: var(--ez-text);
}

body {
    background-color: var(--ez-flaeche);
    color: var(--ez-text);
    font-family: var(--ez-schrift);
}

.text-muted, .form-text { color: var(--ez-gedaempft) !important; }
h1 { font-size: 1.6rem; font-weight: 600; }
h4, h5 { font-weight: 600; }
h1:focus { outline: none; }
code { color: var(--ez-akzent-dunkel); }

.btn-primary, .btn-success {
    --bs-btn-bg: var(--ez-akzent); --bs-btn-border-color: var(--ez-akzent); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ez-akzent-hover); --bs-btn-hover-border-color: var(--ez-akzent-hover); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ez-akzent-hover); --bs-btn-active-border-color: var(--ez-akzent-hover);
    --bs-btn-disabled-bg: var(--ez-akzent); --bs-btn-disabled-border-color: var(--ez-akzent);
}
.btn-outline-primary {
    --bs-btn-color: var(--ez-akzent); --bs-btn-border-color: var(--ez-akzent);
    --bs-btn-hover-bg: var(--ez-akzent); --bs-btn-hover-border-color: var(--ez-akzent); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ez-akzent); --bs-btn-active-border-color: var(--ez-akzent);
}
.btn-outline-secondary {
    --bs-btn-color: var(--ez-text); --bs-btn-border-color: var(--ez-linie);
    --bs-btn-hover-bg: var(--ez-flaeche); --bs-btn-hover-color: var(--ez-text); --bs-btn-hover-border-color: var(--ez-gedaempft);
    --bs-btn-active-bg: var(--ez-flaeche); --bs-btn-active-color: var(--ez-text);
    background-color: var(--ez-karte);
}
.btn-outline-danger {
    --bs-btn-color: var(--ez-fehler); --bs-btn-border-color: var(--ez-linie);
    --bs-btn-hover-bg: var(--ez-fehler); --bs-btn-hover-border-color: var(--ez-fehler);
    background-color: var(--ez-karte);
}
.btn-link { --bs-btn-color: var(--ez-akzent); --bs-btn-hover-color: var(--ez-akzent-hover); }
.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ez-akzent);
    box-shadow: 0 0 0 .2rem rgba(var(--ez-akzent-rgb), .25);
}
.form-check-input:checked { background-color: var(--ez-akzent); border-color: var(--ez-akzent); }
.form-control:disabled, .form-select:disabled { background-color: var(--ez-flaeche); }

/* Karten: Tabellen, Formulare, Kacheln */
.card, .ez-karte {
    --bs-card-bg: var(--ez-karte);
    --bs-card-border-color: var(--ez-linie);
    --bs-card-cap-bg: var(--ez-flaeche);
    background-color: var(--ez-karte);
    border: 1px solid var(--ez-linie);
    border-radius: var(--ez-radius);
}
.ez-karte { padding: 1.25rem; margin-bottom: 1rem; }
.content > form, .content form.ez-karte { }

.table {
    --bs-table-bg: var(--ez-karte);
    --bs-table-color: var(--ez-text);
    --bs-table-hover-bg: var(--ez-flaeche);
    --bs-table-hover-color: var(--ez-text);
    --bs-table-border-color: var(--ez-linie);
    border: 1px solid var(--ez-linie);
    border-radius: var(--ez-radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.table > thead th { color: var(--ez-gedaempft); font-weight: 500; font-size: .85rem; background: var(--ez-karte); }
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table td.text-end, .table th.text-end, .summen td, .netto, .brutto { font-variant-numeric: tabular-nums; }
.table-sm > :not(caption) > * > * { padding: .35rem .6rem; }
.table.w-auto { border: 0; }

/* Status-Kennzeichen */
.badge { font-weight: 500; border-radius: 999px; padding: .3em .7em; }
.badge.text-bg-success { background-color: var(--ez-akzent-hell) !important; color: var(--ez-akzent-dunkel) !important; }
.badge.text-bg-warning { background-color: var(--ez-warn-hell) !important; color: var(--ez-warn-dunkel) !important; }
.badge.text-bg-secondary { background-color: var(--ez-neutral-hell) !important; color: var(--ez-neutral-dunkel) !important; }
.badge.text-bg-danger { background-color: var(--ez-fehler-hell) !important; color: var(--ez-fehler-dunkel) !important; }

.alert { border-radius: var(--ez-radius); }
.alert-success { --bs-alert-bg: var(--ez-akzent-hell); --bs-alert-color: var(--ez-akzent-dunkel); --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-bg: var(--ez-warn-hell); --bs-alert-color: var(--ez-warn-dunkel); --bs-alert-border-color: transparent; }
.alert-danger { --bs-alert-bg: var(--ez-fehler-hell); --bs-alert-color: var(--ez-fehler-dunkel); --bs-alert-border-color: transparent; }
.alert-info { --bs-alert-bg: var(--ez-neutral-hell); --bs-alert-color: var(--ez-neutral-dunkel); --bs-alert-border-color: transparent; }
.modal { --bs-modal-bg: var(--ez-karte); --bs-modal-border-color: var(--ez-linie); }
.modal.d-block { background: rgba(10, 14, 20, .5) !important; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ez-gedaempft); --bs-breadcrumb-item-active-color: var(--ez-gedaempft); }

/* --- App-Gerüst --- */
.ez-app { display: flex; min-height: 100vh; }
.ez-app > main { flex: 1; min-width: 0; }
.ez-app .content { padding: 1.25rem 2rem 2rem; max-width: 1400px; }

.ez-leiste {
    background: var(--ez-leiste);
    color: var(--ez-leiste-text);
    width: 240px;
    flex: 0 0 240px;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
}
.ez-leiste a { color: var(--ez-leiste-text); text-decoration: none; }
.ez-leiste .ez-marke { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; }
.ez-leiste .ez-marke a { color: #fff; font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }
.ez-leiste .ez-menue-knopf { display: none; background: none; border: 1px solid var(--ez-leiste-linie); color: var(--ez-leiste-text); border-radius: 6px; padding: .25rem .5rem; }
.ez-leiste nav { display: flex; flex-direction: column; gap: 2px; padding: .25rem .75rem; overflow-y: auto; }
.ez-leiste nav .nav-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .75rem; border-radius: 6px; color: var(--ez-leiste-text); font-size: .92rem;
    border-left: 3px solid transparent;
}
.ez-leiste nav .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ez-leiste nav .nav-link.active { background: var(--ez-leiste-aktiv); color: #fff; border-left-color: var(--ez-akzent); border-radius: 0 6px 6px 0; }
.ez-icon { width: 18px; height: 18px; flex: 0 0 18px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; opacity: .9; }

.ez-leiste .ez-unten { margin-top: auto; padding: .9rem 1.25rem 1.1rem; border-top: 1px solid var(--ez-leiste-linie); font-size: .72rem; line-height: 1.55; color: var(--ez-leiste-gedaempft); }
.ez-leiste .ez-unten a, .ez-leiste .ez-unten .btn-link { color: var(--ez-leiste-text); font-size: .72rem; padding: 0; border: 0; vertical-align: baseline; text-decoration: none; }
.ez-leiste .ez-unten a:hover, .ez-leiste .ez-unten .btn-link:hover { color: #fff; text-decoration: underline; }
.ez-leiste .ez-unten > * + * { margin-top: .45rem; }
.ez-leiste .ez-unten code { color: var(--ez-leiste-gedaempft); font-size: .68rem; word-break: break-all; }
.ez-leiste .fusszeile { display: block; margin: .45rem 0 0; padding: 0; border: 0; }
.ez-leiste .fusszeile span { display: inline; }
.ez-leiste .fusszeile .trenner::before { content: "·"; margin: 0 .35em; }

@media (max-width: 760px) {
    .ez-app { flex-direction: column; }
    .ez-leiste { width: 100%; flex: none; height: auto; position: sticky; z-index: 10; }
    .ez-leiste .ez-menue-knopf { display: inline-block; }
    .ez-leiste nav, .ez-leiste .ez-unten { display: none; }
    .ez-leiste.offen nav, .ez-leiste.offen .ez-unten { display: flex; }
    .ez-leiste.offen .ez-unten { display: block; }
    .ez-app .content { padding: 1rem; }
}

/* --- Schlichte Seiten ohne Blazor (Login, Impressum, Datenschutz) --- */
.ez-einfach { margin: 0; min-height: 100vh; }
.ez-einfach .ez-mitte { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 1rem; padding: 1rem; box-sizing: border-box; }
.ez-einfach .ez-karte { width: min(440px, 100%); box-sizing: border-box; display: grid; gap: 1rem; margin: 0; padding: 1.5rem; }
.ez-einfach .ez-text { width: min(760px, 100%); }
.ez-einfach h1 { margin: 0; font-size: 1.4rem; }
.ez-einfach h2 { font-size: 1rem; font-weight: 600; margin: .4rem 0 0; }
.ez-einfach p, .ez-einfach ul { margin: 0; color: var(--ez-gedaempft); line-height: 1.55; }
.ez-einfach ul { padding-left: 1.2rem; }
.ez-einfach form { display: grid; gap: .75rem; }
.ez-einfach label { display: grid; gap: .35rem; font-weight: 500; }
.ez-einfach input { font: inherit; padding: .55rem .7rem; border: 1px solid var(--ez-linie); border-radius: 6px; background: var(--ez-karte); color: var(--ez-text); }
.ez-einfach input:focus { outline: none; border-color: var(--ez-akzent); box-shadow: 0 0 0 .2rem rgba(var(--ez-akzent-rgb), .25); }
.ez-einfach button { font: inherit; font-weight: 500; padding: .6rem; border: 0; border-radius: 6px; background: var(--ez-akzent); color: #fff; cursor: pointer; }
.ez-einfach button:hover { background: var(--ez-akzent-hover); }
.ez-einfach a { color: var(--ez-akzent); text-decoration: none; }
.ez-einfach dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; padding: .7rem; background: var(--ez-flaeche); border-radius: 6px; }
.ez-einfach dt { font-weight: 500; color: var(--ez-gedaempft); }
.ez-einfach dd { margin: 0; font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.ez-einfach .meldung { background: var(--ez-akzent-hell); color: var(--ez-akzent-dunkel); border-radius: 6px; padding: .65rem .75rem; }
.ez-einfach .meldung.fehler { background: var(--ez-fehler-hell); color: var(--ez-fehler-dunkel); }
.ez-einfach .falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ez-einfach .ez-marke-gross { font-weight: 600; font-size: 1.05rem; color: var(--ez-text); }
.ez-einfach .fusszeile { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem .9rem; font-size: .75rem; color: var(--ez-gedaempft); }
.ez-einfach .ez-app .content { padding-top: 2rem; }

/* Symbole der Navigation (Linien, eingefärbt über currentColor) */
.i-home { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E"); }
.i-rechnungen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.i-kunden { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6.5 6.5 0 0 1 3.5 5.5'/%3E%3C/svg%3E"); }
.i-firma { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h1M14 15h1M10 21v-3h4v3'/%3E%3C/svg%3E"); }
.i-daten { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E"); }
.i-einstellungen { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }

.form-check-input { border-color: var(--ez-gedaempft); background-color: var(--ez-karte); }
.ez-karte > h4:first-child, .ez-karte > h4.mt-3:first-of-type { margin-top: 0 !important; }
.ez-einfach .ez-leiste .fusszeile { display: block; font-size: .72rem; color: var(--ez-leiste-gedaempft); }
.ez-einfach .ez-leiste .fusszeile a { color: var(--ez-leiste-text); }
.table td.text-end, .table th.text-end { white-space: nowrap; }
@media (max-width: 760px) {
    .content .table { display: block; overflow-x: auto; }
    h1 { font-size: 1.35rem; }
}