/*
 * regio-logistik Greven GmbH — Sendungsverfolgung 2G Energietechnik
 *
 * CI: Akzent-Gruen #89B71A, Text-Dunkelgrau #39393A, Hintergrund Weiss/Hellgrau,
 * Schrift Calibri (Web-Fallback Carlito, dann systemeigene Schriften).
 *
 * Bewusst KEINE Webfonts von externen Servern (Google Fonts o.ae.): das waere
 * eine IP-Uebermittlung an Dritte ohne Rechtsgrundlage. Die Schriftkette greift
 * auf lokal vorhandene Schriften zurueck.
 *
 * Zu den Statusfarben: Die CI verbietet weitere MARKEN-Akzentfarben. Rot und
 * Bernstein werden hier ausschliesslich als funktionale Signale fuer Stoerung
 * und Verzug eingesetzt — gedaempft, damit sie das Marken-Gruen nicht
 * konkurrenzieren. Ohne dieses Signal waere der wichtigste Teil der Anwendung
 * (die Verzugswarnung) nicht auf einen Blick erkennbar.
 */

:root {
  --gruen: #89B71A;
  --gruen-dunkel: #6f9415;
  --gruen-hell: #f2f8e6;
  --dunkelgrau: #39393A;
  --grau-60: #6b6b6d;
  --grau-40: #9a9a9c;
  --grau-20: #d8d8da;
  --grau-10: #ececee;
  --grau-05: #f6f6f7;
  --weiss: #ffffff;

  /* funktionale Signalfarben, gedaempft */
  --stoerung: #b3261e;
  --stoerung-hell: #fdeceb;
  --verzug: #9a6700;
  --verzug-hell: #fdf6e3;

  --radius: 8px;
  --schatten: 0 1px 2px rgba(57, 57, 58, .06), 0 2px 8px rgba(57, 57, 58, .04);
  --schrift: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--schrift);
  color: var(--dunkelgrau);
  background: var(--grau-05);
  font-size: 16px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ Login */

.login-seite {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--grau-05);
}

.login-karte {
  width: 100%;
  max-width: 400px;
  background: var(--weiss);
  border: 1px solid var(--grau-20);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 32px;
}

.login-karte img.logo { height: 52px; width: auto; display: block; margin: 0 auto 24px; }
.login-karte h1 { font-size: 20px; margin: 0 0 4px; color: var(--dunkelgrau); font-weight: 700; text-align: center; }
.login-karte .unterzeile { font-size: 14px; color: var(--grau-60); text-align: center; margin: 0 0 24px; }

/* ----------------------------------------------------------------- Layout */

.kopf {
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-20);
  padding: 0 24px;
}

.kopf-inhalt {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
}

.kopf .titel { font-size: 17px; font-weight: 700; margin: 0; }
.kopf .titel span { display: block; font-size: 13px; font-weight: 400; color: var(--grau-60); }
/* Logo laut CI oben rechts */
.kopf img.logo { height: 42px; width: auto; }

.kopf-rechts { display: flex; align-items: center; gap: 20px; }
.nutzer { font-size: 13px; color: var(--grau-60); text-align: right; }
.nutzer strong { display: block; color: var(--dunkelgrau); font-weight: 600; }

.navigation {
  background: var(--weiss);
  border-bottom: 1px solid var(--grau-20);
  padding: 0 24px;
}
.navigation-inhalt { max-width: 1240px; margin: 0 auto; display: flex; gap: 4px; }

.tab {
  appearance: none;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--grau-60);
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--dunkelgrau); }
.tab.aktiv { color: var(--dunkelgrau); font-weight: 600; border-bottom-color: var(--gruen); }

main { max-width: 1240px; margin: 0 auto; padding: 24px; }

/* ------------------------------------------------------------------- KPIs */

