/* ==============================================
   V-Geld-Buddy — Bavaria Entertainment
   Tool-spezifisches CSS. Palette, Tokens und Pico-Overrides kommen aus
   dem zentralen Tinte-Theme (pico -> css/bavaria-theme.css ->
   css/tinte-base.css -> diese Datei). Hier nur noch v-geld-buddy-eigene
   Komponenten; Chrome, Tabs, Footer, Typo, Flash, Drop-Zone-Pro,
   Settings-Card, Upload-CTA, Page-Stage, Prose und Buttons werden von
   tinte-base.css geliefert (BENT-1372).
   ============================================== */

/* --- Tool-spezifische Zusatz-Tokens (vom gemeinsamen Theme NICHT geliefert) --- */
:root {
    /* JetBrains Mono fuer Code/Belegnummern/Timecodes — tool-eigene Schrift */
    --f-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Dunkleres Teal fuer Hover-/Active-Flaechen (deckt sich mit dem
       --pico-primary-hover des Theme im Light-Mode). */
    --t-teal-dark: #00566b;

    /* --- Legacy --be-*-Aliase auf die --t-*-Tokens des Tinte-Theme --- */
    --be-teal:          var(--t-teal);
    --be-teal-hover:    var(--t-teal-dark);
    --be-teal-focus:    var(--t-teal-hi-tint);
    --be-header-bg:     var(--t-card);
    --be-footer-bg:     var(--t-card);
    --be-card-bg:       var(--t-card);
    --be-card-border:   var(--t-rule);
    --be-body-bg:       var(--t-bg);
    --be-text:          var(--t-ink);
    --be-text-muted:    var(--t-muted);
    --be-badge-green:   var(--t-green);
    --be-badge-green-bg:var(--t-green-tint);
    --be-badge-yellow:  var(--t-amber);
    --be-badge-yellow-bg:var(--t-amber-tint);
    --be-badge-red:     var(--t-red);
    --be-badge-red-bg:  var(--t-red-tint);
    --be-radius:        8px;
}

/* Im Dunkelmodus folgt das Hover-Teal dem helleren Akzent (analog Theme). */
:root[data-theme="dark"] {
    --t-teal-dark: var(--t-teal-light);
}

/* =====================================================
   LOGIN-PAGE (Direction A)
   ===================================================== */

.login-body {
    background: var(--t-bg);
    color: var(--t-ink);
    font-family: var(--f-sans);
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}
.login-frame {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.login-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}
.login-wordmark {
    font-family: var(--f-serif);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--t-ink);
    margin-bottom: 4px;
    text-transform: none;
}
.login-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 32px;
    margin: 0;
}
.login-headline {
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 8px;
    font-weight: 500;
    text-transform: none;
}
.login-sub {
    font-size: 14px;
    color: var(--t-ink-soft);
    line-height: 1.55;
    margin: 0 0 20px;
}
.login-error {
    background: var(--t-red-tint);
    color: var(--t-red);
    border-left: 3px solid var(--t-red);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 12px;
}
.login-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--t-ink);
    letter-spacing: -0.005em;
    margin: 4px 0 -2px;
}
.login-form input[type="password"] {
    padding: 10px 14px;
    border: 1px solid var(--t-rule);
    border-radius: 8px;
    font-family: var(--f-sans);
    font-size: 14px;
    background: var(--t-card);
    color: var(--t-ink);
    margin-bottom: 8px;
}
.login-form input[type="password"]:focus {
    border-color: var(--t-teal-hi);
    outline: none;
}
.login-cta {
    width: 100%;
    background: var(--t-teal);
    border: 1px solid var(--t-teal);
    color: #fff;
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.login-cta:hover { background: #155561; border-color: #155561; }
.login-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    color: var(--t-muted);
}
.login-footer a {
    color: var(--t-muted);
    text-decoration: none;
}
.login-footer a:hover { color: var(--t-teal); }

/* ========================================================
   V-GELD-BUDDY — projektspezifische Komponenten
   ======================================================== */

/* BENT-549: Inbox-Zähler — kleine Subheadline über der run-list, die KF/ZB
   auf einen Blick zeigt, wie viele Abrechnungen zur Prüfung/Freigabe warten. */
.inbox-count {
    font-family: var(--f-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--t-muted);
    margin: 0 0 12px;
    letter-spacing: 0.02em;
}

/* Run-Liste auf der Startseite */
.run-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.run-list__item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 16px;
    align-items: center;
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 10px;
    padding: 14px 18px;
    transition: border-color .15s, transform .15s;
}
.run-list__item:hover {
    border-color: var(--t-teal-soft);
    transform: translateY(-1px);
}
.run-list__title {
    font-family: var(--f-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--t-ink);
    margin: 0;
}
.run-list__meta {
    color: var(--t-muted);
    font-size: 12px;
    font-family: var(--f-mono);
    margin: 2px 0 0;
}
.run-list__sum {
    font-family: var(--f-mono);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--t-ink-soft);
}

/* BENT-541: Status-Stack (Badge + Handlungs-Hinweis) in der Listenzeile,
   damit Empfänger:innen direkt sehen, dass Status ``returned`` Action
   erfordert (Workflow-Sackgasse-Fix). */
.run-list__status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.run-list__action-hint {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--t-red);
}
.run-list__action-hint--muted {
    color: var(--t-muted);
    font-weight: 500;
}

/* Status-Pills für Workflow */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--f-sans);
    white-space: nowrap;
}
.status-badge--draft       { background: var(--t-bg);          color: var(--t-muted);    border: 1px solid var(--t-rule); }
.status-badge--in-review   { background: var(--t-amber-tint);  color: var(--t-amber);    }
.status-badge--returned    { background: var(--t-red-tint);    color: var(--t-red);      }
.status-badge--approved-cf { background: var(--t-teal-tint);   color: var(--t-teal);     }
.status-badge--released    { background: var(--t-green-tint);  color: var(--t-green);    }
.status-badge--exported    { background: var(--t-bg);          color: var(--t-ink-soft); border: 1px solid var(--t-rule); }
/* BENT-558: archiviertes Projekt (GoBD-Soft-Delete) — gedämpft, kein Alarm. */
.status-badge--archived    { background: var(--t-bg);          color: var(--t-muted);    border: 1px solid var(--t-rule); }
/* BENT-521: Große Variante für Beleg-Karten-Sidebar — prominenter, mit Icon-Slot. */
.status-badge--lg {
    padding: 6px 14px;
    font-size: 12px;
    gap: 8px;
}
.status-badge__icon {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
}

/* BENT-494/BENT-924: Run-Badge. Die Typ-Unterscheidung (Zwischen-/End-
   abrechnung) ist entfallen — `--nr` ist die neutrale Nummern-Variante
   (Startseite), `--final` bleibt für das Legacy-„geschlossen"-Badge in
   der Projekt-Übersicht. */
.run-typ-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--f-sans);
    white-space: nowrap;
    margin-left: 6px;
    vertical-align: middle;
}
.run-typ-badge--nr      { background: var(--t-teal-tint); color: var(--t-teal); }
.run-typ-badge--final   { background: var(--t-green-tint); color: var(--t-green); }

