@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/open-sans-var.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --blau: #3f71ad;
  --blau-text: #1d508b;
  --blau-tief: #0b3069;
  --blau-flaeche: #e8eff7;
  --aktion: #3f71ad;
  --aktion-druck: #1d508b;
  --aktion-tief: #0b3069;
  --grund: #eef1f6;
  --flaeche: #ffffff;
  --flaeche-tief: #f4f6fa;
  --flaeche-hover: #f7f9fc;

  --nav: #17385f;
  --nav-tief: #102943;
  --nav-tinte: #ffffff;
  --nav-tinte-leise: #b9cadd;
  --nav-hover: rgba(255, 255, 255, .08);
  --nav-aktiv: rgba(255, 255, 255, .14);
  --nav-linie: rgba(255, 255, 255, .13);
  --rand-fein: #e4e8ee;
  --rand: #d8dee6;
  --rand-stark: #bfc8d3;

  --tinte: #2f363c;
  --tinte-leise: #59636e;
  --tinte-still: #656e78;
  --gut: #1f7a4a;
  --gut-flaeche: #e6f3ec;
  --warte: #8a5d00;
  --warte-flaeche: #fbf1dd;
  --fehler: #a8302a;
  --fehler-flaeche: #fbecea;
  --logo-plakette: #f2f4f7;
  --schatten-1: 0 1px 2px rgba(11, 48, 105, .07), 0 2px 8px rgba(11, 48, 105, .05);
  --schatten-2: 0 2px 4px rgba(11, 48, 105, .08), 0 12px 32px rgba(11, 48, 105, .12);
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --rundung: 10px;
  --rundung-klein: 7px;
  --rundung-fein: 4px;
  --t-plakette: .75rem;
  --t-mikro: .8125rem;
  --t-klein: .875rem;
  --t-basis: 1rem;
  --t-mittel: 1.0625rem;
  --t-gross: 1.125rem;
  --t-titel: 1.5rem;

  --schrift: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --breit-eng: 87.5%;
  --tracking-hell: 0;
  --zeile-text: 1.55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    color-scheme: dark;
    --blau: #5f92cc;
    --blau-text: #93bbe4;
    --blau-tief: #c3d8ee;
    --blau-flaeche: #1e2f45;
    --aktion: #3a6ba4;
    --aktion-druck: #325f92;
    --aktion-tief: #294e79;
    --grund: #11151a;
    --flaeche: #1a1f26;
    --flaeche-tief: #14191f;
    --flaeche-hover: #1f252d;
    --nav: #14283f;
    --nav-tief: #0e1e30;
    --nav-tinte: #f2f6fa;
    --nav-tinte-leise: #a8bdd4;
    --nav-hover: rgba(255, 255, 255, .07);
    --nav-aktiv: rgba(255, 255, 255, .12);
    --nav-linie: rgba(255, 255, 255, .11);
    --rand-fein: #262d36;
    --rand: #303945;
    --rand-stark: #445062;
    --tinte: #e4e8ed;
    --tinte-leise: #a7b1bd;
    --tinte-still: #8e98a4;
    --gut: #5cba86;
    --gut-flaeche: #16301f;
    --warte: #d9a441;
    --warte-flaeche: #33260d;
    --fehler: #e88379;
    --fehler-flaeche: #35201e;
    --logo-plakette: #f2f4f7;
    --schatten-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --schatten-2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .45);
    --tracking-hell: .003em;
    --zeile-text: 1.6;
  }
}
:root[data-darstellung="dunkel"] {
  color-scheme: dark;
  --blau: #5f92cc;
  --blau-text: #93bbe4;
  --blau-tief: #c3d8ee;
  --blau-flaeche: #1e2f45;
  --aktion: #3a6ba4;
  --aktion-druck: #325f92;
  --aktion-tief: #294e79;
  --grund: #11151a;
  --flaeche: #1a1f26;
  --flaeche-tief: #14191f;
  --flaeche-hover: #1f252d;
  --nav: #14283f;
  --nav-tief: #0e1e30;
  --nav-tinte: #f2f6fa;
  --nav-tinte-leise: #a8bdd4;
  --nav-hover: rgba(255, 255, 255, .07);
  --nav-aktiv: rgba(255, 255, 255, .12);
  --nav-linie: rgba(255, 255, 255, .11);
  --rand-fein: #262d36;
  --rand: #303945;
  --rand-stark: #445062;
  --tinte: #e4e8ed;
  --tinte-leise: #a7b1bd;
  --tinte-still: #8e98a4;
  --gut: #5cba86;
  --gut-flaeche: #16301f;
  --warte: #d9a441;
  --warte-flaeche: #33260d;
  --fehler: #e88379;
  --fehler-flaeche: #35201e;
  --logo-plakette: #f2f4f7;
  --schatten-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  --schatten-2: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .45);
  --tracking-hell: .003em;
  --zeile-text: 1.6;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  scrollbar-color: var(--rand-stark) var(--grund);
  scrollbar-width: thin;
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 var(--t-basis)/var(--zeile-text) var(--schrift);
  letter-spacing: var(--tracking-hell);
  -webkit-tap-highlight-color: rgba(63, 113, 173, .18);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--aktion); color: #fff; }
