/* ==========================================================================
   GLOBAL
   ========================================================================== */

/* Farbvariablen & Brand Definitionen */
:root {
    --zellinger-beige: #e2d1ba;
    --zellinger-dunkelbraun: #25201A;
}

/* Font-Faces (Side-by-Side Format) */
@font-face { font-family: 'Linux Libertine'; src: url('fonts/linux-libertine.woff2') format('woff2'), url('fonts/linux-libertine.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Linux Libertine'; src: url('fonts/linux-libertine-bold.woff2') format('woff2'), url('fonts/linux-libertine-bold.woff') format('woff'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Linux Libertine'; src: url('fonts/linux-libertine-bold-italic.woff2') format('woff2'), url('fonts/linux-libertine-bold-italic.woff') format('woff'); font-weight: bold; font-style: italic; font-display: swap; }
@font-face { font-family: 'Linux Libertine'; src: url('fonts/linux-libertine-italic.woff2') format('woff2'), url('fonts/linux-libertine-italic.woff') format('woff'); font-weight: normal; font-style: italic; font-display: swap; }
@font-face { font-family: 'Linux Libertine'; src: url('fonts/linux-libertine-semibold.woff2') format('woff2'), url('fonts/linux-libertine-semibold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Linux Libertine'; src: url('fonts/linux-libertine-semibold-italic.woff2') format('woff2'), url('fonts/linux-libertine-semibold-italic.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap; }

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
}

.main-wrapper {
    width: 80%;
    margin: 0 auto;
    position: relative;
}


/* ==========================================================================
   HEADER (Originaler Desktop-Fluss)
   ========================================================================== */

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-color: rgba(37, 32, 26, 0);
    z-index: 1000;
    will-change: background-color;
}

/* Im Desktop-Modus bleibt das zentrierende Flexbox-Verhalten inaktiv */
.header-flex-container {
    display: block;
    height: 100%;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 180px; /* Originaler Startwert deines Bruders */
    text-align: left;
    will-change: line-height;
    display: block; /* Originaler Fluss */
}

.main-navigation li {
    display: inline-block;
    margin-right: 25px;
}

.main-navigation a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    font-size: 21px;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}

/* Die elegante Unterlinie für den Hover-Effekt - Fixiert auf 10px unter dem Text */
.main-navigation a::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: 18px; /* Schiebt die Linie bei 21px Schriftgröße exakt 10px unter die Unterkante */
    width: 100%;
    height: 2px; /* Stärke der Unterlinie */
    background-color: var(--zellinger-beige); /* Passt perfekt zum Branding */
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.3s ease;
}

/* Hover-Zustand: Linie wird voll eingeblendet */
.main-navigation a:hover::after {
    transform: scaleX(1);
}

.burger-menu-btn {
    display: none; /* Im Desktop standardmäßig unsichtbar */
}

.main-logo-link {
    display: block;
}

.main-logo {
    position: absolute;
    top: 60px; /* Originaler Startwert */
    right: 0;
    width: 320px; /* Originale Startbreite */
    height: auto;
    z-index: 1010;
    transform-origin: right top;
    will-change: transform, top, width;
}


/* ==========================================================================
   RESPONSIVE NAVIGATION & BURGER MENU (Aktiv ab < 1500px)
   ========================================================================== */

@media screen and (max-width: 1499px) {
    
    /* 1. DIE FIXIERTE MENÜLEISTE */
    .main-header {
        height: 80px !important; /* Fixe Höhe laut Vorgabe */
        background-color: var(--zellinger-dunkelbraun) !important; /* Permanenter fixer Hintergrund */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    /* Erst ab hier aktivieren wir Flexbox für die saubere, fixe Ausrichtung auf mobilen Geräten */
    .header-flex-container {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        padding: 0 20px; /* Sicherheitsabstand links und rechts am Bildschirmrand */
    }

    /* 2. DAS ZENTRIERTE LOGO RECHTS */
    .main-logo-link {
        height: 60px;
        display: flex;
        align-items: center;
        position: relative;
    }

    .main-logo {
        position: relative !important;
        top: 0 !important; /* JS-Vorgaben für Mobile überschreiben */
        right: 0 !important;
        width: auto !important;
        height: 40px !important; /* Fixe Höhe zentriert in der 80px Bar */
    }

    /* 3. DER BURGER BUTTON (LINKS AUSSEN) */
    .burger-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 6px; /* Abstand zwischen den 3 Linien */
        height: 60px; /* Quadratische, perfekte Touch-Fläche */
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1020;
    }

    .burger-line {
        display: block;
        width: 32px;
        height: 3px;
        background-color: #ffffff; /* Weiße Linien laut Vorgabe */
        border-radius: 2px;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
        transform-origin: center center;
    }

    /* ANIMATION: Burger verwandelt sich in ein Schließen-X */
    .burger-menu-btn.menu-open .burger-line:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .burger-menu-btn.menu-open .burger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .burger-menu-btn.menu-open .burger-line:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* 4. DER VON LINKS REINFAHRENDE DRAWER (GANZE BREITE) */
    .main-navigation {
        position: fixed;
        top: 80px; /* Beginnt exakt unterhalb der Menübar, fährt nicht übers Logo */
        left: 0;
        width: 100%;
        height: calc(100vh - 80px); /* Füllt den restlichen Viewport komplett aus */
        background-color: var(--zellinger-dunkelbraun); /* Gleichbleibendes Farbschema */
        z-index: 1010;
        
        /* Hardware-beschleunigtes Reinfahren von links nach rechts */
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        overflow-y: auto; /* Scrollbar falls Menüpunkte auf kleinen Displays zu lang sind */
    }

    /* Aktiv-Zustand: Menü fährt voll ins Bild */
    .main-navigation.menu-active {
        transform: translateX(0);
    }

    /* 5. MENÜLINKS UNTEREINANDER AUSRICHTEN */
    .main-navigation ul {
        flex-direction: column;
        width: 100%;
        line-height: 28px; 
        padding: 32px 30px; /* Um 20% kompakteres Gesamt-Padding oben/unten (von 40px) */
        box-sizing: border-box;
    }

    .main-navigation li {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 16px; /* Um 20% reduzierter Zeilenabstand (von 20px) */
        border-bottom: 1px solid rgba(226, 209, 186, 0.1); /* Hauchdünne Trennlinie in Beige */
        padding-bottom: 12px; /* Um 20% kompakteres Innen-Padding (von 15px) */
    }
    
    .main-navigation li:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .main-navigation a {
        font-size: 20px; /* Leicht erhöht für perfekte Lesbarkeit auf Touch-Geräten */
        width: 100%;
        display: block;
        padding: 4px 0; /* Um 20% reduziertes Klick-Padding (von 5px) */
    }

    /* Desktop Hover-Unterlinie auf Mobile deaktivieren, um optische Artefakte zu verhindern */
    .main-navigation a::after {
        display: none !important;
    }
    
    /* Schlichter, edler Farbwechsel beim Tap auf Mobile */
    .main-navigation a:active,
    .main-navigation a:hover {
        color: var(--zellinger-beige);
    }
}

@media screen and (max-width: 1499px) {
    
    .header-flex-container {
        padding: 0;
    }
}


/* ==========================================================================
   CONTENT
   ========================================================================== */

section {
    scroll-margin-top: 160px;
    padding: 160px 0 160px 0;
}

/* Hero-Sektion-Setup */
#area-hero {
    height: 100vh;
    min-height: 400px;
    background-image: url('graphics/zellinger-oesterreichische-feinkost-fleischhauerei-background-main.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

/* Wrapper-Erweiterung für die vertikale Höhen-Ausrichtung */
.hero-wrapper {
    height: 100%;
}

/* Linksbündiger, leicht nach unten versetzter Textblock */
.area-head-textblock {
    position: absolute;
    top: calc(50% + 70px); /* Schiebt das Element exakt 70px weiter nach unten */
    left: 0;
    transform: translateY(-50%);
    max-width: 1000px;
}

.area-head-textblock h1 {
    margin: 0 0 16px 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 80px;
    line-height: 100%;
    color: #ffffff;
    font-weight: bold;
}

.area-head-textblock .h1-subtext {
    margin: 0 0 36px 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 30px;
    line-height: 120%;
    color: #ffffff;
    font-weight: normal;
}

/* Button Container für die Nebeneinander-Ausrichtung */
.hero-btn-group {
    display: flex;
    gap: 30px;
}

/* PRIMÄRER CTA-BUTTON (Mit rotierendem Linien-Effekt, Eckenrundung & Hover Glow) */
.cta-button {
    display: block;
    width: 320px;
    height: 56px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    user-select: none;
    z-index: 1;
    transition: box-shadow 0.4s ease;
}

.cta-button::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg, transparent 0%, transparent 70%, #ffffff 100%);
    animation: rotateGlow 2s linear infinite;
    z-index: 2;
}

.cta-button .btn-text {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: var(--zellinger-beige);
    color: var(--zellinger-dunkelbraun);
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    z-index: 10;
    transition: background-color 1s ease, color 1s ease;
}

.cta-button:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.cta-button:hover .btn-text {
    background-color: var(--zellinger-dunkelbraun);
    color: var(--zellinger-beige);
}

/* SEKUNDÄRER CTA-BUTTON (Weißer Rahmen, Eckenrundung, Hover Glow & Gradient Slide) */
.cta-button-secondary {
    display: block;
    width: 320px;
    height: 56px;
    padding: 13px 0;
    background-color: transparent;
    color: #ffffff;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    text-decoration: none;
    border: 2px solid var(--zellinger-beige);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    user-select: none;
    z-index: 1;
    transition: color 0.6s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.6s ease, box-shadow 0.4s ease;
}

/* Der Füll-Hintergrund mit kombiniertem Slide-, Fade-Effekt und neuem Farbverlauf */
.cta-button-secondary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--zellinger-dunkelbraun) 0%, #BDB09F 100%);
    z-index: -1;
    opacity: 0; /* Startet komplett transparent für den Fade-In-Effekt */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover-Zustand für den zweiten Button */
.cta-button-secondary:hover {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

.cta-button-secondary:hover::before {
    opacity: 1; /* Fadet sanft auf volle Sichtbarkeit auf */
    transform: scaleX(1);
}

/* Die Rotation der primären Button-Linie - absolut zentriert */
@keyframes rotateGlow {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* ==========================================================================
   AREA USP
   ========================================================================== */

/* USP-Sektion-Setup */
#area-usp {
    background-image: url('graphics/zellinger-feinkost-regional-manufaktur-handwerk-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#area-usp h2 {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 52px;
    line-height: 100%;
    color: var(--zellinger-dunkelbraun);
    text-align: center;
    font-weight: bold;
    min-height: 52px; /* Verhindert das Springen des Contents während des Tippens */
}

/* Horizontal zentrierte Trennlinie unter der H2 */
#area-usp .h2-line {
    width: 150px;
    height: 3px;
    background-color: var(--zellinger-dunkelbraun);
    margin: 24px auto 80px auto;
}

/* Flexbox-Wrapper für 100% Breite */
.usp-grid-container {
    display: flex;
    width: 100%;
}

/* Deine strikte Box-Struktur mit Vorbereitung auf den Animation-Zustand */
.area-usp-box-4col {
    flex: 1;
    padding: 0 24px;
    text-align: center;
    border-right: 1px solid rgba(37, 32, 26, 0.4);
    
    /* Ausgangszustand: unsichtbar, verschwommen und nach oben versetzt */
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-40px);
    will-change: transform, opacity, filter;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.2s ease, 
                filter 1.2s ease;
}

/* Gestaffeltes Hereinpurtzeln der Boxen (Stagger-Effekt) */
.area-usp-box-4col:nth-child(1) { transition-delay: 0.1s; }
.area-usp-box-4col:nth-child(2) { transition-delay: 0.3s; }
.area-usp-box-4col:nth-child(3) { transition-delay: 0.5s; }
.area-usp-box-4col:nth-child(4) { transition-delay: 0.7s; }

/* Zielzustand: Wenn die Boxen im Viewport sind */
.area-usp-box-4col.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

/* Die letzte Linie rechts außen entfernen */
.area-usp-box-4col:last-child {
    border-right: none;
}

/* Das Platzhalter-Bild ohne Abstände rundherum */
.area-usp-box-4col-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    margin: 0;
}

