:root {
    --radius: 12px;
    --radius-klein: 8px;
    --radius-kachel: 20px;
}

/* Schriftgroesse: skaliert die gesamte Anwendung, da fast alle Masse
   in rem angegeben sind (Barrierefreiheit). */
html[data-schriftgroesse="gross"] { font-size: 118%; }
html[data-schriftgroesse="sehr-gross"] { font-size: 136%; }

/* ---------- Theme: Dunkel (Standard) ---------- */
:root,
[data-theme="dunkel"] {
    --farbe-hintergrund: #171718;
    --farbe-flaeche: #232325;
    --farbe-flaeche-dunkler: #2b2b2e;
    --farbe-text: #c7c7c9;
    --farbe-text-stark: #f0f0f1;
    --farbe-text-gedaempft: #8d8d90;
    --farbe-rand: #38383b;

    --farbe-kopfleiste: #0c0c0d;
    --farbe-kopfleiste-text: #f0f0f1;
    --farbe-kopfleiste-text-gedaempft: #8d8d90;

    --farbe-akzent: #8a6d3f;
    --farbe-akzent-dunkel: #6d5630;
    /* Textfarbe auf Flaechen mit --farbe-akzent als Hintergrund (Buttons,
       aktive Reiter, Avatar usw.) - Standardwert Weiss, wird nur von der
       Akzentfarbe "Weiss" selbst ueberschrieben (siehe
       [data-akzentfarbe="weiss"] unten), da dort weisser Text auf weissem
       Hintergrund unlesbar waere. */
    --farbe-akzent-text: #fff;

    --farbe-fehler: #c96a58;
    --schatten: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---------- Theme: Hell ---------- */
[data-theme="hell"] {
    --farbe-hintergrund: #e7e5e0;
    --farbe-flaeche: #c9c7c1;
    --farbe-flaeche-dunkler: #bab8b1;
    --farbe-text: #3c3b36;
    --farbe-text-stark: #201f1c;
    --farbe-text-gedaempft: #6c6a64;
    --farbe-rand: #a5a29a;

    --farbe-kopfleiste: #3d3d3f;
    --farbe-kopfleiste-text: #e9e8e5;
    --farbe-kopfleiste-text-gedaempft: #9b9a9c;

    /* bewusst zurueckhaltender, kuehlerer Akzent statt Braun */
    --farbe-akzent: #55707a;
    --farbe-akzent-dunkel: #435a63;

    --farbe-fehler: #a4402f;
    --schatten: 0 2px 6px rgba(32, 31, 28, 0.18);
}

/* ---------- Theme: Mittel ---------- */
[data-theme="mittel"] {
    --farbe-hintergrund: #4a4a49;
    --farbe-flaeche: #5f5f5d;
    --farbe-flaeche-dunkler: #565654;
    --farbe-text: #d9d8d4;
    --farbe-text-stark: #ffffff;
    --farbe-text-gedaempft: #a8a7a3;
    --farbe-rand: #706f6c;

    --farbe-kopfleiste: #2c2c2b;
    --farbe-kopfleiste-text: #eceae6;
    --farbe-kopfleiste-text-gedaempft: #9b9a97;

    --farbe-akzent: #8a6d3f;
    --farbe-akzent-dunkel: #6d5630;

    --farbe-fehler: #c17158;
    --schatten: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Akzentfarbe: frei waehlbar, unabhaengig vom Hell/Mittel/
   Dunkel-Theme (siehe App\Akzentfarbe, waehlbar im Profil) ----------
   Bisher hing die Akzentfarbe starr am Theme (Hell -> Blau, Mittel/
   Dunkel -> Gelb/Braun, siehe die drei Theme-Bloecke oben). Diese
   beiden Regeln haben dieselbe Selektor-Spezifitaet wie die
   [data-theme=...]-Bloecke oben und stehen bewusst NACH ihnen, damit
   sie deren Akzentfarbe fuer jedes Theme ueberschreiben - das
   [data-akzentfarbe]-Attribut steht immer auf der Seite (siehe
   templates/header.php), auch wenn niemand im Profil explizit
   gewaehlt hat (dann greift der bisherige, vom Theme abgeleitete
   Standardwert, siehe App\Akzentfarbe::aktuell() - fuer bestehende
   Nutzer ohne eigene Wahl aendert sich also optisch nichts). */
[data-akzentfarbe="blau"] {
    --farbe-akzent: #55707a;
    --farbe-akzent-dunkel: #435a63;
}
[data-akzentfarbe="gelb"] {
    --farbe-akzent: #8a6d3f;
    --farbe-akzent-dunkel: #6d5630;
}
/* Warmes, kraeftiges Rot (bewusst brick-/terracottafarben statt des
   kuehleren Korallton von --farbe-fehler in den drei Theme-Bloecken
   oben, damit sich Akzent- und Fehlerfarbe trotz gemeinsamer
   "Rot-Familie" weiterhin unterscheiden lassen, z.B. normaler Button
   vs. .btn.gefahr). */
[data-akzentfarbe="rot"] {
    --farbe-akzent: #b6432c;
    --farbe-akzent-dunkel: #8f3320;
}
/* Weiss: neutraler, heller Akzent - vor allem im dunklen/mittleren Theme
   gut lesbar, da er sich dort klar vom Hintergrund abhebt. --farbe-akzent-
   text wird hier auf einen dunklen Ton umgestellt, da sonst weisser Text
   (Buttons, aktive Reiter usw.) auf dem jetzt weissen Hintergrund
   unlesbar waere. */
[data-akzentfarbe="weiss"] {
    --farbe-akzent: #e9e9e6;
    --farbe-akzent-dunkel: #c9c9c5;
    --farbe-akzent-text: #202022;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    line-height: 1.5;
}

/* Dezentes "Wavy Lines"-Muster im Hintergrund, auf ausdruecklichen
   Wunsch ("dezenter Hintergrund, kein Ablenken von der Anwendung,
   trotzdem ein elegantes Design"). Nutzt bewusst dieselbe Randfarbe wie
   die ohnehin vorhandenen Trennlinien (--farbe-rand) je Theme - lenkt
   dadurch nicht mehr ab als ein Tabellenrahmen - und ist zusaetzlich per
   stroke-opacity (0.45) und duennem Strich (1.1px) noch einmal deutlich
   abgeschwaecht (auf Wunsch "noch etwas dezenter"). Als SVG-Daten-URI
   direkt im Stylesheet eingebettet (kein zusaetzlicher Bild-Request),
   220x90px-Kachel wiederholt sich ueber die ganze Seite. */
[data-theme="dunkel"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%2290%22%20viewBox%3D%220%200%20220%2090%22%3E%3Cpath%20d%3D%22M0%2C15%20C27%2C0%2055%2C0%2082%2C15%20C110%2C30%20137%2C30%20165%2C15%20C192%2C0%20220%2C0%20220%2C15%22%20fill%3D%22none%22%20stroke%3D%22%2338383b%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%2C50%20C27%2C35%2055%2C35%2082%2C50%20C110%2C65%20137%2C65%20165%2C50%20C192%2C35%20220%2C35%20220%2C50%22%20fill%3D%22none%22%20stroke%3D%22%2338383b%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%2C80%20C27%2C65%2055%2C65%2082%2C80%20C110%2C95%20137%2C95%20165%2C80%20C192%2C65%20220%2C65%20220%2C80%22%20fill%3D%22none%22%20stroke%3D%22%2338383b%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3C/svg%3E"); }
[data-theme="hell"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%2290%22%20viewBox%3D%220%200%20220%2090%22%3E%3Cpath%20d%3D%22M0%2C15%20C27%2C0%2055%2C0%2082%2C15%20C110%2C30%20137%2C30%20165%2C15%20C192%2C0%20220%2C0%20220%2C15%22%20fill%3D%22none%22%20stroke%3D%22%23a5a29a%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%2C50%20C27%2C35%2055%2C35%2082%2C50%20C110%2C65%20137%2C65%20165%2C50%20C192%2C35%20220%2C35%20220%2C50%22%20fill%3D%22none%22%20stroke%3D%22%23a5a29a%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%2C80%20C27%2C65%2055%2C65%2082%2C80%20C110%2C95%20137%2C95%20165%2C80%20C192%2C65%20220%2C65%20220%2C80%22%20fill%3D%22none%22%20stroke%3D%22%23a5a29a%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3C/svg%3E"); }
[data-theme="mittel"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%2290%22%20viewBox%3D%220%200%20220%2090%22%3E%3Cpath%20d%3D%22M0%2C15%20C27%2C0%2055%2C0%2082%2C15%20C110%2C30%20137%2C30%20165%2C15%20C192%2C0%20220%2C0%20220%2C15%22%20fill%3D%22none%22%20stroke%3D%22%23706f6c%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%2C50%20C27%2C35%2055%2C35%2082%2C50%20C110%2C65%20137%2C65%20165%2C50%20C192%2C35%20220%2C35%20220%2C50%22%20fill%3D%22none%22%20stroke%3D%22%23706f6c%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3Cpath%20d%3D%22M0%2C80%20C27%2C65%2055%2C65%2082%2C80%20C110%2C95%20137%2C95%20165%2C80%20C192%2C65%20220%2C65%20220%2C80%22%20fill%3D%22none%22%20stroke%3D%22%23706f6c%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.1%22/%3E%3C/svg%3E"); }

/* "overflow-wrap: break-word" schuetzt vor horizontalem Scrollen auf
   schmalen Bildschirmen bei einem einzelnen langen Wort ohne natuerliche
   Trennstelle (z.B. "Abrechnungsnotizen") - faellt am 25.09.2026 beim
   Mobile-Test auf, wo genau so eine Ueberschrift ueber den rechten
   Bildschirmrand hinaus lief und dadurch die ganze Seite horizontal
   scrollbar machte. */
h1, h2, h3 { color: var(--farbe-text-stark); font-weight: 600; overflow-wrap: break-word; }

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

/* Banner waehrend einer laufenden Admin-Rollen-Vorschau (siehe
   Auth::vorschauStarten(), templates/header.php) - bewusst NICHT
   "position: sticky" wie .app-header darunter (zwei gestapelte sticky
   Elemente mit variabler Hoehe, z.B. durch Zeilenumbruch auf schmalen
   Bildschirmen, muessten sich sonst gegenseitig per JS die "top"-Distanz
   mitteilen) - steht einfach ganz oben im normalen Seitenfluss, vor der
   eigentlichen Kopfzeile, und scrollt mit nach oben weg. Gleiche
   Warnfarbe wie .btn.warnung weiter unten, damit sofort erkennbar ist:
   "Achtung, nicht der normale Admin-Blick". */
.vorschau-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    background: #d6a24a;
    color: #2b2010;
    text-align: center;
    font-size: 0.92rem;
}
.vorschau-banner__text { flex: 1 1 auto; max-width: 60rem; }
.vorschau-banner__formular { flex: 0 0 auto; margin: 0; }
.vorschau-banner__beenden {
    padding: 0.35rem 0.9rem;
    border: 1px solid #2b2010;
    border-radius: var(--radius-klein);
    background: #2b2010;
    color: #fff3df;
    font-weight: 600;
    cursor: pointer;
}
.vorschau-banner__beenden:hover { filter: brightness(1.15); }

.app-header {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 0.85rem 0;
    background: var(--farbe-kopfleiste);
    color: var(--farbe-kopfleiste-text);
    box-shadow: var(--schatten);
}

/* Gleiche max-width/Innenabstand wie .app-content, damit die Navigation
   (insbesondere "Start") genau ueber dem linken Inhaltsrand ("Willkommen")
   ausgerichtet ist statt am Fensterrand zu kleben. */
.app-header__inner {
    /* position:relative hier (nicht auf .app-header__zeile) ist wichtig:
       das Dropdown-Menü (nav#kopfzeile-nav, siehe weiter unten) liegt im
       Markup als Geschwister-Element NACH .app-header__zeile, nicht
       darin - fuer "right:0" braucht es also hier den passenden, auf
       max-width:1100px begrenzten Bezugsrahmen (sonst waere der naechste
       positionierte Vorfahre .app-header mit position:sticky, das aber
       die volle Fensterbreite hat, wodurch das Menü zu weit rechts
       ueber den Knopf hinaus aufklappen wuerde statt buendig darunter). */
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    /* 28px statt 1.75rem (siehe .app-content weiter unten fuer die
       Begruendung) - beide Werte muessen synchron bleiben, sonst
       verrutscht die Ausrichtung zwischen Navigation und Inhalt. */
    padding: 0 28px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.app-header__zeile { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.app-header a { color: var(--farbe-kopfleiste-text); text-decoration: none; }
.app-header a:hover { color: #fff; }

.app-header__titel { font-weight: 700; letter-spacing: 0.02em; color: var(--farbe-kopfleiste-text); white-space: nowrap; display: flex; align-items: center; }
/* Logo verlinkt zur Startseite (siehe templates/header.php) - Link selbst
   ohne eigene Optik, wirkt nur wie das Bild allein zuvor. */
.app-header__logo-link { display: flex; align-items: center; line-height: 0; position: relative; }
/* Hoehe je Logo per CSS-Variable (Inline-Style auf dem <img>, siehe
   header.php) im Admin-Bereich einstellbar (App\Einstellungen::
   logoHoehe(), siehe admin/logo_upload.php) - 2rem als Fallback, falls
   die Variable aus irgendeinem Grund fehlt. */
.app-header__logo { height: var(--logo-hoehe, 2rem); max-width: 11rem; width: auto; object-fit: contain; display: block; }
/* Auf schmalen Bildschirmen gilt eine EIGENE, im Admin-Bereich unabhaengig
   von der Desktop-Hoehe einstellbare Hoehe (--logo-hoehe-mobil, siehe
   Einstellungen::logoHoeheMobil() und admin/einstellungen.php) - auf
   ausdruecklichen Wunsch, nachdem ein kurzzeitiger Versuch mit einem
   Herz-only-Logo fuer Smartphones wieder zurueckgebaut wurde: das volle
   Logo mit Schriftzug bleibt jetzt auf jeder Bildschirmbreite sichtbar,
   nur eben in einer eigenen, kleineren Groesse. 1.6rem als Fallback,
   falls die Variable aus irgendeinem Grund fehlt (z.B. sehr alter,
   zwischengespeicherter HTML-Stand ohne das Inline-Style). */
@media (max-width: 480px) { .app-header__logo { height: var(--logo-hoehe-mobil, 1.6rem); max-width: 8rem; } }

/* Original (tuerkisfarbenes) Logo liegt deckungsgleich ueber dem in der
   Akzentfarbe eingefaerbten Herz (siehe templates/header.php) und blendet
   sich beim Ueberfahren mit der Maus/Tastaturfokus kurz ein, auf
   ausdruecklichen Wunsch - "fuer den Moment der Beruehrung". Nur beim
   mitgelieferten Standard-Logo vorhanden (ein eigenes, hochgeladenes
   Logo hat kein bekanntes "Herz" und damit auch kein zweites <img>). */
.app-header__logo--original {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.app-header__logo-link:hover .app-header__logo--original,
.app-header__logo-link:focus-visible .app-header__logo--original {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .app-header__logo--original { transition: none; }
}

.app-header__nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.app-header__nav a, .app-header__nav .bald {
    /* Gleiche Groesse wie die Reiterleiste .bereich-tabs (z.B.
       Betreuungsdokumentation) - vorher kleiner (0.9rem), wirkte
       dadurch uneinheitlich zum Rest der Anwendung. */
    padding: 0.4rem 1rem; border-radius: 999px; font-size: 1rem; font-weight: 600;
    background: rgba(255, 255, 255, 0.06);
    /* inline-flex statt des reinen Textflusses, seit die Hauptknoepfe ein
       kleines Icon vor dem Label zeigen (siehe .app-header__nav-icon unten
       und $_kopfzeileNavIcons in templates/header.php) - ohne dieses
       Flexlayout wuerde das Icon-<span> wie Fliesstext ueber der Grundlinie
       "schweben" statt sauber neben dem Text zu sitzen. */
    display: inline-flex; align-items: center; gap: 0.45em;
}
.app-header__nav a:hover { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
/* Haupt-Knopf (Start/Haus/Station/Kueche/Sozialdienst/Verwaltung) bleibt
   farblich hinterlegt, solange man sich innerhalb dieses Bereichs
   bewegt (Wunsch: "wenn man Sozialdienst anklickt, der Button
   Sozialdienst farblich hinterlegt bleibt ... auch im Untermenü, wenn
   man den naechsten Button waehlt") - wird in templates/header.php aus
   der aktuellen URL ermittelt ($_kopfzeileAktuellerBereich), nicht aus
   einem Klick-Zustand, bleibt daher auch bei direkt aufgerufenen Links
   korrekt. Gleiche Farbe wie .bereich-tabs a.aktiv, fuer ein
   einheitliches Bild. */
.app-header__nav a.aktiv { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
.app-header__nav .bald { color: var(--farbe-kopfleiste-text-gedaempft); cursor: default; background: transparent; border: 1px dashed rgba(255,255,255,0.15); }

/* Kleiner Pfeil als Hinweis, dass ein Hauptknopf (Haus/Station/Kueche/
   Sozialdienst/Verwaltung) ein Untermenü aufklappt statt direkt zu
   verlinken (siehe kopfzeile-menu-knopf-Skript weiter unten in dieser
   Datei) - sonst nicht von einem normalen Link zu unterscheiden. */
.kopfzeile-untermenu-link::after {
    content: '▾';
    margin-left: 0.3em;
    font-size: 0.75em;
    opacity: 0.75;
}

/* Icon vor Start/Haus/Station/Kueche/Sozialdienst/Verwaltung (Wunsch:
   "passende Icons vor die Buttons, wie im anderen Projekt") - Inline-SVG
   mit stroke="currentColor" (siehe $_kopfzeileNavIcons in
   templates/header.php), faerbt sich dadurch automatisch mit dem
   Knopftext mit, auch im Hover-/aktiv-Zustand, ohne eigene Farbregel
   hier. Feste Breite/Hoehe relativ zur Schrift (em), damit sich die
   Groesse mit den Schriftgroessen-Einstellungen (html[data-schriftgroesse])
   mitskaliert. */
.app-header__nav-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }
.app-header__nav-icon svg { display: block; width: 100%; height: 100%; }

/* Wrapper um Avatar-Knopf + Hamburger-Knopf: haelt beide als eine Gruppe
   zusammen und rechtsbuendig in der Kopfzeile (ersetzt das fruehere
   einzelne margin-left:auto auf .app-header__menu-knopf - siehe Kommentar
   dort, derselbe Grund gilt jetzt fuer die ganze Gruppe). */
.app-header__aktionen { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }

.app-header__konto { position: relative; }

/* Zahnrad links neben dem Avatar - Ersatz fuer den frueheren "Admin"-
   Knopf in der Hauptnavigation (siehe templates/header.php, auf
   ausdruecklichen Wunsch als Spielerei), nur fuer 'mitarbeiter.verwalten'
   sichtbar. Optik an den Hamburger-Menü-Knopf angelehnt (gleiche Groesse,
   dezenter Hintergrund, Akzentfarbe beim Hover) statt am farbig
   gefuellten Avatar, da es sich um einen zweiten, gleichrangigen
   Icon-Knopf handelt statt um die persoenliche Kontokachel. */
.app-header__zahnrad {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--farbe-kopfleiste-text);
    flex-shrink: 0;
}
/* "a.app-header__zahnrad:hover" (statt nur ".app-header__zahnrad:hover")
   noetig, um dieselbe Selektor-Spezifitaet wie die allgemeine Regel
   ".app-header a:hover" (Zeile oben, setzt color:#fff) zu erreichen -
   bei gleicher Spezifitaet gewinnt die spaeter stehende Regel (hier),
   sonst wuerde bei der Akzentfarbe "Weiss" (heller Hintergrund beim
   Hover) das Zahnrad mit weisser statt dunkler Schrift/Farbe unlesbar. */
a.app-header__zahnrad:hover { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }

/* Runder Avatar (Initialen) statt frueher "Name · Abmelden" als Text -
   immer sichtbar (nicht nur mobil/kompakt wie der Hamburger-Knopf
   daneben), spart in der mobilen Ansicht Platz. */
.app-header__avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 999px;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.app-header__avatar:hover { background: var(--farbe-akzent-dunkel); }

/* Kleiner roter Punkt oben rechts am Avatar, wenn ungelesene Nachrichten
   vorliegen - sichtbar, ohne das Konto-Menü erst aufklappen zu muessen
   (siehe App\Models\Nachricht::ungelesenAnzahl() in templates/header.php). */
.app-header__avatar-punkt {
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--farbe-fehler);
    border: 2px solid var(--farbe-kopfleiste);
}

/* Zahl-Badge neben "Nachrichten" im Konto-Menü (Anzahl ungelesener
   Nachrichten). */
.app-header__badge {
    display: inline-block;
    min-width: 1.1rem;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--farbe-fehler);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}

/* Aufklappbares Konto-Menü (Profil/Abmelden) unter dem Avatar - Toggle
   per Klick, siehe kopfzeile-avatar-knopf-Skript in templates/header.php. */
.app-header__avatar-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 10rem;
    width: max-content;
    gap: 0.3rem;
    padding: 0.6rem;
    background: var(--farbe-kopfleiste);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    box-shadow: var(--schatten);
    z-index: 20;
}
.app-header__avatar-menu.app-header__avatar-menu--offen { display: flex; }
.app-header__avatar-menu__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--farbe-kopfleiste-text-gedaempft);
    padding: 0.2rem 0.75rem 0.4rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}
.app-header__avatar-menu a {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    color: var(--farbe-kopfleiste-text);
    text-align: left;
}
.app-header__avatar-menu a:hover { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }
/* Duenner Trennstrich vor den externen Links (siehe
   App\Models\ExterneLink) - optisch bewusst zurueckhaltender als der
   Rahmen unter dem Namen oben, da er nur zwei Gruppen von Links
   voneinander absetzt, keine Ueberschrift von Inhalt trennt. */
.app-header__avatar-menu__trenner {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 0.2rem 0.2rem;
}

/* Hamburger-Menü-Knopf: grundsaetzlich ausgeblendet, wird gezielt fuer
   schmale Bildschirme (siehe Media-Query unten) UND fuer das Layout
   "Kompakt" (siehe App\KopfzeilenLayout, wählbar im Profil) eingeblendet. */
.app-header__menu-knopf {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}
.app-header__menu-knopf:hover { background: var(--farbe-akzent); }
.app-header__menu-knopf span {
    display: block;
    height: 2px;
    margin: 0 0.55rem;
    background: var(--farbe-kopfleiste-text);
    border-radius: 1px;
}

/* Navigation standardmäßig eingeklappt hinter dem Hamburger-Knopf (siehe
   kopfzeile-menu-knopf-Skript in templates/header.php) - erst nach Klick
   sichtbar, statt als lange Button-Reihe den Platz zu füllen. Gilt immer
   auf schmalen Bildschirmen (Smartphone, unabhängig vom gewählten Layout -
   siehe "das Zweizeilige kann bleiben" -> Klassisch bleibt auf breiten
   Bildschirmen unverändert als Button-Reihe sichtbar) UND zusätzlich beim
   Layout "Kompakt" auch auf breiten Bildschirmen. */
@media (max-width: 720px) {
    .app-header__menu-knopf {
        display: flex;
        /* Rechtsbuendig steht jetzt schon der gemeinsame Wrapper
           .app-header__aktionen (siehe margin-left:auto dort) - hier
           kein eigenes margin-left:auto mehr noetig. */
    }
    .app-header__nav { display: none; }
}
@media (min-width: 721px) {
    [data-kopfzeilenlayout="kompakt"] .app-header__menu-knopf { display: flex; }
    [data-kopfzeilenlayout="kompakt"] .app-header__nav { display: none; }
}
/* Seiteneigene Modul-Button-Zeilen (z.B. die Reiterleiste ueber der
   Bewohnerliste bei Haus/Station, oder die Kueche-Werkzeugleiste in
   templates/kueche_nav.php), die dieselben Ziele verlinken wie das
   zugehoerige Kopfzeilen-Untermenue (siehe templates/header.php,
   $_kopfzeileHausUntermenu/-StationUntermenu/-KuecheUntermenu). Dieses
   Untermenue ist jetzt IMMER per Klick auf den jeweiligen Hauptknopf
   erreichbar (siehe kopfzeile-menu-knopf-Skript in templates/header.php -
   frueher nur bei Kompaktansicht/schmalen Bildschirmen, seit Wunsch "zu
   viele Buttons... Untermenüs nur als Hover über den Inhalt aufklappen"
   jetzt auch im Layout "Klassisch" auf breiten Bildschirmen) - die Zeile
   hier waere also immer eine reine Dopplung und bleibt deshalb jetzt
   grundsaetzlich ausgeblendet, unabhaengig von Bildschirmbreite/Layout.
   Der Aussendienst zeigt seit Kurzem ebenfalls die Haus-Reiterleiste
   (siehe public/bewohner/liste.php) und hat dafuer, wie Haus selbst,
   einen eigenen Eintrag im Kopfzeilen-Untermenue von Haus bekommen -
   bleibt also trotz dieser Regel ueber die Kopfzeile erreichbar.

   WICHTIG zur Selektor-Spezifitaet: ".modul-tabs--in-untermenue" wird
   IMMER zusammen mit einer der Basisklassen ".bereich-tabs" oder
   ".kachel-raster" verwendet (siehe oben) - deren eigene, unbedingte
   Regeln (z.B. ".kachel-raster { display: grid; ... }") stehen im
   Stylesheet WEITER UNTEN und haben dieselbe Spezifitaet (je eine
   Klasse). Bei gleicher Spezifitaet gewinnt in CSS die spaeter stehende
   Regel unabhaengig von Media-Queries - ohne die zusaetzliche,
   spezifischere Kombination hier (zwei Klassen statt einer) wuerde die
   spaeter stehende Basisklasse das Ausblenden also wieder aufheben. */
.bereich-tabs.modul-tabs--in-untermenue,
.kachel-raster.modul-tabs--in-untermenue { display: none; }
/* Untermenüs der Kopfzeile (siehe templates/header.php, #kopfzeile-
   unternav-haus/-station/-kueche/-sozialdienst): unabhaengig von
   Bildschirmbreite/Layout IMMER standardmaessig verborgen - sie sollen nie
   als normale, staendig sichtbare Button-Zeile erscheinen (das waere hier
   fälschlich passiert, da sie dieselbe .app-header__nav-Basisklasse mit
   display:flex erben wie das Hauptmenü), sondern ausschliesslich als vom
   Skript ein-/ausgeklapptes Dropdown (siehe
   .app-header__nav--untermenu.app-header__nav--offen weiter unten). */
.app-header__nav--untermenu { display: none; }
/* Ausgeklapptes Menü als Dropdown direkt unter dem Menü-Knopf, rechtsbündig
   zur Kopfzeile: alle Buttons gleich breit (so breit wie das längste Wort -
   erreicht rein per CSS durch width:max-content + align-items:stretch,
   ohne JavaScript) statt einer ueber die volle Breite gehenden Liste. Muss
   nach den beiden Media-Queries oben stehen, damit diese Regel bei
   gleicher Selektor-Spezifitaet (".app-header__nav" + eine weitere Klasse)
   den Vorrang bekommt. */
.app-header__nav.app-header__nav--offen {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    /* right:1.75rem statt 0, weil "right" bei position:absolute an der
       Padding-Kante des positionierten Vorfahren (.app-header__inner,
       das genau dieses Padding hat) ausgerichtet wird, nicht an dessen
       Inhaltskante, an der der Menü-Knopf tatsaechlich sitzt. So klappt
       das Menü buendig unter dem Knopf und nach links auf, statt am
       Fensterrand vorbeizuragen. */
    right: 1.75rem;
    margin-top: 0.5rem;
    width: max-content;
    max-width: min(90vw, 16rem);
    gap: 0.4rem;
    padding: 0.6rem;
    background: var(--farbe-kopfleiste);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    box-shadow: var(--schatten);
    z-index: 20;
}
.app-header__nav.app-header__nav--offen a,
.app-header__nav.app-header__nav--offen .bald {
    text-align: center;
}

/* Kopfzeilen-Untermenüs (Haus/Station/Küche/Sozialdienst - nur wenn die
   Navigation hinter dem Menü-Knopf eingeklappt ist, siehe
   kopfzeile-menu-knopf-Skript in templates/header.php): bewusst
   andersfarbig (Akzentfarbe statt der dunklen Kopfleisten-Farbe), damit
   auf den ersten Blick klar ist, dass man sich von der allgemeinen
   Navigation weg in die Untermodule des jeweiligen Bereichs bewegt hat,
   statt es mit dem Hauptmenü zu verwechseln. */
.app-header__nav--untermenu.app-header__nav--offen {
    background: var(--farbe-akzent);
    border-color: rgba(0, 0, 0, 0.2);
}
.app-header__nav--untermenu.app-header__nav--offen a {
    background: rgba(0, 0, 0, 0.15);
    color: var(--farbe-akzent-text);
}
.app-header__nav--untermenu.app-header__nav--offen a:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Umschalter-Gruppen (Theme, Schriftgroesse) - jetzt auf der Profilseite */
.umschalter-gruppe { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.umschalter-gruppe a {
    font-size: 0.85rem; padding: 0.35rem 0.9rem; border-radius: 999px;
    background: var(--farbe-flaeche-dunkler); color: var(--farbe-text);
    text-decoration: none; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.umschalter-gruppe a.aktiv { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }

/* Vorschau-Icon (Theme/Kopfzeile) bzw. Farbpunkt (Akzentfarbe) vor der
   Beschriftung jeder Umschalter-Option, siehe public/profil/index.php. */
.umschalter-icon { width: 14px; height: 14px; flex: 0 0 auto; }
.umschalter-swatch {
    width: 12px; height: 12px; border-radius: 999px; flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* 28px statt 1.75rem (28px entspricht 1.75rem bei der Standard-
   Schriftgroesse von 16px, am Erscheinungsbild bei "Normal" aendert sich
   also nichts): mit einem in rem wachsenden Innenabstand hier UND einem
   in rem wachsenden Abstand zwischen den Dashboard-Kacheln (siehe
   ".kachel-raster" weiter unten) frass bei "Groß"/"Sehr groß" der
   zusaetzliche Platzbedarf genau die Breite wieder auf, die den Kacheln
   durch ihre gewachsene Mindestbreite eigentlich zustehen sollte - das
   Ergebnis war teils sogar eine SCHRUMPFENDE statt wachsende Kachelbreite
   (siehe database/PRODUKTIONS-AENDERUNGEN.md). Mit einem fest in px
   verankerten Innenabstand bleibt die fuer die Kacheln nutzbare Breite
   bei jeder Schriftgroesse gleich groß, sodass ausschließlich die
   Kachel-Mindestbreite selbst (weiterhin in rem) ueber die
   Kachelgroesse entscheidet. */
.app-content { padding: 28px; max-width: 1100px; margin: 0 auto; }

/* Tabellen als "Karten" statt scharfkantiges Excel-Raster */
table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background: var(--farbe-flaeche);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--schatten);
}
th, td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--farbe-rand); text-align: left; }
th {
    background: var(--farbe-flaeche-dunkler);
    color: var(--farbe-text-stark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--farbe-flaeche-dunkler); }

/* Leicht abwechselnde Zeilenfarben (Zebra-Streifen) fuer die
   Bewohnerlisten (Haus/Station/Aussendienst, siehe bewohner/liste.php) -
   bewusst eine eigene Klasse statt eine globale "tbody tr:nth-child"-Regel,
   damit andere, kuerzere Tabellen (Formulare, Kataloge usw.) unveraendert
   bleiben. */
.tabelle-zebra tbody tr:nth-child(even) { background: var(--farbe-flaeche-dunkler); }
.tabelle-zebra tbody tr:nth-child(even):hover { background: var(--farbe-rand); }

/* "Unsichtbarer" Link (z.B. Nachname in Bewohner-/Mitarbeiterlisten, der
   direkt zum Bearbeiten/Ansehen führt statt eines eigenen "Bearbeiten"-
   Links/einer eigenen Spalte): keine Linkfarbe, kein Unterstrich im
   Ruhezustand - die ganze Zeile bleibt optisch wie reiner Text, macht sich
   aber beim Überfahren mit der Maus per Unterstrich (ohne Farbwechsel) als
   klickbar bemerkbar, zusammen mit dem ohnehin vorhandenen Zeilen-Hover
   (siehe "tbody tr:hover" oben). */
a.link-unsichtbar { color: inherit; text-decoration: none; }
a.link-unsichtbar:hover, a.link-unsichtbar:focus { text-decoration: underline; }

/* Klickbare, sortierbare Tabellen-Spaltenkoepfe (siehe bewohner/liste.php) */
th a { color: inherit; text-decoration: none; white-space: nowrap; }
th a:hover { text-decoration: underline; }

/* Abgekuerzte Tabellen-Spaltenkoepfe mit ausgeschriebenem Titel beim
   Ueberfahren mit der Maus (z.B. "Mo." fuer "morgens" im
   Medikationsplan, siehe public/pflege/medikamente/plan/bearbeiten.php) -
   die gestrichelte Unterlinie und der Hilfe-Mauszeiger machen erkennbar,
   dass sich dahinter ein ausgeschriebener Begriff verbirgt. */
th abbr { text-decoration: underline dotted; cursor: help; }

/* Trennzeile innerhalb EINER durchgehenden Tabelle, um mehrere Gruppen
   (z.B. Produktkategorien im Inko-Produktkatalog) einheitlich
   untereinander darzustellen statt als mehrere eigene Tabellen-"Karten". */
tr.tabelle-gruppenzeile th {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    text-transform: none;
    font-size: 0.85rem;
    letter-spacing: normal;
}
tr.tabelle-gruppenzeile:hover { background: none; }

/* Inkontinenz-Dokumentation (Desktop-Tabelle, siehe dortige liste.php):
   bei mehreren Einträgen desselben Bewohners/Tages bleibt nur der letzte
   Eintrag direkt sichtbar, ein kleiner Pfeil klappt eine zusätzliche
   Zeile mit den früheren Einträgen des Tages auf/zu (per JavaScript,
   siehe <script> am Ende der Datei) - spart bei 6-8 Einträgen deutlich
   Platz/Scrollen, ohne dass "Kacheln" (die andere Ansicht oben, ohne
   Detailspalten) dafür bekannt sein muss. */
.inko-verlauf-knopf {
    background: none;
    border: none;
    padding: 0;
    margin-right: 0.5rem;
    color: var(--farbe-akzent);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    display: inline-block;
    transition: transform 0.15s ease;
}
.inko-verlauf-knopf[aria-expanded="true"] { transform: rotate(90deg); }
.inko-verlauf-zeile:hover { background: none; }
.inko-verlauf-hinweis {
    margin: 0 0 0.4rem 0;
    font-size: 0.8rem;
    color: var(--farbe-text-gedaempft);
}
/* Kleine, bewusst "flachere" Tabelle innerhalb der Verlauf-Zelle - kein
   eigener Schatten/Rahmen (das gäbe eine "Karte in der Karte"), etwas
   kleinere Schrift, da es sich um ergänzende, bereits vergangene
   Einträge handelt. */
.tabelle-verlauf {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}
.tabelle-verlauf th, .tabelle-verlauf td {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}
.tabelle-verlauf th { background: transparent; color: var(--farbe-text-gedaempft); }
.tabelle-verlauf tbody tr:hover { background: var(--farbe-flaeche-dunkler); }

.formular {
    background: var(--farbe-flaeche);
    padding: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    max-width: 560px;
}
.formular label { display: block; margin-top: 0.9rem; font-weight: 600; color: var(--farbe-text-stark); }
.formular input, .formular select, .formular textarea {
    width: 100%; padding: 0.55rem 0.7rem; margin-top: 0.3rem;
    border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein);
    background: var(--farbe-hintergrund); color: var(--farbe-text-stark);
    font-family: inherit; font-size: 1rem;
}
.formular input:focus, .formular select:focus, .formular textarea:focus {
    outline: none; border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px rgba(138, 109, 63, 0.25);
}
.formular textarea { min-height: 4.5rem; resize: vertical; }

/* Deutlich groesseres Auswahlfeld fuer haeufig genutzte, aber knapp
   gehaltene Formulare (z.B. Taetigkeit/Dienstzeit/Stimmung bei der
   Sozialdienst-Dokumentation) - besser lesbar und leichter zu treffen,
   z.B. an einem Tablet auf Station. */
.formular select.feld-gross {
    min-height: 8.6rem; padding: 2.4rem 1rem; font-size: 1.2rem;
}

/* Etwas kleineres, aber immer noch deutlich grosszuegigeres Auswahlfeld
   als der normale Formular-Standard (siehe .feld-gross oben) - fuer
   Felder, die haeufig genutzt werden, aber keine ganz so riesige Flaeche
   wie Dienstzeit/Stimmung brauchen (z.B. "Art der Beschäftigung" bei der
   Sozialdienst-Dokumentation: dort ersetzen eigene Knopfreihen das
   bisherige .feld-gross fuer Dienstzeit/Stimmung, siehe
   .auswahlknopf-gruppe weiter unten - die Auswahlliste selbst bleibt
   ein <select>, nur optisch etwas abgesetzt vom schlichten
   Standardfeld). */
.formular select.feld-mittel {
    min-height: 3.2rem; padding: 0.75rem 1rem; font-size: 1.05rem;
    border-radius: var(--radius); border-width: 1.5px;
}

/* Knopfreihe als Ersatz fuer ein <select> bei Feldern mit sehr wenigen,
   haeufig genutzten Optionen (z.B. Dienstzeit/Stimmung bei der
   Sozialdienst-Dokumentation) - jede Option ein Radio-Knopf, optisch
   aber ein grosser, gut antippbarer Knopf statt eines Auswahlfelds.
   Alle Knoepfe einer Gruppe teilen sich gleichmaessig den verfuegbaren
   Platz (flex: 1 1 0, Wunsch "den Platz ausnutzen"), die ausgewaehlte
   Option wird in der Akzentfarbe eingefaerbt - gleiches Grundmuster wie
   .checkbox-mehrfach-pille oben, hier aber als Radio- statt
   Checkbox-Gruppe (genau EINE statt mehrerer Optionen waehlbar) und mit
   eigener, groesserer Flaeche statt kleiner Pillen. */
.auswahlknopf-gruppe { display: flex; gap: 0.6rem; margin-top: 0.3rem; }
.auswahlknopf {
    flex: 1 1 0;
    min-width: 0;
    display: flex; align-items: center; justify-content: center;
    min-height: 3.6rem; padding: 0.5rem 0.4rem; text-align: center;
    border: 1.5px solid var(--farbe-rand); border-radius: var(--radius);
    background: var(--farbe-hintergrund); color: var(--farbe-text-stark);
    cursor: pointer; user-select: none; font-weight: 600;
}
.auswahlknopf input { display: none; }
.auswahlknopf:has(input:checked) {
    background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: #fff;
}
/* Gleiche Ausnahme wie bei .checkbox-mehrfach-pille: bei Akzentfarbe
   "Weiss" braucht die ausgewaehlte Flaeche dunklen statt weissen Text. */
[data-akzentfarbe="weiss"] .auswahlknopf:has(input:checked) { color: var(--farbe-akzent-text); }

/* Dienstzeit (Frühdienst/Spätdienst): zwei gleich breite Knoepfe statt
   der vorherigen Auswahlliste. */
.auswahlknopf--dienst { font-size: 1.05rem; }

/* Stimmung: drei Smiley-Knoepfe statt der vorherigen Auswahlliste -
   deutlich groesseres Symbol, damit der Smiley auch aus etwas Abstand
   (z.B. Tablet auf Station) klar erkennbar bleibt. */
.auswahlknopf--stimmung { font-size: 1.9rem; min-height: 4rem; }

.formular .checkbox-label {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.9rem; font-weight: 600; color: var(--farbe-text-stark);
}
.formular .checkbox-label input[type="checkbox"] { width: auto; margin: 0; }

/* Label immer oberhalb der Optionen, nie daneben - so hat jede
   Radio-Gruppe dieselbe Grundform (Titel, dann Optionen darunter) und
   mehrere Gruppen nebeneinander (siehe .formular-untergruppe--mehrspaltig)
   fluchten sauber, egal wie viele Optionen jeweils umbrechen. */
.formular .radio-gruppe {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
    margin-top: 0.9rem;
}
.formular .radio-gruppe__label { font-weight: 600; color: var(--farbe-text-stark); }
/* Optionaler Link neben dem Label einer Radio-Gruppe (siehe
   templates/personendaten_formular.php, "link"-Schlüssel je Feld - z.B.
   "Verlauf" neben "Aktuell im Krankenhaus") - bewusst dezenter/kleiner
   als das fettgedruckte Label, damit er nicht wie eine weitere Option
   wirkt. */
.formular .radio-gruppe__link { font-weight: 500; font-size: 0.85rem; margin-left: 0.5rem; }
.formular .radio-gruppe__zeilen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.formular .radio-gruppe__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1rem; }
.formular .radio-label { display: flex; align-items: center; gap: 0.35rem; font-weight: 500; margin: 0; }
.formular .radio-label input[type="radio"] { width: auto; margin: 0; }

