math-main-components 0.0.221 → 0.0.225

package/dist/index.cjs.js

@@ -9456,67 +9456,22 @@ function Button2({ id, children, type = "submit", theme = "primary", iconName =
             React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
 }
 
-var css_248z$v = ".styles-module_card__bOd85 {\n  background: var(--background-2);\n  border: 1px solid var(--border-2);\n  border-radius: 18px;\n  transition: 0.2s ease;\n  padding: 18px 14px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  cursor: pointer;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding-top: 30px;\n}\n.styles-module_card__bOd85 span {\n  color: var(--foreground-3);\n}\n.styles-module_card__bOd85:hover {\n  transform: scale(1.01);\n  box-shadow: none;\n  background: none;\n}\n.styles-module_card__bOd85 h2 {\n  margin-top: 0;\n  color: var(--foreground-3);\n  font-weight: 400;\n  font-size: 18px;\n}";
-var styles$v = {"card":"styles-module_card__bOd85"};
+var css_248z$v = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n  width: 100%;\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n  display: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: relative;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  top: 10px;\n  left: 10px;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--border-2);\n}";
+var styles$v = {"container":"styles-module_container__gCCnD"};
 styleInject(css_248z$v);
 
-function CardButton({ id, children, iconName, onClick, ...props }) {
-    function onClickCard(event) {
-        event.preventDefault();
-        if (onClick)
-            onClick(event);
-    }
-    return (React__default["default"].createElement("div", { className: styles$v.card, onClick: onClickCard, id: id, ...props },
-        React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
-        React__default["default"].createElement("h2", null, children)));
-}
-
-var css_248z$u = ".styles-module_container__gCCnD {\n  margin-bottom: 20px;\n  color: var(--foreground-3);\n  width: 100%;\n}\n.styles-module_container__gCCnD [type=checkbox] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__gCCnD [type=checkbox] + label {\n  position: absolute;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n  width: 17px;\n  height: 17px;\n  border-radius: 5px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__gCCnD [type=checkbox] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-2);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n  background-color: var(--primary-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n  background-color: var(--background-4);\n  border-color: var(--background-2);\n}";
-var styles$u = {"container":"styles-module_container__gCCnD"};
-styleInject(css_248z$u);
-
-function Checkbox({ id, name, checked, defaultChecked = false, onInput = () => { }, children, ...props }) {
-    return (React__default["default"].createElement("div", { className: styles$u.container, ...props },
-        React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id || name }),
+function Checkbox({ id, name, defaultChecked = false, onInput = () => { }, children, ...props }) {
+    const [checked, setChecked] = React__default["default"].useState(defaultChecked);
+    React.useEffect(() => setChecked(defaultChecked), [defaultChecked]);
+    return (React__default["default"].createElement("div", { className: styles$v.container, ...props },
+        React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, defaultChecked: checked, id: id || name }),
         React__default["default"].createElement("label", { htmlFor: id || name }, children),
         React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
 }
 
-var css_248z$t = ".styles-module_container__OqDNA {\n  display: flex;\n  flex-direction: row;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(1) {\n  background: var(--background-1);\n  border-color: var(--background-1);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(2) {\n  background: var(--background-2);\n  border-color: var(--background-2);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:nth-child(3) {\n  background: var(--background-4);\n  border-color: var(--background-4);\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:first-child {\n  border-top-left-radius: 20px;\n  border-bottom-left-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI:last-child {\n  border-top-right-radius: 20px;\n  border-bottom-right-radius: 20px;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI {\n  border: 1px solid transparent;\n  padding: 11px 18px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__OqDNA .styles-module_item__1SMCI.styles-module_selected__AXIA- {\n  background: var(--background-4);\n  border-color: var(--primary-1);\n  color: var(--primary-1);\n}";
-var styles$t = {"container":"styles-module_container__OqDNA","item":"styles-module_item__1SMCI","selected":"styles-module_selected__AXIA-"};
-styleInject(css_248z$t);
-
-const ChooseRoleItem = ({ item, isSelected, onUpdate, }) => (React__default["default"].createElement("div", { className: [styles$t.item, isSelected ? styles$t.selected : styles$t.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title));
-function ChooseRole({ roles, defaultSelected, readOnly = false, onChange = () => { } }) {
-    const [selected, setSelected] = React.useState(defaultSelected);
-    React.useEffect(() => setSelected(defaultSelected), [defaultSelected]);
-    function onUpdate(newRole) {
-        if (readOnly)
-            return;
-        setSelected(newRole);
-        onChange(newRole);
-    }
-    return (React__default["default"].createElement("div", { className: styles$t.container }, roles.map(item => React__default["default"].createElement(ChooseRoleItem, { key: item.value, item: item, onUpdate: onUpdate, isSelected: selected === item.value }))));
-}
-
-var css_248z$s = ".styles-module_container__yV6C8 {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 30px;\n  transition: 0.2s ease-in-out;\n  margin-bottom: 20px;\n  color: var(--foreground-1);\n}\n.styles-module_container__yV6C8:hover {\n  color: var(--primary-1);\n}";
-var styles$s = {"container":"styles-module_container__yV6C8"};
-styleInject(css_248z$s);
-
-function CopyCode({ code, onCopy = () => { }, ...props }) {
-    const onClick = () => {
-        navigator.clipboard.writeText(code);
-        onCopy();
-    };
-    return (React__default["default"].createElement("div", { className: styles$s.container, onClick: onClick, ...props },
-        React__default["default"].createElement(SvgIcon, { iconName: "content_copy" }),
-        React__default["default"].createElement("span", null, code),
-        React__default["default"].createElement("input", { type: "hidden", name: "code", value: code })));
-}
-
-var css_248z$r = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  background: var(--background-2);\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: var(--background-1);\n  border-radius: 20px;\n  padding: 35px;\n  width: 450px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  max-width: 100%;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  cursor: auto;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M h1 {\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 1.5;\n  margin-top: 20px;\n  margin-bottom: 20px;\n  text-align: center;\n  color: var(--foreground-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n  border-radius: 12px;\n  color: var(--foreground-1);\n  background: var(--background-2);\n  padding: 14px 0px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n  border-radius: 12px;\n  color: var(--background-1);\n  background: var(--primary-1);\n  padding: 14px 0px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n  background: var(--primary-1);\n}";
-var styles$r = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
-styleInject(css_248z$r);
+var css_248z$u = ".styles-module_container__9-1MH {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n  background: var(--background-2);\n  backdrop-filter: blur(10px) brightness(70%);\n  left: 0;\n  top: 0;\n  z-index: 10000;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.styles-module_container__9-1MH.styles-module_active__AXoyo {\n  opacity: 1;\n}\n.styles-module_container__9-1MH.styles-module_disabled__sELpy {\n  pointer-events: none;\n  opacity: 0;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M {\n  background: var(--background-1);\n  border-radius: 20px;\n  padding: 35px;\n  width: 450px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  max-width: 100%;\n  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;\n  cursor: auto;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M h1 {\n  font-size: 26px;\n  font-weight: 500;\n  line-height: 1.5;\n  margin-top: 20px;\n  margin-bottom: 20px;\n  text-align: center;\n  color: var(--foreground-1);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS {\n  border-radius: 12px;\n  color: var(--foreground-1);\n  background: var(--background-2);\n  padding: 14px 0px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_cancel_button__KhwLS:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux {\n  border-radius: 12px;\n  color: var(--background-1);\n  background: var(--primary-1);\n  padding: 14px 0px;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  font-size: 16px;\n}\n.styles-module_container__9-1MH .styles-module_dialog_window__0Bn2M .styles-module_submit_button__xLzux:hover {\n  background: var(--primary-1);\n}";
+var styles$u = {"container":"styles-module_container__9-1MH","active":"styles-module_active__AXoyo","disabled":"styles-module_disabled__sELpy","dialog_window":"styles-module_dialog_window__0Bn2M","cancel_button":"styles-module_cancel_button__KhwLS","submit_button":"styles-module_submit_button__xLzux"};
+styleInject(css_248z$u);
 
 function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }) {
     function onClick(event) {
@@ -9527,60 +9482,48 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
                 onClose(event, data);
         }
     }
-    return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$r.container} ${enabled ? styles$r.active : styles$r.disabled}`, onClick: onClick },
-        React__default["default"].createElement("div", { className: styles$r.dialog_window },
+    return (React__default["default"].createElement("div", { id: "dialog-backdrop", className: `${styles$u.container} ${enabled ? styles$u.active : styles$u.disabled}`, onClick: onClick },
+        React__default["default"].createElement("div", { className: styles$u.dialog_window },
             children,
             text && React__default["default"].createElement("h1", null, text),
-            React__default["default"].createElement("button", { className: styles$r.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
-            React__default["default"].createElement("button", { className: styles$r.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
+            React__default["default"].createElement("button", { className: styles$u.cancel_button, id: "cancel-button", onClick: onClick }, "Abbrechen"),
+            React__default["default"].createElement("button", { className: styles$u.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
 }
 
-var css_248z$q = ".styles-module_container__hGVir {\n  width: 100%;\n}\n\n.styles-module_wrapper__HkVIU {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n  border: 1px solid var(--border-1);\n  padding: 0px 14px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  outline: none;\n  text-indent: 1px;\n  text-overflow: \"\";\n}\n.styles-module_wrapper__HkVIU .styles-module_select__nSHFF {\n  background: none;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n  user-select: none;\n  border: none;\n  outline: none;\n  height: 44px;\n  cursor: pointer;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n.styles-module_wrapper__HkVIU:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_wrapper__HkVIU:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}";
-var styles$q = {"container":"styles-module_container__hGVir","wrapper":"styles-module_wrapper__HkVIU","select":"styles-module_select__nSHFF"};
-styleInject(css_248z$q);
+var css_248z$t = ".styles-module_container__hGVir {\n  width: 100%;\n}\n\n.styles-module_wrapper__HkVIU {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n  border: 1px solid var(--border-1);\n  padding: 0px 14px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  outline: none;\n  text-indent: 1px;\n  text-overflow: \"\";\n}\n.styles-module_wrapper__HkVIU .styles-module_select__nSHFF {\n  background: none;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n  user-select: none;\n  border: none;\n  outline: none;\n  height: 44px;\n  cursor: pointer;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n.styles-module_wrapper__HkVIU:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_wrapper__HkVIU:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}";
+var styles$t = {"container":"styles-module_container__hGVir","wrapper":"styles-module_wrapper__HkVIU","select":"styles-module_select__nSHFF"};
+styleInject(css_248z$t);
 
 const Dropdown = ({ options = [], unit = "", ...props }) => {
-    return (React__default["default"].createElement("div", { className: styles$q.container },
-        React__default["default"].createElement("div", { className: styles$q.wrapper },
+    return (React__default["default"].createElement("div", { className: styles$t.container },
+        React__default["default"].createElement("div", { className: styles$t.wrapper },
             React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
-            React__default["default"].createElement("select", { className: styles$q.select, ...props },
+            React__default["default"].createElement("select", { className: styles$t.select, ...props },
                 React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
                 options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label)))))));
 };
 
-var css_248z$p = ".styles-module_card__hT9fw {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 20px;\n  padding: 100px 0px;\n  font-family: \"Space Grotesk\", sans-serif;\n}\n.styles-module_card__hT9fw h1 {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n  margin: 0;\n  font-size: 16px;\n}";
-var styles$p = {"card":"styles-module_card__hT9fw"};
-styleInject(css_248z$p);
-
-function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
-    return (React__default["default"].createElement("div", { className: styles$p.card },
-        React__default["default"].createElement(SvgIcon, { size: "60px", iconName: iconName }),
-        React__default["default"].createElement("h1", null, title),
-        React__default["default"].createElement("p", null, subtitle),
-        button && React__default["default"].createElement(Button, { onClick: onClick, type: "lightBlue" }, button)));
-}
-
-var css_248z$o = ".styles-module_container__9wYEm {\n  margin-bottom: 30px;\n  width: 100%;\n  font-family: var(--font-1);\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n  margin: 0;\n  font-weight: 500;\n  color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n  margin-top: 5px;\n  font-weight: 400;\n}";
-var styles$o = {"container":"styles-module_container__9wYEm"};
-styleInject(css_248z$o);
+var css_248z$s = ".styles-module_container__9wYEm {\n  margin-bottom: 30px;\n  width: 100%;\n  font-family: var(--font-1);\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n  margin: 0;\n  font-weight: 500;\n  color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n  margin-top: 5px;\n  font-weight: 400;\n}";
+var styles$s = {"container":"styles-module_container__9wYEm"};
+styleInject(css_248z$s);
 
 function FormText({ title, value, style }) {
-    return (React__default["default"].createElement("div", { className: styles$o.container, style: style },
+    return (React__default["default"].createElement("div", { className: styles$s.container, style: style },
         React__default["default"].createElement("h5", null, title),
         React__default["default"].createElement("h3", null, value)));
 }
 
-var css_248z$n = ".styles-module_container__C99XV {\n  margin-right: 8px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF {\n  background: none;\n  padding: none;\n  border: none;\n  width: 40px;\n  height: 40px;\n  transition: 0.2s;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF:hover {\n  background: var(--background-2);\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF span {\n  color: var(--foreground-1) !important;\n}";
-var styles$n = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
-styleInject(css_248z$n);
+var css_248z$r = ".styles-module_container__C99XV {\n  margin-right: 8px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF {\n  background: none;\n  padding: none;\n  border: none;\n  width: 40px;\n  height: 40px;\n  transition: 0.2s;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF:hover {\n  background: var(--background-2);\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF span {\n  color: var(--foreground-1) !important;\n}";
+var styles$r = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
+styleInject(css_248z$r);
 
 function ForwardButton({ onClick = () => { } }) {
     function onClickButton(event) {
         event.preventDefault();
         onClick(event);
     }
-    return (React__default["default"].createElement("div", { className: styles$n.container },
-        React__default["default"].createElement("button", { onClick: onClickButton, className: styles$n.button },
+    return (React__default["default"].createElement("div", { className: styles$r.container },
+        React__default["default"].createElement("button", { onClick: onClickButton, className: styles$r.button },
             React__default["default"].createElement(SvgIcon, { iconName: "arrow_back" }))));
 }
 
@@ -9588,9 +9531,9 @@ function Gap({ size }) {
     return (React__default["default"].createElement("div", { style: { height: size } }));
 }
 
-var css_248z$m = ".styles-module_container__Jr7LQ {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.styles-module_input__v-hUz {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  min-height: 50px;\n  line-height: 1.7;\n  background: var(--background-1);\n  color: var(--foreground-1);\n  font-family: var(--font-2);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__Jr7LQ {\n  position: relative;\n}\n\n.styles-module_label__SSsD3 {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__EOAq5 {\n  position: absolute;\n  top: 20px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__v-hUz:focus + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5,\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n  transform: translateY(-50%);\n  left: 15px;\n  font-size: 14px;\n  top: 0;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n  color: var(--foreground-3);\n}";
-var styles$m = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
-styleInject(css_248z$m);
+var css_248z$q = ".styles-module_container__Jr7LQ {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n}\n\n.styles-module_input__v-hUz {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  min-height: 50px;\n  line-height: 1.7;\n  background: var(--background-1);\n  color: var(--foreground-1);\n  font-family: var(--font-2);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__Jr7LQ {\n  position: relative;\n}\n\n.styles-module_label__SSsD3 {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__EOAq5 {\n  position: absolute;\n  top: 20px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__v-hUz:focus + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5,\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n  transform: translateY(-50%);\n  left: 15px;\n  font-size: 14px;\n  top: 0;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n  color: var(--foreground-3);\n}";
+var styles$q = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
+styleInject(css_248z$q);
 
 function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
     const [value, setValue] = React.useState(defaultValue);
@@ -9599,36 +9542,36 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
             element.focus();
     }, [autoFocus]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$m.container, style: { width } },
-            React__default["default"].createElement("textarea", { className: `${styles$m.input} ${title != undefined ? styles$m.with_title : styles$m.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$m.valid : styles$m.not_valid} ${available ? styles$m.available : styles$m.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
+        React__default["default"].createElement("div", { className: styles$q.container, style: { width } },
+            React__default["default"].createElement("textarea", { className: `${styles$q.input} ${title != undefined ? styles$q.with_title : styles$q.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$q.valid : styles$q.not_valid} ${available ? styles$q.available : styles$q.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
                     setValue(event.target.value);
                     if (onInput)
                         onInput(event);
                 } }),
-            React__default["default"].createElement("label", { htmlFor: "text", className: styles$m.label },
-                React__default["default"].createElement("span", { className: styles$m.label_text }, title)))));
+            React__default["default"].createElement("label", { htmlFor: "text", className: styles$q.label },
+                React__default["default"].createElement("span", { className: styles$q.label_text }, title)))));
 }
 
-var css_248z$l = ".styles-module_input__-GKhx {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__-GKhx:focus, .styles-module_input__-GKhx:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__--4rV {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_label__mGzwP {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__d0eMb {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__-GKhx:focus + .styles-module_label__mGzwP .styles-module_label_text__d0eMb,\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: #0063d4;\n}\n\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n  color: var(--foreground-3);\n}";
-var styles$l = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
-styleInject(css_248z$l);
+var css_248z$p = ".styles-module_input__-GKhx {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__-GKhx:focus, .styles-module_input__-GKhx:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__--4rV {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_label__mGzwP {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__d0eMb {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__-GKhx:focus + .styles-module_label__mGzwP .styles-module_label_text__d0eMb,\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: #0063d4;\n}\n\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n  color: var(--foreground-3);\n}";
+var styles$p = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
+styleInject(css_248z$p);
 
 function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true, defaultValue = "", onInput = () => { }, ...props }) {
     const [value, setValue] = React.useState(defaultValue);
     React.useEffect(() => setValue(defaultValue), [defaultValue]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$l.container, style: { width: width } },
-            React__default["default"].createElement("input", { className: `${styles$l.input} ${title != undefined ? styles$l.with_title : styles$l.without_title} ${value.length > 0 ? styles$l.valid : styles$l.not_valid} ${available ? styles$l.available : styles$l.not_available}`, name: name, placeholder: placeholder, type: "email", id: id, onInput: (event) => {
+        React__default["default"].createElement("div", { className: styles$p.container, style: { width: width } },
+            React__default["default"].createElement("input", { className: `${styles$p.input} ${title != undefined ? styles$p.with_title : styles$p.without_title} ${value.length > 0 ? styles$p.valid : styles$p.not_valid} ${available ? styles$p.available : styles$p.not_available}`, name: name, placeholder: placeholder, type: "email", id: id, onInput: (event) => {
                     setValue(event.target.value);
                     onInput(event);
                 }, ...props }),
-            React__default["default"].createElement("label", { htmlFor: "text", className: styles$l.label },
-                React__default["default"].createElement("span", { className: styles$l.label_text }, title)))));
+            React__default["default"].createElement("label", { htmlFor: "text", className: styles$p.label },
+                React__default["default"].createElement("span", { className: styles$p.label_text }, title)))));
 }
 
-var css_248z$k = ".styles-module_container__IXTeq {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_input__flMT5 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__flMT5:focus, .styles-module_input__flMT5:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n/* animated title */\n.styles-module_form__chEvQ {\n  position: relative;\n  flex: 1;\n  display: flex;\n}\n\n.styles-module_label__hflX9 {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__oXgFI {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__flMT5:focus + .styles-module_label__hflX9 .styles-module_label_text__oXgFI,\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n  color: var(--foreground-3);\n}";
-var styles$k = {"container":"styles-module_container__IXTeq","input":"styles-module_input__flMT5","form":"styles-module_form__chEvQ","label":"styles-module_label__hflX9","label_text":"styles-module_label_text__oXgFI","with_title":"styles-module_with_title__ubN0L","valid":"styles-module_valid__76xYu"};
-styleInject(css_248z$k);
+var css_248z$o = ".styles-module_container__IXTeq {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_input__flMT5 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__flMT5:focus, .styles-module_input__flMT5:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n/* animated title */\n.styles-module_form__chEvQ {\n  position: relative;\n  flex: 1;\n  display: flex;\n}\n\n.styles-module_label__hflX9 {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__oXgFI {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__flMT5:focus + .styles-module_label__hflX9 .styles-module_label_text__oXgFI,\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n  color: var(--foreground-3);\n}";
+var styles$o = {"container":"styles-module_container__IXTeq","input":"styles-module_input__flMT5","form":"styles-module_form__chEvQ","label":"styles-module_label__hflX9","label_text":"styles-module_label_text__oXgFI","with_title":"styles-module_with_title__ubN0L","valid":"styles-module_valid__76xYu"};
+styleInject(css_248z$o);
 
 function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
     const [firstName, setFirstName] = React.useState(defaultValue.firstName ? defaultValue.firstName : "");
@@ -9643,20 +9586,20 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
         onInputLastName(event);
         onInput("lastName", event);
     }
-    return (React__default["default"].createElement("div", { className: styles$k.container, style: { width: width } },
-        React__default["default"].createElement("div", { className: styles$k.form },
-            React__default["default"].createElement("input", { className: `${styles$k.input} ${title.firstName != undefined ? styles$k.with_title : styles$k.without_title} ${firstName.length > 0 ? styles$k.valid : styles$k.not_valid}`, name: "firstName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.firstName, defaultValue: defaultValue.firstName, onInput: onInput1 }),
-            React__default["default"].createElement("label", { htmlFor: "text", className: styles$k.label },
-                React__default["default"].createElement("span", { className: styles$k.label_text }, title.firstName))),
-        React__default["default"].createElement("div", { className: styles$k.form },
-            React__default["default"].createElement("input", { className: `${styles$k.input} ${title.lastName != undefined ? styles$k.with_title : styles$k.without_title} ${lastName.length > 0 ? styles$k.valid : styles$k.not_valid}`, name: "lastName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.lastName, defaultValue: defaultValue.lastName, onInput: onInput2 }),
-            React__default["default"].createElement("label", { htmlFor: "text", className: styles$k.label },
-                React__default["default"].createElement("span", { className: styles$k.label_text }, title.lastName)))));
+    return (React__default["default"].createElement("div", { className: styles$o.container, style: { width: width } },
+        React__default["default"].createElement("div", { className: styles$o.form },
+            React__default["default"].createElement("input", { className: `${styles$o.input} ${title.firstName != undefined ? styles$o.with_title : styles$o.without_title} ${firstName.length > 0 ? styles$o.valid : styles$o.not_valid}`, name: "firstName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.firstName, defaultValue: defaultValue.firstName, onInput: onInput1 }),
+            React__default["default"].createElement("label", { htmlFor: "text", className: styles$o.label },
+                React__default["default"].createElement("span", { className: styles$o.label_text }, title.firstName))),
+        React__default["default"].createElement("div", { className: styles$o.form },
+            React__default["default"].createElement("input", { className: `${styles$o.input} ${title.lastName != undefined ? styles$o.with_title : styles$o.without_title} ${lastName.length > 0 ? styles$o.valid : styles$o.not_valid}`, name: "lastName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.lastName, defaultValue: defaultValue.lastName, onInput: onInput2 }),
+            React__default["default"].createElement("label", { htmlFor: "text", className: styles$o.label },
+                React__default["default"].createElement("span", { className: styles$o.label_text }, title.lastName)))));
 }
 
-var css_248z$j = ".styles-module_container__Xk2HY {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_input__ReFFR {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1, .styles-module_input__ReFFR:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n.styles-module_input__ReFFR::-webkit-outer-spin-button, .styles-module_input__ReFFR::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.styles-module_input__ReFFR[type=number] {\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n/* animated title */\n.styles-module_container__Xk2HY {\n  position: relative;\n}\n\n.styles-module_label__4n2Ai {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__NsKJU {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__ReFFR:focus + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU,\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n  color: var(--foreground-3);\n}";
-var styles$j = {"container":"styles-module_container__Xk2HY","input":"styles-module_input__ReFFR","not_available":"styles-module_not_available__mZ5-1","label":"styles-module_label__4n2Ai","label_text":"styles-module_label_text__NsKJU","with_title":"styles-module_with_title__vMb1v","valid":"styles-module_valid__NyP0J"};
-styleInject(css_248z$j);
+var css_248z$n = ".styles-module_container__Xk2HY {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_input__ReFFR {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n  /* Chrome, Safari, Edge, Opera */\n  /* Firefox */\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1, .styles-module_input__ReFFR:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n.styles-module_input__ReFFR::-webkit-outer-spin-button, .styles-module_input__ReFFR::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.styles-module_input__ReFFR[type=number] {\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n/* animated title */\n.styles-module_container__Xk2HY {\n  position: relative;\n}\n\n.styles-module_label__4n2Ai {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__NsKJU {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__ReFFR:focus + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU,\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n  color: var(--foreground-3);\n}";
+var styles$n = {"container":"styles-module_container__Xk2HY","input":"styles-module_input__ReFFR","not_available":"styles-module_not_available__mZ5-1","label":"styles-module_label__4n2Ai","label_text":"styles-module_label_text__NsKJU","with_title":"styles-module_with_title__vMb1v","valid":"styles-module_valid__NyP0J"};
+styleInject(css_248z$n);
 
 function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
     const [value, setValue] = React.useState(defaultValue);
@@ -9665,37 +9608,37 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
             element.focus();
     }, [autoFocus]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$j.container, style: { width } },
-            React__default["default"].createElement("input", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
+        React__default["default"].createElement("div", { className: styles$n.container, style: { width } },
+            React__default["default"].createElement("input", { className: `${styles$n.input} ${title != undefined ? styles$n.with_title : styles$n.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$n.valid : styles$n.not_valid} ${available ? styles$n.available : styles$n.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
                     onInput(event);
                 } }),
-            React__default["default"].createElement("label", { htmlFor: "text", className: styles$j.label },
-                React__default["default"].createElement("span", { className: styles$j.label_text }, title)))));
+            React__default["default"].createElement("label", { htmlFor: "text", className: styles$n.label },
+                React__default["default"].createElement("span", { className: styles$n.label_text }, title)))));
 }
 
