/* =========================================================
   Lokal eingebundene Schriften (Outfit / Plus Jakarta Sans)
   – kein externer Aufruf an Google Fonts (DSGVO)
   ========================================================= */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-ext-35e12df6.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-35708376.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-ext-35e12df6.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-35708376.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-ext-35e12df6.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-35708376.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-ext-35e12df6.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-35708376.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-ext-35e12df6.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('Assets/fonts/outfit-latin-35708376.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-cyrillic-ext-fccbe4fa.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-vietnamese-fdf1d5c3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-ext-9f6257e3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-fdb05bf0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-cyrillic-ext-fccbe4fa.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-vietnamese-fdf1d5c3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-ext-9f6257e3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-fdb05bf0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-cyrillic-ext-fccbe4fa.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-vietnamese-fdf1d5c3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-ext-9f6257e3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-fdb05bf0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-cyrillic-ext-fccbe4fa.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-vietnamese-fdf1d5c3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-ext-9f6257e3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-fdb05bf0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-cyrillic-ext-fccbe4fa.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-vietnamese-fdf1d5c3.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-ext-9f6257e3.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('Assets/fonts/plus-jakarta-sans-latin-fdb05bf0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
Theme Name: Steenbock
Theme URI: https://steenbock-bau.de
Author: Steenbock
Description: Custom Theme für die Steenbock-Website (Migration aus statischem HTML/CSS).
Version: 1.0.5
Text Domain: steenbock
*/

/* 
  STEENBOCK - DESIGN 11 
  The "Perfected" Design: Combining the edginess of Design 09 with the animations and expertise layout of Design 10.
*/

/*
 * Design-System: wenige feste Stufen.
 * Keine Einzel-Variablen pro Pixel — Abstand (--s-*) und Schrift (--fs-*, --fw-*) nur hier erweitern.
 */
:root {
    /* Farben */
    --clr-brand: #FB5303;
    --clr-brand-hover: #E34A00;
    --clr-brand-dim: rgba(251, 83, 3, 0.1);
    --clr-bg: #F4F5F6;
    --clr-surface: #FFFFFF;
    --clr-dark: #090B0F;
    --clr-dark-surface: #28231F;
    --clr-text-main: #1F1B18;
    --clr-text-muted: #5B626A;
    --clr-text-light: #E9ECEF;
    --clr-border: #E1E5EA;
    --clr-border-dark: #36302B;
    --clr-bg-dark-warm: #2d1a0e;
    --clr-on-dark: #ffffff;
    --clr-on-dark-muted: rgba(255, 255, 255, 0.8);
    --clr-on-dark-soft: rgba(255, 255, 255, 0.7);
    --clr-on-dark-dim: rgba(255, 255, 255, 0.6);

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    /* Abstand: 8 Stufen, global nur diese */
    --s-1: 0.5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4rem;
    --s-7: 6rem;
    --s-8: 8rem;

    /* Schriftgrößen: nur diese (ggf. clamp = eine Stufe) */
    --fs-meta: 0.75rem;
    --fs-small: 0.875rem;
    --fs-body: 1.05rem;
    --fs-lead: 1.125rem;
    --fs-heading: clamp(1.5rem, 3vw, 2.25rem);
    --fs-display: clamp(2.25rem, 4.5vw, 3.75rem);
    --fs-hero: clamp(2.5rem, 5vw, 4.5rem);
    --fs-hero-home: clamp(3rem, 7vw, 5.5rem);

    /* Schriftgewichte: nur drei */
    --fw-body: 500;
    --fw-bold: 700;
    --fw-black: 900;

    --lh-snug: 1.15;
    --lh-body: 1.6;
    --lh-prose: 1.75;

    --track-tight: 0.02em;
    --track-wide: 0.1em;
    --track-label: 0.15em;

    --section-y: clamp(3.5rem, 6vw, 6.5rem);
    --max: 87.5rem;
    --measure: 38rem;

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-1: 0.2s;
    --t-2: 0.35s;
    --t-3: 0.55s;
    --t-4: 0.8s;

    --radius: 0;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-body);
    color: var(--clr-text-main);
    background-color: var(--clr-bg);
    line-height: var(--lh-body);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-2) var(--ease-out),
        opacity var(--t-2) var(--ease-out),
        border-color var(--t-2) var(--ease-out),
        background-color var(--t-2) var(--ease-out),
        transform var(--t-2) var(--ease-out);
}

/* Prose Content Links - Standard for inline text */
.article-body a,
.legal-article a,
.company-bio a,
.timeline-content a,
.service-desc a,
.about-text-content a,
.section-lead-text a,
.contact-lead a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--t-1) var(--ease-out), 
                text-decoration-color var(--t-1) var(--ease-out);
}

