/*
    Bueren / Basis-Stile & wiederverwendbare Bausteine
    ==================================================
    Reset, Grundtypografie, Container-Hilfsklasse, das wiederkehrende
    "Strukturraster"-Punktmuster sowie die gemeinsamen .button-Varianten,
    die in mehreren Sektionen (Navigation, Hero, CTA) zum Einsatz kommen.

    Setzt voraus, dass tokens.css VOR dieser Datei geladen wird.
*/

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

body {
    margin: 0;
    font-family: var(--schrift);
    background: var(--farbe-surface);
    color: var(--farbe-on-surface);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

h1, h2, h3, h4, h5, p, ul {
    margin: 0;
}

h1, h2, h3 {
    text-wrap: balance;
}


/*
    Container
    ---------
    Zentrierter Inhaltsbereich mit maximaler Breite (--container-max) und
    responsivem Seitenrand. Wird von jeder Sektion verwendet, damit alle
    Inhalte auf einer gemeinsamen Breite ausgerichtet sind.
*/
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--rand-mobil);
}

@media (min-width: 768px) {
    .container {
        padding-inline: var(--rand-desktop);
    }
}


/*
    Strukturraster
    --------------
    Gepunktetes Hintergrundmuster, das den technischen/präzisen Charakter
    des Designs unterstreicht (siehe ".structural-grid" in der Stitch-
    Vorlage bzw. DESIGN.md "Layout & Spacing"). Wird mehrfach verwendet:
    Hintergrund der Expertise-Sektion, Wasserzeichen in der CTA-Sektion
    und als Bild-Platzhalter bei Projekt-Karten ohne Foto.
*/
.strukturraster {
    background-image: radial-gradient(circle, var(--farbe-outline-variant) 1px, transparent 1px);
    background-size: 32px 32px;
}


/*
    Buttons
    -------
    Eine gemeinsame Basisklasse ".button" plus drei Modifier für die im
    Template vorkommenden Varianten. Wird sowohl auf <a>- als auch auf
    <button>-Elemente angewendet; alle Handlungsaufforderungen dieser
    Seite sind als Links umgesetzt (führen zu Sektionen/CMS-Links),
    sehen aber wie Buttons aus.
*/
.button {
    display: inline-block;
    padding: 12px 32px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12px;            /* Skalenstufe "label-md" aus DESIGN.md */
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--uebergang), color var(--uebergang), opacity var(--uebergang),
                transform 160ms var(--ease-ui);
}

/* Primaer: dunkles Navy - Haupt-Handlungsaufforderung, z. B. "Kontakt" auf hellem Grund */
.button--primary {
    background: var(--farbe-primary);
    color: var(--farbe-on-primary);
    border-color: var(--farbe-primary);
}
.button--primary:hover {
    opacity: 0.9;
}

/* Weiß gefüllt: für Einsatz auf dunklen Flächen, z. B. linke CTA-Spalte */
.button--weiss {
    background: var(--farbe-weiss);
    color: var(--farbe-primary);
    border-color: var(--farbe-weiss);
}
.button--weiss:hover {
    background: var(--farbe-surface-container-highest);
}

/* Hell umrandet: transparent mit weißer Linie für dunkle/Bild-Hintergründe;
   beim Hover dreht sich der Kontrast um (gefüllt statt umrandet) */
.button--outline-hell {
    background: transparent;
    color: var(--farbe-weiss);
    border-color: var(--farbe-weiss);
}
.button--outline-hell:hover {
    background: var(--farbe-weiss);
    color: var(--farbe-primary);
}

/* Taktile Rückmeldung: Scale-Press fühlt sich wie ein echter Button an */
.button:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}


/*
    Scroll-Reveal
    -------------
    Elemente mit der Klasse ".sr" sind initial unsichtbar und werden von
    scroll-reveal.js mit ".sr--sichtbar" aktiviert, sobald sie in den
    Viewport scrollen. Hinter "prefers-reduced-motion" abgesichert: ohne
    Animation-Präferenz sind sie von Anfang an sichtbar (kein JS nötig).
*/
@media (prefers-reduced-motion: no-preference) {
    .sr {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity 0.5s var(--ease-ui),
            transform 0.5s var(--ease-ui);
    }

    .sr--sichtbar {
        opacity: 1;
        transform: translateY(0);
    }
}