/* ===========================================================================
   fs-register.css — Sitzung REGISTRIERUNG (21.08.2026)
   Flaeche: /Registrieren (JTL register/index.tpl + register/form.tpl).
   NICHT der Checkout: der rendert dasselbe Formular ueber
   checkout/step0_login_or_register.tpl und wird von fs-checkout.css bedient.
   Deshalb ist JEDE Regel hier auf #panel-register-form oder
   #content .register-form gescopt — niemals global.

   Werte aus fs-kanon.css (mit GUSS abgestimmt, 2.427.0):
     --fs-feld-h        44px   Feldhoehe, gleiche Sprosse wie --fs-knopf-m
     --fs-knopf-l       52px   herausgehobener CTA
     --fs-feld-fs-mobil 16px   technische Untergrenze: darunter zoomt iOS
                               Safari beim Fokus in die Seite hinein
   Muster aus fs-checkout.css uebernommen (statische Label statt schwebender
   Theme-Label, Magenta-Fokusrand), damit der Weg registrieren -> kaufen
   aus einem Guss ist. Kein eigener dritter Weg.
   =========================================================================== */

:root{
  --fsr-text:#111114;
  --fsr-grau:#6b6b70;
  --fsr-rand:#d9d9de;
  --fsr-linie:#e4e4e7;
  --fsr-sand:#f6f5f3;
  --fsr-cta:#c90f88;
  --fsr-cta-dkl:#830779;
  --fsr-fokus:#e5169f;
}

/* ---------------------------------------------------------------------------
   1 — KUNDENGRUPPE: Kontextzeile statt Kachelwald
   Ohne Parameter zeigt das Plugin (ws5_b2b) hier gar nichts mehr — die
   Kachelleiste ist seit 21.08. per Backend-Schalter aus. Mit
   ?Kundengruppe=N rendert es "Ausgewaehlte Kundengruppe" + EINE Kachel.
   --------------------------------------------------------------------------- */

/* Privatkunde (Gruppe 1) braucht keine Kundengruppen-Anzeige — der Normalfall
   soll nicht erklaert werden muessen. Nur Gewerbegruppen zeigen den Kontext. */
/* ACHTUNG: Diese Regel hiess frueher :has([data-kundengruppe="1"]) — sie traf
   damit IMMER, sobald die Privatkunden-Kachel im DOM lag (auch wenn sie per CSS
   verborgen ist). Der ganze Auswahlblock verschwand dadurch im Gewerbemodus.
   Entscheidend ist, ob die Privatkunden-Kachel die AKTIVE ist. */
#panel-register-form:has(.ws5_auswahlbutton[data-kundengruppe="1"].active) .ws5_wahlheader{
  display:none;
}

#panel-register-form .ws5_wahlheader{
  border:0; margin:0 0 1.25rem; padding:0;
}

#panel-register-form #ws5_kundengruppenauswahl h3{
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fsr-grau); margin:0 0 .5rem;
}

/* Die gewaehlte Gruppe: schwarze, kantige Marke statt Bootstrap-Pille.
   BEWUSSTE ABWEICHUNG vom CTA-Magenta des Kanons: Das hier ist kein
   Knopf, sondern eine Zustandsanzeige — sie darf nicht wie die
   Hauptaktion der Seite aussehen. Magenta bleibt dem Absendeknopf. */
#panel-register-form .ws5_auswahlbutton{
  display:inline-block;
  border-radius:0 !important;
  background:var(--fsr-text) !important;
  border:1px solid var(--fsr-text) !important;
  color:#fff !important;
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.55rem 1rem; min-height:36px; line-height:1.5;
}

/* Fokusring: im Critical-CSS steht global :focus{outline:none}. Die Kachel
   ist ein Link und hatte deshalb gar keinen sichtbaren Fokus (Messung GUSS
   21.08.). Hier die Gegenregel — Tastaturbedienung muss sichtbar bleiben. */
#panel-register-form .ws5_auswahlbutton:focus,
#panel-register-form .ws5_auswahlbutton:focus-visible{
  outline:2px solid var(--fsr-fokus) !important;
  outline-offset:2px;
}

/* ---------------------------------------------------------------------------
   2 — HINWEISE (Freischaltung noetig / Gewerbeschein hochladen)
   Theme liefert hellblaue Bootstrap-Alerts. Hausstil: Sandton + Magenta-Kante.
   --------------------------------------------------------------------------- */
#panel-register-form > div > p.alert,
#panel-register-form .alert-info{
  background:var(--fsr-sand) !important;
  border:0 !important;
  border-left:3px solid var(--fsr-cta) !important;
  border-radius:0 !important;
  color:var(--fsr-text) !important;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:14px; line-height:1.5;
  padding:.85rem 1rem;
  margin-bottom:.75rem;
}

/* ---------------------------------------------------------------------------
   3 — ABSCHNITTSKOEPFE ("Name", "Rechnungsadresse", "Kontaktdaten", ...)
   Das Theme setzt sie als div.h3 — kein echtes Heading, aber sie tragen die
   Gliederung. Ruhig, gesperrt, mit Trennlinie.
   --------------------------------------------------------------------------- */
#content .register-form .h3{
  /* Anton (FS Display) wie alle Ueberschriften im Shop, Gewicht 400 laut Kanon.
     Anton laeuft eng und kraeftig — deshalb etwas groesser als die alte
     DM-Sans-Fassung und mit weniger Sperrung, sonst franst die Zeile aus. */
  font-family:"FS Display","FS Text",sans-serif;
  font-size:18px;
  font-weight:400;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.15;
  color:var(--fsr-text);
  border-bottom:1px solid var(--fsr-linie);
  padding-bottom:.55rem;
  /* Abstand oben deutlich groesser als unten: Der Kopf gehoert zu dem, was
     unter ihm steht. Vorher stand hier eine :first-child-Ausnahme mit
     margin-top:0 — die griff bei ALLEN Koepfen, weil jeder in einer eigenen
     Spalte sitzt und dort erstes Kind ist. Genau deshalb klebte
     "Kontaktdaten" am Hinweiskasten darueber. */
  margin:2rem 0 .9rem;
}

/* Keine Ausnahme fuer den ersten Kopf: Sie traf ueber :first-of-type den
   falschen (den Passwort-Block, der in einer eigenen Row sitzt), waehrend
   "Name" und "Deine Adresse" sich eine Row teilen. Ein gleichmaessiger Abstand
   ueber allen Koepfen ist ohnehin ruhiger. */

/* ---------------------------------------------------------------------------
   4 — FELDER
   Hoehe/Schrift aus dem Kanon. 16px mobil ist Pflicht, nicht Geschmack.
   --------------------------------------------------------------------------- */
#content .register-form .form-control,
#content .register-form .custom-select{
  height:var(--fs-feld-h,44px);
  min-height:var(--fs-feld-h,44px);
  font-family:"FS Body","FS Text",sans-serif;
  /* 22.08.: 16px auf BEIDEN Breiten. Die Schriftleiter in fs-kanon.css kennt
     14 und 16, kein 15 — und 16 ist mobil ohnehin Pflicht (iOS-Zoom). Eine
     Groesse fuer alle Breiten statt zweier, die sich um einen Punkt
     unterscheiden. */
  font-size:var(--fs-t-m,16px);
  border:1px solid var(--fsr-rand);
  border-radius:0;
  background:#fff;
  color:var(--fsr-text);
  box-shadow:none;
  padding:.5rem .875rem;
}

/* Fokus: Magenta-Rand wie im Checkout, dazu ein sichtbarer Ring fuer die
   Tastatur (der Rand allein ist als einziges Signal zu leise). */
#content .register-form .form-control:focus,
#content .register-form .custom-select:focus{
  border-color:var(--fsr-fokus);
  box-shadow:none;
  outline:2px solid var(--fsr-fokus);
  outline-offset:1px;
}

/* Labels statisch — dasselbe Muster wie #checkout. Das Theme laesst sie
   schweben (label-slide); der Wrapper .flex-column-reverse sorgt dafuer,
   dass sie oben stehen, sobald sie aus dem Feld genommen werden. */
#content .register-form .col-form-label{
  position:static !important;
  transform:none !important;
  height:auto;
  padding:0 !important;
  margin:0 0 6px;
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fsr-text);
  opacity:1;
  background:transparent;
  line-height:1.3;
  transition:none;
}
#content .register-form .col-form-label .optional,
#content .register-form .col-form-label small{
  color:var(--fsr-grau); font-weight:400; letter-spacing:.02em; text-transform:none;
}