.area-usp-box-4col-headline {
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 30px;
    line-height: 110%;
    color: var(--zellinger-dunkelbraun);
    font-weight: bold;
}

.area-usp-box-4col-text {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 22px;
    line-height: 110%;
    color: var(--zellinger-dunkelbraun);
    font-weight: normal;
}


/* ==========================================================================
   AREA PRODUKTE
   ========================================================================== */

#area-produkte {
    background-image: url('graphics/zellinger-regionaler-fleischer-produkte-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#area-produkte h2 {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 52px;
    line-height: 100%;
    color: var(--zellinger-dunkelbraun);
    text-align: center;
    font-weight: bold;
    min-height: 52px; /* Verhindert das Springen des Contents während des Tippens */
}

#area-produkte .h2-line {
    width: 150px;
    height: 3px;
    background-color: var(--zellinger-dunkelbraun);
    margin: 24px auto 40px auto;
}

.h2-einleitung {
    max-width: 70%;
    margin: 0 auto 80px auto; /* 80px Abstand nach unten zum Kachelgrid */
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 30px;
    line-height: 110%;
    color: var(--zellinger-dunkelbraun);
    font-weight: normal; /* Regular */
    text-align: center;
}

/* Das 4-spaltige CSS-Grid mit 18px Gap */
.produkte-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    width: 100%;
    
    /* Ausgangszustand vor dem Scroll-Eintritt */
    opacity: 0;
    filter: blur(8px);
    transform: translateX(-360px); /* Startet leicht nach links versetzt */
    will-change: transform, opacity, filter;
}

/* Große Box: Belegt 2 Spalten und erstreckt sich über 2 Reihen nach unten */
.area-produkte-box-2col {
    grid-column: span 2;
    grid-row: span 2; /* Nimmt die Höhe von zwei kleinen Kacheln plus Gap ein */
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 36px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    border-radius: 6px;
    z-index: 1;
}

