/* ============================================================ ESTIVO — Base CSS Design System · Variablen · Reset · Typografie ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;1,9..144,300;1,9..144,400&family=DM+Sans:wght@300;400;500;600&display=swap'); /* ── DESIGN TOKENS ──────────────────────────────────────────── */ :root { /* Neutrale Farben */ --color-sand: #F7F5F2; --color-sand-dark: #EDE9E4; --color-ink: #1A1A1A; --color-ink-mid: #4A4A4A; --color-ink-light: #9A9A9A; --color-border: #E5E2DD; --color-white: #FFFFFF; /* Modul-Akzentfarben — werden per Seite überschrieben */ --color-accent: #1A1A1A; --color-accent-light: #F4F4F4; --color-accent-mid: #E0E0E0; /* Typografie */ --font-display: 'Fraunces', Georgia, serif; --font-body: 'DM Sans', system-ui, sans-serif; --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 48px; --text-4xl: 64px; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --leading-tight: 1.05; --leading-snug: 1.25; --leading-normal: 1.6; --leading-loose: 1.8; --tracking-tight: -0.03em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.15em; --tracking-widest: 0.25em; /* Abstände */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Radien */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* Schatten */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.08); --shadow-lg: 0 12px 40px rgba(0,0,0,0.10); --shadow-xl: 0 24px 64px rgba(0,0,0,0.14); /* Layout */ --nav-height: 60px; --container-max: 1140px; --container-pad: 48px; } /* Modul-Themes — werden auf oder gesetzt */ .theme-check { --color-accent: #2563EB; --color-accent-light: #EFF6FF; --color-accent-mid: #BFDBFE; } .theme-bau { --color-accent: #D97706; --color-accent-light: #FFFBEB; --color-accent-mid: #FDE68A; } .theme-hold { --color-accent: #16A34A; --color-accent-light: #F0FDF4; --color-accent-mid: #BBF7D0; } .theme-exit { --color-accent: #7C3AED; --color-accent-light: #F5F3FF; --color-accent-mid: #DDD6FE; } /* ── RESET ───────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-ink); background-color: var(--color-sand); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: var(--font-body); cursor: pointer; border: none; background: none; } input, textarea, select { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-ink); } ul, ol { list-style: none; } /* ── TYPOGRAFIE ──────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } .display-xl { font-family: var(--font-display); font-size: clamp(42px, 6vw, var(--text-4xl)); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .display-lg { font-family: var(--font-display); font-size: clamp(32px, 4.5vw, var(--text-3xl)); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); } .display-md { font-family: var(--font-display); font-size: clamp(24px, 3vw, var(--text-2xl)); font-weight: var(--weight-light); letter-spacing: var(--tracking-tight); } .display-italic { font-style: italic; color: var(--color-accent); } .eyebrow { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-light); } .eyebrow--accent { color: var(--color-accent); } .body-lg { font-size: var(--text-lg); line-height: var(--leading-loose); } .body-base { font-size: var(--text-base); line-height: var(--leading-normal); } .body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); } .body-xs { font-size: var(--text-xs); line-height: var(--leading-normal); } .text-muted { color: var(--color-ink-light); } .text-mid { color: var(--color-ink-mid); } .text-accent { color: var(--color-accent); } /* ── LAYOUT ──────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-24); } .section--lg { padding-block: var(--space-32); } .section--sm { padding-block: var(--space-16); } /* ── SCROLLBAR ───────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); } /* ── ANIMATIONEN ─────────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } .animate-fade-up { animation: fadeUp 0.6s ease both; } .animate-fade-in { animation: fadeIn 0.4s ease both; } .animate-slide-in { animation: slideIn 0.3s ease both; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } .delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } /* Intersection Observer reveal */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal.delay-1 { transition-delay: 0.1s; } .reveal.delay-2 { transition-delay: 0.2s; } .reveal.delay-3 { transition-delay: 0.3s; } /* ── RESPONSIVE ──────────────────────────────────────────────── */ @media (max-width: 1024px) { :root { --container-pad: 32px; } } @media (max-width: 768px) { :root { --container-pad: 20px; --space-24: 64px; --space-32: 80px; } }