/* ZEYNAH REELS — Karten des Reel-Systems (09.09.2026)
   Keine eigenen Farben: Palette und Alpha-Stufen davon. Kacheln kommen aus
   der Grundlage (.zy-kachel), hier steht nur das Innenleben. */
.zr-raster{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:1rem}
.zr-karte{padding:14px 14px 16px}
.zr-buehne{position:relative; aspect-ratio:9/16; border-radius:16px; overflow:hidden;
	background-color:rgba(74,75,79,.55); border:1.5px solid rgba(127,188,255,.30);
	box-shadow:0 18px 44px rgba(48,49,52,.24), inset 0 1px 0 rgba(250,247,242,.12)}
.zr-buehne video,.zr-buehne img{width:100%; height:100%; object-fit:cover; display:block}
.zr-buehne video::cue{background:rgba(64,65,68,.78); color:#faf7f2; font:600 14px/1.35 'DM Sans',system-ui,sans-serif}
.zr-start{position:absolute; inset:auto auto 12px 12px; width:44px; height:44px; border-radius:999px; cursor:pointer;
	color:#faf7f2; background:rgba(0,91,184,.82); border:1.5px solid rgba(127,188,255,.6);
	box-shadow:0 8px 20px rgba(48,49,52,.28); font-size:16px; display:grid; place-items:center}
.zr-start:hover{transform:translateY(-2px)}
.zr-start:focus-visible{outline:2px solid #7fbcff; outline-offset:2px}
.zr-start[hidden]{display:none}
.zr-laenge{position:absolute; top:10px; right:10px; padding:.2rem .5rem; border-radius:999px;
	font:600 10.5px/1.4 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.06em;
	color:#faf7f2; background:rgba(64,65,68,.72); border:1px solid rgba(127,188,255,.4)}
.zr-etikett{position:absolute; left:10px; right:10px; bottom:12px; padding:.45rem .7rem; border-radius:10px; text-align:center;
	font:600 11px/1.4 'IBM Plex Mono',ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase;
	color:#faf7f2; background:rgba(64,65,68,.80); border:1px dashed rgba(127,188,255,.6)}
.zr-etikett.zr-leise{text-transform:none; letter-spacing:.02em; border-style:solid}
.zr-titel{margin:.9rem 0 .4rem; font-size:17px}
.zr-schritte{margin:0; padding:0; list-style:none; display:grid; gap:.3rem}
.zr-schritte li{display:flex; gap:.5rem; font-size:13px; line-height:1.5}
.zr-nr{flex:0 0 auto; width:20px; height:20px; border-radius:999px; display:grid; place-items:center;
	font:600 11px/1 'IBM Plex Mono',ui-monospace,monospace; background-color:rgba(0,113,227,.16); border:1px solid rgba(0,113,227,.4)}
.zr-fuss{margin:.7rem 0 0; font-size:11.5px; line-height:1.5; opacity:.72; font-family:'IBM Plex Mono',ui-monospace,monospace}
[dir="rtl"] .zr-start{inset:auto 12px 12px auto}
[dir="rtl"] .zr-laenge{right:auto; left:10px}
@media (max-width:640px){.zr-raster{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
@media (prefers-reduced-motion:reduce){.zr-start{transition:none}}