/* Montserrat wird jetzt LOKAL gehostet und in theme.json als @font-face
   (Variable Font 300-700, latin + latin-ext) registriert.
   Der frueher hier stehende render-blocking Google-Fonts-@import wurde am
   2026-06-01 entfernt (DSGVO + Performance: kein Request mehr an Google). */

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

/* Sticky Header mit Schatten */
.site-header,
header .site-header,
.wp-site-blocks > header .site-header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #f9f9f9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

/* Header-Container auch sticky machen */
header.wp-block-template-part {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

/* Header Navigation Styling */
.site-header .wp-block-navigation {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
}

.site-header .wp-block-navigation a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-header .wp-block-navigation a:hover {
    color: var(--wp--preset--color--akzent);
}

/* ART hervorheben (3. Menüpunkt) - Gold-Akzent */
.site-header .wp-block-navigation-item:nth-child(3) a {
    font-weight: 700;
    color: var(--wp--preset--color--akzent);
}

.site-header .wp-block-navigation-item:nth-child(3) a:hover {
    color: #B8845B;
}

/* Sprachumschalter Styling */
.language-switcher {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}

.language-switcher a {
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.language-switcher a:hover {
    color: var(--wp--preset--color--akzent);
}

/* ===== BODY FONT ===== */
/* Body-Schrift jetzt in theme.json: styles.typography.fontFamily = georgia-serif.
   Dadurch zentral in den Global Styles editierbar; fixt zugleich den zuvor
   toten Slug "georgia-serif" (3x im Content referenziert). */

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

.site-footer {
    font-family: 'Montserrat', sans-serif;
}

.site-footer a {
    color: var(--wp--preset--color--base, #f9f9f9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--wp--preset--color--akzent) !important;
}

/* Newsletter Button */
.site-footer .wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: #f9f9f9;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 28px;
    transition: all 0.2s ease;
}

.site-footer .wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--akzent);
    border-color: var(--wp--preset--color--akzent);
    color: #ffffff !important;
}

