/* ============================================================================
   Fotobox Kusch — Design-Tokens + Reset
   Portiert aus Content/new-fotobox-landingpage/project/colors_and_type.css.
============================================================================ */

/* ----- Lokale Schriften (Variable Fonts) ----------------------------------- */
@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype-variations"),
         url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype-variations"),
         url("../fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations"),
         url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations"),
         url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* Caveat = handgeschriebener Akzent ("Spaßfaktor"). */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap");

/* ----- Tokens -------------------------------------------------------------- */
:root {
    /* Marken-Kern (Navy) */
    --fbk-navy-900: #08122a;
    --fbk-navy-800: #0e1c3f;
    --fbk-navy-700: #15264f;
    --fbk-navy-600: #1f3266;
    --fbk-navy-500: #2c4286;

    /* Partyfarben */
    --fbk-pink-600: #d4276b;
    --fbk-pink-500: #ea3a82;
    --fbk-pink-200: #ffd6e5;
    --fbk-teal-500: #1dbcc6;
    --fbk-teal-300: #7ddfe5;
    --fbk-yellow-500: #f5b324;
    --fbk-yellow-300: #ffd97a;
    --fbk-gold-500: #c79434;
    --fbk-gold-300: #e8c463;
    --fbk-silver-400: #9aa0a8;

    /* Neutrale Töne (warm) */
    --fbk-cream-50:  #faf7f1;
    --fbk-cream-100: #f3ede1;
    --fbk-paper-0:   #ffffff;
    --fbk-ink-900:   #14182a;
    --fbk-ink-700:   #303651;
    --fbk-ink-500:   #6a7088;
    --fbk-ink-300:   #b7bcce;
    --fbk-ink-100:   #e6e3da;

    /* Semantische Aliasse */
    --fg-primary:   var(--fbk-ink-900);
    --fg-secondary: var(--fbk-ink-700);
    --fg-muted:     var(--fbk-ink-500);
    --fg-on-dark:   #ffffff;
    --fg-accent:    var(--fbk-pink-600);

    --bg-page:    var(--fbk-cream-50);
    --bg-alt:     var(--fbk-cream-100);
    --bg-surface: var(--fbk-paper-0);
    --bg-dark:    var(--fbk-navy-800);
    --bg-hero:    linear-gradient(135deg, #15264f 0%, #0e1c3f 55%, #08122a 100%);
    --bg-cta:     linear-gradient(135deg, var(--fbk-pink-500) 0%, var(--fbk-pink-600) 100%);
    --bg-confetti-radial:
        radial-gradient(circle at 18% 22%, rgba(245,179,36,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 8%,  rgba(234,58,130,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 88% 64%, rgba(29,188,198,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 35% 88%, rgba(199,148,52,.22) 0 2px, transparent 3px);

    --border-default: #ece6d7;
    --border-strong:  #d8d1be;
    --border-on-dark: rgba(255,255,255,.12);

    --color-danger:  #c7253c;
    --color-success: #2bb673;

    /* Elevation */
    --shadow-xs:  0 1px 2px rgba(14,28,63,.06);
    --shadow-sm:  0 2px 6px rgba(14,28,63,.08), 0 1px 2px rgba(14,28,63,.05);
    --shadow-md:  0 8px 20px -6px rgba(14,28,63,.18), 0 2px 6px rgba(14,28,63,.06);
    --shadow-lg:  0 22px 44px -16px rgba(14,28,63,.28), 0 6px 14px -6px rgba(14,28,63,.10);
    --shadow-pop: 0 28px 56px -18px rgba(212,39,107,.45), 0 10px 22px -10px rgba(14,28,63,.18);

    /* Radien */
    --radius-xs:  4px;
    --radius-sm:  8px;
    --radius-md:  14px;
    --radius-lg:  22px;
    --radius-xl:  32px;
    --radius-pill: 999px;

    /* Abstände (4-px-Raster) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* Typografie */
    --font-display: "Playfair Display", "Big Caslon", Georgia, serif;
    --font-body:    "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-script:  "Caveat", "Pacifico", cursive;

    --fw-regular: 400;
    --fw-medium:  600;
    --fw-bold:    700;
    --fw-black:   800;

    --fs-display: clamp(34px, 6vw, 72px);
    --fs-h1:      clamp(26px, 4.5vw, 52px);
    --fs-h2:      clamp(22px, 3.2vw, 38px);
    --fs-h3:      clamp(18px, 2.5vw, 22px);
    --fs-h4:      clamp(16px, 2vw, 18px);
    --fs-body:    clamp(15px, 1.6vw, 16px);
    --fs-small:   clamp(13px, 1.4vw, 14px);
    --fs-micro:   12px;

    --lh-tight: 1.05;
    --lh-snug:  1.2;
    --lh-body:  1.55;
    --lh-loose: 1.7;

    --tracking-display: -0.01em;
    --tracking-eyebrow: 0.14em;

    /* Layout-Konstanten */
    --tap-min: 44px;
    --container: 1180px;
    --container-narrow: 900px;
    --transition: 0.2s ease;
}

/* ----- 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(--fs-body);
    line-height: var(--lh-body);
    color: var(--fg-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: 14px; /* damit die schwebende Pill-Nav etwas Luft hat */
}

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

a {
    color: var(--fbk-pink-600);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
}

a:hover, a:focus-visible {
    color: var(--fbk-pink-500);
    border-bottom-color: currentColor;
}

a:focus-visible {
    outline: 3px solid var(--fbk-pink-200);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ----- Typografie -------------------------------------------------------- */
.fbk-display, h1.fbk-display {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--fg-primary);
    font-weight: 800;
}

:where(h1, .fbk-h1) {
    font-family: var(--font-body);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    font-weight: var(--fw-black);
    color: var(--fg-primary);
    letter-spacing: -0.01em;
}
:where(h2, .fbk-h2) {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    font-weight: var(--fw-black);
    color: var(--fbk-navy-800);
}
:where(h3, .fbk-h3) {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--fbk-navy-800);
}
:where(h4, .fbk-h4) {
    font-family: var(--font-body);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--fg-primary);
}
:where(p) {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--fg-secondary);
}