.article-body a:hover,
.legal-article a:hover,
.company-bio a:hover,
.timeline-content a:hover,
.service-desc a:hover,
.about-text-content a:hover,
.section-lead-text a:hover,
.contact-lead a:hover {
    color: var(--clr-brand);
    text-decoration-color: var(--clr-brand);
}

.article-body a:focus-visible,
.legal-article a:focus-visible,
.company-bio a:focus-visible,
.timeline-content a:focus-visible,
.service-desc a:focus-visible,
.about-text-content a:focus-visible,
.section-lead-text a:focus-visible,
.contact-lead a:focus-visible {
    outline: 2px solid var(--clr-brand);
    outline-offset: 3px;
}

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

ul {
    list-style: none;
}

/* Typography styles */
h1,
h2,
h3,
h4,
.logo-text {
    font-family: var(--font-heading);
    line-height: 1.15;
    font-weight: var(--fw-black);
    /* Increased to Black weight */
    color: var(--clr-text-main);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    /* Wider spacing to feel less "narrow" */
    overflow-wrap: break-word;
    /* Keine automatische Silbentrennung in Überschriften (unschöne Trennung wie "Leis-tungen") */
    hyphens: none;
}

.section-label {
    display: inline-block;
    font-size: var(--fs-small);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    font-weight: var(--fw-bold);
    color: var(--clr-text-muted);
    margin-bottom: var(--s-3);
    position: relative;
    padding-left: var(--s-5);
}

.section-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--s-3);
}

.section-header-top .btn-more {
    margin-left: auto;
}

.section-header-top .section-label {
    margin-bottom: 0 !important;
}

.about .section-header-top {
    align-items: center;
    margin-bottom: var(--s-3);
}

.btn-more {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--clr-brand);
    transition: color var(--t-2) var(--ease-out),
        transform var(--t-2) var(--ease-out);
    padding-top: 0.1rem;
    /* Alignment with label text */
}

.btn-more:hover {
    color: var(--clr-brand-hover);
    transform: translateX(8px);
}

.btn-more svg {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 3;
}

.section-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--s-3);
    height: 2px;
    background-color: var(--clr-brand);
}

.section-title {
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.15;
    margin-bottom: var(--s-4);
    font-weight: var(--fw-black);
    letter-spacing: 0.02em;
    text-align: left;
    /* Ensure left alignment as requested */
}

/* Layout */
.container {
    width: 100%;
    max-width: var(--max);
    padding: 0 5%;
    margin: 0 auto;
}

.section {
    padding: var(--section-y) 0;
    position: relative;
}

.bg-dark {
    background-color: var(--clr-bg-dark-warm);
    color: var(--clr-text-light);
}

.bg-dark .section-title,
.bg-dark .section-label {
    color: var(--clr-on-dark);
}

.bg-accent {
    background-color: var(--clr-brand);
    color: var(--clr-on-dark);
}

/* Buttons - Edgy adaptation of Design 10 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: var(--s-2) var(--s-4);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: background-color var(--t-2) var(--ease-out),
        color var(--t-2) var(--ease-out),
        border-color var(--t-2) var(--ease-out),
        transform var(--t-2) var(--ease-out),
        box-shadow var(--t-2) var(--ease-out);
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    border-radius: var(--radius);
}

.btn-primary {
    background-color: var(--clr-brand);
    color: var(--clr-on-dark);
}

.btn-primary:hover {
    background-color: var(--clr-brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 0.625rem 1.25rem rgba(250, 84, 0, 0.2);
}

.btn-outline {
    border-color: var(--clr-text-main);
    color: var(--clr-text-main);
}

/* Form Card - Centralized component for contact forms and interactive containers */
.form-card {
    background-color: var(--clr-surface);
    padding: var(--s-6);
    border: 1px solid var(--clr-border);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.04); /* Subtle focus for interaction zones */
    transition: transform var(--t-3) var(--ease-out), box-shadow var(--t-3) var(--ease-out);
}

.form-card--on-accent {
    border: none;
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.12); /* Stronger lift on vibrant backgrounds */
    position: relative;
    z-index: 5;
}

@media (max-width: 1024px) {
    .form-card {
        padding: var(--s-4) var(--s-3);
    }
}

/* Global Sub-Page Hero (Refined) */
.page-header-refined {
    height: 60vh;
    min-height: 31.25rem;
    padding-top: 5rem;
    /* Space for the header */
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--clr-dark);
    /* Dark base for contrast */
    overflow: hidden;
}

.header-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.header-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.4) saturate(0.8);
}

