/* =============================================================================
   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);
  /* F-002: Flex-Kinder haben von Haus aus min-width:auto und koennen
     deshalb nicht unter ihre Inhaltsbreite schrumpfen. Wortmarke plus
     Aktionsblock brauchen zusammen rund 441 px - darunter lief die Zeile
     aus dem Fenster, der Menueknopf lag ausserhalb. Statt den Inhalt zu
     stauchen, darf die Zeile jetzt umbrechen. */
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

/* Damit die Wortmarke beim Umbruch nicht selbst ueberlaeuft. */
.kopfzeile__innen > * {
  min-inline-size: 0;
}

.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);
}

/* Restarbeiten A6.1: Auf dem Livesystem stand die Wortmarke bei 360 px dreizeilig.
   Unter 480 px eine Schriftstufe kleiner (vorhandener Token), damit gebraeuchliche
   Seitennamen einzeilig bleiben. Sehr lange Namen duerfen weiter umbrechen - lieber
   zweizeilig als abgeschnitten. */
@media (max-width: 479px) {
  .marke {
    font-size: var(--fs-base);
  }
}

/* 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);
  /* Angemeldet kommen "Mein Konto" und "Abmelden" dazu; ohne Umbruch lag der
     Menueknopf bei 320 bis 375 px 64 px ausserhalb des Fensters (Restarbeiten A2). */
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* 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);
}

/* F-003: Die Waagerechtnavigation braucht zusammen mit Wortmarke und
   Aktionsblock rund 1150 px. Bei dem alten Haltepunkt 768 px wurde sie
   eingeschaltet, obwohl sie nicht hineinpasste - gemessen lief die Seite
   von 768 bis 1149 px waagerecht ueber, bis zu 361 px weit. Unterhalb von
   1152 px bleibt es deshalb beim Mobilmenue, das dort vollstaendig
   bedienbar ist. */
@media (min-width: 1152px) {
  .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;
  /* Umbruch nur, wenn der Knopf sonst breiter als sein Platz waere - bei 320 px
     ragten "Lieber einen Plan nach Maß erzeugen" und "Testmail an die
     Kontaktadresse schicken" aus dem Fenster (Restarbeiten A2). In Tabellen
     bleibt es einzeilig, siehe unten. */
  white-space: normal;
  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);
}

.tabelle .btn {
  white-space: nowrap;
}

.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);
}

/* Z3: zur Textfarbe hin mischen, nicht zu Schwarz - dunkel wird die Flaeche
   so heller, hell dunkler, und die Schrift behaelt ihren Kontrast. */
.btn--gefahr:hover:not(:disabled) {
  background: color-mix(in srgb, var(--farbe-fehler) 85%, var(--farbe-text));
  border-color: color-mix(in srgb, var(--farbe-fehler) 85%, var(--farbe-text));
}

.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;
}

/* Zutatenwahl im Rezeptfilter: aufklappbar, damit die Tastatur nicht durch
   jedes Kaestchen muss; aufgeklappt eine scrollbare, gruppierte Liste. */
.zutatwahl {
  flex: 1 1 100%;
  min-inline-size: 0;
  border: var(--rand-breite) solid var(--farbe-rand);
  border-radius: var(--radius-md);
}

.zutatwahl__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-block-size: var(--ziel-min);
  padding: var(--space-2) var(--space-3);
}

.zutatwahl__kopf::before {
  content: "\25B8";
  color: var(--farbe-text-leise);
}

.zutatwahl[open] > .zutatwahl__kopf::before {
  content: "\25BE";
}

.zutatwahl__stand {
  min-inline-size: 0;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  color: var(--farbe-text-leise);
}

.zutatwahl__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-2) var(--space-4);
  max-block-size: 22rem;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3) var(--space-3);
  border-block-start: var(--rand-breite) solid var(--farbe-rand-leise);
}

.zutatwahl__liste > .feld__hilfe {
  grid-column: 1 / -1;
  margin: 0;
}

