/* ==========================================================================
   That's it. Marketing - Vorqualifizierungs-Funnel
   funnel.css
   --------------------------------------------------------------------------
   Ergaenzt css/style.css (Tokens, Reset, Typo, .btn--cta, .skip-link). Hier
   steht nur, was der Funnel zusaetzlich braucht.

   Haltung: eine Frage je Bildschirm, sonst nichts. Kein Menue, kein zweiter
   CTA, keine Seitenleiste - alles, was nicht zur aktuellen Entscheidung
   gehoert, ist weg. Die Strecke ist vier Schritte lang und soll sich unter
   einer Minute anfuehlen.

   Aufbau:
     1. Seitengeruest (dunkle Buehne)
     2. Kopf: Logo + Fortschritt
     3. Schritte
     4. Antwort-Buttons
     5. Zusammenfassung der Antworten
     6. Formular
     7. Danke-Schritt
     8. Zurueck + Fuss
     9. Breakpoints
    10. prefers-reduced-motion
   ========================================================================== */

/* ==========================================================================
   1. SEITENGERUEST
   Der Funnel ist durchgehend schwarz - er ist die Fortsetzung der
   Hero-/Abschluss-Klammer, nicht der hellen Inhaltsflaechen.
   ========================================================================== */
.funnel-page {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--ti-black);
  color: var(--ti-paper);
  /* style.css haelt unten Platz fuer den mobilen Floating-CTA der
     Landingpage. Den gibt es hier nicht. */
  padding-bottom: 0;
}

/* ==========================================================================
   2. KOPF
   Klebt oben, damit der Fortschritt beim Scrollen im langen Formular-
   schritt sichtbar bleibt. Er ist die einzige Orientierung auf der Strecke.
   ========================================================================== */
.funnel-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--ti-black);
}

.funnel-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ti-s-4);
  max-width: 46rem;
  width: 100%;
  margin-inline: auto;
  padding: var(--ti-s-4) var(--ti-s-5);
}

.funnel-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--ti-s-2);
  margin-inline: calc(-1 * var(--ti-s-2));
}

.funnel-header__logo img {
  height: 1.6rem;
  width: auto;
}

.funnel-header__step {
  margin: 0;
  font-family: var(--ti-label);
  font-size: var(--ti-fs-body-s);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-variant-numeric: tabular-nums;
}

/* Der Fortschritt liegt als Haarlinie unter dem Kopf und laeuft ueber die
   volle Breite - so liest er sich als Ladebalken der Seite, nicht als
   Bauteil im Inhalt. */
.funnel-progress {
  height: 3px;
  background-color: rgba(255, 255, 255, 0.12);
}

/* Immer 100% breit, per scaleX gestaucht: width zu animieren loest in jedem
   Frame ein Layout aus, transform laeuft auf dem Compositor. js/funnel.js
   setzt --funnel-progress (0..1). */
.funnel-progress__fill {
  height: 100%;
  width: 100%;
  background-color: var(--ti-gold);
  transform: scaleX(var(--funnel-progress, 0.25));
  transform-origin: left center;
  transition: transform var(--ti-dur-slow) var(--ti-ease-standard);
}

/* ==========================================================================
   3. SCHRITTE
   Ohne JS liegen alle Schritte untereinander (Fallback). Mit JS ist immer
   genau einer sichtbar.
   ========================================================================== */
.funnel-main {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: clamp(2rem, 7vw, 3.5rem) var(--ti-s-5) var(--ti-s-8);
}

