/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Sep 16 2026 | 18:45:38 */
/* =========================================================
   RDM IMAGE ACCORDION – TIMING

   HIER FINETUNING MACHEN:
   ========================================================= */

.rdm-image-accordion {
    /* Dauer, bis sich das Bild/Panel vollständig geöffnet hat */
    --rdm-open-duration: 900ms;

    /* Dauer der Einblendung von Headline + Text */
    --rdm-copy-duration: 500ms;

    /* Wann die Headline nach Hover anfängt aufzutauchen */
    --rdm-headline-delay: 550ms;

    /* Wann der Text nach Hover anfängt aufzutauchen */
    --rdm-text-delay: 700ms;

	/* Geschwindigkeit beim Weg-Hovern */
	--rdm-copy-out-duration: 120ms;


    /* --- Parent wrapper --- */

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;

    width: 100%;
    height: 400px;
    overflow: hidden;
}


/* =========================================================
   PANEL / BILD

   --rdm-open-duration bestimmt, wie langsam sich
   das aktive Panel vergrößert.
   Aktuell: 900ms
   ========================================================= */

.rdm-image-accordion .rdm-ia-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    flex: 1 1 0 !important;
    min-width: 0;
    height: 100%;

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

    background-size: cover !important;
    background-position: center center !important;

    cursor: pointer;

    transition:
        flex-grow var(--rdm-open-duration) cubic-bezier(.22,.61,.36,1),
        flex-basis var(--rdm-open-duration) cubic-bezier(.22,.61,.36,1);
}


/* =========================================================
   OVERLAY

   Läuft gleichzeitig mit dem Öffnen des Panels.
   Dadurch wirkt Bild + Farbe wie EINE Animation.
   ========================================================= */

.rdm-image-accordion .rdm-ia-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    background: rgba(46, 64, 87, 0.86);
    opacity: 0;

    transition:
        opacity var(--rdm-open-duration) ease;
}


/* =========================================================
   AKTIVES PANEL

   4 = geöffnetes Panel wird deutlich breiter.
   Falls du weniger Expansion willst:
   z. B. 3 statt 4.
   ========================================================= */

.rdm-image-accordion .rdm-ia-panel:hover {
    flex: 4 1 0 !important;
}

.rdm-image-accordion .rdm-ia-panel:hover::before {
    opacity: 1;
}


/* =========================================================
   HEADLINE + TEXT – AUSGANGSZUSTAND

   Beide sind zunächst unsichtbar und leicht nach unten
   versetzt.

   --rdm-copy-duration = Dauer der Auftauch-Animation.
   Gewünscht: 0,5 Sekunden.
   ========================================================= */

.rdm-image-accordion .rdm-ia-copy {
    position: relative;
    z-index: 2;

    width: min(82%, 620px);
    margin-left: auto;
    margin-right: auto;

    opacity: 0;
    transform: translateY(14px);

    pointer-events: none;

	transition:
	    opacity var(--rdm-copy-out-duration) ease 0ms,
	    transform var(--rdm-copy-out-duration) ease 0ms;
}


/* =========================================================
   HEADLINE

   Aktuell startet sie nach 550ms.

   WICHTIGE STELLE:
   --rdm-headline-delay ganz oben verändern,
   wenn die Headline früher/später kommen soll.
   ========================================================= */

.rdm-image-accordion .rdm-ia-panel:hover .rdm-ia-title {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity var(--rdm-copy-duration) ease var(--rdm-headline-delay),
        transform var(--rdm-copy-duration) cubic-bezier(.22,.61,.36,1) var(--rdm-headline-delay);
}


/* =========================================================
   TEXT

   Aktuell startet er nach 700ms,
   also 150ms nach der Headline.

   WICHTIGE STELLE:
   --rdm-text-delay ganz oben verändern.
   ========================================================= */

.rdm-image-accordion .rdm-ia-panel:hover .rdm-ia-text {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity var(--rdm-copy-duration) ease var(--rdm-text-delay),
        transform var(--rdm-copy-duration) cubic-bezier(.22,.61,.36,1) var(--rdm-text-delay);
}


/* =========================================================
   TYPO-ABSTÄNDE
   ========================================================= */

.rdm-image-accordion .rdm-ia-title {
    margin-bottom: 0px !important;
}

.rdm-image-accordion .rdm-ia-text {
    margin-top: 0 !important;
}


/* =========================================================
   TABLET / TOUCH

   Kein Hover-Accordion auf Touch-Geräten.
   Stattdessen normale große Bildkarten untereinander.
   ========================================================= */

@media (max-width: 980px) {

    .rdm-image-accordion {
        height: auto;
        flex-direction: column !important;
        gap: 16px;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
    }

    .rdm-image-accordion .rdm-ia-panel,
    .rdm-image-accordion .rdm-ia-panel:hover {
        flex: none !important;
        width: 100%;
        min-height: 360px;
        border-radius: 24px;
    }

    .rdm-image-accordion .rdm-ia-panel::before {
        opacity: 0.78;
    }

    .rdm-image-accordion .rdm-ia-copy,
    .rdm-image-accordion .rdm-ia-panel:hover .rdm-ia-copy {
        opacity: 1;
        transform: none;
        transition-delay: 0ms;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .rdm-image-accordion {
        gap: 12px;
    }

    .rdm-image-accordion .rdm-ia-panel,
    .rdm-image-accordion .rdm-ia-panel:hover {
        min-height: 300px;
        border-radius: 20px;
    }

    .rdm-image-accordion .rdm-ia-copy {
        width: 84%;
    }
}


/* =========================================================
   ACCESSIBILITY

   Besucher mit reduzierten Bewegungen bekommen
   keine Animationen.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .rdm-image-accordion .rdm-ia-panel,
    .rdm-image-accordion .rdm-ia-panel::before,
    .rdm-image-accordion .rdm-ia-copy {
        transition: none !important;
    }
}