/* TrackStar Soft-Panel (DESIGN.md + designsystem.md): grauer Grund, weiße Karten, Navy nur für die eine Hauptaktion. */
:root{
  --bg:#E9ECF0;--tray:#F6F7F9;--card:#FFFFFF;--ink:#16233C;--navy:#16233A;--on-navy:#FFFFFF;
  --label:#8A95A5;--faint:#BCC5D1;--ph:#C3CCD8;--field:#F1F3F6;--groove:#E3E6EA;--line:#E6EBF1;--tabline:#DCE1E8;
  --green:#22C55E;--blue:#2563EB;--orange:#F97316;--red:#DC2626;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,"Segoe UI",system-ui,sans-serif;
  --pill:0 1px 2px rgba(16,24,40,.10),0 3px 8px -4px rgba(16,24,40,.20);
  --cardsh:0 1px 2px rgba(16,24,40,.06),0 12px 24px -16px rgba(16,24,40,.35);
  --navysh:0 12px 22px -12px rgba(22,35,58,.75);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11151B;--tray:#181D25;--card:#1F2631;--ink:#E9EEF5;--navy:#DCE4F0;--on-navy:#11151B;
  --label:#8E9AAB;--faint:#4A5566;--ph:#4A5566;--field:#2A323E;--groove:#2A323E;--line:#2C3542;--tabline:#2C3542;
  --pill:0 1px 2px rgba(0,0,0,.4);--cardsh:0 1px 2px rgba(0,0,0,.4);--navysh:none;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11151B;--tray:#181D25;--card:#1F2631;--ink:#E9EEF5;--navy:#DCE4F0;--on-navy:#11151B;
  --label:#8E9AAB;--faint:#4A5566;--ph:#4A5566;--field:#2A323E;--groove:#2A323E;--line:#2C3542;--tabline:#2C3542;
  --pill:0 1px 2px rgba(0,0,0,.4);--cardsh:0 1px 2px rgba(0,0,0,.4);--navysh:none;color-scheme:dark}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{padding-top:env(safe-area-inset-top,0)}
.num{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

.app{max-width:560px;margin:0 auto;padding:12px 16px calc(170px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:12px}

/* Kopf */
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin:0 -6px}
.topbar a,.topbar button{display:flex;align-items:center;gap:2px;border:0;background:none;color:var(--ink);font-size:17px;font-weight:600;text-decoration:none;padding:8px 6px}
.topbar .more{font-size:22px;letter-spacing:1px;line-height:1;padding:8px 10px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:8px}
h1{font-size:28px;font-weight:800;letter-spacing:-.5px;margin:0;line-height:1.12;overflow-wrap:anywhere}
.head .icons{display:flex;gap:2px;margin-right:-8px}
.head .icons button{border:0;background:none;color:var(--ink);padding:8px}
.meta{font-size:15px;color:var(--label);font-weight:500;margin-top:-6px;display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}

/* Chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;margin:0 -2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:34px;padding:0 14px;border-radius:999px;border:0;background:var(--card);box-shadow:var(--pill);font-size:15px;font-weight:600;color:#5B6878}
.chip b{font-weight:500;color:var(--label);margin-left:4px}
.chip.on{background:var(--navy);color:var(--on-navy);box-shadow:none}
.chip.on b{color:inherit;opacity:.7}


/* Abschnittskopf + Karte */
.sh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px 0;min-height:36px}
.sh b{font-size:17px;font-weight:700;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh b .dot{vertical-align:2px}
.sh .cnt{font-size:15px;color:var(--ph);font-weight:500}
.sh .sum{font-size:14px;color:var(--label);font-weight:600}
.card{background:var(--card);border-radius:20px;box-shadow:var(--cardsh)}
.vpill{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 14px;border-radius:999px;border:0;background:var(--card);box-shadow:var(--pill);font-size:16px;font-weight:700}
.vpill small{font-size:13px;font-weight:600;color:var(--label)}
.vpill .chev{font-size:13px}

/* Zeilen (DsListRow) */
.row{display:flex;align-items:center;gap:12px;padding:11px 16px;min-height:58px;width:100%;border:0;background:none;text-align:left;text-decoration:none;color:inherit}
.card>.row+.row,.card>.row+.frow,.card>.frow+.row,.card>.frow+.frow{background:linear-gradient(var(--line),var(--line)) 16px 0/calc(100% - 16px) 1px no-repeat}
.w{flex:1;min-width:0}
.w div{font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
.w small{display:block;font-size:15px;color:var(--label);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.r{text-align:right;white-space:nowrap}
.r b{font-size:18px;font-weight:700}
.r b em{font-style:normal;font-size:13px;font-weight:600;color:var(--label);margin-left:2px}
.r small{display:block;font-size:13px;color:var(--label);font-weight:500}
.r .st{font-size:14px;color:var(--label);font-weight:500}
.chev{color:var(--faint);font-size:22px;line-height:1}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--navy);margin-right:8px;flex:none}
.sdot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;margin-right:7px;background:var(--faint)}
.sdot.aktuell{background:var(--green)}.sdot.neu{background:var(--blue)}.sdot.entwurf{background:var(--orange)}
.warn{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:6px;flex:none}
.empty{padding:22px 16px;text-align:center;color:var(--label);font-size:15px;line-height:1.45}
.hint{font-size:14px;color:var(--label);font-weight:500;padding:8px 6px 0;display:flex;align-items:center}
.linkrow{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:14px 16px;font-size:15px;font-weight:600;color:var(--blue);text-align:left}
.card>.linkrow{background:linear-gradient(var(--line),var(--line)) 16px 0/calc(100% - 16px) 1px no-repeat}
.labels{display:flex;flex-wrap:wrap;gap:6px}
.label{font-size:13px;font-weight:600;color:var(--label);background:var(--groove);border-radius:999px;padding:3px 10px}
.foot{font-size:13px;color:var(--label);padding:6px 4px 0;line-height:1.45}
.foot a{color:var(--label)}

