/* Predator One: Gestaltung.
   Teil 1 ist der Stilblock aus dem freigegebenen Entwurf (20_Notizen/Projekte/Predator-One/Entwurf/Main.dc.html)
   unveraendert uebernommen. Teil 2 ergaenzt nur, was der echte Dienst braucht: Klassen statt der Inline-Stile
   des Entwurfs (die CSP verbietet style-Attribute), Anmeldeseite, Rueckfrage-Fenster, Bearbeiten-Felder und
   Tippflaechen von 44 px am Handy. Werte dort stammen aus Teil 1. */

/* Instrument Sans, variable Schrift (Breite 75-100 %, Gewicht 400-700), SIL Open Font License, siehe /schrift/OFL.txt */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/schrift/instrument-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/schrift/instrument-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Teil 1: Entwurf, unveraendert ===== */
body{margin:0;background:oklch(1 0 0)}
.root{
  --bg:oklch(1 0 0);--surface:oklch(0.975 0.004 262);--surface-2:oklch(0.955 0.006 262);
  --line:oklch(0.915 0.006 262);--line-strong:oklch(0.86 0.008 262);
  --ink:oklch(0.21 0.018 262);--ink-2:oklch(0.36 0.018 262);--muted:oklch(0.5 0.016 262);
  --accent:oklch(0.45 0.16 262);--accent-soft:oklch(0.955 0.025 262);
  --warn:oklch(0.47 0.1 70);--warn-soft:oklch(0.955 0.06 88);
  --bad:oklch(0.5 0.17 25);--bad-soft:oklch(0.955 0.03 25);
  --ok:oklch(0.46 0.1 155);--ok-soft:oklch(0.955 0.035 155);
  --cream:oklch(0.935 0.028 85);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --mono:"Instrument Sans",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;font-size:14px;line-height:1.5;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased;
}
.po{container-type:inline-size;min-height:100vh}
.root *{box-sizing:border-box}
.root button,.root input,.root select{font:inherit;color:inherit}
.root button{cursor:pointer}
.root :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-variant-numeric:tabular-nums lining-nums;font-weight:500}

