/* Bausteine: Karten, Meldungen, Listen, Kacheln, Tabellen, Ampeln, Dialoge */
.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: var(--abstand); margin-bottom: var(--abstand); box-shadow: var(--schatten);
}
.karte > h2:first-child { margin-top: 0; }
.raster { display: grid; gap: var(--abstand); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.meldung { padding: 12px 14px; border-radius: var(--radius-klein); margin: 0 0 12px; }
.meldung.fehler { background: var(--fehler-hg); color: var(--fehler); }
.meldung.erfolg { background: var(--erfolg-hg); color: var(--erfolg); }
.meldung.hinweis { background: var(--warnung-hg); color: var(--warnung); }

.liste-einfach { list-style: none; margin: 0; padding: 0; }
.liste-einfach > li { border-bottom: 1px solid var(--rand); }
.liste-einfach > li:last-child { border-bottom: 0; }
.liste-einfach a, .liste-einfach .zeile {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px;
  color: var(--text); text-decoration: none;
}
.liste-einfach a:hover { background: var(--flaeche-2); }
.liste-einfach svg { width: 22px; height: 22px; color: var(--text-leise); flex: none; }

.kacheln { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kachel {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  color: var(--text); text-decoration: none;
}
.kachel .bild { aspect-ratio: 1; background: var(--flaeche-2); display: flex; align-items: center; justify-content: center; }
.kachel .bild img { width: 100%; height: 100%; object-fit: cover; }
.kachel .bild svg { width: 40px; height: 40px; color: var(--text-leise); }
.kachel .text { padding: 8px 10px; }
.kachel .name { font-weight: 600; overflow-wrap: anywhere; }
.kachel .unter { font-size: 0.8rem; color: var(--text-leise); }

.tabelle-huelle { overflow-x: auto; }
table.tabelle { width: 100%; border-collapse: collapse; background: var(--flaeche); }
.tabelle th, .tabelle td { padding: 10px 8px; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
.tabelle th { font-size: 0.85rem; color: var(--text-leise); }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; white-space: nowrap; }

.ampel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ampel::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.ampel.gruen { color: var(--gruen); }
.ampel.gelb { color: var(--gelb); }
.ampel.rot { color: var(--rot); }
progress.balken {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; margin: 6px 0;
  border: 0; border-radius: 5px; background: var(--flaeche-2); overflow: hidden;
}
progress.balken::-webkit-progress-bar { background: var(--flaeche-2); }
progress.balken::-webkit-progress-value { background: currentColor; }
progress.balken::-moz-progress-bar { background: currentColor; }

.marke-klein {
  display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
  background: var(--flaeche-2); color: var(--text-leise);
}
.marke-klein.wert { background: var(--akzent-hell); color: var(--akzent); }

.codes { columns: 2; font-family: ui-monospace, monospace; font-size: 1.05rem; padding-left: 1.2em; }
.geheimnis { font-family: ui-monospace, monospace; letter-spacing: 0.08em; overflow-wrap: anywhere; }
.qr { background: #fff; padding: 8px; border-radius: var(--radius-klein); width: 200px; height: 200px; }

dialog.dialog {
  border: 1px solid var(--rand); border-radius: var(--radius); padding: 0;
  background: var(--flaeche); color: var(--text); width: min(520px, calc(100vw - 32px));
}
dialog.dialog::backdrop { background: rgb(0 0 0 / 0.45); }
dialog.dialog .dialog-inhalt { padding: var(--abstand); }

.kopfreihe { justify-content: space-between; align-items: center; margin: 0 0 12px; }
.kopfreihe .anzahl { margin: 0; color: var(--text-leise); }
.knopf[aria-pressed="true"] { background: var(--akzent-hell); }
.kachel-huelle { position: relative; display: flex; }
.kachel-huelle > .kachel { flex: 1; }
.auswahl {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: var(--flaeche); border-radius: var(--radius-klein); box-shadow: var(--schatten);
}
.tabelle .auswahl { position: static; box-shadow: none; width: auto; height: auto; }
.filter .raster { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 var(--abstand); }
.filter { padding-bottom: 4px; }

.fotos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-bottom: 12px; }
.foto { margin: 0; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--flaeche-2); }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto figcaption { padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; background: var(--flaeche); }
.foto .knopfreihe { margin: 0; }
.platzhalter { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-leise); }
.platzhalter svg { width: 36px; height: 36px; }
.hochladen { margin-top: 8px; }
.hochladen .knopf svg { width: 20px; height: 20px; }
.hochladen:focus-within label.knopf { outline: 3px solid var(--fokus); outline-offset: 2px; }
dl.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px var(--abstand); margin: 0; }
dl.felder dt { font-size: 0.85rem; color: var(--text-leise); }
dl.felder dd { margin: 0; overflow-wrap: anywhere; }
fieldset.karte { border: 1px solid var(--rand); }
fieldset.karte legend { font-weight: 700; padding: 0 6px; }
.verlauf li { padding: 8px 4px; }

ul.baum { list-style: none; margin: 0; padding: 0; }
ul.baum ul.baum { padding-left: 20px; border-left: 2px solid var(--rand); margin-left: 6px; }
.baum-zeile { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; min-height: 44px; padding: 8px 4px; border-bottom: 1px solid var(--rand); }
.baum-zeile a { font-weight: 600; }
.zeile-breit { justify-content: space-between; }
.passwort-neu { padding: 8px 4px 12px; }
.fotos-neu { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-bottom: 8px; }
.foto-neu { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.foto-neu img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-klein); }
.foto-neu .knopf { font-size: 0.75rem; padding: 4px 6px; }
.scanbereich { margin: 8px 0 12px; }
.scanbereich .knopf svg { width: 20px; height: 20px; }
.scanner-video { width: 100%; max-height: 50vh; object-fit: cover; border-radius: var(--radius); background: #000; }
.scan-ergebnis .meldung { margin-top: 8px; }
.scan-ergebnis .meldung p { margin: 0 0 8px; }
.ampel-zeile { margin-bottom: 14px; }
.ampel-zeile p { margin: 0 0 4px; }
.balken.gruen { color: var(--gruen); }
.balken.gelb { color: var(--gelb); }
.balken.rot { color: var(--rot); }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: 8px 12px 12px; margin: 0 0 14px; }
fieldset legend { font-weight: 600; padding: 0 4px; }
.auswahl-liste ul { max-height: 320px; overflow-y: auto; }