/* Zygoma page — section 1: hero banner (YOOtheme slideshow 16:7) */

.a4-zygoma-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #111;
    /* Scale with viewport — no forced 600px on mid widths */
    aspect-ratio: 16 / 7;
    min-height: 0;
    max-height: 840px;
    height: auto;
}

@media (min-width: 1400px) {
    .a4-zygoma-hero {
		aspect-ratio: auto;
        min-height: 600px;
    }
}
.a4-zygoma-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.a4-zygoma-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center; /* keep left text-safe area of the photo */
}

/* Keep ~16:7 on wide screens, but never below 600 / above 840 */
@media (max-width: 959px) {
    .a4-zygoma-hero {
        aspect-ratio: auto;
        max-height: none;
    }
    .a4-zygoma-hero__media img {
        object-position: center center;
    }
}

.a4-zygoma-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.a4-zygoma-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.a4-zygoma-hero__overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

.a4-zygoma-hero__content {
    max-width: 450px;
    margin: 0;
    text-align: left;
}

/* @media (max-width: 959px) {
    .a4-zygoma-hero__content {
        max-width: 100%;
    }
} */

/* uk-text-lead */
.a4-zygoma-hero__eyebrow {
    margin: 20px 0 0;
    font-family: var(--a4-font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #2d2e33;
}

.a4-zygoma-hero__eyebrow strong {
    font-weight: 700;
}

/* uk-heading-small */
.a4-zygoma-hero__title {
    margin: 20px 0 0;
    font-family: var(--a4-font-body);
    font-size: 38.4px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: none;
    color: #2d2e33;
}

@media (min-width: 960px) {
    .a4-zygoma-hero__title {
        font-size: 48px;
    }
	
	.a4-zygoma-hero {
        aspect-ratio: auto;
        height: 100vh;
        min-height: 100vh;
        max-height: none;
    }
}

.a4-zygoma-hero__text {
    margin-top: 20px;
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #6c6d74;
}

.a4-zygoma-hero__text p {
    margin: 0;
}

.a4-zygoma-hero__cta {
    margin-top: 20px;
}

/* uk-button-danger */
.a4-button--danger {
    display: inline-block;
    box-sizing: border-box;
    padding: 0 20px;
    border: 5px solid transparent;
    border-radius: 10px;
    background-color: #e74922;
    color: #fff;
    font-family: var(--a4-font-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-decoration: none;
    transition: .1s ease-in-out;
}

.a4-button--danger:hover {
    background-color: #cc3713;
    border-color: #cc3713;
    color: #fff;
    text-decoration: none;
}

@media (max-width: 959px) {
    .a4-zygoma-hero {
        min-height: 480px;
        max-height: none;
    }
}

@media (max-width: 375px) {
	.a4-zygoma-hero__title {
		font-size: 31.4px;
	}
	
	.a4-zygoma-hero__cta .a4-button--danger {
		font-size: 16px;
	}
}

/* ==========================================================================
   Section 2: excellence bar (uk-section-muted)
   ========================================================================== */

.a4-zygoma-trust {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #f7f7f7;
    color: #6c6d74;
    font-family: var(--a4-font-body);
    font-size: 18px;
}

.a4-zygoma-trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

@media (min-width: 640px) {
    .a4-zygoma-trust__grid {
        grid-template-columns: 1fr 1fr;
    }

    .a4-zygoma-trust__logos {
        grid-column: 1 / -1;
    }
}

@media (min-width: 960px) {
    .a4-zygoma-trust__grid {
        grid-template-columns: 1fr 1fr 2fr;
        gap: 20px 30px;
    }

    .a4-zygoma-trust__logos {
        grid-column: auto;
    }
}

/* uk-h5 + uk-text-muted */
.a4-zygoma-trust__heading {
    margin: 0;
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
    color: #b4b5ba;
}

.a4-zygoma-trust__seal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.a4-zygoma-trust__seal img {
    display: block;
    width: 180px;
    max-width: 100%;
    height: auto;
}

.a4-zygoma-trust__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 24px 40px;
}

.a4-zygoma-trust__logos img {
    display: block;
    width: auto;
    max-width: 120px;
    height: auto;
}

@media (min-width: 960px) {
    .a4-zygoma-trust__logos {
        justify-content: space-evenly;
    }
}

/* ==========================================================================
   Section 3: intro + audience (uk-section-large + scrollspy)
   ========================================================================== */

.a4-zygoma-intro {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #fff;
}

@media (min-width: 960px) {
    .a4-zygoma-intro {
        padding-top: 140px;
        padding-bottom: 140px;
    }
}

.a4-zygoma-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 960px) {
    .a4-zygoma-intro__grid {
        grid-template-columns: 2fr 1fr; /* uk-width-2-3 / 1-3 */
        gap: 40px;
    }
}

