/**
 * =========================================================
 * HayMe PWA Install Banner
 * Version: 2.2.0
 * =========================================================
 */


/* =========================================================
   BANNER
   ========================================================= */

.hayme-install-box {
    position: fixed;
    left: 50%;
    bottom: max(
        18px,
        calc(env(safe-area-inset-bottom, 0px) + 10px)
    );
    z-index: 9999999;

    box-sizing: border-box;

    display: flex;
    align-items: center;

    width: min(500px, calc(100vw - 28px));

    gap: 12px;

    padding: 13px 14px;

    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            rgba(35, 37, 42, 0.98) 0%,
            rgba(16, 17, 20, 0.99) 100%
        );

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-50%)
        translateY(20px);

    transition:
        opacity 0.32s ease,
        transform 0.32s ease,
        visibility 0.32s ease;

    pointer-events: none;
}


/* =========================================================
   POPPINS ERZWINGEN
   ========================================================= */

.hayme-install-box,
.hayme-install-box *,
.hayme-install-button,
.hayme-ios-install-overlay,
.hayme-ios-install-overlay * {
    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   SICHTBAR
   ========================================================= */

.hayme-install-box.is-visible {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%)
        translateY(0);

    pointer-events: auto;
}


/* =========================================================
   ICON
   ========================================================= */

.hayme-install-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.025)
        );

    color: #ffffff;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 7px 16px rgba(0, 0, 0, 0.24);
}


.hayme-install-icon svg {
    display: block;

    width: 24px;
    height: 24px;

    color: currentColor;
}


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

.hayme-install-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    min-width: 0;

    gap: 2px;
}


.hayme-install-title {
    display: block;

    margin: 0;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.015em;
}


.hayme-install-subtitle {
    display: block;

    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 11.5px;
    font-weight: 400;

    line-height: 1.35;
}


/* =========================================================
   INSTALLIEREN BUTTON
   ========================================================= */

.hayme-install-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 118px;
    height: 42px;

    margin: 0;
    padding: 0 16px;

    border: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #ff4148 0%,
            #d91f2b 100%
        );

    color: #ffffff !important;

    font-size: 14px;
    font-weight: 700;

    line-height: 1;

    text-align: center;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-shadow:
        0 9px 20px rgba(217, 31, 43, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}


@media (hover: hover) and (pointer: fine) {

    .hayme-install-button:hover {
        transform: translateY(-1px);

        filter: brightness(1.04);

        box-shadow:
            0 11px 24px rgba(217, 31, 43, 0.32),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

}


.hayme-install-button:active {
    transform: scale(0.98);
}


/* =========================================================
   iOS INSTALL OVERLAY
   ========================================================= */

html.hayme-ios-install-open {
    overflow: hidden;
}


.hayme-ios-install-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000000;

    box-sizing: border-box;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding:
        24px
        16px
        max(
            24px,
            calc(env(safe-area-inset-bottom, 0px) + 16px)
        );

    background:
        rgba(0, 0, 0, 0.68);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.hayme-ios-install-overlay[hidden] {
    display: none !important;
}


.hayme-ios-install-overlay.is-open {
    opacity: 1;
    visibility: visible;
}


.hayme-ios-install-dialog {
    position: relative;

    box-sizing: border-box;

    width: min(440px, 100%);

    padding: 24px 22px 22px;

    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(199, 37, 40, 0.16),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            rgba(31, 32, 36, 0.99) 0%,
            rgba(14, 15, 18, 0.99) 100%
        );

    color: #ffffff;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    transform:
        translateY(24px)
        scale(0.985);

    transition:
        transform 0.22s ease;
}


.hayme-ios-install-overlay.is-open
.hayme-ios-install-dialog {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   iOS CLOSE
   ========================================================= */

.hayme-ios-install-close {
    position: absolute;
    top: 14px;
    right: 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.055);

    color: rgba(255, 255, 255, 0.78);

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


.hayme-ios-install-close svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   iOS HERO ICON
   ========================================================= */

.hayme-ios-install-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin: 0 auto 14px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 65, 72, 0.22),
            rgba(199, 37, 40, 0.08)
        );

    color: #ffffff;

    box-shadow:
        0 12px 28px rgba(199, 37, 40, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}


