/* =====================================================================
   Flottenwacht Portal – Oberfläche
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#faf7f3;--paper2:#f3ede4;--white:#fff;
  --ink:#141b1e;--ink2:#4b5b60;--ink3:#616f75;
  --pt:#0f4c55;--pt2:#0a373e;--pt3:#16636e;--ptl:#e2eeee;
  --co:#c93d1a;--cobr:#f26d45;--cos:#fdece5;
  --ok:#2f8f5b;--oks:#e7f4ec;--wn:#a8760d;--wns:#fdf3dd;
  --bad:#b3261e;--bads:#fbe9e7;--inf:#1c6cab;--infs:#e6f1fa;
  --ln:rgba(20,27,30,.11);--ln2:rgba(20,27,30,.2);--dln:rgba(255,255,255,.14);
  --r:14px;--rs:9px;--rl:20px;--sb:266px;
  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mo:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sh:0 1px 2px rgba(20,27,30,.04),0 8px 26px -14px rgba(20,27,30,.18);
  --shl:0 2px 8px rgba(20,27,30,.06),0 30px 70px -30px rgba(15,76,85,.4);
}
body{font-family:var(--ff);background:var(--paper);color:var(--ink);font-size:15.5px;
  line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh}
.mono{font-family:var(--mo);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.032em}
h1{font-size:1.6rem;font-weight:700}h2{font-size:1.28rem;font-weight:680}
h3{font-size:1rem;font-weight:660}h4{font-size:.9rem;font-weight:650}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--pt)}
.hide{display:none!important}
:focus-visible{outline:2px solid var(--co);outline-offset:2px}
.muted{color:var(--ink3)}
.small{font-size:.85rem}

/* ---------- Buttons ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.6rem 1.1rem;
  border-radius:var(--rs);font-weight:620;font-size:.9rem;cursor:pointer;border:1.5px solid transparent;
  text-decoration:none;white-space:nowrap;transition:background .16s,border-color .16s,transform .14s,color .16s}
.b:active{transform:translateY(1px)}
.b[disabled]{opacity:.55;cursor:not-allowed}
.bp{background:var(--co);color:#fff}.bp:hover:not([disabled]){background:#b03415}
.bs{background:var(--white);color:var(--ink);border-color:var(--ln2)}
.bs:hover{border-color:var(--pt);background:var(--ptl)}
.bt{background:var(--pt);color:#fff}.bt:hover{background:var(--pt3)}
.bg{background:rgba(255,255,255,.1);color:#fff;border-color:var(--dln)}
.bg:hover{background:rgba(255,255,255,.18)}
.bx{background:transparent;color:var(--ink3);padding:.4rem .65rem;font-size:.84rem}
.bx:hover{background:var(--bads);color:var(--bad)}
.bsm{padding:.42rem .8rem;font-size:.84rem}
.bxs{padding:.3rem .6rem;font-size:.79rem}

/* ---------- Login ---------- */
#login{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:radial-gradient(50% 46% at 76% 18%,rgba(242,109,69,.2),transparent 66%),
             radial-gradient(44% 42% at 16% 6%,rgba(15,76,85,.15),transparent 70%),var(--paper)}
.lcard{width:min(100%,420px);background:var(--white);border:1px solid var(--ln);
  border-radius:var(--rl);padding:2.3rem;box-shadow:var(--shl)}
.lbrand{display:flex;align-items:center;gap:.65rem;margin-bottom:1.9rem;font-weight:700;
  font-size:1.18rem;letter-spacing:-.035em;color:var(--pt)}
.lbrand em{font-style:normal;display:block;font-family:var(--mo);font-size:.58rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink3);font-weight:500;margin-top:1px}
.lcard h1{font-size:1.42rem;margin-bottom:.4rem}
.lcard>p{color:var(--ink3);font-size:.9rem;margin-bottom:1.7rem}
#login .b{width:100%;margin-top:.6rem;padding:.85rem}
.demo{margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--ln);
  font-size:.83rem;color:var(--ink3);line-height:1.6}
.demo code{font-family:var(--mo);background:var(--paper2);padding:.1rem .35rem;border-radius:4px}

