/* Resolution OS – Layout und Komponenten. Werte nur aus tokens.css (Farben, Abstände, Schriften).
   Regeln (SPEC §7): weiß, 1-px-Linien, eckig, keine Schatten, keine Verläufe, 8-px-Raster.
   Primäre Knöpfe dunkles Rot (--c-primary). #FF4144 nur für Akzente: aktiver Menüpunkt, Linien, Fokus. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:var(--radius);box-shadow:none}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-text);font-weight:var(--fw-text);font-size:var(--fs-s);line-height:var(--lh-m);
  background:var(--c-bg);color:var(--c-text);min-height:100vh}
h1,h2,h3,h4,.brand-name,.card-title,.stat .num,.fp-num,.cal-date .d,.wiz-live,.auto-card .t,.flow-head{
  font-family:var(--font-heading);font-weight:var(--fw-heading)}
.hidden{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;text-align:inherit}
button:disabled{cursor:default;opacity:.5}
:focus{outline:none}
:focus-visible{outline:var(--focus) solid var(--c-accent);outline-offset:var(--focus)}
.i{width:var(--icon);height:var(--icon);flex:none;display:block}
b,strong{font-weight:var(--fw-strong)}

/* ---------- Hilfsklassen */
.mt-1{margin-top:var(--s-1)} .mt-2{margin-top:var(--s-2)} .mb-2{margin-bottom:var(--s-2)}
.grow{flex:1;min-width:0}
.spacer{flex:1}
.hint{color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s)}

/* ---------- Marke: Logo 1:1 unverändert + Name */
.brand{display:flex;align-items:center;gap:var(--s-1);min-width:0}
.brand img{width:var(--logo);height:var(--logo);display:block;flex:none}
.brand-name{font-size:var(--fs-m);line-height:var(--lh-m);white-space:nowrap}
.brand-login img{width:var(--logo-login);height:var(--logo-login)}
.brand-login .brand-name{font-size:var(--fs-xl);line-height:var(--lh-l)}

/* ---------- Knöpfe */
.btn-accent,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);
  min-height:var(--control);padding:0 var(--s-2);border:var(--line) solid transparent;
  font-size:var(--fs-s);font-weight:var(--fw-strong);line-height:var(--lh-m);white-space:nowrap}
.btn-accent{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-primary)}
.btn-accent:hover:not(:disabled){border-color:var(--c-text)}
.btn-ghost{background:var(--c-surface);border-color:var(--c-line);color:var(--c-text)}
.btn-ghost:hover:not(:disabled){border-color:var(--c-text-2)}
.btn-accent.small,.btn-ghost.small,.btn-ghost.tiny{min-height:var(--control-s);padding:0 var(--s-2)}
.btn-ghost.tiny{font-size:var(--fs-xs)}
.icon-btn{width:var(--control);padding:0}
.mini{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--control-s);padding:0 var(--s-1);
  border:var(--line) solid var(--c-line);background:var(--c-surface);color:var(--c-text);
  font-size:var(--fs-xs);font-weight:var(--fw-strong);line-height:var(--lh-s);white-space:nowrap}
.mini:hover{border-color:var(--c-text-2)}
.edit-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--control-s);height:var(--control-s);
  flex:none;border:var(--line) solid transparent;color:var(--c-text-2)}
.edit-btn:hover{color:var(--c-text);border-color:var(--c-line)}

/* ---------- Formulare */
.field{margin-top:var(--s-2)}
.field label{display:block;font-size:var(--fs-xs);line-height:var(--lh-s);font-weight:var(--fw-strong);
  color:var(--c-text-2);margin-bottom:var(--s-1)}
.field input,.field select,.field textarea,.login-form input,.rep-in,.pos-table input{
  width:100%;height:var(--control);padding:0 var(--s-2);border:var(--line) solid var(--c-line);
  background:var(--c-surface);color:var(--c-text);font-size:var(--fs-s);-webkit-appearance:none;appearance:none}
