/* ===================================================================
   Samuel Kochenburger · Warte-Anzeige im Formular
   -------------------------------------------------------------------
   Legt sich über die Karte, in der die Person gerade gearbeitet hat,
   statt über die ganze Seite. Der Rest bleibt stehen, der Übergang
   ist ruhiger und die Seite springt nicht.

   Markup erzeugt assets/funnel.js (SK.warteAnimation).
   =================================================================== */

.sk-warte {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: inherit;
  /* Halbtransparent mit weicher Zeichnung: die Karte darunter bleibt
     erkennbar, der Text darauf aber trotzdem gut lesbar. */
  background: rgba(239, 246, 224, .82);          /* cream */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility 0s linear .28s;
}

.sk-warte--an {
  opacity: 1;
  visibility: visible;
  transition: opacity .28s ease, visibility 0s linear 0s;
}

.sk-warte-box {
  width: 100%;
  max-width: 21rem;
  text-align: center;
}

/* Das Logo atmet leicht, damit erkennbar bleibt, dass etwas läuft.
   Kein Drehen: ein rotierendes Markenzeichen sieht nach Ladefehler aus. */
.sk-warte-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  animation: sk-atmen 3.4s ease-in-out infinite;
}

@media (min-width: 768px) {
  .sk-warte-logo { width: 84px; height: 84px; }
}

@keyframes sk-atmen {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.06); }
}

/* --------------------------- 5 Hebel ---------------------------
   Rasten nacheinander ein und bleiben aktiv. Am Ende stehen alle
   fünf, genau die Aussage der Seite.                             */

.sk-hebel-liste {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.sk-hebel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
}

.sk-hebel-punkt {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #C9D6C9;
  /* --h staffelt das Einrasten: Hebel für Hebel, nicht alle zugleich */
  animation: sk-einrasten .5s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(.35s + var(--h) * 300ms);
}

.sk-hebel-text {
  font-size: 10.5px;
  line-height: 1.25;
  color: #93A79A;
  letter-spacing: .01em;
  animation: sk-hebel-text .5s ease-out forwards;
  animation-delay: calc(.35s + var(--h) * 300ms);
}

@media (min-width: 768px) {
  .sk-hebel-text { font-size: 11.5px; }
}

@keyframes sk-einrasten {
  0%   { background: #C9D6C9; transform: scale(1);    }
  55%  { background: #124559; transform: scale(1.65); }
  100% { background: #124559; transform: scale(1.15); }
}

@keyframes sk-hebel-text {
  from { color: #93A79A; }
  to   { color: #01161E; }             /* ink */
}

/* ---------------------------- Text ---------------------------- */

.sk-warte-text {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: #124559;                      /* deep */
  min-height: 3em;                     /* verhindert Springen beim Textwechsel */
}

@media (min-width: 768px) {
  .sk-warte-text { font-size: 16px; }
}

/* ------------------- Reduzierte Bewegung -------------------
   Kein Atmen, kein Skalieren. Die fünf Hebel stehen still auf
   ihrem Endzustand, der Text wechselt weiter, die Information
   geht also nicht verloren.                                     */

@media (prefers-reduced-motion: reduce) {
  .sk-warte-logo,
  .sk-hebel-punkt,
  .sk-hebel-text {
    animation: none;
  }
  .sk-hebel-punkt { background: #124559; transform: scale(1.15); }
  .sk-hebel-text  { color: #01161E; }
  .sk-warte       { transition: none; }
}

/* ===================================================================
   Multistep-Umfrage (assets/funnel-umfrage.js)
   -------------------------------------------------------------------
   Die Klassen liegen hier statt in Tailwind-Utilities, weil das Markup
   aus dem Script kommt und der Tailwind-CDN-Scanner es nicht sieht.
   Farben aus dem CI: ink #01161E · deep #124559 · sage #AEC3B0
   =================================================================== */

/* Antwortoptionen: die ganze Fläche ist klickbar, nicht nur das kleine
   Kästchen. Zielgruppe ist 45+ und oft am Telefon. */
.sk-opt {
  display: flex; align-items: flex-start; gap: .75rem;
  width: 100%; padding: 1rem 1.1rem; text-align: left;
  border: 1px solid #AEC3B0; border-radius: .75rem;
  background: #fff; color: #01161E; cursor: pointer;
  font: inherit;
  transition: border-color .12s ease, background-color .12s ease, transform .06s ease;
}
.sk-opt:hover  { border-color: #598392; background: #FCFDF8; }
.sk-opt:active { transform: translateY(1px); }
.sk-opt-an     { border-color: #124559; background: #F6FAEC; box-shadow: inset 0 0 0 1px #124559; }

/* Auswahl-Marke: eigener Punkt statt nativem Radio, damit Größe und
   Kontrast auf allen Geräten gleich sind. */
.sk-opt-marke {
  width: 1.2rem; height: 1.2rem; border-radius: 9999px; flex: none; margin-top: .1rem;
  border: 2px solid #AEC3B0; background: #fff;
  transition: border-color .12s ease, background-color .12s ease;
}
.sk-opt-an .sk-opt-marke { border-color: #124559; background: #124559; box-shadow: inset 0 0 0 3px #fff; }
.sk-opt-eckig .sk-opt-marke { border-radius: .3rem; }

/* Schrittwechsel */
.sk-balken { transition: width .3s cubic-bezier(.4,0,.2,1); }
.sk-schritt         { animation: sk-schritt-rein .26s ease-out; }
.sk-schritt-zurueck { animation: sk-schritt-raus .26s ease-out; }

@keyframes sk-schritt-rein {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0);    }
}
@keyframes sk-schritt-raus {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@media (prefers-reduced-motion: reduce) {
  .sk-schritt, .sk-schritt-zurueck { animation: none; }
}

.sk-opt:focus-visible,
.sk-umfrage button:focus-visible,
.sk-umfrage input:focus-visible,
.sk-umfrage textarea:focus-visible {
  outline: 2px solid #124559; outline-offset: 2px;
}