/* =========================================================
   EGERT – WARUM EGERT
   Standalone shortcode widget
   ========================================================= */

.egert-about {
    --green: #758964;
    --green-dark: #596b4e;
    --green-deep: #263229;
    --orange: #ed741b;
    --orange-dark: #d86615;
    --bg: #f4f3ee;
    --dark: #171b18;
    --text: #666c66;
    --border: rgba(23,27,24,.12);
    --egert-wall-height: 940px;
    --egert-speed-1: 31s;
    --egert-speed-2: 37s;
    --egert-speed-3: 43s;

    --bleed-left: max(30px, calc((100vw - 1350px) / 2 + 30px));

    position: relative;
    left: 50%;
    width: 100vw;
    max-width: 100vw;
    margin-left: -50vw;
    overflow: hidden;
    background: var(--bg);
    font-family: "Inter", Arial, sans-serif;
}

.egert-about,
.egert-about * {
    box-sizing: border-box;
}

.egert-about::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    right: -280px;
    top: 110px;
    border: 1px solid color-mix(in srgb, var(--green) 18%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.egert-about::after {
    content: "";
    position: absolute;
    width: 370px;
    height: 370px;
    right: -155px;
    top: 205px;
    border: 1px solid color-mix(in srgb, var(--green) 11%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.egert-about-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 110px 30px;
}

.egert-about-grid {
    display: grid;
    grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
    gap: 85px;
    align-items: center;
}

.egert-wall-bleed {
    position: relative;
    margin-left: calc(-1 * var(--bleed-left));
    width: calc(100% + var(--bleed-left));
    height: var(--egert-wall-height);
}

.egert-image-wall {
    position: relative;
    width: 100%;
    height: var(--egert-wall-height);
    display: grid;
    grid-template-columns: .88fr 1.10fr .88fr;
    gap: 12px;
    overflow: hidden;
    background: #e2e6dd;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );
}

.egert-image-wall::before {
    content: "";
    position: absolute;
    inset: 80px 30px;
    z-index: 5;
    background: radial-gradient(circle, rgba(117,137,100,.10), transparent 70%);
    pointer-events: none;
}

.egert-wall-column {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.egert-wall-track {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
}

.egert-wall-set {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 12px;
}

.egert-wall-img {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #d9ddd4;
}

.egert-wall-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.egert-wall-img:hover img {
    transform: scale(1.035);
}

.egert-wall-set .egert-wall-img:nth-child(4n+1) { height: 260px; }
.egert-wall-set .egert-wall-img:nth-child(4n+2) { height: 330px; }
.egert-wall-set .egert-wall-img:nth-child(4n+3) { height: 230px; }
.egert-wall-set .egert-wall-img:nth-child(4n+4) { height: 300px; }

.egert-wall-column:nth-child(1) .egert-wall-track {
    animation: egertWallUp var(--egert-speed-1) linear infinite;
}

.egert-wall-column:nth-child(2) .egert-wall-track {
    animation: egertWallDown var(--egert-speed-2) linear infinite;
}

.egert-wall-column:nth-child(3) .egert-wall-track {
    animation: egertWallUp var(--egert-speed-3) linear infinite;
}

@keyframes egertWallUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes egertWallDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

/* WICHTIG: KEIN Hover-Stopp der Animation. */

.egert-wall-empty {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    text-align: center;
    background: rgba(117,137,100,.12);
    color: var(--green-dark);
    font-size: 13px;
}

.egert-about-content {
    position: relative;
    min-width: 0;
}

.egert-about-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.egert-about-kicker::before {
    content: "";
    width: 40px;
    height: 3px;
    flex-shrink: 0;
    background: var(--orange);
}

.egert-about-title {
    max-width: 680px;
    margin: 0;
    color: var(--dark);
    font-size: clamp(44px,4.6vw,68px);
    line-height: 1.02;
    letter-spacing: -3px;
    font-weight: 700;
}

.egert-about-title span {
    color: var(--green);
}

.egert-about-lead {
    max-width: 650px;
    margin: 28px 0 0;
    color: var(--text);
    font-size: 17px;
    line-height: 1.8;
}

.egert-about-lead p {
    margin: 0;
}

.egert-about-lead strong {
    color: var(--dark);
    font-weight: 600;
}

.egert-family-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.egert-family-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--green-deep);
    color: #fff;
}

.egert-family-icon svg {
    width: 20px;
    height: 20px;
}

.egert-family-text strong {
    display: block;
    color: var(--dark);
    font-size: 14px;
    font-weight: 700;
}

.egert-family-text span {
    display: block;
    margin-top: 3px;
    color: #858a84;
    font-size: 12px;
}

.egert-benefits {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 42px;
}

.egert-benefit {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0,1fr) 45px;
    gap: 20px;
    align-items: center;
    min-height: 125px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--border);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.egert-benefit:hover {
    transform: translateX(5px);
    border-color: color-mix(in srgb, var(--green) 48%, transparent);
}