.field textarea{height:auto;min-height:calc(var(--control) * 2);padding:var(--s-1) var(--s-2);line-height:var(--lh-m);resize:vertical}
.field select{padding-right:var(--s-5);background-image:var(--select-arrow);background-repeat:no-repeat;
  background-position:right var(--s-2) center}
input::placeholder,textarea::placeholder{color:var(--c-text-2)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.login-form input:focus-visible,
.rep-in:focus-visible,.pos-table input:focus-visible{outline-offset:calc(var(--line) * -1);border-color:var(--c-accent)}
.field .hint{margin-top:var(--s-1)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:var(--icon);height:var(--icon);flex:none;
  border:var(--line) solid var(--c-text-2);background:var(--c-surface);display:inline-grid;place-content:center;cursor:pointer}
input[type=checkbox]:checked{background:var(--c-text);border-color:var(--c-text)}
input[type=checkbox]:checked::after{content:"";width:calc(var(--s-1) + var(--line));height:calc(var(--s-1) / 2);
  border-left:calc(var(--line) * 2) solid var(--c-on-dark);border-bottom:calc(var(--line) * 2) solid var(--c-on-dark);
  transform:translateY(calc(var(--line) * -1)) rotate(-45deg)}

/* ---------- Login */
.login-overlay{position:fixed;inset:0;z-index:60;overflow:auto;background:var(--c-bg);
  display:flex;align-items:center;justify-content:center;padding:var(--s-2)}
.login-box{width:100%;max-width:var(--login)}
.login-title{font-size:var(--fs-xxl);line-height:var(--lh-xl);margin-top:var(--s-5)}
.login-sub{color:var(--c-text-2);margin-top:var(--s-1)}
.btn-google{width:100%;margin-top:var(--s-4)}
.btn-google span{font-weight:var(--fw-text);color:var(--c-text-2)}
.login-form{display:flex;flex-direction:column;gap:var(--s-1);margin-top:var(--s-3)}
#login-google:not(.hidden)+.login-form{border-top:var(--line) solid var(--c-line);padding-top:var(--s-3)}
.login-form label{font-size:var(--fs-xs);line-height:var(--lh-s);font-weight:var(--fw-strong);color:var(--c-text-2)}
.login-form .btn-accent{margin-top:var(--s-1)}
.login-msg{color:var(--c-text-2);margin-top:var(--s-2);min-height:var(--lh-m)}

/* ---------- App-Rahmen: Sidebar + Inhalt */
.app{display:flex;min-height:100vh}
.sidebar{position:fixed;top:0;bottom:0;left:0;z-index:45;width:var(--sidebar);overflow-y:auto;
  display:flex;flex-direction:column;padding:var(--s-3) 0 var(--s-2);
  background:var(--c-surface);border-right:var(--line) solid var(--c-line)}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-1);padding:0 var(--s-3) var(--s-4)}
.side-close{display:none}
.nav{flex:1;display:flex;flex-direction:column}
.nav-group{margin-bottom:var(--s-2)}
.nav-group-title{padding:0 var(--s-3);font-size:var(--fs-xs);line-height:var(--lh-m);font-weight:var(--fw-strong);color:var(--c-text-2)}
.nav button{position:relative;display:flex;align-items:center;gap:var(--s-2);width:100%;min-height:var(--control);
  padding:0 var(--s-3);color:var(--c-text-2);font-size:var(--fs-s);font-weight:var(--fw-medium)}
.nav button:hover{color:var(--c-text)}
.nav button.active{color:var(--c-text);font-weight:var(--fw-strong)}
.nav button.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--bar);background:var(--c-accent)}
.side-user{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-1);
  padding:var(--s-2) var(--s-3) 0;border-top:var(--line) solid var(--c-line)}
.who{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--fw-strong)}
.nav-backdrop{position:fixed;inset:0;z-index:44;background:var(--c-overlay)}

