/* ============ Das Gewand des Teams ============
   Alles, was mit dem Team zu tun hat, bekommt eine gemeinsame Handschrift (so hat
   Evi es gewollt: harmonisch, elegant, modern – nicht überall dasselbe):
   - jede Person ihre Farbe (`ku-ton`, wie die Kunden), jede Rolle ihren Ton (`--rt`),
   - Personen als einzelne Kacheln statt einer langen Liste,
   - die fünf Rechte als kleine Zeichen (kräftig = voll, mit Rand = eingeschränkt, blass = keins),
   - die Team-ID als Zugangskarte im Ton des Akzents.
   Liegt nach dem Kalender-Gewand, damit es über allem steht. Farben nur über var(--…). */

/* Die Rollen: ein Ton je Rolle, aus dem Akzent gedreht wie die Farben der Personen. */
.tg-rolle{--rt:var(--accent);}
@supports (color: oklch(from red l c h)){
  .tg-rolle{--rt:oklch(from var(--accent) l calc(c + .07) calc(h + var(--rd, 0)));}
}
.tg-rolle.r-inhaber{--rd:60;}
.tg-rolle.r-leitung{--rd:20;}
.tg-rolle.r-mitarbeiter{--rd:200;}
.tg-rolle.r-empfang{--rd:130;}
.tg-rolle{display:inline-flex;align-items:center;flex:none;padding:2px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;
  background:var(--accent-soft);background:color-mix(in srgb, var(--rt) 17%, transparent);
  color:var(--accent-deep);color:color-mix(in srgb, var(--rt) 62%, var(--ink));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rt) 28%, transparent);}

/* Die Seite selbst: kein großer Kasten um alles, jede Gruppe steht für sich. */
.ein-abschnitt .set-block:has(> .cat.tg){background:none;border:0;box-shadow:none;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;}
.ein-abschnitt .set-block .cat.tg{background:none;border:0;box-shadow:none;padding:0;margin:0;}
.ein-abschnitt .set-block .cat.tg::before,.ein-abschnitt .set-block .cat.tg::after{display:none;}
.ein-abschnitt .set-block .tg-body{padding:0;}
.tg-gruppe-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 9px;}
.tg-gruppe-zeile .tg-gruppe{margin:0 4px;}
.tg-gruppe{margin:22px 4px 9px;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);}
.tg-satz{margin:10px 4px 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}

/* Kopf: die Köpfe des Teams, der Name des Unternehmens, „Einladen“. */
.tg-kopf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 14px 14px 16px;border-radius:22px;
  border:1px solid var(--line);background:var(--surface);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface)), var(--surface) 72%);
  box-shadow:0 10px 24px -18px rgba(20,24,40,.45);}
.tg-avatare{display:flex;flex:none;align-items:center;}
.tg-avatare .pe-punkt.gross,.tg-mehr{width:38px;height:38px;font-size:14px;margin-left:-11px;border:2px solid var(--surface);box-sizing:border-box;}
.tg-avatare > :first-child{margin-left:0;}
.tg-mehr{display:inline-grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:700;font-style:normal;}
.tg-kopf-txt{flex:1 1 130px;min-width:0;display:grid;gap:1px;}
.tg-kopf-txt b{font-size:17px;font-weight:650;letter-spacing:-.01em;overflow-wrap:anywhere;}
.tg-kopf-txt span{font-size:12.5px;color:var(--ink-soft);}
.tg-einladen{flex:none;}
.tg-einladen svg{width:14px;height:14px;}