/* BENT-494: Vorschuss-Saldo-Grid in der Projekt-Übersicht */
.saldo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap: var(--space-md);
    margin-block: var(--space-md);
}
.saldo-grid > div {
    background: var(--t-bg);
    border: 1px solid var(--t-rule);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.saldo-label {
    font-size: 11px;
    color: var(--t-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.saldo-value {
    font-family: var(--f-mono);
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    color: var(--t-ink);
}
.saldo-value--positive { color: var(--t-teal); }
.saldo-value--negative { color: var(--t-red); }
.saldo-value--neutral  { color: var(--t-ink-soft); }

/* BENT-541: Next-Step-Block oberhalb der Beleg-Liste.
   Verhindert Workflow-Sackgasse auf `/runs/<id>` nach Einreichung —
   Empfänger:innen sehen jederzeit, was als nächstes passiert, wer dran
   ist und (bei `returned`) welche Handlung von ihnen erwartet wird.
   Vier Varianten: review (amber, „in Prüfung"), done (grün/teal, „nichts
   zu tun"), returned (rot, Call-to-Action). Strukturell `<article>` mit
   `role="status"` bzw. `role="alert"` für Screen-Reader. */
.next-step {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-left: 4px solid var(--t-rule);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 0 18px;
}
.next-step__title {
    font-family: var(--f-serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--t-ink);
    margin: 0 0 6px;
}
.next-step__body {
    color: var(--t-ink-soft);
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}
.next-step__body + .next-step__body {
    margin-top: 8px;
}
.next-step--review {
    background: var(--t-amber-tint);
    border-left-color: var(--t-amber);
}
.next-step--review .next-step__title { color: var(--t-amber); }
.next-step--done {
    background: var(--t-green-tint);
    border-left-color: var(--t-green);
}
.next-step--done .next-step__title { color: var(--t-green); }
.next-step--returned {
    background: var(--t-red-tint);
    border-left-color: var(--t-red);
}
.next-step--returned .next-step__title { color: var(--t-red); }

/* BENT-541: flash-warn war bisher im Template referenziert, aber im CSS
   nicht definiert. Wir behalten die Klasse weiterhin verfügbar (kann an
   anderer Stelle für ad-hoc Warnungen genutzt werden), den Rückläufer-
   Hinweis auf `/runs/<id>` rendert jetzt aber `.next-step--returned`. */
.flash-warn {
    background: var(--t-amber-tint);
    border-left: 4px solid var(--t-amber);
    color: var(--t-ink);
    padding: 14px 18px;
    border-radius: 10px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
}
.flash-warn strong { color: var(--t-amber); }

/* Drop-Zone für Beleg-Upload */
.dropzone {
    border: 2px dashed var(--t-rule);
    border-radius: 14px;
    padding: 56px 24px;
    text-align: center;
    background: var(--t-card);
    transition: border-color .15s, background .15s;
    cursor: pointer;
}
.dropzone:hover,
.dropzone.is-dragover {
    border-color: var(--t-teal);
    background: var(--t-teal-tint);
}
.dropzone__title {
    font-family: var(--f-serif);
    font-size: 22px;
    font-weight: 500;
    color: var(--t-ink);
    margin: 0 0 6px;
}
.dropzone__hint {
    color: var(--t-muted);
    font-size: 13px;
    margin: 0;
}
.dropzone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* Verifikations-Card pro Beleg */
.receipt-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-left: 3px solid var(--t-rule);
    border-radius: 10px;
    padding: 18px;
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: auto auto auto;
    gap: 22px;
    align-items: start;
    transition: border-color .15s;
}

/* BENT-921: Die ``__media``/``__work``-Wrapper sind im Normal-Zustand
   ``display: contents`` — ihre Kinder nehmen direkt am Karten-Grid teil,
   das Layout ist identisch zu vorher. Erst im Split-Modus (unten) werden
   sie echte Scroll-Spalten. Die BENT-534-Pinning-Selektoren laufen deshalb
   als Descendant- statt Child-Kombinator. */
.receipt-card__media,
.receipt-card__work { display: contents; }
/* BENT-534: Kinder der Beleg-Karte explizit auf Grid-Zellen
   festnageln, sonst verschiebt CSS-Auto-Flow Form/Sidebar in falsche
   Spalten, sobald optionale Items (page-badge, low-confidence) aktiv sind. */
.receipt-card .receipt-card__image-btn,
.receipt-card .receipt-card__placeholder { grid-column: 1; grid-row: 1; }
.receipt-card .receipt-card__page-badge { grid-column: 1; grid-row: 2; }
.receipt-card .receipt-card__low-confidence { grid-column: 1 / -1; grid-row: 3; }
.receipt-card .receipt-form,
.receipt-card .receipt-card__fields { grid-column: 2; grid-row: 1 / span 2; }
.receipt-card .receipt-card__sidebar { grid-column: 3; grid-row: 1 / span 2; }
/* Split-Bar existiert nur im Split-Modus */
.receipt-card .receipt-card__split-bar { display: none; }
.receipt-card--block      { border-left-color: var(--t-red); }
.receipt-card--warn       { border-left-color: var(--t-amber); }
.receipt-card--verified   { border-left-color: var(--t-green); }
.receipt-card--pending    { border-left-color: var(--t-faint); }

.receipt-card__image-btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: zoom-in;
    width: 100%;
    display: block;
}
.receipt-card__image {
    width: 100%;
    aspect-ratio: 3/4;
    background: var(--t-bg);
    border-radius: 8px;
    object-fit: cover;
    display: block;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 29, 34, 0.86);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border-radius: 6px;
    background: #fff;
    cursor: default;
}
.lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lightbox__close:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.5);
}
.receipt-card__placeholder {
    aspect-ratio: 3/4;
    background: var(--t-bg);
    border: 1px dashed var(--t-rule);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-faint);
    font-size: 12px;
}
/* BENT-493: Multi-Page-PDF — Seitenangabe als Badge unter dem Bild */
.receipt-card__page-badge {
    /* In der 3-spaltigen Beleg-Karte unter dem Bild halten — sonst
       belegt es eine eigene Grid-Spalte und schiebt die Felder weg. */
    grid-column: 1;
    margin-top: 4px;
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    background: var(--t-bg);
    border: 1px solid var(--t-rule);
    border-radius: 999px;
    justify-self: start;
    color: var(--t-faint);
}
/* BENT-1092: Multi-Beleg-Segmentierung — Badge + Unsicherheits-Banner */
.receipt-card__segment-badge {
    grid-column: 1;
    margin-top: 4px;
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.35);
    border-radius: 999px;
    justify-self: start;
    color: #2980b9;
}
.receipt-card__segment-warning {
    grid-column: 1 / -1;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(241, 196, 15, 0.12);
    border-left: 3px solid var(--t-amber);
    font-size: 12px;
    color: var(--t-amber);
    margin-top: 4px;
}
.receipt-card__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
}
.receipt-card__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.receipt-card__field label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-muted);
}
.receipt-card__field input:not([type=checkbox]):not([type=radio]),
.receipt-card__field select,
.receipt-card__field textarea {
    margin: 0;
    font-size: 14px;
    padding: 8px 10px;
}

/* BENT-518: Eigenbeleg-Toggle als Checkbox + Label nebeneinander, nicht
   gestapelt wie die anderen Felder. */
.eigenbeleg-toggle .eigenbeleg-toggle__label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--t-ink);
    font-weight: 500;
    cursor: pointer;
}
.eigenbeleg-toggle .eigenbeleg-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
}
.eigenbeleg-section {
    border-left: 3px solid var(--t-amber);
    padding-left: 14px;
    background: rgba(241, 196, 15, 0.06);
    border-radius: 4px;
    padding: 10px 14px;
}

/* BENT-524: Lohnsteuer-Toggle als Radio-Pair pro Beleg (Klebezettel-treu).
   Inline-Layout statt gestapelt, damit die zwei Optionen nebeneinander
   passen. Das conditional „Kopie an HO am"-Datumsfeld bekommt denselben
   Amber-Akzent wie der Eigenbeleg-Begründungsblock, weil beides
   Compliance-relevant ist. */
