@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: #f1f3f7;
  --flaeche: #ffffff;
  --flaeche-tief: #f4f6fa;
  --flaeche-hover: #f7f9fc;

  --rand-fein: #e4e8ee;
  --rand: #d8dee6;
  --rand-stark: #bfc8d3;
  --tinte: #1d2630;
  --tinte-leise: #4d5864;
  --tinte-still: #626d7a;
  --gut: #1f7a4a;
  --gut-flaeche: #e6f3ec;
  --warte: #8a5d00;
  --warte-flaeche: #fbf1dd;
  --warte-rand: #e6d3a8;
  --warte-linie: rgba(138, 93, 0, .16);
  --fehler: #a8302a;
  --fehler-flaeche: #fbecea;
  --leiste: #f1f3f7;
  --leiste-tinte: #1d2630;
  --leiste-leise: #4d5864;
  --leiste-still: #626d7a;
  --leiste-hover: rgba(16, 36, 70, .05);
  --leiste-aktiv: #ffffff;
  --leiste-rand: #e3e7ed;
  --leiste-gut: #1f7a4a;

  --schatten-farbe-nah: rgba(11, 48, 105, .08);
  --schatten-farbe-fern: rgba(11, 48, 105, .07);
  --schatten-2: 0 2px 4px var(--schatten-farbe-nah), 0 10px 24px var(--schatten-farbe-fern);
  --schleier: rgba(11, 48, 105, .32);

  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --leistenhoehe: 3.75rem;
  --rundung: 12px;
  --rundung-klein: 8px;
  --karte-polster: 1.25rem;
  --rundung-fein: 4px;
  --t-plakette: .75rem;
  --t-mikro: .8125rem;
  --t-klein: .875rem;
  --t-basis: 1rem;
  --t-mittel: 1.0625rem;
  --t-gross: 1.0625rem;
  --t-titel: 1.375rem;
  --t-kennzahl: 1.875rem;
  --schrift: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --breit-eng: 87.5%;
  --tracking-hell: 0;
  --zeile-text: 1.55;
  --winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359636e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    color-scheme: dark;
    --blau: #74a1d6;
    --blau-text: #93bbe4;
    --blau-tief: #c3d8ee;
    --blau-flaeche: #1b2a3d;
    --aktion: #3a6ba4;
    --aktion-druck: #325f92;
    --aktion-tief: #294e79;
    --grund: #0a0e13;
    --flaeche: #12171d;
    --flaeche-tief: #181e25;
    --flaeche-hover: #1c232b;
    --rand-fein: #262e38;
    --rand: #313a46;
    --rand-stark: #46525f;
    --tinte: #e3e8ee;
    --tinte-leise: #aab4c0;
    --tinte-still: #8e99a6;
    --gut: #5cba86;
    --gut-flaeche: #17301f;
    --warte: #d9a441;
    --warte-flaeche: #2e2a1a;
    --warte-rand: #4d4226;
    --warte-linie: rgba(217, 164, 65, .22);
    --fehler: #ee8f85;
    --fehler-flaeche: #3a2523;
    --leiste: #0a0e13;
    --leiste-tinte: #e3e8ee;
    --leiste-leise: #aab4c0;
    --leiste-still: #8e99a6;
    --leiste-hover: rgba(255, 255, 255, .05);
    --leiste-aktiv: #12171d;
    --leiste-rand: #262e38;
    --leiste-gut: #5cba86;
    --schatten-farbe-nah: rgba(0, 0, 0, .45);
    --schatten-farbe-fern: rgba(0, 0, 0, .4);
      --schatten-2: 0 2px 4px var(--schatten-farbe-nah), 0 10px 24px var(--schatten-farbe-fern);
    --schleier: rgba(0, 0, 0, .6);
    --tracking-hell: .003em;
    --zeile-text: 1.6;
    --winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b1bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
:root[data-darstellung="dunkel"] {
  color-scheme: dark;
  --blau: #74a1d6;
  --blau-text: #93bbe4;
  --blau-tief: #c3d8ee;
  --blau-flaeche: #1b2a3d;
  --aktion: #3a6ba4;
  --aktion-druck: #325f92;
  --aktion-tief: #294e79;
  --grund: #0a0e13;
  --flaeche: #12171d;
  --flaeche-tief: #181e25;
  --flaeche-hover: #1c232b;
  --rand-fein: #262e38;
  --rand: #313a46;
  --rand-stark: #46525f;
  --tinte: #e3e8ee;
  --tinte-leise: #aab4c0;
  --tinte-still: #8e99a6;
  --gut: #5cba86;
  --gut-flaeche: #17301f;
  --warte: #d9a441;
  --warte-flaeche: #2e2a1a;
  --warte-rand: #4d4226;
  --warte-linie: rgba(217, 164, 65, .22);
  --fehler: #ee8f85;
  --fehler-flaeche: #3a2523;
  --leiste: #0a0e13;
  --leiste-tinte: #e3e8ee;
  --leiste-leise: #aab4c0;
  --leiste-still: #8e99a6;
  --leiste-hover: rgba(255, 255, 255, .05);
  --leiste-aktiv: #12171d;
  --leiste-rand: #262e38;
  --leiste-gut: #5cba86;
  --schatten-farbe-nah: rgba(0, 0, 0, .45);
  --schatten-farbe-fern: rgba(0, 0, 0, .4);
  --schatten-2: 0 2px 4px var(--schatten-farbe-nah), 0 10px 24px var(--schatten-farbe-fern);
  --schleier: rgba(0, 0, 0, .6);
  --tracking-hell: .003em;
  --zeile-text: 1.6;
  --winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b1bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
.ikonensatz { position: absolute; width: 0; height: 0; overflow: hidden; }
[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);
}
::selection { background: var(--aktion); color: #fff; }
:focus-visible {
  outline: 2px solid var(--aktion);
  outline-offset: 2px;
}
a {
  color: var(--blau-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) :focus-visible { outline-color: var(--blau); }
}
:root[data-darstellung="dunkel"] :focus-visible { outline-color: var(--blau); }
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: 600;
  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); }
.anmeldekarte .neben.microsoft {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; margin-top: var(--s4); text-decoration: none; box-sizing: border-box;
  font: 600 var(--t-klein)/1.2 var(--schrift); letter-spacing: .005em;
  padding: .6rem 1.1rem; border-radius: var(--rundung-klein);
  border: 1px solid var(--rand-stark);
}
.anmeldekarte .oder {
  display: flex; align-items: center; gap: var(--s3);
  margin: var(--s4) 0; font-size: var(--t-mikro); color: var(--tinte-still);
}
.anmeldekarte .oder::before, .anmeldekarte .oder::after {
  content: ""; flex: 1; height: 1px; background: var(--rand-fein);
}
.linkfeld { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.funktionsraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s2) var(--s3); margin-bottom: var(--s3);
}
.funktionsraster .feld { margin-bottom: 0; }
.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); }

.anmelderecht, .rechtzeile {
  display: flex;
  gap: var(--s4);
  margin: var(--s4) 0 0;
  font-size: var(--t-klein);
}
.anmelderecht { justify-content: center; }
.rechtzeile { margin: 0; }
.schale {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
}
.leiste {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  background: var(--leiste);
  border-right: 0;
  padding: var(--s4) var(--s2) var(--s3) var(--s3);
  padding-left: max(var(--s3), env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 10;
  color: var(--leiste-tinte);
  scrollbar-color: var(--leiste-rand) var(--leiste);
}
.marke {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 var(--s3);
  align-items: center;
  padding: var(--s1) var(--s2) var(--s4);
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.markenlogo { grid-row: span 2; }
.markenname {
  font-size: var(--t-basis);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--leiste-tinte);
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  white-space: nowrap;
}
.markenzusatz {
  font-size: var(--t-plakette);
  color: var(--leiste-leise);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stufe {
  font-size: var(--t-plakette);
  font-weight: 700;
  font-stretch: var(--breit-eng);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--flaeche-tief);
  color: var(--tinte-still);
  border: 1px solid var(--rand-fein);
  padding: .1rem .4rem;
  border-radius: var(--rundung-fein);
  line-height: 1.45;
  flex-shrink: 0;
}
.leiste .stufe { background: var(--flaeche); }
.navlauf {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1 0 auto;
}
.leiste > * { flex-shrink: 0; }
.navgruppe { display: flex; flex-direction: column; gap: 1px; }

.gruppentitel {
  font-size: .75rem;
  font-weight: 600;
  color: var(--tinte-still);
  margin: var(--s2) 0 var(--s1);
  padding: 0 var(--s3);
}
.leiste .gruppentitel { color: var(--leiste-still); }
.navknopf {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  font: 500 var(--t-klein)/1.3 var(--schrift);
  text-align: left;
  color: var(--leiste-leise);
  background: none;
  border: 0;
  border-radius: var(--rundung-klein);
  padding: .55rem var(--s3);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.navknopf:hover { background: var(--leiste-hover); color: var(--leiste-tinte); }
.navknopf[aria-current="page"] {
  background: var(--leiste-aktiv);
  color: var(--leiste-tinte);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--leiste-rand), 0 1px 2px var(--schatten-farbe-nah);
}
.navknopf[aria-current="page"] .ikone { color: var(--blau); opacity: 1; }
.ikone {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8;
}
.leistenfuss {
  border-top: 1px solid var(--leiste-rand);
  padding: var(--s3) 0 0;
  display: grid;
  gap: 1px;
}
.benutzerzeile {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s2) 0;
}
.benutzer {
  flex: 1;
  min-width: 0;
  font-size: var(--t-mikro);
  font-weight: 600;
  color: var(--leiste-leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rundknopf {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: none;
  color: var(--leiste-leise);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  flex-shrink: 0;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.rundknopf:hover { background: var(--leiste-hover); color: var(--leiste-tinte); }
.rundknopf .ikone { width: 16px; height: 16px; }

.buehne {
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 2 * var(--s2));
  margin: var(--s2) var(--s2) var(--s2) 0;
  margin-right: max(var(--s2), env(safe-area-inset-right));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--flaeche);
  border-radius: 14px;
  box-shadow: 0 0 0 1px var(--rand-fein), 0 1px 3px var(--schatten-farbe-nah);
  scrollbar-color: var(--rand-stark) var(--flaeche);
}
.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  background: var(--flaeche);
  padding: var(--s5) var(--s6) var(--s3);
  padding-right: max(var(--s6), env(safe-area-inset-right));
  transition: box-shadow .15s ease-out;
}
.kopf.gerollt { box-shadow: 0 1px 0 var(--rand-fein); }
.kopftitel { min-width: 0; }
.kopf h1 {
  font-size: var(--t-titel);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.018em;
  line-height: 1.2;
}
.kopf .luft { flex: 1; }
.kopfzusatz {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  margin: var(--s1) 0 0;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.kopfzusatz .stand { font-weight: 600; color: var(--gut); }
.kopfzusatz .stand::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: .45em;
  vertical-align: .1em;
}
.kopfzusatz .stand.warte { color: var(--warte); }
.kopfzusatz .stand.fehler { color: var(--fehler); }
.kopfzusatz .stand.still { color: var(--tinte-still); }
.kopfaktionen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
}
.kopfaktionen .chatfeld select { font-size: var(--t-klein); padding-top: .4rem; padding-bottom: .4rem; }
.kopfaktionen:not([hidden]) ~ .kopfmandant:not([hidden]) { margin-left: var(--s3); }
.sagerzeile {
  margin: 0;
  padding: .2rem .6rem;
  border-radius: var(--rundung-fein);
  background: var(--gut-flaeche);
  color: var(--gut);
  font-size: var(--t-klein);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32rem;
}
.sagerzeile.fehler { background: var(--fehler-flaeche); color: var(--fehler); }
@media (prefers-reduced-motion: no-preference) {
  .sagerzeile {
    transition: opacity .15s ease-in, translate .15s ease-in, display .15s allow-discrete;
  }
  .sagerzeile[hidden] { opacity: 0; translate: 0 -4px; }
  .sagerzeile:not([hidden]) { transition-duration: .18s; transition-timing-function: ease-out; }
  @starting-style {
    .sagerzeile:not([hidden]) { opacity: 0; translate: 0 -4px; }
  }
}
.kopfmandant {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.kopfmandant select { width: auto; max-width: 18rem; font-size: var(--t-klein); }
.mandanthinweis {
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  white-space: nowrap;
}
main {
  flex: 1;
  width: 100%;
  max-width: 110rem;
  margin: 0;
  padding: var(--s4) var(--s6) var(--s7);
  padding-right: max(var(--s6), 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;
}
.spalten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  align-items: start;
}
.spalten.breit { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.spalte { display: grid; gap: var(--s5); align-content: start; min-width: 0; }
.aswahl { position: relative; padding-right: var(--s6); }
.aswahl .aswinkel {
  position: absolute;
  right: var(--s2);
  top: 50%;
  translate: 0 -50%;
  color: var(--tinte-still);
}
.aswahl:hover { background: var(--flaeche-hover); }
.aswahl:hover .aswinkel { color: var(--blau); }
.nurlesen {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--flaeche-tief);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  text-align: left;
}
.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);
  box-shadow: none;
  padding: var(--karte-polster);
}
.karte:not([hidden]) ~ .karte { margin-top: var(--s5); }
.bereich > .karte { max-width: 46rem; }
.karte.offen { border-color: transparent; background: none; }
.karte > h2 {
  font-size: var(--t-gross);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--s4);
  letter-spacing: -.012em;
}
.karte h3 {
  font-size: var(--t-mikro);
  font-weight: 600;
  color: var(--tinte-still);
  margin: var(--s5) 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rand-fein);
}
.karte > h3:first-child { margin-top: 0; }
.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); }
.wertzeile {
  margin: calc(var(--s2) * -1) 0 var(--s4);
  font-size: var(--t-mittel);
  color: var(--tinte);
}
.kartenfuss {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rand-fein);
}
.kartenfuss .fussnote { margin: 0; }
.auffaelligstreifen {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--warte-flaeche);
  border: 1px solid var(--warte-rand);
  border-radius: var(--rundung);
}
.auffaelligkopf {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin: 0 0 var(--s2);
  font-size: var(--t-klein);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--warte);
}
.auffaelligkopf button {
  margin-left: auto;
  color: var(--warte);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.auffaelligzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  padding: var(--s1) 0;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.auffaelligzeile + .auffaelligzeile { border-top: 1px solid var(--warte-linie); }
.auffaelligzeile code {
  color: var(--tinte);

  background: transparent;
  padding: 0;
}
.bereich > .karte.startkarte { max-width: none; }
.startliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.startzeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
}
.startzeile + .startzeile { border-top: 1px solid var(--rand-fein); }
.startzeile .haken {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1.5px solid var(--tinte-still);
  display: grid;
  place-items: center;
  font-size: var(--t-mikro);
  line-height: 1;
  color: var(--tinte-still);
}
.startzeile.fertig .haken {
  background: var(--gut-flaeche);
  border-color: var(--gut);
  color: var(--gut);
}
.startzeile .startwas { flex: 1 1 14rem; min-width: 0; }
.startzeile .startwas b { font-weight: 700; }
.startzeile .startwas span {
  display: block;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.startzeile.fertig .startwas b { font-weight: 400; color: var(--tinte-leise); }
.startzeile.fertig .startwas span { display: none; }

.ungespeichert {
  font-size: var(--t-klein);
  font-weight: 700;
  color: var(--warte);
}
.warnt { color: var(--warte); }
.funktionsblock {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rand-fein);
}
.leer {
  color: var(--tinte-still);
  font-size: var(--t-klein);
  margin: 0 0 var(--s2);
}
#vg-liste > .leer,
#gs-liste > .leer,
#nz-liste > .leer,
#ko-liste > .leer,
#t-nebenstellen > .leer,
#ueb-assistenten > .leer,
#ueb-anrufe > .leer,
#ueb-wissen > .leer,
#w-bestand > .leer {
  margin: 0;
  padding: var(--s6) var(--s4);
  background: var(--flaeche-tief);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  text-align: center;
  text-wrap: balance;
}
.leer.stoerung { color: var(--fehler); }
.leer.stoerung::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--fehler);
  margin-right: var(--s2);
  vertical-align: middle;
}
.skelett { display: grid; gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.skelett span {
  display: block; height: .7rem; border-radius: 99px;
  background: var(--rand-fein);
}
.skelett span:nth-child(2) { width: 78%; }
.skelett span:nth-child(3) { width: 62%; }
.skelett span:nth-child(4) { width: 84%; }
@media (prefers-reduced-motion: no-preference) {
  .skelett span { animation: skelett-atmen 1.7s ease-in-out infinite; }
  .skelett span:nth-child(2) { animation-delay: .13s; }
  .skelett span:nth-child(3) { animation-delay: .26s; }
  .skelett span:nth-child(4) { animation-delay: .39s; }
}
@keyframes skelett-atmen {
  0%, 100% { opacity: 1; }
  50%      { opacity: .38; }
}
.cbeitrag.bot > .skelett.weicht,
.cbeitrag.bot > .skelett.weicht + .ctext { grid-row: 2; }
.skelett.weicht { opacity: 0; pointer-events: none; transition: opacity .15s ease-in; }
@media (prefers-reduced-motion: no-preference) {
  .ctext.neu { animation: text-ein .2s ease-out; }
}
@keyframes text-ein { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .skelett.weicht { display: none; }
}
.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"],
input[type="search"], input[type="email"], input[type="tel"],
input[type="url"], input[type="date"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .55rem .75rem;
  border-radius: var(--rundung-klein);
  border: 1px solid var(--rand-stark);
  background-color: 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 { border-color: var(--aktion); }
select:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 26%, transparent);
}
select {
  appearance: none;
  padding-right: 2rem;
  background-image: var(--winkel);
  background-repeat: no-repeat;
  background-position: right .6rem center;
  background-size: 1rem 1rem;
}
select:disabled { opacity: 1; }
option { background-color: var(--flaeche); color: var(--tinte); }
input[type="search"] { appearance: none; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
input::placeholder, textarea::placeholder { color: var(--tinte-still); opacity: 1; }
select:disabled, input:disabled, textarea:disabled {
  background-color: 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;
  border-radius: var(--rundung-fein);
}
input[type="checkbox"]:not(:checked):not(:indeterminate) {
  appearance: none;
  border: 1px solid var(--rand-stark);
  background-color: var(--flaeche);
}
input[type="file"] { color: var(--tinte-leise); }
button {
  font: 600 var(--t-klein)/1.2 var(--schrift);
  letter-spacing: .005em;
  min-height: 2.25rem;
  padding: .5rem 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, translate .1s ease-out;
}
button:disabled { opacity: .5; cursor: not-allowed; }
button:active:not(:disabled) { translate: 0 1px; }
.haupt {
  background: var(--aktion);
  color: #fff;
  padding: .55rem 1.1rem;
}
.haupt.voll, .gefahr.voll { width: 100%; }
.haupt:hover:not(:disabled) { background: var(--aktion-druck); }
.haupt:active:not(:disabled) { background: var(--aktion-tief); }
.neben {
  background: var(--flaeche);
  color: var(--tinte);
  border-color: var(--rand);
}
.neben:hover:not(:disabled) { background: var(--flaeche-tief); border-color: var(--rand-stark); }
.gefahr {
  background: var(--flaeche);
  color: var(--fehler);
  border-color: var(--fehler);
}
.gefahr.voll { margin-top: var(--s2); }
.gefahr:hover:not(:disabled) { background: var(--fehler-flaeche); }
.leise {
  background: none;
  color: var(--blau-text);
  border-color: transparent;
  padding: .4rem .7rem;
  min-height: 2rem;
  font-weight: 600;
}
.leise:hover:not(:disabled) { color: var(--blau-text); background: var(--blau-flaeche); }

.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;
  display: flex;
  flex-direction: column;
}
.messwert .etikett { order: -1; margin: 0 0 .1rem; }
.messwert + .messwert { border-left: 1px solid var(--rand-fein); }
.zahl {
  display: block;
  min-height: 1.3em;
  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 {
  min-width: 4.5rem;
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  flex-shrink: 0;
}
.protokoll {
  max-height: 26rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  font-size: var(--t-klein);
  margin: 0 calc(var(--karte-polster) * -1) calc(var(--karte-polster) * -1);
  padding: 0 var(--karte-polster) 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(--karte-polster) * -1) calc(var(--karte-polster) * -1);
  padding: 0 var(--karte-polster) 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; }

