/*
 * Popups – neues Design (hell), für die Behandlungsseiten.
 *  1) Rahmen für alle Popups (auch Infoabend-Plakat und Team): runde Ecken, runder Schließen-Knopf,
 *     ruhigere Typografie – gilt auch für den Ablauf (Handy) und den Eignungstest.
 *  2) .nv-pop: Fehlsichtigkeits-Popups aus popup-fehlsichtigkeiten.php (Schaubilder, Karten).
 * Die dunkle SmartSight-Nova-Seite hat ihre eigene Variante in smartsight-nova.css.
 */

/* ===================================================================== 1) Rahmen */
/* Gilt für alle Popups – auch das Infoabend-Plakat (nur Breite/Abstand weichen ab, siehe unten). */
.popup-background {
    max-width: 1040px;
    margin: 6vh auto;
    border-radius: var(--radius-xl);
    background-color: #fff;
    color: var(--c-text);
    box-shadow: var(--shadow-popup);
    transform: translateY(40px) scale(0.97);
    transition: transform .5s var(--ease);
}
.popup-blurry-background[aria-disabled="false"] .popup-background { transform: none; }
.popup-blurry-background {
    background-color: var(--c-overlay);
}
.popup-background .popup-close {
    width: 40px;
    height: 40px;
    margin: 18px 18px -58px 0;
    border-radius: 50%;
    background: var(--c-chip);
    color: var(--c-text);
    transition: background-color .25s, transform .25s var(--ease);
}
.popup-background .popup-close::before {
    content: "\f00d";
    inset: 0;
    width: auto;
    height: auto;
    display: grid;
    place-items: center;
    font-size: var(--fs-base);
    font-family: "Font Awesome 6 Free";
}
.popup-background .popup-close:hover {
    background: var(--c-text);   /* Schließen-Knöpfe beim Hover einheitlich schwarz */
    color: #fff;
    transform: rotate(90deg);
}
/* Inhalte im alten Aufbau (.popup-padding): Ablauf auf dem Handy, Eignungstest, Team */
.popup-background .popup-padding { padding: clamp(28px, 5vw, 56px); }
.popup-background .popup-padding :is(h2, h3) {
    margin: 0 0 18px;
    padding-right: 48px;
    font-size: var(--fs-h2);
    font-weight: 400;          /* dünn wie die Überschriften der hellen Seiten */
    line-height: 1.15;
    letter-spacing: 1px;
}
/* Zwischenüberschriften nach einem h2-Titel (Datenschutz, Impressum) */
.popup-background .popup-padding h2 ~ h3 {
    margin: 2em 0 .6em;
    padding-right: 0;
    font-size: var(--fs-lg);
    line-height: 1.3;
}
.popup-background .popup-padding h4 {
    color: var(--c-gold-text);
    font-weight: 400;
    letter-spacing: 1px;
}
/* Unterpunkte (x.x) in Rechtstexten: schwarz statt gold */
.popup-background .popup-padding h2 ~ h4 { margin: 1.6em 0 .5em; color: var(--c-text); font-size: var(--fs-md); line-height: 1.35; } /* kleiner als die x.-Überschriften (h3) */
.popup-background .popup-padding p,
.popup-background .popup-padding li {
    color: var(--c-text-soft);
    line-height: 1.65;
}
.popup-background .img-wrapper { border-radius: var(--radius-md); }
/* Bild ganz oben im Popup (z. B. Ablauf-Schritte auf dem Handy): oben die Rundung des
   Popups, unten gerade Kante zum Text */
.popup-background .img-wrapper.no-border-bottom {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
/* Plakat-Popup: schmaler, Bild füllt den Rahmen; der Schließen-Knopf liegt hell auf dem Plakat */
.popup-background:has(.popup-poster) {
    max-width: min(520px, calc((100dvh - 100px) * 2 / 3));
    margin: 50px auto;
}
.popup-background:has(.popup-poster) .popup-close { background: rgba(255, 255, 255, 0.9); }
/* Plakat scrollt nicht: X fest am Rahmen statt sticky + float. Sonst verschiebt es sich
   (v. a. Safari) beim Öffnen/Schließen, während der Rahmen per transform skaliert wird. */
.popup-background:has(.popup-poster) .popup-close {
    position: absolute;
    top: 18px;
    right: 18px;
    float: none;
    margin: 0;
}
/* Hover wie bei allen Popups schwarz – die Zeile darüber würde ihn sonst überschreiben.
   Gilt für Plakat und Anmeldeformular gleich: weiß, beim Hover schwarz. */
.popup-background:has(.popup-poster) .popup-close:hover { background: var(--c-text); color: #fff; }
@media (max-width: 700px) {
    .popup-background { margin: 3vh auto; border-radius: var(--radius-lg); }
    .popup-background .img-wrapper.no-border-bottom { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
}

/* ===================================================================== 2) Fehlsichtigkeits-Popups */
.nv-pop {
    --pop-text: var(--c-gray-900);
    --pop-soft: var(--c-gray-700);
    --pop-muted: var(--c-gray-600);
    --pop-line: rgba(0, 0, 0, 0.08);
    --pop-gold: var(--c-gold-text);       /* dunkles Logo-Gold für Text auf Weiß */
    --pop-gold-fill: var(--c-gold);  /* Flächen/Linien */
    --pop-blue: #3b7fc4;
    --pop-panel: var(--c-gray-50);
    --pop-card: var(--c-gray-50);
    --pop-chip: var(--c-gray-100);
    padding: clamp(28px, 5vw, 64px);
    color: var(--pop-text);
}
.nv-pop-eyebrow {
    margin: 0 0 10px;
    color: var(--pop-gold);
    font-size: var(--fs-base);
    font-weight: 600;
}
.nv-pop h3 {
    margin: 0 0 18px;
    padding-right: 48px;
    color: var(--pop-text);
    font-size: var(--fs-h1);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 1px;
}
.nv-pop h3 span {
    display: block;
    margin-top: 6px;
    color: var(--pop-muted);
    font-size: .45em;
    font-weight: 400;
    letter-spacing: 0;
}
.nv-pop-lead {
    max-width: 640px;
    margin: 0;
    color: var(--pop-soft);
    font-size: var(--fs-lead);
    line-height: 1.5;
}
.nv-pop-facts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 0;
    padding: 0;
}
.nv-pop-facts li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--pop-chip);
    color: var(--pop-text);
    font-size: var(--fs-sm);
    line-height: 1.3;
}
.nv-pop-facts i { color: var(--pop-gold); }
/* Icon "unscharf sehen": gefülltes Auge, Strich mit Rand in Chip-Farbe */
.nv-pop-facts .nv-ico { flex: none; width: 1.2em; height: 1.2em; overflow: visible; }
.nv-pop .nv-ico .nv-ico-eye { fill: var(--pop-gold); }
.nv-pop .nv-ico .nv-ico-cut { fill: var(--pop-chip); }
.nv-pop .nv-ico .nv-ico-halo { stroke: var(--pop-chip); stroke-width: 6; stroke-linecap: round; }
.nv-pop .nv-ico .nv-ico-slash { stroke: var(--pop-gold); stroke-width: 2.2; stroke-linecap: round; }