.main{flex:1;min-width:0;margin-left:var(--sidebar);min-height:100vh}
.main-head{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);background:var(--c-bg);border-bottom:var(--line) solid var(--c-line)}
.main-head h1{flex:1;min-width:0;font-size:var(--fs-xl);line-height:var(--control);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-btn{display:none}
.head-actions{display:flex;align-items:center;gap:var(--s-1)}
.view{max-width:var(--content);padding:var(--s-4) var(--s-4) var(--s-8)}
.intro{color:var(--c-text-2);padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:var(--line) solid var(--c-line)}
.section-title{font-size:var(--fs-m);line-height:var(--lh-m);margin:var(--s-5) 0 var(--s-2)}

/* ---------- Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s-2)}
.stat{border:var(--line) solid var(--c-line);padding:var(--s-2) var(--s-3)}
.stat .num{font-size:var(--fs-xxl);line-height:var(--lh-xl)}
.stat .lbl{color:var(--c-text-2)}

/* ---------- Fluss Vertrieb -> Produktion */
.flow{display:flex;align-items:stretch;gap:var(--s-2);flex-wrap:wrap}
.flow-block{flex:1;min-width:256px;border:var(--line) solid var(--c-line);padding:var(--s-2)}
.flow-head{font-size:var(--fs-s);margin-bottom:var(--s-2)}
.flow-pills{display:flex;gap:var(--s-1);flex-wrap:wrap}
.flow-pill{min-width:80px;padding:var(--s-1);border:var(--line) solid var(--c-line);text-align:center;color:var(--c-text-2)}
.flow-pill.on{color:var(--c-text);border-color:var(--c-text-2)}
.fp-num{font-size:var(--fs-l);line-height:var(--lh-l)}
.fp-lbl{font-size:var(--fs-xs);line-height:var(--lh-s)}
.flow-arrow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);
  color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s)}

/* ---------- Lage-Check / Formular-Kasten */
.summary-card{border:var(--line) solid var(--c-line);padding:var(--s-3);margin:var(--s-3) 0}
.summary-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.summary-head h2{font-size:var(--fs-m);line-height:var(--lh-m)}
.summary-text{margin-top:var(--s-2);font-family:var(--font-text);font-size:var(--fs-s);line-height:var(--lh-m);white-space:pre-wrap}

/* ---------- Karten und Listen */
.cards{display:flex;flex-direction:column;gap:var(--s-1)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:var(--s-2)}
.card{background:var(--c-surface);border:var(--line) solid var(--c-line);padding:var(--s-2)}
.card.done .card-title{color:var(--c-text-2);text-decoration:line-through}
.card-row{display:flex;align-items:flex-start;gap:var(--s-2)}
.card-main{flex:1;min-width:0}
.card-title{font-size:var(--fs-m);line-height:var(--lh-m)}
.card-sub{color:var(--c-text-2)}
.card-meta{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-1)}
.card-note{color:var(--c-text-2);margin-top:var(--s-1)}
.card-actions{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1)}
.badge{display:inline-flex;align-items:center;min-height:var(--badge);padding:0 var(--s-1);
  border:var(--line) solid var(--c-line);background:var(--c-surface);color:var(--c-text-2);
  font-size:var(--fs-xs);line-height:var(--lh-s);font-weight:var(--fw-medium);white-space:nowrap}
.badge.strong{background:var(--c-text);border-color:var(--c-text);color:var(--c-on-dark)}
.badge.warn,.badge.hot{border-color:var(--c-accent);color:var(--c-accent-text)}
.empty{padding:var(--s-3);border:var(--line) solid var(--c-line);color:var(--c-text-2);text-align:center}
.agenda-pre{margin-top:var(--s-1);padding:var(--s-2);border:var(--line) solid var(--c-line);
  font-family:var(--font-text);font-size:var(--fs-s);line-height:var(--lh-m);white-space:pre-wrap}
