/* ==============================================
   station.E Website – Stylesheet
   ==============================================
   
   INHALT:
   0. Schriftarten (@font-face)
   1. CSS-Variablen (Farben, Schriften, Abstände)
   2. Reset & Grundlagen
   3. Typografie
   4. Layout & Container
   5. Navigation
   6. Buttons & Links
   7. Hero Section
   8. USP Section
   9. Solutions Section
   10. Cases Section
   11. CTA Section
   12. Team Section
   13. Footer
   14. Utility Classes
   15. Responsive Anpassungen

   ==============================================
   ANLEITUNG ZUM ÄNDERN:
   
   - Farben ändern: Einfach die Werte bei :root anpassen
   - Abstände ändern: Die --spacing-Variablen anpassen
   - Schriftgrößen: Die --font-size-Variablen anpassen
   ============================================== */


/* ==============================================
   0. SCHRIFTARTEN (FONT-FACE)
   ============================================== */

@font-face {
    font-family: 'Unica77 LL';
    src: url('../assets/fonts/Unica77LLTT-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unica77 LL';
    src: url('../assets/fonts/Unica77LLTT-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unica77 LL';
    src: url('../assets/fonts/Unica77LLTT-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unica77 LL';
    src: url('../assets/fonts/Unica77LLTT-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Unica77 LL';
    src: url('../assets/fonts/Unica77LLTT-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==============================================
   1. CSS-VARIABLEN
   ============================================== */

:root {
    /* ----- MARKENFARBEN ----- */
    /* Diese Werte nur ändern, wenn sich die Brand-Farben ändern */
    --color-blue: #2fbded;          /* station.E-Blau (Akzentfarbe) */
    --color-alpha-blue: #2fbded30;          /* Akzentfarbe alpha */
    --color-black: #13171c;         /* station.E-Schwarz (Hauptschrift) */
    --color-white: #ffffff;         /* Weiß */
    
    /* ----- GRAUSTUFEN ----- */
    /* Abgeleitet aus station.E-Schwarz für Hintergründe, Linien, etc. */
    --color-gray-100: #f5f6f7;      /* Sehr hell (Hintergrund) */
    --color-gray-200: #e8eaec;      /* Hell (Cards, Linien) */
    --color-gray-300: #d1d5d9;      /* Mittel (Borders) */
    --color-gray-400: #9ba3ab;      /* Dunkel (Sekundärtext) */
    --color-gray-500: #6b7680;      /* Sehr dunkel */
    --color-gray-600: #808a91;      /* Zusatzgrau (z.B. Fazit-Text) */

    /* ----- SCHRIFTEN ----- */
    /* Unica 77 LL ist eingebunden (siehe @font-face Regeln oben) */
    --font-primary: 'Unica77 LL', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* ----- SCHRIFTGRÖSSEN ----- */
    --font-size-xs: 0.75rem;        /* 12px */
    --font-size-sm: 0.875rem;       /* 14px */
    --font-size-base: 1rem;         /* 16px */
    --font-size-md: 1.125rem;       /* 18px */
    --font-size-lg: 1.25rem;        /* 20px */
    --font-size-xl: 1.5rem;         /* 24px */
    --font-size-2xl: 2rem;          /* 32px */
    --font-size-3xl: 2.5rem;        /* 40px */
    --font-size-4xl: 3rem;          /* 48px */

    /* ----- ABSTÄNDE ----- */
    --spacing-xs: 0.5rem;           /* 8px */
    --spacing-sm: 1rem;             /* 16px */
    --spacing-md: 1.5rem;           /* 24px */
    --spacing-lg: 2rem;             /* 32px */
    --spacing-xl: 3rem;             /* 48px */
    --spacing-2xl: 4rem;            /* 64px */
    --spacing-3xl: 6rem;            /* 96px */

    /* ----- WEITERE WERTE ----- */
    --border-radius: 4px;           /* Eckenradius für Cards, Buttons */
    --transition-speed: 0.2s;       /* Animationsgeschwindigkeit */
    --max-width: 1200px;            /* Maximale Inhaltsbreite */
    --header-height: 80px;          /* Höhe der Navigation */
}


/* ==============================================
   2. RESET & GRUNDLAGEN
   ============================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--color-white);
}

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

a {
    color: var(--color-blue);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--color-black);
}

ul {
    list-style: none;
}


/* ==============================================
   3. TYPOGRAFIE
   ============================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-black);
}

h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
}

h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
}

h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

p {
    margin-bottom: var(--spacing-sm);
}

.section-intro {
    font-size: var(--font-size-md);
    color: var(--color-gray-500);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
}


/* ==============================================
   4. LAYOUT & CONTAINER
   ============================================== */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

section {
    padding: var(--spacing-3xl) 0;
}


/* ==============================================
   5. NAVIGATION
   ============================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    z-index: 1000;
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    height: 40px;
    width: auto;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.nav-menu a {
    color: var(--color-black);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: color var(--transition-speed) ease;
}

.nav-menu a:hover {
    color: var(--color-blue);
}

/* Mobile Navigation Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-black);
    transition: all var(--transition-speed) ease;
}


/* ==============================================
   6. BUTTONS & LINKS
   ============================================== */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-align: center;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: #28a8d4; /* Etwas dunkleres Blau */
    color: var(--color-white);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-black);
    border: 1px solid var(--color-gray-300);
}

.btn-secondary:hover {
    border-color: var(--color-black);
    color: var(--color-black);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: var(--font-size-base);
}

/* Link mit Pfeil */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-blue);
    font-weight: 500;
    margin-top: auto;
}

.link-arrow::after {
    content: '→';
    transition: transform var(--transition-speed) ease;
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

.link-arrow:hover {
    color: var(--color-blue);
}


/* ==============================================
   7. HERO SECTION
   ============================================== */

.hero {
    padding-top: calc(var(--header-height) + var(--spacing-3xl));
    padding-bottom: var(--spacing-3xl);
    background: var(--color-alpha-blue);
    text-align: center;
}

.hero h1 {
    font-size: var(--font-size-4xl);
    max-width: 800px;
    margin: 0 auto var(--spacing-md);
}

.hero-subline {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    max-width: 650px;
    margin: 0 auto var(--spacing-lg);
}

.hero-ctas {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}


/* ==============================================
   8. COMPANY SIZE SECTION
   ============================================== */

.company-size-section {
    background: var(--color-gray-100);
    padding: var(--spacing-3xl) 0;
    text-align: center;
}

.company-size-section h2 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-lg);
}

.section-intro {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    max-width: 900px;
    margin: 0 auto var(--spacing-2xl);
    line-height: 1.7;
}

.company-size-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
}

