/* ====================================
   CSS Variables & Reset
   ==================================== */
:root {
    /* Brand Colors - Weinrot & Hellblau */
    --primary-wine: #8B1538;
    --primary-wine-dark: #6B0F2A;
    --primary-wine-light: #A81D47;

    --secondary-blue: #5B9BD5;
    --secondary-blue-dark: #4178B8;
    --secondary-blue-light: #7DB3E3;

    /* Bakal.de Brand Colors - Rose & Mint */
    --bakal-rose: #E91E63;
    --bakal-rose-dark: #C2185B;
    --bakal-rose-light: #F06292;
    --bakal-mint: #49c1bc;
    --bakal-mint-dark: #3a9a96;
    --bakal-mint-light: #6dd4cf;

    /* Neutral Colors */
    --white: #FFFFFF;
    --black: #0A0A0A;
    --gray-100: #F8F9FA;
    --gray-200: #E9ECEF;
    --gray-300: #DEE2E6;
    --gray-400: #CED4DA;
    --gray-500: #ADB5BD;
    --gray-600: #6C757D;
    --gray-700: #495057;
    --gray-800: #343A40;
    --gray-900: #212529;

    /* Typography */
    --font-display: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing - Responsive via clamp() */
    --spacing-xs: clamp(0.375rem, 1vw, 0.5rem);        /* 6px → 8px */
    --spacing-sm: clamp(0.75rem, 2vw, 1rem);           /* 12px → 16px */
    --spacing-md: clamp(1.25rem, 3vw, 2rem);           /* 20px → 32px */
    --spacing-lg: clamp(2.5rem, 6vw, 4rem);            /* 40px → 64px */
    --spacing-xl: clamp(3.5rem, 8vw, 6rem);            /* 56px → 96px */
    --spacing-2xl: clamp(4.5rem, 10vw, 8rem);          /* 72px → 128px */

    /* Typography Scale - Fluid Responsive */
    --font-size-xs: clamp(0.75rem, 1.5vw, 0.875rem);   /* 12px → 14px */
    --font-size-sm: clamp(0.875rem, 2vw, 1rem);        /* 14px → 16px */
    --font-size-base: clamp(0.9375rem, 2.5vw, 1.125rem); /* 15px → 18px */
    --font-size-md: clamp(1rem, 3vw, 1.25rem);         /* 16px → 20px */
    --font-size-lg: clamp(1.125rem, 3.5vw, 1.5rem);    /* 18px → 24px */
    --font-size-xl: clamp(1.25rem, 4vw, 1.75rem);      /* 20px → 28px */
    --font-size-2xl: clamp(1.5rem, 5vw, 2.25rem);      /* 24px → 36px */
    --font-size-3xl: clamp(1.875rem, 6vw, 3rem);       /* 30px → 48px */
    --font-size-4xl: clamp(2.25rem, 7vw, 3.5rem);      /* 36px → 56px */
    --font-size-5xl: clamp(2.5rem, 8vw, 4rem);         /* 40px → 64px */

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.25);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* Navigation Tokens */
    --nav-height: 82px;
    --nav-blur-strength: 18px;
}

html {
    scroll-behavior: smooth;
    font-size: clamp(14px, 1.5vw, 16px); /* 14px mobile → 16px desktop */
    /* BEST PRACTICE FIX: Root Isolation */
    isolation: isolate;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--gray-800);
    background: 
        /* Subtle dot pattern */
        radial-gradient(circle at 25% 25%, rgba(139, 21, 56, 0.02) 1px, transparent 1px),
        radial-gradient(circle at 75% 75%, rgba(91, 155, 213, 0.025) 1px, transparent 1px),
        /* Soft gradient overlay */
        linear-gradient(135deg, 
            rgba(248, 249, 250, 0.95) 0%, 
            rgba(255, 255, 255, 1) 20%,
            rgba(255, 255, 255, 1) 80%,
            rgba(248, 249, 250, 0.95) 100%
        ),
        /* Base gradient */
        linear-gradient(180deg, 
            #FAFBFC 0%, 
            #FFFFFF 25%,
            #FFFFFF 75%,
            #F8F9FA 100%
        );
    background-size: 40px 40px, 60px 60px, 100% 100%, 100% 100%;
    background-attachment: fixed, fixed, scroll, scroll;
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* BEST PRACTICE FIX: Body als Root Stacking Context */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

body.no-scroll {
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


.skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 1rem;
    z-index: 10000;
    background: var(--secondary-blue);
    color: var(--white);
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    transition: inset-block-start var(--transition-base);
}

.skip-link:focus-visible {
    inset-block-start: 1rem;
}

img {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.social-link:focus-visible {
    outline: 2px solid var(--secondary-blue);
    outline-offset: 4px;
}

ul {
    list-style: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ====================================
   Container & Grid
   ==================================== */
.container {
    max-inline-size: 1400px;
    margin-block: 0;
    margin-inline: auto;
    padding-block: 0;
    padding-inline: var(--spacing-md);
}

section[id] {
    scroll-margin-block-start: clamp(90px, 10vw, 150px);
}

/* ====================================
   Typography
   ==================================== */
.section-subtitle {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-wine);
    margin-block-end: var(--spacing-sm);
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-block-end: var(--spacing-md);
    line-height: 1.2;
}

.section-description {
    font-size: var(--font-size-md);
    line-height: 1.7;
    color: var(--gray-600);
    max-inline-size: 700px;
    margin-block: 0;
    margin-inline: auto;
}

h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-5xl);
    font-weight: 700;
    line-height: 1.1;
}

h2 {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    line-height: 1.2;
}

h3 {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 600;
    line-height: 1.3;
}

h4 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    line-height: 1.5;
}

h6 {
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.5;
}

p {
    font-size: var(--font-size-base);
    line-height: 1.7;
    margin-block-end: var(--spacing-sm);
}

/* ====================================
   Buttons
   ==================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-block: clamp(0.75rem, 2vw, 1rem);
    padding-inline: clamp(1.5rem, 3vw, 2rem);
    font-size: var(--font-size-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 0;
    block-size: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: inline-size 0.6s ease, block-size 0.6s ease;
    transform: translate3d(-50%, -50%, 0);
    z-index: -1;
}

.btn:hover::before {
    inline-size: 300px;
    block-size: 300px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-wine) 0%, var(--primary-wine-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(139, 21, 56, 0.3);
}

.btn-primary:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 8px 25px rgba(139, 21, 56, 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-blue) 0%, var(--secondary-blue-dark) 100%);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(91, 155, 213, 0.3);
}

.btn-secondary:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 8px 25px rgba(91, 155, 213, 0.4);
}

.btn-full {
    inline-size: 100%;
    justify-content: center;
}

.btn i {
    transition: transform var(--transition-base);
}

.btn:hover i {
    transform: translate3d(5px, 0, 0);
}

/* ====================================
   Navigation
   ==================================== */
.navbar {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.nav-top {
    background: linear-gradient(135deg, var(--primary-wine-dark) 0%, var(--primary-wine) 100%);
    color: rgba(255, 255, 255, 0.9);
    border-block-end: 1px solid rgba(255, 255, 255, 0.12);
    max-block-size: 140px;
    overflow: hidden;
    padding-block: 0.75rem;
    padding-inline: 1.75rem;
    font-size: var(--font-size-sm);
    box-shadow: 0 8px 22px rgba(91, 155, 213, 0.35);
    white-space: nowrap;
}

.nav-top-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding-block: var(--spacing-xs);
}

