/* Seitenspezifisches Layout und Platzierung der Maskottchen. Muster dazu: components.css → „Maskottchen“.
   Regel: höchstens ein Esel pro Bildschirmhöhe, abwechselnd links/rechts, immer an einer Kante oder Linie. */

/* ---------- Einladung: Esel läuft mit dem Brief von rechts auf den Text zu ---------- */
@media (min-width: 801px) { .ff-split--text-first { grid-template-columns: 1.15fr .85fr; } }
.ff-mascot--letter { width: min(100%, 340px); justify-self: center; }

/* ---------- Ablauf: Kopf rückt an den Pfad, der Pfad läuft bis an die Holzkante ---------- */
#ablauf { padding-bottom: 0; }
#ablauf .ff-section-head { margin-bottom: var(--ff-space-6); }

/* ---------- Anreise: Eselin steht rechts auf der Holzkante ---------- */
.ff-mascot--travel { width: min(100%, 300px); justify-self: center; }

/* ---------- Zusage: Spickel-Esel links, damit sie nicht unter der Anreise-Eselin stehen ---------- */
@media (min-width: 801px) { .ff-mascot--peek { right: auto; left: 12%; } }

/* ---------- Zusage schmal: unter dem Absende-Knopf Platz für die mitlaufenden Esel in der Zettelecke ---------- */
@media (max-width: 899px) { #zusage .ff-slip { --slip-pad-b: 6.5rem; } }

/* ---------- Zusage: Sprungziel enger, damit Esel und ganzer Zettel (auch mit „Ja“) in eine Bildschirmhöhe passen ---------- */
#zusage { scroll-margin-top: calc(-8px - var(--ff-section)); }

/* ---------- Zusage bei „Ja“: Personen und Essen als gleich gebaute Paare ----------
   Frage, zwei Auswahlen nebeneinander (auch auf dem Handy), kurzer Hinweis; Felder unten bündig, auch wenn eine Beschriftung umbricht */
.ff-rsvp-pair { gap: var(--ff-space-2); }
.ff-rsvp-pair > legend { margin-bottom: 0; }
.ff-form__row.ff-rsvp-pair__row { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--ff-space-2) var(--ff-space-6); }
.ff-rsvp-pair__row .ff-field { gap: var(--ff-space-1); }
.ff-rsvp-pair .ff-field__hint { max-width: 44ch; }
.ff-rsvp-confirm { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-only-if-yes]:not([hidden]) > * { animation: ff-rsvp-in .32s cubic-bezier(.2, .7, .3, 1) both; }
  [data-only-if-yes]:not([hidden]) > :nth-child(2) { animation-delay: .05s; }
  [data-only-if-yes]:not([hidden]) > :nth-child(3) { animation-delay: .1s; }
}
@keyframes ff-rsvp-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Zusage auf großen Bildschirmen: breiterer Zettel, zwei Spalten ----------
   Ziel: Esel über der Kante und der ganze Zettel passen möglichst in eine Bildschirmhöhe.
   Reihen: Name | Kommt ihr? — (bei Ja) Personen/Kinder | Essen — Allergien | Nachricht — Absenden */
@media (min-width: 900px) {
  #zusage .ff-container--narrow { max-width: 1000px; }
  #zusage .ff-peek-host { --peek-w: 230px; }
  #zusage .ff-slip__head { margin-bottom: var(--ff-space-6); }
  #zusage .ff-slip__head .ff-lead { max-width: none; }
  #rsvp-form { grid-template-columns: 1fr 1fr; gap: var(--ff-space-6) var(--ff-space-12); align-items: start; }
  #rsvp-form > [data-only-if-yes] { display: contents; }
  #rsvp-form > .ff-center, #rsvp-form > .ff-note { grid-column: 1 / -1; }
  #rsvp-form:has(> [data-only-if-yes][hidden]) > .ff-field--message { grid-column: 1 / -1; }
  /* Nachricht: erste Linie auf Höhe der Linie im Allergien-Feld daneben (Eingabefelder sind 52px hoch), drei Zeilen */
  #rsvp-form .ff-field--message textarea.ff-input { height: calc(52px + 4rem); padding-top: calc(52px - 2rem); background-origin: content-box; background-clip: content-box; }
  #zusage .ff-peek-host { --peek-w: 205px; }
  #zusage .ff-slip { padding-top: var(--ff-space-8); --slip-pad-b: var(--ff-space-8); }
  #zusage .ff-slip__head .ff-h2::after { margin-top: var(--ff-space-2); }
  #zusage .ff-slip__head .ff-lead { margin-top: var(--ff-space-2); }
}

