/* gm | Einkauf — Gestaltung wie gm | Kalkulation (Nutzer 2026-10-26: „an die anderen Apps angleichen“):
   gds-tokens.css aus dem Dashboard, Light-Theme, Kopfzeile dunkel mit gelber Akzentlinie, alles eckig, Bahnschrift.
   Farben nur über Tokens. Ausnahmen wie in gm-Kalkulation/src/web/src/gds/tokens.css und gds.css: Ampelfarben für
   weißen Grund (die --gds-good/watch/critical sind für dunklen Grund abgestimmt) und die Werte der dunklen Kopfzeile. */
:root {
  --ek-ampel-gruen: #1f7a3a;
  --ek-ampel-gelb: #b06a00;
  --ek-ampel-rot: #b3261e;
  --ek-ampel-grau: #8a8a8a;
}

body { font-size: 14px; }
.shell { padding: 0 var(--gds-shell-pad); min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; padding: var(--gds-s-20) 0; outline: none; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: var(--gds-lh-tight); }
h1 { font-size: var(--gds-fs-h2); }
h2 { font-size: var(--gds-fs-h3); }
[hidden] { display: none !important; }

/* ---------- Kopfzeile ---------- */
/* Dunkle Kopfzeile wie .gm-kopf der Kalkulation: Werte des dunklen Themes aus gds-tokens.css :root als lokale Variablen.
   Logogröße kommt aus gds-tokens.css (.gds-header-bar .brand-logo, --gds-header-logo-w = 160px, wie im Dashboard). */
.kopf.gds-header-bar {
  --kopf-panel-grad: linear-gradient(180deg, rgba(17, 28, 40, 0.98), rgba(12, 20, 30, 0.98));
  --kopf-text: #fbfdff;
  --kopf-text-muted: #95a4b8;
  --kopf-line: rgba(255, 255, 255, 0.12);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  min-height: 72px;
  color: var(--kopf-text);
  background: radial-gradient(circle at -6% -40%, var(--gds-brand-soft), transparent 38%), var(--kopf-panel-grad);
  border-bottom-color: var(--kopf-line);
  box-shadow: var(--gds-shadow-2);
}
.kopf-marke { display: flex; align-items: center; text-decoration: none; }
/* Prozessleiste wie .gm-prozess-nav der Kalkulation: Kreis-Plakette, Beschriftung daneben, „›“ als Trenner. */
.kopf-pfad { flex: 1; min-width: 0; overflow-x: auto; }
.prozess { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.prozess-trenner { color: rgba(255, 255, 255, 0.35); margin: 0 2px; font-size: 15px; }
.prozess-schritt { display: flex; align-items: center; gap: 7px; padding: 6px 8px; text-decoration: none; color: rgba(255, 255, 255, 0.7); font-size: 15px; border: 1px solid transparent; }
.prozess-schritt:not(.inaktiv):hover { color: var(--kopf-text); background: rgba(255, 255, 255, 0.06); }
.prozess-schritt:focus-visible { outline: 2px solid var(--gds-brand); outline-offset: 1px; }
.prozess-schritt.erledigt { color: rgba(255, 255, 255, 0.92); }
.prozess-schritt.aktiv { color: var(--kopf-text); font-weight: var(--gds-fw-semi); background: var(--gds-brand-soft); border-color: var(--gds-brand-border); }
.prozess-schritt.inaktiv { color: rgba(255, 255, 255, 0.4); cursor: not-allowed; }
.prozess-nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--kopf-text);
  color: var(--gds-text); font-size: 14px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.prozess-schritt.aktiv .prozess-nr { background: var(--gds-brand); }
