/*
 * Gemeinsames Suchformular (17.10.2026) – Startseite, Landingpages, Suchleiste der Ergebnisseite.
 * Vorbild Parkos: breit = EINE Zeile (Flughafen | Zeitraum | Uhrzeiten | Suche),
 * schmal (Tablet/Handy oder schmale Spalte) = gestapelte Karte. Gesteuert über Container-Queries,
 * damit das Formular in jeder Spaltenbreite passt. Kalender/Flughafenliste: siehe search-form.js.
 */
.fp-sf {
    --fp-sf-accent: #0d7565;
    --fp-sf-accent-soft: #e3f3ef;
    --fp-sf-border: #e5e7eb;
    --fp-sf-muted: #6b7280;
    --fp-sf-text: #111827;
    container-type: inline-size;
    position: relative;
    width: 100%;
    text-align: left;
    color: var(--fp-sf-text);   /* nicht die weiße Hero-Schrift (text-white) erben – sonst Monatsnamen unsichtbar */
}
.fp-sf-grid {
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
    overflow: visible;
}
.fp-sf-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fp-sf-border);
    min-width: 0;
}
.fp-sf-icon { color: var(--fp-sf-text); font-size: 1.15rem; width: 22px; text-align: center; flex: 0 0 auto; }
.fp-sf-body { flex: 1 1 auto; min-width: 0; }
.fp-sf-label {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; line-height: 1.1; color: var(--fp-sf-muted);
    margin: 0 0 3px; font-weight: 500; text-transform: none; letter-spacing: 0;
}