.nav-top-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

.nav-top-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.nav-top-link i {
    color: var(--secondary-blue-light);
    font-size: var(--font-size-xs);
}

.nav-top-link:hover {
    color: var(--white);
}

.nav-top-social {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.nav-top-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    transition: background var(--transition-base), transform var(--transition-base);
}

.nav-top-social a:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translate3d(0, -2px, 0);
}


.nav-main {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(var(--nav-blur-strength));
    backdrop-filter: blur(var(--nav-blur-strength));
    transition: background var(--transition-base), box-shadow var(--transition-base);
    border-block-start: 1px solid rgba(255, 255, 255, 0.3);
    border-block-end: 1px solid rgba(15, 16, 20, 0.06);
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.navbar.scrolled {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.navbar.scrolled .nav-top {
    max-block-size: 0;
    opacity: 0;
}

.navbar.scrolled .nav-main {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 30px rgba(15, 16, 20, 0.1);
}

.navbar.scrolled .nav-shell {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 42px rgba(15, 16, 20, 0.16);
}


.nav-shell {
    position: relative;
    max-inline-size: 1400px;
    margin: 0 auto;
    padding-inline: clamp(1.5rem, 5vw, 2.5rem);
    padding-block: clamp(0.75rem, 2vw, 1.25rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    min-block-size: var(--nav-height);
    border-radius: clamp(18px, 3vw, 26px);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 22px 45px rgba(15, 16, 20, 0.12);
    -webkit-backdrop-filter: blur(calc(var(--nav-blur-strength) * 1.1));
    backdrop-filter: blur(calc(var(--nav-blur-strength) * 1.1));
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
}

.nav-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.12) 0%, rgba(91, 155, 213, 0.08) 48%, rgba(255, 255, 255, 0.12) 100%);
    opacity: 0.95;
    z-index: -2;
}

.nav-shell::after {
    content: '';
    position: absolute;
    inset-block-start: -60%;
    inset-inline-end: -25%;
    inline-size: clamp(220px, 32vw, 360px);
    block-size: clamp(220px, 32vw, 360px);
    background: radial-gradient(circle, rgba(91, 155, 213, 0.28) 0%, rgba(91, 155, 213, 0) 70%);
    opacity: 0.75;
    z-index: -1;
}

.nav-logo img {
    block-size: clamp(40px, 5vw, 56px);
    inline-size: auto;
    transition: transform var(--transition-base);
}

.nav-logo:hover img {
    transform: scale3d(1.05, 1.05, 1);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-inline-start: auto;
    z-index: 1000;
}

.nav-group {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.nav-group--primary {
    flex: 1 1 auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    display: flex;
}

.nav-link {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 500;
    color: var(--gray-700);
    position: relative;
    transition: color var(--transition-base);
}

.nav-link::after {
    content: '';
    position: absolute;
    inset-block-end: -6px;
    inset-inline-start: 50%;
    inline-size: 0;
    block-size: 2px;
    background: linear-gradient(90deg, var(--primary-wine), var(--secondary-blue));
    transition: inline-size var(--transition-base);
    transform: translate3d(-50%, 0, 0);
}

.nav-link:hover::after,
.nav-link.active::after {
    inline-size: 100%;
}

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

.nav-cta {
    padding-block: 0.75rem;
    padding-inline: clamp(1.25rem, 2vw, 1.75rem);
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    box-shadow: 0 8px 22px rgba(91, 155, 213, 0.35);
    white-space: nowrap;
}

.nav-cta i {
    font-size: var(--font-size-xs);
}

.nav-meta,
.nav-group--meta {
    display: none;
    flex-direction: column;
    gap: var(--spacing-sm);
    inline-size: 100%;
}

.nav-meta-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.nav-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    line-height: 1.45;
    color: var(--gray-700);
}

.nav-meta-item i {
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
    color: var(--primary-wine);
}

.nav-meta-item a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: inherit;
    transition: color var(--transition-base);
}

.nav-meta-item a:hover {
    color: var(--primary-wine);
}

.nav-meta-social a {
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

.nav-toggle {
    display: none;
    position: relative;
    z-index: 1001;
    flex-direction: column;
    gap: 5px;
    inline-size: 30px;
    block-size: 25px;
}

.nav-toggle span {
    display: block;
    inline-size: 100%;
    block-size: 3px;
    background: var(--primary-wine);
    border-radius: 3px;
    transition: all var(--transition-base);
}

/* Hide close button and overlay on desktop */
.nav-close,
.nav-overlay {
    display: none;
}

/* ====================================
   Hero Section
   ==================================== */
.hero {
    position: relative;
    block-size: 100vh;
    min-block-size: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    z-index: 1;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
    will-change: transform;
}

.hero-slider {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
}

.hero-slide {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    animation: parallaxZoom 20s ease-out infinite;
    will-change: transform;
}

@keyframes parallaxZoom {
    0%, 100% { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.1, 1.1, 1); }
}

.hero-slide::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(
        135deg,
        rgba(139, 21, 56, 0.85) 0%,
        rgba(107, 15, 42, 0.7) 25%,
        rgba(91, 155, 213, 0.6) 75%,
        rgba(65, 120, 184, 0.75) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    padding: var(--spacing-md);
    max-inline-size: 900px;
}

.hero-title {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-block-end: var(--spacing-md);
}

.title-line {
    font-family: var(--font-body);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

.title-main {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5.5rem);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, var(--secondary-blue-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    animation: fadeInUp 1s ease 0.3s forwards;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-block-end: var(--spacing-lg);
    opacity: 0;
    animation: fadeInUp 1s ease 0.6s forwards;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeInUp 1s ease 0.9s forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.hero-scroll {
    position: absolute;
    inset-block-end: 3rem;
    inset-inline-start: 50%;
    transform: translate3d(-50%, 0, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--white);
    font-size: var(--font-size-sm);
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 2;
}

.scroll-indicator {
    inline-size: 2px;
    block-size: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, 10px, 0); }
}

/* ====================================
   Features Section
   ==================================== */
.features {
    padding-block: var(--spacing-lg);
    padding-inline: 0;
    /* Enhanced background with subtle gradient */
    background: 
        radial-gradient(ellipse at 85% 15%, rgba(91, 155, 213, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 80%, rgba(139, 21, 56, 0.04) 0%, transparent 50%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.8) 100%);
    position: relative;
    overflow: hidden;
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    z-index: 50;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
    /* Sauberer Übergang */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
}

.features::before {
    content: '';
    position: absolute;
    inset-block-start: -50%;
    inset-inline-end: -10%;
    inline-size: 600px;
    block-size: 600px;
    background: radial-gradient(circle, rgba(91, 155, 213, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
}

.feature-card {
    background: var(--white);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
    will-change: transform;
    contain: layout style paint;
}

.feature-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 4px;
    background: linear-gradient(90deg, var(--primary-wine), var(--secondary-blue));
    transform: scaleX(0);
    transform-origin: 0% 50%;
    transition: transform var(--transition-base);
    will-change: transform;
}

.feature-card:hover {
    transform: translate3d(0, -10px, 0);
    box-shadow: var(--shadow-lg);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-icon {
    inline-size: 80px;
    block-size: 80px;
    margin-block-start: 0;
    margin-block-end: var(--spacing-sm);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-wine) 0%, var(--secondary-blue) 100%);
    border-radius: var(--radius-md);
    font-size: var(--font-size-2xl);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.3);
    transition: transform var(--transition-base);
    will-change: transform;
}

