/* Umsatz-Radar – vollständig selbst ausgeliefert, keine externen Schriften oder CDNs. */

:root {
  --akzent:        #1F3864;
  --akzent-hell:   #3A6EA5;
  --akzent-blass:  #E8EEF6;
  --akzent-linie:  #C7D5E8;
  --grund:         #F4F6F9;
  --flaeche:       #FFFFFF;
  --schrift:       #1B2430;
  --schrift-leise: #5B6779;
  --linie:         #DFE4EC;
  --gruen:         #1E7A46;
  --gruen-blass:   #E4F3EA;
  --gelb:          #7A5400;
  --gelb-blass:    #FCF2DC;
  --rot:           #A32020;
  --rot-blass:     #FBE9E9;
  --radius:        6px;
  --schatten:      0 1px 2px rgba(27, 36, 48, .06), 0 4px 14px rgba(27, 36, 48, .05);
  --serifenlos:    Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --mono:          "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
  --fokus:         #0B4FA8;
  --plotgrund:     #FCFDFE;
  --knopf-grund:   #1F3864;
  --knopf-schrift: #FFFFFF;
  --knopf-hover:   #16294A;
  --knopf-leise:   #FFFFFF;
  --feldgrund:     #FFFFFF;
  --feldrahmen:    #8892A4;
  --marke-grund:   #EDEFF3;
  --nulllinie:     #9AA6B8;
  --meldung-ok-schrift:      #14572F;
  --meldung-ok-rahmen:       #B6DCC4;
  --meldung-warnung-schrift: #6F4C00;
  --meldung-warnung-rahmen:  #E7CD91;
  --meldung-fehler-rahmen:   #E2B6B6;
  --nav-schrift:   #D6E0EF;
  --nav-aktiv:     #FFFFFF;
  --weg-continentale:   #1F3864;
  --weg-blau-direkt:    #3A6EA5;
  --weg-fonds-finanz:   #7FA6CE;
  --weg-honorarkonzept: #B8860B;
  --weg-markel:         #6B7280;
  --weg-soll:           #3A6EA5;
  --weg-ist:            #2F855A;
  --weg-erst:           #B8860B;
  --kopf-grund:    #1F3864;
  --kopf-schrift:  #FFFFFF;
  --nav-grund:     #16294A;
  /* Gestaffelte z-Ebenen statt beliebiger Werte */
  --z-tabellenkopf: 10;
  --z-navigation:   40;
  --z-sprunglink:   1000;
}

/* Dunkelvariante: nur Tokens werden getauscht, keine Regel doppelt gepflegt.
   Kontraste sind für beide Modi gegen WCAG AA (4,5:1) geprüft. */
@media (prefers-color-scheme: dark) {
  :root {
    --akzent:        #9CC0EC;
    --akzent-hell:   #B7D3F5;
    --akzent-blass:  #1B2A42;
    --akzent-linie:  #33475F;
    --grund:         #12161D;
    --flaeche:       #1A2029;
    --schrift:       #E8ECF3;
    --schrift-leise: #A3AFC0;
    --linie:         #2A3342;
    --gruen:         #6FD79B;
    --gruen-blass:   #14301F;
    --gelb:          #E8BE63;
    --gelb-blass:    #33270C;
    --rot:           #F2908E;
    --rot-blass:     #3A1B1B;
    --fokus:         #8FC1FF;
    --plotgrund:     #151B24;
    /* Der Akzent ist im Dunkelmodus hell – als Knopffläche braucht er
       deshalb dunkle Schrift, sonst steht Weiß auf Hellblau. */
    --knopf-grund:   #9CC0EC;
    --knopf-schrift: #0E1620;
    --knopf-hover:   #C2DAF6;
    --knopf-leise:   #1A2029;
    /* Eingabefelder brauchen einen eigenen Grund: mit fest verdrahtetem Weiß
       stünde die helle Schrift des Dunkelmodus auf weißem Feld. */
    --feldgrund:     #10151C;
    --feldrahmen:    #6E7C90;
    --marke-grund:   #232C39;
    --nulllinie:     #6B7787;
    --meldung-ok-schrift:      #8FE0B0;
    --meldung-ok-rahmen:       #2C6B45;
    --meldung-warnung-schrift: #F0CE86;
    --meldung-warnung-rahmen:  #6B5518;
    --meldung-fehler-rahmen:   #7A3A3A;
    --nav-schrift:   #C3D2E6;
    --nav-aktiv:     #FFFFFF;
    /* Aufgehellte Diagrammpalette: die Hellmodus-Farben verschwinden sonst
       auf dem dunklen Plotgrund. */
    --weg-continentale:   #8FB4E4;
    --weg-blau-direkt:    #6FA0D8;
    --weg-fonds-finanz:   #A9C7E8;
    --weg-honorarkonzept: #E0B454;
    --weg-markel:         #9AA5B4;
    --weg-soll:           #6FA0D8;
    --weg-ist:            #6FD79B;
    --weg-erst:           #E0B454;
    --kopf-grund:    #16202C;
    --kopf-schrift:  #E8ECF3;
    --nav-grund:     #101822;
    --schatten:      0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/* Tastaturnutzer sollen die Navigation überspringen können. */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-sprunglink);
  background: var(--flaeche);
  color: var(--akzent);
  padding: .6rem 1rem;
  border: 2px solid var(--fokus);
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
}
.sprunglink:focus { left: 0; }

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

