/* WerkSwiss UI v0.9 – dunkle Seitenleiste, helle Kartenfläche, getönte Kennzahlen. Themefähig über --ws-* (Mandant/Label) */
:root{
  --accent:#0f8a63; --accent-2:#1ab38a; --accent-ink:#ffffff; --accent-soft:#e3f5ec; --accent-soft-ink:#0b6e4f;
  --bg:#f3f5f6; --card:#ffffff; --surface:#f6f8f8; --line:#e4e8ea; --line-2:#d5dbde; --text:#1a2124; --muted:#687378; --faint:#98a3a8;
  --danger:#c62f3a; --danger-soft:#fdeaec; --warn:#9a6700; --warn-soft:#fff4dc; --info:#2b63c7; --info-soft:#e8f0fc; --violet:#6b4fc4; --violet-soft:#efeafb; --teal:#0d8c8a; --teal-soft:#e1f4f3; --rose:#c43d78; --rose-soft:#fbe8f1;
  --nav-bg:#131a1e; --nav-bg-2:#182127; --nav-text:#c5cfd3; --nav-muted:#7a8891; --nav-active:#ffffff; --nav-active-bg:rgba(26,179,138,.18); --nav-hover:rgba(255,255,255,.06);
  --radius:14px; --radius-s:9px; --nav-w:236px; --fs:15px; --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06); --shadow-2:0 8px 24px rgba(16,24,40,.08);
  --hero-a:#0f8a63; --hero-b:#13a087; --hero-c:#1d6fb8;
}
*{box-sizing:border-box}
html{font-size:var(--fs);-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.45;font-feature-settings:"cv11","ss01","tnum" 0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1{font-size:1.45rem;margin:0 0 .25rem;font-weight:700;letter-spacing:-.015em}
h2{font-size:1.02rem;margin:1.4rem 0 .55rem;font-weight:650;letter-spacing:-.005em}
h1 small{font-weight:450;color:var(--muted);font-size:.9rem;margin-left:.5rem;letter-spacing:0}
::selection{background:var(--accent-soft)}

/* ===== Layout ===== */
#app{min-height:100vh}
.shell{display:grid;grid-template-columns:var(--nav-w) 1fr;min-height:100vh}
aside.side{background:linear-gradient(180deg,var(--nav-bg) 0%,var(--nav-bg-2) 100%);color:var(--nav-text);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:.9rem .75rem;gap:.1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
aside.side .brand{display:flex;align-items:center;gap:.65rem;padding:.35rem .5rem .95rem;color:#fff;text-decoration:none}
aside.side .brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
aside.side .brand b{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.1}
aside.side .brand span{display:block;font-size:.72rem;color:var(--nav-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
aside.side .grp{font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--nav-muted);padding:.95rem .6rem .35rem}
aside.side a.item{display:flex;align-items:center;gap:.7rem;padding:.55rem .65rem;border-radius:10px;color:var(--nav-text);font-weight:500;font-size:.92rem;position:relative}
aside.side a.item .icon{width:20px;height:20px;opacity:.85}
aside.side a.item:hover{background:var(--nav-hover);text-decoration:none;color:#fff}
aside.side a.item.active{background:var(--nav-active-bg);color:var(--nav-active)}
aside.side a.item.active::before{content:"";position:absolute;left:-.75rem;top:22%;height:56%;width:3px;border-radius:0 3px 3px 0;background:var(--accent-2)}
aside.side a.item.active .icon{opacity:1;color:var(--accent-2)}
aside.side a.item .cnt{margin-left:auto;font-size:.7rem;font-weight:700;background:var(--accent-2);color:#06231a;border-radius:999px;padding:.05rem .45rem;min-width:1.3rem;text-align:center}
aside.side .spacer{flex:1}
aside.side .foot{border-top:1px solid rgba(255,255,255,.08);margin-top:.75rem;padding:.75rem .35rem .1rem;display:grid;grid-template-columns:auto 1fr;gap:.2rem .6rem;align-items:center}
aside.side .foot .links{grid-column:2;display:flex;gap:.7rem}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex:none;letter-spacing:.02em}
aside.side .foot .who{min-width:0;flex:1}
aside.side .foot b{display:block;color:#fff;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
aside.side .foot small{color:var(--nav-muted);font-size:.72rem}
aside.side .foot a{color:var(--nav-muted);font-size:.78rem}
aside.side .foot a:hover{color:#fff}
.content{min-width:0;display:flex;flex-direction:column}
header.topbar{display:flex;align-items:center;gap:1rem;padding:.8rem 1.75rem;background:transparent;position:sticky;top:0;z-index:15;backdrop-filter:saturate(1.2) blur(8px);background:rgba(243,245,246,.85)}
header.topbar .crumb{font-weight:600;font-size:.95rem;color:var(--text)}
header.topbar .crumb span{color:var(--faint);font-weight:400;margin:0 .4rem}
header.topbar .grow{flex:1}
header.topbar .pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;box-shadow:var(--shadow)}
header.topbar .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-2)}
main{padding:.35rem 1.75rem 3rem;max-width:1380px;width:100%}
.icon{width:22px;height:22px;flex:none}
nav.tabbar{display:none}

/* ===== Mobile ===== */
@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  aside.side{display:none}
  header.topbar{padding:.7rem 1rem;background:var(--nav-bg);color:#fff;backdrop-filter:none}
  header.topbar .crumb{color:#fff}header.topbar .crumb span{color:var(--nav-muted)}
  header.topbar .pill{display:none}
  header.topbar .mbrand{display:flex;align-items:center;gap:.5rem;font-weight:700}
  header.topbar .mbrand img{width:26px;height:26px;border-radius:7px}
  nav.tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom));z-index:20;justify-content:space-around;box-shadow:0 -4px 16px rgba(16,24,40,.06)}
  nav.tabbar a.item{display:flex;flex-direction:column;align-items:center;gap:.1rem;font-size:.68rem;padding:.3rem .4rem;min-width:58px;color:var(--muted);border-radius:10px;font-weight:500}
  nav.tabbar a.item.active{color:var(--accent);background:var(--accent-soft)}
  main{padding:.75rem .9rem 5.75rem}
  h1{font-size:1.25rem}
}
@media (min-width:861px){header.topbar .mbrand{display:none}}

/* ===== Karten / Flächen ===== */
.card,.box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.box{padding:1.1rem 1.2rem}
.box h2{margin-top:0}
.card{padding:1.1rem 1.2rem}
.card-h{display:flex;align-items:center;gap:.6rem;margin:-.1rem 0 .8rem}
.card-h h2,.card-h h3{margin:0;font-size:.98rem;font-weight:650}
.card-h .sub{color:var(--muted);font-size:.8rem;display:block;font-weight:400}
.card-h .grow{flex:1}
.card-h a{font-size:.82rem;font-weight:500}
.ic{width:32px;height:32px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ic .icon{width:18px;height:18px}
.ic.green{background:var(--accent-soft);color:var(--accent-soft-ink)}.ic.blue{background:var(--info-soft);color:var(--info)}.ic.amber{background:var(--warn-soft);color:var(--warn)}.ic.rose{background:var(--rose-soft);color:var(--rose)}.ic.red{background:var(--danger-soft);color:var(--danger)}.ic.violet{background:var(--violet-soft);color:var(--violet)}.ic.teal{background:var(--teal-soft);color:var(--teal)}.ic.grey{background:#eef1f2;color:var(--muted)}

/* ===== Dashboard ===== */
.dash{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:1.1rem;align-items:start}
.dash .col{display:grid;gap:1.1rem;min-width:0}
.dash .col>*{min-width:0}
.card{min-width:0}
@media (max-width:1100px){.dash{grid-template-columns:1fr}}
.hero{position:relative;overflow:hidden;border-radius:var(--radius);color:#fff;padding:1.35rem 1.4rem 1.2rem;background:linear-gradient(118deg,var(--hero-a) 0%,var(--hero-b) 55%,var(--hero-c) 130%);box-shadow:var(--shadow-2)}
.hero::after{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.09)}
.hero::before{content:"";position:absolute;right:90px;bottom:-120px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07)}
.hero>*{position:relative;z-index:1}
.hero .day{font-size:.8rem;opacity:.85;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.hero h1{color:#fff;font-size:1.55rem;margin:.1rem 0 .15rem}
.hero p{margin:0;opacity:.9;font-size:.92rem}
.hero .hstats{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.05rem}
.hero .hstat{background:rgba(255,255,255,.16);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:.55rem .85rem;min-width:118px;color:#fff;text-decoration:none}
.hero .hstat:hover{background:rgba(255,255,255,.24)}
.hero .hstat b{display:block;font-size:1.35rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.hero .hstat span{font-size:.74rem;opacity:.9}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.tile{border-radius:var(--radius);padding:.95rem 1rem;position:relative;color:var(--text);text-decoration:none;border:1px solid transparent;transition:transform .12s,box-shadow .12s;display:block}
.tile:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-2)}
.tile b{display:block;padding-right:2.2rem;font-size:1.55rem;font-weight:750;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.tile span{display:block;font-size:.8rem;color:var(--muted);margin-top:.25rem}
.tile small{display:block;font-size:.72rem;margin-top:.35rem;opacity:.8}
.tile .ic{position:absolute;right:.75rem;top:.75rem;width:28px;height:28px;background:rgba(255,255,255,.7)}
.tile.green{background:var(--accent-soft)}.tile.green b,.tile.green .ic{color:var(--accent-soft-ink)}
.tile.blue{background:var(--info-soft)}.tile.blue b,.tile.blue .ic{color:var(--info)}
.tile.amber{background:var(--warn-soft)}.tile.amber b,.tile.amber .ic{color:var(--warn)}
.tile.rose{background:var(--rose-soft)}.tile.rose b,.tile.rose .ic{color:var(--rose)}
.tile.red{background:var(--danger-soft)}.tile.red b,.tile.red .ic{color:var(--danger)}
.tile.violet{background:var(--violet-soft)}.tile.violet b,.tile.violet .ic{color:var(--violet)}
.tile.teal{background:var(--teal-soft)}.tile.teal b,.tile.teal .ic{color:var(--teal)}
.tile.white{background:var(--card);border-color:var(--line)}
.meter{height:8px;border-radius:999px;background:#e9edef;overflow:hidden;margin:.45rem 0 .2rem}
.meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.meter.violet i{background:linear-gradient(90deg,#6b4fc4,#9b84e6)}.meter.blue i{background:linear-gradient(90deg,#2b63c7,#5c8ee6)}.meter.amber i{background:linear-gradient(90deg,#c98a00,#f0b64a)}.meter.red i{background:linear-gradient(90deg,#c62f3a,#e8606a)}
.kpi{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem}
.kpi b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.kpi .muted{font-size:.78rem}
.wlist{display:flex;flex-direction:column}
.wrow{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;min-width:0}
.wrow:first-child{border-top:0}
a.wrow:hover{text-decoration:none;background:var(--surface);margin:0 -.6rem;padding-left:.6rem;padding-right:.6rem;border-radius:8px}
.wrow .t{font-weight:550;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrow .s{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrow .main{flex:1;min-width:0}
.wrow .r{text-align:right;white-space:nowrap;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.wrow .r b{display:block;color:var(--text);font-size:.92rem}
.wrow .tm{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--muted);min-width:78px}
.wrow .tm b{display:block;color:var(--text);font-weight:600}
.wrow .bar{width:4px;align-self:stretch;border-radius:3px;background:var(--line-2);flex:none}
.bar.green{background:var(--accent-2)}.bar.red{background:var(--danger)}.bar.amber{background:#e2a300}.bar.blue{background:var(--info)}.bar.violet{background:var(--violet)}.bar.grey{background:var(--line-2)}
.chip{display:inline-flex;align-items:center;font-size:.7rem;font-weight:650;padding:.1rem .5rem;border-radius:999px;background:var(--surface);color:var(--muted);white-space:nowrap;letter-spacing:.01em}
.chip.green{background:var(--accent-soft);color:var(--accent-soft-ink)}.chip.red{background:var(--danger-soft);color:var(--danger)}.chip.amber{background:var(--warn-soft);color:var(--warn)}.chip.blue{background:var(--info-soft);color:var(--info)}.chip.violet{background:var(--violet-soft);color:var(--violet)}.chip.teal{background:var(--teal-soft);color:var(--teal)}
.bars{display:flex;align-items:flex-end;gap:.45rem;height:84px;margin-top:.5rem}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;height:100%;justify-content:flex-end;min-width:0}
.bars .b i{display:block;width:100%;max-width:36px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--accent-2),var(--accent));min-height:3px}
.bars .b.cur i{background:linear-gradient(180deg,#5c8ee6,var(--info))}
.bars .b span{font-size:.68rem;color:var(--muted)}
.team{display:grid;gap:.55rem}
.team .p{display:grid;grid-template-columns:auto 1fr auto;gap:.25rem .6rem;align-items:center;font-size:.85rem}
.team .p .meter{grid-column:2/4;margin:.1rem 0 0}
.team .p b{font-variant-numeric:tabular-nums;font-weight:600}
.focus{display:flex;align-items:center;gap:1rem}
.ring{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;flex:none;background:conic-gradient(var(--accent) calc(var(--p)*1%),#e9edef 0)}
.ring i{width:62px;height:62px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem}
.quick a{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:.8rem .5rem;border-radius:12px;border:1px dashed var(--line-2);color:var(--text);font-size:.8rem;font-weight:550;text-align:center}
.quick a:hover{text-decoration:none;background:var(--surface);border-style:solid}
.quick a .ic{width:36px;height:36px}
.empty-w{color:var(--faint);font-size:.86rem;padding:1rem 0;text-align:center}

/* ===== Toolbar / Eingaben / Buttons ===== */
.toolbar{display:flex;gap:.6rem;align-items:center;margin:.75rem 0 1rem;flex-wrap:wrap}
.toolbar .search{flex:1;min-width:200px}
input.search,input[type=text],input[type=search],input[type=number],input[type=email],input[type=tel],input[type=password],input[type=date],input[type=time],select,textarea{
  width:100%;padding:.55rem .75rem;border:1px solid var(--line-2);border-radius:var(--radius-s);background:var(--card);min-height:42px;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(15,138,99,.15)}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
textarea{min-height:90px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.55rem 1rem;border-radius:var(--radius-s);border:1px solid var(--line-2);background:var(--card);cursor:pointer;min-height:42px;font-weight:550;white-space:nowrap;box-shadow:var(--shadow);transition:background .12s,box-shadow .12s,transform .06s}
.btn:hover{background:var(--surface)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--accent-2),var(--accent));color:var(--accent-ink);border-color:transparent;box-shadow:0 1px 2px rgba(15,138,99,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{color:var(--danger);border-color:#f0c9cd}
.btn.small{padding:.3rem .7rem;min-height:34px;font-size:.86rem}
.btn:disabled{opacity:.5;cursor:default}
/* Listen */
.list{border-top:1px solid var(--line);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:1fr auto;gap:.25rem 1rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);align-items:center;color:inherit}
.list .row:last-child{border-bottom:0}
a.row:hover{background:var(--surface);text-decoration:none}
.row .t{font-weight:550}
.row .s{color:var(--muted);font-size:.9rem}
.row .r{text-align:right;color:var(--muted);font-size:.9rem;white-space:nowrap}
.row .r b{color:var(--text);font-size:1rem}
.empty{color:var(--muted);padding:2rem 0;text-align:center}
/* Formulare */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem 1rem;max-width:780px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.25rem;box-shadow:var(--shadow)}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.25rem;font-weight:500}
@media (max-width:600px){.form{grid-template-columns:1fr;padding:.9rem}}
.actions{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.actions .grow{flex:1}
dialog .form{border:0;box-shadow:none;padding:0;background:transparent}
/* Detail */
.detail{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:860px){.detail{grid-template-columns:1fr}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem}
.kv div:nth-child(odd){color:var(--muted);font-size:.88rem}
.contact-links{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.contact-links a{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;border:1px solid var(--line-2);border-radius:999px;background:var(--card);min-height:38px;font-size:.9rem}
.contact-links a:hover{background:var(--surface);text-decoration:none}
.badge{display:inline-block;font-size:.74rem;padding:.12rem .55rem;border-radius:999px;background:var(--accent-soft);color:var(--accent-soft-ink);font-weight:650;margin-right:.3rem;letter-spacing:.01em}
.badge.grey{background:#e9edef;color:var(--muted)}
.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--line);margin:.5rem 0 1rem;overflow-x:auto}
.tabs button{background:none;border:0;padding:.6rem .9rem;border-bottom:2px solid transparent;cursor:pointer;color:var(--muted);font-weight:550;white-space:nowrap;margin-bottom:-1px}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent)}
.msg{padding:.7rem .9rem;border-radius:var(--radius-s);margin:.5rem 0;font-size:.92rem}
.msg.err{background:var(--danger-soft);color:var(--danger)}
.msg.ok{background:var(--accent-soft);color:var(--accent-soft-ink)}
.msg.warn{background:var(--warn-soft);color:var(--warn)}
.price{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.back{display:inline-flex;align-items:center;gap:.3rem;color:var(--muted);margin-bottom:.4rem;font-size:.88rem}
/* Login */
body:has(.login){background:radial-gradient(1200px 600px at 10% -10%,#e3f5ec 0,transparent 60%),radial-gradient(900px 500px at 110% 110%,#e8f0fc 0,transparent 60%),var(--bg)}
.login{max-width:400px;margin:10vh auto;padding:1.75rem 1.6rem 1.5rem;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-2)}
.login .brand{display:flex;align-items:center;gap:.7rem;font-size:1.35rem;font-weight:700;margin-bottom:.25rem;letter-spacing:-.01em}
.login .brand img{width:40px;height:40px;border-radius:10px}
.login .sub{color:var(--muted);font-size:.88rem;margin:0 0 1.4rem}
.login .field{margin-bottom:.9rem}
.login .foot{text-align:center;color:var(--faint);font-size:.75rem;margin-top:1.25rem}
@media (max-width:480px){.login{margin:4vh 1rem;padding:1.4rem 1.1rem}}
/* Dialog */
dialog{border:1px solid var(--line);border-radius:16px;padding:1.3rem;max-width:580px;width:calc(100% - 2rem);box-shadow:var(--shadow-2)}
dialog::backdrop{background:rgba(19,26,30,.45);backdrop-filter:blur(2px)}
/* Suchergebnisse (Katalog) */
.result{display:grid;grid-template-columns:110px 1fr auto;gap:.2rem 1rem;padding:.6rem .5rem;border-bottom:1px solid var(--line);align-items:start;cursor:pointer}
.result:hover{background:var(--surface)}
.result .code{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.88rem;padding-top:.1rem}
.result .t{font-weight:550}
.result .s{color:var(--muted);font-size:.86rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.result .p{text-align:right;white-space:nowrap}
.result .p b{font-size:1.02rem}
.result .p small{color:var(--muted);display:block}
@media (max-width:600px){.result{grid-template-columns:1fr auto}.result .code{grid-column:1/-1}}
.toast{position:fixed;left:50%;bottom:calc(1.25rem + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--nav-bg);color:#fff;padding:.7rem 1.1rem;border-radius:999px;z-index:50;font-weight:500;box-shadow:var(--shadow-2)}
@media (max-width:860px){.toast{bottom:5.5rem}}
@media (prefers-reduced-motion:no-preference){.btn,.row,.result{transition:background .12s}}
/* Beleg-Editor */
.pgrid{border-top:1px solid var(--line);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0 .75rem;box-shadow:var(--shadow)}
.prow{display:grid;grid-template-columns:110px 1fr 80px 70px 100px 110px 118px;gap:.4rem;padding:.4rem 0;border-bottom:1px solid var(--line);align-items:start}
.prow:last-child{border-bottom:0}
.prow.phead{font-size:.78rem;color:var(--muted);padding:.4rem 0;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.prow.kap{background:var(--surface);margin:0 -.75rem;padding-left:.75rem;padding-right:.75rem}
.prow .pcode b{display:inline-block;padding:.5rem .3rem}
.prow .ptotal{text-align:right;padding-top:.55rem;white-space:nowrap}
.prow .prab{grid-column:2/7;display:flex;gap:.4rem;align-items:center;font-size:.85rem}
.prow textarea{width:100%}
@media (max-width:900px){.prow{grid-template-columns:1fr 1fr;}.prow.phead{display:none}.prow .ptext{grid-column:1/-1}.prow .prab{grid-column:1/-1}.prow .ptotal{grid-column:1/-1;font-weight:600}}
/* Tabellen */
.tblwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.tblbar{display:flex;gap:.5rem;align-items:center;padding:.6rem .9rem;font-size:.86rem;border-bottom:1px solid var(--line);background:var(--surface)}
.tblbar .btn.small{box-shadow:none}
.tblscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
table.tbl th{text-align:left;font-weight:600;font-size:.74rem;color:var(--muted);padding:.6rem .8rem;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;background:var(--card);text-transform:uppercase;letter-spacing:.05em}
table.tbl th.sorted{color:var(--accent)}
table.tbl tr.filters th{padding:.25rem .5rem;cursor:default;position:static;background:var(--surface)}
table.tbl tr.filters input{min-height:32px;padding:.25rem .5rem;font-size:.84rem;width:100%}
table.tbl td{padding:.6rem .8rem;border-bottom:1px solid var(--line);vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.r,table.tbl th.r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.tbl tr.click{cursor:pointer}table.tbl tr.click:hover td{background:var(--surface)}
table.tbl td .badge{margin:0}
table.tbl td a{color:var(--accent)}
@media (max-width:860px){table.tbl{font-size:.88rem}table.tbl td,table.tbl th{padding:.5rem .5rem}}
/* Planung (Wochenübersicht) */
.plan{user-select:none;display:grid;grid-template-columns:130px repeat(7,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.pcell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:.3rem;min-height:70px;position:relative;display:flex;flex-direction:column;gap:.25rem}
.pcell:nth-child(8n){border-right:0}
.pcell.phead{min-height:0;background:var(--surface);font-weight:600;font-size:.82rem;padding:.45rem .3rem}
.pcell.pname{background:var(--surface);font-size:.88rem}
.pcell.today{background:#f1faf6}.pcell.phead.today{color:var(--accent)}
.pcell.over{outline:2px dashed var(--accent);outline-offset:-2px}
.padd{margin-top:auto;align-self:flex-end;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:.1rem .35rem;border-radius:4px;opacity:.5}
.pcell:hover .padd{opacity:1}.padd:hover{background:var(--accent-soft);color:var(--accent)}
.tchip{user-select:none;-webkit-user-select:none;-webkit-user-drag:element;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:6px;padding:.25rem .4rem;font-size:.8rem;cursor:pointer;line-height:1.3}
.tchip.frei{background:#eceef0;border-left-color:#8a939c}.tchip.info{background:var(--warn-soft);border-left-color:var(--warn)}
.tchip.dringend{border-left-color:var(--danger)}
.tchip.drag{opacity:.4}.tchip .ts{color:var(--muted);font-size:.75rem}
.ulist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.4rem}
.pday{border-bottom:1px solid var(--line);padding:.4rem 0}.pdayh{display:flex;align-items:center;gap:.5rem;padding:.2rem 0}.pdayh.today b{color:var(--accent)}
.pday .tchip{margin:.2rem 0;font-size:.9rem}
/* Stundenraster (Zeit, Planung) */
.tg{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;user-select:none;-webkit-user-select:none;background:var(--card);box-shadow:var(--shadow)}
.tg-scroll{overflow:auto;max-height:calc(100vh - 250px);position:relative;-webkit-overflow-scrolling:touch}
.tg-top{position:sticky;top:0;z-index:5;background:var(--card)}
.tg-head,.tg-all,.tg-body{display:grid;min-width:min-content}
.tg-head>div:first-child,.tg-all>.tg-gut{position:sticky;left:0;background:var(--card);z-index:2}
.tg-ch{padding:.45rem .4rem;border-left:1px solid var(--line);border-bottom:1px solid var(--line);font-weight:600;font-size:.86rem;background:var(--surface);text-align:center;line-height:1.25}
.tg-ch.today{color:var(--accent)}
.tg-sub{font-weight:400;color:var(--muted);font-size:.76rem}
.tg-all{border-bottom:2px solid var(--line)}
.tg-allc{border-left:1px solid var(--line);padding:2px;min-height:26px;display:flex;flex-direction:column;gap:2px}
.tg-gut{position:sticky;left:0;z-index:3;background:var(--card);font-size:.7rem;color:var(--muted);text-align:right;padding-right:.35rem}
.tg-all .tg-gut{padding-top:.35rem}
.tg-body .tg-gut{position:sticky;left:0}
.tg-hour{position:absolute;right:.35rem;transform:translateY(-.5em)}
.tg-hour:first-child{transform:none}
.tg-col{position:relative;border-left:1px solid var(--line);cursor:cell;touch-action:pan-x pan-y}
.tg-col.today{background:#f6fcf9}
.tg-col.over{outline:2px dashed var(--accent);outline-offset:-2px}
.tg-line{position:absolute;left:0;right:0;border-top:1px solid var(--line);pointer-events:none}
.tg-line.half{border-top-style:dotted;opacity:.6}
.tg-now{position:absolute;left:0;right:0;border-top:2px solid var(--danger);z-index:3;pointer-events:none}
.tg-ev{position:absolute;z-index:2;background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:6px;padding:1px 4px;font-size:.78rem;line-height:1.25;overflow:hidden;cursor:pointer;color:var(--text);box-shadow:0 0 0 1px rgba(255,255,255,.8)}
.tg-ev .tt{font-weight:550;overflow:hidden;text-overflow:ellipsis}
.tg-ev .ts{color:var(--muted);font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tg-ev .tg-time{color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.tg-ev.tg-evall{position:static}
.tg-ev.dragging{opacity:.75;z-index:6;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.tg-ev.plan{background:repeating-linear-gradient(135deg,#fff,#fff 6px,#eef6f1 6px,#eef6f1 12px);border-left-style:dashed;color:var(--muted)}
.tg-ev.frei{background:#eceef0;border-left-color:#8a939c}.tg-ev.info{background:var(--warn-soft);border-left-color:var(--warn)}
.tg-ev.dringend{border-left-color:var(--danger)}
.tg-ev.absenz{background:#eef0f6;border-left-color:#6b7499}
.tg-ev.done{border-left-color:#8a939c}
.tg-rs{position:absolute;left:0;right:0;bottom:0;height:7px;cursor:ns-resize}
.tg-ghost{position:absolute;left:2px;right:2px;background:rgba(15,138,99,.15);border:1px dashed var(--accent);border-radius:6px;font-size:.75rem;padding:1px 4px;color:var(--accent);z-index:4;pointer-events:none}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--radius-s);overflow:hidden;background:var(--card);box-shadow:var(--shadow)}
.seg button{border:0;background:transparent;padding:.4rem .8rem;min-height:38px;cursor:pointer;font-weight:550;color:var(--muted)}
.seg button+button{border-left:1px solid var(--line)}
.seg button.active{background:var(--accent-soft);color:var(--accent-soft-ink)}
table.tbl.stl td{padding:.25rem .3rem}
table.tbl.stl input,table.tbl.stl select{font-size:.88rem}
dialog .tblscroll{max-height:40vh;overflow:auto}
/* Timer-Leiste */
.timerbar{position:fixed;left:50%;transform:translateX(-50%);bottom:1rem;z-index:40;background:var(--nav-bg);color:#fff;border-radius:999px;padding:.45rem .6rem .45rem 1rem;display:flex;align-items:center;gap:.7rem;box-shadow:var(--shadow-2);max-width:calc(100% - 2rem);font-size:.9rem}
.timerbar .dur{font-variant-numeric:tabular-nums;font-size:1.05rem}
.timerbar .tt{color:#cfe9df;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.timerbar .btn.small{background:var(--danger);color:#fff;border-color:transparent;box-shadow:none}
.timerbar .pulse{width:10px;height:10px;border-radius:50%;background:#ff6b6b;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:860px){.timerbar{bottom:calc(4.4rem + env(safe-area-inset-bottom));left:.75rem;right:.75rem;transform:none;max-width:none;border-radius:14px}.has-timer main{padding-bottom:9rem}.has-timer .toast{bottom:8.5rem}}
@media (min-width:861px){.timerbar{left:calc(var(--nav-w) + (100% - var(--nav-w))/2)}.has-timer .toast{bottom:4.6rem}}

/* ===== Direkt anpassen (1.5): Ctrl halten / F2 / Stift-Knopf markiert Änderbares, Klick öffnet den Schnell-Dialog ===== */
.editbtn{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.3rem .7rem;box-shadow:var(--shadow);cursor:pointer}
.editbtn .icon{width:15px;height:15px}
.editbtn:hover{color:var(--text)}
.editbtn.active{background:var(--accent);border-color:var(--accent);color:#fff}
@media (max-width:860px){.editbtn{background:transparent;border-color:rgba(255,255,255,.25);color:#fff;box-shadow:none;padding:.35rem .5rem}.editbtn span{display:none}.editbtn.active{background:var(--accent-2);border-color:var(--accent-2)}}
body.ws-edit [data-edit]{outline:1.5px dashed var(--accent);outline-offset:-1px;border-radius:5px;cursor:pointer;background-image:linear-gradient(var(--accent-soft),var(--accent-soft))}
body.ws-edit [data-edit]:hover{outline-style:solid;outline-width:2px}
body.ws-edit .hero [data-edit]{background-image:none;outline-color:#fff}
.ed-only{display:none;align-items:center;font-size:.74rem;font-weight:600;padding:.1rem .5rem;margin-top:.25rem;color:var(--accent-soft-ink)}
body.ws-edit .ed-only{display:inline-flex}
dialog.qe{max-width:460px}
.qe-fields{display:grid;gap:.7rem}
.qe-old{font-size:.78rem;color:var(--muted);margin-top:.2rem}
.qe-hint{font-size:.82rem;color:var(--warn);background:var(--warn-soft);border-radius:9px;padding:.5rem .7rem;margin:.9rem 0 0}

/* ===== 1.6: Einheiten-Liste, Foto-Beschrieb, Fotobericht ===== */
.chips-edit{display:flex;flex-wrap:wrap;gap:.4rem}
.chip-edit{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.25rem .3rem .25rem .7rem;font-size:.9rem}
.chip-edit button{all:unset;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--muted);font-size:.75rem}
.chip-edit button:hover{background:var(--line);color:var(--text)}
.fotogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}
.foto{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.foto:hover,.foto:focus-visible{border-color:var(--accent)}
.foto img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.foto .cap{font-size:.76rem;line-height:1.25;padding:.3rem .45rem;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.foto .cap.leer{color:var(--muted)}
.foto-gross{background:var(--surface);border-radius:10px;display:grid;place-items:center;overflow:hidden}
.foto-gross img{max-width:100%;max-height:55vh;display:block}
.bericht-fotos{display:grid;gap:.5rem}
.bf{display:grid;grid-template-columns:auto 96px 1fr auto;gap:.6rem;align-items:start;padding:.5rem;border:1px solid var(--line);border-radius:10px}
.bf.aus{opacity:.45}
.bf img{width:96px;height:96px;object-fit:cover;border-radius:8px;display:block}
.bf-chk{display:grid;place-items:center;min-height:96px}.bf-chk input{width:20px;height:20px}
.bf-ord{display:flex;flex-direction:column;gap:.3rem}
@media (max-width:560px){.bf{grid-template-columns:auto 72px 1fr}.bf img{width:72px;height:72px}.bf-ord{grid-column:1/-1;flex-direction:row;justify-content:flex-end}.bf-chk{min-height:72px}}

/* ===== 1.7: Diktieren/Aufräumen, Bericht-Assistent ===== */
.diktat{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem}
.diktat .btn{min-height:44px}.diktat .icon{width:18px;height:18px}
.dk-mic.an{background:#c62828;border-color:#c62828;color:#fff;animation:dkpuls 1.4s ease-in-out infinite}
@keyframes dkpuls{50%{box-shadow:0 0 0 6px rgba(198,40,40,.18)}}
.dk-hint{font-size:.82rem;color:var(--muted)}
.wz{max-width:720px;margin:0 auto}
@media (max-width:860px){.wz{padding-bottom:5.5rem}}
.wz h1{margin:.6rem 0 1rem}
.wz .field{margin-bottom:1rem}.wz .field input,.wz .field textarea{font-size:1.05rem}.wz .field input{min-height:48px}
.wz-schritte{display:flex;gap:.3rem;margin:.6rem 0 .5rem}
.wz-schritte button{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:.2rem;font-size:.72rem;color:var(--muted);cursor:pointer;padding:.2rem 0}
.wz-schritte button[disabled]{opacity:.4;cursor:default}
.wz-schritte i{font-style:normal;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);font-weight:600;font-size:.8rem}
.wz-schritte .ok i{background:var(--accent-soft);border-color:var(--accent-soft);color:var(--accent-soft-ink)}
.wz-schritte .an{color:var(--text);font-weight:600}.wz-schritte .an i{background:var(--accent);border-color:var(--accent);color:#fff}
.wz-schritte span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.wz-balken{height:4px;border-radius:2px;background:var(--line);overflow:hidden}.wz-balken i{display:block;height:100%;background:var(--accent);transition:width .2s}
.wz-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.6rem}
.wz-chips button{all:unset;box-sizing:border-box;cursor:pointer;padding:.55rem .9rem;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-size:.95rem}
.wz-chips button.an{background:var(--accent);border-color:var(--accent);color:#fff}
.wz-gross{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.6rem;margin:.4rem 0 1rem}.wz-gross .btn{min-height:56px;font-size:1.05rem}
.wz-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:.5rem}
.wz-foto{all:unset;box-sizing:border-box;cursor:pointer;position:relative;border-radius:10px;overflow:hidden;border:3px solid transparent;opacity:.45}
.wz-foto.an{border-color:var(--accent);opacity:1}
.wz-foto img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.wz-foto .haken{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:none;place-items:center;font-size:.85rem;font-weight:700}
.wz-foto.an .haken{display:grid}
.wz-titel{font-weight:600}
.wz-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:.6rem}.wz-sum div{background:var(--surface);border-radius:10px;padding:.6rem .8rem;display:flex;flex-direction:column}.wz-sum small{color:var(--muted);font-size:.75rem}
.wz-texte div{margin-bottom:.7rem}.wz-texte p{margin:.15rem 0 0;white-space:pre-line}
.wz-liste{display:grid;gap:.4rem;margin-bottom:1rem}
.wz-zeile{display:grid;grid-template-columns:64px 1fr auto;gap:.7rem;align-items:center;padding:.4rem;border:1px solid var(--line);border-radius:10px}
.wz-zeile img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.wz-zeile .t{display:flex;flex-direction:column;min-width:0;font-size:.9rem}.wz-zeile .t span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wz-zeile .o{display:flex;gap:.3rem}.wz-zeile .o .btn{min-width:40px;min-height:40px}
.wz-fuss{position:sticky;bottom:0;z-index:18;display:flex;align-items:center;gap:.6rem;padding:.7rem 0;margin-top:1rem;background:var(--bg,#f3f5f7);border-top:1px solid var(--line)}
.wz-fuss .btn{min-height:50px;font-size:1.02rem;padding:0 1.1rem}.wz-fuss .wz-weiter{flex:1;max-width:340px;margin-left:auto}
.wz-zahl{color:var(--muted);font-size:.85rem;margin-left:auto}.wz-zahl + .wz-weiter{margin-left:0}
@media (max-width:860px){body:has(.wz) nav.tabbar{display:none}.wz-schritte span{font-size:.66rem}.wz-fuss{position:fixed;left:0;right:0;margin:0;padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));background:var(--card)}}
.wz .foto-gross img{max-height:38vh}