/* ========================================================================== AKTE 26/27 – Dienstrecht unter Verschluss Custom Theme + Game-UI (dunkle Behörden-/Sicherheitssystem-Ästhetik) ========================================================================== */ :root { --bg: #0a0e14; --bg-panel: #10151f; --bg-panel-2: #161d2b; --border: #263248; --text: #dfe7f5; --text-dim: #8ea0bd; --text-faint: #55647f; --accent: #3ea6ff; --accent-dim: #1c4d73; --status-blue: #4dabf7; --status-green: #2fb56a; --status-green-bg: rgba(47, 181, 106, 0.12); --status-red: #ef4444; --status-red-bg: rgba(239, 68, 68, 0.12); --status-yellow: #f2c94c; --status-yellow-bg: rgba(242, 201, 76, 0.1); --status-grey: #566078; --status-grey-bg: rgba(86, 96, 120, 0.12); --font-mono: "Courier New", Courier, monospace; --font-sans: "Segoe UI", Helvetica, Arial, sans-serif; /* Basis-Schriftgröße für die gesamte Präsentation: alle em-Werte im restlichen CSS sind relativ dazu gesetzt. Wird sowohl auf .reveal als auch auf #overlays angewendet (siehe dort), damit Folien und Popups gleich groß wirken. */ --base-font-size: 34px; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; overflow: hidden; /* !important ist hier nötig: reveal.js hängt per JS die Klasse "reveal-viewport" an , und reveal.css definiert dafür ".reveal-viewport{background-color:#fff;color:#000;...}". Eine Klassen-Regel schlägt einen einfachen Typ-Selektor wie "body" an Spezifität, unabhängig von der Ladereihenfolge – ohne !important bliebe der Body-Hintergrund also weiß statt dunkel, egal was hier steht (u. a. relevant dafür, welche Farbe Safari als Fallback für die Adressleiste ausliest, siehe #hud weiter unten). */ background: var(--bg) !important; color: var(--text) !important; } .reveal { background: var(--bg); font-family: var(--font-sans); color: var(--text); font-size: var(--base-font-size); } /* Popups/Overlays leben außerhalb von .reveal (siehe index.html-Kommentar bei #overlays) und erben dessen Basis-Schriftgröße daher nicht automatisch – ohne diese Zeile wären Buttons/Auswahllisten in Popups winzig. */ #overlays { font-size: var(--base-font-size); font-family: var(--font-sans); color: var(--text); } .reveal .slides section { text-align: left; height: 100%; /* Reveal.js positioniert Sections absolut und zentriert sie per JS über einen berechneten linken Versatz. Im fluiden width/height:'100%'-Modus kann diese Berechnung bei sehr schmalen Viewports (Smartphones) leicht danebenliegen und die Section seitlich verschieben, wodurch Inhalte rechts über den Bildschirmrand hinausragen. Erzwingt stattdessen immer volle, unversetzte Breite relativ zu .slides. */ left: 0 !important; right: 0 !important; width: 100% !important; } /* ---------- generic screen scaffolding ---------- */ .screen { display: flex; flex-direction: column; justify-content: center; justify-content: safe center; height: 100%; padding: 1.3em 3em; box-sizing: border-box; overflow-y: auto; } /* ---------- Icon-Grafiken (Inline-SVG-Sprite, siehe index.html) ---------- */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .screen-visual { width: 2.2em; height: 2.2em; margin-bottom: 0.35em; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(62, 166, 255, 0.25)); } .screen-visual .glyph { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .screen-visual .glyph-thick { fill: none; stroke: var(--status-green); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; } .screen-visual .glyph-dim { fill: none; stroke: var(--text-faint); stroke-width: 4; stroke-linecap: round; } .screen-visual .glyph-fill { fill: var(--accent); stroke: none; } .screen-visual .glyph-fill-soft { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 3; } .screen-visual .glyph-text { fill: var(--accent); font-family: var(--font-mono); font-weight: bold; } .screen-kicker { font-family: var(--font-mono); letter-spacing: 0.12em; color: var(--accent); font-size: 0.5em; margin: 0 0 0.3em 0; text-transform: uppercase; } .screen h1, .screen h2 { font-family: var(--font-mono); color: var(--text); margin: 0 0 0.4em 0; text-shadow: none; } .screen h1 { font-size: 1.15em; letter-spacing: 0.03em; } .screen h2 { font-size: 0.9em; color: var(--accent); } .screen p { font-size: 0.55em; line-height: 1.5; color: var(--text-dim); margin: 0.5em 0; } .screen p.lead { font-size: 0.62em; color: var(--text); } /* ---------- cold open ---------- */ #cold-open { background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 3px ), radial-gradient(ellipse at 50% 30%, #0e1622 0%, #05070b 75%); } #cold-open .screen { align-items: center; text-align: center; } .system-header { font-family: var(--font-mono); font-size: 0.42em; color: var(--text-faint); letter-spacing: 0.15em; margin-bottom: 1.6em; } .system-header .sub { color: var(--text-dim); margin-top: 0.3em; } .access-denied { font-family: var(--font-mono); color: var(--status-red); font-size: 0.75em; letter-spacing: 0.05em; margin: 0.6em 0 1em 0; } .access-denied::before { content: "🔴 "; } .cursor-blink { display: inline-block; width: 0.5em; background: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 0.2em; } @keyframes blink { 50% { opacity: 0; } } /* ---------- buttons ---------- */ .btn { font-family: var(--font-mono); font-size: 0.5em; letter-spacing: 0.05em; color: var(--bg); background: var(--accent); border: none; padding: 0.7em 1.4em; border-radius: 3px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; box-shadow: 0 0 0 rgba(62, 166, 255, 0); } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(62, 166, 255, 0.35); } .btn:active { transform: translateY(0); } .btn.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); } .btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; transform: none; } .btn-row { display: flex; gap: 0.7em; flex-wrap: wrap; margin-top: 1em; } /* ---------- briefing cards ---------- */ .card-row { display: flex; gap: 0.8em; margin-top: 0.8em; flex-wrap: wrap; } .info-card { flex: 1 1 220px; min-width: 0; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.8em 1em; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; } .info-card:hover { border-color: var(--accent); transform: translateY(-2px); } .info-card .icon { font-size: 1.6em; } .info-card .label { font-family: var(--font-mono); font-size: 0.5em; color: var(--text); margin-top: 0.4em; letter-spacing: 0.04em; } /* ---------- top status bar (persistent HUD) ---------- */ #hud { position: fixed; top: 0; left: 0; right: 0; height: 46px; display: none; align-items: center; justify-content: space-between; padding: 0 1.2em; /* Safari (ab Version 26) ignoriert das theme-color-Meta-Tag und liest stattdessen die background-color eines sichtbaren position:fixed- Elements am oberen Rand aus, um die Adressleiste einzufärben – ist keines sichtbar, fällt es auf die background-color von zurück. Da #hud auf den meisten Screens genau so ein Element ist, braucht es zwingend eine EXPLIZITE background-color (nicht nur ein Gradient, der background-color sonst auf "transparent" stehen lässt), sonst bekommt Safari dort einen undefinierten/falschen Farbwert statt unserem Dunkel. */ background: #0d1320 linear-gradient(180deg, #0d1320 0%, rgba(13, 19, 32, 0.85) 100%); border-bottom: 1px solid var(--border); z-index: 40; font-family: var(--font-mono); font-size: 14px; color: var(--text-dim); backdrop-filter: blur(3px); } body.show-hud #hud { display: flex; } #hud .hud-left, #hud .hud-right { display: flex; align-items: center; gap: 1em; } #hud .hud-back { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-family: var(--font-mono); font-size: 12px; padding: 0.4em 0.8em; border-radius: 3px; cursor: pointer; } #hud .hud-back:hover { border-color: var(--accent); color: var(--accent); } #hud .akten-status { color: var(--text); letter-spacing: 0.05em; } #hud .akten-status b { color: var(--accent); } #hud .joker-count { color: var(--status-yellow); letter-spacing: 0.03em; } /* ---------- dashboard ---------- */ .akten-status-big { font-family: var(--font-mono); font-size: 0.5em; color: var(--text-dim); letter-spacing: 0.08em; margin-bottom: 0.5em; } .akten-status-big b { color: var(--accent); font-size: 1.3em; } .akte-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; margin-top: 0.4em; } .akte-card { position: relative; background: var(--bg-panel); border: 1px solid var(--border); border-left: 4px solid var(--status-blue); border-radius: 6px; padding: 0.6em 0.8em; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .akte-card:hover { transform: translateY(-2px); } .akte-card .num { font-family: var(--font-mono); font-size: 0.42em; color: var(--text-faint); letter-spacing: 0.1em; } .akte-card .title { font-size: 0.55em; color: var(--text); margin: 0.25em 0 0.15em 0; font-weight: 600; } .akte-card .teaser { font-size: 0.42em; color: var(--text-dim); font-style: italic; } .akte-card .status-pill { position: absolute; top: 0.7em; right: 0.7em; font-size: 0.36em; font-family: var(--font-mono); padding: 0.25em 0.5em; border-radius: 3px; background: var(--status-grey-bg); color: var(--text-dim); } .akte-card.solved { border-left-color: var(--status-green); } .akte-card.solved .status-pill { background: var(--status-green-bg); color: var(--status-green); } .akte-card.solved .status-pill::before { content: "🟢 "; } .akte-card:not(.solved) .status-pill::before { content: "🔴 "; } .akte-card.locked { cursor: not-allowed; opacity: 0.55; border-left-color: var(--status-grey); } .akte-card.locked .status-pill { background: var(--status-grey-bg); color: var(--text-faint); } .akte-card.locked .status-pill::before { content: "🔒 "; } /* ---------- popups / modals ---------- */ .overlay { position: fixed; inset: 0; background: rgba(4, 6, 10, 0.72); display: none; align-items: center; justify-content: center; z-index: 100; } .overlay.open { display: flex; } .popup { background: var(--bg-panel-2); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 8px; padding: 1.6em 1.8em; max-width: 640px; width: 88%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .popup h3 { font-family: var(--font-mono); font-size: 0.5em; color: var(--accent); margin: 0 0 0.6em 0; } .popup p { font-size: 0.4em; color: var(--text-dim); line-height: 1.55; } .popup .btn-row { margin-top: 1.2em; } /* ---------- choice / hotspot UI ---------- */ .choice-list { display: flex; flex-direction: column; gap: 0.35em; margin-top: 0.55em; } .choice-btn { text-align: left; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text); padding: 0.45em 0.8em; border-radius: 5px; font-size: 0.5em; cursor: pointer; font-family: var(--font-sans); } .choice-btn:hover { border-color: var(--accent); } .choice-btn .letter { font-family: var(--font-mono); color: var(--accent); margin-right: 0.6em; } .choice-btn.correct { border-color: var(--status-green); background: var(--status-green-bg); } .choice-btn.wrong { border-color: var(--status-red); background: var(--status-red-bg); } .hotspot-row { display: flex; gap: 0.5em; flex-wrap: wrap; margin-top: 0.6em; } .hotspot { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.5em 0.8em; cursor: pointer; font-size: 0.5em; color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease; } .hotspot:hover { border-color: var(--accent); transform: translateY(-2px); } .hotspot .emoji { font-size: 1.3em; display: block; margin-bottom: 0.2em; } .hotspot.flagged { border-color: var(--status-yellow); background: var(--status-yellow-bg); } .hotspot.correct { border-color: var(--status-green); background: var(--status-green-bg); } .hotspot.wrong { border-color: var(--status-red); background: var(--status-red-bg); } .hotspot.solved { border-color: var(--status-green); opacity: 0.65; } .overlay-panel { margin-top: 0.8em; } .feedback { font-family: var(--font-mono); font-size: 0.46em; padding: 0.6em 0.8em; border-radius: 5px; margin-top: 0.7em; display: none; } .feedback.show { display: block; } .feedback.ok { background: var(--status-green-bg); color: var(--status-green); border: 1px solid var(--status-green); } .feedback.bad { background: var(--status-red-bg); color: var(--status-red); border: 1px solid var(--status-red); } .feedback.hint { background: var(--status-yellow-bg); color: var(--status-yellow); border: 1px solid var(--status-yellow); } /* ---------- fields (Akte 01) ---------- */ .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5em; margin-top: 0.6em; } .field-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 6px; padding: 0.5em 0.7em; cursor: pointer; } .field-box:hover { border-color: var(--accent); } .field-box .field-label { font-family: var(--font-mono); font-size: 0.4em; color: var(--text-faint); letter-spacing: 0.06em; } .field-box .field-value { font-size: 0.5em; color: var(--status-red); margin-top: 0.25em; } .field-box.solved .field-value { color: var(--status-green); } .field-box.solved { border-color: var(--status-green); } /* ---------- joker ---------- */ .joker-btn { font-family: var(--font-mono); font-size: 0.42em; background: transparent; border: 1px dashed var(--status-yellow); color: var(--status-yellow); padding: 0.4em 0.8em; border-radius: 5px; cursor: pointer; margin-top: 0.6em; } .joker-btn:hover { background: var(--status-yellow-bg); } .joker-btn:disabled { opacity: 0.3; cursor: not-allowed; } /* ---------- Akte 05 grid ---------- */ .object-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; margin-top: 0.6em; } /* ---------- Akte 06 fill-in ---------- */ .blank-line { font-size: 0.55em; color: var(--text); margin: 0.5em 0; display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; } .blank-select { font-family: var(--font-mono); background: var(--bg-panel); color: var(--accent); border: 1px solid var(--accent-dim); border-radius: 4px; padding: 0.3em 0.5em; font-size: 0.85em; } /* ---------- code screen ---------- */ .code-elements { display: flex; gap: 0.6em; margin: 1em 0 1.4em 0; flex-wrap: wrap; } .code-chip { font-family: var(--font-mono); font-size: 0.7em; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-faint); padding: 0.5em 0.8em; border-radius: 5px; min-width: 2.2em; text-align: center; } .code-chip.revealed { color: var(--status-green); border-color: var(--status-green); } #code-input { font-family: var(--font-mono); font-size: 0.75em; letter-spacing: 0.2em; text-transform: uppercase; background: var(--bg-panel); border: 1px solid var(--accent); color: var(--text); padding: 0.5em 0.8em; border-radius: 5px; width: 10em; } /* ---------- finale ---------- */ #finale .screen { align-items: center; text-align: center; } .stamp { font-family: var(--font-mono); font-size: 1.1em; color: var(--status-green); border: 4px solid var(--status-green); border-radius: 10px; padding: 0.3em 0.6em; display: inline-block; transform: scale(0.6) rotate(-8deg); opacity: 0; animation: stampIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s forwards; } @keyframes stampIn { to { transform: scale(1) rotate(-8deg); opacity: 1; } } .status-lines { font-family: var(--font-mono); font-size: 0.48em; color: var(--text-dim); margin-top: 1.2em; } .status-lines div { margin: 0.2em 0; } .status-lines b { color: var(--text); } .mission-list { font-size: 0.5em; color: var(--text-dim); margin-top: 1em; line-height: 1.9; } /* ---------- debriefing ---------- */ #debriefing .screen { background: radial-gradient(ellipse at 50% 0%, #131a26 0%, var(--bg) 70%); } .reflect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; margin-top: 1.2em; } .reflect-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.1em 1.2em; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; } .reflect-card:hover { transform: translateY(-2px); border-color: var(--accent); } .reflect-card .title { font-size: 0.55em; color: var(--text); } /* ---------- misc ---------- */ .locked-note { font-family: var(--font-mono); font-size: 0.42em; color: var(--text-faint); margin-top: 1em; } .progress-note { font-size: 0.42em; color: var(--text-faint); margin-top: 0.6em; } /* ========================================================================== Responsive / Mobilgeräte ========================================================================== Reveal.js läuft im fluiden Modus (width/height:'100%' in game.js), d. h. .slides füllt den echten Viewport ohne Skalierungs-Transform. Dadurch greifen ganz normale @media-Queries auf echte Pixelgrößen – inklusive Hochformat auf Smartphones, nicht nur auf Tablet/Laptop-Breiten. ========================================================================== */ @media (max-width: 820px) { .akte-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reflect-grid { grid-template-columns: 1fr; } .card-row { flex-direction: column; } .info-card { flex-basis: auto; } } @media (max-width: 520px) { .akte-grid { grid-template-columns: 1fr; } .object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-grid { grid-template-columns: 1fr; } .screen { padding: 1em 1.2em; } #hud { font-size: 11px; padding: 0 0.6em; height: 40px; } #hud .hud-right { gap: 0.5em; } #hud .joker-count { display: none; } /* auf sehr schmalen Displays: Fortschritt hat Vorrang, Joker-Zähler bleibt im Spiel selbst sichtbar */ .popup { width: 94%; padding: 1.1em 1.2em; } } /* Schmale Smartphones im Hochformat (z. B. iPhone): eigene, kleinere Basis-Schriftgröße statt der Laptop/Tablet-Größe, damit Mehrspalten- Inhalte nicht zu winzigem Text gezwungen werden, sondern stattdessen auf eine Spalte umbrechen (siehe object-grid/field-grid oben). */ @media (max-width: 430px) { :root { --base-font-size: 24px; } .screen { padding: 0.8em 0.9em; } .screen-visual { width: 1.7em; height: 1.7em; margin-bottom: 0.25em; } .object-grid { grid-template-columns: 1fr; } .hotspot-row { flex-direction: column; } #code-input { width: 100%; } .btn-row { flex-direction: column; align-items: stretch; } } /* Smartphones im Querformat: viel Breite, aber sehr wenig Höhe (z. B. ~375px) – die obigen Breakpoints greifen breitenbasiert nicht, daher hier eine eigene, höhenbasierte Verkleinerung. */ @media (max-height: 420px) { :root { --base-font-size: 24px; } .screen { padding: 0.6em 1.4em; } .screen-visual { width: 1.5em; height: 1.5em; margin-bottom: 0.15em; } #hud { height: 34px; font-size: 10px; } .akte-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .object-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }