/* kampfs dinner — Design Tokens als CSS Custom Properties.
* Import in jeder HTML/CSS-Datei:
*
* oder im :
* @import url("path/to/tokens.css");
*
* Zusätzlich Google Fonts importieren:
*
*/
:root {
/* ---------- COLOR ---------- */
--nacht: #1A1612;
--nacht-2: #221d17;
--gold: #A8843D; /* Antik-Gold — Brand-Schriftfarbe (Headlines, Akzente). Nicht im Logo. */
--gold-logo: #C9973A; /* Champagner — exklusiv Logo-Flamme/-Rauchschwaden. */
--stein-grau: #D6D2CB; /* Bogen im Logo (entsättigt grau statt warm-creme). */
--pergament: #EFE7D9;
--lino: #F7F3EE;
--olivo: #2B4035;
--terracotta: #D4956A;
--rosso: #C8302A;
/* Text */
--text: #1A1612;
--text-on-dark: #EFE7D9;
--text-muted: rgba(26, 22, 18, 0.65);
--text-muted-on-dark: rgba(239, 231, 217, 0.55);
--line: rgba(168, 132, 61, 0.28);
/* ---------- TYPOGRAPHY ---------- */
--font-wordmark: 'Old Standard TT', serif;
--font-headline: 'Old Standard TT', serif;
--font-display: 'Bebas Neue', sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-signature: 'Caveat', cursive;
--fs-xs: 12px;
--fs-sm: 14px;
--fs-base: 16px;
--fs-lg: 18px;
--fs-xl: 20px;
--fs-2xl: 24px;
--fs-3xl: 30px;
--fs-4xl: 36px;
--fs-5xl: 48px;
--fs-6xl: 60px;
--fs-7xl: 72px;
--fs-8xl: 96px;
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.5;
--lh-relaxed: 1.6;
--ls-tight: -0.01em;
--ls-normal: 0em;
--ls-wide: 0.04em;
--ls-wider: 0.08em;
/* ---------- SPACE ---------- */
--space-0: 0;
--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;
/* ---------- RADIUS ---------- */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px;
/* ---------- SHADOW ---------- */
--shadow-sm: 0 1px 2px rgba(26, 22, 18, 0.06);
--shadow-md: 0 4px 12px rgba(26, 22, 18, 0.08);
--shadow-lg: 0 12px 24px rgba(26, 22, 18, 0.12);
--shadow-xl: 0 24px 48px rgba(26, 22, 18, 0.16);
/* ---------- MOTION ---------- */
--duration-fast: 160ms;
--duration-base: 240ms;
--duration-slow: 480ms;
--ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-inout: cubic-bezier(0.5, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
/* ---------- LAYOUT ---------- */
--container-max: 1080px;
--container-max-wide: 1280px;
--container-padding-x: 24px;
--container-padding-x-lg: 48px;
}
/* ---------- BASE ---------- */
html {
font-family: var(--font-body);
font-size: var(--fs-base);
line-height: var(--lh-relaxed);
color: var(--text);
background: var(--pergament);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
font-weight: 400;
}
/* Default headings */
h1, h2, h3, h4 {
font-family: var(--font-headline);
font-weight: 700;
letter-spacing: var(--ls-tight);
line-height: var(--lh-snug);
margin: 0;
}
h1 { font-size: var(--fs-6xl); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
@media (min-width: 768px) {
h1 { font-size: var(--fs-7xl); }
h2 { font-size: var(--fs-5xl); }
h3 { font-size: var(--fs-3xl); }
}
p { margin: 0 0 1em; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---------- UTILITY CLASSES ---------- */
.wordmark {
font-family: var(--font-wordmark);
font-weight: 700;
letter-spacing: var(--ls-tight);
text-transform: lowercase;
}
.display {
font-family: var(--font-display);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
}
.signature {
font-family: var(--font-signature);
font-weight: 600;
}
.surface-nacht {
background: var(--nacht);
color: var(--text-on-dark);
}
.surface-pergament {
background: var(--pergament);
color: var(--text);
}
.surface-olivo {
background: var(--olivo);
color: var(--text-on-dark);
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-padding-x);
padding-right: var(--container-padding-x);
}
@media (min-width: 768px) {
.container {
padding-left: var(--container-padding-x-lg);
padding-right: var(--container-padding-x-lg);
}
}
/* ---------- ICON FILTERS ---------- */
/* Eingangsbedingung: SVG ist schwarz */
.icon-gold {
filter: invert(53%) sepia(45%) saturate(572%) hue-rotate(0deg) brightness(89%) contrast(85%);
}
.icon-cream {
filter: invert(95%) sepia(8%) saturate(259%) hue-rotate(338deg) brightness(98%) contrast(92%);
}
/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}