/* HERO App — Grundgerüst (23.10.2026, vorher style.css)
   Seit 23.10.2026 gibt es nur noch EIN Design (design2.css, html.d2). Diese Datei ist der Rest der früheren style.css, den design2.css
   noch braucht: Aufbau, Abstände und Bausteine (Raster, Tabellen, Kalender, Leiste unten, Toast …). Alles, was design2.css für denselben
   Selektor ohnehin überschreibt, ist entfernt; die übrigen festen Farben liegen auf den Variablen des Stilsystems (hell/dunkel).
   Reihenfolge im <head>: base.css → shell.css → design2.css (pageHeader, app/views/layout.php). */

/* ---------- Grundwerte ---------------------------------------------------- */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;
 -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}

.muted{font-size:.9rem}
.right{text-align:right}.center{text-align:center}

/* ---------- Kopfleiste ------------------------------------------------------ */
header{position:sticky;top:0;z-index:50;
 padding-top:env(safe-area-inset-top,0px)}
.topbar{display:flex;align-items:center;max-width:1180px;margin:0 auto}
header .logo,.logobtn{display:flex;align-items:center;font-weight:800;white-space:nowrap}
.logobtn{background:none;border:0;cursor:pointer;padding:0;font-family:inherit}

.logo-img{display:block}
.ico{display:block;flex:0 0 auto}

/* Desktop-Menü: eine Zeile ab 1100 px */
.desknav{display:none}
.desknav a{text-decoration:none;
 white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem;transition:background .15s,color .15s}

.desknav a.active{font-weight:600}
@media(min-width:1100px){.desknav{display:flex;gap:.1rem;align-items:center;margin-left:.6rem;flex-wrap:nowrap}}
.cnt{display:inline-flex;align-items:center;justify-content:center;padding:0 .35rem;
 border-radius:999px;font-size:.68rem;line-height:1}

/* Konto-Menü (Initialen) */
.usermenu{position:relative;margin-left:auto}
.userbtn{position:relative;border-radius:50%;font-weight:800;font-size:.84rem;letter-spacing:.02em;cursor:pointer;font-family:inherit}
.userbtn:hover,.userbtn[aria-expanded=true]{border-color:color-mix(in srgb,var(--line) 55%,transparent)}
.userbtn.has-img{padding:0;overflow:visible}
.userbtn.has-img>img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
/* Profilbild als runder Avatar (18.10.2026, app/lib/avatar.php): Foto, sonst Initialen in fester Farbe je Person
   (acht Erkennungsfarben je Person — bewusst feste Werte; dunkle Fassung in design2.css, Abschnitt 6) */
.uav{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 auto;overflow:hidden;font-size:.68rem;font-weight:750;
 letter-spacing:.02em;line-height:1;font-style:normal;vertical-align:middle;background:#EDF1F6;color:#334155}
.uav>img{width:100%;height:100%;object-fit:cover;display:block}
.uav.sm{width:22px;height:22px;font-size:.58rem}.uav.lg{width:96px;height:96px;font-size:1.9rem}
.uav.c0{background:#E8EFFB;color:#1E5BC6}.uav.c1{background:#E4F3EC;color:#127C55}.uav.c2{background:#EFEBF9;color:#6E4FB5}.uav.c3{background:#FBEBED;color:#B02A3D}
.uav.c4{background:#FFF1D6;color:#8A5300}.uav.c5{background:#E0F2F1;color:#0F766E}.uav.c6{background:#EDF1F6;color:#334155}.uav.c7{background:#E8EAF6;color:#3949AB}
.uav.img{background:var(--surface-2)}.uav.pool{background:var(--surface);border:1.5px dashed var(--line-2)}
.avrow{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.avtxt{flex:1 1 220px;min-width:0}
.avform{display:inline-block;margin:0 .4rem .4rem 0}
.avform.busy{opacity:.6;pointer-events:none}
.avpick{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:44px;cursor:pointer}
.avpick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.avhint{font-size:.8rem;margin:.2rem 0 0}
.msgperson .uav,.msgitem .uav{margin-right:.35rem}
.navbadge{position:absolute;top:-6px;right:-6px;font-size:.66rem;font-weight:700;
 border-radius:999px;padding:.05rem .36rem;line-height:1.25;border:2px solid var(--navy)}
.userpanel{display:none;position:absolute;right:0;top:calc(100% + 10px);z-index:70}
.userpanel.open{display:block}
.userhead{padding:.5rem .7rem .65rem;border-bottom:1px solid var(--line);margin-bottom:.35rem;display:flex;flex-direction:column;gap:.1rem}
.userhead span{font-size:.8rem;color:var(--muted)}
.userpanel a{display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;text-decoration:none}

.userpanel .ico{width:19px;height:19px}

.langform{display:flex;align-items:center;gap:.65rem;padding:.3rem .7rem;margin:0}
.langform select{flex:1;padding:.35rem .5rem;font-size:.9rem}

/* Handy/Tablet: Leiste unten + „Mehr"-Blatt */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;background:var(--surface);
 -webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
 border-top:1px solid var(--line);padding:0 .25rem env(safe-area-inset-bottom,0px);box-shadow:0 -4px 18px rgba(11,34,64,.06)}
.bottomnav a,.bottomnav button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:.18rem;height:var(--bar-h);color:var(--muted);text-decoration:none;background:none;border:0;font-family:inherit;
 cursor:pointer;position:relative;padding:.3rem .15rem 0}
.bottomnav .active,.bottomnav button[aria-expanded=true]{color:var(--navy)}
.bottomnav .active::before{content:'';position:absolute;top:0;left:26%;right:26%;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
.bnico{position:relative;display:block;line-height:0}
.bnico .ico{width:24px;height:24px}
.bottomnav .active .ico{stroke-width:2.2}
.bnlbl{font-size:.69rem;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bndot{position:absolute;top:-5px;right:-10px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--alert);
 color:var(--on-solid);font-size:.62rem;font-weight:700;line-height:14px;text-align:center;border:2px solid var(--surface)}
body:has(.bottomnav){padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 8px)}
.sheet-backdrop{display:none;position:fixed;inset:0;background:color-mix(in srgb,var(--navy-bg) 38%,transparent);z-index:56}
.sheet-backdrop.open{display:block}
.menu-panel{display:none;position:fixed;left:.6rem;right:.6rem;bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + .6rem);
 z-index:57;background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);padding:.45rem;max-height:70vh;overflow:auto;
 flex-direction:column;max-width:520px;margin:0 auto}
