/* =========================================================
   WORDPRESS LAYOUT-RESET
========================================================== */

/* Standard-Padding der Group-Blöcke entfernen.
   Padding wird gezielt über die pb-Klassen gesetzt. */
:root :where(.wp-block-group) {
    padding-top: 0;
    padding-bottom: 0;
}

.wp-site-blocks {
    padding-top: 0;
}

/* =========================================================
   SERVICEBAR
   Schmale Info-Leiste über dem Header.
========================================================== */

.pb-servicebar {
    width: 100%;
    background: var(--wp--preset--color--secondary);
    color: #ffffff;
    font-size: 0.9rem;
}

.pb-servicebar__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 24px;
    /* display:flex / justify-content kommen aus dem
       Gutenberg-Layout (type:flex, space-between). */
}

.pb-servicebar__left,
.pb-servicebar__right {
    margin: 0;
}

/* =========================================================
   HEADER
========================================================== */

.pb-header {
    background: #ffffff;
    border-bottom: 1px solid #d8dee5;

    /* Sticky-Verhalten — falls nicht gewünscht,
       die folgenden drei Zeilen entfernen. */
    position: sticky;
    top: 0;
    z-index: 100;
}

.pb-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px 24px;
    gap: 32px;
    /* display:flex / justify-content kommen aus dem
       Gutenberg-Layout (type:flex, space-between). */
}

/* ---------- Brand (Logo + Site-Title) ---------- */

.pb-header__brand {
    gap: 12px;
    /* Drängt Nav + CTA als Block nach rechts.
       Auto-Margin gewinnt gegenüber justify-content:space-between. */
    margin-right: auto;
}

.pb-header__brand .wp-block-site-logo {
    line-height: 0;
}

.pb-header__brand .wp-block-site-title {
    margin: 0;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--secondary);
}

.pb-header__brand .wp-block-site-title a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Navigation ---------- */

.pb-header__nav {
    /* WordPress-Block-Gap-Variable überschreiben,
       damit der Abstand zwischen Menüpunkten passt. */
    --wp--style--block-gap: 28px;
    font-weight: 600;
}

/* ---------- Submenu-Indikator-Icons ---------- */
/* Ersetzt das WordPress-Default-Chevron durch eigene SVGs.
   Funktioniert in beiden Modi (open-on-hover und open-on-click).
   Im Click-Modus wechselt das Icon automatisch über
   [aria-expanded="true"], das WordPress selbst setzt. */

.pb-header__nav .wp-block-navigation__submenu-icon svg {
    display: none;
}

.pb-header__nav .wp-block-navigation__submenu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0;
    background-color: currentColor;
    vertical-align: middle;

    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.99 10.889-3.988 3.418-3.988-3.418.976-1.14 3.012 2.582 3.012-2.581.976 1.139Z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.99 10.889-3.988 3.418-3.988-3.418.976-1.14 3.012 2.582 3.012-2.581.976 1.139Z"/></svg>');

    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
}

/* Up-Icon: Submenü ist aufgeklappt.
   Greift sowohl wenn das Icon selbst aria-expanded trägt
   (Button-Variante), als auch wenn ein Eltern-Element es trägt
   (Hover-Variante mit Toggle-Button). */
.pb-header__nav .wp-block-navigation__submenu-icon[aria-expanded="true"],
.pb-header__nav [aria-expanded="true"] > .wp-block-navigation__submenu-icon,
.pb-header__nav [aria-expanded="true"] .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.99 13.167-3.988-3.418-3.988 3.418.976 1.14 3.012-2.582 3.012 2.581.976-1.139Z"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.99 13.167-3.988-3.418-3.988 3.418.976 1.14 3.012-2.582 3.012 2.581.976-1.139Z"/></svg>');
}

/* ---------- CTA-Button ---------- */

.pb-header__cta {
    margin: 0;
}

.pb-header__cta .wp-block-button__link {
    padding: 10px 18px;
    font-weight: 700;
}

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

@media (max-width: 900px) {
    .pb-header__inner {
        gap: 16px;
    }
}

@media (max-width: 560px) {
    .pb-servicebar__inner,
    .pb-header__inner {
        padding-left: 18px;
        padding-right: 18px;
    }
}