/* Abstand zwischen den Feldern etwas ruhiger */
#content .register-form .form-group{ margin-bottom:1rem; }

/* Datumsfeld: das native Kalender-Icon nicht auf dem Rand kleben lassen */
#content .register-form input[type="date"]{ padding-right:.5rem; }

/* ---------------------------------------------------------------------------
   5 — PASSWORT: die Regel steht am Feld, nicht in der Fehlermeldung
   Shop-Einstellung kundenregistrierung_passwortlaenge = 8.
   --------------------------------------------------------------------------- */
#content .register-form .register-form-account-password::after{
  content:"Mindestens 8 Zeichen.";
  display:block;
  margin-top:6px;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:12px;
  color:var(--fsr-grau);
}

/* ---------------------------------------------------------------------------
   6 — GEWERBESCHEIN-UPLOAD (nur im B2B-Fall im DOM)
   --------------------------------------------------------------------------- */
#content .register-form input#ws5_fileupload{
  height:auto;
  min-height:var(--fs-feld-h,44px);
  padding:.6rem .875rem;
  border:1px dashed var(--fsr-rand);
  background:var(--fsr-sand);
}
#content .register-form #ws5_fileupload:focus{
  border-color:var(--fsr-fokus);
  outline:2px solid var(--fsr-fokus);
  outline-offset:1px;
}

/* ---------------------------------------------------------------------------
   7 — NEWSLETTER-HAEKCHEN: groesseres Ziel, ruhiger Text
   --------------------------------------------------------------------------- */
#content .register-form .snippets-checkbox-wrapper{ margin:1.25rem 0 .5rem; }
#content .register-form .custom-control-label{
  font-family:"FS Body","FS Text",sans-serif;
  font-size:14px; color:var(--fsr-text); line-height:1.5;
  padding-left:.35rem; min-height:24px; padding-top:2px;
}
#content .register-form .custom-control-input:focus ~ .custom-control-label::before{
  outline:2px solid var(--fsr-fokus);
  outline-offset:2px;
  box-shadow:none;
}
#content .register-form .custom-control-input:checked ~ .custom-control-label::before{
  background:var(--fsr-cta);
  border-color:var(--fsr-cta);
}
#content .register-form .custom-control-label::before{ border-radius:0; }

/* ---------------------------------------------------------------------------
   8 — DATENSCHUTZ-ZEILE + ABSENDEKNOPF
   Der Knopf ist die Hauptaktion der Seite: CTA-Magenta, 52er-Sprosse.
   --------------------------------------------------------------------------- */
#content .register-form .checkout-register-form-buttons-privacy{
  font-family:"FS Body","FS Text",sans-serif;
  font-size:13px;
  color:var(--fsr-grau);
  padding-top:.35rem;
}
#content .register-form .checkout-register-form-buttons-privacy a{
  color:var(--fsr-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
#content .register-form .checkout-register-form-buttons-privacy a:hover{ color:var(--fsr-cta); }
#content .register-form .checkout-register-form-buttons-privacy a:focus-visible{
  outline:2px solid var(--fsr-fokus); outline-offset:2px;
}

#content .register-form button[type="submit"].btn-primary{
  min-height:var(--fs-knopf-l,52px);
  border-radius:0;
  background:var(--fsr-cta);
  border:1px solid var(--fsr-cta);
  color:#fff;
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;
  font-size:var(--fs-knopf-fs-l,15px);
  letter-spacing:.06em;
  text-transform:uppercase;
}
#content .register-form button[type="submit"].btn-primary:hover,
#content .register-form button[type="submit"].btn-primary:focus{
  background:var(--fsr-cta-dkl);
  border-color:var(--fsr-cta-dkl);
  color:#fff;
}
#content .register-form button[type="submit"].btn-primary:focus-visible{
  outline:2px solid var(--fsr-text);
  outline-offset:2px;
}

/* Die Trennlinie ueber dem Absendebereich */
#content .register-form hr{
  border:0; border-top:1px solid var(--fsr-linie); margin:1.5rem 0 1.25rem;
}

/* ---------------------------------------------------------------------------
   9 — B2B-TEXTBLOCK NUR IM B2B-FALL
   Unter dem Formular haengt ein OPC-Block ueber Grosshandelskonditionen
   ("B2B Kunde bei Fogsmoke werden", Ablauf-Akkordeon, Vitrinen). Fuer den
   Privatkunden sind das zwei Bildschirmlaengen Fremdtext direkt hinter dem
   Absendeknopf — derselbe Inhalt steht vollstaendig auf /vapes-grosshandel_1.
   Sichtbar bleibt er nur, wenn eine GEWERBEgruppe gewaehlt ist.
   ACHTUNG: Die Regel blendet ALLE Geschwister nach dem Formular aus. Wer hier
   spaeter etwas einpflegt, das immer sichtbar sein soll, muss sie anpassen.
   --------------------------------------------------------------------------- */
#panel-register-form:not(:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"]))) form.register-form ~ *{
  display:none;
}

/* ---------------------------------------------------------------------------
   10 — STOERER auf der Formularseite
   Das Rubbellos-Fenster (fs-rubbellos, fremdes Revier) geht beim Scrollen
   mitten im Ausfuellen auf und legt sich ueber die Felder. Auf einer Seite,
   auf der getippt wird, ist jede Unterbrechung Abbruchgrund. Nur hier aus.
   --------------------------------------------------------------------------- */
body:has(#panel-register-form) .fogrl-overlay{ display:none !important; }

/* ---------------------------------------------------------------------------
   11 — MOBIL
   --------------------------------------------------------------------------- */
@media (max-width:767.98px){
  /* 16px ist die Untergrenze: darunter zoomt iOS Safari beim Antippen in die
     Seite hinein — bei zwoelf Pflichtfeldern zwoelfmal. */
  #content .register-form .form-control,
  #content .register-form .custom-select{
    font-size:var(--fs-feld-fs-mobil,16px);
  }
  #content .register-form .h3{ font-size:16px; margin:1.6rem 0 .8rem; }
  #content .register-form button[type="submit"].btn-primary{ width:100%; }

  /* Das Trusted-Shops-Siegel liegt mobil ueber den Eingabefeldern.
     Auf der Formularseite muss die Tippflaeche frei bleiben. */
  body:has(#panel-register-form) #trustbadge-container-98e3dadd90eb493088abdc5597a70810,
  body:has(#panel-register-form) [id^="trustbadge-container"],
  body:has(#panel-register-form) .trustbadge{ display:none !important; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
  #content .register-form .form-control{ transition:none; }
}

/* ---------------------------------------------------------------------------
   12 — RASTER (22.08. neu gefasst)
   Ausgangslage: Die Aufteilung kippte von Zeile zu Zeile, einzelne Felder
   standen allein in halber Breite, und MOBIL lief die Reihenfolge falsch —
   das Land stand zwischen Adresszusatz und PLZ, weil die order-Regeln nur ab
   768px galten. Beides hier zusammen geregelt: die Reihenfolge gilt auf allen
   Breiten, die Spaltenbreiten nur am Desktop.

   Zielbild Desktop (Inhaltsbreite 763px):
       Anrede 20 | Vorname 40 | Nachname 40
       Firma 100
       Strasse 66 | Hausnummer 34
       Adresszusatz 100
       PLZ 34 | Ort 66
       Land 100
       E-Mail 100
       Telefon 50 | Geburtsdatum 50
       Passwort 50 | Wiederholung 50
   --------------------------------------------------------------------------- */

/* Das Theme streut zwischen die Spalten leere Umbruch-Helfer (.w-100-util,
   Breite 100 %). Sie erzwingen genau die Zeilenumbrueche, die wir hier selbst
   setzen — deshalb ausblenden. Die Umbrueche entstehen jetzt aus den Breiten:
   jede Zeile summiert sich auf 100 %. */
#content .register-form .form-row > .w-100-util{ display:none; }

/* Reihenfolge — auf ALLEN Breiten, damit die Adresse mobil in der Reihenfolge
   steht, in der man sie schreibt. */
#content .register-form .form-row > [class*="col"]:has(input[name="strasse"]){ order:1; }
#content .register-form .form-row > [class*="col"]:has(input[name="hausnummer"]){ order:2; }
#content .register-form .form-row > [class*="col"]:has(input[name="adresszusatz"]){ order:3; }
#content .register-form .form-row > [class*="col"]:has(input[name="plz"]){ order:4; }
#content .register-form .form-row > [class*="col"]:has(input[name="ort"]){ order:5; }
#content .register-form .form-row > [class*="col"]:has(select[name="land"]){ order:6; }
#content .register-form .form-row > [class*="col"]:has(input[name="ustid"]){ order:7; }

#content .register-form .form-row > [class*="col"]:has(input[name="email"]){ order:1; }
#content .register-form .form-row > [class*="col"]:has(input[name="tel"]){ order:2; }
#content .register-form .form-row > [class*="col"]:has(input[name="geburtstag"]){ order:3; }

@media (min-width:768px){
  #content .register-form .form-row > [class*="col-"]{ flex:0 0 auto; }

  /* Name: drei Felder, eine Zeile */
  #content .register-form .form-row > [class*="col-"]:has(select[name="anrede"]){
    flex:0 0 20%; max-width:20%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="vorname"]),
  #content .register-form .form-row > [class*="col-"]:has(input[name="nachname"]){
    flex:0 0 40%; max-width:40%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="firma"]){
    flex:0 0 100%; max-width:100%;
  }

  /* Adresse */
  #content .register-form .form-row > [class*="col-"]:has(input[name="strasse"]){
    flex:0 0 66.6666%; max-width:66.6666%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="hausnummer"]){
    flex:0 0 33.3333%; max-width:33.3333%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="adresszusatz"]){
    flex:0 0 100%; max-width:100%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="plz"]){
    flex:0 0 33.3333%; max-width:33.3333%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="ort"]){
    flex:0 0 66.6666%; max-width:66.6666%;
  }
  #content .register-form .form-row > [class*="col-"]:has(select[name="land"]){
    flex:0 0 50%; max-width:50%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="ustid"]){
    flex:0 0 50%; max-width:50%;
  }

  /* Kontaktdaten: die E-Mail ist das wichtigste Feld des Formulars und
     bekommt die ganze Zeile — lange Adressen sollen nicht abgeschnitten
     wirken. Telefon und Geburtsdatum teilen sich die naechste. */
  #content .register-form .form-row > [class*="col-"]:has(input[name="email"]){
    flex:0 0 100%; max-width:100%;
  }
  #content .register-form .form-row > [class*="col-"]:has(input[name="tel"]),
  #content .register-form .form-row > [class*="col-"]:has(input[name="geburtstag"]){
    flex:0 0 50%; max-width:50%;
  }
}