.prozess-schritt.erledigt .prozess-nr { background: rgba(255, 255, 255, 0.85); }
.prozess-schritt.inaktiv .prozess-nr { opacity: 0.4; }
/* Text optisch mittig zum Kreis (wie die Anleitung): Zeilenkasten auf Versal- und Grundlinie beschneiden. */
.prozess-wort { line-height: 1; text-box: trim-both cap alphabetic; }
.kopf-rechts { display: flex; gap: 10px; align-items: center; margin-left: auto; color: var(--kopf-text-muted); }
/* Knöpfe in der Kopfzeile wie .gm-kopf-knopf der Kalkulation */
.kopf-knopf {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: var(--gds-border-width) solid var(--gds-btn-primary-border); border-radius: var(--gds-r-input);
  background: linear-gradient(180deg, var(--gds-brand-soft), transparent); color: var(--kopf-text);
  font: inherit; font-size: 13px; font-weight: var(--gds-fw-semi); text-decoration: none; cursor: pointer;
}
.kopf-knopf:hover { background: linear-gradient(180deg, var(--gds-brand-strong), var(--gds-brand-soft)); border-color: var(--gds-brand-border); }
.kopf-knopf--symbol { width: 36px; padding: 0; justify-content: center; position: relative; }
.kopf-knopf--symbol:hover { color: var(--gds-brand); }
.kopf-zahl { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--gds-brand); color: var(--gds-text); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
/* Benutzermenü wie .gm-benutzermenue der Kalkulation: Panel hell auf dunkler Kopfzeile */
.kopf-menue { position: relative; }
.kopf-menue-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; z-index: 30; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; background: var(--gds-panel); border: 1px solid var(--gds-line); box-shadow: var(--gds-shadow-2); }
.kopf-menue-eintrag { padding: 8px 10px; color: var(--gds-text); text-decoration: none; font-size: 13px; }
.kopf-menue-eintrag:hover, .kopf-menue-eintrag:focus-visible { background: var(--gds-panel-2); outline: none; }
.kopf-menue-trenner { height: 1px; margin: 4px 2px; background: var(--gds-line); }
.kopf-menue-rolle { margin: 4px 0 0; padding: 6px 10px 0; border-top: 1px solid var(--gds-line); font-size: 11px; color: var(--gds-text-muted); }
.kopf-abzeichen { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gds-brand); color: var(--gds-text); font-size: 11px; font-weight: 700; }
.hinweisseite .brand-logo { width: 220px; height: auto; display: block; margin-bottom: var(--gds-s-16); }
/* Fußzeile wie .gm-fusszeile der Kalkulation: immer am unteren Fensterrand, damit die Version jederzeit sichtbar ist. */
.fuss { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: space-between; gap: var(--gds-s-16); flex-wrap: wrap;
  padding: 4px var(--gds-shell-pad); font-size: 11px; color: var(--gds-text-muted);
  background: var(--gds-panel-2); border-top: var(--gds-border-width) solid var(--gds-line); }
.shell { padding-bottom: 32px; } /* Platz für die feste Fußzeile */

/* ---------- Bausteine ---------- */
.zeile { display: flex; gap: var(--gds-s-12); align-items: center; flex-wrap: wrap; }
.zeile.zwischen { justify-content: space-between; }
.stapel { display: flex; flex-direction: column; gap: var(--gds-s-16); }
.leer { color: var(--gds-text-muted); padding: var(--gds-s-24) 0; }
.klein { font-size: var(--gds-fs-meta); }
.gedaempft { color: var(--gds-text-muted); }
.rechts { text-align: right; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gds-card { padding: var(--gds-s-16); background: var(--gds-panel); border: var(--gds-border-width) solid var(--gds-line); }
.gds-btn { cursor: pointer; font: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--gds-s-6); }
.gds-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-klein { padding: 4px 10px; min-height: 0; font-size: var(--gds-fs-meta); }
input[type=text], input[type=search], input[type=number], select {
  font: inherit; color: var(--gds-text); background: var(--gds-input-bg);
  border: var(--gds-border-width) solid var(--gds-line); border-radius: var(--gds-r-input); padding: 6px 10px;
}
input:focus-visible, select:focus-visible, .gds-btn:focus-visible, a:focus-visible, tr:focus-visible { outline: 2px solid var(--gds-focus); outline-offset: 1px; }
.suche { min-width: 280px; }

