/* ============================================================
   Wissensraum — ui.css
   Zehn Komponenten. Alle Werte kommen aus tokens.css.
   Jede Komponente ist ein HTML-Fragment und einzeln nachladbar.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--gr-m);
  font-weight: var(--normal);
  line-height: var(--zeile);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: var(--stark); line-height: var(--zeile-eng); letter-spacing: -.01em; }
h1 { font-size: var(--gr-xxl); }
h2 { font-size: var(--gr-xl); }
h3 { font-size: var(--gr-l); }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }

a { color: var(--farbe-akzent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--fokus); border-radius: var(--r-klein); }

svg.ikon { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.still { color: var(--farbe-text-2); }
.leise { color: var(--farbe-text-3); font-size: var(--gr-s); }
.mono { font-family: var(--schrift-mono); font-size: var(--gr-s); }
.nur-lesbar { user-select: all; }

/* ============================================================
   1 · Shell — Seitenleiste, Kopfzeile, Inhaltsspalte
   ============================================================ */

.shell { display: grid; grid-template-columns: var(--leiste) minmax(0, 1fr); min-height: 100vh; }

.leiste {
  background: var(--farbe-flaeche);
  border-right: 1px solid var(--farbe-linie);
  padding: var(--a-5) var(--a-3);
  display: flex; flex-direction: column; gap: var(--a-5);
  position: sticky; top: 0; height: 100vh;
}
.leiste__marke { display: flex; align-items: center; gap: var(--a-2); padding: 0 var(--a-2); color: var(--farbe-text); }
.leiste__marke:hover { text-decoration: none; }
.leiste__punkt { width: 10px; height: 10px; border-radius: var(--r-voll); background: var(--farbe-akzent); }
.leiste__name { font-weight: var(--stark); letter-spacing: -.01em; }
.leiste__gruppe { display: flex; flex-direction: column; gap: 2px; }
.leiste__titel { font-size: var(--gr-s); color: var(--farbe-text-3); padding: 0 var(--a-2) var(--a-2); }

.navpunkt {
  display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-2) var(--a-2); border-radius: var(--r-klein);
  color: var(--farbe-text-2); transition: background var(--dauer) ease-out, color var(--dauer) ease-out;
}
.navpunkt:hover { background: var(--farbe-flaeche-aktiv); color: var(--farbe-text); text-decoration: none; }
.navpunkt[aria-current="page"] { background: var(--farbe-flaeche-aktiv); color: var(--farbe-text); font-weight: var(--stark); }
.navpunkt__zahl { margin-left: auto; font-size: var(--gr-s); color: var(--farbe-text-3); font-variant-numeric: tabular-nums; }
.leiste__fuss { margin-top: auto; display: flex; align-items: center; gap: var(--a-2); padding: 0 var(--a-2); }

.kopf {
  height: var(--kopf); display: flex; align-items: center; gap: var(--a-4);
  padding: 0 var(--a-6); position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--farbe-grund) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
}
.kopf__weg { display: flex; align-items: center; gap: var(--a-2); color: var(--farbe-text-3); font-size: var(--gr-s); }
.kopf__weg b { font-weight: var(--stark); color: var(--farbe-text-2); }
.kopf__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a-2); }
.kopf__menue { display: none; }

.bahn { padding: var(--a-6) var(--a-6) var(--a-8); }
.spalte { max-width: var(--spalte); margin: 0 auto; }
.bereich { margin-bottom: var(--a-7); }
.bereich__kopf { display: flex; align-items: baseline; gap: var(--a-3); margin-bottom: var(--a-3); }
.bereich__kopf h2 { font-size: var(--gr-l); }
.bereich__mehr { margin-left: auto; font-size: var(--gr-s); }
.seitenkopf { display: flex; align-items: flex-start; gap: var(--a-4); margin-bottom: var(--a-6); }
.seitenkopf__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a-2); }
.seitenkopf p { color: var(--farbe-text-2); margin-top: var(--a-2); max-width: 62ch; text-wrap: pretty; }

