/* ============================================
   base.css – ILOKA Steuern | Architekten & Ingenieure
   Fonts, Tokens, Reset
   ============================================ */

/* Cormorant Garamond */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

/* Inter */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-v20-latin-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-v20-latin-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-v20-latin-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter-v20-latin-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

:root {
    /* ── Farben (identisch zur Hauptseite) ── */
    --dunkelblau:       #0b213e;
    --dunkelblau-light: #1b3958;
    --dunkelblau-dark:  #0f2744;
    --silber:           #C9C9C9;
    --silber-light:     #F0F0F0;
    --silber-dark:      #969196;
    --silber-steel:     #4D5354;
    --weiss:            #FFFFFF;
    --text:             #14181C;
    --text-muted:       #3E464F;   /* dunkler für bessere Lesbarkeit */
    --linie:            #DFE2E6;
    --flaeche:          #F5F6F8;

    --silber-gradient: linear-gradient(90deg,
        #E5E1DE 0%, #B0ABAD 19%, #969196 26%,
        #F6F6F6 52%, #C2C0C1 71%, #8A8588 88%, #B0B0B0 100%);

    /* ── Font Sizes ── */
    --text-xs:   0.79rem;
    --text-sm:   0.9rem;
    --text-base: 1rem;
    --text-md:   1.08rem;
    --text-lg:   1.22rem;
    --text-xl:   1.35rem;
    --text-2xl:  1.7rem;
    --text-3xl:  2.4rem;
    --text-hero: clamp(2.4rem, 4.6vw, 3.6rem);

    /* ── Line Heights ── */
    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-base:   1.75;

    /* ── Font Weights ── */
    --weight-light:    300;
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;

    /* ── Layout ── */
    --breite:  1360px;
    --schmal:  880px;
    --radius:  14px;
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: var(--text-md);
    font-weight: var(--weight-normal);   /* 300 war zu dünn, besonders auf Dunkelblau */
    line-height: var(--leading-base);
    color: var(--text);
    background: var(--weiss);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    margin: 0 0 1rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

/* ── Wiederkehrende Bausteine ── */

.wrap {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3.25rem);
}

.wrap--schmal { max-width: var(--schmal); }

/* Pill-Badge statt loser Versalzeile. Der Punkt davor ist der Bezugspunkt
   einer technischen Zeichnung und hält das Auge am Anfang der Zeile. */
.label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--silber-steel);
    margin-bottom: 1.2rem;
    padding: 0.42rem 1rem 0.42rem 0.8rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--weiss);
}

.label::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--silber-steel);
    flex: 0 0 auto;
}

.label--hell {
    color: var(--silber);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.label--hell::before { background: var(--silber); }

section { padding: 5.5rem 0; }

.section-kopf {
    max-width: 720px;
    margin-bottom: 3.5rem;
}

.section-kopf h2 {
    font-size: var(--text-3xl);
    margin-bottom: 1rem;
}

.section-kopf p {
    font-size: var(--text-lg);
    color: var(--text-muted);
}

.section-kopf--zentriert {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ── Buttons ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2.4rem;
    border-radius: 30px;
    border: 2px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.25s, opacity 0.25s, background 0.25s, color 0.25s;
}

.btn:hover { transform: translateY(-2px); }

.btn--gross {
    padding: 1.15rem 2.8rem;
    font-size: var(--text-base);
}

.btn--primaer {
    background: var(--dunkelblau);
    color: var(--weiss);
    border-color: var(--dunkelblau);
}
.btn--primaer:hover { background: var(--dunkelblau-light); border-color: var(--dunkelblau-light); }

.btn--silber {
    background: var(--silber-gradient);
    color: var(--dunkelblau-dark);
}
.btn--silber:hover { opacity: 0.88; }

.btn--outline {
    background: transparent;
    color: var(--weiss);
    border-color: rgba(255, 255, 255, 0.45);
}
.btn--outline:hover { background: rgba(255, 255, 255, 0.1); }

@media (max-width: 768px) {
    section { padding: 3.5rem 0; }
    .section-kopf { margin-bottom: 2.5rem; }
    .section-kopf h2 { font-size: var(--text-2xl); }
    .btn { padding: 0.85rem 1.8rem; }
}

/* Nutzer, die reduzierte Bewegung bevorzugen */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}