/* Vitren · Mini-Bilder je Prüfung (#902). Kleine, dauernd laufende Szenen (nie an das Scrollen gekoppelt, Esteban #902):
   jede zeigt das Problem und gleich danach, wie es richtig aussieht. Markup erzeugt _werkzeug/baue.py (mini_html), gleich auf
   Link-Seite, Test-Seiten und später als Video-Baustein. Zyklus 6 s, alle Szenen gleich getaktet. */
.mini{--z:6s;display:block;position:relative;width:100%;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--travertin-2);isolation:isolate;font-family:system-ui,-apple-system,'Segoe UI',sans-serif}
.mini *{box-sizing:border-box}
.mini span,.mini i,.mini b,.mini u{display:block}
.mini .m-kopf,.mini .m-leiste,.mini .m-nav,.mini .m-reihe,.mini .m-tab,.mini .m-warn,.mini .m-schloss{display:flex}
.mini .m-jahr{display:inline-block}
.mini .m-jahr span{display:block}
.mini .m-fuss{display:block}
.mini .m-404{display:grid}
.mini__lab{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:7px;padding:8px 11px;font:600 12px/1.25 'Archivo',sans-serif;font-stretch:108%;letter-spacing:.005em;color:var(--creme)}
.mini__lab::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.mini__lab.s{background:var(--ochsenblut);animation:mini-aus var(--z) var(--ease) infinite}
.mini__lab.g{background:var(--lapis);opacity:0;animation:mini-ein var(--z) var(--ease) infinite}
@keyframes mini-ein{0%,46%{opacity:0}52%,94%{opacity:1}100%{opacity:0}}
@keyframes mini-aus{0%,46%{opacity:1}52%,94%{opacity:0}100%{opacity:1}}

