/* Gestaltung des Familienportals.
 *
 * Ruhig und hell, warmes Papierweiß statt kaltem Grau, ein einziger
 * Akzent in Grün. Mobil zuerst, große Tap-Ziele, Systemschriften.
 * Freundlich, aber nicht verspielt — das hier ist kein Produkt.
 */

:root {
  color-scheme: light dark;

  --grund: #f7f5f1;
  --flaeche: #ffffff;
  --flaeche-ruhig: #f0ede7;
  --rand: #e3ded4;
  --rand-stark: #cfc8bb;
  --schrift: #211f1c;
  --schrift-leise: #6d675e;
  --betont: #2d6a54;
  --betont-schrift: #ffffff;
  --betont-weich: #e7f0ea;
  --warnung: #9a4527;
  --warnung-weich: #f8ebe5;

  --rundung: 14px;
  --rundung-klein: 10px;
  --tap: 46px;
  /* Überschriften in einer Serifenschrift. Das macht den Unterschied
     zwischen "Formular" und "Zuhause" — und kostet nichts, weil es nur
     Schriften sind, die auf den Geräten ohnehin liegen. */
  --titelschrift: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;

  --spalte: 46rem;
  --spalte-weit: 64rem;
  --rand-links: max(1rem, env(safe-area-inset-left));
  --rand-rechts: max(1rem, env(safe-area-inset-right));

  --schatten: 0 1px 2px rgba(33, 31, 28, 0.04), 0 2px 8px rgba(33, 31, 28, 0.04);
  --schatten-hoch: 0 2px 4px rgba(33, 31, 28, 0.06), 0 8px 20px rgba(33, 31, 28, 0.08);
  --kreis: rgba(255, 255, 255, 0.86);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #17181a;
    --flaeche: #1e2022;
    --flaeche-ruhig: #262a2c;
    --rand: #33383b;
    --rand-stark: #464c50;
    --schrift: #e9e6e0;
    --schrift-leise: #9a958c;
    --betont: #7cc3a5;
    --betont-schrift: #14251e;
    --betont-weich: #1d2f28;
    --warnung: #e09a7c;
    --warnung-weich: #2d211c;

    --schatten: none;
    --schatten-hoch: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* Der Kreis unter dem Auswahlkästchen im Bestand. Hell wäre im
       Dunkelmodus ein Loch in der Karte. */
    --kreis: rgba(30, 32, 34, 0.86);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.55rem;
  /* Auf breiten Schirmen soll der Name über dem Inhalt stehen und nicht
     allein in der linken Ecke. */
  padding: calc(env(safe-area-inset-top) + 0.85rem)
           max(var(--rand-rechts), calc((100% - var(--spalte-weit)) / 2)) 0.85rem
           max(var(--rand-links), calc((100% - var(--spalte-weit)) / 2));
  border-bottom: 1px solid var(--rand);
  background: color-mix(in srgb, var(--flaeche) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}

.kopf-marke {
  /* Der Name gibt nicht nach, der Seitentitel schon. Ohne das rutschte
     bei einem langen Titel der Name in die zweite Zeile. */
  flex: 0 0 auto;
  font-family: var(--titelschrift);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--schrift);
  text-decoration: none;
}

.kopf-marke::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--betont);
}

.kopf-titel {
  color: var(--schrift-leise);
  font-size: 0.95rem;
  /* Lange Titel dürfen die Kopfzeile nicht sprengen. */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Rahmen ------------------------------------------------------------- */

.inhalt {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 1.75rem var(--rand-rechts) 0 var(--rand-links);
}

/* Der Bestand ist eine Galerie und darf breiter sein als eine Textseite.
   Am Handy ändert das nichts, dort ist ohnehin der Bildschirm die Grenze. */
.inhalt-weit { max-width: var(--spalte-weit); }

h1 {
  font-family: var(--titelschrift);
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 0.4rem;
}

h2 {
  font-family: var(--titelschrift);
  font-size: 1.35rem;
  line-height: 1.3;
  letter-spacing: -0.008em;
  font-weight: 600;
  margin: 2.25rem 0 0.75rem;
}

p { margin: 0 0 1rem; }

a { color: var(--betont); text-underline-offset: 0.18em; }

.leise {
  color: var(--schrift-leise);
  font-size: 0.95rem;
}

p.leise { margin-top: 0; }

hr {
  border: none;
  border-top: 1px solid var(--rand);
  margin: 2rem 0;
}

:focus-visible {
  outline: 2px solid var(--betont);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Bedienelemente ----------------------------------------------------- */

button,
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--tap);
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--rundung-klein);
  background: var(--betont);
  color: var(--betont-schrift);
  font: inherit;
  font-size: 1rem;
  font-weight: 540;
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}