/* Mehrfachauswahl als Pillen statt einzelner Checkboxen (z.B.
   "Wohnbereiche" bei der Pflege-Einsatzplanung, siehe
   templates/personendaten_formular.php, Feldtyp 'checkbox_mehrfach') -
   dieselbe runde Pillen-Optik wie die Wochentags-Auswahl im
   Kalender-Modul, damit "mehrere von wenigen Optionen waehlen" im
   ganzen Projekt gleich aussieht. */
.checkbox-mehrfach-gruppe { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.checkbox-mehrfach-pille {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--farbe-rand);
    cursor: pointer; font-size: 0.88rem; user-select: none; font-weight: 500;
}
.checkbox-mehrfach-pille input { display: none; }
/* --pille-farbe: optionale, feste Farbe je Option (z.B. je Wohnbereich,
   siehe Mitarbeiter::WOHNBEREICH_FARBEN) - faellt ohne Angabe auf die
   normale Akzentfarbe zurueck, damit Felder ohne eigene Farbzuordnung
   (z.B. die Wochentags-Pillen) unveraendert aussehen. */
.checkbox-mehrfach-pille:has(input:checked) {
    background: var(--pille-farbe, var(--farbe-akzent));
    border-color: var(--pille-farbe, var(--farbe-akzent));
    color: #fff;
}
/* Ohne eigene --pille-farbe faellt die Pille auf die Akzentfarbe zurueck
   (siehe oben) - bei Akzentfarbe "Weiss" braeuchte das dann auch dunklen
   statt weissen Text, waehrend eine eigens zugeordnete Wohnbereichsfarbe
   (immer kraeftig genug fuer weissen Text) unveraendert bleibt. */
