/* ==========================================================================
   Demo der Personaleinteilung — im Design der echten Anwendung
   --------------------------------------------------------------------------
   Bewusst ein eigenes Stylesheet und alles unter `.appdemo` gekapselt:
   Die Marketing-Seite und die App haben unterschiedliche Design-Systeme
   (Marketing-Rot #CE2233 vs. Signalrot der App #E2001A, kuehle vs. warme
   Grautoene). Die Demo soll wie die App aussehen, nicht wie die Seite —
   ohne dass sich die Tokens gegenseitig ueberschreiben.

   Alle Werte stammen aus DESIGN_SYSTEM.md, tailwind.config.js und
   src/components/ui/Badge.tsx des Produktivcodes.
   ========================================================================== */

/* --- Mono-Schrift: in der App das Signal fuer "verlaesslich, praezise" ---
   Verwendung laut DESIGN_SYSTEM.md: taktische Staerke, Zeiten, Zahlen,
   Funkrufnamen, Qualifikations-Kuerzel. */
@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'JBMono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
}

.appdemo {
  /* Surfaces — warme Stone-Palette, keine reinen Grauwerte */
  --a-base: #fafaf9;
  --a-raised: #ffffff;
  --a-sunken: #f5f5f4;
  --a-hover: #f5f5f4;

  /* Ink */
  --a-ink: #1c1917;
  --a-ink-2: #57534e;
  --a-ink-3: #a8a29e;

  /* Linien */
  --a-line-subtle: #f5f5f4;
  --a-line: #e7e5e4;
  --a-line-strong: #d6d3d1;

  /* Signalrot der App */
  --a-brand: #e2001a;
  --a-brand-700: #b30014;
  --a-brand-400: #f87171;
  --a-brand-200: #fecaca;
  --a-brand-50: #fef2f2;

  /* Semantik */
  --a-info: #1e40af;
  --a-success: #15803d;
  --a-warning: #b45309;
  --a-critical: #e2001a;

  /* Radien nach DESIGN_SYSTEM.md 3.2 */
  --a-r-sm: 6px;
  --a-r: 8px;
  --a-r-md: 10px;
  --a-r-lg: 14px;
  --a-r-xl: 20px;

  --a-sh1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --a-sh2: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.06);

  font-family: 'InterVar', system-ui, sans-serif;
  font-size: 15px; /* Basis der App-Type-Scale */
  line-height: 1.45;
  color: var(--a-ink);
  background: var(--a-base);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  overflow: hidden;
  box-shadow: var(--a-sh2);
}

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

.appdemo button {
  font: inherit;
  color: inherit;
}

.mono {
  font-family: 'JBMono', ui-monospace, monospace;
  font-feature-settings: 'tnum', 'zero';
}

/* --- Fensterleiste, damit erkennbar ist: das ist die Anwendung --------- */
.appdemo__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--a-sunken);
  border-bottom: 1px solid var(--a-line);
}

.appdemo__crumb {
  font-size: 12px;
  font-weight: 600;
  color: var(--a-ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appdemo__crumb b {
  color: var(--a-ink);
}

.appdemo__tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex: none;
}

.appdemo__tab {
  font-size: 12px;
  font-weight: 600;
  color: var(--a-ink-3);
  padding: 4px 9px;
  border-radius: var(--a-r-sm);
}

.appdemo__tab.is-active {
  background: var(--a-raised);
  color: var(--a-ink);
  box-shadow: var(--a-sh1);
}

/* --- Lage-Leiste (LageUebersicht.tsx) --------------------------------- */
.lage {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--a-line);
}

.lage__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--a-ink-3);
  margin-right: 2px;
}

.lage__b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--a-r);
  border: 1px solid;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: none;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease;
}

.lage__b i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.lage__b .n {
  font-variant-numeric: tabular-nums;
}