.hayme-ios-install-hero-icon svg {
    width: 28px;
    height: 28px;
}


/* =========================================================
   iOS COPY
   ========================================================= */

.hayme-ios-install-copy {
    text-align: center;
}


.hayme-ios-install-eyebrow {
    display: block;

    margin: 0 0 5px;

    color: #ff474e;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.hayme-ios-install-copy h2 {
    margin: 0;

    color: #ffffff;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.025em;
}


.hayme-ios-install-copy p {
    margin: 9px auto 0;

    max-width: 350px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 12.5px;
    font-weight: 400;

    line-height: 1.55;
}


/* =========================================================
   iOS STEPS
   ========================================================= */

.hayme-ios-install-steps {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin: 20px 0 0;
    padding: 0;

    list-style: none;
}


.hayme-ios-install-steps li {
    display: flex;
    align-items: center;

    gap: 11px;

    min-height: 52px;

    padding: 10px 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.035);
}


.hayme-ios-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            #ff4148 0%,
            #d91f2b 100%
        );

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    line-height: 1;

    box-shadow:
        0 7px 16px rgba(217, 31, 43, 0.22);
}


.hayme-ios-step-text {
    color: rgba(255, 255, 255, 0.76);

    font-size: 12.5px;
    font-weight: 400;

    line-height: 1.45;
}


.hayme-ios-step-text strong {
    color: #ffffff;
    font-weight: 700;
}


.hayme-ios-share-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    margin-left: 3px;

    vertical-align: middle;

    color: #67a7ff;
}


.hayme-ios-share-symbol svg {
    width: 18px;
    height: 18px;
}


/* =========================================================
   iOS SHARE ACTION
   ========================================================= */

.hayme-ios-install-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 7px;

    margin: 15px 0 0;
}


.hayme-ios-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;
    min-height: 46px;

    margin: 0;
    padding: 0 18px;

    border: 0;
    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #ff4148 0%,
            #d91f2b 100%
        );

    color: #ffffff !important;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    box-shadow:
        0 10px 22px rgba(217, 31, 43, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);

    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}


.hayme-ios-share-button:hover {
    filter: brightness(1.06);
}


.hayme-ios-share-button:active {
    transform: scale(0.985);
}


.hayme-ios-share-button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}


.hayme-ios-share-button svg {
    width: 19px;
    height: 19px;

    flex: 0 0 19px;
}


.hayme-ios-share-status {
    display: block;

    min-height: 15px;

    color: rgba(255, 255, 255, 0.56);

    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
}


/* =========================================================
   iOS NOTE
   ========================================================= */

.hayme-ios-install-note {
    margin: 14px 4px 0;

    color: rgba(255, 255, 255, 0.44);

    font-size: 10.5px;
    font-weight: 400;

    line-height: 1.45;
    text-align: center;
}


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

