/* ============================================================
BEAUTY BOULEVARD · DESIGN SYSTEM
Zentrale Vorgabe · Stand Juni 2026
Diese Datei in jede Seite einbinden:
------------------------------------------------------------
Bei Änderungen NUR diese Datei anfassen — gilt projektweit.
============================================================ */
/* ---------- LIZENZFONT (lokal, woff2 muss neben CSS/HTML liegen) ---------- */
@font-face{
font-family:"Hearth Home Alternate";
src:url("hearth__home_alternate-webfont.woff2") format("woff2");
font-weight:normal;
font-style:normal;
font-display:swap;
}
/* ---------- GRATIS-FONTS (Google Fonts) ----------
In jede Seite zusätzlich in den :
*/
:root{
/* ===== FARBPALETTE (zentral) ===== */
--white:#FFFFFF;
--warm-white:#F7F4EF;
--brand-beige:#CBBAA4;
--deep-taupe:#A89788;
--luxury-dark:#100C08;
--soft-gold:#C9B28F;
/* Abgeleitete Töne (Hilfsfarben) */
--taupe-soft:#bfb1a3;
--line:#e4ddd3;
--ink-soft:rgba(16,12,8,.62);
/* ===== FARB-RATIO (Richtwert) =====
60–65% White + Warm White (Flächen, Hintergrund)
20–25% Brand Beige + Deep Taupe (Sektionsblöcke, Bilder)
8–10% Luxury Dark (Footer, CTAs, Faktenstreifen)
1–3% Soft Gold (Akzente: kursive Keywords, Badges, Sterne)
*/
/* ===== FONT-SYSTEM ===== */
--font-display:"Newsreader", Georgia, serif; /* H1–H4 + Zitate, Gewicht 300 */
--font-body:"Montserrat", system-ui, sans-serif; /* Body, Nav, Buttons, Labels */
--font-headline:var(--font-display); /* Alias für ältere Komponenten */
--font-script:"Hearth Home Alternate", "Newsreader", cursive; /* Script-Akzent / Submark */
/* ===== TYPO-BASIS ===== */
--fw-display:300; /* Headlines light */
--lh-body:1.7;
--ls-eyebrow:.28em;
}
/* ============================================================
BASIS-RESET & TYPOGRAFIE
============================================================ */
*{margin:0;padding:0;box-sizing:border-box;min-width:0;}
html,body{overflow-x:hidden;} /* Mobile-Overflow-Fix */
html{scroll-behavior:smooth;}
body{
font-family:var(--font-body);
background:var(--warm-white);
color:var(--luxury-dark);
font-weight:300;
line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:var(--fw-display);
line-height:1.18;
letter-spacing:.01em;
}
/* Gold-Akzent: Schlüsselwörter kursiv in Headlines */
em{font-style:italic;color:var(--soft-gold);}
/* Script-Submark („beauty salon"-Akzent) — sparsam einsetzen */
.script{
font-family:var(--font-script);
font-style:normal;
color:var(--soft-gold);
font-size:1.9rem;
line-height:1;
display:inline-block;
}
/* ============================================================
GETEILTE TYPOGRAFIE (zentral · Fallback-Standard)
Basis-Headline-Größen + wiederkehrende Textklassen.
Seiten dürfen im eigenen