/* ============================================================ OTR | otr-base.css | Version 1.0.0 | 2026-06-30 Verbindliche Basis fuer alle Seiten von otrgaming.work. Einzige Wahrheitsquelle: references/brand.md Regel: In Seiten-CSS NIE Hex direkt — immer diese Variablen. ============================================================ */ /* --- Farbpalette (verbindlich) + abgeleitete Werte --------- */ :root { --otr-near-black: #241C12; --otr-amber: #FDA322; --otr-creme: #F5F0EB; --otr-burnt-orange: #D9531E; --otr-apricot: #F7C48A; /* Abgeleitete Werte */ --otr-amber-dim: rgba(253, 163, 34, 0.12); --otr-amber-border: rgba(253, 163, 34, 0.25); --otr-text-muted: rgba(245, 240, 235, 0.5); --otr-text-dim: rgba(245, 240, 235, 0.35); /* Layout-Konstanten */ --otr-container: 960px; --otr-section-gap: 56px; } /* --- Reset ------------------------------------------------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--otr-near-black); color: var(--otr-creme); font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } /* --- Typografie (brand.md) --------------------------------- */ h1, h2, h3 { font-family: 'Anton', sans-serif; font-weight: 400; letter-spacing: 0.02em; line-height: 1; } h1 { font-size: clamp(36px, 6vw, 72px); } h2 { font-size: clamp(24px, 4vw, 48px); } h3 { font-size: clamp(18px, 2.5vw, 26px); } p { font-size: 15px; line-height: 1.6; } a { color: var(--otr-amber); text-decoration: none; transition: opacity 0.2s, color 0.2s; } a:hover { opacity: 0.85; } /* Akzent-Helfer */ .amber { color: var(--otr-amber); } .burnt { color: var(--otr-burnt-orange); } .muted { color: var(--otr-text-muted); } .dim { color: var(--otr-text-dim); } /* --- Layout ------------------------------------------------ */ .container { max-width: var(--otr-container); margin: 0 auto; padding: 0 24px; } section { margin-bottom: var(--otr-section-gap); } /* --- Marken-Erkennungsmerkmal: 2px Amber-Linie oben -------- */ /* Auf per Klasse, oder auf .hero / Card-Gruppen. */ .otr-topline, .hero { position: relative; } .otr-topline::before, .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--otr-amber); z-index: 10; } /* --- Hero-Muster ------------------------------------------- */ .hero { min-height: 60vh; padding: 80px 24px; background: var(--otr-near-black); display: flex; align-items: center; } .hero .eyebrow { margin-bottom: 18px; } .hero h1 { margin-bottom: 20px; } .hero .lead { margin-bottom: 32px; max-width: 560px; } /* --- Footer (Standard alle Seiten) ------------------------- */ .otr-footer { position: relative; background: var(--otr-near-black); border-top: 1px solid var(--otr-amber-border); padding: 48px 24px 40px; } .otr-footer .container { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; } .otr-footer .otr-wordmark { font-family: 'Anton', sans-serif; font-size: 22px; letter-spacing: 0.08em; color: var(--otr-amber); } .otr-footer nav { display: flex; flex-wrap: wrap; gap: 8px 18px; } .otr-footer nav a { font-size: 13px; color: var(--otr-creme); } .otr-footer nav a:hover { color: var(--otr-amber); } .otr-footer .otr-claim { width: 100%; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--otr-amber-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--otr-text-dim); } .otr-footer .otr-claim .vlc { color: var(--otr-amber); } /* --- Reduced motion --------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }