/* ============================================================
   DDL Mockups v1 — die sieben Produkt-Mockups als CSS (11.09.2026)
   ============================================================
   Bestell-Ticket (order), iPhone mit Margin-App (margin), Link-Karte
   (link), Deal-Karten (collabs), DJ-Oberfläche (q), Eintrittskarte
   (event), Stundenzettel (auftrag) — samt ihrer Bühnen-Choreografie
   (Einsatzpunkte --ab je Element, Mockup-Größe --mz je Fenster, Order-
   Bon „druckt sich"). Alle Klassen tragen das Präfix mk- (Kollisionen
   mit iphone-screen / active / primary in den Landing-CSS).

   SSOT: /densch-shared/ddl/ddl-mockups.css — keine Kopien.
   Markup: partials/mockups/<produkt>.php. Braucht ddl-buehne.css
   (Bühne, --p, --dir, .zoom__item-Presets). Die Produktklasse
   .showcase--<produkt> am Abschnitt liefert --marke/--wolke (FARBEN.md)
   und wählt Einsatzpunkte und Größen.
   ============================================================ */

/* ── Produktfarben (FARBEN.md): Wortmarke + Wolke. --akzent (Text auf dem
   Grund der Seite) setzt die Seite selbst — der dunkle Hub hell, Landings
   über --ddl-accent. ── */
