/* ============================================================
   Figaro Sada — Design System
   Friseursalon in Ried im Innkreis · seit den 1920er Jahren
   Monochrome / Quicksand · alle Assets lokal gehostet
   ============================================================ */

/* ---------- Fonts (lokal, kein CDN) ---------- */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/quicksand-latin.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: 'Quicksand';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/quicksand-latin-ext.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;
}

/* ---------- Design Tokens ---------- */
:root {
    /* Original-Markenfarben (unverändert beibehalten) */
    --primary: #3b3b3b;
    --secondary: #3b3b3b;
    --tertiery: #00c3ff;
    --white: #fff;
    --black: #333333;

    /* Erweiterte, monochrome Palette – gleiche Farbfamilie */
    --ink: #222222;          /* fast schwarz – Headlines & tiefe Flächen */
    --charcoal: #3b3b3b;     /* Hauptfarbe (Marke) */
    --graphite: #3b3b3b;     /* Original-Grau */
    --stone: #6b6b6b;        /* Fließtext gedämpft */
    --mist: #9a9a9a;         /* Meta / Hinweise */
    --line: #e6e2dc;         /* Hairlines auf hellem Grund */
    --line-dark: rgba(255,255,255,.14);
    --paper: #f6f4f1;        /* warmes Off-White (Sektions-Hintergrund) */
    --paper-2: #efece7;      /* zweite Ebene */
    --cloud: #ffffff;

    --font: 'Quicksand', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --radius: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 6px 20px rgba(26,26,26,.06);
    --shadow: 0 18px 50px rgba(26,26,26,.10);
    --shadow-lg: 0 36px 90px rgba(26,26,26,.16);

    --container: 1200px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-weight: 500;
    color: var(--charcoal);
    background: var(--cloud);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
/* Bootstrap a:hover (blau + underline) global neutralisieren – Links behalten ihre Farbe */
a:hover, a:focus, a:active { text-decoration: none; color: inherit; }

h1, h2, h3, h4, h5 {
    font-family: var(--font);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.12;
    margin: 0 0 .4em;
    letter-spacing: -.01em;
}

p { margin: 0 0 1em; }

::selection { background: var(--ink); color: #fff; }

/* ---------- Layout Helpers ---------- */
.fs-container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.fs-section { padding: clamp(64px, 9vw, 120px) 0; }

/* Kicker / Eyebrow */
.fs-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 18px;
}
.fs-kicker::before {
    content: '';
    width: 30px;
    height: 1px;
    background: var(--charcoal);
    display: inline-block;
}
.fs-kicker.is-light { color: rgba(255,255,255,.72); }
.fs-kicker.is-light::before { background: rgba(255,255,255,.6); }
.fs-kicker.is-centered { justify-content: center; }

/* Section heading */
.fs-heading {
    font-size: clamp(30px, 4.6vw, 52px);
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0 0 18px;
}
.fs-lead {
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--stone);
    max-width: 60ch;
}
.fs-center { text-align: center; }
.fs-center .fs-lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.fs-btn {
    --btn-bg: var(--ink);
    --btn-fg: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--btn-bg);
    color: var(--btn-fg);
    padding: 15px 30px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid var(--btn-bg);
    cursor: pointer;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
    white-space: nowrap;
}
.fs-btn:hover, .fs-btn:focus { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--btn-fg); }
.fs-btn i { font-size: 13px; }

.fs-btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border-color: var(--charcoal);
}
.fs-btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.fs-btn--light {
    --btn-bg: #fff;
    --btn-fg: var(--ink);
    border-color: #fff;
}
.fs-btn--light:hover { box-shadow: 0 18px 50px rgba(0,0,0,.3); }

.fs-btn--outline-light {
    --btn-bg: transparent;
    --btn-fg: #fff;
    border-color: rgba(255,255,255,.5);
}
.fs-btn--outline-light:hover { background:#fff; color: var(--ink); border-color:#fff; }

/* ---------- Scroll Reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1 !important; transform: none !important; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Utilities ---------- */
.fs-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--stone);
    background: #fff;
}

/* Bootstrap container harmonisieren */
.container { max-width: var(--container); }

/* ---------- Page Hero (Unterseiten-Titelband) ---------- */
.page-hero {
    position: relative;
    padding: clamp(70px, 10vw, 120px) 0 clamp(56px, 7vw, 96px);
    background: var(--ink);
    overflow: hidden;
    text-align: center;
}
.page-hero__bg {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 780px auto;
    background-position: center;
    opacity: 1;
    filter: invert(1); /* near-weißes Muster -> dunkles Band mit feinen Schwüngen */
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(130% 130% at 50% 0%, rgba(255,255,255,.05), transparent 62%),
        linear-gradient(180deg, rgba(26,26,26,.28), rgba(26,26,26,.52));
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero h1 {
    color: #fff;
    font-size: clamp(34px, 5.5vw, 58px);
    margin: 0 0 16px;
    letter-spacing: -.02em;
}
.page-hero .crumbs {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
}
.page-hero .crumbs a { color: rgba(255,255,255,.6); transition: color .3s; }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero .crumbs .sep { opacity: .5; }
.page-hero .crumbs .current { color: #fff; }