/* Kontaktformular „Gespräch mit dem Flamingo“ (js/formular.js).
   Hell und freundlich: weiße Karte mit zartem Ice-Verlauf, Fragen als Ice-Sprechblasen,
   Auswahl und Knöpfe in Ingo. Kein Berry-Grund.
   Der Flamingo schaut oben rechts über die Kartenkante (gezeichnet von js/vogel.js) und
   ist anfangs verpixelt; mit jeder Frage wird er klarer. Der Fortschritt ist sein Hals. */

.ff {
  --ff-text: #1d1b22; --ff-leise: #6b6873; --ff-linie: #d6eeee; --ff-flaeche: #fff;
  --ff-akzent: var(--ingo); --ff-akzent-dunkel: #c8125f; --ff-ice: var(--ice);
  position: relative; max-width: 980px; margin-top: clamp(150px, 16vw, 210px);
}

/* Flamingo: Ausschnitt Kopf und Hals (280 × 194), Halsansatz auf der Kartenkante */
.ff-vogel {
  position: absolute; right: clamp(16px, 7%, 80px); bottom: calc(100% - 2px);
  width: clamp(170px, 22vw, 250px); aspect-ratio: 280 / 194; pointer-events: none;
}
.ff-vogel canvas { display: block; width: 100%; height: 100%; }

