/* Basis-Styles der Anwendung — Farben/Typo kommen aus tokens.css (R-06).
   TODO: lokale Montserrat/Open-Sans-Webfonts einbinden (Design-System Kap. 4). */

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

/* Das hidden-Attribut gewinnt immer — auch gegen display:flex/block aus
   eigenen Regeln (sonst bleiben per JS ausgeblendete Bereiche sichtbar,
   z. B. die Beitragsarten bei Fördermitgliedschaft, WEB-MIT-010). */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4 { color: var(--color-heading); line-height: var(--leading-tight); }
h1 { font-size: var(--text-3xl); font-weight: var(--font-semi); }
h2 { font-size: var(--text-2xl); font-weight: var(--font-light); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.site-header {
  position: sticky;
  top: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  z-index: 10;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}
.site-logo {
  display: flex;
  align-items: center;
  font-weight: var(--font-bold);
  font-size: var(--text-lg);
  color: var(--color-heading);
  text-decoration: none;
}
/* Bild-Logo im Header (WEB-ALG-010): Wort-Bild-Marke der Altseite */
.site-logo img { display: block; width: 44px; height: 44px; }
.site-nav a {
  font-family: var(--font-button);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text);
  text-decoration: none;
  margin-left: var(--space-6);
  /* Menüpunkte brechen nie um („Das sind wir“, „Leihladen Leihbrary“ …) */
  white-space: nowrap;
}
.site-nav a:hover { color: var(--color-primary); }

main.container { padding-top: var(--space-12); padding-bottom: var(--space-16); }

.hero { max-width: 40rem; }
.hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); }
/* Einleitung über der Startseiten-Bühne (WEB-CMS-145): mittig, aber mit
   begrenzter Textbreite — zentrierter Fließtext über die volle Seitenbreite
   läse sich schlechter, nicht besser. */
.hero--zentriert { margin-inline: auto; text-align: center; }

.site-footer {
  background: var(--mslev-navy);
  color: var(--color-text-inverse);
  padding: var(--space-8) 0;
  font-size: var(--text-sm);
}
.site-footer a { color: var(--color-text-inverse); }

/* --- Katalog ------------------------------------------------------- */

.katalog-suche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.katalog-suche input[type="search"] {
  flex: 1 1 240px;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.katalog-suche input[type="search"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.katalog-suche__filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.chip {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
}
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip--aktiv {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}
.chip__anzahl { opacity: 0.7; }

.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--grid-gap);
}
.karte {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.karte:hover { box-shadow: var(--shadow-md); }

/* --- Katalogkarte mit Schnellzugriff (SHOP-FE-110) -------------------
   Die Hülle trägt den Rahmen, damit die Aktionszeile INNERHALB der Karte
   liegt — der Verweis darin nicht mehr, sonst hätte die Karte zwei Rahmen.
   Bewusst über den Kindselektor an die Hülle gebunden: `.karte` wird an
   mehreren Stellen als eigenständige Karte benutzt (Startseite des
   Backoffice, CMS-Unterseiten, Beitragskarten) und darf dort nicht
   verlieren, was sie ausmacht. */
.karte-huelle {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}
.karte-huelle:hover { box-shadow: var(--shadow-md); }
.karte-huelle > .karte {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 1;
}
.karte-huelle > .karte:hover { box-shadow: none; }

/* Aktionszeile: rechts unter dem Karteninhalt. Sie behält ihre Höhe auch
   ohne Knopf, damit die Karten einer Zeile nicht unterschiedlich hoch
   werden, wenn ein Artikel nicht verfügbar ist. */
.karte__aktion {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-3) var(--space-3);
}
.karte__korb-form { margin: 0; }
.karte__korb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-primary);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.karte__korb:hover,
.karte__korb:focus-visible {
  background: var(--color-primary);
  color: #fff;
}
.karte__korb-hinweis {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.karte__bild {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--color-bg-alt);
  color: var(--mslev-green);
}
.karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.karte__titel { font-weight: var(--font-semi); color: var(--color-heading); }
.karte__kaution { font-size: var(--text-sm); color: var(--color-text-muted); }
.karte__text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Kachelübersicht der Unterseiten auf CMS-Elternseiten (WEB-CMS-125),
   z. B. Projekte oder SDG-Erklärseiten unter „Unsere Ziele“ */
.unterseiten { margin-top: var(--space-8); }

.badge {
  align-self: flex-start;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.badge--verfuegbar { background: #E7F3E9; color: var(--color-success); }
.badge--verliehen { background: var(--color-bg-alt); color: var(--color-text-muted); }

.katalog-leer { color: var(--color-text-muted); }

/* --- Artikeldetail -------------------------------------------------- */

.brotkruemel { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.brotkruemel a { color: var(--color-link); text-decoration: none; }

.artikel-detail {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-12);
}
@media (max-width: 768px) {
  .artikel-detail { grid-template-columns: 1fr; gap: var(--space-6); }
}
.artikel-detail__hauptbild {
  width: 100%;
  border-radius: var(--radius-md);
}
.artikel-detail__thumb { width: 30%; border-radius: var(--radius-sm); margin-top: var(--space-2); }
.artikel-detail__h2 { font-size: var(--text-lg); font-weight: var(--font-semi); }
.artikel-detail__dauer { color: var(--color-text-muted); font-size: var(--text-sm); }

.kaution-box {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
}
.kaution-box__betrag { margin: 0 0 var(--space-2); color: var(--color-heading); }
.kaution-box__hinweis { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* Nebeneinanderstehende Aktionsknöpfe (z. B. Kaution erstatten/spenden) */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }

/* Interne Notizen und Statushistorie am Vorgang (SHOP-PF-280) */
.notiz-liste, .historie-liste { list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.notiz { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.notiz__text { margin: 0 0 var(--space-1); white-space: pre-line; }
.historie-liste li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.historie__zeit { display: inline-block; min-width: 8.5rem; color: var(--color-text-muted); font-size: var(--text-xs); }
/* Mail-Eintrag in der Chronik (SHOP-PF-430): abgesetzt, weil in einer gemischten
   Liste sonst nicht zu sehen ist, welche Zeile eine Zustellung war. */
.historie-liste li.chronik__eintrag--mail { border-left: 3px solid var(--color-border); padding-left: var(--space-2); }
/* Nicht zugestellt (SHOP-PF-435) — wie im Versandprotokoll. Die Farbe traegt die
   Aussage nicht allein: Im Text steht „nicht zugestellt“ (Design-System Kap. 9). */
.historie-liste li.chronik__eintrag--fehler { border-left-color: var(--color-error); color: var(--color-error); }
.menge-eingabe { width: 5rem; }

/* Statistik-Dashboard (SHOP-PF-510) */
.kachel-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.kachel { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.kachel__wert { display: block; font-size: var(--text-xl); font-weight: var(--font-semi); color: var(--color-heading); }
.kachel__titel { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.diagramm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--space-6); }
.diagramm-karte { margin: 0; }
.diagramm-karte figcaption { font-size: var(--text-sm); font-weight: var(--font-semi); color: var(--color-heading); margin-bottom: var(--space-2); }
.diagramm { width: 100%; height: auto; overflow: visible; }

/* Import/Export */
.feld-checkbox { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0; font-size: var(--text-sm); }
.import-bericht { white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: var(--text-xs); margin: 0; }

/* --- Vereinshomepage & CMS (Dokument 02) ------------------------------ */
.startblock { margin: var(--space-8) 0; }
.startblock__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.startblock h2 { margin-bottom: var(--space-4); }

/* Redaktionelle Startseiten-Blöcke (Dok 02 Kap. 3) */
.startblock--alt { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-8); }
.startblock__bild { display: block; max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 0 0 var(--space-4); }

/* Aktionskarten-Reihe (Werde Mitglied / Mach mit / Spende) */
.cta-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.cta-karte { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
.cta-karte h3 { margin: 0 0 var(--space-2); color: var(--color-heading); }
.cta-karte .prose { font-size: var(--text-sm); }

/* SDG-Fokus-Kacheln — die Farbe ist rein grafisch (R-06), lesbar ist der Name */
/* SDG-Abschnitt (WEB-CMS-150): offizielle Ziel-Icons in deutscher Sprache.
   Nummer und Zieltext stehen im Bild — Text daneben wäre eine Doppelung. */
.sdg-kacheln { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 160px)); gap: var(--space-4); }
.sdg-kachel { margin: 0; }
.sdg-kachel__icon { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.sdg-uebersicht { margin: var(--space-6) 0 0; }
.sdg-uebersicht img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: var(--radius-sm); }
.sdg-uebersicht__quelle { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 640px; }

/* Backoffice: Startseiten-Block-Formulare */
.block-karte { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-6); }
.block-form .feld { margin-bottom: var(--space-3); }

.karten-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-6); }
.beitrag-karte { padding: 0; overflow: hidden; }
.beitrag-karte__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.beitrag-karte__bild { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.beitrag-karte__text { padding: var(--space-4); }
.beitrag-karte__text h3 { margin: var(--space-1) 0; font-size: var(--text-lg); color: var(--color-heading); }
.beitrag-karte__kategorie { display: inline-block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); font-weight: var(--font-semi); }
.beitrag-karte__datum { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-2); }

