@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonts/open-sans-variable-latin.woff2') format('woff2');
}

:root {
    --color-primary:      #39a833;
    --color-primary-dark: #2d8228;
    --color-nav-active:   #30383e;
    --color-text:         #333333;
    --color-text-muted:   #666666;
    --color-bg:           #ffffff;
    --color-bg-alt:       #f5f5f5;
    --color-border:       #dddddd;
    --color-footer-bg:    #1c1c1c;
    --color-footer-text:  #aaaaaa;

    --spacing-xs:  0.25rem;
    --spacing-s:   0.5rem;
    --spacing-m:   1rem;
    --spacing-l:   1.5rem;
    --spacing-xl:  2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    --font-base:      'Open Sans', system-ui, sans-serif;
    /* Desktop-Schrift auf Kundenwunsch um 25 % reduziert (Headline 35 %,
       siehe unten). Bei Tokens mit knappem Mobile/Desktop-Abstand musste
       auch der Mobile-Wert mitskaliert werden, sonst wäre der neue
       Desktop-Wert kleiner als der Mobile-Wert geworden (ungültiger,
       "eingefrorener" clamp()). Bei Tokens mit ausreichendem Abstand
       (3xl, nav-copy, hours, headline, name) blieb der Mobile-Wert unangetastet. */
    --font-size-xs:   clamp(0.5625rem, 0.2vw + 0.7rem,   0.6094rem);
    --font-size-sm:   clamp(0.8125rem, 0.3vw + 0.75rem,  0.875rem); /* zurück auf Ursprungswert, war zu klein (u.a. Footer) */
    --font-size-base: clamp(0.875rem,  0.4vw + 0.8rem,   0.9375rem);
    --font-size-md:   clamp(0.7031rem, 0.5vw + 0.85rem,  0.75rem);
    --font-size-lg:   clamp(0.7969rem, 0.8vw + 0.9rem,   0.8906rem);
    --font-size-xl:   clamp(0.9rem,    1.2vw + 0.9rem,   1.125rem);
    --font-size-2xl:  clamp(1.05rem,   2vw + 0.9rem,     1.4063rem);
    --font-size-3xl:  clamp(1.75rem,   3vw + 0.9rem,     1.875rem);

    /* Typo-Spec Druckdesigner (VO-Website_Typoangaben.pdf), pt → rem: rem = pt / 12 */
    --font-size-nav:      clamp(0.8rem, 0.3vw + 0.7rem, 1rem);      /* Menü: Bold, kleiner als 18pt-Copy – Logo braucht den Platz – zurück auf Ursprungswert, war zu klein */
    --font-size-copy:     clamp(1rem,    0.5vw + 0.9rem,  1.275rem);   /* Copy/Subhead: Regular/SemiBold 18pt, ZAB 30pt – Desktop-Max moderat kleiner als Original (1.5rem), gilt auch für team-member__roles */
    --line-height-copy:   1.667;
    --font-size-hours:    clamp(1.25rem, 0.8vw + 1.05rem, 1.375rem); /* "Wir sind für Sie da": SemiBold 22pt */
    --font-size-headline: clamp(1.75rem, 3.2vw + 1.1rem,  1.95rem);     /* Headline/Card-Head: Bold 36pt, ZAB 50pt – Desktop 35 % kleiner */
    --line-height-headline: 1.389;
    --font-size-name:     clamp(1.375rem, 1.2vw + 1.1rem, 1.5rem);     /* Namen/Accordion-Head: SemiBold 24pt, ZAB 30pt */
    --line-height-name:   1.25;

    --container-max:    1180px;
    --header-height:    152px;
    --stripe-height:    14px;
    --radius-s:         2px;
    --radius-m:         4px;
    --radius-l:         10px;
    --radius-xl:        24px;
    --transition-base:  0.18s ease;
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.65;
}

.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--spacing-l);
}

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

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@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;
    }
}