/* Kleine Boxen: Belegen jeweils 1 Spalte und bleiben perfekt quadratisch */
.area-produkte-box-4col {
    grid-column: span 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 36px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    aspect-ratio: 1 / 1; /* Erzwingt die perfekte Quadratform */
    border-radius: 6px;
    z-index: 1;
}

/* DIE CTA-KACHEL (Mit permanentem, diagonalem Schimmer-Effekt alle 5s) */
.produkte-grid-cta-box {
    grid-column: span 1;
    display: flex;
    align-items: center;      /* Vertikale Zentrierung */
    justify-content: center;  /* Horizontale Zentrierung */
    padding: 36px;
    background-color: var(--zellinger-beige);
    text-decoration: none;
    aspect-ratio: 1 / 1;      /* Perfekt quadratisch analog zu den anderen 4col-Boxen */
    border-radius: 6px;
    position: relative;       /* Wichtig für die Positionierung des Schimmers */
    overflow: hidden;         /* Schneidet den heraufragenden Schimmer sauber ab */
    z-index: 1;
    transition: background-color 1s ease, box-shadow 1s ease;
}

/* Das Schimmer-Pseudo-Element (fährt diagonal durch die Box) */
.produkte-grid-cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;              /* Startet komplett außerhalb links */
    width: 100%;
    height: 100%;
    /* Ein eleganter, farblich perfekt abgestimmter, weicher weiß-beiger Glanzstreifen */
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg); /* Erzeugt den edlen diagonalen Winkel */
    z-index: 2;               /* Liegt über dem Hintergrund */
    animation: diagonalShimmer 4s infinite linear;
}

/* Der zentrierte Text innerhalb der CTA-Kachel */
.produkte-grid-cta-box-text {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 40px;
    line-height: 110%;
    color: var(--zellinger-dunkelbraun);
    text-align: center;
    font-weight: bold;
    position: relative;       /* Verhindert, dass der Text vom Schimmer überlagert wird */
    z-index: 3;               /* Immer ganz oben aufliegend */
    transition: color 1s ease;
}

/* Hover-Zustand: Sanfte Invertierung aller Farben & weißer Glow-Effekt */
.produkte-grid-cta-box:hover {
    background-color: var(--zellinger-dunkelbraun);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.6);
}

.produkte-grid-cta-box:hover .produkte-grid-cta-box-text {
    color: var(--zellinger-beige);
}

/* Wenn die Box dunkelbraun gehovert wird, passen wir den Schimmer farblich an, damit er edel bleibt */
.produkte-grid-cta-box:hover::before {
    background: linear-gradient(
        90deg, 
        rgba(226, 209, 186, 0) 0%, 
        rgba(226, 209, 186, 0.2) 50%, 
        rgba(226, 209, 186, 0) 100%
    );
}

/* Das vollflächige Hintergrundbild mit Zoom-Effekt */
.area-produkte-box-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -2;
}

/* Ein dezenter, dunkler Overlay-Schleier im Hintergrund für optimale Lesbarkeit */
.area-produkte-box-2col::before,
.area-produkte-box-4col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(37, 32, 26, 0.85) 0%, rgba(37, 32, 26, 0.2) 60%, rgba(37, 32, 26, 0) 100%);
    z-index: -1;
}

/* Die Headlines */
.area-produkte-box-2col-headline {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 60px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: bold;
}

.area-produkte-box-4col-headline {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 48px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: bold;
}

/* Hover-Effekt: Exakt ca. 5% reingezoomt */
.area-produkte-box-2col:hover .area-produkte-box-image,
.area-produkte-box-4col:hover .area-produkte-box-image {
    transform: scale(1.05);
}

/* ==========================================================================
   ANIMATIONS Definitions
   ========================================================================== */
@keyframes diagonalShimmer {
    0% {
        left: -150%;
    }
    /* Der eigentliche Durchlauf dauert ca. 1.5 Sekunden, danach wartet er unsichtbar */
    30% {
        left: 150%;
    }
    100% {
        left: 150%;
    }
}

/* ==========================================================================
   AREA UEBER UNS
   ========================================================================== */

#area-ueber-uns {
    background-color: var(--zellinger-dunkelbraun);
}

#area-ueber-uns h2 {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 52px;
    line-height: 100%;
    color: var(--zellinger-beige);
    text-align: center;
    font-weight: bold;
    min-height: 52px;
}

#area-ueber-uns .h2-line {
    width: 150px;
    height: 3px;
    background-color: var(--zellinger-beige);
    margin: 24px auto 40px auto;
}

#area-ueber-uns .h2-einleitung {
    color: var(--zellinger-beige);
}

/* Container für das Zeilen-Layout */
.area-ueber-uns-flexbox-2col {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 60px;
}

/* Einzelne Zeile als eigenständiges Grid mit 30px Spaltenabstand */
.area-ueber-uns-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center; /* Richtet Text und Bild vertikal zentriert aus */
    margin-bottom: 60px; /* Vertikaler Abstand zwischen den Zeilen */
    width: 100%;
}

.area-ueber-uns-row:last-child {
    margin-bottom: 0; /* Letzte Zeile benötigt keinen Außenabstand unten */
}

/* Bilder-Styling ohne Hover-Effekt und Verlinkung */
.area-ueber-uns-flexbox-col-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

/* Reiner Text-Container ohne Hintergründe */
.area-ueber-uns-flexbox-col-textblock {
    display: flex;
    flex-direction: column;
    background: none !important;
    padding: 0;
}

/* Formatierung der Spalten-Überschriften */
.area-ueber-uns-flexbox-col-headline {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 40px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: bold;
    margin-bottom: 20px;
}

/* Formatierung der Fließtexte */
.area-ueber-uns-flexbox-col-text {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 22px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: normal;
}

/* ==========================================================================
   AREA NEWS (Inkl. Endlos-Slider & Skalierten Pfeilen)
   ========================================================================== */

#area-news {
    background-image: url('graphics/zellinger-feinkost-regional-manufaktur-handwerk-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#area-news h2 {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 52px;
    line-height: 100%;
    color: var(--zellinger-dunkelbraun);
    text-align: center;
    font-weight: bold;
    min-height: 52px;
}

/* Horizontal zentrierte Trennlinie unter der H2 */
#area-news .h2-line {
    width: 150px;
    height: 3px;
    background-color: var(--zellinger-dunkelbraun);
    margin: 24px auto 40px auto;
}

.news-slider-mobile-nav { display: none; }

/* Neuer Zentrierungs-Rahmen auf Content-Höhe */
.news-slider-outer {
    position: relative;
    width: 100%;
    margin-top: 60px;
}

.news-slider-container {
width: auto;
    position: relative;
    overflow: hidden; /* Maskiert die durchfahrenden Slides sauber */
    
    /* Die echte Lösung ohne Trickserei: 30px Luft für den Schatten */
    margin: -30px;
    padding: 30px;
}