/* Kopfzeile */
.top{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding:20px clamp(16px,4vw,48px) 0;border-bottom:1px solid var(--line)}
.logo{height:26px;width:auto;display:block}
.tabs{display:flex;gap:4px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.tab{position:relative;background:none;border:0;padding:12px 14px 16px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .18s var(--ease)}
.tab:hover{color:var(--ink)}
.tab::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)}
.tab.on{color:var(--ink)}
.tab.on::after{transform:scaleX(1)}
.tab .count{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:6px}
.who{display:flex;align-items:center;gap:12px;padding-bottom:12px;color:var(--muted);font-size:13px}
.who b{color:var(--ink);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:6px;border:1px solid var(--line-strong);background:var(--bg);font-weight:500;transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.btn:hover{background:var(--surface);border-color:var(--ink-2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:oklch(1 0 0)}
.btn.primary:hover{background:var(--ink-2)}
.btn.small{min-height:32px;padding:0 12px;font-size:13px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn svg{width:16px;height:16px}

/* Seite */
.page{padding:32px clamp(16px,4vw,48px) 64px;animation:rise .32s var(--ease) both}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.h1{margin:0;font-size:34px;line-height:1.05;font-weight:650;font-stretch:78%;letter-spacing:-0.012em}
.lede{margin:8px 0 0;color:var(--ink-2);font-size:15px;max-width:62ch}
.lede .warnword{color:var(--warn);font-weight:600}
.split{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.main{flex:999 1 620px;min-width:0}
.aside{flex:1 1 400px;max-width:480px;min-width:0}

/* Druckschlange */
.qhead,.row{display:grid;grid-template-columns:24px 36px 52px minmax(170px,1.6fr) 56px minmax(118px,1fr) minmax(104px,.8fr) minmax(118px,.8fr) 60px;align-items:center;column-gap:12px}
.qhead{padding:0 12px 10px;font-size:12px;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line)}
.row{position:relative;padding:14px 12px;border-bottom:1px solid var(--line);border-radius:8px;background:var(--bg);transition:background .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease),opacity .2s var(--ease)}
.row:hover{background:var(--surface)}
.row.sel{background:var(--accent-soft)}
.row.dragging{opacity:.45;transform:scale(.985)}
.row.over{box-shadow:inset 0 2px 0 var(--accent)}
.row.flash{animation:flash 1.1s var(--ease)}
.row .open{position:absolute;inset:0;border:0;background:none;border-radius:8px;z-index:0}
.row > *:not(.open){position:relative;z-index:1;pointer-events:none}
.row .grip,.row .moves{pointer-events:auto}
.grip{display:grid;place-items:center;width:28px;height:44px;color:var(--muted);cursor:grab}
.grip:active{cursor:grabbing}
.grip svg{width:16px;height:16px}
.place{font-size:26px;font-weight:600;font-stretch:78%;color:var(--ink);letter-spacing:-0.01em;line-height:1}
.thumb{width:52px;height:52px;border-radius:6px;background:var(--cream);display:grid;place-items:center;font-weight:700;font-stretch:75%;font-size:15px;color:oklch(0.35 0.03 70);letter-spacing:.02em}
.thumb.olive{background:oklch(0.56 0.05 125);color:oklch(0.97 0.01 125)}
.title{font-size:16px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qty{font-size:17px;font-weight:600;text-align:right;line-height:1.2}
.qty small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.stage-name{font-size:13px;font-weight:500;margin-bottom:6px}
.bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.seg{height:4px;border-radius:2px;background:var(--line);transition:background .3s var(--ease)}
.seg.on{background:var(--ink)}
.date{font-size:14px;font-weight:500}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.chip svg{width:12px;height:12px}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.plain{background:var(--surface-2);color:var(--ink-2)}
.chip.accent{background:var(--accent-soft);color:var(--accent)}
.pay{display:flex;flex-direction:column;gap:4px;font-size:12px}
.pay span{display:flex;align-items:center;gap:6px;color:var(--ink-2);white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;flex:none;border:1.5px solid var(--muted)}
.dot.ok{background:var(--ok);border-color:var(--ok)}
.dot.open{background:var(--warn-soft);border-color:var(--warn)}
.moves{display:flex;gap:2px;justify-content:flex-end}
.icon{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:6px;background:none;color:var(--muted);transition:background .15s var(--ease),color .15s var(--ease)}
.icon:hover{background:var(--surface-2);color:var(--ink)}
.icon[disabled]{opacity:.25;pointer-events:none}
.icon svg{width:16px;height:16px}
.hint{margin-top:14px;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.hint svg{width:14px;height:14px}

/* Details */
.panel{border:1px solid var(--line);border-radius:12px;background:var(--bg);animation:slide .3s var(--ease) both}
.p-head{padding:20px 22px 16px;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:flex-start}
.p-head .thumb{width:60px;height:60px;font-size:17px}
.p-title{margin:0;font-size:22px;line-height:1.15;font-weight:650;font-stretch:80%}
.p-sub{color:var(--muted);font-size:13px;margin-top:4px}
.close{margin-left:auto}
.sec{padding:18px 22px;border-bottom:1px solid var(--line)}
.sec:last-child{border-bottom:0}
.h3{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--ink-2)}
.stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.stage{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:52px;padding:10px 7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:12.5px;line-height:1.2;text-align:left;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease)}
.stage:hover{border-color:var(--ink-2);color:var(--ink)}
.stage[disabled]{opacity:.5;cursor:not-allowed}
.stage[disabled]:hover{border-color:var(--line);color:var(--muted)}
.hinweis-stufe{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.stage i{display:block;width:100%;height:3px;border-radius:2px;background:var(--line);transition:background .3s var(--ease)}
.stage.done{color:var(--ink)}
.stage.done i{background:var(--ink)}
.stage.cur{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.kv{display:grid;grid-template-columns:auto 1fr auto;gap:10px 16px;align-items:center}
.kv dt{color:var(--muted);font-size:13px;white-space:nowrap}
.btn{white-space:nowrap}
.kv dd{margin:0;font-size:14px;font-weight:500}
.kv dd.soft{font-weight:400;color:var(--ink-2);white-space:nowrap}
.kv input{min-height:36px;border:1px solid var(--line-strong);border-radius:6px;padding:0 10px;background:var(--bg)}
.sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));border:1px solid var(--line);border-radius:8px;overflow:hidden}
.size{padding:8px 10px;border-right:1px solid var(--line)}
.size:last-child{border-right:0}
.size .l{font-size:12px;color:var(--muted)}
.size .n{font-size:19px;font-weight:600;font-stretch:85%;line-height:1.3}
.size.total{background:var(--surface)}
.note{font-size:13px;color:var(--ink-2);background:var(--surface);border-radius:8px;padding:10px 12px}
.price{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;align-items:center}
.price .lbl{font-size:14px}
.price .lbl small{display:block;color:var(--muted);font-size:12px}
.price .val{font-size:14px;font-weight:500;text-align:right}
.price .sum{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;font-weight:600}
.keep{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--ok-soft);color:var(--ok);font-size:13px}
.keep svg{width:14px;height:14px;flex:none}
.keep b{margin-left:auto;font-size:16px;font-weight:650;color:var(--ink)}
.private{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:-4px 0 12px}
.private svg{width:14px;height:14px;flex:none}
td.pos{color:var(--ok);font-weight:650}
.inv{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.inv:first-of-type{border-top:0;padding-top:0}
.inv .nr{font-weight:600}
.inv .what{flex:1;min-width:0;font-size:13px;color:var(--ink-2)}
.inv .what small{display:block;color:var(--muted)}
.files{display:flex;flex-direction:column;gap:8px}
.file{display:flex;align-items:center;gap:10px;font-size:13px;text-decoration:none;color:var(--ink);padding:8px 10px;border:1px solid var(--line);border-radius:8px;transition:background .15s var(--ease)}
.file:hover{background:var(--surface)}
.file svg{width:16px;height:16px;color:var(--muted)}
.file small{margin-left:auto;color:var(--muted)}
.log{list-style:none;margin:0;padding:0;position:relative}
.log::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line)}
.ev{position:relative;padding:0 0 16px 24px}
.ev:last-child{padding-bottom:0}
.ev::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:2px solid var(--line-strong)}
.ev.studio::before{border-color:var(--ink)}
.ev.ki::before{border-color:var(--accent)}
.ev.fresh{animation:fresh 1.4s var(--ease)}
.ev.fresh::before{border-color:var(--accent);background:var(--accent)}
.ev .meta{font-size:12px;color:var(--muted)}
.ev .line{font-size:14px}
.ev .line b{font-weight:600}
.ev .chg{font-size:13px;color:var(--ink-2);margin-top:2px}
.ev .chg s{color:var(--muted)}
.lock{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:12px;color:var(--muted)}
.lock svg{width:14px;height:14px;flex:none}

