/* ==========================================================================
   Planbar - Gestaltung
   Dunkle Navigationsleiste, heller Arbeitsbereich. Ruhig, damit die
   Zahlen wirken - die Auslastung ist der Star, nicht die Verzierung.
   ========================================================================== */

:root {
  --nacht:        #141922;
  --nacht-hell:   #1d2530;
  --nacht-rand:   #2a3441;

  --akzent:       #3fa08e;
  --akzent-hell:  #4cb9a5;
  --akzent-dunkel:#2d7d6e;

  --papier:       #f7f8fa;
  --karte:        #ffffff;
  --rand:         #e3e6eb;
  --rand-stark:   #cbd2dc;

  --text:         #1a1f27;
  --text-leise:   #667284;
  --text-blass:   #93a0b0;

  --gut:          #46a86c;
  --gut-flaeche:  #e8f5ed;
  --eng:          #d99b2b;
  --eng-flaeche:  #fdf3e0;
  --voll:         #d1584f;
  --voll-flaeche: #fceceb;
  --gesperrt:     #8b93a1;

  --schatten:     0 1px 2px rgba(20,25,34,.05), 0 4px 12px rgba(20,25,34,.06);
  --schatten-hoch:0 2px 4px rgba(20,25,34,.06), 0 12px 28px rgba(20,25,34,.10);

  --leiste: 232px;
  --rundung: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .5em; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
a { color: var(--akzent-dunkel); }

/* ---------- Gerüst ---------- */
.rahmen { display: flex; min-height: 100vh; }

.leiste {
  width: var(--leiste); flex: none;
  background: var(--nacht);
  color: #c7d0dc;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.leiste__marke {
  padding: 1.4rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--nacht-rand);
}
.leiste__name {
  font-size: 1.15rem; font-weight: 700; color: #fff;
  letter-spacing: -.02em; display: flex; align-items: center; gap: .55rem;
}
.leiste__name::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 0 3px rgba(63,160,142,.22);
}
.leiste__firma {
  font-size: .78rem; color: var(--text-blass); margin-top: .3rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.menue { padding: .9rem .7rem; flex: 1; overflow-y: auto; }
.menue__gruppe {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: #5c6879; padding: .9rem .6rem .35rem; font-weight: 600;
}
.menue a {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .6rem; margin-bottom: 1px;
  border-radius: 7px; text-decoration: none;
  color: #c7d0dc; font-size: .9rem;
  transition: background .12s, color .12s;
}
.menue a:hover { background: var(--nacht-hell); color: #fff; }
.menue a.aktiv { background: var(--akzent-dunkel); color: #fff; font-weight: 500; }
.menue a.aktiv svg { opacity: 1; }
.menue svg { width: 17px; height: 17px; flex: none; opacity: .72; }

.leiste__fuss {
  padding: .85rem 1.25rem; border-top: 1px solid var(--nacht-rand);
  font-size: .8rem;
}
.leiste__fuss a { color: var(--text-blass); text-decoration: none; }
.leiste__fuss a:hover { color: #fff; }
.leiste__person { color: #fff; font-weight: 500; margin-bottom: .1rem; }
.leiste__rolle { color: #5c6879; font-size: .72rem; }

.inhalt { flex: 1; min-width: 0; }
.kopfzeile {
  background: var(--karte); border-bottom: 1px solid var(--rand);
  padding: 1.05rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.kopfzeile h1 { margin: 0; font-size: 1.3rem; }
.kopfzeile__unter { color: var(--text-leise); font-size: .85rem; margin: .1rem 0 0; }
.bereich { padding: 1.75rem; max-width: 1500px; }

/* ---------- Karten ---------- */
.karte {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--rundung); box-shadow: var(--schatten);
}
.karte__kopf {
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.karte__kopf h2 { margin: 0; font-size: 1.02rem; }
.karte__leib { padding: 1.25rem; }
.karte__leib--eng { padding: 0; }

.raster { display: grid; gap: 1.25rem; }
.raster--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* ---------- Kennzahlen ---------- */
.zahl {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: var(--rundung); padding: 1.15rem 1.25rem;
  box-shadow: var(--schatten); position: relative; overflow: hidden;
}
.zahl::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--akzent);
}
.zahl--gut::before  { background: var(--gut); }
.zahl--eng::before  { background: var(--eng); }
.zahl--voll::before { background: var(--voll); }
.zahl__titel {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-leise); font-weight: 600; margin-bottom: .45rem;
}
.zahl__wert {
  font-size: 1.85rem; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.zahl__zusatz { font-size: .82rem; color: var(--text-leise); margin-top: .2rem; }

/* ---------- Auslastungsbalken ---------- */
.balken {
  height: 7px; background: var(--rand); border-radius: 4px;
  overflow: hidden; margin-top: .55rem;
}
.balken__fuellung { height: 100%; border-radius: 4px; transition: width .3s ease; }
.balken__fuellung--gut  { background: var(--gut); }
.balken__fuellung--eng  { background: var(--eng); }
.balken__fuellung--voll { background: var(--voll); }
.balken__fuellung--ueberplant {
  background: repeating-linear-gradient(45deg, var(--voll), var(--voll) 5px,
              #b8453d 5px, #b8453d 10px);
}

/* ---------- Kalender ---------- */
.kalender { overflow-x: auto; }
.kalender table { border-collapse: collapse; width: 100%; min-width: 980px; }
.kalender th, .kalender td {
  border-right: 1px solid var(--rand); border-bottom: 1px solid var(--rand);
  padding: 0; text-align: left; vertical-align: top;
}
.kalender thead th {
  background: var(--papier); padding: .6rem .5rem; min-width: 128px; text-align: center;
  font-size: .78rem; font-weight: 600; color: var(--text-leise);
  position: sticky; top: 0; z-index: 2;
}
.kalender thead th.wochenende { background: #eef0f4; color: var(--text-blass); }
.kalender thead th.heute { background: var(--akzent); color: #fff; }
.kalender th.person {
  width: 190px; min-width: 190px; text-align: left;
  padding: .7rem .85rem; background: var(--karte); position: sticky; left: 0; z-index: 3;
}
.kalender tbody th.person { border-right: 2px solid var(--rand-stark); }
.person__name { font-weight: 600; font-size: .92rem; display: flex; align-items: center; gap: .5rem; }
.person__punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.person__summe { font-size: .76rem; color: var(--text-leise); margin-top: .3rem; }

.zelle { padding: .45rem .4rem; min-height: 78px; position: relative; }
.zelle__termine { max-width: 100%; }
.zelle--wochenende { background: #fafbfc; }
.zelle--heute { background: rgba(63,160,142,.045); }
.zelle--gesperrt {
  background: repeating-linear-gradient(45deg, #f2f3f6, #f2f3f6 6px, #e9ebef 6px, #e9ebef 12px);
}
.zelle__wert {
  font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.zelle__frei { font-size: .73rem; color: var(--text-leise); margin-top: .1rem; }
.zelle__gesperrt {
  font-size: .74rem; color: var(--gesperrt); font-style: italic;
  display: flex; align-items: center; height: 100%; justify-content: center;
}
.zelle a { text-decoration: none; color: inherit; display: block; height: 100%; }
.zelle a:hover .zelle__wert { color: var(--akzent-dunkel); }
.zelle__termine { margin-top: .35rem; display: flex; flex-direction: column; gap: 2px; }
.zelle__termin {
  font-size: .69rem; line-height: 1.3; padding: 3px 5px; border-radius: 3px;
  background: var(--papier); border-left: 2px solid var(--akzent);
  overflow: hidden;
}
.zelle__termin span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zelle__termin-kopf { font-variant-numeric: tabular-nums; color: var(--text); }
.zelle__termin-kopf b { font-weight: 700; }
.zelle__termin-wo  { color: var(--text); font-weight: 500; }
.zelle__termin-was { color: var(--text-leise); }
.zelle__mehr {
  font-size: .69rem; padding: 3px 5px; border-radius: 3px;
  background: transparent; color: var(--akzent-dunkel); font-weight: 600;
  border-left: 2px solid var(--rand-stark);
}
.zelle a:hover .zelle__mehr { text-decoration: underline; }

.wert--gut  { color: var(--gut); }
.wert--eng  { color: var(--eng); }
.wert--voll { color: var(--voll); }

/* ---------- Tabellen ---------- */
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th {
  text-align: left; padding: .65rem 1.25rem; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise);
  font-weight: 600; border-bottom: 1px solid var(--rand); background: var(--papier);
}
.tabelle td { padding: .8rem 1.25rem; border-bottom: 1px solid var(--rand); }
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle tbody tr:hover { background: #fafbfc; }
.tabelle a { color: var(--text); text-decoration: none; font-weight: 500; }
.tabelle a:hover { color: var(--akzent-dunkel); }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .52rem 1rem; border-radius: 7px; border: 1px solid transparent;
  font-size: .88rem; font-weight: 500; font-family: inherit;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.knopf--voll { background: var(--akzent); color: #fff; }
.knopf--voll:hover { background: var(--akzent-hell); }
.knopf--rand { background: var(--karte); border-color: var(--rand-stark); color: var(--text); }
.knopf--rand:hover { border-color: var(--text-leise); }
.knopf--leise { color: var(--text-leise); }
.knopf--leise:hover { background: var(--papier); color: var(--text); }
.knopf--klein { padding: .34rem .7rem; font-size: .8rem; }
.knopf svg { width: 15px; height: 15px; }

/* ---------- Formulare ---------- */
.feld { margin-bottom: 1.1rem; }
.feld label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--text-leise); margin-bottom: .3rem;
}
.feld input, .feld select, .feld textarea {
  width: 100%; padding: .55rem .7rem; font-size: .92rem; font-family: inherit;
  border: 1px solid var(--rand-stark); border-radius: 7px;
  background: var(--karte); color: var(--text);
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(63,160,142,.14);
}
.feld__hinweis { font-size: .78rem; color: var(--text-leise); margin-top: .3rem; }
.feld--reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }

.meldung {
  padding: .8rem 1rem; border-radius: 7px; margin-bottom: 1.1rem; font-size: .9rem;
}
.meldung--fehler { background: var(--voll-flaeche); color: #9b3d36; border: 1px solid #f0c9c6; }
.meldung--hinweis { background: #eef4fb; color: #2c5178; border: 1px solid #d3e2f2; }
.meldung--gut { background: var(--gut-flaeche); color: #2c6b45; border: 1px solid #c7e6d4; }

/* ---------- Marken ---------- */
.marke {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .16rem .55rem; border-radius: 20px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.marke--offen     { background: #eef0f4; color: #5b6676; }
.marke--geplant   { background: #e9f1fa; color: #2f6296; }
.marke--unterwegs { background: var(--eng-flaeche); color: #96661a; }
.marke--erledigt  { background: var(--gut-flaeche); color: #2c6b45; }
.marke--abgesagt  { background: #f2f3f6; color: var(--text-blass); text-decoration: line-through; }
.marke--hoch      { background: var(--voll-flaeche); color: #9b3d36; }

/* ---------- Leerzustand ---------- */
.leer { text-align: center; padding: 3rem 1.5rem; color: var(--text-leise); }
.leer svg { width: 40px; height: 40px; opacity: .3; margin-bottom: .8rem; }
.leer h3 { color: var(--text); }

/* ==========================================================================
   Unterwegs - Handyansicht
   ========================================================================== */
.mobil { background: var(--papier); min-height: 100vh; }
.mobil__kopf {
  background: var(--nacht); color: #fff; padding: 1rem 1.1rem .9rem;
  position: sticky; top: 0; z-index: 20;
}
.mobil__tag { font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em; }
.mobil__unter { font-size: .82rem; color: var(--text-blass); margin-top: .1rem; }
.mobil__blaettern { display: flex; gap: .5rem; margin-top: .85rem; }
.mobil__blaettern a {
  flex: 1; text-align: center; padding: .45rem; border-radius: 7px;
  background: var(--nacht-hell); color: #c7d0dc; text-decoration: none; font-size: .84rem;
}
.mobil__blaettern a.jetzt { background: var(--akzent); color: #fff; font-weight: 600; }

.mobil__bilanz {
  display: flex; gap: .6rem; padding: .9rem 1.1rem;
  background: var(--karte); border-bottom: 1px solid var(--rand);
}
.mobil__bilanz div { flex: 1; text-align: center; }
.mobil__bilanz b {
  display: block; font-size: 1.15rem; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.mobil__bilanz span {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-leise);
}

.mobil__liste { padding: .9rem; display: flex; flex-direction: column; gap: .8rem; }
.einsatz {
  background: var(--karte); border: 1px solid var(--rand);
  border-radius: 12px; overflow: hidden; box-shadow: var(--schatten);
  border-left: 4px solid var(--akzent);
}
.einsatz--erledigt { opacity: .6; border-left-color: var(--gut); }
.einsatz--unterwegs { border-left-color: var(--eng); box-shadow: var(--schatten-hoch); }
.einsatz__zeit {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .8rem 1rem .1rem;
}
.einsatz__uhr {
  font-size: 1.45rem; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.einsatz__dauer { font-size: .82rem; color: var(--text-leise); }
.einsatz__leib { padding: .3rem 1rem 1rem; }
.einsatz__was { font-size: 1.02rem; font-weight: 600; margin-bottom: .15rem; }
.einsatz__wer { color: var(--text-leise); font-size: .9rem; }
.einsatz__wo {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--rand);
  font-size: .92rem;
}
.einsatz__wo svg { width: 17px; height: 17px; color: var(--text-leise); flex: none; margin-top: 2px; }
.einsatz__notiz {
  margin-top: .7rem; padding: .6rem .75rem; background: var(--papier);
  border-radius: 7px; font-size: .87rem; color: var(--text-leise);
}
.einsatz__knoepfe {
  display: flex; gap: .5rem; padding: .75rem 1rem;
  background: var(--papier); border-top: 1px solid var(--rand);
}
.einsatz__knoepfe .knopf { flex: 1; justify-content: center; }
.einsatz__knoepfe form { flex: 1; display: flex; }
.einsatz__knoepfe form .knopf { width: 100%; }

@media (max-width: 900px) {
  .rahmen { flex-direction: column; }
  .leiste {
    width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: .55rem .9rem;
  }
  .leiste__marke { border: none; padding: 0; }
  .leiste__firma { display: none; }
  .menue {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--nacht);
    padding: .6rem; display: none; z-index: 50; max-height: 75vh;
  }
  .menue[data-offen="ja"] { display: block; }
  .leiste__fuss { border: none; padding: 0; }
  .bereich { padding: 1rem; }
  .kopfzeile { padding: .9rem 1rem; }
}

@media print {
  .leiste, .kopfzeile, .knopf, .mobil__blaettern, .einsatz__knoepfe { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; border-color: #ccc; }
}

/* ---------- Kommen und Gehen ---------- */
.stempel {
  display: flex; align-items: center; gap: .3rem; justify-content: center;
  font-size: .78rem; font-variant-numeric: tabular-nums; padding: .3rem 0;
}
.stempel__kommen { font-weight: 600; color: var(--text); }
.stempel__pfeil  { color: var(--text-blass); font-size: .7rem; }
.stempel__gehen  { color: var(--text-leise); }
.stempel__offen  { color: var(--eng); font-weight: 600; }
.stempel__leer   { text-align: center; color: var(--text-blass); padding: .3rem 0; }