/* auftrag.dasdensch — Landing-CSS (11.09.2026): NUR die zwei seiteneigenen Bühnen-Mockups
   (Präfix ab-): PDF-Import (Bühne 02) und Rechnung (Bühne 03). Der Stundenzettel (Bühne 01)
   kommt aus der Bibliothek (ddl-mockups.css, .mk-visual-auftrag). Die Seite ist dunkel
   (html[data-stil=dunkel]), die Mockups sind bewusst helle Karten — Illustrationen, deshalb
   in px (Typo-SSOT). Presets (.zoom__item--pop|x) liefert ddl-buehne.css, die Einsatzpunkte
   (--ab) stehen im Inline-<style> der Seite. Farben: Olive (FARBEN.md, Projekt 08). */

/* ── Gemeinsam: helle Karte mit Olive-Schatten, Kopf im Farbverlauf des Bibliotheks-Zettels ── */
.ab-import, .ab-rechnung {
    width: min(88vw, 380px);
    background: #fff; color: #1d1d1f;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(63,98,18,0.30), 0 0 0 1px rgba(0,0,0,0.04);
    font-variant-numeric: tabular-nums;
}
.ab-kopf {
    background: linear-gradient(135deg, #1A2E05 0%, #3F6212 60%, #65A30D 100%);
    padding: 14px 20px; color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ab-kopf strong { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.ab-kopf span { font-size: 10px; font-weight: 600; padding: 3px 9px; border-radius: 980px; background: rgba(255,255,255,0.18); white-space: nowrap; }
.ab-tag {
    font-size: 10px; font-weight: 800; color: #3F6212;
    background: rgba(63,98,18,0.10); padding: 2px 7px; border-radius: 6px;
    min-width: 26px; text-align: center;
}
.ab-einsatz em, .ab-re-pos em { font-style: normal; font-weight: 700; color: #3F6212; margin-left: auto; }

/* ── Bühne 02: PDF-Import — Blatt links, drei gelesene Felder rechts ── */
.ab-import-body {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px;
    padding: 18px 20px 14px;
    perspective: 600px;      /* pop/x der Kinder braucht Tiefe */
}
.ab-pdf {
    position: relative; aspect-ratio: 1 / 1.3; border-radius: 8px; overflow: hidden;
    background: #f5f5f7; border: 1px solid rgba(0,0,0,0.06);
    padding: 28px 10px 10px; display: flex; flex-direction: column; gap: 6px;
}
.ab-pdf::before {         /* Eselsohr */
    content: ''; position: absolute; top: 0; right: 0; width: 18px; height: 18px;
    background: linear-gradient(225deg, #fff 50%, rgba(0,0,0,0.10) 50%);
    border-bottom-left-radius: 4px;
}
.ab-pdf-typ {
    position: absolute; top: 8px; left: 10px;
    font-size: 9px; font-weight: 800; letter-spacing: 0.04em; color: #fff;
    background: #dc2626; padding: 1px 5px; border-radius: 4px;
}
.ab-pdf-zeile { display: block; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.12); }
.ab-pdf-zeile--kurz { width: 60%; }
.ab-pdf-name { margin-top: auto; font-size: 9px; font-weight: 700; line-height: 1.25; color: #6e6e73; overflow-wrap: anywhere; }
.ab-felder { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ab-feld {
    display: flex; flex-direction: column;
    padding: 6px 10px; border-radius: 10px;
    background: #F7FEE7; border: 1px solid rgba(63,98,18,0.30);
}
.ab-feld-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6e6e73; }
.ab-feld-wert { font-size: 13px; font-weight: 700; }
.ab-pille {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; color: #3F6212;
    background: rgba(63,98,18,0.10); padding: 3px 9px; border-radius: 980px;
}
.ab-pille i, .ab-re-versand i { width: 6px; height: 6px; border-radius: 50%; background: #65A30D; flex: none; }
.ab-einsatz {
    margin: 0 20px 16px; padding: 9px 12px; border-radius: 10px; background: #f5f5f7;
    font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}

/* ── Bühne 03: Rechnung — Positionen aus dem Zettel, Summe, Versand, Status ── */
.ab-re-posten { padding: 10px 20px 4px; perspective: 600px; }
.ab-re-pos {
    padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.ab-re-summe {
    margin: 6px 20px 0; padding: 10px 0; border-top: 2px solid #1d1d1f;
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.ab-re-summe span { font-size: 10px; font-weight: 600; color: #6e6e73; }
.ab-re-summe strong { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.ab-re-versand { margin: 4px 20px 0; font-size: 10px; font-weight: 600; color: #6e6e73; display: flex; align-items: center; gap: 6px; }
.ab-re-fuss { padding: 12px 20px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ab-re-marke { font-size: 12px; color: #86868b; }
.ab-re-marke b { font-weight: 800; color: #3F6212; }
/* Status-Pille als VERWANDLUNG (Regel 11): „offen" und „bezahlt" in EINER Rasterzelle,
   überblendet aus --p der Bühne ab dem Einsatzpunkt --ab (Beat 3). Kein zoom__item —
   außerhalb einer Bühne, in noscript und bei Reduced Motion (--p:1) steht „bezahlt". */
.ab-re-status { display: grid; --ab-o: 1; }
.zoom .ab-re-status { --ab-o: clamp(0, calc((var(--p) - var(--ab, 0.72)) / 0.08), 1); }
.ab-re-status > span { grid-area: 1 / 1; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 980px; text-align: center; }
.ab-re-status-offen { background: rgba(0,0,0,0.06); color: #6e6e73; opacity: calc(1 - var(--ab-o)); }
.ab-re-status-bezahlt { background: #ecfccb; color: #3F6212; opacity: var(--ab-o); transform: scale(calc(0.85 + 0.15 * var(--ab-o))); }

/* Schmal: die 1fr-Zeile der Bühne gibt den Rahmen vor (--mz kommt aus ddl-mockups.css) */
@media (max-width: 56.24rem) { .ab-import, .ab-rechnung { width: 100%; max-width: 380px; } }