*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--farbe-grund);
  color: var(--farbe-text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  line-height: var(--zeilenhoehe-text);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeilenhoehe-eng);
  letter-spacing: var(--laufweite-eng);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprunglink {
  position: absolute;
  left: var(--abstand-2);
  top: -10rem;
  z-index: 50;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  border-radius: var(--radius-klein);
}

.sprunglink:focus {
  top: var(--abstand-2);
}


.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--abstand-1);
  min-height: var(--ziel-min);
  min-width: var(--ziel-min);
  padding: 0 var(--abstand-3);
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-rund);
  background: transparent;
  color: var(--farbe-text);
  font-weight: var(--gewicht-mittel);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer), border-color var(--dauer), color var(--dauer);
}

.knopf:hover {
  background: var(--farbe-flaeche-3);
}

.knopf:disabled {
  opacity: 0.55;
  cursor: default;
}

.knopf--primaer {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}

.knopf--primaer:hover {
  background: var(--farbe-text);
  border-color: var(--farbe-text);
  color: var(--farbe-grund);
}

.knopf--gefahr {
  border-color: var(--farbe-warnung);
  color: var(--farbe-warnung);
}

.knopf--gefahr:hover {
  background: var(--farbe-warnung-flaeche);
}

.knopf--leise {
  border-color: transparent;
}

.knopf--klein {
  font-size: var(--groesse-klein);
  padding: 0 var(--abstand-2);
}

.knopf--breit {
  width: 100%;
}

.knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  align-items: center;
}

.eingabe,
.auswahlfeld {
  width: 100%;
  min-height: var(--ziel-min);
  padding: 0 var(--abstand-2);
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.eingabe--mehrzeilig {
  padding: var(--abstand-1) var(--abstand-2);
  min-height: 6rem;
  resize: vertical;
}

.eingabe[aria-invalid="true"],
.auswahlfeld[aria-invalid="true"] {
  border-color: var(--farbe-warnung);
}

.auswahlfeld {
  width: auto;
  max-width: 100%;
  padding-right: var(--abstand-4);
}

.auswahlfeld--klein {
  font-size: var(--groesse-klein);
}

.eingabe::placeholder {
  color: var(--farbe-text-3);
}

.farbwahl {
  width: var(--ziel-min);
  height: var(--ziel-min);
  padding: var(--abstand-haar);
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
  cursor: pointer;
}

.datei {
  min-height: var(--ziel-min);
  max-width: 100%;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-0);
  min-width: 0;
}

.feld__label,
.kopf__label {
  font-size: var(--groesse-klein);
  font-weight: var(--gewicht-mittel);
  color: var(--farbe-text-2);
}

.feld__hilfe {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
}

.feld__fehler {
  font-size: var(--groesse-klein);
  color: var(--farbe-warnung);
  font-weight: var(--gewicht-mittel);
}

.auswahl {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--ziel-min);
  cursor: pointer;
}

.auswahl input,
.haken__feld {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  accent-color: var(--farbe-markierung);
  cursor: pointer;
}

.gruppe {
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand-2) var(--abstand-3) var(--abstand-3);
  margin: 0;
  display: grid;
  gap: var(--abstand-2);
  min-width: 0;
}

.gruppe__titel {
  padding: 0 var(--abstand-1);
  font-size: var(--groesse-klein);
  font-weight: var(--gewicht-mittel);
  color: var(--farbe-text-2);
}

.warnung {
  padding: var(--abstand-2) var(--abstand-3);
  border-left: var(--fokus-breite) solid var(--farbe-warnung);
  background: var(--farbe-warnung-flaeche);
  border-radius: var(--radius-klein);
}

.stapel {
  display: grid;
  gap: var(--abstand-3);
}


.seite-login {
  display: grid;
  place-items: center;
  padding: var(--rand-seite);
}

.login {
  width: 100%;
  max-width: 24rem;
}

.login__karte {
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-gross);
  padding: var(--abstand-5) var(--abstand-4);
}

.login__marke {
  font-size: var(--groesse-klein);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-text-2);
}

.login__titel {
  font-size: var(--groesse-h1);
  margin: var(--abstand-1) 0 var(--abstand-4);
}

.login__form {
  display: grid;
  gap: var(--abstand-3);
}

.login__fehler {
  color: var(--farbe-warnung);
  font-weight: var(--gewicht-mittel);
}


.rahmen {
  min-height: 100vh;
}

.kopf {
  display: flex;
  align-items: center;
}

.marke {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  font-family: var(--schrift-titel);
  font-weight: var(--gewicht-fett);
  font-size: var(--groesse-h3);
  letter-spacing: var(--laufweite-eng);
  text-decoration: none;
}

.kopf__aktionen {
  display: flex;
  align-items: center;
}

/* Gemeinsame Optik aller Leisteneinträge: Icon, Beschriftung, Zähler. */
.hauptnav__link,
.kopf__knopf,
.bereiche__knopf {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--ziel-min);
  padding: 0 var(--abstand-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--farbe-text-2);
  font-weight: var(--gewicht-mittel);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dauer), color var(--dauer);
}

.hauptnav__link:hover,
.kopf__knopf:hover,
.bereiche__knopf:hover {
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text);
}

.hauptnav__link[aria-current="page"],
.kopf__knopf[aria-current="page"] {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}

.bereiche__knopf[aria-pressed="true"] {
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text);
}

.icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eintrag__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  margin-left: auto;
  min-width: 1.5rem;
  padding: 0 0.45em;
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text-2);
  font-size: var(--groesse-klein);
  font-weight: var(--gewicht-mittel);
  line-height: 1.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.badge--warn {
  background: var(--farbe-warnung-flaeche);
  color: var(--farbe-warnung);
}

.hauptnav__link[aria-current="page"] .badge {
  background: color-mix(in srgb, var(--farbe-akzent-text) 14%, transparent);
  color: var(--farbe-akzent-text);
}

.kopf__taste {
  margin-left: auto;
  padding: 0 0.4em;
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-klein);
  font-family: inherit;
  font-size: var(--groesse-klein);
  line-height: 1.5;
  color: var(--farbe-text-3);
}

.bereiche__titel {
  padding: 0 var(--abstand-2);
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-text-3);
}

.bereiche__liste {
  list-style: none;
  margin: var(--abstand-0) 0 0;
  padding: 0;
}

.bereiche__knopf {
  width: 100%;
}

.bereiche__leer {
  flex: 0 0 var(--punkt);
  width: var(--punkt);
  height: var(--punkt);
  border: var(--linie) solid var(--farbe-text-3);
  border-radius: 50%;
}

.kopf__punkt {
  flex: 0 0 auto;
}

.kopf__bereich,
.kopf__leiste,
.kopf__suche-mobil,
.kopf__menueknopf {
  display: none;
}

.auswahlfeld--leise {
  border-color: transparent;
  background-color: transparent;
  color: var(--farbe-text-2);
  font-weight: var(--gewicht-mittel);
  cursor: pointer;
}

.auswahlfeld--leise:hover {
  background-color: var(--farbe-flaeche-3);
  color: var(--farbe-text);
}

