/* ivf.at – Ergänzungen zum übernommenen Design (ivf.at.css, ivf.at_style_bootstrapnew.css) */

/* ---------- Footer: Wellen-Übergang (vorher Inline-Style im Footer-Template) ---------- */
.footerborderwave svg.wave1,
.footerborderwave svg.wave2 {
    background-color: #ac7499;
    height: 100px;
    width: 100%;
}

.footerborderwave svg.wave1 path { fill: #ffffff; }
.footerborderwave svg.wave2 path { fill: #8c6c81; }

.footer { background: #8c6c81; }

.footer a,
.footer .copyright a { color: #fff; }

.footer a:hover,
.footer .copyright a:hover { color: #f7f1f5; }

/* ---------- Footer: Zertifikate ---------- */
.footer-cert.qa { margin: 0 0 1em 0; width: 13em; }
.footer-cert.iqnet { margin: 0 0 10px 10px; width: 10em; }
.footer-cert.fertiprotekt { margin: 0 0 25px 10px; width: 13em; }
.footer-cert-text { font-size: 0.875em; line-height: 1em; }

/* ---------- Startseite: Infoabend-Termin ---------- */
.nextinfoevent {
    font-weight: bold;
    font-size: 1.2em;
    color: #fff;
    background: var(--primary);
    padding: 0.2em 0.5em;
}

/* ---------- Animationen (Ersatz für wow.js) ---------- */
.wow { visibility: hidden; }
.wow.animated { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
    .wow { visibility: visible; }
    .wow.animated { animation: none !important; }
}

/* ---------- Karussell (Ersatz für Owl Carousel, gleiche CSS-Klassen) ---------- */
.owl-carousel.owl-loaded { display: block; }
.owl-carousel .owl-stage { transition-property: transform; transition-timing-function: ease; }
/* Überblend-Modus: alle Folien liegen übereinander, Höhe = höchste Folie (wie bei Owl) */
.owl-carousel.owl-fade .owl-stage { display: grid; }
.owl-carousel.owl-fade .owl-stage::after { display: none; }
.owl-carousel.owl-fade .owl-item { grid-area: 1 / 1; float: none; width: 100%; opacity: 0; }
.owl-carousel.owl-fade .owl-item.active { opacity: 1; z-index: 1; }
.owl-carousel.owl-fade .owl-item.leaving { opacity: 1; z-index: 2; }

/* ---------- "Unser Zentrum": Slider (vorher Foundation Orbit, Seitenverhältnis 16:6) ---------- */
#featuredStudies .owl-item > .row { margin: 0; }
#featuredStudies .owl-item > .row > div {
    aspect-ratio: 16 / 6;
    background-size: cover !important;
    background-position: center !important;
    padding: 0;
}
#featuredStudies .owl-item > .row > div > .row { display: none; }
#featuredStudies .owl-dots { text-align: center; margin-top: .5rem; }
#featuredStudies .owl-dot span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 4px;
    border-radius: 50%;
    background: #ddd;
}
#featuredStudies .owl-dot.active span { background: var(--primary); }
#featuredStudies .owl-dot { border: 0; background: none; padding: 0; }

/* ---------- Formulare: Honeypot-Feld (Spam-Schutz) für Menschen ausblenden ---------- */
.form-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Terminbuchung: Knöpfe statt der früheren Ajax-<div>s, Optik aus calendar.css ---------- */
#calendar button {
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
#calendar .header button.prev,
#calendar .header button.next { background: none; }
#calendar ul.dates li .calendar_day_link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
}

/* ---------- Google Maps 2-Klick-Lösung ---------- */
.map-consent {
    width: 100%;
    aspect-ratio: 9 / 8;
    max-height: 450px;
    background: #f7f1f5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 1rem;
}
.map-consent-placeholder { padding: 1.5rem; }
.map-consent iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Lightbox (Ersatz für Colorbox) ---------- */
.lightbox-dialog {
    border: 0;
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
    background: #fff;
    box-shadow: 0 0 2rem rgba(0, 0, 0, .4);
}

.lightbox-dialog::backdrop { background: rgba(0, 0, 0, .75); }
.lightbox-dialog img { display: block; max-width: 90vw; max-height: calc(90vh - 3rem); }

.lightbox-dialog .lightbox-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .875rem;
}

.lightbox-dialog .lightbox-title { flex: 1; }
.lightbox-dialog button { border: 0; background: none; font-size: 1.25rem; line-height: 1; }


/* Header-Slider: Pfeile mit Abstand neben den Punkten (Breite setzt site.js passend zur Folienanzahl) */
.header-carousel .owl-nav { width: 310px; }

/* Team-Karten (/institut/team) wie im Altsystem: Foto passt in seine Spalte, Name in Georgia, Beschreibung klein in Arial */
.member_items .profilepic { width: 100%; height: auto; }
.member_items .person .name { font-family: Georgia, "Times New Roman", Times, serif; font-size: 17px; font-weight: 400; line-height: 1.1; color: #4a627b; margin: 14px 0; }
.member_items .person .job_position { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #4e5962; margin: 0 0 17px; }
.member_items .person .job_fulltitle { font-family: Arial, Helvetica, sans-serif; font-size: 11.9px; line-height: 1; color: #4e5962; margin: 0; }

/* Kästen aus dem Altsystem (.teaser.v002) in Bootstrap-Zeilen mit Abstand (row g-4): die alte Regel
   "margin: 0 0 5px" hebt den Ausgleich für den negativen Zeilenabstand auf -> Rahmen lag über dem Text darüber */
.row > .teaser.v002 { margin-top: var(--bs-gutter-y); }

/* Bilder nie breiter als ihr Kasten (wie img { max-width: 100% } im alten Foundation-Layout).
   Ohne height: auto, weil manche Logos ihre Höhe per CSS festlegen und sonst größer würden. */
.container-xxl img { max-width: 100%; }

/* Buttons aus dem Altsystem (Foundation-Klasse "button", Regeln aus css/presentation.css der alten Seite):
   hellblauer Verlauf, beim Darüberfahren dunkler mit weißer Schrift; Varianten rose, large, small, tiny */
.container-xxl .button {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 10px 20px 11px;
    border: 0;
    border-radius: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    color: #70839b;
    text-shadow: 0 1px 1px #fff;
    background: linear-gradient(to bottom, #d7ecf9 0%, #b7d7f6 100%);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}
.container-xxl .button:hover, .container-xxl .button:focus {
    color: #fff;
    text-shadow: none;
    background: linear-gradient(to bottom, #b0ddf6 0%, #7ab9f1 100%);
}
.container-xxl .button.rose {
    color: #997987;
    border: 1px solid #ead2de;
    background: linear-gradient(to bottom, #f9d7e0 0%, #f6b7c1 100%);
}
.container-xxl .button.rose:hover, .container-xxl .button.rose:focus {
    color: #fff;
    text-shadow: none;
    background: linear-gradient(to bottom, #f3cddc 0%, #e09ab4 100%);
}
.container-xxl .button.large { font-size: 17px; padding: 15px 30px 16px; }
.container-xxl .button.small { font-size: 11px; padding: 7px 14px 8px; }
.container-xxl .button.tiny { font-size: 10px; padding: 5px 10px 6px; }

/* Sichtbarkeit aus dem Altsystem (Foundation 3, "small" = unter 768 px). Nur das Ausblenden wird
   übernommen; das alte "display: inherit !important" würde Bootstrap-Zeilen (flex) zerstören. */
@media (min-width: 768px) { .show-for-small { display: none !important; } }
@media (max-width: 767.98px) { .hide-for-small { display: none !important; } }

/* Großer KONTAKT-Button der alten Seiten (Team, Service, Besuch in Bregenz): auf dem Handy übernimmt
   der kleine #mainSliderBtoMobile (show-for-small), wie auf der Live-Seite */
#mainSliderBto { padding: 20px 40px; }
@media (max-width: 767.98px) {
    #mainSliderBto { display: none; }
    #mainSliderBtoMobile { display: block; width: 75%; margin: 12px auto; }
}