/* ---------- Felder ---------- */
.fld{margin-bottom:1rem}
label.f{display:block;font-size:.82rem;font-weight:640;color:var(--ink2);margin-bottom:.34rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
input[type=search],input[type=url],input[type=tel],select,textarea{
  width:100%;padding:.7rem .9rem;border:1.5px solid var(--ln2);border-radius:var(--rs);
  background:var(--white);font-size:.93rem;transition:border-color .16s,box-shadow .16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--co);
  box-shadow:0 0 0 3px rgba(201,61,26,.14)}
textarea{resize:vertical;min-height:76px}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23616f75' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.3rem}
.msg{padding:.7rem .9rem;border-radius:var(--rs);font-size:.86rem;margin-bottom:1rem;line-height:1.45}
.msg.err{background:var(--bads);color:var(--bad);border:1px solid rgba(179,38,30,.24)}
.msg.inf{background:var(--ptl);color:var(--pt);border:1px solid rgba(15,76,85,.2)}
.msg.wn{background:var(--wns);color:var(--wn);border:1px solid rgba(168,118,13,.28)}
.hint{font-size:.79rem;color:var(--ink3);margin-top:.3rem;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips label{display:inline-flex;align-items:center;gap:.4rem;padding:.36rem .75rem;
  border:1.5px solid var(--ln2);border-radius:99px;font-size:.85rem;cursor:pointer;background:var(--white)}
.chips input{accent-color:var(--co);width:15px;height:15px}
.chips label:has(input:checked){background:var(--cos);border-color:var(--co);color:var(--co);font-weight:620}

/* ---------- Shell ---------- */
#app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
aside{background:var(--pt);color:#fff;padding:1.3rem 1rem;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.abrand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.08rem;
  letter-spacing:-.035em;padding:0 .5rem 1.2rem}
.abrand em{font-style:normal;display:block;font-family:var(--mo);font-size:.56rem;
  letter-spacing:.15em;text-transform:uppercase;opacity:.62;font-weight:500;margin-top:1px}
.envtag{font-family:var(--mo);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(242,109,69,.24);color:#ffcbb6;padding:.22rem .5rem;border-radius:5px;
  display:inline-block;margin:0 .8rem 1.1rem}
.envtag.echt{background:rgba(64,196,140,.22);color:#bff0d8}
aside nav{display:grid;gap:.12rem}
aside nav button{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  background:transparent;border:0;color:rgba(255,255,255,.72);padding:.62rem .8rem;
  border-radius:var(--rs);cursor:pointer;font-size:.92rem;font-weight:560;transition:background .15s,color .15s}
aside nav button:hover{background:rgba(255,255,255,.09);color:#fff}
aside nav button[aria-current=page]{background:rgba(255,255,255,.16);color:#fff;font-weight:650}
aside nav button svg{flex-shrink:0;opacity:.85}
aside nav .navsep{font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);padding:1.1rem .8rem .35rem;font-family:var(--mo)}
.aend{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--dln)}
.who{padding:.5rem .8rem 1rem;font-size:.85rem}
.who b{display:block;color:#fff;font-weight:640}
.who span{color:rgba(255,255,255,.6);font-size:.79rem}
.aend .b{width:100%}
main{padding:1.9rem 2.1rem 4rem;min-width:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.4rem}
.head p{color:var(--ink3);font-size:.92rem;margin-top:.2rem}
.acts{display:flex;gap:.5rem;flex-wrap:wrap}
.crumb{font-size:.82rem;color:var(--ink3);margin-bottom:.4rem;font-family:var(--mo)}
.crumb b{color:var(--pt);font-weight:600}

/* ---------- KPI ---------- */
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;margin-bottom:1.4rem}
.k{background:var(--white);border:1px solid var(--ln);border-radius:var(--r);
  padding:1.1rem 1.2rem;box-shadow:var(--sh)}
.k small{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink3);font-weight:650;margin-bottom:.42rem}
.k b{font-family:var(--mo);font-size:1.85rem;font-weight:600;letter-spacing:-.045em;
  line-height:1;display:block}
.k.a b{color:var(--bad)}.k.w b{color:var(--wn)}.k.o b{color:var(--ok)}
.k.n b{color:var(--pt)}.k.i b{color:var(--inf)}

/* ---------- Karten & Tabellen ---------- */
.card{background:var(--white);border:1px solid var(--ln);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;margin-bottom:1.1rem}
.ch{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.2rem;border-bottom:1px solid var(--ln);
  background:var(--paper2);flex-wrap:wrap}
.ch h3{flex:1;min-width:110px}
.ch .cnt{font-family:var(--mo);font-size:.78rem;color:var(--ink3)}
.cb{padding:1.2rem}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
th{text-align:left;font-size:.69rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
  font-weight:650;padding:.7rem 1.2rem;border-bottom:1px solid var(--ln);white-space:nowrap}
td{padding:.72rem 1.2rem;border-bottom:1px solid var(--ln);font-size:.91rem;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--paper)}
td.r,th.r{text-align:right;white-space:nowrap}
.thsort{background:none;border:0;padding:0;font:inherit;font-size:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;cursor:pointer;font-weight:650;white-space:nowrap}
.thsort:hover{color:var(--pt)}
.thsort.on{color:var(--co)}
tr.pick td{background:var(--oks)}
.empty{padding:2.3rem 1.2rem;text-align:center;color:var(--ink3);font-size:.92rem}