[data-akzentfarbe="weiss"] .checkbox-mehrfach-pille:not([style*="--pille-farbe"]):has(input:checked) {
    color: var(--farbe-akzent-text);
}
/* Kleiner Farbpunkt vor dem Label, auch im nicht angehakten Zustand
   sichtbar - so ist die Farbe-zu-Wohnbereich-Zuordnung schon vor dem
   Anklicken erkennbar (z.B. beim Vergleich mit der Badge-Farbe in der
   Mitarbeiterliste, siehe .badge-wb weiter unten). */
.checkbox-mehrfach-pille__punkt {
    display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
    margin-right: 0.4rem; flex-shrink: 0;
}
.checkbox-mehrfach-pille:has(input:checked) .checkbox-mehrfach-pille__punkt {
    background: #fff !important;
}

/* Wohnbereichs-Badges in der Mitarbeiterliste (siehe
   public/mitarbeiter/liste.php) - dieselben Farben wie die Pillen oben
   (Mitarbeiter::WOHNBEREICH_FARBEN), damit auf einen Blick erkennbar
   ist, welchem/welchen Wohnbereich(en) eine Person zugeordnet ist, ohne
   dafuer erst das Bearbeiten-Formular oeffnen zu muessen. */
.badge-wb-gruppe { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.badge-wb {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; padding: 0.15rem 0.5rem; border-radius: 999px;
    color: #fff; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}

/* Radio-Gruppen mit fest vorgegebener Zeilen-Einteilung (z.B. thematisch
   verwandte Optionen paarweise untereinander statt einer langen,
   umbrechenden Zeile - siehe App\FruehAbendFelder). */
.formular .radio-gruppe--raster .radio-gruppe__zeilen { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.formular .radio-gruppe--raster .radio-gruppe__zeile { flex-wrap: nowrap; gap: 1.25rem; }
.formular .radio-gruppe--raster .radio-label { min-width: 9rem; }

.formular-gruppentitel {
    margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--farbe-rand);
    font-size: 0.85rem; color: var(--farbe-akzent); text-transform: uppercase; letter-spacing: 0.04em;
    font-weight: 700;
}

/* Feinere Unterteilung innerhalb einer Formular-Gruppe (z.B. "Brötchen",
   "Brot", "Aufstrich" innerhalb von Frühstück/Abendbrot) - dezenter als
   .formular-gruppentitel, damit die lange Feldliste nicht unübersichtlich
   wird. */
.formular-untergruppe {
    margin-top: 1.1rem; padding: 0.75rem 1rem; border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein); background: var(--farbe-flaeche);
}
.formular-untergruppentitel {
    font-size: 0.8rem; color: var(--farbe-text-gedaempft);
    text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700;
}
.formular-untergruppe .radio-gruppe:first-of-type,
.formular-untergruppe .checkbox-label:first-of-type,
.formular-untergruppe label:first-of-type { margin-top: 0.5rem; }

/* Mehrere gleichartige Felder einer Untergruppe (z.B. "Brot"/"2. Brot"/
   "Extra Brot" oder "Aufstrich"/"2. Aufstrich") passen bei genug
   Platz nebeneinander statt strikt untereinander - dank align-items:start
   fluchten die Feld-Kaesten oben sauber, auch wenn ihre Optionen
   unterschiedlich viele Zeilen brauchen. */
.formular-untergruppe--mehrspaltig {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: start; column-gap: 2rem;
}
.formular-untergruppe--mehrspaltig .formular-untergruppentitel { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .formular-untergruppe--mehrspaltig { grid-template-columns: 1fr; }
}

.formular--breit { max-width: none; }

/* Feld-Raster fuer breite Formulare (z.B. Bewohner-Karteikarte bei
   Station/Haus, siehe .formular--breit): nutzt die verfuegbare Breite
   aus, indem mehrere Felder pro Datengruppe nebeneinander statt
   strikt untereinander stehen, sobald genug Platz da ist - dieselbe
   Technik wie bei .formular-untergruppe--mehrspaltig. Jedes Feld
   steckt dafuer in einem eigenen .formular-feld-Wrapper (siehe
   templates/personendaten_formular.php); ohne .formular-raster als
   Elternelement bleibt dieser Wrapper unsichtbar/ohne Wirkung (z.B.
   bei den schmaleren Formularen wie Mitarbeiter/Aerzte, die dieselbe
   Vorlage nutzen, aber .formular-spalten statt .formular-raster
   verwenden).
*/
.formular-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    column-gap: 2.5rem;
    align-items: start;
}
.formular-raster .formular-feld--breit { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .formular-raster { grid-template-columns: 1fr; }
}

