*{box-sizing:border-box;margin:0;padding:0}
/* Farbtafel. Alle Farben stehen hier – im Rest der Datei wird nur noch auf
diese Namen verwiesen. Der dunkle Anstrich weiter unten tauscht nur diese
Werte aus; kein einziges Gestaltungsregelwerk muss doppelt gepflegt werden. */
:root{
/* Signalfarbe: warnt vor Überschneidungen in der Zeiterfassung. Soll
später im Erscheinungsbild wählbar sein (Benutzer, 22.09.2026) – dann
nur diese eine Angabe überschreiben. */
--signal:#ff2d55;
/* „Heute" im Zeitraster: warmes Sand statt Blau, damit sich die Spalte von
den (blauen) nicht zugeordneten Einträgen abhebt (Benutzer, 22.09.2026). */
--heute:#fbf6e9; --heute-rand:#e6d9b8;
--bg:#f4f6fa; --karte:#fff; --flaeche2:#eef1f7; --feld:#fff;
--text:#1c2431; --leise:#66748c; --rand:#e2e7f0; --rand2:#b9c8e6;
/* Kopfzeile und Menüleiste, bis die Farben des Büros geladen sind (markeAnwenden):
Vorgabe Schwarz wie marke_kopf in app.py (#330, vorher Marineblau) */
--dunkel:#000000; --dunkel2:#171717;
--blau:#3f6fe0; --gruen:#1f9d55; --gelb:#c98a00; --rot:#d64545; --orange:#d9700a;
/* weiche Einfärbungen für Marken, Hinweise und Vergleiche */
--blau-weich:#e8edf9; --blau-weich2:#eef3ff; --blau-text:#33508f; --blau-text2:#2b4c99;
--gelb-weich:#fff2d6; --gelb-weich2:#fff8e6; --gelb-text:#8a5f00; --gelb-rand:#f0dca8;
--rot-weich:#ffe3e0; --rot-weich2:#fdecec; --rot-text:#a33; --rot-rand:#f6cfcc;
--gruen-weich:#dff3e6; --gruen-weich2:#e9f7ee; --gruen-text:#166b3a; --gruen-rand:#c5e8d3;
--grauknopf:#e6eaf2; --grauknopf-text:#33405a;
/* Hinweisblasen (Striche der Chatleiste, „Kopiert“): Tinte auf Papier wie die
Blätter (#328) – vorher Marineblau aus der klassischen Ansicht. Dunkel:
warmes Dunkelgrau im Block der dunklen Blätter (.vblase steht dort mit). */
--balken:#c5cfdf; --balken2:#8298bb; --tipp:var(--tinte); --tippschrift:var(--tinte-auf);
--marke-zahl:rgba(0,0,0,.08);
/* Papier: Blätter und die Fenster, die über dem Raum aufgehen (#298 Stufe 4).
Hell genau die Werte, die vorher fest in den Regeln standen; die dunkle
Fassung setzt body[data-blattthema="dunkel"] weiter unten – nur an .blatt
und an diesen Fenstern, nie hier. --ton ist ein RGB-Dreier für Hauchflächen
und feine Linien: rgba(var(--ton),.08) ist hell schwarz, dunkel weiß. */
--ton:0,0,0;
--papier:#fbfaf7; --blattgrund:rgba(252,251,248,.97); --papiertext:#26221d;
--tinte:#3b352c; --tinte-auf:#fbfaf7; --tinte-hover:#26221d;
--text2:#5b5348; --leise2:#8a8175; --warm:#a0672f; --zurueck:#a9722f;
--sand-weich:#fffaf2; --auf-blau:#fff; --marke-zahl-an:rgba(255,255,255,.25);
--ring-ruht:#6b6357; --blattrand:rgba(255,255,255,.5); --blattgrund-telefon:#fcfbf8;
--schwebeknopf:rgba(252,251,248,.94); --strich:rgba(60,50,38,.28); --strich-stark:rgba(60,50,38,.6);
--beschriftung:#5e564b; --knauf:#fff; --hinweistext:#6f665a; --ton-gegen:255,255,255;
--meldung-ok-bg:#eef3e8; --meldung-ok-text:#3d5a2c; --meldung-fehler-bg:#fbeae7; --meldung-fehler-text:#9b2c20;
--papierleise:#6b6357; --papierrand:#e3ddd2; --papierrand2:#d9d1c4; --papierlinie:#eee7dc;
--fremde-blase:#ece6dc; --leiste-bg:#f3efe8; --zeile-aktiv:#e6dccb; --reiter-an:#fff; --wahl-bg:#efe2cf;
--hinweis-bg:#f4ecdc; --hinweis-text:#6b5a3c; --hinweis-rand:#e6d8bd; --warn:#b3261e; --warn-rand:#e3b7b3;
--fehlerrot:#c0392b; --eingelegt:rgba(255,255,255,.55);
--papierfenster:rgba(252,251,248,.98); --ladegrund:rgba(252,251,248,.9); --ladelicht:#fff;
--auszug:#4a443b; --ok-rand:#cfe0c0; --codegrund:#f6f4ef;
--knopf-an:#fff; --signal-weich:#fdecef; --warm-hauch:rgba(160,103,47,.1); --tabellenkopf:#faf8f4;
--kartengrund:#e8e4dc; --ich-grund:#efe7db; --ich-text:#3b2e1c; --ich-rand:#e3d8c6;
/* Auswahl- und Fokusring (Explorer #188, Mediathek, Baukasten, Suche, Emoji),
Favoritenstern, Schatten als RGB-Dreier (rgba(var(--schatten),.08); dunkel
schwarz statt braun) */
--wahl:#c98b4b; --stern:#d8a31a; --schatten:40,30,15;
/* Diagrammfarben des Verbrauchs (#29): 5 Modell-Plätze in fester Reihenfolge –
1 Blau, 2 Grünblau, 3 Ocker, 4 Violett, 5 Rosé (Datenfarben, vom Benutzer
freigegeben 07.10.2026). Geprüft auf Farbschwäche: in dieser Reihenfolge haben
Nachbarn und Übernächste ΔE ≥ 9,8 (Rot-Grün-Schwäche) und ≥ 15,1 (normal), hell
und dunkel. Ein 6. Modell bekommt keine Farbe, es steht unter „Andere“
(--diagramm-rest, hell); --diagramm-suche (dunkel) ist die Websuche, --diagramm-gpu
(warmes Mittelgrau) die GPU-Miete von Aloa (#337). Ocker liegt
hell unter 3 : 1 – die Werte stehen darum immer auch als Text daneben. */
--diagramm-1:#2f6fa8; --diagramm-2:#2a9d78; --diagramm-3:#d69a1a; --diagramm-4:#5b4aa8; --diagramm-5:#c8608e;
--diagramm-rest:#b3aa9d; --diagramm-suche:#6b6357; --diagramm-gpu:#93826b; --gesicht-schrift:#fbfaf7; --wahl-hauch:rgba(201,139,75,.18);
/* Urlaubsplan (#388, Vorschau abgenommen 10.10.2026): nur warme Töne. Fest = voll,
beantragt = hell mit gestricheltem Rand; je Art ein Ton nur für die Verwaltung;
--up-ueber hellt Wochenende/Feiertag IM Balken auf („kostet keinen Urlaub“). */
--up-we:rgba(120,100,70,.09); --up-ft:rgba(214,160,60,.22); --up-ueber:rgba(251,250,247,.45);
--up-fest:#8a6a3c; --up-fest-text:#fff; --up-beantragt:#efe2cf; --up-beantragt-rand:#8a6a3c; --up-jetzt:#c0582a;
--up-urlaub:#8a6a3c; --up-sonderurlaub:#b88a3e; --up-unbezahlt:#7d6a5a; --up-zeitausgleich:#c47a4c;
--up-krank:#9a4a3a; --up-abwesend:#9a8f83; --up-neutral:#4a443e;
--up-leiste-fest:#8a6a3c; --up-leiste-beantragt:#d9c3a0; --up-fenster:rgba(138,106,60,.12);
--kopfhoehe:52px; --schrift:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* Dunkler Anstrich – NUR für das Menü hinter der Tür (#32; das Ticketfenster
gibt es seit #407 nicht mehr – Tickets sind Blätter). Jede Person wählt ihn in
„Mein Zugang“; app.js setzt dafür data-thema="dunkel" an #menuschicht. Der Tisch
(Frontoffice) und der Eingang bleiben immer im Anstrich, den das Büro
vorgibt – nie am schalten, sonst dunkeln dort etwa die
Bildlaufleisten mit. */
/* Flächen, Schrift und Ränder sind neutral grau, nicht mehr blaugrau (#152,
Wunsch des Benutzers 27.09.2026) – gleiche Helligkeit wie vorher, damit
alle Abstufungen stimmen. Firmenfarben und die weichen Einfärbungen der
Hinweise (blau/gelb/rot/grün) bleiben farbig. */
.menuschicht[data-thema="dunkel"]{
--heute:#2a2519; --heute-rand:#4a4130;
--bg:#161616; --karte:#1f1f1f; --flaeche2:#2a2a2a; --feld:#242424;
--text:#e8e8e8; --leise:#a3a3a3; --rand:#363636; --rand2:#4d4d4d;
--dunkel:#0f0f0f; --dunkel2:#1a1a1a;
--blau:#4b7ded; --gruen:#2fa96a; --gelb:#d99b28; --rot:#e05c5c; --orange:#f0913a;
--blau-weich:#1d2c4b; --blau-weich2:#1a2740; --blau-text:#a9c4ff; --blau-text2:#a9c4ff;
--gelb-weich:#3a2e14; --gelb-weich2:#2f2611; --gelb-text:#f0c76b; --gelb-rand:#5a4820;
--rot-weich:#3d2022; --rot-weich2:#331c1e; --rot-text:#f0a3a3; --rot-rand:#5d2f31;
--gruen-weich:#153224; --gruen-weich2:#12291d; --gruen-text:#7ed6a4; --gruen-rand:#255239;
--grauknopf:#333333; --grauknopf-text:#d6d6d6;
--balken:#474747; --balken2:#6b83a8; --tipp:#333333; --tippschrift:#f2f2f2;
--marke-zahl:rgba(255,255,255,.14);
--fremde-blase:#2e2e2e;
}
/* Bildlaufleisten, Auswahlfelder und Kalender: überall hell, auch wenn das
Gerät dunkel eingestellt ist – nur im dunklen Menü dunkeln sie mit. */
:root{color-scheme:light}
/* Die Schriftfarbe erbt sonst den fertigen (hellen) Wert vom body – deshalb
hier neu aus den eigenen Farben setzen. */
.menuschicht[data-thema="dunkel"]{color-scheme:dark;color:var(--text)}
/* Feste Scrollbalken wie am Mac (#322). Wo das Gerät die Leisten fest
hinstellt (Windows, Linux), wären sie breit, grau und mit Pfeilen – in
dunklen Blättern ein heller Streifen. index.html misst das beim Laden und
setzt dann .feste-scrollbalken an („Ansicht testen“ → Windows ebenso).
Dann gilt: schmaler runder Griff ohne Spur und ohne Pfeile, unter der Maus
etwas breiter – wie am Mac. Farbe = Schriftfarbe der Stelle mit wenig
Deckkraft (currentColor): passt so zu hell und dunkel, zu jedem Blatt und
Fenster, ohne Variable. :where() hält die Gewichtung bei null – Stellen mit
scrollbar-width:none bleiben ohne Leiste. Am Mac (auch mit „Scrollbalken
immer anzeigen“) und wo die Leisten schweben (Tablet, Android), bleibt die
Leiste des Geräts.
Firefox kennt ::-webkit-scrollbar nicht: dort die schmale Standardleiste in
derselben Farbe. Kein scrollbar-color außerhalb davon – Chrome ließe sonst
die Regeln hier fallen (lokal_scrollbalken.py). */
:where(.feste-scrollbalken)::-webkit-scrollbar,
:where(.feste-scrollbalken) ::-webkit-scrollbar{width:12px;height:12px;background:transparent}
:where(.feste-scrollbalken)::-webkit-scrollbar-thumb,
:where(.feste-scrollbalken) ::-webkit-scrollbar-thumb{
background:color-mix(in srgb,currentColor 35%,transparent) padding-box;
border:3px solid transparent;border-radius:6px}
:where(.feste-scrollbalken)::-webkit-scrollbar-thumb:vertical,
:where(.feste-scrollbalken) ::-webkit-scrollbar-thumb:vertical{min-height:32px}
:where(.feste-scrollbalken)::-webkit-scrollbar-thumb:horizontal,
:where(.feste-scrollbalken) ::-webkit-scrollbar-thumb:horizontal{min-width:32px}
:where(.feste-scrollbalken)::-webkit-scrollbar-thumb:hover,
:where(.feste-scrollbalken) ::-webkit-scrollbar-thumb:hover{
border-width:2px;background-color:color-mix(in srgb,currentColor 55%,transparent)}
:where(.feste-scrollbalken)::-webkit-scrollbar-thumb:active,
:where(.feste-scrollbalken) ::-webkit-scrollbar-thumb:active{
border-width:2px;background-color:color-mix(in srgb,currentColor 65%,transparent)}
:where(.feste-scrollbalken)::-webkit-scrollbar-track,
:where(.feste-scrollbalken) ::-webkit-scrollbar-track,
:where(.feste-scrollbalken)::-webkit-scrollbar-corner,
:where(.feste-scrollbalken) ::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
:where(.feste-scrollbalken), :where(.feste-scrollbalken) *{scrollbar-width:thin;
scrollbar-color:color-mix(in srgb,currentColor 35%,transparent) transparent}
}
body{font-family:var(--schrift);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
.verborgen{display:none!important}
button{font:inherit;cursor:pointer;border:0;border-radius:8px}
input,textarea,select{font:inherit;color:inherit;background:var(--feld);border:1px solid var(--rand);border-radius:8px;padding:9px 11px;width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--blau);outline-offset:-1px}
/* Auswahlfelder: eigener Pfeil statt dem des Browsers – der klebte (v. a. in
Safari) am rechten Rand. Zwei Dreiecke in der Schriftfarbe ergeben den
Winkel, passt so zu hell und dunkel. Abstand zum Rand: --pfeilrand (kleine
Felder setzen weniger). Die hohe Gewichtung (:not) sorgt dafür, dass
Regeln wie „.x select{padding:…;background:…}“ Pfeil und Platz nicht löschen.
Breiten im Menü (einheitlich): allein in einer Karte bzw. unter einer
Überschrift max-width:280px, mit langen Einträgen (Modelle) 420px, in einer
Zeile neben Knöpfen/Text (Filter, Sortierung) width:auto. */
select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;
padding-right:calc(var(--pfeilrand,12px) * 2 + 10px)!important;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - var(--pfeilrand,12px) - 5px) 50%,calc(100% - var(--pfeilrand,12px)) 50%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.teamversuch select,.suchwahl,.bvwahl select,.teamkontaktzeile select{--pfeilrand:8px}
/* Häkchenfelder immer in der Signalfarbe des Büros (Erscheinungsbild), nicht
in der Akzentfarbe von System oder Browser (#107). Steht hier einmal für
alle – auch künftige Felder brauchen nichts Eigenes. */
input[type="checkbox"]{accent-color:var(--signal)}
/* Ankreuz- und Auswahlfelder nie auf volle Breite ziehen (die allgemeine
input-Regel oben tut das) – sonst steht das Kästchen mitten in der Zeile. */
input[type="checkbox"],input[type="radio"]{width:auto}
textarea{resize:vertical;min-height:90px;font-family:var(--schrift)}
a{color:var(--blau)}
/* Anmeldung */
.anmeldung{min-height:100dvh;display:grid;place-items:center;background:var(--dunkel);padding:20px}
/* ---------- Der Eingang ----------
Kein Kasten auf farbigem Grund, sondern ein Raum, in dem Leute sitzen. Erst
wer Platz nimmt, bekommt Name und Passwort zu sehen. */
/* Das Standbild liegt als Grund darunter: Es ist sofort da, und wo der Film
nicht laufen darf (etwa bei „Bewegung reduzieren"), bleibt der Raum trotzdem. */
.anmeldung.eingang{position:fixed;inset:0;padding:0;place-items:stretch;overflow:hidden;
color:#f6f1e9;background:#241c14 url("/static/versuch/eingang.jpg") center/cover no-repeat}
.raumfilm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
/* Der Film ist Kulisse, keine Bedienung: nicht anklickbar, nicht anwählbar */
pointer-events:none}
/* Ein Schleier, sonst steht helle Schrift auf hellem Fensterlicht */
.eingangschleier{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 50% 35%,rgba(0,0,0,.06),rgba(0,0,0,.5))}
.eingangmarke{position:absolute;top:30px;left:38px;z-index:3;pointer-events:none;max-width:min(46vw,320px)}
.eingangmarke .markenname{display:block;font-family:"Iowan Old Style",Georgia,serif;
font-style:italic;font-weight:500;font-size:29px;text-shadow:0 2px 14px rgba(0,0,0,.55)}
.eingangmarke .anmeldelogo{display:none} /* der Name allein genügt hier */
.eingangmarke .anmeldelogo img{max-height:34px;vertical-align:middle}
.eingangmarke .anmeldelogo:has(img){display:block;margin-bottom:4px}
.eingangzeile{display:block;font-size:13px;opacity:.72;margin-top:3px;
text-shadow:0 1px 10px rgba(0,0,0,.65)}
.eingangmitte{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);z-index:4;
width:min(420px,92vw);display:grid;justify-items:center;gap:16px}
.einladung{margin:0;text-align:center;font-family:"Iowan Old Style",Georgia,serif;
font-style:italic;font-size:clamp(19px,2.4vw,25px);line-height:1.35;
text-shadow:0 2px 16px rgba(0,0,0,.6)}
.anmeldung .platzknopf{border:0;border-radius:999px;padding:13px 34px;font-size:15px;cursor:pointer;
background:rgba(252,250,246,.94);color:#2b2620;font-weight:500;
box-shadow:0 10px 34px rgba(0,0,0,.35);transition:transform .15s ease,background .15s ease}
.anmeldung .platzknopf:hover{background:#fff;transform:translateY(-1px)}
/* Das Anmeldeblatt liegt zusammengefaltet, bis jemand Platz nimmt */
.anmeldeblatt{display:none;width:100%;gap:11px;
background:rgba(252,250,246,.96);color:#2b2620;border-radius:16px;padding:22px 22px 18px;
box-shadow:0 20px 60px rgba(0,0,0,.45)}
.anmeldung.sitzt .anmeldeblatt{display:grid;animation:aufblaettern .28s ease}
.anmeldung.sitzt .platzknopf{display:none}
@keyframes aufblaettern{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.anmeldeblatt .hinweis{color:#6b6357;font-size:13.5px;margin:0}
.anmeldeblatt input{background:rgba(0,0,0,.045);border:1px solid rgba(0,0,0,.09);color:#2b2620}
.anmeldung .anmeldeblatt button[type=submit]{background:#2b2620;color:#fff;border-radius:10px;padding:11px;font-weight:600}
.anmeldeblatt .auge{background:transparent;color:#6b6357}
.anmeldeblatt .fehler{margin:0}
/* Anstrich umschalten ergibt hier keinen Sinn – der Raum ist ein Foto. */
.anmeldung.eingang .sprachknopf{background:rgba(252,250,246,.22);color:#fff;backdrop-filter:blur(6px)}
/* Früher war der Film hier ausgeblendet, wenn im Betriebssystem „Bewegung
reduzieren" eingeschaltet ist. Das hat am 12.09.2026 dazu geführt, dass
auf dem iPhone nur das Standbild zu sehen war – die Einstellung ist dort
oft an, ohne dass man es weiß. Der Eingang IST der Film; ohne ihn fehlt
dem Haus die Tür. Er läuft daher immer. Rücksicht bleibt insofern, als
er stumm ist, nichts blinkt und nichts springt. */
@media(max-width:560px){
.eingangmarke{top:22px;left:22px}
.eingangmitte{bottom:6vh;width:min(420px,94vw)}
}
.anmeldung .karte{background:var(--karte);padding:32px;border-radius:14px;width:min(360px,100%);display:grid;gap:12px}
.anmeldung h1{font-size:26px}
.anmeldung .hinweis{color:var(--leise);font-size:14px;margin-bottom:4px}
.anmeldung button{background:var(--blau);color:#fff;padding:11px;font-weight:600}
.fehler{color:var(--rot);font-size:14px;min-height:20px}
/* Rahmen */
.buero{display:grid;grid-template-columns:var(--spaltenbreite,230px) 1fr;grid-template-rows:auto 1fr;height:100dvh;overflow:hidden}
/* Die Seitenleiste geht über die volle Fensterhöhe, der Kopf sitzt rechts daneben */
.spalte{grid-column:1;grid-row:1/-1}
.kopf{grid-column:2;grid-row:1;display:flex;align-items:center;gap:12px;background:var(--dunkel);color:#fff;padding:10px 16px;min-height:var(--kopfhoehe);position:sticky;top:0;z-index:30}
.inhalt{grid-column:2;grid-row:2}
.marke{font-weight:700}
.kopfmarke{display:none}
.wachstum{flex:1}
.freigabezaehler{background:var(--gelb);color:#fff;padding:3px 10px;border-radius:20px;font-size:13px;font-weight:600}
.kopf .klein{background:rgba(255,255,255,.15);color:#fff;padding:6px 12px;font-size:13px}
.menuknopf{display:none;background:rgba(255,255,255,.15);color:#fff;padding:5px 11px;font-size:17px}
/* Menüspalte */
.spalte{background:var(--dunkel2);color:#c9d5ea;padding:0 10px 14px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
/* Markenblock ganz oben in der Seitenleiste */
.markenblock{flex:0 0 auto;display:flex;align-items:center;gap:9px;min-height:var(--kopfhoehe);
margin:0 -10px 8px;padding:0 10px;border-bottom:1px solid rgba(255,255,255,.1)}
.markenknopf{position:relative;flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
background:transparent;color:#fff;font-size:19px;line-height:1;padding:0;pointer-events:none}
/* eigene Fläche fürs Logo – hier lässt sich das Emoji später gegen ein ![]()
tauschen */
.markenlogo{display:grid;place-items:center;width:26px;height:26px;font-size:19px;line-height:1}
.markenlogo img{width:100%;height:100%;object-fit:contain;display:block}
.markenauf{display:none;font-size:17px;line-height:1}
.markentext{font-weight:700;color:#fff;flex:1 1 auto;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.zuknopf{flex:0 0 auto;width:28px;height:28px;display:grid;place-items:center;font-size:15px;line-height:1;
background:rgba(255,255,255,.09);color:#c9d5ea;padding:0}
.zuknopf:hover{background:rgba(255,255,255,.2);color:#fff}
#agentennav{flex:1;min-height:40px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.navpunkt{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;cursor:pointer;font-size:14px;color:#c9d5ea;text-decoration:none}
.navpunkt:hover{background:rgba(255,255,255,.08)}
.navpunkt.aktiv{background:var(--blau);color:#fff;font-weight:600}
.navtitel{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#7b8db0;margin:14px 0 4px 11px}
.navblock{display:flex;flex-direction:column;gap:2px}
.navblock.unten{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);flex:0 0 auto}
.agentkopf{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;cursor:pointer;font-weight:600;color:#e6edf9}
.agentkopf:hover{background:rgba(255,255,255,.08)}
.punkt{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.unterpunkte{margin:2px 0 8px 14px;border-left:1px solid rgba(255,255,255,.14);padding-left:6px;display:flex;flex-direction:column;gap:1px}
.unterpunkt{padding:6px 10px;border-radius:6px;font-size:13.5px;cursor:pointer;color:#a9b8d2}
.unterpunkt:hover{background:rgba(255,255,255,.07)}
.unterpunkt.aktiv{background:var(--blau);color:#fff;font-weight:600}
.pille{background:var(--gelb);color:#fff;border-radius:20px;padding:0 7px;font-size:11.5px;font-weight:700;margin-left:auto}
.notaus{background:#5c2222;color:#ffb4b4;padding:9px;font-size:13.5px;font-weight:600;width:100%}
.notaus:hover{background:var(--rot);color:#fff}
.schatten{display:none}
/* Knopf mit dem Namen des angemeldeten Benutzers – er öffnet das Fenster */
.nutzerknopf{background:rgba(255,255,255,.07);width:100%;text-align:left;color:#c9d5ea;font-weight:600}
.nutzerknopf .navtext{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nutzerknopf .nutzerpfeil{font-size:11px;opacity:.6;flex:0 0 auto}
.nutzerknopf:hover{background:rgba(255,255,255,.16);color:#fff}
.nutzerknopf.aktiv{background:var(--blau);color:#fff}
.buero.schmal .nutzerknopf .nutzerpfeil{display:none}
/* Eigenes Fenster für Verwaltung, Profil und Einstellungen */
.menuschicht{position:fixed;inset:0;background:rgba(20,14,8,.55);z-index:95;
display:grid;place-items:center;padding:18px}
/* Das Fenster wächst mit dem Bildschirm und füllt ihn bis auf einen schmalen
Rand. Die Grenze bei 2000px ist keine Bescheidenheit, sondern Erfahrung:
Darüber steht auf einem sehr großen Schirm mehr Rand als Inhalt. Damit die
Fließtexte darin nicht zu langen Zeilen werden, sind sie eigens begrenzt
(siehe .menukoerper .karte>p weiter unten). */
.menublatt{background:var(--karte);border-radius:14px;
width:min(2000px,100%);height:min(1200px,100%);
display:grid;grid-template-columns:238px 1fr;overflow:hidden;
box-shadow:0 18px 60px rgba(var(--schatten),.4)}
.menuspalte{background:var(--dunkel);padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.menuspaltekopf{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;
padding:6px 8px 12px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:8px}
.menuavatar{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);
display:grid;place-items:center;font-size:15px;flex:0 0 auto}
.menuwer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menupunkt{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:8px;
cursor:pointer;font-size:14px;color:#c9d5ea}
.menupunkt:hover{background:rgba(255,255,255,.08)}
.menupunkt.aktiv{background:var(--blau);color:#fff;font-weight:600}
.menutitel{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#7b8db0;
margin:14px 0 4px 11px;min-height:6px}
.menuinhalt{position:relative;overflow-y:auto;background:var(--bg)}
.menukoerper{padding:14px 26px 22px}
/* Erklärtexte bleiben lesbar, auch wenn das Fenster sehr breit ist: Über etwa
100 Zeichen je Zeile findet das Auge beim Umbruch die nächste Zeile nicht
mehr zuverlässig. Tabellen und Formulare nutzen die Breite weiterhin ganz. */
.menukoerper .karte>p,.menukoerper>.unterzeile{max-width:105ch}
/* Kopfzeile des Fensters: Überschrift links, Schließen-x rechts. Sie klebt
oben und scrollt nicht mit – bei langen Seiten bleibt das x erreichbar
(#106). Die Überschrift kommt aus menueTitel(); die