.company-size-item {
    background: var(--color-white);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    text-align: left;
    border: 1px solid var(--color-gray-200);
}

.company-size-item h3 {
    font-size: var(--font-size-xl);
    color: var(--color-blue);
    margin-bottom: var(--spacing-md);
}

.company-size-item p {
    color: var(--color-gray-500);
    line-height: 1.6;
}

.section-outro {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
    font-style: italic;
}


/* ==============================================
   9. USP SECTION
   ============================================== */

.usps {
    background: var(--color-white);
    text-align: center;
}

.usp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    text-align: left;
}

.usp-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-xl);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.usp-card:hover {
    border-color: var(--color-blue);
    box-shadow: 0 4px 20px rgba(19, 23, 28, 0.08);
}

.usp-icon {
    flex-shrink: 0;
    color: var(--color-blue);
    margin-top: 2px;
}

.usp-card-content {
    flex: 1;
}

.usp-card h3 {
    font-size: var(--font-size-md);
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
}

.usp-card p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: 0;
    line-height: 1.6;
}


/* ==============================================
   10. SOLUTIONS SECTION
   ============================================== */

.solutions-teaser {
    background: var(--color-gray-100);
    text-align: center;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    text-align: left;
}

.solution-card {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-gray-200);
    transition: border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
    display: flex;
    flex-direction: column;
}

.solution-card:hover {
    border-color: var(--color-blue);
    box-shadow: 0 4px 20px rgba(19, 23, 28, 0.08);
}

.solution-card h3 {
    color: var(--color-blue);
}

.solution-card p {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-md);
}


/* ==============================================
   11. CASES SECTION
   ============================================== */

.cases-teaser {
    background: var(--color-white);
    text-align: center;
}