:focus-visible {
  outline: 2px solid var(--aktion);
  outline-offset: 2px;
  border-radius: var(--rundung-fein);
}
a {
  color: var(--blau-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1, h2, h3 { text-wrap: balance; scroll-margin-top: var(--s6); }
strong, b { font-weight: 600; }
code, kbd, samp, pre {
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

code {
  background: var(--blau-flaeche);
  color: var(--blau-text);
  padding: .1rem .35rem;
  border-radius: var(--rundung-fein);
  font-size: .85em;
  word-break: break-word;
}
pre {
  background: var(--flaeche-tief);
  max-width: 100%;
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  padding: var(--s3) var(--s4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  margin: var(--s2) 0 var(--s3);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
pre.klein { font-size: var(--t-mikro); margin-bottom: 0; }

.ueberspringen {
  position: fixed;
  top: var(--s2);
  left: var(--s2);
  z-index: 50;
  transform: translateY(-160%);
  background: var(--flaeche);
  color: var(--blau-text);
  border-radius: var(--rundung-klein);
  box-shadow: var(--schatten-2);
  padding: var(--s2) var(--s4);
  font-size: var(--t-klein);
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease-out;
}
.ueberspringen:focus { transform: none; }
#anmeldung {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s6) var(--s4);
  padding-left: max(var(--s4), env(safe-area-inset-left));
  padding-right: max(var(--s4), env(safe-area-inset-right));
  background:
    radial-gradient(90rem 40rem at 15% 115%, var(--blau-flaeche) 0%, transparent 62%),
    var(--grund);
}

.anmeldekarte {
  background: var(--flaeche);
  border-radius: 14px;
  box-shadow: var(--schatten-2);
  padding: var(--s6) var(--s6) var(--s5);
  width: 100%;
  max-width: 25rem;
}
.anmeldelogo {
  height: 48px;
  width: auto;
  display: block;
  margin-bottom: var(--s5);
}
.anmeldekarte h1 {
  font-size: var(--t-titel);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--s1);
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.anmeldekarte .unter { margin: 0 0 var(--s5); }
.anmeldekarte .haupt { margin-top: var(--s4); }
.ersteinrichtung {
  margin-top: var(--s5);
  border-top: 1px solid var(--rand-fein);
  padding-top: var(--s4);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.ersteinrichtung p { margin: 0 0 var(--s2); }
.huelle {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.seitenleiste {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  background: var(--nav);
  color: var(--nav-tinte);
  padding: var(--s5) var(--s3) var(--s4);
  padding-left: max(var(--s3), env(safe-area-inset-left));
  box-shadow: var(--schatten-1);
  z-index: 10;
}
.marke {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--s3);
  align-items: center;
  padding: 0 var(--s2);
}
.markenlogo {
  height: 32px;
  width: auto;
  grid-row: span 2;
  background: var(--logo-plakette);
  border-radius: var(--rundung-klein);
  padding: var(--s1) .3rem;
}
.markenname {
  font-size: var(--t-mittel);
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}
.markenzusatz {
  font-size: var(--t-mikro);
  color: var(--nav-tinte-leise);
  line-height: 1.3;
}
.stufe {
  font-size: var(--t-plakette);
  font-weight: 700;
  font-stretch: var(--breit-eng);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--aktion);
  color: #fff;
  padding: .1rem .4rem;
  border-radius: var(--rundung-fein);
  line-height: 1.45;
  flex-shrink: 0;
}
.marke .stufe { background: rgba(255, 255, 255, .18); }
.reiter {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.navgruppe { display: flex; flex-direction: column; gap: 1px; }
.navgruppe:not(:has(> .reiterknopf:not([hidden]))) { display: none; }
.gruppentitel {
  font-size: var(--t-plakette);
  font-weight: 600;
  font-stretch: var(--breit-eng);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--nav-tinte-leise);
  margin: 0 0 var(--s2);
  padding: 0 var(--s2);
}

.reiterknopf {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  font: 400 var(--t-basis)/1.3 var(--schrift);
  text-align: left;
  color: var(--nav-tinte-leise);
  background: none;
  border: 0;
  border-radius: var(--rundung-klein);
  padding: .55rem var(--s2);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.reiterknopf:hover { background: var(--nav-hover); color: var(--nav-tinte); }
.reiterknopf.aktiv {
  background: var(--nav-aktiv);
  color: var(--nav-tinte);
  font-weight: 600;
}
.seitenleiste :focus-visible { outline-color: #fff; }
.ikone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.reiterknopf.aktiv .ikone { opacity: 1; }
.navfuss {
  border-top: 1px solid var(--nav-linie);
  padding: var(--s4) var(--s2) 0;
  display: grid;
  gap: var(--s2);
}
.benutzer {
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--nav-tinte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.abmelden {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: none;
  border: 1px solid var(--nav-linie);
  border-radius: var(--rundung-klein);
  color: var(--nav-tinte-leise);
  font: 400 var(--t-klein)/1 var(--schrift);
  padding: .4rem var(--s3);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.abmelden:hover {
  background: var(--nav-hover);
  color: var(--nav-tinte);
  border-color: rgba(255, 255, 255, .3);
}
.abmelden .ikone { width: 15px; height: 15px; }
.inhaltsspalte {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s6);
  padding-right: max(var(--s5), env(safe-area-inset-right));
}
.bereich { display: none; }
.bereich.aktiv { display: block; animation: einblenden .18s ease-out; }
@keyframes einblenden {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.bereichkopf {
  margin: 0 0 var(--s5);
  max-width: 62ch;
}
.bereichkopf h1 {
  font-size: var(--t-titel);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 var(--s2);
  letter-spacing: -.012em;
}
.bereichkopf p {
  margin: 0;
  color: var(--tinte-leise);
  font-size: var(--t-basis);
}

.spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  align-items: start;
}
.spalten.breit { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.spalte { display: grid; gap: var(--s4); align-content: start; min-width: 0; }
.spalten > * { min-width: 0; }
.spalte:not(:has(> *:not([hidden]))) { display: none; }
.spalten:has(> .spalte:not(:has(> *:not([hidden])))) { grid-template-columns: minmax(0, 1fr); }

.karte {
  background: var(--flaeche);
  min-width: 0;
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung);
  padding: var(--s5);
}
.karte + .karte { margin-top: var(--s4); }
.bereich > .karte { max-width: 46rem; }
.karte > h2 {
  font-size: var(--t-gross);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--s3);
  letter-spacing: -.008em;
}
.karte h3 {
  font-size: var(--t-mikro);
  font-weight: 600;
  font-stretch: var(--breit-eng);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinte-still);
  margin: var(--s5) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rand-fein);
}
.unter {
  color: var(--tinte-leise);
  margin: calc(var(--s2) * -1) 0 var(--s4);
  font-size: var(--t-klein);
  max-width: 68ch;
}
.fussnote {
  font-size: var(--t-klein);
  color: var(--tinte-still);
  margin: var(--s2) 0 var(--s3);
  max-width: 68ch;
}
.mikrohinweis { margin-top: var(--s4); margin-bottom: var(--s1); }
.leer {
  color: var(--tinte-still);
  font-size: var(--t-klein);
  margin: 0 0 var(--s2);
}
.reihe {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.reihe label {
  width: 7rem;
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  flex-shrink: 0;
}
.feld { display: block; margin-bottom: var(--s4); }
.feld > span {
  display: block;
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: var(--s2);
}
.feld input, .feld textarea, .feld select { width: 100%; }
.feldhinweis {
  font-weight: 400;
  font-style: normal;
  color: var(--tinte-still);
  letter-spacing: 0;
}
select, textarea, input[type="text"], input[type="password"], input[type="number"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .5rem .65rem;
  border-radius: var(--rundung-klein);
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  color: var(--tinte);
  font: inherit;
  letter-spacing: inherit;
  caret-color: var(--aktion);
  transition: border-color .15s ease-out, box-shadow .15s ease-out, background-color .15s ease-out;
}
textarea { resize: vertical; line-height: 1.5; }
select:hover:not(:disabled), input:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--blau);
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--aktion);
  box-shadow: 0 0 0 3px var(--blau-flaeche);
}
input::placeholder, textarea::placeholder { color: var(--tinte-still); opacity: 1; }
select:disabled, input:disabled, textarea:disabled {
  background: var(--flaeche-tief);
  color: var(--tinte-still);
  border-color: var(--rand-fein);
  cursor: not-allowed;
}
input[type="checkbox"] { accent-color: var(--aktion); width: 1rem; height: 1rem; }
input[type="file"] { color: var(--tinte-leise); }

button {
  font: 600 var(--t-klein)/1.2 var(--schrift);
  letter-spacing: .005em;
  padding: .6rem 1.1rem;
  border-radius: var(--rundung-klein);
  border: 1px solid transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}
button:disabled { opacity: .5; cursor: not-allowed; }
.haupt {
  background: var(--aktion);
  color: #fff;
  width: 100%;
  padding: .65rem 1.1rem;
}
.haupt:hover:not(:disabled) { background: var(--aktion-druck); }
.haupt:active:not(:disabled) { background: var(--aktion-tief); }
.neben {
  background: var(--flaeche);
  color: var(--blau-text);
  border-color: var(--rand-stark);
}
.neben:hover:not(:disabled) { background: var(--blau-flaeche); border-color: var(--blau); }
.neben.schmal { width: auto; }
.gefahr {
  background: var(--flaeche);
  color: var(--fehler);
  border-color: var(--fehler);
  width: 100%;
  margin-top: var(--s2);
}
.gefahr:hover:not(:disabled) { background: var(--fehler-flaeche); }
.leise {
  background: none;
  color: var(--tinte-leise);
  border-color: var(--rand);
  padding: .4rem .8rem;
  font-weight: 400;
}
.leise:hover:not(:disabled) { color: var(--tinte); border-color: var(--rand-stark); background: var(--flaeche-hover); }

.knopfzeile { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); }
.knopfzeile .neben { flex: 1; }
.knopfzeile .schmal { flex: 0 0 auto; }
.behalten {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  cursor: pointer;
  margin: var(--s1) 0 var(--s3);
  max-width: 62ch;
}
.behalten input { margin: .15rem 0 0; flex-shrink: 0; }
.fehlerhinweis {
  color: var(--fehler);
  font-size: var(--t-klein);
  margin: var(--s3) 0 0;
}
.okhinweis {
  color: var(--gut);
  font-size: var(--t-klein);
  margin: var(--s3) 0 0;
}
.zustandzeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  font-size: var(--t-basis);
}
.punkt {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rand-stark);
  flex-shrink: 0;
}
.punkt.gut { background: var(--gut); box-shadow: 0 0 0 4px var(--gut-flaeche); }
.punkt.warte { background: var(--warte); box-shadow: 0 0 0 4px var(--warte-flaeche); }
.punkt.fehler { background: var(--fehler); box-shadow: 0 0 0 4px var(--fehler-flaeche); }
.messwerte {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rand-fein);
  border-bottom: 1px solid var(--rand-fein);
  margin-bottom: var(--s4);
}
.messwert {
  padding: var(--s3) var(--s2);
  min-width: 0;
}
.messwert + .messwert { border-left: 1px solid var(--rand-fein); }
.zahl {
  display: block;
  font-weight: 600;
  font-size: var(--t-mittel);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.etikett {
  display: block;
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  margin-top: .1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stimmfakten .zahl { font-size: var(--t-klein); line-height: 1.4; white-space: nowrap; }
.pegel { display: grid; gap: var(--s2); }
.pegelzeile { display: flex; align-items: center; gap: var(--s3); }
.pegeletikett {
  width: 2.2rem;
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  flex-shrink: 0;
}
.pegelbalken {
  flex: 1;
  height: 6px;
  background: var(--flaeche-tief);
  border: 1px solid var(--rand-fein);
  border-radius: 3px;
  overflow: hidden;
}
.pegelfuellung {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--gut);
  transition: transform .08s linear;
}
.pegelfuellung.bot { background: var(--blau); }
.protokoll {
  max-height: 26rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font-size: var(--t-klein);
  margin: 0 calc(var(--s5) * -1) calc(var(--s5) * -1);
  padding: 0 var(--s5) var(--s2);
}
.protokoll .zeile {
  margin: 0;
  padding: var(--s2) 0;
  border-top: 1px solid var(--rand-fein);
  line-height: 1.5;
}
.protokoll .zeile:first-child { border-top: 0; }
.protokoll .zeit {
  color: var(--tinte-still);
  font-variant-numeric: tabular-nums;
  margin-right: var(--s2);
  font-size: var(--t-mikro);
}
.protokoll .gut { color: var(--gut); }
.protokoll .fehler { color: var(--fehler); }
.protokoll .warnung { color: var(--warte); }
.protokoll .gespraech { color: var(--blau-text); }
.protokoll .quelle { color: var(--tinte-still); font-size: .95em; }
.protokoll .leer { padding: var(--s2) 0; }
.gverlauf {
  max-height: 26rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font-size: var(--t-klein);
  margin: 0 calc(var(--s5) * -1) calc(var(--s5) * -1);
  padding: 0 var(--s5) var(--s2);
}
.gzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  padding: var(--s2) 0;
  border-top: 1px solid var(--rand-fein);
  line-height: 1.5;
}
.gzeile:first-child { border-top: 0; }
.gwer {
  flex-shrink: 0;
  width: 3rem;
  color: var(--tinte-still);
  font-size: var(--t-mikro);
  font-weight: 600;
}
.gzeile.bot .gwer { color: var(--blau-text); }
.gtext { flex: 1; min-width: 0; }
.gquelle {
  flex-basis: 100%;
  padding-left: calc(3rem + var(--s3));
  color: var(--tinte-still);
  font-size: var(--t-mikro);
}
.gverlauf .leer { padding: var(--s2) 0; }
.wquelle {
  margin: 0 calc(var(--s5) * -1);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--rand-fein);
  transition: background-color .15s ease-out;
}
.wquelle:first-child { border-top: 0; }
.wquelle:hover { background: var(--flaeche-hover); }
.wquellen { margin-bottom: var(--s4); }
.wquellen:has(.wquelle) { margin-bottom: var(--s5); }
.wkopf, .mkopf {
  display: flex;
  align-items: baseline;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
}
.wkopf code, .mkopf code { word-break: break-all; }
.mkopf strong { font-size: var(--t-basis); }
.wzahlen {
  color: var(--tinte-still);
  font-size: var(--t-mikro);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  text-align: right;
}
.wstatus {
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  margin: var(--s1) 0 0;
  word-break: break-word;
}
.wtext { font-size: var(--t-klein); margin: var(--s2) 0 0; line-height: 1.55; }
.wknoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.wknoepfe:empty { margin-top: 0; }
.wknopf, .wknoepfe button {
  padding: .3rem .7rem;
  font-size: var(--t-mikro);
  font-weight: 600;
}
.neben.rot { color: var(--tinte-leise); }
.neben.rot:hover:not(:disabled) {
  background: var(--fehler-flaeche);
  border-color: var(--fehler);
  color: var(--fehler);
}

