/* ============================================================
   Mein Ausruestungsbestand (ausruestung.html, 08.09.2026)
   ============================================================
   Seitenspezifisch wie modus.css, entscheiden.css und melden.css und
   deshalb ganz hinten eingebunden: Diese Regeln duerfen die gemeinsamen
   ueberschreiben, aber nichts davon darf auf eine andere Seite
   durchschlagen. Alle Selektoren beginnen darum mit "bestand-" - kein
   nacktes "label { ... }", das sonst ueberall mitfaerbt (die Falle aus
   spesen.css, siehe tests/frontend-architecture.test.js).

   Warum es diese Datei ueberhaupt gibt: bis zum 08.09.2026 lieh sich die
   Seite ihre Klassen von der Vorschlagsseite (stil/frage-vorschlagen.css,
   ".vorschlag-karte"/".vorschlag-eintrag"). Sie sah dadurch aus wie ein
   Formularwerkzeug mit angehaengter Liste - und genau das war sie auch.
   Max: "Man sieht ja eigentlich nur seinen Bestand ... so wie ein
   Kleiderschrank."

   Farben ausschliesslich aus den Tokens in stil/basis.css. Gruen, Gelb
   und Rot bleiben Rueckmeldung: sie sagen hier nur, in welchem Zustand
   ein Stueck ist, und schmuecken nichts.
   ============================================================ */

.bestand-seite { max-width: 780px; overflow-wrap: anywhere; }

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

.bestand-kopf { margin: 24px 0 18px; }