-var css_248z$i = "@keyframes styles-module_show__OLTZH {\n  from {\n    max-heigth: 0px;\n    height: 0px;\n  }\n}\n@keyframes styles-module_hide__LAgaY {\n  from {\n    max-heigth: 0px;\n    height: 0px;\n  }\n  to {\n    max-height: fit-content;\n  }\n}\n.styles-module_container__UdmOO {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 30px;\n  max-width: 100%;\n  border: 1px solid var(--border-2);\n  border-radius: 12px;\n  transition: all 0.2s ease-in-out;\n  box-sizing: border-box;\n}\n.styles-module_container__UdmOO .styles-module_forgot_label__EeN6a {\n  font-size: 12px;\n  color: var(--foreground-3);\n}\n.styles-module_container__UdmOO.styles-module_visible__QROqh {\n  max-height: 100px;\n  opacity: 1;\n}\n.styles-module_container__UdmOO.styles-module_hidden__hDKDO {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n}\n.styles-module_container__UdmOO:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_input__sC2fP {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-top-left-radius: 12px;\n  border-bottom-left-radius: 12px;\n  border-right: none;\n  outline: none;\n  border: none;\n  transition: all 0.2s ease;\n  flex: 1;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n\n.styles-module_hideButton__83mRI {\n  outline: none;\n  display: flex;\n  align-items: center;\n  padding: 10px;\n  border: none;\n  border-left: none;\n  background: none;\n  border-top-right-radius: 12px;\n  border-bottom-right-radius: 12px;\n  cursor: pointer;\n}\n.styles-module_hideButton__83mRI span {\n  color: var(--foreground-3);\n}\n\n/* animated title */\n.styles-module_form__m866x {\n  position: relative;\n  display: flex;\n}\n\n.styles-module_label__8PuaL {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__FwJ1F {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__sC2fP:focus + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F,\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n  color: var(--foreground-3);\n}";
-var styles$i = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
-styleInject(css_248z$i);
+var css_248z$m = "@keyframes styles-module_show__OLTZH {\n  from {\n    max-heigth: 0px;\n    height: 0px;\n  }\n}\n@keyframes styles-module_hide__LAgaY {\n  from {\n    max-heigth: 0px;\n    height: 0px;\n  }\n  to {\n    max-height: fit-content;\n  }\n}\n.styles-module_container__UdmOO {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 30px;\n  max-width: 100%;\n  border: 1px solid var(--border-2);\n  border-radius: 12px;\n  transition: all 0.2s ease-in-out;\n  box-sizing: border-box;\n}\n.styles-module_container__UdmOO .styles-module_forgot_label__EeN6a {\n  font-size: 12px;\n  color: var(--foreground-3);\n}\n.styles-module_container__UdmOO.styles-module_visible__QROqh {\n  max-height: 100px;\n  opacity: 1;\n}\n.styles-module_container__UdmOO.styles-module_hidden__hDKDO {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n}\n.styles-module_container__UdmOO:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_input__sC2fP {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-top-left-radius: 12px;\n  border-bottom-left-radius: 12px;\n  border-right: none;\n  outline: none;\n  border: none;\n  transition: all 0.2s ease;\n  flex: 1;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n\n.styles-module_hideButton__83mRI {\n  outline: none;\n  display: flex;\n  align-items: center;\n  padding: 10px;\n  border: none;\n  border-left: none;\n  background: none;\n  border-top-right-radius: 12px;\n  border-bottom-right-radius: 12px;\n  cursor: pointer;\n}\n.styles-module_hideButton__83mRI span {\n  color: var(--foreground-3);\n}\n\n/* animated title */\n.styles-module_form__m866x {\n  position: relative;\n  display: flex;\n}\n\n.styles-module_label__8PuaL {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__FwJ1F {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__sC2fP:focus + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F,\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n  color: var(--foreground-3);\n}";
+var styles$m = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
+styleInject(css_248z$m);
 
 function InputPassword({ id, placeholder = "", title = "Passwort", name = 'password', isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
     const [value, setValue] = React.useState("");
     const [hidePassword, setHidePassword] = React.useState(true);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: `${styles$i.container} ${isVisible ? styles$i.visible : styles$i.hidden}`, style: { width: width } },
-            React__default["default"].createElement("div", { className: styles$i.form },
-                React__default["default"].createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid}`, name: name, id: id, minLength: minLength, autoComplete: autoComplete, placeholder: placeholder, type: hidePassword ? "password" : "text", onInput: (event) => setValue(event.target.value) }),
-                React__default["default"].createElement("label", { htmlFor: "text", className: styles$i.label },
-                    React__default["default"].createElement("span", { className: styles$i.label_text }, title)),
-                React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$i.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
+        React__default["default"].createElement("div", { className: `${styles$m.container} ${isVisible ? styles$m.visible : styles$m.hidden}`, style: { width: width } },
+            React__default["default"].createElement("div", { className: styles$m.form },
+                React__default["default"].createElement("input", { className: `${styles$m.input} ${title != undefined ? styles$m.with_title : styles$m.without_title} ${value.length > 0 ? styles$m.valid : styles$m.not_valid}`, name: name, id: id, minLength: minLength, autoComplete: autoComplete, placeholder: placeholder, type: hidePassword ? "password" : "text", onInput: (event) => setValue(event.target.value) }),
+                React__default["default"].createElement("label", { htmlFor: "text", className: styles$m.label },
+                    React__default["default"].createElement("span", { className: styles$m.label_text }, title)),
+                React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$m.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
                     React__default["default"].createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
             forgotLink &&
-                React__default["default"].createElement("div", { className: styles$i.forgot_container }, forgotLink))));
+                React__default["default"].createElement("div", { className: styles$m.forgot_container }, forgotLink))));
 }
 
-var css_248z$h = ".styles-module_container__--NO0 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n  background: transparent;\n  color: var(--primary-1);\n  border: none;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 10px;\n}\n\n.styles-module_input__84v36 {\n  padding: 14px 10px;\n  width: 30px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 400;\n  background: var(--background-1);\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n  margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n  letter-spacing: 0px !important;\n}\n\n@media (max-width: 450px) {\n  .styles-module_input__84v36 {\n    width: 25px;\n    font-size: 16px;\n  }\n  .styles-module_input_wrapper__LPIk1 {\n    gap: 7px;\n  }\n  .styles-module_input__84v36:nth-child(3) {\n    margin-right: 12px;\n  }\n}";
-var styles$h = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
-styleInject(css_248z$h);
+var css_248z$l = ".styles-module_container__--NO0 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n  background: transparent;\n  color: var(--primary-1);\n  border: none;\n  font-size: 14px;\n  cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  gap: 10px;\n}\n\n.styles-module_input__84v36 {\n  padding: 14px 10px;\n  width: 30px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  text-align: center;\n  font-size: 18px;\n  font-weight: 400;\n  background: var(--background-1);\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n  margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n  letter-spacing: 0px !important;\n}\n\n@media (max-width: 450px) {\n  .styles-module_input__84v36 {\n    width: 25px;\n    font-size: 16px;\n  }\n  .styles-module_input_wrapper__LPIk1 {\n    gap: 7px;\n  }\n  .styles-module_input__84v36:nth-child(3) {\n    margin-right: 12px;\n  }\n}";
+var styles$l = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
+styleInject(css_248z$l);
 
 function InputPin({ name, length, onFinished = () => { } }) {
     const [state, setState] = React.useState({});
@@ -9761,20 +9704,20 @@ function InputPin({ name, length, onFinished = () => { } }) {
                 ref.current.value = "";
         });
     }
-    return (React__default["default"].createElement("div", { className: styles$h.container },
+    return (React__default["default"].createElement("div", { className: styles$l.container },
         React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
-        React__default["default"].createElement("div", { className: styles$h.input_wrapper }, [...Array(length)].map((value, i) => {
+        React__default["default"].createElement("div", { className: styles$l.input_wrapper }, [...Array(length)].map((value, i) => {
             if (i == 0) {
-                return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$h.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
+                return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$l.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
             }
-            return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$h.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
+            return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$l.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
         })),
         React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
 }
 
-var css_248z$g = ".styles-module_container__zcXGF {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_input__Tpth8 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n  position: relative;\n}\n\n.styles-module_label__appHO {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__-sKjY {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  color: var(--foreground-3);\n}";
-var styles$g = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
-styleInject(css_248z$g);
+var css_248z$k = ".styles-module_container__zcXGF {\n  display: flex;\n  width: 100%;\n  margin-bottom: 20px;\n  max-width: 100%;\n}\n\n.styles-module_input__Tpth8 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  flex: 1;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n  border: var(--invalid-border);\n  box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n  position: relative;\n}\n\n.styles-module_label__appHO {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__-sKjY {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n  color: var(--foreground-3);\n}";
+var styles$k = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
+styleInject(css_248z$k);
 
 function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = () => { } }) {
     const [value, setValue] = React.useState(defaultValue);
@@ -9784,129 +9727,29 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
             element.focus();
     }, [autoFocus]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$g.container, style: { width, marginBottom } },
-            React__default["default"].createElement("input", { className: `${styles$g.input} ${title != undefined ? styles$g.with_title : styles$g.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$g.valid : styles$g.not_valid} ${available ? styles$g.available : styles$g.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
+        React__default["default"].createElement("div", { className: styles$k.container, style: { width, marginBottom } },
+            React__default["default"].createElement("input", { className: `${styles$k.input} ${title != undefined ? styles$k.with_title : styles$k.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$k.valid : styles$k.not_valid} ${available ? styles$k.available : styles$k.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
                     setValue(event.target.value);
                     onInput(event);
                 } }),
-            React__default["default"].createElement("label", { htmlFor: "text", className: styles$g.label },
-                React__default["default"].createElement("span", { className: styles$g.label_text }, title)))));
-}
-
-var css_248z$f = ".styles-module_container__kkDKN {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: \"Playfair\", serif;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  padding: 6px;\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n  border: 1px solid var(--border-1);\n  padding: 0px 20px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_select_container__nqgUF .styles-module_select__27FqK {\n  border: none;\n  outline: none;\n  background: none;\n  cursor: pointer;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n  padding: 0px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  background: var(--background-1);\n  border-color: var(--border-1);\n  height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n  font-size: 16px;\n  text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}";
-var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","select":"styles-module_select__27FqK","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
-styleInject(css_248z$f);
-
-const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
-    const [selected, setSelected] = React.useState(defaultValue);
-    React.useEffect(() => setSelected(defaultValue), [defaultValue]);
-    const onDropdownChange = (event) => {
-        onChangeDropdown(selected, event.target.value);
-        setSelected(event.target.value);
-    };
-    const onInputChange = (event) => {
-        onChangeInput(Number(event.target.value));
-    };
-    return (React__default["default"].createElement("div", { className: styles$f.container },
-        React__default["default"].createElement("div", { className: styles$f.select_container },
-            React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
-            React__default["default"].createElement("select", { className: styles$f.select, onChange: onDropdownChange, value: selected },
-                React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
-                options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))),
-        React__default["default"].createElement("div", { className: styles$f.input_container },
-            React__default["default"].createElement("input", { className: styles$f.input, type: "number", onInput: onInputChange, ...props }),
-            React__default["default"].createElement("span", { className: styles$f.unit_label }, unit))));
-};
-
-var css_248z$e = ".styles-module_container__c0sGu {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  background: var(--background-1);\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 12px;\n  transition: 0.2s ease-in-out;\n  border: 2px solid transparent;\n}\n.styles-module_container__c0sGu:hover {\n  background: var(--background-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC {\n  background: var(--primary-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC span {\n  color: var(--primary-1);\n}\n.styles-module_container__c0sGu span {\n  user-select: none;\n  font-weight: 300;\n}";
-var styles$e = {"container":"styles-module_container__c0sGu","active":"styles-module_active__naxTC"};
-styleInject(css_248z$e);
-
-const ToggleBox = ({ defaultActive = false, activeIcon = "lock", inactiveIcon = "lock", onSwitch = () => { } }) => {
-    return (React__default["default"].createElement("div", { className: [styles$e.container, defaultActive ? styles$e.active : styles$e.not_active].join(" "), onClick: () => onSwitch(!defaultActive) },
-        React__default["default"].createElement(SvgIcon, { iconName: defaultActive ? activeIcon : inactiveIcon })));
-};
-
-var css_248z$d = ".styles-module_container__arGnP {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  font-family: var(--font-1);\n  border-radius: 12px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n}\n.styles-module_container__arGnP.styles-module_active__ngR3w {\n  background: var(--primary-2);\n}\n.styles-module_container__arGnP.styles-module_not_active__85hg4 .styles-module_unit_label__KXhNy {\n  color: var(--foreground-3);\n}\n.styles-module_container__arGnP.styles-module_number__tQq8W {\n  flex-direction: row;\n}\n.styles-module_container__arGnP.styles-module_range__sCNik {\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n}\n\n.styles-module_label_container__hGRIY {\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n}\n.styles-module_label_container__hGRIY.styles-module_range__sCNik {\n  width: 100%;\n  flex: 1;\n  padding-top: 10px;\n}\n\n.styles-module_input__j1DTo::-webkit-outer-spin-button,\n.styles-module_input__j1DTo::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_value_container__cqrEX {\n  display: flex;\n  gap: 6px;\n}\n.styles-module_value_container__cqrEX .styles-module_label__FP5Pa {\n  font-family: var(--font-1);\n  user-select: none;\n  -webkit-user-select: none;\n  font-size: 18px;\n}\n.styles-module_value_container__cqrEX .styles-module_label__FP5Pa,\n.styles-module_value_container__cqrEX .styles-module_value__sLYHK {\n  transition: 0.2s ease-in-out;\n}\n.styles-module_value_container__cqrEX.styles-module_range__sCNik {\n  flex: 1;\n  align-items: flex-end;\n  padding-right: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_range__sCNik .styles-module_label__FP5Pa {\n  font-size: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_range__sCNik .styles-module_value__sLYHK {\n  font-size: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_number__tQq8W .styles-module_label__FP5Pa {\n  font-size: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_number__tQq8W .styles-module_value__sLYHK {\n  max-height: 0;\n  overflow: hidden;\n}\n\n.styles-module_input_container__IgbK5 {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n}\n.styles-module_input_container__IgbK5 .styles-module_unit_label__KXhNy {\n  font-size: 20px;\n  text-align: right;\n}\n.styles-module_input_container__IgbK5.styles-module_number__tQq8W {\n  border-color: var(--primary-2);\n  background: var(--background-1);\n  cursor: pointer;\n}\n.styles-module_input_container__IgbK5.styles-module_number__tQq8W:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input_container__IgbK5.styles-module_range__sCNik {\n  padding: 10px;\n  width: calc(100% - 20px);\n}\n.styles-module_input_container__IgbK5.styles-module_range__sCNik .styles-module_unit_label__KXhNy {\n  max-width: 0;\n  overflow: hidden;\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number].styles-module_not_available__M038X,\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number]:invalid {\n  color: #e50000;\n}\n\n.styles-module_label__FP5Pa {\n  font-family: var(--font-1);\n  user-select: none;\n  -webkit-user-select: none;\n  cursor: pointer;\n}";
-var styles$d = {"container":"styles-module_container__arGnP","active":"styles-module_active__ngR3w","not_active":"styles-module_not_active__85hg4","unit_label":"styles-module_unit_label__KXhNy","number":"styles-module_number__tQq8W","range":"styles-module_range__sCNik","label_container":"styles-module_label_container__hGRIY","input":"styles-module_input__j1DTo","value_container":"styles-module_value_container__cqrEX","label":"styles-module_label__FP5Pa","value":"styles-module_value__sLYHK","input_container":"styles-module_input_container__IgbK5","not_available":"styles-module_not_available__M038X"};
-styleInject(css_248z$d);
-
-function NumberField({ placeholder = "", type = "number", active = false, onChangeActive = () => { }, enableLocked = false, locked, onChangeLocked = () => { }, title = "Zahl", unit = "cm", name, defaultValue = 1, onUpdate = () => { }, disabled, min = 0, max = 10, validate = () => true, ...props }) {
-    const [value, setValue] = React.useState(defaultValue);
-    React.useEffect(() => { setValue(defaultValue); }, [defaultValue]);
-    const onInput = (event) => {
-        const value = Number(event.target.value);
-        if (validate(name, value)) {
-            setValue(value);
-            onUpdate(value);
-        }
-    };
-    return (React__default["default"].createElement("div", { className: [styles$d.container, active ? styles$d.active : styles$d.not_active, styles$d[type]].join(" ") },
-        React__default["default"].createElement("div", { className: [styles$d.label_container, styles$d[type]].join(" ") },
-            React__default["default"].createElement(ToggleBox, { activeIcon: 'check', inactiveIcon: 'add', defaultActive: active, onSwitch: (active) => onChangeActive(active) }),
-            enableLocked &&
-                React__default["default"].createElement(ToggleBox, { activeIcon: 'lock', inactiveIcon: 'lock_open', defaultActive: locked, onSwitch: (locked) => onChangeLocked(locked) }),
-            React__default["default"].createElement("div", { className: [styles$d.value_container, styles$d[type]].join(" ") },
-                React__default["default"].createElement("span", { className: styles$d.label }, title),
-                React__default["default"].createElement("span", { className: styles$d.value }, `${value} ${unit}`))),
-        React__default["default"].createElement("div", { className: [styles$d.input_container, styles$d[type]].join(" ") },
-            React__default["default"].createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${String(value).length > 0 ? styles$d.valid : styles$d.not_valid} `, name: name, placeholder: placeholder, type: type, onInput: onInput, disabled: disabled, value: value, max: max, min: min, ...props }),
-            React__default["default"].createElement("span", { className: styles$d.unit_label }, unit))));
-}
-
-var css_248z$c = ".styles-module_box__Z0iod {\n  background: var(--background-2);\n  width: 400px;\n  max-width: 100%;\n  border-radius: 22px;\n  border: 1px solid var(--border-2);\n  display: flex;\n  flex-direction: row;\n  padding: 22px;\n  gap: 18px;\n  cursor: pointer;\n  margin-bottom: 20px;\n  transition: 0.2s ease;\n  color: var(--foreground-1);\n}\n.styles-module_box__Z0iod:hover {\n  background-color: var(--background-1);\n  transform: scale(1.01);\n}\n.styles-module_box__Z0iod:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_box__Z0iod .styles-module_left_side__8ObGs {\n  width: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 5px;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D {\n  flex: 1;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n  margin: 0;\n  text-align: left;\n  font-size: 1.3rem;\n  margin-bottom: 12px;\n  margin-top: 5px;\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n  color: var(--foreground-2);\n  margin: 0;\n  text-align: left;\n  font-size: 1.1rem;\n  line-height: 1.6;\n}\n\n@media (max-width: 550px) {\n  .styles-module_box__Z0iod {\n    width: auto;\n  }\n  .styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n    font-size: 1.2rem;\n  }\n  .styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n    font-size: 1rem;\n  }\n}";
-var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
-styleInject(css_248z$c);
-
-function OptionField({ id, headline, description, iconName }) {
-    return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$c.box, id: id },
-            React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
-            React__default["default"].createElement("div", { className: styles$c.right_side },
-                React__default["default"].createElement("h4", null, headline),
-                React__default["default"].createElement("p", null, description)))));
-}
-
-var css_248z$b = ".styles-module_container__r0YH2 {\n  background: var(--background-1);\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: var(--foreground-1);\n  border: 1px solid var(--border-2);\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n  cursor: pointer;\n}\n.styles-module_container__r0YH2:hover {\n  background: var(--background-2);\n  border-color: var(--border-3);\n}\n.styles-module_container__r0YH2 h3 {\n  font-weight: 500;\n  margin: 0;\n  text-align: center;\n  font-family: var(--font-1);\n}\n.styles-module_container__r0YH2:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_container__r0YH2.styles-module_preselected__zEukD {\n  border: 1px solid var(--foreground-1);\n}";
-var styles$b = {"container":"styles-module_container__r0YH2","preselected":"styles-module_preselected__zEukD"};
-styleInject(css_248z$b);
-
-function OptionField2({ title, iconName, onClick, preselected = false }) {
-    function onClickDiv(event) {
-        event.preventDefault();
-        if (onClick)
-            onClick(event);
-    }
-    return (React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" "), onClick: onClickDiv },
-        iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
-        React__default["default"].createElement("h3", null, title)));
-}
-
-var css_248z$a = ".styles-module_popover__3ZbOL {\n  overflow-y: scroll;\n  overflow-x: hidden;\n  margin: 0 auto;\n  margin-top: 30px;\n  z-index: 10000;\n  position: fixed;\n  border-top-left-radius: 30px;\n  border-top-right-radius: 30px;\n  transform: translateY(100%);\n  width: 700px;\n  max-width: 100%;\n  height: 100%;\n  left: 50%;\n  margin-left: -385px;\n  transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);\n  background: var(--background-1);\n  box-shadow: var(--border-3) 0px 1px 2px 0px, var(--border-3) 0px 1px 3px 1px;\n  padding: 35px;\n  padding-top: 110px;\n  top: 0;\n}\n.styles-module_popover__3ZbOL.styles-module_active__-ZVbh {\n  transform: translateY(0px);\n}\n.styles-module_popover__3ZbOL h1 {\n  margin: 10px 0px;\n  font-weight: 900;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.styles-module_popover__3ZbOL h4 {\n  font-size: 20px;\n  margin: 10px 0px;\n  color: var(--foreground-3);\n  font-weight: 400;\n}\n.styles-module_popover__3ZbOL p {\n  line-height: 2;\n  margin: 20px 0px;\n}\n.styles-module_popover__3ZbOL img {\n  object-fit: contain;\n  border-radius: 10px;\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU {\n  width: 40px;\n  height: 40px;\n  border-radius: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--background-4);\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  position: absolute;\n  top: 35px;\n  right: 35px;\n  color: var(--foreground-2);\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU:hover {\n  filter: brightness(0.9);\n}\n\n@media (max-width: 800px) {\n  .styles-module_popover__3ZbOL {\n    width: calc(100% - 40px);\n    left: 0;\n    margin-left: 0;\n    padding: 20px;\n    padding-top: 110px;\n  }\n}";
-var styles$a = {"popover":"styles-module_popover__3ZbOL","active":"styles-module_active__-ZVbh","close_button":"styles-module_close_button__5RYuU"};
-styleInject(css_248z$a);
-
-function Popover({ children, active, onClose }) {
-    return (React__default["default"].createElement("div", { className: [styles$a.popover, active ? styles$a.active : styles$a.closed].join(" ") },
-        children,
-        React__default["default"].createElement("div", { className: styles$a.close_button, onClick: onClose },
-            React__default["default"].createElement(SvgIcon, { iconName: "close" }))));
+            React__default["default"].createElement("label", { htmlFor: "text", className: styles$k.label },
+                React__default["default"].createElement("span", { className: styles$k.label_text }, title)))));
 }
 