/* Personen als Kacheln: von links ein Hauch ihrer Farbe, wie in der Kundenliste. */
.tg-liste{display:grid;gap:8px;}
.tg-person{display:flex;align-items:center;gap:13px;width:100%;box-sizing:border-box;padding:12px 12px 12px 12px;border-radius:19px;
  border:1px solid var(--line);background:var(--surface);
  border-color:color-mix(in srgb, var(--kfarbe) 24%, var(--line));
  background:linear-gradient(90deg, color-mix(in srgb, var(--kfarbe) 12%, var(--surface)), var(--surface) 100%);
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .06s var(--ease), border-color var(--dur) var(--ease);}
button.tg-person:active{transform:scale(.988);}
.tg-person.ich,.tg-person.offen{cursor:default;}
.tg-person .pe-punkt.gross{width:46px;height:46px;font-size:18px;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--kfarbe) 50%, transparent), 0 0 0 3px var(--surface);}
.tg-txt{flex:1;min-width:0;display:grid;gap:7px;}
.tg-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0;}
.tg-name b{font-size:15.5px;font-weight:650;overflow-wrap:anywhere;}
.tg-txt small{font-size:12px;color:var(--ink-soft);line-height:1.35;}
.tg-neu{padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.tg-frist{display:flex;align-items:center;gap:5px;}
.tg-frist svg{width:13px;height:13px;flex:none;}
.tg-person.offen{background:var(--surface-2);background:color-mix(in srgb, var(--kfarbe) 7%, var(--surface));}
.tg-person.offen .pe-punkt.gross{opacity:.85;}

/* Die fünf Rechte als Zeichen. */
.tg-rechte{display:flex;flex-wrap:wrap;gap:5px;}
.tg-rechte i,.tg-legende i{display:grid;place-items:center;width:25px;height:25px;border-radius:9px;font-style:normal;
  background:var(--accent);color:var(--on-accent);}
.tg-rechte svg{width:14px;height:14px;}
.tg-rechte i.s1,.tg-legende i.s1{background:transparent;color:var(--accent-deep);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent);}
.tg-rechte i.s0,.tg-legende i.s0{background:transparent;color:var(--ink-soft);opacity:.4;
  box-shadow:inset 0 0 0 1px var(--line);}
.tg-legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 4px 0;font-size:11.5px;color:var(--ink-soft);}
.tg-legende span{display:inline-flex;align-items:center;gap:6px;}
.tg-legende i{width:18px;height:18px;border-radius:6px;}
.tg-legende svg{width:11px;height:11px;}

/* Die Team-ID als Zugangskarte. */
.tg-id{display:grid;gap:14px;margin:22px 0 4px;}
.tg-id-karte{position:relative;overflow:hidden;padding:16px 16px 14px;border-radius:24px;color:var(--on-accent);
  background:var(--accent);
  background:linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 66%, var(--rose)));
  box-shadow:0 16px 32px -18px color-mix(in srgb, var(--accent) 75%, transparent);}
.tg-id-karte::after{content:"";position:absolute;right:-46px;top:-46px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.2), transparent 68%);pointer-events:none;}
.tg-id.aus .tg-id-karte{filter:saturate(.5);opacity:.82;}
.tg-id-oben{position:relative;display:flex;align-items:center;gap:9px;}
.tg-id-oben b{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.tg-id-z{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;
  background:color-mix(in srgb, var(--on-accent) 16%, transparent);}
.tg-id-z svg{width:16px;height:16px;}
.tg-id-status{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  background:color-mix(in srgb, var(--on-accent) 16%, transparent);font-size:11px;font-weight:700;letter-spacing:.04em;}
.tg-id-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.tg-id.aus .tg-id-status::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;}
.tg-id-mitte{position:relative;display:grid;gap:2px;margin:18px 0 16px;}
.tg-id-mitte small{font-size:12px;letter-spacing:.1em;opacity:.78;overflow-wrap:anywhere;}
.tg-id-mitte code{font:inherit;font-size:clamp(25px, 8.4vw, 34px);font-weight:700;letter-spacing:.15em;line-height:1.1;white-space:nowrap;}
.tg-id-unten{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;}
.tg-id-satz{flex:1 1 170px;font-size:12px;line-height:1.4;opacity:.86;}
.tg-id-kopie{flex:none;border:0;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:650;cursor:pointer;
  background:color-mix(in srgb, var(--on-accent) 18%, transparent);color:var(--on-accent);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .06s var(--ease);}
.tg-id-kopie:active{transform:scale(.96);}
.tg-id-opt{display:grid;gap:10px;}
.tg-id-opt .te-id-zeile{padding:0 2px;}
.tg-id-opt .set-bak{margin:2px 0 0;}
@media (hover:hover) and (pointer:fine){
  button.tg-person:hover{border-color:color-mix(in srgb, var(--kfarbe) 45%, var(--line));}
  .tg-id-kopie:hover{background:color-mix(in srgb, var(--on-accent) 28%, transparent);}
}

