/* Schlicht und ruhig. Wer hier arbeitet, soll Daten sehen, nicht Gestaltung. */
:root {
  /* Farben aus dem Erscheinungsbild von brumley-tex.de, dort ausgelesen
     am 12.08.2026 (wp-content/themes/brumley-tex/css/theme.1.css). */
  --dunkel: #2d2e33;        /* Kopfzeile, Schrift */
  --dunkler: #242427;
  --text: #2d2e33;
  --leise: #6c6d74;
  --linie: #e5e5e7;
  --flaeche: #ffffff;
  --hintergrund: #f9f9f9;
  --akzent: #3c9b42;        /* das Brumley-Gruen: Schaltflaechen, Verweise */
  --gut: #3c9b42;
  --gut-hell: #3dc372;
  --warnung: #e44e56;
  --hinweis: #ff9e45;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--hintergrund);
}

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem 1.25rem;
  background: var(--dunkel); color: #fff;
}
.marke { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.marke .logo { display: block; }
/* Das Logo ist hochformatig (283 x 182). Deshalb ueber die Hoehe bemessen -
   ueber die Breite wuerde die Kopfzeile unnoetig hoch. */
.marke .logo svg { display: block; height: 38px; width: auto; }
.marke-text {
  padding-left: .75rem; border-left: 1px solid rgba(255,255,255,.25);
  font-size: .95rem; color: rgba(255,255,255,.75);
}
nav { display: flex; align-items: center; gap: 1.1rem; font-size: .95rem; }
.wer { color: rgba(255,255,255,.75); text-decoration: none; }
.wer:hover { color: #fff; }
.hinweis {
  margin-left: .4rem; padding: .1rem .45rem; border-radius: 999px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.7); font-size: .75rem;
  font-style: italic;
}
/* Hauptfarbe: breit genug für "Schwarz/Grau" - ein abgeschnittener Vorschlag
   liest sich wie ein anderer (Sichtprüfung 18.09.2026: "Schwarz/Grau" stand
   als "Schwarz" im Feld). */
.codeform input.hauptfarbe { width: 11rem; }   /* schlägt ".codeform input" (5,5rem) */
/* Farben ohne Hauptfarbe (0.30.0): ein Formular, ein „Speichern" für die Seite */
table.hauptfarben input.hauptfarbe { width: 11rem; padding: .25rem .45rem; font-size: .92rem; }
button.speichern { width: auto; margin: .4rem 0 .8rem; padding: .5rem 1.8rem; }
/* Vorbelegte, noch nicht gespeicherte Eingabe (Hauptfarbe aus der Liste abgeleitet) */
input.vorschlag, select.vorschlag { font-style: italic; background: #fffbea; }
/* Hauptfarbe als Auswahlfeld (0.31.0) - das Textfeld daneben nur für „andere …" */
select.hauptfarbe-wahl {
  width: 11rem; font: inherit; font-size: .92rem; padding: .2rem .4rem;
  background: #fff; border: 1px solid var(--linie); border-radius: 5px;
}
input.hauptfarbe-neu {
  width: 9rem; font: inherit; font-size: .92rem; padding: .15rem .4rem;
  border: 1px solid var(--linie); border-radius: 5px;
}
/* Senkrechter Strich zwischen Menü und Konto - die Rollenangabe dahinter ist
   keine Seite, sondern eine Auskunft (Sammy, 17.09.2026). */
.menue-ende {
  width: 1px; height: 1.3em; background: rgba(255,255,255,.25); margin: 0 .2rem;
}
nav a { color: rgba(255,255,255,.85); text-decoration: none; }
nav a:hover { color: #fff; text-decoration: underline; }

/* Der Schriftzug auf den Seiten ohne Anmeldung - dort auf hellem Grund */
.anmeldelogo { color: var(--dunkel); width: 132px; margin: 0 auto 1.25rem; }
.anmeldelogo svg { display: block; width: 100%; height: auto; }

main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.25rem; }

/* --------------------------------------------------------------- Anmeldung */
.anmeldung {
  max-width: 26rem; margin: 4rem auto; padding: 2rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
}
.anmeldung h1 { margin: 0 0 .25rem; font-size: 1.35rem; }
.unter { margin: 0 0 1.5rem; color: var(--leise); }
label { display: block; margin: .9rem 0 .3rem; font-size: .9rem; color: var(--leise); }
input {
  width: 100%; padding: .6rem .7rem; font-size: 1rem;
  border: 1px solid var(--linie); border-radius: 7px; background: #fff;
}
input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
button {
  margin-top: 1.25rem; width: 100%; padding: .65rem 1rem; font-size: 1rem;
  color: #fff; background: var(--akzent); border: 0; border-radius: 7px; cursor: pointer;
}
button:hover { filter: brightness(1.08); }
.fehler {
  margin: 0 0 1rem; padding: .6rem .75rem; border-radius: 7px;
  background: #fdecee; color: var(--warnung); border: 1px solid #f7ced2;
}

/* ------------------------------------------------------------------ Listen */
/* Das Suchfeld behält eine Mindestbreite, die Auswahlfelder brechen notfalls in
   die nächste Zeile um. Ohne das drückte das Herstellerfeld (0.27.0) die Suche
   auf ein leeres Kästchen zusammen (Sammy, 18.09.2026: „Was ist das für ein
   Kästchen?"). */
.suche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.suche input { flex: 1 1 14rem; min-width: 12rem; }
.suche button { margin: 0; width: auto; padding: .6rem 1.25rem; }
.zuruecksetzen { color: var(--leise); text-decoration: none; white-space: nowrap; }
.anzahl { margin: 0 0 .75rem; color: var(--leise); font-size: .9rem; }

table {
  width: 100%; border-collapse: collapse; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; overflow: hidden;
}
th, td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--linie); }
th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--leise); background: #fbfcfd; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
.nr { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.leer { color: var(--leise); text-align: center; padding: 2rem; }
.marke-ja { color: var(--gut); }
.marke-grau { color: var(--leise); }

.blaettern { display: flex; gap: 1.25rem; align-items: center; justify-content: center; margin: 1.25rem 0; }
.blaettern a { color: var(--akzent); text-decoration: none; }
.blaettern span { color: var(--leise); }

footer {
  max-width: 1100px; margin: 2rem auto 3rem; padding: 0 1.25rem;
  color: var(--leise); font-size: .85rem;
}
.warnung { color: var(--warnung); }

/* ------------------------------------------------------------- Kachelliste */
.suche select {
  padding: .6rem .5rem; font-size: .95rem; background: #fff;
  border: 1px solid var(--linie); border-radius: 7px;
  /* Lange Einträge („Kein Bestand (im Sortiment, aber 0 beim Lieferanten)")
     machten die Felder so breit wie ihren längsten Text. Geöffnet zeigt die
     Liste trotzdem alles. */
  max-width: 11rem;
}
.kacheln {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.kachel {
  display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
  overflow: hidden; transition: border-color .12s, transform .12s;
}
.kachel:hover { border-color: var(--akzent); transform: translateY(-1px); }
/* Seit 0.31.0 ist die Kachel keine Verknüpfung mehr, sondern enthält eine:
   darunter stehen Auswahlfelder, und ein Formular gehört nicht in einen Link. */
.kachelverweis { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.kachelpflege { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; padding: 0 .7rem .7rem; }
.kachelform { display: flex; gap: .3rem; margin: 0; align-items: center; }
.kachelform select {
  flex: 1 1 auto; min-width: 0; padding: .3rem .4rem; font-size: .82rem;
  background: #fff; border: 1px solid var(--linie); border-radius: 6px;
}
.kachelform button.klein { margin: 0; }
/* Woher der Vorschlag kommt, unter dem Feld (0.48.0, Aufgabe „Ohne Art“) */
.kachelhinweis { font-size: .74rem; line-height: 1.3; color: var(--leise); margin: -.15rem 0 .1rem; overflow-wrap: anywhere; }
.kachelhinweis.vorschlag { color: var(--text); font-weight: 600; }
/* „Warengruppe passt so" (0.49.0): Kästchen links neben dem Text, nicht in voller Breite */
label.kachelhinweis { display: flex; align-items: center; gap: .35rem; margin: .1rem 0 0; cursor: pointer; }
label.kachelhinweis input[type=checkbox] { width: auto; margin: 0; padding: 0; }
/* Ein „Speichern" für alle Auswahlen der Seite (0.32.0) */
.listenpflege .knopfzeile { align-items: center; margin: .2rem 0 .8rem; }
.listenpflege .knopfzeile .leise { font-size: .85rem; }
.kachel .bild, .farbe .bild, .kopfbild {
  display: flex; align-items: center; justify-content: center;
  background: #fff; overflow: hidden;
}
.kachel .bild { height: 180px; border-bottom: 1px solid var(--linie); }
.kachel img, .farbe img, .kopfbild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ohne { color: #c3c8cf; font-size: .8rem; }
.kachel .text { padding: .6rem .7rem .75rem; }
.kachel .bez { font-weight: 600; line-height: 1.3; margin: .15rem 0 .25rem; }
.leise { color: var(--leise); font-size: .85rem; }
.punkt {
  display: inline-block; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--gut); margin-left: .35rem; vertical-align: middle;
}

/* ------------------------------------------------------------- Ein Modell */
.zurueck { margin: 0 0 1rem; }
.zurueck a { color: var(--akzent); text-decoration: none; }
.kopf { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
.kopfbild {
  flex: 0 0 220px; height: 260px; border: 1px solid var(--linie); border-radius: 10px;
}
.kopf h1 { margin: 0 0 .25rem; font-size: 1.5rem; }
.untertitel { margin: 0 0 .75rem; color: var(--leise); }
.kurz { max-width: 46rem; }
.schild {
  display: inline-block; margin: 0 .35rem .35rem 0; padding: .15rem .55rem;
  border-radius: 999px; font-size: .82rem; background: #eef1f5; color: var(--leise);
}
.schild.ja { background: #eaf5eb; color: var(--gut); }

h2 { font-size: 1.05rem; margin: 1.75rem 0 .75rem; }

.farben { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.farbe {
  display: flex; gap: .75rem; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; padding: .6rem; align-items: flex-start;
}
.farbe .bild { flex: 0 0 72px; height: 90px; border-radius: 6px; }
.farbe .name { font-weight: 600; }
.farbe .name .leise { margin-left: .35rem; font-weight: 400; }
.tupfen {
  display: inline-block; width: .85rem; height: .85rem; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15); margin-right: .35rem; vertical-align: -1px;
}
.groessen { font-size: .9rem; margin: .2rem 0; }

.spalten { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
table.klein { font-size: .92rem; }
table.klein th.feld { width: 40%; color: var(--leise); font-weight: 500; text-transform: none; letter-spacing: 0; background: transparent; }
.beschreibung { max-width: 46rem; }

.bilderreihe { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.bilderreihe figure { margin: 0; background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: .4rem; text-align: center; }
.bilderreihe img { max-width: 100%; height: 110px; object-fit: contain; }
.bilderreihe figcaption { font-size: .75rem; color: var(--leise); margin-top: .3rem; }

@media (max-width: 640px) {
  .kopf { flex-direction: column; }
  .kopfbild { flex: none; width: 100%; height: 220px; }
  .suche { flex-wrap: wrap; }
}

/* ------------------------------------------------------------- Bearbeiten */
.meldung {
  margin: 0 0 1rem; padding: .6rem .75rem; border-radius: 7px;
  background: #eaf5eb; color: var(--gut); border: 1px solid #c9e5cb;
}
.schilder { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.knopfform { display: inline; margin: 0; }
button.klein {
  width: auto; margin: 0; padding: .2rem .7rem; font-size: .82rem;
  background: #fff; color: var(--akzent); border: 1px solid var(--akzent);
  border-radius: 999px;
}
button.klein:hover { background: var(--akzent); color: #fff; filter: none; }
.gut { color: var(--gut); }

.texte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: 1rem 1.25rem 1.25rem; max-width: 46rem;
}
.texte textarea {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--linie); border-radius: 7px; resize: vertical;
}
.texte button { width: auto; padding: .55rem 1.4rem; }
.texte .leise { margin: .6rem 0 0; }
.zweispaltig { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .zweispaltig { grid-template-columns: 1fr; } }

td.alt { color: var(--leise); text-decoration: line-through; }

/* --------------------------------------------------------- Schnittstellen */
.schnittstelle {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: 1rem 1.25rem 1.25rem; margin-bottom: 1rem;
}
.schnittstelle h2 { margin: 0; font-size: 1.05rem; }
.titelzeile { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; }
.schild.rot { background: #fdeceb; color: var(--warnung); }
.einzelheiten { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .88rem; margin: .4rem 0 .8rem; }
.einzelheiten b { color: var(--leise); font-weight: 500; }
.schnittstelle table { margin-top: .5rem; }

/* --------------------------------------------------------- Einstellungen */
.titelzeile.breit { justify-content: space-between; margin-bottom: .5rem; }
.titelzeile.breit h1 { margin: 0; }
a.knopf {
  padding: .5rem 1.1rem; border-radius: 7px; text-decoration: none;
  background: var(--akzent); color: #fff; font-size: .95rem; white-space: nowrap;
}
a.knopf:hover { filter: brightness(1.08); }
.texte.breit { max-width: 52rem; }
tr.stillgelegt { opacity: .55; }
td.knapp { max-width: 22rem; word-break: break-word; }
.texte select {
  width: 100%; padding: .6rem .7rem; font: inherit; background: #fff;
  border: 1px solid var(--linie); border-radius: 7px;
}
.ankreuz { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; color: var(--text); }
.ankreuz input { width: auto; }
.hinweiszeile { margin: .4rem 0 0; }
details { margin-top: 1.25rem; border-top: 1px solid var(--linie); padding-top: .75rem; }
details summary { cursor: pointer; color: var(--akzent); font-size: .92rem; }
details[open] summary { margin-bottom: .5rem; }

.mitte { text-align: center; margin-top: 1rem; }
.mitte a { color: var(--akzent); text-decoration: none; }

/* ------------------------------------------------------------- Startseite */
.ampeln { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ampel {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--linie); border-radius: 10px; padding: .75rem .9rem;
}
.ampel .kopfzeile { display: flex; align-items: center; gap: .5rem; }
.ampel .wann { font-size: 1.15rem; margin: .25rem 0 .1rem; }
.punkt.gross { width: .7rem; height: .7rem; margin: 0; background: var(--linie); }
.ampel.frisch    { border-left-color: var(--gut); }
.ampel.frisch .punkt.gross { background: var(--gut); }
.ampel.spaet     { border-left-color: var(--hinweis); }
.ampel.spaet .punkt.gross { background: var(--hinweis); }
.ampel.spaet .wann { color: #b06a12; }
.ampel.alt       { border-left-color: var(--warnung); }
.ampel.alt .punkt.gross { background: var(--warnung); }
.ampel.alt .wann { color: var(--warnung); font-weight: 600; }
.ampel.ohne_plan .wann, .ampel.unbekannt .wann { color: var(--leise); }

.vorrat { display: grid; gap: .6rem; }
.posten {
  display: flex; gap: 1rem; align-items: center; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-left: 4px solid var(--linie); border-radius: 10px; padding: .7rem 1rem;
}
.posten:hover { border-color: var(--akzent); border-left-color: var(--akzent); }
.posten.dringend { border-left-color: var(--warnung); }
.posten .zahl {
  min-width: 4.5rem; text-align: right; font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.posten.dringend .zahl { color: var(--warnung); }
.ampel .grund { font-size: .8rem; color: var(--leise); font-style: italic; margin-bottom: .2rem; }
.marke-text { cursor: default; }

/* Kanaele: Bildarten ankreuzen. Die Kaestchen stehen nebeneinander, damit die
   Zeile eines Kanals eine Zeile bleibt. */
.bildartform { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.bildartform label { display: inline-flex; align-items: center; gap: .3rem;
  font-size: .9rem; cursor: help; }
.bilderreihe figcaption .schild { margin-top: .2rem; }

/* ---------------------------------------------------------------- Eingang */
/* Browser blenden [hidden] aus - aber nur, solange keine Regel ein display
   setzt. .schilder tut das. Deshalb ausdruecklich. */
[hidden] { display: none !important; }
nav .zaehler {
  margin-left: .3rem; padding: 0 .45rem; border-radius: 999px;
  background: var(--akzent); color: #fff; font-size: .75rem;
}
.hinweistext {
  background: #fbf6ea; border: 1px solid #f0e2bd; border-radius: 7px;
  padding: .6rem .75rem; white-space: pre-line;
}

/* Die oeffentliche Abgabeseite: ein Kasten, ein Feld, ein Knopf. */
.abgabe {
  max-width: 40rem; margin: 3rem auto; padding: 2rem;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px;
}
.abgabe h1 { margin: 0 0 .25rem; font-size: 1.35rem; text-align: center; }
.abgabe .unter { text-align: center; }
.abgabe .fehler ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.ablagefeld {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .25rem; min-height: 9rem; margin: 1rem 0 .75rem; padding: 1.5rem;
  border: 2px dashed #c9cbd2; border-radius: 10px; background: var(--hintergrund);
  color: var(--text); cursor: pointer; text-align: center; font-size: 1rem;
}
.ablagefeld:hover, .ablagefeld.aktiv, .ablagefeld:focus-within { border-color: var(--akzent); background: #f2f9f3; }
.ablagefeld .gross { font-size: 1.15rem; font-weight: 600; }
/* Das echte Dateifeld bleibt fuer Tastatur und Vorleser da, nur unsichtbar. */
.ablagefeld input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dateiliste { list-style: none; margin: 0 0 .5rem; padding: 0; max-height: 22rem; overflow: auto; }
.dateiliste li {
  display: grid; grid-template-columns: 1fr auto auto; gap: .2rem .75rem;
  align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--linie); font-size: .92rem;
}
.dateiliste .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateiliste .balken { grid-column: 1 / -1; height: 4px; background: var(--linie); border-radius: 2px; overflow: hidden; }
.dateiliste .balken i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .15s; }
.dateiliste li.fertig .balken i { background: var(--gut); width: 100%; }
.dateiliste li.fehler .balken i { background: var(--warnung); width: 100%; }
.dateiliste li.abgelehnt .name { color: var(--leise); text-decoration: line-through; }
.dateiliste .grund { grid-column: 1 / -1; color: var(--warnung); font-size: .85rem; }
.dateiliste .grund:empty { display: none; }
.dateiliste button.weg {
  width: auto; margin: 0; padding: 0 .4rem; background: transparent;
  color: var(--leise); border: 0; font-size: 1.1rem; line-height: 1;
}
.dateiliste button.weg:hover { color: var(--warnung); filter: none; }
.dateiliste li.laeuft button.weg, .dateiliste li.fertig button.weg { visibility: hidden; }
#abgabe button:disabled { background: #c9cbd2; cursor: default; filter: none; }
.abgabe .schilder.mitte { justify-content: center; margin-top: .75rem; }

/* Intern: ein Link, seine Sendungen, ihre Dateien */
.linkkasten {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;
}
.linkzeile { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.linkzeile input { flex: 1; min-width: 16rem; font-size: .95rem; }
.linkaktionen { margin-top: .75rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.linkaktionen a { color: var(--akzent); }
.vorlage {
  width: 100%; font: inherit; font-size: .9rem; padding: .6rem .7rem;
  border: 1px solid var(--linie); border-radius: 7px; resize: vertical;
}
.sendung {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1rem;
}
.sendung .titelzeile.breit { margin-bottom: .25rem; }
.sendung .nachricht { white-space: pre-line; background: var(--hintergrund); border-radius: 7px; padding: .5rem .75rem; }
.eingangsdateien {
  display: grid; gap: .6rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.eingangsdatei { margin: 0; border: 1px solid var(--linie); border-radius: 8px; padding: .4rem; background: #fff; }
.eingangsdatei .bild {
  display: flex; align-items: center; justify-content: center; height: 120px;
  background: var(--hintergrund); border-radius: 6px; overflow: hidden; text-decoration: none;
}
.eingangsdatei img { max-width: 100%; max-height: 100%; object-fit: contain; }
.eingangsdatei .endung { font-weight: 700; color: var(--leise); letter-spacing: .05em; font-size: .9rem; }
.eingangsdatei .name { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .3rem; }
.eingangsdatei .schilder { margin-top: .3rem; font-size: .82rem; }
.eingangsdatei .schilder a { color: var(--akzent); text-decoration: none; }
.eingangsdatei.erledigt { opacity: .6; }
.eingangsdatei.geloescht { opacity: .4; }
button.klein.rot { color: var(--warnung); border-color: var(--warnung); }
button.klein.rot:hover { background: var(--warnung); color: #fff; }
a.knopf.klein { padding: .2rem .7rem; font-size: .82rem; border-radius: 999px; }
@media (max-width: 640px) {
  .abgabe { margin: 1rem auto; padding: 1.25rem; }
  .linkzeile input { min-width: 0; }
}


/* Groessen als Chips: gruen = im Sortiment, grau = nicht. Anklickbar fuer die,
   die ueber das Sortiment entscheiden. */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0; }
.chipform { display: inline; margin: 0; }
.chip { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .82rem;
  border: 1px solid #cfd5dc; background: #eef1f5; color: var(--leise); cursor: default; }
.chip.an { background: #eaf5eb; color: var(--gut); border-color: #bfe0c3; }
button.chip { cursor: pointer; font: inherit; font-size: .82rem; }
button.chip:hover { filter: brightness(.95); }
/* Einlesen (0.18.0) */
.einleseform { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0 1.25rem; }
.einleseform input[type=file] { font-size: .92rem; max-width: 100%; }
.protokoll { background: #f6f7f9; border: 1px solid var(--linie); border-radius: 7px;
  padding: .7rem .85rem; font-size: .82rem; line-height: 1.45; overflow: auto;
  white-space: pre-wrap; word-break: break-word; max-height: 28rem; margin: .4rem 0 1rem; }
.schild.gelb { background: #fff4d6; color: #8a6100; }
.rechteform label { display: block; margin: .25rem 0; }
.rechteform label.stillgelegt { opacity: .6; }
.rechteform button { margin-top: .6rem; }
.schreibform { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.schreibform button { width: auto; margin: 0; padding: .5rem 1.1rem; }
.knopfzeile { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.fakten th.feld { white-space: nowrap; }
.preismatrix { margin: .4rem 0; }
.preismatrix summary { cursor: pointer; font-weight: 600; padding: .3rem 0; }
.tabelle-scroll { overflow-x: auto; }
.preismatrix sup { color: var(--leise); font-size: .7em; margin-left: .15rem; }

/* Ampel je Groesse (Sammy, 08.09.2026): gruen = im Sortiment mit Bestand,
   gelb = im Sortiment ohne Bestand, rot = nicht im Sortiment. */
.chip.gruen { background: #eaf5eb; color: var(--gut); border-color: #bfe0c3; }
.chip.gelb  { background: #fff4d6; color: #8a6100; border-color: #f0d48a; }
.chip.rot   { background: #fdeceb; color: var(--warnung); border-color: #f2c2bf; }
/* Bestand unbekannt: der Lieferant meldet keinen (FHB). Sammy, 09.09.2026. */
.chip.unbekannt { background: #eef3fa; color: #3b5b8a; border: 1px dashed #9db3d6; }
/* Auslauf laut Hersteller (Daiber-Liste, 016): durchgestrichen, Farbe bleibt. */
/* Auslauf je Größe (0.38.0, Sammy 29.09.2026) - neben der Farbe für Sortiment und Bestand */
.chip.laeuft-aus { box-shadow: inset 0 -3px 0 #d9730d; }
.chip.ausgelaufen { text-decoration: line-through; text-decoration-color: var(--warnung); text-decoration-thickness: 2px; opacity: .6; }
.chip.gesperrt { outline: 2px dotted #7a7a7a; outline-offset: 1px; }
.chip.legende { font-size: .7rem; padding: 0 .35rem; }
.auslauflegende { margin-top: .3rem; }
.schild.orange { background: #fff0e0; color: #9a4b00; }
a.schild { text-decoration: none; }
.auslaufzeile b { font-weight: 600; margin: 0 .2rem; }
.schilder.klein { margin-top: .25rem; font-size: .78rem; }
.blaettern .seiten { display: inline-flex; gap: .45rem; margin: 0 .6rem; }
.blaettern .seiten b { padding: 0 .25rem; }
/* Artikel von Hand (017, vorbereitet 09.09.2026) */
.artikelform { max-width: 40rem; }
.artikelform label { display: block; margin: .55rem 0; font-weight: 500; }
.artikelform input:not([type=checkbox]), .artikelform select, .artikelform textarea {
  display: block; width: 100%; margin-top: .2rem; padding: .4rem .55rem; font: inherit;
  border: 1px solid var(--linie); border-radius: 6px; box-sizing: border-box; }
.artikelform h2 { margin-top: 1.4rem; }
.artikelform button { width: auto; padding: .55rem 1.2rem; }
.ergaenzen { margin: .6rem 0 1.2rem; }
.ergaenzen summary { cursor: pointer; font-weight: 600; }
/* Codes (0.20.0) */
.codeform { display: inline; margin: 0; }
.codeform input { width: 5.5rem; font: inherit; padding: .15rem .4rem; border: 1px solid var(--linie); border-radius: 5px; }
.knopfzelle { white-space: nowrap; }
.knopfzelle form.inline { display: inline; margin: 0 0 0 .3rem; }
.chip.mini  { display: inline-block; width: .7rem; height: .7rem; padding: 0; vertical-align: middle; }
.staffel { font-size: .75rem; line-height: 1.2; margin-top: .1rem; }

/* Freigaben (0.35.0): Häkchen neben seiner Beschriftung, nicht darüber */
.einleseform label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.einleseform label input[type=checkbox] { width: auto; margin: 0; }
.einleseform label { white-space: nowrap; }

/* Preislisten (0.36.0): der Einkaufspreis am Beispiel - Sammy, 25.09.2026:
   „Den konnte ich nicht finden." */
.einkauf { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 7px; padding: .5rem .75rem; }
/* Freigaben (0.36.0): Verkaufspreise vor und nach dem Übernehmen */
.vorschau td.zahl { white-space: nowrap; }
.vorschau .pfeil { color: var(--leise); padding: 0 .15rem; }
.beispiele a { white-space: nowrap; }
/* Änderungen (0.37.0): Reiter zum Filtern, Rücknahme je Zeile */
nav.reiter { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 .8rem; font-size: .9rem; }
nav.reiter a { padding: .25rem .7rem; border: 1px solid var(--linie); border-radius: 999px; text-decoration: none;
               color: var(--text); }   /* sonst weiß wie die Kopfzeile (nav a) */
nav.reiter a:hover { color: var(--text); text-decoration: underline; }
nav.reiter a.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; }
/* Zahl im Reiter („Auslauf", 0.38.2) */
nav.reiter a .zahl { margin-left: .25rem; font-size: .85em; opacity: .75; }