/* ============================================================
   2 · Knopf
   ============================================================ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--a-2);
  height: 36px; padding: 0 var(--a-4); border-radius: var(--r-klein);
  border: 1px solid var(--farbe-linie-stark); background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text); font-size: var(--gr-m); white-space: nowrap;
  transition: background var(--dauer) ease-out, border-color var(--dauer) ease-out;
}
.knopf:hover { background: var(--farbe-flaeche-aktiv); text-decoration: none; }
.knopf--haupt { background: var(--farbe-akzent); border-color: var(--farbe-akzent); color: var(--farbe-akzent-auf); font-weight: var(--stark); }
.knopf--haupt:hover { background: var(--farbe-akzent-tief); border-color: var(--farbe-akzent-tief); }
.knopf--leise { border-color: transparent; background: transparent; color: var(--farbe-text-2); }
.knopf--leise:hover { background: var(--farbe-flaeche-aktiv); color: var(--farbe-text); }
.knopf--klein { height: 28px; padding: 0 var(--a-3); font-size: var(--gr-s); }
.knopf--rund { width: 36px; padding: 0; border-radius: var(--r-voll); }
.knopf[disabled] { opacity: .5; pointer-events: none; }

/* ============================================================
   3 · Suche
   ============================================================ */

.suche { position: relative; display: flex; align-items: center; }
.suche .ikon { position: absolute; left: var(--a-4); color: var(--farbe-text-3); }
.suche input {
  width: 100%; height: 44px; padding: 0 var(--a-4) 0 46px;
  border: 1px solid var(--farbe-linie-stark); border-radius: var(--r);
  background: var(--farbe-flaeche-hoch); font-size: var(--gr-m);
}
.suche input::placeholder { color: var(--farbe-text-3); }
.suche input:focus { outline: none; border-color: var(--farbe-akzent); box-shadow: var(--fokus); }
.suche--gross input { height: 56px; font-size: var(--gr-l); border-radius: var(--r-gross); padding-left: 52px; }
.suche--gross .ikon { left: var(--a-5); width: 20px; height: 20px; }
.suche--klein input { height: 34px; padding-left: 38px; font-size: var(--gr-s); }
.suche--klein .ikon { left: var(--a-3); width: 16px; height: 16px; }

/* ============================================================
   4 · Filterleiste
   ============================================================ */

.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2); margin-bottom: var(--a-5); }
.filter__gruppe { display: flex; gap: var(--a-1); }
.filterknopf {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--a-3);
  border-radius: var(--r-voll); border: 1px solid var(--farbe-linie); background: transparent;
  color: var(--farbe-text-2); font-size: var(--gr-s); white-space: nowrap; cursor: pointer;
}
.filterknopf input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.filterknopf:hover { background: var(--farbe-flaeche-aktiv); color: var(--farbe-text); }
.filterknopf:has(input:focus-visible) { box-shadow: var(--fokus); }
.filterknopf:has(input:checked),
.filterknopf[aria-pressed="true"] { background: var(--farbe-akzent-fond); border-color: transparent; color: var(--farbe-akzent-text); font-weight: var(--stark); }
.filter__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a-2); }
.filter__zahl { font-size: var(--gr-s); color: var(--farbe-text-3); font-variant-numeric: tabular-nums; }

/* ============================================================
   5 · Datenzeile — ein Muster für alle fünf Typen
   ============================================================ */