body {
  margin: 0;
  font-family: var(--serifenlos);
  font-size: 15px;
  line-height: 1.5;
  color: var(--schrift);
  background: var(--grund);
}

a { color: var(--akzent-hell); }
a:hover { color: var(--akzent); }

h1, h2, h3 { font-weight: 700; color: var(--akzent); margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

/* ---------- Kopf und Navigation ---------- */

.kopf {
  background: var(--kopf-grund);
  color: var(--kopf-schrift);
  padding: .8rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.kopf .marke { font-size: 1.15rem; font-weight: 700; letter-spacing: .01em; }
.kopf .marke span { display: block; font-size: .78rem; font-weight: 400; opacity: .78; letter-spacing: 0; }
.kopf .nutzerbox { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.kopf .nutzerbox .rolle { opacity: .75; }
.kopf form { margin: 0; }

.navigation {
  background: var(--nav-grund);
  position: relative;
  z-index: var(--z-navigation);
  padding: 0 1.5rem;
  display: flex;
  gap: .15rem;
  flex-wrap: wrap;
  overflow-x: auto;
}
.navigation a {
  color: var(--nav-schrift);
  text-decoration: none;
  padding: .6rem .85rem;
  font-size: .88rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.navigation a:hover { color: var(--nav-aktiv); background: rgba(255,255,255,.08); }
.navigation a.aktiv { color: var(--nav-aktiv); border-bottom-color: var(--knopf-grund);
  font-weight: 700; }

main { padding: 1.5rem; max-width: 1500px; margin: 0 auto; }

/* ---------- Flächen ---------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}
.karte > h2:first-child, .karte > h1:first-child { margin-top: 0; }
.karte .unterzeile { color: var(--schrift-leise); font-size: .86rem; margin: -.25rem 0 1rem;
  max-width: 78ch; }
main > p.leise { max-width: 82ch; }

.raster { display: grid; gap: 1.25rem; }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.raster.drei { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Kennzahlen ---------- */

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.kennzahl {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  box-shadow: var(--schatten);
}
.kennzahl .beschriftung { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--schrift-leise); }
.kennzahl .wert { font-size: 1.4rem; font-weight: 700; color: var(--akzent); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.kennzahl .zusatz { font-size: .8rem; color: var(--schrift-leise); margin-top: .1rem; }
.kennzahl.warnung { border-left-color: var(--rot); }
.kennzahl.warnung .wert { color: var(--rot); }
.kennzahl.gut { border-left-color: var(--gruen); }
.kennzahl.gut .wert { color: var(--gruen); }

/* ---------- Tabellen ---------- */

/* Der Rahmen scrollt in beide Richtungen. Nur so haftet der Tabellenkopf beim
   Blättern wirklich – ein sticky-Element haftet am nächsten scrollenden Vorfahren,
   und das ist dieser Rahmen. Kurze Tabellen zeigen keine Bildlaufleiste. */
.tabellenrahmen {
  overflow: auto;
  max-height: 72vh;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

table { border-collapse: collapse; width: 100%; font-size: .87rem; }
th, td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--linie); vertical-align: top; }
thead th {
  background: var(--akzent-blass);
  color: var(--akzent);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border-bottom: 2px solid var(--akzent-linie);
  position: sticky; top: 0; z-index: var(--z-tabellenkopf);
}
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--akzent-blass) 45%, transparent); }
tbody tr:hover { background: var(--akzent-blass); }

th[aria-sort] { cursor: pointer; user-select: none; }
th[aria-sort]:hover { background: var(--akzent-linie); }
th[aria-sort]::after { content: "\2195"; opacity: .35; margin-left: .3rem; font-weight: 400; }
th[aria-sort="ascending"]::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"]::after { content: "\2193"; opacity: 1; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: 700; background: var(--akzent-blass); border-top: 2px solid var(--akzent-linie); border-bottom: none; }
tr.summe td { font-weight: 700; background: var(--akzent-blass); }
td.eng, th.eng { white-space: nowrap; }
.tabelle-klein { font-size: .8rem; }