/* Zeitleiste */
.tl{border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.tl-in{min-width:880px}
.tl-weeks,.tl-row{display:grid;grid-template-columns:220px minmax(0,1fr)}
.tl-weeks{border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)}
.tl-weeks .w{display:grid;grid-template-columns:repeat(14,minmax(0,1fr))}
.tl-weeks .w span{padding:10px 0 10px 8px;border-left:1px solid var(--line)}
.tl-weeks .w b{display:block;color:var(--ink-2);font-weight:600;font-size:12px}
.tl-row{border-bottom:1px solid var(--line);min-height:64px}
.tl-row:last-child{border-bottom:0}
.tl-name{padding:12px 16px;display:flex;flex-direction:column;justify-content:center}
.tl-name .title{font-size:14px}
.tl-track{position:relative;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / 14) 100%}
.tl-bar{position:absolute;top:16px;height:32px;border-radius:6px;background:var(--surface-2);display:flex;align-items:center;justify-content:flex-start;padding:0 8px;transform-origin:left;animation:grow .7s var(--ease) backwards}
.tl-bar.done{background:var(--ok-soft)}
.tl-bar .end{font-size:12px;font-weight:600;color:var(--ink);background:var(--bg);border-radius:4px;padding:2px 6px;box-shadow:0 1px 2px oklch(0.2 0.02 262 / .08)}
.tl-bar.warn .end{color:var(--warn);background:var(--warn-soft)}
.tl-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--ink);opacity:.9}
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);z-index:2}
.tl-today span{position:absolute;top:-1px;left:6px;font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap}
/* Zeile "ohne Termin": uebernommene Altauftraege, deren Termin Predator Customs noch festlegt (kein Balken). */
.tl-ohne-row{background:var(--surface)}
.tl-ohne{list-style:none;margin:0;padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.tl-ohne li{display:flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.tl-ohne .titel{overflow-wrap:anywhere}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:18px;height:8px;border-radius:2px}

/* Geld */
.money-line{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:28px}
.money-line div{display:flex;flex-direction:column;gap:2px}
.money-line .big{font-size:34px;font-weight:600;font-stretch:78%;letter-spacing:-0.01em;line-height:1.1}
.money-line .lbl{font-size:13px;color:var(--muted)}
.tbl-wrap{border:1px solid var(--line);border-radius:12px;overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:820px}
th{text-align:left;font-size:12px;font-weight:500;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line)}
td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s var(--ease)}
tbody tr:hover{background:var(--surface)}
td.num,th.num{text-align:right}
td.num{font-weight:500}
td small{display:block;color:var(--muted);font-size:12px}
.ref{font-size:12px;color:var(--muted);margin-top:4px}
.ref b{color:var(--ink-2);font-weight:500}
.h2{margin:40px 0 12px;font-size:18px;font-weight:600}