/* ---------------------------------------------------------------------------
   13 — DREI AUSREISSER, DIE ERST DURCH DIE STATISCHEN LABEL SICHTBAR WURDEN
   --------------------------------------------------------------------------- */

/* (a) Passwortfeld: Das Theme baut diese Gruppe anders als alle anderen —
   .d-flex.flex-column mit Input, Label und Staerkeanzeige als Geschwister
   (alle anderen Felder haben einen inneren .flex-column-reverse-Wrapper).
   Mit schwebendem Label faellt das nicht auf; mit statischem Label landet
   das Label UNTER dem Feld. Reihenfolge deshalb explizit setzen. */
#content .register-form .register-form-account-password{ flex-direction:column; }
#content .register-form .register-form-account-password > label.col-form-label{ order:1; }
#content .register-form .register-form-account-password > input.form-control{ order:2; }
#content .register-form .register-form-account-password > .pass-wrapper{ order:3; margin-top:8px; }
#content .register-form .register-form-account-password::after{ order:4; }

/* Passwort-Staerkeanzeige (erscheint erst beim Tippen): kantig, Hausfarben */
#content .register-form .pass-graybar{
  height:4px; border-radius:0; background:var(--fsr-linie);
}
#content .register-form .pass-colorbar{ height:4px; border-radius:0; }
#content .register-form .pass-text{
  display:inline-block; margin-top:4px;
  font-family:"FS Body","FS Text",sans-serif; font-size:12px; color:var(--fsr-grau);
}

/* (b) Das Ort-Feld hat als einziges KEIN Label — es traegt nur den Platzhalter
   "Ort", weil dort die PLZ/Ort-Vervollstaendigung (typeahead) haengt. Folge:
   die Zeile stand 14px versetzt zur PLZ daneben, und Screenreader lasen nur
   den Platzhalter. Ein echtes <label> braeuchte einen Template-Eingriff in
   customer_account.tpl — und das rendert auch im Checkout. Deshalb hier ein
   sichtbares Label aus CSS; der Versatz ist damit weg. */
#content .register-form .form-group:has(input[name="ort"])::before{
  content:"Ort";
  display:block;
  /* Exakt dieselben Masse wie ein echtes .col-form-label — feste Pixelhoehen
     ergaben 6px Versatz zur PLZ daneben, weil die Zeilenhoehe des echten
     Labels aus font-size x 1.3 entsteht. */
  line-height:1.3;
  margin:0 0 6px;
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fsr-text);
}
#content .register-form .form-group:has(input[name="ort"]) input::placeholder{ color:transparent; }

/* Das Ort-Feld bringt ein LEERES <label> mit (Hoehe 0, aber 6px Aussenabstand).
   Zusammen mit dem CSS-Label oben ergab das genau die 6px Versatz zur PLZ. */
#content .register-form .form-group:has(input[name="ort"]) label.col-form-label{
  display:none;
}

/* (c) Sicherheitsnetz: Felder einer Zeile oben buendig, auch wenn ein
   Nachbarfeld spaeter mehr Text unter sich bekommt (Fehlermeldung, Hinweis). */
#content .register-form .form-row{ align-items:flex-start; }

/* ---------------------------------------------------------------------------
   14 — ZWEI KONTEXTE, EIN FORMULAR
   Das Formular bedient Privatkunden und Gewerbe. Welcher Fall vorliegt, steht
   nicht im Template zur Verfuegung (die Kundengruppe haengt in einer Session
   des verschluesselten Plugins), wohl aber im DOM: bei gewaehlter Gewerbe-
   gruppe rendert ws5_b2b eine Kachel .ws5_auswahlbutton[data-kundengruppe].
   Darauf schalten wir. Beide Textvarianten liegen im Markup (register/form.tpl,
   register/index.tpl), sichtbar ist immer genau eine.
   ACHTUNG (28.08.): Massgeblich ist die AKTIVE Kachel, nicht die Existenz —
   nach "Als Privatkunde registrieren" (?Kundengruppe=1) stehen die Gewerbe-
   kacheln weiter im DOM, aktiv ist aber Gruppe 1. Ohne .active blieb die
   Seite dann faelschlich in Haendler-Optik (Fund Yunus, mobil).
   --------------------------------------------------------------------------- */

/* Merker: "kein Gewerbe gewaehlt" = keine Kachel oder nur die Privatkunden-Kachel */
#panel-register-form .fsreg-label-b2b{ display:none; }
#panel-register-form .fsreg-label-b2c{ display:inline; }
#panel-register-form .fsreg-erwartung{ display:none; }

#panel-register-form:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"])) .fsreg-label-b2b{ display:inline; }
#panel-register-form:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"])) .fsreg-label-b2c{ display:none; }
#panel-register-form:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"])) .fsreg-erwartung{ display:block; }

/* Der Nutzen-Block spricht Privatkunden an. Der Haendler hat seine Argumente
   auf /vapes-grosshandel_1 gelesen und will hier nur noch das Formular. */
#new_customer:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"])) .fsreg-intro{ display:none; }

/* Erwartungssatz vor dem Absendeknopf */
#content .register-form .fsreg-erwartung{
  background:var(--fsr-sand);
  border-left:3px solid var(--fsr-cta);
  padding:.75rem 1rem;
  margin:0 0 1rem;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:13px; line-height:1.5; color:var(--fsr-text);
}

/* ---------------------------------------------------------------------------
   15 — NUTZEN-BLOCK UND AUSGANG FUER BESTANDSKUNDEN (register/index.tpl)
   Bisher stand auf der Seite kein Wort dazu, WARUM man ein Konto anlegt —
   die drei Vorteile standen nur im Konto-Offcanvas des Headers. Und wer
   laengst Kunde ist, fand keinen Weg zur Anmeldung und lief in
   "E-Mail existiert bereits".
   --------------------------------------------------------------------------- */
/* Der Kopf des naechsten Abschnitts bringt selbst 30px Abstand mit —
   hier reicht deshalb weniger, sonst klafft eine Luecke von ueber 70px. */
.fsreg-intro{ margin:0 0 .5rem; }

.fsreg-intro .fsreg-lead{
  font-family:"FS Body","FS Text",sans-serif;
  font-size:15px; line-height:1.55; color:var(--fsr-text);
  margin:0 0 .85rem;
}