.kopf__feld {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-0);
  min-width: 0;
}

.umschalter {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.umschalter legend {
  padding: 0;
  margin-bottom: var(--abstand-0);
}

.umschalter__knoepfe {
  display: inline-flex;
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-rund);
  padding: var(--abstand-haar);
}

.umschalter__knopf {
  min-height: calc(var(--ziel-min) - var(--abstand-halb));
  min-width: var(--ziel-min);
  padding: 0 var(--abstand-2);
  border: 0;
  border-radius: var(--radius-rund);
  background: transparent;
  color: var(--farbe-text-2);
  font-size: var(--groesse-klein);
  cursor: pointer;
}

.umschalter__knopf[aria-pressed="true"] {
  background: var(--farbe-text);
  color: var(--farbe-grund);
}

.schnelleingabe {
  display: flex;
  gap: var(--abstand-1);
  min-width: 0;
}

.schnelleingabe__feld {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--groesse-eingabe);
  border-radius: var(--radius-rund);
  padding: 0 var(--abstand-3);
}

.schnell {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  padding: var(--abstand-2) var(--rand-seite);
  background: var(--farbe-grund);
  border-bottom: var(--linie) solid var(--farbe-linie);
}

.schnell:not(:has(> :not([hidden]))) {
  display: none;
}

.schnell .schnelleingabe {
  flex: 1 1 auto;
}

@media (min-width: 900px) {
  .rahmen {
    display: grid;
    grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  }

  .leiste-zu .rahmen {
    grid-template-columns: minmax(0, 1fr);
  }

  .leiste-zu .kopf {
    display: none;
  }

  .kopf {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--abstand-3);
    padding: var(--abstand-3) var(--abstand-2);
    background: var(--farbe-flaeche-2);
    border-right: var(--linie) solid var(--farbe-linie);
  }

  .marke {
    padding: 0 var(--abstand-2);
  }

  .kopf__aktionen {
    flex-direction: column;
    align-items: stretch;
  }

  .kopf__neu {
    justify-content: flex-start;
    padding: 0 var(--abstand-2);
    border-radius: var(--radius);
  }

  .hauptnav {
    display: grid;
    gap: var(--abstand-haar);
  }

  .kopf__menue {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--abstand-3);
  }

  .werkzeuge {
    display: grid;
    gap: var(--abstand-haar);
    padding-top: var(--abstand-3);
    border-top: var(--linie) solid var(--farbe-linie);
  }

  .kopf__fuss {
    display: grid;
    gap: var(--abstand-haar);
    margin-top: auto;
    padding-top: var(--abstand-2);
    border-top: var(--linie) solid var(--farbe-linie);
  }

  .kopf__leiste {
    display: flex;
  }

  .schnell {
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .seitenspalte {
    min-width: 0;
  }
}

@media (max-width: 899px) {
  .kopf {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--kopf-hoehe-klein);
    padding: 0 var(--rand-seite);
    gap: var(--abstand-1);
    border-bottom: var(--linie) solid var(--farbe-linie);
  }

  /* Hintergrund als Pseudo-Element: backdrop-filter am Kopf selbst würde die feste Tab-Leiste darin am Kopf verankern. */
  .kopf::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--farbe-grund) 88%, transparent);
    -webkit-backdrop-filter: blur(0.75rem);
    backdrop-filter: blur(0.75rem);
  }

  .marke {
    font-size: var(--groesse-gross);
    margin-right: auto;
  }

  .kopf__aktionen .icon,
  .kopf__suche-mobil .icon {
    display: none;
  }

  .kopf__aktionen .kopf__knopf {
    padding: 0 var(--abstand-1);
  }

  .kopf__neu {
    padding: 0 var(--abstand-2);
    margin-left: var(--abstand-0);
    border-radius: var(--radius-rund);
  }

  .kopf__suche-mobil,
  .kopf__menueknopf {
    display: inline-flex;
  }

  .kopf__suche {
    display: none;
  }

  .bereiche {
    display: none;
  }

  .kopf__menue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--abstand-2) var(--rand-seite) var(--abstand-3);
    gap: var(--abstand-1);
    background: var(--farbe-flaeche);
    border-bottom: var(--linie) solid var(--farbe-linie);
    box-shadow: 0 1rem 2rem var(--farbe-schatten);
  }

  .kopf__menue--offen {
    display: grid;
  }

  .werkzeuge,
  .kopf__fuss {
    display: grid;
    gap: var(--abstand-haar);
  }

  .kopf__vorsatz {
    color: var(--farbe-text-3);
  }

  .kopf__bereich {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    min-height: var(--ziel-min);
    padding-left: var(--abstand-2);
  }

  .kopf__bereich .kopf__punkt {
    margin: 0 var(--abstand-1) 0 var(--abstand-2);
  }

  .kopf__bereich .auswahlfeld {
    width: 100%;
  }

  .hauptnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--farbe-flaeche);
    border-top: var(--linie) solid var(--farbe-linie);
  }

  .hauptnav__link {
    flex-direction: column;
    justify-content: center;
    gap: var(--abstand-haar);
    min-height: var(--tabbar-hoehe);
    padding: 0 var(--abstand-haar);
    border-radius: 0;
    font-size: 0.75rem;
    text-align: center;
  }

  .hauptnav__link[aria-current="page"] {
    background: transparent;
    color: var(--farbe-text);
  }

  .hauptnav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    top: 0;
    height: var(--fokus-breite);
    background: var(--farbe-markierung);
  }

  .hauptnav__link .badge {
    position: absolute;
    top: var(--abstand-0);
    left: calc(50% + 0.4rem);
    min-width: 1.125rem;
    margin: 0;
    padding: 0 0.3em;
    font-size: 0.6875rem;
    line-height: 1.125rem;
  }

  .hauptnav__link[aria-current="page"] .badge {
    background: var(--farbe-flaeche-3);
    color: var(--farbe-text-2);
  }

  .schnell {
    position: sticky;
    top: var(--kopf-hoehe-klein);
    z-index: 25;
  }

  .inhalt {
    padding-bottom: calc(var(--tabbar-hoehe) + env(safe-area-inset-bottom) + var(--abstand-5));
  }

  .hinweise {
    bottom: calc(var(--tabbar-hoehe) + env(safe-area-inset-bottom) + var(--abstand-2));
  }
}

.inhalt {
  max-width: var(--breite-max);
  margin: 0 auto;
  padding: var(--abstand-4) var(--rand-seite) calc(var(--abstand-6) * 2);
  outline: none;
}

.laden,
.leer {
  color: var(--farbe-text-3);
}

.seitenkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-1) var(--abstand-3);
  margin-bottom: var(--abstand-4);
}

.seitentitel {
  font-size: var(--groesse-h1);
}

.seitenkopf__datum {
  color: var(--farbe-text-2);
}

.abschnitt {
  display: grid;
  gap: var(--abstand-2);
  align-content: start;
  min-width: 0;
}

.abschnitt > .knopf {
  justify-self: start;
}