.egert-benefit-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--green) 42%, transparent);
    color: var(--green);
}

.egert-benefit-icon svg {
    width: 21px;
    height: 21px;
}

.egert-euro {
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    color: currentColor;
}

.egert-benefit-content {
    min-width: 0;
}

.egert-benefit h3 {
    margin: 0;
    color: var(--dark);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}

.egert-benefit p {
    max-width: 470px;
    margin: 7px 0 0;
    color: #777d77;
    font-size: 13px;
    line-height: 1.55;
}

.egert-benefit-number {
    display: flex;
    justify-content: flex-end;
    align-self: start;
    padding-top: 2px;
    color: rgba(23,27,24,.12);
    font-size: 29px;
    line-height: 1;
    font-weight: 700;
}

.egert-benefit-highlight {
    background: var(--green);
    border-color: var(--green);
}

.egert-benefit-highlight:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
}

.egert-benefit-highlight .egert-benefit-icon {
    border-color: rgba(255,255,255,.38);
    color: #fff;
}

.egert-benefit-highlight h3 {
    color: #fff;
}

.egert-benefit-highlight p {
    color: rgba(255,255,255,.76);
}

.egert-benefit-highlight .egert-benefit-number {
    color: rgba(255,255,255,.18);
}

.egert-about-cta {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 36px;
}

.egert-about-btn {
    min-height: 54px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    background: var(--orange);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    transition: background .25s ease, transform .25s ease;
}

.egert-about-btn:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
}

.egert-about-btn svg {
    width: 17px;
    height: 17px;
}

.egert-about-note {
    color: #858a84;
    font-size: 12px;
    line-height: 1.5;
}

@media(max-width:1024px) {
    .egert-about {
        --bleed-left: 25px;
    }

    .egert-about-inner {
        padding: 90px 25px;
    }

    .egert-about-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .egert-wall-bleed {
        margin-left: -25px;
        width: calc(100% + 50px);
        height: min(var(--egert-wall-height), 660px);
    }

    .egert-image-wall {
        height: min(var(--egert-wall-height), 660px);
        grid-template-columns: repeat(3,1fr);
    }

    .egert-about-content {
        width: 100%;
        max-width: 780px;
        margin: 0 auto;
    }
}

@media(max-width:767px) {
    .egert-about {
        --bleed-left: 17px;
    }

    .egert-about-inner {
        padding: 75px 17px;
    }

    .egert-about-grid {
        gap: 42px;
    }

    .egert-wall-bleed {
        margin-left: -17px;
        width: calc(100% + 34px);
        height: 500px;
    }

    .egert-image-wall {
        height: 500px;
        grid-template-columns: 1fr 1fr;
        gap: 9px;

        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 6%,
            #000 94%,
            transparent 100%
        );

        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            #000 6%,
            #000 94%,
            transparent 100%
        );
    }

    .egert-wall-column:nth-child(3) {
        display: none;
    }

    .egert-wall-set {
        gap: 9px;
        padding-bottom: 9px;
    }

    .egert-wall-set .egert-wall-img:nth-child(4n+1) { height: 180px; }
    .egert-wall-set .egert-wall-img:nth-child(4n+2) { height: 225px; }
    .egert-wall-set .egert-wall-img:nth-child(4n+3) { height: 160px; }
    .egert-wall-set .egert-wall-img:nth-child(4n+4) { height: 210px; }

    .egert-about-kicker {
        margin-bottom: 16px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .egert-about-kicker::before {
        width: 28px;
    }

    .egert-about-title {
        font-size: 43px;
        line-height: 1.03;
        letter-spacing: -2px;
    }

    .egert-about-lead {
        margin-top: 21px;
        font-size: 14px;
        line-height: 1.75;
    }

    .egert-benefits {
        margin-top: 34px;
    }

    .egert-benefit {
        grid-template-columns: 46px 1fr;
        gap: 15px;
        min-height: auto;
        padding: 20px;
    }

    .egert-benefit-icon {
        width: 44px;
        height: 44px;
    }

    .egert-benefit-number {
        position: absolute;
        right: 16px;
        top: 16px;
        font-size: 24px;
    }

    .egert-benefit-content {
        padding-right: 28px;
    }

    .egert-benefit h3 {
        font-size: 16px;
    }

    .egert-benefit p {
        font-size: 12px;
    }

    .egert-about-cta {
        display: block;
    }

    .egert-about-btn {
        width: 100%;
    }

    .egert-about-note {
        margin-top: 14px;
        text-align: center;
    }
}

