/* ============================================================
   LKG Vereinsaktion · Design Tokens
   1:1 abgeleitet von der LKG #MEHRNETZ Designsprache
   ============================================================ */

:root {
    /* ----- Markenfarben ----- */
    --green:        #95C11F;   /* LKG-Markengrün */
    --green-dark:   #7BA619;   /* Hover, Akzente */
    --green-light:  #e8f5c8;   /* Soft-Hintergründe, Pills */

    /* ----- Neutrale Töne ----- */
    --dark:         #1a2b3c;
    --dark-lighter: #243b53;
    --gray-100:     #f7f8fa;
    --gray-200:     #e9ecef;
    --gray-300:     #dee2e6;
    --gray-400:     #adb5bd;
    --gray-500:     #6c757d;
    --gray-700:     #2a2a2a;
    --white:        #ffffff;

    /* ----- Statusfarben ----- */
    --success:      #28a745;
    --warning:      #f0ad4e;
    --info:         #5bc0de;
    --danger:       #d9534f;

    /* ----- Typografie ----- */
    --font-base: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
                 'Helvetica Neue', Arial, sans-serif;

    --fs-xs:    0.82rem;
    --fs-sm:    0.88rem;
    --fs-base:  1rem;
    --fs-md:    1.1rem;
    --fs-lg:    1.25rem;
    --fs-xl:    1.5rem;
    --fs-2xl:   2rem;
    --fs-3xl:   clamp(2rem, 5vw, 3.2rem);
    --fs-h2:    clamp(1.75rem, 4vw, 2.5rem);

    --lh-tight: 1.15;
    --lh-base:  1.6;
    --lh-loose: 1.7;

    /* ----- Layout ----- */
    --max-width:       1200px;
    --section-padding: 80px 24px;
    --container-pad:   0 24px;

    /* ----- Radien ----- */
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-pill: 50px;

    /* ----- Schatten ----- */
    --shadow-sm:    0 2px 8px  rgba(0,0,0,0.04);
    --shadow:       0 4px 24px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 40px rgba(0,0,0,0.14);
    --shadow-cta:   0 4px 16px rgba(149,193,31,0.35);

    /* ----- Übergänge ----- */
    --transition-fast: 0.2s ease;
    --transition:      0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-base);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--gray-700);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--green-dark);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--green); }

button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }