/* ============================================================
   Signup-Trichter im neuen Design
   ------------------------------------------------------------
   Bewusst nur eine Stilebene: die Formulare selbst bleiben Zeichen
   fuer Zeichen wie sie sind — Feldnamen, CSRF-Token, Honeypot,
   Passwort-Umschalter, Wizard-Logik. Angefasst wird ausschliesslich,
   wie das Ganze aussieht. Bei einem Anmeldeweg ist genau das die
   richtige Abwaegung: ein neu getipptes Formular ist die Stelle, an
   der so ein Trichter kaputtgeht, und ein kaputter Trichter kostet
   Kunden. Das Aussehen eines Formulars steckt ohnehin fast
   vollstaendig in Typografie, Abstand, Linie und Farbe.

   Wird ZUSAETZLICH zu basis.css geladen und ueberschreibt gezielt
   die Klassen aus landing.css, die der Wizard benutzt.
   ============================================================ */

body.signup-bg{
  background:var(--ground);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh;
  padding:clamp(20px,4vw,56px) 18px clamp(40px,6vw,80px);
  display:flex;justify-content:center;align-items:flex-start;
}

.wizard{
  width:100%;max-width:660px;
}

/* ---------- Kopf: Logo, Fortschritt, Schrittzaehler ---------- */
.wizard-header{
  display:grid;grid-template-columns:1fr auto;gap:16px;
  align-items:center;margin-bottom:clamp(22px,3vw,34px);
}
/* Feste Rasterplaetze, damit die Reihenfolge im HTML egal ist:
   Logo und Sprachwahl teilen sich die erste Zeile. */
.wizard-header .brand{grid-column:1;grid-row:1}
.wizard-header .bk-lang-menu{grid-column:2;grid-row:1;justify-self:end}
.wizard-header .wizard-progress{grid-column:1 / -1;grid-row:2}
.wizard-header .signup-meta{grid-column:1 / -1;grid-row:3;margin-top:-6px}
.wizard-header .brand{
  display:inline-flex;align-items:center;align-self:flex-start;
  text-decoration:none;color:var(--ink);
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;
  font-weight:700;font-size:1.32rem;letter-spacing:-.03em;
}
.wizard-header .brand img{height:30px;width:auto;display:block}

/* Der Fortschritt als Messrail-Zitat: fuenf Felder, gefuellte links */
.wizard-progress{display:flex;gap:5px}
.wizard-progress .step{
  flex:1;height:3px;background:var(--line);
  transition:background .45s cubic-bezier(.22,.61,.36,1);
}
.wizard-progress .step.done{background:var(--brand)}
.wizard-progress .step.active{background:var(--accent)}

.signup-meta{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}

/* ---------- Die Karte ---------- */
.wizard-card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:clamp(24px,3.4vw,44px);
}
.wizard-card > h2{
  margin:0 0 6px;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;
  font-weight:700;font-size:clamp(1.42rem,2.4vw,1.92rem);letter-spacing:-.032em;color:var(--ink);
}
.wizard-card > h3{
  margin:26px 0 12px;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106;
  font-weight:700;font-size:1.08rem;letter-spacing:-.02em;color:var(--ink);
}
.signup-lead,.wizard-card > .lead{
  margin:0 0 24px;font-size:15.4px;line-height:1.6;color:var(--ink-2);max-width:52ch;
}

/* ---------- Felder ---------- */
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

.form-group{margin-bottom:18px}
.form-group label{
  display:block;margin-bottom:7px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);
}
.form-group label .req{color:var(--accent)}
/* Beschriftungen von Ankreuzfeldern sind ganze Saetze. In Versalien und
   Mono werden die unlesbar — die bleiben normal gesetzt. */
.form-group label:has(input[type="checkbox"]),
.form-group label:has(input[type="radio"]){
  display:flex;align-items:flex-start;gap:10px;
  font-family:"Inter",sans-serif;font-size:14.6px;letter-spacing:0;
  text-transform:none;color:var(--ink-2);line-height:1.55;margin-bottom:0;
}
.form-group label input[type="checkbox"],
.form-group label input[type="radio"]{margin-top:3px;flex:none;accent-color:var(--accent)}

