/* anwendbar Leitstand */
:root {
  --tinte: #191817;
  --papier: #f5f4f1;
  --weiss: #ffffff;
  --signal: #e8500b;
  --signal-hell: #fdeee6;
  --linie: #d8d5d0;
  --neben: #6b6862;
  --warn: #b3261e;
  --warn-hell: #fbeceb;
  --gut: #2f6b3a;
  --schrift: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --schmal: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papier);
  color: var(--tinte);
  font: 16px/1.5 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2 { font-family: var(--schmal); font-weight: 600; letter-spacing: .01em; margin: 0; }
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; }

/* Rahmen */
.rahmen { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.seitenleiste {
  border-right: 1px solid var(--linie);
  padding: 2rem 1.5rem;
  display: flex; flex-direction: column; gap: 1.5rem;
  position: sticky; top: 0; height: 100vh;
}
.marke { font-family: var(--schmal); font-weight: 600; font-size: 1.6rem; text-decoration: none; margin: 0; }
.marke span { color: var(--signal); }
.kunde { margin: -1rem 0 0; color: var(--neben); font-size: .9rem; }
nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.nav-titel { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--neben); margin: 1rem 0 .4rem; }
.nav-punkt { display: block; padding: .35rem .6rem; border-radius: 4px; text-decoration: none; }
.nav-punkt:hover { background: var(--weiss); }
.nav-punkt.aktiv { background: var(--tinte); color: var(--papier); }
.nav-punkt.unter { font-size: .9rem; padding-left: 1.2rem; color: var(--neben); }
.nav-punkt.unter.aktiv { color: var(--papier); }
.nav-punkt.aus { color: var(--neben); opacity: .55; cursor: default; }
.ich { font-size: .9rem; display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid var(--linie); padding-top: 1rem; }
.ich a { color: var(--neben); }

.inhalt { padding: 2.5rem 3rem 4rem; min-width: 0; }
.allein { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }

/* Kopf */
.kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.ueber { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--neben); margin: 0 0 .3rem; }
.zurueck { margin: 0 0 1.25rem; font-size: .9rem; }
.zurueck a { color: var(--neben); text-decoration: none; }
.neben { color: var(--neben); }
.klein { font-size: .85rem; }
.leer { color: var(--neben); }

.umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 999px; padding: 3px; background: var(--weiss); }
.umschalter a { text-decoration: none; padding: .3rem .9rem; border-radius: 999px; font-size: .9rem; color: var(--neben); }
.umschalter a.an { background: var(--tinte); color: var(--papier); }

/* Kennzahlen */
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.5rem; }
.zahl { background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 1.1rem 1.25rem; display: flex; flex-direction: column; }
.zahl .wert { font-family: var(--schmal); font-size: 2.4rem; font-weight: 600; line-height: 1; }
.zahl .name { color: var(--neben); font-size: .9rem; margin-top: .4rem; }
.zahl.signal { border-color: var(--signal); }
.zahl.signal .wert { color: var(--signal); }
.zahl.warn .wert { color: var(--warn); }

/* Tafel */
.tafel { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2rem 1rem; align-items: start; }
.spalte { border-top: 2px solid var(--linie); padding-top: .75rem; min-width: 0; }
.spalte.mensch { border-top-color: var(--signal); }
.spalte h2 { font-size: .95rem; display: flex; justify-content: space-between; }
.anzahl { font-family: var(--mono); color: var(--neben); font-weight: 400; }
.karte { display: flex; flex-direction: column; gap: .35rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: .9rem 1rem; margin-bottom: .75rem; text-decoration: none; transition: border-color .15s; }
.karte:hover { border-color: var(--tinte); }
.karte .titel { font-weight: 600; line-height: 1.3; }
.karte .zeile { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
.karte .makler { color: var(--neben); }
.karte .hinweis { color: var(--signal); font-weight: 500; }
.karte .zeit { font-family: var(--mono); font-size: .75rem; color: var(--neben); }

/* Detail */
.status { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; border: 1px solid var(--tinte); border-radius: 999px; padding: .3rem .8rem; }
.status-zur_freigabe { border-color: var(--signal); color: var(--signal); }
.status-fehler { border-color: var(--warn); color: var(--warn); }
.status-online, .status-freigegeben { border-color: var(--gut); color: var(--gut); }
.bestaetigung { background: var(--weiss); border-left: 3px solid var(--gut); padding: .75rem 1rem; margin: 0 0 1.5rem; }
.warnungen { background: var(--signal-hell); border-left: 3px solid var(--signal); padding: 1rem 1.25rem; margin-bottom: 2rem; border-radius: 0 6px 6px 0; }
.warnungen ul { margin: 0; padding-left: 1.1rem; }
.warnungen li { margin: .2rem 0; }
.warnungen li.stufe-fehler { color: var(--warn); font-weight: 600; }

.aktionen { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 1.25rem; margin-bottom: 2.5rem; }
.aktionen form { display: flex; gap: .6rem; flex-wrap: wrap; }
.aktionen .korrektur { flex: 1; min-width: 260px; flex-direction: column; }
.korrektur label { font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--neben); }
textarea, input, select { font: inherit; color: inherit; border: 1px solid var(--linie); border-radius: 4px; padding: .55rem .7rem; background: var(--papier); width: 100%; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--tinte); outline-offset: 1px; }
.korrektur .knopf { align-self: flex-start; }

