/* =========================================================================
   Gemeinsames Grundgeruest der Popups in den Designvarianten.

   Hier steht nur, was die Popups zum FUNKTIONIEREN brauchen, plus ein
   neutrales Aussehen ueber Variablen. Jede Variante setzt die Variablen
   (oder ueberschreibt einzelne Regeln) in ihrem eigenen CSS:

     --fv-scrim      Abdunklung hinter dem Popup
     --fv-bg / --fv-fg / --fv-muted / --fv-line
     --fv-accent / --fv-accent-fg     Sende-Knopf, Fokus
     --fv-radius     Ecken der Box
     --fv-feld-radius Ecken von Feldern und Knoepfen
     --fv-rand       Rahmenstaerke der Box
     --fv-schatten   Schatten der Box
     --fv-font / --fv-font-titel
   ========================================================================= */

html.fv-gesperrt, html.fv-gesperrt body { overflow: hidden; }

.fv-modal {
    position: fixed; inset: 0; z-index: 10000;
    display: none; align-items: center; justify-content: center;
    padding: 1rem; overflow-y: auto;
    background: var(--fv-scrim, rgba(10, 10, 10, .65));
}
.fv-modal.offen { display: flex; }
.fv-modal[hidden] { display: none; }

.fv-box {
    position: relative; width: 100%; max-width: 40rem; margin: auto;
    background: var(--fv-bg, #fff); color: var(--fv-fg, #141414);
    font-family: var(--fv-font, system-ui, sans-serif);
    border: var(--fv-rand, 0) solid var(--fv-line, #ddd);
    border-radius: var(--fv-radius, 4px);
    box-shadow: var(--fv-schatten, 0 30px 60px -20px rgba(0, 0, 0, .45));
    overflow: hidden;
}
.fv-verlassen-box { max-width: 32rem; }

.fv-kopf {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--fv-line, #e5e5e5);
}
.fv-titel {
    margin: 0; font-family: var(--fv-font-titel, inherit);
    font-size: 1.35rem; line-height: 1.2; font-weight: 800;
}
.fv-intro { margin: .35rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--fv-muted, #666); }
.fv-zu {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; margin: -.4rem -.6rem 0 0;
    border: 0; background: transparent; color: var(--fv-muted, #666);
    font-size: 1.7rem; line-height: 1; cursor: pointer; border-radius: var(--fv-feld-radius, 2px);
}
.fv-zu:hover { color: var(--fv-fg, #141414); }

.fv-form { padding: 1.25rem 1.5rem 1.5rem; }
.fv-falle { position: absolute; left: -9999px; }
.fv-raster { display: grid; gap: .75rem; }
@media (min-width: 640px) { .fv-raster { grid-template-columns: 1fr 1fr; } }
.fv-feld { display: block; margin-top: .75rem; }
.fv-raster .fv-feld { margin-top: 0; }
.fv-feld-schmal { max-width: 22rem; }
.fv-label {
    display: block; margin-bottom: .35rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--fv-muted, #666);
}
.fv-input {
    display: block; width: 100%; box-sizing: border-box;
    padding: .7rem .85rem; font: inherit; font-size: .95rem;
    color: var(--fv-fg, #141414); background: var(--fv-input-bg, transparent);
    border: 2px solid var(--fv-line, #ddd); border-radius: var(--fv-feld-radius, 2px);
}
textarea.fv-input { resize: vertical; min-height: 7rem; }
.fv-input:focus { outline: none; border-color: var(--fv-accent, #e05a2b); }

.fv-meldung { margin-top: 1rem; padding: .75rem 1rem; font-size: .85rem; border-radius: var(--fv-feld-radius, 2px); }
.fv-meldung[data-art="laeuft"] { background: rgba(127, 127, 127, .12); }
.fv-meldung[data-art="ok"] { background: #dff3e4; color: #14532d; }
.fv-meldung[data-art="fehler"] { background: #fde2e1; color: #7f1d1d; }

.fv-fuss { display: flex; flex-direction: column-reverse; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .fv-fuss { flex-direction: row; align-items: center; justify-content: space-between; } }
.fv-klein { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--fv-muted, #666); }
.fv-klein a { color: inherit; text-decoration: underline; }

.fv-senden, .fv-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    flex-shrink: 0; padding: .85rem 1.6rem; cursor: pointer; text-decoration: none;
    font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    border: 2px solid var(--fv-accent, #e05a2b); border-radius: var(--fv-feld-radius, 2px);
    background: var(--fv-accent, #e05a2b); color: var(--fv-accent-fg, #fff);
}
.fv-senden:disabled { opacity: .6; cursor: not-allowed; }
.fv-knopf-zweit { background: transparent; color: var(--fv-fg, #141414); border-color: var(--fv-line, #ddd); }

.fv-kalender-box { max-width: 64rem; height: min(88vh, 820px); display: flex; flex-direction: column; }
.fv-kalender-frame { flex: 1; width: 100%; border: 0; background: #fff; }

.fv-verlassen-text { padding: 1.25rem 1.5rem 0; font-size: .95rem; line-height: 1.6; }
.fv-verlassen-text p { margin: 0 0 .9rem; }
.fv-merken { display: flex; gap: .5rem; align-items: center; font-size: .8rem; color: var(--fv-muted, #666); cursor: pointer; }
.fv-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; padding: 1.25rem 1.5rem 1.5rem; }