/* ---------- Das Menue oben links ----------
   Drei Striche im Kopf, dort wo frueher "Mein Profil" stand (so hat Evi es
   gewollt). Es ist ein Fenster wie alle anderen (.overlay/.modal), nur klappt
   es oben links auf, statt von unten hereinzukommen. Ganz oben Mein Profil,
   darunter die Einrichtung als Zeilen. Farben nur ueber var(--...). */
.overlay.menue-overlay{
  align-items:flex-start;justify-content:flex-start;
  padding:calc(8px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px) * .5);
}
.modal.menue{
  width:min(360px, 100%);max-width:360px;padding:20px 14px 14px;
  transform-origin:top left;animation-name:menueAuf;
}
@keyframes menueAuf{from{opacity:0;transform:translate(-12px,-10px) scale(.96);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ .modal.menue{animation:none;} }
.modal.menue h3{margin:0 0 14px 8px;}
.modal.menue .modal-close{margin:-2px 2px 0 0;}
.modal.menue .set-block-kopf{margin:16px 8px 6px;}

.mn-liste{display:flex;flex-direction:column;gap:2px;}
.mn-zeile{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px 8px;border:none;border-radius:16px;background:none;
  text-align:left;color:var(--ink);font-family:var(--font-body);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background var(--dur) var(--ease), transform .06s;
}
.mn-zeile:active{background:var(--accent-soft);transform:scale(.985);}
.mn-z{
  width:38px;height:38px;flex:none;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-deep);
}
.mn-z svg{width:20px;height:20px;}
.mn-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
.mn-txt b{font-size:14.5px;font-weight:650;line-height:1.25;overflow-wrap:anywhere;}
.mn-txt small{font-size:11.5px;line-height:1.3;color:var(--ink-soft);overflow-wrap:anywhere;}
.mn-pfeil{flex:none;display:flex;color:var(--ink-soft);}
.mn-pfeil svg{width:16px;height:16px;}

/* Mein Profil ist der erste Punkt und darf man nicht uebersehen: eine eigene
   Karte, das Bild rund wie im Profil. */
