/* =============================================================================
   base.css – Variablen, Reset, Typografie
   ============================================================================= */

:root {
    /* Farben aus dem INPUT-Logo + warmer Hintergrund */
    --c-orange:         #E8A33D;
    --c-orange-dark:    #C88120;
    --c-anthracite:     #3A3A3C;
    --c-anthracite-soft:#4E4E50;
    --c-text:           #2B2B2C;
    --c-muted:          #8A8A8C;

    --c-bg:             #FFFFFF;
    --c-surface:        #FFFFFF;
    --c-surface-alt:    #F5F5F5;

    --c-green-accent:   #3F6B4C;
    --c-border:         #E6E6E6;
    --c-border-soft:    #EEEEEE;

    --c-success:        #3F6B4C;
    --c-error:          #B3412B;
    --c-info:           #3A3A3C;

    /* Typografie – System-Sans-Stack, angelehnt an input.plus (durchgehend Sans-Serif) */
    --f-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
    --f-serif: var(--f-sans);

    /* Spacing */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;

    --shadow-sm: 0 1px 2px rgba(58,58,60,0.08);
    --shadow-md: 0 4px 20px rgba(58,58,60,0.10);

    --container-max: 1200px;
}

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

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

body {
    margin: 0;
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--f-sans);
    color: var(--c-anthracite);
    line-height: 1.25;
    margin: 0 0 var(--sp-4);
    font-weight: 700;
    letter-spacing: -0.015em;
}

h1 { font-size: clamp(2rem, 4vw + 0.5rem, 3rem); }
h2 { font-size: clamp(1.5rem, 2.2vw + 0.5rem, 2.125rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--sp-4); }

a {
    color: var(--c-anthracite);
    text-decoration: underline;
    text-decoration-color: var(--c-orange);
    text-underline-offset: 3px;
    transition: color .15s ease;
}
a:hover { color: var(--c-orange-dark); }

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

.eyebrow {
    display: inline-block;
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-orange-dark);
    margin-bottom: var(--sp-4);
    font-weight: 600;
}