/*
 * 3S.tax Lead-Formular — Default-Stylesheet
 *
 * Alle Klassen beginnen mit .stax- damit es keine Konflikte
 * mit dem CSS der Gastgeberseite gibt.
 *
 * Zum Überschreiben: einfach nach diesem <link> ein eigenes
 * Stylesheet laden, z.B.:
 *   .stax-form { max-width: 500px; }
 *   .stax-btn-primary { background: #ff6600; }
 */

/* ── Container ─────────────────────────────────────────── */
.stax-form {
  max-width: 620px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1a1a1a;
  line-height: 1.5;
}

/* ── Progress Bar ──────────────────────────────────────── */
.stax-progress {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  gap: 0;
}

.stax-progress-step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}

.stax-progress-step.active {
  background: #507DBC;
  color: #fff;
}

.stax-progress-step.done {
  background: #16a34a;
  color: #fff;
}

.stax-progress-step.pending {
  background: #e5e7eb;
  color: #6b7280;
}

.stax-progress-line {
  flex: 1;
  height: 2px;
  margin: 0 6px;
  transition: background 0.3s;
}

.stax-progress-line.done {
  background: #16a34a;
}

.stax-progress-line.pending {
  background: #e5e7eb;
}

/* ── Card ──────────────────────────────────────────────── */
.stax-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  border: 1px solid #e2e8f0;
}

/* ── Headings ──────────────────────────────────────────── */
.stax-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #1a1a1a;
}

.stax-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px;
}

/* ── Form Fields ───────────────────────────────────────── */
.stax-field {
  margin-bottom: 18px;
}

.stax-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
  color: #1a1a1a;
}

.stax-required {
  color: #dc2626;
}

.stax-hint {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 5px;
}

.stax-input,
.stax-select,
.stax-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  background: #fafafa;
  font-size: 15px;
  color: #1a1a1a;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.stax-input:focus,
.stax-select:focus,
.stax-textarea:focus {
  border-color: #507DBC;
}

/* .stax-select selbst erbt die dunkle Farbe zuverlaessig fuer den
   geschlossenen Kasten, die aufgeklappte Options-Liste wird aber vom
   Browser oft mit OS-Standardfarbe gerendert (wirkt grau) statt die
   gesetzte color zu uebernehmen - deshalb hier explizit auf option. */
.stax-select option {
  color: #1a1a1a;
  background: #ffffff;
}

.stax-textarea {
  resize: vertical;
  min-height: 70px;
}

.stax-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Service Cards (Step 3) ────────────────────────────── */
.stax-service-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.stax-service-card {
  text-align: left;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.stax-service-card:hover {
  border-color: #507DBC;
}

.stax-service-card.selected {
  border-color: #507DBC;
  background: #e8eff8;
  box-shadow: 0 0 0 3px rgba(80,125,188,0.12);
}

.stax-service-card.highlighted {
  background: #fffbeb;
}

.stax-service-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}

.stax-service-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
}

.stax-service-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 6px;
}

.stax-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.stax-tag {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 20px;
  background: #e5e7eb;
  color: #6b7280;
}

.stax-service-card.selected .stax-tag {
  background: rgba(80,125,188,0.15);
  color: #507DBC;
}

/* ── Modus-Auswahl (nur bei STAX_CONFIG.modus = "beide") ──── */
.stax-mode-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 8px;
}

.stax-mode-card {
  text-align: left;
  padding: 18px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.stax-mode-card:hover {
  border-color: #507DBC;
  background: #e8eff8;
}

.stax-mode-card-title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: #1a1a1a;
}

.stax-mode-card-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.5;
}

/* Zurueck zur Modus-Auswahl (nur bei modus: "beide") — unauffaellig, kein
   Button-Look, damit es sich nicht mit dem primaeren Absende-Knopf misst. */
.stax-back-link {
  display: inline-block;
  margin-bottom: 14px;
  padding: 0;
  border: none;
  background: none;
  color: #6b7280;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.stax-back-link:hover {
  color: #507DBC;
}

/* ── Honeypot (Spamschutz) ─────────────────────────────────
   CSS-versteckt statt type="hidden": Passwortmanager fuellen ein
   hidden-Feld nicht aus - genau das Ausfuellen ist das Bot-Signal. */
.stax-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ── Buttons ───────────────────────────────────────────── */
.stax-btn-primary {
  width: 100%;
  padding: 12px 20px;
  background: #507DBC;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
}

