/* =============================================================================
   komponenten.css — alle UI-Bausteine
   Setzt tokens.css und app.css als bereits geladen voraus (kein @import!).
   Ladereihenfolge: tokens.css -> app.css -> komponenten.css -> print.css

   Inhalt:
     01  Sprunglink
     02  Kopfzeile, Navigation, mobiles Menue
     03  Theme-Umschalter (hell/dunkel)
     04  Fusszeile
     05  Schaltflaechen
     06  Formulare
     07  Suchfeld
     08  Filterleiste
     09  Karten
     10  Abzeichen und Chips
     11  Tabellen
     12  Flash-Meldungen
     13  Paginierung
     14  Brotkrumen
     15  Tabs
     16  Akkordeon
     17  Modal / Dialog
     18  Tooltip
     19  Fortschrittsbalken
     20  Regler (input[type=range])
     21  Inhaltsverzeichnis
     22  Autorenbox
     23  Leerzustand
     24  Skeleton-Platzhalter
     25  Muskelkarte und Legende
     26  Wochenvolumen-Heatmap
   ========================================================================== */

/* =============================================================================
   01  Sprunglink
   ========================================================================== */
.sprunglink {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skiplink);
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-weight: var(--fw-halbfett);
  text-decoration: none;
  box-shadow: var(--schatten-lg);
  translate: 0 -200%;
  transition: translate var(--dauer-schnell) var(--ease-raus);
}

.sprunglink:focus-visible {
  translate: 0 0;
  outline-color: var(--farbe-text);
}

/* =============================================================================
   02  Kopfzeile, Navigation, mobiles Menue
   ========================================================================== */
.kopfzeile {
  position: sticky;
  top: 0;
  z-index: var(--z-kopfzeile);
  background: hsl(var(--kanal-neutral) 8% / 0.88);
  border-bottom: var(--rand-breite) solid var(--farbe-rand);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:root[data-theme="light"] .kopfzeile {
  background: hsl(0 0% 100% / 0.9);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .kopfzeile {
    background: hsl(0 0% 100% / 0.9);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopfzeile {
    background: var(--farbe-bg);
  }
}

.kopfzeile__innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--kopfzeile-hoehe);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-schwarz);
  letter-spacing: var(--ls-eng);
  color: var(--farbe-text);
  text-decoration: none;
}

.marke__logo {
  inline-size: 2rem;
  block-size: 2rem;
  color: var(--farbe-akzent);
  flex: none;
}

.marke__wort {
  color: var(--farbe-akzent);
}

/* Hauptnavigation (ab Tablet horizontal) */
.hauptnav {
  display: none;
}

.hauptnav__liste {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hauptnav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--farbe-text-leise);
  font-weight: var(--fw-mittel);
  text-decoration: none;
  transition: color var(--dauer-schnell) var(--ease-standard),
    background-color var(--dauer-schnell) var(--ease-standard);
}

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

/* Aktive Seite: nicht nur Farbe, sondern auch Unterstrich und Fettung */
.hauptnav__link[aria-current="page"] {
  color: var(--farbe-akzent);
  font-weight: var(--fw-halbfett);
  box-shadow: inset 0 -2px 0 0 var(--farbe-akzent);
}

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

/* Menue-Schalter nur mobil */
.menue-schalter {
  display: inline-grid;
  place-items: center;
  inline-size: var(--ziel-min);
  block-size: var(--ziel-min);
  border-radius: var(--radius-md);
  border: var(--rand-breite) solid var(--farbe-rand);
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
}

.menue-schalter__balken,
.menue-schalter__balken::before,
.menue-schalter__balken::after {
  display: block;
  inline-size: 1.25rem;
  block-size: 2px;
  border-radius: var(--radius-voll);
  background: currentColor;
  transition: translate var(--dauer-normal) var(--ease-standard),
    rotate var(--dauer-normal) var(--ease-standard),
    opacity var(--dauer-sofort) var(--ease-standard);
}

.menue-schalter__balken {
  position: relative;
}

.menue-schalter__balken::before,
.menue-schalter__balken::after {
  content: "";
  position: absolute;
  left: 0;
}

.menue-schalter__balken::before { top: -6px; }
.menue-schalter__balken::after { top: 6px; }

.menue-schalter[aria-expanded="true"] .menue-schalter__balken {
  background: transparent;
}

.menue-schalter[aria-expanded="true"] .menue-schalter__balken::before {
  translate: 0 6px;
  rotate: 45deg;
}

.menue-schalter[aria-expanded="true"] .menue-schalter__balken::after {
  translate: 0 -6px;
  rotate: -45deg;
}

/* Mobiles Menue: einklappbares Panel unterhalb der Kopfzeile */
.mobilmenue {
  position: fixed;
  inset: var(--kopfzeile-hoehe) 0 auto 0;
  z-index: var(--z-menue);
  max-height: calc(100svh - var(--kopfzeile-hoehe));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4) var(--container-pad) var(--space-8);
  background: var(--farbe-bg);
  border-bottom: var(--rand-breite) solid var(--farbe-rand);
  box-shadow: var(--schatten-lg);
  transition: translate var(--dauer-normal) var(--ease-standard),
    opacity var(--dauer-schnell) var(--ease-standard),
    visibility var(--dauer-normal);
}

.mobilmenue[hidden] {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  translate: 0 -0.75rem;
  pointer-events: none;
}

.mobilmenue__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobilmenue__link {
  display: flex;
  align-items: center;
  min-height: var(--ziel-min);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--farbe-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-mittel);
  text-decoration: none;
}

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

.mobilmenue__link[aria-current="page"] {
  color: var(--farbe-akzent);
  font-weight: var(--fw-halbfett);
  background: var(--farbe-akzent-weich);
}

.mobilmenue__trenner {
  margin-block: var(--space-4);
}

@media (min-width: 768px) {
  .hauptnav {
    display: block;
  }

  .menue-schalter,
  .mobilmenue {
    display: none !important;
  }
}

/* =============================================================================
   03  Theme-Umschalter (hell/dunkel)
   ========================================================================== */
.theme-umschalter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-voll);
  border: var(--rand-breite) solid var(--farbe-rand);
  background: var(--farbe-flaeche);
}

.theme-umschalter__knopf {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  min-height: 0;
  position: relative;
  border-radius: var(--radius-voll);
  color: var(--farbe-text-schwach);
  transition: color var(--dauer-schnell) var(--ease-standard),
    background-color var(--dauer-schnell) var(--ease-standard);
}

/* Trefferflaeche bleibt 44px, ohne die Optik aufzublaehen */
.theme-umschalter__knopf::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  inline-size: var(--ziel-min);
  block-size: var(--ziel-min);
}

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

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

.theme-umschalter__icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* =============================================================================
   04  Fusszeile
   ========================================================================== */
.fusszeile {
  margin-block-start: auto;
  padding-block: var(--space-12) var(--space-8);
  background: var(--farbe-flaeche);
  border-top: var(--rand-breite) solid var(--farbe-rand);
  color: var(--farbe-text-leise);
  font-size: var(--fs-sm);
}

.fusszeile__raster {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .fusszeile__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .fusszeile__raster {
    grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
  }
}

.fusszeile__titel {
  margin-block-end: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--farbe-text);
}

.fusszeile__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fusszeile__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel-min);
  color: var(--farbe-text-leise);
  text-decoration: none;
}

.fusszeile__liste a:hover {
  color: var(--farbe-akzent);
  text-decoration: underline;
}

.fusszeile__schluss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-6);
  border-top: var(--rand-breite) solid var(--farbe-rand-leise);
  color: var(--farbe-text-schwach);
  font-size: var(--fs-xs);
}

