/* Eigene Ergänzungen zu MudBlazor. Alles, was hier steht, liegt in der Instanz –
   es werden bewusst keine Schriften oder Skripte aus fremden Netzen nachgeladen. */

html, body {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.zw-appbar {
    backdrop-filter: saturate(140%);
}

/* ⚠️ max-height statt height: Mit fester Höhe UND max-width bekommt das Bild einen Rahmen mit
   anderem Seitenverhältnis – es wird hineingerechnet statt gezeigt, und in der Flex-Zeile
   schrumpft es bei engem Fenster zusätzlich. So behält es seine Form, und Unterlängen (das g
   in einem Schriftzug) haben denselben Platz wie der Rest. */
.zw-logo {
    max-height: 32px;
    max-width: 150px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left center;
    display: block;
    flex: 0 0 auto;
}

/* ⚠️ line-height 1.15 UND overflow:hidden schneidet Unterlängen ab – aus einem „g" wird ein
   Bogen ohne Schwanz. Wo etwas abgeschnitten werden darf, braucht die Zeile mehr Höhe als die
   Schrift. */
.zw-appname {
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zw-appsub {
    opacity: .75;
    line-height: 1.35;
    white-space: nowrap;
}

.zw-avatar {
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* Schaltfläche, die wie ein Symbolknopf aussieht (Abmelden im Formular). */
.zw-iconbutton {
    background: none;
    border: 0;
    padding: .35rem;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: background-color .15s ease;
}

.zw-iconbutton:hover {
    background-color: rgba(255, 255, 255, .14);
}

.zw-linkbutton {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

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

/* Überschrift über einer Gruppe von Menüpunkten – ordnet, ohne eine eigene Ebene
   einzuziehen, durch die man erst klicken müsste. */
.zw-navgroup {
    padding: 1.1rem 1.25rem .35rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .55;
}

.mud-nav-link {
    border-radius: 0 22px 22px 0;
    margin-right: .5rem;
}

/* --- Inhalt ------------------------------------------------------------- */

/* Karten bekommen eine leichte Reaktion auf den Zeiger: genug, um zu zeigen, dass sie
   zusammengehören – zu wenig, um vom Inhalt abzulenken. */
.zw-content .mud-paper-outlined {
    transition: box-shadow .18s ease, border-color .18s ease;
}

.zw-content .mud-paper-outlined:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* Kennzahl-Karten: große Zahl, kleine Beschriftung darüber. */
.zw-metric {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 8.5rem;
}

.zw-metric .zw-metric-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.zw-metric .zw-metric-label {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .7;
}

/* Zahlen in Tabellen sollen untereinander stehen. */
.zw-num, .mud-table-cell .zw-num {
    font-variant-numeric: tabular-nums;
}

/* Die Stempeluhr: die eine Schaltfläche, um die es geht. */
.zw-stamp-button {
    height: 5.5rem;
    font-size: 1.35rem;
    letter-spacing: .01em;
}

/* Ampel der Stempelung – grün Kommen/Weiter, gelb Pause, rot Gehen. Dieselben Werte wie
   Texts.KindColor in der App. Das Rot ist bewusst nicht das Fehlerrot der Palette, damit
   „Gehen“ neben einer Fehlermeldung nicht wie ein zweiter Fehler wirkt. Farbe ist Zusatz:
   Symbol und Text tragen die Bedeutung. */
:root {
    --zw-kommen: #2e7d32;
    --zw-pause: #c26e00;
    --zw-gehen: #b03a2e;
}

.mud-button-filled.zw-stamp-button { color: #fff; }
.mud-button-filled.zw-stamp-button.zw-stamp-kommen { background-color: var(--zw-kommen); }
.mud-button-filled.zw-stamp-button.zw-stamp-pause { background-color: var(--zw-pause); }
.mud-button-filled.zw-stamp-button.zw-stamp-gehen { background-color: var(--zw-gehen); }
.mud-button-filled.zw-stamp-button.zw-stamp-kommen:hover { background-color: color-mix(in srgb, var(--zw-kommen) 88%, black); }
.mud-button-filled.zw-stamp-button.zw-stamp-pause:hover { background-color: color-mix(in srgb, var(--zw-pause) 88%, black); }
.mud-button-filled.zw-stamp-button.zw-stamp-gehen:hover { background-color: color-mix(in srgb, var(--zw-gehen) 88%, black); }
.mud-button-filled.zw-stamp-button.mud-disabled { color: var(--mud-palette-action-disabled); background-color: var(--mud-palette-action-disabled-background); }

/* Der Feierabend-Knopf unter Pause/Weiter: Rand und Schrift im Gehen-Rot */
.mud-button-outlined.zw-stamp-outline-gehen { color: var(--zw-gehen); border-color: var(--zw-gehen); }
.mud-button-outlined.zw-stamp-outline-gehen:hover { background-color: color-mix(in srgb, var(--zw-gehen) 10%, transparent); }
.mud-button-outlined.zw-stamp-outline-gehen.mud-disabled { color: var(--mud-palette-action-disabled); border-color: var(--mud-palette-action-disabled-background); }

/* Dieselbe Ampel für die Pause als zweite Taste – gelb wie der große Pausenknopf. */
.mud-button-outlined.zw-stamp-outline-pause { color: var(--zw-pause); border-color: var(--zw-pause); }
.mud-button-outlined.zw-stamp-outline-pause:hover { background-color: color-mix(in srgb, var(--zw-pause) 10%, transparent); }
.mud-button-outlined.zw-stamp-outline-pause.mud-disabled { color: var(--mud-palette-action-disabled); border-color: var(--mud-palette-action-disabled-background); }
/* Auf dunklem Grund heller, sonst liest sich das Rot nicht (die Farbtaste selbst bleibt, weiße Schrift) */
.zw-dark .mud-button-outlined.zw-stamp-outline-gehen { color: #e8746a; border-color: #e8746a; }

/* Punkte der Zeitleiste in denselben Farben */
.zw-dot-kommen .mud-timeline-item-dot .mud-timeline-item-dot-inner { background-color: var(--zw-kommen); }
.zw-dot-pause .mud-timeline-item-dot .mud-timeline-item-dot-inner { background-color: var(--zw-pause); }
.zw-dot-gehen .mud-timeline-item-dot .mud-timeline-item-dot-inner { background-color: var(--zw-gehen); }

.zw-clock {
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Farbiger Streifen am linken Rand einer Karte, in der Hausfarbe. */
.zw-accent-bar {
    border-left: 3px solid var(--mud-palette-primary);
}

/* --- Anmeldung und Ersteinrichtung ---------------------------------------
   Diese Seiten laufen ohne Navigation und teilweise ohne Interaktivität (die Anmeldung
   braucht den HTTP-Kontext und wird deshalb statisch gerendert). Deshalb bringen sie
   ihre eigene, schlichte Gestaltung mit – gefärbt in der Hausfarbe. */

.zw-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background:
        radial-gradient(900px 520px at 50% -5%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 38%, transparent), transparent 68%),
        radial-gradient(700px 400px at 85% 105%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 18%, transparent), transparent 70%),
        #f4f5f8;
}

@media (prefers-color-scheme: dark) {
    .zw-auth {
        background:
            radial-gradient(900px 520px at 50% -5%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 42%, transparent), transparent 68%),
            radial-gradient(700px 400px at 85% 105%, color-mix(in srgb, var(--zw-accent, #0e5e6f) 22%, transparent), transparent 70%),
            #16171b;
    }
}

.zw-auth-card {
    width: 100%;
    max-width: 30rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(15, 20, 35, .12), 0 2px 6px rgba(15, 20, 35, .06);
    padding: 2.25rem 2.25rem 2rem;
}

@media (prefers-color-scheme: dark) {
    .zw-auth-card {
        background: #212328;
        color: #e9eaee;
        box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    }
}

.zw-auth-logo {
    max-height: 52px;
    max-width: 190px;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

.zw-auth-card h1 {
    margin: 0 0 .25rem;
    font-size: 1.45rem;
    font-weight: 600;
}

.zw-auth-sub {
    margin: 0 0 1.75rem;
    opacity: .7;
    font-size: .9rem;
}

.zw-field {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.zw-field label {
    font-size: .82rem;
    font-weight: 500;
    opacity: .85;
}

.zw-field input,
.zw-field select {
    padding: .7rem .8rem;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 9px;
    font: inherit;
    background: inherit;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}

@media (prefers-color-scheme: dark) {
    .zw-field input,
    .zw-field select {
        border-color: rgba(255, 255, 255, .18);
    }
}

.zw-field input:focus,
.zw-field select:focus {
    outline: none;
    border-color: var(--zw-accent, #0e5e6f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zw-accent, #0e5e6f) 22%, transparent);
}

.zw-submit {
    width: 100%;
    padding: .8rem 1rem;
    border: 0;
    border-radius: 9px;
    background: var(--zw-accent, #0e5e6f);
    color: var(--zw-accent-contrast, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s ease, transform .08s ease;
}

.zw-submit:hover {
    filter: brightness(.93);
}

.zw-submit:active {
    transform: translateY(1px);
}

.zw-error {
    background: rgba(198, 40, 40, .1);
    border-left: 4px solid #c62828;
    padding: .8rem 1rem;
    border-radius: 6px;
    margin-bottom: 1.1rem;
    font-size: .9rem;
}

.zw-hint {
    font-size: .85rem;
    opacity: .75;
    margin-top: 1.4rem;
}

.zw-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    font-size: .9rem;
}

/* Fehleranzeige von Blazor unten am Bildschirmrand. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffe9a8;
    color: #3b2f00;
    padding: .8rem 1.2rem;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

/* Wer Bewegung abgestellt hat, bekommt keine – das ist eine Einstellung des Betriebssystems
   und keine Geschmacksfrage. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* --- Monatsübersicht: Wochensummen und Füllbalken --------------------------
   Der Balken beantwortet die Frage „reicht die Zeit?“ schneller als drei
   Zahlen. Er ist bewusst schmal: Er soll den Blick führen, nicht die Zeile
   dominieren. */

.zw-week-row td,
.zw-week-row th {
    background: var(--mud-palette-background-gray);
    border-top: 2px solid var(--mud-palette-lines-default);
}

.zw-week-cell {
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
    font-size: .8125rem;
}

.zw-fill {
    height: 3px;
    margin-top: .2rem;
    border-radius: 2px;
    background: var(--mud-palette-lines-default);
    overflow: hidden;
}

.zw-fill span {
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width .25s ease;
}

/* Ein Tag, der noch läuft, wird blasser gezeichnet – er ist keine Bilanz. */
.zw-fill-open {
    opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
    .zw-fill span {
        transition: none;
    }
}

/* --- Benutzermenü in der Kopfzeile -----------------------------------------
   Bewusst ohne JavaScript: Es öffnet über :focus-within und schließt, sobald
   der Fokus es verlässt. Ein Menü, das ein Skript braucht, öffnet in manchen
   Umgebungen gar nicht – und dann käme niemand mehr an das Abmelden. */

.zw-usermenu {
    position: relative;
    display: flex;
    align-items: center;
}

.zw-usermenu-trigger {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    border-radius: 50%;
    color: inherit;
}

.zw-usermenu-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.zw-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.zw-usermenu-panel {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    min-width: 13rem;
    padding: .35rem 0;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--mud-elevation-8);
    z-index: 1400;

    /* Nicht display:none, damit der Übergang greift – und visibility hält es
       für die Tastatur und Vorleseprogramme wirklich aus dem Weg. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.25rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.zw-usermenu:hover .zw-usermenu-panel,
.zw-usermenu:focus-within .zw-usermenu-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.zw-usermenu-head {
    padding: .5rem .9rem .6rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    margin-bottom: .35rem;
}

.zw-usermenu-name {
    font-weight: 600;
    font-size: .875rem;
}

.zw-usermenu-role {
    font-size: .75rem;
    opacity: .7;
}

.zw-usermenu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .9rem;
    background: none;
    border: 0;
    font: inherit;
    font-size: .875rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    text-align: left;

    /* ⚠️ Auch für <button>: Ein Knopf bringt eigene Innenabstände, eigene Ränder und
       zentrierten Text mit. Ohne diese vier Zeilen steht ein Knopf im Menü weiter rechts
       als die Links darüber (Lars, 02.10.2026) – und das fällt erst auf, wenn der zweite
       Knopf dazukommt. */
    justify-content: flex-start;
    margin: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.zw-usermenu-item:hover,
.zw-usermenu-item:focus-visible {
    background: var(--mud-palette-action-default-hover);
    outline: none;
}

.zw-usermenu-signout {
    color: var(--mud-palette-error);
}

.zw-usermenu form {
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .zw-usermenu-panel {
        transition: none;
    }
}

/* --- Glocke ---------------------------------------------------------------- */

.zw-bell {
    position: relative;
    padding: .35rem;
}

.zw-bell-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 .2rem;
    border-radius: .55rem;
    background: var(--mud-palette-error);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.05rem;
    text-align: center;
}

.zw-bell-panel {
    min-width: 21rem;
    max-width: 24rem;
    max-height: 26rem;
    overflow-y: auto;
}

.zw-bell-clear {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: .75rem;
    color: var(--mud-palette-primary);
    cursor: pointer;
    text-decoration: underline;
}

.zw-bell-empty {
    padding: 1rem .9rem;
    font-size: .8125rem;
    opacity: .7;
}

.zw-bell-item {
    display: block;
    padding: .6rem .9rem;
    color: inherit;
    text-decoration: none;
    border-left: 3px solid transparent;
}

.zw-bell-item:hover {
    background: var(--mud-palette-action-default-hover);
}

/* Ungelesenes wird markiert, nicht die gelesenen ausgegraut: Die Liste soll
   zeigen, was noch etwas von einem will. */
.zw-bell-unread {
    border-left-color: var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
}

.zw-bell-title {
    font-size: .8125rem;
    font-weight: 600;
}

.zw-bell-text {
    font-size: .75rem;
    opacity: .8;
    margin-top: .1rem;
}

.zw-bell-when {
    font-size: .7rem;
    opacity: .6;
    margin-top: .2rem;
}

/* --- Anmeldung: zweiter Weg ------------------------------------------------ */

.zw-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: #6b7280;
    font-size: .8125rem;
}

.zw-or::before,
.zw-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .3;
}

.zw-submit-secondary {
    background: transparent;
    color: inherit;
    border: 1px solid currentColor;
}

/* --- Urlaubsplantafel ------------------------------------------------------
   Eine Tabelle und kein Rasterlayout: Personen sind Zeilen, Tage sind Spalten,
   und genau so liest ein Mensch eine Plantafel. Der Name bleibt beim Blättern
   stehen, sonst weiß man nach Spalte zwölf nicht mehr, wessen Zeile das ist. */

.zw-board {
    border-collapse: separate;
    border-spacing: 0;
    font-size: .75rem;
    white-space: nowrap;
}

.zw-board th,
.zw-board td {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.zw-board-name {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 13rem;
    max-width: 16rem;
    padding: .4rem .6rem;
    text-align: left;
    font-weight: 500;
    background: var(--mud-palette-surface);
    white-space: normal;
}

.zw-board-name a {
    color: inherit;
    text-decoration: none;
}

.zw-board-name a:hover {
    text-decoration: underline;
}

.zw-board-unit {
    display: block;
    font-size: .6875rem;
    font-weight: 400;
    opacity: .6;
}

.zw-board-day {
    width: 1.6rem;
    min-width: 1.6rem;
    padding: .25rem 0;
    text-align: center;
    font-weight: 500;
    background: var(--mud-palette-background-gray);
}

.zw-board-dow {
    display: block;
    font-size: .625rem;
    font-weight: 400;
    opacity: .6;
}

.zw-board-num {
    display: block;
    line-height: 1.1;
}

.zw-board-cell {
    height: 1.9rem;
    text-align: center;
    background: var(--mud-palette-surface);

    /* Anklickbar: Jede Zelle öffnet den Tag dieser Person. Ohne sichtbare Rückmeldung
       probiert es niemand aus – eine Tafel sieht erst einmal wie eine Anzeige aus. */
    cursor: pointer;
}

.zw-board-cell:hover {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Frei ist nicht abwesend: Ein Urlaubstag am Sonntag kostet nichts und soll
   deshalb auch nicht so aussehen. */
.zw-board-free {
    background: var(--mud-palette-background-gray);
}

.zw-board-weekend {
    opacity: .75;
}

.zw-board-today {
    box-shadow: inset 2px 0 0 var(--mud-palette-primary);
}

.zw-board-absent {
    background: var(--zw-board-color, var(--mud-palette-primary));
}

/* Beantragt wird gestreift statt voll gefüllt – der Unterschied muss auch dann
   erkennbar sein, wenn jemand Farben schlecht unterscheidet. */
.zw-board-requested {
    background: repeating-linear-gradient(
        45deg,
        var(--zw-board-color, var(--mud-palette-primary)) 0 4px,
        transparent 4px 8px
    );
}

.zw-board-pending {
    font-size: .625rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.zw-board-sum {
    padding: .3rem .5rem;
    text-align: right;
    background: var(--mud-palette-background-gray);
    min-width: 3.5rem;
}

.zw-board-negative {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.zw-board-swatch {
    display: inline-block;
    width: .9rem;
    height: .9rem;
    border-radius: 3px;
    border: 1px solid var(--mud-palette-lines-default);
}

.zw-board-swatch-free {
    background: var(--mud-palette-background-gray);
}

.zw-board-swatch-pending {
    background: repeating-linear-gradient(45deg, var(--mud-palette-primary) 0 4px, transparent 4px 8px);
}

.zw-board-warn {
    color: var(--mud-palette-warning);
    font-weight: 500;
}

/* Freie Tage müssen auf einen Blick als Block erkennbar sein – das Wochenende
   ist die Struktur, an der man sich auf einer Plantafel entlanghangelt.
   `background-gray` ist gegen Weiß fast unsichtbar; eine Mischung aus der
   Textfarbe trägt sich dagegen in beide Darstellungen. */
.zw-board-free,
.zw-board-swatch-free {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
}

.zw-board-day.zw-board-weekend {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent);
    opacity: 1;
}

/* Jahresstatistik: Ist zu Soll als schmaler Balken je Monat. Gearbeitet in der Hausfarbe,
   Abwesenheit blasser – auf einen Blick sichtbar, ob ein Monat aus Arbeit oder aus Urlaub
   bestand. Die Spur ist das Soll; was darüber hinausgeht, wird bei 100 % gekappt. */

.zw-yearbar {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.zw-yearbar-worked {
    display: block;
    background: var(--mud-palette-primary);
}

.zw-yearbar-absent {
    display: block;
    background: var(--mud-palette-primary);
    opacity: .35;
}

/* Betreiber-Sitzung: ein Band über dem Inhalt, das sich nicht übersehen lässt. */
.zw-operator-banner {
    position: sticky;
    top: 64px;
    z-index: 5;
}

/* --- Marke: Zeitwerk-Zeichen, wo das Haus kein eigenes Logo hat --------------------------- */
.zw-auth-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    color: var(--zw-accent, #0e5e6f);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: -.01em;
}

.zw-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    vertical-align: middle;
}

/* --- Fußzeile immer unten: der Inhalt wächst, die Fußzeile bleibt am Seitenende -------------- */
.zw-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.zw-content-grow {
    flex: 1 0 auto;
}

/* --- Seite /app: Anleitung fürs Telefon ---------------------------------------------------- */
.zw-app-h2 {
    margin: .25rem 0 .75rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.zw-app-steps {
    padding-left: 1.25rem;
    margin: 0 0 1rem;
}

.zw-app-steps li {
    margin-bottom: .5rem;
}

/* Kalender: Wochenende gedämpft, Feiertage rot – wie am Terminal (0.34.0). */
.mud-picker-calendar .zw-weekend, .mud-picker-calendar .zw-weekend .mud-button-label { color: #B03A2E; opacity: .8; }
.mud-picker-calendar .zw-holiday, .mud-picker-calendar .zw-holiday .mud-button-label { color: #B03A2E; font-weight: 600; background: rgba(176, 58, 46, .10); }
.mud-picker-calendar .zw-half-holiday, .mud-picker-calendar .zw-half-holiday .mud-button-label { color: #C26E00; font-weight: 600; background: rgba(194, 110, 0, .10); }

/* Demo-Umgebung: Zugänge auf der Anmeldeseite (0.35.0). */
.zw-demo-hint { background: #E3EEF0; border-radius: .5rem; padding: .8rem 1rem; margin: 0 0 1rem; font-size: .95rem; line-height: 1.6; }
.zw-demo-hint code { background: #fff; padding: 0 .3rem; border-radius: .25rem; }

/* Der Korrekturabzug einer Chipkarte: Seitenverhältnis einer Scheckkarte (85,6 × 54 mm),
   damit man sieht, wie viel Platz Logo und Name wirklich haben. */
.zw-card-proof {
    position: relative;
    width: 17.12rem;
    height: 10.8rem;
    padding: .9rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: .55rem;
    background: #fff;
    box-shadow: 0 1px 4px rgb(0 0 0 / 12%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Oben: links, was man liest (Name, Haus, Anschrift), rechts das Logo. */
.zw-card-proof-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .6rem;
    min-width: 0;
}

.zw-card-proof-left {
    min-width: 0;
    overflow: hidden;
}

.zw-card-proof-company {
    font-size: .8rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.25;
}

.zw-card-proof-address {
    font-size: .72rem;
    color: #444;
    line-height: 1.25;
}

/* Unten quer: eigener Text und der Rücksende-Hinweis – klein, wie gedruckt. */
.zw-card-proof-foot {
    font-size: .6rem;
    color: #666;
    line-height: 1.25;
}

/* Die Personalnummer steht klein unter dem Namen – sie ist eine Fundhilfe, keine Schlagzeile. */
.zw-card-proof-personnel {
    font-size: .68rem;
    color: #444;
    line-height: 1.2;
}

/* Der Rücksende-Hinweis: mittig, klein, und er bricht von selbst um. */
.zw-card-proof-return {
    text-align: center;
    font-size: .52rem;
    line-height: 1.3;
    text-wrap: balance;
}

.zw-card-proof-custom {
    color: #1a1a1a;
    font-size: .68rem;
}

.zw-card-proof-logo {
    max-width: 38%;
    max-height: 3rem;
    object-fit: contain;
    object-position: right top;
    flex: 0 0 auto;
}

.zw-card-proof-empty {
    display: flex;
    align-items: center;
    font-size: .75rem;
    color: #9e9e9e;
    border: 1px dashed #cfcfcf;
    border-radius: .3rem;
    padding: 0 .5rem;
    height: 2.2rem;
    width: 7rem;
}

/* Der Name steht unten und dunkel – auf einer weißen Karte gilt die Farbe des Papiers,
   nicht die des Bildschirms. */
.zw-card-proof-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

/* Die Bestellung: vier Kacheln, eine ist gewählt. Kein Warenkorb, keine Schritte. */
.zw-order-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: .6rem;
}

.zw-order-tile {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: .5rem;
    padding: .7rem .85rem;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.zw-order-tile:hover {
    border-color: var(--mud-palette-primary);
}

.zw-order-tile-on {
    border-color: var(--mud-palette-primary);
    border-width: 2px;
    padding: calc(.7rem - 1px) calc(.85rem - 1px);
    background: var(--mud-palette-primary-hover);
}

/* Die Kontaktzeile auf dem Korrekturabzug – klein, wie gedruckt. */
.zw-card-proof-contact {
    font-size: .8rem;
    color: #444;
    line-height: 1.3;
}

/* --- Monatsübersicht auf dem Telefon -------------------------------------------------
   Die Tabelle bleibt eine Tabelle (Breakpoint.None); schmale Bildschirme bekommen nur
   die Spalten, die dort etwas aussagen: Tag mit Buchungen darunter, Ist und Saldo.
   Soll, Pause und Hinweis stehen im Tagesdialog – wer sie braucht, öffnet den Tag. */
.zw-only-sm {
    display: none;
}

@media (max-width: 720px) {
    .zw-month-table .zw-hide-sm {
        display: none !important;
    }

    .zw-only-sm {
        display: block;
        /* „08:36 – 17:12“ gehört in eine Zeile; sonst zerfällt die Spalte in vier Zeilen. */
        white-space: nowrap;
        font-size: .72rem;
    }

    /* Enger setzen: Auf 375 Pixel zählt jeder Millimeter. */
    .zw-month-table td,
    .zw-month-table th {
        padding-left: .4rem !important;
        padding-right: .4rem !important;
    }

    .zw-month-table .zw-week-cell {
        font-size: .8rem;
    }
}

/* Dateiwähler der Massenanlage: Blazors InputFile ohne Rahmen sieht nackt aus. */
.zw-fileinput {
    display: block;
    padding: .6rem .75rem;
    border: 1px dashed var(--mud-palette-lines-default, #bbb);
    border-radius: 8px;
    width: 100%;
    max-width: 28rem;
}