/* Aus register.html ausgelagert (CSP: keine Inline-<style>-Elemente). */
    .form-section { margin-bottom: 1.5rem; }
    .form-section h3 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .form-row-3-1 { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; }
    .form-row-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
    .checkbox-group { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; }
    .checkbox-group input[type="checkbox"] { margin-top: 0.3rem; accent-color: var(--accent); }
    .checkbox-group label { font-size: 0.9rem; color: var(--text-secondary); cursor: pointer; }
    @media (max-width: 540px) {
      .form-row, .form-row-3-1, .form-row-1-2 { grid-template-columns: 1fr; }
    }

    /* ── Registrierungs-Assistent ──────────────────────────────────────── */

    /* Header: Icon + Titel zentriert */
    .reg-header { text-align:center; margin-bottom:1.75rem; }
    .reg-icon {
      width:56px; height:56px; border-radius:50%; background:var(--accent-dim);
      border:1px solid rgba(0,212,255,.3); color:var(--accent);
      display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem;
    }
    .reg-icon svg { width:26px; height:26px; }
    .reg-header h1 { font-size:1.7rem; letter-spacing:-0.015em; margin-bottom:.3rem; }
    .reg-header p { font-size:.9rem; color:var(--text-muted); }

    /* Fortschrittsanzeige: Kreis + Label + Verbindungslinie */
    .wizard-steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* Start + 4 Schritte */
      gap: 0;
      margin-bottom: 2rem;
      position: relative;
    }
    .wizard-dot {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.4rem;
      position: relative;
    }
    /* Verbindungslinie zwischen den Kreisen: startet/endet an der Kreisaussenkante */
    .wizard-dot:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 21px;                      /* Mitte von 42px-Kreis */
      left: calc(50% + 23px);         /* beginnt rechts aussen am Kreis */
      width: calc(100% - 46px);       /* endet links aussen am naechsten Kreis */
      height: 2px;
      background: var(--border);
      transition: background-color 280ms ease;
      z-index: 0;
    }
    .wizard-dot.done:not(:last-child)::after { background: var(--success); }
    .wizard-dot.active:not(:last-child)::after { background: linear-gradient(to right, var(--accent), var(--border)); }

    .wizard-dot-circle {
      width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
      background: var(--bg-card);     /* solide Farbe, damit kein Liniendurchscheinen */
      border: 2px solid var(--border); color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
      position: relative; z-index: 1;
    }
    .wizard-dot-circle svg { width: 18px; height: 18px; }
    .wizard-dot.done .wizard-dot-circle {
      background: var(--success); border-color: var(--success); color: var(--bg-primary);
      box-shadow: 0 0 0 5px rgba(0,230,118,.15);
    }
    .wizard-dot.active .wizard-dot-circle {
      /* Solide Basisfarbe + Akzent-Overlay damit keine Linie hindurchscheint */
      background: var(--bg-card);
      border-color: var(--accent); color: var(--accent);
      box-shadow: 0 0 0 5px var(--accent-dim), inset 0 0 0 99px var(--accent-dim);
    }
    .wizard-dot-label {
      font-size: .72rem; font-weight: 500; color: var(--text-muted); text-align: center;
      transition: color 220ms ease; white-space: nowrap; line-height: 1.2;
    }
    .wizard-dot.active .wizard-dot-label { color: var(--accent); font-weight: 600; }
    .wizard-dot.done .wizard-dot-label { color: var(--success); }

    /* Schritt-Inhalte */
    .wizard-step { display: none; }
    .wizard-step.active { display: block; animation: heroRise 280ms var(--ease-out); }
    .wizard-step-header { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem; }
    .wizard-step-num {
      width:22px; height:22px; border-radius:50%; background:var(--accent-dim);
      border:1px solid var(--accent); color:var(--accent); font-size:.75rem; font-weight:700;
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
    }
    .wizard-step-header h3 { font-size:1.05rem; margin:0; }
    .wizard-optional-hint { font-size:.8rem; color:var(--text-muted); margin:.25rem 0 1.1rem; }
    .wizard-nav { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-top:1.5rem; }
    .wizard-nav-spacer { flex:1; }
    .wizard-dot-line { display: none; } /* Linie jetzt per ::after */