button:hover,
.knopf:hover { filter: brightness(1.07); }

button:active,
.knopf:active { transform: translateY(1px); }

button:disabled {
  opacity: 0.5;
  cursor: default;
  filter: none;
  transform: none;
}

.knopf-ruhig,
button.knopf-ruhig {
  background: var(--flaeche);
  color: var(--schrift);
  border-color: var(--rand-stark);
}

.knopf-gefahr,
button.knopf-gefahr {
  background: var(--flaeche);
  color: var(--warnung);
  border-color: var(--warnung);
}

label {
  display: block;
  margin-bottom: 1.15rem;
}

label > span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--schrift-leise);
  font-size: 0.9rem;
  font-weight: 500;
}

input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--rand-stark);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--schrift);
  font: inherit;
  font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--betont);
  outline-offset: 0;
}

textarea {
  min-height: 7rem;
  resize: vertical;
  line-height: 1.55;
}

input[type="file"] {
  padding: 0.7rem;
  background: var(--flaeche-ruhig);
  border-style: dashed;
}

.schalter {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
}

.schalter input {
  width: auto;
  min-height: auto;
  margin-top: 0.3rem;
  flex: 0 0 auto;
  accent-color: var(--betont);
}

.schalter span {
  margin: 0;
  color: var(--schrift);
  font-size: 0.95rem;
  font-weight: 400;
}

.zwei {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: 1fr 1fr;
}

/* --- Meldungen ---------------------------------------------------------- */

.hinweis {
  margin: 1.1rem 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--warnung);
  border-left-width: 3px;
  border-radius: var(--rundung-klein);
  background: var(--warnung-weich);
  color: var(--warnung);
  font-size: 0.95rem;
}

.kasten {
  margin: 1.3rem 0;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.kasten p:last-child { margin-bottom: 0; }

.link {
  display: block;
  padding: 0.7rem 0.8rem;
  border-radius: var(--rundung-klein);
  background: var(--flaeche-ruhig);
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  word-break: break-all;
  user-select: all;
}

.mitteilung {
  margin-top: 15vh;
  text-align: center;
}

.mitteilung-status {
  font-size: 3rem;
  font-weight: 620;
  letter-spacing: -0.03em;
  color: var(--rand-stark);
  margin: 0 0 0.3rem;
  line-height: 1;
}

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

.anmeldung {
  max-width: 23rem;
  margin: 11vh auto 0;
  padding: 1.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten-hoch);
}

.anmeldung h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.anmeldung form { margin-top: 1.5rem; }
.anmeldung button { width: 100%; }

/* --- Kacheln des Dashboards --------------------------------------------- */

.kacheln {
  display: grid;
  gap: 1rem;
  /* 13.5rem, damit in der normalen Spalte drei nebeneinander passen.
     Bei 15rem blieben es zwei und die dritte stand allein. */
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  margin: 2rem 0 2.5rem;
  padding: 0;
  list-style: none;
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Ohne das ist die Kachel nur so hoch wie ihr Text, und eine Zeile mehr
     macht eine Kachel größer als ihre Nachbarn. */
  height: 100%;
  padding: 1.35rem 1.4rem 1.25rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  color: var(--schrift);
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.kachel-kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.kachel-kopf strong {
  font-family: var(--titelschrift);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Die Zahl ist das, was man aus drei Metern Entfernung sehen soll. */
.kachel-wert {
  font-size: 2.3rem;
  line-height: 1.05;
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--betont);
}

.kachel-zeile {
  color: var(--schrift-leise);
  font-size: 0.92rem;
  line-height: 1.45;
  margin-top: auto;
  padding-top: 0.35rem;
}

.kachel:hover {
  box-shadow: var(--schatten-hoch);
  border-color: var(--rand-stark);
  transform: translateY(-1px);
}

.kachel-zeichen {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--rundung-klein);
  background: var(--betont-weich);
  color: var(--betont);
}