/* Social Media Icons */
.site-footer .wp-block-social-links .wp-social-link {
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-footer .wp-block-social-links .wp-social-link:hover {
    transform: scale(1.15);
    opacity: 0.8;
}

/* Separator in Footer */
.site-footer .wp-block-separator {
    opacity: 0.3;
    width: 100%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* PayPal Button */
.site-footer .paypal-donate .wp-block-button__link {
    font-size: 12px;
}

/* Footer mobil: gestapelte Spalten einheitlich mittig statt links/rechts gemischt */
@media (max-width: 781px) {
    .site-footer .wp-block-column {
        text-align: center;
    }
    .site-footer .wp-block-column .wp-block-buttons {
        justify-content: center;
    }
    .site-footer .wp-block-column .has-text-align-right {
        text-align: center !important;
    }
}

/* purpurflow CTA-Raster: Button je Karte unten am Kartenboden (zentriert via Markup) */
.pf-cta .wp-block-column {
    display: flex;
    flex-direction: column;
}
.pf-cta .wp-block-column .wp-block-buttons {
    margin-top: auto;
}

/* ===== FOCUS/ACTIVE STATES ENTFERNEN - KEIN SCHWARZER/GOLDENER KASTEN ===== */

/* Alle Focus-Outlines im Navigation entfernen */
.wp-block-navigation a:focus,
.wp-block-navigation a:focus-visible,
.wp-block-navigation-item a:focus,
.wp-block-navigation-item a:focus-visible,
.wp-block-navigation__responsive-container a:focus,
.wp-block-navigation__responsive-container a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Active State auch clean */
.wp-block-navigation a:active,
.wp-block-navigation-item a:active,
.wp-block-navigation__responsive-container a:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* WordPress Default Focus-Visible Override */
.wp-block-navigation *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ===== AKTUELLE SEITE HIGHLIGHTEN ===== */

/* Aktive Seite bzw. ART, wenn eine Unterseite aktiv ist. Die Klassen
   current-menu-item / current-menu-ancestor setzt WordPress automatisch,
   weil die Menuepunkte echte Seiten-Links sind (kind:post-type).

   Unterstrich via text-decoration (NICHT ::after): folgt exakt dem Wort,
   bleibt zentriert und kollidiert nicht mit dem ::after-Dropdownpfeil von
   ART (.is-style-art-highlight > a::after, weiter unten). */
.site-header .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation-item.current-menu-ancestor > a {
    color: var(--wp--preset--color--akzent) !important;
    font-weight: 600 !important;
    text-decoration: underline;
    text-decoration-color: var(--wp--preset--color--akzent);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Tablet (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .site-header .wp-block-navigation a {
        font-size: 11px !important;
        letter-spacing: 0.5px !important;
    }

    .site-header .wp-block-navigation {
        gap: 8px !important;
    }

    .language-switcher {
        font-size: 10px !important;
    }
}

/* Small Desktop (1024px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
    .site-header .wp-block-navigation a {
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }
}

/* ===== ART GRID STYLING — am 2026-06-01 ersatzlos entfernt =====
   Die Klassen .art-grid-container / .art-tile / .art-tile-large wurden in
   KEINER Seite (Content, alle Status) und in KEINEM gerenderten HTML
   verwendet (dreifach verifiziert). Die ART-Uebersicht nutzt inline blockGap
   direkt im Block-Markup. Toter Code (~100 Zeilen, davon ~25 !important)
   entfernt -> echte Reduktion ohne jede Optik-Aenderung. */

/* ===== MOBILE HAMBURGER MENU ===== */

/* Hamburger-Button - Standard versteckt */
.hamburger-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10001;
    margin-left: 15px;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #111111;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin: 3px 0;
}

/* Hamburger zu X Animation */
.hamburger-toggle.is-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-toggle.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-toggle.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(249, 249, 249, 0.98);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow-y: auto;
}

.mobile-nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Mobile Nav Content Container */
.mobile-nav-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 20px 30px;
}

/* Close-Button */
.mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.mobile-nav-close span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #111111;
    position: absolute;
    top: 50%;
    left: 50%;
}

.mobile-nav-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-nav-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile Navigation List */
.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.mobile-nav-item {
    margin: 15px 0;
}

.mobile-nav-item > a,
.mobile-nav-item-header > a {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 10px 0;
}

.mobile-nav-item > a:hover,
.mobile-nav-item > a:focus,
.mobile-nav-item-header > a:hover,
.mobile-nav-item-header > a:focus {
    color: var(--wp--preset--color--akzent);
}

/* ART Item hervorgehoben */
.mobile-nav-item.is-art > a,
.mobile-nav-item.is-art .mobile-nav-item-header > a {
    color: var(--wp--preset--color--akzent);
    font-weight: 700;
}

/* Item mit Submenu */
.mobile-nav-item-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Submenu Toggle Button */
.submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid var(--wp--preset--color--akzent);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.3s ease;
}

.submenu-toggle .toggle-icon {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--wp--preset--color--akzent);
    transition: transform 0.3s ease;
}

.mobile-nav-item.submenu-open .submenu-toggle {
    background: var(--wp--preset--color--akzent);
}

.mobile-nav-item.submenu-open .submenu-toggle .toggle-icon {
    border-top-color: #ffffff;
    transform: rotate(180deg);
}

/* Mobile Submenu */
.mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.mobile-submenu-item {
    margin: 8px 0;
}

.mobile-submenu-item a {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #666666;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    padding: 8px 0;
}

.mobile-submenu-item a:hover,
.mobile-submenu-item a:focus {
    color: var(--wp--preset--color--akzent);
}