.feature-card:hover .feature-icon {
    transform: translate3d(0, -6px, 0) scale3d(1.05, 1.05, 1);
}

.feature-card h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--gray-900);
    margin-block-end: 0.5rem;
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    line-height: 1.6;
}

/* ====================================
   Products Section
   ==================================== */
.products {
    padding-block: var(--spacing-xl);
    padding-inline: 0;
    /* Enhanced background with geometric pattern */
    background: 
        repeating-linear-gradient(45deg, 
            transparent, 
            transparent 80px, 
            rgba(139, 21, 56, 0.015) 80px, 
            rgba(139, 21, 56, 0.015) 82px
        ),
        repeating-linear-gradient(-45deg, 
            transparent, 
            transparent 80px, 
            rgba(91, 155, 213, 0.015) 80px, 
            rgba(91, 155, 213, 0.015) 82px
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    position: relative;
    z-index: 50;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
}

.section-header {
    text-align: center;
    margin-block-end: var(--spacing-lg);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.product-item {
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    z-index: 1;
    will-change: transform;
    contain: layout style paint;
}

.product-item:hover,
.product-item:focus-within {
    transform: translate3d(0, -8px, 0);
    box-shadow: var(--shadow-xl);
    z-index: 10;
}

.product-image {
    position: relative;
    block-size: 280px;
    overflow: hidden;
}

.product-image img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    will-change: transform;
}

.product-item:hover .product-image img {
    transform: scale3d(1.15, 1.15, 1);
}

.product-overlay {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.9), rgba(91, 155, 213, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-base);
}

.product-item:hover .product-overlay {
    opacity: 1;
}

.product-overlay i {
    font-size: var(--font-size-3xl);
    color: var(--white);
    transform: scale3d(0, 0, 1);
    transition: transform var(--transition-base);
}

.product-item:hover .product-overlay i {
    transform: scale3d(1, 1, 1);
}

.product-info {
    padding: var(--spacing-md);
}

.product-info h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gray-900);
    margin-block-end: 0.5rem;
    transition: color var(--transition-base);
}

.product-item:hover .product-info h3 {
    color: var(--primary-wine);
}

.product-info p {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    line-height: 1.6;
}

/* ====================================
   About Section
   ==================================== */
.about {
    padding-block: var(--spacing-xl);
    padding-inline: 0;
    /* Soft radial gradient background */
    background: 
        radial-gradient(circle at 20% 30%, rgba(91, 155, 213, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(139, 21, 56, 0.06) 0%, transparent 40%),
        linear-gradient(to bottom, rgba(248, 249, 250, 0.9) 0%, rgba(255, 255, 255, 0.97) 50%, rgba(248, 249, 250, 0.9) 100%);
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    position: relative;
    z-index: 50;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    align-items: center;
}

.about-image {
    position: relative;
    padding: var(--spacing-md);
}

.about-image img {
    position: relative;
    z-index: 2;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    transition: transform var(--transition-base);
}

.about-image:hover img {
    transform: scale3d(1.05, 1.05, 1);
}

.about-pattern {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 300px;
    block-size: 300px;
    background: radial-gradient(circle, rgba(139, 21, 56, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.about-content {
    padding: var(--spacing-md);
}

.about-text {
    font-size: var(--font-size-base);
    color: var(--gray-700);
    margin-block-end: var(--spacing-md);
    line-height: 1.8;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-block: var(--spacing-lg);
    margin-inline: 0;
    padding-block: var(--spacing-md);
    padding-inline: 0;
    border-block-start: 2px solid var(--gray-200);
    border-block-end: 2px solid var(--gray-200);
}

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

.stat-number {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-wine), var(--secondary-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-block-end: 0.25rem;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ====================================
   Services Section
   ==================================== */
.services {
    padding-block: var(--spacing-xl);
    padding-inline: 0;
    /* Diagonal stripe pattern background */
    background: 
        linear-gradient(135deg, 
            transparent 0%, 
            transparent 48%, 
            rgba(139, 21, 56, 0.02) 48%, 
            rgba(139, 21, 56, 0.02) 52%, 
            transparent 52%, 
            transparent 100%
        ),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 0%, rgba(248, 249, 250, 0.92) 100%);
    background-size: 120px 120px, 100% 100%;
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    position: relative;
    z-index: 50;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
}

/* ====================================
   Fleischtheke (Meat Counter) Section
   ==================================== */
.meat-counter {
    position: relative;
    overflow: hidden;
}

.meat-counter-banner {
    position: relative;
    block-size: clamp(400px, 50vh, 600px);
    overflow: hidden;
    isolation: isolate;
}

.meat-banner-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
}

.meat-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(139, 21, 56, 0.85) 0%,
        rgba(107, 15, 42, 0.9) 50%,
        rgba(91, 155, 213, 0.85) 100%
    );
    z-index: 1;
}

.meat-banner-content {
    position: relative;
    z-index: 2;
    block-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: var(--spacing-lg);
}

.meat-content-wrapper {
    max-inline-size: 800px;
}

.meat-subtitle {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--white);
    margin-block-end: var(--spacing-sm);
    padding-block: var(--spacing-xs);
    padding-inline: var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.meat-title {
    font-family: var(--font-display);
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--white);
    margin-block-end: var(--spacing-md);
    line-height: 1.2;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.meat-description {
    font-size: var(--font-size-lg);
    color: var(--white);
    line-height: 1.7;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    max-inline-size: 600px;
    margin-inline: auto;
}

.meat-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-block: calc(var(--spacing-xl) * -0.5) var(--spacing-lg);
    position: relative;
    z-index: 10;
}

.meat-product-card {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
}

.meat-product-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 4px;
    background: linear-gradient(90deg, var(--primary-wine) 0%, var(--secondary-blue) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.meat-product-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.meat-product-card:hover::before {
    transform: scaleX(1);
}

.meat-icon-wrapper {
    inline-size: 80px;
    block-size: 80px;
    margin-block-end: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-wine) 0%, var(--secondary-blue) 100%);
    border-radius: var(--radius-md);
    font-size: var(--font-size-3xl);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.3);
    transition: transform var(--transition-base);
}

.meat-product-card:hover .meat-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

.meat-product-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-block-end: var(--spacing-sm);
}

.meat-product-description {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    line-height: 1.7;
    margin-block-end: var(--spacing-md);
}

.meat-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.meat-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    margin-block-end: var(--spacing-xs);
}

.meat-features li i {
    color: var(--primary-wine);
    font-size: var(--font-size-sm);
}