.plakette {
  font-size: var(--t-plakette);
  font-weight: 700;
  font-stretch: var(--breit-eng);
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .1rem .4rem;
  border-radius: var(--rundung-fein);
  background: var(--gut-flaeche);
  color: var(--gut);
  white-space: nowrap;
}
.plakette.aus { background: var(--warte-flaeche); color: var(--warte); }
.mbearbeiten {
  margin-top: var(--s3);
  border-top: 1px solid var(--rand-fein);
  padding-top: var(--s3);
}
.mbearbeiten .reihe label { width: 9.5rem; }
.schritte {
  margin: 0;
  padding-left: 1.15rem;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.schritte li { margin-bottom: var(--s2); }
.schritte li::marker { color: var(--blau); font-weight: 700; }
.wtreffer {
  background: var(--flaeche-tief);
  border-radius: var(--rundung-klein);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s2);
}

.tstatus {
  font-size: var(--t-klein);
  color: var(--warte);
  margin: 0 0 var(--s3);
  font-variant-numeric: tabular-nums;
}
.ttext {
  margin: var(--s4) 0;
  line-height: 1.65;
  max-width: 72ch;
}
.tsegmente {
  max-height: 15rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font-size: var(--t-klein);
  background: var(--flaeche-tief);
  border-radius: var(--rundung-klein);
  padding: var(--s3) var(--s4);
}
.tsegmente .segment { display: flex; gap: var(--s3); margin-bottom: var(--s1); }
.tsegmente .zeit {
  color: var(--tinte-still);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  width: 7.5rem;
}
#t-mikro.aufnahme {
  color: var(--fehler);
  border-color: var(--fehler);
  background: var(--fehler-flaeche);
}
.funktionen {
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  padding: var(--s3) var(--s4) var(--s1);
  margin: 0 0 var(--s4);
  min-width: 0;
}
.funktionen legend {
  font-size: var(--t-mikro);
  font-weight: 600;
  font-stretch: var(--breit-eng);
  color: var(--tinte-still);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 0 var(--s1);
}
.funktionen .reihe { margin-bottom: var(--s2); }
.funktionen .reihe label { width: auto; }
.funktionen input[type="checkbox"] { flex-shrink: 0; }
.funktionen input[type="text"] { flex: 1; }
#t-abgleich .fussnote { margin: .1rem 0; font-variant-numeric: tabular-nums; }
#t-abgleich .fussnote[data-art="weg"] { color: var(--fehler); }
.fuss {
  width: 100%;
  max-width: 82rem;
  margin: 0 auto;
  padding: 0 var(--s5) var(--s5);
}
.fuss p {
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  border-top: 1px solid var(--rand-fein);
  padding-top: var(--s3);
  margin: 0;
}
@media (max-width: 1180px) {
  .huelle { grid-template-columns: 13.5rem minmax(0, 1fr); }
  main, .fuss { padding-left: var(--s4); padding-right: var(--s4); }
}
@media (max-width: 980px) {
  .spalten, .spalten.breit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .huelle { grid-template-columns: minmax(0, 1fr); }
  .seitenleiste {
    position: static;
    height: auto;
    gap: var(--s3);
    padding: var(--s3) var(--s3) 0;
    padding-top: max(var(--s3), env(safe-area-inset-top));
  }
  .marke { padding: 0 var(--s1); }
  .reiter {
    flex-direction: row;
    gap: var(--s2);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--s2);
    scrollbar-width: thin;
  }
  .navgruppe { flex-direction: row; gap: var(--s2); }
  .gruppentitel { display: none; }
  .reiterknopf { white-space: nowrap; padding: .45rem var(--s3); }
  .navfuss {
    border-top: 0;
    padding: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    order: -1;
  }
  main { padding: var(--s5) var(--s4) var(--s5); }
  .fuss { padding: 0 var(--s4) var(--s5); }
  .reihe { flex-wrap: wrap; gap: var(--s2); }
  .reihe label { width: 100%; }
  .messwerte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .messwert:nth-child(3) { border-left: 0; }
  .messwert:nth-child(n+3) { border-top: 1px solid var(--rand-fein); }
  .wquelle { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  .protokoll { margin-inline: calc(var(--s4) * -1); padding-inline: var(--s4); }
  .karte { padding: var(--s4); }
  .anmeldekarte { padding: var(--s5) var(--s4) var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .bereich.aktiv { animation: none; }
  .pegelfuellung { transition: none; }
  .ueberspringen { transition: none; }
}

@media (prefers-contrast: more) {
  :root {
    --rand-fein: #aab3bf;
    --rand: #8b96a3;
    --tinte-still: #4d565f;
  }
}

.huelle { background: var(--nav); }
.inhaltsspalte { background: var(--grund); }
.wkopf > .wzahlen, .mkopf > .wzahlen { order: 9; }
.wkopf code, .mkopf code, .wstatus code {
  background: var(--flaeche-tief);
  color: var(--tinte-leise);
  border: 1px solid var(--rand-fein);
}
.protokoll, .gverlauf { min-height: 7rem; }
#anmeldung {
  background:
    radial-gradient(70rem 34rem at 12% 112%, var(--blau-flaeche) 0%, transparent 58%),
    var(--grund);
}
@media (max-width: 760px) {
  .seitenleiste {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--s3);
  }
  .marke { grid-column: 1; }
  .navfuss {
    grid-column: 2;
    justify-self: end;
    order: 0;
    grid-template-columns: auto;
    justify-items: end;
    gap: 0;
  }
  .navfuss .benutzer { font-size: var(--t-mikro); }
  .reiter {
    grid-column: 1 / -1;
    mask-image: linear-gradient(to right, #000 0, #000 88%, transparent 100%);
  }
}
.haupt.schmal { width: auto; }
.abmelden { padding: .5rem var(--s3); min-height: 34px; }
@media (max-width: 760px) {
  .abmelden { min-height: 36px; }
}
.reiterknopf:focus-visible { outline-offset: -2px; }

