:root {
  --farbe-text: #17212b;
  --farbe-hintergrund: #f5f7f9;
  --farbe-flaeche: #ffffff;
  --farbe-linie: #c6cdd4;
  --farbe-eingabe: #6d7984;
  --farbe-akzent: #173b5e;
  --farbe-link: #164e80;
  --farbe-fokus: #156db3;
  --farbe-fehler: #a31515;
  --schrift: system-ui, sans-serif;
  --schrift-normal: 1rem;
  --schrift-klein: .9rem;
  --schrift-kopf: 1.3rem;
  --schrift-titel: 2rem;
  --schrift-abschnitt: 1.4rem;
  --gewicht-normal: 400;
  --gewicht-betont: 600;
  --gewicht-titel: 700;
  --zeilenhoehe: 1.6;
  --zeilenhoehe-titel: 1.25;
  --abstand-null: 0;
  --abstand-klein: .35rem;
  --abstand-mittel: .75rem;
  --abstand-normal: 1rem;
  --abstand-gross: 1.5rem;
  --abstand-inhalt: clamp(1rem, 4vw, 2rem);
  --radius: .35rem;
  --linienbreite: 1px;
  --fokusbreite: 3px;
  --maximalbreite: 76rem;
  --kachelbreite: 15rem;
  --volle-breite: 100%;
  color-scheme: light;
  font-family: var(--schrift);
  font-size: var(--schrift-normal);
  line-height: var(--zeilenhoehe);
  font-weight: var(--gewicht-normal);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}
* { box-sizing: border-box; }
body { margin: var(--abstand-null) auto; max-width: var(--maximalbreite); padding: var(--abstand-normal); }
header { padding-block: var(--abstand-normal); }
.kopf, nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--abstand-normal); }
.kopf form { margin: var(--abstand-null); }
main { background: var(--farbe-flaeche); border: var(--linienbreite) solid var(--farbe-linie); border-radius: var(--radius); padding: var(--abstand-inhalt); }
h1 { font-size: var(--schrift-titel); line-height: var(--zeilenhoehe-titel); font-weight: var(--gewicht-titel); }
h2 { font-size: var(--schrift-abschnitt); line-height: var(--zeilenhoehe-titel); font-weight: var(--gewicht-titel); }
h1, h2, p { overflow-wrap: anywhere; margin-block: var(--abstand-normal); }
form { margin-block: var(--abstand-gross); }
label, dt { display: block; font-weight: var(--gewicht-betont); }
dd { margin: var(--abstand-null) var(--abstand-null) var(--abstand-normal); overflow-wrap: anywhere; }
input, select, button, .knopf { font: inherit; padding: var(--abstand-mittel); border: var(--linienbreite) solid var(--farbe-eingabe); border-radius: var(--radius); max-width: var(--volle-breite); }
input, select { display: block; width: var(--volle-breite); margin-block: var(--abstand-klein) var(--abstand-mittel); background: var(--farbe-flaeche); color: inherit; }
button, .knopf { background: var(--farbe-akzent); color: var(--farbe-flaeche); cursor: pointer; margin-block: var(--abstand-klein); }
button:disabled { background: var(--farbe-eingabe); cursor: default; }
a { color: var(--farbe-link); }
:focus-visible { outline: var(--fokusbreite) solid var(--farbe-fokus); outline-offset: var(--fokusbreite); }
.errorlist { padding-left: var(--abstand-gross); color: var(--farbe-fehler); }
.helptext { display: block; font-size: var(--schrift-klein); }
.formularfeld { margin-block: var(--abstand-mittel); }
.katalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--volle-breite), var(--kachelbreite)), 1fr)); gap: var(--abstand-normal); }
.kachel { border: var(--linienbreite) solid var(--farbe-linie); border-radius: var(--radius); padding: var(--abstand-normal); margin-block: var(--abstand-normal); }
.zustand { font-weight: var(--gewicht-betont); }
.meldung { border-left: var(--fokusbreite) solid var(--farbe-akzent); background: var(--farbe-hintergrund); padding: var(--abstand-normal); }
.tabellenrahmen { overflow-x: auto; }
.tabelle { width: var(--volle-breite); border-collapse: collapse; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: var(--abstand-mittel); border-bottom: var(--linienbreite) solid var(--farbe-linie); overflow-wrap: anywhere; }
.tabelle form { margin: var(--abstand-null); }
caption { text-align: left; padding-block: var(--abstand-normal); font-weight: var(--gewicht-betont); }