/* playground styles */
.site { outline: none; }

/* Sticky Header - Transparent Overlay */
header.wp-block-template-part {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

/* WordPress Admin Bar Support */
body.admin-bar header.wp-block-template-part {
    top: 32px; /* Platz für WordPress Admin Bar */
}

/* Mobile Admin Bar Support */
@media screen and (max-width: 782px) {
    body.admin-bar header.wp-block-template-part {
        top: 46px; /* Mobile Admin Bar ist höher */
    }
}

/* Header mit Hintergrund beim Scrollen */
header.wp-block-template-part.scrolled {
    background-color: rgba(26, 26, 26, 0.8); /* Primary Dark mit 60% Deckkraft */
}

/* Content unter Header positionieren - universell für alle Seiten */
main.wp-block-group {
    position: relative;
    z-index: 1;
    padding-top: 100px !important; /* Abstand für das Menü */
}

/* WordPress Admin Bar Support für Content */
body.admin-bar main.wp-block-group {
    padding-top: 132px !important; /* 100px + 32px Admin Bar */
}

/* Mobile Admin Bar Support für Content */
@media screen and (max-width: 782px) {
    body.admin-bar main.wp-block-group {
        padding-top: 146px !important; /* 100px + 46px Mobile Admin Bar */
    }
}

/* Hero-Section: Hintergrund bis oben, Content nach unten */
.wp-block-cover.alignfull {
    margin-top: -100px !important; /* Kompensiert den main padding-top */
    padding-top: 0 !important;
}

/* WordPress Admin Bar Support für Hero */
body.admin-bar .wp-block-cover.alignfull {
    margin-top: -132px !important; /* Kompensiert den main padding-top + Admin Bar */
}

/* Mobile Admin Bar Support für Hero */
@media screen and (max-width: 782px) {
    body.admin-bar .wp-block-cover.alignfull {
        margin-top: -146px !important; /* Kompensiert den main padding-top + Mobile Admin Bar */
    }
}

.wp-block-cover.alignfull .wp-block-cover__inner-container {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
}

/* WordPress Admin Bar Support für Hero-Content */
body.admin-bar .wp-block-cover.alignfull .wp-block-cover__inner-container {
    padding-top: 132px !important; /* 100px + 32px Admin Bar */
}

/* Mobile Admin Bar Support für Hero-Content */
@media screen and (max-width: 782px) {
    body.admin-bar .wp-block-cover.alignfull .wp-block-cover__inner-container {
        padding-top: 146px !important; /* 100px + 46px Mobile Admin Bar */
    }
}

/* YE Hero Left Pattern: Bild links unten ausrichten - NUR für dieses spezifische Pattern */
.ye-hero-left-pattern .wp-block-cover__inner-container {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

.ye-hero-left-pattern .wp-block-columns {
    flex: 1 !important; /* Nutzt verfügbaren Platz */
    align-items: stretch !important; /* Spalten nutzen volle Höhe */
}

.ye-hero-left-pattern .wp-block-columns .wp-block-column:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Bild nach unten schieben */
}

/* Spezifisch nur für das Cover-Element im YE Hero Left Pattern */
.ye-hero-left-pattern .wp-block-columns .wp-block-column:first-child .wp-block-cover {
    width: 100% !important;
    flex-shrink: 0 !important; /* Verhindert, dass das Bild schrumpft */
}