.news-slider-track {
    display: flex;
    gap: 50px;
    width: 100%;
    /* Die Höhe wird jetzt sanft mitanimiert */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), height 0.4s ease;
    will-change: transform, height;
}

.area-news-row {
    flex: 0 0 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    box-sizing: border-box;
	
	opacity: 0; 
    filter: blur(10px); /* Startet unscharf */
    transform: translateY(-35px); /* Startet 35px weiter oben, um nach unten zu sinken */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, filter, transform;
}

.area-news-row.is-visible {
    opacity: 1;
    filter: blur(0); /* Schärfe schlägt voll ein */
    transform: translateY(0); /* Raste auf Normalposition ein */
}

.area-news-flexbox-col-textblock {
    display: flex;
    flex-direction: column;
    background: none;
    padding: 0;
}

.area-news-subheadline {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 18px;
    line-height: 100%;
    color: var(--zellinger-dunkelbraun);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    font-weight: bold;
}

.area-news-headline {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 40px;
    line-height: 110%;
    color: var(--zellinger-dunkelbraun);
    font-weight: bold;
    margin-bottom: 20px;
}

.area-news-text {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 22px;
    line-height: 110%;
    color: var(--zellinger-dunkelbraun);
    font-weight: normal;
}

.area-news-flexbox-col-image {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
	background-color: #FFFFFF;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.area-news-cta {
    display: inline-block;
    align-self: flex-start;
    margin-top: 30px;
    padding: 12px 30px;
    background-color: var(--zellinger-dunkelbraun);
    color: var(--zellinger-beige);
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.area-news-cta:hover {
    background-color: var(--zellinger-beige);
    color: var(--zellinger-dunkelbraun);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

/* Navigationspfeile (Größe und präzise Transformationen) */
.news-slider-arrow {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    outline: none;
}

/* Pfeile exakt 40% breiter und doppelt so hoch verzerren */
.arrow-left {
    left: -70px;
    transform: translateY(-50%) scale(1.4, 2);
}

.arrow-right {
    right: -70px;
    transform: translateY(-50%) scale(1.4, 2);
}

.news-slider-arrow::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-top: 2px solid var(--zellinger-dunkelbraun);
    border-left: 2px solid var(--zellinger-dunkelbraun);
    transition: opacity 0.3s ease;
    opacity: 0.3;
}

.news-slider-arrow:hover::before {
    opacity: 1;
}

.arrow-left::before {
    transform: rotate(-45deg);
}

.arrow-right::before {
    transform: rotate(135deg);
}

/* ==========================================================================
   AREA AKTIONEN
   ========================================================================== */

#area-aktionen {
    background-image: url('graphics/zellinger-regionaler-fleischer-produkte-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#area-aktionen h2 {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 52px;
    line-height: 100%;
    color: var(--zellinger-dunkelbraun);
    text-align: center;
    font-weight: bold;
    min-height: 52px; /* Verhindert das Springen des Contents während des Tippens */
}

#area-aktionen .h2-line {
    width: 150px;
    height: 3px;
    background-color: var(--zellinger-dunkelbraun);
    margin: 24px auto 80px auto;
}

/* Flexibler Abstandshalter zwischen den Balken */
.spacing-60 {
    width: 100%;
    height: 60px;
}

.area-aktionen-vertikal-bar {
    width: 100%;
    height: 300px;
    /* Der schwarze Layer mit 40% Deckkraft (rgba 0,0,0,0.4) liegt VOR dem WebP-Bild */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
        url('graphics/zellinger-oesterreichische-feinkost-fleischhauerei-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px 20px 20px 10px; /* Integriert sich links weich, rechts bündig zum Button */
    display: flex;
    position: relative;
    
    /* Der Fireworks-Schlagschatten: 0 Versatz X, 0 Versatz Y, 20px Blur, 25% Deckkraft */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
    
    /* Animation-Setup: Startet weit außerhalb des linken Bildschirmrands */
    opacity: 0;
    transform: translateX(-150vw);
    will-change: transform, opacity;
}

/* Linksbündiger, vertikal zentrierter Textblock */
.area-aktionen-vertikal-bar-textblock {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 40px;
    z-index: 3;
}

.area-aktionen-vertikal-bar-textblock-headline {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 40px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: bold;
    margin-bottom: 20px;
}

.area-aktionen-vertikal-bar-textblock-text {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 24px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: normal; /* Regular */
}

/* Das freigestellte Produkt-Bild rechts im dunklen Balkenbereich */
.area-aktionen-vertikal-bar-image {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    pointer-events: none; /* Text bleibt klickbar, falls das Bild leicht überlappt */
    z-index: 2;
}

/* Der integrierte PDF-Download-Button auf der rechten Seite */
.area-aktionen-vertikal-bar-button {
    width: 270px;
    height: auto;
    background-color: var(--zellinger-beige);
    
    /* Text-Formatierung direkt im Element deklariert */
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 36px;
    line-height: 110%;
    font-weight: bold;
    color: var(--zellinger-dunkelbraun);
    text-decoration: none;
    
    /* Absolute Zentrierung des Contents */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    
    /* Eckenrundungen rechts oben und rechts unten */
    border-radius: 0 10px 10px 0;
    
    z-index: 4;
    transition: background-color 1s ease, color 1s ease;
}

/* Invertierungs-Hover für den Aktionsbutton */
.area-aktionen-vertikal-bar-button:hover {
    background-color: var(--zellinger-dunkelbraun);
    color: var(--var--zellinger-beige); /* Fällt automatisch auf das helle Brand-Beige zurück */
    color: #e2d1ba; /* Fallback zur Variable falls nötig */
}


/* ==========================================================================
   AREA FILIALEN
   ========================================================================== */

#area-filialen {
    background-image: url('graphics/zellinger-oesterreichische-feinkost-fleischhauerei-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

#area-filialen h2 {
    margin: 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 52px;
    line-height: 100%;
    color: var(--zellinger-beige);
    text-align: center;
    font-weight: bold;
    min-height: 52px;
}

#area-filialen .h2-line {
    width: 150px;
    height: 3px;
    background-color: var(--zellinger-beige);
    margin: 24px auto 40px auto;
}

#area-filialen .h2-einleitung {
    color: var(--zellinger-beige);
}

/* Das Haupt-Grid teilt die Sektion in 2 Hälften (50% Bild, 50% Einträge) */
.filialen-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    width: 100%;
    align-items: start; /* ÄNDERUNG: Verhindert, dass das Bild auf die Höhe der rechten Spalte gestreckt wird */
}

/* Linker Bild-Container: Höhe passt sich nun automatisch an das Bild an */
.filialen-main-image-wrapper {
    width: 100%;
    height: auto; /* ÄNDERUNG: Automatische Höhe basierend auf der Breite */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
}

.filialen-main-image {
    width: 100%;
    height: auto; /* ÄNDERUNG: Das Bild behält sein natürliches Seitenverhältnis */
    display: block;
}

/* Rechtes Unter-Grid: Stapelt die 4 reinen Textkarten vertikal mit Gap */
.filialen-cards-grid {
    display: grid;
    grid-template-columns: 1fr; /* Einspaltig untereinander */
    gap: 30px; /* Garantiert den Abstand zwischen den Einträgen */
    width: 100%;
}