.anmeldelogo {
  background: var(--logo-karte);
  border-radius: var(--rundung-klein);
  padding: var(--s1) .3rem;
  margin-left: calc(var(--s1) * -1);
}
:root { --logo-karte: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) { --logo-karte: #f2f4f7; }
}
:root[data-darstellung="dunkel"] { --logo-karte: #f2f4f7; }

.markenlogo {
  height: 30px;
  width: 30px;
  background: none;
  padding: 0;
  border-radius: 0;
}

.anmeldelogo {
  height: 44px;
  width: 44px;
  background: none;
  padding: 0;
  margin-left: 0;
  border-radius: 0;
}
.blickfang {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(64vmin, 34rem);
  height: min(64vmin, 34rem);
  opacity: .16;
  pointer-events: none;
  transition: opacity .3s ease-out;
}
.blickfang img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
  animation: marke-dreht 8s linear infinite paused;
}
#anmeldung { position: relative; overflow: hidden; }
.anmeldekarte { position: relative; z-index: 1; }
:root[data-darstellung="dunkel"] .blickfang { opacity: .2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) .blickfang { opacity: .2; }
}

#anmeldung.prueft .blickfang { opacity: .24; }
#anmeldung.prueft .blickfang img { animation-play-state: running; }
@keyframes marke-dreht {
  to { transform: rotate(360deg); }
}