.kachel-zeichen svg { width: 1.3rem; height: 1.3rem; }

/* Ein Vorspann unter der Begrüßung: groß genug, um dazuzugehören,
   leise genug, um nicht mit der Überschrift zu streiten. */
.vorspann {
  color: var(--schrift-leise);
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}
.kachel-text strong { font-weight: 600; letter-spacing: -0.008em; }

.fusszeile {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
}

.fusszeile form { margin: 0; }

/* --- Reiter und Filter -------------------------------------------------- */

/* Verborgen heißt verborgen. Eigene display-Regeln schlagen sonst das
   hidden-Attribut, und eine Leiste, die sich nicht wegblenden lässt,
   steht dauernd im Weg. Genau das ist passiert. */
[hidden] { display: none !important; }

/* Die Reiter bleiben in einer Zeile und lassen sich schieben. Umbrechen
   sah nach Versehen aus, sobald ein fünfter dazukam. */
.reiter {
  display: flex;
  gap: 0.15rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--rand);
}

.reiter::-webkit-scrollbar { display: none; }

/* Am Handy passen nicht alle Reiter nebeneinander. Der weiche Rand rechts
   sagt, dass dort noch etwas kommt — ohne ihn sähe es aus, als wäre die
   Liste zu Ende. */
@media (max-width: 30rem) {
  .reiter {
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }
}

.reiter a { flex: 0 0 auto; white-space: nowrap; }

.reiter a {
  padding: 0.55rem 0.85rem;
  color: var(--schrift-leise);
  text-decoration: none;
  font-size: 0.97rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.reiter a:hover { color: var(--schrift); }

.reiter a[aria-current="page"] {
  color: var(--schrift);
  border-bottom-color: var(--betont);
  font-weight: 560;
}

.suchzeile {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.suchzeile input { flex: 1; min-width: 0; }
.suchzeile button { flex: 0 0 auto; }

.filterzeile {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.filter {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rand-stark);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--schrift-leise);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.filter:hover { color: var(--schrift); }

.filter-aktiv {
  background: var(--betont);
  border-color: var(--betont);
  color: var(--betont-schrift);
  font-weight: 540;
}

/* --- Karten der Bestandsliste ------------------------------------------- */

/* Der Bestand ist eine Kleidersammlung, keine Tabelle: das Foto trägt die
   Karte, der Text steht darunter. Zwei Spalten am Handy, mehr wenn Platz
   ist. */
.karten {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  /* Am Handy zwei Spalten, auf dem Schirm fünf. Schmaler sollen die
     Karten nicht werden, sonst passt kein Titel mehr hinein. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
}

.karten a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  color: var(--schrift);
  text-decoration: none;
  overflow: hidden;
  box-shadow: var(--schatten);
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.karten a:hover {
  box-shadow: var(--schatten-hoch);
  border-color: var(--rand-stark);
}

.karte-bild {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--flaeche-ruhig);
}

.karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.karte-leer {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--rand-stark);
}

.karte-leer svg { width: 1.5rem; height: 1.5rem; }

.karte-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
  padding: 0.6rem 0.7rem 0.7rem;
}

/* Höchstens zwei Zeilen Titel: sonst sind die Karten im Raster
   unterschiedlich hoch und das Auge findet keine Linie. */
.karte-text strong {
  font-weight: 560;
  overflow-wrap: anywhere;
  line-height: 1.35;
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.karte-text > .leise { font-size: 0.85rem; }

.karte-fuss {
  display: flex;
  gap: 0.35rem 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.5rem;
}

.preis {
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  /* Der Preis darf nie umbrechen: "18,00" über "€" liest sich falsch. */
  white-space: nowrap;
}

/* In der schmalen Karte wird nichts abgeschnitten — "versch…" sagt
   niemandem etwas. Passt beides nicht nebeneinander, rückt der Preis in
   die nächste Zeile. */
.karte-fuss .marke {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 0.74rem;
  padding: 0.1rem 0.45rem;
}

/* --- Zustandsmarken ----------------------------------------------------- */

.marke {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 540;
  letter-spacing: 0.01em;
  background: var(--flaeche-ruhig);
  color: var(--schrift-leise);
  border: 1px solid var(--rand);
}

.marke-eingestellt {
  background: var(--betont-weich);
  border-color: transparent;
  color: var(--betont);
}

.marke-verkauft {
  background: var(--betont);
  border-color: var(--betont);
  color: var(--betont-schrift);
}

.marke-verschenkt {
  background: var(--flaeche-ruhig);
  border-color: var(--rand-stark);
  color: var(--schrift-leise);
}

/* --- Listen ------------------------------------------------------------- */

.liste {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.liste li {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rand);
}

.liste li:last-child { border-bottom: none; }
.liste strong { display: block; font-weight: 560; }
.liste .leise { font-size: 0.9rem; }

/* --- Bilder ------------------------------------------------------------- */

.bilder {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 1.25rem 0 1.75rem;
}

.bilder img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rundung);
  border: 1px solid var(--rand);
  display: block;
}

.vorschau {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin: -0.4rem 0 1.15rem;
}

.vorschau-teil {
  position: relative;
  width: 6rem;
  height: 6rem;
}

.vorschau img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rundung-klein);
  border: 1px solid var(--rand);
  display: block;
}