/* Archiv */
.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line-strong);border-radius:8px;padding:0 12px;min-height:44px;max-width:420px;margin-bottom:20px;transition:border-color .15s var(--ease)}
.search:focus-within{border-color:var(--ink)}
.search input{border:0;outline:0;flex:1;min-width:0;background:none;font-size:14px}
.search svg{width:16px;height:16px;color:var(--muted)}

/* Neuer Auftrag */
.form{border:1px solid var(--line);border-radius:12px;padding:24px;margin-bottom:28px;animation:rise .3s var(--ease) both}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;font-weight:500;color:var(--ink-2)}
.field input,.field select{min-height:44px;border:1px solid var(--line-strong);border-radius:6px;padding:0 12px;background:var(--bg);transition:border-color .15s var(--ease)}
.field input:focus,.field select:focus{outline:0;border-color:var(--ink)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin:8px 0 12px}
.sgrid .field input{text-align:center;font-weight:500}
.check{font-size:13px;display:flex;gap:8px;align-items:center;margin-bottom:20px}
.check.ok{color:var(--ok)}.check.bad{color:var(--bad)}
.check svg{width:14px;height:14px;flex:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.actions .fine{font-size:12px;color:var(--muted);margin-left:4px;max-width:46ch}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:oklch(1 0 0);padding:12px 18px;border-radius:8px;font-size:13px;z-index:30;animation:toast .35s var(--ease) both;max-width:calc(100vw - 32px)}

