/*
 * DIVA Sonder-Plugin – Feinschliff der Website (25.10.2026)
 * Gleiche Gestaltung, nur edler: Tiefe, Gold-Akzente, ruhige Bewegung,
 * saubere Darstellung auf dem Handy. Powered by Let's Do. Media.
 */

:root {
    --diva-gold: #cf9c1b;
    --diva-gold-hell: #d9b96a;
    --diva-gold-tief: #a87a0c;
    --diva-creme: #fffff4;
    --diva-nacht: rgba(14, 12, 10, 0.78);
    --diva-schatten: 0 28px 56px -30px rgba(0, 0, 0, 0.75);
}

/* ---------- Grundlagen ---------- */

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--diva-gold);
    color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--diva-gold-hell);
    outline-offset: 3px;
}

/* Links in den Creme-Kaesten: feine Gold-Unterstreichung */
.has-tertiary-background-color a:not(.wp-element-button) {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-color: rgba(207, 156, 27, 0.65);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.has-tertiary-background-color a:not(.wp-element-button):hover {
    color: var(--diva-gold-tief);
    text-decoration-color: var(--diva-gold-tief);
}

/* Telefon-Links auf dem Handy gut treffbar */
a[href^="tel:"] {
    white-space: nowrap;
}

/* ---------- Tiefe: Kaesten und Bilder ---------- */

.gold-border.has-tertiary-background-color,
.alignwide > .wp-block-column > .wp-block-cover,
.alignwide > .wp-block-column > .wp-block-group.has-background {
    box-shadow: var(--diva-schatten);
}

/* Bilder neben den Texten: sanfter Zoom beim Ueberfahren (nur mit Maus) */
@media (hover: hover) {
    .alignwide > .wp-block-column > .wp-block-cover {
        overflow: hidden;
    }

    .alignwide > .wp-block-column > .wp-block-cover > .wp-block-cover__image-background {
        transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .alignwide > .wp-block-column > .wp-block-cover:hover > .wp-block-cover__image-background {
        transform: scale(1.04);
    }

    /* Marken-Logos in der Goldleiste: leicht anheben */
    .gold-bg .wp-block-image img {
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

    .gold-bg .wp-block-image img:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32) !important;
    }
}

/* ---------- Banner mit Hintergrundvideo ---------- */

/* Der im Block hinterlegte dunkle Verlauf (oben/unten) stand auf 0 %.
   Dezent eingeschaltet: Ueberschriften lesen sich besser, angeschnittene
   Schrift im Video tritt zurueck. */
.wp-block-cover:has(> video[data-ldvr="lazy"]) > .wp-block-cover__background.has-background-dim-0.has-background-gradient {
    opacity: 0.5;
}

/* Vorschaubild und Video fuellen die Flaeche identisch */
.wp-block-cover__video-background[poster] {
    background: #0d0c0b;
}

/* ---------- Team (MetaSlider) als ruhiges Raster ---------- */

/* MetaSlider setzt Breite (600 %), Endlos-Animation und Kopien der Fotos –
   hier stillgelegt, damit alle drei nebeneinander stehen. */
html body #metaslider_561.flexslider .flex-viewport {
    overflow: visible !important;
    height: auto !important;
}

html body #metaslider_561.flexslider .flex-viewport > ul.slides {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    animation: none !important;
    margin: 0 0 32px !important;
}

html body #metaslider_561.flexslider .flex-viewport > ul.slides > li {
    display: block !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    text-align: center;
}

html body #metaslider_561.flexslider .flex-viewport > ul.slides > li.clone,
html body #metaslider_561.flexslider .flex-viewport > ul.slides > li:nth-child(n+4) {
    display: none !important;
}

#metaslider_561 .slides > li img {
    width: min(78%, 240px) !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin: 0 auto !important;
    border: 1px solid rgba(207, 156, 27, 0.55);
    box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.55);
}

#metaslider_561 .caption-wrap {
    position: static !important;
    background: none !important;
    opacity: 1 !important;
    margin-top: 16px;
}

#metaslider_561 .caption-wrap .caption {
    padding: 0 !important;
    color: #1d1d1b !important;
}

#metaslider_561 .caption h2,
#metaslider_561 .caption h3 {
    margin: 0 0 4px;
    font-size: clamp(18px, 1.6vw, 22px);
    letter-spacing: 0.02em;
}

#metaslider_561 .caption p {
    margin: 0;
    font-size: 14px;
    color: #63666a;
}

