/* ===================================================================
   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;
  /* Kein eigener Farbton: nur weiche Zeichnung und ein Hauch Weiß,
     damit der Text lesbar bleibt und die Karte darunter durchscheint. */
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  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;
}


/* ===================================================================
   Popup für Umfrage und Optin
   -------------------------------------------------------------------
   Der Check liegt nicht mehr im Seitenfluss, sondern öffnet sich über
   der Seite. Aufbau wie im Webinar-Funnel, Farben aus dem CI.
   =================================================================== */

#sk-ovl:not([hidden]) { display: flex; }

#sk-ovl {
  position: fixed;
  inset: 0;
  z-index: 60;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 32px 16px;
  background: rgba(1, 22, 30, .85);              /* ink */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

#sk-ovl .sk-ovl-box {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 34rem;
}

#sk-ovl .sk-ovl-kopf {
  padding-right: 46px;
  margin-bottom: 14px;
  color: #EFF6E0;                                /* cream */
  text-align: center;
}

#sk-ovl .sk-ovl-titel {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 60;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
}

#sk-ovl .sk-ovl-sub {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(239, 246, 224, .8);
}

#sk-ovl .sk-ovl-zu {
  position: absolute;
  top: -6px;
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(239, 246, 224, .12);
  color: #EFF6E0;
  font-size: 26px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

#sk-ovl .sk-ovl-zu:hover { background: #EFF6E0; color: #01161E; }
#sk-ovl .sk-ovl-zu:focus-visible { outline: 2px solid #AEC3B0; outline-offset: 2px; }

#sk-ovl .sk-ovl-fuss {
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  text-align: center;
  color: rgba(239, 246, 224, .6);
}

@media (min-width: 768px) {
  #sk-ovl .sk-ovl-titel { font-size: 25px; }
  #sk-ovl { padding: 48px 20px; }
}

/* Solange das Popup offen ist, scrollt die Seite dahinter nicht mit */
html.sk-ovl-offen, body.sk-ovl-offen { overflow: hidden !important; }

/* ===================================================================
   Telefonfeld mit Ländervorwahl
   -------------------------------------------------------------------
   Die Liste klappt nach OBEN auf: das Feld steht am unteren Rand des
   Formulars, nach unten wäre sie halb abgeschnitten.
   =================================================================== */

.sk-tel {
  display: flex;
  gap: 8px;
  margin-top: .375rem;
}

.sk-tel-land { position: relative; flex: 0 0 auto; }

.sk-tel-knopf {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 12px;
  border: 1px solid rgba(1, 22, 30, .15);
  border-radius: .75rem;
  background: #fff;
  color: #01161E;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .12s ease;
}

.sk-tel-knopf:hover { border-color: #598392; }
.sk-tel-knopf[aria-expanded="true"] { border-color: #124559; box-shadow: 0 0 0 3px rgba(18,69,89,.2); }

.sk-tel-flagge { font-size: 20px; line-height: 1; }
.sk-tel-vorwahl { font-variant-numeric: tabular-nums; }

.sk-tel-pfeil {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid rgba(1, 22, 30, .45);
}

.sk-tel-nummer {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(1, 22, 30, .15);
  border-radius: .75rem;
  padding: .875rem 1rem;
  font: inherit;
  font-size: 16px;
  color: #01161E;
  background: #fff;
}

.sk-tel-nummer:focus {
  outline: none;
  border-color: #124559;
  box-shadow: 0 0 0 3px rgba(18,69,89,.2);
}

/* --------------------------- Die Liste --------------------------- */

.sk-tel-liste {
  position: absolute;
  bottom: calc(100% + 6px);            /* nach oben, nicht nach unten */
  left: 0;
  z-index: 30;
  width: 17rem;
  max-height: 15rem;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(1, 22, 30, .12);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 18px 44px -18px rgba(1, 22, 30, .45);
}

.sk-tel-liste[hidden] { display: none; }

.sk-tel-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  color: #01161E;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.sk-tel-eintrag:hover,
.sk-tel-eintrag:focus-visible { background: #F6FAEC; outline: none; }

.sk-tel-name { flex: 1 1 auto; min-width: 0; }

.sk-tel-code {
  flex: 0 0 auto;
  color: rgba(1, 22, 30, .5);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .sk-tel-liste { width: 15rem; }
}