.mn-profil{
  padding:11px 12px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.mn-ich{border-radius:50%;background:var(--surface-2);}
.mn-ich:has(.kopf-ich){background:var(--accent-soft);}

@media (hover:hover) and (pointer:fine){
  .mn-zeile:hover{background:var(--accent-soft);}
  .mn-profil:hover{background:var(--accent-soft);border-color:var(--accent);}
}

/* ---------- Reiter zum Aufklappen (Menü, alle Konten) ----------
   Jeder Reiter ist eine Karte: der Kopf ist eine gewohnte Zeile (.mn-zeile), die
   Zeilen dahinter sind dieselben wie in der flachen Liste. Das Fach gleitet über
   die Zeilenhöhe (grid-template-rows 0fr → 1fr) - keine feste Höhe, kein Sprung,
   und ohne neu zu zeichnen bleibt das Fenster stehen (menueHalten() in
   js/37-menue.js hält den Kopf ruhig). Zu von Haus aus. */
.mn-gruppen{display:flex;flex-direction:column;gap:8px;}
.mn-gruppe{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mn-gruppe.auf{border-color:color-mix(in srgb, var(--accent) 45%, var(--line));box-shadow:var(--shadow);}
.mn-kopf{padding:10px 12px;border-radius:17px;}
.mn-zahl{
  flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.mn-dreh svg{transition:transform var(--dur-ruhig) var(--ease);}
.mn-gruppe.auf .mn-dreh svg{transform:rotate(180deg);}
.mn-fach{
  display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--dur-ruhig) var(--ease), opacity var(--dur) var(--ease);
}
.mn-gruppe.auf .mn-fach{grid-template-rows:1fr;opacity:1;}
.mn-fach-in{min-height:0;overflow:hidden;}
.mn-fach .mn-liste{
  padding:6px 6px 8px;
  background:linear-gradient(var(--line), var(--line)) center top / calc(100% - 24px) 1px no-repeat;
}
.mn-fach .mn-zeile{padding:8px 6px;}
/* Die Zeilen gleiten beim Aufklappen ein kleines Stück nach, statt nur aufzutauchen. */
.mn-fach .mn-liste{transform:translateY(-6px);transition:transform var(--dur-ruhig) var(--ease);}
.mn-gruppe.auf .mn-fach .mn-liste{transform:none;}
.mn-lose{margin-bottom:8px;}
.mn-platz{height:0;pointer-events:none;}

/* "Einrichtung starten": eigene Karte direkt unter Mein Profil, wie die Reiter.
   Ohne sie (Einrichtung erledigt) rückt "Mein Unternehmen" nach oben. */
.mn-start{margin-top:10px;}
.mn-start .mn-zeile{background:var(--surface);border:1px solid var(--line);padding:10px 12px;border-radius:18px;}

@media (prefers-reduced-motion:reduce){
  .mn-fach, .mn-fach .mn-liste, .mn-dreh svg, .mn-gruppe{transition:none;}
}
@media (hover:hover) and (pointer:fine){
  .mn-gruppe:not(.auf):hover{border-color:var(--accent);}
}

/* ---------- Die Seite eines Menüpunkts ----------
   Kopf wie bei der Auswertung (.aw-zurueck, .aw-kopf); der Abschnitt aus den
   Einstellungen steht offen darunter, ohne eigene Kopfzeile - der Titel steht
   schon oben. "Fertig" klebt nicht, es steht unter dem Abschnitt. */
.ein-abschnitt .cat-head{display:none;}
.ein-abschnitt .cat-body{padding-top:14px;}
.ein-fertig{width:100%;margin:18px 0 8px;gap:8px;}
.ein-fertig svg{width:18px;height:18px;}

/* ---------- Fenster gehen sanft weg ----------
   closeModal() (js/23-dialoge.js) blendet das Fenster aus, statt es
   abzuschneiden: der Grund wird durchsichtig, der Kasten gleitet ein Stück
   hinaus (das Menü klappt zur Ecke zurück). Danach wird es entfernt. */
.overlay.geht{animation:dimOut .18s ease both;pointer-events:none;}
.overlay.geht .modal{animation:sheetOut .2s cubic-bezier(.4,0,1,1) both;}
.overlay.geht .modal.menue{animation:menueZu .18s cubic-bezier(.4,0,1,1) both;}
@keyframes dimOut{from{opacity:1;}to{opacity:0;}}
@keyframes sheetOut{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(22px);}}
@keyframes menueZu{from{opacity:1;transform:none;}to{opacity:0;transform:translate(-10px,-8px) scale(.97);}}
@media (prefers-reduced-motion:reduce){.overlay.geht, .overlay.geht .modal{animation:none;}}

/* Die Überschrift einer Einrichtungsseite bricht ein langes Wort um, statt
   über den Rand zu laufen ("Nachrichtenvorlagen" bei 320 px). */
.ein-seite .ck-titel{min-width:0;}
.ein-seite .ck-titel h1{overflow-wrap:anywhere;hyphens:auto;}

/* ---------- Dein Alltag und das Postfach ----------
   "Dein Alltag" ist eine Karte unter Mein Profil (Postfach, Auswertung, Kunden
   importieren): dieselben Zeilen wie der Rest des Menüs, nur in einem Kasten. Farben nur über var(--…). */
.mn-karte{
  padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:18px;
}
.mn-zahl + .mn-pfeil{margin-left:-4px;}
.eg-label{display:flex;align-items:center;gap:8px;margin:14px 2px 8px;}
.eg-liste{
  padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-karte, 14px);
}
.eg-leer{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 14px 10px;color:var(--ink-soft);font-size:13px;line-height:1.45;
}
.eg-leer b{font-size:15px;color:var(--ink);}
.eg-leer-z{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ok-soft);color:var(--ok);margin-bottom:4px;
}
.eg-leer-z svg{width:24px;height:24px;}