#metaslider_561 .flex-control-nav,
#metaslider_561 .flex-direction-nav {
    display: none !important;
}

/* ---------- Social-Media-Kacheln ---------- */

/* Das Facebook-Plugin liefert verschachteltes HTML mit verirrten <p>-Tags;
   der Browser zerlegt dadurch jede Kachel in eine Bild- und eine leere Haelfte.
   Hier: nur die Bildhaelfte zeigen, einheitliches Format, wischbare Reihe. */
html body .efbl_feeds_holder.efbl_feeds_row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 6px 0 14px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

html body .efbl_feeds_holder.efbl_feeds_row > .efbl-row-content {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
    scroll-snap-align: start;
}

html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-wrapper,
html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-content {
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-content > p:empty,
html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-wrapper > p:empty,
html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-box:not(:has(img)) {
    display: none !important;
}

html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-box {
    display: block;
    position: relative;
    width: 168px !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(217, 185, 106, 0.55);
    background: #0d0c0b;
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.8);
}

html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-box img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-box br {
    display: none;
}

@media (hover: hover) {
    html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-box:hover img {
        transform: scale(1.05);
    }
}

/* ---------- Kontaktformular (Forminator) ---------- */

.forminator-ui.forminator-custom-form .forminator-label {
    font-size: 11px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #63666a !important;
}

.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea {
    font-size: 16px !important; /* verhindert das Hineinzoomen auf dem iPhone */
    border: 1px solid #ddd2b4 !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 12px 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus {
    border-color: var(--diva-gold) !important;
    box-shadow: 0 0 0 3px rgba(207, 156, 27, 0.18) !important;
}

.forminator-ui.forminator-custom-form .forminator-button-submit {
    background: linear-gradient(135deg, #e3c06a 0%, #cf9c1b 45%, #a87a0c 100%) !important;
    color: #111 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 15px 34px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6);
}

/* ---------- Nach-oben-Knopf im DIVA-Stil ---------- */

#wpfront-scroll-top-container {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(217, 185, 106, 0.85) !important;
    background: var(--diva-nacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e7cf8f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E") center / 20px no-repeat !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.7);
}

#wpfront-scroll-top-container img {
    opacity: 0 !important;
}

/* ---------- Sanftes Einblenden beim Scrollen (nur mit JavaScript) ---------- */

.diva-js .diva-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}

.diva-js .diva-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Hero: Oeffnungszeiten auf dem Handy ---------- */

.diva-sep {
    display: inline;
}

@media (max-width: 781px) {
    .diva-sep {
        display: block;
        height: 0;
        overflow: hidden;
    }

    /* Hero: Oeffnungszeiten-Spalte so breit wie ihr Text, Zeilen nicht zerreissen */
    .wp-block-group:has(> h5.has-text-align-right.on-gold-text) {
        flex-basis: auto !important;
        flex-shrink: 0;
    }

    h5.has-text-align-right.on-gold-text {
        white-space: nowrap;
    }

    /* Team: untereinander, Bilder etwas kleiner */
    html body #metaslider_561.flexslider .flex-viewport > ul.slides {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    #metaslider_561 .slides > li img {
        width: min(62%, 230px) !important;
    }

    html body .efbl_feeds_holder.efbl_feeds_row {
        justify-content: flex-start !important;
    }

    html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-box {
        width: 150px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .diva-js .diva-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .alignwide > .wp-block-column > .wp-block-cover:hover > .wp-block-cover__image-background,
    html body .efbl_feeds_holder.efbl_feeds_row .efbl-row-box:hover img {
        transform: none;
    }
}

/* Hero-Ueberschrift (H1): gleiche Optik wie der bisherige Absatz „Entdecke DIVA Weiden!“ */
h1.diva-hero-claim {
    font-size: inherit !important;
    line-height: 1.45;
    font-weight: 400;
    margin: 0;
}

/* ---------- Event-Rueckblick ---------- */

.diva-kicker {
    margin: 0 0 4px !important;
    font-size: 12px !important;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8a6510; /* dunkles Gold: gut lesbar auf Creme */
}

.diva-event .gold-border h2 {
    margin: 0 0 6px;
}

.diva-btn .wp-block-button__link {
    background: linear-gradient(135deg, #e3c06a 0%, #cf9c1b 45%, #a87a0c 100%) !important;
    color: #111 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 30px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.55);
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.diva-btn .wp-block-button__link:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6);
}

@media (max-width: 781px) {
    .diva-event .wp-block-cover .wp-block-spacer {
        height: 240px !important;
    }
}