/* Mobile Language Switcher */
.mobile-language-switcher {
    margin-top: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.mobile-language-switcher .lang-link {
    color: #111111;
    text-decoration: none;
    padding: 5px 10px;
    transition: color 0.2s ease;
}

.mobile-language-switcher .lang-link:hover,
.mobile-language-switcher .lang-link:focus {
    color: var(--wp--preset--color--akzent);
}

.mobile-language-switcher .lang-separator {
    color: #999999;
    margin: 0 5px;
}

/* ===== MOBILE BREAKPOINT ===== */
@media (max-width: 768px) {
    /* Hamburger-Button anzeigen - ganz rechts */
    .hamburger-toggle {
        display: flex;
        margin-left: 10px;
        order: 99 !important;
    }

    /* Desktop-Navigation ausblenden */
    .site-header .wp-block-navigation {
        display: none !important;
    }

    /* Header-Layout anpassen */
    .site-header .alignwide {
        flex-wrap: nowrap;
    }

    /* Sprachumschalter rechts, vor Hamburger */
    .site-header .language-switcher {
        font-size: 11px;
        margin-left: auto;
        order: 98 !important;
    }

    /* Logo auf Mobile etwas kleiner als Desktop, aber so gross wie die
       Header-Hoehe zulaesst (Hamburger-Button bestimmt hier das Minimum). */
    .site-header .wp-block-site-logo img {
        max-width: 60px;
    }
}

/* Kleinere Screens */
@media (max-width: 480px) {
    .mobile-nav-item > a,
    .mobile-nav-item-header > a {
        font-size: 16px;
        letter-spacing: 1.5px;
    }

    .mobile-submenu-item a {
        font-size: 13px;
    }

    .site-header .language-switcher {
        font-size: 10px;
    }

    .site-header .language-switcher p {
        margin: 0;
    }
}

/* ===== DROPDOWN-MENÜ - NUR DESKTOP ===== */
@media (min-width: 769px) {
    /* WordPress Toggle-Button ausblenden */
    .wp-block-navigation-submenu__toggle {
        display: none !important;
    }

    /* Submenu Container */
    .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #ffffff;
        min-width: 200px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        z-index: 10000;
        padding: 10px 0;
    }

    /* Submenu bei Hover anzeigen */
    .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-container {
        display: block;
    }

    /* Goldener Pfeil für ART */
    .wp-block-navigation-submenu.is-style-art-highlight > a::after {
        content: "";
        display: inline-block;
        margin-left: 6px;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid var(--wp--preset--color--akzent);
        vertical-align: middle;
    }

    /* Submenu Items */
    .wp-block-navigation__submenu-container .wp-block-navigation-item a {
        display: block;
        padding: 10px 20px !important;
        color: #111111 !important;
        text-decoration: none;
        font-size: 12px !important;
        letter-spacing: 1px;
        font-weight: 400 !important;
        white-space: nowrap;
    }

    .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
        color: var(--wp--preset--color--akzent) !important;
        background: #f8f8f8;
    }
}


/* =========================================================================
   ART HERO  (Roosegaarde-Stil: zentriertes Serien-Menue ueber Vollbild,
   Hover wechselt das Hintergrundbild per Crossfade)  -- nur Seite /art/
   ========================================================================= */

/* Full-bleed: globales Seiten-Padding fuer den Hero-Container aufheben,
   damit der Hero die volle Breite einnimmt (kein Viewport-Margin -> kein Ueberlauf) */
.entry-content:has(> .art-hero) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.art-hero {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    /* Hoehe = Bildschirm minus (sticky) Header, damit Header + Hero exakt
       eine Bildschirmhoehe ergeben. --art-header-h wird per JS gesetzt. */
    min-height: calc(100svh - var(--art-header-h, 80px));
    overflow: hidden;
    background: #000;
}

/* Weissen Streifen zwischen Hero und Footer entfernen:
   der globale Theme-Block-Abstand (margin-top am Footer) faellt beim
   dunklen Vollbild-Hero sonst als weisse Luecke auf */
.wp-site-blocks:has(.art-hero) > footer {
    margin-top: 0;
}