.chatflaeche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
main:has(> .bereich.aktiv[data-bereich="chat"]) { max-width: none; }
.chatflaeche:has(> .chatsitzungen:not([hidden]) .chatsitzung) { grid-template-columns: 16rem minmax(0, 1fr); }
.chatkopf .chatfeld select { font-size: var(--t-klein); padding-top: .4rem; padding-bottom: .4rem; }
.chatflaeche:has(> .chatsitzungen:not([hidden]) .chatsitzung) .chatfeld select { min-width: 0; max-width: 16rem; }
.chatflaeche:has(> .chatsitzungen:not([hidden]) .chatsitzung) .chatkopf { column-gap: var(--s3); }
.chatsitzungen { min-width: 0; }
.chatsitzungsliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; max-height: calc(100dvh - 14rem); overflow-y: auto; }
.chatsitzung { display: flex; align-items: center; gap: var(--s1); border-radius: var(--rundung-klein); }
.chatsitzung:hover { background: var(--flaeche-hover); }
.chatsitzung[aria-current="true"] { background: var(--blau-flaeche); }
.chatsitzung-oeffnen {
  flex: 1; min-width: 0; min-height: 0; display: grid; gap: 1px; text-align: left;
  padding: var(--s2) var(--s3); background: none; border: 0; color: inherit; font-weight: 400;
}
.chatsitzung-oeffnen b { font-size: var(--t-klein); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chatsitzung-oeffnen span { font-size: var(--t-mikro); color: var(--tinte-still); }
.chatsitzung-umbenennen, .chatsitzung-loeschen {
  flex: none; width: 2rem; height: 2rem; min-height: 0; padding: 0; display: grid; place-items: center;
  border-radius: 50%; background: none; color: var(--tinte-still);
}
.chatsitzung-umbenennen + .chatsitzung-loeschen { margin-left: calc(-1 * var(--s1)); }
.chatsitzung-umbenennen:hover { background: var(--flaeche-tief); color: var(--tinte); }
.chatsitzung-loeschen:hover { background: var(--fehler-flaeche); color: var(--fehler); }
.chatsitzung-umbenennen .ikone, .chatsitzung-loeschen .ikone { width: 16px; height: 16px; }
.chatsitzung-titel {
  flex: 1; min-width: 0; margin: var(--s1) 0 var(--s1) var(--s1);
  padding: .35rem var(--s2); font-size: var(--t-klein);
}
.chatsuche { position: relative; margin: 0 0 var(--s2); }
.chatsuche .ikone {
  position: absolute; left: .6rem; top: 50%; translate: 0 -50%;
  width: 15px; height: 15px; color: var(--tinte-still); pointer-events: none;
}
.chatsuche input[type="search"] { font-size: var(--t-klein); padding: .4rem .6rem .4rem 2rem; }
.chatsitzung-keine { padding: var(--s2) var(--s3); font-size: var(--t-mikro); color: var(--tinte-still); }
.chatsitzungen > details + details { margin-top: var(--s3); }
.chatdateiliste { max-height: 16rem; }
.chatdateien-frist { margin: 0 0 var(--s2); }
a.chatsitzung-umbenennen { text-decoration: none; }
.chatsitzung-keine:hover { background: none; }
.chatsitzung-oeffnen span.chatsitzung-fund {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.4; overflow-wrap: anywhere;
}
.chatsitzungen mark, .chatlauf mark {
  background: color-mix(in srgb, var(--warte) 24%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.karte.chatkarte {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: min(calc(100dvh - 11rem), 60rem);
}
.chatkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--rand-fein);
}
.chatfeld { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.chatfeld > span {
  color: var(--tinte-leise);
  font-size: var(--t-mikro);
  font-weight: 600;
  white-space: nowrap;
}
.chatfeld select { min-width: 15rem; max-width: 22rem; }
.chatschalter {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  white-space: nowrap;
  cursor: pointer;
}
.chatkopf #c-neu { margin-left: 0; }
.chathinweis { padding: var(--s2) var(--s5) 0; }
.chatlauf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: grid;
  gap: var(--s5);
  align-content: start;
  padding: var(--s5);
}
.chatlauf.leerzustand { align-content: center; }
.chatleer {
  display: grid;
  gap: var(--s3);
  justify-items: center;
  text-align: center;
  max-width: 38rem;
  margin: 0 auto;
}
.chatleer h3 {
  font-size: var(--t-gross);
  font-weight: 600;
  color: var(--tinte);
  margin: 0;
  padding: 0;
  border: 0;
}
.chatleer p { color: var(--tinte-leise); font-size: var(--t-klein); margin: 0; }
.chatvorschlaege { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }
.chatvorschlag {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 999px;
  color: var(--tinte);
  cursor: pointer;
  font-size: var(--t-klein);
  font-weight: 500;
  padding: .35rem .85rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chatvorschlag:hover { border-color: var(--blau); color: var(--blau-text); }
.cbeitrag { display: grid; gap: var(--s1); line-height: 1.6; }
.cbeitrag.nutzer {
  justify-self: end;
  max-width: 78%;
  padding: .6rem 1rem;
  border-radius: 16px;
  background: var(--blau-flaeche);
  color: var(--tinte);
}
.cbeitrag.bot {
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: var(--s3);
  align-items: start;
}
.cbeitrag.bot > :not(.cmarke) { grid-column: 2; }
.cmarke {
  grid-row: 1 / span 3;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--flaeche-tief);
  border: 1px solid var(--rand-fein);
  color: var(--blau-text);
}
.cmarke .ikone { width: 17px; height: 17px; opacity: 1; }
.cbeitrag.bot .ctext > :not(.ctabelle), .cbeitrag.bot .cquellen { max-width: 74ch; }
.cwer {
  color: var(--blau-text);
  font-size: var(--t-mikro);
  font-weight: 600;
  line-height: 1.3;
  padding-top: .45rem;
}
.vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ctext { white-space: pre-wrap; overflow-wrap: anywhere; }
.czitat {
  position: relative;
  padding: var(--s3) 2.75rem var(--s3) var(--s4);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  background: var(--flaeche-tief);
}
.czitat blockquote { margin: 0; }
.czitat-kopieren {
  position: absolute;
  top: var(--s1);
  right: var(--s1);
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: none;
  color: var(--tinte-still);
}
.czitat-kopieren:hover { background: var(--flaeche-hover); color: var(--tinte); }
.czitat-kopieren.kopiert, .czitat-kopieren.kopiert:hover { color: var(--gut); }
.czitat-kopieren .ikone { width: 16px; height: 16px; grid-area: 1 / 1; }
.czitat-kopieren .haken,
.czitat-kopieren.kopiert .ikone:not(.haken) { opacity: 0; scale: .25; filter: blur(4px); }
.czitat-kopieren.kopiert .haken { opacity: 1; scale: 1; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .czitat-kopieren .ikone { transition: opacity .15s ease-out, scale .15s ease-out, filter .15s ease-out; }
}
.ctext p, .ctext ul, .ctext ol { margin: 0; }
.ctext > * + * { margin-top: var(--s2); }
.ctext ul, .ctext ol { padding-left: 1.4rem; white-space: normal; }
.ctext li + li { margin-top: 2px; }
.ctext .czwischen { font-weight: 600; }
.ctext code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .92em;
  padding: 0 .3em;
  border-radius: 4px;
  background: var(--flaeche-tief);
}
.ctabelle {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  white-space: normal;
  overflow-wrap: normal;
}
.ctabelle:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.ctabelle table { border-collapse: collapse; min-width: 100%; font-size: var(--t-klein); line-height: 1.45; }
.ctabelle th {
  text-align: left;
  font-size: var(--t-mikro);
  font-weight: 700;
  color: var(--tinte-still);
  background: var(--flaeche-tief);
  padding: var(--s2) .65rem;
  border-bottom: 1px solid var(--rand);
  vertical-align: bottom;
}
.ctabelle td {
  padding: var(--s2) .65rem;
  border-bottom: 1px solid var(--rand-fein);
  vertical-align: top;
  min-width: 16ch;
}
.ctabelle th:first-child, .ctabelle td:first-child { padding-left: var(--s3); }
.ctabelle th:last-child, .ctabelle td:last-child { padding-right: var(--s3); }
.ctabelle .kurz { white-space: nowrap; min-width: 0; }
.ctabelle tbody tr:last-child td { border-bottom: 0; }
.ctabelle tbody tr:hover { background: var(--flaeche-hover); }
.ctabelle .rechts { text-align: right; font-variant-numeric: tabular-nums; }
.ctabelle .mitte { text-align: center; }
.cquellen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--t-mikro);
}
.cquellen a, .cquellen span {
  display: inline-block;
  max-width: 100%;
  padding: .2rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--tinte-leise);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color .15s ease-out, color .15s ease-out;
}
.cquellen a:hover { border-color: var(--blau); color: var(--blau-text); }
.cquellen .fakt { color: var(--gut); border-color: color-mix(in srgb, var(--gut) 35%, var(--rand)); }
.cdokumente { list-style: none; margin: var(--s2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.cdatei {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 100%;
  padding: .45rem .85rem .45rem .7rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--tinte);
  text-decoration: none;
  font-size: var(--t-klein);
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
a.cdatei:hover { border-color: var(--blau); background: var(--flaeche-hover); }
a.cdatei[aria-busy="true"] { cursor: progress; opacity: .7; }
.cdatei .ikone { width: 16px; height: 16px; flex: none; color: var(--blau-text); }
.cdatei-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdatei-meta { flex: none; color: var(--tinte-still); font-size: var(--t-mikro); }
.cdatei.abgelaufen { border-style: dashed; background: none; color: var(--tinte-still); }
.cdatei.abgelaufen .cdatei-name { font-weight: 400; }
.chatlauf .skelett { margin: 0; }
.chatlauf .skelett span { height: .6rem; }
.chatfuss { padding: var(--s3) var(--s5) var(--s4); }
.chatfuss .fussnote { margin: var(--s2) 0 0; }
.chatzeile {
  display: flex;
  align-items: end;
  gap: var(--s2);
  padding: .35rem .35rem .35rem .9rem;
  border: 1px solid var(--rand-stark);
  border-radius: 14px;
  background: var(--flaeche);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.chatzeile:hover { border-color: var(--blau); }
.chatzeile:focus-within { border-color: var(--aktion); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau) 26%, transparent); }
.chatzeile textarea,
.chatzeile textarea:hover,
.chatzeile textarea:focus {
  flex: 1;
  min-height: 2.25rem;
  max-height: 12rem;
  padding: .4rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
}
.chatzeile textarea:focus-visible { outline: none; }
.senden {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--aktion);
  color: #fff;
}
.senden:hover:not(:disabled) { background: var(--aktion-druck); }
.senden .ikone { width: 18px; height: 18px; stroke-width: 2; opacity: 1; }
.senden.anhalten .ikone { width: 16px; height: 16px; }
.chatzeile:has(> .anhaengen) { padding-left: .35rem; }
.anhaengen {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: none;
  color: var(--tinte-still);
}
.anhaengen:hover { background: var(--flaeche-hover); color: var(--tinte); }
.anhaengen .ikone { width: 18px; height: 18px; }
.karte.chatkarte.ziehziel { outline: 2px dashed var(--blau); outline-offset: -6px; }
.chatanhaenge { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.chatanhang {
  display: flex;
  align-items: center;
  gap: var(--s1);
  max-width: 100%;
  padding: .2rem .25rem .2rem .6rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche-tief);
  font-size: var(--t-klein);
}
.chatanhang > .ikone { width: 14px; height: 14px; flex: none; color: var(--tinte-still); }
.chatanhang-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.chatanhang-stand { color: var(--tinte-still); font-size: var(--t-mikro); white-space: nowrap; }
.chatanhang.fehler { border-color: var(--fehler); }
.chatanhang.fehler .chatanhang-stand { color: var(--fehler); white-space: normal; }
.chatanhang-weg {
  flex: none; width: 1.6rem; height: 1.6rem; min-height: 0; padding: 0;
  display: grid; place-items: center; border-radius: 50%; background: none; color: var(--tinte-still);
}
.chatanhang-weg:hover { background: var(--flaeche-hover); color: var(--tinte); }
.chatanhang-weg .ikone { width: 14px; height: 14px; }
.chatkopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.chatstil {
  position: relative;
  width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: none; color: var(--tinte-still);
}
.chatstil:hover, .chatstil[aria-expanded="true"] { background: var(--flaeche-hover); color: var(--tinte); }
.chatstil .ikone { width: 18px; height: 18px; }
.chatstil.gesetzt::after {
  content: "";
  position: absolute;
  top: .35rem;
  right: .35rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blau);
  box-shadow: 0 0 0 2px var(--flaeche);
}
.chatvorgaben {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s3) var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--rand-fein);
  background: var(--flaeche-tief);
}
@media (prefers-reduced-motion: no-preference) {
  .chatvorgaben {
    transition: opacity .16s ease-in, translate .16s ease-in, display .16s allow-discrete;
  }
  .chatvorgaben[hidden] { opacity: 0; translate: 0 -4px; }
  .chatvorgaben:not([hidden]) { transition-duration: .2s; transition-timing-function: ease-out; }
  @starting-style {
    .chatvorgaben:not([hidden]) { opacity: 0; translate: 0 -4px; }
  }
}
.chatvorgaben .chatfeld select { min-width: 10rem; }
.chatvorgabe-text { flex: 1 1 22rem; display: grid; gap: var(--s1); }
.chatvorgabe-text > span { color: var(--tinte-leise); font-size: var(--t-mikro); font-weight: 600; }
.chatvorgabe-text textarea { min-height: 2.6rem; resize: vertical; }
.chatvorgaben-fuss { flex: 1 1 100%; display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.chatvorgaben-fuss .fussnote { margin: 0; }
.canhaenge { list-style: none; margin: var(--s1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.canhang { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-mikro); color: var(--tinte-leise); }
.canhang .ikone { width: 13px; height: 13px; }
.cstatus { margin: 0; font-size: var(--t-klein); color: var(--tinte-still); }
.cangehalten { margin: 0; font-size: var(--t-mikro); color: var(--tinte-still); }
.caktionen { display: flex; align-items: center; gap: 2px; margin-left: calc(-1 * var(--s1)); }
.caktion {
  width: 2rem; height: 2rem; min-height: 0; padding: 0;
  display: grid; place-items: center; border-radius: 50%; background: none; color: var(--tinte-still);
}
.caktion:hover { background: var(--flaeche-hover); color: var(--tinte); }
.caktion[aria-pressed="true"] { color: var(--blau-text); background: var(--blau-flaeche); }
.caktion .ikone { width: 16px; height: 16px; }
.cstand { margin-left: var(--s2); font-size: var(--t-mikro); color: var(--tinte-still); }
.cbewertung {
  display: grid;
  gap: var(--s2);
  max-width: 74ch;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  background: var(--flaeche-tief);
}
.cbewertung > p { margin: 0; font-size: var(--t-klein); font-weight: 600; }
.cgruende { display: flex; flex-wrap: wrap; gap: var(--s2); }
.cgrund {
  min-height: 0;
  padding: .3rem .8rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--flaeche);
  color: var(--tinte);
  font-size: var(--t-klein);
  font-weight: 500;
}
.cgrund:hover { border-color: var(--blau); }
.cgrund[aria-pressed="true"] { border-color: var(--blau); background: var(--blau-flaeche); color: var(--blau-text); }
.cbewertung input[type="text"] { width: 100%; }
.cbewertung-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.ckorrektur { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--rand-fein); }
.ckorrektur label { display: grid; gap: var(--s1); }
.ckorrektur label > span { color: var(--tinte-leise); font-size: var(--t-mikro); font-weight: 600; }
.ckorrektur textarea { resize: vertical; }
.ckorrektur button { justify-self: start; }
.ckorrektur .fussnote { margin: 0; }
@media (max-width: 760px) {
  .karte.chatkarte { height: auto; }
  .chatlauf {
    min-height: 14rem;
    overflow: visible;
    padding-inline: var(--s4);
  }
  .chatkopf { padding-inline: var(--s4); }
  .chatkopf #c-neu { margin-left: 0; }
  .chatkopf-rechts { margin-left: 0; }
  .chatvorgaben { padding-inline: var(--s4); }
  .chatfeld { flex: 1 1 100%; }
  .chatfeld select { flex: 1; min-width: 0; max-width: none; }
  .chathinweis, .chatfuss { padding-inline: var(--s4); }
}
.wquelle {
  margin: 0 calc(var(--karte-polster) * -1);
  padding: var(--s4) var(--karte-polster);
  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); }