/* Kennzahlen-Karte (Menge / Stunden / Diesel) */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:14px 16px}
.stats small{display:block;font-size:14px;color:var(--label);font-weight:500}
.stats b{font-size:22px;font-weight:800;letter-spacing:-.3px}
.stats b em{font-style:normal;font-size:13px;font-weight:700;color:var(--label);margin-left:2px}

/* Formular (DsFormSection / DsFormRow) */
.frow{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 16px}
.frow>label,.frow>.fl{flex:1;min-width:0;font-size:17px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:none;padding:0;text-align:left}
.frow>.fl small{display:block;font-size:14px;color:var(--label);font-weight:400}
.frow.lab>label{flex:none;width:112px;font-size:15px;font-weight:400;color:var(--label)}
.frow input,.frow select,.frow textarea{min-width:0;border:0;background:none;font-size:17px;font-weight:600;text-align:right;padding:6px 0;flex:1}
.frow input.n{flex:none;width:76px;background:var(--field);border-radius:12px;padding:8px 10px;font-variant-numeric:tabular-nums}
.frow textarea{text-align:left;resize:vertical;min-height:64px;font-weight:500}
.frow input::placeholder,.frow textarea::placeholder{color:var(--ph);font-weight:500}
.frow .u{font-size:13px;font-weight:600;color:var(--label);flex:none;min-width:22px}
.frow .x{border:0;background:none;color:var(--faint);font-size:20px;padding:4px 2px 4px 6px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-radius:10px}
.seg{display:flex;background:var(--groove);border-radius:999px;padding:3px;gap:2px;flex:1;min-width:0}
.seg button{flex:1;min-width:0;border:0;background:transparent;font-size:14px;font-weight:600;color:var(--label);padding:7px 2px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button.on{background:var(--card);color:var(--ink);font-weight:700;box-shadow:var(--pill)}
.bignum{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:18px 16px}
.bignum input{width:200px;border:0;background:none;font-size:44px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.bignum span{font-size:20px;font-weight:700;color:var(--label)}

/* Knöpfe */
.primary{height:52px;border:0;border-radius:999px;background:var(--navy);color:var(--on-navy);font-size:16.5px;font-weight:700;box-shadow:var(--navysh);width:100%}
.primary:disabled{background:var(--groove);color:var(--label);box-shadow:none}
.secondary{height:46px;border:0;border-radius:999px;background:var(--card);box-shadow:var(--pill);font-size:15.5px;font-weight:600;width:100%;color:var(--ink)}
.danger{border:0;background:none;color:var(--red);font-size:15px;font-weight:600;padding:12px;align-self:center}
.fab{position:fixed;right:20px;bottom:calc(90px + env(safe-area-inset-bottom,0));width:60px;height:60px;border-radius:20px;border:0;background:var(--navy);color:var(--on-navy);box-shadow:0 8px 20px rgba(22,35,60,.28);display:grid;place-items:center;z-index:5}
.fab svg{width:28px;height:28px;stroke-width:2.2}
.footer{position:fixed;left:0;right:0;bottom:0;padding:16px 16px calc(14px + env(safe-area-inset-bottom,0));background:linear-gradient(to bottom,transparent,var(--bg) 30%);z-index:7}
.footer>div{max-width:528px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.footer .note{font-size:14px;color:var(--label);font-weight:500;text-align:center;display:flex;justify-content:center;align-items:center}

/* Tab-Leiste */
.tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:48px;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--tabline);z-index:6}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--label);text-decoration:none;min-width:84px}
.tabbar a.on{color:var(--ink)}