/* Gestapelte Hintergrundbilder, je Serie eines */
.art-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.art-hero__bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    will-change: opacity;
}
.art-hero__bg-img.is-active {
    opacity: 1;
}

/* Nur AURORA: Ausschnitt etwas nach oben verschoben (Motiv sitzt sonst zu
   tief). Alle anderen Serien bleiben vertikal zentriert. */
.art-hero__bg-img[data-key="aurora"] {
    background-position: center 30%;
}

/* Abdunklung fuer Lesbarkeit der weissen Schrift */
.art-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.42);
    pointer-events: none;
}

/* Zentriertes Menue */
.art-hero__nav {
    position: relative;
    z-index: 2;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12em;
    padding: 6rem 1rem;
    box-sizing: border-box;
}
.art-hero__item {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
    font-weight: 200;
    line-height: 1.18;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    /* Groesse + Sichtbarkeit animieren weich (per JS gesetzt);
       die opacity-Transition (~0.25s) erzeugt das Ausfaden des vorherigen
       Eintrags beim Wechseln */
    transition: font-size 0.25s ease, opacity 0.25s ease;
    will-change: font-size, opacity;
}

/* Statische Kaskade als Fallback ohne JS (oben gross -> unten klein);
   bei aktivem JS uebersteuert art-hero.js die font-size inline. */
.art-hero__item.item-1 { font-size: clamp(2.2rem, 6vw,   4.6rem); }
.art-hero__item.item-2 { font-size: clamp(1.8rem, 5vw,   3.6rem); }
.art-hero__item.item-3 { font-size: clamp(1.5rem, 4vw,   2.9rem); }
.art-hero__item.item-4 { font-size: clamp(1.25rem, 3.3vw, 2.3rem); }
.art-hero__item.item-5 { font-size: clamp(1.05rem, 2.7vw, 1.8rem); }
.art-hero__item.item-6 { font-size: clamp(0.9rem, 2.1vw,  1.4rem); }

/* ---- Mobile / Touch: gestapelte Bilder zum Scrollen, Name mittig aufs Bild
   (Hover-Lupe gibt es ohne Maus nicht) ---- */
.art-hero__mobile {
    display: none;
}
@media (hover: none), (max-width: 781px) {
    .art-hero {
        display: none; /* Hover-Hero nur fuer Maus-Geraete */
    }
    .art-hero__mobile {
        display: block;
        width: 100%;
        margin-top: 0; /* Theme-Block-Abstand zum Header entfernen */
        background: #000;
    }
    .art-hero__card {
        position: relative;
        display: block;
        text-decoration: none;
    }
    .art-hero__card img {
        display: block;
        width: 100%;
        height: auto;
    }
    /* leichte Abdunklung fuer Lesbarkeit des Namens (wie altes ART-Menue) */
    .art-hero__card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.22);
        pointer-events: none;
    }
    .art-hero__card-title {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0 1rem;
        color: #ffffff;
        font-family: var(--wp--preset--font-family--montserrat, "Montserrat", sans-serif);
        font-weight: 300;
        text-transform: uppercase;
        letter-spacing: 0.3em;
        font-size: clamp(1.2rem, 6vw, 2rem);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    }
}




/* ===== SOCIAL-BUTTONS MIT MARKENLOGO (Icons aus dem WordPress-Core-Set) =====
   Das Icon steckt als Maske im ::before und faerbt sich dadurch automatisch
   in der Schriftfarbe des Buttons. Kein SVG im Button-Text -> der Block bleibt
   im Editor gueltig und die Beschriftung normal editierbar.
   Icon-Hoehe 2em = doppelte Schriftgroesse; der Link ist inline-flex, damit das
   hohe Icon sauber zur Textzeile zentriert wird. */