.phasebar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);margin-top:var(--s-1);font-size:var(--fs-xs);line-height:var(--lh-s)}
.ph{color:var(--c-text-2)}
.ph.on{color:var(--c-text)}
.ph.now{font-weight:var(--fw-heading);text-decoration:underline;text-underline-offset:calc(var(--s-1) / 2)}
.ph-sep{color:var(--c-text-2)}

/* ---------- Filter */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-bottom:var(--s-2)}
.chip{display:inline-flex;align-items:center;min-height:var(--control-s);padding:0 var(--s-2);
  border:var(--line) solid var(--c-line);color:var(--c-text-2);font-size:var(--fs-xs);font-weight:var(--fw-strong)}
.chip:hover{color:var(--c-text)}
.chip.active{background:var(--c-text);border-color:var(--c-text);color:var(--c-on-dark)}

/* ---------- Kalender */
.cal-day{display:flex;gap:var(--s-2);margin-bottom:var(--s-1)}
.cal-date{min-width:var(--s-8);padding:var(--s-1);border:var(--line) solid var(--c-line);text-align:center}
.cal-date .d{font-size:var(--fs-l);line-height:var(--lh-m)}
.cal-date .m{color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s);text-transform:uppercase}

/* ---------- Dialoge */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:var(--s-2);background:var(--c-overlay)}
.modal-box{width:100%;max-width:var(--dialog);max-height:calc(100vh - var(--s-4));overflow:auto;
  padding:var(--s-3);background:var(--c-surface);border:var(--line) solid var(--c-line)}
.modal-box.wide{max-width:var(--dialog-wide)}
.modal-box h3{font-size:var(--fs-l);line-height:var(--lh-l)}
.modal-box h4{font-size:var(--fs-m);line-height:var(--lh-m)}
.modal-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-3)}
.tut-body{margin-top:var(--s-1);color:var(--c-text-2)}
.tut-progress{display:flex;gap:var(--s-1);margin-top:var(--s-2)}
.tut-progress .dot{width:var(--s-1);height:var(--s-1);background:var(--c-line)}
.tut-progress .dot.on{background:var(--c-text)}

/* ---------- Per Knopfdruck */
.auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:var(--s-2)}
.auto-card{display:flex;flex-direction:column;align-items:flex-start;padding:var(--s-3);
  background:var(--c-surface);border:var(--line) solid var(--c-line);color:var(--c-text);text-align:left}
.auto-card:hover{border-color:var(--c-text)}
.auto-card .ico .i{width:var(--icon-l);height:var(--icon-l)}
.auto-card .t{margin-top:var(--s-2);font-size:var(--fs-m);line-height:var(--lh-m)}
.auto-card .d{margin-top:var(--s-1);color:var(--c-text-2)}
.auto-card .go{display:flex;align-items:center;gap:var(--s-1);margin-top:var(--s-2);font-weight:var(--fw-strong)}
.status-row{display:flex;flex-wrap:wrap;gap:var(--s-1);margin-top:var(--s-2)}
.doc-row{display:flex;align-items:center;gap:var(--s-2)}
.doc-row .card-actions{flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* ---------- Fragebogen */
.modal-box.wiz{max-width:var(--dialog-wizard)}
.wiz-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-2)}
.wiz-kicker{color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s);font-weight:var(--fw-strong)}
.wiz-steps{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-2) 0 var(--s-1)}
.wiz-steps span{display:inline-flex;align-items:center;min-height:var(--badge);padding:0 var(--s-1);
  border:var(--line) solid var(--c-line);color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s);font-weight:var(--fw-strong)}
.wiz-steps span.done{color:var(--c-text)}
.wiz-steps span.on{background:var(--c-text);border-color:var(--c-text);color:var(--c-on-dark)}
.wiz-hint{margin-top:var(--s-1);color:var(--c-text-2)}
.wiz-live{margin-right:var(--s-1);font-size:var(--fs-m)}
.wiz-live.bad{color:var(--c-accent-text)}
.logo-box{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2);border:var(--line) solid var(--c-line)}
.logo-box .prev{display:flex;align-items:center;justify-content:center;flex:none;width:120px;height:var(--s-8);
  overflow:hidden;border:var(--line) solid var(--c-line);color:var(--c-text-2);font-size:var(--fs-xs)}
