/* Anfrage (/fahrt-anfragen/): kompakter und lebendiger, vor allem auf dem Handy.
   Laedt nach at.css und ueberschreibt nur Regeln des Buchungsablaufs. */

/* Zwei Optionen als Segment-Schalter: eine Zeile statt zwei Kacheln untereinander */
.fluss .chips--zwei { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 1rem; border-radius: 16px; background: var(--ground); }
.fluss .chips--zwei .chip span { min-height: 46px; padding: 0.45rem 0.6rem; border: 0; border-radius: 12px; background: transparent; font-size: 0.93rem; font-weight: 550; line-height: 1.2; color: var(--ink-2);
  transition: background-color 200ms var(--ease), box-shadow 260ms var(--feder), color 160ms var(--ease), transform 200ms var(--feder); }
.fluss .chips--zwei .chip span:hover { color: var(--ink); }
.fluss .chips--zwei .chip span:active { transform: scale(0.97); }
.fluss .chips--zwei .chip input:checked + span { background: var(--paper); color: var(--ink); font-weight: 650; box-shadow: 0 1px 2px rgba(27, 32, 40, 0.08), 0 6px 14px -8px rgba(27, 32, 40, 0.3); }

/* Datum und Uhrzeit nebeneinander, auch auf dem Handy */
.fluss .felder-2.termin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

/* Ermutigung unter dem Fortschritt */
.fluss__mut { margin: -0.35rem 0 0.9rem; font-size: 0.88rem; color: var(--ink-3); min-height: 1.3em; }
.fluss__mut b { color: var(--ink); font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
  .fluss__mut.neu { animation: mut-auf 420ms var(--feder) both; }
  @keyframes mut-auf { from { opacity: 0; transform: translateY(5px); } }
  /* Neuer Schritt gleitet herein, Felder leicht gestaffelt */
  .fluss__schritt.ist-aktiv > * { animation: schritt-auf 420ms var(--feder) both; }
  .fluss__schritt.ist-aktiv > *:nth-child(2) { animation-delay: 40ms; } .fluss__schritt.ist-aktiv > *:nth-child(3) { animation-delay: 80ms; }
  .fluss__schritt.ist-aktiv > *:nth-child(4) { animation-delay: 120ms; } .fluss__schritt.ist-aktiv > *:nth-child(n+5) { animation-delay: 160ms; }
  @keyframes schritt-auf { from { opacity: 0; transform: translateY(10px); } }
  /* Ausgefuelltes Feld: kurzer gelber Puls am Rand */
  .feld.ist-ok :is(input, select, textarea) { animation: feld-ok 600ms var(--ease); }
  @keyframes feld-ok { 30% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--gelb) 45%, transparent); } }
}
/* Haken im ausgefuellten Feld */
.fluss .feld { position: relative; }
.fluss .feld.ist-ok:not(.adress-feld)::after { content: ""; position: absolute; right: 14px; bottom: 17px; width: 9px; height: 15px; border: solid var(--ok, #1E7A46); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); pointer-events: none; }
.fluss .feld.ist-ok:has(select, input[type="date"], input[type="time"])::after { display: none; }

/* Handy: kompaktere Kacheln (Symbol links, Text rechts), weniger Luft zwischen den Fragen */
@media (max-width: 560px) {
  .buchen__kopf h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.3rem); }
  .buchen__unter { font-size: 1rem; }
  .buchen__zusagen { display: none; }
  .fluss.schale__kern { padding: 1.1rem 0.95rem 1.2rem; }
  .fluss .frage { font-size: 1.25rem; margin-bottom: 0.85rem; }
  .fluss .frage--klein { margin: 1.15rem 0 0.45rem; font-size: 0.74rem; }
  .arten { gap: 6px; }
  .art span { grid-template-columns: 30px minmax(0, 1fr); align-items: center; align-content: center; gap: 8px; min-height: 56px; padding: 8px 8px 8px 9px; }
  .art i { width: 30px; height: 30px; }
  .art i svg { width: 17px; height: 17px; }
  .art b { font-size: 0.84rem; letter-spacing: -0.01em; hyphens: manual; overflow-wrap: normal; }
  .fluss .chips--zwei .chip span { min-height: 44px; font-size: 0.88rem; }
  .fluss__fuehrung { margin-top: 1.4rem; }
}

/* Handy-Pruefung: Text mind. 14px, Tippflaechen mind. 44px */
.buchen .stepper li { font-size: 0.875rem; }
.fluss .frage--klein { font-size: 0.875rem; letter-spacing: 0.03em; }
#tauschen { width: 44px; height: 44px; }
@media (max-width: 560px) { .art b { font-size: 0.875rem; } .fluss .frage--klein { font-size: 0.875rem; } }