.cases-scroll-wrapper {
    margin-bottom: var(--spacing-xl);
}

.cases-scroll {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    text-align: left;
    padding-bottom: var(--spacing-xs);
}

.cases-scroll::-webkit-scrollbar {
    display: none;
}

.cases-scroll .case-card {
    flex: 0 0 400px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.cases-scroll .case-image {
    height: 220px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background: var(--color-gray-100);
    flex-shrink: 0;
}

.cases-scroll .case-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cases-scroll .case-card p {
    flex: 1;
    margin-bottom: var(--spacing-md);
}

.cases-scroll .case-kpi {
    margin-top: auto;
}

.case-card-industry {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-gray-500);
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.cases-scroll-controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.cases-scroll-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    color: var(--color-black);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.cases-scroll-btn:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    text-align: left;
    margin-bottom: var(--spacing-xl);
}

.case-card {
    background: var(--color-white);
    padding: 0;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-gray-200);
    overflow: hidden;
    transition: border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
    display: block;
    text-decoration: none;
    color: inherit;
}

.case-card:hover {
    border-color: var(--color-blue);
    box-shadow: 0 4px 20px rgba(19, 23, 28, 0.08);
    cursor: pointer;
}

.case-image {
    width: 100%;
    height: 200px;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.case-content {
    padding: var(--spacing-lg);
}

.case-tag {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-blue);
    background: rgba(47, 189, 237, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: var(--spacing-sm);
}

.case-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
}

.case-card p {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-md);
}

.case-kpi {
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-gray-200);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

.case-kpi strong {
    color: var(--color-black);
    font-size: var(--font-size-lg);
}

.case-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs);
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-gray-200);
}

.case-kpi-box {
    background: rgba(47, 189, 237, 0.07);
    border-radius: 8px;
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.case-kpi-value {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-blue);
    line-height: 1;
}

.case-kpi-label {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    line-height: 1.3;
}


/* ==============================================
   12. CTA SECTION
   ============================================== */

.cta-section {
    background: var(--color-black);
    color: var(--color-white);
    text-align: center;
}

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

.cta-section p {
    color: var(--color-gray-400);
    max-width: 500px;
    margin: 0 auto var(--spacing-lg);
}


/* ==============================================
   13. TEAM SECTION
   ============================================== */

.team-section {
    background: var(--color-white);
    text-align: center;
    padding: var(--spacing-3xl) 0;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    max-width: 960px;
    margin: var(--spacing-xl) auto 0;
}

.team-card {
    background: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    text-align: center;
    box-shadow: 0 2px 12px rgba(19, 23, 28, 0.08);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(19, 23, 28, 0.16);
}

.team-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-black);
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.team-card-info {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}

.team-card h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
    color: var(--color-black);
}

.team-role {
    font-size: var(--font-size-sm);
    color: var(--color-blue);
    font-weight: 500;
    margin-bottom: 0;
}


/* ==============================================
   13. FOOTER
   ============================================== */

.site-footer {
    background: var(--color-gray-100);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.footer-logo {
    margin-bottom: 0;
    margin-top: -12px;
}

.footer-claim {
    display: block;
    margin-top: -6px;
    margin-left: 9px;
    opacity: 0.7;
}

.footer-col p {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

.footer-col h4 {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
}

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

.footer-col a {
    color: var(--color-gray-500);
    font-size: var(--font-size-sm);
}

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

.footer-bottom {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
}

.footer-bottom p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    margin: 0;
}


/* ==============================================
   14. UTILITY CLASSES
   ============================================== */

/* Skip-Link für Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-blue);
    color: var(--color-white);
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 100;
    font-weight: 500;
}

.skip-link:focus {
    top: 0;
}

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

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }


/* ==============================================
   15. RESPONSIVE ANPASSUNGEN
   ============================================== */

/* Tablet */
@media (max-width: 992px) {

    .company-size-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dritte Solution-Card volle Breite */
    .solutions-grid .solution-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

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

    .footer-grid .footer-col:first-child {
        grid-column: 1 / -1;
    }
}

/* Mobile */
@media (max-width: 768px) {

    :root {
        --font-size-3xl: 2rem;
        --font-size-4xl: 2.25rem;
    }

    .hero {
        padding-top: calc(var(--header-height) + var(--spacing-xl));
    }

    .hero h1 {
        font-size: var(--font-size-3xl);
    }

    /* Mobile Navigation */
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-white);
        flex-direction: column;
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
        border-bottom: 1px solid var(--color-gray-200);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-speed) ease;
    }

    .nav-menu.is-open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-menu a {
        font-size: var(--font-size-base);
    }

    /* Grids auf eine Spalte */
    .usp-grid,
    .solutions-grid,
    .cases-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .usp-card h3 {
        white-space: normal;
    }

    .solutions-grid .solution-card:last-child {
        max-width: 100%;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .hero-ctas .btn {
        width: 100%;
        max-width: 300px;
    }

    section {
        padding: var(--spacing-2xl) 0;
    }

    .team-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
}