@media(prefers-reduced-motion:reduce) {
    .egert-wall-track {
        animation: none !important;
    }
}


/* =========================================================
   EGERT_STATIC_IMAGE_WALL_V3
   Kundenwunsch:
   weniger Bilder, keine dauerhafte Bewegung
   ========================================================= */


/* =========================================================
   GESAMTE BILDERWAND RUHIGER / KLEINER
   ========================================================= */

.egert-about .egert-wall-bleed {
    height: 650px !important;
}


.egert-about .egert-image-wall {
    height: 650px !important;

    grid-template-columns:
        .9fr
        1.08fr
        .9fr !important;

    gap: 12px !important;

    overflow: hidden !important;

    background:
        #e2e6dd !important;

    /* kein Verlauf / kein Ausblenden mehr */
    -webkit-mask-image:
        none !important;

    mask-image:
        none !important;
}


/* Glow stark reduzieren */

.egert-about .egert-image-wall::before {
    inset: 0 !important;

    background:
        linear-gradient(
            135deg,
            rgba(117,137,100,.035),
            transparent 55%
        ) !important;
}


/* =========================================================
   ALLE BEWEGUNGEN ABSCHALTEN
   ========================================================= */

.egert-about .egert-wall-track,
.egert-about .egert-wall-column:nth-child(1) .egert-wall-track,
.egert-about .egert-wall-column:nth-child(2) .egert-wall-track,
.egert-about .egert-wall-column:nth-child(3) .egert-wall-track {
    animation:
        none !important;

    transform:
        none !important;

    will-change:
        auto !important;

    height:
        100% !important;
}


/* =========================================================
   LOOP-KOPIE AUSBLENDEN
   Das Plugin gibt jeden Bildsatz aktuell doppelt aus.
   ========================================================= */

.egert-about
.egert-wall-track
> .egert-wall-set:nth-child(n+2) {
    display:
        none !important;
}


/* =========================================================
   PRO SPALTE NUR NOCH 2 BILDER
   = 6 BILDER AUF DESKTOP
   ========================================================= */

.egert-about
.egert-wall-set:first-child
> .egert-wall-img:nth-child(n+3) {
    display:
        none !important;
}


/* =========================================================
   JEDEN BILDSATZ ALS STATISCHE COLLAGE
   ========================================================= */

.egert-about
.egert-wall-set:first-child {
    width:
        100% !important;

    height:
        100% !important;

    display:
        grid !important;

    gap:
        12px !important;

    padding:
        0 !important;
}


/* linke Spalte */

.egert-about
.egert-wall-column:nth-child(1)
.egert-wall-set:first-child {
    grid-template-rows:
        .92fr
        1.08fr !important;
}


/* mittlere Spalte */

.egert-about
.egert-wall-column:nth-child(2)
.egert-wall-set:first-child {
    grid-template-rows:
        1.10fr
        .90fr !important;
}


/* rechte Spalte */

.egert-about
.egert-wall-column:nth-child(3)
.egert-wall-set:first-child {
    grid-template-rows:
        .88fr
        1.12fr !important;
}


/* =========================================================
   BILDKACHELN
   ========================================================= */

.egert-about
.egert-wall-set:first-child
.egert-wall-img {
    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    background:
        #d9ddd4 !important;

    border:
        1px solid rgba(23,27,24,.07) !important;
}


