/* Ergänzungen zu den unveränderten Stylesheets der Altseite (presentation.css, genetics.css …) */

/* Feste Kopfleiste (Desktop): Foundation setzte per JavaScript den Abstand oben (= Höhe der Leiste), unter 960px keinen */
@media only screen and (min-width: 960px) {
    body.off-canvas { padding-top: 78px; }
}

/* Je Seite nur eine <h1>: weitere Überschriften der Altseite sind <h2 class="h1"> und sehen aus wie vorher */
h2.h1 { font-size: 44px; }
h2.h1.page_title { color: #a0aab4; }
.teaser h2.h1 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; font-weight: bold; }
h2.h1.erkrankung,
h2.h1.erbgaenge { font-family: Arial, Helvetica, sans-serif; margin: 0 0 0.5em 0; }
h2.h1.erkrankung { font-size: 2.5em; font-weight: normal; }
h2.h1.erbgaenge { font-size: 1.8em; font-weight: bold; }
.row.erbgaenge .row.vererbungsmuster h2.h1 { text-align: center; }
/* Startseite: "Genetik bei Kinderwunsch" war ein <h4> */
#introduction h1.handwritten { color: #7e8f9e; }
@media only screen and (max-width: 767px) {
    #introduction h1.handwritten { float: none !important; margin-bottom: 3px; opacity: 1 !important; }
}

/* Herausgeber und inhaltlicher Stand (neu) */
p.stand { margin: 2em 0 1em; padding-top: 0.5em; border-top: 1px dotted #aaa; font-size: 0.9em; color: #6f6f6f; }

/* Neu verfasste Seiten (Impressum, Datenschutz, 404) */
.simplepage h2 { margin-top: 0; }
.simplepage h5 { margin-top: 1.5em; margin-bottom: 0.3em; }

/* Lightbox (ersetzt ColorBox) */
.lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.85);
    align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: 90%; max-height: 90%; text-align: center; }
.lightbox img { max-width: 100%; max-height: 85vh; background: #fff; }
.lightbox figcaption { color: #eee; font-size: 13px; margin-top: 0.5em; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; font-size: 48px; line-height: 1;
    cursor: pointer; padding: 0 0.4em; }
.lightbox .lightbox-close { top: 10px; right: 10px; }
.lightbox .lightbox-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox .lightbox-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lightbox.single .lightbox-prev,
.lightbox.single .lightbox-next { display: none; }