/* Die Basis-Kachel (Reiner Text-Container) */
.area-filialen-flexbox-2col {
    display: flex;
    background-color: var(--zellinger-beige);
    border-radius: 6px;
    overflow: hidden;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.45);
    
    /* Ausgangszustand für die Animation */
    opacity: 0;
    transform: translateY(-80px);
    will-change: transform, opacity;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1.5s ease;
}

/* Zielzustand für die Animation */
.area-filialen-flexbox-2col.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Text-Wrapper nutzt die vollen 100% Breite der Kachel */
.area-filialen-text-wrapper {
    width: 100%;
    padding: 40px 45px; /* Großzügiges Padding für eine edle Wirkung */
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

/* Die Filial-Überschrift */
.area-filialen-flexbox-2col-filiale {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 40px;
    line-height: 110%;
    font-weight: bold;
    color: var(--zellinger-dunkelbraun);
    margin-bottom: 15px;
}

/* Der Fließtext inkl. Öffnungszeiten */
.area-filialen-flexbox-2col-text {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 24px; /* Wieder auf die ursprüngliche Lesegröße angehoben */
    line-height: 120%;
    font-weight: normal;
    color: var(--zellinger-dunkelbraun);
}

.area-filialen-flexbox-2col-text strong {
    font-weight: bold;
}


/* ==========================================================================
   AREA JOBS
   ========================================================================== */

#area-jobs {
    background-image: url('graphics/zellinger-regionaler-fleischer-produkte-background.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Da global keine Abstände definiert sind, ist dieser Bereich bündig */
}

/* 2-spaltiges Grid, gleich große Spalten, 60px Gap */
.jobs-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start; /* Richtet den Inhalt oben aus */
    width: 100%;
}

/* --- LINKER BEREICH --- */
.area-jobs-content-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Linksbündig */
}

.h2-intro {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 24px;
    line-height: 100%;
    color: var(--zellinger-dunkelbraun);
    text-transform: uppercase;
    letter-spacing: 0.3em; /* Laufweite AV 300 = 0.3em */
    margin-bottom: 40px;
    font-weight: bold;
}

/* H2 angepasst auf linksbündig und Typowriter-Vorbereitung */
.area-jobs-content-left h2 {
    margin: 0 0 40px 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 52px;
    line-height: 110%; /* Leicht angepasst für den Umbruch */
    color: var(--zellinger-dunkelbraun);
    text-align: left;
    font-weight: bold;
    min-height: 114px; /* Verhindert das Springen bei 2 Zeilen Umbruch */
}

/* H2-Einleitung angepasst auf linksbündig */
.area-jobs-content-left .h2-einleitung {
    max-width: 100%; /* Nutzt die volle Breite der linken Spalte */
    margin: 0 0 80px 0;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 30px;
    line-height: 110%;
    color: var(--zellinger-dunkelbraun);
    font-weight: normal;
    text-align: left;
}

/* INVERTIERTER CTA-BUTTON (Mit rotierendem Linien-Effekt, Eckenrundung & Hover Glow) */
.cta-button-inverted {
    display: block;
    width: 320px;
    height: 56px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    user-select: none;
    z-index: 1;
    transition: box-shadow 0.4s ease;
}

/* Der rotierende Lichtstreifen - Läuft im Grundzustand mit Dunkelbraun */
.cta-button-inverted::before {
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg, transparent 0%, transparent 70%, var(--zellinger-dunkelbraun) 100%);
    animation: rotateGlow 2s linear infinite; /* Nutzt das global definierte Keyframe */
    z-index: 2;
}

/* Das innere Textfeld - Farben exakt getauscht zum Original */
.cta-button-inverted .btn-text {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: var(--zellinger-dunkelbraun); /* Startzustand: Dunkelbraun */
    color: var(--zellinger-beige);            /* Startzustand: Beige */
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-weight: bold;
    font-size: 24px;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    z-index: 10;
    transition: background-color 1s ease, color 1s ease;
}

/* Hover-Effekt: Dunkler, edler Glow nach außen */
.cta-button-inverted:hover {
    box-shadow: 0 0 20px rgba(37, 32, 26, 0.4);
}

/* Hover-Effekt Textfeld: Invertiert zurück auf Beige/Dunkelbraun */
.cta-button-inverted:hover .btn-text {
    background-color: var(--zellinger-beige);
    color: var(--zellinger-dunkelbraun);
}

/* --- RECHTER BEREICH --- */
.area-jobs-content-right {
    display: flex;
    flex-direction: column;
}

.spacing-30 {
    height: 30px;
    width: 100%;
}

/* Dynamischer PHP-Link-Container: Hebelt das blaue Standard-Browser-Styling komplett aus */
.area-jobs-content-jobbox-link,
.area-jobs-content-jobbox-link:visited {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    outline: none;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Interaktives Feedback beim Hovern: 5% größer skalieren samt Inhalt */
.area-jobs-content-jobbox-link:hover {
    transform: scale(1.02);
}

.area-jobs-content-jobbox {
    background-color: var(--zellinger-dunkelbraun);
    padding: 36px;
    border-radius: 6px;
    display: flex;
    align-items: flex-start; /* Bild und Text oben bündig */
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Dezenter Grundschatten */
    will-change: box-shadow;
    transition: box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Wenn der Link gehovert wird, bekommt die innere Box den exakten 15% schwarzen Schatten */
.area-jobs-content-jobbox-link:hover .area-jobs-content-jobbox {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.area-jobs-content-jobbox-image {
    width: 160px;
    height: 160px;
    object-fit: contain; /* Bild wird eingepasst, nicht verzerrt */
    margin-right: 30px;
    flex-shrink: 0; /* Bild darf nicht gestaucht werden */
}

.area-jobs-content-jobbox-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.area-jobs-content-jobbox-jobtitel {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 30px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: bold;
    padding-top: 20px;
    padding-bottom: 12px;
}

.area-jobs-content-jobbox-jobbeschreibung {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 22px;
    line-height: 110%;
    color: var(--zellinger-beige);
    font-weight: normal; /* Regular */
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

#area-footer {
    background-color: var(--zellinger-dunkelbraun);
    color: #ffffff;
    padding: 60px 0 20px 0;
}

.footer-contact h3 {
    margin: 0 0 5px 0; /* Leichtes Margin nach unten spendiert, damit es nicht am Text klebt */
    color: #ffffff;
}

.footer-contact p {
    margin: 0 0 16px 0 !important; /* Etwas Luft zwischen den Absätzen */
	font-size: 18px;
}

.footer-contact p:last-of-type {
    margin-bottom: 0 !important; /* Der letzte Absatz braucht keinen Abstand nach unten */
}

/* --- Globale Link-Regeln für den gesamten Footer --- */
#area-footer a,
#area-footer a:visited {
    color: currentColor !important;        /* Übernimmt exakt die Textfarbe der jeweiligen Umgebung */
    text-decoration: underline !important; /* Erzwingt die Unterlinie im Grundzustand */
    transition: text-decoration 0.3s ease;
}

#area-footer a:hover {
    text-decoration: none !important;      /* Lässt die Unterlinie beim Hovern verschwinden */
}

/* --- Spezifische Footer-Zonen --- */

/* Bereich oben (Weißer Text) */
.footer-contact {
    color: #ffffff;
}

/* Bereich unten (Grauer Text) */
.footer-bottom {
    margin-top: 40px;
    margin-bottom: 120px;
    border-top: 1px solid #222222;
    padding-top: 20px;
    font-size: 14px;
    color: #888888;
}

/* ==========================================================================
   COOKIE BAR (Zellinger Design Edition)
   ========================================================================== */

#cookie_box {
    display: none; /* Wird per JS eingeblendet */
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease-in-out;
    width: calc(100% - 40px);
    max-width: 800px;
    background-color: var(--zellinger-beige); /* Zellinger Beige als Hintergrund */
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 2000;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid rgba(37, 32, 26, 0.1);
}

#cookie_box_icon {
    float: right;
    width: 74px;
    height: 84px;
    margin-left: 20px;
}

#cookie_box_headline {
    font-family: 'Linux Libertine', Arial, sans-serif; /* Zellinger Font */
    font-weight: normal;
    font-size: 24px;
    line-height: 100%;
    color: var(--zellinger-dunkelbraun); /* Dunkelbraune Schrift */
    margin-bottom: 12px;
}

#cookie_box_headline strong {
    font-weight: bold;
}

#cookie_box_text {
    font-family: 'Linux Libertine', Arial, sans-serif; /* Zellinger Font */
    font-weight: normal;
    font-size: 16px;
    line-height: 1.3;
    color: var(--zellinger-dunkelbraun);
    margin-bottom: 16px;
}

#cookie_box_text strong {
    font-weight: bold;
}

.cookie_box_button_container {
    display: flex;
    gap: 10px;
}

.cookie_box_button {
    flex: 1;
    height: 42px; /* Leicht erhöht für bessere Klickbarkeit */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-weight: bold;
    font-size: 17px;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius: 4px;
}

/* Dezentere Optik für den Ablehnen-Button */
#cookie_reject {
    background-color: transparent;
    border: 1px solid var(--zellinger-dunkelbraun);
    color: var(--zellinger-dunkelbraun);
}

#cookie_reject:hover {
    background-color: rgba(37, 32, 26, 0.05);
}

/* Klarer Fokus auf den Akzeptieren-Button */
#cookie_accept {
    background-color: var(--zellinger-dunkelbraun);
    color: var(--zellinger-beige);
}

#cookie_accept:hover {
    background-color: #1a1612;
}

@media screen and (max-width: 600px) {
    #cookie_box {
        bottom: 20px;
        padding: 16px;
    }
    .cookie_box_button_container {
        flex-direction: column;
    }
    #cookie_box_headline {
        font-size: 18px;
        margin-bottom: 8px;
    }
    #cookie_box_icon {
        display: none; 
    }
    #cookie_box_text {
        font-size: 14px;
        margin-bottom: 16px;
    }
    .cookie_box_button {
        height: 32px;
        font-size: 15px;
		line-height: 32px;
    }
    .cookie_box_button_container {
        gap: 8px;
    }
}

/* ==========================================================================
   PRODUKTE KACHELN - HOVER TEXT REVEAL (NEU)
   ========================================================================== */

/* Wrapper für die gemeinsame Animation von Headline und Text */
.produkte-box-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

/* Dunkles Overlay mit Verlauf (oben 20%, unten 80%), das beim Hovern einblendet */
.area-produkte-box-2col::after,
.area-produkte-box-4col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(37, 32, 26, 0.2) 0%, rgba(37, 32, 26, 0.8) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.area-produkte-box-2col:hover::after,
.area-produkte-box-4col:hover::after {
    opacity: 1;
}

/* Die Formatierung der neuen Fließtexte (versteckt im Startzustand) */
.produkte-box-text {
    font-family: 'Linux Libertine', Arial, sans-serif;
    font-size: 18px;
    line-height: 120%;
    color: var(--zellinger-beige);
    margin: 0;
    
    /* Animations-Setup */
    opacity: 0;
    max-height: 0; 
	overflow: hidden;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Der Trigger: Fährt den Text stufenlos aus und schiebt die Headline hoch */
.area-produkte-box-2col:hover .produkte-box-text,
.area-produkte-box-4col:hover .produkte-box-text {
    opacity: 1;
    max-height: 400px;
    margin-top: 18px;
    transform: translateY(0);
}

/* ==========================================================================
   MEDIA QUERY: (max-width: 1800px)
   ========================================================================== */
@media screen and (max-width: 1800px) {
    
    /* Text dauerhaft einblenden UND den Hover-Zustand überschreiben, damit nichts mehr zuckt */
    .produkte-box-text,
    .area-produkte-box-2col:hover .produkte-box-text,
    .area-produkte-box-4col:hover .produkte-box-text {
        opacity: 1;
        max-height: none;
        overflow: visible;
        transform: translateY(0);
        margin-top: 12px;
    }

    /* Das dunkle Overlay permanent aktivieren (mit deinem neuen Verlauf) */
    .area-produkte-box-2col::after,
    .area-produkte-box-4col::after {
        opacity: 1;
        background: linear-gradient(to bottom, rgba(37, 32, 26, 0.2) 0%, rgba(37, 32, 26, 0.8) 100%);
    }
    
    /* Zwingendes Aufheben der quadratischen Form, deine eingestellten Höhen beibehalten */
    .area-produkte-box-2col {
        aspect-ratio: auto !important;
        min-height: 480px !important;
    }
    
    .area-produkte-box-4col,
    .produkte-grid-cta-box {
        aspect-ratio: auto !important;
        min-height: 380px !important;
    }

    /* Produkte-Kacheln splitten sich bereits ab 1800px auf 2 Spalten auf */
    .produkte-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   MEDIA QUERY: TABLETS (max-width: 1700px)
   ========================================================================== */
@media screen and (max-width: 1700px) {
    .area-produkte-box-2col-headline {
        font-size: 48px;
    }

    .area-produkte-box-4col-headline {
        font-size: 38px;
    }

    .produkte-grid-cta-box-text {
        font-size: 32px;
    }

    .area-aktionen-vertikal-bar-textblock-headline {
        font-size: 37px;
        margin-bottom: 18px;
    }

    .area-aktionen-vertikal-bar-textblock-text {
        font-size: 20px;
    }
}

/* ==========================================================================
   MEDIA QUERY: TABLETS (max-width: 1400px)
   ========================================================================== */
@media screen and (max-width: 1400px) {
    .area-produkte-box-2col-headline {
        font-size: 40px;
    }

    .area-produkte-box-4col-headline {
        font-size: 30px;
    }

    .produkte-grid-cta-box-text {
        font-size: 24px;
    }
    
    .arrow-left {
        left: -60px;
    }

    .arrow-right {
        right: -60px;
    }

    .area-aktionen-vertikal-bar-textblock-headline {
        font-size: 34px;
        margin-bottom: 16px;
    }

    .area-aktionen-vertikal-bar-textblock-text {
        font-size: 18px;
    }

    .area-aktionen-vertikal-bar-button {
        font-size: 32px;
        width: 240px;
    }

    .area-jobs-content-left .h2-einleitung {
        font-size: 26px;
    }
}

/* ==========================================================================
   MEDIA QUERY: TABLETS (max-width: 1300px)
   ========================================================================== */
@media screen and (max-width: 1300px) {
    .area-aktionen-vertikal-bar-textblock-headline {
        font-size: 30px;
        margin-bottom: 14px;
    }

    .area-aktionen-vertikal-bar-button {
        font-size: 26px;
        width: 170px;
    }
}

/* ==========================================================================
   MEDIA QUERY: TABLETS (max-width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Layout */
    .main-wrapper {
        width: 90%;
    }

    section {
        padding: 100px 0;
        scroll-margin-top: 100px;
    }

    /* Typografie global verkleinern */
    .area-head-textblock h1 {
        font-size: 56px;
    }

    .area-head-textblock .h1-subtext {
        font-size: 24px;
    }

    #area-usp h2, 
    #area-produkte h2, 
    #area-ueber-uns h2,  
    #area-news h2, 
    #area-aktionen h2, 
    #area-filialen h2, 
    .area-jobs-content-left h2 {
        font-size: 42px;
        min-height: auto;
    }

    .h2-einleitung, 
    .area-jobs-content-left .h2-einleitung {
        font-size: 24px;
        max-width: 90%;
        margin-bottom: 50px;
    }

    .area-usp-box-4col-headline {
        font-size: 26px;
    }

    /* .area-news-headline verhält sich ab jetzt exakt wie die Ueber-Uns-Headline */
    .area-usp-box-4col-headline, 
    .area-ueber-uns-flexbox-col-headline, 
    .area-news-headline, 
    .area-jobs-content-jobbox-jobtitel {
        font-size: 30px;
    }

    /* .area-news-text verhält sich ab jetzt exakt wie der Ueber-Uns-Text */
    .area-usp-box-4col-text, 
    .area-ueber-uns-flexbox-col-text, 
    .area-news-text, 
    .area-jobs-content-jobbox-beschreibung {
        font-size: 18px;
    }

    /* Hero Buttons */
    .area-head-textblock {
        top: calc(50% + 40px);
        max-width: 100%;
    }

    .hero-btn-group {
        gap: 20px;
    }

    .cta-button, 
    .cta-button-secondary, 
    .cta-button-inverted {
        width: 260px;
        height: 50px;
        font-size: 20px;
    }

    .cta-button-secondary {
        padding: 11px 0;
    }

    .cta-button .btn-text {
        font-size: 20px;
    }
    
    .area-jobs-content-left .h2-einleitung {
        font-size: 22px;
    }

    /* USP Grid splittet sich auf 2x2 auf */
    .usp-grid-container {
        flex-wrap: wrap;
    }

    .area-usp-box-4col {
        flex: calc(50% - 20px);
        min-width: calc(50% - 20px);
        margin-bottom: 40px;
        border-right: none;
    }

    .area-usp-box-4col:nth-child(odd) {
        border-right: 1px solid rgba(37, 32, 26, 0.2);
    }

    .area-usp-box-4col:nth-last-child(-n+2) {
        margin-bottom: 0;
    }

    /* Produkte-Kacheln */
    .area-produkte-box-2col {
        min-height: 400px;
    }

    .area-produkte-box-2col-headline {
        font-size: 48px;
    }

    .area-produkte-box-4col-headline {
        font-size: 38px;
    }

    .produkte-grid-cta-box-text {
        font-size: 32px;
    }
    
    .arrow-left {
        left: -45px;
    }

    .arrow-right {
        right: -45px;
    }

    /* Aktionen: Bild verkleinern, Button schrumpfen */
    .area-aktionen-vertikal-bar {
        height: auto;
        min-height: 240px;
    }

    .area-aktionen-vertikal-bar-textblock-headline {
        font-size: 27px;
        margin-bottom: 12px;
    }

    .area-aktionen-vertikal-bar-textblock-text {
        font-size: 17px;
    }

    .area-aktionen-vertikal-bar-image {
        max-height: 240px;
        width: auto;
    }

    .area-aktionen-vertikal-bar-button {
        width: 200px;
        font-size: 26px;
    }

    /* Filialen brechen untereinander auf */
    .filialen-grid-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .area-filialen-text-wrapper {
        padding: 40px 30px;
    }

    .area-filialen-flexbox-2col-filiale {
        font-size: 32px;
    }

    .area-filialen-flexbox-2col-text {
        font-size: 20px;
    }

    /* Jobs */
    .jobs-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .area-jobs-content-left {
        align-items: center;
        text-align: center;
    }

    .area-jobs-content-left h2, 
    .area-jobs-content-left .h2-einleitung {
        text-align: center;
        min-height: auto;
    }

    .area-jobs-content-left .h2-einleitung {
        margin-bottom: 40px;
    }

    .area-jobs-content-jobbox-jobtitel {
        font-size: 26px;
    }
}

/* ==========================================================================
   MEDIA QUERY: (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
    /* Über uns - Mobil-Stack */
    .area-ueber-uns-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 40px;
    }

    .area-ueber-uns-row .area-ueber-uns-flexbox-col-image {
        order: 1 !important;
    }

    .area-ueber-uns-row .area-ueber-uns-flexbox-col-textblock {
        order: 2 !important;
    }

    /* News - Slider Mobil-Stack ab 992px (Bild oben, Text unten) */
    .area-news-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px;
        margin-bottom: 0 !important;
    }

    .area-news-row .area-news-flexbox-col-image {
        order: 1 !important;
		margin-bottom: 20px;
    }

    .area-news-row .area-news-flexbox-col-textblock {
        order: 2 !important;
    }

    .area-news-cta {
        width: 100%;
        text-align: center;
        margin-top: 20px;
    }
	
	.news-slider-track {
        align-items: flex-start !important;
    }

    /* Desktop-Pfeile radikal ausblenden */
    .news-slider-arrow {
        display: none !important;
    }

    /* Die neue mobile Navigations-Zeile aktivieren */
    .news-slider-mobile-nav {
        display: flex !important;
        position: absolute; /* Löst die Tasten aus dem normalen Fluss */
        left: 0;
        width: 100%;
        gap: 15px;
        margin-top: 0 !important;
        z-index: 20;
        box-sizing: border-box;
        /* Die Tasten gleiten sanft mit, falls Bilder unterschiedlich hoch sind */
        transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    }

    /* Braune mobile Taten - exakt gleich hoch wie der CTA-Button */
    .news-mobile-arrow-btn {
        flex: 1;
        height: 49px;
        background-color: var(--zellinger-dunkelbraun);
        border: none;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease-out;
    }

    .news-mobile-arrow-btn span {
        color: var(--zellinger-beige);
        font-size: 24px;
        /* Line-height auf 0 zwingt den Browser, die Textbox-Unterlängen zu ignorieren */
        line-height: 0;
        /* Zieht den Pfeil visuell exakt in die vertikale Mitte */
        margin-top: -5px;
        display: inline-block;
    }

    /* Invertierter Hover-Effekt analog zum CTA */
    .news-mobile-arrow-btn:hover {
        background-color: var(--zellinger-beige);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    }

    .news-mobile-arrow-btn:hover span {
        color: var(--zellinger-dunkelbraun);
    }
	
	.news-mobile-arrow-btn:active {
        /* Skaliert den Button blitzschnell auf 97% herunter */
        transform: scale(0.97);
        /* Optional: Schatten beim Klick leicht komprimieren für mehr Tiefe */
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    }

    /* Filialen stauchen */
    .filialen-grid-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   MEDIA QUERY: (max-width: 950px)
   ========================================================================== */