/* ============ Fenster: Person, Einladen, Zeiten ============ */
.tg-dlg-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:0 36px 14px 0;}
.tg-dlg-kopf .pe-punkt.gross{width:60px;height:60px;font-size:24px;flex:none;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--kfarbe) 50%, transparent), 0 0 0 4px color-mix(in srgb, var(--kfarbe) 14%, transparent);}
.tg-dlg-z{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:18px;
  background:var(--accent-soft);color:var(--accent-deep);}
.tg-dlg-z svg{width:26px;height:26px;}
.tg-dlg-z.ok{background:var(--ok-soft);color:var(--ok);}
.tg-dlg-txt{flex:1 1 150px;min-width:0;display:grid;gap:3px;}
.tg-dlg-txt h3{margin:0;font-size:20px;line-height:1.2;overflow-wrap:anywhere;}
.tg-dlg-txt .modal-sub{margin:0;overflow-wrap:anywhere;}
.tg-vorschau{display:flex;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-top:6px;}
.tg-neu-hinweis{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:14px;
  background:var(--accent-soft);background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size:12.5px;line-height:1.45;color:var(--ink);}
.tg-neu-hinweis svg{flex:none;width:16px;height:16px;margin-top:1px;color:var(--accent-deep);}
/* In den Karten dieser Fenster bleibt unten Luft (sonst klebt der letzte Satz am Rand). */
.tg-dlg .tf-teil{padding-bottom:14px;}
.tg-dlg .tf-teil > :last-child{margin-bottom:0;}
.tg-dlg .set-hint{margin-top:8px;}

/* Die Rechte: eine Zeile je Recht, darunter eine schmale Wahl. */
.tg-rechte-liste{display:grid;margin-top:6px;}
.tg-recht{display:grid;gap:8px;padding:11px 0;border-top:1px solid var(--line);}
.tg-recht:first-child{border-top:0;padding-top:4px;}
.tg-recht:last-child{padding-bottom:0;}
.tg-recht-kopf{display:flex;align-items:center;gap:9px;}
.tg-recht-kopf b{font-size:13.5px;font-weight:650;}
.tg-recht-z{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent-deep);}
.tg-recht-z svg{width:15px;height:15px;}
.tg-seg{display:flex;gap:2px;padding:3px;border-radius:13px;background:var(--surface-2);
  background:color-mix(in srgb, var(--accent) 8%, var(--surface));box-shadow:inset 0 0 0 1px var(--line);}
.tg-seg label{position:relative;flex:1 1 0;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.tg-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;}
.tg-seg span{display:block;padding:8px 6px;border-radius:10px;text-align:center;font-size:12.5px;font-weight:600;
  color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);}
.tg-seg input:checked + span{background:var(--accent);color:var(--on-accent);box-shadow:0 3px 8px -4px color-mix(in srgb, var(--accent) 70%, transparent);}
.tg-seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px;}

/* Arbeitszeiten & Urlaub, Entfernen: als eigene Karten unter dem Formular. */
.tg-dlg .te-zeiten{margin:14px 0 8px;padding:13px 14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);}
.tg-dlg .te-raus{margin-top:6px;}

/* Urlaub: die Anfrage als Karte mit dem Kopf der Person. */
.ur-karte{border-color:color-mix(in srgb, var(--kfarbe) 26%, var(--line));
  background:var(--surface);background:linear-gradient(120deg, color-mix(in srgb, var(--kfarbe) 10%, var(--surface)), var(--surface) 100%);}