.koraster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
@media (max-width: 900px) { .koraster { grid-template-columns: 1fr; } }
.kospalte > .karte:not([hidden]) ~ .karte { margin-top: var(--s4); }
.kozeile.ruht { opacity: .6; }
.gruppenwahl {
  display: flex; flex-direction: column; max-height: 18rem; overflow-y: auto;
  margin-top: var(--s2); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--rundung-klein);
}
.gruppenwahl > .unter { margin: 0; padding: var(--s3); }
button.gruppenwahl-eintrag {
  display: flex; align-items: baseline; gap: var(--s2); width: 100%; min-height: 0;
  padding: var(--s2) var(--s3); border: 0; border-top: 1px solid var(--rand-fein);
  border-radius: 0; background: none; color: var(--tinte); font-weight: 400; text-align: left;
}
button.gruppenwahl-eintrag:first-child { border-top: 0; }
button.gruppenwahl-eintrag:hover { background: var(--flaeche-hover); }
button.gruppenwahl-eintrag:active:not(:disabled) { translate: none; }
button.gruppenwahl-eintrag:focus-visible { outline-offset: -2px; }
button.gruppenwahl-eintrag[aria-pressed="true"] { background: var(--blau-flaeche); box-shadow: inset 3px 0 0 var(--blau); }
.gruppenwahl-eintrag strong { font-weight: 600; overflow-wrap: anywhere; }
.gruppenwahl-eintrag .unter { margin: 0; white-space: nowrap; }
.gruppenwahl-eintrag .rechts { margin-left: auto; font-variant-numeric: tabular-nums; }
.gruppenstand { margin-top: var(--s2); }
.werkzeugrechte {
  border-top: 1px solid var(--rand-fein);
  margin: var(--s2) 0 var(--s4);
  padding-top: var(--s3);
}
.werkzeugrechte.ohnelinie { border-top: 0; margin-top: 0; padding-top: 0; }
.werkzeugrechte > .feldkopf {
  font-size: var(--t-mikro);
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 var(--s1);
}
.werkzeugzeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 13rem);
  align-items: center;
  gap: var(--s1) var(--s3);
  padding: var(--s2) 0;
  font-size: var(--t-klein);
}
.werkzeugzeile + .werkzeugzeile { border-top: 1px solid var(--rand-fein); }
.werkzeugzeile select { width: 100%; }
.werkzeugzeile .fussnote { grid-column: 1 / -1; margin: 0; }
@media (max-width: 520px) { .werkzeugzeile { grid-template-columns: minmax(0, 1fr); } }
.personen { container-type: inline-size; }
.personzeile {
  display: grid;
  grid-template-columns: 2.125rem minmax(0, 1fr) auto auto;
  grid-template-areas: "zeichen wer merkmale knoepfe";
  column-gap: var(--s3);
  align-items: start;
}
.personzeile > .avatar { grid-area: zeichen; }
.personzeile > .personwer { grid-area: wer; min-width: 0; padding-top: .3rem; }
.personzeile > .merkmale { grid-area: merkmale; padding-top: .4rem; }
.personzeile > .personknoepfe, .personzeile > .tmknopf { grid-area: knoepfe; padding-top: .1rem; }
.avatar {
  display: inline-grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--blau-flaeche);
  color: var(--blau-text);
  font-size: .78125rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
}
.personwer .wkopf { gap: var(--s1) var(--s2); }
.personwer .wkopf strong { font-size: var(--t-basis); font-weight: 600; line-height: 1.35; }
.personneben { font-size: var(--t-klein); color: var(--tinte-still); }
.personmeta {
  margin: .1rem 0 0;
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  overflow-wrap: anywhere;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--flaeche-tief);
  color: var(--tinte-leise);
  font-size: var(--t-mikro);
  line-height: 1.3;
}
.merkmale { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.rollenpille {
  display: inline-flex;
  align-items: center;
  min-height: 1.375rem;
  padding: 0 .55rem;
  border: 1px solid var(--rand-fein);
  border-radius: 999px;
  background: var(--flaeche-tief);
  color: var(--tinte-leise);
  font-size: var(--t-mikro);
  font-weight: 600;
  white-space: nowrap;
}
.anmeldeweg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-mikro);
  color: var(--tinte-leise);
  white-space: nowrap;
}
.anmeldeweg svg { width: 14px; height: 14px; flex: none; }
.anmeldeweg .ikone { opacity: 1; color: var(--tinte-still); }
.personknoepfe { display: flex; gap: var(--s1); }
.personknoepfe button, .personzeile > .tmknopf {
  padding: .3rem .6rem;
  min-height: 2rem;
  font-size: var(--t-mikro);
}
.tmzeile > .tmbearbeiten { margin-left: calc(2.125rem + var(--s3)); }
.tmzeile > .personzeile { grid-template-columns: 2.125rem minmax(0, 1fr) auto 5.5rem; }
.personzeile > .tmknopf { justify-self: end; }
@container (max-width: 36rem) {
  .personzeile, .tmzeile > .personzeile {
    grid-template-columns: 2.125rem minmax(0, 1fr) auto;
    grid-template-areas: "zeichen wer knoepfe" ". merkmale merkmale";
  }
  .personzeile > .merkmale { padding-top: var(--s2); }
  .tmzeile > .tmbearbeiten { margin-left: 0; }
}
@container (max-width: 26rem) {
  .kozeile > .personzeile { grid-template-columns: 2.125rem minmax(0, 1fr); grid-template-areas: "zeichen wer" ". knoepfe"; }
  .kozeile .personknoepfe { padding-top: var(--s2); margin-left: -.6rem; }
}
.zaehler { color: var(--tinte-leise); font-weight: 300; margin-left: var(--s2); }
.wquellen { margin-bottom: var(--s4); }
.wquellen:has(.wquelle) { margin-bottom: var(--s5); }
#gs-liste { container-type: inline-size; }
.gskopf {
  display: grid;
  grid-template-columns: 5.5rem 5.25rem minmax(0, 1fr) 2.75rem;
  align-items: baseline;
  column-gap: var(--s3);
}
.gswann { font-size: var(--t-mikro); color: var(--tinte-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gswas { min-width: 0; }
.gswas > b {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
}
.gsunten {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s3);
  margin-top: .1rem;
  font-size: var(--t-mikro);
  color: var(--tinte-still);
}
.gsdauer { font-size: var(--t-mikro); color: var(--tinte-still); font-variant-numeric: tabular-nums; text-align: right; }
.gsknopf button { padding: .1rem .4rem; margin-left: -.4rem; min-height: 0; font-size: var(--t-mikro); }
.gsauf { margin: var(--s3) 0 0 calc(10.75rem + 2 * var(--s3)); }
.gstext { margin: 0 0 var(--s3); font-size: var(--t-klein); color: var(--tinte-leise); max-width: 72ch; }
.gsauf .tsegmente:empty { display: none; }
@container (max-width: 36rem) {
  .gskopf { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: var(--s1); }
  .gswann { grid-area: 1 / 1; }
  .gskopf > .plakette { grid-area: 1 / 2; }
  .gsdauer { grid-area: 1 / 3; }
  .gswas { grid-area: 2 / 1 / 3 / -1; }
  .gsauf { margin-left: 0; }
}
.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); font-weight: 600; }
.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; }
.raumwahl { max-width: 18rem; }
.wfreigaben {
  margin-top: var(--s3);
  padding-left: var(--s3);
  border-left: 2px solid var(--rand-fein);
}
.wfreigaben h3 {
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  margin: var(--s3) 0 var(--s1);
}
.wfreigaben h3:first-child { margin-top: 0; }
.wfreigaben .reihe { align-items: center; gap: var(--s2); margin: var(--s1) 0; }
.wfreigaben .reihe span { font-size: var(--t-klein); }
.wfreigaben input:disabled + span { color: var(--tinte-still); }
.wknoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.wknoepfe:empty { margin-top: 0; }
.wknopf, .wknoepfe button {
  padding: .3rem .6rem;
  min-height: 2rem;
  font-size: var(--t-mikro);
  font-weight: 600;
}
.wknoepfe .neben, .wknoepfe .leise, .wknopf.neben, .wknopf.leise, .zeilenaktionen .neben {
  background: none;
  border-color: transparent;
  color: var(--blau-text);
}
.wknoepfe .neben:hover:not(:disabled), .wknoepfe .leise:hover:not(:disabled),
.wknopf.neben:hover:not(:disabled), .wknopf.leise:hover:not(:disabled),
.zeilenaktionen .neben:hover:not(:disabled) {
  background: var(--blau-flaeche);
  border-color: transparent;
  color: var(--blau-text);
}
.wknoepfe .neben.rot, .wknopf.neben.rot { color: var(--tinte-still); }
.neben.rot { color: var(--tinte-leise); }
.neben.rot.scharf {
  background: var(--fehler-flaeche);
  border-color: var(--fehler);
  color: var(--fehler);
}
.neben.rot:hover:not(:disabled) {
  background: var(--fehler-flaeche);
  border-color: var(--fehler);
  color: var(--fehler);
}