@media (max-width: 950px) {
    .produkte-box-text {
        font-size: 17px;
    }
    
    .area-aktionen-vertikal-bar {
        flex-direction: row;
        flex-wrap: wrap;
        height: auto; 
    }

    .area-aktionen-vertikal-bar-textblock {
        padding: 40px 40px;
        flex: 1;
    }

    .area-aktionen-vertikal-bar-image {
        height: 240px; 
        align-self: flex-end; 
    }

    .area-aktionen-vertikal-bar-button {
        width: 100%;
        height: 56px;
        font-size: 22px;
        border-radius: 0 0 6px 6px; 
        padding: 0;
    }
}

/* ==========================================================================
   MEDIA QUERY: SMARTPHONES (max-width: 600px)
   ========================================================================== */
@media screen and (max-width: 600px) {
    /* Layout */
    .main-wrapper {
        width: 100%;
        padding: 0 15px;
    }

    section {
        padding: 60px 0;
        scroll-margin-top: 80px;
    }

    /* Typografie für Mobilgeräte optimieren */
    .area-head-textblock h1 {
        font-size: 36px;
    }

    .area-head-textblock .h1-subtext {
        font-size: 18px;
        margin-bottom: 24px;
    }

    #area-usp h2, 
    #area-produkte h2, 
    #area-ueber-uns h2, 
    #area-news h2,
    #area-aktionen h2, 
    #area-filialen h2, 
    .area-jobs-content-left h2 {
        font-size: 28px;
    }

    .h2-einleitung, 
    .area-jobs-content-left .h2-einleitung {
        font-size: 18px;
        max-width: 100%;
        margin-bottom: 40px;
    }

    #area-usp .h2-line, 
    #area-produkte .h2-line, 
    #area-ueber-uns .h2-line, 
    #area-news .h2-line, 
    #area-aktionen .h2-line, 
    #area-filialen .h2-line {
        margin-bottom: 40px;
    }

    .area-usp-box-4col-headline, 
    .area-ueber-uns-flexbox-col-headline, 
    .area-news-headline,
    .area-jobs-content-jobbox-jobtitel {
        font-size: 22px;
    }

    .area-usp-box-4col-text, 
    .area-ueber-uns-flexbox-col-text, 
    .area-news-text,
    .area-jobs-content-jobbox-jobbeschreibung, 
    .area-filialen-flexbox-2col-text {
        font-size: 16px;
    }

    .h2-intro {
        font-size: 16px;
        margin-bottom: 20px;
    }

    /* Hero Buttons untereinander stapeln & Absolute Positionierung korrigieren */
    .area-head-textblock {
        top: 55%;
        left: 15px;
        right: 15px;
        max-width: calc(100% - 30px);
    }

    .hero-btn-group {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: center;
    }

    .cta-button, 
    .cta-button-secondary, 
    .cta-button-inverted {
        width: 100%;
        max-width: 330px;
    }

    /* USP-Boxen komplett untereinander */
    .area-usp-box-4col {
        flex: 100%;
        min-width: 100%;
        margin-bottom: 30px;
        padding: 0;
        border-right: none !important;
    }

    .area-usp-box-4col-image {
        height: 140px;
    }

    /* Produkte komplett einspaltig stapeln */
    .produkte-grid-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .produkte-grid-cta-box {
        min-height: 150px !important;
    }

    .area-produkte-box-2col, 
    .area-produkte-box-4col, 
    .produkte-grid-cta-box {
        grid-column: span 1 / span 1 !important;
        grid-row: span 1 / span 1 !important;
        aspect-ratio: 1.4 / 1;
        min-height: 200px;
        padding: 20px;
    }

    .area-produkte-box-2col-headline, 
    .area-produkte-box-4col-headline {
        font-size: 26px;
    }

    .produkte-grid-cta-box-text {
        font-size: 24px;
    }
	
	.area-news-row .area-news-flexbox-col-image {
        order: 1 !important;
        margin-bottom: 80px !important; /* <--- WICHTIG: Platzhalter für die Buttons! */
    }
	
	.news-slider-outer {
        overflow: visible !important; 
    }

    .news-slider-container {
        /* Dehnt die Box nach links und rechts um exakt die 15px des .main-wrappers aus.
           Die Box schließt nun exakt bündig mit dem Handydisplay ab = Kein Scrollen! */
        margin: -30px -15px -30px -15px !important;
        
        /* Schiebt den Inhalt (Bild/Text/Button) exakt wieder auf die Ursprungslinie zurück */
        padding: 30px 15px 30px 15px !important;
        
        /* Versteckt die anderen Slides, lässt dem Schatten aber die 15px Puffer zum Leuchten */
        overflow: hidden !important; 
    }
    
    /* Ab hier schalten wir für Smartphones auf den echten, zentrierten vertikalen Stack um */
    .area-aktionen-vertikal-bar {
        flex-direction: column;
        border-radius: 6px;
    }

    .area-aktionen-vertikal-bar-textblock {
        padding: 24px 20px;
        text-align: center;
    }

    .area-aktionen-vertikal-bar-textblock-headline {
        font-size: 24px;
    }

    .area-aktionen-vertikal-bar-image {
        align-self: flex-end;
        max-height: 200px;
    }

    .spacing-60 {
        height: 30px;
    }

    /* Filialen-Layout stapeln (Bild oben, Text unten) */
    .area-filialen-flexbox-2col {
        flex-direction: column;
    }

    .area-filialen-flexbox-2col-image {
        width: 100%;
        min-height: 200px;
        height: 200px;
    }

    .area-filialen-text-wrapper {
        width: 100%;
        padding: 24px 20px;
        text-align: center;
    }

    .area-filialen-flexbox-2col-filiale {
        font-size: 24px;
    }

    /* Jobs Layout anpassen */
    .area-jobs-content-jobbox {
        flex-direction: column;
        padding: 24px;
        text-align: center;
        align-items: center;
    }

    .area-jobs-content-jobbox-image {
        margin-right: 0;
        margin-bottom: 20px;
        width: 120px;
        height: 120px;
    }

    .area-jobs-content-jobbox-jobtitel {
        padding-top: 0;
    }

    /* Footer kompakt */
    #area-footer {
        padding: 40px 0 20px 0;
        text-align: center;
    }

    .footer-contact p {
        font-size: 16px;
    }

    .footer-bottom {
        margin-top: 30px;
        margin-bottom: 40px;
        padding-top: 15px;
    }
}