.ur-wer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.ur-wer .pe-punkt.gross{width:44px;height:44px;font-size:17px;flex:none;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--kfarbe) 50%, transparent), 0 0 0 3px var(--surface);}
.ur-wer-txt{flex:1 1 100px;min-width:0;display:grid;gap:1px;}
.ur-wer-txt b{font-size:15.5px;font-weight:650;overflow-wrap:anywhere;}
.ur-wer-txt span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere;}
.ur-tage{flex:none;padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--ok-soft);color:var(--ok);}
/* Überschrift je Art im Fenster „Urlaub & Krankmeldungen“: Zeichen in der Farbe der Art. */
.ur-sektion-z{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;}
.ur-sektion-z svg{width:18px;height:18px;}
.ur-sektion.urlaub .ur-sektion-z{color:var(--ok);}
.ur-zeitraum{display:flex;align-items:center;gap:8px;margin:12px 0 2px;padding:9px 12px;border-radius:13px;
  background:var(--surface-2);background:color-mix(in srgb, var(--accent) 7%, var(--surface));
  font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;}
.ur-zeitraum svg{width:16px;height:16px;flex:none;color:var(--accent-deep);}
.tg-dlg .anf-tun{margin-top:12px;}
.tg-dlg .set-bak{display:flex;gap:8px;flex-wrap:wrap;}
.tg-dlg .set-bak .btn{flex:1 1 120px;}

/* ============ Karten oben in der Startansicht ============
   Terminanfrage, Urlaub und „Neu im Team“ sahen gleich aus – jetzt hat jede ihren Ton
   (Akzent, Grün, ein gedrehter Ton) und ihr Zeichen in einer Kachel. */
.anf-karte{--tn:var(--accent);gap:13px;padding:13px 14px;border-radius:20px;
  border:1px solid var(--accent);border-color:color-mix(in srgb, var(--tn) 38%, var(--line));
  background:var(--accent-soft);background:linear-gradient(120deg, color-mix(in srgb, var(--tn) 15%, var(--surface)), color-mix(in srgb, var(--tn) 6%, var(--surface)));
  box-shadow:0 10px 24px -20px color-mix(in srgb, var(--tn) 80%, transparent);}
.anf-karte.anf-urlaub{--tn:var(--ok);}
.anf-karte.anf-krank{--tn:var(--wait);}
@supports (color: oklch(from red l c h)){
  .anf-karte.tn-karte{--tn:oklch(from var(--accent) l calc(c + .07) calc(h + 50));}
}
.anf-z{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;
  background:var(--accent-soft);background:color-mix(in srgb, var(--tn) 20%, transparent);
  color:var(--accent-deep);color:color-mix(in srgb, var(--tn) 72%, var(--ink));}
.anf-z svg{width:22px;height:22px;}
.tn-tun{padding-left:55px;}

/* ============ Kontomodelle bei der Registrierung: je Modell ein Ton ============ */
.zg-modell-z{background:var(--accent-soft);background:color-mix(in srgb, var(--kfarbe) 20%, transparent);
  color:var(--accent-deep);color:color-mix(in srgb, var(--kfarbe) 68%, var(--ink));}
.zg-modell:has(input:checked),.zg-modell.on{border-color:var(--kfarbe);box-shadow:inset 0 0 0 1.5px var(--kfarbe);
  background:var(--accent-soft);background:color-mix(in srgb, var(--kfarbe) 10%, var(--surface));}
.zg-modell:has(input:checked) .zg-modell-haken,.zg-modell.on .zg-modell-haken{background:var(--kfarbe);border-color:var(--kfarbe);}

/* ============ Umschalter Termin-/Team-Kalender ============ */
.kal-wechsel{min-height:48px;padding:0 12px 0 10px;border-radius:16px;
  border-color:color-mix(in srgb, var(--accent) 22%, var(--line));
  background:var(--surface);background:linear-gradient(100deg, color-mix(in srgb, var(--accent) 11%, var(--surface)), var(--surface) 75%);}
.kal-wechsel .kw-z{width:34px;height:34px;border-radius:12px;
  background:color-mix(in srgb, var(--accent) 17%, transparent);}
.kal-wechsel .kw-pfeil{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent-deep);}
.tg-satz + .set-bak{margin-top:16px;}
.tg-kopf + .tg-gruppe{margin-top:22px;}
@media (max-width:360px){
  .tg-avatare .pe-punkt.gross,.tg-mehr{width:32px;height:32px;font-size:12.5px;margin-left:-9px;}
  .tg-kopf{padding:12px;}
  .tg-kopf-txt{flex-basis:110px;}
  .tg-person{gap:11px;padding:11px;}
  .tg-person .pe-punkt.gross{width:42px;height:42px;font-size:16px;}
  .tg-id-karte{padding:14px 13px 12px;}
}

