@pinuts/bsr-uikit-relaunch 0.4.2 → 0.4.4

package/dist/items/Grid/BSRGridRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BSRGridRow.d.ts","sourceRoot":"","sources":["../../../src/items/Grid/BSRGridRow.jsx"],"names":[],"mappings":";AAKA;;;sBAUC;;;;;;;kBAfiB,OAAO;sBACH,YAAY"}
+{"version":3,"file":"BSRGridRow.d.ts","sourceRoot":"","sources":["../../../src/items/Grid/BSRGridRow.jsx"],"names":[],"mappings":";AAMA;;;sBAqBC;;;;;;;kBA3BiC,OAAO;sBACnB,YAAY"}

package/dist/items/Grid/BSRGridRow.js

@@ -4,15 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _formBuilder = require("@pinuts/form-builder");
+var _ReviewLayoutContext = _interopRequireDefault(require("../../shared/FormWidget/ReviewLayoutContext.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const BSRGridRow = _ref => {
   let {
     components,
     children
   } = _ref;
+  const {
+    active: isReviewLayout
+  } = (0, _react.useContext)(_ReviewLayoutContext.default);
+
+  // Kontrollseite: einspaltige Liste statt Formular-Raster
+  if (isReviewLayout) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, components && /*#__PURE__*/_react.default.createElement(_formBuilder.ComponentPopulator, {
+      components: components,
+      formId: ''
+    }), children);
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     className: 'row'
   }, components && /*#__PURE__*/_react.default.createElement(_formBuilder.ComponentPopulator, {

package/dist/items/ReviewValue/ReviewValueList.d.ts

@@ -9,7 +9,7 @@ declare function ReviewValueList({ items }: {
 }): React.JSX.Element;
 declare namespace ReviewValueList {
     namespace propTypes {
-        let items: PropTypes.Requireable<NonNullable<string | number>[]>;
+        let items: PropTypes.Requireable<NonNullable<string | number | PropTypes.ReactElementLike>[]>;
     }
 }
 import React from 'react';

package/dist/items/ReviewValue/ReviewValueList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewValueList.d.ts","sourceRoot":"","sources":["../../../src/items/ReviewValue/ReviewValueList.jsx"],"names":[],"mappings":";AAIA;;;;GAIG;AACH;;sBAgBC;;;;;;kBAzBiB,OAAO;sBACH,YAAY"}
+{"version":3,"file":"ReviewValueList.d.ts","sourceRoot":"","sources":["../../../src/items/ReviewValue/ReviewValueList.jsx"],"names":[],"mappings":";AAIA;;;;GAIG;AACH;;sBAkBC;;;;;;kBA3BiB,OAAO;sBACH,YAAY"}

package/dist/items/ReviewValue/ReviewValueList.js

@@ -27,10 +27,10 @@ const ReviewValueList = _ref => {
   // Werte können sich wiederholen (gleiche Label-Texte), daher Index im Key
   // eslint-disable-next-line react/no-array-index-key
   _react.default.createElement("li", {
-    key: `${index}-${item}`
-  }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, String(item)))));
+    key: `${index}-${/*#__PURE__*/_react.default.isValidElement(item) ? '' : item}`
+  }, /*#__PURE__*/_react.default.isValidElement(item) ? item : /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, String(item)))));
 };
 ReviewValueList.propTypes = {
-  items: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
+  items: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.element]))
 };
 var _default = exports.default = ReviewValueList;

package/dist/locales.d.ts