/* Bild füllt Kachel */

.egert-about
.egert-wall-set:first-child
.egert-wall-img img {
    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    object-fit:
        cover !important;

    object-position:
        center center !important;

    transform:
        scale(1) !important;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1),
        filter .3s ease !important;
}


/* Nur noch dezente Interaktion */

.egert-about
.egert-wall-set:first-child
.egert-wall-img:hover img {
    transform:
        scale(1.025) !important;
}


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

@media(max-width:1024px) {

    .egert-about .egert-wall-bleed,
    .egert-about .egert-image-wall {
        height:
            560px !important;
    }

}


/* =========================================================
   MOBILE
   Nur zwei Spalten = insgesamt 4 Bilder
   ========================================================= */

@media(max-width:767px) {

    .egert-about .egert-wall-bleed {
        height:
            470px !important;
    }


    .egert-about .egert-image-wall {
        height:
            470px !important;

        grid-template-columns:
            1fr
            1fr !important;

        gap:
            8px !important;
    }


    .egert-about
    .egert-wall-column:nth-child(3) {
        display:
            none !important;
    }


    .egert-about
    .egert-wall-set:first-child {
        gap:
            8px !important;
    }


    .egert-about
    .egert-wall-column:nth-child(1)
    .egert-wall-set:first-child {
        grid-template-rows:
            .9fr
            1.1fr !important;
    }


    .egert-about
    .egert-wall-column:nth-child(2)
    .egert-wall-set:first-child {
        grid-template-rows:
            1.1fr
            .9fr !important;
    }

}


/* =========================================================
   SEHR KLEIN
   ========================================================= */

@media(max-width:430px) {

    .egert-about .egert-wall-bleed,
    .egert-about .egert-image-wall {
        height:
            420px !important;
    }

}



/* =========================================================
   EGERT_STATIC_EQUAL_HEIGHT_V4
   Linke Bildercollage exakt so hoch wie rechter Inhalt
   ========================================================= */

@media(min-width:768px) {

    /*
     * Beide Grid-Spalten bekommen dieselbe Höhe.
     */
    .egert-about .egert-about-grid {
        align-items:
            stretch !important;
    }


    /*
     * Linke Grid-Spalte auf komplette verfügbare Höhe.
     * Die alten 650px werden damit überschrieben.
     */
    .egert-about .egert-wall-bleed {
        height:
            auto !important;

        min-height:
            100% !important;

        align-self:
            stretch !important;
    }


    /*
     * Bilderwand füllt die komplette linke Spaltenhöhe.
     */
    .egert-about .egert-image-wall {
        position:
            absolute !important;

        inset:
            0 !important;

        width:
            100% !important;

        height:
            100% !important;

        min-height:
            100% !important;
    }


    /*
     * Alle drei Bildspalten ebenfalls komplett hoch.
     */
    .egert-about .egert-wall-column {
        height:
            100% !important;
    }


    .egert-about .egert-wall-track {
        height:
            100% !important;
    }


    .egert-about
    .egert-wall-set:first-child {
        height:
            100% !important;
    }

}


/* =========================================================
   MOBILE
   Dort bewusst wieder kompakter
   ========================================================= */

@media(max-width:767px) {

    .egert-about .egert-about-grid {
        align-items:
            initial !important;
    }


    .egert-about .egert-wall-bleed {
        position:
            relative !important;

        height:
            470px !important;

        min-height:
            470px !important;
    }


    .egert-about .egert-image-wall {
        position:
            relative !important;

        inset:
            auto !important;

        height:
            470px !important;

        min-height:
            470px !important;
    }

}


@media(max-width:430px) {

    .egert-about .egert-wall-bleed,
    .egert-about .egert-image-wall {
        height:
            420px !important;

        min-height:
            420px !important;
    }

}



/* =========================================================
   EGERT_RENTAL_STEPS_FRONTEND_V3
   Statischer Vermietungsablauf statt Bildercollage
   ========================================================= */


/* =========================================================
   GRID BEIDE SEITEN GLEICH HOCH
   ========================================================= */

.egert-about .egert-about-grid {
    align-items:
        stretch !important;
}


/* =========================================================
   LINKER ABLAUF
   ========================================================= */