.plakette {
  display: inline-block;
  font-size: var(--t-plakette);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  padding: 0;
  border-radius: 999px;
  background: none;
  color: var(--gut);
  white-space: nowrap;
}
.plakette::first-letter { text-transform: uppercase; }
.plakette::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: .4em;
  vertical-align: .1em;
}
.plakette.aus { color: var(--warte); }
.plakette.schlecht { color: var(--fehler); }
.plakette.blau { color: var(--blau-text); }
.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);
}
.reiter {
  display: flex;
  gap: var(--s1);
  border-bottom: 1px solid var(--rand);
  margin-bottom: var(--s5);
  overflow: visible;
  flex-wrap: wrap;
}
.reiter button {
  background: none;
  border: 0;
  border-radius: 0;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  white-space: nowrap;
}
.reiter button:hover { color: var(--tinte); }
.reiter button.aktiv {
  border-bottom-color: var(--blau);
  color: var(--tinte);
  font-weight: 600;
}
.reiter { position: relative; }
.reitermarke {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  background: var(--blau);
  pointer-events: none;
}
@media (forced-colors: none) {
  .reiter.mit-marke > button.aktiv { border-bottom-color: transparent; }
}
@media (forced-colors: active) {
  .reitermarke { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .reitermarke { transition: translate .2s ease-in-out, width .2s ease-in-out; }
}
.reiterzahl {
  color: var(--tinte-still);
  font-size: var(--t-klein);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  margin-left: .35rem;
}
.matrix .matrixgruppen th,
.matrix .matrixgruppen td {
  border-bottom: 0;
  padding-bottom: 0;
  background: none;
}
.matrix th.matrixgruppe {
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-plakette);
  font-weight: 400;
  color: var(--tinte-still);
  white-space: nowrap;
}
.matrix th.matrixgruppe.abschnitt { border-left: 1px solid var(--rand); }
.matrix caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--s3);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
#w-tafel-bestand > .karte, #w-tafel-freigaben > .karte {
  max-width: none;
}
#w-tafel-bestand, #w-tafel-firma { display: grid; gap: var(--s4); }
#w-tafel-bestand > .auffaelligstreifen { margin: 0; }
.karte.flach { padding: 0; overflow: hidden; }
.karte.flach > h2, .karte.flach > .unter { padding: 0 var(--s5); }
.karte.flach > h2 { padding-top: var(--s5); }
.karte.flach.offen { overflow: visible; }
.karte.offen > .suchleiste {
  background: none;
  border-bottom: 0;
  padding: 0 0 var(--s3);
}
.karte.offen > .suchleiste input[type="search"], .karte.offen > .suchleiste select {
  font-size: var(--t-klein);
  padding-top: .45rem;
  padding-bottom: .45rem;
}
.karte.offen > .anlegeblock, .karte.offen > .auswahlleiste {
  border: 0;
  border-radius: var(--rundung-klein);
  margin-bottom: var(--s3);
}
.karte.offen table.bestand th:first-child, .karte.offen table.bestand td:first-child { padding-left: var(--s3); }
.karte.offen table.bestand th:last-child, .karte.offen table.bestand td:last-child { padding-right: var(--s3); }

.suchleiste {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--s3) var(--s5);
  background: var(--flaeche-tief);
  border-bottom: 1px solid var(--rand-fein);
}
.suchleiste input[type="search"] { flex: 1 1 16rem; min-width: 10rem; }
.suchleiste select {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}
.suchleiste .weit { margin-left: auto; }
.anlegeknoepfe { display: flex; gap: var(--s2); flex-wrap: wrap; }
.anlegeknoepfe button[aria-expanded="true"] {
  background: var(--blau-flaeche);
  border-color: var(--blau);
  color: var(--blau-text);
  font-weight: 700;
}
.anlegeblock {
  padding: var(--s4) var(--s5) var(--s2);
  background: var(--flaeche-tief);
  border-bottom: 1px solid var(--rand-fein);
}
.anlegeform { display: grid; gap: var(--s2); }
.anlegeblock .reihe { flex-wrap: wrap; margin: 0; }
.anlegeblock .fussnote { margin: 0 0 var(--s2); max-width: 68ch; }
.anlegeblock input[type="text"] { flex: 1 1 20rem; min-width: 0; }
.anlegeblock select { min-width: 9rem; }
.auswahlleiste {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--s2) var(--s5);
  background: var(--blau-flaeche);
  border-bottom: 1px solid var(--rand-fein);
}
.auswahlleiste b { font-size: var(--t-klein); font-weight: 700; }
.auswahlleiste select { min-width: 11rem; }
.auswahlleiste .weit { margin-left: auto; }
table.bestand {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
table.bestand th {
  text-align: left;
  font-size: var(--t-mikro);
  font-weight: 700;
  color: var(--tinte-still);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rand);
}
table.bestand td {
  padding: var(--s3);
  border-bottom: 1px solid var(--rand-fein);
  vertical-align: middle;
}
table.bestand tbody tr:last-child td { border-bottom: 0; }
table.bestand th:first-child, table.bestand td:first-child { padding-left: var(--s5); }
table.bestand th:last-child, table.bestand td:last-child { padding-right: var(--s5); }
table.bestand tbody tr { transition: background-color .15s ease-out; }
table.bestand tbody tr:hover { background: var(--flaeche-hover); }
table.bestand tbody tr.gewaehlt { background: var(--blau-flaeche); }
table.bestand th.wahl { width: 2.75rem; }
table.bestand th.art { width: 6rem; }
table.bestand th.raum { width: 10rem; }
table.bestand th.umfang { width: 12.5rem; }
table.bestand th.stand { width: 7.5rem; }
table.bestand th.aktionen { width: 14.25rem; }
table.bestand td.rechts, table.bestand th.rechts { text-align: right; }
table.bestand td.rechts, table.bestand td.stand {
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.wastitel {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  font-size: var(--t-mittel);
}
.wastitel > :first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wastitel code { font-size: var(--t-klein); }
.wastitel .plakette { flex: none; }
.unterzeile-text {
  color: var(--tinte-still);
  font-size: var(--t-klein);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
table.bestand tr.unterzeile td.was { padding-left: var(--s6); }
table.bestand tr.unterzeile td.was > .wastitel::before {
  content: "";
  display: inline-block;
  width: var(--s3);
  height: 1px;
  margin-right: var(--s2);
  vertical-align: middle;
  background: var(--rand-stark);
}
.artmarke {
  display: inline-block;
  font-size: var(--t-plakette);
  font-stretch: var(--breit-eng);
  color: var(--tinte-still);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-fein);
  padding: 0 .4rem;
  white-space: nowrap;
}
.zeilenaktionen { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
table.bestand .zeilenaktionen .neben:not(.scharf),
table.matrix .zeilenaktionen .neben:not(.scharf) {
  color: var(--tinte-leise);
  border-color: transparent;
}
table.bestand tr:hover .zeilenaktionen .neben:not(.rot):not(.scharf),
table.bestand tr:focus-within .zeilenaktionen .neben:not(.rot):not(.scharf),
table.matrix tr:hover .zeilenaktionen .neben:not(.rot):not(.scharf),
table.matrix tr:focus-within .zeilenaktionen .neben:not(.rot):not(.scharf) {
  color: var(--blau-text);
  border-color: var(--rand-stark);
}
select.klein {
  width: 100%;
  max-width: 11rem;
  padding: .2rem 1.5rem .2rem .4rem;
  background-position: right .35rem center;
  background-size: .875rem .875rem;
  font-size: var(--t-klein);
}
#w-bestand {
  container-type: inline-size;
  overflow-x: auto;
}
#w-bestand .leer { padding: var(--s6) var(--s5); }
.plakette.laeuft { color: var(--blau-text); }
.matrixrahmen { overflow-x: auto; }
table.matrix { border-collapse: collapse; width: 100%; }
table.matrix th, table.matrix td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rand-fein);
}
table.matrix thead th {
  font-size: var(--t-mikro);
  font-weight: 700;
  color: var(--tinte-still);
  text-align: left;
  border-bottom: 1px solid var(--rand);
  vertical-align: bottom;
}
table.matrix th.rolle {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--t-mikro);
  padding: var(--s2) var(--s1);
  width: 2.2rem;
}
table.matrix th.rolle span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  max-height: 8rem;
  overflow: hidden;
}
table.matrix th:first-child, table.matrix td:first-child { padding-left: var(--s5); }
table.matrix th:last-child, table.matrix td:last-child { padding-right: var(--s5); }
table.matrix tbody tr:last-child td { border-bottom: 0; }
table.matrix tbody tr:hover { background: var(--flaeche-hover); }
table.matrix td.mitte { text-align: center; }
table.matrix .abschnitt { border-left: 1px solid var(--rand); }
table.matrix td.raumname { min-width: 13rem; }
table.matrix td.raumname > div:first-child { font-size: var(--t-mittel); }
table.matrix input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
table.matrix input[type="checkbox"]:disabled { opacity: .35; }
#w-tafel-freigaben .reihe { padding: var(--s4) var(--s5) 0; margin-bottom: var(--s2); }
#w-tafel-freigaben .reihe input[type="text"] { flex: 1 1 18rem; min-width: 0; }
#w-tafel-freigaben > .karte.flach > .fussnote { padding: 0 var(--s5) var(--s5); }
#w-tafel-freigaben .leer { padding: var(--s5); }
.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);
}
.jenummer {
  border-top: 1px solid var(--rand-fein);
  padding-top: var(--s2);
  margin-top: var(--s2);
}
.jenummertitel {
  margin: 0 0 var(--s1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1180px) {
  .schale { grid-template-columns: 13.5rem minmax(0, 1fr); }
  .modulkopf h2 { font-size: 1.125rem; }
  main { padding-left: var(--s4); padding-right: var(--s4); }
  .kopf { padding-left: var(--s4); padding-right: var(--s4); }
}
@media (max-width: 980px) {
  .spalten, .spalten.breit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .leiste .stufe { display: none; }
}
@media (max-width: 760px) {
  .schale {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .leiste {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    border-right: 0;
    border-bottom: 0;
    padding: var(--s2) var(--s3);
    padding-top: max(var(--s2), env(safe-area-inset-top));
  }
  .marke { padding: 0; margin-right: var(--s3); width: auto; }
  .markenzusatz { display: none; }
  .navlauf { display: none; }
  .navknopf { padding: var(--s2); }
  .navknopf span { display: none; }
  .leistenfuss { margin-left: auto; border-top: 0; padding: 0; display: flex; align-items: center; }
  .benutzerzeile { padding: 0; }
  .benutzer { display: none; }
  .kopf { position: static; padding: var(--s3) var(--s4); flex-wrap: wrap; row-gap: var(--s2); }
  .mandanthinweis { display: none; }
  main {
    padding: var(--s4) var(--s4)
      calc(var(--s5) + var(--leistenhoehe) + env(safe-area-inset-bottom));
  }
  .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; }
  .ueberspringen { transition: none; }
  button:active:not(:disabled) { translate: none; }
}
@media (prefers-contrast: more) {
  :root {
    --rand-fein: #aab3bf;
    --rand: #8b96a3;
    --tinte-still: #4d565f;
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) {
    --rand-fein: #6b7686;
    --rand: #8892a0;
    --tinte-still: #c3cad3;
  }
}
@media (prefers-contrast: more) {
  :root[data-darstellung="dunkel"] {
    --rand-fein: #6b7686;
    --rand: #8892a0;
    --tinte-still: #c3cad3;
  }
}

.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);
}
.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);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung);
  margin-bottom: var(--s5);
}
.tafelkern {
  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-mikro);
  font-weight: 600;
  color: var(--tinte-still);
  margin: 0 0 var(--s3);
}
.antwortzeit { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 var(--s1); }
.antwortzeit .wert {
  display: inline-block;
  min-height: 2.5rem;
  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 .wert:empty + .einheit { visibility: hidden; }
.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); }
.nzbetreff {
  font-weight: 700;
  font-size: var(--t-gross, 1.0625rem);
  margin-bottom: var(--s3);
}
.nzliste { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.nzliste li {
  position: relative;
  padding-left: var(--s4);
  margin-bottom: var(--s2);
}
.nzliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--rand-stark);
}
.beleg {
  font-size: var(--t-plakette);
  font-variant-numeric: tabular-nums;
  padding: 0 .3rem;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-fein);
  background: var(--flaeche-tief);
  color: var(--tinte-still);
  cursor: pointer;
}
.beleg:hover { border-color: var(--aktion); color: var(--aktion); }
.fortschritt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s2) 0;
}
.fbalken {
  position: relative;
  flex: 1;
  height: .4rem;
  border-radius: .2rem;
  background: var(--flaeche-tief);
  border: 1px solid var(--rand-fein);
  overflow: hidden;
}
.fwert {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: inherit;
  background: var(--aktion);
  transition: transform .3s ease-in-out;
  will-change: transform;
}
.fbalken.unbestimmt .fwert {
  transform: scaleX(.3);
  animation: fpendel 1.6s ease-in-out infinite alternate;
}
@keyframes fpendel {
  from { translate: 0; }
  to   { translate: 233%; }
}
@media (prefers-reduced-motion: reduce) {
  .fbalken.unbestimmt .fwert {
    animation: none;
    transform: scaleX(1);
    opacity: .4;
  }
  .fwert { transition: none; }
}
.ftext {
  font-size: var(--t-plakette);
  color: var(--tinte-still);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#nz-segmente { max-height: 22rem; }
#nz-segmente .segment {
  padding: .1rem var(--s2);
  border-radius: var(--rundung-fein);
  scroll-margin: var(--s5);
}
#nz-segmente .zeit { width: 6.5rem; }
#nz-segmente .segment.hervor {
  background: var(--blau-flaeche);
  transition: background .25s;
}
.promptformular {
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-klein);
  padding: var(--s3) var(--s4) var(--s4);
  margin: 0 0 var(--s4);
  min-width: 0;
}
.promptformular legend {
  font-size: var(--t-mikro);
  font-weight: 600;
  color: var(--tinte-still);
  padding: 0 var(--s2);
}
.promptformular .reihe { margin-bottom: var(--s3); }
.promptformular .reihe > label:first-child { width: 45%; }
.promptformular .feld { margin-bottom: var(--s3); }
.promptformular .haken {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin-top: var(--s1);
}
.promptformular .haken label {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-klein);
}
.promptformular .haken input { flex: none; }
.promptvorschau {
  border-top: 1px dashed var(--rand);
  padding-top: var(--s3);
  margin-top: var(--s2);
}
.promptvorschau .etikett {
  font-size: var(--t-mikro);
  font-weight: 600;
  color: var(--tinte-still);
}
.vorschautext {
  margin-top: var(--s2);
  font-size: var(--t-klein);
  color: var(--tinte-leise);
  line-height: 1.6;
  min-height: 1.6em;
}
.pformular { max-width: 46rem; }
.pformular .karte:not([hidden]) ~ .karte { margin-top: var(--s4); }

