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

html {
  min-height: 100%;
  background: var(--color-offwhite);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-grey-950);
  background: var(--color-offwhite);
  font-family: var(--font-body);
  line-height: 1.5;
}

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

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
}

.brand--centered {
  align-items: center;
}

.brand__logo {
  width: auto;
  height: 72px;
  display: block;
}

.brand__product {
  color: var(--color-grey-300);
  font: 400 11px/1 var(--font-heading);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.brand--compact .brand__logo,
.brand--sidebar .brand__logo {
  height: 42px;
}

.brand--compact .brand__product,
.brand--sidebar .brand__product {
  font-size: 9px;
}

.eyebrow,
.sidebar-label {
  color: var(--color-grey-500);
  font: 400 11px/1.2 var(--font-heading);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* GF-30: display:inline-flex schlug das UA-[hidden] — versteckte Buttons
   (z. B. "Löschen / Neu" vor der ersten Unterschrift) waren sichtbar. */
.button[hidden] {
  display: none;
}

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.icon,
.button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.button--primary {
  color: var(--color-white);
  background: var(--color-red);
}

.button--primary:hover {
  background: var(--color-red-dark);
}

.button--primary:active {
  transform: translateY(1px);
}

.button--large {
  width: 100%;
  min-height: 52px;
}

.button--secondary {
  color: var(--color-grey-950);
  background: var(--color-white);
  border-color: var(--color-grey-300);
}

.button--secondary:hover {
  border-color: var(--color-grey-600);
  background: var(--color-offwhite);
}

.button--danger {
  color: var(--color-white);
  background: var(--color-red-dark);
}

.button--danger:hover {
  background: var(--color-red);
}

.button--text-dark {
  min-height: 44px;
  color: var(--color-grey-600);
  background: transparent;
}

.button--text-dark:hover {
  color: var(--color-grey-950);
  text-decoration: underline;
}

.button--text {
  color: var(--color-white);
  background: transparent;
}

.button--inverse {
  color: var(--color-black);
  background: var(--color-white);
}

.button--inverse-text {
  width: 100%;
  color: var(--color-white);
  background: transparent;
  border-color: rgb(255 255 255 / 28%);
}

.auth-stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background: var(--color-black);
}

.auth-stage__content {
  position: relative;
  z-index: 1;
  width: min(100%, 400px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.login-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 26px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.login-card__heading h1 {
  margin: 5px 0 3px;
  font: 700 24px/1 var(--font-display);
  text-transform: uppercase;
}

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

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
}

.checkbox-field input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-red);
}