/* =============================================================================
   05  Schaltflaechen
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--ziel-min);
  padding: var(--space-2) var(--space-5);
  border: var(--rand-breite) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-halbfett);
  line-height: var(--lh-knapp);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dauer-schnell) var(--ease-standard),
    border-color var(--dauer-schnell) var(--ease-standard),
    color var(--dauer-schnell) var(--ease-standard),
    box-shadow var(--dauer-schnell) var(--ease-standard),
    transform var(--dauer-sofort) var(--ease-standard);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn__icon {
  inline-size: 1.125em;
  block-size: 1.125em;
  flex: none;
}

/* Primaer */
.btn--primaer {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  box-shadow: var(--schatten-xs);
}

.btn--primaer:hover:not(:disabled) {
  background: var(--farbe-akzent-hell);
  border-color: var(--farbe-akzent-hell);
}

.btn--primaer:active:not(:disabled) {
  background: var(--farbe-akzent-dunkel);
}

/* Sekundaer */
.btn--sekundaer {
  background: var(--farbe-flaeche-hoch);
  border-color: var(--farbe-rand-stark);
  color: var(--farbe-text);
}

.btn--sekundaer:hover:not(:disabled) {
  background: var(--farbe-flaeche-hover);
  border-color: var(--farbe-akzent);
  color: var(--farbe-text);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--farbe-text-leise);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--farbe-flaeche-hover);
  color: var(--farbe-text);
}

/* Gefahr — nutzt bewusst die Statusfarbe, nicht das Muskelrot */
.btn--gefahr {
  background: var(--farbe-fehler);
  border-color: var(--farbe-fehler);
  color: var(--farbe-auf-fehler);
}

.btn--gefahr:hover:not(:disabled) {
  background: color-mix(in srgb, var(--farbe-fehler) 85%, black);
  border-color: color-mix(in srgb, var(--farbe-fehler) 85%, black);
}

.btn--gefahr-umriss {
  background: transparent;
  border-color: var(--farbe-fehler-rand);
  color: var(--farbe-fehler);
}

.btn--gefahr-umriss:hover:not(:disabled) {
  background: var(--farbe-fehler-weich);
}

/* Groessen */
.btn--sm {
  min-height: 2.25rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-8);
  font-size: var(--fs-lg);
  border-radius: var(--radius-lg);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--icon {
  padding-inline: var(--space-3);
  aspect-ratio: 1;
}

/* Gruppe zusammenhaengender Schaltflaechen */
.btn-gruppe {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.btn-gruppe--verbunden {
  gap: 0;
}

.btn-gruppe--verbunden .btn {
  border-radius: 0;
}

.btn-gruppe--verbunden .btn:first-child {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

.btn-gruppe--verbunden .btn:last-child {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

.btn-gruppe--verbunden .btn + .btn {
  margin-inline-start: -1px;
}

.btn-gruppe--verbunden .btn:focus-visible {
  z-index: var(--z-erhaben);
}

/* =============================================================================
   06  Formulare
   ========================================================================== */
.feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.feld + .feld {
  margin-block-start: var(--space-5);
}

.feld__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-halbfett);
  color: var(--farbe-text);
}

.feld__label .pflicht {
  color: var(--farbe-akzent);
  margin-inline-start: var(--space-1);
}

.feld__hilfe {
  font-size: var(--fs-sm);
  color: var(--farbe-text-schwach);
}

.eingabe,
.auswahl,
.textfeld {
  inline-size: 100%;
  min-height: var(--ziel-min);
  padding: var(--space-2) var(--space-3);
  border: var(--rand-breite) solid var(--farbe-rand-stark);
  border-radius: var(--radius-md);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  transition: border-color var(--dauer-schnell) var(--ease-standard),
    box-shadow var(--dauer-schnell) var(--ease-standard);
}

.textfeld {
  min-height: 8rem;
  padding: var(--space-3);
}

.eingabe::placeholder,
.textfeld::placeholder {
  color: var(--farbe-text-schwach);
  opacity: 1;
}

.eingabe:hover,
.auswahl:hover,
.textfeld:hover {
  border-color: var(--farbe-rand-stark);
}

.eingabe:focus-visible,
.auswahl:focus-visible,
.textfeld:focus-visible {
  border-color: var(--farbe-akzent);
  box-shadow: var(--ring-akzent);
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

.eingabe:disabled,
.auswahl:disabled,
.textfeld:disabled {
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-text-schwach);
  border-color: var(--farbe-rand);
}

.eingabe[readonly] {
  background: var(--farbe-flaeche-gedaempft);
}

/* Auswahl mit eigenem Pfeil (als Data-URI, kein externer Host) */
.auswahl {
  appearance: none;
  padding-inline-end: var(--space-9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 1rem;
}

.auswahl[multiple] {
  background-image: none;
  padding-inline-end: var(--space-3);
}

/* Fehlerzustand: Farbe UND Rahmenstaerke UND Textmeldung */
.feld--fehler .feld__label {
  color: var(--farbe-fehler);
}

.eingabe[aria-invalid="true"],
.auswahl[aria-invalid="true"],
.textfeld[aria-invalid="true"],
.feld--fehler .eingabe,
.feld--fehler .auswahl,
.feld--fehler .textfeld {
  border-color: var(--farbe-fehler);
  border-width: 2px;
  background: var(--farbe-fehler-weich);
}

.feld__fehler {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mittel);
  color: var(--farbe-fehler);
}

.feld__fehler::before {
  content: "\26A0";
  flex: none;
  font-size: 1em;
  line-height: var(--lh-normal);
}

/* Erfolgszustand */
.feld--ok .eingabe,
.feld--ok .auswahl,
.feld--ok .textfeld {
  border-color: var(--farbe-erfolg);
}

.feld__ok {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--farbe-erfolg);
}

/* Kontrollkaestchen und Radios */
.kontrolle {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--ziel-min);
  padding-block: var(--space-2);
  cursor: pointer;
}

.kontrolle input[type="checkbox"],
.kontrolle input[type="radio"] {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.15em;
  accent-color: var(--farbe-akzent);
  cursor: pointer;
}

.kontrolle__text {
  font-size: var(--fs-base);
}

.kontrolle__hilfe {
  display: block;
  font-size: var(--fs-sm);
  color: var(--farbe-text-schwach);
}

/* Eingabegruppe mit Praefix/Suffix (z. B. "kg", "Wdh.") */
.eingabe-gruppe {
  display: flex;
  align-items: stretch;
}

.eingabe-gruppe .eingabe {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.eingabe-gruppe__anhang {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border: var(--rand-breite) solid var(--farbe-rand-stark);
  border-inline-start: 0;
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text-leise);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* Formularabschnitt */
.formular-block {
  padding: var(--space-6);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
}

.formular-block__titel {
  margin-block-end: var(--space-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-halbfett);
}

.formular-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-top: var(--rand-breite) solid var(--farbe-rand-leise);
}

/* Zwei Felder nebeneinander ab Tablet */
@media (min-width: 768px) {
  .feld-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--space-5);
  }

  .feld-reihe .feld + .feld {
    margin-block-start: 0;
  }
}

/* =============================================================================
   07  Suchfeld
   ========================================================================== */
.suchfeld {
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 28rem;
}

.suchfeld__icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--farbe-text-schwach);
  pointer-events: none;
}