.liste { display: flex; flex-direction: column; }
.zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-3) var(--a-4);
  align-items: center; padding: var(--a-3) var(--a-3);
  border-radius: var(--r); color: var(--farbe-text);
  transition: background var(--dauer) ease-out;
}
a.zeile:hover { background: var(--farbe-flaeche-aktiv); text-decoration: none; }
.zeile + .zeile { box-shadow: 0 -1px 0 var(--farbe-linie); }
.zeile__haupt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zeile__titel { font-size: var(--gr-l); font-weight: var(--stark); letter-spacing: -.01em; }
.zeile__unter { color: var(--farbe-text-2); font-size: var(--gr-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zeile__rechts { display: flex; align-items: center; gap: var(--a-3); justify-self: end; }
.zeile--ungeprueft .zeile__titel::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: var(--r-voll);
  background: var(--farbe-warn); margin-right: var(--a-2); vertical-align: middle;
}

.leerzustand {
  padding: var(--a-8) var(--a-5); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--a-3);
}
.leerzustand h3 { font-weight: var(--stark); }
.leerzustand p { color: var(--farbe-text-2); max-width: 46ch; }

/* ============================================================
   6 · Abzeichen — Prüfstatus, Zustand, Priorität
   ============================================================ */

.abzeichen {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 var(--a-2); border-radius: var(--r-voll);
  font-size: var(--gr-s); line-height: 1; white-space: nowrap;
  background: var(--farbe-flaeche-aktiv); color: var(--farbe-text-2);
}
.abzeichen--geprueft { background: var(--farbe-ok-fond); color: var(--farbe-ok); }
.abzeichen--ungeprueft { background: var(--farbe-warn-fond); color: var(--farbe-warn); }
.abzeichen--fehler { background: var(--farbe-fehler-fond); color: var(--farbe-fehler); }
.abzeichen--akzent { background: var(--farbe-akzent-fond); color: var(--farbe-akzent-text); }
.abzeichen__punkt { width: 6px; height: 6px; border-radius: var(--r-voll); background: currentColor; }

/* ============================================================
   7 · Herkunft — Quelle, Urheber, Datum, ID, Permalink
   ============================================================ */

.herkunft {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-2) var(--a-4);
  font-size: var(--gr-s); color: var(--farbe-text-3);
}
.herkunft__teil { display: flex; align-items: center; gap: 6px; }
.herkunft__wer { color: var(--farbe-text-2); }
.herkunft__id {
  font-family: var(--schrift-mono); font-size: var(--gr-s);
  background: var(--farbe-flaeche); border-radius: var(--r-klein); padding: 2px var(--a-2);
  color: var(--farbe-text-2); user-select: all;
}
.herkunft--zeile { gap: var(--a-3); }
.maschine { display: flex; gap: var(--a-3); font-size: var(--gr-s); white-space: nowrap; }
.seitenkopf__rechts { flex: none; }

/* ============================================================
   8 · Feldliste — Detailfelder
   ============================================================ */

.felder { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--a-3) var(--a-5); }
.felder dt { color: var(--farbe-text-3); font-size: var(--gr-s); padding-top: 3px; }
.felder dd { color: var(--farbe-text); }
.felder dd.mit-link { display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; }
.trenner { height: 1px; background: var(--farbe-linie); border: 0; margin: var(--a-6) 0; }

.karte {
  background: var(--farbe-flaeche-hoch); border-radius: var(--r-gross);
  box-shadow: var(--schatten); padding: var(--a-5);
}
.karte--still { background: var(--farbe-flaeche); box-shadow: none; }

/* ============================================================
   9 · Bewertung — ersetzt sich inline
   ============================================================ */

.bewertung { display: flex; align-items: center; gap: var(--a-2); }
.bewertung__frage { font-size: var(--gr-s); color: var(--farbe-text-3); margin-right: var(--a-1); }
.bewertung__ergebnis { display: flex; align-items: center; gap: var(--a-2); font-size: var(--gr-s); color: var(--farbe-text-2); }
.bewertung__ergebnis .ikon { width: 16px; height: 16px; color: var(--farbe-akzent-text); }

/* ============================================================
   10 · Prompt-Panel — Prompt erzeugen, Ergebnis zurückgeben
   ============================================================ */

.prompt { display: flex; flex-direction: column; gap: var(--a-4); }
.prompt__kopf { display: flex; align-items: baseline; gap: var(--a-3); }
.prompt__kopf h3 { font-size: var(--gr-l); }
.prompt__kopf .leise { margin-left: auto; }
.prompt__text {
  font-family: var(--schrift-mono); font-size: var(--gr-s); line-height: 1.6;
  background: var(--farbe-flaeche); border-radius: var(--r); padding: var(--a-4);
  white-space: pre-wrap; margin: 0; color: var(--farbe-text-2);
  max-height: 210px; overflow: auto;
}
.prompt__reihe { display: flex; align-items: center; gap: var(--a-2); }
.prompt__rueck { display: flex; flex-direction: column; gap: var(--a-2); }
.prompt__rueck textarea {
  min-height: 110px; resize: vertical; padding: var(--a-3);
  border: 1px solid var(--farbe-linie-stark); border-radius: var(--r);
  background: var(--farbe-flaeche-hoch); font-family: var(--schrift-mono); font-size: var(--gr-s);
}
.prompt__rueck textarea:focus { outline: none; border-color: var(--farbe-akzent); box-shadow: var(--fokus); }
.prompt__rueck textarea[aria-invalid="true"] { border-color: var(--farbe-fehler); }

.meldung {
  display: flex; gap: var(--a-3); padding: var(--a-3) var(--a-4);
  border-radius: var(--r); font-size: var(--gr-m);
}
.meldung--fehler { background: var(--farbe-fehler-fond); color: var(--farbe-fehler); }
.meldung--ok { background: var(--farbe-ok-fond); color: var(--farbe-ok); }
.meldung--hinweis { background: var(--farbe-flaeche); color: var(--farbe-text-2); }
.meldung__inhalt { display: flex; flex-direction: column; gap: var(--a-2); min-width: 0; }
.meldung ul { display: flex; flex-direction: column; gap: var(--a-1); font-size: var(--gr-s); }
.meldung li { display: flex; gap: var(--a-2); }
.meldung code { font-family: var(--schrift-mono); }

/* ============================================================
   11 · Formularfeld (Primitiv für Schnell-Erfassung)
   ============================================================ */

.formular { display: flex; flex-direction: column; gap: var(--a-4); max-width: 560px; }
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > label { font-size: var(--gr-s); color: var(--farbe-text-2); }
.feld input, .feld select, .feld textarea {
  height: 40px; padding: 0 var(--a-3);
  border: 1px solid var(--farbe-linie-stark); border-radius: var(--r-klein);
  background: var(--farbe-flaeche-hoch); font-size: var(--gr-m);
}
.feld textarea { height: auto; min-height: 80px; padding: var(--a-3); resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--farbe-akzent); box-shadow: var(--fokus); }
.feld[data-zustand="fehler"] input,
.feld[data-zustand="fehler"] select,
.feld[data-zustand="fehler"] textarea { border-color: var(--farbe-fehler); }
.feld__hinweis { font-size: var(--gr-s); color: var(--farbe-text-3); }
.feld__fehler { font-size: var(--gr-s); color: var(--farbe-fehler); }
.feld__reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--a-4); }
.formular__fuss { display: flex; align-items: center; gap: var(--a-3); }

/* ============================================================
   Hilfsklassen für die Dokumentation
   ============================================================ */

.doku { display: flex; flex-direction: column; gap: var(--a-3); margin-bottom: var(--a-7); }
.doku__marke { font-size: var(--gr-s); color: var(--farbe-text-3); font-family: var(--schrift-mono); }
.doku__probe { padding: var(--a-4); border: 1px dashed var(--farbe-linie); border-radius: var(--r); }
.doku pre {
  font-family: var(--schrift-mono); font-size: var(--gr-s); line-height: 1.6;
  background: var(--farbe-flaeche); border-radius: var(--r); padding: var(--a-4);
  overflow: auto; margin: 0; color: var(--farbe-text-2);
}
.raster-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--a-5); }

