/* Cortexion — Base Styles (Light Theme, Langdock × peec Mix) */ html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'cv11', 'ss01', 'ss03'; line-height: 1.6; background-color: #f7f8fa; color: #2c2e44; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; height: auto; display: block; } ::selection { background-color: rgba(15, 23, 42, 0.12); color: #0a0b14; } /* Custom Scrollbar (Light) */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #f1f2f6; } ::-webkit-scrollbar-thumb { background: #d4d5e0; border-radius: 6px; border: 2px solid #f1f2f6; } ::-webkit-scrollbar-thumb:hover { background: #9092a8; } /* Focus Styles */ :focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 6px; } /* Reveal Animation für IntersectionObserver — versteckt nur, wenn JavaScript läuft (html.js wird im gesetzt). Ohne JS bleibt alles sofort sichtbar. */ html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } html.js .reveal.visible { opacity: 1; transform: translateY(0); } /* Grid Pattern Background (für Hero — sehr dezent auf weiss) */ .bg-grid { background-image: linear-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px); background-size: 56px 56px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, #000 25%, transparent 78%); } /* Dot Pattern (alternative — feiner für Sektion-Hintergründe) */ .bg-dots { background-image: radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%); } /* Gradient Text — monochrome (Langdock-Stil: dark fade) */ .gradient-text { background: linear-gradient(135deg, #0a0b14 0%, #4a4d63 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Glow rings */ .glow-ring { box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06), 0 10px 40px -10px rgba(15, 23, 42, 0.18), 0 0 90px -20px rgba(15, 23, 42, 0.10); } /* Subtiler oberer Hairline-Highlight für Cards/Buttons */ .hairline-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.08), transparent); pointer-events: none; } /* Section spacing */ .section { padding-top: 6rem; padding-bottom: 6rem; } @media (max-width: 768px) { .section { padding-top: 4rem; padding-bottom: 4rem; } } .section-sm { padding-top: 4rem; padding-bottom: 4rem; } /* Below-the-fold-Sektionen: Layout/Paint erst berechnen, wenn die Sektion in Viewport-Naehe kommt (spart auf langen Seiten erheblich Ladezeit). contain-intrinsic-size ist nur die Platzhalter-Schaetzung fuers Scrollmass; "auto" merkt sich danach die echte Hoehe. */ .cv-auto { content-visibility: auto; contain-intrinsic-size: auto 1000px; } /* Container */ .container-wide { max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container-wide { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .container-wide { padding-left: 2rem; padding-right: 2rem; } } /* Headings */ .heading-1 { font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: #0a0b14; } .heading-2 { font-size: clamp(1.875rem, 3vw + 0.5rem, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; color: #0a0b14; } .heading-3 { font-size: clamp(1.5rem, 1.5vw + 0.5rem, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #0a0b14; } .subheading { font-size: clamp(1.0625rem, 0.5vw + 0.9rem, 1.25rem); line-height: 1.6; color: #4a4d63; } /* Eyebrow Label */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.875rem; border-radius: 9999px; border: 1px solid rgba(15, 23, 42, 0.14); background-color: rgba(15, 23, 42, 0.04); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #2c2e44; } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background-color: #2c2e44; box-shadow: 0 0 10px rgba(15, 23, 42, 0.25); } /* Prose-Bereich (für Datenschutz/Impressum) */ .prose-dark { color: #2c2e44; font-size: 1rem; line-height: 1.75; } .prose-dark h2 { color: #0a0b14; font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 1rem; letter-spacing: -0.02em; } .prose-dark h3 { color: #0a0b14; font-size: 1.125rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.75rem; } .prose-dark p { margin-bottom: 1rem; } .prose-dark a { color: #0a0b14; text-decoration: underline; text-decoration-color: rgba(15, 23, 42, 0.40); text-underline-offset: 3px; } .prose-dark a:hover { color: #000000; text-decoration-color: #0a0b14; } .prose-dark a.btn { text-decoration: none; } .prose-dark a.btn-primary, .prose-dark a.btn-primary:hover { color: #ffffff; text-decoration: none; } .prose-dark a.btn-secondary, .prose-dark a.btn-secondary:hover, .prose-dark a.btn-outline, .prose-dark a.btn-outline:hover, .prose-dark a.btn-ghost, .prose-dark a.btn-ghost:hover { color: #0a0b14; text-decoration: none; } .prose-dark ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; } .prose-dark ul li { margin-bottom: 0.375rem; } .prose-dark strong { color: #0a0b14; }