.lohnsteuer-toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 14px;
}
.lohnsteuer-toggle__legend {
    font-weight: 600;
    color: var(--t-ink);
    margin-right: 8px;
}
.lohnsteuer-toggle__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    color: var(--t-ink);
    text-transform: none;
    letter-spacing: 0;
}
.lohnsteuer-toggle__option .lohnsteuer-radio {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.lohnsteuer-section {
    border-left: 3px solid var(--t-amber);
    padding: 10px 14px;
    background: rgba(241, 196, 15, 0.06);
    border-radius: 4px;
}

/* KassenSichV-Checkbox analog zum Eigenbeleg-Toggle (Checkbox + Beschriftung +
   Hint). Ohne eigenes Layout erbte das Label den generischen Field-Label-Stil
   (uppercase, kein Flex); Beschriftung und <small>-Hint lagen dadurch im
   display:block-Label uebereinander. align-items:flex-start, weil die
   Beschriftung mehrzeilig umbricht; der Text-Wrapper stapelt Label + Hint. */
.bewirtung-section .kassensichv-toggle__label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--t-ink);
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 8px;
}
.bewirtung-section .kassensichv-checkbox {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    cursor: pointer;
}
.kassensichv-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* BENT-519: Visueller Hint, dass das Beleg-Bild klickbar ist. */
.receipt-card__image-btn { position: relative; }
.receipt-card__image-btn::after {
    content: "🔍 Klick zum Vergrößern";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    white-space: nowrap;
}
.receipt-card__image-btn:hover::after,
.receipt-card__image-btn:focus-visible::after { opacity: 1; }
.receipt-card__field--full {
    grid-column: 1 / -1;
}
/* BENT-555: ``::after``-Pseudo-Content wird von Screenreadern uneinheitlich
   vorgelesen (VoiceOver liest es, NVDA + JAWS variieren je nach Version).
   Wir rendern den Stern jetzt als echtes ``<span class="required-marker">``
   im Template-Markup (run_review.html via Macro / Helper) — das CSS hier
   stylt den Stern, wenn er existiert, und behaelt die Backward-Compat fuer
   Felder, die noch nicht aufs neue Markup migriert sind. */
.receipt-card__field--required label .required-marker {
    color: var(--t-red);
    margin-left: 4px;
}
/* Fallback fuer alte Felder ohne ``<span class="required-marker">``: das
   Pseudo-Element bleibt nur sichtbar, wenn kein echter Marker im Label
   existiert. ``:not(:has(...))`` ist seit Chrome 105 / Safari 15.4 /
   Firefox 121 stabil — fuer aeltere Browser fallen die Sterne weg, was
   akzeptabel ist (alle Pflichtfelder sind serverseitig validiert). */
.receipt-card__field--required label:not(:has(.required-marker))::after {
    content: " *";
    color: var(--t-red);
}
/* Screenreader-only Utility (Standard ``sr-only``-Pattern) — BENT-555.
   Wird vom Pflichtfeld-Stern via ``<span class="sr-only">Pflichtfeld</span>``
   genutzt, kann aber auch fuer kuenftige a11y-Texte verwendet werden. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.receipt-card__field--invalid input,
.receipt-card__field--invalid select,
.receipt-card__field--invalid textarea {
    border-color: var(--t-red);
}
.receipt-card__field--lowconfidence::after {
    content: "geringe Erkennungssicherheit — bitte prüfen";
    color: var(--t-amber);
    font-size: 11px;
    margin-top: 2px;
}

/* BENT-549: Einheitlicher Hilfetext-Style fuer <small>-Beschreibungen
   in <label>-Elementen — ersetzt die vorher mehrfach im Template
   wiederholten Inline-Styles (color/font-weight). --block macht
   die Hilfe optisch zur eigenen Zeile (z.B. Beleg-Positionen). */
.receipt-card__field-hint {
    color: var(--t-muted, var(--muted, #888));
    font-weight: normal;
}
.receipt-card__field-hint--block {
    display: block;
}

/* BENT-561: Finale Pos67-Vorschau am Kurzbeschreibungs-Feld. Dezent, aber
   sichtbar — die/der Empfaenger:in soll den real exportierten SAP-Text
   kontrollieren koennen (Transparenz statt Blockade). */
.sap-pos67-preview {
    display: block;
    margin-top: 0.35rem;
}
.sap-pos67-preview code {
    font-size: 0.85em;
    background: var(--t-code-bg, rgba(127, 127, 127, 0.12));
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    word-break: break-all;
}

/* BENT-549: Neutraler Text-Link fuer Audit-Trail (Pagination, "Zuruecksetzen").
   Vorher haengten diese Links an der `receipt-reparse`-Klasse, was semantisch
   falsch war — der JS-Handler reagiert nur auf Buttons mit data-receipt-id,
   die Klasse hatte ohnehin kein CSS, aber sie sah nach Beleg-Funktion aus. */
.audit-link {
    color: var(--t-teal);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.audit-link:hover,
.audit-link:focus-visible {
    color: var(--t-teal-hover, var(--t-teal));
    border-bottom-style: solid;
}

/* BENT-521: Sidebar in drei klar getrennte Blöcke — Status, Hinweise, Aktionen.
   Sections sind durch Hairline-Trenner separiert; alle Kinder block-level mit
   konsistentem 12px-Gap; Buttons vollbreit. */
.receipt-card__sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    width: 100%;
}
.receipt-card__sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.receipt-card__sidebar-section + .receipt-card__sidebar-section {
    padding-top: 14px;
    border-top: 1px solid var(--t-hairline);
}
.receipt-card__sidebar-section[hidden] { display: none; }
.receipt-card__sidebar-status {
    align-items: flex-start;
}
.receipt-card__sidebar-heading {
    margin: 0;
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--t-muted);
}
.receipt-card__sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.receipt-card__warnings {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    line-height: 1.4;
}
.receipt-card__warning--block { color: var(--t-red); font-weight: 500; }
.receipt-card__warning--warn  { color: var(--t-amber); }

/* BENT-545: Auto-Save-Indikator in der Beleg-Karten-Sidebar. JS toggelt
   .is-saving / .is-saved / .is-error; Default ist [hidden] aus dem Markup.
   Sanftes Fade-In/Out, damit der Indicator nicht aufpoppt. */
.receipt-card__save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
    transition: opacity 200ms ease-out;
}
.receipt-card__save-indicator[hidden] { display: none; }
.receipt-card__save-indicator.is-saving {
    background: var(--t-bg);
    color: var(--t-muted);
    border-color: var(--t-rule);
}
.receipt-card__save-indicator.is-saved {
    background: var(--t-green-tint);
    color: var(--t-green);
}
.receipt-card__save-indicator.is-error {
    background: var(--t-red-tint);
    color: var(--t-red);
    border-color: var(--t-red);
    /* Bei Fehler bewusst kantiger — soll auffallen. */
    border-radius: 6px;
    padding: 6px 10px;
    white-space: normal;
}

.receipt-card__low-confidence {
    grid-column: 1 / -1;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(241, 196, 15, 0.12);
    border-left: 3px solid var(--t-amber);
    font-size: 13px;
    line-height: 1.45;
    color: var(--t-amber);
}
.receipt-card__low-confidence strong { color: var(--t-amber); }

@media (max-width: 900px) {
    .receipt-card {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }
    .receipt-card__sidebar {
        align-items: stretch;
    }
    /* BENT-534: Mobile — Grid-Pinning der Desktop-Spalten zurücksetzen,
       Auto-Flow Row reicht bei nur einer Spalte. (BENT-921: Descendant-
       Kombinator wegen der display:contents-Wrapper __media/__work.) */
    .receipt-card .receipt-card__image-btn,
    .receipt-card .receipt-card__placeholder,
    .receipt-card .receipt-card__page-badge,
    .receipt-card .receipt-card__low-confidence,
    .receipt-card .receipt-form,
    .receipt-card .receipt-card__fields,
    .receipt-card .receipt-card__sidebar {
        grid-column: 1;
        grid-row: auto;
    }
}

