/* /css/pages/register.css — CLEAN CONSOLIDATED */
@layer pages {

  /* ===== Page Frame ===== */
  .page-register { background: var(--surface-2); color: var(--text); min-height: 100dvh; }
  .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

  .reg-topbar{
    position: sticky; top:0; z-index: 5;
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px;
    background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
    border-bottom:1px solid var(--border);
  }
  .reg-logo img{ width: clamp(110px, 10vw, 140px); height:auto; display:block; }

  .reg-container{
    width:min(var(--container-w), 100%);
    margin-inline:auto;
  }

  /* ===== Stepper ===== */
  .reg-steps{
    display:flex; gap:16px; align-items:center;
    margin:0 0 8px 0; padding:0; list-style:none;
    justify-content:center;
  }
  .reg-steps .step{
    display:flex; align-items:center; gap:8px;
    color: var(--text-muted);
    font-weight:600; font-size:.95rem;
  }
  .reg-steps .step[aria-current="step"]{ color: var(--text); }

  .reg-steps .step .step__dot{
    inline-size:10px; block-size:10px; border-radius:999px;
    border:2px solid var(--border-strong);
    background: transparent; position: relative; flex:0 0 auto;
  }
  .reg-steps .step[aria-current="step"] .step__dot{
    border-color: #5e17cb;
    background: #5e17cb;
    box-shadow: none; /* kein dicker Halo */
  }
  .reg-steps .step[data-complete="1"] .step__dot{
    border:none; background:none; inline-size:auto; block-size:auto;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .reg-steps .step[data-complete="1"] .step__dot::before{
    content:"✓"; font-size:21px; line-height:1; font-weight:800; color:#12cd57;
  }

  /* ===== Fortschritt ===== */
  .reg-progress-wrap{
    display:flex; flex-direction:column; align-items:center;
    gap:4px; margin:25px 0 25px;
  }
  .reg-progress__count{
    order:-1; text-align:center;
    font-size:13px; font-weight:700; color: var(--text); opacity:.85;
  }
  .reg-progress{
    inline-size: min(680px, 76%);
    block-size:8px;
    background:#e5e7eb;
    border-radius:999px; overflow:hidden; margin:0 auto;
  }
  .reg-progress__bar{
    inline-size:0%; block-size:100%;
    background: linear-gradient(90deg, var(--brand-primary), #7c3aed);
    transition: inline-size .25s ease;
  }
  @media (max-width:640px){ .reg-progress{ inline-size:100%; } }

  /* ===== Card & Forms ===== */
  .reg-card{ display:flex; flex-direction:column; gap:16px; }
  .reg-card > .reg-step{ width:100%; margin:0; }
  .reg-step{ display:block; }
  .reg-step.is-hidden{ display:none; }

  /* kompakte Grids */
  .grid-2{ display:grid; gap:12px; grid-template-columns: 1fr; }
  .grid-3{ gap:5px; grid-template-columns: repeat(3, minmax(0,1fr)); }
  @media (min-width: 820px){
    .grid-2{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
  }

  .field{ display:grid; gap:6px; margin-bottom: 0px;}
  .label{ color: var(--text-muted); font-size: var(--fs-100); margin-left: 10px; margin-top: 10px; }
  .choices{ display:grid; gap:8px; grid-auto-rows: minmax(36px, auto); }
  .choice{ display:flex; align-items:center; gap:8px; padding:4px 12px; border-radius: var(--radius); cursor:pointer; }
  .choice input{ transform: translateY(1px); }

  .checkbox{ display:flex; align-items:flex-start; gap:10px; margin-top:15px; }
  .checkbox .link{ color: var(--accent-blue); text-decoration: underline; }

  /* ===== Fehlermeldungen ===== */
  .reg-msg{
    text-align:center; margin:0; padding:0; border:0;
    border-radius:12px; max-width:720px; font-weight:600;
  }
  .reg-msg:empty{ display:none; }
  .reg-msg:not(:empty){ display:block; margin:12px auto 0; padding:10px 12px; }
  .reg-msg.ok{  background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; font-size: 14px; }
  .reg-msg.err{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; font-size: 14px; }
  .reg-msg.err::before{ content:"⚠ "; font-weight:900; }

  /* ===== Footer-Buttons ===== */
  .reg-actions{
    margin-top:auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding-top:12px; border-top:1px solid var(--border);
    padding-bottom: 12px;
    padding-top: 12px;
  }

  .pac-container { z-index: 9999; }
  .form-message:empty{ display:none; }

  .input.is-ok{
    border-color: var(--color-success);
    box-shadow: 0 0 0 3px rgba(16,185,129,.15);
  }

  /* ===== Embed-Variante (Popup-iFrame oder Inline im Modal) ===== */
  .page-register--embed { background: transparent; min-height: auto; }
  .page-register--embed .reg-topbar { display: none; }
  .page-register--embed .reg-container{ padding: 12px 16px; width: 100%; }
  .page-register--embed .reg-card{ background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
  .page-register--embed .reg-h{ margin-top: 0; }

  /* === STEP 1/2 – Clean & kompakt */
  .reg-card fieldset{ border:0; padding:0; margin:0; min-inline-size:0; }
  .reg-card fieldset > legend.label{ padding:0; margin:4px 0 6px; }
}

/* ===== Modal / Container Queries ===== */
.modal-card{ container-type: inline-size; }

/* grid-2 im Modal responsiv */
@container (min-width: 681px){
  .modal-card .grid-2{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@container (max-width: 680px){
  .modal-card .grid-2{ grid-template-columns: 1fr; }
}
/* Geburtstag flüssig umbrechen */
@container (max-width: 560px){
  .modal-card .grid-3{ grid-template-columns: 1fr; }
}
@container (max-width: 420px){
  .modal-card .grid-3{ grid-template-columns: 1fr; }
}

/* Modal = Karte (keine zweite Karte im Modal) */
.modal-card .reg-card{ max-width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* ===== Icon-Auswahl (kompakt, ohne Rahmen) ===== */
.choices--icons{ margin-top:6px; }
.choice--icon{ position:relative; display:block; }
.choice--icon > input{
  position:absolute; inset:0; opacity:0; pointer-events:none; /* bleibt per Label fokussierbar */
}
.choice--icon .card{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:10px; min-height:82px;
  border:0; border-radius:12px; background:#fff;
  transition: background .15s, transform .05s;
  border: 1px solid var(--border);
}
.choice--icon .icon{ line-height:0; width:44px; height:44px; color:var(--icon-muted, #9aa3b2); }
.choice--icon .choice__label{ font-weight:600; font-size:.92rem; }

/* Hover dezent, ohne Schatten */
.choice--icon:hover .card{ background:#faf9fb; }
.choice--icon:active .card{ transform:translateY(1px); }

/* Checked: zarte Flächenfärbung + Icon-Farbe (Farbe per --sel-color s.u.) */
.choice--icon input:checked + .card{
  background: color-mix(in srgb, var(--sel-color, var(--brand-primary, #d4006d)) 14%, #fff) !important;
}
.choice--icon input:checked + .card .icon{
  color: var(--sel-color, var(--brand-primary, #d4006d)) !important;
}

/* Fokus (global deaktiviert, siehe unten) — hier explizit nichts setzen */

/* Mobile kompakter */
@media (max-width:520px){
  .choices--icons{ gap:0; }
  .choice--icon .card{ padding:10px; min-height:74px; }
  .choice--icon .icon{ width:40px; height:40px; }
  .reg-progress{ block-size:7px; }
}

/* ===== Step 6 – Layout ===== */
#step6 .actions-row{
  display:flex; gap:.5rem; flex-wrap:wrap;
}
#step6 .actions-row .btn, #step6 .actions-row a.btn{
  flex:1 1 180px;
}
#step6 .muted{ line-height:1.5; }
@media (max-width: 520px){
  #wizardRoot .reg-card{ padding-inline: 16px; }
  #step6 .actions-row{ flex-direction: column; }
  #step6 .actions-row .btn, #step6 .actions-row a.btn{ width: 100%; }
  #step6 .sep{ display:none; }
  #step6 h2{ font-size: 1.05rem; }
}

/* ===== Close-X (rechts, im Flow) ===== */
#wizardRoot{ position: relative; display:flex; flex-direction:column; -webkit-tap-highlight-color: transparent; }
#wizardRoot > .wizard-close{
  position: static; align-self: flex-end;
  margin: 6px 6px 4px auto;
  inline-size:36px; block-size:36px;
  display:grid; place-items:center;
  border:0; border-radius:999px;
  background: rgba(0,0,0,.04); color: var(--text);
  cursor: pointer; transition: background .15s ease, transform .05s ease;
}
#wizardRoot > .wizard-close:hover{ background: rgba(0,0,0,.08); }
#wizardRoot > .wizard-close:active{ transform: translateY(1px); }


/* ===== Fokus generell entfernen (gewünscht) ===== */
#wizardRoot *:focus,
#wizardRoot *:focus-visible{ outline:none !important; box-shadow:none !important; }
#wizardRoot .choice--icon input:focus + .card,
#wizardRoot .choice--icon input:focus-visible + .card{ outline:none !important; box-shadow:none !important; }
#wizardRoot .wizard-close:focus,
#wizardRoot .wizard-close:focus-visible{ outline:none !important; box-shadow:none !important; }
#wizardRoot button::-moz-focus-inner{ border:0; }
#wizardRoot *:-moz-focusring{ outline:none !important; }

/* ===== Farbtokens & Mapping für Step 1/2 ===== */
#wizardRoot{
  --gender-male:   var(--accent-blue, #2563eb);
  --gender-female: var(--brand-primary, #d4006d);
  --gender-diverse:#f59e0b;
}
/* Mapping: setzt --sel-color je nach Auswahlwert */
#step1 .choice--icon:has(input[value="male"]:checked),
#step2 .choice--icon:has(input[value="male"]:checked){ --sel-color: var(--gender-male); }
#step1 .choice--icon:has(input[value="female"]:checked),
#step2 .choice--icon:has(input[value="female"]:checked){ --sel-color: var(--gender-female); }
#step1 .choice--icon:has(input[value="diverse"]:checked),
#step2 .choice--icon:has(input[value="diverse"]:checked){ --sel-color: var(--gender-diverse); }

/* Hilfstexte */
.form-message { font-size:14px; color: var(--text-muted); text-align:center; margin-top: 10px; }

/* Utilities */
.change-group[hidden]{ display:none; }
.btn--ghost{ background:transparent; border: 1px solid rgb(0 0 0 / 25%); }
[hidden]{ display:none !important; }

/* Stepper <= 1250px ausblenden (du hattest 1040px) */
@media (max-width: 1250px){
  #wizardRoot .reg-steps{ display: none !important; }
  #wizardRoot .reg-progress-wrap{ margin-top: 4px; }
}

/* Headline & Einleitung mittig in Step 7 */
#step7 .reg-h{ text-align:center; margin-bottom: 6px; }
#step7 .muted{ text-align:center; }

/* Gleiche Typo/Optik für a.btn wie für button.btn (nur innerhalb von Step 7) */
#step7 .btn,
#step7 a.btn{
  font-family: inherit;
  font-weight: 600 !important;
  text-decoration: none;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-size: 14px;
}

#step7 .reg-h.reg-h--xl{
  text-align: center;
  font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  margin: 0 0 2px;
}

#step7 .reg-subtitle{
  text-align: center;
  font-weight: 600;
  font-size: clamp(1rem, .95rem + .4vw, 1.125rem);
  color: var(--text);
  opacity: .9;
  margin: 0 0 15px;
}

/* Step 6: AGB-Checkbox größer + sauber ausgerichtet */
#step6 .checkbox{
  display: inline-flex;
  align-items: center;     /* vertikal zur Textzeile zentrieren */
  gap: 10px;               /* Abstand Kasten ↔ Text */
  line-height: 1.25;
  margin-left: 5px;
}

#step6 .checkbox input[type="checkbox"]{
  width: 18px;             /* Kasten-Größe */
  height: 18px;
  margin: 0;               /* kein Versatz mehr */
  accent-color: #5e17cb; /* Markenfarbe (moderne Browser) */
}

/* Fallback für Browser, die width/height ignorieren (alte WebKit) */
@supports not (accent-color: auto) {
  #step6 .checkbox input[type="checkbox"]{
    transform: scale(1.25);
    transform-origin: left center;
  }
}


/* Reihe 1: zwei Spalten (Resend + Login), mittig und gleich breit */
#successActions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 820px;
  margin: 50px auto 0;    /* zentriert */
  align-items: stretch;
}

/* Reihe 2: zwei Spalten (links/ rechts) */
#successActionsBottom{
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 10px auto 0;    /* zentriert */
  align-items: stretch;
}

/* Kopfzeile oben komplett lila, Inhalt mittig, X rechts */
#wizardRoot .reg-header{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: .75rem 1rem;
    background: #5e17cb;
    color: #fff;
    border-radius: 12px 12px 0 0;
    margin-bottom: 30px;
}

/* Texttitel in der Mitte */
#wizardRoot .reg-title{
    grid-column: 2;
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

/* X-Button rechts, weiß */
#wizardRoot .reg-header .wizard-close{
  grid-column: 3;
  justify-self: end;
  position: static !important;              /* evtl. alte absolute Pos. neutralisieren */
  inset: auto !important;
  transform: none !important;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: #fff;                              /* Icon wird weiß (currentColor) */
  border-radius: 999px;
  cursor: pointer;
}
#wizardRoot .reg-header .wizard-close:hover{
  background: rgba(255,255,255,.12);        /* dezenter Hover */
}

.reg-h {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.pw-eye-wrap{position:relative;display:block}
.pw-eye-wrap>input[type="password"],.pw-eye-wrap>input[type="text"]{width:100%}
.pw-eye-btn{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  inline-size:28px;block-size:28px;display:inline-grid;place-items:center;
  border:0;background:transparent;cursor:pointer;color:#6b7280
}
.pw-eye-btn:is(:hover,:focus-visible){color:#4f46e5}
.pw-eye-btn .eye-open{display:block}.pw-eye-btn .eye-closed{display:none}
.pw-eye-btn.is-on .eye-open{display:none}.pw-eye-btn.is-on .eye-closed{display:block}
.pw-eye-btn svg{width:20px;height:20px}

/* kleiner Abstand zur Step-Navigation darunter */
#wizardRoot .reg-steps{ margin-top: .25rem; }

#successEmail {
  color: #000;
}

.actions-row {
  margin-top: 20px;
}

/* Mobil: Buttons untereinander, volle Breite */
@media (max-width: 680px){
  #successActions,
  #successActionsBottom{
    grid-template-columns: 1fr;
  }
}