.prose { max-width: 46rem; }
.prose.schmal { max-width: 34rem; }
.prose h2 { margin-top: var(--space-6); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.prose ul, .prose ol { margin: var(--space-3) 0 var(--space-4) var(--space-6); }
.prose blockquote { border-left: 4px solid var(--color-accent-text); margin: var(--space-4) 0; padding: var(--space-1) var(--space-4); color: var(--color-text-muted); }
.beitrag__bild { width: 100%; max-height: 26rem; object-fit: cover; margin: var(--space-4) 0; }
.beitrag__meta { color: var(--color-text-muted); font-size: var(--text-sm); }

.termin-liste { list-style: none; padding: 0; margin: var(--space-4) 0; }
.termin { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.termin__datum { min-width: 12rem; color: var(--color-text-muted); font-size: var(--text-sm); }
.termin__titel { font-weight: var(--font-semi); }
.termin__ort { color: var(--color-text-muted); font-size: var(--text-sm); }
.termin--abgesagt .termin__titel { text-decoration: line-through; }

.logo-wand { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; align-items: center; }
.logo-wand li { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); display: flex; align-items: center; }
.logo-wand a { display: flex; align-items: center; }
.logo-wand__logo { max-height: 64px; max-width: 180px; width: auto; height: auto; object-fit: contain; display: block; }

.blaettern { display: flex; align-items: center; gap: var(--space-4); justify-content: center; margin: var(--space-6) 0; }
.blaettern__stand { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Kalender-Monatsansicht */
.kalender-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-4) 0; }
.kalender__kopf { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }
.kalender__gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.kalender__tag { min-height: 6rem; background: var(--color-bg-alt); border-radius: var(--radius-sm); padding: var(--space-1); font-size: var(--text-xs); }
.kalender__tag--fremd { opacity: .45; }
.kalender__tag--heute { outline: 2px solid var(--color-primary); }
.kalender__ziffer { display: block; font-weight: var(--font-semi); color: var(--color-heading); }
.kalender__event { display: block; margin-top: 2px; padding: 1px 4px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-text-inverse); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kalender__event--abgesagt { background: var(--color-text-muted); text-decoration: line-through; }
@media (max-width: 640px) { .kalender__tag { min-height: 4rem; } .kalender__event { font-size: 0; padding: 3px; } }

/* Header-Dropdown */
.site-nav__gruppe { position: relative; display: inline-block; }
.site-nav__untermenu { display: none; position: absolute; left: 0; top: 100%; background: var(--color-bg, #fff); box-shadow: 0 6px 20px rgba(0,0,0,.12); border-radius: var(--radius-md); padding: var(--space-2); min-width: 12rem; z-index: 20; }
.site-nav__untermenu a { display: block; padding: var(--space-2) var(--space-3); }
.site-nav__gruppe:hover .site-nav__untermenu, .site-nav__gruppe:focus-within .site-nav__untermenu { display: block; }

/* Footer */
.site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-6); margin-bottom: var(--space-4); }
.site-footer__titel { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; }
.site-footer__liste { list-style: none; padding: 0; margin: 0; }
.site-footer__liste li { margin: var(--space-1) 0; }
.site-footer__copy { color: var(--color-text-muted); font-size: var(--text-sm); }

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

/* Team-Karten (WEB-ALG-050) */
/* Team-Sektion (WEB-ALG-050): Vorstand rund + hervorgehoben, weitere eckig. */
.team-person { text-align: center; }
.team-person__rund, .team-person__eckig { display: block; object-fit: cover; margin: 0 auto var(--space-3); background: var(--color-bg-alt); }
.team-person__rund { width: 150px; height: 150px; border-radius: 50%; box-shadow: var(--shadow-md); }
.team-person__eckig { width: 100%; aspect-ratio: 1; height: auto; border-radius: var(--radius-md); }
.team-person__initialen { display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-inverse); font-size: var(--text-2xl); font-weight: var(--font-semi); }
.team-person__rolle { color: var(--color-primary); font-family: var(--font-button); font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; }
.team-person__zitat { font-style: italic; font-size: var(--text-sm); margin: var(--space-2) auto 0; max-width: 32ch; }
.team-person__social { margin-top: var(--space-2); font-size: var(--text-sm); }

/* Vorstand zentriert; max-width fasst genau drei Karten (3·200px + 2·Gap),
   sodass die erste Reihe drei, die zweite zwei Karten zeigt — beide zentriert. */
.team-vorstand { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8) var(--space-6); margin: var(--space-6) auto 0; max-width: 660px; }
.team-person--gross { flex: 0 0 200px; max-width: 100%; }
.team-person--gross h3 { margin: 0 0 2px; font-size: var(--text-lg); color: var(--color-heading); }

.team-zwischen { margin: var(--space-12) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); font-family: var(--font-button); text-transform: uppercase; letter-spacing: var(--tracking-caps); font-weight: var(--font-bold); }
.team-weitere { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-6) var(--space-4); }
.team-person__name { margin: 0; font-size: var(--text-base); color: var(--color-heading); }
.team-person__rolle--klein { text-transform: none; letter-spacing: normal; font-family: var(--font-sans); font-weight: var(--font-regular); color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }

/* Inline-Formulare (Team & Partner) */
.inline-zeile { border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-1); }
.inline-form input[type=text], .inline-form input[type=url] { flex: 1; min-width: 8rem; }
.inline-vorschau { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius-sm); background: var(--color-bg-alt); flex-shrink: 0; }
.inline-check { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); white-space: nowrap; }

/* Drag-&-Drop-Sortierung der Team-Liste */
.team-zeile { display: flex; align-items: flex-start; gap: var(--space-2); }
.team-zeile__inhalt { flex: 1; min-width: 0; }
.team-zeile.zieht { opacity: 0.5; }
.team-zeile[draggable="true"] { background: var(--color-bg-alt); }
.griff { flex-shrink: 0; cursor: grab; border: 0; background: none; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; padding: var(--space-2) 4px; touch-action: none; }
.griff:active { cursor: grabbing; }
.griff:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* --- Formulare und Hinweise ----------------------------------------- */

.schmal { max-width: 34rem; }

.formular { margin-top: var(--space-6); }
.feld { margin-bottom: var(--space-4); }
.feld label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-heading);
}
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
/* Auswahlknöpfe nie auf Feldbreite strecken — sie stehen direkt vor ihrem Text */
.feld input[type="radio"],
.feld input[type="checkbox"] {
  width: auto;
  padding: 0;
  border: 0;
}
/* Mehrzeilige Felder (z. B. Nachricht im Kontaktformular, WEB-CMS-080):
   volle Feldbreite wie die Eingaben darüber; Höhe bestimmt das rows-Attribut,
   vertikal vergrößerbar */