/* ==============================================
   15. PAGE HEADER (UNTERSEITEN)
   ============================================== */

.page-header {
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-xl);
    background: var(--color-alpha-blue);
    text-align: center;
}

.page-header h1 {
    margin-bottom: 0;
}

.page-header-subline {
    font-size: var(--font-size-3xl);
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
}

.page-intro {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    max-width: 600px;
    margin: 0 auto;
}


/* ==============================================
   16. SOLUTIONS DETAIL PAGE
   ============================================== */

.solution-detail {
    padding: var(--spacing-3xl) 0;
}

.solution-detail.alt-bg {
    background: var(--color-gray-100);
}

.solution-content {
    max-width: 800px;
}

.solution-label {
    display: inline-block;
    font-size: 2rem;
    font-weight: 500;
    color: var(--color-blue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-xs);
}

.solution-detail h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.product-name-accent {
    color: var(--color-blue);
}

.solution-tagline {
    font-size: var(--font-size-xl);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-lg);
}

.solution-description {
    margin-bottom: var(--spacing-xl);
}

.solution-description p {
    font-size: var(--font-size-md);
    color: var(--color-gray-500);
}

.solution-benefits,
.solution-usecase,
.solution-pricing {
    margin-bottom: var(--spacing-xl);
}

.solution-benefits h3,
.solution-usecase h3,
.solution-pricing h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
}

.benefit-list li strong {
    color: var(--color-black);
}

.usecase-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.usecase-list li {
    color: var(--color-gray-500);
}

.usecase-list li strong {
    color: var(--color-black);
}

/* Preisvergleich */
.price-compare {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.price-item {
    background: var(--color-white);
    padding: var(--spacing-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    flex: 1;
    min-width: 200px;
}

.price-item.highlight {
    border-color: var(--color-blue);
    background: rgba(47, 189, 237, 0.05);
}

.price-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-xs);
}

.price-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--color-black);
}

.price-item.highlight .price-value {
    color: var(--color-blue);
}


/* ==============================================
   17. CASES DETAIL PAGE
   ============================================== */

.cases-section {
    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
}

.case-detail {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
    overflow: hidden;
    transition: border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.case-detail:hover {
    border-color: var(--color-blue);
    box-shadow: 0 4px 20px rgba(19, 23, 28, 0.08);
}

.case-detail:last-child {
    margin-bottom: 0;
}

.case-detail-image {
    width: 100%;
    height: 250px;
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.case-detail-image svg {
    color: var(--color-gray-300);
}

.case-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.case-detail-content {
    padding: var(--spacing-xl);
}

.case-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.case-industry {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-gray-500);
}

.case-detail h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-lg);
}

.case-challenge,
.case-solution,
.case-results {
    margin-bottom: var(--spacing-lg);
}