.fsreg-intro .fsreg-benefits{
  list-style:none; margin:0 0 .85rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
}
.fsreg-intro .fsreg-benefits li{
  position:relative; padding-left:1.35rem;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:13px; color:#332d33; line-height:1.5;
}
/* Blocksatz-Haken wie im Konto-Offcanvas: schwarzes Quadrat, Haken in Magenta */
.fsreg-intro .fsreg-benefits li::before{
  content:""; position:absolute; left:0; top:.28em;
  width:12px; height:12px; background:var(--fsr-cta);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Zwei Wege nebeneinander: Anmelden fuer Bestandskunden, Gastbestellung fuer
   alle, die kein Konto wollen. Baymard: 18 % der Kaeufer brechen ab, WEIL sie
   kein Konto anlegen wollen — der Weg gehoert also sichtbar hierher, nicht
   versteckt in den Checkout. Im Gewerbemodus blendet Abschnitt 14 den ganzen
   Block aus: freischaltpflichtige Kundengruppen laesst das Plugin im Checkout
   ohnehin nicht zu, ein Gast-Hinweis waere dort eine Sackgasse. */
.fsreg-intro .fsreg-wege{
  display:flex; flex-wrap:wrap; gap:.35rem 1.75rem;
  margin:0; padding-top:.6rem;
  border-top:1px solid var(--fsr-linie);
  font-family:"FS Body","FS Text",sans-serif;
  font-size:13px; color:var(--fsr-grau);
}
.fsreg-intro .fsreg-wege a{
  color:var(--fsr-text); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.fsreg-intro .fsreg-wege a:hover{ color:var(--fsr-cta); }
.fsreg-intro .fsreg-wege a:focus-visible{ outline:2px solid var(--fsr-fokus); outline-offset:2px; }

.fsreg-intro .fsreg-login{
  margin:0; padding-top:.6rem;
  border-top:1px solid var(--fsr-linie);
  font-family:"FS Body","FS Text",sans-serif;
  font-size:13px; color:var(--fsr-grau);
}
.fsreg-intro .fsreg-login a{
  color:var(--fsr-text); font-weight:600;
  text-decoration:underline; text-underline-offset:2px;
}
.fsreg-intro .fsreg-login a:hover{ color:var(--fsr-cta); }
.fsreg-intro .fsreg-login a:focus-visible{ outline:2px solid var(--fsr-fokus); outline-offset:2px; }

@media (max-width:767.98px){
  .fsreg-intro .fsreg-benefits{ display:block; }
  .fsreg-intro .fsreg-benefits li{ margin-bottom:.35rem; }
  .fsreg-intro .fsreg-wege{ display:block; }
  .fsreg-intro .fsreg-wege .fsreg-weg{ display:block; margin-bottom:.3rem; }
}

/* ===========================================================================
   HINWEIS 27.08.2026 zu den Abschnitten 16 bis 18:
   Die Grosshandelsseite wurde auf DEV neu gebaut (Markup in tlinksprache
   kLink 127, Gestaltung in fs-b2b.css). Ihre Betriebswahl heisst dort jetzt
   .fsbe-betrieb-gitter — die Regeln unten greifen auf DEV also ins Leere.

   SIE BLEIBEN TROTZDEM STEHEN: Auf LIVE laeuft weiterhin das alte Markup mit
   .fs-b2b-gruppen und .fs-b2b-hero-card. Wer sie hier entfernt, nimmt der
   Live-Seite die Gruppenwahl und die Lesbarkeit im Hero-Kasten.
   Erst nach dem Livegang der neuen Fassung raeumen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   16 — KUNDENGRUPPEN-WAHL AUF DER B2B-LANDINGPAGE (/vapes-grosshandel_1)
   Dort stand bisher ein einziger Knopf, der JEDEN Interessenten in Gruppe 2
   (C-Handel) geschickt hat — obwohl die Seite fuenf Zielgruppen anspricht.
   Jetzt waehlt der Haendler dort, wo er ohnehin liest, und kommt mit gesetzter
   Gruppe im Formular an (Upload und Firmenfelder sind dann schon richtig).
   Markup liegt in tlinksprache kLink 127 (Seite gehoert SEOTEXT, angefasst
   wurde nur der CTA-Bereich, kein SEO-Text). Die Regeln stehen hier und nicht
   in fs-seotext.css, damit fremde Dateien unberuehrt bleiben.
   Optik folgt den vorhandenen .fs-b2b-*-Knoepfen jener Seite.
   --------------------------------------------------------------------------- */
.fs-b2b-gruppenwahl{ margin-top:4px; }

.fs-b2b-gruppenwahl-lead{
  font-family:"FS Body","FS Text",sans-serif;
  font-size:14px; line-height:1.5; color:#332d33;
  margin:0 0 12px;
}

.fs-b2b-gruppen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}

.fs-b2b-gruppen .fs-b2b-gruppe{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--fs-knopf-m,44px); padding:0 14px;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:var(--fs-knopf-fs-m,14px); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  text-align:center; text-decoration:none;
  color:#111114; background:#fff;
  border:1px solid #111114; border-radius:0;
  transition:background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.fs-b2b-gruppen .fs-b2b-gruppe:hover{
  background:#111114; color:#fff; text-decoration:none;
}
.fs-b2b-gruppen .fs-b2b-gruppe:focus-visible{
  outline:2px solid var(--fsr-fokus,#e5169f); outline-offset:3px;
}

.fs-b2b-gruppenwahl-login{
  margin:14px 0 0; padding-top:10px;
  border-top:1px solid rgba(17,17,20,.12);
  font-family:"FS Body","FS Text",sans-serif;
  font-size:13px; color:#6b6b70;
}
.fs-b2b-gruppenwahl-login a{
  color:#111114; font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.fs-b2b-gruppenwahl-login a:hover{ color:var(--fsr-cta,#c90f88); }
.fs-b2b-gruppenwahl-login a:focus-visible{ outline:2px solid var(--fsr-fokus,#e5169f); outline-offset:2px; }

/* Sprungziel nicht unter der Sticky-Kopfzeile verstecken */
#fs-b2b-gruppenwahl{ scroll-margin-top:120px; }

/* ---------------------------------------------------------------------------
   17 — GRUPPENWAHL IM DUNKLEN HERO-KASTEN
   Die Wahl sitzt in .fs-b2b-hero-card — die ist fast schwarz (#0e0b0e).
   Mein Fliesstext stand dort in #332d33 auf Schwarz, also praktisch unlesbar
   (nachgemessen, nicht geschaetzt). Deshalb: Textfarben nur INNERHALB der
   dunklen Karte umkehren, damit der Block auf hellem Grund weiter funktioniert,
   falls er dort spaeter auch eingesetzt wird.
   --------------------------------------------------------------------------- */
/* Der #fs-b2b-page-Praefix ist TRAGEND: fs-seotext.css setzt dort
   `#fs-b2b-page p { color:#332d33 }` — ein ID-Selektor, der jede reine
   Klassenregel schlaegt. Ohne den Praefix bleibt der Text unlesbar. */
/* NACHTRAG 23.08.2026: Die Hero-Karte ist seit der neuen Landingpage WEISS,
   nicht mehr fast schwarz. Die Umkehrung stand danach hell auf hell —
   gemessen 1.25:1 bei der Ruecklaufzeile. Sie haengt jetzt an der Klasse,
   die die Karte dunkel macht, statt an der Karte selbst. */
#fs-b2b-page .fs-b2b-hero-card.fs-b2b-card-dark .fs-b2b-gruppenwahl-lead{ color:#e9e4e9; }

#fs-b2b-page .fs-b2b-hero-card.fs-b2b-card-dark .fs-b2b-gruppenwahl-login{
  color:#b9b0b9;
  border-top-color:rgba(255,255,255,.18);
}
/* !important ist hier begruendet und kein Faulheitsfehler: fs-pages.css
   faerbt Links in Linkseiten ueber
   `#content:not(:has(#fs-geschmacksfinder)) .link-content p a` — dieser
   Selektor traegt ZWEI IDs (die zweite steckt im :not(:has())) und schlaegt
   damit jede vertretbare Klassenkette. Nachgemessen: ohne !important bleibt
   der Link magenta auf Schwarz, Kontrast 3,6 und damit unter AA. */
#fs-b2b-page .fs-b2b-hero-card.fs-b2b-card-dark .fs-b2b-gruppenwahl-login a{ color:#ffffff !important; }
#fs-b2b-page .fs-b2b-hero-card.fs-b2b-card-dark .fs-b2b-gruppenwahl-login a:hover{ color:#f26fcb !important; }

/* Hover: Schwarz auf schwarzem Grund waere unsichtbar — im dunklen Kasten
   uebernimmt das CTA-Magenta die Rolle der Fuellung. */
.fs-b2b-hero-card .fs-b2b-gruppen .fs-b2b-gruppe:hover{
  background:var(--fsr-cta,#c90f88);
  border-color:var(--fsr-cta,#c90f88);
  color:#fff;
}
.fs-b2b-hero-card .fs-b2b-gruppen .fs-b2b-gruppe:focus-visible{
  outline-color:#ffffff;
}

/* ---------------------------------------------------------------------------
   18 — BESTANDSFEHLER auf /vapes-grosshandel_1: schwarze Schrift auf schwarzem
   Kasten. Nachgemessen im Hero-Kasten (.fs-b2b-hero-card, Hintergrund #0e0b0e):

       H2  "IN WENIGEN SCHRITTEN ZUM B2B-ZUGANG"   Kontrast 1,04
       P   "Die Registrierung ist bewusst einfach"  Kontrast 1,46
       Label "SCHNELL ZUR FREISCHALTUNG"            Kontrast 2,12

   1,04 heisst: schwarz auf schwarz, praktisch unsichtbar. Der Text stand also
   da, ohne lesbar zu sein — auf der Seite, die den B2B-Einstieg traegt.
   Gehoert der Sache nach zu fs-seotext.css (Revier SEOTEXT, Sitzung nicht mehr
   erreichbar); die Regeln stehen hier, weil in dieser Datei ohnehin schon die
   Gruppenwahl derselben Karte liegt. #fs-b2b-page-Praefix wieder tragend.
   --------------------------------------------------------------------------- */
/* Ursache im Detail: fs-seotext.css setzt `.fs-b2b-hero-card h2` bereits
   korrekt auf Weiss — SEOTEXT hatte das sauber gebaut. Ueberfahren wird es von
   fs-pages.css mit `#content:not(:has(#fs-geschmacksfinder)) .link-content h2`,
   einer generischen Linkseiten-Regel mit ZWEI IDs. Dagegen hilft nur
   !important; eine hoehere Klassenkette gibt es nicht. */
/* NACHTRAG 23.08.2026: Die Hero-Karte ist mit der neuen Landingpage WEISS.
   Weiss auf Weiss hiess: die H2 "In wenigen Schritten zum B2B-Zugang" war
   unsichtbar — derselbe Fehler wie vorher, nur mit vertauschten Vorzeichen.
   Die Umkehrung haengt jetzt an der Klasse, die die Karte dunkel macht. */
#fs-b2b-page .fs-b2b-hero-card.fs-b2b-card-dark h2{ color:#ffffff !important; }
#fs-b2b-page .fs-b2b-hero-card.fs-b2b-card-dark p{ color:#c9c2c9; }
#fs-b2b-page .fs-b2b-hero-card.fs-b2b-card-dark .fs-b2b-card-label{ color:#f26fcb; }

/* ---------------------------------------------------------------------------
   19 — LEERRAUM AM FORMULARANFANG (22.08., mobil aufgefallen)
   Zwischen dem Nutzenblock und der ersten Abschnittsueberschrift standen 91px
   Luft. Zwei Ursachen, beide unsichtbar:
     (a) Im B2C-Fall bleibt das Kundengruppen-Fieldset als LEERE Huelle stehen
         (10px hoch plus Abstand). Abschnitt 1 blendet nur den Fall "Gruppe 1
         gewaehlt" aus — ohne Parameter ist gar keine Kachel da, der Selektor
         griff also nicht.
     (b) Das Theme setzt eine Trennlinie unmittelbar vor die erste Ueberschrift,
         die selbst schon eine Unterlinie traegt — zwei Linien im Abstand von
         19px.
   --------------------------------------------------------------------------- */
#panel-register-form .ws5_wahlheader:not(:has(.ws5_auswahlbutton)){
  display:none;
}

/* Das Theme setzt VOR jede Abschnittsueberschrift eine <hr>. Die Ueberschrift
   traegt seit Abschnitt 3 selbst eine Unterlinie — es standen also zwei Linien
   im Abstand von 19px, dreimal im Formular. Die Theme-Linien entfallen; die
   Trennlinie vor dem Absendebereich (direkt im <form>, ohne .col-Wrapper)
   bleibt und wird in Abschnitt 8 gestylt. */
#content .register-form .row > [class*="col"] > hr{
  display:none;
}

/* ---------------------------------------------------------------------------
   20 — TRUSTED-SHOPS-SIEGEL AUF DEN ZUBRINGERSEITEN (mobil)
   Auf 375px liegt das fixierte Siegel ueber dem Haupt-CTA der B2B-Seite
   ("Jetzt als B2B-Kunde registrieren") — dieselbe Ueberdeckung wie zuvor auf
   der Registrierung ueber dem Firma-Feld. Auf Seiten, auf denen der naechste
   Schritt ein Knopf oder ein Eingabefeld ist, hat ein fixiertes Siegel nichts
   zu suchen. Gilt NUR hier und auf /Registrieren, nicht shopweit.
   --------------------------------------------------------------------------- */
@media (max-width:767.98px){
  body:has(#fs-b2b-page) [id^="trustbadge-container"],
  body:has(#fs-b2b-page) .trustbadge{ display:none !important; }
}

/* ---------------------------------------------------------------------------
   21 — UST-IDNR. NUR IM GEWERBEMODUS (Frage Yunus, 22.08.)
   Eine Umsatzsteuer-Identifikationsnummer hat kein Privatkunde. Das Feld stand
   trotzdem im B2C-Formular — als optionale Angabe zwar, aber jedes Feld, das
   niemand ausfuellt, kostet Aufmerksamkeit und laesst das Formular laenger
   wirken. Backend-seitig laesst es sich nicht trennen: die Einstellung
   `kundenregistrierung_abfragen_ustid` gilt fuer alle Kundengruppen, und im
   Gewerbemodus wird das Feld gebraucht. Also am DOM-Zustand geschaltet, wie
   der ganze Rest der Kontextlogik (Abschnitt 14).
   Firma bleibt bewusst stehen: Privatkunden lassen sich durchaus an eine
   Firmenanschrift liefern.
   --------------------------------------------------------------------------- */
#panel-register-form:not(:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"])))
  .register-form .form-row > [class*="col"]:has(input[name="ustid"]){
  display:none;
}

/* Ohne USt-Feld darf das Land die Zeile fuer sich haben, sonst klafft rechts
   ein Loch. */
@media (min-width:768px){
  #panel-register-form:not(:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"])))
    .register-form .form-row > [class*="col-"]:has(select[name="land"]){
    flex:0 0 100%; max-width:100%;
  }
}


/* ---------------------------------------------------------------------------
   22 — PACKSTATION UND ABWEICHENDE LIEFERADRESSE (Auftrag Yunus, 22.08.)
   Ausgangslage, an den Bestelldaten gemessen: 14.404 von 38.255 Bestellungen
   (38 %) gehen an eine abweichende Lieferadresse — die Funktion ist kein
   Sonderfall, sondern Alltag. Packstationen dagegen kommen praktisch nicht vor
   (null Treffer in den Strassenfeldern, zwei im Adresszusatz) — kein Wunder:
   Das Adresszusatz-Feld war shopweit ABGESCHALTET, die Postnummer hatte also
   gar keinen Platz. Seit 22.08. ist es an (Registrierung und Lieferadresse,
   jeweils optional).
   Hier die beiden Erklaerungen, die aus einem Feld einen benutzbaren Weg machen.
   --------------------------------------------------------------------------- */
#content .register-form .form-group:has(input[name="adresszusatz"])::after{
  content:"z. B. Wohnung, Etage oder c/o.";
  display:block;
  margin-top:6px;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:12px;
  color:var(--fsr-grau);
  line-height:1.45;
}

/* Abschliessender Hinweis am Adressblock: nimmt die Frage vorweg, ob man hier
   schon die Adresse eintragen muss, an die geliefert werden soll. */
#content .register-form .form-row:has(input[name="plz"])::after{
  content:"An diese Adresse geht die Rechnung. Eine abweichende Lieferadresse — auch eine Packstation — kannst du beim Bestellen angeben.";
  flex:0 0 100%;
  max-width:100%;
  order:9;
  margin:.5rem 0 .25rem;
  padding:.7rem .9rem;
  background:var(--fsr-sand);
  border-left:3px solid var(--fsr-rand);
  font-family:"FS Body","FS Text",sans-serif;
  font-size:12px;
  color:#332d33;
  line-height:1.5;
}

/* ---------------------------------------------------------------------------
   23 — PACKSTATION-SCHALTER — im BESTELLVORGANG, nicht hier
   Der Schalter lag zuerst in der Registrierung. Yunus hat das korrigiert, und
   zwar zu Recht: Die Registrierung erfasst die RECHNUNGSadresse, an eine
   Packstation wird GELIEFERT. Er sitzt jetzt an der Lieferadresse im Checkout
   (fs-packstation.js), die Regeln dazu stehen unten in Abschnitt 25.
   Auf der Registrierung bleibt nur das gewoehnliche Adresszusatz-Feld fuer
   Wohnung, Etage oder c/o.
   --------------------------------------------------------------------------- */

/* Abschnitt 24 (Titel "Deine Adresse" fuer Privatkunden) liegt jetzt in
   fs-register.js — der CSS-Textersatz traf beide Ueberschriften des Fieldsets
   ("Name" und "Rechnungsadresse"), weil sie im selben Container stehen und
   sich per Selektor nicht unterscheiden lassen. Im JS ist die letzte
   Ueberschrift eindeutig adressierbar, und Screenreader lesen echten Text
   statt generierten Inhalt. */

/* ---------------------------------------------------------------------------
   25 — PACKSTATION-SCHALTER AN DER LIEFERADRESSE (Bestellvorgang)
   Markup kommt aus fs-packstation.js und haengt ueber dem Strassenfeld der
   Lieferadresse. Der Schalter benennt Strasse/Hausnummer/Adresszusatz um —
   gespeichert wird unveraendert.
   Kein #checkout-Praefix: Dieselbe Lieferadresse wird auch in der
   Adressverwaltung des Kundenkontos bearbeitet (/Mein-Konto?editLieferadresse=1),
   und dort gibt es kein #checkout. Die Klasse .fspack entsteht ausschliesslich
   durch das Skript, ist also eindeutig genug.
   --------------------------------------------------------------------------- */
.fspack{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem .6rem;
  margin:0 0 .9rem;
  padding:.65rem .85rem;
  background:#f6f5f3;
  border-left:3px solid #d9d9de;
}
.fspack-box{
  width:18px; height:18px; margin:0;
  accent-color:#c90f88;
  flex:0 0 auto;
  cursor:pointer;
}
.fspack-label{
  margin:0;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:14px;
  color:#111114;
  cursor:pointer;
  /* Der Checkout macht Labels sonst klein und gesperrt (fs-checkout.css) —
     das hier ist ein Satz, kein Feldname. */
  position:static !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:600 !important;
  padding:0 !important;
}
.fspack-hinweis{
  flex:0 0 100%;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:12px;
  color:#6b6b70;
  line-height:1.45;
}
.fspack-box:focus-visible{
  outline:2px solid #e5169f;
  outline-offset:2px;
}

/* ---------------------------------------------------------------------------
   26 — MOBILES RASTER: zwei Paare nebeneinander
   Auf 390px stand jedes Feld allein, auch Hausnummer und PLZ — beides kurze
   Eingaben, die neben ihrem Partner Platz haben. Das spart zwei Zeilen und
   entspricht dem, was Kunden von anderen Shops kennen. Alles andere bleibt
   volle Breite.
   --------------------------------------------------------------------------- */
@media (max-width:767.98px){
  #content .register-form .form-row > [class*="col"]:has(input[name="strasse"]){
    flex:0 0 64%; max-width:64%;
  }
  #content .register-form .form-row > [class*="col"]:has(input[name="hausnummer"]){
    flex:0 0 36%; max-width:36%;
  }
  #content .register-form .form-row > [class*="col"]:has(input[name="plz"]){
    flex:0 0 36%; max-width:36%;
  }
  #content .register-form .form-row > [class*="col"]:has(input[name="ort"]){
    flex:0 0 64%; max-width:64%;
  }
}