/* BENT-553: Mobile-Responsiveness der Beleg-Karte. Der 900px-Stack oben
   sorgt bereits dafuer, dass Bild/Form/Sidebar uebereinander rendern.
   Unter 768 px kommen zusaetzlich:
   - Touch-Targets >= 44 px auf allen Inputs/Selects/Textareas/Buttons
     (Apple HIG + Material). Lightbox-Close-Button + Position-/Attendee-
     Remove-Buttons sind die kleinsten Problemzonen.
   - Felder-Grid (zweispaltig auf Desktop) wird einspaltig — Brutto-/
     Datum-Eingaben passen sonst nicht ohne Truncation.
   - Position-Row und Attendee-Row sind Desktop-only 4-Spalten-Grids; auf
     Mobile waere die Select-Spalte (220 px) breiter als das Viewport.
     Daher Auto-Flow Stack mit voller Breite je Feld.
   - Lightbox-Padding und Pinch-Zoom: `touch-action: pinch-zoom` auf dem
     Image, damit der Browser nicht den ganzen Lightbox-Container als
     Tap-Ziel sieht und Pinches frisst.
   - Sidebar-Heading + Save-Indicator wickeln statt abzuschneiden. */
@media (max-width: 768px) {
    .receipt-card {
        padding: 14px;
        gap: 16px;
    }
    .receipt-card__fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    /* Touch-Targets: alle Eingabefelder + Selects in der Beleg-Karte >= 44 px hoch.
       Bewusst nur in der Beleg-Karte, nicht global, damit dichte Admin-Tabellen
       (z.B. /admin/ktr) nicht aufgeblaeht werden. */
    .receipt-card input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
    .receipt-card select,
    .receipt-card textarea {
        min-height: 44px;
        font-size: 16px; /* >= 16 px verhindert iOS-Auto-Zoom beim Focus */
        padding: 10px 12px;
    }
    .receipt-card textarea {
        /* Textareas duerfen waeren, aber nicht zusammenstauchen unter 44 */
        min-height: 60px;
    }
    /* Buttons in der Beleg-Karte (Sidebar-Aktionen, Position-Add, Attendee-Add)
       auf >= 44 px Hoehe heben. cta-pill ist standardmaessig 10px 22px = ~38 px,
       knapp unter HIG. */
    .receipt-card .cta-pill {
        min-height: 44px;
        padding: 12px 22px;
    }
    .receipt-card .cta-pill--small {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 13px;
    }
    /* Position-Row + Attendee-Row vom 4-Spalten-Grid auf Stack. Remove-Buttons
       werden in eigener Zeile rechtsbuendig, damit Touch-Target gross genug ist. */
    .position-row,
    .attendee-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-bottom: 10px;
        border-bottom: 1px dashed var(--t-rule);
        margin-bottom: 10px;
    }
    .position-row:last-child,
    .attendee-row:last-child {
        border-bottom: 0;
    }
    .position-remove,
    .attendee-remove {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
        align-self: flex-end;
    }
    .position-add,
    .attendee-add {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 13px;
    }
    /* Lohnsteuer-Toggle Radios — Touch-Target am Label, nicht am winzigen Radio. */
    .lohnsteuer-toggle__option {
        min-height: 44px;
        padding: 6px 0;
        font-size: 15px;
    }
    .lohnsteuer-toggle__option .lohnsteuer-radio,
    .eigenbeleg-toggle .eigenbeleg-checkbox {
        width: 22px;
        height: 22px;
    }
    /* KTR-Combobox-Items: Treffer-Liste auf Mobile dicker tippbar. */
    .ktr-combobox__item {
        padding: 12px 14px;
        font-size: 15px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* Lightbox: Close-Button gross genug fuer Daumen, Pinch-Zoom auf dem Bild. */
    .lightbox {
        padding: 16px;
    }
    .lightbox__close {
        width: 44px;
        height: 44px;
        font-size: 26px;
        top: 12px;
        right: 12px;
    }
    .lightbox__img {
        touch-action: pinch-zoom;
    }
    /* Sidebar-Header (Status-Badge + Save-Indicator) duerfen wrappen, nicht
       abschneiden. Auf Desktop sind sie in einer Zeile, hier bewusst flex-wrap. */
    .receipt-card__sidebar-status {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .receipt-card__save-indicator {
        font-size: 12px;
        padding: 6px 12px;
    }
    /* Page-Badge nicht abschneiden bei Multi-Page-PDFs. */
    .receipt-card__page-badge {
        white-space: normal;
        word-break: break-word;
    }
    /* Hint-Bloecke (BENT-549): font-size 11px ist auf Mobile grenzwertig. */
    .receipt-card__field-hint {
        font-size: 12px;
        line-height: 1.45;
    }
    /* Eyebrow/Page-Lead-Stack auf der Review-Seite: zu enges letter-spacing
       schneidet auf 360 px in der naechsten Regel — generell luftiger. */
    .submit-row {
        flex-direction: column;
        align-items: stretch;
    }
    .submit-row .cta-pill {
        width: 100%;
    }
}

/* BENT-553: iPhone-SE (375 px) und Android-Standard (360 px) — minimaler
   Feinschliff, falls Bilder/Buttons sonst beim Klein-Viewport noch ueberlappen. */
@media (max-width: 480px) {
    .receipt-card {
        padding: 12px;
        border-radius: 8px;
    }
    .receipt-card__image {
        /* Bei extrem schmalen Phones das 3:4-Aspect-Ratio nicht maximieren, sonst
           dominiert das Bild den Viewport komplett — Cap auf 60vh. */
        max-height: 60vh;
        aspect-ratio: auto;
        object-fit: contain;
        background: var(--t-bg);
    }
    .receipt-card__image-btn::after {
        /* Klick-Hint-Bubble auf sehr schmalen Screens kuerzer. */
        content: "🔍 Vergrößern";
        font-size: 10px;
    }
    .lightbox__close {
        top: 8px;
        right: 8px;
    }
}

/* Bewirtungs-Teilnehmer-Liste (dynamisch) */
.attendee-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}
.attendee-row input { margin: 0; }
.attendee-remove {
    background: transparent;
    border: 1px solid var(--t-rule);
    color: var(--t-muted);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}
.attendee-remove:hover {
    border-color: var(--t-red);
    color: var(--t-red);
}

/* Beleg-Positionen mit USt-Kennzeichen V0/V1/V2 (BENT-491) */
.positions-section .positions-list { margin-top: 4px; }
.position-row {
    display: grid;
    grid-template-columns: 120px 220px 1fr auto;
    gap: 8px;
    margin-bottom: 6px;
    align-items: center;
}
.position-row input,
.position-row select { margin: 0; }
.position-remove {
    background: transparent;
    border: 1px solid var(--t-rule);
    color: var(--t-muted);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}
.position-remove:hover {
    border-color: var(--t-red);
    color: var(--t-red);
}
.position-add {
    margin-top: 6px;
    background: transparent;
    border: 1px dashed var(--t-rule);
    color: var(--t-muted);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
}
.position-add:hover {
    border-color: var(--t-accent, var(--t-fg));
    color: var(--t-fg);
}