/* ============================================================
   Varianten aus Iteration 2
   ============================================================ */

/* Gruppierte Liste (Leistungskatalog) */
.gruppenkopf {
  position: sticky; top: var(--kopf); z-index: 5;
  display: flex; align-items: baseline; gap: var(--a-3);
  padding: var(--a-4) var(--a-3) var(--a-2);
  background: var(--farbe-grund);
  font-size: var(--gr-s); color: var(--farbe-text-3);
}
.gruppenkopf b { font-size: var(--gr-m); font-weight: var(--stark); color: var(--farbe-text); }
.gruppenkopf__zahl { margin-left: auto; font-variant-numeric: tabular-nums; }
.zeile--knapp { padding: var(--a-2) var(--a-3); }
.zeile--knapp .zeile__titel { font-size: var(--gr-m); }
.sprungleiste { display: flex; flex-wrap: wrap; gap: var(--a-1); margin-bottom: var(--a-5); }

/* Strom mit Tagestrennern (Notizen) */
.tagtrenner {
  display: flex; align-items: center; gap: var(--a-3);
  padding: var(--a-5) var(--a-3) var(--a-2);
  font-size: var(--gr-s); color: var(--farbe-text-3);
}
.tagtrenner::after { content: ""; flex: 1; height: 1px; background: var(--farbe-linie); }
.schlagworte { display: flex; flex-wrap: wrap; gap: var(--a-1); }

/* ============================================================
   Lesetext — die einzige Langtext-Ansicht (SOP)
   ============================================================ */

.lesen { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--a-7); align-items: start; }

.lesetext { max-width: 68ch; font-size: var(--gr-l); line-height: 1.65; color: var(--farbe-text); }
.lesetext > * + * { margin-top: var(--a-4); }
.lesetext h2 { font-size: var(--gr-xl); margin-top: var(--a-7); scroll-margin-top: calc(var(--kopf) + var(--a-4)); }
.lesetext h3 { font-size: var(--gr-l); margin-top: var(--a-5); scroll-margin-top: calc(var(--kopf) + var(--a-4)); }
.lesetext p { color: var(--farbe-text-2); }
.lesetext strong { color: var(--farbe-text); font-weight: var(--stark); }
.lesetext ul, .lesetext ol { display: flex; flex-direction: column; gap: var(--a-2); color: var(--farbe-text-2); padding-left: var(--a-5); }
.lesetext ul li { list-style: disc; }
.lesetext ol li { list-style: decimal; }
.lesetext li::marker { color: var(--farbe-text-3); }
.lesetext table { width: 100%; border-collapse: collapse; font-size: var(--gr-m); }
.lesetext th, .lesetext td { text-align: left; padding: var(--a-2) var(--a-3); border-bottom: 1px solid var(--farbe-linie); vertical-align: top; }
.lesetext th { color: var(--farbe-text-3); font-size: var(--gr-s); font-weight: var(--normal); }
.lesetext td { color: var(--farbe-text-2); }
.lesetext code { font-family: var(--schrift-mono); font-size: var(--gr-s); background: var(--farbe-flaeche); padding: 1px 5px; border-radius: 6px; }

.hinweis {
  display: flex; gap: var(--a-3); padding: var(--a-4);
  border-radius: var(--r); background: var(--farbe-flaeche); font-size: var(--gr-m); color: var(--farbe-text-2);
}
.hinweis--warn { background: var(--farbe-warn-fond); color: var(--farbe-warn); }
.hinweis--akzent { background: var(--farbe-akzent-fond); color: var(--farbe-akzent-text); }
.hinweis b { display: block; color: inherit; }