/* ---------------------------------------------------------------------------
   27 — ANREDE-LABEL
   In der 20-Prozent-Spalte passt "ANREDE - optionale Angabe" nicht mehr und
   wurde abgeschnitten. Der Zusatz ist dort entbehrlich: Das Feld steht auf
   "Keine Anrede", damit ist die Freiwilligkeit sichtbar.
   --------------------------------------------------------------------------- */
@media (min-width:768px){
  #content .register-form .form-group:has(select[name="anrede"]) .col-form-label .optional{
    display:none;
  }
}

/* ---------------------------------------------------------------------------
   28 — ZWEI MOBILE DETAILS
   (a) "HAUSNUMMER" passt in der 36-Prozent-Spalte nicht und wurde abgeschnitten
       ("HAUSNUMM…"). Neben "STRASSE" ist "NR." eindeutig.
   (b) Der Passwort-Hinweis stand mobil ZWISCHEN den beiden Passwortfeldern und
       trennte sie optisch. Er gehoert ans Ende des Blocks — am Desktop stehen
       die Felder nebeneinander, dort bleibt er unter dem ersten.
   --------------------------------------------------------------------------- */
@media (max-width:767.98px){
  #content .register-form .form-group:has(input[name="hausnummer"]) .col-form-label{
    font-size:0;
    letter-spacing:0;
  }
  #content .register-form .form-group:has(input[name="hausnummer"]) .col-form-label::before{
    content:"Nr.";
    font-size:11px;
    letter-spacing:.14em;
  }

  #content .register-form .register-form-account-password::after{ display:none; }
  #content .register-form .register-form-account-password-repeat::after{
    content:"Mindestens 8 Zeichen.";
    display:block;
    margin-top:6px;
    font-family:"FS Body","FS Text",sans-serif;
    font-size:12px;
    color:var(--fsr-grau);
  }
}

