/* PARALLAX & HERO STYLES */

/* Hero OHNE Gradient - nur Container */
header {
    background: transparent;
    /* KEIN Gradient hier - kommt vom ::before */
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Parallax-fähiger Verlauf-Overlay - PRODUKTABHÄNGIG */
header::before {
    content: '';
    position: fixed;
    /* FIXED: Aber mit Parallax-Transform */
    top: -50vh;
    /* ERWEITERT NACH OBEN: Verlauf startet höher */
    left: 0;
    width: 100%;
    height: 150vh;
    /* GRÖSSERE HÖHE: Genug Platz für Parallax ohne weiße Ränder */
    background: radial-gradient(ellipse 140% 100% at center 70%, #9D714F 0%, #6B3E26 35%, #50290F 65%, #2A1508 90%, #1A0D04 100%);
    /* Standard: Braune Bowl-Farben */
    z-index: -1;
    /* Hinter allen anderen Elementen */
    will-change: transform;
    transform: translateY(var(--gradient-offset, 0px));
    /* CSS Variable für Parallax */
    transition: background 1.5s cubic-bezier(0.4, 0, 0.2, 1);
    /* SMOOTH Übergang */
}

/* PRODUKTSPEZIFISCHE HEADER-VERLÄUFE */
header[data-current-product="bagel"]::before {
    background: radial-gradient(ellipse 140% 100% at center 70%, #fccedd 0%, #f0c3be 25%, #f198a6 50%, #FF69B4 75%, #FF1493 100%) !important;
}

header[data-current-product="panini"]::before {
    background: radial-gradient(ellipse 140% 100% at center 70%, #F5F5DC 0%, #DEB887 30%, #CD853F 70%, #A0522D 90%, #8B4513 100%) !important;
}

header[data-current-product="matcha"]::before {
    background: radial-gradient(ellipse 140% 100% at center 70%, #ccfbcc 0%, #b3f8b3 25%, #76f576 50%, #32CD32 75%, #228B22 100%) !important;
}

.hero-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Zentrales Bowl-PNG - FIXED mit mehr Abstand nach unten */
.center-drink {
    position: fixed;
    /* FIXED verhindert das Mitscrolln mit Header */
    z-index: 5;
    left: 50%;
    bottom: calc(-30% - 120px);
    /* HÖHER: war 200px, jetzt 120px */
    transform: translateX(-50%);
    /* Nur horizontale Zentrierung */
    will-change: transform;
}

.center-drink img {
    width: 1260px !important;
    height: 2016px !important;
    object-fit: contain;
}

/* RAUCH-ANIMATION - CANVAS-BASIERT und nah an der Bowl */
.smoke {
    position: absolute;
    /* RELATIV zur Bowl */
    left: 50%;
    top: 5%;
    /* AM OBEREN RAND der Bowl für Rauch-Effekt */
    transform: translateX(-50%);
    z-index: 6;
    /* Über dem Bowl-Bild */
    pointer-events: none;
    width: 480px;
    /* VIERMAL SO BREIT: 120px × 4 = 480px */
    height: 600px;
    /* VIEL HÖHER: Für längeren Rauch */
}

#bowl-smoke-canvas {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    /* Deutlich sichtbarer */
    mix-blend-mode: screen;
    /* Wie auf der Index-Seite */
}

/* Dekorative Bagels */
.coffee-bean {
    position: fixed;
    z-index: 2;
}

.coffee-bean.left {
    left: 8%;
    top: 45%;
    /* WEITER RUNTER: war 35% - Cashewnüsse noch weiter unten */
    transform: rotate(-15deg);
}

.coffee-bean.right {
    right: 8%;
    top: 25%;
    /* Weiter unten: war 5% */
    transform: rotate(25deg);
}

.coffee-bean img {
    width: clamp(120px, 15vw, 200px);
    height: auto;
    opacity: 1;
    /* VOLLE SICHTBARKEIT: war 0.9 */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    /* SCHLAGSCHATTEN hinzugefügt */
}

/* "We Love Coffee" Typography */
.hero-text {
    position: fixed;
    z-index: 1;
    top: 45%;
    /* WEITER NACH OBEN: war 55%, zurück zu 35% */
    transform: translateY(-50%);
    width: 20%;
    /* SCHMALER: Näher zur Mitte */
}

.hero-text.left {
    left: 12%;
    /* NÄHER ZUR MITTE: war 10% */
    text-align: left;
}

.hero-text.right {
    right: 12%;
    /* NÄHER ZUR MITTE: war 10% */
    text-align: right;
}

.hero-title {
    font-size: clamp(2.2rem, 3.5vw, 4.5rem);
    /* KLEINER: war 2.5rem bis 5.0rem */
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    /* KEINE GROSSBUCHSTABEN - wir machen das manuell */
    line-height: 1.2;
    margin: 0;
    color: white;
    /* KEIN Schatten bei den Texten */
}

/* ========== UNTERBROCHENE VERTIKALE LINIEN SYSTEM ========== */

/* LINKE SEITE - Oberer Teil der unterbrochenen Linie */
.left-line-top {
    position: fixed;
    left: 50px;
    width: 1px;
    background-color: white;
    z-index: 4;
    top: 10%;
    height: 30vh;
    /* Kürzer für bessere Lücke */
}

/* LINKE SEITE - Unterer Teil der unterbrochenen Linie */
.left-line-bottom {
    position: fixed;
    left: 50px;
    width: 1px;
    background-color: white;
    z-index: 4;
    bottom: 10%;
    height: 30vh;
    /* Kürzer für bessere Lücke */
}

/* RECHTE SEITE - Oberer Teil der unterbrochenen Linie */
.right-line-top {
    position: fixed;
    right: 50px;
    width: 1px;
    background-color: white;
    z-index: 4;
    top: 10%;
    height: 30vh;
    /* Kürzer für bessere Lücke */
}

/* RECHTE SEITE - Unterer Teil der unterbrochenen Linie */
.right-line-bottom {
    position: fixed;
    right: 50px;
    width: 1px;
    background-color: white;
    z-index: 4;
    bottom: 10%;
    height: 30vh;
    /* Kürzer für bessere Lücke */
}

/* ========== SCROLL TEXT IN DER LINIENLÜCKE ========== */

.scroll-text-left {
    position: fixed;
    left: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: white;
    font-size: clamp(8px, 1.2vw, 12px);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.9;
    z-index: 5;
    /* Über den Linien */
    white-space: nowrap;
}

.scroll-text-right {
    position: fixed;
    right: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: white;
    font-size: clamp(8px, 1.2vw, 12px);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.9;
    z-index: 5;
    /* Über den Linien */
    white-space: nowrap;
}

/* SOCIAL MEDIA ICONS UNTEN LINKS - KLEINER */
.social-icons {
    position: fixed;
    bottom: 40px;
    left: 20px;
    z-index: 15;
    display: flex;
    flex-direction: row;
    /* NEBENEINANDER statt vertikal */
    gap: 8px;
    /* NOCH WENIGER ABSTAND: war 10px */
}

.social-icons a {
    color: white;
    font-size: 18px;
    /* KLEINER: war 20px */
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.social-icons a:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* ==================== RESPONSIVE STYLES ==================== */

/* DESKTOP - Konsistente Bildgröße ab 769px */
@media screen and (min-width: 769px) {
    .center-drink {
        bottom: calc(-30% - 120px) !important;
        /* NOCH WENIGER nach unten - 80px höher als vorher */
    }

    .center-drink img {
        width: 700px !important;
        height: 1120px !important;
        /* KLEINER: war 900px × 1440px, jetzt kleiner */
    }

    /* RAUCH für Desktop */
    .smoke {
        top: 8% !important;
        /* Etwas höher auf Desktop */
        width: 350px !important;
        /* Proportional kleiner */
        height: 450px !important;
        /* Proportional kleiner */
    }
}

/* TABLET UND MOBILE - Logo kleiner */
@media screen and (max-width: 1024px) {
    .logo {
        width: clamp(120px, 15vw, 180px) !important;
        /* KLEINER: war größer */
    }
}

/* TABLET - Spezifische Anpassungen für 769px - 1024px */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    /* "WE LOVE COFFEE" TEXTE - weiter runter für Tablet */
    .hero-text {
        top: 50% !important;
        /* WEITER RUNTER: für Tablet */
    }

    /* BAGEL BILDER - weiter runter für Tablet */
    .coffee-bean.left {
        top: 50% !important;
        /* WEITER RUNTER: war zu hoch */
    }

    .coffee-bean.right {
        top: 20% !important;
        /* WEITER RUNTER: war zu hoch */
    }

    /* PRODUKTBILD - KLEINER und höher für Tablet */
    .center-drink {
        bottom: calc(-30% - 100px) !important;
        /* NOCH HÖHER für Tablet */
    }

    .center-drink img {
        width: 600px !important;
        height: 960px !important;
        /* NOCH KLEINER für Tablet */
    }

    /* RAUCH für Tablet */
    .smoke {
        top: 10% !important;
        /* Etwas höher für Tablet */
        width: 300px !important;
        /* Kleiner für Tablet */
        height: 400px !important;
        /* Kleiner für Tablet */
    }
}

/* MOBILE - Einfache responsive Anpassungen */
@media screen and (max-width: 768px) {

    /* HORIZONTALES SCROLLEN VERHINDERN */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ALLE CONTAINER dürfen nicht zu breit werden - AUSSER PRODUKTBILD */
    *:not(.center-drink):not(.center-drink img) {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* MAIN CONTENT BEREICHE */
    .main-content,
    .content-section,
    header {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* UNTERBROCHENE LINIEN - kürzer auf mobile */
    .left-line-top,
    .right-line-top {
        height: 30vh !important;
        /* Oberer Teil kürzer */
    }

    .left-line-bottom,
    .right-line-bottom {
        height: 30vh !important;
        /* Unterer Teil kürzer */
    }

    /* PRODUKTBILD POSITIONIERUNG - wird im separaten mobilen Block gehandhabt */

    /* "WE LOVE COFFEE" TEXTE - näher zusammen und weiter oben */
    .hero-text {
        top: 30% !important;
        /* WEITER OBEN: war 45% */
        width: 25% !important;
        /* ETWAS BREITER für mobile */
    }

    .hero-text.left {
        left: 20% !important;
        /* NÄHER ZUR MITTE: war 12% */
    }

    .hero-text.right {
        display: none !important;
        /* RECHTEN TEXT AUSBLENDEN */
    }

    /* LINKER TEXT - über ganze Breite und größer */
    .hero-text.left {
        left: 25% !important;
        /* WEITER NACH RECHTS: war 15%, jetzt 25% */
        width: 70% !important;
        /* GANZE BREITE nutzen */
    }

    .hero-title {
        font-size: clamp(2.8rem, 5vw, 6rem) !important;
        /* GRÖSSER */
    }

    /* BAGEL BILDER - näher zusammen und weiter oben */
    .coffee-bean.left {
        left: 10% !important;
        /* WEITER LINKS aber nicht die Linie berühren */
        top: 20% !important;
        /* WEITER OBEN: war 25% */
    }

    .coffee-bean.right {
        display: none !important;
        /* RECHTES BILD AUSBLENDEN */
    }

    .coffee-bean img {
        width: clamp(100px, 15vw, 150px) !important;
        /* GRÖSSER für mobile */
    }

    /* LOGO noch kleiner für mobile */
    .logo {
        width: clamp(100px, 12vw, 140px) !important;
    }

    /* NAVIGATION ausblenden - Burger Menu zeigen */
    .main-navigation {
        display: none !important;
    }

    /* BURGER MENU wird jetzt in mobile-menu.css gesteuert - keine Überschreibung hier */
}

/* MOBILE HERO PRODUKTBILD - UNTEN RECHTS VERANKERT */
@media screen and (max-width: 768px) {

    /* BILD WENIGER LINKS UND NOCH VIEL WEITER RUNTER */
    .center-drink {
        /* Position: UNTEN LINKS mit FESTEN PIXELN */
        left: auto !important;
        /* WENIGER LINKS: Hälfte zurück nach rechts (war -200px) */
        right: -300px !important;
        /* Entferne right */
        bottom: -1500px !important;
        /* NOCH VIEL WEITER RUNTER: 900px unter Bildschirmrand */
        transform: none !important;
        /* Entferne transform - nur feste Positionierung */
    }

    /* MOBILE BILDGRÖSSE - KOMPLETT SEPARATE KONTROLLE */
    .center-drink img {
        width: 700px !important;
        height: 3200px !important;
        min-width: 700px !important;
        min-height: 3200px !important;
        max-width: none !important;
        max-height: none !important;
        /* MOBILE: Große feste Größe - unabhängig von Desktop - NIEMALS KLEINER */
    }

    /* RAUCH für Mobile - folgt dem Bowl */
    .smoke {
        top: 3% !important;
        /* RELATIV zur Bowl-Oberseite */
        left: 50% !important;
        /* ZENTRIERT relativ zur Bowl */
        transform: translateX(-50%) !important;
        /* ZENTRIERT */
        width: 250px !important;
        /* Kleiner für Mobile */
        height: 350px !important;
        /* Kleiner für Mobile */
    }
}