.feld textarea { resize: vertical; }
.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
.feld--fehlerhaft input,
.feld--fehlerhaft textarea { border-color: var(--color-error); }
.feld__hinweis {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.feld__fehler {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-error);
}
/* Datums-Eingabefeld (WEB-ALG-070): Textfeld im konfigurierten Format plus
   Kalender-Knopf (datum-feld.js); der unsichtbare native Picker liegt unter
   dem Knopf, damit showPicker() dort andockt */
.datum-feld { position: relative; display: flex; align-items: stretch; gap: var(--space-2); }
.datum-feld input[type="text"] { flex: 1; min-width: 0; }
.datum-feld__kalender {
  flex: 0 0 auto;
  padding: 0 var(--space-3);
  font-size: var(--text-md);
  line-height: 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  cursor: pointer;
}
.datum-feld__kalender:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.datum-feld__picker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  pointer-events: none;
}

/* Eigener Kalender für den Ausleihzeitraum (SHOP-PF-224, kalender-auswahl.js):
   Nur Öffnungstage sind anklickbar — geschlossene stehen sichtbar, aber matt da.
   Sie ganz wegzulassen nähme dem Monat sein Raster und damit die Orientierung.

   Kompakter als in der ersten Fassung: Er ist ein Aufklapper über einem Feld, unter
   dem noch die Artikeltabelle steht — in voller Größe verdeckte er mehr davon als
   nötig, und die Fläche je Tag war auf ein Fingertippen ausgelegt, während er im
   Backoffice fast immer mit der Maus bedient wird.

   `--kalender-tag-groesse` ist die eine Stellschraube: 2.25rem sind 36 px und damit
   noch mit dem Finger zu treffen — das Backoffice wird auch am Tablet benutzt. Wer
   sie ändert, ändert Zeilenhöhe und Gitter zugleich. */
.kalender {
  --kalender-tag-groesse: 2.25rem;
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 16.5rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%);
}
.kalender__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.kalender__monat { font-weight: 600; font-size: var(--text-sm); }
.kalender__blaettern {
  min-width: var(--kalender-tag-groesse);
  padding: 0 var(--space-1);
  font-size: var(--text-base);
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  cursor: pointer;
}
.kalender__gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.kalender__wochentag {
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
  color: var(--color-text-muted);
}
.kalender__tag {
  min-height: var(--kalender-tag-groesse);
  padding: 0;
  font: inherit;
  font-size: var(--text-sm);
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  cursor: pointer;
}
.kalender__tag:hover:not([disabled]) { border-color: var(--color-border); }
.kalender__tag:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.kalender__tag[disabled] {
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0.45;
  cursor: not-allowed;
}
.kalender__tag--gewaehlt {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
}

.feld-reihe { display: flex; gap: var(--space-4); }
.feld-reihe > .feld { flex: 1; }
.feld--schmal { flex: 0 0 8rem; }
@media (max-width: 576px) {
  .feld-reihe { flex-direction: column; gap: 0; }
  .feld--schmal { flex: 1; }
}
/* Online-Mitgliedsantrag (WEB-MIT): Auswahlgruppen ohne Rahmen — die
   Browser-Standardrahmen der fieldsets wirken unruhig; Legenden erscheinen
   wie Feld-Beschriftungen */
.mitglied-formular fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  min-width: 0;
}
.mitglied-formular legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-heading);
}
/* .feld label setzt display:block — hier gewinnt die Flex-Zeile, damit
   Auswahlknopf und Text auf gleicher Höhe stehen */
.beitragsarten .feld-checkbox,
.mitglied-formular .feld-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  font-weight: var(--font-regular, 400);
}
.mitglied-formular .feld-checkbox input[type="radio"] { margin: 0; flex: 0 0 auto; }
/* Betrag/Turnus des individuellen Beitrags: dezent unter dem Auswahlpunkt */
.beitragsarten__individuell {
  margin: var(--space-2) 0 var(--space-3) var(--space-6);
}
.beitragsarten__individuell .feld { margin-bottom: 0; }

/* Familienmitglieder im Online-Mitgliedsantrag (WEB-MIT): je Person ein
   kompakter Slot — Beschriftungen dicht an den Feldern, Speichern/Entfernen
   rechts neben den Eingaben; gespeicherte Einträge erscheinen fixiert */
.familienmitglied {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.familienmitglied--gespeichert { background: var(--color-bg-alt); }
.familienmitglied--gespeichert input[readonly] { border-color: transparent; background: transparent; }
.familienmitglied__zeile { gap: var(--space-3); align-items: flex-end; }
.familienmitglied__zeile .feld { margin-bottom: var(--space-1); }
.familienmitglied__zeile .feld label { margin-bottom: 2px; }
.familienmitglied__zeile input[type="text"] { padding: var(--space-2) var(--space-3); }
.familienmitglied__aktionen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.familienmitglied .zustimmung { margin-top: var(--space-1); }

.formular__hinweis { font-size: var(--text-sm); color: var(--color-text-muted); }
.formular__wechsel { margin-top: var(--space-6); font-size: var(--text-sm); }

.hinweis {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-accent-text);
  background: var(--color-bg-alt);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
}
.hinweis--erfolg { border-left-color: var(--color-success); }
.hinweis--fehler { border-left-color: var(--color-error); color: var(--color-error); }

.btn--klein { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

.link-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-button);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text);
}
.link-button:hover { color: var(--color-primary); }
.site-nav { display: flex; align-items: center; }
/* Buttons in der Hauptnavigation („Konto anlegen") nicht umbrechen */
.site-nav .btn { white-space: nowrap; }
.site-nav__abmelden { margin-left: var(--space-6); }

/* Kennzahlen-Streifen der Vorgangsansicht (SHOP-PF-212, Weisung des Betreibers):
   die vier Zeitpunkte in einer Reihe statt als vierzeilige Definitionsliste.

   `minmax(0, 1fr)` und nicht `1fr`: `1fr` trägt implizit `min-width: auto`, und ein
   langes Datum mit Uhrzeit schöbe die Spalte dann über den Rand hinaus.

   `auto-fit` mit Mindestbreite statt fester Vierteilung: Bei einem abgeschlossenen
   Vorgang kommt ein fünftes Feld hinzu, und auf schmalen Fenstern brechen die
   Felder von selbst auf zwei Reihen um. Eine Medienabfrage müsste beide Fälle
   einzeln kennen. */
.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
}
.kennzahlen__feld {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
}
.kennzahlen__feld dt {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.kennzahlen__feld dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-heading);
}
/* Ein fehlender Zeitpunkt behält seine Fläche und nennt den Grund — matt, damit
   er nicht wie eine Angabe aussieht. */
.kennzahlen__leer { color: var(--color-text-muted); font-style: italic; }

/* --- Konto ---------------------------------------------------------- */

.konto-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6);
}
/* Schmalere Seitenspalte (z. B. „Versendete E-Mails“ auf der Vorgangsseite),
   damit die Positionstabelle mit Lieferumfang genug Platz hat (SHOP-PF-230) */
.konto-grid--schmale-seite { grid-template-columns: minmax(0, 5fr) minmax(0, 2fr); }
@media (max-width: 768px) { .konto-grid { grid-template-columns: 1fr; } }
.karte-flaeche {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.daten-liste { margin: 0; }
.daten-liste dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}
.daten-liste dd { margin: var(--space-1) 0 0; color: var(--color-heading); }

/* Dichte Variante für die Leseansicht der Stammdaten (SHOP-PF-312): Beschriftung
   und Wert stehen **nebeneinander** statt übereinander. Die aufrechte Form
   brauchte je Angabe zwei Zeilen plus Abstand; bei sieben Angaben war das die
   Fläche, die das Ladenteam beklagt hat.

   Der Umbruch auf eine Spalte kommt bei 640px, nicht bei 768: Ein Etikett von
   9rem und ein Wert daneben passen auch in ein halbes Fenster. */