.hero-title {
    font-family: var(--font-heading);
    font-weight: var(--fw-black);
    color: var(--clr-on-dark);
    line-height: var(--lh-snug);
    text-transform: uppercase;
}

.page-header-refined .hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: var(--s-3);
    letter-spacing: 0.02em;
}

.hero-subtitle {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--clr-on-dark-muted);
    max-width: var(--measure);
    line-height: var(--lh-body);
}

.page-header-refined .hero-subtitle {
    color: var(--clr-on-dark-soft);
}

.page-header-refined .section-label {
    color: var(--clr-on-dark-muted);
}

.page-header-refined .header-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Blogbeitrag: nur Bildstreifen, kein Text im Hero */
.page-header-refined--post {
    height: 38vh;
    min-height: 17.5rem;
    align-items: center;
    padding-top: 5rem;
    padding-bottom: 0;
}

@media (max-width: 1024px) {
    .page-header-refined {
        height: 50vh;
        min-height: 23.75rem;
        align-items: flex-end;
        padding-bottom: var(--s-6);
    }

    .page-header-refined--post {
        height: 32vh;
        min-height: 13.75rem;
        align-items: center;
        padding-bottom: 0;
    }
}

.btn-outline:hover {
    background-color: var(--clr-text-main);
    color: var(--clr-on-dark);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--clr-on-dark);
}

.btn-outline-light:hover {
    background-color: var(--clr-on-dark);
    color: var(--clr-dark);
}

.btn-dark {
    background-color: var(--clr-dark);
    color: var(--clr-on-dark);
}

.btn-dark:hover {
    background-color: var(--clr-border-dark);
}

/* ANIMATIONS - From Design 10 logic
   Wichtig: Die Ausblendung greift nur, wenn JavaScript aktiv ist (.js wird per
   Inline-Script im <head> gesetzt). Ohne JS bleibt der Inhalt sofort sichtbar,
   damit Text auch für Crawler ohne JS-Rendering zugänglich ist. */
.js .animate-up {
    opacity: 0;
    transform: translateY(2.5rem);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js .animate-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Unterseiten-Hero: sofort sichtbar (nach .animate-up, damit Spezifität greift) */
.js .page-header-refined .animate-up {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

/* HEADER - Edgy but from Design 10 */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: var(--s-5) 0;
    transition: padding var(--t-3) var(--ease-out),
        background-color var(--t-3) var(--ease-out),
        backdrop-filter var(--t-3) var(--ease-out),
        border-color var(--t-3) var(--ease-out);
    background-color: transparent;
}

.site-header.scrolled {
    padding: var(--s-2) 0;
    background-color: rgba(31, 27, 24, 0.85);
    backdrop-filter: blur(0.9375rem);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 2.375rem;
    width: auto;
    transition: transform var(--t-2) var(--ease-out);
}

.logo:hover img {
    transform: scale(1.05);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    transition: gap var(--t-2) ease;
}

@media (max-width: 1200px) {
    .logo img {
        height: 2rem;
    }
    .main-nav {
        gap: var(--s-3);
    }
    .main-nav .btn-outline {
        padding: 0.5rem 1rem;
        font-size: var(--fs-meta);
    }
}

.main-nav .btn-outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--clr-on-dark);
}

.main-nav .btn-outline:hover {
    background-color: var(--clr-on-dark);
    color: var(--clr-dark);
    border-color: var(--clr-on-dark);
}

.main-nav a:not(.btn) {
    font-size: var(--fs-small);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    position: relative;
    padding-bottom: 4px;
    color: var(--clr-on-dark);
}

.main-nav a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--clr-brand);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--ease-out);
}

.main-nav a:not(.btn):hover::after,
.main-nav a:not(.btn).active-link::after {
    transform: scaleX(1);
    transform-origin: left;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    width: 1.875rem;
}

.mobile-toggle span {
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: transform var(--t-2) var(--ease-out), opacity var(--t-2) var(--ease-out);
}

/* HERO SLIDESHOW - Startpage */
.hero-slideshow {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--clr-dark);
}

.slides-container {
    height: 100%;
    width: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
    display: flex;
    align-items: center;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.slide-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
    transform: scale(1.15);
    transition: transform 8s linear;
}

.hero-slide.active .slide-image img {
    transform: scale(1);
}

.slide-content {
    position: relative;
    z-index: 20;
    color: var(--clr-on-dark);
    max-width: 56rem;
}

.header-content {
    position: relative;
    z-index: 20;
    color: var(--clr-on-dark);
    width: 100%;
}

.hero-slideshow .hero-title {
    font-size: var(--fs-hero-home);
    letter-spacing: var(--track-tight);
}

