/*
 * Seitenspezifisches ueber den Tokens. Farben und Typografie kommen aus
 * tokens.css und werden hier nicht wiederholt.
 */

* { box-sizing: border-box; }

body { margin: 0; }

.huelle {
  margin: 0 auto;
  width: 100%;
  max-width: 72rem;
  padding: 0 1.25rem;
}

/* Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--rand);
  background: var(--papier);
}

.kopf__innen {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.marke__wort {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Fliesstext */

main { padding: 3rem 0 4rem; }

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 1rem; }
h2 { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }

.vorspann {
  max-width: 62ch;
  font-size: 1.125rem;
  color: var(--gedaempft-text);
}

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

/* Bedienelemente */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--pruefblau);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

.knopf:hover { background: #1d478c; }

.feld {
  display: block;
  margin: 1.25rem 0;
}

.feld__titel {
  display: block;
  font-weight: 500;
  margin-bottom: 0.375rem;
}

.feld__hinweis {
  display: block;
  font-size: 0.875rem;
  color: var(--gedaempft-text);
  margin-top: 0.375rem;
}

input[type="file"] {
  font: inherit;
  padding: 0.625rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
  width: 100%;
  max-width: 32rem;
}

/* Zahlenkacheln */

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.5rem 0;
}

.kachel { background: var(--karte); padding: 1.25rem; }

.kachel__zahl {
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.kachel__titel {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--gedaempft-text);
}

/* Befundtabelle */

.tabellenrahmen {
  border: 1px solid var(--rand);
  background: var(--karte);
  overflow-x: auto;
  border-radius: var(--radius);
}

table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: 0.875rem; text-align: left; }

thead th {
  border-bottom: 1px solid var(--rand);
  padding: 0.875rem 1.25rem;
  font-weight: 500;
  color: var(--gedaempft-text);
  white-space: nowrap;
}

tbody td { border-bottom: 1px solid var(--rand); padding: 1rem 1.25rem; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }

.pille {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 4px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}

.pille--kritisch { color: var(--kritisch); border-color: var(--kritisch); background: rgba(179, 38, 30, 0.08); }
.pille--hinweis  { color: var(--hinweis);  border-color: var(--hinweis);  background: rgba(178, 106, 0, 0.08); }
.pille--gueltig  { color: var(--gueltig);  border-color: var(--gueltig);  background: rgba(30, 123, 79, 0.08); }

.meldung { max-width: 52ch; }
.vorschlag { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--gedaempft-text); }

