/* ==========================================================================
   kontakt.css - Kontaktformular, überarbeitet 2026-09-28 (mobil zuerst).
   Eingebunden NACH glas.css. Rückbau = diesen <link> in index.html entfernen.
   Nur Gestaltung: Felder, Pflichtfelder, Absende-Logik, Texte unverändert.

   Liquid Glass (DESIGN.md): Felder als ruhige, gefüllte Flächen mit 14 px
   Rundung statt Unterstrich; Karte matt (Glas nur für Schwebendes);
   Fokus als sichtbarer Blush-Ring; Bewegung nur transform/opacity/Farbe,
   ease-out, ≤ 240 ms.
   ========================================================================== */

.contact-form-wrap {
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04), 0 24px 60px -32px rgba(10, 10, 10, 0.18);
}
.contact-form { gap: 26px 20px; align-items: start; }

/* Kopf und Fußzeile spannen IMMER alle Spalten. Vorher „span 2“ - am Handy
   (eine Spalte) erzeugte das eine zweite, implizite Spalte: das Formular lief
   zweispaltig auf 390 px, „Location (falls beka…“ wurde abgeschnitten. */
.contact-form__head,
.field-row,
.field.full { grid-column: 1 / -1; }

.contact-form__head { margin-bottom: 4px; }
.contact-form__head-title { line-height: 1.2; text-wrap: balance; }
.contact-form__head-sub { color: var(--fg-2); line-height: 1.55; }