/* ---------- Tabellen ---------- */
.tabelle-wrap { overflow-x: auto; border: var(--gds-border-width) solid var(--gds-line); border-radius: var(--gds-r-card-s); background: var(--gds-panel); }
table { border-collapse: collapse; width: 100%; font-size: var(--gds-fs-meta); }
th, td { padding: 6px 10px; border-bottom: var(--gds-border-width) solid var(--gds-line); vertical-align: top; text-align: left; }
th { background: var(--gds-panel-2); font-weight: var(--gds-fw-semi); position: sticky; top: 0; z-index: 1; white-space: nowrap; }
tbody tr.klickbar { cursor: pointer; }
tbody tr.klickbar:hover, tbody tr.klickbar:focus { background: var(--gds-brand-soft); }
tr.titel td { background: var(--gds-panel-2); font-weight: var(--gds-fw-semi); }
tr.summe td { font-weight: var(--gds-fw-bold); background: var(--gds-panel-2); }
td.guenstig { background: var(--gds-good-halo); font-weight: var(--gds-fw-semi); }
td.preis input { width: 110px; text-align: right; }

/* ---------- Ampel: immer Symbol + Text, nie nur Farbe ---------- */
/* Symbole und Farben wie die Ampel der Kalkulation (gds/ampelText.ts): ● grün, ▲ gelb, ■ rot, ○ grau. */
.ampel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: var(--gds-fw-semi); }
.ampel::before { font-size: 13px; line-height: 1; }
.ampel.ok { color: var(--ek-ampel-gruen); }
.ampel.ok::before { content: "●"; }
.ampel.pruefen { color: var(--ek-ampel-gelb); }
.ampel.pruefen::before { content: "▲"; }
.ampel.fehlt { color: var(--ek-ampel-rot); }
.ampel.fehlt::before { content: "■"; }
.ampel.nicht_angeboten, .ampel.kein_angebot { color: var(--ek-ampel-grau); }
.ampel.nicht_angeboten::before, .ampel.kein_angebot::before { content: "○"; }
.hinweise { margin: 2px 0 0; padding-left: 16px; color: var(--gds-text-muted); }
.hinweise li { margin: 0; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--gds-r-chip);
  border: var(--gds-border-width) solid var(--gds-chip-border); background: var(--gds-chip-bg); font-size: var(--gds-fs-meta); white-space: nowrap; }
.chip.gut { color: var(--ek-ampel-gruen); border-color: var(--ek-ampel-gruen); background: var(--gds-panel); }
.chip.warn { color: var(--ek-ampel-gelb); border-color: var(--ek-ampel-gelb); background: var(--gds-panel); }
.chip.kritisch { color: var(--ek-ampel-rot); border-color: var(--ek-ampel-rot); background: var(--gds-panel); }
.chip.marke { background: var(--gds-brand-soft); border-color: var(--gds-brand-border); }

