/* Dunkle, mobil-zuerst gedachte Oberflaeche. */

:root {
  --hg: #111318;
  --hg-karte: #191c23;
  --hg-erhoben: #212630;
  --rand: #2c3240;
  --text: #e8ebf1;
  --text-leise: #98a1b3;
  --akzent: #e5322d;
  --akzent-weich: #ff6b66;
  --gut: #38c172;
  --warnung: #f0a020;
  --schlecht: #ef4444;
  --radius: 12px;
}

* { box-sizing: border-box; }

/* Muss vor den Layout-Regeln stehen: display:grid wuerde [hidden] sonst aushebeln. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--hg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }

/* --- Anmeldung --- */

.login-seite {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.login-karte {
  width: 100%;
  max-width: 26rem;
  background: var(--hg-karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.unterzeile { color: var(--text-leise); margin-bottom: 1.25rem; }
.hinweis-klein { color: var(--text-leise); font-weight: 400; font-size: .8rem; }

.formular { display: grid; gap: .9rem; margin-top: 1.1rem; }
.formular label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; color: var(--text-leise); }

input, select, textarea {
  width: 100%;
  padding: .65rem .75rem;
  background: var(--hg-erhoben);
  border: 1px solid var(--rand);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent-weich);
  outline-offset: 1px;
}
input[type="number"] { text-align: right; }

/* --- Knoepfe --- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .6rem 1rem;
  border-radius: 9px;
  border: 1px solid var(--rand);
  background: var(--hg-erhoben);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  min-height: 2.6rem;
}
.knopf:active { transform: translateY(1px); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.schlicht { background: transparent; }
.knopf.klein { padding: .35rem .6rem; min-height: 2.1rem; font-size: .85rem; }
.knopf.gefahr { color: var(--schlecht); border-color: #4a2626; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }

/* --- Reiter --- */

.reiter-zeile {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding: .35rem 0;
}
.scrollbar { scrollbar-width: none; }
.scrollbar::-webkit-scrollbar { display: none; }

.reiter {
  flex: 0 0 auto;
  padding: .45rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: transparent;
  color: var(--text-leise);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.reiter.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* --- Kopf --- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--hg);
  border-bottom: 1px solid var(--rand);
  padding: .6rem .9rem .35rem;
  padding-top: max(.6rem, env(safe-area-inset-top));
}
.kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.marke { font-weight: 700; }
.kopf-rechts { display: flex; align-items: center; gap: .5rem; }
.nutzer { color: var(--text-leise); font-size: .85rem; }

.rumpf { display: block; }

#bereich-reiter {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--hg);
  border-bottom: 1px solid var(--rand);
  padding: .45rem .9rem;
}

.inhalt { padding: 1rem .9rem 4rem; max-width: 60rem; margin: 0 auto; }

/* Spalten, fuer die am Handy kein Platz ist. Die Regel steht bewusst vor
   der Media Query - sonst wuerde sie deren display-Wert wieder ueberschreiben. */
.nur-breit { display: none; }
th.nur-breit, td.nur-breit { display: none; }

/* ------------------------------------------------------------------ */
/* Ab Tabletbreite: zweispaltig mit fester Seitenleiste                */
/* ------------------------------------------------------------------ */

@media (min-width: 980px) {
  body { font-size: 15px; }

  .kopf { padding: .7rem 1.75rem .45rem; }
  .kopf-innen { max-width: 1500px; margin: 0 auto; }
  .marke { font-size: 1.05rem; }

  .rumpf {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: 1.75rem;
    max-width: 1500px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 4rem;
    align-items: start;
  }

  #bereich-reiter {
    position: sticky;
    top: 7rem;
    flex-direction: column;
    gap: .2rem;
    overflow: visible;
    padding: 0;
    border-bottom: none;
    background: transparent;
  }
  #bereich-reiter .reiter {
    width: 100%;
    text-align: left;
    border-radius: 9px;
    border-color: transparent;
    padding: .55rem .85rem;
  }
  #bereich-reiter .reiter:hover { background: var(--hg-erhoben); color: var(--text); }
  #bereich-reiter .reiter.aktiv { border-color: var(--akzent); }

  /* Ohne Bereichsleiste - etwa bei einer Immobilie - nimmt der Inhalt die
     ganze Breite ein, statt in der schmalen Spalte der Leiste zu landen. */
  .rumpf.ohne-leiste { grid-template-columns: minmax(0, 1fr); }

  .inhalt { padding: 0; max-width: none; margin: 0; }

  .karte { padding: 1.25rem 1.4rem; }
  table { font-size: .92rem; }
  th, td { padding: .55rem .7rem; }
  /* Eingabefelder in Tabellen nicht ueber die halbe Breite ziehen. */
  table input { max-width: 8rem; margin-left: auto; }
  .feld-zeile { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); max-width: 60rem; }

  /* Am PC ist Platz fuer Spalten, die am Handy ausgeblendet bleiben. */
  .nur-breit { display: inline; }
  th.nur-breit, td.nur-breit { display: table-cell; }
}