.menu-panel.open{display:flex}
.menu-panel a{display:flex;align-items:center;gap:.8rem;padding:.75rem .8rem;border-radius:11px;color:var(--text);text-decoration:none;font-size:1rem}
.menu-panel a .ico{color:var(--muted)}
.menu-panel a>span:not(.cnt){flex:1}
.menu-panel a:hover{background:var(--hover)}
.menu-panel a.active{background:var(--gold-soft);font-weight:600}
.menu-panel a.active .ico{color:var(--navy)}
@media(min-width:1100px){
 .bottomnav,.menu-panel,.sheet-backdrop{display:none!important}
 body:has(.bottomnav){padding-bottom:0}
}

/* Reiter innerhalb einer Menü-Gruppe: wischbar statt umbrechend */
.tabs{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;text-decoration:none;border-radius:999px;white-space:nowrap;transition:border-color .15s}
.tabs a:hover{border-color:var(--navy)}
.tabs a.active{border-color:var(--navy);font-weight:600}
/* Wenn rechts noch Reiter verborgen sind (app.js setzt can-scroll): Rand ausblenden statt hart abschneiden */
.tabs.can-scroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
/* Eingeklappte Karte mit einer Karte darin (z. B. Smoobu-Webhook in der Reinigungsplan-Vorschau): kein doppelter Rahmen */
.histbox .card{border:0;box-shadow:none;padding:0;margin:0}

/* ---------- Seite, Karten, Schrift ---------------------------------------- */
main{max-width:1040px;margin:0 auto}
.card{overflow-x:auto}
h1{line-height:1.25}
h1 small,h1 .muted{color:var(--muted);letter-spacing:0}
h2{line-height:1.3}

/* Hinweise */
.flash,.warn,.err{line-height:1.45}

.warn:has(> form.inline),.flash:has(> form.inline){display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}

/* ---------- Knöpfe ------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-family:inherit;line-height:1.2;cursor:pointer;
 text-decoration:none;text-align:center;vertical-align:middle;
 transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}

.btn.green:hover{background:#276C2B;border-color:var(--ok)}

.btn.big{width:100%}

.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
/* kleine Variante für Aktionsleisten (Gästenachrichten Stufe 4, 09.10.2026): nicht winzig, min. 34 px */

.btn.linkbtn{padding:.2rem .35rem;box-shadow:none;font-weight:500}
.btn.linkbtn:hover{color:var(--red)}

/* ---------- Formulare ----------------------------------------------------------- */
input,select,textarea{width:100%;max-width:100%;padding:.6rem .75rem;font-family:inherit;
 transition:border-color .15s,box-shadow .15s}
textarea{line-height:1.45}
input:focus,select:focus,textarea:focus{outline:none}
input[type=checkbox],input[type=radio]{padding:0}

input[type=hidden]{display:none}
label{display:block;margin:.7rem 0 .3rem}
form.inline{display:inline}
/* Löschen mit Pflicht-Begründung (08.10.2026): Feld und Knopf nebeneinander, am Handy untereinander */
form.delform{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;flex:1 1 100%}
details summary{cursor:pointer;margin:.4rem 0}
.chk{display:flex;align-items:center;gap:.5rem;font-weight:500;cursor:pointer}
.chk input{width:auto;margin:0}

/* ---------- Tabellen ------------------------------------------------------------ */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-weight:700;text-transform:uppercase}
th,td{border-bottom:1px solid var(--line)}

/* ---------- Raster, Kennzahlen, Abzeichen ------------------------------------------ */
.grid{display:grid;gap:1rem}
.grid>*{min-width:0}
@media(min-width:640px){.grid.cols2{grid-template-columns:1fr 1fr}.grid.cols3{grid-template-columns:1fr 1fr 1fr}}
.stat{text-align:center;padding:1.1rem}
.stat .v{font-size:1.9rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.stat .v.neg{color:var(--red)}.stat .v.pos{color:var(--green)}
.stat .l{color:var(--muted);font-size:.84rem;margin-top:.15rem}
/* Neutraler Hinweis „Pensum erreicht" — bewusst dezent, kein Alarm */
.okmark{color:var(--green);font-weight:600;cursor:help}
.badge{display:inline-block;line-height:1.35;white-space:nowrap}
.badge.pending{box-shadow:inset 0 0 0 1px var(--gold)}
.badge.approved{box-shadow:inset 0 0 0 1px var(--line-2)}
.badge.rejected{box-shadow:inset 0 0 0 1px var(--coral-line)}
.badge.cancelled{background:var(--surface-2);color:var(--muted)}

/* ---------- Stempeluhr ---------------------------------------------------------- */
.clockstate{font-size:1.05rem}
.clockstate .time{display:block;font-weight:800;
 font-variant-numeric:tabular-nums}
.statuschip{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;font-weight:700}
.statuschip::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.55}
.statuschip.on{border-color:var(--line-2)}
.statuschip.on::before{opacity:1;animation:heropulse 1.6s ease-in-out infinite}
.statuschip.pause{border-color:var(--gold)}
@keyframes heropulse{0%,100%{opacity:1}50%{opacity:.25}}
.catlabel{font-weight:700;text-transform:uppercase}
/* Chips (08.10.2026, Amelia/iPad): Touch-Ziel 48 px, gleiche Schriftstärke für aktiv und inaktiv —
   damit kein Chip beim Wechsel breiter wird und die Reihe nicht umbricht; nach dem Tipp sperrt app.js
   alle Chips (disabled), bis die neue Seite da ist. */
.catchips{display:flex;flex-wrap:wrap}
.catchip{display:inline-flex;align-items:center;gap:.3rem;min-width:48px;border-radius:999px;cursor:pointer;font-family:inherit;font-weight:600;
 touch-action:manipulation;transition:border-color .15s,background .15s}
.catchip.active{cursor:default}

.catchip:disabled{opacity:.55;cursor:wait}
.catchip.active:disabled{opacity:1}
.catnow{font-weight:600}
.catconfirm{margin:.6rem 0 .2rem}

/* ---------- Anmeldung -------------------------------------------------------------- */
.login-wrap{max-width:420px;margin:6vh auto 2rem}
.login-wrap .card{padding:1.7rem 1.5rem 1.4rem;box-shadow:var(--shadow-lg);border:0}
.login-wrap h1{text-align:center}
body:has(.login-wrap){min-height:100vh;background:linear-gradient(var(--primary),var(--primary)) top/100% 250px no-repeat,var(--bg)}

