/* Eigene Bausteine im Backend (Wochenplan, Kalender). Filament bringt nur sein fertiges CSS mit. */

:root {
    --gl-linie: rgba(120, 120, 135, 0.3);
    --gl-flaeche: rgba(120, 120, 135, 0.08);
    --gl-farbe-0: #b45309;
    --gl-farbe-1: #0369a1;
    --gl-farbe-2: #7e22ce;
    --gl-farbe-3: #15803d;
    --gl-farbe-4: #be123c;
    --gl-farbe-5: #4d7c0f;
    /* Markierung und Auswahl: dunkel am Tag, hell im Nachtmodus (Sylvia, 09.10.2026) */
    --gl-markierung: #1b1b2f;
    --gl-markierung-text: #fff;
}

.dark {
    --gl-markierung: #f4f4f5;
    --gl-markierung-text: #18181b;
}

.gl-hinweis {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.8;
    max-width: 60rem;
}

.gl-fehler {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #dc2626;
}

.gl-planwahl,
.gl-neue-uhrzeit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Wochenplan-Raster */

.gl-raster-rahmen {
    overflow-x: auto;
    border: 1px solid var(--gl-linie);
    border-radius: 0.75rem;
}

.gl-raster {
    width: 100%;
    min-width: 62rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
}

.gl-raster tr > *:first-child {
    width: 4.5rem;
}

.gl-raster th,
.gl-raster td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--gl-linie);
    border-right: 1px solid var(--gl-linie);
    vertical-align: top;
    text-align: left;
}

.gl-raster tr:last-child > * {
    border-bottom: 0;
}

.gl-raster tr > *:last-child {
    border-right: 0;
}

.gl-raster thead th,
.gl-raster tbody th {
    background: var(--gl-flaeche);
    font-weight: 600;
    white-space: nowrap;
}

.gl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.gl-chip {
    padding: 0.125rem 0.4rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.45;
    cursor: pointer;
}

.gl-chip:hover {
    opacity: 0.8;
}

/* Mit Maus: Ausgeschaltete Räume erscheinen erst, wenn der Zeiger auf dem Feld steht. */
@media (hover: hover) {
    .gl-raster td .gl-chip:not(.gl-chip-an) {
        visibility: hidden;
    }

    .gl-raster td:hover .gl-chip,
    .gl-raster td:focus-within .gl-chip {
        visibility: visible;
    }

    .gl-raster td:hover {
        background: var(--gl-flaeche);
    }
}

.gl-chip-an {
    opacity: 1;
    color: #fff;
    border-color: transparent;
}

.gl-chip-an.gl-farbe-0 { background: var(--gl-farbe-0); }
.gl-chip-an.gl-farbe-1 { background: var(--gl-farbe-1); }
.gl-chip-an.gl-farbe-2 { background: var(--gl-farbe-2); }
.gl-chip-an.gl-farbe-3 { background: var(--gl-farbe-3); }
.gl-chip-an.gl-farbe-4 { background: var(--gl-farbe-4); }
.gl-chip-an.gl-farbe-5 { background: var(--gl-farbe-5); }

.gl-zahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    font-size: 0.75rem;
    opacity: 0.9;
}

.gl-zahl select {
    padding: 0.05rem 1.4rem 0.05rem 0.4rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.375rem;
    background-color: transparent;
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
}

.gl-zahl select option {
    color: #111;
}

/* Einfache Listen (Feiertage) */

.gl-jahr {
    font-size: 1.125rem;
}

.gl-liste {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.gl-liste th,
.gl-liste td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--gl-linie);
    text-align: left;
}

.gl-liste thead th {
    background: var(--gl-flaeche);
    font-weight: 600;
}

/* Lange Listen: die Tabelle scrollt in sich, die Spaltenköpfe bleiben stehen */
.gl-raster-fest {
    overflow: auto;
}

/* Deckend, sonst scheinen die darunter gescrollten Zeilen durch (die Fläche ist halb durchsichtig) */
.gl-raster-fest thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #fff;
    background-image: linear-gradient(var(--gl-flaeche), var(--gl-flaeche));
    box-shadow: inset 0 -1px 0 var(--gl-linie);
}