.abschnitt__titel {
  font-size: var(--groesse-h3);
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
}

.abschnitt__zahl,
.spalte__zahl,
.tabs__zahl {
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: var(--gewicht-normal);
  color: var(--farbe-text-3);
  letter-spacing: 0;
}

.abschnitt__hilfe {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}


.kennzahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--linie);
  margin: 0 0 var(--abstand-5);
  background: var(--farbe-linie);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 700px) {
  .kennzahlen {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kennzahl {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--abstand-0);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche);
}

.kennzahl__label {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.kennzahl__wert {
  margin: 0;
  font-family: var(--schrift-zahl);
  font-size: var(--groesse-kennzahl);
  font-weight: var(--gewicht-fett);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.uebersicht-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--abstand-3) var(--abstand-4);
  margin-bottom: var(--abstand-4);
}

.balken {
  list-style: none;
  margin: 0;
  padding: var(--abstand-3) var(--abstand-2);
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: var(--abstand-0);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.balken__tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--abstand-0);
  min-width: 0;
  font-size: var(--groesse-klein);
  font-variant-numeric: tabular-nums;
}

.balken__zahl {
  color: var(--farbe-text-2);
}

.balken__flaeche {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: var(--balken-hoehe);
  border-bottom: var(--linie) solid var(--farbe-linie-stark);
}

.balken__saeule {
  display: block;
  width: min(100%, 1.75rem);
  background: var(--farbe-balken);
  border-radius: var(--radius-klein) var(--radius-klein) 0 0;
}

.balken__kuerzel {
  color: var(--farbe-text-2);
  line-height: 1.1;
}

.balken__datum {
  color: var(--farbe-text-3);
  line-height: 1.1;
}

.balken__tag--wochenende .balken__kuerzel,
.balken__tag--wochenende .balken__datum {
  color: var(--farbe-text-3);
  opacity: 0.75;
}

.balken__tag--voll .balken__saeule {
  background: var(--farbe-balken-voll);
}

.balken__tag--voll .balken__zahl {
  color: var(--farbe-text);
  font-weight: var(--gewicht-fett);
}

.balken__tag--heute .balken__kuerzel {
  color: var(--farbe-text);
  font-weight: var(--gewicht-fett);
}


.kartenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-1);
  align-content: start;
}

.karte {
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand-haar) var(--abstand-2) var(--abstand-1) 0;
  min-width: 0;
}

.karte__kopf {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.haken {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ziel-min);
  width: var(--ziel-min);
  height: var(--ziel-min);
  cursor: pointer;
}

.karte__titel {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--ziel-min);
  padding: var(--abstand-titel) 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-weight: var(--gewicht-mittel);
  line-height: 1.35;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.karte__titel:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.karte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-0) var(--abstand-2);
  padding-left: var(--ziel-min);
  margin-top: -var(--abstand-0);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.karte__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  padding: var(--abstand-1) 0 0 var(--ziel-min);
}

.karte--erledigt .karte__titel {
  color: var(--farbe-text-3);
  text-decoration: line-through;
}

.karte--geist {
  opacity: 0.4;
}

.karte--gewaehlt {
  border-color: var(--farbe-markierung);
}

.karte--ziehen {
  box-shadow: 0 0.5rem 1.5rem var(--farbe-schatten);
}

.bereich {
  display: inline-flex;
  align-items: center;
}

.punkt {
  display: inline-block;
  width: var(--punkt);
  height: var(--punkt);
  border-radius: 50%;
  background: var(--farbe-text-3);
}

.marke-grund {
  display: inline-block;
  padding: 0 0.5em;
  border-radius: var(--radius-rund);
  font-weight: var(--gewicht-mittel);
  line-height: 1.6;
}

.marke-grund--ueberfaellig {
  background: var(--farbe-warnung-flaeche);
  color: var(--farbe-warnung);
}

.marke-grund--faellig {
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text);
}

.marke-grund--nachfassen {
  background: var(--farbe-hinweis-flaeche);
  color: var(--farbe-hinweis);
}

.rueckfrage-huelle {
  list-style: none;
}

.rueckfrage {
  display: grid;
  gap: var(--abstand-2);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-markierung);
  border-radius: var(--radius);
}


.tabs {
  display: flex;
  gap: var(--abstand-0);
  overflow-x: auto;
  margin: 0 0 var(--abstand-3);
  padding-bottom: var(--abstand-haar);
  scrollbar-width: thin;
}

.tabs__tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-halb);
  min-height: var(--ziel-min);
  padding: 0 var(--abstand-2);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-rund);
  background: transparent;
  color: var(--farbe-text-2);
  font-size: var(--groesse-klein);
  cursor: pointer;
}

.tabs__tab[aria-selected="true"] {
  background: var(--farbe-text);
  border-color: var(--farbe-text);
  color: var(--farbe-grund);
}

.tabs__tab[aria-selected="true"] .tabs__zahl {
  color: inherit;
}

.board {
  display: grid;
  gap: var(--abstand-3);
  grid-template-columns: minmax(0, 1fr);
}

.spalte {
  display: none;
  flex-direction: column;
  gap: var(--abstand-2);
  min-width: 0;
  padding: var(--abstand-3) var(--abstand-2);
  background: var(--farbe-flaeche-2);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-gross);
}

.spalte--aktiv {
  display: flex;
}

.spalte__titel {
  font-size: var(--groesse-gross);
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
  padding: 0 var(--abstand-1);
}

.spalte__gruppe {
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-text-2);
  padding: 0 var(--abstand-1);
}

.spalte__hilfe {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
  padding: 0 var(--abstand-1);
  margin-top: calc(var(--abstand-1) * -1);
}

.spalte .kartenliste[data-bucket] {
  flex: 1 1 auto;
  min-height: 5rem;
  border-radius: var(--radius);
}

.kartenliste[data-bucket]:empty {
  border: var(--linie) dashed var(--farbe-linie-stark);
  padding: var(--abstand-3);
}

.kartenliste[data-bucket]:empty::before {
  content: attr(data-leer);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
}

.kartenliste--faellig .karte {
  border-color: var(--farbe-linie-stark);
}

@media (min-width: 900px) {
  .tabs {
    display: none;
  }

  .board {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(15rem, 1fr);
    align-items: start;
    overflow-x: auto;
    /* Positioniert, damit absolut platzierte .sr-only-Texte der Karten mit abgeschnitten werden und die Seite nicht seitlich wächst. */
    position: relative;
    padding-bottom: var(--abstand-2);
  }

  .spalte {
    display: flex;
    min-height: 12rem;
  }

  .karte .haken__feld {
    cursor: pointer;
  }

  .spalte .karte {
    cursor: grab;
  }
}

@media (min-width: 1280px) {
  .spalte {
    min-height: 60vh;
  }
}


.dialog {
  width: min(40rem, calc(100% - 2 * var(--rand-seite)));
  max-height: calc(100dvh - 2 * var(--abstand-4));
  padding: 0;
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-gross);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: 0 1.5rem 4rem var(--farbe-schatten);
}

.dialog::backdrop {
  background: var(--farbe-overlay);
}

