:root{
  --bg:#E9EDF0;--surface:#FFFFFF;--ink:#14202B;--muted:#5B6875;--line:#C9D1D8;
  --signal:#FFC400;--on-signal:#14202B;--ok:#1E7D4F;--warn:#B8320F;--field:#F4F6F8;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#10171D;--surface:#1A242D;--ink:#EAF0F4;--muted:#94A2AE;--line:#2C3944;
  --signal:#FFC400;--on-signal:#14202B;--ok:#4CC38A;--warn:#FF7A5C;--field:#222E38;
}}
:root[data-theme="dark"]{
  --bg:#10171D;--surface:#1A242D;--ink:#EAF0F4;--muted:#94A2AE;--line:#2C3944;
  --signal:#FFC400;--on-signal:#14202B;--ok:#4CC38A;--warn:#FF7A5C;--field:#222E38;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.45 Barlow,"Segoe UI",Roboto,Arial,sans-serif}
h1,h2,.num,.tab{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ink);color:var(--bg);padding:12px 16px 0}
.head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;max-width:980px;margin:0 auto}
h1{font-size:30px;line-height:1;margin:0;font-weight:700;letter-spacing:.01em}
.stand{font-size:14px;opacity:.8;margin-left:auto}
nav{display:flex;gap:4px;max-width:980px;margin:10px auto 0;overflow-x:auto}
.tab{flex:1 0 auto;font-size:19px;font-weight:600;padding:9px 14px;border:0;border-radius:6px 6px 0 0;background:transparent;color:inherit;opacity:.7;cursor:pointer}
.tab[aria-selected="true"]{background:var(--bg);color:var(--ink);opacity:1}
main{max-width:980px;margin:0 auto;padding:16px}
.note{background:var(--surface);border-left:6px solid var(--signal);padding:10px 14px;margin:0 0 14px;font-size:15px}
.note.err{border-left-color:var(--warn)}
.note.stale{background:var(--warn);color:#fff;font-weight:600;font-size:18px;border-left-color:var(--warn)}
h2{font-size:24px;font-weight:700;margin:22px 0 8px}
h2:first-child{margin-top:0}
h2 small{font:400 15px Barlow,Arial,sans-serif;color:var(--muted);margin-left:8px}
ul{list-style:none;margin:0;padding:0}
.row{display:flex;gap:14px;align-items:stretch;background:var(--surface);margin-bottom:8px;border-radius:4px;overflow:hidden}
.qty{flex:0 0 112px;background:var(--signal);color:var(--on-signal);padding:10px 8px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.qty .num{font-size:44px;font-weight:700;line-height:.95}
.qty span{font-weight:600;font-size:15px}
.qty small{font-size:13px;opacity:.8}
.row.done .qty{background:var(--field);color:var(--ink)}
.row.late .qty{box-shadow:inset 0 -6px 0 var(--warn)}
.info{flex:1;min-width:0;padding:10px 0}
.info h3{margin:0;font-size:17px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.info p{margin:3px 0 0;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.info .why{color:var(--ink)}
.info .who{color:var(--ok);font-weight:600}
.side{display:flex;align-items:center;padding:10px 12px 10px 0}
button.act{font:600 17px Barlow,Arial,sans-serif;min-height:48px;padding:0 18px;border-radius:4px;border:2px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
button.ghost{background:transparent;color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
button[disabled]{opacity:.5;cursor:default}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal span{font-size:13px;color:var(--muted);text-align:center}
.cal button{min-height:54px;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--ink);font:500 15px Barlow,Arial,sans-serif;padding:4px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}
.cal button b{font:700 20px "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.cal button small{font-size:12px}
.cal button.has{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
.cal button.today{border:2px solid var(--ink)}
.cal button[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:1px}
.cal button[disabled]{opacity:.35;cursor:default}
.row[data-open]{cursor:pointer}
:root{--wue:#C8102E}
.cals{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:6px}
.calh{margin:0 0 6px;text-align:center;font:700 22px "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.calnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.calnav button{min-width:64px}
@media (max-width:700px){.cals{grid-template-columns:1fr}.cals .cal1:nth-child(2){display:none}}
.cal button.wue{background:var(--wue);color:#fff;border-color:var(--wue)}
.cal button.both{box-shadow:inset 0 -10px 0 var(--wue)}
.tab[data-view="wuerth"]{box-shadow:inset 0 -4px 0 var(--wue)}
.wrow{background:var(--surface);border-left:10px solid var(--wue);border-radius:4px;margin-bottom:8px;padding:12px 14px}
.wrow.done{opacity:.75}
.whead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.whead h3{margin:0;font:700 24px/1.2 "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.whead p{margin:2px 0 0;font-size:15px;color:var(--muted)}
.wtag{display:inline-block;background:var(--wue);color:#fff;font:700 15px "Barlow Condensed","Arial Narrow",Arial,sans-serif;padding:1px 8px;border-radius:3px;margin-right:8px;letter-spacing:.04em;vertical-align:3px}
.wtot{text-align:right;font-size:15px;color:var(--muted)}
.wtot .num{display:block;font-size:44px;font-weight:700;line-height:.95;color:var(--ink)}
.wsizes{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.wsize{flex:1 1 250px;background:var(--field);border-radius:4px;padding:10px 12px}
.wsize h4{margin:0 0 6px;font:700 26px "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.wsize dl{margin:0 0 6px;font-size:16px}
.wsize dd.wumk{font:700 34px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.wsize p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.wsize p.wwarn{color:var(--warn);font-weight:600}
.wact{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.wform input{font-size:22px;min-height:52px;width:180px}.wform input[type="date"]{width:220px}

dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 14px;font-size:15px}
dl.main{font-size:24px;gap:10px 16px}
dialog input{font-size:24px;min-height:56px;width:170px}
dialog label{font-size:15px}
dialog button.act,dialog .names button{min-height:56px;font-size:19px;padding:0 22px}
.big{font-size:84px}
.more{margin:0 0 14px}.more summary{cursor:pointer;color:var(--muted);font-size:15px;padding:4px 0 8px}
dt{color:var(--muted)}dd{margin:0;font-weight:600;text-align:right}
#slip{display:none}
.big{font:700 64px/1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;margin:6px 0 10px}
@media print{
  header,main,dialog{display:none!important}
  :root{padding:0}
  body{background:#fff;color:#000;font:14pt/1.4 Arial,sans-serif}
  #slip{display:block}
  .slip{page-break-after:always;padding:8mm}
  .slip h1{font:700 60pt/1 Arial,sans-serif;margin:0 0 6mm;border-bottom:3pt solid #000;padding-bottom:4mm}
  .slip table{width:100%;border-collapse:collapse;margin:6mm 0}
  .slip th,.slip td{border:1pt solid #000;padding:2.5mm;text-align:left;vertical-align:top}
  .slip td.n{text-align:right;font-weight:700;font-size:16pt;white-space:nowrap}
  .slip th{font-size:10pt}.slip th.n{text-align:right}
  .slip td{font-size:11pt}.slip td.bcc{font-size:9pt;text-align:center}
  .slip svg.bc{max-width:55mm;height:14mm;display:block;margin:0 auto 1mm}
  .slip p{margin:2mm 0}
}
.packed{margin-top:22px}
.packed summary{font:700 20px "Barlow Condensed","Arial Narrow",Arial,sans-serif;cursor:pointer;padding:10px 0}
.mix{border:2px dashed var(--line);border-radius:6px;padding:8px 8px 0;margin-bottom:8px}
.mixhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 6px 10px}
.mixhead h3{margin:0;font:700 21px "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.mixhead p{margin:2px 0 0;font-size:14px;color:var(--muted)}
#mixRows input{width:140px}
.grp{background:var(--surface);border-radius:4px;margin-bottom:8px}
.grp>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer;padding:14px 16px;font:700 22px "Barlow Condensed","Arial Narrow",Arial,sans-serif}
.grp>summary small{font:400 15px Barlow,Arial,sans-serif;color:var(--muted)}
.grp[open]>summary{border-bottom:1px solid var(--line)}
.grp h4{margin:12px 16px 6px;font:600 15px Barlow,Arial,sans-serif;color:var(--muted)}
.grp ul{padding:0 8px}
.grp .art{background:var(--field)}
.sub>summary{cursor:pointer;padding:10px 16px;font:600 15px Barlow,Arial,sans-serif;color:var(--muted)}
.grp .art input,.grp .art select{background:var(--surface)}
.lateTxt{color:var(--warn)!important;font-weight:600}
.empty{background:var(--surface);padding:22px 16px;border-radius:4px;font-size:17px}
.art{background:var(--surface);margin-bottom:8px;border-radius:4px;padding:12px 14px}
.art h3{margin:0;font-size:16px;font-weight:600}
.art p{margin:2px 0 8px;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.fields{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.art.dirty{outline:3px solid var(--signal);outline-offset:-3px}
.art .hint{display:none;font-size:14px;color:var(--warn);font-weight:600;align-self:center}
.art.dirty .hint{display:inline}
label{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:3px}
input,select{font:500 17px Barlow,Arial,sans-serif;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:4px;padding:9px 10px;min-height:44px;width:150px;max-width:100%}
input.wide{width:100%}
.set{background:var(--surface);padding:14px;border-radius:4px;margin-bottom:10px}
.set p{margin:8px 0 0;font-size:14px;color:var(--muted)}
dialog{border:0;border-radius:6px;padding:20px;background:var(--surface);color:var(--ink);width:min(600px,94vw)}
dialog::backdrop{background:rgba(10,16,22,.6)}
dialog h2{margin:0 0 4px}
dialog p{margin:0 0 14px;color:var(--muted);font-size:15px}
#dlgSub{color:var(--ink);font:700 34px/1.1 "Barlow Condensed","Arial Narrow",Arial,sans-serif;margin:2px 0 4px}
.qrow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
dialog p.limit{margin:0 0 6px;color:var(--warn);font-weight:600;font-size:17px;line-height:1.35;flex:1 1 150px}
#dlgDim{font-size:16px;color:var(--muted);margin:0}
#dlgInfo{margin-top:14px}
#dlgTitle{font:600 15px Barlow,Arial,sans-serif;color:var(--muted);margin:0}
.names{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 16px}
.names button{min-height:48px;padding:0 16px;font:600 17px Barlow,Arial,sans-serif;border:2px solid var(--line);background:var(--field);color:var(--ink);border-radius:4px;cursor:pointer}
.names button[aria-pressed="true"]{border-color:var(--ink);background:var(--signal);color:var(--on-signal)}
.dlg-act{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media (max-width:560px){
  .row{flex-wrap:wrap;gap:0}
  .qty{flex-basis:92px}.qty .num{font-size:36px}
  .info{flex:1 1 55%;padding:10px 12px}
  .side{flex:1 1 100%;padding:0 12px 12px}.side button{width:100%}
  h1{font-size:26px}
}

/* ---------- Optik (Vorschlag 3: Karten wie der Urlaubsplaner, dunkle Kopfzeile) ---------- */
:root{--bg:#eef0f6;--surface:#fff;--ink:#1a2233;--muted:#5f6b7d;--line:#dfe3ee;--signal:#3d5bd9;--on-signal:#fff;--ok:#2e7d4f;--warn:#c0392b;--field:#f5f6fa;--blue:#1f4e8c;--pill:#e3e8fb;--pilltext:#2d4fc7;--wue:#C8102E;--wuepill:#f8d7da;--wuetext:#8f1d1d;--mix:#6d4fc2;--mixpill:#ece6fb;--mixtext:#4b2fa3;--head:#14202B;--onhead:#fff;--headmuted:#cbd3dc;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#eef0f6;--surface:#fff;--ink:#1a2233;--muted:#5f6b7d;--line:#dfe3ee;--signal:#3d5bd9;--on-signal:#fff;--ok:#2e7d4f;--warn:#c0392b;--field:#f5f6fa;--blue:#1f4e8c;--pill:#e3e8fb;--pilltext:#2d4fc7;--wue:#C8102E;--wuepill:#f8d7da;--wuetext:#8f1d1d;--mix:#6d4fc2;--mixpill:#ece6fb;--mixtext:#4b2fa3;--head:#14202B;--onhead:#fff;--headmuted:#cbd3dc;color-scheme:light}}
:root[data-theme="dark"]{--bg:#eef0f6;--surface:#fff;--ink:#1a2233;--muted:#5f6b7d;--line:#dfe3ee;--signal:#3d5bd9;--on-signal:#fff;--ok:#2e7d4f;--warn:#c0392b;--field:#f5f6fa;--blue:#1f4e8c;--pill:#e3e8fb;--pilltext:#2d4fc7;--wue:#C8102E;--wuepill:#f8d7da;--wuetext:#8f1d1d;--mix:#6d4fc2;--mixpill:#ece6fb;--mixtext:#4b2fa3;--head:#14202B;--onhead:#fff;--headmuted:#cbd3dc;color-scheme:light}
body{font:400 15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
h1,h2,.num,.tab,.big,#dlgSub,.calh,.wsize h4,.whead h3,.wtot .num,.wsize dd.wumk,.packed summary,.grp>summary,.mixhead h3,.cal button b,.wtag{font-family:inherit}
header{display:flex;align-items:center;gap:18px;background:var(--head);color:var(--onhead);border-bottom:0;padding:8px 20px}
header .head{display:contents}
h1{font-size:17px;font-weight:600;color:var(--headmuted);letter-spacing:0;order:0;white-space:nowrap}
h1::before{content:"TDMA";font-weight:800;font-size:19px;color:var(--onhead);margin-right:12px;letter-spacing:.02em}
nav{order:1;flex:1;margin:0;gap:4px;overflow-x:auto}
.stand{order:2;margin-left:auto;color:var(--headmuted);font-size:13px}
.tab{flex:0 0 auto;font-size:14px;font-weight:600;padding:7px 12px;border-radius:7px;opacity:.8;color:var(--onhead)}
.tab[aria-selected="true"]{background:var(--surface);color:var(--head);opacity:1}
.tab[data-view="wuerth"]{box-shadow:none}
.tab[data-view="wuerth"]::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--wue);margin-right:7px;vertical-align:1px}
main{max-width:1180px;padding:18px 20px}
.set,.row,.wrow,.grp,.empty,.art,.mix{border:1px solid var(--line);border-radius:10px;box-shadow:0 1px 2px rgba(20,30,60,.04)}
.grp .art{box-shadow:none}
.qty{background:var(--pill);color:var(--pilltext);flex-basis:120px}
.qty .num{font-size:36px;font-weight:800}
.row.late .qty{box-shadow:inset 0 -5px 0 var(--warn)}
.row.done .qty{background:var(--field);color:var(--ink)}
button.act{background:var(--signal);border-color:var(--signal);color:#fff;border-radius:7px;font:600 15px "Segoe UI",system-ui,Arial,sans-serif;min-height:42px}
button.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
h2{font-size:18px;font-weight:700;margin:20px 0 8px}
h2 small{font-size:13px}
.calnav{background:var(--blue);color:#fff;border-radius:10px 10px 0 0;padding:8px 10px;margin-bottom:0}
.calnav button{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);min-height:36px;font-size:14px;min-width:56px}
.calnav button[disabled]{opacity:.4}
.cals{background:var(--surface);border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;padding:12px 14px 14px;gap:26px;margin-bottom:10px}
.calh{font-size:16px;font-weight:700}
.cal{gap:3px}
.cal span{font-size:12px}
.cal button{border:1px solid var(--line);border-radius:5px;background:var(--surface);min-height:54px;font-size:13px;font-weight:500}
.cal button b{font-size:15px;font-weight:600}
.cal button.frei:not(.has):not(.wue){background-image:repeating-linear-gradient(135deg,transparent 0 5px,rgba(30,40,70,.06) 5px 6px)}
.cal button.has{background:var(--pill);color:var(--pilltext);border-color:#c5cdf3}
.cal button.wue{background:var(--wuepill);color:var(--wuetext);border-color:#eab3b8}
.cal button.both{box-shadow:inset 0 -8px 0 var(--wue)}
.cal button.today{border:2px solid var(--pilltext)}
.cal button[aria-pressed="true"]{outline:2px solid var(--pilltext);outline-offset:1px}
.wrow{border-left:6px solid var(--wue)}
.wtag{border-radius:999px;font-size:12px;padding:2px 9px;vertical-align:2px}
.wsize{border-radius:8px}
.wtot .num{font-size:34px;font-weight:800;color:var(--pilltext)}
.wsize dd.wumk{font-size:30px;font-weight:800}
input,select{border-radius:7px;background:var(--surface);font-family:inherit;font-size:15px}
label{font-size:12px}
dialog{border-radius:12px}
#dlgSub{font-size:24px;font-weight:700}
dl.main{font-size:19px}
.names button{border-radius:7px;font-family:inherit}
.names button[aria-pressed="true"]{background:var(--pill);color:var(--pilltext);border-color:var(--pilltext)}
.note{border-radius:8px;border:1px solid var(--line);border-left:5px solid var(--signal)}
.note.err{border-left-color:var(--warn)}
.big{font-weight:800}
/* Mischkarton: eigene Farbe, überall gleich gekennzeichnet */
.mixtag{display:inline-block;background:var(--mix);color:#fff;font:700 11px/1.5 "Segoe UI",system-ui,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px;border-radius:999px;opacity:1}
.mixtag.big{font-size:12px;margin-right:10px;vertical-align:2px}
.qty.misch{background:var(--mixpill);color:var(--mixtext)}
.qty.misch .mixtag{margin-top:4px}
.row.mixrow{border-left:6px solid var(--mix)}
.row.done.mixrow .qty.misch{background:var(--mixpill);color:var(--mixtext)}
.mix{border:1px solid #d6cbf3;border-left:6px solid var(--mix);background:var(--mixpill)}
.mix>ul{padding:0 8px}
.mix .row{box-shadow:none}
.mixhead h3{color:var(--mixtext)}
.mix .act{background:var(--mix);border-color:var(--mix)}
@media (max-width:700px){header{flex-wrap:wrap;gap:8px 12px}nav{order:5;flex:1 1 100%}h1::before{margin-right:8px}}

/* Hilfe */
.help h2{margin:0 0 10px}
.hsec{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.hsec>summary{cursor:pointer;padding:12px 16px;font-weight:700;font-size:16px;list-style:none;display:flex;align-items:center;gap:10px}
.hsec>summary::before{content:"▸";color:var(--muted);font-size:14px}
.hsec[open]>summary::before{content:"▾"}
.hsec>div{padding:0 16px 12px;font-size:15px}
.hsec p{margin:6px 0}
.hsec ul{list-style:disc;padding-left:22px;margin:4px 0}
.hsec li{margin:4px 0}
.hsec.admin{border-left:6px solid var(--signal);margin-bottom:16px}
.hsec.admin>summary{font-size:17px}
.hsec.admin .hsec{background:var(--field)}
.cal .frl{font-size:10px;color:var(--muted)}
.row.etik .lmsg{color:var(--muted)}.row.etik .lmsg.ok{color:var(--ok);font-weight:600}.row.etik .lmsg.err{color:var(--warn);font-weight:600}
.row.etik .info h3{-webkit-line-clamp:3}
.labelbox{background:var(--field);border-radius:8px;padding:10px 12px;margin:0 0 14px}
.labelbox .fields{align-items:center}
.labelbox p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.labelbox p.ok{color:var(--ok);font-weight:600}
.labelbox p.err{color:var(--warn);font-weight:600}
.namehint{margin:0 0 10px;font-size:14px;color:var(--muted)}
.hk{display:inline-block;padding:0 8px;border-radius:5px;font-weight:600}
.hk.has{background:var(--pill);color:var(--pilltext)}
.hk.wue{background:var(--wuepill);color:var(--wuetext)}