.daten-liste--dicht { display: grid; grid-template-columns: 9rem minmax(0, 1fr); }
.daten-liste--dicht dt {
  margin: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.daten-liste--dicht dd {
  margin: 0;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.daten-liste--dicht dt:first-of-type,
.daten-liste--dicht dt:first-of-type + dd { border-top: 0; }
@media (max-width: 640px) {
  .daten-liste--dicht { grid-template-columns: 1fr; }
  .daten-liste--dicht dd { padding-top: 0; border-top: 0; }
}

/* Abzeichenzeile im Kopf der Kundenakte (SHOP-PF-312). Abzeichen statt
   Beschreibungsliste, weil am Ausgabetisch „darf ich ausgeben?“ die häufigste
   Frage ist — im Vorbeisehen zu beantworten. `align-items: center`, damit die
   zurückhaltenden Hinweise (Zwei-Faktor, Prüfer) auf der Grundlinie der
   Abzeichen sitzen. */
.konto-abzeichen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

/* Kennzahlen als Raster (SHOP-PF-287/312) — dieselben Zahlen wie zuvor in der
   Beschreibungsliste, nur nebeneinander statt untereinander. */
.kennzahlen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3) var(--space-6);
  margin: var(--space-4) 0 var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.kennzahlen-raster > div { display: flex; flex-direction: column; gap: 2px; }
.kennzahl__name {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}
.kennzahl__wert { color: var(--color-heading); }

/* Reiter der Kundenakte (SHOP-PF-312). Der aktive ist ein `span`, kein Verweis:
   Ein Verweis auf die Seite, auf der man steht, ist ein Klick ins Nichts. */
.reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.reiter__blatt {
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reiter__blatt:hover { color: var(--color-primary); }
.reiter__blatt--aktiv {
  color: var(--color-heading);
  border-bottom-color: var(--color-primary);
}
.reiter__anzahl { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Kontoverwaltung am Ende des Stammdaten-Reiters: abgesetzt, damit die
   Eingriffe nicht wie Teil der Stammdaten aussehen. */
.konto-verwaltung {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* --- Korb und Vorgänge ---------------------------------------------- */

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

/* Honeypot gegen Bots (SEC-APP-040): für Menschen unsichtbar. Als Klasse statt
   Inline-Style, da die strikte CSP (style-src 'self') Inline-Styles blockt. */
.honigtopf {
  position: absolute;
  left: -5000px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.feld-reihe--filter { align-items: flex-end; margin-bottom: 1.5rem; }
.eingabe--schmal { width: 5rem; }

.korb-link { position: relative; }
.korb-link__zaehler {
  display: inline-block;
  min-width: 1.4em;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  text-align: center;
}

.korb-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 768px) { .korb-layout { grid-template-columns: 1fr; } }

.korb-tabelle { width: 100%; border-collapse: collapse; }
.korb-tabelle th, .korb-tabelle td {
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}
.korb-tabelle thead th {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}
.korb-tabelle__betrag { text-align: right; white-space: nowrap; }
.korb-tabelle tfoot th, .korb-tabelle tfoot td { border-bottom: 0; color: var(--color-heading); }

.mengen-form { display: flex; align-items: center; gap: var(--space-2); }
.mengen-form input {
  width: 4.5rem;
  padding: var(--space-2);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.link-button--klein { font-size: var(--text-xs); }

.in-korb-form { display: flex; align-items: flex-end; gap: var(--space-4); }
.in-korb-form .feld { margin-bottom: 0; }

.feld--zustimmung { margin: var(--space-6) 0; }
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--color-text);
}
.zustimmung input { width: auto; margin-top: 3px; }

/* Kartenwerk für die Listen des Backoffice (SHOP-PF-210/311). Es wird von
   **drei** Listen gemeinsam benutzt: Tagesboard, „Alle Vorgänge" und Kunden —
   dazu von der Vorgangshistorie im Kundenkonto. Der Klassenname `vorgang-karte`
   stammt vom Board und passt für die Kundenliste nicht mehr genau; umbenannt
   ist er trotzdem nicht, weil das fünfzehn Stellen in Vorlagen und Testfällen
   berührt und fachlich nichts gewinnt.

   Eigene Klassen je Liste wären die Alternative gewesen. Sie sähen am ersten
   Tag gleich aus und am dreißigsten nicht mehr — genau der Zustand, den man an
   drei Stellen nachpflegen muss. */
.vorgang-liste { list-style: none; padding: 0; margin: 0 0 var(--space-8); }
.vorgang-karte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}
.vorgang-karte__nummer {
  font-weight: var(--font-semi);
  color: var(--color-heading);
  text-decoration: none;
}
.vorgang-karte__nummer:hover { color: var(--color-primary); }
.vorgang-karte__meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.vorgang-liste--historie .vorgang-karte { border-color: transparent; background: var(--color-bg-alt); }

/* Klickbare Karte in Tagesboard, Vorgangs- und Kundenliste (SHOP-PF-210/311).
   Der Klick selbst liegt in karte-klick.js; hier steht nur der sichtbare
   Hinweis darauf. Bewusst kein `cursor: pointer` auf der ganzen Karte: Über der
   E-Mail-Adresse soll der Textcursor stehen bleiben, damit erkennbar ist, dass
   man sie markieren kann. */
.vorgang-karte--klickbar:hover { border-color: var(--color-primary); }
.vorgang-karte__kontakt a { color: var(--color-text-muted); }
.vorgang-karte__kontakt a:hover { color: var(--color-primary); }

/* Zeilenaktion als Symbol im Markerbereich einer Karte (SHOP-PF-311). Gleiche
   Maße und Farben wie der Schnellzugriff im Katalog (`.karte__korb`) — es ist
   dieselbe Sache an anderer Stelle, und zwei Symbolknöpfe mit verschiedener
   Größe im selben System sehen nach Versehen aus.

   Keine eigene Klasse für den Grund, der bei gesperrten Konten an dieser Stelle
   steht: Das ist Text und soll als Text aussehen (`feld__hinweis`). */
.karte-aktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-primary);
  transition: background var(--transition), color var(--transition);
}
.karte-aktion:hover,
.karte-aktion:focus-visible {
  background: var(--color-primary);
  color: #fff;
}

/* Knopfreihe unter einem Formular: Speichern und Schließen nebeneinander
   (SHOP-PF-020/312). Umbruch auf schmalen Geräten, damit nichts hinausläuft. */