.meat-info-banner {
    background: linear-gradient(135deg, 
        rgba(139, 21, 56, 0.05) 0%, 
        rgba(91, 155, 213, 0.05) 100%
    );
    border: 2px solid rgba(139, 21, 56, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-block-end: var(--spacing-lg);
}

.meat-info-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.meat-cert-icon {
    font-size: var(--font-size-4xl);
    color: var(--primary-wine);
    flex-shrink: 0;
}

.meat-info-text h4 {
    font-size: var(--font-size-xl);
    color: var(--gray-900);
    margin-block-end: var(--spacing-xs);
}

.meat-info-text p {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ====================================
   Services Section
   ==================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-block-start: var(--spacing-lg);
}

.service-box {
    background: var(--white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    text-align: center;
    will-change: transform;
    contain: layout style paint;
}

.service-box::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    background: linear-gradient(135deg, rgba(139, 21, 56, 0.05), rgba(91, 155, 213, 0.05));
    opacity: 0;
    transition: opacity var(--transition-base);
}

.service-box:hover {
    transform: translate3d(0, -10px, 0);
    box-shadow: var(--shadow-xl);
}

.service-box:hover::before {
    opacity: 1;
}

.service-number {
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-end: 1.5rem;
    font-family: var(--font-display);
    font-size: var(--font-size-5xl);
    font-weight: 800;
    color: rgba(139, 21, 56, 0.08);
    line-height: 1;
    transition: color var(--transition-base), transform var(--transition-base);
    will-change: transform;
}

.service-box:hover .service-number {
    color: rgba(139, 21, 56, 0.15);
    transform: scale3d(1.2, 1.2, 1);
}

.service-icon {
    inline-size: 80px;
    block-size: 80px;
    margin-block-start: 0;
    margin-block-end: var(--spacing-md);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-wine), var(--secondary-blue));
    border-radius: 50%;
    font-size: var(--font-size-2xl);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(139, 21, 56, 0.3);
    position: relative;
    z-index: 2;
    transition: transform var(--transition-base);
    will-change: transform;
}

.service-box:hover .service-icon,
.service-box:focus-within .service-icon {
    transform: translate3d(0, -6px, 0) scale3d(1.05, 1.05, 1);
}

.service-box h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--gray-900);
    margin-block-end: var(--spacing-sm);
    position: relative;
    z-index: 2;
}

.service-box p {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    line-height: 1.7;
    position: relative;
    z-index: 2;
}

/* ====================================
   Jobs Section
   ==================================== */
.jobs {
    padding-block: var(--spacing-xl);
    padding-inline: 0;
    background: linear-gradient(135deg, var(--primary-wine) 0%, var(--primary-wine-dark) 100%);
    color: var(--white);
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    position: relative;
    z-index: 50;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
}

.jobs-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    align-items: center;
}

.jobs-text .section-subtitle {
    color: var(--secondary-blue-light);
}

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

.jobs-text p {
    font-size: var(--font-size-base);
    margin-block-end: var(--spacing-md);
    opacity: 0.95;
    line-height: 1.8;
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-block: var(--spacing-lg);
    margin-inline: 0;
}

.job-position {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background var(--transition-base), transform var(--transition-base);
}

.job-position:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translate3d(10px, 0, 0);
}

.job-position i {
    font-size: var(--font-size-lg);
    color: var(--secondary-blue-light);
}

.job-position h4 {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-block-end: 0.25rem;
}

.job-position p {
    font-size: var(--font-size-sm);
    margin: 0;
    opacity: 0.8;
}

.jobs-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jobs-card {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--shadow-xl);
    transition: transform var(--transition-base), background var(--transition-base);
}

.jobs-card:hover {
    transform: scale3d(1.05, 1.05, 1);
    background: rgba(255, 255, 255, 0.15);
}

.jobs-card i {
    font-size: var(--font-size-4xl);
    color: var(--secondary-blue-light);
    margin-block-end: var(--spacing-md);
}

.jobs-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-block-end: 0.5rem;
}

.jobs-card p {
    margin: 0;
    font-size: var(--font-size-base);
}

/* ====================================
   Contact Section
   ==================================== */
.contact {
    padding-block: var(--spacing-xl);
    padding-inline: 0;
    /* Wave pattern background */
    background: 
        radial-gradient(circle at 10% 20%, rgba(91, 155, 213, 0.05) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(139, 21, 56, 0.04) 0%, transparent 30%),
        repeating-linear-gradient(
            0deg,
            rgba(91, 155, 213, 0.01) 0px,
            rgba(91, 155, 213, 0.01) 2px,
            transparent 2px,
            transparent 100px
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 249, 250, 0.95) 100%);
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    position: relative;
    z-index: 50;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    margin-block-end: var(--spacing-lg);
}

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

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-block: var(--spacing-lg);
    margin-inline: 0;
}

.contact-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-100);
    border-radius: var(--radius-md);
    transition: background var(--transition-base), transform var(--transition-base);
}

.contact-item:hover {
    background: var(--gray-200);
    transform: translate3d(10px, 0, 0);
}

.contact-icon {
    inline-size: 50px;
    block-size: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-wine), var(--secondary-blue));
    border-radius: var(--radius-md);
    color: var(--white);
    font-size: var(--font-size-md);
}

.contact-item h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--gray-900);
    margin-block-end: 0.25rem;
}

.contact-item p,
.contact-item a {
    font-size: var(--font-size-base);
    color: var(--gray-600);
    line-height: 1.6;
}

.contact-item a:hover {
    color: var(--primary-wine);
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
    margin-block-start: var(--spacing-md);
}

.social-link {
    inline-size: 50px;
    block-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    border-radius: 50%;
    font-size: var(--font-size-md);
    color: var(--primary-wine);
    transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.social-link:hover {
    background: linear-gradient(135deg, var(--primary-wine), var(--secondary-blue));
    color: var(--white);
    transform: translate3d(0, -5px, 0);
    box-shadow: var(--shadow-md);
}

/* Contact Form */
.contact-form-wrapper {
    background: linear-gradient(135deg, var(--gray-100), var(--white));
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.contact-form h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--gray-900);
    margin-block-end: var(--spacing-md);
}

.form-group {
    position: relative;
    margin-block-end: var(--spacing-md);
}

/* Hidden inputs should not take space or be visible */
.form-group input[type="hidden"] {
    position: absolute;
    inline-size: 0;
    block-size: 0;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.form-group input,
.form-group textarea {
    inline-size: 100%;
    padding-block: var(--spacing-sm);
    padding-inline: 1.25rem;
    font-size: var(--font-size-base);
    font-family: var(--font-body);
    color: var(--gray-800);
    background: var(--white);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-wine);
    box-shadow: 0 0 0 4px rgba(139, 21, 56, 0.1);
}

.form-group input:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:not(:placeholder-shown) + label {
    inset-block-start: -0.75rem;
    inset-inline-start: 0.75rem;
    font-size: var(--font-size-xs);
    color: var(--primary-wine);
    background: var(--white);
    padding-block: 0;
    padding-inline: var(--spacing-xs);
}

.form-group label {
    position: absolute;
    inset-block-start: 1rem;
    inset-inline-start: 1.25rem;
    font-size: var(--font-size-base);
    color: var(--gray-500);
    pointer-events: none;
    transition: all var(--transition-base);
}

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

/* Form Validation Styles */
.form-group.has-error input,
.form-group.has-error textarea {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

.form-group.has-error input:focus,
.form-group.has-error textarea:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1);
}

.form-group.has-success input,
.form-group.has-success textarea {
    border-color: #28a745;
    background: rgba(40, 167, 69, 0.05);
}

.form-group.has-success input:focus,
.form-group.has-success textarea:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 4px rgba(40, 167, 69, 0.1);
}

.field-error {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-block-start: 0.5rem;
    font-size: var(--font-size-sm);
    color: #dc3545;
    animation: slideInDown 0.3s ease;
}