.kpi-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi {
  background: var(--weiss);
  border: 1px solid var(--grau-20);
  border-radius: var(--radius);
  padding: 16px;
}
.kpi .wert { font-size: 30px; font-weight: 700; line-height: 1.1; }
.kpi .bezeichnung { font-size: 13px; color: var(--grau-60); margin-top: 4px; }
.kpi.betont { border-left: 3px solid var(--gruen); }
.kpi.warnung .wert { color: var(--verzug); }
.kpi.stoerung .wert { color: var(--stoerung); }

/* ----------------------------------------------------------------- Alarme */

.alarm-block {
  background: var(--weiss);
  border: 1px solid var(--grau-20);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.alarm-block.hat-alarme { border-color: #f0c9c6; }

.alarm-kopf {
  padding: 14px 18px;
  border-bottom: 1px solid var(--grau-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.alarm-block.hat-alarme .alarm-kopf { background: var(--stoerung-hell); border-bottom-color: #f0c9c6; }
.alarm-kopf h2 { margin: 0; font-size: 16px; font-weight: 700; }
.alarm-block.hat-alarme .alarm-kopf h2 { color: var(--stoerung); }

.alarm-zeile {
  padding: 14px 18px;
  border-bottom: 1px solid var(--grau-10);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  cursor: pointer;
}
.alarm-zeile:last-child { border-bottom: none; }
.alarm-zeile:hover { background: var(--grau-05); }
.alarm-zeile .marke { width: 4px; align-self: stretch; border-radius: 2px; flex: none; }
.alarm-zeile.nicht_zustellbar .marke { background: var(--stoerung); }
.alarm-zeile.verspaetet .marke { background: var(--verzug); }
.alarm-zeile.zugestellt_spaet .marke { background: var(--grau-40); }
.alarm-zeile .inhalt { flex: 1; min-width: 0; }
.alarm-zeile .kopfzeile { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.alarm-zeile .art { font-weight: 700; font-size: 14px; }
.alarm-zeile.nicht_zustellbar .art { color: var(--stoerung); }
.alarm-zeile.verspaetet .art { color: var(--verzug); }
.alarm-zeile .nummer { font-size: 13px; color: var(--grau-60); font-variant-numeric: tabular-nums; }
.alarm-zeile .beschreibung { font-size: 14px; margin-top: 3px; }
.alarm-zeile .meta { font-size: 12px; color: var(--grau-60); margin-top: 4px; }

.leer-hinweis { padding: 28px 18px; text-align: center; color: var(--grau-60); font-size: 14px; }
.leer-hinweis .haken { color: var(--gruen); font-size: 22px; display: block; margin-bottom: 6px; }

/* --------------------------------------------------------------- Tabellen */

.karte {
  background: var(--weiss);
  border: 1px solid var(--grau-20);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.karte-kopf {
  padding: 14px 18px;
  border-bottom: 1px solid var(--grau-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.karte-kopf h2 { margin: 0; font-size: 16px; font-weight: 700; }

.tabellen-huelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  background: var(--grau-05);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--grau-60);
  padding: 10px 14px;
  border-bottom: 1px solid var(--grau-20);
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--grau-10); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--grau-05); }
tbody tr.hat-alarm { background: var(--stoerung-hell); }
tbody tr.hat-alarm:hover { background: #fbe2e0; }

.nr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gedimmt { color: var(--grau-60); font-size: 13px; }

/* ----------------------------------------------------------------- Badges */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge.erfasst,
.badge.im_lager { background: var(--grau-10); color: var(--grau-60); border-color: var(--grau-20); }
.badge.avisiert,
.badge.in_zustellung { background: var(--gruen-hell); color: var(--gruen-dunkel); border-color: #d3e6ad; }
.badge.zugestellt { background: var(--gruen); color: var(--weiss); }
.badge.retourniert { background: var(--grau-10); color: var(--dunkelgrau); border-color: var(--grau-20); }
.badge.problem { background: var(--stoerung-hell); color: var(--stoerung); border-color: #f0c9c6; }

.express-marke {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--dunkelgrau);
  color: var(--weiss);
}

/* ------------------------------------------------------------- Formulare */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }

input[type="text"], input[type="password"], input[type="search"] {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--dunkelgrau);
  padding: 9px 12px;
  border: 1px solid var(--grau-20);
  border-radius: 6px;
  background: var(--weiss);
}
input:focus { outline: 2px solid var(--gruen); outline-offset: -1px; border-color: var(--gruen); }

.feld { margin-bottom: 16px; }

button.knopf {
  appearance: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid var(--gruen);
  background: var(--gruen);
  color: var(--weiss);
  cursor: pointer;
}
button.knopf:hover { background: var(--gruen-dunkel); border-color: var(--gruen-dunkel); }
button.knopf:disabled { opacity: .55; cursor: default; }
button.knopf.voll { width: 100%; }
button.knopf.sekundaer { background: var(--weiss); color: var(--dunkelgrau); border-color: var(--grau-20); }
button.knopf.sekundaer:hover { background: var(--grau-05); border-color: var(--grau-40); }
button.knopf.klein { font-size: 13px; padding: 6px 12px; }

.fehler {
  background: var(--stoerung-hell);
  border: 1px solid #f0c9c6;
  color: var(--stoerung);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 16px;
}

.hinweis-streifen {
  background: var(--verzug-hell);
  border: 1px solid #ecd9a8;
  color: var(--verzug);
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 20px;
}

/* ------------------------------------------------------------- Suchseite */

.such-reihe { display: flex; gap: 10px; align-items: flex-end; }
.such-reihe .feld { flex: 1; margin-bottom: 0; }

/* ------------------------------------------------------------- Detail */

.detail-gitter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; padding: 18px; }
.detail-gitter .paar { min-width: 0; }
.detail-gitter dt { font-size: 12px; color: var(--grau-60); text-transform: uppercase; letter-spacing: .03em; }
.detail-gitter dd { margin: 2px 0 12px; font-size: 15px; word-break: break-word; }

.verlauf { padding: 4px 18px 18px; }
.verlauf h3 { font-size: 14px; margin: 12px 0; text-transform: uppercase; letter-spacing: .03em; color: var(--grau-60); font-weight: 600; }
.verlauf ol { list-style: none; margin: 0; padding: 0; }
.verlauf li { position: relative; padding: 0 0 18px 26px; border-left: 2px solid var(--grau-20); }
.verlauf li:last-child { border-left-color: transparent; padding-bottom: 0; }
.verlauf li::before {
  content: '';
  position: absolute;
  left: -7px; top: 3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--grau-20);
  border: 2px solid var(--weiss);
}
.verlauf li.aktuell::before { background: var(--gruen); }
.verlauf li.stoerung::before { background: var(--stoerung); }
.verlauf .zeit { font-size: 12px; color: var(--grau-60); font-variant-numeric: tabular-nums; }
.verlauf .was { font-size: 14px; font-weight: 600; }
.verlauf .wo { font-size: 13px; color: var(--grau-60); }

.zurueck {
  appearance: none; border: none; background: none; font-family: inherit;
  font-size: 14px; color: var(--grau-60); cursor: pointer; padding: 0; margin-bottom: 14px;
}
.zurueck:hover { color: var(--dunkelgrau); }

/* --------------------------------------------------------------- Fusszeile */

.fuss {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 24px 32px;
  font-size: 12px;
  color: var(--grau-40);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fuss a { color: var(--grau-60); }

.laedt { padding: 32px; text-align: center; color: var(--grau-60); font-size: 14px; }

@media (max-width: 720px) {
  .detail-gitter { grid-template-columns: 1fr; }
  .kopf-inhalt { flex-wrap: wrap; padding: 12px 0; min-height: 0; }
  .kopf img.logo { height: 34px; }
  main { padding: 16px; }
}