.pfrage + .pfrage {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rand-fein);
}
.pfragetitel {
  display: block;
  font-weight: 600;
  margin-bottom: var(--s1);
}
.pfragehinweis {
  color: var(--tinte-still);
  font-size: var(--t-klein);
  margin: 0 0 var(--s2);
  max-width: 68ch;
}
.pfrage textarea { width: 100%; }
.pfragefuss {
  color: var(--tinte-still);
  font-size: var(--t-mikro);
  margin: var(--s1) 0 0;
  min-height: 1.2em;
}
.pfrage.diktiert {
  background: var(--warte-flaeche);
  border: 1px solid var(--warte-rand);
  border-radius: var(--rundung-klein);
  padding: var(--s2) var(--s3);
  margin-left: calc(var(--s3) * -1);
  margin-right: calc(var(--s3) * -1);
}
.pfrage.diktiert .pfragefuss { color: var(--warte); }
.pfrage.frisch { background: var(--warte-flaeche); transition: background .8s ease; }

.pfuss {
  display: flex;
  align-items: center;
  gap: var(--s4);
  max-width: 46rem;
  margin-top: var(--s4);
}
.pfuss .fussnote { flex: 1; margin: 0; }
#p-interviewkarte { max-width: 46rem; }
#p-interviewkarte .knopfzeile { align-items: center; margin-bottom: 0; }
#p-interviewkarte #p-anrufstatus { flex: 1; margin: 0; }
#p-verlauf { margin-top: var(--s4); }
.uebzeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rand-fein);
}
.uebzeile:first-child { border-top: 0; }
.uebkern { flex: 1; min-width: 0; }
.uebhaupt { font-size: var(--t-klein); font-weight: 600; }
.uebneben {
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  overflow-wrap: anywhere;
}
.status {
  display: inline-block;
  font-size: var(--t-plakette);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--gut);
  white-space: nowrap;
  flex-shrink: 0;
}
.uebzeile .status { min-width: 7.5rem; }
.status::first-letter { text-transform: uppercase; }
.status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: .4em;
  vertical-align: .1em;
}
.status.aus { color: var(--warte); }
.meter { margin-bottom: var(--s4); }
.meterkopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-size: var(--t-klein); }
.meterkopf b { font-weight: 600; }
.meterwert { color: var(--tinte-leise); font-size: var(--t-mikro); font-variant-numeric: tabular-nums; }
.meterband {
  height: 6px;
  border-radius: 3px;
  background: var(--flaeche-tief);
  border: 1px solid var(--rand-fein);
  margin-top: var(--s2);
  overflow: hidden;
}
.meterband i { display: block; height: 100%; border-radius: 3px; background: var(--blau); }
.meterperiode { margin-top: var(--s2); font-size: var(--t-mikro); color: var(--tinte-still); }
.aswahl { cursor: pointer; }
.aswahl.gewaehlt {
  background: var(--blau-flaeche);
  box-shadow: inset 0 0 0 1px var(--blau);
}
.aswahl.gewaehlt .wstatus { color: var(--tinte-leise); }
.formkopf {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.formkopf h2 {
  font-size: var(--t-gross);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.008em;
}
.mbearbeiten.randlos { border-top: 0; padding-top: 0; margin-top: 0; }
.formknoepfe { align-items: center; margin-top: var(--s4); }
.asschritt { display: grid; gap: var(--s4); }
.bereich > .asschritt > .karte.asform { max-width: none; }
.zurueckknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  align-self: start;
  background: none;
  border: 0;
  border-radius: var(--rundung-klein);
  padding: var(--s1) var(--s2) var(--s1) 0;
  font: 400 var(--t-klein)/1.3 var(--schrift);
  color: var(--tinte-leise);
  cursor: pointer;
}
.zurueckknopf:hover { color: var(--blau-text); }
.zurueckknopf .ikone { width: 16px; height: 16px; }
.einstellspalte {
  display: grid;
  gap: var(--s4);
  min-width: 0;
  max-width: 44rem;
}
.einstellspalte .karte ~ .karte { margin-top: 0; }
.passwortpaar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s4);
}
.uploadstatus { flex: 1; margin: 0; }

.mobilnav, .mobilschleier, .mobilblatt { display: none; }
@media (max-width: 760px) {
  .mobilnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 32;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s1);
    background: var(--flaeche);
    border-top: 1px solid var(--rand-fein);
    padding: var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 4px var(--schatten-farbe-nah),
                0 -10px 24px var(--schatten-farbe-fern);
  }
  .mobilnav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: 0;
    border-radius: var(--rundung-klein);
    padding: var(--s2) var(--s1);
    font: 600 var(--t-plakette)/1.2 var(--schrift);
    color: var(--tinte-still);
    cursor: pointer;
    touch-action: manipulation;
  }
  .mobilnav button .ikone { width: 20px; height: 20px; }
  .mobilnav button { min-width: 0; padding-left: 2px; padding-right: 2px; }
  .mobilnav button span { letter-spacing: -.01em; }
  .mobilnav button span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobilnav button.aktiv { color: var(--blau-text); }
  .mobilnav button[aria-expanded="true"] {
    color: var(--blau-text);
    background: var(--blau-flaeche);
  }
  .mobilschleier {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--schleier);
  }
  .mobilblatt {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--leistenhoehe) + env(safe-area-inset-bottom));
    z-index: 31;
    background: var(--flaeche);
    border: 0;
    border-radius: var(--rundung) var(--rundung) 0 0;
    box-shadow: var(--schatten-2);
    padding: var(--s1) var(--s3) var(--s3);
    touch-action: none;
  }
  .blattgriff {
    width: 2.5rem;
    height: 4px;
    border-radius: 2px;
    background: var(--rand-stark);
    margin: var(--s2) auto var(--s2);
  }
  .blattteil .gruppentitel { margin: var(--s1) 0 var(--s2); padding: 0 var(--s2); }
  .blattknopf {
    display: flex;
    align-items: center;
    gap: var(--s3);
    width: 100%;
    background: none;
    border: 0;
    border-radius: var(--rundung-klein);
    padding: .7rem var(--s2);
    text-align: left;
    font: 400 var(--t-basis)/1.3 var(--schrift);
    letter-spacing: inherit;
    color: var(--tinte);
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
  }
  .blattknopf:hover { background: var(--flaeche-hover); }
  .blattknopf[aria-current="page"] {
    background: var(--blau-flaeche);
    color: var(--blau-text);
    font-weight: 600;
  }
  .blattknopf .ikone { color: var(--tinte-still); }
  .blattknopf[aria-current="page"] .ikone { color: inherit; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .mobilblatt {
    transition: translate .18s ease-in, opacity .18s ease-in, display .18s allow-discrete;
  }
  .mobilblatt[hidden] { translate: 0 14px; opacity: 0; }
  .mobilblatt:not([hidden]) {
    transition-duration: .22s;
    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  .mobilschleier { transition: opacity .18s ease-in, display .18s allow-discrete; }
  .mobilschleier[hidden] { opacity: 0; }
  .mobilschleier:not([hidden]) { transition-duration: .22s; transition-timing-function: ease-out; }
  @starting-style {
    .mobilblatt:not([hidden]) { translate: 0 14px; opacity: .4; }
    .mobilschleier:not([hidden]) { opacity: 0; }
  }
}
@media (max-width: 760px) {
  .mobilblatt::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 3rem;
    background: var(--flaeche);
  }
}
@media (max-width: 760px) {
  .passwortpaar { grid-template-columns: minmax(0, 1fr); }
  .reiter button { padding: var(--s3) var(--s2); font-size: var(--t-klein); }
  .leistenfuss > .navknopf[data-bereich-knopf="einstellungen"] { display: none; }
  #abmelden { display: none; }
  .mobilnav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobilnav button { padding: var(--s2) 2px; gap: 3px; }
  .mobilnav button span {
    font-size: .72rem;
    line-height: 1.15;
    text-align: center;
  }
  .mobilnav button.aktiv,
  .mobilnav [data-bereich-knopf][aria-current="page"] {
    color: var(--blau-text);
    background: var(--blau-flaeche);
  }
}
@container (max-width: 69rem) {
  table.bestand th.stand, table.bestand td.stand { display: none; }
  table.bestand th.aktionen { width: 11rem; }
}
@container (max-width: 55rem) {
  table.bestand th.umfang, table.bestand td.rechts { display: none; }
  table.bestand th.raum { width: 8.5rem; }
}
@container (max-width: 47.5rem) {
  table.bestand { min-width: 47.5rem; }
}
@media (max-width: 64rem) {
  .suchleiste input[type="search"] { flex-basis: 100%; }
  .karte.flach > h2, .karte.flach > .unter,
  .suchleiste, .anlegeblock, .auswahlleiste,
  table.bestand th:first-child, table.bestand td:first-child,
  table.bestand th:last-child, table.bestand td:last-child,
  table.matrix th:first-child, table.matrix td:first-child,
  table.matrix th:last-child, table.matrix td:last-child,
  #w-tafel-freigaben .reihe { padding-left: var(--s4); padding-right: var(--s4); }
}
.astafel { min-width: 0; }
.astafel .feld { max-width: 46rem; }
.astafel .feld select { max-width: 22rem; }
.astafel .feld input[type="number"] { max-width: 8rem; }
.astafel .reihe { margin-bottom: var(--s2); }
.astafel .reihe label { width: auto; }
.astafel .reihe input[type="checkbox"] { flex-shrink: 0; }
.astafel .reihe input[type="text"] { flex: 1; min-width: 0; }
.astafel .reihe select { flex: 1; min-width: 0; }
.astafel .promptformular { margin-bottom: 0; }
.zielliste {
  border-top: 1px solid var(--rand-fein);
  margin-top: var(--s4);
  padding-top: var(--s3);
}
.zielliste > .etikett { margin-bottom: var(--s1); }
.zielliste > .fussnote { margin: 0 0 var(--s3); }
.zielzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
}
.zielzeile input[type="text"] { flex: 1 1 7rem; min-width: 0; }
.zielzeile input[type="text"]:nth-child(3) { flex: 2 1 11rem; }
.zielaktiv {
  display: flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  color: var(--tinte-leise);
  font-size: var(--t-klein);
}