.hero-slide .hero-kicker {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    letter-spacing: var(--track-label);
    text-transform: none;
    color: var(--clr-on-dark-muted);
    margin-bottom: var(--s-2);
    max-width: var(--measure);
    line-height: var(--lh-body);
}

.hero-slide .hero-title {
    margin-bottom: var(--s-3);
}

.hero-slide .hero-title span {
    display: block;
}

.hero-slide .hero-subtitle {
    color: var(--clr-on-dark-muted);
    font-size: var(--fs-lead);
    max-width: var(--measure);
    margin-bottom: var(--s-5);
    line-height: var(--lh-body);
}

.slideshow-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.nav-dots {
    display: flex;
    gap: var(--s-3);
    padding-bottom: var(--s-6);
}

.nav-dots .dot {
    width: 6.25rem;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.nav-dots .dot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--clr-brand);
}

.nav-dots .dot.active {
    background: rgba(255, 255, 255, 0.1);
}

.nav-dots .dot.active::after {
    width: 100%;
    transition: width 6s linear;
}

.slideshow-nav-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}

/* ABOUT SECTION - Startpage */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: var(--s-7);
}

.about .section-label {
    margin-bottom: var(--s-5);
}

.large-year {
    font-size: clamp(5rem, 10vw, 9rem);
    font-weight: var(--fw-black);
    line-height: 0.8;
    color: var(--clr-dark);
    letter-spacing: -0.05em;
    margin-bottom: var(--s-4);
}

.year-meta {
    max-width: none;
    width: 100%;
}

.year-title {
    font-weight: var(--fw-bold);
    color: var(--clr-brand);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    margin-bottom: var(--s-1);
}

.year-desc {
    color: var(--clr-text-muted);
    line-height: var(--lh-body);
}

.about .about-text-body .about-section-title {
    hyphens: none;
    overflow-wrap: normal;
    word-break: normal;
}

.about-text-content .lead {
    font-size: var(--fs-heading);
    font-weight: var(--fw-body);
    margin-bottom: var(--s-4);
    color: var(--clr-text-main);
}

.about-text-content p {
    color: var(--clr-text-muted);
    font-size: var(--fs-body);
    margin-bottom: var(--s-4);
    line-height: var(--lh-prose);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--clr-border);
}

.stat-item .n {
    display: block;
    font-size: 3rem;
    font-weight: var(--fw-bold);
    color: var(--clr-dark);
    line-height: 1;
    margin-bottom: var(--s-1);
}

.stat-item .n span {
    color: var(--clr-brand);
}

.stat-item .l {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--clr-text-muted);
    letter-spacing: 0.05em;
}

/* EXPERTISE SECTION - Startpage */
.expertise-list {
    margin-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.expertise-item {
    display: flex;
    align-items: center;
    padding: var(--s-5) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    transition: background-color var(--t-2) ease;
}

.expertise-num {
    flex:
        0
        0
        6%;
    width: 6%;
    /* Reduced from 8% */
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--clr-brand);
    font-family: var(--font-heading);
    letter-spacing: var(--track-wide);
    opacity: 0.6;
    transition: opacity var(--t-2) ease;
}

.expertise-content {
    flex:
        0
        1
        calc(100% - 6% - 35%);
    max-width: min(42rem, calc(100% - 6% - 35%));
    min-width: 0;
    box-sizing: border-box;
    padding-right: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.expertise-content h3 {
    font-size: var(--fs-heading);
    margin-bottom: 0;
    font-weight: var(--fw-black);
    transition:
        transform var(--t-3) var(--ease-out),
        color var(--t-3) var(--ease-out);
    color: var(--clr-on-dark);
    letter-spacing: 0.04em;
}

.expertise-content p {
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--fs-body);
    max-width: 42rem;
    /* Increased from 26rem */
    transition:
        transform var(--t-3) var(--ease-out),
        color var(--t-3) var(--ease-out);
    line-height: 1.5;
}

.expertise-image {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 35%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.6s var(--ease-out);
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
}

.expertise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0);
    transform: scale(1.1);
    transition: all 0.8s var(--ease-out);
}

.expertise-item:hover .expertise-num {
    opacity: 1;
}

.expertise-item:hover .expertise-content h3 {
    transform: translateX(0);
    color: var(--clr-brand);
}

.expertise-item:hover .expertise-content p {
    transform: translateX(0);
    color: rgba(255, 255, 255, 0.8);
}

.expertise-item:hover .expertise-image {
    opacity: 1;
    visibility: visible;
}

.expertise-item:hover .expertise-image img {
    filter: saturate(1);
    transform: scale(1);
}

/* Überschrift als Link: ganze Zeile klickbar (stretched link) */
.expertise-content h3 a {
    color: inherit;
    text-decoration: none;
}

