/* WICKART.DIGITAL — Leistungserfassung. Farben und Formen nach Corporate Design. */
:root{
  --blau:#4A6988; --blau-mid:#6E8AA5; --blau-zart:#C7D1DA;
  --anthrazit:#373A3F; --offwhite:#F1F1F0; --weiss:#FFFFFF;
  --beere:#B43C6F; --gold:#C8963E; --moos:#3B7458; --kupfer:#AD5F26; --terra:#B45A48;
  --rahmen:#EDEDED; --sek:#747D88; --radius:3px;
  --sans:"Open Sans",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--offwhite);color:var(--anthrazit);
  font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--beere)}
:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

/* Gerüst */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.rail{background:var(--weiss);border-right:1px solid var(--rahmen);
  display:flex;flex-direction:column;gap:2px;padding:24px 14px 18px;position:sticky;top:0;height:100vh}
.brand{display:flex;flex-direction:column;gap:1px;padding:0 10px 24px;line-height:1.3}
.logo{width:152px;height:auto;display:block;margin-bottom:12px}
.logo-m{display:none}
.brand .mark{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--blau)}
.navbtn{display:flex;align-items:center;gap:11px;text-decoration:none;
  border-left:3px solid transparent;padding:9px 10px;color:var(--anthrazit);font-weight:400}
.navbtn:hover{background:var(--offwhite)}
.navbtn.aktiv{background:var(--offwhite);border-left-color:var(--blau);color:var(--blau);font-weight:700}
.navbtn .ic{width:18px;text-align:center;color:var(--blau)}
.rail .spacer{flex:1}
.who{border-top:1px solid var(--rahmen);padding:14px 10px 0;margin-top:10px;
  display:flex;align-items:center;gap:11px}
.avatar{width:32px;height:32px;border-radius:var(--radius);background:var(--blau);
  color:var(--offwhite);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.who .nm{font-size:13px;font-weight:700;line-height:1.35}
.who .rl{font-size:11.5px;color:var(--sek);line-height:1.35}
.abmelden{display:block;margin-top:10px;padding:0 10px;font-size:12.5px;color:var(--sek);text-decoration:none}
.abmelden:hover{color:var(--beere)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{padding:28px 32px 0}
h1{font-size:30px;font-weight:600;margin:0;color:var(--blau);line-height:1.25}
.eyebrow{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin:0 0 4px}
.lead{color:var(--sek);font-size:14px;margin:8px 0 0;max-width:70ch;line-height:1.6}
.content{padding:24px 32px 140px;display:flex;flex-direction:column;gap:22px}

.meldungen{padding:16px 32px 0;display:flex;flex-direction:column;gap:8px}
.meldung{background:var(--weiss);border:1px solid var(--rahmen);border-left:3px solid var(--moos);
  border-radius:var(--radius);padding:11px 14px;font-size:13.5px}
.meldung.m-fehler{border-left-color:var(--terra)}
.meldung.m-hinweis{border-left-color:var(--kupfer)}

/* Flächen */
.panel{background:var(--weiss);border:1px solid var(--rahmen);border-radius:var(--radius)}
.panel-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:15px 20px;border-bottom:1px solid var(--rahmen);flex-wrap:wrap}
.panel-hd h2{font-size:18px;font-weight:700;margin:0;color:var(--blau);line-height:1.4}
.panel-hd .note{font-size:12.5px;color:var(--sek)}
.panel-bd{padding:18px 20px}

.filter{display:flex;align-items:end;gap:16px;flex-wrap:wrap;background:var(--weiss);
  border:1px solid var(--rahmen);border-radius:var(--radius);padding:12px 16px}
.monthnav{display:flex;align-items:center;gap:3px}
.monthnav a{width:32px;height:32px;border:1px solid var(--blau-zart);background:var(--weiss);
  border-radius:var(--radius);color:var(--blau);text-decoration:none;
  display:grid;place-items:center;font-size:15px}
.monthnav a:hover{background:var(--offwhite)}
.monthnav .lbl{min-width:150px;text-align:center;font-weight:700;font-size:15px}
.fgrow{flex:1}

/* Formulare */
label.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
label.fld > span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sek);font-weight:700;line-height:1.4}
input[type=text],input[type=date],input[type=number],input[type=email],input[type=password],select,textarea{
  background:var(--weiss);border:1px solid var(--blau-zart);border-radius:var(--radius);
  padding:8px 10px;width:100%;line-height:1.4}
input[readonly]{background:var(--offwhite);color:var(--sek)}
input:focus,select:focus,textarea:focus{border-color:var(--blau);outline:none}
textarea{resize:vertical;font-family:inherit}

.btn{display:inline-block;border:1px solid var(--blau-zart);background:var(--weiss);color:var(--blau);
  border-radius:var(--radius);padding:9px 16px;font-weight:600;cursor:pointer;text-decoration:none;
  line-height:1.3;text-align:center}
.btn:hover{background:var(--offwhite)}
.btn-primary{background:var(--beere);border-color:var(--beere);color:var(--offwhite);
  font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:14px}
.btn-primary:hover{background:#9E3462;border-color:#9E3462}
.btn-terra{border-color:var(--terra);color:var(--terra)}
.btn-terra:hover{background:rgba(180,90,72,.07)}
.btn-sm{padding:5px 11px;font-size:13px;text-transform:none;letter-spacing:0;font-weight:600}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:default}

.form-grid{display:grid;gap:14px;grid-template-columns:130px 1fr 160px 92px 106px 122px;align-items:end}
.form-grid .wide{grid-column:1/-1}
.form-actions{display:flex;gap:14px;align-items:center;margin-top:16px;flex-wrap:wrap}
.hint{font-size:12.5px;color:var(--sek);line-height:1.6}
.sumcell{display:flex;flex-direction:column;gap:2px}
.sumcell .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sek);font-weight:700}
.sumcell .v{font-size:22px;font-weight:600;color:var(--blau);line-height:1.2}

/* Tabellen */
.tablewrap{overflow-x:auto;padding:16px 6px 6px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sek);
  font-weight:700;padding:0 12px 10px;white-space:nowrap}
td{padding:11px 12px;border-top:1px solid var(--rahmen);vertical-align:top;line-height:1.5}
tbody tr:hover{background:var(--offwhite)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt{font-variant-numeric:tabular-nums;color:var(--sek);white-space:nowrap}
.desc{font-weight:600}
.desc small{display:block;color:var(--sek);font-weight:400;font-size:12.5px;margin-top:1px}
.total-row td{border-top:2px solid var(--blau);font-weight:700;background:var(--offwhite)}
tr.ist-storno td{color:var(--sek)}
tr.ist-storno .desc{text-decoration:line-through;color:var(--sek)}

.chip{display:inline-block;padding:2px 8px;border-radius:var(--radius);font-size:11.5px;
  font-weight:600;border:1px solid var(--rahmen);color:var(--sek);background:var(--offwhite);white-space:nowrap}
.pill{display:inline-block;padding:3px 9px;border-radius:var(--radius);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent;white-space:nowrap;
  text-decoration:none;line-height:1.5}
.pill-open{background:rgba(173,95,38,.11);color:var(--kupfer);border-color:rgba(173,95,38,.28)}
.pill-done{background:rgba(59,116,88,.11);color:var(--moos);border-color:rgba(59,116,88,.28)}
.pill-storno{background:rgba(180,90,72,.11);color:var(--terra);border-color:rgba(180,90,72,.28)}

/* Kennzahlen */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{background:var(--weiss);border:1px solid var(--rahmen);border-radius:var(--radius);
  padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.tile .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--sek);font-weight:700}
.tile .v{font-size:28px;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums}
.tile .s{font-size:12.5px;color:var(--sek)}
.tile-total{border-left:3px solid var(--gold)} .tile-total .v{color:var(--gold)}
.tile-open{border-left:3px solid var(--kupfer)} .tile-open .v{color:var(--kupfer)}
.tile-done{border-left:3px solid var(--moos)} .tile-done .v{color:var(--moos)}

.statusbar{position:fixed;left:240px;right:0;bottom:0;background:var(--weiss);
  border-top:1px solid var(--rahmen);padding:12px 32px;display:flex;align-items:center;
  gap:24px;flex-wrap:wrap;z-index:20}
.statusbar .grp{display:flex;flex-direction:column;line-height:1.3}
.statusbar .k{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sek);font-weight:700}
.statusbar .v{font-weight:600;font-variant-numeric:tabular-nums}
.statusbar .v.big{font-size:19px;color:var(--blau)}
.statusbar .v.offen{color:var(--kupfer)}

/* Stammdaten */
.md-editable{background:none;border:1px solid transparent;border-radius:var(--radius);padding:5px 7px;width:100%}
.md-editable:hover{border-color:var(--rahmen);background:var(--offwhite)}
.md-editable:focus{background:var(--weiss);border-color:var(--blau)}
.addrow{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--rahmen)}
.addrow label.fld{flex:1;min-width:130px}
.buchen{display:flex;gap:14px;align-items:end;flex-wrap:wrap;padding:16px 20px;
  border-top:1px solid var(--rahmen);background:var(--offwhite)}
.buchen label.fld{width:170px}
.buchen .note{font-size:12.5px;color:var(--sek);width:100%;margin:0}
.roleline{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--rahmen)}
.roleline:first-of-type{border-top:0}
.roleline .nm{font-weight:700}
.roleline .em{font-size:12.5px;color:var(--sek)}
.empty{padding:38px 20px;text-align:center;color:var(--sek);font-size:14px}
.empty b{display:block;color:var(--blau);font-weight:600;font-size:18px;margin-bottom:4px}

/* Anmeldung */
.loginwrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--offwhite)}
.loginbox{width:100%;max-width:380px;background:var(--weiss);border:1px solid var(--rahmen);
  border-radius:var(--radius);padding:32px}
.loginbox .logo{margin:0 auto 22px}
.loginbox h1{font-size:20px;margin:0 0 18px;text-align:center}
.loginbox form{display:flex;flex-direction:column;gap:14px}
.loginbox .fehler{background:rgba(180,90,72,.09);border-left:3px solid var(--terra);
  padding:10px 12px;font-size:13.5px;border-radius:var(--radius)}

.tabs-m{display:none}

@media (max-width:920px){
  .shell{grid-template-columns:1fr}
  .rail{display:none}
  .statusbar{left:0;bottom:60px}
  .tabs-m{display:grid;grid-auto-flow:column;position:fixed;left:0;right:0;bottom:0;
    background:var(--weiss);border-top:1px solid var(--rahmen);z-index:30}
  .tabs-m a{border-top:3px solid transparent;padding:7px 2px 10px;color:var(--sek);
    display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;
    font-weight:700;text-decoration:none}
  .tabs-m a .ic{font-size:16px}
  .tabs-m a.aktiv{color:var(--blau);border-top-color:var(--blau);background:var(--offwhite)}
  .topbar,.content,.meldungen{padding-left:18px;padding-right:18px}
  .content{padding-bottom:215px}
  .logo-m{display:block;width:136px;height:auto;margin-bottom:14px}
  .form-grid{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr}
  h1{font-size:23px}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .monthnav .lbl{min-width:120px;font-size:14px}
}