@media (max-width: 48rem) {
  .zielzeile { flex-direction: column; align-items: stretch; }
  .zielzeile input[type="text"],
  .zielzeile input[type="text"]:nth-child(3) { flex: none; width: 100%; }
  .zielaktiv { justify-content: flex-start; }
}
.bereich > .karte.cokopf {
  max-width: 74rem;
}
.cokopf {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rand-fein);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 var(--s4);
  margin-bottom: var(--s4);
}
.kopfaktionen .chatfeld select, .cokopf .chatfeld select {
  min-width: 0;
  max-width: 100%;
  width: auto;
  flex: 0 1 auto;
}
.costeuerung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.costeuerung button { margin-left: 0; }
.costand {
  color: var(--tinte-still);
  font-size: var(--t-klein);
  margin-left: auto;
}
.cotafel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  max-width: 74rem;
  margin-top: var(--s4);
}
.cotafel > .karte:not([hidden]) ~ .karte { margin-top: 0; }
.cospalte { align-self: start; }
.cospalte h3:first-of-type { margin-top: var(--s4); }
.colauf { display: flex; flex-direction: column; }
.coverlauf {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  display: grid;
  gap: var(--s2);
  align-content: start;
  height: min(calc(100dvh - 26rem), 34rem);
  padding-right: var(--s2);
}
.coverlauf:has(> .leer:only-child) { height: auto; }
.cosatz {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: .5rem;
  background: var(--flaeche-tief);
  line-height: 1.5;
}

.cointern { background: var(--blau-flaeche); }
.cower {
  font-weight: 600;
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  margin-right: var(--s1);
}
.covorlaeufig { opacity: .6; font-style: italic; }
.cokategorie {
  margin: 0;
  font-size: var(--t-mittel);
  font-weight: 600;
}
.conaechste { margin: 0 0 var(--s2); line-height: 1.5; }
.cohinweise {
  margin: 0;
  padding-left: var(--s4);
  color: var(--tinte-leise);
  font-size: var(--t-klein);
  display: grid;
  gap: var(--s1);
}
.coliste { margin: 0 0 var(--s3); padding-left: var(--s4); display: grid; gap: var(--s1); }
.cokontext { display: grid; gap: var(--s2); }
.costark { margin: 0; font-weight: 600; }
.cotreffer {
  padding: var(--s2) 0;
  border-top: 1px solid var(--rand-fein);
  font-size: var(--t-klein);
  line-height: 1.5;
}
.cotreffer:first-child { border-top: 0; padding-top: 0; }
.cotreffer p { margin: 0 0 var(--s1); }
.conotiz { max-width: 74rem; margin-top: var(--s4); }
.conotiztitel {
  margin: var(--s3) 0 var(--s1);
  font-size: var(--t-mikro);
  color: var(--tinte-still);
}
.cotickettext {
  width: 100%;
  margin-top: var(--s3);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-klein);
  line-height: 1.5;
}
.conotizfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
}
.conotizfuss .fussnote { margin: 0; }
@media (max-width: 62rem) {
  .cotafel { grid-template-columns: minmax(0, 1fr); }
  .coverlauf { height: min(calc(100dvh - 30rem), 24rem); }
  .costand { margin-left: 0; }
}
#vg-fehler { margin: 0 0 var(--s3); }
.vgliste {
  display: grid;
  gap: 0;
  max-width: 74rem;
  margin-top: 0;
  background: var(--flaeche);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung);
  overflow: hidden;
}
.vgkarte {
  background: var(--flaeche);
  border: 0;
  border-top: 1px solid var(--rand-fein);
  padding: var(--s4) var(--s5);
  display: grid;
  gap: var(--s2);
}
.vgkarte:first-child { border-top: 0; }
.vgliste:has(> .leer) { background: none; border: 0; }
.vgerledigt > * { opacity: .55; }
.vgzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3);
}
.vgart {
  font-size: var(--t-plakette);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--blau-flaeche);
  color: var(--blau-text);
}
.vgart[data-art="rueckruf"] { background: #fdf0d8; color: #8a5a00; }
.vgart[data-art="nachricht"] { background: var(--flaeche-tief); color: var(--tinte-leise); }
.vgbetreff { font-weight: 600; font-size: var(--t-mittel); margin: 0; }
.vgmeta { color: var(--tinte-still); font-size: var(--t-klein); margin: 0; }
.vgtext { margin: 0; line-height: 1.55; }
.vgpunkte {
  margin: 0;
  padding-left: var(--s4);
  display: grid;
  gap: var(--s1);
  font-size: var(--t-klein);
}
.vgfuss { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.navplakette {
  margin-left: auto;
  min-width: 1.35rem;
  padding: 0 .35rem;
  border-radius: .7rem;
  background: var(--aktion);
  color: #fff;
  font-size: var(--t-plakette);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.leiste .navplakette { background: var(--blau-flaeche); color: var(--blau-text); }
.mobilnav .navplakette {
  position: absolute;
  top: .15rem;
  left: 50%;
  margin-left: .4rem;
  min-width: 1.1rem;
  line-height: 1.1rem;
  padding: 0 .25rem;
}
.blattknopf .navplakette { margin-left: auto; }
@media (prefers-color-scheme: dark) {
  .vgart[data-art="rueckruf"] { background: #3a2c10; color: #e8c88a; }
}
.tmraster > .tmvoll { grid-column: 1 / -1; }
@media (min-width: 901px) { .koraster.tmraster { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.tmzeile.ruht { opacity: .6; }
.filterzeile {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 var(--s3);
}
.filterzeile input[type="search"] { flex: 1 1 12rem; min-width: 8rem; }
.filterzeile select { flex: 0 1 auto; max-width: 100%; }
.tmbearbeiten {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rand-fein);
  display: grid;
  gap: var(--s3);
}
.tmbearbeiten .feld { margin-bottom: 0; max-width: 22rem; }
.tmbearbeiten .unter { margin: 0; }
.tmbearbeiten .reihe { margin-bottom: 0; flex-wrap: wrap; }
.passwortzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
}
.passwortzeile input { flex: 1 1 14rem; max-width: 22rem; }
.passwortzeile .unter { flex-basis: 100%; margin: 0; }
.rollenmatrix { font-size: var(--t-klein); }
.rollenmatrix > summary {
  cursor: pointer;
  color: var(--blau-text);
  font-weight: 600;
  list-style: none;
  padding: var(--s1) 0;
}
.rollenmatrix > summary::-webkit-details-marker { display: none; }
.rollenmatrix > summary::before {
  content: "";
  display: inline-block;
  width: .45rem;
  height: .45rem;
  margin-right: var(--s2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-.1rem);
  transition: transform .15s ease-out;
}
.rollenmatrix[open] > summary::before { transform: rotate(45deg) translateY(-.15rem); }
table.rollen { width: 100%; border-collapse: collapse; margin-top: var(--s2); }
table.rollen th, table.rollen td {
  padding: var(--s2) var(--s2);
  border-bottom: 1px solid var(--rand-fein);
  text-align: center;
  font-weight: 400;
}
table.rollen th:first-child, table.rollen td:first-child { text-align: left; padding-left: 0; }
table.rollen thead th {
  font-size: var(--t-mikro);
  font-weight: 600;
  color: var(--tinte-still);
  vertical-align: bottom;
}
table.rollen tbody th { color: var(--tinte); }
.stufenpunkt {
  display: inline-block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  border: 1.5px solid var(--blau);
  vertical-align: -.05rem;
}
.stufenpunkt.v { background: var(--blau); }
.stufenpunkt.l { background: linear-gradient(90deg, var(--blau) 50%, transparent 50%); }
.rollenlegende {
  display: flex;
  gap: var(--s4);
  margin: var(--s3) 0 0;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.rollenlegende .stufenpunkt { margin-right: var(--s1); }
.msstand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  margin-bottom: var(--s3);
}
.msstand strong { font-weight: 600; }
.plakette.still { color: var(--tinte-leise); }
.msrechte {
  margin: calc(var(--s2) * -1) 0 var(--s4);
  padding-left: 1.1rem;
  font-size: var(--t-klein);
  color: var(--tinte-leise);
}
.msrechte li { margin: 0 0 var(--s1); }
.msrechte b { font-weight: 600; color: var(--tinte); font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.msknopf { display: inline-flex; align-items: center; gap: var(--s2); }
.msknopf svg { flex-shrink: 0; }
.mslink {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--rand-fein);
}
.mslink .unter { margin-top: 0; }
.mslink .reihe { margin-bottom: 0; }
#ms-graph .passwortzeile, #ms-sso .passwortzeile { margin: var(--s2) 0 var(--s4); }
#ms-graph > .feld { margin-top: var(--s4); margin-bottom: var(--s2); }
#ms-graph .okhinweis, #ms-graph .fehlerhinweis, #ms-sso .fehlerhinweis { margin-top: 0; }
@media (max-width: 760px) {
  .tmbearbeiten .feld { max-width: none; }
  .passwortzeile input { max-width: none; }
}

.inrest + .inrest { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rand-fein); }
.inrestkopf { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; }
.inrestkopf span { font-size: var(--t-klein); color: var(--tinte-still); font-variant-numeric: tabular-nums; }
.inrest .fussnote { margin: var(--s1) 0 0; }
.fwert.wenig { background: var(--warte); }
.fwert.knapp { background: var(--fehler); }
.ingruppe + .ingruppe { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rand-fein); }
.ingruppe h3 { margin: 0 0 var(--s3); }
.invergleich + .invergleich { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rand-fein); }
.invergleich span {
  font-size: var(--t-mikro);
  color: var(--tinte-still);
}
.invergleich p { margin: var(--s1) 0 0; font-size: var(--t-titel); line-height: 1.3; font-weight: 600; }
:root { --tinte-gesperrt: #626b76; --ebene-rand: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-darstellung="hell"]) { --tinte-gesperrt: #808a96; --ebene-rand: var(--rand); }
}
:root[data-darstellung="dunkel"] { --tinte-gesperrt: #808a96; --ebene-rand: var(--rand); }
.gruppentitel { display: flex; align-items: center; gap: var(--s2); }
.gruppenstand {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--t-plakette);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gut);
  white-space: nowrap;
}
.gruppenstand .ikone { width: 12px; height: 12px; opacity: 1; }
.navgruppe.gesperrt .gruppenstand { color: var(--tinte-gesperrt); }
.schloss { display: none; width: 13px; height: 13px; margin-left: auto; }
.navknopf.gesperrt, .blattknopf.gesperrt, .modulweg.gesperrt { color: var(--tinte-gesperrt); }
.navknopf.gesperrt .ikone { opacity: .7; }
.navknopf.gesperrt .schloss { display: inline; opacity: 1; }
.navknopf.gesperrt:hover { color: var(--tinte-leise); }
.navknopf.gesperrt[aria-current="page"] { background: var(--flaeche-tief); color: var(--tinte-leise); }
.leiste .navknopf.gesperrt { color: var(--leiste-still); }
.leiste .navknopf.gesperrt:hover { color: var(--leiste-leise); }
.leiste .navknopf.gesperrt[aria-current="page"] { background: var(--leiste-hover); color: var(--leiste-leise); box-shadow: none; }

.navknopf.gesperrt[aria-current="page"] .ikone { color: inherit; }
.leiste .gruppenstand { color: var(--leiste-gut); }
.leiste .navgruppe.gesperrt .gruppenstand { color: var(--leiste-still); }
.modulweg.gesperrt .ikone { color: var(--tinte-gesperrt); }
.mobilnav button.gesperrt { color: var(--tinte-gesperrt); }
.plakette.gesperrt, .plakette.gut { display: inline-flex; align-items: center; gap: 4px; }
.plakette.gesperrt::before, .plakette.gut::before { display: none; }
.plakette.gesperrt {
  background: var(--flaeche-tief);
  color: var(--tinte-leise);
  border: 1px solid var(--rand-fein);
  padding: .1rem .55rem .1rem .45rem;
}
.plakette .ikone { width: 12px; height: 12px; opacity: 1; }
.kopf .plakette { flex: none; }
.modul {
  background: var(--flaeche);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung);
  box-shadow: none;
  padding: var(--karte-polster);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}