/* Rot / Bernstein / Gruen — Normalzustand, Null-Zustand, aktiv */
.lage__b--red {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
.lage__b--red i { background: #ef4444; }
.lage__b--red.is-active {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.lage__b--amber {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.lage__b--amber i { background: #f59e0b; }
.lage__b--amber.is-active {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

.lage__b--green {
  background: #f0fdf4;
  color: #15803d;
  border-color: #bbf7d0;
}
.lage__b--green i { background: #22c55e; }
.lage__b--green.is-active {
  background: #16a34a;
  color: #fff;
  border-color: #16a34a;
}

.lage__b.is-zero {
  background: var(--a-sunken);
  color: var(--a-ink-3);
  border-color: var(--a-line);
}

.lage__b.is-zero i {
  display: none;
}

.lage__reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--a-r);
  border: none;
  background: none;
  font-size: 12px;
  color: var(--a-ink-2);
  cursor: pointer;
}

.lage__reset:hover {
  background: var(--a-sunken);
}

/* --- Zweispaltiges Arbeitsfenster ------------------------------------- */
/* minmax(0, 1fr) statt 1fr: `1fr` hat eine Auto-Mindestbreite, die Spur kann
   also nicht unter die min-content-Breite ihres Inhalts schrumpfen. Die
   Positionszeilen (nowrap-Bezeichnung + Badges) haetten den Plan sonst
   breiter gemacht als das Fenster — sichtbar wurde das nicht, weil
   `overflow: hidden` am .appdemo den Ueberhang abgeschnitten hat. */
.appdemo__body {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: start;
}

.appdemo__pool {
  border-right: 1px solid var(--a-line);
  background: var(--a-raised);
  padding: 12px;
}

.appdemo__plan {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--a-base);
}

.panelhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.panelhead__t {
  font-size: 13px;
  font-weight: 600;
  color: var(--a-ink);
}

.panelhead__n {
  font-size: 11px;
  font-weight: 600;
  color: var(--a-ink-3);
}

/* --- Helferkarte (HelferPoolPanel.tsx) -------------------------------- */
.hp {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hp__card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-md);
  padding: 7px 9px;
  cursor: grab;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.hp__card:hover {
  background: var(--a-hover);
  border-color: var(--a-line-strong);
}

.hp__card.is-sel {
  border-color: var(--a-brand);
  background: var(--a-brand-50);
  box-shadow: 0 0 0 2px var(--a-brand-200);
}

.hp__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--a-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp__warn {
  flex: none;
  color: var(--a-warning);
  display: grid;
  place-items: center;
}

.hp__leer {
  font-size: 13px;
  color: var(--a-ink-3);
  text-align: center;
  padding: 14px 0;
}

.hp__hint {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--a-ink-3);
}

/* --- Abschnitt (AbschnittContainer.tsx) ------------------------------- */
.absch2 {
  border: 2px solid var(--a-line);
  border-radius: var(--a-r-lg);
  transition: border-color 0.2s ease, opacity 0.2s ease;
  background: var(--a-raised);
}

.absch2.is-dim {
  opacity: 0.4;
}

.absch2__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.15s ease;
}

.absch2__head:hover {
  background: var(--a-hover);
}

.absch2__l {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chev {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--a-ink-3);
  transition: transform 0.18s ease;
}

.is-open > .chev,
.is-open .chev--self {
  transform: rotate(90deg);
}

.absch2__t {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.absch2__c {
  font-size: 11.5px;
  color: var(--a-ink-3);
  flex: none;
}

.absch2__r {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.dot--red { background: #ef4444; }
.dot--red2 { background: #f87171; }
.dot--amber { background: #f59e0b; }
.dot--green { background: #22c55e; }

/* Taktische Staerke — in der App immer Mono */
.staerke {
  font-size: 11.5px;
  font-weight: 400;
  padding: 2px 7px;
  border-radius: var(--a-r-sm);
  background: var(--a-sunken);
  color: var(--a-ink-2);
  white-space: nowrap;
}

.absch2__inner {
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Teamkarte (TeamKarteV2.tsx) ------------------------------------- */
.team {
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  overflow: hidden;
  box-shadow: var(--a-sh1);
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.team.is-dim {
  opacity: 0.3;
}

.team__head {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.team__head:hover {
  background: var(--a-hover);
}

.team__row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team__l {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.team__t {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team__funk {
  font-size: 11.5px;
  color: var(--a-ink-3);
  flex: none;
}

.team__bes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.team__bes--red { color: #dc2626; }
.team__bes--amber { color: #b45309; }
.team__bes--green { color: #15803d; }

.team__bes i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.team__bes--red i { background: #f87171; }
.team__bes--amber i { background: #fbbf24; }
.team__bes--green i { background: #22c55e; }

.team__flags {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 0 23px;
  flex-wrap: wrap;
}

.flag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--a-r-sm);
  font-size: 10px;
  font-weight: 500;
  border: 1px solid;
}

.flag--red {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

.flag--amber {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.flag--sky {
  background: #f0f9ff;
  color: #0284c7;
  border-color: #bae6fd;
}

.flag__zeit {
  font-size: 10px;
  color: var(--a-ink-3);
  margin-left: 2px;
}

.team__pos {
  border-top: 1px solid var(--a-line);
}

/* --- Positionszeile -------------------------------------------------- */
.prow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.15s ease, outline-color 0.15s ease;
}

.prow + .prow {
  border-top: 1px solid var(--a-line-subtle);
}

.prow:hover {
  background: var(--a-hover);
}

.prow.is-over {
  background: var(--a-brand-50);
  outline: 2px solid var(--a-brand-400);
  outline-offset: -2px;
}

/* Ziel-Hervorhebung, wenn eine Person gewaehlt ist */
.prow.is-ziel {
  background: var(--a-brand-50);
}

.prow.is-ziel-warn {
  opacity: 0.5;
}

.prow__bez {
  font-weight: 500;
  color: var(--a-ink);
  flex: none;
  white-space: nowrap;
}

.prow__person {
  flex: 1;
  min-width: 90px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.prow__name {
  font-size: 12.5px;
  color: var(--a-ink-2);
  padding: 2px 6px;
  border-radius: var(--a-r-sm);
}

.prow__leer {
  font-size: 12px;
  font-style: italic;
  color: var(--a-ink-3);
  padding: 2px 6px;
  border-radius: var(--a-r-sm);
}

.prow:hover .prow__leer {
  background: var(--a-brand-50);
  color: var(--a-brand);
  font-style: normal;
}

/* Der "← Name zuweisen"-Knopf aus dem Touch-Modus der App */
.prow__assign {
  display: inline-flex;
  align-items: center;
  background: var(--a-brand);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: var(--a-r-sm);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.prow__assign:hover {
  background: var(--a-brand-700);
}

.prow__end {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
}

.prow__zeit {
  font-size: 10px;
  color: var(--a-ink-2);
  white-space: nowrap;
}

.ico {
  width: 15px;
  height: 15px;
  flex: none;
}

.ico--red { color: #ef4444; }
.ico--blue { color: #3b82f6; }
.ico--amber { color: #f59e0b; }

.prow__x {
  width: 15px;
  height: 15px;
  color: #d6d3d1;
  flex: none;
}

.prow:hover .prow__x {
  color: #ef4444;
}

/* --- Fusszeile der Teamkarte (Funkrufname + Aktionen) ---------------- */
.team__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-top: 1px solid var(--a-line-subtle);
  background: var(--a-sunken);
  flex-wrap: wrap;
}

.team__foot .fake-input {
  flex: 1;
  min-width: 100px;
  font-size: 11.5px;
  color: var(--a-ink-2);
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-md);
  padding: 3px 8px;
}

.team__foot .fake-btn {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--a-ink-2);
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-md);
  padding: 3px 9px;
}

/* --- Qualifikations-Badges (Badge.tsx CodePill + QUALIFIKATION_TONE) --
   Mono, halbfett, Tailwind-100/900/200 je Tone. */
.cp {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--a-r-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
  flex: none;
  white-space: nowrap;
}

.cp--red     { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.cp--rose    { background: #ffe4e6; color: #881337; border-color: #fecdd3; }
.cp--orange  { background: #ffedd5; color: #7c2d12; border-color: #fed7aa; }
.cp--amber   { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.cp--teal    { background: #ccfbf1; color: #134e4a; border-color: #99f6e4; }
.cp--emerald { background: #d1fae5; color: #064e3b; border-color: #a7f3d0; }
.cp--sky     { background: #e0f2fe; color: #0c4a6e; border-color: #bae6fd; }
.cp--violet  { background: #ede9fe; color: #4c1d95; border-color: #ddd6fe; }
.cp--lime    { background: #ecfccb; color: #365314; border-color: #d9f99d; }
.cp--neutral { background: #f5f5f4; color: #57534e; border-color: #e7e5e4; }

/* --- Statuszeile unter der Demo -------------------------------------- */
.appdemo__status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--a-line);
  background: var(--a-sunken);
  font-size: 12.5px;
  color: var(--a-ink-2);
  min-height: 40px;
}

.appdemo__gesamt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex: none;
}

.appdemo__gesamt .lbl {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--a-ink-3);
}

.appdemo__gesamt .val {
  font-size: 13px;
  font-weight: 600;
  color: var(--a-ink);
}

.appdemo__reset {
  border: 1px solid var(--a-line);
  background: var(--a-raised);
  border-radius: var(--a-r-md);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--a-ink-2);
  padding: 4px 10px;
  cursor: pointer;
  flex: none;
}

.appdemo__reset:hover {
  border-color: var(--a-line-strong);
  background: var(--a-hover);
}

/* --- Fokus: in der App tastaturfreundlich --------------------------- */
.appdemo :focus-visible {
  outline: 2px solid var(--a-brand);
  outline-offset: 1px;
  border-radius: var(--a-r-sm);
}

/* ==========================================================================
   Modal-Rahmen — Modal-Sprache der App: rounded-xl, Kopf mit Schliessen
   Drei Inhalte: Personen-Fenster, Personalliste, Warnung
   ========================================================================== */
.amod {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(28, 25, 23, 0.55);
  font-family: 'InterVar', system-ui, sans-serif;
}

.amod[hidden] {
  display: none;
}

.amod__box {
  background: var(--a-raised);
  color: var(--a-ink);
  border-radius: var(--a-r-xl);
  width: 100%;
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}

.amod__box--sm { max-width: 440px; }
.amod__box--md { max-width: 540px; }
.amod__box--lg { max-width: 680px; }

.amod__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--a-line);
  flex: none;
}

.amod__t {
  font-size: 16.5px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
}

.amod__zu {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: none;
  background: none;
  border-radius: var(--a-r);
  color: var(--a-ink-3);
  cursor: pointer;
}

.amod__zu svg {
  width: 17px;
  height: 17px;
}

.amod__zu:hover {
  background: var(--a-hover);
  color: var(--a-ink);
}

.amod__body {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.amod__fuss {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--a-line);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: none;
}

.amod__fuss[hidden] {
  display: none;
}

/* --- Personen-Fenster ------------------------------------------------- */
.amod__kopf {
  display: flex;
  align-items: center;
  gap: 11px;
}

.amod__kopfname {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

.amod__kopfsub {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--a-ink-3);
}

.acard {
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-lg);
  padding: 12px 14px;
}

.acard--sunken {
  background: var(--a-sunken);
}

.acard__t {
  margin: 0 0 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--a-ink-3);
}

.acard__leer {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--a-ink-3);
}

.acard__grund {
  margin: 5px 0 0 16px;
  font-size: 11.5px;
  color: var(--a-ink-3);
}

.acard__dim {
  color: var(--a-ink-3);
  font-weight: 400;
}

.azeile {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.azeile + .azeile {
  margin-top: 9px;
}

.azeile .dot {
  margin-top: 5px;
}

.azeile--warn {
  margin-top: 8px;
}

.azeile__t {
  font-size: 13px;
  color: var(--a-ink-2);
  flex: 1;
  min-width: 0;
}

.azeile__t strong {
  color: var(--a-ink);
}

.azeile__lbl {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--a-ink-3);
}

.azeile__val {
  margin: 1px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--a-ink);
}

.azeile__zusatz {
  font-weight: 400;
  color: var(--a-ink-3);
  font-family: 'InterVar', system-ui, sans-serif;
}

.dot--blue { background: #60a5fa; }

/* Zeitbalken in der zeitlichen Übersicht */
.zeitbalken {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--a-line);
}

.zeitbalken__r {
  display: flex;
  align-items: center;
  gap: 9px;
}

.zeitbalken__r + .zeitbalken__r {
  margin-top: 5px;
}

.zeitbalken__l {
  width: 62px;
  flex: none;
  font-size: 10.5px;
  color: var(--a-ink-3);
}

.zeitbalken__s {
  position: relative;
  flex: 1;
  height: 15px;
  background: var(--a-raised);
  border: 1px solid var(--a-line);
  border-radius: 5px;
}

.zeitbalken__b {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 3px;
  min-width: 2px;
}

.zeitbalken__b.is-dienst { background: #d6d3d1; }
.zeitbalken__b.is-verf { background: #60a5fa; }
.zeitbalken__b.is-eing { background: var(--a-brand); }

.zeitbalken__skala {
  display: flex;
  justify-content: space-between;
  margin: 5px 0 0 71px;
  font-size: 10px;
  color: var(--a-ink-3);
}

/* --- Personalliste (AssignPopup) -------------------------------------- */
.azu__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.azu__gesucht {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--a-ink-2);
}

.azu__besetzt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--a-ink-2);
}

.azu__frei {
  font-size: 11.5px;
  font-weight: 500;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--a-r);
  padding: 4px 9px;
  cursor: pointer;
}

.azu__frei:hover {
  background: #fee2e2;
}

.azu__leiste {
  display: flex;
  gap: 8px;
  align-items: center;
}

.azu__suche {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--a-ink);
  background: var(--a-raised);
  border: 1px solid var(--a-line-strong);
  border-radius: var(--a-r-md);
  padding: 7px 11px;
}

.azu__suche::placeholder {
  color: var(--a-ink-3);
}

.azu__tog {
  flex: none;
  font-size: 11.5px;
  font-weight: 500;
  padding: 7px 11px;
  border-radius: var(--a-r-md);
  border: 1px solid var(--a-line);
  background: var(--a-sunken);
  color: var(--a-ink-3);
  cursor: pointer;
}

.azu__tog.is-an {
  background: var(--a-brand-50);
  color: #b30014;
  border-color: var(--a-brand-200);
}

.azu__liste {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 46vh;
  overflow-y: auto;
}

.azu__leer {
  margin: 0;
  padding: 22px 0;
  text-align: center;
  font-size: 13px;
  color: var(--a-ink-3);
}

.azu__row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: var(--a-r-md);
  background: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.azu__row:hover {
  background: var(--a-brand-50);
  border-color: var(--a-brand-200);
}

.av {
  width: 31px;
  height: 31px;
  flex: none;
  border-radius: 50%;
  background: var(--a-sunken);
  border: 1px solid var(--a-line);
  color: var(--a-ink-2);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
}

.azu__mid {
  flex: 1;
  min-width: 0;
}

.azu__z1 {
  display: flex;
  align-items: center;
  gap: 7px;
}

.azu__name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--a-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.azu__grund {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--a-ink-3);
}

.azu__pfeil {
  flex: none;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--a-brand);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.azu__row:hover .azu__pfeil,
.azu__row:focus-visible .azu__pfeil {
  opacity: 1;
}

/* --- Warnung ---------------------------------------------------------- */
.adlg__ziel {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--a-ink-2);
  margin-bottom: 12px;
}

.adlg__p {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--a-r-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.adlg__p--amber {
  background: #fffbeb;
  border-color: #fde68a;
}

.adlg__p .ico {
  margin-top: 1px;
  color: #dc2626;
}

.adlg__p--amber .ico {
  color: #b45309;
}

.adlg__p b {
  display: block;
  font-size: 12.5px;
  color: var(--a-ink);
  margin-bottom: 2px;
}

.adlg__p span {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--a-ink-2);
}

.abtn {
  flex: 1;
  min-width: 130px;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--a-r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.abtn--primary {
  background: var(--a-brand);
  color: #fff;
}

.abtn--primary:hover {
  background: var(--a-brand-700);
}

.abtn--secondary {
  background: var(--a-raised);
  color: var(--a-ink);
  border-color: var(--a-line-strong);
}

.abtn--secondary:hover {
  background: var(--a-hover);
}

/* ==========================================================================
   Schmale Viewports — die App selbst blendet den Pool bei < 1024px in ein
   Panel aus; hier wird er einfach ueber den Plan gestellt.
   ========================================================================== */
@media (max-width: 1000px) {
  .appdemo__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .appdemo__pool {
    border-right: none;
    border-bottom: 1px solid var(--a-line);
  }

  .hp {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
  }
}

@media (max-width: 620px) {
  .appdemo {
    font-size: 14px;
  }

  .appdemo__tabs {
    display: none;
  }

  .hp {
    grid-template-columns: 1fr;
  }

  .prow {
    flex-wrap: wrap;
    row-gap: 5px;
  }

  .prow__person {
    flex-basis: 100%;
    min-width: 0;
  }

  /* Auf sehr schmalen Geräten darf die Bezeichnung umbrechen, sonst
     bestimmt sie die Mindestbreite der ganzen Zeile. */
  .prow__bez {
    white-space: normal;
  }

  .team__flags {
    margin-left: 0;
  }

  /* Statuszeile: Stärke, Soll und Reset passen bei 375 px nicht in eine
     Zeile — Gruppe darf schrumpfen und umbrechen, sonst wird sie beschnitten. */
  .appdemo__status {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* Suchfeld und Filter-Umschalter der Personalliste umbrechen lassen —
     "Nur passende Quali" ist lang und wird auf 320-px-Geräten sonst eng. */
  .azu__leiste {
    flex-wrap: wrap;
  }

  .azu__suche {
    flex-basis: 100%;
  }

  .amod__body {
    padding: 14px 16px;
  }

  .amod__head {
    padding: 14px 16px 10px;
  }

  .amod__fuss {
    padding: 10px 16px 14px;
  }

  .zeitbalken__l {
    width: 52px;
  }

  .zeitbalken__skala {
    margin-left: 61px;
  }

  .appdemo__gesamt {
    margin-left: 0;
    flex: 1 1 100%;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .appdemo__reset {
    margin-left: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .appdemo *,
  .appdemo *::before {
    transition-duration: 0.001ms !important;
  }
}