.field-error::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.contact-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.contact-form button[type="submit"]:disabled:hover {
    transform: none;
}

/* Honeypot field for spam protection */
.honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Datenschutz-Checkbox Styling */
.form-checkbox {
    margin-block: var(--spacing-md);
    display: block;
    position: relative;
}

.checkbox-label {
    display: flex;
    gap: var(--spacing-sm);
    cursor: pointer;
    align-items: flex-start;
    padding: var(--spacing-sm);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
    min-block-size: 44px;
    position: relative;
}

.checkbox-label:hover {
    background: var(--gray-200);
}

.checkbox-label input[type="checkbox"] {
    margin-block-start: 0.25rem;
    cursor: pointer;
    inline-size: 18px;
    block-size: 18px;
    flex-shrink: 0;
    accent-color: var(--primary-wine);
    position: relative;
}

.checkbox-text {
    line-height: 1.6;
    color: var(--gray-700);
    font-size: 0.9rem;
    flex: 1;
}

.checkbox-text a {
    color: var(--primary-wine);
    text-decoration: underline;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.checkbox-text a:hover {
    color: var(--primary-wine-dark);
}

/* Error shake animation for checkbox */
.form-checkbox.error-shake {
    animation: errorShake 0.5s ease-in-out;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.form-checkbox.has-error .checkbox-label {
    background: rgba(220, 53, 69, 0.1);
    border: 2px solid #dc3545;
}

/* Map */
.map-container {
    position: relative;
    inline-size: 100%;
    block-size: 450px;
    background: var(--gray-200);
}

.map-iframe {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

.map-fallback {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-block-start: var(--spacing-sm);
    font-weight: 600;
    color: var(--secondary-blue);
}

.map-fallback::after {
    content: '\f35d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}

/* ====================================
   Footer
   ==================================== */
.footer {
    position: relative;
    margin-block-start: var(--spacing-xl);
    padding-inline: 0;
    color: rgba(255, 255, 255, 0.82);
    background:
        radial-gradient(circle at 12% 8%, rgba(91, 155, 213, 0.16), transparent 55%),
        radial-gradient(circle at 88% 14%, rgba(139, 21, 56, 0.22), transparent 68%),
        linear-gradient(145deg, #0f1014 0%, #14171d 55%, #0b0c0e 100%);
    overflow: hidden;
    isolation: isolate;
}

.footer::before,
.footer::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.9;
}

.footer::before {
    inset-block-start: -25%;
    inset-inline-start: -18%;
    inline-size: clamp(380px, 55vw, 640px);
    block-size: clamp(380px, 55vw, 640px);
    background: radial-gradient(circle, rgba(91, 155, 213, 0.25) 0%, transparent 70%);
}

.footer::after {
    inset-block-end: -28%;
    inset-inline-end: -12%;
    inline-size: clamp(340px, 48vw, 600px);
    block-size: clamp(340px, 48vw, 600px);
    background: radial-gradient(circle, rgba(139, 21, 56, 0.22) 0%, transparent 68%);
}

.footer-top,
.footer-cta,
.footer-bottom {
    position: relative;
    z-index: 1;
}

.footer-top {
    padding-block: clamp(var(--spacing-lg), 8vw, calc(var(--spacing-xl) * 1.2));
}

.footer-top-container {
    display: grid;
    grid-template-columns: minmax(280px, 1.1fr) minmax(480px, 1.9fr);
    gap: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(2.5rem, 6vw, 3.5rem);
    background: rgba(9, 10, 13, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    isolation: isolate;
    overflow: hidden;
}

.footer-top-container::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 3px;
    background: linear-gradient(90deg, rgba(139, 21, 56, 0.75), rgba(91, 155, 213, 0.75));
}

.footer-top-container::after {
    content: '';
    position: absolute;
    inset-block-start: 40%;
    inset-inline-end: -12%;
    inline-size: clamp(220px, 38vw, 320px);
    block-size: clamp(220px, 38vw, 320px);
    background: radial-gradient(circle, rgba(91, 155, 213, 0.18) 0%, transparent 70%);
    opacity: 0.6;
    z-index: 0;
}

.footer-brand,
.footer-grid {
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 3vw, 1.85rem);
    max-inline-size: 360px;
}

.footer-brand::after {
    content: '';
    display: block;
    inline-size: 80px;
    block-size: 2px;
    background: linear-gradient(90deg, var(--secondary-blue-light), var(--primary-wine));
    border-radius: var(--radius-full);
    margin-block-start: 0.75rem;
}

.footer-logo {
    max-inline-size: 200px;
    filter: brightness(0) invert(1) drop-shadow(0 6px 18px rgba(12, 13, 16, 0.45));
}

.footer-brand p {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.footer-badges span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.55rem 1.35rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
    letter-spacing: 0.3px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.footer-badges span i {
    color: var(--secondary-blue-light);
    font-size: var(--font-size-sm);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: clamp(1.75rem, 3vw, 2.5rem);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer-col h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    position: relative;
    padding-block-end: 0.35rem;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    display: block;
    inline-size: 48px;
    block-size: 2px;
    background: linear-gradient(90deg, var(--primary-wine), var(--secondary-blue));
    border-radius: var(--radius-full);
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0;
    padding: 0;
}

.footer-col li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    transition: color var(--transition-base);
}

.footer-col li:hover {
    color: rgba(255, 255, 255, 0.9);
}

.footer-col li i {
    color: var(--secondary-blue-light);
    font-size: var(--font-size-sm);
    margin-block-start: 0.2rem;
}

.footer-col a {
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: color var(--transition-base), transform var(--transition-base);
    padding-block: var(--spacing-xs);
    padding-inline: 0.25rem;
    min-block-size: 44px;
}

.footer-col a:hover {
    color: var(--secondary-blue-light);
    transform: translate3d(4px, 0, 0);
}

.footer-hours-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--font-size-xs);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-block-start: auto;
}

.footer-social a {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--white);
    transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.footer-social a:hover {
    transform: translate3d(0, -4px, 0);
    background: linear-gradient(135deg, var(--primary-wine), var(--secondary-blue));
    box-shadow: 0 12px 24px rgba(12, 13, 14, 0.45);
}

.footer-cta {
    padding-block: clamp(var(--spacing-lg), 6vw, var(--spacing-xl));
}

.footer-cta::before {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 0;
    transform: translate3d(-50%, -40%, 0);
    inline-size: clamp(420px, 65vw, 780px);
    block-size: clamp(420px, 55vw, 620px);
    background: radial-gradient(circle, rgba(139, 21, 56, 0.25) 0%, transparent 70%);
    z-index: 0;
    opacity: 0.7;
}

.footer-cta-container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(var(--spacing-sm), 6vw, var(--spacing-lg));
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.footer-cta-text {
    max-inline-size: 560px;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-cta-text h4 {
    font-size: clamp(1.45rem, 3vw, 1.85rem);
    font-weight: 600;
    color: var(--white);
    letter-spacing: 0.4px;
}

.footer-cta-text p {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.72);
}

.footer-cta .btn {
    box-shadow: 0 15px 40px rgba(12, 13, 16, 0.45);
}

.footer-bottom {
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
    padding-block: clamp(1.5rem, 4vw, 2rem);
    background: rgba(6, 7, 9, 0.65);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.footer-bottom-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--font-size-sm);
}