/* Ohne JS: Abstand zwischen den untereinander liegenden Schritten. */
.funnel-step + .funnel-step {
  margin-top: var(--ti-s-9, 4rem);
  padding-top: var(--ti-s-8);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

html.js .funnel-step {
  display: none;
}

html.js .funnel-step.is-active {
  display: block;
  animation: tiFunnelIn var(--ti-dur-slow) var(--ti-ease-standard) both;
}

html.js .funnel-step + .funnel-step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Der neue Schritt kommt von unten herein - eine Richtung, die zur
   Vorwaertsbewegung passt. Bewusst kurz: er soll den Wechsel markieren,
   nicht ihn ausbremsen. */
@keyframes tiFunnelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* color explizit: die globale h1/h2-Regel in style.css setzt --ti-fg
   (fast Schwarz) - auf der schwarzen Buehne waere die Frage unsichtbar. */
.funnel-step__question {
  font-family: var(--ti-display);
  font-weight: 900;
  font-size: clamp(1.75rem, 6.4vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ti-paper);
  margin: 0 0 var(--ti-s-4);
  max-width: 18ch;
}

/* Der Fokus springt beim Schrittwechsel auf die Ueberschrift, damit
   Screenreader die neue Frage vorlesen. Sie ist aber kein Bedienelement -
   der Ring waere hier ein falsches Signal. */
.funnel-step__question:focus {
  outline: none;
}

.funnel-step__lead {
  margin: 0 0 var(--ti-s-6);
  color: rgba(255, 255, 255, 0.72);
  max-width: 46ch;
}

.funnel-step__lead a {
  color: var(--ti-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   4. ANTWORT-BUTTONS
   Volle Breite, grosse Flaeche, ein Klick genuegt: kein "Weiter"-Button,
   der nur einen zweiten Klick fuer dieselbe Entscheidung kostet.
   ========================================================================== */
.funnel-options {
  display: grid;
  gap: var(--ti-s-3);
}

.funnel-option {
  position: relative;
  display: grid;
  /* Ohne Tastatur gibt es keine Ziffernspalte - sonst bliebe an ihrer
     Stelle eine leere Spalte samt gap stehen und alle Labels waeren
     unmotiviert eingerueckt. Die zweite Spalte kommt weiter unten im
     hover/pointer-Block dazu. */
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--ti-s-4);
  width: 100%;
  min-height: 4.25rem;
  padding: var(--ti-s-4) var(--ti-s-5);
  text-align: left;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--ti-r-3);
  color: var(--ti-paper);
  cursor: pointer;
  transition:
    background-color var(--ti-dur-base) var(--ti-ease-standard),
    border-color var(--ti-dur-base) var(--ti-ease-standard),
    transform var(--ti-dur-base) var(--ti-ease-standard);
}

/* Die Ziffer ist die Tastaturabkuerzung, nicht Dekoration: mit Zahlen-
   tasten 1-4 laesst sich die ganze Strecke ohne Maus durchklicken. Auf
   Geraeten ohne echte Tastatur waere sie eine Verheissung ohne Funktion,
   deshalb blendet der Block weiter unten sie dort aus. */
.funnel-option__key {
  display: none;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--ti-r-2);
  background-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--ti-label);
  font-size: 0.8125rem;
  font-weight: 600;
  transition:
    background-color var(--ti-dur-base) var(--ti-ease-standard),
    color var(--ti-dur-base) var(--ti-ease-standard);
}

.funnel-option__label {
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.funnel-option__hint {
  margin-top: 0.15rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--ti-fs-body-s);
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .funnel-option {
    grid-template-columns: auto 1fr;
  }

  .funnel-option__key {
    display: inline-flex;
  }

  .funnel-option__label,
  .funnel-option__hint {
    grid-column: 2;
  }

  .funnel-option:hover {
    background-color: rgba(220, 152, 50, 0.1);
    border-color: var(--ti-gold);
    transform: translateY(-2px);
  }

  .funnel-option:hover .funnel-option__key {
    background-color: var(--ti-gold);
    color: var(--ti-ink);
  }
}

.funnel-option:focus-visible {
  border-color: var(--ti-gold);
}

/* Quittung fuer den Klick: die Auswahl faerbt sich gold, bevor der naechste
   Schritt kommt. Ohne diesen Moment wirkt der Wechsel wie ein Aussetzer. */
.funnel-option.is-chosen {
  background-color: rgba(220, 152, 50, 0.18);
  border-color: var(--ti-gold);
}

.funnel-option.is-chosen .funnel-option__key {
  background-color: var(--ti-gold);
  color: var(--ti-ink);
}

/* ==========================================================================
   5. ZUSAMMENFASSUNG DER ANTWORTEN
   Steht ueber dem Formular: der Interessent sieht schwarz auf weiss, was er
   gleich absendet, und kann jede Angabe mit einem Klick korrigieren.
   ========================================================================== */
.funnel-recap {
  display: grid;
  margin: 0 0 var(--ti-s-6);
  padding: var(--ti-s-4) var(--ti-s-5);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--ti-r-3);
}