.egert-about .egert-rental-steps {
    position:relative;

    margin-left:
        calc(-1 * var(--bleed-left));

    width:
        calc(100% + var(--bleed-left));

    min-width:0;

    align-self:stretch;

    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr);

    gap:18px;
}


/* =========================================================
   ÜBERSCHRIFT
   ========================================================= */

.egert-about .egert-rental-steps-heading {
    display:flex;

    align-items:center;

    gap:12px;

    padding-left:
        var(--bleed-left);

    color:
        var(--dark);

    font-size:12px;

    line-height:1;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
}


.egert-about
.egert-rental-steps-heading::after {
    content:"";

    width:42px;
    height:2px;

    background:
        var(--green);
}


/* =========================================================
   LISTE
   ========================================================= */

.egert-about .egert-rental-steps-list {
    min-height:0;

    display:grid;

    grid-template-rows:
        repeat(4,minmax(0,1fr));

    gap:12px;
}


/* =========================================================
   EINZELNER SCHRITT
   ========================================================= */

.egert-about .egert-rental-step {
    min-height:0;

    display:grid;

    grid-template-rows:
        minmax(0,1fr)
        52px;

    overflow:hidden;

    background:#fff;

    border:
        1px solid rgba(23,27,24,.11);

    box-shadow:
        0 8px 24px rgba(23,27,24,.055);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.egert-about .egert-rental-step:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(117,137,100,.32);

    box-shadow:
        0 13px 30px rgba(23,27,24,.09);
}


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

.egert-about .egert-rental-step-image {
    position:relative;

    min-height:0;

    overflow:hidden;

    background:#dce2d8;
}


.egert-about .egert-rental-step-image img {
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center center;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1);
}


.egert-about
.egert-rental-step:hover
.egert-rental-step-image img {
    transform:
        scale(1.025);
}


/* =========================================================
   FALLBACK
   ========================================================= */

.egert-about .egert-rental-step-placeholder {
    position:absolute;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:20px;

    background:
        linear-gradient(
            135deg,
            rgba(117,137,100,.18),
            rgba(117,137,100,.07)
        );

    color:
        var(--green-dark);

    font-size:11px;

    text-align:center;
}


/* =========================================================
   BESCHRIFTUNG
   ========================================================= */

.egert-about .egert-rental-step-caption {
    display:grid;

    grid-template-columns:
        58px
        minmax(0,1fr);

    align-items:center;

    min-height:52px;

    background:
        rgba(255,255,255,.98);

    border-top:
        1px solid rgba(23,27,24,.08);
}


/* Nummer */

.egert-about .egert-rental-step-number {
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;

    background:
        var(--green);

    color:#fff;

    font-size:20px;

    line-height:1;

    font-weight:500;
}


/* Titel */

.egert-about .egert-rental-step-title {
    min-width:0;

    padding:
        0
        18px;

    color:
        var(--dark);

    font-size:15px;

    line-height:1.25;

    font-weight:650;

    letter-spacing:-.15px;
}


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

@media(max-width:1024px) {

    .egert-about .egert-rental-steps {
        gap:15px;
    }


    .egert-about .egert-rental-steps-list {
        gap:10px;
    }


    .egert-about .egert-rental-step {
        grid-template-rows:
            minmax(0,1fr)
            48px;
    }


    .egert-about .egert-rental-step-caption {
        min-height:48px;

        grid-template-columns:
            52px
            minmax(0,1fr);
    }


    .egert-about .egert-rental-step-number {
        font-size:18px;
    }


    .egert-about .egert-rental-step-title {
        padding:
            0
            13px;

        font-size:13px;
    }

}


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

@media(max-width:767px) {

    .egert-about .egert-rental-steps {
        width:100%;

        margin-left:0;

        display:block;
    }


    .egert-about .egert-rental-steps-heading {
        padding-left:0;

        margin-bottom:22px;
    }


    .egert-about .egert-rental-steps-list {
        display:grid;

        grid-template-rows:none;

        grid-template-columns:
            1fr;

        gap:12px;
    }


    .egert-about .egert-rental-step {
        display:grid;

        grid-template-rows:
            190px
            52px;
    }


    .egert-about .egert-rental-step-caption {
        grid-template-columns:
            55px
            minmax(0,1fr);
    }


    .egert-about .egert-rental-step-title {
        font-size:14px;
    }

}


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