.suchfeld__eingabe {
  inline-size: 100%;
  min-height: var(--ziel-min);
  padding: var(--space-2) var(--space-10) var(--space-2) var(--space-10);
  border: var(--rand-breite) solid var(--farbe-rand-stark);
  border-radius: var(--radius-voll);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.suchfeld__eingabe::-webkit-search-cancel-button {
  display: none;
}

.suchfeld__eingabe:focus-visible {
  border-color: var(--farbe-akzent);
  box-shadow: var(--ring-akzent);
}

.suchfeld__loeschen {
  position: absolute;
  inset-inline-end: var(--space-2);
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  min-height: 0;
  border-radius: var(--radius-voll);
  color: var(--farbe-text-schwach);
}

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

.suchfeld__eingabe:placeholder-shown ~ .suchfeld__loeschen {
  display: none;
}

/* =============================================================================
   08  Filterleiste
   ========================================================================== */
.filterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
}

.filterleiste__gruppe {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.filterleiste__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--farbe-text-schwach);
}

.filterleiste__aktionen {
  display: flex;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* Aktive Filter als entfernbare Chips */
.aktive-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.aktive-filter__anzahl {
  font-size: var(--fs-sm);
  color: var(--farbe-text-leise);
}

@media (min-width: 1024px) {
  .filterleiste--klebrig {
    position: sticky;
    top: calc(var(--kopfzeile-hoehe) + var(--space-4));
    z-index: var(--z-klebrig);
  }
}

/* =============================================================================
   09  Karten
   ========================================================================== */
.karte {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
  overflow: hidden;
  transition: border-color var(--dauer-normal) var(--ease-standard),
    box-shadow var(--dauer-normal) var(--ease-standard),
    transform var(--dauer-normal) var(--ease-standard);
}

.karte__medien {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--farbe-flaeche-hoch);
}

.karte__medien > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.karte__koerper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1 1 auto;
  padding: var(--space-5);
}

.karte__titel {
  font-size: var(--fs-lg);
  font-weight: var(--fw-halbfett);
  line-height: var(--lh-knapp);
}

.karte__titel a {
  color: inherit;
  text-decoration: none;
}

/* Ganze Karte klickbar, ohne Verschachtelung von Links */
.karte__titel a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.karte__text {
  font-size: var(--fs-sm);
  color: var(--farbe-text-leise);
}

.karte__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--farbe-text-schwach);
}

.karte__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: var(--rand-breite) solid var(--farbe-rand-leise);
  background: var(--farbe-flaeche-hoch);
}

.karte--verlinkt:hover,
.karte:focus-within {
  border-color: var(--farbe-akzent);
  box-shadow: var(--schatten-md);
}

.karte--verlinkt:hover {
  transform: translateY(-2px);
}

.karte--flach {
  border: 0;
  background: var(--farbe-flaeche-hoch);
}

.karte--hervor {
  border-color: var(--farbe-akzent);
  box-shadow: var(--ring-akzent);
}

/* Container Query: ab 28rem Kartenbreite Bild und Text nebeneinander */
@container karten (min-width: 28rem) {
  .karte--anpassend {
    flex-direction: row;
  }

  .karte--anpassend .karte__medien {
    flex: 0 0 40%;
    aspect-ratio: auto;
  }
}

/* Kennzahlkarte */
.messwert {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
}

.messwert__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--farbe-text-schwach);
}

.messwert__zahl {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-fett);
  line-height: var(--lh-eng);
  color: var(--farbe-text);
  /* Naehrwerte, Plan-Kennzahlen und Verwaltungszaehler stehen oft
     untereinander. Gleich breite Ziffern lassen sie fluchten. */
  font-variant-numeric: tabular-nums;
}

.messwert__zusatz {
  font-size: var(--fs-sm);
  color: var(--farbe-text-leise);
}

/* =============================================================================
   10  Abzeichen und Chips
   ========================================================================== */
.abzeichen {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-2);
  border: var(--rand-breite) solid var(--farbe-rand-stark);
  border-radius: var(--radius-sm);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text-leise);
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  line-height: 1.5;
  white-space: nowrap;
}

.abzeichen--akzent {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent-weich);
  color: var(--farbe-akzent);
}

.abzeichen--erfolg {
  border-color: var(--farbe-erfolg-rand);
  background: var(--farbe-erfolg-weich);
  color: var(--farbe-erfolg);
}

.abzeichen--warnung {
  border-color: var(--farbe-warnung-rand);
  background: var(--farbe-warnung-weich);
  color: var(--farbe-warnung);
}

.abzeichen--fehler {
  border-color: var(--farbe-fehler-rand);
  background: var(--farbe-fehler-weich);
  color: var(--farbe-fehler);
}

.abzeichen--info {
  border-color: var(--farbe-info-rand);
  background: var(--farbe-info-weich);
  color: var(--farbe-info);
}

/* Schwierigkeitsgrad: zusaetzlich zur Farbe ein Punktsymbol */
.abzeichen--stufe::before {
  content: "\25CF";
  font-size: 0.7em;
}

.abzeichen--stufe-mittel::before { content: "\25CF\25CF"; letter-spacing: 1px; }
.abzeichen--stufe-schwer::before { content: "\25CF\25CF\25CF"; letter-spacing: 1px; }

/* Chip: interaktiv, z. B. Filterwert */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: var(--rand-breite) solid var(--farbe-rand-stark);
  border-radius: var(--radius-voll);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-leise);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mittel);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dauer-schnell) var(--ease-standard),
    background-color var(--dauer-schnell) var(--ease-standard),
    color var(--dauer-schnell) var(--ease-standard);
}

.chip:hover {
  border-color: var(--farbe-akzent);
  color: var(--farbe-text);
}

/* Gewaehlter Chip: Farbe plus Haken plus Fettung */
.chip[aria-pressed="true"],
.chip.ist-aktiv {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-weight: var(--fw-halbfett);
}

.chip[aria-pressed="true"]::before,
.chip.ist-aktiv::before {
  content: "\2713";
  font-weight: var(--fw-fett);
}

.chip__entfernen {
  display: inline-grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  min-height: 0;
  margin-inline-end: calc(var(--space-1) * -1);
  border-radius: var(--radius-voll);
  color: inherit;
  opacity: 0.75;
}

.chip__entfernen:hover {
  opacity: 1;
  background: hsl(0 0% 0% / 0.15);
}

.chip-liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =============================================================================
   11  Tabellen
   ========================================================================== */
.tabelle-scroll {
  inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
}

/* Tastaturbedienbarer Scrollbereich braucht sichtbaren Fokus */
.tabelle-scroll:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
}

.tabelle {
  inline-size: 100%;
  min-inline-size: 36rem;
  font-size: var(--fs-sm);
  text-align: left;
}

.tabelle caption {
  padding: var(--space-3) var(--space-4);
  color: var(--farbe-text-leise);
  font-size: var(--fs-sm);
  text-align: left;
}

.tabelle th,
.tabelle td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--rand-breite) solid var(--farbe-rand-leise);
  vertical-align: middle;
}

.tabelle thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-erhaben);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  white-space: nowrap;
}

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

.tabelle tbody tr:hover {
  background: var(--farbe-flaeche-hover);
}

.tabelle--gestreift tbody tr:nth-child(even) {
  background: var(--farbe-flaeche-gedaempft);
}

.tabelle--kompakt th,
.tabelle--kompakt td {
  padding: var(--space-2) var(--space-3);
}

.tabelle .zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sortierbare Spaltenkoepfe */
.tabelle th[aria-sort] .sortknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  min-height: 0;
}

.tabelle th[aria-sort="ascending"] .sortknopf::after { content: "\25B2"; }
.tabelle th[aria-sort="descending"] .sortknopf::after { content: "\25BC"; }
.tabelle th[aria-sort="none"] .sortknopf::after {
  content: "\21C5";
  opacity: 0.5;
}