/* Beschriftung ueber dem Wert, "Ändern" rechts daneben ueber beide Zeilen.
   Nebeneinander in einer Zeile bricht "Social Media ohne System" auf 390px
   um und schiebt den Aendern-Button aus der Flucht. */
.funnel-recap li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--ti-s-4);
  font-size: var(--ti-fs-body-s);
}

.funnel-recap li + li {
  margin-top: var(--ti-s-3);
  padding-top: var(--ti-s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.funnel-recap__label {
  grid-column: 1;
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--ti-fs-caption);
}

.funnel-recap__value {
  grid-column: 1;
  color: var(--ti-paper);
  font-weight: 600;
  line-height: 1.35;
}

.funnel-recap__edit {
  grid-column: 2;
  grid-row: 1 / -1;
}

.funnel-recap__edit {
  min-height: 44px;
  padding: var(--ti-s-2) var(--ti-s-3);
  margin-inline: calc(-1 * var(--ti-s-3));
  background: none;
  border: 0;
  color: var(--ti-gold);
  font-family: var(--ti-label);
  font-size: var(--ti-fs-body-s);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.funnel-recap__edit:hover,
.funnel-recap__edit:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   6. FORMULAR
   ========================================================================== */
.funnel-form {
  display: grid;
  gap: var(--ti-s-4);
}

.funnel-field {
  display: grid;
  gap: var(--ti-s-2);
}

/* Vor- und Nachname nebeneinander, sobald Platz ist. Darunter gestapelt -
   zwei halbe Felder auf 320px waeren beide zu schmal zum Tippen. */
.funnel-field-row {
  display: grid;
  gap: var(--ti-s-4);
}

.funnel-field label {
  font-family: var(--ti-label);
  font-size: var(--ti-fs-body-s);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.funnel-field__optional {
  margin-left: var(--ti-s-2);
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

.funnel-field input {
  width: 100%;
  min-height: 48px;
  padding: var(--ti-s-3) var(--ti-s-4);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ti-r-3);
  color: var(--ti-paper);
  font-family: var(--ti-sans);
  /* 16px ist die Untergrenze: darunter zoomt iOS Safari beim Fokus in das
     Feld hinein und der Nutzer landet in einer verschobenen Seite. */
  font-size: 1rem;
  transition:
    border-color var(--ti-dur-base) var(--ti-ease-standard),
    background-color var(--ti-dur-base) var(--ti-ease-standard);
}

.funnel-field input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.funnel-field input:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.funnel-field input:focus {
  border-color: var(--ti-gold);
  background-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

.funnel-field input:focus-visible {
  outline: 3px solid var(--ti-gold);
  outline-offset: 2px;
}

.funnel-field input[aria-invalid="true"] {
  border-color: var(--ti-danger);
}

/* Der Fehler steht am Feld, nicht in einem Sammelkasten am Ende: dort muesste
   der Nutzer erst zuordnen, welches Feld gemeint ist. Rot auf Schwarz waere
   zu dunkel, deshalb der helle Ton. */
.funnel-field__error {
  margin: 0;
  color: #FF9A8F;
  font-size: var(--ti-fs-body-s);
  line-height: 1.4;
}

/* Honigtopf gegen Bots. Nicht display:none - manche Bots erkennen das und
   lassen das Feld dann aus. */
.funnel-gotcha {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.funnel-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ti-s-3);
  align-items: start;
  margin-top: var(--ti-s-2);
}

/* 24px sichtbar, aber mit padding auf 44px Trefferflaeche - die Box selbst
   groesser zu ziehen wuerde sie neben dem Text ploetzlich dominant machen. */
.funnel-consent input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  accent-color: var(--ti-gold);
  cursor: pointer;
}

.funnel-consent label {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--ti-fs-body-s);
  line-height: 1.5;
  cursor: pointer;
}

.funnel-consent label a {
  color: var(--ti-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.funnel-form__error {
  margin: 0;
  padding: var(--ti-s-3) var(--ti-s-4);
  background-color: rgba(196, 56, 44, 0.16);
  border: 1px solid var(--ti-danger);
  border-radius: var(--ti-r-3);
  color: #FFC9C2;
  font-size: var(--ti-fs-body-s);
  line-height: 1.5;
}

.funnel-form__error a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.funnel-form__submit {
  width: 100%;
  margin-top: var(--ti-s-2);
}

.funnel-form__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.funnel-form__note {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--ti-fs-caption);
  line-height: 1.5;
  text-align: center;
}

/* ==========================================================================
   7. DANKE-SCHRITT
   ========================================================================== */
.funnel-step--done {
  text-align: center;
}

.funnel-step--done .funnel-step__question,
.funnel-step--done .funnel-step__lead {
  max-width: none;
  margin-inline: auto;
}

.funnel-step--done .funnel-step__lead {
  max-width: 42ch;
}

.funnel-done__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--ti-s-5);
  border-radius: 50%;
  background-color: rgba(76, 195, 138, 0.16);
  color: var(--ti-green-fg);
}