.zutatwahl__gruppe {
  min-inline-size: 0;
}

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

/* 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;
}

/* F-018: Ein Bedienelement in einer ganz klickbaren Karte braucht einen
   eigenen Stapelplatz. Sonst liegt die Deckflaeche des Titellinks darueber
   und faengt jeden Klick ab - der Knopf ist zwar zu sehen, aber tot. */
.karte__aktion {
  position: relative;
  z-index: 1;
}

.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);
  /* Textwerte wie "Ganzkörper" passten bei 720 px nicht in eine 150 px breite
     Kachel und ragten 21 px hinaus (Restarbeiten A2): trennen statt ueberlaufen. */
  overflow-wrap: break-word;
  hyphens: auto;
  /* 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);
}

/* Rezept-Tags: Ziel und Ernaehrungsform unterscheidbar (Nachbesserung B2.2) */
.abzeichen--ziel {
  border-color: var(--farbe-tag-ziel-rand);
  background: var(--farbe-tag-ziel-weich);
  color: var(--farbe-tag-ziel);
}

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

.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 {
  /* Positioniert, damit absolut gesetzte Beschriftungen (.nur-screenreader) in
     den Zellen im Scrollrahmen bleiben. Sonst bezogen sie sich auf einen
     Vorfahren ausserhalb, wurden nicht abgeschnitten und machten die Seite im
     Editor bis zu 244 px breiter als das Fenster (Restarbeiten A2). */
  position: relative;
  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;
}

/* Schmale Fassung fuer die Seitenleiste des Plan-Editors: Name und Zelle je Zeile.
   Dieselben Zellen und Stufen wie in der Planansicht (Restarbeiten A6.3). */
.heatmap--schmal .heatmap__raster {
  grid-template-columns: minmax(0, 1fr) minmax(2.75rem, auto);
  min-inline-size: 0;
}

.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;
}

/* Die Grenze muss mit dem Haltepunkt der Waagerechtnavigation
   uebereinstimmen (1152 px, siehe F-003). Stand sie wie frueher auf 767 px,
   gab es zwischen 768 und 1151 px ohne JavaScript ueberhaupt keine
   Navigation: die Waagerechtnavigation war noch aus, das Mobilmenue schon. */
@media (max-width: 1151px) {
  .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;
}

/* F-016: Der Nachkoch-Modus blendet serverseitig alle Schritte ausser dem
   ersten aus und schaltet sie per JavaScript weiter. Ohne JavaScript blieben
   damit 5 von 6 Schritten unerreichbar. Dann werden alle Schritte
   untereinander gezeigt - das Rezept bleibt vollstaendig lesbar. Die
   Schaltflaechen "Weiter" und "Zurueck" waeren dabei wirkungslos und
   verschwinden. */
.kein-js .kochschritt,
.kein-js .kochschritt[hidden] {
  /* !important, weil die Grundregel [hidden] ebenfalls !important traegt. */
  display: block !important;
}

.kein-js .kochmodus__navigation,
.kein-js .kochmodus__fuss {
  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 {
  /* Steht direkt unter der Schrittueberschrift, vor dem Text (Restarbeiten A6.6) */
  margin-block: var(--space-4) var(--space-6);
  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);
}

/* F-007: dieselbe Liste, aber als Vorschlagsliste dicht gesetzt. */
.trefferliste--eng {
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

.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;
}

/* Suche in eigener Zeile ueber die volle Breite, die Filter darunter
   (Nachbesserung B3). Solange der Platzhalter steht, gibt es keinen
   Loeschknopf - dessen Platz rechts bekommt dann der Platzhalter, sonst
   bricht er bei 320 px ab. */
.filterleiste__gruppe--voll {
  flex-basis: 100%;
}

.suchfeld--voll {
  max-inline-size: none;
}

.suchfeld--voll .suchfeld__eingabe:placeholder-shown {
  padding-inline-end: var(--space-3);
}

/* 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;
}