/* Form-Card */
.form-card {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 24px;
    margin: 18px 0;
}
.form-card h2 {
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 0 14px;
}
.grid-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row--three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-row label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--t-muted);
}
.form-row input, .form-row select, .form-row textarea {
    margin: 0;
}
.checkbox-row {
    flex-direction: row;
    gap: 18px;
    flex-wrap: wrap;
    text-transform: none;
}
.checkbox-row label {
    text-transform: none;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    color: var(--t-ink);
    display: flex;
    align-items: center;
    gap: 6px;
}
.action-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.cta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--t-teal);
    color: #fff;
    border: 1px solid var(--t-teal);
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    /* BENT-605: Button-Label bricht NIE zeichenweise um. Strukturelle
       Schadensbegrenzung — in einem schmaleren nowrap-Flexcontainer
       schrumpften die Pillen sonst unter ihre Wortbreite und der Text
       zerfiel in „Ö/f/f/n/e/n". Greift in ALLEN .cta-pill-Kontexten;
       der BENT-592-Export-Block (flex:1 1 0 + min-width:12rem) und die
       Formular-Pills bleiben unverändert breit (nowrap verkleinert die
       berechnete Breite dort nicht — die Labels passen ohnehin in eine
       Zeile, geprüft). */
    white-space: nowrap;
}
.cta-pill:hover:not(:disabled) {
    background: var(--t-teal-hi);
    border-color: var(--t-teal-hi);
    color: #fff;
}
.cta-pill:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.cta-pill--primary {
    background: var(--t-teal-hi);
    border-color: var(--t-teal-hi);
}
/* BENT-521: Secondary-Pill — Outline auf neutralem Rule-Token, klare
   visuelle Stufe unter Primary (Teal-Fill). */
.cta-pill--secondary {
    background: transparent;
    color: var(--t-ink);
    border-color: var(--t-rule);
}
.cta-pill--secondary:hover:not(:disabled) {
    background: var(--t-bg);
    color: var(--t-ink);
    border-color: var(--t-ink-soft);
}
.cta-pill--danger {
    background: transparent;
    color: var(--t-red);
    border-color: var(--t-red);
}
.cta-pill--danger:hover:not(:disabled) {
    background: var(--t-red-tint);
    color: var(--t-red);
    border-color: var(--t-red);
}
/* BENT-558: dezenter Sekundär-Button (Toggle „Archivierte anzeigen",
   Reaktivieren) — unaufdringlicher als --secondary, kein roter Alarm. */
.cta-pill--ghost {
    background: transparent;
    color: var(--t-muted);
    border-color: var(--t-rule);
}
.cta-pill--ghost:hover:not(:disabled) {
    background: var(--t-bg);
    color: var(--t-ink);
    border-color: var(--t-ink-soft);
}
.cta-pill--small { padding: 6px 14px; font-size: 12px; }
/* BENT-521: Block-Variante für Sidebar-Buttons — volle Breite, mittig zentriert,
   nutzbar in Kombination mit --primary/--secondary/--danger. */
.cta-pill--block {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}
.empty-card {
    background: var(--t-card);
    border: 1px dashed var(--t-rule);
    border-radius: 12px;
    padding: 36px;
    text-align: center;
}
.empty-card__title {
    font-family: var(--f-serif);
    font-size: 22px;
    margin: 0 0 8px;
    text-transform: none;
    letter-spacing: 0;
}
/* BENT-554: Konsistenter Empty-State fuer Listen/Tabellen ohne Eintraege.
   Schwaecher gewichtet als .empty-card (das ist der grosse Hero-Empty-State
   z.B. fuer „noch gar nichts angelegt"); .empty-state ist die kompakte
   Inline-Variante in Tabellen-/Listen-Containern. */
.empty-state {
    color: var(--t-muted);
    background: var(--t-card);
    border: 1px dashed var(--t-rule);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}