/* Erste Spalte fixieren, wenn horizontal gescrollt wird */
.tabelle--fixe-spalte th:first-child,
.tabelle--fixe-spalte td:first-child {
  position: sticky;
  inset-inline-start: 0;
  background: var(--farbe-flaeche);
  border-inline-end: var(--rand-breite) solid var(--farbe-rand);
}

.tabelle--fixe-spalte thead th:first-child {
  z-index: calc(var(--z-erhaben) + 1);
  background: var(--farbe-flaeche-hoch);
}

/* =============================================================================
   12  Flash-Meldungen
   ========================================================================== */
.flash {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-inline-start-width: 4px;
  border-radius: var(--radius-md);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
}

.flash + .flash {
  margin-block-start: var(--space-3);
}

.flash__icon {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin-block-start: 0.15em;
}

.flash__inhalt {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.flash__titel {
  font-weight: var(--fw-halbfett);
  margin-block-end: var(--space-1);
}

.flash__text {
  font-size: var(--fs-sm);
  color: var(--farbe-text-leise);
}

.flash__schliessen {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  min-height: 0;
  border-radius: var(--radius-sm);
  color: var(--farbe-text-schwach);
}

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

/* Zustandsvarianten: Farbe, Rahmen und Symbol (nie nur Farbe) */
.flash--erfolg {
  border-color: var(--farbe-erfolg-rand);
  border-inline-start-color: var(--farbe-erfolg);
  background: var(--farbe-erfolg-weich);
}

.flash--erfolg .flash__icon { color: var(--farbe-erfolg); }

.flash--warnung {
  border-color: var(--farbe-warnung-rand);
  border-inline-start-color: var(--farbe-warnung);
  background: var(--farbe-warnung-weich);
}

.flash--warnung .flash__icon { color: var(--farbe-warnung); }

.flash--fehler {
  border-color: var(--farbe-fehler-rand);
  border-inline-start-color: var(--farbe-fehler);
  background: var(--farbe-fehler-weich);
}

.flash--fehler .flash__icon { color: var(--farbe-fehler); }

.flash--info {
  border-color: var(--farbe-info-rand);
  border-inline-start-color: var(--farbe-info);
  background: var(--farbe-info-weich);
}

.flash--info .flash__icon { color: var(--farbe-info); }

/* Schwebende Meldungen oben rechts */
.flash-bereich {
  position: fixed;
  top: calc(var(--kopfzeile-hoehe) + var(--space-4));
  inset-inline-end: var(--space-4);
  z-index: var(--z-flash);
  inline-size: min(24rem, calc(100vw - var(--space-8)));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.flash-bereich .flash {
  box-shadow: var(--schatten-lg);
  animation: flash-rein var(--dauer-normal) var(--ease-feder) both;
}

@keyframes flash-rein {
  from { opacity: 0; translate: 0 -0.5rem; }
  to { opacity: 1; translate: 0 0; }
}

/* =============================================================================
   13  Paginierung
   ========================================================================== */
.paginierung {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-10);
}

.paginierung__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.paginierung__link {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--ziel-min);
  min-height: var(--ziel-min);
  padding-inline: var(--space-2);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-md);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-leise);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mittel);
  text-decoration: none;
  transition: border-color var(--dauer-schnell) var(--ease-standard),
    color var(--dauer-schnell) var(--ease-standard);
}

.paginierung__link:hover {
  border-color: var(--farbe-akzent);
  color: var(--farbe-text);
}

.paginierung__link[aria-current="page"] {
  border-color: var(--farbe-akzent);
  background: var(--farbe-akzent);
  color: var(--farbe-auf-akzent);
  font-weight: var(--fw-fett);
}

.paginierung__link[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.paginierung__luecke {
  display: inline-grid;
  place-items: center;
  min-inline-size: var(--space-8);
  color: var(--farbe-text-schwach);
}

.paginierung__info {
  inline-size: 100%;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--farbe-text-schwach);
}

/* =============================================================================
   14  Brotkrumen
   ========================================================================== */
.brotkrumen {
  font-size: var(--fs-sm);
}

.brotkrumen__liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.brotkrumen__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--farbe-text-schwach);
}

.brotkrumen__eintrag + .brotkrumen__eintrag::before {
  content: "/";
  color: var(--farbe-rand-stark);
}

.brotkrumen a {
  color: var(--farbe-text-leise);
  text-decoration: none;
}

.brotkrumen a:hover {
  color: var(--farbe-akzent);
  text-decoration: underline;
}

.brotkrumen [aria-current="page"] {
  color: var(--farbe-text);
  font-weight: var(--fw-mittel);
}

/* =============================================================================
   15  Tabs
   ========================================================================== */
.tabs__liste {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: var(--rand-breite) solid var(--farbe-rand);
}

.tabs__liste::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--ziel-min);
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--farbe-text-leise);
  font-weight: var(--fw-mittel);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dauer-schnell) var(--ease-standard),
    border-color var(--dauer-schnell) var(--ease-standard);
}

.tabs__tab:hover {
  color: var(--farbe-text);
  border-bottom-color: var(--farbe-rand-stark);
}

/* Aktiver Tab: Farbe, Unterstrich und Fettung */
.tabs__tab[aria-selected="true"] {
  color: var(--farbe-akzent);
  border-bottom-color: var(--farbe-akzent);
  font-weight: var(--fw-halbfett);
}

.tabs__tab:focus-visible {
  outline-offset: -2px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tabs__panel {
  padding-block-start: var(--space-6);
}

.tabs__panel[hidden] {
  display: none;
}

/* =============================================================================
   16  Akkordeon
   ========================================================================== */
.akkordeon {
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
  overflow: hidden;
}

.akkordeon__punkt + .akkordeon__punkt {
  border-top: var(--rand-breite) solid var(--farbe-rand-leise);
}

.akkordeon__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--ziel-min);
  padding: var(--space-4) var(--space-5);
  font-weight: var(--fw-halbfett);
  color: var(--farbe-text);
  cursor: pointer;
  transition: background-color var(--dauer-schnell) var(--ease-standard);
}

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

.akkordeon__kopf:focus-visible {
  outline-offset: -2px;
}

.akkordeon__pfeil {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--farbe-text-schwach);
  transition: rotate var(--dauer-normal) var(--ease-standard);
}

.akkordeon__punkt[open] > .akkordeon__kopf {
  color: var(--farbe-akzent);
}

.akkordeon__punkt[open] .akkordeon__pfeil {
  rotate: 180deg;
}

.akkordeon__koerper {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--farbe-text-leise);
}

.akkordeon__punkt[open] .akkordeon__koerper {
  animation: akkordeon-auf var(--dauer-normal) var(--ease-raus) both;
}

@keyframes akkordeon-auf {
  from { opacity: 0; translate: 0 -0.25rem; }
  to { opacity: 1; translate: 0 0; }
}

/* =============================================================================
   17  Modal / Dialog
   ========================================================================== */
.modal {
  inline-size: min(36rem, calc(100vw - var(--space-8)));
  max-block-size: calc(100svh - var(--space-16));
  margin: auto;
  padding: 0;
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-xl);
  background: var(--farbe-flaeche);
  color: var(--farbe-text);
  box-shadow: var(--schatten-xl);
  overflow: hidden;
}

.modal::backdrop {
  background: var(--farbe-overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal[open] {
  animation: modal-rein var(--dauer-normal) var(--ease-feder) both;
}

@keyframes modal-rein {
  from { opacity: 0; scale: 0.97; translate: 0 0.5rem; }
  to { opacity: 1; scale: 1; translate: 0 0; }
}

.modal__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--rand-breite) solid var(--farbe-rand-leise);
}

.modal__titel {
  font-size: var(--fs-xl);
  font-weight: var(--fw-fett);
}

