/* Bembé – bembe-buehnenfarbe.css · erzeugt 2026-10-14 aus style.css + responsive.css · ersetzt die alte style.css + responsive.css */
/* ================================================================
   BEMBÉ PARKETT – Sektion "Studio- & Bühnenfarbe"
   Stand: v11 */
/* --- Sektion ------------------------------------------------- */
#top .sbf-block .entry-content-wrapper {
    padding-left: 0;
    padding-right: 0;
}
#top .sbf-block .av_one_full,
#top .sbf-block .av_one_half {
    margin-bottom: 0;
}
/* Zierstrich neben den Überschriften ausblenden */
#top .sbf-block .special-heading-border {
    display: none !important;
}
/* --- Kopfbereich --------------------------------------------- */
#top .sbf-block .sbf-kicker {
    margin-bottom: 10px;
}
#top .sbf-block .sbf-kicker p {
    margin: 0;
    color: var(--melon-yellow,#f49800);
    font-size: var(--bembe-eyebrow-size, 16px);
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: none;
}
#top .sbf-block .sbf-headline {
    margin-bottom: 26px;
}
#top .sbf-block .sbf-headline h2 {
    margin: 0;
}
#top .sbf-block .sbf-intro {
    margin-bottom: 0;
}
#top .sbf-block .sbf-intro p {
    margin: 0;
}
/* --- Hero-Bild (rechte Spalte, oben) ------------------------- */
#top .sbf-block .sbf-hero-img {
    margin: 0 0 50px;
}
#top .sbf-block .sbf-hero-img .avia-image-container-inner,
#top .sbf-block .sbf-hero-img .avia_image {
    width: 100%;
}
#top .sbf-block .sbf-hero-img img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}
/* --- Produktbild (linke Spalte, unten) ----------------------- */
#top .sbf-block .sbf-produktbild {
    margin: 40px 0 0;
}
#top .sbf-block .sbf-produktbild img {
    max-height: 620px;
    width: auto;
    margin: 0 auto;
    display: block;
}
/* --- Vorteilsliste ------------------------------------------- */
#top .sbf-block .sbf-subhead {
    margin: 0 0 28px;
}
#top .sbf-block .sbf-subhead h3 {
    margin: 0;
}
#top .sbf-vorteilsliste {
    margin: 0;
}
#top .sbf-vorteilsliste .iconlist-timeline {
    display: none !important;
}
#top .sbf-vorteilsliste li:first-child {
    padding-top: 0 !important;
}
#top .sbf-vorteilsliste li:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
}
#top .sbf-vorteilsliste .iconlist_icon {
    position: static !important;
    flex: 0 0 28px;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--melon-yellow,#f49800) !important;
    font-size: 17px !important;
    text-align: left;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}
#top .sbf-vorteilsliste .iconlist_content_wrap {
    flex: 1 1 auto;
    min-height: 0 !important;
    padding: 0 0 0 12px !important;
    margin: 0 !important;
}
#top .sbf-vorteilsliste .iconlist-char,
#top .sbf-vorteilsliste .entry-content-header {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
#top .sbf-vorteilsliste .iconlist_title {
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--dark-grey,#333);
    margin: 0 !important;
    padding: 0 !important;
}
#top .sbf-vorteilsliste .iconlist_content {
    display: none;
}
/* --- Reiter / Tags -------------------------------------------- */
/* HINWEIS: Die Reiter im Textblock brauchen die Klasse sbf-tag:
   <span class="sbf-tag">Wasserbasierte Rezeptur</span>
   Ohne Klasse entfernt der WordPress-Editor die span-Tags beim
   Wechsel vom Reiter "Text" auf "Visuell".                       */
#top .sbf-block .sbf-tags {
    margin-top: 30px;
}
#top .sbf-block .sbf-tags p {
    margin: 0;
    line-height: 1;
}
#top .sbf-block .sbf-tags .sbf-tag,
#top .sbf-block .sbf-tags p > span {
    display: inline-block;
    margin: 0 7px 8px 0;
    padding: 6px 15px;
    border: 1px solid var(--middle-grey,#e0d7cf);
    border-radius: 24px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--grey,#666);
    background: #fff;
}
/* --- CTA-Box -------------------------------------------------- */
#top .sbf-block .sbf-cta {
    margin-top: 70px;
    padding: 38px 45px !important;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
#top .sbf-block .sbf-cta .avia-promocontent {
    flex: 1 1 auto;
}
#top .sbf-block .sbf-cta .avia-button-wrap {
    flex: 0 0 auto;
    margin: 0 !important;
    float: none !important;
}
#top .sbf-block .sbf-cta h3 {
    color: #fff;
    margin: 0 0 14px;
    font-size: 24px;
}
#top .sbf-block .sbf-cta p {
    color: var(--light-grey,#f3efec);
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}
#top .sbf-block .sbf-cta strong {
    color: #fff;
}
/* --- Tablet --------------------------------------------------- */
@media only screen and (max-width: 989px) {
    #top .sbf-block .sbf-hero-img {
        margin-bottom: 40px;
    }
    #top .sbf-block .sbf-produktbild img {
        max-height: 460px;
    }
    #top .sbf-block .sbf-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        padding: 30px 28px !important;
    }
}
/* --- Mobil ---------------------------------------------------- */
/* REIHENFOLGE ANPASSEN: nur die Zahlen hinter "order" tauschen.
   Kleinere Zahl = weiter oben. Aktuell:
   1 Hero-Bild, 2 Kicker, 3 Überschrift, 4 Fließtext, */
@media only screen and (max-width: 767px) {
    /* Der Präfix .responsive ist notwendig: Enfold setzt die Spalten
       über .responsive #top .flex_column auf display:block. Ohne den
       Präfix hat unsere Regel dieselbe Spezifität und verliert. */
    .responsive #top .sbf-block .entry-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Spalten auflösen, damit ihre Inhalte einzeln sortierbar sind */
    .responsive #top .sbf-block .flex_column.av_one_half {
        display: contents !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }
    .responsive #top .sbf-block .sbf-hero-img {
        order: 1;
        margin: 0 0 30px;
    }
    .responsive #top .sbf-block .sbf-kicker {
        order: 2;
    }
    .responsive #top .sbf-block .sbf-headline {
        order: 3;
    }
    .responsive #top .sbf-block .sbf-intro {
        order: 4;
    }
    .responsive #top .sbf-block .sbf-produktbild {
        order: 5;
        margin: 35px 0 40px;
    }
    .responsive #top .sbf-block .sbf-subhead {
        order: 6;
    }
    .responsive #top .sbf-block .sbf-vorteilsliste {
        order: 7;
    }
    .responsive #top .sbf-block .sbf-tags {
        order: 8;
    }
    .responsive #top .sbf-block .flex_column.av_one_full {
        order: 9;
    }
    #top .sbf-block .sbf-produktbild img {
        max-height: 340px;
    }
    #top .sbf-block .sbf-cta {
        margin-top: 45px;
    }
}