/* App-spezifische Ergänzungen zum Design-System: Menüs, Formulare, Verlauf, Einstellungen, Login */

/* ---------- Menüs (details statt JS) ---------- */
details.menu, details.who { position: relative; }
details.menu > summary, details.who > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker, details.who > summary::-webkit-details-marker { display: none; }
details.menu { display: none; }
.menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; min-width: 220px;
  display: grid; gap: 2px; padding: 8px; background: var(--surface);
  border: 1.5px solid var(--tinte); border-radius: var(--r-md); box-shadow: 0 3px 0 var(--tinte);
}
.menu-panel.right { left: auto; right: 0; }
.menu-panel a, .menu-panel button {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: var(--r-sm);
  font: 600 .9375rem var(--font-ui); color: var(--fg); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-sunk); }
.menu-panel .small { padding: 6px 12px 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-panel form { margin: 0; }
@media (max-width: 720px) {
  details.menu { display: block; order: 3; }
  details.menu .menu-btn { display: grid; }
  details.menu .menu-panel { left: auto; right: 0; }
  details.who { display: none; }
}

/* ---------- Seitenteile ---------- */
.busy-wrap { max-width: 640px; margin: 24px auto 0; }
.note + .note, .note + .note-act, .note-act + .note-act, .note-act + .note { margin-top: 12px; }
.page > .note, .page > .note-act { margin-bottom: 12px; }
.note-ok svg { color: var(--ok-fg); }
.is-err { color: var(--err-fg); font-weight: 700; }
.table td.txt { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty { display: grid; gap: 10px; justify-items: start; padding: var(--s-6); }
.empty p { margin: 0; }

/* ---------- Export-Dateien ---------- */
.files-dl { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); }
.files-dl a { color: var(--papier); text-underline-offset: 3px; font-weight: 600; }

/* ---------- Formulare ---------- */
.select { appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m4.5 7 4.5 4.5L13.5 7' stroke='%231A1A1A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
fieldset { margin: 0; min-width: 0; }
fieldset legend { padding: 0 6px; margin-left: -6px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kont-form { display: grid; gap: 16px; justify-items: start; }
.kont-form > fieldset { width: 100%; }
.kont-acc legend.konto-name { font-family: var(--font-display); font-size: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-start; }
.check { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; margin: 18px 0 8px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--tanne); }
.mandant { display: grid; gap: 8px; }
.mandant + .mandant { margin-top: 16px; }
.mandant .form-actions { margin-top: 8px; }
.kont-table td { padding-top: 6px; padding-bottom: 6px; }
.input-s { min-height: 40px; width: 7.5ch; padding: 0 8px; }
.konto-name-s { font-family: var(--font-display); font-size: 1.25rem; white-space: nowrap; }
.settings .sec:first-of-type { margin-top: 8px; }
@media (max-width: 900px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .grid-3, .form-grid { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Verlauf ---------- */
.verlauf .row-link { font-family: var(--font-display); font-size: 1.25rem; color: var(--fg); text-underline-offset: 4px; white-space: nowrap; }
.verlauf td.txt { max-width: 24ch; }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; }
.login-box { width: min(100%, 420px); display: grid; gap: 22px; }
.login-box .h1 { margin: 12px 0 0; }
.stack-form { display: grid; gap: 16px; }
.stack-form .btn { justify-self: start; }

/* Legende als Kartenüberschrift statt auf dem Rahmen */
.kont-form fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; }
.kont-form fieldset > legend + * { clear: both; }

/* Seitenköpfe ohne Kennzahlen */
.head-plain { margin-bottom: 28px; }
.head-plain .h1 { max-width: none; }
.head-plain .head-actions { width: auto; }
.settings .sec:first-of-type { margin-top: 24px; }

/* ---------- Warteschlange auf der Startseite (Schritt 4) ---------- */
.queue {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  background: var(--surface); border: 1.5px solid var(--tinte); border-radius: 10px; box-shadow: 0 4px 0 var(--tinte);
}
.queue[hidden] { display: none; }
.q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 22px 12px; border-bottom: 1px dashed var(--tinte-20); }
.q-title { margin: 0; font: 400 1.5rem/1 var(--font-display); letter-spacing: -0.01em; }
.q-count { font-size: var(--fs-tiny); font-weight: 600; color: var(--fg-muted); font-variant-numeric: tabular-nums; text-align: right; }
.q-count em { font-style: normal; color: var(--err-fg); }
.q-add { display: none; }
.q-head .q-count { margin-left: auto; }
.queue::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 48px; border-radius: 0 0 9px 9px; pointer-events: none;
  background: linear-gradient(transparent, var(--surface) 85%); opacity: 0; transition: opacity var(--t-base); }
