/* ekey CMS – Landingpage mit Formular.
   Der Kopf kommt aus ekey-cms.css (.ekey-hero…), hier steht nur das Formular.
   Farben wie im übrigen Plugin: ekey-Blau #00457c, Flächen #f5f5f7, Radius 8px.
   Die Selektoren sind bewusst zweistufig (.ekey-lp davor) – Avada bringt für
   Eingabefelder eigene Regeln mit, die sonst gewinnen. */

/* ── Banner ────────────────────────────────────────────────────────── */
/* Das Bild wird gespiegelt: Frau und Fingerscanner sitzen im Original links,
   also genau dort, wo die Ueberschrift steht. Gespiegelt liegt die freie
   Tuerflaeche unter dem Text und das Motiv rechts daneben.
   Bewusst auf `.ekey-lp` eingegrenzt – die Hero-Klassen teilt sich diese Seite
   mit der Academy, die ihr Bild nicht gespiegelt haben will. */
.ekey-lp .ekey-hero img { transform: scaleX(-1); }

/* Inhaltsbreite wie in der Academy (.ekey-ac-layout / .ekey-ac-cta). */
.ekey-lp-inner {
  max-width: 1248px;
  margin: 0 auto 72px;
  padding: 0 20px;
  box-sizing: border-box;
}

.ekey-lp-intro { color: #141617; }
.ekey-lp-intro p:last-child { margin-bottom: 0; }

/* ── Angebote ──────────────────────────────────────────────────────── */
/* Die Überschrift steht über dem Text und bleibt bewusst ohne eigene Regeln:
   Größe, Farbe und Gewicht kommen aus dem h2 des Themes. */
.ekey-lp-offers { margin-top: 32px; }

/* Kein Kasten, sondern ein blauer Strich links an jedem Eintrag. Zwei Spalten,
   damit die Zeilen breit genug für ganze Sätze sind. */
.ekey-lp-offers-list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
}
@media (max-width: 780px) {
  .ekey-lp-offers-list { grid-template-columns: 1fr; gap: 22px; }
}

.ekey-lp-offer {
  border-left: 3px solid #00457c;
  padding-left: 18px;
}

/* Schriftgrößen wie in den CTA-Boxen der Academy. */
.ekey-lp .ekey-lp-offer dt { margin: 0 0 5px; font-size: 17px; font-weight: 700; color: #141617; }
.ekey-lp .ekey-lp-offer dd { margin: 0; font-size: 14px; line-height: 1.5; color: #575756; }

/* ── Hinweiskasten unter den Kacheln ───────────────────────────────── */
/* Linksbündig wie alles darüber und darunter: mittig im 1248 px breiten Band
   bleiben links und rechts je 250 px leer, der Kasten wirkt dann halb leer. */
.ekey-lp-hinweis {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 20px 24px;
  background: #eef4f9;
  border-radius: 8px;
}
.ekey-lp-hinweis svg { color: #00457c; flex: none; }
.ekey-lp .ekey-lp-hinweis p { margin: 0; font-size: 14px; line-height: 1.6; color: #141617; }
@media (max-width: 640px) {
  .ekey-lp-hinweis { align-items: flex-start; gap: 14px; padding: 18px; }
}

/* ── Formular ──────────────────────────────────────────────────────── */
.ekey-lp-formwrap { margin-top: 48px; }

/* Innerhalb des grauen Feldes: Fragen links, Info-Kasten rechts. Der Kasten
   steht außerhalb der Abschnitte und bleibt über alle Schritte stehen. */
.ekey-lp-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 980px) {
  .ekey-lp-cols { grid-template-columns: 1fr; gap: 24px; }
}
.ekey-lp-main { min-width: 0; }

/* ── Info-Kasten ───────────────────────────────────────────────────── */
.ekey-lp-side {
  background: #eef4f9;
  border-radius: 8px;
  padding: 26px;
}

.ekey-lp .ekey-lp-side h3 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 700;
  color: #141617;
}

.ekey-lp .ekey-lp-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.ekey-lp .ekey-lp-side-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #575756;
}
.ekey-lp-side-list svg { color: #a3ac00; flex: none; margin-top: 2px; }

/* Zweiter Teil: Datenschutz. Die Linie trennt ihn von der Aufzählung. */
.ekey-lp-side-safe {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid #d5e2ed;
}
.ekey-lp .ekey-lp-side-safe h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #00457c;
}
.ekey-lp .ekey-lp-side-safe p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #575756;
}
.ekey-lp .ekey-lp-side-safe a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #00457c;
  text-decoration: underline;
}