.modulkopf { display: flex; align-items: center; gap: var(--s3); }
.modulkopf > .ikone {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: var(--blau-flaeche);
  color: var(--blau-text);
  opacity: 1;
  flex: none;
}
.modulkopf .plakette.gut {
  font-size: var(--t-mikro);
  font-weight: 600;
  padding: 0;
  background: none;
}
.modulkopf h2 { margin: 0; font-size: var(--t-basis); font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.modulkopf > div { flex: 1 1 auto; min-width: 0; }
.modulstand { font-size: var(--t-mikro); }
.modulkopf .luft { flex: 0 0 var(--s2); }
.modulkopf .plakette { flex: none; }
.modulstand { margin: 2px 0 0; font-size: var(--t-klein); color: var(--tinte-leise); }
.modulstand:empty { display: none; }
.moduloffen, .modulzu { display: flex; flex-direction: column; gap: var(--s3); flex: 1; margin-top: var(--s3); }
.kennzahlen { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.kennzahl {
  background: none;
  border: 0;
  border-radius: var(--rundung-klein);
  padding: var(--s2) 0;
  flex: 0 1 auto;
  text-align: left;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  min-width: 0;
}
button.kennzahl { cursor: pointer; transition: translate .15s ease-out; }
button.kennzahl:hover b { color: var(--blau-text); }
button.kennzahl:active { translate: 0 1px; }
.kennzahl b {
  display: block;
  font-size: var(--t-kennzahl);
  font-weight: 600;
  color: var(--tinte);
  line-height: 1.1;
  letter-spacing: -.02em;
  transition: color .15s ease-out;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kennzahl span { display: block; font-size: var(--t-mikro); color: var(--tinte-still); margin-top: var(--s1); line-height: 1.35; }
.kennzahl.warnt b { color: var(--warte); }
.modulwege { display: flex; flex-wrap: wrap; gap: var(--s1); margin: auto 0 0 calc(var(--s2) * -1); padding-top: var(--s3); border-top: 1px solid var(--rand-fein); }
.modulweg {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: .4rem .7rem .4rem .55rem;
  border: 0;
  border-radius: var(--rundung-klein);
  background: none;
  font: 600 var(--t-klein)/1.2 var(--schrift);
  letter-spacing: inherit;
  color: var(--blau-text);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s ease-out, background-color .15s ease-out;
}
.modulweg:hover { background: var(--blau-flaeche); }
.modulweg .ikone { width: 15px; height: 15px; color: var(--blau); opacity: 1; }
.modul.gesperrt { background: var(--flaeche-tief); box-shadow: none; border-color: var(--rand); }
.modul.gesperrt .modulkopf > .ikone { color: var(--tinte-gesperrt); }
.modul.gesperrt h2 { color: var(--tinte-leise); }
.modultext { margin: 0; font-size: var(--t-klein); color: var(--tinte-leise); max-width: 48ch; }
.gesperrtzeile { display: flex; align-items: center; gap: var(--s3); margin-top: auto; flex-wrap: wrap; }
.gesperrtzeile .luft { flex: 1; }
.karte.modulweg-zu, .heutezahl.modulweg-zu { display: none; }
.startkarte:not([hidden]) + .heute { margin-top: var(--s5); }
.heute {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--flaeche);
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung);
  margin-bottom: var(--s5);
  overflow: hidden;
}
.heute:has(> [hidden]) { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.heutezahl {
  display: block;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  padding: var(--s4) var(--s5);
  min-width: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  transition: background-color .15s ease-out;
}
.heutezahl:not([hidden]) ~ .heutezahl:not([hidden]) { border-left: 1px solid var(--rand-fein); }
.heutezahl:hover { background: var(--flaeche-hover); }
.heutezahl:hover > b { color: var(--blau-text); }
.heutezahl > b {
  display: block;
  font-size: var(--t-kennzahl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  transition: color .15s ease-out;
}
.heutezahl > b small { font-size: var(--t-basis); font-weight: 500; color: var(--tinte-still); letter-spacing: 0; }
.heutezahl > span { display: block; font-size: var(--t-mikro); color: var(--tinte-still); margin-top: var(--s1); }
.heutezahl > .zusatz { color: var(--tinte-leise); min-height: 1.3em; }
.heutezahl > .zusatz.warnt { color: var(--warte); font-weight: 600; }
.heutezahl > .zusatz:empty { display: none; }
.heutezahl > .meterband { display: block; height: 4px; margin-top: var(--s3); border-radius: 2px; }
.heutezahl > .meterband i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--blau); }
.spalten.tagesblatt { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.spalten.tagesblatt > .spalte > .karte { max-width: none; }
.uebkopf { display: flex; align-items: baseline; gap: var(--s3); margin: 0 0 var(--s3); }
.uebkopf h2 { margin: 0; font-size: var(--t-gross); font-weight: 600; letter-spacing: -.012em; }
.uebkopf .zaehler { color: var(--tinte-still); font-size: var(--t-klein); font-variant-numeric: tabular-nums; }
.uebkopf .zaehler:empty { display: none; }
.uebkopf .rechts { margin-left: auto; }
.uebkopf .modulweg .ikone { width: 14px; height: 14px; }
.uebeintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rand-fein);
}
.uebeintrag:first-child { border-top: 0; }
.uebeintrag:has(> .plakette) { grid-template-columns: 5.5rem auto minmax(0, 1fr) auto; }
.uebwann { font-size: var(--t-mikro); color: var(--tinte-still); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4.5rem; }
.uebeintrag:has(> .plakette) .uebwann { min-width: 0; }
.uebwas { min-width: 0; }
.uebwas > b { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uebwas > span { display: block; font-size: var(--t-mikro); color: var(--tinte-still); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uebart {
  display: inline-block;
  font-size: var(--t-plakette);
  font-weight: 600;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--blau-flaeche);
  color: var(--blau-text);
  margin-right: var(--s2);
  vertical-align: .08em;
}
.uebart[data-art="rueckruf"] { background: var(--warte-flaeche); color: var(--warte); }
.uebtun { display: flex; gap: var(--s1); align-items: center; }
.uebdauer { font-size: var(--t-mikro); color: var(--tinte-still); font-variant-numeric: tabular-nums; }
#ueb-aufgaben-liste > .leer, #ueb-anrufe > .leer, #ueb-assistenten > .leer, #ueb-wissen > .leer { margin: 0; }
.assistentzeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: var(--s2) 0;
  border-top: 1px solid var(--rand-fein);
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  border-radius: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  font-size: var(--t-klein);
}
.assistentzeile:first-child { border-top: 0; }
button.assistentzeile { cursor: pointer; }
button.assistentzeile:hover b { color: var(--blau-text); }
.assistentzeile .punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--rand-stark); box-shadow: none; }
.assistentzeile .punkt.gut { background: var(--gut); }
.assistentzeile .punkt.warte { background: var(--warte); }
.assistentzeile b { font-weight: 600; }
.assistentzeile > span { margin-left: auto; color: var(--tinte-still); font-size: var(--t-mikro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: var(--s1) 0; }
.mini b { display: block; font-size: 1.375rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mini span { display: block; font-size: var(--t-mikro); color: var(--tinte-still); }
.uebhinweis {
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--warte-flaeche);
  border: 1px solid var(--warte-rand);
  border-radius: var(--rundung-klein);
  font-size: var(--t-klein);
}
.uebhinweis b { color: var(--warte); font-weight: 600; }
.uebhinweis > span { color: var(--tinte-leise); flex: 1 1 12rem; min-width: 0; }
.uebhinweis .leise { margin-left: auto; }
@media (max-width: 1080px) {
  .spalten.tagesblatt { grid-template-columns: minmax(0, 1fr); }
  .heute { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heutezahl:nth-child(3) { border-left: 0; }
  .heutezahl:nth-child(n+3) { border-top: 1px solid var(--rand-fein); }
}
.lizenz {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}
.lizenztext h2 { margin: 0 0 var(--s2); font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; }
.lizenzwas { margin: 0; font-size: var(--t-mittel); color: var(--tinte-leise); max-width: 56ch; }
.lizenzbereiche { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); }
.lizenzbereiche li { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-klein); }
.lizenzbereiche .ikone { color: var(--blau); opacity: 1; flex: none; }
.lizenzbereiche small { color: var(--tinte-still); font-size: var(--t-mikro); }
.lizenzdazu { margin: var(--s4) 0 0; font-size: var(--t-klein); color: var(--tinte-leise); }
.vertrieb {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--blau-flaeche);
  border-radius: var(--rundung);
}
.vertrieb p { margin: 0; font-size: var(--t-klein); }
.vertrieb .kontakt { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-weight: 600; }
.vertrieb .kontakt .ikone { color: var(--blau); opacity: 1; }
.vertrieb .knoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); }
.vertrieb .bestaetigung { display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--gut); }
.vertrieb .bestaetigung .ikone { width: 15px; height: 15px; opacity: 1; }
.vorschau { background: var(--flaeche-tief); border-radius: var(--rundung); padding: var(--s5); }
.vorschau h3 { margin: 0 0 var(--s4); font-size: var(--t-mikro); font-weight: 600; color: var(--tinte-still); }
.vorschaugespraech { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.vorschaugespraech li {
  max-width: 88%;
  padding: var(--s2) var(--s3);
  border-radius: 12px;
  font-size: var(--t-klein);
  line-height: 1.45;
  background: var(--flaeche);
}
.vorschaugespraech li b { display: block; font-size: var(--t-plakette); color: var(--tinte-still); margin-bottom: 2px; }
.vorschaugespraech li.haus { margin-left: auto; background: var(--blau-flaeche); }
.vorschaugespraech li.haus b { color: var(--blau-text); }
.hinweisfenster {
  border: 1px solid var(--rand);
  border-radius: 10px;
  overflow: hidden;
  background: var(--flaeche);
  box-shadow: var(--schatten-2);
}
.hf-kopf {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  background: var(--flaeche-tief);
  border-bottom: 1px solid var(--rand-fein);
  font-size: var(--t-plakette);
  font-weight: 600;
  color: var(--tinte-leise);
}
.hf-kopf .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gut); }
.hf-mitte { padding: var(--s3) var(--s4); }
.hf-mitte b { display: block; font-size: var(--t-basis); }
.hf-mitte span { display: block; font-size: var(--t-mikro); color: var(--tinte-leise); }
.hf-fuss { padding: var(--s2) var(--s4) var(--s3); display: grid; gap: 4px; }
.hf-fuss div { display: flex; justify-content: space-between; font-size: var(--t-mikro); }
.hf-fuss div span:last-child { font-weight: 600; color: var(--warte); }
.hf-fuss div span.hf-gut { color: var(--gut); }
.hf-fuss div span.hf-leise { color: var(--tinte-leise); font-weight: 400; }
.vertragzeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-top: 1px solid var(--rand-fein);
}
.vertragzeile:first-child { border-top: 0; padding-top: 0; }
.vertragzeile > div { flex: 1; min-width: 0; }
.vertragzeile b { display: block; font-size: var(--t-klein); }
.vertragzeile small { color: var(--tinte-still); font-size: var(--t-mikro); }
@media (max-width: 760px) {
  .kopf .plakette { display: none; }
  .lizenz { grid-template-columns: minmax(0, 1fr); }
  .heute { grid-template-columns: minmax(0, 1fr); }
  .heutezahl:not([hidden]) ~ .heutezahl:not([hidden]) { border-left: 0; border-top: 1px solid var(--rand-fein); }
  .uebeintrag { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  .uebeintrag:has(> .plakette) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .uebwann { grid-column: 1 / -1; min-width: 0; }
  .uebeintrag .plakette { align-self: start; margin-top: .2rem; }
  .uebwas > b, .uebwas > span { white-space: normal; }
}

.bereichkopf:has(> #w-kennzahlen) { max-width: none; }
#w-kennzahlen {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung);
  overflow: hidden;
}
#w-kennzahlen:empty { display: none; }
#w-kennzahlen .kennzahl { padding: var(--s3) var(--s5); border-radius: 0; }
#w-kennzahlen .kennzahl + .kennzahl { border-left: 1px solid var(--rand-fein); }
#w-kennzahlen .kennzahl { display: flex; flex-direction: column; }
#w-kennzahlen .kennzahl span { order: -1; margin: 0 0 var(--s1); font-size: var(--t-klein); color: var(--tinte-leise); }
#w-kennzahlen .kennzahl b { font-size: 1.375rem; }
.spalte > .karte:not([hidden]) ~ .karte { margin-top: 0; }
.heutezahl:not([hidden]):not(.modulweg-zu) { display: flex; flex-direction: column; }
.heutezahl > span:first-of-type { order: -1; margin: 0 0 var(--s1); font-size: var(--t-klein); color: var(--tinte-leise); }
.heutezahl > .zusatz { margin-top: var(--s1); }
.astafel .feld {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 36rem);
  column-gap: var(--s5);
  row-gap: var(--s1);
  align-items: start;
  max-width: 54rem;
}
.astafel .promptformular .reihe {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 36rem);
  column-gap: var(--s5);
  align-items: center;
  max-width: 54rem;
}
.astafel .promptformular .reihe > label:first-child { width: auto; font-size: var(--t-mikro); font-weight: 600; color: var(--tinte); }
.astafel .promptformular .reihe + .reihe, .astafel .promptformular .feld + .reihe {
  padding-top: var(--s3);
  border-top: 1px solid var(--rand-fein);
}
.astafel .feld > span:first-child { grid-column: 1; margin: .55rem 0 0; }
.astafel .feld > span:first-child .feldhinweis { display: block; margin-top: var(--s1); font-weight: 400; }
.astafel .feld > :not(span:first-child) { grid-column: 2; }
.astafel .feld + .feld, .astafel .reihe + .feld {
  padding-top: var(--s4);
  border-top: 1px solid var(--rand-fein);
}
.astafel .feld + .reihe:has(> [data-anhoeren]) {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) auto minmax(0, 1fr);
  column-gap: var(--s5);
  align-items: center;
  max-width: 54rem;
  margin-top: calc(var(--s3) * -1);
}
.astafel .feld + .reihe:has(> [data-anhoeren]) > [data-anhoeren] { grid-column: 2; }
.astafel .feld + .reihe:has(> [data-anhoeren]) > :not([data-anhoeren]) { grid-column: 3; }
.chatsitzungen > details > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--tinte-leise);
  padding: var(--s2) 0;
}
.chatsitzungen > details > summary::-webkit-details-marker { display: none; }
.chatsitzungen > details > summary::after {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-left: var(--s2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.15rem);
  transition: transform .15s ease-out;
}
.chatsitzungen > details:not([open]) > summary::after { transform: rotate(-45deg); }
@media (max-width: 980px) {
  .chatflaeche:has(> .chatsitzungen:not([hidden]) .chatsitzung) { grid-template-columns: minmax(0, 1fr); }
  .chatflaeche:has(> .chatsitzungen:not([hidden]) .chatsitzung) .chatfeld select { max-width: none; }
  .chatsitzungsliste { max-height: 11rem; }
}
.suchknopf {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: 2.25rem;
  padding: 0 var(--s2) 0 var(--s3);
  margin: 0 0 var(--s1);
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  background: var(--flaeche);
  color: var(--tinte-still);
  font: 400 var(--t-klein)/1.2 var(--schrift);
  text-align: left;
}
.suchknopf:hover:not(:disabled) { border-color: var(--rand-stark); color: var(--tinte-leise); }
.suchknopf .ikone { width: 16px; height: 16px; }
.suchknopf span { flex: 1; }
.suchknopf kbd, .palettensuche kbd {
  font: 500 .6875rem/1.4 var(--schrift);
  padding: 0 .35rem;
  border: 1px solid var(--rand-fein);
  border-radius: var(--rundung-fein);
  background: var(--flaeche-tief);
  color: var(--tinte-still);
}
.palette {
  width: min(34rem, calc(100vw - 2rem));
  margin: 14vh auto auto;
  padding: 0;
  border: 1px solid var(--ebene-rand);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--tinte);
  box-shadow: var(--schatten-2);
}
.palette::backdrop { background: var(--schleier); }
.palettensuche {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rand-fein);
}
.palettensuche .ikone { color: var(--tinte-still); }
.palettensuche input[type="text"],
.palettensuche input[type="text"]:hover,
.palettensuche input[type="text"]:focus {
  border: 0;
  padding: .35rem 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--t-basis);
}
.palettensuche input:focus-visible { outline: none; }
.palettensuche:has(input:focus-visible) { box-shadow: inset 0 -2px 0 var(--blau); }
.palettenliste { list-style: none; margin: 0; padding: var(--s1); max-height: 22rem; overflow-y: auto; }
.palettenzeile {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 2.5rem;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--rundung-klein);
  background: none;
  color: var(--tinte);
  font: 500 var(--t-klein)/1.3 var(--schrift);
  text-align: left;
}
.palettenzeile .ikone { color: var(--tinte-still); }
.palettenzeile .schloss { display: inline; margin-left: 0; color: var(--tinte-gesperrt); }
.palettenzeile small { margin-left: auto; font-size: var(--t-mikro); color: var(--tinte-still); font-weight: 400; }
.palettenzeile:hover { background: var(--flaeche-hover); }
[role="option"][aria-selected="true"] > .palettenzeile { background: var(--blau-flaeche); box-shadow: inset 0 0 0 1px var(--blau); }
[role="option"][aria-selected="true"] > .palettenzeile .ikone:first-child { color: var(--blau); }
.palettenleer { padding: var(--s3); font-size: var(--t-klein); color: var(--tinte-still); }
#seitentitel:focus { outline: none; }
@media print {
  .schale { display: block; height: auto; }
  .buehne { height: auto; margin: 0; overflow: visible; box-shadow: none; border-radius: 0; }
  .leiste, .mobilnav, .suchknopf, .kopfmandant { display: none; }
  .kopf { position: static; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .chatflaeche:has(> .chatsitzungen:not([hidden])) .karte.chatkarte { height: min(calc(100dvh - 15rem), 60rem); }
}
@media (max-width: 980px) {
  .astafel .feld, .astafel .promptformular .reihe { display: block; }
  .astafel .feld > span:first-child { margin: 0 0 var(--s2); }
  .astafel .promptformular .reihe > label:first-child { display: block; margin: 0 0 var(--s2); }
  .astafel .feld + .reihe:has(> [data-anhoeren]) { display: flex; margin-top: 0; }
}
@media (max-width: 760px) {
  .schale { height: auto; min-height: 100dvh; }
  .buehne {
    height: auto;
    margin: 0;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }
  .suchknopf { display: none; }
  .karte.offen { padding-left: 0; padding-right: 0; }
  #w-kennzahlen { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #w-kennzahlen .kennzahl + .kennzahl { border-left: 0; }
  #w-kennzahlen .kennzahl:nth-child(even) { border-left: 1px solid var(--rand-fein); }
  #w-kennzahlen .kennzahl:nth-child(n+3) { border-top: 1px solid var(--rand-fein); }
  select, textarea, input[type="text"], input[type="password"], input[type="number"],
  input[type="search"], input[type="email"], input[type="tel"], input[type="url"],
  .kopfmandant select, select.klein, .chatkopf .chatfeld select,
  .kopfaktionen .chatfeld select,
  .karte.offen > .suchleiste input[type="search"], .karte.offen > .suchleiste select,
  .chatsuche input[type="search"] { font-size: 1rem; }
}
.kopffeedback {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: .4rem .75rem;
  background: none;
  color: var(--tinte-leise);
}
.kopffeedback .ikone { width: 18px; height: 18px; }
.kopffeedback:hover { background: var(--flaeche-hover); color: var(--tinte); }
.fbdialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--ebene-rand);
  border-radius: 14px;
  background: var(--flaeche);
  color: var(--tinte);
  box-shadow: var(--schatten-2);
}
.fbdialog::backdrop { background: var(--schleier); }
.fbdialog form { display: flex; flex-direction: column; max-height: inherit; }
.fbkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s3) 0 var(--s5);
}
.fbkopf h2 { margin: 0; font-size: var(--t-gross); font-weight: 600; letter-spacing: -.01em; }
.fbzu {
  display: grid;
  place-items: center;
  width: 2.25rem;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: var(--tinte-still);
}
.fbzu:hover { background: var(--flaeche-hover); color: var(--tinte); }
.fbzu .ikone { width: 18px; height: 18px; }
.fbrumpf {
  display: grid;
  gap: var(--s4);
  padding: var(--s3) var(--s5) var(--s1);
  overflow-y: auto;
}