/* ---------------------------------------------------------------------------
   29 — GEWERBEMODUS: UPLOAD UND ABSENDEBEREICH (22.08.)
   Zwei Fehler, die nur im B2B-Fall auftreten:

   (a) Das Plugin haengt den Gewerbeschein-Upload per JS HINTER das USt-Feld —
       also in dessen Spalte (Einstellung: Selektor #ustid, Methode after).
       Die Spalte wuchs dadurch auf 857px in einem 773px breiten Raster und
       schob Land und USt-Zeile auseinander. Sie bekommt jetzt die volle Breite
       und steht als eigene Zeile am Ende des Adressblocks.
   (b) Der Erwartungssatz ("24 Stunden Pruefung") landete in der schmalen
       Knopfspalte und war 263px breit — er gehoert ueber die ganze Zeile.
   --------------------------------------------------------------------------- */
#content .register-form .form-row > [class*="col"]:has(#ws5_fileupload){
  flex:0 0 100%;
  max-width:100%;
  order:8;
}

/* Upload-Zone im Hausstil statt Plugin-Grundoptik */
#content .register-form .ws5_dateiupload,
#content .register-form [class*="dateiupload"]{
  background:var(--fsr-sand);
  border:1px dashed var(--fsr-rand);
  border-radius:0;
  padding:.9rem 1rem;
  margin-top:.5rem;
}
#content .register-form .form-row .h3:has(+ * #ws5_fileupload),
#content .register-form [class*="dateiupload"] .h3{
  font-size:14px;
  margin:0 0 .5rem;
  padding-bottom:.4rem;
}
#content .register-form input#ws5_fileupload{
  background:#fff;
}
#content .register-form [class*="dateiupload"] strong,
#content .register-form [class*="dateiupload"] b{
  font-weight:600;
  font-size:12px;
}
#content .register-form [class*="dateiupload"] p,
#content .register-form [class*="dateiupload"] div:not(.h3){
  font-family:"FS Body","FS Text",sans-serif;
  font-size:12px;
  line-height:1.5;
  color:var(--fsr-grau);
}

/* Absendebereich: Erwartungssatz ueber die volle Breite, Knopf rechts */
#content .register-form .checkout-button-row > [class*="checkout-button-row-submit"]{
  flex:0 0 100%;
  max-width:100%;
  margin-left:0;
}
#content .register-form .fsreg-erwartung{
  max-width:none;
}
@media (min-width:768px){
  #content .register-form .checkout-button-row > [class*="checkout-button-row-submit"] button[type="submit"]{
    max-width:340px;
    margin-left:auto;
    display:block;
  }
}