.empty-state__title {
    color: var(--t-ink, #1f2933);
    font-weight: 600;
    margin: 0 0 4px;
    font-size: 15px;
}
.empty-state__hint {
    color: var(--t-muted);
    margin: 0;
}
.empty-state__cta {
    display: inline-block;
    margin-top: 12px;
}
/* Inline-Variante: schlanker, ohne Hero-Border, fuer Empty-Hinweise
   innerhalb einer Beleg-Karte (z.B. „keine USt-Position erkannt"). */
.empty-state--inline {
    padding: 8px 12px;
    border: 1px dashed var(--t-rule);
    border-radius: 6px;
    text-align: left;
    margin-bottom: 8px;
    font-size: 13px;
}
.page-lead { color: var(--t-muted); margin: 0 0 24px; }

/* .eyebrow kommt jetzt kanonisch aus tinte-base.css (BENT-1360, Drift-Absicherung).
   Der lokale Shadow (Teal-Farbe, engeres Tracking) ist entfernt, damit Theme-Updates
   das Eyebrow-Label erreichen. Standalone-<p class="eyebrow"> behalten den Pico-<p>-
   Abstand nach unten; das kanonische Label ist gedeckt-grau statt Teal. */

.subtab-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}
.subtab-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--t-rule);
    color: var(--t-muted);
    text-decoration: none;
    font-size: 12px;
}
.subtab-btn.active, .subtab-btn:hover {
    background: var(--t-teal-tint);
    color: var(--t-teal);
    border-color: var(--t-teal-soft);
}

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.receipt-table th, .receipt-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--t-hairline);
    text-align: left;
}
.receipt-table th {
    color: var(--t-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.receipt-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.receipt-table input, .receipt-table select { margin: 0; padding: 4px 6px; font-size: 13px; }
.inline-form { display: contents; }

/* Projekt-Pflege-Tabelle: feste Spalten-Breiten + identisches Box-Modell
   für Name/PSP-Element/Aktiv/Speichern, damit die Zeile in beiden Achsen
   symmetrisch bündig steht.
   Die Doppelklasse `.receipt-table.receipt-table--projects` hebt die
   Spezifität bewusst über Picos `select:not([multiple]):not([size])` —
   sonst gewinnt Pico, das <select> bleibt auf Intrinsic-Breite stehen und
   wirkt ggü. den 100%-breiten Inputs schmaler/linksbündig (Asymmetrie). */
.receipt-table--projects { table-layout: fixed; }
.receipt-table--projects col.col-name { width: 36%; }
.receipt-table--projects col.col-psp { width: 36%; }
.receipt-table--projects col.col-active { width: 14%; }
.receipt-table--projects col.col-action { width: 14%; }
.receipt-table.receipt-table--projects td input,
.receipt-table.receipt-table--projects td select,
.receipt-table.receipt-table--projects td .cta-pill {
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    margin: 0;
}
.receipt-table.receipt-table--projects td input,
.receipt-table.receipt-table--projects td select { padding: 6px 8px; }
/* BENT-558: Archiv-Aktionszeile sitzt unter der Projekt-Zeile (colspan),
   getrenntes Formular mit Bestätigungsdialog. Gedämpft + rechtsbündig,
   damit sie als sekundäre Aktion zur darüberliegenden Zeile lesbar ist. */
.receipt-table--projects tr.row--archive-action td {
    padding-top: 0;
    border-top: none;
    text-align: right;
}
.receipt-table--projects tr.row--archive-action .inline-form { display: block; }
.receipt-table--projects tr.row--archived td { color: var(--t-muted); }

/* BENT-1230: Mobile-Fix. Auf schmalen Viewports lief die Projekt-Pflege-
   Tabelle rechts aus der .form-card (24 px Padding je Seite) heraus, die
   „Speichern"-Schaltflaeche wurde abgeschnitten, die „Aktiv"-Ueberschrift
   brach um (gemeldet im Screenshot zu BENT-1230). Ursache: table-layout:
   fixed mit festen %-Spalten plus min-height: 38px-Controls passt nicht in
   ~342 px Innenbreite. Loesung: unter 560 px die Tabelle auf ein gestapeltes
   Karten-Layout umstellen: jede Zeile eine Karte, jede Zelle full-width mit
   vorangestelltem Label aus data-label. Kein Clipping, keine horizontale
   Scrollfalle, gleiche Funktion. */
@media (max-width: 560px) {
    .receipt-table--projects { table-layout: auto; }
    .receipt-table--projects thead { display: none; }
    .receipt-table--projects col { width: auto; }
    .receipt-table--projects tbody,
    .receipt-table--projects tr,
    .receipt-table--projects td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    /* Update-Zeile als abgesetzte Karte; die Archiv-Aktionszeile schliesst
       direkt darunter buendig an (kein doppelter Rahmen). */
    .receipt-table--projects tr:not(.row--archive-action) {
        border: 1px solid var(--t-rule);
        border-radius: 10px;
        padding: 6px 12px 12px;
        margin-top: 14px;
    }
    .receipt-table--projects td {
        border-bottom: none;
        padding: 8px 0 0;
    }
    /* Label je Zelle aus data-label; bei der reinen Aktions-Zelle (kein
       Label) entfaellt der Kopf. */
    .receipt-table--projects td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--t-muted);
        font-size: 11px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .receipt-table--projects tr.row--archive-action td {
        padding: 10px 0 0;
        text-align: left;
    }
    .receipt-table--projects tr.row--archive-action {
        margin: 0 0 4px;
    }

    /* BENT-1230 (Mobile-Fix): Abrechnungs-Liste auf der Startseite. Das
       Desktop-Grid `1fr auto auto` drueckt die Status-Pill als feste dritte
       Spalte an den rechten Rand; auf schmalen Viewports wirkt die uppercase-
       Pill „IN BEARBEITUNG" dadurch uebergross und gequetscht. Auf Mobile
       stapeln wir die Zeile: Titel/Meta volle Breite oben, darunter Summe +
       Status nebeneinander, und die Pill wird kompakter. */
    .run-list__item {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 16px;
    }
    .run-list__sum {
        font-size: 13px;
    }
    .run-list__status-stack {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .run-list__action-hint {
        font-size: 10px;
    }
    .status-badge {
        padding: 3px 8px;
        font-size: 10px;
        letter-spacing: 0.02em;
    }
}
/* Header-Zeile der Karte: Titel links, Archiv-Toggle rechts. */
.form-card__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.form-card__header-row h2 { margin: 0; }

/* Audit-Trail-Tabelle: feste Spalten-Breiten statt content-basiert, damit
   die fünf Spalten gleichmäßig verteilt und über alle Zeilen bündig stehen.
   Lange `<code>`-Aktionsstrings (run.transition.*) brechen um statt die
   Spalte aufzublähen; Diff-Summary/Chevron rechtsbündig im eigenen Slot. */
.receipt-table--audit { table-layout: fixed; }
.receipt-table--audit col.col-ts     { width: 13%; }
.receipt-table--audit col.col-actor  { width: 22%; }
.receipt-table--audit col.col-action { width: 27%; }
.receipt-table--audit col.col-target { width: 13%; }
.receipt-table--audit col.col-diff   { width: 25%; }
.receipt-table--audit td { vertical-align: top; overflow-wrap: anywhere; }
.receipt-table--audit td code { word-break: break-all; }

/* ── Einheitliches Spalten-Layout für alle .receipt-table-Tabellen (BENT-559)
   ────────────────────────────────────────────────────────────────────────
   Konsolidierungs-Entscheid: KEINE generische `.receipt-table {
   table-layout: fixed }`-Basisregel. Die acht Tabellen haben 3–9 Spalten
   mit stark unterschiedlichen Soll-Breiten; eine globale Regel ohne pro
   Tabelle passende Default-Cols würde mehr Regressionen erzeugen als die
   Modifier-Variante. Stattdessen: pro Tabelle ein `--<name>`-Modifier mit
   `table-layout: fixed` + `<colgroup>`, plus eine gemeinsame Safety-Regel,
   damit lange Strings (E-Mails, PSP-Element, KTR-Bezeichnung) umbrechen
   statt die Spalte zu sprengen — gilt auch für die Modifier-Tabellen.
   `export_pdf.html` ist bewusst ausgenommen: eigener WeasyPrint-<style>-
   Scope mit pt-Schriftgrößen; `table-layout: fixed` würde dort bei
   variabler Beleg-Zeilenzahl clippen. */
.receipt-table td { overflow-wrap: anywhere; }

/* Bestehende Projekte (admin_users.html): Name / E-Mail / Rollen */
.receipt-table--users { table-layout: fixed; }
.receipt-table--users col.col-name  { width: 30%; }
.receipt-table--users col.col-email { width: 42%; }
.receipt-table--users col.col-roles { width: 28%; }

/* KTR-Master + Diff-Tabellen (admin_ktr.html). Vier Tabellen-Varianten
   teilen denselben Modifier; pro Variante eine eigene Spaltenzahl, daher
   per Klasse am <table> gewählter colgroup-Satz. Code/HB-Nr. schmal,
   Bezeichnung breit (längstes Inhaltsfeld), Hauptbereich mittel. */
.receipt-table--ktr { table-layout: fixed; }
.receipt-table--ktr col.col-code   { width: 14%; }
.receipt-table--ktr col.col-bez    { width: 48%; }
.receipt-table--ktr col.col-hbnr   { width: 12%; }
.receipt-table--ktr col.col-hb     { width: 26%; }
.receipt-table--ktr col.col-before { width: 43%; }
.receipt-table--ktr col.col-after  { width: 43%; }

/* Run-Liste in der Projekt-Übersicht (project_detail.html) */
.receipt-table--runs { table-layout: fixed; }
/* BENT-605: col-actions zurück auf 12%. Das Export-Trio liegt nicht mehr
   ausgeklappt in der Zeile, sondern in einem eingeklappten „Export ▾"-
   Disclosure-Menü — die Spalte muss nur noch „Öffnen" + den schmalen
   Export-Trigger nebeneinander tragen. Die in BENT-595 abgezwackten
   Prozente gehen an typ/empf/zeitraum zurück (lesbarere Datenspalten).
   Summe bleibt exakt 100% (sonst kippt table-layout: fixed). */
/* BENT-924: col-typ entfallen (Typ-Unterscheidung abgeschafft) — die
   15% gehen an nr/empf/zeitraum/vorschuss/brutto. Summe exakt 100%. */
.receipt-table--runs col.col-nr        { width: 8%; }
.receipt-table--runs col.col-empf      { width: 24%; }
.receipt-table--runs col.col-zeitraum  { width: 22%; }
.receipt-table--runs col.col-vorschuss { width: 12%; }
.receipt-table--runs col.col-brutto    { width: 12%; }
.receipt-table--runs col.col-status    { width: 10%; }
.receipt-table--runs col.col-actions   { width: 12%; }

/* Kassenführungs-Sichtprüfung (kassenfuehrer_review.html) — 9 Spalten,
   System-ID + Duplikat-Hinweise prominent (Compliance-Zweitprüfung). */
.receipt-table--kf-review { table-layout: fixed; }
.receipt-table--kf-review col.col-nr      { width: 5%; }
.receipt-table--kf-review col.col-sysid   { width: 11%; }
.receipt-table--kf-review col.col-datum   { width: 9%; }
.receipt-table--kf-review col.col-vendor  { width: 16%; }
.receipt-table--kf-review col.col-ktr     { width: 13%; }
.receipt-table--kf-review col.col-brutto  { width: 9%; }
.receipt-table--kf-review col.col-anlass  { width: 14%; }
.receipt-table--kf-review col.col-dup     { width: 17%; }
.receipt-table--kf-review col.col-beleg   { width: 6%; }

/* Zeichnungsberechtigt-Freigabe (zb_review.html) — 7 Spalten */
.receipt-table--zb-review { table-layout: fixed; }
.receipt-table--zb-review col.col-nr     { width: 6%; }
.receipt-table--zb-review col.col-datum  { width: 11%; }
.receipt-table--zb-review col.col-vendor { width: 22%; }
.receipt-table--zb-review col.col-ktr    { width: 19%; }
.receipt-table--zb-review col.col-brutto { width: 11%; }
.receipt-table--zb-review col.col-anlass { width: 22%; }
.receipt-table--zb-review col.col-beleg  { width: 9%; }


.receipt-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.upload-progress {
    color: var(--t-muted);
    font-size: 13px;
    margin: 8px 0 0;
}

.submit-row {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* BENT-544: Hint unter dem disabled Submit-Button — erklaert,
   warum der Button nicht klickbar ist (statt erst Klick → Flash). */
.submit-row__hint {
    color: var(--t-muted);
    font-size: 13px;
    margin: 0;
    text-align: right;
    max-width: 460px;
}

/* BENT-539: Export-Sektion auf der Run-Review-Seite — drei Download-Buttons
   in klarer Hierarchie (SAP Primary, PDF + Excel Secondary). Übernimmt den
   Karten-Look der anderen Run-Bereiche (Card-Background, Hairline, Padding). */
.export-actions {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
}
.export-actions__title {
    font-family: var(--f-serif);
    font-size: 18px;
    margin: 0 0 6px;
    text-transform: none;
    letter-spacing: 0;
}
.export-actions__hint {
    color: var(--t-muted);
    font-size: 13px;
    margin: 0 0 14px;
}
.export-actions__hint code {
    font-family: var(--f-mono);
    font-size: 12px;
    background: var(--t-bg);
    padding: 1px 6px;
    border-radius: 4px;
}
/* BENT-592: Die drei Export-Buttons (SAP / PDF / Excel) sollen symmetrisch
   gleich breit nebeneinander stehen. `.cta-pill` ist inhaltsabhängig breit
   (inline-flex + padding) → ohne Verteilung drei verschieden breite Pillen.
   Lösung: gleiche Flex-Basis (`flex: 1 1 0` + `min-width`) auf die direkten
   Kinder, unabhängig vom Element-Typ (auch die disabled-`<button>`-Variante
   aus BENT-591). Fix in der geteilten Komponente — wirkt in run_review.html
   UND kassenfuehrer_review.html, kein Template-Zweitbau. */
.export-actions__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.export-actions__buttons > .cta-pill {
    flex: 1 1 0;
    /* Verhindert, dass ein langes Label (SAP-Importvorlage) den Flex-Item
       über die Gleichverteilung hinaus aufbläht. min-width hält die
       Symmetrie, lässt aber genug Platz, damit kein Label clippt. */
    min-width: 12rem;
}
/* Mobile: definierter Umbruch statt zufälligem flex-wrap — jeder Button
   nimmt die volle Breite, gestapelt, kein horizontales Overflow. */
@media (max-width: 560px) {
    .export-actions__buttons {
        flex-direction: column;
    }
    .export-actions__buttons > .cta-pill {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
    }
}
/* BENT-591: Hinweis, warum der SAP-Export gerade gesperrt ist (fehlende
   Pflichtdaten). Erscheint statt eines stillen HTML-as-xlsx-Downloads. */
.export-actions__block {
    color: var(--t-red);
    font-size: 13px;
    margin: 12px 0 0;
}

/* BENT-984: Prominenter Freigabe-Fortschritt über den Export-Buttons.
   Grün = alle Belege freigegeben (Export möglich), rot = noch ausstehend
   (Export gesperrt). */
/* BENT-1015: Belegsummen-Überblick als letzter Check vor dem Export. */
.export-summary {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--be-card-border);
    border-radius: var(--be-radius);
    background: var(--t-card);
}

.export-summary__title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--t-ink);
}

