.gsr-page-transition-bar,
.gsr-page-transition-pill {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.gsr-page-transition-bar {
    position: fixed;
    z-index: 2147483000;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    transform: translateY(-5px);
}

.gsr-page-transition-bar span {
    display: block;
    width: 44%;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, #a9476f 0%, #d65f91 45%, #f2b4cd 100%);
    box-shadow: 0 4px 14px rgba(169, 71, 111, 0.34);
    animation: gsr-page-transition-sweep 1.05s ease-in-out infinite;
}

.gsr-page-transition-pill {
    position: fixed;
    z-index: 2147483001;
    top: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid rgba(143, 64, 96, 0.18);
    border-radius: 999px;
    background: rgba(255, 250, 252, 0.94);
    color: #6d314c;
    box-shadow: 0 12px 28px rgba(76, 47, 57, 0.16);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-8px);
    backdrop-filter: blur(12px);
}

.gsr-page-transition-pill::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 2px solid rgba(169, 71, 111, 0.28);
    border-top-color: #a9476f;
    border-radius: 999px;
    animation: gsr-page-transition-spin 0.72s linear infinite;
}

body.gsr-is-navigating {
    cursor: progress;
}

body.gsr-is-navigating .gsr-page-transition-bar,
body.gsr-is-navigating .gsr-page-transition-pill {
    opacity: 1;
    transform: translateY(0);
}

body.admin-bar .gsr-page-transition-bar {
    top: 32px;
}

body.admin-bar .gsr-page-transition-pill {
    top: 46px;
}

body .gsr-materialsuche-results .gsr-materialien-grid,
body .gsr-material-filterseite .gsr-materialsuche-results .gsr-materialien-grid {
    --gsr-stable-material-gap: 12px;
    display: grid !important;
    gap: var(--gsr-stable-material-gap) !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

body .gsr-materialsuche-results .gsr-material-card,
body .gsr-material-filterseite .gsr-materialsuche-results .gsr-material-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
}

body .gsr-materialsuche-results .gsr-material-card-link,
body .gsr-material-filterseite .gsr-materialsuche-results .gsr-material-card-link {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

body .gsr-materialsuche-results.is-loading-results,
body .gsr-material-filterseite .gsr-materialsuche-results.is-loading-results {
    position: relative !important;
}

body .gsr-materialsuche-results.is-loading-results .gsr-materialien-grid,
body .gsr-material-filterseite .gsr-materialsuche-results.is-loading-results .gsr-materialien-grid {
    opacity: 0.58 !important;
    transition: opacity 0.16s ease !important;
}

body .gsr-materialsuche-results.is-loading-results:has(.gsr-material-card)::after,
body .gsr-material-filterseite .gsr-materialsuche-results.is-loading-results:has(.gsr-material-card)::after {
    content: "Aktualisiere ..." !important;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(164, 71, 112, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(255, 248, 251, 0.94) !important;
    color: #8f3f67 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(94, 51, 67, 0.08) !important;
}

body .gsr-materialsuche-results .gsr-material-card-image,
body .gsr-materialsuche-results .gsr-material-card-link > img,
body .gsr-materialsuche-results .gsr-material-card-link > picture,
body .gsr-materialsuche-results .gsr-material-card-link > picture > img,
body .gsr-material-filterseite .gsr-materialsuche-results .gsr-material-card-image,
body .gsr-material-filterseite .gsr-materialsuche-results .gsr-material-card-link > img,
body .gsr-material-filterseite .gsr-materialsuche-results .gsr-material-card-link > picture,
body .gsr-material-filterseite .gsr-materialsuche-results .gsr-material-card-link > picture > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (min-width: 1280px) {
    body .gsr-materialsuche-results .gsr-materialien-grid,
    body .gsr-material-filterseite .gsr-materialsuche-results .gsr-materialien-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1279px) and (min-width: 1040px) {
    body .gsr-materialsuche-results .gsr-materialien-grid,
    body .gsr-material-filterseite .gsr-materialsuche-results .gsr-materialien-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1039px) and (min-width: 680px) {
    body .gsr-materialsuche-results .gsr-materialien-grid,
    body .gsr-material-filterseite .gsr-materialsuche-results .gsr-materialien-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        max-width: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }
}

@media (max-width: 679px) {
    body .gsr-materialsuche-results .gsr-materialien-grid,
    body .gsr-material-filterseite .gsr-materialsuche-results .gsr-materialien-grid {
        grid-template-columns: 1fr !important;
        justify-content: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body .gsr-materialsuche-results .gsr-material-card,
    body .gsr-material-filterseite .gsr-materialsuche-results .gsr-material-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    .gsr-page-transition-pill {
        top: 10px;
        right: 10px;
        min-height: 34px;
        padding: 8px 11px;
        font-size: 12px;
    }
}

@media (max-width: 782px) {
    body.admin-bar .gsr-page-transition-bar {
        top: 46px;
    }

    body.admin-bar .gsr-page-transition-pill {
        top: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gsr-page-transition-bar span,
    .gsr-page-transition-pill::before {
        animation-duration: 1.6s;
    }
}

@keyframes gsr-page-transition-sweep {
    0% {
        transform: translateX(-105%);
    }

    55% {
        transform: translateX(70vw);
    }

    100% {
        transform: translateX(130vw);
    }
}

@keyframes gsr-page-transition-spin {
    to {
        transform: rotate(360deg);
    }
}