/* =========================================================
   UROANDRODOC – ZERTIFIKATE & AUSZEICHNUNGEN
========================================================= */

.certificates-section {
    padding: 105px 0;

    background:
        linear-gradient(
            105deg,
            rgba(247, 225, 119, 0.34),
            rgba(220, 240, 169, 0.25),
            rgba(184, 238, 209, 0.28)
        ),
        url("../images/Drkellenbachhintergrund.jpg");

    background-size: cover;
    background-position: center;
}


/* Überschrift */

.certificates-heading {
    display: grid;

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

    align-items: end;

    gap: 65px;

    margin-bottom: 52px;
}


.certificates-heading h2 {
    margin: 0;

    color: #574a3f;

    font-family:
        Baskerville,
        "Palatino Linotype",
        Palatino,
        Georgia,
        serif;

    font-size: clamp(2.8rem, 4.1vw, 4.5rem);
    font-weight: 400;

    line-height: 1.04;
    letter-spacing: -0.03em;
}


.certificates-heading > p {
    margin: 0;

    padding: 22px 26px;

    color: #675a4e;

    background:
        rgba(255, 253, 239, 0.80);

    border:
        1px solid rgba(98, 72, 44, 0.10);

    border-radius: 18px;

    font-size: 18px !important;
    line-height: 1.7;
}


/* =========================================================
   SLIDER
========================================================= */

.certificate-slider {
    position: relative;

    display: grid;

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

    align-items: center;

    gap: 22px;

    max-width: 980px;

    margin-inline: auto;
}


.certificate-viewport {
    position: relative;

    overflow: hidden;

    min-height: 680px;

    background:
        rgba(255, 253, 239, 0.90);

    border:
        1px solid rgba(94, 69, 42, 0.10);

    border-radius: 30px;

    box-shadow:
        0 20px 52px rgba(75, 55, 34, 0.12);
}


.certificate-track {
    display: flex;

    width: 100%;

    transition:
        transform 0.45s
        cubic-bezier(.22, .61, .36, 1);
}


.certificate-slide {
    flex:
        0 0 100%;

    width: 100%;

    padding:
        35px 35px 30px;
}


.certificate-document {
    display: flex;

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

    width: 100%;
    height: 530px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(84, 64, 43, 0.10);

    border-radius: 22px;
}


.certificate-document img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 20px !important;
}


.certificate-document iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
    border-radius: 20px;
}


/* Text unter dem Dokument */

.certificate-caption {
    padding-top: 24px;

    text-align: center;
}


.certificate-caption h3 {
    margin: 0 0 13px;

    color: #574a3f;

    font-family:
        Baskerville,
        "Palatino Linotype",
        Palatino,
        Georgia,
        serif;

    font-size: 28px !important;
    font-weight: 400;

    line-height: 1.2;
}


.certificate-caption a {
    display: inline-flex;

    align-items: center;

    min-height: 46px;

    padding: 0 20px;

    color: #8f604a;

    background:
        rgba(241, 220, 115, 0.42);

    border-radius: 999px;

    font-size: 18px !important;
    font-weight: 600;

    text-decoration: none;
}


/* Pfeile */

.certificate-arrow {
    display: grid;

    place-items: center;

    width: 58px;
    height: 58px;

    padding: 0;

    color: #765a49;

    background:
        rgba(255, 253, 239, 0.90);

    border:
        1px solid rgba(103, 76, 47, 0.15);

    border-radius: 50%;

    cursor: pointer;

    font-size: 27px;

    box-shadow:
        0 9px 22px rgba(75, 55, 34, 0.08);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.certificate-arrow:hover {
    transform: scale(1.06);

    background:
        #f2df77;
}


.certificate-arrow:disabled {
    opacity: 0.3;

    cursor: default;

    transform: none;
}


/* Punkte */

.certificate-dots {
    grid-column:
        1 / -1;

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 4px;
}


.certificate-dot {
    width: 11px;
    height: 11px;

    padding: 0;

    background:
        rgba(104, 81, 59, 0.25);

    border: 0;
    border-radius: 50%;

    cursor: pointer;
}


.certificate-dot.is-active {
    width: 28px;

    background:
        #d88c69;

    border-radius: 999px;
}


/* =========================================================
   KEINE ZERTIFIKATE
========================================================= */

.certificate-empty {
    display: flex;

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

    min-height: 330px;

    padding: 40px;

    color: #6b5d51;

    background:
        rgba(255, 253, 239, 0.84);

    border-radius: 24px;

    text-align: center;

    font-size: 18px !important;
}


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

@media (max-width: 900px) {

    .certificates-heading {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    .certificate-slider {
        grid-template-columns:
            52px
            minmax(0, 1fr)
            52px;

        gap: 12px;
    }


    .certificate-arrow {
        width: 48px;
        height: 48px;
    }


    .certificate-viewport {
        min-height: 600px;
    }


    .certificate-document {
        height: 455px;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 600px) {

    .certificates-section {
        padding:
            72px 0;
    }


    .certificate-slider {
        display: block;
    }


    .certificate-viewport {
        min-height: 0;

        border-radius: 22px;
    }


    .certificate-slide {
        padding:
            15px 15px 23px;
    }


    .certificate-document {
        height: 430px;

        border-radius: 16px;
    }


    .certificate-document img,
    .certificate-document iframe {
        border-radius: 14px !important;
    }


    .certificate-arrow {
        position: absolute;

        z-index: 5;

        top: 210px;

        width: 44px;
        height: 44px;

        background:
            rgba(255, 253, 239, 0.94);
    }


    .certificate-arrow-prev {
        left: 7px;
    }


    .certificate-arrow-next {
        right: 7px;
    }


    .certificate-dots {
        margin-top: 18px;
    }


    .certificate-caption h3 {
        font-size: 23px !important;
    }

}



/* =========================================================
   ZERTIFIKATSVERWALTUNG – NUR ENTWICKLUNG
========================================================= */

.certificate-dev-admin[hidden] {
    display: none !important;
}

.certificate-dev-admin {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 9999;

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

    min-height: 52px;

    padding: 0 22px;

    color: #fffaf4 !important;

    background:
        linear-gradient(
            135deg,
            #df9069,
            #c97859
        );

    border:
        1px solid rgba(255,255,255,.25);

    border-radius: 999px;

    box-shadow:
        0 12px 30px rgba(91, 59, 40, .22);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif !important;

    font-size: 18px !important;
    font-weight: 650 !important;

    text-decoration: none !important;
}

.certificate-dev-admin:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 36px rgba(91, 59, 40, .28);
}


@media (max-width: 600px) {

    .certificate-dev-admin {
        right: 14px;
        bottom: 14px;

        min-height: 48px;

        padding: 0 17px;

        font-size: 16px !important;
    }

}