/* Textfeld (z.B. "Besonderes") und die Speichern-Aktion nebeneinander,
   damit der Speichern-Button nicht einsam unter einem langen,
   schmalen Formular haengt (siehe z.B. Beschaeftigung erfassen) - am
   Smartphone wie gewohnt untereinander. */
.formular-zeile-mit-aktion {
    display: grid; grid-template-columns: 2fr 1fr; gap: 0 2rem; align-items: end;
}
.formular-zeile-mit-aktion__aktion .leer { margin-top: 0.9rem; }
.formular-zeile-mit-aktion__aktion .btn { margin-top: 0.5rem; }
@media (max-width: 640px) {
    .formular-zeile-mit-aktion { grid-template-columns: 1fr; gap: 0; }
}

/* Zwei nebeneinanderliegende Spalten innerhalb eines Formulars (z.B.
   Allergene neben Zusatzstoffe), am Smartphone untereinander. */
.formular-spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2.5rem;
    align-items: start;
}
.formular-spalten .formular-gruppentitel { margin-top: 0; padding-top: 0; border-top: none; }
@media (max-width: 640px) {
    .formular-spalten { grid-template-columns: 1fr; gap: 0; }
}

/* Krankenhausaufenthalte-Verlauf (public/bewohner/krankenhaus.php): das
   schmale Formular "Neuer Aufenthalt" links, die bisherigen Aufenthalte
   als Kachel rechts daneben statt darunter - nutzt die auf Wunsch
   ("den vollen Platz ausnutzen") sonst ungenutzte Breite neben dem
   Formular. Anders als .formular-spalten (dort 1fr 1fr, siehe oben)
   bleibt die Formular-Spalte hier bewusst schmal (analog zu .formular,
   max-width 560px), die Aufenthalte-Kachel bekommt den restlichen
   Platz - eine Tabelle mit vier Spalten braucht mehr Breite als das
   Formular mit nur drei Feldern. */
