/* ==========================================================================
   Projekt:   BAST Garten- und Landschaftsbau – Website
   Datei:     assets/css/styleguide.css
   Autor:     Nick Helfenbein (CODEXBLAU GmbH)
   Funktion:  Design-System nach Corporate Design (09/2026):
              Farben, Schrift (Comfortaa), Formensprache (abgerundete
              obere linke / untere rechte Ecke), Abstände, Bewegungswerte,
              Themes (Weiß, Grau, Grün, Dunkelgrün, Gelb) und
              grundlegende Typografie. Enthält KEINE Seitenstruktur
              (→ style.css) und keine Komponenten (→ components.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schrift
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/comfortaa-regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Comfortaa";
    src: url("../fonts/comfortaa-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design-Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Corporate-Design-Farben */
    --green: #196f31;            /* Rasengrün   – RGB 26/111/50  */
    --yellow: #ffec3d;           /* Sonnengelb  – RGB 255/236/61 */
    --ink: #1d1d1c;              /* Schwarz     – RGB 29/29/28   */
    --gray: #ededed;             /* Grau        – RGB 237/237/237 */
    --white: #ffffff;            /* Weiß */

    /* Abgeleitete Töne (nur für Flächen, Linien und Illustrationen) */
    --green-deep: #125324;
    --green-900: #0c3a19;
    --green-300: #5fb873;
    --green-100: #e5f1e8;
    --yellow-soft: #fff9b8;
    --ink-70: rgba(29, 29, 28, 0.7);
    --ink-12: rgba(29, 29, 28, 0.12);

    /* Typografie */
    --font: "Comfortaa", "Nunito", "Segoe UI", system-ui, sans-serif;
    --fs-xs: 0.75rem;
    --fs-s: 0.875rem;
    --fs-base: 1rem;
    --fs-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
    --fs-h4: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
    --fs-h3: clamp(1.55rem, 1.2rem + 1.5vw, 2.4rem);
    --fs-h2: clamp(2.3rem, 1.3rem + 4.2vw, 4.9rem);
    --fs-h1: clamp(2.8rem, 1.2rem + 6.4vw, 6.4rem);
    --fs-display: clamp(3.3rem, 1rem + 8.6vw, 8.2rem);
    --lh-body: 1.75;
    --lh-head: 1.12;
    --ls-head: -0.052em;

    /* Formensprache: nur obere linke und untere rechte Ecke abgerundet.
       CI: große Formen 10 mm, kleine Formen 2,5–5 mm Radius. */
    --r-xs: 6px;
    --r-s: 12px;
    --r-m: 22px;
    --r-l: 40px;
    --r-xl: 96px;
    --r-hero: 120px;
    --shape-xs: var(--r-xs) 0 var(--r-xs) 0;
    --shape-s: var(--r-s) 0 var(--r-s) 0;
    --shape-m: var(--r-m) 0 var(--r-m) 0;
    --shape-l: var(--r-l) 0 var(--r-l) 0;
    --shape-xl: var(--r-xl) 0 var(--r-xl) 0;
    --shape-hero: var(--r-hero) 0 0 0;

    /* Raster und Abstände */
    --side: clamp(20px, 5.4vw, 96px);
    --max: 1480px;
    --max-wide: 1720px;
    --max-narrow: 880px;
    --gap: clamp(20px, 2.4vw, 40px);
    --sp-1: 0.5rem;
    --sp-2: 1rem;
    --sp-3: 1.5rem;
    --sp-4: 2.5rem;
    --sp-5: 4rem;
    --section-s: clamp(48px, 6vw, 88px);
    --section-m: clamp(80px, 10vw, 156px);
    --section-l: clamp(110px, 14vw, 220px);
    --header-h: 92px;

    /* Bewegung */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
    --dur: 0.6s;
    --dur-fast: 0.25s;

    /* Schatten */
    --shadow-s: 0 8px 24px rgba(12, 58, 25, 0.12);
    --shadow-m: 0 24px 60px rgba(12, 58, 25, 0.18);

    /* Ebenen */
    --z-header: 50;
    --z-menu: 45;
    --z-transition: 90;
    --z-preloader: 100;
}

@media (max-width: 900px) {
    :root { --header-h: 76px; --r-hero: 70px; --r-xl: 64px; }
}

/* --------------------------------------------------------------------------
   3. Themes – jede Section setzt Hintergrund- und Vordergrundfarbe;
      Komponenten greifen nur auf diese Variablen zu.
   -------------------------------------------------------------------------- */