.ff-form, .ff-danke {
  position: relative; color: var(--ff-text);
  background: linear-gradient(170deg, #ecfefe 0%, #fff 46%);
  border: 1.5px solid var(--ff-linie); border-radius: 32px;
  padding: clamp(24px, 4vw, 56px);
  box-shadow: 0 2px 0 #fff inset, 0 24px 60px rgba(30, 60, 70, .10), 0 2px 8px rgba(30, 60, 70, .05);
}

/* Hals als Fortschritt: wächst von links, vorne ein runder Kopf */
.ff-kopf { margin-bottom: clamp(26px, 4vh, 40px); }
.ff-hals { position: relative; height: 8px; border-radius: 8px; background: #e3f6f6; }
.ff-hals i { position: absolute; inset: 0 auto 0 0; width: calc(var(--ff-p, 0) * 100%); border-radius: inherit;
  background: linear-gradient(90deg, #ff8cbc, var(--ff-akzent)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.ff-hals b { position: absolute; top: 50%; left: calc(var(--ff-p, 0) * 100%); width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--ff-akzent); box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(237, 30, 121, .35);
  transition: left .6s cubic-bezier(.2, .8, .2, 1); }
.ff-zaehler { margin-top: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ff-leise); }

/* Ein Schritt nach dem anderen */
.ff-schritt { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.ff-schritt.aktiv { display: block; animation: ff-rein .5s cubic-bezier(.2, .8, .2, 1); }
.ff-schritt.zurueck { animation-name: ff-zurueck; }
@keyframes ff-rein { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ff-zurueck { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

/* Frage als Sprechblase des Flamingos (Spitze zeigt nach oben rechts zum Vogel) */
.ff-frage {
  position: relative; float: none; display: inline-block; max-width: 22em;
  padding: 16px 24px; margin: 0 0 6px; border-radius: 24px 24px 6px 24px;
  background: var(--ff-ice); color: var(--ff-text);
  font: 400 clamp(22px, 2.6vw, 36px)/1.15 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em;
  box-shadow: 0 6px 18px rgba(80, 200, 200, .25);
}
.ff-hinweis { margin: 12px 0 0; font: 500 13px/1.4 var(--mono); color: var(--ff-leise); }

/* Antworten als Kärtchen */
.ff-wahl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ff-wahl--karten { flex-direction: column; align-items: stretch; max-width: 560px; }
.ff-chip {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 500 16px/1.2 var(--text); color: var(--ff-text); text-align: left;
  background: var(--ff-flaeche); border: 1.5px solid var(--ff-linie); border-radius: 999px; padding: 13px 20px;
  box-shadow: 0 2px 6px rgba(30, 60, 70, .05);
  transition: border-color .2s, background .2s, color .2s, transform .2s, box-shadow .2s;
}
.ff-wahl--karten .ff-chip { border-radius: 18px; padding: 18px 22px; }
.ff-chip::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px #b9d4d4; transition: background .2s, box-shadow .2s;
}
.ff-chip:hover { border-color: var(--ff-akzent); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(237, 30, 121, .12); }
.ff-chip:focus-visible { outline: 2px solid var(--ff-akzent); outline-offset: 3px; }
.ff-chip[aria-pressed="true"] { background: var(--ff-akzent); border-color: var(--ff-akzent); color: #fff; box-shadow: 0 8px 18px rgba(237, 30, 121, .25); }
.ff-chip[aria-pressed="true"]::before { background: #fff; box-shadow: inset 0 0 0 4px var(--ff-akzent), 0 0 0 1.5px #fff; }

/* Felder */
.ff-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; margin-top: 26px; }
.ff-feld { display: grid; gap: 8px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ff-leise); }
.ff-feld--gross { margin-top: 26px; }
.ff-feld input, .ff-feld textarea {
  width: 100%; font: 400 18px/1.45 var(--text); color: var(--ff-text); letter-spacing: 0; text-transform: none;
  background: #fff; border: 1.5px solid var(--ff-linie); border-radius: 16px; padding: 13px 16px;
  transition: border-color .2s, box-shadow .2s;
}
.ff-feld textarea { resize: vertical; min-height: 130px; }
.ff-feld input::placeholder, .ff-feld textarea::placeholder { color: #a3a0aa; }
.ff-feld input:focus, .ff-feld textarea:focus { outline: none; border-color: var(--ff-akzent); box-shadow: 0 0 0 4px rgba(237, 30, 121, .12); }
.ff-feld input[aria-invalid="true"] { border-color: var(--ff-akzent-dunkel); }
.ff-haken { display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; font-size: 15px; line-height: 1.45; color: var(--ff-leise); cursor: pointer; }
.ff-haken input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ingo); flex: none; }

/* Falle für Bots: nicht display:none, manche Bots überspringen versteckte Felder */
.ff-falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Leiste */
.ff-leiste { display: flex; align-items: center; gap: 16px; margin-top: clamp(30px, 5vh, 46px); }
.ff-zurueck { background: none; border: 0; padding: 8px 0; cursor: pointer; font: 500 14px/1 var(--mono); color: var(--ff-leise); }
.ff-zurueck:hover { color: var(--ff-text); }
.ff-zurueck[hidden] { display: none; }
.ff .knopf { margin-left: auto; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: var(--ff-akzent); color: #fff; box-shadow: 0 10px 22px rgba(237, 30, 121, .28); }
.ff .knopf:hover { background: var(--ff-akzent-dunkel); color: #fff; }
.ff .knopf[hidden] { display: none; }
.ff .knopf:disabled { opacity: .55; cursor: progress; }
.ff-status { margin-top: 16px; min-height: 1.4em; font: 500 14px/1.4 var(--mono); color: var(--ff-leise); }
.ff-status[data-fehler] { color: var(--ff-akzent-dunkel); }

/* Danke */
.ff-danke { display: none; }
.ff.fertig .ff-form { display: none; }
.ff.fertig .ff-danke { display: block; animation: ff-rein .6s cubic-bezier(.2, .8, .2, 1); }
.ff-danke-titel { font: 400 italic clamp(44px, 6vw, 88px)/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.03em; color: var(--ff-akzent); margin-bottom: 18px; }
.ff-danke p:last-child { max-width: 36em; font-size: 18px; line-height: 1.55; }

/* Im Editor: alle Schritte untereinander, Danke sichtbar, keine Leiste */
html.cms-an .ff-schritt { display: block; margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px dashed var(--ff-linie); }
html.cms-an .ff-leiste .ff-weiter, html.cms-an .ff-zurueck { display: none; }
html.cms-an .ff-danke { display: block; margin-top: 24px; }

/* Quer ab 900 px (Desktop, Tablet quer): der ganze Flamingo steht rechts neben der Karte,
   Füße auf Höhe der Kartenunterkante. Ausschnitt 500 × 720 aus js/vogel.js. Im Hochformat bleibt der Kopf über der Kante. */
@media (orientation: landscape) and (min-width: 900px) {
  .ff { max-width: none; margin-top: clamp(56px, 8vh, 96px); display: grid; grid-template-columns: minmax(0, 980px) clamp(240px, 24vw, 400px); column-gap: clamp(24px, 3vw, 56px); align-items: end; }
  .ff-form, .ff-danke { grid-column: 1; grid-row: 1; }
  .ff-vogel { position: relative; right: auto; bottom: auto; grid-column: 2; grid-row: 1; width: 100%; aspect-ratio: 500 / 720; max-height: 100%; align-self: end; }
}
@media (max-width: 700px) {
  .ff { margin-top: 150px; }
  .ff-felder { grid-template-columns: 1fr; }
  .ff-chip { font-size: 15px; padding: 12px 16px; }
  .ff-form, .ff-danke { border-radius: 24px; }
}