.expertise-content h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* 404: gleiche Zeilen-Optik wie Expertise, Lesetypo für helle Fläche */
.error-404-content {
    background-color: var(--clr-surface);
    color: var(--clr-text-main);
}

.error-404-content .expertise-list {
    border-top-color: rgba(31, 27, 24, 0.12);
}

.error-404-content .expertise-item {
    border-bottom-color: rgba(31, 27, 24, 0.1);
}

.error-404-content .expertise-content h3 {
    color: var(--clr-text-main);
}

.error-404-content .expertise-content p {
    color: var(--clr-text-muted);
}

.error-404-content .expertise-item:hover .expertise-content h3 {
    color: var(--clr-brand);
}

.error-404-content .expertise-item:hover .expertise-content p {
    color: var(--clr-text-main);
}

/* REFERENCES - Corrected Bento Grid Layout */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 25rem;
    gap: var(--s-4);
}

.bento-item {
    position: relative;
    overflow: hidden;
    background-color: var(--clr-dark);
}

.item-left {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
    /* Spans two rows = 800px + gap */
}

.item-right-top {
    grid-column: 8 / 13;
    grid-row: 1 / 2;
}

.item-right-bottom {
    grid-column: 8 / 13;
    grid-row: 2 / 3;
}

.bento-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bento-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-3) var(--ease-out),
        opacity var(--t-2) ease;
    opacity: 0.8;
}

.bento-info {
    position: absolute;
    inset: 0;
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(10, 11, 12, 0.9) 0%, rgba(10, 11, 12, 0.2) 60%, transparent 100%);
    color: var(--clr-on-dark);
    opacity: 0;
    transition: opacity var(--t-3) var(--ease-out),
        background var(--t-3) var(--ease-out);
}

.item-cat {
    font-size: var(--fs-meta);
    font-weight: var(--fw-bold);
    color: var(--clr-brand);
    letter-spacing: var(--track-wide);
    margin-bottom: var(--s-1);
    transform: translateY(var(--s-1));
    transition: transform var(--t-3) var(--ease-out),
        opacity var(--t-3) var(--ease-out);
}

.view-project-link {
    margin-top: var(--s-3);
    font-size: var(--fs-meta);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    color: var(--clr-brand);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.view-project-link svg {
    width: var(--fs-small);
    height: var(--fs-small);
    stroke-width: 3px;
    transition: transform var(--t-2) var(--ease-out);
}

.bento-item:hover .view-project-link svg {
    transform: translateX(0.3125rem);
}

.bento-info h4 {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    margin-bottom: var(--s-1);
    color: var(--clr-on-dark);
    transform: translateY(1.25rem);
    transition: transform var(--t-4) var(--ease-out),
        opacity var(--t-4) var(--ease-out);
}

.bento-info p {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    transform: translateY(1.25rem);
    transition: transform var(--t-4) var(--ease-out) 0.1s,
        opacity var(--t-4) var(--ease-out) 0.1s;
}

.bento-item:hover .bento-info {
    opacity: 1;
}

.bento-item:hover .bento-info h4,
.bento-item:hover .bento-info p,
.bento-item:hover .item-cat {
    transform: translateY(0);
}

.bento-item:hover img {
    opacity: 0.6;
    transform: scale(1.05);
}

/* CONTACT SECTION - From Design 10 but Edgy */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
}

.contact-info .section-header {
    margin-bottom: var(--s-4);
}

.contact-info .section-title {
    margin-bottom: var(--s-4);
}

.contact-lead {
    font-size: var(--fs-lead);
    opacity: 0.9;
    margin-bottom: var(--s-5);
    line-height: var(--lh-body);
    max-width: var(--measure);
}

.contact-details {
    margin-top: var(--s-5);
    display: grid;
    gap: var(--s-4);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.detail-item .label {
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--clr-on-dark-soft);
    letter-spacing: var(--track-wide);
}

.detail-item .detail-value {
    font-size: var(--fs-lead);
    font-weight: var(--fw-bold);
    font-family: var(--font-heading);
    transition: color var(--t-2) var(--ease-out);
}

.detail-item a.detail-value:hover {
    color: #fff;
    opacity: 0.7;
}

.contact-form {
    position: relative;
    width: 100%;
}

.form-group {
    margin-bottom: var(--s-5);
}

.contact-form p {
    margin: 0;
}

.form-group .wpcf7-form-control-wrap {
    display: block;
}