.fbart {
  display: inline-flex;
  justify-self: start;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: var(--flaeche-tief);
}
.fbart label { position: relative; cursor: pointer; }
.fbart input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.fbart span {
  display: block;
  padding: .4rem .85rem;
  border-radius: 8px;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--tinte-leise);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.fbart input:checked + span {
  background: var(--flaeche);
  color: var(--tinte);
  box-shadow: 0 1px 2px var(--schatten-farbe-nah), inset 0 0 0 1px var(--rand-fein);
}
.fbart input:focus-visible + span { outline: 2px solid var(--blau); outline-offset: 1px; }
@supports selector(:has(a)) {
  .fbart { display: inline-grid; grid-template-columns: 1fr 1fr; position: relative; }
  .fbart span { text-align: center; }
  .fbart::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 4px);
    border-radius: 8px;
    background: var(--flaeche);
    box-shadow: 0 1px 2px var(--schatten-farbe-nah), inset 0 0 0 1px var(--rand-fein);
  }
  .fbart:has(label:nth-child(2) input:checked)::before { translate: calc(100% + 2px) 0; }
  .fbart input:checked + span { background: none; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .fbart::before { transition: translate .2s ease-in-out; }
}
.fbfeld { display: grid; gap: var(--s2); }
.fbfeld > span { font-size: var(--t-klein); font-weight: 600; }
.fbfeld textarea { min-height: 7rem; width: 100%; }
.fbfehler { margin: calc(-1 * var(--s2)) 0 0; font-size: var(--t-mikro); font-weight: 600; color: var(--fehler); }
.fbmit, .cmelden {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin: 0;
  font-size: var(--t-klein);
  color: var(--tinte);
  cursor: pointer;
}
.fbmit { padding: var(--s2) var(--s3); border-radius: var(--rundung-klein); background: var(--flaeche-tief); }
.fbmit input, .cmelden input { margin: .15rem 0 0; flex-shrink: 0; }
.fbmit small, .cmelden small { display: block; margin-top: 1px; font-size: var(--t-mikro); color: var(--tinte-still); }
.cmelden b { font-weight: 600; }
.fbanhang { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.fbanhang .leise { display: inline-flex; align-items: center; gap: var(--s2); padding-left: .5rem; }
.fbanhang .leise .ikone { width: 18px; height: 18px; }
.fbbildhinweis { font-size: var(--t-mikro); color: var(--tinte-still); }
.fbbild {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--rand);
  border-radius: var(--rundung-klein);
  font-size: var(--t-mikro);
  color: var(--tinte-leise);
}
.fbbild img {
  width: 44px;
  height: 30px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid var(--rand-fein);
}
.fbbild span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbbildweg {
  display: grid;
  place-items: center;
  width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  border-radius: 50%;
  background: none;
  color: var(--tinte-still);
}
.fbbildweg:hover { background: var(--flaeche-hover); color: var(--tinte); }
.fbbildweg .ikone { width: 14px; height: 14px; }
.fbkontext summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
  font-size: var(--t-mikro);
  color: var(--tinte-still);
  cursor: pointer;
}
.fbkontext summary::-webkit-details-marker { display: none; }
.fbkontext summary::after {
  content: "";
  width: .35rem;
  height: .35rem;
  margin-left: var(--s2);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1rem);
  transition: transform .15s ease-out;
}
.fbkontext:not([open]) summary::after { transform: rotate(-45deg); }
.fbkontext summary:hover { color: var(--tinte-leise); }
.fbkontext dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--s1) var(--s4);
  margin: var(--s2) 0 0;
  font-size: var(--t-mikro);
}
.fbkontext dt { color: var(--tinte-still); }
.fbkontext dd { margin: 0; color: var(--tinte-leise); overflow-wrap: anywhere; }
.fbfuss { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s4) var(--s5) var(--s5); }
.fbfuss .haupt[aria-busy="true"] { cursor: progress; }
.fbdanke {
  display: grid;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s6) var(--s5) var(--s1);
  text-align: center;
}
.fbhaken {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--s1);
  border-radius: 50%;
  background: var(--gut-flaeche);
  color: var(--gut);
}
.fbhaken .ikone { width: 22px; height: 22px; }
.fbdanke b { font-size: var(--t-basis); font-weight: 600; }
.fbdanke p { margin: 0; font-size: var(--t-klein); color: var(--tinte-leise); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .palette, .fbdialog {
    transform-origin: top center;
    transition: opacity .16s ease-in, scale .16s ease-in, translate .16s ease-in,
                display .16s allow-discrete, overlay .16s allow-discrete;
  }
  .palette:not([open]), .fbdialog:not([open]) { opacity: 0; scale: .95; }
  .palette[open], .fbdialog[open] { transition-duration: .2s; transition-timing-function: ease-out; }
  .palette::backdrop, .fbdialog::backdrop {
    opacity: 0;
    transition: opacity .16s ease-in, display .16s allow-discrete, overlay .16s allow-discrete;
  }
  .palette[open]::backdrop, .fbdialog[open]::backdrop {
    opacity: 1;
    transition-duration: .2s;
    transition-timing-function: ease-out;
  }
  @starting-style {
    .palette[open], .fbdialog[open] { opacity: 0; scale: .95; }
    .palette[open]::backdrop, .fbdialog[open]::backdrop { opacity: 0; }
  }
}
@media (max-width: 760px) {
  .kopffeedback { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: 0; }
  .kopffeedback span { display: none; }
  .fbbildhinweis { display: none; }
  .fbdialog {
    width: 100vw;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  .fbkopf { padding-left: var(--s4); }
  .fbrumpf { padding-left: var(--s4); padding-right: var(--s4); }
  .fbfuss { padding: var(--s4) var(--s4) calc(var(--s4) + env(safe-area-inset-bottom)); }
  .fbfuss button { flex: 1; min-height: 2.75rem; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .fbdialog:not([open]) { scale: none; translate: 0 24px; }
  .fbdialog[open] { transition-duration: .22s; transition-timing-function: cubic-bezier(.2, .7, .3, 1); }
  @starting-style {
    .fbdialog[open] { scale: none; translate: 0 24px; }
  }
}

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    details { interpolate-size: allow-keywords; }
    details::details-content {
      block-size: 0;
      overflow: clip;
      overflow-clip-margin: 4px;
      transition: block-size .16s ease-in, content-visibility .16s allow-discrete;
    }
    details[open]::details-content {
      block-size: auto;
      transition-duration: .2s;
      transition-timing-function: ease-out;
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .puls { animation: puls .6s ease-out; }
}
@keyframes puls {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gut) 45%, transparent); }
  to   { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gut) 0%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .gestaffelt > * { animation: zeile-ein .2s ease-out backwards; }
  .gestaffelt > :nth-child(2) { animation-delay: 30ms; }
  .gestaffelt > :nth-child(3) { animation-delay: 60ms; }
  .gestaffelt > :nth-child(4) { animation-delay: 90ms; }
  .gestaffelt > :nth-child(5) { animation-delay: 120ms; }
  .gestaffelt > :nth-child(6) { animation-delay: 150ms; }
  .gestaffelt > :nth-child(7) { animation-delay: 180ms; }
  .gestaffelt > :nth-child(8) { animation-delay: 210ms; }
  .gestaffelt > :nth-child(9) { animation-delay: 240ms; }
  .gestaffelt > :nth-child(n+10) { animation-delay: 270ms; }
}
@keyframes zeile-ein { from { opacity: 0; translate: 0 4px; } }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation-duration: .16s; animation-timing-function: ease-in; }
  ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease-out; }
  :root.im-uebergang .bereich.aktiv { animation-duration: 0s; }
}
@media (prefers-reduced-motion: no-preference) {
  .rundknopf, .caktion, .czitat-kopieren, .chatstil, .fbzu,
  .chatsitzung-umbenennen, .chatsitzung-loeschen, .chatanhang-weg {
    transition: background-color .15s ease-out, color .15s ease-out, scale .1s ease-out;
  }
  .rundknopf:active:not(:disabled), .caktion:active:not(:disabled),
  .czitat-kopieren:active:not(:disabled), .chatstil:active:not(:disabled),
  .fbzu:active:not(:disabled), .chatsitzung-umbenennen:active:not(:disabled),
  .chatsitzung-loeschen:active:not(:disabled), .chatanhang-weg:active:not(:disabled) {
    translate: none;
    scale: .92;
  }
}