@media(max-width:430px) {

    .egert-about .egert-rental-step {
        grid-template-rows:
            165px
            50px;
    }


    .egert-about .egert-rental-step-caption {
        min-height:50px;

        grid-template-columns:
            51px
            minmax(0,1fr);
    }

}



/* =========================================================
   EGERT_RENTAL_STEPS_CONTAINER_V4
   Vermietungsablauf sauber innerhalb der linken Grid-Spalte
   ========================================================= */

.egert-about .egert-rental-steps {
    width:100% !important;
    max-width:100% !important;

    margin-left:0 !important;
    margin-right:0 !important;

    padding:0 !important;

    align-self:stretch !important;

    min-width:0 !important;
}


/* Überschrift ebenfalls nicht mehr nach außen schieben */

.egert-about .egert-rental-steps-heading {
    width:100% !important;

    padding-left:0 !important;
    padding-right:0 !important;

    justify-content:flex-start !important;

    text-align:left !important;
}


/* Karten bleiben vollständig in der linken Spalte */

.egert-about .egert-rental-steps-list {
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;
    padding:0 !important;

    min-width:0 !important;
}


.egert-about .egert-rental-step {
    width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    min-width:0 !important;
}


/* Bild darf ebenfalls nicht herauslaufen */

.egert-about .egert-rental-step-image {
    width:100% !important;
    max-width:100% !important;
}


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

@media(max-width:767px) {

    .egert-about .egert-rental-steps {
        width:100% !important;
        max-width:100% !important;

        margin:0 !important;
    }

}



/* =========================================================
   EGERT_RENTAL_STEPS_ENTRANCE_V5
   Dezente Eingangsanimation
   ========================================================= */

/* Überschrift */

.egert-about .egert-rental-steps-heading {
    opacity:0 !important;

    transform:
        translateX(-22px) !important;

    transition:
        opacity .7s cubic-bezier(.2,.7,.2,1),
        transform .7s cubic-bezier(.2,.7,.2,1) !important;
}


/* Karten Ausgangszustand */

.egert-about .egert-rental-step {
    opacity:0 !important;

    transform:
        translateY(34px)
        scale(.985) !important;

    transition:
        opacity .72s cubic-bezier(.2,.7,.2,1),
        transform .72s cubic-bezier(.2,.7,.2,1),
        box-shadow .28s ease,
        border-color .28s ease !important;
}


/* Bild selbst etwas größer starten */

.egert-about
.egert-rental-step-image img {
    transform:
        scale(1.055) !important;

    transition:
        transform 1.05s cubic-bezier(.2,.7,.2,1) !important;
}


/* Sichtbar */

.egert-about
.egert-rental-steps.egert-steps-visible
.egert-rental-steps-heading {
    opacity:1 !important;

    transform:
        translateX(0) !important;
}


.egert-about
.egert-rental-steps.egert-steps-visible
.egert-rental-step {
    opacity:1 !important;

    transform:
        translateY(0)
        scale(1) !important;
}


.egert-about
.egert-rental-steps.egert-steps-visible
.egert-rental-step-image img {
    transform:
        scale(1) !important;
}


/* =========================================================
   STAGGER
   ========================================================= */

.egert-about
.egert-rental-step:nth-child(1) {
    transition-delay:
        .12s !important;
}

.egert-about
.egert-rental-step:nth-child(2) {
    transition-delay:
        .22s !important;
}

.egert-about
.egert-rental-step:nth-child(3) {
    transition-delay:
        .32s !important;
}

.egert-about
.egert-rental-step:nth-child(4) {
    transition-delay:
        .42s !important;
}


/* =========================================================
   HOVER NACH ANIMATION
   ========================================================= */

.egert-about
.egert-rental-steps.egert-steps-visible
.egert-rental-step:hover {
    transform:
        translateY(-3px)
        scale(1) !important;
}


.egert-about
.egert-rental-steps.egert-steps-visible
.egert-rental-step:hover
.egert-rental-step-image img {
    transform:
        scale(1.025) !important;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .egert-about .egert-rental-steps-heading,
    .egert-about .egert-rental-step,
    .egert-about .egert-rental-step-image img {
        opacity:1 !important;

        transform:none !important;

        transition:none !important;
    }

}