.form-group label {
    display: block;
    font-size: var(--fs-meta);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    margin-bottom: var(--s-2);
    color: var(--clr-text-muted);
    letter-spacing: var(--track-wide);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--s-2) 0;
    border: none;
    border-bottom: 1px solid var(--clr-border);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    background: transparent;
    border-radius: var(--radius);
    transition: border-bottom-color var(--t-2) var(--ease-out),
        padding-left var(--t-2) var(--ease-out);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: var(--clr-brand);
    padding-left: var(--s-1);
}

.contact-form textarea {
    min-height: 8rem; /* Tokenized approx for 4.5rem legacy */
    max-height: min(50vh, 25rem);
    resize: none;
    overflow-y: auto;
    line-height: var(--lh-body);
}

.contact-form .btn-dark {
    width: 100%;
    margin-top: var(--s-4);
    padding: var(--s-4) var(--s-5);
}

.contact-form .wpcf7-submit {
    width: 100%;
    margin-top: var(--s-4);
}

.contact-form .wpcf7-spinner {
    margin: var(--s-3) 0 0;
}

.contact-form .wpcf7-not-valid-tip {
    margin-top: var(--s-2);
    font-size: var(--fs-small);
}

.contact-form .wpcf7-response-output {
    margin: var(--s-4) 0 0;
    padding: var(--s-3);
    border: 1px solid var(--clr-border);
    font-size: var(--fs-small);
}

.form-group-consent {
    margin-bottom: var(--s-3);
    font-size: var(--fs-small);
    color: var(--clr-text-muted);
}

.form-group-consent .wpcf7-list-item {
    margin: 0;
}

.form-group-consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    text-transform: none;
    letter-spacing: 0;
    line-height: var(--lh-body);
}

.form-group-consent input {
    width: auto;
    margin-top: 0.2rem;
}

.form-group-consent a {
    text-decoration: underline;
}

.contact-form-notice {
    background: var(--clr-surface);
    padding: var(--s-4);
    border: 1px solid var(--clr-border);
}

.contact-section .section-label {
    color: var(--clr-on-dark-muted);
}

.contact-section .section-label::before {
    background-color: var(--clr-on-dark);
}

.contact-section .section-title {
    color: var(--clr-on-dark);
}

/* 
 * Contact Form 7: Accents & States are handled by .form-card utilities. 
 * Redundant specific overrides removed for better maintainability.
 */
.contact-section.bg-accent .contact-form-wrapper {
    color: var(--clr-text-main);
}

/* FOOTER - From Design 09 */
.footer {
    padding: var(--section-y) 0 calc(var(--section-y) / 2);
    /* Synchronized with section spacing */
    background-color: var(--clr-dark);
    color: #fff;
}

.footer-inner {
    display: grid;
    /* 4 Spalten für asymmetrischen Rhythmus (letzte bleibt leer) */
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--s-6);
}

.footer-logo img {
    height: 2.375rem;
    width: auto;
    margin-bottom: var(--s-4);
    filter: brightness(0) invert(1);
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    max-width: 20rem;
}

.footer-col h4 {
    font-size: var(--fs-body);
    color: var(--clr-brand);
    margin-bottom: var(--s-4);
    letter-spacing: var(--track-wide);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.footer-col a {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--fs-small);
    transition: color var(--t-2) var(--ease-out);
}

.footer-col a:hover {
    color: var(--clr-brand);
}

.footer-bottom {
    margin-top: var(--s-7);
    padding-top: var(--s-4);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--fs-small);
}

.footer-bottom a {
    color: inherit;
    text-decoration: underline;
}