.showcase--order   { --marke: #6B21A8; --wolke: rgba(107, 33, 168, 0.30); }
.showcase--margin  { --marke: #0E7490; --wolke: rgba(14, 116, 144, 0.30); }
.showcase--link    { --marke: #047857; --wolke: rgba(4, 120, 87, 0.28); }
.showcase--collabs { --marke: #B45309; --wolke: rgba(180, 83, 9, 0.26); }
.showcase--q       { --marke: #9D174D; --wolke: rgba(157, 23, 77, 0.30); }
.showcase--event   { --marke: #4338CA; --wolke: rgba(67, 56, 202, 0.30); }
.showcase--auftrag { --marke: #3F6212; --wolke: rgba(101, 163, 13, 0.22); }

/* ── iPhone Frame (Dynamic Island) ── */
.mk-iphone {
    width: 280px;
    height: 570px;
    background: #1d1d1f;
    border-radius: 48px;
    padding: 12px;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.1),
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 40px 100px rgba(0,0,0,0.6),
        0 10px 30px rgba(0,0,0,0.4),
        0 0 80px rgba(0,0,0,0.2);
}
/* Dynamic Island */
.mk-iphone-di {
    width: 90px; height: 26px;
    background: #000;
    border-radius: 20px;
    position: absolute; top: 22px; left: 50%; transform: translateX(-50%);
    z-index: 3;
}
.mk-iphone-screen {
    width: 100%; height: 100%;
    border-radius: 38px;
    overflow: hidden;
    display: flex; flex-direction: column;
}
.mk-iphone-home {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 4px; background: rgba(255,255,255,0.2);
    border-radius: 2px; z-index: 3;
}

/* ── App Screens ── */

/* ═══ denschLink: Floating Link Page ═══ */
.mk-visual-link {
    width: 280px;
    perspective: 600px;      /* tile-pop des Avatars braucht Tiefe */
    background: #fff;
    border-radius: 28px;
    padding: 36px 24px 28px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(4,120,87,0.15), 0 0 0 1px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
}
.mk-vl-avatar {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, #047857, #34d399);
    margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: #fff;
    box-shadow: 0 4px 20px rgba(4,120,87,0.25);
}
.mk-vl-name { font-size: 16px; font-weight: 700; color: #1d1d1f; margin-bottom: 4px; }
.mk-vl-bio { font-size: 11px; color: #86868b; margin-bottom: 20px; }
.mk-vl-links { display: flex; flex-direction: column; gap: 8px; perspective: 600px; }
.mk-vl-btn {
    padding: 13px 16px; border-radius: 14px; font-size: 13px; font-weight: 600;
    color: #1d1d1f; background: #f5f5f7; border: 1px solid rgba(0,0,0,0.06);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.mk-vl-btn.mk-primary { background: #047857; color: #fff; border-color: transparent; }
.mk-vl-btn-icon { font-size: 15px; }
.mk-vl-footer { margin-top: 20px; font-size: 9px; color: #c4c4c4; }
.mk-vl-footer b { color: #047857; }

/* ═══ denschCollabs: Stacked Deal Cards ═══ */
.mk-visual-collabs {
    width: 320px; position: relative; height: 420px;
    perspective: 800px;
}
.mk-vc-card {
    position: absolute; left: 0; right: 0;
    background: #fff; border-radius: 20px; padding: 20px 22px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    border-left: 4px solid;
}
.mk-vc-card:nth-child(1) { top: 0; z-index: 4; border-color: #22c55e; }
/* Versatz 100 px: die Karte ist 119 px hoch, bei 80 lagen die
   Kopfzeilen von Karte 2–4 unter der Vorgängerin (vorbestehend) */
.mk-vc-card:nth-child(2) { top: 100px; z-index: 3; border-color: #B45309; }
.mk-vc-card:nth-child(3) { top: 200px; z-index: 2; border-color: #6366f1; }
.mk-vc-card:nth-child(4) { top: 300px; z-index: 1; border-color: #06b6d4; }
.mk-vc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mk-vc-brand { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.mk-vc-amount { font-size: 16px; font-weight: 800; }
.mk-vc-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: 980px; background: #f5f5f7;
}
.mk-vc-dot { width: 6px; height: 6px; border-radius: 50%; }
.mk-vc-meta { font-size: 10px; color: #86868b; margin-top: 6px; }
/* Deal-Farben (vorher style=""-Attribute) */
.mk-vc-gruen { color: #22c55e; } .mk-vc-gruen-bg { background: #22c55e; }
.mk-vc-amber { color: #B45309; } .mk-vc-amber-bg { background: #B45309; }
.mk-vc-indigo { color: #6366f1; } .mk-vc-indigo-bg { background: #6366f1; }
.mk-vc-cyan { color: #06b6d4; } .mk-vc-cyan-bg { background: #06b6d4; }

/* ═══ denschQ: DJ Interface ═══ */
.mk-visual-q {
    width: 300px; background: #111; border-radius: 24px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(157,23,77,0.2), 0 0 0 1px rgba(255,255,255,0.06);
}
.mk-vq-now {
    background: linear-gradient(135deg, #9D174D 0%, #be185d 50%, #db2777 100%);
    padding: 28px 24px 20px; text-align: center; position: relative;
}
.mk-vq-now-label { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; }
.mk-vq-now-title { font-size: 20px; font-weight: 800; color: #fff; margin: 8px 0 4px; }
.mk-vq-now-artist { font-size: 13px; color: rgba(255,255,255,0.65); }
.mk-vq-bars {
    display: flex; align-items: flex-end; justify-content: center;
    gap: 3px; height: 32px; margin-top: 16px;
}
.mk-vq-bar {
    width: 4px; height: 32px; border-radius: 2px;
    background: rgba(255,255,255,0.6);
    /* Regel 2: nur transform — 16 Flex-Kinder mit height-Animation
       wären 16 Layout-Schritte je Frame. Basis = Endwert, damit bei
       Reduced Motion (Animation aus) ein Standbild steht. */
    transform-origin: bottom;
    transform: scaleY(var(--s2, .75));
    animation: eqBounce var(--d, 0.8s) ease-in-out infinite alternate;
}
@keyframes eqBounce {
    0% { transform: scaleY(var(--s1, .25)); }
    100% { transform: scaleY(var(--s2, .75)); }
}
.mk-vq-bar:nth-child(1)  { --s1: .19; --s2: .69; --d: .6s; }
.mk-vq-bar:nth-child(2)  { --s1: .31; --s2: .88; --d: .8s; }
.mk-vq-bar:nth-child(3)  { --s1: .13; --s2: .56; --d: .5s; }
.mk-vq-bar:nth-child(4)  { --s1: .38; --s2: .94; --d: .7s; }
.mk-vq-bar:nth-child(5)  { --s1: .25; --s2: .75; --d: .55s; }
.mk-vq-bar:nth-child(6)  { --s1: .19; --s2: .63; --d: .65s; }
.mk-vq-bar:nth-child(7)  { --s1: .44; --s2: 1;   --d: .75s; }
.mk-vq-bar:nth-child(8)  { --s1: .13; --s2: .5;  --d: .5s; }
.mk-vq-bar:nth-child(9)  { --s1: .31; --s2: .81; --d: .85s; }
.mk-vq-bar:nth-child(10) { --s1: .25; --s2: .69; --d: .6s; }
.mk-vq-bar:nth-child(11) { --s1: .19; --s2: .56; --d: .7s; }
.mk-vq-bar:nth-child(12) { --s1: .38; --s2: .88; --d: .55s; }
.mk-vq-bar:nth-child(13) { --s1: .13; --s2: .44; --d: .8s; }
.mk-vq-bar:nth-child(14) { --s1: .31; --s2: .75; --d: .65s; }
.mk-vq-bar:nth-child(15) { --s1: .25; --s2: .94; --d: .5s; }
.mk-vq-bar:nth-child(16) { --s1: .19; --s2: .63; --d: .75s; }
.mk-vq-queue { padding: 16px 20px; perspective: 600px; }   /* slide-x der Tracks */
.mk-vq-queue-label {
    font-size: 9px; font-weight: 700; color: #4a4a4a; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 10px;
}
.mk-vq-track {
    display: flex; align-items: center; gap: 12px; padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mk-vq-track:last-child { border-bottom: none; }
.mk-vq-num { font-size: 11px; font-weight: 800; color: #f472b6; min-width: 18px; }
.mk-vq-info { flex: 1; }
.mk-vq-track-title { font-size: 13px; font-weight: 600; color: #f5f5f7; }
.mk-vq-track-sub { font-size: 10px; color: #4a4a4a; margin-top: 2px; }
.mk-vq-votes {
    font-size: 10px; font-weight: 700; color: #f472b6;
    background: rgba(244,114,182,0.1); padding: 2px 8px; border-radius: 980px;
}

/* denschMargin Screen (real app – keeps iPhone) */
.mk-screen-margin {
    background: linear-gradient(180deg, #0C5F73 0%, #0C5F73 60px, #F0FDFE 60px);
    flex: 1; display: flex; flex-direction: column;
}
.mk-screen-margin-header {
    background: #0C5F73; padding: 52px 16px 10px;
    display: flex; align-items: center; justify-content: space-between;
}
.mk-screen-margin-header span { font-size: 14px; font-weight: 700; color: #fff; }
.mk-screen-margin-header span b { color: #22D3EE; }
.mk-screen-margin-header em,
.mk-screen-margin-header .mk-badge-beta { font-size: 8px; font-weight: 600; color: rgba(255,255,255,0.6); font-style: normal; letter-spacing: 0.08em; }
.mk-screen-margin-body { flex: 1; padding: 14px; background: #F0FDFE; overflow: hidden; perspective: 600px; }   /* tile-pop der Rezeptzeile */
.mk-screen-margin-greeting { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.mk-screen-margin-greet-sub { font-size: 9px; color: #64748B; margin-bottom: 10px; }
/* perspective, damit der rotateX der tile-pop-Kacheln Tiefe hat
   (fehlte bisher — die Drehung war flach) */
.mk-screen-margin-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; perspective: 600px; }
.mk-screen-margin-tile {
    background: #fff; border-radius: 12px; padding: 10px;
    border: 1px solid rgba(14,116,144,0.12);
    display: flex; flex-direction: column; gap: 4px;
}
.mk-screen-margin-tile-icon {
    width: 24px; height: 24px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
}
.mk-screen-margin-tile-num { font-size: 20px; font-weight: 800; color: #1a1a1a; line-height: 1; }
.mk-screen-margin-tile-label { font-size: 8px; color: #64748B; font-weight: 500; }
.mk-screen-margin-nav {
    display: flex; background: #fff; border-top: 1px solid rgba(0,0,0,0.06);
    padding: 6px 0 10px;
}
.mk-screen-margin-nav-item {
    flex: 1; text-align: center; font-size: 7px; color: #94A3B8; font-weight: 500;
}
.mk-screen-margin-nav-item.mk-active { color: #0C5F73; font-weight: 700; }
.mk-screen-margin-section-label {
    font-size: 8px; font-weight: 700; color: #94A3B8; text-transform: uppercase;
    letter-spacing: 0.06em; margin: 6px 0 6px; display: flex; justify-content: space-between;
}
.mk-screen-margin-section-label span { color: #0E7490; font-weight: 600; }
.mk-screen-margin-recipe {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border-radius: 10px; padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.04);
}
.mk-screen-margin-recipe-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.mk-screen-margin-recipe-name { font-size: 10px; font-weight: 600; color: #1a1a1a; }
.mk-screen-margin-recipe-meta { font-size: 7px; color: #94A3B8; }
.mk-screen-margin-recipe-price { font-size: 11px; font-weight: 700; color: #0E7490; margin-left: auto; }
/* Icon-Hintergründe (vorher style=""-Attribute) */
.mk-bg-amber { background: #FEF3C7; } .mk-bg-blau { background: #DBEAFE; } .mk-bg-teal { background: #CCFBF1; }
.mk-bg-grau { background: #F1F5F9; } .mk-bg-gruen { background: #DCFCE7; } .mk-bg-indigo { background: #E0E7FF; }

/* ═══ auftrag.dasdensch: Stundenzettel ═══ */
.mk-visual-auftrag {
    width: 300px; background: #fff; border-radius: 24px; overflow: hidden;
    perspective: 600px;      /* tile-pop des Unterschrift-Kastens */
    color: #1d1d1f;
    box-shadow: 0 30px 80px rgba(63,98,18,0.30), 0 0 0 1px rgba(0,0,0,0.04);
}
.mk-va-head {
    background: linear-gradient(135deg, #1A2E05 0%, #3F6212 60%, #65A30D 100%);
    padding: 15px 20px; color: #fff;
    display: flex; align-items: center; justify-content: space-between;
}
.mk-va-num { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.mk-va-status {
    font-size: 10px; font-weight: 600; padding: 3px 9px;
    border-radius: 980px; background: rgba(255,255,255,0.18);
    display: inline-flex; align-items: center; gap: 5px;
}
.mk-va-status i { width: 6px; height: 6px; border-radius: 50%; background: #a3e635; font-style: normal; }
.mk-va-rows { padding: 10px 20px 4px; perspective: 600px; }   /* slide-x der Zeilen */
.mk-va-row {
    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;
}
.mk-va-row:last-child { border-bottom: none; }
.mk-va-row em { font-style: normal; font-weight: 700; color: #3F6212; margin-left: auto; }
.mk-va-day {
    font-size: 10px; font-weight: 800; color: #3F6212;
    background: rgba(63,98,18,0.1); padding: 2px 7px; border-radius: 6px;
    min-width: 26px; text-align: center;
}
.mk-va-sign {
    margin: 6px 16px 0; padding: 10px 14px 8px; border-radius: 12px;
    background: #F7FEE7; border: 1px dashed rgba(63,98,18,0.35);
}
/* Die Unterschrift SCHREIBT sich: clip-path von links nach rechts aus
   --p der Bühne (--s = 0,46…0,60, mitten in Beat 2 „Unterschreiben").
   Der Kasten .mk-va-sign ist das Item, .mk-va-script ist KEIN Item — nur
   clip-path (Regel-2-Ausnahme: ein isoliertes Element). */
.mk-va-script {
    font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;
    font-size: 21px; line-height: 1.1; transform: rotate(-2deg); display: block;
    clip-path: inset(0 calc((1 - var(--s, 1)) * 100%) 0 0);
}
.mk-va-signmeta { font-size: 9px; font-weight: 600; color: #3F6212; }
.mk-va-foot { padding: 12px 20px 16px; text-align: center; font-size: 12px; color: #86868b; }
.mk-va-foot b { font-weight: 800; color: #3F6212; }

/* ═══ denschEvent: Eintrittskarte ═══ */
.mk-visual-event {
    width: 300px; background: #fff; border-radius: 24px; overflow: hidden;
    color: #1d1d1f;
    box-shadow: 0 30px 80px rgba(49,46,129,0.30), 0 0 0 1px rgba(0,0,0,0.04);
    /* Die Perforations-Kerben sind ECHTE Löcher (Maske), keine
       schwarzen Kreise — die flögen auf der Farbwolke auf.
       --kerbe-y = Mitte der Perforationszeile: Band 51 + Padding 18 +
       Titel 28,5 + Meta 36,5 + Label 13,5 + Gast 24,5 + Rand 16 + 11 =
       199 px — gemessen OHNE phone3d-Transform (mit aktivem Transform
       kam 140 heraus, das war der Fehler vom 08.09.). */
    --kerbe-y: 199px;
    -webkit-mask: radial-gradient(11px at 0 var(--kerbe-y), transparent 98%, #000),
                  radial-gradient(11px at 100% var(--kerbe-y), transparent 98%, #000);
    -webkit-mask-composite: source-in;
            mask: radial-gradient(11px at 0 var(--kerbe-y), transparent 98%, #000),
                  radial-gradient(11px at 100% var(--kerbe-y), transparent 98%, #000);
            mask-composite: intersect;
}
.mk-ve-band {
    background: linear-gradient(135deg, #312E81 0%, #4338CA 60%, #6366F1 100%);
    padding: 15px 20px; color: #fff;
    display: flex; align-items: center; justify-content: space-between;
}
.mk-ve-brand { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.mk-ve-brand b { font-weight: 800; }
.mk-ve-kat {
    font-size: 10px; font-weight: 600; padding: 3px 9px;
    border-radius: 980px; background: rgba(255,255,255,0.18);
}
.mk-ve-body { padding: 18px 20px 0; }
.mk-ve-title { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.mk-ve-meta { font-size: 11px; color: #86868b; margin: 4px 0 16px; }
.mk-ve-gast-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: #86868b;
}
.mk-ve-gast { font-size: 15px; font-weight: 700; margin-top: 2px; }
.mk-ve-gast span {
    font-size: 10px; font-weight: 600; color: #4338CA; background: #EEF2FF;
    padding: 2px 7px; border-radius: 980px; margin-left: 6px; vertical-align: middle;
}
.mk-ve-perf { position: relative; height: 22px; margin-top: 16px; }
.mk-ve-perf::before {
    content: ''; position: absolute; left: 16px; right: 16px; top: 50%;
    border-top: 2px dashed rgba(0,0,0,0.12);
}
.mk-ve-fuss { padding: 2px 20px 20px; text-align: center; perspective: 600px; }   /* tile-pop von QR + Pille */
.mk-ve-qr { width: 112px; height: 112px; margin: 0 auto 12px; }
.mk-ve-qr svg { width: 100%; height: 100%; display: block; }
.mk-ve-qr .mk-dark { fill: #1d1d1f; }
.mk-ve-status {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; color: #047857;
    background: #ECFDF5; padding: 5px 12px; border-radius: 980px;
}
.mk-ve-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; }

/* ═══ denschOrder: Bestell-Ticket ═══ */
.mk-visual-order {
    width: 320px;
    background: #fff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(107,33,168,0.28), 0 0 0 1px rgba(107,33,168,0.08);
    position: relative;
}
.mk-vo-head {
    background: linear-gradient(135deg, #6B21A8 0%, #9333ea 50%, #a855f7 100%);
    padding: 24px 24px 20px;
    display: flex; align-items: center; justify-content: space-between;
    color: #fff;
}
.mk-vo-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.mk-vo-status {
    font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.18); padding: 6px 11px; border-radius: 999px;
    backdrop-filter: blur(8px);
}
.mk-vo-status .mk-vo-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: voPulse 1.6s ease-in-out infinite;
}
@keyframes voPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }
.mk-vo-meta {
    padding: 14px 24px 8px; display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: #86868b; font-weight: 600;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.mk-vo-meta-channel {
    font-size: 10px; font-weight: 700; color: #6B21A8;
    background: rgba(107,33,168,0.1); padding: 3px 8px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.mk-vo-items { padding: 8px 24px 12px; }
.mk-vo-item {
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex; align-items: center; gap: 10px;
}
.mk-vo-item:last-child { border-bottom: none; }
.mk-vo-qty {
    font-size: 11px; font-weight: 800; color: #6B21A8;
    background: rgba(107,33,168,0.1); padding: 3px 7px; border-radius: 6px;
    min-width: 28px; text-align: center;
}
.mk-vo-name { font-size: 13px; font-weight: 600; color: #1d1d1f; flex: 1; }
.mk-vo-price { font-size: 13px; font-weight: 700; color: #6B21A8; }
.mk-vo-total {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; background: #faf5ff;
    border-top: 1px solid rgba(107,33,168,0.1);
}
.mk-vo-total-label { font-size: 11px; font-weight: 700; color: #86868b; text-transform: uppercase; letter-spacing: 0.06em; }
.mk-vo-total-amount { font-size: 18px; font-weight: 800; color: #6B21A8; }
.mk-vo-channels {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4px; padding: 10px 14px 14px; background: #faf5ff;
}
.mk-vo-chan {
    font-size: 9px; font-weight: 700; color: #6B21A8;
    padding: 7px 4px; border-radius: 8px; background: #fff;
    border: 1px solid rgba(107,33,168,0.14); text-align: center;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.mk-vo-foot {
    padding: 10px 24px 14px; font-size: 9px; color: #c4c4c4;
    text-align: right; background: #faf5ff;
    border-top: 1px dashed rgba(107,33,168,0.1);
}
.mk-vo-foot b { color: #6B21A8; }

/* ── denschOrder-Bühne: das Ticket schwenkt aus −18° ein, wächst 0,72→1
   und wird von OBEN nach UNTEN freigegeben wie ein Bon aus dem
   Drucker; die Status-Pille verwandelt sich Eingegangen → Wird
   zubereitet → Fertig (drei Wörter in EINER Zelle, Countdown-Muster).
   .zoom-Vorsatz ist tragend: .mk-visual-order{width:320px} steht später
   in der Datei und gewann sonst gegen die Breiten der Media-Blöcke */
.zoom .zoom__ticket {
    width: min(72vw, 320px);
    /* Ursprung oben: der Bon wächst aus einem festen Schlitz nach
       unten, statt dass sein Kopf beim Drucken nach oben wandert */
    transform-origin: 50% 0;
    transform: rotateY(calc((1 - var(--p)) * -18deg))
               scale(calc(0.72 + 0.28 * var(--p)))
               translateY(calc((1 - var(--p)) * 1.5rem));
    /* Bon druckt von oben: Kopf mit #042 steht schon (16 %), dann
       Positionen, Summe, Kanäle, Fuß. clip-path an EINEM isolierten
       Element = erlaubte Ausnahme aus Regel 2. */
    clip-path: inset(0 0 calc((1 - min(1, 0.16 + var(--p) / 0.92)) * 100%) 0 round 26px);
    will-change: transform, clip-path;
}
.zoom .mk-vo-item {
    --o: clamp(0, calc((var(--p) - var(--ab)) / 0.08), 1);
    opacity: var(--o);
    transform: translateX(calc((1 - var(--o)) * -14px));
}
.zoom .mk-vo-item:nth-child(1) { --ab: 0.30; }
.zoom .mk-vo-item:nth-child(2) { --ab: 0.36; }
.zoom .mk-vo-item:nth-child(3) { --ab: 0.42; }
/* Verwandlung (Regel 11): drei Wörter, eine Zelle. Der Loop-
   Besitzer ist .mk-vo-status (Punkt-Puls), die Wörter sind Kinder
   mit Zustandswechsel — der erlaubte Fall aus Regel 1. */
.mk-vo-status__stapel { display: grid; grid-template-areas: 'w'; justify-items: center; text-align: center; }
.mk-vo-status__wort {
    grid-area: w; white-space: nowrap;
    opacity: var(--o, 1);
    transform: translateY(calc((1 - var(--o, 1)) * 4px));
}
/* außerhalb einer Bühne (Umschalter): nur das erste Wort */
.mk-vo-status__wort--2, .mk-vo-status__wort--3 { --o: 0; }
.zoom .mk-vo-status__wort--1 { --o: clamp(0, calc((0.42 - var(--p)) / 0.06), 1); }
.zoom .mk-vo-status__wort--2 { --o: min(clamp(0, calc((var(--p) - 0.36) / 0.06), 1), clamp(0, calc((0.78 - var(--p)) / 0.06), 1)); }
.zoom .mk-vo-status__wort--3 { --o: clamp(0, calc((var(--p) - 0.76) / 0.06), 1); }

/* Einsatzpunkte je Produkt, auf die Beats gelegt
   (Beat 1 bis 0,38 · Beat 2 0,30–0,76 · Beat 3 ab 0,68) */
.showcase--margin .mk-screen-margin-tile:nth-child(1) { --ab: 0.24; }
.showcase--margin .mk-screen-margin-tile:nth-child(2) { --ab: 0.28; }
.showcase--margin .mk-screen-margin-tile:nth-child(3) { --ab: 0.32; }
.showcase--margin .mk-screen-margin-tile:nth-child(4) { --ab: 0.36; }
.showcase--margin .mk-screen-margin-tile:nth-child(5) { --ab: 0.40; }
.showcase--margin .mk-screen-margin-tile:nth-child(6) { --ab: 0.44; }
.showcase--margin .mk-screen-margin-recipe { --ab: 0.56; }
.showcase--link .mk-vl-avatar { --ab: 0.26; }
.showcase--link .mk-vl-btn:nth-child(1) { --ab: 0.32; }
.showcase--link .mk-vl-btn:nth-child(2) { --ab: 0.38; }
.showcase--link .mk-vl-btn:nth-child(3) { --ab: 0.44; }
.showcase--link .mk-vl-btn:nth-child(4) { --ab: 0.50; }
.showcase--link .mk-vl-btn:nth-child(5) { --ab: 0.56; }
.showcase--collabs .mk-vc-card:nth-child(1) { --ab: 0.28; }
.showcase--collabs .mk-vc-card:nth-child(2) { --ab: 0.38; }
.showcase--collabs .mk-vc-card:nth-child(3) { --ab: 0.48; }
.showcase--collabs .mk-vc-card:nth-child(4) { --ab: 0.58; }
/* .mk-vq-queue-label ist das erste Kind — die Tracks sind 2–4 */
.showcase--q .mk-vq-track:nth-child(2) { --ab: 0.34; }
.showcase--q .mk-vq-track:nth-child(3) { --ab: 0.44; }
.showcase--q .mk-vq-track:nth-child(4) { --ab: 0.54; }
/* Event: der QR kommt mit Beat 2 (Wallet-Pass), die Check-in-Pille
   mit Beat 3 — der Check-in PASSIERT, während man davon liest */
.showcase--event .mk-ve-qr { --ab: 0.40; }
.showcase--event .mk-ve-status { --ab: 0.74; }
/* auftrag: Zeilen in Beat 1, Unterschrift-Kasten und die sich
   schreibende Signatur (--s, siehe .mk-va-script) in Beat 2 */
.showcase--auftrag .mk-va-row:nth-child(1) { --ab: 0.22; }
.showcase--auftrag .mk-va-row:nth-child(2) { --ab: 0.28; }
.showcase--auftrag .mk-va-row:nth-child(3) { --ab: 0.34; }
.showcase--auftrag .mk-va-sign { --ab: 0.40; }
.showcase--auftrag { --s: clamp(0, calc((var(--p) - 0.46) / 0.14), 1); }

/* ── Größen je Fenster (DOM-Harnisch 10.09.): die 1fr-Zeile der Bühne
   ist auf 390×844 ≈ 480 px, auf 360×740 ≈ 410 px ── */
@media (max-width: 56.24rem) {
    .zoom .zoom__ticket {
        width: min(72vw, 280px);
        transform: rotateY(calc((1 - var(--p)) * -10deg))
                   scale(calc(0.72 + 0.28 * var(--p)))
                   translateY(calc((1 - var(--p)) * 1rem));
    }
    /* je Mockup so groß, wie die 1fr-Zeile hergibt (DOM-Harnisch 10.09.) */
    .showcase--link .zoom__mockup { --mz: 0.84; }
    .showcase--collabs .zoom__mockup, .showcase--q .zoom__mockup, .showcase--event .zoom__mockup { --mz: 0.92; }
    .showcase--auftrag .zoom__mockup { --mz: 1; }
}
@media (max-height: 48rem) and (max-width: 56.24rem) {
    /* Bon: zoom .92, sonst 436 px in einer 410-px-Zeile (360×740) */
    .zoom .zoom__ticket { width: 240px; zoom: 0.92; }
    .zoom .zoom__mockup { --mz: 0.66; }
    .showcase--link .zoom__mockup { --mz: 0.72; }
    .showcase--collabs .zoom__mockup, .showcase--q .zoom__mockup, .showcase--event .zoom__mockup { --mz: 0.88; }
    .showcase--auftrag .zoom__mockup { --mz: 0.98; }
}

@media (prefers-reduced-motion: reduce) {
    .zoom .zoom__ticket { transform: none; clip-path: none; }
    .zoom .mk-vo-item { opacity: 1; transform: none; }
    .showcase--auftrag { --s: 1; }
    .mk-vq-bar { animation: none; }
    .mk-vo-status .mk-vo-dot { animation: none; }
}