/* =========================================================
   LA ENGINEERING GMBH
   Globales Designsystem und Grundlayout
   ========================================================= */


/* =========================================================
   0. SCHRIFTART (SELBST GEHOSTET)
   ========================================================= */

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/manrope-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/manrope-latin-500-normal.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/manrope-latin-600-normal.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/manrope-latin-700-normal.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope/manrope-latin-800-normal.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   1. DESIGN-VARIABLEN
   ========================================================= */

:root {
    /* Markenfarben – passend zum bestehenden Firmenlogo */
    --color-primary-900: #24365e;
    --color-primary-800: #2c416d;
    --color-primary-700: #34507e;

    --color-accent-700: #218bc4;
    --color-accent-600: #309fd7;
    --color-accent-500: #4cb6e8;
    --color-accent-300: #8ed4f1;
    --color-accent-100: #e4f6fd;

    /* Neutrale Farben */
    --color-white: #ffffff;
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f8fc;
    --color-surface-blue: #edf6fb;

    --color-text: #26354d;
    --color-text-soft: #59677c;
    --color-text-muted: #78859a;
    --color-border: #dce4ed;
    --color-border-strong: #c4cfdb;

    /* Statusfarben */
    --color-success: #177a4f;
    --color-success-background: #eaf8f1;

    --color-error: #b42318;
    --color-error-background: #fef0ee;

    --color-warning: #9a6700;
    --color-warning-background: #fff7df;

    /* Farbverläufe */
    --gradient-brand:
        linear-gradient(
            135deg,
            var(--color-primary-900) 0%,
            var(--color-primary-700) 45%,
            var(--color-accent-500) 100%
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            var(--color-accent-700) 0%,
            var(--color-accent-500) 100%
        );

    --gradient-soft:
        linear-gradient(
            180deg,
            var(--color-white) 0%,
            var(--color-surface-soft) 100%
        );

    /* Typografie */
    --font-family-base:
        "Manrope",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-family-heading:
        "Manrope",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.75rem;
    --font-size-4xl: 3.75rem;
    --font-size-5xl: 4.75rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.1;
    --line-height-heading: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: -0.035em;
    --letter-spacing-heading: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.08em;

    /* 8-Pixel-Abstandssystem */
    --space-1: 0.25rem;   /* 4 px */
    --space-2: 0.5rem;    /* 8 px */
    --space-3: 0.75rem;   /* 12 px */
    --space-4: 1rem;      /* 16 px */
    --space-5: 1.5rem;    /* 24 px */
    --space-6: 2rem;      /* 32 px */
    --space-7: 2.5rem;    /* 40 px */
    --space-8: 3rem;      /* 48 px */
    --space-9: 4rem;      /* 64 px */
    --space-10: 5rem;     /* 80 px */
    --space-11: 6rem;     /* 96 px */
    --space-12: 7.5rem;   /* 120 px */

    /* Layout */
    --container-width: 75rem;
    --container-wide: 87.5rem;
    --container-text: 48rem;
    --container-padding: 1.25rem;

    --header-height: 5rem;

    /* Rundungen */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    /* Schatten */
    --shadow-xs:
        0 1px 2px rgba(36, 54, 94, 0.05);

    --shadow-sm:
        0 4px 14px rgba(36, 54, 94, 0.07);

    --shadow-md:
        0 12px 32px rgba(36, 54, 94, 0.10);

    --shadow-lg:
        0 24px 60px rgba(36, 54, 94, 0.14);

    --shadow-focus:
        0 0 0 4px rgba(76, 182, 232, 0.24);

    /* Übergänge */
    --transition-fast: 160ms ease;
    --transition-base: 240ms ease;
    --transition-slow: 420ms ease;

    /* Ebenen */
    --z-base: 1;
    --z-dropdown: 100;
    --z-header: 500;
    --z-overlay: 800;
    --z-modal: 1000;
}


/* =========================================================
   2. MODERNER CSS-RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
    text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   3. GRUNDEINSTELLUNGEN
   ========================================================= */

body {
    min-height: 100vh;
    overflow-x: hidden;

    background-color: var(--color-background);
    color: var(--color-text);

    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    display: block;
}

::selection {
    background-color: var(--color-accent-100);
    color: var(--color-primary-900);
}


/* =========================================================
   4. TYPOGRAFIE
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-primary-900);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.5rem, 7vw, var(--font-size-5xl));
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
}

h2 {
    font-size: clamp(2rem, 5vw, var(--font-size-4xl));
}

h3 {
    font-size: clamp(1.5rem, 3vw, var(--font-size-2xl));
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-md);
}

p {
    max-width: 70ch;
    color: var(--color-text-soft);
}

strong,
b {
    font-weight: var(--font-weight-bold);
}

small {
    font-size: var(--font-size-sm);
}

address {
    font-style: normal;
}


/* =========================================================
   5. LINKS
   ========================================================= */

a {
    color: var(--color-primary-900);
    text-decoration-color: rgba(36, 54, 94, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;

    transition:
        color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-700);
    text-decoration-color: currentColor;
}


/* =========================================================
   6. LISTEN UND MEDIEN
   ========================================================= */

ul,
ol {
    list-style-position: outside;
}

img {
    height: auto;
}

svg {
    flex-shrink: 0;
}


/* =========================================================
   7. FORMULARELEMENTE
   ========================================================= */

button,
input,
textarea,
select {
    color: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

textarea {
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}


/* =========================================================
   8. FOKUS UND BARRIEREFREIHEIT
   ========================================================= */

:focus {
    outline: none;
}

:focus-visible {
    outline: 3px solid var(--color-accent-500);
    outline-offset: 3px;
    box-shadow: var(--shadow-focus);
}

.skip-link {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-modal);

    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);

    background-color: var(--color-primary-900);
    color: var(--color-white);

    font-weight: var(--font-weight-bold);
    text-decoration: none;

    transform: translateY(-200%);
    transition: transform var(--transition-fast);
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   9. LAYOUT-HILFSKLASSEN
   ========================================================= */

.container {
    width: min(
        calc(100% - (2 * var(--container-padding))),
        var(--container-width)
    );

    margin-inline: auto;
}

.container--wide {
    width: min(
        calc(100% - (2 * var(--container-padding))),
        var(--container-wide)
    );

    margin-inline: auto;
}

.container--text {
    width: min(
        calc(100% - (2 * var(--container-padding))),
        var(--container-text)
    );

    margin-inline: auto;
}

.section {
    position: relative;
    padding-block: var(--space-10);
}

.section--compact {
    padding-block: var(--space-8);
}

.section--large {
    padding-block: var(--space-12);
}

.section--white {
    background-color: var(--color-white);
}

.section--soft {
    background-color: var(--color-surface-soft);
}

.section--blue {
    background-color: var(--color-surface-blue);
}

.section--gradient {
    background: var(--gradient-brand);
    color: var(--color-white);
}


/* =========================================================
   10. ALLGEMEINE HILFSKLASSEN
   ========================================================= */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-primary {
    color: var(--color-primary-900);
}

.text-accent {
    color: var(--color-accent-700);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-white {
    color: var(--color-white);
}

.full-width {
    width: 100%;
}

.no-scroll {
    overflow: hidden;
}

.hidden {
    display: none !important;
}


/* =========================================================
   11. BEWEGUNGSREDUZIERUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}