/* ---------- Fotos: Fotograf neben der Überschrift, Objektiv Richtung Galerie ---------- */
.ff-photo-head { position: relative; max-width: none !important; }
.ff-photo-head .ff-lead { max-width: 46ch; }
.ff-mascot--photographer { position: absolute; right: 0; bottom: -2.5rem; width: 210px; }

/* ---------- FAQ: Überschrift über der Liste, Eselin mit Lesebrille daneben ---------- */
.ff-faq-layout {
  display: grid; grid-template-columns: minmax(0, 720px) clamp(140px, 16vw, 200px);
  justify-content: center; column-gap: clamp(2rem, 5vw, 4rem);
}
.ff-faq-layout > .ff-section-head { grid-column: 1; }
.ff-faq-layout > .ff-faq { grid-column: 1; grid-row: 2; }
.ff-mascot--faq { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--ff-header-h) + 2rem); width: 100%; align-self: start; }

/* ---------- Footer: die beiden laufen auf der Linie davon ---------- */
.ff-footer { position: relative; margin-top: clamp(4rem, 8vw, 7rem); } /* Platz für die Esel auf der Linie */
/* Anhänger, Kalender, Namen untereinander, auch wenn eine Phase den Kalender weglässt */
.ff-footer__inner { display: grid; justify-items: center; }
.ff-footer .ff-mascot--exit { position: absolute; bottom: calc(100% + 6px - 4px); /* Füße auf der Holzkante (6px) */ left: 10%; width: clamp(180px, 22vw, 260px); margin: 0; }

/* ---------- Mittlere Breiten: Fotograf rückt unter den Hinweis, rechts, Objektiv zur Galerie ---------- */
@media (max-width: 1100px) {
  .ff-photo-head { display: grid; justify-items: center; }
  .ff-mascot--photographer {
    position: static; order: 1; justify-self: end; width: 150px;
    margin-top: calc(-1 * var(--ff-space-8));
  }
}

/* ---------- Handy: eine Spalte, Esel kleiner und nach dem Inhalt ---------- */
@media (max-width: 800px) {
  .ff-mascot--letter { width: 150px; justify-self: end; margin-top: calc(-1 * var(--ff-space-4)); }
  .ff-mascot--travel { width: 140px; justify-self: end; }
  .ff-faq-layout { grid-template-columns: minmax(0, 1fr); }
  .ff-faq-layout > .ff-faq { grid-row: 2; }
  /* Auf kleinen Bildschirmen träfe sie auf die Footer-Esel; hier tritt sie zurück */
  .ff-mascot--faq { display: none; }
}
@media (max-width: 640px) {
  .ff-mascot--photographer { margin-top: var(--ff-space-2); }
}

/* ---------- Zusage: Datenschutz-Satz unter dem Absende-Knopf ---------- */
.ff-form__privacy { max-width: 46ch; margin: var(--ff-space-3) auto 0; }

/* ---------- Save-the-Date: Kontaktzeile unter dem Kalender-Knopf ---------- */
.ff-welcome__contact { margin: var(--ff-space-4) 0 0; }
@media (max-width: 800px) { .ff-welcome__contact { text-align: center; text-wrap: balance; padding-inline: var(--ff-space-8); } }

/* ---------- Persönliche Begrüßung (mit Code aus dem Link) ---------- */
.ff-welcome__hello { margin: 0 0 var(--ff-space-2); font-family: var(--ff-font-display); font-style: italic; font-weight: 500; font-size: var(--ff-text-xl); line-height: 1.2; color: var(--ff-brown); }
.ff-rsvp-who { margin: var(--ff-space-6) 0 0; text-align: center; }
.ff-rsvp-code { margin: 0; }