/* ============ Jede Person hat ihre eigene Farbe ============
   Der Server vergibt sie (functions/lib/team.js, farbenVergeben): die kleinste freie von zwanzig,
   sie bleibt an der Person. Grün, Blau, Rosa, Orange, Violett, Türkis, Koralle, Limette,
   Himmel, Magenta, dann Indigo, Senf, Himbeere, Petrol, Lavendel, Kupfer, Oliv, Stahlblau,
   Orchidee, Sand - in dieser Reihenfolge. Die zehn späteren liegen in derselben Helligkeit wie
   die ersten (auf Weiß 2,6 bis 4,6 : 1, auf den dunklen Karten 3,4 bis 6 : 1). Sie färbt den Kopf der Person überall (`--kfarbe`)
   und ihren Urlaub im Team-Kalender (`--pc`). Das Unternehmen selbst und wer noch keine hat,
   behalten die aus dem Akzent gedrehte Farbe. Feste Werte: es sind Farben von Personen, nicht des Designs. */
.pf-1{--pc:#3E9B6B;}
.pf-2{--pc:#3F7BD6;}
.pf-3{--pc:#E0709E;}
.pf-4{--pc:#E58A3A;}
.pf-5{--pc:#8A5CC9;}
.pf-6{--pc:#3AA8A0;}
.pf-7{--pc:#D9584E;}
.pf-8{--pc:#93B92E;}
.pf-9{--pc:#4BA8D8;}
.pf-10{--pc:#C0479B;}
.pf-11{--pc:#6670DD;}
.pf-12{--pc:#C29A1C;}
.pf-13{--pc:#C24D6B;}
.pf-14{--pc:#2F8299;}
.pf-15{--pc:#A88BDD;}
.pf-16{--pc:#B86A35;}
.pf-17{--pc:#7E8F2A;}
.pf-18{--pc:#6283A6;}
.pf-19{--pc:#B962C8;}
.pf-20{--pc:#A88A5C;}
.pf-1,.pf-2,.pf-3,.pf-4,.pf-5,.pf-6,.pf-7,.pf-8,.pf-9,.pf-10,.pf-11,.pf-12,.pf-13,.pf-14,.pf-15,.pf-16,.pf-17,.pf-18,.pf-19,.pf-20{--kfarbe:var(--pc);}

/* ============ Team-Kalender: Urlaub in der Farbe der Person ============ */
.tk-balken.u{background:var(--accent);}
.tk-balken.u[class*="pf-"]{background:var(--pc);}
.tk-balken.u.ganz{background:var(--ink-soft);opacity:.7;}
.cal-legende .lg-balken.u{background:var(--accent);}
.cal-legende .lg-balken.u[class*="pf-"]{background:var(--pc);}
.cal-legende .lg-balken.u.ganz{background:var(--ink-soft);opacity:.7;}
.cal-legende .lg-urlaub{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 12px;}
.cal-legende .lg-urlaub b{font-weight:600;color:var(--ink-soft);}
.cal-legende .lg-urlaub > span{display:inline-flex;align-items:center;gap:6px;}
.tk-zeile.urlaub{border-color:var(--line);border-color:color-mix(in srgb, var(--pc, var(--accent)) 38%, var(--line));
  background:var(--surface);background:color-mix(in srgb, var(--pc, var(--accent)) 9%, var(--surface));}
.tk-zeile.urlaub.ganz{--pc:var(--ink-soft);}

/* ============ Urlaub im Team (Menü): die Liste ============ */
.ul-neu{width:100%;margin:0 0 4px;}
.ul-neu svg{width:15px;height:15px;}
.ul-liste{display:grid;gap:8px;}
.ul-zeile{display:flex;align-items:stretch;gap:6px;border-radius:18px;
  border:1px solid var(--line);border-color:color-mix(in srgb, var(--kfarbe) 30%, var(--line));
  background:var(--surface);background:linear-gradient(90deg, color-mix(in srgb, var(--kfarbe) 13%, var(--surface)), var(--surface) 100%);}
.ul-zeile.vorbei{opacity:.66;}
.ul-oeffnen{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:11px 4px 11px 11px;border:0;background:none;
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:18px 0 0 18px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ul-oeffnen:active{background:color-mix(in srgb, var(--kfarbe) 10%, transparent);}
.ul-oeffnen .pe-punkt.gross{width:42px;height:42px;font-size:16px;flex:none;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--kfarbe) 50%, transparent), 0 0 0 3px var(--surface);}
.ul-txt{flex:1;min-width:0;display:grid;gap:1px;}
.ul-txt b{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:15px;font-weight:650;overflow-wrap:anywhere;}
.ul-txt .ul-wann{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
.ul-txt small{font-size:12px;color:var(--ink-soft);overflow-wrap:anywhere;}
.ul-jetzt{padding:1px 8px;border-radius:999px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--ok-soft);color:var(--ok);}
.ul-tun{flex:none;display:flex;align-items:stretch;}
.ul-stift,.ul-weg{flex:none;display:grid;place-items:center;width:40px;border:0;background:none;color:var(--ink-soft);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ul-weg{width:44px;border-radius:0 18px 18px 0;}
.ul-stift svg,.ul-weg svg{width:18px;height:18px;}
.ul-stift:active{color:var(--accent-deep);background:color-mix(in srgb, var(--accent) 10%, transparent);}
.ul-weg:active{color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, transparent);}
.ul-leer{margin:18px 4px 4px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);text-align:center;}
.ul-zurueck{width:100%;margin-top:6px;}
.ul-zurueck svg{width:14px;height:14px;}
.modal.ul .tg-gruppe{margin-top:18px;}
/* Fenster ohne klebenden Knopf (Terminanfragen, Urlaubsanfragen, Liste Urlaub im Team): .modal.tf setzt
   unten 0, dann schnitt der letzte Eintrag am Rand ab. Ein kleiner Rand bleibt. */
.modal.tf.anf, .modal.tf.ul:not(:has(> form)){padding-bottom:22px;}
@media (hover:hover) and (pointer:fine){
  .ul-oeffnen:hover{background:color-mix(in srgb, var(--kfarbe) 8%, transparent);}
  .ul-stift:hover{color:var(--accent-deep);}
  .ul-weg:hover{color:var(--danger);}
}
@media (max-width:380px){
  .ul-txt .ul-wann{white-space:normal;}
  .ul-oeffnen{gap:9px;padding-left:9px;}
  .ul-oeffnen .pe-punkt.gross{width:36px;height:36px;font-size:14px;}
  .ul-stift{width:34px;}
  .ul-weg{width:38px;}
}

/* ============ Mit Profilbild ============ */
/* Hat die Person ein Profilbild, steht es statt des Buchstabens im Kreis (so hat Evi es
   gewollt). Der Buchstabe bleibt darunter: laedt das Bild nicht, steht er da. Die Farbe der
   Person liegt als feiner Ring ueber dem Bild - so sagt sie weiter, wer gemeint ist. Die
   kleinen Kreise (Termin, Chips) sind alle 22 statt 18 px gross, mit und ohne Bild - sonst ist
   auf einem Gesicht nichts zu erkennen, und in einer Reihe stuenden zwei Groessen. Die
   `.gross`-Kreise behalten ihre Groessen. */
.pe-punkt:not(.gross){width:22px;height:22px;font-size:11px;}
.pe-punkt.mit-bild{position:relative;overflow:hidden;}
.pe-punkt.mit-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pe-punkt.mit-bild::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px var(--kfarbe);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--kfarbe) 75%, transparent);}

/* ============ Mitarbeiter ohne jedes Recht: "Noch nichts freigeschaltet" ============ */
.tl-leer{margin-top:12px;padding:28px 18px 24px;gap:6px;}
.tl-leer .tl-z{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;color:var(--ink-soft);}
.tl-leer .tl-z svg{width:34px;height:34px;}
.tl-leer .pl-leer-text + .pl-leer-text{margin-top:4px;}
/* Mitarbeiterliste (Menü → Team): derselbe Aufbau wie die Eingangs-Fenster, der Knopf zum Einladen steht unten. */
.modal.ml .tg-liste{margin-top:6px;}
.modal.ml .ml-einladen{width:100%;margin-top:14px;}

/* ============ Urlaubsplan: die Tabelle unter dem Blatt (drei Spalten, wie Evis Skizze) ============ */
.ut-tabelle{--ut-spalten:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);margin-top:14px;overflow:hidden;
  border-radius:var(--r-karte,14px);background:var(--surface);border:1px solid var(--line);}
.ut-kopf,.ut-zeile{display:grid;grid-template-columns:var(--ut-spalten);align-items:stretch;}
.ut-kopf{font-size:11px;font-weight:600;line-height:1.25;overflow-wrap:anywhere;hyphens:auto;color:var(--ink-soft);border-bottom:1px solid var(--line);}
.ut-kopf > span,.ut-zeile > div{min-width:0;padding:9px 6px;border-left:1px solid var(--line);}
.ut-kopf > span:first-child,.ut-zeile > div:first-child{border-left:0;}
.ut-zeile + .ut-zeile{border-top:1px solid var(--line);}
.ut-wer{display:flex;align-items:center;gap:7px;}
.ut-wer b{min-width:0;font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:anywhere;hyphens:auto;}
.ut-bild{display:grid;place-items:center;flex:none;color:var(--accent-deep);}
.ut-bild svg{width:20px;height:20px;}
.ut-zeiten{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;}
.ut-kasten{display:grid;gap:1px;max-width:100%;padding:4px 7px;border-radius:var(--r-feld,10px);
  background:var(--surface);background:color-mix(in srgb, var(--pc, var(--accent)) 16%, var(--surface));
  border:1px solid var(--line);border:1px solid color-mix(in srgb, var(--pc, var(--accent)) 55%, var(--line));}
.ut-kasten b{font-size:12px;font-weight:600;line-height:1.3;color:var(--ink);overflow-wrap:anywhere;}
.ut-kasten i{hyphens:auto;font-style:normal;font-size:11px;line-height:1.3;color:var(--ink-soft);overflow-wrap:anywhere;}
.ut-leer{font-size:12.5px;color:var(--ink-soft);}
.ut-zeile.ganz{--pc:var(--ink-soft);}
.ut-tabelle .tb-leer{padding:14px 12px;}

/* ============ Krank melden und betroffene Termine ============ */
.tg-dlg-z.kr-z{background:var(--wait-soft);color:var(--wait);}
.kr-karte .kr-tage{background:var(--wait-soft);color:var(--wait);}
.kr-satz{margin-top:10px;font-weight:600;color:var(--ink);}
.ur-termine{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;margin:12px 0 2px;}
.ur-t-kopf{font-size:12px;font-weight:600;color:var(--ink-soft);}
.ur-termin{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:6px 11px;margin:0;
  border:1px solid var(--line);border-radius:var(--r-feld,10px);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ur-t-wann{flex:none;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums;}
.ur-t-wer{min-width:0;font-size:13px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ur-t-mehr{font-size:12px;color:var(--ink-soft);padding-left:4px;}
.ur-keine{margin:12px 0 2px;font-size:12.5px;color:var(--ink-soft);}
@media (hover:hover) and (pointer:fine){ .ur-termin:hover{border-color:var(--accent);} }

/* ============ Vertretung: Termine neu verteilen (js/48-vertretung.js) ============ */
.vt-auto{width:100%;margin:0 0 10px;}
.vt-auto svg{width:15px;height:15px;}
.ur-verteilen{margin-top:4px;}
.ur-verteilen svg{width:15px;height:15px;}
.vt-termin{--dreh:200;}
.vt-kopf{display:grid;gap:1px;margin-bottom:9px;}
.vt-kopf b{font-size:13.5px;font-weight:650;font-variant-numeric:tabular-nums;}
.vt-kopf span{font-size:12.5px;color:var(--ink-soft);overflow-wrap:anywhere;}
.vt-termin .sg-chips{margin-bottom:0;}
.vt-chip{gap:6px;}
.vt-chip.aus{opacity:.55;}
.vt-grund{font-size:11px;font-weight:500;color:var(--ink-soft);}
.vt-grund:empty{display:none;}

/* ============ Urlaubskonto (js/49-urlaubskonto.js) ============ */
.uk-karte{display:grid;gap:6px;margin:12px 0 2px;padding:10px 12px;border-radius:13px;border:1px solid var(--line);background:var(--surface);}
.uk-zeile{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;}
.uk-zeile b{font-size:13px;font-weight:650;}
.uk-zeile span{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.uk-balken{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;}
.uk-balken i{display:block;height:100%;border-radius:3px;background:var(--accent);}
.uk-karte small{font-size:11.5px;color:var(--ink-soft);}
.uk-karte.knapp{border-color:var(--wait);}
.uk-karte.knapp .uk-balken i{background:var(--wait);}
.uk-karte.knapp .uk-zeile span{color:var(--wait);}
.ur-tage-satz{margin:-2px 0 8px;font-weight:600;color:var(--ink);}
.ut-name{display:grid;min-width:0;}
.ut-wer small{font-size:11px;line-height:1.3;color:var(--ink-soft);overflow-wrap:anywhere;}

/* ============ Wer hat was geändert (js/50-aenderungen.js) ============ */
.ae-leiste{margin:0 0 10px;}
.ae-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;}
.ae-zeile{display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:52px;padding:8px 10px 8px 12px;margin:0;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ae-txt{flex:1;min-width:0;display:grid;gap:1px;}
.ae-txt b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ae-txt small{font-size:12px;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ae-pfeil{flex:none;display:flex;color:var(--ink-soft);}
.ae-pfeil svg{width:16px;height:16px;}
.ae-hinweis{margin:0 0 10px;font-size:12px;color:var(--ink-soft);}
@media (hover:hover) and (pointer:fine){ .ae-zeile:hover{border-color:var(--accent);} }

/* ============ Mitarbeiter-Akte (js/51-mitarbeiterakte.js) ============
   Der Kopf ist die Karte der Kundenakte (`.ka-held`, dieselbe Hauptkarte), die Reiter sind `.ka-reiter`. */
.ma-held .ma-bild{display:flex;}
.ma-held .ma-bild .pe-punkt.gross{width:92px;height:92px;font-size:34px;border-width:0;box-shadow:0 0 0 3px var(--surface), 0 0 0 6px var(--kfarbe, var(--pc, var(--accent)));}
.ma-inhalt{display:grid;grid-template-columns:minmax(0,1fr);gap:0;}
.ma-speichern{width:100%;margin:2px 0 16px;}
.ma-block{margin-bottom:12px;}
.ma-block .uk-karte{margin-top:2px;}
.ma-zeilen{display:grid;gap:8px;margin:4px 0 10px;}
.ma-zeilen > div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;min-width:0;}
.ma-zeilen span{font-size:12.5px;color:var(--ink-soft);}
.ma-zeilen b{min-width:0;font-size:13.5px;font-weight:600;overflow-wrap:anywhere;text-align:right;}
.ma-krank-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
.ma-krank{display:grid;gap:6px;padding:12px 13px;border:1px solid var(--line);border-radius:var(--r-karte,14px);background:var(--surface);}
.ma-krank .ur-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;}
.ma-krank .ur-kopf b{font-size:14px;font-weight:650;}
.ma-krank .ur-kopf span{font-size:12.5px;color:var(--ink-soft);}
.ma-krank .btn{justify-self:start;margin-top:4px;}
.ma-krank .kr-schein{margin:2px 0 0;}
.ml-eintrag{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;}
.ml-akte{display:flex;align-items:center;gap:9px;width:100%;min-width:0;margin:0 0 6px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-feld,10px);
  background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.ml-akte svg{flex:none;width:16px;height:16px;color:var(--ink-soft);}
.ml-akte span:first-of-type{flex:1;min-width:0;}
.ml-akte .ml-akte-pfeil{display:flex;}
@media (hover:hover) and (pointer:fine){ .ml-akte:hover{border-color:var(--accent);} }