/* Das Postfach (js/44-eingang.js): Kopf, Suche, Chips je Art, eine Liste nach Dringlichkeit,
   darunter zugeklappt das Erledigte. Jede Zeile trägt links ein Kalenderblatt in der Farbe ihrer
   Art: Termine im Akzent, Urlaub hellblau, Krank orange (die Töne aus css/27-krank.css), Team
   mit dem Bild der Person. Die Farbe steckt in --pf (Fläche) und --pf-text (Schrift). */
.modal.pf .pf-suche{margin:0 0 10px;}
.modal.pf .search-wrap .sw-clear[hidden]{display:none;}
.modal.pf .pf-chips{margin-bottom:12px;flex-wrap:wrap;overflow:visible;}
.pf-liste{display:flex;flex-direction:column;gap:8px;}
.pf-zeile{
  --pf:var(--accent-soft);--pf-text:var(--accent-deep);--pf-rand:var(--accent);
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:var(--ink);
  padding:10px 10px 10px 10px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-karte, 14px);cursor:pointer;
  box-shadow:inset 3px 0 0 var(--pf-rand);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--dur-schnell, .14s) var(--ease-feder, ease), border-color var(--dur, .22s) var(--ease, ease);
}
.pf-zeile:active{transform:scale(.985);transition-duration:.06s;}
@media (hover:hover) and (pointer:fine){ .pf-zeile:hover{border-color:var(--pf-rand);} }
.pf-zeile.pf-urlaub{--pf:var(--urlaub-soft);--pf-text:var(--urlaub-text);--pf-rand:var(--urlaub-blau);}
.pf-zeile.pf-krank{--pf:var(--krank-soft);--pf-text:var(--krank-text);--pf-rand:var(--krank);}
.pf-zeile.pf-team{--pf:var(--ok-soft);--pf-text:var(--ok);--pf-rand:var(--ok);}
.pf-blatt.bu-datum{
  width:46px;padding:7px 0 6px;border-radius:var(--r-feld, 10px);
  background:var(--pf);color:var(--pf-text);font-size:17px;font-weight:700;line-height:1.05;
}
.pf-blatt.bu-datum small{margin-top:2px;font-size:9.5px;letter-spacing:.05em;opacity:1;}
.pf-person{flex:none;width:46px;display:flex;justify-content:center;}
.pf-person .pe-punkt.gross{width:42px;height:42px;font-size:17px;}
.pf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.pf-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;}
.pf-kopf b{font-size:14.5px;font-weight:650;line-height:1.25;overflow-wrap:anywhere;}
.pf-art{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1.35;color:var(--ink-soft);overflow-wrap:anywhere;}
.pf-art i{flex:none;display:flex;color:var(--pf-text, var(--ink-soft));font-style:normal;}
.pf-art i svg{width:13px;height:13px;}
.pf-zeile .pf-art{display:block;}
.pf-zeile .pf-art i{display:inline-flex;vertical-align:-2px;margin-right:4px;}
.pf-marken{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:2px;}
.pf-alter{margin-left:auto;padding-left:6px;font-size:10.5px;color:var(--ink-soft);white-space:nowrap;}
.pf-mark{
  font-size:11px;font-weight:600;line-height:1.2;padding:3px 7px;border-radius:var(--r-klein, 6px);
  background:var(--surface-2);color:var(--ink-soft);overflow-wrap:anywhere;
}
.pf-dringend{
  font-size:10.5px;font-weight:700;line-height:1;padding:4px 7px;border-radius:999px;
  background:var(--off-soft);color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger);
}
.pf-dringend.knapp{background:var(--wait-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--wait);}
.pf-dringend.leise{background:var(--surface-2);color:var(--ink-soft);font-weight:600;box-shadow:none;}
.pf-ende{flex:none;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:6px;align-self:stretch;}
.pf-ende small{font-size:10.5px;color:var(--ink-soft);white-space:nowrap;}
.pf-ende .mn-pfeil{margin-top:auto;}
.pf mark{background:var(--wait-soft);color:inherit;border-radius:3px;padding:0 1px;}
.pf-leer{display:flex;flex-direction:column;gap:4px;text-align:center;padding:20px 12px;font-size:13px;color:var(--ink-soft);}
.pf-leer b{font-size:14px;color:var(--ink);}