.case-fazit {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.case-challenge h3,
.case-solution h3,
.case-results h3 {
    font-size: var(--font-size-base);
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.case-challenge p,
.case-solution p {
    color: var(--color-gray-500);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.kpi-item {
    text-align: center;
    padding: var(--spacing-md);
    background: var(--color-gray-100);
    border-radius: var(--border-radius);
}

.kpi-value {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: var(--color-blue);
    margin-bottom: var(--spacing-xs);
}

.kpi-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}


/* ==============================================
   18. ABOUT PAGE
   ============================================== */

/* ============================================
   ÜBER UNS – HERO
   ============================================ */

.about-hero {
    padding-top: calc(var(--header-height) + var(--spacing-3xl));
    padding-bottom: var(--spacing-3xl);
    background: var(--color-alpha-blue);
    text-align: center;
}

.about-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.about-hero h1 {
    font-size: var(--font-size-4xl);
    line-height: 1;
    margin-bottom: 0;
}

.about-hero-sub {
    font-size: var(--font-size-4xl);
    font-weight: 500;
    color: var(--color-black);
    line-height: 1;
    margin-bottom: var(--spacing-lg);
}

.about-hero-intro {
    font-size: var(--font-size-lg);
    color: var(--color-gray-500);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
}

/* ============================================
   ÜBER UNS – MISSION
   ============================================ */

.about-mission {
    padding: var(--spacing-3xl) 0;
    background: var(--color-alpha-blue);
}

.mission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.mission-block {
    border-left: 2px solid var(--color-blue);
    padding-left: var(--spacing-lg);
}

.mission-label {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-blue);
    margin-bottom: var(--spacing-sm);
}

.mission-block p {
    font-size: var(--font-size-md);
    color: var(--color-black);
    opacity: 0.8;
    line-height: 1.7;
}

/* ============================================
   ÜBER UNS – VALUES
   ============================================ */

.about-values {
    padding: var(--spacing-3xl) 0;
}

.section-label-heading {
    font-size: var(--font-size-base);
    line-height: 1.5;

    text-transform: uppercase;

    color: var(--color-blue);
    margin-bottom: var(--spacing-xl);


}

.values-list {
    display: flex;
    flex-direction: column;
}

.value-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--spacing-lg);
    align-items: start;
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.value-row:first-of-type {
    border-top: 1px solid var(--color-gray-200);
}

.value-number {
    font-size: var(--font-size-2xl);
    font-weight: 500;
    color: var(--color-blue);
    opacity: 0.75;
    line-height: 1;
    padding-top: 4px;
}

.value-body h3 {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: var(--spacing-xs);
}

.value-body p {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    line-height: 1.65;
}

/* ============================================
   ÜBER UNS – PROZESS
   ============================================ */

.about-approach {
    padding: var(--spacing-3xl) 0;
    background: var(--color-gray-100);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin-top: var(--spacing-xl);
}

.process-step {
    padding: var(--spacing-lg);
    border-left: 1px solid var(--color-gray-200);
    position: relative;
}

.process-step:first-child {
    border-left: none;
    padding-left: 0;
}

.process-step-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.process-number {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-blue);
    opacity: 0.75;
    line-height: 1;
    flex-shrink: 0;
}

.process-step h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-black);
}

.process-step p {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    line-height: 1.65;
}


/* ==============================================
   19. CONTACT PAGE
   ============================================== */

.contact-section {
    padding: var(--spacing-2xl) 0 var(--spacing-3xl);
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-3xl);
}

.contact-form-wrapper h2,
.contact-info h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

.contact-form-wrapper > p {
    color: var(--color-gray-500);
    margin-bottom: var(--spacing-lg);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group-full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base);
    font-family: var(--font-primary);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-speed) ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-blue);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 0.2em;
    width: auto;
}

.checkbox-label a {
    color: var(--color-blue);
}

.form-success {
    color: var(--color-blue);
    font-weight: 500;
    font-size: var(--font-size-lg);
    padding: var(--spacing-lg) 0;
    grid-column: 1 / -1;
}

.form-error {
    color: #c0392b;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    grid-column: 1 / -1;
}

.contact-info {
    padding-top: var(--spacing-lg);
}

.contact-block {
    margin-bottom: var(--spacing-lg);
}

.contact-block h3 {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-xs);
}

.contact-block p {
    color: var(--color-black);
    margin-bottom: 0;
}

.contact-block a {
    color: var(--color-black);
}

.contact-block a:hover {
    color: var(--color-blue);
}


/* ==============================================
   20. AKTIVER NAV-LINK
   ============================================== */

.nav-menu a.is-active {
    color: var(--color-blue);
}

/* Kontakt-Button soll bei aktivem Status weiße Schrift behalten */
.nav-menu a.btn-primary.is-active {
    color: var(--color-white);
}