-var css_248z$9 = ".styles-module_container__u4q5n {\n  margin-bottom: 50px;\n  width: 400px;\n  max-width: 100%;\n}\n\n.styles-module_background__jt-ry {\n  background: var(--border-2);\n  height: 3px;\n  position: relative;\n}\n\n@keyframes styles-module_fadeIn__ytfsX {\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n}\n@keyframes styles-module_moveIn__E7c-3 {\n  from {\n    left: 0;\n  }\n  to {\n    left: 100%;\n  }\n}\n.styles-module_progress__Zj-B7 {\n  left: 0;\n  top: 0;\n  height: 3px;\n  position: relative;\n}\n.styles-module_progress__Zj-B7::before {\n  height: 3px;\n  content: \"\";\n  left: 0;\n  top: 0;\n  background: var(--foreground-1);\n  position: absolute;\n  animation: styles-module_fadeIn__ytfsX 2s ease forwards;\n}\n.styles-module_progress__Zj-B7.styles-module_enableDot__CJC4D::after {\n  content: \"\";\n  height: 10px;\n  width: 10px;\n  background: var(--foreground-1);\n  border-radius: 5px;\n  left: 100%;\n  bottom: -3.5px;\n  position: absolute;\n  animation: styles-module_moveIn__E7c-3 2s ease forwards;\n}";
-var styles$9 = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7","fadeIn":"styles-module_fadeIn__ytfsX","enableDot":"styles-module_enableDot__CJC4D","moveIn":"styles-module_moveIn__E7c-3"};
-styleInject(css_248z$9);
+var css_248z$j = ".styles-module_container__u4q5n {\n  margin-bottom: 50px;\n  width: 400px;\n  max-width: 100%;\n}\n\n.styles-module_background__jt-ry {\n  background: var(--border-2);\n  height: 3px;\n  position: relative;\n}\n\n@keyframes styles-module_fadeIn__ytfsX {\n  from {\n    width: 0;\n  }\n  to {\n    width: 100%;\n  }\n}\n@keyframes styles-module_moveIn__E7c-3 {\n  from {\n    left: 0;\n  }\n  to {\n    left: 100%;\n  }\n}\n.styles-module_progress__Zj-B7 {\n  left: 0;\n  top: 0;\n  height: 3px;\n  position: relative;\n}\n.styles-module_progress__Zj-B7::before {\n  height: 3px;\n  content: \"\";\n  left: 0;\n  top: 0;\n  background: var(--foreground-1);\n  position: absolute;\n  animation: styles-module_fadeIn__ytfsX 2s ease forwards;\n}\n.styles-module_progress__Zj-B7.styles-module_enableDot__CJC4D::after {\n  content: \"\";\n  height: 10px;\n  width: 10px;\n  background: var(--foreground-1);\n  border-radius: 5px;\n  left: 100%;\n  bottom: -3.5px;\n  position: absolute;\n  animation: styles-module_moveIn__E7c-3 2s ease forwards;\n}";
+var styles$j = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7","fadeIn":"styles-module_fadeIn__ytfsX","enableDot":"styles-module_enableDot__CJC4D","moveIn":"styles-module_moveIn__E7c-3"};
+styleInject(css_248z$j);
 
 function ProgressBar({ length, progress, enableDot = false }) {
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$9.container },
-            React__default["default"].createElement("div", { className: styles$9.background },
-                React__default["default"].createElement("div", { className: [styles$9.progress, enableDot ? styles$9.enableDot : styles$9.disableDot].join(" "), style: { width: `${progress / length * 100}%` } })))));
+        React__default["default"].createElement("div", { className: styles$j.container },
+            React__default["default"].createElement("div", { className: styles$j.background },
+                React__default["default"].createElement("div", { className: [styles$j.progress, enableDot ? styles$j.enableDot : styles$j.disableDot].join(" "), style: { width: `${progress / length * 100}%` } })))));
 }
 