/* h2 — 32px → 50px, orange */
.a4-zygoma-intro__title {
    margin: 0 0 20px;
    font-family: var(--a4-font-heading);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    color: #e74922;
}

@media (min-width: 960px) {
    .a4-zygoma-intro__title {
        font-size: 50px;
    }
}

.a4-zygoma-intro__title--muted {
    margin-top: 40px;
    color: #adadad; /* uk-text-muted */
}

/* uk-text-lead — 20px */
.a4-zygoma-intro__lead {
    margin: 0 0 20px;
    font-family: var(--a4-font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #2d2e33;
}

.a4-zygoma-intro__lead p {
    margin: 0;
}

/* body text — 18px */
.a4-zygoma-intro__text {
    margin: 0 0 20px;
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #6c6d74;
}

.a4-zygoma-intro__text p {
    margin: 0 0 20px;
}

.a4-zygoma-intro__text p:last-child {
    margin-bottom: 0;
}

.a4-zygoma-intro__cta {
    margin: 40px 0;
}

/* uk-button-primary + icon */
.a4-button--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 20px;
    border: 5px solid transparent;
    border-radius: 10px;
    background-color: #e74922;
    color: #fff;
    font-family: var(--a4-font-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition: .1s ease-in-out;
}

.a4-button--primary:hover {
    background-color: #cc3713;
    border-color: #cc3713;
    color: #fff;
    text-decoration: none;
}

.a4-button--with-icon .a4-button__icon {
    display: inline-flex;
    margin-right: 10px;
}

.a4-button--with-icon .a4-button__icon svg {
    display: block;
}

.a4-zygoma-intro__image img {
    display: block;
    width: 100%;
    height: auto;
}

.a4-zygoma-intro__caption {
    margin-top: 20px;
    font-family: var(--a4-font-body);
    font-size: 18px;
    line-height: 1.3;
    color: #6c6d74;
}

.a4-zygoma-intro__caption p {
    margin: 0;
}

/* Scroll reveal — uk-animation-slide-top-small */
[data-a4-reveal] {
    opacity: 0;
    transform: translateY(-30px);
    transition: opacity .5s ease, transform .5s ease;
}

[data-a4-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Sections 4–5 & 7–8: split blocks (text/image + image/text)
   ========================================================================== */

.a4-zygoma-split {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #fff;
}

.a4-zygoma-split.a4-zygoma-split--ablauf {
	padding-bottom: 140px;
}

.a4-zygoma-split__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 960px) {
    .a4-zygoma-split__grid {
        grid-template-columns: 1fr 1fr;
        gap: 19px;
    }

    /* Image on the right → align right (compare + spezialisten) */
    .a4-zygoma-split--compare .a4-zygoma-split__media img,
    .a4-zygoma-split--spezialisten .a4-zygoma-split__media img {
        width: 95%;
        max-width: 95%;
        margin-left: auto;
        margin-right: 0;
    }

    /* Image on the left → align left (aufbau + ablauf) */
    .a4-zygoma-split--aufbau .a4-zygoma-split__media img,
    .a4-zygoma-split--ablauf .a4-zygoma-split__media img {
        width: 95%;
        max-width: 95%;
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 959px) {
    .a4-zygoma-split__grid--reverse .a4-zygoma-split__media {
        order: -1; /* image on top on mobile for aufbau / ablauf */
    }

    h3.a4-zygoma-split__title {
        font-size: 28px;
    }
	
	.a4-zygoma-split.a4-zygoma-split--ablauf {
		padding-bottom: 40px;
	}
}

h3.a4-zygoma-split__title {
    margin: 0 0 20px;
    font-size: 28px;
    font-family: var(--a4-font-heading);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    color: #adadad;
}

/* uk-text-lead — 20px */
.a4-zygoma-split__lead {
    margin: 0 0 20px;
    font-family: var(--a4-font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: #2d2e33;
}

.a4-zygoma-split__lead p {
    margin: 0;
}

/* body — 18px */
.a4-zygoma-split__text {
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #6c6d74;
}

.a4-zygoma-split__text p {
    margin: 0 0 20px;
}

.a4-zygoma-split__text p:last-child {
    margin-bottom: 0;
}

.a4-zygoma-split__media img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 375px) {
    h3.a4-zygoma-split__title {
        font-size: 23px;
    }
}

/* ==========================================================================
   Section 6: benefits image + list
   ========================================================================== */

.a4-zygoma-benefits {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #fff;
}

.a4-zygoma-benefits__image {
    margin: 0 0 20px;
}

.a4-zygoma-benefits__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 560;
    object-fit: cover;
}

.a4-zygoma-benefits__list {
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #6c6d74;
}

.a4-zygoma-benefits__list ul {
    margin: 0;
    padding-left: 30px;
}

.a4-zygoma-benefits__list li {
    margin-bottom: 0;
}

.a4-zygoma-benefits__list li + li {
    margin-top: 0;
}

/* ==========================================================================
   Section 9: CTA (beratung + Zum Video)
   ========================================================================== */

.a4-zygoma-cta {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #f7f7f7;
}

.a4-zygoma-cta__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
}