/* Kontakt-Button soll bei Hover weiße Schrift behalten */
.nav-menu a.btn-primary:hover {
    color: var(--color-white);
}


/* ==============================================
   21. DATENSCHUTZ COLLAPSIBLE
   ============================================== */

.legal-section {
    padding: var(--spacing-3xl) 0;
    background: var(--color-white);
}

.legal-section h2,
.legal-section h3,
.legal-section p,
.legal-section a {
    color: var(--color-black);
}

.legal-section a {
    color: var(--color-blue);
}

.mission-content h2,
.mission-content p {
    color: var(--color-black);
}

.privacy-content {
    font-size: 0.9rem;
    line-height: 1.6;
}

.privacy-content h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-lg);
}

.privacy-content > p:first-of-type {
    font-size: 0.95rem;
    margin-bottom: var(--spacing-xl);
}

.privacy-section {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.privacy-section summary {
    padding: var(--spacing-md);
    background-color: var(--color-gray-100);
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-speed) ease;
    user-select: none;
}

.privacy-section summary:hover {
    background-color: var(--color-gray-200);
}

.privacy-section summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--color-blue);
    transition: transform var(--transition-speed) ease;
}

.privacy-section[open] summary::after {
    content: '−';
}

.privacy-section summary::-webkit-details-marker {
    display: none;
}

.privacy-content-inner {
    padding: var(--spacing-md);
    background-color: var(--color-white);
    font-size: 0.85rem;
}

.privacy-content-inner h4 {
    font-size: 0.95rem;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.privacy-content-inner p {
    margin-bottom: var(--spacing-sm);
}

.privacy-content-inner ul {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.privacy-content-inner li {
    margin-bottom: var(--spacing-xs);
}

.privacy-intro {
    padding: var(--spacing-lg);
    background-color: var(--color-gray-50);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
    font-size: 0.9rem;
}


/* ==============================================
   RESPONSIVE ERWEITERUNGEN
   ============================================== */

/* Tablet */
@media (max-width: 992px) {
    
    .mission-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .process-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-step:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }

    .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    
    .about-hero h1,
    .about-hero-sub {
        font-size: var(--font-size-3xl);
    }

    .process-steps {
        grid-template-columns: 1fr;
    }

    .process-step {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--color-gray-200);
        padding-top: var(--spacing-md);
    }

    .process-step:first-child {
        border-top: none;
        padding-top: 0;
    }

    .value-row {
        grid-template-columns: 48px 1fr;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .price-compare {
        flex-direction: column;
    }

}


/* Kleine Handys */
@media (max-width: 480px) {

    :root {
        --font-size-3xl: 1.75rem;
        --font-size-2xl: 1.5rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }
}


/* ==============================================
   LÖSUNGEN – BAUSTEIN NAV
   ============================================== */

.baustein-nav {
    position: sticky;
    top: var(--header-height);
    z-index: 90;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray-200);
    padding: var(--spacing-sm) 0;
}

.baustein-nav .container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.baustein-nav.is-sticky .container {
    justify-content: flex-start;
}

.baustein-nav-links {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.baustein-nav.is-sticky .baustein-nav-links {
    animation: bausteinSlideLeft 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bausteinSlideLeft {
    from { transform: translateX(20%); opacity: 0.6; }
    to   { transform: translateX(0);   opacity: 1; }
}

.baustein-nav-link {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-400);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color var(--transition-speed);
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.baustein-nav-link:hover {
    color: var(--color-blue);
    border-bottom-color: var(--color-blue);
}


/* ==============================================
   LÖSUNGEN – BAUSTEIN SECTIONS
   ============================================== */

.baustein-section {
    padding-top: var(--spacing-2xl);
    padding-bottom: 0;
}

.baustein-section--separator {
    border-top: 1px solid var(--color-gray-200);
    margin-top: var(--spacing-2xl);
}

.baustein-header {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-blue);
    margin-bottom: 0;
}

.baustein-number {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-blue);
    opacity: 0.75;
    line-height: 1;
}

.baustein-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-black);
    margin: 0;
}


/* ==============================================
   LÖSUNGEN – PRODUCT ITEMS
   ============================================== */