.wp-block-button.is-icon-instagram > .wp-block-button__link,
.wp-block-button.is-icon-youtube > .wp-block-button__link,
.wp-block-button.is-icon-facebook > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
}
.wp-block-button.is-icon-instagram > .wp-block-button__link::before,
.wp-block-button.is-icon-youtube > .wp-block-button__link::before,
.wp-block-button.is-icon-facebook > .wp-block-button__link::before {
    content: "";
    flex: 0 0 auto;
    width: 2em;
    height: 2em;
    margin-right: 0.6em;
    background-color: currentColor;
}
.wp-block-button.is-icon-instagram > .wp-block-button__link::before {
    -webkit-mask: center / 2.4em 2.4em no-repeat url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20focusable='false'%3E%3Cpath%20d='M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673%20c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637%20s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035%20c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052%20s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673%20c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12%20s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035%20c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622%20M12,3%20C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511%20c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711%20c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038%20c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418%20c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185%20C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594%20c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z%20M12,7.378%20c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z%20M12,15%20c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z%20M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08%20s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z'%3E%3C/path%3E%3C/svg%3E");
    mask: center / 2.4em 2.4em no-repeat url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20focusable='false'%3E%3Cpath%20d='M12,4.622c2.403,0,2.688,0.009,3.637,0.052c0.877,0.04,1.354,0.187,1.671,0.31c0.42,0.163,0.72,0.358,1.035,0.673%20c0.315,0.315,0.51,0.615,0.673,1.035c0.123,0.317,0.27,0.794,0.31,1.671c0.043,0.949,0.052,1.234,0.052,3.637%20s-0.009,2.688-0.052,3.637c-0.04,0.877-0.187,1.354-0.31,1.671c-0.163,0.42-0.358,0.72-0.673,1.035%20c-0.315,0.315-0.615,0.51-1.035,0.673c-0.317,0.123-0.794,0.27-1.671,0.31c-0.949,0.043-1.233,0.052-3.637,0.052%20s-2.688-0.009-3.637-0.052c-0.877-0.04-1.354-0.187-1.671-0.31c-0.42-0.163-0.72-0.358-1.035-0.673%20c-0.315-0.315-0.51-0.615-0.673-1.035c-0.123-0.317-0.27-0.794-0.31-1.671C4.631,14.688,4.622,14.403,4.622,12%20s0.009-2.688,0.052-3.637c0.04-0.877,0.187-1.354,0.31-1.671c0.163-0.42,0.358-0.72,0.673-1.035%20c0.315-0.315,0.615-0.51,1.035-0.673c0.317-0.123,0.794-0.27,1.671-0.31C9.312,4.631,9.597,4.622,12,4.622%20M12,3%20C9.556,3,9.249,3.01,8.289,3.054C7.331,3.098,6.677,3.25,6.105,3.472C5.513,3.702,5.011,4.01,4.511,4.511%20c-0.5,0.5-0.808,1.002-1.038,1.594C3.25,6.677,3.098,7.331,3.054,8.289C3.01,9.249,3,9.556,3,12c0,2.444,0.01,2.751,0.054,3.711%20c0.044,0.958,0.196,1.612,0.418,2.185c0.23,0.592,0.538,1.094,1.038,1.594c0.5,0.5,1.002,0.808,1.594,1.038%20c0.572,0.222,1.227,0.375,2.185,0.418C9.249,20.99,9.556,21,12,21s2.751-0.01,3.711-0.054c0.958-0.044,1.612-0.196,2.185-0.418%20c0.592-0.23,1.094-0.538,1.594-1.038c0.5-0.5,0.808-1.002,1.038-1.594c0.222-0.572,0.375-1.227,0.418-2.185%20C20.99,14.751,21,14.444,21,12s-0.01-2.751-0.054-3.711c-0.044-0.958-0.196-1.612-0.418-2.185c-0.23-0.592-0.538-1.094-1.038-1.594%20c-0.5-0.5-1.002-0.808-1.594-1.038c-0.572-0.222-1.227-0.375-2.185-0.418C14.751,3.01,14.444,3,12,3L12,3z%20M12,7.378%20c-2.552,0-4.622,2.069-4.622,4.622S9.448,16.622,12,16.622s4.622-2.069,4.622-4.622S14.552,7.378,12,7.378z%20M12,15%20c-1.657,0-3-1.343-3-3s1.343-3,3-3s3,1.343,3,3S13.657,15,12,15z%20M16.804,6.116c-0.596,0-1.08,0.484-1.08,1.08%20s0.484,1.08,1.08,1.08c0.596,0,1.08-0.484,1.08-1.08S17.401,6.116,16.804,6.116z'%3E%3C/path%3E%3C/svg%3E");
}
/* YouTube: das Motiv fuellt nur 59 % seiner Zeichenflaeche (Instagram 75 %),
   deshalb groessere Box. Die Maskengroessen (Instagram 2.4em, YouTube 2.6em,
   Facebook 2.16em) geben allen drei Logos etwa dieselbe Flaeche. Das
   1px nach oben gleicht den Unterschied zwischen Zeilenmitte und Mitte der
   Grossbuchstaben aus. */