/* Sheet */
.sheet-bg{position:fixed;inset:0;background:rgba(10,16,28,.35);z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:92vh;overflow-y:auto;background:var(--bg);border-radius:24px 24px 0 0;z-index:21;padding:8px 16px calc(20px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}
.sheet .grip{width:40px;height:5px;border-radius:3px;background:#CBD2DB;align-self:center;margin:2px 0 4px}
.sheet .stitle{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet .stitle h2{font-size:22px;font-weight:800;margin:0}
.close{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--card);box-shadow:var(--pill);font-size:17px;color:var(--label)}
.search{width:100%;height:46px;border:0;border-radius:999px;background:var(--card);box-shadow:var(--pill);padding:0 18px;font-size:17px}
.pick .row{min-height:52px}
.check{width:22px;height:22px;border-radius:50%;flex:none;border:1.5px solid var(--faint)}
.pick .sel .check{background:var(--navy);border-color:var(--navy)}
.quick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* Anmelden */
.login{display:flex;flex-direction:column;gap:14px;padding-top:40px}
.login p{color:var(--label);font-size:15px;line-height:1.45;margin:0}
.err{color:var(--red);font-size:15px;font-weight:600}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(100px + env(safe-area-inset-bottom,0));background:var(--navy);color:var(--on-navy);padding:10px 16px;border-radius:999px;font-size:15px;font-weight:600;z-index:30;max-width:calc(100% - 32px)}
.offline{font-size:14px;font-weight:500;color:var(--label);display:flex;align-items:center}
.sheet>*{flex-shrink:0}
.micbtn{position:fixed;right:20px;bottom:calc(96px + env(safe-area-inset-bottom,0));width:48px;height:48px;border-radius:50%;border:0;background:var(--card);box-shadow:var(--pill);color:var(--ink);display:grid;place-items:center;z-index:5}

/* ---------- Vereinfachte App (12.10.2026) ---------- */
.app{padding-bottom:calc(150px + env(safe-area-inset-bottom,0))}
.head .more,.topbar .more{border:0;background:none;color:var(--ink);font-size:22px;font-weight:700;letter-spacing:1px;padding:8px 10px;line-height:1}
.topbar button{display:flex;align-items:center;gap:2px;border:0;background:none;color:var(--ink);font-size:17px;font-weight:600;padding:8px 6px}
.row.big{min-height:68px}
.row.big .w div{font-size:19px}
.linkrow.grey{color:var(--label);font-weight:500}
.note{display:block;width:100%;text-align:left;border:0;background:var(--card);border-radius:20px;box-shadow:var(--cardsh);padding:14px 16px;font-size:16px;line-height:1.45;white-space:pre-line;color:var(--ink)}
.wrap{white-space:normal!important;font-size:15px!important;font-weight:500!important;line-height:1.4}
.quote{font-size:16px;color:var(--label);font-weight:500;padding:0 4px;line-height:1.4}
.answer{padding:16px;font-size:17px;line-height:1.5;font-weight:500}
.thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex:none;background:var(--field);display:grid;place-items:center}
.row .x{border:0;background:none;color:var(--faint);font-size:20px;padding:4px}
/* Frage-Leiste: grauer Kreis (Mikrofon) + weiße Pille + Navy-Kreis (Senden) */
.ask{display:flex;align-items:center;gap:8px}
.askmic{flex:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--field);color:var(--ink);display:grid;place-items:center}
.askmic.on{background:var(--navy);color:var(--on-navy)}
.askfield{flex:1;min-width:0;display:flex;align-items:center;gap:6px;background:var(--card);border-radius:26px;box-shadow:var(--pill);padding:4px 4px 4px 16px}
.askfield input{flex:1;min-width:0;border:0;background:none;font-size:17px;padding:8px 0}
.askfield input:focus{outline:none}
.asksend{flex:none;width:40px;height:40px;border-radius:50%;border:0;background:var(--navy);color:var(--on-navy);display:grid;place-items:center}
/* Neu | Alt */
.crow{display:grid;grid-template-columns:minmax(0,1fr) 68px 68px;gap:8px;align-items:center;padding:11px 16px;min-height:48px}
.card.cmp .crow+.crow{background:linear-gradient(var(--line),var(--line)) 16px 0/calc(100% - 16px) 1px no-repeat}
.crow .cn{font-size:16px;font-weight:500;line-height:1.3;display:flex;align-items:center;overflow-wrap:anywhere}
.crow .cv{text-align:right;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.crow .cv.old{color:var(--label);font-weight:500}
.crow.ch .cn{font-weight:700}
.crow.ch .cv:not(.old){font-weight:800}
.crow.head{min-height:36px;padding-top:10px;padding-bottom:2px}
.crow.head .cv{font-size:13px;font-weight:700;color:var(--ink)}
.crow.head .cv.old{color:var(--label);font-weight:600}
.frow textarea#cnote{min-height:0;line-height:1.45;font-size:16px}
/* Rezept (14.10.2026): Phasen als große Rille, oben mitlaufend; Notiz als leiser Text; Werte aufklappbar */
.phbar{position:sticky;top:0;z-index:4;background:var(--bg);margin:0 -16px;padding:6px 16px 8px}
.seg.big{padding:4px;flex:none}
.seg.big button{font-size:16px;padding:10px 4px}
.seg.big button.on{font-size:16px}
.seg.scroll{overflow-x:auto;scrollbar-width:none}
.seg.scroll::-webkit-scrollbar{display:none}
.seg.scroll button{flex:none;padding:10px 16px;overflow:visible}
.notecard{display:flex;flex-direction:column;gap:4px;width:100%;border:0;background:var(--card);border-radius:16px;box-shadow:var(--pill);padding:10px 14px 12px;text-align:left;color:var(--ink)}
.notecard .nl{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:600;color:var(--label)}
.notecard .nl svg{width:16px;height:16px;color:var(--faint)}
.notecard .nt{font-size:15px;line-height:1.45;font-weight:500;white-space:pre-line}
.card>.stats+.row,.card>.stats+.linkrow,.card>.row+.linkrow{background:linear-gradient(var(--line),var(--line)) 16px 0/calc(100% - 16px) 1px no-repeat}
.stats b .warn,.r b .warn{vertical-align:3px;margin-right:5px}
.stats i{display:block;font-style:normal;font-size:12.5px;color:var(--label);font-weight:500;margin-top:1px;white-space:nowrap}
.row.v{min-height:46px;padding-top:8px;padding-bottom:8px}
.row.v .w div{font-weight:500}
/* Hinweise (14.10.2026): Punkt + Text über mehrere Zeilen; Rückfragen blau */
.hrow{align-items:flex-start}
.hrow>.warn,.hrow>.sdot,.hrow>.qdot{margin-top:7px}
.hrow .chev{align-self:center}
.qdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;margin-right:6px}
.wrap2{white-space:normal!important}
.r.st .warn{vertical-align:1px}
/* „Im Rezept zeigen“ (von den Hinweisen): kurzes Aufleuchten der Stelle */
.hsub{display:block;font-size:14px;color:var(--label);font-weight:500;margin-top:6px}
@keyframes flash{0%{background:color-mix(in srgb,var(--blue) 18%,transparent)}100%{background:transparent}}
.flash{animation:flash 1.8s ease-out;border-radius:14px}
.qrow .check{margin-top:2px}
.qrow.sel .check{background:var(--navy);border-color:var(--navy)}
.qrow{align-items:flex-start}
/* A4-Zettel in der App: Blatt auf Bildschirmbreite verkleinert, beim Drucken 1:1 */
.tbr{display:flex;align-items:center}
.topbar .a4btn{gap:5px;font-size:15px;font-weight:700;padding:8px 8px}
.topbar .a4btn svg{width:20px;height:20px}
.a4wrap{position:relative;width:100%;overflow:hidden;border-radius:6px;background:#fff;box-shadow:var(--cardsh);margin-top:4px;flex:none}
.a4box{position:absolute;left:0;top:0;width:794px;height:1123px;transform-origin:0 0}
/* Druckseiten: auf dem Bildschirm außer Sicht, aber gelayoutet (damit sich das Blatt einpassen kann) */
.a4pages{position:absolute;left:-10000px;top:0;visibility:hidden}
@media print{
  @page{size:A4;margin:0}
  body.printa4{background:#fff;padding:0}
  body.printa4>:not(#app){display:none!important}
  body.printa4 #app{padding:0;margin:0;max-width:none;display:block}
  body.printa4 #app>:not(.a4pages){display:none!important}
  body.printa4 .a4pages{position:static;visibility:visible}
  body.printa4 .a4page{width:794px;height:1120px;overflow:hidden;break-after:page}
  body.printa4 .a4page:last-child{break-after:auto}
}