/* ========== FORMS: Grids, Felder, Buttons, Listbox, Pills ========== */

/* Grids */
.grid{ display:grid; gap:var(--gap) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,1fr) } .grid-3{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr } }

.field{ position:relative; margin-bottom:0 }
.label{
  display:block; font-weight:600; font-size:var(--label-fs); margin-bottom:var(--label-mb); color:var(--text);
  font-family:'Open Sans','Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',Helvetica,Arial,sans-serif;
  letter-spacing:.01em;
}

.input,.select,textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;

  font-size:var(--input-fs);
  font-weight:500;
  min-height:44px;
  padding:var(--input-pad-y) var(--input-pad-x);
  line-height:1.35;

  border:1px solid var(--border-strong);
  border-radius:var(--radius, 12px);   /* Fallback eingebaut */
  background:#fff; color:var(--text);
}
/* Textarea nur vertikal, nicht breiter ziehbar */
textarea{
  resize: vertical;
  max-height: 260px;
}
.input::placeholder, textarea::placeholder{ color:var(--muted); }
.input:focus,.select:focus,textarea:focus{
  outline:0; border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.sub{ margin:6px 0 14px; color:#fff } /* Hinweiszeile über Hero */

/* Checks / Pills */
.checks{ display:flex; gap:14px; flex-wrap:wrap }
.pill-group{ display:flex; gap:var(--pill-gap); flex-wrap:wrap }
.pill-group .pill{
  width:var(--pill-size); height:var(--pill-size);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--pill-border); border-radius:999px;
  background:var(--pill-bg); color:var(--pill-color);
  cursor:pointer; font-weight:600;
  transition:transform .12s, box-shadow .12s, border-color .12s, background-color .12s, color .12s;
}
.pill-group .pill:hover{ border-color:var(--pill-hover-border); box-shadow:0 0 0 4px var(--pill-focus-ring); transform:translateY(-1px) }
.pill-group .pill.is-active{ background:var(--pill-bg-active); color:var(--pill-color-active); border-color:var(--pill-border-active) }

/* Personenreihe */
.traveler-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--trav-row-gap); align-items:flex-start; margin-top:6px }
.traveler-row .field{ margin:0 }
.traveler-row .pill-group{ display:flex; gap:var(--pill-gap); flex-wrap:nowrap }
@media (max-width:720px){ .traveler-row{ grid-template-columns:1fr } }

/* IATA Listbox */
.listbox{
  position:absolute; z-index:30; top:100%; left:0; right:0; margin-top:6px;
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:0 16px 32px rgba(16,24,40,.14);
  max-height:280px; overflow:auto; display:none;
}
.listbox .option{
  display:flex; gap:8px; padding:6px 10px; cursor:pointer; border-bottom:1px solid #f1f3f6; font-size:14px;
}
.listbox .option:last-child{ border-bottom:none }
.listbox .option:hover{ background:#f7fbfe }
.option .code{ font-weight:700; min-width:44px; color:#0f172a }
.option .name{ font-weight:600 }
.option .meta{ font-size:11px; color:var(--muted) }

/* Buttons */
.actions{ display:flex; gap:10px; align-items:center; position:relative; z-index:50 }
.btn{
  height:var(--btn-h); font-size:var(--btn-fs);
  border-radius:calc(var(--radius,12px) - 2px);
  border:1px solid var(--btn-ghost-border);
  background:var(--btn-ghost-bg); color:var(--btn-ghost-text);
  font-weight:700; transition:.15s;
}
.btn:hover{ border-color:var(--btn-ghost-hover-bor); background:var(--btn-ghost-hover-bg); box-shadow:0 8px 20px rgba(16,24,40,.06) }
.btn.primary{ background:var(--btn-primary-bg); border-color:var(--btn-primary-border); color:var(--btn-primary-text) }
.btn.primary:hover{ background:var(--btn-primary-hover); border-color:var(--btn-primary-hover); box-shadow:0 10px 22px rgba(19,119,189,.22) }
.btn.primary:disabled, .btn.primary[aria-disabled="true"], button[disabled].primary{
  opacity:.55; cursor:not-allowed; box-shadow:none; filter:none; transform:none;
}

/* Review-Box */
.review-box{ display:none; background:var(--bg-subtle); border:1px solid var(--border); border-radius:12px; padding:12px; margin-top:10px; color:var(--text) }
.review-box.show{ display:block }
.review-box ul{ margin:0; padding-left:18px }

/* Swap-Button im "Nach"-Feld exakt in die Mitte der Gasse setzen */
.route-row .field{ position: relative; }

/* 2. Feld = "Nach" */
.route-row .field:nth-child(2) .swap{
  position: absolute;

  /* Mitte der Gasse:
     Buttonbreite/2 (14px) minus halbe Spaltbreite */
  left: calc(2px - (var(--gap, 12px) / 2));

  /* Vertikal mittig über dem Input (bei Bedarf leicht anpassen) */
  top: 52px;

  transform: translate(-50%, -50%);
  z-index: 5;

  width: 28px; height: 28px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  cursor:pointer;
}
.route-row .field:nth-child(2) .swap:hover{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Tablet: minimal tiefer */
@media (max-width:900px){
  .route-row .field:nth-child(2) .swap{ top: 62px; }
}

/* Phones: Felder untereinander → Button zentriert über "Nach" */
@media (max-width:560px){
  .route-row .field:nth-child(2) .swap{
    left: 50%;
    top: 56px;
    transform: translate(-50%, -50%);
  }
}
/* Honeypot unsichtbar machen */
.hp{
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Form-Fokus (zentral, mit Fallback) */
.input:focus,
select:focus,
textarea:focus{
  outline: none;
  border-color: var(--primary);
  /* Fallback für Browser ohne color-mix */
  box-shadow: 0 0 0 3px rgba(19,164,216,.22);
  /* Modern */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #13A4D8) 22%, transparent);
}
.input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #13A4D8) 24%, transparent);
}