/* Color Cards — globale Kartenfläche (Daniel 2026-09-22) */
:root {
  --cc-card-bg: #f4f4f5; /* zinc-100 */
}
.cc-card-bg {
  background-color: var(--cc-card-bg);
}

/* A-169 Soft Mindestbreite Shell (~1024): Scroll-x am äußeren Wrapper;
   Shell min-width. overflow:hidden der Stack-Shell (unten) bleibt für Y —
   horizontales Scrollen greift am Wrapper, Maske wird nicht abgeschnitten.
   A-185: Shell wächst mit Inhalt (width max(100%, max-content)), damit
   Top-Bar nie kürzer als der Shell-Inhalt; horizontaler Scroll einheitlich.
   A-186: Split bleibt auf Shell-Breite nebeneinander (kein Viewport-grid-cols-1-Stapel). */
.klein-shell-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.klein-shell {
  min-width: 1024px;
  width: max(100%, max-content);
  max-width: none;
  box-sizing: border-box;
}

/* A-184/A-185: symmetrischer Außenabstand Hauptnutzfläche (L=R=T=B ~8px) */
.klein-shell > .klein-main {
  padding-top: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

/* Schmal Viewport (<1280): Y-Käfig für Prüfung (:has(.klein-stack)).
   A-186: kein vertikales Stapeln der Splits — Shell ≥1024 hält Nebeneinander + Scroll-x. */
.klein-wide-only { }
@media (max-width: 1279px) {
  .klein-wide-only { display: none !important; }

  .klein-shell:has(.klein-stack) {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }
  .klein-shell:has(.klein-stack) > header {
    flex: 0 0 auto;
  }
  .klein-shell:has(.klein-stack) .klein-main {
    min-height: 0;
    overflow: hidden;
    /* A-185: padding-bottom nicht auf 0 — Außenabstand bleibt L=R=T=B */
  }
  .klein-shell:has(.klein-stack) .klein-grow {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.75rem; /* A-185: symmetrisch (war 0.75rem 1rem 0.5rem) */
  }
  .klein-shell:has(.klein-stack) .klein-fill {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  .klein-shell:has(.klein-stack) .klein-fill > nav[aria-label="Fortschritt"] {
    flex: 0 0 auto;
    margin-bottom: 0.75rem;
    overflow-x: auto;
  }
  .klein-shell:has(.klein-stack) .klein-step {
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* A-186: kein Viewport-Stapel unter 1280 — Shell min-width 1024 hält Split;
     horizontaler Scroll an .klein-shell-scroll. Flex-Käfig Y bleibt für Prüfung. */
  .klein-stack {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    gap: 0.75rem;
  }
  .klein-pdf {
    overflow: hidden;
    min-width: 0;
  }
  .klein-pdf iframe,
  .klein-pdf .pdf-preview {
    display: block;
    margin-top: 0.25rem;
  }
  .klein-mask {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .klein-foot {
    flex: 0 0 auto;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
  }
  .klein-step > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
  }
  .klein-step > form > .klein-stack {
    flex: 1 1 auto;
  }
  .klein-step > form > fieldset {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0;
  }
  .klein-step > form > fieldset > .klein-stack {
    flex: 1 1 auto;
  }
}

/* A-188: Eingang Viewport-Fit (ersetzt A-184 Seiten-Scroll nur für Eingang).
   Nutzfläche = Fensterhöhe; Cards + Paging + Weiter sichtbar; kein nötiger Seiten-Scroll.
   Lesson A-184: Paging/Weiter flex:0 — kein Käfig der sie versteckt.
   Andere Schritte: A-184/Stack-Käfig unverändert. A-186 min-width hält. */
@media (max-width: 1279px) {
  .klein-shell:has(.desk-eingang) {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }
  .klein-shell:has(.desk-eingang) > header {
    flex: 0 0 auto;
  }
  .klein-shell:has(.desk-eingang) .klein-main,
  .klein-shell:has(.desk-eingang) .klein-grow,
  .klein-shell:has(.desk-eingang) .klein-fill,
  .klein-shell:has(.desk-eingang) .klein-step {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }
  .klein-shell:has(.desk-eingang) .klein-fill > nav[aria-label="Fortschritt"] {
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
  }
  .klein-shell:has(.desk-eingang) .desk-eingang {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .klein-shell:has(.desk-eingang) .klein-stack {
    flex: 1 1 auto;
    min-height: 0;
  }
  .klein-shell:has(.desk-eingang) .a180-card-liste .klein-mask {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto; /* A-190: kurze Box-Scroll Safety für Restzeile */
    scrollbar-gutter: stable; /* A-259 N-003 */
  }
  .klein-shell:has(.desk-eingang) .klein-pdf {
    min-height: 0;
  }
  .klein-shell:has(.desk-eingang) .a188-paging,
  .klein-shell:has(.desk-eingang) .klein-foot {
    flex: 0 0 auto;
  }
}

/* A-189 Prüfung: Seiten-Scroll Nutzfläche — Shell-Y-Käfig / overflow-hidden-Kette weg.
   Lesson A-184/A-188: kein display:contents-Scroll-Container; Foot im Dokumentfluss.
   Gilt statt Stack-Käfig nur für .desk-pruef; Eingang A-188 unberührt. */
@media (max-width: 1279px) {
  .klein-shell:has(.desk-pruef) {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }
  .klein-shell:has(.desk-pruef) > header {
    flex: 0 0 auto;
  }
  .klein-shell:has(.desk-pruef) .klein-main,
  .klein-shell:has(.desk-pruef) .klein-grow,
  .klein-shell:has(.desk-pruef) .klein-fill,
  .klein-shell:has(.desk-pruef) .klein-step {
    min-height: 0;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
  }
  .klein-shell:has(.desk-pruef) .klein-fill > nav[aria-label="Fortschritt"] {
    flex: 0 0 auto;
  }
  .klein-shell:has(.desk-pruef) .klein-step > form,
  .klein-shell:has(.desk-pruef) .klein-step > form > fieldset {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .klein-shell:has(.desk-pruef) .klein-stack.desk-pruef,
  .klein-shell:has(.desk-pruef) .desk-pruef {
    flex: 0 1 auto;
    min-height: 0;
    height: auto;
    overflow: visible;
  }
  .klein-shell:has(.desk-pruef) .klein-foot {
    flex: 0 0 auto;
  }
}


/* A-186: Split-Grid immer (Shell min-width 1024), nicht erst ab Viewport xl */
.klein-stack {
  display: grid;
}

/* A-27/A-186 Desktop-Prüfung auf Shell: Zuordnung|PDF immer (nicht Viewport-xl).
   A-189: Raster A|B / Blocker / C Editor / D Liste; Seiten-Scroll; kein display:contents.
   Header/PDF nicht sticky. Shell-Scroll-x bei schmalem Viewport. */
.klein-fill:has(.desk-pruef) {
  max-width: none;
}
.desk-pruef {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 38%);
  grid-template-areas:
    "left pdf"
    "blockers blockers"
    "editor editor"
    "list list"
    "vk vk";
  gap: 1.5rem;
  align-items: start;
}
/* A-374 S1: 409-Band direkt über den Blockern; eigene Zeile nur solange es steht (sonst Raster unverändert) */
.desk-pruef > #pruefung-409-band {
  grid-area: band;
  margin-bottom: 0;
}
.desk-pruef:has(> #pruefung-409-band:not([hidden])) {
  grid-template-areas:
    "left pdf"
    "band band"
    "blockers blockers"
    "editor editor"
    "list list"
    "vk vk";
}
.desk-pruef > .klein-pdf {
  grid-area: pdf;
  position: static;
  min-width: 0;
  height: 400px; /* A-189 B feste Höhe ~380–440 */
  overflow-x: hidden;
  overflow-y: hidden; /* A-264 R2: kein eigener Y-Scroll — einziger Y-Scroll ist .pdf-preview */
}
.desk-left {
  grid-area: left;
  min-width: 0;
  height: 400px; /* A-189 A an B angleichen */
  overflow-x: hidden;
  overflow-y: auto; /* A-191 Notfall-Safety (bereits A-189) */
  -webkit-overflow-scrolling: touch;
}
.desk-blockers {
  grid-area: blockers;
  min-width: 0;
}
.desk-pos-c {
  grid-area: editor;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto; /* A-191 Notfall-Safety */
}
.desk-pos-d {
  grid-area: list;
  min-width: 0;
  /* A-212: äußere Min-/Max-Höhe ≈ Größenordnung Box C (#pos-editor / .desk-pos-c),
     nicht A-191 height+min-height 48rem „höher“ (verdeckte Weiter).
     Leer: Min-Höhe; viele Zeilen: max-height Deckel → overflow innen;
     Screenshot (POSITIONEN oben, Desktop ≥1024): Fuß Weiter erreichbar. */
  min-height: 18rem;
  max-height: min(28rem, 42vh);
  overflow-x: auto;
  overflow-y: auto; /* scrollbar Pflicht bei Überlauf */
  -webkit-overflow-scrolling: touch;
}

/* A-223: VK Positionsblock unterhalb EK (nur C_VK) */
.desk-pos-vk {
  grid-area: vk;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.desk-pos-vk .desk-pos-vk-list {
  min-height: 10rem;
  max-height: min(24rem, 36vh);
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.desk-pruef #vk-pos-editor.a161-card,
.desk-pruef .vk-pos-editor.a161-card {
  position: relative;
}
.desk-pos {
  min-width: 0;
}
.desk-pruef .desk-pdf-frame {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  position: static;
}
/* A-191 C: Inhaltshöhe — kein 320px-Käfig; overflow-y nur Notfall */
.desk-pos-c .desk-pos-editor-body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.desk-pos-wrap {
  overflow-x: visible;
}
.pos-editor {
  background: #fff;
}
.desk-pos table {
  width: 100%;
  table-layout: fixed;
}
.desk-pos th:nth-child(1),
.desk-pos td:nth-child(1) {
  width: 4.5rem;
}
.desk-pos th:nth-child(2),
.desk-pos td:nth-child(2) {
  width: 38%;
  overflow-wrap: anywhere;
}
.desk-pos th:nth-child(3),
.desk-pos td:nth-child(3),
.desk-pos th:nth-child(4),
.desk-pos td:nth-child(4),
.desk-pos th:nth-child(5),
.desk-pos td:nth-child(5),
.desk-pos th:nth-child(6),
.desk-pos td:nth-child(6),
.desk-pos th:nth-child(7),
.desk-pos td:nth-child(7) {
  width: 8%;
}
.desk-pos th:nth-child(8),
.desk-pos td:nth-child(8) {
  width: 2rem;
}

/* A-61: gemeinsame Zustands-Tokens. A-42 gewählt, Fehler rose, tot A-59, Problem pfirsich. A-97 ok-Zeile lime. */
:root {
  --ui-chosen-bg: #e4e4e7;
  --ui-chosen-edge: #09090b;
  --ui-link: #2563eb;
  --ui-error: #f43f5e;
  --ui-problem-bg: #ffedd5;
  --ui-problem-text: #9a3412;
  --ui-ok: #4d7c0f;
  --ui-ok-bg: #ecfccb;
}
.ui-result-ok {
  color: var(--ui-ok);
}
.ui-result-fail {
  color: var(--ui-error);
}
nav[aria-label="Fortschritt"] .ui-step-current {
  background-color: #18181b;
  color: #fff;
}
tr.ui-result-fail > td {
  background-color: #fff1f2;
}
table.beleg-liste,
table#pos-list {
  border-collapse: separate;
  border-spacing: 0;
}
/* Fund 12: Kopfzelle der Auswahlspalte ohne 2-px-Rand — sonst ragt die 48-px-Tapfläche 2 px über die 48-px-Spalte */
table.beleg-liste tr.beleg-row > td:first-child,
table#pos-list thead th:first-child,
table#pos-list tr.weg-c-pos > td:first-child {
  border-left: 2px solid transparent;
}
tr.is-focus > td,
tr.is-selected > td,
tr.ui-chosen > td {
  background-color: var(--ui-chosen-bg);
}
tr.ui-ok-row > td {
  background-color: var(--ui-ok-bg);
}
/* A-217: gewählt schlägt ok-Fläche — bestätigt+gewählt = --ui-chosen-bg (nicht lime); ungewählt ok bleibt lime. */
tr.ui-chosen.ui-ok-row > td,
tr.is-selected.ui-ok-row > td,
tr.is-focus.ui-ok-row > td {
  background-color: var(--ui-chosen-bg);
}
table.beleg-liste tr.beleg-row.is-focus > td:first-child,
table.beleg-liste tr.beleg-row.ui-chosen > td:first-child,
table.beleg-liste tr.beleg-row.is-selected > td:first-child,
table#pos-list tr.weg-c-pos.is-selected > td:first-child,
table#pos-list tr.weg-c-pos.ui-chosen > td:first-child,
table#pos-list tr.weg-c-pos.is-focus > td:first-child {
  border-left-color: var(--ui-chosen-edge);
}
tr.ui-problem > td {
  background-color: var(--ui-problem-bg);
}
/* A-213 Fix R1: gewählt schlägt peach — Fläche --ui-chosen-bg; ungewählt Problem bleibt peach. */
tr.ui-chosen.ui-problem > td,
tr.is-selected.ui-problem > td,
tr.is-focus.ui-problem > td {
  background-color: var(--ui-chosen-bg);
}
tr.ui-ok-row.ui-problem > td {
  background-color: var(--ui-problem-bg);
}
tr.ui-chosen.ui-ok-row.ui-problem > td,
tr.is-selected.ui-ok-row.ui-problem > td,
tr.is-focus.ui-ok-row.ui-problem > td {
  background-color: var(--ui-chosen-bg);
}
table#pos-list tr.weg-c-pos.ui-chosen.ui-problem > td:first-child,
table#pos-list tr.weg-c-pos.is-selected.ui-problem > td:first-child,
table#pos-list tr.weg-c-pos.is-focus.ui-problem > td:first-child {
  border-left-color: var(--ui-link);
}
.ui-field-error {
  border-color: var(--ui-error) !important;
}
.ui-field-error-label,
.ui-field-hint {
  color: var(--ui-error);
}
.ui-problem-hint {
  color: var(--ui-problem-text);
}
table.beleg-liste tr.beleg-row .beleg-name-link,
table.beleg-liste tr.beleg-row .beleg-name-link:visited {
  color: var(--ui-link);
}
table.beleg-liste tr.beleg-row .beleg-name-link:hover {
  color: #1e40af;
}
/* A-181 / A-45 / A-186: Buchungsart PDF-Fill + Split 40/60 immer auf Shell
   (Shell min-width 1024; nicht Viewport-lg). */
.klein-fill:has(.desk-ba) {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 7.5rem);
}
.klein-fill:has(.desk-ba) .klein-step {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.desk-ba {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.desk-ba.a181-split {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* ~40/60 */
}
.desk-ba-pdf {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.desk-ba-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 24rem;
  height: 0;
  position: static;
}
.desk-ba-foot {
  flex: 0 0 auto;
}

/* A-45/A-185/A-186/A-188 Desktop Eingang: Viewport-Fit + Equal-Height + Split auf Shell.
   A-188 ersetzt A-184 Seiten-Scroll für Eingang. Shell-Scroll-x (A-186) hält. */
.klein-fill:has(.desk-eingang) {
  display: flex;
  flex-direction: column;
  height: calc(100svh - 7.5rem);
  max-height: calc(100svh - 7.5rem);
  min-height: 0;
}
.klein-fill:has(.desk-eingang) > nav[aria-label="Fortschritt"] {
  flex: 0 0 auto;
  margin-bottom: 0.75rem;
}
.klein-fill:has(.desk-eingang) .klein-step {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.klein-fill:has(.desk-eingang) .desk-eingang {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.klein-fill:has(.desk-eingang) .a188-chrome {
  flex: 0 0 auto;
  margin-bottom: 0.5rem;
}
.klein-fill:has(.desk-eingang) .a180-card-leer {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}
/* A-281: Leer-Card bleibt so breit wie bisher (72rem) und mittig, wächst nicht mit der Inhaltsfläche */
.a180-card-leer {
  max-width: 72rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.klein-fill:has(#liste-form .klein-pdf) #liste-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-top: 0.5rem;
}
.klein-fill:has(#liste-form .klein-pdf) .klein-stack {
  flex: 1 1 auto;
  min-height: 0; /* A-188 Fit — Foot/Paging außerhalb, nicht geclippt */
  align-items: stretch; /* A-185 Equal-Height */
  grid-template-columns: clamp(24rem, 40%, 40rem) minmax(0, 1fr); /* A-293 S1 (gilt statt A-259 R2 20rem): Liste clamp(24rem, 40 %, 40rem), Vorschau 1fr (A-186: Split hält ohne Viewport-xl) */
  overflow: hidden;
}
.klein-fill:has(#liste-form .klein-pdf) .klein-pdf {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.klein-fill:has(.desk-eingang) .klein-foot,
.klein-fill:has(.desk-eingang) .a188-foot {
  flex: 0 0 auto;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
}
/* A-185: Cards als Flex-Spalten — Stretch füllt Außenhöhe; Maske/PDF innen. */
.klein-fill:has(#liste-form .klein-pdf) .desk-eingang .a180-card-liste {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
/* A-259: Scrollbar-Gutter stabil — kein Breitensprung bei Auswahl (N-003). */
.a180-card-liste .klein-mask {
  scrollbar-gutter: stable;
}

/* A-293 S2: Tabelle im Eingang mindestens 25,5rem (Auswahl 3rem + Dateiname ≥ 204 px + Datum 6,5rem + PDF 3,25rem);
   bei Platzmangel scrollt nur die Listen-Maske waagerecht (S3).
   width: 100% = max(100 %, 25,5rem) aus der Spec: table-fixed greift nur bei nicht-automatischer Breite;
   mit min-w-full allein (width: auto) rechnet Chrome automatisch und die colgroup-Breiten verrutschen (gemessen 50/194/104/59). */
.desk-eingang table.beleg-liste {
  width: 100%;
  min-width: 25.5rem;
}
/* A-293 S3: Wischgesten nicht an Seite/Shell durchreichen (iOS-Gummiband, Zurück-Geste) */
.desk-eingang .a180-card-liste .klein-mask,
.desk-eingang .pdf-preview {
  overscroll-behavior: contain;
}
/* A-293: Utilities aus beleg-liste.php, die im app.css-Build fehlen (kein Tailwind-Neubau; Werte wie Tailwind v4) */
.desk-eingang .min-h-12 {
  min-height: 3rem;
}
.desk-eingang .w-26 {
  width: 6.5rem;
}
.desk-eingang .w-13 {
  width: 3.25rem;
}
.desk-eingang .\[overflow-wrap\:anywhere\] {
  overflow-wrap: anywhere;
}

/* A-190: Listen-Maske overflow-y auto (Clip letzte Zeile); Paging bleibt flex:0 unter Maske.
   Teil-Ausnahme zu A-188 „kein Listen-Innen-Scroll“ — nur Safety, per_page bleibt dynamisch. */
.klein-fill:has(#liste-form .klein-pdf) .desk-eingang .a180-card-liste .klein-mask {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable; /* A-259 N-003 */
}
.klein-fill:has(#liste-form .klein-pdf) .desk-eingang .a188-paging {
  flex: 0 0 auto;
  border-top: 1px solid rgb(9 9 11 / 0.05);
}
.klein-fill:has(#liste-form .klein-pdf) .desk-eingang .a180-card-pdf {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.klein-fill:has(#liste-form .klein-pdf) .desk-eingang .a180-card-pdf .a180-card-pad {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.klein-fill:has(#liste-form .klein-pdf) .desk-eingang .a180-card-pdf .desk-ba-frame {
  flex: 1 1 auto;
  min-height: 12rem;
  height: 0;
}


/* A-161 Color Cards Prüfung (nur Schritt 4 / .desk-pruef) */
.desk-pruef .a161-card {
  position: relative;
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--cc-card-bg); /* zinc-100, nicht Reinweiß */
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.desk-pruef .a161-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  margin: 0; /* A-214: space-y auf Card darf absolute Accent-Höhe nicht kürzen */
  border-radius: 0.75rem 0 0 0.75rem;
  background: #8b5cf6; /* violet-500 */
  pointer-events: none;
}
.desk-pruef .a161-card-pad {
  padding-left: 1.15rem; /* Platz für Streifen */
}
.desk-pruef .desk-pdf-frame {
  border-radius: 0.75rem;
}
.desk-pruef #pos-editor.a161-card,
.desk-pruef .pos-editor.a161-card {
  border-radius: 0.75rem;
}
/* Lime-Chip Adresse bestätigen */
.desk-pruef #btn-adr-ok.a161-lime-chip {
  border-color: transparent;
  background-color: #84cc16; /* lime-500 */
  color: #fff;
}
.desk-pruef #btn-adr-ok.a161-lime-chip:hover:not(:disabled) {
  background-color: #65a30d; /* lime-600 */
}
.desk-pruef #btn-adr-ok.a161-lime-chip:disabled,
.desk-pruef #btn-adr-ok.a161-lime-chip[aria-disabled="true"] {
  background-color: #d9f99d; /* lime-200 */
  color: #4d7c0f; /* lime-700 */
  opacity: 1;
}
/* Summen-Punkte */
.desk-pruef .a161-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.desk-pruef .a161-dot-sky { background-color: #0ea5e9; }   /* sky-500 */
.desk-pruef .a161-dot-amber { background-color: #f59e0b; } /* amber-500 */
.desk-pruef .a161-dot-lime { background-color: #84cc16; }  /* lime-500 */
.desk-pruef .a161-sum-row {
  display: grid;
  grid-template-columns: 0.75rem 3.5rem 1fr 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.desk-pruef .a161-sum-erk {
  text-align: right;
  color: #71717a; /* zinc-500 */
}
.desk-pruef #kalk-warn {
  border-radius: 0.75rem;
}
/* Blocker rose-tönig */
.desk-pruef #gates-wrap [role="alert"] {
  border-radius: 0.75rem;
  border: 1px solid color-mix(in oklab, #f43f5e 25%, transparent);
}
/* A-213: Gewählt-Fläche Prüfung = Eingang A-42 (--ui-chosen-bg / zinc-200).
   Violet-Streifen zusätzlich ok (nicht violet-50 / nicht alleinige Marke).
   Fix R1: gewählt+ui-problem → Grau (peach-Override darf ui-chosen nicht gewinnen);
   ungewählt Problem bleibt peach.
   A-217: ok+gewählt ist nicht mehr lime-Fläche — gewählt inkl. ok bekommt --ui-chosen-bg;
   :not(.ui-ok-row)-Ausnahme für Gewählt-Fläche entfällt. */
.desk-pruef table#pos-list tr.weg-c-pos.ui-chosen > td:first-child,
.desk-pruef table#pos-list tr.weg-c-pos.is-selected > td:first-child,
.desk-pruef table#pos-list tr.weg-c-pos.is-focus > td:first-child {
  border-left-color: #8b5cf6; /* violet-500, zusätzlich zu Grau-Fläche */
}
.desk-pruef table#pos-list tr.weg-c-pos.ui-chosen.ui-problem > td:first-child,
.desk-pruef table#pos-list tr.weg-c-pos.is-selected.ui-problem > td:first-child,
.desk-pruef table#pos-list tr.weg-c-pos.is-focus.ui-problem > td:first-child {
  border-left-color: #8b5cf6;
}
.desk-pruef table#pos-list tr.weg-c-pos.ui-chosen > td,
.desk-pruef table#pos-list tr.weg-c-pos.is-selected > td,
.desk-pruef table#pos-list tr.weg-c-pos.is-focus > td {
  background-color: var(--ui-chosen-bg); /* A-213/A-217: zinc-200 inkl. gewählt+Problem und gewählt+ok */
}
/* A-217 Fix R1: explizit gewählt+ok in Prüfung — Spezifität schlägt ui-ok-row-Fläche */
.desk-pruef table#pos-list tr.weg-c-pos.ui-chosen.ui-ok-row > td,
.desk-pruef table#pos-list tr.weg-c-pos.is-selected.ui-ok-row > td,
.desk-pruef table#pos-list tr.weg-c-pos.is-focus.ui-ok-row > td {
  background-color: var(--ui-chosen-bg);
}
/* ok-Badge Anzeige */
.desk-pruef .pos-ok-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: color-mix(in oklab, #a3e635 20%, transparent);
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #3f6212; /* lime-800 */
}

/* A-177 Color Cards Erkennen (Variante B + Schatten / Top-Bar-Elevation) */
.desk-erk .a177-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--cc-card-bg); /* zinc-100, nicht Reinweiß */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06); /* shadow-md-ish */
}
.desk-erk .a177-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px; /* ~8px analog A-161, Spec B */
  margin: 0; /* A-207: space-y auf Card darf absolute Accent-Höhe nicht kürzen */
  border-radius: 0.75rem 0 0 0.75rem;
  pointer-events: none;
}
.desk-erk .a177-accent-violet {
  background: #8b5cf6; /* violet-500 */
}
.desk-erk .a177-accent-sky {
  background: #0ea5e9; /* sky-500 */
}
.desk-erk .a177-card-pad {
  padding-left: 1.35rem; /* Platz für 8px-Streifen */
}
.desk-erk .a177-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 1.35rem;
  border-bottom: 1px solid rgb(9 9 11 / 0.05);
}
.desk-erk .a177-chip-count {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: color-mix(in oklab, #0ea5e9 15%, transparent);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #0369a1; /* sky-700 */
}
/* Top-Bar Elevation (Chrome only — A-109 Anzeige bleibt)
   A-185: volle Shell-Breite, mit horizontalem Scroll mitlaufen (kein sticky/fixed). */
header.a177-topbar {
  background-color: #fff;
  border-bottom: 1px solid rgb(9 9 11 / 0.1);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
  width: 100%;
  min-width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* A-179 Color Cards Login (Variante A Soft — dezenter violet Linksrand) */
.desk-login .a179-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem; /* rounded-2xl — Soft */
  background: var(--cc-card-bg); /* zinc-100 — Global-Nachzug cc-card-bg */
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); /* weicher als A-177 */
}
.desk-login .a179-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px; /* ~8px Soft Color Cards */
  border-radius: 1rem 0 0 1rem;
  pointer-events: none;
}
.desk-login .a179-accent-violet {
  background: #8b5cf6; /* violet-500, Soft/dezent */
}
.desk-login .a179-card-pad {
  padding: 1.5rem 1.5rem 1.5rem 1.85rem; /* Platz für 8px-Streifen */
}
@media (min-width: 640px) {
  .desk-login .a179-card-pad {
    padding: 2rem 2rem 2rem 2.25rem;
  }
}
/* Soft sky Focus — optional, Spec A Soft */
.desk-login .a179-field:focus {
  outline-color: #0ea5e9; /* sky-500 */
}
.desk-login #login-alert {
  border: 1px solid color-mix(in oklab, #f43f5e 25%, transparent); /* rose */
}