/* ---------------------------------------------------------------------------
   30 — UPLOAD UNTER DAS UST-FELD, NICHT DAZWISCHEN
   Das Plugin haengt sein Upload-Fieldset direkt hinter das <input id="ustid">.
   Beide stecken im Theme-Wrapper .d-flex.flex-column-reverse, der die
   Reihenfolge umdreht — sichtbar wurde daraus: Label, Upload, Eingabefeld.
   Das Fieldset bekommt deshalb order:-1 und landet in der umgedrehten Achse
   ganz unten: Label, USt-Feld, Upload.
   --------------------------------------------------------------------------- */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset{
  order:-1;
  margin-top:.9rem;
  padding:.9rem 1rem;
  background:var(--fsr-sand);
  border:1px dashed var(--fsr-rand);
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .h3{
  font-size:14px;
  margin:0 0 .6rem;
  padding-bottom:.4rem;
}
/* ACHTUNG, teuer gelernt: `fieldset:has(#ws5_fileupload)` trifft AUCH das
   umschliessende fieldset.inc-billing-address-form — der Upload liegt ja darin.
   Die Folge war ein zerlegtes Raster: jedes Adressfeld stand ploetzlich allein
   in voller Breite. Der Selektor muss auf das INNERE Fieldset zeigen, also auf
   das direkte Kind des Theme-Wrappers. */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .row,
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .form-row{
  display:block;
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset [class*="col"]{
  flex:0 0 100%;
  max-width:100%;
  padding-left:0;
  padding-right:0;
}

/* ---------------------------------------------------------------------------
   31 — GEWERBEMODUS: LETZTE ABSTIMMUNGEN
   (a) Land stand in halber Breite, weil die USt-Spalte die andere Haelfte
       beanspruchte — die traegt jetzt aber den Upload und liegt in einer
       eigenen Zeile. Also volle Breite fuers Land.
   (b) Der Hinweis am Adressblock nennt fuer Privatkunden die Packstation.
       Ein Grosshaendler laesst an sein Geschaeft liefern; dort genuegt der
       Verweis auf die abweichende Lieferadresse.
   (c) Der B2B-Textblock unter dem Formular (OPC) kam in Theme-Grau mit
       runden Ecken — im Hausstil sind das kantige Flaechen mit Anton-Titeln.
   --------------------------------------------------------------------------- */
@media (min-width:768px){
  #content .register-form .form-row:has(#ws5_fileupload) > [class*="col"]:has(select[name="land"]){
    flex:0 0 100%;
    max-width:100%;
  }
}

#panel-register-form:has(.ws5_auswahlbutton.active[data-kundengruppe]:not([data-kundengruppe="1"]))
  .register-form .form-row:has(input[name="plz"])::after{
  content:"An diese Adresse geht die Rechnung. Eine abweichende Lieferadresse kannst du beim Bestellen angeben.";
}

/* B2B-Textblock unter dem Formular */
#panel-register-form > div > div:not(.ws5_wahlheader) > h2,
#panel-register-form .opc-Accordion ~ div h2,
#panel-register-form form.register-form ~ div h2{
  font-family:"FS Display","FS Text",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.03em;
  font-size:22px;
  margin:2.5rem 0 1rem;
}
#panel-register-form .opc-Accordion .card,
#panel-register-form .opc-Accordion .card-header,
#panel-register-form .opc-Accordion .btn{
  border-radius:0 !important;
}
#panel-register-form .opc-Accordion .card{
  background:var(--fsr-sand);
  border:1px solid var(--fsr-linie);
  margin-bottom:.5rem;
}
#panel-register-form .opc-Accordion .card-header{
  background:transparent;
  border-bottom:0;
  padding:.2rem .4rem;
}
#panel-register-form .opc-Accordion .card-header .btn,
#panel-register-form .opc-Accordion .card-header a{
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--fsr-text);
  text-transform:none;
}

/* ---------------------------------------------------------------------------
   32 — VIER OPTIONEN IM FORMULAR (Ansage Yunus, 23.08.)
   Das Auswahl-Template des Plugins ist wieder an: Der Antragsteller sieht oben
   alle Betriebsarten und kann wechseln, ohne zurueckzugehen. Zwei Regeln
   halten das sauber:
     (a) Ohne gewaehlte Gewerbegruppe (Privatkunden-Weg) verschwindet der ganze
         Block — dort ist keine Kachel aktiv.
     (b) Die Privatkunden-Kachel gehoert nicht in die Betriebsauswahl; der
         Rueckweg steht als Textzeile darunter (fs-register.js).
   --------------------------------------------------------------------------- */
#panel-register-form .ws5_wahlheader:not(:has(.ws5_auswahlbutton.active)){
  display:none;
}
#panel-register-form .ws5_auswahlbutton[data-kundengruppe="1"]{
  display:none;
}

/* Auswahl statt Anzeige: nicht gewaehlte Betriebsarten als kantige Umriss-
   Kacheln, die gewaehlte schwarz gefuellt. */
#panel-register-form #ws5_kundengruppenauswahl{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
#panel-register-form #ws5_kundengruppenauswahl h3{
  flex:0 0 100%;
  margin-bottom:2px;
}
#panel-register-form .ws5_auswahlbutton:not(.active){
  background:#ffffff !important;
  color:var(--fsr-text) !important;
  border:1px solid var(--fsr-rand) !important;
}
#panel-register-form .ws5_auswahlbutton:not(.active):hover{
  border-color:var(--fsr-text) !important;
  background:#ffffff !important;
}
#panel-register-form .ws5_auswahlbutton.active{
  background:var(--fsr-text) !important;
  border-color:var(--fsr-text) !important;
  color:#fff !important;
}

/* Rueckweg fuer Privatkunden unter der Auswahl */
#panel-register-form .fsreg-privat{
  flex:0 0 100%;
  margin:.35rem 0 0;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:12px;
  color:var(--fsr-grau);
}
#panel-register-form .fsreg-privat a{
  color:var(--fsr-text);
  text-decoration:underline;
  text-underline-offset:2px;
}
#panel-register-form .fsreg-privat a:hover{ color:var(--fsr-cta); }

/* ---------------------------------------------------------------------------
   33 — DATENSCHUTZ-ZEILE (Ansage Yunus)
   Der Satz "Bitte beachte unsere Datenschutzerklaerung" ueber dem Absendeknopf
   entfaellt. Der Link steht weiterhin in der Fusszeile.
   --------------------------------------------------------------------------- */
#content .register-form .checkout-register-form-buttons-privacy{
  display:none;
}

/* Firma steht im Gewerbeantrag als erstes Feld der Rechnungsadresse und
   nimmt die ganze Zeile (fs-register.js haengt sie dorthin um). */
#content .register-form .form-row > .fsreg-firma-b2b{
  flex:0 0 100% !important;
  max-width:100% !important;
  order:0 !important;
}

/* ---------------------------------------------------------------------------
   34 — UPLOAD-ZONE IM HAUSSTIL (Ansage Yunus, 23.08.)
   Vorher: ein nacktes <input type="file"> mit Systembutton "Dateien auswählen",
   daneben "Keine ausgewählt", darunter drei Zeilen Kleingedrucktes in
   Fettschrift. Sah nach Formular-Rohbau aus.
   Jetzt: eine ruhige Ablagefläche mit Dokument-Symbol, klarer Aufforderung und
   dem Kleingedruckten als das, was es ist. Der Systembutton bleibt erhalten
   (::file-selector-button), damit Dateiauswahl und Plugin unveraendert
   funktionieren — nur eingekleidet.
   --------------------------------------------------------------------------- */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset{
  position:relative;
  background:var(--fsr-sand);
  border:1px dashed var(--fsr-rand);
  padding:1.4rem 1.2rem 1.2rem;
  text-align:center;
}

/* Dokument-Symbol ueber der Zone */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset::before{
  content:"";
  display:block;
  width:34px; height:34px;
  margin:0 auto .55rem;
  background:var(--fsr-text);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M14 3v5h5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12 12v5m0-5-2 2m2-2 2 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M14 3v5h5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M12 12v5m0-5-2 2m2-2 2 2' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* "DATEIUPLOAD" verschwindet — die Aufforderung steht in der Legende */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset > .h3,
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .h3:first-child{
  display:none;
}

/* Legende "Bitte Gewerbeschein hochladen" wird zur Ueberschrift der Zone */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset legend{
  float:none;
  width:auto;
  margin:0 auto .15rem;
  padding:0;
  border:0;
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--fsr-text);
  text-align:center;
}