.funnel-done__mark svg {
  width: 2rem;
  height: 2rem;
}

/* .btn--ghost ist fuer helle Flaechen gebaut (dunkle Schrift, dunkle Kante)
   und waere hier fast unsichtbar. Auf Schwarz traegt die helle Kante den
   Button; gold waere er ein zweiter CTA, den es hier nicht mehr braucht. */
.funnel-step--done .btn--ghost {
  margin-top: var(--ti-s-7, 2.5rem);
  color: var(--ti-paper);
  border-color: rgba(255, 255, 255, 0.38);
}

.funnel-step--done .btn--ghost:hover,
.funnel-step--done .btn--ghost:focus-visible {
  background-color: var(--ti-paper);
  color: var(--ti-ink);
  border-color: var(--ti-paper);
}

/* ==========================================================================
   8. ZURUECK + FUSS
   ========================================================================== */
/* Klasse plus Attribut, damit die Regel die display-Angaben darunter
   schlaegt: ein blosses [hidden] hat dieselbe Spezifitaet wie .funnel-back
   und verliert dann gegen die spaeter notierte Regel. Ohne das stuende der
   Zurueck-Button schon auf Schritt 1. */
.funnel-back[hidden],
.funnel-recap[hidden] {
  display: none;
}

.funnel-back {
  display: inline-block;
  min-height: 44px;
  margin-top: var(--ti-s-6);
  padding: var(--ti-s-3) 0;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--ti-label);
  font-size: var(--ti-fs-body-s);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--ti-dur-base) var(--ti-ease-standard);
}

.funnel-back:hover,
.funnel-back:focus-visible {
  color: var(--ti-gold);
}

.funnel-footer {
  padding: var(--ti-s-5) var(--ti-s-5) var(--ti-s-6);
  text-align: center;
}

/* max-width: none, sonst begrenzt die globale p-Regel (65ch) den Kasten und
   der zentrierte Text steht sichtbar links neben der Mitte - derselbe Fall
   wie bei .section__overline in style.css. */
.funnel-footer__meta {
  max-width: none;
  margin: 0;
  font-size: var(--ti-fs-caption);
  color: rgba(255, 255, 255, 0.52);
}

.funnel-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ti-s-5);
  margin-top: var(--ti-s-2);
}

.funnel-footer__legal a {
  /* Wie im Hauptfooter: 44px Trefferhoehe ueber padding-block, damit die
     Zeile ihre Position behaelt. */
  display: inline-block;
  min-height: 44px;
  padding-block: var(--ti-s-3);
  color: rgba(255, 255, 255, 0.52);
  font-size: var(--ti-fs-caption);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.funnel-footer__legal a:hover,
.funnel-footer__legal a:focus-visible {
  color: var(--ti-gold);
}

/* ==========================================================================
   9. BREAKPOINTS
   ========================================================================== */
@media (min-width: 480px) {
  .funnel-field-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .funnel-header__logo img {
    height: 1.75rem;
  }

  .funnel-option {
    min-height: 4.5rem;
    padding-inline: var(--ti-s-6);
  }

  .funnel-form__submit {
    width: auto;
    justify-self: start;
  }

  .funnel-form__note {
    text-align: left;
  }
}

/* ==========================================================================
   10. prefers-reduced-motion
   Der Schritteinzug entfaellt, Farb- und Kantenwechsel bleiben - sie sind
   die Rueckmeldung auf die eigene Eingabe, keine Zierde.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .funnel-step.is-active {
    animation: none;
  }

  .funnel-option:hover {
    transform: none;
  }
}