/* Reihenfolge sichtbar machen: das erste Foto wird die Vorschau im Bestand. */
.vorschau-nummer {
  position: absolute;
  left: 0.3rem;
  bottom: 0.3rem;
  min-width: 1.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 560;
  line-height: 1.35rem;
  text-align: center;
}

.vorschau-weg {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  width: 1.8rem;
  height: 1.8rem;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--schrift);
  border: 1px solid var(--rand-stark);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: var(--schatten);
}

.kopierzeile {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 1.75rem;
}

/* Bildauswahl: was in die Anzeige geht und was nur intern bleibt. */

.bild-wahl {
  position: relative;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  padding: 0.5rem;
  opacity: 0.62;
  transition: opacity 140ms ease, border-color 140ms ease;
}

.bild-wahl-an {
  opacity: 1;
  border-color: var(--betont);
}

.bild-wahl img {
  border: none;
  border-radius: var(--rundung-klein);
  margin-bottom: 0.45rem;
}

.bild-schalter {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin: 0 0 0.45rem;
}

.bild-schalter input {
  width: auto;
  min-height: auto;
  flex: 0 0 auto;
  accent-color: var(--betont);
}

.bild-schalter span {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--schrift);
}

.bild-vor {
  width: 100%;
  min-height: 2.2rem;
  font-size: 0.85rem;
  padding: 0 0.5rem;
}

.bild-marke {
  display: block;
  padding: 0.35rem 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 560;
  color: var(--betont);
}

.bilder-klein {
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 6.5rem));
  margin-bottom: 1.25rem;
}

/* --- Detailansicht ------------------------------------------------------ */

.anzeige { margin-bottom: 1.15rem; }

.anzeige > span {
  display: block;
  color: var(--schrift-leise);
  font-size: 0.9rem;
  font-weight: 500;
}

.anzeige p {
  margin: 0.15rem 0 0;
  white-space: pre-wrap;
}

.statuszeile {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}

.statuszeile label:last-of-type { margin-bottom: 1rem; }

.teilwahl {
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1.15rem;
  background: var(--flaeche);
}

.teilwahl legend {
  color: var(--schrift-leise);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0 0.3rem;
}

.teilwahl .schalter {
  border: none;
  background: none;
  padding: 0.35rem 0.2rem;
  margin: 0;
}

/* --- Zahlen ------------------------------------------------------------- */

.zahlen {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  margin: 1.25rem 0 1.75rem;
}

.zahl {
  padding: 1.1rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  text-align: center;
}

.zahl-wert {
  display: block;
  font-size: 1.7rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-bottom: 0.15rem;
}

/* --- Sonstiges ---------------------------------------------------------- */

.gefahr {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rand);
}

.neben { display: inline-block; margin: 0 0.5rem 0.5rem 0; }

.leer {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--schrift-leise);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--rundung);
  margin-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Ausklappbare Anleitungen */

.anleitung {
  margin: 1.1rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
}

.anleitung summary {
  cursor: pointer;
  font-weight: 560;
  color: var(--betont);
}

.anleitung[open] summary { margin-bottom: 0.8rem; }

.anleitung ol {
  margin: 0 0 0.5rem;
  padding-left: 1.3rem;
}

.anleitung li { margin-bottom: 0.4rem; }
.anleitung p:last-child { margin-bottom: 0; }