/* Auf sehr breiten Schirmen zwei Spalten nebeneinander, wo es passt. */
@media (min-width: 1400px) {
  .zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
  .zweispaltig > .karte { margin-bottom: 0; }
}

/* --- Karten --- */

.karte {
  background: var(--hg-karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap; }

.kachel-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .7rem; }
.kachel { background: var(--hg-erhoben); border: 1px solid var(--rand); border-radius: 10px; padding: .75rem; }
.kachel .beschriftung { color: var(--text-leise); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.kachel .wert { font-size: 1.3rem; font-weight: 700; margin-top: .2rem; }
.kachel .fuss { color: var(--text-leise); font-size: .78rem; margin-top: .15rem; }

/* --- Tabellen --- */

.tabelle-rahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .5rem .55rem; text-align: left; border-bottom: 1px solid var(--rand); white-space: nowrap; }
/* Die erste Spalte traegt lange Item-Namen - sie darf umbrechen, damit die
   Zahlenspalten am Handy nicht aus dem Bild geschoben werden. */
th:first-child, td:first-child { white-space: normal; min-width: 7rem; }
th { color: var(--text-leise); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
table input { min-width: 5.5rem; padding: .35rem .45rem; font-size: .9rem; }

/* --- Zustaende --- */

.gut { color: var(--gut); }
.warn { color: var(--warnung); }
.schlecht { color: var(--schlecht); }
.leise { color: var(--text-leise); }

/* Bilder der Waren - klein, quadratisch, an der Textlinie ausgerichtet. */
.ware-bild {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  vertical-align: -.3rem;
  margin-right: .4rem;
  border-radius: 4px;
  background: var(--hg-erhoben);
}

/* Vorschaubild der Einrichtung - etwas groesser als ein Warenbild, damit
   man das Interieur erkennt. Bild und Text stehen nebeneinander, die
   Einrichtung darunter buendig zum Zimmernamen. */
.raum-zeile { display: flex; align-items: center; gap: .55rem; }
.raum-bild {
  flex: 0 0 auto;
  width: 2.4rem;
  height: 2.4rem;
  object-fit: cover;
  border-radius: 6px;
  background: var(--hg-erhoben);
}

.merker {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid var(--rand);
  color: var(--text-leise);
}
.merker.gut { border-color: #1f5133; background: #14281d; }
.merker.warn { border-color: #5b4419; background: #2a2113; }
.merker.schlecht { border-color: #5b2323; background: #2a1515; }

.meldung {
  padding: .65rem .8rem;
  border-radius: 9px;
  border: 1px solid var(--rand);
  background: var(--hg-erhoben);
  font-size: .9rem;
  margin: .75rem 0 0;
}
.meldung.fehler { border-color: #5b2323; background: #2a1515; color: #ffb4b4; }
.meldung.erfolg { border-color: #1f5133; background: #14281d; color: #a9e9c4; }
.meldung.warn { border-color: #5b4419; background: #2a2113; color: #f3d49a; }

.leer-hinweis { color: var(--text-leise); text-align: center; padding: 1.5rem .5rem; }

/* --- Formularzeilen --- */

.feld-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .7rem; align-items: end; }
.feld { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--text-leise); }
.knopf-zeile { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }

/* --- Baum fuer die Produktionskette --- */

.baum { list-style: none; margin: .4rem 0 0; padding-left: .9rem; border-left: 1px solid var(--rand); }
.baum li { padding: .25rem 0; font-size: .88rem; }

/* --- Diagnose --- */

.probe { border: 1px solid var(--rand); border-radius: 10px; margin-bottom: .6rem; overflow: hidden; }
/* Der Status steht links und behaelt seine Breite - der lange Endpunktname
   dahinter darf umbrechen, statt den Merker aus dem Bild zu schieben. */
.probe-kopf { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; background: var(--hg-erhoben); cursor: pointer; }
.probe-kopf .merker { flex: 0 0 auto; min-width: 3.2rem; text-align: center; }
/* anywhere statt break-all: bricht bevorzugt an Leerzeichen und nur im
   Notfall mitten im Wort - sonst zerreisst es Produktnamen. */
.probe-kopf .probe-pfad { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .88rem; overflow-wrap: anywhere; }
.probe-pfad .id { font-weight: 400; color: var(--text-leise); }
/* Zahlenspalten in der Rezeptzeile - feste Breite, damit sie untereinander stehen. */
.probe-kopf .spalte {
  flex: 0 0 auto;
  min-width: 5rem;
  text-align: right;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}
/* Menge je Durchlauf - direkt in der Zeile aenderbar, weil die vAPI sie
   nicht mitliefert und man sie sonst fuer jedes Rezept einzeln aufklappen
   muesste. Steht sie noch auf dem Startwert 1, faellt das Feld auf. */
.menge-feld {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-width: 4.5rem;
  color: var(--text-leise);
  cursor: text;
}
.menge-feld input {
  width: 3.2rem;
  padding: .2rem .35rem;
  text-align: right;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--hg);
  border: 1px solid var(--rand);
  border-radius: 6px;
}
.menge-feld input:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
.menge-feld.offen-menge input { border-color: var(--warnung); }

/* Ein abgeschaltetes Feld soll auch abgeschaltet aussehen. */
input:disabled, select:disabled { opacity: .45; cursor: not-allowed; }

.feld-schalter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .5rem;
  font-size: .85rem;
  color: var(--text-leise);
  white-space: nowrap;
  cursor: pointer;
}
/* Ohne das erbt das Kaestchen die Breite der Formularfelder. */
.feld-schalter input[type="checkbox"],
.feld-schalter input[type="radio"] {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--akzent);
}

.probe-koerper { padding: .6rem .75rem; display: none; }
.probe.offen .probe-koerper { display: block; }
pre {
  margin: 0;
  padding: .6rem;
  background: #0d0f14;
  border: 1px solid var(--rand);
  border-radius: 8px;
  overflow-x: auto;
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Meldefenster --- */

/* Mittig, ueber allem, und ohne Ausweg: die Meldung will bestaetigt werden. */
.modal-hg {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .72);
}
.modal {
  width: min(30rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.2rem;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--hg-karte);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.modal h2 { margin: 0; }
.modal td { padding: .25rem 0; border: 0; }

/* --- Toast --- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  background: var(--hg-erhoben);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-size: .9rem;
  z-index: 100;
  max-width: calc(100vw - 2rem);
}
.toast.fehler { border-color: #5b2323; background: #2a1515; color: #ffb4b4; }

.lade { color: var(--text-leise); padding: 1.5rem 0; text-align: center; }

/* --- Produktionsplanung --- */

/* Die Zusammenfassung bleibt beim Eintragen der Mengen im Blick. */
.planungs-kopf { position: sticky; top: 3.4rem; z-index: 8; }
@media (min-width: 980px) {
  .planungs-kopf { top: 1rem; }
  /* Am Handy nicht kleben: der Rechnungskopf ist dort so hoch, dass er die
     halbe Anzeige belegen wuerde. */
  .rechnungs-kopf { position: sticky; top: 1rem; z-index: 8; }
}

/* Am Handy ist in der Rezeptzeile kein Platz fuer Name und Zahlen
   nebeneinander - sonst bricht der Produktname Buchstabe fuer Buchstabe um.
   Der Name bekommt eine eigene Zeile, die Zahlen ruecken darunter. */
@media (max-width: 700px) {
  .probe-kopf { flex-wrap: wrap; }
  .probe-kopf .probe-pfad { flex: 1 0 100%; }
  .probe-kopf .spalte { min-width: 4rem; }
  .probe-kopf .menge-feld { min-width: 4rem; margin-right: auto; }
}

/* Unter dem Mindestbestand - faellt in der langen Lagerliste sofort auf. */
tr.knapp { background: #2a2113; }
tr.knapp td:first-child { box-shadow: inset 3px 0 0 var(--warnung); }

tr.veraltet td:first-child { box-shadow: inset 3px 0 0 var(--warnung); }

tr.geplant { background: #17202b; }
tr.geplant td:first-child { font-weight: 700; box-shadow: inset 3px 0 0 var(--akzent); }
tr.geplant input[data-menge] { border-color: var(--akzent); }