/* Shell — Rahmen der Plattform.
 *
 * Die Werte stammen aus shared/ui-tokens/tokens.json, Fassung 1.0.0 (gepinnt in
 * core/module.yaml), und aus dem mit Michael abgestimmten Bedienentwurf
 * docs/mockup_data_vision.html. Wer sie hier ändert, ändert sie am falschen
 * Ort — die Tokens sind eigenständig versioniert.
 */

:root {
  --marke: #009ee3;
  --marke-dunkel: #0079ad;
  --marke-hell: #e8f7fd;
  --text: #1b2a35;
  --text-2: #546472;
  --text-3: #8b9aa6;
  --linie: #e2e9ee;
  --linie-2: #f0f5f8;
  --flaeche: #f6f8fa;
  --weiss: #fff;
  --gut: #3fa66a;
  --achtung: #e8a33d;
  --ruhend: #b8c4cd;
  --schlecht: #c0392b;

  /* Die dunkle Leiste ist im Entwurf keine Token-Farbe, sondern gehört zur
     Shell. Deshalb steht sie hier und nicht in tokens.json. */
  --leiste: #12212c;

  --r: 7px;
  --leiste-breit: 74px;
  --kopf-hoch: 56px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.55 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--flaeche);
}

button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Anmeldung */

.anmeldung {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}

.anmeldung form {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 30px;
  width: 100%;
  max-width: 380px;
}

.anmeldung .logo { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.anmeldung .u {
  color: var(--text-3); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 4px;
}
.anmeldung p.hint { color: var(--text-2); font-size: 12.5px; margin: 6px 0 22px; }

.feld { margin-bottom: 14px; }
.feld label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-3); margin-bottom: 5px;
}
.feld input {
  width: 100%; padding: 9px 11px; font: inherit;
  border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--weiss); color: var(--text);
}
.feld input:focus { outline: 2px solid var(--marke-hell); border-color: var(--marke); }
.feld input:disabled { background: var(--linie-2); color: var(--text-3); }

.feldhinweis { color: var(--text-3); font-size: 11.5px; margin: 5px 0 0; }
.feldhinweis code {
  background: var(--linie-2); padding: .1rem .3rem; border-radius: 3px;
  font-size: 11px;
}
.freiwillig {
  color: var(--text-3); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 10.5px;
}

.knopf {
  width: 100%; padding: 10px; border: 1px solid var(--marke);
  background: var(--marke); color: #fff; border-radius: var(--r);
  font-weight: 600;
}
.knopf:hover { background: var(--marke-dunkel); border-color: var(--marke-dunkel); }
.knopf:disabled { opacity: .55; cursor: default; }