.form-control{
  width:100%;box-sizing:border-box;
  padding:12px 14px;
  border:1px solid var(--line);border-radius:0;
  background:var(--ground);color:var(--ink);
  font-family:"Inter",sans-serif;font-size:15.4px;line-height:1.4;
  transition:border-color .2s ease,background .2s ease;
}
.form-control::placeholder{color:var(--ink-3)}
.form-control:hover{border-color:var(--ink-3)}
.form-control:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(223,78,23,.12);
}
select.form-control{appearance:none;padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 51%,calc(100% - 12px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
textarea.form-control{min-height:110px;resize:vertical}

.form-hint{margin:6px 0 0;font-size:13px;color:var(--ink-3)}

/* Passwort-Auge sitzt im Feld */
.position-relative{position:relative}
.input-with-pw-toggle{padding-right:46px}
.password-toggle-btn{
  position:absolute;right:1px;top:1px;bottom:1px;width:42px;
  display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:var(--ink-3);cursor:pointer;
  transition:color .2s ease;
}
.password-toggle-btn:hover{color:var(--accent)}
.pw-str{
  margin-top:6px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:400;
}
.pw-str[data-strength="weak"]{color:#B4341A}
.pw-str[data-strength="medium"]{color:#B07A12}
.pw-str[data-strength="strong"]{color:#0E7C66}

/* ---------- Knoepfe ---------- */
.btn-wizard{
  display:block;width:100%;margin-top:8px;
  padding:14px 20px;border:1px solid var(--accent);border-radius:0;
  background:var(--accent);color:#fff;cursor:pointer;
  font-family:"Inter",sans-serif;font-size:15.2px;font-weight:600;letter-spacing:-.01em;
  transition:background .2s ease,border-color .2s ease;
}
.btn-wizard:hover{background:#C6440F;border-color:#C6440F}
.btn-wizard:disabled{opacity:.5;cursor:default}

.wizard-back{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  text-decoration:none;color:var(--ink-3);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:color .2s ease,gap .2s ease;
}
.wizard-back:hover{color:var(--accent)}

.skip-link{
  display:inline-block;margin-top:14px;color:var(--ink-3);
  font-size:13.6px;text-decoration:underline;text-underline-offset:2px;
}
.skip-link:hover{color:var(--accent)}

/* ---------- Meldungen ---------- */
.flash{
  margin-bottom:16px;padding:13px 16px;
  border:1px solid var(--line);border-left-width:2px;
  background:var(--surface);font-size:14.6px;line-height:1.55;color:var(--ink-2);
}
.flash-error,.flash-danger{border-left-color:#B4341A;color:#8C2814}
.flash-warning{border-left-color:#B07A12}
.flash-success{border-left-color:#0E7C66;color:#0A5A4A}
.flash-info{border-left-color:var(--brand)}

/* ---------- Trenner und Sonderbausteine ---------- */
.section-divider{
  margin:28px 0 22px;border:0;border-top:1px solid var(--line);
}
.mkt-check{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;font-size:14.6px;color:var(--ink-2)}
.mkt-check input{margin-top:3px;flex:none;accent-color:var(--accent)}

/* Abrechnungsumschalter (Monat/Jahr) in Schritt 4 */
.cycle-btn{
  padding:9px 16px;border:1px solid var(--line);background:transparent;cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);transition:all .2s ease;
}
.cycle-btn[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--ground)}
.yearly-price{color:var(--ink-3)}

/* Auswahlkacheln (Branche, Typ, Plan) */
.ec-typ-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media (max-width:560px){.ec-typ-row{grid-template-columns:1fr}}

.d-none{display:none!important}

/* Der Fuss unter der Karte */
.wizard > .signup-fuss{
  margin:20px 0 0;text-align:center;font-size:13.4px;color:var(--ink-3);
}
.wizard > .signup-fuss a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.wizard > .signup-fuss a:hover{color:var(--accent)}

/* ============================================================
   Die restlichen Bausteine des Trichters
   ============================================================ */

/* Schritt 4 hat eigene Varianten der Grundklassen */
body.signup-bg-step4{
  background:var(--ground);color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh;padding:clamp(20px,4vw,56px) 18px clamp(40px,6vw,80px);
  display:flex;justify-content:center;align-items:flex-start;
}
.signup-meta-step4,.signup-meta-text,.signup-meta-grey,.signup-meta-tiny{
  margin:0;font-family:"IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.signup-meta-step4,.signup-meta-text{font-size:10.5px}
.signup-meta-grey{font-size:10.5px;color:var(--ink-3)}
.signup-meta-tiny{font-size:9.5px}
.wizard-header .signup-meta-step4,
.wizard-header .signup-meta-text{grid-column:1 / -1;grid-row:3;margin-top:-6px}

/* Der Honeypot bleibt fuer Menschen unsichtbar — nicht anfassen */
.sg-hp,.mkt-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Dreispaltige Feldzeile (PLZ / Ort / Land) */
.form-row-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
@media (max-width:640px){.form-row-3{grid-template-columns:1fr}}

/* Planauswahl in Schritt 4 */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border:1px solid var(--line);background:var(--surface);margin-bottom:20px}
@media (max-width:680px){.plan-grid{grid-template-columns:1fr}}
.plan-card{
  position:relative;display:flex;flex-direction:column;
  padding:20px clamp(14px,1.8vw,20px);border-left:1px solid var(--line);cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease;
}
.plan-card:first-child{border-left:0}
@media (max-width:680px){.plan-card{border-left:0;border-top:1px solid var(--line)}
  .plan-card:first-child{border-top:0}}
.plan-card:hover{background:rgba(255,255,255,.6)}
.plan-card input[type="radio"]{accent-color:var(--accent)}
.plan-card:has(input:checked){box-shadow:inset 0 3px 0 var(--accent);background:rgba(255,255,255,.72)}
.plan-price{
  margin-top:10px;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;
  font-weight:700;font-size:1.46rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.plan-saving,.cycle-saving{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);
}
.monthly-price,.yearly-price,.yearly-only{display:inline}

/* Abrechnungsumschalter */
.cycle-toggle{display:inline-flex;gap:0;margin-bottom:18px;border:1px solid var(--line)}
.cycle-toggle .cycle-btn{border:0;border-left:1px solid var(--line)}
.cycle-toggle .cycle-btn:first-child{border-left:0}

/* Hinweiskaesten */
.callout,.info-warn,.email-box,.resend-box{
  margin:0 0 18px;padding:15px 17px;
  border:1px solid var(--line);border-left-width:2px;border-left-color:var(--brand);
  background:var(--surface);font-size:14.8px;line-height:1.6;color:var(--ink-2);
}
.info-warn{border-left-color:#B07A12}
.email-box{border-left-color:var(--accent)}
.callout p:last-child,.info-warn p:last-child,.email-box p:last-child{margin-bottom:0}

.info-list{margin:0;padding-left:0;list-style:none}
.info-list li{position:relative;padding-left:20px;margin-bottom:8px;font-size:14.8px;color:var(--ink-2)}
.info-list li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:1px;background:var(--accent)}
.info-list li:last-child{margin-bottom:0}
.check-icon{color:#0E7C66;flex:none}

/* Adresse der eigenen Seite, waehrend man sie eintippt */
.slug-preview{
  margin-top:7px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;
  color:var(--ink-3);word-break:break-all;
}
.slug-preview b{color:var(--accent);font-weight:400}

/* Farbwahl im Branchen-Schritt */
.color-presets{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.color-preset-input{
  width:32px;height:32px;padding:0;border:1px solid var(--line);
  background:transparent;cursor:pointer;
}
.color-preset-input::-webkit-color-swatch-wrapper{padding:2px}
.color-preset-input::-webkit-color-swatch{border:0}

.beruf-custom-wrapper{margin-top:12px}

/* E-Mail erneut senden */
.resend-form-inline{display:flex;gap:0;flex-wrap:wrap;margin-top:12px}
.btn-resend{
  padding:11px 18px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease;
}
.btn-resend:hover{background:var(--ink);color:var(--ground)}
.btn-resend:disabled{opacity:.5;cursor:default}

/* Marktplatz-Einstieg */
.mkt-lead{margin:0 0 20px;font-size:15.4px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.mkt-foot{margin:18px 0 0;font-size:13.4px;color:var(--ink-3)}

.text-center{text-align:center}