.footer-links {
    display: inline-flex;
    gap: var(--spacing-md);
    align-items: center;
}

.footer-links a {
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-base);
    padding-block: var(--spacing-xs);
    padding-inline: 0.25rem;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
}

.footer-links a::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: -4px;
    inline-size: 0;
    block-size: 2px;
    background: linear-gradient(90deg, var(--primary-wine), var(--secondary-blue));
    transition: inline-size var(--transition-base);
}

.footer-links a:hover {
    color: var(--secondary-blue-light);
}

.footer-links a:hover::after {
    inline-size: 100%;
}

/* ====================================
   Notifications
   ==================================== */
.notification {
    position: fixed;
    inset-block-start: 6rem;
    inset-inline-end: 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-block: var(--spacing-sm);
    padding-inline: var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--white);
    max-inline-size: 360px;
    z-index: 10000;
    pointer-events: auto;
}

.notification.notification--enter {
    animation: slideInRight 0.5s ease forwards;
}

.notification.notification--leave {
    animation: slideOutRight 0.5s ease forwards;
}

.notification--success {
    background: #0f9d58;
}

.notification--info {
    background: var(--secondary-blue);
}

.notification--error {
    background: var(--primary-wine-dark);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

.notification-content i {
    font-size: var(--font-size-lg);
}

.notification-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.notification-close {
    background: none;
    border: none;
    color: inherit;
    font-size: var(--font-size-md);
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.85;
    transition: opacity var(--transition-fast);
}

.notification-close:hover {
    opacity: 1;
}

@keyframes slideInRight {
    from {
        transform: translate3d(320px, 0, 0);
        opacity: 0;
    }
    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
    to {
        transform: translate3d(320px, 0, 0);
        opacity: 0;
    }
}

/* ====================================
   Scroll to Top Button
   ==================================== */
.scroll-top {
    position: fixed;
    inset-block-end: 2rem;
    inset-inline-end: 2rem;
    inline-size: 50px;
    block-size: 50px;
    background: linear-gradient(135deg, var(--primary-wine), var(--secondary-blue));
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 20px, 0);
    transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
    z-index: 999;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.scroll-top:hover {
    transform: translate3d(0, -5px, 0);
    box-shadow: var(--shadow-xl);
}

/* ====================================
   Animations
   ==================================== */
[data-animate] {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate].animated {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ====================================
   Responsive Design
   ==================================== */
@media (max-width: 1200px) {
    .nav-shell {
        padding-inline: clamp(1.25rem, 4vw, 2rem);
    }

    .nav-top-container {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    .nav-top-contact {
        justify-content: center;
    }

    .nav-top-social {
        justify-content: center;
    }

    .hero {
        min-block-size: 640px;
    }

    .features,
    .products,
    .about,
    .services,
    .jobs,
    .contact,
    .bakal-delivery {
        padding-block: calc(var(--spacing-xl) * 0.85);
    }

    /* Verbesserte Lesbarkeit auf Tablets */
    .bakal-subtitle {
        font-size: var(--font-size-sm);
        text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    }

    .bakal-title {
        text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    }

    .bakal-description {
        font-size: var(--font-size-base);
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        line-height: 1.75;
    }

    .bakal-card-title {
        font-size: var(--font-size-md);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    .bakal-card-text {
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    }

    .service-box,
    .jobs-card {
        padding: clamp(var(--spacing-md), 3vw, var(--spacing-lg));
    }

    .about-pattern {
        inline-size: 240px;
        block-size: 240px;
    }

    .product-image {
        block-size: 260px;
    }
}

@media (max-width: 992px) {
    .nav-top {
        display: none;
    }

    .nav-shell {
        padding-inline: 1.25rem;
        padding-block: 0.75rem;
        gap: var(--spacing-md);
        border-radius: var(--radius-md);
        box-shadow: 0 14px 32px rgba(15, 16, 20, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.4);
        overflow: visible; /* CRITICAL: Allow fixed nav-menu to escape container */
    }

    .nav-shell::after {
        inset-block-start: -75%;
        inset-inline-end: -40%;
        inline-size: clamp(180px, 42vw, 280px);
        block-size: clamp(180px, 42vw, 280px);
        opacity: 0.55;
    }

    .nav-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        inline-size: 100%;
    }

    .nav-group--primary {
        order: 1;
    }

    .nav-group--cta {
        order: 2;
        inline-size: 100%;
    }

    .nav-group--meta,
    .nav-meta {
        order: 3;
        display: flex;
    }

    .nav-menu {
        position: fixed;
        inset-block-start: 0;
        inset-inline-start: -66.67%;
        inline-size: 66.67%;
        max-inline-size: 380px;
        block-size: 100vh;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-lg);
        padding: clamp(5.5rem, 14vw, 7rem) var(--spacing-md) calc(var(--spacing-lg) * 1.2);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        transition: inset-inline-start var(--transition-base);
        overflow-y: auto;
        z-index: 1002;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .nav-menu.active {
        inset-inline-start: 0 !important;
    }

    /* Mobile Menu Close Button */
    .nav-close {
        display: flex;
        position: absolute;
        inset-block-start: 1.25rem;
        inset-inline-end: 1.25rem;
        align-items: center;
        justify-content: center;
        inline-size: 44px;
        block-size: 44px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(139, 21, 56, 0.08);
        color: var(--primary-wine);
        font-size: var(--font-size-lg);
        cursor: pointer;
        transition: all var(--transition-base);
        z-index: 10;
    }

    .nav-close:hover {
        background: rgba(139, 21, 56, 0.15);
        transform: rotate(90deg) scale(1.05);
    }

    .nav-close:active {
        transform: rotate(90deg) scale(0.95);
    }

    /* Menu Overlay */
    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 16, 20, 0.65);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-base), visibility var(--transition-base);
        z-index: 1001;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
        inline-size: 100%;
    }

    .nav-link {
        font-size: clamp(1rem, 2vw, 1.1rem);
    }

    .nav-actions {
        inline-size: 100%;
    }

    .nav-actions .btn {
        inline-size: 100%;
        justify-content: center;
    }

    .nav-meta {
        flex-direction: column;
        gap: var(--spacing-sm);
        inline-size: 100%;
        padding-block-start: var(--spacing-md);
        border-block-start: 1px solid var(--gray-200);
    }

    .nav-meta-items {
        align-items: flex-start;
    }

    .nav-meta-item {
        font-weight: 600;
    }

    .nav-meta-social {
        display: flex;
        gap: var(--spacing-sm);
    }

    .nav-meta-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        inline-size: 42px;
        block-size: 42px;
        border-radius: 50%;
        background: rgba(139, 21, 56, 0.12);
        color: var(--primary-wine);
        transition: background var(--transition-base);
    }

    .nav-meta-social a:hover {
        background: rgba(139, 21, 56, 0.2);
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: translate3d(0, 8px, 0) rotate(45deg);
    }

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

    .nav-toggle.active span:nth-child(3) {
        transform: translate3d(0, -8px, 0) rotate(-45deg);
    }

    .hero {
        min-block-size: 580px;
        padding-inline: var(--spacing-sm);
    }

    .hero-content {
        max-inline-size: 720px;
        padding: var(--spacing-sm);
    }

    .hero-buttons {
        flex-direction: column;
        inline-size: 100%;
    }

    .hero-buttons .btn {
        inline-size: 100%;
        justify-content: center;
    }

    .features-grid,
    .products-grid,
    .services-grid {
        gap: var(--spacing-sm);
    }

    .about-grid,
    .jobs-content,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .jobs-card,
    .service-box {
        padding: var(--spacing-md);
    }

    .product-image {
        block-size: 240px;
    }

    .map-container {
        block-size: 380px;
    }

    .footer-top {
        padding-block: var(--spacing-lg);
    }

    .footer-top-container {
        padding: clamp(1.75rem, 8vw, 2.25rem);
        gap: var(--spacing-lg);
    }

    .footer-cta {
        padding-block: var(--spacing-lg);
    }

    .footer-cta-container {
        padding: clamp(1.5rem, 6vw, 2rem);
    }

    .footer-cta .btn {
        inline-size: 100%;
        justify-content: center;
    }

    .footer-top-container {
        grid-template-columns: 1fr;
        padding: clamp(2rem, 6vw, 2.5rem);
        gap: var(--spacing-lg);
    }

    .footer-top-container::after {
        inset-inline-end: -30%;
    }

    .footer-brand {
        max-inline-size: none;
        text-align: center;
        align-items: center;
    }

    .footer-brand::after {
        margin-inline: auto;
    }

    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        inline-size: 100%;
        gap: var(--spacing-md);
    }

    .footer-col {
        align-items: center;
        text-align: center;
    }

    .footer-col ul {
        align-items: center;
    }

    .footer-col ul li {
        justify-content: center;
    }

    .footer-col ul li a {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-cta-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--spacing-md);
    }

    .footer-cta-text {
        max-inline-size: 520px;
    }

    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .footer-links {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .nav-shell {
        padding-inline: 1.25rem;
        border-radius: var(--radius-md);
        box-shadow: 0 12px 28px rgba(15, 16, 20, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.35);
    }

    .nav-shell::after {
        opacity: 0.4;
        inset-inline-end: -55%;
    }

    .nav-menu {
        padding: clamp(5.5rem, 18vw, 6.5rem) var(--spacing-md) calc(var(--spacing-lg) * 1.05);
        gap: var(--spacing-md);
    }

    .hero {
        min-block-size: 520px;
    }

    .hero-scroll {
        inset-block-end: 2.5rem;
    }

    .section-title {
        font-size: clamp(1.9rem, 6vw, 2.5rem);
    }

    .section-description {
        font-size: var(--font-size-base);
    }

    .features,
    .products,
    .about,
    .services,
    .jobs,
    .contact,
    .bakal-delivery {
        padding-block: var(--spacing-lg);
    }

    /* Mobile: Maximale Lesbarkeit */
    .bakal-video-overlay {
        background: linear-gradient(
            135deg, 
            rgba(233, 30, 99, 0.75) 0%, 
            rgba(194, 24, 91, 0.80) 100%
        );
    }

    .bakal-subtitle {
        font-size: 0.9rem;
        text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
        letter-spacing: 0.1em;
    }

    .bakal-title {
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
        line-height: 1.3;
    }

    .bakal-description {
        font-size: var(--font-size-sm);
        text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        line-height: 1.8;
        font-weight: 600;
    }

    .bakal-btn {
        font-size: var(--font-size-base);
        padding-block: 1.15rem;
        padding-inline: 2.5rem;
        font-weight: 800;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .bakal-card {
        background: rgba(73, 193, 188, 0.2);
        border: 1px solid rgba(73, 193, 188, 0.35);
    }

    .bakal-card-title {
        font-size: 1.1rem;
        text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    }

    .bakal-card-text {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        font-weight: 600;
        font-size: var(--font-size-sm);
    }

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

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

    .product-image {
        block-size: 220px;
    }

    .about-stats {
        grid-template-columns: 1fr;
    }

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

    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .contact-icon {
        inline-size: 45px;
        block-size: 45px;
    }

    /* Meat Counter - Tablet */
    .meat-counter-banner {
        block-size: clamp(350px, 45vh, 500px);
    }

    .meat-title {
        font-size: var(--font-size-3xl);
    }

    .meat-description {
        font-size: var(--font-size-md);
    }

    .meat-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

    .meat-info-content {
        flex-direction: column;
        text-align: center;
    }

    /* Checkbox responsive fix */
    .checkbox-label {
        gap: 0.65rem;
        padding: 0.875rem;
    }

    .checkbox-text {
        font-size: var(--font-size-xs);
        line-height: 1.65;
    }

    .checkbox-label input[type="checkbox"] {
        inline-size: 20px;
        block-size: 20px;
        margin-block-start: 0.2rem;
    }

    .map-container {
        block-size: 340px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .footer-cta-container {
        align-items: stretch;
    }
}

@media (max-width: 576px) {
    .container {
        padding-inline: var(--spacing-sm);
    }

    .nav-shell {
        padding-inline: var(--spacing-sm);
        border-radius: var(--radius-md);
        box-shadow: 0 10px 22px rgba(15, 16, 20, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.32);
    }

    .nav-shell::after {
        opacity: 0.3;
        inset-inline-end: -65%;
    }

    .nav-menu {
        padding: clamp(5rem, 24vw, 6rem) var(--spacing-sm) calc(var(--spacing-lg) * 0.9);
    }

    .nav-logo img {
        block-size: 50px;
    }

    .hero {
        min-block-size: 480px;
        padding-inline: var(--spacing-sm);
    }

    .hero-content {
        padding: var(--spacing-sm);
    }

    .hero-buttons {
        gap: var(--spacing-sm);
    }

    /* Meat Counter - Mobile */
    .meat-counter-banner {
        block-size: clamp(300px, 40vh, 450px);
    }

    .meat-subtitle {
        font-size: var(--font-size-xs);
        letter-spacing: 2px;
        padding-block: 0.375rem;
        padding-inline: var(--spacing-sm);
    }

    .meat-title {
        font-size: var(--font-size-2xl);
        margin-block-end: var(--spacing-sm);
    }

    .meat-description {
        font-size: var(--font-size-sm);
    }

    .meat-products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
        margin-block: calc(var(--spacing-lg) * -0.3) var(--spacing-md);
    }

    .meat-product-card {
        padding: var(--spacing-md);
    }

    .meat-icon-wrapper {
        inline-size: 60px;
        block-size: 60px;
        font-size: var(--font-size-2xl);
    }

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

    .meat-product-description {
        font-size: var(--font-size-sm);
    }

    .meat-info-banner {
        padding: var(--spacing-md);
    }

    .meat-info-content {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .meat-cert-icon {
        font-size: var(--font-size-3xl);
    }

    .meat-info-text h4 {
        font-size: var(--font-size-lg);
    }

    .meat-info-text p {
        font-size: var(--font-size-sm);
    }

    .features-grid,
    .products-grid,
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .product-image {
        block-size: 180px;
    }

    .section-description {
        font-size: var(--font-size-sm);
    }

    .about-pattern {
        inline-size: 180px;
        block-size: 180px;
    }

    .jobs-card {
        padding: var(--spacing-md);
    }

    .contact-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .contact-item {
        flex-direction: column;
        text-align: center;
    }

    /* Checkbox Mobile Optimization */
    .form-checkbox {
        margin-block-start: 1.5rem !important;
        margin-block-end: 2rem !important;
        display: block !important;
        overflow: visible !important;
        position: relative !important;
    }

    .checkbox-label {
        flex-direction: row;
        gap: 0.6rem;
        padding: var(--spacing-sm);
        align-items: flex-start;
        display: flex !important;
        min-block-size: 44px;
        position: relative !important;
    }

    .checkbox-text {
        font-size: 0.8rem;
        line-height: 1.7;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
        flex: 1;
    }

    .checkbox-label input[type="checkbox"] {
        inline-size: 22px;
        block-size: 22px;
        margin-block-start: 0.15rem;
        flex-shrink: 0;
        position: relative !important;
    }

    .map-container {
        block-size: 300px;
    }

    /* Bakal Section - Maximale Lesbarkeit auf kleinen Bildschirmen */
    .bakal-video-overlay {
        background: linear-gradient(
            135deg, 
            rgba(233, 30, 99, 0.78) 0%, 
            rgba(194, 24, 91, 0.82) 100%
        );
    }

    .bakal-subtitle {
        font-size: var(--font-size-xs);
        text-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
        letter-spacing: 0.12em;
        font-weight: 800;
    }

    .bakal-title {
        text-shadow: 0 5px 18px rgba(0, 0, 0, 0.7);
        line-height: 1.25;
    }

    .bakal-description {
        font-size: 0.9rem;
        text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
        line-height: 1.85;
        font-weight: 700;
    }

    .bakal-btn {
        font-size: var(--font-size-base);
        padding-block: 1.1rem;
        padding-inline: 2.25rem;
        font-weight: 800;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    }

    .bakal-card {
        background: rgba(73, 193, 188, 0.25);
        border: 2px solid rgba(73, 193, 188, 0.4);
        padding: var(--spacing-md);
    }

    .bakal-card-title {
        font-size: var(--font-size-base);
        text-shadow: 0 3px 14px rgba(0, 0, 0, 0.6);
        font-weight: 800;
    }

    .bakal-card-text {
        text-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        font-weight: 700;
        font-size: 0.9rem;
    }

    .bakal-icon {
        box-shadow: 0 8px 20px rgba(73, 193, 188, 0.5);
    }

    .footer-top-container {
        padding: clamp(1.5rem, 10vw, 2rem);
        align-items: center;
        text-align: center;
        gap: var(--spacing-md);
    }

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

    .footer-brand {
        align-items: center;
        text-align: center;
    }

    .footer-badges {
        justify-content: center;
    }

    .footer-col {
        align-items: center;
    }

    .footer-col ul {
        align-items: center;
    }

    .footer-col ul li {
        text-align: center;
    }

    .footer-cta-container {
        text-align: center;
        align-items: center;
    }

    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links {
        justify-content: center;
    }

    .nav-meta-social {
        justify-content: center;
        inline-size: 100%;
    }

    .nav-meta-items {
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .container {
        padding-inline: var(--spacing-xs);
    }

    .nav-shell {
        padding-inline: 0.75rem;
    }

    .nav-menu {
        padding: clamp(4.75rem, 26vw, 5.5rem) var(--spacing-sm);
        gap: var(--spacing-md);
    }

    .hero {
        min-block-size: 440px;
    }

    .hero-title {
        gap: 0.25rem;
    }

    .title-main {
        font-size: clamp(2.5rem, 12vw, 3rem);
    }

    .hero-subtitle {
        margin-block-end: var(--spacing-md);
    }

    .hero-buttons .btn {
        padding-block: 0.9rem;
        padding-inline: var(--spacing-md);
    }

    .about-pattern {
        inline-size: 140px;
        block-size: 140px;
    }

    .social-links {
        flex-wrap: wrap;
    }

    /* Checkbox Extra Small Screens */
    .form-checkbox {
        margin-block-start: 1.25rem;
        margin-block-end: 1.75rem;
        display: block;
        overflow: visible;
        position: relative;
    }

    .checkbox-label {
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
        display: flex;
        min-block-size: 44px;
        position: relative;
    }

    .checkbox-text {
        font-size: var(--font-size-xs);
        line-height: 1.75;
        flex: 1;
    }

    .checkbox-label input[type="checkbox"] {
        inline-size: 24px;
        block-size: 24px;
        margin-block-start: 0.1rem;
        position: relative;
    }

    /* Bakal Section - Extra kleine Bildschirme */
    .bakal-subtitle {
        font-size: 0.8rem;
        text-shadow: 0 4px 16px rgba(0, 0, 0, 0.75);
    }

    .bakal-description {
        font-size: var(--font-size-xs);
        text-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
    }

    .bakal-btn {
        font-size: var(--font-size-sm);
        padding-block: var(--spacing-sm);
        padding-inline: var(--spacing-md);
    }

    .bakal-card-title {
        font-size: var(--font-size-base);
    }

    .bakal-card-text {
        font-size: var(--font-size-xs);
    }
}

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

    .hero-slide img,
    .scroll-indicator::after {
        animation: none !important;
    }
}

/* ====================================
   Bakal.de Delivery Section
   ==================================== */
.bakal-delivery {
    position: relative;
    background: linear-gradient(135deg, var(--bakal-rose) 0%, var(--bakal-rose-dark) 100%);
    padding-block: var(--spacing-xl);
    padding-inline: 0;
    overflow: hidden;
    /* BEST PRACTICE FIX: Stacking Context Isolation */
    z-index: 50;
    isolation: isolate;
    transform: translateZ(0);
    contain: layout style paint;
}

/* Video Background */
.bakal-video-background {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: 0;
    overflow: hidden;
}

.bakal-video-background video {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    min-inline-size: 100%;
    min-block-size: 100%;
    inline-size: auto;
    block-size: auto;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
    will-change: transform;
}

.bakal-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg, 
        rgba(233, 30, 99, 0.70) 0%, 
        rgba(194, 24, 91, 0.75) 100%
    );
    z-index: 1;
}