/* ---------- Anfrage: Lieferanten ---------- */
.kopfdaten { display: flex; gap: var(--gds-s-24); flex-wrap: wrap; }
.kopfdaten div { display: flex; flex-direction: column; }
.tabs { display: flex; gap: var(--gds-s-4); border-bottom: var(--gds-border-width) solid var(--gds-line); }
.tabs button { font: inherit; background: none; border: 0; padding: 8px 14px; cursor: pointer; color: var(--gds-text-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs button[aria-selected=true] { color: var(--gds-text); font-weight: var(--gds-fw-semi); border-bottom-color: var(--gds-brand); }
.lieferanten { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gds-s-16); }
.lieferant { display: flex; flex-direction: column; gap: var(--gds-s-10); border-radius: var(--gds-r-card); }
.ablage { border: 2px dashed var(--gds-line); border-radius: var(--gds-r-card-s); padding: var(--gds-s-16); text-align: center; color: var(--gds-text-muted); cursor: pointer; }
.ablage.drueber { border-color: var(--gds-brand); background: var(--gds-brand-soft); color: var(--gds-text); }
.zaehler { display: flex; gap: var(--gds-s-12); flex-wrap: wrap; }
.laedt { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--gds-line); border-top-color: var(--gds-brand); border-radius: 50%; animation: dreh 0.9s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------- Prüfansicht ---------- */
.pruefen-layout { display: grid; grid-template-columns: minmax(320px, 32%) minmax(0, 1fr); gap: var(--gds-s-16); align-items: start; }
.pruefen-layout td:nth-child(2) { min-width: 170px; }
.pruefen-layout td.pruefung { min-width: 190px; }
.pruefen-layout select { padding: 4px 6px; }
.pruefen-layout td.preis input { width: 96px; }
.pruefen-layout details select { max-width: 220px; }
.dokument { position: sticky; top: var(--gds-s-12); height: calc(100vh - 140px); border: var(--gds-border-width) solid var(--gds-line); border-radius: var(--gds-r-card-s); overflow: hidden; background: var(--gds-panel-2); }
.dokument iframe { width: 100%; height: 100%; border: 0; }
.dokument .leer { padding: var(--gds-s-24); }
.kondition { display: flex; gap: var(--gds-s-16); flex-wrap: wrap; align-items: end; }
.kondition label { display: flex; flex-direction: column; font-size: var(--gds-fs-meta); color: var(--gds-text-muted); gap: 2px; }
.kondition input { width: 90px; }
.hinweisbox { border-left: 4px solid var(--ek-ampel-gelb); background: var(--gds-panel-2); padding: var(--gds-s-10) var(--gds-s-12); border-radius: var(--gds-r-card-s); }
.hinweisbox.fehler { border-left-color: var(--ek-ampel-rot); }
.hinweisbox ul { margin: 4px 0 0; padding-left: 18px; }
details > summary { cursor: pointer; font-weight: var(--gds-fw-semi); padding: 4px 0; }

.meldung { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--gds-text); color: var(--gds-bg);
  padding: 10px 18px; border-radius: var(--gds-r-card-s); box-shadow: var(--gds-shadow-2); z-index: 10; max-width: 90vw; }
.meldung.fehler { background: var(--ek-ampel-rot); }
.hinweisseite { max-width: 560px; margin: 80px auto; }

/* ---------- Rückmeldung (Muster gm | Kalkulation) ---------- */
.rm-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 40; display: grid; place-items: start center; padding-top: 10vh; }
.rm-panel { width: min(560px, 92vw); max-height: 80vh; overflow: auto; box-shadow: var(--gds-shadow-3); }
.rm-label { font-weight: var(--gds-fw-semi); font-size: 13px; margin-bottom: -10px; }
.rm-text { width: 100%; font: inherit; padding: 8px 10px; border: var(--gds-border-width) solid var(--gds-line); background: var(--gds-input-bg); resize: vertical; }
.rm-vorschau { display: flex; gap: var(--gds-s-12); align-items: start; }
.rm-vorschaubild { max-width: 240px; max-height: 160px; border: 1px solid var(--gds-line); }
.rm-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gds-s-8); }
.rm-eintrag { padding: 0; }
.rm-kopf { display: flex; gap: var(--gds-s-12); align-items: center; width: 100%; padding: 10px 14px; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.rm-kopf:hover { background: var(--gds-panel-2); }
.rm-nr { font-weight: var(--gds-fw-semi); white-space: nowrap; }
.rm-nutzer { color: var(--gds-text-muted); white-space: nowrap; }
.rm-vorschau-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-verlauf { padding: 0 14px 14px; border-top: 1px solid var(--gds-line); padding-top: 12px; }
.rm-nachricht { padding: 8px 12px; background: var(--gds-panel-2); border-left: 3px solid var(--gds-line); }
.rm-nachricht--betreuer { border-left-color: var(--gds-brand); }
.rm-nachricht-text { white-space: pre-wrap; margin-top: 2px; }

/* ---------- Anleitung (gemeinsame Gestaltung der gm-Apps, 2026-10-26) ----------
   Nummer im gelben Feld, gelber Balken links mit sanftem Verlauf, Abschnitte als Karten, Inhalt links mitlaufend. */
.hilfe { line-height: 1.55; }
.hilfe-kopf { margin-bottom: var(--gds-s-20); }
.hilfe-kopf h1 { font-size: var(--gds-fs-h1); margin-bottom: var(--gds-s-6); }
.hilfe-kopf > p { margin: 0 0 var(--gds-s-12); max-width: 75ch; color: var(--gds-text-muted); }
.hilfe-nr { display: inline-grid; place-items: center; flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 6px;
  background: var(--gds-brand); color: var(--gds-text); font-weight: var(--gds-fw-bold); font-size: 13px; line-height: 1; }
/* Abschnitte ohne Schrittnummer: volles gelbes Feld ohne Zahl, gleich groß und bündig wie die Nummernfelder (Nutzer 2026-10-26:
   kleinere eingerückte Felder sahen aus wie Unterpunkte; umrandet gefiel nicht). */
.hilfe-nr--leer { background: var(--gds-brand); }
/* Text optisch mittig zum Feld: Zeilenkasten auf Versal- und Grundlinie beschneiden, sonst sitzt die Schrift zu tief. */
.hilfe-wort { line-height: 1; text-box: trim-both cap alphabetic; }
.hilfe-ablauf { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; }
.hilfe-ablauf a { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; background: var(--gds-panel-2);
  border: 1px solid var(--gds-line); font-weight: var(--gds-fw-semi); text-decoration: none; }
.hilfe-ablauf a:hover, .hilfe-ablauf a:focus-visible { background: var(--gds-brand-soft); outline: none; }
.hilfe-ablauf li + li a { border-left: 0; }
.hilfe-ablauf li + li a::before { content: "›"; color: var(--gds-brand-dark); font-size: 18px; margin-right: 4px; }
.hilfe-raster { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--gds-s-24); align-items: start; }
.hilfe-inhalt { position: sticky; top: var(--gds-s-12); background: var(--gds-panel); border: 1px solid var(--gds-line);
  border-top: 4px solid var(--gds-brand); padding: 10px 8px; }