.formular-knoepfe {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

.badge--ueberfaellig { background: #FCEBEB; color: var(--color-error); }
.badge--warnung { background: #FAEEDA; color: var(--color-warning); }

/* --- Ladendienst ---------------------------------------------------- */

.ladendienst-kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* Kontaktwege in der Kopfzeile des Vorgangs (SHOP-PF-213): dieselbe Zeile wie der
   Name, aber nicht dessen Gewicht — sie sind Beiwerk zur Überschrift.
   Grundschriftgröße und nicht `--text-sm` (Weisung des Betreibers): Am
   Ausgabetisch wird die Nummer vom Bildschirm abgelesen, und dafür war sie zu
   klein. Beiwerk heißt zurückgenommen in Farbe und Gewicht, nicht winzig. */
.ladendienst-kopf__kontakt {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: normal;
}
.ladendienst-kopf__kontakt a { color: inherit; }
.board-block { margin-bottom: var(--space-8); }
.board-block--warnung {
  background: #FCEBEB;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
/* Markerbereich: Abzeichen und — in der Kundenliste — die Zeilenaktion.
   `align-items: center`, weil ein 2,5rem hoher Symbolknopf neben flachen
   Abzeichen sonst an deren Oberkante klebt. `justify-content: flex-end`, damit
   die Aktion in allen Zeilen auf derselben Höhe rechts steht, auch wenn eine
   Karte mehr Abzeichen trägt als die nächste. */
.vorgang-karte__marker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.hinweis--warnung { border-left-color: var(--color-warning); background: #FAEEDA; }
.hinweis--warnung .daten-liste { margin-bottom: var(--space-4); }

.lagerplatz {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Lieferumfang in der Ausgabe-Tabelle (SHOP-PF-230): dient dem Vollständigkeits-
   Check bei der Übergabe, daher dezent, aber gut lesbar */
td.lieferumfang {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.korb-tabelle select {
  width: 100%;
  padding: var(--space-2);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
}

.unterschrift-feld {
  position: relative;
  margin: var(--space-4) 0;
}
.unterschrift-feld canvas {
  width: 100%;
  max-width: 600px;
  height: 200px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  touch-action: none;
  cursor: crosshair;
}
#unterschrift-loeschen { margin-top: var(--space-2); }

.ruecknahme-position {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.ruecknahme-position__kopf { margin-bottom: var(--space-3); }
.ruecknahme-position input[type="text"] { width: 100%; }

/* --- Backoffice: Layout, Seitenleiste, Burger (SHOP-PF-550–552) ------ */

.bo-kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.bo-kopf__logo { flex-shrink: 0; }
.bo-kopf__bereich {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}
.bo-kopf__rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.bo-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-heading);
  cursor: pointer;
}
.bo-burger:hover { color: var(--color-primary); border-color: var(--color-primary); }
.bo-burger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.bo-burger__balken {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.bo-rumpf { display: flex; align-items: stretch; }

.bo-sidebar {
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-3);
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
}
.bo-sidebar__liste,
.bo-sidebar__unterliste { list-style: none; margin: 0; padding: 0; }
.bo-sidebar__liste > li + li { margin-top: var(--space-1); }
.bo-sidebar__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-button);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
}
.bo-sidebar__link:hover { color: var(--color-primary); }
.bo-sidebar__link:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.bo-sidebar__link--aktiv {
  color: var(--color-primary);
  background: var(--color-bg);
  border-left-color: var(--color-primary);
}
.bo-sidebar__gruppentitel { cursor: pointer; }
.bo-sidebar__unterliste { padding: var(--space-1) 0 var(--space-2) var(--space-4); }
.bo-sidebar__link--unter {
  font-family: var(--font-sans);
  font-weight: var(--font-regular);
  text-transform: none;
  letter-spacing: normal;
}
/* Gruppentrenner in der Unterliste (SHOP-PF-552): reine Linie, kein Verweis.
   Der linke Einzug endet dort, wo die Beschriftungen beginnen. */
.bo-sidebar__trenner {
  height: 1px;
  margin: var(--space-2) var(--space-3) var(--space-2) 0;
  background: var(--color-border);
}
.bo-sidebar__fuss { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

.bo-inhalt {
  flex: 1;
  min-width: 0;
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}

/* Backoffice nutzt die volle Breite neben der Sidebar: kein zentrierter
   1140px-Container wie auf der öffentlichen Website. Der linke Seitenabstand
   ist gegenüber dem Standard-Gutter (--container-pad) um ein Drittel reduziert,
   damit Tabellen, Listen und Formulare mehr Platz bekommen; rechts bleibt der
   Standardabstand. (Design System v1.1, Backoffice-Layout.) */
main.bo-inhalt.container {
  max-width: none;
  margin-inline: 0;
  padding-left: var(--bo-inhalt-pad-links);
  padding-right: var(--container-pad);
}

/* Kicker über dem Seitentitel (z. B. „Einstellungen“ auf den Unterseiten) */
.bo-seitenpfad {
  margin: 0 0 var(--space-1);
  font-family: var(--font-button);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
}
.bo-seitenpfad + h1 { margin-top: 0; }

/* Desktop (≥ 992 px, SHOP-PF-551): Seitenleiste standardmäßig sichtbar,
   per Burger einklappbar — Zustand merkt sich navigation.js in localStorage. */
@media (min-width: 992px) {
  html.bo-nav-zu .bo-sidebar { display: none; }
  .bo-schleier { display: none !important; }
}

/* Mobil (< 992 px): Seitenleiste als Off-Canvas-Overlay unter dem Kopf. */
@media (max-width: 991.98px) {
  .bo-sidebar {
    position: fixed;
    top: 57px;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: min(280px, 85vw);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-md);
  }
  body.bo-nav-offen .bo-sidebar { transform: translateX(0); }
  .bo-schleier {
    position: fixed;
    inset: 57px 0 0 0;
    z-index: 30;
    background: rgba(23, 37, 42, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bo-sidebar { transition: none; }
}

.backoffice-leiste__abmelden { display: flex; align-items: center; gap: var(--space-3); }

.personal-karte {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-4);
}
.personal-karte__kopf { margin-bottom: var(--space-3); }

.rollen-form { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.rolle-zeile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
}
.rolle-zeile input { margin-top: 4px; }
.rolle-zeile .feld__hinweis { margin-top: 0; }
.rolle-zeile--gesperrt { opacity: 0.55; }
.rollen-form .btn { margin-top: var(--space-3); }

.rechte-uebersicht { margin-top: var(--space-8); }
.rechte-uebersicht summary {
  cursor: pointer;
  font-weight: var(--font-semi);
  color: var(--color-heading);
  padding: var(--space-3) 0;
}
.rechte-uebersicht__rolle { font-size: var(--text-xs); }
.rechte-uebersicht__zelle { text-align: center; color: var(--color-success); }
.rechte-uebersicht__nein { color: var(--color-border); }

.tabelle-scroll { overflow-x: auto; }
.protokoll__zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Artikelpflege -------------------------------------------------- */

.artikel-formular {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-6);
}
@media (max-width: 768px) { .artikel-formular { grid-template-columns: 1fr; } }

.artikel-formular fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.artikel-formular legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semi);
  color: var(--color-heading);
}
.artikel-formular select,
.katalog-suche select,
.massenaktion select {
  padding: var(--space-3) var(--space-4);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.artikel-formular textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.auswahl-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}

.lagerplatz-zeile { align-items: center; }
.lagerplatz-zeile__menge { width: 5rem; margin-left: auto; }

.artikel-tabelle td { vertical-align: top; }
.massenaktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.exemplar-bereich, .gefahrenzone {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.exemplar-bereich select,
.exemplar-bereich input[type="text"] {
  width: 100%;
  padding: var(--space-2);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.exemplar-anlegen {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.exemplar-anlegen .feld { margin-bottom: 0; }

.btn--gefahr { background: var(--color-error); border-color: var(--color-error); }
.btn--gefahr:hover { background: #A31517; border-color: #A31517; }

/* --- Stammdaten ----------------------------------------------------- */

.stammdaten-liste { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.stammdaten-zeile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.stammdaten-zeile__form { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.stammdaten-zeile__form input {
  flex: 1;
  min-width: 8rem;
  padding: var(--space-2);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.stammdaten-neu { display: flex; align-items: flex-end; gap: var(--space-4); }
.stammdaten-neu .feld { flex: 1; margin-bottom: 0; }
.chip__form { display: inline; }

/* --- Editor (WEB-CMS-030) ------------------------------------------- */

.editor {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.editor__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.editor__knopf {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text);
}
.editor__knopf:hover { border-color: var(--color-primary); color: var(--color-primary); }
.editor__knopf--rechts { margin-left: auto; }
/* Rueckmeldung bei Uebernahmen (WEB-CMS-155/160): steht zwischen Leiste und
   Schreibflaeche, damit sie nicht uebersehen wird - ersetzt Dialogketten. */
.editor__status {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt, #f4f8f9);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.editor__flaeche {
  min-height: 12rem;
  padding: var(--space-4);
  background: var(--color-bg);
  line-height: var(--leading-normal);
}
.editor__flaeche:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.editor__flaeche h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-lg); }
.editor__flaeche ul, .editor__flaeche ol { padding-left: var(--space-6); }
.editor__quelltext {
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-sm);
  min-height: 12rem;
}

/* --- Bilder (SHOP-PF-040) ------------------------------------------- */

.bilder-bereich {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.bilder-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  margin: var(--space-4) 0;
}
.bild-karte {
  position: relative;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-alt);
}
.bild-karte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bild-karte__marke { position: absolute; top: var(--space-2); left: var(--space-2); }
.bild-karte figcaption { padding: var(--space-3); }
.bild-karte figcaption input {
  width: 100%;
  padding: var(--space-2);
  font: inherit;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.bild-karte__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.bild-hochladen {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.bild-hochladen .feld { margin-bottom: 0; flex: 1; min-width: 12rem; }
.bild-hochladen input[type="file"] { font-size: var(--text-sm); }

/* Auswahl, Bildbeschreibung und Knopf untereinander (SHOP-PF-020): Der Abschnitt
   steht jetzt oben auf der Seite, wo die Breite den Feldern des Artikelformulars
   gehört — nebeneinander gedrängt wäre die Bildbeschreibung ein Schlitz. */
.bild-hochladen--gestapelt { flex-direction: column; align-items: stretch; }
.bild-hochladen--gestapelt .feld { flex: none; }
.bild-hochladen--gestapelt .btn { align-self: flex-start; }

/* --- Scan (SHOP-PF-090) --------------------------------------------- */

.backoffice-leiste__rechts {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.scan-form { display: flex; align-items: center; gap: var(--space-2); }
.scan-form input {
  width: 11rem;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}
.scan-vorschau {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  text-align: center;
}
.scan-vorschau video {
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-md);
  background: #000;
}

/* --- Kundenverwaltung ----------------------------------------------- */

.dubletten-liste { margin: var(--space-2) 0; padding-left: var(--space-6); font-size: var(--text-sm); }

/* --- Einstellungen (SHOP-PF-530) ------------------------------------ */

.konfig-block {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.konfig-block__unter {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--font-semi);
  color: var(--color-heading);
}
.konfig-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4);
}
.konfig-gitter .feld { margin-bottom: 0; }
.konfig-gitter input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.oeffnungs-tabelle { max-width: 34rem; margin: var(--space-4) 0; }
.oeffnungs-tabelle input[type="time"] {
  padding: var(--space-2);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.oeffnungs-tabelle th[scope="row"] { font-weight: var(--font-regular); color: var(--color-text); }

.schliesstage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.schliesstage .feld { margin-bottom: 0; }
.schliesstage input {
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.konfig-leihordnung {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
}

/* --- E-Mail-Vorlagen und Protokoll ---------------------------------- */

.platzhalter {
  display: inline-block;
  padding: 1px 5px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}
.mail-vorschau {
  max-width: 640px;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.mail-vorschau__betreff {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.mail-vorschau__inhalt { padding: var(--space-6); background: var(--color-bg); }

.mail-log { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.mail-log li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.mail-log__zeit {
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* Nicht zugestellte Mail (SHOP-PF-435). Die Farbe trägt die Aussage nicht
   allein — im Text steht „Nicht zugestellt“ (Design-System Kap. 9). */
.mail-log li.mail-log__eintrag--fehler {
  border-left: 3px solid var(--color-error);
  padding-left: var(--space-2);
  color: var(--color-error);
}
.karte-flaeche .formular { margin-top: var(--space-2); }
.karte-flaeche select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* Vorgangsformular: kompakte Datumsfelder (SHOP-PF-224) */
.feld-reihe--kompakt {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.feld--datum { flex: 0 0 auto; }
.feld--datum input[type="text"] { width: auto; min-width: 8.5rem; }
.feld__hinweis--oeffnung { flex-basis: 100%; color: var(--color-text-muted); }

/* Datumszeile mit Aktionen: klebt beim Scrollen unter dem Backoffice-Kopf,
   damit „Vorgang anlegen“/„Abbrechen“ trotz langer Artikelliste erreichbar
   bleiben. Auf schmalen Screens (gestapelte Felder) nicht fixiert, weil der
   Block sonst zu viel Höhe belegt. */
.feld-reihe--aktionen {
  position: sticky;
  top: 56px; /* Höhe von .bo-kopf */
  z-index: 5;
  background: var(--color-bg);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.feld-reihe--aktionen .knopf-reihe { margin-top: 0; margin-left: auto; }
.feld-reihe--aktionen .feld--suche { margin: 0; flex: 1 1 16rem; }

/* Knöpfe direkt in einer Feldzeile (z. B. „Kaution erhalten“, „Termin absagen“):
   nicht auf die Zeilenhöhe strecken, sondern an der Eingabezeile ausrichten. */
.feld-reihe > .btn { align-self: flex-end; margin-bottom: var(--space-4); }

/* Eine `knopf-reihe` INNERHALB einer kompakten Feldreihe: Sie ist dort ein Feld
   unter Feldern und bringt ihren eigenen Abstand nicht mit. Ohne diese Regel
   schöbe ihr `margin-top` die Schaltflächen aus der Zeile heraus — und genau das
   Zusammenrücken war der Anlass (Spendenkorrektur, Verlängern, Kassensturz). */
.feld-reihe--kompakt > .knopf-reihe { margin-top: 0; }

/* Spendenkorrektur in der Kundenakte (SHOP-PF-265, Weisung des Betreibers):
   kompakt, aber die beiden Formulare bleiben klar getrennt. Die Rücknahme trägt
   dafür eine eigene, leicht abgesetzte Fläche — sie löscht eine Buchung, und ein
   Klick daneben soll nicht dasselbe bewirken wie einer daneben. */
.spende-ruecknahme {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 576px) {
  .feld-reihe--aktionen { position: static; }
  .feld-reihe--aktionen .knopf-reihe { margin-left: 0; margin-top: var(--space-2); }
  .feld-reihe > .btn { align-self: stretch; margin-bottom: 0; }
}

/* Artikelauswahl: Live-Suche und Vorschaubilder (SHOP-PF-221) */
.feld--suche { margin: var(--space-3) 0; }
.korb-tabelle__bild-spalte { width: 56px; }
.korb-tabelle__bild {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted, #f2f2f2);
}
.korb-tabelle__bild--leer { border: 1px dashed var(--color-border); }

/* Platzhalter für Artikel ohne Bild in der Artikelliste (SHOP-PF-060). Anders
   als `--leer` trägt er die Grafik des Katalogs, damit erkennbar bleibt, dass
   hier ein Bild fehlt und nicht eines nicht geladen hat. */
.korb-tabelle__bild--platzhalter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* Vorgangsübersicht: Filterleiste (SHOP-PF-212) */
.filter-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.filter-leiste .feld { margin: 0; }
.filter-leiste select,
.filter-leiste input {
  padding: var(--space-2) var(--space-3);
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

/* Beitrags-Galerie (WEB-CMS-010) */
.beitrag-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.beitrag-galerie__bild img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.galerie-verwaltung {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.galerie-verwaltung__bild {
  margin: 0;
  width: 120px;
  font-size: var(--text-sm);
  text-align: center;
}
.galerie-verwaltung__bild img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.feld--galerie__alt { margin-top: var(--space-2); }

/* Wunschliste auf der oeffentlichen Seite (SHOP-PF-245, Kurzcode `[wunschliste]`).

   Karten in einem selbst umbrechenden Raster: Die Zahl der Wuensche schwankt, und
   eine feste Spaltenzahl waere bei zwei Eintraegen zu leer und bei acht zu eng.
   `minmax(0, 1fr)` statt `1fr`, damit ein langer Titel die Spalte nicht ueber den
   Rand schiebt.

   Die Karte ist bewusst KEIN Verweis: Es gibt kein Ziel — der Wunsch hat keine
   eigene Seite, und ein Formular fuer Zusagen soll die Seite nicht tragen. Wer
   beitragen will, findet den Weg im redaktionellen Text darunter. */
.wunsch-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 var(--space-8);
}
.wunsch-karte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  background: var(--color-bg);
}
.wunsch-karte__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.wunsch-karte__text { padding: var(--space-3) var(--space-4) var(--space-4); }
.wunsch-karte__titel {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semi);
  color: var(--color-heading);
}
.wunsch-karte__meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.wunsch-karte__beschreibung { margin: var(--space-2) 0 0; }

/* Artikel-Teaser in redaktionellen Inhalten (WEB-INT-050) */
.artikel-teaser {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  color: inherit;
  background: var(--color-bg);
}
.artikel-teaser__bild {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.artikel-teaser__name { font-weight: 700; }
.artikel-teaser__cta { color: var(--color-akzent, #DD1367); font-size: var(--text-sm); }

/* --- Bildgestaltung (WEB-CMS-130) — Werte gespiegelt in Core\BildStil ----- */
/* Rahmen */
.bild--rahmen-duenn  { border: 2px solid var(--color-border); }
.bild--rahmen-mittel { border: 4px solid var(--color-border); }
.bild--rahmen-dick   { border: 8px solid var(--color-border); }
/* Rahmenfarbe (Design-Palette aus tokens.css) */
.bild--rahmenfarbe-magenta { border-color: var(--color-primary); }
.bild--rahmenfarbe-blau    { border-color: var(--color-accent); }
.bild--rahmenfarbe-orange  { border-color: var(--color-secondary); }
.bild--rahmenfarbe-gruen   { border-color: var(--color-teal); }
.bild--rahmenfarbe-dunkel  { border-color: var(--color-heading); }
.bild--rahmenfarbe-grau    { border-color: var(--color-border); }
/* Schattierung */
.bild--schatten { box-shadow: 0 6px 18px rgba(23, 37, 42, 0.25); }
/* Eckenradius */
.bild--radius-klein { border-radius: var(--radius-sm); }
.bild--radius-gross { border-radius: var(--radius-lg, 16px); }
.bild--rund         { border-radius: 50%; }
/* Farbfilter */
.bild--filter-sw     { filter: grayscale(1); }
.bild--filter-sepia  { filter: sepia(0.7); }
.bild--filter-duotone{ filter: grayscale(1) sepia(0.35) hue-rotate(275deg) saturate(3); }
/* Hover-/Bewegungseffekte — bei reduzierter Bewegung deaktiviert */
.bild--hover-zoom, .bild--hover-anheben { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.bild--hover-zoom:hover    { transform: scale(1.04); }
.bild--hover-anheben:hover { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(23, 37, 42, 0.3); }
@media (prefers-reduced-motion: reduce) {
  .bild--hover-zoom, .bild--hover-anheben { transition: none; }
  .bild--hover-zoom:hover, .bild--hover-anheben:hover { transform: none; }
}
/* Lightbox */
.bild--lightbox { cursor: zoom-in; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 92vh; }
.lightbox::backdrop { background: rgba(23, 37, 42, 0.85); }
.lightbox img { display: block; max-width: 100%; max-height: 86vh; margin: 0 auto; }
.lightbox__schliessen {
  position: absolute; top: 0; right: 0;
  font: inherit; font-size: var(--text-lg, 1.25rem); line-height: 1;
  padding: var(--space-2) var(--space-3); border: 0; cursor: pointer;
  background: var(--color-bg); color: var(--color-heading);
}

/* Auswahl-Markierung des Bildstil-Editors (nur Backoffice) */
.editor__bild-gewaehlt { outline: 3px dashed var(--color-primary); outline-offset: 2px; }
.editor__bildstil { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2); border-top: 1px solid var(--color-border); width: 100%; }
.editor__bildstil select { font-size: var(--text-sm); }
.editor__bildstil label { font-size: var(--text-sm); display: inline-flex; align-items: center; gap: 4px; margin: 0; }

/* --- Slideshow (WEB-CMS-120) --------------------------------------------- */
/* Ohne JS: Bilder gestapelt untereinander (Basiszustand). */
.slideshow__bild { margin: 0 0 var(--space-3); }
.slideshow__bild img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
/* Mit JS (.slideshow--aktiv): nur das aktive Bild ist sichtbar. */
.slideshow--aktiv .slideshow__bild { display: none; margin: 0; }
.slideshow--aktiv .slideshow__bild--aktiv { display: block; }
.slideshow__leiste {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); margin-top: var(--space-2);
}
.slideshow__knopf {
  font: inherit; font-size: var(--text-lg); line-height: 1;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg); color: var(--color-heading); cursor: pointer;
}
.slideshow__knopf:hover { border-color: var(--color-primary); color: var(--color-primary); }
.slideshow__stand { font-size: var(--text-sm); color: var(--color-text-muted); min-width: 8rem; text-align: center; }

/* Feste Bühnenhöhe (WEB-CMS-145): Alle Bilder füllen denselben Rahmen, damit
   der Seiteninhalt beim Bildwechsel nicht springt. Gilt nur für Slideshows
   mit gesetzter Höhe — Galerien in Beiträgen und Seiten behalten height:auto.
   Auf schmalen Viewports deckelt 55vw eine für den Desktop gewählte Höhe. */
.slideshow--aktiv.slideshow--fest .slideshow__bild img {
  height: min(var(--buehne-hoehe, 420px), 55vw);
  object-fit: cover;
}
/* Sichtbarer Ausschnitt beim Zuschneiden, je Bild wählbar */
.slideshow__bild--oben img { object-position: top; }
.slideshow__bild--mitte img { object-position: center; }
.slideshow__bild--unten img { object-position: bottom; }

/* Punkte je Bild, am unteren Bildrand. Der aktive Punkt ist gefüllt UND
   größer — die Unterscheidung hängt damit nicht allein an der Farbe. */
.slideshow__buehne { position: relative; }
.slideshow__punkte {
  list-style: none; margin: 0; padding: var(--space-2);
  display: flex; justify-content: center; gap: var(--space-2);
  position: absolute; left: 0; right: 0; bottom: 0;
}
.slideshow__punkt {
  display: block; width: 12px; height: 12px; padding: 0; cursor: pointer;
  border: 2px solid var(--color-bg); border-radius: 50%;
  background: transparent; box-shadow: 0 0 3px rgb(0 0 0 / 45%);
}
.slideshow__punkt--aktiv {
  width: 18px; height: 18px;
  background: var(--color-bg);
}
.slideshow__punkt:hover { border-color: var(--color-primary); }

/* Startseiten-Bühne: etwas Abstand zum Hero */
.buehne { margin-top: var(--space-6); }

/* --- Sperrvermerk: deaktivierte Aktionen (Dok 01, Sperrvermerk) ----------- */
.btn--deaktiviert,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.btn--deaktiviert { pointer-events: none; }

/* Kleines Storno-Symbol neben dem Status (Kundenansicht) */
.storno-symbol {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; margin-left: var(--space-1);
  border: 1px solid var(--color-border); border-radius: 50%;
  background: var(--color-bg); color: var(--color-error, #C5192D);
  font-size: var(--text-xs); line-height: 1; cursor: pointer;
}
.storno-symbol:hover { border-color: var(--color-error, #C5192D); }
.storno-form { display: inline; }

/* Zustandsabfrage bei der Rücknahme (SHOP-PF-240) */
.ruecknahme-zustand { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.ruecknahme-zustand legend { font-weight: var(--font-semi); color: var(--color-heading); padding: 0 var(--space-2); }
.ruecknahme-zustand__folgen { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }

/* --- Verfügbarkeitskalender (SHOP-PF-214) --------------------------------- */
/* Raster als Tabelle: Ein Streifen überspannt seine Tage per `colspan`, jede
   Spur ist eine Tabellenzeile. Grund ist die CSP (`style-src 'self'`) — sie
   verbietet die `style`-Attribute, die ein CSS-Grid je Streifen bräuchte, und
   Positionsklassen für jede Spalten-/Spurnummer wären Daten im Stylesheet.
   Kein waagerechter Rollbereich: Er würde die Detailanzeige abschneiden; bei
   schmalen Fenstern werden die Spalten stattdessen enger und die Beschriftung
   gekürzt. */
.kal { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--text-xs); }
.kal__artikelkopf, .kal__artikel { width: 12rem; text-align: left; vertical-align: top; }
.kal__artikel {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  font-weight: var(--font-regular);
  background: var(--color-bg-alt);
}
.kal__artikel a { font-weight: var(--font-semi); }
/* Bestand je Zeile: Drei Streifen bei 19 Stück heißen nicht „belegt“. */
.kal__bestand { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }

.kal__tagkopf {
  padding: var(--space-1) 0;
  border: 1px solid var(--color-border);
  font-weight: var(--font-regular);
  color: var(--color-text-muted);
  line-height: 1.2;
  overflow: hidden;
}
.kal__wt, .kal__tagzahl { display: block; }
.kal__tagzahl { color: var(--color-heading); }
.kal__tagkopf--frei { background: var(--color-bg-alt); }
/* „Heute“ nicht nur farbig, sondern als Linie und fett — sonst steckte die
   Aussage allein in der Farbe (Design-System v1.1, Kap. 9). */
.kal__tagkopf--heute { border-left: 2px solid var(--color-primary); font-weight: var(--font-bold); }
.kal__tagkopf--heute .kal__tagzahl { color: var(--color-primary); }

.kal__zelle { padding: 0; border: 1px solid var(--color-border); height: 2.1rem; }
.kal__zelle--heute { border-left: 2px solid var(--color-primary); }
/* Geschlossene Tage als Schraffur, nicht als Farbfläche: in Graustufen
   erkennbar und mit einem belegten Streifen nicht zu verwechseln. */
.kal__zelle--geschlossen {
  background-image: repeating-linear-gradient(45deg,
    var(--color-border) 0, var(--color-border) 1px, transparent 1px, transparent 5px);
}
.kal__gruppe { border-bottom: 2px solid var(--color-border); }

/* Streifen: Der Farbton unterscheidet BUCHUNGEN, nicht Zustände. Rahmenart und
   ein Wort in der Beschriftung tragen den Zustand — zwei aufeinanderfolgende
   ausgegebene Ausleihen wären über die Farbe sonst nicht zu trennen. */
.kal-streifen {
  position: relative;
  height: 100%;
  margin: 1px;
  border-radius: var(--radius-sm);
  background: var(--kal-ton, var(--color-bg-alt));
}
.kal-streifen__knopf {
  display: block;
  width: 100%;
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  color: var(--color-heading);
  background: none;
  border: 0;
  padding: 2px var(--space-1);
  cursor: pointer;
}
.kal-streifen__knopf:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.kal-streifen__zustand {
  display: inline-block;
  margin-right: var(--space-1);
  font-family: var(--font-button);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
/* Beschriftung kürzen, statt über die Nachbarn zu laufen. Die vollständige
   Angabe steht in der Detailanzeige. */
.kal-streifen__text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-streifen__menge { font-weight: var(--font-bold); }
/* Bewusst keine hellere Schriftfarbe für den Zeitraum: Auf den dunkleren
   Farbtönen der Palette fiel `--color-text` auf 3,4:1 und damit unter die
   Grenze. Seine Stellung in der Beschriftung unterscheidet ihn genug. */
.kal-streifen__zeitraum { color: inherit; }

/* Zustand als Rahmenart — zusätzlich zum Wort, nie über den Farbton. */
.kal-streifen--reserviert { border: 2px dashed var(--color-text-muted); }
.kal-streifen--ausgegeben { border: 2px solid var(--color-heading); }
.kal-streifen--ueberfaellig { border: 3px double var(--color-error); }
.kal-streifen--ueberfaellig .kal-streifen__zustand { font-weight: var(--font-bold); color: var(--color-error); }
/* Angeschnitten: Der Streifen reicht über das Fenster hinaus — die Kante ist an
   dieser Seite offen (kein Rahmen, kein Radius) und trägt zusätzlich ein
   Winkelzeichen in der Beschriftung. */
.kal-streifen--offen-links { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.kal-streifen--offen-rechts { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }

/* Rotierende Palette aus aufgehellten Tönen der SDG-Palette (tokens.css). Kein
   Bedeutungsträger — sie trennt nur benachbarte Buchungen.
   Die Helligkeiten sind bewusst GESTAFFELT (Grauwert ≈ 244 · 218 · 235 · 203 ·
   230 · 211): In Graustufen liegen aufeinanderfolgende Töne rund 20 Stufen
   auseinander und bleiben damit unterscheidbar. Ein erster Entwurf hatte sechs
   gleich helle Tinten — bunt verschieden, in Graustufen identisch.
   Der Text bleibt `--color-heading`; das ergibt auf dem dunkelsten Ton noch
   knapp 10:1. */
.kal-streifen--ton-1 { --kal-ton: #FDEEF4; }
.kal-streifen--ton-2 { --kal-ton: #C8DFEE; }
.kal-streifen--ton-3 { --kal-ton: #E4F3D6; }
.kal-streifen--ton-4 { --kal-ton: #E5CB8A; }
.kal-streifen--ton-5 { --kal-ton: #DFE7EE; }
.kal-streifen--ton-6 { --kal-ton: #F8CB9B; }

/* Details bei Zeigen UND bei Tastaturfokus — `:focus-within` hält sie offen,
   während man durch die Verweise darin tabbt. Ein `title`-Attribut könnte
   beides nicht: Es erscheint nicht bei Fokus und ist auf Touch unerreichbar. */
.kal-detail {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: min(26rem, 88vw);
  padding: var(--space-3);
  text-align: left;
  white-space: normal;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
/* Streifen in der rechten Fensterhälfte klappen nach links auf, damit die
   Anzeige nicht aus dem Bild läuft. */
.kal-detail--rechts { left: auto; right: 0; }
.kal-streifen:hover > .kal-detail,
.kal-streifen:focus-within > .kal-detail { display: block; }
.kal-detail__kopf { margin: 0 0 var(--space-2); color: var(--color-heading); }
.kal-detail__liste { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3); margin: 0; }
.kal-detail__liste dt { color: var(--color-text-muted); }
.kal-detail__liste dd { margin: 0; color: var(--color-heading); }
.kal-detail__wege, .kal-detail__verlaengerung {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.kal-blaettern { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; flex-wrap: wrap; }
.kal-blaettern__stand { color: var(--color-heading); font-weight: var(--font-semi); }

/* Legende der ZUSTÄNDE. Die Farbtöne brauchen keine — sie bedeuten nichts. */
.kal-legende {
  list-style: none; margin: var(--space-4) 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  font-size: var(--text-sm);
}
.kal-legende__probe {
  display: inline-block; width: 2.5rem; height: 1.1rem;
  vertical-align: middle; margin-right: var(--space-2);
  border-radius: var(--radius-sm); background: var(--color-bg-alt);
}
.kal-legende__probe--frei {
  border: 1px solid var(--color-border);
  background-image: repeating-linear-gradient(45deg,
    var(--color-border) 0, var(--color-border) 1px, transparent 1px, transparent 5px);
}

/* Telefonbreite (SHOP-PF-255: mobil durchführbar). Die Artikelspalte wird
   schmaler, damit die Tage überhaupt Breite bekommen; die Beschriftung der
   Streifen wird dabei bis zur Unlesbarkeit gekürzt — sie läuft aber nie über
   die Nachbarn, und die vollständige Angabe steht in der Detailanzeige.
   Die Detailanzeige selbst wird zur unteren Tafel: Ein Kasten unter einem
   11 px breiten Streifen stünde entweder halb außerhalb des Bildes oder wäre
   selbst 11 px breit. */
@media (max-width: 700px) {
  .kal { font-size: 0.7rem; }
  .kal__artikelkopf, .kal__artikel { width: 6.5rem; }
  .kal__zelle { height: 2.6rem; }
  .kal-detail, .kal-detail--rechts {
    position: fixed;
    top: auto;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
    max-width: none;
  }
}

/* ---------------------------------------------------------------------------
   Verlängern-Dialog am Kennzahlenwert „Ausleihe bis" (SHOP-PF-270,
   Weisung des Betreibers 2026-08-19) */
.kennzahlen__aktion {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 0.2em;
}
.kennzahlen__aktion:hover,
.kennzahlen__aktion:focus-visible { color: var(--color-primary); }

.verlaengern-dialog {
  border: 1px solid var(--color-gray-300, #d0d0d0);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 28rem;
}
.verlaengern-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.verlaengern-dialog h2 { margin-top: 0; }
.verlaengern-dialog form + form { margin-top: 0.75rem; }
.verlaengern-dialog .knopf-reihe { margin-top: 1rem; }

/* Kompakte Rücknahme-Zeile (SHOP-PF-240/241, Weisung 2026-08-19) */
.feld--mini input[type="number"] { width: 5rem; }
.feld-reihe--ruecknahme { align-items: flex-end; flex-wrap: wrap; }
.feld-reihe--ruecknahme .feld--defekt { margin: 0; }
.feld--verlust { align-self: flex-end; padding-bottom: 0.45rem; }
.feld-checkbox--inline { display: inline-flex; margin-right: 0.75rem; }
.ruecknahme-verlust-exemplare { margin-top: 0.25rem; }