.rand { position: sticky; top: calc(var(--kopf) + var(--a-4)); display: flex; flex-direction: column; gap: var(--a-3); }
.rand__titel { font-size: var(--gr-s); color: var(--farbe-text-3); }
.rand nav { display: flex; flex-direction: column; gap: 2px; }
.rand a { color: var(--farbe-text-2); font-size: var(--gr-s); padding: 4px var(--a-2); border-radius: var(--r-klein); border-left: 2px solid transparent; }
.rand a:hover { background: var(--farbe-flaeche-aktiv); color: var(--farbe-text); text-decoration: none; }
.rand a[aria-current="true"] { color: var(--farbe-akzent-text); border-left-color: var(--farbe-akzent); font-weight: var(--stark); }
.rand a.tief { padding-left: var(--a-5); }

@media (max-width: 900px) {
  .lesen { grid-template-columns: minmax(0, 1fr); gap: var(--a-5); }
  .rand { position: static; order: -1; }
  .rand nav { flex-direction: row; flex-wrap: wrap; }
  .lesetext { font-size: var(--gr-m); }
  .gruppenkopf { top: 0; }
}

/* ============================================================
   Mobil — unter 900px wird die Leiste zur Kopfzeile
   ============================================================ */

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .leiste {
    position: static; height: auto; flex-direction: row; align-items: center; gap: var(--a-2);
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--farbe-linie);
    padding: var(--a-2) var(--a-3); scrollbar-width: none;
  }
  .leiste::-webkit-scrollbar { display: none; }
  .leiste__titel, .navpunkt__zahl, .leiste__fuss { display: none; }
  .leiste__gruppe { flex-direction: row; gap: var(--a-1); }
  .navpunkt { white-space: nowrap; }
  .kopf { padding: 0 var(--a-4); }
  .kopf__menue { display: inline-flex; }
  .bahn { padding: var(--a-4) var(--a-4) var(--a-8); }
  .felder { grid-template-columns: minmax(0, 1fr); gap: var(--a-1) 0; }
  .felder dd { margin-bottom: var(--a-3); }
  .zeile { grid-template-columns: minmax(0, 1fr); }
  .zeile__rechts { justify-self: start; }
  .seitenkopf { flex-direction: column; }
  .seitenkopf__rechts { margin-left: 0; }
}

/* ============================================================
   Iteration 3 — Klassen statt Inline-Stile.
   Jeder Wert kommt aus tokens.css; im Markup steht kein style-Attribut mehr.
   ============================================================ */

.startblock { max-width: 680px; margin: var(--a-7) auto var(--a-8); text-align: center; }
.startblock h1 { margin-bottom: var(--a-2); }
.startblock > p { margin-bottom: var(--a-5); }
.filter--mitte { justify-content: center; margin-top: var(--a-4); margin-bottom: 0; }

.suche--kopf { width: 220px; }
.suche--breit { width: 280px; }

.statusreihe { display: flex; align-items: center; gap: var(--a-3); margin-bottom: var(--a-1); flex-wrap: wrap; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.probenreihe { display: flex; flex-wrap: wrap; gap: var(--a-3); }
.stapel { display: flex; flex-direction: column; gap: var(--a-3); }
.nachsatz { margin-top: var(--a-6); }
.nachsatz--eng { margin-top: var(--a-3); }

.feldname { font-size: var(--gr-s); color: var(--farbe-text-2); }
.feld--breit { min-width: 260px; }
.karte__ueberschrift { font-size: var(--gr-l); margin-bottom: var(--a-4); }
.meldung--oben { margin-bottom: var(--a-4); }
.hinweis--abstand { margin-top: var(--a-5); }
.trenner--eng { margin: var(--a-2) 0; }
.leerzustand--knapp { padding: var(--a-6) var(--a-4); }
.bewertung__zaehler { margin-left: var(--a-2); }

.zeile__unter--lang { white-space: normal; }
.zeile .schlagworte { margin-top: var(--a-1); }
.herkunft--stapel { flex-direction: column; align-items: flex-start; gap: var(--a-1); }
.raster-2 { align-items: start; }
.doku p { max-width: 68ch; }