.modal__koerper {
  padding: var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  max-block-size: 60svh;
}

.modal__fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--rand-breite) solid var(--farbe-rand-leise);
  background: var(--farbe-flaeche-hoch);
}

.modal--weit {
  inline-size: min(52rem, calc(100vw - var(--space-8)));
}

/* Wenn ein Modal offen ist, Hintergrund nicht mitscrollen */
body:has(.modal[open]) {
  overflow: hidden;
}

/* Auf sehr kleinen Schirmen als Blatt von unten */
@media (max-width: 479px) {
  .modal {
    inline-size: 100vw;
    max-block-size: 92svh;
    margin: auto 0 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}

/* =============================================================================
   18  Tooltip
   Rein visuelle Ergaenzung — der Text muss zusaetzlich als
   aria-describedby oder sichtbarer Text vorhanden sein.
   ========================================================================== */
.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip__blase {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  z-index: var(--z-tooltip);
  translate: -50% 0.25rem;
  inline-size: max-content;
  max-inline-size: 16rem;
  padding: var(--space-2) var(--space-3);
  border: var(--rand-breite) solid var(--farbe-rand-stark);
  border-radius: var(--radius-md);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  line-height: var(--lh-knapp);
  text-align: center;
  box-shadow: var(--schatten-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dauer-schnell) var(--ease-standard),
    translate var(--dauer-schnell) var(--ease-standard),
    visibility var(--dauer-schnell);
}

.tooltip__blase::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% -50%;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  rotate: 45deg;
  background: var(--farbe-flaeche-hoch);
  border-right: var(--rand-breite) solid var(--farbe-rand-stark);
  border-bottom: var(--rand-breite) solid var(--farbe-rand-stark);
}

.tooltip:hover .tooltip__blase,
.tooltip:focus-within .tooltip__blase {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

.tooltip--unten .tooltip__blase {
  bottom: auto;
  top: calc(100% + var(--space-2));
}

.tooltip--unten .tooltip__blase::after {
  top: 0;
  translate: -50% -50%;
  rotate: 225deg;
}

/* =============================================================================
   19  Fortschrittsbalken
   ========================================================================== */
.fortschritt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fortschritt__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.fortschritt__label {
  font-weight: var(--fw-mittel);
  color: var(--farbe-text);
}

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

.fortschritt__spur {
  position: relative;
  block-size: 0.625rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-flaeche-hoch);
  border: var(--rand-breite) solid var(--farbe-rand);
  overflow: hidden;
}

.fortschritt__balken {
  block-size: 100%;
  inline-size: var(--fortschritt, 0%);
  border-radius: inherit;
  background: var(--farbe-akzent);
  transition: inline-size var(--dauer-langsam) var(--ease-raus);
}

/* Zustaende zusaetzlich zur Farbe durch Muster kenntlich machen */
.fortschritt--ueber .fortschritt__balken {
  background-color: var(--farbe-warnung);
  background-image: repeating-linear-gradient(
    45deg,
    hsl(0 0% 100% / 0.28) 0 4px,
    transparent 4px 8px
  );
}

.fortschritt--erreicht .fortschritt__balken {
  background-color: var(--farbe-erfolg);
}

.fortschritt--gross .fortschritt__spur {
  block-size: 1rem;
}

/* Natives progress-Element gleich gestalten */
progress.fortschritt__nativ {
  inline-size: 100%;
  block-size: 0.625rem;
  appearance: none;
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-voll);
  background: var(--farbe-flaeche-hoch);
  overflow: hidden;
}

progress.fortschritt__nativ::-webkit-progress-bar {
  background: var(--farbe-flaeche-hoch);
}

progress.fortschritt__nativ::-webkit-progress-value {
  background: var(--farbe-akzent);
  border-radius: var(--radius-voll);
}

progress.fortschritt__nativ::-moz-progress-bar {
  background: var(--farbe-akzent);
}

/* =============================================================================
   20  Regler (input[type=range])
   ========================================================================== */
.regler {
  inline-size: 100%;
  min-height: var(--ziel-min);
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.regler:focus-visible {
  outline: var(--fokus-breite) solid var(--farbe-fokus);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--radius-md);
}

/* WebKit */
.regler::-webkit-slider-runnable-track {
  block-size: 0.5rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-flaeche-hoch);
  border: var(--rand-breite) solid var(--farbe-rand);
}

.regler::-webkit-slider-thumb {
  appearance: none;
  margin-block-start: -0.5rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-akzent);
  border: 2px solid var(--farbe-bg);
  box-shadow: var(--schatten-sm);
  transition: scale var(--dauer-schnell) var(--ease-standard);
}

.regler:hover::-webkit-slider-thumb,
.regler:focus-visible::-webkit-slider-thumb {
  scale: 1.12;
}

/* Firefox */
.regler::-moz-range-track {
  block-size: 0.5rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-flaeche-hoch);
  border: var(--rand-breite) solid var(--farbe-rand);
}

.regler::-moz-range-progress {
  block-size: 0.5rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-akzent);
}

.regler::-moz-range-thumb {
  inline-size: 1.375rem;
  block-size: 1.375rem;
  border-radius: var(--radius-voll);
  background: var(--farbe-akzent);
  border: 2px solid var(--farbe-bg);
  box-shadow: var(--schatten-sm);
}

.regler:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.regler-feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.regler-feld__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.regler-feld__wert {
  min-inline-size: 3.5rem;
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--farbe-flaeche-hoch);
  color: var(--farbe-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-halbfett);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.regler-feld__skala {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--farbe-text-schwach);
}

/* =============================================================================
   21  Inhaltsverzeichnis
   ========================================================================== */
.inhaltsverzeichnis {
  padding: var(--space-5);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
  font-size: var(--fs-sm);
}

.inhaltsverzeichnis__titel {
  margin-block-end: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--farbe-text-schwach);
}

.inhaltsverzeichnis__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 2px solid var(--farbe-rand);
}

.inhaltsverzeichnis__liste .inhaltsverzeichnis__liste {
  margin-inline-start: var(--space-4);
  margin-block-start: var(--space-1);
  border-inline-start-width: 1px;
}

.inhaltsverzeichnis__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-inline-start: -2px;
  border-inline-start: 2px solid transparent;
  color: var(--farbe-text-leise);
  text-decoration: none;
  transition: color var(--dauer-schnell) var(--ease-standard),
    border-color var(--dauer-schnell) var(--ease-standard);
}

.inhaltsverzeichnis__link:hover {
  color: var(--farbe-text);
  border-inline-start-color: var(--farbe-rand-stark);
}

/* Aktiver Abschnitt: Farbe, Balken und Fettung */
.inhaltsverzeichnis__link.ist-aktiv,
.inhaltsverzeichnis__link[aria-current="true"] {
  color: var(--farbe-akzent);
  font-weight: var(--fw-halbfett);
  border-inline-start-color: var(--farbe-akzent);
}

.inhaltsverzeichnis--ausklappbar summary {
  margin-block-end: var(--space-3);
}

/* =============================================================================
   22  Autorenbox
   ========================================================================== */
.autorenbox {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  background: var(--farbe-flaeche);
}

.autorenbox__bild {
  flex: none;
  inline-size: 4rem;
  block-size: 4rem;
  border-radius: var(--radius-voll);
  object-fit: cover;
  background: var(--farbe-flaeche-hoch);
  border: 2px solid var(--farbe-rand);
}

.autorenbox__inhalt {
  flex: 1 1 14rem;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.autorenbox__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-halbfett);
  line-height: var(--lh-knapp);
}

.autorenbox__rolle {
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--farbe-akzent);
}