.product-item {
    padding: var(--spacing-2xl) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.product-item--alt {
    background-color: var(--color-gray-100);
}

.product-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

.product-intro {
    position: sticky;
    top: calc(var(--header-height) + 64px);
}

.product-name {
    font-size: var(--font-size-xl);
    font-weight: 500;
    color: var(--color-black);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
}

.product-tagline {
    font-size: var(--font-size-base);
    color: var(--color-gray-400);
    line-height: 1.5;
}

.product-detail > p {
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    line-height: 1.75;
    margin-bottom: var(--spacing-md);
}

.product-claim {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-black);
    border-left: 2px solid var(--color-blue);
    padding-left: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.accent {
    color: var(--color-blue);
}

.benefit-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-md) 0 var(--spacing-lg);
}

.benefit-list li {
    padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
    border-left: 2px solid var(--color-blue);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--color-gray-500);
    line-height: 1.6;
}

.benefit-list li strong {
    color: var(--color-black);
    display: block;
}


/* ==============================================
   LÖSUNGEN – DUMMY MODALS
   ============================================== */

.dummy-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.dummy-modal.is-open {
    display: flex;
}

.dummy-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(19, 23, 28, 0.6);
}

.dummy-modal-content {
    position: relative;
    background: var(--color-white);
    border-radius: var(--border-radius);
    padding: var(--spacing-xl);
    max-width: 560px;
    width: 90%;
    z-index: 1;
}

.dummy-modal-content h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-xs);
}

.modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-gray-400);
    line-height: 1;
    padding: 4px 8px;
    transition: color var(--transition-speed);
}

.modal-close:hover {
    color: var(--color-black);
}

.dummy-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-blue);
    background: rgba(47, 189, 237, 0.1);
    border: 1px solid var(--color-blue);
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-xs);
}

.dummy-desc {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.dummy-screen {
    background: var(--color-gray-100);
    border-radius: var(--border-radius);
    padding: var(--spacing-2xl);
    text-align: center;
    color: var(--color-gray-300);
    font-size: var(--font-size-sm);
    border: 2px dashed var(--color-gray-200);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.dummy-video-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.video-tab {
    background: none;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--border-radius);
    padding: 6px var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
    font-family: var(--font-primary);
    transition: all var(--transition-speed);
}

.video-tab.is-active {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: var(--color-white);
}


/* ==============================================
   LÖSUNGEN – RESPONSIVE
   ============================================== */

@media (max-width: 768px) {
    .baustein-nav .container {
        gap: var(--spacing-sm);
    }

    .baustein-nav-link {
        font-size: var(--font-size-xs);
    }

    .baustein-header {
        flex-direction: column;
        gap: 4px;
    }

    .baustein-number {
        font-size: var(--font-size-xl);
    }

    .product-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .product-intro {
        position: static;
    }

    .product-name {
        font-size: var(--font-size-lg);
    }
}


/* ==============================================
   ÜBER UNS – TEAM KARUSSELL
   ============================================== */

.about-team {
    padding: var(--spacing-3xl) 0;
    background: var(--color-white);
}

.team-carousel-wrapper {
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.team-carousel {
    display: flex;
    gap: var(--spacing-md);
    overflow-x: hidden;
    scrollbar-width: none;
    padding-bottom: var(--spacing-xs);
}

.team-carousel::-webkit-scrollbar {
    display: none;
}

.team-carousel-card {
    flex: 0 0 180px;
    background: var(--color-white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(19, 23, 28, 0.08);
    transition: transform var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.team-carousel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(19, 23, 28, 0.16);
}

.team-carousel-image {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--color-black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.team-carousel-info {
    padding: var(--spacing-sm);
    text-align: center;
}

.team-carousel-info h3 {
    font-size: var(--font-size-sm);
    margin-bottom: 2px;
    color: var(--color-black);
}

.team-carousel-dept {
    font-size: var(--font-size-xs);
    color: var(--color-blue);
    font-weight: 500;
    margin-bottom: 0;
}

.team-carousel-controls {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.team-carousel-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-300);
    background: var(--color-white);
    color: var(--color-black);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--transition-speed) ease,
                color var(--transition-speed) ease;
}

.team-carousel-btn:hover {
    border-color: var(--color-blue);
    color: var(--color-blue);
}