/* ---------- Beschriftung ---------- */
.field { gap: 8px; }
.field__label {
  color: var(--fg-2);                 /* war #828282 - 3,5:1 auf dem Kartengrund */
  white-space: normal;                /* nichts mehr abschneiden */
  overflow: visible;
  line-height: 1.35;
  padding-left: 2px;
}
.field__label .req { color: #9C4A40; } /* Blush-Tinte, lesbar auf dem Kartengrund */

/* ---------- Felder: gefüllte Flächen ---------- */
.field__input,
.field__select,
.field__textarea {
  font-size: 16px;                    /* < 16 px zoomt iOS beim Antippen hinein */
  line-height: 1.4;
  background-color: #FFFFFF;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 52px;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1);
  transition: box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.field__input:hover,
.field__select:hover,
.field__textarea:hover { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.22); }
.field__input:focus,
.field__select:focus,
.field__textarea:focus,
.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--blush-700, #B0594D),
              0 0 0 4px rgba(232, 160, 154, 0.35);
}
.field__input::placeholder,
.field__textarea::placeholder { color: #6E6E6E; opacity: 1; }
.field__textarea { min-height: 136px; line-height: 1.6; resize: vertical; }
.field__select {
  background-color: #FFFFFF;
  background-position: right 18px center;
  padding-right: 44px;
}
/* Der wachsende Unterstrich (animations.css §18) gehört zur alten
   Linien-Optik; der Ring übernimmt seine Aufgabe. */
.contact-form .field::after { display: none; }

/* ---------- Fehler: erst nach Eingabe/Absendeversuch (:user-invalid) ---------- */
.field__input:user-invalid,
.field__select:user-invalid,
.field__textarea:user-invalid {
  background-color: #FFF7F6;
  box-shadow: inset 0 0 0 1.5px #B3261E;
}
.field__input:user-invalid:focus,
.field__textarea:user-invalid:focus {
  box-shadow: inset 0 0 0 1.5px #B3261E, 0 0 0 4px rgba(179, 38, 30, 0.16);
}
.field:has(:user-invalid) .field__label { color: #B3261E; }

/* ---------- Paket-Chips ---------- */
.chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.chip {
  min-height: 48px;
  padding: 10px 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.3;
  background-color: #FFFFFF;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.12);
  color: var(--fg);
  text-align: center;
}
.chip:hover { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.4); }
.chip.active,
.chip.active:hover {
  background-color: var(--fg);
  color: #FFFFFF;
  box-shadow: 0 8px 18px -10px rgba(10, 10, 10, 0.55);
}
@media (min-width: 721px) {
  .chips { display: flex; flex-wrap: wrap; }
  .chip { padding: 10px 20px; white-space: nowrap; }
}

/* ---------- Einwilligung + Absenden ---------- */
.field-row {
  border-top: 0;
  padding-top: 8px;
  margin-top: 4px;
}
.consent { font-size: 13px; line-height: 1.45; align-items: flex-start; }
.consent input {
  width: 20px; height: 20px; flex: 0 0 auto; margin: 0;
  accent-color: #0A0A0A;
}
.consent input:focus-visible { outline: 2px solid var(--blush-700, #B0594D); outline-offset: 3px; }
.contact-form .btn--primary {
  min-height: 52px;
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1),
              background-color 200ms, color 200ms, box-shadow 200ms;
}
.contact-form .btn--primary:active { transform: scale(0.97); }
.contact-form .btn--primary:focus-visible {
  outline: 2px solid var(--blush-700, #B0594D);
  outline-offset: 3px;
}

/* ---------- Gesendet ---------- */
.sent-state__icon {
  animation: kontaktGesendet 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes kontaktGesendet {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- Handy ---------- */
@media (max-width: 720px) {
  .contact-form-wrap { padding: 28px 18px 24px; border-radius: 24px; }
  .contact-form { gap: 20px; }
  .contact-form__head-title { font-size: 21px; }
  .field-row .btn { width: 100%; justify-content: center; }
}
@media (min-width: 721px) {
  .field-row { flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .sent-state__icon { animation: none; }
  .contact-form .btn--primary:active { transform: none; }
  .field__input, .field__select, .field__textarea { transition: none; }
}

/* Handy: die Kontaktseite hatte keinen Seitenrand (styles.css setzt .contact-hero
   auf padding:0) - Inhalt klebte am Bildschirmrand. 20 px wie die Startseite. */
@media (max-width: 720px) {
  .contact-hero { padding: 0 20px; }
}

/* FAQ: weiches Aufklappen (Dennis, 2026-09-28: „smooth, eher 0,5 s“).
   Höhe über grid-template-rows 0fr → 1fr - kein Messen in JS, unterbrechbar
   (erneutes Tippen mitten im Aufgehen kehrt aus der aktuellen Höhe um).
   Kurve: weicher Anlauf und weiches Auslaufen, damit man das Aufgehen sieht. Zu geht etwas schneller. */
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0;
  transition: grid-template-rows 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item.open .faq__a {
  grid-template-rows: 1fr;
  transition-duration: 500ms;
}
.faq__a-inner { overflow: hidden; min-height: 0; }
.faq__a-inner > p {
  padding: 0 60px 28px 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease-out, transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item.open .faq__a-inner > p {
  opacity: 1;
  transform: none;
  transition: opacity 360ms ease-out 80ms, transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__sign::before, .faq__sign::after { transition-duration: 420ms; }
@media (max-width: 640px) {
  .faq__a { padding: 0; }
  .faq__a-inner > p { padding: 0 28px 22px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq__a, .faq__a-inner > p { transition: none; }
}

/* Chat: nach dem Absenden klar sichtbar „gesendet" (Dennis, 2026-09-28) */
.chat-offer__tag.is-sent { background: #E7F3EA; color: #1F6B37; }
.chat-offer__sent {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 16px; padding: 16px 18px;
  border-radius: 16px; background: #EEF7F0; border: 1px solid #CFE7D6;
  color: #1B4D2B; font-size: 14px; line-height: 1.45;
  animation: livGesendet 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.chat-offer__sent strong { display: block; font-size: 15px; font-weight: 700; color: #133D21; margin-bottom: 2px; }
.chat-offer__sent span { overflow-wrap: anywhere; }
.chat-offer__sent-icon { flex: none; width: 28px; height: 28px; }
.chat-offer__sent-icon circle { fill: #2E8B4E; }
.chat-offer__sent-icon path {
  fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16; stroke-dashoffset: 16;
  animation: livHaken 360ms 180ms ease-out forwards;
}
@keyframes livGesendet { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes livHaken { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .chat-offer__sent { animation: none; }
  .chat-offer__sent-icon path { animation: none; stroke-dashoffset: 0; }
}

/* Startseite: die leichte Unterzeile der Überschrift („Wie ein Film. / Ohne Regie.“) hat zwei
   feste Zeilen. In voller Größe brach jede davon am Rechner noch einmal um (4 Riesenzeilen).
   Etwas kleiner, damit jede Zeile eine Zeile bleibt. */
@media (min-width: 721px) {
  .hero__title em { font-size: 0.74em; line-height: 1.02; display: inline-block; margin-top: 0.08em; }
}

/* Kontaktformular: Fehlermeldung beim Senden */
.contact-form__error { grid-column: 1 / -1; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #8A1F1F; font-size: 14px; line-height: 1.45; }

/* ==========================================================================
   2026-09-29 - Formular-Kasten lebt, Paketwahl als Segment-Leiste
   ========================================================================== */

/* ---------- Hintergrund: zwei weiche Farbflächen, die langsam treiben ----------
   Aus dem festen Blush-Kreis oben rechts werden zwei unscharfe Flächen (Blush oben
   rechts, Coral unten links). Sie bewegen sich nur über transform (eigene Ebene,
   will-change), die Unschärfe ist fest. 19 s bzw. 26 s, ease-in-out, hin und zurück -
   so langsam, dass man es eher spürt als sieht. Beim Scrollen verschieben sie sich
   zusätzlich leicht gegeneinander (translate über animation-timeline: view(); das
   ist eine eigene Eigenschaft und beißt sich nicht mit transform). Die Felder sind
   deckend weiß, die Lesbarkeit hängt nicht an den Flächen. */
.contact-form-wrap::before,
.contact-form-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(36px);
  will-change: transform;
}
.contact-form-wrap::before {
  top: -120px; right: -110px;
  width: 340px; height: 300px;
  background: radial-gradient(closest-side, rgba(232, 160, 154, 0.55), rgba(232, 160, 154, 0));
  opacity: 1;
  animation: kontaktTreibenA 19s ease-in-out infinite alternate;
}
.contact-form-wrap::after {
  bottom: -140px; left: -120px;
  width: 360px; height: 320px;
  background: radial-gradient(closest-side, rgba(217, 119, 87, 0.26), rgba(217, 119, 87, 0));
  animation: kontaktTreibenB 26s ease-in-out infinite alternate;
}
@keyframes kontaktTreibenA {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(-70px, 60px, 0) scale(1.15) rotate(8deg); }
  100% { transform: translate3d(-30px, 130px, 0) scale(0.95) rotate(-4deg); }
}
@keyframes kontaktTreibenB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(90px, -60px, 0) scale(1.18); }
  100% { transform: translate3d(40px, -150px, 0) scale(1.05); }
}
@supports (animation-timeline: view()) {
  .contact-form-wrap::before {
    animation: kontaktTreibenA 19s ease-in-out infinite alternate, kontaktScrollA linear both;
    animation-timeline: auto, view();
  }
  .contact-form-wrap::after {
    animation: kontaktTreibenB 26s ease-in-out infinite alternate, kontaktScrollB linear both;
    animation-timeline: auto, view();
  }
  @keyframes kontaktScrollA { from { translate: 0 -40px; } to { translate: 0 60px; } }
  @keyframes kontaktScrollB { from { translate: 0 50px; } to { translate: 0 -50px; } }
}
.contact-form-wrap > * { position: relative; z-index: 1; }
/* Über den treibenden Flächen braucht die Kleinschrift mehr Tinte: Stern dunkler
   (#9C4A40 fiel über dem Blush auf 4,3:1), Formular-Eyebrow Tinte statt Grau (3,1:1). */
.contact-form .field__label .req { color: #8E4238; }
.contact-form .eyebrow { color: var(--fg-2); }

/* ---------- Paketwahl: EINE Leiste mit gleitender Auswahl ----------
   Am Handy 2 x 2 (vier Wörter passen nicht in 350 px ohne Abschneiden), ab 721 px
   eine Reihe mit vier gleich breiten Feldern. Die Auswahl ist ein eigener Körper
   (.seg__thumb), der per transform hinübergleitet: 340 ms,
   cubic-bezier(0.23, 1, 0.32, 1) (starkes ease-out, Emil). Dabei wechselt er leicht
   die Farbe: Tinte bei „Foto + Film", warm getönt bei den anderen. */
.seg {
  --pad: 4px;
  --gap: 4px;
  --cols: 2;
  --rows: 2;
  --col: 0;
  --row: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  padding: var(--pad);
  border-radius: 18px;
  background-color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1);
  isolation: isolate;
}
.seg[data-wahl="photo"]  { --col: 0; --row: 0; --seg-farbe: #2B211F; }
.seg[data-wahl="film"]   { --col: 1; --row: 0; --seg-farbe: #231A19; }
.seg[data-wahl="both"]   { --col: 0; --row: 1; --seg-farbe: #0A0A0A; }
.seg[data-wahl="unsure"] { --col: 1; --row: 1; --seg-farbe: #4A302B; }

.seg__thumb {
  position: absolute;
  z-index: 0;
  top: var(--pad);
  left: var(--pad);
  width: calc((100% - 2 * var(--pad) - (var(--cols) - 1) * var(--gap)) / var(--cols));
  height: calc((100% - 2 * var(--pad) - (var(--rows) - 1) * var(--gap)) / var(--rows));
  border-radius: 14px;
  background-color: var(--seg-farbe, #0A0A0A);
  box-shadow: 0 6px 16px -8px rgba(10, 10, 10, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transform: translate(calc(var(--col) * (100% + var(--gap))), calc(var(--row) * (100% + var(--gap))));
  transition: transform 340ms cubic-bezier(0.23, 1, 0.32, 1),
              background-color 340ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.seg__opt {
  position: relative;
  z-index: 1;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 140ms ease-out, background-color 200ms ease-out;
}
.seg__opt > span {
  display: inline-block;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.seg__opt:active > span { transform: scale(0.96); }
.seg__opt.is-on { color: #FFFFFF; }
@media (hover: hover) {
  .seg__opt:not(.is-on):hover { background-color: rgba(10, 10, 10, 0.05); }
}
.seg__opt:focus-visible {
  outline: 2px solid var(--blush-700, #B0594D);
  outline-offset: 2px;
}

@media (min-width: 721px) {
  .seg { --cols: 4; --rows: 1; }
  .seg[data-wahl="photo"]  { --col: 0; --row: 0; }
  .seg[data-wahl="film"]   { --col: 1; --row: 0; }
  .seg[data-wahl="both"]   { --col: 2; --row: 0; }
  .seg[data-wahl="unsure"] { --col: 3; --row: 0; }
  .seg__opt { min-height: 52px; letter-spacing: 0.1em; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form-wrap::before,
  .contact-form-wrap::after { animation: none !important; }
  .seg__thumb, .seg__opt, .seg__opt > span { transition: none; }
  .seg__opt:active > span { transform: none; }
}

/* Über mich: normale Absatzabstände. Der Flex-Abstand (28px) addierte sich mit den
   Standard-Rändern der <p> (je 1em) zu ~60px zwischen jedem Absatz. */
.about__copy > p { margin: 0; }
.about__copy > p + p:not(.about__quote) { margin-top: -12px; }

/* ==========================================================================
   2026-09-29 (2) - Kontaktformular lebendiger, ruhig-hochwertig
   Fünf Dinge, die zusammen passen:
   1. Aurora mit feinem Korn: die zwei treibenden Flächen werden je zu einem
      kleinen Farbverlauf-Geflecht, darunter ein festes, feines Korn (SVG-Rauschen,
      einmal gerastert, nicht animiert).
   2. Gestaffeltes Einblenden der Formularteile, sobald der Kasten ins Bild kommt
      (420 ms, cubic-bezier(0.22, 1, 0.36, 1), 45 ms Versatz).
   3. Fokus: Ring + Beschriftung wird Tinte, Einfügemarke in Blush.
   4. Fortschrittsbalken oben im Kasten (wächst mit jedem ausgefüllten Feld,
      transform: scaleX, 520 ms ease-out).
   5. Absendeknopf: Glanz streicht bei Zeiger drüber (700 ms), läuft beim Senden
      als ruhige Schleife; Erfolg: Haken zeichnet sich, Ring atmet einmal aus,
      Inhalte folgen gestaffelt.
   Schwebende Beschriftungen (Floating Labels) bewusst NICHT: NN/g und Baymard
   raten bei Formularen mit mehr als 3-4 Feldern davon ab.
   ========================================================================== */

/* 1. Aurora + Korn */
.contact-form-wrap {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .055 0'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>");
  background-size: 160px 160px;
}
.contact-form-wrap::before {
  width: 420px; height: 360px;
  background:
    radial-gradient(closest-side at 40% 45%, rgba(232, 160, 154, 0.55), rgba(232, 160, 154, 0) 100%),
    radial-gradient(closest-side at 70% 70%, rgba(243, 183, 154, 0.40), rgba(243, 183, 154, 0) 100%);
}
.contact-form-wrap::after {
  width: 440px; height: 380px;
  background:
    radial-gradient(closest-side at 45% 50%, rgba(217, 119, 87, 0.24), rgba(217, 119, 87, 0) 100%),
    radial-gradient(closest-side at 25% 30%, rgba(246, 214, 203, 0.55), rgba(246, 214, 203, 0) 100%);
}

/* 2. Gestaffeltes Einblenden (nur mit Skript + ohne reduced-motion: Klasse .lebt) */
.contact-form-wrap.lebt .contact-form > *:not([name="website"]) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
.contact-form-wrap.lebt.ist-da .contact-form > *:not([name="website"]) {
  animation: kontaktAuf 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.contact-form-wrap.ist-da .contact-form > :nth-child(1)  { animation-delay: 0ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(2)  { animation-delay: 45ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(3)  { animation-delay: 90ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(4)  { animation-delay: 135ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(5)  { animation-delay: 180ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(6)  { animation-delay: 225ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(7)  { animation-delay: 270ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(8)  { animation-delay: 315ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(9)  { animation-delay: 360ms; }
.contact-form-wrap.ist-da .contact-form > :nth-child(n+10) { animation-delay: 405ms; }
@keyframes kontaktAuf {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* 3. Fokus: Beschriftung zieht mit */
.field__label { transition: color 200ms ease-out; }
.field:focus-within .field__label { color: var(--fg); }
.field__input, .field__textarea { caret-color: var(--blush-700, #B0594D); }

/* 4. Fortschrittsbalken */
.formular-fortschritt {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, #E8A09A, #D97757);
  transform-origin: left center;
  transform: scaleX(var(--fortschritt, 0));
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

/* 5. Absendeknopf: Glanz */
.contact-form .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-110%);
}
@media (hover: hover) {
  .contact-form .btn--primary:hover::after {
    transform: translateX(110%);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.contact-form .btn--primary.is-sending { cursor: progress; }
.contact-form .btn--primary.is-sending::after {
  animation: kontaktGlanz 1200ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes kontaktGlanz {
  from { transform: translateX(-110%); }
  to   { transform: translateX(110%); }
}

/* 5b. Erfolg: Haken zeichnet sich, Ring atmet aus, Inhalte folgen */
.sent-state__icon { position: relative; background: var(--blush-700, #B0594D); }
.sent-state__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(176, 89, 77, 0.45);
  opacity: 0;
  animation: kontaktRing 900ms cubic-bezier(0.22, 1, 0.36, 1) 260ms both;
  pointer-events: none;
}
@keyframes kontaktRing {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.6); }
}
.sent-state__icon polyline {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: kontaktHaken 420ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
}
@keyframes kontaktHaken { to { stroke-dashoffset: 0; } }
.sent-state > :not(.sent-state__icon) {
  animation: kontaktAuf 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sent-state > :nth-child(2) { animation-delay: 260ms; }
.sent-state > :nth-child(3) { animation-delay: 320ms; }
.sent-state > :nth-child(4) { animation-delay: 380ms; }
.sent-state > :nth-child(5) { animation-delay: 440ms; }
.sent-state > :nth-child(n+6) { animation-delay: 500ms; }
/* Die Wort-Enthüllung (animations.js) wartete hier auf einen Sichtbarkeits-Auslöser,
   der nach dem Absenden nicht kam - die Überschrift blieb unscharf stehen. */
.sent-state .text-reveal .word { opacity: 1; transform: none; filter: none; }
.sent-state .eyebrow { color: var(--fg-2); }

@media (prefers-reduced-motion: reduce) {
  .contact-form-wrap.lebt .contact-form > * { opacity: 1; transform: none; animation: none !important; }
  .formular-fortschritt { transition: none; }
  .contact-form .btn--primary::after { display: none; }
  .sent-state__icon::after { display: none; }
  .sent-state__icon polyline { animation: none; stroke-dashoffset: 0; }
  .sent-state > * { animation: none !important; }
}

/* Kontaktseite: FAQ so breit wie der Kontakt-Bereich darüber (Dennis, 2026-09-29).
   Gleiche Kante wie .contact-hero (max 1480 px, Rand 40 / 20 px); Fragen und Linien
   auf volle Breite, der Antworttext bleibt für die Lesbarkeit bei 68 Zeichen. */
.contact-page .faq { max-width: none; margin: 0; }
.contact-page .faq .container { max-width: 1480px; padding-left: 40px; padding-right: 40px; }
.contact-page .faq__list { max-width: none; }
@media (max-width: 720px) {
  .contact-page .faq .container { padding-left: 20px; padding-right: 20px; }
}

/* ==========================================================================
   Eigene Auswahllisten (2026-09-29, Dennis: „custom dropdowns, animiert, schön,
   nicht über dem Feld“). Knopf sieht aus wie die anderen Felder; die Liste
   öffnet 8 px unter dem Feld (oder darüber, .nach-oben), weiße Karte mit
   weichem Schatten, Einblenden 200 ms aus 96 % + 6 px, Einträge leicht
   gestaffelt. Schließen schneller (140 ms). Nur transform/opacity.
   ========================================================================== */
.field:has(.dt-auswahl.ist-offen) { position: relative; z-index: 30; }
.dt-auswahl { position: relative; }
.dt-auswahl__knopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: var(--fg);
  background: #FFFFFF;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 52px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1);
  transition: box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dt-auswahl__knopf.ist-leer .dt-auswahl__wert { color: #6E6E6E; }
.dt-auswahl__wert { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .dt-auswahl__knopf:hover { box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.22); } }
.dt-auswahl__knopf:focus-visible,
.dt-auswahl.ist-offen .dt-auswahl__knopf {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--blush-700, #B0594D), 0 0 0 4px rgba(232, 160, 154, 0.35);
}
.dt-auswahl__pfeil {
  flex: none;
  color: var(--fg-2);
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1);
}
.dt-auswahl.ist-offen .dt-auswahl__pfeil { transform: rotate(180deg); color: var(--blush-700, #B0594D); }

.dt-auswahl__liste {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(340px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-radius: 16px;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.06),
              0 12px 32px -8px rgba(10, 10, 10, 0.22),
              0 2px 6px rgba(10, 10, 10, 0.06);
  transform-origin: top center;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 0s linear 140ms;
}
.dt-auswahl.nach-oben .dt-auswahl__liste {
  top: auto;
  bottom: calc(100% + 8px);
  transform-origin: bottom center;
  transform: translateY(6px) scale(0.96);
}
.dt-auswahl.ist-offen .dt-auswahl__liste {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 240ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
}
.dt-auswahl__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--fg);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: background-color 120ms ease-out, color 120ms ease-out;
}
.dt-auswahl.ist-offen .dt-auswahl__option {
  animation: dtOptionEin 260ms cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: calc(var(--i) * 22ms + 30ms);
}
@keyframes dtOptionEin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dt-auswahl__option.ist-aktiv { background: rgba(232, 160, 154, 0.18); }
.dt-auswahl__option.ist-gewaehlt { color: var(--blush-700, #B0594D); font-weight: 600; }
.dt-auswahl__haken { flex: none; opacity: 0; transform: scale(0.6); transition: opacity 160ms ease-out, transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.dt-auswahl__option.ist-gewaehlt .dt-auswahl__haken { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dt-auswahl__liste, .dt-auswahl.ist-offen .dt-auswahl__liste, .dt-auswahl__pfeil { transition: opacity 120ms linear, visibility 0s; transform: none !important; }
  .dt-auswahl.ist-offen .dt-auswahl__option { animation: none; opacity: 1; transform: none; }
}

/* FAQ-Antworten über die volle Breite der Liste (Dennis, 2026-09-29). */
.faq__a { max-width: none; }
.faq__a-inner > p { max-width: none; }