/* Scroll-Container */
.yuga-horizontal-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    overscroll-behavior-x: contain;
    cursor: grab;
}

/* Breite Zeile */
.yuga-scroll-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
}

.yuga-scroll-row > * {
	  /* Desktop / Default */
    min-width: 18rem;
	  flex-shrink: 0;
    max-width: 30rem;
}
/* Mobile Anpassung */
@media (max-width: 768px) {
    .yuga-scroll-row > * {
        min-width: 75vw;  /* 75 % der Bildschirmbreite */
        max-width: 85vw;  /* nie breiter als der Screen */
    }
}
.yuga-scroll-row p {
    white-space: normal;
    overflow-wrap: break-word;
	  word-break: break-word;
}

/* verhindert Yuga-typisches Einquetschen */
.yuga-horizontal-scroll > .wp-block-group {
    max-width: none;
}

.yuga-horizontal-scroll.is-layout-constrained {
    max-width: none !important;
}

.yuga-horizontal-scroll::-webkit-scrollbar {
    height: 11px;
}

.yuga-horizontal-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
}

.yuga-scroll-row > * {
    min-width: 280px; /* Textblöcke werden „Karten“ */
}

.yuga-horizontal-scroll {
    overscroll-behavior-x: contain;
}

.yuga-horizontal-scroll:active {
    cursor: grabbing;
}

.yuga-horizontal-scroll {
    border-bottom: 2px solid rgba(0,0,0,0.15);
}
.yuga-horizontal-scroll {
    overflow-x: scroll;
}

.yuga-horizontal-scroll {
    cursor: grab;
}

.yuga-horizontal-scroll:active {
    cursor: grabbing;
}

.yuga-horizontal-scroll {
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;

    padding-left: 1.5rem;
    padding-right: 1.5rem;

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 1.5rem,
        black calc(100% - 1.5rem),
        transparent 100%
    );
}

/* Sticky Header – mobil kompatibel */
header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 1000;

    background-color: #fafaef;
}

/* Erzwinge Burger-Menü auf Handys – auch im Landscape-Modus */
@media (max-width: 900px) {

    /* Menü standardmäßig geschlossen */
    .wp-block-navigation__responsive-container {
        display: none !important;
    }

    /* Burger-Button sichtbar */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* Geöffnetes Menü korrekt anzeigen */
    .wp-block-navigation__responsive-container.is-menu-open {
        display: flex !important;
    }
}

/* Deutlicher Close-Button im Mobile Menü */
.wp-block-navigation__responsive-container-close {
    font-size: 1.5rem;
    padding: 0.75rem;
    min-width: 44px;
    min-height: 44px;

    background-color: #000000;
	color: #ffffff;
}

/* ===== Grundstil Navigation ===== */
.wp-block-navigation {
    font-size: 1rem;
    font-weight: 500;
}

/* Hauptmenüpunkte */
.wp-block-navigation > ul > li > a {
    padding: 0.6em 1em;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/* Hover dezenter statt laut */
.wp-block-navigation > ul > li > a:hover {
    background-color: rgba(0,0,0,0.04);
    border-radius: 6px;
}

/* ===== Untermenü Container ===== */
.wp-block-navigation__submenu-container {
    font-size: 0.85em;
    padding: 0.5rem 0;
    border-left: 2px solid rgba(0,0,0,0.08);
    margin-left: 0.75rem;
}

/* Untermenüpunkte */
.wp-block-navigation__submenu-container a {
    padding: 0.35em 1em;
    opacity: 0.85;
}

/* Hover für Unterpunkte */
.wp-block-navigation__submenu-container a:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.04);
    border-radius: 4px;
}

@media (max-width: 900px) {

    /* Mobile Menü Container */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 1.5rem 1.25rem;
    }

    /* Hauptpunkte größer für Touch */
    .wp-block-navigation__responsive-container a {
        font-size: 1.05rem;
        padding: 0.6em 0;
    }

    /* Untermenüs deutlich kleiner */
    .wp-block-navigation__submenu-container {
        font-size: 0.85rem;
        margin-top: 0.25rem;
        margin-bottom: 0.75rem;
    }

    .wp-block-navigation__submenu-container a {
        padding-left: 0.75rem;
    }
}

.wp-block-navigation__submenu-container {
    border-left: 1px solid rgba(0,0,0,0.12);
}

.wp-block-navigation__submenu-container li {
    margin-bottom: 0.15rem;


color: var(--wp--preset--color--contrast);
background-color: var(--wp--preset--color--base);
}

/* Oberen Abstand für alle Ankerziele setzen */
*[id] {
  scroll-margin-top: 100px;
}

@media (max-width: 900px) {

    .wp-block-navigation__responsive-container-content {
        padding: 1.5rem 1.25rem;
    }

    /* Untermenüs leicht einrücken */
    .wp-block-navigation__submenu-container {
        padding-left: 0.75rem;
    }
}




/* =========================
   Grundfix Jetpack Slideshow
========================= */
.wp-block-jetpack-slideshow {
    position: relative;
}

/* =========================
   BUTTONS (Premium Look)
========================= */
.wp-block-jetpack-slideshow_button-next,
.wp-block-jetpack-slideshow_button-prev {
    width: 52px !important;
    height: 52px !important;
    background: rgba(20, 20, 20, 0.45) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-radius: 50% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    z-index: 9999 !important;

    opacity: 0 !important;
    transition: all 0.25s ease !important;
}

/* Hover sichtbar */
.wp-block-jetpack-slideshow:hover .wp-block-jetpack-slideshow_button-next,
.wp-block-jetpack-slideshow:hover .wp-block-jetpack-slideshow_button-prev {
    opacity: 1 !important;
}

/* Position */
.wp-block-jetpack-slideshow_button-prev { left: 10px !important; }
.wp-block-jetpack-slideshow_button-next { right: 10px !important; }

/* =========================
   🔥 KRITISCHER FIX: SVG sichtbar machen
========================= */
.wp-block-jetpack-slideshow_button-next svg,
.wp-block-jetpack-slideshow_button-prev svg {
    width: 18px !important;
    height: 18px !important;

    /* DAS ist der entscheidende Fix */
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
    display: block !important;
}

/* extra robust gegen Jetpack currentColor bugs */
.wp-block-jetpack-slideshow_button-next svg path,
.wp-block-jetpack-slideshow_button-prev svg path {
    fill: #ffffff !important;
    stroke: none !important;
}

/* =========================
   Hover Effekt
========================= */
.wp-block-jetpack-slideshow_button-next:hover,
.wp-block-jetpack-slideshow_button-prev:hover {
    background: rgba(20, 20, 20, 0.7) !important;
    transform: translateY(-50%) scale(1.05) !important;
}

/* =========================
   MOBILE: clean UX (Swipe only)
========================= */
@media (max-width: 768px) {
    .wp-block-jetpack-slideshow_button-next,
    .wp-block-jetpack-slideshow_button-prev {
        display: none !important;
    }
}