.auth-footnote {
  margin: 18px 0 0;
  color: var(--color-grey-500);
  font-size: 12px;
  text-align: center;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  color: var(--color-grey-800);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  /* UX-24: EINE kanonische Feldhoehe (44px); Kontext-Overrides (48/42px) entfernt. */
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  color: var(--color-grey-950);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

/* UX-23: Textarea erbt Feld-Optik, bekommt aber mehrzeiliges Padding/Hoehe. */
.field textarea {
  min-height: 96px;
  padding: 10px 13px;
  line-height: 1.5;
  resize: vertical;
}

.field select[multiple] {
  min-height: 240px;
  padding: 8px 10px;
}

.field input:hover,
.field select:hover {
  border-color: var(--color-grey-600);
}

.field input[aria-invalid="true"] {
  border-color: var(--color-red);
}

/* UX-35: das native Datei-Feld bleibt das eigentliche Interaktionselement
   (Klick/Tastatur/Formularversand), wird aber unsichtbar über das deutsch
   beschriftete .file-field__visual gelegt -- Browser lokalisieren den
   Dateinamen-Text neben dem Button sonst nicht ("No file chosen"). */
.file-field {
  position: relative;
  display: flex;
  min-height: 64px;
}

.field .file-field .file-upload-control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.file-field__visual {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 7px 12px 7px 7px;
  color: var(--color-grey-600);
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.file-field__button {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: var(--radius-sm);
  font: 700 13px/1 var(--font-heading);
  white-space: nowrap;
  transition: background 160ms ease;
}

.file-field__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-field:hover .file-field__button {
  background: var(--color-red);
}

.file-field .file-upload-control:active + .file-field__visual .file-field__button {
  transform: translateY(1px);
}

.file-field .file-upload-control:focus-visible + .file-field__visual {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.file-field .file-upload-control:valid + .file-field__visual {
  color: var(--color-grey-950);
  background: var(--color-white);
  border-color: var(--color-grey-600);
}

.field-error {
  margin: 0;
  color: var(--color-red-dark);
  font-size: 12px;
}

.form-alert {
  padding: 12px 14px;
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.form-alert p {
  margin: 0;
}

.operations-header {
  min-height: 72px;
  /* GF-28: 3-Zonen-Grid — der Spieltag-Switcher sitzt exakt mittig,
     unabhaengig von der Breite der Identity- und Aktions-Cluster. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 10px clamp(18px, 3vw, 40px);
  color: var(--color-grey-950);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-grey-200);
}

.operations-header__identity,
.operations-header__actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.operations-header__identity {
  gap: 12px;
}

.operations-header__center {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.operations-header__identity .brand {
  min-width: 44px;
  min-height: 44px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.operations-header__identity .brand__logo {
  height: 32px;
}

.operations-header__identity .brand__product {
  display: none;
}

.operations-header__divider {
  color: var(--color-grey-300);
}

.operations-header__title {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.operations-header__actions {
  justify-content: flex-end;
  gap: 10px;
}

.operations-header__actions > form {
  margin: 0;
}

.operations-header__back,
.operations-header__icon-button {
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-grey-600);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.operations-header__back {
  margin-left: -10px;
  text-decoration: none;
}

.operations-header__back:hover,
.operations-header__icon-button:hover {
  color: var(--color-grey-950);
  background: var(--color-grey-100);
}

.operations-match-day {
  position: relative;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  /* GF-27h: kein overflow:hidden — kein Kind hat einen Hintergrund, der ueber
     die abgerundeten Ecken hinauslaeuft, aber das Popover (position: absolute,
     Nachfahre via <details>) wuerde dadurch am Container-Rahmen abgeschnitten. */
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

.operations-match-day:focus-within {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.operations-match-day > .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  margin-left: 12px;
  color: var(--color-grey-600);
}

/* GF-27h: nur die direkten Pfeil-Formulare auf "contents" setzen — sonst
   trifft die Regel auch das verschachtelte Popover-Formular (in <details>)
   und dessen position:absolute/display:grid-Box geht verloren (Kollision). */
.operations-match-day > form {
  display: contents;
}

.operations-match-day__arrow {
  /* GF-27i: 44px-Tap-Ziel (Apple HIG) — auch im kompakten Header nicht schrumpfen. */
  min-height: 44px;
  width: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey-600);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.operations-match-day__arrow:hover:not(:disabled) {
  color: var(--color-grey-950);
}

.operations-match-day__arrow:disabled {
  color: var(--color-grey-300);
  cursor: not-allowed;
}

.operations-match-day__arrow .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.operations-match-day__current {
  /* GF-27i: feste Breite — der Switcher darf nicht mit der Laenge des
     Gegnernamens atmen; lange Namen enden in der Label-Ellipsis. */
  width: 230px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  color: var(--color-grey-950);
  background: transparent;
  border: 0;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.operations-match-day__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-match-day__current::-webkit-details-marker {
  display: none;
}

.operations-match-day__current:focus-visible {
  outline: 0;
  box-shadow: none;
}

.operations-match-day__popover {
  position: absolute;
  top: calc(100% + 8px);
  /* GF-28: mittig unter dem gesamten Switcher statt rechtsbuendig versetzt. */
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(360px, calc(100vw - 24px));
  max-height: min(420px, 60vh);
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgb(0 0 0 / 18%);
}

.operations-match-day__option {
  width: 100%;
  /* GF-28: zweizeilige Reihe (Datum · Gegner / Label) statt Zwei-Spalten-
     Baseline — lange Gegnernamen brechen nicht mehr um. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 14px;
  color: var(--color-grey-950);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.operations-match-day__option small {
  color: var(--color-grey-500);
  font-size: 11px;
}

.operations-match-day__option:hover {
  background: var(--color-offwhite);
}

.operations-match-day__option.is-current {
  /* GF-28: roter Akzentbalken statt grauer Flaeche. */
  box-shadow: inset 3px 0 0 var(--color-red);
  font-weight: 800;
}

.operations-match-day__divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 2px;
  color: var(--color-grey-500);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.operations-match-day__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-grey-200);
}

/* UX-9: gesperrter Spieltag-Switcher bei laufendem Wizard. */
.operations-match-day--locked {
  background: var(--color-grey-100);
  border-color: var(--color-grey-200);
}

.operations-match-day--locked .operations-match-day__current {
  color: var(--color-grey-600);
  cursor: not-allowed;
}

.operations-match-day__lock {
  /* GF-30b: Status-Banner statt nacktem Unterstrich-Link — Icon, Wort und
     Farbe auf Warn-Flaeche (Bedienvertrag §4.4: Farbe allein reicht nie). */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  color: var(--status-warning);
  background: var(--status-warning-bg);
  border: 1px solid color-mix(in srgb, var(--status-warning) 35%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.operations-match-day__lock:hover {
  color: var(--color-error-text);
  border-color: color-mix(in srgb, var(--color-error-text) 45%, transparent);
}

.operations-match-day__lock .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* GF-27j: Status als reiner Punkt (gruen/orange), Beschreibung im Popover. */
.connection-status {
  position: relative;
}

.connection-status__toggle {
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  cursor: pointer;
  list-style: none;
}

.connection-status__toggle::-webkit-details-marker {
  display: none;
}

.connection-status__toggle span[aria-hidden] {
  width: 12px;
  height: 12px;
  background: #49b85d;
  border-radius: 50%;
}

.connection-status__popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  padding: 10px 14px;
  color: var(--status-success);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgb(0 0 0 / 18%);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* GF-28: gemeinsamer Header-Pill — Operations→Admin und Backoffice→Operations
   nutzen dieselbe Quelle (Icon + Label, Rahmen, 44px). */
.header-pill-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  color: var(--color-grey-600);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.header-pill-link:hover {
  color: var(--color-grey-950);
  border-color: var(--color-grey-600);
}

.operations-main {
  min-height: calc(100vh - 72px);
  padding: clamp(24px, 3vw, 40px);
}

/* GF-29: Mobile-Header < bp-md — zwei Reihen statt 3-Spalten-Grid.
   Reihe 1: Identity links, Aktionen rechts. Reihe 2: Spieltag-Switcher volle Breite. */
@media (max-width: 899.98px) {
  .operations-header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "identity actions"
      "center   center";
    /* GF-30b: Kopf entschlacken — engere Reihen und Vertikal-Polster,
       damit vor dem Inhalt weniger Chrome steht. */
    row-gap: 6px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Der zweireihige Header ist ~157px hoch — die 72px-Annahme der Basisregel
     (min-height: calc(100vh - 72px)) erzeugte hier ~85px toten Leerraum unter
     dem Inhalt und damit garantierten Seiten-Scroll (gemessen auf 834x1194,
     Ausgabe Schritt 3). Kein Mindestmass in diesem Regime — die Seite ist so
     hoch wie ihr Inhalt, html/body tragen dasselbe Offwhite. */
  .operations-main { min-height: 0; }

  .operations-header__identity { grid-area: identity; min-width: 0; }
  .operations-header__actions  { grid-area: actions; justify-content: flex-end; }
  .operations-header__center   { grid-area: center; }

  /* GF-29: Titel als Flex-Kind haette ohne min-width:0 kein Schrumpf-Minimum
     unterhalb seiner Textbreite und wuerde in die Aktionen-Spalte laufen
     (beobachtet auf "Kleiderausgabe" bei 390px). Ellipsis statt Kollision. */
  .operations-header__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Switcher nutzt die volle Reihenbreite (meistgenutzte Steuerung, Tap-Ziel). */
  .operations-match-day { width: 100%; justify-content: center; }

  /* GF-29b: Bei laufendem Wizard sitzt der Lock-Hinweis (.operations-match-day__lock)
     als Geschwister neben dem Spieltag-Pill in .operations-header__center. Nebeneinander
     in einer Zeile lief der Hinweistext rechts aus dem Viewport. Beide Kinder stapeln
     sich stattdessen volle Breite; im Normalfall (nur der Switcher als einziges Kind)
     bleibt das Reihe-2-Layout dadurch unveraendert. */
  .operations-header__center {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
  }

  .operations-match-day__lock {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}

.operations-panel {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.match-day-heading {
  margin-bottom: 18px;
}

.match-day-heading h1 {
  margin: 5px 0 0;
  font: 700 clamp(24px, 3vw, 34px)/1 var(--font-display);
  text-transform: uppercase;
}

.operations-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.operations-stat {
  min-height: 94px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 22px;
  border-right: 1px solid var(--color-grey-200);
}

.operations-stat:last-child {
  border-right: 0;
}

.operations-stat strong {
  font: 700 30px/0.9 var(--font-display);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.operations-stat strong small {
  color: var(--color-grey-500);
  font-size: 16px;
}

.operations-stat span {
  color: var(--color-grey-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operations-workspace {
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
}

.operations-workspace__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.operations-workspace__heading > div {
  display: flex;
  align-items: center;
  gap: 13px;
}

.operations-workspace__icon,
.operations-destination__icon {
  width: 46px;
  min-width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--color-grey-800);
  background: var(--color-grey-100);
  border-radius: var(--radius-md);
}

.operations-workspace__heading h2 {
  margin: 0 0 3px;
  font: 700 24px/1 var(--font-display);
  text-transform: uppercase;
}

.operations-workspace__heading p,
.operations-empty-workspace p {
  margin: 0;
  color: var(--color-grey-600);
  font-size: 13px;
}

.operations-person-search,
.operations-inventory-search {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 8px;
}

.operations-person-search {
  width: min(100%, 500px);
}

.operations-person-table {
  overflow-x: auto;
}

.operations-destination {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.operations-destination:hover {
  border-color: var(--color-grey-500);
}

.operations-destination__icon {
  width: 40px;
  min-width: 40px;
  height: 40px;
}

.operations-destination > span:nth-child(2) {
  display: grid;
}

.operations-destination small {
  color: var(--color-grey-500);
}

.operations-destination--primary {
  color: var(--color-white);
  background: var(--color-black);
  border-color: var(--color-black);
}

.operations-destination--primary:hover {
  border-color: var(--color-red);
}

.operations-destination--primary .operations-destination__icon {
  color: var(--color-white);
  background: var(--color-red);
}

.operations-destination--primary small {
  color: var(--color-grey-300);
}

.table-row-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  padding: 0 10px;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.distribution-panel {
  width: min(100%, 1260px);
  height: 100%;
  margin: 0 auto;
}

.distribution-layout {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  gap: 16px;
}

.distribution-rail,
.distribution-workspace,
.distribution-success {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
}

.distribution-rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  overflow: hidden;
}

.distribution-rail h1 {
  margin: 6px 0 0;
  font: 700 26px/1 var(--font-display);
  text-transform: uppercase;
}

.distribution-person-summary,
.distribution-person-option {
  display: flex;
  align-items: center;
  gap: 11px;
}

.distribution-person-summary__initials {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: 50%;
  font: 700 15px/1 var(--font-display);
  text-transform: uppercase;
}

.distribution-person-summary > div,
.distribution-person-option > span:first-child {
  min-width: 0;
  display: grid;
}

.distribution-person-summary small,
.distribution-person-option small {
  overflow: hidden;
  color: var(--color-grey-600);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribution-rail__empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 22px 14px;
  color: var(--color-grey-500);
  border: 1px dashed var(--color-grey-300);
  border-radius: var(--radius-md);
  text-align: center;
}

.distribution-rail__empty .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  opacity: 0.7;
}

.distribution-rail__cta {
  margin-top: auto;
  display: grid;
  gap: 8px;
}

/* UX-9: Vorgangs-Spieltag als Badge in der Rail. */
.distribution-rail__matchday-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: start;
  padding: 5px 10px;
  color: var(--color-grey-700, var(--color-grey-600));
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.distribution-rail__matchday-badge .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--color-grey-600);
}

/* UX-33: sichtbarer Abbrechen-Ausstieg unter der CTA. */
.distribution-rail__abort {
  justify-self: center;
  padding: 8px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--color-grey-600);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.distribution-rail__abort:hover {
  color: var(--color-error-text);
}

/* UX-33: "Laufenden Vorgang fortsetzen?"-Banner in Schritt 1. */
.wizard-resume-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  color: var(--status-info);
  background: var(--status-info-bg);
  border: 1px solid var(--status-info);
  border-radius: var(--radius-md);
}

.wizard-resume-banner__text {
  display: grid;
  gap: 2px;
}

.wizard-resume-banner__text strong {
  font-size: 14px;
}

.wizard-resume-banner__text span {
  color: var(--color-grey-700, var(--color-grey-600));
  font-size: 12px;
}

.wizard-resume-banner__actions {
  display: flex;
  gap: 8px;
}

/* UX-34/UX-13b: laufende Schritt-CTA sofort als "in Arbeit" kennzeichnen. */
.button.is-pending,
.button[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.distribution-person-chip {
  flex: 0 0 auto;
  padding: 4px 9px;
  color: var(--color-grey-600);
  background: var(--color-grey-100);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.distribution-rail__empty p {
  margin: 0;
  font-size: 12px;
}

.distribution-rail__notice,
.distribution-info,
.distribution-blocker {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
}

.distribution-rail__notice,
.distribution-info {
  color: var(--status-success);
  background: var(--status-success-bg);
  border: 1px solid #b9ddc0;
}

.distribution-blocker {
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}

.distribution-blocker p {
  margin: 0;
}

.distribution-blocker--compact {
  margin-top: 12px;
  padding: 9px 11px;
}

/* InlineNotice (B-6): eine getoente Hinweisbox fuer alle Toene. */
.inline-notice {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 12px;
}

.inline-notice p {
  margin: 0;
}

.inline-notice--compact {
  margin-top: 12px;
  padding: 9px 11px;
}

.inline-notice--success {
  color: var(--status-success);
  background: var(--status-success-bg);
  border: 1px solid #b9ddc0;
}

.inline-notice--danger {
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
}

.inline-notice--warning {
  color: var(--status-warning);
  background: var(--status-warning-bg);
  border: 1px solid var(--status-warning);
}

.inline-notice--info {
  color: var(--status-info);
  background: var(--status-info-bg);
  border: 1px solid var(--status-info);
}

/* Icon-Notices rendern Icon + Text in einer Zeile (ⓘ Hinweis). */
.inline-notice--info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.inline-notice .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  flex: none;
  margin-top: 1px;
}

.inline-notice--neutral {
  color: var(--color-grey-800);
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
}

.distribution-rail__items {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow: hidden;
}

.distribution-rail__items > div {
  display: grid;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--color-grey-200);
}

.distribution-rail__items strong,
.distribution-rail__items span {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribution-rail__items span {
  color: var(--color-grey-600);
}

.distribution-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.distribution-back-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-grey-600);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.distribution-back-link:hover {
  color: var(--color-grey-950);
}

.distribution-back-link .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.distribution-rail__deposit {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 13px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
}

.distribution-rail__deposit-check {
  width: 22px;
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: var(--color-red);
  border-radius: 6px;
}

.distribution-rail__deposit-check .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.distribution-rail__parts {
  display: grid;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.distribution-rail__parts > div {
  display: grid;
  gap: 5px;
}

.distribution-rail__part {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 10px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 8px;
  font-size: 12px;
}

.distribution-rail__part > span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--color-grey-950);
}

.distribution-rail__part small {
  color: var(--color-grey-500);
  font-size: 10px;
}

.distribution-standard-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0 10px;
  border-bottom: 1px solid var(--color-grey-200);
  font-size: 12px;
}

.distribution-standard-notice__text {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.distribution-standard-notice__text .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  color: var(--status-success);
  flex: none;
}

/* UX-3: Bei 0 Vorauswahl ein neutraler Hinweis statt der gruenen Erfolgsnotiz. */
.distribution-standard-notice--hint .distribution-standard-notice__text {
  color: var(--color-grey-700);
}

.distribution-standard-notice--hint .distribution-standard-notice__text .icon {
  color: var(--status-warning);
}

.distribution-standard-notice__clear {
  padding: 0;
  color: var(--color-grey-950);
  background: none;
  border: 0;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.distribution-category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-grey-500);
  font-size: 11px;
}

.field-required {
  color: var(--color-red);
}

/* Horizontaler Pill-Stepper am Kopf der Arbeitsfläche (Stepper.dc) */
.distribution-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.distribution-stepper li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px 0 8px;
  color: var(--color-grey-600);
  border: 1px solid var(--color-grey-300);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.distribution-stepper li > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid currentcolor;
  border-radius: 50%;
  font-size: 11px;
}

.distribution-stepper li > span .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.distribution-stepper li.is-active {
  color: var(--color-white);
  background: var(--color-red);
  border-color: var(--color-red);
}

.distribution-stepper li.is-complete {
  color: var(--status-success);
  border-color: var(--status-success);
}

.distribution-workspace {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  overflow: hidden;
}

.distribution-heading {
  min-height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.distribution-heading h2 {
  margin: 5px 0 0;
  font: 700 28px/1 var(--font-display);
  text-transform: uppercase;
}

.distribution-heading > span {
  color: var(--color-grey-600);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}

.distribution-step-one {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.distribution-search,
.distribution-person-check {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.distribution-search h3,
.distribution-person-check h3,
.distribution-liability h3,
.distribution-signature h3 {
  margin: 0;
  font: 700 17px/1 var(--font-display);
  text-transform: uppercase;
}

.distribution-person-results {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

/* UX-4: Personalnr./Agentur in der Trefferzeile visuell staerken (dunkler,
   fett) zur Dublettentrennung — Geschlecht bleibt hell/normal gewichtet. */
.distribution-person-option__meta {
  color: var(--color-grey-800);
  font-weight: 700;
}

/* GF-27: Schritt-1-Seitenspalte — Anlegen-Aktion oben, darunter "Zuletzt
   bedient" aus der DB (alle Versorgten des Spieltags, neueste zuerst) mit
   internem Scroll; ausgelegt auf 100+ Eintraege. */
.distribution-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.distribution-served {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.distribution-served__title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-grey-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.distribution-served__count {
  padding: 1px 8px;
  background: var(--color-grey-100);
  border-radius: 999px;
  color: var(--color-grey-800);
  font-size: 10px;
}

.distribution-served__filter {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
  font-size: 13px;
}

.distribution-served__list {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 6px;
}

.distribution-served__empty {
  margin: 0;
  color: var(--color-grey-500);
  font-size: 12px;
}

.distribution-person-option em.is-done {
  color: var(--status-success);
  font-style: normal;
  font-weight: 700;
}

.distribution-person-row--compact .distribution-person-option {
  min-height: 44px;
}

/* UX-4: Direkttreffer der Personalnummer-/Scan-Suche — dieselbe Zeile/Gate
   wie die Trefferliste, Gate startet offen (kein Klick noetig), kompakter
   gruener Hinweis analog `.distribution-standard-notice__text`. */
.distribution-direct-match {
  display: grid;
  gap: 6px;
}

.distribution-direct-match__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--status-success);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.distribution-direct-match__badge .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* UX-16: Personenzeile mit inline aufklappbarem Pfand-/Weiter-Formular. */
.distribution-person-row {
  display: grid;
}

.distribution-person-row .distribution-person-option[aria-expanded="true"] {
  border-color: var(--color-red);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.distribution-person-gate {
  display: grid;
  gap: 9px;
  padding: 11px;
  background: var(--color-offwhite);
  border: 1px solid var(--color-red);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.distribution-person-gate[hidden] {
  display: none;
}

.distribution-person-option {
  min-height: 58px;
  padding: 7px 10px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.distribution-person-option:hover,
.distribution-person-option.is-selected {
  border-color: var(--color-red);
}

.distribution-person-option.is-selected {
  background: var(--color-error-bg);
}

.distribution-person-option > span:first-child {
  flex: 1;
}

.distribution-person-option em {
  padding: 3px 7px;
  /* A-4: Default-Badge ("Offene Ausgabe") ist Neutral-Grau (→ offen), nicht Erfolgs-Gruen. */
  color: var(--color-grey-800);
  background: var(--color-grey-100);
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.distribution-person-option em.is-warning {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.distribution-person-option .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-grey-500);
}

.distribution-person-empty {
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--color-grey-600);
  background: var(--color-offwhite);
  border: 1px dashed var(--color-grey-300);
  border-radius: var(--radius-md);
  font-size: 12px;
  text-align: center;
}

.distribution-person-results .pagination {
  padding-top: 4px;
}

.distribution-selected-person {
  display: grid;
  padding: 13px;
  background: var(--color-offwhite);
  border-radius: var(--radius-md);
}

.distribution-selected-person span {
  color: var(--color-grey-600);
  font-size: 12px;
}

.distribution-gates {
  display: grid;
  gap: 10px;
}

.distribution-check {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.distribution-check input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  accent-color: var(--color-red);
}

.distribution-check span {
  display: grid;
}

.distribution-check small {
  color: var(--color-grey-600);
  font-size: 11px;
}

.distribution-person-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-grey-600);
  text-align: center;
  background: var(--color-offwhite);
  border-radius: var(--radius-md);
}

.distribution-person-placeholder p {
  max-width: 260px;
  margin: 0;
  font-size: 12px;
}

/* GF-27: Schnellerfassung lebt jetzt im <dialog> — statisches Grid statt
   absolutem Popover ueber dem Details-Summary. */
.quick-add-dialog {
  width: min(680px, calc(100vw - 48px));
  padding: 0;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-lg);
}

.quick-add-dialog::backdrop {
  background: rgb(13 13 13 / 40%);
}

.quick-add-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-grey-200);
}

.quick-add-dialog__header h2 {
  margin: 0;
  font: 700 17px/1 var(--font-display);
  text-transform: uppercase;
}

.distribution-quick-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.distribution-quick-form .field {
  gap: 3px;
}

.distribution-quick-form .field--checkbox,
.distribution-quick-form .form-alert,
.distribution-quick-form .button {
  grid-column: 1 / -1;
}

.distribution-quick-form .field--checkbox {
  /* UX-30: Bestaetigungs-Label als vollwertiges Touch-Ziel. */
  min-height: 44px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
}

.distribution-quick-form .field--checkbox input {
  width: 22px;
  min-height: 22px;
}

.distribution-quick-form .field--checkbox label {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.distribution-clothing-form,
.distribution-completion {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.distribution-type-grid {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.distribution-type-card {
  min-width: 0;
  min-height: 0;
  padding: 11px;
  overflow: hidden;
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.distribution-type-card legend {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 3px;
  font-size: 12px;
  font-weight: 800;
}

.distribution-card-color {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 6px;
  padding: 0 3px;
  color: var(--color-grey-600);
  font-size: 10px;
}

.distribution-type-card > p {
  margin: 3px 0 6px;
  color: var(--color-grey-600);
  font-size: 9px;
}

.distribution-current-items {
  display: grid;
  gap: 2px;
  padding: 5px 7px;
  margin-bottom: 5px;
  color: var(--status-success);
  background: var(--status-success-bg);
  border-radius: var(--radius-sm);
  font-size: 8px;
}

.distribution-current-items span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.distribution-size-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.distribution-size-choice {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  /* GF-26g: ganze Kachel ist Klickflaeche (waehlt 0 <-> 1). */
  cursor: pointer;
}

.distribution-size-choice:hover {
  border-color: var(--color-grey-600);
}

.distribution-size-choice > span:first-child {
  min-width: 0;
  display: grid;
}

.distribution-size-choice.is-chosen {
  background: var(--color-error-bg);
  border-color: var(--color-red);
}

.distribution-size-choice.is-chosen > span strong {
  color: var(--color-red-dark);
}

.distribution-size-choice small {
  overflow: hidden;
  color: var(--color-grey-600);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* UX-11: gemeinsamer +/−-Stepper (gleiche Optik/Verhalten wie offline). */
.quantity-stepper {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quantity-stepper button {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-grey-950);
  background: var(--color-white);
  border: 1.5px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

.quantity-stepper button:disabled {
  color: var(--color-grey-400);
  cursor: default;
  opacity: 0.55;
}

.quantity-stepper__value {
  min-width: 22px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
}

/* UX-10: vergriffene Typen kompakt gebuendelt statt gleich grosse Totkarten. */
.distribution-unavailable-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  background: var(--color-offwhite);
  border: 1px dashed var(--color-grey-300);
  border-radius: var(--radius-md);
}

.distribution-unavailable-row__types {
  min-width: 0;
  color: var(--color-grey-600);
  font-size: 11px;
  line-height: 1.35;
}

.distribution-footer-actions {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--color-grey-200);
}

.distribution-footer-actions .button--primary {
  min-width: 230px;
}

.distribution-footer-actions button:disabled {
  color: var(--color-grey-500);
  background: var(--color-grey-200);
  cursor: not-allowed;
}

.distribution-completion__controls {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* === GF-31: Haftung zweiphasig — Host-Kontrolle + Signier-Takeover ======= */

/* Phase 1: Host-Kontrolle — einfacher Stapel mit internem Scroll. */
.distribution-handover {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.distribution-handover__head > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.distribution-handover__head em {
  padding: 3px 7px;
  color: var(--status-warning);
  background: var(--status-warning-bg);
  border-radius: 999px;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.distribution-handover__head h3 {
  margin-top: 10px;
}

.distribution-handover__head p {
  margin: 4px 0 0;
  color: var(--color-grey-600);
  font-size: 12px;
}

/* Beleg (Teileliste) — geteilt zwischen Kontrolle und Signier-Screen. */
.distribution-receipt {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.distribution-receipt__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-grey-200);
  font-size: 13px;
}

.distribution-receipt__meta span {
  color: var(--color-grey-600);
  font-size: 11px;
}

.distribution-receipt__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.distribution-receipt__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.distribution-receipt__list small {
  color: var(--color-grey-500);
}

/* Phase 2: Vollbild-Takeover — verdeckt Header, Stepper und Rail komplett
   (z-index ueber .skip-link:100). display:flex wuerde das UA-[hidden]
   schlagen (bekannte GF-30-Falle), deshalb die explizite [hidden]-Regel. */
.distribution-signing {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(14px, 3vw, 28px);
  background: var(--color-white);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.distribution-signing[hidden] {
  display: none;
}

.distribution-signing__exit {
  align-self: flex-start;
}

.distribution-signing__sheet {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.distribution-signing__head h3 {
  margin: 2px 0 0;
}

.distribution-signing__head p {
  margin: 4px 0 0;
  color: var(--color-grey-600);
  font-size: 12px;
}

.distribution-signing__deposit {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #438a51;
  font-size: 13px;
  font-weight: 700;
}

.distribution-signing__deposit svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Waehrend des Takeovers scrollt nur der Signier-Screen selbst. */
body.is-signing {
  overflow: hidden;
}

/* GF-31d: Auch das Wurzelelement sperren — auf schmalen Viewports scrollt
   sonst documentElement hinter dem fixed Overlay weiter (Tablet-Rubber-Band). */
html:has(body.is-signing) {
  overflow: hidden;
  overscroll-behavior: none;
}

.distribution-liability,
.distribution-signature {
  min-height: 0;
  padding: 18px;
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.distribution-signature__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.distribution-liability > p {
  color: var(--color-grey-700);
  font-size: 13px;
  line-height: 1.65;
  /* GF-30: Der Haftungstext ist eine kompakte Scroll-Box statt einer
     seitenlangen Textwand — die Unterschrift bleibt in Reichweite, der
     volle Text bleibt im Kasten lesbar (Muster: Consent-Box). Weisser,
     geraenderter Innenkasten = sichtbare Scroll-Affordanz statt eines
     mitten in der Zeile abgeschnittenen Texts. */
  max-height: clamp(160px, 30vh, 340px);
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  scrollbar-width: thin;
}

.distribution-signature {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.distribution-signature__heading p {
  margin: 4px 0 0;
  color: var(--color-grey-600);
  font-size: 11px;
}

.signature-pad {
  position: relative;
  /* GF-30: grosszuegige Schreibflaeche auf jedem Viewport (Industrie-Muster:
     volle Breite + genug Hoehe fuer eine natuerliche Unterschrift). */
  min-height: clamp(180px, 24vh, 300px);
  flex: 1;
  overflow: hidden;
  background: var(--color-white);
  border: 2px dashed var(--color-grey-400);
  border-radius: var(--radius-md);
}

.signature-pad.is-signed {
  border-color: #438a51;
  border-style: solid;
}

.signature-pad canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
}

.signature-pad > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-grey-400);
  font-size: 12px;
  pointer-events: none;
}

.signature-pad > span[hidden] {
  display: none;
}

.signature-status {
  margin: 0;
  color: var(--color-grey-600);
  font-size: 11px;
  font-weight: 700;
}

.distribution-completion .distribution-footer-actions {
  grid-column: 1 / -1;
}

.distribution-success {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
}

.distribution-success__icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: #438a51;
  border-radius: 50%;
}

.distribution-success__icon .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.distribution-success h1 {
  margin: 0;
  font: 700 36px/1 var(--font-display);
  text-transform: uppercase;
}

.distribution-success > p {
  margin: 0;
  color: var(--color-grey-600);
}

.distribution-success__items {
  max-width: 680px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.distribution-success__items span {
  padding: 7px 10px;
  background: var(--color-offwhite);
  border-radius: 999px;
  font-size: 11px;
}

.distribution-success__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.operations-empty-workspace {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
}

.operations-empty-workspace h1 {
  margin: 4px 0 0;
  font: 700 28px/1 var(--font-display);
  text-transform: uppercase;
}

.backoffice-shell {
  width: 100%;
  min-height: 100vh;
  min-width: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.backoffice-sidebar {
  min-height: 100vh;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 20px;
  color: var(--color-white);
  background: var(--color-black);
}

.backoffice-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-label {
  margin: 0 10px 4px;
}

.sidebar-label--section {
  margin-top: 18px;
}

.sidebar-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.sidebar-link[aria-current="page"] {
  color: var(--color-black);
  background: var(--color-white);
  border-color: var(--color-white);
}

.backoffice-sidebar__footer {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.backoffice-sidebar__footer form {
  margin: 0;
}

.backoffice-content {
  min-width: 0;
}

.backoffice-header {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 32px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-grey-200);
}

.backoffice-header h1 {
  margin: 5px 0 0;
  font: 700 28px/1 var(--font-display);
  text-transform: uppercase;
}

.user-chip {
  padding: 8px 12px;
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-200);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.backoffice-main {
  padding: 36px 32px;
}

.backoffice-main > * {
  width: min(100%, 1280px);
  margin-right: auto;
  margin-left: auto;
}

.messages {
  width: min(100%, 1280px);
  display: grid;
  gap: 8px;
  margin: 0 auto 20px;
}

.message {
  padding: 12px 14px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

.message--success {
  border-color: var(--color-success-border);
}

.message--error {
  color: var(--color-error-text);
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
}

.summary-metric {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border-right: 1px solid var(--color-grey-200);
  text-decoration: none;
  transition:
    background 160ms ease,
    color 160ms ease;
}

.summary-metric:last-child {
  border-right: 0;
}

.summary-metric:hover {
  background: var(--color-offwhite);
}

.summary-metric__label {
  color: var(--color-grey-600);
  font-size: 13px;
  font-weight: 700;
}

.summary-metric__value {
  font: 700 46px/0.85 var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* UX-19: "gesamt"-Referenz neben der Kachel-Zahl, deutlich kleiner/grauer. */
.summary-metric__value small {
  color: var(--color-grey-500);
  font-size: 15px;
  font-weight: 700;
}

.list-page-tools {
  display: block;
  align-items: end;
  gap: 16px;
  margin-bottom: 18px;
}

.live-results {
  position: relative;
  transition: opacity 120ms ease;
}

.live-results[aria-busy="true"] {
  opacity: 0.48;
  pointer-events: none;
}

.live-results[aria-busy="true"]::after {
  content: "Ergebnisse werden aktualisiert";
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 2;
  padding: 8px 12px;
  color: var(--color-white);
  background: var(--color-black);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  transform: translateX(-50%);
}

.list-primary-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.list-page-tools--end {
  display: flex;
  justify-content: flex-end;
}

.list-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 360px 112px;
  align-items: end;
  gap: 12px;
}

.list-toolbar--compact {
  width: min(100%, 720px);
  grid-template-columns: minmax(240px, 1fr) auto;
}

.list-toolbar__search {
  min-width: 0;
}

.list-toolbar__filters,
.list-toolbar__actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.search-control {
  position: relative;
}

.search-control > .icon {
  position: absolute;
  top: 50%;
  left: 13px;
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--color-grey-500);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-control input {
  width: 100%;
  min-height: 46px;
  padding: 0 44px 0 42px;
  color: var(--color-grey-950);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

.search-control input:hover,
.search-control input:focus {
  border-color: var(--color-grey-600);
}

.search-control__clear {
  /* UX-27: 44x44 Tap-Flaeche (Element-Box), 34px sichtbare Optik ueber ::before. */
  position: absolute;
  top: 50%;
  right: 3px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-grey-500);
  background: transparent;
  border: 0;
  transform: translateY(-50%);
  cursor: pointer;
}

.search-control__clear::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
}

.search-control__clear .icon {
  position: relative;
  z-index: 1;
}

.search-control__clear[hidden] {
  display: none;
}

.search-control__clear:hover {
  color: var(--color-grey-950);
}

.search-control__clear:hover::before {
  background: var(--color-grey-100);
}

.filter-control {
  display: grid;
  gap: 5px;
}

.filter-control select {
  min-width: 150px;
  min-height: 44px;
  padding: 0 34px 0 12px;
  color: var(--color-grey-950);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

.filter-control > span {
  color: var(--color-grey-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.toggle-control {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  color: var(--color-grey-800);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
}

.toggle-control:hover {
  border-color: var(--color-grey-600);
}

.toggle-control input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-red);
}

.operations-inventory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.view-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.view-toggle__option {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  color: var(--color-grey-600);
  border-radius: calc(var(--radius-md) - 3px);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.view-toggle__option:hover {
  color: var(--color-grey-950);
}

.view-toggle__option[aria-current="page"] {
  color: var(--color-white);
  background: var(--color-black);
  box-shadow: var(--shadow-control);
}

.operations-category-filter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.operations-category-filter label {
  color: var(--color-grey-600);
  font-size: 12px;
  font-weight: 700;
}

.operations-category-filter select {
  min-height: 44px;
  padding: 0 34px 0 12px;
  color: var(--color-grey-950);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

.matrix-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--color-grey-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.matrix-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}

.matrix-legend__item .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.matrix-legend__item--available {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.matrix-legend__item--low {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.matrix-legend__item--empty {
  color: var(--color-red);
  background: var(--color-white);
  border: 1px solid var(--color-red);
}

.matrix-card {
  min-height: 500px;
  padding: 8px 16px 18px;
}

/*
 * UX-45: Zwei kanonische th-Padding-Stufen — breit/freistehend `th,td` (14px 16px),
 * schmal Master-Detail `.admin-master-list` (10px 12px). Die dichte Typ x Groesse-Matrix
 * ist die bewusst dokumentierte Ausnahme (viele Zellen auf engem Raum).
 */
.inventory-matrix th,
.inventory-matrix td {
  padding: 7px 4px;
  border-bottom: 0;
  text-align: center;
}

.inventory-matrix {
  table-layout: fixed;
}

.inventory-matrix th:first-child,
.inventory-matrix td:first-child {
  width: 165px;
  padding-right: 12px;
  text-align: left;
}

.inventory-matrix td:first-child small {
  display: block;
  color: var(--color-grey-500);
  font-size: 11px;
}

.matrix-cell {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.matrix-cell--available {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.matrix-cell--low {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.matrix-cell--empty {
  color: var(--color-red);
  background: var(--color-white);
  border: 1px solid var(--color-red);
}

.operations-inventory-search {
  width: min(100%, 620px);
  margin-bottom: 12px;
}

/*
 * UX-55: Filter-Chips als dezente, einzeilige Werkzeugleiste — kein Umbruch,
 * bei Bedarf horizontal scrollbar; kleinere Hoehe/Padding/Font, dezente Zaehler.
 */
.filter-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.filter-chip {
  min-height: 32px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  color: var(--color-grey-600);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

.filter-chip span {
  min-width: 18px;
  padding: 1px 5px;
  color: var(--color-grey-500);
  background: var(--color-grey-100);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.filter-chip:hover {
  color: var(--color-grey-950);
  border-color: var(--color-grey-600);
}

.filter-chip[aria-current="page"] {
  color: var(--color-white);
  background: var(--color-black);
  border-color: var(--color-black);
}

.filter-chip[aria-current="page"] span {
  color: var(--color-white);
  background: rgb(255 255 255 / 18%);
}

.status-badge {
  width: fit-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: var(--color-grey-600);
  background: var(--color-grey-100);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-badge .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.status-badge--available {
  color: var(--status-success);
  background: var(--status-success-bg);
}

/* Beschädigt = Terrakotta (Status-Token-Map: --status-damage) */
.status-badge--damaged {
  color: var(--status-damage);
  background: var(--status-damage-bg);
}

/* A-15: Reinigung ist ein neutraler, nicht-blockierender Bearbeitungszustand — Info-Blau statt Warn-Amber. */
.status-badge--cleaning {
  color: var(--status-info);
  background: var(--status-info-bg);
}

.status-badge--warning {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

.status-badge--missing,
.status-badge--retired {
  color: var(--color-red-dark);
  background: var(--color-error-bg);
}

/* A-6: Rot-Umriss (analog matrix-cell--empty), nicht die solide Fehlt-Fuellung
   von status-badge--missing. */
.status-badge--vergriffen {
  color: var(--color-red);
  background: var(--color-white);
  border: 1px solid var(--color-red);
}

/* A-13a: "Aktiv"-Pille im Personen-Detailkopf mit fuehrendem Punkt. Bewusst
   auf den Detailkopf beschraenkt (nicht global auf status-badge--available),
   damit Bestandsstatus-Badges ("Verfügbar" + Icon in Tabellen) unveraendert
   bleiben. */
.admin-detail-card__header .status-badge--available::before {
  content: "";
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.table-card {
  overflow-x: auto;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.table-card--narrow {
  width: 100%;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.responsive-table {
  table-layout: fixed;
}

.responsive-table--actions th:last-child,
.responsive-table--actions td:last-child {
  width: 124px;
}

.inventory-table th:first-child,
.inventory-table td:first-child {
  width: 190px;
}


/* Review 2026-07-23: Spaltenmasse der Reinigungs-Tabelle — feste Breiten fuer
   Nummer/Teile/Status/Aktionen, der Spieltag bekommt den freien Raum (vorher
   verteilte table-layout:fixed stur 20% je Spalte). Nur th: bei fixed layout
   bestimmt die Kopfzeile die Spaltenbreiten, und mobil ist sie ausgeblendet. */
.cleaning-runs .responsive-table th:nth-child(1) {
  width: 138px;
}

/* Nummer und Uebergabe-Zeitstempel gestapelt statt ineinanderfliessend. */
.cleaning-runs .responsive-table td:first-child strong,
.cleaning-runs .responsive-table td:first-child small {
  display: block;
  white-space: nowrap;
}

.cleaning-runs .responsive-table th:nth-child(3) {
  width: 56px;
}

.cleaning-runs .responsive-table th:nth-child(4) {
  width: 178px;
}

.cleaning-runs .responsive-table th:nth-child(5) {
  width: 158px;
}

.sortable-header {
  /* UX-29: Spaltenkopf-Link als 44px-Touch-Ziel (vorher nur Textinhalt ~17px). */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}

.sortable-header:hover {
  color: var(--color-grey-950);
}

.sortable-header__indicator {
  color: var(--color-grey-500);
  font-size: 14px;
}

th,
td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-grey-200);
}

th {
  color: var(--color-grey-600);
  background: var(--color-offwhite);
  font: 700 11px/1.2 var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

tbody tr {
  transition: background 160ms ease;
}

tbody tr:hover {
  background: var(--color-offwhite);
}

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

.row-actions__inner {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.row-actions__inner form {
  margin: 0;
}

.icon-button {
  width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--color-grey-800);
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
}

.icon-button:hover {
  color: var(--color-black);
  background: var(--color-grey-100);
  border-color: var(--color-grey-300);
}

.icon-button--edit:hover {
  color: var(--status-info);
  background: var(--status-info-bg);
  border-color: #a8c9e5;
}

.icon-button--warning:hover {
  color: #7a441c;
  background: #fff0e7;
  border-color: #e9b58f;
}

.icon-button--danger:hover {
  color: var(--color-red-dark);
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

.icon-button .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.empty-cell {
  padding: 36px 16px;
  color: var(--color-grey-600);
  text-align: center;
}

.editor-form {
  width: min(100%, 680px);
  display: grid;
  gap: 18px;
  padding: 26px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
}

.app-dialog {
  width: min(calc(100% - 32px), 720px);
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: auto;
  background: transparent;
  border: 0;
}

.app-dialog::backdrop {
  background: rgb(15 18 22 / 62%);
  backdrop-filter: blur(2px);
}

.app-dialog__surface {
  padding: 26px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.app-dialog__surface h2 {
  margin: 0 0 10px;
  font: 700 24px/1.1 var(--font-display);
  text-transform: uppercase;
}

.app-dialog__surface p {
  color: var(--color-grey-600);
}

.app-dialog__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.app-dialog__heading h2 {
  margin: 0;
}

.app-dialog--editor .editor-form {
  width: 100%;
  padding: 0;
  border: 0;
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
  gap: 24px;
  align-items: start;
}

.import-upload {
  width: 100%;
}

.import-guide {
  padding: 26px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
}

.import-guide h2 {
  margin: 6px 0 14px;
  font: 700 24px/1.1 var(--font-display);
  text-transform: uppercase;
}

.import-guide ol {
  padding-left: 20px;
  color: var(--color-grey-600);
}

.import-guide > code {
  display: block;
  overflow-x: auto;
  padding: 12px;
  background: var(--color-offwhite);
  border-radius: var(--radius-sm);
  font-size: 12px;
  white-space: nowrap;
}

.import-guide p {
  color: var(--color-grey-600);
  font-size: 13px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-actions form {
  margin: 0;
}

/* Review 2026-07-23: Summary entfernt — die Controls stehen rechtsbuendig. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 15px 4px 0;
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination__button {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  color: var(--color-grey-600);
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.pagination__button:hover {
  color: var(--color-grey-950);
  border-color: var(--color-grey-500);
}

.pagination__button--current {
  color: var(--color-white);
  background: var(--color-black);
  border-color: var(--color-black);
}

.pagination__button[aria-disabled="true"] {
  color: var(--color-grey-300);
  background: transparent;
}

.pagination__button .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.pagination__ellipsis {
  padding: 0 4px;
  color: var(--color-grey-500);
}

/*
 * UX-53: Kompakte Sidebar-Variante — Summary GESTAPELT ueber den Controls,
 * reduzierte Controls (Erste/Zurueck/Status/Weiter/Letzte) ohne
 * Seitenzahlen-Fenster, harte Breitenbegrenzung auf die Sidebar (kein Overlap
 * ueber den Detail-Bereich). Die 44px-Ziele (GF-21) bleiben erhalten.
 */
.pagination--compact {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 2px 0;
  max-width: 100%;
}

.pagination--compact .pagination__controls {
  justify-content: space-between;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
}

.pagination--compact .pagination__button {
  padding-inline: 5px;
}

.pagination__status {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  color: var(--color-grey-950);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-switch {
  width: fit-content;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 14px;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.import-switch a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  color: var(--color-grey-600);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.import-switch a[aria-current="page"] {
  color: var(--color-white);
  background: var(--color-black);
  box-shadow: var(--shadow-control);
}

.empty-state {
  min-height: 360px;
  display: grid;
  place-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-lg);
}

.import-summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.import-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.import-actions form {
  margin: 0;
}

.row-error {
  background: var(--color-error-bg);
}

.validation-error,
.validation-warning {
  display: block;
  font-size: 13px;
}

.validation-error {
  color: var(--color-error-text);
}

.validation-warning {
  color: var(--status-warning);
}

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

.error-stage {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 28px;
  padding: 32px;
  text-align: center;
  background: var(--color-black);
}

.error-card {
  width: min(100%, 480px);
  padding: 34px;
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.error-code {
  color: var(--color-red);
  font: 700 15px/1 var(--font-heading);
  letter-spacing: 0.18em;
}

.error-card h1 {
  margin: 10px 0 8px;
  font: 700 32px/1 var(--font-display);
  text-transform: uppercase;
}

.error-card p {
  margin: 0 0 24px;
  color: var(--color-grey-600);
}

@media (max-width: 1100px) {
  .list-page-tools {
    grid-template-columns: 1fr;
  }

  .list-page-tools > .button,
  .view-toggle {
    justify-self: end;
  }

  .list-toolbar--compact {
    width: 100%;
  }

  .header-pill-link {
    width: 44px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  .distribution-type-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  .distribution-type-card {
    padding: 8px;
  }

  .distribution-type-card legend {
    min-height: 27px;
    display: grid;
    align-content: start;
    justify-content: start;
    gap: 2px;
  }

  .distribution-type-card legend em {
    font-size: 7px;
    white-space: normal;
  }

  .distribution-size-choice small {
    display: none;
  }
}

@media (min-width: 761px) and (max-height: 900px) {
  .operations-main {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .match-day-heading {
    margin-bottom: 12px;
  }

  .match-day-heading h1 {
    font-size: 30px;
  }

  .operations-stats {
    margin-bottom: 12px;
  }

  .operations-stat {
    min-height: 76px;
    padding: 12px 18px;
  }

  .operations-stat strong {
    font-size: 28px;
  }

  .operations-workspace {
    padding: 16px;
  }

  .operations-workspace__heading {
    margin-bottom: 12px;
  }

  .operations-workspace__heading h2 {
    font-size: 22px;
  }

  .operations-destination {
    min-height: 60px;
    margin-top: 12px;
  }

  .matrix-card {
    min-height: 0;
  }
}

/* GF-29c-fix: `min-width` von 761px auf 900px (bp-md) angehoben. 761px
   ueberlappte mit dem Mobile-Regime (bis 899.98px, GF-29) im Bereich
   761-899.98px + Querformat -- genau die Breite realer Telefone im
   Querformat (iPhone 812/844/852px). Auf diesem Ueberlappungsband kollidierte
   das Fixed-Viewport-Modell hier (Seite scrollt NICHT) mit der
   Seiten-Scroll-Annahme des Mobile-Regimes; Details siehe Kommentar bei der
   Prozess-Rail-CTA (~Z. 5232). 900px matcht den dokumentierten
   Struktur-Breakpoint (`--bp-md`, tokens.css) und faellt mit den ohnehin
   einzig getesteten Landscape-Pflicht-Viewports zusammen (1194x834,
   1024x768 -- beide bereits >=900px, also unveraendert erfasst). */
@media (min-width: 900px) and (orientation: landscape) {
  /* iPad-Safari: 100vh ist die GROSSE Viewport-Hoehe (Toolbar eingeklappt) —
     mit sichtbarer Toolbar laege der untere Seitenrand (Rail-CTA, Host-Feld)
     dahinter und iOS scrollt das documentElement trotz overflow:hidden auf
     body (gleiche Beobachtung wie GF-31d). 100dvh folgt der sichtbaren
     Hoehe; die vh-Zeile davor bleibt als Fallback fuer Browser ohne dvh. */
  body.operations-page {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .operations-main {
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    min-height: 0;
    overflow: hidden;
  }
}

@media (max-width: 899.98px) {
  .import-layout {
    grid-template-columns: 1fr;
  }

  /* GF-29: .operations-header-Mobile-Layout jetzt oben bei .operations-main
     definiert (Grid-Areas statt Single-Column-Stack) — hier entfernt, um die
     spaeter im Stylesheet stehende, gleich-spezifische Regel nicht cascaden-
     bedingt gewinnen zu lassen. */

  .backoffice-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .backoffice-sidebar {
    min-height: auto;
    overflow: hidden;
  }

  .backoffice-sidebar nav {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .backoffice-sidebar .sidebar-link {
    flex: 0 0 auto;
  }

  .backoffice-sidebar .sidebar-label {
    display: none;
  }

  .backoffice-sidebar__footer {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }

  .list-toolbar,
  .list-toolbar--compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .list-toolbar__search {
    grid-column: 1 / -1;
  }

  .list-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-control select,
  .toggle-control {
    width: 100%;
    min-width: 0;
  }

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

  .operations-person-search {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .auth-stage {
    padding: 24px 18px;
  }

  .operations-main {
    padding: 24px 18px;
  }

  .backoffice-header,
  .backoffice-main {
    padding-right: 20px;
    padding-left: 20px;
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-metric {
    min-height: 126px;
    border-right: 1px solid var(--color-grey-200);
    border-bottom: 1px solid var(--color-grey-200);
  }

  .summary-metric:nth-child(2n) {
    border-right: 0;
  }

  .summary-metric:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .list-page-tools,
  .form-actions {
    align-items: stretch;
  }

  .list-page-tools {
    display: grid;
  }

  .list-page-tools > .button,
  .form-actions > .button,
  .form-actions form,
  .form-actions form .button,
  .import-actions form,
  .import-actions .button {
    width: 100%;
  }

  .list-toolbar,
  .list-toolbar--compact {
    grid-template-columns: 1fr;
  }

  .list-toolbar__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .list-toolbar__actions {
    flex-wrap: wrap;
  }

  .filter-control select,
  .toggle-control {
    width: 100%;
    min-width: 0;
  }

  .list-page-tools > .button,
  .view-toggle {
    justify-self: stretch;
  }

  .view-toggle {
    width: 100%;
  }

  .operations-stats {
    grid-template-columns: 1fr;
  }

  .operations-stat {
    min-height: 82px;
    border-right: 0;
    border-bottom: 1px solid var(--color-grey-200);
  }

  .operations-stat:last-child {
    border-bottom: 0;
  }

  .operations-inventory-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .operations-category-filter {
    display: grid;
    grid-template-columns: 1fr;
  }

  .operations-category-filter label {
    grid-column: 1 / -1;
  }

  .operations-category-filter select {
    width: 100%;
  }

  .operations-person-search,
  .operations-inventory-search {
    grid-template-columns: 1fr;
  }

  .table-card {
    overflow: visible;
    background: transparent;
    border: 0;
  }

  .table-card--narrow {
    width: 100%;
  }

  .operations-person-table {
    max-height: none;
  }

  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table--actions td:last-child,
  .inventory-table td:first-child {
    width: 100%;
  }

  .responsive-table thead {
    display: none;
  }

  .responsive-table tbody {
    display: grid;
    gap: 12px;
  }

  .responsive-table tr {
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-grey-200);
    border-radius: var(--radius-md);
  }

  .responsive-table td {
    display: grid;
    grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-grey-200);
  }

  .responsive-table td::before {
    content: attr(data-label);
    color: var(--color-grey-600);
    font: 700 10px/1.3 var(--font-heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .responsive-table td.empty-cell {
    display: block;
  }

  .responsive-table td.empty-cell::before {
    content: none;
  }

  /* GF-29e: Die generische .responsive-table Label/Wert-Grid-Regel (oben,
     greift ab 760px) zerlegt die Master-Listen-Zeile (.admin-master-list) in ein
     schiefes "NAME | Wert"-Raster, weil dort NICHT die Tabellenkopf-Etiketten
     gemeint sind, sondern bereits eine eigene Card-Optik (siehe 820px, wo die
     Regel noch nicht greift). Im gesamten 760px-Band wird das Grid/Label-Muster
     deshalb fuer .admin-master-list unterdrueckt und durch dieselbe schlichte,
     einspaltige Karte ersetzt, die auch bei 820px sichtbar ist: Name + Meta-Zeile
     block, Kennwert (z. B. "4 Größen") als schlichter Wert darunter, ohne
     Etikett. Betrifft alle sechs Backoffice-Listen, die master_detail_scaffold
     nutzen (Personen, Bestand, Artikeltypen, Konten, Spieltage, Historie).
   */
  .admin-master-list .responsive-table td {
    display: block;
    padding: 10px 12px;
  }

  .admin-master-list .responsive-table td::before {
    content: none;
  }

  .admin-master-list td:last-child {
    width: auto;
    padding-top: 0;
    padding-left: 12px;
    color: var(--color-grey-600);
    font-size: 12px;
    font-weight: 700;
  }

  .row-actions__inner {
    justify-content: flex-start;
  }

  .pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .pagination__controls {
    max-width: 100%;
    flex-wrap: wrap;
  }

  .import-summary,
  .import-actions {
    align-items: stretch;
    flex-direction: column;
  }

}

@media (max-width: 599.98px) {
  .backoffice-sidebar nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }

  .backoffice-sidebar .sidebar-link {
    min-width: 0;
    justify-content: center;
    padding-right: 6px;
    padding-left: 6px;
    font-size: 12px;
    text-align: center;
  }

  .summary-grid,
  .list-toolbar__filters {
    grid-template-columns: 1fr;
  }

  .operations-match-day__current {
    /* GF-27i: feste Breite auch kompakt; Pfeile behalten das 44px-Tap-Ziel. */
    width: 190px;
    font-size: 12px;
  }

  /* GF-27j: Status ist ueberall nur noch der Punkt — keine Kompakt-Sonderregeln. */

  .operations-workspace {
    padding: 14px;
  }

  .summary-metric,
  .summary-metric:nth-child(2n) {
    border-right: 0;
    border-bottom: 1px solid var(--color-grey-200);
  }

  .summary-metric:last-child {
    border-bottom: 0;
  }
}

/* Cloud Design fidelity correction: GF-10 through GF-12 */

/* UX-42: dekorativer Kreisbogen auf der Login-Seite gestrichen (reine
   Zierlinie ohne Status-/Informationsfunktion). Die Fehlerseiten behalten
   ihn -- dort nicht beanstandet. */
.error-stage::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -90px;
  width: 360px;
  height: 360px;
  border: 2px solid rgb(255 0 0 / 28%);
  border-radius: 50%;
}

.error-stage {
  position: relative;
  overflow: hidden;
}

.error-stage > * {
  position: relative;
  z-index: 1;
}

.error-card {
  width: min(100%, 406px);
  padding: 28px 30px 30px;
  border-radius: 14px;
}

.auth-stage__content {
  width: min(100%, 406px);
  gap: 22px;
}

.login-card {
  padding: 28px 30px 30px;
  border-radius: 14px;
}

.login-card__heading h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.login-form {
  gap: 14px;
}

.operations-main {
  padding: 16px clamp(18px, 2vw, 28px) 20px;
}

.operations-panel {
  width: min(100%, 1180px);
}

.match-day-heading {
  margin-bottom: 12px;
}

.match-day-heading h1 {
  font-size: clamp(22px, 2.4vw, 30px);
}

.operations-stats {
  /* GF-27: vier Kacheln — "Ausgaben" (Spieltag) ist zurueck. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
  border-radius: 12px;
}

.operations-stat {
  min-height: 74px;
  gap: 5px;
  padding: 13px 18px;
}

.operations-stat strong {
  font-size: 27px;
}

.operations-stat__alert {
  color: var(--color-red);
}

.operations-stat__warning {
  color: #8a690d;
}

.operations-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: 14px;
}

.operations-action-card {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 16px;
}

.operations-action-card--primary {
  background: #fff2f2;
  border-color: var(--color-red);
}

.operations-action-card__header {
  display: flex;
  /* GF-27j: Titel mittig zum Icon (Untertitel entfielen mit GF-27i). */
  align-items: center;
  gap: 12px;
}

.operations-action-card__header h2 {
  margin: 4px 0 2px;
  font: 700 25px/1 var(--font-display);
  text-transform: uppercase;
}

.operations-action-card__header p {
  margin: 0;
  color: var(--color-grey-500);
  font-size: 12px;
}

.operations-action-card--primary .operations-workspace__icon {
  color: var(--color-white);
  background: var(--color-red);
}

.operations-person-search {
  width: 100%;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

/* UX-50: Input + Clear + Start verschmelzen zu EINEM Control — gemeinsamer
   Fokusring um die Gruppe, innere Kante ohne Border/Radius. */
.operations-person-search:focus-within {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
  border-radius: var(--radius-md);
  box-shadow: var(--focus-ring);
}

.operations-person-search .search-control input {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  border-right: 0;
}

.operations-person-search .search-control input:focus-visible,
.operations-person-search__start:focus-visible {
  outline: 0;
  box-shadow: none;
}

.operations-person-search__start {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* GF-26g: Variante ohne angeschlossenen Start-Button (Rueckgabe-Suche) —
   das Input bekommt rechten Rand und vollen Radius zurueck. */
.operations-person-search--plain .search-control input {
  border-right: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

.operations-person-search--plain .search-control input:hover,
.operations-person-search--plain .search-control input:focus {
  border-right-color: var(--color-grey-600);
}

.operations-person-results__caption {
  color: var(--color-grey-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operations-person-results__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 700;
}

/* GF-26: gleiche Warn-Farbe wie die Wizard-Trefferliste (em.is-warning). */
.operations-person-results__cta--warning {
  color: var(--status-warning);
}

/* GF-26: sekundaerer Einstieg in Wizard-Schritt 1 (Pfandfaelle, Volltext-Suche). */
.operations-action-card__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.operations-action-card__more:hover {
  text-decoration: underline;
}

.operations-person-results {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  overflow: auto;
}

/* GF-26: Zeilen sind POST-Formulare (Direktstart) — der Button traegt die
   bisherige Zeilen-Optik der frueheren <a>-Zeilen. */
.operations-person-results__row button {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  background: rgb(255 255 255 / 74%);
  border: 1px solid var(--color-grey-200);
  border-radius: 9px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.operations-person-results__row button:hover {
  border-color: var(--color-red);
}

.operations-person-results__row button > span:first-child {
  min-width: 0;
  display: grid;
}

.operations-person-results small {
  overflow: hidden;
  color: var(--color-grey-500);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-person-results .icon {
  flex: 0 0 auto;
}

.operations-action-card__empty {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--color-grey-500);
  border: 1px dashed var(--color-grey-300);
  border-radius: 10px;
  text-align: center;
}

/* GF-26: beide Karten fuellen jetzt ueber .operations-person-results (Rueckgabe
   hat seither eine eigene Trefferliste) -- der frühere Spacer der Rueckgabe-
   Karte (UX-31/UX-51) entfaellt ersatzlos. */

.button--dark {
  color: var(--color-white);
  background: var(--color-grey-950);
}

.button--dark:disabled {
  color: var(--color-grey-300);
  cursor: not-allowed;
}

.backoffice-sidebar {
  gap: 22px;
  padding: 18px 14px 14px;
}

.brand--sidebar {
  padding: 0 4px 14px;
}

.brand--sidebar .brand__logo {
  height: 38px;
}

.backoffice-sidebar nav {
  /* UX-25: >=6px Abstand zwischen den Touch-Zielen (vorher 2px). */
  gap: 6px;
}

.sidebar-label {
  margin: 0 8px 5px;
  color: #777;
  font-size: 9px;
  letter-spacing: 0.09em;
}

.sidebar-label--section {
  margin-top: 15px;
}

.sidebar-link {
  /* UX-25: 44px-Touch-Ziel (vorher 38px). */
  min-height: 44px;
  gap: 10px;
  padding: 0 10px;
  color: #d7d7d7;
  border-color: transparent;
  border-radius: 8px;
  font-size: 13px;
}

.sidebar-link .icon {
  width: var(--icon-md);
  height: var(--icon-md);
  color: #aaa;
}

.sidebar-link:hover,
.sidebar-link[aria-current="page"] {
  color: var(--color-white);
  background: #292929;
  border-color: #292929;
}

.sidebar-link[aria-current="page"] .icon {
  color: var(--color-white);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px 2px;
  border-top: 1px solid #2a2a2a;
}

.sidebar-user > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #292929;
  border-radius: 9px;
  font-weight: 800;
}

.sidebar-user > div {
  min-width: 0;
  display: grid;
}

.sidebar-user strong,
.sidebar-user small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user strong {
  font-size: 12px;
}

.sidebar-user small {
  color: #999;
  font-size: 10px;
}

.backoffice-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-offwhite);
}

.backoffice-header {
  min-height: 82px;
  padding: 14px 26px;
}

.backoffice-header h1 {
  margin-top: 3px;
  font-size: 28px;
}

.backoffice-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.backoffice-main {
  min-height: 0;
  flex: 1;
  padding: 18px 26px 22px;
  overflow: auto;
}

.backoffice-main > * {
  width: 100%;
  max-width: 1320px;
}

.admin-master-detail {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(290px, 342px) minmax(0, 1fr);
  gap: 18px;
}

.admin-master-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-master-pane .list-toolbar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.admin-master-pane .list-toolbar__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-master-pane .list-toolbar__actions {
  min-height: 0;
}

.admin-master-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border-radius: 10px;
}

.admin-master-pane > .live-results {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.admin-master-list .responsive-table {
  table-layout: auto;
}

.admin-master-list thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.admin-master-list th,
.admin-master-list td {
  padding: 10px 12px;
}

.admin-master-list td:first-child strong,
.admin-master-list td:first-child small {
  display: block;
}

.admin-master-link {
  /* UX-25: Zeilen-Link als vollwertiges 44px-Touch-Ziel. */
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--color-grey-950);
  font-weight: 800;
  text-decoration: none;
}

.admin-master-link:hover {
  color: var(--color-red-dark);
}

/* A-20: Avatar-Kachel (Initialen) vor Name in der Benutzerliste. */
.admin-master-link--with-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-avatar-tile {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: #242424;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 800;
}

/* A-20: inaktive Nutzer in der Liste ausgegraut. */
.admin-master-list tr.is-inactive .admin-master-link {
  color: var(--color-grey-500);
}

.admin-master-list tr.is-inactive .admin-avatar-tile {
  color: var(--color-grey-600);
  background: var(--color-grey-200);
}

.admin-master-list td:first-child small {
  color: var(--color-grey-500);
  font-size: 10px;
}

/*
 * Die schmale Meta-/Status-Spalte wird ueber ihre Rolle adressiert, nicht ueber
 * ihre Position: in den einspaltigen Listen (Artikeltypen, Benutzer, Historien,
 * Spieltage) ist die einzige Zelle zugleich die letzte und bekam so 4px statt
 * der kanonischen 12px — die Eintraege standen dort 8px weiter links als in
 * Personen und Bestand.
 */
.admin-master-list .admin-master-meta,
.admin-master-list .admin-master-status {
  width: 92px;
  padding-left: 4px;
}

.admin-master-list tr.is-selected td {
  background: var(--color-grey-100);
}

.admin-master-list tr.is-selected .admin-master-link {
  color: var(--color-grey-950);
}

.admin-master-list .icon-button {
  width: 36px;
  min-height: 36px;
}

/*
 * UX-53: In der Sidebar rendert die Pagination als kompakte Variante
 * (.pagination--compact) — Summary gestapelt, kein Seitenzahlen-Fenster.
 * UX-25: EINE kanonische Pagination-Groesse (44px aus der Basisregel).
 */

.admin-detail-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
}

.admin-detail-card__header {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--color-grey-200);
}

.admin-detail-card__avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--color-white);
  background: #242424;
  border-radius: 10px;
  font-weight: 800;
}

.admin-detail-card__header h2 {
  margin: 0;
  font-size: 16px;
}

.admin-detail-card__header p {
  margin: 2px 0 0;
  color: var(--color-grey-500);
  font-size: 11px;
}

.admin-detail-card__body {
  flex: 1;
  min-height: 0;
  padding: 18px 20px;
  /* UX-54/60: der Nutzungskontext + die Historie verlaengern den Body
     spuerbar (bei vielen Konfektionsgroessen bzw. langer Item-Historie);
     ohne eigenes Scrollen wuerde ".admin-detail-card"s "overflow: hidden"
     diesen Inhalt unerreichbar abschneiden. Kopf-/Fusszeile bleiben fix. */
  overflow-y: auto;
}

.admin-inline-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

/* UX-24: Hoehe kommt aus der kanonischen .field-Basisregel (44px); kein Override mehr. */
.admin-inline-editor .field--persons,
.admin-inline-editor .field--agency {
  grid-column: 1 / -1;
}

.admin-inline-editor .field > small {
  color: var(--color-grey-500);
  font-size: 10px;
}

.admin-inline-editor .field-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-inline-editor > .field,
.admin-inline-editor__section,
.admin-inline-editor .size-grid {
  grid-column: 1 / -1;
}

.admin-inline-editor__section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-grey-200);
}

/* === UX-54/60: Nutzungskontext + Kurzhistorie in Detailkarten ======= */

.admin-detail-card__context {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 4px;
  font-size: 12.5px;
  color: var(--color-grey-600);
}

.admin-detail-card__context p {
  margin: 0;
}

.admin-detail-card__context a {
  color: var(--color-grey-950);
  font-weight: 700;
  text-decoration: none;
}

.admin-detail-card__context a:hover {
  text-decoration: underline;
}

.field-hint-inline {
  color: var(--color-grey-500);
  font-size: 11px;
  font-weight: 400;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.segmented-field {
  display: inline-flex;
  width: max-content;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.segmented-field__option {
  position: relative;
  display: inline-flex;
}

.segmented-field__option + .segmented-field__option {
  border-left: 1px solid var(--color-grey-300);
}

.segmented-field__option input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented-field__option span {
  min-width: 72px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--color-grey-600);
  font-size: 13px;
  font-weight: 700;
}

.segmented-field__option input:checked + span {
  color: var(--color-white);
  background: var(--color-black);
}

.segmented-field__option input:focus-visible + span {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
}

/* GF-19 A-18: dunkle SegmentedControl (Achsenumschalter im Historien-Kopf). */
.history-axis-switch .segmented-field {
  background: var(--color-grey-950);
  border-color: var(--color-grey-700);
}

.history-axis-switch .segmented-field__option + .segmented-field__option {
  border-left-color: var(--color-grey-700);
}

.history-axis-switch .segmented-field__option span {
  min-height: 34px;
  color: var(--color-grey-300);
}

.history-axis-switch .segmented-field__option input:checked + span {
  color: var(--color-grey-950);
  background: var(--color-white);
}

.size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
}

.size-grid__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--color-grey-200);
}

.size-grid__row label {
  font-size: 13px;
  font-weight: 400;
}

.size-grid__row select {
  /* UX-8: gerundeter Rahmen statt browsernativem Grau (radius-sm passt zur 40px-Zeile). */
  min-width: 110px;
  min-height: 40px;
  padding: 0 10px;
  color: var(--color-grey-950);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
}

.button--outline-dark {
  color: var(--color-grey-950);
  background: var(--color-white);
  border: 1px solid var(--color-grey-300);
}

.button--outline-dark:hover {
  border-color: var(--color-grey-950);
}

.admin-detail-card__footer-secondary {
  margin-right: auto;
}

.admin-master-meta {
  color: var(--color-grey-500);
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
}

.button:disabled {
  color: var(--color-grey-500);
  background: var(--color-grey-200);
  cursor: not-allowed;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0 0;
}

.admin-detail-grid > div {
  min-width: 0;
  padding: 12px 13px;
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-200);
  border-radius: 7px;
}

.admin-detail-grid dt {
  color: var(--color-grey-500);
  font-size: 10px;
  font-weight: 700;
}

.admin-detail-grid dd {
  margin: 4px 0 0;
  font-weight: 600;
}

.admin-detail-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  background: var(--color-offwhite);
  border-top: 1px solid var(--color-grey-200);
}

.admin-detail-card__empty {
  flex: 1;
  display: grid;
  place-items: center;
  color: var(--color-grey-500);
}

.summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: 12px;
}

.summary-metric {
  min-height: 96px;
  justify-content: center;
  gap: 7px;
  padding: 16px 20px;
}

.summary-metric__label {
  order: 2;
  color: var(--color-grey-500);
  font: 700 10px/1.2 var(--font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.summary-metric__value {
  order: 1;
  font-size: 32px;
}

.summary-metric__value small {
  font-size: 12px;
}

.summary-metric > small {
  order: 3;
  color: var(--color-grey-500);
  font-size: 10px;
}

/* A-10: Schaden-Kennzahl in Schaden-Terrakotta statt Aktion-Rot; Rot bleibt CTAs vorbehalten. */
.summary-metric__value--alert {
  color: var(--status-damage);
}

.summary-metric__value--warning {
  color: var(--status-warning);
}

/* Review 2026-07-23: Spieltag-Betriebsuebersicht im Detailbereich. */
.match-day-overview__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin: 12px 0 16px;
}

.match-day-overview__metrics > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--color-offwhite);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.match-day-overview__metrics strong {
  font-family: var(--font-display);
  font-size: 20px;
}

.match-day-overview__metrics span {
  color: var(--color-grey-600);
  font-size: 11px;
}

.match-day-overview__alert {
  color: var(--color-red);
}

.match-day-overview__warning {
  color: var(--status-warning);
}

.match-day-overview__list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.match-day-overview__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 13px;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--color-grey-200);
}

.match-day-overview__row:last-child {
  border-bottom: 0;
}

.match-day-overview__row:hover {
  background: var(--color-offwhite);
}

.match-day-overview__row > span:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-day-overview__row small {
  color: var(--color-grey-500);
  font-size: 11px;
}

.match-day-overview__row .status-badge {
  flex-shrink: 0;
}

.match-day-overview__empty {
  padding: 14px;
  color: var(--color-grey-500);
  font-size: 12px;
}

.match-day-overview__export {
  display: flex;
  width: fit-content;
  margin: 12px 0 16px;
}

.admin-activity {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  margin-top: 16px;
}

.admin-activity__heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-activity__heading h2 {
  margin: 0;
  font-size: 15px;
}

/* GF-19 A-11: "Alle Historien"-Link rechtsbündig im Vorgangslog-Kopf. */
.admin-activity__all {
  margin-left: auto;
  color: var(--color-grey-900);
  font: 700 11px/1 var(--font-heading);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.admin-activity__all:hover {
  text-decoration: underline;
}

.admin-activity__table {
  min-height: 0;
  overflow: auto;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
}

.admin-activity__body {
  min-height: 0;
  overflow: auto;
}

.admin-activity__row {
  display: grid;
  grid-template-columns: 82px 116px minmax(150px, 1.4fr) minmax(110px, 1fr) 58px minmax(150px, 1.4fr);
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-grey-100);
  font-size: 12px;
}

.admin-activity__row--head {
  padding-block: 10px;
  color: var(--color-grey-500);
  background: var(--color-offwhite);
  font: 700 9px/1 var(--font-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.admin-activity__row strong,
.admin-activity__row small {
  display: block;
}

.admin-activity__row small {
  color: var(--color-grey-500);
  font-size: 10px;
}

.admin-activity__empty {
  display: grid;
  min-height: 160px;
  place-items: center;
  color: var(--color-grey-500);
}

.operation-kind {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  color: var(--color-white);
  background: var(--color-grey-950);
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
}

.operation-kind .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

/* GF-19 A-11: Richtungs-Kontrast — Ausgabe dunkel, Rückgabe hell. */
.operation-kind--issue {
  color: var(--color-white);
  background: var(--color-grey-950);
}

.operation-kind--return {
  color: var(--color-grey-900);
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-300);
}

/* Review 2026-07-23: nachgetragene Pfand-Bestätigung als eigener Vorgangstyp. */
.operation-kind--deposit {
  color: var(--color-grey-900);
  background: var(--color-offwhite);
  border: 1px dashed var(--color-grey-300);
}

.import-switch {
  margin-bottom: 12px;
}

.import-layout {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 16px;
}

.import-upload,
.import-guide {
  min-height: 300px;
  padding: 22px;
  border-radius: 12px;
}

.import-summary--metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
}

.import-summary--metrics > div {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 12px 18px;
  border-right: 1px solid var(--color-grey-200);
}

.import-summary--metrics > div:last-child {
  border-right: 0;
}

.import-summary--metrics strong {
  font: 700 27px/1 var(--font-display);
}

.import-summary--metrics span {
  color: var(--color-grey-500);
  font: 700 10px/1.2 var(--font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.import-summary--metrics > div:nth-child(2) strong {
  color: var(--status-success);
}

.import-summary--metrics > div:nth-child(3) strong {
  color: #8a690d;
}

.import-summary--metrics > div:nth-child(4) strong {
  color: var(--color-red);
}

.distribution-panel {
  width: 100%;
  max-width: none;
}

.distribution-layout {
  position: relative;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 0;
  /* GF-27j: eckige Kinder (Rail grau, Workspace weiss) uebermalten Rahmen und
     Rundung — clippen wie bei .operations-stats. Der Quick-Add-Dialog liegt im
     Top-Layer und ist vom Clip nicht betroffen. */
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: 12px;
}

.distribution-rail,
.distribution-workspace {
  border: 0;
  border-radius: 0;
}

.distribution-rail {
  gap: 14px;
  padding: 18px;
  background: var(--color-offwhite);
  border-right: 1px solid var(--color-grey-200);
}

.distribution-rail h1 {
  font-size: 24px;
}

.distribution-stepper {
  width: min(500px, 100%);
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
}

/* UX-49: identische Schritt-Geometrie fuer alle Zustaende — Hoehe/Padding/Flaeche
   gleich, Differenzierung nur ueber Farbe/Fuellung. */
.distribution-stepper li {
  min-width: 0;
  min-height: 40px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  color: var(--color-grey-600);
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}

/* Verbindungslinie exakt zwischen den Markern, vertikal zentriert. */
.distribution-stepper li:not(:last-child)::after {
  content: "";
  height: 2px;
  flex: 1;
  min-width: 14px;
  margin: 0 8px;
  background: var(--color-grey-300);
  border-radius: 2px;
}

.distribution-stepper li > span {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: inherit;
  background: var(--color-white);
  border: 1.5px solid currentcolor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
}

.distribution-stepper li.is-active {
  color: var(--color-white);
  background: var(--color-red);
  border-color: var(--color-red);
}

.distribution-stepper li.is-active > span {
  color: var(--color-red);
  background: var(--color-white);
  border-color: var(--color-white);
}

.distribution-stepper li.is-complete {
  color: var(--status-success);
  border-color: #8fca9c;
}

.distribution-stepper li.is-complete > span {
  color: var(--status-success);
  background: var(--color-white);
  border-color: #8fca9c;
}

/* Erledigte Schritte fuellen die Verbindungslinie bis zum aktiven Schritt gruen. */
.distribution-stepper li.is-complete:not(:last-child)::after {
  background: #8fca9c;
}

/* GF-30: <600px zerlief der Stepper ("3 Abschlus" abgeschnitten) — die
   nowrap-Labels malten ueber die per flex:1 gequetschten Pills hinaus.
   Kanonisches Mobile-Muster: nur der AKTIVE Schritt traegt sein Label,
   inaktive kollabieren zur Nummern-/Haken-Pille. Muss NACH dem
   Basis-Block (UX-49) stehen, sonst gewinnt dessen flex/padding. */
@media (max-width: 599.98px) {
  .distribution-stepper-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .distribution-stepper li {
    flex: 0 1 auto;
    gap: 0;
    padding: 4px;
    font-size: 0;
  }

  .distribution-stepper li > span {
    font-size: 12px;
  }

  .distribution-stepper li.is-active {
    flex: 0 0 auto;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    font-size: 12px;
  }

  .distribution-stepper li:not(:last-child)::after {
    margin: 0 4px;
  }
}

.distribution-workspace {
  padding: 16px 20px 18px;
}

.distribution-heading {
  min-height: 42px;
}

.distribution-heading .eyebrow {
  display: none;
}

.distribution-heading h2 {
  /* UX-47: kanonische grosse H2-Stufe (24px), analog .import-guide h2. */
  font-size: 24px;
}

.distribution-step-one {
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}

/* GF-27: Hochformat-Fallback — oberhalb von 899.98px greift sonst nur das
   Landscape-Layout; im Portrait rutscht die Seitenspalte unter die Liste.
   Bleibt bestehen (nicht durch die breitenbasierte Rail-Collapse ersetzbar):
   iPad Pro 12.9" Portrait ist mit 1024px BREITER als der 899.98px-Umbruch,
   bleibt aber orientation:portrait — ohne diesen Block wuerde dort
   `.distribution-step-one` zweispaltig bleiben und ueberlappen (GF-27g,
   siehe tests/test_gf27_transitions.py). Die Reihenfolge im Markup
   (Anlegen-Button, dann "Zuletzt bedient") bleibt dabei erhalten, da <aside>
   im DOM ohnehin hinter <section> steht. */
@media (orientation: portrait) {
  .distribution-step-one {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Ohne die Landscape-Zeilenstreckung waechst die Liste sonst mit dem
     Inhalt unbegrenzt mit — im Portrait daher eigener Scrollbereich. */
  .distribution-served__list {
    max-height: 40vh;
  }
}

.distribution-person-summary {
  padding: 11px;
  background: var(--color-white);
  border: 1px solid var(--color-red);
  border-radius: 8px;
}

.distribution-type-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.distribution-type-card {
  background: var(--color-white);
  border-color: var(--color-grey-600);
  border-radius: 7px;
}

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

  .distribution-rail {
    border-right: 0;
    border-bottom: 1px solid var(--color-grey-200);
  }

  .distribution-step-one {
    grid-template-columns: minmax(0, 1fr);
  }

  .backoffice-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .backoffice-header__actions {
    flex-wrap: wrap;
  }
}

/* GF-29: Prozess-Rail einspaltig (<bp-md) — Rail als schmale Vorgangs-Summary
   oben, Haupt-CTA klebt unten im Daumenbereich.

   GF-29c-fix: dieser Block darf NICHT mit dem aelteren Fixed-Viewport-Modell
   `@media (min-width: 761px) and (orientation: landscape)` (Z. ~3514/6812/
   6857) ueberlappen -- dort scrollen `body.operations-page`/`.operations-main`
   bewusst NICHT (Kind-Elemente scrollen stattdessen intern per Flex-Kette).
   Bei realen Telefon-Landscape-Breiten (812/844/852px, alle >=761px) griffen
   frueher BEIDE Modelle gleichzeitig: die fixierte CTA-Leiste legte sich
   ueber die interne Scroll-Flaeche und blockierte sogar Klicks auf die
   Personenliste (verifiziert per Playwright). Ein Versuch, stattdessen NUR
   diesen Block fuer das Ueberlappungsband abzuschalten (CTA inline statt
   fixiert), hat sich als schlechter erwiesen: `.distribution-rail`/
   `.distribution-workspace` bekommen in diesem einspaltigen Layout keine
   eigene interne Scrollflaeche vom alten Modell zugewiesen (das ist nur fuer
   die 2-spaltige Tablet-Landscape-Ansicht ab 900px vorgesehen) -- die Rail-CTA
   landete dadurch komplett unterhalb des sichtbaren, nicht scrollenden
   `.operations-main`-Bereichs: unsichtbar UND unerreichbar (schlimmer als
   vorher). Der eigentliche Fix ist daher am AELTEREN Block: dessen
   `min-width` wurde dort von 761px auf 900px angehoben (siehe Kommentare
   dort) -- das STRUKTURELLE Ueberlappungsband (Fixed-Viewport vs.
   Mobile-Regime) ist dadurch aufgeloest. Ein separater, reiner
   Dichte-Block (`@media (min-width: 761px) and (max-height: 900px)`,
   nur Padding/Font-Size/Min-Height, keine Overflow-/Hoehen-Regeln) blieb
   bewusst bei 761px stehen -- analog zum 1100px-Dichte-Block -- und feuert
   im 761-899.98px-Band weiterhin mit; das ist unschaedlich, da er keine
   Layout-Struktur/Overflow beeinflusst. Dieser Block hier bleibt
   unveraendert bei `max-width: 899.98px` fuer JEDE Ausrichtung (Portrait
   wie Landscape), analog zur separaten Single-Column-Regel ~Z. 5207. */
@media (max-width: 899.98px) {
  .distribution-rail {
    /* Eigener border-radius ist unnoetig: `.distribution-layout` clippt per
       overflow:hidden ohnehin auf seine 12px-Rundung (GF-27j) -- unabhaengig
       vom Radius des Kindes. */
    border-bottom: 1px solid var(--color-grey-200);
    padding: 14px 18px;
    gap: 12px;
  }

  /* Rail-Titel kompakter, kein toter Vertikalraum. */
  .distribution-rail h1 {
    font-size: 20px;
  }

  /* GF-30b: Die leere Vorgangs-Box ("Noch keine Person gewählt") ist im
     gestapelten Layout toter Raum — der Flow beginnt direkt in der Werkbank.
     Die Rail behaelt nur ihr Eyebrow als Kontextzeile. */
  .distribution-rail__empty {
    display: none;
  }

  .distribution-rail:has(.distribution-rail__empty) {
    padding: 10px 18px;
    gap: 4px;
  }
}

/* GF-30b: Auf Phone-Breite darf die Rail-Zusammenfassung nicht den ganzen
   ersten Screen fressen — die Teileliste steht im Arbeitsbereich ohnehin
   erneut (Rueckgabe: Zustands-Prüfung je Teil). Kompakt + intern scrollbar. */
@media (max-width: 599.98px) {
  .distribution-rail__parts > div {
    max-height: 132px;
    overflow-y: auto;
  }

  .distribution-person-summary {
    padding: 8px 11px;
  }
}

@media (max-width: 899.98px) {
  /* Platz fuer die fixierte CTA-Leiste reservieren, damit der letzte Eintrag
     der Werkbank (Personenliste/Teile) UND der "Vorgang abbrechen"-Link
     (auf Schritt 2/3 beider Flows) nicht dahinter verschwinden.
     GF-29c-fix: 88px reichte nur fuer die Leiste OHNE Abbrechen-Link
     (Schritt 1). Mit Link (Schritt 2/3, `.distribution-rail__abort`) ist die
     Leiste tatsaechlich hoeher: 10 (padding-top) + 52 (Button min-height) +
     8 (Leisten-Gap) + 44 (Abbrechen-Link min-height) + 10 (padding-bottom)
     = 124px. Auf 128px aufgerundet (kleiner Sicherheitsabstand). Der Wert
     wird immer reserviert (auch auf Schritt 1 ohne Link) -- dort bleibt
     etwas ungenutzter Puffer, was unkritisch ist; Occlusion ist so auf
     keinem Schritt mehr moeglich. */
  .distribution-workspace {
    padding-bottom: 128px;
  }

  /* Haupt-CTA fix am unteren Bildschirmrand (Daumenzone). `position: sticky`
     greift hier NICHT: die CTA ist das letzte Kind der kurzen `.distribution-
     rail` (oben im einspaltigen Layout), deren Box laengst aus dem Viewport
     gescrollt ist, sobald man durch die lange Werkbank darunter scrollt --
     sticky kann nicht ueber die Box seines eigenen Containing Blocks
     hinaus kleben. `position: fixed` bindet die Leiste stattdessen an den
     Viewport, unabhaengig vom `overflow:hidden`-Eckenclip auf
     `.distribution-layout`/`.distribution-rail`. `:has(.button)` haelt die
     leere Huelle (z. B. Rueckgabe Schritt 1 ohne CTA) unsichtbar.
     `env(safe-area-inset-bottom, 0px)`: aktuell inert (die Viewport-Meta in
     base.html setzt kein `viewport-fit=cover`, siehe dort) -- als
     Forward-Compat-Vorbereitung bewusst stehen gelassen, faellt ohne Cover
     auf 0px zurueck und veraendert das Layout nicht. */
  .distribution-rail__cta:has(.button) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    margin: 0;
    padding: 10px clamp(18px, 3vw, 40px) calc(10px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, var(--color-white) 72%, transparent);
  }

  .distribution-rail__cta .button {
    width: 100%;
    min-height: 52px;
  }
}

@media (max-width: 899.98px) {
  .operations-dashboard-grid,
  .admin-master-detail {
    grid-template-columns: 1fr;
  }

  .admin-detail-card {
    min-height: 420px;
  }

  .operations-stats,
  .summary-grid,
  .import-summary--metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (min-width: 900px) {
  body.backoffice-page,
  .backoffice-shell,
  .backoffice-sidebar,
  .backoffice-content {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }

  .backoffice-shell {
    grid-template-columns: 236px minmax(0, 1fr);
  }
}

/* === Rückgabe (GF-13) ============================================== */

.returns-balance {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px 13px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.returns-balance > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.returns-balance span {
  color: var(--color-grey-700);
  font-size: 12px;
}

.returns-balance strong {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
}

/* UX-19: "gesamt"-Referenz neben der Spieltagszahl, deutlich kleiner/grauer. */
.returns-balance strong small {
  color: var(--color-grey-500);
  font-size: 11px;
  font-weight: 400;
}

.returns-balance__success {
  color: var(--status-success);
}

.returns-balance__warning {
  color: var(--status-warning);
}

.returns-rail-hint {
  margin: 0;
  color: var(--color-grey-500);
  font-size: 11px;
  line-height: 1.45;
}

.returns-deposit-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: var(--status-warning);
  background: var(--status-warning-bg);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
}

.returns-deposit-hint .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.returns-step-one {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.returns-open-results {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.returns-open-row,
.returns-deposit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.returns-open-row span,
.returns-deposit-row span {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.returns-open-row strong,
.returns-deposit-row strong {
  font-size: 13.5px;
}

.returns-open-row small,
.returns-deposit-row small {
  color: var(--color-grey-500);
  font-size: 11px;
  line-height: 1.4;
}

.returns-all-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  color: var(--status-success);
  background: var(--status-success-bg);
  border: 1.5px dashed #4d805c;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 700;
}

.returns-all-done .icon {
  width: var(--icon-md);
  height: var(--icon-md);
}

.returns-deposit-cases {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.returns-deposit-cases h3,
.distribution-search h3 {
  margin: 0;
  color: var(--color-grey-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.returns-deposit-row {
  border-color: #e8d5a0;
  background: #fffdf5;
}

.returns-completed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.returns-completed h3 {
  margin: 0;
  color: var(--color-grey-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.returns-completed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
}

.returns-completed-row span:first-child {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.returns-completed-row strong {
  font-size: 13.5px;
}

.returns-completed-row small {
  color: var(--color-grey-500);
  font-size: 11px;
  line-height: 1.4;
}

.returns-completed-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.returns-completed-badge--ok {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.returns-completed-badge--flag {
  color: #8a5a00;
  background: #fff5e0;
}

.returns-completed-badge--deposit {
  color: #8a5a00;
  background: #fffdf5;
  border: 1px solid #e8d5a0;
}

.returns-assess {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.returns-assess__heading {
  display: flex;
  align-items: center;
  gap: 9px;
}

.returns-assess__hint {
  color: var(--color-grey-500);
  font-size: 11px;
}

.returns-parts {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding-right: 2px;
}

.returns-part {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

/* UX-39: Inventar-Hexcode ist ein Nachweis, kein Blickfang -- unter statt
   neben Typ+Größe stapeln, damit die Größe (Typ+Größe) fuehrend bleibt. */
.returns-part__head {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 12.5px;
}

.returns-part__head small {
  color: var(--color-grey-500);
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
}

.returns-status-group {
  display: flex;
  overflow: hidden;
  border: 1.5px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
}

.returns-status-option {
  min-height: 44px;
  flex: 1;
  display: flex;
}

.returns-status-option + .returns-status-option {
  border-left: 1.5px solid var(--color-grey-300);
}

.returns-status-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.returns-status-option span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 6px;
  color: var(--color-grey-400);
  background: var(--color-white);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
}

.returns-status-option .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.returns-status-option input:focus-visible + span {
  outline: 2px solid var(--color-red);
  outline-offset: -2px;
}

.returns-status-option--returned input:checked + span {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.returns-status-option--missing input:checked + span {
  color: var(--color-red-dark);
  background: var(--color-error-bg);
}

.returns-status-option--damaged input:checked + span {
  color: var(--status-damage);
  background: var(--status-damage-bg);
}

.returns-status-option--keep input:checked + span {
  color: var(--color-grey-950);
  background: var(--color-grey-100);
}

.returns-cleaning {
  /* UX-28: 44px-Touch-Ziel, analog .returns-status-option. */
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.returns-cleaning input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-red);
}

.returns-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  background: var(--color-error-bg);
  border: 1.5px dashed var(--color-red);
  border-radius: var(--radius-sm);
}

.returns-note label {
  color: var(--color-red-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.returns-note textarea {
  resize: vertical;
  padding: 8px 10px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
}

/* UX-5: Tausch in einem Zug — Ersatzteil-Picker je Teil. */
.returns-exchange {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.returns-exchange__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
}

.returns-exchange__toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-red);
}

.returns-exchange__toggle .icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.returns-exchange__picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  background: var(--color-grey-100);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
}

.returns-exchange__picker label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-grey-600);
}

.returns-exchange__picker select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.returns-kept-list--added span {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.returns-partial-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.returns-partial-summary h3 {
  margin: 0;
  font-size: 15px;
}

.returns-partial-summary p {
  margin: 0;
  color: var(--color-grey-600);
  font-size: 12.5px;
  line-height: 1.5;
}

.returns-kept-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.returns-kept-list span {
  padding: 5px 10px;
  background: var(--color-grey-100);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.returns-deposit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.returns-deposit-warning {
  padding: 10px 12px;
  color: var(--status-warning);
  background: var(--status-warning-bg);
  border: 1.5px dashed #d8b44c;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.5;
}

.returns-deposit-warning strong {
  display: block;
}

.returns-success-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-chip--returned,
.status-chip--deposit-ok {
  color: var(--status-success);
  background: var(--status-success-bg);
}

.status-chip--deposit-open {
  color: var(--status-warning);
  background: var(--status-warning-bg);
}

/* UX-26 / A-15: Reinigung ist neutral-nicht-blockierend — Info-Blau statt Warn-Amber,
   konsistent mit .status-badge--cleaning. */
.status-chip--cleaning {
  color: var(--status-info);
  background: var(--status-info-bg);
}

.status-chip--missing {
  color: var(--color-red-dark);
  background: var(--color-error-bg);
}

.status-chip--damaged {
  color: var(--status-damage);
  background: var(--status-damage-bg);
}

.returns-note[hidden],
.returns-cleaning[hidden],
.returns-exchange[hidden],
.returns-exchange__picker[hidden],
.returns-deposit-warning[hidden] {
  display: none;
}

.distribution-completion--returns {
  display: flex;
  flex-direction: column;
}

.distribution-completion--returns .distribution-signature {
  flex: 1;
}

/* === Backoffice Konfiguration (GF-14) ============================== */

.liability-editor-card {
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.liability-editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.liability-editor textarea {
  width: 100%;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
}

.liability-editor__hint {
  margin: 0;
  color: var(--color-grey-500);
  font-size: 12px;
  line-height: 1.5;
}

.liability-editor__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.account-inactive-flag {
  margin-left: 6px;
  color: var(--color-grey-500);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
}

.field-hint {
  color: var(--color-grey-500);
  font-size: 11.5px;
}

/* === Reinigung (GF-14) ============================================= */

.cleaning-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.cleaning-worklist,
.cleaning-runs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cleaning-worklist h2,
.cleaning-runs h2,
.admin-deposit-cases h2 {
  /* UX-47: kanonische kleine H2-Stufe (16px), analog .admin-detail-card__header h2. */
  margin: 0;
  font-size: 16px;
}

.cleaning-worklist__group,
.admin-deposit-case,
.admin-cleaning-worklist__group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.cleaning-worklist__group > div,
.admin-deposit-case > span,
.admin-cleaning-worklist__group > span {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cleaning-worklist__group small,
.admin-deposit-case small,
.admin-cleaning-worklist__group small {
  color: var(--color-grey-500);
  font-size: 11px;
}

/* Review 2026-07-23: die einzeilige Flex-Reihe wirkte in der schmalen Spalte
   gequetscht — zweizeilige Aufteilung: Spieltag-Infos oben ueber die volle
   Breite, Zaehler und Aktion darunter. */
.cleaning-worklist__group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  padding: 13px;
}

.cleaning-worklist__group > div {
  grid-column: 1 / -1;
}

.cleaning-worklist__group .button {
  justify-self: end;
}

.cleaning-worklist__count {
  color: var(--color-grey-700);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cleaning-worklist__empty,
.cleaning-item-empty,
.admin-cleaning-worklist__empty {
  padding: 14px;
  color: var(--color-grey-500);
  background: var(--color-offwhite);
  border: 1.5px dashed var(--color-grey-300);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  text-align: center;
}

.cleaning-worklist__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cleaning-new-run {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cleaning-new-run label {
  color: var(--color-grey-500);
  font-size: 11px;
  font-weight: 700;
}

.cleaning-new-run div {
  display: flex;
  gap: 8px;
}

.cleaning-new-run select {
  /* UX-44: kanonischer Select-Radius (radius-md), analog .field select. */
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
}

.cleaning-run-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* UX-46: Reinigungs-Buttons auf Standardgroesse (44px/16px) statt kompakt-vererbt. */

.cleaning-run-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}

.cleaning-run-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cleaning-run-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.cleaning-run-section h2 {
  margin: 0;
  font-size: 14px;
}

.cleaning-run-hint {
  margin: 0;
  color: var(--color-grey-500);
  font-size: 12px;
  line-height: 1.5;
}

.cleaning-item-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cleaning-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
}

.cleaning-item-row.is-deselected {
  background: var(--color-offwhite);
}

.cleaning-item-row.is-deselected strong,
.cleaning-item-row.is-deselected small {
  color: var(--color-grey-400);
  text-decoration: line-through;
}

.cleaning-item-row span {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cleaning-item-row strong {
  font-size: 12.5px;
}

.cleaning-item-row small {
  color: var(--color-grey-500);
  font-size: 10.5px;
}

.cleaning-run-rail {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

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

.cleaning-quantities > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

.cleaning-quantities strong {
  font-family: var(--font-display);
  font-size: 15px;
}

.cleaning-run-rail__actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.admin-deposit-cases,
.admin-cleaning-worklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.admin-cleaning-worklist__groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-cleaning-worklist__group em {
  color: var(--color-grey-700);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

/* === Lieferschein ================================================== */

.delivery-note-page {
  background: var(--color-grey-100);
}

.delivery-note {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.delivery-note__toolbar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.delivery-note__sheet {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 42px 46px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.delivery-note__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

/* Review 2026-07-23: Logo statt Subbrand-Zeile im Lieferschein-Kopf. */
.delivery-note__identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.delivery-note__logo {
  width: 52px;
  height: auto;
}

.delivery-note__brand {
  display: block;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
}

.delivery-note__brand em {
  color: var(--color-red);
  font-style: normal;
}

.delivery-note__meta h1 {
  margin: 0 0 10px;
  font-size: 20px;
  text-align: right;
}

.delivery-note__meta dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.delivery-note__meta dl div {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12.5px;
}

.delivery-note__meta dt {
  color: var(--color-grey-500);
}

.delivery-note__meta dd {
  margin: 0;
  font-weight: 600;
}

.delivery-note__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.delivery-note__table th,
.delivery-note__table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-grey-200);
  text-align: left;
  vertical-align: top;
}

.delivery-note__table thead th {
  /* GF-19 A-16: dunkler DataTable-Kopf (schwarz, weiße Schrift). */
  color: var(--color-white);
  background: var(--color-grey-950);
  border-bottom: 2px solid var(--color-grey-950);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.delivery-note__table tfoot td {
  border-bottom: none;
  font-weight: 800;
}

.delivery-note__inventory {
  color: var(--color-grey-500);
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
}

.delivery-note__signatures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 44px;
}

.delivery-note__signatures span {
  display: block;
  height: 46px;
  border-bottom: 1.5px solid var(--color-grey-950);
}

.delivery-note__signatures small {
  display: block;
  margin-top: 6px;
  color: var(--color-grey-500);
  font-size: 11px;
}

/* GF-19 A-16: Fußzeile des Reinigungs-Lieferscheins. */
.delivery-note__footline {
  margin: 40px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-grey-200);
  color: var(--color-grey-500);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

@media print {
  .delivery-note-page {
    background: #fff;
  }

  .delivery-note {
    max-width: none;
    padding: 0;
  }

  .delivery-note__toolbar,
  .skip-link {
    display: none;
  }

  .delivery-note__sheet {
    border: none;
    border-radius: 0;
    padding: 0;
  }
}

/* === Historien (GF-14) ============================================= */

.history-readonly-hint {
  margin: 0 0 4px;
  color: var(--color-grey-500);
  font-size: 11.5px;
}

.history-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.history-event {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 0 0 18px 4px;
}

.history-event::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 0;
  left: 9px;
  width: 2px;
  background: var(--color-grey-200);
}

.history-event:last-child::before {
  display: none;
}

.history-event__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  background: var(--color-grey-400);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--color-grey-300);
}

.history-event--issued .history-event__dot {
  background: var(--color-grey-950);
  box-shadow: 0 0 0 1.5px var(--color-grey-950);
}

.history-event--available .history-event__dot {
  background: var(--status-success);
  box-shadow: 0 0 0 1.5px var(--status-success);
}

.history-event--warning .history-event__dot,
.history-event--cleaning .history-event__dot {
  background: var(--status-warning);
  box-shadow: 0 0 0 1.5px var(--status-warning);
}

.history-event--missing .history-event__dot {
  background: var(--color-red);
  box-shadow: 0 0 0 1.5px var(--color-red);
}

.history-event--damaged .history-event__dot {
  background: var(--status-damage);
  box-shadow: 0 0 0 1.5px var(--status-damage);
}

.history-event > div {
  min-width: 0;
  flex: 1;
}

.history-event__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.history-event__head strong {
  font-size: 13px;
}

.history-event__head time {
  color: var(--color-grey-500);
  font-size: 11px;
  white-space: nowrap;
}

.history-event p {
  margin: 2px 0 0;
  color: var(--color-grey-600);
  font-size: 12px;
  line-height: 1.5;
}

.history-timeline__empty {
  padding: 14px;
  color: var(--color-grey-500);
  background: var(--color-offwhite);
  border: 1.5px dashed var(--color-grey-300);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  text-align: center;
}

/* === Berichte (GF-14) ============================================== */

.report-intro p {
  max-width: 720px;
  margin: 0 0 16px;
  color: var(--color-grey-600);
  font-size: 13px;
  line-height: 1.6;
}

.report-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.report-export-actions .button {
  min-height: 38px;
  padding: 6px 14px;
  font-size: 12.5px;
}

/* === Offline und Sync (GF-15) ====================================== */

.connection-status.is-offline .connection-status__popover {
  color: var(--status-warning);
}

.connection-status.is-offline .connection-status__toggle span[aria-hidden] {
  background: #d8b44c;
}

.sync-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
  background: var(--status-warning-bg);
  border-bottom: 1px solid #e8d5a0;
  font-size: 12.5px;
}

.sync-bar[hidden] {
  display: none;
}

.sync-bar__state--offline,
.sync-bar__pending,
.sync-bar__foreign {
  color: var(--status-warning);
  font-weight: 700;
}

.sync-bar__conflict {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  color: var(--color-red-dark);
  background: var(--color-error-bg);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* UX-17: Konflikt erklaert Ursache + Konsequenz, Details klappen auf. */
.sync-bar__conflict-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.sync-bar__conflict-title {
  font-weight: 700;
}

.sync-bar__conflict-text {
  font-weight: 500;
  line-height: 1.4;
}

.sync-bar__conflict-toggle {
  align-self: flex-start;
  min-height: 34px;
  padding: 2px 0;
  font-size: 12px;
  text-decoration: underline;
}

.sync-bar__conflict-detail {
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 8px 10px;
  background: var(--color-white);
  border: 1px solid var(--color-error-border);
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.sync-bar__conflict-detail[hidden] {
  display: none;
}

.sync-bar__conflict-detail > div {
  display: flex;
  gap: 8px;
}

.sync-bar__conflict-detail dt {
  flex: 0 0 108px;
  color: var(--color-grey-600);
  font-weight: 600;
}

.sync-bar__conflict-detail dd {
  margin: 0;
  min-width: 0;
}

.sync-bar__conflict-discard {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sync-bar__conflict-discard.is-armed {
  color: var(--color-white);
  background: var(--color-red-dark);
  border-radius: var(--radius-sm);
}

.sync-bar .button {
  min-height: 34px;
  padding: 4px 12px;
  font-size: 12px;
}

.offline-workspace[hidden],
[data-online-workspace][hidden] {
  display: none;
}

.offline-workspace {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 16px 32px;
}

.offline-workspace__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.offline-workspace__head h1 {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 26px;
  text-transform: uppercase;
}

.offline-workspace__head input[type="search"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-md);
  font-size: 15px;
}

.offline-empty {
  padding: 24px;
  color: var(--color-grey-600);
  background: var(--color-offwhite);
  border: 1.5px dashed var(--color-grey-300);
  border-radius: var(--radius-md);
  text-align: center;
}

.offline-person-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.offline-person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.offline-person-row > span:first-child {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.offline-person-row small {
  color: var(--color-grey-500);
  font-size: 11px;
}

.offline-person-row em {
  color: var(--color-grey-600);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}

.offline-person-row em.is-warning {
  color: var(--status-warning);
}

.offline-item-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offline-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-sm);
}

.offline-item-row > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.offline-item-row small {
  color: var(--color-grey-500);
  font-size: 10.5px;
}

.offline-quantity {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.offline-quantity button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
}

.offline-quantity strong {
  min-width: 22px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px;
}

.offline-signature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.offline-return-parts {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* === GF-21g: Offline-Erfassung — Signatur & CTA erreichbar (UX-15) ===
   Im iPad-Querformat ist `.operations-main` fix hoch und `overflow:hidden`
   (GF-21a, ~Z.3305). Der lange Offline-Einseiter (Pfand → Teileliste →
   Haftung → Host → Signatur) wurde dadurch am unteren Rand abgeschnitten; die
   Signatur lag bei y≈2002px unerreichbar (Befund UX-15). Fix: der
   Offline-Workspace scrollt intern statt zu klippen, Signatur + Abschluss-CTA
   bleiben als sticky Block am unteren Rand im Blick. Landscape ab 900px
   (bp-md; die Pflicht-Viewports 1194×834 und 1024×768 liegen beide darueber
   -- GF-29c-fix: vorher 761px, das ueberlappte mit dem Mobile-Regime bis
   899.98px, siehe Kommentar bei der Prozess-Rail-CTA ~Z. 5232). */
@media (min-width: 900px) and (orientation: landscape) {
  .operations-main:has([data-offline-workspace]:not([hidden])) {
    display: flex;
    flex-direction: column;
  }

  /* Der versteckte Online-Workspace darf im Offline-Zustand nicht mehr
     durchscheinen. GF-21a gibt `[data-online-workspace]` per :has()-Regel
     (Spezifitaet 0,3,0) `display:flex` und ueberstimmt damit
     `[data-online-workspace][hidden] { display:none }` (0,2,0). Diese Regel
     (0,5,0) stellt das Verstecken wieder her, solange die Offline-Flaeche
     aktiv ist. */
  .operations-main:has([data-offline-workspace]:not([hidden])) > [data-online-workspace][hidden] {
    display: none;
  }

  .operations-main:has([data-offline-workspace]:not([hidden])) .offline-workspace {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Puffer, damit der Haftungstext nicht dauerhaft hinter der sticky
       Signatur endet (der Nutzer scrollt ihn frei darueber). */
    padding-bottom: 20px;
  }

  .offline-workspace .offline-signature {
    position: sticky;
    bottom: 0;
    z-index: 5;
    /* Opake Flaeche (bereits weiss) + Trennkante, damit darunter liegende
       Inhalte beim Anpinnen nicht durchscheinen. */
    box-shadow: 0 -8px 22px -14px rgba(0, 0, 0, 0.55);
  }
}

/* === GF-21a: Wizard-Layout & Erreichbarkeit (UX-1, UX-2, UX-14, UX-51) ===
   Auf dem iPad quer (Pflicht-Viewport) wuchsen Ausgabe-Schritt 2/3 und das
   Dashboard ueber die feste Main-Hoehe hinaus und wurden von
   `.operations-main { overflow:hidden }` abgeschnitten — die CTAs waren
   unerreichbar. Ursache: der Zwischen-Wrapper `[data-online-workspace]` und
   `.distribution-panel`/`.operations-panel` haben keine definierte Hoehe, so
   dass `.distribution-layout { height:100% }` ins Leere lief. Hier wird die
   Hoehen-Kette per Flexbox geschlossen und die Arbeitsflaechen scrollen
   intern statt zu klippen. Landscape ab 900px (bp-md; die getesteten
   iPad-Viewports 1194x834 und 1024x768 liegen beide darueber -- GF-29c-fix:
   vorher 761px, siehe Kommentar bei der Prozess-Rail-CTA ~Z. 5232). */
@media (min-width: 900px) and (orientation: landscape) {
  /* Main als Flex-Spalte, damit der Online-Workspace die Resthoehe erbt. */
  .operations-main:has(.distribution-layout),
  .operations-main:has(.operations-dashboard-grid) {
    display: flex;
    flex-direction: column;
  }

  .operations-main:has(.distribution-layout) > [data-online-workspace],
  .operations-main:has(.operations-dashboard-grid) > [data-online-workspace] {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* Ausgabe/Rueckgabe: Panel + Layout fuellen die Hoehe (statt ins Leere zu
     wachsen), Rail-CTA bleibt fix am unteren Rand sichtbar. Mit `:has()`
     geguarded wie der restliche Block — greift nur im Wizard-Zustand (nicht
     Erfolg/Leer) und faellt in `:has()`-losen Browsern komplett aus. */
  .distribution-panel:has(.distribution-layout) {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .distribution-panel:has(.distribution-layout) > .distribution-layout {
    min-height: 0;
    flex: 1;
  }

  /* UX-1: Artikelraster intern scrollbar (Vorbild `.returns-parts`), die
     Karten behalten ihre natuerliche Hoehe statt zu klippen. */
  .distribution-type-grid {
    grid-template-rows: none;
    grid-auto-rows: minmax(140px, max-content);
    align-content: start;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
  }

  /* UX-4: Trefferliste Schritt 1 (jetzt 7 statt 4 Zeilen, plus optionale
     Recents-Reihe) scrollt intern statt zu klippen — derselbe Ansatz wie
     UX-1 fuer das Artikelraster. Als Grid-Kind von `.distribution-step-one`
     fuellt `.distribution-search` die Track-Hoehe ohnehin; nur `min-height: 0`
     ist noetig, damit der interne Scroll von `.distribution-person-results`
     greift. */
  .distribution-search {
    min-height: 0;
  }

  .distribution-sidebar {
    min-height: 0;
  }

  .distribution-person-results {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding-right: 2px;
  }

  /* UX-2: Haftungstext scrollt in fixer Hoehe; Signaturspalte + Submit
     bleiben garantiert im Viewport (Wortlaut unveraendert). */
  .distribution-liability {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
  }

  .distribution-liability > p {
    min-height: 0;
    margin: 0;
    overflow-y: auto;
  }

  /* UX-51: Dashboard fuellt die iPad-Hoehe — die Kernbereiche
     (Suche/Kleiderausgabe, Rueckgabe) strecken sich, kein toter Raum. */
  .operations-panel:has(.operations-dashboard-grid) {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .operations-panel:has(.operations-dashboard-grid) .operations-dashboard-grid {
    min-height: 0;
    flex: 1;
  }

  .operations-panel:has(.operations-dashboard-grid) .operations-action-card {
    min-height: 0;
  }

  /* Kein toter Raum INNERHALB der Karten: Beide Karten haben seit GF-26 eine
     Trefferliste (.operations-person-results), die mitwaechst -- der Spacer,
     den zuvor nur die Rueckgabe-Karte brauchte (UX-31/UX-51), entfaellt. */
  .operations-panel:has(.operations-dashboard-grid) .operations-person-results {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}

/* GF-29: Gestapelte Dashboard-Panels behalten begrenzte Hoehe + Innen-Scroll,
   damit die Vollliste nicht die ganze Seite streckt (statt nur im Landscape). */
@media (max-width: 899.98px) {
  .operations-panel .operations-person-results {
    max-height: min(56vh, 520px);
    overflow-y: auto;
  }
}

/* GF-24: Historien-Achse "Je Spieltag" -- Personen-Akkordeon mit Teil-Zeilen. */
.history-day__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-block: 12px 10px;
}

.history-day__groups {
  display: grid;
  gap: 8px;
}

.history-day-group {
  border: 1px solid var(--color-grey-200);
  border-radius: 8px;
  background: var(--color-white);
}

.history-day-group summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.history-day-group summary::-webkit-details-marker {
  display: none;
}

.history-day-group[open] summary {
  border-bottom: 1px solid var(--color-grey-100);
}

.history-day-group__who strong {
  display: block;
}

.history-day-group__who small {
  color: var(--color-grey-600);
}

.history-day-group__items {
  list-style: none;
  margin: 0;
  padding: 4px 12px 8px;
}

.history-day-group__items li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-grey-100);
  font-size: 0.9rem;
}

.history-day-group__items li:last-child {
  border-bottom: none;
}

.history-day-item__id {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  color: var(--color-grey-950);
}

.history-day-item__type {
  flex: 1;
}

.history-day-item__type small {
  color: var(--color-grey-600);
}

/* Ton "open" wird von Betriebsuebersicht und Spieltag-Historie genutzt,
   hatte aber nie eine eigene Badge-Farbe (fiel auf den Grundstil zurueck). */
.status-badge--open {
  color: var(--status-info);
  background: var(--status-info-bg);
}

/* GF-24: Teil-Chips und Spieltag-Link in den Historien-Timelines. */
.history-event__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
}

.history-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-grey-200);
  background: var(--color-offwhite);
  border-radius: 6px;
  padding: 2px 8px;
  text-decoration: none;
  color: var(--color-grey-950);
  font-size: 0.8rem;
}

.history-chip code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
}

.history-chip small {
  color: var(--color-grey-600);
}

.history-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-grey-300);
  flex: none;
}

.history-chip--available::before { background: var(--status-success); }
.history-chip--missing::before { background: var(--color-red); }
.history-chip--damaged::before { background: var(--status-damage); }
.history-chip--cleaning::before { background: var(--status-info); }
.history-chip--open::before { background: var(--status-info); }
.history-chip--neutral::before { background: var(--color-grey-500); }

.history-event__link {
  color: var(--color-red-dark);
  font-weight: 600;
  text-decoration: none;
}

.history-event__link:hover {
  text-decoration: underline;
}

/* GF-27: dezente Eintritts-Animation der Operations-Screens — nur
   Full-Page-Loads (Dashboard, Wizard-Schritte, Bestand, Erfolgsscreens).
   Live-Search-Swaps ersetzen DOM-Knoten unterhalb von .operations-main und
   bleiben unanimiert (kein Flackern beim Tippen). */
@keyframes operations-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.operations-page .operations-main {
  animation: operations-enter 180ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .operations-page .operations-main {
    animation: none;
  }
}

.return-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.return-detail__head h1 {
  margin: 0;
  font-size: 18px;
}

.return-detail__head p {
  margin: 2px 0 0;
  color: var(--color-grey-500);
  font-size: 12px;
}

.return-detail__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.return-detail__items li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
  border-radius: var(--radius-md);
}

.return-detail__items strong {
  font-size: 13px;
}

.return-detail__items span {
  color: var(--color-grey-500);
  font-size: 11.5px;
}

.return-detail__deposit {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.return-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Bestand: Artikeltyp inline anlegen — Plus-Button neben dem Select,
   Mini-Dialog stapelt nativ ueber dem Editor-Modal. */
.inline-add {
  display: flex;
  gap: 8px;
  align-items: center;
}

.inline-add select {
  flex: 1;
}

.inline-add__open {
  flex: none;
}

.app-dialog--inline-add {
  width: min(calc(100% - 32px), 420px);
}

.app-dialog--inline-add .inline-add__label {
  display: block;
  margin-bottom: 12px;
}

.app-dialog--inline-add input {
  width: 100%;
}