.wp-block-button.is-icon-youtube > .wp-block-button__link::before {
    width: 2.5em;
    height: 2em;
    position: relative;
    top: -1px;
    -webkit-mask: center / 2.6em 2.6em no-repeat url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20focusable='false'%3E%3Cpath%20d='M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202%20h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517%20c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201%20s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517%20C22,9.62,21.8,8.001,21.8,8.001z%20M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z'%3E%3C/path%3E%3C/svg%3E");
    mask: center / 2.6em 2.6em no-repeat url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20focusable='false'%3E%3Cpath%20d='M21.8,8.001c0,0-0.195-1.378-0.795-1.985c-0.76-0.797-1.613-0.801-2.004-0.847c-2.799-0.202-6.997-0.202-6.997-0.202%20h-0.009c0,0-4.198,0-6.997,0.202C4.608,5.216,3.756,5.22,2.995,6.016C2.395,6.623,2.2,8.001,2.2,8.001S2,9.62,2,11.238v1.517%20c0,1.618,0.2,3.237,0.2,3.237s0.195,1.378,0.795,1.985c0.761,0.797,1.76,0.771,2.205,0.855c1.6,0.153,6.8,0.201,6.8,0.201%20s4.203-0.006,7.001-0.209c0.391-0.047,1.243-0.051,2.004-0.847c0.6-0.607,0.795-1.985,0.795-1.985s0.2-1.618,0.2-3.237v-1.517%20C22,9.62,21.8,8.001,21.8,8.001z%20M9.935,14.594l-0.001-5.62l5.404,2.82L9.935,14.594z'%3E%3C/path%3E%3C/svg%3E");
}

/* Facebook: das Motiv fuellt 83 % seiner Zeichenflaeche (Instagram 75 %),
   deshalb kleinere Maskenbox, damit alle drei Logos gleich hoch wirken. */
.wp-block-button.is-icon-facebook > .wp-block-button__link::before {
    -webkit-mask: center / 2.16em 2.16em no-repeat url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20focusable='false'%3E%3Cpath%20d='M12%2C2C6.5%2C2%2C2%2C6.5%2C2%2C12c0%2C5%2C3.7%2C9.1%2C8.4%2C9.9v-7H7.9V12h2.5V9.8c0-2.5%2C1.5-3.9%2C3.8-3.9c1.1%2C0%2C2.2%2C0.2%2C2.2%2C0.2v2.5h-1.3c-1.2%2C0-1.6%2C0.8-1.6%2C1.6V12h2.8L15.9%2C14.9h-2.3v7C18.3%2C21.1%2C22%2C17%2C22%2C12C22%2C6.5%2C17.5%2C2%2C12%2C2z'%3E%3C/path%3E%3C/svg%3E");
    mask: center / 2.16em 2.16em no-repeat url("data:image/svg+xml,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20aria-hidden='true'%20focusable='false'%3E%3Cpath%20d='M12%2C2C6.5%2C2%2C2%2C6.5%2C2%2C12c0%2C5%2C3.7%2C9.1%2C8.4%2C9.9v-7H7.9V12h2.5V9.8c0-2.5%2C1.5-3.9%2C3.8-3.9c1.1%2C0%2C2.2%2C0.2%2C2.2%2C0.2v2.5h-1.3c-1.2%2C0-1.6%2C0.8-1.6%2C1.6V12h2.8L15.9%2C14.9h-2.3v7C18.3%2C21.1%2C22%2C17%2C22%2C12C22%2C6.5%2C17.5%2C2%2C12%2C2z'%3E%3C/path%3E%3C/svg%3E");
}