.stax-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.stax-btn-primary:not(:disabled):hover {
  opacity: 0.9;
}

.stax-btn-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.stax-btn-secondary {
  flex: 1;
  padding: 11px 20px;
  background: #f3f4f6;
  color: #1a1a1a;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.stax-btn-row .stax-btn-primary {
  flex: 2;
  width: auto;
}

/* ── DSGVO Checkbox ────────────────────────────────────── */
.stax-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 1.6;
  color: #374151;
}

.stax-consent input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: #507DBC;
  cursor: pointer;
}

.stax-consent a {
  color: #507DBC;
  text-decoration: underline;
}

/* ── Turnstile (Spamschutz) ────────────────────────────── */
.stax-turnstile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  /* Ohne Umbruch standen Widget (300 px) und Hinweistext zwangsweise
     nebeneinander und schoben die Seite auf einem 390-px-Display um 28 px
     waagerecht auf. Der Hinweis rutscht jetzt darunter, wenn es eng wird. */
  flex-wrap: wrap;
}

.stax-turnstile-widget {
  height: 56px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Kompakte Cloudflare-Variante (150×140 statt 300×65). Sie wird auf schmalen
   Containern gerendert (s. embed.js) — dort passt die normale nicht einmal
   mehr in den Inhaltsbereich. Die Hoehe muss mitwandern, sonst schneidet
   overflow:hidden das Widget auf 56 px ab. 140 × 0.85 ≈ 119. */
.stax-turnstile-widget.stax-turnstile-kompakt {
  height: 121px;
}

.stax-turnstile-widget > div {
  transform: scale(0.85);
  transform-origin: left top;
}

.stax-turnstile-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: #6b7280;
}

/* ── Info Box ──────────────────────────────────────────── */
.stax-info {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #0369a1;
  display: flex;
  gap: 6px;
}

/* ── KapG Hint ─────────────────────────────────────────── */
.stax-kapg-box {
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 6px;
}

.stax-kapg-label {
  font-size: 12px;
  color: #92400e;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ── Error ─────────────────────────────────────────────── */
.stax-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #b91c1c;
}

/* ── Done Screen ───────────────────────────────────────── */
.stax-done {
  text-align: center;
  padding: 12px 0;
}

.stax-done-icon {
  font-size: 56px;
  margin-bottom: 12px;
}

.stax-done-title {
  font-size: 22px;
  font-weight: 800;
  color: #16a34a;
  margin: 0 0 10px;
}

.stax-done-text {
  color: #374151;
  font-size: 14px;
  line-height: 1.7;
  max-width: 400px;
  margin: 0 auto 20px;
}

.stax-done-steps {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 10px;
  padding: 16px 20px;
  max-width: 380px;
  margin: 0 auto 20px;
  text-align: left;
}

.stax-done-steps-title {
  font-weight: 700;
  font-size: 13px;
  color: #15803d;
  margin-bottom: 10px;
}

.stax-done-steps ol {
  margin: 0;
  padding: 0 0 0 18px;
  color: #374151;
  font-size: 13px;
  line-height: 1.8;
}

.stax-footer {
  text-align: center;
  margin-top: 16px;
  font-size: 12px;
  color: #6b7280;
}

.stax-footer a {
  color: #507DBC;
  text-decoration: none;
  font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  /* iOS Safari zoomt beim Fokussieren JEDES Feldes unter 16px in die Seite
     hinein und laesst den Nutzer herausgezoomt zurueck — er muss nach jedem
     Feld von Hand zurueckzoomen. 16px ist die Schwelle im WebKit, keine
     Geschmacksfrage. Gemessen: alle Felder standen auf 15px. */
  .stax-input,
  .stax-select,
  .stax-textarea {
    font-size: 16px;
  }

  /* Tippziele: 44px ist das Mindestmass, das Apple und Google nennen.
     Gemessen waren Auswahlfelder 40px und Knoepfe 42px hoch. */
  .stax-input,
  .stax-select {
    min-height: 44px;
  }

  .stax-btn-primary,
  .stax-btn-secondary {
    min-height: 44px;
  }

  .stax-card {
    padding: 20px 16px;
  }
  .stax-grid-2 {
    grid-template-columns: 1fr;
  }
  .stax-mode-choice {
    grid-template-columns: 1fr;
  }
}