/**
 * Funnel-Einstieg (inc/widgets/funnel-einstieg.php). Karten, Farben, Abstände und Bewegung nach dem Briefing
 * (femfeel-funnel/.redesign/BRIEFING-WEBSITE-EINSTIEG.md), Pill, Fläche, „hier auswählen“ und Pflanzen nach Figma
 * (Startseite, Node 3270:36215). Bewegung nur mit opacity und transform.
 */

.einstieg {
  --ein-text: #4C063A;
  --ein-flaeche: #FFE6D4;
  --ein-hover: #FFEFE9;
  --ein-hover-rand: #FFA171;
  --ein-wahl: #FFC8A8;
  --ein-wahl-rand: #FF6326;
  --ein-kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ein-weg: 32px;
  padding: 64px 16px;
  color: var(--ein-text);
  font-family: Figtree, sans-serif;
}

.einstieg__flaeche {
  position: relative;
  max-width: 1322px;
  margin: 0 auto;
  padding: 112px 24px 176px;
  border-radius: 64px;
  background: var(--ein-flaeche);
}

@media (min-width: 768px) {
  .einstieg__flaeche--ohne-deko { padding-bottom: 112px; }
}

/* Pill sitzt auf der oberen Kante der Fläche */
.einstieg .einstieg__pill {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 8px 20px;
  border-radius: 100px;
  background: #FECCE0;
  color: var(--ein-text);
  font: 500 17px/1.5 Figtree, sans-serif;
  text-align: center;
  transform: translate(-50%, -50%);
}

.einstieg .einstieg__frage {
  max-width: 600px;
  margin: 0 auto 48px;
  color: var(--ein-text);
  font: 600 44px/1.2 Figtree, sans-serif;
  text-align: center;
}

.einstieg__karten {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.einstieg__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 48px;
  border: 2px solid transparent;
  border-radius: 32px;
  background: #FFF;
  color: var(--ein-text);
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 280ms var(--ein-kurve), border-color 280ms var(--ein-kurve), transform 280ms var(--ein-kurve);
}
.einstieg__icon { display: block; flex: none; width: 32px; height: 32px; }
.einstieg__text { font: 600 20px/1.2 Figtree, sans-serif; }

@media (hover: hover) {
  .einstieg__karte:hover { border-color: var(--ein-hover-rand); background: var(--ein-hover); }
}
.einstieg .einstieg__karte:active,
.einstieg.is-bereit.is-sichtbar .einstieg__karte:active { transform: scale(0.985); }
.einstieg__karte:focus { outline: none; }
.einstieg__karte:focus-visible { outline: 2px solid var(--ein-wahl-rand); outline-offset: 2px; }
.einstieg__karte[aria-checked="true"],
.einstieg__karte[aria-checked="true"]:hover { border-color: var(--ein-wahl-rand); background: var(--ein-wahl); }
.einstieg.is-gewaehlt .einstieg__karte { cursor: default; }

/* Handschrift links neben der ersten Karte, nur wenn daneben Platz ist */
.einstieg__hinweis {
  position: absolute;
  right: calc(100% + 24px);
  top: -64px;
  display: none;
  width: 137px;
  height: auto;
  pointer-events: none;
}
@media (min-width: 1200px) {
  .einstieg__hinweis { display: block; }
}

.einstieg__deko {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 91.6%;
  max-width: 1212px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Handy: Pflanzenstreifen am Boden der Fläche (wie FunnelMobileDecoration in der App) */
.einstieg__streifen { display: none; position: relative; height: 68.8px; margin: 24px 0 0; pointer-events: none; }
.einstieg__streifen img { position: absolute; bottom: 0; display: block; max-width: none; }

/* Tablet (768–1023 px): Desktop-Aufbau, Karten etwas enger, damit der Text nicht dreizeilig wird */
@media (min-width: 768px) and (max-width: 1023px) {
  .einstieg__flaeche { padding: 112px 32px 136px; border-radius: 48px; }
  .einstieg__flaeche--ohne-deko { padding-bottom: 112px; }
  .einstieg__karten { gap: 16px; }
  .einstieg__karte { padding: 32px 24px; }
}

/* ---------------------------------------------------------------- Bewegung (nur mit JS, siehe funnel-einstieg.js) */

/* Einblenden: Frage zuerst, dann jede Karte mit 40 ms Versatz (Verzögerung setzt das Skript) */
.einstieg.is-bereit [data-einstieg-rein] {
  opacity: 0;
  transform: translateX(var(--ein-weg));
}
.einstieg.is-bereit.is-sichtbar [data-einstieg-rein] {
  opacity: 1;
  transform: none;
  transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1), transform 500ms cubic-bezier(0.25, 0.3, 0.15, 1),
    background-color 280ms var(--ein-kurve), border-color 280ms var(--ein-kurve);
  transition-delay: var(--ein-verzug, 0ms);
}
/* Nach dem Einblenden wieder die normale Hover-/Drück-Transition ohne Verzögerung */
.einstieg.is-fertig [data-einstieg-rein] { transition-delay: 0ms; }
.einstieg.is-fertig .einstieg__karte { transition: background-color 280ms var(--ein-kurve), border-color 280ms var(--ein-kurve), transform 280ms var(--ein-kurve); }

/* Nach der Auswahl: Inhalt blendet aus und rückt 16 px nach links */
.einstieg.is-weg .einstieg__frage,
.einstieg.is-weg .einstieg__karten {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------- Mobil */

@media (max-width: 767px) {
  /* Innen wie der Funnel auf dem Handy (tokens.ts), außen 12 px Rand zur Website (Moritz 11.11.) */
  .einstieg { --ein-weg: 16px; padding: 40px 12px; }
  .einstieg__flaeche { padding: 56px 16px 32px; border-radius: 32px; }
  .einstieg__flaeche:not(.einstieg__flaeche--ohne-deko) { padding-bottom: 0; }
  .einstieg__streifen { display: block; }
  .einstieg .einstieg__pill { padding: 6px 16px; font-size: 14px; line-height: 1.4; }
  .einstieg .einstieg__frage { margin-bottom: 32px; font-size: 28px; }
  .einstieg__karten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .einstieg__karte { flex-direction: row; padding: 14px 22px; text-align: left; }
  .einstieg__icon { width: 24px; height: 24px; }
  .einstieg__text { font-size: 16px; line-height: 1.25; }
  .einstieg__deko { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .einstieg__karte,
  .einstieg.is-bereit [data-einstieg-rein],
  .einstieg.is-bereit.is-sichtbar [data-einstieg-rein],
  .einstieg.is-weg .einstieg__frage,
  .einstieg.is-weg .einstieg__karten { transition: none !important; }
  .einstieg.is-bereit [data-einstieg-rein] { opacity: 1; transform: none; }
  .einstieg .einstieg__karte:active,
  .einstieg.is-bereit.is-sichtbar .einstieg__karte:active { transform: none; }
}