.bestand-kopf h1 {
  margin: 0 0 8px;
  font-family: var(--font-titel);
  font-size: clamp(1.6rem, 4.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.bestand-kopf p {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.55;
}

/* Der Hinweis fuer alle, die noch nicht angemeldet sind. */
.bestand-hinweis {
  max-width: 620px;
  margin: 40px auto;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.bestand-hinweis h1 {
  margin: 0 0 8px;
  font-family: var(--font-titel);
  font-size: 1.5rem;
  font-weight: 800;
}

.bestand-hinweis p { margin: 0 0 16px; color: var(--muted); line-height: 1.55; }

/* ---------- Knoepfe ----------
   Mindestens 44 px Trefferflaeche, und jeder Knopf traegt sein Wort:
   ein Symbol darf begleiten, aber nie allein stehen. */

.bestand-knopf-haupt,
.bestand-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.bestand-knopf-haupt {
  border: 1.5px solid var(--marke);
  background: var(--marke);
  color: #fff;
}

.bestand-knopf-haupt:hover { background: var(--marke-dunkel); }

.bestand-knopf {
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.bestand-knopf:hover { border-color: var(--marke); }

/* Das Loeschen faerbt sich erst rot, wenn es sichtbar wird - es steht
   ohnehin nur an einem geoeffneten Eintrag. */
.bestand-knopf-gefahr {
  border-color: var(--red-hell);
  background: var(--red-hell);
  color: var(--red);
}

.bestand-knopf-gefahr:hover { border-color: var(--red); }

.bestand-plus { font-size: 1.2rem; line-height: 1; }

.bestand-leiste { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

/* ---------- Das Formular ----------
   Es steht erst da, wenn man es angefordert hat - beim Plus-Knopf oder
   beim Antippen eines Stuecks. Inline, kein Pop-up: auf dieser Seite
   passiert nichts anderes, was ein Fenster verdecken muesste. */

.bestand-formular {
  margin-bottom: 20px;
  padding: 18px 18px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.bestand-formular h2 {
  margin: 0 0 14px;
  font-family: var(--font-titel);
  font-size: 1.05rem;
}

.bestand-raster { display: grid; gap: 12px; grid-template-columns: 1fr; }

.bestand-feld {
  display: grid;
  gap: 6px;
  font-size: .85rem;
  font-weight: 700;
}
.bestand-feld small { color: var(--muted); font-size: .72rem; font-weight: 400; line-height: 1.4; }
.bestand-farbblock { margin: 0; }
.bestand-farbblock legend { margin-bottom: 6px; font-size: .85rem; font-weight: 700; }
.bestand-farbblock > input:not([type="hidden"]) { margin-top: 8px; }

.bestand-feld-breit { margin-top: 12px; }

.bestand-feld input:not([type="radio"]):not([type="hidden"]),
.bestand-feld select,
.bestand-feld textarea {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 400;
}

.bestand-feld textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* Pflichtfelder tragen ihr Wort, nicht bloss ein Sternchen. */
.bestand-pflicht {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--marke-lighter);
  color: var(--marke);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* ---------- Die Farbauswahl ----------
   Im Usability-Test war nicht zu erkennen, ob ueberhaupt eine Farbe
   gewaehlt war: stil/bausteine.css markiert die Wahl nur mit einem
   blassen Rahmen und zwei Pixeln mehr Groesse. Auf dieser Seite haengt
   der Zustand darum an drei Merkmalen zugleich - kraeftiger Rahmen mit
   Ring, ein Haekchen am Feld und die ausgeschriebene Farbe darunter
   (die Zeile fuellt src/website/ausruestung-seite.js). Damit haengt
   nichts an Farbe oder Groesse allein, WCAG 1.4.1.
   Bewusst auf ".bestand-farbblock" eingegrenzt: dieselbe Farbwahl steht
   auch in den Fenstern aus dem Kontomenue, die ihre Regeln aus
   stil/profil.css beziehen und hier nicht mitwandern sollen. */
.bestand-farbblock .ausruestungs-farbwahl { gap: 10px; }

.bestand-farbblock .ausruestungs-farbe span {
  position: relative;
  /* 44 px Trefferflaeche - das Feld selbst, nicht erst die Zeile darum. */
  width: 44px;
  height: 44px;
  /* var(--border) laege bei 1,2:1 auf Weiss; als Umriss eines
     Bedienelements verlangt WCAG 1.4.11 mindestens 3:1. */
  border-color: var(--muted);
}

.bestand-farbblock .ausruestungs-farbe input:checked + span {
  border-width: 3px;
  border-color: var(--marke-dunkel);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--marke-dunkel);
}

/* Das Haekchen sitzt in einer eigenen dunklen Scheibe: so bleibt es
   lesbar, egal ob die Flaeche darunter Schwarz oder Weiss ist. */
.bestand-farbblock .ausruestungs-farbe input:checked + span::after {
  content: "✓";
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid var(--card);
  border-radius: 50%;
  background: var(--marke-dunkel);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}

.bestand-farbblock .ausruestungs-farbe input:checked ~ small { color: var(--text); font-weight: 800; }

.bestand-farbe-gewaehlt {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 400;
}

.bestand-farbe-gewaehlt.bestand-farbe-gewaehlt-aktiv { color: var(--text); font-weight: 700; }

.bestand-meldung {
  min-height: 1.3em;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .85rem;
}

.bestand-meldung.bestand-fehler { color: var(--red); font-weight: 600; }

.bestand-formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Das Loeschen sitzt so weit wie moeglich weg vom Speichern. */
.bestand-formular-aktionen .bestand-knopf-gefahr { margin-left: auto; }

/* ---------- Der Schrank ---------- */

.bestand-schrank { display: grid; gap: 14px; }

.bestand-gruppe {
  padding: 14px 14px 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bestand-bereich-titel {
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.bestand-fach + .bestand-fach { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

.bestand-gruppe-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--font-titel);
  font-size: 1rem;
  font-weight: 700;
}

.bestand-gruppe-symbol {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--marke-lighter);
  color: var(--marke);
}
.bestand-gruppe-symbol svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bestand-karten-symbol { width: 13px; height: 20px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.bestand-karten-symbol.card-yellow { background: var(--karte-gelb); }
.bestand-karten-symbol.card-red { background: var(--red); }

.bestand-gruppe-zahl {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--marke-lighter);
  color: var(--muted);
  font-family: var(--font-text);
  font-size: .76rem;
  font-weight: 700;
}

.bestand-eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: inherit;
}

.bestand-eintrag:hover { border-color: var(--marke); }

.bestand-eintrag-bearbeiten {
  min-width: 0;
  padding: 0;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.bestand-nachbestellen {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--marke-lighter);
  color: var(--marke);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}

.bestand-nachbestellen:hover { border-color: var(--marke); }

.bestand-eintrag-name { display: block; font-size: .95rem; font-weight: 700; }

.bestand-plaketten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.bestand-plakette {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--marke-lighter);
  color: var(--marke);
  font-size: .75rem;
  font-weight: 700;
}
.bestand-farbplakette { display: inline-flex; align-items: center; gap: 6px; }
.bestand-farbplakette i {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 50%;
  background: var(--ausruestungs-farbe, linear-gradient(135deg, var(--red), var(--marke-hell)));
}

/* Der Zustand ist die einzige Angabe, die man auf einen Blick sehen
   muss - "verschlissen" und "fehlt" sind der Grund, warum man ueberhaupt
   eine Anfrage stellt. */
.bestand-plakette.zustand-einsatzbereit { background: var(--green-light); color: var(--green-dark); }
.bestand-plakette.zustand-ersatz { background: var(--marke-lighter); color: var(--marke); }
.bestand-plakette.zustand-verschlissen { background: var(--karte-gelb-hell); color: var(--marke-dunkel); }
.bestand-plakette.zustand-fehlt { background: var(--red-hell); color: var(--red); }

.bestand-eintrag-anmerkung {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .bestand-eintrag { grid-template-columns: 1fr; }
  .bestand-nachbestellen { width: 100%; }
}

/* ---------- Noch nichts eingetragen ----------
   Eine leere Seite waere die schlechteste Antwort auf den ersten
   Besuch: hier steht, wofuer die Liste gut ist, und der Plus-Knopf
   gleich daneben. */

.bestand-leer {
  padding: 26px 20px; min-width: 0; overflow-wrap: anywhere;
  text-align: center;
  background: var(--card);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
}

.bestand-leer-symbol { display: flex; justify-content: center; gap: 8px; margin: 0; color: var(--marke); }
.bestand-leer-symbol svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.bestand-leer h2 {
  margin: 10px 0 6px;
  font-family: var(--font-titel);
  font-size: 1.05rem;
}

.bestand-leer p {
  margin: 0 auto 16px;
  max-width: 44ch;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

/* ---------- Meine Ausruestungsanfragen ----------
   Max: "sodass man da auch sieht: Ok, das ist mein Stand. Das habe ich
   angefragt." Deshalb steht die Anfrageliste hier und nicht mehr in
   einem eigenen Menuepunkt. */

.bestand-abschnitt { margin-top: 32px; }

.bestand-abschnitt-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.bestand-abschnitt-kopf h2 {
  margin: 0; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--font-titel);
  font-size: 1.15rem;
}

.bestand-abschnitt-kopf .bestand-knopf { margin-left: auto; }

.bestand-abschnitt-text {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
}

.bestand-anfrage {
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.bestand-anfrage-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.bestand-anfrage-titel { font-size: .95rem; font-weight: 700; }

.bestand-anfrage-datum { margin-left: auto; color: var(--muted); font-size: .78rem; }

.bestand-anfrage-anmerkung {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.bestand-anfrage-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bestand-anfrage-aktionen .bestand-knopf-sekundaer { min-height: 44px; }
.bestand-plakette.status-offen { background: var(--marke-lighter); color: var(--marke); }
.bestand-plakette.status-angenommen { background: var(--green-light); color: var(--green-dark); }
.bestand-plakette.status-abgelehnt { background: var(--red-hell); color: var(--text); }
.bestand-plakette.status-erledigt { background: var(--blau-hell); color: var(--text); }

.bestand-leer-zeile { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }

/* Ab Tablet zwei Spalten im Formular. Auf dem Handy bleibt alles
   untereinander - dort wird diese Seite am haeufigsten geoeffnet. */
@media (min-width: 620px) {
  .bestand-raster { grid-template-columns: 1fr 1fr; }
}