/* ═══════════════════════════════════════════════════════════
   LOKALE FONTS — DSGVO-konform, kein Google-Server-Request
   ═══════════════════════════════════════════════════════════ */

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

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }

:root {
    /* ═══ MechinTeq 3-Farben-Palette ═══
       Primär:  #001AC0 (Satt-Blau)  – Navbar, Hero, Footer, Links, Icons
       Neutral: #4476A6 (Blau-Grau)  – Sekundärtext, Borders, Muted
       Akzent:  #006EA3 (Teal-Blau)  – CTA-Buttons, CTA-Section, Highlights
    ═══════════════════════════════════ */

    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F7FA;
    --bg-light: #FFFFFF;
    --bg-light-alt: #F8FAFC;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F5F7FA;
    --bg-card-light: #F8FAFC;
    --bg-card-light-hover: #EDF2F7;

    /* Primär – #001AC0 */
    --accent: #001AC0;
    --accent-light: #1A3AD6;
    --accent-dark: #0010A0;
    --accent-darker: #000A70;
    --accent-glow: rgba(0, 26, 192, 0.08);

    /* Akzent/CTA – #006EA3 */
    --accent-cta: #006EA3;
    --accent-cta-hover: #2B8EBF;

    /* Text */
    --text-primary: #1A202C;
    --text-secondary: #4476A6;
    --text-muted: #4476A6;
    --text-dark: #1A202C;
    --text-dark-secondary: #4476A6;
    --text-dark-muted: #7A9DBF;

    /* Borders */
    --border: #D0DCE8;
    --border-light: #D0DCE8;

    /* Gradients */
    --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-dark));
    --gradient-industry: linear-gradient(135deg, var(--accent), var(--accent-dark));
    --gradient-cta: linear-gradient(135deg, var(--accent-cta), #005580);
    --gradient-hero: linear-gradient(180deg, #001AC0 0%, #0D2FD0 50%, #1A44E0 100%);

    /* Footer – #001AC0 basiert */
    --bg-dark: #001AC0;
    --bg-dark-card: #0022D6;
    --text-on-dark: #F0F4F8;
    --text-on-dark-secondary: #A0B8E8;
    --text-footer: #7090D0;
    --border-dark: #0030E0;

    /* CTA-Section direkt über Footer – #006EA3 */
    --bg-cta-section: #006EA3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) #F0F0F0;
}

body {
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
}

/* ─── SERVICE CARDS (default light style) ─── */
.service-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.service-card:hover {
    box-shadow: 0 12px 40px rgba(0, 26, 192, 0.12);
}

.service-card.industry-card:hover {
    box-shadow: 0 12px 40px rgba(0, 26, 192, 0.12);
}

.card-title { color: var(--text-dark); }
.card-desc { color: var(--text-dark-secondary); }
.card-services li {
    color: var(--text-dark-secondary);
    border-bottom-color: var(--border);
}
.card-services li strong { color: var(--text-dark); }

.card-icon {
    background: rgba(0, 26, 192, 0.08);
    border-color: rgba(0, 26, 192, 0.15);
}

.industry-card .card-icon {
    background: rgba(0, 26, 192, 0.08);
    border-color: rgba(0, 26, 192, 0.15);
}

.card-icon svg { stroke: var(--accent); }
.industry-card .card-icon svg { stroke: var(--accent); }

/* ─── SECTION DEFAULTS (light) ─── */
.section-label { color: var(--accent); }
.section-title { color: var(--text-dark); }
.section-subtitle { color: var(--text-dark-secondary); }

/* ─── USP CARDS ─── */
.usp-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.usp-card:hover { border-color: var(--accent); }
.usp-card h3 { color: var(--text-dark); }
.usp-card p { color: var(--text-dark-secondary); }

/* ─── CONTACT (light default) ─── */
.contact-info h3 { color: var(--text-dark); }
.contact-text .label { color: var(--text-dark-muted); }
.contact-text .value { color: var(--text-dark); }
.contact-text a { color: var(--accent); }

.contact-form {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.form-group label { color: var(--text-dark-secondary); }
.form-group input,
.form-group textarea,
.form-group select {
    background: var(--bg-light);
    border-color: var(--border);
    color: var(--text-dark);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 26, 192, 0.1);
}

/* Category banner */
.category-banner { border-color: var(--border); }
.category-banner .banner-subtitle { color: rgba(255,255,255,0.8); }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ─── ANIMATIONS ─── */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