@media screen and (max-width: 767px) {

    .hayme-install-box {
        bottom: max(
            12px,
            calc(env(safe-area-inset-bottom, 0px) + 8px)
        );

        width: calc(100vw - 16px);

        gap: 10px;

        padding: 12px;

        border-radius: 18px;
    }


    .hayme-install-icon {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        border-radius: 13px;
    }


    .hayme-install-icon svg {
        width: 23px;
        height: 23px;
    }


    .hayme-install-title {
        font-size: 14px;
    }


    .hayme-install-subtitle {
        font-size: 11px;
    }


    .hayme-install-button {
        min-width: 106px;
        height: 40px;

        padding: 0 13px;

        font-size: 13px;
    }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media screen and (max-width: 420px) {

    .hayme-install-box {
        width: calc(100vw - 12px);

        gap: 8px;

        padding: 11px 10px;
    }


    .hayme-install-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }


    .hayme-install-icon svg {
        width: 21px;
        height: 21px;
    }


    .hayme-install-title {
        font-size: 12.5px;
        line-height: 1.22;
    }


    .hayme-install-subtitle {
        font-size: 10.5px;
    }


    .hayme-install-button {
        min-width: 96px;
        height: 38px;

        padding: 0 11px;

        font-size: 12.5px;
    }


    .hayme-ios-install-overlay {
        padding:
            14px
            8px
            max(
                14px,
                calc(env(safe-area-inset-bottom, 0px) + 8px)
            );
    }


    .hayme-ios-install-dialog {
        padding:
            22px
            15px
            17px;

        border-radius: 21px;
    }


    .hayme-ios-install-copy h2 {
        font-size: 19px;
    }


    .hayme-ios-install-copy p {
        font-size: 11.5px;
    }


    .hayme-ios-install-steps {
        margin-top: 16px;
    }


    .hayme-ios-install-steps li {
        min-height: 48px;

        gap: 9px;

        padding: 9px 10px;
    }


    .hayme-ios-step-text {
        font-size: 11.5px;
    }

}


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

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

    .hayme-install-box,
    .hayme-install-button,
    .hayme-ios-share-button,
    .hayme-ios-install-overlay,
    .hayme-ios-install-dialog {
        transition: none !important;
    }

}


/* =========================================================
   HAYME PWA INSTALL GUIDE V4
   Kompakte Safari-Installationsführung
   ========================================================= */

.hayme-install-button {
    gap: 7px;
}

.hayme-install-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    color: currentColor;
    pointer-events: none;
}

.hayme-install-button__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.hayme-ios-install-dialog--compact {
    width: min(400px, 100%);
    padding: 20px 18px 18px;
}

.hayme-ios-install-compact-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 38px;
}

.hayme-ios-install-hero-icon--compact {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin: 0;
    border-radius: 15px;
}

.hayme-ios-install-hero-icon--compact svg {
    width: 24px;
    height: 24px;
}

.hayme-ios-install-copy--compact {
    min-width: 0;
    text-align: left;
}

.hayme-ios-install-copy--compact .hayme-ios-install-eyebrow {
    margin-bottom: 3px;
}

.hayme-ios-install-copy--compact h2 {
    font-size: 19px;
}

.hayme-ios-install-copy--compact p {
    margin: 5px 0 0;
    max-width: none;
    font-size: 11.5px;
    line-height: 1.45;
}

.hayme-ios-install-steps--compact {
    gap: 7px;
    margin-top: 16px;
}

.hayme-ios-install-steps--compact li {
    min-height: 46px;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 13px;
}

.hayme-ios-install-steps--compact .hayme-ios-step-number {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}

.hayme-ios-install-steps--compact .hayme-ios-step-text {
    font-size: 11.75px;
    line-height: 1.4;
}

.hayme-ios-install-note--compact {
    margin-top: 11px;
    font-size: 9.75px;
    line-height: 1.4;
}

@media screen and (max-width: 420px) {
    .hayme-install-button {
        min-width: 0;
        padding: 0 10px;
        font-size: 11.5px;
        white-space: nowrap;
    }

    .hayme-install-button__icon,
    .hayme-install-button__icon svg {
        width: 16px;
        height: 16px;
    }

    .hayme-ios-install-dialog--compact {
        padding: 18px 13px 14px;
        border-radius: 20px;
    }

    .hayme-ios-install-compact-head {
        gap: 10px;
        padding-right: 36px;
    }

    .hayme-ios-install-hero-icon--compact {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .hayme-ios-install-copy--compact h2 {
        font-size: 17px;
    }

    .hayme-ios-install-copy--compact p {
        font-size: 10.5px;
    }

    .hayme-ios-install-steps--compact {
        margin-top: 13px;
    }

    .hayme-ios-install-steps--compact li {
        min-height: 43px;
        padding: 8px 9px;
    }

    .hayme-ios-install-steps--compact .hayme-ios-step-text {
        font-size: 10.75px;
    }
}