/* Link-Vorschau: nackte Adresse -> Karte mit Bild und Titel */
.mini--link_vorschau{background:#EFE7DE}
.mini--link_vorschau .m-ein{position:absolute;left:10px;top:12px;padding:5px 8px;border-radius:0 8px 8px 8px;background:#fff;font-size:10px;color:#111;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.mini--link_vorschau .m-aus{position:absolute;right:10px;top:38px;width:62%;padding:3px;border-radius:8px 0 8px 8px;background:#D9FDD3;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.mini--link_vorschau .m-karte{height:0;border-radius:5px;overflow:hidden;background:linear-gradient(135deg,#1E3B87,#2C50AB);animation:mk-karte var(--z) var(--ease) infinite}
.mini--link_vorschau .m-karte i{display:block;height:9px;margin:44px 6px 0;border-radius:3px;background:rgba(255,255,255,.85);width:70%}
.mini--link_vorschau .m-url{display:block;padding:4px 5px 2px;font-size:9.5px;color:#027EB5}
@keyframes mk-karte{0%,46%{height:0}56%,94%{height:62px}100%{height:0}}

/* Google-Vorschau: fehlender Text -> Titel + zwei Zeilen */
.mini--google_vorschau{background:#fff}
.mini--google_vorschau .m-serp{position:absolute;left:12px;right:12px;top:14px}
.mini--google_vorschau .m-kopf{display:flex;align-items:center;gap:6px}
.mini--google_vorschau .m-kopf b{width:16px;height:16px;border-radius:50%;background:#F1F3F4}
.mini--google_vorschau .m-kopf i{height:6px;width:40%;border-radius:3px;background:#DADCE0}
.mini--google_vorschau .m-titel{height:10px;width:78%;margin-top:9px;border-radius:3px;background:#1A0DAB}
.mini--google_vorschau .m-zeile{height:6px;margin-top:7px;border-radius:3px;background:#BDC1C6;transform-origin:left;animation:mk-tipp var(--z) var(--ease) infinite}
.mini--google_vorschau .m-zeile + .m-zeile{width:70%;animation-delay:.15s}
.mini--google_vorschau .m-leer{position:absolute;left:12px;top:78px;font-size:9.5px;font-style:italic;color:#80868B;animation:mini-aus var(--z) var(--ease) infinite}
@keyframes mk-tipp{0%,48%{transform:scaleX(0)}60%,94%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* Zertifikat: «Nicht sicher» -> Schloss */
.mini--zertifikat{background:#DEE1E6}
.mini--zertifikat .m-leiste{position:absolute;left:12px;right:12px;top:14px;height:30px;border-radius:15px;background:#fff;display:flex;align-items:center;gap:7px;padding:0 10px;font-size:10px;color:#202124}
.mini--zertifikat .m-warn,.mini--zertifikat .m-schloss{position:absolute;left:10px;display:flex;align-items:center;gap:5px;font-weight:600}
.mini--zertifikat .m-warn{color:#C5221F;animation:mini-aus var(--z) var(--ease) infinite}
.mini--zertifikat .m-schloss{color:#1E3B87;opacity:0;animation:mini-ein var(--z) var(--ease) infinite}
.mini--zertifikat svg{width:12px;height:12px}
.mini--zertifikat .m-adr{margin-left:78px;color:#5F6368}
.mini--zertifikat .m-seite-z{position:absolute;left:12px;right:12px;top:52px;bottom:12px;border-radius:10px;background:#fff;padding:12px}
.mini--zertifikat .m-seite-z i{height:7px;margin-bottom:8px;border-radius:4px;background:#E8EAED}
.mini--zertifikat .m-seite-z i:first-child{width:55%;height:11px;background:#DADCE0}
.mini--zertifikat .m-seite-z i:last-child{width:70%}
.mini--zertifikat .m-mitte{position:absolute;left:50%;top:58%;width:64px;height:64px;margin:-32px 0 0 -32px}
.mini--zertifikat .m-gw,.mini--zertifikat .m-gs{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 24px -12px rgba(23,23,26,.5)}
.mini--zertifikat .m-gw{background:#FCE8E6;color:#C5221F;animation:mini-aus var(--z) var(--ease) infinite}
.mini--zertifikat .m-gs{background:#1E3B87;color:#fff;opacity:0;animation:mk-pop var(--z) var(--ease) infinite}
.mini--zertifikat .m-mitte svg{width:30px;height:30px}
@keyframes mk-pop{0%,46%{opacity:0;transform:scale(.6)}54%{opacity:1;transform:scale(1.08)}60%,94%{opacity:1;transform:none}100%{opacity:0}}

/* Handy: winzige Computer-Ansicht -> lesbare Handy-Seite */
.mini--handy{background:var(--glas)}
.mini--handy .m-tel{position:absolute;left:50%;top:10px;width:58px;height:112px;margin-left:-29px;border-radius:11px;background:#17171A;padding:5px}
.mini--handy .m-schirm{position:relative;width:100%;height:100%;border-radius:7px;background:#fff;overflow:hidden}
.mini--handy .m-klein,.mini--handy .m-gross{position:absolute;inset:6px 5px}
.mini--handy .m-klein i{display:block;height:2px;margin-bottom:2px;border-radius:1px;background:#BDC1C6}
.mini--handy .m-klein{animation:mini-aus var(--z) var(--ease) infinite}
.mini--handy .m-gross{opacity:0;animation:mini-ein var(--z) var(--ease) infinite}
.mini--handy .m-gross b{display:block;height:9px;width:80%;border-radius:2px;background:#17171A}
.mini--handy .m-gross i{display:block;height:4px;margin-top:5px;border-radius:2px;background:#BDC1C6}
.mini--handy .m-gross u{display:block;height:12px;width:70%;margin-top:9px;border-radius:6px;background:#1E3B87}

/* Tote Links: Klick auf Menüpunkt -> 404 ; danach: Seite öffnet */
.mini--tote_links{background:#fff}
.mini--tote_links .m-nav{position:absolute;left:12px;right:12px;top:14px;display:flex;gap:8px}
.mini--tote_links .m-nav i{height:7px;flex:1;border-radius:3px;background:#DADCE0}
.mini--tote_links .m-nav i:nth-child(3){background:#17171A}
.mini--tote_links .m-zeiger{position:absolute;top:22px;left:58%;width:12px;height:12px;animation:mk-zeiger var(--z) var(--ease) infinite}
.mini--tote_links .m-zeiger svg{width:100%;height:100%}
.mini--tote_links .m-404{position:absolute;left:12px;right:12px;top:40px;bottom:30px;border-radius:8px;background:#F8F9FA;display:grid;place-items:center;font:700 22px/1 'Archivo',sans-serif;font-stretch:125%;color:#C5221F;animation:mk-404 var(--z) var(--ease) infinite}
.mini--tote_links .m-ok{position:absolute;left:12px;right:12px;top:40px;bottom:30px;border-radius:8px;background:linear-gradient(180deg,#E4DACA,#EEE7DB);opacity:0;animation:mini-ein var(--z) var(--ease) infinite}
@keyframes mk-zeiger{0%{transform:translate(18px,30px)}18%,40%{transform:none}46%,100%{transform:none}}
@keyframes mk-404{0%,20%{opacity:0;transform:scale(.96)}26%,46%{opacity:1;transform:none}52%,100%{opacity:0}}

/* Alter: © 2016 -> © 2026 */
.mini--alter{background:var(--tinte)}
.mini--alter .m-fuss{position:absolute;left:0;right:0;top:50%;transform:translateY(-62%);text-align:center;font:500 22px/1 'Archivo',sans-serif;font-stretch:118%;color:var(--creme);letter-spacing:.02em}
.mini--alter .m-jahr{position:relative;display:inline-block;width:2.6em;height:1.1em;overflow:hidden;vertical-align:bottom}
.mini--alter .m-jahr span{position:absolute;left:0;right:0;animation:mk-jahr var(--z) var(--ease) infinite}
.mini--alter .m-jahr span + span{animation-name:mk-jahr2}
@keyframes mk-jahr{0%,46%{transform:none}56%,94%{transform:translateY(-110%)}100%{transform:none}}
@keyframes mk-jahr2{0%,46%{transform:translateY(110%)}56%,94%{transform:none}100%{transform:translateY(110%)}}

/* Antwortzeit: langer Balken -> kurzer Balken */
.mini--antwortzeit{background:#fff}
.mini--antwortzeit .m-bahn{position:absolute;left:14px;right:14px;top:44px;height:10px;border-radius:5px;background:#F1F3F4;overflow:hidden}
.mini--antwortzeit .m-bahn i{display:block;height:100%;border-radius:5px;background:#C5221F;transform-origin:left;animation:mk-lang var(--z) linear infinite}
.mini--antwortzeit .m-zahl{position:absolute;left:14px;top:20px;font:700 14px/1 'Archivo',sans-serif;font-stretch:118%;color:#17171A}
.mini--antwortzeit .m-zahl span{position:absolute;white-space:nowrap}
.mini--antwortzeit .m-zahl span:first-child{animation:mini-aus var(--z) var(--ease) infinite}
.mini--antwortzeit .m-zahl span + span{opacity:0;animation:mini-ein var(--z) var(--ease) infinite;color:#1E3B87}
@keyframes mk-lang{0%{transform:scaleX(0);background:#C5221F}44%{transform:scaleX(1);background:#C5221F}50%{transform:scaleX(0);background:#1E3B87}58%,96%{transform:scaleX(.22);background:#1E3B87}100%{transform:scaleX(0)}}

/* Sperre für Google: Lupe stösst an Schranke -> geht durch */
.mini--google_sperre{background:var(--travertin)}
.mini--google_sperre .m-schranke{position:absolute;left:56%;top:16px;bottom:30px;width:6px;border-radius:3px;background:repeating-linear-gradient(180deg,#C5221F 0 8px,#fff 8px 14px);animation:mini-aus var(--z) var(--ease) infinite}
.mini--google_sperre .m-lupe{position:absolute;left:14px;top:34px;width:26px;height:26px;animation:mk-lupe var(--z) var(--ease) infinite}
.mini--google_sperre .m-lupe svg{width:100%;height:100%}
.mini--google_sperre .m-seite{position:absolute;right:14px;top:22px;width:34%;bottom:34px;border-radius:6px;background:#fff;box-shadow:0 6px 14px -8px rgba(23,23,26,.4)}
@keyframes mk-lupe{0%{transform:none}30%,46%{transform:translateX(calc(56% + 40px))}48%{transform:translateX(calc(56% + 34px))}50%{transform:none}80%,96%{transform:translateX(220%)}100%{transform:none}}

/* Symbol im Tab: grauer Platzhalter -> eigenes Zeichen */
.mini--symbol{background:#DEE1E6}
.mini--symbol .m-reihe{position:absolute;left:10px;right:10px;top:36px;display:flex;gap:3px}
.mini--symbol .m-tab{flex:1;height:30px;border-radius:7px 7px 0 0;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:9.5px;color:#3C4043}
.mini--symbol .m-tab.ihrer{flex:1.6;background:#fff}
.mini--symbol .m-ico{position:relative;width:13px;height:13px;flex:none}
.mini--symbol .m-ico i,.mini--symbol .m-ico b{position:absolute;inset:0;border-radius:50%}
.mini--symbol .m-ico i{border:1.4px solid #9AA0A6;animation:mini-aus var(--z) var(--ease) infinite}
.mini--symbol .m-ico b{background:#1E3B87;border-radius:3px;opacity:0;animation:mini-ein var(--z) var(--ease) infinite}
.mini--symbol .m-tab:not(.ihrer) .m-ico{border-radius:3px;background:#AEB4BC}
.mini--symbol .m-strich{height:5px;flex:1;border-radius:3px;background:#C7CBD1}

/* Gesamt (Erreichbarkeit, Überschrift, Sitemap, Unsichere Inhalte): Fallback ein Häkchen-Stapel */
.mini--allgemein{background:var(--travertin-2)}

@media (prefers-reduced-motion:reduce){.mini *{animation:none!important}.mini .m-karte{height:62px}}

/* #902 R3: realistischere Szenen (Esteban: «Vorschau unklar, verstehe nicht wie wo was») */
.m-wa-kopf{position:absolute;left:0;right:0;top:0;height:26px;display:flex;align-items:center;gap:6px;padding:0 9px;background:#075E54;color:#fff;font-size:10px;font-weight:600}
.m-wa-kopf b{width:15px;height:15px;border-radius:50%;background:#B5C7C3}
.mini--link_vorschau .m-ein{top:34px}
.mini--link_vorschau .m-aus{top:58px;width:66%}
.mini--link_vorschau .m-karte{background:#fff center/cover no-repeat}
.mini--link_vorschau .m-karte i{display:none}
.mini--link_vorschau .m-karte em{display:block;font-style:normal;font-size:9.5px;font-weight:600;padding:44px 6px 5px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.95) 55%);color:#111}
@keyframes mk-karte{0%,46%{height:0}56%,94%{height:66px}100%{height:0}}
.m-suche{position:absolute;left:10px;right:10px;top:10px;height:22px;border-radius:11px;background:#fff;box-shadow:0 1px 4px rgba(32,33,36,.2);display:flex;align-items:center;gap:6px;padding:0 9px;font-size:9.5px;color:#202124}
.m-suche svg{width:10px;height:10px;color:#4285F4}
.mini--google_vorschau,.mini--google_sperre{background:#F8F9FA}
.mini--google_vorschau .m-serp{top:42px}
.m-r-url{display:block;font-size:8.5px;color:#4D5156}
.m-r-titel{display:block;margin-top:2px;font-size:12px;color:#1A0DAB;line-height:1.2}
.m-r-text{display:block;margin-top:3px;font-size:9px;line-height:1.35;color:#4D5156}
.m-r-text.s{font-style:italic;color:#9AA0A6;animation:mini-aus var(--z) var(--ease) infinite}
.m-r-text.g{position:absolute;opacity:0;animation:mini-ein var(--z) var(--ease) infinite}
.m-leer-g{position:absolute;left:12px;right:12px;top:44px;font-size:10px;color:#5F6368;animation:mini-aus var(--z) var(--ease) infinite}
.m-treffer{position:absolute;left:12px;right:12px;top:42px;opacity:0;animation:mini-ein var(--z) var(--ease) infinite}