.kh-verlauf-raster {
    display: grid;
    grid-template-columns: minmax(320px, 560px) 1fr;
    gap: 0 1.5rem;
    align-items: start;
}
@media (max-width: 900px) {
    .kh-verlauf-raster { grid-template-columns: 1fr; gap: 0; }
}

/* Ein-Klick-Auswahl statt Dropdown (z.B. Menüwunsch 1/2/3 erfassen). */
.mengen-picker { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.mengen-picker input[type="radio"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mengen-picker label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem; margin: 0;
    border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein);
    background: var(--farbe-hintergrund); color: var(--farbe-text-stark);
    font-weight: 700; font-size: 0.9rem; cursor: pointer; user-select: none;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.mengen-picker label:hover { border-color: var(--farbe-akzent); }
.mengen-picker input[type="radio"]:checked + label {
    background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-akzent-text);
}
.mengen-picker input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--farbe-akzent); outline-offset: 2px;
}

/* Scrollbare Auswahlliste statt eines langen <select>/einer langen
   Checkbox-Reihe (z.B. Tätigkeit bei "Versorgung erfassen", Mitarbeiter-
   Empfänger bei Terminen) - auf ausdrücklichen Wunsch max. 4 Zeilen
   gleichzeitig sichtbar (siehe Zeilenhöhe unten), der Rest per Scrollen
   erreichbar. Funktioniert sowohl mit Radio- (Einzelauswahl) als auch
   Checkbox-Eingaben (Mehrfachauswahl) je Zeile.
   Die Zeilen-Regeln sind bewusst als ".formular .scroll-liste__zeile"
   (zwei Klassen) statt nur ".scroll-liste__zeile" formuliert: die
   allgemeinen Basisregeln ".formular label" / ".formular input" (siehe
   oben) haben sonst die hoehere CSS-Spezifitaet und ueberschreiben genau
   diese Eigenschaften wieder - sichtbar als ueberbreiter, ueberhoher
   "Button" hinter dem Text (radio bekam width:100%, das Label
   display:block + margin-top). */
.scroll-liste {
    max-height: 11rem; /* 4 Zeilen a 2.75rem */
    overflow-y: auto;
    border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein);
    background: var(--farbe-hintergrund);
}
.formular .scroll-liste__zeile {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0;
    padding: 0.55rem 0.7rem; min-height: 2.75rem; box-sizing: border-box;
    border-bottom: 1px solid var(--farbe-rand); cursor: pointer;
    font-weight: normal; color: inherit;
}
.formular .scroll-liste__zeile:last-child { border-bottom: none; }
.formular .scroll-liste__zeile:has(input:checked) { background: var(--farbe-akzent-schwach, rgba(0, 0, 0, 0.05)); }
.formular .scroll-liste__zeile input[type="radio"],
.formular .scroll-liste__zeile input[type="checkbox"] {
    width: auto; margin: 0; padding: 0; flex: 0 0 auto;
}

/* Nummerierte Variante (z.B. Tätigkeit bei "Versorgung erfassen") - auf
   ausdruecklichen Wunsch ohne sichtbaren Auswahl-Punkt: das Options-
   Feld wird wie bei .mengen-picker unsichtbar (aber weiterhin klickbar/
   per Tastatur bedienbar) ueber dem Label liegend, stattdessen zeigt
   ".scroll-liste__nummer" die Position in der Liste (1, 2, 3, ...). */
.scroll-liste--nummeriert .scroll-liste__zeile input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.scroll-liste__nummer {
    font-weight: 700; color: var(--farbe-text-gedaempft); min-width: 1.5rem;
}
.formular .scroll-liste--nummeriert .scroll-liste__zeile:has(input:checked) {
    background: var(--farbe-akzent); color: var(--farbe-akzent-text);
}
.formular .scroll-liste--nummeriert .scroll-liste__zeile:has(input:checked) .scroll-liste__nummer {
    color: inherit;
}

.btn {
    display: inline-block; margin-top: 1rem; padding: 0.6rem 1.3rem;
    background: var(--farbe-akzent); color: var(--farbe-akzent-text); border: none; border-radius: 999px;
    cursor: pointer; text-decoration: none; font-weight: 600; font-size: 0.95rem;
    box-shadow: var(--schatten);
    transition: background 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: var(--farbe-akzent-dunkel); color: var(--farbe-akzent-text); }
.btn:active { transform: translateY(1px); }
.btn.gefahr { background: var(--farbe-fehler); }
.btn.gefahr:hover { filter: brightness(0.85); }
/* "Erledigt"-Knopf im Kalender (siehe public/pflege/kalender/liste.php):
   gelb/bernstein solange eine Aufgabe noch aussteht - signalisiert "noch
   zu tun", ohne die Dringlichkeit eines roten Knopfes vorzutaeuschen.
   Nach dem Erledigen erscheint der Eintrag stattdessen mit dem gruenen
   .status-erledigt-abzeichen weiter unten in "Kuerzlich erledigt". */
.btn.warnung { background: #d6a24a; color: #2b2010; }
.btn.warnung:hover { filter: brightness(0.9); }
.btn.sekundaer {
    background: transparent; color: var(--farbe-text-stark);
    border: 1px solid var(--farbe-rand); box-shadow: none;
}
.btn.sekundaer:hover { background: var(--farbe-flaeche-alt, rgba(0,0,0,0.05)); color: var(--farbe-text-stark); }

.fehler { color: var(--farbe-fehler); font-weight: 600; }

/* Allergen-/Zusatzstoff-Kennzeichen (Zahlen = Allergene, Buchstaben =
   Zusatzstoffe) - winzig, duenner Rahmen statt gefuellter Flaeche, wie
   auf gedruckten Speiseplaenen ueblich. Siehe App\Models\Gericht::
   kuerzelHtml() und .speiseplan-eintrag__kuerzel (Positionierung unten
   rechts in der Speiseplan-Zelle) in public/kueche/speiseplan.php. */
.kuerzel {
    display: inline-block;
    font-size: 0.62em;
    font-weight: 700;
    line-height: 1.3;
    vertical-align: super;
    margin-left: 0.2em;
    padding: 0 0.3em;
    border-radius: 999px;
    white-space: nowrap;
    cursor: help;
}
.kuerzel--allergen { color: var(--farbe-fehler); border: 1px solid var(--farbe-fehler); }
.kuerzel--kh { color: #fff; background: var(--farbe-fehler); border: 1px solid var(--farbe-fehler); font-size: 0.66em; padding: 0 0.35em; cursor: default; }
.kuerzel--zusatz { color: var(--farbe-akzent); border: 1px solid var(--farbe-akzent); margin-left: 0.15em; }

/* Speiseplan-Eintrag (innerhalb einer Menue-Zeile der Tages-Karte, siehe
   .speiseplan-slot unten): Gerichtname + Beilage oben, die Kuerzel-Zeile
   darunter rechtsbuendig ausgerichtet. */
.speiseplan-eintrag { display: flex; flex-direction: column; }
.speiseplan-eintrag__kuerzel { margin-top: 0.3rem; text-align: right; }

/* Dashboard-Kachel "Kueche & Speiseplan": gleiche Anordnung wie im
   Speiseplan selbst, aber ohne Aufzaehlungspunkte vor jedem Menue. */
.liste-ohne-aufzaehlung { list-style: none; margin: 0; padding: 0; }
.liste-ohne-aufzaehlung li { margin-bottom: 0.75rem; }
.liste-ohne-aufzaehlung li:last-child { margin-bottom: 0; }

/* Kleiner, farblich abgesetzter Hinweis-Badge (z.B. "Im Krankenhaus" in
   der Sozialdienst-Dokumentation) - deutlich sichtbar, aber nicht so
   winzig/hochgestellt wie die Allergen-Kürzel oben. */
.hinweis-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    margin-left: 0.5em;
    padding: 0.1em 0.6em;
    border-radius: 999px;
    color: #fff;
    background: var(--farbe-fehler);
    white-space: nowrap;
}

/* Gruenes Abzeichen "Erledigt" (siehe public/pflege/kalender/liste.php,
   "Kuerzlich erledigt") - Gegenstueck zum gelben .btn.warnung waehrend
   eine Aufgabe noch offen ist. */
.hinweis-badge--erledigt {
    background: #6ba86b;
}

/* Gelbes Abzeichen "bald fällig" (siehe public/pflege/ueberpruefung/) -
   zwischen dem roten .hinweis-badge (ueberfaellig) und dem gruenen
   .hinweis-badge--erledigt (noch reichlich Zeit), analog zum gelben
   .btn.warnung. */
.hinweis-badge--bald {
    background: #d6a24a;
    color: #2b2010;
}

/* Hervorgehobener Hinweiskasten fuer wichtige Zusatzinfos im Fliesstext
   eines Formulars (z.B. beschaeftigungsrelevante Diagnosen bei der
   Sozialdienst-Dokumentation) - deutlicher als ein einfacher <p>-Text,
   aber ruhiger als der rote .hinweis-badge (keine Warnung, nur Kontext). */
.hinweis-kasten {
    background: var(--farbe-flaeche); border-left: 4px solid var(--farbe-akzent);
    border-radius: var(--radius-klein); padding: 0.7rem 1rem; margin: 0 0 1rem;
    box-shadow: var(--schatten);
}
.hinweis-kasten__titel {
    display: block; font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--farbe-akzent); margin-bottom: 0.25rem;
}
.hinweis-kasten__text { display: block; color: var(--farbe-text-stark); overflow-wrap: break-word; }

/* Speiseplan als Kartenraster (eine Karte je Wochentag, Menüs
   untereinander statt einer Tabelle mit vier schmalen Spalten) - auf
   ausdruecklichen Wunsch, weil eine Tabelle auf dem Smartphone nicht
   mehr vernuenftig lesbar war (Spalten zu schmal, Text abgeschnitten).
   Nutzt dieselben ".kachel-raster"/".kachel"-Klassen wie die Dashboard-
   Kacheln (bereits responsiv: eine Spalte auf schmalen Bildschirmen,
   mehrere nebeneinander auf breiten - siehe .kachel-raster weiter
   unten), ".speiseplan-karten" ergaenzt nur die etwas engere
   Mindestbreite, damit auf einem normalen Bildschirm mehr als zwei
   Tage nebeneinander passen. */
.speiseplan-karten { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.speiseplan-tag-karte h2 { margin: 0 0 0.5rem; }
.speiseplan-slot { padding: 0.5rem 0; border-bottom: 1px solid var(--farbe-rand); }
.speiseplan-slot:last-child { border-bottom: none; padding-bottom: 0; }
.speiseplan-slot:first-of-type { padding-top: 0; }
.speiseplan-slot__label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--farbe-text-gedaempft); margin-bottom: 0.2rem;
}

/* Urspruengliche Tabellenansicht des Speiseplans (auf Wunsch als
   Alternative neben der Kartenansicht oben erhalten geblieben, siehe
   public/kueche/speiseplan.php, ?ansicht=tabelle) - eine schmale
   Wochentag-Spalte, drei gleich breite Menue-Spalten und eine etwas
   schmalere Nachtisch-Spalte. Auf kleinen Bildschirmen faellt sie
   deshalb bewusst nicht in eine Kachel-Reihe: dort ist die neue
   Kartenansicht (siehe oben) die empfohlene Ansicht. */
.speiseplan-tabelle-rahmen {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    box-shadow: var(--schatten);
}
.speiseplan-tabelle-rahmen table { box-shadow: none; min-width: 640px; }
@media print {
    /* Beim Drucken/als PDF gibt es kein seitliches Scrollen - die Tabelle
       soll dort immer vollstaendig sichtbar sein (siehe .speiseplan-tabelle
       oben, ggf. zusammen mit dem Querformat-Druckknopf). */
    .speiseplan-tabelle-rahmen { overflow-x: visible; box-shadow: none; }
    .speiseplan-tabelle-rahmen table { min-width: 0; }
}
.speiseplan-tabelle col.spalte-tag { width: 12%; }
.speiseplan-tabelle col.spalte-menue { width: 24%; }
.speiseplan-tabelle col.spalte-nachtisch { width: 16%; }
.speiseplan-tabelle td { vertical-align: top; overflow-wrap: break-word; }
.speiseplan-tabelle .speiseplan-eintrag__kuerzel { text-align: left; margin-top: 0.2rem; }
}

/* Allergene/Zusatzstoffe-Legende unter dem Speiseplan, rechtsbuendig. */
.allergene-legende { margin-top: 1.5rem; max-width: none; text-align: right; }
.allergene-legende .hinweis { text-align: right; }