/* Einstiegskacheln auf /collect-access/: Das Werk wird vollstaendig gezeigt,
   nie beschnitten (Kundenvorgabe und Projektregel). Deshalb ein Bild-Block in
   natuerlicher Proportion statt eines Cover-Blocks mit fester Hoehe; der Button
   liegt darueber, damit die Kachel wirkt wie zuvor. Die Spaltenbreiten stehen
   im Seitenverhaeltnis der Bilder, dadurch sind beide Kacheln gleich hoch. */
.wp-block-column.is-einstieg-kachel {
    position: relative;
}
.wp-block-column.is-einstieg-kachel > .wp-block-image {
    margin-top: 0;
    margin-bottom: 0;
}
.wp-block-column.is-einstieg-kachel > .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}
.wp-block-column.is-einstieg-kachel > .wp-block-buttons {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
/* Beide Kachel-Buttons gleich breit, unabhaengig von der Textlaenge. Wo die
   Kachel schmaler wird, rueckt die Schrift enger, damit der laengere Text
   einzeilig bleibt und beide Buttons auch gleich hoch sind. */
.wp-block-column.is-einstieg-kachel .wp-block-button {
    max-width: 100%;
}
.wp-block-column.is-einstieg-kachel .wp-block-button__link {
    width: 27.5em;
    max-width: 100%;
    justify-content: center;
    text-align: center;
}
@media (max-width: 1100px) {
    .wp-block-column.is-einstieg-kachel .wp-block-button__link {
        font-size: 12px !important;
        letter-spacing: 1px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Social-Buttons gleicher Breite, damit gestapelte Buttons nicht unterschiedlich
   breit untereinander stehen. Mindestbreite in em, damit sie der Schriftgroesse
   folgt. Die Ausrichtung der Gruppe bleibt, wie die Sektion sie vorgibt; auf
   schmalen Schirmen zentriert die Regel weiter unten ohnehin alle Buttons. */
.wp-block-buttons.is-buttons-gleich > .wp-block-button > .wp-block-button__link {
    min-width: 24em;
    max-width: 100%;
    justify-content: center;
}
/* Zusaetzlich fuer Gruppen, die schon auf breiten Schirmen umbrechen (drei
   Buttons): der letzte saehe linksbuendig darunter aus wie ein abgerissener
   Rest, zentriert steht er mittig unter den beiden darueber. */
.wp-block-buttons.is-buttons-mittig {
    justify-content: center;
}

/* ===== SEKTIONSABSTAENDE AUF SCHMALEN SCHIRMEN =====
   Die Sektionen tragen feste Innenabstaende von 60 bis 120 px. Auf einem
   Laptop sind das rund 10 % der Bildschirmhoehe, auf einem Handy mit 667 px
   ein Viertel bis ein Drittel; zwischen zwei Sektionen summiert sich das auf
   bis zu 239 px, also eine halbe Bildschirmlaenge nur Weissraum.
   Deshalb hier gekappt. Die Werte stehen als Inline-Stil in den Seiten,
   daher der Attribut-Selektor und !important. Kommt spaeter ein anderer
   Wert dazu, muss er hier ergaenzt werden. */
@media (max-width: 781px) {
    .entry-content [style*="padding-top:60px"],
    .entry-content [style*="padding-top:70px"],
    .entry-content [style*="padding-top:80px"],
    .entry-content [style*="padding-top:100px"],
    .entry-content [style*="padding-top:120px"] {
        padding-top: 40px !important;
    }
    .entry-content [style*="padding-bottom:60px"],
    .entry-content [style*="padding-bottom:70px"],
    .entry-content [style*="padding-bottom:80px"],
    .entry-content [style*="padding-bottom:100px"],
    .entry-content [style*="padding-bottom:120px"] {
        padding-bottom: 40px !important;
    }
    /* Gestapelte Buttons stehen mittig; linksbuendig wirken sie auf dem
       schmalen Schirm wie an den Rand gerutscht. */
    .entry-content .wp-block-buttons {
        justify-content: center;
    }
    /* Der Spacer, mit dem manche Seiten den Abstand zum Footer setzen, wird
       von der Kappung oben nicht erfasst und bleibt sonst in voller Hoehe
       stehen. */
    .entry-content > .wp-block-group > .wp-block-spacer:last-child {
        height: 20px !important;
    }
    /* Seitliche Abstaende fressen auf 375 px bis zu 160 px Textbreite:
       in der Artist-Talk-Sektion blieben 155 px uebrig, also 41 % des
       Schirms. Deshalb hier ebenfalls gekappt. */
    .entry-content [style*="padding-left:40px"],
    .entry-content [style*="padding-left:60px"],
    .entry-content [style*="padding-left:80px"] {
        padding-left: 20px !important;
    }
    .entry-content [style*="padding-right:40px"],
    .entry-content [style*="padding-right:60px"],
    .entry-content [style*="padding-right:80px"] {
        padding-right: 20px !important;
    }
}

/* ===== SCHIMMERNDE BUTTONS =====
   Ein heller Lichtstreifen wandert langsam ueber den Button. Bewusst dezent
   (kurzer Glanz, lange Pause), damit es edel wirkt und nicht blinkt.
   Klasse "is-schimmer" wird im Editor unter "Erweitert / Zusaetzliche
   CSS-Klasse" am Button gesetzt, der Text bleibt frei editierbar. */
.wp-block-button.is-schimmer > .wp-block-button__link {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.wp-block-button.is-schimmer > .wp-block-button__link::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -70%;
    width: 45%;
    height: 220%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(10deg);
    pointer-events: none;
    animation: dahrendorf-schimmer 5s ease-in-out infinite;
}
@keyframes dahrendorf-schimmer {
    0%        { left: -70%; }
    45%, 100% { left: 130%; }
}
/* Nutzer mit reduzierter Bewegung sehen einen ruhigen Button */
@media (prefers-reduced-motion: reduce) {
    .wp-block-button.is-schimmer > .wp-block-button__link::after {
        animation: none;
        opacity: 0;
    }
}

/* Newsletter-Anmeldung (Synced Pattern "Newsletter-Anmeldung", MailerLite-Formular
   lzcZtF). Inhalt und Felder kommen aus dem MailerLite-Konto der Kundin; hier wird
   nur die Optik an die Seite angeglichen. MailerLite setzt seine Werte ueber
   ID-Selektoren und !important, deshalb hier mit der Anker-ID #newsletter
   und einer Klasse mehr als MailerLite. */
.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper {
    max-width: 560px !important;
    background-color: #f8f8f8 !important;
    border-radius: 0 !important;
}
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody h4,
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody p,
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
    font-family: 'Montserrat', sans-serif !important;
}
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody h4 {
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 1px !important;
    color: #333333 !important;
}
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input {
    border-radius: 0 !important;
}
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button {
    background-color: #B71270 !important;
    border-color: #B71270 !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 300 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}
#newsletter.is-newsletter-anmeldung .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover {
    background-color: #8f0e58 !important;
    border-color: #8f0e58 !important;
}