/* UTILITIES */
.no-scroll {
    overflow: hidden;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    :root {
        --section-y: 5rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .about-text-content {
        margin-top: 0;
    }

    .expertise-content {
        width: 100%;
        max-width: none;
    }

    .expertise-image {
        display: none;
    }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {

    /* Mobile Header & Nav */
    .site-header {
        padding: 1rem 0;
        /* Reduced padding */
        background-color: rgba(30, 23, 19, 0.95);
        backdrop-filter: blur(0.625rem);
    }

    .logo img {
        height: 1.75rem;
    }

    .footer-logo img {
        height: 1.75rem;
    }

    .mobile-toggle {
        display: flex;
        z-index: 1100;
    }

    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: var(--clr-dark);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        padding: 2rem;
        transform: translateX(100%);
        transition: transform 0.6s var(--ease-out);
        z-index: 1000;
    }

    .main-nav.active {
        transform: translateX(0);
    }

    .main-nav a:not(.btn) {
        font-size: var(--fs-heading);
    }

    .main-nav .btn {
        font-size: var(--fs-lead);
        padding: 1.25rem 3rem;
        border-color: var(--clr-brand);
        color: var(--clr-on-dark);
    }

    /* Hero Responsive */
    .hero-slide .hero-title {
        font-size: clamp(2rem, 10vw, 3rem);
        letter-spacing: 0.02em;
        /* Keine automatische Silbentrennung; Umbruch nur wenn ein Wort nicht passt */
        hyphens: none;
        overflow-wrap: break-word;
    }

    .hero-slide {
        align-items: flex-end;
        padding-bottom: var(--s-8);
    }

    .hero-slide .hero-subtitle {
        font-size: var(--fs-body);
        margin-bottom: var(--s-5);
        line-height: 1.5;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* Space between stacked buttons */
        width: 100%;
        margin-bottom: 2rem;
    }

    .hero-actions .btn {
        width: 100%;
        /* Full width buttons on mobile */
    }

    .nav-dots {
        gap: 0.75rem;
        padding-bottom: 2.5rem;
    }

    .nav-dots .dot {
        width: 2.5rem;
    }

    .section-header-top {
        align-items: center;
        margin-bottom: var(--s-3);
    }

    .btn-more {
        font-size: var(--fs-meta);
        gap: 0.4rem;
    }

    .btn-more svg {
        width: var(--fs-small);
        height: var(--fs-small);
    }

    .large-year {
        font-size: 3.5rem;
        letter-spacing: -0.02em;
        margin-bottom: var(--s-2);
    }

    .year-meta {
        max-width: none;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--s-2);
        padding-top: var(--s-4);
    }

    .stat-item .n {
        font-size: var(--fs-heading);
    }

    .stat-item .l {
        font-size: var(--fs-meta);
        letter-spacing: 0.02em;
    }

    .expertise-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 2.5rem 0;
    }

    .expertise-num {
        width: auto;
        margin-bottom: 1rem;
    }

    .expertise-content {
        width: 100%;
        max-width: none;
    }

    .expertise-content h3 {
        font-size: var(--fs-heading);
    }

    /* Bento Grid Mobile */
    .bento-grid {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .bento-item {
        height: 20rem !important;
    }

    .bento-info {
        padding: var(--s-3);
        opacity: 1;
        /* Always visible on mobile */
        background: linear-gradient(to top, rgba(10, 11, 12, 0.95) 0%, rgba(10, 11, 12, 0.4) 100%);
    }

    .bento-info h4,
    .bento-info p,
    .item-cat {
        transform: translateY(0);
        /* Reset hover transforms */
    }

    .bento-info h4 {
        font-size: var(--fs-heading);
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .contact-form {
        padding: var(--s-4) var(--s-3);
    }

    .contact-section.bg-accent .contact-form-wrapper {
        padding: var(--s-4) var(--s-3);
    }

    .contact-lead {
        font-size: var(--fs-body);
        margin-bottom: var(--s-4);
    }

    .detail-item .detail-value {
        font-size: var(--fs-body);
        word-break: break-all;
    }

    .form-group {
        margin-bottom: var(--s-3);
    }

    .section-title {
        font-size: var(--fs-heading);
        word-break: break-word;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--s-3);
        text-align: center;
        margin-top: var(--s-6);
    }
}

@media (max-width: 480px) {
    .btn-more span {
        display: none;
    }
}


/* Unified Detail List (Stichpunkte) */
.detail-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}

p + .detail-list {
    margin-top: var(--s-5);
}

.detail-list li {
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--clr-text-main);
    padding: var(--s-1) 0 var(--s-1) var(--s-4);
    margin: calc(-1 * var(--s-1)) 0;
    position: relative;
    font-weight: var(--fw-body);
    transition: transform var(--t-2) var(--ease-out);
}

.detail-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.25rem;
    transform: translateY(-50%);
    width: var(--s-1);
    height: 2px;
    background-color: var(--clr-brand);
    transition: width var(--t-2) var(--ease-out);
}

.detail-list li:hover {
    transform: translateX(8px);
}

.detail-list li:hover::before {
    width: 1.25rem;
}

/* Barrierefreiheit: Skip-Link */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
    background-color: var(--clr-surface);
    border-radius: 0;
    box-shadow: 0 0 0 2px var(--clr-brand);
    clip: auto !important;
    clip-path: none;
    color: var(--clr-dark);
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    height: auto;
    left: var(--s-3);
    line-height: 1.4;
    padding: var(--s-2) var(--s-4);
    text-decoration: none;
    top: var(--s-3);
    width: auto;
    z-index: 100000;
}

/* --- ÜBER UNS: REDESIGN 2.0 (Stable) --- */

.text-on-dark { color: var(--clr-on-dark) !important; }
.text-on-dark-dim { color: var(--clr-on-dark-muted) !important; }

/* 1. Intro Section */
.about-intro-v2 {
    padding-top: var(--section-y);
    padding-bottom: var(--section-y);
}