/* Spur eines Vinted-Laufs */

.schritt {
  margin-bottom: 2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}

.schritt h3 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.schritt .leise { margin-bottom: 0.7rem; }

.spur-text {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--rundung-klein);
  background: var(--flaeche-ruhig);
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.spur-bild {
  display: block;
  width: 100%;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
}

/* --- Erfassung: auf schnelles Abfotografieren ausgelegt ---------------- */

/* Der Auslöser ist die Hauptsache auf dieser Seite und darf am Handy nicht
   gesucht werden müssen. Das Dateifeld selbst bleibt im Baum, damit die
   Tastaturbedienung erhalten bleibt, ist aber nicht zu sehen. */
.kamera {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 9rem;
  padding: 1.5rem;
  border: 2px dashed var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  color: var(--schrift);
  cursor: pointer;
  text-align: center;
}

.kamera:hover { border-color: var(--betont); }
.kamera:active { transform: translateY(1px); }
.kamera:focus-within {
  outline: 2px solid var(--betont);
  outline-offset: 2px;
}

.kamera input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.kamera-zeichen {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--betont);
}

.kamera-text { font-size: 1.05rem; font-weight: 600; }

/* Sind alle Plätze belegt, soll der Auslöser das auch zeigen. */
.kamera-voll {
  opacity: 0.45;
  cursor: not-allowed;
}

.knopf.gross,
button.knopf.gross {
  display: block;
  width: 100%;
  padding: 1rem;
  font-size: 1.05rem;
}

/* Alles, was nicht jedes Mal gebraucht wird, liegt zugeklappt darunter. */
.mehr {
  margin-top: 1rem;
  border-top: 1px solid var(--rand);
  padding-top: 0.75rem;
}

.mehr > summary {
  cursor: pointer;
  color: var(--schrift-leise);
  padding: 0.4rem 0;
}

.mehr[open] > summary { margin-bottom: 0.5rem; }

.erledigt {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.erledigt li { margin: 0; }

.erledigt a {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

/* --- Warteschlange ---------------------------------------------------- */

.auftragsliste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.auftragszeile a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: baseline;
  min-height: var(--tap);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  margin-bottom: 0.5rem;
  text-decoration: none;
  color: inherit;
}

.auftragszeile .nummer {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.auftragszeile .was {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--schrift-leise);
}

.auftragszeile .zustand {
  font-size: 0.85rem;
  color: var(--schrift-leise);
  text-align: right;
}

.auftragszeile.fertig .zustand { color: var(--betont); }
.auftragszeile.fehler .zustand,
.auftragszeile.abgebrochen .zustand { color: var(--warnung); }

/* --- Auswahl im Bestand ----------------------------------------------- */

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.karten li { position: relative; }

/* Das Kästchen liegt in der Ecke des Fotos. Der helle Kreis darunter ist
   nötig, damit es auf einem dunklen Foto nicht verschwindet. */
.karte-wahl {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--kreis);
  box-shadow: var(--schatten);
  cursor: pointer;
}

.karte-wahl input {
  width: 20px;
  height: 20px;
  margin: 0;
  min-height: 0;
  accent-color: var(--betont);
}

/* Angehaktes soll ins Auge fallen, ohne dass die Karte springt. */
.karten li:has(.karte-wahl input:checked) > a {
  border-color: var(--betont);
  box-shadow: 0 0 0 2px var(--betont);
}

.auswahlleiste {
  position: sticky;
  bottom: 0.75rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  padding: 0.75rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  border: 1px solid var(--rand);
  border-radius: var(--rundung);
  background: var(--flaeche);
  box-shadow: var(--schatten-hoch);
}

.auswahlzahl {
  font-weight: 600;
  margin-right: auto;
}

/* --- Abschnitte ------------------------------------------------------- */

/* Die Detailseite ist lang. Damit sie nicht als eine einzige Spalte
   herunterläuft, bekommt jeder Abschnitt Luft und eine feine Linie. */
.abschnitt {
  padding-top: 1.75rem;
  margin-bottom: 1.75rem;
  border-top: 1px solid var(--rand);
}

.abschnitt:first-of-type { border-top: none; padding-top: 0.5rem; }
.abschnitt > h2 { margin-top: 0; }
.abschnitt > p:last-child { margin-bottom: 0; }