.dark .gl-raster-fest thead th {
    background-color: var(--color-gray-900, #18181b);
}

.gl-liste tr:last-child td {
    border-bottom: 0;
}

.gl-liste .gl-rechts {
    text-align: right;
}

.gl-liste tr.gl-aus td:not(.gl-rechts) {
    opacity: 0.5;
    text-decoration: line-through;
}

/* Tresen-Kalender */

:root {
    --gl-gebucht: #fecaca;
    --gl-gebucht-rand: #dc2626;
    --gl-frei: #d9f99d;
    --gl-frei-rand: #65a30d;
    --gl-gesperrt: #d4d4d8;
    --gl-gesperrt-rand: #71717a;
    --gl-sonder: #bfdbfe;
    --gl-sonder-rand: #2563eb;
}

.gl-kopf,
.gl-kopf-rechts,
.gl-tage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.gl-kopf {
    justify-content: space-between;
}

.gl-pfeil,
.gl-plus {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--gl-linie);
    border-radius: 999px;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.gl-pfeil:hover,
.gl-plus:hover {
    background: var(--gl-flaeche);
}

.gl-tagknopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.gl-tagknopf strong {
    font-size: 0.875rem;
}

.gl-tagknopf:hover {
    background: var(--gl-flaeche);
}

.gl-tagknopf-heute {
    border-color: #d97706;
}

.gl-tagknopf-an,
.gl-tagknopf-an:hover {
    background: var(--gl-markierung);
    border-color: var(--gl-markierung);
    color: var(--gl-markierung-text);
}

.gl-umschalter {
    display: flex;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    overflow: hidden;
    font-size: 0.875rem;
}

.gl-umschalter button {
    padding: 0.35rem 0.8rem;
    cursor: pointer;
}

.gl-umschalter-an {
    background: var(--gl-markierung);
    color: var(--gl-markierung-text);
}

.gl-tagestitel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.gl-marke {
    display: inline-block;
    padding: 0 0.4rem;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.gl-marke-feiertag {
    color: #b45309;
}

/* Kurzer Vorlauf am freien Termin („30 Min. · Nadine“): am Handy abgeschnitten statt über den Kartenrand */
.gl-marke-kurz {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.gl-kalender {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

/* Breite Bildschirme: Zahl „Räume gleichzeitig" links, Räume in der Mitte, Leiste rechts */
@media (min-width: 64rem) {
    .gl-kalender-mit-leiste {
        grid-template-columns: minmax(0, 1fr) 21rem;
    }

    .gl-kalender > * {
        grid-row: 1;
    }

    .gl-kalender .gl-spalten {
        grid-column: 1;
    }

    .gl-kalender .gl-leiste {
        grid-column: 2;
    }
}

/* Die Raumspalten teilen sich die Zeilen eines Rasters (B60 Nr. 11, Sylvia 17.10.2026): Jede Spalte belegt Kopf plus
   ihre Termine (--gl-zeilen) als Subgrid. Wird eine Karte höher, weil sie viele Angaben hat, wächst die ganze Zeile mit,
   und jede Uhrzeit liegt in allen Räumen weiter auf einer Linie. Am Handy stehen zwei Räume nebeneinander, die nächsten
   zwei darunter, jeweils wieder auf einer Linie. */
.gl-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.gl-spalte {
    display: grid;
    grid-row: span var(--gl-zeilen, 1);
    grid-template-rows: subgrid;
    row-gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.75rem;
}

/* Eine Spalte, die nie breiter wird als ihr Platz im Raster. */
.gl-spalte {
    grid-template-columns: minmax(0, 1fr);
}

/* PC ohne Leiste rechts: „Räume gleichzeitig“ als schmale erste Spalte im selben Raster, alle Räume in einer Reihe. */
@media (min-width: 64rem) {
    .gl-kalender:not(.gl-kalender-mit-leiste) .gl-spalten-mit-zahl {
        grid-template-columns: 4.75rem repeat(var(--gl-raeume, 4), minmax(0, 1fr));
    }

    .gl-kalender:not(.gl-kalender-mit-leiste) .gl-spalten-mit-zahl > .gl-spalte {
        grid-row: 1 / span var(--gl-zeilen, 1);
    }

    .gl-kalender:not(.gl-kalender-mit-leiste) .gl-spalten-mit-zahl > .gl-zahlspalte {
        display: grid;
        grid-column: 1;
        grid-row: 1 / span var(--gl-zeilen, 1);
        grid-template-rows: subgrid;
        row-gap: 0.5rem;
        width: auto;
    }

    /* Mit Leiste rechts ist es schmaler: Die Räume rücken bei Bedarf in eine zweite Reihe, „Räume gleichzeitig“ steht
       wie am Handy als Zeile darunter. */
    .gl-kalender-mit-leiste .gl-spalten > .gl-zahlspalte {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
        padding: 0.5rem 0.75rem;
    }

    .gl-kalender-mit-leiste .gl-zahlspalte > header {
        min-height: 0;
        width: 100%;
        justify-content: flex-start;
        font-size: 0.75rem;
    }

    .gl-kalender-mit-leiste .gl-zahlfeld {
        flex-direction: row;
        min-height: 0;
        gap: 0.3rem;
    }

    .gl-kalender-mit-leiste .gl-zahlspalte .gl-zahlfeld-zeit {
        display: inline;
    }
}

/* Handy und Tablet: „Räume gleichzeitig“ als eine Zeile unter allen Räumen. */
@media (max-width: 63.99rem) {
    .gl-spalten > .gl-zahlspalte {
        grid-column: 1 / -1;
    }
}

.gl-spalte > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Lange Raumnamen brechen im Kopf um, statt unter Kreis und Plus zu laufen. */
.gl-spalte > header > .gl-raumname-lang {
    min-width: 0;
    overflow-wrap: anywhere;
}

.gl-raumname-kurz {
    display: none;
}

/* Handy und Tablet: Kurzname in einer Zeile, damit alle Raumköpfe gleich hoch sind (Sylvia, 09.10.2026) */
@media (max-width: 63.99rem) {
    .gl-raumname-lang {
        display: none;
    }

    .gl-raumname-kurz {
        display: block;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.gl-leer {
    padding: 1rem 0;
    font-size: 0.8125rem;
    text-align: center;
    opacity: 0.6;
}

/* Terminkarte im Tageskalender (B60 Nr. 11, Sylvia 17.10.2026): Der Rahmen ist die sichtbare Karte. Darin fließen der
   Link bzw. Knopf mit Zeit, Marken, Name, Personen und Vorlauf und darunter die Fußzeile mit den eingeteilten Personen
   und „+1 Anfrage“. Nichts liegt absolut über den Angaben; reicht der Platz nicht, bricht eine Zeile um und die Karte
   wird höher (die ganze Zeile im Raster mit, siehe .gl-spalte). Mindesthöhe wie bisher. */
.gl-kartenrahmen {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    min-height: 6.6rem;
    padding: 0.45rem 0.6rem 0.4rem;
    border: 1px solid;
    border-left-width: 4px;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: #18181b;
}

.gl-kartenrahmen:hover {
    filter: brightness(0.96);
}

.gl-karte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    width: 100%;
    min-width: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

/* Der Link bzw. Knopf deckt die ganze Karte ab, damit ein Klick irgendwo auf der Karte sie öffnet. Kreis, „i“, Marken mit
   Hinweis und die Fußzeile liegen darüber. */
.gl-karte::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

.gl-karte-an {
    outline: 2px solid var(--gl-markierung);
    outline-offset: 1px;
}

.gl-karte-zeit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    max-width: 100%;
    font-weight: 500;
}

.gl-karte-uhrzeit {
    white-space: nowrap;
}

/* Marken auf der Karte brechen bei schmalen Spalten innen um, statt über den Rand zu laufen. */
.gl-kartenrahmen .gl-marke {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Marken mit Hinweis und der Name liegen über der Klickfläche der Karte, damit der Tooltip beim Überfahren erscheint. */
.gl-marke-hinweis,
.gl-karte-gast {
    position: relative;
    z-index: 1;
}

.gl-marke-hinweis {
    cursor: help;
}

.gl-karte-gast {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Personen und Vorlauf (B54 Nr. 2): nebeneinander, bei wenig Platz untereinander. Ein langer kurzer Vorlauf wird mit
   „…“ abgeschnitten, der volle Text steht im Hinweis. */
.gl-karte-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.35rem;
    max-width: 100%;
    min-width: 0;
}

.gl-karte-zeile > span {
    flex: none;
    max-width: 100%;
}

.gl-kartenrahmen .gl-karte-zeile > .gl-marke-kurz {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

/* Fußzeile: Namen links, „+1 Anfrage“ rechts; bricht bei wenig Platz um und sitzt unten auf der Karte. Leere Stellen
   lassen den Klick zur Karte durch. */
.gl-karte-fuss {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    margin-top: auto;
    min-width: 0;
    pointer-events: none;
}

.gl-karte-fuss > * {
    pointer-events: auto;
}

/* Hinweise im Tooltip von Filament: Zeilenumbrüche im Text bleiben stehen (z. B. eingeteilt und getauscht). */
.tippy-box .tippy-content {
    white-space: pre-line;
}

.gl-vorbei {
    opacity: 0.55;
}

.gl-gebucht { background: var(--gl-gebucht); border-color: var(--gl-gebucht-rand); }
.gl-frei { background: var(--gl-frei); border-color: var(--gl-frei-rand); }
.gl-gesperrt { background: var(--gl-gesperrt); border-color: var(--gl-gesperrt-rand); }
.gl-sonder { background: var(--gl-sonder); border-color: var(--gl-sonder-rand); }

.gl-voll {
    background: repeating-linear-gradient(135deg, var(--gl-frei) 0 8px, var(--gl-gesperrt) 8px 16px);
    border-color: var(--gl-gesperrt-rand);
}

/* Räume gleichzeitig: schmale Spalte rechts neben den Räumen */

.gl-zahlspalte {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 4.75rem;
    padding: 0.5rem 0.35rem;
    border: 1px dashed var(--gl-linie);
    border-radius: 0.75rem;
}

.gl-zahlspalte > header {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    hyphens: manual;
    opacity: 0.8;
    cursor: help;
}

.gl-zahlfeld {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 6.6rem;
    font-size: 0.75rem;
}

.gl-zahlfeld-zeit {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.gl-zahlspalte-auf-hoehe .gl-zahlfeld-zeit {
    display: none;
}

.gl-zahlfeld select {
    width: 3.4rem;
    padding: 0.15rem 0.2rem 0.15rem 0.5rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.375rem;
    background-color: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
}

.gl-zahlfeld select option {
    color: #111;
}

.gl-zahlfeld-geaendert select {
    border-color: #d97706;
    box-shadow: 0 0 0 1px #d97706;
}

.gl-zurueck {
    font-size: 0.875rem;
    line-height: 1;
    opacity: 0.7;
    cursor: pointer;
}

.gl-zurueck:hover {
    opacity: 1;
}

/* Schmale Bildschirme: Die Räume stehen untereinander, die Zahlen als eine Zeile mit Uhrzeit darunter. */
@media (max-width: 63.99rem) {
    .gl-zahlspalte {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
        padding: 0.5rem 0.75rem;
    }

    .gl-zahlspalte > header {
        min-height: 0;
        width: 100%;
        justify-content: flex-start;
        font-size: 0.75rem;
    }

    .gl-zahlfeld {
        flex-direction: row;
        min-height: 0;
        gap: 0.3rem;
    }

    .gl-zahlspalte .gl-zahlfeld-zeit,
    .gl-zahlspalte-auf-hoehe .gl-zahlfeld-zeit {
        display: inline;
    }
}

.gl-link {
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.gl-leiste {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.75rem;
    position: sticky;
    top: 5rem;
}

.gl-leiste > header {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.gl-leiste > header div {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
}

.gl-leiste > header strong {
    font-size: 1rem;
}

.gl-stand {
    padding: 0.3rem 0.6rem;
    border: 1px solid;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #18181b;
}

.gl-text {
    font-size: 0.875rem;
}

.gl-leise {
    opacity: 0.7;
}

.gl-daten {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 0.9rem;
    font-size: 0.875rem;
}

.gl-daten dt {
    opacity: 0.7;
}

.gl-daten dd {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.gl-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gl-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--gl-linie);
}

.gl-block h3 {
    font-size: 0.875rem;
    font-weight: 600;
}

.gl-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    font-size: 0.8125rem;
}

.gl-punkt {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 0.5rem;
    border: 1px solid;
    border-radius: 999px;
}

/* Wochenansicht */

.gl-woche {
    width: 100%;
    min-width: 60rem;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
}

.gl-woche th,
.gl-woche td {
    padding: 0.4rem;
    border-bottom: 1px solid var(--gl-linie);
    border-right: 1px solid var(--gl-linie);
    vertical-align: top;
    text-align: left;
}

.gl-woche tr > *:first-child {
    width: 4.5rem;
}

.gl-woche tr > *:last-child {
    border-right: 0;
}

.gl-woche tbody tr:last-child > * {
    border-bottom: 0;
}

.gl-woche th {
    background: var(--gl-flaeche);
    font-weight: 600;
}

.gl-woche th.gl-heute {
    box-shadow: inset 0 -3px 0 #d97706;
}

.gl-wochenslot {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.35rem;
    width: 100%;
    margin-bottom: 0.25rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    text-align: left;
    color: #18181b;
    cursor: pointer;
}

.gl-feld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8125rem;
}

/* Offene Beträge im Kalender */

.gl-marke-offen {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

/* Zu viel bezahlt: Wir schulden dem Gast Geld. Eigene Farbe, damit es nicht wie „unbezahlt" aussieht. */
.gl-marke-zuviel {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #fff;
}

.gl-offenpunkt.gl-zuvielpunkt {
    background: #7c3aed;
}

.gl-offen {
    color: #dc2626;
    font-weight: 600;
}

.gl-offenpunkt {
    display: inline-block;
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #dc2626;
}

/* Bestellung */

.gl-bestellkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.gl-pille {
    padding: 0.3rem 0.8rem;
    border-radius: 0.5rem;
    background: #1b1b2f;
    color: #fff;
    font-weight: 600;
}

.gl-bestellung {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 64rem) {
    .gl-bestellung {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }
}

.gl-bestellung-links,
.gl-bestellung-rechts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.gl-kasten {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.1rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.75rem;
}

.gl-kasten h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.gl-kasten h3 {
    font-size: 0.875rem;
    font-weight: 600;
}

.gl-kasten summary {
    cursor: pointer;
}

.gl-kasten summary h2 {
    display: inline-flex;
}

.gl-kunde {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    font-size: 0.875rem;
}

/* Drei gleich breite Spalten: Anschrift, Kontakt mit Rechnungsinfo, interne Notiz. */
@media (min-width: 48rem) {
    .gl-kunde {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

.gl-kunde-titel {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.6;
}

.gl-kunde-titel-abstand {
    margin-top: 0.6rem;
}

.gl-link-klein {
    font-size: 0.8125rem;
    font-weight: 400;
}

.gl-kunde > div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    overflow-wrap: anywhere;
}

.gl-eingabe {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    background: transparent;
    font-size: 0.875rem;
    color: inherit;
}

.gl-liste tr.gl-summe td {
    font-weight: 700;
}

.gl-offenzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
}

.gl-offenzeile > span:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.gl-bezahlt {
    color: #15803d;
}

.gl-marke-voll {
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    color: #fff;
}

.gl-marke-rot { background: #dc2626; border-color: #dc2626; }
.gl-marke-gruen { background: #15803d; border-color: #15803d; }
.gl-marke-grau { background: #71717a; border-color: #71717a; }

.gl-protokoll {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.9rem;
    font-size: 0.875rem;
}

.gl-protokoll li {
    display: flex;
    flex-direction: column;
}

/* Mehrere Termine markieren */

.gl-kreis {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 1;
    width: 1.35rem;
    height: 1.35rem;
    border: 1.5px solid #52525b;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    cursor: pointer;
}

/* Kreise auf den Karten: Die Karten bleiben auch im Nachtmodus hell, deshalb hier immer dunkel markiert */
.gl-kreis:hover {
    border-color: #1b1b2f;
    background: #fff;
}

.gl-kreis-an,
.gl-kreis-an:hover {
    background: #1b1b2f;
    border-color: #1b1b2f;
    color: #fff;
}

/* Kreis im Raumkopf liegt auf dem Seitenhintergrund: im Nachtmodus hell */
.gl-kreis-kopf {
    border-color: var(--gl-markierung);
}

.gl-kreis-kopf.gl-kreis-an,
.gl-kreis-kopf.gl-kreis-an:hover {
    background: var(--gl-markierung);
    border-color: var(--gl-markierung);
    color: var(--gl-markierung-text);
}

.gl-kreis-kopf {
    position: static;
    flex: none;
    margin-left: auto;
    background: transparent;
}

.gl-kartenrahmen .gl-karte-zeit {
    padding-right: 1.5rem;
}

.gl-markierleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--gl-markierung);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    position: sticky;
    top: 4.5rem;
    z-index: 5;
    background: #fff;
    color: #18181b;
}

.gl-spalten {
    user-select: none;
}

.gl-gewischt {
    outline: 2px solid var(--gl-markierung);
    outline-offset: 1px;
}

/* Hinweis auf eine Notiz an der Buchung, Text beim Überfahren mit der Maus */

.gl-notizpunkt {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    cursor: help;
}

/* Dasselbe „i“ in der Bestellung als Zeichen vor der Kundennotiz, nicht schwebend. */
.gl-notizpunkt-still {
    position: static;
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    font-size: 0.75rem;
    cursor: default;
}

.gl-kundennotiz-kopf {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.gl-kundennotiz {
    margin: 0 0 0.6rem;
    white-space: pre-line;
}

/* Nachricht vom Gast an einer Anfrage (B67) */
.gl-anfrage-nachricht {
    margin-top: 0.5rem;
    max-width: 32rem;
}

.gl-anfrage-nachricht .gl-kundennotiz {
    margin: 0.2rem 0 0;
}

/* Spielerzahl im Warenkorb ändern */

.gl-menge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #1b1b2f;
    color: #fff;
    overflow: hidden;
}

.gl-menge strong {
    min-width: 2rem;
    padding: 0.1rem 0.4rem;
    background: #fff;
    color: #18181b;
    text-align: center;
}

.gl-menge button {
    width: 1.9rem;
    padding: 0.1rem 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}

.gl-menge button:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Der Notiztext erscheint über dem Symbol, damit der Mauszeiger ihn nicht verdeckt. */

.gl-notiztext {
    display: none;
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.4rem);
    width: max-content;
    max-width: 16rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    background: #1b1b2f;
    color: #fff;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    text-align: left;
    white-space: pre-line;
    overflow-wrap: anywhere;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gl-notizpunkt:hover .gl-notiztext,
.gl-notizpunkt:focus .gl-notiztext {
    display: block;
}

/* Glocke oben rechts: Zahl der offenen Anfragen von Gästen */

.gl-glocke {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: 0.5rem;
    border-radius: 999px;
    color: #71717a;
}

.gl-glocke:hover {
    background: var(--gl-flaeche);
}

.gl-glocke-an {
    color: #18181b;
}

.dark .gl-glocke-an {
    color: #fff;
}

.gl-glocke-bild {
    width: 1.4rem;
    height: 1.4rem;
}

.gl-glocke-zahl {
    position: absolute;
    top: 0;
    right: -0.1rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
}

/* Symbol neben dem Stand einer Bestellung (z. B. „Geändert am …“), Text erscheint darüber */

.gl-symbolpunkt {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    vertical-align: middle;
    color: #52525b;
    cursor: help;
}

.gl-symbolpunkt-bild {
    width: 1.1rem;
    height: 1.1rem;
}

/* Links daneben, damit der Text in einer scrollenden Tabelle nicht am oberen Rand abgeschnitten wird */
.gl-symbolpunkt .gl-notiztext {
    right: calc(100% + 0.4rem);
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}

.gl-symbolpunkt:hover .gl-notiztext,
.gl-symbolpunkt:focus .gl-notiztext {
    display: block;
}

/* Ungespeicherte Änderung im Warenkorb */

.gl-liste tr.gl-geaendert td {
    background: #fef3c7;
    color: #18181b;
}

.gl-ungespeichert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d97706;
    border-radius: 0.5rem;
    background: #fef3c7;
    color: #18181b;
    font-size: 0.875rem;
}

/* Belege an der Bestellung */

.gl-belege {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.875rem;
}

.gl-belege li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

/* Gutscheine */

.gl-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.gl-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Kopierknopf neben Codes und der Lieferanschrift (wie in Quinbook) */
.gl-kopieren {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 0.3rem;
    padding: 0.1rem;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    color: #6b7280;
    cursor: pointer;
}

.gl-kopieren:hover {
    color: #111827;
    background: #f3f4f6;
}

.gl-kopieren-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.gl-kopieren-ok {
    color: #16a34a;
}

.gl-stand-offen { background: #15803d; border-color: #15803d; }
.gl-stand-teilweise { background: #b45309; border-color: #b45309; }
.gl-stand-eingeloest { background: #71717a; border-color: #71717a; }
.gl-stand-abgelaufen { background: #dc2626; border-color: #dc2626; }
.gl-stand-deaktiviert { background: #3f3f46; border-color: #3f3f46; }

.gl-kacheln {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.6rem;
}

.gl-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 7rem;
    min-height: 4rem;
    padding: 0.6rem 1rem;
    border: 2px solid var(--gl-linie);
    border-radius: 0.75rem;
    background: var(--gl-flaeche);
    font-size: 0.8125rem;
    cursor: pointer;
}

.gl-kachel {
    position: relative;
}

.gl-kachel-quer {
    flex-direction: row;
    gap: 0.6rem;
}

.gl-kachel-logo {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.4rem;
    background: #fff;
}

.gl-kachel-zahl {
    position: absolute;
    top: -0.6rem;
    right: -0.5rem;
    min-width: 1.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #18181b;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.gl-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
}

.gl-codes > div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.gl-kachel strong {
    font-size: 1.125rem;
}

.gl-kachel:hover {
    border-color: #d97706;
}

.gl-kachel-an {
    border-color: #d97706;
    background: #d97706;
    color: #fff;
}

/* Preiserhöhung: neue Preise als eigener, farbig abgesetzter Bereich (Baustein B22; Sylvia, 13.10.2026). Farbe vorläufig, endgültig in Abschnitt E. */
.gl-preisbereich {
    margin-top: 1rem;
    padding: 0.75rem 1rem 1rem;
    border: 2px solid var(--gl-linie);
    border-radius: 0.75rem;
}

.gl-preisbereich-titel {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
}

.gl-preisbereich-neu {
    border-color: #0369a1;
    background: rgba(3, 105, 161, 0.08);
}

.gl-preisbereich-neu .gl-preisbereich-titel {
    color: #0369a1;
}

.dark .gl-preisbereich-neu .gl-preisbereich-titel {
    color: #7dd3fc;
}

.gl-preisbereich .gl-kacheln + .gl-kacheln {
    margin-top: 0.6rem;
}

.gl-preisbereich-neu .gl-kachel {
    border-color: rgba(3, 105, 161, 0.5);
}

.gl-betragsfeld {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 10rem;
    font-weight: 600;
}

.gl-betragsfeld-breit {
    width: 20rem;
    max-width: 100%;
}

.gl-grosscode {
    align-self: flex-start;
    padding: 0.6rem 1.2rem;
    border: 2px dashed #d97706;
    border-radius: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.2;
    user-select: all;
}

/* Artikel: Warnung bei knappem Code-Vorrat, Lieferanschrift im Gutscheinverkauf */
.gl-warnung {
    padding: 0.7rem 0.9rem;
    border: 1px solid #dc2626;
    border-radius: 0.5rem;
    background: rgba(220, 38, 38, 0.08);
    font-size: 0.875rem;
}

.gl-anschrift {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 28rem;
}

.gl-anschrift-ort {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.5rem;
}

.gl-dateiwahl {
    font-size: 0.875rem;
    max-width: 100%;
}

/* Bestellungen: Reiter, Liste, Reservierung */

.gl-reiter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 1px solid var(--gl-linie);
}

.gl-reiter button {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.gl-reiter button:hover {
    background: var(--gl-flaeche);
}

.gl-reiter .gl-reiter-an {
    border-bottom-color: #d97706;
}

.gl-reiter-zahl {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #1b1b2f;
    color: #fff;
    font-size: 0.75rem;
}

.gl-suchfeld {
    min-width: 26rem;
    max-width: 100%;
}

.gl-umschalter-breit {
    flex-wrap: wrap;
    align-self: flex-start;
}

.gl-bestellliste td {
    vertical-align: top;
    font-size: 0.875rem;
}

/* Die Liste soll in die Breite passen; quer gescrollt wird nur bei sehr kleinem Fenster (Sylvia, 06.10.2026) */
.gl-bestellliste th,
.gl-bestellliste td {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

.gl-bestellliste td .gl-leise {
    overflow-wrap: anywhere;
}

/* Eine lange Marke darf umbrechen, das Symbol bleibt aber neben der Marke */
.gl-bestellliste td:last-child {
    white-space: nowrap;
}

.gl-bestellliste .gl-marke {
    white-space: normal;
    vertical-align: middle;
}

.gl-liste tr.gl-aus-leicht td {
    opacity: 0.6;
}

.gl-zuviel {
    color: #7c3aed;
    font-weight: 600;
}

.gl-fuss > span + span {
    margin-left: 0.9rem;
}

.gl-marke-reserviert {
    background: #0369a1;
    border-color: #0369a1;
    color: #fff;
}

/* Laufender Halt (Kasse, Angebot): die Marke zählt herunter und pulsiert dezent (B59 „Kalender live“, Sylvia 17.10.2026). */
@media (prefers-reduced-motion: no-preference) {
    .gl-marke-laeuft {
        animation: gl-pulsieren 2.4s ease-in-out infinite;
    }
}

@keyframes gl-pulsieren {
    50% {
        opacity: 0.55;
    }
}

/* Reservierter Termin im Kalender: wie gebucht, aber gestreift, weil er noch nicht verbindlich ist. */
.gl-reserviert {
    background: repeating-linear-gradient(135deg, var(--gl-gebucht) 0 10px, #fff 10px 20px);
    border-color: #0369a1;
    border-style: dashed;
}

/* Offene Anfrage im Kalender (B48, Variante A, Sylvia 17.10.2026): wie eine Reservierung, aber in Bernstein. */
.gl-anfrage {
    background: repeating-linear-gradient(135deg, #fde68a 0 10px, #fff 10px 20px);
    border-color: #b45309;
    border-style: dashed;
}

.gl-marke-anfrage {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}

.gl-reservierleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #0369a1;
    border-radius: 0.5rem;
    background: #e0f2fe;
    color: #18181b;
    font-size: 0.875rem;
}

/* „Mails an den Gast sind ausgeschaltet“ oben in der Bestellung (B55): auffällig, aber kein Fehler */
.gl-mailsaus-leiste {
    border-color: #b45309;
    background: #fef3c7;
}

/* Heute verkaufte Gutscheine: Code gut lesbar zum Abschreiben auf die Karte */
.gl-code-gross {
    font-size: 1.125rem;
}

/* Postausgang und E-Mail Kommunikation */
.gl-mailrahmen {
    display: block;
    width: 100%;
    max-width: 700px;
    height: 720px;
    margin-top: 0.8rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    background: #f4f4f7;
}

.gl-maildetails {
    padding: 0.4rem 0 0.6rem 0;
}

.gl-maildetails .gl-knoepfe {
    margin-top: 0.7rem;
}

.gl-fehlertext {
    color: #dc2626;
}

.gl-mail-versendet { background: #15803d; border-color: #15803d; }
.gl-mail-wartet { background: #b45309; border-color: #b45309; }
/* Ein Prozess verschickt die Mail gerade (Zeilen-Sperre, B58) */
.gl-mail-sendet { background: #b45309; border-color: #b45309; }
.gl-mail-fehlgeschlagen { background: #dc2626; border-color: #dc2626; }
/* Nicht verschickt, weil „Mails an den Gast“ aus war (B55) */
.gl-mail-ausgeschaltet { background: #71717a; border-color: #71717a; }
/* Nicht zugestellt: Adresse abgelehnt oder Unzustellbar-Meldung (B61) */
.gl-mail-unzustellbar { background: #991b1b; border-color: #991b1b; }
.gl-zustellung {
    margin: 0.4rem 0 0.2rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #991b1b;
    background: rgba(220, 38, 38, 0.06);
}
.gl-zustellung p { margin: 0 0 0.35rem 0; }

.gl-mails {
    list-style: none;
    margin: 0.6rem 0 0 0;
    padding: 0;
    font-size: 0.875rem;
}

.gl-mails li {
    padding: 0.6rem 0;
    border-top: 1px solid var(--gl-linie);
}

.gl-mailzeile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.gl-mailzeile-rechts {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    white-space: nowrap;
}

.gl-blaettern {
    margin-top: 0.8rem;
}

.gl-blaettern-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}

.gl-blaettern-knopf {
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    background: transparent;
    cursor: pointer;
    white-space: nowrap;
}

.gl-blaettern-aus {
    opacity: 0.4;
    cursor: default;
}

/* Editor der Mailvorlagen */
.gl-vorlage-kopf > :last-child {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Vorlage mit ganzer Breite ohne Knopf „Schließen“ (B60 Nr. 20): der Text bricht um. */
.gl-vorlage-kopf.gl-vorlage-kopf-ohne-knopf > :last-child {
    flex-shrink: 1;
    white-space: normal;
}

.gl-vorlage-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.gl-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.4rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gl-linie);
}

@media (max-width: 1100px) {
    .gl-editor { grid-template-columns: minmax(0, 1fr); }
}

/* Ablaufbild der Mailvorlagen (Baustein B18): am Handy untereinander, ab 48rem als Raster, ab 96rem mit dem Editor daneben */
.gl-fluss-kopf {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.gl-fluss-kopf > :last-child {
    flex-shrink: 0;
}

.gl-fluss-seite {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.gl-fluss {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.gl-fluss-schritt,
.gl-fluss-spurname,
.gl-fluss-hinweis,
.gl-fluss-leer {
    display: none;
}

.gl-fluss-zelle {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.6rem;
}

.gl-fluss-zelle.gl-fluss-leer {
    display: none;
}

.gl-fluss-auswahl {
    scroll-margin-top: 7rem;
}

.gl-fluss-ort {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.75;
}

.gl-fluss-spur-gemeinsam {
    background: var(--gl-flaeche);
}

.gl-fluss-spur-intern,
.gl-fluss-spur-ohne_platz {
    border-style: dashed;
}

.gl-fluss-mail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    overflow-wrap: anywhere;
    hyphens: auto;
    cursor: pointer;
}

.dark .gl-fluss-mail {
    background: rgba(255, 255, 255, 0.05);
}

.gl-fluss-mail-an {
    background: var(--gl-markierung);
    color: var(--gl-markierung-text);
    border-color: var(--gl-markierung);
}

.dark .gl-fluss-mail-an {
    background: var(--gl-markierung);
}

.gl-fluss-an {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
}

/* Push-Nachrichten im Ablaufbild (Baustein B24): Glocke und eigene Farbe, Umschalter Mails / Push / Beide */
.gl-fluss-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.gl-fluss-umschalter {
    display: flex;
    gap: 0.25rem;
}

.gl-fluss-push {
    background: #f5f3ff;
    border-color: #c4b5fd;
    color: #4c1d95;
}

.dark .gl-fluss-push {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(167, 139, 250, 0.5);
    color: #ddd6fe;
}

.gl-fluss-push.gl-fluss-mail-an {
    background: #6d28d9;
    border-color: #6d28d9;
    color: #fff;
}

.gl-fluss-push-name {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.gl-fluss-glocke {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: -0.15rem;
}

.gl-push-beispiel {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.6rem 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid #c4b5fd;
    border-radius: 0.6rem;
    background: #f5f3ff;
    font-size: 0.875rem;
}

.dark .gl-push-beispiel {
    background: rgba(139, 92, 246, 0.14);
    border-color: rgba(167, 139, 250, 0.5);
}

/* Beispielabläufe (Baustein B27): Auswahl des Falls, senkrechte Zeitleiste, Gabelungen nebeneinander ab 48rem */
.gl-ablauf-faelle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.gl-ablauf-fall {
    min-height: 2.75rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--gl-linie);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.gl-ablauf-fall-an {
    background: var(--gl-markierung);
    color: var(--gl-markierung-text);
    border-color: var(--gl-markierung);
}

.gl-ablauf-titel {
    margin: 0 0 0.6rem;
    font-size: 1rem;
    font-weight: 700;
}

.gl-ablauf {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gl-ablauf-schritt {
    position: relative;
    padding: 0 0 1rem 1.4rem;
    border-left: 2px solid var(--gl-linie);
    margin-left: 0.4rem;
}

.gl-ablauf-schritt:last-child {
    border-left-color: transparent;
}

.gl-ablauf-schritt::before {
    content: '';
    position: absolute;
    left: -0.45rem;
    top: 0.2rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--gl-markierung);
}

.gl-ablauf-was {
    margin: 0 0 0.4rem;
    font-size: 0.9375rem;
}

.gl-ablauf-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gl-ablauf-gabel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.gl-ablauf-zweig {
    padding: 0.6rem;
    border: 1px dashed var(--gl-linie);
    border-radius: 0.6rem;
}

.gl-ablauf-wenn {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.gl-ablauf-unter .gl-ablauf-schritt {
    padding-bottom: 0.6rem;
}

.gl-ablauf-unter .gl-ablauf-schritt::before {
    width: 0.6rem;
    height: 0.6rem;
    left: -0.35rem;
    opacity: 0.7;
}

@media (min-width: 48rem) {
    .gl-ablauf-gabel {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

@media (min-width: 48rem) {
    .gl-fluss {
        display: grid;
        grid-template-columns: 8.5rem repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .gl-fluss-schritt {
        display: block;
        position: relative;
        padding: 0.45rem 0.6rem;
        border-radius: 0.5rem;
        background: var(--gl-flaeche);
        font-size: 0.8125rem;
        font-weight: 700;
        text-align: center;
    }

    .gl-fluss-pfeil::after {
        content: '→';
        position: absolute;
        right: -0.55rem;
        top: 50%;
        transform: translateY(-50%);
        font-weight: 700;
        opacity: 0.6;
    }

    .gl-fluss-spurname {
        display: flex;
        align-items: center;
        padding: 0.4rem 0.2rem;
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .gl-fluss-spurname.gl-fluss-spur-gemeinsam,
    .gl-fluss-spurname.gl-fluss-spur-intern {
        background: none;
    }

    .gl-fluss-spurname.gl-fluss-spur-intern {
        border-top: 1px dashed var(--gl-linie);
        margin-top: 0.6rem;
    }

    .gl-fluss-zelle.gl-fluss-spur-intern {
        margin-top: 0.6rem;
    }

    .gl-fluss-zelle.gl-fluss-leer {
        display: block;
        border-style: dotted;
        opacity: 0.5;
    }

    .gl-fluss-ort {
        display: none;
    }

    .gl-fluss-hinweis {
        display: block;
        font-size: 0.75rem;
        opacity: 0.75;
    }
}

@media (min-width: 96rem) {
    .gl-fluss-mit-auswahl {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }

    .gl-fluss-mit-auswahl .gl-fluss {
        position: sticky;
        top: 4.5rem;
    }

    .gl-fluss-mit-auswahl .gl-editor {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gl-editor-rechts {
    position: sticky;
    top: 4.5rem;
    align-self: start;
}

.gl-editor-rechts .gl-mailrahmen {
    max-width: none;
    height: calc(100vh - 19rem);
    min-height: 420px;
}

.gl-editor-feld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 1.1rem;
}

.gl-editor-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.gl-editor-wann {
    font-size: 0.8rem;
}

.gl-editor-text {
    width: 100%;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: vertical;
}

.gl-editor-feld input.gl-eingabe,
.gl-editor-feld select.gl-eingabe {
    width: 100%;
}

.gl-editor-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.gl-platzhalter {
    padding: 0.05rem 0.4rem;
    border-radius: 0.3rem;
    background: #fff3bf;
    color: #5c4a00;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

button.gl-platzhalter:hover {
    background: #ffe066;
}

.gl-editor-fest {
    margin-bottom: 1.1rem;
    padding: 0.6rem 0.8rem;
    border: 1px dashed var(--gl-linie);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    opacity: 0.85;
}

.gl-editor-leiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
}

.gl-editor-haken {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.gl-editor-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.8rem;
}

/* Rabattcodes */

.gl-rabatt-aktiv { background: #15803d; border-color: #15803d; }
.gl-rabatt-aufgebraucht { background: #71717a; border-color: #71717a; }
.gl-rabatt-abgelaufen { background: #dc2626; border-color: #dc2626; }
.gl-rabatt-deaktiviert { background: #3f3f46; border-color: #3f3f46; }

.gl-rabatt-offen > td {
    background: rgba(113, 113, 122, 0.08);
}

.gl-rabatt-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 0.4rem 0 0.6rem 0;
}

@media (max-width: 900px) {
    .gl-rabatt-detail {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mitarbeitende: eingeladen, aber noch nicht angemeldet */
.gl-marke-bernstein { background: #b45309; border-color: #b45309; color: #fff; }

/* Knöpfe untereinander, rechtsbündig (Liste Mitarbeitende) */
.gl-knoepfe-spalte { flex-direction: column; align-items: flex-end; }

/* Meine Arbeit: Monatskalender mit Verfügbarkeit (Schritt 4, Baustein 2) */

.gl-zaehler {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    font-size: 0.875rem;
}

.gl-zaehler-feld {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gl-zaehler-feld strong {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--gl-flaeche);
}

.gl-balken {
    display: block;
    height: 0.35rem;
    border-radius: 999px;
}

.gl-zaehler-feld .gl-balken {
    width: 1.1rem;
}

.gl-balken-gelb { background: #eab308; }
.gl-balken-orange { background: #f97316; }
.gl-balken-rot { background: #dc2626; }
.gl-balken-gruen { background: #15803d; }

.gl-monatskopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.gl-monatsname {
    min-width: 9rem;
    text-align: center;
    font-size: 1.0625rem;
}

.gl-monat {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
    max-width: 52rem;
}

.gl-monat-wt {
    padding: 0.2rem 0;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
}

.gl-tag {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    min-height: 4.6rem;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.2;
    cursor: pointer;
}

.gl-tag:hover {
    background: var(--gl-flaeche);
}

.gl-tag-leer {
    border-color: transparent;
    cursor: default;
}

.gl-tag-leer:hover {
    background: transparent;
}

.gl-tag-zahl {
    font-size: 0.9375rem;
    font-weight: 600;
}

.gl-tag-wochenende .gl-tag-zahl {
    color: #b45309;
}

.gl-tag-heute {
    border-color: #d97706;
    box-shadow: inset 0 0 0 1px #d97706;
}

.gl-tag-vorbei {
    opacity: 0.55;
}

.gl-tag-fest {
    cursor: default;
}

.gl-tag-fest:hover {
    background: transparent;
}

.gl-tag-an,
.gl-tag-an:hover {
    background: var(--gl-markierung);
    border-color: var(--gl-markierung);
    color: var(--gl-markierung-text);
    opacity: 1;
}

.gl-tag-an .gl-tag-zahl {
    color: #fff;
}

.gl-tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-tag-feiertag {
    font-size: 0.625rem;
    color: #b45309;
}

.gl-tag-an .gl-tag-feiertag {
    color: #fcd34d;
}

.gl-angabe {
    max-width: 52rem;
}

.gl-frage {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gl-frage-titel {
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.8;
}

.gl-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gl-wahl-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--gl-linie);
    border-left-width: 4px;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.gl-wahl-knopf input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

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

.gl-wahl-gelb { border-left-color: #eab308; }
.gl-wahl-orange { border-left-color: #f97316; }
.gl-wahl-rot { border-left-color: #dc2626; }

.gl-wahl-an,
.gl-wahl-an:hover {
    background: var(--gl-markierung);
    border-color: var(--gl-markierung);
    color: var(--gl-markierung-text);
}

.gl-wahl-an.gl-wahl-gelb { border-left-color: #eab308; }
.gl-wahl-an.gl-wahl-orange { border-left-color: #f97316; }
.gl-wahl-an.gl-wahl-rot { border-left-color: #dc2626; }

.gl-zeiten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.gl-eingabe-zeit {
    width: 6.5rem;
    font-size: 1.0625rem;
    text-align: center;
    letter-spacing: 0.05em;
}

@media (max-width: 40rem) {
    .gl-monat {
        gap: 0.15rem;
    }

    .gl-tag {
        min-height: 3.6rem;
        padding: 0.25rem 0.2rem;
        font-size: 0.625rem;
    }

    .gl-tag-zahl {
        font-size: 0.8125rem;
    }

    .gl-tag-text {
        white-space: normal;
        font-size: 0.6rem;
        line-height: 1.15;
    }

    .gl-tag-feiertag {
        display: none;
    }
}

/* Wochenplanung: sieben Tage nebeneinander, Personen oben, Termine darunter (Schritt 4, Baustein 3) */

.gl-balken-grau { background: #a1a1aa; }

.gl-fuss-balken {
    display: inline-block;
    width: 1.1rem;
    margin-left: 0.5rem;
}

.gl-wochenname {
    min-width: 15rem;
}

.gl-wp-leiste {
    position: static;
    gap: 0.5rem 1rem;
}

.gl-wp-leiste-titel {
    font-weight: 600;
}

.gl-wp-personenwahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gl-wp-person {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem 0.25rem 0.3rem;
    border: 1px solid var(--gl-linie);
    border-radius: 999px;
    font-size: 0.8125rem;
    cursor: pointer;
}

.gl-wp-person:hover {
    background: var(--gl-flaeche);
}

/* Die Leiste „Einteilen“ bleibt auch im Nachtmodus weiß, deshalb hier immer dunkel markiert */
.gl-wp-person-an,
.gl-wp-person-an:hover {
    background: #1b1b2f;
    border-color: #1b1b2f;
    color: #fff;
}

.gl-wp-leiste-rechts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-left: auto;
}

.gl-wp-kreis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: var(--gl-farbe-0);
    color: #fff;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex: none;
}

/* Feste Farbe je Person (users.farbe, Sylvia 09.10.2026) */
.gl-person-1 { background: #0072B2 !important; }
.gl-person-2 { background: #E69F00 !important; }
.gl-person-3 { background: #009E73 !important; }
.gl-person-4 { background: #D55E00 !important; }
.gl-person-5 { background: #CC79A7 !important; }
.gl-person-6 { background: #56B4E9 !important; }
.gl-person-7 { background: #6A3D9A !important; }
.gl-person-8 { background: #5B6573 !important; }

.gl-wp-kreis-anlernen {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px currentColor;
    outline: 2px dashed var(--gl-markierung);
    outline-offset: 1px;
}

/* Sieben Tage passen ohne Scrollen auf einen breiten Bildschirm (Sylvia, 09.10.2026); erst unter 80 rem wird gescrollt. */
.gl-wp {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    min-width: 80rem;
    user-select: none;
}

.gl-wp-tag {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.3rem;
    border-right: 1px solid var(--gl-linie);
}

.gl-wp-tag:last-child {
    border-right: 0;
}

.gl-wp-tag-heute {
    box-shadow: inset 0 3px 0 #d97706;
}

.gl-wp-tag-vorbei {
    opacity: 0.75;
}

.gl-wp-tagkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.gl-wp-personen {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.gl-wp-vf {
    display: grid;
    grid-template-columns: 0.35rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.25rem;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
}

.gl-wp-vf:hover {
    background: var(--gl-flaeche);
}

.gl-wp-vf-an {
    border-color: var(--gl-markierung);
}

.gl-wp-vf .gl-balken {
    width: 0.4rem;
    height: 1.1rem;
}

.gl-wp-vf-grau {
    opacity: 0.55;
}

.gl-wp-vf-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.gl-wp-vf-zeit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.6875rem;
    opacity: 0.75;
}

.gl-wp-vf-zahl {
    min-width: 1.4rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--gl-flaeche);
    text-align: center;
}

.gl-wp-termine {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.15rem 0;
    table-layout: fixed;
    font-size: 0.6875rem;
}

.gl-wp-termine th {
    padding: 0.15rem 0;
    font-size: 0.625rem;
    font-weight: 600;
    text-align: center;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gl-wp-termine td {
    padding: 0.1rem 0;
    vertical-align: top;
}

.gl-wp-slotrahmen {
    position: relative;
}

.gl-wp-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.2rem;
    width: 100%;
    min-height: 2.2rem;
    padding: 0.2rem 0.2rem;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: 0.375rem;
    text-align: left;
    color: #18181b;
    cursor: pointer;
}

.gl-wp-slot-zeit {
    font-weight: 700;
}

.gl-wp-slot-stand {
    font-size: 0.6875rem;
    opacity: 0.85;
}

.gl-wp-namen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
}

.gl-wp-namen .gl-wp-kreis {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.5625rem;
}

.gl-wp-slot-an {
    outline: 2px solid var(--gl-markierung);
    outline-offset: 1px;
    box-shadow: inset 0 0 0 1px var(--gl-markierung);
}

.gl-wp-slot-ausserhalb {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.12) 6px 8px);
    cursor: not-allowed;
    opacity: 0.7;
}

.gl-wp-slot-ohne-angabe {
    opacity: 0.8;
}

.gl-wp-slot-warnung {
    border-color: #dc2626;
}

.gl-wp-warn {
    position: absolute;
    top: 0.2rem;
    right: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

.gl-wp-slot .gl-wp-warn {
    position: absolute;
}

.gl-wp-warn-fuss {
    position: static;
    margin-left: 0.4rem;
}

.gl-wp .gl-gewischt > .gl-wp-slot {
    outline: 2px solid var(--gl-markierung);
    outline-offset: 1px;
}

/* Meine Arbeit: eingeteilter Tag, Problem melden */

.gl-tag-an .gl-balken-gruen {
    box-shadow: 0 0 0 1px #fff;
}

.gl-problem {
    max-width: 52rem;
}

.gl-problem textarea {
    width: 100%;
    min-height: 4.5rem;
    font-family: inherit;
}

.gl-termine-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

/* Tageskalender: wer den Termin macht (Baustein 4), in der Fußzeile der Karte (B60 Nr. 11) */

.gl-karte-personen {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    font-size: 0.75rem;
    text-align: left;
    color: #18181b;
    cursor: pointer;
}

/* „+1 Anfrage“ an einer Buchungskarte (B54 Nr. 1 und 2, Sylvia 17.10.2026): eigener Knopf rechts in der Fußzeile, unter
   Personen und Vorlauf. */
.gl-karte-anfrage {
    margin-left: auto;
}

button.gl-karte-anfrage {
    cursor: pointer;
}

button.gl-karte-anfrage:hover {
    filter: brightness(1.15);
}

.gl-karte-personen:hover .gl-karte-name {
    border-color: var(--gl-markierung);
}

/* Wie bei Quinbook: runder Rahmen, weißer Hintergrund, nur der Vorname (Sylvia, 09.10.2026) */
.gl-karte-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 0.05rem 0.5rem;
    border: 1px solid #a1a1aa;
    border-radius: 999px;
    background: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-karte-name-anlernen {
    border-style: dashed;
}

/* Zeichen „im Kalender getauscht“ neben den Namen (Baustein 4) */
.gl-karte-tausch {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #b45309;
}

.gl-karte-name-leer {
    font-weight: 400;
    opacity: 0.6;
}

.gl-wp-kreis-leer {
    background: transparent;
    border: 1.5px dashed #71717a;
}

.gl-wochen-namen {
    font-size: 0.6875rem;
    font-weight: 600;
    opacity: 0.8;
}

/* Meine Arbeit: eingeteilte Termine als Zeilen, gebuchte grün und fett (Sylvia, 09.10.2026) */
.gl-terminzeile { display: block; width: 100%; color: #71717a; font-size: 0.875rem; }
.gl-terminzeile-gebucht { color: #15803d; font-weight: 700; }

/* Meine Arbeit: Mitteilungen auf diesem Gerät mit Anleitung für Android und iPhone (Baustein 7) */
.gl-push { max-width: 52rem; margin-top: 1rem; }
.gl-anleitung summary { cursor: pointer; font-weight: 600; }
.gl-anleitung ol { margin: 0.5rem 0 0.5rem 1.25rem; list-style: decimal; font-size: 0.875rem; }
.gl-anleitung li + li { margin-top: 0.25rem; }
.gl-anleitung p { font-size: 0.875rem; color: #71717a; }
.gl-push-fehlt { color: #b45309; font-weight: 600; }

/* Meine Arbeit komplett (Schritt 4, Baustein 8): Monat und Tagesfenster nebeneinander, am Handy untereinander */
.gl-arbeit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.gl-arbeit-monat { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
@media (min-width: 80rem) {
    .gl-arbeit { grid-template-columns: minmax(0, 52rem) minmax(20rem, 26rem); }
    .gl-tagesfenster { position: sticky; top: 5rem; margin-top: 2.6rem; }
}
.gl-tagesfenster { max-width: 52rem; }
.gl-tagesfenster-kopf { display: inline-flex; align-items: center; gap: 0.5rem; }
.gl-tf-block { display: flex; flex-direction: column; gap: 0.35rem; }
.gl-tf-block + .gl-tf-block { padding-top: 0.75rem; border-top: 1px solid var(--gl-linie); }
.gl-tf-angabe { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.gl-tf-angabe .gl-balken { width: 1.1rem; flex: none; }
.gl-tf-termin {
    display: grid;
    grid-template-columns: 6.6rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.4rem 0.55rem;
    border-left: 4px solid #86efac;
    border-radius: 0.35rem;
    background: var(--gl-flaeche);
    font-size: 0.875rem;
}
.gl-tf-zeit { font-variant-numeric: tabular-nums; font-weight: 600; }
.gl-tf-stand { color: #71717a; white-space: nowrap; }
.gl-tf-termin-gebucht { border-left-color: #15803d; }
.gl-tf-termin-gebucht .gl-tf-stand { color: #15803d; font-weight: 700; }
.gl-tf-termin-reserviert { border-left-color: #4ade80; }
.gl-tf-termin-reserviert .gl-tf-stand { color: #15803d; }
@media (max-width: 40rem) {
    .gl-tf-termin { grid-template-columns: 5.6rem minmax(0, 1fr); }
    .gl-tf-stand { grid-column: 2; }
}

/* Grüner Balken im Tagesfeld: ein Stück je eingeteiltem Termin, gebuchte kräftig, freie blass */
.gl-balken-teile { display: flex; gap: 2px; }
.gl-balken-teil { display: block; flex: 1 1 0; height: 0.35rem; border-radius: 999px; background: #86efac; }
.gl-balken-teil-gebucht { background: #15803d; }
.gl-balken-teil-reserviert { background: #4ade80; }
.gl-tag-an .gl-balken-teil { box-shadow: 0 0 0 1px #fff; }

/* Stempeluhr in der Kopfleiste (Baustein 10) */

.gl-uhr {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: 0.35rem;
}

.gl-uhr-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    border: 1px solid var(--gl-linie);
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
    background: transparent;
}

.gl-uhr-knopf:hover { background: var(--gl-flaeche); }
.gl-uhr-knopf:disabled { opacity: 0.5; }
.gl-uhr-bild { width: 1.1rem; height: 1.1rem; }
.gl-uhr-start { color: #15803d; border-color: #15803d; }
.gl-uhr-weiter { color: #15803d; }
.gl-uhr-stopp { color: #b91c1c; }

.gl-uhr-zeit {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0 0.3rem;
}

.gl-uhr-zeit-pause { color: #c2410c; }
.gl-uhr-pause { font-size: 0.6875rem; font-weight: 500; white-space: nowrap; }

.gl-uhr-stopp-dialog {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.9rem;
}

/* Warnung „noch Geld offen“ vor dem Ausstempeln (Sylvia, 10.10.2026): keine Sperre, nur ein deutlicher Hinweis. */
.gl-uhr-warnung {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid #f59e0b;
    background: #fffbeb;
    color: #78350f;
}

.dark .gl-uhr-warnung {
    background: #451a03;
    color: #fde68a;
}

/* Fenster „Bist du noch bei der Arbeit?“ nach der Erinnerung, mittig über der Seite, am Handy fast volle Breite. */
.gl-uhr-frage-hintergrund {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgb(0 0 0 / 0.45);
}

.gl-uhr-frage {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 24rem;
    padding: 1.1rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.25);
}

.dark .gl-uhr-frage {
    background: #18181b;
}

@media (max-width: 40rem) {
    .gl-uhr-wort { display: none; }
    .gl-uhr-zeit { font-size: 0.875rem; }
}

/* Seite Zeiterfassung (Baustein 10) */

.gl-zeiten-tag td { font-weight: 600; background: var(--gl-flaeche); }
.gl-zeiten-tag .gl-flagge { font-weight: 500; }
.gl-flagge { display: inline-flex; align-items: center; gap: 0.3rem; color: #b91c1c; font-size: 0.8125rem; }
.gl-flagge-bild { width: 1rem; height: 1rem; flex: none; }
.gl-flaggen { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.2rem; }
.gl-zeiten-pause td { opacity: 0.75; }
.gl-zeiten-bezahlt td { color: #15803d; }
.dark .gl-zeiten-bezahlt td { color: #4ade80; }
.gl-zeiten-protokoll { font-size: 0.75rem; opacity: 0.7; }
.gl-summen { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: 0.875rem; }
.gl-summen strong { font-variant-numeric: tabular-nums; }
.gl-anwesend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; font-size: 0.875rem; }
.gl-anwesend-person { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 9999px; background: var(--gl-flaeche); }
.gl-anwesend-punkt { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #15803d; }
.gl-anwesend-punkt-pause { background: #f59e0b; }

/* Seite Stundenzettel und Kasten auf „Meine Arbeit“ (Baustein 13) */

.gl-stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.gl-stufe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--gl-flaeche); }
.gl-stufe-erledigt { box-shadow: inset 4px 0 0 #15803d; }
.gl-stufe-erledigt strong::before { content: "✓ "; color: #15803d; }
.gl-warnung { color: #b91c1c; font-weight: 600; }
.dark .gl-warnung { color: #f87171; }
/* Warnung mitten im Text (span), etwa „noch nicht bestätigt“: kleine Marke statt Kasten, damit sie nicht in die Zeile darüber ragt (Sylvia, 11.10.2026) */
span.gl-warnung { display: inline-block; padding: 0.1rem 0.5rem; margin: 0.2rem 0; line-height: 1.4; }
.gl-zettel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--gl-linie, rgba(0, 0, 0, 0.08)); }
.gl-zettel:first-of-type { border-top: none; }

/* „mehr lesen“ auf dem Handy (Sylvia, 11.10.2026): lange Erklärtexte zwei Zeilen hoch, public/js/gloria-mehr-lesen.js */
@media (max-width: 40rem) {
    .gl-kurz:not(.gl-ganz) {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .gl-mehr-lesen {
        display: block;
        margin: 0.15rem 0 0.35rem;
        align-self: flex-start;
        text-align: left;
        padding: 0;
        background: none;
        border: none;
        font-size: 0.8125rem;
        font-weight: 600;
        color: inherit;
        text-decoration: underline;
        cursor: pointer;
    }
}

@media (min-width: 40.01rem) {
    .gl-mehr-lesen {
        display: none;
    }
}

/* Menügruppe „Personal“: Unterseiten sichtbar eingerückt mit Linie, Überschrift hinterlegt (Sylvia, 11.10.2026) */
.fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-btn {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 0.5rem;
}

.fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-items {
    margin-left: 1.15rem;
    padding-left: 0.4rem;
    border-left: 1px solid rgba(0, 0, 0, 0.18);
}

.dark .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-btn {
    background: rgba(255, 255, 255, 0.05);
}

.dark .fi-sidebar-group:has(.fi-sidebar-group-btn) .fi-sidebar-group-items {
    border-left-color: rgba(255, 255, 255, 0.2);
}

/* Personenseite (Baustein A19): Werte des Monats als Kästchen, Liste „Zu tun“ */
.gl-werte {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.gl-wert {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.75rem;
    background: var(--gl-flaeche);
    font-size: 0.8125rem;
}

.gl-wert > span {
    display: block;
    opacity: 0.7;
}

.gl-wert strong {
    display: block;
    font-size: 1.125rem;
}

.gl-aufgaben {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
}

.gl-personen-knoepfe {
    margin-top: 1rem;
}

/* „Als Spielleitung ansehen“ oben für Admins (Sylvia, 11.10.2026) */
.gl-ansicht {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--gl-linie);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.gl-ansicht-form {
    display: inline;
}

.gl-ansicht-an {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.gl-ansicht-bild {
    width: 1.1rem;
    height: 1.1rem;
}

@media (max-width: 40rem) {
    .gl-ansicht-wort { display: none; }
}

.gl-ansicht-hinweis {
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d97706;
    border-radius: 0.5rem;
    background: rgba(217, 119, 6, 0.1);
    font-size: 0.875rem;
}


/* Glocke als To-do-Liste (Baustein B14) */
.gl-glocke-rahmen {
    position: relative;
}

.gl-glocke-liste {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 40;
    width: min(24rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.dark .gl-glocke-liste {
    background: #18181b;
}

.gl-glocke-kopf {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.gl-zutun {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gl-zutun-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-left: 3px solid #d97706;
    border-radius: 0.4rem;
    background: var(--gl-flaeche);
    font-size: 0.875rem;
}

.gl-zutun-rot {
    border-left-color: #dc2626;
}

.gl-zutun-sprung {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.1rem;
    color: inherit;
}

.gl-zutun-sprung:hover span:last-child {
    text-decoration: underline;
}

.gl-zutun-titel {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.gl-zutun-gesehen {
    flex-shrink: 0;
    white-space: nowrap;
}

.gl-zutun-leer {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.7;
}

@media (max-width: 640px) {
    .gl-glocke-liste {
        position: fixed;
        top: 4rem;
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }
}

/* Checkliste „Person scheidet aus“ (A14) */
.gl-checkliste {
    display: grid;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.gl-checkliste li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.gl-checkliste-haken {
    width: 1.1rem;
    flex: none;
    font-weight: 700;
    opacity: 0.6;
}

.gl-checkliste-erledigt .gl-checkliste-haken {
    color: #16a34a;
    opacity: 1;
}

/* Fenster der Anfrage-Karte im Kalender (B60 Nr. 12, Sylvia 17.10.2026): gelber Hinweis, wer den Termin hält, darunter
   je Anfrage ein umrandeter Block mit drei gleich breiten Knöpfen nebeneinander, am Handy untereinander. */
.gl-anfrage-fenster {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gl-anfrage-zwischenzeile {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
}

.gl-anfrage-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.75rem;
}

.gl-anfrage-knoepfe {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0.5rem;
    margin-top: 0.15rem;
}

.gl-anfrage-erklaerung {
    font-size: 0.75rem;
}

@media (max-width: 40rem) {
    .gl-anfrage-knoepfe {
        grid-auto-flow: row;
    }
}

/* Preisliste: abgelaufene Zeilen ausgegraut (B73). */
.gl-preis-abgelaufen {
    opacity: 0.5;
}

/* Verlauf (B38): geänderte Felder unter einem Eintrag */
.gl-verlauf-felder {
    margin: 0.15rem 0 0 0.75rem;
    color: #52525b;
    font-size: 0.8125rem;
}

/* Verleih (B37, Sylvia 19.10.2026): Kasten mit dem Zustand des Tisches unter seinen Terminen im Kalender und in der
   Bestellung; gelb, rot und grün aus den Farben der Tagesansicht. Darüber die Marke „Rückgabe 15:45 · Familie Muster“. */
.gl-tischkasten {
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--gl-linie);
    border-radius: 0.5rem;
    background: var(--gl-flaeche);
    font-size: 0.8125rem;
}

.gl-tischkasten-gelb { background: #fef3c7; border-color: #eab308; }
.gl-tischkasten-rot { background: var(--gl-gebucht); border-color: var(--gl-gebucht-rand); }
.gl-tischkasten-gruen { background: var(--gl-frei); border-color: var(--gl-frei-rand); }

.dark .gl-tischkasten-gelb,
.dark .gl-tischkasten-rot,
.dark .gl-tischkasten-gruen { color: #18181b; }

.gl-tischkasten-text { overflow-wrap: anywhere; }
.gl-tischkasten-zeile { font-size: 0.75rem; }

.gl-tischkasten-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gl-rueckgabe-marke {
    align-self: start;
    padding: 0.3rem 0.5rem;
    border: 1px dashed var(--gl-sonder-rand);
    border-radius: 0.5rem;
    background: var(--gl-sonder);
    font-size: 0.75rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.dark .gl-rueckgabe-marke { color: #18181b; }