.dialog__form {
  display: grid;
  gap: var(--abstand-3);
  padding: var(--abstand-3) var(--abstand-4) var(--abstand-4);
}

.dialog__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--abstand-2);
}

.dialog__titel {
  font-size: var(--groesse-h2);
}

.dialog__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-flaeche-2);
  border-radius: var(--radius-klein);
}

.dialog__fuss {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
  gap: var(--abstand-2);
  padding-top: var(--abstand-2);
  border-top: var(--linie) solid var(--farbe-linie);
}

.feldraster {
  display: grid;
  gap: var(--abstand-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.feldraster .auswahlfeld {
  width: 100%;
}

.feld-mit-aktionen {
  display: grid;
  gap: var(--abstand-1);
}


.hinweise {
  position: fixed;
  left: 50%;
  bottom: max(var(--abstand-3), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 40;
  display: grid;
  gap: var(--abstand-1);
  width: min(32rem, calc(100% - 2 * var(--rand-seite)));
  pointer-events: none;
}

.hinweis {
  display: flex;
  align-items: center;
  gap: var(--abstand-1);
  padding: var(--abstand-0) var(--abstand-0) var(--abstand-0) var(--abstand-3);
  background: var(--farbe-toast);
  color: var(--farbe-toast-text);
  border-radius: var(--radius);
  box-shadow: 0 0.5rem 1.5rem var(--farbe-schatten);
  pointer-events: auto;
}

.hinweis__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hinweis__knopf,
.hinweis__schliessen {
  flex: 0 0 auto;
  min-height: var(--ziel-min);
  padding: 0 var(--abstand-2);
  border: 0;
  border-radius: var(--radius-klein);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.hinweis__knopf {
  font-weight: var(--gewicht-fett);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hinweis__schliessen {
  font-size: var(--groesse-klein);
  opacity: 0.75;
}

.hinweis :focus-visible {
  outline-color: var(--farbe-toast-text);
}


.einstellungen {
  display: grid;
  gap: var(--abstand-6);
  max-width: var(--breite-text);
}

.bereichliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-2);
}

.bereichzeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--abstand-2);
  align-items: end;
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.bereichzeile__knoepfe {
  grid-column: 1 / -1;
}

@media (min-width: 600px) {
  .bereichzeile {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .bereichzeile__knoepfe {
    grid-column: auto;
  }
}

.bereichzeile--neu {
  background: transparent;
  border-style: dashed;
}


/* Etappe 3 und 4 */

.kennzahlen--links {
  list-style: none;
  padding: 0;
}

.kennzahlen--links > li {
  display: flex;
  min-width: 0;
}

.kennzahl--link {
  flex: 1 1 auto;
  min-height: var(--ziel-min);
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dauer);
}

.kennzahl--link:hover {
  background: var(--farbe-flaeche-2);
}

.kennzahl--link:hover .kennzahl__label {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.abrechnen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-1);
}

.abrechnen__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-1) var(--abstand-3);
  padding: var(--abstand-1) var(--abstand-1) var(--abstand-1) var(--abstand-3);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.abrechnen__text {
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

.abrechnen__meta {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.projektstand {
  display: grid;
  gap: var(--abstand-0);
  min-width: 0;
}

.projektstand__info {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.regel__hinweis {
  font-size: var(--groesse-klein);
  color: var(--farbe-hinweis);
  background: var(--farbe-hinweis-flaeche);
  border-radius: var(--radius-klein);
  padding: var(--abstand-0) var(--abstand-2);
}

.karte__projekt {
  padding-left: var(--ziel-min);
  margin-top: calc(var(--abstand-1) * -1);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
  overflow-wrap: anywhere;
}

.karte__marke {
  padding: 0 0.5em;
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-rund);
  line-height: 1.5;
}

.fortschritt {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-width: 0;
}

.fortschritt__spur {
  flex: 1 1 auto;
  min-width: 3rem;
  height: 0.5rem;
  background: var(--farbe-flaeche-3);
  border-radius: var(--radius-rund);
  overflow: hidden;
}

.fortschritt__fuellung {
  display: block;
  height: 100%;
  background: var(--farbe-balken-voll);
  border-radius: var(--radius-rund);
}

.fortschritt__text {
  flex: 0 0 auto;
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
  font-variant-numeric: tabular-nums;
}

.fortschritt--klein .fortschritt__spur {
  height: 0.375rem;
}

.dialog--breit {
  width: min(48rem, calc(100% - 2 * var(--rand-seite)));
}

.dialog__text {
  max-width: var(--breite-text);
}

.dialog__info {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.dialog__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
}

.checkliste,
.zeilenliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-0);
}

.checkliste__punkt,
.zeilenliste__zeile {
  display: flex;
  align-items: center;
  gap: var(--abstand-1);
  min-width: 0;
}

.checkliste__punkt .haken {
  flex-basis: var(--ziel-min);
}

.checkliste__titel {
  flex: 1 1 auto;
  min-width: 0;
  border-color: transparent;
  background: transparent;
}

.checkliste__titel:hover,
.checkliste__titel:focus {
  border-color: var(--farbe-linie-stark);
  background: var(--farbe-flaeche);
}

.checkliste__punkt--erledigt .checkliste__titel {
  color: var(--farbe-text-3);
  text-decoration: line-through;
}

.checkliste__neu,
.zeilenform {
  display: flex;
  gap: var(--abstand-1);
  align-items: center;
  min-width: 0;
}

.checkliste__neu .eingabe,
.zeilenform .eingabe,
.zeilenliste__zeile .eingabe {
  flex: 1 1 auto;
  min-width: 0;
}

.gruppe > .knopf {
  justify-self: start;
}

.eingabe--zahl {
  max-width: 8rem;
}

.seitenkopf__werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--abstand-2);
}

.seitenkopf .kopf__feld .auswahlfeld {
  max-width: min(20rem, 100%);
}

.projektliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.projektzeile__link {
  display: grid;
  gap: var(--abstand-1);
  height: 100%;
  min-height: var(--ziel-min);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--dauer);
}

.projektzeile__link:hover {
  border-color: var(--farbe-linie-stark);
}

.projektzeile__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-0) var(--abstand-2);
  min-width: 0;
}

.projektzeile__name {
  font-family: var(--schrift-titel);
  font-weight: var(--gewicht-fett);
  font-size: var(--groesse-gross);
  overflow-wrap: anywhere;
}

.projektzeile__kuerzel,
.projektzeile__kunde {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.projektzeile__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-0) var(--abstand-2);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.projektliste--kompakt .projektzeile__link {
  padding: var(--abstand-2) var(--abstand-3);
}

.abschnitt--projekte,
.abschnitt--abstand {
  margin-top: var(--abstand-6);
}

.marke-status {
  display: inline-block;
  padding: 0 0.5em;
  border-radius: var(--radius-rund);
  font-weight: var(--gewicht-mittel);
  line-height: 1.6;
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text);
}

.marke-status--aktiv {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}

.marke-status--pausiert {
  background: var(--farbe-hinweis-flaeche);
  color: var(--farbe-hinweis);
}

