/* ============================================================================ KCS Games — Design-System im KCS-Markendesign (kcs-blau + accent-orange, Outfit/DM-Sans). Dunkle „Game"-Variante der KCS-Tokens: tiefe kcs-Blautöne als Spielfläche, helle Schrift, kcs-blau/orange als Akzente. LESBAR: DM Sans für allen Text in großzügigen Größen, Outfit für Titel. Self-contained (Fonts lokal). Einbinden: ============================================================================ */ @font-face { font-family:'Outfit'; src:url('../shared/fonts/outfit-400.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Outfit'; src:url('../shared/fonts/outfit-600.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Outfit'; src:url('../shared/fonts/outfit-700.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('../shared/fonts/dmsans-400.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('../shared/fonts/dmsans-500.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'DM Sans'; src:url('../shared/fonts/dmsans-700.woff2') format('woff2'); font-weight:700; font-display:swap; } :root { /* KCS-Markenpalette (identisch zu kcs_webseite globals.css) */ --kcs-50:#EEF2FA; --kcs-100:#D6E0F5; --kcs-200:#B0C4E8; --kcs-300:#7FA0D6; --kcs-400:#5580C0; --kcs-500:#3566AC; --kcs-600:#244EA4; --kcs-700:#1D3F8A; --kcs-800:#1D3178; --kcs-900:#172A5C; --kcs-950:#0F1B3D; --acc-300:#FFBD71; --acc-400:#FFA038; --acc-500:#F18C25; --acc-600:#D97A15; --acc-700:#B46210; --ok:#34D399; --ok-700:#047857; --warn:#FBBF24; --danger:#F87171; --danger-700:#B91C1C; /* Dunkle Game-Variante */ --g-bg: #0B1430; /* tiefblauer Spiel-Hintergrund */ --g-surface: #14203F; /* Panel/Karte */ --g-surface-2:#1D2E54; /* erhaben/hover */ --g-line: #2A3E68; /* Rahmen */ --g-ink: #F4F7FC; /* Text hell (kontraststark) */ --g-ink-dim: #A9B6D0; /* Text gedimmt */ --g-primary: #4C82E0; /* helles kcs-blau für Text/Akzent auf dunkel (Kontrast) */ --g-accent: var(--acc-500); --font-head: 'Outfit', system-ui, sans-serif; --font-body: 'DM Sans', system-ui, sans-serif; --g-radius: 14px; --g-shadow: 0 10px 40px rgba(0,0,0,.45); --g-glow-primary: 0 0 0 1px rgba(76,130,224,.25) inset, 0 0 18px rgba(76,130,224,.28); --g-glow-accent: 0 0 18px rgba(241,140,37,.35); } /* ── Grund-Layout ──────────────────────────────────────────────────────── */ /* Die Basis ist SCROLLBAR. Die Scroll-Sperre steht seit p10-1 in der Opt-in- Klasse .kcs-body--fixed und gehoert nur Seiten mit Vollbild-Canvas. Vorher stand `overflow:hidden` hier und galt damit fuer JEDE Seite, die das Design-System einbindet — auch fuer die Landing. Alles unterhalb des ersten Bildschirms war dann unerreichbar (Befund Robin 2026-07-27: „die seite mit der game auswahl ist nicht scrollbar"; gemessen bei 375x667: 7 Kacheln auf 1909 px Inhalt, Mausrad bewegte 0 px, letzte Kachel bei y=1869). ⚠️ `overflow:hidden` heisst NICHT „nicht scrollbar" — der Container bleibt programmatisch scrollbar (nur `clip` waere es nicht), es faellt bloss die NUTZER-Eingabe weg. Ein Test, der `scrollTop` setzt, besteht deshalb auch im kaputten Zustand. Zum Pruefen echte Wheel-/Touch-Events schicken. ⚠️ Ein Override im einbindenden Dokument repariert das NICHT: `body` (0,0,1) verliert gegen `.kcs-body` (0,1,0). Genau daran scheiterte der Versuch in landing/index.html. Wer hier etwas ueberschreiben will, braucht mindestens dieselbe Spezifitaet. */ .kcs-body { margin:0; min-height:100vh; /* Fallback fuer Engines ohne dvh */ min-height:100dvh; /* dvh = der SICHTBARE Viewport (Adressleiste!) */ background: radial-gradient(1100px 560px at 50% -12%, rgba(76,130,224,.14), transparent 62%), radial-gradient(820px 460px at 92% 112%, rgba(241,140,37,.10), transparent 60%), var(--g-bg); color:var(--g-ink); font-family:var(--font-body); font-size:16px; line-height:1.5; display:flex; flex-direction:column; align-items:center; justify-content:center; /* `safe` kippt die Zentrierung auf flex-start, sobald der Inhalt ueberlaeuft. HIER ist das reine Vorsorge: .kcs-body hat nur min-height, waechst also auf Inhaltshoehe — es gibt keinen freien Raum und `center` tut ohnehin nichts. Tragend wird `safe` nur bei fester Hoehe (.kcs-body--fixed); .kcs-overlay zentriert seit p10-11 ueber Auto-Margins (s. dort) und haengt NICHT mehr an safe-Support. Aeltere Engines verwerfen die Zeile und behalten `center`. */ justify-content:safe center; /* Vertikal scrollt das Dokument (body-Overflow propagiert auf den Viewport), horizontal wird geklemmt — kein versehentliches Querschieben auf Touch. */ overflow-x:hidden; overflow-y:auto; -webkit-tap-highlight-color:transparent; } /* Vollbild-Canvas-Spiele: kein Scrollen, exakt so hoch wie der sichtbare Viewport. Das ist das alte .kcs-body-Verhalten — die 6 Spiele setzen die Klasse zusaetzlich und sehen damit unveraendert aus (verifiziert 375x667: overflow hidden, kein Querlauf). Hier ist die Hoehe FEST, also greift `safe center` aus .kcs-body wirklich: zu hoher Inhalt wird unten abgeschnitten statt oben UND unten. Pro-Spiel-Layout fuer kleine/quere Screens ist ein eigener Schritt (M3/M4). */ .kcs-body--fixed { height:100vh; /* Fallback: Engines ohne dvh verwerfen die */ height:100dvh; /* naechste Zeile sonst ERSATZLOS (p10-11) */ overflow:hidden; } /* ── Typo ──────────────────────────────────────────────────────────────── */ .kcs-title { font-family:var(--font-head); font-weight:700; font-size:clamp(28px, 5.2vw, 52px); line-height:1.15; letter-spacing:-.5px; color:var(--g-ink); text-align:center; margin:0; } .kcs-title .accent { color:var(--g-accent); } .kcs-title--grad { background:linear-gradient(120deg, #6FA0F0, var(--acc-400)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .kcs-sub { color:var(--g-ink-dim); font-size:16px; line-height:1.6; text-align:center; margin:0; } .kcs-hint { color:var(--g-ink-dim); font-size:14px; line-height:1.7; } /* ── Panels / Overlays ─────────────────────────────────────────────────── */ .kcs-panel { background:linear-gradient(180deg, var(--g-surface), var(--g-bg)); border:1px solid var(--g-line); border-radius:var(--g-radius); box-shadow:var(--g-glow-primary), var(--g-shadow); padding:clamp(22px,4vw,40px); } /* Start-/Pause-/Shop-Screens. Die liegen auf inset:0, sind also genau viewport-hoch — ihr INHALT ist auf Handys aber oft hoeher (Isar Drive quer: Titel + Fliesstext + 11er-Wagenliste + Hinweise + Select + Namensfeld + Button). Ohne eigenes Scrollen ist der unterste Button dann unerreichbar, das Spiel also nicht startbar. Darum overflow-y + `safe center` wie bei .kcs-body. */ .kcs-overlay { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; /* Zentrierung ueber AUTO-MARGINS (erstes Kind margin-top, letztes margin-bottom, s. unten) statt `safe center`: Engines ohne safe-Support (aeltere iOS-Safaris) zentrieren sonst UND schneiden den Kopf ab — der Bereich oberhalb des Scroll-Ursprungs ist unerreichbar. Auto-Margins verhalten sich ueberall gleich: freier Platz → mittig; Ueberlauf → Margins werden 0 und der Inhalt beginnt scrollbar oben (p10-11). */ justify-content:flex-start; gap:22px; text-align:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background:radial-gradient(130% 130% at 50% 28%, rgba(11,20,48,.86), rgba(11,20,48,.97)); backdrop-filter:blur(3px); } .kcs-overlay > :first-child { margin-top:auto; } .kcs-overlay > :last-child { margin-bottom:auto; } .kcs-overlay.hidden { display:none; } /* ── Buttons (KCS-CI: primär = accent-orange, sekundär = kcs-blau outline) ── */ .kcs-btn { font-family:var(--font-head); font-size:17px; font-weight:600; letter-spacing:.2px; color:#fff; background:linear-gradient(180deg, var(--acc-400), var(--acc-600)); border:none; border-radius:12px; padding:15px 30px; min-height:52px; cursor:pointer; box-shadow:0 4px 0 #8f4d10, var(--g-glow-accent); transition:transform .06s ease, box-shadow .06s ease, filter .15s ease; } .kcs-btn:hover { filter:brightness(1.06); } .kcs-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #8f4d10, var(--g-glow-accent); } .kcs-btn:focus-visible { outline:3px solid var(--acc-300); outline-offset:3px; } .kcs-btn--secondary { background:transparent; color:#9FBEF5; border:2px solid var(--g-primary); box-shadow:none; } .kcs-btn--secondary:hover { background:rgba(76,130,224,.12); } .kcs-btn--secondary:active { transform:translateY(2px); box-shadow:none; } /* ── HUD ───────────────────────────────────────────────────────────────── */ .kcs-hud { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; } .kcs-stat { background:var(--g-surface); border:1px solid var(--g-line); border-radius:12px; padding:10px 18px; min-width:92px; text-align:center; } .kcs-stat__label { font-family:var(--font-body); font-size:12px; color:var(--g-ink-dim); letter-spacing:.4px; text-transform:uppercase; display:block; margin-bottom:5px; } .kcs-stat__value { font-family:var(--font-head); font-size:24px; font-weight:700; color:var(--g-ink); } .kcs-chip { display:inline-block; font-family:var(--font-body); font-weight:500; font-size:12px; padding:5px 12px; border-radius:999px; background:var(--g-surface-2); color:#9FBEF5; border:1px solid var(--g-line); } .kcs-blink { animation:kcs-blink 1.1s steps(2,start) infinite; color:var(--acc-400); font-size:15px; font-weight:600; } @keyframes kcs-blink { 50% { opacity:0; } } /* dezenter Marken-Footer-Hauch */ .kcs-brandline { font-family:var(--font-head); font-size:12px; color:var(--g-ink-dim); letter-spacing:1px; opacity:.7; } @media (prefers-reduced-motion: reduce) { .kcs-blink { animation:none; } }