.fehler {
  border: 1px solid var(--kritisch);
  background: rgba(179, 38, 30, 0.06);
  color: var(--kritisch);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

/* Fuss */

.fuss {
  border-top: 1px solid var(--rand);
  padding: 2rem 0;
  font-size: 0.875rem;
  color: var(--gedaempft-text);
}

.haftung {
  margin-top: 1rem;
  max-width: 62ch;
}

/* Held: Text links, Zeichen rechts. Auf schmalen Schirmen untereinander. */

.held {
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 62rem) {
  .held { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
}

/* Animiertes Markenzeichen */

.zb-marke { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }

.zb-marke__rahmen {
  width: 100%;
  max-width: 22rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 1.25rem 1.5rem;
}

.zb-marke__zeile { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }

.zb-marke__klammer { height: clamp(4rem, 14vw, 6.5rem); width: auto; flex-shrink: 0; }

.zb-marke__ziffern { display: flex; align-items: baseline; }

.zb-marke__ziffer {
  display: inline-block;
  font-size: clamp(2.75rem, 10vw, 4.5rem);
  line-height: 1;
  font-weight: 600;
}

.zb-marke__fuss { margin-top: 0.75rem; text-align: center; min-height: 1.25rem; }

.zb-marke__etikett {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--kritisch);
  opacity: 0;
  transition: opacity 200ms;
}

.zb-marke__bildunterschrift { font-size: 0.875rem; color: var(--gedaempft-text); }

/* Preise */

.preise {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (min-width: 40rem) { .preise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .preise { grid-template-columns: repeat(4, 1fr); } }

.preis { border-top: 1px solid var(--rand); padding-top: 1.25rem; }
.preis__titel { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; }
.preis__text { margin: 0; color: var(--gedaempft-text); }

/* Ursachenliste */

.ursachen { list-style: none; padding: 0; display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 40rem) { .ursachen { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }
.ursache { border-top: 1px solid var(--rand); padding-top: 1.25rem; max-width: 46ch; }
.ursache__text { color: var(--gedaempft-text); }

/* Navigation im Kopf */

.kopf__nav { display: flex; align-items: center; gap: 1.75rem; }
.kopf__nav a { color: inherit; text-decoration: none; font-size: 0.9375rem; }
.kopf__nav a:hover { color: var(--pruefblau); }
.kopf__nav .knopf { color: #fff; }

/* Unter 48rem bleibt nur der Knopf — fuenf Links passen dort nicht. */
@media (max-width: 48rem) {
  .kopf__nav a:not(.knopf) { display: none; }
}

/* Ablaufschritte */

.schritte { list-style: none; padding: 0; display: grid; gap: 2.5rem; margin-top: 2.5rem; }
@media (min-width: 48rem) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.schritt { border-top: 1px solid var(--rand); padding-top: 1.25rem; }
.schritt__nummer { display: block; font-size: 0.875rem; font-weight: 500; color: var(--pruefblau); }
.schritt__titel { font-size: 1.125rem; font-weight: 600; margin: 0.75rem 0 0.5rem; }
.schritt__text { margin: 0; color: var(--gedaempft-text); }

/* Dunkler Abschnitt: die einzige Stelle, an der die Seite die Flaeche wechselt.
   Sie traegt die Zusagen, die wir NICHT machen — das darf auffallen. */

.dunkel {
  border-top: 1px solid var(--rand);
  background: var(--tinte);
  color: #fff;
  padding: 4rem 0;
  margin-top: 3rem;
}

.dunkel h2 { margin-top: 0; }
.dunkel__vorspann { max-width: 62ch; font-size: 1.125rem; color: var(--pruefblau-hell); }

/* Die Grenzen stehen auf beiden Flaechen: im dunklen Abschnitt der
   Startseite und auf hellem Grund in den Wissensartikeln. Voreingestellt
   ist deshalb hell — die dunkle Fassung ueberschreibt weiter unten.
   Andersherum war es am 04.09.2026 kurz: weisse Schrift auf weissem Grund,
   lesbar nur beim Markieren. */
.grenzen { display: grid; gap: 2.5rem; margin-top: 3rem; }
@media (min-width: 48rem) {
  /* auto-fit statt fester Dreierteilung: eine einzelne Grenze soll die
     Breite nehmen und nicht als schmale Spalte danebenstehen. */
  .grenzen { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 3rem; }
}
.grenze { border-top: 1px solid var(--rand); padding-top: 1.25rem; }
.grenze__titel { font-size: 1.125rem; font-weight: 600; color: var(--pruefblau); margin: 0 0 0.5rem; }
.grenze__text { margin: 0; color: var(--gedaempft-text); }

.dunkel .grenze { border-top-color: rgba(255, 255, 255, 0.22); }
.dunkel .grenze__titel { color: var(--pruefblau-hell); }
.dunkel .grenze__text { color: rgba(255, 255, 255, 0.82); }

/* Fragen */

.fragen { margin-top: 2rem; max-width: 48rem; border-top: 1px solid var(--rand); }
.frage { border-bottom: 1px solid var(--rand); }
.frage__titel { padding: 1.25rem 0; font-weight: 500; cursor: pointer; list-style: none; }
.frage__titel::-webkit-details-marker { display: none; }
.frage__titel::before { content: "+"; display: inline-block; width: 1.5rem; color: var(--pruefblau); font-weight: 600; }
.frage[open] .frage__titel::before { content: "−"; }
.frage__text { margin: 0 0 1.5rem 1.5rem; max-width: 62ch; color: var(--gedaempft-text); }

/* Seiten je Warennummer */

.brotkrumen { display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.875rem; color: var(--gedaempft-text); margin: 0 0 1.5rem; }
.brotkrumen a { color: inherit; }
.brotkrumen a:hover { color: var(--pruefblau); }

/* Der Status ist eine Datenaussage — deshalb, und nur deshalb, traegt er die
   Severity-Farben. */
.status {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  border: 1px solid;
  border-radius: var(--radius);
  padding: 0.5rem 0.875rem;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}

.status--gueltig { color: var(--gueltig); border-color: var(--gueltig); background: rgba(30, 123, 79, 0.08); }
.status--ausgelaufen { color: var(--kritisch); border-color: var(--kritisch); background: rgba(179, 38, 30, 0.08); }
.status__stand { font-size: 0.8125rem; opacity: 0.85; }

/* Zeiger-Tooltip der Kursdiagramme (kursdiagramm.js) — reine Verbesserung,
   ohne Skript existiert das Element nicht. */
.kursdiagramm-schild {
  position: absolute;
  top: 0.5rem;
  pointer-events: none;
  background: var(--papier, #fff);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.35rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.einreihung { margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.einreihung div { border-top: 1px solid var(--rand); padding-top: 0.875rem; }
.einreihung dt { font-size: 0.8125rem; color: var(--gedaempft-text); }
.einreihung dd { margin: 0.25rem 0 0; }

.nachbarn { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; }
.nachbarn li { display: flex; gap: 1rem; align-items: baseline; border-top: 1px solid var(--rand); padding-top: 0.75rem; }
.nachbarn__text { color: var(--gedaempft-text); max-width: 56ch; }

/* Nummernsuche */

.suchzeile { max-width: 28rem; }
.suchzeile__reihe { display: flex; gap: 0.625rem; margin-top: 0.375rem; }
.suchzeile__reihe input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
}
.suchzeile .feld__hinweis { margin-top: 0.5rem; }

/* Achtstellige Wegfaelle im Zeichen: kleiner, sonst sprengen sie den Rahmen. */
.zb-marke__ziffern--lang .zb-marke__ziffer { font-size: clamp(1.5rem, 5.5vw, 2.5rem); }
.zb-marke__trenner { display: inline-block; width: 0.35em; }

/* Suche im Kopf */

.kopf__suche { display: flex; gap: 0.5rem; flex: 1; max-width: 24rem; margin: 0 1.5rem; }
.kopf__suche input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-family: var(--schrift-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
}
.kopf__suche .knopf { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }

/* Unter 56rem ist der Kopf zu eng fuer Marke, Suche und Knopf zugleich;
   dort bleibt die Suche der Startseite und /suche. */
@media (max-width: 56rem) {
  .kopf__suche { display: none; }
}

/* Nur fuer Vorleser, unsichtbar im Layout. */
.sr-nur {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Suchknopf als Lupe: quadratisch, Ikone zentriert. */
.knopf--suche { padding: 0.5rem; line-height: 0; flex-shrink: 0; }
.knopf--suche svg { display: block; }

/* Kopierknopf neben dem Lauf-Link */
.kopier-knopf {
  background: none;
  border: none;
  padding: 0.125rem;
  margin-left: 0.25rem;
  cursor: pointer;
  color: inherit;
  vertical-align: middle;
}
.kopier-knopf:hover { color: var(--pruefblau); }

/* Bearbeitungsstand und Filter der Befundtabelle */
.fortschritt { margin: 2rem 0 1rem; }
.fortschritt__text { margin: 0 0 0.5rem; color: var(--gedaempft-text); }
.fortschritt__balken {
  height: 0.5rem;
  border-radius: 0.25rem;
  background: var(--flaeche-2, #e8ebef);
  overflow: hidden;
  max-width: 28rem;
}
.fortschritt__fuellung { height: 100%; background: var(--pruefblau); }
.filterzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.filterzeile label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--gedaempft-text);
}

/* Bestellformular */
.bestellformular { max-width: 32rem; display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.bestellformular .feld { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.25rem; }
.bestellformular .feld--halb { flex: 1 1 calc(50% - 0.5rem); }
.bestellformular input {
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--gedaempft-text);
  border-radius: 0.375rem;
  font: inherit;
}
.bestellformular .knopf { margin-top: 0.5rem; }

/* Preiskasten auf der Bestellseite.
   Eigene Klasse statt .status: das ist ein inline-flex fuer EINE Zeile, und
   mehrzeilig setzt es die zweite Zeile neben die erste statt darunter — der
   Betrag stand dann links und der Hinweis rechts daneben eingerueckt. */
.preisbox {
  border: 1px solid var(--gueltig);
  border-radius: var(--radius);
  background: rgba(30, 123, 79, 0.08);
  padding: 1rem 1.125rem;
  margin: 0 0 1.5rem;
  max-width: 44rem;
}

.preisbox__betrag {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gueltig);
}

.preisbox__zusatz {
  margin: 0.375rem 0 0;
  font-size: 0.9375rem;
  color: var(--gedaempft-text);
}

/* Ueber der Staffel: kein Fehler, sondern ein Angebot — deshalb neutral und
   nicht rot wie ein abgelaufener Lauf. */
.preisbox--anfrage { border-color: var(--rand); background: var(--gedaempft); }
.preisbox--anfrage .preisbox__betrag { color: var(--tinte); }

/* Rechnungsbetrag ueber dem Bestellknopf: dieselbe Zahl wie oben, nur
   aufgeschluesselt. Grid statt Tabelle — zwei Spalten, Betraege rechts. */
.rechnungsbetrag {
  border: 1px solid var(--gueltig);
  border-radius: var(--radius);
  background: rgba(30, 123, 79, 0.08);
  padding: 1rem 1.125rem;
  margin: 1.5rem 0 0;
}

.rechnungsbetrag__titel {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--gueltig);
}

.rechnungsbetrag__liste {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.375rem 1.5rem;
  margin: 0;
  font-size: 0.9375rem;
}

.rechnungsbetrag__liste dt { margin: 0; }
.rechnungsbetrag__liste dd { margin: 0; text-align: right; }

.rechnungsbetrag__summe {
  font-weight: 600;
  border-top: 1px solid rgba(30, 123, 79, 0.35);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

/* Bestaetigung der Zahlungsbedingungen. Das Kaestchen bleibt oben buendig,
   damit der zweizeilige Text nicht daneben rutscht. */
.bestaetigung {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
}

.bestaetigung input { margin-top: 0.25rem; flex: none; }

/* Nebenknopf (Gutschein prüfen): derselbe Rahmen, kein Vorrang vor dem
   eigentlichen Bestellknopf. */
.knopf--leise {
  background: transparent;
  color: var(--tinte);
  border: 1px solid var(--rand);
}

.knopf--leise:hover { background: var(--gedaempft); }

.feld__hinweis--gut { color: var(--gueltig); }
.feld__hinweis--schlecht { color: var(--kritisch); }

/* Der Weg unter jeder Preiskachel. margin-top:auto haelt die Knoepfe auf einer
   Linie, auch wenn die Texte darueber verschieden lang sind. */
.preis { display: flex; flex-direction: column; }
.preis__weg { margin: 1.25rem 0 0; padding-top: 0.25rem; }
.preis:has(.preis__weg) .preis__text { margin-bottom: auto; }

/* Themenauswahl auf der Anfrageseite. Die ganze Zeile ist klickbar, nicht nur
   das Kästchen: getroffen werden muss ein Wort, kein Quadrat von 13 Pixeln. */
.themen { border: 0; margin: 0 0 1.5rem; padding: 0; }
.themen legend { padding: 0; margin-bottom: 0.75rem; }
.thema {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.thema:hover { background: var(--gedaempft); }
.thema input { margin-top: 0.2rem; flex: 0 0 auto; }
.thema__text { display: block; color: var(--gedaempft-text); font-size: 0.9375rem; }
.bestellformular textarea {
    width: 100%;
    font: inherit;
    padding: 0.5rem;
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Verwaltung (/freigabe, /verwaltung/*)

   Eigener Block, weil diese Seiten niemand ausser dem Betreiber sieht: sie
   duerfen dicht und nuechtern sein, und sie sollen die Regeln der Kundenseiten
   nicht mitverschieben. Deshalb alles unter .verwaltung und nichts darueber
   hinaus.
   --------------------------------------------------------------------------- */

.verwaltung__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rand);
}
.verwaltung__nav a {
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  text-decoration: none;
  background: var(--karte);
}
.verwaltung__nav a:hover { background: var(--gedaempft); }
.verwaltung__nav a[aria-current="page"] {
  border-color: var(--pruefblau);
  color: var(--pruefblau);
  font-weight: 500;
}

/* Ein Kennwert: Beschriftung, Eingabe, Begruendung. Die Begruendung steht
   absichtlich unter dem Feld und nicht in einem Hilfetext beim Zeigen — sie
   ist der Grund, warum die Zahl so ist, und den liest man beim Aendern. */
.verwaltung .feld input[type="text"],
.verwaltung .feld input[type="number"],
.verwaltung .feld textarea {
  width: 100%;
  max-width: 32rem;
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
  box-sizing: border-box;
}
.verwaltung .feld textarea { font-family: var(--schrift-mono); font-size: 0.875rem; }
.verwaltung .feld__hinweis { max-width: 62ch; }

/* Woher der geltende Wert kommt. Ohne diese Angabe sieht ein leeres Feld aus
   wie "nicht gesetzt", obwohl es die Voreinstellung meint. */
.verwaltung__herkunft { font-family: var(--schrift-mono); font-size: 0.8125rem; }

.verwaltung__reihe { display: flex; flex-wrap: wrap; gap: 0.625rem; align-items: flex-end; }
.verwaltung__reihe input {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
}
.verwaltung__reihe .feld { margin: 0; }

/* Prüfcodes: eine Zeile je Code, ganze Zeile klickbar wie bei .thema. */
.verwaltung__codes { border: 0; margin: 0 0 1.5rem; padding: 0; }
.verwaltung__code {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin-bottom: 0.375rem;
  cursor: pointer;
}
.verwaltung__code:hover { background: var(--gedaempft); }
.verwaltung__code input { flex: 0 0 auto; }
.verwaltung__code--aus { opacity: 0.6; }
.verwaltung__code--starr { cursor: default; opacity: 0.5; }
.verwaltung__code__nummer {
  font-family: var(--schrift-mono);
  font-size: 0.8125rem;
  flex: 0 0 3.25rem;
}
.verwaltung__reihe select {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
}
.verwaltung table input[type="number"],
.verwaltung table input[type="text"] {
  font: inherit;
  font-family: var(--schrift-mono);
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  background: var(--karte);
  width: 10rem;
}