.vorlage {
  display: grid;
  gap: var(--abstand-3);
}

.vorlage:empty {
  display: none;
}

.vorlage__phase {
  display: grid;
  gap: var(--abstand-0);
}

.vorlage__titel {
  font-size: var(--groesse-text);
}

.vorlage__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.vorlage__aufgabe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
  padding-left: var(--abstand-3);
}

.vorlage__aufgabe + .vorlage__aufgabe {
  border-top: var(--linie) solid var(--farbe-linie);
}

.vorlage__name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.vorlage__aufgabe--entfernt .vorlage__name {
  color: var(--farbe-text-3);
  text-decoration: line-through;
}

.zurueck {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.projektkopf {
  display: grid;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-5);
}

.projektkopf__titelzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-4);
}

.projektkopf .seitentitel {
  overflow-wrap: anywhere;
  min-width: 0;
}

.projektkopf > .fortschritt {
  max-width: 32rem;
}

.angaben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-4);
  margin: 0;
}

.angaben__paar {
  display: flex;
  gap: var(--abstand-1);
  min-width: 0;
}

.angaben dt {
  color: var(--farbe-text-2);
}

.angaben dt::after {
  content: ":";
}

.angaben dd {
  margin: 0;
  font-weight: var(--gewicht-mittel);
  overflow-wrap: anywhere;
}

.projektraster {
  display: grid;
  gap: var(--abstand-6) var(--abstand-5);
  grid-template-columns: minmax(0, 1fr);
}

.projektraster__seite {
  display: grid;
  gap: var(--abstand-6);
  align-content: start;
  min-width: 0;
}

@media (min-width: 1100px) {
  .projektraster {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.projektfuss {
  margin-top: var(--abstand-6);
  padding-top: var(--abstand-3);
  border-top: var(--linie) solid var(--farbe-linie);
}

.phasen {
  display: grid;
  gap: var(--abstand-2);
}

.phase {
  background: var(--farbe-flaeche-2);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-gross);
  min-width: 0;
}

.phase--aktuell {
  border-color: var(--farbe-markierung);
  border-width: calc(var(--linie) * 2);
}

.phase--spaeter .phase__kopf,
.phase--spaeter .kartenliste {
  opacity: 0.7;
}

.phase__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-0) var(--abstand-2);
  min-height: var(--ziel-min);
  padding: var(--abstand-2) var(--abstand-3);
  cursor: pointer;
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
}

section.phase .phase__kopf {
  cursor: default;
}

.phase__nummer {
  color: var(--farbe-text-3);
  font-variant-numeric: tabular-nums;
}

.phase__name {
  font-family: var(--schrift-titel);
  font-weight: var(--gewicht-fett);
  font-size: var(--groesse-gross);
  min-width: 0;
  overflow-wrap: anywhere;
}

.phase__marke {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.phase--aktuell .phase__marke {
  padding: 0 0.5em;
  border-radius: var(--radius-rund);
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
  font-weight: var(--gewicht-mittel);
}

.phase__kopf .fortschritt {
  flex: 1 1 12rem;
  margin-left: auto;
  max-width: 20rem;
}

.phase__inhalt {
  display: grid;
  gap: var(--abstand-2);
  padding: 0 var(--abstand-2) var(--abstand-3);
}

.phase__abschliessen {
  justify-self: start;
}

.notiz-anzeige {
  display: grid;
  gap: var(--abstand-2);
  padding: var(--abstand-3);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.notiz-anzeige h3,
.notiz-anzeige h4,
.notiz-anzeige h5 {
  font-size: var(--groesse-gross);
}

.notiz-anzeige h4,
.notiz-anzeige h5 {
  font-size: var(--groesse-text);
}

.notiz-anzeige ul,
.notiz-anzeige ol {
  margin: 0;
  padding-left: 1.25em;
}

.notiz-anzeige a {
  text-underline-offset: 0.2em;
}

.notiz-anzeige code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0 0.25em;
  background: var(--farbe-flaeche-3);
  border-radius: var(--radius-klein);
}

.regelliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-2);
}

.regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-3);
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.regel--pausiert .regel__titel {
  color: var(--farbe-text-2);
}

.regel__haupt {
  flex: 1 1 16rem;
  display: grid;
  gap: var(--abstand-0);
  min-width: 0;
}

.regel__titel {
  font-weight: var(--gewicht-mittel);
  overflow-wrap: anywhere;
}

.regel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-0) var(--abstand-3);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.regel__meta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
}

.leerzustand {
  display: grid;
  gap: var(--abstand-2);
  justify-items: start;
  max-width: var(--breite-text);
  padding: var(--abstand-4);
  border: var(--linie) dashed var(--farbe-linie-stark);
  border-radius: var(--radius-gross);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Mehrwert-Paket */

.projektgruppe {
  display: grid;
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-5);
}

.projektgruppe__titel {
  font-family: var(--schrift-text);
  font-size: var(--groesse-klein);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-text-2);
}

.projektstand__naechste {
  color: var(--farbe-text);
  overflow-wrap: anywhere;
}

.projektstand__info--ruhe {
  color: var(--farbe-text);
  font-weight: var(--gewicht-mittel);
  text-decoration: underline dotted;
  text-underline-offset: 0.25em;
}

.suche__ergebnis {
  display: grid;
  gap: var(--abstand-3);
}

.suche__titel {
  font-size: var(--groesse-text);
}

.suche__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-0);
}

.suche__treffer {
  display: grid;
  gap: var(--abstand-haar);
  width: 100%;
  min-height: var(--ziel-min);
  padding: var(--abstand-1) var(--abstand-2);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-klein);
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.suche__treffer:hover {
  background: var(--farbe-flaeche-2);
}

.suche__name {
  font-weight: var(--gewicht-mittel);
  overflow-wrap: anywhere;
}

.suche__meta {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.abschnitt,
.spalte {
  scroll-margin-top: calc(var(--kopf-hoehe-klein) + var(--abstand-5));
}

@media (max-width: 899px) {
  .nur-desktop {
    display: none;
  }
}

.kopf__knopf--mobil {
  display: none;
}

@media (max-width: 899px) {
  .hauptnav__link--desktop {
    display: none;
  }

  .kopf__knopf--mobil {
    display: flex;
  }
}

.tagwahl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
}

.tagwahl__knopf {
  min-width: var(--ziel-min);
  min-height: var(--ziel-min);
  padding: 0 var(--abstand-1);
  border: var(--linie) solid var(--farbe-linie-stark);
  border-radius: var(--radius-rund);
  background: transparent;
  color: var(--farbe-text-2);
  font-weight: var(--gewicht-mittel);
  cursor: pointer;
}

.tagwahl__knopf[aria-pressed="true"] {
  background: var(--farbe-text);
  border-color: var(--farbe-text);
  color: var(--farbe-grund);
}

.kategoriewahl {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
}

.kategoriewahl .auswahlfeld {
  flex: 1 1 auto;
  min-width: 0;
}

.kategorie {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
  color: var(--farbe-text-2);
}