/* Ohne JS / Rückfall: native Felder kompakt im Feld */
.fp-sf .form-select, .fp-sf .form-control {
    border: 0; padding: 0; font-size: 16px; font-weight: 600; color: var(--fp-sf-text);
    background-color: transparent; box-shadow: none; min-height: 0;
}
.fp-sf .form-select { padding-right: 1.6rem; background-position: right 0 center; }
/* Abgeben / Abholen (18.10.2026, wie Parkos): je Zeile Datum links, Uhrzeit rechts */
.fp-sf-when { gap: 12px; }
.fp-sf-date { flex: 1 1 auto; min-width: 0; }
.fp-sf-time { flex: 0 0 104px; min-width: 0; }
.fp-sf-when.fp-sf-active .fp-sf-value { color: var(--fp-sf-accent); }
/* Abholdatum wurde wegen eines späteren Abgabedatums mitverschoben: kurz hervorheben */
.fp-sf-when.fp-sf-changed { animation: fpSfFlash 1.6s ease-out; }
@keyframes fpSfFlash { 0%, 40% { background: var(--fp-sf-accent-soft); } 100% { background: transparent; } }
.fp-sf-select {
    appearance: none; -webkit-appearance: none;
    border: 0; background: transparent; padding: 0 22px 0 0; margin: 0;
    font-size: 16px; font-weight: 600; color: var(--fp-sf-text); cursor: pointer; width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7280' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center;
}
.fp-sf-select:focus { outline: 2px solid var(--fp-sf-accent); outline-offset: 3px; border-radius: 4px; }
.fp-sf-info { color: #9ca3af; cursor: help; font-size: .8rem; }

/* Suche-Button: Primärfarbe wie überall auf der Seite (btn-primary). Er sitzt IMMER mit weißem Rand im
   weißen Kasten – so bleibt er auch auf dunklen Hero-Fotos sichtbar (Wunsch 17.10.2026). */
.fp-sf-submit {
    border: 0; background: var(--bs-primary, #2c3e50); color: #fff; font-weight: 700; font-size: 1.05rem;
    padding: 14px 24px; margin: 12px 16px 16px; border-radius: 10px; cursor: pointer;
    transition: filter .15s;
}
.fp-sf-submit:hover { filter: brightness(1.15); }
.fp-sf-submit:focus-visible { outline: 3px solid var(--fp-sf-accent); outline-offset: 2px; }

/* Breit: eine Zeile wie bei Parkos */
@container (min-width: 860px) {
    .fp-sf-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; align-items: stretch; }
    .fp-sf-field { border-bottom: 0; border-right: 1px solid var(--fp-sf-border); padding: 10px 18px; min-height: 64px; }
    .fp-sf-submit { margin: 8px; border-radius: 10px; padding: 0 34px; }
    .fp-sf-when { gap: 10px; }
    .fp-sf-time { flex-basis: 84px; }
}

/* Startseite + Landingpages: ganzes Formular in einem weißen Kasten (wie vorher), damit Felder und Button
   auf jedem Hero-Hintergrund (Farbverlauf oder dunkles Foto) gleich aussehen. */
.fp-sf-card {
    background: #fff; border-radius: 16px; padding: 12px;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
}
.fp-sf-card .fp-sf-grid { box-shadow: none; border: 1px solid var(--fp-sf-border); border-radius: 12px; }
@media (min-width: 768px) { .fp-sf-card { padding: 16px; } }

/* Suchleiste der Ergebnisseite: flacher */
.fp-sf--bar .fp-sf-grid { box-shadow: 0 4px 14px rgba(15, 23, 42, .18); }
@container (min-width: 860px) {
    .fp-sf--bar .fp-sf-field { min-height: 56px; padding: 6px 16px; }
}

/* ── Mit JS: Komfort-Bedienung ─────────────────────────────────────────── */
.fp-sf--js .fp-sf-native-airport,
.fp-sf--js .fp-sf-date-native { display: none !important; }

.fp-sf-trigger {
    display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 0; margin: 0;
    font: inherit; color: var(--fp-sf-text); cursor: pointer;
}
.fp-sf-trigger:focus-visible { outline: 2px solid var(--fp-sf-accent); outline-offset: 4px; border-radius: 4px; }
.fp-sf-value { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-sf-labels2 { display: flex; gap: 0; }
.fp-sf-labels2 span { flex: 1 1 0; }

.fp-sf-airport-input {
    width: 100%; border: 0; padding: 0; margin: 0; background: transparent;
    font-size: 16px; font-weight: 600; color: var(--fp-sf-text);
}
.fp-sf-airport-input::placeholder { color: var(--fp-sf-text); font-weight: 600; opacity: .85; }
.fp-sf-airport-input:focus { outline: none; }
.fp-sf-airport.fp-sf-invalid { box-shadow: inset 0 0 0 2px #dc3545; border-radius: 10px; }

/* Flughafen-Vorschläge (Desktop-Popover) */
.fp-sf-ac {
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 1060;
    width: max(100%, 340px); max-height: 340px; overflow-y: auto;
    background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .22); padding: 6px 0;
}
.fp-sf-ac-group { padding: 10px 16px 4px; font-size: .78rem; font-weight: 700; color: var(--fp-sf-text); }
.fp-sf-ac-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 16px; cursor: pointer; line-height: 1.25;
}
.fp-sf-ac-item[aria-selected="true"], .fp-sf-ac-item:hover { background: #f3f4f6; }
.fp-sf-ac-item.fp-sf-current .fp-sf-ac-name { color: var(--fp-sf-accent); }
.fp-sf-ac-name { font-weight: 600; font-size: .92rem; color: var(--fp-sf-text); }
.fp-sf-ac-sub { font-size: .76rem; color: var(--fp-sf-muted); }
.fp-sf-ac-code {
    flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: #4b5563;
    background: #f3f4f6; border-radius: 4px; padding: 4px 7px;
}
.fp-sf-ac-empty { padding: 14px 16px; color: var(--fp-sf-muted); font-size: .9rem; }

/* Kalender (Desktop-Popover, zwei Monate) */
.fp-sf-cal {
    position: absolute; z-index: 1060; top: calc(100% + 4px); left: 0;
    background: #fff; border-radius: 12px; box-shadow: 0 14px 40px rgba(15, 23, 42, .25);
    padding: 14px 16px 16px; width: 640px; max-width: calc(100vw - 24px);
}
.fp-sf-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fp-sf-cal-nav {
    width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--fp-sf-text);
    font-size: 1rem; cursor: pointer;
}
.fp-sf-cal-nav:hover:not(:disabled) { background: #f3f4f6; }
.fp-sf-cal-nav:disabled { color: #d1d5db; cursor: default; }
.fp-sf-cal-hint { font-size: .8rem; color: var(--fp-sf-muted); }
/* Ein-Monats-Kalender je Datum (18.10.2026) */
.fp-sf-cal--single { width: 330px; }
.fp-sf-cal-title { font-weight: 700; font-size: .95rem; text-transform: capitalize; }
.fp-sf-cal--single .fp-sf-cal-head { margin-bottom: 8px; }
.fp-sf-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fp-sf-month-title { text-align: center; font-weight: 700; font-size: .95rem; margin: 2px 0 8px; }
.fp-sf-week, .fp-sf-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.fp-sf-week span { text-align: center; font-size: .75rem; color: var(--fp-sf-muted); padding-bottom: 6px; border-bottom: 1px solid var(--fp-sf-border); margin-bottom: 4px; }
.fp-sf-day {
    position: relative; border: 0; background: transparent; height: 38px; margin: 2px 0; padding: 0;
    font-size: .9rem; font-weight: 500; color: var(--fp-sf-text); cursor: pointer;
}
.fp-sf-day span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; position: relative; z-index: 1; }
.fp-sf-day:hover:not(:disabled) span { box-shadow: inset 0 0 0 1.5px var(--fp-sf-accent); }
.fp-sf-day:disabled { color: #c7cbd1; cursor: default; }
.fp-sf-day.fp-sf-in { background: var(--fp-sf-accent-soft); }
.fp-sf-day.fp-sf-start, .fp-sf-day.fp-sf-end { background: linear-gradient(to right, transparent 50%, var(--fp-sf-accent-soft) 50%); }
.fp-sf-day.fp-sf-end { background: linear-gradient(to left, transparent 50%, var(--fp-sf-accent-soft) 50%); }
.fp-sf-day.fp-sf-start.fp-sf-end, .fp-sf-day.fp-sf-start.fp-sf-solo { background: transparent; }
.fp-sf-day.fp-sf-start span, .fp-sf-day.fp-sf-end span { background: var(--fp-sf-accent); color: #fff; font-weight: 700; }
.fp-sf-day.fp-sf-today span { text-decoration: underline; text-underline-offset: 3px; }

/* Handy (18.10.2026, wie Parkos): Kalender klappt direkt unter dem Datumsfeld auf, in Kartenbreite */
@media (max-width: 767.98px) {
    .fp-sf-cal { padding: 10px 10px 12px; max-width: 100%; }
    .fp-sf-day { height: 40px; }
    .fp-sf-day span { width: 36px; height: 36px; }
}

/* Handy/Tablet: Vollbild-Blatt (Flughafen) */
.fp-sf-sheet {
    position: fixed; inset: 0; z-index: 1080; background: #fff; display: flex; flex-direction: column;
    animation: fpSfUp .18s ease-out;
}
@keyframes fpSfUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.fp-sf-sheet-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fp-sf-border);
}
.fp-sf-sheet-title { flex: 1 1 auto; font-weight: 700; font-size: 1rem; }
.fp-sf-sheet-close { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; padding: 4px 8px; color: #4b5563; cursor: pointer; }
.fp-sf-sheet-search { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.fp-sf-sheet-search input { flex: 1 1 auto; border: 0; font-size: 16px; padding: 6px 0; }
.fp-sf-sheet-search input:focus { outline: none; }
.fp-sf-sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 24px; }
.fp-sf-sheet .fp-sf-week { position: sticky; top: 0; background: #fff; z-index: 2; padding: 8px 12px 0; }
.fp-sf-sheet .fp-sf-month { padding: 0 12px; margin-top: 14px; }
.fp-sf-sheet .fp-sf-month-title { text-align: left; font-size: 1rem; margin: 6px 4px 6px; }
.fp-sf-sheet .fp-sf-day { height: 46px; font-size: 1rem; }
.fp-sf-sheet .fp-sf-day span { width: 40px; height: 40px; }
.fp-sf-sheet-foot {
    border-top: 1px solid var(--fp-sf-border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600;
}
.fp-sf-sheet-foot .fp-sf-hint { color: var(--fp-sf-muted); font-weight: 500; font-size: .9rem; }
.fp-sf-sheet .fp-sf-ac-item { padding: 12px 18px; }
.fp-sf-sheet .fp-sf-ac-group { padding: 16px 18px 6px; font-size: .85rem; }
html.fp-sf-lock, html.fp-sf-lock body { overflow: hidden; }