.export-summary__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
}

.export-summary__figure {
    display: flex;
    flex-direction: column;
}

.export-summary__figure dt {
    font-size: 12px;
    color: var(--t-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.export-summary__figure dd {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--t-ink);
}

.export-summary__open-hint {
    margin: 12px 0 6px;
    font-size: 14px;
    color: var(--t-red);
}

.export-summary__open-list {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
}

.export-summary__open-list li {
    margin: 3px 0;
}

.export-summary__all-ok {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--t-ink-soft);
}

.verify-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: var(--be-radius);
    font-size: 14px;
    font-weight: 500;
}

.verify-progress__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
}

.verify-progress--pending {
    color: var(--t-red);
    background: var(--t-red-tint);
    border-color: var(--t-red);
}

.verify-progress--pending .verify-progress__icon {
    background: var(--t-red);
}

.verify-progress--ok {
    color: var(--t-green);
    background: var(--t-green-tint);
    border-color: var(--t-green);
}

.verify-progress--ok .verify-progress__icon {
    background: var(--t-green);
}

/* BENT-539 / BENT-595 / BENT-605: Inline-Action-Group in der Run-Tabelle
   der Projekt-Übersicht.

   BENT-605 (echte Layout-Lösung, kein flex-Toggle mehr): Vier vollwertige
   Text-Pillen (Öffnen + SAP/PDF/Excel) passen physisch nicht nebeneinander
   in eine Tabellenspalte. `wrap` ↔ `nowrap` war kein Lösungsraum — beide
   Endzustände kaputt (chaotischer Umbruch bzw. zeichenweise zerquetschter
   Text). Lösung: nur „Öffnen" + ein kompaktes natives `<details>`-
   Aktionsmenü („Export ▾") stehen in der Zeile. Eingeklappt sind das zwei
   schmale Pillen — passt locker. Aufgeklappt fällt ein Popover mit den
   drei Export-Links darunter (genug Breite, kein Quetschen, kein
   Overflow). Kein JS — `<summary>` ist nativ fokussier-/tastaturbedienbar
   (a11y), und es bleibt bei der BENT-592-Button-Sprache. */
.run-row-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    /* Konstante Zeilenhöhe: „Öffnen" allein ist exakt so hoch wie mit dem
       Export-Menü daneben. */
    min-height: 30px;
}
/* Das Export-Disclosure: zusammengeklappt nur der Trigger-Pill. */
.run-row-actions__exports {
    position: relative;
}
.run-row-actions__exports > summary {
    /* Als .cta-pill cta-pill--small cta-pill--secondary klassifiziert (im
       Markup), hier nur Disclosure-spezifisches: Default-Marker weg, der
       Caret kommt aus dem Label-Text (▾). */
    list-style: none;
    user-select: none;
}
.run-row-actions__exports > summary::-webkit-details-marker {
    display: none;
}
.run-row-actions__exports > summary::marker {
    content: "";
}
/* Aufgeklapptes Popover: die drei Export-Links gestapelt, mit echter
   Breite (raus aus der engen Spalte) — absolut positioniert, damit die
   Tabellenzeile ihre Höhe nicht ändert und nichts die col-Breite sprengt. */