@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes flash{0%{background:var(--accent-soft)}100%{background:var(--bg)}}
@keyframes fresh{0%{opacity:0;transform:translateY(-4px)}100%{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes toast{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* Handy */
@container (max-width:760px){
  .top{gap:12px;padding-top:14px}
  .logo{height:20px}
  .who{display:none}
  .tabs{order:3;flex-basis:100%;margin:0 -8px}
  .tab{padding:10px 10px 14px}
  .page{padding-top:22px}
  .h1{font-size:28px}
  .qhead{display:none}
  .row{grid-template-columns:28px 52px minmax(0,1fr) auto;grid-template-areas:"place thumb name qty" "place thumb stage stage" ". date date date" ". pay pay moves";row-gap:8px;padding:14px 4px}
  .row .grip{display:none}
  .row .place{grid-area:place;font-size:18px;align-self:start;padding-top:2px}
  .row .thumb{grid-area:thumb;align-self:start}
  .row .name{grid-area:name}
  .row .qty{grid-area:qty;align-self:start}
  .row .stg{grid-area:stage}
  .row .dt{grid-area:date;display:flex;gap:8px;align-items:center}
  .row .pay{grid-area:pay;flex-direction:row;flex-wrap:wrap;gap:4px 12px;min-width:0}
  .row .moves{grid-area:moves}
  .split{gap:0}
  .split.has-sel .main{display:none}
  .split:not(.has-sel) .aside{display:none}
  .aside{max-width:none;flex-basis:100%}
  .aside .panel{border-radius:10px}
  .stages{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
  .stage{font-size:11px;padding:8px 6px 6px}
  .money-line{gap:24px}
  .money-line .big{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .root *,.root *::before,.root *::after{animation:none !important;transition:none !important}
}

/* ===== Teil 2: Ergaenzungen fuer den Dienst (Werte aus Teil 1) ===== */
[hidden]{display:none !important}

/* Ersatz fuer die Inline-Stile des Entwurfs */
.qhead .r{text-align:right}
/* Endmarke rechts im Balken; ist der Balken schmaler als die Marke, ragt sie nach rechts in die freie Bahn
   (nie nach links aus dem Kasten). Balken, die fast am rechten Rand enden, richten sie stattdessen nach links aus. */
.tl-bar .end{position:relative;white-space:nowrap;margin-left:auto}
.tl-bar.rechts{justify-content:flex-end}
.legend i.l-ink{background:var(--ink)}
.legend i.l-offen{background:var(--surface-2)}
.legend i.l-warn{background:var(--warn-soft)}
.legend i.l-heute{background:var(--accent)}
.hint.breit{max-width:90ch}
.hint svg{flex:none}
td.leer{color:var(--muted)}
.note.flach{margin:0}
.note.nach{margin:10px 0 0}
.kv.neu{margin-top:12px;grid-template-columns:auto 1fr auto}
.kv.neu label{font-size:13px;color:var(--muted)}
.unter{margin-top:14px}

/* Kopfzeile: Abmelden */
.who .aus{color:var(--muted)}

/* Entwuerfe in der Druckschlange */
.row.entwurf .place{color:var(--muted)}
.row .grip.still{visibility:hidden}

/* Verlauf: Kopfzeile mit Kettenpruefung */
.lock.kopf{margin:0 0 6px}
.check.kette{margin:0 0 14px}

/* Notiz im Verlauf */
.notiz{margin:0 0 18px}
.notiz .field{margin-bottom:8px}
.notiz textarea{min-height:76px}
.notiz .actions{margin:0}
.log .chg{white-space:pre-wrap;overflow-wrap:anywhere}
@media (pointer:coarse){.notiz .btn{min-height:44px}}

/* Bearbeiten im Detail-Fenster */
.sec .fgrid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin-bottom:16px}
.sec .sgrid{margin-top:0}
.field textarea{min-height:88px;border:1px solid var(--line-strong);border-radius:6px;padding:10px 12px;background:var(--bg);resize:vertical;font:inherit;color:inherit;transition:border-color .15s var(--ease)}
.field textarea:focus{outline:0;border-color:var(--ink)}
.wahl{display:flex;flex-wrap:wrap;gap:8px 16px}
.wahl label{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:400;color:var(--ink)}
.wahl input{width:18px;height:18px;min-height:0;accent-color:var(--ink)}

/* Anmeldung */
.login{max-width:420px;margin:0 auto;padding:32px clamp(16px,4vw,48px) 64px;animation:rise .32s var(--ease) both}
.login .logo{height:32px;margin-bottom:28px}
.login .form{margin-bottom:0}
.login .fgrid{grid-template-columns:1fr}
.login .btn.primary{width:100%;justify-content:center;min-height:44px}
.fehler{margin:0 0 16px;font-size:13px;color:var(--bad)}
.lade{color:var(--muted);font-size:13px;padding:32px clamp(16px,4vw,48px)}

/* Rueckfrage vor Fertig, Storno und Freigabe: wie das Detail-Fenster */
dialog.frage{padding:0;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg);color:var(--ink);width:min(440px,calc(100vw - 32px));max-width:none}
dialog.frage[open]{animation:rise .24s var(--ease) both}
dialog.frage::backdrop{background:oklch(0.21 0.018 262 / .4)}
dialog.frage .p-head{padding:20px 22px 14px}
dialog.frage .sec p{margin:0 0 10px;color:var(--ink-2);font-size:14px}
dialog.frage .sec p:last-child{margin-bottom:0}
dialog.frage .actions{justify-content:flex-end}

.ruhig{animation:none !important}
.kv dd.ueber{color:var(--bad)}
.kv dd{min-width:0}
.kv dd.soft{white-space:normal}
/* Der Entwurf setzt .stage auf 12,5 px, doch ".root button{font:inherit}" ist spezifischer und machte daraus
   14 px: daher liefen die Stufen-Beschriftungen im Entwurf ueber. Hier gilt der beabsichtigte Wert. */
.root .stage{font-size:12.5px}
.size{padding:8px 7px}
.keep b{white-space:nowrap}
dialog.frage .btn{min-height:44px}

/* Touch-Geraete jeder Breite (Tablet): Tippflaechen mindestens 44 px */
@media (pointer:coarse){
  .btn,.btn.small{min-height:44px}
  .icon{width:44px;height:44px}
  .kv input{min-height:44px}
}

/* Handy: Tippflaechen mindestens 44 px, Abmelden bleibt sichtbar */
@container (max-width:760px){
  .who{display:flex;margin-left:auto;padding-bottom:0;gap:8px}
  .who .als{display:none}
  .btn,.btn.small{min-height:44px}
  .icon{width:44px;height:44px}
  .kv input{min-height:44px}
  .tab{min-height:44px}
  .kv.neu{grid-template-columns:1fr}
  .kv{grid-template-columns:auto 1fr}
  .kv > span{grid-column:1 / -1}
  .kv > span:empty{display:none}
  .root .stage{font-size:11px;font-stretch:80%;padding:8px 5px 6px}
  .row .title,.row .sub{white-space:normal}
  /* Tabellen werden am Handy zu Karten: jede Zelle mit ihrer Spaltenueberschrift, nichts liegt seitlich verborgen. */
  .tbl-wrap{overflow:visible}
  .tbl-wrap table{min-width:0}
  .tbl-wrap thead{display:none}
  .tbl-wrap tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding:14px 16px;border-bottom:1px solid var(--line)}
  .tbl-wrap tbody tr:last-child{border-bottom:0}
  .tbl-wrap td{display:block;padding:0;border:0;min-width:0}
  .tbl-wrap td:first-child,.tbl-wrap td[data-label=""],.tbl-wrap td[colspan]{grid-column:1 / -1}
  .tbl-wrap td:empty{display:none}
  .tbl-wrap td.num,.tbl-wrap th.num{text-align:left}
  .tbl-wrap td[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;font-weight:400;color:var(--muted)}
  .tbl-wrap td[data-label]:first-child:not([data-label=""])::before{display:none}
  /* Zeitleiste am Handy: Name ueber dem Balken, alle 14 Wochen in der Breite, jede zweite Woche beschriftet. */
  .tl{overflow:hidden}
  .tl-in{min-width:0}
  .tl-weeks,.tl-row{grid-template-columns:minmax(0,1fr)}
  .tl-weeks > span:first-child{display:none}
  .tl-weeks .w span{padding:8px 0 8px 3px;font-size:10px;white-space:nowrap}
  .tl-weeks .w b{display:none}
  .tl-weeks .w span:nth-child(even){color:transparent;border-left-color:transparent}
  .tl-name{padding:12px 12px 0}
  .tl-track{height:56px}
  .tl-bar{top:12px}
  .tl-bar .end{z-index:3}
  .tl-ohne{padding:10px 12px 12px;flex-direction:column;align-items:flex-start;gap:8px}
}
/* Handy um 375 px: mit zweistelligen Zaehlern (Archiv mit Altbestand) passen die vier Reiter sonst nicht ganz. */
@container (max-width:400px){
  .tabs{gap:2px}
  .tab{padding-left:8px;padding-right:8px}
}
@container (max-width:360px){
  .row{grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"place name qty" "place stage stage" ". date date" ". pay moves"}
  .row .thumb{display:none}
  .tabs{gap:0}
  .tab{padding:10px 5px 14px}
  .tab::after{left:5px;right:5px}
  .tab .count{margin-left:4px}
  .who b{display:none}
  .sec{padding:16px}
  .p-head{padding:16px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
  dialog.frage[open]{animation:none}
}

/* Zwischenbreiten (Tablet hochkant bis kleiner Laptop): Die Zeile des Entwurfs braucht ~860 px. Darunter fallen
   Griff und Vorschaubild weg (Ziehen geht weiter ueber die ganze Zeile, die Pfeile bleiben), der Rest rueckt zusammen. */
@container (min-width:761px) and (max-width:940px){
  .qhead,.row{grid-template-columns:36px minmax(120px,1.4fr) 52px minmax(104px,1fr) minmax(96px,.8fr) minmax(132px,.9fr) 56px;column-gap:10px}
  .qhead > :nth-child(1),.qhead > :nth-child(3),.row .grip,.row .thumb{display:none}
}

/* Dateien im Detail-Fenster */
.dgruppe + .dgruppe{margin-top:14px}
.dart{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted)}
.inv.datei{gap:10px}
.inv.datei .dico{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--surface-2);color:var(--ink-2)}
.inv.datei .dico svg{width:16px;height:16px}
.inv.datei .dname{display:block;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.inv.datei.alt{padding-left:8px}
.inv.datei.alt .dname{font-weight:400}
.inv.datei .btn{flex:none}
.aeltere{margin:2px 0 0}
.aeltere summary{display:flex;align-items:center;gap:6px;min-height:32px;font-size:13px;color:var(--ink-2);cursor:pointer;list-style:none}
.aeltere summary::-webkit-details-marker{display:none}
.aeltere summary:hover{color:var(--ink)}
.aeltere .chev{display:inline-grid;place-items:center;width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
.aeltere .chev svg{width:16px;height:16px}
.aeltere[open] .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.aeltere .chev{transition:none}}
@media (pointer:coarse){.aeltere summary{min-height:44px}}
.upl-wahl{margin:0;font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.upl{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.field input[type=file]{padding:9px 12px;font-size:13px;min-width:0}
.upl .btn{min-height:44px;justify-content:center}
a.btn{text-decoration:none;color:inherit}
a.btn.primary{color:oklch(1 0 0)}
.upl-status{color:var(--ink-2)}
@container (max-width:760px){
  .upl .btn{justify-content:center}
  .aeltere summary{min-height:44px}
  .inv.datei .btn{min-height:44px}
  .inv.datei{flex-wrap:wrap}
  .inv.datei .what{flex:1 1 calc(100% - 44px)}
  .inv.datei .btn{margin-left:42px}
}