/* Schaubilder */
.nv-pop-figure { margin: clamp(32px, 4vw, 48px) 0; }
.nv-pop-panels { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .nv-pop-panels { grid-template-columns: 1fr 1fr; } }
.nv-pop-panel {
    padding: 20px 20px 22px;
    border-radius: var(--radius-md);
    background: var(--pop-panel);
}
.nv-pop-panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.nv-pop-panel figcaption {
    margin-top: 14px;
    color: var(--pop-muted);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.nv-pop-panel figcaption strong { display: block; margin-bottom: 2px; color: var(--pop-text); font-weight: 600; }
.nv-pop .nv-key-gold { color: var(--pop-gold); }
.nv-pop .nv-key-blue { color: var(--pop-blue); }

.nv-pop svg .eye-ball { fill: #fff; stroke: var(--c-gray-300); stroke-width: 2; }
.nv-pop svg .eye-retina { fill: none; stroke: #c4624f; stroke-width: 5; stroke-linecap: round; }
.nv-pop svg .eye-cornea { fill: none; stroke: var(--c-gray-600); stroke-width: 2.5; stroke-linecap: round; }
.nv-pop svg .eye-lens { fill: rgba(0, 0, 0, 0.04); stroke: var(--c-gray-500); stroke-width: 1.5; }
.nv-pop svg .eye-rays path { fill: none; stroke: var(--pop-gold-fill); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nv-pop svg .eye-rays-blue path { stroke: var(--pop-blue); stroke-dasharray: 6 5; }
.nv-pop svg .eye-rays-behind path { stroke-dasharray: 4 4; opacity: .7; }
.nv-pop svg .eye-focus { fill: #e2643a; }
.nv-pop svg .eye-focus-ok { fill: #34a853; }
.nv-pop svg .eye-pointer { stroke: var(--c-gray-500); stroke-width: 1; stroke-dasharray: 2 3; }
.nv-pop svg .eye-label { fill: var(--c-gray-600); font-size: var(--fs-xs); font-family: Roboto, sans-serif; }
.nv-pop svg .cornea-rings circle,
.nv-pop svg .cornea-rings ellipse { fill: none; stroke: var(--c-gray-400); stroke-width: 1.5; }
.nv-pop svg .cornea-rings circle:first-child,
.nv-pop svg .cornea-rings ellipse:first-child { fill: #fff; stroke: var(--c-gray-600); stroke-width: 2.5; }
.nv-pop svg .eye-meridian { stroke-width: 2.5; stroke-linecap: round; }
.nv-pop svg .eye-meridian-steep { stroke: var(--pop-gold-fill); }
.nv-pop svg .eye-meridian-flat { stroke: var(--pop-blue); stroke-dasharray: 6 5; }

/* Texte */
.nv-pop-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .nv-pop-grid { grid-template-columns: 1fr 1fr; } }
.nv-pop-card {
    padding: clamp(22px, 2.6vw, 32px);
    border-radius: var(--radius-md);
    background: var(--pop-card);
}
.nv-pop .nv-pop-card h4 {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin: 0 0 12px;
    color: var(--pop-text);
    font-size: var(--fs-lg);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 1px;
}
.nv-pop .nv-pop-card h4 span { color: var(--pop-gold); font-size: var(--fs-sm); }
.nv-pop-card p { margin: 0; color: var(--pop-soft); font-size: var(--fs-base); line-height: 1.65; }

.nv-pop-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
    margin-top: clamp(32px, 4vw, 48px);
    padding-top: 28px;
    border-top: 1px solid var(--pop-line);
}
.nv-pop-foot p { margin: 0; max-width: 520px; color: var(--pop-soft); font-size: var(--fs-md); }
.nv-pop .nv-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    background: var(--c-gold);
    color: #000;
    font-size: var(--fs-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s, transform .25s var(--ease);
}
.nv-pop .nv-btn:hover { background: var(--c-gold-hover); transform: scale(1.03); }