/* Zwei gleich grosse Boxen nebeneinander (z.B. Erfassungsformular links,
   Uebersichtstabelle rechts bei "Versorgung erfassen") - am Smartphone
   untereinander. */
.zwei-boxen {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start;
}
@media (max-width: 680px) {
    .zwei-boxen { grid-template-columns: 1fr; }
}
.box {
    background: var(--farbe-flaeche); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein); padding: 1.1rem 1.25rem; box-shadow: var(--schatten);
}
.box h2 { margin-top: 0; }
.box .formular { max-width: none; }

/* "Beschaeftigung erfassen": Formular links (dafuer schmaler als die
   sonst ueblichen 560px) und die Diagnosen-Kachel (.hinweis-kasten)
   rechts daneben auf dem Desktop, am Smartphone weiterhin darunter
   (gleiche Reihenfolge im Markup, siehe
   public/sozialdienst/dokumentation/bearbeiten.php). */
.beschaeftigung-raster {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 1.5rem;
    align-items: start;
}
/* min-width: 0 auf beiden Rasterfeldern, da ein CSS-Grid-Feld ohne das
   sonst von sich aus nicht schmaler wird als sein Inhalt "ungebrochen"
   waere (hier z.B. die Dienstzeit-Knoepfe mit einwortigen Labels wie
   "Frühdienst") - ohne diese Regel ragten Formular und Diagnosen-Kachel
   am Smartphone ein paar Pixel ueber den rechten Seitenrand hinaus
   (sichtbar als graue Kante/Kachel am Rand, siehe Fehlerbericht). */
.beschaeftigung-raster .formular { max-width: none; min-width: 0; }
.beschaeftigung-raster .hinweis-kasten { margin-bottom: 0; min-width: 0; }
@media (max-width: 900px) {
    .beschaeftigung-raster { grid-template-columns: 1fr; gap: 0; }
}

/* Kompakte Kachel-Listen (z.B. Geburtstage, Zuletzt angemeldet): jede
   Zeile bleibt einzeilig, zu lange Inhalte werden mit "..." abgeschnitten
   statt umzubrechen und die Kachel unnoetig zu vergroessern. */
.liste-kompakt li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bereich-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* Kompakter Ersatz fuer .bereich-tabs auf tieferen Unterseiten (siehe
   templates/sozialdienst_nav.php) - ein einzelner, unauffaelliger Link
   statt der vollen Reiterleiste. */
.rueck-link { margin-bottom: 1rem; }
.bereich-tabs a {
    display: inline-flex; align-items: center; gap: 0.4em; padding: 0.4rem 1rem;
    background: var(--farbe-flaeche); border-radius: 999px;
    color: var(--farbe-text); text-decoration: none; font-weight: 600;
    box-shadow: var(--schatten);
}
.bereich-tabs a.aktiv { background: var(--farbe-akzent); color: var(--farbe-akzent-text); }

/* "PDF"-Knopf neben den Etagen-/Wohnbereich-Reitern (siehe
   public/bewohner/liste.php) - bewusst optisch abgesetzt (Rahmen statt
   Fuellfarbe, rechtsbuendig) und kein "aktiv"-Zustand, da es kein Filter
   ist, sondern eine eigene Druckansicht in einem neuen Tab oeffnet. */
.bereich-tabs__pdf {
    margin-left: auto;
    background: transparent !important;
    border: 1.5px solid var(--farbe-akzent);
    color: var(--farbe-akzent) !important;
}
.bereich-tabs__pdf:hover { background: var(--farbe-akzent) !important; color: var(--farbe-akzent-text) !important; }

/* Bewohnerliste (Haus/Pflegestation): Umschalter zwischen Listen- und
   Kachel-Ansicht (siehe public/bewohner/liste.php) - auf dem
   Smartphone ohne Wirkung, da dort per Media-Query weiter unten
   ohnehin die Kachel-Ansicht erzwungen wird (die Tabelle waere mit
   ihren vielen Spalten zu breit) - der Umschalter selbst ist dort
   daher ausgeblendet, um nicht eine wirkungslose Auswahl anzubieten.
   Beim Aussendienst gibt es diesen Umschalter gar nicht erst (siehe
   PHP), dort bleibt es unveraendert bei der reinen Tabelle. */
.bewohner-ansicht-umschalter {
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 0;
}
.bewohner-ansicht-umschalter .btn { margin-top: 0; }
.bewohner-ansicht-umschalter .btn.aktiv {
    background: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}
@media (max-width: 720px) {
    .bewohner-ansicht-umschalter { display: none; }
}

/* Wrapper um obigen Umschalter UND den Button "+ Neu anlegen" (siehe
   public/bewohner/liste.php) - der Button steht per margin-left:auto
   ganz rechts, unabhaengig davon, ob der Umschalter selbst gerade
   sichtbar ist (siehe Media-Query oben: auf dem Smartphone verschwindet
   nur der Umschalter, der Anlegen-Button bleibt trotzdem erreichbar). */
.bewohner-ansicht-kopf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.bewohner-ansicht-kopf__anlegen { margin-top: 0; margin-left: auto; }

/* Die Tabelle bleibt Standard, die Kachel-Ansicht ist zunaechst
   ausgeblendet - ausser der Umschalter oben waehlt sie explizit aus
   (naechste Regel) oder der Bildschirm ist schmal (Media-Query ganz
   unten). */
.bewohner-ansicht-kacheln { display: none; }
.bewohner-ansicht[data-ansicht="kacheln"] .bewohner-ansicht-tabelle { display: none; }
.bewohner-ansicht[data-ansicht="kacheln"] .bewohner-ansicht-kacheln { display: block; }

.bewohner-kachel-gruppentitel {
    margin: 1.5rem 0 0.75rem;
}
.bewohner-kachel-gruppentitel:first-child { margin-top: 0; }

/* Bis zu 4 Kacheln pro Reihe auf breiten Bildschirmen, dynamisch
   weniger bei schmaleren Fenstern - dieselben Schwellenwerte wie an
   anderer Stelle in diesem Stylesheet (z.B. .profil-raster), damit
   sich die Breakpoints der Anwendung insgesamt konsistent anfuehlen. */
.bewohner-kachel-raster {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}
@media (max-width: 1100px) {
    .bewohner-kachel-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .bewohner-kachel-raster { grid-template-columns: 1fr; }
}

.bewohner-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--farbe-flaeche);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 0.9rem 1.1rem;
    color: var(--farbe-text-stark);
    min-width: 0;
    overflow-wrap: anywhere;
}
.bewohner-kachel:hover { box-shadow: 0 0 0 2px var(--farbe-akzent) inset; }
.bewohner-kachel strong { font-size: 1rem; }
.bewohner-kachel span { color: var(--farbe-text-gedaempft); font-size: 0.9rem; }

/* Smartphone: die Tabelle haette je nach Bereich mehrere zusaetzliche
   Spalten (Geburtsdatum, Pflegegrad, Wohnbereich, ...) und wuerde die
   sichtbare Breite ueberschreiten bzw. nur per Horizontal-Scroll lesbar
   sein - stattdessen wird hier unabhaengig vom Umschalter oben auf die
   kompakte Kachel-Ansicht (nur Name/Vorname/Raum) umgeschaltet.
   "!important" ist hier bewusst gesetzt: diese Regel soll eine bereits
   getroffene Listen/Kacheln-Auswahl auf dem schmalen Bildschirm gezielt
   uebersteuern, nicht nur die normale Kaskade fortsetzen.
   Bewusst mit vorangestelltem ".bewohner-ansicht" (statt die beiden
   Klassen allein zu adressieren): den Liste/Kacheln-Umschalter UND die
   dazugehoerige Kachel-Ansicht gibt es nur dort, wo $kachelAnsichtErlaubt
   in public/bewohner/liste.php zutrifft (Haus/Station) - nur dort
   erscheint auch der umschliessende ".bewohner-ansicht"-Wrapper (siehe
   dortiges data-ansicht-Attribut). Beim Aussendienst (kein Umschalter,
   siehe dortiger Kommentar "kein Umschalter") fehlt dieser Wrapper, es
   gibt dort also gar keine ".bewohner-ansicht-kacheln" zum Umschalten -
   ohne dieses Scoping blendete die Regel dort die einzige vorhandene
   Ansicht (die Tabelle) komplett aus und liess die Seite auf dem
   Smartphone leer erscheinen (meldete der Kunde am 04.10.2026). */
@media (max-width: 720px) {
    .bewohner-ansicht .bewohner-ansicht-tabelle { display: none !important; }
    .bewohner-ansicht .bewohner-ansicht-kacheln { display: block !important; }
    .bewohner-ansicht .bewohner-kachel-raster { grid-template-columns: 1fr; }
}

/* Wohnbereichs-Reiter (WB1/WB2/WB3) - verwendet von Bewohnerliste,
   Inkontinenz-/Betreuungsdokumentation und Uebergabe (jeweils dortige
   liste.php): auf dem Smartphone sollen alle Reiter ohne Umbruch in
   einer Zeile Platz finden und die Breite ausfuellen (Wunsch: "den
   Platz ausnutzen"), statt wie sonst frei umzubrechen (siehe
   .bereich-tabs oben, unveraendert fuer alle anderen Reiterleisten der
   Anwendung, z.B. die Etagen-Reiter von Bewohnerliste/Haus). Dafuer
   traegt jeder Reiter zusaetzlich einen kurzen Text (.wb-kurz, z.B.
   "WB 1"), der erst hier eingeblendet wird.
   Breakpoint bewusst auf 720px angehoben (vorher 480px, also enger als
   der sonst in dieser Anwendung uebliche Mobil-Breakpoint, siehe z.B.
   .bewohner-ansicht-tabelle weiter oben) - sonst blieben die Reiter auf
   vielen Smartphones (z.B. 481-720px) bei der schmalen, umbrechenden
   Standardoptik haengen, waehrend der Rest der Seite bereits auf die
   Mobilansicht umgeschaltet hatte.
   Wichtig: diese Grundregel MUSS vor der @media-Regel stehen, sonst
   gewinnt sie bei gleicher Spezifitaet durch die spaetere Reihenfolge
   im Stylesheet und blendet .wb-kurz auch auf dem Smartphone wieder aus. */
.bereich-tabs--wb .wb-kurz { display: none; }
@media (max-width: 720px) {
    .bereich-tabs--wb { flex-wrap: nowrap; gap: 0.35rem; }
    .bereich-tabs--wb a {
        /* "justify-content: center" ist hier das eigentlich wirksame Mittel:
           .bereich-tabs a (Grundregel oben) setzt "display: inline-flex" -
           dadurch zaehlt fuer die Zentrierung des Inhalts (hier die
           wb-kurz-Beschriftung) nicht mehr "text-align", sondern
           "justify-content" (text-align wirkt nur auf normalen Inline-
           Textfluss, nicht auf Flex-Kinder). Ohne diese Zeile blieb die
           Beschriftung trotz "text-align: center" am linken Rand der durch
           "flex: 1 1 0" verbreiterten Pille kleben (Wunsch: "WB1 sollte
           eher mittig angeordnet sein"). "text-align: center" bleibt
           zusaetzlich stehen als harmloses Fallback. */
        flex: 1 1 0; justify-content: center; text-align: center; padding: 0.6rem 0.2rem;
        white-space: nowrap; overflow: hidden;
    }
    .bereich-tabs--wb .wb-lang { display: none; }
    .bereich-tabs--wb .wb-kurz { display: inline; }

    /* Inkontinenz-/Betreuungsdokumentation und Uebergabe (siehe dortige
       liste.php) setzen die Reiter zusaetzlich in ".tabs-mit-aktion"
       neben eine Aktion (Datumsauswahl + "Anzeigen"), die auf dem
       Smartphone darunter umbricht (siehe .tabs-mit-aktion weiter
       unten). Die Reiter selbst sind darin aber nur ein normales
       Flex-Kind OHNE eigenes flex-grow und bleiben daher auf ihre
       Inhaltsbreite geschrumpft, selbst wenn sie durch den Umbruch
       allein in ihrer Zeile stehen - die Breite wuerde dann NICHT
       ausgenutzt, obwohl .bereich-tabs--wb a oben bereits auf
       Gleichverteilung eingestellt ist. Deshalb hier zusaetzlich die
       ganze Zeile fuer die Reiter beanspruchen (flex-basis: 100%),
       damit obige Regel tatsaechlich wirkt - nur innerhalb von
       .tabs-mit-aktion und nur mobil, auf breiten Bildschirmen bleibt
       es bei "Reiter links, Aktion rechts auf derselben Zeile". */
    .tabs-mit-aktion .bereich-tabs--wb { flex: 1 1 100%; }
}