/* Das Erledigte: eine Zeile zum Aufklappen, darin leise Zeilen mit Haken oder Kreuz. */
.pf-erledigt{margin-top:16px;}
.pf-erledigt-kopf{
  display:flex;align-items:center;gap:8px;width:100%;padding:10px 4px;font:inherit;font-size:13px;font-weight:600;
  color:var(--ink-soft);background:none;border:none;border-top:1px solid var(--line);cursor:pointer;text-align:left;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.pf-erledigt-kopf > span:first-child{flex:1;min-width:0;}
.pf-pfeil{display:flex;transition:transform var(--dur, .22s) var(--ease, ease);}
.pf-pfeil svg{width:15px;height:15px;}
.pf-erledigt.auf .pf-pfeil{transform:rotate(90deg);}
.pf-f-liste{display:flex;flex-direction:column;gap:6px;animation:pfAuf var(--dur-ruhig, .34s) var(--ease, ease) both;}
@keyframes pfAuf{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.pf-f{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;color:var(--ink);
  padding:8px 10px;border-radius:12px;background:var(--surface-2);border:none;
}
button.pf-f{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.pf-f .anf-f-z{flex:none;}
.pf-f .pf-kopf b{font-size:13.5px;font-weight:600;}
.pf-f .pf-art{font-size:11.5px;}
.pf-f.ok .anf-f-z{background:var(--ok-soft);color:var(--ok);}
.pf-f.nein .anf-f-z{background:var(--surface);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line);}

/* „‹ Postfach“ oben in Terminanfragen und Urlaub & Krankmeldungen, wenn man von dort kam. */
.pf-zurueck{
  display:inline-flex;align-items:center;gap:4px;margin:-4px 0 10px -6px;padding:6px 10px 6px 4px;
  font:inherit;font-size:13px;font-weight:600;color:var(--accent-deep);background:none;border:none;border-radius:var(--r-feld, 10px);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.pf-zurueck svg{width:16px;height:16px;}
@media (hover:hover) and (pointer:fine){ .pf-zurueck:hover{background:var(--accent-soft);} }
/* Der Eintrag, zu dem das Postfach gesprungen ist, leuchtet einmal auf (Rand, kein Schatten – die Karten tragen dort einen Ring). */
.pf-blitz{animation:pfBlitz 1.4s ease-out 1;}
@keyframes pfBlitz{
  0%{outline:2px solid var(--accent);outline-offset:6px;}
  60%{outline:2px solid var(--accent);outline-offset:2px;}
  100%{outline:2px solid transparent;outline-offset:2px;}
}
@media (prefers-reduced-motion:reduce){ .pf-blitz{animation:none;outline:2px solid var(--accent);outline-offset:2px;} .pf-f-liste{animation:none;} }

/* ---------- Zahl am Menüknopf ----------
   Solange etwas auf Antwort wartet, steht die Zahl an der Ecke des Menüknopfs in der Kopfzeile. Der Kreis
   schneidet ab (overflow), darum sitzt sie am Halter darum. Ein Ring in der Farbe des Grundes löst sie vom
   Kreis. Farben nur über var(--…). */
.ks-halter{position:relative;display:flex;}
.ks-zahl{
  position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--on-accent);box-shadow:0 0 0 2px var(--ground);
  font-size:11px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* ---------- Der Fuss des Menüs ----------
   Hell/Dunkel und Sprache als Chips in einer Karte (die gewohnten Chips mit Optionsfeld, .sg-chip),
   darunter der Knopf zum Abmelden wie in den Einstellungen. Wird es eng (320 px, große Schrift), rutschen die
   Chips unter ihr Wort. */
.mn-fuss{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
.mn-schnell{display:flex;flex-direction:column;gap:0;padding:4px 12px;}
.mn-schnell-zeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:9px 0;}
.mn-schnell-zeile + .mn-schnell-zeile{border-top:1px solid var(--line);}
.mn-schnell-wort{font-size:14px;font-weight:650;}
.mn-schnell .sg-chips{margin:0;gap:6px;}
.mn-schnell .sg-chip{min-height:36px;}
.mn-abmelden{width:100%;gap:8px;}