.ekey-lp .ekey-lp-form {
  margin: 0;
  background: #f5f5f7;
  border-radius: 8px;
  padding: 32px;
}
@media (max-width: 640px) {
  .ekey-lp .ekey-lp-form { padding: 22px; }
}

/* Mehrzeiliges, Dateien und die Zustimmung laufen über die volle Breite –
   nur die kurzen Felder stehen zu zweit nebeneinander. */
.ekey-lp .ekey-lp-field--wide,
.ekey-lp .ekey-lp-field--check { grid-column: 1 / -1; }

.ekey-lp .ekey-lp-note,
.ekey-lp .ekey-lp-msg { margin-top: 18px; }
.ekey-lp .ekey-lp-submit { margin-top: 18px; }

.ekey-lp .ekey-lp-field { margin: 0; min-width: 0; }

/* Jede Frage sitzt in einer eigenen weißen Karte – sonst laufen vier Fragen
   untereinander zu einer einzigen grauen Fläche zusammen. */
.ekey-lp .ekey-lp-field--frage {
  background: #fff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  padding: 18px 20px;
}

.ekey-lp .ekey-lp-field > label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #101828;
}
.ekey-lp .ekey-lp-field--frage > label { margin-bottom: 0; }

.ekey-lp-req { color: #b42318; margin-left: 3px; }

.ekey-lp .ekey-lp-field input[type="text"],
.ekey-lp .ekey-lp-field input[type="email"],
.ekey-lp .ekey-lp-field input[type="file"],
.ekey-lp .ekey-lp-field select,
.ekey-lp .ekey-lp-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e0e0e3;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: #141617;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.ekey-lp .ekey-lp-field textarea { resize: vertical; min-height: 120px; }

.ekey-lp .ekey-lp-field input:focus,
.ekey-lp .ekey-lp-field select:focus,
.ekey-lp .ekey-lp-field textarea:focus {
  outline: none;
  border-color: #00457c;
  box-shadow: 0 0 0 3px rgba(0, 69, 124, .12);
}

.ekey-lp-hint { margin: 6px 0 0; font-size: 13px; color: #6b7280; }
/* Hinweis unter einer Frage („Mehrfachauswahl möglich", Vorbehalt zur
   Workshop-Form) sitzt eng an der Frage – die Luft davor bringt die Frage
   selbst mit, die danach die Antworten. */
.ekey-lp .ekey-lp-hint--frage { margin: 0; }

/* ── Schritt-Ablauf ────────────────────────────────────────────────── */
/* Fortschritt: nummerierte Abschnitte über dem Formular. */
.ekey-lp .ekey-lp-steps {
  display: flex;
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid #e4e7ec;
  list-style: none;
}
/* Jeder Abschnitt gleich breit, Nummer oben, Beschriftung darunter, dazwischen
   eine Linie – damit es nach Weg aussieht und nicht nach Reiterleiste. */
.ekey-lp .ekey-lp-steps-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: #98a2b3;
}
.ekey-lp .ekey-lp-steps-item::before {
  content: '';
  position: absolute;
  top: 13px;
  right: calc(50% + 18px);
  left: calc(-50% + 18px);
  height: 1px;
  background: #dcdfe4;
}
.ekey-lp .ekey-lp-steps-item:first-child::before { display: none; }

.ekey-lp-steps-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex: none;
  border-radius: 50%;
  background: #e0e0e3;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.ekey-lp-steps-item.is-active { color: #141617; font-weight: 700; }
.ekey-lp-steps-item.is-active .ekey-lp-steps-nr { background: #00457c; }
.ekey-lp-steps-item.is-done { color: #575756; }
.ekey-lp-steps-item.is-done .ekey-lp-steps-nr { background: #7fa2bd; }
.ekey-lp-steps-item.is-done::before,
.ekey-lp-steps-item.is-active::before { background: #7fa2bd; }
@media (max-width: 640px) {
  .ekey-lp .ekey-lp-steps { padding-bottom: 18px; margin-bottom: 20px; }
  .ekey-lp .ekey-lp-steps-item:not(.is-active) .ekey-lp-steps-label { display: none; }
}

/* Ein Abschnitt. fieldset bringt eigene Ränder mit – die weg. */
.ekey-lp .ekey-lp-step {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ekey-lp .ekey-lp-step legend {
  margin: 0 0 18px;
  padding: 0;
  font-size: 19px;
  font-weight: 700;
  color: #141617;
}
/* Neben dem Info-Kasten bleiben dem Formular rund 870 px – zwei Spalten für
   die kurzen Felder, Fragen und mehrzeiliges laufen darüber hinweg. */
.ekey-lp-stepgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 24px;
}
@media (max-width: 640px) { .ekey-lp-stepgrid { grid-template-columns: 1fr; } }

/* Weiter / Zurück */
.ekey-lp .ekey-lp-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ekey-lp .ekey-lp-count { margin-left: auto; font-size: 13px; color: #6b7280; }
.ekey-lp .ekey-lp-next,
.ekey-lp .ekey-lp-back {
  border-radius: 8px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}
.ekey-lp .ekey-lp-next { background: #00457c; color: #fff; border-color: #00457c; }
.ekey-lp .ekey-lp-next:hover { background: #00365f; }
.ekey-lp .ekey-lp-back { background: #fff; color: #00457c; border-color: #c8d3dd; }
.ekey-lp .ekey-lp-back:hover { border-color: #00457c; }

/* ── Auswahlfragen (einfach und mehrfach) ──────────────────────────── */
/* Die Antworten stehen untereinander, eine pro Zeile – bei einfacher wie bei
   mehrfacher Auswahl. Nebeneinander sparte Höhe, aber das Auge musste die
   Möglichkeiten in zwei Richtungen absuchen; in einer Spalte liest man sie in
   einem Durchgang von oben nach unten. Ein Rahmen um jede einzelne Antwort
   bleibt weiterhin weg – das machte aus vier Möglichkeiten einen wuchtigen
   Block. */
.ekey-lp-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Der Abstand zwischen Frage und Antworten hängt an den Antworten, nicht an
   der Frage: so bleibt er gleich, ob eine Hinweiszeile dazwischen steht oder
   nicht. */
.ekey-lp .ekey-lp-field--frage > .ekey-lp-choices { margin-top: 12px; }

.ekey-lp .ekey-lp-choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.4;
  color: #141617;
  cursor: pointer;
}
.ekey-lp .ekey-lp-choice:hover { color: #00457c; }
.ekey-lp .ekey-lp-choice input {
  margin: 0;
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: #00457c;
}
.ekey-lp .ekey-lp-choice:has(input:checked) { font-weight: 600; }

/* ── Zustimmung (Datenschutz) ──────────────────────────────────────── */
.ekey-lp .ekey-lp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #141617;
  cursor: pointer;
}
.ekey-lp .ekey-lp-check input {
  margin: 2px 0 0;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #00457c;
}
.ekey-lp .ekey-lp-check a { color: #00457c; }

/* ── Fehler ────────────────────────────────────────────────────────── */
.ekey-lp .ekey-lp-error { margin: 6px 0 0; font-size: 13px; color: #b42318; }

.ekey-lp .is-error input[type="text"],
.ekey-lp .is-error input[type="email"],
.ekey-lp .is-error input[type="file"],
.ekey-lp .is-error select,
.ekey-lp .is-error textarea { border-color: #b42318; }

.ekey-lp .ekey-lp-msg {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fef3f2;
  border: 1px solid #fda29b;
  color: #b42318;
  font-size: 14px;
}

.ekey-lp-note { margin: 0; font-size: 13px; color: #6b7280; }

/* ── Absenden ──────────────────────────────────────────────────────── */
.ekey-lp .ekey-lp-submit {
  justify-self: start;
  background: #00457c;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.ekey-lp .ekey-lp-submit:hover { background: #00365f; }
.ekey-lp .ekey-lp-submit:disabled { background: #8fa8bd; cursor: default; }

/* ── Danke-Kasten (ersetzt das Formular nach dem Absenden) ─────────── */
.ekey-lp-done {
  background: #f5f5f7;
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
}
.ekey-lp-done h3 { margin: 0 0 10px; color: #00457c; }
.ekey-lp-done p { margin: 0; color: #141617; }

/* ── Relais nicht erreichbar / kein JavaScript ─────────────────────── */
.ekey-lp-down {
  background: #f5f5f7;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: #6b7280;
  margin: 0;
}

/* ── Honigtopf: für Menschen unsichtbar, für Bots verlockend ───────── */
.ekey-lp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}