.run-row-actions__menu {
    position: absolute;
    right: 0;
    z-index: 20;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 9rem;
    padding: 8px;
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.run-row-actions__menu > .cta-pill {
    width: 100%;
    box-sizing: border-box;
}
/* Mobile / schmaler Viewport: identisches Muster — das Menü bleibt ein
   Overlay, nichts wrappt zeichenweise, kein horizontales Overflow. Auf
   sehr engen Screens öffnet das Popover linksbündig, damit es nicht aus
   dem Viewport rechts herausläuft. */
@media (max-width: 720px) {
    .run-row-actions__menu {
        right: auto;
        left: 0;
    }
}

.prose {
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 12px;
    padding: 28px;
    line-height: 1.6;
}
.prose h2 {
    text-transform: none;
    letter-spacing: 0;
    font-size: 16px;
    margin-top: 18px;
}
.prose ul, .prose ol { padding-left: 22px; }


/* KTR-Combobox (BENT-489) */
.ktr-combobox {
    position: relative;
}
.ktr-combobox__input {
    width: 100%;
}
.ktr-combobox__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--t-card);
    border: 1px solid var(--t-rule);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    max-height: 320px;
    overflow-y: auto;
    z-index: 30;
}
.ktr-combobox__item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}
.ktr-combobox__item:hover,
.ktr-combobox__item.is-active {
    background: var(--t-accent-soft, rgba(27,109,124,0.12));
}
.ktr-combobox__empty {
    padding: 10px 12px;
    color: var(--t-muted, #888);
    font-style: italic;
}

/* BENT-495: Duplikat-Warnung in der Beleg-Karte */
.duplicate-warning__box {
    border-left: 3px solid var(--t-amber, #b35a00);
    background: var(--t-amber-tint, rgba(179, 90, 0, 0.08));
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.92em;
}
.duplicate-warning__box strong {
    color: var(--t-amber, #b35a00);
}
.duplicate-hits {
    margin: 6px 0 8px;
    padding-left: 18px;
}
.duplicate-hit {
    margin: 2px 0;
    line-height: 1.4;
}
.duplicate-hit__source {
    font-weight: 600;
}
.duplicate-hit__status--released {
    color: var(--t-red, #b22);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85em;
}
.duplicate-hit__status {
    color: var(--t-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.85em;
}
.duplicate-actions {
    margin-top: 6px;
}
.duplicate-override-btn {
    background: transparent;
    border: 1px solid var(--t-amber, #b35a00);
    color: var(--t-amber, #b35a00);
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}
.duplicate-override-btn:hover {
    background: var(--t-amber-tint, rgba(179, 90, 0, 0.12));
}
.receipt-card__system-id code {
    font-size: 0.9em;
    background: var(--t-bg-soft, #eef1f0);
    padding: 1px 4px;
    border-radius: 2px;
}

/* BENT-560: Bewirtungs-Anlagen — Sektion + Beleg-Karten-Indikator */
.anlagen-section {
    margin: 24px 0;
    padding: 16px 18px;
    border: 1px solid var(--t-rule);
    border-radius: 6px;
    background: var(--t-amber-tint, #fbf3e6);
}
.anlagen-section__title { margin: 0 0 4px; font-size: 1.05rem; }
.anlagen-section__hint { margin: 0 0 12px; color: var(--t-muted); font-size: 0.9rem; }
.anlagen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.anlage-card {
    background: var(--t-bg, #fff);
    border: 1px solid var(--t-rule);
    border-radius: 6px;
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    justify-content: space-between;
}
.anlage-card--ambiguous { border-left: 3px solid var(--t-amber); }
.anlage-card--parked    { border-left: 3px solid var(--t-muted); }
.anlage-card--parsing   { border-left: 3px solid var(--t-faint); }
.anlage-card__file { font-weight: 600; display: block; margin: 4px 0; }
.anlage-card__fields { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0; }
.anlage-card__fields div { display: flex; gap: 6px; font-size: 0.88rem; }
.anlage-card__fields dt { color: var(--t-muted); margin: 0; }
.anlage-card__fields dd { margin: 0; font-weight: 500; }
.anlage-card__assign { display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.anlage-card__assign-label { font-size: 0.85rem; color: var(--t-ink-soft); }
.receipt-card__anlage-link {
    grid-column: 1 / -1;
    background: var(--t-teal-tint, rgba(27, 109, 124, 0.08));
    border: 1px solid var(--t-rule);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 0.88rem;
    margin-bottom: 8px;
}
.receipt-card__anlage-unlink { display: inline; }
.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--t-teal, #1b6d7c);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

/* ---------------------------------------------------------------------------
 * BENT-921: Splitscreen-Modus der Beleg-Karte (ersetzt die Beleg-Lightbox).
 *
 * Klick aufs Beleg-Bild togglet `.receipt-card--split` auf der Karte selbst:
 * die Karte wird ein Fixed-Overlay mit zwei Spalten — links das Bild
 * (zoombar via --split-zoom, scrollbar), rechts die unveraenderten
 * Formular-Felder + Sidebar. Kein DOM-Move: alle Event-Handler, Inline-Save,
 * Validierung und KTR-Combobox arbeiten weiter auf denselben Knoten.
 * Die __media/__work-Wrapper (display: contents im Normal-Zustand, siehe
 * oben) werden hier zu echten Scroll-Containern.
 *
 * Die Lightbox (#lightbox, z-index 200) bleibt fuer Bewirtungs-Anlagen
 * erhalten und liegt bewusst UEBER dem Split (z-index 150), damit eine
 * Anlagen-Vorschau aus dem Split heraus funktioniert.
 * ------------------------------------------------------------------------ */
body.split-open { overflow: hidden; }

.receipt-card--split {
    position: fixed;
    inset: 0;
    z-index: 150;
    margin: 0;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    /* border-left behaelt die State-Farbe (block/warn/verified/pending) */
    padding: 0;
    gap: 0;
    background: var(--t-card);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
}

.receipt-card--split .receipt-card__split-bar {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 1;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--t-rule);
    background: var(--t-card);
}
.receipt-card__split-title {
    font-size: 13px;
    color: var(--t-muted);
    margin-right: auto;
}
.receipt-card__split-zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.receipt-card__split-zoom button {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--t-rule);
    background: var(--t-bg);
    color: var(--t-ink);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.receipt-card__split-zoom button:hover {
    border-color: var(--t-faint);
}
.split-zoom-level {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--t-muted);
    min-width: 44px;
    text-align: center;
}

/* Linke Spalte: Bild-Pane — eigener Scroll-Container, Zoom via Custom
   Property (Prozent der Pane-Breite; Overflow scrollt). */
.receipt-card--split .receipt-card__media {
    display: block;
    grid-column: 1;
    grid-row: 2;
    overflow: auto;
    padding: 16px 20px;
    background: var(--t-bg);
}
.receipt-card--split .receipt-card__image-btn {
    cursor: zoom-in;
    width: 100%;
}
.receipt-card--split .receipt-card__image-btn::after { content: none; }
.receipt-card--split .receipt-card__image {
    width: calc(1% * var(--split-zoom, 100));
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
}
.receipt-card--split .receipt-card__page-badge {
    margin-top: 8px;
}

/* Rechte Spalte: Felder + Sidebar — ein gemeinsamer Scroll-Container. */
.receipt-card--split .receipt-card__work {
    display: block;
    grid-column: 2;
    grid-row: 2;
    overflow-y: auto;
    padding: 18px 20px;
}
.receipt-card--split .receipt-card__sidebar {
    margin-top: 20px;
    border-top: 1px solid var(--t-rule);
    padding-top: 16px;
}

/* Mobile (<900px): gestapelt — Bild oben (45vh, scroll-/zoombar), Felder
   darunter. BENT-553-Responsiveness der Karte bleibt unberuehrt, weil der
   Split-Modus ein eigener Zustand ist. */
@media (max-width: 900px) {
    .receipt-card--split {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 45vh) minmax(0, 1fr);
    }
    .receipt-card--split .receipt-card__media {
        grid-column: 1;
        grid-row: 2;
        border-bottom: 1px solid var(--t-rule);
    }
    .receipt-card--split .receipt-card__work {
        grid-column: 1;
        grid-row: 3;
    }
    .receipt-card--split .receipt-card__split-bar {
        flex-wrap: wrap;
        gap: 8px 14px;
    }
}