/* A-180 Color Cards Eingang (P-24; Fläche cc-card-bg; Schatten wie A-177) */
.desk-eingang .a180-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--cc-card-bg); /* #f4f4f5 zinc-100 */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06); /* shadow wie A-177 */
}
.desk-eingang .a180-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px; /* ~8px analog A-177 */
  border-radius: 0.75rem 0 0 0.75rem;
  pointer-events: none;
}
.desk-eingang .a180-accent-violet {
  background: #8b5cf6; /* violet-500 */
}
.desk-eingang .a180-accent-sky {
  background: #0ea5e9; /* sky-500 */
}
.desk-eingang .a180-card-pad {
  padding-left: 1.35rem; /* Platz für 8px-Streifen */
}
.desk-eingang .a180-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 1.35rem;
  border-bottom: 1px solid rgb(9 9 11 / 0.05);
}
.desk-eingang .a180-card-leer .a180-card-pad {
  padding: 2.5rem 1.5rem 2.5rem 1.85rem;
}
.desk-eingang .a180-card-pdf .a180-card-pad {
  padding: 1rem 1rem 1rem 1.35rem;
}
/* A-185: PDF-Card Flex-Gerüst (Stretch-Fill; xl-Detail in Split-Media oben) */
.desk-eingang .a180-card-liste,
.desk-eingang .a180-card-pdf {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* A-181 Color Cards Buchungsart (P-24; Split 40/60 ab lg; Fläche cc-card-bg) */
.desk-ba .a181-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--cc-card-bg); /* #f4f4f5 zinc-100 */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06); /* shadow wie A-177/A-180 */
}
.desk-ba .a181-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: 0.75rem 0 0 0.75rem;
  pointer-events: none;
}
.desk-ba .a181-accent-violet {
  background: #8b5cf6; /* violet-500 */
}
.desk-ba .a181-accent-sky {
  background: #0ea5e9; /* sky-500 */
}
.desk-ba .a181-card-pad {
  padding: 1rem 1rem 1rem 1.35rem; /* Platz für 8px-Streifen */
}
.desk-ba .a181-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.85rem 1.35rem;
  border-bottom: 1px solid rgb(9 9 11 / 0.05);
}
.desk-ba .a181-card-pdf {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.desk-ba .a181-radio-on {
  background: color-mix(in oklab, #8b5cf6 8%, white);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #8b5cf6 35%, transparent);
}
.desk-ba .a181-radio-dead {
  opacity: 0.72;
}

/* A-182 Color Cards Überblick (P-24; Tabelle/Alert/Aktionen; Fläche cc-card-bg) */
.desk-ub .a182-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--cc-card-bg); /* #f4f4f5 zinc-100 */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06); /* shadow wie A-177/A-180 */
}
.desk-ub .a182-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: 0.75rem 0 0 0.75rem;
  pointer-events: none;
}
.desk-ub .a182-accent-violet {
  background: #8b5cf6; /* violet-500 */
}
.desk-ub .a182-accent-sky {
  background: #0ea5e9; /* sky-500 */
}
.desk-ub .a182-accent-rose {
  background: #f43f5e; /* rose-500 — Blocker-Alert */
}
.desk-ub .a182-card-pad {
  padding: 1rem 1rem 1rem 1.35rem; /* Platz für 8px-Streifen */
}
.desk-ub .a182-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 1.35rem;
  border-bottom: 1px solid rgb(9 9 11 / 0.05);
}
.desk-ub .a182-card-alert {
  background: color-mix(in oklab, #f43f5e 6%, var(--cc-card-bg));
}
.desk-ub .a182-card-tabelle .a182-card-pad {
  padding-top: 0.25rem;
}

/* A-183 Color Cards Ergebnis (P-24; Tabelle/Fehlerliste/Fuß; Fläche cc-card-bg) */
.desk-erg .a183-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem; /* rounded-xl */
  background: var(--cc-card-bg); /* #f4f4f5 zinc-100 */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06); /* shadow wie A-177/A-180/A-182 */
}
.desk-erg .a183-card-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: 0.75rem 0 0 0.75rem;
  pointer-events: none;
}
.desk-erg .a183-accent-violet {
  background: #8b5cf6; /* violet-500 */
}
.desk-erg .a183-accent-sky {
  background: #0ea5e9; /* sky-500 */
}
.desk-erg .a183-accent-rose {
  background: #f43f5e; /* rose-500 — Fehlerliste */
}
.desk-erg .a183-accent-lime {
  background: #84cc16; /* lime-500 — ok */
}
.desk-erg .a183-card-pad {
  padding: 1rem 1rem 1rem 1.35rem; /* Platz für 8px-Streifen */
}
.desk-erg .a183-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.75rem 1.35rem;
  border-bottom: 1px solid rgb(9 9 11 / 0.05);
}
.desk-erg .a183-card-alert {
  background: color-mix(in oklab, #f43f5e 6%, var(--cc-card-bg));
}
.desk-erg .a183-card-tabelle .a183-card-pad {
  padding-top: 0.25rem;
}

/* A-215: Erkennen-Kette Toggle — Chevron dreht bei aria-expanded */
[data-erk-kette-toggle][aria-expanded="true"] [data-erk-kette-chevron] {
  transform: rotate(180deg);
}

/* A-228: Ergebnis Belegliste — Chip + Zeilen-Toggle (gilt statt A-224 Global-Aufklapp) */
.desk-erg .a183-chip-count {
  display: inline-flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: color-mix(in oklab, #0ea5e9 15%, transparent);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #0369a1; /* sky-700 */
}
[data-erg-row-toggle][aria-expanded="true"] [data-erg-row-chevron] {
  transform: rotate(180deg);
}
.desk-erg .a183-card-liste [data-erg-row-panel] {
  padding-left: 0;
}

/* A-216: PDF.js Mehrseiten-Preview — gleicher Rahmen, Scroll innen, Seitenstapel */
.pdf-preview {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border: 0;
  box-sizing: border-box;
}
.pdf-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0;
  min-width: 0;
}
.pdf-preview-page {
  display: block;
  width: 100%; /* A-216 */
  max-width: 100%; /* A-264 */
  height: auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(9 9 11 / 0.06);
}
/* A-281 B3: nur Rahmen mit data-pdf-max-scale (Eingang) — Breite aus pdf-preview.js (Maßstab ≤ 2), mittig */
[data-pdf-max-scale] .pdf-preview-page {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
.pdf-preview-fallback {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 24rem;
  border: 0;
}
.desk-pruef .pdf-preview-fallback {
  min-height: 100%;
}
.pdf-preview-msg {
  margin: 0;
}