/* ---------- Tags ---------- */
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.24rem .62rem;border-radius:99px;
  font-size:.76rem;font-weight:640;white-space:nowrap;font-family:var(--mo)}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.tag.np::before{display:none}
.t-ok{background:var(--oks);color:var(--ok)}
.t-wn{background:var(--wns);color:var(--wn)}
.t-bad{background:var(--bads);color:var(--bad)}
.t-na{background:var(--paper2);color:var(--ink3)}
.t-in{background:var(--ptl);color:var(--pt)}
.t-i2{background:var(--infs);color:var(--inf)}
.sub{font-size:.78rem;color:var(--ink3);display:block;margin-top:.14rem}
.kd{font-family:var(--mo);font-weight:650}
.pk{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:5px;background:var(--ptl);color:var(--pt)}

/* ---------- Filter / Suche ---------- */
.bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem}
.srch{position:relative;flex:1;min-width:200px;max-width:380px}
.srch input{padding-left:2.4rem}
.srch svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--ink3);pointer-events:none}
.fil{display:flex;gap:.4rem;flex-wrap:wrap}
.fil button{background:var(--white);border:1.5px solid var(--ln);border-radius:99px;
  padding:.36rem .9rem;font-size:.84rem;cursor:pointer;color:var(--ink2);font-weight:560;transition:all .15s}
.fil button:hover{border-color:var(--ln2)}
.fil button[aria-pressed=true]{background:var(--pt);border-color:var(--pt);color:#fff;font-weight:650}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--ln);margin-bottom:1.2rem;overflow-x:auto}
.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;padding:.7rem 1rem;
  cursor:pointer;font-size:.92rem;font-weight:580;color:var(--ink3);white-space:nowrap;transition:all .15s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-current=page]{color:var(--pt);border-bottom-color:var(--co);font-weight:660}
.tabs button span{font-family:var(--mo);font-size:.76rem;opacity:.7;margin-left:.3rem}

/* ---------- Kacheln ---------- */
.kg{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1rem}
.kc{background:var(--white);border:1px solid var(--ln);border-radius:var(--r);padding:1.3rem;
  box-shadow:var(--sh);cursor:pointer;text-align:left;width:100%;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s,border-color .22s}
.kc:hover{transform:translateY(-3px);border-color:var(--pt);box-shadow:0 12px 32px -14px rgba(15,76,85,.45)}
.kc.pause{opacity:.72;background:var(--paper2)}
.kc.arch{opacity:.6;background:var(--paper2)}
.kc h3{margin-bottom:.14rem}
.kc .o{font-size:.84rem;color:var(--ink3);margin-bottom:.85rem}
.kc .st{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.85rem;min-height:25px}
.kc .mt{display:flex;gap:1.1rem;font-size:.81rem;color:var(--ink3);font-family:var(--mo);
  padding-top:.8rem;border-top:1px solid var(--ln)}

/* ---------- Pipeline ---------- */
.pipe{display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;margin-bottom:1.2rem}
.pcol{background:var(--paper2);border:1px solid var(--ln);border-radius:var(--r);padding:.8rem;min-height:110px}
.pcol h4{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  font-weight:650;margin-bottom:.7rem;display:flex;justify-content:space-between;gap:.3rem}
.pi{background:var(--white);border:1px solid var(--ln);border-radius:var(--rs);padding:.7rem .8rem;
  margin-bottom:.5rem;cursor:pointer;transition:border-color .16s,transform .16s}
.pi:hover{border-color:var(--pt);transform:translateY(-2px)}
.pi b{display:block;font-size:.85rem;font-weight:640;margin-bottom:.15rem;line-height:1.3}
.pi span{display:block;font-size:.75rem;color:var(--ink3);font-family:var(--mo)}

/* ---------- Partnerkarten ---------- */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:1rem}
.pcard{background:var(--white);border:1px solid var(--ln);border-radius:var(--r);padding:1.25rem;
  box-shadow:var(--sh);transition:border-color .2s,transform .2s}
.pcard:hover{border-color:var(--pt);transform:translateY(-2px)}
.pcard .top{display:flex;justify-content:space-between;gap:.6rem;align-items:flex-start;margin-bottom:.3rem}
.pcard h3{font-size:1.03rem}
.pcard .loc{font-size:.85rem;color:var(--ink3);margin-bottom:.75rem;display:flex;align-items:center;gap:.35rem}
.pcard .lst{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.85rem}
.pcard .lst span{font-size:.74rem;background:var(--ptl);color:var(--pt);padding:.18rem .5rem;
  border-radius:5px;font-weight:600}
.pcard .kon{font-size:.85rem;color:var(--ink2);background:var(--paper2);border-radius:var(--rs);
  padding:.6rem .75rem;margin-bottom:.85rem;line-height:1.5}
.pcard .ct{display:grid;gap:.28rem;font-size:.85rem;padding-top:.8rem;border-top:1px solid var(--ln)}
.pcard .ct a{text-decoration:none;font-family:var(--mo);font-size:.85rem}
.pcard .ct a:hover{color:var(--co)}
.stars{font-size:.8rem;color:var(--wn);letter-spacing:.05em;white-space:nowrap}

/* ---------- Angebotsvergleich ---------- */
.best{background:var(--oks)!important;position:relative}
.badge{display:inline-block;font-size:.65rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  background:var(--ok);color:#fff;padding:.15rem .45rem;border-radius:4px;margin-left:.4rem}
.gk{font-family:var(--mo);font-weight:650}

/* ---------- Dokumente ---------- */
.dl{display:grid;gap:.5rem}
.di{display:flex;align-items:center;gap:.85rem;padding:.75rem .9rem;background:var(--white);
  border:1px solid var(--ln);border-radius:var(--rs);transition:border-color .16s}
.di:hover{border-color:var(--pt)}
.dic{width:36px;height:44px;border-radius:5px;background:var(--cos);color:var(--co);display:grid;
  place-items:center;flex-shrink:0;font-family:var(--mo);font-size:.62rem;font-weight:700;
  border:1px solid rgba(201,61,26,.22)}
.di .nm{flex:1;min-width:0}
.di .nm b{display:block;font-size:.9rem;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.di .nm span{font-size:.76rem;color:var(--ink3);font-family:var(--mo)}
.drop{border:2px dashed var(--ln2);border-radius:var(--r);padding:1.6rem;text-align:center;
  color:var(--ink3);font-size:.88rem;cursor:pointer;transition:all .18s;background:var(--paper2)}
.drop:hover,.drop.over{border-color:var(--co);background:var(--cos);color:var(--co)}

/* ---------- Verlauf ---------- */
.tl{display:grid;gap:0;position:relative}
.tl::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:var(--ln)}
.tli{display:flex;gap:1rem;padding:.65rem 0;position:relative}
.tli::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--white);
  border:2px solid var(--pt);flex-shrink:0;margin-top:.25rem;z-index:1}