.meldung {
  margin-top: 14px; padding: 9px 12px; border-radius: var(--r);
  font-size: 12.5px; background: #fdecea; color: var(--schlecht);
}
.meldung.gut { background: #e9f6ee; color: #2f7d50; }

/* ------------------------------------------------------------- Icon-Leiste */

.leiste {
  position: fixed; left: 0; top: var(--kopf-hoch); bottom: 0;
  width: var(--leiste-breit); background: var(--leiste);
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0; gap: 3px; z-index: 30;
  overflow-y: auto;
}

.leiste button {
  width: 60px; border: 0; background: transparent; color: #8ba0ad;
  padding: 9px 2px 7px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 9.5px; line-height: 1.15; text-align: center; letter-spacing: .1px;
  hyphens: auto;
}
.leiste button svg {
  width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.leiste button:hover { background: rgba(255,255,255,.07); color: #cfdde6; }
.leiste button.an { background: var(--marke); color: #fff; }

.leiste .luecke { height: 14px; }
.leiste .dehnung { flex: 1; }
.leiste .ich {
  width: 32px; height: 32px; border-radius: 50%; background: #31424f;
  color: #cfdde6; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; border: 0;
}
.leiste .ich:hover { background: #3d5261; }

.leer {
  color: #6b8290; font-size: 10px; text-align: center;
  padding: 12px 6px; line-height: 1.4;
}

/* ------------------------------------------------------------------- Kopf */

.kopf {
  height: var(--kopf-hoch); background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  display: flex; align-items: center; gap: 20px;
  padding: 0 26px 0 22px;
  position: fixed; left: 0; right: 0; top: 0; z-index: 40;
}

.kopf .logo {
  font-size: 20px; font-weight: 700; letter-spacing: -.5px;
  white-space: nowrap; min-width: 186px;
}
.kopf .logo .a { color: var(--text); }
.kopf .logo .b { color: var(--marke); }

.kopf .trenner { width: 1px; height: 26px; background: var(--linie); }
.kopf .wer { display: flex; align-items: center; gap: 9px; }
.kopf .kuerzel {
  width: 28px; height: 28px; border-radius: var(--r);
  background: var(--marke-hell); color: var(--marke-dunkel);
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
}
.kopf select {
  border: 1px solid var(--linie); border-radius: var(--r);
  padding: 6px 9px; font: inherit; background: var(--weiss); color: var(--text);
  max-width: 320px;
}
.kopf .dehnung { flex: 1; }
.kopf .stand { font-size: 11px; color: var(--text-3); white-space: nowrap; }

/* Sichtumschalter — nur für SDZeCOM-Rollen. */
.sicht { display: flex; border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.sicht button {
  border: 0; background: var(--weiss); color: var(--text-2);
  padding: 6px 11px; font-size: 12px;
}
.sicht button.an { background: var(--marke-hell); color: var(--marke-dunkel); font-weight: 600; }

/* ------------------------------------------------------------------ Bühne */

.rahmen { margin-left: var(--leiste-breit); padding-top: var(--kopf-hoch); }
.buehne { position: fixed; left: var(--leiste-breit); right: 0; top: var(--kopf-hoch); bottom: 0; }
.buehne iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--weiss); }

.willkommen { max-width: 640px; margin: 0 auto; padding: 60px 26px; }
.willkommen h1 { font-size: 23px; letter-spacing: -.3px; margin: 0 0 8px; font-weight: 600; }
.willkommen p { color: var(--text-2); margin: 0 0 12px; }
.willkommen table { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: 13.5px; }
.willkommen td { padding: .55rem 0; border-bottom: 1px solid var(--linie-2); }
.willkommen td:first-child { color: var(--text-2); width: 12rem; }

/* Kurze Einblendung für `notify` aus einem Modul. */
.hinweis {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  background: var(--text); color: #fff; padding: 11px 16px;
  border-radius: var(--r); font-size: 13px; max-width: 380px;
  box-shadow: 0 6px 24px rgba(27,42,53,.22);
}

/* `overlay-open` aus einem Modul: Die Shell tritt zurück, damit ein Dialog im
   iframe nicht unter Kopfzeile und Leiste verschwindet. */
body.ueberlagert .leiste,
body.ueberlagert .kopf { filter: brightness(.94); }
body.ueberlagert .buehne { top: 0; left: 0; z-index: 50; }

/* ------------------------------------------------------------- Verwaltung */
/*
 * Kein Fachmodul, deshalb kein Menüeintrag: Der Zugang sitzt unten in der
 * Icon-Leiste beim Kürzel. Die sieben Einträge oben kommen aus der Registry —
 * ein achter, der aus dem Quelltext käme, würde genau die Aussage
 * verwässern, die die Leiste treffen soll.
 */
.leiste .zahnrad { color: #8ba0ad; }
.leiste .zahnrad.an { background: var(--marke); color: #fff; }

.verwaltung { max-width: 1000px; margin: 0 auto; padding: 30px 26px 70px; }
.verwaltung h1 { font-size: 23px; letter-spacing: -.3px; margin: 0 0 4px; font-weight: 600; }
.verwaltung > p { color: var(--text-2); margin: 0 0 22px; font-size: 13.5px; }

.reiter { display: flex; border-bottom: 1px solid var(--linie); margin-bottom: 22px; }
.reiter button {
  border: 0; background: transparent; padding: 11px 16px; color: var(--text-2);
  border-bottom: 2px solid transparent; font-size: 13px;
}
.reiter button.an {
  color: var(--marke-dunkel); border-bottom-color: var(--marke); font-weight: 600;
}

.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r); margin-bottom: 20px;
}
.karte > h2 {
  padding: 13px 18px; border-bottom: 1px solid var(--linie-2);
  font-size: 13.5px; font-weight: 600; margin: 0;
  display: flex; align-items: center; gap: 12px;
}
.karte > h2 .dehnung { flex: 1; }
.karte .inhalt { padding: 18px; }

table.liste { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.liste th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-3); font-weight: 600;
  padding: 10px 18px; border-bottom: 1px solid var(--linie);
}
table.liste td { padding: 11px 18px; border-bottom: 1px solid var(--linie-2); }
table.liste tr:last-child td { border-bottom: 0; }
table.liste tr.inaktiv td { color: var(--text-3); }

.marke {
  font-size: 10.5px; padding: 2.5px 8px; border-radius: 11px;
  font-weight: 600; white-space: nowrap;
}
.marke.gut { background: #e9f6ee; color: #2f7d50; }
.marke.ruhend { background: #eef2f5; color: #66757f; }
.marke.warnung { background: #fdf3e3; color: #8a5d12; }

.knopf.klein {
  width: auto; padding: 6px 12px; font-size: 12.5px; font-weight: 500;
  background: var(--weiss); color: var(--text-2); border-color: var(--linie);
}
.knopf.klein:hover { border-color: var(--marke); color: var(--marke-dunkel);
  background: var(--weiss); }
.knopf.klein.wichtig {
  background: var(--marke); border-color: var(--marke); color: #fff;
}
.knopf.klein.wichtig:hover { background: var(--marke-dunkel); }

.zeile { display: flex; gap: 14px; flex-wrap: wrap; }
.zeile .feld { flex: 1; min-width: 190px; }

.schalter { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--linie-2); }
.schalter:last-child { border-bottom: 0; }
.schalter .name { flex: 1; }
.schalter .name small { display: block; color: var(--text-3); font-size: 11.5px; }
.schalter input { width: 17px; height: 17px; accent-color: var(--marke); }

.einmal {
  background: var(--marke-hell); border: 1px solid var(--marke);
  border-radius: var(--r); padding: 14px 16px; margin-top: 14px;
}
.einmal code {
  display: block; font-size: 15px; font-weight: 600; margin: 8px 0;
  word-break: break-all; color: var(--text);
}
.einmal p { margin: 0; font-size: 12.5px; color: var(--text-2); }