.intro-flex {
    display: flex;
    gap: var(--s-7);
    margin-bottom: var(--s-7);
}

.intro-left {
    flex: 0 0 40%;
}

.intro-right {
    flex: 1;
}

.about-intro-v2 .company-title-main {
    margin-bottom: 0;
}

.company-showcase-image {
    width: 100%;
    position: relative;
    height: 60vh;
    min-height: 25rem;
    overflow: hidden;
}

.company-showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-corner-detail {
    position: absolute;
    bottom: var(--s-5);
    right: var(--s-5);
    width: 6.25rem;
    height: 6.25rem;
    border-right: 2px solid var(--clr-brand);
    border-bottom: 2px solid var(--clr-brand);
    pointer-events: none;
}

/* 2. Modern Team Grid */
.modern-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
    gap: var(--s-5);
    margin-top: var(--s-6);
}

.team-member-v2 {
    background: var(--clr-dark-surface);
    display: flex;
    flex-direction: column;
}

.member-image-box {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.member-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0);
    transition: transform var(--t-4) var(--ease-out), filter var(--t-3) ease;
}

.team-member-v2:hover .member-image-box img {
    transform: scale(1.05);
    filter: grayscale(1);
}

.member-hover-content {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--s-5);
    opacity: 0;
    transition: opacity var(--t-3) ease;
}

.team-member-v2:hover .member-hover-content {
    opacity: 1;
}

.member-task-list {
    list-style: none;
    padding: 0;
}

.member-task-list li {
    font-size: var(--fs-small);
    color: var(--clr-on-dark-soft);
    margin-bottom: var(--s-1);
    position: relative;
    padding-left: var(--s-3);
}

.member-task-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--clr-brand);
    transform: translateY(-50%);
}

.member-meta-box {
    padding: var(--s-4);
    background: var(--clr-dark-surface);
    text-align: center;
}

.member-meta-box .member-role {
    display: block;
    font-size: var(--fs-meta);
    color: var(--clr-brand);
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    margin-bottom: 0.25rem;
}

.member-meta-box .member-name {
    font-size: var(--fs-lead);
    color: var(--clr-on-dark);
    margin: 0;
}

/* 3. Timeline section is now on dark bg again, following the theme's core styles in pages.css */

/* 3. Credibility Section */
.credibility-split {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--s-7);
}

.certs-modern-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap: var(--s-4);
    margin-top: var(--s-5);
}

.modern-cert-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    padding: var(--s-5);
    text-align: center;
    transition: all var(--t-2) ease;
}

.modern-cert-card:hover {
    background: var(--clr-bg);
    transform: translateY(-5px);
    border-color: var(--clr-brand);
}

.modern-cert-icon {
    height: 3.75rem;
    margin-bottom: var(--s-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-cert-icon img {
    max-height: 100%;
    filter: none;
}

.modern-cert-name {
    font-size: var(--fs-meta);
    color: var(--clr-text-muted);
    text-transform: uppercase;
}

.partners-modern-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-top: var(--s-5);
}

.modern-partner-item {
    background: var(--clr-surface);
    padding: var(--s-3);
    flex: 1 0 calc(50% - var(--s-4));
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--clr-border);
}

.modern-partner-item img {
    max-height: 100%;
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.modern-partner-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (max-width: 1024px) {
    .intro-flex {
        flex-direction: column;
        gap: var(--s-4);
    }
    .credibility-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .modern-partner-item {
        flex: 0 0 100%;
    }
}

/* 5. Career CTA Section */
.career-cta-section {
    padding: var(--s-8) 0;
    overflow: hidden;
}

.cta-career-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 25rem;
}

.cta-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: clamp(8rem, 20vw, 22rem);
    font-weight: var(--fw-black);
    color: rgba(255, 255, 255, 0.05);
    white-space: nowrap;
    line-height: .8;
    pointer-events: none;
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 43.75rem;
}

.text-white-label {
    color: rgba(255, 255, 255, 0.8) !important;
}

.text-white-label::before {
    background-color: var(--clr-on-dark) !important;
}

.cta-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: var(--fw-black);
    color: var(--clr-on-dark);
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: var(--s-4);
    letter-spacing: 0.02em;
}

.cta-text {
    font-size: var(--fs-lead);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--s-6);
    line-height: 1.6;
}

.btn-cta {
    padding: 1.25rem 3rem;
    font-size: var(--fs-body);
    background: transparent;
    border-width: 2px;
}

.btn-cta:hover {
    background: var(--clr-on-dark);
    color: var(--clr-brand);
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .career-cta-section {
        padding: var(--s-6) 0;
    }
    .cta-career-wrapper {
        min-height: 18.75rem;
    }
    .cta-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}