.tli .tx{flex:1}
.tli .tx b{display:block;font-size:.83rem;color:var(--ink3);font-family:var(--mo);margin-bottom:.15rem}
.tli .tx p{font-size:.92rem;line-height:1.5}

/* ---------- Overlay ---------- */
.ov{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.2rem;
  background:rgba(10,27,30,.5);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .24s}
.ov.on{opacity:1;pointer-events:auto}
.sheet{width:min(100%,620px);max-height:90vh;background:var(--white);border-radius:var(--rl);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(22px) scale(.985);opacity:0;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .24s}
.ov.on .sheet{transform:none;opacity:1}
.sheet.wide{width:min(100%,1000px)}
.sh{padding:1.2rem 1.5rem;border-bottom:1px solid var(--ln);display:flex;align-items:center;
  gap:1rem;flex-shrink:0}
.sh h3{flex:1;font-size:1.1rem}
.sx{background:transparent;border:0;cursor:pointer;color:var(--ink3);padding:.3rem;
  border-radius:6px;line-height:0}
.sx:hover{background:var(--paper2);color:var(--ink)}
.sb{padding:1.4rem;display:grid;gap:1rem;overflow:auto}
.sf{padding:1rem 1.5rem;border-top:1px solid var(--ln);display:flex;gap:.6rem;
  justify-content:flex-end;background:var(--paper);flex-shrink:0;flex-wrap:wrap}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.9rem}

/* ---------- Dateivorschau ---------- */
#pv .sheet{width:min(100%,1000px);height:88vh}
#pvBody{flex:1;padding:0;background:var(--paper2)}
#pvBody iframe{width:100%;height:100%;border:0;display:block}
#pvBody img{max-width:100%;max-height:100%;margin:auto;display:block;object-fit:contain}
.pvfall{padding:3rem;text-align:center;color:var(--ink3)}

/* ---------- Toast / Ladebalken ---------- */
#toast{position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,140%);z-index:200;
  background:var(--ink);color:#fff;padding:.8rem 1.3rem;border-radius:99px;font-size:.9rem;
  font-weight:560;box-shadow:0 20px 50px -18px rgba(0,0,0,.6);
  transition:transform .34s cubic-bezier(.2,.9,.3,1);max-width:90vw;text-align:center}
#toast.on{transform:translate(-50%,0)}
#toast.bad{background:var(--bad)}
#bar{position:fixed;top:0;left:0;height:2.5px;width:0;background:var(--cobr);z-index:300;
  transition:width .25s ease,opacity .3s;opacity:0}
#bar.on{opacity:1}