.theme-white  { --bg: var(--white);      --fg: var(--ink);   --muted: #5a615a;  --accent: var(--green);  --line: #d6ddd6;               --card: var(--gray);       --on-accent: #fff; }
.theme-gray   { --bg: var(--gray);       --fg: var(--ink);   --muted: #565c56;  --accent: var(--green);  --line: #cfd6cf;               --card: var(--white);      --on-accent: #fff; }
.theme-green  { --bg: var(--green);      --fg: var(--white); --muted: #d7ead9;  --accent: var(--yellow); --line: rgba(255,255,255,.3);  --card: var(--green-deep); --on-accent: var(--ink); }
.theme-deep   { --bg: var(--green-deep); --fg: var(--white); --muted: #c9e0cd;  --accent: var(--yellow); --line: rgba(255,255,255,.26); --card: var(--green-900);  --on-accent: var(--ink); }
.theme-yellow { --bg: var(--yellow);     --fg: var(--ink);   --muted: #4b4a22;  --accent: var(--green);  --line: rgba(29,29,28,.28);   --card: var(--white);      --on-accent: #fff; }

/* --------------------------------------------------------------------------
   4. Reset & Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
address { font-style: normal; }
hr { border: 0; }
em { font-style: normal; }
[hidden] { display: none !important; }

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

:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--ink);
}

.skip-link {
    position: fixed;
    top: -120px;
    left: 16px;
    z-index: 200;
    padding: 12px 20px;
    background: var(--yellow);
    color: var(--ink);
    font-weight: 700;
    border-radius: var(--shape-s);
}
.skip-link:focus { top: 12px; }

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */
.h1, .h2, .h3, .h4,
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: var(--lh-head);
    letter-spacing: var(--ls-head);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

.h1, h1 { font-size: var(--fs-h1); }
.h2, h2 { font-size: var(--fs-h2); line-height: 1.1; }
.h3, h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.04em; }
.h4, h4 { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -0.03em; }

.h2--display { font-size: clamp(2.6rem, 1rem + 4.6vw, 5.4rem); line-height: 1.04; }

/* Akzentwort in Überschriften: *Wort* → <em> */
h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em { color: var(--accent); font-style: normal; }

.lead {
    font-size: var(--fs-lead);
    line-height: 1.8;
    color: var(--muted);
    max-width: 62ch;
}

.small, small { font-size: var(--fs-s); }

/* Marker-Überschrift: Schrift auf abgerundetem Rechteck (CI-Seite 7) */
.marker {
    display: inline-block;
    padding: 0.2em 0.6em 0.26em;
    background: var(--green);
    color: var(--white);
    border-radius: var(--shape-m);
}
.marker--yellow { background: var(--yellow); color: var(--ink); }

/* Fließtext aus dem Panel */
.prose { font-size: var(--fs-base); line-height: 1.85; color: inherit; max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-h3); margin-top: 2em; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.8em; }
.prose h4 { font-size: 1.1rem; margin-top: 1.6em; }
.prose strong { font-weight: 700; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: var(--yellow); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 0.2em; }
.prose ul li::before {
    content: "";
    position: absolute;
    left: -1.2em;
    top: 0.62em;
    width: 0.62em;
    height: 0.62em;
    background: var(--accent);
    border-radius: 100% 0 100% 0;
}
.prose ol { list-style: decimal; }
.prose ol li::marker { color: var(--accent); font-weight: 700; }
.prose li + li { margin-top: 0.5em; }
.prose--legal { max-width: none; }
.prose--legal h2 { margin-top: 2.2em; }

/* --------------------------------------------------------------------------
   6. Hilfsklassen
   -------------------------------------------------------------------------- */
.shape-s { border-radius: var(--shape-s); }
.shape-m { border-radius: var(--shape-m); }
.shape-l { border-radius: var(--shape-l); }
.shape-xl { border-radius: var(--shape-xl); }

.text-accent { color: var(--accent); }
.text-center { text-align: center; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Sichtbarkeits-Startzustände für Scroll-Animationen.
   .js-failed (Notfall-Schalter in header.php) hebt sie wieder auf. */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.js [data-split] { visibility: hidden; }
.js [data-reveal-clip] { clip-path: inset(0 0 100% 0 round 0); }
.js-failed [data-reveal],
.js-failed [data-split],
.js-failed [data-reveal-clip] { opacity: 1 !important; transform: none !important; visibility: visible !important; clip-path: none !important; }

@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;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
    .js [data-split] { visibility: visible; }
    .js [data-reveal-clip] { clip-path: none; }
}