/* Nur für den Admin-Bereich (body.admin) — die Tablet-Stempeloberfläche bleibt unverändert. */

body.admin {
    background: #f6f7f9;
}

body.admin .container {
    max-width: 1100px;
}

.employee-tile {
    position: relative;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.5rem 1rem;
}

/* Partytröte für den Geburtstag: oben links in der Kachel, gegenüber dem Zähler ungelesener
   Nachrichten oben rechts — so kommen sich beide nicht in die Quere. */
.tile-geburtstag {
    position: absolute;
    top: 0.45rem;
    left: 0.5rem;
    line-height: 0;
}

.tile-geburtstag .icon-party,
.tile-geburtstag .icon-medaille {
    display: block;
}

/* Geburtstag und Dienstjubiläum am selben Tag: beide Symbole nebeneinander. */
.tile-geburtstag {
    display: flex;
    gap: 0.2rem;
}

/* Anlass von heute im Widget der Übersicht: kräftiger Rahmen. */
.mini-tile.mini-tile-heute {
    border-color: #24346b;
    box-shadow: inset 0 0 0 1px #24346b;
}

/* Runde Dienstjubiläen (5, 10, 15 … Jahre) im Widget der Übersicht: honiggelb hinterlegt. */
.mini-tile.mini-tile-rund {
    background: #fdf3d7;
    border-color: #e9a825;
}

/* Anklickbare Kacheln heben sich beim Zeigen mit der Maus leicht an — dieselbe Rückmeldung
   wie bei den Kind-Kacheln, damit überall gleich erkennbar ist, was sich öffnen lässt.
   Nur für Verweise: Kacheln im Archiv sind reine Anzeige und sollen sich nicht anbieten. */
a.tile {
    transition: box-shadow 0.15s, transform 0.15s;
}

a.tile:hover,
a.tile:focus-visible {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.unread-badge-corner {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.employee-tile small {
    font-size: 0.75rem;
    font-weight: 600;
    color: #b3261e;
}

/* Gruppe und Funktion unter dem Namen — bewusst in gedecktem Grau, damit die farbige
   Statusangabe (anwesend/krank/Urlaub) darunter die auffälligere bleibt. */
.employee-tile-zuordnung {
    color: #475569 !important;
    font-weight: 500 !important;
    line-height: 1.25;
}

.employee-tile-inactive {
    opacity: 0.55;
}

.employee-tile-present {
    background: #e3f7e9;
}

.employee-tile-present small {
    color: #1a7a3d;
}

.employee-tile-break {
    background: #fff6d9;
}

.employee-tile-break small {
    color: #8a6300;
}

.employee-tile-sick {
    background: #fdeaea;
}

.employee-tile-sick small {
    color: #b3261e;
}

.employee-tile-vacation {
    background: #ebeef6;
}

.employee-tile-vacation small {
    color: #3b5092;
}

/* Große Bildschirme voll nutzen: Kalender, Einsatzplan, Übersicht und Tabellen wachsen mit.
   Formulare und Fließtexte begrenzen ihre Breite selbst. */
body.admin.wide .container {
    max-width: none;
}

.admin-topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: white;
    border-bottom: 1px solid #e2e4e8;
    padding: 0.85rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 9;
}

/* Der Markenblock ist genau so breit wie die Seitenleiste (abzüglich des Innenabstands der
   Kopfzeile und des Abstands zum Trennstrich). Dadurch sitzt der senkrechte Strich dahinter
   exakt auf der Kante der Seitenleiste, statt je nach Länge des Namens zu verrutschen. */
.admin-topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: calc(var(--seitenleiste-breite, 220px) - 3rem);
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1c1c1e;
    white-space: nowrap;
}

.admin-topbar-logo {
    font-size: 1.3rem;
}

/* Bildmarke: leicht abgesetzt, damit sie als eigenständiges Zeichen wirkt und nicht als
   weiteres Symbol in der Reihe. */
.app-logo {
    display: block;
    flex-shrink: 0;
    width: var(--m, 30px);   /* Kantenlänge je Ort (siehe --m bei .app-wortmarke); überschreibt die Angabe im SVG */
    height: var(--m, 30px);
    border-radius: 8.5px;
    box-shadow: 0 1px 3px rgba(0, 60, 140, 0.25);
}

/* Marke über den Anmeldemasken (Leitung, Tablet-PIN, Träger-Bereich). */
.anmelde-marke {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1c1c1e;
}

/* Marke auf der Startseite: links am Bildschirmrand wie die Marke in der Kopfzeile der
   anderen Bereiche, aber ohne Leiste und Trennlinie — die Startseite bleibt eine ruhige
   Fläche mit Namenskacheln. */
.start-marke {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1c1c1e;
}

/* Startseite: Marke links, Uhr und Datum rechts in derselben Zeile. */
.start-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-right: 1.5rem;
}

.start-uhr {
    padding-top: 1.25rem;
    text-align: right;
    line-height: 1.1;
}

.start-uhr-zeit {
    font-size: 2.2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1c1c1e;
}

/* Blinkender Doppelpunkt wie bei einer Digitaluhr: eine Sekunde an, eine Sekunde aus. */
.start-uhr-doppelpunkt {
    display: inline-block;
    padding: 0 0.04em;
    animation: start-uhr-blinken 2s steps(1, end) infinite;
}

@keyframes start-uhr-blinken {
    0% { opacity: 1; }
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .start-uhr-doppelpunkt { animation: none; }
}

.start-uhr-datum {
    margin-top: 0.15rem;
    font-size: 0.95rem;
    color: #55575c;
}

@media (max-width: 520px) {
    .start-kopf { padding-left: 1.5rem; }
    .start-kopf .start-marke { padding-left: 0; }
    .start-uhr { text-align: left; padding-top: 0; }
}

/* Zweizeilig: "OGS" als kräftige Marke, darunter die Einrichtung. Einzeilig würde ein
   langer Schulname den Trennstrich wegschieben — so bleibt der Block schmal. */
/* Die Marke ist genau so hoch wie das Bildzeichen daneben: --m ist dessen Kantenlänge (je Ort gesetzt,
   passend zu marke.logo(…) in den Vorlagen). „BeeOrga“ und der Name der Einrichtung füllen diese Höhe; der
   Name hält Abstand zu den Unterlängen der Schreibschrift. */
.admin-topbar-brand { --m: 38px; }
.start-marke { --m: 44px; }
.anmelde-marke { --m: 52px; }

.app-wortmarke {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* Marke oben, Name unten: dazwischen bleibt Luft für die Unterlängen */
    height: var(--m, 30px);
    min-width: 0;
    line-height: 1;
    letter-spacing: -0.01em;
}

/* Schrift der Marke: Pacifico (SIL Open Font License, app/static/lizenzen/pacifico-ofl.txt), als Datei im Programm
   ausgeliefert — beim Aufruf wird nichts von Google geladen. Nur der Name „BeeOrga“ nutzt sie. */
@font-face {
    font-family: "Pacifico";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/static/fonts/pacifico-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.app-wortmarke strong {
    font-family: "Pacifico", "Brush Script MT", "Segoe Script", cursive;
    font-weight: 400;
    font-size: calc(var(--m, 30px) * 0.5);  /* Pacifico hat eine kleine Mittellänge und braucht etwas mehr Größe */
    line-height: 1;
    letter-spacing: 0;
    color: #24346b;  /* das Nachtblau der Oberfläche (Knöpfe, Bildzeichen); „Bee“ bleibt honiggelb */
}

/* Ohne Namenszeile (schmale Kopfzeile am Tablet) steht die Marke mittig neben dem Bildzeichen. */
.app-wortmarke strong:only-child {
    margin: auto 0;
}

/* „Bee“ im Honiggelb der Wabe. Die feine, etwas dunklere Kontur hält das helle Gelb auf weißem
   Grund lesbar, ohne dass es anders aussieht. */
.app-wortmarke .wortmarke-bee {
    font-weight: inherit;
    color: #ffc93c;
    -webkit-text-stroke: 0.5px #d99a00;
    paint-order: stroke fill;
}

.app-wortmarke span {
    font-size: max(0.72rem, calc(var(--m, 30px) * 0.3));
    line-height: 1.1;
    font-weight: 500;
    color: #6b6d73;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Der Trennstrich läuft über die volle Höhe der Kopfzeile und geht damit nahtlos in die
   Kante der Seitenleiste über — ein durchgehender senkrechter Strich statt eines kurzen
   Stücks auf Texthöhe. Die negativen Ränder heben den Innenabstand der Kopfzeile auf. */
.admin-topbar-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    align-self: stretch;
    min-width: 0;
    margin: -0.85rem 0;
    padding: 0.85rem 0 0.85rem 1.5rem;
    border-left: 1px solid #e2e4e8;
}

/* Bei eingeklappter Seitenleiste (56 px) passt der Markenblock nicht mehr auf deren Kante —
   der Strich hinge dann frei in der Fläche. Dann lieber ganz weglassen: der Abstand allein
   trennt genug. */
body:has(.admin-sidebar.collapsed) .admin-topbar-title-group {
    border-left: none;
}

/* Hochformat-Anpassungen der Kopfzeile — bewusst hier und nicht in style.css: Diese Datei
   wird später geladen, sonst würde die Grundregel oben die Ränder wieder überschreiben. */
@media (max-width: 900px) {
    /* Hochformat: Marke, Uhrzeit und die Knöpfe rechts passen in die oberste Zeile, der
       Seitentitel rutscht darunter. Die Uhr bleibt dabei oben in der Mitte. */
    .admin-topbar {
        flex-wrap: wrap;
        row-gap: 0.35rem;
    }

    .topbar-clock {
        /* In der Mitte der ersten Zeile statt der Mitte der ganzen (jetzt zweizeiligen)
           Kopfzeile — sonst schwebte die Uhr zwischen den beiden Zeilen. */
        top: 0.85rem;
        height: 2.15rem;
        display: flex;
        align-items: center;
        transform: translateX(-50%);
    }

    /* Der Titel steht in der zweiten Zeile und beginnt an der Kante der Seitenleiste: so
       setzt der senkrechte Strich deren Linie fort, statt frei in der Fläche zu hängen. */
    .admin-topbar-title-group {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.75rem;
        flex: 1 1 100%;
        order: 3;
        /* Der linke Rand (nicht der Innenabstand!) trägt den Strich — er muss deshalb genau
           auf der Kante der Seitenleiste beginnen. Die negativen Ränder rechts und unten heben
           den Innenabstand der Kopfzeile auf, damit der Strich bis zur Unterkante läuft. */
        margin: 0 -1.5rem -0.85rem calc(var(--seitenleiste-breite, 220px) - 1.5rem);
        padding: 0.15rem 1.5rem 0.5rem 1.5rem;
    }

    /* Eingeklappt ist die Leiste nur 56 px breit — dann rückt auch der Titel entsprechend
       heran (der Strich entfällt dort ohnehin, siehe admin.css). */
    body:has(.admin-sidebar.collapsed) .admin-topbar-title-group {
        margin-left: calc(56px - 1.5rem);
    }

    .admin-topbar-title {
        border-left: none;
        padding-left: 0;
        white-space: normal;
    }
}

/* Handybreite: Für Marke, Uhr und Knöpfe nebeneinander reicht der Platz nicht mehr — die Uhr
   stellt sich dann wieder neben den Titel, statt ihn zu überlagern. */
@media (max-width: 620px) {
    .topbar-clock {
        position: static;
        height: auto;
        transform: none;
        order: 4;
        flex: 1 1 100%;
    }

    .admin-topbar-title-group {
        margin-left: -1.5rem;
        border-left: none;
    }

    body:has(.admin-sidebar.collapsed) .admin-topbar-title-group {
        margin-left: -1.5rem;
    }
}


.admin-topbar-title {
    font-weight: 600;
    font-size: 1rem;
    color: #55575c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.admin-topbar-refresh {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #55575c;
    padding: 0.4rem;
    border-radius: 8px;
}

.admin-topbar-refresh:hover {
    background: #eef1f5;
}

.admin-avatar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem;
    border-radius: 10px;
}

.admin-avatar-circle {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #d7ecd9;
    color: #18612f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

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

.admin-avatar-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1c1c1e;
    white-space: nowrap;
}

.admin-avatar-role {
    font-size: 0.72rem;
    color: #6b6d73;
}

.avatar-img {
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.avatar-editor {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.avatar-editor-circle {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.avatar-editor-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef1f5;
    font-size: 1.8rem;
}

.avatar-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.avatar-editor-choose {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

/* "Schnellerstellen"-Fenster (Raum buchen per Doppelklick auf einen Kalendertag) — bewusst im
   dunklen Look nachgebaut, unabhängig vom sonst hellen Grundthema der App, weil genau dieser
   Look explizit gewünscht war. */
.quick-event-box {
    position: relative;
    background: #2b2b2e;
    color: #f2f2f2;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    width: 440px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.qe-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: #9a9a9e;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
}

.qe-close-btn:hover {
    background: #3d3d40;
    color: #f2f2f2;
}

.qe-row-title {
    margin-bottom: 0.75rem;
    padding-right: 2rem;
}

.qe-title-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #55555a;
    color: #f2f2f2;
    font-size: 1.3rem;
    padding: 0.4rem 0.1rem;
    width: 100%;
    border-radius: 0;
}

.qe-title-input::placeholder {
    color: #6b6d73;
}

.qe-title-input:focus {
    outline: none;
    border-bottom-color: #5b6fae;
}

.qe-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #3d3d40;
    max-width: none;
}

.qe-row:last-of-type {
    border-bottom: none;
}

.qe-icon {
    color: #9a9a9e;
    display: flex;
    flex-shrink: 0;
}

.qe-icon .icon-svg {
    width: 1.2rem;
    height: 1.2rem;
}

.qe-select,
.qe-input {
    background: transparent;
    border: none;
    color: #f2f2f2;
    font-size: 1rem;
    padding: 0.3rem 0;
    width: 100%;
    font-family: inherit;
    border-radius: 0;
    color-scheme: dark;
}

.qe-select:focus,
.qe-input:focus {
    outline: none;
}

.qe-input-time {
    width: auto;
    flex: 1;
}

.qe-time-sep {
    color: #9a9a9e;
}

.qe-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.qe-btn {
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.qe-btn-secondary {
    background: transparent;
    color: #acb6d6;
    border: 1px solid #5f6368;
}

.qe-btn-primary {
    background: #34467f;
    color: white;
}

.qe-btn-danger {
    background: transparent;
    color: #f28b82;
    border: 1px solid #5f6368;
    margin-right: auto;
}

.avatar-crop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.avatar-crop-box {
    background: white;
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    max-width: 90vw;
}

.avatar-crop-box h3 {
    margin: 0;
    font-size: 1rem;
}

.avatar-crop-viewport {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    overflow: hidden;
    background: #1c1c1e;
    cursor: grab;
    touch-action: none;
}

.avatar-crop-viewport:active {
    cursor: grabbing;
}

#avatar-crop-image {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

#avatar-crop-zoom {
    width: 260px;
}

.avatar-crop-actions {
    display: flex;
    gap: 0.6rem;
}

body.admin .page-shell {
    min-height: calc(100vh - var(--topbar-height, 64px));
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--seitenleiste-breite, 220px);
    flex-shrink: 0;
    background: white;
    border-right: 1px solid #e2e4e8;
    padding: 1rem 0.75rem;
    position: sticky;
    top: var(--topbar-height, 64px);
    align-self: flex-start;
    height: calc(100vh - var(--topbar-height, 64px));
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 5;
    transition: width 0.15s ease;
}

.admin-sidebar.collapsed {
    width: 56px;
    padding: 1rem 0.4rem;
}

.sidebar-collapse-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    margin-bottom: 0.5rem;
    border: none;
    background: none;
    border-radius: 8px;
    color: #6b6d73;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    flex-shrink: 0;
}

.sidebar-collapse-toggle:hover {
    background: #eef1f5;
}

.admin-sidebar.collapsed .sidebar-collapse-toggle,
.admin-sidebar.collapsed .admin-tab,
.admin-sidebar.collapsed .admin-sidebar-logout {
    font-size: 0;
    justify-content: center;
    gap: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.admin-sidebar.collapsed .nav-icon {
    margin-right: 0;
}

.admin-sidebar.collapsed .nav-group-chevron-btn,
.admin-sidebar.collapsed .nav-group-items {
    display: none;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-width: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.nav-item .admin-tab,
.nav-item .nav-group {
    flex: 1;
    min-width: 0;
}

/* Zwischenüberschrift in der Seitenleiste (Träger: „OGS“, „Kita“). Eingeklappt entfällt sie —
   dann stehen nur die Symbole da. */
.nav-abschnitt {
    margin: 0.9rem 0.75rem 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b6d73;
}

.admin-sidebar.collapsed .nav-abschnitt {
    display: none;
}

.nav-drag-handle {
    display: none;
    flex-shrink: 0;
    width: 1.1rem;
    color: #75777d;
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    user-select: none;
}

.admin-sidebar-nav.edit-mode .nav-drag-handle {
    display: inline-block;
}

.admin-sidebar-nav.edit-mode .nav-item * {
    pointer-events: none;
}

.admin-sidebar-nav.edit-mode .nav-item .nav-drag-handle {
    pointer-events: auto;
    /* Ohne das scrollt das Tablet beim Ziehen die Seite, statt den Menüpunkt zu bewegen. */
    touch-action: none;
}

.nav-item.nav-item-dragging {
    opacity: 0.4;
}

.admin-sidebar.collapsed .nav-drag-handle,
.admin-sidebar.collapsed .nav-edit-toggle {
    display: none;
}

.nav-edit-toggle {
    display: block;
    margin: auto 0 0.5rem;
    width: 100%;
    background: none;
    border: 1px solid #c7c9ce;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #1c1c1e;
}

.nav-edit-toggle.active {
    background: #34467f;
    border-color: #5b6fae;
    color: white;
}

.admin-sidebar-logout-form {
    max-width: none;
}

.admin-sidebar-logout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    background: none;
    border: none;
    color: #55575c;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

.admin-sidebar-logout:hover {
    background: #eef1f5;
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    background: none;
    border: none;
    color: #55575c;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
}

.admin-tab .badge,
.admin-tab .unread-badge {
    margin-left: auto;
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.15rem;
}

.icon-svg {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    vertical-align: -0.25em;
}

.admin-tab:hover {
    background: #eef1f5;
}

.nav-group-header {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.nav-group-label {
    flex: 1;
    min-width: 0;
}

.nav-group-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 8px;
    background: none;
    border: none;
    color: #55575c;
    cursor: pointer;
    transition: transform 0.15s;
}

.nav-group-chevron-btn:hover {
    background: #eef1f5;
}

.nav-group-chevron-btn.open {
    transform: rotate(180deg);
}

.nav-group-items {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nav-group-items.collapsed {
    display: none;
}

.nav-subitem {
    padding-left: 2.5rem;
}

.admin-tab.active {
    background: #24346b;
    color: white;
}

/* Breite Tabellen (z.B. Budget-Ausgaben mit Beleg, Erfasser und Knöpfen) passen auf schmalen
   Bildschirmen nicht in die Karte. Statt dass sich Spalten überlagern oder die ganze Seite
   breiter wird als das Display, bekommt die Tabelle einen eigenen Rollbalken. Der Rahmen
   bleibt stehen, nur der Inhalt wandert. */
.table-scroll {
    overflow-x: auto;
    /* Platz für den Rollbalken, damit er nicht auf der letzten Zeile liegt. */
    padding-bottom: 0.4rem;
}

.table-scroll > table {
    /* Ohne Mindestbreite quetscht der Browser die Spalten weiter zusammen, statt zu rollen. */
    min-width: 44rem;
}

.detail-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    background: white;
    border: 1px solid #eceef1;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Symbol-Reiter (z.B. Einstellungen) sitzt am rechten Ende der Reiterleiste. */
.detail-tab-symbol {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
}

/* Das erste Symbol schiebt die Gruppe nach rechts, die folgenden schließen direkt an. */
.detail-tab-symbol-erstes {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.7rem;
}

.detail-tab-symbol .icon-svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Ein Reiter, der auf eine eigene Seite führt (z.B. Zeiterfassung in der Mitarbeiter-Leiste).
   Sieht aus wie ein Reiter, ist aber ein Verweis — und bleibt deshalb vom Reiter-Skript
   unberührt, das sonst versuchen würde, einen Bereich auf derselben Seite einzublenden. */
.detail-tab-verweis {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.detail-tab,
.detail-tab-verweis {
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #55575c;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.detail-tab:hover,
.detail-tab-verweis:hover {
    background: #eef1f5;
}

.detail-tab.active,
.detail-tab-verweis.active {
    background: #24346b;
    color: white;
}

.sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    background: #f6f7f9;
    border: 1px solid #eceef1;
    border-radius: 12px;
    padding: 0.4rem;
    margin-bottom: 1.25rem;
}

.sub-tab {
    padding: 0.45rem 0.8rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #55575c;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}

.sub-tab:hover {
    background: #eef1f5;
}

.sub-tab.active {
    background: #24346b;
    color: white;
}

body.admin table {
    border-radius: 8px;
    overflow: hidden;
}

body.admin th {
    background: #f6f7f9;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b6d72;
}

body.admin tbody tr:hover {
    background: #fafbfc;
}

.smtp-help-diagram {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.smtp-help-field {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.smtp-help-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: #24346b;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
}

.smtp-help-mock {
    flex: 1;
}

.smtp-help-mock label {
    display: block;
    font-size: 0.8rem;
    color: #55575c;
    margin-bottom: 0.2rem;
}

.smtp-help-input {
    border: 1px solid #d7dade;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    background: #f9fafb;
    font-size: 0.9rem;
    color: #1c1c1e;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid #e2e4e8;
    border-bottom: none;
    background: #f6f7f9;
}

.cal-weekday {
    padding: 0.6rem 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b6d72;
    text-align: center;
}

.cal-week {
    border: 1px solid #e2e4e8;
    border-top: none;
}

.cal-week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cal-day {
    border-right: 1px solid #eceef1;
    padding: 0.5rem 0.6rem;
    min-height: 5rem;
}

.cal-day:last-child {
    border-right: none;
}

/* Raumkalender: alle Wochen liegen in EINEM Grid (statt je eine eigene Zeile mit eigener
   Spaltenbreite) — sonst berechnet jede Woche ihre Spaltenbreiten unabhängig vom Inhalt der
   anderen Wochen, und Tage mit langen Buchungs-Chips verschieben die Spalten dieser einen
   Woche gegenüber den übrigen. minmax(0, 1fr) statt 1fr verhindert zusätzlich, dass eine lange
   Chip-Beschriftung die Spalte über ihren fairen Anteil hinaus aufbläht. */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid #e2e4e8;
}

.cal-grid .cal-weekday {
    background: #f6f7f9;
    border-bottom: 1px solid #e2e4e8;
    border-right: 1px solid #eceef1;
}

.cal-grid .cal-weekday:last-child {
    border-right: none;
}

.cal-grid .cal-day {
    border-bottom: 1px solid #eceef1;
    min-width: 0;
}

.cal-grid .cal-day:nth-last-child(-n + 7) {
    border-bottom: none;
}

.cal-grid .cal-day-form {
    min-width: 0;
}

.cal-day-muted {
    background: #fafbfc;
    color: #6b6d73;
}

.cal-day-num {
    font-size: 0.95rem;
    font-weight: 600;
}

.cal-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 1px;
    padding: 0 2px 4px;
}

.cal-bar {
    background: #34467f;
    color: white;
    font-size: 0.72rem;
    line-height: 1.4;
    padding: 1px 5px;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cal-day-form {
    display: block;
    margin: 0;
    max-width: none;
}

.cal-day-link,
.event-day-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    background: none;
    border: none;
    border-right: 1px solid #eceef1;
    width: 100%;
}

.cal-day-link:hover,
.event-day-link:hover,
/* Im Mitarbeiter-Kalender ist die Tageszelle kein Verweis (die Ansicht wechselt dort über
   Formulare) — sie soll sich beim Zeigen aber genauso verhalten wie bei der Leitung. */
.event-day-cell:hover {
    background: #f0f2f8;
}

.event-day-cell {
    cursor: pointer;
}

.cal-day-selected {
    background: #ebeef6;
    box-shadow: inset 0 0 0 2px #5b6fae;
}

/* Termin angeklickt (wie im Google Kalender) bzw. gerade per Drag & Drop gezogen. */
.cal-day-room-chip.chip-selected {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.cal-day-room-chip.chip-dragging {
    opacity: 0.5;
}

/* Ziel eines gerade laufenden Drag & Drop (Tag-Zelle bzw. Zeitachsen-Spalte). */
.cal-day-link.drop-target,
.event-day-link.drop-target {
    background: #ebeef6;
    box-shadow: inset 0 0 0 2px #5b6fae;
}

.day-view-room-track.drop-target {
    background: #ebeef6;
}

.cal-day-rooms {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 3px;
    max-height: 6.5rem;
    overflow-y: auto;
    /* Der Tag scrollt für sich, die Seite rollt dabei nicht mit. */
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Die Einträge dürfen nicht schrumpfen: Wegen overflow:hidden wäre ihre Mindesthöhe 0, sie würden bei
   vielen Terminen zusammengedrückt und überlappen, statt dass der Tag überläuft und scrollbar wird. */
.cal-day-rooms > * {
    flex: 0 0 auto;
}

/* Tage mit Terminen: Hat die Zelle eine feste Höhe (der Kalender füllt die Seite), nimmt der Terminteil nur den Platz unter der Tageszahl
   und scrollt darin. Ohne diese Regel ragte er über die Zelle hinaus in die nächste Woche. */
.cal-grid .cal-day:has(> .cal-day-rooms) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cal-grid .cal-day:has(> .cal-day-rooms) > .cal-day-rooms {
    flex: 1 1 auto;
    min-height: 0;
}

.cal-day-room-chip {
    display: block;
    width: 100%;
    background: #34467f;
    color: white;
    font-size: 0.8rem;
    line-height: 1.4;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Raumbelegung durch eine Veranstaltung (nicht durch Mitarbeiter gebucht) — schreibgeschützt
   im Raumkalender, daher optisch abgesetzt und ohne Zeigefinger-Cursor. */
.cal-day-room-chip-event {
    background: #7c5cff;
    cursor: default;
}

.cal-chip-feiertag {
    background: #c93c3c;
    cursor: default;
}

.cal-chip-ferien {
    background: #f0ad4e;
    color: #3a2a00;
    cursor: default;
}

.cal-chip-schliesszeit {
    background: #6b6d73;
    cursor: default;
}

/* Geburtstage im Kalender: honiggelb wie das Logo, mit Torte davor. */
.cal-chip-geburtstag {
    background: #fdf3d7;
    color: #6b4a00;
    border: 1px solid #e9a825;
    cursor: default;
}

/* Raumkalender: Tagesansicht (Google-Kalender-Stil) — je Raum eine Spalte mit einer
   Stunden-Zeitachse, Buchungen als zeitlich positionierte Blöcke (oben/Höhe in Prozent der
   Spurhöhe, server-seitig berechnet). */
.day-view {
    display: flex;
    align-items: flex-start;
    border: 1px solid #e2e4e8;
    border-radius: 8px;
    max-height: 576px;
    overflow: auto;
}

.day-view-hours {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 56px;
    flex-shrink: 0;
    border-right: 1px solid #e2e4e8;
    background: #f6f7f9;
    box-sizing: border-box;
}

.day-view-hour-label {
    position: absolute;
    left: 0;
    right: 0;
    font-size: 0.68rem;
    color: #6b6d73;
    text-align: right;
    padding-right: 6px;
    box-sizing: border-box;
    transform: translateY(-0.6em);
}

.day-view-rooms {
    display: flex;
    flex: 1;
}

.day-view-room-col {
    flex: 1;
    min-width: 160px;
    border-right: 1px solid #eceef1;
}

.day-view-room-col:last-child {
    border-right: none;
}

.day-view-room-header {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0.6rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    border-bottom: 1px solid #e2e4e8;
    background: #f6f7f9;
    box-sizing: border-box;
}

.day-view-room-track {
    position: relative;
}

.day-view-hour-line {
    height: var(--stunde-px, 48px);
    border-bottom: 1px solid #eceef1;
    box-sizing: border-box;
    cursor: pointer;
}

.day-view-block {
    position: absolute;
    left: 3px;
    right: 3px;
    z-index: 1;
    white-space: normal;
}

/* Griffe am oberen/unteren Rand eines Termin-Blocks (Tages-/Wochenansicht) zum Verändern der
   Start-/Endzeit durch Ziehen — wie bei Google Kalender. Nur bei tatsächlich bearbeitbaren
   Blöcken vorhanden (schreibgeschützte Veranstaltungs-Overlays im Raumkalender bekommen keine). */
.chip-resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 3;
}

.chip-resize-handle.chip-resize-top {
    top: 0;
}

.chip-resize-handle.chip-resize-bottom {
    bottom: 0;
}

.cal-day-room-chip:hover .chip-resize-handle::after {
    content: "";
    position: absolute;
    left: 30%;
    right: 30%;
    height: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 2px;
}

.cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: #55575c;
}

.cal-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Farblegende unter dem Urlaubskalender (Gruppen der Einsatztafel). */
.urlaub-legende {
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid #eceef1;
}

.urlaub-legende-titel {
    font-size: 0.82rem;
    font-weight: 600;
    color: #55575c;
}

.urlaub-legende-bunt {
    background: conic-gradient(#5b6fae 0 25%, #34c38f 0 50%, #f1734f 0 75%, #a56cc1 0);
}

.cal-view-toggle {
    display: inline-flex;
    border: 1px solid #d7dade;
    border-radius: 8px;
    overflow: hidden;
}

.cal-view-toggle form {
    display: contents;
}

.cal-nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: #24346b;
    padding: 0 0.3rem;
}

.cal-view-toggle button,
.cal-view-toggle a {
    border: none;
    background: white;
    color: #55575c;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.cal-view-toggle button.active,
.cal-view-toggle a.active {
    background: #24346b;
    color: white;
}

.cal-view-toggle a {
    border: none;
    background: white;
    color: #55575c;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    text-decoration: none;
}

.cal-view-toggle a.active {
    background: #24346b;
    color: white;
}

/* Feiertage, Ferien und Schließzeiten im kleinen Kalender der Übersichtskacheln. Dieselben
   Farben wie in der Legende des großen Kalenders: rot für Feiertag, orange für Ferien, grau
   für eine Schließzeit der Einrichtung. */
/* Doppelte Klasse, damit die Markierung die allgemeine Tagesfläche weiter unten überschreibt. */
.cal-mini-day.cal-mini-day-feiertag { background: #fdeaea; color: #b3261e; font-weight: 600; }
.cal-mini-day.cal-mini-day-ferien { background: #fff3e0; color: #9a5b00; }
.cal-mini-day.cal-mini-day-schliesszeit { background: #eceef1; color: #55575c; }

/* Tage mit Terminen bekommen einen Punkt unter der Zahl — eine eigene Fläche wäre nicht
   möglich, weil ein Tag zugleich Ferientag sein kann. Welche Termine es sind, steht in der
   Sprechblase. */
.cal-mini-day.cal-mini-day-termine {
    position: relative;
}

.cal-mini-day.cal-mini-day-termine::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #24346b;
}

.cal-tagesliste-feiertag { background: #fdeaea; }
.cal-tagesliste-feiertag strong { color: #b3261e; }
.cal-tagesliste-ferien { background: #fff3e0; }
.cal-tagesliste-ferien strong { color: #9a5b00; }
.cal-tagesliste-schliesszeit strong { color: #55575c; }
.cal-tagesliste-geburtstag { background: #fdf3d7; }
.cal-tagesliste-geburtstag strong { color: #6b4a00; }

.cal-chip-jubilaeum {
    background: #e8ecf7;
    color: #24346b;
    border: 1px solid #24346b;
    cursor: default;
}

.cal-tagesliste-jubilaeum { background: #e8ecf7; }
.cal-tagesliste-jubilaeum strong { color: #24346b; }

/* Geburtstag im kleinen Kalender: ein honiggelber Rahmen — die Fläche bleibt frei für
   Feiertag, Ferien oder Schließzeit, der Punkt für Termine. */
.cal-mini-day.cal-mini-day-jubilaeum {
    box-shadow: inset 0 0 0 2px #24346b;
}

.cal-mini-day.cal-mini-day-geburtstag {
    box-shadow: inset 0 0 0 2px #e9a825;
}

/* Hinweiszeile über der Tages-Zeitachse und eingefärbte Spaltenköpfe in der Wochenansicht:
   Feiertage, Ferien und Schließzeiten haben keine Uhrzeit und passen nicht ins Stundenraster. */
.kalender-marke {
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

.kalender-marke strong { margin-right: 0.4rem; }
.kalender-marke-feiertag { background: #fdeaea; color: #b3261e; }
.kalender-marke-ferien { background: #fff3e0; color: #9a5b00; }
.kalender-marke-schliesszeit { background: #eceef1; color: #55575c; }

.day-view-room-header small {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
}

.day-view-header-feiertag { background: #fdeaea; color: #b3261e; }
.day-view-header-ferien { background: #fff3e0; color: #9a5b00; }
.day-view-header-schliesszeit { background: #eceef1; color: #55575c; }

/* Tagesansicht der Kalender-Kachel: eine schlichte Liste der Termine dieses Tages. Ein
   Raster wäre für einen einzelnen Tag sinnlos, eine Zeitachse in der Kachel zu klein. */
.cal-tagesliste {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cal-tagesliste-eintrag {
    display: block;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: #f4f6f9;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

.cal-tagesliste-eintrag:hover {
    background: #e7eaf4;
}

.cal-tagesliste-eintrag strong {
    margin-right: 0.4rem;
}

.cal-tagesliste-eintrag small {
    display: block;
    color: #6b6d73;
}

/* Monats- bzw. Wochenwahl in allen Kalendern: Pfeile an den Kanten eines festen Blocks, die
   Beschriftung mittig dazwischen. Ohne feste Breite wandert der Pfeil rechts, sobald aus "Mai"
   ein "September" wird. */
.monatswahl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 15rem;
}

.monatswahl > strong {
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

.monatswahl > a,
.monatswahl > form {
    flex: 0 0 auto;
    margin: 0;
}

/* Filter am rechten Ende der Kalenderzeile, abgesetzt von der Monatswahl. */
.kalender-filter-rechts {
    margin-left: auto;
}

/* Monatswahl in der Kalender-Kachel: Pfeile fest an den Kanten, die Beschriftung mittig
   dazwischen. Vorher standen alle drei nebeneinander, sodass der Monatsname beim Blättern
   seitlich wanderte. */
.kachel-monatswahl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.kachel-monatswahl strong {
    flex: 1;
    text-align: center;
}

.kachel-monatswahl > a,
.kachel-monatswahl > form {
    flex: 0 0 auto;
    margin: 0;
}

.cal-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.cal-mini-month {
    border: 1px solid #e2e4e8;
    border-radius: 8px;
    padding: 0.6rem;
}

.cal-mini-month-form {
    margin: 0 0 0.4rem;
    padding: 0;
    max-width: none;
    display: block;
}

.cal-mini-month-header {
    display: block;
    width: 100%;
    background: transparent;
    color: #1c1c1e;
    border: none;
    padding: 0.2rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
}

.cal-mini-month-header:hover {
    background: #eef1f5;
    color: #24346b;
}

.cal-mini-weekdays,
.cal-mini-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cal-mini-weekday {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b6d73;
    text-align: center;
    padding-bottom: 2px;
}

.cal-mini-day-form {
    display: contents;
}

.cal-mini-day {
    font-family: inherit;
    font-size: 0.75rem;
    text-align: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    width: 100%;
    min-width: 0;
    padding: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Je breiter das Kalender-Widget (per Größe-ziehen), desto größer Zahlen/Wochentage/Monatsname
   — die Spaltenbreite selbst folgt schon der Grid-1fr-Aufteilung, das hier steuert nur, wie
   groß die Schrift/Zeilenhöhe innerhalb dieser breiter werdenden Zellen wirkt. */
@container widget (min-width: 420px) {
    .cal-mini-day { font-size: 0.85rem; }
    .cal-mini-weekday { font-size: 0.72rem; }
    .cal-mini-month-header { font-size: 0.95rem; }
}

@container widget (min-width: 620px) {
    .cal-mini-day { font-size: 1rem; }
    .cal-mini-weekday { font-size: 0.8rem; }
    .cal-mini-month-header { font-size: 1.05rem; }
}

@container widget (min-width: 850px) {
    .cal-mini-day { font-size: 1.15rem; }
    .cal-mini-weekday { font-size: 0.88rem; }
    .cal-mini-month-header { font-size: 1.15rem; }
}

/* Die Jahresansicht steckt 12 Mini-Monate nebeneinander in dasselbe Widget — dort ist jede
   Tageszelle ein Bruchteil EINES Mini-Monats breit, nicht des ganzen Widgets. Die obigen
   @container-Regeln würden dort viel zu große Schrift erzwingen und Zahlen zum Überlappen
   bringen, deshalb hier unabhängig vom Widget-Breakpoint immer die kompakte Ausgangsgröße
   (höhere Spezifität als die @container-Regeln oben, gewinnt also unabhängig von der Breite).*/
.cal-year-grid .cal-mini-day {
    font-size: 0.68rem;
}

.cal-year-grid .cal-mini-weekday {
    font-size: 0.62rem;
}

.cal-year-grid .cal-mini-month-header {
    font-size: 0.85rem;
}

.cal-mini-day:hover {
    background: #eef1f5;
}

.cal-mini-day-muted {
    color: #6b6d73;
}

.cal-mini-day-today {
    background: #24346b;
    color: white;
    font-weight: 700;
}

.cal-mini-dots {
    display: flex;
    justify-content: center;
    gap: 1px;
    height: 4px;
}

.cal-mini-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: inline-block;
}

.chat-window {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 480px;
    overflow-y: auto;
    padding: 0.75rem;
    background: #f6f7f9;
    border-radius: 10px;
}

/* Innerhalb der geteilten Chat-Ansicht (Konversations-Spalte, s. .chat-main-card weiter unten)
   soll das Nachrichtenfenster die komplette verfügbare Höhe ausfüllen statt bei 480px zu
   enden — die feste Obergrenze bleibt aber für andere Stellen (z.B. Ankündigungen-Feed)
   bestehen, wo kein umgebendes Flex-Layout dafür sorgt, dass "flex: 1" etwas bewirken würde. */
.chat-main-card .chat-window {
    flex: 1;
    max-height: none;
    min-height: 160px;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.chat-header h2 {
    margin: 0;
}

.chat-bubble-row {
    display: flex;
}

.chat-bubble-row-own {
    justify-content: flex-end;
}

.chat-bubble-row-other {
    justify-content: flex-start;
}

.chat-bubble {
    max-width: 70%;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
}

.chat-bubble p {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble-own {
    background: #24346b;
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-bubble-other {
    background: white;
    border: 1px solid #e2e4e8;
    border-bottom-left-radius: 4px;
}

.chat-bubble-meta {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.7rem;
    opacity: 0.75;
}

/* Eingabezeile unterhalb des Chat-Fensters wie bei WhatsApp: rundes, mitwachsendes Textfeld
   plus runder Senden-Knopf daneben statt Textarea + Button untereinander. */
.chat-composer {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
    max-width: none;
    width: 100%;
}

.chat-composer-input {
    flex: 1;
    resize: none;
    border-radius: 20px;
    padding: 0.6rem 1rem;
    max-height: 120px;
    line-height: 1.4;
    font-size: 1rem;
    font-family: inherit;
}

.chat-composer-send {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #24346b;
    color: white;
    border: none;
    cursor: pointer;
}

.chat-composer-send:hover {
    background: #24346b;
}

.chat-composer-send .icon-svg {
    width: 20px;
    height: 20px;
}

.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    /* Infomeldungen (Nachrichten, Anträge, Aufgaben …) im Honiggelb des Logos — dunkle Schrift,
       weil Weiß auf Gelb kaum lesbar ist. Rot bleibt Terminerinnerungen vorbehalten. */
    background: #e9a825;
    color: #2b1d00;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

/* Kachelraster nach dem Vorbild der Apple-Widgets: feste Rastermaße statt wachsender
   Kacheln. Jede Kachel belegt ganze Felder (1x1, 2x1, 2x2 …), alle Felder einer Zeile sind
   gleich hoch, und "dense" füllt entstehende Lücken von selbst auf. Vorher richtete sich jede
   Kachel nach ihrem Inhalt — dadurch standen unterschiedlich hohe Kacheln nebeneinander und
   es klafften große Löcher im Raster. */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    /* Jede Kachel so hoch wie ihr Inhalt — gilt für die schlichten Kartenlisten (Entwickler,
       Träger, Elternportal). Die beiden Übersichtsseiten überschreiben das weiter unten. */
    align-items: start;
}

.widget-card {
    position: relative;
    container-type: inline-size;
    container-name: widget;
}

.widget-card h2 {
    margin-top: 0;
    font-size: 1rem;
}

/* Nur die beiden Übersichtsseiten (die einzigen Raster mit gemerkter Anordnung) arbeiten mit
   festen Rastermaßen — die übrigen .widget-grid-Seiten sind schlichte Kartenlisten. */
.widget-grid[data-widget-storage-key] {
    /* auto-fill statt auto-fit: leere Spalten bleiben bestehen, damit eine einzelne Kachel
       nicht auf die volle Breite aufgeblasen wird. */
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    /* Eine Rasterzeile ist 102 px: zwei Zeilen und der Abstand (16 px) ergeben genau die frühere Zeile von 220 px.
       Dadurch gibt es halbe Kacheln (Personalschlüssel); alle übrigen Höhen sind unverändert (n alte Zeilen = 2n neue). */
    grid-auto-rows: var(--kachel-zeile, 102px);
    /* Lücken werden von nachfolgenden Kacheln aufgefüllt, statt als Löcher stehen zu bleiben. */
    grid-auto-flow: row dense;
    align-items: stretch;
}

.widget-grid[data-widget-storage-key] .widget-card {
    /* Die Kachel füllt ihr Rasterfeld vollständig aus. Was nicht hineinpasst, rollt innerhalb
       der Kachel — so bleibt das Raster ruhig, egal wie viele Geburtstage anstehen. */
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    /* Der Innenabstand oben wandert in die Überschrift, damit diese beim Rollen stehen bleibt
       und den durchlaufenden Inhalt verdeckt. */
    padding-top: 0;
}

.widget-grid[data-widget-storage-key] .widget-card > h2 {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 -1.5rem 0.75rem;
    padding: 1.5rem 1.5rem 0.5rem;
    background: white;
}

.widget-edit-toggle {
    display: block;
    margin: 0.75rem 0 0 auto;
    background: none;
    border: 1px solid #c7c9ce;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #1c1c1e;
}

.widget-edit-toggle.active {
    background: #34467f;
    border-color: #5b6fae;
    color: white;
}

@keyframes widget-wiggle {
    0% { transform: rotate(-0.6deg); }
    50% { transform: rotate(0.6deg); }
    100% { transform: rotate(-0.6deg); }
}

.widget-grid.edit-mode .widget-card {
    animation: widget-wiggle 0.22s infinite ease-in-out;
    cursor: grab;
    user-select: none;
    /* Beim Anordnen wird nicht gelesen: Ohne eigenes Rollen sitzen Schließkreuz und
       Ziehgriff verlässlich in den sichtbaren Ecken der Kachel. */
    overflow: hidden;
}

.widget-grid.edit-mode .widget-card.widget-dragging {
    animation: none;
    opacity: 0.5;
}

.widget-grid.edit-mode .widget-card * {
    pointer-events: none;
}

.widget-hide-btn {
    display: none;
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid white;
    background: #ef4444;
    color: white;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.widget-grid.edit-mode .widget-card .widget-hide-btn {
    display: flex;
    pointer-events: auto;
    /* Über der stehenbleibenden Überschrift der Kachel (z-index 1) — sonst verdeckt sie das Kreuz. */
    z-index: 3;
}

.widget-resize-handle {
    display: none;
    position: absolute;
    bottom: 0.2rem;
    right: 0.2rem;
    width: 1.2rem;
    height: 1.2rem;
    cursor: nwse-resize;
    z-index: 1;
}

.widget-resize-handle::after {
    content: "";
    position: absolute;
    bottom: 0.35rem;
    right: 0.35rem;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid #b7b7bb;
    border-bottom: 2px solid #b7b7bb;
    border-radius: 0 0 2px 0;
}

.widget-grid.edit-mode .widget-card .widget-resize-handle {
    display: block;
    pointer-events: auto;
}

.widget-grid.edit-mode .widget-card.widget-resizing {
    animation: none;
    opacity: 0.9;
}

.widget-card.widget-span-2 {
    grid-column: span 2;
}

.widget-card.widget-span-3 {
    grid-column: span 3;
}

/* Höhe in ganzen Rasterzeilen statt in Pixeln — nur so bleiben die Zeilen bündig. */
.widget-card.widget-height-2 {
    grid-row: span 2;
}

.widget-card.widget-height-3 {
    grid-row: span 3;
}

.widget-card.widget-hidden {
    display: none !important;
}

.widget-hidden-tray {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.widget-restore-chip {
    border: 1px dashed #c7c9ce;
    border-radius: 999px;
    background: none;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: #34467f;
}


/* auto-fill statt auto-fit: Die Spaltenbreite bleibt dieselbe, egal wie viele Kacheln in der
   Liste stehen. Mit auto-fit zog sich eine einzelne Kachel (z.B. der einzige Urlauber des
   Tages) über die ganze Breite und sah dadurch anders aus als dieselbe Kachel im
   Mitarbeiter-Widget daneben. */
.mini-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    /* Feste Zeilenhöhe statt Dehnen: Sonst richtet sich die Kachelhöhe danach, wie hoch das
       Widget gerade ist — dieselbe Person sah dann im Widget "Mitarbeiter" anders aus als in
       "Heute krank / im Urlaub". Längere Namen dürfen die Zeile trotzdem wachsen lassen. */
    grid-auto-rows: minmax(4.4rem, auto);
    align-content: start;
    gap: 0.5rem;
    margin-top: 0.5rem;
    max-width: none;
}

.mini-tile-grid.mini-tile-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(120px, 160px));
}

.mini-tile-grid-scroll {
    max-height: 230px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

/* Kacheln, die aus Überschrift, einer Liste und einem Knopf am Fuß bestehen (Kinder,
   Mitarbeiter, Neue Termine): Die Liste nimmt die ganze übrige Höhe der Kachel ein und rollt
   darin. Der Knopf bleibt unten stehen, statt aus der Kachel geschoben zu werden. Vorher war
   die Liste starr auf 230 Pixel begrenzt — in einer zwei Felder hohen Kachel blieb darunter
   Platz ungenutzt, und bei vielen Einträgen rollte man durch ein winziges Fenster. */
.widget-grid[data-widget-storage-key] .widget-card.widget-mit-liste {
    display: flex;
    flex-direction: column;
    /* Die Kachel selbst rollt nicht — das übernimmt die Liste darin. */
    overflow: hidden;
}

.widget-card.widget-mit-liste .mini-tile-grid-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.widget-card.widget-mit-liste .widget-footer-link {
    align-self: flex-start;
    flex-shrink: 0;
}

.widget-footer-link {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 0.9rem;
    background: white;
    color: #1c1c1e;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.widget-footer-link:hover {
    background: #f2f3f5;
}

.mini-tile {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    background: #f6f7f9;
    text-decoration: none;
    color: #1c1c1e;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.mini-tile small {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b6d72;
}

.mini-tile-present {
    background: #e3f7e9;
}

.mini-tile-present small {
    color: #1a7a3d;
}

.mini-tile-break {
    background: #fff6d9;
}

.mini-tile-break small {
    color: #8a6300;
}

.mini-tile-sick {
    background: #fdeaea;
}

.mini-tile-sick small {
    color: #b3261e;
}

.mini-tile-vacation {
    background: #ebeef6;
}

.mini-tile-vacation small {
    color: #3b5092;
}

.hours-employee,
.hours-week {
    background: white;
    border: 1px solid #dde0e5;
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.hours-employee summary,
.hours-week summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    font-weight: 600;
    list-style: none;
}

.hours-employee summary::-webkit-details-marker,
.hours-week summary::-webkit-details-marker {
    display: none;
}

.hours-employee summary::before,
.hours-week summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 0.5rem;
    color: #6b6d73;
    transition: transform 0.15s;
}

.hours-employee[open] summary::before,
.hours-week[open] summary::before {
    transform: rotate(90deg);
}

.hours-employee-name,
.hours-week-name {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
}

.hours-employee-stats,
.hours-week-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1rem;
    font-weight: 400;
    font-size: 0.85rem;
    color: #55575c;
}

.hours-employee-detail,
.hours-week-detail {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #eceef1;
}

.hours-employee-detail h4,
.hours-week-detail h4 {
    margin-bottom: 0.4rem;
}

.hours-kt-heading {
    margin-bottom: 0.3rem;
}

.child-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    max-width: none;
}

/* Zwischenzeile in Tabellen, die nach Klassen gegliedert sind (z. B. Anwesenheitsliste) —
   optisch dieselbe Sprache wie die Klassen-Überschrift über den Kinder-Kacheln. */
.tabellen-gruppe td {
    padding-top: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #55575c;
    background: #f7f8fa;
}

.child-card-group-header {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid #e2e4e8;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #55575c;
}

.child-card-group-header:first-child {
    margin-top: 0;
}

/* Der Status-Knopf auf der Kachel und seine Auswahlliste. */
.child-card-status-knopf {
    border: none;
    background: none;
    padding: 0.1rem;
    margin: -0.1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s;
}

.child-card-status-knopf:hover,
.child-card-status-knopf:focus-visible,
.child-card-status-offen {
    background: rgba(0, 0, 0, 0.07);
}

.child-card-ziel {
    display: block;
    text-decoration: none;
    color: inherit;
}

.child-card-name-ziel {
    flex: 1;
    min-width: 0;
}

.status-schnellwahl {
    position: absolute;
    /* Ohne feste Breite zöge "width: 100%" der Einträge die Liste auf die volle Fensterbreite. */
    width: max-content;
    min-width: 11rem;
    z-index: 40;
    background: #fff;
    border: 1px solid #dde0e5;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    padding: 0.35rem;
}

.status-schnellwahl[hidden] {
    display: none;
}

.status-schnellwahl form {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-width: none;
}

.status-schnellwahl-eintrag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem 0.45rem 0.5rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: #1c1c1e;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.status-schnellwahl-eintrag:hover,
.status-schnellwahl-eintrag:focus-visible {
    background: #eef1f5;
}

.status-schnellwahl-eintrag .icon-svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Die Kachel öffnet die Kind-Seite; das Formular darum darf die Kachel nicht einschnüren. */
.child-card-open-form {
    display: block;
    max-width: none;
    margin: 0;
}

/* Der Name in der Kopfzeile der Kachel: nimmt den Platz zwischen Häkchen und Status-Symbol
   ein und öffnet wie bei den Leitungen die Kindakte. */
.child-card-name-form {
    flex: 1;
    min-width: 0;
}

.child-card-name-open {
    margin-top: 0;
}

/* Ankunft/Gehzeit: zwei Häkchen nebeneinander. */
.anwesend-knoepfe {
    display: inline-flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Das zweite Kästchen (Gehzeit) ist gestrichelt, damit die beiden auf einen Blick
   unterscheidbar bleiben. Abgehakt wird es rot-orange statt grün — gegangen ist nicht
   dasselbe wie anwesend. */
.child-card-check-gehen {
    border-style: dashed;
}

.child-card-check-gehen.child-card-check-done {
    background: #f0b429;
    border-color: #f0b429;
    border-style: solid;
}

/* Aufklapp-Menü am Symbol (z.B. Klassenfilter neben der Suche). */
.klassen-filter {
    display: inline-flex;
}

.klassen-filter-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    color: #3f4147;
    font-size: 0.88rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.klassen-filter-knopf:hover,
.klassen-filter-knopf.menue-offen {
    background: #eef1f5;
}

/* Ist eingeschränkt worden, sieht man das schon am Knopf. */
.klassen-filter-aktiv {
    border-color: #1d2a58;
    background: #e7eaf4;
    color: #172247;
}

.menue-auswahl {
    position: absolute;
    z-index: 40;
    width: max-content;
    min-width: 11rem;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid #dde0e5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.menue-auswahl[hidden] {
    display: none;
}

.menue-auswahl form {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    max-width: none;
}

.menue-titel {
    margin: 0.5rem 0 0.15rem;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #8a8c91;
}

.menue-eintrag {
    /* Auch als Verweis (z.B. die Ausdrucke der Krankmeldungen) — dann ohne Unterstreichung
       und mit Symbol auf einer Linie. */
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    padding: 0.45rem 0.7rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: #1c1c1e;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.menue-eintrag:hover,
.menue-eintrag:focus-visible {
    background: #eef1f5;
}

.menue-eintrag-gesperrt {
    opacity: 0.4;
    cursor: default;
}

.menue-eintrag-aktiv {
    background: #e7eaf4;
    color: #172247;
    font-weight: 700;
}

/* Formulare im Aufklapp-Menü (z.B. Datum + Herunterladen). */
.menue-formular {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-width: none;
    padding: 0 0.35rem 0.35rem;
}

.menue-eintrag-knopf {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid #d7dae0;
    font-weight: 600;
}

.menue-eintrag-knopf .icon-svg {
    width: 1rem;
    height: 1rem;
}

/* Suchfeld und Filter-Symbol stehen nebeneinander. */
.such-leiste {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.such-leiste input[type="text"] {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Umschaltbare Darstellungen (Kacheln/Liste): Die verborgene bleibt verborgen, auch wenn sie
   selbst ein Raster ist — sonst überstimmt „display: grid“ das hidden-Merkmal. */
[data-ansicht-gruppe][hidden] {
    display: none !important;
}

/* Mehrfachauswahl in Kachel-Listen: Die Kästchen erscheinen erst im Auswahl-Modus, damit die
   Listen im Alltag ruhig bleiben. */
.auswahl-kaestchen {
    display: none;
}

/* In der Listenansicht bekommt das Kästchen eine eigene Spalte, die erst im Auswahl-Modus
   Platz beansprucht. */
.auswahl-spalte {
    display: none;
}

.auswahl-modus .auswahl-spalte {
    display: table-cell;
    width: 2rem;
}

/* Höhere Spezifität als die Kachel-Regel weiter unten: In der Tabelle steht das Kästchen in
   seiner Zelle und nicht frei über der Kachel. */
.auswahl-modus td.auswahl-spalte .auswahl-kaestchen {
    display: inline-block;
    position: static;
    width: 1.15rem;
    height: 1.15rem;
    accent-color: #24346b;
}

.auswahl-modus tbody tr:hover {
    background: #f6f7f9;
}

.auswahl-modus .auswahl-kaestchen {
    display: block;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 1.15rem;
    height: 1.15rem;
    z-index: 3;
    accent-color: #24346b;
}

/* Im Auswahl-Modus führt ein Klick auf die Kachel nicht mehr in die Akte — sonst verließe man
   die Seite mitten in der Auswahl. */
.auswahl-modus .child-card a,
.auswahl-modus .child-card button,
.auswahl-modus .employee-tile {
    pointer-events: none;
}

.auswahl-modus .auswahl-kaestchen,
.auswahl-modus .child-card .auswahl-kaestchen {
    pointer-events: auto;
}

.auswahl-modus .child-card,
.auswahl-modus .employee-tile,
.employee-tile-wrapper {
    position: relative;
}

/* Die Mitarbeiterkachel ist selbst ein Verweis — das Kästchen sitzt deshalb in einer Hülle
   darum, nicht in der Kachel. */
.employee-tile-wrapper {
    display: contents;
}

.auswahl-modus .employee-tile-wrapper {
    display: block;
}

/* Die Leiste sitzt unten am Bildschirm und bleibt beim Rollen stehen. Sie erscheint erst,
   wenn etwas ausgewählt ist — ohne diese Zeile würde "display: flex" das hidden-Merkmal
   überstimmen und sie bliebe immer sichtbar. */
.auswahl-leiste[hidden] {
    display: none;
}

.auswahl-leiste {
    position: sticky;
    bottom: 1rem;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: #1c1c1e;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.auswahl-leiste form {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    max-width: none;
}

.auswahl-leiste button {
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

.auswahl-leiste .btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Rückfrage "Wer hat das Kind abgeholt?": die hinterlegten Personen als große Flächen, damit
   sie sich am Tablet mit dem Finger sicher treffen lassen. */
.abhol-auswahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.abhol-person {
    padding: 0.6rem 0.9rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    color: #1c1c1e;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.abhol-person:hover {
    background: #eef1f5;
}

.abhol-person-gewaehlt {
    border-color: #1d2a58;
    background: #e7eaf4;
    color: #172247;
    font-weight: 600;
}

.abhol-hinweis-fehlt {
    color: #b3261e;
    font-weight: 600;
}

/* Suchfeld mit Lupe: breit bleibt es ein normales Eingabefeld, schmal wird daraus ein
   Symbol wie Filter und Kalender daneben. */
.suchfeld {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.suchfeld-knopf {
    display: none;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    color: #3f4147;
    font-family: inherit;
    cursor: pointer;
}

.suchfeld-knopf:hover {
    background: #eef1f5;
}

/* Ist etwas eingetippt, bleibt das am Symbol sichtbar — sonst würde man nicht verstehen,
   warum die Liste kürzer ist als erwartet. */
.suchfeld-knopf.suchfeld-knopf-aktiv {
    border-color: #1d2a58;
    background: #e7eaf4;
    color: #172247;
}

@media (orientation: portrait), (max-width: 820px) {
    .suchfeld {
        flex: 0 0 auto;
    }

    .suchfeld-knopf {
        display: inline-flex;
    }

    .suchfeld input[type="text"] {
        display: none;
    }

    /* Aufgeklappt nimmt das Feld die ganze Zeile ein, die Symbole rutschen darunter. */
    .suchfeld.suchfeld-offen {
        flex: 1 0 100%;
    }

    .suchfeld.suchfeld-offen .suchfeld-knopf {
        display: none;
    }

    .suchfeld.suchfeld-offen input[type="text"] {
        display: block;
        width: 100%;
    }

    .such-leiste {
        flex-wrap: wrap;
    }
}

/* Kinder-Übersicht als Liste (Umschaltung neben dem Klassenfilter). Gleiche Handgriffe wie
   auf den Kacheln, nur platzsparender — für lange Klassen übersichtlicher. */
.kinder-ansicht-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.kinder-ansicht-leiste .group-filter-bar {
    margin-bottom: 0;
}

/* Das Formular um die Liste ist nur der Rahmen für die Knöpfe — es darf die Breite nicht
   beschneiden (Formulare sind sonst schmal gesetzt). */
.kinder-liste-form {
    display: block;
    max-width: none;
}

.kinder-liste {
    width: 100%;
    margin-top: 1rem;
}

.kinder-liste td:nth-child(3) {
    white-space: nowrap;
}

.kinder-liste td {
    vertical-align: middle;
}

.kinder-liste-name {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.kinder-liste-name:hover {
    text-decoration: underline;
}

/* Hinweis auf eine bestehende Abmeldung (krank, entschuldigt) in der Kindakte. */
.hinweis-abmeldung {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #f0b429;
    border-radius: 10px;
    background: #fdf3d8;
    color: #7a5300;
}

.hinweis-abmeldung .icon-svg {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

/* Akte eines Kindes: Einträge als Liste mit Verfasser und Zeitpunkt. */
.akten-liste {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.akten-eintrag {
    border-left: 3px solid #dde0e5;
    padding: 0.1rem 0 0.1rem 0.85rem;
}

.akten-kopf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: #55575c;
}

.akten-zeit {
    color: #8a8c91;
}

.akten-loeschen {
    margin-left: auto;
    display: inline-flex;
}

.akten-text {
    margin: 0.25rem 0 0;
    white-space: pre-wrap;
    line-height: 1.45;
}

/* Abhol-Kennzeichen: nur ein kleines Symbol hinter dem Nachnamen (Familie = wird abgeholt,
   Fußgänger = darf allein gehen). Bewusst ohne eigene Farbfläche, damit es nicht mit den
   Status-Farben (anwesend, krank, entschuldigt …) verwechselt wird. */
.kind-abholung-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.15rem;
    vertical-align: -0.2rem;
    border-radius: 50%;
    color: #6b7280;
    cursor: help;
}

.kind-abholung-symbol .icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}

.child-card-klassenzeile .kind-abholung-symbol {
    margin-left: auto;
}

/* Die Ausnahme „darf allein gehen“ steht etwas kräftiger da als der Normalfall. */
.kind-abholung-symbol.kind-abholung-allein {
    color: #1c1c1e;
    background: rgba(15, 23, 42, 0.07);
}

/* Status als Symbol auf der Kinder-Kachel (statt des früheren Schildchens) und in der
   Legende darüber. */
.child-card-status {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.child-card-status .icon-svg {
    width: 1.45rem;
    height: 1.45rem;
    stroke-width: 2.2;
}

.child-card-status-punkt {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
}

.status-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    color: #55575c;
}

.status-legende > span,
.status-legende-eintrag {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Die Legende ist zugleich ein Schnellfilter: ein Klick zeigt nur Kinder mit diesem Status,
   ein zweiter hebt das wieder auf. */
.status-legende-eintrag {
    padding: 0.2rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.status-legende-eintrag:hover {
    background: #eef1f5;
}

.status-legende-aktiv {
    border-color: #1d2a58;
    background: #e7eaf4;
    color: #172247;
    font-weight: 600;
}

.status-legende .icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}

.child-card {
    display: block;
    width: 100%;
    background: white;
    border: 1px solid #dde0e5;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}

.child-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.child-card-open {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin-top: 0.6rem;
    text-decoration: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.child-card-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.child-card-name {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.child-card-check {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid #c7c9ce;
    border-radius: 6px;
    background: white;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.child-card-check-done {
    background: #22c55e;
    border-color: #22c55e;
    cursor: default;
}

/* Noch nicht möglich (z.B. Gehzeit vor der Ankunft) oder bereits festgeschrieben: blass und
   ohne Zeiger, damit die Kachel nicht nach einem gefüllten Kästchen aussieht. */
.child-card-check:disabled {
    opacity: 0.4;
    cursor: default;
}

.todo-widget-wide {
    grid-column: span 2;
    grid-row: span 2;
}

.todo-section-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1.1rem 0 0.2rem;
}

.todo-list {
    display: flex;
    flex-direction: column;
    max-height: none;
}

.todo-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f0f0f2;
}

.todo-row:last-child {
    border-bottom: none;
}

/* Überfällige Aufgaben sind auf einen Blick zu erkennen — nicht nur am roten Datum.
   Der negative Rand hält die Zeile trotz Innenabstand in einer Flucht mit den anderen. */
.todo-row-overdue {
    background: #fdecea;
    border-radius: 8px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-bottom-color: #f6d2cd;
}

.todo-checkbox-circle {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    border: 2px solid #c7c9ce;
    background: white;
    color: white;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.todo-checkbox-circle .icon-svg {
    width: 0.8rem;
    height: 0.8rem;
}

.todo-checkbox-circle-done {
    background: #22c55e;
    border-color: #22c55e;
}

.todo-row.todo-row-dragging {
    opacity: 0.4;
    user-select: none;
}

.todo-list-row.todo-list-row-dragging {
    opacity: 0.4;
    user-select: none;
}

.todo-drag-handle:active {
    cursor: grabbing;
}

.todo-drag-handle {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    color: #75777d;
    cursor: grab;
    font-size: 1.15rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    margin-top: 0.05rem;
    border-radius: 4px;
}

.todo-drag-handle:hover {
    background: #f2f3f5;
    color: #4c4c4e;
}

.todo-list-row .todo-drag-handle {
    margin-top: 0;
}

.todo-row-main {
    flex: 1;
    min-width: 0;
}

a.todo-row-main,
button.todo-row-main {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
}

a.todo-row-main:hover .todo-row-title,
button.todo-row-main:hover .todo-row-title {
    text-decoration: underline;
}

.todo-row-title {
    font-size: 0.92rem;
}

.todo-text-done {
    text-decoration: line-through;
    color: #6b6d73;
}

.todo-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.2rem;
}

.todo-row-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.76rem;
    color: #6b6d73;
    white-space: nowrap;
}

.todo-row-meta-item .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

.todo-row-meta-item-today {
    color: #b8860b;
}

.todo-row-meta-item-overdue {
    color: #b42318;
}

.todo-row-steps {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.3rem;
}

.todo-row-step {
    position: relative;
    padding-left: 1rem;
    font-size: 0.78rem;
    color: #6e6e73;
    line-height: 1.3;
}

.todo-row-step::before {
    content: "•";
    position: absolute;
    left: 0.25rem;
}

.todo-row-step-done {
    color: #b0b0b5;
    text-decoration: line-through;
}

.todo-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.todo-delete-btn {
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #c7c9ce;
    padding: 0;
    display: flex;
}

.todo-delete-btn:hover {
    color: #ef4444;
}

.todo-star-btn {
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: #c7c9ce;
    padding: 0;
    display: flex;
}

/* Gesetzt = ausgefüllter Stern. Der bloße Umriss in derselben Farbe ist die Vorschau
   beim Zeigen mit der Maus: so sieht man vorher, was ein Klick bewirkt. */
.todo-star-btn.todo-star-active {
    color: #f5a623;
}

.todo-star-btn.todo-star-active .icon-svg {
    fill: currentColor;
}

.todo-star-btn:hover {
    color: #f5a623;
}

.todo-star-btn.todo-star-active:hover .icon-svg {
    fill: none;
}

.todo-quick-add {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: #f5f6f8;
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    max-width: none;
}

.todo-quick-add input[type="text"] {
    border: none;
    background: none;
    flex: 1;
    min-width: 140px;
    font-size: 0.92rem;
    padding: 0.2rem 0;
}

.todo-quick-add input[type="text"]:focus {
    outline: none;
}

.todo-quick-add input[type="date"],
.todo-quick-add select {
    border: none;
    background: white;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    color: #5a5a5e;
}

.todo-quick-add button[type="submit"] {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    padding: 0;
    line-height: 1;
}

.todo-widget-body {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.todo-lists-sidebar {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-right: 1px solid #eceef1;
    padding-right: 1rem;
}

.todo-lists-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b6d73;
    padding: 0.2rem 0.5rem 0.5rem;
}

.todo-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
}

.todo-list-row-divider {
    border-top: 1px solid #e2e4e8;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
}

.todo-list-row.active,
.todo-list-row:hover {
    background: #f2f3f5;
}

.todo-list-row.active {
    background: #e7eaf4;
}

.todo-list-link {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.88rem;
    color: #4c4c4e;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.todo-list-row.active .todo-list-link {
    color: #1c1c1e;
    font-weight: 600;
}

.todo-list-link-actions {
    display: flex;
    gap: 0.1rem;
    padding-right: 0.3rem;
    flex-shrink: 0;
}

.todo-list-action-mini {
    border: none;
    background: none;
    color: #9a9a9e;
    cursor: pointer;
    padding: 0.15rem;
    display: flex;
}

.todo-list-action-mini:hover {
    color: #1c1c1e;
}

.todo-list-action-mini .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

.todo-lists-sidebar-add {
    margin-top: 0.3rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.82rem;
    color: #34467f;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.todo-lists-sidebar-add:hover {
    text-decoration: underline;
}

.todo-main {
    flex: 1;
    min-width: 0;
}

.todo-detail-steps {
    margin-top: 0.5rem;
}

.todo-detail-step-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
}

.todo-detail-step-text {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #1c1c1e;
}

.qe-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.qe-checkbox-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

textarea.qe-input {
    resize: vertical;
    min-height: 3rem;
    font-family: inherit;
}

.status-chip {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* „Erwartet“: noch kein Status — bewusst zurückhaltend, aber lesbar (8,6 : 1). */
.status-chip-neutral {
    background: #e4e5e8;
    color: #48484a;
}

.child-profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.child-profile-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #d7ecd9;
    color: #18612f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.profile-header-status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.child-profile-name {
    font-size: 1.4rem;
    font-weight: 700;
}

.child-profile-meta {
    color: #6b6d72;
    margin-top: 0.15rem;
}

.child-card-meta {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: #55575c;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem 1.5rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6b6d73;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.info-value {
    font-size: 1rem;
    color: #26282c;
}

.info-value-empty {
    color: #6b6d73;
}

.info-item-wide {
    grid-column: 1 / -1;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tag {
    display: inline-block;
    background: #eef0f3;
    color: #45474c;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.trend-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr 5.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0;
}

.trend-row-label {
    font-size: 0.85rem;
    color: #55575c;
}

.trend-bar-track {
    background: #eef1f5;
    border-radius: 6px;
    height: 0.9rem;
    overflow: hidden;
}

.trend-bar-fill {
    background: #24346b;
    height: 100%;
    border-radius: 6px 0 0 6px;
}

.trend-bar-fill-warning { background: #f7b84b; }
.trend-bar-fill-negative { background: #d70015; }

.trend-row-value {
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

.group-filter-bar {
    margin-bottom: 1rem;
    max-width: none;
}

.group-filter-bar select {
    max-width: 260px;
}

.child-card-tap-hint {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: #6b6d73;
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: none;
    margin-top: 0.5rem;
}

.chat-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid #eceef1;
    padding: 0.75rem 0.4rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 0;
}

.chat-list-row:last-child {
    border-bottom: none;
}

.chat-list-row:hover {
    background: #f6f7f9;
}

.chat-avatar {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.chat-avatar-group {
    background: #6b6d72;
    font-size: 1.2rem;
}

.new-group-form {
    display: none;
    max-width: none;
    margin: 1rem 0;
    padding: 1rem;
    background: #f6f7f9;
    border-radius: 10px;
}

.new-group-form.open {
    display: flex;
}

.wide-form {
    max-width: none;
}

.chat-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.chat-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-row-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-row-time {
    font-size: 0.75rem;
    color: #6b6d73;
    flex-shrink: 0;
}

.chat-row-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-row-preview-text {
    font-size: 0.85rem;
    color: #6b6d72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-row-preview-empty {
    font-size: 0.85rem;
    color: #6b6d73;
    font-style: italic;
}

/* Geteilte Nachrichten-Ansicht wie bei WhatsApp Web/Slack: Chat-Liste als feste linke Spalte,
   die gerade geöffnete Unterhaltung direkt daneben — beides gleichzeitig sichtbar, damit auf
   einem breiten Bildschirm nicht mehr zwischen einer vollen Listen- und einer vollen
   Unterhaltungs-Seite hin- und hergesprungen werden muss. */
.chat-layout {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    height: calc(100vh - 170px);
    min-height: 480px;
}

/* Die Liste wird auf schmaleren Bildschirmen (Tablet hochkant) schmaler, statt unter den Chat
   zu rutschen — wie bei WhatsApp bleiben Liste und Unterhaltung nebeneinander. */
.chat-list-pane {
    width: clamp(220px, 36%, 360px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-list-pane .card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.chat-list-scroll {
    flex: 1;
    max-height: none;
    overflow-y: auto;
    margin: 0 -0.4rem;
    padding: 0 0.4rem;
}

.chat-conversation-pane {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
}

.chat-main-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

/* "Mitglieder verwalten" (Gruppen-Chat) behält seine natürliche Höhe — bei wenig Platz
   scrollt die ganze .chat-conversation-pane, statt diese Karte zusammenzudrücken. */
.chat-conversation-pane > .card:not(.chat-main-card) {
    flex-shrink: 0;
}

.chat-list-row-active {
    background: #e7eaf4;
}

.chat-list-row-active:hover {
    background: #e7eaf4;
}

.chat-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #6b6d73;
    flex: 1;
    min-height: 0;
    gap: 0.5rem;
}

.chat-empty-state .icon-svg {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.5;
}

/* Erst auf dem Handy (sehr schmal) stehen Liste und Unterhaltung untereinander. */
@media (max-width: 600px) {
    .chat-layout {
        flex-direction: column;
        height: auto;
    }
    .chat-list-pane {
        width: 100%;
    }
    .chat-list-scroll {
        max-height: 50vh;
    }
    .chat-window {
        min-height: 240px;
    }
}

/* Öffentliches Online-Anmeldeformular (/anmeldung) — die einzige Seite ohne Login, deshalb
   bewusst schlicht gehalten und ohne Seitenleiste; Pflichtfelder und AGB-Kästen sollen auch
   auf dem Handy gut lesbar sein. */
.anmeldung-page .container {
    max-width: 760px;
}

.anmeldung-intro {
    white-space: pre-wrap;
}

.anmeldung-form .card {
    margin-bottom: 1rem;
}

.anmeldung-form h2 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.anmeldung-form h3 {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.5rem;
    color: #48484a;
}

.anmeldung-form label {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #48484a;
}

.anmeldung-form input[type="text"],
.anmeldung-form input[type="tel"],
.anmeldung-form input[type="email"],
.anmeldung-form input[type="date"],
.anmeldung-form select,
.anmeldung-form textarea {
    width: 100%;
    max-width: none;
}

.anmeldung-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.anmeldung-row > div {
    flex: 1;
    min-width: 200px;
}

.anmeldung-row > div label {
    margin-top: 0.75rem;
}

.req {
    color: #d9534f;
}

.anmeldung-hint {
    font-size: 0.85rem;
    color: #6b6b70;
    margin-top: 0.5rem;
}

.anmeldung-form-desc {
    font-size: 0.9rem;
    color: #48484a;
    margin-top: 0.5rem;
}

.anmeldung-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #1c1c1e;
    line-height: 1.4;
}

.anmeldung-check input[type="checkbox"] {
    width: auto;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.anmeldung-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.anmeldung-terms {
    max-height: 260px;
    overflow-y: auto;
    white-space: pre-wrap;
    background: #f6f7f9;
    border: 1px solid #d7dade;
    border-radius: 10px;
    padding: 0.9rem;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

.anmeldung-version {
    font-weight: normal;
    font-size: 0.85rem;
    color: #6b6b70;
}

.anmeldung-submit {
    margin-top: 1.25rem;
    width: 100%;
    padding: 0.9rem;
    font-size: 1rem;
}

/* Honigtopf gegen Bots: für Menschen unsichtbar, für Bots aber ein ganz normales Feld —
   deshalb bewusst nicht display:none, das erkennen manche Bots. */
.anmeldung-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Kennzahlen-Kacheln (Übersicht der Einrichtung) — eine große Zahl je Kachel, damit die
   Geschäftsführung den Stand auf einen Blick erfassen kann. */
.kennzahl-card h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    color: #48484a;
}

.kennzahl-wert {
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.1;
    color: #1c1c1e;
}

.kennzahl-zusatz {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #6b6b70;
    line-height: 1.5;
}

/* Auswahl-Kacheln (Mitarbeiter/Kinder) im dunklen Termin-Fenster: die Kacheln selbst sind
   hell, erben aber sonst die helle Schriftfarbe des Fensters — die Namen wären dann weiß auf
   weiß und praktisch unsichtbar. Deshalb hier ausdrücklich dunkle Schrift. Angehakte Kacheln
   sind blau mit weißer Schrift und bleiben davon unberührt. */
.quick-event-box .member-picker .org-choice {
    color: #1c1c1e;
}

/* Beschriftung über den Auswahl-Kacheln — auf dunklem Grund heller als das sonst übliche Grau. */
.qe-field-hint {
    font-size: 0.82rem;
    color: #9a9a9e;
    margin-bottom: 0.3rem;
}

/* Das Hilfe-Fragezeichen in der Kopfzeile ist ein Link (öffnet in neuem Tab), verwendet aber
   dieselbe Optik wie die Aktualisieren-Schaltfläche daneben. */
a.admin-topbar-refresh {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* ---- Hilfeseite ---- */
.hilfe-page .container {
    max-width: 1180px;
}

/* Zwei Spalten: links die feststehende Kapitelleiste mit Suche, rechts der Inhalt. */
.hilfe-layout {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.hilfe-nav {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.hilfe-content {
    flex: 1;
    min-width: 0;
}

.hilfe-search {
    position: relative;
    margin-bottom: 0.6rem;
}

.hilfe-search input {
    width: 100%;
    max-width: none;
    padding-right: 2rem;
}

/* Der Browser blendet bei type="search" ein eigenes Löschkreuz ein — das würde neben unserem
   doppelt erscheinen. Wir nutzen unseres, weil es die Suche auch wirklich zurücksetzt. */
.hilfe-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

#hilfe-suche-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b6d73;
    font-size: 1.3rem;
    line-height: 1;
    padding: 0 0.3rem;
    cursor: pointer;
    width: auto;
}

.hilfe-treffer {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    color: #24346b;
}

.hilfe-leer {
    background: #f6f7f9;
    border: 1px solid #e3e5e9;
    border-radius: 10px;
    padding: 1rem;
    color: #55575c;
}

.hilfe-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.hilfe-toc-nav em {
    margin-top: 0.75rem;
    color: #6b6d73;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-style: normal;
    font-weight: 600;
}

.hilfe-toc-nav em:first-child {
    margin-top: 0;
}

.hilfe-toc-nav a {
    font-size: 0.9rem;
    text-decoration: none;
    color: #1c1c1e;
    padding: 0.3rem 0.5rem;
    border-radius: 7px;
    border-left: 2px solid transparent;
}

.hilfe-toc-nav a:hover {
    background: #eef2f7;
}

.hilfe-toc-nav a.active {
    background: #e7eaf4;
    border-left-color: #24346b;
    color: #24346b;
    font-weight: 600;
}

.hilfe-content mark {
    background: #ffe9a8;
    border-radius: 3px;
    padding: 0 0.1rem;
}

/* Auf schmalen Bildschirmen (Tablet hochkant) untereinander statt nebeneinander. */
@media (max-width: 860px) {
    .hilfe-layout {
        flex-direction: column;
    }
    .hilfe-nav {
        position: static;
        width: 100%;
        max-height: none;
    }
    .hilfe-toc-nav {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.hilfe-intro {
    color: #48484a;
    margin-bottom: 1.25rem;
}

.hilfe-toc strong {
    display: block;
    margin-bottom: 0.6rem;
}

.hilfe-toc-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.hilfe-toc-cols > div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 200px;
}

.hilfe-toc-cols em {
    margin-top: 0.5rem;
    color: #6b6d73;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hilfe-toc-cols em:first-child {
    margin-top: 0;
}

.hilfe-toc a {
    font-size: 0.92rem;
    text-decoration: none;
}

.hilfe-toc a:hover {
    text-decoration: underline;
}

.hilfe-part {
    margin: 2.25rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #d7dade;
    font-size: 1.25rem;
}

/* Sprungziel nicht unter der Kopfzeile verstecken, wenn man aus dem Programm herspringt */
.hilfe-page section {
    scroll-margin-top: 1rem;
}

.hilfe-page section h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

.hilfe-page dt {
    font-weight: 600;
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

.hilfe-page dd {
    margin: 0.15rem 0 0;
    color: #48484a;
    line-height: 1.55;
}

.hilfe-page li {
    line-height: 1.55;
    margin-bottom: 0.35rem;
    color: #48484a;
}

.hilfe-page code {
    background: #f6f7f9;
    border: 1px solid #e3e5e9;
    border-radius: 5px;
    padding: 0.05rem 0.35rem;
    font-size: 0.88rem;
}

.hilfe-hinweis {
    background: #fff8e6;
    border: 1px solid #f0d9a0;
    border-radius: 9px;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.55;
    margin-top: 0.9rem;
}

.hilfe-fuss {
    color: #6b6d73;
    font-size: 0.9rem;
    margin: 2rem 0 3rem;
    text-align: center;
}

/* ---- Bebilderte Anleitungen in der Hilfe ----
   Die Nummern liegen als Marken über dem Bild (in Prozent positioniert, damit sie bei jeder
   Anzeigegröße an derselben Stelle sitzen). Das Bild selbst bleibt unverändert — so lässt sich
   ein Screenshot austauschen, ohne die Beschriftung neu zeichnen zu müssen. */
.hilfe-bild {
    margin: 1rem 0 0;
}

.hilfe-bild-rahmen {
    position: relative;
    display: inline-block;
    line-height: 0;
    border: 1px solid #d7dade;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f7f9;
}

.hilfe-bild-rahmen img {
    display: block;
    width: 100%;
    height: auto;
}

.hilfe-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e5484d;
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hilfe-legende {
    margin: 0.75rem 0 0;
    padding-left: 0;
    list-style: none;
    counter-reset: hilfe-schritt;
}

.hilfe-legende li {
    counter-increment: hilfe-schritt;
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.hilfe-legende li::before {
    content: counter(hilfe-schritt);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5484d;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

/* ---- Träger-Bereich (Verwaltung / Geschäftsleitung) ---- */
.traeger-login-page .container {
    max-width: 420px;
}

.traeger-login {
    margin-top: 12vh;
}

.traeger-login-sub {
    color: #6b6d73;
    margin-top: -0.5rem;
}

.traeger-login form {
    max-width: none;
}

.traeger-login-hinweis {
    font-size: 0.85rem;
    color: #6b6d73;
    margin-top: 1.5rem;
}

.traeger-intro {
    color: #48484a;
    margin-top: -0.5rem;
}

.traeger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* Die ganze Karte ist anklickbar — nicht nur ein kleiner Link darin. */
.traeger-karte {
    display: block;
    background: white;
    border: 1px solid #eceef1;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.traeger-karte:hover {
    border-color: #c7cee4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

.traeger-karte-kopf h2,
.traeger-karte-kopf h3 {
    margin: 0;
    font-size: 1.1rem;
}

.traeger-karte-traeger {
    font-size: 0.85rem;
    color: #6b6d73;
}

/* Die Übersicht ist nach Art getrennt: erst die OGS, dann die Kitas. */
.traeger-art {
    margin-top: 1.75rem;
}

.traeger-art-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eceef1;
}

.traeger-art-kopf h2 {
    margin: 0;
    font-size: 1.15rem;
}

.traeger-art-zahlen {
    font-size: 0.85rem;
    color: #6b6d73;
}

.traeger-art-leer {
    color: #6b6d73;
    font-size: 0.9rem;
    margin: 0;
}

/* Warnung neben der Abschnitts-Überschrift, wenn dort jemand unter der Vorgabe liegt. */
.traeger-art-warnung {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #c0392b;
}

.traeger-art-warnung svg {
    width: 1em;
    height: 1em;
}

/* Der Personalschlüssel im Augenblick — eigene Zeile auf der Karte, farbig nur dann, wenn es
   etwas zu sagen gibt: grün heißt Vorgabe eingehalten, rot heißt zu wenig Personal. */
.traeger-schluessel {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    border-top: 1px solid #eceef1;
    padding-top: 0.7rem;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    color: #6b6b70;
}

.traeger-schluessel-text {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.traeger-schluessel-text svg {
    width: 1em;
    height: 1em;
}

.traeger-schluessel-wert {
    font-size: 1.1rem;
    color: #1c1c1e;
}

.traeger-schluessel-zusatz {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: #6b6d73;
}

.traeger-schluessel-gut .traeger-schluessel-wert {
    color: #1a7f37;
}

.traeger-schluessel-warnung .traeger-schluessel-wert {
    color: #c0392b;
}

/* Feste Vierer-Aufteilung statt Umbruch — sonst rutscht bei schmaler Karte eine Zahl
   allein in die nächste Zeile und die Karte wirkt zerrissen. */
.traeger-zahlen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin: 1rem 0;
}

.traeger-zahl {
    display: flex;
    flex-direction: column;
}

.traeger-zahl-wert {
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.1;
}

.traeger-zahl-text {
    font-size: 0.78rem;
    color: #6b6d73;
}

.traeger-karte-fuss {
    border-top: 1px solid #eceef1;
    padding-top: 0.7rem;
    font-size: 0.85rem;
    color: #6b6b70;
}

.traeger-karte-pfeil {
    display: block;
    margin-top: 0.4rem;
    color: #24346b;
    font-weight: 600;
}

/* Suchfeld und Umschalter Kartei/Liste in einer Zeile — der Umschalter rechts, damit er
   an derselben Stelle steht wie in der Kinderübersicht der Leitung. */
.traeger-ansicht-zeile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.traeger-ansicht-zeile .traeger-suche {
    flex: 1;
    min-width: 12rem;
    margin: 0;
}

/* Im Träger-Bereich ist die Kinder-Kachel nur zum Ansehen: keine Häkchen, kein Status-Knopf,
   die ganze Kachel ist der Verweis auf die Akte. */
.traeger-kind-kachel {
    display: block;
    text-decoration: none;
    color: inherit;
}

.traeger-kind-kachel:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.09);
}

/* Einrichtungsleitung im Organigramm des Trägers: je Person eine Zeile mit Name, Rolle und
   Stundenumfang — der Name führt in die Akte. */
.org-leitung-liste {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.35rem;
}

.org-leitung-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.org-leitung-name {
    font-weight: 600;
    color: #1c1c1e;
    text-decoration: none;
}

.org-leitung-name:hover {
    text-decoration: underline;
}

.org-leitung-rolle {
    font-size: 0.75rem;
    color: #2b3a67;
    background: #f0f2f8;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
}

.org-leitung-stunden {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: #6b6d73;
}

.traeger-fuss {
    color: #6b6d73;
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

/* Aufschlüsselung nach Kostenträger in der Träger-Auswertung: Name, Zeit und darunter
   klein die betroffenen Abteilungen. */
.traeger-kt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.traeger-kt:last-child {
    margin-bottom: 0;
}

.traeger-kt-name {
    font-weight: 600;
    font-size: 0.88rem;
}

.traeger-kt-zeit {
    font-size: 0.88rem;
}

.traeger-kt-abt {
    width: 100%;
    font-size: 0.78rem;
    color: #6b6d73;
}

/* Hinweis bei Leitungs-Zugängen, die noch keine E-Mail-Adresse haben und sich deshalb
   weiterhin über den Namen anmelden müssen. */
.hinweis-warnung {
    display: block;
    margin-top: 0.2rem;
    color: #b4690e;
    font-size: 0.78rem;
}

.nicht-gefunden-liste {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    line-height: 1.9;
}

/* Sprachumschalter in der Kopfzeile der Mitarbeiter-Oberfläche */
.sprachschalter {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 2px;
    margin: 0;
    padding: 0;
    max-width: none;
    background: #eef1f5;
    border-radius: 8px;
    padding: 2px;
}

.sprachschalter-knopf {
    background: none;
    border: none;
    color: #55575c;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    width: auto;
}

.sprachschalter-knopf.active {
    background: white;
    color: #1c1c1e;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Hinweisleiste, solange eine Entwickler-Vorschau läuft — soll unübersehbar sein, damit
   niemand sie für die echte Ansicht hält. */
.vorschau-leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: #fff8e6;
    border: 1px solid #f0d9a0;
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Bereichsleiste des Entwickler-Bereichs: nutzt die Optik der übrigen Seitenleisten, die
   Knöpfe schalten aber nur den Abschnitt um, statt die Seite zu wechseln.
   Bewusst nur die Eigenschaften setzen, die ein <button> braucht — Hintergrund und Farbe
   kommen von .admin-tab bzw. .admin-tab.active, sonst wäre der aktive Eintrag weiß auf weiß. */
.entwickler-nav .admin-tab,
.sidebar-logout .admin-tab {
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.sidebar-logout {
    margin: auto 0 0;
    padding: 0;
    max-width: none;
    display: block;
}

/* --- Einsatztafel ------------------------------------------------------------------ */

.tafel-anleitung { color: #475569; margin: 0 0 1rem; }

.tafel-notiz {
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin: 0 0 1rem;
    font-weight: 600;
    color: #713f12;
}

.tafel-bereiche {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    align-items: start;
}

.tafel-bereich {
    border: 2px solid var(--bereich-farbe, #cbd5e1);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.tafel-bereich-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: var(--bereich-farbe, #64748b);
    color: #fff;
    font-weight: 700;
}

.tafel-bereich-zahl {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.85rem;
    min-width: 1.6rem;
    text-align: center;
}

.tafel-bereich-hinweis {
    margin: 0;
    padding: 0.35rem 0.7rem;
    background: #fef9c3;
    color: #713f12;
    font-size: 0.85rem;
    font-weight: 600;
}

.tafel-ablage {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    min-height: 84px;
}

.tafel-ablage-aktiv {
    background: #e9ecf5;
    outline: 2px dashed #3a4e8f;
    outline-offset: -4px;
}

.tafel-leer {
    margin: auto 0;
    text-align: center;
    color: #94a3b8;
    font-size: 0.85rem;
}

.tafel-bereich-offen {
    --bereich-farbe: #94a3b8;
    margin-top: 1rem;
}

.tafel-bereich-offen .tafel-ablage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.tafel-bereich-offen .tafel-leer { grid-column: 1 / -1; }

.tafel-magnet {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #94a3b8;
    border-radius: 8px;
    background: #f8fafc;
}

.tafel-bearbeitbar .tafel-magnet {
    cursor: grab;
    /* Ohne das scrollt das Tablet beim Ziehen die Seite statt den Magneten zu bewegen. */
    touch-action: none;
    user-select: none;
}

.tafel-magnet-bild {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cbd5e1;
    color: #1e293b;
    font-weight: 700;
    font-size: 0.8rem;
}

.tafel-magnet-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 7rem; }
/* Namen dürfen umbrechen statt abgeschnitten zu werden — auf der Tafel muss man auf einen
   Blick lesen können, wer wo steht. */
.tafel-magnet-name { font-weight: 600; overflow-wrap: break-word; }
.tafel-magnet-funktion { color: #475569; font-size: 0.75rem; }

.tafel-magnet-status {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    flex-shrink: 0;
}

/* Im Dienst ist grün hinterlegt — bisher trug nur die Kante links Farbe, wodurch die Karte
   neben Pause (gelb) und Urlaub (blau) farblos wirkte. Derselbe Grünton wie auf den
   Mitarbeiterkacheln. */
.tafel-magnet-da { border-left-color: #16a34a; background: #e3f7e9; }
.tafel-magnet-da .tafel-magnet-status { background: #cdefd8; color: #166534; }
/* Pause ist gelb — dieselbe Farbe wie auf den Mitarbeiterkacheln. Die Person ist im Haus,
   steht aber gerade nicht im Einsatz. */
.tafel-magnet-pause { border-left-color: #d99a00; background: #fff6d9; }
.tafel-magnet-pause .tafel-magnet-status { background: #ffeeb8; color: #8a6300; }
.tafel-magnet-krank { border-left-color: #dc2626; background: #fef2f2; }
.tafel-magnet-krank .tafel-magnet-status { background: #fee2e2; color: #991b1b; }
/* Urlaub ist blau — dieselbe Farbe wie die Mitarbeiterkacheln und die Übersichtskachel,
   damit "im Urlaub" im ganzen Leitungsbereich gleich aussieht und sich deutlich von "krank"
   (rot) unterscheidet. */
.tafel-magnet-urlaub { border-left-color: #3b5092; background: #ebeef6; }
.tafel-magnet-urlaub .tafel-magnet-status { background: #dde2f0; color: #3b5092; }

.tafel-magnet-zieht { opacity: 0.35; }

.tafel-magnet-geist {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
    transform: rotate(-1.5deg);
    background: #fff;
}

.tafel-fuss { margin: 1rem 0 0; color: #475569; font-size: 0.85rem; }

/* Die Kachel braucht Platz für Bereichsname plus Namen — wie die ToDo-Kachel zwei Spalten
   breit, solange der Benutzer sie nicht selbst kleiner zieht. */
/* Zwei Felder breit und zwei hoch: Bereichsname plus Namen brauchen den Platz. Die Tafel
   selbst rollt innerhalb der Kachel, wie alle anderen Inhalte auch. */
.einsatzplan-widget-wide {
    grid-column: span 2;
    grid-row: span 2;
}

.einsatzplan-widget-wide .tafel-klein {
    min-height: 0;
}

/* Dieselbe Tafel wie im Leitungs-Bereich, nur kleiner — auf der Übersicht teilt sie sich den
   Platz mit den anderen Kacheln. Nur Maße, keine eigene Gestaltung: So sehen beide Ansichten
   gleich aus und bleiben es auch, wenn sich an der Tafel etwas ändert. */
.tafel-klein { font-size: 0.85rem; }
.tafel-klein .tafel-bereiche { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 0.5rem; }
.tafel-klein .tafel-bereich-kopf { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
.tafel-klein .tafel-bereich-hinweis { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.tafel-klein .tafel-ablage { padding: 0.35rem; gap: 0.25rem; min-height: 56px; }
.tafel-klein .tafel-bereich-offen .tafel-ablage { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); }
.tafel-klein .tafel-magnet { padding: 0.2rem 0.35rem; gap: 0.35rem; }
.tafel-klein .tafel-magnet-bild { width: 24px; height: 24px; font-size: 0.65rem; }
.tafel-klein .tafel-magnet-funktion { font-size: 0.65rem; }
.tafel-klein .tafel-magnet-status { font-size: 0.6rem; padding: 0.05rem 0.3rem; }
.tafel-klein .tafel-leer { font-size: 0.75rem; }
.tafel-klein .tafel-notiz { padding: 0.35rem 0.5rem; font-size: 0.8rem; }
.tafel-klein .tafel-bereich-offen { margin-top: 0.5rem; }
.tafel-klein .tafel-fuss { font-size: 0.75rem; margin-top: 0.5rem; }

/* Die eigene Person auf der Tafel hervorheben — sonst sucht man sich in 30 Namen zu Tode. */
.tafel-magnet-ich { box-shadow: inset 0 0 0 2px #566dba; }

/* Bereiche anordnen und löschen — nur im Bearbeiten-Modus sichtbar, damit die Tafel im
   Alltag ruhig bleibt und niemand aus Versehen einen Bereich wegwirft. */
.tafel-bereich-griff,
.tafel-bereich-weg { display: none; }

.tafel-ordnen .tafel-bereich-griff,
.tafel-ordnen .tafel-bereich-weg { display: inline-flex; }

.tafel-ordnen .tafel-bereich {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.tafel-ordnen .tafel-ablage { opacity: 0.55; }

.tafel-bereich-griff {
    cursor: grab;
    opacity: 0.75;
    letter-spacing: -0.1em;
}

.tafel-bereich-weg {
    margin-left: auto;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.tafel-bereich-weg:hover { background: #b91c1c; }

.tafel-bereich-zieht { opacity: 0.3; }

.tafel-bereich-geist {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.3);
    transform: rotate(-1deg);
    background: #fff;
}

/* Gruppenleitung auf der Tafel */
.tafel-bereich-leitung {
    margin: 0;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    color: #334155;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
}

.tafel-bereich-leitung em { color: #b45309; font-style: normal; }
.tafel-bereich-ohne-leitung { color: #b91c1c; font-weight: 600; }

.tafel-magnet-leitung {
    color: #ca8a04;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Die Auswahl erscheint nur im Bearbeiten-Modus — sonst stünde auf jeder Karte dauerhaft ein
   Auswahlfeld, das im Alltag niemand braucht. */
.tafel-leitung-wahl { display: none; }

.tafel-ordnen .tafel-leitung-wahl {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}

.tafel-leitung-wahl label { font-size: 0.75rem; font-weight: 600; color: #475569; }

.tafel-leitung-wahl select {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.15rem 0.3rem;
    margin: 0;
}

.tafel-klein .tafel-bereich-leitung { padding: 0.25rem 0.5rem; font-size: 0.72rem; }

/* "Fällt aus" — kommt automatisch aus den Krank- und Urlaubsmeldungen, deshalb nicht
   verschiebbar. */
.tafel-bereich-ausfall {
    --bereich-farbe: #dc2626;
    margin-top: 1rem;
}

.tafel-bereich-ausfall .tafel-ablage {
    flex-direction: row;
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.tafel-ablage-gesperrt .tafel-magnet { cursor: default; }

.tafel-ausfall-hinweis {
    margin: 0;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    color: #475569;
    border-top: 1px solid #fecaca;
}

.tafel-klein .tafel-bereich-ausfall .tafel-ablage {
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
}

/* Der Knopf schwebt in der Ecke der Karte und ragt dabei über deren Rand hinaus. Damit er
   nicht am Fensterrand klebt, rückt der gesamte Inhaltsbereich rechts ein — nicht nur die eine
   Karte. So bleiben Reiterleiste und alle übrigen Karten der Seite bündig. */
.container:has(.card-mit-aktion) { padding-right: 2.5rem; }

.card-mit-aktion {
    position: relative;
    margin-top: 0.85rem;
}

/* Ohne diesen Hauch Innenabstand verschmilzt der Außenabstand der Karte mit dem des Panels
   (margin collapsing) — die Karte rückte dann gar nicht nach unten und der überstehende Knopf
   klebte an der Reiterleiste. */
.detail-panel:has(> .card-mit-aktion),
.sub-panel:has(> .card-mit-aktion) { padding-top: 1px; }

/* Der Knopf sitzt mit seiner Mitte genau auf der Ecke der Karte — halb innen, halb außen.
   Die Hälfte von 2.25rem Knopfhöhe ist 1.125rem. So kostet er im Inhalt keinen Platz und
   überlappt nichts: Die untere Hälfte reicht nur bis in den Innenabstand der Karte. */
/* Das Pluszeichen allein sagt nicht, was es anlegt. Beim Zeigen mit der Maus (und beim
   Ansteuern per Tastatur) fährt die Beschriftung deshalb aus dem Kreis heraus — der Text
   kommt aus aria-label, muss also nirgends doppelt gepflegt werden. Da der Knopf über
   "right" in der Ecke sitzt, wächst er nach innen und stößt nicht über den Fensterrand. */
.karten-aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 1.125rem;
    background: #24346b;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: width 0.16s ease, padding 0.16s ease, background 0.16s ease;
}

/* Unsichtbares Feld genau über dem ruhenden Kreis. Es gehört zum Knopf und bleibt beim
   Herausfahren an Ort und Stelle — dadurch trifft ein Klick den Knopf auch dann, wenn er
   genau in dem Moment kommt, in dem die Beschriftung noch herausfährt. Ohne dieses Feld
   landete der Tastendruck gelegentlich auf dem Hintergrund, und es passierte nichts. */
.karten-aktion::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
}

.karten-aktion::after {
    content: attr(aria-label);
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 0.85rem;
    font-weight: 500;
    transition: max-width 0.18s ease, margin-left 0.18s ease, opacity 0.12s ease;
}

.karten-aktion:hover,
.karten-aktion:focus-visible {
    width: auto;
    padding: 0 0.95rem 0 0.7rem;
    background: #1d2a58;
}

.karten-aktion:hover::after,
.karten-aktion:focus-visible::after {
    max-width: 14rem;
    margin-left: 0.4rem;
    opacity: 1;
}

/* Gleiche Form wie das Pluszeichen, aber mit Symbol statt Schriftzeichen. */
.karten-aktion-symbol .icon-svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Mehrere Aktionssymbole in derselben Ecke (z.B. Status setzen + verwalten). */
.karten-aktionen-ecke {
    position: absolute;
    top: -1.125rem;
    right: -1.125rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.karten-aktionen-ecke .karten-aktion {
    position: static;
}

/* Variante innerhalb der Karte: für eckige Knöpfe wie das Disketten-Menü. Sie halb über die
   Kante zu legen sieht bei einem Rechteck unruhig aus — anders als bei den runden Pluszeichen.
   Der Abstand entspricht dem Innenabstand der Karte, der Knopf steht damit auf einer Linie
   mit der Überschrift. */
.karten-aktionen-ecke-innen {
    position: absolute;
    top: 1.15rem;
    right: 1.25rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.karten-aktion-ecke {
    position: absolute;
    top: -1.125rem;
    right: -1.125rem;
    z-index: 2;
}

/* Wer die Maus nicht benutzen kann (Tablet), sieht die Beschriftung nicht — dort bleibt es
   beim Kreis. Bewegungsempfindliche Einstellungen schalten das Herausfahren ohne Animation. */
@media (prefers-reduced-motion: reduce) {
    .karten-aktion,
    .karten-aktion::after { transition: none; }
}

/* Helles Fenster für gewöhnliche Formulare — das dunkle .quick-event-box ist eigens für die
   Schnellerstellung im Kalender gestaltet und passt für ein normales Formular nicht. */
.modal-box {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    width: 520px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* Für Inhalte, die in 520 px nicht lesbar sind (z.B. die Raumliste mit Feldern je Zeile). */
.modal-box-breit {
    width: 880px;
}

.modal-box h2 { margin-top: 0; padding-right: 2rem; }
.modal-box form { max-width: none; }

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 1.6rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 6px;
}

.modal-close:hover { background: #f1f5f9; color: #111827; }

/* Zahnrad am Bereich — ersetzt den früheren Lösch-Knopf und ist immer sichtbar, weil das
   Bearbeiten (Notiz, Farbe, Gruppenleitung) im Alltag häufiger vorkommt als das Umsortieren. */
.tafel-bereich-zahnrad {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
}

.tafel-bereich-zahnrad:hover { background: rgba(255, 255, 255, 0.45); }
.tafel-bereich-zahnrad .icon-svg { width: 14px; height: 14px; }

.tafel-hinweis-bis { font-weight: 500; opacity: 0.75; }

/* .inline-form ist ein Flex-Container und würde sonst das hidden-Attribut übergehen. */
.inline-form[hidden] { display: none !important; }

/* Etwas Luft zwischen Speichern und Löschen, damit der rote Knopf nicht direkt unter dem
   blauen klebt — mehr braucht es nicht. */
.modal-gefahr {
    /* .inline-form ist display:inline — dort wirkt der Außenabstand oben nicht. */
    display: block;
    margin-top: 1.25rem;
}

/* Sprachumschalter der Hilfe */
.hilfe-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.hilfe-kopf h1 { margin: 0; }

.hilfe-sprache {
    display: flex;
    border: 1px solid #d7dade;
    border-radius: 8px;
    overflow: hidden;
}

.hilfe-sprache a {
    padding: 0.3rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #52525b;
    text-decoration: none;
    background: #fff;
}

.hilfe-sprache a + a { border-left: 1px solid #d7dade; }
.hilfe-sprache a:hover { background: #f1f5f9; }
.hilfe-sprache a.active { background: #24346b; color: #fff; }

/* --- AG-Wochenplan ------------------------------------------------------------------ */

/* Fünf Wochentage nebeneinander brauchen Platz. Passen sie nicht auf den Bildschirm, ragte
   der Plan bisher über die Karte hinaus. Jetzt lässt sich der Plan seitlich schieben — die
   Spaltenbreite bleibt lesbar, statt auf schmalen Geräten zusammenzufallen. */
.ag-plan {
    overflow-x: auto;
    /* Platz für den Rollbalken, damit er nicht auf den Karten liegt. */
    padding-bottom: 0.4rem;
    /* Luft zwischen der Wochenumschaltung darüber und den Tagesspalten. */
    margin-top: 1.1rem;
}

.ag-spalten {
    display: grid;
    grid-template-columns: repeat(5, minmax(200px, 1fr));
    gap: 0.75rem;
    align-items: start;
    min-width: calc(5 * 200px + 4 * 0.75rem);
}

.ag-spalte {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.ag-spalte-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: #eef2f7;
    font-weight: 700;
    border-bottom: 1px solid #e2e8f0;
}

.ag-spalte-kopf small { font-weight: 500; color: #475569; }
.ag-spalte-heute { background: #e6e9f3; }
.ag-spalte-ohne { margin-top: 1rem; }

.ag-ablage {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    min-height: 80px;
}

.ag-ablage-breit {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ag-ablage-aktiv {
    background: #e9ecf5;
    outline: 2px dashed #3a4e8f;
    outline-offset: -4px;
}

.ag-leer { margin: auto 0; text-align: center; color: #94a3b8; font-size: 0.85rem; }
.ag-ablage-breit .ag-leer { grid-column: 1 / -1; }

.ag-karte {
    border: 1px solid #e2e8f0;
    border-left: 5px solid var(--ag-farbe, #566dba);
    border-radius: 8px;
    /* Ein Hauch der AG-Farbe im Hintergrund — kräftig genug zum Unterscheiden, hell genug,
       dass der Text lesbar bleibt. */
    background: color-mix(in srgb, var(--ag-farbe, #566dba) 7%, #ffffff);
    padding: 0.45rem 0.6rem;
}

.ag-karte-inaktiv { opacity: 0.55; }

/* Die beiden Hinweistexte in leeren Spalten: "keine AG" beim Lesen, "Hierher ziehen" im
   Anordnen-Modus. */
.nur-anordnen { display: none; }
.ag-plan-bearbeitbar .nur-ansehen { display: none; }
.ag-plan-bearbeitbar .nur-anordnen { display: inline; }

/* Ein Eckensymbol, das gerade eingeschaltet ist (z.B. "Anordnen" im AG-Plan): dunkler, damit
   man den geänderten Zustand sieht, ohne die Beschriftung aufklappen zu müssen. */
.karten-aktion.karten-aktion-aktiv {
    background: #1c1c1e;
}

.karten-aktion.karten-aktion-aktiv:hover,
.karten-aktion.karten-aktion-aktiv:focus-visible {
    background: #000;
}

.ag-plan-bearbeitbar .ag-karte {
    cursor: grab;
    /* Ohne das scrollt das Tablet beim Ziehen die Seite statt der Karte. */
    touch-action: none;
    user-select: none;
}

.ag-karte-titel {
    display: block;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
    margin-bottom: 0.2rem;
}

/* Keine Unterstreichung beim Darüberfahren: Die ganze Karte ist klickbar, das zeigt schon der
   leichte Schatten — ein unterstrichener Name wirkte, als sei nur er der Link. */
.ag-karte-titel:hover { text-decoration: none; }
/* Jahrgangsangabe immer in die zweite Zeile — sonst bricht sie je nach Namenslänge mal so,
   mal so um und die Karten wirken unruhig. */
.ag-karte-titel small { display: block; font-weight: 500; color: #475569; }

.ag-karte-zeilen {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-size: 0.8rem;
    color: #475569;
}

.ag-karte-zahl { font-weight: 600; }
.ag-karte-voll { color: #b45309; }
.ag-karte-offen { color: #475fae; font-weight: 600; }

.ag-karte-ausfall { border-left-color: #dc2626 !important; background: #fef2f2 !important; }
.ag-karte-ausfall .ag-karte-titel { text-decoration: line-through; }

.ag-karte-ausfall-text {
    margin: 0.3rem 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b91c1c;
}

.ag-karte-ausfall-text small { font-weight: 500; }
.ag-karte-zieht { opacity: 0.35; }

.ag-karte-geist {
    position: fixed;
    z-index: 2000;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
    transform: rotate(-1deg);
    background: #fff;
}

.ag-info { display: grid; grid-template-columns: 10rem 1fr; gap: 0.4rem 1rem; margin: 0; }
.ag-info dt { font-weight: 700; color: #475569; }
.ag-info dd { margin: 0; }

/* Rückmeldung in der Kopfleiste — zwischen Uhrzeit und Schaltflächen. */
.topbar-meldung[hidden] { display: none; }

.topbar-meldung {
    /* Als Einblendung unter der Kopfzeile statt in ihr: so schiebt sich ein langer Text nicht
       mehr über die Uhr in der Mitte. Umbrechen statt abschneiden. */
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 1.5rem;
    z-index: 20;
    max-width: min(32rem, calc(100vw - 3rem));
    margin: 0;
    padding: 0.55rem 0.9rem;
    border-radius: 10px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
    cursor: pointer;
}

.topbar-meldung-fehler { background: #fee2e2; color: #991b1b; }

/* „· 3 da" hinter der Anmeldezahl — zurückhaltender als die Zahl selbst. */
.ag-karte-da { font-weight: 500; color: #15803d; }

/* Für Mitarbeiter wird nicht zwischen krank und Urlaub unterschieden — sonst verriete schon
   die Farbe den Grund. */
.tafel-magnet-abwesend { border-left-color: #64748b; background: #f1f5f9; }
.tafel-magnet-abwesend .tafel-magnet-status { background: #e2e8f0; color: #475569; }

/* --- Statistiken ---------------------------------------------------------------------- */

/* Balken in den Statistik-Tabellen: Die Zahl steht daneben, der Balken macht auf einen Blick
   sichtbar, welcher Monat bzw. welche AG heraussticht. */
.stat-balken {
    display: inline-block;
    width: 100%;
    min-width: 4rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #eceef2;
    overflow: hidden;
    vertical-align: middle;
}

.stat-balken-fuellung {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #5b6fae;
}

.stat-balken-spalte {
    width: 30%;
    min-width: 6rem;
}

/* Zwei Tabellen nebeneinander (Kinder je Gruppe / je Klasse), hochkant untereinander. */
.stat-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.5rem;
}

/* Die Antwortkarte oben im Personalschlüssel: grün, wenn es aufgeht, rot, wenn nicht. */
.stat-ampel-gut {
    border-left: 6px solid #22c55e;
}

.stat-ampel-schwach {
    border-left: 6px solid #e05252;
}

/* Schwach besuchte AGs in der Statistik: die ganze Zeile rot hinterlegt, davor ein
   Ausrufezeichen mit Sprechblase. Die Farbe ist absichtlich blass — es sind oft mehrere
   Zeilen, und die Tabelle muss lesbar bleiben. */
.stat-zeile-warnung td {
    background: #fdeced;
}

.stat-zeile-warnung td:first-child {
    box-shadow: inset 3px 0 0 #e05252;
}

.stat-warnsymbol {
    color: #c0392b;
    vertical-align: middle;
    margin-right: 0.35rem;
    cursor: help;
}

.stat-warnsymbol .icon-svg {
    width: 17px;
    height: 17px;
    vertical-align: -3px;
}

/* Das rote Feld des Bewertungs-Chips geht auf der roten Zeile unter — deshalb dort weiß. */
.stat-zeile-warnung .badge-negative {
    background: #fff;
}

/* Symbol und AG-Name gehören zusammen und dürfen nicht umbrechen; die Tabelle darf dafür
   breiter werden, sie liegt ohnehin in einem waagerecht scrollenden Feld. */
.stat-ag-tabelle td:first-child,
.stat-ag-tabelle th:first-child {
    white-space: nowrap;
}

/* Emoji-Auswahl im Chat: der Smiley sitzt links neben dem Eingabefeld, das Feld klappt
   darüber auf — wie in den Nachrichten-Apps, die alle kennen. */
.chat-emoji-feld {
    position: relative;
    flex-shrink: 0;
}

.chat-emoji-knopf {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #d9dce1;
    background: #fff;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.chat-emoji-knopf:hover {
    background: #f2f4f7;
}

.emoji-auswahl {
    position: absolute;
    bottom: calc(100% + 0.4rem);
    left: 0;
    z-index: 30;
    width: min(22rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #d9dce1;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

/* Kopf: Suche und Hautfarbe; darunter die Kategorien als Sprungmarken. */
.emoji-kopf {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.emoji-suche {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.emoji-hautfarbe-knopf,
.emoji-hautfarben button,
.emoji-reiter button {
    border: none;
    background: none;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.3rem;
    border-radius: 8px;
    cursor: pointer;
    min-width: 2rem;
    min-height: 2rem;
}

.emoji-hautfarbe-knopf:hover,
.emoji-hautfarben button:hover,
.emoji-reiter button:hover {
    background: #eef1f5;
}

.emoji-hautfarben {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eef1f5;
    padding-bottom: 0.25rem;
}

.emoji-hautfarben[hidden],
.emoji-reiter[hidden] {
    display: none;
}

.emoji-reiter {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eef1f5;
    padding-bottom: 0.25rem;
}

.emoji-liste {
    position: relative;
    height: 16rem;
    overflow-y: auto;
}

.emoji-gruppe-titel {
    margin: 0.4rem 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
}

.emoji-raster {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 0.15rem;
}

.emoji-hinweis {
    margin: 1rem 0;
    text-align: center;
    color: #6b7280;
}

.emoji-auswahl[hidden] {
    display: none;
}

.emoji-eintrag {
    border: none;
    background: none;
    font-size: 1.25rem;
    line-height: 1.6;
    padding: 0;
    border-radius: 8px;
    cursor: pointer;
}

.emoji-eintrag:hover {
    background: #eef1f5;
}

/* Zahl der ausgefallenen Termine in der AG-Statistik — rot, weil ein Ausfall die Besuchsquote
   erklärt und deshalb auffallen soll. */
.stat-ausfall-zahl {
    color: #c0392b;
    font-weight: 600;
}

/* Aktionen in der Sicherungs-Tabelle: nebeneinander statt untereinander. */
.sicherung-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

/* --- Budget-Kacheln ------------------------------------------------------------------- */
/* Dieselben Budgets wie in der Liste, nur mit Verbrauchsbalken: Beim Blick auf die Seite
   soll sofort auffallen, welcher Topf fast leer ist. */
.budget-kachel-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

.budget-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border: 1px solid #e3e5e9;
    border-left: 5px solid #cfd3da;
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.budget-kachel:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.budget-kachel-positiv { border-left-color: #22c55e; }
.budget-kachel-warnung { border-left-color: #f0b429; }
.budget-kachel-negativ { border-left-color: #e05252; }

.budget-kachel-archiviert {
    opacity: 0.65;
}

.budget-kachel-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.budget-kachel-traeger {
    color: #6b6d73;
}

.budget-kachel-betrag {
    display: flex;
    flex-direction: column;
    margin-top: 0.2rem;
}

.budget-kachel-rest {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.budget-kachel-rest-negativ {
    color: #c0392b;
}

.budget-kachel-betrag small,
.budget-kachel-fuss {
    color: #6b6d73;
}

.budget-balken {
    display: block;
    height: 0.55rem;
    border-radius: 999px;
    background: #eceef2;
    overflow: hidden;
}

.budget-balken-fuellung {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.budget-balken-positiv { background: #22c55e; }
.budget-balken-warnung { background: #f0b429; }
.budget-balken-negativ { background: #e05252; }

/* --- Live-Zähler Personalschlüssel (Übersicht) ----------------------------------------- */
.schluessel-stand {
    float: right;
    font-weight: 400;
    font-size: 0.8rem;
    color: #6b6d73;
}

.schluessel-gesamt {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    background: #eaf7ef;
    border-left: 5px solid #22c55e;
    margin-bottom: 0.55rem;
}

.schluessel-gesamt.schluessel-knapp {
    background: #fdeced;
    border-left-color: #e05252;
}

.schluessel-wert {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Zahl, Vorgabe und Warnung stehen linksbündig untereinander. */
.schluessel-haupt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.schluessel-zusatz {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    color: #4a4d52;
    font-size: 0.9rem;
}

/* Zwei kleine Kacheln rechts neben dem Verhältnis: wie viele Mitarbeiter und Kinder gerade da
   sind. */
.schluessel-zaehler {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
}

.schluessel-zaehler-kachel {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 4.6rem;
    padding: 0.25rem 0.6rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(15, 23, 42, 0.08);
    line-height: 1.15;
}

.schluessel-zaehler-kachel strong {
    font-size: 1.2rem;
}

.schluessel-zaehler-kachel small {
    color: #6b6d73;
    font-size: 0.75rem;
}

.schluessel-gruppen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: 0.4rem;
    overflow-y: auto;
}

.schluessel-gruppe {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid #e3e5e9;
    border-left: 4px solid #22c55e;
    border-radius: 10px;
    background: #fff;
}

.schluessel-gruppe.schluessel-knapp {
    border-left-color: #e05252;
    background: #fdeced;
}

.schluessel-gruppe-name {
    font-weight: 600;
    font-size: 0.85rem;
}

.schluessel-gruppe-wert {
    font-size: 1rem;
    font-weight: 700;
}

.schluessel-gruppe-zahlen {
    color: #6b6d73;
}

/* Der Personalschlüssel steht standardmäßig über zwei Spalten: Die Gruppenkacheln stehen dann
   nebeneinander statt untereinander, und die Gesamtzahl hat Platz neben der Beschriftung.
   Ziehen bleibt möglich — wer es schmaler mag, zieht es kleiner. */
/* Zwei Spalten breit, aber nur eine Zeile hoch: Die Gruppen stehen damit nebeneinander in
   einer Reihe, und die Kachel nimmt nicht mehr Platz weg als nötig. */
.schluessel-widget-breit {
    grid-column: span 2;
}

.schluessel-widget-breit .schluessel-gesamt {
    gap: 1.2rem;
}

.schluessel-widget-breit .schluessel-wert {
    font-size: 1.8rem;
}

/* Kompakter Aufbau, damit Gesamtzahl, Gruppen und Verweis in eine Kachelzeile passen und
   nichts scrollen muss. */
.schluessel-widget-breit h2 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
}

.schluessel-titel-link {
    color: inherit;
    text-decoration: none;
}

.schluessel-titel-link:hover {
    text-decoration: underline;
}

/* Kurzes Aufblinken des angesteuerten Bereichs, wenn man aus dem Personalschlüssel-Zähler
   der Übersicht kommt. */
.tafel-bereich-hervorgehoben {
    animation: tafel-blinken 2.5s ease-out;
}

@keyframes tafel-blinken {
    0% { box-shadow: 0 0 0 4px rgba(91,111,174, 0.55); }
    100% { box-shadow: 0 0 0 4px rgba(91,111,174, 0); }
}

/* Die Gruppenkacheln im Zähler sind Links — sie sollen aber wie Kacheln aussehen. */
a.schluessel-gruppe {
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

a.schluessel-gruppe:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Warnhinweis an einem Menüpunkt (z.B. zu knapper Personalschlüssel an "Übersicht"): etwas
   kräftiger als die Zähler daneben, damit er als Warnung und nicht als Anzahl gelesen wird. */
.nav-badge-warnung {
    background: #e05252;
    color: #fff;
    font-weight: 700;
}

/* Leerer Platz an der Stelle des Pfeils, wenn es keinen Folgemonat gibt — sonst rutscht der
   Monatsname aus der Mitte. */
.monatswahl-platzhalter {
    display: inline-block;
    width: 5.5rem;
}


/* --- Aktionen in Tabellenzeilen -------------------------------------------------------- */
/* Bearbeiten und Löschen sind gleich groß und zurückhaltend: In einer Liste mit vielen Zeilen
   soll nicht jede Zeile zwei bunte Knöpfe tragen. Farbe bekommt das Löschen erst beim
   Daraufzeigen. */
.zeile-aktionen {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.zeile-aktionen .inline-form {
    margin: 0;
}

.zeile-aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #c9ced6;
    border-radius: 9px;
    background: #f4f6f9;
    color: #3f4249;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.zeile-aktion:hover {
    background: #e6eaf0;
    border-color: #a9b1bd;
    color: #1f2126;
}

.zeile-aktion .icon-svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

/* Löschen und Speichern tragen ihre Farbe schon im Ruhezustand — man soll sie unterscheiden
   können, ohne erst mit der Maus darüberzufahren. */
.zeile-aktion-loeschen {
    background: #fdf1f1;
    border-color: #eab6b6;
    color: #c0392b;
}

.zeile-aktion-loeschen:hover {
    background: #fadede;
    border-color: #dd8f8f;
    color: #9d2f22;
}

.zeile-aktion-speichern {
    background: #eaf7ef;
    border-color: #a8dcbd;
    color: #1a7a3d;
}

.zeile-aktion-speichern:hover {
    background: #d8f0e3;
    border-color: #7fc9a1;
    color: #16693a;
}

/* Feste Spaltenbreiten: Ohne sie würde die Tabelle beim Umschalten auf die Eingabefelder
   neu umbrechen — die Zeilen sprängen dann seitlich weg, sobald man auf den Stift tippt. */
.zeit-tabelle {
    table-layout: fixed;
    width: 100%;
}

.zeit-tabelle th:nth-child(1) { width: 8.5rem; }   /* Tag */
.zeit-tabelle th:nth-child(3) { width: 6.5rem; }   /* Typ */
.zeit-tabelle th:nth-child(4),
.zeit-tabelle th:nth-child(5) { width: 8rem; }     /* Von / Bis — breit genug auch für die
                                                      12-Stunden-Schreibweise mancher Browser */
.zeit-tabelle th:last-child { width: 6.5rem; }     /* Stift und Mülleimer — breit genug, dass keiner schrumpft */

/* Die Tabelle im Reiter Zeiterfassung hat zwei Spalten mehr (Stunden, Korrigiert). */
.zeit-tabelle-breit th:nth-child(6),
.zeit-tabelle-breit th:nth-child(7) { width: 5.5rem; }

.zeit-tabelle td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Eingabefelder füllen genau ihre Spalte — nicht mehr, sonst schiebt sich die Tabelle. */
.zeit-zeile-bearbeiten input,
.zeit-zeile-bearbeiten select,
.krank-zeile-bearbeiten input,
.krank-zeile-bearbeiten select,
.dienst-zeile-bearbeiten input,
.dienst-zeile-bearbeiten select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.3rem 0.4rem;
    font-size: 0.9rem;
}

/* Archivieren und Löschen in der Kopfzeile einer Akte: neben dem Stand-Chip, mit etwas
   Abstand, damit sie nicht wie ein Teil davon wirken. */
.profil-aktionen {
    margin-left: 0.9rem;
    gap: 0.4rem;
}

/* In der Kopfzeile einer Akte etwas größer als in den Listenzeilen — dort stehen sie allein
   und sollen auf Anhieb zu sehen sein. */
.profil-aktionen .zeile-aktion {
    width: 38px;
    height: 38px;
}

.profil-aktionen .zeile-aktion .icon-svg {
    width: 19px;
    height: 19px;
}

/* Farbpunkt der Gruppe (Einsatztafel) vor einem Namen — dieselbe Farbe, die die Person auch
   im Urlaubskalender hat. */
.gruppen-punkt {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.35rem;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* Angaben, die mehr Platz brauchen (Abteilungen, Adresse), gehen über zwei Spalten statt über
   die ganze Zeile — sonst bleibt der Rest der Zeile leer. */
.info-item-breit {
    grid-column: span 2;
}

/* "hidden" muss hier ausdrücklich gewinnen: display:grid der .info-grid würde es sonst
   überstimmen, und Anzeige und Eingabefelder stünden gleichzeitig da. */
.info-grid[hidden] {
    display: none !important;
}

/* Das Bearbeiten-Feld ist selbst ein Formular — die allgemeine Regel begrenzt Formulare auf
   320 px, hier soll es die ganze Karte füllen wie die Anzeige darüber. */
form.info-grid {
    max-width: none;
    display: grid;
}

form.info-grid[hidden] {
    display: none !important;
}

/* Eingabefelder in der Daten-Karte: gleiche Höhe und Breite wie die Anzeige daneben. */
/* Kästchen behalten ihre eigene Größe — sonst würde die Regel unten sie auf volle Breite
   ziehen und die Beschriftung an den rechten Rand schieben. */
#daten-bearbeiten-feld input[type="checkbox"] {
    width: auto;
    margin: 0;
}

#daten-bearbeiten-feld input:not([type="checkbox"]),
#daten-bearbeiten-feld select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0.15rem 0 0;
    padding: 0.35rem 0.5rem;
}

.daten-aktionen {
    gap: 0.5rem;
    margin-top: 0.3rem;
}

/* Während des Bearbeitens verschwindet der Stift — sonst stünde er über den Feldern, die er
   gerade geöffnet hat. display:flex der Karten-Aktion würde "hidden" sonst überstimmen. */
.karten-aktion[hidden] {
    display: none !important;
}

/* Häkchen und Kreuz in der Karten-Ecke: dieselbe runde Form wie der Stift, nur farbig. */
.karten-aktion-speichern {
    background: #1a7a3d;
}

.karten-aktion-speichern:hover {
    background: #16693a;
}

.karten-aktion-abbrechen {
    background: #6b6d73;
}

.karten-aktion-abbrechen:hover {
    background: #55575c;
}

/* Abteilungen und Soll-Stunden in der Daten-Karte: je Kostenträger ein Block nebeneinander. */
.daten-abteilungen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.3rem;
}

.daten-kostentraeger {
    border: 1px solid #e3e5e9;
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    margin: 0;
}

.daten-kostentraeger legend {
    font-weight: 600;
    padding: 0 0.3rem;
}

/* Der Block mit Abteilungen und Soll-Stunden nimmt die ganze Zeile — die Kostenträger stehen
   dann nebeneinander statt untereinander. */
.daten-abteilungen-feld {
    grid-column: 1 / -1;
}

/* Innerhalb der Karte stehen die Häkchen links vor dem Namen, nicht am rechten Rand. */
.daten-kostentraeger .org-choice {
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    border: none;
    padding: 0.15rem 0;
    background: none;
}

/* --- Zurück-Knopf ---------------------------------------------------------------------- */
/* Ersetzt die bisherigen Textlinks "← Zurück". Rund, mit Rand, damit er als Knopf erkennbar
   ist, aber zurückhaltend genug, dass er dem Inhalt nicht die Schau stiehlt. */
.zurueck-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.9rem;
    border: 1px solid #c9ced6;
    border-radius: 50%;
    background: #fff;
    color: #3f4249;
    text-decoration: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.zurueck-knopf:hover {
    background: #f0f2f8;
    border-color: #5b6fae;
    color: #24346b;
}

.zurueck-knopf .icon-svg {
    width: 20px;
    height: 20px;
}

/* Auf dem Tablet ist der Zurück-Weg ein Formular-Knopf (wegen der Anmeldung) — gleiche Form. */
button.zurueck-knopf {
    padding: 0;
    cursor: pointer;
}

/* --- Offene Punkte in der Seitenleiste ------------------------------------------------- */
/* Ist unter einem Menüpunkt etwas offen (z.B. ein Urlaubsantrag), wird der ganze Punkt leicht
   gelb hinterlegt — der Kreis mit der Zahl sitzt dann nur am betroffenen Unterpunkt. */
.nav-group.nav-gruppe-offen > .nav-group-header {
    background: #fdf3d7;
    border-radius: 10px;
}

.nav-group.nav-gruppe-offen > .nav-group-header .nav-group-label:not(.active) {
    color: #7a5300;
}

.nav-subitem .nav-zaehler,
.nav-group-label .nav-zaehler {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    padding: 0.05rem 0.45rem;
    vertical-align: 1px;
}

/* Eingeklappte Seitenleiste: nur Symbole — die gelbe Hinterlegung bleibt als Hinweis sichtbar. */
.admin-sidebar.collapsed .nav-group.nav-gruppe-offen > .nav-group-header {
    background: #fbe7b0;
}

/* Sprungziel aus der Seitenleiste (z.B. Übersicht → Aufgaben): die Kachel blinkt kurz auf,
   damit man sieht, wohin gesprungen wurde. */
.widget-card:target {
    animation: tafel-blinken 2.5s ease-out;
    scroll-margin-top: 90px;
}

/* Die ganze AG-Karte ist klickbar: Der Titel-Link spannt eine unsichtbare Fläche über die
   Karte. Im Anordnen-Modus ist sie abgeschaltet — dort wird nur verschoben. */
.ag-karte {
    position: relative;
    transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.ag-karte-titel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.ag-plan:not(.ag-plan-bearbeitbar) .ag-karte:hover {
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
    cursor: pointer;
}

.ag-plan-bearbeitbar .ag-karte-titel {
    pointer-events: none;
}

.ag-plan-bearbeitbar .ag-karte-titel::after {
    content: none;
}

.ag-plan-bearbeitbar .ag-karte-titel:hover {
    text-decoration: none;
}

/* --- Auswahl nach der PIN am Tablet: „Nur stempeln“ oder „Mein Profil“ ------------------- */
.auswahl-hinweis {
    color: #55575c;
    margin-top: -0.4rem;
}

.auswahl-geburtstag {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 0.5rem;
    margin: -0.2rem 0 1.2rem;
    padding: 0.55rem 1rem;
    border-radius: 12px;
    background: #fff4dc;
    border: 1px solid #f5d98f;
    color: #7a4b00;
    font-size: 1.15rem;
    font-weight: 600;
}

.auswahl-geburtstag-emoji {
    font-size: 1.6rem;
    line-height: 1;
}

/* Uhr und Stempelstand über den beiden Kacheln. */
.auswahl-kopf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 0.4rem 0 1.2rem;
}

.auswahl-uhr,
.auswahl-stand {
    background: #fff;
    border: 1px solid #e3e5e9;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.auswahl-uhr {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.auswahl-uhr-zeit {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.auswahl-uhr-datum {
    margin-top: 0.3rem;
    color: #55575c;
    font-size: 1.05rem;
}

.auswahl-stand {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-left: 6px solid #22c55e;
}

.auswahl-stand-pause { border-left-color: #f0b429; }
.auswahl-stand-aus { border-left-color: #c7c7cc; justify-content: center; }

.auswahl-stand-titel {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #16a34a;
}

.auswahl-stand-pause .auswahl-stand-titel { color: #b7791f; }
.auswahl-stand-aus .auswahl-stand-titel { color: #6b6d73; font-size: 1rem; }

.auswahl-stand-wofuer {
    font-size: 1.35rem;
    font-weight: 700;
}

.auswahl-stand-wofuer small {
    font-size: 0.9rem;
    font-weight: 500;
    color: #6b6d73;
}

.auswahl-stand-zeile {
    color: #4a4d52;
}

.auswahl-stand-dauer {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.auswahl-stand-dauer small {
    color: #6b6d73;
}

.auswahl-stand-dauer strong {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.auswahl-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

/* Die Kacheln sind Knöpfe in eigenen Formularen — die allgemeine Formularbreite von 320px
   gilt hier nicht. */
.auswahl-form {
    max-width: none;
    display: block;
}

.auswahl-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 13rem;
    padding: 1.5rem 1rem;
    border-radius: 16px;
    background: #fff;
    color: #1c1c1e;
    border: 1px solid #e3e5e9;
    border-top: 6px solid #24346b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s, transform 0.15s;
}

.auswahl-kachel:hover,
.auswahl-kachel:focus-visible {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}

.auswahl-kachel-stempeln { border-top-color: #22c55e; }
.auswahl-kachel-profil { border-top-color: #24346b; }

.auswahl-kachel strong {
    font-size: 1.45rem;
}

.auswahl-kachel small {
    color: #6b6d73;
    font-size: 0.95rem;
}

.auswahl-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: #f0f2f8;
    color: #24346b;
}

.auswahl-kachel-stempeln .auswahl-symbol {
    background: #eaf7ef;
    color: #16a34a;
}

.auswahl-symbol svg {
    width: 2rem;
    height: 2rem;
}

.nur-stempeln-karte {
    max-width: 36rem;
}

/* Zurück zur Startseite am Tablet (PIN, Auswahl, Stempeln, Bestätigung): ein richtiger Knopf,
   groß genug für den Finger, statt eines kleinen unterstrichenen Textes. */
.start-zurueck-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1.3rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d5d8de;
    color: #1c1c1e;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background 0.15s, box-shadow 0.15s;
}

.start-zurueck-knopf:hover,
.start-zurueck-knopf:focus-visible {
    background: #eef1f5;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.1);
}

.start-zurueck-knopf svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Bei nachgetragenen/geänderten Zeiten: wer und wann, eigene Zeile unter dem Inhalt der Zelle. */
.zeit-herkunft {
    display: block;
    color: #6b6d73;
    font-size: 0.78rem;
}

/* Nebenangabe in Tabellenzellen, z. B. das Datum unter „Genehmigt von“. */
.text-gedimmt {
    color: #6b6d73;
    font-size: 0.8rem;
}

/* Gesamtübersicht der Statistiken: Kacheln führen in die ausführliche Auswertung. */
a.kennzahl-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
}

a.kennzahl-link:hover,
a.kennzahl-link:focus-visible {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.stat-uebersicht-kacheln .kennzahl-card h3 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stat-uebersicht-kacheln .kennzahl-card h3 svg {
    width: 1.05rem;
    height: 1.05rem;
    color: #24346b;
}

.stat-rot {
    color: #c0392b;
    font-weight: 600;
}

.stat-hinweise {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-hinweise a {
    color: inherit;
}

.stat-uebersicht-tabelle td:first-child {
    white-space: nowrap;
}

.stat-uebersicht-tabelle td:not(:first-child),
.stat-uebersicht-tabelle th:not(:first-child) {
    text-align: right;
    white-space: nowrap;
}

/* Essensplanung: Überschrift und Sortier-Umschalter in einer Zeile, Zwischenzeilen je Klasse
   bzw. Gruppe. */
.essen-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.essen-kopf h2 {
    margin: 0;
}

body.admin .essen-abschnitt th {
    background: #f1f4f8;
    text-align: left;
    font-size: 0.95rem;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    color: #1c1c1e;
}

.essen-abschnitt .badge {
    margin-left: 0.4rem;
    font-weight: 500;
}

/* Erste Zeile der Kachel: Klasse und Gruppe, rechts daneben das Abhol-Symbol. */
.child-card-klassenzeile {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* --- Träger-Bereich: Karten, Kopfzeile der Akten, Listen und Downloads -------------------- */
.traeger-karte-kopf {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.traeger-karte-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 12px;
    background: #f0f2f8;
    color: #24346b;
    flex-shrink: 0;
}

.traeger-karte-symbol .icon-svg {
    width: 1.4rem;
    height: 1.4rem;
}

.traeger-zahl-symbol {
    color: #6b6d73;
    margin-bottom: 0.15rem;
}

.traeger-zahl-symbol .icon-svg {
    width: 1.05rem;
    height: 1.05rem;
}

.traeger-karte-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.traeger-oeffnen-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: #24346b;
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
}

.traeger-oeffnen-knopf .icon-svg {
    width: 1rem;
    height: 1rem;
    transform: rotate(180deg);
}

.traeger-kopf,
.seiten-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.traeger-kopf .zurueck-knopf,
.seiten-kopf .zurueck-knopf,
.child-profile-header .zurueck-knopf,
.chat-header .zurueck-knopf {
    margin-bottom: 0;
    flex-shrink: 0;
}

.traeger-kopf h1,
.seiten-kopf h1 {
    margin: 0;
}

.traeger-kopf .traeger-intro,
.seiten-kopf-unterzeile {
    margin: 0.15rem 0 0;
}

.seiten-kopf-unterzeile {
    color: #6b6d73;
    font-size: 0.9rem;
}

/* Der Zurück-Pfeil steht in den Profilkarten (Kind, Mitarbeiter) und über Chats direkt neben
   dem Namen — dafür darf das Formular drumherum keinen eigenen Abstand mitbringen. */
.child-profile-header .inline-form,
.chat-header .inline-form,
.seiten-kopf .inline-form {
    margin: 0;
    display: flex;
}

.traeger-kopf-text,
.seiten-kopf-text {
    flex: 1;
    min-width: 12rem;
}

.traeger-kopf-aktionen,
.seiten-kopf-aktionen {
    display: flex;
    gap: 0.5rem;
}

.traeger-akte-bild {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.traeger-akte-initialen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f2f8;
    color: #24346b;
    font-weight: 700;
}

.traeger-tabs .detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.traeger-tabs .detail-tab .icon-svg {
    width: 1rem;
    height: 1rem;
}

.card h2 .icon-svg {
    width: 1.1rem;
    height: 1.1rem;
    vertical-align: -0.15rem;
    color: #24346b;
}

.kennzahl-warnung {
    border-left: 4px solid #e05252;
    background: #fff7f7;
}

.traeger-suche {
    width: 100%;
    max-width: 28rem;
    margin: 0.3rem 0 0.6rem;
    padding: 0.55rem 0.8rem;
    font-size: 0.95rem;
}

.traeger-tabelle td {
    vertical-align: top;
}

.traeger-name {
    font-weight: 600;
    color: #1c1c1e;
    text-decoration: none;
}

.traeger-name:hover {
    color: #24346b;
    text-decoration: underline;
}

.traeger-kontakt a {
    display: inline-flex;
    width: 1.9rem;
    height: 1.9rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe3e8;
    border-radius: 50%;
    color: #3f4249;
    margin-right: 0.2rem;
}

.traeger-kontakt a:hover {
    border-color: #5b6fae;
    color: #24346b;
    background: #f0f2f8;
}

.traeger-kontakt .icon-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.traeger-hinweis {
    max-width: 18rem;
    font-size: 0.85rem;
    color: #55575c;
}

.traeger-summen,
.kind-summen {
    margin: 0.4rem 0 1rem;
}

.traeger-summe,
.kind-summe {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid #eceef1;
    border-radius: 12px;
    background: #fff;
}

.traeger-summe span,
.kind-summe span {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #6b6d73;
}

.traeger-summe .icon-svg,
.kind-summe .icon-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.traeger-summe strong,
.kind-summe strong {
    font-size: 1.2rem;
}

.traeger-summenzeile td {
    font-weight: 700;
    background: #f6f7f9;
}

.traeger-download-titel {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.traeger-download-liste {
    display: flex;
    flex-direction: column;
}

.traeger-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid #eef0f3;
}

.traeger-download:first-child {
    border-top: none;
}

.traeger-download-text {
    display: flex;
    flex-direction: column;
}

.traeger-download-text small {
    color: #6b6d73;
}

.traeger-download-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.traeger-download-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    text-decoration: none;
}

.traeger-download-knopf .icon-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.traeger-eng {
    white-space: nowrap;
}

/* Kopf der Chat-Liste: Überschrift und rundes Plus für eine neue Gruppe in einer Zeile. */
.chat-list-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-list-kopf h2 {
    margin: 0;
}

/* Die Beschriftung fährt nach links heraus, damit sie in der schmalen Liste nicht über den
   Kartenrand hinausragt. */
.chat-list-kopf .karten-aktion {
    position: relative;
    flex-shrink: 0;
}

/* In der schmalen Liste bleibt es beim Kreis — die ausfahrende Beschriftung würde über den
   Kartenrand ragen; die Sprechblase erklärt das Plus. */
.chat-list-kopf .karten-aktion:hover,
.chat-list-kopf .karten-aktion:focus-visible {
    width: 2.25rem;
    padding: 0;
}

.chat-list-kopf .karten-aktion::after {
    content: none;
}

@media (orientation: portrait) and (min-width: 601px) {
    .chat-layout {
        height: calc(100vh - 150px);
    }
}

/* In der schmalen Liste bleibt die Vorschau einzeilig und wird abgeschnitten. */
.chat-row-preview-empty,
.chat-row-preview-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-list-kopf + .new-group-form,
.chat-list-kopf ~ .chat-suche,
.chat-list-kopf ~ input[type="search"] {
    margin-top: 0.6rem;
}

#chat-search {
    margin-top: 0.6rem;
}

/* Einstellungen am Tablet: Angaben der Leitung über den eigenen Daten, dazwischen eine Linie. */
.daten-leitung {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #eceef1;
}

.daten-hinweis {
    margin: 0;
    color: #6b6d73;
}

/* Kleines Personen-Symbol am Feldnamen: Diese Angabe sehen Kollegen im Organigramm. */
.daten-sichtbar {
    display: inline-flex;
    vertical-align: -0.15rem;
    margin-left: 0.2rem;
    color: #24346b;
    cursor: help;
}

.daten-sichtbar .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Kacheln für Stunden und Urlaub: ruhig gehalten — weiße Fläche, feiner Rand. Farbe bekommt
   nur die Zahl selbst, grün bei Plus und rot bei Minus. */
.stunden-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.6rem;
    margin: 0.8rem 0 1rem;
}

.stunden-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid #eceef1;
    border-radius: 10px;
    background: #fff;
}

.stunden-kachel-kopf {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #6b6d73;
}

.stunden-kachel-kopf .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

.stunden-kachel strong {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: #1c1c1e;
}

.stunden-kachel small {
    color: #6b6d73;
    font-size: 0.76rem;
}

.stunden-kachel-plus strong {
    color: #15803d;
}

.stunden-kachel-minus strong {
    color: #b91c1c;
}

/* Eckige Knöpfe in der Kartenecke (Plus, Stift, Diskette): gleiche Größe, nur Symbol. Das
   hidden-Attribut muss gegen display:inline-flex gewinnen, sonst stünden Häkchen und Kreuz
   dauerhaft da. */
.karten-aktionen-ecke-innen .klassen-filter-knopf {
    padding: 0.5rem 0.6rem;
}

.karten-aktionen-ecke-innen .klassen-filter-knopf .icon-svg {
    width: 1rem;
    height: 1rem;
}

.karten-aktionen-ecke-innen [hidden] {
    display: none !important;
}

.klassen-filter-knopf.knopf-speichern {
    border-color: #16a34a;
    color: #15803d;
}

.klassen-filter-knopf.knopf-speichern:hover {
    background: #ecfdf3;
}

/* Profilbild am Avatar im Seitenkopf: Beim Draufzeigen legt sich ein Kamera-Symbol darüber. */
.profil-avatar {
    position: relative;
    flex-shrink: 0;
}

.profil-avatar-knopf {
    position: relative;
    display: block;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.profil-avatar-knopf img.child-profile-avatar {
    object-fit: cover;
}

.profil-avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.45);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.profil-avatar-overlay .icon-svg {
    width: 1.4rem;
    height: 1.4rem;
}

.profil-avatar-knopf:hover .profil-avatar-overlay,
.profil-avatar-knopf:focus-visible .profil-avatar-overlay,
.profil-avatar-knopf.menue-offen .profil-avatar-overlay {
    opacity: 1;
}

/* Am Tablet gibt es kein Draufzeigen — dort steht ein kleines Kamera-Abzeichen dauerhaft unten
   rechts am Bild, damit man sieht, dass es sich antippen lässt. */
@media (hover: none) {
    .profil-avatar-overlay {
        inset: auto -0.15rem -0.15rem auto;
        width: 1.6rem;
        height: 1.6rem;
        opacity: 1;
        background: #24346b;
        border: 2px solid #fff;
    }
    .profil-avatar-overlay .icon-svg {
        width: 0.85rem;
        height: 0.85rem;
    }
}

#profil-avatar-menue .menue-formular {
    margin: 0;
    padding: 0;
    gap: 0;
    max-width: none;
    display: block;
}

#profil-avatar-menue .menue-eintrag {
    width: 100%;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
}

#profil-avatar-menue .menue-eintrag .icon-svg {
    width: 1rem;
    height: 1rem;
}

.menue-eintrag-gefahr {
    color: #b91c1c;
}

/* --- Knöpfe in der Kartenecke — überall gleich ------------------------------------------------
   Plus, Stift, Zahnrad, Diskette & Co. sind eckige, hellblau hinterlegte Knöpfe innen in der
   oberen rechten Ecke, auf einer Linie mit der Überschrift. Speichern ist grün, Abbrechen grau,
   ein eingeschalteter Modus (z. B. „Anordnen“) kräftig blau. Früher waren es blaue Kreise, die
   halb über dem Kartenrand hingen und ihre Beschriftung beim Zeigen herausfahren ließen — die
   Beschriftung steht jetzt als Sprechblase am Knopf (siehe app.js). */
.karten-aktionen-ecke,
.karten-aktion-ecke {
    top: 1.15rem;
    right: 1.25rem;
}

.karten-aktion,
.karten-aktion:hover,
.karten-aktion:focus-visible,
.karten-aktionen-ecke-innen .klassen-filter-knopf {
    position: relative;
    width: auto;
    min-width: 2.35rem;
    height: 2.35rem;
    padding: 0 0.6rem;
    border: 1px solid #c7cee4;
    border-radius: 10px;
    background: #e7eaf4;
    color: #24346b;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.karten-aktion:hover,
.karten-aktion:focus-visible,
.karten-aktionen-ecke-innen .klassen-filter-knopf:hover,
.karten-aktionen-ecke-innen .klassen-filter-knopf.menue-offen {
    background: #dadfee;
    border-color: #c1c9e3;
}

.karten-aktion::before,
.karten-aktion::after,
.karten-aktion:hover::after,
.karten-aktion:focus-visible::after {
    content: none;
}

.karten-aktion .icon-svg,
.karten-aktionen-ecke-innen .klassen-filter-knopf .icon-svg {
    width: 1rem;
    height: 1rem;
}

.karten-aktion.karten-aktion-aktiv,
.karten-aktion.karten-aktion-aktiv:hover,
.karten-aktion.karten-aktion-aktiv:focus-visible {
    background: #24346b;
    border-color: #24346b;
    color: #fff;
}

.karten-aktion:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.karten-aktion.karten-aktion-speichern,
.karten-aktionen-ecke-innen .klassen-filter-knopf.knopf-speichern {
    background: #e7f6ec;
    border-color: #b4e0c3;
    color: #15803d;
}

.karten-aktion.karten-aktion-speichern:hover,
.karten-aktionen-ecke-innen .klassen-filter-knopf.knopf-speichern:hover {
    background: #d3efdd;
}

.karten-aktion.karten-aktion-abbrechen,
.karten-aktionen-ecke-innen #daten-abbrechen {
    background: #f2f3f5;
    border-color: #dcdfe4;
    color: #55575c;
}

.karten-aktion.karten-aktion-abbrechen:hover,
.karten-aktionen-ecke-innen #daten-abbrechen:hover {
    background: #e6e8eb;
}

/* Steht in einer Karte statt einer Überschrift gleich eine Such- oder Filterzeile, rückt sie
   nach links ein, damit die Eckknöpfe daneben Platz haben. */
.karten-aktionen-ecke + :not(h2):not(h3):not(script):not(.karten-aktionen-ecke-innen),
.karten-aktion-ecke + :not(h2):not(h3):not(script):not(.karten-aktionen-ecke-innen) {
    margin-right: 3.2rem;
    max-width: calc(100% - 3.2rem);
    box-sizing: border-box;
}

.karten-aktionen-ecke:has(> :nth-child(2):not([hidden])) + :not(h2):not(h3):not(script) {
    margin-right: 6rem;
    max-width: calc(100% - 6rem);
}

.karten-aktionen-ecke:has(> :nth-child(3):not([hidden])) + :not(h2):not(h3):not(script) {
    margin-right: 8.8rem;
    max-width: calc(100% - 8.8rem);
}

/* Die Überschrift daneben bricht vor den Knöpfen um, statt darunter zu laufen. */
.card-mit-aktion > h2:first-of-type,
.card-mit-aktion > h3:first-of-type {
    padding-right: 7rem;
}

/* Im schmalen Kopf der Chat-Liste bleibt der Knopf wie er ist. */
.chat-list-kopf .karten-aktion {
    position: relative;
}

/* Ein einzelner Eckknopf ohne Gruppe bleibt absolut in der Ecke positioniert. */
.karten-aktion.karten-aktion-ecke {
    position: absolute;
}

/* --- Knöpfe: wieder schlicht weiß wie die Filterknöpfe, alle gleich groß -------------------
   Eckknöpfe (Plus, Stift, Zahnrad, Diskette …) sehen aus wie „Alle Kinder“ oder „Heute“:
   weiß mit grauem Rand, 36 px hoch. Symbolknöpfe sind quadratisch. Stehen sie neben einer
   Such- oder Filterzeile, sitzen sie in dieser Zeile (.karten-kopfzeile /
   .karten-aktionen-zeile) und damit auf einer Linie mit den übrigen Knöpfen. */
.karten-aktion,
.karten-aktion:hover,
.karten-aktion:focus-visible,
.karten-aktionen-ecke-innen .klassen-filter-knopf {
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 0.55rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    color: #3f4147;
    font-size: 1.2rem;
    font-weight: 500;
}

.karten-aktion:hover,
.karten-aktion:focus-visible,
.karten-aktionen-ecke-innen .klassen-filter-knopf:hover,
.karten-aktionen-ecke-innen .klassen-filter-knopf.menue-offen {
    background: #eef1f5;
    border-color: #d7dae0;
}

.karten-aktion.karten-aktion-aktiv,
.karten-aktion.karten-aktion-aktiv:hover,
.karten-aktion.karten-aktion-aktiv:focus-visible {
    border-color: #1d2a58;
    background: #e7eaf4;
    color: #172247;
}

.karten-aktion.karten-aktion-speichern,
.karten-aktionen-ecke-innen .klassen-filter-knopf.knopf-speichern {
    background: #fff;
    border-color: #16a34a;
    color: #15803d;
}

.karten-aktion.karten-aktion-speichern:hover,
.karten-aktionen-ecke-innen .klassen-filter-knopf.knopf-speichern:hover {
    background: #ecfdf3;
}

.karten-aktion.karten-aktion-abbrechen,
.karten-aktionen-ecke-innen #daten-abbrechen {
    background: #fff;
    border-color: #d7dae0;
    color: #3f4147;
}

.karten-aktion.karten-aktion-abbrechen:hover,
.karten-aktionen-ecke-innen #daten-abbrechen:hover {
    background: #eef1f5;
}

/* Reine Symbolknöpfe (Diskette, Filter ohne Text) quadratisch und genauso hoch. */
.klassen-filter-knopf:has(> .icon-svg:only-child) {
    justify-content: center;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 0.55rem;
}

/* Umschalter (Kacheln/Liste, Tag/Woche/Monat) in derselben Höhe. */
.cal-view-toggle {
    height: 2.25rem;
    align-items: stretch;
}

.cal-view-toggle button,
.cal-view-toggle a {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.karten-kopfzeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.karten-kopfzeile > .filter-group,
.karten-kopfzeile > input {
    flex: 1;
    min-width: 12rem;
    margin: 0;
}

.karten-aktionen-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* --- Ausfälle auf der Einsatztafel -------------------------------------------------------
   Leitung: je Grund ein eigenes Feld nebeneinander — Krank rot, Urlaub blau, „Heute kein
   Dienst“ grau. Mitarbeiter: alles zusammen grau als „Nicht verfügbar“. */
.tafel-ausfaelle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    align-items: start;
}

.tafel-ausfaelle .tafel-bereich-ausfall {
    margin-top: 0;
}

.tafel-ausfaelle .tafel-bereich-ausfall .tafel-ablage {
    grid-template-columns: 1fr;
}

.tafel-ausfall-krank { --bereich-farbe: #dc2626; }
.tafel-ausfall-urlaub { --bereich-farbe: #3b5092; }
.tafel-ausfall-kein_dienst,
.tafel-ausfall-nicht-verfuegbar { --bereich-farbe: #64748b; }

.tafel-ausfall-urlaub .tafel-ausfall-hinweis { border-top-color: #dde2f0; }
.tafel-ausfall-kein_dienst .tafel-ausfall-hinweis,
.tafel-ausfall-nicht-verfuegbar .tafel-ausfall-hinweis { border-top-color: #e2e8f0; }

.tafel-magnet-kein_dienst { border-left-color: #64748b; background: #f1f5f9; }
.tafel-magnet-kein_dienst .tafel-magnet-status { background: #e2e8f0; color: #475569; }

/* Die Eckknöpfe sitzen inzwischen innen in der Karte — der frühere Rand rechts für die
   überstehenden Kreise ist nicht mehr nötig. */
.container:has(.card-mit-aktion) { padding-right: 1rem; }

/* Werkzeugzeile über der Einsatztafel: nimmt nur eine schmale Zeile, die Tafel darunter
   bekommt die volle Breite. */
.tafel-werkzeuge {
    margin-bottom: 0.75rem;
}

.tafel-werkzeuge form {
    max-width: none;
}

/* Die Ausfall-Felder (Krank, Urlaub, Heute kein Dienst) kompakter als die Gruppen: kleinere
   Kopfzeile, schmalere Magnete, mehrere Felder nebeneinander. */
.tafel-ausfaelle {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 0.6rem;
    font-size: 0.85rem;
}

.tafel-ausfaelle .tafel-bereich-ausfall {
    border-width: 1.5px;
}

.tafel-ausfaelle .tafel-bereich-kopf {
    padding: 0.3rem 0.55rem;
    font-size: 0.85rem;
}

.tafel-ausfaelle .tafel-ablage {
    padding: 0.35rem;
    gap: 0.25rem;
    min-height: 0;
}

.tafel-ausfaelle .tafel-magnet {
    padding: 0.2rem 0.35rem;
    gap: 0.35rem;
}

.tafel-ausfaelle .tafel-magnet-bild {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
}

.tafel-ausfaelle .tafel-magnet-funktion {
    font-size: 0.68rem;
}

.tafel-ausfaelle .tafel-magnet-status {
    font-size: 0.58rem;
    padding: 0.05rem 0.3rem;
}

.tafel-ausfaelle .tafel-ausfall-hinweis {
    padding: 0.25rem 0.55rem;
    font-size: 0.7rem;
}

/* Am Tablet (ein Feld „Nicht verfügbar“) ebenfalls schmalere Magnete. */
.tafel-ausfall-nicht-verfuegbar .tafel-ablage {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.3rem;
    padding: 0.4rem;
}

.tafel-ausfall-nicht-verfuegbar .tafel-magnet {
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
}

.tafel-ausfall-nicht-verfuegbar .tafel-magnet-bild {
    width: 26px;
    height: 26px;
    font-size: 0.68rem;
}

/* Leitungsebenen im Organigramm bearbeiten: Rolle und Name je Zeile nebeneinander. */
.ebenen-zeile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.ebenen-zeile input {
    width: 100%;
}

.org-werkzeuge {
    gap: 0.5rem;
}

/* Organigramm des ganzen Trägers */
.org-knoten-traeger {
    min-width: 240px;
    background: #1f2937;
    border-color: #1f2937;
}

.org-knoten-traeger .org-knoten-rolle { color: #cbd5e1; }
.org-knoten-traeger .org-knoten-name { color: #fff; }

.org-einrichtung-knoten {
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.org-einrichtung-knoten:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.org-einrichtung-leitung .org-abt-kopf {
    cursor: default;
    gap: 0.15rem;
}

.org-einrichtung-namen {
    font-weight: 600;
    font-size: 0.92rem;
}

.org-einrichtung-abteilungen {
    font-size: 0.8rem;
    color: #6b6d73;
}

.org-gesamt-namen li {
    padding: 0.3rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.org-einrichtungen {
    grid-template-columns: repeat(auto-fit, minmax(300px, 420px));
    justify-content: center;
}

.traeger-organigramm-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.traeger-organigramm-knopf .icon-svg {
    width: 1rem;
    height: 1rem;
}

/* --- Stammlisten in den Einstellungen (Kostenträger, Abteilungen, Gruppen, Funktionen) -----
   Jede Zeile gleich hoch, Felder ohne eigenen Rahmen-Kasten, rechts gleich große weiße
   Symbolknöpfe wie die Eckknöpfe der Karten. Die Aktionsspalte bleibt eine echte
   Tabellenzelle — als Flex-Box verrutschten die Trennlinien der Zeilen. */
.stammliste td {
    vertical-align: middle;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.stammliste td > form:empty {
    display: none;
}

.stammliste .inline-form {
    display: inline-flex;
    margin: 0;
    max-width: none;
}

.stammliste input[type="text"],
.stammliste input[type="number"],
.stammliste select {
    width: 100%;
    max-width: 22rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    font-size: 0.95rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
}

.stammliste th:last-child,
.stammliste td:last-child {
    width: 1%;
    white-space: nowrap;
}

.zeile-knoepfe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.zeile-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    color: #3f4147;
    cursor: pointer;
}

.zeile-knopf:hover,
.zeile-knopf:focus-visible {
    background: #eef1f5;
}

.zeile-knopf .icon-svg {
    width: 1.1rem;
    height: 1.1rem;
}

.zeile-knopf-speichern {
    border-color: #16a34a;
    color: #15803d;
}

.zeile-knopf-speichern:hover,
.zeile-knopf-speichern:focus-visible {
    background: #ecfdf3;
}

/* Ausgeschaltet: Symbol blass, damit man den Zustand schon am Knopf sieht. */
.zeile-knopf-aus {
    color: #a0a4ab;
}

.zeile-knopf-loeschen {
    color: #c0392b;
}

.zeile-knopf-loeschen:hover,
.zeile-knopf-loeschen:focus-visible {
    background: #fdf1f1;
    border-color: #eab6b6;
}

.stamm-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.stamm-status-aktiv {
    background: #e8f6ee;
    color: #1a7a3d;
}

.stamm-status-inaktiv {
    background: #eef0f3;
    color: #6b6d73;
}

/* --- Dienstplan am Tablet -------------------------------------------------------------------
   Dienste nehmen den Finger direkt mit (keine Seitenbewegung darunter). Beim Ziehen folgt ein
   „Geist“ dem Finger und rastet in Spalte und Viertelstunde ein. Die Griffe an Ober- und
   Unterkante sind am Tablet größer und immer sichtbar — dort gibt es kein Darüberfahren. */
.schedule-chip {
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.schedule-chip .chip-resize-handle {
    touch-action: none;
}

.chip-geist {
    position: fixed !important;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.9;
    cursor: grabbing;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

@media (hover: none), (pointer: coarse) {
    .schedule-chip .chip-resize-handle {
        height: 16px;
    }

    .schedule-chip .chip-resize-handle::after {
        content: "";
        position: absolute;
        left: 35%;
        right: 35%;
        height: 4px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.75);
        border-radius: 2px;
    }
}


/* Symbolknöpfe als Verweis (z. B. „Ansehen“) sehen genauso aus wie die Knöpfe. */
a.zeile-knopf {
    text-decoration: none;
    box-sizing: border-box;
}

/* Die älteren grauen Zeilen-Symbole (Zeiterfassung, Personalakte) bekommen dasselbe weiße
   Aussehen — damit gibt es in allen Listen nur noch eine Knopfform. */
.zeile-aktion {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    color: #3f4147;
}

.zeile-aktion:hover {
    background: #eef1f5;
    border-color: #d7dae0;
    color: #1f2126;
}

.zeile-aktion .icon-svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2;
}

.zeile-aktion-loeschen {
    background: #fff;
    border-color: #d7dae0;
    color: #c0392b;
}

.zeile-aktion-loeschen:hover {
    background: #fdf1f1;
    border-color: #eab6b6;
    color: #a93226;
}

.zeile-aktion-speichern {
    background: #fff;
    border-color: #16a34a;
    color: #15803d;
}

.zeile-aktion-speichern:hover {
    background: #ecfdf3;
    border-color: #16a34a;
}

/* In Tabellen ohne Stammlisten-Klasse stehen die Knöpfe in der letzten Spalte rechtsbündig
   und brechen nicht um. */
td > .zeile-knoepfe {
    flex-wrap: nowrap;
}

/* Kacheln im Archiv: der Zurückholen-Knopf sitzt unten rechts in der Kachel. */
.kachel-knoepfe {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
    max-width: none;
}

/* Ablehnen / Stornieren: Kreuz in gedecktem Rot — zurückhaltender als der Mülleimer. */
.zeile-knopf-ablehnen {
    color: #b54708;
}

.zeile-knopf-ablehnen:hover,
.zeile-knopf-ablehnen:focus-visible {
    background: #fff6ed;
    border-color: #f5c9a0;
}

/* Status-Zeile bei den Kindern: Felder ohne eigenen Kasten, gespeichert wird über das Häkchen. */
.status-zeile-formular {
    border: none;
    background: none;
    padding: 0;
}

/* Filterformulare in Tabellen (z. B. E-Mail setzen im Entwicklerbereich) mit Häkchen daneben. */
.filter .zeile-knopf {
    flex-shrink: 0;
}

.status-zeile-formular input[type="text"],
.status-zeile-formular select {
    height: 2.25rem;
    padding: 0 0.6rem;
    font-size: 0.95rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
}

.status-zeile-formular input[type="color"] {
    height: 2.25rem;
    width: 3rem;
    padding: 0.2rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
}

.status-zeile-formular label {
    font-size: 0.9rem;
}

/* Löschen in der Ecke einer Daten-Karte (AG): weißer Knopf, rotes Symbol. */
.karten-aktionen-ecke-innen .klassen-filter-knopf.knopf-loeschen {
    color: #c0392b;
}

.karten-aktionen-ecke-innen .klassen-filter-knopf.knopf-loeschen:hover {
    background: #fdf1f1;
    border-color: #eab6b6;
}

.karten-aktionen-ecke-innen .klassen-filter-knopf[hidden] {
    display: none !important;
}


/* Zeilenknöpfe schrumpfen nie — sonst wird in schmalen Spalten der Stift schmaler als der
   Mülleimer daneben. */
.zeile-aktion,
.zeile-knopf {
    flex-shrink: 0;
}

/* Vor- und Zurückblättern (Monat, Woche, Jahr): dieselben weißen Knöpfe wie überall, gleich
   hoch — vorher war „◀ Vormonat“ ein großer blauer Knopf. */
.monatswahl button,
.monatswahl > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 2.25rem;
    min-width: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    color: #3f4147;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.monatswahl button:hover,
.monatswahl > a:hover {
    background: #eef1f5;
}

/* Kostenträger-Tabelle: Kostenträger fett, Abteilungen darunter eingerückt. */
.kt-tabelle .kt-zeile td {
    font-weight: 600;
    background: #f8f9fb;
}

.kt-tabelle .kt-abteilung td:first-child {
    padding-left: 1.6rem;
}

/* Abweichungen vom Dienstplan in der Tagesübersicht. */
.tage-tabelle .abweichung {
    display: inline-block;
    margin: 0.1rem 0.2rem 0.1rem 0;
    white-space: normal;
    font-weight: 500;
}

/* Urlaub überschneidet sich mit Kollegen derselben Gruppe — gut sichtbar, bevor genehmigt wird. */
.urlaub-warnung {
    margin-top: 0.4rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid #f5c9a0;
    border-radius: 10px;
    background: #fff6ed;
    color: #7a3e00;
    font-size: 0.85rem;
    white-space: normal;
}

.urlaub-warnung-kopf {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.urlaub-warnung-kopf .icon-svg,
.urlaub-warnung-symbol .icon-svg {
    width: 1rem;
    height: 1rem;
    color: #c2410c;
}

.urlaub-warnung ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
}

.urlaub-warnung-symbol {
    display: inline-flex;
    vertical-align: middle;
}

tr.zeile-warnung > td:first-child {
    box-shadow: inset 3px 0 0 #f59e0b;
}

/* --- Vorschau vor dem Herunterladen (app.js / app/vorschau.py) ------------------------------
   Ohne diese Regeln liegt das Vorschaufenster unsichtbar am Seitenende — dann passiert beim
   Klick auf „Als PDF“ scheinbar gar nichts. Ein Test prüft deshalb, dass sie vorhanden sind. */
.vorschau-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.55);
}

.vorschau-overlay[hidden] {
    display: none;
}

body.vorschau-offen {
    overflow: hidden;
}

.vorschau-box {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    height: min(90vh, 1000px);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.vorschau-kopf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem 0.7rem 1.2rem;
    border-bottom: 1px solid #eceef1;
}

.vorschau-titel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vorschau-titel small {
    color: #6b6d73;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vorschau-herunterladen {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
    background: #24346b;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.vorschau-herunterladen:hover {
    background: #1d2a58;
}

.vorschau-herunterladen .icon-svg {
    width: 1rem;
    height: 1rem;
}

.vorschau-schliessen {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: 1px solid #dcdfe4;
    border-radius: 10px;
    background: #fff;
    color: #3f4249;
    font-size: 1.4rem;
    line-height: 1;
}

.vorschau-schliessen:hover {
    background: #eef1f5;
}

.vorschau-inhalt {
    position: relative;
    flex: 1;
    background: #f4f5f7;
}

.vorschau-inhalt iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.vorschau-laedt {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #6b6d73;
}

.vorschau-laedt[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .vorschau-overlay {
        padding: 0;
    }
    .vorschau-box {
        height: 100%;
        border-radius: 0;
    }
    .vorschau-herunterladen span {
        display: none;
    }
}

/* --- Zeiterfassung (Mitarbeiter-Seite) ------------------------------------------------------
   Kopf in einer Zeile: Trichter, Art des Zeitraums, passendes Feld. Die Personenliste hat feste
   Spalten, damit Ist, Soll und Differenz untereinander stehen. */
.zeit-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.8rem;
    padding-right: 3rem;          /* Platz für die Diskette oben rechts */
}

.zeit-zeitraum {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.6rem;
    max-width: none;
    margin: 0;
}

.zeit-zeitraum .zeit-art {
    margin: 0;
}

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

.zeit-feld[hidden] {
    display: none !important;
}

.zeit-feld input {
    height: 2.25rem;
    padding: 0 0.6rem;
    font-size: 0.95rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    box-sizing: border-box;
}

.zeit-feld input[type="number"] {
    width: 6rem;
}

.zeit-feld.monatswahl {
    min-width: 0;
}

.ze-kopf,
.ze-person > summary {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) 6rem 6rem 7rem 7rem;
    align-items: center;
    gap: 0.5rem;
}

.ze-kopf {
    padding: 0 1rem 0.4rem 2.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6d73;
}

.ze-person {
    border: 1px solid #e3e6eb;
    border-radius: 10px;
    margin-bottom: 0.45rem;
    background: #fff;
}

.ze-person[open] {
    border-color: #ccd2e7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.ze-person > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.6rem 1rem 0.6rem 0.9rem;
    font-size: 0.95rem;
}

.ze-person > summary::-webkit-details-marker {
    display: none;
}

.ze-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.ze-name::before {
    content: "▸";
    color: #6b6d73;
    transition: transform 0.15s;
}

.ze-person[open] .ze-name::before {
    transform: rotate(90deg);
}

.ze-zahl {
    font-variant-numeric: tabular-nums;
}

.ze-detail {
    padding: 0.2rem 1rem 1rem;
    border-top: 1px solid #eceef1;
}

.ze-reiter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin: 0.75rem 0;
}

.ze-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: #f3f4f6;
    color: #55575c;
    font-size: 0.86rem;
    font-weight: 500;
    cursor: pointer;
}

.ze-tab:hover {
    background: #e8ebf0;
}

.ze-tab.active {
    background: #24346b;
    color: #fff;
}

.ze-tab.active .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.ze-akte {
    margin-left: auto;
    font-size: 0.85rem;
    white-space: nowrap;
}

.ze-tag {
    white-space: nowrap;
}

.ze-plan span {
    display: block;
    white-space: nowrap;
}

.ze-zeiten {
    table-layout: auto;
}

.ze-von-bis {
    white-space: nowrap;
}

.ze-von-bis input {
    width: 6.5rem;
}

.arbzg-alle {
    margin-top: 0.6rem;
}

@media (max-width: 760px) {
    .ze-kopf {
        display: none;
    }
    .ze-person > summary {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .ze-name {
        grid-column: 1 / -1;
    }
    .ze-zahl[data-label]::before {
        content: attr(data-label) " ";
        color: #6b6d73;
        font-size: 0.8rem;
    }
    .zeit-kopf {
        padding-right: 0;
    }
}

@media (max-width: 900px) {
    .zeit-zeitraum {
        flex-wrap: wrap;
    }
}

/* --- Mitarbeiterprofil auf dem Handy -------------------------------------------------------
   Auf dem Tablet und am Rechner bleibt alles, wie es ist. Auf dem Handy (bis 640 px) weicht die
   Seitenleiste einer Leiste am unteren Rand mit den vier häufigsten Zielen; alles Weitere liegt
   hinter „Mehr“, wo die vollständige Seitenleiste von links hereinklappt. Die Kopfzeile wird
   auf das Nötigste gekürzt, damit oben mehr Platz für den Inhalt bleibt. */
.handy-leiste,
.handy-menue-hintergrund {
    display: none;
}

@media (max-width: 640px) {
    body:is(.mitarbeiter-bereich, .eltern-bereich) {
        /* Platz für die Leiste unten, damit sie nichts vom Seitenende verdeckt. */
        padding-bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
    }

    /* Kopfzeile: Logo, Hilfe, Sprache, Profilbild und Abmelden in einer Zeile, der
       Seitentitel darunter. Uhr, Aktualisieren und der ausgeschriebene Name entfallen —
       das Handy zeigt die Uhrzeit ohnehin, und neu laden geht durch Herunterziehen. */
    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-topbar {
        padding: 0.55rem 0.85rem;
        gap: 0.6rem;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich) .topbar-clock,
    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-topbar-actions > button.admin-topbar-refresh,
    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-avatar-text,
    body:is(.mitarbeiter-bereich, .eltern-bereich) .app-wortmarke span {
        display: none;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-topbar-actions {
        gap: 0.5rem;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-topbar-title-group {
        margin: 0 -0.85rem -0.55rem;
        padding: 0.1rem 0.85rem 0.45rem;
        border-left: none;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-topbar-title {
        font-size: 1.05rem;
        color: #1c1c1e;
    }

    /* Seitenleiste als Schublade von links. Eingeklappt gibt es auf dem Handy nicht — die
       Schublade zeigt immer Symbole und Namen. */
    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-sidebar,
    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-sidebar.collapsed {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(82vw, 300px);
        height: 100%;
        padding: calc(1rem + env(safe-area-inset-top, 0px)) 0.75rem 1rem;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        z-index: 60;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich).handy-menue-offen .admin-sidebar {
        transform: none;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-sidebar.collapsed .admin-tab,
    body:is(.mitarbeiter-bereich, .eltern-bereich) .admin-sidebar.collapsed .nav-icon + * {
        font-size: inherit;
    }

    /* Einklappen und Anordnen sind Tablet-Handgriffe. */
    body:is(.mitarbeiter-bereich, .eltern-bereich) .sidebar-collapse-toggle,
    body:is(.mitarbeiter-bereich, .eltern-bereich) .nav-edit-toggle,
    body:is(.mitarbeiter-bereich, .eltern-bereich) .nav-drag-handle {
        display: none;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich) .handy-menue-hintergrund {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 55;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich).handy-menue-offen .handy-menue-hintergrund {
        opacity: 1;
        pointer-events: auto;
    }

    body:is(.mitarbeiter-bereich, .eltern-bereich).handy-menue-offen {
        overflow: hidden;
    }

    /* Die Leiste unten. */
    body:is(.mitarbeiter-bereich, .eltern-bereich) .handy-leiste {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: rgba(255, 255, 255, 0.97);
        border-top: 1px solid #e2e4e8;
        padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
        backdrop-filter: blur(8px);
    }

    .handy-leiste-knopf {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        min-width: 0;
        padding: 0.35rem 0.1rem;
        border: none;
        border-radius: 10px;
        background: none;
        color: #6b6d73;
        font: inherit;
        font-size: 0.7rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
    }

    .handy-leiste-knopf .icon-svg {
        width: 1.45rem;
        height: 1.45rem;
    }

    .handy-leiste-knopf span:not(.unread-badge) {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .handy-leiste-knopf.active {
        color: #24346b;
    }

    .handy-leiste-knopf .unread-badge {
        position: absolute;
        top: 0.1rem;
        left: calc(50% + 0.45rem);
        margin: 0;
        font-size: 0.65rem;
    }

    /* Eltern: Alle fünf Bereiche passen in die Leiste unten — die Seitenleiste wird auf dem
       Handy deshalb gar nicht gebraucht, auch nicht als Schublade. */
    body.eltern-bereich .admin-sidebar,
    body.eltern-bereich .admin-sidebar.collapsed {
        display: none;
    }

    body.eltern-bereich .page-shell > .container {
        padding: 1rem 0.75rem;
    }

    body.eltern-bereich .card {
        padding: 1rem;
    }

    /* Inhalt: volle Breite, etwas weniger Rand. */
    body.mitarbeiter-bereich .page-shell > .container {
        padding: 1rem 0.75rem;
    }

    body.mitarbeiter-bereich .card {
        padding: 1rem;
    }
}

@media (max-width: 640px) {
    /* Startseite: Kacheln untereinander in ihrer natürlichen Höhe. Die gemerkten Größen vom
       Tablet (zwei Spalten breit, drei Zeilen hoch …) ergeben auf dem Handy keinen Sinn. */
    body.mitarbeiter-bereich .widget-grid[data-widget-storage-key] {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: auto;
    }

    body.mitarbeiter-bereich .widget-grid[data-widget-storage-key] .widget-card {
        grid-column: auto !important;
        grid-row: auto !important;
        height: auto;
        overflow: visible;
    }

    body.mitarbeiter-bereich .widget-resize-handle {
        display: none !important;
    }

    /* ToDos: die Listenauswahl über den Aufgaben statt schmal daneben. */
    body.mitarbeiter-bereich .todo-widget-body {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    body.mitarbeiter-bereich .todo-lists-sidebar {
        flex: none;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #eceef1;
        padding-bottom: 0.5rem;
    }

    /* AG-Anwesenheit: Klasse, Ankunft und Gehzeit stehen in der Kindakte — auf dem Handy
       bleiben die Häkchen, der Name und der Status. */
    body.mitarbeiter-bereich #ag-table th:nth-child(3),
    body.mitarbeiter-bereich #ag-table td:nth-child(3),
    body.mitarbeiter-bereich #ag-table th:nth-child(5),
    body.mitarbeiter-bereich #ag-table td:nth-child(5),
    body.mitarbeiter-bereich #ag-table th:nth-child(6),
    body.mitarbeiter-bereich #ag-table td:nth-child(6) {
        display: none;
    }

    /* Urlaubsanträge: „Genehmigt von“ und Notiz entfallen, Zeitraum, Tage und Status bleiben. */
    body.mitarbeiter-bereich .urlaub-antraege th:nth-child(4),
    body.mitarbeiter-bereich .urlaub-antraege td:nth-child(4),
    body.mitarbeiter-bereich .urlaub-antraege th:nth-child(5),
    body.mitarbeiter-bereich .urlaub-antraege td:nth-child(5) {
        display: none;
    }

    /* Angaben untereinander statt in zwei zu schmalen Spalten. */
    body.mitarbeiter-bereich .info-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Chats: Solange keine Unterhaltung gewählt ist, bleibt die leere Fläche darunter weg. */
    body.mitarbeiter-bereich .chat-conversation-pane:has(.chat-empty-state) {
        display: none;
    }
}

@media (max-width: 640px) {
    /* Chats: Ist eine Unterhaltung offen, bekommt sie den ganzen Bildschirm. Zurück zur Liste
       geht es über „Chats“ in der Leiste unten. */
    body.mitarbeiter-bereich .chat-layout:not(:has(.chat-empty-state)) .chat-list-pane {
        display: none;
    }
}

/* Träger: Krankmeldungen als Wochenansicht — je Tag Mo–Fr eine schmale Spalte, das
   Thermometer markiert die Krankheitstage; der heutige Tag ist leicht hinterlegt. */
.krank-woche .krank-woche-tag {
    text-align: center;
    width: 3rem;
}

.krank-woche .krank-woche-heute {
    background: #f0f2f8;
}

.krank-woche-punkt {
    display: inline-flex;
    color: #c62828;
}


/* Träger-Übersicht: der Personalschlüssel als fünfte Zahl, darunter die Verantwortlichen. */
.traeger-zahlen:has(.traeger-zahl-schluessel) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.traeger-zahl-schluessel .traeger-zahl-wert {
    white-space: nowrap;
}

/* Farben der Zahlen: Wert und Symbol in derselben Farbe. */
.traeger-zahl-gruen .traeger-zahl-wert,
.traeger-zahl-gruen .traeger-zahl-symbol { color: #1a7f37; }
.traeger-zahl-orange .traeger-zahl-wert,
.traeger-zahl-orange .traeger-zahl-symbol { color: #c26a00; }
.traeger-zahl-rot .traeger-zahl-wert,
.traeger-zahl-rot .traeger-zahl-symbol { color: #c0392b; }
.traeger-zahl-blau .traeger-zahl-wert,
.traeger-zahl-blau .traeger-zahl-symbol { color: #3b5092; }

.traeger-verantwortliche {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    border-top: 1px solid #eceef1;
    padding-top: 0.7rem;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
}

.traeger-verantwortliche-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: #6b6b70;
}

.traeger-verantwortliche-titel svg {
    width: 1em;
    height: 1em;
}

.traeger-verantwortlich {
    color: #1c1c1e;
}

.traeger-verantwortlich-rolle {
    font-size: 0.75rem;
    color: #2b3a67;
    background: #f0f2f8;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    margin-left: 0.25rem;
}

/* Träger: Einrichtung, deren Datenbank gerade nicht antwortet. */
.traeger-nicht-erreichbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-left: 4px solid #c0392b;
    color: #7a1f16;
}

.nav-nicht-erreichbar {
    color: #c0392b;
    cursor: default;
}

/* ---- Kita-Oberfläche -------------------------------------------------------------------- */

/* „U3“ an Kachel und Akte: Kinder unter 3 Jahren auf einen Blick. */
.kita-u3 {
    display: inline-block;
    width: auto;
    font-size: 0.68rem;
    font-weight: 700;
    color: #8a4b00;
    background: #fff1d6;
    border-radius: 999px;
    padding: 0 0.4rem;
    vertical-align: 0.1rem;
}

.kita-schlaeft {
    display: inline-flex;
    color: #6076be;
    vertical-align: -0.15rem;
}

.kita-schlaeft svg {
    width: 1rem;
    height: 1rem;
}

/* Tagesprotokoll: je Art eine Zeile mit großen Knöpfen — am Tablet mit einem Finger bedienbar. */
.kita-pflege-formular {
    max-width: none;
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.kita-pflege-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.kita-knoepfe {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.kita-knoepfe .kita-knopf {
    width: auto;
    margin: 0;
}

.kita-pflege-zeile .badge {
    white-space: nowrap;
    flex-shrink: 0;
}

.kita-pflege-titel {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 8rem;
    font-weight: 600;
}

.kita-knopf {
    min-height: 2.6rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: #f0f2f8;
    color: #3b5092;
    border: 1px solid #dadfee;
    font-weight: 600;
}

.kita-knopf:hover {
    background: #dadfee;
}

.kita-pflege-mehr summary {
    cursor: pointer;
    color: #6b6d73;
    font-size: 0.9rem;
}

.kita-pflege-mehr[open] {
    display: grid;
    gap: 0.3rem;
    max-width: 22rem;
}

.kita-beobachtung {
    border-top: 1px solid #eceef1;
    padding: 0.7rem 0;
}

.kita-beobachtung p {
    margin: 0.35rem 0 0;
    white-space: pre-line;
}

.kita-beobachtung-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
}

.kita-beobachtung-loeschen {
    margin-left: auto;
}

.kita-bereich {
    font-size: 0.75rem;
    color: #2b3a67;
    background: #f0f2f8;
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

.kita-zeiten {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.text-warnung {
    color: #c0392b;
    font-weight: 600;
}

/* ---- Termin-Erinnerungen und Serientermine ---------------------------------------------- */

/* Anstehende Erinnerungen stehen oben auf der Übersicht — auffällig, aber ohne Rot: Es ist
   ein Hinweis, kein Fehler. */
.erinnerungs-banner {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.erinnerung-zeile {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    border-left: 4px solid #c26a00;
    background: #fff7e8;
    color: #7a4500;
}

.erinnerung-symbol {
    display: inline-flex;
    color: #c26a00;
}

.erinnerung-text {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
}

.erinnerung-wann {
    font-size: 0.9rem;
    opacity: 0.85;
}

.erinnerung-link {
    margin-left: auto;
    color: #7a4500;
    font-weight: 600;
    white-space: nowrap;
}

/* Kleines Kreis-Symbol hinter dem Titel: dieser Termin gehört zu einer Reihe. */
.termin-serie {
    display: inline-flex;
    color: #6b6d73;
    vertical-align: -0.15rem;
}

.termin-serie svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* „Eltern mit erinnern“ steht neben der Auswahl der Vorlaufzeit — ohne Umbruch mitten im Wort. */
.qe-eltern-erinnern {
    white-space: nowrap;
}

/* ---- Handkasse (Kassenbuch) -------------------------------------------------------------- */

.kassenbuch .kassen-betrag {
    text-align: right;
    white-space: nowrap;
}

.kassenbuch .kassen-anfang td,
.kassenbuch .kassen-summe td {
    background: #f7f8fa;
}

.kassenbuch .kassen-summe td {
    border-top: 2px solid #e2e4e8;
}

/* Der Kassensturz ist keine Bewegung, sondern eine Feststellung — deshalb zurückhaltender. */
.kassenbuch .kassen-zaehlung td {
    background: #fbfbfd;
    color: #55575c;
}

/* Zählprotokoll beim Kassensturz: schmale Tabelle mit Stückzahl und Zeilensumme. */
.zaehlprotokoll {
    width: 100%;
    margin-bottom: 0.5rem;
}

.zaehlprotokoll td,
.zaehlprotokoll th {
    padding: 0.15rem 0.4rem;
    font-size: 0.9rem;
}

.zaehlprotokoll input {
    width: 5rem;
    margin: 0;
    text-align: right;
}

.zaehlprotokoll tfoot td {
    border-top: 2px solid #e2e4e8;
    padding-top: 0.4rem;
}

.zaehl-details summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: #6b6d73;
}

.zaehl-details ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: #55575c;
}

/* Laufende Nummer im Kassenbuch: gleich breit, damit sie untereinander steht wie im Ordner. */
.kassenbuch .kassen-nummer {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #55575c;
}

/* Handkasse: die fünf Kennzahlen oben in einer Reihe — etwas kompakter als die übrigen
   Kacheln. Wird es zu schmal, rutschen sie in die nächste Zeile statt sich zu quetschen. */
.kassen-summen {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.6rem;
}

.kassen-summen .kind-summe {
    padding: 0.5rem 0.75rem;
    min-width: 0;
}

.kassen-summen .kind-summe span {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kassen-summen .kind-summe strong {
    font-size: 1.05rem;
    white-space: nowrap;
}

/* ---- Aufklappbare Mehrfachauswahl (Termin-Fenster: Mitarbeiter, Eltern) ------------------ */

.qe-auswahl {
    flex: 1;
    min-width: 0;
}

.auswahl-dropdown {
    width: 100%;
}

.auswahl-dropdown-knopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    cursor: pointer;
    list-style: none;
    font-size: 0.95rem;
}

.auswahl-dropdown-knopf::-webkit-details-marker {
    display: none;
}

.auswahl-dropdown-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auswahl-dropdown-aktiv .auswahl-dropdown-knopf {
    border-color: #5b6fae;
}

.auswahl-dropdown-pfeil {
    display: inline-flex;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.auswahl-dropdown[open] .auswahl-dropdown-pfeil {
    transform: rotate(180deg);
}

.auswahl-dropdown-panel {
    margin-top: 0.4rem;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
}

.auswahl-dropdown-suche {
    width: 100%;
    margin: 0 0 0.4rem;
}

.auswahl-dropdown-liste {
    max-height: 14rem;
    overflow-y: auto;
}

.auswahl-dropdown-gruppe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.4rem;
    padding: 0.2rem 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.75;
}

.auswahl-dropdown-alle {
    padding: 0 0.5rem;
    min-height: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    background: transparent;
    color: #34467f;
    border: none;
    cursor: pointer;
}

.auswahl-dropdown-eintrag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.3rem;
    border-radius: 6px;
    cursor: pointer;
}

.auswahl-dropdown-eintrag:hover {
    background: rgba(91,111,174, 0.12);
}

.auswahl-dropdown-eintrag input {
    width: auto;
    margin: 0;
}

.auswahl-dropdown-fuss {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.auswahl-dropdown-fuss button {
    width: auto;
    margin: 0;
    padding: 0.35rem 0.8rem;
}

/* Erinnerung und „Eltern mit erinnern" teilen sich eine Zeile — die Auswahl darf dabei nicht
   abgeschnitten werden; reicht der Platz nicht, rutscht der Haken darunter. */
#event-modal .qe-row:has(.qe-select-erinnerung) {
    flex-wrap: wrap;
}

.qe-select-erinnerung {
    flex: 1 1 11rem;
    min-width: 11rem;
}

/* --- Trefferflächen ---------------------------------------------------------------------------
   Apple empfiehlt für Finger mindestens 44 × 44 pt. Kleine Knöpfe behalten ihr Aussehen, bekommen
   aber eine unsichtbare Fläche von mindestens 44 × 44 px um ihre Mitte herum — so trifft man sie
   am Tablet auch mit dem Daumen im Vorbeigehen. */
.child-card-check,
.child-card-status-knopf,
.admin-topbar-refresh,
.sprachschalter-knopf,
.cal-nav-btn,
.status-legende-eintrag,
.password-toggle,
.klassen-filter-knopf,
.zurueck-knopf,
.todo-list-action-mini {
    position: relative;
}

.child-card-check::after,
.child-card-status-knopf::after,
.admin-topbar-refresh::after,
.sprachschalter-knopf::after,
.cal-nav-btn::after,
.status-legende-eintrag::after,
.password-toggle::after,
.klassen-filter-knopf::after,
.zurueck-knopf::after,
.todo-list-action-mini::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
}

/* Der Sprachschalter besteht aus zwei Knöpfen direkt nebeneinander: dort nur in die Höhe
   erweitern, dafür ist jeder Knopf selbst 44 px breit. */
.sprachschalter-knopf {
    min-width: 44px;
}

.sprachschalter-knopf::after {
    width: 100%;
}

/* Am Tablet (Finger statt Maus): die Einträge der Seitenleiste 44 px hoch. Mit der Maus am
   Rechner bleiben sie kompakt. */
@media (pointer: coarse) {
    .admin-sidebar .admin-tab,
    .sidebar-collapse-toggle,
    .nav-edit-toggle {
        min-height: 44px;
    }
}

/* --- Bewegung reduzieren ----------------------------------------------------------------------
   Wer am Gerät „Bewegung reduzieren“ eingeschaltet hat (iPad: Einstellungen → Bedienungshilfen →
   Bewegung), bekommt keine Animationen: Menüs und Fenster erscheinen sofort, Farben wechseln ohne
   Überblenden. Die Dauer wird fast auf null gesetzt statt ganz abgeschaltet, damit Skripte, die
   auf das Ende eines Übergangs warten, trotzdem weiterlaufen. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Beim Anordnen wackeln die Kacheln sonst — ohne Bewegung zeigt ein gestrichelter Rand,
       dass sie jetzt verschoben werden können. */
    .widget-grid.edit-mode .widget-card {
        animation: none !important;
        outline: 2px dashed #34467f;
        outline-offset: 2px;
    }

    /* Der angesteuerte Bereich der Tafel blinkt nicht auf, sondern bekommt für dieselben
       2,5 Sekunden einen ruhigen Rahmen. */
    .tafel-bereich-hervorgehoben {
        animation: none !important;
        box-shadow: 0 0 0 4px rgba(52,70,127, 0.55);
    }
}

/* Einstellungen → Darstellung */
.darstellung-wahl {
    display: inline-flex;
    margin: 0.25rem 0 0.6rem;
}

.darstellung-hinweis {
    margin: 0;
    font-size: 0.85rem;
    color: #6b6d73;
}

/* Überschrift innerhalb der Daten-Karte: trennt Arbeit von Privat. Sie läuft über die ganze
   Breite des Rasters, damit die Felder darunter wieder normal nebeneinander stehen. */
.info-abschnitt {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.4rem 0 -0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6d73;
}

/* Ab der zweiten Überschrift eine feine Linie darüber — die erste steht schon unter der
   Karten-Überschrift. */
.info-abschnitt + * ~ .info-abschnitt {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #eceef1;
}

.info-abschnitt small {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* „Urlaub beantragen“ im Urlaubs-Hinweis: ein Knopf, der wie der Verweis der Termin-Erinnerung
   aussieht — am Tablet wird per Formular gewechselt, deshalb kein einfacher Link. Groß genug
   für den Finger. */
.erinnerung-knopf {
    min-height: 44px;
    padding: 0 0.25rem;
    border: none;
    background: none;
    color: #7a4500;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.erinnerung-link.inline-form {
    display: inline-flex;
}

/* Auf dem Handy rutscht „Urlaub beantragen“ unter den Text, statt ihn in eine schmale Spalte
   zu quetschen. */
.erinnerung-zeile:has(.erinnerung-knopf) {
    flex-wrap: wrap;
}

.erinnerung-zeile:has(.erinnerung-knopf) .erinnerung-text {
    flex: 1 1 16rem;
}

/* Einsatzplan: Name eines bestehenden Bereichs — fest, nur zur Anzeige. */
.bereich-name-fest {
    display: grid;
    gap: 0.2rem;
    margin: 0 0 0.75rem;
}

.bereich-name-fest[hidden] {
    display: none;
}

/* --- Schreibwerkzeug (Kinderakte) ----------------------------------------------------------
   Werkzeugleiste wie in Word über einer Schreibfläche, die wie ein Blatt aussieht. */
.schreibwerkzeug {
    border: 1px solid #d7dae0;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 0.75rem;
    overflow: visible;
}

.schreibwerkzeug:focus-within {
    border-color: #24346b;
    box-shadow: 0 0 0 3px rgba(36,52,107, 0.15);
}

.sw-leiste {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid #e4e6ea;
    border-radius: 12px 12px 0 0;
    background: #f6f7f9;
}

.sw-leiste[hidden] {
    display: none;
}

.sw-gruppe {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    padding-right: 0.6rem;
    border-right: 1px solid #dcdfe4;
}

.sw-gruppe:last-child {
    border-right: none;
    padding-right: 0;
}

.sw-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.4rem;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #1c1c1e;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
}

.sw-knopf:hover {
    background: #e8ebf0;
}

.sw-knopf.sw-an {
    background: #e4e8f3;
    border-color: #c1c9e3;
    color: #1d2a58;
}

@media (pointer: coarse) {
    .sw-knopf {
        min-width: 2.75rem;
        height: 2.75rem;
    }
}

.sw-absatz {
    height: 2.1rem;
    padding: 0 0.5rem;
    border: 1px solid #d7dae0;
    border-radius: 7px;
    background: #fff;
    font-size: 0.9rem;
    margin: 0;
    width: auto;
}

.sw-farb-a {
    font-weight: 700;
    border-bottom: 3px solid #d70015;
    padding: 0 0.15rem;
}

.sw-marker {
    font-weight: 600;
    background: #fff27a;
    padding: 0 0.2rem;
    border-radius: 3px;
}

.sw-ausricht {
    display: inline-block;
    width: 1rem;
    height: 0.8rem;
    background:
        linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) var(--x, 0) 50% / 60% 2px no-repeat,
        linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
}

.sw-mitte { --x: 50%; }
.sw-rechts { --x: 100%; }

.sw-radierer sub {
    font-size: 0.6em;
    color: #d70015;
}

.sw-palette-halter {
    position: relative;
}

.sw-palette {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1.9rem);
    gap: 0.3rem;
    padding: 0.45rem;
    border: 1px solid #d7dae0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.sw-palette[hidden] {
    display: none;
}

.sw-farbe {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    cursor: pointer;
}

.sw-farbe-keine {
    background: #fff;
    color: #55575c;
    font-size: 1rem;
}

.sw-blatt {
    min-height: 12rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    outline: none;
    line-height: 1.5;
    font-size: 1rem;
    border-radius: 0 0 12px 12px;
}

.sw-blatt[hidden] {
    display: none;
}

.sw-blatt:empty::before {
    content: attr(data-platzhalter);
    color: #8e9096;
    pointer-events: none;
}

.sw-rohtext {
    width: 100%;
    border: none;
    border-radius: 12px;
    box-sizing: border-box;
}

/* Formatierter Text — beim Schreiben und später in der Akte gleich. */
.sw-blatt h2, .akten-text-html h2 { font-size: 1.25rem; margin: 0.6rem 0 0.35rem; }
.sw-blatt h3, .akten-text-html h3 { font-size: 1.08rem; margin: 0.5rem 0 0.3rem; }
.sw-blatt p, .akten-text-html p { margin: 0 0 0.45rem; }
.sw-blatt ul, .sw-blatt ol, .akten-text-html ul, .akten-text-html ol { margin: 0.2rem 0 0.5rem; padding-left: 1.5rem; }
.sw-blatt blockquote, .akten-text-html blockquote {
    margin: 0.4rem 0;
    padding: 0.4rem 0.8rem;
    border-left: 4px solid #24346b;
    background: #f5f6fa;
    border-radius: 0 8px 8px 0;
}
.sw-blatt table, .akten-text-html table {
    border-collapse: collapse;
    margin: 0.4rem 0 0.6rem;
    min-width: 60%;
}
.sw-blatt th, .sw-blatt td, .akten-text-html th, .akten-text-html td {
    border: 1px solid #c9ccd2;
    padding: 0.3rem 0.5rem;
    min-width: 5rem;
    text-align: left;
    vertical-align: top;
}
.sw-blatt th, .akten-text-html th { background: #f1f3f6; font-weight: 600; }
.sw-blatt hr, .akten-text-html hr { border: none; border-top: 1px solid #c9ccd2; margin: 0.7rem 0; }
.sw-blatt a, .akten-text-html a { color: #24346b; text-decoration: underline; }

/* Formatierte Einträge brauchen das Zeilen-Beibehalten des Klartexts nicht — sonst ergäben
   die Zeilenumbrüche im HTML zusätzliche Leerzeilen. */
.akten-text.akten-text-html {
    white-space: normal;
}

.akten-text-html > :last-child {
    margin-bottom: 0;
}

/* Formulare sind im Programm schmal gehalten (320 px) — das Schreibwerkzeug braucht die
   ganze Breite der Karte, wie ein Blatt Papier. */
form.sw-formular {
    max-width: none;
}

form.sw-formular > button[type="submit"] {
    align-self: flex-start;
}

/* Einsatztafel: Wer nur vertretungsweise in einer anderen Gruppe hängt, trägt ein Schildchen
   in der Farbe seiner Stammgruppe. */
.tafel-magnet-vertretung {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    border: 1.5px solid var(--stamm-farbe, #6b6d73);
    color: var(--stamm-farbe, #6b6d73);
    background: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* AG-Seite: Kinder anmelden — Auswahlliste und Knopf nebeneinander. */
.ag-kinder-anmelden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    max-width: none;
    margin-bottom: 0.9rem;
}

.ag-kinder-anmelden .auswahl-dropdown {
    min-width: 18rem;
}

/* Eltern-Zugangslink zum Weitergeben (das Programm verschickt keine E-Mails). */
.zugangslink-kasten {
    margin: 0.5rem 0 1rem;
    padding: 0.8rem 1rem;
    border-left: 4px solid #24346b;
    border-radius: 10px;
    background: #f5f6fa;
}

.zugangslink-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.zugangslink-zeile input {
    flex: 1 1 22rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

/* Kassenbuch der Handkasse: sieben ruhige Spalten statt elf. Beträge mit festen Ziffernbreiten,
   damit die Kommas untereinander stehen; Einzahlungen grün, Ausgaben rot. */
.kassenbuch-kompakt td,
.kassenbuch-kompakt th {
    vertical-align: middle;
}

.kassenbuch-kompakt .kassen-betrag,
.kassenbuch .kassen-betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kassenbuch-kompakt .kassen-nummer {
    color: #6b6d73;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kassenbuch-kompakt .kassen-datum {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kassenbuch-kompakt .kassen-zweck {
    width: 100%;
}

.kassen-zweck-text {
    display: block;
    font-weight: 500;
}

.kassen-zweck-zusatz {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    font-size: 0.8rem;
}

.kassen-zweck-zusatz:empty {
    display: none;
}

.kassen-budget {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #f0f2f8;
    color: #24346b;
    text-decoration: none;
}

.kassen-budget:hover {
    background: #e4e8f3;
}

.kassen-budget .icon-svg {
    width: 0.8rem;
    height: 0.8rem;
}

.kassen-rein {
    color: #15803d;
    font-weight: 600;
}

.kassen-raus {
    color: #c0392b;
    font-weight: 600;
}

.kassen-pfeil {
    display: inline-block;
    margin-right: 0.3rem;
    font-size: 0.8em;
    opacity: 0.8;
}

.kassenbuch-kompakt .kassen-bestand {
    color: #3f4147;
}

.kassenbuch-kompakt .kassen-beleg {
    text-align: center;
}

.kassenbuch-kompakt tbody tr.kassen-zeile:nth-child(even) {
    background: #fafbfc;
}

.kassenbuch-kompakt .kassen-anfang td {
    background: #f6f7f9;
    color: #55575c;
}

.kassen-summe-teile {
    display: inline-flex;
    gap: 0.9rem;
    margin-left: 0.9rem;
    font-size: 0.85rem;
}

/* Einsatztafel: Wird es eng, rutscht der Status unter den Namen, statt den Namen in eine
   Buchstabenspalte zu quetschen. Das Vertretungs-Schildchen steht unter dem Namen. */
.tafel-magnet {
    flex-wrap: wrap;
}

.tafel-magnet-text .tafel-magnet-vertretung {
    align-self: flex-start;
    margin: 0.2rem 0 0;
}

/* Essensplanung: Filter und Sortierung nebeneinander, Ja/Nein-Knopf je Kind bzw. Person. */
.essen-umschalter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.essen-kopf .badge {
    margin-left: 0.4rem;
    vertical-align: middle;
    font-size: 0.8rem;
}

body.admin .essen-knopf {
    min-width: 5.5rem;
    padding: 0.35rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.admin .essen-knopf.essen-ja {
    background: #e3f4e8;
    color: #1d6b35;
    border: 1px solid #9fd3ae;
}

body.admin .essen-knopf.essen-nein {
    background: #f4f5f7;
    color: #6b7280;
    border: 1px solid #d5d9e0;
}

.essen-geschlossen {
    color: #9a5b00;
}

.essen-details {
    margin-top: 0.75rem;
}

.essen-details summary {
    cursor: pointer;
    color: #4b5563;
}

/* Stempelleiste der Leitung oben in der Übersicht. */
.leitung-stempel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.leitung-stempel-stand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.leitung-stempel-knoepfe form {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
}

.leitung-stempel-knoepfe button,
.leitung-stempel-knoepfe select {
    width: auto;
    margin: 0;
}

.ferien-schnellwahl button {
    width: auto;
    margin: 0;
}

.schluessel-gruppe-plan {
    color: #9a5b00;
    font-size: 0.7rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.schluessel-gruppe-plan svg {
    width: 0.8rem;
    height: 0.8rem;
    flex: none;
}

.leitung-stempel-nachtragen {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-weight: 500;
}

.leitung-stempel-nachtragen:hover {
    background: rgba(127, 127, 127, 0.12);
}

/* Mitlaufende Zähler (Arbeitszeit, Pause) — Stempelleiste der Leitung und Stempelseite am Tablet. */
.leitung-stempel-stand {
    flex-wrap: wrap;
}

.stempel-zaehler-gruppe {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-left: 0.5rem;
}

.stempel-zaehler-zeile .stempel-zaehler-gruppe {
    margin-left: 0;
}

.stempel-zaehler {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #e7eaf4;
    font-variant-numeric: tabular-nums;
}

.stempel-zaehler strong {
    font-size: 1.05rem;
}

.stempel-zaehler small {
    color: #55575c;
}

.stempel-zaehler svg {
    width: 0.95rem;
    height: 0.95rem;
}

/* Pause im Honiggelb des Logos (#ffc93c), aufgehellt — dunkles Honigbraun als Schrift. */
.stempel-zaehler-pause {
    background: #ffe7a0;
    color: #5c3d00;
}

.stempel-zaehler-pause small {
    color: #5c3d00;
}

/* Essensplanung: Eltern-Anmeldung am Kind, Ferien-Anmeldungen je Tag. */
.essen-anmeldung-info {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: #55575c;
}

.essen-anmeldung-info svg {
    width: 0.85rem;
    height: 0.85rem;
}

.ferien-tage-summen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
}

.ferien-tag-summe {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.6rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid #e2e4e8;
    border-radius: 8px;
    background: #f6f7f9;
    font-variant-numeric: tabular-nums;
}

.ferien-tag-summe small {
    color: #6b6d73;
    font-size: 0.7rem;
}

.ferien-essen-bearbeiten summary {
    cursor: pointer;
    list-style: none;
}

.ferien-essen-bearbeiten summary::-webkit-details-marker {
    display: none;
}

.ferien-tage-wahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.4rem 0.75rem;
    margin-top: 0.5rem;
    min-width: 16rem;
}

.ferien-tage-wahl label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.85rem;
}

.ferien-tage-wahl select {
    width: 100%;
}

.ferien-schnellwahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.ferien-tage-wahl button {
    grid-column: 1 / -1;
    justify-self: start;
}

/* Eltern-Portal: Abstand zwischen den Anmeldungen (Schuljahr, je Ferien). */
.essen-anmeldung-formular {
    margin-bottom: 1.5rem;
}

#mensa h3 {
    margin-top: 1.5rem;
}

/* Einsatzplan: aus „Heute kein Dienst“ ziehbar; wer spontan einspringt, bekommt ein Kennzeichen. */
.tafel-magnet[data-einspringen] {
    cursor: grab;
}

.tafel-magnet-status.tafel-magnet-eingesprungen {
    background: #ffe7a0;
    color: #5c3d00;
}

/* AG: Kinder hinzufügen über das Plus — Suche und Liste nach Klasse. */
.ag-kinder-fenster {
    width: min(32rem, 94vw);
}

.ag-kinder-suche {
    width: 100%;
    margin-bottom: 0.5rem;
}

.ag-kinder-liste {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid rgba(127, 127, 127, 0.25);
    border-radius: 10px;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.75rem;
}

/* Handkasse: Nummer als „2026-“ plus Eingabefeld. */
.kassen-nummer-eingabe {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.kassen-nummer-eingabe input {
    max-width: 7rem;
}

.kassen-nummerierung {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(127, 127, 127, 0.25);
}

/* Ferienkalender: Kopf je Tag mit Zahl der Eingetragenen, geschlossene Tage grau. */
.ferien-kopf-zahl,
.ferien-kopf-zu {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.3rem;
    font-weight: 500;
    color: #6b6d73;
}

.ferien-kopf-zahl svg {
    width: 0.8rem;
    height: 0.8rem;
}

.ferien-tag-zu {
    background: repeating-linear-gradient(135deg, rgba(127, 127, 127, 0.06) 0 8px, rgba(127, 127, 127, 0.12) 8px 16px);
}

.ferien-chip-eigen {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.ferien-chip-loeschen {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
}

.ferien-chip-loeschen button {
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
}

.ferien-wochenwahl {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Titel „Leitung“ bzw. „Verwaltung“ an Kachel und Personalakte. */
.zugangs-titel {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: #e7eaf4;
    color: #24346b;
    font-size: 0.7rem;
    font-weight: 600;
    vertical-align: middle;
    letter-spacing: 0.01em;
}

.employee-tile .zugangs-titel {
    margin: 0.15rem auto 0;
}

/* Eigener Status (außer Haus …) in der Stempelleiste und an Kacheln/Magneten. */
.status-leiste {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.status-leiste form {
    margin: 0;
}

.status-leiste button,
.status-leiste select,
.status-leiste input {
    width: auto;
    margin: 0;
}

.status-kennzeichen {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: #e7eaf4;
    color: #24346b;
    font-weight: 600;
    font-size: 0.9rem;
}

.status-kennzeichen svg {
    width: 0.95rem;
    height: 0.95rem;
}

.status-auswahl {
    position: relative;
}

.status-auswahl > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.8rem;
    border-radius: 10px;
    border: 1px solid rgba(127, 127, 127, 0.35);
}

.status-auswahl > summary::-webkit-details-marker {
    display: none;
}

.status-formular {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 15rem;
    padding: 0.8rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.status-formular label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}

.status-formular input,
.status-formular select {
    width: 100%;
}

.tafel-magnet-status.tafel-magnet-ausser-haus {
    background: #e7eaf4;
    color: #24346b;
}

.employee-tile .status-klein {
    color: #24346b;
    font-weight: 600;
}

/* „Anzeigen bis“ bei neuen Ankündigungen: Datum und Uhrzeit nebeneinander. */
.ankuendigung-bis {
    display: flex;
    gap: 0.5rem;
}

.ankuendigung-bis input {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

.ankuendigung-bis input[type="time"] {
    flex: 0 1 8rem;
}

.ankuendigung-ablauf {
    white-space: nowrap;
}

/* „für Kollegen sichtbar“ unter einem Feld in „Meine Daten“ am Tablet. */
.daten-freigabe {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: #55575c;
    cursor: pointer;
}

.daten-freigabe input {
    width: auto;
    margin: 0;
}

/* Mitarbeiter anlegen: Wahl „Neu eingestellt“ / „Aus dem Bestand“ als zwei Kacheln. */
.neu-art-wahl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.neu-art {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d9dce1;
    border-radius: 10px;
    cursor: pointer;
    margin: 0;
}

.neu-art input {
    width: auto;
    margin: 0;
    grid-row: span 2;
}

.neu-art small {
    grid-column: 2;
    color: #6b7280;
}

.neu-art:has(input:checked) {
    border-color: #24346b;
    box-shadow: inset 0 0 0 1px #24346b;
    background: #eef1f8;
}

.neu-zweispaltig {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0 0.75rem;
}

.neu-bestand[hidden] {
    display: none;
}

/* Löschen bei Serien im Termin-/Buchungsfenster: drei Knöpfe in einer Zeile. */
.serie-loeschen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0.2rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(127, 127, 127, 0.3);
}

.serie-loeschen-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #f28b82;
    font-weight: 600;
    margin-right: 0.2rem;
}

.qe-btn-danger-leicht {
    background: transparent;
    color: #f28b82;
    border: 1px solid #5f6368;
}

.serie-loeschen .qe-btn-danger {
    margin-right: 0;
}

.neu-bestand label {
    display: block;
    margin-top: 0.5rem;
}

.neu-bestand input {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Wiederholung in den Kalender-Fenstern: Auswahl breit genug für „Wöchentlich“. */
[id$="-wiederholung-zeile"] .qe-select {
    flex: 1 1 auto;
    min-width: 8.5rem;
}

/* Offene Urlaubsanträge im Kalender der Leitung: dieselbe Personenfarbe, aber hell und mit
   gestricheltem Rand — so sieht man auf einen Blick, wer frei hat und wer frei haben möchte. */
.cal-bar.cal-bar-antrag {
    background: color-mix(in srgb, var(--person) 22%, #fff);
    border: 1.5px dashed var(--person);
    color: #1f2937;
}

.cal-bar.cal-bar-antrag small {
    font-weight: 400;
    opacity: 0.8;
}

.cal-mini-dot.cal-mini-dot-antrag {
    background: color-mix(in srgb, var(--person) 25%, #fff) !important;
    box-shadow: inset 0 0 0 1px var(--person);
}

.urlaub-legende-antrag {
    background: #eef1f8;
    border: 1.5px dashed #24346b;
}

/* Wie viele an diesem Tag frei haben (genehmigt+beantragt) — oben rechts in der Tageszelle. */
.cal-day {
    position: relative;
}

.urlaub-tag-zahl {
    position: absolute;
    top: 0.25rem;
    right: 0.3rem;
    min-width: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #24346b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3rem;
    text-align: center;
    cursor: help;
}

.urlaub-tag-zahl-antrag {
    background: #fff;
    color: #24346b;
    border: 1.5px dashed #24346b;
    line-height: calc(1.3rem - 3px);
}

/* Personalschlüssel in Gefahr: Warnsymbol oben links in der Tageszelle des Urlaubskalenders. */
.urlaub-schluessel {
    position: absolute;
    top: 0.25rem;
    left: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    cursor: help;
}

.urlaub-schluessel .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

.urlaub-schluessel-fehlt {
    background: #fdeaea;
    color: #b3261e;
    box-shadow: inset 0 0 0 1.5px #b3261e;
}

.urlaub-schluessel-knapp {
    background: #fff3e0;
    color: #9a5b00;
    box-shadow: inset 0 0 0 1.5px #d98200;
}

.urlaub-schluessel-legende {
    position: static;
    width: 1rem;
    height: 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    margin: 0 0.1rem;
}

.urlaub-warnung-schluessel {
    border-color: #b3261e;
}

.urlaub-warnung-schluessel .urlaub-warnung-kopf {
    color: #b3261e;
}

/* Einheitliche Rückmeldung beim Zeigen mit der Maus: Jeder Knopf — auch die Umschalter,
   Pfeile und Tage im Kalender — wird leicht nachtblau hinterlegt. Der Schimmer liegt als
   Schatten über der vorhandenen Farbe, ändert also keine Hintergründe; mit :where() so
   schwach gewichtet, dass eigens gestaltete Hover-Effekte Vorrang behalten. */
:root {
    --hover-schimmer: rgba(36, 52, 107, 0.09);
}

@media (hover: hover) {
    :where(button, input[type="submit"], input[type="button"], summary,
           .cal-view-toggle a, .monatswahl > a, .kachel-monatswahl > a,
           a.cal-day, a.cal-mini-day, a.mini-tile, a.detail-tab, a[class*="knopf"], a[class*="btn"],
           .cal-day-room-chip, .cal-bar):where(:hover:not(:disabled)) {
        box-shadow: inset 0 0 0 100vmax var(--hover-schimmer);
    }

    /* Aktive (dunkle) Umschalter und die Knöpfe im dunklen Termin-Fenster: heller Schimmer. */
    :where(.cal-view-toggle a.active, .cal-view-toggle button.active,
           .quick-event-box button):where(:hover:not(:disabled)) {
        box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.12);
    }
}

/* Monatsabschluss: zwei Häkchen (Mitarbeiter/in und Leitung) unter dem Stundenbericht. */
.monatsabschluss {
    margin: 0.9rem 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid #d9dce1;
    border-radius: 12px;
    background: #f7f8fb;
}

.monatsabschluss-fertig {
    border-color: #9ccfa9;
    background: #eef8f1;
}

.monatsabschluss-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.monatsabschluss-kopf strong {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.monatsabschluss-haken {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.5rem;
}

.monatsabschluss-seite {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.monatsabschluss-seite small {
    display: block;
    color: #6b7280;
    font-size: 0.78rem;
}

.monatsabschluss-haken-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 6px;
    background: #1f8a4c;
    color: #fff;
    font-weight: 700;
}

.monatsabschluss-leer {
    background: #fff;
    border: 2px solid #9aa3b5;
}

.monatsabschluss-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.9rem;
    border-radius: 10px;
    background: #24346b;
    color: #fff;
}

.monatsabschluss-knopf .monatsabschluss-leer {
    width: 1.1rem;
    height: 1.1rem;
    border-color: #fff;
    background: transparent;
}

.monatsabschluss-knopf-klein {
    padding: 0.25rem 0.6rem;
    font-size: 0.82rem;
}

.monatsabschluss-ja-text {
    color: #1f8a4c;
    font-weight: 600;
}

/* Kleiner Papierkorb-Knopf in Tabellenzeilen. */
.knopf-loeschen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    min-width: 2rem;
    min-height: 2rem;
    background: transparent;
    color: #b3261e;
    border: 1px solid #e3b4b0;
    border-radius: 8px;
    font-size: 0.9rem;
}

.knopf-loeschen .icon-svg {
    width: 1rem;
    height: 1rem;
}

/* Freischaltung „Zeiten selbst eintragen“ (Personalakte) und das Formular am Tablet:
   Felder nebeneinander in einem Raster, Beschriftung jeweils darüber. */
form.zeitfreigabe-formular,
form.zeit-selbst-formular {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    align-items: end;
    gap: 0.6rem 0.8rem;
    margin-top: 0.6rem;
}

form.zeitfreigabe-formular > label,
form.zeit-selbst-formular > label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.85rem;
    color: #55575c;
    text-align: left;
}

form.zeitfreigabe-formular > label input,
form.zeitfreigabe-formular > label select,
form.zeit-selbst-formular > label input,
form.zeit-selbst-formular > label select {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

form.zeitfreigabe-formular > button,
form.zeit-selbst-formular > button {
    justify-self: start;
    margin: 0;
}

.zeitfreigabe-kts {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.2rem;
}

.zeitfreigabe-kts label.org-choice {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.zeitfreigabe-kts input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.zeit-selbst-notiz {
    grid-column: span 2;
}

/* Statistik „Stunden“: je Person die Stunden je Abteilung, gruppiert nach Kostenträger. */
.stunden-verteilung .zahl {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stunden-verteilung .stunden-kt-kopf {
    text-align: center;
    border-bottom: 2px solid #24346b;
}

.stunden-verteilung tfoot th {
    border-top: 2px solid #d9dce1;
}

/* I-Hilfe-Zuordnung in der Personalakte: Pool-Status mit Umschalter. */
form.ihilfe-pool {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    margin: 0.3rem 0 0.6rem;
}

form.ihilfe-pool button {
    margin: 0;
    width: auto;
}

/* Zuordnung zu Gruppen: Kacheln zum Anhaken; die erste gewählte trägt „Farbe“. */
.gruppen-zuordnung {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.35rem;
    width: 100%;
}

.gruppen-zuordnung label.gruppen-zuordnung-eintrag {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.35rem 0.55rem;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
}

.gruppen-zuordnung label.gruppen-zuordnung-eintrag:has(input:checked) {
    border-color: #24346b;
    background: #eef1f8;
}

.gruppen-zuordnung input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.gruppen-zuordnung-haupt {
    margin-left: auto;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: #24346b;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.gruppen-zuordnung-haupt[hidden] {
    display: none;
}

.gruppen-zuordnung-titel {
    grid-column: 1 / -1;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}

/* Einstellungen → Abteilungen: Gruppen je Abteilung zum Anhaken. */
.abteilung-gruppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
}

.abteilung-gruppen label.org-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    white-space: nowrap;
}

.abteilung-gruppen input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* Abteilung bearbeiten/anlegen: Felder in einem Raster, Dropdowns für Kostenträger und Gruppen. */
.abteilung-formular {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 1rem;
}

.abteilung-felder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.6rem 0.9rem;
    flex: 1 1 100%;
}

.abteilung-felder > label,
.abteilung-feld {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    font-size: 0.85rem;
    color: #55575c;
}

.abteilung-feld[hidden] {
    display: none;
}

.abteilung-felder > label > input,
.abteilung-felder > label > select {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.abteilung-felder .auswahl-dropdown {
    width: 100%;
}

form.ihilfe-kinder-formular {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem 0.8rem;
}

form.ihilfe-kinder-formular label {
    margin: 0;
    font-size: 0.85rem;
    color: #55575c;
}

form.ihilfe-kinder-formular .auswahl-dropdown {
    flex: 1 1 18rem;
    max-width: 28rem;
}

form.ihilfe-kinder-formular button[type="submit"] {
    width: auto;
    margin: 0;
}

.stunden-verteilung .stunden-teilsumme {
    font-weight: 600;
    background: #f5f6f9;
}

/* Dienstplan je Abteilung: Wochenübersicht, OGS nach Gruppen, mit Besetzung je Tag und
   kleinen Balken für die Lage im Tag. */
.dienstplan-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0.8rem 0 0.4rem;
}

.dienstplan-kopf h2 {
    margin: 0;
}

.dienstplan-kennzahlen {
    display: flex;
    gap: 1rem;
    color: #55575c;
    font-size: 0.9rem;
}

.dienstplan-kennzahlen span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.dienstplan-tabelle {
    table-layout: fixed;
    min-width: 760px;
}

.dienstplan-tabelle th.dienstplan-name,
.dienstplan-tabelle td.dienstplan-name {
    width: 11rem;
}

.dienstplan-tabelle td {
    vertical-align: top;
}

.dienstplan-besetzung td {
    background: #f5f6f9;
    font-size: 0.85rem;
}

.dienstplan-heute {
    background: #eef1f8 !important;
    box-shadow: inset 0 2px 0 #24346b;
}

.dienstplan-zeit {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.dienstplan-balken {
    position: relative;
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #e3e6ec;
}

.dienstplan-balken span {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 3px;
    background: #24346b;
}

.dienstplan-abschnitt th {
    background: #24346b;
    color: #fff;
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
}

.dienstplan-tabelle .zahl {
    text-align: right;
    white-space: nowrap;
    width: 5rem;
}

/* Abteilung(en) auf der Mitarbeiter-Kachel. */
.employee-tile .employee-tile-abteilung {
    display: block;
    font-weight: 600;
    color: #24346b;
}

/* Schnellfilter (z. B. nach Abteilung) über der Mitarbeiterübersicht. */
.schnellfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.4rem 0 0.8rem;
}

.schnellfilter-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: #55575c;
    margin-right: 0.2rem;
}

.schnellfilter-knopf {
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 999px;
    background: #fff;
    color: #24346b;
    border: 1px solid #c9cfdd;
}

.schnellfilter-knopf.aktiv {
    background: #24346b;
    color: #fff;
    border-color: #24346b;
}

/* Abteilungen einer Person: erst die Abteilung, bei mehreren Kostenträgern darunter der passende. */
.abteilung-wahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.4rem 0.8rem;
    margin: 0.3rem 0 0.6rem;
}

.abteilung-wahl label.abteilung-wahl-zeile {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    border: 1px solid #d9dce1;
    border-radius: 8px;
    background: #fff;
}

.abteilung-wahl label.abteilung-wahl-zeile:has(input:checked),
.abteilung-wahl label.abteilung-wahl-mehrere:has(select option:checked:not([value="0"])) {
    border-color: #24346b;
    background: #eef1f8;
}

.abteilung-wahl input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.abteilung-wahl select {
    flex: 1 1 100%;
    margin: 0;
}

.abteilung-wahl-soll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.4rem 0.8rem;
}

.abteilung-wahl-soll .info-label {
    grid-column: 1 / -1;
}

.abteilung-wahl-soll label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    font-size: 0.85rem;
    color: #55575c;
}

.gruppen-zuordnung label.gesperrt {
    opacity: 0.45;
    cursor: not-allowed;
}

.gruppen-zuordnung-sperre {
    grid-column: 1 / -1;
    margin: 0;
}

/* Startseite: die Leitungen abgesetzt oben, nur zum Ansehen (kein Anmelden). */
.leitung-kacheln {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #d9dce1;
}

.leitung-kacheln-titel {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}

.leitung-kachel {
    cursor: default;
    border: 2px solid #24346b;
}

.leitung-kachel-status {
    background: #eef1f8;
}

.leitung-kachel-abwesend,
.leitung-kachel-offen {
    opacity: 0.75;
}

/* Einsatzplan je Abteilung: Reiter über der Tafel und Karten für Abteilungen ohne Tafel. */
.einsatz-reiter {
    margin-bottom: 0.8rem;
}

.einsatz-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.7rem;
}

.einsatz-karte {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #d9dce1;
    border-left: 4px solid #9aa3b5;
    border-radius: 10px;
    background: #fff;
}

.einsatz-karte-da { border-left-color: #1f8a4c; }
.einsatz-karte-pause { border-left-color: #d98200; }
.einsatz-karte-status { border-left-color: #24346b; }
.einsatz-karte-abwesend { border-left-color: #b3261e; opacity: 0.8; }
.einsatz-karte-frei, .einsatz-karte-anderswo { opacity: 0.7; }

.einsatz-person-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.einsatz-stand {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #eef1f5;
    color: #55575c;
    white-space: nowrap;
}

.einsatz-stand-da { background: #e6f4ea; color: #1f8a4c; }
.einsatz-stand-pause { background: #fff3e0; color: #9a5b00; }
.einsatz-stand-abwesend { background: #fdeaea; color: #b3261e; }
.einsatz-stand-status { background: #eef1f8; color: #24346b; }

.einsatz-kinder {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.einsatz-ihilfe-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.einsatz-ihilfe-form .auswahl-dropdown {
    flex: 1 1 auto;
    min-width: 0;
}

.einsatz-ihilfe-form button {
    width: auto;
    margin: 0;
}

.startseite-abschnitt {
    margin-bottom: 1.1rem;
}

/* Dienstplan-Fenster: dieselbe Zeit an mehreren Tagen. */
.dienst-tage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.6rem;
}

.dienst-tage .dienst-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    color: inherit;
    font-size: 0.9rem;
}

.dienst-tage .dienst-tag input {
    width: auto;
    margin: 0;
}

.dienst-tage .dienst-tage-alle {
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
}

form.einsatz-ihilfe-kinder {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
}

.einsatz-stunden {
    margin: 0;
    width: 100%;
}

.einsatz-stunden td {
    padding: 0.15rem 0.3rem;
    border: none;
}

.einsatz-stunden input {
    width: 4.5rem;
    padding: 0.25rem 0.4rem;
    margin: 0;
    font-size: 0.9rem;
    text-align: right;
}

form.ihilfe-anspruch {
    max-width: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.9rem;
}

form.ihilfe-anspruch label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    font-size: 0.85rem;
    color: #55575c;
}

form.ihilfe-anspruch input,
form.ihilfe-anspruch select,
form.ihilfe-anspruch button {
    width: auto;
    margin: 0;
}

.text-warnung {
    color: #b3261e;
}

/* Kalenderwochen: schmale Spalte „KW“ links in allen Monats- und Jahreskalendern. */
.cal-grid.mit-kw {
    grid-template-columns: 2.3rem repeat(7, minmax(0, 1fr));
}

.cal-grid.mit-kw > .cal-kw {
    border-right: 1px solid #eceef1;
    border-bottom: 1px solid #eceef1;
}

.cal-kw {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.55rem;
    background: #f6f7f9;
    color: #8a8d93;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.cal-kw-kopf {
    color: #8a8d93;
}

.cal-weekdays.mit-kw {
    grid-template-columns: 2.3rem repeat(7, 1fr);
}

.cal-week.mit-kw {
    position: relative;
    padding-left: 2.3rem;
}

.cal-week.mit-kw > .cal-kw {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2.3rem;
    border-right: 1px solid #eceef1;
}

.cal-mini-weekdays.mit-kw,
.cal-mini-week.mit-kw {
    grid-template-columns: 1.5rem repeat(7, 1fr);
}

.cal-kw.cal-kw-mini {
    align-items: center;
    padding: 0;
    background: transparent;
    font-size: 0.6rem;
    font-weight: 500;
    color: #a0a3a9;
}

/* Ferienkalender am Tablet: Umschalter Woche/Tag aus Formularknöpfen. */
.fk-ansicht-wahl form {
    display: contents;
}

.fk-ansicht-wahl button {
    border: none;
    background: white;
    color: #55575c;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 0;
}

.fk-ansicht-wahl button.active {
    background: #24346b;
    color: white;
}

/* Tablet: begleitete Kinder in der I-Hilfe-Karte, nur zum Ansehen. */
.einsatz-kinder-liste {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.9rem;
}

/* Tablet: Abteilungswahl im Einsatzplan besteht aus Formularen (POST mit Token). */
.einsatz-reiter .inline-form {
    display: contents;
}

/* Infomeldungen im Honiggelb des Logos statt in Rot: Zähler in der Seitenleiste (Urlaubsanträge,
   Nachrichten, Warteliste …) und im Elternportal. */
.badge.nav-zaehler,
.badge.badge-hinweis {
    background: #e9a825;
    color: #2b1d00;
}

/* Kritisches bleibt rot — Terminerinnerungen, fällige Aufgaben und ein zu knapper
   Personalschlüssel sollen sich von den übrigen Hinweisen abheben. */
.unread-badge.unread-badge-termin,
.unread-badge.unread-badge-kritisch {
    background: #d70015;
    color: #fff;
}

/* Leitet gerade eine AG: Vermerk am Magneten in der Farbe der AG — die Person ist in der Zeit
   nicht in ihrer Gruppe. */
.tafel-magnet-status.tafel-magnet-ag {
    background: color-mix(in srgb, var(--ag-farbe, #2563eb) 16%, #fff);
    color: color-mix(in srgb, var(--ag-farbe, #2563eb) 75%, #000);
    border: 1px solid color-mix(in srgb, var(--ag-farbe, #2563eb) 45%, #fff);
}

/* Fällige ToDos und zu knapper Personalschlüssel: roter Kreis mit weißer Zahl wie am Tablet — im blauen Feld des
   gewählten Menüpunkts ebenso lesbar. */
.badge.nav-zaehler.nav-zaehler-kritisch {
    background: #d70015;
    color: #fff;
}

.nav-group.nav-gruppe-kritisch > .nav-group-header {
    background: #fdeced;
}

.nav-group.nav-gruppe-kritisch > .nav-group-header .nav-group-label:not(.active) {
    color: #8f2a1f;
}

.admin-sidebar.collapsed .nav-group.nav-gruppe-kritisch > .nav-group-header {
    background: #fadede;
}

/* Chats: Neuer Chat erst über das Plus — Person wählen oder Gruppenchat starten. */
.neuer-chat[hidden],
.new-group-form[hidden],
#neuer-chat-person[hidden] {
    display: none;
}

.neuer-chat {
    margin: 0.6rem 0 1rem;
    padding: 0.8rem;
    background: #f6f7f9;
    border-radius: 10px;
}

.neuer-chat .new-group-form {
    margin: 0.6rem 0 0;
    padding: 0;
    background: none;
}

.neuer-chat-wahl {
    margin-bottom: 0.6rem;
}

#neuer-chat-suche {
    width: 100%;
    margin-bottom: 0.5rem;
}

.neuer-chat-liste {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 18rem;
    overflow-y: auto;
    max-width: none;
}

.neuer-chat-person {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.neuer-chat-person:hover,
.neuer-chat-person:focus-visible {
    background: #e9ecf2;
}

.chat-avatar.chat-avatar-klein {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.chat-leer {
    padding: 0.5rem 0.2rem;
}

/* Tablet: „Meine Daten“ als waagerechte Reiterleiste — ein Formular, aber nicht als Spalte. */
form.meine-daten-reiter {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: none;
}

.neuer-chat-wahl button {
    white-space: nowrap;
}

/* Megafon in der Kopfleiste der Übersicht: Mitteilungen schreiben und verwalten. Die kleine Zahl
   zeigt, wie viele gerade aktiv sind. */
.topbar-mitteilungen {
    position: relative;
}

.topbar-mitteilungen-zahl {
    position: absolute;
    top: -2px;
    right: -4px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #e9a825;
    color: #2b1d00;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}

.mitteilungen-abschnitt + .mitteilungen-abschnitt {
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid #eceef1;
}

/* Stand gegenüber der Obergrenze vom Entwickler, neben dem Plus zum Anlegen. */
.obergrenze-stand {
    align-self: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #eef1f5;
    color: #55575c;
    font-size: 0.78rem;
    font-weight: 600;
}

.obergrenze-stand.obergrenze-voll {
    background: #fdf3d7;
    color: #7a5300;
}

.karten-aktion:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Hinweise in der Akte, wenn eine Zuordnung gelöscht wurde. */
.zuordnungs-hinweise {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.zuordnungs-hinweis {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #f0d27a;
    border-left: 4px solid #e9a825;
    border-radius: 10px;
    background: #fdf3d7;
    color: #5c4300;
}

.zuordnungs-hinweis-text {
    flex: 1;
}

.zuordnungs-hinweis-symbol,
.tile-zuordnungs-hinweis {
    display: inline-flex;
    color: #b7791f;
}

.tile-zuordnungs-hinweis {
    width: 1rem;
    height: 1rem;
    vertical-align: -2px;
}

/* Neue Ankündigung, live eingeblendet (Tablet, Elternportal) — oben mittig über allem. */
.ankuendigung-live-bereich {
    position: fixed;
    top: 0.8rem;
    left: 50%;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(560px, calc(100vw - 2rem));
    transform: translateX(-50%);
}

.ankuendigung-live {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #f0d27a;
    border-left: 5px solid #e9a825;
    border-radius: 12px;
    background: #fffaf0;
    color: #3d2c00;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.ankuendigung-live-symbol {
    font-size: 1.3rem;
    line-height: 1;
}

.ankuendigung-live-text {
    flex: 1;
    min-width: 0;
}

.ankuendigung-live-text p {
    margin: 0.2rem 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.ankuendigung-live-text small {
    color: #7a5300;
}

.ankuendigung-live-zu {
    padding: 0 0.4rem;
    border: none;
    background: none;
    color: #7a5300;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

/* Postfach: Briefumschlag in der Kopfzeile, darunter die Meldungen als Liste. */
.postfach {
    position: relative;
}

.postfach-knopf {
    position: relative;
}

.postfach-fenster {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1500;
    width: min(380px, calc(100vw - 2rem));
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}

.postfach-fenster[hidden] {
    display: none;
}

.postfach-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #eceef1;
}

.postfach-leeren {
    border: none;
    background: none;
    color: #55575c;
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.postfach-leeren:hover {
    color: #b3261e;
}

.postfach-eintraege {
    overflow-y: auto;
    padding: 0.3rem;
}

.postfach-leer {
    padding: 0.8rem;
    margin: 0;
}

.postfach-eintrag {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
}

.postfach-eintrag:hover {
    background: #f6f7f9;
}

.postfach-eintrag-neu {
    background: #fdf8ea;
}

.postfach-eintrag-inhalt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: inherit;
    text-decoration: none;
}

.postfach-eintrag-text {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.postfach-eintrag-inhalt small {
    color: #7a7d83;
}

.postfach-eintrag-loeschen {
    padding: 0 0.35rem;
    border: none;
    background: none;
    color: #9a9da3;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.postfach-eintrag-loeschen:hover {
    color: #b3261e;
}

/* Dienstplan-Übersicht: Abweichung der geplanten Stunden vom Soll des Kostenträgers. */
.dienstplan-soll-marke {
    display: block;
    margin-top: 0.15rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #fdf3d7;
    color: #7a5300;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Ferienkalender am Tablet: Eintrag antippen zeigt ihn groß. */
[data-ferien-info] {
    cursor: pointer;
}

.ferien-info-box h2 {
    margin-top: 0;
}

.ferien-info-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.3rem 0;
    font-size: 1.15rem;
}

.ferien-info-notiz {
    margin: 0.8rem 0 0.4rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: #f6f7f9;
    font-size: 1.05rem;
    white-space: pre-line;
}

/* ToDo-Widget: wiederkehrende Aufgaben und Auswahl „Für“ in der Eingabezeile. */
/* „Für“ sieht aus wie früher die kleine Auswahlliste: weißes Kästchen in der grauen Zeile. Die
   Namen klappen schwebend darüber auf, statt die Zeile zu verbreitern. */
.todo-quick-add .auswahl-dropdown {
    position: relative;
    width: auto;
}

.todo-quick-add .auswahl-dropdown-knopf {
    gap: 0.3rem;
    max-width: 11rem;
    padding: 0.3rem 0.5rem;
    border: none;
    border-radius: 6px;
    background: white;
    color: #5a5a5e;
    font-size: 0.8rem;
}

.todo-quick-add .auswahl-dropdown-pfeil .icon-svg {
    width: 0.8rem;
    height: 0.8rem;
}

.todo-quick-add .auswahl-dropdown-panel {
    position: absolute;
    top: calc(100% + 0.3rem);
    right: 0;
    z-index: 40;
    width: 16rem;
    margin: 0;
    border-color: #e3e6eb;
    background: white;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}

/* Wiederkehrend: dezentes Symbol wie die übrigen Angaben in der Zeile. */
.todo-serie-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: none;
    color: #8a8d93;
    cursor: pointer;
}

.todo-serie-knopf:hover {
    background: white;
    color: #24346b;
}

.todo-serie-knopf .icon-svg {
    width: 1rem;
    height: 1rem;
}

.todo-serien-titel {
    margin-top: 1.2rem;
}

.todo-serien-liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo-serien-liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-top: 1px solid #eceef1;
}

/* Träger: nach Abteilung gefiltert — unabhängig von der Suche. */
.abteilung-ausgeblendet {
    display: none !important;
}

/* Wiederkehrende Aufgaben: kleines Symbol neben der Überschrift „ToDos“ — die Eingabezeile bleibt
   wie gewohnt. */
.todo-titel {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.todo-titel .todo-serie-knopf {
    position: relative;
}

.todo-serie-zahl {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 0.95rem;
    height: 0.95rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: #eef1f5;
    color: #55575c;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 0.95rem;
    text-align: center;
}

/* Eingabezeile im ToDo-Widget: alles in einer Zeile — das Textfeld darf dafür schmaler werden. */
.todo-quick-add input[type="text"] {
    min-width: 80px;
}

/* ToDo-Zeile: ↻ links neben dem Datum, alles in einer Zeile. Die Namensliste bei „Für“ ist
   kompakter. */
.todo-quick-add {
    gap: 0.4rem;
}

.todo-quick-add input[type="date"] {
    width: 7.6rem;
}

.todo-quick-add .todo-serie-knopf {
    position: relative;
}

.todo-quick-add .auswahl-dropdown-panel {
    width: 12.5rem;
    padding: 0.4rem;
    font-size: 0.85rem;
}

.todo-quick-add .auswahl-dropdown-suche {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
}

.todo-quick-add .auswahl-dropdown-liste {
    max-height: 12rem;
}

.todo-quick-add .auswahl-dropdown-eintrag {
    padding: 0.2rem 0.3rem;
}

.todo-quick-add .auswahl-dropdown-fuss button {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

/* ToDo-Widget: Nur die Aufgabenliste rollt — Überschrift, Eingabezeile und Listenauswahl bleiben
   stehen. Die Kachel selbst füllt ihr Rasterfeld und rollt nicht mehr als Ganzes. */
.widget-grid[data-widget-storage-key] .widget-card.todo-widget-wide {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.todo-widget-wide .todo-widget-body {
    flex: 1;
    min-height: 0;
    align-items: stretch;
}

.todo-widget-wide .todo-lists-sidebar {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.todo-widget-wide .todo-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.todo-widget-wide .todo-main > .todo-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-right: 0.3rem;
}

/* Auf dem Handy stehen die Widgets untereinander in voller Höhe — dort rollt die Seite. */
@media (max-width: 700px) {
    .widget-grid[data-widget-storage-key] .widget-card.todo-widget-wide {
        overflow: visible;
    }

    .todo-widget-wide .todo-main > .todo-list {
        overflow: visible;
    }
}

/* „Kind krank“ im Fieberthermometer-Raster: orange statt rot. */
.krank-woche-punkt.krank-woche-kind {
    color: #d97706;
}

/* Einstellungen → Stundenkonto: die drei Möglichkeiten als Umschalter. */
.konto-geltung {
    margin-bottom: 0.6rem;
}

.konto-geltung label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.konto-geltung input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.konto-personen {
    margin-bottom: 0.8rem;
}

.konto-personen[hidden] {
    display: none;
}

.konto-geltung label {
    margin: 0;
    padding: 0.4rem 0.8rem;
    background: white;
    color: #55575c;
    font-size: 0.85rem;
    font-weight: 400;
}

.konto-geltung label.active {
    background: #24346b;
    color: white;
}

/* Stundenkonto über der Grenze aus den Einstellungen. */
.konto-warnung {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.8rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid #f0d27a;
    border-left: 4px solid #e9a825;
    border-radius: 10px;
    background: #fdf3d7;
    color: #5c4300;
    font-weight: 600;
}

.tile-konto-warnung {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    color: #b7791f;
    vertical-align: -2px;
}

/* Wo gekauft — in Handkasse und Kartenzahlungen unter dem Zweck. */
.kassen-geschaeft {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #55575c;
}

.kassen-geschaeft .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* Handkasse: Art der Buchung als drei Knöpfe, farbig wie im Kassenbuch. */
.kassen-art-wahl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.kassen-art-wahl button {
    padding: 0.55rem 0.4rem;
    border: 1px solid #d5d8de;
    border-radius: 10px;
    background: white;
    color: #3a3c40;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.kassen-art-wahl button.active {
    border-color: #24346b;
    background: #24346b;
    color: white;
}

.kassen-art-wahl button.kassen-art-raus.active {
    border-color: #b3261e;
    background: #b3261e;
}

.kassen-art-wahl button.kassen-art-rein.active {
    border-color: #1a7a3d;
    background: #1a7a3d;
}

.kassen-stand-hinweis {
    margin: 0 0 0.6rem;
    color: #55575c;
    font-size: 0.88rem;
}

/* Buchungsfenster Handkasse und Kartenzahlung: gleicher Aufbau — jede Beschriftung über ihrem
   Feld, gleiche Abstände, Datum und Betrag gleich breit nebeneinander. */
#kassen-nur-ausgabe,
#kassen-zaehlung,
#kassen-nummer-feld,
.buchung-form .buchung-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#kassen-nur-ausgabe[style*="none"],
#kassen-zaehlung[style*="none"],
#kassen-nummer-feld[hidden] {
    display: none;
}

.buchung-form .neu-zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.buchung-form .neu-zweispaltig > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.buchung-form .neu-zweispaltig input {
    width: 100%;
    box-sizing: border-box;
}

.buchung-form input[type="file"],
.buchung-form select {
    width: 100%;
    box-sizing: border-box;
}

.buchung-form .kassen-stand-hinweis {
    margin: 0;
}

.buchung-form .kassen-art-wahl {
    margin-bottom: 0;
}

.buchung-form input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not(.zaehl-menge),
.buchung-form select {
    height: 48px;
}

/* Kassensturz: ohne Betragsfeld nimmt das Datum die ganze Breite. */
.buchung-form .neu-zweispaltig:has(#kassen-betrag-feld[style*="none"]) {
    grid-template-columns: 1fr;
}

/* Eltern-Kalender: Woche als Tagesspalten, Jahr als zwölf kleine Monate. */
.eltern-woche {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

.eltern-woche-tag {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 8rem;
    padding: 0.5rem;
    border: 1px solid #eceef1;
    border-radius: 10px;
    background: #fff;
}

.eltern-woche-heute {
    border-color: #24346b;
    box-shadow: inset 0 0 0 1px #24346b;
}

.eltern-woche-kopf {
    font-weight: 700;
}

.eltern-woche-eintrag {
    display: flex;
    flex-direction: column;
    padding: 0.35rem 0.45rem;
    border-radius: 8px;
    background: #24346b;
    color: #fff;
    font-size: 0.85rem;
}

.eltern-woche-eintrag small {
    opacity: 0.85;
}

@media (max-width: 800px) {
    .eltern-woche {
        grid-template-columns: 1fr;
    }

    .eltern-woche-tag {
        min-height: 0;
    }
}

.eltern-jahr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
}

.eltern-jahr-titel {
    display: block;
    margin-bottom: 0.3rem;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.eltern-jahr-raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
    font-size: 0.78rem;
}

.eltern-jahr-wt {
    color: #8a8d93;
}

.eltern-jahr-tag {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0.15rem 0;
    border-radius: 6px;
}

.eltern-jahr-termin { background: #24346b; color: #fff; }
.eltern-jahr-ferien { background: #f0ad4e; color: #3a2a00; }
.eltern-jahr-feiertag { background: #c93c3c; color: #fff; }
.eltern-jahr-schliesszeit { background: #6b6d73; color: #fff; }
.eltern-jahr-heute { outline: 2px solid #24346b; outline-offset: 1px; }

.eltern-jahr-legende .eltern-jahr-tag {
    min-width: 1rem;
    font-size: 0.7rem;
}

/* Ferienkalender: Hinweis auf den Eintragszeitraum. */
.fk-fenster-offen,
.fk-fenster-zu {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    font-weight: 600;
}

.fk-fenster-offen { background: #e3f7e9; color: #1a7a3d; }
.fk-fenster-zu { background: #fdf3d7; color: #7a5300; }

/* Ferienkalender als Liste: je Tag eine Spalte, darin die Namen untereinander. */
.ferien-liste {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.ferien-liste-tag {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    border: 1px solid #eceef1;
    border-radius: 10px;
    background: #fff;
}

.ferien-liste-zu {
    background: #f6f7f9;
    color: #8a8d93;
}

.ferien-liste-kopf {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.2rem;
}

.ferien-liste-eintrag {
    display: grid;
    grid-template-columns: 0.7rem 1fr auto;
    align-items: center;
    column-gap: 0.4rem;
    padding: 0.25rem 0.3rem;
    border-radius: 6px;
    font-size: 0.86rem;
}

.ferien-liste-eintrag:nth-child(even) {
    background: #f8f9fb;
}

.ferien-liste-eigen {
    font-weight: 700;
}

.ferien-liste-punkt {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
}

.ferien-liste-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ferien-liste-zeit {
    color: #55575c;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ferien-liste-notiz {
    grid-column: 2 / -1;
    color: #7a7d83;
}

@media (max-width: 800px) {
    .ferien-liste {
        grid-template-columns: 1fr;
    }
}

/* Budget-Übersicht als Kacheln: der Balken unter „Ausgegeben“ zeigt, wie viel vom Budget weg ist. */
.budget-kacheln .kind-summe .budget-balken {
    margin-top: 0.4rem;
}

/* Budget-Übersicht: alle Kacheln gleich hoch, der Balken sitzt unten in „Ausgegeben“. */
.budget-kacheln {
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.budget-kacheln .kind-summe {
    height: 100%;
    box-sizing: border-box;
}

/* Tablet → Einstellungen → Sprache: die Knöpfe nebeneinander als Umschalter. */
form.sprachwahl {
    display: inline-flex;
    flex-direction: row;
    max-width: none;
    width: auto;
    gap: 0;
}

form.sprachwahl button {
    width: auto;
    min-width: 7rem;
    height: auto;
    margin: 0;
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 0;
    background: white;
    color: #55575c;
    font-size: 0.95rem;
    line-height: 1.2;
}

form.sprachwahl button.active {
    background: #24346b;
    color: white;
}

.fk-fenster-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.fk-fenster-zeile .fk-fenster-offen,
.fk-fenster-zeile .fk-fenster-zu,
.fk-fenster-zeile .fk-fenster-leer {
    margin: 0;
}

/* Ferienkalender: Abstand zwischen Umschaltern (Woche/Tag/Liste) und dem Kalender darunter. */
.ferien-wochenwahl {
    margin-bottom: 1.1rem;
}

.fk-ferien-auswahl {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fk-ferien-auswahl[hidden] {
    display: none;
}

.ferien-stunden {
    margin-top: 1.2rem;
}

.ferien-stunden h3 {
    margin-bottom: 0.4rem;
}

.nav-subitem[hidden],
.nav-group-chevron-btn[hidden] {
    display: none;
}

/* Ferienliste: mehr Luft je Person — jede Zeile gut auseinanderzuhalten. */
.ferien-liste-tag {
    gap: 0.45rem;
}

.ferien-liste-eintrag {
    padding: 0.5rem 0.45rem;
    border-bottom: 1px solid #eef0f3;
    line-height: 1.35;
}

.ferien-liste-eintrag:last-of-type {
    border-bottom: none;
}

.auswahl-suche {
    width: 100%;
    margin-bottom: 0.4rem;
}

/* Ferienkalender-Knopfzeile: alle Knöpfe gleich hoch (36px) und auf einer Mittellinie. */
.ferien-wochenwahl .btn-secondary {
    height: 36px;
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.ferien-wochenwahl .inline-form {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ferien-wochenwahl > .karten-aktion {
    position: static;
    flex: none;
}

/* „Eintragszeitraum“ im Maß der Ferienauswahl daneben: 36px hoch, gleiche Schrift und Rand. */
.fk-fenster-knopf {
    height: 36px;
    padding: 0 0.8rem;
    font-size: 0.85rem;
    border: 1px solid #d7dade;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    white-space: nowrap;
}

.fk-fenster-knopf .icon-svg {
    width: 15px;
    height: 15px;
}

.fk-abteilungs-wahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.2rem 0.8rem;
    margin: 0.3rem 0 0.9rem;
}

.fk-kopf-rechts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Sprechblasen im Kalender der Leitung (Vorschau am Termin, Schnell-Anlegen) — wie im
   Google-Kalender: direkt neben dem Termin, ohne Abdunkeln, weich eingeblendet. */
.kal-blase {
    position: absolute;
    z-index: 900;
    width: 330px;
    max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
    padding: 0.35rem 0.9rem 0.9rem;
    opacity: 0;
    transform: scale(0.96) translateY(4px);
    transform-origin: top left;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.kal-blase.kal-blase-sichtbar {
    opacity: 1;
    transform: none;
}

.kal-blase-kopf {
    display: flex;
    justify-content: flex-end;
    gap: 0.15rem;
}

.kal-blase-knopf {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #5f6368;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.kal-blase-knopf:hover {
    background: rgba(95, 99, 104, 0.12);
}

.kal-blase-knopf-loeschen:hover {
    color: #c93c3c;
}

.kal-blase-knopf .icon-svg,
.kal-blase-symbol .icon-svg {
    width: 17px;
    height: 17px;
}

.kal-blase-titel {
    margin: 0.1rem 0 0.55rem 1.9rem;
    font-size: 1.15rem;
    line-height: 1.3;
    position: relative;
    overflow-wrap: anywhere;
}

/* Farbfleck vor dem Titel — dieselbe Farbe wie „Termin“ in der Legende. */
.kal-blase-titel::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: 0.3rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 4px;
    background: #4c8dff;
}

.kal-blase-zeile {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.88rem;
    line-height: 1.4;
    margin-top: 0.4rem;
    overflow-wrap: anywhere;
}

.kal-blase-symbol {
    flex: none;
    width: 1.15rem;
    color: #5f6368;
    display: inline-flex;
    padding-top: 1px;
}

.kal-blase-form {
    display: block;
    margin: 0;
}

.kal-blase-titel-eingabe {
    width: 100%;
    font-size: 1.1rem;
    border: none;
    border-bottom: 2px solid #4c8dff;
    border-radius: 0;
    padding: 0.35rem 0.1rem;
    margin: 0 0 0.3rem;
    background: transparent;
}

.kal-blase-titel-eingabe:focus {
    outline: none;
}

.kal-blase-zeit {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.kal-blase-zeit input[type="time"] {
    width: auto;
    margin: 0;
    padding: 0.2rem 0.35rem;
    font-size: 0.88rem;
}

.kal-blase-aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

/* Platzhalter an der angeklickten Stelle, solange das Schnell-Anlegen offen ist. */
.kal-blase-platzhalter {
    position: absolute;
    left: 2px;
    right: 2px;
    background: #4c8dff;
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    padding: 2px 6px;
    box-shadow: 0 4px 12px rgba(76, 141, 255, 0.35);
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
}

.event-chip.chip-blase-offen {
    box-shadow: 0 0 0 2px #4c8dff, 0 4px 12px rgba(15, 23, 42, 0.2);
}

/* Schmale Bildschirme: als Blatt von unten statt als Sprechblase. */
.kal-blase.kal-blase-blatt {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateY(24px);
}

.kal-blase.kal-blase-blatt.kal-blase-sichtbar {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .kal-blase {
        transition: none;
    }
}

/* Kurz gedämpft, während eine An-/Abmeldung im Hintergrund gespeichert wird. */
#child-grid.kinder-speichert {
    opacity: 0.75;
    transition: opacity 0.1s;
}

/* Das Termin-Formular als Sprechblase: die Blase selbst ist nur der Halter, sichtbar ist das
   Formular (dunkle Karte wie im Fenster), höchstens so hoch wie der Bildschirm. */
.kal-blase.kal-blase-formular {
    width: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.kal-blase.kal-blase-formular .quick-event-box {
    max-height: calc(100vh - 16px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.kal-blase.kal-blase-formular.kal-blase-blatt .quick-event-box {
    width: auto;
    max-width: none;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
}

.kal-blase.kal-blase-formular.kal-blase-blatt {
    padding-bottom: 0;
}

/* Termin-Fenster (Sprechblase und Fenster in der Mitte) sind am Tag hell — dunkel nur im Dunkelmodus (die
   dunklen Gegenfarben rechnet app/dunkelmodus.py aus diesen Angaben selbst aus). Das Fenster
   in der Bildschirmmitte behält sein bisheriges Aussehen. */
.quick-event-box {
    background: #ffffff;
    color: #1c1c1e;
    border: 1px solid #e3e6eb;
}

.quick-event-box .qe-close-btn {
    color: #5f6368;
}

.quick-event-box .qe-close-btn:hover {
    background: #eef0f3;
    color: #1c1c1e;
}

.quick-event-box .qe-title-input {
    color: #1c1c1e;
    border-bottom-color: #d7dade;
}

.quick-event-box .qe-title-input::placeholder {
    color: #8a8c91;
}

.quick-event-box .qe-title-input:focus {
    border-bottom-color: #34467f;
}

.quick-event-box .qe-row {
    border-bottom-color: #eef0f3;
}

.quick-event-box .qe-icon,
.quick-event-box .qe-time-sep,
.quick-event-box .qe-field-hint {
    color: #5f6368;
}

.quick-event-box .qe-select,
.quick-event-box .qe-input {
    color: #1c1c1e;
    color-scheme: light;
}

.quick-event-box .qe-select option {
    color: #1c1c1e;
    background: #ffffff;
}

.quick-event-box .qe-btn-secondary {
    color: #34467f;
    border-color: #c9ced6;
}

.quick-event-box .qe-btn-danger {
    color: #c93c3c;
    border-color: #c9ced6;
}

.kal-blase-formular .quick-event-box {
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
}

.schluessel-vorgabe-zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.schluessel-vorgabe-zeile input {
    width: 5rem;
    margin: 0;
}

/* Termin-Fenster der übrigen Kalender als Sprechblase (siehe app.js): kein abgedunkelter
   Hintergrund, das Fenster steht neben der angeklickten Stelle. */
.modal-overlay.als-blase {
    background: transparent;
    pointer-events: none;
}

.modal-overlay.als-blase > .quick-event-box {
    pointer-events: auto;
    position: fixed;
    max-height: calc(100vh - 16px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transform: scale(0.96) translateY(4px);
    transform-origin: top left;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.modal-overlay.als-blase > .quick-event-box.als-blase-sichtbar {
    opacity: 1;
    transform: none;
}

.modal-overlay.als-blase > .quick-event-box.als-blase-blatt {
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-width: none;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .modal-overlay.als-blase > .quick-event-box {
        transition: none;
    }
}

/* Schulungen */
.schulung-karte {
    border: 1px solid #e3e6eb;
    border-radius: 10px;
    padding: 0.8rem 1rem;
    margin-top: 0.9rem;
}

.schulung-kopf {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.schulung-kopf > div:first-child {
    flex: 1;
}

.schulung-angaben {
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.schulung-angaben .icon-svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

.schulung-teilnehmende {
    margin-top: 0.6rem;
}

.schulung-teilnehmende td:first-child,
.schulung-teilnehmende th:first-child {
    width: 2.5rem;
}

/* Fortbildung ansetzen: alle Eingaben gleich breit und gleich hoch. */
.schulung-form input:not([type=checkbox]):not([type=hidden]):not(.auswahl-dropdown-suche),
.schulung-form .auswahl-dropdown-knopf {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0 0 0.7rem;
}

.schulung-form .auswahl-dropdown {
    margin-bottom: 0.7rem;
}

.schulung-form .auswahl-dropdown .auswahl-dropdown-knopf {
    margin: 0;
}

.schulung-zeit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.schulung-form select {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    margin: 0 0 0.7rem;
}

.schulung-form .org-choice {
    margin: 0.2rem 0 0.8rem;
}

/* „Zeiten bearbeiten“ in der Stempelleiste nur als Stift. */
.leitung-stempel-nachtragen.leitung-stempel-stift {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}

#leitung-kommen-abteilungen .menue-eintrag-knopf,
#ma-kommen-abteilungen .menue-eintrag-knopf {
    width: 100%;
    margin-top: 0.3rem;
}

/* Generalsuche in der Kopfzeile: Lupe links neben dem Postfach; das Suchfeld klappt als
   kleines Fenster darunter auf (wie das Postfach) und verschiebt nichts in der Kopfzeile. */
.generalsuche {
    position: relative;
    display: flex;
    align-items: center;
}

.generalsuche-fenster {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 16px);
    z-index: 950;
    background: #fff;
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
    padding: 0.5rem;
}

#generalsuche-eingabe {
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 0.8rem;
    border: 1px solid #d7dade;
    border-radius: 10px;
    background: #f4f5f7;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.generalsuche-liste {
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 0.35rem;
}

.generalsuche-kopf {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8a8c91;
    padding: 0.5rem 0.6rem 0.2rem;
}

.generalsuche-eintrag {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 8px;
    color: #1c1c1e;
    text-decoration: none;
    font-size: 0.9rem;
}

.generalsuche-eintrag small {
    color: #8a8c91;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.generalsuche-eintrag:hover,
.generalsuche-eintrag.aktiv {
    background: #eef1f8;
}

.generalsuche-leer {
    padding: 0.6rem;
    color: #8a8c91;
    font-size: 0.88rem;
}


/* Stempelleiste (Leitung und Tablet): alle Knöpfe gleich groß — 40px hoch, Text-Knöpfe gleich
   breit, der Stift quadratisch. Gilt nur für die Knöpfe in der Zeile, nicht für aufklappende
   Menüs. */
.leitung-stempel-knoepfe > form > button,
.leitung-stempel-knoepfe > .status-leiste > form > button,
.leitung-stempel-knoepfe > .status-leiste > .status-auswahl > summary,
.leitung-stempel-knoepfe > .status-leiste > .status-kennzeichen {
    box-sizing: border-box;
    height: 40px;
    min-width: 7.5rem;
    margin: 0;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.95rem;
    line-height: 1;
}

.leitung-stempel-knoepfe > a.leitung-stempel-nachtragen.leitung-stempel-stift {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
}

.leitung-stempel-knoepfe {
    align-items: center;
}

/* Widget-Überschrift als Verweis auf den Menüpunkt (z. B. Kalender): sieht aus wie eine
   Überschrift, zeigt beim Überfahren, dass sie anklickbar ist. */
.widget-titel-link,
button.widget-titel-link {
    color: inherit;
    text-decoration: none;
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    height: auto;
    min-width: 0;
}

.widget-titel-link:hover,
button.widget-titel-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    background: none;
}

/* Private Termine der Leitung: violett statt blau, damit sie sich von den geteilten abheben. */
.event-chip.event-chip-privat {
    background: #7c5cbf !important;
    color: #fff !important;
}

.qe-privat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    cursor: pointer;
}

/* Dienstplan durchschalten (Personalakte und Tablet): eine Reihe gleich hoher Knöpfe, die bei
   vielen Ferien umbricht statt aus der Karte zu laufen. */
.dienstplan-wahl {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0 0.8rem;
}

.dienstplan-wahl-knopf {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 36px;
    margin: 0;
    padding: 0 0.85rem;
    border: 1px solid #d7dade;
    border-radius: 18px;
    background: #fff;
    color: #1c1c1e;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dienstplan-wahl-knopf:hover {
    background: #f1f3f6;
}

.dienstplan-wahl-knopf.aktiv {
    background: #24346b;
    border-color: #24346b;
    color: #fff;
}

.dienstplan-wahl-knopf .icon-svg {
    width: 15px;
    height: 15px;
}

/* Am Tablet sind Formulare sonst senkrecht angeordnet — die Plan-Knöpfe stehen nebeneinander. */
form.dienstplan-wahl.dienstplan-wahl {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: none;
}

form.dienstplan-wahl .dienstplan-wahl-knopf {
    width: auto;
    flex: 0 0 auto;
}

.fest-woche-titel {
    margin: 1rem 0 0.5rem;
    font-size: 0.95rem;
}

.day-view-room-header small {
    font-weight: 400;
    color: #6b6d73;
}

.day-view-room-header.day-view-header-ausserhalb {
    opacity: 0.45;
}

.fest-wochen-wahl {
    margin: 0.4rem 0 0.8rem;
}

.fest-wochen-wahl button {
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 0.6rem;
}

.fest-wochen-wahl button:disabled {
    opacity: 0.35;
    cursor: default;
}

.fest-woche-liste {
    margin-top: 0.9rem;
}

.historie-suche {
    max-width: 280px;
    margin: 0 0 0 auto;
    height: 36px;
}

/* Angesetzte Fortbildungen einklappbar. */
.schulung-klappe {
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #5f6368;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.schulung-klappe:hover {
    background: rgba(95, 99, 104, 0.12);
}

.schulung-klappe .icon-svg {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.schulung-offen .schulung-klappe .icon-svg {
    transform: none;
}

.schulung-kopf-text {
    cursor: pointer;
}

.schulung-kopf {
    align-items: center;
}

.schulungen-alle {
    height: 32px;
    padding: 0 0.8rem;
    font-size: 0.85rem;
    margin: 0 0 0.3rem;
}

@media (prefers-reduced-motion: reduce) {
    .schulung-klappe .icon-svg {
        transition: none;
    }
}

.qe-alle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.2rem 0 0.4rem;
    font-size: 0.95rem;
    cursor: pointer;
}

/* ToDo-Filter: Suche und Schnellfilter über der Liste. */
.todo-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.2rem 0 0.6rem;
}

.todo-filter-suche {
    flex: 1 1 180px;
    height: 34px;
    margin: 0;
    padding: 0 0.7rem;
    border-radius: 17px;
}

.todo-filter-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.todo-filter-knopf {
    height: 30px;
    margin: 0;
    padding: 0 0.7rem;
    border: 1px solid #d7dade;
    border-radius: 15px;
    background: #fff;
    color: #1c1c1e;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    width: auto;
}

.todo-filter-knopf.aktiv {
    background: #24346b;
    border-color: #24346b;
    color: #fff;
}

/* Geöffnetes ToDo: Teilschritte gut lesbar (das Fenster ist am Tag hell), Zeilen abgesetzt. */
.todo-detail-step-row {
    border-bottom: 1px solid #eef0f3;
}

.todo-detail-step-text.todo-text-done {
    color: #6b6d73;
}

/* ToDos wischen: hinter der Zeile erscheint, was passiert — links Liste (blau), rechts Datum. */
.todo-row[data-wisch-id] {
    touch-action: pan-y;
    position: relative;
}

.todo-row.todo-wischt-links {
    background: #e3ebfb;
}

.todo-row.todo-wischt-rechts {
    background: #fdf0d9;
}

.todo-row.todo-wischt-links::after,
.todo-row.todo-wischt-rechts::before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 700;
    pointer-events: none;
}

.todo-row.todo-wischt-links::after {
    content: "Liste →";
    right: 0.8rem;
    color: #24346b;
}

.todo-row.todo-wischt-rechts::before {
    content: "← Datum";
    left: 0.8rem;
    color: #8a5a00;
}

.todo-wisch-menue {
    min-width: 13rem;
}

.todo-wisch-menue .menue-eintrag-knopf {
    width: 100%;
    margin-top: 0.25rem;
}

.todo-wisch-datum {
    width: 100%;
    margin: 0.35rem 0 0;
    box-sizing: border-box;
}

/* Trennstrich vor den erledigten ToDos. */
.todo-trenner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.8rem 0 0.4rem;
    color: #6b6d73;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.todo-trenner::before,
.todo-trenner::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #d7dade;
}

/* Feste ToDo-Listen (Heute, Geplant, Wichtig, Vergeben, Aufgaben) oben in der Seitenleiste. */
.todo-list-row-smart .todo-list-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}

.todo-smart-symbol {
    display: inline-flex;
    color: #5b6fae;
}

.todo-smart-symbol .icon-svg {
    width: 16px;
    height: 16px;
}

.todo-list-zahl {
    margin-left: auto;
    font-size: 0.78rem;
    color: #6b6d73;
}

.todo-row-liste {
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 6px;
    background: #eef0f3;
    color: #5f6368;
    font-size: 0.72rem;
}

/* Vom Filter ausgeblendet: .todo-row ist sonst immer display:flex und das hidden-Attribut wirkte nicht. */
.todo-row[hidden],
.todo-trenner[hidden] {
    display: none !important;
}

.todo-trenner-datum {
    color: #24346b;
}

.todo-trenner-ueberfaellig {
    color: #c93c3c;
}

/* --- ToDos übersichtlicher --------------------------------------------------------------- */
/* Klappbereiche: erledigte standardmäßig zu, überfällige auf Wunsch. */
.todo-list.erledigte-zu .todo-row[data-erledigt="1"],
.todo-list.ueberfaellig-zu .todo-row[data-ueberfaellig="1"] {
    display: none;
}

button.todo-trenner {
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    height: auto;
    cursor: pointer;
}

button.todo-trenner span::before,
.todo-trenner-klappe-knopf::before {
    content: "▾ ";
}

.todo-list.erledigte-zu button.todo-trenner[data-klappe="erledigt"] span::before,
.todo-list.ueberfaellig-zu .todo-trenner-klappe-knopf::before {
    content: "▸ ";
}

.todo-trenner-mit-knoepfen {
    gap: 0.4rem;
}

.todo-trenner-klappe-knopf,
.todo-trenner-aktion {
    background: none;
    border: none;
    padding: 0 0.2rem;
    height: auto;
    width: auto;
    margin: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.todo-trenner-aktion {
    color: #24346b;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.todo-trenner-person {
    color: #24346b;
}

/* Ruhigere Zeilen: Teilschritte und Listenname erst beim Überfahren (am Tablet im geöffneten ToDo). */
.todo-row .todo-row-steps {
    display: none;
}

@media (hover: hover) {
    .todo-row:hover .todo-row-steps {
        display: block;
    }

    .todo-row:hover .todo-row-liste span {
        display: inline;
    }
}

.todo-row-liste {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.35rem;
    font-size: 0.72rem;
    color: #5f6368;
}

.todo-row-liste i {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.todo-row-liste span {
    display: none;
}

.todo-row-meintag {
    display: inline-flex;
    color: #d97706;
    vertical-align: -2px;
}

.todo-row-meintag .icon-svg {
    width: 14px;
    height: 14px;
}

.todo-list-punkt {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 0.45rem;
    flex: none;
}

.todo-section-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

/* Wochenansicht „Geplant“ */
.todo-woche-wahl {
    margin: 0.3rem 0 0.6rem;
}

.todo-woche {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
}

@media (max-width: 800px) {
    .todo-woche {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.todo-woche-tag {
    min-height: 120px;
    border: 1px solid #e3e6eb;
    border-radius: 10px;
    padding: 0.4rem;
    background: #fafbfc;
}

.todo-woche-tag.todo-woche-heute {
    border-color: #24346b;
}

.todo-woche-tag.todo-woche-ziel {
    background: #e3ebfb;
}

.todo-woche-kopf {
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.todo-woche-kopf small {
    font-weight: 400;
    color: #6b6d73;
}

.todo-woche-karte {
    background: #fff;
    border: 1px solid #d7dade;
    border-radius: 8px;
    padding: 0.35rem 0.45rem;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.todo-woche-karte.todo-woche-erledigt {
    opacity: 0.55;
    text-decoration: line-through;
}

.todo-woche-karte.todo-woche-wichtig {
    border-color: #d97706;
}

.todo-woche-karte.todo-woche-zieht {
    opacity: 0.35;
}

.todo-woche-geist {
    position: fixed;
    z-index: 999;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ToDo „Ziele“: Jahres-/Monatsziele und Tages-/Wochenziele (Bullet-Journal-Zeichen) */
.ziele {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

.ziel-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    font-size: 0.78rem;
    color: #6b6d73;
}

.ziel-legende span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ziel-svg {
    flex: none;
    color: #24346b;
}

.ziel-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0 0;
    font-size: 1.05rem;
}

.ziel-titel small {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 400;
    font-size: 0.75rem;
    color: #6b6d73;
}

.ziel-titel small .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

.ziel-monate {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 0.2rem 0.1rem 0.5rem;
}

.ziel-monat {
    flex: 0 0 min(250px, 80%);
    scroll-snap-align: start;
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    padding: 0.55rem 0.65rem;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    min-height: 170px;
}

.ziel-monat h4,
.ziel-tag h4 {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
}

.ziel-monat h4 .icon-svg {
    width: 1rem;
    height: 1rem;
}

.ziel-monat-aktuell {
    border: 2px solid #7c3aed;
    background: #f5f0ff;
}

.ziel-monat-aktuell h4 {
    color: #6d28d9;
}

.ziel-monat-vorbei {
    opacity: 0.8;
}

.ziel-jahr {
    background: #eef3fd;
    border-color: #c9d6f2;
}

.ziel-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #7c3aed;
    color: #fff;
}

.ziel-zahl {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b6d73;
}

.ziele ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.ziel-eintrag {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.15rem 0;
    font-size: 0.86rem;
    line-height: 1.35;
}

.ziel-eintrag > .ziel-svg {
    margin-top: 0.05rem;
}

.ziel-text {
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.ziel-text:hover {
    text-decoration: underline;
}

.ziel-erledigt .ziel-text {
    color: #8a8c91;
}

.ziel-abgesagt .ziel-text {
    color: #8a8c91;
    text-decoration: line-through;
}

.ziel-verschoben {
    color: #8a8c91;
}

.ziel-verschoben .ziel-svg,
.ziel-erledigt .ziel-svg,
.ziel-abgesagt .ziel-svg {
    color: #8a8c91;
}

.ziel-teilweise .ziel-svg {
    color: #d97706;
}

.ziel-termin .ziel-svg {
    color: #0891b2;
}

.ziel-stern .icon-svg {
    width: 0.8rem;
    height: 0.8rem;
    color: #d97706;
}

.ziel-person,
.ziel-schritte {
    font-size: 0.74rem;
    color: #6b6d73;
    white-space: nowrap;
}

.ziel-menue-knopf {
    position: relative;
    flex: none;
}

.ziel-menue-knopf > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    border-radius: 4px;
}

.ziel-menue-knopf > summary::-webkit-details-marker {
    display: none;
}

.ziel-menue {
    position: fixed;
    z-index: 60;
    min-width: 200px;
    background: #fff;
    border: 1px solid #d7dade;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
    padding: 0.3rem;
}

.ziel-menue form {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.ziel-menue button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    background: none;
    border: none;
    color: #1d1d1f;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.ziel-menue button.aktiv {
    background: #eef3fd;
    font-weight: 600;
}

.ziel-menue .ziel-verschieben {
    border-top: 1px solid #e3e6eb;
    margin-top: 0.25rem;
    padding: 0.35rem 0.2rem 0.1rem;
}

.ziel-menue .ziel-verschieben input {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    padding: 0.2rem;
}

.ziel-menue .ziel-verschieben button {
    width: auto;
    background: #24346b;
    color: #fff;
    font-size: 0.78rem;
}

.ziel-neu {
    display: flex;
    flex-direction: row;
    margin: 0.3rem 0 0;
}

.ziel-neu input {
    width: 100%;
    border: none;
    border-top: 1px dashed #d7dade;
    background: transparent;
    padding: 0.35rem 0.1rem 0.1rem;
    font-size: 0.82rem;
}

.ziel-neu input:focus {
    outline: none;
    border-top-color: #24346b;
}

.ziel-fertig summary {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-size: 0.82rem;
    color: #16a34a;
}

.ziel-fertig summary .icon-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ziel-trenner {
    border-top: 2px dashed #c9ccd2;
    margin: 0.6rem 0 0.2rem;
}

.ziel-woche-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Wie im Konzept: links Mo–Mi, rechts Do, Fr und „Nicht vergessen!“. */
.ziel-woche {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 0.5rem;
}

.ziel-tag {
    border: 1px solid #e3e6eb;
    border-radius: 12px;
    padding: 0.5rem 0.65rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}

.ziel-tag h4 small {
    font-weight: 400;
    color: #6b6d73;
}

.ziel-tag-heute {
    border: 2px solid #24346b;
}

.ziel-nicht-vergessen {
    background: #fff8e6;
    border-color: #f1d9a0;
}

.ziel-tag-wochenende {
    grid-row: auto;
    background: #fafbfc;
}

.ziel-hinweis {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    color: #6b6d73;
    margin: 0.2rem 0 0;
}

.ziel-hinweis .icon-svg {
    width: 0.9rem;
    height: 0.9rem;
}

@media (max-width: 700px) {
    .ziel-woche {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

.ziel-oben {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    min-width: 0;
}

.ziel-oben > .ziel-jahr {
    flex: 0 0 min(230px, 40%);
    margin: 0.2rem 0 0.5rem;
}

.ziel-oben > .ziel-monate {
    flex: 1;
    min-width: 0;
    position: relative;
}

.ziel-wochenende {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (max-width: 700px) {
    .ziel-oben {
        flex-direction: column;
    }

    .ziel-oben > .ziel-jahr {
        flex-basis: auto;
    }

    .ziel-wochenende {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Seite ToDo auf schmalen Bildschirmen: Listenauswahl über dem Inhalt statt schmal daneben. */
@media (max-width: 900px) {
    .todo-seite .todo-widget-body {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .todo-seite .todo-lists-sidebar {
        flex: none;
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #eceef1;
        padding-bottom: 0.5rem;
    }
}

.ziel-titel {
    flex-wrap: wrap;
}

.ziel-woche-kopf .monatswahl {
    min-width: 0;
}

@media (max-width: 700px) {
    .ziel-woche-kopf .monatswahl strong {
        white-space: normal;
        font-size: 0.85rem;
        text-align: center;
    }
}

/* ToDo-Seite: Umschalter Listen | Planer */
.todo-ansicht-umschalter {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.todo-ansicht-umschalter .cal-view-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.todo-ansicht-umschalter .icon-svg {
    width: 0.95rem;
    height: 0.95rem;
}

.todo-row-monat {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.02rem 0.4rem;
    border-radius: 999px;
    background: #f5f0ff;
    color: #6d28d9;
    vertical-align: middle;
}

.ziel-titel .todo-serie-knopf {
    margin-left: 0.2rem;
}

.ziel-mehr summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: #6b6d73;
    padding: 0.15rem 0;
}


/* ToDo-Widget: Umschalter Listen | Planer oben rechts neben der Überschrift. */
.todo-ansicht-umschalter-widget {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    z-index: 2;
    margin: 0;
}

.todo-ansicht-umschalter-widget .cal-view-toggle a {
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
}

/* Planer im Widget: heute und „Nicht vergessen!“ nebeneinander; rollt in sich. */
.ziele-kompakt {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.ziel-kompakt-reihe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: start;
}

.ziele-kompakt .ziel-tag {
    min-height: 150px;
}

.ziel-ganz {
    align-self: flex-end;
    font-size: 0.8rem;
    text-decoration: none;
}

.ziel-ganz:hover {
    text-decoration: underline;
}

@container widget (max-width: 460px) {
    .ziel-kompakt-reihe {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Beim Anordnen: Kreuz zum Ausblenden und Griff für die Größe (größer, damit er sich auch mit
   dem Finger greifen lässt). Der Kalender (data-widget-fest) hat beides nicht. */
.widget-grid.edit-mode .widget-card .widget-resize-handle {
    width: 1.6rem;
    height: 1.6rem;
    touch-action: none;
    z-index: 3;
}

/* Im Anordnen-Modus gehört der Finger auf einer Kachel dem Verschieben (app.js), nicht dem
   Rollen der Seite — gerollt wird über die Lücken oder am Bildschirmrand beim Ziehen. */
.widget-grid.edit-mode .widget-card {
    touch-action: none;
}

/* Mit dem Finger: Kreuz zum Ausblenden groß genug zum Treffen. */
@media (pointer: coarse) {
    .widget-hide-btn {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.25rem;
    }

    .widget-grid.edit-mode .widget-card .widget-resize-handle {
        width: 2.4rem;
        height: 2.4rem;
    }
}

.widget-card.widget-resizing {
    outline: 2px dashed #34467f;
    outline-offset: 2px;
}

/* Die Zahl laufender Serien sitzt am ⟳-Knopf — überall (Listen, Planer, Widget). */
.todo-serie-knopf {
    position: relative;
}

.todo-serie-knoepfe {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.todo-serie-knoepfe > button {
    flex: 1;
}

.ziel-kompakt-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Verwaltung: „Einrichtungen auf einen Blick“ */
.blick-tabelle {
    width: 100%;
    font-size: 0.86rem;
}

.blick-tabelle th {
    font-size: 0.75rem;
    white-space: nowrap;
}

.blick-tabelle td small {
    display: block;
}

.blick-tabelle td:not(:first-child),
.blick-tabelle th:not(:first-child) {
    text-align: center;
    white-space: nowrap;
}

.blick-rot {
    color: #b3261e;
    font-weight: 600;
}

.blick-gruen {
    color: #18612f;
    font-weight: 600;
}

.blick-blau {
    color: #0066d6;
    font-weight: 600;
}

.blick-tabelle td a {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}

.blick-tabelle td a:hover {
    text-decoration: underline;
}

/* Verwaltungsleitung: Anträge und Mitarbeiterkarten */
.btn-klein {
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
}

.vw-antrag {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eceef1;
}

.vw-antrag > div {
    flex: 1;
    min-width: 0;
}

.vw-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.vw-karte {
    border: 1px solid #dfe3e8;
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.vw-karte-kopf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.vw-karte-kopf strong {
    flex: 1;
}

.vw-rolle {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #eef3fd;
    color: #24346b;
}

.vw-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.vw-status-dienst { background: #e3f5d8; color: #18612f; }
.vw-status-pause { background: #fff4d6; color: #9a5b00; }
.vw-status-weg { background: #eef1f5; color: #55575c; }
.vw-status-krank { background: #fde8e7; color: #b3261e; }
.vw-status-urlaub { background: #e3ebfb; color: #0066d6; }

.vw-zahlen {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: #55575c;
}

.vw-zahlen .icon-svg {
    width: 0.9rem;
    height: 0.9rem;
    vertical-align: -2px;
}

.vw-krank {
    color: #b3261e;
}

.vw-krank-melden summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: #b3261e;
}

.vw-krank-form,
.vw-urlaub-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.5rem;
}

.vw-krank-form label,
.vw-urlaub-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.78rem;
    gap: 0.15rem;
}

.vw-krank-form .checkbox-label {
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
}

.vw-krank-notiz {
    flex: 1;
    min-width: 140px;
}

.vw-urlaub-liste {
    width: 100%;
    margin-top: 0.75rem;
    font-size: 0.86rem;
}

/* Kalender der Verwaltung (Widget) */
.vw-kal {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.vw-kal th {
    font-size: 0.7rem;
    color: #6b6d73;
    text-align: center;
    padding: 0.15rem 0;
}

.vw-kal td {
    padding: 1px;
    text-align: center;
}

.vw-kal-tag {
    position: relative;
    display: block;
    padding: 0.25rem 0;
    border-radius: 6px;
    color: inherit;
    text-decoration: none;
}

.vw-kal-tag:hover {
    background: #f1f2f8;
}

.vw-kal-tag i {
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #0891b2;
}

.vw-kal-fremd {
    color: #b7b9be;
}

.vw-kal-heute {
    font-weight: 700;
    color: #24346b;
}

.vw-kal-gewaehlt {
    background: #24346b;
    color: #fff;
}

.vw-kal-gewaehlt i {
    background: #fff;
}

.vw-kal-tagtitel {
    font-size: 0.85rem;
    margin: 0.6rem 0 0.2rem;
}

.vw-kal-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.vw-kal-liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.2rem 0;
}

.vw-kal-neu summary {
    cursor: pointer;
    font-size: 0.85rem;
    margin-top: 0.4rem;
}

/* Chat über alle Einrichtungen (Träger) */
.tc-abschnitt {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.6rem 0 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid #eceef1;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b6d73;
}

.tc-abschnitt .icon-svg {
    width: 0.85rem;
    height: 0.85rem;
}

.tc-bereich {
    font-size: 0.8rem;
    font-weight: 400;
}

/* Verwaltung: Name und Bild oben rechts führen zu „Meine Daten“. */
a.admin-avatar {
    color: inherit;
    text-decoration: none;
}

a.admin-avatar[href]:hover {
    background: #f1f2f8;
}

/* Entwickler: Einrichtungen — Aktionen kompakt, Formulare als eigene Zeile darunter. */
.einrichtung-aktionen { white-space: nowrap; }
.einrichtung-aktionen form { display: inline; margin: 0; }
.einrichtung-aktionen button { width: auto; margin: 2px 0; }
.belegung { white-space: nowrap; }
.einrichtung-bearbeiten > td { background: var(--flaeche-gedimmt, rgba(0, 0, 0, .025)); }
.einrichtung-formulare { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; padding: 8px 0; }
.einrichtung-formulare h4 { margin: 0 0 8px; }
.leitung-verwalten { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--rand, #e5e7eb); }
.leitung-verwalten:last-child { border-bottom: 0; }
.entfernen-bestaetigen { display: block !important; white-space: normal; margin-top: 6px; max-width: 320px; }
.entfernen-bestaetigen[hidden] { display: none !important; }
.loeschen-formular { max-width: 640px; }
.zeitplan-tage, .zeitplan-zeiten { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.zeitplan-zeiten input { width: auto; }
.zeitplan-stand p { margin: 4px 0; }
/* Kacheln zu Menüpunkten, die der Entwickler nicht freigegeben hat (app/menue.py). */
.widget-card.menue-gesperrt, .detail-panel.menue-gesperrt { display: none !important; }
.menue-freigaben { columns: 2 280px; column-gap: 24px; margin-bottom: 12px; }
.menue-freigaben label { break-inside: avoid; display: block; }
.menue-freigaben .menue-unterpunkt { padding-left: 24px; }
.protokoll-tabelle td { vertical-align: top; }
.protokoll-tabelle .nowrap { white-space: nowrap; }
.datenauskunft-knopf { display: inline-block; font-size: .82em; padding: 3px 10px; border: 1px solid var(--rand, #d1d5db);
    border-radius: 999px; text-decoration: none; color: inherit; margin-right: 6px; white-space: nowrap; }
.datenauskunft-knopf:hover { border-color: var(--akzent, #2563eb); }
.notfallschluessel code { font-size: 1.2em; letter-spacing: .05em; word-spacing: .4em; }

/* Essen abhaken auf der Kinderkarte (_kind_kachel.html, essen_knopf). */
.child-card-essen { color: #9ca3af; display: inline-grid; place-items: center; }
.child-card-essen svg { width: 1.05rem; height: 1.05rem; }
.child-card-essen-angemeldet { border-color: #f59e0b; color: #b45309; }
.child-card-essen-done { background: #f59e0b; border-color: #f59e0b; color: white; cursor: pointer; }
/* Das Besteck steht unten rechts in der Karte — oben bleiben Ankunft, Gehzeit, Name und Status. */
.child-card { position: relative; }
.child-card-essen-ecke { position: absolute; right: 12px; bottom: 10px; }

/* --- Tablet im Hochformat (641–1100 px) ------------------------------------------------------
   Die Seitenleiste steht nur als Symbolleiste da (app.js setzt dafür „collapsed“), der Inhalt
   bekommt fast die ganze Breite. Der Knopf oben in der Leiste legt sie als Schublade über den
   Inhalt; ein abgedunkelter Hintergrund zeigt, dass ein Tipp daneben sie wieder schließt. */
@media (orientation: portrait) and (min-width: 641px) and (max-width: 1100px) {
    .admin-sidebar.schublade {
        position: fixed;
        left: 0;
        top: var(--topbar-height, 64px);
        width: min(300px, 80vw);
        height: calc(100vh - var(--topbar-height, 64px));
        z-index: 60;
        box-shadow: 6px 0 28px rgba(0, 0, 0, 0.18);
    }

    /* Die Leiste verlässt beim Öffnen den Fluss — der Platzhalter verhindert, dass der Inhalt
       darunter um ihre Breite nach links springt. */
    body.schublade-offen .page-shell {
        padding-left: 56px;
    }

    body.schublade-offen::after {
        content: "";
        position: fixed;
        inset: var(--topbar-height, 64px) 0 0 0;
        background: rgba(0, 0, 0, 0.28);
        z-index: 55;
    }

    /* Anordnen braucht die volle Leiste — in der Schublade ja, in der Symbolleiste nicht. */
    .admin-sidebar.schublade .nav-edit-toggle {
        display: block;
    }

    /* Kopfzeile: Die Uhr in der Mitte entfällt — sonst schiebt sie sich über die Symbole, und
       das Tablet zeigt die Uhrzeit ohnehin oben in seiner Statusleiste. */
    .topbar-clock {
        display: none;
    }

    /* Offene Urlaubsanträge: Art-Auswahl und Knöpfe untereinander statt nebeneinander — sonst
       ragt die letzte Spalte über den Bildschirmrand. */
    .zeile-knoepfe {
        flex-wrap: wrap;
    }

    .zeile-knoepfe .art-auswahl {
        max-width: 8.5rem;
    }
}

/* --- Betreuungszeiten (Einstellungen, Kind anlegen, Kinderakte) ------------------------------- */
.zeile-gedimmt td {
    color: #8a8c92;
}

.bz-zeiten {
    display: flex;
    gap: 0.75rem;
}

.bz-zeiten > div {
    flex: 1;
}

.bz-tage {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.bz-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.4rem;
    padding: 0 0.7rem;
    border: 1px solid #d5d8de;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
}

.bz-tag:has(input:checked) {
    border-color: #34467f;
    background: #e7eaf4;
}

.child-card-vertrag {
    color: #4b5563;
}


.bz-auswahl {
    border: 1px solid #e2e4e8;
    border-radius: 10px;
    padding: 0.6rem 0.9rem 0.8rem;
    margin: 0.5rem 0 0.9rem;
}

.bz-auswahl legend {
    font-weight: 600;
    padding: 0 0.3rem;
}

.bz-auswahl-titel {
    display: block;
    font-size: 0.85rem;
    color: #6b6d73;
    margin: 0.3rem 0 0.3rem;
}

/* Statistik → Kinder → Betreuungszeiten: eine Tabelle, je Art eine Gruppenzeile, Felder nach Kinderzahl abgestuft. */
.bz-stat-kopf {
    margin: 0 0 0.8rem;
}

.bz-statistik {
    width: 100%;
    max-width: 44rem;
    table-layout: fixed;
}

.bz-statistik th:first-child,
.bz-statistik td:first-child {
    width: 11rem;
}

.bz-statistik .bz-zahl {
    text-align: center;
    width: 4.2rem;
}

.bz-statistik .bz-gruppe th {
    text-align: left;
    padding-top: 0.9rem;
    font-size: 0.9rem;
    color: #34467f;
    background: transparent;
    border-bottom: 2px solid #34467f;
}

.bz-statistik .bz-null {
    color: #9a9ca3;
}

.bz-statistik .bz-summe {
    font-weight: 700;
    border-left: 1px solid #e2e4e8;
}

.bz-statistik .bz-alle td {
    font-weight: 600;
    border-top: 1px solid #c9ccd3;
    background: #f5f6f8;
}

.bz-stufe-1 { background: rgba(52, 70, 127, 0.08); }
.bz-stufe-2 { background: rgba(52, 70, 127, 0.18); }
.bz-stufe-3 { background: rgba(52, 70, 127, 0.30); }
.bz-stufe-4 { background: rgba(52, 70, 127, 0.44); color: #111827; font-weight: 600; }

.bz-legende {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
}

/* Beobachtung nach dem ABC-Modell (Kinderakte, OGS): Umschalter ohne JavaScript, Formular, Anzeige. */
.beo-umschalter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.beo-art-feld {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.beo-art-reiter {
    padding: 0.45rem 0.95rem;
    border: 1px solid #d5d8de;
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.beo-art-feld:checked + .beo-art-reiter {
    background: #34467f;
    border-color: #34467f;
    color: #ffffff;
}

.beo-art-feld:focus-visible + .beo-art-reiter {
    outline: 2px solid #34467f;
    outline-offset: 2px;
}

.beo-frei,
.beo-abc {
    flex-basis: 100%;
}

.beo-abc {
    display: none;
}

#beo-art-abc:checked ~ .beo-abc {
    display: block;
}

#beo-art-abc:checked ~ .beo-frei {
    display: none;
}

.beo-formular {
    display: grid;
    gap: 0.9rem;
    max-width: 46rem;
}

.beo-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.2rem;
}

.beo-zeile label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.beo-bereiche {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    border: 1px solid #e2e4e8;
    border-radius: 10px;
    padding: 0.5rem 0.9rem 0.8rem;
    margin: 0;
}

.beo-bereiche legend {
    font-weight: 600;
    padding: 0 0.3rem;
}

.beo-bereich {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

.beo-feld {
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    column-gap: 0.7rem;
    row-gap: 0.2rem;
    align-items: start;
}

.beo-feld .beo-buchstabe {
    grid-row: 1 / span 3;
}

.beo-feld small {
    color: #6b6d73;
}

.beo-feld textarea {
    width: 100%;
    box-sizing: border-box;
}

.beo-buchstabe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: #34467f;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
}

.beo-fehler {
    margin: 0;
    color: #b42318;
    font-weight: 600;
}

.beo-frei .beo-leitfaden {
    margin-bottom: 0.8rem;
}

.beo-leitfaden summary {
    cursor: pointer;
    font-weight: 600;
    color: #34467f;
}

.beo-leitfaden ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

.beo-karte {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.beo-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.8rem;
}

.beo-datum,
.beo-fuss {
    color: #6b6d73;
    font-size: 0.9rem;
}

.beo-abc-zeile {
    display: grid;
    grid-template-columns: 1.9rem 1fr;
    gap: 0.7rem;
    align-items: start;
}

.beo-text {
    white-space: pre-line;
}

.beo-fuss {
    margin: 0;
}

.beo-druck {
    display: flex;
    flex-direction: row;
    max-width: none;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.9rem;
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
}

.beo-druck label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-weight: 600;
}

/* Beleg als Schildchen: Dateityp und Dateiname (templates/_beleg_chip.html). */
.beleg-datei {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 14rem;
    padding: 0.15rem 0.6rem 0.15rem 0.15rem;
    border: 1px solid #d5d8de;
    border-radius: 999px;
    background: #ffffff;
    color: inherit;
    font-size: 0.85rem;
    text-decoration: none;
    vertical-align: middle;
}

.beleg-datei:hover {
    border-color: #34467f;
}

.beleg-typ {
    flex: none;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: #34467f;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.beleg-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.datei-hinweis {
    display: block;
    margin-top: 0.25rem;
}

.bz-verlauf ul {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
}

/* Filterleiste über den Anwesenheitslisten (AG, Frühbetreuung). */
.liste-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.liste-filter input[type="search"] {
    flex: 1 1 12rem;
    margin: 0;
}

.liste-filter select {
    flex: 0 1 auto;
    width: auto;
    margin: 0;
}

.frueh-nachtragen {
    margin-top: 0.9rem;
}

.frueh-nachtragen select {
    width: auto;
    flex: 1 1 14rem;
}

/* Krank oder entschuldigt gemeldet: statt des Kästchens ein gedämpftes Kreuz, nicht antippbar. */
.child-card-check.liste-abgemeldet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #b91c1c;
    cursor: not-allowed;
}

.liste-grund {
    margin-left: 0.35rem;
}

/* Wochenplan des Betreuungsvertrags: passt ohne seitliches Wischen ins Fenster. */
.bz-plan {
    width: 100%;
    table-layout: fixed;
}

.bz-plan th:first-child {
    width: 3.8rem;
    white-space: nowrap;
}

.bz-plan td,
.bz-plan th {
    padding: 0.3rem 0.35rem;
}

.bz-plan select {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.bz-plan-woche th,
.bz-plan-woche td {
    background: #f6f7f9;
}

/* Fenster „Kinder hinzufügen“ der AG: Umschalter oben, darunter Liste oder Formular für Externe. */
.ag-kinder-modus {
    display: flex;
    margin-bottom: 0.9rem;
}

.ag-kinder-modus button {
    flex: 1;
    justify-content: center;
    text-align: center;
}

.ag-extern-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.ag-extern-feld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.ag-extern-feld label {
    margin: 0;
}

.ag-extern-feld input {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.ag-extern-breit {
    grid-column: 1 / -1;
}

@media (max-width: 520px) {
    .ag-extern-form {
        grid-template-columns: 1fr;
    }
}

/* Suchfeld über Tabellen (Essensplanung, Ferienanmeldung). */
.tabellen-suche {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.25rem 0 0.75rem;
}

.tabellen-suche input[type="search"] {
    flex: 1 1 auto;
    max-width: 24rem;
    margin: 0;
}

/* Personalschlüssel: Tabelle je Funktion und Vorschau der Vorgabe. */
.schluessel-funktionen input[type="number"],
.schluessel-funktionen input[type="text"] {
    width: 6rem;
    margin: 0;
}

.schluessel-vorschau {
    margin-left: 0.5rem;
    color: #1d4ed8;
}

.schluessel-fk-hinweis {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #b45309;
    font-weight: 600;
}

/* Personalschlüssel-Formular: breiter als die Formular-Grundbreite, damit die Tabelle je Funktion
   ganz zu sehen ist. */
.schluessel-formular {
    max-width: 44rem;
}

.schluessel-formular > small {
    max-width: 36rem;
}

.schluessel-funktionen td:first-child {
    white-space: nowrap;
}

/* Nur-Ansicht des Wochenplans (Akte, Eltern-Portal): ausgeschriebene Tage, Spalten nach Inhalt. */
.bz-plan.bz-plan-ansicht {
    table-layout: auto;
}

.bz-plan.bz-plan-ansicht th:first-child {
    width: auto;
    padding-right: 1rem;
}

/* Kalender (Monatsansicht): auf großen Bildschirmen auch in der Höhe ausnutzen — die Tage wachsen
   mit, bis der Monat (bis zu sechs Wochen) die Seite füllt. Auf dem Handy bleibt es kompakt. */
@media (min-width: 900px) and (min-height: 700px) {
    /* Die Höhe setzt app.js (freier Platz bis zum unteren Rand); die Wochen teilen sie gleichmäßig. */
    .cal-grid.kalender-gefuellt {
        grid-template-rows: auto repeat(var(--wochen, 6), minmax(5rem, 1fr));
    }
}

/* AG-Wochenplan: wenn app.js ihn auf die freie Höhe zieht, reichen die Tagesspalten bis unten. */
.ag-spalten[data-fuellen][style*="min-height"] {
    align-items: stretch;
}

/* Zeitleisten: alle Spaltenköpfe gleich hoch (wie die Stundenleiste links rechnet) — sonst rutschen
   die Stundenlinien an Tagen mit Feiertags- oder Ferien-Untertitel nach unten. */
.day-view-room-header {
    height: var(--day-view-header-height, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.2rem 0.4rem;
    overflow: hidden;
    line-height: 1.15;
}

.day-view-room-header small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Feste Kachelgrößen ---------------------------------------------------------------------
   Kacheln behalten auf jedem Bildschirm dieselbe Breite und Mindesthöhe: Auf großen Monitoren
   kommen mehr Kacheln in eine Reihe, statt dass sie schmaler werden und lange Namen an die Knöpfe
   stoßen. Nur auf schmalen Handys füllt eine Kachel die Breite. */
.child-card-grid {
    grid-template-columns: repeat(auto-fill, 270px);
    justify-content: start;
}

.child-card-grid > .child-card {
    min-height: 13.5rem;
}

.grid {
    grid-template-columns: repeat(auto-fill, 180px);
    justify-content: start;
}

.grid > .employee-tile-wrapper > .tile,
.grid > .tile {
    min-height: 10rem;
    height: 100%;
    box-sizing: border-box;
}

.mini-tile-grid {
    grid-template-columns: repeat(auto-fill, 130px);
    justify-content: start;
}

.mini-tile-grid.mini-tile-grid-compact {
    grid-template-columns: repeat(auto-fill, 130px);
}

/* Lange Namen umbrechen statt über Knöpfe und Symbole zu laufen. */
.child-card-name,
.child-card-name-ziel {
    min-width: 0;
    overflow-wrap: anywhere;
}

.child-card-top .anwesend-knoepfe,
.child-card-top .child-card-status {
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .child-card-grid {
        grid-template-columns: 1fr;
    }

    .grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* Zugänge der Geschäftsführung (traeger_zugaenge.html): Tabellen mit festen Spaltenanteilen, damit am
   Tablet im Hochformat nichts über den Rand läuft; Knöpfe und lange Adressen brechen um. */
.zugang-block {
    border: 1px solid rgba(128, 128, 128, 0.25);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
    margin-top: 1rem;
}

.zugang-block h4 {
    margin: 0 0 0.6rem;
}

.zugaenge-tabelle {
    width: 100%;
    table-layout: fixed;
}

.zugaenge-tabelle th {
    overflow-wrap: break-word;
}

.zugaenge-tabelle td {
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.zugaenge-tabelle select {
    width: 100%;
    max-width: 100%;
}

.zugaenge-tabelle .zeile-knoepfe {
    flex-wrap: wrap;
}

.zugaenge-tabelle .inline-form label {
    display: block;
}

#einrichtungen details > summary,
#traeger details > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    cursor: pointer;
    margin-top: 0.6rem;
}

/* Einladungen über Einrichtungen hinweg (templates/_einladung_inhalt.html) */
.btn-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: #24346b; text-decoration: underline; cursor: pointer; }
.einladung-personen { border: 1px solid #ddd; border-radius: 8px; padding: .75rem; }
.einladung-personen > input[type="text"] { width: 100%; }

/* Resturlaub und Freigabe: Die globale Formularbreite (320 px) würde Tabelle und Knöpfe abschneiden. */
#urlaub-freigabe-form {
    max-width: none;
}

#urlaub-freigabe-form th:first-child,
#urlaub-freigabe-form td:first-child {
    width: 2.5rem;
}

#urlaub-freigabe-form input[type="checkbox"] {
    padding: 0;
    width: 1.1rem;
    height: 1.1rem;
}

#urlaub-freigabe-form td:nth-child(2) {
    white-space: nowrap;
}

#urlaub-freigabe-form .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Einladungen: Formulare nutzen die volle Kartenbreite statt 320 px. */
.einladung-formular,
.einladung-antwort,
.einladung-vorschlag form {
    max-width: none;
}

/* Einladungen: Verweise als Knöpfe, Antwortknöpfe nebeneinander statt gestapelt und über die ganze Breite. */
a.btn-secondary,
a.btn-primary {
    display: inline-block;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}

a.btn-secondary {
    color: #1c1c1e;
}

.einladung-antwort {
    display: block;
}

.einladung-antwort button {
    margin: 0 0.4rem 0.4rem 0;
    padding: 0.6rem 1rem;
    font-size: 1rem;
}

.einladung-antwort button.btn-secondary {
    background: white;
    color: #1c1c1e;
    border: 1px solid #ccc;
}

.einladung-vorschlag summary {
    display: inline-block;
    padding: 0.6rem 0.9rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

.einladung-formular p > label {
    display: inline-block;
}

.einladung-zeile .btn-link {
    font-size: 1.05rem;
}

/* Dateiablage (Dokumente): breite Formulare, Tabelle darf auf kleinen Bildschirmen seitlich scrollen. */
.dokumente-formular { max-width: none; width: 100%; flex-direction: column; align-items: stretch; margin-top: .6rem; }
.dokumente-formular button { align-self: flex-start; }
.dokumente-neu > summary { display: inline-block; cursor: pointer; list-style: none; }
.dokumente-neu > summary::-webkit-details-marker { display: none; }
.dokumente-neu > summary.btn-secondary { padding: .5rem 1rem; border-radius: 8px; background: #fff; border: 1px solid #ccc; color: #1c1c1e; }
.dokumente-teilen { border: 1px solid #e3e5e8; border-radius: 8px; padding: .6rem .8rem; }
.dokumente-einrichtungen { max-height: 12rem; overflow: auto; }
.dokumente-tabelle { overflow-x: auto; }
.dokumente-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; }
.dokumente-aktionen .dokumente-formular { min-width: 16rem; }

/* Terminplanungsassistent „Wer hat Zeit?“ (app.js, _verfuegbarkeit.html): feste Zeitleiste 07–19 Uhr, eine Zeile je Person. */
.verf-assistent { margin: .6rem 0; }
.verf-assistent > summary { display: inline-block; cursor: pointer; list-style: none; padding: .45rem .9rem; border-radius: 8px; background: #fff; border: 1px solid #ccc; color: #1c1c1e; }
.verf-assistent > summary::-webkit-details-marker { display: none; }
.verf-koerper { margin-top: .6rem; }
.verf-satz { margin: 0 0 .5rem; }
.verf-satz.verf-alle-frei { color: #1a7f37; font-weight: 600; }
.verf-satz.verf-besetzt { color: #b45309; font-weight: 600; }
.verf-leiste { display: grid; gap: .25rem; max-width: 100%; }
.verf-zeile { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem; align-items: center; }
.verf-name { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verf-name.verf-unbekannt { color: #6b6d73; font-style: italic; }
.verf-spur { position: relative; height: 1.1rem; border-radius: 4px; background: #e8f5ec; border: 1px solid #cfe7d7; overflow: hidden; }
.verf-spur.verf-spur-kopf { background: none; border: none; overflow: visible; height: 1rem; }
.verf-spur .verf-stueck { position: absolute; top: 0; bottom: 0; }
.verf-stueck.verf-belegt { background: #e05252; }
.verf-stueck.verf-ausser { background: repeating-linear-gradient(135deg, #d9dce3 0 4px, #eceef2 4px 8px); }
.verf-stueck.verf-band { background: rgba(36, 52, 107, .22); border-left: 2px solid #24346b; border-right: 2px solid #24346b; box-sizing: border-box; }
.verf-spur.verf-spur-unbekannt { background: repeating-linear-gradient(135deg, #f3f4f6 0 6px, #fff 6px 12px); }
.verf-tick { position: absolute; top: 0; font-size: .7rem; color: #6b6d73; transform: translateX(-50%); }
.verf-farbe { display: inline-block; width: .9rem; height: .7rem; border-radius: 2px; vertical-align: middle; }
.verf-farbe.verf-belegt { background: #e05252; }
.verf-farbe.verf-ausser { background: repeating-linear-gradient(135deg, #d9dce3 0 3px, #eceef2 3px 6px); }
.verf-farbe.verf-band { background: rgba(36, 52, 107, .3); border: 1px solid #24346b; }
.verf-legende { font-size: .8rem; margin: .5rem 0 0; }
.verf-vorschlaege { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .6rem; }
.verf-vorschlaege .btn-secondary { padding: .3rem .7rem; border-radius: 8px; background: #fff; border: 1px solid #ccc; cursor: pointer; font: inherit; color: inherit; }
@media (max-width: 520px) { .verf-zeile { grid-template-columns: 5.5rem minmax(0, 1fr); } }

/* --- Terminplanungsassistent, zweiter Teil: Status, Tagesstreifen und Planer (app.js) ------------------------------------------ */
.verf-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.verf-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.verf-status { font-size: .72rem; color: #6b6d73; }
.verf-status-verfuegbar { color: #1a7f37; }
.verf-status-beschaeftigt { color: #b42318; }
.verf-status-ausser_dienst, .verf-status-unbekannt { color: #6b6d73; }
.verf-planer-knopf { margin-top: .6rem; display: inline-block; padding: .4rem .9rem; border-radius: 8px; background: #fff; border: 1px solid #ccc; cursor: pointer; font: inherit; color: inherit; }

/* Einladungsformular mit Tagesstreifen daneben (ab genug Breite) */
.einladung-mit-streifen { display: block; }
.verf-streifen { margin-top: 1rem; }
@media (min-width: 980px) {
    .einladung-mit-streifen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem); gap: 1.5rem; align-items: start; }
    .verf-streifen { margin-top: 0; position: sticky; top: 4.5rem; height: calc(100vh - 6rem); min-height: 28rem; }
    /* Der Streifen ersetzt die kleine Karte „Wer hat Zeit?“ */
    .einladung-mit-streifen details.verf-assistent { display: none; }
}

/* Tagesstreifen: eine Spalte je gewählter Person (und eine für den Raum), senkrechter Tag 7–19 Uhr, ein Band für die gewählte Zeit */
.verf-streifen { display: flex; flex-direction: column; min-width: 0; }
.verf-streifen[hidden] { display: none; }
.verf-streifen-kopf { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap; }
.verf-streifen-datum { font-weight: 700; font-size: .95rem; }
.verf-streifen-kopf .verf-streifen-planer { margin-left: auto; }
.verf-streifen-kopf .btn-secondary { height: 2.1rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 .7rem; border-radius: 8px; border: 1px solid #ccc; background: #fff; font: inherit; font-size: .85rem; cursor: pointer; color: #1c1c1e; }
.verf-streifen-kopf .verf-streifen-planer { background: #24346b; border-color: #24346b; color: #fff; }
.verf-streifen-gitter { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: .3rem; }
.verf-streifen-namen { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.6rem, 1fr); gap: 2px; margin-bottom: .3rem; }
.verf-streifen-person { display: flex; flex-direction: column; align-items: center; gap: .15rem; min-width: 0; font-size: .7rem; line-height: 1.1; text-align: center; }
.verf-streifen-person span:last-child { max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.verf-streifen-skala { grid-column: 1 / -1; grid-row: 2; position: relative; overflow-y: auto; min-height: 0; border-top: 1px solid #eceef1; }
.verf-streifen-innen { position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: .3rem; height: calc(24 * var(--stunde, 3.2rem)); }
.verf-streifen-stunden { position: relative; }
.verf-streifen-stunde { position: absolute; right: .2rem; transform: translateY(-50%); font-size: .7rem; color: #6b6d73; }
.verf-streifen-stunde:first-child { transform: none; }
.verf-streifen-spalten { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(2.6rem, 1fr); gap: 2px; border-left: 1px solid #d5d8de; }
.verf-streifen-linie { position: absolute; left: 0; right: 0; border-top: 1px solid #eceef1; pointer-events: none; }
.verf-streifen-spalte { position: relative; background: #f7fbf8; min-width: 0; }
.verf-streifen-spalte.verf-streifen-unbekannt { background: repeating-linear-gradient(135deg, #f3f4f6 0 6px, #fff 6px 12px); }
.verf-streifen-block { position: absolute; left: 0; right: 0; }
.verf-streifen-belegt { background: rgba(224, 82, 82, .55); }
.verf-streifen-ausser { background: repeating-linear-gradient(135deg, #d9dce3 0 4px, #eceef2 4px 8px); }
.verf-streifen-band { position: absolute; left: 0; right: 0; z-index: 2; box-sizing: border-box; min-height: 1.4rem; padding: .1rem .35rem; font-size: .72rem; line-height: 1.2; background: rgba(36, 52, 107, .18); border: 2px solid #24346b; color: #24346b; font-weight: 700; cursor: grab; touch-action: none; overflow: visible; }
.verf-streifen-band.verf-streifen-zieht { cursor: grabbing; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.verf-streifen-band:focus-visible { outline: 3px solid #24346b; outline-offset: 1px; }
.verf-streifen-band-text { pointer-events: none; }
.verf-streifen-griff { position: absolute; left: 20%; right: 20%; height: 10px; cursor: ns-resize; }
.verf-streifen-griff-oben { top: -7px; }
.verf-streifen-griff-unten { bottom: -7px; }
.verf-streifen-griff::after { content: ""; position: absolute; left: calc(50% - 9px); top: 1px; width: 18px; height: 8px; border-radius: 4px; background: #fff; border: 2px solid #24346b; box-sizing: border-box; }
.verf-streifen-block { overflow: hidden; font-size: .66rem; line-height: 1.15; color: #fff; padding: .05rem .2rem; box-sizing: border-box; }
.verf-streifen { --stunde: 3.2rem; }
.verf-streifen-gruen { background: rgba(26, 127, 55, .18); border-color: #1a7f37; color: #14532d; }
.verf-streifen-orange { background: rgba(180, 83, 9, .16); border-color: #b45309; color: #7c2d12; }
.verf-streifen-leer { grid-column: 2; color: #6b6d73; font-size: .8rem; padding: .3rem 0; }
.verf-kreis { position: relative; width: 2rem; height: 2rem; border-radius: 50%; background: #e3e7f5; color: #24346b; font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.verf-punkt { position: absolute; right: -2px; bottom: -2px; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid #fff; background: #9aa0ad; }
.verf-punkt-verfuegbar { background: #1a7f37; }
.verf-punkt-beschaeftigt { background: #e05252; }

/* Planer: Vollansicht über der Seite */
body.planer-offen { overflow: hidden; }
.planer-ueberlagerung { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.planer-ueberlagerung[hidden] { display: none; }
.planer { background: #fff; border-radius: 12px; width: min(100%, 72rem); height: min(44rem, 100%); max-height: 100%; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); overflow: hidden; }
.planer-kopf { display: grid; gap: .6rem; padding: .8rem 1rem .7rem; border-bottom: 1px solid #e2e4e8; }
.planer-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
.planer-zeile:first-child { align-items: center; }
.planer-titel { font-size: 1.15rem; }
.planer-feld { display: flex; flex-direction: column; font-size: .72rem; color: #6b6d73; gap: .15rem; }
.planer-feld input { font: inherit; font-size: .95rem; color: #1c1c1e; height: 2.3rem; box-sizing: border-box; padding: 0 .5rem; border: 1px solid #ccc; border-radius: 6px; }
.planer-navi { display: flex; gap: .3rem; margin-left: auto; align-items: flex-end; }
.planer-kopf .btn-secondary, .planer-fuss .btn-secondary, .planer-fuss .btn-primary { height: 2.3rem; box-sizing: border-box; padding: 0 .9rem; border-radius: 8px; border: 1px solid #ccc; background: #fff; font: inherit; cursor: pointer; color: #1c1c1e; display: inline-flex; align-items: center; justify-content: center; }
.planer-fuss .btn-primary { background: #24346b; color: #fff; border-color: #24346b; }
.planer-koerper { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 13rem minmax(0, 1fr); overflow-y: auto; overflow-x: hidden; padding: .6rem 1rem; }
.planer-namen { display: flex; flex-direction: column; }
.planer-kopf-platz { height: 3.2rem; flex: none; }
.planer-zeit { position: relative; min-width: 0; overflow-x: auto; }
.planer-innen { position: relative; width: calc(var(--tage, 3) * 40rem); }
.planer-tage { display: flex; }
.planer-tagname { width: 40rem; flex: none; box-sizing: border-box; height: 1.6rem; padding-left: .4rem; font-weight: 700; font-size: .85rem; border-left: 1px solid #d5d8de; white-space: nowrap; }
.planer-achse { display: flex; height: 1.6rem; }
.planer-achsen-segment { position: relative; width: 40rem; flex: none; }
.planer-stunde { position: absolute; top: .2rem; transform: translateX(-50%); font-size: .7rem; color: #6b6d73; }
.planer-spuren { position: relative; }
.planer-reihe { display: flex; height: 2.7rem; box-sizing: border-box; border-bottom: 1px solid #eceef1; }
.planer-segment { position: relative; width: 40rem; flex: none; border-left: 1px solid #d5d8de; background-image: linear-gradient(to right, #eceef1 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.planer-gruppe, .planer-name { height: 2.7rem; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding-right: .5rem; border-bottom: 1px solid #eceef1; }
.planer-gruppe { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: #3c4257; background: #f4f5f8; padding-left: .4rem; }
.planer-name-text { display: flex; flex-direction: column; min-width: 0; font-size: .85rem; line-height: 1.15; }
.planer-name-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planer-x { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: #6b6d73; padding: 0 .3rem; }
.planer-x:hover { color: #b42318; }
.planer-reihe-leer { background: #f4f5f8; }
.planer-reihe-unbekannt { background: repeating-linear-gradient(135deg, #f3f4f6 0 6px, #fff 6px 12px); }
.planer-segment .verf-stueck { position: absolute; top: .5rem; bottom: .5rem; border-radius: 3px; overflow: hidden; font-size: .66rem; line-height: 1.1; color: #fff; padding: .1rem .25rem; box-sizing: border-box; white-space: nowrap; }
.planer-belegt { background: #1f2a44; }
.planer-ausser { background: repeating-linear-gradient(135deg, #d9dce3 0 4px, #eceef2 4px 8px); top: 0 !important; bottom: 0 !important; border-radius: 0 !important; }
.planer-band { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border: 2px solid #1d4ed8; background: rgba(59, 130, 246, .16); cursor: grab; touch-action: none; min-width: 6px; z-index: 2; }
.planer-band:focus-visible { outline: 3px solid #24346b; outline-offset: 1px; }
.planer-band-gruen { border-color: #1a7f37; background: rgba(26, 127, 55, .14); }
.planer-band-text { position: absolute; top: .15rem; left: .3rem; font-size: .72rem; font-weight: 700; color: #1d4ed8; background: rgba(255, 255, 255, .85); border-radius: 3px; padding: 0 .25rem; pointer-events: none; white-space: nowrap; }
.planer-griff { position: absolute; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.planer-griff-links { left: -6px; }
.planer-griff-rechts { right: -6px; }
.planer-griff::after { content: ""; position: absolute; left: 3px; top: calc(50% - 8px); width: 8px; height: 16px; border-radius: 4px; background: #fff; border: 2px solid #1d4ed8; box-sizing: border-box; }
.planer-fuss { border-top: 1px solid #e2e4e8; padding: .6rem 1rem .8rem; display: grid; gap: .4rem; }
.planer-vorschlaege { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.planer-legende { margin: 0; font-size: .8rem; }
.planer-hinweis { margin: 0; font-size: .75rem; }
.planer-farbe { display: inline-block; width: .9rem; height: .7rem; border-radius: 2px; vertical-align: middle; }
.planer-farbe.planer-belegt { background: #1f2a44; }
.planer-farbe.planer-ausser { top: auto !important; bottom: auto !important; border-radius: 2px !important; }
.planer-farbe.planer-reihe-unbekannt { border: 1px solid #ccc; }
.planer-band-farbe { background: rgba(59, 130, 246, .3); border: 1px solid #1d4ed8; }
@media (max-width: 760px) { .planer-koerper { grid-template-columns: 8.5rem minmax(0, 1fr); } .planer-navi { margin-left: 0; } }

/* Termin-Fenster der Leitung mit Tagesstreifen rechts (wie Outlook) und großem Textfeld */
.qe-text { width: 100%; min-height: 8rem; resize: vertical; font: inherit; line-height: 1.4; box-sizing: border-box; }
.einladung-text { min-height: 11rem; resize: vertical; font: inherit; line-height: 1.45; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid #ccc; border-radius: 8px; }
.qe-zweispaltig { display: block; }
.qe-zweispaltig[hidden] { display: none; }
.qe-zweispaltig .verf-streifen { display: none; }
@media (min-width: 900px) {
    .quick-event-box.qe-mit-streifen { width: auto; max-width: min(96vw, 76rem); }
    /* Formular links, Tagesstreifen rechts über die volle Höhe des Fensters, die ganze Restbreite genutzt */
    .qe-zweispaltig { display: grid; grid-template-columns: 24rem 30rem; gap: 1rem; align-items: start; }
    .qe-zweispaltig[hidden] { display: none; }
    /* Das Fenster bleibt klein (so hoch wie der Streifen): das Formular links scrollt für sich, „Speichern“ bleibt unten sichtbar. */
    .qe-zweispaltig > form { max-width: none; width: 100%; max-height: min(38rem, calc(90vh - 3.2rem)); overflow-y: auto; padding-right: .6rem; scrollbar-gutter: stable; }
    .qe-zweispaltig > form .qe-actions { position: sticky; bottom: 0; background: #fff; padding: .6rem 0 .2rem; z-index: 3; }
    .qe-zweispaltig .verf-streifen { display: flex; margin-top: 0; position: sticky; top: 0; align-self: start; width: 100%; height: min(38rem, calc(90vh - 3.2rem)); min-height: 24rem; }
    .qe-zweispaltig .verf-streifen-kopf { padding-right: 2.2rem; }  /* Platz für das Kreuz in der Ecke */
    .qe-zweispaltig details.verf-assistent { display: none; }
}

/* Planer im Termin-Fenster / in der Sprechblase: ersetzt das Formular, gleiche Größe */
.planer-inline { display: flex; flex-direction: column; min-width: 0; }
.planer-inline[hidden] { display: none; }
.planer-inline .planer { width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; background: transparent; }
.planer-inline .planer-kopf { padding: .2rem 2.6rem .7rem 0; }
.planer-inline .planer-koerper { padding: .4rem 0; }
.planer-inline .planer-fuss { padding: .5rem 0 0; }

/* Dokumente: Ordner als Kacheln, Pfad über der Dateiliste */
.dokumente-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .8rem; }
.dokumente-kachel { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1rem; border: 1px solid #e3e6eb; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .05); transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; min-width: 0; }
.dokumente-kachel:hover, .dokumente-kachel:focus-visible { border-color: #24346b; box-shadow: 0 4px 14px rgba(36, 52, 107, .15); transform: translateY(-1px); }
.dokumente-kachel-symbol { display: inline-flex; width: 2.6rem; height: 2.6rem; align-items: center; justify-content: center; border-radius: 10px; background: #e8ecf8; color: #24346b; margin-bottom: .3rem; }
.dokumente-kachel-symbol .icon-svg { width: 1.5rem; height: 1.5rem; }
.dokumente-kachel-fremd .dokumente-kachel-symbol { background: #e6f1fb; color: #1d5fa8; }
.dokumente-kachel-name { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.dokumente-kachel-info { font-size: .85rem; color: #6b6d73; }
.dokumente-pfad { margin: 0 0 .3rem; font-size: .88rem; color: #6b6d73; }
.dokumente-pfad a { color: #24346b; text-decoration: none; }
.dokumente-pfad a:hover { text-decoration: underline; }

/* Einladung im Kalender: Antworten, Gegenvorschlag, Ändern und Absagen in einer Sprechblase am Termin. */
.kal-blase.kal-blase-einladung {
    width: 26rem;
    max-height: calc(100vh - 16px);
    overflow: auto;
    padding: 0.5rem 0.9rem 0.9rem;
}
.kal-blase-einladung .card { border: none; box-shadow: none; padding: 0; margin: 0; }
.kal-blase-einladung .kal-blase-zu {
    position: sticky; top: 0; float: right; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%;
    background: transparent; color: #5f6368; font-size: 1.4rem; line-height: 1; cursor: pointer; z-index: 1;
}
.kal-blase-einladung .kal-blase-zu:hover { background: #f1f3f4; }
.kal-blase-einladung table { font-size: 0.85rem; }
.kal-blase-einladung form { max-width: none; }
.kal-blase.kal-blase-einladung.kal-blase-blatt { width: auto; left: 0; right: 0; bottom: 0; top: auto; position: fixed; border-radius: 16px 16px 0 0; max-height: 85vh; }
/* Markierung der Einladungen im Kalender (Rand in der Farbe der Antwort, „neu“ als Punkt) */
.event-chip.einl-chip { border-left: 4px solid #8a94a6; }
.event-chip.einl-zugesagt { border-left-color: #1e8e3e; }
.event-chip.einl-vielleicht { border-left-color: #f29900; }
.event-chip.einl-abgesagt { border-left-color: #d93025; text-decoration: line-through; }
.event-chip.einl-offen { border-left-color: #1a73e8; }
.event-chip.einl-ich { border-left-color: #6d4aff; }
.event-chip[data-neu="1"]::after { content: "●"; color: #1a73e8; margin-left: 0.3rem; font-size: 0.7em; }
.raumanfragen-leiste { border-left: 4px solid #f29900; }
.kal-blase-einladung form.einladung-formular { max-width: none; width: 100%; display: block; }
.kal-blase-einladung form.einladung-formular input[type=text], .kal-blase-einladung form.einladung-formular textarea,
.kal-blase-einladung form.einladung-formular select { width: 100%; box-sizing: border-box; }
.kal-blase-einladung .einladung-mit-streifen { display: block; }
.kal-blase-einladung .einladung-mit-streifen details.verf-assistent { display: block; }
.kal-blase-einladung h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.kal-blase-einladung form.einladung-formular input[type=text] { max-width: none; }

/* Dokumente: Zurück-Knopf, Plus-Menü, Filterleiste wie im Finder */
.dokumente-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin: 0 0 .6rem; }
.dokumente-kopf .dokumente-pfad { margin: 0; }
.dokumente-zurueck { display: inline-flex; align-items: center; gap: .35rem; height: 2.3rem; box-sizing: border-box; padding: 0 .8rem; border-radius: 8px; border: 1px solid #ccc; background: #fff; color: #1c1c1e; text-decoration: none; font-size: .9rem; }
.dokumente-zurueck:hover, .dokumente-zurueck:focus-visible { border-color: #24346b; color: #24346b; }
.dokumente-zurueck .icon-svg { width: 1.1rem; height: 1.1rem; }
.dokumente-plusmenue { position: relative; }
.dokumente-plusmenue > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dokumente-plusmenue > summary::-webkit-details-marker { display: none; }
.dokumente-plusmenue-liste { position: absolute; top: calc(100% + .4rem); right: 0; z-index: 20; display: flex; flex-direction: column; min-width: 12rem; padding: .3rem; background: #fff; border: 1px solid #e3e6eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
.dokumente-plusmenue-liste button { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .55rem .7rem; border: none; border-radius: 6px; background: transparent; color: #1c1c1e; font: inherit; text-align: left; cursor: pointer; }
.dokumente-plusmenue-liste button:hover, .dokumente-plusmenue-liste button:focus-visible { background: #e8ecf8; }
.dokumente-plusmenue-liste .icon-svg { width: 1.1rem; height: 1.1rem; }
.dokumente-unterordner { margin: .6rem 0 1.2rem; }
.dokumente-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: .4rem 0 .8rem; max-width: none; flex-direction: row; }
.dokumente-filter label { display: flex; flex-direction: column; gap: .15rem; font-size: .75rem; color: #6b6d73; }
.dokumente-filter select, .dokumente-filter input[type=search] { height: 2.3rem; box-sizing: border-box; font: inherit; font-size: .9rem; padding: 0 .6rem; border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #1c1c1e; }
.dokumente-filter input[type=search] { flex: 1 1 14rem; max-width: 22rem; }
.dokumente-dialog-knoepfe { margin-top: .8rem; justify-content: flex-end; }
.dokumente-aktionen .zeile-knoepfe { flex-wrap: wrap; }
.dokumente-aktionen .zeile-knoepfe { align-items: center; }
.dokumente-neu > summary.zeile-knopf { display: inline-flex; align-items: center; justify-content: center; }
.dokumente-aktionen { vertical-align: middle; }
.dokumente-kopf { padding-right: 5.5rem; }

/* Wer ist wann wo (nur Leitung, eigene Mitarbeiter): Dienst laut Dienstplan, nicht im Dienst, belegt — mit Beschriftung */
.verf-streifen-block { overflow: hidden; box-sizing: border-box; font-size: .62rem; line-height: 1.1; padding: .1rem; writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; text-overflow: ellipsis; color: #1c1c1e; }
.verf-streifen-belegt { color: #fff; }
.verf-streifen-ausser { color: #5f6368; }
.verf-streifen-dienst { background: rgba(36, 120, 200, .16); border-left: 3px solid #2478c8; color: #1d4e89; }
.planer-dienst { background: #dbeafe; color: #1d4e89 !important; top: 0 !important; bottom: 0 !important; border-radius: 0 !important; border-left: 3px solid #2478c8; }
.planer-segment .planer-dienst, .planer-segment .planer-ausser { z-index: 0; }
.planer-segment .planer-belegt { z-index: 1; }
.planer-inline { height: min(38rem, calc(90vh - 3.2rem)); min-height: 24rem; }
.planer-inline .planer { height: 100%; }
.planer-inline .planer-koerper { flex: 1 1 auto; min-height: 0; }

/* Tagesstreifen: ein Bildlauf in beide Richtungen; Namen oben und Uhrzeiten links bleiben beim Blättern stehen */
.verf-streifen-scroll { flex: 1; min-height: 0; overflow: auto; position: relative; }
.verf-streifen-gitter { flex: none; min-height: 0; min-width: max(100%, calc(2.6rem + var(--n, 1) * 3.5rem)); }
.verf-streifen-namen, .verf-streifen-spalten { grid-auto-columns: minmax(3.4rem, 1fr); }
.verf-streifen-namen { position: sticky; top: 0; z-index: 4; background: var(--verf-grund, #fff); margin-bottom: 0; padding-bottom: .3rem; }
.verf-streifen-skala { overflow: visible; }
.verf-streifen-stunden { position: sticky; left: 0; z-index: 3; background: var(--verf-grund, #fff); }
.qe-zweispaltig .verf-streifen-kopf { margin-top: -.75rem; }
.dokumente-kacheln { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
@media (max-width: 520px) { .dokumente-kopf { padding-right: 0; margin-top: 1.6rem; } }

/* Kalender-Widget der Verwaltung: zwei Spalten (Monat | Tag und Einladungen), größere Tage */
.vw-kal-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin-bottom: .4rem; }
.vw-kal-kopf h2 { margin: 0; }
.vw-kal-gross { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 8px; border: 1px solid #ccc; background: #fff; color: #24346b; text-decoration: none; font-size: .85rem; }
.vw-kal-gross:hover { border-color: #24346b; }
.vw-kal-zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 760px) { .vw-kal-zwei { grid-template-columns: minmax(0, 1fr); } }
.vw-kal-zwei .vw-kal { font-size: .9rem; }
.vw-kal-zwei .vw-kal-tag { padding: .6rem 0; }
.vw-kal-rechts .vw-kal-tagtitel:first-child { margin-top: 0; }
.vw-kal-einladung { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-kal-einladung:hover { text-decoration: underline; }
.vw-kal-abgesagt { text-decoration: line-through; }
.vw-kal-kopf .vw-kal-gross { font-size: .85rem; line-height: 1.2; padding: .3rem .75rem; height: auto; min-height: 0; }
.vw-kal-kopf, .vw-kal-zwei { flex: none; }
.vw-kal-kopf { margin-top: .8rem; }

/* Kalender-Kachel der Übersichtsseiten: zwei Spalten (Raster | Anstehend), das Raster nutzt die Breite */
.kal-widget-zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 760px) { .kal-widget-zwei { grid-template-columns: minmax(0, 1fr); } }
.kal-widget-links { min-width: 0; }
.kal-widget-links .cal-mini-month { width: 100%; }
.kal-widget-links .cal-mini-day { font-size: .95rem; padding-block: .55rem; }
.kal-anstehend-titel { font-size: .85rem; margin: .2rem 0 .4rem; }
.kal-anstehend-liste { list-style: none; margin: 0; padding: 0; font-size: .85rem; display: flex; flex-direction: column; gap: .15rem; }
.kal-anstehend-liste li { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .3rem .4rem; border-radius: 6px; min-width: 0; }
.kal-anstehend-liste li > a, .kal-anstehend-zeile { display: flex; gap: .5rem; min-width: 0; color: inherit; text-decoration: none; flex: 1; }
.kal-anstehend-liste li > a:hover .kal-anstehend-text { text-decoration: underline; }
.kal-anstehend-zeit { flex: none; font-weight: 700; color: #24346b; font-variant-numeric: tabular-nums; }
.kal-anstehend-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-anstehend-heute { background: #eef1fb; }

/* Personalakte, Reiter Fortbildungen: beide Abschnitte mit gleich großer Überschrift und
   deutlichem Abstand dazwischen (vorher klebte die zweite Überschrift direkt an der Tabelle). */
.card h2.fortbildung-abschnitt {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 1rem;
}

.card h2.fortbildung-abschnitt-folge {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e3e5ea;
}

/* „Unbezahlt krank“ (zählt nicht zur Arbeitszeit): gedämpftes Grau statt Rot. */
.krank-woche-punkt.krank-woche-unbezahlt {
    color: #6b7280;
}

/* --- Übersicht der Leitung: Kopf (Kennzahlen, „Was braucht mich?“, Gruppen), Startpunkt der Verwaltung, Tagesablauf --- */
.uk { margin-bottom: 1.25rem; }
.uk-kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, 190px); gap: .75rem; margin-bottom: 1rem; }
.uk-kennzahl { display: block; background: #fff; border: 1px solid #eceef1; border-radius: 12px; padding: .8rem 1rem; text-decoration: none; color: inherit; }
.uk-kennzahl b { display: block; font-size: 1.6rem; line-height: 1.1; color: #24346b; }
.uk-kennzahl span { font-size: .8rem; color: #6b6d73; }
.uk-kennzahl.uk-warn { border-color: #f0b4b4; background: #fff5f5; }
.uk-kennzahl.uk-warn b { color: #c62828; }
.uk-kennzahl.uk-gut b { color: #2e7d32; }
.uk-kennzahl:hover, .uk-schnell-kachel:hover, .uk-gruppe:hover { border-color: #24346b; }
.uk-gruppen { display: grid; grid-template-columns: repeat(auto-fill, 340px); gap: 1rem; margin-bottom: 1rem; }
.uk-gruppe { display: flex; flex-direction: column; gap: .35rem; background: #fff; border: 1px solid #eceef1; border-radius: 14px; padding: 1rem 1.15rem; text-decoration: none; color: inherit; }
.uk-gruppe.uk-warn { border-color: #f0b4b4; }
.uk-gruppe-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.uk-gruppe-kopf strong { font-size: 1.05rem; color: #24346b; }
.uk-gruppe small { color: #6b6d73; }
.uk-balken { display: block; height: 10px; border-radius: 99px; background: #eceef1; overflow: hidden; }
.uk-balken i { display: block; height: 100%; background: #24346b; }
.uk-gruppe-zeile { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; padding-top: .3rem; border-top: 1px solid #f0f1f4; }
.uk-gruppe-zeile span:first-child { color: #6b6d73; white-space: nowrap; }
.uk-gruppe-zeile span:last-child { text-align: right; }
.uk-warn-text, .uk-warn-text span:first-child { color: #b71c1c; }
.uk-haupt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.uk-seite { display: grid; gap: 1rem; }
.uk-haupt .card, .uk-seite .card { margin-bottom: 0; }
.uk-haupt h2 { font-size: .95rem; margin: 0 0 .6rem; color: #24346b; }
.uk-zeile { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-top: 1px solid #f0f1f4; color: inherit; text-decoration: none; }
.uk-zeile:first-of-type { border-top: 0; }
.uk-zeile-text { flex: 1; min-width: 0; }
.uk-zeile-text strong { display: block; font-size: .92rem; }
.uk-zeile-text small { display: block; color: #6b6d73; font-size: .78rem; }
.uk-zeile-link:hover .uk-zeile-text strong { text-decoration: underline; }
.uk-zeit { min-width: 3.2rem; font-size: .8rem; color: #6b6d73; }
.uk-leer { margin: .3rem 0; color: #6b6d73; font-size: .9rem; }
.uk-zeile .zeile-knoepfe { display: flex; gap: .3rem; flex-shrink: 0; }
.uk-start { max-width: 860px; margin: 1rem auto 1.5rem; text-align: center; }
.uk-start-titel { font-size: 1.6rem; margin: 0 0 1rem; color: #24346b; }
.uk-start-suche { display: flex; align-items: center; gap: .6rem; width: 100%; padding: 1rem 1.25rem; font-size: 1.05rem; text-align: left; border-radius: 14px; border: 2px solid #d9dce2; background: #fff; color: #6b6d73; }
.uk-start-suche:hover { border-color: #24346b; }
.uk-schnell { display: grid; grid-template-columns: repeat(auto-fill, 190px); justify-content: center; gap: .75rem; margin: 1.2rem 0; }
.uk-schnell-kachel { display: block; background: #fff; border: 1px solid #eceef1; border-radius: 12px; padding: 1rem; text-decoration: none; color: #24346b; font-weight: 600; text-align: left; }
.uk-schnell-kachel small { display: block; margin-top: .2rem; color: #6b6d73; font-weight: 400; }
.uk-schnell-kachel.uk-warn { border-color: #f0b4b4; background: #fff5f5; }
.uk-zeile-zahlen { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; font-size: .9rem; color: #4a4d55; }
.uk-zeile-zahlen a { color: inherit; text-decoration: none; }
.uk-zeile-zahlen b { color: #24346b; font-size: 1.05rem; }
@media (max-width: 900px) { .uk-haupt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
    .uk-kennzahlen, .uk-schnell { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .uk-gruppen { grid-template-columns: minmax(0, 1fr); }
    .uk-zeile { flex-wrap: wrap; }
    .uk-zeile-text { flex-basis: calc(100% - 5rem); }
    .ta { margin-left: 3.6rem; }
    .ta-eintrag { flex-wrap: wrap; }
}

.ta { position: relative; margin-left: 4.2rem; padding-left: 1.2rem; border-left: 3px solid #d9dce2; }
.ta-eintrag { position: relative; display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.ta-eintrag::before { content: ""; position: absolute; left: calc(-1.2rem - 8px); top: 50%; width: 11px; height: 11px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid #7e8fd1; }
.ta-zeit { position: absolute; left: calc(-1.2rem - 4.2rem); width: 3.4rem; text-align: right; font-size: .78rem; color: #6b6d73; }
.ta-text { flex: 1; min-width: 0; }
.ta-text strong { font-size: .92rem; }
.ta-text a { color: inherit; text-decoration: none; }
.ta-text a:hover strong { text-decoration: underline; }
.ta-text small { display: block; color: #6b6d73; font-size: .78rem; }
.ta-vorbei { opacity: .45; }
.ta-jetzt::before { background: #c62828; border-color: #c62828; }
.ta-jetzt .ta-text { background: #f1f4fb; border-radius: 8px; padding: .4rem .7rem; }
.ta-jetzt.ta-warn .ta-text { background: #fdecec; color: #b71c1c; }
.ta-schluessel::before, .ta-warn::before { border-color: #c62828; }
.ta-frist::before { border-color: #f5b301; }
.ta-tag::before { border-color: #9aa3b8; }
.ta .zeile-knoepfe { display: flex; gap: .3rem; flex-shrink: 0; }

/* Übersicht: In den Kacheln Kinder und Mitarbeiter stehen zwei Namenskacheln nebeneinander, auch wenn die
   Kachel nur eine Spalte (270 px) breit ist. Feste Breite wie bei den übrigen Kacheln, kleinere Ränder;
   lange Namen brechen um statt überzulaufen. */
.widget-card[data-widget-id="kinder"] .mini-tile-grid,
.widget-card[data-widget-id="anwesend"] .mini-tile-grid {
    grid-template-columns: repeat(auto-fill, 96px);
}

.widget-card[data-widget-id="kinder"] .mini-tile,
.widget-card[data-widget-id="anwesend"] .mini-tile {
    padding: 0.5rem 0.55rem;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

/* Übersicht: Kalender-Kachel eine Spalte breit; die Tageszellen sind höher als breit (statt quadratisch), damit
   die zwei Zeilen Höhe der Kachel genutzt werden. Nur die Monatsansicht — die Jahresansicht bleibt klein. */
.widget-card[data-widget-id="kalender"] > .cal-mini-month .cal-mini-day {
    aspect-ratio: auto;
    min-height: 2.5rem;
    font-size: 0.85rem;
}

/* Übersicht, Kalender-Kachel, Wochenansicht: ein Tag je Zeile (Datum | Termine und Markierungen); rollt in sich. */
.kal-woche { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; max-height: 18rem; overflow-y: auto; padding-right: .2rem; }
.kal-woche-tag { display: flex; gap: .6rem; align-items: flex-start; padding: .3rem .4rem; border-radius: 8px; background: #f6f7f9; }
.kal-woche-tag.kal-woche-we { background: #fafafb; }
.kal-woche-tag.kal-woche-heute { background: #eef1fb; box-shadow: inset 3px 0 0 #24346b; }
.kal-woche-datum { flex: none; width: 3.4rem; display: flex; flex-direction: column; line-height: 1.15; color: #24346b; text-decoration: none; font-size: .8rem; }
.kal-woche-datum span { color: #6b6d73; font-size: .72rem; }
.kal-woche-heute .kal-woche-datum span { color: #24346b; font-weight: 600; }
.kal-woche-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .82rem; }
.kal-woche-termin { display: flex; gap: .4rem; align-items: baseline; min-width: 0; color: inherit; text-decoration: none; }
.kal-woche-termin b { flex: none; font-variant-numeric: tabular-nums; color: #24346b; }
.kal-woche-termin span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-woche-termin small { flex: none; color: #6b6d73; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-woche-termin:hover span { text-decoration: underline; }
.kal-woche-marke { align-self: flex-start; max-width: 100%; padding: .05rem .45rem; border-radius: 99px; font-size: .74rem; font-weight: 600; background: #eceef1; color: #55575c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-woche-feiertag { background: #fdeaea; color: #b3261e; }
.kal-woche-ferien { background: #fff3e0; color: #9a5b00; }
.kal-woche-geburtstag, .kal-woche-jubilaeum { background: #eef1fb; color: #24346b; }
.kal-woche-leer { color: #b0b3b8; }

/* Übersicht: Die Zahlen oben in Kinder und Mitarbeiter („41 von 84 … da“, „4 krank“) kleben nicht mehr
   aneinander, wenn sie in zwei Zeilen umbrechen. */
.widget-card[data-widget-id="kinder"] > h2 + p,
.widget-card[data-widget-id="anwesend"] > h2 + p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    margin: 0.5rem 0 0;
}

/* Übersicht, Kalender-Kachel: Monatsraster und Wochenzeilen füllen die Höhe der Kachel aus, statt unten einen
   ungenutzten weißen Streifen zu lassen. Die Zeilen wachsen gleichmäßig; ist mehr Inhalt da, rollt die Kachel. */
.widget-card[data-widget-id="kalender"] { display: flex; flex-direction: column; }
.widget-card[data-widget-id="kalender"] > * { flex-shrink: 0; }
.widget-card[data-widget-id="kalender"] > .cal-mini-month { flex: 1 0 auto; display: flex; flex-direction: column; }
.widget-card[data-widget-id="kalender"] > .cal-mini-month > .cal-mini-week { flex: 1 1 auto; min-height: 2.5rem; }
.widget-card[data-widget-id="kalender"] > .kal-woche { flex: 1 0 auto; max-height: none; overflow: visible; }
.widget-card[data-widget-id="kalender"] > .kal-woche > .kal-woche-tag { flex: 1 1 auto; align-items: center; }

/* Kalender-Kachel, Tagesansicht: dieselbe Zeitachse wie im Kalender, füllt den Rest der Kachel und rollt in sich. */
.widget-card[data-widget-id="kalender"] > .kal-tag-zeitachse { flex: 1 1 0; min-height: 9rem; max-height: none; margin-top: .5rem; }
.widget-card[data-widget-id="kalender"] > .kal-tag-zeitachse .day-view-room-col { min-width: 0; }
.widget-card[data-widget-id="kalender"] > .kal-tag-zeitachse .day-view-hours { width: 48px; }
.widget-card[data-widget-id="kalender"] > .kal-tag-zeitachse .day-view-block { text-decoration: none; overflow: hidden; }
.widget-card[data-widget-id="kalender"] > .cal-tagesliste { flex: none; margin-top: .4rem; }

/* Tablet: Datumsknopf der Wochenzeile (ein Formularknopf statt Verweis) und Tageszellen als Formulare füllen die Zeile. */
button.kal-woche-datum { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font-family: inherit; color: #24346b; }
.kal-woche-tag > form.inline-form { flex: none; margin: 0; }
.widget-card[data-widget-id="kalender"] .cal-mini-day-form { display: flex; }

/* Verwaltung/Träger, Kalender-Kachel: das Monatsraster füllt die Höhe der Kachel (höhere Tageszellen), die Spalte
   daneben (Tagesliste, Einladungen, + Termin) bleibt wie sie war. */
#widget-kalender { display: flex; flex-direction: column; }
#widget-kalender > * { flex-shrink: 0; }
#widget-kalender > .vw-kal-zwei { flex: 1 0 auto; align-items: stretch; }
#widget-kalender .vw-kal-links { display: flex; flex-direction: column; min-width: 0; }
#widget-kalender .vw-kal-links > .vw-kal { flex: 1 1 auto; }
#widget-kalender .vw-kal-tag { min-height: 2.4rem; }

/* Personalschlüssel-Kachel: Zahnrad zu den Einstellungen (Gruppen und Vorgabe), rechts neben „Stand“. */
.schluessel-einstellungen { display: inline-flex; align-items: center; margin-left: .5rem; color: #6b6d73; vertical-align: middle; }
.schluessel-einstellungen:hover { color: #24346b; }
.schluessel-einstellungen .icon-svg { width: 1rem; height: 1rem; }

/* Kachel-Bereich der Übersicht ein-/ausklappen: schmale Kopfzeile über dem Raster. */
.widget-bereich-kopf { margin: 0 0 0.6rem; }
.widget-bereich-knopf { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.8rem; border: 1px solid #d9dce2; border-radius: 999px; background: #fff; color: #24346b; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.widget-bereich-knopf:hover { border-color: #24346b; }
.bereich-zu { display: none !important; }

/* Rasterzeilen à 102 px (siehe .widget-grid): bisherige Spannen verdoppelt, Höhe in Pixeln bleibt gleich. */
.widget-grid[data-widget-storage-key] .widget-card { grid-row: span 2; }
.widget-grid[data-widget-storage-key] .widget-card.widget-height-2 { grid-row: span 4; }
.widget-grid[data-widget-storage-key] .widget-card.widget-height-3 { grid-row: span 6; }
.widget-grid[data-widget-storage-key] .widget-card.todo-widget-wide,
.widget-grid[data-widget-storage-key] .widget-card.einsatzplan-widget-wide { grid-row: span 4; }

/* Personalschlüssel (Leitung): Standard ist die ausführliche Kachel (zwei Spalten, eine Zeile). Wird sie im
   Anordnen-Modus auf eine halbe Zeile verkleinert (data-current-rows="0.5", Raster in 102-px-Schritten), wechselt sie in
   die kompakte Form ohne senkrechtes Rollen: Titel mit Stand und Zahnrad · Gesamtzahl mit Mitarbeitern und Kindern ·
   die Gruppen als kleine Chips. */
.widget-grid[data-widget-storage-key] .widget-card.schluessel-widget-breit[data-current-rows="0.5"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    overflow: hidden;
}
.widget-grid[data-widget-storage-key] .widget-card.schluessel-widget-breit[data-current-rows="0.5"] > h2 {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    background: none;
    font-size: 1rem;
}
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-stand { float: none; margin-left: auto; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-einstellungen { margin-left: 0; align-self: center; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-gesamt {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 0 0 0 0.6rem;
    background: none;
    border-radius: 0;
}
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-wert { font-size: 1.35rem; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-haupt,
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-zusatz { flex-direction: row; align-items: baseline; gap: 0.5rem; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-zusatz { font-size: 0.78rem; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-zaehler { margin-left: auto; gap: 0.9rem; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-zaehler-kachel {
    flex-direction: row;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
}
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-zaehler-kachel strong { font-size: 1rem; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-gruppen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
    overflow-y: auto;
}
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-gruppe {
    flex-direction: row;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-gruppe-name { font-size: 0.8rem; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-gruppe-wert { font-size: 0.85rem; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-gruppe-zahlen { display: none; }
.schluessel-widget-breit[data-current-rows="0.5"] .schluessel-gruppe-plan { font-size: 0.7rem; }
@container widget (max-width: 420px) {
    .schluessel-widget-breit[data-current-rows="0.5"] .schluessel-zaehler { display: none; }
}

/* Personalschlüssel, Standardform (eine Zeile hoch, 220 px): enger gesetzt, damit die Gruppenkacheln ohne Rollen
   sichtbar sind — Überschrift und Rand kleiner, Vorgabe und Fachkraft-Hinweis nebeneinander. */
.widget-grid[data-widget-storage-key] .widget-card.schluessel-widget-breit { padding-bottom: 0.7rem; }
.widget-grid[data-widget-storage-key] .widget-card.schluessel-widget-breit > h2 { padding-top: 0.8rem; padding-bottom: 0.15rem; margin-bottom: 0.3rem; }
.schluessel-widget-breit .schluessel-gesamt { padding: 0.3rem 0.8rem; margin-bottom: 0.4rem; }
.schluessel-widget-breit .schluessel-zusatz { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; }
.schluessel-widget-breit .schluessel-gruppe { padding: 0.3rem 0.55rem; }
.schluessel-widget-breit .schluessel-gruppe-zahlen { white-space: nowrap; font-size: 0.75rem; }

/* Personalschlüssel: Standardgröße ist eine halbe Zeile (102 px, kompakte Form); größer ziehen im Anordnen-Modus
   setzt die Höhe ausdrücklich (Zeilenhöhe am Element). */
.widget-grid[data-widget-storage-key] .widget-card.schluessel-widget-breit { grid-row: span 1; }

/* Ausgeblendete Kacheln bleiben auch bei Kacheln mit eigener display-Regel (ToDos, Kalender) wirklich weg;
   im Anordnen-Modus darf das Kreuz die Kopfzeile der Verwaltungs-Kalenderkachel nicht verdecken. */
.widget-grid.edit-mode #widget-kalender .vw-kal-kopf { padding-right: 2rem; }

/* Fällige ToDos: wie am Tablet ein roter Kreis mit weißer Zahl (statt blassrosa) — auch im blauen Feld der Übersicht gut lesbar. */
.badge.nav-zaehler.nav-zaehler-aufgaben { background: #d70015; color: #fff; }

/* Seitenleiste, Gruppen mit Unterpunkten: Ist der Titel das blaue Feld, bekommt die Kopfzeile keinen rosa/gelben Grund
   mehr (der blasse Kasten um den Pfeil sah neben dem Blau wie ein Fehler aus). Die Unterpunkte sind leicht eingerückt
   und haben einen kleinen Abstand zum Titel. */
.nav-group:has(> .nav-group-header .nav-group-label.active) > .nav-group-header,
.nav-group.nav-gruppe-kritisch:has(> .nav-group-header .nav-group-label.active) > .nav-group-header,
.nav-group.nav-gruppe-offen:has(> .nav-group-header .nav-group-label.active) > .nav-group-header {
    background: transparent;
}
.nav-group-items { margin-top: 0.2rem; }
.nav-group-items > .nav-subitem { margin-left: 0.5rem; padding-left: 1.1rem; padding-right: 0.6rem; gap: 0.35rem; }