.knopf { display: inline-block; font: 500 .95rem var(--schrift); border: 1px solid var(--tinte); background: var(--weiss); color: var(--tinte); padding: .55rem 1.1rem; border-radius: 4px; cursor: pointer; text-decoration: none; }
.knopf:hover { background: var(--tinte); color: var(--papier); }
.knopf.signal { background: var(--signal); border-color: var(--signal); color: var(--weiss); }
.knopf.signal:hover { background: var(--tinte); border-color: var(--tinte); }
.knopf.breit { display: block; text-align: center; margin-top: 1.5rem; }

.zwei { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; }
.zeitstrahl { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 1px solid var(--linie); }
.zeitstrahl li { position: relative; padding: 0 0 1.1rem .75rem; }
.zeitstrahl li::before { content: ""; position: absolute; left: calc(-1rem - 5px); top: .45rem; width: 9px; height: 9px; border-radius: 50%; background: var(--linie); }
.zeitstrahl time { display: block; font-family: var(--mono); font-size: .75rem; color: var(--neben); }
.zeitstrahl li.stufe-warnung::before { background: var(--signal); }
.zeitstrahl li.stufe-warnung .text { color: var(--signal); font-weight: 500; }
.zeitstrahl li.stufe-fehler::before { background: var(--warn); }
.zeitstrahl li.stufe-fehler .text { color: var(--warn); font-weight: 600; }
.zeitstrahl li.stufe-freigabe::before { background: var(--gut); }
.zeitstrahl li.stufe-freigabe .text { color: var(--gut); font-weight: 500; }
.dateien { list-style: none; margin: 0; padding: 0; }
.dateien li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.dateien a { font-weight: 500; word-break: break-all; }
.dateien .art { font-family: var(--mono); font-size: .75rem; color: var(--neben); white-space: nowrap; }

/* Bericht */
.tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; }
.tabelle th, .tabelle td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--linie); }
.tabelle th { font-family: var(--mono); font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--neben); }
.tabelle .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Anmeldung und Fehler */
.karte-gross { background: var(--weiss); border: 1px solid var(--linie); border-radius: 8px; padding: 2.5rem; max-width: 440px; width: 100%; margin: 2rem auto; }
.karte-gross h1 { margin: .5rem 0 1rem; }
.karte-gross .knopf { margin-top: 1rem; }
.dev { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px dashed var(--linie); }
.dev form { display: flex; flex-direction: column; gap: .75rem; }
.dev label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--neben); }

/* Handy: eine Spalte */
@media (max-width: 860px) {
  .rahmen { grid-template-columns: 1fr; }
  .seitenleiste { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--linie); padding: 1rem 1.25rem; gap: .75rem; }
  .kunde { margin: -.5rem 0 0; }
  nav { flex-direction: row; flex-wrap: wrap; gap: .3rem; }
  .nav-titel { display: none; }
  .nav-punkt.unter { padding-left: .6rem; }
  .nav-punkt.aus { display: none; }
  .ich { flex-direction: row; justify-content: space-between; padding-top: .6rem; }
  .inhalt { padding: 1.5rem 1.25rem 3rem; }
  h1 { font-size: 1.6rem; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .tafel { grid-template-columns: 1fr; gap: 1rem; }
  .leer-spalte { display: none; }
  .zwei { grid-template-columns: 1fr; gap: 2rem; }
  .tabelle { font-size: .9rem; }
  .tabelle th, .tabelle td { padding: .6rem .5rem; }
}