/* Das Feld selbst: kein Kasten, nur der Knopf mittig */
#content .register-form input#ws5_fileupload{
  border:0;
  background:transparent;
  padding:0;
  height:auto;
  min-height:0;
  text-align:center;
  font-family:"FS Body","FS Text",sans-serif;
  font-size:13px;
  color:var(--fsr-grau);
  cursor:pointer;
}
#content .register-form input#ws5_fileupload::file-selector-button{
  margin:.5rem .6rem .5rem 0;
  padding:.6rem 1.1rem;
  min-height:40px;
  background:var(--fsr-text);
  border:1px solid var(--fsr-text);
  border-radius:0;
  color:#fff;
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .15s ease;
}
#content .register-form input#ws5_fileupload::file-selector-button:hover{
  background:var(--fsr-cta);
  border-color:var(--fsr-cta);
}

/* Kleingedrucktes: klein und grau statt fett */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset strong,
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset b{
  font-weight:400 !important;
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset p,
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset div:not(.h3):not([class*="col"]){
  font-family:"FS Body","FS Text",sans-serif;
  font-size:12px;
  line-height:1.5;
  color:var(--fsr-grau);
}

/* Feinschliff der Ablageflaeche: Legende und Knopf mittig ausrichten.
   Ein <legend> laesst sich nur zentrieren, wenn es die volle Breite bekommt —
   sonst haengt es am linken Rand des Fieldsets. */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset legend{
  display:block;
  width:100%;
  float:none;
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset > div{
  text-align:center;
}
#content .register-form input#ws5_fileupload{
  display:inline-block;
  width:auto;
  max-width:100%;
}

/* Die Aufforderung "Bitte Gewerbeschein hochladen" ist ein schwebendes Label
   des Themes und klebte deshalb am linken Rand der Zone. Hier steht es still
   und mittig — es ist die Ueberschrift der Ablageflaeche, kein Feldname.
   (Das Plugin vergibt uebrigens die ID ws5_fileupload ZWEIMAL: einmal am
   umschliessenden Fieldset, einmal am Dateifeld. Deshalb sprechen die Regeln
   oben das Feld als input#ws5_fileupload an.) */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .control-label{
  position:static !important;
  transform:none !important;
  display:block;
  width:100%;
  margin:0 0 .2rem;
  padding:0 !important;
  font-family:"FS Text","DM Sans",sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--fsr-text);
  text-align:center;
  background:transparent;
  opacity:1;
}

/* Reihenfolge in der Ablageflaeche: Aufforderung oben, dann der Knopf.
   Der Theme-Wrapper kehrt die Achse um (flex-column-reverse), deshalb wird
   die Reihenfolge hier ausdruecklich gesetzt statt sie dem Markup zu
   ueberlassen. */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .form-group:has(input#ws5_fileupload){
  display:flex;
  flex-direction:column;
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .form-group:has(input#ws5_fileupload) .control-label{
  order:1;
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .form-group:has(input#ws5_fileupload) input#ws5_fileupload{
  order:2;
  margin:0 auto;
  /* Als Flex-Kind wuerde das Feld auf volle Breite gedehnt — dann sitzt der
     Dateiname am linken Rand statt unter dem Knopf. */
  align-self:center;
  height:auto;
  /* Breite und Ausrichtung gehoeren in denselben Block: eine kuerzere Regel
     weiter unten wird von den Feld-Grundregeln des Themes ueberstimmt. */
  /* min-content statt max-content: max-content rechnet Knopf UND Dateiname
     nebeneinander, obwohl sie untereinander stehen — daraus entstand rechts
     ein toter Streifen. */
  width:min-content;
  max-width:100%;
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .form-group:has(input#ws5_fileupload) .control-label{
  margin-bottom:.7rem;
}
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset .form-group:has(input#ws5_fileupload) > *:not(.control-label):not(input#ws5_fileupload):not(.fsreg-ablage-knopf):not(.fsreg-ablage-stand){
  margin-top:.9rem;
}

/* ---------------------------------------------------------------------------
   35 — KEINE BETRIEBSAUSWAHL IM KAUFWEG
   Seit die Auswahl im Formular wieder aktiv ist (Abschnitt 32), rendert das
   Plugin sie auch im Bestellvorgang — dort hat sie nichts zu suchen: Wer
   bestellt, hat seine Gruppe längst, und freischaltpflichtige Gruppen laesst
   das Plugin im Checkout ohnehin nicht zu. Gemessen: Checkout zeigte 2 Kacheln
   inklusive "Privatkunde", vorher keine.
   --------------------------------------------------------------------------- */
#checkout .ws5_wahlheader,
#checkout #ws5_kundengruppenauswahl{
  display:none !important;
}

/* Innerhalb der Ablageflaeche liegt die Feinschrift (Formate, Groesse, Anzahl)
   im Markup vor dem Feld. Gelesen wird aber erst die Aufforderung, dann der
   Knopf, dann das Kleingedruckte — deshalb hier umsortiert. Der Selektor haengt
   ausdruecklich an der direkten Spalte des Uploadfeldes: ein .row:has(...)
   traf auch die aeussere Zeile und stellte die halbe Seite um. */
#content .register-form .col:has(> .form-group input#ws5_fileupload){
  display:flex;
  flex-direction:column;
}
#content .register-form .col:has(> .form-group input#ws5_fileupload) > .form-group{
  order:1;
}
#content .register-form .col:has(> .form-group input#ws5_fileupload) > *:not(.form-group){
  order:2;
}

/* Das Kleingedruckte steht als Geschwister direkt in derselben .form-group wie
   Label und Feld — ohne eigenes order stuende es vor beiden. */
#content .register-form .form-group:has(> input#ws5_fileupload) > *:not(.control-label):not(input#ws5_fileupload):not(.fsreg-ablage-knopf):not(.fsreg-ablage-stand){
  order:4;
}

/* Knopf und Dateiname untereinander statt nebeneinander: nebeneinander lief
   der native Text auf schmalen Geraeten aus der Flaeche heraus. */
#content .register-form input#ws5_fileupload{
  text-align:center;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}
#content .register-form input#ws5_fileupload::file-selector-button{
  display:block;
  margin:0 auto .55rem;
}


/* ---------------------------------------------------------------------------
   36 — ABLAGEFLAECHE STATT DATEIFELD
   Das native input[type=file] zeigt neben dem Knopf immer "Keine ausgewaehlt"
   bzw. den Dateinamen — linksbuendig am Feldrand, gegen text-align resistent.
   Gemessen: width bleibt auf 303px, egal ob fit-content, max-content oder
   min-content gesetzt wird. Darum liegt das echte Feld jetzt durchsichtig
   ueber der ganzen Flaeche (Klick UND Ziehen bleiben damit nativ), waehrend
   Knopf und Rueckmeldung eigene Elemente aus fs-register.js sind.
   --------------------------------------------------------------------------- */
#content .register-form fieldset.fsreg-ablage{
  position:relative;
}
#content .register-form fieldset.fsreg-ablage .form-group:has(> input#ws5_fileupload){
  position:static;
}
#content .register-form fieldset.fsreg-ablage input#ws5_fileupload{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
#content .register-form .fsreg-ablage-knopf{
  order:2;
  display:inline-block;
  margin:.7rem auto .45rem;
  padding:0 1.35rem;
  height:var(--fs-knopf-m, 44px);
  line-height:var(--fs-knopf-m, 44px);
  background:var(--fs-schwarz, #111);
  color:#fff;
  font-family:var(--fs-schrift-knopf, inherit);
  font-size:var(--fs-t-s, 14px);
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
#content .register-form .fsreg-ablage-stand{
  order:3;
  display:block;
  color:var(--fs-grau-text, #6b6b6b);
  font-size:var(--fs-t-s, 14px);
  word-break:break-word;
}
/* Liegt eine Datei vor, wird der Rahmen durchgezogen statt gestrichelt — das
   Gruen einer Erfolgsmeldung gehoert nicht in die Hausfarben, der geschlossene
   Rahmen sagt dasselbe. Der Selektor traegt denselben Vorspann wie die
   Grundregel der Zone, sonst gewinnt diese. */
#content .register-form .d-flex.flex-column-reverse:has(#ws5_fileupload) > fieldset.fsreg-ablage-voll{
  border-style:solid;
  border-color:var(--fsr-text, #111);
}
#content .register-form fieldset.fsreg-ablage-voll .fsreg-ablage-stand{
  color:var(--fsr-text, #111);
  font-weight:600;
}
#content .register-form fieldset.fsreg-ablage-voll .fsreg-ablage-stand::before{
  content:"✓ ";
}

/* Unter dem Kleingedruckten stand ein toter Streifen: die Feldgruppe bringt den
   normalen Formularabstand mit, den die Zone hier nicht braucht. */
#content .register-form fieldset.fsreg-ablage .row,
#content .register-form fieldset.fsreg-ablage .form-group{
  margin-bottom:0;
}