/* ---------- Marken und Ampeln ---------- */

.marke-status, .ampel {
  display: inline-block;
  padding: .08rem .45rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
}
.ampel-gruen { background: var(--gruen-blass); color: var(--gruen); }
.ampel-gelb  { background: var(--gelb-blass);  color: var(--gelb); }
.ampel-rot   { background: var(--rot-blass);   color: var(--rot); }
/* Die Bedeutung darf nie allein an der Farbe hängen – jedes Ampelfeld
   trägt zusätzlich ein Zeichen und einen Text. */
.ampel-gruen::before { content: "\2713\00a0"; }
/* U+FE0E erzwingt die Textdarstellung; ohne ihn zeigen iOS, Android und
   Windows ein farbiges Emoji, das Screenreader zusätzlich vorlesen. */
.ampel-gelb::before  { content: "\26A0\FE0E\00a0"; }
.ampel-rot::before   { content: "\2716\00a0"; }
.marke-status { background: var(--akzent-blass); color: var(--akzent); }
.marke-neutral { background: var(--marke-grund); color: var(--schrift-leise); }

.stufe-hoch    { border-left: 4px solid var(--rot); }
.stufe-mittel  { border-left: 4px solid var(--gelb); }
.stufe-hinweis { border-left: 4px solid var(--akzent-hell); }

/* ---------- Diagramme ---------- */

/* Diagrammrahmen: Das SVG skaliert mit dem viewBox, also auch seine Schrift.
   Unterhalb dieser Mindestbreite wird waagerecht geblättert, statt die
   Achsenbeschriftung auf wenige Pixel zu schrumpfen. Die Tabelle unter jedem
   Diagramm bleibt die blätterfreie Alternative. */
.diagrammrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ur-svg { width: 100%; min-width: 720px; height: auto; display: block; }
.ur-plot { fill: var(--plotgrund); stroke: none; }
.ur-gitter { stroke: var(--linie); stroke-width: 1; }
.ur-nulllinie { stroke: var(--nulllinie); stroke-width: 1; }
.ur-achse-y, .ur-achse-x { font-size: 11px; fill: var(--schrift-leise); font-family: var(--serifenlos); }
.ur-balken-wert { font-size: 10px; fill: var(--schrift-leise); font-family: var(--serifenlos); }
.ur-kumuliert { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-dasharray: 5 3; }
.ur-kumuliert-punkt { fill: var(--akzent); }
.ur-balken rect { transition: opacity .12s; }
.ur-balken-link:hover .ur-balken rect { opacity: .72; }
.ur-balken.ur-aktiv rect { stroke: var(--akzent); stroke-width: 1.5; }
.ur-leer { color: var(--schrift-leise); font-style: italic; padding: 2rem 0; text-align: center; }

.ur-legende { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; padding: 0; margin: .6rem 0 0; font-size: .82rem; color: var(--schrift-leise); }
.ur-legende li { display: flex; align-items: center; gap: .35rem; }
.ur-punkt { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }

/* ---------- Formulare ---------- */

label { display: block; font-size: .82rem; font-weight: 700; color: var(--schrift-leise); margin-bottom: .2rem; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=search],
select, textarea {
  width: 100%;
  padding: .42rem .55rem;
  border: 1px solid var(--feldrahmen);
  border-radius: 4px;
  font: inherit;
  font-size: .88rem;
  background: var(--feldgrund);
  color: var(--schrift);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--fokus); outline-offset: -1px; border-color: var(--fokus); }

/* Ein sichtbarer Fokusring ist Pflicht – er wird nie ersatzlos entfernt. */
a:focus-visible, button:focus-visible, .knopf:focus-visible, summary:focus-visible,
th[aria-sort]:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 3px;
}
.kopf a:focus-visible, .kopf button:focus-visible,
.navigation a:focus-visible { outline-color: var(--nav-aktiv); }
.feld { margin-bottom: .8rem; }
/* Oberkanten ausrichten: sonst schiebt ein Hinweistext unter einem Feld alle
   Nachbarfelder nach unten. */
.feldzeile { display: flex; gap: .75rem 1rem; flex-wrap: wrap; align-items: flex-start; }
.feldzeile > .feld > button, .feldzeile > .feld > .knopf { margin-top: 1.35rem; }
.feldzeile > .feld { flex: 1 1 170px; margin-bottom: 0; }
.hinweistext { font-size: .78rem; color: var(--schrift-leise); font-weight: 400; margin-top: .2rem; }