.logo-box .prev img{max-width:112px;max-height:var(--s-6)}
.pos-table{width:100%;border-collapse:collapse;margin-top:var(--s-1)}
.pos-table th{padding:var(--s-1);color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s);font-weight:var(--fw-strong);text-align:left}
.pos-table td{padding:var(--s-1);border-top:var(--line) solid var(--c-line);vertical-align:middle}
.pos-table input{height:var(--control-s);padding:0 var(--s-1)}
.pos-table .qty{width:var(--s-8)}
.pos-table .pr{width:88px}
.pos-table tr.active td:first-child{font-weight:var(--fw-strong)}
.pos-table td.sum{width:80px;text-align:right;white-space:nowrap;font-weight:var(--fw-strong)}
.rep{margin-top:var(--s-2);padding:var(--s-2);border:var(--line) solid var(--c-line)}
.rep-head{display:flex;justify-content:space-between;align-items:center;color:var(--c-text-2);font-weight:var(--fw-strong)}
.checks{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.checks label{display:flex;align-items:flex-start;gap:var(--s-1);max-width:100%;margin:0;padding:var(--s-1) var(--s-2);
  border:var(--line) solid var(--c-line);color:var(--c-text);font-size:var(--fs-s);line-height:var(--lh-m);font-weight:var(--fw-text);cursor:pointer}
.checks label.wide{flex:1 1 100%}
.checks input{margin-top:calc((var(--lh-m) - var(--icon)) / 2)}
.checks small{display:block;color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s)}
.toggle-free{display:flex;align-items:center;gap:var(--s-1);padding:var(--s-2);border:var(--line) solid var(--c-line);cursor:pointer}
.result{padding:var(--s-1) 0;text-align:center}
.result .big{display:flex;justify-content:center}
.result .big .i{width:var(--s-6);height:var(--s-6)}
.result h4{margin:var(--s-1) 0;font-size:var(--fs-l);line-height:var(--lh-l)}
.result .path{margin-top:var(--s-1);color:var(--c-text-2);font-size:var(--fs-xs);line-height:var(--lh-s);word-break:break-all}
.result ul{list-style:none;max-width:var(--dialog);margin:var(--s-2) auto 0;text-align:left}
.result li{padding:var(--s-1) 0;border-top:var(--line) solid var(--c-line)}
.result p{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-1)}
.check-sum{padding:var(--s-2);border:var(--line) solid var(--c-line)}
.warnbox{margin-top:var(--s-2);padding:var(--s-2);border:var(--line) solid var(--c-accent);color:var(--c-accent-text)}

/* ---------- Handy (Breakpoint 768px, siehe tokens.css) */
@media (max-width:768px){
  .sidebar{display:none}
  .app.nav-open .sidebar{display:flex;width:min(var(--sidebar) + var(--s-6), 100%)}
  .side-close{display:inline-flex}
  .main{margin-left:0}
  .menu-btn{display:inline-flex}
  .main-head{gap:var(--s-1);padding:var(--s-2)}
  .main-head h1{font-size:var(--fs-l)}
  .view{padding:var(--s-3) var(--s-2) var(--s-8)}
  .field-row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .card-row{flex-wrap:wrap}
  .card-actions{flex-direction:row;flex-wrap:wrap;align-items:center;width:100%}
  .doc-row{flex-wrap:wrap}
  .doc-row .card-actions{justify-content:flex-start}
  .flow-arrow{width:100%;flex-direction:row}
  .flow-arrow .i{transform:rotate(90deg)}
  .modal-box{padding:var(--s-2)}
  .pos-table .pr{width:72px}
  .pos-table td.sum{display:none}
}