.karte__projekt {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--abstand-2);
}

.kundeneu {
  display: grid;
  gap: var(--abstand-0);
  margin-top: var(--abstand-1);
}

.kapazitaet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--abstand-2);
}

.kapazitaet__summe {
  font-weight: var(--gewicht-mittel);
}

.abwesenheit {
  display: grid;
  gap: var(--abstand-2);
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.abwesenheit--neu {
  background: transparent;
  border-style: dashed;
}

/* Zeitplan */

@media (max-width: 599px) {
  :root {
    --plan-label: 7.5rem;
  }
}

.prognose {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-3);
}

.prognose__text {
  font-weight: var(--gewicht-mittel);
}

.phase__stunden {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
  font-variant-numeric: tabular-nums;
}

.stundenfeld {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
}

.stundenfeld .eingabe--zahl {
  max-width: 6rem;
}

.phasenzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
}

.vorlage__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
}

.legende {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1) var(--abstand-4);
  margin: 0 0 var(--abstand-3);
  padding: 0;
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-1);
}

.legende__muster {
  width: 1.5rem;
  height: 0.875rem;
  border-radius: var(--radius-klein);
}

.legende__muster--aktuell {
  background: var(--farbe-akzent);
}

.legende__muster--prognose {
  border: 0.125rem dashed var(--farbe-text-3);
}

.legende__muster--warten {
  border: 0.125rem dashed var(--farbe-text-2);
  background: var(--plan-warten-flaeche);
}

.legende__muster--unsicher {
  border: 0.125rem dotted var(--farbe-text-3);
  background: repeating-linear-gradient(135deg, var(--plan-streifen) 0 0.25rem, transparent 0.25rem 0.5rem);
}

.legende__muster--aufgabe {
  border: 0.125rem dashed var(--plan-aufgabe);
  background: var(--plan-aufgabe-flaeche);
}

.plan {
  overflow-x: auto;
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-gross);
  overscroll-behavior-x: contain;
}

.plan__gitter {
  position: relative;
  display: grid;
  grid-template-columns: var(--plan-label) repeat(var(--tage), var(--plan-tag));
  grid-auto-rows: minmax(2.25rem, auto);
  width: max-content;
  min-width: 100%;
}

.plan__spuren {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--plan-label);
  right: 0;
  display: grid;
  grid-template-columns: repeat(var(--tage), var(--plan-tag));
  pointer-events: none;
}

.plan__we {
  grid-row: 1;
  background: var(--plan-wochenende);
}

.plan__heute {
  grid-row: 1;
  border-left: 0.125rem solid var(--plan-heute);
  margin-left: calc(var(--plan-tag) / 2 - 0.0625rem);
  opacity: 0.8;
}

.plan__label {
  position: sticky;
  left: 0;
  z-index: 4;
  display: grid;
  align-content: center;
  gap: var(--abstand-haar);
  min-width: 0;
  padding: var(--abstand-1) var(--abstand-2);
  background: var(--farbe-flaeche);
  border-right: var(--linie) solid var(--farbe-linie);
  border-bottom: var(--linie) solid var(--farbe-linie);
}

.plan__kopf {
  border-bottom: 0;
}

.plan__kw {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
  padding: var(--abstand-1) var(--abstand-2);
  border-left: var(--linie) solid var(--farbe-linie);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
  white-space: nowrap;
  overflow: hidden;
}

.plan__kw strong {
  color: var(--farbe-text);
}

.plan__tag {
  display: grid;
  justify-items: center;
  align-content: center;
  font-size: 0.6875rem;
  line-height: 1.2;
  color: var(--farbe-text-3);
  border-bottom: var(--linie) solid var(--farbe-linie);
}

.plan__tag strong {
  font-weight: var(--gewicht-mittel);
  color: var(--farbe-text-2);
}

.plan__tag--heute strong {
  color: var(--farbe-akzent-text);
  background: var(--farbe-akzent);
  border-radius: var(--radius-rund);
  min-width: 1.25rem;
  text-align: center;
}

.plan__bahn {
  position: relative;
  z-index: 5;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  border-bottom: var(--linie) solid var(--farbe-linie);
  background: transparent;
}

.plan__bahnkopf {
  position: sticky;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  gap: var(--abstand-2);
  padding: 0 var(--abstand-2);
}

.plan__nr {
  font-family: var(--schrift-titel);
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
  font-variant-numeric: tabular-nums;
}

.plan__bahnname {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: var(--gewicht-normal);
  font-size: var(--groesse-gross);
  letter-spacing: 0;
}

.plan__link {
  font-weight: var(--gewicht-mittel);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.plan__link--text {
  text-decoration: none;
}

.plan__kunde {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--farbe-text-2);
}

.plan__regeltitel {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.plan__klein {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--farbe-text-3);
}

.plan__balken {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: var(--abstand-haar);
  margin: var(--abstand-0) var(--abstand-haar);
  padding: 0 var(--abstand-1);
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-klein);
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

.plan__balken--aktuell {
  background: var(--farbe-akzent);
  color: var(--farbe-akzent-text);
}

.plan__balken--prognose {
  border: 0.125rem dashed var(--farbe-text-3);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.plan__balken--warten {
  border: 0.125rem dashed var(--farbe-text-2);
  background: var(--plan-warten-flaeche);
  color: var(--farbe-text-2);
}

/* Streifen liegen über der Füllung, damit aktuell/Prognose/wartet erkennbar bleiben. */
.plan__balken--unsicher {
  border-style: dotted;
  background-image: repeating-linear-gradient(135deg, var(--plan-streifen) 0 0.25rem, transparent 0.25rem 0.5rem);
}

.plan__balken--aktuell.plan__balken--unsicher {
  background-image: repeating-linear-gradient(135deg, var(--plan-streifen-akzent) 0 0.25rem, transparent 0.25rem 0.5rem);
}

.plan__balken:hover {
  outline: var(--linie) solid var(--farbe-text);
}

.plan__phase {
  font-weight: var(--gewicht-fett);
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan__zeit {
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan__ziel {
  position: relative;
  z-index: 3;
  border-left: 0.125rem dashed var(--farbe-text);
  pointer-events: none;
}

.plan__ziel span {
  position: absolute;
  top: 0;
  left: var(--abstand-0);
  padding: 0 var(--abstand-0);
  background: var(--farbe-flaeche);
  font-size: 0.6875rem;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--farbe-text);
}

.plan__termin {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-klein);
  background: var(--farbe-text-2);
  cursor: pointer;
}

.plan__termin:hover {
  background: var(--farbe-text);
}

/* Touch-Fläche größer als die sichtbare Markierung */
.plan__termin::after {
  content: "";
  position: absolute;
  inset: -0.75rem -0.25rem;
}

.plan__chip {
  position: relative;
  z-index: 2;
  align-self: center;
  margin: var(--abstand-0) var(--abstand-haar);
  padding: 0 var(--abstand-1);
  min-height: 1.75rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border: 0.125rem dashed var(--plan-aufgabe);
  border-radius: var(--radius-klein);
  background: var(--plan-aufgabe-flaeche);
  color: var(--farbe-text);
  font-size: 0.75rem;
  cursor: pointer;
}

.plan__last-label {
  border-bottom: 0;
}

.plan__last {
  display: grid;
  align-content: center;
  gap: var(--abstand-haar);
  padding: var(--abstand-1) var(--abstand-2);
  border-left: var(--linie) solid var(--farbe-linie);
  min-width: 0;
}

.plan__spur {
  display: flex;
  height: 0.5rem;
  background: var(--farbe-flaeche-3);
  border-radius: var(--radius-rund);
  overflow: hidden;
}

.plan__seg--regeln {
  background: var(--farbe-text-3);
}

.plan__seg--termine {
  background: var(--plan-aufgabe);
}

.plan__seg--projekte {
  background: var(--farbe-balken-voll);
}

.zeitplan__unten {
  display: grid;
  gap: var(--abstand-5);
  margin-top: var(--abstand-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.reihenfolge {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--abstand-1);
}

.reihenfolge__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-3);
  padding: var(--abstand-1) var(--abstand-2);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius);
}