.bakal-delivery .container {
    position: relative;
    z-index: 2;
}

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

.bakal-subtitle {
    color: var(--bakal-mint-light);
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-size: var(--font-size-base);
    letter-spacing: 0.08em;
}

.bakal-title {
    color: var(--white);
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    font-weight: 700;
}

.bakal-description {
    color: rgba(255, 255, 255, 0.95);
    max-inline-size: 800px;
    margin-inline: auto;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-size: var(--font-size-base);
    line-height: 1.8;
    font-weight: 500;
}

.bakal-cta {
    text-align: center;
    margin-block-start: 3rem;
}

.bakal-btn {
    font-size: var(--font-size-md);
    padding-block: 1.25rem;
    padding-inline: var(--spacing-lg);
    background: var(--bakal-mint);
    color: var(--white);
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(73, 193, 188, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.bakal-btn:hover {
    background: var(--bakal-mint-light);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px rgba(73, 193, 188, 0.5);
}

.bakal-features {
    margin-block-start: 4rem;
}

.bakal-card {
    background: rgba(73, 193, 188, 0.15);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--white);
    border: 1px solid rgba(73, 193, 188, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.bakal-icon {
    background: var(--bakal-mint);
    color: var(--white);
    box-shadow: 0 6px 16px rgba(73, 193, 188, 0.4);
}

.bakal-card-title {
    color: var(--white);
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-size: var(--font-size-md);
}

.bakal-card-text {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    font-weight: 500;
    line-height: 1.7;
}