p + p { margin-top: var(--space-3); }

.lead {
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.5;
    color: var(--fg-secondary);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: clamp(11px, 1.2vw, 12px);
    font-weight: var(--fw-black);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--fbk-pink-600);
}
.eyebrow--teal   { color: var(--fbk-teal-500); }
.eyebrow--yellow { color: var(--fbk-yellow-500); }
.eyebrow--on-dark{ color: var(--fbk-yellow-300); }

.script-accent {
    font-family: var(--font-script);
    color: var(--fbk-pink-500);
    font-size: 1.22em;
    line-height: 1;
    display: inline-block;
    transform: rotate(-3deg);
    font-weight: 400;
}

/* ----- Utilities --------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--space-9) 0;
}

.text-center { text-align: center; }
.text-on-dark { color: var(--fg-on-dark); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* Sanfter Slide-In beim Reveal — kein Opacity-Hide, damit der Inhalt
   immer sichtbar bleibt (SEO-Crawler, Screenshots, JS-Fehler).
   Nur ein dezenter Transform-Versatz wird animiert. */
html.js-reveal [data-reveal] {
    transform: translateY(24px);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}
html.js-reveal [data-reveal="left"]  { transform: translateX(-32px); }
html.js-reveal [data-reveal="right"] { transform: translateX(32px); }
html.js-reveal [data-reveal="scale"] { transform: scale(.97); }
html.js-reveal [data-reveal].is-revealed {
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    html.js-reveal [data-reveal] {
        transform: none;
        transition: none;
    }
}

/* [hidden] muss Display-Klassen schlagen können (z.B. .cal-confirm hat display:flex). */
[hidden] {
    display: none !important;
}

/* Pulse-Animation für Live-Verfügbarkeits-Punkt + ähnliche Akzente. */
@keyframes fbkPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(29,188,198,.25); }
    50%      { box-shadow: 0 0 0 9px rgba(29,188,198,.05); }
}