.reihenfolge__nr {
  min-width: 1.5rem;
  font-family: var(--schrift-titel);
  color: var(--farbe-text-3);
  font-variant-numeric: tabular-nums;
}

.reihenfolge__name {
  flex: 1 1 10rem;
  display: grid;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Dashboard, Panels und gemeinsame Bausteine */

.inhalt {
  container-type: inline-size;
}

.panel {
  display: grid;
  gap: var(--abstand-2);
  align-content: start;
  min-width: 0;
  padding: var(--abstand-panel);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-panel);
  box-shadow: var(--schatten-karte);
}

.panel__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--abstand-0) var(--abstand-3);
}

.panel__titel {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
  font-size: var(--groesse-gross);
}

.panel__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  margin: calc(var(--abstand-1) * -1) 0;
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.panel__link:hover {
  color: var(--farbe-text);
}

.panel__unter {
  font-family: var(--schrift-text);
  font-size: var(--groesse-label);
  font-weight: var(--gewicht-mittel);
  letter-spacing: var(--laufweite-weit);
  text-transform: uppercase;
  color: var(--farbe-text-3);
  margin-top: var(--abstand-1);
}

.panel__hilfe {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
}

.panel__mehr {
  justify-self: start;
}

.panel .kartenliste .karte {
  background: var(--farbe-flaeche-2);
  box-shadow: none;
}

.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--abstand-2);
  margin-bottom: var(--abstand-4);
}

@container (min-width: 44rem) {
  .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi {
  display: grid;
  gap: var(--abstand-haar);
  align-content: start;
  min-height: var(--ziel-min);
  padding: var(--abstand-3);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-panel);
  background: var(--farbe-flaeche);
  box-shadow: var(--schatten-karte);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dauer), background-color var(--dauer);
}

.kpi:hover {
  border-color: var(--farbe-linie-stark);
  background: var(--farbe-flaeche-2);
}

.kpi__label {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
}

.kpi__wert {
  font-family: var(--schrift-zahl);
  font-size: var(--groesse-kennzahl);
  font-weight: var(--gewicht-fett);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.kpi__kontext {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-3);
}

/* Handlungsbedarf nur leise markiert, kein Alarm. */
.kpi--hinweis {
  box-shadow: inset 0.1875rem 0 0 var(--farbe-markierung), var(--schatten-karte);
}

.kpi--hinweis .kpi__kontext {
  color: var(--farbe-text-2);
  font-weight: var(--gewicht-mittel);
}

.dash {
  display: grid;
  gap: var(--abstand-3);
  grid-template-columns: minmax(0, 1fr);
}

.dash__haupt,
.dash__seite {
  display: grid;
  gap: var(--abstand-3);
  align-content: start;
  min-width: 0;
}

@container (min-width: 68rem) {
  .dash {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
  }
}

.panel--plan .plan {
  border: 0;
  border-radius: var(--radius);
  background: var(--farbe-flaeche-2);
}

.plan--kompakt {
  --plan-tag: 0.75rem;
  --plan-label: 7rem;
}

.plan--kompakt .plan__gitter {
  grid-auto-rows: minmax(1.75rem, auto);
}

.plan--kompakt .plan__zeit {
  display: none;
}

.plan--kompakt .plan__label {
  background: var(--farbe-flaeche-2);
}

.plan--kompakt .plan__bahn {
  min-height: 2rem;
}

.plan--kompakt .plan__bahnname {
  font-size: var(--groesse-text);
}

.plan--kompakt .plan__kw {
  padding: var(--abstand-0) var(--abstand-1);
}

.plan--kompakt .plan__kw span {
  display: none;
}

.panel .balken {
  padding: var(--abstand-2) var(--abstand-1);
  background: transparent;
  border: 0;
}

.panel .balken__flaeche {
  height: 3rem;
}

.zeilenpanel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.zeilenpanel__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--abstand-2);
  padding: var(--abstand-1) 0;
  border-top: var(--linie) solid var(--farbe-linie);
}

.zeilenpanel__zeile:first-child,
.projektkompakt:first-child {
  border-top: 0;
}

.zeilenpanel__titel {
  flex: 1 1 10rem;
  min-width: 0;
  min-height: var(--ziel-min);
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-weight: var(--gewicht-mittel);
  overflow-wrap: anywhere;
  cursor: pointer;
}

.zeilenpanel__titel:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.zeilenpanel__meta {
  font-size: var(--groesse-klein);
  color: var(--farbe-text-2);
  overflow-wrap: anywhere;
}

.projektkompakt {
  border-top: var(--linie) solid var(--farbe-linie);
}

.projektkompakt__link {
  display: grid;
  gap: var(--abstand-haar);
  padding: var(--abstand-2) 0;
  text-decoration: none;
}

.projektkompakt__name {
  font-weight: var(--gewicht-mittel);
}

.projektkompakt__link:hover .projektkompakt__name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-0);
  padding: 0 0.55em;
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text-2);
  font-size: var(--groesse-label);
  line-height: 1.6;
  white-space: nowrap;
}

.chip--rahmen {
  background: transparent;
  border: var(--linie) solid var(--farbe-linie-stark);
}

.chip--projekt {
  color: var(--farbe-text);
}

.chip--filter {
  min-height: var(--ziel-min);
  padding: 0 var(--abstand-2);
  border: 0;
  color: var(--farbe-text);
  font-size: var(--groesse-klein);
  cursor: pointer;
}

.chip--filter:hover {
  background: var(--farbe-linie-stark);
}

.chip__x {
  margin-left: var(--abstand-1);
  font-size: var(--groesse-gross);
  line-height: 1;
}

.seitenkopf2 {
  display: grid;
  gap: var(--abstand-3);
  margin-bottom: var(--abstand-4);
}

.seitenkopf2__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--abstand-2) var(--abstand-4);
}

.seitenkopf2__text {
  display: grid;
  gap: var(--abstand-0);
  min-width: 0;
}

.seitenkopf2__unter {
  color: var(--farbe-text-2);
}