/* ---------- Berichte (Druck) ---------- */
#printArea{display:none}
.doc{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
.doc .dh{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;
  padding-bottom:12pt;border-bottom:2pt solid #0f4c55;margin-bottom:16pt}
.doc .dh h1{font-size:18pt;color:#0f4c55;margin-bottom:3pt}
.doc .dh .me{text-align:right;font-size:8.5pt;color:#555;line-height:1.45}
.doc h2{font-size:9pt;letter-spacing:.1em;text-transform:uppercase;color:#0f4c55;
  border-bottom:.5pt solid #ccc;padding-bottom:3pt;margin:16pt 0 7pt}
.doc table{width:100%;border-collapse:collapse;font-size:9.5pt;min-width:0}
.doc th{background:#f0eee9;text-align:left;padding:5pt 6pt;border-bottom:.5pt solid #bbb;
  font-size:7.5pt;letter-spacing:.06em;text-transform:uppercase;color:#444}
.doc td{padding:5pt 6pt;border-bottom:.5pt solid #e3e0da}
.doc .st{display:inline-block;padding:1pt 5pt;border-radius:8pt;font-size:8pt;font-weight:700}
.doc .s-ok{background:#e7f4ec;color:#1d6b42}
.doc .s-wn{background:#fdf3dd;color:#8a6108}
.doc .s-bad{background:#fbe9e7;color:#8f1e18}
.doc .kv{display:grid;grid-template-columns:repeat(4,1fr);gap:8pt;margin-bottom:4pt}
.doc .kv div{border:.5pt solid #ddd;border-radius:4pt;padding:6pt 8pt}
.doc .kv small{display:block;font-size:7pt;letter-spacing:.08em;text-transform:uppercase;color:#777}
.doc .kv b{font-size:13pt}
.doc .foot{margin-top:20pt;padding-top:8pt;border-top:.5pt solid #ccc;font-size:7.5pt;color:#666;line-height:1.5}

@media print{
  body.printing>*{display:none!important}
  body.printing #printArea{display:block!important}
  @page{size:A4;margin:16mm 14mm}
  .doc table{page-break-inside:auto}
  .doc tr{page-break-inside:avoid}
  .doc h2{page-break-after:avoid}
}

/* ---------- Mobil ---------- */
.mtop{display:none}
@media (max-width:1100px){.pipe{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  #app{grid-template-columns:1fr}
  aside{position:fixed;inset:0 auto 0 0;width:var(--sb);z-index:60;transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.2,.9,.3,1);box-shadow:0 0 60px rgba(0,0,0,.4)}
  aside.open{transform:none}
  .mtop{display:flex;align-items:center;gap:.8rem;padding:.75rem 1rem;background:var(--pt);
    color:#fff;position:sticky;top:0;z-index:50}
  .mtop b{font-weight:700;letter-spacing:-.03em}
  .mtop button{margin-left:auto;background:rgba(255,255,255,.12);border:1px solid var(--dln);
    border-radius:8px;padding:.45rem .55rem;cursor:pointer;line-height:0}
  main{padding:1.3rem 1rem 3.5rem}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .pipe{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:1fr}
  #scrim{position:fixed;inset:0;background:rgba(10,27,30,.5);z-index:55;opacity:0;
    pointer-events:none;transition:opacity .25s}
  #scrim.on{opacity:1;pointer-events:auto}
}
@media (min-width:901px){#scrim{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Feldprüfung ------------------------------------------------------- */
.sheet input.bad,.sheet select.bad,.sheet textarea.bad,
.cb input.bad,.cb select.bad,.cb textarea.bad{
  border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 16%,transparent);}
.ferr{margin:.3rem 0 0;font-size:.78rem;line-height:1.45;color:var(--bad);}
.ferr::before{content:'\26A0\FE0E';margin-right:.35rem;}

/* Umschalter Betriebsart auf der Anmeldeseite --------------------- */
.modus{display:flex;gap:.3rem;background:rgba(255,255,255,.07);padding:.22rem;
  border-radius:9px;margin-bottom:.85rem}
.modus .mbtn{flex:1;border:0;background:transparent;color:inherit;cursor:pointer;
  font:inherit;font-size:.8rem;padding:.44rem .6rem;border-radius:7px;opacity:.7}
.modus .mbtn.on{background:rgba(255,255,255,.16);opacity:1;font-weight:600}
.modus .mbtn:hover{opacity:.95}
.warnhinweis{color:#ffc98a}

/* Änderungsprotokoll: alter und neuer Wert nebeneinander ---------- */
.diff{font-size:.8rem;line-height:1.5;margin-bottom:.15rem}
.diff b{font-weight:600}
.diff s{color:var(--mu);text-decoration:line-through;opacity:.8}
.diff span{color:var(--tx);font-weight:500}
.diff s::after{content:'\2192';margin:0 .3rem;text-decoration:none;display:inline-block}

/* Zwischenüberschrift im Formular --------------------------------- */
.fgrp{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--pt);margin:.9rem 0 .55rem;padding-top:.75rem;border-top:1px solid var(--ln)}

/* Dringlichkeit ---------------------------------------------------- */
.dring{display:inline-flex;align-items:center;gap:.28rem;font-size:.7rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:.2rem .48rem .2rem .38rem;
  border-radius:5px;background:var(--wns);color:var(--wn);
  border:1px solid rgba(168,118,13,.3);white-space:nowrap;vertical-align:middle}
.dring.aus{background:var(--bads);color:var(--bad);border-color:rgba(179,38,30,.32)}
.dring.klein{font-size:.62rem;padding:.12rem .36rem .12rem .28rem}
.dring svg{flex:none}
tr.dringzeile{background:linear-gradient(90deg,rgba(168,118,13,.09),transparent 42%)}
tr.dringzeile.aus{background:linear-gradient(90deg,rgba(179,38,30,.1),transparent 42%)}
.pi.dring-p{border-left:3px solid var(--wn)}
.pi.dring-p.aus{border-left-color:var(--bad)}
.dringkarte{border-left:3px solid var(--wn)}
.dringkarte.aus{border-left-color:var(--bad)}
.navbadge{margin-left:auto;background:var(--bad);color:#fff;font-family:var(--mo);
  font-size:.62rem;font-weight:700;padding:.08rem .34rem;border-radius:99px}


/* =====================================================================
   Autovermietung
   ===================================================================== */
.rentalhero{background:linear-gradient(135deg,var(--ptl),var(--white));border:1px solid rgba(15,76,85,.16)}
.rentalhero-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1.2rem;align-items:center}
.rentalhero .eyebrow{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:750;color:var(--pt);margin-bottom:.25rem}
.rentalhero-actions{display:flex;align-items:center;justify-content:flex-end;gap:.7rem;flex-wrap:wrap}
.rentalhero-actions span{background:rgba(255,255,255,.78);border:1px solid var(--ln);border-radius:var(--rs);padding:.45rem .7rem;font-size:.8rem}
.rentalhero-actions span b{font-size:1rem;color:var(--pt);margin-right:.2rem}
.rental-table .sub{max-width:220px}
.rental-critical{background:var(--bads)!important}
.rental-note{margin-bottom:1rem}
.badtext{color:var(--bad)!important}.warntext{color:var(--wn)!important}.oktext{color:var(--ok)!important}
@media(max-width:820px){.rentalhero-grid{grid-template-columns:1fr}.rentalhero-actions{justify-content:flex-start}.rental-table{min-width:1050px}}

/* ---------- Autovermietung PRO ---------- */
.rental-tabs{margin:.8rem 0 1.1rem}.rental-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.rental-actions,.rental-mini{display:grid}.rental-action,.rental-mini button{border:0;border-bottom:1px solid var(--ln);background:transparent;text-align:left;padding:.85rem 1rem;display:grid;gap:.18rem;cursor:pointer;color:var(--ink)}.rental-action:hover,.rental-mini button:hover{background:var(--ptl)}.rental-action.critical{border-left:4px solid var(--bad);background:var(--bads)}.rental-action span,.rental-mini span{font-size:.82rem;color:var(--ink3)}.rental-fleetcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;padding:1rem}.rental-fleetcard{border:1px solid var(--ln);border-radius:var(--rs);padding:.85rem;background:var(--white);text-align:left;display:grid;gap:.45rem;cursor:pointer}.rental-fleetcard:hover{border-color:var(--pt);box-shadow:var(--sh)}.rental-fleetcard>div{display:flex;justify-content:space-between;gap:.5rem}.rental-fleetcard>div span,.rental-fleetcard small{font-size:.78rem;color:var(--ink3)}.rental-table td{vertical-align:top}.rental-critical{background:var(--bads)}.badtext{color:var(--bad)!important}.warntext{color:var(--wn)!important}.oktext{color:var(--ok)!important}.rental-note{margin-bottom:1rem}.rental-mini button{grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem}.rental-mini .tag{justify-self:end}
@media(max-width:980px){.rental-grid{grid-template-columns:1fr}.rental-fleetcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.rental-fleetcards{grid-template-columns:1fr}.rental-fleetcards{padding:.75rem}.rental-mini button{grid-template-columns:1fr}.rental-mini .tag{justify-self:start}.rental-tabs{overflow:auto;display:flex}.rental-tabs button{white-space:nowrap}}

/* V4 · modulare Leistungspakete / TCO / Aufgaben */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin:1rem 0}
.customer-card{appearance:none;text-align:left;color:inherit;font:inherit;cursor:pointer;width:100%}
.customer-card:hover{border-color:var(--pt);box-shadow:var(--sh)}
.module-summary{display:flex;gap:.4rem;flex-wrap:wrap}
@media(max-width:760px){.cards{grid-template-columns:1fr}}