/* ---------- Urlaubskalender (Team) ------------------------------------------------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:.8rem}
.cal-head div{text-align:center;font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cal-cell{border-radius:10px;min-height:74px;padding:.3rem;border:1px solid var(--line)}
.cal-out{opacity:.35}

.cal-today{outline:2px solid var(--gold);outline-offset:-2px}
.cal-day{font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:.2rem}
.cal-hol{font-size:.75rem}
.cal-chip{color:#fff;border-radius:6px;font-size:.72rem;font-weight:600;padding:.1rem .3rem;margin:.12rem 0;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-legend{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;margin-bottom:.6rem}
.cal-key{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem}
.cal-dot{width:.85rem;height:.85rem;border-radius:50%;display:inline-block}
.cal-holname{display:block;font-size:.6rem;line-height:1.15;color:var(--amber);font-weight:600;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){.cal-cell{min-height:56px;padding:.15rem}.cal-chip{font-size:.6rem;padding:.05rem .2rem}.cal-holname{font-size:.5rem}}

/* ---------- Meine Zeiten ------------------------------------------------------------- */
.weekrow td{border-bottom:1px solid var(--line);font-size:.88rem;padding:.5rem .5rem}
.weekrow td:first-child{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.74rem}
@media(hover:hover){tr.weekrow:hover>td{background:var(--info-soft)}}
tr.othermonth td{opacity:.45}
tr.othermonth.holiday td{opacity:.55}
.seg{white-space:nowrap;line-height:1.5;font-variant-numeric:tabular-nums}
.seg.brk{color:var(--warn)}
.seg .muted{font-size:.82rem}
.seg.pendseg{opacity:.7;font-style:italic}
.seg.catsw{white-space:normal;font-size:.78rem;opacity:.75}
.breakwarn{color:var(--coral-ink);font-size:.85rem;font-weight:600;margin-top:.25rem}
.magicbtn{padding:.25rem .6rem;font-size:.8rem;margin-left:.35rem;min-height:30px}
.anomflag{color:var(--coral-ink);font-weight:700;cursor:help}
.editrow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.4rem 0;border-bottom:1px solid var(--line)}
.editrow .seg{margin-right:auto}

