/* [project]/src/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --gruen: #005e36;
  --gruen-dunkel: #004327;
  --gruen-tief: #00301c;
  --gruen-hell: #0a7a48;
  --gruen-licht: #e8f1ec;
  --gruen-linie: #c3ddcd;
  --grund: #f5f6f5;
  --karte: #fff;
  --karte-still: #fafbfa;
  --linie: #e2e5e2;
  --linie-stark: #cdd2ce;
  --text: #14201a;
  --text-mittel: #4a5a51;
  --text-leise: #75857b;
  --text-invers: #fff;
  --warn: #a86400;
  --warn-flaeche: #fdf3e2;
  --warn-linie: #edd8ae;
  --fehler: #b3261e;
  --fehler-flaeche: #fdecea;
  --fehler-linie: #f2c4c0;
  --info: #1c5b8f;
  --info-flaeche: #eaf2f9;
  --info-linie: #c2d8e9;
  --ok: #1d6b41;
  --ok-flaeche: #e8f1ec;
  --ok-linie: #bcd9c8;
  --radius: 10px;
  --radius-klein: 7px;
  --radius-gross: 16px;
  --schatten: 0 1px 2px #14201a0f, 0 1px 3px #14201a0a;
  --schatten-hoch: 0 4px 16px #14201a1a, 0 1px 3px #14201a0f;
  --seitenleiste: 288px;
  --kopf: 70px;
  --schrift: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --schrift-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  -webkit-font-smoothing: antialiased;
  font-size: 17.5px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  letter-spacing: -.011em;
  color: var(--text);
  margin: 0;
  font-weight: 600;
}

h1 {
  font-size: 25.5px;
  line-height: 1.25;
}

h2 {
  font-size: 19px;
}

h3 {
  font-size: 17.5px;
}

p {
  margin: 0;
}

a {
  color: var(--gruen);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--gruen-hell);
  outline-offset: 2px;
  border-radius: 4px;
}

.shell {
  grid-template-columns: var(--seitenleiste) minmax(0, 1fr);
  background: var(--gruen-dunkel);
  min-height: 100vh;
  display: grid;
}

.sidebar {
  background: var(--gruen-dunkel);
  height: 100vh;
  color: var(--text-invers);
  overscroll-behavior: contain;
  flex-direction: column;
  align-self: start;
  display: flex;
  position: sticky;
  top: 0;
  overflow-y: auto;
}

.sidebar__brand {
  border-bottom: 1px solid #ffffff1a;
  padding: 23.5px 21px 19px;
}

.sidebar__logo {
  width: 168px;
  height: auto;
  display: block;
}

.sidebar__product {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff9;
  margin-top: 10px;
  font-size: 14.5px;
}

.sidebar__nav {
  flex-direction: column;
  flex: 1;
  gap: 2px;
  padding: 14px 12px 23.5px;
  display: flex;
}

.sidebar__group {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff6b;
  margin: 14px 0 4px;
  padding: 0 9.5px;
  font-size: 13.5px;
  font-weight: 600;
}

.navlink {
  border-radius: var(--radius-klein);
  color: #ffffffd1;
  align-items: center;
  gap: 10px;
  padding: 8.5px 10.5px;
  font-size: 17px;
  line-height: 1.3;
  transition: background .12s, color .12s;
  display: flex;
}

.navlink:hover {
  color: #fff;
  background: #ffffff14;
  text-decoration: none;
}

.navlink--aktiv {
  color: #fff;
  background: #ffffff26;
  font-weight: 500;
}

.navlink__icon {
  opacity: .85;
  flex: none;
  width: 21px;
  height: 21px;
}

.navlink__label {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.navlink__count {
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: #ffffff2e;
  border-radius: 20px;
  flex: none;
  min-width: 24px;
  padding: 0 7px;
  font-size: 14.5px;
  font-weight: 600;
}

.navlink__count--warn {
  color: #23180a;
  background: #d98c1a;
}

.sidebar__foot {
  color: #ffffff9e;
  border-top: 1px solid #ffffff1a;
  padding: 14px 16.5px 19px;
  font-size: 15px;
}

.sidebar__user {
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  display: flex;
}

.avatar {
  color: #fff;
  background: #ffffff29;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 14.5px;
  font-weight: 600;
  display: grid;
}

.sidebar__username {
  color: #fff;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.25;
}

.sidebar__role {
  color: #ffffff8c;
  font-size: 15px;
}

.main {
  background: var(--grund);
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.topbar {
  z-index: 20;
  min-height: var(--kopf);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
  background: #ffffffe6;
  align-items: center;
  gap: 16px;
  padding: 12px 26px;
  display: flex;
  position: sticky;
  top: 0;
}

.topbar__titel {
  min-width: 0;
}

.topbar__sub {
  color: var(--text-leise);
  margin-top: 1px;
  font-size: 15.5px;
}

.topbar__rechts {
  align-items: center;
  gap: 10px;
  margin-left: auto;
  display: flex;
}

.inhalt {
  flex: 1;
  width: 100%;
  max-width: 1500px;
  padding: 22px 26px 56px;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.karte__kopf {
  border-bottom: 1px solid var(--linie);
  align-items: flex-start;
  gap: 12px;
  padding: 16.5px 19px;
  display: flex;
}

.karte__kopf > div:first-child {
  flex: 1;
  min-width: 0;
}

.karte__titel {
  font-size: 17.5px;
  font-weight: 600;
}

.karte__unter {
  color: var(--text-leise);
  margin-top: 2px;
  font-size: 15.5px;
}

.karte__body {
  padding: 19px;
}

.karte__body--eng {
  padding: 12px 19px;
}

.karte__fuss {
  border-top: 1px solid var(--linie);
  background: var(--karte-still);
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--text-mittel);
  padding: 13px 19px;
  font-size: 15.5px;
}

.gitter {
  gap: 16px;
  display: grid;
}

.gitter--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.gitter--3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.gitter--4 {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.spalten {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

@media (max-width: 1080px) {
  .spalten {
    grid-template-columns: minmax(0, 1fr);
  }
}

.stapel {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.reihe {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.kennzahl {
  padding: 16.5px 19px;
}

.kennzahl__label {
  color: var(--text-leise);
  align-items: center;
  gap: 6px;
  font-size: 15px;
  display: flex;
}

.kennzahl__wert {
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
  font-size: 31px;
  font-weight: 600;
  line-height: 1.1;
}

.kennzahl__wert--warn {
  color: var(--warn);
}

.kennzahl__wert--gruen {
  color: var(--gruen);
}

.kennzahl__zusatz {
  color: var(--text-leise);
  margin-top: 3px;
  font-size: 15px;
}

.tag {
  border: 1px solid var(--linie-stark);
  background: var(--karte-still);
  color: var(--text-mittel);
  white-space: nowrap;
  border-radius: 20px;
  align-items: center;
  gap: 5px;
  padding: 2.5px 9.5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  display: inline-flex;
}

.tag--gruen {
  background: var(--ok-flaeche);
  border-color: var(--ok-linie);
  color: var(--ok);
}

.tag--warn {
  background: var(--warn-flaeche);
  border-color: var(--warn-linie);
  color: var(--warn);
}

.tag--fehler {
  background: var(--fehler-flaeche);
  border-color: var(--fehler-linie);
  color: var(--fehler);
}

.tag--info {
  background: var(--info-flaeche);
  border-color: var(--info-linie);
  color: var(--info);
}

.tag--voll {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
}

.tag__punkt {
  background: currentColor;
  border-radius: 50%;
  flex: none;
  width: 6px;
  height: 6px;
}

.ki {
  background: var(--info-flaeche);
  border: 1px solid var(--info-linie);
  color: var(--info);
  letter-spacing: .02em;
  white-space: nowrap;
  border-radius: 20px;
  align-items: center;
  gap: 4px;
  padding: 1px 8.5px 1px 6px;
  font-size: 14.5px;
  font-weight: 600;
  display: inline-flex;
}

.tabelle-wrap {
  overflow-x: auto;
}

table.tabelle {
  border-collapse: collapse;
  width: 100%;
  font-size: 16px;
}

table.tabelle th {
  z-index: 1;
  text-align: left;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-leise);
  background: var(--karte-still);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
  padding: 10.5px 14px;
  font-size: 15px;
  font-weight: 600;
  position: sticky;
  top: 0;
}

table.tabelle td {
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  padding: 12px 14px;
}

table.tabelle tbody tr:last-child td {
  border-bottom: none;
}

table.tabelle tbody tr:hover {
  background: var(--karte-still);
}

.td-zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.td-eng {
  white-space: nowrap;
}

.mono {
  font-family: var(--schrift-mono);
  font-size: 15.5px;
}

.stark {
  font-weight: 600;
}

.leise {
  color: var(--text-leise);
}

.mittel {
  color: var(--text-mittel);
}

.klein {
  font-size: 15.5px;
}

.winzig {
  font-size: 15px;
}

.btn {
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  background: var(--karte);
  color: var(--text);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 8.5px 16.5px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  transition: background .12s, border-color .12s;
  display: inline-flex;
}

.btn:hover:not(:disabled) {
  background: var(--karte-still);
  border-color: var(--text-leise);
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn--haupt {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
}

.btn--haupt:hover:not(:disabled) {
  background: var(--gruen-dunkel);
  border-color: var(--gruen-dunkel);
}

.btn--gefahr {
  color: var(--fehler);
  border-color: var(--fehler-linie);
}

.btn--gefahr:hover:not(:disabled) {
  background: var(--fehler-flaeche);
  border-color: var(--fehler);
}

.btn--klein {
  padding: 4.5px 10.5px;
  font-size: 15px;
}

.btn--flach {
  background: none;
  border-color: #0000;
}

.btn--flach:hover:not(:disabled) {
  background: var(--karte-still);
  border-color: var(--linie);
}

label.feld {
  display: block;
}

.feld__label {
  color: var(--text-mittel);
  margin-bottom: 5px;
  font-size: 15.5px;
  font-weight: 500;
  display: block;
}

.feld__hilfe {
  color: var(--text-leise);
  margin-top: 5px;
  font-size: 15px;
  display: block;
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="time"], input[type="date"], input[type="search"], select, textarea {
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  background: var(--karte);
  width: 100%;
  color: var(--text);
  padding: 8.5px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
}

textarea {
  resize: vertical;
  min-height: 99px;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gruen);
  outline: none;
  box-shadow: 0 0 0 3px #005e361f;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gruen);
  cursor: pointer;
}

.schalter {
  cursor: pointer;
  align-items: flex-start;
  gap: 9px;
  padding: 8.5px 0;
  display: flex;
}

.schalter input {
  flex: none;
  margin-top: 2px;
}

.schalter__text {
  min-width: 0;
}

.schalter__label {
  font-size: 16px;
}

.schalter__hilfe {
  color: var(--text-leise);
  margin-top: 1px;
  font-size: 15px;
}

.hinweis {
  border: 1px solid var(--info-linie);
  border-radius: var(--radius-klein);
  background: var(--info-flaeche);
  color: var(--info);
  gap: 10px;
  padding: 13px 15.5px;
  font-size: 15.5px;
  line-height: 1.5;
  display: flex;
}

.hinweis--warn {
  border-color: var(--warn-linie);
  background: var(--warn-flaeche);
  color: var(--warn);
}

.hinweis--fehler {
  border-color: var(--fehler-linie);
  background: var(--fehler-flaeche);
  color: var(--fehler);
}

.hinweis--gruen {
  border-color: var(--ok-linie);
  background: var(--ok-flaeche);
  color: var(--ok);
}

.hinweis--still {
  border-color: var(--linie);
  background: var(--karte-still);
  color: var(--text-mittel);
}

.hinweis__icon {
  flex: none;
  margin-top: 1px;
}

.hinweis strong {
  font-weight: 600;
}

.leerzustand {
  text-align: center;
  color: var(--text-leise);
  padding: 40px 23.5px;
}

.leerzustand__titel {
  color: var(--text-mittel);
  font-size: 17.5px;
  font-weight: 500;
}

.leerzustand__text {
  margin-top: 4px;
  max-width: 420px;
  margin-inline: auto;
  font-size: 15.5px;
}

.kette {
  gap: 8px;
  padding-bottom: 4px;
  display: flex;
  overflow-x: auto;
}

.kette__glied {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--karte-still);
  flex: 1 0 150px;
  padding: 13px 14px;
  position: relative;
}

.kette__glied--aktiv {
  border-color: var(--gruen-linie);
  background: var(--gruen-licht);
}

.kette__nr {
  letter-spacing: .06em;
  color: var(--text-leise);
  font-size: 13.5px;
  font-weight: 600;
}

.kette__titel {
  margin-top: 3px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

.kette__wert {
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
}

.kette__modus {
  margin-top: 7px;
}

.verlauf {
  flex-direction: column;
  display: flex;
}

.verlauf__punkt {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 14px;
  display: grid;
  position: relative;
}

.verlauf__punkt:not(:last-child):before {
  content: "";
  background: var(--linie);
  width: 1px;
  position: absolute;
  top: 20px;
  bottom: 0;
  left: 10px;
}

.verlauf__marke {
  z-index: 1;
  border: 1px solid var(--linie-stark);
  background: var(--karte);
  width: 26px;
  height: 26px;
  color: var(--text-leise);
  border-radius: 50%;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  display: grid;
}

.verlauf__marke--ki {
  border-color: var(--info-linie);
  background: var(--info-flaeche);
  color: var(--info);
}

.verlauf__marke--mensch {
  border-color: var(--gruen-linie);
  background: var(--gruen-licht);
  color: var(--gruen);
}

.verlauf__kopf {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.verlauf__titel {
  font-size: 16px;
  font-weight: 500;
}

.verlauf__zeit {
  color: var(--text-leise);
  font-size: 15px;
}

.verlauf__text {
  color: var(--text-mittel);
  margin-top: 2px;
  font-size: 15.5px;
}

.verlauf__regel {
  color: var(--text-leise);
  font-size: 15px;
  font-family: var(--schrift-mono);
  margin-top: 4px;
}

.login {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  display: grid;
}

@media (max-width: 860px) {
  .login {
    grid-template-columns: minmax(0, 1fr);
  }

  .login__seite {
    display: none;
  }
}

.login__seite {
  background: var(--gruen);
  color: #fff;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px;
  display: flex;
}

.login__logo {
  width: 220px;
  height: auto;
}

.login__claim {
  letter-spacing: -.015em;
  max-width: 20ch;
  font-size: 27.5px;
  font-weight: 600;
  line-height: 1.35;
}

.login__punkte {
  color: #ffffffd1;
  flex-direction: column;
  gap: 9px;
  font-size: 17px;
  display: flex;
}

.login__punkt {
  gap: 9px;
  display: flex;
}

.login__form {
  place-items: center;
  padding: 40px 24px;
  display: grid;
}

.login__box {
  width: 100%;
  max-width: 366px;
}

.tabs {
  border-bottom: 1px solid var(--linie);
  gap: 2px;
  margin-bottom: 18px;
  display: flex;
  overflow-x: auto;
}

.tab {
  color: var(--text-mittel);
  white-space: nowrap;
  border-bottom: 2px solid #0000;
  padding: 9.5px 15.5px;
  font-size: 16px;
  font-weight: 500;
}

.tab:hover {
  color: var(--text);
  text-decoration: none;
}

.tab--aktiv {
  border-bottom-color: var(--gruen);
  color: var(--gruen);
}

.trenner {
  background: var(--linie);
  border: 0;
  height: 1px;
  margin: 16px 0;
}

.balken {
  background: var(--linie);
  border-radius: 20px;
  height: 6px;
  overflow: hidden;
}

.balken__fuell {
  background: var(--gruen);
  border-radius: 20px;
  height: 100%;
}

.balken__fuell--warn {
  background: #d98c1a;
}

.def {
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: 6px 14px;
  font-size: 16px;
  display: grid;
}

.def dt {
  color: var(--text-leise);
}

.def dd {
  margin: 0;
}

.abschnitt-titel {
  align-items: baseline;
  gap: 10px;
  margin: 26px 0 12px;
  display: flex;
}

.abschnitt-titel:first-child {
  margin-top: 0;
}

.abschnitt-titel h2 {
  font-size: 19px;
}

.abschnitt-titel p {
  color: var(--text-leise);
  font-size: 15.5px;
}

.nur-lesend {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-klein);
  background: var(--karte-still);
  color: var(--text-leise);
  padding: 10.5px 15.5px;
  font-size: 15.5px;
}

@media print {
  .sidebar, .topbar__rechts {
    display: none;
  }

  .shell {
    grid-template-columns: 1fr;
  }
}

.schritt {
  border-bottom: 1px solid var(--linie);
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 20px;
  padding: 19px;
  display: grid;
}

.schritt:last-child {
  border-bottom: none;
}

.schritt--aus {
  background: var(--karte-still);
}

@media (max-width: 900px) {
  .schritt {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

.schritt__kopf {
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  display: flex;
}

.schritt__titel {
  font-size: 17px;
  font-weight: 600;
}

.schritt__prozess {
  letter-spacing: .04em;
  color: var(--text-leise);
  border: 1px solid var(--linie-stark);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: 14.5px;
  font-weight: 600;
}

.schritt__was {
  color: var(--text-mittel);
  max-width: 68ch;
  margin-top: 5px;
  font-size: 15.5px;
}

.schritt__heute {
  color: var(--text-leise);
  max-width: 68ch;
  margin-top: 6px;
  font-size: 15px;
}

.schritt__heute b {
  color: var(--text-mittel);
  font-weight: 600;
}

.regler {
  flex-direction: column;
  gap: 7px;
  display: flex;
}

.regler__bahn {
  border: 1px solid var(--linie-stark);
  background: var(--karte-still);
  border-radius: 22px;
  gap: 3px;
  padding: 3.5px;
  display: grid;
}

.regler__stufe {
  appearance: none;
  color: var(--text-mittel);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: 0;
  border-radius: 20px;
  padding: 8px 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: background .14s, color .14s;
}

.regler__stufe:hover:not(:disabled) {
  color: var(--text);
  background: #005e3612;
}

.regler__stufe:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.regler__stufe--gewaehlt {
  background: var(--karte);
  color: var(--gruen);
  box-shadow: var(--schatten);
  font-weight: 600;
}

.regler__stufe--gewaehlt.regler__stufe--aus {
  color: var(--text-mittel);
}

.regler__stufe--gewaehlt.regler__stufe--automatisch {
  background: var(--gruen);
  color: #fff;
  box-shadow: none;
}

.regler__hinweis {
  color: var(--text-leise);
  min-height: 2.4em;
  font-size: 15px;
}

.regler__gespeichert {
  color: var(--gruen);
  font-size: 14.5px;
  font-weight: 500;
}

.schritt__optionen {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--karte-still);
  gap: 4px;
  margin-top: 12px;
  padding: 14px 15.5px;
  display: grid;
}

.schritt__optionen--aus {
  opacity: .5;
  pointer-events: none;
}

.option-zahl {
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  display: flex;
}

.option-zahl__label {
  flex: 1;
  min-width: 180px;
  font-size: 16px;
}

.option-zahl__eingabe {
  align-items: center;
  gap: 6px;
  display: flex;
}

.option-zahl__eingabe input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 110px;
}

.option-zahl__einheit {
  color: var(--text-leise);
  white-space: nowrap;
  font-size: 15px;
}

.option-zahl__hilfe, .option-wahl__hilfe {
  color: var(--text-leise);
  flex-basis: 100%;
  margin-top: -2px;
  font-size: 15px;
}

.option-wahl {
  padding: 6px 0;
}

.option-wahl__label {
  margin-bottom: 4px;
  font-size: 16px;
  display: block;
}

.warnzeile {
  border-radius: var(--radius-klein);
  border: 1px solid var(--warn-linie);
  background: var(--warn-flaeche);
  color: var(--warn);
  gap: 8px;
  margin-top: 10px;
  padding: 10.5px 13px;
  font-size: 15px;
  line-height: 1.45;
  display: flex;
}

.blockzeile {
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark);
  background: var(--karte-still);
  color: var(--text-mittel);
  gap: 8px;
  margin-top: 10px;
  padding: 10.5px 13px;
  font-size: 15px;
  display: flex;
}

.abhaengig {
  color: var(--text-leise);
  margin-top: 7px;
  font-size: 15px;
}

.abhaengig b {
  color: var(--text-mittel);
  font-weight: 600;
}

.uebersicht {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.uebersicht__zelle {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--karte);
  flex: 1 0 128px;
  padding: 12px 14px;
}

.uebersicht__zahl {
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
}

.uebersicht__text {
  color: var(--text-leise);
  margin-top: 2px;
  font-size: 15px;
}

.klappe__kopf {
  align-items: flex-start;
  gap: 12px;
  padding: 14px 19px;
  display: flex;
}

.klappe__kopf:has( + .klappe__inhalt) {
  border-bottom: 1px solid var(--linie);
}

.klappe__schalter {
  min-width: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-klein);
  background: none;
  border: 0;
  flex: 1;
  align-items: flex-start;
  gap: 9px;
  padding: 2.5px 0;
  display: flex;
}

.klappe__schalter:hover .karte__titel {
  color: var(--gruen);
}

.klappe__pfeil {
  color: var(--text-leise);
  flex: none;
  margin-top: 2px;
  transition: transform .15s;
}

.klappe__pfeil--offen {
  transform: rotate(90deg);
}

.klappe__rechts {
  flex-wrap: wrap;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  padding-top: 2px;
  display: flex;
}

.klappe__inhalt {
  padding: 19px;
}

.karte--gedimmt {
  background: var(--karte-still);
}

.karte--gedimmt .karte__titel {
  color: var(--text-mittel);
}

.zurueck {
  border: 1px dashed var(--linie-stark);
  border-radius: var(--radius-klein);
  background: var(--karte-still);
  color: var(--text-mittel);
  gap: 9px;
  padding: 12px 14px;
  font-size: 15.5px;
  display: flex;
}

.laden {
  gap: 12px;
  display: grid;
}

.laden__balken {
  background: var(--linie);
  border-radius: 5px;
  height: 12px;
  animation: 1.6s ease-in-out infinite laden-puls;
}

.laden__karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  gap: 11px;
  padding: 19px;
  display: grid;
}

.laden__kachel {
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--karte);
  height: 74px;
  animation: 1.6s ease-in-out infinite laden-puls;
}

@keyframes laden-puls {
  0%, 100% {
    opacity: .7;
  }

  50% {
    opacity: .35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .laden__balken, .laden__kachel {
    animation: none;
  }
}

.dialog__grund {
  z-index: 60;
  background: #14201a6b;
  justify-content: center;
  align-items: center;
  padding: 28px;
  animation: .14s ease-out dialog-auf;
  display: flex;
  position: fixed;
  inset: 0;
}

.dialog {
  background: var(--karte);
  border-radius: var(--radius-gross);
  width: min(1180px, 100%);
  max-height: 100%;
  box-shadow: var(--schatten-hoch);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.dialog__kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--karte-still);
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  display: flex;
}

.dialog__titel {
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
}

.dialog__unter {
  color: var(--text-leise);
  margin-top: 2px;
  font-size: 15px;
}

.dialog__zu {
  appearance: none;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  background: var(--karte);
  color: var(--text-mittel);
  cursor: pointer;
  flex: none;
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
}

.dialog__zu:hover {
  background: var(--grund);
  color: var(--text);
}

.dialog__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.dialog__spalten {
  grid-template-columns: minmax(0, 1fr) 400px;
  display: grid;
}

.dialog__links {
  min-width: 0;
  padding: 20px;
}

.dialog__rechts {
  border-left: 1px solid var(--linie);
  background: var(--karte-still);
  align-content: start;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  display: grid;
}

.dialog__einstufung {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--karte);
  padding: 15px;
}

.dialog__mail {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-mittel);
  font-size: 17px;
  line-height: 1.65;
}

.dialog__anhang {
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--karte-still);
  padding: 11px 13px;
}

.dialog__mehr {
  border-top: 1px solid var(--linie);
  margin-top: 18px;
  padding-top: 14px;
}

.dialog__mehr > summary {
  cursor: pointer;
  color: var(--text-mittel);
  font-size: 15.5px;
  font-weight: 600;
}

.dialog__mehr > summary:hover {
  color: var(--gruen);
}

@keyframes dialog-auf {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 1020px) {
  .dialog__spalten {
    grid-template-columns: minmax(0, 1fr);
  }

  .dialog__rechts {
    border-left: none;
    border-top: 1px solid var(--linie);
  }
}

.verweis-knopf {
  appearance: none;
  font: inherit;
  color: var(--gruen);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

.verweis-knopf:hover {
  text-decoration: underline;
}

.zeile-klickbar {
  cursor: pointer;
}

.zeile-klickbar:focus-visible {
  outline: 2px solid var(--gruen);
  outline-offset: -2px;
}

.hinweis__griff {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 0;
  font-weight: 500;
  display: flex;
}

.hinweis__griff:hover {
  text-decoration: underline;
}

.hinweis__pfeil {
  opacity: .7;
  flex: none;
  transition: transform .15s;
}

.hinweis__pfeil--auf {
  transform: rotate(90deg);
}

.hinweis--zu {
  padding-top: 10px;
  padding-bottom: 10px;
}

.schritt-kasten {
  border: 1px solid var(--gruen-linie);
  border-radius: var(--radius-klein);
  background: var(--gruen-licht);
  justify-items: start;
  gap: 8px;
  margin-top: 14px;
  padding: 13px 15px;
  display: grid;
}

.schritt-kasten__titel {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gruen);
  font-size: 14px;
  font-weight: 600;
}

.kopfdaten {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 22px;
  display: grid;
}

.kopfdaten__feld {
  min-width: 0;
}

.kopfdaten__label {
  color: var(--text-leise);
  font-size: 14.5px;
}

.kopfdaten__wert {
  overflow-wrap: anywhere;
  margin-top: 2px;
  font-size: 16px;
}

@media (min-width: 1081px) {
  .spalten__neben {
    position: sticky;
    top: 14px;
  }
}

.assistent__knopf {
  z-index: 55;
  background: var(--gruen);
  color: var(--text-invers);
  box-shadow: var(--schatten-hoch);
  cursor: pointer;
  border: 0;
  border-radius: 30px;
  align-items: center;
  gap: 9px;
  padding: 13px 19px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  position: fixed;
  bottom: 22px;
  right: 22px;
}

.assistent__knopf:hover {
  background: var(--gruen-dunkel);
}

.assistent {
  z-index: 55;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  width: min(470px, 100vw - 44px);
  height: min(660px, 100vh - 44px);
  box-shadow: var(--schatten-hoch);
  flex-direction: column;
  display: flex;
  position: fixed;
  bottom: 22px;
  right: 22px;
  overflow: hidden;
}

.assistent__kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--gruen);
  color: var(--text-invers);
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  display: flex;
}

.assistent__kopf .dialog__zu {
  color: #fff;
  background: #ffffff24;
  border-color: #ffffff4d;
}

.assistent__kopf .dialog__zu:hover {
  color: #fff;
  background: #ffffff3d;
}

.assistent__titel {
  font-size: 17px;
  font-weight: 600;
}

.assistent__unter {
  color: #fffc;
  margin-top: 1px;
  font-size: 14.5px;
}

.assistent__verlauf {
  flex: 1;
  align-content: start;
  gap: 11px;
  min-height: 0;
  padding: 16px;
  display: grid;
  overflow-y: auto;
}

.assistent__start {
  gap: 13px;
  display: grid;
}

.assistent__beispiele {
  gap: 7px;
  display: grid;
}

.assistent__beispiel {
  appearance: none;
  text-align: left;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-klein);
  background: var(--karte-still);
  font: inherit;
  color: var(--text-mittel);
  cursor: pointer;
  padding: 10px 12px;
  font-size: 15.5px;
}

.assistent__beispiel:hover {
  border-color: var(--gruen);
  color: var(--gruen);
}

.assistent__blase {
  border-radius: var(--radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 92%;
  padding: 11px 13px;
  font-size: 16px;
  line-height: 1.55;
}

.assistent__blase--ich {
  background: var(--gruen);
  color: var(--text-invers);
  justify-self: end;
}

.assistent__blase--es {
  background: var(--karte-still);
  border: 1px solid var(--linie);
  color: var(--text);
  justify-self: start;
}

.assistent__quelle {
  border-top: 1px solid var(--linie);
  color: var(--text-leise);
  margin-top: 8px;
  padding-top: 7px;
  font-size: 14px;
}

.assistent__eingabe {
  border-top: 1px solid var(--linie);
  align-items: flex-end;
  gap: 9px;
  padding: 12px 14px 0;
  display: flex;
}

.assistent__eingabe textarea {
  resize: none;
  flex: 1;
  min-height: 0;
}

.assistent__fuss {
  color: var(--text-leise);
  padding: 8px 14px 12px;
  font-size: 14px;
}

@media (max-width: 620px) {
  .assistent {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    bottom: 10px;
    right: 10px;
  }
}

table.tabelle {
  min-width: 620px;
}

.hb-text {
  max-width: 88ch;
  color: var(--text-mittel);
  font-size: 17px;
  line-height: 1.7;
}

.hb-text + .hb-text {
  margin-top: 12px;
}

.hb-text b, .hb-liste b {
  color: var(--text);
  font-weight: 600;
}

.hb-liste {
  max-width: 88ch;
  color: var(--text-mittel);
  margin: 0;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.7;
}

.hb-liste > li + li {
  margin-top: 9px;
}

.hb-liste + .hb-text, .hb-text + .hb-liste, .hb-liste + .hinweis, .hb-text + .hinweis, .tabelle-wrap + .hb-text {
  margin-top: 14px;
}

.hb-def {
  gap: 11px 18px;
  max-width: 96ch;
  font-size: 17px;
  line-height: 1.65;
}

.hb-def dt {
  color: var(--text);
  font-weight: 600;
}

.hb-def dd {
  color: var(--text-mittel);
}

.hb-zahlen {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
  display: grid;
}

.hb-zahl__wert {
  letter-spacing: -.02em;
  font-size: 27px;
  font-weight: 600;
}

.hb-zahl__label {
  color: var(--text-leise);
  margin-top: 2px;
  font-size: 15px;
}

/*# sourceMappingURL=src_app_globals_0p2ml0n.css.map*/