/* ===========================================
   R4P – BASE STYLES
   Variablen, Reset, Typografie, Utilities
   =========================================== */

:root {
    /* Farben – Run 4 Peace (Merch / hell) */
    --c-green: #0b0f0b;
    --c-green-deep: #000000;
    --c-green-soft: #161a18;
    --c-accent: #ffd100;
    --c-accent-glow: rgba(255, 209, 0, 0.35);
    --c-orange: #ffd100;
    --c-orange-light: #ffe566;
    --c-white: #ffffff;
    --c-off-white: #f5fafe;
    --c-black: #0b0f0b;
    --c-text-dark: #0b0f0b;
    --c-muted: #6a7a78;
    --c-line: rgba(11, 15, 11, 0.1);

    /* Typografie */
    --ff-display: 'Anton', 'Arial Narrow', sans-serif;
    --ff-body: 'Montserrat', 'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --container-w: 1280px;
    --gutter: clamp(16px, 4vw, 48px);

    /* Radius & Shadow */
    --r-pill: 999px;
    --r-md: 14px;
    --r-lg: 28px;
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);

    /* Animation */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* hidden-Attribut und .is-hidden setzen IMMER durch, auch gegen display: flex etc. */
[hidden],
.is-hidden {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background-color: var(--c-green);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

body {
    margin: 0;
    font-family: var(--ff-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--c-text-dark);
    background-color: var(--c-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

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

button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease-out), opacity 0.25s var(--ease-out);
}

a:hover {
    opacity: 0.85;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

input {
    font: inherit;
}

::selection {
    background: var(--c-accent);
    color: var(--c-green);
}

/* ====== Typografie ====== */
h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: var(--ff-display);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.005em;
    text-transform: uppercase;
}

p {
    margin: 0 0 1em;
}

/* ====== Layout-Utilities ====== */
.container {
    width: 100%;
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section--dark {
    background: var(--c-green);
    color: var(--c-white);
    position: relative;
    overflow: hidden;
}

.eyebrow {
    display: inline-block;
    font-family: var(--ff-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-accent);
    padding: 6px 14px;
    border: 1px solid var(--c-accent);
    border-radius: var(--r-pill);
    margin-bottom: 20px;
}

.eyebrow--dark {
    color: var(--c-green);
    border-color: var(--c-green);
}

.section-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 60px;
}

.section-title {
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    color: var(--c-accent);
    margin-bottom: 24px;
}

.section-title--dark {
    color: var(--c-green);
}

.section-lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 640px;
    margin: 0 auto;
}

.section-lead--dark {
    color: var(--c-muted);
}

/* ====== Dashed Grid-Lines (Hintergrund) ====== */
.grid-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / 12 - 1px),
        rgba(255, 255, 255, 0.06) calc(100% / 12 - 1px),
        rgba(255, 255, 255, 0.06) calc(100% / 12)
    );
    background-size: 100% 8px;
    mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 12px);
    -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 4px, transparent 4px 12px);
    z-index: 0;
}

/* ====== Reveal Helpers (für GSAP) ====== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
}

.reveal-line {
    display: block;
    overflow: hidden;
}

.reveal-line > span {
    display: inline-block;
    transform: translateY(110%);
    will-change: transform;
}

/* ====== Scrollbar in inneren Containern dezent ====== */
.cart-drawer__body::-webkit-scrollbar,
.modal__summary::-webkit-scrollbar {
    width: 6px;
}
.cart-drawer__body::-webkit-scrollbar-track,
.modal__summary::-webkit-scrollbar-track {
    background: transparent;
}
.cart-drawer__body::-webkit-scrollbar-thumb,
.modal__summary::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
}

/* ====== Reduced Motion ====== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    html {
        scroll-behavior: auto;
    }
    .reveal,
    .reveal-line > span {
        opacity: 1;
        transform: none;
    }
}