/* ============================================================= onetec Design System ------------------------------------------------------------- Einzige Quelle für Farben, Typografie, Abstände, Radius und Schatten. Alle Seitenstyles verwenden ausschließlich die hier definierten Custom Properties — keine losen Zahlen, keine hartcodierten Farben. Schriften sind lokal eingebunden (DSGVO): es geht kein Request an fonts.googleapis.com oder fonts.gstatic.com. ============================================================= */ /* ── Schriften ──────────────────────────────────────────────── Variable Fonts, jeweils latin + latin-ext. Lizenz: SIL OFL 1.1, siehe fonts/OFL-*.txt ------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/space-grotesk-latin.e6069ee7.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/space-grotesk-latin-ext.054c266f.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin.c9407645.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-ext.a28eb6d3.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ── 1. Basispalette — fünf Werte ─────────────────────────── Mehr Farben gibt es nicht. Alles Weitere wird abgeleitet. ----------------------------------------------------------- */ --c-sand: #F6F5F3; /* Kalkstein — Content-Flächen, fast neutral */ --c-navy: #102A44; /* onetec-Dunkelblau — Hero, Navigation, Footer */ --c-accent: #00C8E8; /* Türkis aus dem Logo-Schriftzug */ --c-ink: #1A1F26; /* Text, primär */ --c-ink-muted: #5D646C; /* Text, sekundär */ /* ── 2. Semantische Farben (ausschließlich abgeleitet) ────── Kontraste gegen den jeweiligen Untergrund in Klammern. ----------------------------------------------------------- */ /* Flächen hell */ --color-bg: var(--c-sand); --color-bg-alt: color-mix(in srgb, var(--c-navy) 5%, var(--c-sand)); /* abgesetzte Sektion */ --color-surface: var(--c-sand); /* Karte auf --color-bg-alt */ --color-surface-alt: var(--color-bg-alt); /* Karte auf --color-bg */ /* Flächen dunkel */ --color-bg-deep: var(--c-navy); --color-surface-deep: color-mix(in srgb, var(--c-sand) 6%, var(--c-navy)); /* Karte auf Dunkelblau */ /* Text auf hell */ --color-text: var(--c-ink); /* 15,2:1 */ --color-text-muted: var(--c-ink-muted); /* 5,5:1 */ /* Text auf dunkel */ --color-text-on-deep: var(--c-sand); /* 13,4:1 */ --color-text-muted-on-deep: color-mix(in srgb, var(--c-sand) 60%, var(--c-navy)); /* 5,8:1 */ /* Akzent */ --color-accent: var(--c-accent); /* auf navy 7,3:1 */ --color-accent-ink: color-mix(in srgb, var(--c-accent) 45%, var(--c-navy)); /* Akzenttext auf hell, 5,1:1 */ --color-accent-hover: color-mix(in srgb, var(--c-accent) 85%, var(--c-navy)); --color-on-accent: var(--c-navy); /* Text auf Akzentfläche, 7,3:1 */ --color-accent-wash: color-mix(in srgb, var(--c-accent) 8%, transparent); /* zarte Akzentfläche */ /* Markenclaim in der Kopfleiste */ --color-claim: color-mix(in srgb, var(--c-accent) 55%, var(--color-text-muted-on-deep)); /* 6,3:1 auf Navy */ /* Linien */ --color-border: color-mix(in srgb, var(--c-navy) 12%, var(--c-sand)); --color-border-deep: color-mix(in srgb, var(--c-sand) 18%, var(--c-navy)); /* Überlagerungen (Navigation, mobiles Menü) */ --color-overlay-deep: color-mix(in srgb, var(--c-navy) 88%, transparent); /* ── 3. Typografie ─────────────────────────────────────────── */ --font-heading: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Skala: 14 · 16 · 20 · 24 · 40 · 56 px */ --text-h1: 3.5rem; --lh-h1: 1.05; --tracking-h1: -0.03em; --text-h2: 2.5rem; --lh-h2: 1.15; --tracking-h2: -0.02em; --text-h3: 1.5rem; --lh-h3: 1.3; --tracking-h3: -0.01em; --text-h4: 1.25rem; --lh-h4: 1.4; --tracking-h4: -0.005em; --text-body: 1rem; --lh-body: 1.65; --text-small: 0.875rem; --lh-small: 1.55; --text-micro: 0.6875rem; /* 11px, nur für getrackte Versal-Claims */ --tracking-label: 0.12em; /* Versalien-Label */ /* ── 4. Abstände — 8er-Raster ──────────────────────────────── */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --section-y: var(--space-10); /* großzügiger Sektionsabstand */ --container-max: 1140px; --container-pad: var(--space-5); --logo-height: 36px; /* Wortmarke in der Kopfleiste */ --logo-height-footer: 72px; /* volle Marke inkl. Claim im Footer */ --nav-claim-height: 20px; /* Claimzeile, klappt beim Scrollen weg */ --nav-pad-y: var(--space-4); /* Ruhezustand inkl. Claim; gescrollt ist die Leiste entsprechend kürzer */ --nav-height: calc(var(--logo-height) + var(--nav-claim-height) + 2 * var(--nav-pad-y)); /* ── 5. Radius & Schatten ──────────────────────────────────── */ --radius: 12px; --shadow-sm: 0 1px 2px color-mix(in srgb, var(--c-navy) 6%, transparent), 0 2px 6px color-mix(in srgb, var(--c-navy) 4%, transparent); --shadow-md: 0 2px 4px color-mix(in srgb, var(--c-navy) 5%, transparent), 0 12px 28px color-mix(in srgb, var(--c-navy) 12%, transparent); /* ── 6. Bewegung ───────────────────────────────────────────── */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 600ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* Kleinere Stufen auf schmalen Viewports — feste Größen, kein clamp */ @media (max-width: 767px) { :root { /* 32px: die laengste untrennbare Zeichenkette der Seite ("Datenschutzerklaerung", 20 Zeichen) passt damit noch in eine Zeile bei 375px Viewport-Breite */ --text-h1: 2rem; --text-h2: 2rem; --text-h3: 1.375rem; --text-h4: 1.125rem; --section-y: var(--space-8); --container-pad: var(--space-4); } } /* ── Basis ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased; } /* Farbe wird bewusst vererbt, damit Überschriften auf dunklen Sektionen automatisch --color-text-on-deep übernehmen. */ h1, h2, h3, h4 { font-family: var(--font-heading); color: inherit; } h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-h1); font-weight: var(--weight-bold); } h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); font-weight: var(--weight-bold); } h3 { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--tracking-h3); font-weight: var(--weight-semibold); } h4 { font-size: var(--text-h4); line-height: var(--lh-h4); letter-spacing: var(--tracking-h4); font-weight: var(--weight-semibold); } small { font-size: var(--text-small); line-height: var(--lh-small); } /* Ankerziele dürfen nicht unter der fixen Kopfleiste landen */ :target, section[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-5)); } /* Tastaturfokus — im gesamten System einheitlich, auch auf hellem Grund sichtbar (Akzent 8,6:1 auf Dunkelblau, zusätzlich abgesetzt durch den dunklen Aussenring). */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--c-navy); border-radius: var(--radius); } /* Sprungmarke: erstes fokussierbares Element, sichtbar nur bei Tastaturfokus */ .skip-link { position: absolute; left: var(--space-4); top: -6rem; z-index: 200; background: var(--color-accent); color: var(--color-on-accent); padding: var(--space-3) var(--space-5); border-radius: var(--radius); font-size: var(--text-small); font-weight: var(--weight-semibold); transition: top var(--dur-fast) var(--ease); } .skip-link:focus { top: var(--space-4); } /* Ziel der Sprungmarke. tabindex="-1" macht das Element fokussierbar, ohne es in die Tab-Reihenfolge aufzunehmen. Ohne das springt der Browser nur an die Stelle, der Tastaturfokus bliebe aber auf dem Link und der nächste Tab liefe erneut durch die Navigation. Der Rahmen bleibt aus: Wer den Sprunglink betätigt hat, weiß, wo er ist, und der nächste Tab zeigt wieder einen sichtbaren Fokus. */ main[tabindex="-1"]:focus { outline: none; } /* Nur für Screenreader */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Verbindliche Projektregel: reduzierte Bewegung respektieren */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Druck ────────────────────────────────────────────────────── Vor allem fuer Impressum und Datenschutzerklaerung: Die werden ausgedruckt oder als PDF abgelegt. Dunkle Flaechen kosten dabei nur Toner und machen den Text unlesbar. */ @media print { .navbar, .skip-link, .hero-pattern, .cta-glow, .lang-toggle, .mobile-toggle, .nav-cta { display: none !important; } html, body { background: #fff !important; color: #000 !important; } #hero, #ueber-uns, footer, #features, #cta, .area-card, .info-box, .note-box, .founder-photo { background: #fff !important; color: #000 !important; box-shadow: none !important; } h1, h2, h3, h4, p, li, strong { color: #000 !important; } section { padding: var(--space-6) 0 !important; } /* Ziel von Verweisen sichtbar machen, Papier hat keine Links */ a[href^="http"]::after, a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; } .founder-photo { border: 1px solid #999 !important; } }