/* * ============================================================ * MHL DESKTOP-ONLY GATE V3 * ============================================================ * * Desktop-Minimum: * * 1430 x 754 CSS-Pixel * * Die Viewport-Erkennung erfolgt vollständig über * desktop-only-gate.js. * * Diese CSS-Datei ist ausschließlich für die Darstellung * des Desktop-Only-Gates zuständig. * ============================================================ */ #mhl-desktop-only-gate { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; display: none; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #06283a !important; z-index: 2147483647 !important; isolation: isolate !important; box-sizing: border-box !important; } #mhl-desktop-only-gate.is-active { display: flex !important; } /* * Hintergrund: * * Das gleiche Bild wird als cover verwendet. * * Dadurch entstehen auch bei ungewöhnlichen * Seitenverhältnissen keine schwarzen Balken. * * Dieser Hintergrund darf beschnitten werden. * Das eigentliche Hinweisbild darunter bleibt vollständig * sichtbar. */ #mhl-desktop-only-gate::before { content: ""; position: absolute !important; inset: 0 !important; background-image: var( --mhl-gate-background ); background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; filter: blur(18px) brightness(0.78) !important; transform: scale(1.08) !important; z-index: -2 !important; pointer-events: none !important; } /* * Dunkle/ruhige Randfläche über dem Hintergrund. */ #mhl-desktop-only-gate::after { content: ""; position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, 0.08) !important; z-index: -1 !important; pointer-events: none !important; } /* * Das eigentliche Hinweisbild. * * contain = niemals abschneiden. */ #mhl-desktop-only-gate-image { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; box-sizing: border-box !important; user-select: none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; pointer-events: none !important; } /* * Scrollen der eigentlichen Anwendung sperren, * solange das Gate sichtbar ist. */ html.mhl-desktop-only-locked, body.mhl-desktop-only-locked { overflow: hidden !important; } /* * Dynamische Browser-Viewport-Höhe. * * Moderne mobile Browser verwenden damit die tatsächlich * verfügbare dynamische Höhe. */ @supports (height: 100dvh) { #mhl-desktop-only-gate { height: 100dvh !important; } } /* ============================================================ MHL IMPRESSUM – PRIVATE ADDRESS GUEST V9 ============================================================ */ /* * Gastfeld: * elegantes Glass-Panel statt weißer Balken. */ .scene-legal .private-address--guest { position: relative; display: block; width: 100%; max-width: 420px; min-width: 0; box-sizing: border-box; padding: 16px 18px; border: 1px solid rgba(92, 201, 220, 0.48); border-radius: 16px; background: linear-gradient( 135deg, rgba(255,255,255,0.075), rgba(14,67,86,0.30) ); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 24px rgba(0,0,0,0.14); cursor: pointer; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease; } .scene-legal .private-address--guest:hover, .scene-legal .private-address--guest:focus-visible { border-color: rgba(92,201,220,0.82); box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 10px 28px rgba(0,0,0,0.20), 0 0 0 2px rgba(92,201,220,0.12); } .scene-legal .private-address--guest:focus-visible { outline: 2px solid rgba(92,201,220,0.55); outline-offset: 2px; } /* * Überschrift bleibt vollständig scharf. */ .scene-legal .private-address--guest .private-address__guest-label { display: block; margin: 0 0 8px; color: rgba(255,255,255,0.97); font-weight: 700; line-height: 1.35; } /* * NUR der maskierte Adresstext bekommt den Blur. * * Kein filter auf dem Elterncontainer! * Dadurch bleiben Hinweis, Label und Rahmen scharf. */ .scene-legal .private-address--guest .private-address__masked { display: inline-block; max-width: calc(100% - 34px); color: rgba(255,255,255,0.92); font-size: 0.98rem; line-height: 1.65; filter: blur(6px); opacity: 0.78; user-select: none; pointer-events: none; transform: translateZ(0); /* * Verhindert die bisherige Darstellung als weiße Balken, * sofern ältere Regeln mit background/border vorhanden sind. */ background: none !important; border: 0 !important; box-shadow: none !important; } /* * Login-Hinweis bleibt scharf. */ .scene-legal .private-address--guest .private-address__login-hint { display: block; margin-top: 11px; color: rgba(255,255,255,0.95); font-size: 0.92rem; line-height: 1.45; font-weight: 600; background: none !important; filter: none !important; opacity: 1 !important; } /* * Lock-Symbol separat und scharf. * * Unicode bleibt UTF-8 und wird nicht über eine Shell- * Zeichensatzkonvertierung erzeugt. */ .scene-legal .private-address--guest::after { content: "\1F512"; position: absolute; top: 17px; right: 17px; font-size: 1.18rem; line-height: 1; opacity: 0.84; pointer-events: none; } /* * Sonderzeichen und deutsche Umlaute nicht zerstören. */ .scene-legal .private-address--guest .private-address__guest-label, .scene-legal .private-address--guest .private-address__masked, .scene-legal .private-address--guest .private-address__login-hint { overflow-wrap: anywhere; word-break: normal; }