/* ============================================================ FRANKFURT 2042 — Reader-Gate v3 "BIO-SCAN" Vollautomatische Scan-Inszenierung: Kamera-Viewport mit Scanline, Funk-Ortung, Register-Abgleich, Social-Score-Zählung, Tagesanpassung, Verweigerung, Nato-Rettung. - KEINE Formularfelder mehr (kein Passwortmanager-Popup) - Kompakt: passt inkl. Button-Ersatz auf jedes Display (max-height: 100dvh, safe-area-Insets, interner Scroll) - Selbst-scoped unter .gv3 (übersteht das Umhängen an ) ============================================================ */ .gv3{ --ink: var(--theme-bg, #0d0906); --paper: var(--theme-text, #f0e8dc); --sig: var(--theme-accent,#ff6600); --nato: #e8b45a; --bad: #ff5a4a; --line: color-mix(in srgb, var(--theme-accent,#ff6600) 24%, transparent); --fm: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; position:fixed;inset:0;z-index:6000;display:none; align-items:flex-start;justify-content:center; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); overflow-y:auto; padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); } .gv3.open{display:flex} body.gate-locked{overflow:hidden} body.gate-locked .site-header{z-index:1 !important} .gv3 *{box-sizing:border-box} .gv3-box{ width:min(480px,100%);margin:auto;position:relative; background:rgba(10,8,6,.88); border:1px solid var(--line);border-top:2px solid var(--sig); box-shadow:0 30px 80px rgba(0,0,0,.65); padding:16px 18px 14px; max-height:calc(100dvh - 24px);overflow-y:auto; } @supports (background: color-mix(in srgb, red 50%, blue)){ .gv3-box{background:color-mix(in srgb, var(--ink) 86%, transparent)} } @supports ((backdrop-filter: blur(4px))){ .gv3-box{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} } .gv3-close{ position:absolute;top:8px;right:10px;z-index:2; background:none !important;border:none !important;box-shadow:none !important; cursor:pointer;color:color-mix(in srgb, var(--paper) 60%, var(--ink)) !important; font-family:var(--fm);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px} .gv3-close:hover{color:var(--sig) !important} .gv3-eyebrow{font-family:var(--fm);font-size:10.5px;letter-spacing:.24em; color:var(--sig);text-transform:uppercase;margin:0 0 10px} /* ---------- Kamera-Viewport ---------- */ .gv3-cam{position:relative;aspect-ratio:16/7;min-height:118px;overflow:hidden; border:1px solid var(--line);background:rgba(0,0,0,.35);margin:0 0 10px} .gv3-corner{position:absolute;width:14px;height:14px;border:2px solid var(--sig)} .gv3-corner.tl{top:6px;left:6px;border-right:0;border-bottom:0} .gv3-corner.tr{top:6px;right:6px;border-left:0;border-bottom:0} .gv3-corner.bl{bottom:6px;left:6px;border-right:0;border-top:0} .gv3-corner.br{bottom:6px;right:6px;border-left:0;border-top:0} .gv3-face{position:absolute;left:50%;top:50%;width:78px;height:98px; transform:translate(-50%,-54%);border:1.5px dashed color-mix(in srgb, var(--paper) 55%, transparent); border-radius:50%;animation:gv3facepulse 2.4s ease-in-out infinite} .gv3-scanline{position:absolute;left:0;right:0;top:-30%;height:28%; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--sig) 30%, transparent), transparent); animation:gv3sweep 2.1s linear infinite} .gv3-rec{position:absolute;top:7px;left:26px;font-family:var(--fm);font-size:10px; letter-spacing:.16em;color:color-mix(in srgb, var(--paper) 75%, var(--ink))} .gv3-rec i{display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--bad);margin-right:6px;animation:gv3blink 1s steps(2) infinite} .gv3-wifi{position:absolute;right:10px;bottom:8px;width:34px;height:34px} .gv3-wifi span{position:absolute;inset:auto 0 0 auto;right:0;bottom:0; border:2px solid var(--nato);border-radius:50%;opacity:0; animation:gv3ping 2.4s ease-out infinite} .gv3-wifi span:nth-child(1){width:10px;height:10px;animation-delay:0s} .gv3-wifi span:nth-child(2){width:22px;height:22px;animation-delay:.35s} .gv3-wifi span:nth-child(3){width:34px;height:34px;animation-delay:.7s} .gv3-camlabel{position:absolute;left:0;right:0;bottom:6px;text-align:center; font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:color-mix(in srgb, var(--paper) 80%, var(--ink))} .gv3-camlabel.bad{color:var(--bad);animation:gv3blink 1s steps(2) infinite} /* ---------- Protokoll ---------- */ .gv3-log{font-family:var(--fm);font-size:12.5px;line-height:1.75; min-height:calc(5 * 1.75 * 12.5px); color:color-mix(in srgb, var(--paper) 80%, var(--ink));margin:0 0 10px; overflow:hidden} .gv3-log .ok{color:var(--nato)} .gv3-log .bad{color:var(--bad)} /* ---------- Score ---------- */ .gv3-score{display:none;grid-template-columns:auto 1fr;gap:2px 14px;align-items:baseline; border:1px solid var(--line);border-left:3px solid var(--sig); padding:10px 14px;margin:0 0 10px;font-family:var(--fm)} .gv3-score.on{display:grid} .gv3-score .lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:color-mix(in srgb, var(--paper) 68%, var(--ink))} .gv3-score .num{font-size:32px;font-weight:700;color:var(--paper); font-variant-numeric:tabular-nums;line-height:1;grid-row:span 2} .gv3-score .sub{font-size:11px;letter-spacing:.05em; color:color-mix(in srgb, var(--paper) 68%, var(--ink))} .gv3-score.bad .num{color:var(--bad)} .gv3-score.bad{border-left-color:var(--bad); background:color-mix(in srgb, var(--bad) 7%, transparent)} .gv3-score .sub .warn{color:var(--bad);animation:gv3blink 1.1s steps(2) infinite} /* ---------- Nato ---------- */ .gv3-nato{display:none;border-left:3px solid var(--nato); background:rgba(232,180,90,.07);padding:10px 14px;margin:0 0 10px; font-family:var(--fm);font-size:13px;font-weight:500;line-height:1.85; color:var(--nato)} .gv3-nato.on{display:block} .gv3-foot{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-align:center; color:color-mix(in srgb, var(--paper) 55%, var(--ink))} /* ---------- Effekte ---------- */ .gv3-box.warn{animation:gv3flicker .5s steps(2) 3} .gv3-box.glitching{animation:gv3glitch .4s steps(2) 2} @keyframes gv3sweep{0%{top:-30%}100%{top:110%}} @keyframes gv3facepulse{0%,100%{opacity:.55}50%{opacity:1}} @keyframes gv3blink{50%{opacity:.15}} @keyframes gv3ping{0%{opacity:.9;transform:scale(.4)}80%{opacity:0}100%{opacity:0;transform:scale(1.05)}} @keyframes gv3flicker{0%,100%{filter:none}50%{filter:brightness(1.6) contrast(1.2)}} @keyframes gv3glitch{0%{transform:translate(0)}25%{transform:translate(-6px,2px) skewX(3deg)} 50%{transform:translate(5px,-2px)}75%{transform:translate(-3px,1px) skewX(-2deg)}100%{transform:translate(0)}} @media (max-width:420px){ .gv3-box{padding:14px 14px 12px} .gv3-score .num{font-size:28px} } @media (prefers-contrast: more), (prefers-reduced-transparency: reduce){ .gv3{background:rgba(0,0,0,.85);-webkit-backdrop-filter:none;backdrop-filter:none} .gv3-box{background:var(--theme-panel,#1a120c);-webkit-backdrop-filter:none;backdrop-filter:none} } @media (prefers-reduced-motion: reduce){ .gv3 *, .gv3{animation:none !important} }