.autorenbox__text {
  font-size: var(--fs-sm);
  color: var(--farbe-text-leise);
}

.autorenbox__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

/* =============================================================================
   23  Leerzustand
   ========================================================================== */
.leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-6);
  border: 2px dashed var(--farbe-rand);
  border-radius: var(--radius-xl);
  background: var(--farbe-flaeche-gedaempft);
  text-align: center;
}

.leerzustand__icon {
  inline-size: 3rem;
  block-size: 3rem;
  color: var(--farbe-text-schwach);
}

.leerzustand__titel {
  font-size: var(--fs-xl);
  font-weight: var(--fw-halbfett);
  color: var(--farbe-text);
}

.leerzustand__text {
  max-inline-size: var(--breite-eng);
  color: var(--farbe-text-leise);
}

.leerzustand--fehler {
  border-color: var(--farbe-fehler-rand);
  background: var(--farbe-fehler-weich);
}

.leerzustand--fehler .leerzustand__icon {
  color: var(--farbe-fehler);
}

/* =============================================================================
   24  Skeleton-Platzhalter
   ========================================================================== */
.skeleton {
  position: relative;
  border-radius: var(--radius-sm);
  background-color: var(--farbe-flaeche-hoch);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    hsl(0 0% 100% / 0.07) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skeleton-welle 1.4s var(--ease-standard) infinite;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}

.skeleton * {
  visibility: hidden;
}

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

.skeleton--text {
  block-size: 0.75em;
  margin-block: 0.25em;
  border-radius: var(--radius-voll);
}

.skeleton--text-kurz { inline-size: 40%; }
.skeleton--text-mittel { inline-size: 70%; }
.skeleton--titel { block-size: 1.5em; inline-size: 55%; }

.skeleton--kreis {
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--radius-voll);
}

.skeleton--medien {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
}

.skeleton--knopf {
  inline-size: 8rem;
  block-size: var(--ziel-min);
  border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background-image: none;
  }
}

/* =============================================================================
   25  Muskelkarte und Legende
   Farbsemantik: idle = nicht beansprucht, primary = Hauptmuskel,
   secondary = Hilfsmuskel. Diese Farben sind ausschliesslich Daten.
   Fuer Nutzende mit Farbfehlsichtigkeit setzt ein Umschalter die Klasse
   .muster-an auf <html>; dann greifen zusaetzlich SVG-Schraffuren.
   Die Muster <pattern id="hatch-primary"> und <pattern id="hatch-secondary">
   gibt der Renderer genau einmal je Seite aus - sonst waeren es bei zwei
   Karten doppelte IDs. Ein <pattern> gilt im ganzen Dokument, die zweite
   Karte greift also auf dieselbe Definition zu.
   muessen im <defs>-Block des SVG vorhanden sein.
   ========================================================================== */
.muskelkarte {
  position: relative;
  display: block;
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1.6;
  background: var(--farbe-flaeche);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  container-type: inline-size;
}

.muskelkarte--doppelt {
  max-inline-size: 52rem;
  aspect-ratio: 1 / 0.9;
}

.muskelkarte__svg {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.muskelkarte__titel {
  margin-block-end: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--farbe-text-schwach);
  text-align: center;
}

/* Grundzustand: neutralgrau, klar sichtbar auf dem Hintergrund */
.muscle {
  fill: var(--muscle-idle);
  stroke: var(--muscle-kontur);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: fill var(--dauer-normal) var(--ease-standard),
    stroke var(--dauer-schnell) var(--ease-standard),
    opacity var(--dauer-schnell) var(--ease-standard);
}

.muscle.is-primary {
  fill: var(--muscle-primary);
  stroke: var(--muscle-primary-rand);
  stroke-width: 1.25;
}

.muscle.is-secondary {
  fill: var(--muscle-secondary);
  stroke: var(--muscle-secondary-rand);
  stroke-width: 1.25;
}

/* Interaktive Bereiche */
.muscle[tabindex],
.muscle[role="button"],
a > .muscle {
  cursor: pointer;
}

.muscle:hover {
  fill: var(--muscle-idle-hover);
  stroke: var(--farbe-text);
  stroke-width: 1.5;
}

.muscle.is-primary:hover,
.muscle.is-secondary:hover {
  stroke: var(--farbe-text);
  stroke-width: 2;
}

/* Fokus: deutlicher Umriss, der auf jedem Untergrund sichtbar ist */
.muscle:focus {
  outline: none;
}

.muscle:focus-visible {
  outline: none;
  stroke: var(--farbe-fokus);
  stroke-width: 3;
  paint-order: stroke fill;
  filter: drop-shadow(0 0 3px var(--farbe-fokus));
}

/* Ausgewaehlter Muskel (z. B. Filter aktiv) */
.muscle.ist-gewaehlt {
  stroke: var(--farbe-text);
  stroke-width: 2.5;
  stroke-dasharray: 4 2;
}

/* Musterdarstellung fuer schlechte Farbunterscheidung.
   Klasse .muster-an sitzt auf <html>. Die Kontur behaelt die Datenfarbe,
   damit Farbe und Muster gemeinsam informieren. */
:root.muster-an .muscle.is-primary {
  fill: url(#hatch-primary);
  stroke: var(--muscle-primary);
  stroke-width: 1.5;
}

:root.muster-an .muscle.is-secondary {
  fill: url(#hatch-secondary);
  stroke: var(--muscle-secondary);
  stroke-width: 1.5;
}

/* Farbe der Schraffurlinien im <pattern> */
.hatch-linie--primary {
  stroke: var(--muscle-primary);
  stroke-width: 2;
}

.hatch-linie--secondary {
  stroke: var(--muscle-secondary);
  stroke-width: 2;
}

.hatch-grund--primary { fill: var(--muscle-primary); opacity: 0.28; }
.hatch-grund--secondary { fill: var(--muscle-secondary); opacity: 0.28; }

/* Beschriftungen im SVG */
.muskelkarte__label {
  fill: var(--farbe-text-leise);
  font-size: 10px;
  font-weight: var(--fw-mittel);
  pointer-events: none;
}

/* Legende */
.muskel-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-md);
  background: var(--farbe-flaeche-hoch);
  font-size: var(--fs-sm);
  list-style: none;
}

.muskel-legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--farbe-text-leise);
}

.muskel-legende__probe {
  flex: none;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--radius-sm);
  border: var(--rand-breite) solid var(--muscle-kontur);
}

.muskel-legende__probe--idle {
  background: var(--muscle-idle);
  border-color: var(--muscle-idle-rand);
}

.muskel-legende__probe--primary {
  background: var(--muscle-primary);
  border-color: var(--muscle-primary-rand);
}

.muskel-legende__probe--secondary {
  background: var(--muscle-secondary);
  border-color: var(--muscle-secondary-rand);
}

/* Legendenproben zeigen das gleiche Muster wie die Karte */
:root.muster-an .muskel-legende__probe--primary {
  background-image: repeating-linear-gradient(
    45deg,
    hsl(0 0% 100% / 0.75) 0 2px,
    transparent 2px 6px
  );
}

:root.muster-an .muskel-legende__probe--secondary {
  background-image: repeating-linear-gradient(
    -45deg,
    hsl(0 0% 0% / 0.6) 0 2px,
    transparent 2px 6px
  );
}

.muskel-legende__hinweis {
  inline-size: 100%;
  font-size: var(--fs-xs);
  color: var(--farbe-text-schwach);
}

/* Umschalter fuer die Musterdarstellung */
.muster-schalter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--ziel-min);
  padding: var(--space-2) var(--space-3);
  border: var(--rand-breite) solid var(--farbe-rand-stark);
  border-radius: var(--radius-md);
  background: var(--farbe-flaeche);
  color: var(--farbe-text-leise);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mittel);
}

