/* tokens.css — Design-Tokens als CSS Custom Properties */
:root {
    /* Farben */
    --c-bg-primary:   #14292b;
    --c-bg-dark:      #0d1e21;
    --c-accent-bg:    #8bd35a;
    --c-white:        #f1f4f4;
    --c-text:         #a9b9b6;
    --c-heading:      #9be86a;
    --c-btn-text:     #000000;
    --c-card:         #1b3335;
    --c-lime:         #6fcb45;
    --c-border:       #4f6a68;

    /* Verläufe */
    --grad-cta: linear-gradient(180deg, #9be86a 0%, #4caf3f 100%);

    /* Schrift */
    --font-base: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fs-body:  clamp(0.875rem, 0.8rem + 0.4vw, 1rem);   /* 14–16px */
    --fs-h1:    clamp(2.125rem, 1.4rem + 2.6vw, 2.875rem); /* 34–46px */
    --fs-h2:    clamp(1.625rem, 1.25rem + 1.2vw, 2.125rem);/* 26–34px */
    --fs-h3:    clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);  /* 20–24px */
    --fs-small: 0.8125rem;

    --lh-body: 1.35;
    --lh-h2:   1.2;
    --lh-hero: 1.0;

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

    /* Abstände */
    --space-section: clamp(2.5rem, 2rem + 2vw, 3.75rem); /* 40–60px */
    --space-cards:   1.625rem; /* 26px */
    --space-para:    1.25rem;  /* 20px */
    --space-h2-text: 1.25rem;  /* 20px */
    --space-h3-text: 1rem;     /* 16px */
    --space-faq:     0.875rem; /* 14px */
    --pad-card:      1.5rem;   /* 24px */

    /* Layout */
    --container-max: 1920px;
    --container-pad: clamp(1rem, 0.5rem + 2.5vw, 3.6875rem); /* ~16–59px */
    --main-bottom:   4.5rem; /* 72px */

    /* Radien & Effekte */
    --radius-card:  30px;
    --radius-md:    16px;
    --radius-sm:    10px;
    --card-w:       150px;

    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.25);

    --transition: 0.25s ease;

    --header-h: 76px;
}