@media (min-width: 960px) {
    .a4-zygoma-cta__grid {
        grid-template-columns: 1fr 1fr;
        gap: 19px;
    }
}

h4.a4-zygoma-cta__title {
    margin: 0;
    font-family: var(--a4-font-body);
    font-size: 30px;
    font-weight: 500;
    line-height: 1.2;
    color: #2d2e33;
    text-transform: none;
}

.a4-zygoma-cta__text {
    margin: 0 0 20px;
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #6c6d74;
}

.a4-zygoma-cta__text p {
    margin: 0;
}

.a4-zygoma-cta__actions {
    margin-top: 40px;
}

.a4-zygoma-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 17px;
}

@media (max-width: 375px) {
    .a4-zygoma-cta__btn {
        font-size: 16px;
    }
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.a4-zygoma-faq {
    padding-top: 40px;
    padding-bottom: 40px;
    background: #fff;
}

@media (min-width: 960px) {
    .a4-zygoma-faq {
        padding-top: 140px;
        padding-bottom: 140px;
    }
}

h2.a4-zygoma-faq__title {
    margin: 0 0 40px;
    font-family: var(--a4-font-heading);
    font-size: 50px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    color: #e74922;
}

.a4-accordion__item + .a4-accordion__item {
    margin-top: 12px;
}

.a4-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 14px 20px;
    border: 0;
    border-radius: 10px;
    background: #ADADAD;
    color: #fff;
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* no hover style — cursor only */
.a4-accordion__trigger:hover,
.a4-accordion__trigger:focus {
    background: #ADADAD;
    color: #fff;
}

.a4-accordion__trigger:focus-visible {
    outline: 2px solid #e74922;
    outline-offset: 2px;
}

.a4-accordion__question {
    flex: 1 1 auto;
}

.a4-accordion__icon {
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
}

.a4-accordion__icon::before,
.a4-accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #6C6D74;
    transform: translate(-50%, -50%);
}

/* + */
.a4-accordion__icon::before {
    width: 14px;
    height: 2px;
}

.a4-accordion__icon::after {
    width: 2px;
    height: 14px;
}

/* open → − (hide vertical bar) */
.a4-accordion__item.is-open .a4-accordion__icon::after {
    display: none;
}

.a4-accordion__panel {
    overflow: hidden;
    height: 0;
    transition: height 0.35s ease;
}

.a4-accordion__content {
    padding: 24px 4px 8px;
    font-family: var(--a4-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    color: #6c6d74;
}

.a4-accordion__content > *:first-child {
    margin-top: 0;
}

.a4-accordion__content > *:last-child {
    margin-bottom: 0;
}

.a4-accordion__content p {
    margin: 0 0 20px;
}

.a4-accordion__content h3 {
    margin: 24px 0 20px;
    font-family: var(--a4-font-heading);
    font-size: 28px;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    color: #adadad;
}

.a4-accordion__content ul {
    margin: 0 0 20px;
    padding-left: 0;
    list-style: none;
}

.a4-accordion__content li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 0;
}

.a4-accordion__content li::before {
    content: "+";
    position: absolute;
    left: 0;
}

@media (max-width: 959px) {
	h2.a4-zygoma-faq__title {
    	font-size: 32px;
	}
}