#anmeldung.geschafft .blickfang {
  animation: marke-zieht-auf .58s cubic-bezier(.4, 0, .3, 1) forwards;
}
#anmeldung.geschafft .blickfang img { animation-play-state: running; }
@keyframes marke-zieht-auf {
  0%   { transform: scale(1);   opacity: .24; }
  30%  {                        opacity: .5; }
  70%  {                        opacity: .46; }
  100% { transform: scale(2.7); opacity: 0; }
}
#anmeldung.geschafft .anmeldekarte {
  animation: karte-weicht .3s cubic-bezier(.32, .72, 0, 1) forwards;
}
@keyframes karte-weicht {
  to { transform: scale(.94) translateY(-8px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blickfang img { animation: none; }
  #anmeldung.prueft .blickfang { opacity: .28; }
  #anmeldung.geschafft .blickfang { animation: none; opacity: 0; transition: opacity .2s linear; }
  #anmeldung.geschafft .anmeldekarte { animation: none; opacity: 0; transition: opacity .2s linear; }
}
.tafel {
  background: var(--flaeche-tief);
  border: 1px solid var(--rand-fein);
  border-radius: calc(var(--rundung) + 4px);
  padding: 5px;
  margin-bottom: var(--s4);
}
.tafelkern {
  background: var(--flaeche);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung);
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
}
.tafelseite {
  padding: var(--s4) var(--s5);
  border-right: 1px solid var(--rand-fein);
}
.tafelmitte { padding: var(--s4) var(--s5); min-width: 0; }
@media (max-width: 900px) {
  .tafelkern { grid-template-columns: minmax(0, 1fr); }
  .tafelseite { border-right: 0; border-bottom: 1px solid var(--rand-fein); }
}
.tafelmarke {
  font-size: var(--t-plakette);
  font-weight: 600;
  font-stretch: var(--breit-eng);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--tinte-still);
  margin: 0 0 var(--s3);
}
.antwortzeit { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 var(--s1); }
.antwortzeit .wert {
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tinte-leise);
  transition: color .25s cubic-bezier(.16, 1, .3, 1);
}
.antwortzeit .einheit { font-size: var(--t-basis); color: var(--tinte-still); }
.antwortzeit.gut .wert { color: var(--gut); }
.antwortzeit.knapp .wert { color: var(--warte); }
.antwortzeit.drueber .wert { color: var(--fehler); }
.budgetzeile { font-size: var(--t-mikro); color: var(--tinte-still); margin: 0; }
.wasserfall { display: grid; gap: var(--s2); }
.turnzeile {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr) 3.4rem;
  gap: var(--s3);
  align-items: center;
}
.turnzeile .wer { font-size: var(--t-mikro); color: var(--tinte-leise); }
.turnzeile .summe {
  font-size: var(--t-klein);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.turnzeile.drueber .summe { color: var(--fehler); }
.spur {
  position: relative;
  height: 15px;
  border-radius: 3px;
  background: var(--flaeche-tief);
  display: flex;
  overflow: hidden;
}
.spur i { display: block; height: 100%; }
.turnzeile.neu .spur i { animation: spur-ein .32s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes spur-ein {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.turnzeile.neu .spur i { transform-origin: left center; }
.spur i.s-eou { background: color-mix(in srgb, var(--blau) 28%, transparent); }
.spur i.s-stt { background: color-mix(in srgb, var(--blau) 52%, transparent); }
.spur i.s-llm { background: var(--blau); }
.spur i.s-tts { background: var(--blau-text); }

.budgetmarke {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--fehler);
  opacity: .5;
}
.legende { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); }
.legende span {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--t-mikro);
  color: var(--tinte-leise);
}
.legende i { width: 9px; height: 9px; border-radius: 2px; display: block; flex-shrink: 0; }
.legende i.s-eou { background: color-mix(in srgb, var(--blau) 28%, transparent); }
.legende i.s-stt { background: color-mix(in srgb, var(--blau) 52%, transparent); }
.legende i.s-llm { background: var(--blau); }
.legende i.s-tts { background: var(--blau-text); }
.legende i.s-budget { width: 2px; height: 12px; border-radius: 0; background: var(--fehler); opacity: .6; }
.kurvenband {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 30px;
  flex: 1;
  min-width: 0;
}
.kurvenband i {
  flex: 1;
  min-width: 1px;
  height: 100%;
  background: var(--gut);
  border-radius: 1.5px;
  transform: scaleY(.04);
  transform-origin: bottom;
  transition: transform .08s linear;
}
.kurvenband.bot i { background: var(--blau); }
@media (prefers-reduced-motion: reduce) {
  .kurvenband i { transition: none; }
  .turnzeile.neu .spur i { animation: none; }
}
.minispur {
  display: flex;
  height: 5px;
  width: 4rem;
  border-radius: 2px;
  overflow: hidden;
  background: var(--flaeche-tief);
  flex-shrink: 0;
}
.minispur i { display: block; height: 100%; }
#a-stufen {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--s4);
  margin-bottom: 0;
}
#a-stufen .zahl { font-size: var(--t-basis); }
#a-stufen .messwert:nth-child(3) { border-left: 0; }
#a-stufen .messwert:nth-child(n+3) { border-top: 1px solid var(--rand-fein); }