.queue.is-overflow::after { opacity: 1; }
.queue::after { bottom: 46px; }
.q-list { scrollbar-width: thin; scrollbar-color: var(--tinte-20) transparent; }
.q-row[data-state="wait"] .q-state { color: var(--fg-subtle); font-weight: 500; }
.q-row[data-state="wait"] .q-ico { color: var(--tinte-20); }
.q-row[data-state="wait"] .q-bar { background: transparent; border-top: 1px dashed var(--line-soft); }
.q-dl { font-size: var(--fs-small); font-weight: 700; color: var(--tanne); text-underline-offset: 3px; white-space: nowrap; position: relative; z-index: 1; }
.q-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.q-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 22px 12px; border-top: 1px solid var(--line-soft); }
.q-trust { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-tiny); color: var(--fg-muted); }
.q-trust svg { width: 14px; height: 14px; flex: none; color: var(--tanne); }
.q-all { font-size: var(--fs-small); font-weight: 700; color: var(--fg); text-underline-offset: 3px; }
.q-all[hidden] { display: none; }

.q-row { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 14px 22px 16px; }
.q-row + .q-row { border-top: 1px solid var(--line-soft); }
.q-ico { position: relative; width: 30px; height: 34px; color: var(--tinte-55); display: grid; place-items: center; }
.q-ico > svg:first-child { width: 22px; height: 26px; transition: opacity var(--t-base); }
.q-ico .q-ok, .q-ico .q-x { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; padding: 6px; border-radius: 50%; opacity: 0; transform: scale(.4); transition: opacity var(--t-fast), transform var(--t-base) var(--ease-spring); }
.q-ico .q-ok { background: var(--tanne); color: var(--papier); }
.q-ico .q-x { background: var(--siegellack); color: var(--papier); }
.q-row[data-state="ok"] .q-ico > svg:first-child, .q-row[data-state="warn"] .q-ico > svg:first-child, .q-row[data-state="err"] .q-ico > svg:first-child { opacity: 0; }
.q-row[data-state="ok"] .q-ok, .q-row[data-state="warn"] .q-ok { opacity: 1; transform: none; }
.q-row[data-state="warn"] .q-ok { background: var(--bernstein); }
.q-row[data-state="err"] .q-x { opacity: 1; transform: none; }
.q-row[data-state="run"] .q-ico::after, .q-row[data-state="upload"] .q-ico::after {
  content: ""; position: absolute; right: -3px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--tinte); border-top-color: transparent; background: var(--surface); animation: spin .8s linear infinite;
}
.q-main { display: grid; gap: 2px; min-width: 0; }
.q-name { font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-meta { font-size: var(--fs-tiny); color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.q-meta b { color: var(--fg); font-weight: 600; }
.q-meta .nw { white-space: nowrap; }
.q-msg { grid-column: 2 / -1; font-size: var(--fs-small); line-height: 1.4; margin-top: 2px; max-width: 46ch; }
.q-msg:empty { display: none; }
.q-row[data-state="err"] .q-msg { color: var(--err-fg); }
.q-row[data-state="warn"] .q-msg { color: var(--warn-fg); }
.q-side { display: grid; justify-items: end; gap: 6px; text-align: right; padding-top: 1px; }
.q-state { font-size: var(--fs-small); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-muted); }
.q-row[data-state="ok"] .q-state { color: var(--tanne); }
.q-row[data-state="warn"] .q-state { color: var(--warn-fg); }
.q-row[data-state="err"] .q-state { color: var(--err-fg); }
.q-row[data-state="ok"] .q-state mark { background: linear-gradient(transparent 18%, var(--flieder) 18%, var(--flieder) 88%, transparent 88%); color: var(--tanne); padding: 0 4px; }
.q-open { font-size: var(--fs-small); font-weight: 700; color: var(--fg); text-underline-offset: 3px; white-space: nowrap; }
.q-open[hidden] { display: none; }
.q-open::after { content: ""; position: absolute; inset: 0; z-index: 0; }
@media (hover: hover) { .q-row:has(.q-open:not([hidden])):hover { background: var(--surface-sunk); } }
.q-open:focus-visible { outline: none; }
.q-row:has(.q-open:focus-visible) { box-shadow: inset 0 0 0 2px var(--tinte); }
.q-bar { position: absolute; left: 66px; right: 22px; bottom: 0; height: 2px; background: var(--line-soft); overflow: hidden; opacity: 1; transition: opacity var(--t-slow) .4s; }
.q-bar i { display: block; height: 100%; width: 0; background: var(--tanne); transition: width .6s var(--ease-out); }
.q-row[data-state="ok"] .q-bar, .q-row[data-state="warn"] .q-bar, .q-row[data-state="err"] .q-bar { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .q-row { animation: fade .35s var(--ease-out) both; }
  .q-row[data-state="run"] .q-bar i { background-image: linear-gradient(90deg, var(--tanne) 0 60%, var(--tanne-hell) 80%, var(--tanne) 100%); background-size: 200% 100%; animation: sheen 1.4s linear infinite; }
}
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Desktop: Warteschlange liegt genau dort, wo der Kassenzettel lag. Seite springt nicht. */
@media (min-width: 981px) {
  .stage { position: relative; }
  .stage .queue { position: absolute; right: 0; width: 450px; }
  .stage.is-queue .sig { visibility: hidden; }
  .stage.is-queue .sig > * { animation: none; }
}
/* Mobil und Tablet: als Blatt von unten, überlagert statt zu schieben */
@media (max-width: 980px) {
  .queue { position: fixed; left: 0; right: 0; bottom: 0; max-height: min(66dvh, 560px); z-index: 30; border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -12px 40px rgba(26,26,26,.16); padding-bottom: env(safe-area-inset-bottom); }
  body:has(.queue:not([hidden])) main { padding-bottom: 50dvh; }
  .q-head { padding: 12px 14px 10px 18px; align-items: center; }
  .q-add { display: inline-flex; min-height: 36px !important; padding: 0 12px; margin-left: auto; }
  .q-head { flex-wrap: wrap; row-gap: 4px; }
  .q-head .q-count { order: 3; width: 100%; margin-left: 0; text-align: left; }
  .q-row { padding: 12px 18px 14px; gap: 2px 12px; }
  .q-bar { left: 60px; right: 18px; }
  .q-title { font-size: 1.25rem; }
  @media (prefers-reduced-motion: no-preference) { .queue:not([hidden]) { animation: sheet .35s var(--ease-out) both; } }
}
@keyframes sheet { from { transform: translateY(24px); opacity: 0; } }

/* Ziehen irgendwo auf der Seite: Drop-Zone zeigt, wohin */
html.is-dragging .drop { background: var(--flieder); }

/* ---------- Prüfseite: Befund bei gesperrtem Export (Schritt 5) ---------- */
.befund { margin: 28px 0 8px; background: var(--surface); border: 1.5px solid var(--siegellack); border-radius: var(--r-md); box-shadow: 0 3px 0 var(--siegellack); overflow: hidden; }
.befund-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 24px; }
.befund-head .h3 { margin: 0; color: var(--err-fg); }
.befund-head p { margin: 4px 0 0; }
.befund .seal { width: 40px; height: 40px; border-radius: 50%; background: var(--siegellack); color: var(--papier); display: grid; place-items: center; }
.befund .seal svg { width: 22px; height: 22px; color: var(--papier); margin: 0; }
.befund-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.befund-list li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto auto; gap: 6px 24px; align-items: baseline; padding: 14px 24px; }
.befund-list li + li { border-top: 1px solid var(--line-soft); }
.b-konto { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
.b-was { font-weight: 600; }
.b-zahlen { display: flex; gap: 18px; font-size: var(--fs-small); color: var(--fg-muted); white-space: nowrap; }
.b-zahlen b { font-weight: 400; color: var(--fg); font-family: var(--font-display); font-size: 1.125rem; }
.b-diff { font-family: var(--font-display); font-size: 1.5rem; color: var(--err-fg); white-space: nowrap; justify-self: end; }
.b-note { grid-column: 3 / -1; font-size: var(--fs-small); color: var(--fg-muted); }
.befund-next { margin: 0; padding: 14px 24px 18px; background: var(--surface-sunk); color: var(--fg-muted); }
@media (max-width: 820px) {
  .befund-head { grid-template-columns: auto 1fr; padding: 18px; }
  .befund-head .btn { grid-column: 1 / -1; }
  .befund-list li { grid-template-columns: 1fr auto; padding: 12px 18px; }
  .b-konto { grid-column: 1 / -1; font-size: 1.125rem; }
  .b-was { grid-column: 1; }
  .b-diff { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
  .b-zahlen { grid-column: 1; flex-wrap: wrap; gap: 4px 14px; }
  .b-note { grid-column: 1 / -1; }
  .befund-next { padding: 12px 18px 16px; }
}

/* Konto-Karte mit Differenz */
.konto.is-failed { border-color: rgba(155, 44, 44, .35); }
.probe .sum.is-off dd { color: var(--err-fg); border-bottom-color: var(--err-fg); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.probe .sum.is-off dd { text-decoration: none; border-bottom-style: solid; border-bottom-width: 1.5px; }
.probe .vs dt, .probe .vs dd { color: var(--fg-muted); }
.probe .gap dt { color: var(--err-fg); font-weight: 600; }
.probe .gap dd { color: var(--err-fg); font-size: 1.375rem; }
.saldo.is-off { background: var(--err-bg, #F7E3E1); }
.saldo.is-off .op { color: var(--err-fg); }
.b-was { white-space: nowrap; }
.konten .konto { display: flex; flex-direction: column; }
.konten .konto .konto-foot { margin-top: auto; }
.verdict { margin-top: 22px; flex-wrap: wrap; }
.verdict .muted { font-weight: 500; color: var(--fg-muted); }
@media (min-width: 721px) { .facts { grid-template-columns: repeat(5, auto); } }
.r-ok.verdict { animation: none; }
.b-auch { grid-column: 2 / -1; font-size: var(--fs-tiny); color: var(--fg-muted); }
@media (max-width: 820px) { .b-auch { grid-column: 1 / -1; } }
.hinweise { margin-top: 28px; display: grid; gap: 10px; }
.hinweise .label { margin: 0; }
.hinweise .note-act + .note-act { margin-top: 0; }
.note-act.is-strong { border-color: var(--bernstein); box-shadow: 0 2px 0 var(--bernstein); }
.kontierung .total-row { border-top: 1.5px solid var(--tinte); margin-top: 4px; padding-top: 10px; }
.kont-note { margin: 10px 0 0; line-height: 1.45; }
@media (max-width: 720px) {
  .acc-body .table th, .acc-body .table td { padding-left: 6px; padding-right: 6px; font-size: .8125rem; }
  .acc-body .table td.num { font-size: .9375rem; }
  .table.preview th:nth-child(3), .table.preview td:nth-child(3), .table.preview th:nth-child(5), .table.preview td:nth-child(5) { display: none; }
}
.page > .note-act.is-strong { margin: 24px 0 4px; }
.acc-body.is-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.facts + .note, .head + .note { margin-top: 24px; }
.page > .note { margin-top: 24px; }
@media (max-width: 720px) {
  .acc-body .table th:nth-child(3), .acc-body .table td:nth-child(3) { display: none; }
}
.verdict .muted { white-space: nowrap; }
@media (max-width: 720px) {
  .facts div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .facts div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--line); }
  .befund-head { align-items: start; }
}

/* ---------- Schritt 6: Verlauf-Aktionen, Einstellungen ---------- */
.v-actions { white-space: nowrap; text-align: right; }
.v-actions > a { font-size: var(--fs-small); font-weight: 600; color: var(--fg); text-underline-offset: 3px; margin-left: 12px; }
.v-del { display: inline-block; position: relative; margin-left: 12px; text-align: left; }
.v-del > summary { list-style: none; cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--err-fg); }
.v-del > summary::-webkit-details-marker { display: none; }
.v-del .menu-panel { width: 260px; white-space: normal; }
.v-del .menu-panel .small { border: 0; padding: 4px 12px 6px; color: var(--fg-muted); }
.v-del-go { color: var(--err-fg) !important; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.defaults { grid-column: 1 / -1; border: 0; padding: 8px 0 0; display: grid; gap: 10px; }
.defaults legend { margin-bottom: 8px; }
.k-end { white-space: nowrap; }
.k-rm { background: none; border: 0; padding: 4px 0 4px 10px; font: 600 var(--fs-tiny) var(--font-ui); color: var(--fg-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.k-rm:hover { color: var(--err-fg); }
@media (max-width: 720px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.defaults .hint { font-size: var(--fs-tiny); color: var(--fg-muted); }
@media (min-width: 1000px) { .table-wrap:has(.verlauf) { overflow: visible; } }

/* Status-Badges: einzeilig; gelöschte Prüfungen zeigen das damalige Ergebnis nur als Punktfarbe */
.badge { white-space: nowrap; }
.badge.dot-ok::before { background: var(--ok-fg); }
.badge.dot-err::before { background: var(--err-fg); }
.badge.dot-warn::before { background: var(--warn-fg); }