/* Sprachfelder in der Kategorien-Verwaltung */
.catlangs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.35rem}
.catlangs label{display:flex;align-items:center;gap:.25rem;margin:0;font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.catlangs input{width:7.5rem;padding:.3rem .4rem;font-size:.85rem;min-height:34px}

/* ---------- Aufgaben-Anhänge -------------------------------------------------------- */
.taskfiles{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.tfitem{position:relative;display:inline-flex}
.tfthumb{display:block;width:64px;height:64px;border-radius:10px;border:1px solid var(--line);
 background-size:cover;background-position:center;background-color:var(--surface-2);cursor:zoom-in}
.tfthumb.tfdoc{display:flex;align-items:center;justify-content:center;font-size:1.6rem;text-decoration:none;cursor:pointer}
.tfdel{position:absolute;top:-6px;right:-6px;padding:.05rem .35rem!important;font-size:.7rem;border-radius:999px;min-height:0!important}
#lightbox{position:fixed;inset:0;background:var(--navy-bg);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem;cursor:zoom-out}
#lightbox img{max-width:100%;max-height:100%;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
#lightbox .lbclose{position:absolute;top:.8rem;right:1rem;color:#fff;font-size:2rem;line-height:1;background:none;border:0;cursor:pointer}
/* Datei-Ansicht in der iPhone-App (app.js, docLinkAttrs; 11.10.2026): Leiste mit „✕ Schließen" über dem PDF */
#docview{position:fixed;inset:0;z-index:9999;background:var(--surface);display:flex;flex-direction:column}
#docview .dvbar{position:sticky;top:0;z-index:1;flex:0 0 auto;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.5rem .8rem;padding-top:calc(.5rem + env(safe-area-inset-top));background:var(--navy-bg)}
#docview .dvframe{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
#docview iframe{width:100%;height:100%;border:0;display:block}
/* PDF mit pdf.js (11.10.2026): Seiten als Bilder in voller Breite untereinander, Zoom mit zwei Fingern erlaubt */
#docview .dvpdf{background:var(--surface-2);touch-action:pan-x pan-y pinch-zoom}
#docview .dvpages{display:flex;flex-direction:column;gap:6px;padding-bottom:env(safe-area-inset-bottom)}
#docview .dvpage{display:block;width:100%;height:auto;background:var(--surface);box-shadow:0 1px 4px rgba(11,34,64,.18)}
#docview .dvloading{margin:0;padding:1.2rem 1rem;text-align:center}

/* ---------- Urlaubsantrag: Klick-Kalender ------------------------------------------- */
.vacal{max-width:560px}
.vc-nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.vc-nav .btn{padding:.35rem .8rem;min-height:38px}
.vc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.vc-head div{text-align:center;font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;padding-bottom:.2rem}
.vc-cell{position:relative;border:1px solid var(--line);border-radius:9px;min-height:46px;
 padding:.22rem .28rem;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .12s}
.vc-cell:hover{background:var(--surface-2);border-color:var(--line-2)}
.vc-empty{background:transparent;border:0;cursor:default}

.vc-today{outline:2px solid var(--navy);outline-offset:-2px}

.vc-num{font-size:.82rem;font-weight:700;color:var(--text)}
.vc-holname{display:block;font-size:.56rem;line-height:1.15;color:var(--amber);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-abs{position:absolute;left:.28rem;right:.28rem;bottom:.22rem;height:4px;border-radius:2px}
.vc-abs.ok{background:var(--green)}.vc-abs.pend{background:var(--gold)}

.vc-sel:hover{background:var(--warn-line)}
.vc-edge{background:var(--gold);border-color:var(--gold)}
.vc-edge .vc-num{color:var(--navy-ink)}
@media(max-width:640px){.vc-cell{min-height:40px;padding:.15rem .2rem}.vc-holname{font-size:.5rem}}

/* ---------- Aufgaben & Infos ---------------------------------------------------------- */
.taskrow{display:flex;align-items:center;border-bottom:1px solid var(--line)}
.taskrow:last-child{border-bottom:0}
.taskrow .ico{font-size:1.05rem}
.taskrow .tinfo{flex:1;min-width:0}
.tasktop{padding:.1rem .45rem;font-size:.72rem;font-weight:700;white-space:nowrap;
 display:inline-flex;align-items:center;line-height:1.35}
.taskrow .tinfo>div:first-child{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.infocard .tinfo{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.infocard .tinfo>div{flex-basis:100%}
.overdue{font-weight:700}
/* Bearbeitungszeitraum: ruhiger als das Top-Badge; am letzten Tag eine Warnung */
.taskspan{border-radius:6px;padding:.1rem .45rem;font-size:.72rem;font-weight:600;
 white-space:nowrap;display:inline-flex;align-items:center;line-height:1.35}
.taskspan.last{border-color:var(--coral)}
/* Offene Admin-Aufgaben: farbiger Streifen links = Dringlichkeit */

.todorow .ico{line-height:1}

.todorow .btn{white-space:nowrap;padding:.3rem .8rem;font-size:.85rem}
.todorow.urgent{border-color:var(--coral-line);border-left-color:var(--coral)}
.todorow.warn{border-color:var(--gold);border-left-color:var(--gold-2)}
.todorow.info{border-color:var(--info-line);border-left-color:var(--info)}
.tgroup{margin:1rem 0 .35rem;font-weight:700;text-transform:uppercase}
.infocard{padding:.6rem .75rem;margin:.45rem 0;
 display:flex;gap:.6rem;align-items:center}
.infocard .ico{font-size:1.05rem}
.infocard .tinfo{flex:1;min-width:0}
.inforow{padding:.6rem .75rem;margin:.35rem 0}
/* Übernommene Aufgaben sehen aus wie eine Checkliste (Michael 25.08.2026) */
.taskrow.mine{padding-left:.65rem}
.taskbox{flex:0 0 30px;cursor:pointer;padding:0;margin-right:.15rem}

.taskbox:active{background:var(--green)}
.taskdone{padding:.35rem .85rem;font-weight:700}
.taskrelease{padding:.35rem .75rem;font-size:.88rem;white-space:nowrap}
@media(max-width:640px){
 .taskrow,.infocard{flex-wrap:wrap}
 /* nur die Knopfzeile rutscht unter den Text — reine Infozeilen bleiben neben dem Symbol */
 .taskrow>div:last-child:not(.tinfo){flex-basis:100%;margin-left:2.4rem;margin-top:.35rem;display:flex;gap:.4rem;flex-wrap:wrap}
 .taskrow.mine>div:last-child:not(.tinfo){margin-left:2.6rem}
}

/* ---------- Karten mit Akzent -------------------------------------------------------- */
.autofix{border-left:5px solid var(--gold)}
.autofix h2{margin-top:0}
.pushcard{border-left:5px solid var(--navy)}
.pushcard h2{margin-top:0}
.pushstate{margin-top:.5rem;font-size:.9rem}
.msgcard{border-left:5px solid var(--orange)}
.msgcard h2{margin-top:0;font-size:1rem}
.msgbody{white-space:pre-line;line-height:1.5}
.msgpick{display:flex;flex-wrap:wrap;gap:.15rem .9rem;margin-top:.2rem}
.msgperson{display:flex;align-items:center;gap:.4rem;font-weight:500;white-space:nowrap;color:var(--text)}
.msgperson input{width:auto;margin:0}
.msgitem{border-top:1px solid var(--line);padding:.65rem 0}
.msgitem:first-of-type{border-top:0}
.fixme{border-left:5px solid var(--coral)}
.fixme h2{margin-top:0;font-size:1rem}
.changelog{margin:.3rem 0 0;padding-left:1.2rem}
.changelog li{margin:.3rem 0}
.fixrow{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;border-top:1px solid var(--line);padding:.6rem 0}
.fixrow:first-of-type{border-top:0}
.fixrow .btn{flex:0 0 auto;padding:.3rem .75rem;font-size:.85rem}
.fixrow .neg{font-size:.9rem;line-height:1.35}
.fixrow.autorow{display:block}

/* Planungshinweise auf der Urlaubsseite */
.vacinfo-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.vacinfo h3{font-size:.95rem;margin:.2rem 0 .35rem}
.vacinfo ul{margin:.2rem 0 0;padding-left:1.1rem}
.vacinfo li{margin-bottom:.3rem;font-size:.92rem;line-height:1.45}
@media(max-width:640px){.vacinfo-cols{grid-template-columns:1fr;gap:.4rem}}

/* Turno-Probleme */
.probfilter{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0}
.probfilter select{width:auto;min-width:180px;flex:0 1 auto}
.probcard{border-left:4px solid var(--gold)}
.probhead{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.probapt{font-size:.8rem;color:var(--muted);font-weight:700}
.probtitle{font-size:1.05rem;font-weight:700;margin-top:.1rem;color:var(--navy-ink)}
.probdesc{margin:.5rem 0 .2rem;font-size:.95rem;line-height:1.5}
.probimgs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 .2rem}
.probimgs img{width:120px;height:90px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.probactions{margin-top:.7rem;display:flex;gap:.4rem;flex-wrap:wrap}
.probtask{display:none;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--line)}
.probtask.open{display:block}
@media(max-width:640px){.probimgs img{width:96px;height:72px}}

/* Eingeklappter Verlauf */
.histbox summary{cursor:pointer;font-size:1.02rem;list-style:none;padding:.1rem 0;color:var(--navy-ink)}
.histbox summary::-webkit-details-marker{display:none}
.histbox summary::before{content:'▸ ';color:var(--muted)}
.histbox[open] summary::before{content:'▾ '}
.histbox[open] summary{margin-bottom:.7rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}

/* Monatsbericht */
.repbar-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem}
.repbar{height:8px;border-radius:99px;overflow:hidden}
.repbar i{display:block;height:100%;border-radius:99px;transition:width .3s}
.repbar i.low{background:var(--coral-strong)}
.repbar i.half{background:var(--gold)}
.repbar i.done{background:var(--green)}
.reptab{font-variant-numeric:tabular-nums}
.reptab td,.reptab th{white-space:nowrap}
.reptab tr.reptotal td{border-top:2px solid var(--line-2);font-weight:600}
.repactions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
@media(max-width:640px){.reptab{font-size:.86rem}}
.vacrep{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.45;white-space:pre;overflow-x:auto;border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem;resize:vertical}

/* Mein Konto: Zwei-Faktor-Einrichtung */
.qrbox{display:inline-block;padding:.45rem;border:1px solid var(--line);border-radius:12px;line-height:0}
.qrbox svg{max-width:100%;height:auto}
code.secret{font-size:1.05rem;letter-spacing:.06em;word-break:break-all;user-select:all}
.codecard{border:2px solid var(--gold)}
.codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;max-width:22rem}
.codes code{font-size:1.15rem;border-radius:8px;padding:.35rem .6rem;text-align:center;user-select:all}

/* ---------- Handy ------------------------------------------------------------------ */

@media(max-width:640px){


 .hide-sm{display:none}


 .daytable .seg .muted{display:none} /* Emoji 🕐/☕ reicht am Handy */

 .btn.big{padding:.9rem}
 td form.inline .btn,td .btn{min-height:32px;padding:.3rem .55rem!important;font-size:.78rem}
 .stat .v{font-size:1.7rem}

}
/* ---------- Aufräumen der Oberfläche (06.10.2026) -------------------------------------- */
/* Überschrift + ⓘ in einer Zeile: <div class="hd"><h1|h2>…</h1|h2> <details class="ihint">…</details></div> */
.hd{display:flex;align-items:center;flex-wrap:wrap;gap:.1rem .25rem}

.hd>h1,.hd>h2{margin:0;min-width:0}

.hd>.ihint{margin:0}
.hd>.ihint[open]{flex-basis:100%;margin-top:.35rem}
/* ⓘ-Erklärtexte: zu, nur ein Symbol neben der Überschrift (44 px Tippfläche); offen, ein ruhiger Kasten darunter */
.ihint{display:inline-block;vertical-align:middle;margin:-6px 0 -6px .1rem;font-weight:400}
.ihint summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
 border-radius:50%;cursor:pointer;margin:0;padding:0;transition:background .15s,color .15s}
.ihint summary::-webkit-details-marker{display:none}
.ihint summary .ico{width:21px;height:21px}

.ihint summary:focus-visible{box-shadow:var(--ring)}
/* offen: der Kasten rückt unter die Überschrift, das Symbol sitzt rechts oben im Kasten (= wieder schließen) */
.ihint[open]{display:block;position:relative;margin:.35rem 0 0}
.ihint[open] summary{position:absolute;right:.25rem;top:.25rem;width:40px;height:40px;z-index:1}
.ihint-body{font-size:.9rem;font-weight:400;line-height:1.5;letter-spacing:0;text-transform:none}
.ihint-body p{margin:.35rem 0}
.ihint-body p:first-child{margin-top:0}
.ihint-body p:last-child{margin-bottom:0}
.ihint-body ul{margin:.3rem 0;padding-left:1.2rem}
h1 .ihint,h2 .ihint{font-size:1rem}
/* Knopfzeilen unter Karten: gleiche Abstände, Umbruch am Handy */
.btnrow{display:flex;flex-wrap:wrap;margin-top:.8rem}
.btnrow .btn{margin:0}
/* Übersicht: Stempeluhr-Karte */
.dashclock{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dashclock-main{flex:1 1 14rem;min-width:0}
.dashclock-main h2{margin-bottom:.5rem}
.dashclock-main .muted{margin:.6rem 0 0}
/* Einstellungen gesammelt: Suche, Sprungliste, Abschnitte */
.settop{position:sticky;z-index:5;padding:.3rem 0 .5rem;margin:0 0 .6rem}
.settop input[type=search]{min-height:46px}
.jumplist{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 0}
.jumpsel{margin:-.3rem 0 .8rem}
.jumplist a{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .75rem;border-radius:999px;text-decoration:none;font-size:.85rem;font-weight:500}
.jumplist a:hover{border-color:var(--navy)}
.jumplist a[hidden]{display:none}
.setsec{scroll-margin-top:190px}
.setsec[hidden]{display:none}
.setbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:-.2rem 0 .5rem}
.setsec .setlink{margin-left:auto;font-size:.82rem;font-weight:500;white-space:nowrap}

.setsec .card+.card{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.setsec .grid.cols2>.card{padding-top:0;border-top:0}
/* Pfad (Breadcrumb) der Einstellungen (Michael 18.10.2026, app/lib/crumbs.php): EINE Zeile, jede Ebene ein Link; zu lang → waagrecht
   schiebbar (app.js schiebt ans Ende), am Handy Zwischenstufen mit „…" gekürzt, Ziele mindestens 40 px hoch */
.crumbs{margin:0 0 .7rem;font-size:.86rem;min-width:0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
 scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.crumbs ol::-webkit-scrollbar{display:none}
.crumbs li{display:flex;align-items:center;flex:0 0 auto;min-width:0}
.crumbs li+li::before{content:'›';color:var(--soft);padding:0 .3rem;font-weight:600}
.crumbs a,.crumbs .crumb-off{display:inline-block;max-width:22em;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;line-height:32px;
 padding:0 .2rem;border-radius:6px;color:var(--navy);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs a:focus-visible{outline:none;box-shadow:var(--ring)}
.crumbs .crumb-off{color:var(--muted)}
.crumbs [aria-current]{font-weight:700;color:var(--text)}
.crumbs.can-scroll ol{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)}
.setcrumb{position:sticky;top:calc(58px + env(safe-area-inset-top,0px));z-index:6;background:var(--bg);padding:.2rem 0;margin:0 0 .5rem}
.setcrumb .crumbs{margin:0}

.setbar .crumbs-sec{margin:0;font-size:.78rem;flex:1 1 12rem}
.setbar .crumbs-sec a,.setbar .crumbs-sec .crumb-off{line-height:28px;color:var(--muted)}
.setbar .crumbs-sec [aria-current]{color:var(--navy)}
.setgrp{display:block;height:0;scroll-margin-top:190px}
.setsec [id*="--"]{scroll-margin-top:190px}
.crumb-hit{animation:crumbHit 2.6s ease-out}
@keyframes crumbHit{0%,35%{box-shadow:0 0 0 3px var(--gold);background-color:var(--gold-soft)}100%{box-shadow:0 0 0 3px transparent}}
@media(max-width:768px){
 .crumbs a,.crumbs .crumb-off{line-height:40px}
 .crumbs li:not(:last-child) a,.crumbs li:not(:last-child) .crumb-off{max-width:8.5em}
 .crumbs [aria-current]{max-width:16em}
 .setbar .crumbs-sec a,.setbar .crumbs-sec .crumb-off{line-height:36px}
 .setgrp,.setsec [id*="--"]{scroll-margin-top:112px}
}
/* Gruppen & Module: ein Block je Modul */
.modblock{border-top:1px solid var(--line);padding:1rem 0 .5rem}
.modblock:first-of-type{border-top:0;padding-top:.2rem}
.modblock h3{margin:0 0 .15rem;font-size:1.02rem}
.modsub{font-size:.84rem;margin-bottom:.4rem}
.modrow{margin:.5rem 0 .2rem}
.modlbl{display:block;font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.25rem}
.modchk{display:inline-flex;margin:0 1rem .4rem 0}
.modusers{margin:.3rem 0 .4rem}
.modusers summary{cursor:pointer;display:flex;align-items:center;list-style:none;margin:0}
.modusers summary::-webkit-details-marker{display:none}
.modusers summary::before{content:'▸';margin-right:.4rem;font-size:.9rem}
.modusers[open] summary::before{content:'▾'}
/* Module: „Ansicht als Person X" (04.10.2026) */
.viewas{display:flex;justify-content:flex-end;margin:-.4rem 0 .6rem}
.viewas label{font-size:.85rem;color:var(--muted);display:flex;gap:.4rem;align-items:center}
.viewas select{width:auto;padding:.25rem .5rem}
/* ---------- Bestätigung direkt am Knopf (Michael 11.10.2026) --------------------------------- */
/* Toast: die Meldung von oben noch einmal als schwebende Karte unten — Handy: Mitte über der Leiste,
   Desktop (≥1100px): rechts unten. Grün = gespeichert, rot (.neg) = Fehler (❗). Antippen schließt. */
.toast{z-index:70;
 opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;cursor:pointer}
.toast.show{opacity:1;pointer-events:auto}

.toast .toastx{flex:0 0 auto;border:0;border-radius:999px;line-height:1;cursor:pointer;padding:0}

/* Knopf nach dem Absenden: „⏳ …" und gesperrt, bis die neue Seite da ist (kein Doppelklick) */
.btn.busy{opacity:.75;cursor:progress;pointer-events:none}
/* ---------- Zurück-Knopf am Handy (Michael 11.10.2026) --------------------------------------- */
/* „Überall soll der Zurück-Button zur vorigen Seite am Handy unten sein." Eine Klasse für alle Unterseiten
   (backFab in layout.php): fest unten RECHTS über der Leiste (Safe-Area; seit 15.10.2026 rechts — mit dem Daumen
   besser erreichbar), 44 px rund, nur bis 1100 px — am Desktop steht das Menü oben. Der Toast (Mitte, z-index 70)
   liegt darüber; gibt es rechts unten schon einen eigenen Knopf (Aufgaben „+"), rückt er darüber. */
.fab-back{display:none;position:fixed;right:.75rem;bottom:calc(env(safe-area-inset-bottom,0px) + .75rem);z-index:45;
 width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;background:var(--primary);color:#fff;
 font-size:1.3rem;font-weight:700;text-decoration:none;box-shadow:0 6px 16px -6px rgba(11,34,64,.6);border:2px solid var(--surface)}
.fab-back:hover{background:var(--primary-2);color:#fff}
body:has(.bottomnav) .fab-back{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + .75rem)}
body:has(.tk-fab) .fab-back{bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0px) + 16px + 56px + .6rem)}
@media(max-width:1099px){.fab-back{display:flex}}
/* ---------- Reiter und Sprungliste am Handy (Michael 11.10.2026) ------------------------------ */
/* „Beim Runterscrollen sehe ich oben die ganzen Filter/Menüpunkte, scrollen geht nur auf den untersten 20 %."
   Eine Regel für alle Admin-Seiten mit Reiterzeile (Kontrolle, Nachrichten, Reinigung, Team, Guide, Einstellungen):
   die Reiter bleiben EINE Zeile (waagrecht schiebbar, nie angeheftet). Die Sprungliste der Einstellungsseite
   steckt in <details class="jumpsel">: am Handy eingeklappt („Abschnitt wählen"), am Desktop offen ohne Zeile. */
.tabs{flex-wrap:nowrap;position:static}
.jumpsel>summary{list-style:none;cursor:pointer;display:none}
.jumpsel>summary::-webkit-details-marker{display:none}
@media(max-width:768px){
 .settop{position:static;padding:.2rem 0 .3rem}
 .setsec{scroll-margin-top:112px}
 .jumpsel>summary{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;padding:.3rem .9rem;border-radius:999px;font-size:.88rem;font-weight:600}
 .jumpsel>summary::before{content:'▸';font-size:.85rem}
 .jumpsel[open]>summary::before{content:'▾'}
 .jumpsel[open]>summary{border-color:var(--navy)}
 .jumpsel .jumplist{margin-top:.45rem}
}
/* ---------- Startübersicht: Ignorieren / Erneut erinnern je Eintrag (11.10.2026) ---------- */

.tsnz{flex:0 0 auto}
.todorow .tsnz>summary{list-style:none;margin:0;font-size:.95rem;line-height:1}
.tsnz>summary::-webkit-details-marker{display:none}

.tsnzmenu{position:absolute;right:.5rem;top:calc(100% - .15rem);z-index:30;display:flex;flex-direction:column;gap:.35rem;
 min-width:240px;max-width:calc(100vw - 2rem);padding:.6rem;color:var(--text)}
.tsnzmenu .btn{justify-content:space-between;width:100%;text-align:left;white-space:nowrap}
.tsnzmenu .btn .muted{font-size:.78rem;margin-left:.5rem}
.tsnzhead{font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tsnzcustom{display:flex;gap:.35rem}
.tsnzcustom input{flex:1;min-width:0;margin:0}
.tsnzcustom .btn{width:auto}
.tsnzmenu .tsnzign{border-top:1px solid var(--line);margin-top:.15rem}
.tsnzhidden{margin-top:.55rem}
.tsnzhidden>summary{font-size:.85rem}
.tsnzrow{display:flex;gap:.7rem;align-items:center;padding:.5rem .75rem;margin:.35rem 0;border-radius:12px;border:1px dashed var(--line-2);color:var(--muted)}
.tsnzrow .tinfo{flex:1;min-width:0;font-size:.9rem}
.tsnzrow form{margin:0}
.tsnzrow .btn{white-space:nowrap;padding:.3rem .8rem;font-size:.85rem;min-height:34px}
/* Heute im Dienst: Tagessoll neben „heute gearbeitet" (11.10.2026) */
.dsoll{color:var(--muted);font-weight:400;white-space:nowrap}
.dsoll.over{color:var(--amber);font-weight:600}
/* Startübersicht am Handy (Sichtprüfung 11.10.2026): Text bekommt die ganze Breite, Öffnen und ⏰ darunter rechts */
@media (max-width:520px){
  .todorow{flex-wrap:wrap}

  .todorow > .btn{margin-left:auto}
}
/* ---------- Offene Menüs, Panels und Blätter (Michael 16.10.2026) ------------------------------------------------- */
/* „Wenn ein Menü offen ist, soll der Hintergrund gesperrt sein, nur das Panel scrollt." app.js (HeroModal) setzt am <body> eine
   feste Position samt gemerkter Scroll-Höhe (iPhone-tauglich) und am <html> .hero-locked; Tippen daneben schließt nur. Die
   Panels selbst scrollen in sich, ohne dass das Wischen an die Seite dahinter weitergereicht wird. */
html.hero-locked,html.hero-locked body{overscroll-behavior:none}
.menu-panel,.userpanel,.tsnzmenu,.gm-uxmenu-pop,.gm-uxc-panel,.pr-opts{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.userpanel{max-height:calc(100dvh - 90px - env(safe-area-inset-top,0px));overflow-y:auto}
.tsnzmenu,.gm-uxmenu-pop{max-height:70vh;overflow-y:auto}
/* Beschriftung + ⓘ in einer Zeile (Erklärtext zum Feld eingeklappt, 16.10.2026): <div class="lblrow"><label>…</label> ⓘ </div> */
.lblrow{display:flex;align-items:center;flex-wrap:wrap;gap:0 .1rem}
.lblrow>label{margin:.7rem 0 .3rem}
.lblrow>label.chk{margin:.35rem 0}
.lblrow>:not(.ihint){max-width:calc(100% - 46px)}
.lblrow>.ihint{margin:-4px 0}
.lblrow>.ihint[open]{flex-basis:100%;margin:.2rem 0 .4rem}
/* Handy-Übersicht kompakt (16.10.2026) ======================================================================================== */
/* Michael 16.10.2026 (Screenshot iPhone, Reinigung „Die nächsten 14 Tage"): „Am Handy soll das viel besser und schöner aussehen. Ich will da
   nicht scrollen müssen. Außerdem wird hier alles sehr klein und mit viel zu vielen Abständen angezeigt." Alles dazu in diesem einen Block:
   1) Reinigung → „Die nächsten 14 Tage" als Tagesliste (.cl14) statt Tabelle: eine Zeile je Tag, Pills, Ampel-Punkt, freie Tage schmal
   2) Karten am Handy dichter: Innenabstand 12–13 px, kleinere Überschriften, Inhalt ≥ 15 px, Zahlen groß und fett; Übersicht (dash):
      „Das liegt bei dir" in einer Zeile mit →, „Heute im Dienst" als Liste, Forderungen-Kennzahlen kompakt
   3) Tabellen: .tblwrap/.tblscroll (handy.js) schiebbar mit Schatten-Hinweis statt Überlauf; .mcards am Handy als Karten mit
      Spaltenüberschrift je Zelle (data-l aus handy.js) — Kontrolle, Reinigungsplan-Tag, Übersicht */

/* 1) Reinigung: die nächsten 14 Tage */
.cl14-legend{margin:-.3rem 0 .6rem;font-size:.8rem;line-height:1.35;color:var(--muted)}
.cl14{display:flex;flex-direction:column;gap:4px}
.cl14-row{display:grid;grid-template-columns:4.6rem minmax(0,1fr) 13px;align-items:center;column-gap:.5rem;row-gap:.1rem;
 min-height:42px;padding:.3rem .55rem;border:1px solid var(--line);border-radius:12px;color:var(--text);
 text-decoration:none;font-variant-numeric:tabular-nums;transition:border-color .15s,background .15s}
.cl14-row:hover{border-color:var(--line-2);background:var(--hover)}
.cl14-row:active{background:var(--surface-2)}
.cl14-d{font-size:.95rem;white-space:nowrap;color:var(--navy-ink)}
.cl14-d b{font-weight:800}
.cl14-k{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-width:0}
.cl14-who{flex:1 1 0;min-width:3.2rem;font-size:.84rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl14-p{display:inline-flex;align-items:center;gap:.2rem;padding:.08rem .45rem;border-radius:999px;
 font-size:.88rem;line-height:1.4;white-space:nowrap;color:var(--muted)}
.cl14-p b{font-size:1rem;font-weight:800;color:var(--navy-ink)}
.cl14-p.sd{background:var(--amber-soft);color:var(--warn)}
.cl14-p.sd b{color:var(--warn)}
.cl14-p.ppl.low{background:var(--coral-soft);color:var(--coral-ink)}
.cl14-p.ppl.low b{color:var(--coral-ink)}
.cl14-p.min{display:none}
.cl14-win{font-size:.76rem;font-weight:700;color:var(--coral-ink)}
.cl14-dot{justify-self:end;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line-2)}
.lv-ok .cl14-dot{background:#4E9F57;box-shadow:0 0 0 3px var(--line)}
.lv-tight .cl14-dot{background:var(--gold-2);box-shadow:0 0 0 3px var(--warn-line)}
.lv-short .cl14-dot{background:#E58A5C;box-shadow:0 0 0 3px var(--coral-soft)}
.cl14-sub{grid-column:2/4;min-width:0;font-size:.8rem;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl14-w{color:var(--coral-ink);font-weight:600}
.cl14-row.is-today{border-color:var(--gold);background:var(--gold-soft);box-shadow:inset 4px 0 0 var(--gold)}
.cl14-row.is-hol .cl14-d{color:var(--amber)}
.cl14-row.free,.cl14-row.quiet{min-height:32px;padding:.2rem .65rem;background:transparent;border-style:dashed}
.cl14-row.free{grid-template-columns:auto minmax(0,1fr)}
.cl14-row.free .cl14-d,.cl14-row.quiet .cl14-d{font-size:.9rem;color:var(--muted)}
.cl14-row.free .cl14-d b,.cl14-row.quiet .cl14-d b{font-weight:600}
.cl14-free{font-size:.85rem;color:var(--soft)}
.cl14-row.free .cl14-free::before{content:'· '}
.cl14-row.free.is-today,.cl14-row.quiet.is-today{background:var(--gold-soft);border-style:solid}
@media(min-width:700px){
 .cl14-row{grid-template-columns:7.2rem minmax(0,1fr) 14px;padding:.45rem .9rem}
 .cl14-p.min{display:inline-flex}
 .cl14-sub{white-space:normal}
}

/* 3) Tabellen: schiebbar mit Schatten-Hinweis (Hülle aus handy.js) */
.tblwrap{position:relative;max-width:100%}
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tblwrap::before,.tblwrap::after{content:'';position:absolute;top:0;bottom:0;width:18px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:2}
.tblwrap::before{left:0;background:linear-gradient(90deg,rgba(16,48,82,.16),rgba(16,48,82,0))}
.tblwrap::after{right:0;background:linear-gradient(270deg,rgba(16,48,82,.16),rgba(16,48,82,0))}
.tblwrap.more-l::before,.tblwrap.more-r::after{opacity:1}

/* 2) + 3) am Handy */
@media(max-width:700px){





 .btnrow{margin-top:.6rem}

 .stat{padding:.75rem}
 .stat .v{font-size:1.6rem}

 /* Tabellen als Karten (.mcards): je Zeile ein Block, Spaltenüberschrift links, Wert rechts daneben */
 table.mcards,table.mcards>tbody,table.mcards>tbody>tr{display:block;width:100%}
 table.mcards tr.mhead{display:none}
 table.mcards>tbody>tr:first-child:not(:has(>td)){display:none}   /* Kopfzeile auch schon, bevor handy.js lief (kein Aufblitzen) */
 table.mcards{font-size:.95rem}
 table.mcards>tbody>tr{padding:.55rem 0;border-bottom:1px solid var(--line)}
 table.mcards>tbody>tr:last-child{border-bottom:0}
 table.mcards td{display:block;border:0;padding:.12rem 0;text-align:left;white-space:normal!important}
 table.mcards td:empty{display:none}
 table.mcards td:first-child{font-size:1rem}
 table.mcards td:first-child{font-weight:600}
 table.mcards td[data-l]:not(:first-child):not([data-l=""]){display:flow-root;padding-left:8.1rem}
 table.mcards td[data-l]:not(:first-child):not([data-l=""])::before{content:attr(data-l);float:left;width:7.5rem;margin:.18rem 0 0 -8.1rem;
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;line-height:1.25;overflow-wrap:anywhere}
 table.mcards td .btn,table.mcards td form.inline .btn{min-height:36px;font-size:.85rem;padding:.35rem .7rem!important}
 @media(hover:hover){table.mcards tr:hover>td{background:none}}

 /* Reinigungsplan → Tag: je Wohnung eine Karte — Wohnung | Priorität | Fenster, darunter Gäste | Normzeit */
 table.cl-jobs,table.cl-jobs>tbody{display:block;width:100%;font-size:.95rem}
 table.cl-jobs>tbody>tr:has(>th){display:none}
 table.cl-jobs>tbody>tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"a p w" "g g n";
  align-items:start;column-gap:.5rem;row-gap:.3rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
 table.cl-jobs>tbody>tr:last-child{border-bottom:0}
 table.cl-jobs td{display:block;border:0;padding:0}
 table.cl-jobs td:nth-child(1){grid-area:a;font-size:1rem}
 table.cl-jobs td:nth-child(2){grid-area:p}
 table.cl-jobs td:nth-child(3){grid-area:w;font-weight:600}
 table.cl-jobs td:nth-child(4){grid-area:g;font-size:.92rem}
 table.cl-jobs td:nth-child(5){grid-area:n;align-self:end;color:var(--muted)}
 table.cl-jobs td:nth-child(6){grid-column:1/-1;font-size:.88rem;color:var(--muted)}
 @media(hover:hover){table.cl-jobs tr:hover>td{background:none}}

 /* Übersicht: „Das liegt bei dir" — Text, → und ⏰ in einer Zeile (statt Knopf darunter) */
 .todorow{flex-wrap:nowrap}

 .todorow>.btn{flex:0 0 auto;margin-left:0;min-height:38px;min-width:42px;padding:0 .6rem;font-size:0;gap:0}
 .todorow>.btn::after{content:'→';font-size:1.15rem;font-weight:700}

 /* Übersicht: „Heute im Dienst" als Liste — Name + Stunden groß in Zeile 1, Status darunter, Pause und Link klein */
 table.dashtoday>tbody>tr:not(.mhead){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n w" "s s" "b l";
  align-items:center;column-gap:.6rem;row-gap:.25rem}
 table.dashtoday td{padding:0!important}
 table.dashtoday td:nth-child(1){grid-area:n}
 table.dashtoday td:nth-child(2){grid-area:s;display:flex!important;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}
 table.dashtoday td:nth-child(3){grid-area:w;display:block!important;text-align:right;font-size:1.2rem}
 table.dashtoday td:nth-child(4){grid-area:b;display:block!important;font-size:.88rem}
 table.dashtoday td:nth-child(5){grid-area:l;display:block!important;text-align:right;font-size:.88rem}
 table.dashtoday td:nth-child(2)::before,table.dashtoday td:nth-child(3)::before,table.dashtoday td:nth-child(5)::before{content:none!important}
 table.dashtoday td:nth-child(4)::before{content:attr(data-l) ': '!important;text-transform:none!important;letter-spacing:0!important;font-size:.88rem!important;font-weight:400!important;float:none!important;width:auto!important;margin:0!important}
 table.dashtoday .statuschip{padding:.18rem .65rem;font-size:.85rem}
 table.dashtoday .dsoll{font-size:.85rem}

 /* Übersicht: Forderungen — Kennzahl und Beschriftung nebeneinander, halb so hoch */
 .rcv-dash .rcv-kpis{gap:.4rem;margin:0 0 .6rem}
 .rcv-dash .rcv-kpi{flex-wrap:wrap;gap:0 .4rem;padding:.4rem .6rem}
 .rcv-dash .rcv-kpi b{font-size:1.12rem}
 .rcv-dash .rcv-kpi small{font-size:.76rem}

 /* Aufgaben-Zeilen (Übersicht „Aufgaben, die heute laufen", Stempeluhr): weniger Luft zwischen den Zeilen */

 .taskrow .tinfo>div:first-child{gap:.15rem .4rem;line-height:1.35}

 /* Stempeluhr-Karte der Übersicht */
 .dashclock{gap:.5rem}
 .dashclock-main h2{margin-bottom:.35rem}
 .dashclock-main .muted{margin:.35rem 0 0;font-size:.85rem}
}

/* „Das liegt bei dir" mit Zusatz-Knopf (Entwurf an Gast, Eskalation setzen — 16.10.2026): am Handy der Text oben über die ganze Breite, Knöpfe darunter */
@media (max-width:520px){.todorow:has(>form)>.btn{margin-left:auto}}