.hilfe-inhalt-titel { font-size: 11px; font-weight: var(--gds-fw-bold); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gds-text-muted); padding: 0 8px 6px; }
.hilfe-inhalt ol { list-style: none; margin: 0; padding: 0; }
.hilfe-inhalt a { display: flex; align-items: center; gap: 8px; padding: 5px 8px; text-decoration: none; font-size: 13px; }
.hilfe-inhalt a .hilfe-nr { min-width: 20px; height: 20px; font-size: 11px; }
.hilfe-inhalt a:hover, .hilfe-inhalt a:focus-visible { background: var(--gds-brand-soft); outline: none; }
.hilfe-text { display: flex; flex-direction: column; gap: var(--gds-s-16); max-width: 1000px; }
.hilfe-abschnitt { scroll-margin-top: 12px; background: var(--gds-panel); border: 1px solid var(--gds-line); padding: 0 var(--gds-s-20) var(--gds-s-12); }
.hilfe-titel { display: flex; align-items: center; gap: 12px; margin: 0 calc(-1 * var(--gds-s-20)) var(--gds-s-12);
  padding: 12px var(--gds-s-20); font-size: var(--gds-fs-h3); border-left: 6px solid var(--gds-brand);
  background: linear-gradient(90deg, var(--gds-brand-soft), transparent 70%); border-bottom: 1px solid var(--gds-line); }
.hilfe-abschnitt p, .hilfe-abschnitt ul { margin: 0 0 var(--gds-s-8); max-width: 80ch; }
.hilfe-abschnitt li { margin: 3px 0; }
.hilfe-abschnitt li::marker { color: var(--gds-brand-dark); }
.hilfe-bild { margin: var(--gds-s-8) 0 var(--gds-s-16); }
.hilfe-bild img { display: block; max-width: 100%; height: auto; border: 1px solid var(--gds-line); box-shadow: var(--gds-shadow-1); }
.hilfe-bild figcaption { margin-top: 4px; font-size: 12px; color: var(--gds-text-muted); }

@media (max-width: 1000px) {
  .hilfe-raster { grid-template-columns: 1fr; }
  .hilfe-inhalt { position: static; }
  .pruefen-layout { grid-template-columns: 1fr; }
  .dokument { position: static; height: 60vh; }
}
@media print {
  .kopf-rechts, .fuss, .tabs, .gds-btn { display: none !important; }
}