/* Karten-Ansicht als Ersatz fuer die (auf dem Smartphone zu breiten)
   Dokumentationstabellen von Inkontinenz und Betreuung (siehe dortige
   liste.php) - bewusst nicht app-weit, siehe Ruecksprache mit dem
   Kunden. Ab 640px wird stattdessen wieder die normale Tabelle gezeigt;
   beide Varianten werden serverseitig parallel gerendert und per CSS
   ein-/ausgeblendet, damit keine rowspan-Logik in CSS nachgebaut werden
   muss (die Inkontinenz-Tabelle nutzt rowspan fuer mehrere Eintraege je
   Bewohner/Tag). */
.karten-nur-mobil { display: none; }
@media (max-width: 640px) {
    .tabelle-nur-desktop { display: none; }
    .karten-nur-mobil { display: flex; flex-direction: column; gap: 0.9rem; }
}
.karte-eintrag {
    background: var(--farbe-flaeche); border-radius: var(--radius);
    box-shadow: var(--schatten); padding: 1rem 1.1rem;
}
.karte-eintrag__kopf {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.75rem; margin-bottom: 0.6rem; padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--farbe-rand);
}
.karte-eintrag__name { font-size: 1.05rem; font-weight: 700; color: var(--farbe-text-stark); }
.karte-eintrag__wb { font-size: 0.8rem; color: var(--farbe-text-gedaempft); white-space: nowrap; }
.karte-eintrag__eintrag + .karte-eintrag__eintrag {
    margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--farbe-rand);
}
.karte-eintrag__zeile { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; font-size: 0.92rem; }
.karte-eintrag__label { color: var(--farbe-text-gedaempft); flex-shrink: 0; }
.karte-eintrag__wert { text-align: right; }
.karte-eintrag__aktion { display: block; width: 100%; text-align: center; margin-top: 0.7rem; box-sizing: border-box; }

/* Smartphone-Kartenansicht fuer "Essen erfassen" (siehe
   public/kueche/bestellung/bearbeiten.php, $formularTabelle) - eine Karte
   je Wochentag statt einer Tabellenspalte, damit jede Options-Zeile die
   volle Breite bekommt statt nur einen schmalen Tabellenspalten-Anteil
   (Wunsch: "damit es auf eine Ansicht passt... alles auf einer Reihe").
   Nutzt dieselben .karte-eintrag/.karten-nur-mobil-Basisklassen wie die
   Inkontinenz-/Betreuungsdokumentation oben. */
.mengen-karte > .mengen-picker + .mengen-picker { margin-top: 0.5rem; }
.mengen-picker--zeile { flex-wrap: nowrap; }
.mengen-karte__besonderheiten {
    width: 100%; box-sizing: border-box; margin-top: 0.6rem;
    padding: 0.5rem 0.65rem; border: 1px solid var(--farbe-rand);
    border-radius: var(--radius-klein); background: var(--farbe-hintergrund);
    color: var(--farbe-text-stark); font-family: inherit; font-size: 0.95rem;
}

/* Bei mehreren Versorgungs-Eintraegen desselben Bewohners/Tages (siehe
   dortige liste.php) bleibt nur der letzte Eintrag direkt sichtbar,
   fruehere Eintraege liegen in einem nativen <details>/<summary> - der
   dabei automatisch vom Browser gezeichnete kleine Pfeil dient zum
   Aufklappen, ganz ohne eigenes JavaScript. */
.karte-eintrag__verlauf > summary.karte-eintrag__eintrag {
    cursor: pointer;
    list-style-position: outside;
}
.karte-eintrag__verlauf > summary.karte-eintrag__eintrag::marker {
    color: var(--farbe-akzent);
}
.karte-eintrag__verlauf > summary.karte-eintrag__eintrag:hover::marker {
    color: var(--farbe-text-stark);
}
/* Der Browser setzt bei geoeffnetem <details> keinen eigenen Abstand
   zwischen Zusammenfassung und Inhalt - die bereits vorhandene Trennlinie
   (".karte-eintrag__eintrag + .karte-eintrag__eintrag") wirkt aber auch
   hier, da <summary> denselben Klassennamen traegt und ein normales
   Geschwisterelement der folgenden Eintraege ist. */

/* Listen-/Kacheln-Umschalter fuer Tagesuebersichten mit vielen Bewohnern
   (Inkontinenz-/Betreuungsdokumentation, siehe dortige liste.php) -
   analog zum Umschalter in public/bewohner/liste.php, aber eigenstaendige
   Klassen: die Kachel-Ansicht zeigt hier bewusst NUR Name/Vorname (Klick
   fuehrt direkt zum Erfassen-/Bearbeiten-Formular fuer den angezeigten
   Tag) statt der vollen Detailtabelle mit allen Eintraegen, und die
   bestehende Karten-Ansicht auf dem Smartphone (.karten-nur-mobil oben,
   zeigt weiterhin die vollen Details) bleibt davon unberuehrt - der
   Umschalter selbst ist deshalb wie dort auf dem Smartphone ausgeblendet. */
.ansicht-umschalter { display: inline-flex; gap: 0.5rem; margin: 0 0 1rem 0; }
.ansicht-umschalter .btn { margin-top: 0; }
.ansicht-umschalter .btn.aktiv {
    background: var(--farbe-akzent);
    border-color: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
}
@media (max-width: 720px) {
    .ansicht-umschalter { display: none; }
}

.namen-kacheln-raster { display: none; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; margin-bottom: 0.5rem; }
[data-ansicht="kacheln"] .namen-kacheln-raster { display: grid; }
[data-ansicht="kacheln"] .tabelle-nur-desktop { display: none; }
@media (max-width: 1100px) {
    .namen-kacheln-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    /* Auf dem Schmalbildschirm gilt weiterhin die volle Karten-Ansicht
       (.karten-nur-mobil), unabhaengig von der hier getroffenen
       Listen/Kacheln-Auswahl. */
    .namen-kacheln-raster { display: none !important; }
}

.namen-kachel {
    display: block; text-align: center; min-width: 0; overflow-wrap: anywhere;
    background: var(--farbe-flaeche); border-radius: var(--radius);
    box-shadow: var(--schatten); padding: 0.85rem 1rem;
    color: var(--farbe-text-stark); font-weight: 600;
}
.namen-kachel:hover { box-shadow: 0 0 0 2px var(--farbe-akzent) inset; }
.namen-kachel--inaktiv { color: var(--farbe-text-gedaempft); font-weight: 400; cursor: default; }
.namen-kachel--inaktiv:hover { box-shadow: var(--schatten); }

/* Zeile mit Reitern/Tabs links und einer Aktion (z.B. Datumsauswahl)
   rechtsbündig auf derselben Ebene - z.B. Wohnbereichs-Reiter + Datum in
   der Sozialdienst-Betreuungsdokumentation. Bricht auf schmalen
   Bildschirmen zweizeilig um. */
.tabs-mit-aktion {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem;
}
.tabs-mit-aktion .bereich-tabs { margin-bottom: 0; }

/* Kompakte Formularelemente ausserhalb von .formular (z.B. eine einzelne
   Datumsauswahl neben einer Reiterleiste) - gleiche Optik wie .formular
   input, aber ohne die umschliessende Karte. */
.eingabe-inline {
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.eingabe-inline input,
.eingabe-inline select {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--farbe-rand); border-radius: var(--radius-klein);
    background: var(--farbe-hintergrund); color: var(--farbe-text-stark);
    font-family: inherit; font-size: 0.95rem;
}
.eingabe-inline input:focus,
.eingabe-inline select:focus {
    outline: none; border-color: var(--farbe-akzent); box-shadow: 0 0 0 3px rgba(138, 109, 63, 0.25);
}
/* Datumsfeld bzw. Auswahlfeld neben einem Button (z.B. Sozialdienst/
   Betreuung, Inkontinenz-Dokumentation, "Neuen Eintrag anlegen" bei der
   Übergabe): rund statt eckig, und exakt auf dieselbe Höhe wie der
   danebenstehende .btn gebracht. Alle drei bekommen dieselbe feste
   "height" (statt sich nur über gleiches Padding anzunähern) - ein
   <input type="date"> bzw. <select> hat browserintern ein eigenes,
   leicht abweichendes Innenmaß (u.a. wegen Kalender-Symbol bzw.
   Dropdown-Pfeil), das mit reinem Padding-Abgleich nicht immer
   pixelgenau zur Button-Höhe passt. */
.eingabe-inline input[type="date"],
.eingabe-inline select,
.eingabe-inline .btn {
    height: 2.35rem;
}
.eingabe-inline input[type="date"],
.eingabe-inline select {
    border-radius: 999px;
    padding: 0 1rem;
}
.eingabe-inline select {
    padding-right: 2.2rem;
}
.eingabe-inline .btn {
    margin-top: 0;
}

/* Seitenkopf: Überschrift links, Aktions-Buttons rechtsbündig daneben. */
.seiten-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.seiten-kopf h1 { margin: 0; }
.seiten-kopf__aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Bewohnername bei der Versorgungserfassung (Inkontinenz): deutlich
   groesser und im Seitenkopf nach rechts geschoben (neben dem
   Rueck-Link), fuer eine bessere Uebersicht auf einen Blick. */
.bewohner-name-gross {
    margin: 0; text-align: right; font-size: 1.35rem; font-weight: 700;
    color: var(--farbe-text-stark); line-height: 1.3;
}
.bewohner-name-gross .leer { display: block; font-size: 0.85rem; font-weight: 400; }
@media (max-width: 640px) { .bewohner-name-gross { text-align: left; } }

.login-box {
    max-width: 340px; margin: 4rem auto; background: var(--farbe-flaeche); padding: 2.25rem;
    border-radius: var(--radius); box-shadow: var(--schatten);
}
.login-box h1 { margin-top: 0; }

/* Dashboard-Kacheln - deutlich rund */
.kachel-raster {
    display: grid;
    /* "14.375rem" statt vorher "230px" (230px bei der Standard-
       Schriftgroesse von 16px entsprechen genau 14.375rem) - auf
       ausdruecklichen Wunsch: bei "Groß"/"Sehr groß" (siehe
       App\Schriftgroesse, skaliert die Wurzel-Schriftgroesse per
       html[data-schriftgroesse] um 118%/136%, siehe ganz oben in dieser
       Datei) wuchs bisher nur der TEXT in den Kacheln mit, nicht aber
       die Mindestbreite der Raster-Spalten selbst (ein fester px-Wert
       reagiert nicht auf die Wurzel-Schriftgroesse) - laengere Texte
       brachen dadurch eher um. Mit "rem" waechst die Mindestbreite jeder
       Kachel automatisch prozentual mit, genau wie der Text - weniger
       Kacheln nebeneinander, aber jede mit mehr Platz, kein zusaetzlicher
       Umbruch. Gilt nur fuer den Desktop: auf schmalen Bildschirmen sorgt
       "auto-fit" ohnehin schon fuer eine einzelne Spalte. */
    grid-template-columns: repeat(auto-fit, minmax(14.375rem, 1fr));
    /* 17.6px statt 1.1rem (entspricht 1.1rem bei 16px Standard-
       Schriftgroesse) - siehe die ausfuehrliche Begruendung bei
       ".app-content" weiter oben: ein mitwachsender Abstand HIER haette
       denselben unerwuenschten Effekt (schrumpfende statt wachsende
       Kacheln bei gleichbleibender Spaltenzahl), da CSS Grid den
       Zwischenraum zwischen den Kacheln beim Verteilen des
       uebrigen Platzes ("1fr") mit einrechnet. */
    gap: 17.6px;
    margin-top: 1.25rem;
}
.kachel {
    background: var(--farbe-flaeche);
    border-radius: var(--radius-kachel);
    box-shadow: var(--schatten);
    padding: 1.3rem 1.5rem;
    /* Absicherung gegen ein bekanntes CSS-Grid-Verhalten: ein Grid-Element
       hat standardmaessig "min-width: auto", darf sich also nie schmaler
       machen als sein breitester Inhalt (z.B. ein einzelnes langes Wort
       ohne Umbruchstelle). Bei ".kachel-raster" mit "auto-fit" kann das
       in seltenen Faellen dazu fuehren, dass eine Kachel (z.B. die
       Termine-Kachel mit dem Mini-Kalender) breiter berechnet wird als
       vorgesehen und dadurch die Spaltenzahl des ganzen Rasters
       durcheinanderbringt - siehe database/PRODUKTIONS-AENDERUNGEN.md.
       "min-width: 0" erlaubt der Kachel, so schmal wie vom Raster
       vorgesehen zu werden; eigener Inhalt bricht stattdessen um. */
    min-width: 0;
}
.kachel h2 {
    margin: 0 0 0.75rem 0; font-size: 0.95rem; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--farbe-akzent);
}
.kachel ul { list-style: none; margin: 0; padding: 0; }
.kachel li { padding: 0.3rem 0; border-bottom: 1px solid var(--farbe-rand); font-size: 0.92rem; }
.kachel li:last-child { border-bottom: none; }
.kachel .leer { color: var(--farbe-text-gedaempft); font-style: italic; }
.kachel--breit { grid-column: span 2; }
@media (max-width: 600px) { .kachel--breit { grid-column: span 1; } }

