/* Erlebnisse unter /erleben/ im Erscheinungsbild der Website (layouts/app.njk lädt diese Datei nach game.css, scan.css
   bzw. styles.css). Die Spiel-Styles bleiben unverändert aus erleben.solbytech.at übernommen; hier werden nur ihre
   Tokens auf die dunklen Website-Farben gelegt und Kopfzeile und Menü an die Website angeglichen.
   Maße in px statt rem: Die Spiele skalieren rem mit der Fenstergröße, Kopfzeile und Menü sollen das nicht. */

@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ---------- Farben und Schrift der Website (main.css, dunkles Theme) ---------- */
:root {
  --black: #0b0b0b;          /* --c-bg */
  --white: #f2f2f2;          /* --c-text */
  --gray-050: #f2f2f2;
  --gray-200: #e6e7e8;       /* Styleguide-Grau hell */
  --gray-400: #b5b2b1;       /* --c-text-muted */
  --gray-600: #55545b;       /* --c-border-strong */
  --gray-750: #2c2b31;       /* --c-surface-strong */
  --gray-850: #222126;       /* --c-surface */
  --gray-900: #19181c;       /* --c-bg-muted */
  --line: #34333a;           /* --c-border */
  --line-strong: #55545b;
  --panel: rgba(25, 24, 28, .94);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --site-header: rgba(11, 11, 11, .88);
  --site-radius: 4px;
}
html[data-mode="web"] body { background: linear-gradient(135deg, #19181c 0%, #0b0b0b 55%) fixed; }

/* Labels wie auf der Website in IBM Plex Mono („Prüfprotokoll“) statt fetter Versalien */
html[data-mode="web"] .eyebrow,
html[data-mode="web"] .top-title,
html[data-mode="web"] .kiosk-status,
html[data-mode="web"] .legal-links a,
html[data-mode="web"] .web-status { font-family: var(--mono); font-weight: 500; }

/* „Tippen“ statt ENTER in den Spielregeln (Touch) erbte die Optik der Nummern 01–03 */
html[data-mode="web"] .rule-row strong .touch-label { color: inherit; font: inherit; }

/* ---------- Kopfzeile wie die Website: Wortmarke, Menü rechts ---------- */
html[data-mode="web"] .topbar { background: var(--site-header); border-bottom-color: var(--line); }
html[data-mode="web"] .brand-lockup { color: var(--white); text-decoration: none; }
html[data-mode="web"] .brand-lockup .sbt-icon { display: none; }
html[data-mode="web"] .brand-lockup .sbt-wordmark { width: 156px; height: 14.4px; }
html[data-mode="web"] .web-nav { justify-self: end; gap: 16px; }

.site-menu { position: relative; }
.site-menu > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--site-radius); color: var(--white); font: 600 15px/1 "Open Sans", "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; list-style: none; user-select: none; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu > summary:hover, .site-menu[open] > summary { border-color: var(--white); }
.site-menu-bars, .site-menu-bars::before, .site-menu-bars::after { position: relative; display: block; width: 18px; height: 2px; background: currentColor; content: ""; transition: transform .2s ease; }
.site-menu-bars::before, .site-menu-bars::after { position: absolute; left: 0; }
.site-menu-bars::before { top: -6px; }
.site-menu-bars::after { top: 6px; }
.site-menu[open] .site-menu-bars { background: transparent; }
.site-menu[open] .site-menu-bars::before { transform: translateY(6px) rotate(45deg); }
.site-menu[open] .site-menu-bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-menu-panel { position: absolute; top: calc(100% + 12px); right: 0; z-index: 120; display: grid; gap: 4px; width: min(320px, calc(100vw - 32px)); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--site-radius); background: var(--black); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); font: 400 16px/1.4 "Open Sans", "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-transform: none; user-select: text; }
.site-menu-panel ul { margin: 0; padding: 0; list-style: none; }
.site-menu-panel li + li { border-top: 1px solid var(--line); }
.site-menu-panel a { display: block; padding: 10px 0; color: var(--gray-400); text-decoration: none; }
.site-menu-panel a:hover, .site-menu-panel a.is-active, .site-menu-panel a[aria-current="page"] { color: var(--white); }
.site-menu-panel a.is-active, .site-menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .5em; }
.site-menu-label { margin: 12px 0 0; color: var(--gray-400); font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.site-menu-panel .site-menu-cta { margin-top: 12px; padding: 12px 16px; border-radius: var(--site-radius); color: #0b0b0b; background: #ffffff; font-weight: 600; text-align: center; }
.site-menu-panel .site-menu-cta:hover { color: #0b0b0b; background: var(--gray-200); }
.site-menu :focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- Handy: Kopfzeile kompakt, Steuerleiste ohne Querscrollen ---------- */
@media (max-width: 820px), (max-height: 560px) {
  html[data-mode="web"] .brand-lockup .sbt-wordmark { width: 120px; height: 11px; }
  /* Die anderen Erlebnisse stehen im Menü */
  html[data-mode="web"] #demo-button, html[data-mode="web"] #scan-button, html[data-mode="web"] #game-button { display: none; }
  html[data-mode="web"] .controlbar { flex-wrap: wrap; justify-content: space-between; row-gap: 0; overflow-x: visible; }
  html[data-mode="web"] .control-cluster { flex-wrap: wrap; }
  html[data-mode="web"] .web-status { display: none; }
}
@media (max-width: 429px) {
  .site-menu > summary { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu-bars, .site-menu-bars::before, .site-menu-bars::after { transition: none; }
}