@@ -84,6 +84,7 @@ export namespace resources {
                     let addressNotFound: string;
                     let loading: string;
                     let checkAddress: string;
+                    let checkAddressRequired: string;
                     let street: string;
                     let houseNumber: string;
                     let resetBtn: string;
@@ -139,6 +140,7 @@ export namespace resources {
                     let readyForUpload: string;
                     let isUploading: string;
                     let uploadSuccessful: string;
+                    let openFileAria: string;
                     namespace errors {
                         let uploadFileTooLarge: string;
                         let uploadFileTooLargeNoLimit: string;

package/dist/locales.js

@@ -79,6 +79,7 @@ const resources = exports.resources = {
           'addressNotFound': 'Die Strasse und/oder Strasse-/ und Hausnummerkombination konnte nicht gefunden werden, bitte Suchen Sie erneut und wählen Sie eine Strasse aus der Autovervollständigung aus.',
           'loading': 'Adresse wird überprüft ...',
           'checkAddress': 'Adresse prüfen',
+          'checkAddressRequired': 'Bitte die Adresse mit „{{button}}“ bestätigen.',
           'street': 'Straße',
           'houseNumber': 'Hausnummer',
           'resetBtn': 'X',
@@ -132,6 +133,7 @@ const resources = exports.resources = {
           readyForUpload: 'Bereit zum Hochladen: {{filename}}',
           isUploading: '{{filename}} wird hochgeladen ...',
           uploadSuccessful: '{{filename}} wurde hochgeladen.',
+          openFileAria: '{{label}} anzeigen (öffnet in neuem Tab)',
           errors: {
             // Fehlercodes des Servers
             uploadFileTooLarge: '{{filename}} ist zu groß. Erlaubt sind maximal {{maxSize}}.',

package/dist/shared/ErrorMessagesInfoBox/ErrorMessagesInfoBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorMessagesInfoBox.d.ts","sourceRoot":"","sources":["../../../src/shared/ErrorMessagesInfoBox/ErrorMessagesInfoBox.jsx"],"names":[],"mappings":";AAgEA;;;;sBAmEC;;;;;;;;kBAnI8D,OAAO;sBAChD,YAAY"}
+{"version":3,"file":"ErrorMessagesInfoBox.d.ts","sourceRoot":"","sources":["../../../src/shared/ErrorMessagesInfoBox/ErrorMessagesInfoBox.jsx"],"names":[],"mappings":";AAmEA;;;;sBAmEC;;;;;;;;kBAtI8D,OAAO;sBAChD,YAAY"}

package/dist/shared/ErrorMessagesInfoBox/ErrorMessagesInfoBox.js

@@ -17,7 +17,9 @@ const {
 } = _formBuilder.formik;
 const focusFieldByName = (formId, name) => {
   const form = formId ? document.getElementById(formId) : document;
-  const field = form?.querySelector(`[name="${name}"]`);
+  // Gruppenfelder ohne eigenes Eingabefeld (BSRAddressSelector): das als ungültig markierte Unterfeld
+  const escapedName = CSS.escape(name);
+  const field = form?.querySelector(`[name="${escapedName}"]`) || form?.querySelector(`[name^="${escapedName}-"][aria-invalid="true"]`);
   if (field) {
     field.scrollIntoView({
       behavior: 'smooth',

package/dist/shared/FormWidget/FormWidgetControlPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormWidgetControlPage.d.ts","sourceRoot":"","sources":["../../../src/shared/FormWidget/FormWidgetControlPage.jsx"],"names":[],"mappings":";AASA;;;;;;;;sBAuDC;;;;;;;;;;;;;;;;;kBAhEwC,OAAO;sBAC1B,YAAY"}
+{"version":3,"file":"FormWidgetControlPage.d.ts","sourceRoot":"","sources":["../../../src/shared/FormWidget/FormWidgetControlPage.jsx"],"names":[],"mappings":";AAWA;;;;;;;;sBA6DC;;;;;;;;;;;;;;;;;kBAxEwC,OAAO;sBAC1B,YAAY"}

package/dist/shared/FormWidget/FormWidgetControlPage.js

@@ -10,10 +10,15 @@ var _formBuilder = require("@pinuts/form-builder");
 var _reactI18next = require("react-i18next");
 var _HTMLParserSanitized = require("../../items/HTMLParserSanitized/HTMLParserSanitized.jsx");
 var _Button = _interopRequireDefault(require("../../items/Button/Button.jsx"));
+var _ReviewLayoutContext = _interopRequireDefault(require("./ReviewLayoutContext.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const noop = () => {};
+const reviewLayout = {
+  active: true,
+  inList: false
+};
 const FormWidgetControlPage = _ref => {
   let {
     captions,
@@ -36,14 +41,16 @@ const FormWidgetControlPage = _ref => {
   return /*#__PURE__*/_react.default.createElement("section", {
     className: "pi-review",
     "aria-labelledby": headingId
-  }, /*#__PURE__*/_react.default.createElement("h1", {
+  }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "pi-review-heading",
     id: headingId,
     tabIndex: -1,
     ref: headingRef
   }, t(captions.header)), captions.text && /*#__PURE__*/_react.default.createElement("div", {
     className: "info-text pi-review-infotext"
-  }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, t(captions.text))), /*#__PURE__*/_react.default.createElement(_formBuilder.FormBuilder, {
+  }, /*#__PURE__*/_react.default.createElement(_HTMLParserSanitized.HTMLParserSanitized, null, t(captions.text))), /*#__PURE__*/_react.default.createElement(_ReviewLayoutContext.default.Provider, {
+    value: reviewLayout
+  }, /*#__PURE__*/_react.default.createElement(_formBuilder.FormBuilder, {
     key: `${formId}-control`,
     formId: `${formId}-control`,
     formConfig: formConfig,
@@ -51,12 +58,14 @@ const FormWidgetControlPage = _ref => {
     initialValues: formValues,
     readOnly: true,
     flagsToInherit: ['reviewMode']
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pi-review-actions"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    color: "white",
-    className: "me-2",
+    color: "outline-brick",
     onClick: onBack,
     text: captions.backBtn
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    color: "brick",
     onClick: onSubmit,
     text: captions.submitBtn,
     ariaAttributes: {
@@ -65,7 +74,7 @@ const FormWidgetControlPage = _ref => {
     inputProps: {
       disabled: isSubmitting
     }
-  })));
+  })))));
 };
 FormWidgetControlPage.propTypes = {
   captions: _propTypes.default.shape({

package/dist/shared/FormWidget/ReviewLayoutContext.d.ts

@@ -0,0 +1,11 @@
+export default ReviewLayoutContext;
+/**
+ * Layout der Kontrollseite (FormWidgetControlPage).
+ * active: Raster aus, Fieldsets werden zu Abschnitten mit Überschrift und einer Liste.
+ * inList: innerhalb eines Abschnitts-<dl>, Felder liefern nur ihr dt/dd-Paar.
+ */
+declare const ReviewLayoutContext: import("react").Context<{
+    active: boolean;
+    inList: boolean;
+}>;
+//# sourceMappingURL=ReviewLayoutContext.d.ts.map

package/dist/shared/FormWidget/ReviewLayoutContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewLayoutContext.d.ts","sourceRoot":"","sources":["../../../src/shared/FormWidget/ReviewLayoutContext.js"],"names":[],"mappings":";AAEA;;;;GAIG;AACH;;;GAA4E"}

package/dist/shared/FormWidget/ReviewLayoutContext.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+/**
+ * Layout der Kontrollseite (FormWidgetControlPage).
+ * active: Raster aus, Fieldsets werden zu Abschnitten mit Überschrift und einer Liste.
+ * inList: innerhalb eines Abschnitts-<dl>, Felder liefern nur ihr dt/dd-Paar.
+ */
+const ReviewLayoutContext = /*#__PURE__*/(0, _react.createContext)({
+  active: false,
+  inList: false
+});
+var _default = exports.default = ReviewLayoutContext;

package/dist/shared/KehrenbuergerForm/KehrenbuergerForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KehrenbuergerForm.d.ts","sourceRoot":"","sources":["../../../src/shared/KehrenbuergerForm/KehrenbuergerForm.jsx"],"names":[],"mappings":";AA6DA;;;;;;GAMG;AACH;;;;sBAgHC;;;;;;;;kBApL2D,OAAO;sBAC7C,YAAY"}
+{"version":3,"file":"KehrenbuergerForm.d.ts","sourceRoot":"","sources":["../../../src/shared/KehrenbuergerForm/KehrenbuergerForm.jsx"],"names":[],"mappings":";AA6EA;;;;;;GAMG;AACH;;;;sBAmHC;;;;;;;;kBAvM2D,OAAO;sBAC7C,YAAY"}

package/dist/shared/KehrenbuergerForm/KehrenbuergerForm.js

@@ -51,6 +51,30 @@ const transformPayload = values => ({
   data: values
 });
 
+// Der UM liefert die Upload-URL relativ ("/p/…"). Auf der Website zeigt /p nicht auf den UM,
+// deshalb wie Config-Abruf und Absenden über restUrl leiten.
+const RELATIVE_REST_PREFIX = '/p/';
+const withUploadUrlsFromRestUrl = function () {
+  let components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let restUrl = arguments.length > 1 ? arguments[1] : undefined;
+  return components.map(component => {
+    const uploadUrl = component.config?.uploadUrl;
+    const config = typeof uploadUrl === 'string' && uploadUrl.startsWith(RELATIVE_REST_PREFIX) ? {
+      ...component.config,
+      uploadUrl: `${restUrl}/${uploadUrl.slice(RELATIVE_REST_PREFIX.length)}`
+    } : component.config;
+    return {
+      ...component,
+      ...(config && {
+        config
+      }),
+      ...(component.components && {
+        components: withUploadUrlsFromRestUrl(component.components, restUrl)
+      })
+    };
+  });
+};
+
 // Bestätigungs-Link (Double-Opt-In): ?c=<aktionId> in der URL.
 // Prod nutzt normale URLs (?c=... vor dem #), die CMS-Vorschau Hash-URLs
 // (#/pfad?c=...) - deshalb beide Stellen prüfen.
@@ -106,7 +130,10 @@ const KehrenbuergerForm = _ref2 => {
       if (!formConfigs?.anmeldung) {
         throw new Error('In der Antwort fehlt data.formConfigs.anmeldung');
       }
-      setFormConfig(formConfigs.anmeldung);
+      setFormConfig({
+        ...formConfigs.anmeldung,
+        components: withUploadUrlsFromRestUrl(formConfigs.anmeldung.components, restUrl)
+      });
       setRawCaptions(formConfigs.captions || {});
     }).catch(() => {
       if (!aborted) {
@@ -116,7 +143,7 @@ const KehrenbuergerForm = _ref2 => {
     return () => {
       aborted = true;
     };
-  }, [configUrl]);
+  }, [configUrl, restUrl]);
 
   // DOI: Anmeldung per PUT bestätigen, sobald die Captions da sind
   const doiConfirmed = (0, _react.useRef)(false);

package/dist/styles/_errorMessagesInfoBox.scss

@@ -7,7 +7,8 @@
   .pi-message-text {
     display: flex;
     flex-direction: column;
-    margin: 0 0 ($base-gap * 4);
+    // oben wie der Abstand des ersten Fieldsets (my-3), sonst klebt die Box am Einleitungstext
+    margin: ($base-gap * 4) 0;
     padding: ($base-gap * 3) ($base-gap * 5); // 12px 20px
     border: $bsr-border-width-l solid $error;
     border-radius: $border-radius;

package/dist/styles/_forcedColors.scss

@@ -0,0 +1,159 @@
+@use "sass:math";
+
+// =========================================================================
+// FORCED COLORS / HIGH CONTRAST
+// (Windows-Kontrastdesigns, Firefox "Website contrast: Custom")
+//
+// Der Browser erzwingt dann eigene Farben. Zwei Fehlerbilder:
+//   1. Indikator als url()-SVG      -> wird NICHT umgefaerbt, bleibt orange
+//   2. Indikator als background-color -> wird auf Canvas geflacht, verschwindet
+// Reine box-shadow-Fokusringe verschwinden ebenfalls.
+//
+// Loesung: Box mit forced-color-adjust: none aus der Automatik nehmen und mit
+// System-Keywords neu zeichnen (CanvasText = "Text", Canvas = "Hintergrund",
+// GrayText = deaktiviert, Highlight = Auswahl/Fokus).
+//
+// ZWEI FALLEN:
+// - forced-color-adjust VERERBT. Nur auf die Indikator-Box setzen, nie auf
+//   label oder Wrapper - sonst faellt der Labeltext aus der Nutzerpalette.
+// - Wer es setzt, besitzt ALLE Farben des Elements inkl. outline-color.
+//   Bestehende Fokusregeln muessen mit fc-focus-ring gespiegelt werden.
+//
+// KEIN nativer Fallback (appearance: auto): Firefox malt native Controls im
+// HCM in seiner eigenen Schwarz/Weiss-Palette und ignoriert die Nutzerfarben.
+// Die Mixins funktionieren auf echten <input> wie auf Pseudo-Elementen.
+// =========================================================================
+
+/// Einziger Ansatzpunkt fuer die Media Query.
+@mixin forced-colors {
+    @media (forced-colors: active) {
+        @content;
+    }
+}
+
+@mixin fc-control-box($border: CanvasText, $surface: Canvas) {
+    forced-color-adjust: none;
+    border-color: $border;
+    background-color: $surface;
+    background-image: none;
+    box-shadow: none;
+}
+
+@mixin fc-control-box-disabled($border: GrayText, $surface: Canvas) {
+    @include fc-control-box($border, $surface);
+}
+
+/// Radio-Punkt als Gradient auf der Box selbst - kein zusaetzliches Element,
+/// kein Positionierungskontext. Setzt fc-control-box voraus, sonst wuerde der
+/// Gradient auf none gezwungen. background-origin macht die Geometrie
+/// unabhaengig von der Border-Breite (1,4px normal / 2px bei Hover, Fehler).
+/// $size in px fuer bekannte Boxgroessen, oder ein Prozentwert, wenn die Box
+/// unbekannt ist (dann skaliert der Punkt mit - der Gradient liegt ueber der
+/// ganzen Box, `circle at center` mit Prozent-Stops).
+@mixin fc-indicator-radio($color: CanvasText, $size: 16px) {
+    @if unit($size) == "%" {
+        $radius: $size * 0.5;
+
+        background-image: radial-gradient(
+            circle at center,
+            #{$color} 0,
+            #{$color} #{$radius},
+            transparent #{$radius + 1%}
+        );
+    } @else {
+        $radius: $size * 0.5;
+
+        background-image: radial-gradient(
+            circle at center,
+            #{$color} 0,
+            #{$color} #{$radius - 0.5px},
+            transparent #{$radius}
+        );
+    }
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: border-box;
+}
+
+/// Haken aus zwei beschnittenen Gradient-Baendern.
+///
+/// Groesse und Position sind in Prozent der Box ausgedrueckt, der Haken passt
+/// sich also JEDER Boxgroesse an - noetig, weil die vom UM gelieferten
+/// Formulare unterschiedlich grosse Controls verwenden.
+///
+/// Herleitung gegen die urspruengliche 24x24-Geometrie (kurzer Strich 8x8 bei
+/// 3/10, langer 12x12 bei 9/6). background-position in Prozent bedeutet
+/// Offset = p * (Box - Bild), daraus:
+///   kurz: 8/24 = 33.333%, p_x = 3/(24-8) = 18.75%, p_y = 10/16 = 62.5%
+///   lang: 12/24 = 50%,    p_x = 9/(24-12) = 75%,   p_y = 6/12 = 50%
+/// Bei 24px ergibt das exakt die alten Pixelwerte.
+///
+/// Die Strichstaerke bleibt bewusst in px, damit der Haken auch in grossen
+/// Boxen nicht fett wird.
+@mixin fc-indicator-check($color: CanvasText, $stroke: 3.2px) {
+    $half: $stroke * 0.5; // deckende Haelfte
+    $soft: $half + 0.4px; // weiche Kante gegen Treppchen auf den Diagonalen
+
+    background-image:
+        // kurzer Strich, oben links -> Scheitelpunkt ("\")
+        linear-gradient(
+            45deg,
+            transparent calc(50% - #{$soft}),
+            #{$color} calc(50% - #{$half}),
+            #{$color} calc(50% + #{$half}),
+            transparent calc(50% + #{$soft})
+        ),
+        // langer Strich, Scheitelpunkt -> oben rechts ("/")
+        linear-gradient(
+            135deg,
+            transparent calc(50% - #{$soft}),
+            #{$color} calc(50% - #{$half}),
+            #{$color} calc(50% + #{$half}),
+            transparent calc(50% + #{$soft})
+        );
+    background-size: 33.333% 33.333%, 50% 50%;
+    background-position: 18.75% 62.5%, 75% 50%;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+}
+
+/// Pflicht auf jedem Element mit forced-color-adjust: none.
+@mixin fc-focus-ring($color: Highlight) {
+    outline-color: $color;
+    box-shadow: none;
+}
+
+/// Wie fc-focus-ring, aber fuer Elemente ohne eigene outline-Deklaration
+/// (Basiszustand setzt outline: none oder nutzt nur box-shadow).
+@mixin fc-focus-ring-full($color: Highlight, $width: 2px, $offset: 2px) {
+    outline: $width solid $color;
+    outline-offset: $offset;
+    box-shadow: none;
+}
+
+// -------------------------------------------------------------------------
+// KACHEL- / PILL-SELEKTOREN
+// "Ausgewaehlt" allein ueber background-color wird auf Canvas geflacht und
+// damit ununterscheidbar (WCAG 1.4.1). Systempaar dafuer: Highlight /
+// HighlightText.
+//
+// Anders als bei fc-control-box vererbt forced-color-adjust hier BEWUSST an
+// den Labeltext - der steht auf der Highlight-Flaeche. Icons folgen nur mit
+// fill/stroke="currentColor".
+// -------------------------------------------------------------------------
+
+@mixin fc-selected($surface: Highlight, $ink: HighlightText) {
+    forced-color-adjust: none;
+    background-color: $surface;
+    border-color: $surface;
+    color: $ink;
+}
+
+/// Gegenstueck zu fc-selected - noetig, weil der Container in beiden
+/// Zustaenden aus der Automatik faellt.
+@mixin fc-unselected($surface: Canvas, $ink: CanvasText) {
+    forced-color-adjust: none;
+    background-color: $surface;
+    border-color: $ink;
+    color: $ink;
+}

package/dist/styles/_form.scss

@@ -30,7 +30,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 $base-gap * 4 0 0;
   gap: $base-gap * 2;
   width: 100%;
 
@@ -56,6 +55,12 @@
     }
   }
 
+  .labelWithInfo {
+    display: flex;
+    align-items: center;
+    gap: $base-gap * 2;
+  }
+
   .infoRow {
     display: flex;
     gap: $base-gap;
@@ -99,14 +104,15 @@
           transform: rotate(45deg);
         }
 
+        // ohne das frühere padding-right (16px) der .topRow um 16px angepasst: Tooltip bleibt, wo er war
         &.adjustRight {
           left: auto;
-          right: -40px;
+          right: -24px;
 
           &::after {
             content: "";
             bottom: -10px;
-            right: 40px;
+            right: 24px;
             left: initial;
           }
         }
@@ -182,6 +188,11 @@ textarea {
   }
 }
 
+// Reset-Button unter "Ihre Auswahl" steht in keinem .formInput: gleicher Abstand zum nächsten Feld
+.addressResetBtn {
+  margin-bottom: $base-gap * 5;
+}
+
 /* TEXT INPUT */
 .formInput, fieldset.formInput {
   display: flex;
@@ -351,6 +362,61 @@ input[type="radio"] {
     outline: 2px solid white;
     outline-offset: $bsr-border-width-m * -1 - 3px;
   }
+
+  // FORCED COLORS: Der Punkt entsteht oben aus background-color plus einem
+  // weissen outline mit negativem Offset als Innenring. background-color wird
+  // im Kontrastmodus auf Canvas geflacht und outline-color ohnehin ersetzt -
+  // der Punkt verschwindet also. Innenring-Trick deshalb abschalten und den
+  // Punkt als Gradient in Nutzerfarben zeichnen.
+  @include forced-colors {
+    @include fc-control-box;
+
+    outline: none;
+
+    &:hover,
+    &:active {
+      @include fc-control-box;
+
+      outline: none;
+    }
+
+    &:checked {
+      @include fc-control-box;
+      @include fc-indicator-radio;
+
+      outline: none;
+    }
+
+    &:disabled {
+      @include fc-control-box-disabled;
+
+      outline: none;
+    }
+
+    &:disabled:checked {
+      @include fc-control-box-disabled;
+      @include fc-indicator-radio($color: GrayText);
+
+      outline: none;
+    }
+
+    &:focus,
+    &:focus-visible {
+      @include fc-focus-ring-full;
+    }
+  }
+}
+
+// Kein Rot in der Palette: Fehler bleibt ueber die dickere Kontur
+// (border-width wird nicht ueberschrieben) + Fehlermeldung erkennbar.
+// Bewusst NICHT in den Block oben verschachtelt: `.formInput.error &` wuerde
+// unter dem .bsr-uikit-Wrapper `.formInput.error .bsr-uikit input` ergeben,
+// und .formInput liegt innerhalb des Wrappers.
+@include forced-colors {
+  .formInput.error input[type="radio"] {
+    border-color: CanvasText;
+    outline: none;
+  }
 }
 button {
   text-underline-offset: 3px;
@@ -488,6 +554,46 @@ form input[type="checkbox"]:focus + label:before {
     box-shadow: 0 0 0 0.2rem rgba(255, 124.95, 38.25, 0.5);
 }
 
+// FORCED COLORS: Der Haken oben ist ein url()-SVG und wird nicht umgefaerbt,
+// Hover und Fokus sind reine box-shadow und verschwinden. Der Input selbst ist
+// visuell versteckt, Box und Indikator liegen auf label:before - deshalb muss
+// auch der Fokusring dorthin.
+@include forced-colors {
+  form input[type="checkbox"] + label:before {
+    @include fc-control-box;
+  }
+
+  // Keine graue Hover-Vorschau: Hover zeigt oben nur eine dickere Kontur
+  // (border-width, keine Farbe - bleibt im Kontrastmodus erhalten). Ein Haken
+  // bei Hover wuerde einen nicht gesetzten Zustand vortaeuschen.
+
+  form input[type="checkbox"]:checked + label:before,
+  form input[type="checkbox"]:checked + label:hover:before {
+    @include fc-control-box;
+    @include fc-indicator-check;
+  }
+
+  // NICHT :read-only mitnehmen - das matcht JEDE Checkbox, weil :read-write
+  // nur fuer textuell editierbare Elemente gilt.
+  form input[type="checkbox"]:disabled + label:before {
+    @include fc-control-box-disabled;
+  }
+
+  form input[type="checkbox"]:disabled:checked + label:before {
+    @include fc-control-box-disabled;
+    @include fc-indicator-check($color: GrayText);
+  }
+
+  form input[type="checkbox"]:focus + label:before,
+  form input[type="checkbox"]:focus-visible + label:before {
+    @include fc-focus-ring-full;
+  }
+
+  .formInput.error input[type="checkbox"] + label:before {
+    border-color: CanvasText;
+  }
+}
+
 /* TAG */
 .tag {
   position: relative;