-var css_248z$8 = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw [type=radio] + label::after {\n  width: 10px;\n  height: 10px;\n  border-radius: 10px;\n  display: block;\n  content: \"\";\n  z-index: 6;\n  position: absolute;\n  left: 4.5px;\n  top: 4.5px;\n  background-color: var(--background-1);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw .styles-module_option__nijjM {\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-1);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  bottom: -1.5px;\n  left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n  color: var(--background-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--background-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::after {\n  background-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  border-color: var(--primary-2);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::after {\n  background: var(--primary-2);\n}";
-var styles$8 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
-styleInject(css_248z$8);
+var css_248z$i = ".styles-module_container__Grkzw {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  color: var(--foreground-3);\n  margin-bottom: 20px;\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] {\n  position: relative;\n  left: 15px;\n  top: -4px;\n  z-index: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: pointer;\n  margin-left: -3.5px;\n}\n.styles-module_container__Grkzw [type=radio] + label {\n  position: absolute;\n  cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n  width: 15px;\n  height: 15px;\n  border-radius: 20px;\n  border: 2px solid var(--border-2);\n  display: block;\n  content: \"\";\n  float: left;\n  margin-right: 8px;\n  z-index: 5;\n  position: relative;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw [type=radio] + label::after {\n  width: 10px;\n  height: 10px;\n  border-radius: 10px;\n  display: block;\n  content: \"\";\n  z-index: 6;\n  position: absolute;\n  left: 4.5px;\n  top: 4.5px;\n  background-color: var(--background-1);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw .styles-module_option__nijjM {\n  position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n  position: absolute;\n  opacity: 1;\n  color: var(--background-1);\n  z-index: 100;\n  user-select: none;\n  pointer-events: none;\n  -webkit-user-select: none;\n  font-weight: 500;\n  bottom: -1.5px;\n  left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n  color: var(--background-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n  background-color: var(--background-1);\n  border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::after {\n  background-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n  border-color: var(--primary-2);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::after {\n  background: var(--primary-2);\n}";
+var styles$i = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
+styleInject(css_248z$i);
 
 function RadioButtons({ options, group, selected, onInput = () => { }, width = "100%" }) {
     const [selectedOption, setSelected] = React.useState(selected);
@@ -9915,7 +9758,7 @@ function RadioButtons({ options, group, selected, onInput = () => { }, width = "
         setSelected(event.target.value);
         onInput(event);
     }
-    return (React__default["default"].createElement("div", { className: styles$8.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$8.option, key: option.name },
+    return (React__default["default"].createElement("div", { className: styles$i.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$i.option, key: option.name },
         selectedOption == option.name ?
             React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
             :
@@ -9923,9 +9766,9 @@ function RadioButtons({ options, group, selected, onInput = () => { }, width = "
         React__default["default"].createElement("label", { htmlFor: option.name }, option.text)))));
 }
 
-var css_248z$7 = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe.styles-module_back__j0HkC {\n  display: block;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\n  background: none;\n  padding: none;\n  border: none;\n  width: 40px;\n  height: 40px;\n  transition: 0.2s;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n  font-family: var(--font-1);\n  font-weight: 500;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe .styles-module_label__bdjMh {\n  display: none;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_label__bdjMh {\n  display: block;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}\n\n@media (max-width: 800px) {\n  .styles-module_container__RhsQe.styles-module_forward__Vjtye {\n    flex-basis: auto;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC {\n    flex-basis: 100%;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_label__bdjMh {\n    display: block;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0 {\n    gap: 5px;\n    width: auto;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0:hover {\n    background: none;\n  }\n}";
-var styles$7 = {"container":"styles-module_container__RhsQe","back":"styles-module_back__j0HkC","button":"styles-module_button__HuX-0","label":"styles-module_label__bdjMh","middle":"styles-module_middle__xg7RF","forward":"styles-module_forward__Vjtye"};
-styleInject(css_248z$7);
+var css_248z$h = ".styles-module_container__RhsQe {\n  margin-right: 8px;\n}\n.styles-module_container__RhsQe.styles-module_back__j0HkC {\n  display: block;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\n  background: none;\n  padding: none;\n  border: none;\n  width: 40px;\n  height: 40px;\n  transition: 0.2s;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 20px;\n  font-family: var(--font-1);\n  font-weight: 500;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n  color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n  background: var(--background-1);\n}\n.styles-module_container__RhsQe .styles-module_label__bdjMh {\n  display: none;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_label__bdjMh {\n  display: block;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n  flex-direction: row;\n  gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n  background: none;\n}\n\n@media (max-width: 800px) {\n  .styles-module_container__RhsQe.styles-module_forward__Vjtye {\n    flex-basis: auto;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC {\n    flex-basis: 100%;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_label__bdjMh {\n    display: block;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0 {\n    gap: 5px;\n    width: auto;\n  }\n  .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0:hover {\n    background: none;\n  }\n}";
+var styles$h = {"container":"styles-module_container__RhsQe","back":"styles-module_back__j0HkC","button":"styles-module_button__HuX-0","label":"styles-module_label__bdjMh","middle":"styles-module_middle__xg7RF","forward":"styles-module_forward__Vjtye"};
+styleInject(css_248z$h);
 
 function RedirectButton({ id, type = "forward", onClick = () => { }, text = "" }) {
     function onClickButton(event) {
@@ -9940,43 +9783,19 @@ function RedirectButton({ id, type = "forward", onClick = () => { }, text = "" }
         }
     };
     return (React__default["default"].createElement("div", { className: [
-            styles$7.container,
-            type === "forward" ? styles$7.forward : styles$7.not_forward,
-            type === "back" ? styles$7.back : styles$7.not_back,
-            type === "middle" ? styles$7.middle : styles$7.not_middle
+            styles$h.container,
+            type === "forward" ? styles$h.forward : styles$h.not_forward,
+            type === "back" ? styles$h.back : styles$h.not_back,
+            type === "middle" ? styles$h.middle : styles$h.not_middle
         ].join(" ") },
-        React__default["default"].createElement("button", { onClick: onClickButton, className: styles$7.button, id: id },
+        React__default["default"].createElement("button", { onClick: onClickButton, className: styles$h.button, id: id },
             React__default["default"].createElement(SvgIcon, { iconName: getIcon() }),
-            React__default["default"].createElement("span", { className: styles$7.label }, type == "middle" ? "Zurück" : text))));
+            React__default["default"].createElement("span", { className: styles$h.label }, type == "middle" ? "Zurück" : text))));
 }
 
-var css_248z$6 = ".styles-module_container__VreeH {\n  margin-bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n  padding: 6px 12px;\n  background: var(--background-1);\n  border-radius: 20px;\n  display: flex;\n  flex-direction: row;\n  gap: 5px;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  font-size: 14px;\n  -webkit-user-select: none;\n  color: var(--foreground-2);\n  transition: 0.2s ease-in-out;\n  border: 1px solid transparent;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:not(.styles-module_selected__sArTD):active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n  color: var(--primary-1);\n}";
-var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
-styleInject(css_248z$6);
-
-function SearchChips({ items, onChange, chipsVisible = 9 }) {
-    const [showAll, setShowAll] = React.useState(false);
-    const [chips, setChips] = React.useState(items);
-    function onClick(item, index) {
-        const newChips = [...chips];
-        newChips[index] = { ...item, selected: !item.selected };
-        setChips(newChips);
-        if (onChange)
-            onChange(newChips);
-    }
-    return (React__default["default"].createElement("div", { className: styles$6.container },
-        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
-            React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
-            item.title)),
-        chipsVisible < chips.length && (showAll ?
-            React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
-            :
-                React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
-}
-
-var css_248z$5 = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: var(--primary-2);\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: var(--primary-1);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n  display: none;\n  position: absolute;\n  top: 60px;\n  background: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid var(--border-3);\n  z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n  display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n  border-bottom: 1px solid var(--border-3);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n  padding: 35px 0px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n  margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n  color: var(--foreground-3);\n  padding: 0px 30px;\n  line-height: 1.5;\n  text-align: center;\n  margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  display: flex;\n  flex-direction: row;\n  padding: 10px 20px;\n  align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n  flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n  padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n  padding: 14px 20px;\n  font-size: 16px;\n  width: 300px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n  display: block;\n}\n\ninput[type=search]::-webkit-search-decoration,\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-results-button,\ninput[type=search]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_label__A41g9 {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__NQHTC {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: var(--foreground-3);\n}";
-var styles$5 = {"container":"styles-module_container__k4Z26","suggestions_container":"styles-module_suggestions_container__pceQ-","results_container":"styles-module_results_container__OY4Om","error":"styles-module_error__2Ov4X","input":"styles-module_input__wOJmG","form":"styles-module_form__mWTCu","focus":"styles-module_focus__-6H1f","label":"styles-module_label__A41g9","label_text":"styles-module_label_text__NQHTC","with_title":"styles-module_with_title__rnN-t","valid":"styles-module_valid__AAK-6"};
-styleInject(css_248z$5);
+var css_248z$g = ".styles-module_container__k4Z26 {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  position: relative;\n}\n.styles-module_container__k4Z26 button {\n  background: var(--primary-2);\n  padding: 0px 18px;\n  border: none;\n  font-size: 14px;\n  border-radius: 10px;\n  cursor: pointer;\n  color: var(--primary-1);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n  display: none;\n  position: absolute;\n  top: 60px;\n  background: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  width: 100%;\n  border-radius: 14px;\n  border: 1px solid var(--border-3);\n  z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n  display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n  border-bottom: 1px solid var(--border-3);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n  padding: 35px 0px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n  margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n  color: var(--foreground-3);\n  padding: 0px 30px;\n  line-height: 1.5;\n  text-align: center;\n  margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n  display: flex;\n  flex-direction: row;\n  padding: 10px 20px;\n  align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n  flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n  padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n  padding: 14px 20px;\n  font-size: 16px;\n  width: 300px;\n  border-radius: 12px;\n  border: 1px solid var(--border-2);\n  outline: none;\n  transition: 0.2s ease;\n  width: 100%;\n  background: var(--background-1);\n  color: var(--foreground-1);\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n  display: block;\n}\n\ninput[type=search]::-webkit-search-decoration,\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-results-button,\ninput[type=search]::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_label__A41g9 {\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  font-family: var(--font-1);\n}\n\n.styles-module_label_text__NQHTC {\n  position: absolute;\n  bottom: 16px;\n  left: 12px;\n  transition: 0.3s ease;\n  font-size: 16px;\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n  opacity: initial;\n  background: var(--background-1);\n  color: var(--foreground-3);\n  padding-right: 8px;\n  padding-left: 8px;\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t::placeholder {\n  opacity: 0;\n  transition: opacity 0.3s ease;\n  color: var(--foreground-3);\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n  opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  transform: translateY(-150%);\n  left: 15px;\n  font-size: 14px;\n  background: var(--background-2);\n  color: var(--primary-1);\n}\n\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n  color: var(--foreground-3);\n}";
+var styles$g = {"container":"styles-module_container__k4Z26","suggestions_container":"styles-module_suggestions_container__pceQ-","results_container":"styles-module_results_container__OY4Om","error":"styles-module_error__2Ov4X","input":"styles-module_input__wOJmG","form":"styles-module_form__mWTCu","focus":"styles-module_focus__-6H1f","label":"styles-module_label__A41g9","label_text":"styles-module_label_text__NQHTC","with_title":"styles-module_with_title__rnN-t","valid":"styles-module_valid__AAK-6"};
+styleInject(css_248z$g);
 
 function Searchbar({ placeholder, title = "Suchen", showNoResults = false, errorTitle = "Keine Ergebnisse gefunden", errorMessage = "", errorButton = "", helpTitle = "", helpMessage = "", width = "100%", marginBottom = 25, marginTop = 30, errorAction = () => { }, onInput = () => { }, onClickResult = () => { }, withButton = false, buttonText = "Suchen", suggestions = [], autoFocus = false, results = [] }) {
     const [value, setValue] = React.useState("");
@@ -10005,35 +9824,232 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
             element.focus();
     }, [autoFocus]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement("div", { className: styles$5.container, style: { marginTop: marginTop, marginBottom: marginBottom, width: width } },
-            React__default["default"].createElement("div", { className: `${styles$5.form} ${inputFocused ? styles$5.focus : styles$5.not_focused}` },
-                React__default["default"].createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$5.input} ${title != undefined ? styles$5.with_title : styles$5.without_title} ${value.length > 0 ? styles$5.valid : styles$5.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
-                React__default["default"].createElement("label", { htmlFor: "text", className: styles$5.label },
-                    React__default["default"].createElement("span", { className: styles$5.label_text }, title))),
+        React__default["default"].createElement("div", { className: styles$g.container, style: { marginTop: marginTop, marginBottom: marginBottom, width: width } },
+            React__default["default"].createElement("div", { className: `${styles$g.form} ${inputFocused ? styles$g.focus : styles$g.not_focused}` },
+                React__default["default"].createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$g.input} ${title != undefined ? styles$g.with_title : styles$g.without_title} ${value.length > 0 ? styles$g.valid : styles$g.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
+                React__default["default"].createElement("label", { htmlFor: "text", className: styles$g.label },
+                    React__default["default"].createElement("span", { className: styles$g.label_text }, title))),
             withButton && React__default["default"].createElement("button", { type: "button" }, buttonText),
-            suggestions.length > 0 && React__default["default"].createElement("div", { className: styles$5.suggestions_container },
+            suggestions.length > 0 && React__default["default"].createElement("div", { className: styles$g.suggestions_container },
                 React__default["default"].createElement("ul", null, suggestions.map((suggestion, index) => React__default["default"].createElement("li", { key: index }, suggestion)))),
-            searchResults.length > 0 && React__default["default"].createElement("div", { className: styles$5.results_container },
+            searchResults.length > 0 && React__default["default"].createElement("div", { className: styles$g.results_container },
                 React__default["default"].createElement("ul", null, searchResults.map((result, index) => React__default["default"].createElement("li", { key: index, onClick: (event) => onClickResult(event, result) },
                     React__default["default"].createElement("span", null, result.title),
                     React__default["default"].createElement("button", { type: "button" }, buttonText))))),
-            searchResults.length == 0 && showNoResults && value.length > 0 && React__default["default"].createElement("div", { className: styles$5.results_container },
-                React__default["default"].createElement("div", { className: styles$5.error },
+            searchResults.length == 0 && showNoResults && value.length > 0 && React__default["default"].createElement("div", { className: styles$g.results_container },
+                React__default["default"].createElement("div", { className: styles$g.error },
                     React__default["default"].createElement(SvgIcon, { iconName: "error" }),
                     React__default["default"].createElement("h3", null, errorTitle),
                     React__default["default"].createElement("p", null, errorMessage),
                     errorButton.length > 0 && React__default["default"].createElement("button", { type: "button", onClick: errorAction }, errorButton))),
-            searchResults.length == 0 && showNoResults && value.length == 0 && React__default["default"].createElement("div", { className: styles$5.results_container },
-                React__default["default"].createElement("div", { className: styles$5.error },
+            searchResults.length == 0 && showNoResults && value.length == 0 && React__default["default"].createElement("div", { className: styles$g.results_container },
+                React__default["default"].createElement("div", { className: styles$g.error },
                     React__default["default"].createElement(SvgIcon, { iconName: "lightbulb" }),
                     React__default["default"].createElement("h3", null, helpTitle),
                     React__default["default"].createElement("p", null, helpMessage))))));
 }
 
-var css_248z$4 = ".styles-module_container__A8p1v {\n  margin-bottom: 30px;\n  max-width: 100%;\n  text-align: center;\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_profile__1BJ2t img.styles-module_not_active__vz3bM {\n  display: none;\n}\n\n.styles-module_profile__1BJ2t img {\n  border-radius: 100%;\n  width: 55px;\n  height: 55px;\n}\n\n.styles-module_icon__wCypS {\n  background: var(--foreground-2);\n  height: 50px;\n  width: 50px;\n  border-radius: 25px;\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  color: var(--background-1);\n}\n.styles-module_icon__wCypS.styles-module_not_active__vz3bM {\n  display: none;\n}\n\n.styles-module_input__aHNrg {\n  display: none;\n}\n\n.styles-module_label__0Rajr {\n  height: 100%;\n  display: flex;\n  cursor: pointer;\n  padding: 20px;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  border-width: 1px;\n  border-style: solid;\n  gap: 20px;\n  border-radius: 12px;\n  border-color: var(--border-1);\n  background-color: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_label__0Rajr .styles-module_description__KAVaa {\n  flex: 1;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n}\n.styles-module_label__0Rajr .styles-module_description__KAVaa p {\n  margin: 0;\n}\n.styles-module_label__0Rajr .styles-module_description__KAVaa span {\n  color: grey;\n  font-size: 12px;\n}\n\n.styles-module_label__0Rajr.styles-module_active__zXbic,\n.styles-module_label__0Rajr:hover {\n  background-color: var(--background-2);\n  border-color: var(--border-3);\n}\n\n.styles-module_label__0Rajr.styles-module_active__zXbic {\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_upload_button__zXlui:hover,\n.styles-module_remove_button__5pK9J:hover {\n  filter: brightness(0.9);\n}\n\n.styles-module_upload_button__zXlui {\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 30px;\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n\n.styles-module_remove_button__5pK9J {\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 30px;\n  background: var(--red-2);\n  color: var(--red-1);\n  transition: 0.2s ease-in-out;\n}\n\n.styles-module_drag_file__lxLfL {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 1rem;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}";
-var styles$4 = {"container":"styles-module_container__A8p1v","profile":"styles-module_profile__1BJ2t","not_active":"styles-module_not_active__vz3bM","icon":"styles-module_icon__wCypS","input":"styles-module_input__aHNrg","label":"styles-module_label__0Rajr","description":"styles-module_description__KAVaa","active":"styles-module_active__zXbic","upload_button":"styles-module_upload_button__zXlui","remove_button":"styles-module_remove_button__5pK9J","drag_file":"styles-module_drag_file__lxLfL"};
+var css_248z$f = ".styles-module_container__Kl-lB {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n.styles-module_tab__Veki- {\n  flex: 1;\n  border-radius: 42px;\n  border: 1px solid transparent;\n  border-bottom: 2px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--border-1);\n  background: var(--background-1);\n  color: var(--foreground-1);\n  padding: 16px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: var(--font-1);\n  font-weight: 400;\n}\n.styles-module_tab__Veki-:not(.styles-module_selected__geNE7):active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  border-bottom: 2px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--primary-1);\n}\n.styles-module_tab__Veki-.styles-module_selected__geNE7 {\n  border-bottom-color: var(--primary-1);\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n\n@media (max-width: 750px) {\n  .styles-module_container__Kl-lB {\n    gap: 0px;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n  }\n  .styles-module_tab__Veki- {\n    border-radius: 0px;\n  }\n  .styles-module_tab__Veki-:nth-child(1) {\n    border-top-left-radius: 16px;\n  }\n  .styles-module_tab__Veki-:nth-child(2) {\n    border-top-right-radius: 16px;\n  }\n  .styles-module_tab__Veki-:nth-child(3) {\n    border-bottom-left-radius: 16px;\n  }\n  .styles-module_tab__Veki-:nth-child(4) {\n    border-bottom-right-radius: 16px;\n  }\n}";
+var styles$f = {"container":"styles-module_container__Kl-lB","tab":"styles-module_tab__Veki-","selected":"styles-module_selected__geNE7"};
+styleInject(css_248z$f);
+
+function Tabs({ tabs = [], onSelect = () => { }, selected }) {
+    const [isSelected, setSelected] = React.useState(selected);
+    React.useEffect(() => setSelected(selected), [selected]);
+    const onChange = (value) => {
+        setSelected(value);
+        onSelect(value);
+    };
+    return (React__default["default"].createElement("div", { className: styles$f.container }, tabs.map((tab) => React__default["default"].createElement("div", { className: [styles$f.tab, isSelected == tab.value ? styles$f.selected : styles$f.not_selected].join(" "), key: tab.value, onClick: () => onChange(tab.value) }, tab.title))));
+}
+
+var css_248z$e = ".styles-module_card__jkssm {\n  background: var(--background-2);\n  border: 1px solid var(--border-2);\n  border-radius: 18px;\n  transition: 0.2s ease;\n  padding: 18px 14px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n  cursor: pointer;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding-top: 30px;\n}\n.styles-module_card__jkssm span {\n  color: var(--foreground-3);\n}\n.styles-module_card__jkssm:hover {\n  transform: scale(1.01);\n  box-shadow: none;\n  background: none;\n}\n.styles-module_card__jkssm h2 {\n  margin-top: 0;\n  color: var(--foreground-3);\n  font-weight: 400;\n  font-size: 18px;\n}";
+var styles$e = {"card":"styles-module_card__jkssm"};
+styleInject(css_248z$e);
+
+function CardButton({ id, children, iconName, onClick, ...props }) {
+    function onClickCard(event) {
+        event.preventDefault();
+        if (onClick)
+            onClick(event);
+    }
+    return (React__default["default"].createElement("div", { className: styles$e.card, onClick: onClickCard, id: id, ...props },
+        React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
+        React__default["default"].createElement("h2", null, children)));
+}
+
+var css_248z$d = ".styles-module_container__yul0p {\n  display: flex;\n  flex-direction: row;\n}\n.styles-module_container__yul0p .styles-module_item__LOLOM:nth-child(1) {\n  background: var(--background-1);\n  border-color: var(--background-1);\n}\n.styles-module_container__yul0p .styles-module_item__LOLOM:nth-child(2) {\n  background: var(--background-2);\n  border-color: var(--background-2);\n}\n.styles-module_container__yul0p .styles-module_item__LOLOM:nth-child(3) {\n  background: var(--background-4);\n  border-color: var(--background-4);\n}\n.styles-module_container__yul0p .styles-module_item__LOLOM:first-child {\n  border-top-left-radius: 20px;\n  border-bottom-left-radius: 20px;\n}\n.styles-module_container__yul0p .styles-module_item__LOLOM:last-child {\n  border-top-right-radius: 20px;\n  border-bottom-right-radius: 20px;\n}\n.styles-module_container__yul0p .styles-module_item__LOLOM {\n  border: 1px solid transparent;\n  padding: 11px 18px;\n  font-size: 14px;\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  user-select: none;\n  -webkit-user-select: none;\n}\n.styles-module_container__yul0p .styles-module_item__LOLOM.styles-module_selected__OKR5m {\n  background: var(--background-4);\n  border-color: var(--primary-1);\n  color: var(--primary-1);\n}";
+var styles$d = {"container":"styles-module_container__yul0p","item":"styles-module_item__LOLOM","selected":"styles-module_selected__OKR5m"};
+styleInject(css_248z$d);
+
+const ChooseRoleItem = ({ item, isSelected, onUpdate, }) => (React__default["default"].createElement("div", { className: [styles$d.item, isSelected ? styles$d.selected : styles$d.not_selected].join(" "), onClick: () => onUpdate(item.value) }, item.title));
+function ChooseRole({ roles, defaultSelected, readOnly = false, onChange = () => { } }) {
+    const [selected, setSelected] = React.useState(defaultSelected);
+    React.useEffect(() => setSelected(defaultSelected), [defaultSelected]);
+    function onUpdate(newRole) {
+        if (readOnly)
+            return;
+        setSelected(newRole);
+        onChange(newRole);
+    }
+    return (React__default["default"].createElement("div", { className: styles$d.container }, roles.map(item => React__default["default"].createElement(ChooseRoleItem, { key: item.value, item: item, onUpdate: onUpdate, isSelected: selected === item.value }))));
+}
+
+var css_248z$c = ".styles-module_container__6B1KH {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 30px;\n  transition: 0.2s ease-in-out;\n  margin-bottom: 20px;\n  color: var(--foreground-1);\n}\n.styles-module_container__6B1KH:hover {\n  color: var(--primary-1);\n}";
+var styles$c = {"container":"styles-module_container__6B1KH"};
+styleInject(css_248z$c);
+
+function CopyCode({ code, onCopy = () => { }, ...props }) {
+    const onClick = () => {
+        navigator.clipboard.writeText(code);
+        onCopy();
+    };
+    return (React__default["default"].createElement("div", { className: styles$c.container, onClick: onClick, ...props },
+        React__default["default"].createElement(SvgIcon, { iconName: "content_copy" }),
+        React__default["default"].createElement("span", null, code),
+        React__default["default"].createElement("input", { type: "hidden", name: "code", value: code })));
+}
+
+var css_248z$b = ".styles-module_card__6-gZi {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  gap: 20px;\n  padding: 100px 0px;\n  font-family: \"Space Grotesk\", sans-serif;\n}\n.styles-module_card__6-gZi h1 {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 500;\n}\n.styles-module_card__6-gZi p {\n  margin: 0;\n  font-size: 16px;\n}";
+var styles$b = {"card":"styles-module_card__6-gZi"};
+styleInject(css_248z$b);
+
+function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
+    return (React__default["default"].createElement("div", { className: styles$b.card },
+        React__default["default"].createElement(SvgIcon, { size: "60px", iconName: iconName }),
+        React__default["default"].createElement("h1", null, title),
+        React__default["default"].createElement("p", null, subtitle),
+        button && React__default["default"].createElement(Button, { onClick: onClick, type: "lightBlue" }, button)));
+}
+
+var css_248z$a = ".styles-module_container__I04aX {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  font-family: \"Playfair\", serif;\n  border-radius: 18px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n  background: var(--background-1);\n  padding: 6px;\n  border: 1px solid var(--border-1);\n  margin-bottom: 20px;\n  font-family: var(--font-1);\n}\n\n.styles-module_select_container__al6M5 {\n  border: 1px solid var(--border-1);\n  padding: 0px 20px;\n  gap: 10px;\n  display: flex;\n  align-items: center;\n  border-radius: 12px;\n  cursor: pointer;\n  background: var(--background-1);\n  transition: 0.2s ease-in-out;\n  height: 55px;\n}\n.styles-module_select_container__al6M5:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_select_container__al6M5:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_select_container__al6M5 .styles-module_select__HcBKL {\n  border: none;\n  outline: none;\n  background: none;\n  cursor: pointer;\n  font-size: 16px;\n  min-width: 64px;\n  height: 100%;\n  font-family: var(--font-1);\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\n.styles-module_input__N--FR::-webkit-outer-spin-button,\n.styles-module_input__N--FR::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_input_container__YxXjL {\n  padding: 0px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  background: var(--background-1);\n  border-color: var(--border-1);\n  height: 55px;\n}\n.styles-module_input_container__YxXjL:hover {\n  border-color: var(--primary-2);\n}\n.styles-module_input_container__YxXjL .styles-module_unit_label__A6SfL {\n  font-size: 16px;\n  text-align: right;\n}\n.styles-module_input_container__YxXjL:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  background: var(--background-2);\n}\n.styles-module_input_container__YxXjL .styles-module_input__N--FR {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n  height: 100%;\n}\n.styles-module_input_container__YxXjL .styles-module_input__N--FR[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__YxXjL .styles-module_input__N--FR[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__YxXjL .styles-module_input__N--FR[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}";
+var styles$a = {"container":"styles-module_container__I04aX","select_container":"styles-module_select_container__al6M5","select":"styles-module_select__HcBKL","input":"styles-module_input__N--FR","input_container":"styles-module_input_container__YxXjL","unit_label":"styles-module_unit_label__A6SfL"};
+styleInject(css_248z$a);
+
+const NumberDropdown = ({ options = [], unit = "", defaultValue, onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
+    const [selected, setSelected] = React.useState(defaultValue);
+    React.useEffect(() => setSelected(defaultValue), [defaultValue]);
+    const onDropdownChange = (event) => {
+        onChangeDropdown(selected, event.target.value);
+        setSelected(event.target.value);
+    };
+    const onInputChange = (event) => {
+        onChangeInput(Number(event.target.value));
+    };
+    return (React__default["default"].createElement("div", { className: styles$a.container },
+        React__default["default"].createElement("div", { className: styles$a.select_container },
+            React__default["default"].createElement(SvgIcon, { iconName: "expand_more" }),
+            React__default["default"].createElement("select", { className: styles$a.select, onChange: onDropdownChange, value: selected },
+                React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
+                options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))),
+        React__default["default"].createElement("div", { className: styles$a.input_container },
+            React__default["default"].createElement("input", { className: styles$a.input, type: "number", onInput: onInputChange, ...props }),
+            React__default["default"].createElement("span", { className: styles$a.unit_label }, unit))));
+};
+
+var css_248z$9 = ".styles-module_container__c0sGu {\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  background: var(--background-1);\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 12px;\n  transition: 0.2s ease-in-out;\n  border: 2px solid transparent;\n}\n.styles-module_container__c0sGu:hover {\n  background: var(--background-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC {\n  background: var(--primary-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC span {\n  color: var(--primary-1);\n}\n.styles-module_container__c0sGu span {\n  user-select: none;\n  font-weight: 300;\n}";
+var styles$9 = {"container":"styles-module_container__c0sGu","active":"styles-module_active__naxTC"};
+styleInject(css_248z$9);
+
+const ToggleBox = ({ defaultActive = false, activeIcon = "lock", inactiveIcon = "lock", onSwitch = () => { } }) => {
+    return (React__default["default"].createElement("div", { className: [styles$9.container, defaultActive ? styles$9.active : styles$9.not_active].join(" "), onClick: () => onSwitch(!defaultActive) },
+        React__default["default"].createElement(SvgIcon, { iconName: defaultActive ? activeIcon : inactiveIcon })));
+};
+
+var css_248z$8 = ".styles-module_container__nfdq2 {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  font-family: var(--font-1);\n  border-radius: 12px;\n  transition: 0.2s ease-in-out;\n  padding-left: 4px;\n}\n.styles-module_container__nfdq2.styles-module_active__UDz5d {\n  background: var(--primary-2);\n}\n.styles-module_container__nfdq2.styles-module_not_active__2wtj6 .styles-module_unit_label__5LpQb {\n  color: var(--foreground-3);\n}\n.styles-module_container__nfdq2.styles-module_number__EDIRK {\n  flex-direction: row;\n}\n.styles-module_container__nfdq2.styles-module_range__-7ujA {\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n}\n\n.styles-module_label_container__q7qE- {\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n}\n.styles-module_label_container__q7qE-.styles-module_range__-7ujA {\n  width: 100%;\n  flex: 1;\n  padding-top: 10px;\n}\n\n.styles-module_input__oOPOp::-webkit-outer-spin-button,\n.styles-module_input__oOPOp::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.styles-module_value_container__hngxK {\n  display: flex;\n  gap: 6px;\n}\n.styles-module_value_container__hngxK .styles-module_label__oETxb {\n  font-family: var(--font-1);\n  user-select: none;\n  -webkit-user-select: none;\n  font-size: 18px;\n}\n.styles-module_value_container__hngxK .styles-module_label__oETxb,\n.styles-module_value_container__hngxK .styles-module_value__0eUGc {\n  transition: 0.2s ease-in-out;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA {\n  flex: 1;\n  align-items: flex-end;\n  padding-right: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA .styles-module_label__oETxb {\n  font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_range__-7ujA .styles-module_value__0eUGc {\n  font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_number__EDIRK .styles-module_label__oETxb {\n  font-size: 20px;\n}\n.styles-module_value_container__hngxK.styles-module_number__EDIRK .styles-module_value__0eUGc {\n  max-height: 0;\n  overflow: hidden;\n}\n\n.styles-module_input_container__DJP-a {\n  padding: 14px 20px;\n  font-size: 16px;\n  border-radius: 12px;\n  border: 1px solid transparent;\n  transition: 0.2s ease;\n  flex: 1;\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n}\n.styles-module_input_container__DJP-a .styles-module_unit_label__5LpQb {\n  font-size: 20px;\n  text-align: right;\n}\n.styles-module_input_container__DJP-a.styles-module_number__EDIRK {\n  border-color: var(--primary-2);\n  background: var(--background-1);\n  cursor: pointer;\n}\n.styles-module_input_container__DJP-a.styles-module_number__EDIRK:focus-within {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_input_container__DJP-a.styles-module_range__-7ujA {\n  padding: 10px;\n  width: calc(100% - 20px);\n}\n.styles-module_input_container__DJP-a.styles-module_range__-7ujA .styles-module_unit_label__5LpQb {\n  max-width: 0;\n  overflow: hidden;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp {\n  width: 0px;\n  min-width: 64px;\n  outline: none;\n  border: none;\n  -moz-appearance: textfield;\n  appearance: textfield;\n  font-size: 16px;\n  text-align: right;\n  background: transparent;\n  font-family: var(--font-1);\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number] {\n  cursor: pointer;\n  flex: 1;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=range] {\n  width: 100%;\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number]:disabled {\n  background: transparent;\n  color: var(--foreground-3);\n}\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number].styles-module_not_available__vwfmX,\n.styles-module_input_container__DJP-a .styles-module_input__oOPOp[type=number]:invalid {\n  color: #e50000;\n}\n\n.styles-module_label__oETxb {\n  font-family: var(--font-1);\n  user-select: none;\n  -webkit-user-select: none;\n  cursor: pointer;\n}";
+var styles$8 = {"container":"styles-module_container__nfdq2","active":"styles-module_active__UDz5d","not_active":"styles-module_not_active__2wtj6","unit_label":"styles-module_unit_label__5LpQb","number":"styles-module_number__EDIRK","range":"styles-module_range__-7ujA","label_container":"styles-module_label_container__q7qE-","input":"styles-module_input__oOPOp","value_container":"styles-module_value_container__hngxK","label":"styles-module_label__oETxb","value":"styles-module_value__0eUGc","input_container":"styles-module_input_container__DJP-a","not_available":"styles-module_not_available__vwfmX"};
+styleInject(css_248z$8);
+
+function NumberField({ placeholder = "", type = "number", active = false, onChangeActive = () => { }, enableLocked = false, locked, onChangeLocked = () => { }, title = "Zahl", unit = "cm", name, defaultValue = 1, onUpdate = () => { }, disabled, min = 0, max = 10, validate = () => true, ...props }) {
+    const [value, setValue] = React.useState(defaultValue);
+    React.useEffect(() => { setValue(defaultValue); }, [defaultValue]);
+    const onInput = (event) => {
+        const value = Number(event.target.value);
+        if (validate(name, value)) {
+            setValue(value);
+            onUpdate(value);
+        }
+    };
+    return (React__default["default"].createElement("div", { className: [styles$8.container, active ? styles$8.active : styles$8.not_active, styles$8[type]].join(" ") },
+        React__default["default"].createElement("div", { className: [styles$8.label_container, styles$8[type]].join(" ") },
+            React__default["default"].createElement(ToggleBox, { activeIcon: 'check', inactiveIcon: 'add', defaultActive: active, onSwitch: (active) => onChangeActive(active) }),
+            enableLocked &&
+                React__default["default"].createElement(ToggleBox, { activeIcon: 'lock', inactiveIcon: 'lock_open', defaultActive: locked, onSwitch: (locked) => onChangeLocked(locked) }),
+            React__default["default"].createElement("div", { className: [styles$8.value_container, styles$8[type]].join(" ") },
+                React__default["default"].createElement("span", { className: styles$8.label }, title),
+                React__default["default"].createElement("span", { className: styles$8.value }, `${value} ${unit}`))),
+        React__default["default"].createElement("div", { className: [styles$8.input_container, styles$8[type]].join(" ") },
+            React__default["default"].createElement("input", { className: `${styles$8.input} ${title != undefined ? styles$8.with_title : styles$8.without_title} ${String(value).length > 0 ? styles$8.valid : styles$8.not_valid} `, name: name, placeholder: placeholder, type: type, onInput: onInput, disabled: disabled, value: value, max: max, min: min, ...props }),
+            React__default["default"].createElement("span", { className: styles$8.unit_label }, unit))));
+}
+
+var css_248z$7 = ".styles-module_box__Td5aJ {\n  background: var(--background-2);\n  width: 400px;\n  max-width: 100%;\n  border-radius: 22px;\n  border: 1px solid var(--border-2);\n  display: flex;\n  flex-direction: row;\n  padding: 22px;\n  gap: 18px;\n  cursor: pointer;\n  margin-bottom: 20px;\n  transition: 0.2s ease;\n  color: var(--foreground-1);\n}\n.styles-module_box__Td5aJ:hover {\n  background-color: var(--background-1);\n  transform: scale(1.01);\n}\n.styles-module_box__Td5aJ:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_box__Td5aJ .styles-module_left_side__lIJJX {\n  width: 40px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding-top: 5px;\n}\n.styles-module_box__Td5aJ .styles-module_right_side__jfm9i {\n  flex: 1;\n}\n.styles-module_box__Td5aJ .styles-module_right_side__jfm9i h4 {\n  margin: 0;\n  text-align: left;\n  font-size: 1.3rem;\n  margin-bottom: 12px;\n  margin-top: 5px;\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_box__Td5aJ .styles-module_right_side__jfm9i p {\n  color: var(--foreground-2);\n  margin: 0;\n  text-align: left;\n  font-size: 1.1rem;\n  line-height: 1.6;\n}\n\n@media (max-width: 550px) {\n  .styles-module_box__Td5aJ {\n    width: auto;\n  }\n  .styles-module_box__Td5aJ .styles-module_right_side__jfm9i h4 {\n    font-size: 1.2rem;\n  }\n  .styles-module_box__Td5aJ .styles-module_right_side__jfm9i p {\n    font-size: 1rem;\n  }\n}";
+var styles$7 = {"box":"styles-module_box__Td5aJ","left_side":"styles-module_left_side__lIJJX","right_side":"styles-module_right_side__jfm9i"};
+styleInject(css_248z$7);
+
+function OptionField({ id, headline, description, iconName }) {
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("div", { className: styles$7.box, id: id },
+            React__default["default"].createElement("div", { className: styles$7.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
+            React__default["default"].createElement("div", { className: styles$7.right_side },
+                React__default["default"].createElement("h4", null, headline),
+                React__default["default"].createElement("p", null, description)))));
+}
+
+var css_248z$6 = ".styles-module_container__TZxMX {\n  background: var(--background-1);\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: var(--foreground-1);\n  border: 1px solid var(--border-2);\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n  cursor: pointer;\n}\n.styles-module_container__TZxMX:hover {\n  background: var(--background-2);\n  border-color: var(--border-3);\n}\n.styles-module_container__TZxMX h3 {\n  font-weight: 500;\n  margin: 0;\n  text-align: center;\n  font-family: var(--font-1);\n}\n.styles-module_container__TZxMX:active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_container__TZxMX.styles-module_preselected__btGCi {\n  border: 1px solid var(--foreground-1);\n}";
+var styles$6 = {"container":"styles-module_container__TZxMX","preselected":"styles-module_preselected__btGCi"};
+styleInject(css_248z$6);
+
+function OptionField2({ title, iconName, onClick, preselected = false }) {
+    function onClickDiv(event) {
+        event.preventDefault();
+        if (onClick)
+            onClick(event);
+    }
+    return (React__default["default"].createElement("div", { className: [styles$6.container, preselected ? styles$6.preselected : styles$6.not_preselected].join(" "), onClick: onClickDiv },
+        iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
+        React__default["default"].createElement("h3", null, title)));
+}
+
+var css_248z$5 = ".styles-module_popover__2J5nl {\n  overflow-y: scroll;\n  overflow-x: hidden;\n  margin: 0 auto;\n  margin-top: 30px;\n  z-index: 10000;\n  position: fixed;\n  border-top-left-radius: 30px;\n  border-top-right-radius: 30px;\n  transform: translateY(100%);\n  width: 700px;\n  max-width: 100%;\n  height: 100%;\n  left: 50%;\n  margin-left: -385px;\n  transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);\n  background: var(--background-1);\n  box-shadow: var(--border-3) 0px 1px 2px 0px, var(--border-3) 0px 1px 3px 1px;\n  padding: 35px;\n  padding-top: 110px;\n  top: 0;\n}\n.styles-module_popover__2J5nl.styles-module_active__bLUGp {\n  transform: translateY(0px);\n}\n.styles-module_popover__2J5nl h1 {\n  margin: 10px 0px;\n  font-weight: 900;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n.styles-module_popover__2J5nl h4 {\n  font-size: 20px;\n  margin: 10px 0px;\n  color: var(--foreground-3);\n  font-weight: 400;\n}\n.styles-module_popover__2J5nl p {\n  line-height: 2;\n  margin: 20px 0px;\n}\n.styles-module_popover__2J5nl img {\n  object-fit: contain;\n  border-radius: 10px;\n}\n.styles-module_popover__2J5nl .styles-module_close_button__eTB52 {\n  width: 40px;\n  height: 40px;\n  border-radius: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--background-4);\n  cursor: pointer;\n  transition: 0.2s ease-in-out;\n  position: absolute;\n  top: 35px;\n  right: 35px;\n  color: var(--foreground-2);\n}\n.styles-module_popover__2J5nl .styles-module_close_button__eTB52:hover {\n  filter: brightness(0.9);\n}\n\n@media (max-width: 800px) {\n  .styles-module_popover__2J5nl {\n    width: calc(100% - 40px);\n    left: 0;\n    margin-left: 0;\n    padding: 20px;\n    padding-top: 110px;\n  }\n}";
+var styles$5 = {"popover":"styles-module_popover__2J5nl","active":"styles-module_active__bLUGp","close_button":"styles-module_close_button__eTB52"};
+styleInject(css_248z$5);
+
+function Popover({ children, active, onClose }) {
+    return (React__default["default"].createElement("div", { className: [styles$5.popover, active ? styles$5.active : styles$5.closed].join(" ") },
+        children,
+        React__default["default"].createElement("div", { className: styles$5.close_button, onClick: onClose },
+            React__default["default"].createElement(SvgIcon, { iconName: "close" }))));
+}
+
+var css_248z$4 = ".styles-module_container__W93lz {\n  margin-bottom: 20px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 10px;\n}\n.styles-module_container__W93lz .styles-module_chip__EiNq-,\n.styles-module_container__W93lz .styles-module_show_all__77vRn {\n  padding: 6px 12px;\n  background: var(--background-1);\n  border-radius: 20px;\n  display: flex;\n  flex-direction: row;\n  gap: 5px;\n  align-items: center;\n  cursor: pointer;\n  user-select: none;\n  font-size: 14px;\n  -webkit-user-select: none;\n  color: var(--foreground-2);\n  transition: 0.2s ease-in-out;\n  border: 1px solid transparent;\n}\n.styles-module_container__W93lz .styles-module_chip__EiNq-:hover {\n  filter: brightness(0.95);\n}\n.styles-module_container__W93lz .styles-module_chip__EiNq-:not(.styles-module_selected__gseCv):active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n}\n.styles-module_container__W93lz .styles-module_chip__EiNq-.styles-module_selected__gseCv {\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n.styles-module_container__W93lz .styles-module_chip__EiNq-.styles-module_selected__gseCv span {\n  color: var(--primary-1);\n}";
+var styles$4 = {"container":"styles-module_container__W93lz","chip":"styles-module_chip__EiNq-","show_all":"styles-module_show_all__77vRn","selected":"styles-module_selected__gseCv"};
 styleInject(css_248z$4);
 
+function SearchChips({ items, onChange, chipsVisible = 9 }) {
+    const [showAll, setShowAll] = React.useState(false);
+    const [chips, setChips] = React.useState(items);
+    function onClick(item, index) {
+        const newChips = [...chips];
+        newChips[index] = { ...item, selected: !item.selected };
+        setChips(newChips);
+        if (onChange)
+            onChange(newChips);
+    }
+    return (React__default["default"].createElement("div", { className: styles$4.container },
+        (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$4.chip, item.selected ? styles$4.selected : styles$4.not_selected].join(" ") },
+            React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
+            item.title)),
+        chipsVisible < chips.length && (showAll ?
+            React__default["default"].createElement("div", { className: styles$4.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
+            :
+                React__default["default"].createElement("div", { className: styles$4.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
+}
+
+var css_248z$3 = ".styles-module_container__ns8vr {\n  margin-bottom: 30px;\n  max-width: 100%;\n  text-align: center;\n  position: relative;\n  width: 100%;\n}\n\n.styles-module_profile__klNbv img.styles-module_not_active__ONkMR {\n  display: none;\n}\n\n.styles-module_profile__klNbv img {\n  border-radius: 100%;\n  width: 55px;\n  height: 55px;\n}\n\n.styles-module_icon__n3arc {\n  background: var(--foreground-2);\n  height: 50px;\n  width: 50px;\n  border-radius: 25px;\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  color: var(--background-1);\n}\n.styles-module_icon__n3arc.styles-module_not_active__ONkMR {\n  display: none;\n}\n\n.styles-module_input__T-Cbz {\n  display: none;\n}\n\n.styles-module_label__XlHqU {\n  height: 100%;\n  display: flex;\n  cursor: pointer;\n  padding: 20px;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  border-width: 1px;\n  border-style: solid;\n  gap: 20px;\n  border-radius: 12px;\n  border-color: var(--border-1);\n  background-color: var(--background-1);\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n  transition: 0.2s ease-in-out;\n}\n.styles-module_label__XlHqU .styles-module_description__WmlUJ {\n  flex: 1;\n  text-align: left;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n}\n.styles-module_label__XlHqU .styles-module_description__WmlUJ p {\n  margin: 0;\n}\n.styles-module_label__XlHqU .styles-module_description__WmlUJ span {\n  color: grey;\n  font-size: 12px;\n}\n\n.styles-module_label__XlHqU.styles-module_active__bG3k-,\n.styles-module_label__XlHqU:hover {\n  background-color: var(--background-2);\n  border-color: var(--border-3);\n}\n\n.styles-module_label__XlHqU.styles-module_active__bG3k- {\n  box-shadow: var(--focus-shadow);\n}\n\n.styles-module_upload_button__MEtMC:hover,\n.styles-module_remove_button__OOfvG:hover {\n  filter: brightness(0.9);\n}\n\n.styles-module_upload_button__MEtMC {\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 30px;\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n\n.styles-module_remove_button__OOfvG {\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border: none;\n  border-radius: 30px;\n  background: var(--red-2);\n  color: var(--red-1);\n  transition: 0.2s ease-in-out;\n}\n\n.styles-module_drag_file__WG-q6 {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border-radius: 1rem;\n  top: 0px;\n  right: 0px;\n  bottom: 0px;\n  left: 0px;\n}";
+var styles$3 = {"container":"styles-module_container__ns8vr","profile":"styles-module_profile__klNbv","not_active":"styles-module_not_active__ONkMR","icon":"styles-module_icon__n3arc","input":"styles-module_input__T-Cbz","label":"styles-module_label__XlHqU","description":"styles-module_description__WmlUJ","active":"styles-module_active__bG3k-","upload_button":"styles-module_upload_button__MEtMC","remove_button":"styles-module_remove_button__OOfvG","drag_file":"styles-module_drag_file__WG-q6"};
+styleInject(css_248z$3);
+
 function SelectFileCard({ accept = "image/png, image/jpeg, image/jpg", maxSize = 1, onFileSelected, onFileTooLarge = () => { }, ...props }) {
     const [dragActive, setDragActive] = React.useState(false);
     const [file, setFile] = React.useState();
@@ -10080,65 +10096,51 @@ function SelectFileCard({ accept = "image/png, image/jpeg, image/jpg", maxSize =
     const onRemoveFile = () => {
         setFile(undefined);
     };
-    return (React__default["default"].createElement("form", { className: styles$4.container, onDragEnter: handleDrag, onSubmit: (e) => e.preventDefault(), ...props },
-        React__default["default"].createElement("input", { ref: inputRef, accept: accept, type: "file", id: "input-file-upload", className: styles$4.input, multiple: true, onChange: handleChange }),
-        React__default["default"].createElement("label", { className: [styles$4.label, dragActive ? styles$4.active : ""].join(" "), htmlFor: "input-file-upload" },
-            React__default["default"].createElement("div", { className: styles$4.description },
+    return (React__default["default"].createElement("form", { className: styles$3.container, onDragEnter: handleDrag, onSubmit: (e) => e.preventDefault(), ...props },
+        React__default["default"].createElement("input", { ref: inputRef, accept: accept, type: "file", id: "input-file-upload", className: styles$3.input, multiple: true, onChange: handleChange }),
+        React__default["default"].createElement("label", { className: [styles$3.label, dragActive ? styles$3.active : ""].join(" "), htmlFor: "input-file-upload" },
+            React__default["default"].createElement("div", { className: styles$3.description },
                 React__default["default"].createElement("p", null, file ? "Datei ausgewählt" : "Datei hierherziehen"),
                 React__default["default"].createElement("span", null, file ? file.name : "Maximale Dateigröße beträgt 1 MB")),
-            React__default["default"].createElement("button", { className: styles$4.upload_button, onClick: onButtonClick },
+            React__default["default"].createElement("button", { className: styles$3.upload_button, onClick: onButtonClick },
                 React__default["default"].createElement(SvgIcon, { iconName: file ? "done" : "upload" })),
             file &&
-                React__default["default"].createElement("button", { className: styles$4.remove_button, onClick: onRemoveFile },
+                React__default["default"].createElement("button", { className: styles$3.remove_button, onClick: onRemoveFile },
                     React__default["default"].createElement(SvgIcon, { iconName: "delete" }))),
-        dragActive && React__default["default"].createElement("div", { className: styles$4.drag_file, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop })));
+        dragActive && React__default["default"].createElement("div", { className: styles$3.drag_file, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop })));
 }
 
-var css_248z$3 = ".styles-module_container__jNs7m h3 {\n  font-weight: 500;\n  font-size: 16px;\n  color: var(--foreground-1);\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n  border-top: 1px solid var(--border-1);\n  border-bottom: 1px solid var(--border-1);\n}\n\n.styles-module_item_list__FxHkg {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 25px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_default__SexGH:hover {\n  background: var(--background-2);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n  background: var(--red-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 {\n  color: var(--primary-1) !important;\n  border-color: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 .styles-module_icon__Jy87z {\n  color: var(--primary-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV {\n  padding: 10px 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--foreground-1);\n  flex-wrap: wrap;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_moreText__-blXb {\n  flex: 1;\n  margin-bottom: 4px;\n  color: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n  color: var(--foreground-3);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_icon__Jy87z {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_title__nIwzs {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_icon__Jy87z {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n  background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(odd) {\n  background: var(--background-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n  border-bottom: 1px solid var(--border-1);\n}\n\n@media (max-width: 750px) {\n  .styles-module_item_list__FxHkg {\n    gap: 20px;\n  }\n  .styles-module_item_list__FxHkg li.styles-module_item__sgyiV {\n    background: var(--background-1);\n    border-radius: 12px;\n    padding: 20px;\n    border: 1px solid var(--border-1);\n    transition: 0.2s ease-in-out;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n  .styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n    background: var(--background-1);\n  }\n  .styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(odd) {\n    background: var(--background-1);\n  }\n}";
-var styles$3 = {"container":"styles-module_container__jNs7m","item_list":"styles-module_item_list__FxHkg","has_children":"styles-module_has_children__Uu-8D","action":"styles-module_action__YYTok","default":"styles-module_default__SexGH","red":"styles-module_red__KD3qJ","item":"styles-module_item__sgyiV","selected":"styles-module_selected__iOu39","icon":"styles-module_icon__Jy87z","moreText":"styles-module_moreText__-blXb","subtitle":"styles-module_subtitle__DT5OF","blue":"styles-module_blue__theVn","title":"styles-module_title__nIwzs"};
-styleInject(css_248z$3);
+var css_248z$2 = ".styles-module_container__3vqfo h3 {\n  font-weight: 500;\n  font-size: 16px;\n  color: var(--foreground-1);\n}\n\n.styles-module_item_list__vsTdD.styles-module_has_children__-Q4yY {\n  border-top: 1px solid var(--border-1);\n  border-bottom: 1px solid var(--border-1);\n}\n\n.styles-module_item_list__vsTdD {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n.styles-module_item_list__vsTdD .styles-module_action__SQSHx {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n  padding: 8px 14px;\n  border-radius: 25px;\n  transition: 0.2s ease-in-out;\n}\n.styles-module_item_list__vsTdD .styles-module_action__SQSHx.styles-module_default__3Wvl0:hover {\n  background: var(--background-2);\n}\n.styles-module_item_list__vsTdD .styles-module_action__SQSHx.styles-module_red__L2E16:hover {\n  background: var(--red-2);\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn.styles-module_selected__QcNrB {\n  color: var(--primary-1) !important;\n  border-color: var(--primary-1);\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn.styles-module_selected__QcNrB .styles-module_icon__NRKWf {\n  color: var(--primary-1) !important;\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn {\n  padding: 10px 20px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  color: var(--foreground-1);\n  flex-wrap: wrap;\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn .styles-module_moreText__snwY1 {\n  flex: 1;\n  margin-bottom: 4px;\n  color: var(--primary-1);\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn .styles-module_subtitle__U8eet {\n  color: var(--foreground-3);\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn .styles-module_icon__NRKWf {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  color: var(--foreground-1);\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn.styles-module_blue__GStzU .styles-module_title__AeUlr {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn.styles-module_blue__GStzU .styles-module_icon__NRKWf {\n  color: var(--blue-1) !important;\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn:nth-child(even) {\n  background: var(--background-2);\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn:nth-child(odd) {\n  background: var(--background-1);\n}\n.styles-module_item_list__vsTdD li.styles-module_item__hKIIn:not(:last-child) {\n  border-bottom: 1px solid var(--border-1);\n}\n\n@media (max-width: 750px) {\n  .styles-module_item_list__vsTdD {\n    gap: 20px;\n  }\n  .styles-module_item_list__vsTdD li.styles-module_item__hKIIn {\n    background: var(--background-1);\n    border-radius: 12px;\n    padding: 20px;\n    border: 1px solid var(--border-1);\n    transition: 0.2s ease-in-out;\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n  .styles-module_item_list__vsTdD li.styles-module_item__hKIIn:nth-child(even) {\n    background: var(--background-1);\n  }\n  .styles-module_item_list__vsTdD li.styles-module_item__hKIIn:nth-child(odd) {\n    background: var(--background-1);\n  }\n}";
+var styles$2 = {"container":"styles-module_container__3vqfo","item_list":"styles-module_item_list__vsTdD","has_children":"styles-module_has_children__-Q4yY","action":"styles-module_action__SQSHx","default":"styles-module_default__3Wvl0","red":"styles-module_red__L2E16","item":"styles-module_item__hKIIn","selected":"styles-module_selected__QcNrB","icon":"styles-module_icon__NRKWf","moreText":"styles-module_moreText__snwY1","subtitle":"styles-module_subtitle__U8eet","blue":"styles-module_blue__GStzU","title":"styles-module_title__AeUlr"};
+styleInject(css_248z$2);
 
 function Table({ items, title = "Titel", actions = [], moreActions, selected, style = "default", marginTop = 30, width = "100%", emptyTitle = "Keine Daten", emptySubtitle = "Es sind keine Daten vorhanden.", emptyIconName = "manage_search", enableEmptyCard = true }) {
-    return (React__default["default"].createElement("div", { className: styles$3.container, style: { marginTop: marginTop, width: width } },
+    return (React__default["default"].createElement("div", { className: styles$2.container, style: { marginTop: marginTop, width: width } },
         items.length == 0 && enableEmptyCard &&
             React__default["default"].createElement(EmptyCard, { title: emptyTitle, subtitle: emptySubtitle, iconName: emptyIconName }),
         items.length > 0 &&
             React__default["default"].createElement(React__default["default"].Fragment, null,
                 React__default["default"].createElement("h3", null, title),
-                React__default["default"].createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React__default["default"].createElement("li", { key: index, className: [styles$3.item, styles$3[style], selected == index ? styles$3.selected : styles$3.not_selected].join(" ") },
-                    React__default["default"].createElement("div", { className: styles$3.icon },
+                React__default["default"].createElement("ul", { className: `${styles$2.item_list} ${items.length > 0 ? styles$2.has_children : styles$2.no_children}` }, items.map((item, index) => React__default["default"].createElement("li", { key: index, className: [styles$2.item, styles$2[style], selected == index ? styles$2.selected : styles$2.not_selected].join(" ") },
+                    React__default["default"].createElement("div", { className: styles$2.icon },
                         React__default["default"].createElement(SvgIcon, { iconName: item.iconName })),
-                    React__default["default"].createElement("div", { className: styles$3.title }, item.title),
-                    React__default["default"].createElement("div", { className: styles$3.moreText }, item.moreText),
+                    React__default["default"].createElement("div", { className: styles$2.title }, item.title),
+                    React__default["default"].createElement("div", { className: styles$2.moreText }, item.moreText),
                     item.subtitle &&
-                        React__default["default"].createElement("div", { className: styles$3.subtitle }, item.subtitle),
+                        React__default["default"].createElement("div", { className: styles$2.subtitle }, item.subtitle),
                     moreActions &&
-                        moreActions.map((moreAction, index) => React__default["default"].createElement("div", { className: styles$3.more_action, key: item.title + index }, moreAction(item.data, index))),
+                        moreActions.map((moreAction, index) => React__default["default"].createElement("div", { className: styles$2.more_action, key: item.title + index }, moreAction(item.data, index))),
                     actions.length > 0 && actions.map((action, idx) => React__default["default"].createElement("div", { key: idx, className: [
-                            styles$3.action,
-                            action.type === "red" && styles$3.red,
-                            action.type === "default" && styles$3.default,
+                            styles$2.action,
+                            action.type === "red" && styles$2.red,
+                            action.type === "default" && styles$2.default,
                         ].join(" "), onClick: (event) => action.onClick(event, item, index) },
                         React__default["default"].createElement(SvgIcon, { iconName: action.iconName }),
                         action.title))))))));
 }
 
-var css_248z$2 = ".styles-module_container__Kl-lB {\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  margin-bottom: 20px;\n}\n\n.styles-module_tab__Veki- {\n  flex: 1;\n  border-radius: 42px;\n  border: 1px solid transparent;\n  border-bottom: 2px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--border-1);\n  background: var(--background-1);\n  color: var(--foreground-1);\n  padding: 16px;\n  text-align: center;\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  font-family: var(--font-1);\n  font-weight: 400;\n}\n.styles-module_tab__Veki-:not(.styles-module_selected__geNE7):active {\n  border: var(--focus-border);\n  box-shadow: var(--focus-shadow);\n  border-bottom: 2px;\n  border-bottom-style: solid;\n  border-bottom-color: var(--primary-1);\n}\n.styles-module_tab__Veki-.styles-module_selected__geNE7 {\n  border-bottom-color: var(--primary-1);\n  background: var(--primary-2);\n  color: var(--primary-1);\n}\n\n@media (max-width: 750px) {\n  .styles-module_container__Kl-lB {\n    gap: 0px;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n  }\n  .styles-module_tab__Veki- {\n    border-radius: 0px;\n  }\n  .styles-module_tab__Veki-:nth-child(1) {\n    border-top-left-radius: 16px;\n  }\n  .styles-module_tab__Veki-:nth-child(2) {\n    border-top-right-radius: 16px;\n  }\n  .styles-module_tab__Veki-:nth-child(3) {\n    border-bottom-left-radius: 16px;\n  }\n  .styles-module_tab__Veki-:nth-child(4) {\n    border-bottom-right-radius: 16px;\n  }\n}";
-var styles$2 = {"container":"styles-module_container__Kl-lB","tab":"styles-module_tab__Veki-","selected":"styles-module_selected__geNE7"};
-styleInject(css_248z$2);
-
-function Tabs({ tabs = [], onSelect = () => { }, selected }) {
-    const [isSelected, setSelected] = React.useState(selected);
-    React.useEffect(() => setSelected(selected), [selected]);
-    const onChange = (value) => {
-        setSelected(value);
-        onSelect(value);
-    };
-    return (React__default["default"].createElement("div", { className: styles$2.container }, tabs.map((tab) => React__default["default"].createElement("div", { className: [styles$2.tab, isSelected == tab.value ? styles$2.selected : styles$2.not_selected].join(" "), key: tab.value, onClick: () => onChange(tab.value) }, tab.title))));
-}
-
-var css_248z$1 = ".styles-module_container__ItBx0 {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n}\n.styles-module_container__ItBx0:hover span {\n  color: var(--primary-1);\n}\n\n.styles-module_container__ItBx0 a {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: var(--foreground-3);\n  padding: 5px 12px;\n  border-radius: 20px;\n  transition: 0.2s ease-in-out;\n}";
-var styles$1 = {"container":"styles-module_container__ItBx0"};
+var css_248z$1 = ".styles-module_container__QFCQs {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: grey;\n  padding: 5px 12px;\n  border-radius: 20px;\n}\n.styles-module_container__QFCQs:hover span {\n  color: var(--primary-1);\n}\n\n.styles-module_container__QFCQs a {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  color: var(--foreground-3);\n  padding: 5px 12px;\n  border-radius: 20px;\n  transition: 0.2s ease-in-out;\n}";
+var styles$1 = {"container":"styles-module_container__QFCQs"};
 styleInject(css_248z$1);
 
 function TextWithIcon({ iconName, label, }) {
@@ -10492,8 +10494,8 @@ function ReactMinimalPieChart(originalProps) {
   }, renderSegments(extendedData, props, revealOverride), renderLabels(extendedData, props), props.children);
 }
 
-var css_248z = "@keyframes styles-module_shine__wdsDw {\n  to {\n    background-position-x: -200%;\n  }\n}\n.styles-module_container__otVky {\n  background: var(--background-1);\n  padding: 18px;\n  border-radius: 20px;\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n  display: flex;\n  flex-direction: row;\n}\n.styles-module_container__otVky.styles-module_loading__e-0U1 {\n  height: 95px;\n  background: linear-gradient(110deg, var(--border-1) 8%, var(--background-2) 18%, var(--border-1) 33%);\n  background-size: 200% 100%;\n  animation: 1.5s styles-module_shine__wdsDw linear infinite;\n}\n.styles-module_container__otVky .styles-module_text__V17nN {\n  flex: 1;\n}\n.styles-module_container__otVky .styles-module_graph__IjvUA svg {\n  width: 40px;\n}\n.styles-module_container__otVky h3 {\n  margin: 0;\n  line-height: 1.8;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_container__otVky p {\n  margin: 0;\n  line-height: 1.8;\n  font-size: 16px;\n  color: var(--foreground-3);\n}";
-var styles = {"container":"styles-module_container__otVky","loading":"styles-module_loading__e-0U1","shine":"styles-module_shine__wdsDw","text":"styles-module_text__V17nN","graph":"styles-module_graph__IjvUA"};
+var css_248z = "@keyframes styles-module_shine__JUYuD {\n  to {\n    background-position-x: -200%;\n  }\n}\n.styles-module_container__Ab2pE {\n  background: var(--background-1);\n  padding: 18px;\n  border-radius: 20px;\n  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n  display: flex;\n  flex-direction: row;\n}\n.styles-module_container__Ab2pE.styles-module_loading__HgjdE {\n  height: 95px;\n  background: linear-gradient(110deg, var(--border-1) 8%, var(--background-2) 18%, var(--border-1) 33%);\n  background-size: 200% 100%;\n  animation: 1.5s styles-module_shine__JUYuD linear infinite;\n}\n.styles-module_container__Ab2pE .styles-module_text__CNO6z {\n  flex: 1;\n}\n.styles-module_container__Ab2pE .styles-module_graph__ynehE svg {\n  width: 40px;\n}\n.styles-module_container__Ab2pE h3 {\n  margin: 0;\n  line-height: 1.8;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--foreground-1);\n  font-family: var(--font-1);\n}\n.styles-module_container__Ab2pE p {\n  margin: 0;\n  line-height: 1.8;\n  font-size: 16px;\n  color: var(--foreground-3);\n}";
+var styles = {"container":"styles-module_container__Ab2pE","loading":"styles-module_loading__HgjdE","shine":"styles-module_shine__JUYuD","text":"styles-module_text__CNO6z","graph":"styles-module_graph__ynehE"};
 styleInject(css_248z);
 
 function UsageCard({ title, subtitle, ratio = 0, loading }) {