button, .knopf {
  display: inline-block;
  background: var(--knopf-grund);
  color: var(--knopf-schrift);
  border: 1px solid var(--knopf-grund);
  border-radius: 4px;
  padding: .42rem .9rem;
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .knopf:hover { background: var(--knopf-hover); color: var(--knopf-schrift); }
button.leise, .knopf.leise { background: var(--knopf-leise); color: var(--akzent);
  border-color: var(--feldrahmen); }
button.leise:hover, .knopf.leise:hover { background: var(--akzent-blass); }
button.gefahr, .knopf.gefahr { background: var(--knopf-leise); color: var(--rot);
  border-color: var(--rot); }
button.gefahr:hover { background: var(--rot-blass); color: var(--rot); }
button.klein, .knopf.klein { padding: .22rem .55rem; font-size: .78rem; }
/* Hinweis, dass ein geänderter Filter noch nicht angewendet wurde. */
button.wartet { box-shadow: 0 0 0 3px var(--akzent-blass); }

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

.meldung { padding: .7rem .9rem; border-radius: var(--radius); margin-bottom: 1.1rem; font-size: .9rem; border: 1px solid; }
.meldung-ok { background: var(--gruen-blass); border-color: var(--meldung-ok-rahmen);
  color: var(--meldung-ok-schrift); }
.meldung-warnung { background: var(--gelb-blass); border-color: var(--meldung-warnung-rahmen);
  color: var(--meldung-warnung-schrift); }
/* Der Registrierungscode wird nur einmal angezeigt und soll auffallen. */
.meldung-code { background: var(--akzent-blass); border-color: var(--akzent-linie);
  color: var(--akzent); font-family: var(--mono); font-weight: 700; }
.meldung-fehler { background: var(--rot-blass); border-color: var(--meldung-fehler-rahmen);
  color: var(--rot); }
.meldung ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ---------- Ersatz für Inline-Stile ----------
   Die Content-Security-Policy erlaubt kein style-Attribut; alles Layoutrelevante
   muss deshalb als Klasse hier stehen. */

.inline { display: inline; }
.abstand-unten-klein { margin: 0 0 .5rem; }
.abstand-oben-klein { margin-top: .4rem; }
.ohne-abstand-unten { margin-bottom: 0; }
.eng-gesetzt { gap: .4rem; }
.kasten-auto { width: auto; }
.flach { margin: 0; }
.knopfzeile { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.feld-schmal { flex: 0 0 auto; }
.feld-fest { flex: 0 1 200px; margin: 0; }
.feld-breit { flex: 0 0 260px; }
.karte-flach { margin: 0; }
.ablegezone {
  border: 2px dashed var(--feldrahmen);
  border-radius: var(--radius);
  padding: 1.1rem;
  text-align: center;
  margin-bottom: 1rem;
  transition: border-color .15s, background .15s;
}
.ablegezone p { margin: 0 0 .5rem; }
.ablegezone.ur-ablegen-aktiv { border-color: var(--akzent-hell); background: var(--akzent-blass); }
.codeanzeige {
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--akzent);
  background: var(--akzent-blass);
  padding: .7rem 1rem;
  border-radius: var(--radius);
  display: inline-block;
}
/* Flächenfarben der Diagramme: als Klasse, damit die CSP sie zulässt und der
   dunkle Modus eine aufgehellte Palette bekommt. */
.ur-flaeche-continentale   { fill: var(--weg-continentale); }
.ur-flaeche-blau_direkt    { fill: var(--weg-blau-direkt); }
.ur-flaeche-fonds_finanz   { fill: var(--weg-fonds-finanz); }
.ur-flaeche-honorarkonzept { fill: var(--weg-honorarkonzept); }
.ur-flaeche-markel         { fill: var(--weg-markel); }
.ur-flaeche-soll           { fill: var(--weg-soll); }
.ur-flaeche-ist            { fill: var(--weg-ist); }
.ur-flaeche-erst           { fill: var(--weg-erst); }
.ur-flaeche-ersatz1 { fill: var(--weg-markel); }
.ur-flaeche-ersatz2 { fill: var(--weg-fonds-finanz); }
.ur-flaeche-ersatz3 { fill: var(--weg-honorarkonzept); }
.ur-flaeche-ersatz4 { fill: var(--weg-ist); }
.ur-flaeche-ersatz5 { fill: var(--weg-blau-direkt); }
.ur-punkt-ersatz1 { background: var(--weg-markel); }
.ur-punkt-ersatz2 { background: var(--weg-fonds-finanz); }
.ur-punkt-ersatz3 { background: var(--weg-honorarkonzept); }
.ur-punkt-ersatz4 { background: var(--weg-ist); }
.ur-punkt-ersatz5 { background: var(--weg-blau-direkt); }
.ur-punkt-continentale  { background: var(--weg-continentale); }
.ur-punkt-blau_direkt   { background: var(--weg-blau-direkt); }
.ur-punkt-fonds_finanz  { background: var(--weg-fonds-finanz); }
.ur-punkt-honorarkonzept{ background: var(--weg-honorarkonzept); }
.ur-punkt-markel        { background: var(--weg-markel); }
.ur-punkt-soll          { background: var(--weg-soll); }
.ur-punkt-ist           { background: var(--weg-ist); }
.ur-punkt-erst          { background: var(--weg-erst); }
.ur-punkt-aktuell       { background: var(--weg-soll); }

/* ---------- Kleinteile ---------- */

.werkzeugleiste { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.werkzeugleiste .abstand { margin-left: auto; }
.umschalter { display: inline-flex; border: 1px solid var(--feldrahmen); border-radius: 4px;
  overflow: hidden; background: var(--knopf-leise); }
.umschalter a { padding: .32rem .8rem; font-size: .82rem; text-decoration: none;
  color: var(--akzent); border-right: 1px solid var(--feldrahmen); }
.umschalter a:last-child { border-right: none; }
.umschalter a.aktiv { background: var(--knopf-grund); color: var(--knopf-schrift); font-weight: 700; }

.leise { color: var(--schrift-leise); }
.klein { font-size: .8rem; }
.mono { font-family: var(--mono); font-size: .82rem; }
.nowrap { white-space: nowrap; }
.rechts { text-align: right; }
.negativ { color: var(--rot); }
.positiv { color: var(--gruen); }
.abstand-oben { margin-top: 1.25rem; }

dl.paare { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: .3rem 1rem; margin: 0; font-size: .88rem; }
dl.paare dt, dl.paare dd { overflow-wrap: anywhere; }
@media (max-width: 480px) { dl.paare { grid-template-columns: 1fr; }
  dl.paare dd { margin-bottom: .35rem; } }
dl.paare dt { color: var(--schrift-leise); font-weight: 700; }
dl.paare dd { margin: 0; }

details.erlaeuterung { margin-top: .5rem; font-size: .85rem; }
details.erlaeuterung summary { cursor: pointer; color: var(--akzent-hell); font-weight: 700; }
details.erlaeuterung > div { padding: .5rem 0 0; color: var(--schrift-leise); }

.hilfe { border-bottom: 1px dotted var(--schrift-leise); cursor: help; }

.blaetterung { display: flex; gap: .4rem; align-items: center; margin-top: .9rem; flex-wrap: wrap; font-size: .85rem; }

.anmeldeseite { max-width: 380px; margin: 4rem auto; }
.bestaetigung { max-width: 640px; margin: 2rem auto; }
.anmeldeseite .karte { padding: 1.6rem; }

.fusszeile { text-align: center; color: var(--schrift-leise); font-size: .78rem; padding: 1.5rem; }

/* Breakpoints: 1440 / 1024 / 768 / 375 */
@media (max-width: 1024px) {
  main { padding: 1.1rem; }
  .raster.zwei { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  main { padding: 1rem; }
  .kopf { padding: .7rem 1rem; }
  .navigation { padding: 0 1rem; }
  .kennzahl .wert { font-size: 1.2rem; }
  thead th { position: static; }
}

/* Trefferflächen richten sich nach dem Zeigegerät, nicht nach der Fensterbreite:
   ein Tablet im Querformat ist breiter als 768 px und wird trotzdem berührt. */
@media (pointer: coarse) {
  button, .knopf, .umschalter a, .navigation a, th[aria-sort] {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  th[aria-sort] { display: table-cell; padding-top: .8rem; padding-bottom: .8rem; }
  input, select, textarea { min-height: 44px; font-size: 16px; }
  .blaetterung, td .feldzeile { gap: .8rem; }
}
@media (max-width: 420px) {
  .kennzahlen { grid-template-columns: 1fr; }
  .feldzeile > .feld { flex: 1 1 100%; }
}

/* Wer weniger Bewegung eingestellt hat, bekommt keine Übergänge. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kopf, .navigation, .werkzeugleiste, .fusszeile, button, .knopf { display: none !important; }
  body { background: #fff; }
  .karte { box-shadow: none; border-color: #999; page-break-inside: avoid; }
}