.muster-schalter[aria-pressed="true"] {
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent);
  background: var(--farbe-akzent-weich);
}

/* Textliste als nicht-visuelle Entsprechung der Karte */
.muskel-liste {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  font-size: var(--fs-sm);
}

.muskel-liste__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.muskel-liste__rolle {
  font-weight: var(--fw-halbfett);
  color: var(--farbe-text);
}

/* =============================================================================
   26  Wochenvolumen-Heatmap
   Fuenf Stufen: unterschiedliche Flaechenhelligkeit UND unterscheidbares
   Muster bzw. Rahmen, damit die Information nicht allein an der Farbe haengt.
   Jede Zelle traegt zusaetzlich den Zahlenwert als Text.
   ========================================================================== */
.heatmap {
  inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.heatmap__raster {
  display: grid;
  grid-template-columns: minmax(7rem, auto) repeat(7, minmax(2.75rem, 1fr));
  gap: var(--space-1);
  min-inline-size: 34rem;
}

.heatmap__kopf {
  padding: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-halbfett);
  letter-spacing: var(--ls-weit);
  text-transform: uppercase;
  color: var(--farbe-text-schwach);
  text-align: center;
}

.heatmap__zeilenkopf {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-mittel);
  color: var(--farbe-text);
}

.heatmap-zelle {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: var(--ziel-min);
  padding: var(--space-1);
  border: var(--rand-breite) solid var(--heat-rand);
  border-radius: var(--radius-sm);
  background-color: var(--heat-0);
  color: var(--heat-0-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-halbfett);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: transform var(--dauer-schnell) var(--ease-standard),
    box-shadow var(--dauer-schnell) var(--ease-standard);
}

.heatmap-zelle__wert {
  position: relative;
  z-index: 1;
}

a.heatmap-zelle:hover,
button.heatmap-zelle:hover {
  transform: scale(1.06);
  box-shadow: var(--schatten-sm);
  z-index: var(--z-erhaben);
}

/* Stufe 0: kein Volumen — gestrichelter Rahmen, keine Fuellung */
.heatmap-zelle.stufe-0 {
  background-color: var(--heat-0);
  color: var(--heat-0-text);
  border-style: dashed;
  border-color: var(--farbe-rand-stark);
}

/* Stufe 1: leichte Fuellung, feine Punkte */
.heatmap-zelle.stufe-1 {
  background-color: var(--heat-1);
  color: var(--heat-1-text);
  border-color: var(--heat-1);
  background-image: radial-gradient(
    var(--heat-muster) 1px,
    transparent 1.2px
  );
  background-size: 6px 6px;
}

/* Stufe 2: mittlere Fuellung, diagonale Schraffur */
.heatmap-zelle.stufe-2 {
  background-color: var(--heat-2);
  color: var(--heat-2-text);
  border-color: var(--heat-2);
  background-image: repeating-linear-gradient(
    45deg,
    var(--heat-muster) 0 1.5px,
    transparent 1.5px 7px
  );
}

/* Stufe 3: kraeftige Fuellung, dichtere Gegenschraffur, staerkerer Rahmen */
.heatmap-zelle.stufe-3 {
  background-color: var(--heat-3);
  color: var(--heat-3-text);
  border-width: 2px;
  border-color: var(--heat-4);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--heat-muster) 0 2px,
    transparent 2px 6px
  );
}

/* Stufe 4: volle Fuellung, Kreuzschraffur, dicker Rahmen */
.heatmap-zelle.stufe-4 {
  background-color: var(--heat-4);
  color: var(--heat-4-text);
  border-width: 2px;
  border-color: var(--farbe-text);
  background-image: repeating-linear-gradient(
      45deg,
      var(--heat-muster) 0 2px,
      transparent 2px 6px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--heat-muster) 0 2px,
      transparent 2px 6px
    );
}

/* Unterversorgte Muskelgruppe: Warnrahmen plus Eckmarkierung plus Text */
.heatmap-zelle.ist-unterversorgt,
.heatmap__zeilenkopf.ist-unterversorgt {
  outline: 2px dashed var(--farbe-warnung);
  outline-offset: -3px;
}

.heatmap-zelle.ist-unterversorgt::after {
  content: "!";
  position: absolute;
  top: 1px;
  inset-inline-end: 3px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-fett);
  line-height: 1;
  color: var(--farbe-warnung);
}

.heatmap__zeilenkopf.ist-unterversorgt {
  color: var(--farbe-warnung);
  border-radius: var(--radius-sm);
}

.heatmap__zeilenkopf.ist-unterversorgt::before {
  content: "\26A0";
  flex: none;
}

/* Hinweiszeile unter der Heatmap */
.heatmap__warnung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--rand-breite) solid var(--farbe-warnung-rand);
  border-inline-start-width: 4px;
  border-radius: var(--radius-md);
  background: var(--farbe-warnung-weich);
  color: var(--farbe-warnung);
  font-size: var(--fs-sm);
}

/* Legende der Heatmap */
.heatmap-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-block-start: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--farbe-text-schwach);
  list-style: none;
  padding: 0;
}

.heatmap-legende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.heatmap-legende__probe {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  border-radius: var(--radius-xs);
  border: var(--rand-breite) solid var(--heat-rand);
}

/* =============================================================================
   Rueckfall ohne JavaScript
   Das Inline-Skript im <head> entfernt .kein-js sofort. Bleibt die Klasse
   stehen, ist JavaScript aus: dann muss die Navigation trotzdem erreichbar
   sein, sonst waere die Seite auf Mobilgeraeten unbedienbar.
   ========================================================================== */

.kein-js .menue-schalter {
  display: none;
}

@media (max-width: 767px) {
  .kein-js .mobilmenue,
  .kein-js .mobilmenue[hidden] {
    display: block;
    position: static;
    visibility: visible;
    opacity: 1;
    translate: none;
    pointer-events: auto;
  }
}

/* Ohne JavaScript laesst sich der Farbmodus nicht speichern. */
.kein-js .theme-umschalter {
  display: none;
}

/* ==========================================================================
   Druckansicht: Elemente, die es nur dort gibt
   ========================================================================== */

/* Bedienelemente der Druckseite - im Ausdruck selbst weggeblendet
   (siehe print.css). */
.nur-bildschirm {
  display: flex;
}

/* Leeres Feld zum Eintragen des Gewichts mit dem Stift. */
.eintragfeld {
  min-width: 6ch;
  border-bottom: 1px solid var(--farbe-rand);
}

.druckansicht .plan-kopf dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-block: var(--space-4);
}

.druckansicht .plan-kopf dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--farbe-text-leise);
}

.druckansicht .plan-kopf dd {
  margin: 0;
  font-weight: 600;
}

.druckansicht .plan-tag,
.druckansicht .plan-woche,
.druckansicht .plan-progression {
  margin-block: var(--space-10);
}

.druckansicht .plan-fuss {
  margin-top: var(--space-12);
  padding-top: var(--space-4);
  border-top: 1px solid var(--farbe-rand);
}

/* ==========================================================================
   Rezepte: Zutatenliste, Nachkoch-Modus, Einkaufsliste
   ========================================================================== */

.zutatenliste {
  list-style: none;
  padding: 0;
}

.zutatenliste > li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--farbe-rand-leise);
}

.zutatenliste > li strong {
  min-width: 7ch;
  font-variant-numeric: tabular-nums;
}

/* --- Nachkoch-Modus ------------------------------------------------------ */

.kochmodus {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-bottom: env(safe-area-inset-bottom);
}

.kochmodus__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--farbe-rand);
}