/* Profilseite: klar abgegrenzte, gleich breite Abschnitte im Raster */
.profil-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    /* Karten in derselben Zeile immer gleich hoch, auch wenn dadurch
       unten Platz frei bleibt - fuer eine ruhigere Optik. */
    align-items: stretch;
    margin-top: 1.25rem;
}
@media (max-width: 1100px) {
    .profil-raster { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .profil-raster { grid-template-columns: 1fr; }
}
.profil-abschnitt--breit { grid-column: 1 / -1; }

/* Zwei Kacheln, die als eine Rastereinheit uebereinander gestapelt
   werden sollen (z.B. "Beschäftigung" + "Vergütung" darunter), bleiben
   dabei in ihrer natuerlichen, kompakten Groesse statt auf Zeilenhoehe
   gedehnt zu werden. ("Passwort ändern" ist nicht mehr Teil dieses
   Stapels - die Kachel ist per "hidden" standardmaessig aus dem Raster
   ausgeblendet, siehe public/profil/index.php.) */
.profil-stapel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-self: start;
}

.profil-abschnitt {
    background: var(--farbe-flaeche);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.5rem 1.75rem;
    margin-bottom: 0;
    max-width: none;
    min-width: 0;
    overflow-wrap: break-word;
}
.profil-abschnitt h2 {
    margin: 0 0 1rem 0; font-size: 1.05rem;
    padding-bottom: 0.6rem; border-bottom: 1px solid var(--farbe-rand);
}
.profil-abschnitt .hinweis { color: var(--farbe-text-gedaempft); font-size: 0.88rem; margin-top: 0.4rem; }

/* Einzelne Nachricht im Verlauf (siehe public/nachrichten/anzeigen.php) -
   frueher feste Hex-Farben (#eef6ff/#f5f5f5), die im dunklen und mittleren
   Theme als heller Fleck durchschimmerten. Jetzt theme-abhaengige
   Variablen: die eigene Nachricht hebt sich per Akzent-Randlinie ab statt
   per hellem Hintergrund. */
.nachricht-eintrag {
    margin: 0 0 1rem 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-klein);
    background: var(--farbe-hintergrund);
}
.nachricht-eintrag--eigene {
    background: var(--farbe-flaeche-dunkler);
    border-left: 3px solid var(--farbe-akzent);
}

.profil-daten dl { margin: 0; }
.profil-daten dt {
    color: var(--farbe-text-gedaempft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.85rem;
}
.profil-daten dt:first-of-type { margin-top: 0; }
.profil-daten dd {
    margin: 0.15rem 0 0 0;
    font-weight: 600;
    color: var(--farbe-text-stark);
    overflow-wrap: break-word;
}

/* Profilseite: "Darstellung" + "Schriftgroesse" nebeneinander in einer Box */
.profil-spalten {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.profil-spalte { flex: 1 1 220px; min-width: 200px; }
.profil-spalte h3 {
    margin: 0 0 0.7rem 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--farbe-text-gedaempft);
    font-weight: 700;
}

/* Passwort aendern: aufklappbare Box im gleichen Stil wie .profil-abschnitt */
details.profil-abschnitt { padding: 0; }
details.profil-abschnitt summary {
    list-style: none;
    cursor: pointer;
    margin: 0;
    padding: 1.5rem 1.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--farbe-text-stark);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
details.profil-abschnitt summary::-webkit-details-marker { display: none; }
details.profil-abschnitt summary::after {
    content: "+";
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--farbe-akzent);
    transition: transform 0.15s ease;
}
details.profil-abschnitt[open] summary::after { content: "–"; }
details.profil-abschnitt[open] summary {
    border-bottom: 1px solid var(--farbe-rand);
}
details.profil-abschnitt .profil-abschnitt__inhalt { padding: 1.5rem 1.75rem; }

/* Persoenliche Daten (nur vom Admin gepflegt) - rein lesend.
   Label ueber Wert gestapelt statt zweispaltig, damit lange Werte
   (z.B. Ausbildungsbezeichnungen) auch in schmaleren Karten nicht
   haesslich mitten im Wort umbrechen. */
.profil-weitere-daten dl { margin: 0; }
.profil-weitere-daten dt {
    color: var(--farbe-text-gedaempft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.85rem;
}
.profil-weitere-daten dt:first-of-type { margin-top: 0; }
.profil-weitere-daten dd {
    margin: 0.15rem 0 0 0;
    font-weight: 600;
    color: var(--farbe-text-stark);
    overflow-wrap: break-word;
}

/* ---------- Druckansichten (Wohnbereichs-Uebersicht, Stueckzahl-Listen) ----------
   Kein PDF-Erzeugungsdienst auf dem Server (kein Composer/vendor-Verzeichnis
   in diesem Projekt) - stattdessen eine auf DIN A4 zugeschnittene
   Druckansicht, die der Browser per "Drucken" -> "Als PDF speichern"
   direkt zu einer PDF-Datei macht. Funktioniert ueberall ohne
   zusaetzliche Serversoftware. */
.keine-druckansicht { }
.nur-druckansicht { display: none; }
@media print {
    .nur-druckansicht { display: block; }
    .keine-druckansicht,
    .app-header,
    .bereich-tabs,
    .rueck-link {
        display: none !important;
    }
    /* Das Wavy-Lines-Hintergrundmuster ist per Theme-Selektor (siehe
       [data-theme="..."] body oben) spezifischer als ein einfaches
       "body" hier und wuerde deshalb ohne dieses Zuruecksetzen trotz
       "background: #fff" beim Drucken/als PDF mitgedruckt - unnoetiger
       Tonerverbrauch, keine Wirkung auf Papier. */
    [data-theme="dunkel"] body,
    [data-theme="hell"] body,
    [data-theme="mittel"] body,
    body {
        background: #fff;
        background-image: none;
        color: #000;
    }
    .app-content { max-width: none; margin: 0; padding: 0; }
    a { color: #000; text-decoration: none; }
    h1, h2, h3 { color: #000; }
    .leer { color: #555; }
}

.druckseite {
    background: var(--farbe-flaeche);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.druckseite h2 { margin-top: 0; }
.druckseite table { box-shadow: none; }
@media print {
    .druckseite {
        background: #fff;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        margin: 0;
        page-break-after: always;
    }
    .druckseite:last-of-type { page-break-after: auto; }
    .druckseite table { border: 1px solid #999; }
    .druckseite th, .druckseite td { border-bottom: 1px solid #ccc; color: #000; background: #fff; }
    /* Speiseplan-Kartenraster (siehe .speiseplan-karten oben): fuer den
       Ausdruck fest auf zwei Spalten statt der responsiven Bildschirm-
       breite - sonst wuerde ein sehr breiter Drucker-/PDF-Rahmen (DIN A4
       Hochformat ist aber schmal) die Karten einzeln untereinander
       zwingen und der Speiseplan zöge sich über mehrere Seiten. */
    .speiseplan-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
    .speiseplan-tag-karte {
        border: 1px solid #999; background: #fff; box-shadow: none;
        padding: 0.6rem 0.75rem; break-inside: avoid;
    }
    .speiseplan-tag-karte h2 { color: #000; }
    .speiseplan-slot { border-bottom-color: #ccc; }
    .speiseplan-slot__label { color: #555; }
    @page { size: A4; margin: 15mm; }
}

/* Kleiner, farblich abgesetzter Zähler-Hinweis (z.B. "3 offen" bei
   Lager-Bestellungen) - wiederverwendbar überall, wo eine Zahl neben
   einem Link auffallen soll. */
.badge {
    display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.5rem;
    background: var(--farbe-akzent); color: var(--farbe-akzent-text); border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; vertical-align: middle;
}

/* Warnfarbe für Bestand unter Mindestbestand (Lager-Modul). */
.lager-bestand-niedrig { color: var(--farbe-fehler); font-weight: 700; }

/* Mini-Monatskalender in der Dashboard-Kachel des Kalender-Moduls
   (siehe public/index.php, App\Kalender\KalenderModul) - dieselbe
   Punkte-Logik wie die grosse Monatsansicht in
   public/pflege/kalender/liste.php, nur kompakter. */
.kalender-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 0.6rem; }
.kalender-mini__kopf { font-size: 0.68rem; text-align: center; color: var(--farbe-text-gedaempft); padding-bottom: 2px; }
.kalender-mini__tag {
    aspect-ratio: 1; border-radius: 6px; padding: 3px 2px 4px;
    font-size: 0.72rem; text-align: center; background: var(--farbe-flaeche-dunkler);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.kalender-mini__tag--leer { background: transparent; }
.kalender-mini__tag--heute { outline: 2px solid var(--farbe-akzent); outline-offset: -2px; font-weight: 700; }
.kalender-mini__punkte { display: flex; gap: 2px; margin-top: 3px; flex-wrap: wrap; justify-content: center; }
.kalender-mini__punkt { width: 6px; height: 6px; border-radius: 50%; cursor: help; }
.kalender-mini__punkt--faellig { background: var(--farbe-fehler); }
.kalender-mini__punkt--ueberfaellig { background: var(--farbe-fehler); outline: 1px solid #fff; outline-offset: -1px; }
/* Allgemeine Erinnerung (keine Pflegetätigkeit) faellig/ueberfaellig:
   gelb/bernstein statt rot - dieselbe Wichtigkeits-Unterscheidung wie
   beim "Erledigen"-Knopf (siehe .btn.warnung weiter oben) und den
   entsprechenden Punkten der Monatsansicht (siehe public/pflege/
   kalender/liste.php, ".kalender-monat__punkt--faellig-allgemein"). */
.kalender-mini__punkt--faellig-allgemein { background: #d6a24a; }
.kalender-mini__punkt--ueberfaellig-allgemein { background: #d6a24a; outline: 1px solid #fff; outline-offset: -1px; }
.kalender-mini__punkt--erledigt { background: #6ba86b; }
.kalender-mini__punkt--geplant { background: var(--farbe-akzent); opacity: 0.55; }

/* Ampel (Haus): liegende Kapsel mit drei Lampen im Bearbeiten-Formular, kleiner Punkt in der Liste */
.ampel-wahl { display: inline-flex; gap: 0.45rem; padding: 0.4rem 0.7rem; background: #2b2b2e; border-radius: 999px; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.ampel-wahl__lampe { width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%; border: 1px solid rgba(0,0,0,.45); cursor: pointer; opacity: .28; transition: opacity .12s, box-shadow .12s; }
.ampel-wahl__lampe:hover { opacity: .6; }
.ampel-wahl__lampe.ist-an { opacity: 1; }
.ampel-wahl__lampe--rot { background: #e5483f; }
.ampel-wahl__lampe--gelb { background: #f2b61f; }
.ampel-wahl__lampe--gruen { background: #3fb950; }
.ampel-wahl__lampe--rot.ist-an { box-shadow: 0 0 8px 2px rgba(229,72,63,.7); }
.ampel-wahl__lampe--gelb.ist-an { box-shadow: 0 0 8px 2px rgba(242,182,31,.7); }
.ampel-wahl__lampe--gruen.ist-an { box-shadow: 0 0 8px 2px rgba(63,185,80,.7); }
.ampel-punkt { display: inline-block; width: 0.4em; height: 0.4em; border-radius: 50%; margin-left: 0.35em; vertical-align: middle; }
.ampel-punkt--rot { background: #e5483f; }
.ampel-punkt--gelb { background: #f2b61f; }
.ampel-punkt--gruen { background: #3fb950; }
td.ampel-spalte, th.ampel-spalte { width: 1.2rem; padding-left: 0.2rem; padding-right: 0.2rem; text-align: center; }
td.ampel-spalte .ampel-punkt { margin-left: 0; width: 0.32rem; height: 0.32rem; }