.seitenkopf2__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
}

.toolbar__filter,
.toolbar__chips,
.toolbar__rechts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-2);
}

.toolbar__rechts {
  margin-left: auto;
}

.auswahlfeld--chip {
  border-radius: var(--radius-rund);
  padding-left: var(--abstand-3);
  background-color: var(--farbe-flaeche);
}

.auswahlfeld--aktiv {
  border-color: var(--farbe-markierung);
  background-color: var(--farbe-flaeche-3);
}

.skeleton {
  display: grid;
  gap: var(--abstand-3);
}

.skeleton__kopf,
.skeleton__block {
  border-radius: var(--radius-panel);
  background: linear-gradient(90deg, var(--farbe-flaeche-2), var(--farbe-flaeche-3), var(--farbe-flaeche-2));
  background-size: 200% 100%;
  animation: skeleton-glanz 1.4s ease-in-out infinite;
}

.skeleton__kopf {
  height: 3.5rem;
  max-width: 24rem;
}

.skeleton__block {
  height: 7rem;
}

@keyframes skeleton-glanz {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.fehlerzustand {
  display: grid;
  gap: var(--abstand-2);
  justify-items: start;
  max-width: var(--breite-text);
  padding: var(--abstand-4);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-panel);
}

/* Board: Spaltenköpfe, Dichte, eigenes Scrollen je Spalte */

.spalte__titel {
  position: relative;
  padding-top: var(--abstand-1);
}

/* Dezente Farbmarkierung je Spalte aus vorhandenen Tokens. */
.spalte {
  --spalte-farbe: var(--farbe-text-3);
  border-top: 0.1875rem solid var(--spalte-farbe);
}

.spalte--heute {
  --spalte-farbe: var(--farbe-markierung);
}

.spalte--diese_woche {
  --spalte-farbe: var(--farbe-hinweis);
}

.spalte--wartet_auf {
  --spalte-farbe: var(--farbe-warnung);
}

.spalte--erledigt {
  --spalte-farbe: var(--farbe-balken);
}

.spalte__zahl {
  margin-left: auto;
  padding: 0 0.6em;
  border-radius: var(--radius-rund);
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text-2);
}

@media (min-width: 900px) {
  .spalte {
    max-height: calc(100dvh - 15rem);
    min-height: 0;
  }

  .spalte .kartenliste[data-bucket] {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.board--kompakt .karte {
  padding-bottom: 0;
}

.board--kompakt .karte__meta {
  flex-wrap: nowrap;
  overflow: hidden;
}

.board--kompakt .karte__aktionen {
  display: none;
}

.board--kompakt .karte__titel {
  min-height: 2.25rem;
  padding: var(--abstand-1) 0;
}

.board--kompakt .haken {
  flex-basis: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
}

.karte__meta {
  gap: var(--abstand-0) var(--abstand-1);
}

.tabellenrahmen {
  overflow-x: auto;
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-panel);
  box-shadow: var(--schatten-karte);
}

.tabelle {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: var(--groesse-klein);
}

.tabelle th {
  padding: var(--abstand-2) var(--abstand-3);
  text-align: left;
  font-weight: var(--gewicht-mittel);
  color: var(--farbe-text-3);
  border-bottom: var(--linie) solid var(--farbe-linie);
  white-space: nowrap;
}

.tabelle td {
  padding: var(--abstand-haar) var(--abstand-3);
  border-top: var(--linie) solid var(--farbe-linie);
  vertical-align: middle;
}

.tabelle__zeile:first-child td {
  border-top: 0;
}

.tabelle__zeile:hover {
  background: var(--farbe-flaeche-2);
}

.tabelle__haken {
  width: var(--ziel-min);
  padding: 0;
}

.tabelle__titel {
  font-weight: var(--gewicht-mittel);
}

.tabelle__titel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
}

.tabelle .karte__titel {
  padding: 0;
}

/* Projekte als Karten */

.projektkarte {
  display: block;
}

.projektkarte__link {
  display: grid;
  gap: var(--abstand-2);
  height: 100%;
  padding: var(--abstand-panel);
  background: var(--farbe-flaeche);
  border: var(--linie) solid var(--farbe-linie);
  border-radius: var(--radius-panel);
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  align-content: start;
  transition: border-color var(--dauer), background-color var(--dauer);
}

.projektkarte__link:hover {
  border-color: var(--farbe-linie-stark);
  background: var(--farbe-flaeche-2);
}

.projektkarte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-0) var(--abstand-2);
}

.projektkarte__name {
  font-family: var(--schrift-titel);
  font-weight: var(--gewicht-fett);
  font-size: var(--groesse-gross);
  overflow-wrap: anywhere;
}

.projektkarte__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1);
}

.tabs--projekt {
  margin-bottom: var(--abstand-3);
}

.projekt__inhalt {
  min-width: 0;
}

/* Einstellungen mit Unternavigation */

.einstellungen2 {
  display: grid;
  gap: var(--abstand-3);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.unternav {
  display: flex;
  gap: var(--abstand-1);
  overflow-x: auto;
  padding-bottom: var(--abstand-haar);
}

.unternav__knopf {
  flex: 0 0 auto;
  min-height: var(--ziel-min);
  padding: 0 var(--abstand-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--farbe-text-2);
  font-weight: var(--gewicht-mittel);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dauer), color var(--dauer);
}

.unternav__knopf:hover {
  background: var(--farbe-flaeche-3);
  color: var(--farbe-text);
}

.unternav__knopf[aria-current="page"] {
  background: var(--farbe-text);
  color: var(--farbe-grund);
}

.einstellungen2__inhalt {
  max-width: 48rem;
}

@container (min-width: 44rem) {
  .einstellungen2 {
    grid-template-columns: 14rem minmax(0, 1fr);
  }

  .unternav {
    flex-direction: column;
    overflow: visible;
    position: sticky;
    top: calc(var(--abstand-3));
  }
}

.kuerzelliste {
  display: grid;
  gap: var(--abstand-1);
  margin: 0;
}

.kuerzelliste__zeile {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--ziel-min);
  border-top: var(--linie) solid var(--farbe-linie);
}

.kuerzelliste dd {
  margin: 0;
}

/* Karten-Aktionen am Desktop nur bei Hover oder Fokus: ruhigere, kürzere Karten. Auf Touch bleiben sie sichtbar. */
@media (min-width: 900px) and (hover: hover) {
  .spalte .karte__aktionen,
  .phase .karte__aktionen {
    display: none;
  }

  .spalte .karte:hover .karte__aktionen,
  .spalte .karte:focus-within .karte__aktionen,
  .phase .karte:hover .karte__aktionen,
  .phase .karte:focus-within .karte__aktionen {
    display: flex;
  }
}

.plan--kompakt {
  --plan-label: 8.5rem;
}

.plan--kompakt .plan__phase {
  font-size: 0.6875rem;
}

/* Die Spalten-Tabs des Boards sind am Desktop ausgeblendet, die Projekt-Tabs nicht. */
.tabs.tabs--projekt {
  display: flex;
}