.kochmodus__titel {
  margin: 0;
  font-weight: 600;
}

.kochmodus__zaehler {
  margin: 0;
  color: var(--farbe-text-leise);
  font-variant-numeric: tabular-nums;
}

.kochmodus__fortschritt {
  border-radius: 0;
}

.kochmodus__buehne {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}

/* Grosse Typografie: das Telefon liegt beim Kochen weiter weg als sonst. */
.kochschritt {
  max-width: 46rem;
  width: 100%;
}

.kochschritt__titel {
  font-size: var(--fs-3xl);
  margin-block: var(--space-2) var(--space-4);
}

.kochschritt__text {
  font-size: var(--fs-xl);
  line-height: 1.6;
}

.kochschritt__zutaten {
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background: var(--farbe-flaeche);
  border-radius: var(--radius-lg);
}

.kochschritt__zutaten ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
}

/* --- Timer --------------------------------------------------------------- */

.kochtimer {
  margin-top: var(--space-8);
  padding: var(--space-6);
  text-align: center;
  background: var(--farbe-flaeche);
  border-radius: var(--radius-lg);
}

.kochtimer__anzeige {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-4xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kochtimer--fertig {
  outline: 3px solid var(--farbe-warnung);
  animation: kochtimer-blinken 1s steps(2) 6;
}

.kochtimer--fertig .kochtimer__anzeige {
  color: var(--farbe-warnung);
}

@keyframes kochtimer-blinken {
  50% { background: color-mix(in srgb, var(--farbe-warnung) 18%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .kochtimer--fertig { animation: none; }
}

.kochmodus__navigation {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--farbe-rand);
}

.kochmodus__navigation .btn {
  flex: 1 1 0;
}

.kochmodus__fuss {
  margin: 0;
  padding: 0 var(--space-6) var(--space-4);
  text-align: center;
}

/* --- Einkaufsliste ------------------------------------------------------- */

.einkaufsliste {
  list-style: none;
  padding: 0;
}

.einkaufsliste__eintrag {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--farbe-rand-leise);
}

/* Kaestchen zum Abhaken mit dem Stift. */
.einkaufsliste__kasten {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  border: 1.5px solid var(--farbe-rand);
  border-radius: 3px;
}

/* ==========================================================================
   Gesundheitshinweis und Rechner
   ========================================================================== */

/* Der medizinische Hinweis ist Teil des Inhalts, nicht eine wegklickbare
   Meldung - deshalb kein Schliessknopf und deutlich abgesetzt. */
.gesundheitshinweis {
  margin-block: var(--space-6);
  padding: var(--space-6);
  border-left: 4px solid var(--farbe-warnung);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--farbe-warnung) 8%, var(--farbe-flaeche));
}

.gesundheitshinweis__titel {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-lg);
}

.gesundheitshinweis p {
  margin-block: var(--space-3);
}

.gesundheitshinweis p:last-child {
  margin-bottom: 0;
}

.rechner-ergebnis {
  padding-top: var(--space-6);
  border-top: 1px solid var(--farbe-rand);
}

/* Inhaltsverzeichnis: die zweite Ebene wird eingerueckt. */
.inhaltsverzeichnis__stufe-3 {
  padding-left: var(--space-4);
}

/* ==========================================================================
   Verwaltungsbereich
   ========================================================================== */

.admin-nav {
  position: sticky;
  top: var(--space-6);
}

.admin-nav__titel {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--farbe-text-leise);
}

.admin-nav__gruppe {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--farbe-text-leise);
}

.admin-nav__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--farbe-text);
  text-decoration: none;
}

.admin-nav__link:hover {
  background: var(--farbe-flaeche);
}

.admin-nav__link[aria-current="page"] {
  background: var(--farbe-flaeche);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--farbe-akzent);
}

/* Editor mit Live-Vorschau nebeneinander, auf kleinen Schirmen untereinander. */
.markdown-editor {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .markdown-editor {
    grid-template-columns: 1fr 1fr;
  }
}

.markdown-editor textarea {
  min-height: 30rem;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.markdown-editor__vorschau {
  max-height: 30rem;
  overflow-y: auto;
  padding: var(--space-4);
  background: var(--farbe-flaeche);
  border-radius: var(--radius-md);
}

/* ---------------------------------------------------------------------
   Wiederholfelder (Zutaten, Zubereitungsschritte)
   --------------------------------------------------------------------- */

.wiederholfeld {
  width: 100%;
}

.wiederholfeld td {
  vertical-align: top;
  padding-block: var(--space-2);
}

.wiederholfeld .eingabe {
  min-width: 0;
}

.wiederholfeld td.schmal,
.wiederholfeld th.schmal {
  width: 1%;
  white-space: nowrap;
}

.wiederholfeld--schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.wiederholzeile--block {
  padding: var(--space-4);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-md);
}

.feld--breit {
  flex: 2 1 18rem;
}

.feld.schmal {
  flex: 0 1 10rem;
}

.rechts {
  text-align: right;
}

input.rechts {
  text-align: right;
}

.formular-block--fehler {
  border-color: var(--farbe-fehler-rand);
}

/* ---------------------------------------------------------------------
   Naehrwertvorschau im Rezeptformular
   --------------------------------------------------------------------- */

.naehrwert-vorschau {
  padding: var(--space-4);
  background: var(--farbe-flaeche);
  border-radius: var(--radius-md);
}

.naehrwert-vorschau__zeile {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
}

.naehrwert-vorschau__warnung {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--farbe-warnung);
  background: var(--farbe-warnung-weich);
  color: var(--farbe-warnung);
  border-radius: var(--radius-sm);
}

/* Zuordnungskarte im Uebungsformular: zwei Ansichten nebeneinander. */

.muskelkarte--doppelt .muskelkarte__svg {
  max-width: 12rem;
  height: auto;
}

.muskelkarte[data-zuordnung] .muscle {
  transition: fill var(--dauer-schnell, 120ms) ease;
}

.muskelkarte[data-zuordnung] .muscle:focus-visible {
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 2px;
}

/* Medienraster im Verwaltungsbereich */

.medienraster__bild {
  display: block;
  width: 100%;
  height: 10rem;
  object-fit: cover;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--farbe-flaeche-tief, var(--farbe-flaeche));
}

.protokoll__text {
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   Plan-Editor
   --------------------------------------------------------------------- */

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

.trainingstag .eingabe[type="number"] {
  width: 5rem;
}

.tagnotizen {
  margin-block-start: var(--space-3);
  border-top: 1px solid var(--farbe-rand);
  padding-block-start: var(--space-3);
}

.tagnotizen__titel {
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--farbe-text-leise);
}

.tagnotizen__titel:focus-visible {
  outline: 2px solid var(--farbe-fokus);
  outline-offset: 2px;
}

[data-uebungszeile] {
  cursor: grab;
}

[data-uebungszeile] .eingabe,
[data-uebungszeile] .btn {
  cursor: auto;
}

.wird-gezogen {
  opacity: 0.5;
  outline: 2px dashed var(--farbe-akzent);
}

@media (prefers-reduced-motion: reduce) {
  .wird-gezogen {
    opacity: 1;
  }
}

/* Suchergebnisse */

.trefferliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.treffer__titel {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
}

.treffer__zusatz,
.treffer__text {
  margin: 0;
}

.filterleiste__gruppe--breit {
  flex: 3 1 20rem;
}

/* Honigtopf im Kontaktformular: fuer Menschen unsichtbar, fuer Skripte da. */

.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Abmelden in der Kopfzeile: das Formular darf die Reihe nicht sprengen. */

.abmelden-form {
  display: inline;
  margin: 0;
}