PageSourceSearch

https://www.strunz.com/customer/account/create/

html strunz.com collected 2026-10-02 03:17:46 UTC 629,529 bytes, 9,546 lines download raw bytes

1<!doctype html>
2<html lang="de">
3<head >
4    <meta charset="utf-8"/>
5<meta name="title" content="Neues Kundenkonto anlegen"/>
6<meta name="description" content="Hochwertige Eiweißprodukte, Nahrungsergänzungsmittel, Bücher und mehr nach dem FOREVER YOUNG Konzept finden Sie hier im Shop. Jetzt klicken!"/>
7<meta name="robots" content="INDEX,FOLLOW"/>
8<meta name="p:domain_verify" content="11b6734f0b12bd94d5d1d412c2b3fac9"/>
9<meta name="viewport" content="width=device-width, initial-scale=1"/>
10<title>Neues Kundenkonto anlegen</title>
11<script type="text&#x2F;javascript">    window.dataLayer = window.dataLayer || [];
12    function gtag() { dataLayer.push(arguments) }
13
14    window.amConsentManager = window.amConsentManager || {
15        consentStates: {
16            denied: 'denied',
17            granted: 'granted'
18        },
19        storageName: 'amConsentMode',
20        gdprCookie: {
21            cookieGroupName: 'amcookie_allowed',
22            allCookiesAllowed: '0'
23        },
24        defaultConsentTypesData: {"ad_storage":{"default":"0","group":"2"},"analytics_storage":{"default":"0","group":"3"},"ad_user_data":{"default":"0","group":"2"},"ad_personalization":{"default":"0","group":"2"},"functionality_storage":{"default":"0","group":"2"},"personalization_storage":{"default":"0","group":"2"},"security_storage":{"default":"0","group":"1"}},
25        currentStoreId: 1,
26        init: function () {
27            this.initStorage();
28            this.setDefaultConsent();
29        },
30        initStorage: function () {
31            const persistedConsentTypes = this.getPersistedConsentTypeState();
32
33            if (Object.keys(persistedConsentTypes).length !== 0 && !this.shouldResetConsentState(persistedConsentTypes)) {
34                return;
35            }
36
37            let consentState = {};
38            for (const [type, data] of Object.entries(this.defaultConsentTypesData)) {
39                consentState[type] = {
40                    group: data.group,
41                    status: data.default === '1' ? this.consentStates.granted : this.consentStates.denied
42                };
43            }
44
45            this.resetAllowedCookiesGroups();
46            this.persistConsentTypeState(consentState);
47        },
48        setDefaultConsent: function () {
49            gtag('consent', 'default', this.getPersistedConsentTypeStateForGtag());
50        },
51        updateConsent: function (consent) {
52            const storageConsent = this.getPersistedConsentTypeState();
53            const consentState = {...storageConsent, ...consent};
54
55            this.persistConsentTypeState(consentState);
56            gtag('consent', 'update', this.getPersistedConsentTypeStateForGtag());
57        },
58        getConsentTypeStateByGroupIds: function (groups) {
59            let consentTypeState = {};
60
61            for (const [type, data] of Object.entries(this.defaultConsentTypesData)) {
62                consentTypeState[type] = {
63                    group: data.group,
64                    status: (groups.includes(data.group) || groups.includes(this.gdprCookie.allCookiesAllowed))
65                        ? this.consentStates.granted
66                        : this.consentStates.denied
67                }
68            }
69
70            return consentTypeState;
71        },
72        persistConsentTypeState: function (consentTypeState) {
73            let persistedState = this.getPersistedConsentTypeState(false);
74            persistedState[this.currentStoreId] = consentTypeState;
75            localStorage.setItem(this.storageName, JSON.stringify(persistedState));
76        },
77        getPersistedConsentTypeState: function (forCurrentStore = true) {
78            let persistedStates = JSON.parse(localStorage.getItem(this.storageName)) ?? {};
79
80            if (forCurrentStore) {
81                return persistedStates?.[this.currentStoreId] ?? {};
82            }
83
84            return persistedStates;
85        },
86        getPersistedConsentTypeStateForGtag: function () {
87            let consentTypeState = {};
88            let persistedState = this.getPersistedConsentTypeState();
89
90            for (const [type, data] of Object.entries(persistedState)) {
91                consentTypeState[type] = data.status;
92            }
93
94            return consentTypeState;
95        },
96        shouldResetConsentState: function (persistedConsentTypes) {
97            if (Object.keys(persistedConsentTypes).length != Object.keys(this.defaultConsentTypesData).length
98                || !document.cookie.includes(this.gdprCookie.cookieGroupName)
99            ) {
100                return true;
101            }
102
103            for (const [type, data] of Object.entries(persistedConsentTypes)) {
104                if (data.group !== this.defaultConsentTypesData[type].group) {
105                    return true;
106                }
107            }
108
109            return false;
110        },
111        resetAllowedCookiesGroups: function () {
112            document.cookie = this.gdprCookie.cookieGroupName + '=0;max-age=-1;domain=' + location.hostname;
113        }
114    };
115
116    window.amConsentManager.init();</script>
116        <link rel="stylesheet" type="text/css" media="all" href="https://www.strunz.com/static/version1790749608/frontend/Foryou/hyva_child/de_DE/css/styles.min.css" />
117<link rel="preload" as="font" crossorigin="anonymous" href="https://www.strunz.com/static/version1790749608/frontend/Foryou/hyva_child/de_DE/fonts/NiveauGrotesk/NiveauGroteskRegular.woff2" />
118<link rel="preload" as="font" crossorigin="anonymous" href="https://www.strunz.com/static/version1790749608/frontend/Foryou/hyva_child/de_DE/fonts/NiveauGrotesk/NiveauGroteskBold.woff2" />
119<link rel="preload" as="font" crossorigin="anonymous" href="https://www.strunz.com/static/version1790749608/frontend/Foryou/hyva_child/de_DE/fonts/NiveauGrotesk/NiveauGroteskMedium.woff2" />
120<link rel="icon" type="image/x-icon" href="https://www.strunz.com/media/favicon/stores/1/favicon-32x32.png" />
121<link rel="shortcut icon" type="image/x-icon" href="https://www.strunz.com/media/favicon/stores/1/favicon-32x32.png" />
122<meta name="google-site-verification" content="UUpAqX9sWl_MA-kYpf1iAwWIPgTcQjslWmN7d5rMS0Q" />
123<link rel="apple-touch-icon" sizes="180x180" href="https://www.strunz.com/media/favicon/apple-touch-icon-2026.png" />    
123<script>
124    document.addEventListener("DOMContentLoaded", function () {
125        const pageLoadedAt = Date.now();
126        const inputsHoneySpamCheckTimeSubmit = document.querySelectorAll('input[name="honey_spam_focus_submit_times"]');
127        window.jajumaHoneySpamTimeCheck = window.jajumaHoneySpamTimeCheck || {};
128        inputsHoneySpamCheckTimeSubmit.forEach(input => {
129            const closestForm = input.closest('form');
130            if (closestForm) {
131                const honeySpamFormInput = closestForm.querySelector('input[name="honey_spam_form"]');
132                const valueHoneySpamForm = honeySpamFormInput
133                    ? honeySpamFormInput.value
134                    : Math.random().toString(36).substring(2, 10);
135                window.jajumaHoneySpamTimeCheck[valueHoneySpamForm] = window.jajumaHoneySpamTimeCheck[valueHoneySpamForm] || '';
136                const inputsHoneySpamCheck = closestForm.querySelectorAll('input:not([type="hidden"]), textarea');
137                inputsHoneySpamCheck.forEach(inputForm => {
138                    inputForm.addEventListener('focus', function () {
139                        if (!window.jajumaHoneySpamTimeCheck[valueHoneySpamForm]) {
140                            window.jajumaHoneySpamTimeCheck[valueHoneySpamForm] = Date.now();
141                        }
142                    });
143                });
144
145                const stampHoneySpamTimestamp = () => {
146                    // No focus recorded (e.g. TinyMCE swallowed it) → fall back to page-load time
147                    const focusedAt = window.jajumaHoneySpamTimeCheck[valueHoneySpamForm] || pageLoadedAt;
148                    const inputFocusSubmitTimeCheck = closestForm.querySelector(
149                        'input[name="honey_spam_focus_submit_times"]'
150                    );
151                    if (inputFocusSubmitTimeCheck) {
152                        inputFocusSubmitTimeCheck.value = focusedAt + '_' + Date.now();
153                    }
154                };
155
156                // Stamp during the submit event dispatch — the value persists in the hidden
157                // input, so a later programmatic $form.submit() (e.g. after the async
158                // reCAPTCHA token arrived) still posts it.
159                // Do not preventDefault or call form.submit() — that broke async reCAPTCHA tokens.
160                closestForm.addEventListener('submit', function () {
161                    if (closestForm.id && closestForm.id === 'review_form') {
162                        return;
163                    }
164                    stampHoneySpamTimestamp();
165                }, true);
166            }
167        });
168    });
169</script>
169
170    <!-- GTM Container Loader By GTM Server Side plugin -->
171<script>!function(){"use strict";function l(e){for(var t=e,r=0,n=document.cookie.split(";");r<n.length;r++){var o=n[r].split("=");if(o[0].trim()===t)return o[1]}}function s(e){return localStorage.getItem(e)}function u(e){return window[e]}function A(e,t){e=document.querySelector(e);return t?null==e?void 0:e.getAttribute(t):null==e?void 0:e.textContent}var e=window,t=document,r="script",n="dataLayer",o="https://tsz.strunz.com",a="",i="AtWkunxovtv",c="hb0l7y=aWQ9R1RNLUtUV0g5Tk5C&page=1",g="cookie",v="_sbp",E="",d=!1;try{var d=!!g&&(m=navigator.userAgent,!!(m=new RegExp("Version/([0-9._]+)(.*Mobile)?.*Safari.*").exec(m)))&&16.4<=parseFloat(m[1]),f="stapeUserId"===g,I=d&&!f?function(e,t,r){void 0===t&&(t="");var n={cookie:l,localStorage:s,jsVariable:u,cssSelector:A},t=Array.isArray(t)?t:[t];if(e&&n[e])for(var o=n[e],a=0,i=t;a<i.length;a++){var c=i[a],c=r?o(c,r):o(c);if(c)return c}else console.warn("invalid uid source",e)}(g,v,E):void 0;d=d&&(!!I||f)}catch(e){console.error(e)}var m=e,g=(m[n]=m[n]||[],m[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"}),t.getElementsByTagName(r)[0]),v=I?"&bi="+encodeURIComponent(I):"",E=t.createElement(r),f=(d&&(i=8<i.length?i.replace(/([a-z]{8}$)/,"kp$1"):"kp"+i),!d&&a?a:o);E.async=!0,E.src=f+"/"+i+".js?"+c+v,null!=(e=g.parentNode)&&e.insertBefore(E,g)}();</script>
171<!-- END of GTM Container Loader By GTM Server Side plugin -->
172
173
174<script>
175    var BASE_URL = 'https://www.strunz.com/';
176    var THEME_PATH = 'https://www.strunz.com/static/version1790749608/frontend/Foryou/hyva_child/de_DE';
177    var COOKIE_CONFIG = {
178        "expires": null,
179        "path": "\u002F",
180        "domain": ".www.strunz.com",
181        "secure": true,
182        "lifetime": "3600",
183        "cookie_restriction_enabled": false    };
184    var CURRENT_STORE_CODE = 'default';
185    var CURRENT_WEBSITE_ID = '1';
186
187    window.hyva = window.hyva || {}
188
189    window.cookie_consent_groups = window.cookie_consent_groups || {}
190    window.cookie_consent_groups['necessary'] = true;
191
192    window.cookie_consent_config = window.cookie_consent_config || {};
193    window.cookie_consent_config['necessary'] = [].concat(
194        window.cookie_consent_config['necessary'] || [],
195        [
196            'user_allowed_save_cookie',
197            'form_key',
198            'mage-messages',
199            'private_content_version',
200            'mage-cache-sessid',
201            'last_visited_store',
202            'section_data_ids'
203        ]
204    );
205    //# sourceURL=hyva-variables.js
206</script>
vendor: 1 bytes, line 206
206
207<script>
208    (function( hyva, undefined ) {
209
210        function lifetimeToExpires(options, defaults) {
211
212            const lifetime = options.lifetime || defaults.lifetime;
213
214            if (lifetime) {
215                const date = new Date;
216                date.setTime(date.getTime() + lifetime * 1000);
217                return date;
218            }
219
220            return null;
221        }
222
223        function generateRandomString() {
224
225            const allowedCharacters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
226                length = 16;
227
228            let formKey = '',
229                charactersLength = allowedCharacters.length;
230
231            for (let i = 0; i < length; i++) {
232                formKey += allowedCharacters[Math.round(Math.random() * (charactersLength - 1))]
233            }
234
235            return formKey;
236        }
237
238        const sessionCookieMarker = {noLifetime: true}
239
240        const cookieTempStorage = {};
241
242        const internalCookie = {
243            get(name) {
244                const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
245                return v ? v[2] : null;
246            },
247            set(name, value, days, skipSetDomain) {
248                let expires,
249                    path,
250                    domain,
251                    secure,
252                    samesite;
253
254                const defaultCookieConfig = {
255                    expires: null,
256                    path: '/',
257                    domain: null,
258                    secure: false,
259                    lifetime: null,
260                    samesite: 'lax'
261                };
262
263                const cookieConfig = window.COOKIE_CONFIG || {};
264
265                expires = days && days !== sessionCookieMarker
266                    ? lifetimeToExpires({lifetime: 24 * 60 * 60 * days, expires: null}, defaultCookieConfig)
267                    : lifetimeToExpires(window.COOKIE_CONFIG, defaultCookieConfig) || defaultCookieConfig.expires;
268
269                path = cookieConfig.path || defaultCookieConfig.path;
270                domain = !skipSetDomain && (cookieConfig.domain || defaultCookieConfig.domain);
271                secure = cookieConfig.secure || defaultCookieConfig.secure;
272                samesite = cookieConfig.samesite || defaultCookieConfig.samesite;
273
274                document.cookie = name + "=" + encodeURIComponent(value) +
275                    (expires && days !== sessionCookieMarker ? '; expires=' + expires.toGMTString() : '') +
276                    (path ? '; path=' + path : '') +
277                    (domain ? '; domain=' + domain : '') +
278                    (secure ? '; secure' : '') +
279                    (samesite ? '; samesite=' + samesite : 'lax');
280            },
281            isWebsiteAllowedToSaveCookie() {
282                const allowedCookies = this.get('user_allowed_save_cookie');
283                if (allowedCookies) {
284                    const allowedWebsites = JSON.parse(unescape(allowedCookies));
285
286                    return allowedWebsites[CURRENT_WEBSITE_ID] === 1;
287                }
288                return false;
289            },
290            getGroupByCookieName(name) {
291                const cookieConsentConfig = window.cookie_consent_config || {};
292                let group = null;
293                for (let prop in cookieConsentConfig) {
294                    if (!cookieConsentConfig.hasOwnProperty(prop)) continue;
295                    if (cookieConsentConfig[prop].includes(name)) {
296                        group = prop;
297                        break;
298                    }
299                }
300                return group;
301            },
302            isCookieAllowed(name) {
303                const cookieGroup = this.getGroupByCookieName(name);
304                return cookieGroup
305                    ? window.cookie_consent_groups[cookieGroup]
306                    : this.isWebsiteAllowedToSaveCookie();
307            },
308            saveTempStorageCookies() {
309                for (const [name, data] of Object.entries(cookieTempStorage)) {
310                    if (this.isCookieAllowed(name)) {
311                        this.set(name, data['value'], data['days'], data['skipSetDomain']);
312                        delete cookieTempStorage[name];
313                    }
314                }
315            }
316        };
317
318        hyva.getCookie = (name) => {
319            const cookieConfig = window.COOKIE_CONFIG || {};
320
321            if (cookieConfig.cookie_restriction_enabled && ! internalCookie.isCookieAllowed(name)) {
322                return cookieTempStorage[name] ? cookieTempStorage[name]['value'] : null;
323            }
324
325            return internalCookie.get(name);
326        }
327
328        hyva.setCookie = (name, value, days, skipSetDomain) => {
329            const cookieConfig = window.COOKIE_CONFIG || {};
330
331            if (cookieConfig.cookie_restriction_enabled && ! internalCookie.isCookieAllowed(name)) {
332                cookieTempStorage[name] = {value, days, skipSetDomain};
333                return;
334            }
335            return internalCookie.set(name, value, days, skipSetDomain);
336        }
337
338
339        hyva.setSessionCookie = (name, value, skipSetDomain) => {
340            return hyva.setCookie(name, value, sessionCookieMarker, skipSetDomain)
341        }
342
343        hyva.getBrowserStorage = () => {
344            const browserStorage = window.localStorage || window.sessionStorage;
345            if (!browserStorage) {
346                console.warn('Browser Storage is unavailable');
347                return false;
348            }
349            try {
350                browserStorage.setItem('storage_test', '1');
351                browserStorage.removeItem('storage_test');
352            } catch (error) {
353                console.warn('Browser Storage is not accessible', error);
354                return false;
355            }
356            return browserStorage;
357        }
358
359        hyva.postForm = (postParams) => {
360            const form = document.createElement("form");
361
362            let data = postParams.data;
363
364            if (! postParams.skipUenc && ! data.uenc) {
365                data.uenc = btoa(window.location.href);
366            }
367            form.method = "POST";
368            form.action = postParams.action;
369
370            Object.keys(postParams.data).map(key => {
371                const field = document.createElement("input");
372                field.type = 'hidden'
373                field.value = postParams.data[key];
374                field.name = key;
375                form.appendChild(field);
376            });
377
378            const form_key = document.createElement("input");
379            form_key.type = 'hidden';
380            form_key.value = hyva.getFormKey();
381            form_key.name="form_key";
382            form.appendChild(form_key);
383
384            document.body.appendChild(form);
385
386            form.submit();
387        }
388
389        hyva.getFormKey = function () {
390            let formKey = hyva.getCookie('form_key');
391
392            if (!formKey) {
393                formKey = generateRandomString();
394                hyva.setCookie('form_key', formKey);
395            }
396
397            return formKey;
398        }
399
400        hyva.formatPrice = (value, showSign, options = {}) => {
401            const groupSeparator = options.groupSeparator;
402            const decimalSeparator = options.decimalSeparator
403            delete options.groupSeparator;
404            delete options.decimalSeparator;
405            const formatter = new Intl.NumberFormat(
406                'de\u002DDE',
407                Object.assign({
408                    style: 'currency',
409                    currency: 'EUR',
410                    signDisplay: showSign ? 'always' : 'auto'
411                }, options)
412            );
413            return (typeof Intl.NumberFormat.prototype.formatToParts === 'function') ?
414                formatter.formatToParts(value).map(({type, value}) => {
415                    switch (type) {
416                        case 'currency':
417                            return '\u20AC' || value;
418                        case 'minusSign':
419                            return '- ';
420                        case 'plusSign':
421                            return '+ ';
422                        case 'group':
423                            return groupSeparator !== undefined ? groupSeparator : value;
424                        case 'decimal':
425                            return decimalSeparator !== undefined ? decimalSeparator : value;
426                        default :
427                            return value;
428                    }
429                }).reduce((string, part) => string + part) :
430                formatter.format(value);
431        }
432
433        const formatStr = function (str, nStart) {
434            const args = Array.from(arguments).slice(2);
435
436            return str.replace(/(%+)([0-9]+)/g, (m, p, n) => {
437                const idx = parseInt(n) - nStart;
438
439                if (args[idx] === null || args[idx] === void 0) {
440                    return m;
441                }
442                return p.length % 2
443                    ? p.slice(0, -1).replace('%%', '%') + args[idx]
444                    : p.replace('%%', '%') + n;
445            })
446        }
447
448        hyva.str = function (string) {
449            const args = Array.from(arguments);
450            args.splice(1, 0, 1);
451
452            return formatStr.apply(undefined, args);
453        }
454
455        hyva.strf = function () {
456            const args = Array.from(arguments);
457            args.splice(1, 0, 0);
458
459            return formatStr.apply(undefined, args);
460        }
461
462        /**
463         * Take a html string as `content` parameter and
464         * extract an element from the DOM to replace in
465         * the current page under the same selector,
466         * defined by `targetSelector`
467         */
468        hyva.replaceDomElement = (targetSelector, content) => {
469            // Parse the content and extract the DOM node using the `targetSelector`
470            const parser = new DOMParser();
471            const doc = parser.parseFromString(content, 'text/html');
472            const contentNode = doc.querySelector(targetSelector);
473
474            // Bail if content or target can't be found
475            if (!contentNode || !document.querySelector(targetSelector)) {
476                return;
477            }
478
479                        hyva.activateScripts(contentNode);
480            
481            // Replace the old DOM node with the new content
482            document.querySelector(targetSelector).replaceWith(contentNode);
483
484            // Reload customerSectionData and display cookie-messages if present
485            window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
486            hyva.initMessages();
487        }
488
489        hyva.removeScripts = (contentNode) => {
490            const scripts = contentNode.getElementsByTagName('script');
491            for (let i = 0; i < scripts.length; i++) {
492                scripts[i].parentNode.removeChild(scripts[i]);
493            }
494            const templates = contentNode.getElementsByTagName('template');
495            for (let i = 0; i < templates.length; i++) {
496                const container = document.createElement('div');
497                container.innerHTML = templates[i].innerHTML;
498                hyva.removeScripts(container);
499                templates[i].innerHTML = container.innerHTML;
500            }
501        }
502
503        hyva.activateScripts = (contentNode) => {
504            // Create new array from HTMLCollection to avoid mutation of collection while manipulating the DOM.
505            const scripts = Array.from(contentNode.getElementsByTagName('script'));
506
507            // Iterate over all script tags to duplicate+inject each into the head
508            for (const original of scripts) {
509                const script = document.createElement('script');
510                original.type && (script.type = original.type);
511                script.innerHTML = original.innerHTML;
512
513                // Remove the original (non-executing) script from the contentNode
514                original.parentNode.removeChild(original)
515
516                // Add script to head
517                document.head.appendChild(script);
518            }
519
520            return contentNode;
521        }
522
523        const replace = {['+']: '-', ['/']: '_', ['=']: ','};
524        hyva.getUenc = () => btoa(window.location.href).replace(/[+/=]/g, match => replace[match]);
525
526        let currentTrap;
527
528        const focusableElements = (rootElement) => {
529            const selector = 'button, [href], input, select, textarea, details, [tabindex]:not([tabindex="-1"]';
530            return Array.from(rootElement.querySelectorAll(selector))
531                .filter(el => {
532                    return el.style.display !== 'none'
533                        && !el.disabled
534                        && el.tabIndex !== -1
535                        && (el.offsetWidth || el.offsetHeight || el.getClientRects().length)
536                })
537        }
538
539        const focusTrap = (e) => {
540            const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
541            if (!isTabPressed) return;
542
543            const focusable = focusableElements(currentTrap)
544            const firstFocusableElement = focusable[0]
545            const lastFocusableElement = focusable[focusable.length - 1]
546
547            e.shiftKey
548                ? document.activeElement === firstFocusableElement && (lastFocusableElement.focus(), e.preventDefault())
549                : document.activeElement === lastFocusableElement && (firstFocusableElement.focus(), e.preventDefault())
550        };
551
552        hyva.releaseFocus = (rootElement) => {
553            if (currentTrap && (!rootElement || rootElement === currentTrap)) {
554                currentTrap.removeEventListener('keydown', focusTrap)
555                currentTrap = null
556            }
557        }
558        hyva.trapFocus = (rootElement) => {
559            if (!rootElement) return;
560            hyva.releaseFocus()
561            currentTrap = rootElement
562            rootElement.addEventListener('keydown', focusTrap)
563            const firstElement = focusableElements(rootElement)[0]
564            firstElement && firstElement.focus()
565        }
566
567        hyva.safeParseNumber = (rawValue) => {
568            const number = rawValue ? parseFloat(rawValue) : null;
569
570            return Array.isArray(number) || isNaN(number) ? rawValue : number;
571        }
572
573        const toCamelCase = s => s.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
574        hyva.createBooleanObject = (name, value = false, additionalMethods = {}) => {
575
576            const camelCase = toCamelCase(name);
577            const key = '__hyva_bool_' + name
578
579            return new Proxy(Object.assign(
580                additionalMethods,
581                {
582                    [key]: !!value,
583                    [name]() {return !!this[key]},
584                    ['!' + name]() {return !this[key]}, // @deprecated This does not work with non-CSP Alpine
585                    ['not' + camelCase]() {return !this[key]},
586                    ['toggle' + camelCase]() {this[key] = !this[key]},
587                    [`set${camelCase}True`]() {this[key] = true},
588                    [`set${camelCase}False`]() {this[key] = false},
589                }
590            ), {
591                set(target, prop, value) {
592                    return prop === name
593                        ? (target[key] = !!value)
594                        : Reflect.set(...arguments);
595                }
596            })
597        }
598
599                hyva.alpineInitialized = (fn) => window.addEventListener('alpine:initialized', fn, {once: true})
600        window.addEventListener('alpine:init', () => Alpine.data('{}', () => ({})), {once: true});
601                window.addEventListener('user-allowed-save-cookie', () => internalCookie.saveTempStorageCookies())
602
603    }( window.hyva = window.hyva || {} ));
604    //# sourceURL=hyva.js
605</script>
vendor: 1 bytes, line 605
605
606<script type="speculationrules">
607{
608    "tag": "Hyva Theme",
609    "prefetch": [{
610        "source": "document",
611        "where": {
612            "and": [
613                { "href_matches": "/*" },
614                { "not": {
615                    "href_matches": ["/customer/*","/search/*","/sales/*","/wishlist/*","/checkout/*","/paypal/*","/newsletter/*","/stores/store/redirect/*"]                }},
616                { "not": {
617                    "selector_matches": [".no-preload", ".do-not-prerender", "[download]", "[rel~=nofollow]", "[target]"]
618                }}
619            ]
620        },
621        "eagerness": "moderate"
622    }]
623}
624</script>
624
625
626<script>
627    const viewTransitionToGalleryPageStorage = 'view-transition-to-gallery-page-type';
628    const setTransitionNameBetweenGallery = async (url, promise) => {
629        if (window.matchMedia('(prefers-reduced-motion)').matches) return;
630
631        const productGallery = document.getElementById('gallery-main');
632        const productListItem = document.querySelector(`.product-item-photo[href="${url}"]`);
633        const targetElement = productListItem || productGallery;
634
635        if (targetElement) {
636            targetElement.style.viewTransitionName = 'view-transition-to-gallery';
637
638            await promise;
639            targetElement.style.viewTransitionName = '';
640        }
641    };
642
643    const getViewTransitionToGalleryPageIsProduct = () => {
644        return document.body.classList.contains('catalog-product-view') ? 'product-page' : 'other'
645    }
646
647    window.addEventListener('pageswap', async (e) => {
648        if (!e.viewTransition) return;
649        const pageType = getViewTransitionToGalleryPageIsProduct();
650        const target = new URL(e.activation.entry.url);
651
652        sessionStorage.setItem(viewTransitionToGalleryPageStorage, pageType);
653        setTransitionNameBetweenGallery(target.href, e.viewTransition.finished);
654    });
655
656    window.addEventListener('pagereveal', async (e) => {
657        if (!e.viewTransition || (window.navigation && !window.navigation.activation.from)) return;
658        const previousPageType = sessionStorage.getItem(viewTransitionToGalleryPageStorage);
659        const pageType = getViewTransitionToGalleryPageIsProduct();
660        sessionStorage.removeItem(viewTransitionToGalleryPageStorage);
661
662        if (previousPageType === pageType) return;
663        const target = new URL(window.navigation.activation.from.url);
664        setTransitionNameBetweenGallery(target.href, e.viewTransition.ready);
665    });
666</script>
666
667</head>
668<body id="html-body" class="customer-account-create page-layout-1column">
669    
669<script>
670        (() => {
671            if (typeof window.hyva === 'undefined') {
672                window.hyva = {};
673            }
674
675            // Cookie und DOM Selektoren
676            const SELECTORS = {
677                ALLOW_BUTTON: 'cookiebar-action-allow',
678                COOKIE_NAME: 'amcookie_allowed',
679                SAVE_BUTTON: 'cookiebar-action-save',
680                DEBUG_COOKIE: 'hyva_debug'
681            };
682
683            /**
684             * Prüft ob bestimmte Cookie-Kategorien erlaubt sind
685             * @param {string} checkValues - Zu prüfende Gruppen-IDs komma-separiert (z.B. "2,3" für Marketing UND Statistik)
686             * Gruppen-IDs (amasty_gdprcookie_group):
687             * "1": Technisch notwendige
688             * "2": Marketing
689             * "3": Statistik
690             * Sonderfall: der Cookie-Wert "0" ist Amastys Sentinel für "alle Gruppen erlaubt"
691             * (Button "Alle akzeptieren") — nicht "nichts erlaubt".
692             *
693             * @returns {boolean} True nur wenn ALLE angegebenen Cookie-Kategorien erlaubt sind
694             */
695            window.hyva.isConsentGranted = function (checkValues) {
696                const value = window.hyva.getCookie(SELECTORS.COOKIE_NAME);
697
698                // Wenn kein Cookie existiert
699                if (!value) return false;
700
701                // URL-decode des Cookie-Werts
702                const decodedValue = decodeURIComponent(value);
703
704                // Wenn alle Cookies erlaubt sind
705                if (decodedValue === '0') return true;
706
707                // Prüfe ob die angefragten Kategorien im Cookie-Wert enthalten sind
708                const cookieValues = decodedValue.split(',');
709                const requestedValues = checkValues.split(',').map(v => v.trim());
710
711                // every(): eine Teil-Einwilligung darf nicht für die ganze Anfrage genügen
712                return requestedValues.every(val => cookieValues.includes(val));
713            }
714
715            /**
716             * Führt eine Callback-Funktion aus, wenn die Cookie-Einstellungen gespeichert oder erlaubt werden
717             * @param {Function} callback - Funktion die ausgeführt werden soll
718             */
719            window.hyva.onCookieSettingsChanged = function (callback) {
720                const allowButton = document.getElementById(SELECTORS.SAVE_BUTTON);
721                if (allowButton) {
722                    allowButton.addEventListener('click', () => {
723                        setTimeout(() => {
724                            callback();
725                        }, 1500);
726                    });
727                }
728            }
729
730            /**
731             * Führt eine Callback-Funktion aus, wenn der Allow-Button geklickt wird
732             * @param {Function} callback - Funktion die ausgeführt werden soll
733             */
734            window.hyva.onCookieAllowButtonClick = function (callback) {
735                const allowButton = document.getElementById(SELECTORS.ALLOW_BUTTON);
736                if (allowButton) {
737                    allowButton.addEventListener('click', () => {
738                        setTimeout(() => {
739                            callback();
740                        }, 1500);
741                    });
742                }
743            }
744
745            // Debug Handler by Cookie
746            window.hyva.debug = function (enabled) {
747                try {
748                    if (enabled) {
749                        hyva.setCookie(SELECTORS.DEBUG_COOKIE, 'true', 1);
750                        console.log('Debug mode enabled (expires in 24h)');
751                    } else {
752                        hyva.setCookie(SELECTORS.DEBUG_COOKIE, '', -1);
753                        console.log('Debug mode disabled');
754                    }
755                    return enabled;
756                } catch (e) {
757                    console.warn('Debug function error:', e);
758                    return false;
759                }
760            };
761
762            // Debug Status Getter
763            window.hyva.isDebug = function () {
764                return hyva.getCookie(SELECTORS.DEBUG_COOKIE) === 'true';
765            };
766        })();
767    </script>
767
768<style>
769    .checkout-index-index .control._with-tooltip select {
770        margin-right: 12px;
771        width: calc(100% - 39px);
772    }
773</style>
774<script>    var et_pagename = 'Neues%20Kundenkonto%20anlegen';
775    var et_areas = '%2Fcustomer%2Faccount%2Fcreate';
776    var _etr = { debugMode :false };</script>
776
777
778<script id="_etLoader"
779        charset="UTF-8"
780        data-block-cookies="true"
781        data-secure-code="5dVroE"
782        src="//code.etracker.com/code/e.js"
783        data-plugin-version="Magento2_1.7.2"
784        async>
785</script>
785
786
787<script type="text&#x2F;x-magento-init">{
788    "*": {
789        "Etracker_Etracker/js/etracker": {
790        }
791    }
792}</script>
vendor: 1 bytes, line 792
792
793<script>
794    (function () {
795        'use strict';
796
797        var YOUTUBE_SRC_PATTERN = /^https?:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\//;
798
799        // Once consent is granted, our own code (e.g. gallery.phtml's YouTube IFrame API player) legitimately
800        // creates real YouTube iframes - this observer must never touch those, or it silently breaks
801        // playback for every consenting visitor.
802        function isConsentAlreadyGranted() {
803            return !!(window.Alpine && Alpine.store('youtubeConsent') && Alpine.store('youtubeConsent').allowed);
804        }
805
806        // Secondary net only. The CMS iframe rewrite (Foryou\General\Model\Video\YoutubeEmbedRewriter) and
807        // the patched templates are what guarantee "no request before the first click" for everything known
808        // to render a YouTube iframe today. This only catches an iframe injected later by client-side JS
809        // (e.g. a future widget) that neither of those cover, and logs the miss in debug mode so it can get
810        // its own server-side placeholder instead of relying on this net.
811        function neutralize(iframe) {
812            if (iframe.dataset.fyYoutubeNeutralized || isConsentAlreadyGranted()) {
813                return;
814            }
815            iframe.dataset.fyYoutubeNeutralized = '1';
816            var src = iframe.getAttribute('src');
817            iframe.removeAttribute('src');
818            if (window.hyva && typeof window.hyva.isDebug === 'function' && window.hyva.isDebug()) {
819                console.warn(
820                    '[youtube-2click] client-injected YouTube iframe caught by the fallback observer - '
821                    + 'needs its own server-side placeholder:',
822                    src,
823                    iframe
824                );
825            }
826        }
827
828        function scanForYoutubeIframes(node) {
829            if (!(node instanceof Element)) {
830                return;
831            }
832            if (node.tagName === 'IFRAME' && YOUTUBE_SRC_PATTERN.test(node.getAttribute('src') || '')) {
833                neutralize(node);
834                return;
835            }
836            if (typeof node.querySelectorAll !== 'function') {
837                return;
838            }
839            node.querySelectorAll('iframe[src]').forEach(function (iframe) {
840                if (YOUTUBE_SRC_PATTERN.test(iframe.getAttribute('src') || '')) {
841                    neutralize(iframe);
842                }
843            });
844        }
845
846        // Deliberately childList-only, no attributes/attributeFilter: our own placeholder iframe
847        // (see RenderYoutubePlaceholder) sets its src via Alpine's :src once consent is granted, and an
848        // attribute watch here would immediately "neutralize" that legitimate src change too. Extending
849        // this to catch src attribute changes on already-present iframes would need to first exclude nodes
850        // inside our own placeholder markup.
851        new MutationObserver(function (mutations) {
852            mutations.forEach(function (mutation) {
853                mutation.addedNodes.forEach(scanForYoutubeIframes);
854            });
855        }).observe(document.documentElement, {childList: true, subtree: true});
856    })();
857</script>
857
858<input name="form_key" type="hidden" value="ibGanbYtvnza1N9t" />
859    <noscript>
860        <section
861            class="message global noscript border-b-2 border-blue-500 bg-blue-50 shadow-none m-0 px-0 rounded-none font-normal"
862            aria-labelledby="messageGlobalNoScriptMessage"
863        >
864            <div class="container text-center">
865                <p id="messageGlobalNoScriptMessage">
866                    <strong>JavaScript scheint in Ihrem Browser deaktiviert zu sein.</strong>
867                    <span>
868                        Um unsere Website in bester Weise zu erfahren, aktivieren Sie Javascript in Ihrem Browser.                    </span>
869                </p>
870            </div>
871        </section>
872    </noscript>
873
874
875<script>
876    document.body.addEventListener('touchstart', () => {}, {passive: true})
877</script>
877
878
879
880<script>
881    'use strict';
882
883    (function () {
884        window.amGdprCookieBar = {
885            isEnabled: 1,
886
887            /**
888             * @public
889             * @returns {int}
890             */
891            getIsEnabled() {
892                return this.isEnabled;
893            }
894        }
895    })();
896</script>
896
897
898<script data-cfasync="false">
899    window.amastyCookieManager = window.amastyCookieManager || {};
900</script>
900
901
902<script>
903    (function(hyva) {
904                const formValidationRules = {
905            required(value, options, field, context) {
906                const el = field.element.type === 'hidden' ? createTextInputFrom(field.element) : field.element,
907                    fieldName = getFieldName(field),
908                    msg = fieldName
909                        ? hyva.str('\u00251\u0020ist\u0020ein\u0020Pflichtfeld.', fieldName)
910                        : 'Dies\u0020ist\u0020ein\u0020Pflichtfeld.';
911
912                if (el.type === 'radio' || el.type === 'checkbox') {
913                    return (value === undefined || value.length === 0) ? msg : true;
914                }
915
916                el.setAttribute('required', '');
917                el.checkValidity();
918
919                return el.validity.valueMissing ? msg : true;
920            },
921            maxlength(value, options, field, context) {
922                const n = Number(options)
923                if (value.length > n) {
924                    const fieldName = getFieldName(field);
925                    return fieldName
926                        ? n === 1
927                            ? hyva.str('\u00251\u0020field\u0020cannot\u0020be\u0020longer\u0020than\u00201\u0020character.', fieldName)
928                            : hyva.str('\u00251\u0020field\u0020cannot\u0020be\u0020longer\u0020than\u0020\u00252\u0020characters.', fieldName, options)
929                        : n === 1
930                            ? 'Bitte\u0020geben\u0020Sie\u0020nicht\u0020mehr\u0020als\u00201\u0020Zeichen\u0020ein.'
931                            : hyva.strf('Bitte\u0020gebe\u0020nicht\u0020mehr\u0020als\u0020\u00250\u0020Zeichen\u0020ein.', options);
932                }
933                return true;
934            },
935            minlength(value, options, field, context) {
936                const n = Number(options)
937                if (value.length > 0 && value.length < n) {
938                    const fieldName = getFieldName(field);
939                    return fieldName
940                        ? n === 1
941                            ? hyva.str('\u00251\u0020field\u0020must\u0020be\u0020at\u0020least\u00201\u0020character\u0020long.', fieldName)
942                            : hyva.str('\u00251\u0020field\u0020must\u0020be\u0020at\u0020least\u0020\u00252\u0020characters\u0020long.', fieldName, options)
943                        : n === 1
944                            ? 'Bitte\u0020geben\u0020Sie\u0020mindestens\u00201\u0020Zeichen\u0020ein.'
945                            : hyva.strf('Bitte\u0020geben\u0020Sie\u0020mindestens\u0020\u00250\u0020Zeichen\u0020ein.', options);
946                }
947                return true;
948            },
949            max(value, options, field, context) {
950                field.element.setAttribute('max', options);
951                field.element.checkValidity();
952                if (field.element.validity.rangeOverflow) {
953                    const fieldName = getFieldName(field);
954                    return fieldName
955                        ? hyva.str('\u00251\u0020field\u0020must\u0020contain\u0020a\u0020value\u0020less\u0020than\u0020or\u0020equal\u0020to\u0020\u0022\u00252\u0022.', fieldName, options)
956                        : hyva.strf('Bitte\u0020geben\u0020Sie\u0020einen\u0020Wert\u0020kleiner\u0020oder\u0020gleich\u0020\u0022\u00250\u0022\u0020ein.', options);
957                }
958                return true;
959            },
960            min(value, options, field, context) {
961                field.element.setAttribute('min', options);
962                field.element.checkValidity();
963                if (field.element.validity.rangeUnderflow) {
964                    const fieldName = getFieldName(field);
965                    return fieldName
966                        ? hyva.str('\u00251\u0020field\u0020must\u0020contain\u0020a\u0020value\u0020greater\u0020than\u0020or\u0020equal\u0020to\u0020\u0022\u00252\u0022.', fieldName, options)
967                        : hyva.strf('Bitte\u0020geben\u0020Sie\u0020einen\u0020Wert\u0020gr\u00F6\u00DFer\u0020oder\u0020gleich\u0020\u0022\u00250\u0022\u0020ein.', options);
968                }
969                return true;
970            },
971            step(value, options, field, context) {
972                field.element.setAttribute('step', options);
973                field.element.checkValidity();
974                if (field.element.validity.stepMismatch) {
975                    const val = Number(value),
976                        step = Number(options),
977                        fieldName = getFieldName(field),
978                        nearestLowerValue = Math.floor(val / step) * step,
979                        nearestUpperValue = Math.ceil(val / step) * step;
980                    return fieldName
981                        ? hyva.str('\u00251\u0020field\u0020is\u0020invalid.\u0020The\u0020two\u0020nearest\u0020valid\u0020values\u0020are\u0020\u0022\u00252\u0022\u0020and\u0020\u0022\u00253\u0022.', fieldName, nearestLowerValue, nearestUpperValue)
982                        : hyva.strf('Bitte\u0020geben\u0020Sie\u0020einen\u0020g\u00FCltigen\u0020Wert\u0020ein.\u0020Die\u0020zwei\u0020n\u00E4chsten\u0020g\u00FCltigen\u0020Werte\u0020sind\u0020\u0022\u00250\u0022\u0020und\u0020\u0022\u00251\u0022.', nearestLowerValue, nearestUpperValue);
983                }
984                return true;
985            },
986            pattern(value, options, field, context) {
987                field.element.setAttribute('pattern', options);
988                field.element.checkValidity();
989                if (field.element.validity.patternMismatch) {
990                    const fieldName = getFieldName(field);
991                    return fieldName
992                        ? field.element.pattern
993                            ? hyva.str('\u00251\u0020field\u0020must\u0020match\u0020the\u0020requested\u0020format\u003A\u0020\u00252.', fieldName, field.element.pattern)
994                            : hyva.str('\u00251\u0020field\u0020must\u0020match\u0020the\u0020requested\u0020format.', fieldName)
995                        : field.element.pattern
996                            ? hyva.strf('Bitte\u0020verwenden\u0020Sie\u0020das\u0020angeforderte\u0020Format\u003A\u0020\u00250.', field.element.pattern)
997                            : 'Bitte\u0020gebe\u0020das\u0020richtige\u0020Format\u0020ein.';
998                }
999                return true;
1000            },
1001            email(value, options, field, context) {
1002                                const rule = /^([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9,!\#\$%&'\*\+\/=\?\^_`\{\|\}~-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*@([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z0-9-]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*\.(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]){2,})$/i;
1003                if (value.length > 0 && !rule.test(value)) {
1004                    const fieldName = getFieldName(field);
1005                    return fieldName
1006                        ? hyva.str('\u00251\u0020field\u0020must\u0020contain\u0020a\u0020valid\u0020email\u0020address\u0020\u0028Ex\u003A\u0020johndoe\u0040domain.com\u0029.', fieldName)
1007                        : 'Bitte\u0020geben\u0020Sie\u0020eine\u0020g\u00FCltige\u0020E\u002DMail\u002DAdresse\u0020ein\u0020\u0028z.B\u003A\u0020johndoe\u0040domain.com\u0029.';
1008                }
1009                return true;
1010            },
1011            password(value, options, field, context) {
1012                const rule = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/;
1013                if (value.length > 0 && !rule.test(value)) {
1014                    const fieldName = getFieldName(field);
1015                    return fieldName
1016                        ? hyva.str('\u00251\u0020field\u0020must\u0020contain\u0020at\u0020least\u0020one\u0020upper\u0020case,\u0020one\u0020lower\u0020case,\u0020one\u0020digit\u0020and\u0020one\u0020special\u0020character\u0020\u0028\u0023\u003F\u0021\u0040\u0024\u0025\u005E\u0026\u002A\u002D\u0029', fieldName)
1017                        : 'Bitte\u0020verwenden\u0020Sie\u0020mindestens\u0020einen\u0020Gro\u00DFbuchstaben,\u0020einen\u0020Kleinbuchstaben,\u0020eine\u0020Ziffer\u0020und\u0020ein\u0020Sonderzeichen\u0020\u0028\u0023\u003F\u0021\u0040\u0024\u0025\u005E\u0026\u002A\u002D\u0029';
1018                }
1019                return true;
1020            },
1021            equalTo(value, options, field, context) {
1022                const dependencyField = context.fields[options].element;
1023                if (value !== dependencyField.value) {
1024                    const dependencyFieldName =
1025                        dependencyField.label ||
1026                        dependencyField.title ||
1027                        (dependencyField.labels && dependencyField.labels[0] && dependencyField.labels[0].innerText) ||
1028                        dependencyField.name,
1029                        fieldName = getFieldName(field);
1030                    return fieldName
1031                        ? hyva.str('\u00251\u0020field\u0020value\u0020must\u0020be\u0020the\u0020same\u0020as\u0020\u0022\u00252\u0022.', fieldName, dependencyFieldName)
1032                        : hyva.strf('Der\u0020Wert\u0020dieses\u0020Feldes\u0020muss\u0020mit\u0020\u0022\u00250\u0022\u0020\u00FCbereinstimmen.', dependencyFieldName);
1033                }
1034                return true;
1035            }
1036        };
1037
1038                function raceSome(promises, pred) {
1039            return new Promise((resolve, reject) => {
1040
1041                if (promises.length === 0) {
1042                    return resolve();
1043                }
1044
1045                let settled = false, nDone = 0;
1046
1047                const resolveIf = v => {
1048                    if (!settled && (pred(v) || ++nDone === promises.length)) {
1049                        settled = true;
1050                        resolve(v);
1051                    }
1052                    return v;
1053                }
1054
1055                promises.map(promise => {
1056                    promise.then(resolveIf).catch(reason => {
1057                        settled = true;
1058                        reject(reason)
1059                    });
1060                    return promise;
1061                });
1062            });
1063        }
1064
1065        const INPUT_ATTRIBUTE_RULES = {min: 'min', max: 'max', required: 'required', minlength: 'minlength', maxlength: 'maxlength', step: 'step', pattern: 'pattern'}
1066        const INPUT_TYPE_RULES = {email: 'email'}
1067
1068        function getRules(element) {
1069            let rules = {};
1070            Object.keys(INPUT_ATTRIBUTE_RULES).forEach(attrName => {
1071                if (element.hasAttribute(attrName)) {
1072                    rules[INPUT_ATTRIBUTE_RULES[attrName]] = element.getAttribute(attrName);
1073                }
1074            })
1075            if (INPUT_TYPE_RULES[element.type]) {
1076                rules[INPUT_TYPE_RULES[element.type]] = true;
1077            }
1078
1079            if (element.dataset.validate) {
1080                try {
1081                    Object.assign(rules, JSON.parse(element.dataset.validate));
1082                } catch (error) {
1083                    console.error('Validator error. Cannot parse data-validate attribute of element:\n', element);
1084                }
1085            }
1086
1087            return rules;
1088        }
1089
1090        function isInvalidRuleResult(ruleState) {
1091            return typeof ruleState === 'string' || !ruleState || (ruleState.type && ruleState.content);
1092        }
1093
1094        async function runValidateFn(rule, options, value, field) {
1095            return formValidationRules[rule](value, options, field, this);
1096        }
1097
1098        function generateId() {
1099            let id;
1100            do {
1101                id = `${this.idPrefix}-${++this.idSeq}`;
1102            } while (document.getElementById(id));
1103            return id;
1104        }
1105
1106        function isVisible(element) {
1107            const el = element.type !== 'hidden' ? element : (element.parentElement || {});
1108            return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
1109        }
1110
1111        function elementWillValidate(element) {
1112            return (element.willValidate || element.type === 'hidden')
1113                && element.tagName !== 'BUTTON'
1114                && element.disabled === false
1115                && !(element.tagName === 'INPUT' && element.type === 'submit')
1116                && (element.hasAttribute('data-validate-hidden') || isVisible(element))
1117        }
1118
1119        function createMessageContainer(el, fieldWrapperClassName) {
1120            if (! el.parentElement) {
1121                return;
1122            }
1123            const refocus = document.activeElement === el;
1124            const wrapper = document.createElement('div');
1125            wrapper.classList.add.apply(wrapper.classList, fieldWrapperClassName.split(' '));
1126            el.parentElement.insertBefore(wrapper, el);
1127            wrapper.appendChild(el);
1128            refocus && document.activeElement !== el && el.focus();
1129            return wrapper;
1130        }
1131
1132        function containerNotFound(selector, el) {
1133            const msg = `Cannot find message container element ${selector} of ${el.name}`;
1134            console.error(msg, el);
1135            throw msg;
1136        }
1137
1138        function createTextInputFrom(el) {
1139            const text = document.createElement('INPUT');
1140            text.type = 'text';
1141            text.value = el.value;
1142            return text;
1143        }
1144
1145        function classNamesToSelector(classNames) {
1146            return classNames.split(' ')
1147                .filter(className => className.length > 0)
1148                .map(className => `.${className}`)
1149                .join('')
1150        }
1151
1152        function hasMessagesWrapper(field, messagesWrapperClassName) {
1153            return this.getMessageContainer(field).querySelector(classNamesToSelector(messagesWrapperClassName));
1154        }
1155
1156        function getMessagesWrapper(field, messagesWrapperClassName) {
1157            if (hasMessagesWrapper.call(this, field, messagesWrapperClassName)) {
1158                return this.getMessageContainer(field).querySelector(classNamesToSelector(messagesWrapperClassName));
1159            }
1160
1161            const msgWrapper = document.createElement('ul');
1162            const msgId = generateId.call(this);
1163            msgWrapper.id = msgId;
1164            field.element.setAttribute('aria-errormessage', msgId);
1165            field.element.setAttribute('aria-describedby', msgId);
1166            msgWrapper.classList.add.apply(msgWrapper.classList, messagesWrapperClassName.split(' '));
1167            if (field.validateOnChange) {
1168                msgWrapper.setAttribute('aria-live', 'polite');
1169            }
1170            this.getMessageContainer(field).appendChild(msgWrapper);
1171
1172            return msgWrapper;
1173        }
1174
1175        function getCheckedValues(field) {
1176            const name = field.element.name.replace(/([\\"])/g, '\\$1');
1177            const elements = field.element.form.querySelectorAll('input[name="' + name + '"]:checked');
1178            return Array.from(elements).map(el => el.value);
1179        }
1180
1181        function escapeHtml(s) {
1182            const div = document.createElement('div')
1183            div.innerText = s;
1184            return div.innerHTML;
1185        }
1186
1187        
1188        function formValidation(form, options = {}) {
1189            const formElement = form || this.$el;
1190
1191            if (formElement.dataset && formElement.dataset.options) {
1192                try {
1193                    options = Object.assign(options, JSON.parse(formElement.dataset.options || '{}'));
1194                } catch (e) {
1195                    throw new Error('Cannot read the form options from the data-options attribute: not valid JSON');
1196                }
1197            }
1198
1199            // Disable browser default validation
1200            if (formElement.tagName === 'FORM') {
1201                formElement.setAttribute('novalidate', '');
1202            } else {
1203                console.error('formValidation can be initialized only on FORM element', formElement);
1204                return;
1205            }
1206
1207            options = Object.assign({
1208                fieldWrapperClassName: 'field field-reserved',
1209                messagesWrapperClassName: 'messages',
1210                validClassName: 'field-success',
1211                invalidClassName: 'field-error',
1212                pageMessagesWrapperSelector: null,
1213                scrollToFirstError: true,
1214            }, options || {});
1215
1216            return {
1217                state: {
1218                    valid: false,
1219                },
1220                fields: {},
1221                idSeq: 0,
1222                idPrefix: formElement.id || 'vld-msg',
1223                setupFields(elements) {
1224                    this.fields = {};
1225                    Array.from(elements).forEach(element => {
1226                        if (elementWillValidate(element)) {
1227                            this.setupField(element);
1228                        }
1229                    });
1230                },
1231                setupField(element) {
1232                    if (! element) return;
1233                    const onChange = !!element.dataset.onChange;
1234                    if (elementWillValidate(element)) {
1235                        const rules = getRules(element);
1236                        if (Object.keys(rules).length > 0) {
1237                            if (this.fields[element.name]) {
1238                                Object.assign(this.fields[element.name].rules, rules);
1239                            } else {
1240                                this.fields[element.name] = {
1241                                    element,
1242                                    rules: rules,
1243                                    validateOnChange: onChange,
1244                                    state: {
1245                                        valid: null,
1246                                        rules: {}
1247                                    }
1248                                }
1249                            }
1250                        }
1251                    } else {
1252                        console.error('Element will not validate', element);
1253                    }
1254                },
1255                onSubmit(event) {
1256                    if (event.target.tagName === 'FORM') {
1257                        event.preventDefault();
1258
1259                        this.validate()
1260                            .then(() => event.target.submit())
1261                            .catch(invalidElements => {});
1262                    }
1263                },
1264                onChange(event) {
1265                    event.target.dataset.onChange = 'true';
1266                    if (!Object.keys(this.fields).length) {
1267                        this.setupFields(formElement.elements);
1268                    }
1269                    if (!Object.keys(this.fields).includes(event.target.name)) {
1270                        this.setupField(event.target);
1271                    }
1272                    const field = this.fields[event.target.name];
1273
1274                    this.validateField(field);
1275                    field && field.element.removeAttribute('data-on-change')
1276                },
1277                validateSafe() {
1278                    return new Promise(resolve => this.validate().then(() => resolve(true)).catch(() => {}))
1279                },
1280                validate() {
1281                    if (!Object.keys(this.fields).length || !Object.keys(this.fields).length !== formElement.elements.length) {
1282                        this.setupFields(formElement.elements);
1283                    }
1284                    return new Promise(async (resolve, reject) => {
1285                        if (formElement.elements) {
1286                                                        await raceSome(this.validateFields(), result => result !== true)
1287                            const invalidFields = Object.values(this.fields).filter(field => !field.state.valid);
1288                            this.state.valid = invalidFields.length === 0;
1289                            if (this.state.valid) {
1290                                resolve();
1291                            } else {
1292                                if (options.scrollToFirstError && invalidFields.length > 0) {
1293                                    invalidFields[0].element.focus()
1294                                    invalidFields[0].element.select && invalidFields[0].element.select();
1295                                }
1296                                reject(invalidFields.map(field => field.element));
1297                            }
1298                        }
1299                    });
1300                },
1301                                validateFields() {
1302                    const fields = Object.values(this.fields);
1303
1304                                        fields.forEach(field => {
1305                        this.getMessageContainer(field).classList.remove(options.validClassName, options.invalidClassName)
1306                    });
1307                                        return fields.map(field => this.validateField(field))
1308                },
1309                                validateField(field) {
1310                                        if (! field || ! elementWillValidate(field.element)) {
1311                        return new Promise(resolve => resolve(true))
1312                    }
1313
1314                    let value;
1315                    if (field.element.type === 'checkbox') {
1316                        value = getCheckedValues(field);
1317                    } else if (field.element.type === 'radio') {
1318                        value = getCheckedValues(field)[0] || undefined;
1319                    } else if (field.element.tagName === 'SELECT' && field.element.multiple) {
1320                        value = Array.from(field.element.selectedOptions).map(opt => opt.value);
1321                    } else {
1322                        value = field.element.value;
1323                    }
1324
1325                    const rules = field.rules || {};
1326
1327                                        field.state.valid = true;
1328                    this.showFieldState(field);
1329
1330                
1331                                        const fieldValidations = Object.keys(rules).filter(rule => formValidationRules[rule]).map(async rule => {
1332                        return runValidateFn.call(this, rule, rules[rule], value, field).then(result => {
1333                            field.state.rules[rule] = result;
1334                            return result;
1335                        })
1336                    });
1337
1338                    return new Promise(resolve => {
1339                                                Promise.all(fieldValidations).then(results => {
1340                                                                                    field.state.valid = !elementWillValidate(field.element) || rules.length === 0 || !results.some(isInvalidRuleResult)
1341                            this.showFieldState(field);
1342                            resolve(field.state.valid);
1343                        })
1344                    });
1345                },
1346                                getMessagesByField(field) {
1347                    const messages = [];
1348                    const invalidRules = Object.keys(field.state.rules).filter(rule => isInvalidRuleResult(field.state.rules[rule]));
1349
1350                    field.rules && Object.keys(field.rules).forEach((rule) => {
1351                        if (invalidRules.includes(rule)) {
1352                            const customMessage = field.element.getAttribute('data-msg-' + rule);
1353                            const message = customMessage ? customMessage : field.state.rules[rule];
1354                            const ruleOptions = JSON.parse(JSON.stringify(field.rules[rule]));
1355
1356                            if (typeof message === 'undefined' || message === null || (typeof message !== 'string' && ! message.type)) {
1357                                messages.push(hyva.strf('Validation rule "%0" failed.', rule));
1358                            } else if (Array.isArray(ruleOptions)) {
1359                                ruleOptions.unshift(message.type ? message.content : message);
1360                                const content = hyva.strf.apply(null, ruleOptions);
1361                                messages.push(message.type ? {type: message.type, content} : content);
1362                            } else {
1363                                const content = hyva.strf(message.type ? message.content : message, ruleOptions)
1364                                messages.push(message.type ? {type: message.type, content} : content);
1365                            }
1366                        }
1367                    });
1368                    return messages;
1369                },
1370                /** @deprecated */
1371                getFieldWrapper(field) {
1372                                        return this.getMessageContainer(field)
1373                },
1374                getMessageContainer(field) {
1375                    let container;
1376                    const pageSelector = field.element.getAttribute('data-validation-container') || options.pageMessagesContainerSelector;
1377                    if (pageSelector) {
1378                        container = document.querySelector(pageSelector)
1379                            || containerNotFound(pageSelector, field.element)
1380                    } else {
1381                        const containerSelector = classNamesToSelector(options.fieldWrapperClassName);
1382                        container = field.element.closest(containerSelector)
1383                            || createMessageContainer(field.element, options.fieldWrapperClassName)
1384                            || containerNotFound(containerSelector, field.element);
1385                    }
1386
1387                    return container;
1388                },
1389                showFieldState(field) {
1390                    const container = this.getMessageContainer(field),
1391                        hasErrorMessages = hasMessagesWrapper.call(this, field, options.messagesWrapperClassName),
1392                        messages = this.getMessagesByField(field).map(m => {
1393                            return m.type !== 'html' ? escapeHtml(m.type ? m.content : m) : m.content;
1394                        });
1395                    container.classList.toggle(options.validClassName, field.state.valid && ! hasErrorMessages);
1396                    container.classList.toggle(options.invalidClassName, !field.state.valid || hasErrorMessages);
1397                    this.createHtmlErrorMessage(field, messages);
1398
1399                    if (field.state.valid) {
1400                        field.element.removeAttribute('aria-invalid');
1401                    } else {
1402                        field.element.setAttribute('aria-invalid', 'true');
1403                        if (! document.activeElement) {
1404                            field.element.focus();
1405                        }
1406                    }
1407                },
1408                removeMessages(field, messagesClass) {
1409                    if (! hasMessagesWrapper.call(this, field, messagesClass || options.messagesWrapperClassName)) {
1410                        return;
1411                    }
1412
1413                    const msgWrapper = getMessagesWrapper.call(this, field, messagesClass || options.messagesWrapperClassName);
1414                    const messages = msgWrapper.querySelectorAll(`[data-msg-field='${field.element.name}']`);
1415                    Array.from(messages).forEach(msg => msg.remove());
1416                    if (msgWrapper && msgWrapper.childElementCount === 0) {
1417                        field.element.removeAttribute('aria-errormessage');
1418                        field.element.removeAttribute('aria-describedby');
1419                        msgWrapper.remove();
1420                    }
1421                },
1422                createErrorMessage(field, messages) {
1423                    const htmlMessages = (Array.isArray(messages) ? messages : [messages]).map(escapeHtml)
1424                    this.createHtmlErrorMessage(field, htmlMessages);
1425                },
1426                createHtmlErrorMessage(field, messages) {
1427                    this.removeMessages(field, options.messagesWrapperClassName);
1428                    field.element.removeAttribute('aria-errormessage');
1429                    field.element.removeAttribute('aria-describedby');
1430
1431                    if (!field.state.valid) {
1432                        const msgWrapper = this.addHtmlMessages(field, options.messagesWrapperClassName, messages);
1433                        field.element.setAttribute('aria-errormessage', msgWrapper.id);
1434                        field.element.setAttribute('aria-describedby', msgWrapper.id);
1435                    }
1436                },
1437                /** @deprecated */
1438                createMessage(field, message) {
1439                                        return this.addMessages(field, options.messagesWrapperClassName, message);
1440                },
1441                addMessages(field, messagesClass, messages) {
1442                    const htmlMessages = (Array.isArray(messages) ? messages : [messages]).map(escapeHtml)
1443                    return this.addHtmlMessages(field, messagesClass, htmlMessages);
1444                },
1445                addHtmlMessages(field, messagesClass, htmlMessages) {
1446                    const msgWrapper = getMessagesWrapper.call(this, field, messagesClass);
1447
1448                    (Array.isArray(htmlMessages) ? htmlMessages : [htmlMessages]).forEach((htmlMessage) => {
1449                        const li = document.createElement('li');
1450                        li.innerHTML = htmlMessage;
1451                        li.setAttribute('data-msg-field', field.element.name);
1452                        msgWrapper.appendChild(li);
1453                    });
1454
1455                    return msgWrapper;
1456                },
1457                setField(name, value) {
1458                    this.fields[name].element.value = value;
1459                    this.fields[name].element.dispatchEvent((new Event('input')));
1460                    this.validateField(this.fields[name]);
1461                }
1462            }
1463        }
1464
1465        function getFieldName(field) {
1466                        const fieldName = field.element?.getAttribute('title')
1467                || document.querySelector(`label[for="${field.element?.id}"]`)?.innerText;
1468
1469            return fieldName
1470                ? fieldName.trim()
1471                : '';
1472        }
1473
1474        hyva.formValidation = formValidation;
1475        hyva.formValidation.rules = formValidationRules;
1476        hyva.formValidation.setInputAttributeRuleName = (attrName, ruleName) => INPUT_ATTRIBUTE_RULES[attrName] = ruleName || attrName;
1477        hyva.formValidation.setInputTypeRuleName = (typeName, ruleName) => INPUT_TYPE_RULES[typeName] = ruleName || typeName;
1478        hyva.formValidation.addRule = (name, validator) => formValidationRules[name] = validator;
1479        hyva.formValidation.getFieldName = getFieldName;
1480    }(window.hyva = window.hyva || {}));
1481
1482    window.addEventListener('alpine:init', () => {
1483        Alpine.data('hyva.formValidation', hyva.formValidation);
1484        Alpine.data('hyva.formValidation($el)', hyva.formValidation);
1485    }, {once: true});
1486    //# sourceURL=hyva-advanced-form-validation.js
1487</script>
1487
1488
1489<div x-data="initAmastyCookieBar"
1490     x-bind="eventListeners"
1491     id="am-cookie-bar"
1492     class="fixed&#x20;left-0&#x20;right-0&#x20;z-40&#x20;bottom-0"
1493     style="transform: translateY&#x28;100&#x25;&#x29;"
1494     data-translate-hidden="translateY&#x28;100&#x25;&#x29;"
1495     data-first-show-process="0"
1496>
1497    <div x-cloak    data-dialog-ref-name="am-cookie-bar"
1498    x-bind="overlay"
1499    class="">
1500    <div class="flex w-full bg-white inset-0">
1501        <div x-ref="am-cookie-bar" role="dialog" aria-modal="true"
1502             x-no-overlay                            aria-label="Cookie&#x20;Bar"
1503                                     class="flex w-full p-4 md:p-8 bg-ambar-background bottom-0">
1504            <span tabindex="0" class="invisible"></span>
1505<div class="flex w-full justify-center">
1506    <div class="flex w-full gap-4 lg:gap-6 flex-col max-w-7xl">
1507                    <div class="w-full">
1508                <p id="amcookie-bar-content" class="max-h-[15vh] lg:max-h-[25vh] overflow-y-auto text-ambar-policy-text" >
1509                    Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu
1510können und die Zugriffe auf unsere Website zu analysieren. Außerdem geben wir Informationen zur Verwendung
1511unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Unsere Partner führen
1512diese Informationen möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt haben oder
1513die Sie im Rahmen Ihrer Nutzung der Dienste gesammelt haben. Weitere Informationen finden Sie in unserer
1514<a href="/datenschutz" title="Datenschutz">Datenschutzerklärung</a>
1515und unserem <a href="/impressum" title="Impressum">Impressum</a>.                </p>
1516            </div>
1517                <div class="flex flex-col md:flex-row md:flex-wrap gap-4">
1518            
1519            
1520<button
1521    type="button"
1522    x-data="initAmCookieActionDispatcherBtn"
1523    data-dispatch-action="cookiebar-action-settings"
1524                id="cookiebar-action-settings"
1525        @click.prevent="actiondispatchHandler"
1526    class="btn&#x20;btn-secondary&#x20;w-full&#x20;md&#x3A;w-auto&#x20;justify-center"
1527>
1528    Benutzerdefinierte Einstellungen</button>
1529                
1530<button
1531    type="button"
1532    x-data="initAmCookieActionDispatcherBtn"
1533    data-dispatch-action="cookiebar-action-accept"
1534                id="cookiebar-action-decline"
1535        @click.prevent="actiondispatchHandler"
1536    class="btn&#x20;btn-primary&#x20;w-full&#x20;md&#x3A;w-auto&#x20;justify-center"
1537>
1538    Alle ablehnen</button>
1539                
1540<button
1541    type="button"
1542    x-data="initAmCookieActionDispatcherBtn"
1543    data-dispatch-action="cookiebar-action-allow"
1544                id="cookiebar-action-allow"
1545        @click.prevent="actiondispatchHandler"
1546    class="btn&#x20;btn-primary&#x20;w-full&#x20;md&#x3A;w-auto&#x20;justify-center"
1547>
1548    Alle akzeptieren</button>
1549            </div>
1550    </div>
1551</div>
1552        </div>
1553    </div>
1554    </div>
1555</div>
1556
1557<script data-cfasync="false">
1558    'use strict';
1559
1560    function initAmastyCookieBar() {
1561        return {
1562            ...hyva.modal({
1563                duration: 500,
1564                transitionEnter: '',
1565                transitionEnterStart: '',
1566                transitionEnterEnd: '',
1567                transitionLeave: '',
1568                transitionLeaveStart: '',
1569                transitionLeaveEnd: ''
1570            }),
1571            /**
1572             * Override overlay() so the inner modal div has no x-show binding.
1573             * Visibility is exclusively controlled by translateY on the outer wrapper.
1574             */
1575            overlay: function () {
1576                return {};
1577            },
1578            eventListeners: {
1579                ['@close-cookie-bar']() {
1580                    this.hide('am-cookie-bar');
1581                },
1582                ['@open-cookie-bar']() {
1583                    this.show('am-cookie-bar');
1584                    this.$nextTick(() => hyva.trapFocus(this.modalElement));
1585                },
1586                ['@amasty-cookie-group-updated.window']() {
1587                    const lastUpdate = Alpine.store('AmastyCookieGroups').lastUpdate;
1588
1589                    if (this.isShowNotificationBar(this.firstShowProcess, lastUpdate)) {
1590                        if (!this.opened['am-cookie-bar']) {
1591                            this.show('am-cookie-bar');
1592                            window.dispatchEvent(new CustomEvent('amcookie-show-notification-bar'));
1593                        }
1594                        this.$nextTick(() => hyva.trapFocus(this.modalElement));
1595                    } else {
1596                        !!this.opened['am-cookie-bar'] &&
1597                        this.hide('am-cookie-bar');
1598                    }
1599                }
1600            },
1601
1602            firstShowProcess: '',
1603
1604            /**
1605             * @returns {void}
1606             */
1607            init: function () {
1608                window.isGdprCookieEnabled = true;
1609                Alpine.store('AmastyCookieGroups').updateGroupData();
1610                this.firstShowProcess = this.$el.dataset.firstShowProcess;
1611                this.modalElement = this.$refs['am-cookie-bar'];
1612                this.modalElement.setAttribute('aria-describedby', 'amcookie-bar-content');
1613
1614                // Update the wrapper transform whenever the opened state changes.
1615                // Using $watch (plain JS) instead of x-effect / :style to stay compatible
1616                // with the CSP-friendly Alpine build that cannot evaluate template expressions.
1617                const el      = this.$el;
1618                const refName = 'am-cookie-bar';
1619                this.$watch('opened', function (opened) {
1620                    el.style.transform = opened[refName] ? 'translateY(0)' : el.dataset.translateHidden;
1621                });
1622            },
1623
1624            /**
1625             * @param {string|number} firstShowProcess
1626             * @param {number} lastUpdate
1627             * @returns {boolean}
1628             */
1629            isShowNotificationBar: function (firstShowProcess, lastUpdate) {
1630                return (this.isNeedFirstShow(firstShowProcess, lastUpdate) && !hyva.getCookie('amcookie_allowed')
1631                    || this.isNeedShowOnUpdate(lastUpdate));
1632            },
1633
1634            /**
1635             * @param {string|number} firstShowProcess
1636             * @param {number} lastUpdate
1637             * @returns {boolean}
1638             */
1639            isNeedFirstShow: function (firstShowProcess, lastUpdate) {
1640                hyva.getBrowserStorage().setItem('amCookieBarFirstShowTime', lastUpdate);
1641
1642                if (firstShowProcess === '0') {
1643                    return true;
1644                }
1645
1646                if (hyva.getBrowserStorage().getItem('amCookieBarFirstShow') !== '1') {
1647                    hyva.getBrowserStorage().setItem('amCookieBarFirstShow', '1');
1648
1649                    return true;
1650                }
1651
1652                return false;
1653            },
1654
1655            /**
1656             * @param {number} lastUpdate
1657             * @returns {boolean}
1658             */
1659            isNeedShowOnUpdate: function (lastUpdate) {
1660                if (!lastUpdate) {
1661                    return false;
1662                }
1663
1664                return this.isNeedShowAfterLastVisit(lastUpdate) || this.isNeedShowAfterLastAccept(lastUpdate);
1665            },
1666
1667            /**
1668             * @param {number} lastUpdate
1669             * @returns {boolean}
1670             */
1671            isNeedShowAfterLastVisit: function (lastUpdate) {
1672                let needToShowAfterLastVisit =
1673                    lastUpdate > hyva.getBrowserStorage().getItem('amCookieBarFirstShowTime');
1674
1675                if (needToShowAfterLastVisit) {
1676                    hyva.getBrowserStorage().setItem('amCookieBarFirstShow', null);
1677                    this.clearAmCookieAllowed();
1678                }
1679
1680                return needToShowAfterLastVisit;
1681            },
1682
1683            /**
1684             * @param {number} lastUpdate
1685             * @returns {boolean}
1686             */
1687            isNeedShowAfterLastAccept: function (lastUpdate) {
1688                let needToShowAfterLastAccept = false;
1689
1690                if (hyva.getBrowserStorage().getItem('am-last-cookie-acceptance')) {
1691                    needToShowAfterLastAccept =
1692                        lastUpdate > hyva.getBrowserStorage().getItem('am-last-cookie-acceptance');
1693                }
1694
1695                if (needToShowAfterLastAccept) {
1696                    this.clearAmCookieAllowed(needToShowAfterLastAccept);
1697                }
1698
1699                return needToShowAfterLastAccept;
1700            },
1701
1702            /**
1703             * @returns {void}
1704             */
1705            closeCookieBarHandler: function () {
1706                this.$dispatch('close-cookie-bar');
1707            },
1708
1709            /**
1710             * @param {boolean} needToShowAfterLastAccept
1711             * @returns {void}
1712             */
1713            clearAmCookieAllowed: function (needToShowAfterLastAccept = false) {
1714                hyva.setCookie('amcookie_allowed', '', -1, true);
1715
1716                const amastyCookieManager = window.amastyCookieManager ?? {};
1717                const groupData = amastyCookieManager.getAmastyCookieGroupStorage?.()?.groupData ?? [];
1718
1719                if (needToShowAfterLastAccept && !!groupData.length) {
1720                    const disallowedCookies = groupData
1721                        .filter(group => !group.isEssential)
1722                        .flatMap(group => group.cookies?.map(cookie => cookie.name) ?? []);
1723
1724                    hyva.setCookie('amcookie_disallowed', disallowedCookies.join(','));
1725
1726                    amastyCookieManager.deleteDisallowedCookie?.();
1727                    amastyCookieManager.getAmastyCookieGroupStorage?.()?.updateGroupDataPermanently(
1728                        groupData.map((group) => {
1729                            return {
1730                                ...group,
1731                                checked: group.isEssential
1732                            }
1733                        })
1734                    );
1735                }
1736            }
1737        };
1738    }
1739
1740    window.addEventListener('alpine:init', () => Alpine.data('initAmastyCookieBar', initAmastyCookieBar), {once: true});
1741</script>
1741
1742<div class="page-wrapper"><header class="page-header"><a class="action skip sr-only focus:not-sr-only focus:absolute focus:z-40 focus:bg-white
1743   contentarea"
1744   href="#contentarea">
1745    <span>
1746        Direkt zum Inhalt    </span>
1747</a>
1748<div class="panel wrapper">
1749    <div class="flex justify-center bg-lightgray font-medium py-2 px-4 overflow-hidden md:py-3 print:hidden">
1750                <div class="relative z-[1] bg-lightgray flex-1 hidden md:block"></div>
1751        <div class="flex-1"
1752             x-data='{
1753                texts: [{"text":"EXKLUSIV: Der FOREVER YOUNG <a href=\"\/forever-young-adventskalender-2026.html\">Adventskalender<\/a>","textColor":null},{"text":"WhatsApp-Newsletter: <a href=\"\/whats-app\">Anmelden<\/a> und 5 \u20ac sparen","textColor":null},{"text":"NEU: FOREVER YOUNG - Der Podcast | <a href=\"\/podcast\">jetzt reinh\u00f6ren<\/a>","textColor":null},{"text":"FOREVER YOUNG <a href=\"\/seminar\">Das Seminar<\/a> - 01. - 04.10.2026","textColor":null}],
1754                currentIndex: 0,
1755                initialized: false,
1756                maxHeightPx: 0,
1757                lockedHeight: true,
1758                _resizeObserver: null,
1759                _timer: null,
1760                _visibilityHandler: null,
1761                _paused: false,
1762                _transitioning: false,
1763                ROTATE_MS: 6000,
1764                TRANSITION_MS: 1000,
1765                updateMaxHeight(sync = false) {
1766                    const measure = () => {
1767                        const sizer = this.$refs.sizer;
1768                        if (!sizer) return;
1769
1770                        let max = 0;
1771                        sizer.querySelectorAll("[data-measure]")
1772                            .forEach((el) => {
1773                                const h = el.getBoundingClientRect().height;
1774                                if (h > max) max = h;
1775                            });
1776
1777                        // Auf 3 Nachkommastellen stabilisieren (gegen Floating-Point-Artefakte)
1778                        max = Math.round(max * 1000) / 1000;
1779
1780                        if (this.lockedHeight) {
1781                            // Während des initialen Load/Init: nur erhöhen, nie verringern (keine Shifts)
1782                            if (max > this.maxHeightPx) this.maxHeightPx = max;
1783                        } else {
1784                            // Nach Layout-Änderung (z.B. Resize): exakt übernehmen (darf auch kleiner werden)
1785                            this.maxHeightPx = max;
1786                        }
1787                    };
1788
1789                    if (sync) {
1790                        measure();
1791                    } else {
1792                        this.$nextTick(measure);
1793                    }
1794                },
1795                _clearTimer() {
1796                    if (this._timer) {
1797                        clearTimeout(this._timer);
1798                        this._timer = null;
1799                    }
1800                },
1801                _scheduleNextTick() {
1802                    // Garantiert: genau ein Timer
1803                    this._clearTimer();
1804
1805                    if (this._paused) return;
1806                    if (!this.texts || this.texts.length <= 1) return;
1807
1808                    this._timer = setTimeout(() => {
1809                        this._tick();
1810                    }, this.ROTATE_MS);
1811                },
1812                _tick() {
1813                    // Wenn Tab versteckt ist, sofort pausieren und keinen Tick ausführen.
1814                    if (document.hidden) {
1815                        this._paused = true;
1816                        this._clearTimer();
1817                        return;
1818                    }
1819
1820                    // Wenn gerade eine Transition läuft: nicht "aufholen", sondern erst später wieder planen.
1821                    if (this._transitioning) {
1822                        this._scheduleNextTick();
1823                        return;
1824                    }
1825
1826                    this._transitioning = true;
1827                    requestAnimationFrame(() => {
1828                        this.currentIndex = (this.currentIndex + 1) % this.texts.length;
1829
1830                        // Transition-Guard nach der CSS-Duration wieder lösen.
1831                        setTimeout(() => {
1832                            this._transitioning = false;
1833                        }, this.TRANSITION_MS + 50);
1834                    });
1835
1836                    this._scheduleNextTick();
1837                },
1838                _startRotation() {
1839                    this._paused = false;
1840                    this._scheduleNextTick();
1841                },
1842                _stopRotation() {
1843                    this._paused = true;
1844                    this._clearTimer();
1845                },
1846                init() {
1847                    // Initial lock, um Shifts beim Umschalten Placeholder -> Alpine zu vermeiden.
1848                    this.lockedHeight = true;
1849
1850                    // 1) Sofort synchron messen
1851                    this.updateMaxHeight(true);
1852
1853                    // 2) Nach dem ersten Tick nochmal
1854                    this.updateMaxHeight(false);
1855
1856                    // Nach Fonts: nochmal messen und dann entsperren, damit finale Metriken gelten.
1857                    try {
1858                        if (document.fonts && document.fonts.ready) {
1859                            document.fonts.ready.then(() => {
1860                                this.updateMaxHeight(false);
1861                                this.lockedHeight = false;
1862                                this.updateMaxHeight(false);
1863                            });
1864                        } else {
1865                            // Fallback: in nächsten Frame entsperren
1866                            requestAnimationFrame(() => {
1867                                this.lockedHeight = false;
1868                                this.updateMaxHeight(false);
1869                            });
1870                        }
1871                    } catch (e) {
1872                        requestAnimationFrame(() => {
1873                            this.lockedHeight = false;
1874                            this.updateMaxHeight(false);
1875                        });
1876                    }
1877
1878                    // Bei Resize: entsperren und neu berechnen (darf steigen & fallen)
1879                    this._resizeObserver = new ResizeObserver(() => {
1880                        this.lockedHeight = false;
1881                        this.updateMaxHeight(false);
1882                    });
1883                    this._resizeObserver.observe(this.$el);
1884
1885                    // Page Visibility: Rotation im Hintergrund pausieren (verhindert "Stau" nach Tab-Wechsel)
1886                    this._visibilityHandler = () => {
1887                        if (document.hidden) {
1888                            this._stopRotation();
1889                        } else {
1890                            this._startRotation();
1891                        }
1892                    };
1893                    document.addEventListener("visibilitychange", this._visibilityHandler, { passive: true });
1894
1895                    this.initialized = true;
1896
1897                    // Rotations-Loop starten (self-scheduling, kein setInterval)
1898                    if (!document.hidden) {
1899                        this._startRotation();
1900                    } else {
1901                        this._stopRotation();
1902                    }
1903                },
1904                destroy() {
1905                    if (this._resizeObserver) this._resizeObserver.disconnect();
1906                    this._clearTimer();
1907                    if (this._visibilityHandler) {
1908                        document.removeEventListener("visibilitychange", this._visibilityHandler);
1909                        this._visibilityHandler = null;
1910                    }
1911                }
1912            }'
1913             :style="maxHeightPx ? ('min-height:' + maxHeightPx + 'px') : ''"
1914        >
1915            <div class="relative w-full grid" style="grid-template-areas: 'stack'">
1916                <div
1917                    x-ref="sizer"
1918                    class="invisible pointer-events-none select-none grid"
1919                    style="grid-template-areas: 'stack'; grid-area: stack"
1920                    aria-hidden="true"
1921                >
1922                                            <div data-measure class="text-center w-full" style="grid-area: stack">
1923                            <span style="color: inherit;">
1924                                EXKLUSIV: Der FOREVER YOUNG <a href="/forever-young-adventskalender-2026.html">Adventskalender</a>                            </span>
1925                        </div>
1926                                            <div data-measure class="text-center w-full" style="grid-area: stack">
1927                            <span style="color: inherit;">
1928                                WhatsApp-Newsletter: <a href="/whats-app">Anmelden</a> und 5 € sparen                            </span>
1929                        </div>
1930                                            <div data-measure class="text-center w-full" style="grid-area: stack">
1931                            <span style="color: inherit;">
1932                                NEU: FOREVER YOUNG - Der Podcast | <a href="/podcast">jetzt reinhören</a>                            </span>
1933                        </div>
1934                                            <div data-measure class="text-center w-full" style="grid-area: stack">
1935                            <span style="color: inherit;">
1936                                FOREVER YOUNG <a href="/seminar">Das Seminar</a> - 01. - 04.10.2026                            </span>
1937                        </div>
1938                                    </div>
1939
1940                <!-- Serverseitiger Placeholder: sichtbar bis Alpine initialisiert ist -->
1941                <div x-show="!initialized" class="text-center" style="grid-area: stack">
1942                    <span style="color: inherit;">
1943                        EXKLUSIV: Der FOREVER YOUNG <a href="/forever-young-adventskalender-2026.html">Adventskalender</a>                    </span>
1944                </div>
1945
1946                <!-- Sichtbare, animierte Messages erst nach Alpine init einblenden -->
1947                <div x-show="initialized" x-cloak style="grid-area: stack">
1948                    <template x-for="message in texts" :key="texts.indexOf(message)">
1949                        <div x-show="texts[currentIndex] === message"
1950                             class="absolute top-0 inset-x-0 text-center"
1951                             x-transition:enter="transform transition-transform duration-1000 ease-in-out"
1952                             x-transition:enter-start="translate-x-full"
1953                             x-transition:enter-end="translate-x-0"
1954                             x-transition:leave="transform transition-transform duration-1000 ease-in-out"
1955                             x-transition:leave-start="translate-x-0"
1956                             x-transition:leave-end="-translate-x-full">
1957                            <span x-html="message.text" :style="'color:' + message.textColor"></span>
1958                        </div>
1959                    </template>
1960                </div>
1961            </div>
1962        </div>
1963                <div class="relative z-[1] bg-lightgray flex-1 text-right hidden md:block">
1964            <span>Versandkostenfrei ab 89,- €</span>
1965        </div>
1966    </div>
1967</div>
1967<script>
1968    (function () {
1969        const pageHeaderVar = '--page-header-height';
1970        const scrollPaddingVar = '--scroll-padding';
1971
1972        const setScrollPaddingTop = () => {
1973            const headerEl = document.querySelector('.page-header');
1974            if (!headerEl) return;
1975
1976            const rootStyle = getComputedStyle(document.documentElement);
1977            const offset = Number.parseFloat((rootStyle.getPropertyValue('--page-header-offset') || '').trim()) || 0;
1978            const height = headerEl.getBoundingClientRect().height || 0;
1979
1980            document.documentElement.style.setProperty(pageHeaderVar, height + 'px');
1981            document.documentElement.style.setProperty(scrollPaddingVar, Math.ceil(height + offset) + 'px');
1982        };
1983
1984        let initRaf = requestAnimationFrame(setScrollPaddingTop);
1985
1986        if (document.readyState === 'loading') {
1987            document.addEventListener('DOMContentLoaded', setScrollPaddingTop, { once: true });
1988        }
1989
1990        window.addEventListener('load', setScrollPaddingTop, { once: true });
1991
1992        let resizeRaf = 0;
1993        window.addEventListener('resize', () => {
1994            if (resizeRaf) cancelAnimationFrame(resizeRaf);
1995            resizeRaf = requestAnimationFrame(() => {
1996                resizeRaf = 0;
1997                setScrollPaddingTop();
1998            });
1999        });
2000
2001        if (window.ResizeObserver) {
2002            let roRaf = 0;
2003            const ro = new ResizeObserver(() => {
2004                if (roRaf) cancelAnimationFrame(roRaf);
2005                roRaf = requestAnimationFrame(() => {
2006                    roRaf = 0;
2007                    setScrollPaddingTop();
2008                });
2009            });
2010            const observeWhenReady = () => {
2011                const headerEl = document.querySelector('.page-header');
2012                if (headerEl) {
2013                    ro.observe(headerEl);
2014                    setScrollPaddingTop();
2015                    return true;
2016                }
2017                return false;
2018            };
2019
2020            if (!observeWhenReady()) {
2021                document.addEventListener('DOMContentLoaded', observeWhenReady, { once: true });
2022            }
2023        }
2024
2025        window.hyvaSetScrollPaddingTop = setScrollPaddingTop;
2026    })();
2027
2028    function initHeader () {
2029        return {
2030            searchOpen: false,
2031            cart: {},
2032            isCartOpen: false,
2033            getData(data) {
2034                if (data.cart) { this.cart = data.cart }
2035            },
2036            isCartEmpty() {
2037                return !this.cart.summary_count
2038            },
2039            toggleCart(event) {
2040                if (event.detail && event.detail.isOpen !== undefined) {
2041                    this.isCartOpen = event.detail.isOpen
2042                    if (!this.isCartOpen && this.$refs && this.$refs.cartButton) {
2043                        this.$refs.cartButton.focus()
2044                    }
2045                } else {
2046                                        this.isCartOpen = true
2047                }
2048            }
2049        }
2050    }
2051    function initCompareHeader() {
2052        return {
2053            compareProducts: null,
2054            itemCount: 0,
2055            receiveCompareData(data) {
2056                if (data['compare-products']) {
2057                    this.compareProducts = data['compare-products'];
2058                    this.itemCount = this.compareProducts.count;
2059                }
2060            }
2061        }
2062    }
2063</script>
2063
2064<style>
2065    :root {
2066        --page-header-height: 103px;
2067        --page-header-offset: 12px;
2068        --scroll-padding: calc(var(--page-header-height) + var(--scroll-padding));
2069    }
2070
2071    #header > div {
2072        column-gap: 200px;
2073        min-height: 103px;
2074    }
2075
2076    html,
2077    body {
2078        scroll-padding-top: var(--scroll-padding, 103px);
2079    }
2080
2081    @media (max-width: 1023px) {
2082        :root {
2083            --page-header-height: 51.5px;
2084            --page-header-offset: 10px;
2085        }
2086
2087        #header > div {
2088            column-gap: 100px;
2089            min-height: 51.5px;
2090        }
2091
2092        html,
2093        body {
2094            scroll-padding-top: var(--scroll-padding, 51.5px);
2095        }
2096    }
2097</style>
2098<div id="header"
2099     class="relative z-30 w-full bg-container-lighter border-container-lighter print:hidden"
2100     x-data="initHeader()"
2101     x-init="window.hyvaSetScrollPaddingTop && window.hyvaSetScrollPaddingTop()"
2102     @resize.window="(() => { if (window.__hyvaHeaderRaf) cancelAnimationFrame(window.__hyvaHeaderRaf); window.__hyvaHeaderRaf = requestAnimationFrame(() => { window.__hyvaHeaderRaf = 0; window.hyvaSetScrollPaddingTop && window.hyvaSetScrollPaddingTop(); }); })()"
2103     @private-content-loaded.window="getData(event.detail.data)"
2104>
2105    <div class="container-xl relative flex items-center justify-between w-full px-6 py-3 mx-auto mt-0">
2106
2107        <div class="flex gap-x-8 lg:gap-x-16 flex-1 pr-4 lg:pr-16">
2108            <!--Main Navigation-->
2109            
2110<nav
2111        x-data="initMenuMobile_6abf1e73388a1"
2112        @load.window="setActiveMenu"
2113        @keydown.window.escape="closeMenu"
2114        class="z-20 navigation lg:hidden w-12 h-12 flex"
2115        aria-label="Seitennavigation"
2116        role="navigation"
2117        data-login-redirect-url="login_redirect"
2118>
2119    <!-- mobile -->
2120    <button
2121            x-ref="mobileMenuTrigger"
2122            @click="toggleMenu"
2123            type="button"
2124            aria-label="Men&#xFC;&#x20;&#xF6;ffnen"
2125            aria-haspopup="menu"
2126    >
2127        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" class="icon-size" :class="iconMenuClasses" aria-hidden="true">
2128  <g id="menu-icon" transform="translate(-50 -104)">
2129    <path id="Ellipse_854" data-name="Ellipse 854" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(50 104)" fill="#2e3831"/>
2130    <path id="Linie_412" data-name="Linie 412" d="M18,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H18A1.5,1.5,0,0,1,19.5,0,1.5,1.5,0,0,1,18,1.5Z" transform="translate(66 120)" fill="#2e3831"/>
2131    <path id="Linie_413" data-name="Linie 413" d="M18,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H18A1.5,1.5,0,0,1,19.5,0,1.5,1.5,0,0,1,18,1.5Z" transform="translate(66 129)" fill="#2e3831"/>
2132    <path id="Linie_414" data-name="Linie 414" d="M18,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H18A1.5,1.5,0,0,1,19.5,0,1.5,1.5,0,0,1,18,1.5Z" transform="translate(66 138)" fill="#2e3831"/>
2133  </g>
2134</svg>
2135        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" class="icon-size" :class="iconCloseClasses" aria-hidden="true" x-cloak="true">
2136  <g id="menu-icon-close" transform="translate(-50 -104)">
2137    <path id="Ellipse_854_2" data-name="Ellipse 854" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(50 104)" fill="#2e3831"/>
2138    <path id="Linie_412_2" data-name="Linie 412" d="M24.671,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H24.672a1.5,1.5,0,0,1,1.5,1.5A1.5,1.5,0,0,1,24.671,1.5Z" transform="translate(66.277 137.722) rotate(-45)" fill="#2e3831"/>
2139    <path id="Linie_413_2" data-name="Linie 413" d="M0,1.5A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H24.671a1.5,1.5,0,0,1,1.5,1.5,1.5,1.5,0,0,1-1.5,1.5Z" transform="translate(66.278 120.276) rotate(45)" fill="#2e3831"/>
2140  </g>
2141</svg>
2142    </button>
2143    <div
2144            x-ref="mobileMenuNavLinks"
2145            class="fixed left-0 w-screen hidden bg-container-lighter justify-between flex-col overflow-y-auto overflow-x-hidden z-50"
2146            :class="mobileMenuClasses"
2147            :aria-hidden="ariaHidden"
2148            :style="mobileMenuStyle"
2149            role="dialog"
2150            aria-modal="true"
2151    >
2152        <div class="mx-8">
2153            
2153<script>
2154    'use strict';
2155
2156    function initMiniSearch() {
2157        return {
2158            minSearchLength: 3,
2159            search(term) {
2160                const search = this.$refs.searchInput;
2161                term = term || search.value;
2162                if (term.length < this.minSearchLength) {
2163                    search.setCustomValidity('Minimale\u0020L\u00E4nge\u0020der\u0020Suchanfrage\u0020ist\u00203');
2164                    search.reportValidity();
2165                } else {
2166                    search.setCustomValidity('');
2167                    search.value = term;
2168                    this.$refs.form.submit();
2169                }
2170            },
2171            focusElement(element) {
2172                if (element && element.nodeName === "DIV") {
2173                    element.focus();
2174                    return true;
2175                } else {
2176                    return false;
2177                }
2178            }
2179        }
2180    }
2181</script>
2181
2182<div class="w-full py-2 mb-3 text-black relative" x-data="initMiniSearch()">
2183    <search title="Shop" role="search">
2184        <form
2185            id="search_mini_form_mobile"
2186            class="form minisearch flex relative"
2187            action="https://www.strunz.com/catalogsearch/result/"
2188            method="get"
2189            @submit.prevent="search()"
2190            x-ref="form"
2191        >
2192            <label class="sr-only" for="search-mobile">
2193                Suche            </label>
2194            <input
2195                id="search-mobile"
2196                x-ref="searchInput"
2197                type="search"
2198                autocomplete="off"
2199                name="q"
2200                value=""
2201                maxlength="128"
2202                class="w-full border-0 pl-8 !ring-0 font-bold bg-container-darker rounded-full leading-none"
2203                @search-open.window.debounce.10="$el.focus(); $el.select()"
2204            >
2205            <button
2206                    type="submit"
2207                    class="action search absolute left-2 top-1/2 -translate-y-1/2"
2208                    title="Suche"
2209                    aria-label="Suche"
2210            >
2211                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.207 16.207" class="w-4 h-4" aria-hidden="true">
2212  <g id="search" transform="translate(-69 -54)">
2213    <g id="Ellipse_864" data-name="Ellipse 864" transform="translate(69 54)" fill="none" stroke="#2e3831" stroke-width="2">
2214      <circle cx="7.5" cy="7.5" r="7.5" stroke="none"/>
2215      <circle cx="7.5" cy="7.5" r="6.5" fill="none"/>
2216    </g>
2217    <line id="Linie_439" data-name="Linie 439" x2="4" y2="4" transform="translate(80.5 65.5)" fill="none" stroke="#2e3831" stroke-width="2"/>
2218  </g>
2219</svg>
2220            </button>
2221            <input type="hidden" id="honey_spam_form" name="honey_spam_form" value="search_mini_form">
2222        </form>
2223    </search>
2224</div>
2225            <ul class="flex flex-col gap-y-4" aria-label="Seitennavigationslinks">
2226                                                        <li data-child-id="category-node-3-main" class="level-0">
2227                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
2228
2229                            <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
2230                                                            @click.prevent="openSubcategory"
2231                                data-index="category-node-3"
2232                                role="button"
2233                                aria-label="Eiwei&#x1E9E;&#x20;Unterkategorien&#x20;&#xF6;ffnen"
2234                                aria-haspopup="true"
2235                                :aria-expanded="getAriaExpanded"
2236                                data-expanded-index="category-node-3"
2237                                                        title="Eiwei&#x1E9E;"
2238                            >
2239                            Eiweiẞ                            </a>
2240                        </div>
2241                                                    <div
2242                                    data-child-id="category-node-3"
2243                                    class="absolute top-0 right-0 z-10 flex flex-col gap-1 w-full min-h-[50vh] bg-container"
2244                                    :class="subPanelClasses"
2245                                    data-panel-index="category-node-3"
2246                            >
2247                                <ul
2248                                        class="transition-transform duration-200 ease-in-out translate-x-full transform bg-container pb-4"
2249                                        :class="subMenuClasses"
2250                                        data-submenu-index="category-node-3"
2251                                        aria-label="Unterkategorien"
2252                                >
2253                                    <li>
2254                                        <button
2255                                                type="button"
2256                                                class="flex items-center px-6 py-4 cursor-pointer w-full"
2257                                                @click="backToMainCategories"
2258                                                data-back-index="category-node-3-main"
2259                                                aria-label="Zur&#xFC;ck&#x20;zu&#x20;den&#x20;Hauptkategorien"
2260                                        >
2261                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50" class="w-8 h-8 lg:w-10 lg:h-10 rotate-180" aria-hidden="true">
2262  <g id="arrow-circle-outline" transform="translate(-1771 -3053)">
2263    <path id="Ellipse_855" data-name="Ellipse 855" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(1771 3053)" fill="#2e3831"/>
2264    <path id="Pfad_13977" data-name="Pfad 13977" d="M-18600.215-16056.184a1.493,1.493,0,0,1-1.061-.439,1.5,1.5,0,0,1,0-2.121l8.986-8.988-8.986-8.986a1.5,1.5,0,0,1,0-2.121,1.5,1.5,0,0,1,2.121,0l10.047,10.047a1.5,1.5,0,0,1,0,2.121l-10.047,10.049A1.493,1.493,0,0,1-18600.215-16056.184Z" transform="translate(20391.715 19145.73)" fill="#2e3831"/>
2265  </g>
2266</svg>
2267                                            <span class="ml-4 h2 font-bold text-gray">Eiweiẞ</span>
2268                                        </button>
2269                                    </li>
2270                                    <li class="border-b border-gray-200 mb-2">
2271                                        <a href="https://www.strunz.com/eiweisspulver.html"
2272                                           title="Alle&#x20;anzeigen"
2273                                           class="flex items-center w-full px-8 py-3 cursor-pointer no-underline text-body-lg font-bold">
2274                                            <span class="ml-10">Alle anzeigen</span>
2275                                        </a>
2276                                    </li>
2277                                                                                                                                                            <li>
2278                                                <a href="https://www.strunz.com/eiweisspulver/power-eiweiss-dosen.html"
2279                                                   title="Power&#x20;Eiwei&#xDF;&#x20;Dosen"
2280                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2281                                                    <span class="ml-10">Power Eiweiß Dosen</span>
2282                                                </a>
2283                                            </li>
2284                                                                                                                                                                                                        <li>
2285                                                <a href="https://www.strunz.com/eiweisspulver/power-eiweiss-nachfuellbeutel.html"
2286                                                   title="Power&#x20;Eiwei&#xDF;&#x20;Beutel"
2287                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2288                                                    <span class="ml-10">Power Eiweiß Beutel</span>
2289                                                </a>
2290                                            </li>
2291                                                                                                                                                                                                        <li>
2292                                                <a href="https://www.strunz.com/eiweisspulver/multi-eiweiss.html"
2293                                                   title="Multi&#x20;Eiwei&#xDF;"
2294                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2295                                                    <span class="ml-10">Multi Eiweiß</span>
2296                                                </a>
2297                                            </li>
2298                                                                                                                                                                                                        <li>
2299                                                <a href="https://www.strunz.com/eiweisspulver/veganes-eiweiss.html"
2300                                                   title="Veganes&#x20;Eiwei&#xDF;"
2301                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2302                                                    <span class="ml-10">Veganes Eiweiß</span>
2303                                                </a>
2304                                            </li>
2305                                                                                                                                                                                                        <li>
2306                                                <a href="https://www.strunz.com/eiweisspulver/whey-isolate.html"
2307                                                   title="Whey&#x20;Isolate"
2308                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2309                                                    <span class="ml-10">Whey Isolate</span>
2310                                                </a>
2311                                            </li>
2312                                                                                                                                                                                                        <li>
2313                                                <a href="https://www.strunz.com/eiweisspulver/casein.html"
2314                                                   title="Casein"
2315                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2316                                                    <span class="ml-10">Casein</span>
2317                                                </a>
2318                                            </li>
2319                                                                                                                                                                                                        <li>
2320                                                <a href="https://www.strunz.com/eiweisspulver/eiweiss-pancake-und-riegel.html"
2321                                                   title="Proteinriegel"
2322                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2323                                                    <span class="ml-10">Proteinriegel</span>
2324                                                </a>
2325                                            </li>
2326                                                                                                                                                                                                        <li>
2327                                                <a href="https://www.strunz.com/eiweisspulver/eiweissshaker-und-zubehor.html"
2328                                                   title="Shaker"
2329                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2330                                                    <span class="ml-10">Shaker</span>
2331                                                </a>
2332                                            </li>
2333                                                                                                                                                    </ul>
2334                                                                <div class="mt-8">
2335                                    <div class="px-6 py-12 mx-4 rounded-lg" style="background-color: #a98aff">
2336                                            <div class="featured-product flex gap-4 justify-evenly">
2337                                                <div class="flex flex-col flex-shrink basis-[calc(100%-6rem)]">
2338                                                    <div class="flex flex-col gap-2 mb-2">
2339                                                                                                                    <span class="text-body-sm" style="color: #3d1568">
2340                                                            FOREVER YOUNG                                                            </span>
2341                                                                                                                <span class="h2 font-bold m-0" style="color: #3d1568">
2342                                                        Amino 11                                                        </span>
2343                                                    </div>
2344                                                    <a href="https://www.strunz.com/forever-young-amino-11-tabletten.html"
2345                                                       class="btn btn-primary hover:opacity-90 inline-block mt-auto mr-auto"
2346                                                       style="color: #a98aff; background-color: #3d1568; border-color: #a98aff">
2347                                                        Zum Produkt                                                    </a>
2348                                                </div>
2349                                                <div class="flex-shrink basis-[6rem]">
2350                                                    <img src="/media/wysiwyg/home/showcase/showcase-slider_500x850px_ amino-11.webp"
2351                                                         alt="Amino&#x20;11"
2352                                                         class="max-w-full h-auto" />
2353                                                </div>
2354                                            </div>
2355                                    </div>
2356                                </div>
2357                                                                <div class="flex justify-center items-center py-8 px-8 bg-black mt-8">
2358                                    <svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 263.797 31" class="w-60 h-8 text-white" aria-hidden="true">
2359  <g id="payment" transform="translate(-978.002 -9982.656)">
2360    <g id="visa-outline-large" transform="translate(1032.768 9983.156)">
2361      <rect id="card_bg" width="44" height="30" rx="4" transform="translate(0.766 0)" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/>
2362      <path id="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
2363      <path id="visa-logo" d="M15.976,8.94a6.692,6.692,0,0,1-2.445-.461l.4-1.878a4.713,4.713,0,0,0,2.232.565h.059c.668-.01,1.343-.277,1.343-.854.009-.368-.306-.66-1.164-1.08s-1.962-1.105-1.962-2.358C14.443,1.182,15.987,0,18.2,0a6.023,6.023,0,0,1,2.1.386l-.392,1.883a4.238,4.238,0,0,0-1.8-.406,4.107,4.107,0,0,0-.413.02c-.649.086-.939.425-.939.723,0,.364.465.607,1.055.916.935.489,2.1,1.1,2.092,2.53l.048-.076c-.009,1.8-1.547,2.967-3.915,2.967ZM22.2,8.866H19.832L23.2.818a1.021,1.021,0,0,1,.939-.639h1.878l1.827,8.684H25.758l-.272-1.3H22.659l-.46,1.3ZM24.434,2.52,23.251,5.784H25.12ZM11.925,8.837H9.672L11.551.15H13.8L11.925,8.836ZM7,8.808H4.545L2.752,1.869a.944.944,0,0,0-.536-.756A9.312,9.312,0,0,0,0,.378L.057.126H3.879a1.05,1.05,0,0,1,1.036.882l.945,5.02L8.2.126H10.64Z" transform="translate(8.241 10.738)" fill="#2e3831"/>
2364    </g>
2365    <g id="paypal-outline-large" transform="translate(1141.297 9983.156)">
2366      <rect id="card_bg-2-2" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
2367      <path id="card_bg-2-3" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
2368      <g id="paypal" transform="translate(15.269 5.799)">
2369        <path id="Path" d="M11.934,4.132C11.259,7.587,8.946,8.77,6.018,8.77H5.544a.723.723,0,0,0-.713.62V9.6l-.559,3.625v.15a.732.732,0,0,1-.732.62H.441a.422.422,0,0,1-.432-.5l.243-1.58L1.6,3.339l.5.7L.666,13.357h2.9c.019,0,0,0,0-.076v-.126l.582-3.643v-.2a1.418,1.418,0,0,1,.47-.827A1.4,1.4,0,0,1,5.5,8.151h.489a8.386,8.386,0,0,0,1.871-.213A4.817,4.817,0,0,0,9.4,7.244,4.2,4.2,0,0,0,10.525,6,6.085,6.085,0,0,0,11.24,4.02a5.174,5.174,0,0,0,.093-1.751,2.451,2.451,0,0,0-.544-1.2A1.671,1.671,0,0,0,10.3.677a2.184,2.184,0,0,1,.076-.338L10.432,0a2.818,2.818,0,0,1,.827.639,3.963,3.963,0,0,1,.675,3.493Z" transform="translate(3.849 4.817)" fill="#2e3831"/>
2370        <path id="Path-2" data-name="Path" d="M8.489.274,8.133.179,7.738.1a9.451,9.451,0,0,0-1.5-.1H1.653a.677.677,0,0,0-.31.066A.713.713,0,0,0,.94.61L0,6.781v.179a.835.835,0,0,1,.827-.7H2.535c3.362,0,6-1.371,6.77-5.315L9.362.592a4.207,4.207,0,0,0-.63-.263Z" transform="translate(5.041 4.206)" fill="#2e3831"/>
2371        <path id="Path-3" data-name="Path" d="M14.337,4.776a3.634,3.634,0,0,0-.6-.244,3.916,3.916,0,0,0,0-1.5,2.535,2.535,0,0,0-.677-1.145c-.694-.808-2.027-1.2-3.962-1.2H3.256a.272.272,0,0,0-.126,0,.169.169,0,0,0-.057.126L.645,16.063h3.55L4.1,16.7H.5a.5.5,0,0,1-.489-.582L2.43.719A.846.846,0,0,1,3.256.006H9.1a6.048,6.048,0,0,1,4.488,1.409,3.756,3.756,0,0,1,.756,3.362Z" transform="translate(0.001 0.022)" fill="#2e3831"/>
2372      </g>
2373    </g>
2374    <g id="mastercard-outline-large" transform="translate(1086.898 9983.156)">
2375      <rect id="card_bg-3" data-name="card_bg" width="45" height="30" rx="4" transform="translate(0 0)" fill="none"/>
2376      <path id="card_bg-2-4" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
2377      <g id="mastercard" transform="translate(4.366 3.198)">
2378        <g id="Group" opacity="0">
2379          <rect id="Rectangle" width="36.34" height="24.04" fill="#2e3831"/>
2380        </g>
2381        <path id="Path-4" data-name="Path" d="M14.475,18.847a9.963,9.963,0,1,1,0-17.767,11.71,11.71,0,0,0-4.016,8.883,11.879,11.879,0,0,0,4.016,8.883Z" transform="translate(2.025 2.056)" fill="#2e3831"/>
2382        <path id="Shape" d="M.47.387H.394V0H.5L.61.272.733,0H.827V.384H.756V.093l-.1.252H.582L.47.093V.386Zm-.282,0H.126V.066H0V0H.329V.066H.188V.384Z" transform="translate(33.139 17.805)" fill="#2e3831"/>
2383        <path id="Path-5" data-name="Path" d="M14.462,9.968A9.955,9.955,0,0,1,.019,18.852,11.87,11.87,0,0,0,1.5,2.646,10.742,10.742,0,0,0,0,1.085,9.944,9.944,0,0,1,14.462,9.968Z" transform="translate(19.823 2.051)" fill="#2e3831"/>
2384        <path id="Path-6" data-name="Path" d="M3.81,15.663A9.955,9.955,0,0,1,3.81,0a9.963,9.963,0,0,1,3.8,7.831,9.963,9.963,0,0,1-3.8,7.831Z" transform="translate(14.36 4.188)" fill="#2e3831"/>
2385      </g>
2386    </g>
2387    <g id="zahlen-auf-rechnung" transform="translate(767.533 8562.672)">
2388      <g id="paypal-outline-large-2" data-name="paypal-outline-large" transform="translate(210.735 1420.484)">
2389        <rect id="card_bg-4" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
2390        <path id="card_bg-2-5" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
2391      </g>
2392      <g id="living-berlin-logo-bezahlen-auf-rechnung" transform="translate(225.771 1426.121)">
2393        <path id="Pfad_15183" data-name="Pfad 15183" d="M195.813,522.77a3.46,3.46,0,0,1,2.192.1,3.394,3.394,0,0,1,1.716,1.334.483.483,0,0,1-.81.524,2.439,2.439,0,0,0-1.239-.953,2.537,2.537,0,0,0-1.573-.048,2.819,2.819,0,0,0-1.334.858,1.669,1.669,0,0,0-.238.381h2.907a.477.477,0,1,1,0,.953H194.24v.524h3.193a.477.477,0,1,1,0,.953h-2.907c.048.048.048.143.1.191a2.342,2.342,0,0,0,1.239,1,2.547,2.547,0,0,0,1.573.1,2.506,2.506,0,0,0,1.334-.858.473.473,0,0,1,.715.62,3.178,3.178,0,0,1-1.859,1.144,3.472,3.472,0,0,1-2.192-.143,3.417,3.417,0,0,1-1.668-1.382,4.813,4.813,0,0,1-.334-.715h-.953a.477.477,0,0,1,0-.953h.715v-.524h-.667a.477.477,0,0,1,0-.953h.953a3.9,3.9,0,0,1,.572-.953A3.261,3.261,0,0,1,195.813,522.77Z" transform="translate(-188.95 -514.334)" fill="#2e3831" fill-rule="evenodd"/>
2394        <path id="Pfad_15184" data-name="Pfad 15184" d="M.667.667A2.269,2.269,0,0,1,2.288,0h7.2a.433.433,0,0,1,.334.143L15.25,5.528a.433.433,0,0,1,.143.334V16.68a2.278,2.278,0,0,1-2.288,2.288H2.288A2.278,2.278,0,0,1,0,16.68V2.288A2.269,2.269,0,0,1,.667.667Zm1.62.286A1.3,1.3,0,0,0,.953,2.288V16.68a1.513,1.513,0,0,0,.381.953,1.331,1.331,0,0,0,.953.381H13.106a1.513,1.513,0,0,0,.953-.381,1.331,1.331,0,0,0,.381-.953V6.1L9.293.953Z" fill="#2e3831" fill-rule="evenodd"/>
2395        <path id="Pfad_15185" data-name="Pfad 15185" d="M567.477,0a.45.45,0,0,1,.477.477V5.385h4.909a.477.477,0,1,1,0,.953h-5.385A.45.45,0,0,1,567,5.862V.477A.478.478,0,0,1,567.477,0Z" transform="translate(-557.993)" fill="#2e3831" fill-rule="evenodd"/>
2396      </g>
2397    </g>
2398    <g id="electronic-cash" transform="translate(1097.072 8562.672)">
2399      <g id="paypal-outline-large-3" data-name="paypal-outline-large" transform="translate(98.993 1420.484)">
2400        <rect id="card_bg-5" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
2401        <path id="card_bg-2-6" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
2402      </g>
2403      <g id="layer1" transform="translate(111.828 1423.77)">
2404        <g id="g4785" transform="translate(2.445 2.35)">
2405          <g id="g2349" transform="translate(0.012 0.022)">
2406            <g id="path2351">
2407              <path id="Pfad_15186" data-name="Pfad 15186" d="M81.71,79.254V70.57H74.7a1.614,1.614,0,0,0-1.6,1.681V83.612a1.616,1.616,0,0,0,1.6,1.679H81.71v-5.17H77.963v2.191h-.541a.67.67,0,0,1-.659-.683V79.254ZM76.763,74.2a.652.652,0,0,1,.65-.65h.55v2.8h-1.2Z" transform="translate(-73.1 -70.57)" fill="#2e3831" fill-rule="evenodd"/>
2408            </g>
2409          </g>
2410          <g id="g2353" transform="translate(0 16.83)">
2411            <g id="path2355">
2412              <path id="Pfad_15187" data-name="Pfad 15187" d="M73.763,585.559v-.292c0-.6-.051-.957-.531-.957-.336,0-.52.293-.5.808v.57c-.009.64.154.913.552.913.35,0,.489-.307.475-.794h-.342c.005.278-.035.412-.16.412-.1,0-.177-.054-.184-.342v-.317Zm-.69-.475c0-.2,0-.393.165-.393.139,0,.179.074.184.287v.193h-.349Z" transform="translate(-72.729 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2413            </g>
2414          </g>
2415          <g id="g2357" transform="translate(6.467 0.022)">
2416            <g id="path2359">
2417              <path id="Pfad_15188" data-name="Pfad 15188" d="M278.82,85.3h-6.875l-.079-.009-.074-.01-.081-.014-.074-.019-.07-.026-.074-.025-.07-.025a1.673,1.673,0,0,1-.911-.943l-.025-.068-.021-.08-.019-.074-.019-.074-.01-.08-.01-.074,0-.084-.005-.074V72.247a1.672,1.672,0,0,1,.466-1.155,1.59,1.59,0,0,1,.54-.377l.068-.031.07-.025.075-.019.068-.019.079-.016.075-.009.074-.01.
2417079-.005h6.826v5.774h-3.587v-2.8c-.554-.088-1.153.039-1.186.689v-.254l0,.263,0-.009v7.39l0-.01,0,.065v-.054c.035.652.631.78,1.2.687v-3l.016-.054h3.563V85.3h0Z" transform="translate(-270.4 -70.58)" fill="#2e3831" fill-rule="evenodd"/>
2418            </g>
2419          </g>
2420          <g id="g2361" transform="translate(10.45 16.83)">
2421            <g id="path2363">
2422              <path id="Pfad_15189" data-name="Pfad 15189" d="M393.087,585.133h-.342v-.242c-.005-.119-.049-.189-.119-.189-.132,0-.132.222-.132.485v.517c-.012.426.028.5.132.524.105-.005.11-.149.119-.323v-.2h.342v.2c0,.456-.128.7-.47.7-.3,0-.475-.233-.461-.813v-.7c-.005-.615.2-.775.461-.775.347,0,.477.317.47.64v.173Z" transform="translate(-392.156 -584.32)" fill="#2e3831"/>
2423            </g>
2424          </g>
2425          <g id="g2365" transform="translate(6.466)">
2426            <g id="path2367">
2427              <path id="Pfad_15190" data-name="Pfad 15190" d="M271.878,69.921c-.047.007-.093.015-.138.024h0a1.826,1.826,0,0,0-.677.289l0,0h0l0,0a1.563,1.563,0,0,0-.478.547c-.006.01-.011.02-.016.03l-.007.013,0,0-.013.027-.015.031-.009.02a1.877,1.877,0,0,0-.144.676V78.6h2.156V69.921A2.4,2.4,0,0,0,271.878,69.921Zm-1.508,9.551v3.491l.006.074,0,.084.01.074.011.081.019.073.019.074.021.081.025.068a1.758,1.758,0,0,0,.361.566,1.541,1.541,0,0,0,.114.1l.047.039.032.025.032.024.058.04.021.014.032.02.006,0,.006,0h0l.019.011.025.014.025.014.051.026,0,0c.029.014.059.027.088.04h0a1.614,1.614,0,0,0,.182.063h0a1.492,1.492,0,0,0,.2.045,1.519,1.519,0,0,0,.155.015h.575v-5.17Z" transform="translate(-270.37 -69.899)" fill="#2e3831" fill-rule="evenodd"/>
2428            </g>
2429          </g>
2430          <g id="g2369" transform="translate(1.297 16.165)">
2431            <g id="path2371">
2432              <rect id="Rechteck_4432" data-name="Rechteck 4432" width="0.347" height="2.9" fill="#2e3831"/>
2433            </g>
2434          </g>
2435          <g id="g2373" transform="translate(1.89 16.83)">
2436            <g id="path2375">
2437              <path id="Pfad_15191" data-name="Pfad 15191" d="M131.524,585.559v-.292c0-.6-.051-.957-.533-.957-.336,0-.515.293-.5.808v.57c-.005.64.154.913.55.913.352,0,.49-.307.475-.794h-.345c0,.278-.03.412-.159.412-.1,0-.174-.054-.179-.342v-.317Zm-.526-.867c.138,0,.177.074.177.287v.193h-.342v-.088C130.833,584.885,130.823,584.692,131,584.692Z" transform="translate(-130.491 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2438            </g>
2439          </g>
2440          <g id="g2377" transform="translate(3.118 16.83)">
2441            <g id="path2379">
2442              <path id="Pfad_15192" data-name="Pfad 15192" d="M168.979,585.133h-.342v-.242c-.005-.119-.044-.189-.117-.189-.132,0-.132.222-.132.485v.517c0,.426.031.5.132.524.1-.005.107-.149.117-.323v-.2h.342v.2c0,.456-.123.7-.466.7-.307,0-.48-.233-.466-.813v-.7c0-.615.2-.775.466-.775.349,0,.471.317.466.64v.173Z" transform="translate(-168.046 -584.32)" fill="#2e3831"/>
2443            </g>
2444          </g>
2445          <g id="g2381" transform="translate(4.122 16.285)">
2446            <g id="path2383">
2447              <path id="Pfad_15193" data-name="Pfad 15193" d="M199.339,570.063v.4c-.208.03-.491.061-.491-.345v-1.479h-.138v-.364h.133v-.6h.347v.6h.149v.364h-.149V570c.01.089.105.074.149.068h0Z" transform="translate(-198.71 -567.67)" fill="#2e3831"/>
2448            </g>
2449          </g>
2450          <g id="g2385" transform="translate(4.889 16.846)">
2451            <g id="path2387">
2452              <path id="Pfad_15194" data-name="Pfad 15194" d="M222.493,584.84v.385h.005a.811.811,0,0,1,.133-.307.253.253,0,0,1,.217-.119v.6c-.193-.03-.336.04-.342.363v1.258h-.347v-2.18h.333Z" transform="translate(-222.16 -584.8)" fill="#2e3831"/>
2453            </g>
2454          </g>
2455          <g id="g2389" transform="translate(5.667 16.83)">
2456            <g id="path2391">
2457              <path id="Pfad_15195" data-name="Pfad 15195" d="M246.986,585.535c0-.748-.007-1.225-.517-1.225s-.526.477-.526,1.225.075,1.081.526,1.066C246.916,586.616,246.989,586.289,246.986,585.535Zm-.344.3c0,.266-.014.385-.173.385s-.184-.119-.184-.385v-.724c0-.2,0-.417.184-.417s.173.214.173.417Z" transform="translate(-245.943 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2458            </g>
2459          </g>
2460          <g id="g2393" transform="translate(6.927 16.83)">
2461            <g id="path2395">
2462              <path id="Pfad_15196" data-name="Pfad 15196" d="M284.8,584.366v.222h.005c.079-.254.233-.279.312-.279.193,0,.352.163.342.55v1.686h-.342v-1.453c0-.212-.019-.35-.149-.363s-.173.175-.168.4v1.412h-.342v-2.18h.342Z" transform="translate(-284.46 -584.31)" fill="#2e3831"/>
2463            </g>
2464          </g>
2465          <g id="path2397" transform="translate(8.196 16.165)">
2466            <path id="Pfad_15197" data-name="Pfad 15197" d="M323.24,564.728v2.182h.347v-2.182Zm0-.718v.456h.347v-.456Z" transform="translate(-323.24 -564.01)" fill="#2e3831" fill-rule="evenodd"/>
2467          </g>
2468          <g id="g2399" transform="translate(8.779 16.83)">
2469            <g id="path2401">
2470              <path id="Pfad_15198" data-name="Pfad 15198" d="M341.995,585.133h-.345v-.242c-.007-.119-.045-.189-.116-.189-.133,0-.133.222-.13.485v.517c-.009.426.026.5.13.524.105-.005.105-.149.116-.323v-.2h.345v.2c0,.456-.13.7-.471.7-.3,0-.48-.233-.466-.813v-.7c0-.615.205-.775.466-.775.347,0,.471.317.471.64v.173Z" transform="translate(-341.056 -584.32)" fill="#2e3831"/>
2471            </g>
2472          </g>
2473          <g id="g2403" transform="translate(11.522 16.83)">
2474            <g id="path2405">
2475              <path id="Pfad_15199" data-name="Pfad 15199" d="M425.935,586.243v-1.29c0-.291-.025-.643-.5-.643-.431,0-.521.288-.521.7h.328c0-.2.026-.317.184-.317.089,0,.144.016.158.114a.314.314,0,0,1-.168.363.779.779,0,0,0-.51.778c0,.456.119.654.4.654.119,0,.224-.1.308-.277a.834.834,0,0,0,.019.222h.326A1.668,1.668,0,0,1,425.935,586.243Zm-.347-.613c-.005.212.026.589-.173.589-.123,0-.163-.114-.163-.282a.492.492,0,0,1,.055-.263c.095-.1.2-.193.282-.277Z" transform="translate(-424.91 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2476            </g>
2477          </g>
2478          <g id="g2407" transform="translate(12.717 16.83)">
2479            <g id="path2409">
2480              <path id="Pfad_15200" data-name="Pfad 15200" d="M461.451,585.837h.342c-.025.4.084.391.159.391.1,0,.168-.109.144-.247a.392.392,0,0,0-.168-.257l-.184-.189a.907.907,0,0,1-.287-.689.47.47,0,0,1,.51-.526c.326,0,.492.252.482.718h-.344c.007-.242-.039-.336-.161-.336-.08,0-.146.054-.146.179a.331.331,0,0,0,.13.252l.287.277a.823.823,0,0,1,.228.428c.035.382-.03.773-.512.773-.177,0-.519-.109-.48-.773h0Z" transform="translate(-461.448 -584.32)" fill="#2e3831"/>
2481            </g>
2482          </g>
2483          <g id="g2411" transform="translate(13.897 16.165)">
2484            <g id="path2413">
2485              <path id="Pfad_15201" data-name="Pfad 15201" d="M497.837,566.91h-.347v-2.9h.347v.943h0c.095-.258.238-.279.309-.279.2,0,.358.163.347.55v1.686h-.347v-1.493c0-.212-.014-.35-.144-.361s-.173.168-.168.407v1.447h0Z" transform="translate(-497.49 -564.01)" fill="#2e3831"/>
2486            </g>
2487          </g>
2488        </g>
2489      </g>
2490    </g>
2491  </g>
2492</svg>
2493                                </div>
2494                            </div>
2495                                            </li>
2496                                                        <li data-child-id="category-node-14-main" class="level-0">
2497                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
2498
2499                            <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
2500                                                            @click.prevent="openSubcategory"
2501                                data-index="category-node-14"
2502                                role="button"
2503                                aria-label="Nahrungserg&#xE4;nzung&#x20;Unterkategorien&#x20;&#xF6;ffnen"
2504                                aria-haspopup="true"
2505                                :aria-expanded="getAriaExpanded"
2506                                data-expanded-index="category-node-14"
2507                                                        title="Nahrungserg&#xE4;nzung"
2508                            >
2509                            Nahrungsergänzung                            </a>
2510                        </div>
2511                                                    <div
2512                                    data-child-id="category-node-14"
2513                                    class="absolute top-0 right-0 z-10 flex flex-col gap-1 w-full min-h-[50vh] bg-container"
2514                                    :class="subPanelClasses"
2515                                    data-panel-index="category-node-14"
2516                            >
2517                                <ul
2518                                        class="transition-transform duration-200 ease-in-out translate-x-full transform bg-container pb-4"
2519                                        :class="subMenuClasses"
2520                                        data-submenu-index="category-node-14"
2521                                        aria-label="Unterkategorien"
2522                                >
2523                                    <li>
2524                                        <button
2525                                                type="button"
2526                                                class="flex items-center px-6 py-4 cursor-pointer w-full"
2527                                                @click="backToMainCategories"
2528                                                data-back-index="category-node-14-main"
2529                                                aria-label="Zur&#xFC;ck&#x20;zu&#x20;den&#x20;Hauptkategorien"
2530                                        >
2531                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50" class="w-8 h-8 lg:w-10 lg:h-10 rotate-180" aria-hidden="true">
2532  <g id="arrow-circle-outline_2" transform="translate(-1771 -3053)">
2533    <path id="Ellipse_855_2" data-name="Ellipse 855" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(1771 3053)" fill="#2e3831"/>
2534    <path id="Pfad_13977_2" data-name="Pfad 13977" d="M-18600.215-16056.184a1.493,1.493,0,0,1-1.061-.439,1.5,1.5,0,0,1,0-2.121l8.986-8.988-8.986-8.986a1.5,1.5,0,0,1,0-2.121,1.5,1.5,0,0,1,2.121,0l10.047,10.047a1.5,1.5,0,0,1,0,2.121l-10.047,10.049A1.493,1.493,0,0,1-18600.215-16056.184Z" transform="translate(20391.715 19145.73)" fill="#2e3831"/>
2535  </g>
2536</svg>
2537                                            <span class="ml-4 h2 font-bold text-gray">Nahrungsergänzung</span>
2538                                        </button>
2539                                    </li>
2540                                    <li class="border-b border-gray-200 mb-2">
2541                                        <a href="https://www.strunz.com/nahrungsergaenzung.html"
2542                                           title="Alle&#x20;anzeigen"
2543                                           class="flex items-center w-full px-8 py-3 cursor-pointer no-underline text-body-lg font-bold">
2544                                            <span class="ml-10">Alle anzeigen</span>
2545                                        </a>
2546                                    </li>
2547                                                                                                                                                            <li class="px-8 mb-4 mt-4">
2548                                                <span class="ml-10 filter-active">Kategorie</span>
2549                                            </li>
2550                                                                                                                                                <li>
2551                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/aminosaeuren.html"
2552                                                           title="Aminos&#xE4;uren"
2553                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2554                                                            <span class="ml-10">Aminosäuren</span>
2555                                                        </a>
2556                                                    </li>
2557                                                                                                    <li>
2558                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/vitamine.html"
2559                                                           title="Vitamine"
2560                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2561                                                            <span class="ml-10">Vitamine</span>
2562                                                        </a>
2563                                                    </li>
2564                                                                                                    <li>
2565                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/mineralstoffe.html"
2566                                                           title="Mineralstoffe"
2567                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2568                                                            <span class="ml-10">Mineralstoffe</span>
2569                                                        </a>
2570                                                    </li>
2571                                                                                                    <li>
2572                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/pflanzenstoffe.html"
2573                                                           title="Pflanzenstoffe"
2574                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2575                                                            <span class="ml-10">Pflanzenstoffe</span>
2576                                                        </a>
2577                                                    </li>
2578                                                                                                    <li>
2579                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/funtionelle-naehrstoffe.html"
2580                                                           title="Funktionelle&#x20;N&#xE4;hrstoffe"
2581                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2582                                                            <span class="ml-10">Funktionelle Nährstoffe</span>
2583                                                        </a>
2584                                                    </li>
2585                                                                                                    <li>
2586                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/omega-3-und-oele.html"
2587                                                           title="Omega&#x20;3&#x20;&amp;&#x20;&#xD6;le"
2588                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2589                                                            <span class="ml-10">Omega 3 &amp; Öle</span>
2590                                                        </a>
2591                                                    </li>
2592                                                                                                    <li>
2593                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/all-in-one.html"
2594                                                           title="All-in-One"
2595                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2596                                                            <span class="ml-10">All-in-One</span>
2597                                                        </a>
2598                                                    </li>
2599                                                                                                                                                                                                                                                                                                    <li class="px-8 mb-4  mt-8">
2600                                                <span class="ml-10 filter-active">Anwendungsbereiche</span>
2601                                            </li>
2602                                                                                                                                                <li>
2603                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/abnehmen.html"
2604                                                           title="Abnehmen&#x20;&amp;&#x20;Stoffwechsel"
2605                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2606                                                            <span class="ml-10">Abnehmen &amp; Stoffwechsel</span>
2607                                                        </a>
2608                                                    </li>
2609                                                                                                    <li>
2610                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/allergien.html"
2611                                                           title="Allergien&#x20;&amp;&#x20;Unvertr&#xE4;glichkeiten"
2612                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2613                                                            <span class="ml-10">Allergien &amp; Unverträglichkeiten</span>
2614                                                        </a>
2615                                                    </li>
2616                                                                                                    <li>
2617                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/augen.html"
2618                                                           title="Augen"
2619                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2620                                                            <span class="ml-10">Augen</span>
2621                                                        </a>
2622                                                    </li>
2623                                                                                                    <li>
2624                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/darm-verdauung.html"
2625                                                           title="Darm&#x20;&amp;&#x20;Verdauung"
2626                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2627                                                            <span class="ml-10">Darm &amp; Verdauung</span>
2628                                                        </a>
2629                                                    </li>
2630                                                                                                    <li>
2631                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/entzuendungen.html"
2632                                                           title="Entz&#xFC;ndung"
2633                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2634                                                            <span class="ml-10">Entzündung</span>
2635                                                        </a>
2636                                                    </li>
2637                                                                                                    <li>
2638                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/energie-mitochondrien.html"
2639                                                           title="Energie&#x20;&amp;&#x20;Mitochondrien"
2640                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2641                                                            <span class="ml-10">Energie &amp; Mitochondrien</span>
2642                                                        </a>
2643                                                    </li>
2644                                                                                                    <li>
2645                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/frauengesundheit.html"
2646                                                           title="Frauengesundheit"
2647                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2648                                                            <span class="ml-10">Frauengesundheit</span>
2649                                                        </a>
2650                                                    </li>
2651                                                                                                    <li>
2652                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/gehirn-nerven-psyche.html"
2653                                                           title="Gehirn,&#x20;Nerven&#x20;&amp;&#x20;Psyche"
2654                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2655                                                            <span class="ml-10">Gehirn, Nerven &amp; Psyche</span>
2656                                                        </a>
2657                                                    </li>
2658                                                                                                    <li>
2659                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/haut-haare-naegel.html"
2660                                                           title="Haut,&#x20;Haare,&#x20;N&#xE4;gel"
2661                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2662                                                            <span class="ml-10">Haut, Haare, Nägel</span>
2663                                                        </a>
2664                                                    </li>
2665                                                                                                    <li>
2666                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/herz-und-gefaesse.html"
2667                                                           title="Herz&#x20;&amp;&#x20;Gef&#xE4;&#xDF;e"
2668                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2669                                                            <span class="ml-10">Herz &amp; Gefäße</span>
2670                                                        </a>
2671                                                    </li>
2672                                                                                                    <li>
2673                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/abwehrkraefte.html"
2674                                                           title="Immunsystem&#x20;&amp;&#x20;Abwehrkr&#xE4;fte"
2675                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2676                                                            <span class="ml-10">Immunsystem &amp; Abwehrkräfte</span>
2677                                                        </a>
2678                                                    </li>
2679                                                                                                    <li>
2680                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/kindergesundheit.html"
2681                                                           title="Kindergesundheit"
2682                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2683                                                            <span class="ml-10">Kindergesundheit</span>
2684                                                        </a>
2685                                                    </li>
2686                                                                                                    <li>
2687                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/knochen-gelenke-sehnen.html"
2688                                                           title="Knochen,&#x20;Gelenke,&#x20;Sehnen"
2689                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2690                                                            <span class="ml-10">Knochen, Gelenke, Sehnen</span>
2691                                                        </a>
2692                                                    </li>
2693                                                                                                    <li>
2694                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/entgiften-ausleiten.html"
2695                                                           title="Leber&#x20;&amp;&#x20;Entgiften&#x20;"
2696                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2697                                                            <span class="ml-10">Leber &amp; Entgiften </span>
2698                                                        </a>
2699                                                    </li>
2700                                                                                                    <li>
2701                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/longevity.html"
2702                                                           title="Longevity"
2703                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2704                                                            <span class="ml-10">Longevity</span>
2705                                                        </a>
2706                                                    </li>
2707                                                                                                    <li>
2708                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/maennergesundheit.html"
2709                                                           title="M&#xE4;nnergesundheit"
2710                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2711                                                            <span class="ml-10">Männergesundheit</span>
2712                                                        </a>
2713                                                    </li>
2714                                                                                                    <li>
2715                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/schilddruese.html"
2716                                                           title="Schilddr&#xFC;se"
2717                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2718                                                            <span class="ml-10">Schilddrüse</span>
2719                                                        </a>
2720                                                    </li>
2721                                                                                                    <li>
2722                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/schlaf-und-entspannung.html"
2723                                                           title="Schlaf&#x20;&amp;&#x20;Entspannung"
2724                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2725                                                            <span class="ml-10">Schlaf &amp; Entspannung</span>
2726                                                        </a>
2727                                                    </li>
2728                                                                                                    <li>
2729                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/stress-erschoepfung.html"
2730                                                           title="Stress&#x20;&amp;&#x20;Ersch&#xF6;pfung"
2731                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2732                                                            <span class="ml-10">Stress &amp; Erschöpfung</span>
2733                                                        </a>
2734                                                    </li>
2735                                                                                                    <li>
2736                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/training-und-regeneration.html"
2737                                                           title="Training&#x20;&amp;&#x20;Regeneration"
2738                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2739                                                            <span class="ml-10">Training &amp; Regeneration</span>
2740                                                        </a>
2741                                                    </li>
2742                                                                                                    <li>
2743                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/zaehne-mund.html"
2744                                                           title="Z&#xE4;hne&#x20;&amp;&#x20;Mund"
2745                                                           class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2746                                                            <span class="ml-10">Zähne &amp; Mund</span>
2747                                                        </a>
2748                                                    </li>
2749                                                                                                                                                                                                                                                </ul>
2750                                                                <div class="mt-8">
2751                                    <div class="px-6 py-12 mx-4 rounded-lg" style="background-color: #a98aff">
2752                                            <div class="featured-product flex gap-4 justify-evenly">
2753                                                <div class="flex flex-col flex-shrink basis-[calc(100%-6rem)]">
2754                                                    <div class="flex flex-col gap-2 mb-2">
2755                                                                                                                    <sp
2755an class="text-body-sm" style="color: #3d1568">
2756                                                            FOREVER YOUNG                                                            </span>
2757                                                                                                                <span class="h2 font-bold m-0" style="color: #3d1568">
2758                                                        Amino 11                                                        </span>
2759                                                    </div>
2760                                                    <a href="https://www.strunz.com/forever-young-amino-11-tabletten.html"
2761                                                       class="btn btn-primary hover:opacity-90 inline-block mt-auto mr-auto"
2762                                                       style="color: #a98aff; background-color: #3d1568; border-color: #a98aff">
2763                                                        Zum Produkt                                                    </a>
2764                                                </div>
2765                                                <div class="flex-shrink basis-[6rem]">
2766                                                    <img src="/media/wysiwyg/home/showcase/showcase-slider_500x850px_ amino-11.webp"
2767                                                         alt="Amino&#x20;11"
2768                                                         class="max-w-full h-auto" />
2769                                                </div>
2770                                            </div>
2771                                    </div>
2772                                </div>
2773                                                                <div class="flex justify-center items-center py-8 px-8 bg-black mt-8">
2774                                    <svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 263.797 31" class="w-60 h-8 text-white" aria-hidden="true">
2775  <g id="payment_2" transform="translate(-978.002 -9982.656)">
2776    <g id="visa-outline-large_2" transform="translate(1032.768 9983.156)">
2777      <rect id="card_bg_2" width="44" height="30" rx="4" transform="translate(0.766 0)" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/>
2778      <path id="card_bg-2_2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
2779      <path id="visa-logo_2" d="M15.976,8.94a6.692,6.692,0,0,1-2.445-.461l.4-1.878a4.713,4.713,0,0,0,2.232.565h.059c.668-.01,1.343-.277,1.343-.854.009-.368-.306-.66-1.164-1.08s-1.962-1.105-1.962-2.358C14.443,1.182,15.987,0,18.2,0a6.023,6.023,0,0,1,2.1.386l-.392,1.883a4.238,4.238,0,0,0-1.8-.406,4.107,4.107,0,0,0-.413.02c-.649.086-.939.425-.939.723,0,.364.465.607,1.055.916.935.489,2.1,1.1,2.092,2.53l.048-.076c-.009,1.8-1.547,2.967-3.915,2.967ZM22.2,8.866H19.832L23.2.818a1.021,1.021,0,0,1,.939-.639h1.878l1.827,8.684H25.758l-.272-1.3H22.659l-.46,1.3ZM24.434,2.52,23.251,5.784H25.12ZM11.925,8.837H9.672L11.551.15H13.8L11.925,8.836ZM7,8.808H4.545L2.752,1.869a.944.944,0,0,0-.536-.756A9.312,9.312,0,0,0,0,.378L.057.126H3.879a1.05,1.05,0,0,1,1.036.882l.945,5.02L8.2.126H10.64Z" transform="translate(8.241 10.738)" fill="#2e3831"/>
2780    </g>
2781    <g id="paypal-outline-large_2" transform="translate(1141.297 9983.156)">
2782      <rect id="card_bg-2-2_2" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
2783      <path id="card_bg-2-3_2" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
2784      <g id="paypal_2" transform="translate(15.269 5.799)">
2785        <path id="Path_2" d="M11.934,4.132C11.259,7.587,8.946,8.77,6.018,8.77H5.544a.723.723,0,0,0-.713.62V9.6l-.559,3.625v.15a.732.732,0,0,1-.732.62H.441a.422.422,0,0,1-.432-.5l.243-1.58L1.6,3.339l.5.7L.666,13.357h2.9c.019,0,0,0,0-.076v-.126l.582-3.643v-.2a1.418,1.418,0,0,1,.47-.827A1.4,1.4,0,0,1,5.5,8.151h.489a8.386,8.386,0,0,0,1.871-.213A4.817,4.817,0,0,0,9.4,7.244,4.2,4.2,0,0,0,10.525,6,6.085,6.085,0,0,0,11.24,4.02a5.174,5.174,0,0,0,.093-1.751,2.451,2.451,0,0,0-.544-1.2A1.671,1.671,0,0,0,10.3.677a2.184,2.184,0,0,1,.076-.338L10.432,0a2.818,2.818,0,0,1,.827.639,3.963,3.963,0,0,1,.675,3.493Z" transform="translate(3.849 4.817)" fill="#2e3831"/>
2786        <path id="Path-2_2" data-name="Path" d="M8.489.274,8.133.179,7.738.1a9.451,9.451,0,0,0-1.5-.
27861H1.653a.677.677,0,0,0-.31.066A.713.713,0,0,0,.94.61L0,6.781v.179a.835.835,0,0,1,.827-.7H2.535c3.362,0,6-1.371,6.77-5.315L9.362.592a4.207,4.207,0,0,0-.63-.263Z" transform="translate(5.041 4.206)" fill="#2e3831"/>
2787        <path id="Path-3_2" data-name="Path" d="M14.337,4.776a3.634,3.634,0,0,0-.6-.244,3.916,3.916,0,0,0,0-1.5,2.535,2.535,0,0,0-.677-1.145c-.694-.808-2.027-1.2-3.962-1.2H3.256a.272.272,0,0,0-.126,0,.169.169,0,0,0-.057.126L.645,16.063h3.55L4.1,16.7H.5a.5.5,0,0,1-.489-.582L2.43.719A.846.846,0,0,1,3.256.006H9.1a6.048,6.048,0,0,1,4.488,1.409,3.756,3.756,0,0,1,.756,3.362Z" transform="translate(0.001 0.022)" fill="#2e3831"/>
2788      </g>
2789    </g>
2790    <g id="mastercard-outline-large_2" transform="translate(1086.898 9983.156)">
2791      <rect id="card_bg-3_2" data-name="card_bg" width="45" height="30" rx="4" transform="translate(0 0)" fill="none"/>
2792      <path id="card_bg-2-4_2" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
2793      <g id="mastercard_2" transform="translate(4.366 3.198)">
2794        <g id="Group_2" opacity="0">
2795          <rect id="Rectangle_2" width="36.34" height="24.04" fill="#2e3831"/>
2796        </g>
2797        <path id="Path-4_2" data-name="Path" d="M14.475,18.847a9.963,9.963,0,1,1,0-17.767,11.71,11.71,0,0,0-4.016,8.883,11.879,11.879,0,0,0,4.016,8.883Z" transform="translate(2.025 2.056)" fill="#2e3831"/>
2798        <path id="Shape_2" d="M.47.387H.394V0H.5L.61.272.733,0H.827V.384H.756V.093l-.1.252H.582L.47.093V.386Zm-.282,0H.126V.066H0V0H.329V.066H.188V.384Z" transform="translate(33.139 17.805)" fill="#2e3831"/>
2799        <path id="Path-5_2" data-name="Path" d="M14.462,9.968A9.955,9.955,0,0,1,.019,18.852,11.87,11.87,0,0,0,1.5,2.646,10.742,10.742,0,0,0,0,1.085,9.944,9.944,0,0,1,14.462,9.968Z" transform="translate(19.823 2.051)" fill="#2e3831"/>
2800        <path id="Path-6_2" data-name="Path" d="M3.81,15.663A9.955,9.955,0,0,1,3.81,0a9.963,9.963,0,0,1,3.8,7.831,9.963,9.963,0,0,1-3.8,7.831Z" transform="translate(14.36 4.188)" fill="#2e3831"/>
2801      </g>
2802    </g>
2803    <g id="zahlen-auf-rechnung_2" transform="translate(767.533 8562.672)">
2804      <g id="paypal-outline-large-2_2" data-name="paypal-outline-large" transform="translate(210.735 1420.484)">
2805        <rect id="card_bg-4_2" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
2806        <path id="card_bg-2-5_2" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
2807      </g>
2808      <g id="living-berlin-logo-bezahlen-auf-rechnung_2" transform="translate(225.771 1426.121)">
2809        <path id="Pfad_15183_2" data-name="Pfad 15183" d="M195.813,522.77a3.46,3.46,0,0,1,2.192.1,3.394,3.394,0,0,1,1.716,1.334.483.483,0,0,1-.81.524,2.439,2.439,0,0,0-1.239-.953,2.537,2.537,0,0,0-1.573-.048,2.819,2.819,0,0,0-1.334.858,1.669,1.669,0,0,0-.238.381h2.907a.477.477,0,1,1,0,.953H194.24v.524h3.193a.477.477,0,1,1,0,.953h-2.907c.048.048.048.143.1.191a2.342,2.342,0,0,0,1.239,1,2.547,2.547,0,0,0,1.573.1,2.506,2.506,0,0,0,1.334-.858.473.473,0,0,1,.715.62,3.178,3.178,0,0,1-1.859,1.144,3.472,3.472,0,0,1-2.192-.143,3.417,3.417,0,0,1-1.668-1.382,4.813,4.813,0,0,1-.334-.715h-.953a.477.477,0,0,1,0-.953h.715v-.524h-.667a.477.477,0,0,1,0-.953h.953a3.9,3.9,0,0,1,.572-.953A3.261,3.261,0,0,1,195.813,522.77Z" transform="translate(-188.95 -514.334)" fill="#2e3831" fill-rule="evenodd"/>
2810        <path id="Pfad_15184_2" data-name="Pfad 15184" d="M.667.667A2.269,2.269,0,0,1,2.288,0h7.2a.433.433,0,0,1,.334.143L15.25,5.528a.433.433,0,0,1,.143.334V16.68a2.278,2.278,0,0,1-2.288,2.288H2.288A2.278,2.278,0,0,1,0,16.68V2.288A2.269,2.269,0,0,1,.667.667Zm1.62.286A1.3,1.3,0,0,0,.953,2.288V16.68a1.513,1.513,0,0,0,.381.953,1.331,1.331,0,0,0,.953.381H13.106a1.513,1.513,0,0,0,.953-.381,1.331,1.331,0,0,0,.381-.953V6.1L9.293.953Z" fill="#2e3831" fill-rule="evenodd"/>
2811        <path id="Pfad_15185_2" data-name="Pfad 15185" d="M567.477,0a.45.45,0,0,1,.477.477V5.385h4.909a.477.477,0,1,1,0,.953h-5.385A.45.45,0,0,1,567,5.862V.477A.478.478,0,0,1,567.477,0Z" transform="translate(-557.993)" fill="#2e3831" fill-rule="evenodd"/>
2812      </g>
2813    </g>
2814    <g id="electronic-cash_2" transform="translate(1097.072 8562.672)">
2815      <g id="paypal-outline-large-3_2" data-name="paypal-outline-large" transform="translate(98.993 1420.484)">
2816        <rect id="card_bg-5_2" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
2817        <path id="card_bg-2-6_2" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
2818      </g>
2819      <g id="layer1_2" transform="translate(111.828 1423.77)">
2820        <g id="g4785_2" transform="translate(2.445 2.35)">
2821          <g id="g2349_2" transform="translate(0.012 0.022)">
2822            <g id="path2351_2">
2823              <path id="Pfad_15186_2" data-name="Pfad 15186" d="M81.71,79.254V70.57H74.7a1.614,1.614,0,0,0-1.6,1.681V83.612a1.616,1.616,0,0,0,1.6,1.679H81.71v-5.17H77.963v2.191h-.541a.67.67,0,0,1-.659-.683V79.254ZM76.763,74.2a.652.652,0,0,1,.65-.65h.55v2.8h-1.2Z" transform="translate(-73.1 -70.57)" fill="#2e3831" fill-rule="evenodd"/>
2824            </g>
2825          </g>
2826          <g id="g2353_2" transform="translate(0 16.83)">
2827            <g id="path2355_2">
2828              <path id="Pfad_15187_2" data-name="Pfad 15187" d="M73.763,585.559v-.292c0-.6-.051-.957-.531-.957-.336,0-.52.293-.5.808v.57c-.009.64.154.913.552.913.35,0,.489-.307.475-.794h-.342c.005.278-.035.412-.16.412-.1,0-.177-.054-.184-.342v-.317Zm-.69-.475c0-.2,0-.393.165-.393.139,0,.179.074.184.287v.193h-.349Z" transform="translate(-72.729 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2829            </g>
2830          </g>
2831          <g id="g2357_2" transform="translate(6.467 0.022)">
2832            <g id="path2359_2">
2833              <path id="Pfad_15188_2" data-name="Pfad 15188" d="M278.82,85.3h-6.875l-.079-.009-.074-.01-.081-.014-.074-.019-.07-.026-.074-.025-.07-.025a1.673,1.673,0,0,1-.911-.943l-.025-.068-.021-.08-.019-.074-.019-.074-.01-.08-.01-.074,0-.084-.005-.074V72.247a1.672,1.672,0,0,1,.466-1.155,1.59,1.59,0,0,1,.54-.377l.068-.031.07-.025.075-.019.068-.019.079-.016.075-.009.074-.01.
2833079-.005h6.826v5.774h-3.587v-2.8c-.554-.088-1.153.039-1.186.689v-.254l0,.263,0-.009v7.39l0-.01,0,.065v-.054c.035.652.631.78,1.2.687v-3l.016-.054h3.563V85.3h0Z" transform="translate(-270.4 -70.58)" fill="#2e3831" fill-rule="evenodd"/>
2834            </g>
2835          </g>
2836          <g id="g2361_2" transform="translate(10.45 16.83)">
2837            <g id="path2363_2">
2838              <path id="Pfad_15189_2" data-name="Pfad 15189" d="M393.087,585.133h-.342v-.242c-.005-.119-.049-.189-.119-.189-.132,0-.132.222-.132.485v.517c-.012.426.028.5.132.524.105-.005.11-.149.119-.323v-.2h.342v.2c0,.456-.128.7-.47.7-.3,0-.475-.233-.461-.813v-.7c-.005-.615.2-.775.461-.775.347,0,.477.317.47.64v.173Z" transform="translate(-392.156 -584.32)" fill="#2e3831"/>
2839            </g>
2840          </g>
2841          <g id="g2365_2" transform="translate(6.466)">
2842            <g id="path2367_2">
2843              <path id="Pfad_15190_2" data-name="Pfad 15190" d="M271.878,69.921c-.047.007-.093.015-.138.024h0a1.826,1.826,0,0,0-.677.289l0,0h0l0,0a1.563,1.563,0,0,0-.478.547c-.006.01-.011.02-.016.03l-.007.013,0,0-.013.027-.015.031-.009.02a1.877,1.877,0,0,0-.144.676V78.6h2.156V69.921A2.4,2.4,0,0,0,271.878,69.921Zm-1.508,9.551v3.491l.006.074,0,.084.01.074.011.081.019.073.019.074.021.081.025.068a1.758,1.758,0,0,0,.361.566,1.541,1.541,0,0,0,.114.1l.047.039.032.025.032.024.058.04.021.014.032.02.006,0,.006,0h0l.019.011.025.014.025.014.051.026,0,0c.029.014.059.027.088.04h0a1.614,1.614,0,0,0,.182.063h0a1.492,1.492,0,0,0,.2.045,1.519,1.519,0,0,0,.155.015h.575v-5.17Z" transform="translate(-270.37 -69.899)" fill="#2e3831" fill-rule="evenodd"/>
2844            </g>
2845          </g>
2846          <g id="g2369_2" transform="translate(1.297 16.165)">
2847            <g id="path2371_2">
2848              <rect id="Rechteck_4432_2" data-name="Rechteck 4432" width="0.347" height="2.9" fill="#2e3831"/>
2849            </g>
2850          </g>
2851          <g id="g2373_2" transform="translate(1.89 16.83)">
2852            <g id="path2375_2">
2853              <path id="Pfad_15191_2" data-name="Pfad 15191" d="M131.524,585.559v-.292c0-.6-.051-.957-.533-.957-.336,0-.515.293-.5.808v.57c-.005.64.154.913.55.913.352,0,.49-.307.475-.794h-.345c0,.278-.03.412-.159.412-.1,0-.174-.054-.179-.342v-.317Zm-.526-.867c.138,0,.177.074.177.287v.193h-.342v-.088C130.833,584.885,130.823,584.692,131,584.692Z" transform="translate(-130.491 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2854            </g>
2855          </g>
2856          <g id="g2377_2" transform="translate(3.118 16.83)">
2857            <g id="path2379_2">
2858              <path id="Pfad_15192_2" data-name="Pfad 15192" d="M168.979,585.133h-.342v-.242c-.005-.119-.044-.189-.117-.189-.132,0-.132.222-.132.485v.517c0,.426.031.5.132.524.1-.005.107-.149.117-.323v-.2h.342v.2c0,.456-.123.7-.466.7-.307,0-.48-.233-.466-.813v-.7c0-.615.2-.775.466-.775.349,0,.471.317.466.64v.173Z" transform="translate(-168.046 -584.32)" fill="#2e3831"/>
2859            </g>
2860          </g>
2861          <g id="g2381_2" transform="translate(4.122 16.285)">
2862            <g id="path2383_2">
2863              <path id="Pfad_15193_2" data-name="Pfad 15193" d="M199.339,570.063v.4c-.208.03-.491.061-.491-.345v-1.479h-.138v-.364h.133v-.6h.347v.6h.149v.364h-.149V570c.01.089.105.074.149.068h0Z" transform="translate(-198.71 -567.67)" fill="#2e3831"/>
2864            </g>
2865          </g>
2866          <g id="g2385_2" transform="translate(4.889 16.846)">
2867            <g id="path2387_2">
2868              <path id="Pfad_15194_2" data-name="Pfad 15194" d="M222.493,584.84v.385h.005a.811.811,0,0,1,.133-.307.253.253,0,0,1,.217-.119v.6c-.193-.03-.336.04-.342.363v1.258h-.347v-2.18h.333Z" transform="translate(-222.16 -584.8)" fill="#2e3831"/>
2869            </g>
2870          </g>
2871          <g id="g2389_2" transform="translate(5.667 16.83)">
2872            <g id="path2391_2">
2873              <path id="Pfad_15195_2" data-name="Pfad 15195" d="M246.986,585.535c0-.748-.007-1.225-.517-1.225s-.526.477-.526,1.225.075,1.081.526,1.066C246.916,586.616,246.989,586.289,246.986,585.535Zm-.344.3c0,.266-.014.385-.173.385s-.184-.119-.184-.385v-.724c0-.2,0-.417.184-.417s.173.214.173.417Z" transform="translate(-245.943 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2874            </g>
2875          </g>
2876          <g id="g2393_2" transform="translate(6.927 16.83)">
2877            <g id="path2395_2">
2878              <path id="Pfad_15196_2" data-name="Pfad 15196" d="M284.8,584.366v.222h.005c.079-.254.233-.279.312-.279.193,0,.352.163.342.55v1.686h-.342v-1.453c0-.212-.019-.35-.149-.363s-.173.175-.168.4v1.412h-.342v-2.18h.342Z" transform="translate(-284.46 -584.31)" fill="#2e3831"/>
2879            </g>
2880          </g>
2881          <g id="path2397_2" transform="translate(8.196 16.165)">
2882            <path id="Pfad_15197_2" data-name="Pfad 15197" d="M323.24,564.728v2.182h.347v-2.182Zm0-.718v.456h.347v-.456Z" transform="translate(-323.24 -564.01)" fill="#2e3831" fill-rule="evenodd"/>
2883          </g>
2884          <g id="g2399_2" transform="translate(8.779 16.83)">
2885            <g id="path2401_2">
2886              <path id="Pfad_15198_2" data-name="Pfad 15198" d="M341.995,585.133h-.345v-.242c-.007-.119-.045-.189-.116-.189-.133,0-.133.222-.13.485v.517c-.009.426.026.5.13.524.105-.005.105-.149.116-.323v-.2h.345v.2c0,.456-.13.7-.471.7-.3,0-.48-.233-.466-.813v-.7c0-.615.205-.775.466-.775.347,0,.471.317.471.64v.173Z" transform="translate(-341.056 -584.32)" fill="#2e3831"/>
2887            </g>
2888          </g>
2889          <g id="g2403_2" transform="translate(11.522 16.83)">
2890            <g id="path2405_2">
2891              <path id="Pfad_15199_2" data-name="Pfad 15199" d="M425.935,586.243v-1.29c0-.291-.025-.643-.5-.643-.431,0-.521.288-.521.7h.328c0-.2.026-.317.184-.317.089,0,.144.016.158.114a.314.314,0,0,1-.168.363.779.779,0,0,0-.51.778c0,.456.119.654.4.654.119,0,.224-.1.308-.277a.834.834,0,0,0,.019.222h.326A1.668,1.668,0,0,1,425.935,586.243Zm-.347-.613c-.005.212.026.589-.173.589-.123,0-.163-.114-.163-.282a.492.492,0,0,1,.055-.263c.095-.1.2-.193.282-.277Z" transform="translate(-424.91 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
2892            </g>
2893          </g>
2894          <g id="g2407_2" transform="translate(12.717 16.83)">
2895            <g id="path2409_2">
2896              <path id="Pfad_15200_2" data-name="Pfad 15200" d="M461.451,585.837h.342c-.025.4.084.391.159.391.1,0,.168-.109.144-.247a.392.392,0,0,0-.168-.257l-.184-.189a.907.907,0,0,1-.287-.689.47.47,0,0,1,.51-.526c.326,0,.492.252.482.718h-.344c.007-.242-.039-.336-.161-.336-.08,0-.146.054-.146.179a.331.331,0,0,0,.13.252l.287.277a.823.823,0,0,1,.228.428c.035.382-.03.773-.512.773-.177,0-.519-.109-.48-.773h0Z" transform="translate(-461.448 -584.32)" fill="#2e3831"/>
2897            </g>
2898          </g>
2899          <g id="g2411_2" transform="translate(13.897 16.165)">
2900            <g id="path2413_2">
2901              <path id="Pfad_15201_2" data-name="Pfad 15201" d="M497.837,566.91h-.347v-2.9h.347v.943h0c.095-.258.238-.279.309-.279.2,0,.358.163.347.55v1.686h-.347v-1.493c0-.212-.014-.35-.144-.361s-.173.168-.168.407v1.447h0Z" transform="translate(-497.49 -564.01)" fill="#2e3831"/>
2902            </g>
2903          </g>
2904        </g>
2905      </g>
2906    </g>
2907  </g>
2908</svg>
2909                                </div>
2910                            </div>
2911                                            </li>
2912                                                        <li data-child-id="category-node-26-main" class="level-0">
2913                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
2914
2915                            <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
2916                                                            href="https://www.strunz.com/buecher.html"
2917                                                        title="B&#xFC;cher"
2918                            >
2919                            Bücher                            </a>
2920                        </div>
2921                                            </li>
2922                                                        <li data-child-id="category-node-29-main" class="level-0">
2923                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
2924
2925                            <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
2926                                                            href="https://www.strunz.com/selbsttests.html"
2927                                                        title="Selbsttests"
2928                            >
2929                            Selbsttests                            </a>
2930                        </div>
2931                                            </li>
2932                                                        <li data-child-id="category-node-134-main" class="level-0">
2933                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
2934
2935                            <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
2936                                                            @click.prevent="openSubcategory"
2937                                data-index="category-node-134"
2938                                role="button"
2939                                aria-label="Snacks&#x20;Unterkategorien&#x20;&#xF6;ffnen"
2940                                aria-haspopup="true"
2941                                :aria-expanded="getAriaExpanded"
2942                                data-expanded-index="category-node-134"
2943                                                        title="Snacks"
2944                            >
2945                            Snacks                            </a>
2946                        </div>
2947                                                    <div
2948                                    data-child-id="category-node-134"
2949                                    class="absolute top-0 right-0 z-10 flex flex-col gap-1 w-full min-h-[50vh] bg-container"
2950                                    :class="subPanelClasses"
2951                                    data-panel-index="category-node-134"
2952                            >
2953                                <ul
2954                                        class="transition-transform duration-200 ease-in-out translate-x-full transform bg-container pb-4"
2955                                        :class="subMenuClasses"
2956                                        data-submenu-index="category-node-134"
2957                                        aria-label="Unterkategorien"
2958                                >
2959                                    <li>
2960                                        <button
2961                                                type="button"
2962                                                class="flex items-center px-6 py-4 cursor-pointer w-full"
2963                                                @click="backToMainCategories"
2964                                                data-back-index="category-node-134-main"
2965                                                aria-label="Zur&#xFC;ck&#x20;zu&#x20;den&#x20;Hauptkategorien"
2966                                        >
2967                                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50" class="w-8 h-8 lg:w-10 lg:h-10 rotate-180" aria-hidden="true">
2968  <g id="arrow-circle-outline_3" transform="translate(-1771 -3053)">
2969    <path id="Ellipse_855_3" data-name="Ellipse 855" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(1771 3053)" fill="#2e3831"/>
2970    <path id="Pfad_13977_3" data-name="Pfad 13977" d="M-18600.215-16056.184a1.493,1.493,0,0,1-1.061-.439,1.5,1.5,0,0,1,0-2.121l8.986-8.988-8.986-8.986a1.5,1.5,0,0,1,0-2.121,1.5,1.5,0,0,1,2.121,0l10.047,10.047a1.5,1.5,0,0,1,0,2.121l-10.047,10.049A1.493,1.493,0,0,1-18600.215-16056.184Z" transform="translate(20391.715 19145.73)" fill="#2e3831"/>
2971  </g>
2972</svg>
2973                                            <span class="ml-4 h2 font-bold text-gray">Snacks</span>
2974                                        </button>
2975                                    </li>
2976                                    <li class="border-b border-gray-200 mb-2">
2977                                        <a href="https://www.strunz.com/snacks-superfoods.html"
2978                                           title="Alle&#x20;anzeigen"
2979                                           class="flex items-center w-full px-8 py-3 cursor-pointer no-underline text-body-lg font-bold">
2980                                            <span class="ml-10">Alle anzeigen</span>
2981                                        </a>
2982                                    </li>
2983                                                                                                                                                            <li>
2984                                                <a href="https://www.strunz.com/snacks-superfoods/riegel-snacks.html"
2985                                                   title="Riegel"
2986                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2987                                                    <span class="ml-10">Riegel</span>
2988                                                </a>
2989                                            </li>
2990                                                                                                                                                                                                        <li>
2991                                                <a href="https://www.strunz.com/snacks-superfoods/nusse-fruchte.html"
2992                                                   title="Nuts&#x20;&amp;&#x20;fruits"
2993                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
2994                                                    <span class="ml-10">Nuts &amp; fruits</span>
2995                                                </a>
2996                                            </li>
2997                                                                                                                                                                                                        <li>
2998                                                <a href="https://www.strunz.com/snacks-superfoods/smart-nutrition.html"
2999                                                   title="Smart&#x20;nutrition"
3000                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
3001                                                    <span class="ml-10">Smart nutrition</span>
3002                                                </a>
3003                                            </li>
3004                                                                                                                                                                                                        <li>
3005                                                <a href="https://www.strunz.com/snacks-superfoods/kaffee-kakao.html"
3006                                                   title="Kaffee&#x20;&amp;&#x20;Kakao"
3007                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
3008                                                    <span class="ml-10">Kaffee &amp; Kakao</span>
3009                                                </a>
3010                                            </li>
3011                                                                                                                                                                                                        <li>
3012                                                <a href="https://www.strunz.com/snacks-superfoods/rezepte.html"
3013                                                   title="Rezepte"
3014                                                   class="flex items-center w-full px-8 py-1 cursor-pointer no-underline text-body-lg">
3015                                                    <span class="ml-10">Rezepte</span>
3016                                                </a>
3017                                            </li>
3018                                                                                                                                                    </ul>
3019                                                                <div class="mt-8">
3020                                    <div class="px-6 py-12 mx-4 rounded-lg" style="background-color: #a98aff">
3021                                            <div class="featured-product flex gap-4 justify-evenly">
3022                                                <div class="flex flex-col flex-shrink basis-[calc(100%-6rem)]">
3023                                                    <div class="flex flex-col gap-2 mb-2">
3024                                                                                                                    <span class="text-body-sm" style="color: #3d1568">
3025                                                            FOREVER YOUNG                                                            </span>
3026                                                                                                                <span class="h2 font-bold m-0" style="color: #3d1568">
3027                                                        Amino 11                                                        </span>
3028                                                    </div>
3029                                                    <a href="https://www.strunz.com/forever-young-amino-11-tabletten.html"
3030                                                       class="btn btn-primary hover:opacity-90 inline-block mt-auto mr-auto"
3031                                                       style="color: #a98aff; background-color: #3d1568; border-color: #a98aff">
3032                                                        Zum Produkt                                                    </a>
3033                                                </div>
3034                                                <div class="flex-shrink basis-[6rem]">
3035                                                    <img src="/media/wysiwyg/home/showcase/showcase-slider_500x850px_ amino-11.webp"
3036                                                         alt="Amino&#x20;11"
3037                                                         class="max-w-full h-auto" />
3038                                                </div>
3039                                            </div>
3040                                    </div>
3041                                </div>
3042                                                                <div class="flex justify-center items-center py-8 px-8 bg-black mt-8">
3043                                    <svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 263.797 31" class="w-60 h-8 text-white" aria-hidden="true">
3044  <g id="payment_3" transform="translate(-978.002 -9982.656)">
3045    <g id="visa-outline-large_3" transform="translate(1032.768 9983.156)">
3046      <rect id="card_bg_3" width="44" height="30" rx="4" transform="translate(0.766 0)" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/>
3047      <path id="card_bg-2_3" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
3048      <path id="visa-logo_3" d="M15.976,8.94a6.692,6.692,0,0,1-2.445-.461l.4-1.878a4.713,4.713,0,0,0,2.232.565h.059c.668-.01,1.343-.277,1.343-.854.009-.368-.306-.66-1.164-1.08s-1.962-1.105-1.962-2.358C14.443,1.182,15.987,0,18.2,0a6.023,6.023,0,0,1,2.1.386l-.392,1.883a4.238,4.238,0,0,0-1.8-.406,4.107,4.107,0,0,0-.413.02c-.649.086-.939.425-.939.723,0,.364.465.607,1.055.916.935.489,2.1,1.1,2.092,2.53l.048-.076c-.009,1.8-1.547,2.967-3.915,2.967ZM22.2,8.866H19.832L23.2.818a1.021,1.021,0,0,1,.939-.639h1.878l1.827,8.684H25.758l-.272-1.3H22.659l-.46,1.3ZM24.434,2.52,23.251,5.784H25.12ZM11.925,8.837H9.672L11.551.15H13.8L11.925,8.836ZM7,8.808H4.545L2.752,1.869a.944.944,0,0,0-.536-.756A9.312,9.312,0,0,0,0,.378L.057.126H3.879a1.05,1.05,0,0,1,1.036.882l.945,5.02L8.2.126H10.64Z" transform="translate(8.241 10.738)" fill="#2e3831"/>
3049    </g>
3050    <g id="paypal-outline-large_3" transform="translate(1141.297 9983.156)">
3051      <rect id="card_bg-2-2_3" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
3052      <path id="card_bg-2-3_3" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
3053      <g id="paypal_3" transform="translate(15.269 5.799)">
3054        <path id="Path_3" d="M11.934,4.132C11.259,7.587,8.946,8.77,6.018,8.77H5.544a.723.723,0,0,0-.713.62V9.6l-.559,3.625v.15a.732.732,0,0,1-.732.62H.441a.422.422,0,0,1-.432-.5l.243-1.58L1.6,3.339l.5.7L.666,13.357h2.9c.019,0,0,0,0-.076v-.126l.582-3.643v-.2a1.418,1.418,0,0,1,.47-.827A1.4,1.4,0,0,1,5.5,8.151h.489a8.386,8.386,0,0,0,1.871-.213A4.817,4.817,0,0,0,9.4,7.244,4.2,4.2,0,0,0,10.525,6,6.085,6.085,0,0,0,11.24,4.02a5.174,5.174,0,0,0,.093-1.751,2.451,2.451,0,0,0-.544-1.2A1.671,1.671,0,0,0,10.3.677a2.184,2.184,0,0,1,.076-.338L10.432,0a2.818,2.818,0,0,1,.827.639,3.963,3.963,0,0,1,.675,3.493Z" transform="translate(3.849 4.817)" fill="#2e3831"/>
3055        <path id="Path-2_3" data-name="Path" d="M8.489.274,8.133.179,7.738.1a9.451,9.451,0,0,0-1.5-.
30551H1.653a.677.677,0,0,0-.31.066A.713.713,0,0,0,.94.61L0,6.781v.179a.835.835,0,0,1,.827-.7H2.535c3.362,0,6-1.371,6.77-5.315L9.362.592a4.207,4.207,0,0,0-.63-.263Z" transform="translate(5.041 4.206)" fill="#2e3831"/>
3056        <path id="Path-3_3" data-name="Path" d="M14.337,4.776a3.634,3.634,0,0,0-.6-.244,3.916,3.916,0,0,0,0-1.5,2.535,2.535,0,0,0-.677-1.145c-.694-.808-2.027-1.2-3.962-1.2H3.256a.272.272,0,0,0-.126,0,.169.169,0,0,0-.057.126L.645,16.063h3.55L4.1,16.7H.5a.5.5,0,0,1-.489-.582L2.43.719A.846.846,0,0,1,3.256.006H9.1a6.048,6.048,0,0,1,4.488,1.409,3.756,3.756,0,0,1,.756,3.362Z" transform="translate(0.001 0.022)" fill="#2e3831"/>
3057      </g>
3058    </g>
3059    <g id="mastercard-outline-large_3" transform="translate(1086.898 9983.156)">
3060      <rect id="card_bg-3_3" data-name="card_bg" width="45" height="30" rx="4" transform="translate(0 0)" fill="none"/>
3061      <path id="card_bg-2-4_3" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
3062      <g id="mastercard_3" transform="translate(4.366 3.198)">
3063        <g id="Group_3" opacity="0">
3064          <rect id="Rectangle_3" width="36.34" height="24.04" fill="#2e3831"/>
3065        </g>
3066        <path id="Path-4_3" data-name="Path" d="M14.475,18.847a9.963,9.963,0,1,1,0-17.767,11.71,11.71,0,0,0-4.016,8.883,11.879,11.879,0,0,0,4.016,8.883Z" transform="translate(2.025 2.056)" fill="#2e3831"/>
3067        <path id="Shape_3" d="M.47.387H.394V0H.5L.61.272.733,0H.827V.384H.756V.093l-.1.252H.582L.47.093V.386Zm-.282,0H.126V.066H0V0H.329V.066H.188V.384Z" transform="translate(33.139 17.805)" fill="#2e3831"/>
3068        <path id="Path-5_3" data-name="Path" d="M14.462,9.968A9.955,9.955,0,0,1,.019,18.852,11.87,11.87,0,0,0,1.5,2.646,10.742,10.742,0,0,0,0,1.085,9.944,9.944,0,0,1,14.462,9.968Z" transform="translate(19.823 2.051)" fill="#2e3831"/>
3069        <path id="Path-6_3" data-name="Path" d="M3.81,15.663A9.955,9.955,0,0,1,3.81,0a9.963,9.963,0,0,1,3.8,7.831,9.963,9.963,0,0,1-3.8,7.831Z" transform="translate(14.36 4.188)" fill="#2e3831"/>
3070      </g>
3071    </g>
3072    <g id="zahlen-auf-rechnung_3" transform="translate(767.533 8562.672)">
3073      <g id="paypal-outline-large-2_3" data-name="paypal-outline-large" transform="translate(210.735 1420.484)">
3074        <rect id="card_bg-4_3" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
3075        <path id="card_bg-2-5_3" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
3076      </g>
3077      <g id="living-berlin-logo-bezahlen-auf-rechnung_3" transform="translate(225.771 1426.121)">
3078        <path id="Pfad_15183_3" data-name="Pfad 15183" d="M195.813,522.77a3.46,3.46,0,0,1,2.192.1,3.394,3.394,0,0,1,1.716,1.334.483.483,0,0,1-.81.524,2.439,2.439,0,0,0-1.239-.953,2.537,2.537,0,0,0-1.573-.048,2.819,2.819,0,0,0-1.334.858,1.669,1.669,0,0,0-.238.381h2.907a.477.477,0,1,1,0,.953H194.24v.524h3.193a.477.477,0,1,1,0,.953h-2.907c.048.048.048.143.1.191a2.342,2.342,0,0,0,1.239,1,2.547,2.547,0,0,0,1.573.1,2.506,2.506,0,0,0,1.334-.858.473.473,0,0,1,.715.62,3.178,3.178,0,0,1-1.859,1.144,3.472,3.472,0,0,1-2.192-.143,3.417,3.417,0,0,1-1.668-1.382,4.813,4.813,0,0,1-.334-.715h-.953a.477.477,0,0,1,0-.953h.715v-.524h-.667a.477.477,0,0,1,0-.953h.953a3.9,3.9,0,0,1,.572-.953A3.261,3.261,0,0,1,195.813,522.77Z" transform="translate(-188.95 -514.334)" fill="#2e3831" fill-rule="evenodd"/>
3079        <path id="Pfad_15184_3" data-name="Pfad 15184" d="M.667.667A2.269,2.269,0,0,1,2.288,0h7.2a.433.433,0,0,1,.334.143L15.25,5.528a.433.433,0,0,1,.143.334V16.68a2.278,2.278,0,0,1-2.288,2.288H2.288A2.278,2.278,0,0,1,0,16.68V2.288A2.269,2.269,0,0,1,.667.667Zm1.62.286A1.3,1.3,0,0,0,.953,2.288V16.68a1.513,1.513,0,0,0,.381.953,1.331,1.331,0,0,0,.953.381H13.106a1.513,1.513,0,0,0,.953-.381,1.331,1.331,0,0,0,.381-.953V6.1L9.293.953Z" fill="#2e3831" fill-rule="evenodd"/>
3080        <path id="Pfad_15185_3" data-name="Pfad 15185" d="M567.477,0a.45.45,0,0,1,.477.477V5.385h4.909a.477.477,0,1,1,0,.953h-5.385A.45.45,0,0,1,567,5.862V.477A.478.478,0,0,1,567.477,0Z" transform="translate(-557.993)" fill="#2e3831" fill-rule="evenodd"/>
3081      </g>
3082    </g>
3083    <g id="electronic-cash_3" transform="translate(1097.072 8562.672)">
3084      <g id="paypal-outline-large-3_3" data-name="paypal-outline-large" transform="translate(98.993 1420.484)">
3085        <rect id="card_bg-5_3" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
3086        <path id="card_bg-2-6_3" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
3087      </g>
3088      <g id="layer1_3" transform="translate(111.828 1423.77)">
3089        <g id="g4785_3" transform="translate(2.445 2.35)">
3090          <g id="g2349_3" transform="translate(0.012 0.022)">
3091            <g id="path2351_3">
3092              <path id="Pfad_15186_3" data-name="Pfad 15186" d="M81.71,79.254V70.57H74.7a1.614,1.614,0,0,0-1.6,1.681V83.612a1.616,1.616,0,0,0,1.6,1.679H81.71v-5.17H77.963v2.191h-.541a.67.67,0,0,1-.659-.683V79.254ZM76.763,74.2a.652.652,0,0,1,.65-.65h.55v2.8h-1.2Z" transform="translate(-73.1 -70.57)" fill="#2e3831" fill-rule="evenodd"/>
3093            </g>
3094          </g>
3095          <g id="g2353_3" transform="translate(0 16.83)">
3096            <g id="path2355_3">
3097              <path id="Pfad_15187_3" data-name="Pfad 15187" d="M73.763,585.559v-.292c0-.6-.051-.957-.531-.957-.336,0-.52.293-.5.808v.57c-.009.64.154.913.552.913.35,0,.489-.307.475-.794h-.342c.005.278-.035.412-.16.412-.1,0-.177-.054-.184-.342v-.317Zm-.69-.475c0-.2,0-.393.165-.393.139,0,.179.074.184.287v.193h-.349Z" transform="translate(-72.729 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3098            </g>
3099          </g>
3100          <g id="g2357_3" transform="translate(6.467 0.022)">
3101            <g id="path2359_3">
3102              <path id="Pfad_15188_3" data-name="Pfad 15188" d="M278.82,85.3h-6.875l-.079-.009-.074-.01-.081-.014-.074-.019-.07-.026-.074-.025-.07-.025a1.673,1.673,0,0,1-.911-.943l-.025-.068-.021-.08-.019-.074-.019-.074-.01-.08-.01-.074,0-.084-.005-.074V72.247a1.672,1.672,0,0,1,.466-1.155,1.59,1.59,0,0,1,.54-.377l.068-.031.07-.025.075-.019.068-.019.079-.016.075-.009.074-.01.
3102079-.005h6.826v5.774h-3.587v-2.8c-.554-.088-1.153.039-1.186.689v-.254l0,.263,0-.009v7.39l0-.01,0,.065v-.054c.035.652.631.78,1.2.687v-3l.016-.054h3.563V85.3h0Z" transform="translate(-270.4 -70.58)" fill="#2e3831" fill-rule="evenodd"/>
3103            </g>
3104          </g>
3105          <g id="g2361_3" transform="translate(10.45 16.83)">
3106            <g id="path2363_3">
3107              <path id="Pfad_15189_3" data-name="Pfad 15189" d="M393.087,585.133h-.342v-.242c-.005-.119-.049-.189-.119-.189-.132,0-.132.222-.132.485v.517c-.012.426.028.5.132.524.105-.005.11-.149.119-.323v-.2h.342v.2c0,.456-.128.7-.47.7-.3,0-.475-.233-.461-.813v-.7c-.005-.615.2-.775.461-.775.347,0,.477.317.47.64v.173Z" transform="translate(-392.156 -584.32)" fill="#2e3831"/>
3108            </g>
3109          </g>
3110          <g id="g2365_3" transform="translate(6.466)">
3111            <g id="path2367_3">
3112              <path id="Pfad_15190_3" data-name="Pfad 15190" d="M271.878,69.921c-.047.007-.093.015-.138.024h0a1.826,1.826,0,0,0-.677.289l0,0h0l0,0a1.563,1.563,0,0,0-.478.547c-.006.01-.011.02-.016.03l-.007.013,0,0-.013.027-.015.031-.009.02a1.877,1.877,0,0,0-.144.676V78.6h2.156V69.921A2.4,2.4,0,0,0,271.878,69.921Zm-1.508,9.551v3.491l.006.074,0,.084.01.074.011.081.019.073.019.074.021.081.025.068a1.758,1.758,0,0,0,.361.566,1.541,1.541,0,0,0,.114.1l.047.039.032.025.032.024.058.04.021.014.032.02.006,0,.006,0h0l.019.011.025.014.025.014.051.026,0,0c.029.014.059.027.088.04h0a1.614,1.614,0,0,0,.182.063h0a1.492,1.492,0,0,0,.2.045,1.519,1.519,0,0,0,.155.015h.575v-5.17Z" transform="translate(-270.37 -69.899)" fill="#2e3831" fill-rule="evenodd"/>
3113            </g>
3114          </g>
3115          <g id="g2369_3" transform="translate(1.297 16.165)">
3116            <g id="path2371_3">
3117              <rect id="Rechteck_4432_3" data-name="Rechteck 4432" width="0.347" height="2.9" fill="#2e3831"/>
3118            </g>
3119          </g>
3120          <g id="g2373_3" transform="translate(1.89 16.83)">
3121            <g id="path2375_3">
3122              <path id="Pfad_15191_3" data-name="Pfad 15191" d="M131.524,585.559v-.292c0-.6-.051-.957-.533-.957-.336,0-.515.293-.5.808v.57c-.005.64.154.913.55.913.352,0,.49-.307.475-.794h-.345c0,.278-.03.412-.159.412-.1,0-.174-.054-.179-.342v-.317Zm-.526-.867c.138,0,.177.074.177.287v.193h-.342v-.088C130.833,584.885,130.823,584.692,131,584.692Z" transform="translate(-130.491 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3123            </g>
3124          </g>
3125          <g id="g2377_3" transform="translate(3.118 16.83)">
3126            <g id="path2379_3">
3127              <path id="Pfad_15192_3" data-name="Pfad 15192" d="M168.979,585.133h-.342v-.242c-.005-.119-.044-.189-.117-.189-.132,0-.132.222-.132.485v.517c0,.426.031.5.132.524.1-.005.107-.149.117-.323v-.2h.342v.2c0,.456-.123.7-.466.7-.307,0-.48-.233-.466-.813v-.7c0-.615.2-.775.466-.775.349,0,.471.317.466.64v.173Z" transform="translate(-168.046 -584.32)" fill="#2e3831"/>
3128            </g>
3129          </g>
3130          <g id="g2381_3" transform="translate(4.122 16.285)">
3131            <g id="path2383_3">
3132              <path id="Pfad_15193_3" data-name="Pfad 15193" d="M199.339,570.063v.4c-.208.03-.491.061-.491-.345v-1.479h-.138v-.364h.133v-.6h.347v.6h.149v.364h-.149V570c.01.089.105.074.149.068h0Z" transform="translate(-198.71 -567.67)" fill="#2e3831"/>
3133            </g>
3134          </g>
3135          <g id="g2385_3" transform="translate(4.889 16.846)">
3136            <g id="path2387_3">
3137              <path id="Pfad_15194_3" data-name="Pfad 15194" d="M222.493,584.84v.385h.005a.811.811,0,0,1,.133-.307.253.253,0,0,1,.217-.119v.6c-.193-.03-.336.04-.342.363v1.258h-.347v-2.18h.333Z" transform="translate(-222.16 -584.8)" fill="#2e3831"/>
3138            </g>
3139          </g>
3140          <g id="g2389_3" transform="translate(5.667 16.83)">
3141            <g id="path2391_3">
3142              <path id="Pfad_15195_3" data-name="Pfad 15195" d="M246.986,585.535c0-.748-.007-1.225-.517-1.225s-.526.477-.526,1.225.075,1.081.526,1.066C246.916,586.616,246.989,586.289,246.986,585.535Zm-.344.3c0,.266-.014.385-.173.385s-.184-.119-.184-.385v-.724c0-.2,0-.417.184-.417s.173.214.173.417Z" transform="translate(-245.943 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3143            </g>
3144          </g>
3145          <g id="g2393_3" transform="translate(6.927 16.83)">
3146            <g id="path2395_3">
3147              <path id="Pfad_15196_3" data-name="Pfad 15196" d="M284.8,584.366v.222h.005c.079-.254.233-.279.312-.279.193,0,.352.163.342.55v1.686h-.342v-1.453c0-.212-.019-.35-.149-.363s-.173.175-.168.4v1.412h-.342v-2.18h.342Z" transform="translate(-284.46 -584.31)" fill="#2e3831"/>
3148            </g>
3149          </g>
3150          <g id="path2397_3" transform="translate(8.196 16.165)">
3151            <path id="Pfad_15197_3" data-name="Pfad 15197" d="M323.24,564.728v2.182h.347v-2.182Zm0-.718v.456h.347v-.456Z" transform="translate(-323.24 -564.01)" fill="#2e3831" fill-rule="evenodd"/>
3152          </g>
3153          <g id="g2399_3" transform="translate(8.779 16.83)">
3154            <g id="path2401_3">
3155              <path id="Pfad_15198_3" data-name="Pfad 15198" d="M341.995,585.133h-.345v-.242c-.007-.119-.045-.189-.116-.189-.133,0-.133.222-.13.485v.517c-.009.426.026.5.13.524.105-.005.105-.149.116-.323v-.2h.345v.2c0,.456-.13.7-.471.7-.3,0-.48-.233-.466-.813v-.7c0-.615.205-.775.466-.775.347,0,.471.317.471.64v.173Z" transform="translate(-341.056 -584.32)" fill="#2e3831"/>
3156            </g>
3157          </g>
3158          <g id="g2403_3" transform="translate(11.522 16.83)">
3159            <g id="path2405_3">
3160              <path id="Pfad_15199_3" data-name="Pfad 15199" d="M425.935,586.243v-1.29c0-.291-.025-.643-.5-.643-.431,0-.521.288-.521.7h.328c0-.2.026-.317.184-.317.089,0,.144.016.158.114a.314.314,0,0,1-.168.363.779.779,0,0,0-.51.778c0,.456.119.654.4.654.119,0,.224-.1.308-.277a.834.834,0,0,0,.019.222h.326A1.668,1.668,0,0,1,425.935,586.243Zm-.347-.613c-.005.212.026.589-.173.589-.123,0-.163-.114-.163-.282a.492.492,0,0,1,.055-.263c.095-.1.2-.193.282-.277Z" transform="translate(-424.91 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3161            </g>
3162          </g>
3163          <g id="g2407_3" transform="translate(12.717 16.83)">
3164            <g id="path2409_3">
3165              <path id="Pfad_15200_3" data-name="Pfad 15200" d="M461.451,585.837h.342c-.025.4.084.391.159.391.1,0,.168-.109.144-.247a.392.392,0,0,0-.168-.257l-.184-.189a.907.907,0,0,1-.287-.689.47.47,0,0,1,.51-.526c.326,0,.492.252.482.718h-.344c.007-.242-.039-.336-.161-.336-.08,0-.146.054-.146.179a.331.331,0,0,0,.13.252l.287.277a.823.823,0,0,1,.228.428c.035.382-.03.773-.512.773-.177,0-.519-.109-.48-.773h0Z" transform="translate(-461.448 -584.32)" fill="#2e3831"/>
3166            </g>
3167          </g>
3168          <g id="g2411_3" transform="translate(13.897 16.165)">
3169            <g id="path2413_3">
3170              <path id="Pfad_15201_3" data-name="Pfad 15201" d="M497.837,566.91h-.347v-2.9h.347v.943h0c.095-.258.238-.279.309-.279.2,0,.358.163.347.55v1.686h-.347v-1.493c0-.212-.014-.35-.144-.361s-.173.168-.168.407v1.447h0Z" transform="translate(-497.49 -564.01)" fill="#2e3831"/>
3171            </g>
3172          </g>
3173        </g>
3174      </g>
3175    </g>
3176  </g>
3177</svg>
3178                                </div>
3179                            </div>
3180                                            </li>
3181                                                        <li data-child-id="category-node-177-main" class="level-0">
3182                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
3183
3184                            <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
3185                                                            href="https://www.strunz.com/zubehoer.html"
3186                                                        title="Zubeh&#xF6;r"
3187                            >
3188                            Zubehör                            </a>
3189                        </div>
3190                                            </li>
3191                                                                            <li data-child-id="category-node-36-main" class="level-0">
3192                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
3193
3194                            <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
3195                                                            href="https://www.strunz.com/neu.html"
3196                                                        title="Neu"
3197                            >
3198                            Neu                            </a>
3199                        </div>
3200                                            </li>
3201                
3202                <li class="level-0">
3203                    <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
3204                        <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
3205                           href="/news"
3206                           title="News">
3207                            News                        </a>
3208                    </div>
3209                </li>
3210                <li class="level-0">
3211                    <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
3212                        <a class="flex items-center cursor-pointer level-0 h2 font-bold no-underline bg-container-lighter w-full"
3213                           href="/seminare"
3214                           title="Seminare">
3215                            Seminare                        </a>
3216                    </div>
3217                </li>
3218                <li class="level-0">
3219                    <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
3220                        <a class="flex items-center cursor-pointer level-0 h3 no-underline bg-container-lighter w-full py-1"
3221                           href="/forum"
3222                           title="Forum">
3223                            Forum                        </a>
3224                    </div>
3225                </li>
3226
3227                                    <li data-child-id="category-node-156-main" class="level-0">
3228                        <div class="flex items-center transition-transform duration-150 ease-in-out transform" :class="mainItemClasses">
3229
3230                            <a
3231                                class="flex items-center cursor-pointer level-0 btn btn-secondary mt-2"
3232                                                            href="https://www.strunz.com/angebote.html"
3233                                                        title="Angebote"
3234                            >
3235                            Angebote                            </a>
3236                        </div>
3237                                            </li>
3238                            </ul>
3239            <div class="mt-6 space-y-2">
3240                <div>
3241                    <a href="/newsletter" class="text-md no-underline">Newsletter</a>
3242                </div>
3243                <div>
3244                                            <a class="text-md no-underline"
3245                           href="https://www.strunz.com/customer/account/create/"
3246                           title="Ein&#x20;Konto&#x20;erstellen">
3247                            Ein Konto erstellen                        </a>
3248                                        <span>/</span>
3249                    <a class="text-md no-underline"
3250                       @click="handleSignInClick"
3251                       href="https://www.strunz.com/customer/account/index/"
3252                       title="Anmelden">
3253                        Anmelden                    </a>
3254                </div>
3255            </div>
3256        </div>
3257        <div class="flex justify-center items-center py-8 px-8 bg-black mt-8">
3258            <svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 263.797 31" class="w-60 h-8 text-white" aria-hidden="true">
3259  <g id="payment_4" transform="translate(-978.002 -9982.656)">
3260    <g id="visa-outline-large_4" transform="translate(1032.768 9983.156)">
3261      <rect id="card_bg_4" width="44" height="30" rx="4" transform="translate(0.766 0)" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/>
3262      <path id="card_bg-2_4" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
3263      <path id="visa-logo_4" d="M15.976,8.94a6.692,6.692,0,0,1-2.445-.461l.4-1.878a4.713,4.713,0,0,0,2.232.565h.059c.668-.01,1.343-.277,1.343-.854.009-.368-.306-.66-1.164-1.08s-1.962-1.105-1.962-2.358C14.443,1.182,15.987,0,18.2,0a6.023,6.023,0,0,1,2.1.386l-.392,1.883a4.238,4.238,0,0,0-1.8-.406,4.107,4.107,0,0,0-.413.02c-.649.086-.939.425-.939.723,0,.364.465.607,1.055.916.935.489,2.1,1.1,2.092,2.53l.048-.076c-.009,1.8-1.547,2.967-3.915,2.967ZM22.2,8.866H19.832L23.2.818a1.021,1.021,0,0,1,.939-.639h1.878l1.827,8.684H25.758l-.272-1.3H22.659l-.46,1.3ZM24.434,2.52,23.251,5.784H25.12ZM11.925,8.837H9.672L11.551.15H13.8L11.925,8.836ZM7,8.808H4.545L2.752,1.869a.944.944,0,0,0-.536-.756A9.312,9.312,0,0,0,0,.378L.057.126H3.879a1.05,1.05,0,0,1,1.036.882l.945,5.02L8.2.126H10.64Z" transform="translate(8.241 10.738)" fill="#2e3831"/>
3264    </g>
3265    <g id="paypal-outline-large_4" transform="translate(1141.297 9983.156)">
3266      <rect id="card_bg-2-2_4" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
3267      <path id="card_bg-2-3_4" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
3268      <g id="paypal_4" transform="translate(15.269 5.799)">
3269        <path id="Path_4" d="M11.934,4.132C11.259,7.587,8.946,8.77,6.018,8.77H5.544a.723.723,0,0,0-.713.62V9.6l-.559,3.625v.15a.732.732,0,0,1-.732.62H.441a.422.422,0,0,1-.432-.5l.243-1.58L1.6,3.339l.5.7L.666,13.357h2.9c.019,0,0,0,0-.076v-.126l.582-3.643v-.2a1.418,1.418,0,0,1,.47-.827A1.4,1.4,0,0,1,5.5,8.151h.489a8.386,8.386,0,0,0,1.871-.213A4.817,4.817,0,0,0,9.4,7.244,4.2,4.2,0,0,0,10.525,6,6.085,6.085,0,0,0,11.24,4.02a5.174,5.174,0,0,0,.093-1.751,2.451,2.451,0,0,0-.544-1.2A1.671,1.671,0,0,0,10.3.677a2.184,2.184,0,0,1,.076-.338L10.432,0a2.818,2.818,0,0,1,.827.639,3.963,3.963,0,0,1,.675,3.493Z" transform="translate(3.849 4.817)" fill="#2e3831"/>
3270        <path id="Path-2_4" data-name="Path" d="M8.489.274,8.133.179,7.738.1a9.451,9.451,0,0,0-1.5-.1H1.653a.677.677,0,0,0-.31.066A.713.713,0,0,0,.94.61L0,6.781v.179a.835.835,0,0,1,.827-.7H2.535c3.362,0,6-1.371,6.77-5.315L9.362.592a4.207,4.207,0,0,0-.63-.263Z" transform="translate(5.041 4.206)" fill="#2e3831"/>
3271        <path id="Path-3_4" data-name="Path" d="M14.337,4.776a3.634,3.634,0,0,0-.6-.244,3.916,3.916,0,0,0,0-1.5,2.535,2.535,0,0,0-.677-1.145c-.694-.808-2.027-1.2-3.962-1.2H3.256a.272.272,0,0,0-.126,0,.169.169,0,0,0-.057.126L.645,16.063h3.55L4.1,16.7H.5a.5.5,0,0,1-.489-.582L2.43.719A.846.846,0,0,1,3.256.006H9.1a6.048,6.048,0,0,1,4.488,1.409,3.756,3.756,0,0,1,.756,3.362Z" transform="translate(0.001 0.022)" fill="#2e3831"/>
3272      </g>
3273    </g>
3274    <g id="mastercard-outline-large_4" transform="translate(1086.898 9983.156)">
3275      <rect id="card_bg-3_4" data-name="card_bg" width="45" height="30" rx="4" transform="translate(0 0)" fill="none"/>
3276      <path id="card_bg-2-4_4" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
3277      <g id="mastercard_4" transform="translate(4.366 3.198)">
3278        <g id="Group_4" opacity="0">
3279          <rect id="Rectangle_4" width="36.34" height="24.04" fill="#2e3831"/>
3280        </g>
3281        <path id="Path-4_4" data-name="Path" d="M14.475,18.847a9.963,9.963,0,1,1,0-17.767,11.71,11.71,0,0,0-4.016,8.883,11.879,11.879,0,0,0,4.016,8.883Z" transform="translate(2.025 2.056)" fill="#2e3831"/>
3282        <path id="Shape_4" d="M.47.387H.394V0H.5L.61.272.733,0H.827V.384H.756V.093l-.1.252H.582L.47.093V.386Zm-.282,0H.126V.066H0V0H.329V.066H.188V.384Z" transform="translate(33.139 17.805)" fill="#2e3831"/>
3283        <path id="Path-5_4" data-name="Path" d="M14.462,9.968A9.955,9.955,0,0,1,.019,18.852,11.87,11.87,0,0,0,1.5,2.646,10.742,10.742,0,0,0,0,1.085,9.944,9.944,0,0,1,14.462,9.968Z" transform="translate(19.823 2.051)" fill="#2e3831"/>
3284        <path id="Path-6_4" data-name="Path" d="M3.81,15.663A9.955,9.955,0,0,1,3.81,0a9.963,9.963,0,0,1,3.8,7.831,9.963,9.963,0,0,1-3.8,7.831Z" transform="translate(14.36 4.188)" fill="#2e3831"/>
3285      </g>
3286    </g>
3287    <g id="zahlen-auf-rechnung_4" transform="translate(767.533 8562.672)">
3288      <g id="paypal-outline-large-2_4" data-name="paypal-outline-large" transform="translate(210.735 1420.484)">
3289        <rect id="card_bg-4_4" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
3290        <path id="card_bg-2-5_4" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
3291      </g>
3292      <g id="living-berlin-logo-bezahlen-auf-rechnung_4" transform="translate(225.771 1426.121)">
3293        <path id="Pfad_15183_4" data-name="Pfad 15183" d="M195.813,522.77a3.46,3.46,0,0,1,2.192.1,3.394,3.394,0,0,1,1.716,1.334.483.483,0,0,1-.81.524,2.439,2.439,0,0,0-1.239-.953,2.537,2.537,0,0,0-1.573-.048,2.819,2.819,0,0,0-1.334.858,1.669,1.669,0,0,0-.238.381h2.907a.477.477,0,1,1,0,.953H194.24v.524h3.193a.477.477,0,1,1,0,.953h-2.907c.048.048.048.143.1.191a2.342,2.342,0,0,0,1.239,1,2.547,2.547,0,0,0,1.573.1,2.506,2.506,0,0,0,1.334-.858.473.473,0,0,1,.715.62,3.178,3.178,0,0,1-1.859,1.144,3.472,3.472,0,0,1-2.192-.143,3.417,3.417,0,0,1-1.668-1.382,4.813,4.813,0,0,1-.334-.715h-.953a.477.477,0,0,1,0-.953h.715v-.524h-.667a.477.477,0,0,1,0-.953h.953a3.9,3.9,0,0,1,.572-.953A3.261,3.261,0,0,1,195.813,522.77Z" transform="translate(-188.95 -514.334)" fill="#2e3831" fill-rule="evenodd"/>
3294        <path id="Pfad_15184_4" data-name="Pfad 15184" d="M.667.667A2.269,2.269,0,0,1,2.288,0h7.2a.433.433,0,0,1,.334.143L15.25,5.528a.433.433,0,0,1,.143.334V16.68a2.278,2.278,0,0,1-2.288,2.288H2.288A2.278,2.278,0,0,1,0,16.68V2.288A2.269,2.269,0,0,1,.667.667Zm1.62.286A1.3,1.3,0,0,0,.953,2.288V16.68a1.513,1.513,0,0,0,.381.953,1.331,1.331,0,0,0,.953.381H13.106a1.513,1.513,0,0,0,.953-.381,1.331,1.331,0,0,0,.381-.953V6.1L9.293.953Z" fill="#2e3831" fill-rule="evenodd"/>
3295        <path id="Pfad_15185_4" data-name="Pfad 15185" d="M567.477,0a.45.45,0,0,1,.477.477V5.385h4.909a.477.477,0,1,1,0,.953h-5.385A.45.45,0,0,1,567,5.862V.477A.478.478,0,0,1,567.477,0Z" transform="translate(-557.993)" fill="#2e3831" fill-rule="evenodd"/>
3296      </g>
3297    </g>
3298    <g id="electronic-cash_4" transform="translate(1097.072 8562.672)">
3299      <g id="paypal-outline-large-3_4" data-name="paypal-outline-large" transform="translate(98.993 1420.484)">
3300        <rect id="card_bg-5_4" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
3301        <path id="card_bg-2-6_4" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
3302      </g>
3303      <g id="layer1_4" transform="translate(111.828 1423.77)">
3304        <g id="g4785_4" transform="translate(2.445 2.35)">
3305          <g id="g2349_4" transform="translate(0.012 0.022)">
3306            <g id="path2351_4">
3307              <path id="Pfad_15186_4" data-name="Pfad 15186" d="M81.71,79.254V70.57H74.7a1.614,1.614,0,0,0-1.6,1.681V83.612a1.616,1.616,0,0,0,1.6,1.679H81.71v-5.17H77.963v2.191h-.541a.67.67,0,0,1-.659-.683V79.254ZM76.763,74.2a.652.652,0,0,1,.65-.65h.55v2.8h-1.2Z" transform="translate(-73.1 -70.57)" fill="#2e3831" fill-rule="evenodd"/>
3308            </g>
3309          </g>
3310          <g id="g2353_4" transform="translate(0 16.83)">
3311            <g id="path2355_4">
3312              <path id="Pfad_15187_4" data-name="Pfad 15187" d="M73.763,585.559v-.292c0-.6-.051-.957-.531-.957-.336,0-.52.293-.5.808v.57c-.009.64.154.913.552.913.35,0,.489-.307.475-.794h-.342c.005.278-.035.412-.16.412-.1,0-.177-.054-.184-.342v-.317Zm-.69-.475c0-.2,0-.393.165-.393.139,0,.179.074.184.287v.193h-.349Z" transform="translate(-72.729 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3313            </g>
3314          </g>
3315          <g id="g2357_4" transform="translate(6.467 0.022)">
3316            <g id="path2359_4">
3317              <path id="Pfad_15188_4" data-name="Pfad 15188" d="M278.82,85.3h-6.875l-.079-.009-.074-.01-.081-.014-.074-.019-.07-.026-.074-.025-.07-.025a1.673,1.673,0,0,1-.911-.943l-.025-.068-.021-.08-.019-.074-.019-.074-.01-.08-.01-.074,0-.084-.005-.074V72.247a1.672,1.672,0,0,1,.466-1.155,1.59,1.59,0,0,1,.54-.377l.068-.031.07-.025.075-.019.068-.019.079-.016.075-.009.074-.01.
3317079-.005h6.826v5.774h-3.587v-2.8c-.554-.088-1.153.039-1.186.689v-.254l0,.263,0-.009v7.39l0-.01,0,.065v-.054c.035.652.631.78,1.2.687v-3l.016-.054h3.563V85.3h0Z" transform="translate(-270.4 -70.58)" fill="#2e3831" fill-rule="evenodd"/>
3318            </g>
3319          </g>
3320          <g id="g2361_4" transform="translate(10.45 16.83)">
3321            <g id="path2363_4">
3322              <path id="Pfad_15189_4" data-name="Pfad 15189" d="M393.087,585.133h-.342v-.242c-.005-.119-.049-.189-.119-.189-.132,0-.132.222-.132.485v.517c-.012.426.028.5.132.524.105-.005.11-.149.119-.323v-.2h.342v.2c0,.456-.128.7-.47.7-.3,0-.475-.233-.461-.813v-.7c-.005-.615.2-.775.461-.775.347,0,.477.317.47.64v.173Z" transform="translate(-392.156 -584.32)" fill="#2e3831"/>
3323            </g>
3324          </g>
3325          <g id="g2365_4" transform="translate(6.466)">
3326            <g id="path2367_4">
3327              <path id="Pfad_15190_4" data-name="Pfad 15190" d="M271.878,69.921c-.047.007-.093.015-.138.024h0a1.826,1.826,0,0,0-.677.289l0,0h0l0,0a1.563,1.563,0,0,0-.478.547c-.006.01-.011.02-.016.03l-.007.013,0,0-.013.027-.015.031-.009.02a1.877,1.877,0,0,0-.144.676V78.6h2.156V69.921A2.4,2.4,0,0,0,271.878,69.921Zm-1.508,9.551v3.491l.006.074,0,.084.01.074.011.081.019.073.019.074.021.081.025.068a1.758,1.758,0,0,0,.361.566,1.541,1.541,0,0,0,.114.1l.047.039.032.025.032.024.058.04.021.014.032.02.006,0,.006,0h0l.019.011.025.014.025.014.051.026,0,0c.029.014.059.027.088.04h0a1.614,1.614,0,0,0,.182.063h0a1.492,1.492,0,0,0,.2.045,1.519,1.519,0,0,0,.155.015h.575v-5.17Z" transform="translate(-270.37 -69.899)" fill="#2e3831" fill-rule="evenodd"/>
3328            </g>
3329          </g>
3330          <g id="g2369_4" transform="translate(1.297 16.165)">
3331            <g id="path2371_4">
3332              <rect id="Rechteck_4432_4" data-name="Rechteck 4432" width="0.347" height="2.9" fill="#2e3831"/>
3333            </g>
3334          </g>
3335          <g id="g2373_4" transform="translate(1.89 16.83)">
3336            <g id="path2375_4">
3337              <path id="Pfad_15191_4" data-name="Pfad 15191" d="M131.524,585.559v-.292c0-.6-.051-.957-.533-.957-.336,0-.515.293-.5.808v.57c-.005.64.154.913.55.913.352,0,.49-.307.475-.794h-.345c0,.278-.03.412-.159.412-.1,0-.174-.054-.179-.342v-.317Zm-.526-.867c.138,0,.177.074.177.287v.193h-.342v-.088C130.833,584.885,130.823,584.692,131,584.692Z" transform="translate(-130.491 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3338            </g>
3339          </g>
3340          <g id="g2377_4" transform="translate(3.118 16.83)">
3341            <g id="path2379_4">
3342              <path id="Pfad_15192_4" data-name="Pfad 15192" d="M168.979,585.133h-.342v-.242c-.005-.119-.044-.189-.117-.189-.132,0-.132.222-.132.485v.517c0,.426.031.5.132.524.1-.005.107-.149.117-.323v-.2h.342v.2c0,.456-.123.7-.466.7-.307,0-.48-.233-.466-.813v-.7c0-.615.2-.775.466-.775.349,0,.471.317.466.64v.173Z" transform="translate(-168.046 -584.32)" fill="#2e3831"/>
3343            </g>
3344          </g>
3345          <g id="g2381_4" transform="translate(4.122 16.285)">
3346            <g id="path2383_4">
3347              <path id="Pfad_15193_4" data-name="Pfad 15193" d="M199.339,570.063v.4c-.208.03-.491.061-.491-.345v-1.479h-.138v-.364h.133v-.6h.347v.6h.149v.364h-.149V570c.01.089.105.074.149.068h0Z" transform="translate(-198.71 -567.67)" fill="#2e3831"/>
3348            </g>
3349          </g>
3350          <g id="g2385_4" transform="translate(4.889 16.846)">
3351            <g id="path2387_4">
3352              <path id="Pfad_15194_4" data-name="Pfad 15194" d="M222.493,584.84v.385h.005a.811.811,0,0,1,.133-.307.253.253,0,0,1,.217-.119v.6c-.193-.03-.336.04-.342.363v1.258h-.347v-2.18h.333Z" transform="translate(-222.16 -584.8)" fill="#2e3831"/>
3353            </g>
3354          </g>
3355          <g id="g2389_4" transform="translate(5.667 16.83)">
3356            <g id="path2391_4">
3357              <path id="Pfad_15195_4" data-name="Pfad 15195" d="M246.986,585.535c0-.748-.007-1.225-.517-1.225s-.526.477-.526,1.225.075,1.081.526,1.066C246.916,586.616,246.989,586.289,246.986,585.535Zm-.344.3c0,.266-.014.385-.173.385s-.184-.119-.184-.385v-.724c0-.2,0-.417.184-.417s.173.214.173.417Z" transform="translate(-245.943 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3358            </g>
3359          </g>
3360          <g id="g2393_4" transform="translate(6.927 16.83)">
3361            <g id="path2395_4">
3362              <path id="Pfad_15196_4" data-name="Pfad 15196" d="M284.8,584.366v.222h.005c.079-.254.233-.279.312-.279.193,0,.352.163.342.55v1.686h-.342v-1.453c0-.212-.019-.35-.149-.363s-.173.175-.168.4v1.412h-.342v-2.18h.342Z" transform="translate(-284.46 -584.31)" fill="#2e3831"/>
3363            </g>
3364          </g>
3365          <g id="path2397_4" transform="translate(8.196 16.165)">
3366            <path id="Pfad_15197_4" data-name="Pfad 15197" d="M323.24,564.728v2.182h.347v-2.182Zm0-.718v.456h.347v-.456Z" transform="translate(-323.24 -564.01)" fill="#2e3831" fill-rule="evenodd"/>
3367          </g>
3368          <g id="g2399_4" transform="translate(8.779 16.83)">
3369            <g id="path2401_4">
3370              <path id="Pfad_15198_4" data-name="Pfad 15198" d="M341.995,585.133h-.345v-.242c-.007-.119-.045-.189-.116-.189-.133,0-.133.222-.13.485v.517c-.009.426.026.5.13.524.105-.005.105-.149.116-.323v-.2h.345v.2c0,.456-.13.7-.471.7-.3,0-.48-.233-.466-.813v-.7c0-.615.205-.775.466-.775.347,0,.471.317.471.64v.173Z" transform="translate(-341.056 -584.32)" fill="#2e3831"/>
3371            </g>
3372          </g>
3373          <g id="g2403_4" transform="translate(11.522 16.83)">
3374            <g id="path2405_4">
3375              <path id="Pfad_15199_4" data-name="Pfad 15199" d="M425.935,586.243v-1.29c0-.291-.025-.643-.5-.643-.431,0-.521.288-.521.7h.328c0-.2.026-.317.184-.317.089,0,.144.016.158.114a.314.314,0,0,1-.168.363.779.779,0,0,0-.51.778c0,.456.119.654.4.654.119,0,.224-.1.308-.277a.834.834,0,0,0,.019.222h.326A1.668,1.668,0,0,1,425.935,586.243Zm-.347-.613c-.005.212.026.589-.173.589-.123,0-.163-.114-.163-.282a.492.492,0,0,1,.055-.263c.095-.1.2-.193.282-.277Z" transform="translate(-424.91 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
3376            </g>
3377          </g>
3378          <g id="g2407_4" transform="translate(12.717 16.83)">
3379            <g id="path2409_4">
3380              <path id="Pfad_15200_4" data-name="Pfad 15200" d="M461.451,585.837h.342c-.025.4.084.391.159.391.1,0,.168-.109.144-.247a.392.392,0,0,0-.168-.257l-.184-.189a.907.907,0,0,1-.287-.689.47.47,0,0,1,.51-.526c.326,0,.492.252.482.718h-.344c.007-.242-.039-.336-.161-.336-.08,0-.146.054-.146.179a.331.331,0,0,0,.13.252l.287.277a.823.823,0,0,1,.228.428c.035.382-.03.773-.512.773-.177,0-.519-.109-.48-.773h0Z" transform="translate(-461.448 -584.32)" fill="#2e3831"/>
3381            </g>
3382          </g>
3383          <g id="g2411_4" transform="translate(13.897 16.165)">
3384            <g id="path2413_4">
3385              <path id="Pfad_15201_4" data-name="Pfad 15201" d="M497.837,566.91h-.347v-2.9h.347v.943h0c.095-.258.238-.279.309-.279.2,0,.358.163.347.55v1.686h-.347v-1.493c0-.212-.014-.35-.144-.361s-.173.168-.168.407v1.447h0Z" transform="translate(-497.49 -564.01)" fill="#2e3831"/>
3386            </g>
3387          </g>
3388        </g>
3389      </g>
3390    </g>
3391  </g>
3392</svg>
3393        </div>
3394    </div>
3395</nav>
3396<script>
3397    'use strict';
3398
3399    function initMenuMobile_6abf1e73388a1() {
3400        return {
3401            mobilePanelActiveId: null,
3402            open: false,
3403            headerHeight: 0,
3404
3405            init() {
3406                this.calculateHeaderHeight();
3407                window.addEventListener('resize', () => this.calculateHeaderHeight());
3408            },
3409
3410            calculateHeaderHeight() {
3411                const header = document.querySelector('header.page-header');
3412                if (header) {
3413                    this.headerHeight = Math.floor(header.getBoundingClientRect().height);
3414                }
3415            },
3416
3417            iconMenuClasses() {
3418                return { 'hidden': this.open, 'block': !this.open };
3419            },
3420
3421            iconCloseClasses() {
3422                return { 'hidden': !this.open, 'block': this.open };
3423            },
3424
3425            mobileMenuClasses() {
3426                return { 'flex': this.open, 'hidden': !this.open };
3427            },
3428
3429            ariaHidden() {
3430                return this.open ? 'false' : 'true';
3431            },
3432
3433            mobileMenuStyle() {
3434                return 'top: ' + this.headerHeight + 'px; height: calc(100vh - ' + this.headerHeight + 'px)';
3435            },
3436
3437            mainItemClasses() {
3438                return {
3439                    '-translate-x-full': this.mobilePanelActiveId,
3440                    'translate-x-0': !this.mobilePanelActiveId
3441                };
3442            },
3443
3444            subPanelClasses() {
3445                const index = this.$el.dataset.panelIndex;
3446                return { 'hidden': this.mobilePanelActiveId !== index };
3447            },
3448
3449            subMenuClasses() {
3450                const index = this.$el.dataset.submenuIndex;
3451                return {
3452                    'translate-x-full': this.mobilePanelActiveId !== index,
3453                    'translate-x-0': this.mobilePanelActiveId === index
3454                };
3455            },
3456
3457            getAriaExpanded() {
3458                const index = this.$el.dataset.expandedIndex;
3459                return this.mobilePanelActiveId === index ? 'true' : 'false';
3460            },
3461
3462            setActiveMenu() {
3463                Array.from(this.$root.querySelectorAll('a')).filter(link => {
3464                    return link.href === window.location.href.split('?')[0];
3465                }).map(item => {
3466                    item.classList.add('underline');
3467                    item.closest('li.level-0') &&
3468                    item.closest('li.level-0').querySelector('a.level-0').classList.add('underline');
3469                });
3470            },
3471
3472            toggleMenu() {
3473                if (!this.open) {
3474                    this.calculateHeaderHeight();
3475                    this.open = true;
3476                    this.$nextTick(() => hyva.trapFocus(this.$refs['mobileMenuNavLinks']));
3477                    document.querySelector('body').style.overflow = 'hidden';
3478                } else {
3479                    this.closeMenu();
3480                }
3481            },
3482
3483            closeMenu() {
3484                document.querySelector('body').style.overflow = '';
3485                if (this.open) {
3486                    this.$nextTick(() => this.$refs['mobileMenuTrigger'].focus() || hyva.releaseFocus());
3487                }
3488                this.open = false;
3489                this.mobilePanelActiveId = null;
3490            },
3491
3492            openSubcategory() {
3493                const index = this.$el.dataset.index;
3494                const menuNodeRef = document.querySelector('[data-child-id=' + index + ']');
3495                this.mobilePanelActiveId = this.mobilePanelActiveId === index ? 0 : index;
3496                this.$nextTick(() => hyva.trapFocus(menuNodeRef));
3497            },
3498
3499            backToMainCategories() {
3500                const index = this.$el.dataset.backIndex;
3501                const menuNodeRef = document.querySelector('[data-child-id=' + index + ']');
3502                this.mobilePanelActiveId = 0;
3503                this.$nextTick(() => {
3504                    hyva.trapFocus(this.$refs['mobileMenuNavLinks']);
3505                    menuNodeRef.querySelector('a').focus();
3506                });
3507            },
3508
3509            handleSignInClick() {
3510                const redirectUrl = this.$root.dataset.loginRedirectUrl;
3511                if (hyva.setCookie && redirectUrl) {
3512                    hyva.setCookie(redirectUrl, window.location.href, 1);
3513                }
3514            }
3515        }
3516    }
3517
3518    window.addEventListener(
3519        'alpine:init',
3520        () => Alpine.data('initMenuMobile_6abf1e73388a1', initMenuMobile_6abf1e73388a1),
3521        {once: true}
3522    );
3523</script>
3523
3524
3525<nav
3526        x-data="initMenuDesktop_6abf1e734d3e1()"
3527        @load.window="setActiveMenu($root)"
3528        @keydown.window.escape="closeMenu()"
3529        class="z-20 hidden lg:flex navigation"
3530        aria-label="Seitennavigation"
3531        role="navigation"
3532>
3533    <!-- desktop -->
3534    <button
3535            x-ref="desktopMenuTrigger"
3536            @click="toggleMenu()"
3537            type="button"
3538            aria-label="Men&#xFC;&#x20;&#xF6;ffnen"
3539            aria-haspopup="menu"
3540    >
3541        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" class="icon-size hover:text-gray" x-show="!open" aria-hidden="true">
3542  <g id="menu-icon_2" transform="translate(-50 -104)">
3543    <path id="Ellipse_854_3" data-name="Ellipse 854" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(50 104)" fill="#2e3831"/>
3544    <path id="Linie_412_3" data-name="Linie 412" d="M18,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H18A1.5,1.5,0,0,1,19.5,0,1.5,1.5,0,0,1,18,1.5Z" transform="translate(66 120)" fill="#2e3831"/>
3545    <path id="Linie_413_3" data-name="Linie 413" d="M18,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H18A1.5,1.5,0,0,1,19.5,0,1.5,1.5,0,0,1,18,1.5Z" transform="translate(66 129)" fill="#2e3831"/>
3546    <path id="Linie_414_2" data-name="Linie 414" d="M18,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H18A1.5,1.5,0,0,1,19.5,0,1.5,1.5,0,0,1,18,1.5Z" transform="translate(66 138)" fill="#2e3831"/>
3547  </g>
3548</svg>
3549
3550        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" class="icon-size hover:text-gray" x-show="open" x-cloak="true" aria-hidden="true">
3551  <g id="menu-icon-close_2" transform="translate(-50 -104)">
3552    <path id="Ellipse_854_4" data-name="Ellipse 854" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(50 104)" fill="#2e3831"/>
3553    <path id="Linie_412_4" data-name="Linie 412" d="M24.671,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H24.672a1.5,1.5,0,0,1,1.5,1.5A1.5,1.5,0,0,1,24.671,1.5Z" transform="translate(66.277 137.722) rotate(-45)" fill="#2e3831"/>
3554    <path id="Linie_413_4" data-name="Linie 413" d="M0,1.5A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H24.671a1.5,1.5,0,0,1,1.5,1.5,1.5,1.5,0,0,1-1.5,1.5Z" transform="translate(66.278 120.276) rotate(45)" fill="#2e3831"/>
3555  </g>
3556</svg>
3557
3558    </button>
3559    <div
3560            x-ref="desktopMenuNavLinks"
3561            class="absolute left-0 top-full w-full bg-container shadow-3xl rounded-bl-xl rounded-br-xl overflow-x-hidden overflow-y-auto origin-top"
3562            style="max-height: calc(100vh - var(--page-header-height))"
3563            x-show="open"
3564            x-cloak
3565            @click.away="closeMenu()"
3566            x-transition:enter="transition-all duration-300 ease-out"
3567            x-transition:enter-start="transform scale-y-0 opacity-0"
3568            x-transition:enter-end="transform scale-y-100 opacity-100"
3569            :aria-hidden="open ? 'false' : 'true'"
3570            role="dialog"
3571            aria-modal="true"
3572    >
3573        <div class="flex">
3574            <div class="flex px-8 py-12 gap-x-8 w-3/4"
3575                 x-data="{
3576                     activeCategory: null,
3577                     setMaxHeight() {
3578                        if (open) {
3579                            const parentCategories = this.$refs.parentCategories;
3580                            const subCategories = this.$refs.subCategories;
3581                            if (parentCategories && subCategories) {
3582                                const height = parentCategories.offsetHeight + 'px';
3583                                subCategories.style.maxHeight = height;
3584                                subCategories.querySelectorAll(':scope > li').forEach(li => {
3585                                    li.style.maxHeight = height;
3586                                    const ul = li.querySelector('ul');
3587                                    if (ul) {
3588                                        ul.style.height = height;
3589                                    }
3590                                });
3591                            }
3592                        }
3593                     }
3594                 }"
3595                 @menu-opened.window="$nextTick(() => setMaxHeight())"
3596                 @resize.window.debounce="$nextTick(() => setMaxHeight())"
3597            >
3598                
3599                <ul class="flex flex-col gap-y-2 shrink-0"
3600                    aria-label="Seitennavigationslinks"
3601                    x-ref="parentCategories"
3602                >
3603                                                                    <li data-child-id="category-node-3-main"
3604                            class="level-0"
3605                        >
3606                            <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3607                               href="https://www.strunz.com/eiweisspulver.html"
3608                               title="Eiwei&#x1E9E;"
3609                               @mouseenter="activeCategory = 'category-node-3'"
3610                            >
3611                                Eiweiẞ                            </a>
3612                        </li>
3613                                                                    <li data-child-id="category-node-14-main"
3614                            class="level-0"
3615                        >
3616                            <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3617                               href="https://www.strunz.com/nahrungsergaenzung.html"
3618                               title="Nahrungserg&#xE4;nzung"
3619                               @mouseenter="activeCategory = 'category-node-14'"
3620                            >
3621                                Nahrungsergänzung                            </a>
3622                        </li>
3623                                                                    <li data-child-id="category-node-26-main"
3624                            class="level-0"
3625                        >
3626                            <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3627                               href="https://www.strunz.com/buecher.html"
3628                               title="B&#xFC;cher"
3629                               @mouseenter="activeCategory = 'category-node-26'"
3630                            >
3631                                Bücher                            </a>
3632                        </li>
3633                                                                    <li data-child-id="category-node-29-main"
3634                            class="level-0"
3635                        >
3636                            <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3637                               href="https://www.strunz.com/selbsttests.html"
3638                               title="Selbsttests"
3639                               @mouseenter="activeCategory = 'category-node-29'"
3640                            >
3641                                Selbsttests                            </a>
3642                        </li>
3643                                                                    <li data-child-id="category-node-134-main"
3644                            class="level-0"
3645                        >
3646                            <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3647                               href="https://www.strunz.com/snacks-superfoods.html"
3648                               title="Snacks"
3649                               @mouseenter="activeCategory = 'category-node-134'"
3650                            >
3651                                Snacks                            </a>
3652                        </li>
3653                                                                    <li data-child-id="category-node-177-main"
3654                            class="level-0"
3655                        >
3656                            <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3657                               href="https://www.strunz.com/zubehoer.html"
3658                               title="Zubeh&#xF6;r"
3659                               @mouseenter="activeCategory = 'category-node-177'"
3660                            >
3661                                Zubehör                            </a>
3662                        </li>
3663                                                                                            <li data-child-id="category-node-36-main"
3664                            class="level-0"
3665                        >
3666                            <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3667                               href="https://www.strunz.com/neu.html"
3668                               title="Neu"
3669                               @mouseenter="activeCategory = 'category-node-36'"
3670                            >
3671                                Neu                            </a>
3672                        </li>
3673                                        <li class="level-0">
3674                        <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3675                           href="/news"
3676                           title="News"
3677                        >
3678                            News                        </a>
3679                    </li>
3680                    <li class="level-0">
3681                        <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3682                           href="/seminar"
3683                           title="Seminar"
3684                        >
3685                            Seminar                        </a>
3686                    </li>
3687                    <li class="level-0">
3688                        <a class="level-0 mb-2 cursor-pointer h2 font-bold no-underline text-gray hover:text-black"
3689                           href="/forum"
3690                           title="Forum"
3691                        >
3692                            Forum                        </a>
3693                    </li>
3694                                            <li data-child-id="category-node-156-main"
3695                            class="level-0"
3696                        >
3697                            <a class="level-0 mb-2 cursor-pointer btn btn-secondary inline-block mt-8"
3698                               href="https://www.strunz.com/angebote.html"
3699                               title="Angebote"
3700                               @mouseenter="activeCategory = 'category-node-156'"
3701                            >
3702                                Angebote                            </a>
3703                        </li>
3704                                    </ul>
3705                <ul class="grow min-w-0"
3706                    x-ref="subCategories">
3707                                                                        <li class="w-full max-h-full overflow-x-auto" x-show="activeCategory === 'category-node-3'">
3708                                <ul class="gap-x-4 [column-width:14rem] [column-fill:auto] pb-2">
3709                                                                                                                        <li class="my-1 first:mt-0 relative">
3710                                                <a href="https://www.strunz.com/eiweisspulver/power-eiweiss-dosen.html"
3711                                                   title="Power&#x20;Eiwei&#xDF;&#x20;Dosen"
3712                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3713                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3714                                                >
3715                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
3715ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3716  <path id="auf-lager-icon" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3717</svg>
3718                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3719                                                        Power Eiweiß Dosen                                                    </span>
3720                                                </a>
3721                                            </li>
3722                                                                                                                                                                <li class="my-1 first:mt-0 relative">
3723                                                <a href="https://www.strunz.com/eiweisspulver/power-eiweiss-nachfuellbeutel.html"
3724                                                   title="Power&#x20;Eiwei&#xDF;&#x20;Beutel"
3725                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3726                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3727                                                >
3728                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3729  <path id="auf-lager-icon_2" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3730</svg>
3731                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3732                                                        Power Eiweiß Beutel                                                    </span>
3733                                                </a>
3734                                            </li>
3735                                                                                                                                                                <li class="my-1 first:mt-0 relative">
3736                                                <a href="https://www.strunz.com/eiweisspulver/multi-eiweiss.html"
3737                                                   title="Multi&#x20;Eiwei&#xDF;"
3738                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3739                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3740                                                >
3741                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3742  <path id="auf-lager-icon_3" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3743</svg>
3744                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3745                                                        Multi Eiweiß                                                    </span>
3746                                                </a>
3747                                            </li>
3748                                                                                                                                                                <li class="my-1 first:mt-0 relative">
3749                                                <a href="https://www.strunz.com/eiweisspulver/veganes-eiweiss.html"
3750                                                   title="Veganes&#x20;Eiwei&#xDF;"
3751                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3752                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3753                                                >
3754                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3755  <path id="auf-lager-icon_4" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3756</svg>
3757                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3758                                                        Veganes Eiweiß                                                    </span>
3759                                                </a>
3760                                            </li>
3761                                                                                                                                                                <li class="my-1 first:mt-0 relative">
3762                                                <a href="https://www.strunz.com/eiweisspulver/whey-isolate.html"
3763                                                   title="Whey&#x20;Isolate"
3764                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3765                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3766                                                >
3767                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3768  <path id="auf-lager-icon_5" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3769</svg>
3770                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3771                                                        Whey Isolate                                                    </span>
3772                                                </a>
3773                                            </li>
3774                                                                                                                                                                <li class="my-1 first:mt-0 relative">
3775                                                <a href="https://www.strunz.com/eiweisspulver/casein.html"
3776                                                   title="Casein"
3777                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3778                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3779                                                >
3780                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
3780ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3781  <path id="auf-lager-icon_6" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3782</svg>
3783                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3784                                                        Casein                                                    </span>
3785                                                </a>
3786                                            </li>
3787                                                                                                                                                                <li class="my-1 first:mt-0 relative">
3788                                                <a href="https://www.strunz.com/eiweisspulver/eiweiss-pancake-und-riegel.html"
3789                                                   title="Proteinriegel"
3790                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3791                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3792                                                >
3793                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3794  <path id="auf-lager-icon_7" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3795</svg>
3796                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3797                                                        Proteinriegel                                                    </span>
3798                                                </a>
3799                                            </li>
3800                                                                                                                                                                <li class="my-1 first:mt-0 relative">
3801                                                <a href="https://www.strunz.com/eiweisspulver/eiweissshaker-und-zubehor.html"
3802                                                   title="Shaker"
3803                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3804                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D3]').focus())"
3805                                                >
3806                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3807  <path id="auf-lager-icon_8" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3808</svg>
3809                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3810                                                        Shaker                                                    </span>
3811                                                </a>
3812                                            </li>
3813                                                                                                            </ul>
3814                            </li>
3815                                                                                                <li class="w-full max-h-full overflow-x-auto" x-show="activeCategory === 'category-node-14'">
3816                                <ul class="gap-x-4 [column-width:14rem] [column-fill:auto] pb-2">
3817                                                                                                                        <li class="my-4 first:mt-0">
3818                                                <span class="badge-black">Kategorie</span>
3819                                            </li>
3820                                                                                                                                                <li class="my-1 first:mt-0 relative">
3821                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/aminosaeuren.html"
3822                                                           title="Aminos&#xE4;uren"
3823                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3824                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3825                                                        >
3826                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: #a98aff;" aria-hidden="true">
3827  <path id="auf-lager-icon_9" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3828</svg>
3829                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3830                                                                Aminosäuren                                                            </span>
3831                                                        </a>
3832                                                    </li>
3833                                                                                                    <li class="my-1 first:mt-0 relative">
3834                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/vitamine.html"
3835                                                           title="Vitamine"
3836                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3837                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3838                                                        >
3839                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: #ffc501;" aria-hidden="true">
3840  <path id="auf-lager-icon_10" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3841</svg>
3842                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3843                                                                Vitamine                                                            </span>
3844                                                        </a>
3845                                                    </li>
3846                                                                                                    <li class="my-1 first:mt-0 relative">
3847                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/mineralstoffe.html"
3848                                                           title="Mineralstoffe"
3849                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3850                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3851                                                        >
3852                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: #377de8;" aria-hidden="true">
3853  <path id="auf-lager-icon_11" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3854</svg>
3855                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3856                                                                Mineralstoffe                                                            </span>
3857                                                        </a>
3858                                                    </li>
3859                                                                                                    <li class="my-1 first:mt-0 relative">
3860                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/pflanzenstoffe.html"
3861                                                           title="Pflanzenstoffe"
3862                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3863                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3864                                                        >
3865                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: #52b386;" aria-hidden="true">
3866  <path id="auf-lager-icon_12" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3867</svg>
3868                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3869                                                                Pflanzenstoffe                                                            </span>
3870                                                        </a>
3871                                                    </li>
3872                                                                                                    <li class="my-1 first:mt-0 relative">
3873                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/funtionelle-naehrstoffe.html"
3874                                                           title="Funktionelle&#x20;N&#xE4;hrstoffe"
3875                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3876                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3877                                                        >
3878                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
3878ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: #ecff4e;" aria-hidden="true">
3879  <path id="auf-lager-icon_13" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3880</svg>
3881                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3882                                                                Funktionelle Nährstoffe                                                            </span>
3883                                                        </a>
3884                                                    </li>
3885                                                                                                    <li class="my-1 first:mt-0 relative">
3886                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/omega-3-und-oele.html"
3887                                                           title="Omega&#x20;3&#x20;&amp;&#x20;&#xD6;le"
3888                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3889                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3890                                                        >
3891                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: #ff4c4c;" aria-hidden="true">
3892  <path id="auf-lager-icon_14" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3893</svg>
3894                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3895                                                                Omega 3 &amp; Öle                                                            </span>
3896                                                        </a>
3897                                                    </li>
3898                                                                                                    <li class="my-1 first:mt-0 relative">
3899                                                        <a href="https://www.strunz.com/nahrungsergaenzung/kategorie/all-in-one.html"
3900                                                           title="All-in-One"
3901                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3902                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3903                                                        >
3904                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: #edebe5;" aria-hidden="true">
3905  <path id="auf-lager-icon_15" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3906</svg>
3907                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3908                                                                All-in-One                                                            </span>
3909                                                        </a>
3910                                                    </li>
3911                                                                                                                                                                                                                                                            <li class="my-4 first:mt-0">
3912                                                <span class="badge-black">Anwendungsbereiche</span>
3913                                            </li>
3914                                                                                                                                                <li class="my-1 first:mt-0 relative">
3915                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/abnehmen.html"
3916                                                           title="Abnehmen&#x20;&amp;&#x20;Stoffwechsel"
3917                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3918                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3919                                                        >
3920                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3921  <path id="auf-lager-icon_16" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3922</svg>
3923                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3924                                                                Abnehmen &amp; Stoffwechsel                                                            </span>
3925                                                        </a>
3926                                                    </li>
3927                                                                                                    <li class="my-1 first:mt-0 relative">
3928                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/allergien.html"
3929                                                           title="Allergien&#x20;&amp;&#x20;Unvertr&#xE4;glichkeiten"
3930                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3931                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3932                                                        >
3933                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3934  <path id="auf-lager-icon_17" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3935</svg>
3936                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3937                                                                Allergien &amp; Unverträglichkeiten                                                            </span>
3938                                                        </a>
3939                                                    </li>
3940                                                                                                    <li class="my-1 first:mt-0 relative">
3941                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/augen.html"
3942                                                           title="Augen"
3943                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3944                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3945                                                        >
3946                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3947  <path id="auf-lager-icon_18" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3948</svg>
3949                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3950                                                                Augen                                                            </span>
3951                                                        </a>
3952                                                    </li>
3953                                                                                                    <li class="my-1 first:mt-0 relative">
3954                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/darm-verdauung.html"
3955                                                           title="Darm&#x20;&amp;&#x20;Verdauung"
3956                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3957                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3958                                                        >
3959                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3960  <path id="auf-lager-icon_19" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3961</svg>
3962                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3963                                                                Darm &amp; Verdauung                                                            </span>
3964                                                        </a>
3965                                                    </li>
3966                                                                                                    <li class="my-1 first:mt-0 relative">
3967                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/entzuendungen.html"
3968                                                           title="Entz&#xFC;ndung"
3969                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3970                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3971                                                        >
3972                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
3972ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3973  <path id="auf-lager-icon_20" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3974</svg>
3975                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3976                                                                Entzündung                                                            </span>
3977                                                        </a>
3978                                                    </li>
3979                                                                                                    <li class="my-1 first:mt-0 relative">
3980                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/energie-mitochondrien.html"
3981                                                           title="Energie&#x20;&amp;&#x20;Mitochondrien"
3982                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3983                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3984                                                        >
3985                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3986  <path id="auf-lager-icon_21" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
3987</svg>
3988                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
3989                                                                Energie &amp; Mitochondrien                                                            </span>
3990                                                        </a>
3991                                                    </li>
3992                                                                                                    <li class="my-1 first:mt-0 relative">
3993                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/frauengesundheit.html"
3994                                                           title="Frauengesundheit"
3995                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
3996                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
3997                                                        >
3998                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
3999  <path id="auf-lager-icon_22" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4000</svg>
4001                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4002                                                                Frauengesundheit                                                            </span>
4003                                                        </a>
4004                                                    </li>
4005                                                                                                    <li class="my-1 first:mt-0 relative">
4006                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/gehirn-nerven-psyche.html"
4007                                                           title="Gehirn,&#x20;Nerven&#x20;&amp;&#x20;Psyche"
4008                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4009                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4010                                                        >
4011                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4012  <path id="auf-lager-icon_23" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4013</svg>
4014                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4015                                                                Gehirn, Nerven &amp; Psyche                                                            </span>
4016                                                        </a>
4017                                                    </li>
4018                                                                                                    <li class="my-1 first:mt-0 relative">
4019                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/haut-haare-naegel.html"
4020                                                           title="Haut,&#x20;Haare,&#x20;N&#xE4;gel"
4021                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4022                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4023                                                        >
4024                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4025  <path id="auf-lager-icon_24" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4026</svg>
4027                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4028                                                                Haut, Haare, Nägel                                                            </span>
4029                                                        </a>
4030                                                    </li>
4031                                                                                                    <li class="my-1 first:mt-0 relative">
4032                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/herz-und-gefaesse.html"
4033                                                           title="Herz&#x20;&amp;&#x20;Gef&#xE4;&#xDF;e"
4034                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4035                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4036                                                        >
4037                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
4037ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4038  <path id="auf-lager-icon_25" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4039</svg>
4040                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4041                                                                Herz &amp; Gefäße                                                            </span>
4042                                                        </a>
4043                                                    </li>
4044                                                                                                    <li class="my-1 first:mt-0 relative">
4045                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/abwehrkraefte.html"
4046                                                           title="Immunsystem&#x20;&amp;&#x20;Abwehrkr&#xE4;fte"
4047                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4048                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4049                                                        >
4050                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4051  <path id="auf-lager-icon_26" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4052</svg>
4053                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4054                                                                Immunsystem &amp; Abwehrkräfte                                                            </span>
4055                                                        </a>
4056                                                    </li>
4057                                                                                                    <li class="my-1 first:mt-0 relative">
4058                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/kindergesundheit.html"
4059                                                           title="Kindergesundheit"
4060                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4061                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4062                                                        >
4063                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4064  <path id="auf-lager-icon_27" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4065</svg>
4066                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4067                                                                Kindergesundheit                                                            </span>
4068                                                        </a>
4069                                                    </li>
4070                                                                                                    <li class="my-1 first:mt-0 relative">
4071                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/knochen-gelenke-sehnen.html"
4072                                                           title="Knochen,&#x20;Gelenke,&#x20;Sehnen"
4073                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4074                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4075                                                        >
4076                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4077  <path id="auf-lager-icon_28" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4078</svg>
4079                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4080                                                                Knochen, Gelenke, Sehnen                                                            </span>
4081                                                        </a>
4082                                                    </li>
4083                                                                                                    <li class="my-1 first:mt-0 relative">
4084                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/entgiften-ausleiten.html"
4085                                                           title="Leber&#x20;&amp;&#x20;Entgiften&#x20;"
4086                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4087                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4088                                                        >
4089                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4090  <path id="auf-lager-icon_29" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4091</svg>
4092                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4093                                                                Leber &amp; Entgiften                                                             </span>
4094                                                        </a>
4095                                                    </li>
4096                                                                                                    <li class="my-1 first:mt-0 relative">
4097                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/longevity.html"
4098                                                           title="Longevity"
4099                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4100                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4101                                                        >
4102                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
4102ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4103  <path id="auf-lager-icon_30" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4104</svg>
4105                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4106                                                                Longevity                                                            </span>
4107                                                        </a>
4108                                                    </li>
4109                                                                                                    <li class="my-1 first:mt-0 relative">
4110                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/maennergesundheit.html"
4111                                                           title="M&#xE4;nnergesundheit"
4112                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4113                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4114                                                        >
4115                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4116  <path id="auf-lager-icon_31" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4117</svg>
4118                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4119                                                                Männergesundheit                                                            </span>
4120                                                        </a>
4121                                                    </li>
4122                                                                                                    <li class="my-1 first:mt-0 relative">
4123                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/schilddruese.html"
4124                                                           title="Schilddr&#xFC;se"
4125                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4126                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4127                                                        >
4128                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4129  <path id="auf-lager-icon_32" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4130</svg>
4131                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4132                                                                Schilddrüse                                                            </span>
4133                                                        </a>
4134                                                    </li>
4135                                                                                                    <li class="my-1 first:mt-0 relative">
4136                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/schlaf-und-entspannung.html"
4137                                                           title="Schlaf&#x20;&amp;&#x20;Entspannung"
4138                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4139                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4140                                                        >
4141                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4142  <path id="auf-lager-icon_33" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4143</svg>
4144                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4145                                                                Schlaf &amp; Entspannung                                                            </span>
4146                                                        </a>
4147                                                    </li>
4148                                                                                                    <li class="my-1 first:mt-0 relative">
4149                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/stress-erschoepfung.html"
4150                                                           title="Stress&#x20;&amp;&#x20;Ersch&#xF6;pfung"
4151                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4152                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4153                                                        >
4154                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4155  <path id="auf-lager-icon_34" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4156</svg>
4157                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4158                                                                Stress &amp; Erschöpfung                                                            </span>
4159                                                        </a>
4160                                                    </li>
4161                                                                                                    <li class="my-1 first:mt-0 relative">
4162                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/training-und-regeneration.html"
4163                                                           title="Training&#x20;&amp;&#x20;Regeneration"
4164                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4165                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4166                                                        >
4167                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
4167ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4168  <path id="auf-lager-icon_35" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4169</svg>
4170                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4171                                                                Training &amp; Regeneration                                                            </span>
4172                                                        </a>
4173                                                    </li>
4174                                                                                                    <li class="my-1 first:mt-0 relative">
4175                                                        <a href="https://www.strunz.com/nahrungsergaenzung/anwendungsbereiche/zaehne-mund.html"
4176                                                           title="Z&#xE4;hne&#x20;&amp;&#x20;Mund"
4177                                                           class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4178                                                           @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D14]').focus())"
4179                                                        >
4180                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4181  <path id="auf-lager-icon_36" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4182</svg>
4183                                                            <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4184                                                                Zähne &amp; Mund                                                            </span>
4185                                                        </a>
4186                                                    </li>
4187                                                                                                                                                                                                        </ul>
4188                            </li>
4189                                                                                                                                                                                        <li class="w-full max-h-full overflow-x-auto" x-show="activeCategory === 'category-node-134'">
4190                                <ul class="gap-x-4 [column-width:14rem] [column-fill:auto] pb-2">
4191                                                                                                                        <li class="my-1 first:mt-0 relative">
4192                                                <a href="https://www.strunz.com/snacks-superfoods/riegel-snacks.html"
4193                                                   title="Riegel"
4194                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4195                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D134]').focus())"
4196                                                >
4197                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewB
4197ox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4198  <path id="auf-lager-icon_37" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4199</svg>
4200                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4201                                                        Riegel                                                    </span>
4202                                                </a>
4203                                            </li>
4204                                                                                                                                                                <li class="my-1 first:mt-0 relative">
4205                                                <a href="https://www.strunz.com/snacks-superfoods/nusse-fruchte.html"
4206                                                   title="Nuts&#x20;&amp;&#x20;fruits"
4207                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4208                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D134]').focus())"
4209                                                >
4210                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4211  <path id="auf-lager-icon_38" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4212</svg>
4213                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4214                                                        Nuts &amp; fruits                                                    </span>
4215                                                </a>
4216                                            </li>
4217                                                                                                                                                                <li class="my-1 first:mt-0 relative">
4218                                                <a href="https://www.strunz.com/snacks-superfoods/smart-nutrition.html"
4219                                                   title="Smart&#x20;nutrition"
4220                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4221                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D134]').focus())"
4222                                                >
4223                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4224  <path id="auf-lager-icon_39" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4225</svg>
4226                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4227                                                        Smart nutrition                                                    </span>
4228                                                </a>
4229                                            </li>
4230                                                                                                                                                                <li class="my-1 first:mt-0 relative">
4231                                                <a href="https://www.strunz.com/snacks-superfoods/kaffee-kakao.html"
4232                                                   title="Kaffee&#x20;&amp;&#x20;Kakao"
4233                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4234                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D134]').focus())"
4235                                                >
4236                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4237  <path id="auf-lager-icon_40" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4238</svg>
4239                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4240                                                        Kaffee &amp; Kakao                                                    </span>
4241                                                </a>
4242                                            </li>
4243                                                                                                                                                                <li class="my-1 first:mt-0 relative">
4244                                                <a href="https://www.strunz.com/snacks-superfoods/rezepte.html"
4245                                                   title="Rezepte"
4246                                                   class="menu-dot group no-underline aria-[current=page]:underline inline-flex w-full pl-5"
4247                                                   @keyup.escape="$nextTick(() => document.querySelector('[data-sr-button-id=category\u002Dnode\u002D134]').focus())"
4248                                                >
4249                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 17.553 19.433" class="text-current h-4 w-4 absolute left-0 top-1 opacity-0 transition-opacity duration-300 group-hover:opacity-100 group-hover:delay-100" style="color: ;" aria-hidden="true">
4250  <path id="auf-lager-icon_41" d="M15245-5575.711v5.774a3.413,3.413,0,0,0,1.676,2.947l4.924,2.887a3.305,3.305,0,0,0,3.352,0l4.926-2.887a3.413,3.413,0,0,0,1.676-2.947v-5.774a3.413,3.413,0,0,0-1.676-2.946l-4.926-2.887a3.305,3.305,0,0,0-3.352,0l-4.924,2.887a3.413,3.413,0,0,0-1.676,2.946" transform="translate(-15244.5 5582.54)" fill="#000000" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"/>
4251</svg>
4252                                                    <span class="inline-block w-full -translate-x-5 transition-transform duration-300 group-hover:translate-x-0">
4253                                                        Rezepte                                                    </span>
4254                                                </a>
4255                                            </li>
4256                                                                                                            </ul>
4257                            </li>
4258                                                                                                                                                                                                </ul>
4259            </div>
4260                        <div class="w-1/4 flex justify-center p-4" style="background-color: #a98aff">
4261                <div class="featured-product flex flex-col justify-center items-center gap-4">
4262                                        <img src="/media/wysiwyg/home/showcase/showcase-slider_500x850px_ amino-11.webp"
4263                         alt="Amino&#x20;11"
4264                         class="mx-auto mb-2 max-w-[8rem] h-auto" />
4265                                        <div class="flex flex-col gap-2 mb-2">
4266                                                    <span class="text-body-sm text-center" style="color: #3d1568">
4267                            FOREVER YOUNG                            </span>
4268                                                <span class="h3 m-0 text-center" style="color: #3d1568">
4269                        Amino 11                        </span>
4270                    </div>
4271                    <a href="https://www.strunz.com/forever-young-amino-11-tabletten.html"
4272                       class="btn btn-primary hover:opacity-90"
4273                       style="color: #a98aff; background-color: #3d1568; border-color: #a98aff">
4274                        Zum Produkt                    </a>
4275                </div>
4276            </div>
4277                    </div>
4278        <div class="flex justify-between items-center py-4 px-8 bg-black rounded-bl-lg rounded-br-lg">
4279            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 62 62.001" class="w-8 h-8 text-white" aria-hidden="true">
4280  <g id="adler-circle-grey" transform="translate(-108 -5479.038)">
4281    <path id="Pfad_1367" data-name="Pfad 1367" d="M794.956,753a31,31,0,1,1,31-31,31.036,31.036,0,0,1-31,31m0-58.857A27.856,27.856,0,1,0,822.812,722a27.888,27.888,0,0,0-27.856-27.856" transform="translate(-655.955 4788.037)" fill="#2e3831"/>
4282    <path id="Pfad_13969" data-name="Pfad 13969" d="M31.263,6.812H28.821a7.129,7.129,0,0,1,1.812,1.115,8.971,8.971,0,0,0-3.5-1.115H25.948a5.772,5.772,0,0,0-3.318,1.048l-3.864,2.493a3.458,3.458,0,0,1-3.99-.076A7.322,7.322,0,0,0,18.4,12.216c.464.1.848.166,1.169.2l-.036.036a2.441,2.441,0,0,1-2.767.532,5.163,5.163,0,0,0,2.151.77l-3.267,6.553-2.06-4.132-3.075-6.166a5.775,5.775,0,0,0-5.168-3.2H0A9.728,9.728,0,0,0,6.527,10.94,9.768,9.768,0,0,1,5.476,11a9.7,9.7,0,0,1-3.669-.716,13.818,13.818,0,0,0,8.669,5.041,13.887,13.887,0,0,1-1.5.08,13.791,13.791,0,0,1-5.2-1.012l.008.017A9.736,9.736,0,0,0,10.8,19.318a9.773,9.773,0,0,1-4.936-.75l.584,1.171,4.743,9.513L6.025,39.6h5.343a5.775,5.775,0,0,0,5.162-3.185,10.8,10.8,0,0,1-5.434.82,10.757,10.757,0,0,0,7.619-5.2l1.325-2.657L29.45,10.506A4.444,4.444,0,0,1,33.5,8.4a2.372,2.372,0,0,0-2.238-1.587" transform="translate(122.785 5487.577)" fill="#2e3831"/>
4283  </g>
4284</svg>
4285            <svg xmlns="http://www.w3.org/2000/svg" width="160" height="32" viewBox="0 0 263.797 31" class="w-40 h-8 text-white" aria-hidden="true">
4286  <g id="payment_5" transform="translate(-978.002 -9982.656)">
4287    <g id="visa-outline-large_5" transform="translate(1032.768 9983.156)">
4288      <rect id="card_bg_5" width="44" height="30" rx="4" transform="translate(0.766 0)" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/>
4289      <path id="card_bg-2_5" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
4290      <path id="visa-logo_5" d="M15.976,8.94a6.692,6.692,0,0,1-2.445-.461l.4-1.878a4.713,4.713,0,0,0,2.232.565h.059c.668-.01,1.343-.277,1.343-.854.009-.368-.306-.66-1.164-1.08s-1.962-1.105-1.962-2.358C14.443,1.182,15.987,0,18.2,0a6.023,6.023,0,0,1,2.1.386l-.392,1.883a4.238,4.238,0,0,0-1.8-.406,4.107,4.107,0,0,0-.413.02c-.649.086-.939.425-.939.723,0,.364.465.607,1.055.916.935.489,2.1,1.1,2.092,2.53l.048-.076c-.009,1.8-1.547,2.967-3.915,2.967ZM22.2,8.866H19.832L23.2.818a1.021,1.021,0,0,1,.939-.639h1.878l1.827,8.684H25.758l-.272-1.3H22.659l-.46,1.3ZM24.434,2.52,23.251,5.784H25.12ZM11.925,8.837H9.672L11.551.15H13.8L11.925,8.836ZM7,8.808H4.545L2.752,1.869a.944.944,0,0,0-.536-.756A9.312,9.312,0,0,0,0,.378L.057.126H3.879a1.05,1.05,0,0,1,1.036.882l.945,5.02L8.2.126H10.64Z" transform="translate(8.241 10.738)" fill="#2e3831"/>
4291    </g>
4292    <g id="paypal-outline-large_5" transform="translate(1141.297 9983.156)">
4293      <rect id="card_bg-2-2_5" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
4294      <path id="card_bg-2-3_5" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
4295      <g id="paypal_5" transform="translate(15.269 5.799)">
4296        <path id="Path_5" d="M11.934,4.132C11.259,7.587,8.946,8.77,6.018,8.77H5.544a.723.723,0,0,0-.713.62V9.6l-.559,3.625v.15a.732.732,0,0,1-.732.62H.441a.422.422,0,0,1-.432-.5l.243-1.58L1.6,3.339l.5.7L.666,13.357h2.9c.019,0,0,0,0-.076v-.126l.582-3.643v-.2a1.418,1.418,0,0,1,.47-.827A1.4,1.4,0,0,1,5.5,8.151h.489a8.386,8.386,0,0,0,1.871-.213A4.817,4.817,0,0,0,9.4,7.244,4.2,4.2,0,0,0,10.525,6,6.085,6.085,0,0,0,11.24,4.02a5.174,5.174,0,0,0,.093-1.751,2.451,2.451,0,0,0-.544-1.2A1.671,1.671,0,0,0,10.3.677a2.184,2.184,0,0,1,.076-.338L10.432,0a2.818,2.818,0,0,1,.827.639,3.963,3.963,0,0,1,.675,3.493Z" transform="translate(3.849 4.817)" fill="#2e3831"/>
4297        <path id="Path-2_5" data-name="Path" d="M8.489.274,8.133.179,7.738.1a9.451,9.451,0,0,0-1.5-.
42971H1.653a.677.677,0,0,0-.31.066A.713.713,0,0,0,.94.61L0,6.781v.179a.835.835,0,0,1,.827-.7H2.535c3.362,0,6-1.371,6.77-5.315L9.362.592a4.207,4.207,0,0,0-.63-.263Z" transform="translate(5.041 4.206)" fill="#2e3831"/>
4298        <path id="Path-3_5" data-name="Path" d="M14.337,4.776a3.634,3.634,0,0,0-.6-.244,3.916,3.916,0,0,0,0-1.5,2.535,2.535,0,0,0-.677-1.145c-.694-.808-2.027-1.2-3.962-1.2H3.256a.272.272,0,0,0-.126,0,.169.169,0,0,0-.057.126L.645,16.063h3.55L4.1,16.7H.5a.5.5,0,0,1-.489-.582L2.43.719A.846.846,0,0,1,3.256.006H9.1a6.048,6.048,0,0,1,4.488,1.409,3.756,3.756,0,0,1,.756,3.362Z" transform="translate(0.001 0.022)" fill="#2e3831"/>
4299      </g>
4300    </g>
4301    <g id="mastercard-outline-large_5" transform="translate(1086.898 9983.156)">
4302      <rect id="card_bg-3_5" data-name="card_bg" width="45" height="30" rx="4" transform="translate(0 0)" fill="none"/>
4303      <path id="card_bg-2-4_5" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0 0)" fill="#2e3831"/>
4304      <g id="mastercard_5" transform="translate(4.366 3.198)">
4305        <g id="Group_5" opacity="0">
4306          <rect id="Rectangle_5" width="36.34" height="24.04" fill="#2e3831"/>
4307        </g>
4308        <path id="Path-4_5" data-name="Path" d="M14.475,18.847a9.963,9.963,0,1,1,0-17.767,11.71,11.71,0,0,0-4.016,8.883,11.879,11.879,0,0,0,4.016,8.883Z" transform="translate(2.025 2.056)" fill="#2e3831"/>
4309        <path id="Shape_5" d="M.47.387H.394V0H.5L.61.272.733,0H.827V.384H.756V.093l-.1.252H.582L.47.093V.386Zm-.282,0H.126V.066H0V0H.329V.066H.188V.384Z" transform="translate(33.139 17.805)" fill="#2e3831"/>
4310        <path id="Path-5_5" data-name="Path" d="M14.462,9.968A9.955,9.955,0,0,1,.019,18.852,11.87,11.87,0,0,0,1.5,2.646,10.742,10.742,0,0,0,0,1.085,9.944,9.944,0,0,1,14.462,9.968Z" transform="translate(19.823 2.051)" fill="#2e3831"/>
4311        <path id="Path-6_5" data-name="Path" d="M3.81,15.663A9.955,9.955,0,0,1,3.81,0a9.963,9.963,0,0,1,3.8,7.831,9.963,9.963,0,0,1-3.8,7.831Z" transform="translate(14.36 4.188)" fill="#2e3831"/>
4312      </g>
4313    </g>
4314    <g id="zahlen-auf-rechnung_5" transform="translate(767.533 8562.672)">
4315      <g id="paypal-outline-large-2_5" data-name="paypal-outline-large" transform="translate(210.735 1420.484)">
4316        <rect id="card_bg-4_5" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
4317        <path id="card_bg-2-5_5" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
4318      </g>
4319      <g id="living-berlin-logo-bezahlen-auf-rechnung_5" transform="translate(225.771 1426.121)">
4320        <path id="Pfad_15183_5" data-name="Pfad 15183" d="M195.813,522.77a3.46,3.46,0,0,1,2.192.1,3.394,3.394,0,0,1,1.716,1.334.483.483,0,0,1-.81.524,2.439,2.439,0,0,0-1.239-.953,2.537,2.537,0,0,0-1.573-.048,2.819,2.819,0,0,0-1.334.858,1.669,1.669,0,0,0-.238.381h2.907a.477.477,0,1,1,0,.953H194.24v.524h3.193a.477.477,0,1,1,0,.953h-2.907c.048.048.048.143.1.191a2.342,2.342,0,0,0,1.239,1,2.547,2.547,0,0,0,1.573.1,2.506,2.506,0,0,0,1.334-.858.473.473,0,0,1,.715.62,3.178,3.178,0,0,1-1.859,1.144,3.472,3.472,0,0,1-2.192-.143,3.417,3.417,0,0,1-1.668-1.382,4.813,4.813,0,0,1-.334-.715h-.953a.477.477,0,0,1,0-.953h.715v-.524h-.667a.477.477,0,0,1,0-.953h.953a3.9,3.9,0,0,1,.572-.953A3.261,3.261,0,0,1,195.813,522.77Z" transform="translate(-188.95 -514.334)" fill="#2e3831" fill-rule="evenodd"/>
4321        <path id="Pfad_15184_5" data-name="Pfad 15184" d="M.667.667A2.269,2.269,0,0,1,2.288,0h7.2a.433.433,0,0,1,.334.143L15.25,5.528a.433.433,0,0,1,.143.334V16.68a2.278,2.278,0,0,1-2.288,2.288H2.288A2.278,2.278,0,0,1,0,16.68V2.288A2.269,2.269,0,0,1,.667.667Zm1.62.286A1.3,1.3,0,0,0,.953,2.288V16.68a1.513,1.513,0,0,0,.381.953,1.331,1.331,0,0,0,.953.381H13.106a1.513,1.513,0,0,0,.953-.381,1.331,1.331,0,0,0,.381-.953V6.1L9.293.953Z" fill="#2e3831" fill-rule="evenodd"/>
4322        <path id="Pfad_15185_5" data-name="Pfad 15185" d="M567.477,0a.45.45,0,0,1,.477.477V5.385h4.909a.477.477,0,1,1,0,.953h-5.385A.45.45,0,0,1,567,5.862V.477A.478.478,0,0,1,567.477,0Z" transform="translate(-557.993)" fill="#2e3831" fill-rule="evenodd"/>
4323      </g>
4324    </g>
4325    <g id="electronic-cash_5" transform="translate(1097.072 8562.672)">
4326      <g id="paypal-outline-large-3_5" data-name="paypal-outline-large" transform="translate(98.993 1420.484)">
4327        <rect id="card_bg-5_5" data-name="card_bg" width="46" height="30" rx="4" transform="translate(-0.268 0)" fill="none"/>
4328        <path id="card_bg-2-6_5" data-name="card_bg-2" d="M41.582,30.242H3.78A3.78,3.78,0,0,1,0,26.461V3.78A3.78,3.78,0,0,1,3.78,0h37.8a3.78,3.78,0,0,1,3.78,3.78V26.461A3.78,3.78,0,0,1,41.582,30.242ZM3.78,1.89A1.89,1.89,0,0,0,1.89,3.78V26.461a1.89,1.89,0,0,0,1.89,1.89h37.8a1.89,1.89,0,0,0,1.89-1.89V3.78a1.89,1.89,0,0,0-1.89-1.89Z" transform="translate(0.146 0)" fill="#2e3831"/>
4329      </g>
4330      <g id="layer1_5" transform="translate(111.828 1423.77)">
4331        <g id="g4785_5" transform="translate(2.445 2.35)">
4332          <g id="g2349_5" transform="translate(0.012 0.022)">
4333            <g id="path2351_5">
4334              <path id="Pfad_15186_5" data-name="Pfad 15186" d="M81.71,79.254V70.57H74.7a1.614,1.614,0,0,0-1.6,1.681V83.612a1.616,1.616,0,0,0,1.6,1.679H81.71v-5.17H77.963v2.191h-.541a.67.67,0,0,1-.659-.683V79.254ZM76.763,74.2a.652.652,0,0,1,.65-.65h.55v2.8h-1.2Z" transform="translate(-73.1 -70.57)" fill="#2e3831" fill-rule="evenodd"/>
4335            </g>
4336          </g>
4337          <g id="g2353_5" transform="translate(0 16.83)">
4338            <g id="path2355_5">
4339              <path id="Pfad_15187_5" data-name="Pfad 15187" d="M73.763,585.559v-.292c0-.6-.051-.957-.531-.957-.336,0-.52.293-.5.808v.57c-.009.64.154.913.552.913.35,0,.489-.307.475-.794h-.342c.005.278-.035.412-.16.412-.1,0-.177-.054-.184-.342v-.317Zm-.69-.475c0-.2,0-.393.165-.393.139,0,.179.074.184.287v.193h-.349Z" transform="translate(-72.729 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
4340            </g>
4341          </g>
4342          <g id="g2357_5" transform="translate(6.467 0.022)">
4343            <g id="path2359_5">
4344              <path id="Pfad_15188_5" data-name="Pfad 15188" d="M278.82,85.3h-6.875l-.079-.009-.074-.01-.081-.014-.074-.019-.07-.026-.074-.025-.07-.025a1.673,1.673,0,0,1-.911-.943l-.025-.068-.021-.08-.019-.074-.019-.074-.01-.08-.01-.074,0-.084-.005-.074V72.247a1.672,1.672,0,0,1,.466-1.155,1.59,1.59,0,0,1,.54-.377l.068-.031.07-.025.075-.019.068-.019.079-.016.075-.009.074-.01.
4344079-.005h6.826v5.774h-3.587v-2.8c-.554-.088-1.153.039-1.186.689v-.254l0,.263,0-.009v7.39l0-.01,0,.065v-.054c.035.652.631.78,1.2.687v-3l.016-.054h3.563V85.3h0Z" transform="translate(-270.4 -70.58)" fill="#2e3831" fill-rule="evenodd"/>
4345            </g>
4346          </g>
4347          <g id="g2361_5" transform="translate(10.45 16.83)">
4348            <g id="path2363_5">
4349              <path id="Pfad_15189_5" data-name="Pfad 15189" d="M393.087,585.133h-.342v-.242c-.005-.119-.049-.189-.119-.189-.132,0-.132.222-.132.485v.517c-.012.426.028.5.132.524.105-.005.11-.149.119-.323v-.2h.342v.2c0,.456-.128.7-.47.7-.3,0-.475-.233-.461-.813v-.7c-.005-.615.2-.775.461-.775.347,0,.477.317.47.64v.173Z" transform="translate(-392.156 -584.32)" fill="#2e3831"/>
4350            </g>
4351          </g>
4352          <g id="g2365_5" transform="translate(6.466)">
4353            <g id="path2367_5">
4354              <path id="Pfad_15190_5" data-name="Pfad 15190" d="M271.878,69.921c-.047.007-.093.015-.138.024h0a1.826,1.826,0,0,0-.677.289l0,0h0l0,0a1.563,1.563,0,0,0-.478.547c-.006.01-.011.02-.016.03l-.007.013,0,0-.013.027-.015.031-.009.02a1.877,1.877,0,0,0-.144.676V78.6h2.156V69.921A2.4,2.4,0,0,0,271.878,69.921Zm-1.508,9.551v3.491l.006.074,0,.084.01.074.011.081.019.073.019.074.021.081.025.068a1.758,1.758,0,0,0,.361.566,1.541,1.541,0,0,0,.114.1l.047.039.032.025.032.024.058.04.021.014.032.02.006,0,.006,0h0l.019.011.025.014.025.014.051.026,0,0c.029.014.059.027.088.04h0a1.614,1.614,0,0,0,.182.063h0a1.492,1.492,0,0,0,.2.045,1.519,1.519,0,0,0,.155.015h.575v-5.17Z" transform="translate(-270.37 -69.899)" fill="#2e3831" fill-rule="evenodd"/>
4355            </g>
4356          </g>
4357          <g id="g2369_5" transform="translate(1.297 16.165)">
4358            <g id="path2371_5">
4359              <rect id="Rechteck_4432_5" data-name="Rechteck 4432" width="0.347" height="2.9" fill="#2e3831"/>
4360            </g>
4361          </g>
4362          <g id="g2373_5" transform="translate(1.89 16.83)">
4363            <g id="path2375_5">
4364              <path id="Pfad_15191_5" data-name="Pfad 15191" d="M131.524,585.559v-.292c0-.6-.051-.957-.533-.957-.336,0-.515.293-.5.808v.57c-.005.64.154.913.55.913.352,0,.49-.307.475-.794h-.345c0,.278-.03.412-.159.412-.1,0-.174-.054-.179-.342v-.317Zm-.526-.867c.138,0,.177.074.177.287v.193h-.342v-.088C130.833,584.885,130.823,584.692,131,584.692Z" transform="translate(-130.491 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
4365            </g>
4366          </g>
4367          <g id="g2377_5" transform="translate(3.118 16.83)">
4368            <g id="path2379_5">
4369              <path id="Pfad_15192_5" data-name="Pfad 15192" d="M168.979,585.133h-.342v-.242c-.005-.119-.044-.189-.117-.189-.132,0-.132.222-.132.485v.517c0,.426.031.5.132.524.1-.005.107-.149.117-.323v-.2h.342v.2c0,.456-.123.7-.466.7-.307,0-.48-.233-.466-.813v-.7c0-.615.2-.775.466-.775.349,0,.471.317.466.64v.173Z" transform="translate(-168.046 -584.32)" fill="#2e3831"/>
4370            </g>
4371          </g>
4372          <g id="g2381_5" transform="translate(4.122 16.285)">
4373            <g id="path2383_5">
4374              <path id="Pfad_15193_5" data-name="Pfad 15193" d="M199.339,570.063v.4c-.208.03-.491.061-.491-.345v-1.479h-.138v-.364h.133v-.6h.347v.6h.149v.364h-.149V570c.01.089.105.074.149.068h0Z" transform="translate(-198.71 -567.67)" fill="#2e3831"/>
4375            </g>
4376          </g>
4377          <g id="g2385_5" transform="translate(4.889 16.846)">
4378            <g id="path2387_5">
4379              <path id="Pfad_15194_5" data-name="Pfad 15194" d="M222.493,584.84v.385h.005a.811.811,0,0,1,.133-.307.253.253,0,0,1,.217-.119v.6c-.193-.03-.336.04-.342.363v1.258h-.347v-2.18h.333Z" transform="translate(-222.16 -584.8)" fill="#2e3831"/>
4380            </g>
4381          </g>
4382          <g id="g2389_5" transform="translate(5.667 16.83)">
4383            <g id="path2391_5">
4384              <path id="Pfad_15195_5" data-name="Pfad 15195" d="M246.986,585.535c0-.748-.007-1.225-.517-1.225s-.526.477-.526,1.225.075,1.081.526,1.066C246.916,586.616,246.989,586.289,246.986,585.535Zm-.344.3c0,.266-.014.385-.173.385s-.184-.119-.184-.385v-.724c0-.2,0-.417.184-.417s.173.214.173.417Z" transform="translate(-245.943 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
4385            </g>
4386          </g>
4387          <g id="g2393_5" transform="translate(6.927 16.83)">
4388            <g id="path2395_5">
4389              <path id="Pfad_15196_5" data-name="Pfad 15196" d="M284.8,584.366v.222h.005c.079-.254.233-.279.312-.279.193,0,.352.163.342.55v1.686h-.342v-1.453c0-.212-.019-.35-.149-.363s-.173.175-.168.4v1.412h-.342v-2.18h.342Z" transform="translate(-284.46 -584.31)" fill="#2e3831"/>
4390            </g>
4391          </g>
4392          <g id="path2397_5" transform="translate(8.196 16.165)">
4393            <path id="Pfad_15197_5" data-name="Pfad 15197" d="M323.24,564.728v2.182h.347v-2.182Zm0-.718v.456h.347v-.456Z" transform="translate(-323.24 -564.01)" fill="#2e3831" fill-rule="evenodd"/>
4394          </g>
4395          <g id="g2399_5" transform="translate(8.779 16.83)">
4396            <g id="path2401_5">
4397              <path id="Pfad_15198_5" data-name="Pfad 15198" d="M341.995,585.133h-.345v-.242c-.007-.119-.045-.189-.116-.189-.133,0-.133.222-.13.485v.517c-.009.426.026.5.13.524.105-.005.105-.149.116-.323v-.2h.345v.2c0,.456-.13.7-.471.7-.3,0-.48-.233-.466-.813v-.7c0-.615.205-.775.466-.775.347,0,.471.317.471.64v.173Z" transform="translate(-341.056 -584.32)" fill="#2e3831"/>
4398            </g>
4399          </g>
4400          <g id="g2403_5" transform="translate(11.522 16.83)">
4401            <g id="path2405_5">
4402              <path id="Pfad_15199_5" data-name="Pfad 15199" d="M425.935,586.243v-1.29c0-.291-.025-.643-.5-.643-.431,0-.521.288-.521.7h.328c0-.2.026-.317.184-.317.089,0,.144.016.158.114a.314.314,0,0,1-.168.363.779.779,0,0,0-.51.778c0,.456.119.654.4.654.119,0,.224-.1.308-.277a.834.834,0,0,0,.019.222h.326A1.668,1.668,0,0,1,425.935,586.243Zm-.347-.613c-.005.212.026.589-.173.589-.123,0-.163-.114-.163-.282a.492.492,0,0,1,.055-.263c.095-.1.2-.193.282-.277Z" transform="translate(-424.91 -584.31)" fill="#2e3831" fill-rule="evenodd"/>
4403            </g>
4404          </g>
4405          <g id="g2407_5" transform="translate(12.717 16.83)">
4406            <g id="path2409_5">
4407              <path id="Pfad_15200_5" data-name="Pfad 15200" d="M461.451,585.837h.342c-.025.4.084.391.159.391.1,0,.168-.109.144-.247a.392.392,0,0,0-.168-.257l-.184-.189a.907.907,0,0,1-.287-.689.47.47,0,0,1,.51-.526c.326,0,.492.252.482.718h-.344c.007-.242-.039-.336-.161-.336-.08,0-.146.054-.146.179a.331.331,0,0,0,.13.252l.287.277a.823.823,0,0,1,.228.428c.035.382-.03.773-.512.773-.177,0-.519-.109-.48-.773h0Z" transform="translate(-461.448 -584.32)" fill="#2e3831"/>
4408            </g>
4409          </g>
4410          <g id="g2411_5" transform="translate(13.897 16.165)">
4411            <g id="path2413_5">
4412              <path id="Pfad_15201_5" data-name="Pfad 15201" d="M497.837,566.91h-.347v-2.9h.347v.943h0c.095-.258.238-.279.309-.279.2,0,.358.163.347.55v1.686h-.347v-1.493c0-.212-.014-.35-.144-.361s-.173.168-.168.407v1.447h0Z" transform="translate(-497.49 -564.01)" fill="#2e3831"/>
4413            </g>
4414          </g>
4415        </g>
4416      </g>
4417    </g>
4418  </g>
4419</svg>
4420        </div>
4421    </div>
4422</nav>
4423<script>
4424    'use strict';
4425
4426    const initMenuDesktop_6abf1e734d3e1 = () => {
4427        return {
4428            desktopPanelActiveId: null,
4429            open: false,
4430            setActiveMenu(menuNode) {
4431                Array.from(menuNode.querySelectorAll('a')).filter(link => {
4432                    return link.href === window.location.href.split('?')[0];
4433                }).map(item => {
4434                    item.classList.add('underline');
4435                    item.closest('li.level-0') &&
4436                    item.closest('li.level-0').querySelector('a.level-0').classList.add('underline');
4437                });
4438            },
4439            toggleMenu() {
4440                if (!this.open) {
4441                    this.open = true
4442                    document.body.classList.add('overflow-hidden');
4443                    this.$dispatch('menu-opened');
4444                    this.$nextTick(() => hyva.trapFocus(this.$refs['desktopMenuNavLinks']));
4445                } else {
4446                    this.closeMenu();
4447                }
4448            },
4449            closeMenu() {
4450                if (this.open) {
4451                    this.$nextTick(() => this.$refs['desktopMenuTrigger'].focus() || hyva.releaseFocus());
4452                }
4453                this.open = false
4454                this.desktopPanelActiveId = null
4455                document.body.classList.remove('overflow-hidden');
4456            },
4457            openSubcategory(index) {
4458                const menuNodeRef = document.querySelector('[data-child-id=' + index + ']')
4459                this.desktopPanelActiveId = this.desktopPanelActiveId === index ? 0 : index
4460                this.$nextTick(() => hyva.trapFocus(menuNodeRef))
4461            },
4462            backToMainCategories(index) {
4463                const menuNodeRef = document.querySelector('[data-child-id=' + index + ']')
4464                this.desktopPanelActiveId = 0
4465                this.$nextTick(() => {
4466                    hyva.trapFocus(this.$refs['desktopMenuNavLinks'])
4467                    menuNodeRef.querySelector('a').focus()
4468                })
4469            }
4470        }
4471    }
4472</script>
4472
4473
4474            <!--Search-->
4475            
4475<script>
4476    'use strict';
4477
4478    function initMiniSearch() {
4479        return {
4480            minSearchLength: 3,
4481                        suggestions: [],
4482            suggest() {
4483                const search = this.$refs.searchInput;
4484                if (search.value.length >= this.minSearchLength) {
4485                    search.setCustomValidity('');
4486                    search.reportValidity();
4487                    this.fetchSuggestions(search.value);
4488                } else {
4489                    this.suggestions = [];
4490                }
4491            },
4492            fetchSuggestions(term) {
4493                fetch(
4494                    window.BASE_URL + 'search/ajax/suggest?' + new URLSearchParams({q: term}),
4495                    {
4496                        headers: {
4497                            'X-Requested-With': 'XMLHttpRequest'
4498                        }
4499                    }
4500                )
4501                .then(response => response.json())
4502                .then(result => this.suggestions = result);
4503            },
4504                        search(term) {
4505                const search = this.$refs.searchInput;
4506                term = term || search.value;
4507                if (term.length < this.minSearchLength) {
4508                    search.setCustomValidity('Minimale\u0020L\u00E4nge\u0020der\u0020Suchanfrage\u0020ist\u00203');
4509                    search.reportValidity();
4510                } else {
4511                    search.setCustomValidity('');
4512                    search.value = term;
4513                    this.$refs.form.submit();
4514                }
4515            },
4516            focusElement(element) {
4517                if (element && element.nodeName === "DIV") {
4518                    element.focus();
4519                    return true;
4520                } else {
4521                    return false;
4522                }
4523            }
4524        }
4525    }
4526</script>
4526
4527<div class="hidden lg:block max-w-md w-full py-2 text-black relative" x-data="initMiniSearch()">
4528    <search title="Shop" role="search">
4529        <form
4530            id="search_mini_form"
4531            class="form minisearch flex border-b-3 border-black"
4532            action="https://www.strunz.com/catalogsearch/result/"
4533            method="get"
4534            @submit.prevent="search()"
4535            x-ref="form"
4536        >
4537            <label class="sr-only" for="search">
4538                Suche            </label>
4539            <input
4540                id="search"
4541                x-ref="searchInput"
4542                type="search"
4543                autocomplete="off"
4544                name="q"
4545                value=""
4546                placeholder="Produkte&#x20;suchen"
4547                maxlength="128"
4548                class="w-full border-0 pl-0 pt-0 pb-1 !ring-0 font-bold placeholder:text-gray"
4549                @search-open.window.debounce.10="$el.focus(); $el.select()"
4550                                    @focus.once="suggest"
4551                    @input.debounce.300="suggest"
4552                    @keydown.arrow-down.prevent="focusElement($root.querySelector('[tabindex]'))"
4553                            >
4554            <button
4555                type="submit"
4556                class="action search shrink-0 ml-3 mb-1"
4557                title="Suche"
4558                aria-label="Suche"
4559            >
4560                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16.207 16.207" class="w-5 h-5" aria-hidden="true">
4561  <g id="search" transform="translate(-69 -54)">
4562    <g id="Ellipse_864" data-name="Ellipse 864" transform="translate(69 54)" fill="none" stroke="#2e3831" stroke-width="2">
4563      <circle cx="7.5" cy="7.5" r="7.5" stroke="none"/>
4564      <circle cx="7.5" cy="7.5" r="6.5" fill="none"/>
4565    </g>
4566    <line id="Linie_439" data-name="Linie 439" x2="4" y2="4" transform="translate(80.5 65.5)" fill="none" stroke="#2e3831" stroke-width="2"/>
4567  </g>
4568</svg>
4569            </button>
4570            <input type="hidden" id="honey_spam_form" name="honey_spam_form" value="search_mini_form">
4571        </form>
4572    </search>
4573            <template x-if="suggestions.length > 0">
4574            <nav
4575                aria-label="Search&#x20;Suggestions"
4576                class="flex flex-col absolute w-full mt-4 bg-container-lighter px-4 py-2 shadow-3xl border border-lightgray rounded-lg overflow-hidden"
4577            >
4578                <template x-for="suggestion in suggestions">
4579                    <button
4580                        type="button"
4581                        class="flex justify-between text-base p-1 hover:bg-container"
4582                        @click="search(suggestion.title)"
4583                        @keydown.enter="search(suggestion.title)"
4584                        @keydown.arrow-up.prevent="focusElement($event.target.previousElementSibling) || $refs.searchInput.focus()"
4585                        @keydown.arrow-down.prevent="focusElement($event.target.nextElementSibling)"
4586                    >
4587                        <span x-text="suggestion.title"></span>
4588                        <span x-text="suggestion.num_results"></span>
4589                    </button>
4590                </template>
4591            </nav>
4592        </template>
4593    </div>
4594        </div>
4595
4596        <!--Logo-->
4597        <style>
4598    @media (max-width: 1023px) {
4599        #logo {
4600            width: 100px;
4601            height: 51.5px;
4602        }
4603    }
4604</style>
4605<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 print:hidden">
4606    <a
4607        class="flex items-center justify-center text-xl font-medium tracking-wide
4608            no-underline hover:no-underline font-title"
4609        href="https://www.strunz.com/"
4610        aria-label="Zur&#x20;Startseite"
4611    >
4612        <img
4613            id="logo"
4614            src="/media/logo/Logo.svg"
4615            alt="Icon&#x20;zeigt&#x20;Logo&#x20;von&#x20;FOREVER&#x20;YOUNG"
4616            width="200"            height="103"            loading="eager"
4617            class="p-2 lg:p-4"
4618        />
4619            </a>
4620</div>
4621
4622        <div class="flex items-center justify-end gap-2 flex-1 pl-4 lg:pl-16 md:-mr-1">
4623            <!--Compare Icon-->
4624            <a id="compare-link"
4625               class="relative inline-block rounded p-1 hover:bg-primary/10 outline-offset-2 invisible"
4626               :class="{ 'invisible': !(itemCount > 0) }"
4627               href="https://www.strunz.com/catalog/product_compare/index/"
4628               title="Produkte&#x20;vergleichen"
4629               x-data="initCompareHeader()"
4630               @private-content-loaded.window="receiveCompareData($event.detail.data)"
4631               :aria-label="`
4632                    Produkte&#x20;vergleichen,
4633                    ${itemCount > 1
4634                        ? hyva.str('\u00251\u0020Artikel', itemCount)
4635                        : hyva.str('\u00251\u0020Eintrag', itemCount)
4636                    }`"
4637            >
4638                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="md:h-6 md:w-6" width="28" height="28" aria-hidden="true">
4639  <path stroke-linecap="round" stroke-linejoin="round" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/>
4640</svg>
4641                <span
4642                    x-text="itemCount"
4643                    class="absolute -top-1.5 -right-1.5 h-5 px-2 py-1 rounded-full bg-yellow-500 text-white
4644                        text-xs font-semibold leading-none text-center uppercase tabular-nums"
4645                    aria-hidden="true"
4646                ></span>
4647            </a>
4648
4649            <!-- Additional Header Elements -->
4650            
4651            <!--Customer Icon & Dropdown-->
4652            
4653<div
4654        class="relative inline-block"
4655        x-data="initCustomerMenu"
4656        @keyup.escape="close"
4657        @click.outside="close"
4658>
4659    <button
4660            type="button"
4661            id="customer-menu"
4662            class="block rounded p-1 hover:bg-primary/10 outline-offset-2"
4663            @click="toggle"
4664            :aria-expanded="isOpen"
4665            aria-label="Mein&#x20;Konto"
4666            aria-haspopup="true"
4667    >
4668        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" class="icon-size hover:text-gray" aria-hidden="true">
4669  <g id="user-icon" transform="translate(-1750 -104)">
4670    <path id="Ellipse_859" data-name="Ellipse 859" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(1750 104)" fill="#2e3831"/>
4671    <path id="bx-user" d="M16.519,2a7.51,7.51,0,1,0,7.51,7.51A7.51,7.51,0,0,0,16.519,2Zm0,12.016A4.506,4.506,0,1,1,21.025,9.51,4.506,4.506,0,0,1,16.519,14.016ZM30.037,30.539v-1.5A10.514,10.514,0,0,0,19.523,18.523H13.514A10.514,10.514,0,0,0,3,29.037v1.5H6v-1.5a7.51,7.51,0,0,1,7.51-7.51h6.008a7.51,7.51,0,0,1,7.51,7.51v1.5Z" transform="translate(1758.48 112.73)" fill="#2e3831"/>
4672  </g>
4673</svg>
4674    </button>
4675    <nav
4676            class="
4677            absolute right-0 z-20 w-40 py-2 mt-2 -mr-4 px-1 overflow-auto origin-top-right rounded-sm
4678            shadow-lg sm:w-48 lg:mt-3 bg-container-lighter
4679        "
4680            x-cloak
4681            x-show="open"
4682            aria-labelledby="customer-menu"
4683    >
4684                    
4685<script>
4686    document.addEventListener('DOMContentLoaded', () => {
4687        const signInLink = document.getElementById('customer.header.sign.in.link');
4688        if (signInLink) {
4689            signInLink.addEventListener('click', () => {
4690                if (hyva.setCookie) {
4691                    hyva.setCookie(
4692                        'login_redirect',
4693                        window.location.href,
4694                        1
4695                    );
4696                }
4697            });
4698        }
4699    });
4700</script>
4700
4701
4702<a id="customer.header.sign.in.link"
4703   class="block px-4 py-2 lg:px-5 lg:py-2 hover:bg-gray-100"
4704   href="https://www.strunz.com/customer/account/index/"
4705   title="Anmelden"
4706>
4707    Anmelden</a>
4708
4709    <a id="customer.header.register.link"
4710       class="block px-4 py-2 lg:px-5 lg:py-2 hover:bg-gray-100"
4711       href="https://www.strunz.com/customer/account/create/"
4712       title="Ein&#x20;Konto&#x20;erstellen"
4713    >
4714        Ein Konto erstellen    </a>
4715            </nav>
4716</div>
4717
4718<script>
4719    function initCustomerMenu() {
4720        return {
4721            open: false,
4722            toggle() {
4723                this.open = !this.open;
4724            },
4725            close() {
4726                this.open = false;
4727            },
4728            isOpen() {
4729                return this.open ? 'true' : 'false';
4730            }
4731        };
4732    }
4733    window.addEventListener(
4734        'alpine:init',
4735        () => Alpine.data('initCustomerMenu', initCustomerMenu),
4736        {once: true}
4737    );
4738</script>
4738
4739
4740            <!--Cart Icon-->
4741                            <button
4742                            id="menu-cart-icon"
4743                class="relative inline-block rounded p-1 hover:bg-primary/10 outline-offset-2"
4744                x-ref="cartButton"
4745                :aria-disabled="isCartEmpty()"
4746                :aria-label="`
4747                    Mini-Warenkorb&#x20;ein-&#x2F;ausblenden,
4748                    ${isCartEmpty()
4749                        ? 'Warenkorb&#x20;ist&#x20;leer'
4750                        : cart.summary_count > 1
4751                            ? hyva.str('&#x25;1&#x20;Artikel', cart.summary_count)
4752                            : hyva.str('&#x25;1&#x20;Artikel', cart.summary_count)
4753                    }`"
4754                                    @click.prevent="() => {
4755                        $dispatch('toggle-cart', { isOpen: true })
4756                    }"
4757                    @toggle-cart.window="toggleCart($event)"
4758                    :aria-expanded="isCartOpen"
4759                    aria-haspopup="dialog"
4760                            >
4761                    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" class="icon-size hover:text-gray" aria-hidden="true">
4762  <g id="cart-icon-single" transform="translate(-1820 -104)">
4763    <g id="Gruppe_14020" data-name="Gruppe 14020">
4764      <g id="Ellipse_856" data-name="Ellipse 856" transform="translate(1820 104)" fill="none" stroke="#2e3831" stroke-width="3">
4765        <circle cx="25" cy="25" r="25" stroke="none"/>
4766        <circle cx="25" cy="25" r="23.5" fill="none"/>
4767      </g>
4768      <g id="bx-cart-alt" transform="translate(1828 116.012)">
4769        <path id="Pfad_13978" data-name="Pfad 13978" d="M27.492,4H2V6.687H5.086l4.4,12.075a4.025,4.025,0,0,0,3.784,2.683H24.809V18.762H13.27a1.342,1.342,0,0,1-1.261-.886l-.617-1.8H23.843a2.683,2.683,0,0,0,2.576-1.945l2.415-8.426A1.342,1.342,0,0,0,27.854,4a1.127,1.127,0,0,0-.362,0ZM23.8,13.4H10.386L7.944,6.687H25.708Z" transform="translate(0 0)" fill="#2e3831"/>
4770        <circle id="Ellipse_857" data-name="Ellipse 857" cx="2.013" cy="2.013" r="2.013" transform="translate(11.392 22.787)" fill="#2e3831"/>
4771        <circle id="Ellipse_858" data-name="Ellipse 858" cx="2.013" cy="2.013" r="2.013" transform="translate(19.442 22.787)" fill="#2e3831"/>
4772      </g>
4773    </g>
4774  </g>
4775</svg>
4776                <span
4777                    x-text="cart.summary_count"
4778                    x-show="!isCartEmpty()"
4779                    x-cloak
4780                    class="absolute bottom-1 -left-0.5 w-4 lg:w-5 h-4 lg:h-5 rounded-full bg-black text-white
4781                        text-body-sm !font-bold !leading-normal text-center uppercase tabular-nums"
4782                    aria-hidden="true"
4783                ></span>
4784                            </button>
4785                    </div>
4786    </div>
4787
4788    <!--Cart Drawer-->
4789    
4789<script>
4790    function initCartDrawer() {
4791        return {
4792            open: false,
4793            isLoading: false,
4794            cart: {},
4795            maxItemsToDisplay: 10,
4796            itemsCount: 0,
4797            getData(data) {
4798                if (data.cart) {
4799                    this.cart = data.cart;
4800                    this.itemsCount = data.cart.summary_count || 0;                     this.setCartItems();
4801                }
4802                this.isLoading = false;
4803            },
4804            cartItems: [],
4805            getItemCountTitle() {
4806                return hyva.strf('\u00250\u0020von\u0020\u00251\u0020Produkten\u0020im\u0020Warenkorb\u0020angezeigt', this.maxItemsToDisplay, this.itemsCount)
4807            },
4808            setCartItems() {
4809                this.cartItems = this.cart.items && this.cart.items.sort((a, b) => b.item_id - a.item_id) || [];
4810
4811                if (this.maxItemsToDisplay > 0) {
4812                    this.cartItems = this.cartItems.slice(0, parseInt(this.maxItemsToDisplay, 10));
4813                }
4814            },
4815            deleteItemFromCart(itemId) {
4816                this.isLoading = true;
4817
4818                const itemData = this.cart.items.filter((item) => item['item_id'] === itemId);
4819                const formKey = hyva.getFormKey();
4820                const postUrl = BASE_URL + 'checkout/sidebar/removeItem/';
4821
4822                fetch(postUrl, {
4823                    "headers": {
4824                        "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
4825                    },
4826                    "body": "form_key=" + formKey + "&item_id=" + itemId,
4827                    "method": "POST",
4828                    "mode": "cors",
4829                    "credentials": "include"
4830                }).then(response => {
4831                    if (response.redirected) {
4832                        window.location.href = response.url;
4833                    } else if (response.ok) {
4834                        return response.json();
4835                    } else {
4836                        window.dispatchMessages && window.dispatchMessages([{
4837                            type: 'warning',
4838                            text: 'Der\u0020Artikel\u0020konnte\u0020nicht\u0020aus\u0020dem\u0020Angebot\u0020entfernt\u0020werden.'
4839                        }]);
4840                        this.isLoading = false;
4841                    }
4842                }).then(result => {
4843                    window.dispatchMessages && window.dispatchMessages([{
4844                        type: result.success ? 'success' : 'error',
4845                        text: result.success
4846                            ? 'Sie\u0020haben\u0020die\u0020Artikel\u0020entfernt.'
4847                            : result.error_message
4848                    }], result.success ? 5000 : 0);
4849
4850                    if (result.success && itemData) {
4851                        window.dispatchEvent(new CustomEvent('cart-item-removed', { detail: itemData }));
4852                    }
4853
4854                    window.dispatchEvent(new CustomEvent('reload-customer-section-data'));
4855                });
4856            },
4857            scrollLock(use = true) {
4858                document.body.style.overflow = use ? "hidden" : "";
4859            },
4860            toggleCartDrawer(event) {
4861                if (event.detail && event.detail.isOpen !== undefined) {
4862                    if (event.detail.isOpen) {
4863                        this.openCartDrawer();
4864                    } else {
4865                        this.open = false;
4866                        this.scrollLock(false);
4867                        this.$refs && this.$refs.cartDialogContent && hyva.releaseFocus(this.$refs.cartDialogContent);
4868                    }
4869                } else {
4870                                        this.openCartDrawer()
4871                }
4872            },
4873            openCartDrawer() {
4874                this.open = true;
4875                this.scrollLock(true);
4876                this.$nextTick(() => {
4877                    this.$refs && this.$refs.cartDialogContent && hyva.trapFocus(this.$refs.cartDialogContent)
4878                })
4879            },
4880            closeCartDrawer() {
4881                this.$dispatch('toggle-cart', { isOpen: false })
4882            },
4883            getSectionDataExtraActions() {
4884                if (!this.cart.extra_actions) {
4885                    return '';
4886                }
4887
4888                const contentNode = document.createElement('div');
4889                contentNode.innerHTML = this.cart.extra_actions;
4890
4891                hyva.activateScripts(contentNode);
4892
4893                return contentNode.innerHTML;
4894            },
4895            updateCartItemQty(itemId, qty) {
4896                this.isLoading = true;
4897
4898                const formKey = hyva.getFormKey();
4899                const postUrl = BASE_URL + 'checkout/sidebar/updateItemQty/';
4900
4901                fetch(postUrl, {
4902                    "headers": {
4903                        "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
4904                    },
4905                    "body": "form_key=" + formKey + "&item_id=" + itemId + "&item_qty=" + qty,
4906                    "method": "POST",
4907                    "mode": "cors",
4908                    "credentials": "include"
4909                }).then(response => {
4910                    if (response.redirected) {
4911                        window.location.href = response.url;
4912                    } else if (response.ok) {
4913                        return response.json();
4914                    } else {
4915                        window.dispatchMessages && window.dispatchMessages([{
4916                            type: 'warning',
4917                            text: 'Could\u0020not\u0020update\u0020item\u0020quantity.'
4918                        }], 5000);
4919                        this.isLoading = false;
4920                    }
4921                }).then(result => {
4922                    if (!result) return;
4923                    if (result.success) {
4924                        return new Promise((resolve) => {
4925                            window.dispatchEvent(new CustomEvent('reload-customer-section-data'));
4926                            this.$nextTick(() => {
4927                                this.isLoading = false;
4928                            });
4929                            resolve();
4930                        });
4931                    } else {
4932                        window.dispatchMessages && window.dispatchMessages([{
4933                            type: result.error_message ? 'error' : 'warning',
4934                            text: result.error_message ? result.error_message : 'Could\u0020not\u0020update\u0020item\u0020quantity.'
4935                        }], 5000);
4936                        this.isLoading = false;
4937                    }
4938                });
4939            }
4940        }
4941    }
4942</script>
4942
4943<section x-cloak
4944         x-show="cart"
4945         id="cart-drawer"
4946         x-data="initCartDrawer()"
4947         @private-content-loaded.window="getData($event.detail.data)"
4948         @toggle-cart.window="toggleCartDrawer($event)"
4949         @keydown.escape="closeCartDrawer"
4950>
4951    <div role="dialog"
4952         aria-labelledby="cart-drawer-title"
4953         aria-modal="true"
4954         :aria-hidden="!open"
4955         class="fixed inset-y-0 right-0 z-30 flex max-w-full">
4956        <div class="backdrop"
4957             x-show="open"
4958             x-transition:enter="ease-in-out duration-500"
4959             x-transition:enter-start="opacity-0"
4960             x-transition:enter-end="opacity-100"
4961             x-transition:leave="ease-in-out duration-500"
4962             x-transition:leave-start="opacity-100"
4963             x-transition:leave-end="opacity-0"
4964             role="button"
4965             @click="closeCartDrawer"
4966             aria-label="Mini-Warenkorb&#x20;schlie&#xDF;en"></div>
4967        <div class="relative w-screen max-w-md shadow-2xl"
4968             x-show="open"
4969             x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"
4970             x-transition:enter-start="translate-x-full"
4971             x-transition:enter-end="translate-x-0"
4972             x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"
4973             x-transition:leave-start="translate-x-0"
4974             x-transition:leave-end="translate-x-full"
4975             x-ref="cartDialogContent"
4976             role="region"
4977             :tabindex="open ? 0 : -1"
4978             aria-label="Mein&#x20;Warenkorb"
4979
4980        >
4981            <div class="flex flex-col h-full max-h-screen bg-container text-black shadow-xl">
4982                
4983                <header class="relative px-4 py-6 sm:px-6">
4984                    <p id="cart-drawer-title" class="h3">
4985                        <span>Ihr Warenkorb</span>
4986                        <span class="items-total text-body-sm text-white text-center inline-block w-5 h-5 bg-black rounded-full leading-5 lg:leading-snug font-bold align-text-top"
4987                              x-text="itemsCount">
4988                        </span>
4989                    </p>
4990                </header>
4991
4992                <div id="free-shipping-info-container"
4993                     class="px-4 sm:px-6"
4994                     x-data="{
4995                         reloadInfo() {
4996                             fetch('https\u003A\u002F\u002Fwww.strunz.com\u002Ffreeshippinginfo\u002Finfo\u002Fajax\u002F')
4997                                 .then(response => response.text())
4998                                 .then(html => this.$el.innerHTML = html);
4999                         }
5000                     }"
5001                     x-init="reloadInfo()"
5002                     @reload-customer-section-data.window="reloadInfo()">
5003                                    </div>
5004
5005                <template x-if="!itemsCount">
5006                    <div class="relative px-4 py-6 border-bs sm:px-6 border-container">
5007                        Warenkorb ist leer                    </div>
5008                </template>
5009
5010                
5011                <template x-if="itemsCount">
5012                    <div class="relative grid px-1 py-3 sm:px-3 border-b-2 border-lightgray overflow-y-auto overscroll-y-contain">
5013                        <template x-for="item in cartItems">
5014                            <div class="flex items-start px-3 py-6 first:pt-3 last:pb-3 space-x-4 border-b-2 border-lightgray last:border-b-0">
5015                                <template x-if="item.product_has_url && item.is_visible_in_site_visibility">
5016                                    <a :href="item.product_url"
5017                                       class="w-1/4 !ml-0"
5018                                       :aria-label="hyva.strf('Produkt\u0020\u0022\u00250\u0022', item.product_name)"
5019                                    >
5020                                        <img
5021                                            :src="item.product_image.src"
5022                                            :width="item.product_image.width"
5023                                            :height="item.product_image.height"
5024                                            loading="lazy"
5025                                            :alt="item.product_name"
5026                                        />
5027                                    </a>
5028                                </template>
5029                                <template x-if="!item.product_has_url || !item.is_visible_in_site_visibility">
5030                                    <div class="w-1/4 !ml-0">
5031                                        <img
5032                                            :src="item.product_image.src"
5033                                            :width="item.product_image.width"
5034                                            :height="item.product_image.height"
5035                                            loading="lazy"
5036                                            :alt="item.product_name"
5037                                        />
5038                                    </div>
5039                                </template>
5040                                <div class="w-2/4">
5041                                    <div class="mb-4">
5042                                        <template x-if="item.product_brand && (item.product_brand.toLowerCase() === 'forever young' || item.product_brand.toLowerCase() === 'for you')">
5043                                            <p class="text-md mb-1">
5044                                                <span x-html="item.product_brand"></span>
5045                                            </p>
5046                                        </template>
5047                                        <p class="font-bold">
5048                                            <span x-html="item.product_name"></span>
5049                                        </p>
5050                                    </div>
5051                                    <template x-if="item.options">
5052                                        <div class="mb-4 space-y-2">
5053                                            <template x-for="option in item.options">
5054                                                <div>
5055                                                    <template x-if="item.product_type !== 'bundle'">
5056                                                        <p class="font-semibold" x-text="option.label + ':'"></p>
5057                                                    </template>
5058                                                    <p class="text-md font-medium" x-html="option.value"></p>
5059                                                </div>
5060                                            </template>
5061                                        </div>
5062                                    </template>
5063
5064                                    <p class="font-bold mb-0"><span x-html="item.product_price"></span></p>
5065                                    <div class="tax-base-price-container"
5066                                         x-init="
5067                                            fetch('https\u003A\u002F\u002Fwww.strunz.com\u002Fgermanlaw\u002Fproduct\u002Ftaxandbaseprice\u002F?product_id=' + item.product_id)
5068                                            .then(response => response.text())
5069                                            .then(html => $el.innerHTML = html)
5070                                         ">
5071                                    </div>
5072                                </div>
5073                                <div class="flex flex-col items-end justify-between h-full">
5074                                    <button type="button"
5075                                            class="text-body-sm"
5076                                            @click="deleteItemFromCart(item.item_id)"
5077                                            :aria-label="hyva.strf('Produkt\u0020\u0022\u00250\u0022\u0020aus\u0020dem\u0020Warenkorb\u0020entfernen', item.product_name)"
5078                                    >
5079                                        Entfernen                                    </button>
5080                                    <div>
5081                                        <label for="qty[{{ item.item_id }}]" class="sr-only">Menge</label>
5082                                        <div class="quantity-control flex items-center border-3 border-primary p-1 rounded-xl">
5083                                            <button type="button"
5084                                                    class="quantity-btn minus-btn px-1 flex items-center justify-center"
5085                                                    :class="{'invisible' : item.qty === 1}"
5086                                                    @click="item.qty > 1 ? (item.qty--, updateCartItemQty(item.item_id, item.qty)) : null"
5087                                                    aria-label="Menge verringern">
5088                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" style="color: black" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
5089                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M20 12H4"/>
5090                                                </svg>
5091                                            </button>
5092                                            <input name="qty[{{ item.item_id }}]"
5093                                                   id="qty[{{ item.item_id }}]"
5094                                                   min="1"
5095                                                   max="10000"
5096                                                   type="number"
5097                                                   inputmode="numeric"
5098                                                   x-model.number="item.qty"
5099                                                   @input="if (/^[0-9]{0,5}$/.test($event.target.value)) updateCartItemQty(item.item_id, item.qty)"
5100                                                   class="form-input p-1 w-8 min-h-0 leading-none text-center font-medium border-0 bg-transparent appearance-none [-moz-appearance:textfield] focus:ring-0 invalid:ring-2 invalid:ring-red-500 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
5101                                            />
5102                                            <button type="button"
5103                                                    class="quantity-btn plus-btn px-1 flex items-center justify-center"
5104                                                    @click="item.qty < 10000 ? (item.qty++, updateCartItemQty(item.item_id, item.qty)) : null"
5105                                                    aria-label="Menge erhöhen">
5106                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3" style="color: black" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
5107                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
5108                                                </svg>
5109                                            </button>
5110                                        </div>
5111                                    </div>
5112                                </div>
5113                            </div>
5114                        </template>
5115                    </div>
5116                </template>
5117
5118                <template x-if="itemsCount">
5119                    <div class="border-t">
5120                        
5121                        <div class="relative grid py-3 px-1 sm:px-3">
5122                            <div class="w-full p-3 transition duration-150 ease-in-out rounded-lg">
5123                                <div class="flex justify-between font-bold">
5124                                    <span>Zwischensumme</span>
5125                                    <span x-html="cart.subtotal"></span>
5126                                </div>
5127                                <div class="text-md mt-2">
5128                                    <span>Inkl. MwSt., zzgl. Versand</span>
5129                                </div>
5130                                <div class="text-md mt-4">
5131                                    <span>Versandkosten und Rabatte werden im Checkout berechnet.</span>
5132                                </div>
5133                            </div>
5134                            <div class="w-full px-3 flex flex-wrap items-center gap-4 transition duration-150 ease-in-out rounded-lg"
5135                                 x-data="{
5136                                    checkoutButtonData: false,
5137                                    minimumOrderMessage: '',
5138                                    updateCheckoutInfo() {
5139                                        fetch('https\u003A\u002F\u002Fwww.strunz.com\u002Fminimumorder\u002Fmessage\u002Fajax\u002F')
5140                                            .then(response => response.json())
5141                                            .then(data => {
5142                                                this.checkoutButtonData = data.isCheckoutDisabled;
5143                                                this.minimumOrderMessage = this.checkoutButtonData === false ? '' : data.message;
5144                                            });
5145                                    }
5146                                 }"
5147                                 x-init="updateCheckoutInfo()"
5148                                 @reload-customer-section-data.window="updateCheckoutInfo()">
5149                                <a @click.prevent.stop="closeCartDrawer; $dispatch('toggle-authentication',
5150                                    {url: 'https://www.strunz.com/checkout/'});"
5151                                   href="https://www.strunz.com/checkout/"
5152                                   class="inline-flex btn btn-secondary"
5153                                   :class="{ 'disabled' : checkoutButtonData }"
5154                                >
5155                                    Zur Kasse                                </a>
5156                                <span>oder</span>
5157                                <a href="https://www.strunz.com/checkout/cart/"
5158                                   class="underline whitespace-nowrap"
5159                                >
5160                                    Zum Warenkorb                                </a>
5161                                <div class="minimum-order-message-container w-full">
5162                                    <span class="text-md text-red-500" x-html="minimumOrderMessage"></span>
5163                                </div>
5164                            </div>
5165                            <div x-html="getSectionDataExtraActions()"></div>
5166                                                    </div>
5167                    </div>
5168                </template>
5169
5170                            </div>
5171
5172            <button
5173                type="button"
5174                @click="closeCartDrawer"
5175                aria-label="Mini-Warenkorb&#x20;schlie&#xDF;en"
5176                class="absolute top-0 right-2 p-4 mt-2 transition-colors"
5177            >
5178                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 50 50" class="w-8 h-8 hover:text-gray" aria-hidden="true">
5179  <g id="menu-icon-close" transform="translate(-50 -104)">
5180    <path id="Ellipse_854" data-name="Ellipse 854" d="M25,3a22.007,22.007,0,0,0-8.562,42.272A22.006,22.006,0,0,0,33.562,4.728,21.859,21.859,0,0,0,25,3m0-3A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(50 104)" fill="#2e3831"/>
5181    <path id="Linie_412" data-name="Linie 412" d="M24.671,1.5H0A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H24.672a1.5,1.5,0,0,1,1.5,1.5A1.5,1.5,0,0,1,24.671,1.5Z" transform="translate(66.277 137.722) rotate(-45)" fill="#2e3831"/>
5182    <path id="Linie_413" data-name="Linie 413" d="M0,1.5A1.5,1.5,0,0,1-1.5,0,1.5,1.5,0,0,1,0-1.5H24.671a1.5,1.5,0,0,1,1.5,1.5,1.5,1.5,0,0,1-1.5,1.5Z" transform="translate(66.278 120.276) rotate(45)" fill="#2e3831"/>
5183  </g>
5184</svg>
5185            </button>
5186        </div>
5187        <div
5188    class="z-50 fixed inset-0 flex justify-center items-center bg-white/70 select-none"
5189    x-show="isLoading"
5190    x-cloak
5191    x-transition.opacity.duration.200ms
5192>
5193    <div class="flex items-center">
5194        <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" class="animate-spin" aria-hidden="true">
5195    <circle style="opacity: .3;" cx="12" cy="12" r="10"/>
5196    <path fill="none" stroke-width="2" d="M12,2 a10,10 0 0,1 10,10"/>
5197</svg>
5198        <div class="ml-10 text-xl">
5199            Laden...        </div>
5200    </div>
5201</div>
5202    </div>
5203
5204</section>
5205
5206    <!--Authentication Pop-Up-->
5207    
5207<script>
5208    function initAuthentication() {
5209        return {
5210            open: false,
5211            close() {
5212                this.open = false;
5213            },
5214            forceAuthentication: false,
5215            checkoutUrl: 'https://www.strunz.com/checkout/index/',
5216            errors: 0,
5217            hasCaptchaToken: 0,
5218            displayErrorMessage: false,
5219            errorMessages: [],
5220            setErrorMessages(message) {
5221                this.errorMessages = [message];
5222                this.displayErrorMessage = true;
5223            },
5224            submitForm() {
5225                // Do not rename $form, the variable is expected to be declared in the recaptcha output
5226                const $form = document.querySelector('#login-form');
5227                    if (!this.hasCaptchaToken) {
5228        this.errors = 1;
5229
5230
5231        const executeGreCaptcha = () => {
5232            grecaptcha.ready(() => {
5233                grecaptcha.execute(
5234                    '6LdfCeEUAAAAAMJTMcG9jmbTYF72aEWJdDEkxuxV',
5235                    {action: 'submit'}
5236                ).then((token) => {
5237                    const tokenElement = $form['g\u002Drecaptcha\u002Dresponse'];
5238
5239                    if (tokenElement && token && token.length > 0) {
5240                        $form['g\u002Drecaptcha\u002Dresponse'].value = token;
5241                        this.errors = 0;
5242                        this.hasCaptchaToken = 1;
5243                        (this.submitForm || $form.submit).call(this);
5244                    } else {
5245                        this.errors = 1;
5246                        const error = tokenElement
5247                            ? 'ReCaptcha\u0020validation\u0020failed,\u0020please\u0020try\u0020again'
5248                            : 'ReCaptcha\u0020token\u0020element\u0020is\u0020missing.\u0020Please\u0020refresh\u0020the\u0020page\u0020and\u0020trying\u0020again.';
5249                        if (this.setErrorMessages) {
5250                            this.setErrorMessages([error])
5251                            this.displayErrorMessage = true;
5252                        } else {
5253                            window.dispatchMessages && window.dispatchMessages([{type: "error", text: error}], 5000);
5254                        }
5255                    }
5256                }).catch(exception => {
5257                    console.error(exception || `An unknown error occurred during ReCaptcha validation. Are the tokens and the domain correctly set up in the Google console?`)
5258                });
5259            })
5260        }
5261
5262        if (window.grecaptcha) {
5263            executeGreCaptcha();
5264        } else {
5265            const recaptchaUrl = "https://www.google.com/recaptcha/api.js?render=6LdfCeEUAAAAAMJTMcG9jmbTYF72aEWJdDEkxuxV";
5266            const script = document.createElement('script');
5267            script.setAttribute('type', 'text/javascript');
5268            script.setAttribute('src', recaptchaUrl);
5269            document.head.appendChild(script);
5270
5271            script.addEventListener("load", executeGreCaptcha, false);
5272        }
5273    }
5274
5275                if (this.errors === 0) {
5276                    this.dispatchLoginRequest($form);
5277                }
5278            },
5279            onPrivateContentLoaded() {
5280                const data = this.$event.detail.data;
5281                const isLoggedIn = data.customer && data.customer.firstname;
5282                if (data.cart && !isLoggedIn) {
5283                    this.forceAuthentication = !data.cart.isGuestCheckoutAllowed;
5284                }
5285            },
5286            redirectIfAuthenticated() {
5287                const event = this.$event;
5288                this.open = this.forceAuthentication;
5289
5290                if (event.detail && event.detail.url) {
5291                    this.checkoutUrl = event.detail.url;
5292                }
5293                if (!this.forceAuthentication) {
5294                    window.location.href = this.checkoutUrl;
5295                }
5296            },
5297            resetErrors() {
5298                this.errors = 0;
5299            },
5300            dispatchLoginRequest(form) {
5301                this.isLoading = true;
5302                const username = this.$refs['customer-email'].value;
5303                const password = this.$refs['customer-password'].value;
5304                const formKey = hyva.getFormKey();
5305                const bodyFields = {
5306                    'username': username,
5307                    'password': password,
5308                    'formKey': formKey
5309                };
5310                                const fieldName = 'g\u002Drecaptcha\u002Dresponse';
5311                const recaptchaField = fieldName && form[fieldName];
5312                if (recaptchaField) {
5313                    bodyFields[fieldName] = recaptchaField.value;
5314                }
5315                fetch('https://www.strunz.com/customer/ajax/login/', {
5316                        method: 'POST',
5317                        headers: {
5318                            'Content-Type': 'application/json',
5319                            'X-Requested-With': 'XMLHttpRequest'
5320                        },
5321                        body: JSON.stringify(bodyFields)
5322                    }
5323                ).then(response => {
5324                        return response.json()
5325                    }
5326                ).then(data => {
5327                    this.isLoading = false;
5328                    if (data.errors) {
5329                        this.setErrorMessages(data.message);
5330                        this.errors = 1;
5331                        this.hasCaptchaToken = 0;
5332                    } else {
5333                        window.location.href = this.checkoutUrl;
5334                    }
5335                });
5336            },
5337            eventListeners: {
5338                ['@private-content-loaded.window']() {
5339                    this.onPrivateContentLoaded();
5340                },
5341                ['@toggle-authentication.window']() {
5342                    this.redirectIfAuthenticated();
5343                },
5344                ['@pageshow.window'](event) {
5345                    if (event.persisted) {
5346                        this.close();
5347                    };
5348                }
5349            }
5350        }
5351    }
5352
5353    window.addEventListener('alpine:init', () => Alpine.data('initAuthentication', initAuthentication), {once: true})
5354</script>
5354
5355
5356<dialog
5357    id="authentication-popup"
5358    aria-labelledby="cart-drawer-title"
5359    class="open:flex flex-col transition ease-out duration-300 motion-reduce:duration-0 p-0"
5360    x-data="initAuthentication"
5361    x-bind="eventListeners"
5362    x-show="open"
5363    x-htmldialog="close"
5364    closeby="any"
5365    x-transition
5366>
5367    <div class="pt-8 px-8">
5368        <div class="flex gap-2 justify-between items-center">
5369            <p class="text-xl">
5370                <strong>Kundenlogin</strong>
5371            </p>
5372            <button
5373                type="button"
5374                class="btn bg-transparent border-transparent p-2"
5375                @click="close"
5376                aria-label="Panel&#x20;schlie&#xDF;en"
5377            >
5378                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
5379            </button>
5380        </div>
5381
5382        <div class="message error" x-show="errors" x-cloak>
5383            <template x-for="(message, index) in errorMessages" :key="index">
5384                <div>
5385                    <template x-if="message">
5386                        <span x-html="message"></span>
5387                    </template>
5388                </div>
5389            </template>
5390        </div>
5391    </div>
5392
5393    <div class="block-customer-login p-8">
5394        <p id="authenticate-customer-login" class="text-lg mb-2">
5395            <strong>Auschecken über Ihr Konto</strong>
5396        </p>
5397
5398        <form
5399            id="login-form"
5400            class="form form-login"
5401            method="post"
5402            @submit.prevent="submitForm"
5403        >
5404            <div class="control">
5405    <input type="hidden"
5406           value=""
5407           name="g-recaptcha-response"
5408    >
5409</div>
5410            <input name="context" type="hidden" value="checkout">
5411
5412            <div class="flex flex-col gap-4">
5413                <div class="field email required">
5414                    <label for="form-login-username">
5415                        <span>E-Mail-Adresse</span>
5416                    </label>
5417                    <div class="control">
5418                        <input
5419                            id="form-login-username"
5420                            name="username"
5421                            type="email"
5422                            class="form-input w-full"
5423                            required
5424                            autocomplete="off"
5425                            x-ref="customer-email"
5426                            @change="resetErrors"
5427                        >
5428                    </div>
5429                </div>
5430                <div class="field password required">
5431                    <label for="form-login-password">
5432                        <span>Passwort</span>
5433                    </label>
5434                    <div class="control">
5435                        <input
5436                            id="form-login-password"
5437                            name="password"
5438                            type="password"
5439                            class="form-input w-full"
5440                            required
5441                            autocomplete="off"
5442                            x-ref="customer-password"
5443                            @change="resetErrors"
5444                        >
5445                    </div>
5446                </div>
5447            </div>
5448
5449            <div class="actions-toolbar">
5450                <button
5451                    type="submit"
5452                                        class="btn btn-primary"
5453                >
5454                    Anmelden                </button>
5455                <a
5456                    href="https://www.strunz.com/customer/account/forgotpassword/"
5457                    class="underline hover:no-underline"
5458                >
5459                    Passwort vergessen?                </a>
5460            </div>
5461        </form>
5462        <p class="my-4 text-sm">
5463    <em>
5464        Dieses Formular ist durch reCAPTCHA geschützt – es gelten die <a class="underline" href="https://policies.google.com/privacy" target="_blank" rel="noopener">Google-Datenschutzrichtlinie</a> und die <a class="underline" href="https://policies.google.com/terms" target="_blank" rel="noopener">Nutzungsbedingungen</a>.    </em>
5465</p>
5466    </div>
5467    <div class="block-new-customer p-8 border-t border-gray-300">
5468        <p id="authenticate-new-customer" class="text-lg mb-2">
5469            <strong>Als Neukunde auschecken</strong>
5470        </p>
5471
5472        <div class="block-content">
5473            <p class="mb-1">
5474                Ein Konto zu erstellen hat viele Vorteile:            </p>
5475            <ul class="list-disc pl-5">
5476                <li> Bestellungen und Sendungen verfolgen</li>
5477                <li> Alte Bestellungen einsehen</li>
5478                <li> schneller zur Kasse gehen</li>
5479            </ul>
5480            <div class="actions-toolbar mt-6 mb-2">
5481                <a href="https://www.strunz.com/customer/account/create/"
5482                    class="inline-flex btn btn-primary">
5483                    Ein Konto erstellen                </a>
5484            </div>
5485        </div>
5486    </div>
5487</dialog>
5488</div>
5489</header><main id="maincontent" class="page-main"><div id="contentarea" tabindex="-1"></div>
5490<div class="page messages">
5490<script>
5491        function initMessages() {
5492        "use strict";
5493        return {
5494            messages: window.mageMessages || [],
5495            isEmpty() {
5496                return this.messages.reduce(
5497                    function (isEmpty, message) {
5498                        return isEmpty && message === undefined
5499                    }, true
5500                )
5501            },
5502            hasMessages() {
5503                return !this.isEmpty();
5504            },
5505            hasMessage() {
5506                return !!this.message;
5507            },
5508            removeMessage() {
5509                this.messages[this.index] = undefined;
5510            },
5511            addMessages(messages, hideAfter) {
5512                messages.map((message) => {
5513                    this.messages = this.messages.concat(message);
5514                    if (hideAfter === undefined && message.type === 'success' && window.defaultSuccessMessageTimeout) {
5515                        hideAfter = window.defaultSuccessMessageTimeout;
5516                    }
5517                    if (hideAfter) {
5518                        this.setHideTimeOut(this.messages.length -1, hideAfter);
5519                    }
5520                });
5521            },
5522            setHideTimeOut(messageIndex, hideAfter) {
5523                setTimeout((messageIndex) => {
5524                    this.messages[messageIndex] = undefined;
5525                }, hideAfter, messageIndex);
5526            },
5527            eventListeners: {
5528                ['@messages-loaded.window'](event) {
5529                    this.addMessages(event.detail.messages, event.detail.hideAfter)
5530                },
5531                ['@private-content-loaded.window'](event) {
5532                    const data = event.detail.data;
5533                    if (
5534                        data.messages &&
5535                        data.messages.messages &&
5536                        data.messages.messages.length
5537                    ) {
5538                        this.addMessages(data.messages.messages);
5539                    }
5540                },
5541                ['@clear-messages.window']() {
5542                    this.messages = [];
5543                },
5544                ['@pageshow.window'](event) {
5545                    if (event.persisted) {
5546                        this.messages = [];
5547                    };
5548                }
5549            },
5550            getMessageUiId() {
5551                return 'message-' + this.message.type;
5552            }
5553        }
5554    }
5555
5556    window.addEventListener('alpine:init', () => Alpine.data('initMessages', initMessages), {once: true})
5557</script>
5557
5558<section id="messages"
5559         x-data="initMessages"
5560         x-bind="eventListeners"
5561         role="alert"
5562>
5563    <template x-if="hasMessages">
5564        <div class="w-full">
5565            <div class="messages container mx-auto py-3">
5566                <template x-for="(message, index) in messages" :key="index">
5567                    <div>
5568                        <template x-if="hasMessage">
5569                            <div class="message"
5570                                 :class="message.type"
5571                                 :ui-id="getMessageUiId"
5572                            >
5573                                <span x-html="message.text"></span>
5574                                <button
5575                                    type="button"
5576                                    class="text-gray-600 hover:text-black"
5577                                    aria-label="Nachricht schließen"
5578                                    @click.prevent="removeMessage"
5579                                >
5580                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="stroke-current" width="18" height="18" aria-hidden="true">
5581  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
5582</svg>
5583                                </button>
5584                            </div>
5585                        </template>
5586                    </div>
5587                </template>
5588            </div>
5589        </div>
5590    </template>
5591</section>
5592</div><div class="container&#x20;flex&#x20;flex-col&#x20;md&#x3A;flex-row&#x20;flex-wrap&#x20;mt-4&#x20;mb-6">
5593    <h1 class="page-title title-font"
5594        >
5595        <span class="base" data-ui-id="page-title-wrapper" >Neues Kundenkonto anlegen</span>    </h1>
5596    </div>
5597<div class="columns"><div class="column main">
5597<script nonce="a3oyMnlpMGdmdXIyZWdmazI1enVmOTZtd3FpZmt0dmM=">
5598    var feedId = getUrlParam('ff'),
5599        product = getUrlParam('fp'),
5600        currentDate = new Date(),
5601        session = getCookie('feed_session');
5602
5603    if (!session) {
5604        session = '' + Math.floor(currentDate.getTime() / 1000) + Math.floor(Math.random() * 10000001);
5605    }
5606
5607    if (session && feedId > 0 && product > 0) {
5608        setCookie('feed_session', session, {expires: 365, path: '/'});
5609        setCookie('feed_id', feedId, 365);
5610
5611        var xhr = new XMLHttpRequest(),
5612            baseUrl = 'https://www.strunz.com/',
5613            url = BASE_URL + '?rnd=' + Math.floor(Math.random() * 10000001) + "&feed=" + feedId + "&session=" + session + "&product=" + product;
5614
5615        xhr.open('GET', url, true);
5616        xhr.setRequestHeader('Content-Type', 'application/json');
5617        xhr.send();
5618    }
5619
5620    function getUrlParam(name) {
5621        let results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
5622
5623        if (results === null) {
5624            return '';
5625        } else {
5626            return results[1] || 0;
5627        }
5628    }
5629
5630    function getCookie(cookieName) {
5631        var name = cookieName + "=",
5632            decodedCookie = decodeURIComponent(document.cookie),
5633            cookieArray = decodedCookie.split(';');
5634
5635        for (var i = 0; i < cookieArray.length; i++) {
5636            var cookie = cookieArray[i].trim();
5637            if (cookie.indexOf(name) === 0) {
5638                return cookie.substring(name.length, cookie.length);
5639            }
5640        }
5641
5642        return null;
5643    }
5644
5645    function setCookie(cookieName, cookieValue, expirationDays) {
5646        var d = new Date();
5647        d.setTime(d.getTime() + (expirationDays * 24 * 60 * 60 * 1000));
5648        var expires = "expires=" + d.toUTCString();
5649        document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
5650    }
5651</script>
5651
5652<div class="registration-container registation-container container p-0"><div class="mb-8">
5653            <form class="form create account form-create-account"
5654          action="https://www.strunz.com/customer/account/createpost/"
5655          x-data="Object.assign(hyva.formValidation($el), initForm())"
5656                    id="accountcreate"
5657          @submit.prevent="submitForm()"
5658          method="post"
5659          enctype="multipart/form-data"
5660          autocomplete="off"
5661    >
5662        <input name="form_key" type="hidden" value="ibGanbYtvnza1N9t" />                <div class="control">
5663    <input type="hidden"
5664           value=""
5665           name="g-recaptcha-response"
5666    >
5667</div>
5668        <div class="flex flex-col lg:flex-row gap-12 lg:gap-16 mt-12">
5669            <div class="basis-1/2">
5670                <fieldset class="lg:max-w-2xl">
5671                    <legend class="mb-4 lg:mb-8">
5672                        <h2 class="font-bold">Persönliche Informationen</h2>
5673                    </legend>
5674                    <input type="hidden" name="success_url" value="">
5675                    <input type="hidden" name="error_url" value="">
5676                        <div class="field field-reserved w-full field-name-prefix required">
5677        <label class="label" for="prefix">
5678            <span>Anrede</span>
5679        </label>
5680        <div class="control">
5681                            <select id="prefix"
5682                        name="prefix"
5683                         required                        title="Anrede"
5684                        class="form-select required-entry"
5685                         required >
5686                                            <option value="&#x20;"
5687                            >
5688                                                     </option>
5689                                            <option value="Herr"
5690                            >
5691                            Herr                        </option>
5692                                            <option value="Frau"
5693                            >
5694                            Frau                        </option>
5695                                            <option value="Divers"
5696                            >
5697                            Divers                        </option>
5698                                            <option value="Firma"
5699                            >
5700                            Firma                        </option>
5701                                    </select>
5702                    </div>
5703    </div>
5704    <div class="field field-reserved w-full field-name-suffix">
5705        <label class="label" for="suffix">
5706            <span>
5707                Titel            </span>
5708        </label>
5709        <div class="control">
5710                            <select id="suffix"
5711                        name="suffix"
5712                        title="Titel"
5713                        class="form-select "
5714                                        >
5715                                            <option value="&#x20;"
5716                                                        >
5717                                                     </option>
5718                                            <option value="Dr."
5719                                                        >
5720                            Dr.                        </option>
5721                                            <option value="Dr.&#x20;med."
5722                                                        >
5723                            Dr. med.                        </option>
5724                                            <option value="Prof."
5725                                                        >
5726                            Prof.                        </option>
5727                                            <option value="Prof.&#x20;med."
5728                                                        >
5729                            Prof. med.                        </option>
5730                                            <option value="Prof.&#x20;Dr."
5731                                                        >
5732                            Prof. Dr.                        </option>
5733                                            <option value="Prof.&#x20;Dr.&#x20;med."
5734                                                        >
5735                            Prof. Dr. med.                        </option>
5736                                            <option value="Dr.&#x20;Dr."
5737                                                        >
5738                            Dr. Dr.                        </option>
5739                                            <option value="Dr.&#x20;Dr.&#x20;med."
5740                                                        >
5741                            Dr. Dr. med.                        </option>
5742                                            <option value="Prof.&#x20;Dr.&#x20;Dr."
5743                                                        >
5744                            Prof. Dr. Dr.                        </option>
5745                                            <option value="Prof.&#x20;Dr.&#x20;Dr.&#x20;med."
5746                                                        >
5747                            Prof. Dr. Dr. med.                        </option>
5748                                            <option value="Prof.&#x20;Dr.&#x20;Dr.&#x20;Dr."
5749                                                        >
5750                            Prof. Dr. Dr. Dr.                        </option>
5751                                            <option value="Prof.&#x20;Dr.&#x20;Dr.&#x20;Dr.&#x20;med."
5752                                                        >
5753                            Prof. Dr. Dr. Dr. med.                        </option>
5754                                    </select>
5755                    </div>
5756    </div>
5757<div class="field field-reserved w-full field-name-firstname required">
5758    <label class="label" for="firstname">
5759        <span>
5760            Vorname        </span>
5761    </label>
5762    <div class="control">
5763        <input type="text" id="firstname"
5764               name="firstname"
5765               value=""
5766               required
5767               title="Vorname"
5768               class="form-input required-entry"
5769               data-validate='{"validate-no-numbers": true, "firstname-no-digits": true}'
5770               @input.debounce="onChange"
5771             required        >
5772    </div>
5773</div>
5774<div class="field field-reserved w-full field-name-lastname required">
5775    <label class="label" for="lastname">
5776        <span>
5777            Nachname        </span>
5778    </label>
5779    <div class="control">
5780        <input type="text" id="lastname"
5781               name="lastname"
5782               required
5783               value=""
5784               title="Nachname"
5785               class="form-input required-entry"
5786               data-validate='{"validate-no-numbers": true, "lastname-no-digits": true}'
5787               @input.debounce="onChange"
5788             required        >
5789    </div>
5790</div>
5791                    
5792                                        
5793                                        
5794                                                            
5794<script>
5795    function initAllowShippingAssistence() {
5796        return {
5797            isAllowed: false,
5798            showTooltip: false,
5799            onChange(value) {
5800                /**
5801                 * assistance_allowed accepts 2 for "allowed" and 1 for "not allowed"
5802                 * if assistance_allowed_checkbox is set to false, we cast it to 0 and add 1 === "1"
5803                 * if assistance_allowed_checkbox is set to true, we cast it to 1 and add 1 === "2"
5804                 */
5805                this.$refs['assistance-input'].value = Number(value) + 1;
5806            }
5807        }
5808    }
5809</script>
5809
5810<div class="field choice"
5811     x-data="initAllowShippingAssistence()"
5812>
5813    <input type="checkbox"
5814           role="switch"
5815           @change="onChange($event.target.checked)"
5816           name="assistance_allowed_checkbox"
5817           id="assistance_allowed_checkbox"
5818           value="1"
5819           title="Ich&#x20;erlaube&#x20;dem&#x20;Kundenservice&#x20;den&#x20;Zugriff&#x20;auf&#x20;mein&#x20;Kundenkonto"
5820           class="checkbox"
5821           aria-describedby="assistance_allowed_checkbox_tooltip"
5822            >
5823    <label class="label" for="assistance_allowed_checkbox">
5824        <span>Ich erlaube dem Kundenservice den Zugriff auf mein Kundenkonto</span>
5825    </label>
5826    <input type="hidden"
5827           name="assistance_allowed"
5828           x-ref="assistance-input"
5829           value="1"
5830    >
5831
5832    <div class="inline-flex px-4">
5833        <button
5834            type="button"
5835            @mouseover.prevent.stop="showTooltip = true"
5836            @mouseleave.prevent.stop="showTooltip = false"
5837            @focus="showTooltip = true"
5838            @focusout="showTooltip = false"
5839            @keydown.escape="showTooltip = false"
5840            aria-labelledby="assistance_allowed_checkbox_tooltip"
5841            aria-disabled="true"
5842        >
5843            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="cursor-hand" width="24" height="24" aria-hidden="true">
5844  <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
5845</svg>
5846        </button>
5847        <div class="relative" x-cloak x-show="showTooltip">
5848            <div class="absolute top-0 left-0 z-10 w-64 -mt-6 text-sm leading-tight text-black transform
5849                -translate-x-full md:-translate-x-1/3 -translate-y-full bg-white rounded-lg shadow-lg p-4">
5850                <span
5851                    class="subtitle text-base"
5852                    id="assistance_allowed_checkbox_tooltip"
5853                >
5854                    Setzen Sie ein Häkchen, wenn Sie uns erlauben, Änderungen an Ihrem Kundenkonto vorzunehmen. Nur mit Bestätigung können wir bspw. Ihre Adress- und Kundendaten anpassen und Ihnen den bestmöglichen Service gewährleisten.                </span>
5855            </div>
5856            <div class="absolute z-10 w-3 h-3 bg-white origin-top-left rotate-45 -translate-x-full -translate-y-8 shadow-xl" aria-hidden="true"></div>
5857        </div>
5858    </div>
5859</div>
5860                </fieldset>
5861            </div>
5862            <div class="basis-1/2">
5863                <fieldset class="mt-0 lg:max-w-2xl">
5864                    <legend class="mb-4 lg:mb-8">
5865                        <h2 class="font-bold">Anmeldeinformationen</h2>
5866                    </legend>
5867                    <div class="field field-reserved required">
5868                        <label for="email_address" class="label">
5869                            <span>E-Mail</span>
5870                        </label>
5871                        <div class="control">
5872                            <input
5873                                type="email"
5874                                name="email"
5875                                autocomplete="email"
5876                                id="email_address"
5877                                required
5878                                value=""
5879                                title="E-Mail"
5880                                class="form-input"
5881                                @input.debounce="onChange"
5882                            />
5883                        </div>
5884                    </div>
5885                    <div class="field field-reserved required">
5886                        <label for="password" class="label">
5887                            <span>Passwort</span>
5888                        </label>
5889                        <div class="flex flex-col flex-wrap gap-4">
5890                            <div class="control flex items-center">
5891                                                                <div class="sr-only" aria-live="polite">
5892                                    <template x-if="!showPassword">
5893                                        <span>
5894                                            Passwort ausgeblendet                                        </span>
5895                                    </template>
5896                                    <template x-if="showPassword">
5897                                        <span>
5898                                            Passwort angezeigt                                        </span>
5899                                    </template>
5900                                </div>
5901                                <input
5902                                    :type="showPassword ? 'text' : 'password'"
5903                                    type="password"
5904                                    id="password"
5905                                    name="password"
5906                                    title="Passwort"
5907                                    minlength="7"
5908                                    class="form-input"
5909                                    required
5910                                    data-validate='{"password-strength": {"minCharacterSets": 2}}'
5911                                    @input.debounce="onChange"
5912                                    autocomplete="off"
5913                                >
5914                                <button
5915                                    type="button"
5916                                    :aria-pressed="showPassword ? true : false"
5917                                    x-on:click="showPassword = !showPassword"
5918                                    class="px-4 py-3"
5919                                    :aria-label="showPassword ? 'Passwort\u0020verbergen' : 'Passwort\u0020anzeigen'"
5920                                >
5921                                    <template x-if="!showPassword">
5922                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" width="24" height="24" role="img">
5923  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
5924  <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
5925<title>eye</title></svg>
5926                                    </template>
5927                                    <template x-if="showPassword">
5928                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" width="24" height="24" role="img">
5929  <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd"/>
5930  <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>
5931<title>eye-off</title></svg>
5932                                    </template>
5933                                </button>
5934                            </div>
5935                            <div>
5936                                <div
5937                                    id="password-strength-meter-container"
5938                                    data-role="password-strength-meter"
5939                                    aria-live="polite"
5940                                >
5941                                    <div id="password-strength-meter" class="password-strength-meter">
5942                                        Passwortstärke:
5943                                        <span id="password-strength-meter-label" data-role="password-strength-meter-label">
5944                                            Kein Passwort                                        </span>
5945                                    </div>
5946                                </div>
5947                            </div>
5948                        </div>
5949                    </div>
5950                    <div class="field field-reserved required">
5951                        <label for="password-confirmation" class="label">
5952                            <span>Passwort bestätigen</span>
5953                        </label>
5954                        <div class="control flex items-center">
5955                            <div class="sr-only" aria-live="polite">
5956                                <template x-if="!showPasswordConfirm">
5957                                    <span>
5958                                        Passwortbestätigung ausgeblendet                                    </span>
5959                                </template>
5960                                <template x-if="showPasswordConfirm">
5961                                    <span>
5962                                        Passwortbestätigung angezeigt                                    </span>
5963                                </template>
5964                            </div>
5965                            <input
5966                                :type="showPasswordConfirm ? 'text' : 'password'"
5967                                type="password"
5968                                name="password_confirmation"
5969                                title="Passwort&#x20;best&#xE4;tigen"
5970                                id="password-confirmation"
5971                                data-validate='{"equalTo": "password"}'
5972                                @input.debounce="onChange"
5973                                required
5974                                class="form-input"
5975                                autocomplete="off"
5976                            >
5977                            <button
5978                                type="button"
5979                                x-on:click="showPasswordConfirm = !showPasswordConfirm"
5980                                :aria-pressed="showPasswordConfirm ? true : false"
5981                                class="px-4 py-3"
5982                                :aria-label="
5983                                    showPasswordConfirm ? 'Passwort\u0020verbergen' : 'Passwort\u0020anzeigen'
5984                                "
5985                            >
5986                                <template x-if="!showPasswordConfirm">
5987                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" width="24" height="24" role="img">
5988  <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
5989  <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
5990<title>eye</title></svg>
5991                                </template>
5992                                <template x-if="showPasswordConfirm">
5993                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5" width="24" height="24" role="img">
5994  <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd"/>
5995  <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>
5996<title>eye-off</title></svg>
5997                                </template>
5998                            </button>
5999                        </div>
6000                    </div>
6001                    <input class="honeyspam-input" type="text" name="url"
6002       autocomplete="off" autofill="off" style="display: none;"/>
6003<input type="hidden" id="honey_spam_form" name="honey_spam_form" value="customer_registration_form">
6004                    <p class="my-4 text-sm">
6005    <em>
6006        Dieses Formular ist durch reCAPTCHA geschützt – es gelten die <a class="underline" href="https://policies.google.com/privacy" target="_blank" rel="noopener">Google-Datenschutzrichtlinie</a> und die <a class="underline" href="https://policies.google.com/terms" target="_blank" rel="noopener">Nutzungsbedingungen</a>.    </em>
6007</p>
6008                </fieldset>
6009            </div>
6010        </div>
6011
6012                <div class="actions-toolbar">
6013            <div class="primary">
6014                <button type="submit" class="action submit primary btn btn-primary disabled:opacity-75"
6015                        title="Ein&#x20;Konto&#x20;erstellen"
6016                        >
6017                        <span>Ein Konto erstellen</span>
6018                </button>
6019            </div>
6020            <div class="secondary ml-4 self-center">
6021                <a class="action back"
6022                   href="https://www.strunz.com/customer/account/login/referer/aHR0cHM6Ly93d3cuc3RydW56LmNvbS9jdXN0b21lci9hY2NvdW50L2NyZWF0ZS8~/">
6023                    <span>
6024                        Zurück                    </span>
6025                </a>
6026            </div>
6027        </div>
6028    </form>
6029
6030    
6030<script>
6031        function initForm() {
6032            return {
6033                errors: 0,
6034                hasCaptchaToken: 0,
6035                showPassword: false,
6036                showPasswordConfirm: false,
6037                submitForm() {
6038                    this.validate()
6039                        .then(() => {
6040                            // Do not rename $form — expected by Magento/Hyvä reCAPTCHA validation JS
6041                            // Prefer Alpine $el (the form) over querySelector: the markup used to
6042                            // declare a second id="form-validate" which broke #accountcreate lookup.
6043                            const $form = this.$el || document.querySelector('#accountcreate');
6044                                if (!this.hasCaptchaToken) {
6045        this.errors = 1;
6046
6047
6048        const executeGreCaptcha = () => {
6049            grecaptcha.ready(() => {
6050                grecaptcha.execute(
6051                    '6LdfCeEUAAAAAMJTMcG9jmbTYF72aEWJdDEkxuxV',
6052                    {action: 'submit'}
6053                ).then((token) => {
6054                    const tokenElement = $form['g\u002Drecaptcha\u002Dresponse'];
6055
6056                    if (tokenElement && token && token.length > 0) {
6057                        $form['g\u002Drecaptcha\u002Dresponse'].value = token;
6058                        this.errors = 0;
6059                        this.hasCaptchaToken = 1;
6060                        (this.submitForm || $form.submit).call(this);
6061                    } else {
6062                        this.errors = 1;
6063                        const error = tokenElement
6064                            ? 'ReCaptcha\u0020validation\u0020failed,\u0020please\u0020try\u0020again'
6065                            : 'ReCaptcha\u0020token\u0020element\u0020is\u0020missing.\u0020Please\u0020refresh\u0020the\u0020page\u0020and\u0020trying\u0020again.';
6066                        if (this.setErrorMessages) {
6067                            this.setErrorMessages([error])
6068                            this.displayErrorMessage = true;
6069                        } else {
6070                            window.dispatchMessages && window.dispatchMessages([{type: "error", text: error}], 5000);
6071                        }
6072                    }
6073                }).catch(exception => {
6074                    console.error(exception || `An unknown error occurred during ReCaptcha validation. Are the tokens and the domain correctly set up in the Google console?`)
6075                });
6076            })
6077        }
6078
6079        if (window.grecaptcha) {
6080            executeGreCaptcha();
6081        } else {
6082            const recaptchaUrl = "https://www.google.com/recaptcha/api.js?render=6LdfCeEUAAAAAMJTMcG9jmbTYF72aEWJdDEkxuxV";
6083            const script = document.createElement('script');
6084            script.setAttribute('type', 'text/javascript');
6085            script.setAttribute('src', recaptchaUrl);
6086            document.head.appendChild(script);
6087
6088            script.addEventListener("load", executeGreCaptcha, false);
6089        }
6090    }
6091
6092                            // reCAPTCHA v3 sets errors=1 until the token is ready, then re-calls submitForm
6093                            if (this.errors === 0 && $form) {
6094                                $form.submit();
6095                            }
6096                        })
6097                        .catch((invalid) => {
6098                            if (invalid.length > 0) {
6099                                invalid[0].focus();
6100                            }
6101                        });
6102                },
6103                            }
6104        }
6105
6106        window.addEventListener('DOMContentLoaded', () => {
6107
6108            hyva.formValidation.addRule('telephone', (value, options) => {
6109                const phoneNumber = value.trim().replace(' ', '');
6110                if (phoneNumber && phoneNumber.length < (options.minlength || 3)) {
6111                    return 'Die\u0020Telefonnummer\u0020ist\u0020zu\u0020kurz.';
6112                }
6113
6114                return true;
6115            });
6116
6117            const postCodeSpecs = {"AD":{"pattern_1":{"example":"AD100","pattern":"^AD\\d{3}$"}},"AM":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"AR":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"},"pattern_2":{"example":"A1234BCD","pattern":"^[a-zA-z]{1}[0-9]{4}[a-zA-z]{3}$"}},"AS":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"AT":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"AU":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"AX":{"pattern_1":{"example":"22123","pattern":"^22\\d{3}$"}},"AZ":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"},"pattern_2":{"example":"123456","pattern":"^[0-9]{6}$"}},"BA":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"BB":{"pattern_1":{"example":"BB12345","pattern":"^(BB\\d{5})?$"}},"BD":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"BE":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"BG":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"BH":{"pattern_1":{"example":"323","pattern":"^((1[0-2]|[1-9])\\d{2})?$"}},"BM":{"pattern_1":{"example":"MA 02","pattern":"^[A-Z]{2}[ ]?[A-Z0-9]{2}$"}},"BN":{"pattern_1":{"example":"AB1234","pattern":"^[a-zA-z]{2}[0-9]{4}$"}},"BR":{"pattern_1":{"example":"12345678","pattern":"^[0-9]{8}$"},"pattern_2":{"example":"12345-678","pattern":"^[0-9]{5}\\-[0-9]{3}$"}},"BY":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"CA":{"pattern_1":{"example":"A1B 2C3","pattern":"^[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}\\s[0-9]{1}[a-zA-z]{1}[0-9]{1}$"},"pattern_2":{"example":"A1B2C3","pattern":"^[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}[0-9]{1}$"},"pattern_3":{"example":"A1B","pattern":"^[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}$"}},"CC":{"pattern_1":{"example":"6799","pattern":"^6799$"}},"CH":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"CK":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"CL":{"pattern_1":{"example":"1234567","pattern":"^\\d{7}$"}},"CN":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"CR":{"pattern_1":{"example":"12345 or 123-1234","pattern":"^\\d{4,5}|\\d{3}-\\d{4}$"}},"CS":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"CU":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"CV":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"CX":{"pattern_1":{"example":"6798","pattern":"^6798$"}},"CY":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"CZ":{"pattern_1":{"example":"123 45","pattern":"^[0-9]{3}\\s[0-9]{2}$"}},"DE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"DK":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"DO":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"DZ":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"EC":{"pattern_1":{"example":"A1234B or AB123456 or 123456","pattern":"^([A-Z]\\d{4}[A-Z]|(?:[A-Z]{2})?\\d{6})?$"}},"EE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"EG":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"ES":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"ET":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"FI":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"FK":{"pattern_1":{"example":"FIQQ 1ZZ","pattern":"^FIQQ 1ZZ$"}},"FM":{"pattern_1":{"example":"96941","pattern":"^(9694[1-4])([ \\-]\\d{4})?$"}},"FO":{"pattern_1":{"example":"123","pattern":"^\\d{3}$"}},"FR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GB":{"pattern_1":{"example":"AB12 3CD","pattern":"^[a-zA-Z]{2}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_2":{"example":"A1B 2CD","pattern":"^[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_3":{"example":"AB1 2CD","pattern":"^[a-zA-Z]{2}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_4":{"example":"AB1C 2DF","pattern":"^[a-zA-Z]{2}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_5":{"example":"A12 3BC","pattern":"^[a-zA-Z]{1}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_6":{"example":"A1 2BC","pattern":"^[a-zA-Z]{1}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"}},"GE":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"GF":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GG":{"pattern_1":{"example":"GY10 2AB","pattern":"^[gG][yY]([1-9]|10)\\s?[0-9]{1}[a-zA-Z]{2}$"}},"GH":{"pattern_1":{"example":"GA18400","pattern":"^[A-Z][A-Z0-9]\\d{3,5}$"}},"GL":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"GN":{"pattern_1":{"example":"123","pattern":"^\\d{3}$"}},"GP":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GS":{"pattern_1":{"example":"SIQQ 1ZZ","pattern":"^SIQQ 1ZZ$"}},"GT":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"GU":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GW":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"HM":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"HN":{"pattern_1":{"example":"12345","pattern":"^(?:\\d{5})?$"}},"HR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"HT":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"HU":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"IC":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"ID":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"IL":{"pattern_1":{"example":"6687865","pattern":"^[0-9]{7}$"}},"IM":{"pattern_1":{"example":"IM1 1AD","pattern":"^IM\\d[\\dA-Z]?[ ]?\\d[ABD-HJLN-UW-Z]{2}$"}},"IN":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"IO":{"pattern_1":{"example":"BBND 1ZZ","pattern":"^BBND 1ZZ$"}},"IS":{"pattern_1":{"example":"123","pattern":"^[0-9]{3}$"}},"IQ":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"IT":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}}
6117,"JE":{"pattern_1":{"example":"JE2 4PJ","pattern":"^[jJ][eE][1-5]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"}},"JO":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"JP":{"pattern_1":{"example":"123-4567","pattern":"^[0-9]{3}-[0-9]{4}$"},"pattern_2":{"example":"1234567","pattern":"^[0-9]{7}$"}},"KE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"KG":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"KR":{"pattern_1":{"example":"123-456","pattern":"^[0-9]{3}-[0-9]{3}$"},"pattern_2":{"example":"12345","pattern":"^[0-9]{5}$"}},"KH":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"KW":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"KZ":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"LA":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"LB":{"pattern_1":{"example":"1234 5678","pattern":"^(\\d{4}([ ]?\\d{4})?)?$"}},"LI":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"LK":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"LT":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"LU":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"LV":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"MA":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MC":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MD":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"ME":{"pattern_1":{"example":"81101","pattern":"^8\\d{4}$"}},"MG":{"pattern_1":{"example":"123","pattern":"^[0-9]{3}$"}},"MH":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MK":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"MN":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"MP":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MS":{"pattern_1":{"example":"MSR1250","pattern":"^MSR\\s?\\d{4}$"}},"MQ":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MT":{"pattern_1":{"example":"ABC 1234","pattern":"^[a-zA-Z]{3}\\s[0-9]{4}$"},"pattern_2":{"example":"ABC 123","pattern":"^[a-zA-Z]{3}\\s[0-9]{3}$"},"pattern_3":{"example":"ABC 12","pattern":"^[a-zA-Z]{3}\\s[0-9]{2}$"}},"MU":{"pattern_1":{"example":"A1201 or 80110","pattern":"^([AR]|[0-9])\\d{4,5}$"}},"MV":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"},"pattern_2":{"example":"1234","pattern":"^[0-9]{4}$"}},"MX":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MY":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"NC":{"pattern_1":{"example":"98800","pattern":"^988\\d{2}$"}},"NE":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"NF":{"pattern_1":{"example":"2899","pattern":"^2899$"}},"NG":{"pattern_1":{"example":"123456","pattern":"^(\\d{6})?$"}},"NI":{"pattern_1":{"example":"22500","pattern":"^\\d{5}$"}},"NL":{"pattern_1":{"example":"1234 AB\/1234AB","pattern":"^[1-9][0-9]{3}\\s?[a-zA-Z]{2}$"},"pattern_2":{"example":"1234","pattern":"^[1-9][0-9]{3}$"}},"NO":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"NP":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"NZ":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"OM":{"pattern_1":{"example":"PC 123 or 123","pattern":"^(PC )?\\d{3}$"}},"PA":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"PF":{"pattern_1":{"example":"98701","pattern":"^987\\d{2}$"}},"PG":{"pattern_1":{"example":"123","pattern":"^\\d{3}$"}},"PH":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"PK":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"PL":{"pattern_1":{"example":"12-345","pattern":"^[0-9]{2}-[0-9]{3}$"}},"PM":{"pattern_1":{"example":"97500","pattern":"^9[78]5\\d{2}$"}},"PN":{"pattern_1":{"example":"PCRN 1ZZ","pattern":"^PCRN 1ZZ$"}},"PR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"PT":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"},"pattern_2":{"example":"1234-567","pattern":"^[0-9]{4}-[0-9]{3}$"}},"PW":{"pattern_1":{"example":"96939 or 96940","pattern":"^(?:96939|96940)$"}}
6117,"PY":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"RE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"RO":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"RS":{"pattern_1":{"example":"123456","pattern":"^\\d{6}$"}},"RU":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"SA":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"SE":{"pattern_1":{"example":"123 45","pattern":"^[0-9]{3}\\s[0-9]{2}$"}},"SG":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"SI":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"SK":{"pattern_1":{"example":"123 45","pattern":"^[0-9]{3}\\s[0-9]{2}$"}},"SH":{"pattern_1":{"example":"ASCN 1ZZ","pattern":"^(ASCN|STHL) 1ZZ$"}},"SJ":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"SM":{"pattern_1":{"example":"47890","pattern":"^4789\\d$"}},"SN":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"SO":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"SZ":{"pattern_1":{"example":"A123","pattern":"^[a-zA-Z]{1}[0-9]{3}$"}},"TC":{"pattern_1":{"example":"TKCA 1ZZ","pattern":"^TKCA 1ZZ$"}},"TH":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"TJ":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"TM":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"TN":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"TR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"TT":{"pattern_1":{"example":"120110","pattern":"^\\d{6}$"}},"TW":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"},"pattern_2":{"example":"123","pattern":"^[0-9]{3}$"}},"UA":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"US":{"pattern_1":{"example":"12345-6789","pattern":"^[0-9]{5}\\-[0-9]{4}$"},"pattern_2":{"example":"12345","pattern":"^[0-9]{5}$"}},"UY":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"UZ":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"VA":{"pattern_1":{"example":"00120","pattern":"^00120$"}},"VE":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"VI":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"WF":{"pattern_1":{"example":"98601","pattern":"^986\\d{2}$"}},"XK":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"XY":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"YT":{"pattern_1":{"example":"97601","pattern":"^976\\d{2}$"}},"ZA":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"ZM":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}}};
6118
6119            hyva.formValidation.addRule('postcode', (postCode, options, field, context) => {
6120                context.removeMessages(field, 'postcode-warning')
6121                const countryId = (context.fields['country_id'] && context.fields['country_id'].element.value),
6122                    validatedPostCodeExamples = [],
6123                    countryPostCodeSpecs = countryId && postCodeSpecs ? postCodeSpecs[countryId] : false;
6124
6125                if (! postCode || ! countryPostCodeSpecs) return true;
6126
6127                for (const postCodeSpec of Object.values(countryPostCodeSpecs)) {
6128                    if (new RegExp(postCodeSpec.pattern).test(postCode)) return true;
6129                    validatedPostCodeExamples.push(postCodeSpec.example);
6130                }
6131                if (validatedPostCodeExamples) {
6132                    context.addMessages(field, 'postcode-warning', [
6133                        'Die\u0020eingegebene\u0020Postleitzahl\u0020scheint\u0020ung\u00FCltig\u0020zu\u0020sein.',
6134                        '\u0020Beispiel\u003A\u0020' + validatedPostCodeExamples.join('; ') + '. ',
6135                        'Wenn\u0020Sie\u0020der\u0020Meinung\u0020sind,\u0020das\u0020ist\u0020richtig,\u0020k\u00F6nnen\u0020Sie\u0020diese\u0020Mitteilung\u0020ignorieren.'
6136                    ]);
6137                }
6138
6139                return true;
6140            });
6141        })
6142    </script>
6142
6143</div>
6144</div></div></div></main><footer class="page-footer"><div class="footer content">
6145<div class="flex flex-col gap-8 my-8 md:gap-16 md:my-16">
6146    <div class="banner-width">
6147        <form id="newsletter-subscribe-banner" action="https://newsletter.strunz.com/f/54900-139655/wcs/" method="post" target="_blank">
6148            <div class="relative" x-data="newsletterFooter">
6149                <picture>
6150                    <source srcset="/media/wysiwyg/footer/newsletter-desktop.webp" media="(min-width: 768px)">
6151                    <img src="/media/wysiwyg/footer/newsletter-mobile.webp" alt="Läufer auf Asphalt mit FOREVER YOUNG Adler - Jetzt zum Newsletter anmelden" class="w-full md:rounded-xl" fetchpriority="high">
6152                </picture>
6153                <div class="absolute w-full top-0 left-0 md:h-full md:w-1/3 flex md:justify-center md:items-center py-6 px-4 sm:py-10 sm:px-8 md:p-0">
6154                    <div class="flex flex-col gap-2">
6155                        <span class="text-[10vw] md:text-[4vw] 2xl:text-7xl uppercase leading-none w-fit bg-white rounded-lg px-2"><strong>Nichts</strong></span>
6156                        <span class="text-[10vw] md:text-[4vw] 2xl:text-7xl uppercase leading-none w-fit bg-white rounded-lg px-2"><strong>verpassen</strong></span>
6157                        <span class="text-[4.5vw] md:text-[1.5vw] 2xl:text-xl leading-none text-white">Jetzt zum Newsletter anmelden</span>
6158                    </div>
6159                </div>
6160                <div class="absolute w-full bottom-0 right-0 md:h-full md:w-2/3 flex md:justify-end md:items-center py-6 px-4 sm:py-10 sm:px-8 md:p-0 md:pr-6 xl:pr-[6%]">
6161                    <div class="flex flex-col gap-2 w-full md:max-w-lg lg:max-w-xl xl:max-w-2xl">
6162                        <div class="relative">
6163                            <input id="text2864535"
6164                                   name="email" type="email"
6165                                   class="form-input text-white placeholder:text-white bg-transparent border-white focus:border-white w-full"
6166                                   placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" required
6167                                   @focus="openForm"/>
6168                            <template x-if="closed">
6169                                <span class="absolute right-0 top-1/2 -translate-y-1/2 text-white pr-3">
6170                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="35" height="35" aria-hidden="true">
6171  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
6172</svg>
6173                                </span>
6174                            </template>
6175                        </div>
6176                        <div class="w-full flex flex-col gap-2 md:gap-1 lg:gap-2" x-show="open">
6177                            <div class="flex flex-col md:flex-row gap-2 md:gap-1 lg:gap-2">
6178                                <select id="select2864543"
6179                                        name="1011053"
6180                                        class="form-input text-white placeholder:text-white bg-transparent border-white focus:border-white w-40"
6181                                        aria-label="Anrede">
6182                                    <option value="Herr" class="text-black">Herr</option>
6183                                    <option value="Frau" class="text-black">Frau</option>
6184                                    <option value="Divers" class="text-black">Divers</option>
6185                                </select>
6186                                <input id="text2864544"
6187                                       name="1011054" type="text"
6188                                       class="form-input text-white placeholder:text-white bg-transparent border-white focus:border-white w-full"
6189                                       placeholder="Vorname" aria-label="Vorname" required/>
6190                                <input id="text2864546"
6191                                       name="1011055" type="text"
6192                                       class="form-input text-white placeholder:text-white bg-transparent border-white focus:border-white w-full"
6193                                       placeholder="Nachname" aria-label="Nachname" required/>
6194                                <button type="submit"
6195                                        class="btn btn-primary w-fit px-5 py-3 border-white flex-shrink-0">Anmelden</button>
6196                            </div>
6197                            <p class="text-md text-white">Sie können sich jederzeit vom Newsletter wieder abmelden.</p>
6198                        </div>
6199                    </div>
6200                </div>
6201            </div>
6202        </form>
6203    </div>
6204    </div>
6205
6206<script>
6207    function newsletterFooter() {
6208        return {
6209            open: false,
6210            get closed() {
6211                return !this.open;
6212            },
6213            openForm() {
6214                this.open = true;
6215            }
6216        };
6217    }
6218
6219    window.addEventListener('alpine:init', () => Alpine.data('newsletterFooter', newsletterFooter), {once: true});
6220</script>
6220
6221<div class="body-font bg-container-darker print:hidden">
6222    <div class="container mx-auto py-8 sm:py-16">
6223        <div class="order-first flex flex-wrap gap-8 sm:gap-16">
6224                            
6224<script>
6225    function initAccordion() {
6226        return {
6227            isMobile: false,
6228            open: false,
6229            init() {
6230                const matchMedia = window.matchMedia('(max-width: 639px)');
6231                this.isMobile = matchMedia.matches;
6232                this.open = !matchMedia.matches;
6233
6234                if (typeof matchMedia.onchange !== 'object') {
6235                    matchMedia.addListener((event) => {
6236                        this.isMobile = event.matches;
6237                        this.open = !event.matches;
6238                    });
6239                } else {
6240                    matchMedia.addEventListener("change", (event) => {
6241                        this.isMobile = event.matches;
6242                        this.open = !event.matches;
6243                    });
6244                }
6245            },
6246            toggle() {
6247                this.open = !this.open;
6248            },
6249            openIconClass() {
6250                return { 'block': this.open, 'hidden': !this.open };
6251            },
6252            closedIconClass() {
6253                return { 'block': !this.open, 'hidden': this.open };
6254            },
6255            isListVisible() {
6256                return !this.isMobile || this.open;
6257            }
6258        }
6259    }
6260
6261    window.addEventListener('alpine:init', () => {
6262        Alpine.data('initAccordion', initAccordion);
6263    }, {once: true});
6264</script>
6264
6265
6266<div class="w-full grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 sm:gap-12">
6267    <div x-data="initAccordion">
6268        <div class="heading group flex items-center justify-between gap-x-4 border-b-3 border-black pb-2 mb-4 hover:cursor-pointer hover:border-gray sm:hidden" @click="toggle" aria-hidden="true">
6269            <span class="h3 mb-0 group-hover:text-gray">Forever Young</span>
6270            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 34.527 37.704" class="w-5 h-5 group-hover:text-gray" :class="closedIconClass" aria-hidden="true">
6271                <g id="accordion-open_2" transform="translate(-1061.973 -1549.305)">
6272                    <path id="Pfad_15147_2" data-name="Pfad 15147" d="M765.161,895.314v11.861a6.986,6.986,0,0,0,3.495,6.054l10.272,5.931a6.99,6.99,0,0,0,6.991,0l10.272-5.931a6.989,6.989,0,0,0,3.5-6.054V895.314a6.991,6.991,0,0,0-3.5-6.054l-10.272-5.931a7,7,0,0,0-6.991,0l-10.272,5.931a6.988,6.988,0,0,0-3.495,6.054" transform="translate(296.813 666.912)" fill="#2e3831"></path>
6273                    <path id="Pfad_15148_2" data-name="Pfad 15148" d="M773.742,898.592h5.8v-5.928a2.827,2.827,0,1,1,5.654,0v5.928h5.9a2.652,2.652,0,0,1,0,5.3h-5.9v5.93a2.827,2.827,0,0,1-5.654,0V903.9h-5.8a2.652,2.652,0,0,1,0-5.3" transform="translate(296.813 666.912)" fill="#fff"></path>
6274                </g>
6275            </svg>
6276            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 35.526 38.704" class="w-5 h-5 group-hover:text-gray" :class="openIconClass" aria-hidden="true">
6277                <path id="close-tab_2" d="M17.262,37.7a7.011,7.011,0,0,1-3.5-.935L3.5,30.836A7,7,0,0,1,0,24.782V12.921A7.008,7.008,0,0,1,3.5,6.866L13.766.938a6.986,6.986,0,0,1,6.991,0L31.029,6.866a7.013,7.013,0,0,1,3.5,6.055V24.782a7,7,0,0,1-3.5,6.055L20.757,36.769A7.01,7.01,0,0,1,17.262,37.7ZM8.582,16.2a2.652,2.652,0,1,0,0,5.3H25.945a2.652,2.652,0,0,0,0-5.3H8.582Z" transform="translate(0.5 0.5)" fill="#2e3831" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"></path>
6278            </svg>
6279        </div>
6280        <h3 class="hidden sm:block mt-0">Forever Young</h3>
6281        <ul x-show="isListVisible" class="flex flex-col gap-2 sm:gap-0 mb-10 sm:mb-0">
6282            <li><a href="https://www.strunz.com/forever-young-konzept" class="no-underline" data-auto-event-observed="true">FOREVER YOUNG Konzept</a></li>
6283            <li><a href="https://www.strunz.com/unser-neues-branding" class="no-underline" data-auto-event-observed="true">Unser neues Branding</a></li>
6284            <li><a href="https://www.strunz.com/dr-strunz" class="no-underline" data-auto-event-observed="true">Dr. med. Strunz</a></li>
6285            <li><a href="https://www.strunz.com/podcast" class="no-underline" data-auto-event-observed="true">Podcast</a></li>
6286            <li><a href="https://www.strunz.com/forever-young-news-podcast" class="no-underline" data-auto-event-observed="true">News Podcast</a></li>
6287            <li><a href="https://www.strunz.com/news" class="no-underline" data-auto-event-observed="true">News</a></li>
6288<!--            <li><a href="--><!--" class="no-underline" data-auto-event-observed="true">--><!--</a></li>-->
6289            <li><a href="https://www.strunz.com/forever-young-atlas-app" class="no-underline" data-auto-event-observed="true">App</a></li>
6290        </ul>
6291    </div>
6292    <div x-data="initAccordion">
6293        <div class="heading group flex items-center justify-between gap-x-4 border-b-3 border-black pb-2 mb-4 hover:cursor-pointer hover:border-gray sm:hidden" @click="toggle" aria-hidden="true">
6294            <span class="h3 mb-0 group-hover:text-gray">Community</span>
6295            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 34.527 37.704" class="w-5 h-5 group-hover:text-gray" :class="closedIconClass" aria-hidden="true">
6296                <g id="accordion-open_2" transform="translate(-1061.973 -1549.305)">
6297                    <path id="Pfad_15147_2" data-name="Pfad 15147" d="M765.161,895.314v11.861a6.986,6.986,0,0,0,3.495,6.054l10.272,5.931a6.99,6.99,0,0,0,6.991,0l10.272-5.931a6.989,6.989,0,0,0,3.5-6.054V895.314a6.991,6.991,0,0,0-3.5-6.054l-10.272-5.931a7,7,0,0,0-6.991,0l-10.272,5.931a6.988,6.988,0,0,0-3.495,6.054" transform="translate(296.813 666.912)" fill="#2e3831"></path>
6298                    <path id="Pfad_15148_2" data-name="Pfad 15148" d="M773.742,898.592h5.8v-5.928a2.827,2.827,0,1,1,5.654,0v5.928h5.9a2.652,2.652,0,0,1,0,5.3h-5.9v5.93a2.827,2.827,0,0,1-5.654,0V903.9h-5.8a2.652,2.652,0,0,1,0-5.3" transform="translate(296.813 666.912)" fill="#fff"></path>
6299                </g>
6300            </svg>
6301            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 35.526 38.704" class="w-5 h-5 group-hover:text-gray" :class="openIconClass" aria-hidden="true">
6302                <path id="close-tab_2" d="M17.262,37.7a7.011,7.011,0,0,1-3.5-.935L3.5,30.836A7,7,0,0,1,0,24.782V12.921A7.008,7.008,0,0,1,3.5,6.866L13.766.938a6.986,6.986,0,0,1,6.99
63021,0L31.029,6.866a7.013,7.013,0,0,1,3.5,6.055V24.782a7,7,0,0,1-3.5,6.055L20.757,36.769A7.01,7.01,0,0,1,17.262,37.7ZM8.582,16.2a2.652,2.652,0,1,0,0,5.3H25.945a2.652,2.652,0,0,0,0-5.3H8.582Z" transform="translate(0.5 0.5)" fill="#2e3831" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"></path>
6303            </svg>
6304        </div>
6305        <h3 class="hidden sm:block mt-0">Community</h3>
6306        <ul x-show="isListVisible" class="flex flex-col gap-2 sm:gap-0 mb-10 sm:mb-0">
6307            <li><a href="https://www.strunz.com/bonusprogramm" class="no-underline" data-auto-event-observed="true">Bonusprogramm</a></li>
6308            <li><a href="https://www.strunz.com/whats-app" class="no-underline" data-auto-event-observed="true">WhatsApp</a></li>
6309            <li><a href="https://www.strunz.com/seminar" class="no-underline" data-auto-event-observed="true">Seminar</a></li>
6310            <li><a href="https://www.strunz.com/forum" class="no-underline" data-auto-event-observed="true">Forum</a></li>
6311        </ul>
6312    </div>
6313    <div x-data="initAccordion">
6314        <div class="heading group flex items-center justify-between gap-x-4 border-b-3 border-black pb-2 mb-4 hover:cursor-pointer hover:border-gray sm:hidden" @click="toggle" aria-hidden="true">
6315            <span class="h3 mb-0 group-hover:text-gray">Kundenservice</span>
6316            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 34.527 37.704" class="w-5 h-5 group-hover:text-gray" :class="closedIconClass" aria-hidden="true">
6317                <g id="accordion-open_2" transform="translate(-1061.973 -1549.305)">
6318                    <path id="Pfad_15147_2" data-name="Pfad 15147" d="M765.161,895.314v11.861a6.986,6.986,0,0,0,3.495,6.054l10.272,5.931a6.99,6.99,0,0,0,6.991,0l10.272-5.931a6.989,6.989,0,0,0,3.5-6.054V895.314a6.991,6.991,0,0,0-3.5-6.054l-10.272-5.931a7,7,0,0,0-6.991,0l-10.272,5.931a6.988,6.988,0,0,0-3.495,6.054" transform="translate(296.813 666.912)" fill="#2e3831"></path>
6319                    <path id="Pfad_15148_2" data-name="Pfad 15148" d="M773.742,898.592h5.8v-5.928a2.827,2.827,0,1,1,5.654,0v5.928h5.9a2.652,2.652,0,0,1,0,5.3h-5.9v5.93a2.827,2.827,0,0,1-5.654,0V903.9h-5.8a2.652,2.652,0,0,1,0-5.3" transform="translate(296.813 666.912)" fill="#fff"></path>
6320                </g>
6321            </svg>
6322            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 35.526 38.704" class="w-5 h-5 group-hover:text-gray" :class="openIconClass" aria-hidden="true">
6323                <path id="close-tab_2" d="M17.262,37.7a7.011,7.011,0,0,1-3.5-.935L3.5,30.836A7,7,0,0,1,0,24.782V12.921A7.008,7.008,0,0,1,3.5,6.866L13.766.938a6.986,6.986,0,0,1,6.991,0L31.029,6.866a7.013,7.013,0,0,1,3.5,6.055V24.782a7,7,0,0,1-3.5,6.055L20.757,36.769A7.01,7.01,0,0,1,17.262,37.7ZM8.582,16.2a2.652,2.652,0,1,0,0,5.3H25.945a2.652,2.652,0,0,0,0-5.3H8.582Z" transform="translate(0.5 0.5)" fill="#2e3831" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"></path>
6324            </svg>
6325        </div>
6326        <h3 class="hidden sm:block mt-0">Kundenservice</h3>
6327        <ul x-show="isListVisible" class="flex flex-col gap-2 sm:gap-0 mb-10 sm:mb-0">
6328            <li><a href="https://www.strunz.com/contact/" class="no-underline" data-auto-event-observed="true">Kontakt</a></li>
6329            <li><a href="https://www.strunz.com/aerzteliste" class="no-underline" data-auto-event-observed="true">Ärzteliste</a></li>
6330            <li><a href="https://www.strunz.com/versandkosten/" class="no-underline" data-auto-event-observed="true">Versandkosten</a></li>
6331            <li><a href="https://www.strunz.com/zahlungsarten/" class="no-underline" data-auto-event-observed="true">Zahlungsarten</a></li>
6332            <li><a href="https://www.strunz.com/faqs/" class="no-underline" data-auto-event-observed="true">FAQs</a></li>
6333        </ul>
6334    </div>
6335    <div x-data="initAccordion">
6336        <div class="heading group flex items-center justify-between gap-x-4 border-b-3 border-black pb-2 mb-4 hover:cursor-pointer hover:border-gray sm:hidden" @click="toggle" aria-hidden="true">
6337            <span class="h3 mb-0 group-hover:text-gray">Unternehmen</span>
6338            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 34.527 37.704" class="w-5 h-5 group-hover:text-gray" :class="closedIconClass" aria-hidden="true">
6339                <g id="accordion-open_2" transform="translate(-1061.973 -1549.305)">
6340                    <path id="Pfad_15147_2" data-name="Pfad 15147" d="M765.161,895.314v11.861a6.986,6.986,0,0,0,3.495,6.054l10.272,5.931a6.99,6.99,0,0,0,6.99
63401,0l10.272-5.931a6.989,6.989,0,0,0,3.5-6.054V895.314a6.991,6.991,0,0,0-3.5-6.054l-10.272-5.931a7,7,0,0,0-6.991,0l-10.272,5.931a6.988,6.988,0,0,0-3.495,6.054" transform="translate(296.813 666.912)" fill="#2e3831"></path>
6341                    <path id="Pfad_15148_2" data-name="Pfad 15148" d="M773.742,898.592h5.8v-5.928a2.827,2.827,0,1,1,5.654,0v5.928h5.9a2.652,2.652,0,0,1,0,5.3h-5.9v5.93a2.827,2.827,0,0,1-5.654,0V903.9h-5.8a2.652,2.652,0,0,1,0-5.3" transform="translate(296.813 666.912)" fill="#fff"></path>
6342                </g>
6343            </svg>
6344            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 35.526 38.704" class="w-5 h-5 group-hover:text-gray" :class="openIconClass" aria-hidden="true">
6345                <path id="close-tab_2" d="M17.262,37.7a7.011,7.011,0,0,1-3.5-.935L3.5,30.836A7,7,0,0,1,0,24.782V12.921A7.008,7.008,0,0,1,3.5,6.866L13.766.938a6.986,6.986,0,0,1,6.991,0L31.029,6.866a7.013,7.013,0,0,1,3.5,6.055V24.782a7,7,0,0,1-3.5,6.055L20.757,36.769A7.01,7.01,0,0,1,17.262,37.7ZM8.582,16.2a2.652,2.652,0,1,0,0,5.3H25.945a2.652,2.652,0,0,0,0-5.3H8.582Z" transform="translate(0.5 0.5)" fill="#2e3831" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1"></path>
6346            </svg>
6347        </div>
6348        <h3 class="hidden sm:block mt-0">Unternehmen</h3>
6349        <ul x-show="isListVisible" class="flex flex-col gap-2 sm:gap-0 mb-10 sm:mb-0">
6350            <li><a href="https://www.strunz.com/agb/" class="no-underline" data-auto-event-observed="true">AGB</a></li>
6351            <li><a href="https://www.strunz.com/impressum/" class="no-underline" data-auto-event-observed="true">Impressum</a></li>
6352            <li><a href="https://www.strunz.com/datenschutz/" class="no-underline" data-auto-event-observed="true">Datenschutz</a></li>
6353            <li><a href="" x-data="{}" @click.prevent="$dispatch('cookiebar-action-settings')" class="no-underline" data-role="action">Cookie Einstellungen</a></li>
6354            <li><a href="https://www.strunz.com/widerrufsbelehrung/" class="no-underline" data-auto-event-observed="true">Widerruf</a></li>
6355            <li><a href="https://www.strunz.com/partnerprogramm/" class="no-underline" data-auto-event-observed="true">Partnerprogramm</a></li>
6356            <li><a href="https://www.strunz.com/wiederverkaeufer-werden/" class="no-underline" data-auto-event-observed="true">Wiederverkäufer werden</a></li>
6357        </ul>
6358    </div>
6359</div>
6360<hr class="hidden sm:block w-full border-y border-black">
6361<div class="w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8 sm:gap-12">
6362    <div class="order-3 xl:order-1">
6363        <p class="text-center md:text-left text-3xl m-0 uppercase"><strong>Bewegung.<br>Ernährung.<br>Denken.</strong></p>
6364    </div>
6365    <div class="order-1 xl:order-2 xl:col-span-2">
6366        <div>
6367            <h3>Wir beraten Sie gerne</h3>
6368            <p class="m-0"><strong>Versand- & Bestellabwicklung:</strong></p>
6369            <p class="m-0">Tel.: +49 961 2049 8399</p>
6370            <p class="m-0">Mo. - Fr. von 8:00 bis 13:00 Uhr</p>
6371        </div>
6372        <div class="flex gap-4 mt-4">
6373            <a href="https://www.instagram.com/forever_young_strunz/" target="_blank">
6374                <img src="/media/wysiwyg/footer/instagram.svg" alt="Strunz Instagram" class="h-7"/>
6375            </a>
6376            <a href="https://www.facebook.com/Strunz/?eid=ARBclG3zeyO0cCSCyWcPJDBczN8WZXNI2TyFcN56CSmEc0HiTDuj7CMNejAe8pt9w8V9nD27nVWzWRum" target="_blank">
6377                <img src="/media/wysiwyg/footer/facebook.svg" alt="Strunz Facebook" class="h-7"/>
6378            </a>
6379            <a href="https://wa.me/4996120498399?text=Jetzt+Anmelden" target="_blank">
6380                <img src="/media/wysiwyg/footer/whatsapp.svg" alt="Strunz WhatsApp" class="h-7"/>
6381            </a>
6382        </div>
6383    </div>
6384    <div class="order-2 md:row-span-2 xl:order-3 xl:row-span-1">
6385        <div x-data="initNewsletterForm">
6386    <form id="newsletter-subscribe-footer" action="https://newsletter.strunz.com/f/54900-139655/wcs/" method="post" target="_blank">
6387        <h3 class="uppercase">Newsletter</h3>
6388        <p><strong>Jetzt zum Newsletter anmelden</strong></p>
6389        <div class="relative">
6390            <input id="text2864535"
6391                   name="email"
6392                   type="email" class="form-input bg-transparent w-full"
6393                   placeholder="E-Mail-Adresse" aria-label="E-Mail-Adresse" required
6394                   @focus="openForm"/>
6395            <template x-if="closed">
6396                <span class="absolute right-0 top-1/2 -translate-y-1/2 pr-3">
6397                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="35" height="35" aria-hidden="true">
6398  <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
6399</svg>
6400                </span>
6401            </template>
6402        </div>
6403        <div x-show="open">
6404            <div class="flex flex-col gap-2 mt-4">
6405                <select id="select2864543"
6406                        name="1011053"
6407                        class="form-input bg-transparent w-36"
6408                        aria-label="Anrede">
6409                    <option value="Herr">Herr</option>
6410                    <option value="Frau">Frau</option>
6411                    <option value="Divers">Divers</option>
6412                </select>
6413                <input id="text2864544"
6414                       name="1011054"
6415                       type="text" class="form-input bg-transparent w-full"
6416                       placeholder="Vorname" aria-label="Vorname" required/>
6417                <input id="text2864546"
6418                       name="1011055"
6419                       type="text" class="form-input bg-transparent w-full"
6420                       placeholder="Nachname" aria-label="Nachname" required/>
6421            </div>
6422            <button type="submit" class="btn btn-primary w-fit py-2 my-5">Anmelden</button>
6423            <p class="text-md">Sie können sich jederzeit vom Newsletter wieder abmelden.</p>
6424        </div>
6425    </form>
6426</div>
6427<script>
6428    function initNewsletterForm() {
6429        return {
6430            open: false,
6431            get closed() {
6432                return !this.open;
6433            },
6434            openForm() {
6435                this.open = true;
6436            }
6437        };
6438    }
6439
6440    window.addEventListener(
6441        'alpine:init',
6442        () => Alpine.data('initNewsletterForm', initNewsletterForm),
6443        {once: true}
6444    );
6445</script>
6445
6446    </div>
6447</div>
6448                                                                                    <hr class="block w-full border-y border-black">
6449<div class="rma-footer-links flex w-full justify-between items-center gap-8 flex-col md:flex-row">
6450    <div class="flex items-center gap-4 md:gap-8">
6451        <?xml version="1.0" standalone="no"?>
6452<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
6453<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="40" height="40" viewBox="0 0 674.000000 660.000000" preserveAspectRatio="xMidYMid meet" class="w-12 md:w-16 h-12 md:h-16 shrink-0 hidden md:block" aria-hidden="true">
6454
6455<g transform="translate(0.000000,660.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
6456<path d="M2929 6585 c-583 -67 -1164 -300 -1611 -646 -440 -341 -758 -732 -989 -1214 -329 -688 -415 -1476 -239 -2201 197 -814 726 -1557 1420 -1991 417 -261 934 -443 1450 -508 175 -22 544 -31 721 -16 674 55 1300 296 1829 705 130 100 420 387 526 521 293 368 502 790 614 1237 67 270 82 397 87 709 6 326 -7 491 -58 744 -59 294 -137 522 -279 810 -179 365 -362 618 -661 911 -153 150 -214 203 -354 309 -387 291 -872 506 -1313 584 -257 46 -339 52 -682 56 -247 3 -368 0 -461 -10z m757 -320 c484 -47 933 -205 1329 -470 469 -313 803 -686 1055 -1180 352 -688 415 -1520 170 -2241 -148 -437 -375 -800 -709 -1135 -177 -177 -272 -256 -451 -374 -441 -293 -926 -462 -1446 -506 -174 -14 -562 -6 -699 15 -468 73 -889 235 -1270 489 -593 395 -1040 1030 -1220 1732 -127 495 -110 1042 47 1549 205 664 656 1267 1233 1650 401 267 887 437 1359 476 159 13 438 10 602 -5z"/>
6457<path d="M2641 4958 c-19 -5 -106 -59 -195 -121 -146 -101 -566 -393 -821 -570 -55 -39 -148 -103 -207 -144 -59 -41 -116 -85 -127 -99 -41 -52 -33 -142 17 -197 23 -26 1279 -863 1315 -876 44 -17 88 -13 145 14 46 21 56 31 78 80 34 73 28 112 -31 225 -25 47 -75 143 -111 214 l-65 128 173 -6 c95 -3 353 -8 573 -11 668 -10 847 -35 1053 -146 256 -137 367 -309 379 -585 11 -255 -77 -476 -273 -684 -182 -193 -487 -353 -774 -405 -194 -35 -223 -50 -205 -106 11 -33 68 -50 200 -58 605 -39 1100 178 1382 607 145 220 213 457 213 746 0 480 -176 824 -549 1075 -143 97 -380 192 -576 230 -208 41 -248 44 -917 48 -362 3 -658 6 -658 8 0 2 46 96 101 208 117 235 126 272 87 347 -38 74 -118 104 -207 78z"/>
6458</g>
6459</svg>
6460        <div class="flex-1 text-center md:text-left">
6461            <h3 class="mb-2 md:mb-4">Vertrag widerrufen</h3>
6462            <p>Sie möchten einen Vertrag widerrufen?<br> Reichen Sie Ihren Widerruf bequem online ein.</p>
6463        </div>
6464    </div>
6465    <div class="flex flex-col gap-4">
6466        <a href="https://www.strunz.com/returns/guest/new/" class="btn btn-secondary">Vertrag widerrufen <span class="ml-4">❯</span></a>
6467        <p class="text-body-sm text-center">Sicher, schnell und unkompliziert</p>
6468    </div>
6469</div>
6470                                                                            </div>
6471    </div>
6472    <div class="bg-white">
6473        <div class="container">
6474            <div class="grid grid-cols-1 xl:grid-cols-3 gap-8 py-8">
6475                <div class="order-last xl:order-first">
6476                    <div class="flex flex-col xl:flex-row items-center gap-6">
6477    <img src="/media/wysiwyg/footer/logo.svg" alt="Forever Young Logo" class="w-16 h-16" />
6478    <p>Copyright 2026 forever young</p>
6479</div>
6480                </div>
6481                <div class="flex justify-center">
6482                    <img src="/media/wysiwyg/footer/payment.svg" alt="Zahlungsarten" width="264" height="31" class="max-w-80"/>
6483                </div>
6484            </div>
6485        </div>
6486    </div>
6487</div>
6488</div></footer>
6488<script type="text/x-magento-init">
6489    {
6490        "*": {
6491            "Amasty_GoogleConsentMode/js/bind-events": {}
6492        }
6493    }
6494</script>
vendor: 1 bytes, line 6494
6494
6495<script>    // add product to cart
6496    (() => {
6497        if(!window.hyva)
6498            return;
6499
6500        window.addEventListener('private-content-loaded', function(event) {
6501            const sectionData = event.detail.data;
6502            if(!sectionData || !sectionData["etracker-custom-section"])
6503                return;
6504
6505            const added_products = sectionData["etracker-custom-section"].added_products;
6506            if(!added_products)
6507                return;
6508
6509            for (const [key, added_product] of Object.entries(added_products)) {
6510                function _etrackerSendInsertToBasketEvent() {
6511                    const et_Commerce_product = {
6512                        id: added_product.id,
6513                        name: added_product.name,
6514                        category: added_product.category,
6515                        price: added_product.price,
6516                        currency: added_product.currency,
6517                        variants: {}
6518                    };
6519                    etCommerce.sendEvent('insertToBasket', et_Commerce_product, parseFloat(added_product.qty));
6520                }
6521
6522                if(typeof _etracker !== 'undefined') {
6523                    _etrackerSendInsertToBasketEvent();
6524                } else {
6525                    window._etrackerOnReady = typeof window._etrackerOnReady === 'object' ?
6526                        window._etrackerOnReady :
6527                        [];
6528                    window._etrackerOnReady.push(_etrackerSendInsertToBasketEvent);
6529                }
6530            }
6531
6532            // force reload customer section data, otherwise event would be triggered more than once
6533            window.dispatchEvent(new Event('reload-customer-section-data'));
6534        // NOTE: deliberately no { once: true } here. private-content-loaded also fires on
6535        // the initial page load, which consumed the listener before the customer had added
6536        // anything - with Hyva's AJAX add-to-cart there is no further page load, so
6537        // insertToBasket was almost never sent. Double counting is prevented server side:
6538        // the CustomSection source clears the session data as soon as it is read.
6539        });
6540    })();
6541
6542    // remove product from cart via sidebar
6543    (() => {
6544        if(!window.hyva || typeof(initCartDrawer) === 'undefined')
6545            return;
6546
6547        const origInitCartDrawer = initCartDrawer;
6548        window.initCartDrawer = function () {
6549            const instance = origInitCartDrawer.apply(null, arguments);
6550            const origDeleteItemFromCart = instance.deleteItemFromCart;
6551            instance.deleteItemFromCart = function (itemId) {
6552                origDeleteItemFromCart.apply(instance, arguments);
6553                window.setTimeout(function() {
6554                    const postUrl = BASE_URL + 'checkout/sidebar/removeItem/';
6555                    fetch(postUrl, {
6556                        method: "POST",
6557                        headers: {
6558                            "X-Requested-With": "XMLHttpRequest",
6559                        },
6560                    })
6561                    .then(response => {
6562                        if (response.ok) {
6563                            return response.json();
6564                        }
6565                    })
6566                    .then(data => {
6567                        if (data && data.etracker && data.etracker.removed_product) {
6568                            const product = data.etracker.removed_product;
6569                            const et_Commerce_product = {
6570                                id: product.id,
6571                                name: product.name,
6572                                category: product.category,
6573                                price: product.price,
6574                                currency: product.currency,
6575                                variants: {}
6576                            };
6577                            etCommerce.sendEvent('removeFromBasket', et_Commerce_product, parseFloat(product.qty));
6578                        }
6579                    });
6580                }, 100);
6581            }
6582            return instance;
6583        }
6584    })();</script>
6584
6585    <div x-data="initAwinTracker"
6586         data-advertiser-id="16160"
6587         data-test-mode="false">
6588    </div>
6589    
6589<script type="text/javascript">
6590        function initAwinTracker() {
6591            return {
6592                advertiserId: null,
6593                testMode: false,
6594                scriptLoaded: false,
6595                cookieSetSuccess: false,
6596                pendingAwc: null, // Store AWC from URL until consent is given
6597
6598                // The cookie name registered in Amasty's cookie grid for Awin
6599                awinCookieName: 'dwin1',
6600
6601                init() {
6602                    this.advertiserId = this.$root.dataset.advertiserId;
6603                    this.testMode = this.$root.dataset.testMode === 'true';
6604
6605                    // Capture AWC from URL into memory (no cookie/storage yet)
6606                    this.captureAwcFromUrl();
6607
6608                    // Then initialize tracking
6609                    if (document.readyState === 'loading') {
6610                        document.addEventListener('DOMContentLoaded', () => this.initialize());
6611                    } else {
6612                        this.initialize();
6613                    }
6614                },
6615
6616                /**
6617                 * Capture AWC parameter from URL into memory.
6618                 * Does NOT set any cookies — that happens only after consent.
6619                 */
6620                captureAwcFromUrl() {
6621                    const awcFromUrl = this.getURLParameter('awc');
6622                    if (!awcFromUrl || !this.isValidAwcCookie(awcFromUrl)) {
6623                        return;
6624                    }
6625
6626                    // Check if cookie is already set with this value (e.g. by server-side observer)
6627                    const currentAwcCookie = this.getActualCookieValue('awc');
6628                    if (currentAwcCookie === awcFromUrl) {
6629                        this.cookieSetSuccess = true;
6630                        return; // Already set
6631                    }
6632
6633                    // Store in memory for later use once consent is given
6634                    this.pendingAwc = awcFromUrl;
6635                },
6636
6637                /**
6638                 * Set the AWC cookie. Only call this after consent is confirmed.
6639                 */
6640                setAwcCookie(awcValue) {
6641                    if (!awcValue || !this.isValidAwcCookie(awcValue)) {
6642                        return;
6643                    }
6644
6645                    if (this.getActualCookieValue('awc') === awcValue) {
6646                        this.cookieSetSuccess = true;
6647                        return;
6648                    }
6649
6650                    // Use Hyva's cookie system (preferred)
6651                    if (typeof hyva !== 'undefined' && hyva.setCookie) {
6652                        try {
6653                            hyva.setCookie('awc', awcValue, 30);
6654                            setTimeout(() => {
6655                                if (this.getActualCookieValue('awc') === awcValue) {
6656                                    this.cookieSetSuccess = true;
6657                                } else {
6658                                    this.setDirectCookie('awc', awcValue, 30);
6659                                }
6660                            }, 100);
6661                        } catch (e) {
6662                            console.warn('Awin: Hyva setCookie failed, using direct cookie:', e);
6663                            this.setDirectCookie('awc', awcValue, 30);
6664                        }
6665                    } else {
6666                        this.setDirectCookie('awc', awcValue, 30);
6667                    }
6668                },
6669
6670                /**
6671                 * Set cookie directly via document.cookie
6672                 */
6673                setDirectCookie(name, value, days) {
6674                    const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();
6675                    const secure = location.protocol === 'https:' ? '; Secure' : '';
6676                    document.cookie = `${name}=${value}; expires=${expires}; path=/; SameSite=Lax${secure}`;
6677
6678                    if (this.getActualCookieValue(name) === value) {
6679                        this.cookieSetSuccess = true;
6680                    } else {
6681                        console.warn('Awin: Failed to set cookie via document.cookie');
6682                    }
6683                },
6684
6685                /**
6686                 * Read actual cookie value from document.cookie only.
6687                 */
6688                getActualCookieValue(name) {
6689                    if (typeof hyva !== 'undefined' && hyva.getCookie) {
6690                        const value = hyva.getCookie(name);
6691                        if (value) {
6692                            return value;
6693                        }
6694                    }
6695
6696                    const nameEQ = name + "=";
6697                    const ca = document.cookie.split(';');
6698                    for (let i = 0; i < ca.length; i++) {
6699                        let c = ca[i].trim();
6700                        if (c.indexOf(nameEQ) === 0) {
6701                            const value = decodeURIComponent(c.substring(nameEQ.length));
6702                            if (value) return value;
6703                        }
6704                    }
6705
6706                    return null;
6707                },
6708
6709                /**
6710                 * Check if Awin cookie is allowed per Amasty GDPR.
6711                 *
6712                 * Important: Amasty's isCookieAllowed() returns true when
6713                 * amcookie_policy_restriction is missing (treats it as "no policy active").
6714                 * On first page load, this cookie doesn't exist yet (set by Amasty's JS),
6715                 * so we MUST guard against this with a pre-check requiring positive consent.
6716                 */
6717                isAwinCookieAllowed() {
6718                    // Conservative pre-check: require positive consent confirmation.
6719                    // amcookie_allowed must exist — this proves the user interacted with the banner.
6720                    // Without this guard, Amasty's isCookieAllowed() returns true on first load
6721                    // because the policy restriction cookie hasn't been set yet.
6722                    const allowedCookiesAmasty = this.getActualCookieValue('amcookie_allowed');
6723                    if (!allowedCookiesAmasty) {
6724                        return false;
6725                    }
6726
6727                    // Now safe to use Amasty Cookie Manager — consent has been given
6728                    if (typeof window.amastyCookieManager !== 'undefined') {
6729                        return window.amastyCookieManager.isCookieAllowed(this.awinCookieName);
6730                    }
6731
6732                    // Synchronous fallback (mirrors ga.phtml pattern)
6733                    const disallowedRaw = this.getActualCookieValue('amcookie_disallowed');
6734                    const disallowedCookieAmasty = disallowedRaw
6735                        ? decodeURIComponent(disallowedRaw).split(',')
6736                        : [];
6737                    const isDisallowed = disallowedCookieAmasty.includes(this.awinCookieName);
6738
6739                    return !isDisallowed || !window.isGdprCookieEnabled;
6740                },
6741
6742                /**
6743                 * Check if this is a cashback user (sn parameter or cashback in URL)
6744                 */
6745                isCashbackUser() {
6746                    const sn = this.getURLParameter('sn');
6747                    return parseInt(sn) || this.findCashBackMetaTag();
6748                },
6749
6750                isValidAwcCookie(awc) {
6751                    // Check length - AWCs should be around 49 chars (40-60 range)
6752                    if (!awc || typeof awc !== 'string' || awc.length < 40 || awc.length > 60) {
6753                        return false;
6754                    }
6755
6756                    // AWC should start with advertiser ID and have 3 parts separated by underscores
6757                    const pattern = new RegExp('^' + this.advertiserId + '_[a-z0-9]+_[a-z0-9]+$', 'i');
6758                    return pattern.test(awc);
6759                },
6760
6761                /**
6762                 * Apply pending AWC cookie and load Awin script (only call after consent)
6763                 */
6764                applyConsentedActions() {
6765                    if (this.pendingAwc) {
6766                        this.setAwcCookie(this.pendingAwc);
6767                        this.pendingAwc = null;
6768                    }
6769                    this.loadAwinScript();
6770                },
6771
6772                initialize() {
6773                    // Listen for Amasty cookie group updates (as used by ga.phtml)
6774                    window.addEventListener('amasty-cookie-group-updated', () => {
6775                        if (this.isAwinCookieAllowed()) {
6776                            this.applyConsentedActions();
6777                        }
6778                    });
6779
6780                    // Also listen for legacy Amasty events on body (for compatibility)
6781                    document.body.addEventListener('amcookie_save', () => {
6782                        if (this.isAwinCookieAllowed()) {
6783                            this.applyConsentedActions();
6784                        }
6785                    });
6786                    document.body.addEventListener('amcookie_allow', () => {
6787                        if (this.isAwinCookieAllowed()) {
6788                            this.applyConsentedActions();
6789                        }
6790                    });
6791
6792                    // Check if consent is already granted
6793                    if (this.isAwinCookieAllowed()) {
6794                        this.applyConsentedActions();
6795                        return;
6796                    }
6797
6798                    // Cashback users bypass consent for tracking
6799                    if (this.isCashbackUser()) {
6800                        this.applyConsentedActions();
6801                        return;
6802                    }
6803                },
6804
6805                loadAwinScript() {
6806                    if (this.scriptLoaded) return;
6807
6808                    const scriptUrl = "https://www.dwin1.com/" + this.advertiserId + ".js";
6809                    const script = document.createElement('script');
6810                    script.src = scriptUrl;
6811                    script.async = true;
6812                    script.onload = () => {
6813                        this.scriptLoaded = true;
6814                        this.handleScriptLoaded();
6815                    };
6816                    script.onerror = () => {
6817                        console.error('Awin: Failed to load Awin script');
6818                    };
6819                    document.head.appendChild(script);
6820                },
6821
6822                handleScriptLoaded() {
6823                    let consentStatus = this.isAwinCookieAllowed();
6824
6825                    if (this.isCashbackUser()) {
6826                        consentStatus = true;
6827                    }
6828
6829                    this.setAdvertiserConsent(consentStatus);
6830                },
6831
6832                findCashBackMetaTag() {
6833                    return window.location.href.toLowerCase().includes("cashback");
6834                },
6835
6836                setAdvertiserConsent(status) {
6837                    if (typeof AWIN !== 'undefined' && AWIN.Tracking && AWIN.Tracking.Consent) {
6838                        AWIN.Tracking.Consent.setAdvertiserConsentStatus(status);
6839                        AWIN.Tracking.AdvertiserConsent = status;
6840                        //console.log('Awin: Consent set to', status);
6841                    }
6842                },
6843
6844                getURLParameter(sParam) {
6845                    if (!window.location.search) return null;
6846
6847                    const sPageURL = window.location.search.substring(1);
6848                    const sURLVariables = sPageURL.split('&');
6849
6850                    for (let i = 0; i < sURLVariables.length; i++) {
6851                        const sParameterName = sURLVariables[i].split('=');
6852                        if (sParameterName[0] === sParam) {
6853                            return sParameterName[1] ? decodeURIComponent(sParameterName[1]) : null;
6854                        }
6855                    }
6856                    return null;
6857                }
6858            };
6859        }
6860
6861        window.addEventListener(
6862            'alpine:init',
6863            () => Alpine.data('initAwinTracker', initAwinTracker),
6864            {once: true}
6865        );
6866    </script>
6866
6867    
6867<script>
6868(function () {
6869    'use strict';
6870
6871    var url = 'https://www.strunz.com/email/action/capture/';
6872    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
6873
6874    function sendCapture(type, value) {
6875        fetch(url, {
6876            method: 'POST',
6877            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
6878            body: 'type=' + encodeURIComponent(type) + '&value=' + encodeURIComponent(value)
6879        });
6880    }
6881
6882    function onInputChange(e) {
6883        var input = e.target;
6884        var name  = input.name;
6885        var value = input.value;
6886
6887        if ((name === 'email' || name === 'username') && emailRegex.test(value)) {
6888            sendCapture('email', value);
6889        } else if (name === 'firstname' && value.length) {
6890            sendCapture('firstname', value);
6891        } else if (name === 'lastname' && value.length) {
6892            sendCapture('lastname', value);
6893        }
6894    }
6895
6896    setInterval(function () {
6897        var inputs = document.querySelectorAll('input[type="text"], input[type="email"]');
6898
6899        inputs.forEach(function (input) {
6900            if (input.hasAttribute('data-mst-capture-bound')) {
6901                return;
6902            }
6903
6904            input.setAttribute('data-mst-capture-bound', '1');
6905            input.addEventListener('change', onInputChange);
6906        });
6907    }, 1000);
6908})();
6909</script>
vendor: 1 bytes, line 6909
6909
6910<script>
6911    (function () {
6912        'use strict';
6913
6914        var STORAGE_KEY = 'foryou_yt_2click';
6915        var STORAGE_TTL_DAYS = 180;
6916        var MARKETING_GROUP = '2';
6917
6918        function readStoredConsent() {
6919            try {
6920                var raw = window.localStorage.getItem(STORAGE_KEY);
6921                if (!raw) {
6922                    return false;
6923                }
6924                var data = JSON.parse(raw);
6925                if (!data || !data.granted || !data.ts) {
6926                    return false;
6927                }
6928                return (Date.now() - data.ts) <= STORAGE_TTL_DAYS * 24 * 60 * 60 * 1000;
6929            } catch (e) {
6930                return false;
6931            }
6932        }
6933
6934        function writeStoredConsent() {
6935            try {
6936                window.localStorage.setItem(STORAGE_KEY, JSON.stringify({granted: true, ts: Date.now()}));
6937            } catch (e) {
6938                // localStorage unavailable (private mode, quota) - falls back to a session-only "allowed" state
6939            }
6940        }
6941
6942        function clearStoredConsent() {
6943            try {
6944                window.localStorage.removeItem(STORAGE_KEY);
6945            } catch (e) {
6946                // nothing to clear
6947            }
6948        }
6949
6950        // Deliberately independent of the Amasty Marketing group: the two-click itself is its own legal
6951        // basis and is never written back into amcookie_allowed, and - by explicit product decision - it is
6952        // NOT shortcut by an already-granted Marketing consent either. Accepting the general cookie banner
6953        // (very often "Alle akzeptieren") must not silently also start loading YouTube content; only a click
6954        // on a video's own placeholder ever sets `allowed`.
6955        function isMarketingConsentGranted() {
6956            return typeof window.hyva !== 'undefined'
6957                && typeof window.hyva.isConsentGranted === 'function'
6958                && window.hyva.isConsentGranted(MARKETING_GROUP);
6959        }
6960
6961        function initYoutubeConsentStore() {
6962            return {
6963                allowed: readStoredConsent(),
6964
6965                allow: function () {
6966                    this.allowed = true;
6967                    writeStoredConsent();
6968                },
6969
6970                // Only ever invoked from an explicit click on the cookie bar's Save/Allow button (see the
6971                // hyva.onCookie...Click wiring below) - never from a passive page load. Marketing consent
6972                // being granted there never grants video consent (see above), but withdrawing it is treated
6973                // as also withdrawing a previously self-granted two-click choice - the visitor's own
6974                // deliberate action to tighten their privacy settings, not something inferred on their
6975                // behalf, and the only "revoke" affordance this feature has.
6976                onConsentAction: function () {
6977                    if (!isMarketingConsentGranted()) {
6978                        clearStoredConsent();
6979                        this.allowed = false;
6980                    }
6981                }
6982            };
6983        }
6984
6985        window.addEventListener(
6986            'alpine:init',
6987            function () {
6988                Alpine.store('youtubeConsent', initYoutubeConsentStore());
6989            },
6990            {once: true}
6991        );
6992
6993        if (typeof window.hyva !== 'undefined'
6994            && typeof window.hyva.onCookieAllowButtonClick === 'function'
6995            && typeof window.hyva.onCookieSettingsChanged === 'function'
6996        ) {
6997            window.hyva.onCookieAllowButtonClick(function () {
6998                Alpine.store('youtubeConsent') && Alpine.store('youtubeConsent').onConsentAction();
6999            });
7000            window.hyva.onCookieSettingsChanged(function () {
7001                Alpine.store('youtubeConsent') && Alpine.store('youtubeConsent').onConsentAction();
7002            });
7003        }
7004    })();
7005</script>
7005
7006
7007<script>
7008    let SnapSlider = class {
7009        constructor(el, {
7010            labelSepparator = 'von',
7011            autoPager,
7012            groupPager
7013        } = {}) {
7014            this.el = el;
7015            this.track = this.el.querySelector("[data-track]");
7016            if (!this.track) {
7017                console.warn(
7018                    "No Slider track defined, reverting back to CSS slider.\nPlease create a wrapper for your slides with the attribute data-track",
7019                    this.el
7020                );
7021                return;
7022            }
7023            this.initialLoad = true;
7024            this.slides = [];
7025            this.inViewObserver;
7026            this.mutationObserver;
7027            this.resizeObserver;
7028            this.pager = this.el.querySelector("[data-pager]");
7029            this.navBtns = Array.from(
7030                this.el.querySelectorAll("[data-next], [data-prev]")
7031            );
7032            this.slideLabelSepparator = this.el.dataset.slideLabelSepparator || labelSepparator;
7033            this.useAutoPager = autoPager || this.el.hasAttribute("data-auto-pager") || false;
7034            this.useGroupPager = groupPager || this.el.hasAttribute("data-group-pager") || false;
7035            this.sliderLabel = this.el.hasAttribute("aria-label") && this.el.getAttribute("aria-label").toLowerCase().trim().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "");
7036            this.sliderId = this.el.id || this.sliderLabel || "slider";
7037            this.markerIdName = "data-target-id";
7038            this.pagerClasses = this.el.dataset.pagerClass || "snap-pager";
7039            this.markerClasses = this.el.dataset.markerClass || "snap-marker";
7040            this.init();
7041        }
7042        init() {
7043            this.setupSlides();
7044            this.setupNav();
7045            if (this.useAutoPager) {
7046                this.createPager();
7047            } else {
7048                this.setupPager();
7049            }
7050            this.setupObservers();
7051            this.setupMutationObserver();
7052            this.setupResizeObserver();
7053            this.el.addEventListener("click", this.eventHandler.bind(this));
7054            this.el.addEventListener("keydown", this.eventHandler.bind(this));
7055        }
7056        destroy() {
7057            this.inViewObserver?.disconnect();
7058            this.mutationObserver?.disconnect();
7059            this.resizeObserver?.disconnect();
7060            this.el.removeEventListener("click", this.eventHandler.bind(this));
7061            this.el.removeEventListener("keydown", this.eventHandler.bind(this));
7062        }
7063        roundUpIfGreaterThan(number, min = 8) {
7064            const decimalPart = number - Math.floor(number);
7065            return decimalPart >= min ? Math.ceil(number) : Math.floor(number);
7066        }
7067        getInViewItems() {
7068            const inViewSlides = this.track.querySelectorAll("[data-in-view]");
7069            const firstInViewSlide = inViewSlides[0] || null;
7070            const lastInViewSlide = inViewSlides[inViewSlides.length - 1] || null;
7071            const isAtStart = firstInViewSlide === this.slides[0];
7072            const isAtEnd = lastInViewSlide === this.slides[this.slides.length - 1];
7073            return {
7074                inViewSlides,
7075                totalInViewSlides: inViewSlides.length,
7076                firstInViewSlide,
7077                lastInViewSlide,
7078                isAtStart,
7079                isAtEnd,
7080                hasNoOverflow: isAtStart && isAtEnd
7081            };
7082        }
7083        groupPagerMarkers() {
7084            if (this.slides.length === 0 || !this.pager || !this.useGroupPager) return;
7085            const totalVisibleSlides = this.roundUpIfGreaterThan(
7086                this.track.offsetWidth / this.slides[0].offsetWidth
7087            );
7088            const markers = Array.from(this.pager.querySelectorAll("a, button"));
7089            markers.forEach((marker, index) => {
7090                marker.style.display = index % totalVisibleSlides === 0 ? null : "none";
7091            });
7092        }
7093        handleInView(entries) {
7094            entries.forEach((entry) => {
7095                const marker = this.pager && (this.pager.querySelector(`[href="#${entry.target.id}"]`) || this.pager.querySelector(
7096                    `[${this.markerIdName}="${entry.target.id}"]`
7097                ));
7098                entry.target.toggleAttribute("data-in-view", entry.isIntersecting);
7099                entry.target.toggleAttribute("inert", !entry.isIntersecting);
7100                marker?.setAttribute("aria-current", entry.isIntersecting);
7101                marker?.setAttribute("tabindex", entry.isIntersecting ? "0" : "-1");
7102            });
7103            const {
7104                isAtStart,
7105                isAtEnd,
7106                hasNoOverflow
7107            } = this.getInViewItems();
7108            this.navBtns.forEach((btn) => {
7109                if (btn.hasAttribute("data-next")) {
7110                    btn.style.visibility = hasNoOverflow ? "hidden" : null;
7111                    isAtEnd ? btn.setAttribute("disabled", "") : btn.removeAttribute("disabled");
7112                }
7113                if (btn.hasAttribute("data-prev")) {
7114                    btn.style.visibility = hasNoOverflow ? "hidden" : null;
7115                    isAtStart ? btn.setAttribute("disabled", "") : btn.removeAttribute("disabled");
7116                }
7117            });
7118            if (this.pager) {
7119                this.pager.style.visibility = hasNoOverflow ? "hidden" : null;
7120            }
7121            if (!this.initialLoad) {
7122                this.el.dispatchEvent(
7123                    new CustomEvent("slideChange", {
7124                        detail: this.getInViewItems()
7125                    })
7126                );
7127            } else {
7128                this.initialLoad = false;
7129            }
7130            if (document.activeElement.parentElement.hasAttribute("data-pager")) {
7131                const activeItems = this.pager.querySelectorAll('[tabindex="0"]');
7132                if (activeItems.length) {
7133                    activeItems[0].focus({ preventScroll: true });
7134                }
7135            }
7136        }
7137        getSlides() {
7138            if (!this.track) return [];
7139            return Array.from(this.track.children).filter(
7140                (child) => child.tagName.toLowerCase() !== "template" && child.tagName.toLowerCase() !== "style" && child.tagName.toLowerCase() !== "script"
7141            );
7142        }
7143        refreshSlides() {
7144            this.initialLoad = true;
7145            this.slides = this.getSlides();
7146            this.setupSlides();
7147            if (this.useAutoPager) {
7148                this.createPager();
7149            } else {
7150                this.setupPager();
7151            }
7152            this.groupPagerMarkers();
7153            this.setupObservers();
7154        }
7155        setupSlides() {
7156            this.slides = this.getSlides();
7157            this.slides.forEach((slide, index) => {
7158                const totalSlides = this.slides.length;
7159                const currentSlide = index + 1;
7160                const existingLabel = slide.getAttribute("aria-label") || "";
7161                const isImage = slide.tagName.toLowerCase() === "img" || slide.tagName.toLowerCase() === "picture";
7162                const slideLabelTag = isImage ? "alt" : "aria-label";
7163                const hasAutoLabel = existingLabel.startsWith(
7164                    `${currentSlide} ${this.slideLabelSepparator} `
7165                );
7166                if (!slide.hasAttribute("id")) {
7167                    slide.setAttribute(
7168                        "id",
7169                        `${this.sliderId}-item-${currentSlide}`
7170                    );
7171                }
7172                if (!slide.hasAttribute(slideLabelTag) || slide.getAttribute(slideLabelTag) === "" || hasAutoLabel) {
7173                    slide.setAttribute(
7174                        slideLabelTag,
7175                        `${currentSlide} ${this.slideLabelSepparator} ${totalSlides}`
7176                    );
7177                }
7178                if (slide.tagName.toLowerCase() === "div" && !slide.hasAttribute("role")) {
7179                    slide.setAttribute("role", "group");
7180                }
7181                if (this.pager && !isImage) {
7182                    slide.setAttribute("role", "tabpanel");
7183                }
7184                if (slide.getAttribute("role") === "group") {
7185                    slide.setAttribute("aria-roledescription", "item");
7186                }
7187            });
7188            if (!this.el.hasAttribute("role") && this.el.tagName !== "SECTION") {
7189                this.el.setAttribute("role", "region");
7190            }
7191            if (!this.el.hasAttribute("aria-roledescription")) {
7192                this.el.setAttribute("aria-roledescription", "carousel");
7193            }
7194            this.track.setAttribute("tabindex", 0);
7195            this.track.setAttribute("aria-live", "polite");
7196        }
7197        setupNav() {
7198            this.navBtns.forEach((btn) => {
7199                btn.setAttribute("disabled", "");
7200                btn.removeAttribute("hidden");
7201                btn.classList.remove("invisible");
7202                btn.style.visibility = null;
7203            });
7204        }
7205        createPager() {
7206            const newPager = document.createElement("nav");
7207            newPager.setAttribute("data-pager", "");
7208            newPager.setAttribute("role", "tablist");
7209            newPager.classList.add(...this.pagerClasses.split(" "));
7210            this.slides.forEach((slide, index) => {
7211                const marker = document.createElement("button");
7212                const slideId = slide.id || `${this.sliderId}-item-${index + 1}`;
7213                marker.setAttribute(this.markerIdName, slideId);
7214                marker.classList.add(...this.markerClasses.split(" "));
7215                this.setupPagerMarker(marker, index);
7216                newPager.appendChild(marker);
7217                if (slide.tagName.toLowerCase() !== "img" && slide.tagName.toLowerCase() !== "picture") {
7218                    slide.removeAttribute("aria-roledescription");
7219                    slide.setAttribute("role", "tabpanel");
7220                }
7221            });
7222            if (this.pager) {
7223                this.pager.setAttribute("role", "tablist");
7224                this.pager.replaceChildren(...newPager.children);
7225            } else {
7226                this.track.after(newPager);
7227                this.pager = this.el.querySelector("[data-pager]");
7228            }
7229        }
7230        setupPager() {
7231            if (!this.pager) return;
7232            this.pager.setAttribute("role", "tablist");
7233            const items = Array.from(this.pager.querySelectorAll("a, button"));
7234            items.forEach((marker, index) => this.setupPagerMarker(marker, index));
7235        }
7236        setupPagerMarker(marker, index) {
7237            const markerId = marker.getAttribute("href")?.slice(1) || marker.getAttribute(this.markerIdName);
7238            const slideId = markerId || `${this.sliderId}-item-${index + 1}`;
7239            if (!markerId) {
7240                marker.setAttribute(this.markerIdName, slideId);
7241            }
7242            marker.setAttribute("role", "tab");
7243            marker.setAttribute("aria-controls", slideId);
7244            marker.setAttribute("aria-posinset", index + 1);
7245            marker.setAttribute("aria-setsize", this.slides.length);
7246            marker.setAttribute("tabindex", "-1");
7247            if (!marker.hasAttribute("aria-label")) {
7248                marker.setAttribute("aria-label", `Slide ${index + 1}`);
7249            }
7250        }
7251        setupObservers() {
7252            if (this.inViewObserver) {
7253                this.inViewObserver.disconnect();
7254            }
7255            this.inViewObserver = new IntersectionObserver(
7256                this.handleInView.bind(this), {
7257                    root: this.track,
7258                    threshold: 0.8
7259                }
7260            );
7261            this.slides.forEach((slide) => this.inViewObserver.observe(slide));
7262        }
7263        setupMutationObserver() {
7264            this.mutationObserver = new MutationObserver(
7265                this.refreshSlides.bind(this)
7266            );
7267            this.mutationObserver.observe(this.track, {
7268                childList: true,
7269                subtree: false
7270            });
7271        }
7272        setupResizeObserver() {
7273            this.resizeObserver = new ResizeObserver(
7274                this.groupPagerMarkers.bind(this)
7275            );
7276            this.resizeObserver.observe(this.el);
7277        }
7278        goToSlideDir(dir = "next") {
7279            const {
7280                firstInViewSlide,
7281                lastInViewSlide
7282            } = this.getInViewItems();
7283            const isPrev = dir === "prev";
7284            let targetSlide = isPrev ? firstInViewSlide?.previousElementSibling : lastInViewSlide?.nextElementSibling;
7285            if (!targetSlide) return;
7286            if (targetSlide.tagName.toLowerCase() === "template") {
7287                targetSlide = isPrev ? targetSlide?.previousElementSibling : targetSlide?.nextElementSibling;
7288            }
7289            targetSlide.scrollIntoView({ block: "nearest", inline: isPrev ? "end" : "start" });
7290        }
7291        pagerToSlide(event) {
7292            if (!event.target.closest("[data-pager]")) return;
7293            const marker = event.target.closest("a, button");
7294            if (!marker) return;
7295            event.preventDefault();
7296            const slideId = marker.getAttribute("href")?.slice(1) || marker.getAttribute(this.markerIdName);
7297            const targetSlide = this.track.querySelector(`#${slideId}`);
7298            targetSlide?.scrollIntoView({ block: "nearest", inline: "start" });
7299        }
7300        eventHandler(event) {
7301            const target = event.target.closest(
7302                "[data-next], [data-prev], [data-pager]"
7303            );
7304            if (!target) return;
7305            if (event.type === "click") {
7306                if (target.hasAttribute("data-next")) {
7307                    this.goToSlideDir("next");
7308                } else if (target.hasAttribute("data-prev")) {
7309                    this.goToSlideDir("prev");
7310                } else if (target.closest("[data-pager]")) {
7311                    this.pagerToSlide(event);
7312                }
7313            }
7314            if (event.type === "keydown" && target.closest("[data-pager]")) {
7315                if (event.key === "ArrowRight") {
7316                    this.goToSlideDir("next");
7317                } else if (event.key === "ArrowLeft") {
7318                    this.goToSlideDir("prev");
7319                }
7320            }
7321        }
7322    };
7323
7324    (() => {
7325        function alpineSnapSlider(Alpine) {
7326            Alpine.directive("snap-slider", (el, {
7327                modifiers
7328            }, {
7329                cleanup
7330            }) => {
7331                const autoPager = modifiers.includes("auto-pager");
7332                const groupPager = modifiers.includes("group-pager");
7333                const slider = new SnapSlider(el, {
7334                    autoPager,
7335                    groupPager
7336                });
7337                cleanup(() => {
7338                    slider.destroy();
7339                });
7340            });
7341        }
7342
7343        document.addEventListener("alpine:init", () => {
7344            window.Alpine.plugin(alpineSnapSlider);
7345        });
7346    })();
7347    //# sourceURL=alpine-snap-slider.js
7348</script>
7348
7349
7350<script>
7351    (() => {
7352        // src/dialog.js
7353        function dialog_default(Alpine) {
7354            Alpine.directive("htmldialog", fylgjaAlpineDialog);
7355            function fylgjaAlpineDialog(el, { expression, modifiers }, { evaluateLater, cleanup }) {
7356            const evaluate = expression.length ? evaluateLater(expression) : () => {};
7357            const canEvaluate = expression.length > 0;
7358            const lockPageScroll = modifiers.includes("noscroll");
7359            const closeBy = el.getAttribute("closeby") || modifierValue(modifiers, "closeby", "closerequest");
7360            el.style.display = null;
7361            el.style.length === 0 && el.removeAttribute("style");
7362            if (el._x_isShown) {
7363                open();
7364            }
7365            const closeBySupported = (() => {
7366                return "closedBy" in HTMLDialogElement.prototype;
7367            })();
7368            function scrollLock(use = true) {
7369                document.body.style.overflow = use ? "hidden" : "";
7370            }
7371            function dialogSubmit(event) {
7372                if (event.target.getAttribute("method") === "dialog" || event.submitter?.getAttribute("formmethod") === "dialog") {
7373                event.preventDefault();
7374                evaluate();
7375                }
7376            }
7377            function escapeDialog(event) {
7378                if (event.key !== "Escape") return;
7379                event.preventDefault();
7380                if (closeBy === "none") return;
7381                evaluate();
7382            }
7383            function handleCloseByEvent(event) {
7384                if (event.target !== el) return;
7385                const rect = el.getBoundingClientRect();
7386                const isInDialog = rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
7387                if (!isInDialog) {
7388                if (closeBy === "any") {
7389                    if (closeBySupported) {
7390                    event.preventDefault();
7391                    }
7392                    evaluate();
7393                }
7394                }
7395            }
7396            function handleCloseEvent() {
7397                evaluate();
7398            }
7399            function open() {
7400                if (el.hasAttribute("open")) return;
7401                el.showModal();
7402                scrollLock(lockPageScroll);
7403            }
7404            function close() {
7405                if (!el.hasAttribute("open")) return;
7406                el.close();
7407                scrollLock(false);
7408            }
7409            el._x_doShow = () => open();
7410            el._x_doHide = () => close();
7411            el.addEventListener("keydown", escapeDialog);
7412            el.addEventListener("submit", dialogSubmit);
7413            el.addEventListener("click", handleCloseByEvent);
7414            el.addEventListener("cancel", handleCloseEvent);
7415            cleanup(() => {
7416                el.removeEventListener("keydown", escapeDialog);
7417                el.removeEventListener("submit", dialogSubmit);
7418                el.removeEventListener("click", handleCloseByEvent);
7419                el.removeEventListener("cancel", handleCloseEvent);
7420                scrollLock(false);
7421            });
7422            }
7423        }
7424        function modifierValue(modifiers, key, fallback) {
7425            if (modifiers.indexOf(key) === -1) return fallback;
7426            const rawValue = modifiers[modifiers.indexOf(key) + 1];
7427            if (!rawValue) return fallback;
7428            if (key === "closeby") {
7429            const allowedValues = ["auto", "none", "closerequest", "any"];
7430            const options = allowedValues.join(", ");
7431            if (!allowedValues.includes(rawValue)) {
7432                console.warn(
7433                `"${rawValue}" is not one of the allowed values for closeby: ${options}`
7434                );
7435                return fallback;
7436            }
7437            }
7438            return rawValue;
7439        }
7440
7441        // src/cdn.js
7442        document.addEventListener("alpine:init", () => {
7443            window.Alpine.plugin(dialog_default);
7444        });
7445    })();
7446    //# sourceURL=alpine-htmldialog.js
7447</script>
7447
7448
7449<script>
7450    (() => {
7451        function src_default(Alpine) {
7452            Alpine.directive("intersect", Alpine.skipDuringClone((el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
7453                let evaluate = evaluateLater(expression);
7454                let options = {
7455                    rootMargin: getRootMargin(modifiers),
7456                    threshold: getThreshold(modifiers)
7457                };
7458                let observer = new IntersectionObserver((entries) => {
7459                    entries.forEach((entry) => {
7460                        if (entry.isIntersecting === (value === "leave"))
7461                            return;
7462                        evaluate();
7463                        modifiers.includes("once") && observer.disconnect();
7464                    });
7465                }, options);
7466                observer.observe(el);
7467                cleanup(() => {
7468                    observer.disconnect();
7469                });
7470            }));
7471        }
7472        function getThreshold(modifiers) {
7473            if (modifiers.includes("full"))
7474                return 0.99;
7475            if (modifiers.includes("half"))
7476                return 0.5;
7477            if (!modifiers.includes("threshold"))
7478                return 0;
7479            let threshold = modifiers[modifiers.indexOf("threshold") + 1];
7480            if (threshold === "100")
7481                return 1;
7482            if (threshold === "0")
7483                return 0;
7484            return Number(`.${threshold}`);
7485        }
7486        function getLengthValue(rawValue) {
7487            let match = rawValue.match(/^(-?[0-9]+)(px|%)?$/);
7488            return match ? match[1] + (match[2] || "px") : void 0;
7489        }
7490        function getRootMargin(modifiers) {
7491            const key = "margin";
7492            const fallback = "0px 0px 0px 0px";
7493            const index = modifiers.indexOf(key);
7494            if (index === -1)
7495                return fallback;
7496            let values = [];
7497            for (let i = 1; i < 5; i++) {
7498                values.push(getLengthValue(modifiers[index + i] || ""));
7499            }
7500            values = values.filter((v) => v !== void 0);
7501            return values.length ? values.join(" ").trim() : fallback;
7502        }
7503
7504        document.addEventListener("alpine:init", () => {
7505            window.Alpine.plugin(src_default);
7506        });
7507    })();
7508    //# sourceURL=alpine-intersect.js
7509</script>
7509
7510
7511<script>
7512    for (const [selector, deferUntil] of Object.entries({".product-slider section[x-data]:not([x-data] [x-data])":"intersect",".product-info [x-data]:not([x-data] [x-data])":"intersect","#filters-content [x-data]:not([x-data] [x-data])":"intersect","#review_form":"intersect","section[x-data^=initRecentlyViewedProductsComponent]":"intersect","div[x-data^=initBundleOptions]":"intersect","#product_addtocart_form [x-data]:not([x-data] [x-data])":"intersect","#notice-cookie-block":"idle"})) {
7513        document.querySelectorAll(selector).forEach(el => el.setAttribute('x-defer', `${deferUntil}`));
7514    }
7515    //# sourceURL=alpine-defer-rules.js
7516</script>
vendor: 1 bytes, line 7516
7516
7517<script>
7518    (() => {
7519        const hasAlpine = new Promise(resolve => {
7520            window.addEventListener('alpine:initialized', resolve, {once: true, passive: true});
7521        });
7522
7523        const hasInteract = new Promise(resolve => {
7524            (events => {
7525                const onInteract = () => {
7526                    resolve();
7527                    events.forEach(type => window.removeEventListener(type, onInteract));
7528                }
7529                events.forEach(type => window.addEventListener(type, onInteract, {once: true, passive: true}))
7530            })(['touchstart', 'mouseover', 'wheel', 'scroll', 'keydown'])
7531        });
7532
7533        const onIntersect = (el) => {
7534            return new Promise(resolve => {
7535                const observer = new IntersectionObserver(entries => {
7536                    for (const entry of entries) {
7537                        if (entry.isIntersecting) {
7538                            observer.disconnect()
7539                            resolve();
7540                        }
7541                    }
7542                }, {});
7543                observer.observe(el);
7544            });
7545        }
7546
7547        function runComponent(el) {
7548            hasAlpine.then(() => {
7549                el.removeAttribute('x-ignore');
7550                queueMicrotask(() => Alpine.initTree(el));
7551            });
7552        }
7553
7554        function initDeferredComponents() {
7555            document.querySelectorAll('[x-data][x-defer]').forEach(el => {
7556                el.setAttribute('x-ignore', '');
7557                const deferUntil = (el.getAttribute('x-defer') || '').trim();
7558                switch (deferUntil) {
7559                    case 'interact':
7560                        hasInteract.then(() => runComponent(el));
7561                        break;
7562                    case 'intersect':
7563                        onIntersect(el).then(() => runComponent(el))
7564                        break;
7565                    case 'idle':
7566                        window.requestIdleCallback
7567                            ? window.requestIdleCallback(() => runComponent(el), {timeout: 4000})
7568                            : setTimeout(() => runComponent(el), 4000);
7569                        break;
7570                    case 'eager':
7571                        runComponent(el);
7572                        break;
7573                    default:
7574                        if (deferUntil.startsWith('event:') && deferUntil.length > 6) {
7575                            window.addEventListener(deferUntil.substring(6), () => runComponent(el), {once: true, passive: true});
7576                        }
7577                }
7578            });
7579        }
7580
7581        window.addEventListener('alpine:init', initDeferredComponents, {once: true, passive: true});
7582    })();
7583    //# sourceURL=alpine-defer.js
7584</script>
7584
7585
7586
7587<script>
7588    function createAjaxLoader() {
7589        const loader = document.createElement('div');
7590        loader.className = 'absolute inset-0 flex justify-center items-center loader';
7591        loader.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2" stroke-linecap="round" class="w-full h-full p-2" role="img">
7592    <circle style="opacity: .3;" cx="12" cy="12" r="10"/>
7593    <path fill="none" stroke-width="2" d="M12,2 a10,10 0 0,1 10,10"/>
7594<title>Laden...</title></svg>
7595`;
7596        return loader;
7597    }
7598
7599    function addAjaxLoader(button, loader) {
7600        button.setAttribute('data-label', button.getAttribute('aria-label'));
7601        button.removeAttribute('aria-label');
7602        button.prepend(loader);
7603        button.classList.add('relative', '[&>:not(.loader)]:invisible');
7604        button.disabled = true;
7605    }
7606
7607    function removeAjaxLoader(button, loader) {
7608        button.setAttribute('aria-label', button.getAttribute('data-label'));
7609        button.removeAttribute('data-label');
7610        loader.remove();
7611        button.classList.remove('[&>:not(.loader)]:invisible');
7612        button.disabled = false;
7613    }
7614
7615    function sleep(ms) {
7616        return new Promise(r => setTimeout(r, ms));
7617    }
7618
7619    async function safeParseResponse(response) {
7620        const contentType = (response.headers.get('content-type') || '').toLowerCase();
7621        try {
7622            if (contentType.includes('application/json')) {
7623                return { type: 'json', data: await response.json() };
7624            }
7625        } catch (e) {
7626            // fall through to text
7627        }
7628
7629        try {
7630            const text = await response.text();
7631            // some endpoints may still return JSON with wrong content-type
7632            try {
7633                return { type: 'json', data: JSON.parse(text) };
7634            } catch (e) {
7635                return { type: 'text', data: text };
7636            }
7637        } catch (e) {
7638            return { type: 'unknown', data: null };
7639        }
7640    }
7641
7642    async function loadAndDispatchMagentoMessages({retries = 3, delayMs = 120} = {}) {
7643        if (typeof window.dispatchMessages === 'undefined') return;
7644
7645        const base = (window.BASE_URL || '/').replace(/\/?$/, '/');
7646        const url = base + 'customer/section/load/?sections=messages&force_new_section_timestamp=true';
7647
7648        for (let attempt = 0; attempt <= retries; attempt++) {
7649            try {
7650                const res = await fetch(url, {
7651                    method: 'GET',
7652                    credentials: 'include',
7653                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
7654                });
7655
7656                if (res.ok) {
7657                    const data = await res.json();
7658                    const msgs = data && data.messages && data.messages.messages;
7659                    if (Array.isArray(msgs) && msgs.length) {
7660                        window.dispatchMessages(msgs.map(m => ({ type: m.type, text: m.text })), 5000);
7661                        return true;
7662                    }
7663                }
7664            } catch (e) {
7665                // ignore and retry
7666            }
7667
7668            if (attempt < retries) {
7669                await sleep(delayMs * (attempt + 1));
7670            }
7671        }
7672
7673        return false;
7674    }
7675
7676    async function addAjaxCartForm(form, extraDelay = 500, submitEvent = null) {
7677        if (!form) return;
7678
7679        const evt = submitEvent || window.event;
7680        if (evt && typeof evt.preventDefault === 'function') {
7681            evt.preventDefault();
7682        }
7683
7684        if (!form.reportValidity()) {
7685            return form.submit();
7686        }
7687
7688        const formData = new FormData(form);
7689        const button = form.querySelector('button:not([type=button], [type=reset])')
7690            ? form.querySelector('button:not([type=button], [type=reset])')
7691            : document.getElementById('product-addtocart-button');
7692        const loader = createAjaxLoader(button);
7693        const formUenc = hyva.getUenc();
7694        const postUrl = (evt && evt.target && evt.target.action ? evt.target.action : form.action).replace('%25uenc%25', formUenc);
7695
7696        let bodyUrl = new URLSearchParams(formData);
7697        bodyUrl.append("uenc", formUenc);
7698        addAjaxLoader(button, loader);
7699
7700        try {
7701            const response = await fetch(postUrl, {
7702                method: 'POST',
7703                body: bodyUrl.toString(),
7704                mode: "cors",
7705                credentials: "include",
7706                headers: {
7707                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
7708                    'X-Requested-With': 'XMLHttpRequest'
7709                }
7710            });
7711
7712            if (!response.ok) {
7713                return form.submit();
7714            }
7715
7716            if (response.redirected) {
7717                return window.location.href = response.url;
7718            }
7719
7720            const parsed = await safeParseResponse(response);
7721
7722            // If we received HTML/text, Magento likely wants a redirect or showed a 
7722server-side message.
7723            // Best effort: reload messages/sections and stop blocking UX.
7724            if (parsed.type !== 'json' || !parsed.data) {
7725                window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
7726                void loadAndDispatchMagentoMessages({ retries: 6, delayMs: 150 });
7727                return;
7728            }
7729
7730            const responseData = parsed.data;
7731
7732            if (responseData.backUrl) {
7733                return window.location.href = responseData.backUrl;
7734            }
7735
7736            // Some add-to-cart endpoints may already provide messages in the JSON response
7737            if (Array.isArray(responseData.messages) && typeof window.dispatchMessages !== 'undefined') {
7738                window.dispatchMessages(
7739                    responseData.messages.map(m => ({ type: m.type, text: m.text })),
7740                    5000
7741                );
7742            }
7743
7744            // Trigger Hyvä customer-sections reload (cart, messages, etc.)
7745            window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
7746
7747            // Don't block the add-to-cart UX by waiting for section/message loads.
7748            // We fire message load in the background with retries to avoid the "only after reload" case.
7749            void loadAndDispatchMagentoMessages({ retries: 6, delayMs: 150 });
7750
7751                    } catch (err) {
7752            console.warn(err);
7753            window.dispatchEvent(new CustomEvent('product-addtocart-error'));
7754
7755            if (typeof window.dispatchMessages === "undefined") return;
7756            window.dispatchMessages([{
7757                text:'Es\u0020gab\u0020ein\u0020Problem\u0020beim\u0020Hinzuf\u00FCgen\u0020Ihres\u0020Artikels\u0020zum\u0020Warenkorb.',
7758                type: 'error'
7759            }], 5000);
7760        } finally {
7761            // Remove loader quickly for snappy UX; section reloads run in background.
7762            setTimeout(() => removeAjaxLoader(button, loader), Math.min(extraDelay, 250));
7763        }
7764    }
7765
7766    function removeAjaxCartForm(form) {
7767        removeEventListener('submit', form);
7768    }
7769
7770    document.addEventListener('submit', function(event) {
7771        if (!event.target.matches('#product_addtocart_form, .product_addtocart_form')) return;
7772        addAjaxCartForm(event.target, 500, event);
7773    });
7774</script>
7774
7775
7776
7777
7778
7779<script type="module"
7780        src="https://www.strunz.com/static/version1790749608/frontend/Foryou/hyva_child/de_DE/Hyva_Theme/js/alpine3.min.js"
7781        defer
7782        crossorigin
7783></script>
vendor: 1 bytes, line 7783
7783
7784<script>
7785    function dispatchMessages(messages, hideAfter) {
7786        const messagesEvent = new CustomEvent("messages-loaded", {
7787            detail: {
7788                messages: messages,
7789                hideAfter: hideAfter
7790            }
7791        });
7792        window.dispatchEvent(messagesEvent);
7793    }
7794
7795    if (typeof hyva === 'undefined' || (!hyva.getBrowserStorage || !hyva.getCookie || !hyva.setCookie)) {
7796        console.warn("Hyvä helpers are not loaded yet. Make sure they are included before this script");
7797    }
7798
7799    (function( hyva, undefined ) {
7800
7801        hyva.initFormKey = () => {
7802            const inputSelector = 'input[name="form_key"]',
7803                formKey = hyva.getFormKey();
7804
7805            Array.from(document.querySelectorAll(inputSelector)).map(function (input) {
7806                input.value = formKey
7807            });
7808        }
7809
7810        hyva.initMessages = () => {
7811            try {
7812                const messages = hyva.getCookie('mage-messages');
7813                window.mageMessages = messages ? JSON.parse(decodeURIComponent(messages).replace(/\+/g, ' ')) : [];
7814
7815                dispatchMessages(window.mageMessages);
7816
7817                                // empty `mage-messages` cookie
7818                const skipSetDomain = true;
7819                hyva.setCookie('mage-messages','', -1, skipSetDomain);
7820
7821            } catch (error) {
7822                console.warn('Error parsing Cookie Messages:', error);
7823            }
7824        }
7825
7826        window.addEventListener('DOMContentLoaded', hyva.initFormKey);
7827        hyva.alpineInitialized(hyva.initMessages)
7828
7829    }( window.hyva = window.hyva || {} ));
7830    //# sourceURL=hyva-cookies.js
7831</script>
vendor: 1 bytes, line 7831
7831
7832<script>
7833    {
7834        const private_content_key = 'mage-cache-storage';
7835        const private_content_expire_key = 'mage-cache-timeout';
7836        const private_content_version_key = 'private_content_version';
7837        const section_data_ids_key = 'section_data_ids';
7838        const mage_cache_session_id_key = 'mage-cache-sessid';
7839        const last_visited_store_key = 'last_visited_store';
7840
7841        const ttl = 3600;
7842
7843        if (typeof hyva === 'undefined' || (!hyva.getBrowserStorage || !hyva.getCookie || !hyva.setCookie)) {
7844            console.warn("Hyvä helpers are not loaded yet. Make sure they are included before this script");
7845        }
7846
7847        function loadSectionData () {
7848            const browserStorage = hyva.getBrowserStorage();
7849            if (!browserStorage) {
7850                typeof window.dispatchMessages !== "undefined" && window.dispatchMessages(
7851                    [{
7852                        type: "warning",
7853                        text: "Bitte aktivieren Sie LocalStorage in Ihrem Browser."
7854                    }]
7855                );
7856                return;
7857            }
7858            try {
7859                let isInvalid = false;
7860
7861                if (hyva.getCookie(last_visited_store_key) !== CURRENT_STORE_CODE) {
7862                    isInvalid = true;
7863                }
7864                hyva.setCookie(last_visited_store_key, CURRENT_STORE_CODE, false, false);
7865
7866                if (!hyva.getCookie(mage_cache_session_id_key)) {
7867                    isInvalid = true;
7868                    browserStorage.removeItem(private_content_key);
7869                    const skipSetDomain = true;
7870                    const days = false;
7871                    hyva.setCookie(mage_cache_session_id_key, true, days, skipSetDomain)
7872                }
7873
7874                const cookieVersion = hyva.getCookie(private_content_version_key);
7875                const storageVersion = browserStorage.getItem(private_content_version_key);
7876
7877                if (cookieVersion && !storageVersion || cookieVersion !== storageVersion) {
7878                    isInvalid = true;
7879                }
7880
7881                const privateContentExpires = browserStorage.getItem(private_content_expire_key);
7882                if (privateContentExpires && new Date(privateContentExpires) < new Date()) {
7883                    browserStorage.removeItem(private_content_key);
7884                }
7885
7886                if (isInvalid && cookieVersion) {
7887                    fetchPrivateContent([]);
7888                } else if (cookieVersion && storageVersion && cookieVersion === storageVersion) {
7889                    const privateContent = JSON.parse(browserStorage.getItem(private_content_key));
7890                    if (
7891                        privateContent &&
7892                        privateContentExpires &&
7893                        privateContent.cart &&
7894                        privateContent.customer
7895                    ) {
7896                        dispatchPrivateContent(privateContent);
7897                    } else {
7898                        fetchPrivateContent([]);
7899                    }
7900                } else {
7901                    if (document.getElementById('default-section-data')) {
7902                        const privateContent = JSON.parse(document.getElementById('default-section-data').innerText.trim());
7903                        dispatchPrivateContent(privateContent);
7904                    } else {
7905                        dispatchPrivateContent({});
7906                    }
7907                }
7908
7909            } catch (error) {
7910                console.warn('Error retrieving Private Content:', error);
7911            }
7912        }
7913
7914        hyva.alpineInitialized(loadSectionData)
7915        window.addEventListener('reload-customer-section-data', loadSectionData);
7916
7917        window.processSectionDataBeforeDispatch = window.processSectionDataBeforeDispatch || (data => data);
7918
7919        function dispatchPrivateContent(data) {
7920
7921            const privateContentEvent = new CustomEvent("private-content-loaded", {
7922                detail: {
7923                    data: window.processSectionDataBeforeDispatch(data)
7924                }
7925            });
7926            window.dispatchEvent(privateContentEvent);
7927        }
7928
7929        function fetchPrivateContent(sections) {
7930            fetch(`${BASE_URL}customer/section/load/?sections=${encodeURIComponent(sections.join(','))}`, {
7931                method: 'GET',
7932                headers: {
7933                    'Content-Type': 'application/json',
7934                    'X-Requested-With': 'XMLHttpRequest'
7935                }
7936            })
7937                .then(response => response.ok && response.json())
7938                .then(
7939                    data => {
7940                        if (data) {
7941                            try {
7942                                const browserStorage = hyva.getBrowserStorage();
7943
7944                                // merge new data preserving non-invalidated sections
7945                                const oldSectionData = JSON.parse(browserStorage.getItem(private_content_key) || '{}') || {};
7946
7947                                                                if ((! data.cart || ! data.cart.cartId) && oldSectionData['checkout-data']) {
7948                                    delete oldSectionData['checkout-data'];
7949                                }
7950                                const newSectionData = Object.assign(oldSectionData, data);
7951
7952                                dispatchPrivateContent(newSectionData);
7953
7954                                // don't persist messages, they've been dispatched already
7955                                if (newSectionData.messages && newSectionData.messages.messages ) {
7956                                    newSectionData.messages.messages = [];
7957                                }
7958
7959                                browserStorage.setItem(private_content_key, JSON.stringify(newSectionData));
7960
7961                                const expiresAt = new Date(Date.now() + (ttl * 1000)).toISOString();
7962                                browserStorage.setItem(private_content_expire_key, expiresAt);
7963
7964                                const newCookieVersion = hyva.getCookie(private_content_version_key);
7965                                browserStorage.setItem(private_content_version_key, newCookieVersion);
7966
7967                                // We don't need the section_data_ids in Hyvä, but we store them for compatibility
7968                                // with Luma Fallback. Otherwise, not all sections are loaded in Luma Checkout
7969                                hyva.setCookie(
7970                                    section_data_ids_key,
7971                                    JSON.stringify(
7972                                        Object.keys(data).reduce((sectionDataIds, sectionKey) => {
7973                                            sectionDataIds[sectionKey] = data[sectionKey]['data_id'];
7974                                            return sectionDataIds;
7975                                        }, {})
7976                                    ),
7977                                    false,
7978                                    true
7979                                );
7980                            } catch (error) {
7981                                console.warn("Couldn't store privateContent", error);
7982                            }
7983                        }
7984                    }
7985                )
7986                .catch(error => {
7987                    console.warn("Couldn't fetch privateContent", error);
7988                });
7989        }
7990    }
7991    //# sourceURL=hyva-private-content.js
7992</script>
vendor: 1 bytes, line 7992
7992
7993<script>
7994    (() => {
7995        document.addEventListener('submit', event => event.target.action = event.target.action.replace('%25uenc%25', hyva.getUenc()));
7996    })()
7997</script>
vendor: 1 bytes, line 7997
7997
7998<script>
7999    (events => {
8000        const dispatchUserInteractionEvent = () => {
8001            events.forEach(type => window.removeEventListener(type, dispatchUserInteractionEvent))
8002            window.dispatchEvent(new Event('init-external-scripts'))
8003        };
8004        events.forEach(type => window.addEventListener(type, dispatchUserInteractionEvent, {once: true, passive: true}))
8005    })(['touchstart', 'mousemove', 'wheel', 'scroll', 'keydown']);
8006    //# sourceURL=hyva-init-external-scripts.js
8007</script>
vendor: 1 bytes, line 8007
8007
8008<script>
8009    'use strict';
8010
8011    const grecaptchaV2LoadCallbacks = [];
8012
8013    function executeRecaptchaLoadCallbacks () {
8014        while (window.grecaptcha && grecaptchaV2LoadCallbacks.length > 0) {
8015            const callback = grecaptchaV2LoadCallbacks.pop();
8016            typeof callback === 'string' ? window[callback]() : callback();
8017        }
8018    }
8019
8020    (function() {
8021        const loadRecaptchaScript = (event) => {
8022
8023            if (window.grecaptcha || !event.target.form) {
8024                return;
8025            }
8026
8027            const url = 'https://www.google.com/recaptcha/api.js?onload=executeRecaptchaLoadCallbacks';
8028            const siteKey = '6LdfCeEUAAAAAMJTMcG9jmbTYF72aEWJdDEkxuxV';
8029            const script = document.createElement('script');
8030            script.type = 'text/javascript';
8031            script.src = siteKey ? `${url}&render=${siteKey}` : `${url}&render=explicit`;
8032            script.async = true;
8033            document.head.appendChild(script);
8034
8035            script.addEventListener('load', () => {
8036                Array.from(document.querySelectorAll('button[data-recaptcha-btn]:disabled')).forEach(btn => btn.removeAttribute('disabled'));
8037            });
8038        }
8039
8040        window.forceLoadRecaptchaScript = (form) => {
8041            loadRecaptchaScript({target: {form: form || 'dummy'}});
8042            executeRecaptchaLoadCallbacks();
8043        };
8044
8045        document.body.addEventListener('input', loadRecaptchaScript, { once: true });
8046        document.body.addEventListener('focus', loadRecaptchaScript, { once: true });
8047
8048    }());
8049
8050</script>
vendor: 1 bytes, line 8050
8050
8051<script>
8052    (function () {
8053        const etrackerCookieName = '_et_coid';
8054
8055        function applyConsent() {
8056            const isAllowed = window.amastyCookieManager?.isCookieAllowed(etrackerCookieName) ?? false;
8057
8058            function _etrackerApplyConsent() {
8059                isAllowed ? _etracker.enableCookies() : _etracker.disableCookies();
8060            }
8061
8062            if (typeof _etracker !== 'undefined') {
8063                _etrackerApplyConsent();
8064            } else {
8065                window._etrackerOnReady = typeof window._etrackerOnReady === 'object' ? window._etrackerOnReady : [];
8066                window._etrackerOnReady.push(_etrackerApplyConsent);
8067            }
8068        }
8069
8070        window.addEventListener('amasty-cookie-group-updated', applyConsent);
8071        window.addEventListener('private-content-loaded', applyConsent, { once: true });
8072    })();
8073</script>
vendor: 1 bytes, line 8073
8073
8074<script>
8075    (function () {
8076        const allGroups = ['0'];
8077
8078        const resolveAllowEvent = {
8079            getAllowedGroups: () => allGroups
8080        }
8081
8082        const resolveAcceptEvent = {
8083            getAllowedGroups: () => Alpine.store('AmastyCookieGroups').getCheckedGroupIds() ?? []
8084        }
8085
8086        function updateConsent() {
8087            if (!window.amConsentManager) {
8088                return;
8089            }
8090
8091            window.amConsentManager.updateConsent(
8092                window.amConsentManager.getConsentTypeStateByGroupIds(this.getAllowedGroups())
8093            );
8094        }
8095
8096        window.addEventListener('cookiebar-action-accept-finish', updateConsent.bind(resolveAcceptEvent));
8097        window.addEventListener('cookiebar-action-allow-finish', updateConsent.bind(resolveAllowEvent));
8098    })()
8099</script>
8099
8100
8101
8102<script>
8103    'use strict';
8104    (() => {
8105        function _calculateStrength({elementID, valid}) {
8106            const password = document.getElementById(elementID),
8107                emailElm = document.getElementById('email_address');
8108            let displayScore;
8109            // Display score is based on combination of whether password is empty, valid, and zxcvbn strength
8110            if (!password || !password.value) {
8111                displayScore = 0;
8112            } else {
8113                // We should only perform this check in case there is an email field on screen
8114                if (emailElm && password.value && emailElm.value &&
8115                    password.value.toLowerCase() === emailElm.value.toLowerCase()) {
8116                    displayScore = 1;
8117                } else {
8118                    const zxcvbnScore = zxcvbn(password.value).score;
8119                    displayScore = valid && zxcvbnScore > 0 ? zxcvbnScore : 1;
8120                }
8121            }
8122
8123            _displayStrength(displayScore);
8124        }
8125
8126        function _displayStrength(displayScore) {
8127            let strengthLabel = '',
8128                className;
8129
8130            switch (displayScore) {
8131                case 0:
8132                    strengthLabel = "Kein\u0020Passwort";
8133                    className = 'password-none';
8134                    break;
8135
8136                case 1:
8137                    strengthLabel = "Schwach";
8138                    className = 'password-weak';
8139                    break;
8140
8141                case 2:
8142                    strengthLabel = "Medium";
8143                    className = 'password-medium';
8144                    break;
8145
8146                case 3:
8147                    strengthLabel = "Stark";
8148                    className = 'password-strong';
8149                    break;
8150
8151                case 4:
8152                    strengthLabel = "Sehr\u0020Stark";
8153                    className = 'password-very-strong';
8154                    break;
8155            }
8156            const meterElm = document.getElementById('password-strength-meter-container'),
8157                meterLabelElm = document.getElementById('password-strength-meter-label');
8158            meterElm.className = '';
8159            meterElm.classList.add(className);
8160            meterLabelElm.textContent = strengthLabel;
8161        }
8162
8163        let loading = false;
8164        const callbacks = [];
8165
8166        function loadZxcvbn(cb) {
8167            callbacks.push(cb);
8168            if (loading) return;
8169            loading = true;
8170
8171            const script = document.createElement('script');
8172            script.type = 'text/javascript';
8173            script.src = 'https\u003A\u002F\u002Fwww.strunz.com\u002Fstatic\u002Fversion1790749608\u002Ffrontend\u002FForyou\u002Fhyva_child\u002Fde_DE\u002Fjs\u002Fzxcvbn.min.js';
8174            script.async = true;
8175            script.onload = () => callbacks.forEach(cb => cb());
8176            document.head.appendChild(script);
8177        }
8178
8179        window.addEventListener('password-validate', function (evt) {
8180            const meterElm = document.getElementById('password-strength-meter-container'),
8181                meterLabelElm = document.getElementById('password-strength-meter-label');
8182            if (meterElm && meterLabelElm) {
8183                if (evt.detail && evt.detail.elementID) {
8184                    const cb = () => _calculateStrength(evt.detail);
8185                    window.zxcvbn ? cb() : loadZxcvbn(cb)
8186                }
8187            }
8188        });
8189
8190
8191        document.addEventListener('DOMContentLoaded', () => {
8192            hyva && hyva.formValidation && hyva.formValidation.addRule('password-strength', function(value, options, field, context) {
8193                let counter = 0;
8194                const minCharacterSets = options.minCharacterSets !== undefined ?  options.minCharacterSets : 1;
8195                if (value.match(/\d+/)) {
8196                    counter++;
8197                }
8198
8199                if (value.match(/[a-z]+/)) {
8200                    counter++;
8201                }
8202
8203                if (value.match(/[A-Z]+/)) {
8204                    counter++;
8205                }
8206
8207                if (value.match(/[^a-zA-Z0-9]+/)) {
8208                    counter++;
8209                }
8210
8211                queueMicrotask(() => {
8212                    window.dispatchEvent(new CustomEvent('password-validate', { detail: {
8213                            elementID: field.element.id || 'password',
8214                            valid: field.state.valid
8215                        }}));
8216                });
8217
8218                if (counter < minCharacterSets) {
8219                    const missing = minCharacterSets - counter;
8220                    return hyva.str('Das\u0020Passwort\u0020muss\u0020mindestens\u0020\u00251\u0020oder\u0020mehr\u0020der\u0020folgenden\u0020Zeichen\u0020enthalten\u003A\u0020Gro\u00DFbuchstaben\u0020\u0028A\u2013Z\u0029,\u0020Kleinbuchstaben\u0020\u0028a\u2013z\u0029,\u0020Ziffern\u0020und\u0020Sonderzeichen.', missing);
8221                }
8222                return true;
8223            });
8224        })
8225    })();
8226
8227</script>
8227
8228
8229<script>
8230    (() => {
8231        // Check if hyva object and form validation is available
8232        if (hyva && hyva.formValidation) {
8233            hyva.formValidation.addRule('telephone', (value, options, field) => {
8234
8235                const phoneNumber = field.element;
8236
8237                if (!phoneNumber || !phoneNumber.value || phoneNumber.value.trim() === '') {
8238                    return true;
8239                }
8240
8241                const allowedCharsRegex = /^[0-9\-/+ ]+$/;
8242                if (!allowedCharsRegex.test(phoneNumber.value)) {
8243                    return 'Die\u0020Telefonnummer\u0020enth\u00E4lt\u0020ung\u00FCltige\u0020Zeichen.';
8244                }
8245
8246                if (phoneNumber.value.length < (options.minlength || 3)) {
8247                    return 'Die\u0020Telefonnummer\u0020ist\u0020zu\u0020kurz.';
8248                }
8249
8250                return true;
8251            });
8252
8253            const postCodeSpecs = {"AD":{"pattern_1":{"example":"AD100","pattern":"^AD\\d{3}$"}},"AM":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"AR":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"},"pattern_2":{"example":"A1234BCD","pattern":"^[a-zA-z]{1}[0-9]{4}[a-zA-z]{3}$"}},"AS":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"AT":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"AU":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"AX":{"pattern_1":{"example":"22123","pattern":"^22\\d{3}$"}},"AZ":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"},"pattern_2":{"example":"123456","pattern":"^[0-9]{6}$"}},"BA":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"BB":{"pattern_1":{"example":"BB12345","pattern":"^(BB\\d{5})?$"}},"BD":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"BE":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"BG":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"BH":{"pattern_1":{"example":"323","pattern":"^((1[0-2]|[1-9])\\d{2})?$"}},"BM":{"pattern_1":{"example":"MA 02","pattern":"^[A-Z]{2}[ ]?[A-Z0-9]{2}$"}},"BN":{"pattern_1":{"example":"AB1234","pattern":"^[a-zA-z]{2}[0-9]{4}$"}},"BR":{"pattern_1":{"example":"12345678","pattern":"^[0-9]{8}$"},"pattern_2":{"example":"12345-678","pattern":"^[0-9]{5}\\-[0-9]{3}$"}},"BY":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"CA":{"pattern_1":{"example":"A1B 2C3","pattern":"^[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}\\s[0-9]{1}[a-zA-z]{1}[0-9]{1}$"},"pattern_2":{"example":"A1B2C3","pattern":"^[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}[0-9]{1}$"},"pattern_3":{"example":"A1B","pattern":"^[a-zA-z]{1}[0-9]{1}[a-zA-z]{1}$"}},"CC":{"pattern_1":{"example":"6799","pattern":"^6799$"}},"CH":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"CK":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"CL":{"pattern_1":{"example":"1234567","pattern":"^\\d{7}$"}},"CN":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"CR":{"pattern_1":{"example":"12345 or 123-1234","pattern":"^\\d{4,5}|\\d{3}-\\d{4}$"}},"CS":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"CU":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"CV":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"CX":{"pattern_1":{"example":"6798","pattern":"^6798$"}},"CY":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"CZ":{"pattern_1":{"example":"123 45","pattern":"^[0-9]{3}\\s[0-9]{2}$"}},"DE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"DK":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"DO":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"DZ":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"EC":{"pattern_1":{"example":"A1234B or AB123456 or 123456","pattern":"^([A-Z]\\d{4}[A-Z]|(?:[A-Z]{2})?\\d{6})?$"}},"EE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"EG":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"ES":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"ET":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"FI":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"FK":{"pattern_1":{"example":"FIQQ 1ZZ","pattern":"^FIQQ 1ZZ$"}},"FM":{"pattern_1":{"example":"96941","pattern":"^(9694[1-4])([ \\-]\\d{4})?$"}},"FO":{"pattern_1":{"example":"123","pattern":"^\\d{3}$"}},"FR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GB":{"pattern_1":{"example":"AB12 3CD","pattern":"^[a-zA-Z]{2}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_2":{"example":"A1B 2CD","pattern":"^[a-zA-Z]{1}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_3":{"example":"AB1 2CD","pattern":"^[a-zA-Z]{2}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_4":{"example":"AB1C 2DF","pattern":"^[a-zA-Z]{2}[0-9]{1}[a-zA-Z]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_5":{"example":"A12 3BC","pattern":"^[a-zA-Z]{1}[0-9]{2}\\s?[0-9]{1}[a-zA-Z]{2}$"},"pattern_6":{"example":"A1 2BC","pattern":"^[a-zA-Z]{1}[0-9]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"}},"GE":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"GF":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GG":{"pattern_1":{"example":"GY10 2AB","pattern":"^[gG][yY]([1-9]|10)\\s?[0-9]{1}[a-zA-Z]{2}$"}},"GH":{"pattern_1":{"example":"GA18400","pattern":"^[A-Z][A-Z0-9]\\d{3,5}$"}},"GL":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"GN":{"pattern_1":{"example":"123","pattern":"^\\d{3}$"}},"GP":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GS":{"pattern_1":{"example":"SIQQ 1ZZ","pattern":"^SIQQ 1ZZ$"}},"GT":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"GU":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"GW":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"HM":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"HN":{"pattern_1":{"example":"12345","pattern":"^(?:\\d{5})?$"}},"HR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"HT":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"HU":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"IC":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"ID":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"IL":{"pattern_1":{"example":"6687865","pattern":"^[0-9]{7}$"}},"IM":{"pattern_1":{"example":"IM1 1AD","pattern":"^IM\\d[\\dA-Z]?[ ]?\\d[ABD-HJLN-UW-Z]{2}$"}},"IN":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"IO":{"pattern_1":{"example":"BBND 1ZZ","pattern":"^BBND 1ZZ$"}},"IS":{"pattern_1":{"example":"123","pattern":"^[0-9]{3}$"}},"IQ":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"IT":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}}
8253,"JE":{"pattern_1":{"example":"JE2 4PJ","pattern":"^[jJ][eE][1-5]{1}\\s?[0-9]{1}[a-zA-Z]{2}$"}},"JO":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"JP":{"pattern_1":{"example":"123-4567","pattern":"^[0-9]{3}-[0-9]{4}$"},"pattern_2":{"example":"1234567","pattern":"^[0-9]{7}$"}},"KE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"KG":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"KR":{"pattern_1":{"example":"123-456","pattern":"^[0-9]{3}-[0-9]{3}$"},"pattern_2":{"example":"12345","pattern":"^[0-9]{5}$"}},"KH":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"KW":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"KZ":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"LA":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"LB":{"pattern_1":{"example":"1234 5678","pattern":"^(\\d{4}([ ]?\\d{4})?)?$"}},"LI":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"LK":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"LT":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"LU":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"LV":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"MA":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MC":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MD":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"ME":{"pattern_1":{"example":"81101","pattern":"^8\\d{4}$"}},"MG":{"pattern_1":{"example":"123","pattern":"^[0-9]{3}$"}},"MH":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MK":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"MN":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"MP":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MS":{"pattern_1":{"example":"MSR1250","pattern":"^MSR\\s?\\d{4}$"}},"MQ":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MT":{"pattern_1":{"example":"ABC 1234","pattern":"^[a-zA-Z]{3}\\s[0-9]{4}$"},"pattern_2":{"example":"ABC 123","pattern":"^[a-zA-Z]{3}\\s[0-9]{3}$"},"pattern_3":{"example":"ABC 12","pattern":"^[a-zA-Z]{3}\\s[0-9]{2}$"}},"MU":{"pattern_1":{"example":"A1201 or 80110","pattern":"^([AR]|[0-9])\\d{4,5}$"}},"MV":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"},"pattern_2":{"example":"1234","pattern":"^[0-9]{4}$"}},"MX":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"MY":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"NC":{"pattern_1":{"example":"98800","pattern":"^988\\d{2}$"}},"NE":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"NF":{"pattern_1":{"example":"2899","pattern":"^2899$"}},"NG":{"pattern_1":{"example":"123456","pattern":"^(\\d{6})?$"}},"NI":{"pattern_1":{"example":"22500","pattern":"^\\d{5}$"}},"NL":{"pattern_1":{"example":"1234 AB\/1234AB","pattern":"^[1-9][0-9]{3}\\s?[a-zA-Z]{2}$"},"pattern_2":{"example":"1234","pattern":"^[1-9][0-9]{3}$"}},"NO":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"NP":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"NZ":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"OM":{"pattern_1":{"example":"PC 123 or 123","pattern":"^(PC )?\\d{3}$"}},"PA":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"PF":{"pattern_1":{"example":"98701","pattern":"^987\\d{2}$"}},"PG":{"pattern_1":{"example":"123","pattern":"^\\d{3}$"}},"PH":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"PK":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"PL":{"pattern_1":{"example":"12-345","pattern":"^[0-9]{2}-[0-9]{3}$"}},"PM":{"pattern_1":{"example":"97500","pattern":"^9[78]5\\d{2}$"}},"PN":{"pattern_1":{"example":"PCRN 1ZZ","pattern":"^PCRN 1ZZ$"}},"PR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"PT":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"},"pattern_2":{"example":"1234-567","pattern":"^[0-9]{4}-[0-9]{3}$"}},"PW":{"pattern_1":{"example":"96939 or 96940","pattern":"^(?:96939|96940)$"}}
8253,"PY":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"RE":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"RO":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"RS":{"pattern_1":{"example":"123456","pattern":"^\\d{6}$"}},"RU":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"SA":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"SE":{"pattern_1":{"example":"123 45","pattern":"^[0-9]{3}\\s[0-9]{2}$"}},"SG":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"SI":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"SK":{"pattern_1":{"example":"123 45","pattern":"^[0-9]{3}\\s[0-9]{2}$"}},"SH":{"pattern_1":{"example":"ASCN 1ZZ","pattern":"^(ASCN|STHL) 1ZZ$"}},"SJ":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"SM":{"pattern_1":{"example":"47890","pattern":"^4789\\d$"}},"SN":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"SO":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"SZ":{"pattern_1":{"example":"A123","pattern":"^[a-zA-Z]{1}[0-9]{3}$"}},"TC":{"pattern_1":{"example":"TKCA 1ZZ","pattern":"^TKCA 1ZZ$"}},"TH":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"TJ":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"TM":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"TN":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"TR":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"TT":{"pattern_1":{"example":"120110","pattern":"^\\d{6}$"}},"TW":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"},"pattern_2":{"example":"123","pattern":"^[0-9]{3}$"}},"UA":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"US":{"pattern_1":{"example":"12345-6789","pattern":"^[0-9]{5}\\-[0-9]{4}$"},"pattern_2":{"example":"12345","pattern":"^[0-9]{5}$"}},"UY":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"UZ":{"pattern_1":{"example":"123456","pattern":"^[0-9]{6}$"}},"VA":{"pattern_1":{"example":"00120","pattern":"^00120$"}},"VE":{"pattern_1":{"example":"1234","pattern":"^\\d{4}$"}},"VI":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"WF":{"pattern_1":{"example":"98601","pattern":"^986\\d{2}$"}},"XK":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}},"XY":{"pattern_1":{"example":"12345","pattern":"^[0-9]{5}$"}},"YT":{"pattern_1":{"example":"97601","pattern":"^976\\d{2}$"}},"ZA":{"pattern_1":{"example":"1234","pattern":"^[0-9]{4}$"}},"ZM":{"pattern_1":{"example":"12345","pattern":"^\\d{5}$"}}};
8254
8255            hyva.formValidation.addRule('postcode', (postCode, options, field, context) => {
8256                const countryId = (context.fields['country_id'] && context.fields['country_id'].element.value),
8257                    validatedPostCodeExamples = [],
8258                    countryPostCodeSpecs = countryId && postCodeSpecs ? postCodeSpecs[countryId] : false;
8259
8260                if (!postCode || !countryPostCodeSpecs) return true;
8261
8262                for (const postCodeSpec of Object.values(countryPostCodeSpecs)) {
8263                    if (new RegExp(postCodeSpec.pattern).test(postCode)) {
8264                        return true;
8265                    }
8266                    validatedPostCodeExamples.push(postCodeSpec.example);
8267                }
8268
8269                if (validatedPostCodeExamples.length > 0) {
8270                    return 'Die\u0020Postleitzahl\u0020ist\u0020ung\u00FCltig.' + '\n' +
8271                        'G\u00FCltiges\u0020Format\u0020f\u00FCr\u0020das\u0020ausgew\u00E4hlte\u0020Land\u003A' + ' ' + validatedPostCodeExamples.join('; ');
8272                }
8273
8274                return true;
8275            });
8276
8277            hyva.formValidation.addRule('validate-no-numbers', (value) => {
8278                if (/^([^0-9]*)$/.test(value)) {
8279                    return true;
8280                }
8281                return 'Bitte\u0020keine\u0020Zahlen\u0020in\u0020dieses\u0020Feld\u0020eingeben.';
8282            });
8283        }
8284    })();
8285</script>
vendor: 1 bytes, line 8285
8285
8286<script>
8287    (function () {
8288        const modals = [];
8289        const excludedFromFocusTrapping = new Set();
8290
8291        function trapFocusInNextModalWithOverlay() {
8292            for (let idx = modals.length -1; idx >= 0; idx--) {
8293                const nextOnStack = modals[idx];
8294                const nextDialogElement = nextOnStack.instance.$refs[nextOnStack.name];
8295                if (! isOverlayDisabled(nextDialogElement)) {
8296                    hyva.trapFocus(nextDialogElement);
8297                    break;
8298                }
8299            }
8300        }
8301
8302        function focusables(dialogElement) {
8303            const selector = 'button, [href], input, textarea, select, details, [tabindex]:not([tabindex="-1"])';
8304            return Array.from(dialogElement.querySelectorAll(selector))
8305                .filter(el => !el.hasAttribute('disabled'));
8306        }
8307
8308        function firstVisible(elements) {
8309            const a = Array.from(elements);
8310            for (let i = 0; i < a.length; i++) {
8311                if (a[i].offsetWidth || a[i].offsetHeight || a[i].getClientRects().length) return a[i];
8312            }
8313            return null;
8314        }
8315
8316        function isInViewport(element) {
8317            const rect = element && element.getBoundingClientRect();
8318            return rect &&
8319                rect.top >= 0 &&
8320                rect.left >= 0 &&
8321                rect.right <= window.innerWidth &&
8322                rect.bottom <= window.innerHeight;
8323        }
8324
8325        function setFocusAfterTransition(dialogElement, duration) {
8326                        const nested = Array.from(dialogElement.querySelectorAll('[role="dialog"]'));
8327            const candidates = Array.from(dialogElement.querySelectorAll('[x-focus-first]'));
8328            next: for (let candidate of candidates) {
8329                for (let child of nested) {
8330                    if (child.contains(candidate)) continue next;
8331                }
8332                setTimeout(() => candidate.focus(), 50);
8333                break;
8334            }
8335            window.setTimeout(() => {
8336                const focusElement = firstVisible(dialogElement.querySelectorAll('[x-focus-first]')) ||
8337                    focusables(dialogElement)[0] ||
8338                    null;
8339                focusElement && isInViewport(focusElement) && focusElement.focus();
8340            }, Math.max(1, duration));
8341        }
8342
8343        function determineTrigger($refs, dialog, trigger) {
8344                        if (typeof trigger === 'undefined' && typeof dialog === 'object' && dialog.target instanceof HTMLElement) {
8345                return dialog.target;
8346            }
8347                        if (typeof dialog === 'string' && typeof trigger === 'object' && trigger.target instanceof HTMLElement) {
8348                return trigger.target;
8349            }
8350                        if (typeof trigger === 'string') {
8351                try {
8352                    return $refs[trigger] || document.querySelector(trigger)
8353                } catch (e) {}
8354            }
8355                        if (trigger instanceof Element) {
8356                return trigger;
8357            }
8358
8359                        return null;
8360        }
8361
8362        function isOverlayDisabled(dialog) {
8363            return dialog && dialog.hasAttribute('x-no-overlay')
8364        }
8365
8366        function areRemainingModalsWithoutOverlay(modals)
8367        {
8368            const overflowDisabled = modals.map(modal => modal.instance.$refs[modal.name]).filter(isOverlayDisabled);
8369
8370            return overflowDisabled.length === modals.length;
8371        }
8372
8373        window.hyva.modal = function(options = {}) {
8374                        if (this.$el && this.$el.dataset && this.$el.dataset.options) {
8375                try {
8376                    options = Object.assign(options, JSON.parse(this.$el.dataset.options || '{}'));
8377                } catch (e) {
8378                    throw new Error('Cannot read the dialog options from the data-options attribute: not valid JSON');
8379                }
8380            }
8381
8382            const config = Object.assign({
8383                dialog: 'dialog',                 duration: 300,                 transitionEnter: 'transition ease-out duration-300',
8384                transitionEnterStart: 'opacity-0',
8385                transitionEnterEnd: 'opacity-100',
8386                transitionLeave: 'transition ease-in duration-300',
8387                transitionLeaveStart: 'opacity-100',
8388                transitionLeaveEnd: 'opacity-0',
8389            }, options);
8390            let lastHide = 0;
8391
8392            return {
8393                opened: {},
8394                show(dialog, trigger) {
8395                    const focusTargetAfterHide = determineTrigger(this.$refs, dialog, trigger);
8396                    const name = typeof dialog === 'string' ? dialog : config.dialog;
8397                    const dialogElement = this.$refs[name];
8398                    if (! dialogElement) {
8399                                                return;
8400                    }
8401                    const useOverlay = ! dialogElement.hasAttribute('x-no-overlay');
8402
8403                    dialogElement.scrollTop = 0;
8404
8405                                        if (this.opened[name]) {
8406                        return;
8407                    }
8408
8409                    if (focusTargetAfterHide) {
8410                        focusTargetAfterHide.setAttribute('aria-expanded', 'true');
8411                    }
8412
8413                    this.opened[name] = true;
8414                    useOverlay && this.$nextTick(() => hyva.trapFocus(dialogElement));
8415                    setFocusAfterTransition(dialogElement, config.duration);
8416
8417                    const frame = {name, instance: this, focusTarget: focu
8417sTargetAfterHide, time: Date.now()};
8418
8419                    modals.push(frame);
8420                    if (useOverlay) {
8421                        document.body.classList.add('overflow-hidden');
8422                    }
8423                    return new Promise(resolve => frame.resolve = resolve);
8424                },
8425                cancel() {
8426                    this.hide(false);
8427                },
8428                ok() {
8429                    this.hide(true);
8430                },
8431                hide(value) {
8432                                        if (Date.now() - lastHide < config.duration) {
8433                        return;
8434                    }
8435                    lastHide = Date.now();
8436
8437                    const modal = modals.pop() || {};
8438                    if (! modal.instance) {
8439                        return;
8440                    }
8441
8442                    const name = modal.name;
8443                    this.opened[name] = false;
8444                    hyva.releaseFocus(modal.instance.$refs[modal.name])
8445                    trapFocusInNextModalWithOverlay();
8446
8447                    const nextFocusAfterHide = modal.focusTarget;
8448                    nextFocusAfterHide && setTimeout(() => {
8449                        nextFocusAfterHide.setAttribute('aria-expanded', 'false');
8450                        nextFocusAfterHide.focus()
8451                    }, config.duration);
8452
8453                    if (modals.length === 0 || areRemainingModalsWithoutOverlay(modals)) {
8454                        document.body.classList.remove('overflow-hidden');
8455                    }
8456
8457                    modal.resolve(value);
8458                },
8459                overlay(dialog) {
8460                    dialog = this.$el.dataset.dialogRefName || dialog;
8461                    const name = typeof dialog === 'string' ? dialog : config.dialog;
8462                    return {
8463                        ['x-show']() {
8464                            return this.opened[name]
8465                        },
8466                        ['x-transition:enter']: config.transitionEnter,
8467                        ['x-transition:enter-start']: config.transitionEnterStart,
8468                        ['x-transition:enter-end']: config.transitionEnterEnd,
8469                        ['x-transition:leave']: config.transitionLeave,
8470                        ['x-transition:leave-start']: config.transitionLeaveStart,
8471                        ['x-transition:leave-end']: config.transitionLeaveEnd,
8472                        ['@hyva-modal-show.window'](event) {
8473                            event.detail && event.detail.dialog === name && this.show(name, event.detail.focusAfterHide)
8474                        }
8475                    };
8476                },
8477                showDialogOnInit() {
8478                    const parent = this.$el.closest('[data-dialog-ref-name]');
8479                    if (parent && parent.dataset.dialogRefName) {
8480                        this.$dispatch('hyva-modal-show', {dialog: parent.dataset.dialogRefName})
8481                    }
8482                }
8483            };
8484        }
8485
8486        window.hyva.modal.peek = () => modals.length > 0 && modals[modals.length -1]
8487
8488        window.hyva.modal.pop = function () {
8489            if (modals.length > 0) {
8490                const modal = modals[modals.length -1];
8491                modal.instance.hide();
8492            }
8493        }
8494
8495        window.hyva.modal.excludeSelectorsFromFocusTrap = function (selectors) {
8496            typeof selectors === 'string' || selectors instanceof String
8497                ? excludedFromFocusTrapping.add(selectors)
8498                : selectors.map(selector => excludedFromFocusTrapping.add(selector));
8499        }
8500
8501        window.hyva.modal.eventListeners = {
8502            keydown: event => {
8503                if (event.key === 'Escape') {
8504                    window.hyva.modal.pop();
8505                }
8506            },
8507                        click: event => {
8508                if (modals.length > 0) {
8509                    const modal = modals[modals.length -1];
8510                    const dialog = modal.instance.$refs[modal.name];
8511                    if (modal.time + 50 < Date.now() && // if last click processing is more than 50ms ago
8512                        ! isOverlayDisabled(dialog) && // if dialog has overlay
8513                        ! dialog.contains(event.target)) { // if click is outside of dialog
8514                        modal.instance.hide();
8515                    }
8516                }
8517            }
8518        };
8519
8520        document.addEventListener('keydown', window.hyva.modal.eventListeners.keydown);
8521
8522        document.addEventListener('click', window.hyva.modal.eventListeners.click);
8523    })();
8524    window.addEventListener('alpine:init', () => {
8525        Alpine.data('hyvaModal', window.hyva.modal);
8526    }, {once: true});
8527</script>
8527
8528
8529<div x-data="initCookieBarSettings" x-bind="eventListeners">
8530        <div x-cloak
8531         x-bind="overlay"
8532         class="fixed inset-0 flex flex-col items-center justify-center text-left bg-gray-500/50
8533            z-70 am-cookie-bar-settings"
8534    >
8535        <div x-ref="am-cookie-bar-settings"
8536             role="dialog"
8537             aria-modal="true"
8538             aria-label="Cookie Bar Settings"
8539             class="bg-ambar-settings-bar-group-background relative inline-block max-h-screen overflow-auto
8540                max-w-[90vw] shadow-xl rounded-lg p-10 text-gray-700"
8541        >
8542                <button @click="hideHandler"
8543                    aria-label="Close Cookie Bar Settings"
8544                    x-ref="ambar-settings-close"
8545                    class="absolute right-2 top-2 transition
8546                        hover:text-gray focus:drop-shadow-md hover:drop-shadow-md">
8547                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
8548                     stroke="currentColor"
8549                     stroke-width="2">
8550                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
8551                </svg>
8552            </button>
8553            <div id="cookiebar-groups">
8554                
8555<div x-data="initAmCookieGroups" class="w-full flex flex-col">
8556    <template x-for="group in $store.AmastyCookieGroups.groupData" :key="group.groupId">
8557        <div class="mb-2">
8558            <div class="header flex justify-between items-start">
8559                <h3 class="mb-4 pr-6 ambar-group-title" x-text="group.name"></h3>
8560                <div>
8561                    <input type="checkbox"
8562                           :name="getInputGroupId"
8563                           data-group-prefix="classic-"
8564                           @change="toggleGroup"
8565                           :checked="group.checked"
8566                           :aria-checked="group.checked"
8567                           :id="getInputGroupId"
8568                           :disabled="group.isEssential"
8569                           :value="group.groupId"
8570                           class="amsettings-bar-input-toggle form-checkbox"
8571                           :class="getInputStyles"
8572                    >
8573                    <label data-group-prefix="classic-"
8574                           :for="getInputGroupId" class="sr-only" x-text="group.name">
8575                    </label>
8576                </div>
8577            </div>
8578            <p class="text-sm ambar-group-description" x-html="group.description"></p>
8579            <button class="btn btn-secondary text-body-sm px-4 py-2 mb-8"
8580                    type="button"
8581                    data-dispatch-action="classic-open-am-cookie-group-info"
8582                    @click="moreInfoClickHandler">
8583                <span>Mehr Informationen</span>
8584                <span class="sr-only" x-text="moreInformationAboutCookieGroup"></span>
8585            </button>
8586        </div>
8587    </template>
8588</div>
8589
8590            </div>
8591            <div class="w-full flex justify-center">
8592                <button type="button"
8593                        class="btn btn-primary justify-center"
8594                        x-data="initAmCookieActionDispatcherBtn"
8595                        @click.prevent="actiondispatchHandler"
8596                        x-ref="ambar-settings-done"
8597                        data-dispatch-action="cookiebar-action-accept"
8598                        data-dispatch-payload='&#x7B;&quot;include_checked_groups&quot;&#x3A;true&#x7D;'
8599                >
8600                    Speichern                </button>
8601            </div>
8602            </div>
8603    </div>
8604    </div>
8605
8606<script data-cfasync="false">
8607    'use strict';
8608
8609    function initCookieBarSettings() {
8610        return {
8611            ...hyva.modal({
8612                dialog: 'am-cookie-bar-settings'
8613            }),
8614            eventListeners: {
8615                ['@close-am-cookie-bar-settings.window']() {
8616                    this.hideHandler();
8617                },
8618                ['@open-am-cookie-bar-settings.window']() {
8619                    !this.opened['am-cookie-bar-settings'] &&
8620                    this.show('am-cookie-bar-settings');
8621                },
8622                ['@cookiebar-action-accept-finish.window']() {
8623                    this.hideHandler();
8624                }
8625            },
8626            hideHandler: function () {
8627                !!this.opened['am-cookie-bar-settings'] &&
8628                this.hide('am-cookie-bar-settings');
8629            },
8630            focusDoneButton: function () {
8631                this.$refs['ambar-settings-done']?.focus();
8632            },
8633            focusCloseButton: function () {
8634                this.$refs['ambar-settings-close']?.focus();
8635            }
8636        }
8637    }
8638
8639    window.addEventListener('alpine:init', () => Alpine.data('initCookieBarSettings', initCookieBarSettings), { once: true });
8640</script>
8640
8641
8642<div x-data="initCookieGroupInfo_6abf225855d73" x-bind="eventListeners">
8643        <div x-cloak
8644         x-bind="overlay"
8645         class="fixed inset-0 flex items-center justify-center text-left bg-gray-500/50 z-70"
8646    >
8647        <div x-ref="am-cookie-group-info"
8648             role="dialog"
8649             aria-labelledby="amcookie-group-info"
8650             class="inline-block max-h-[92vh] max-w-[90vw] overflow-auto
8651                bg-ambar-info-bar-background shadow-xl rounded-lg p-8 text-gray-700 relative"
8652        >
8653                <template x-if="group">
8654                <div id="amcookie-group-info">
8655                    <button @click.stop="closeHandler"
8656                            aria-label="Schlie&#xDF;en"
8657                            class="absolute right-2 top-2 text-gray-300 transition
8658                                hover:text-black focus:drop-shadow-md hover:drop-shadow-md"
8659                    >
8660                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
8661                             stroke="currentColor"
8662                             stroke-width="2">
8663                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
8664                        </svg>
8665                    </button>
8666                    <div class="md:flex md:justify-start pb-4">
8667                        <h3 class="text-xl font-semibold text-ambar-info-bar-title" x-text="group.name"></h3>
8668                    </div>
8669                    <template x-if="group.description">
8670                        <p class="mb-4 text-ambar-info-bar-description" x-html="group.description"></p>
8671                    </template>
8672                    <div class="overflow-x-scroll md:overflow-x-auto">
8673                        <table class="table-auto w-full mb-4 text-body-sm text-left" border="1">
8674                            <thead class="text-ambar-info-bar-table-header">
8675                            <tr>
8676                                <th class="pr-4">Cookie-Name</th>
8677                                <th class="pr-4">Cookie-Anbieter</th>
8678                                <th class="min-w-[30%] pr-4">Cookie-Beschreibung</th>
8679                                <th class="pr-4">Cookie-Lebensdauer</th>
8680                                <th class="pr-4">Cookie-Typ</th>
8681                            </tr>
8682                            </thead>
8683                            <tbody class="text-ambar-info-bar-table-content">
8684                            <template x-for="(item, index) in group.cookies" :key="index">
8685                                <tr>
8686                                    <td x-text="item.name" class="font-semibold pr-4"></td>
8687                                    <td x-text="item.provider" class="pr-4"></td>
8688                                    <td x-html="item.description" class="min-w-[30%] pr-4"></td>
8689                                    <td x-text="item.lifetime" class="pr-4"></td>
8690                                    <td x-text="item.type" class="pr-4"></td>
8691                                </tr>
8692                            </template>
8693                            </tbody>
8694                        </table>
8695                    </div>
8696                </div>
8697            </template>
8698            <div class="flex justify-center mt-8">
8699                <button
8700                        @click.stop="closeHandler"
8701                        aria-label="Fertig"
8702                        class="btn btn-primary justify-center"
8703                >
8704                    Schließen                </button>
8705            </div>
8706            </div>
8707    </div>
8708    
8709</div>
8710<script data-cfasync="false">
8711    'use strict';
8712
8713    function initCookieGroupInfo_6abf225855d73() {
8714        return {
8715            ...hyva.modal({
8716                dialog: 'am-cookie-group-info'
8717            }),
8718            group: null,
8719            eventListeners: {
8720                ['@close-am-cookie-group-info.window']() {
8721                    this.closeHandler();
8722                },
8723                ['@open-am-cookie-group-info.window'](event) {
8724                    this.group = event.detail;
8725
8726                    if (!!this.group) {
8727                        /*
8728                         If modal have big cookies list this can lead to
8729                         trigger hide event in hyva.modal.eventListeners.click,
8730                         so we should wait till this.group is reassigned
8731                         */
8732                        this.$nextTick(() => this.show('am-cookie-group-info'));
8733                    }
8734                }
8735            },
8736            closeHandler: function () {
8737                this.hide('am-cookie-group-info');
8738            }
8739        }
8740    }
8741
8742    window.addEventListener(
8743        'alpine:init',
8744        () => Alpine.data(
8745            'initCookieGroupInfo_6abf225855d73',
8746            initCookieGroupInfo_6abf225855d73        ),
8747        {once: true}
8748    );
8749</script>
8749
8750
8751<script data-cfasync="false">
8752    'use strict';
8753
8754    /**
8755     * @typedef {Object} CookieGroupData
8756     * @prop {Boolean} checked
8757     * @prop {[{description: string, lifetime: number|null, name: string, provider: string, type: string}]} cookies
8758     * @prop {String} description
8759     * @prop {string|null} groupId
8760     * @prop {Boolean} isEssential
8761     * @prop {String} name
8762     */
8763
8764    function initAmastyCookieGroupsStorage() {
8765        return {
8766            /**
8767             * @type {[CookieGroupData]}
8768             */
8769            groupData: [],
8770            cookiePolicy: undefined,
8771            lastUpdate: undefined,
8772
8773            /**
8774             * @returns {string|number[]}
8775             */
8776            getEssentialGroupIds: function () {
8777                return this.groupData.reduce(function (essentialGroupIds, group) {
8778                    if (group.isEssential) {
8779                        essentialGroupIds.push(group.groupId)
8780                    }
8781
8782                    return essentialGroupIds;
8783                }, []);
8784            },
8785
8786            /**
8787             * @returns {string|number[]}
8788             */
8789            getCheckedGroupIds: function () {
8790                return this.groupData.reduce(function (checkedGroupIds, group) {
8791                    if (group.checked) {
8792                        checkedGroupIds.push(group.groupId);
8793                    }
8794
8795                    return checkedGroupIds;
8796                }, []);
8797            },
8798
8799            /**
8800             * @param {string} cookieName
8801             * @returns {boolean}
8802             */
8803            isCookieEssential: function (cookieName) {
8804                const allEssentialCookies = this.getEssentialCookies();
8805
8806                return !!allEssentialCookies.find(cookie => cookie.name === cookieName);
8807            },
8808
8809            /**
8810             * @returns {array}
8811             */
8812            getEssentialCookies: function () {
8813                return this.groupData
8814                    .filter(group => group.isEssential)
8815                    .map(group => group.cookies)
8816                    .flat();
8817            },
8818
8819            /**
8820             * @returns {boolean}
8821             */
8822            hasGroupData: function () {
8823                return !!this.groupData.length;
8824            },
8825
8826            /**
8827             * @param {string} cookieName
8828             * @param {string} pattern
8829             * @returns {boolean}
8830             */
8831            isEssentialByPattern: function (cookieName, pattern) {
8832                const essentialCookiePatterns = this.getEssentialCookiesPattern(pattern);
8833
8834                return essentialCookiePatterns.some((pattern) => !!cookieName.match(this.getCookiePattern(pattern)));
8835            },
8836
8837            /**
8838             * @param {string} pattern
8839             * @return {Array}
8840             */
8841            getEssentialCookiesPattern: function (pattern) {
8842                return this.getCookiesByPattern(pattern, this.getEssentialCookies());
8843            },
8844
8845            /**
8846             * @param {string} pattern
8847             * @param {Array|undefined} cookies
8848             * @return {Array}
8849             */
8850            getCookiesByPattern: function (pattern, cookies) {
8851                if (typeof cookie === 'undefined') {
8852                    cookies = this.getAllCookies();
8853                }
8854
8855                return cookies
8856                    .map((cookie) => typeof cookie === 'object' ? cookie.name : cookie.split('=')[0].trim())
8857                    .filter((cookie) => cookie.match(pattern) !== null);
8858            },
8859
8860            /**
8861             * @returns {array}
8862             */
8863            getDisallowedCookies: function () {
8864                const disallowedCookie = decodeURIComponent(hyva.getCookie('amcookie_disallowed') ?? '');
8865                if (!disallowedCookie) {
8866                    return [];
8867                }
8868
8869                return disallowedCookie.split(',');
8870            },
8871
8872            /**
8873             * @returns {string}
8874             */
8875            getCookiePattern: function (pattern) {
8876                return `^${pattern.replaceAll('*', '.*')}$`;
8877            },
8878
8879            /**
8880             * @returns {array}
8881             */
8882            getAllCookies: function () {
8883                return document.cookie.split(';');
8884            },
8885
8886            /**
8887             * @param {Array} groupData
8888             * @returns {array}
8889             */
8890            updateGroupDataPermanently: function (groupData) {
8891                this.groupData = [...groupData];
8892            },
8893
8894            /**
8895             * @param {boolean} setAcceptance
8896             * @returns {Promise}
8897             */
8898            updateGroupData: function (setAcceptance = false) {
8899                const cookieFetchUrl = `${BASE_URL}amcookie/cookie/cookies`;
8900                const requestUrl = new URL(cookieFetchUrl, window.location.origin);
8901
8902                requestUrl.searchParams.append('allowed', hyva.getCookie('amcookie_allowed'));
8903                requestUrl.searchParams.append('restriction', hyva.getCookie('amcookie_policy_restriction'));
8904
8905                return fetch(requestUrl.toString(), {
8906                    method: "GET",
8907                    headers: {
8908                        'X-Requested-With': 'XMLHttpRequest'
8909                    }
8910                }).then(response => {
8911                    if (response.ok) {
8912                        return response.json();
8913                    }
8914
8915                    return Promise.reject(`${response.status} ${response.statusText}`);
8916                }).then(data => {
8917                    this.cookiePolicy = data.cookiePolicy ?? 'allowed';
8918                    this.lastUpdate = data.lastUpdate ?? 0;
8919                    this.groupData = [...data.groupData];
8920
8921                    hyva.setCookie('amcookie_policy_restriction', this.cookiePolicy, 10);
8922                    if (setAcceptance) {
8923                        amastyCookieManager.setLastCookieAcceptance(this.lastUpdate);
8924                    }
8925
8926                    return data;
8927                }).catch(error => {
8928                    typeof window.dispatchMessages !== "undefined" && window.dispatchMessages([
8929                        {
8930                            type: "error",
8931                            text: error
8932                        }
8933                    ]);
8934                }).finally(() => window.dispatchEvent(new CustomEvent('amasty-cookie-group-updated')));
8935            }
8936        }
8937    }
8938
8939    window.addEventListener(
8940        'alpine:init',
8941        () => Alpine.store('AmastyCookieGroups', initAmastyCookieGroupsStorage()),
8942        { once: true }
8943    );
8944</script>
8944
8945
8946<script data-cfasync="false">
8947    (function (amastyCookieManager) {
8948        'use strict';
8949
8950        amastyCookieManager.pattern = '{(?<cookiePattern>.*)}';
8951
8952        amastyCookieManager.getAmastyCookieGroupStorage = function () {
8953            return Alpine.store('AmastyCookieGroups') ?? {};
8954        };
8955
8956        amastyCookieManager.deleteDisallowedCookie = function () {
8957            const amastyCookieGroupStorage = this.getAmastyCookieGroupStorage();
8958            const disallowedCookies = amastyCookieGroupStorage?.getDisallowedCookies() ?? [];
8959
8960            disallowedCookies.forEach((name) => {
8961                const pattern = name.match(this.pattern);
8962                if (!!pattern && !!amastyCookieGroupStorage) {
8963                    const cookiePattern = amastyCookieGroupStorage.getCookiePattern(pattern.groups.cookiePattern) ?? '';
8964
8965                    amastyCookieGroupStorage.getCookiesByPattern(cookiePattern).forEach((cookieName) => {
8966                        this.deleteNotEssentialCookie(cookieName);
8967                    });
8968                } else {
8969                    this.deleteNotEssentialCookie(name);
8970                }
8971            });
8972        };
8973
8974        amastyCookieManager.isCookieAllowed = function (cookieName) {
8975            const allowedGroups = hyva.getCookie('amcookie_allowed');
8976            const disallowedCookie = this.getAmastyCookieGroupStorage()?.getDisallowedCookies() ?? [];
8977            const isCookiePolicyAllowed = hyva.getCookie('amcookie_policy_restriction') === 'allowed';
8978            const isCookieEssential = this.getAmastyCookieGroupStorage()?.isCookieEssential(cookieName);
8979            const isCookieEssentialByPattern = this.getAmastyCookieGroupStorage()?.isEssentialByPattern(cookieName, this.pattern);
8980
8981            if (!isCookiePolicyAllowed || isCookieEssential || isCookieEssentialByPattern) {
8982                return true;
8983            }
8984
8985            return !((!allowedGroups && !disallowedCookie) || this.isCookieDisallowed(cookieName));
8986        };
8987
8988        amastyCookieManager.isCookieDisallowed = function (cookieName) {
8989            const amastyCookieGroupStorage = this.getAmastyCookieGroupStorage();
8990            const disallowedCookies = amastyCookieGroupStorage?.getDisallowedCookies() ?? [];
8991
8992            return disallowedCookies.some((cookie) => {
8993                const pattern = cookie.match(this.pattern);
8994
8995                return !!pattern && !!cookieName.match(amastyCookieGroupStorage?.getCookiePattern(pattern.groups.cookiePattern));
8996            }) || disallowedCookies.indexOf(cookieName) !== -1;
8997        };
8998
8999        amastyCookieManager.processManageableCookies = function () {
9000            let cookieScripts = document.querySelectorAll('script[data-amcookie-groupid][type="text/plain"]');
9001
9002            cookieScripts.forEach((elem) => {
9003                if (this.isChecked(elem.dataset['amcookie-groupid'])) {
9004                    let elClone = elem.cloneNode(true).setAttribute('type', 'text/javascript');
9005
9006                    elem.remove();
9007                    document.body.appendChild(elClone);
9008                }
9009            });
9010        };
9011
9012        amastyCookieManager.deleteNotEssentialCookie = function (cookieName) {
9013            if (!this.getAmastyCookieGroupStorage()?.isCookieEssential(cookieName)) {
9014                hyva.setCookie(cookieName, '', -1, true);
9015            }
9016        };
9017
9018        amastyCookieManager.setLastCookieAcceptance = function (lastUpdate) {
9019            localStorage.setItem('am-last-cookie-acceptance', lastUpdate);
9020        };
9021
9022        window.addEventListener('amasty-cookie-group-updated', () => {
9023            amastyCookieManager.deleteDisallowedCookie();
9024        });
9025
9026        window.addEventListener('private-content-loaded', () => {
9027            amastyCookieManager.getAmastyCookieGroupStorage()?.hasGroupData() && amastyCookieManager.deleteDisallowedCookie();
9028        });
9029    }(window.amastyCookieManager = window.amastyCookieManager || {}));
9030</script>
9030
9031
9032<script data-cfasync="false">
9033    (function () {
9034        'use strict';
9035
9036        window.addEventListener('cookiebar-action-accept', (event) => {
9037            const groups = event.detail?.include_checked_groups ? Alpine.store('AmastyCookieGroups').getCheckedGroupIds() : [];
9038            const url = `${BASE_URL}amcookie/cookie/savegroups`;
9039            const urlParams = event.detail?.params ?? {};
9040            const contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
9041            const body = new URLSearchParams({
9042                form_key: hyva.getFormKey()
9043            });
9044            groups.length && groups.map(groupId => body.append('groups[]', groupId));
9045
9046            for (const [key, value] of Object.entries(urlParams)) {
9047                body.append(key, value);
9048            }
9049
9050            fetch(url, {method: 'POST', body, headers: {'Content-Type': contentType}})
9051                .then(response => {
9052                    if (response.ok) {
9053                        return response.json();
9054                    }
9055
9056                    return Promise.reject(`${response.status} ${response.statusText}`);
9057                })
9058                .then(data => {
9059                    !!data.success && Alpine.store('AmastyCookieGroups').updateGroupData(true);
9060                })
9061                .catch(error => {
9062                    typeof window.dispatchMessages !== "undefined" && window.dispatchMessages([
9063                        {
9064                            type: "error",
9065                            text: error
9066                        }
9067                    ]);
9068                })
9069                .finally(() => {
9070                    amastyCookieManager.processManageableCookies();
9071                    window.dispatchEvent(new CustomEvent('cookiebar-action-accept-finish'));
9072                    window.dispatchEvent(new CustomEvent('amasty-cookie-group-updated'));
9073                    // Wait cookiebar close animation
9074                    setTimeout(() => {
9075                        window.dispatchEvent(new CustomEvent('reload-customer-section-data'));
9076                    }, 100);
9077                });
9078        });
9079    })();
9080</script>
9080
9081
9082<script data-cfasync="false">
9083    (function () {
9084        'use strict';
9085
9086        window.addEventListener('cookiebar-action-allow', () => {
9087            const url = `${BASE_URL}amcookie/cookie/allow`;
9088            const contentType = 'application/x-www-form-urlencoded; charset=UTF-8';
9089            const body = new URLSearchParams({
9090                form_key: hyva.getFormKey()
9091            });
9092            fetch(url, {method: 'POST', body, headers: {'Content-Type': contentType}})
9093                .then(response => {
9094                    if (response.ok) {
9095                        return response;
9096                    }
9097
9098                    return Promise.reject(`${response.status} ${response.statusText}`);
9099                })
9100                .then(() => {
9101                    Alpine.store('AmastyCookieGroups').updateGroupData(true);
9102                })
9103                .catch(error => {
9104                    typeof window.dispatchMessages !== "undefined" && window.dispatchMessages([
9105                        {
9106                            type: "error",
9107                            text: error
9108                        }
9109                    ]);
9110                })
9111                .finally(() => {
9112                    amastyCookieManager.processManageableCookies();
9113                    window.dispatchEvent(new CustomEvent('cookiebar-action-allow-finish'));
9114                    // Wait cookiebar close animation
9115                    setTimeout(() => {
9116                        window.dispatchEvent(new CustomEvent('reload-customer-section-data'));
9117                    }, 100);
9118                });
9119        });
9120    })();
9121</script>
9121
9122
9123<script data-cfasync="false">
9124    (function () {
9125        'use strict';
9126
9127        window.addEventListener('cookiebar-action-settings', () => {
9128            window.dispatchEvent(new Event('open-am-cookie-bar-settings'));
9129        });
9130    })();
9131</script>
9131
9132
9133<style>
9134    :root {
9135        /* Bar Color Settings */
9136        --ambar-background: #fff;
9137        --ambar-links-color: #000000;
9138        --ambar-policy-text: #374151;
9139        --ambar-toggle-active-color: #2563eb;
9140        --ambar-toggle-inactive-color: #fff;
9141
9142        /* Buttons Color Settings */
9143        --ambar-button-accept-color: #337ab7;
9144        --ambar-button-accept-hover-color: #337ab7;
9145        --ambar-button-accept-text: #fff;
9146        --ambar-button-accept-hover-text: #fff;
9147
9148        --ambar-button-allow-color: #337ab7;
9149        --ambar-button-allow-hover-color: #337ab7;
9150        --ambar-button-allow-text: #fff;
9151        --ambar-button-allow-hover-text: #fff;
9152
9153        --ambar-button-decline-color: #337ab7;
9154        --ambar-button-decline-hover-color: #337ab7;
9155        --ambar-button-decline-text: #fff;
9156        --ambar-button-decline-hover-text: #fff;
9157
9158        --ambar-button-settings-color: #337ab7;
9159        --ambar-button-settings-hover-color: #337ab7;
9160        --ambar-button-settings-text: #fff;
9161        --ambar-button-settings-hover-text: #fff;
9162
9163        /* Buttons Order Settings */
9164        --ambar-button-accept-order: 0;
9165        --ambar-button-allow-order: 0;
9166        --ambar-button-settings-order: 0;
9167        --ambar-button-decline-order: 0;
9168
9169        /* Cookie Information Bar Color Settings */
9170        --ambar-information-background: #fff;
9171        --ambar-information-title: #374151;
9172        --ambar-information-description: #374151;
9173        --ambar-information-table-header: #374151;
9174        --ambar-information-table-content: #374151;
9175
9176        /* Cookie Information Bar Done Button Settings */
9177        --ambar-information-button-color: #1d4ed8;
9178        --ambar-information-button-hover-color: #1d4ed8;
9179        --ambar-information-button-text: #fff;
9180        --ambar-information-button-hover-text: #fff;
9181
9182        /* Settings Bar Done Button Settings */
9183        --ambar-setting-button-color: #1d4ed8;
9184        --ambar-setting-button-hover-color: #1d4ed8;
9185        --ambar-setting-button-text: #fff;
9186        --ambar-setting-button-hover-text: #fff;
9187
9188        /* cookie_settings_bar_customisation */
9189        --ambar-setting-bar-group-background: #fff;
9190        --ambar-setting-bar-group-title: #000;
9191        --ambar-setting-bar-group-description: #000;
9192        --ambar-setting-bar-group-links: #326ed1;
9193    }
9194</style>
9195
9196<script data-cfasync="false">
9197    'use strict';
9198
9199    function initAmCookieActionDispatcherBtn() {
9200        return {
9201            actiondispatchHandler: function (event) {
9202                const { dispatchAction, dispatchPayload } = event.currentTarget.dataset;
9203                this.$dispatch(dispatchAction, this.parsePayload(dispatchPayload));
9204            },
9205            parsePayload: function (payload) {
9206                try {
9207                    return JSON.parse(payload);
9208                } catch (e) {
9209                    return null;
9210                }
9211            }
9212        };
9213    }
9214
9215    window.addEventListener(
9216        'alpine:init',
9217        () => Alpine.data('initAmCookieActionDispatcherBtn', initAmCookieActionDispatcherBtn),
9218        { once: true }
9219    );
9220</script>
9220
9221
9222<script data-cfasync="false">
9223    'use strict';
9224
9225    function initAmCookieGroups() {
9226        return {
9227            /**
9228             * @withContext x-for: $store.AmastyCookieGroups.groupData
9229             * @returns {string}
9230             */
9231            getInputGroupId: function () {
9232                return `amcookie-${this.$el.dataset.groupPrefix}group-${this.group.groupId}`
9233            },
9234
9235            /**
9236             * @withContext x-for: $store.AmastyCookieGroups.groupData
9237             * @returns {{"!bg-gray-400": boolean}}
9238             */
9239            getInputStyles: function () {
9240                return {
9241                    '!bg-gray-400': this.group.isEssential
9242                }
9243            },
9244
9245            /**
9246             * @withContext x-for: $store.AmastyCookieGroups.groupData
9247             * @returns {void}
9248             */
9249            toggleGroup: function () {
9250                this.group.checked = !this.group.checked;
9251            },
9252
9253            /**
9254             * @withContext x-for: $store.AmastyCookieGroups.groupData
9255             * @returns {void}
9256             */
9257            moreInfoClickHandler: function () {
9258                this.$dispatch(this.$el.dataset.dispatchAction, this.group);
9259            },
9260
9261            moreInformationAboutCookieGroup: function () {
9262                return hyva.str('About\u0020\u0022\u00251\u0022\u0020Cookie\u0020Group', this.group.name);
9263            }
9264        }
9265    }
9266
9267    window.addEventListener(
9268        'alpine:init',
9269        () => Alpine.data('initAmCookieGroups', initAmCookieGroups),
9270        {once: true}
9271    );
9272</script>
vendor: 1 bytes, line 9272
9272
9273<script>
9274    if (window.AmFB) {
9275        (() => {
9276            const gdprListeners = [
9277                {
9278                    event: 'cookiebar-action-accept-finish',
9279                    callback: () => window.AmFB.initPixels(),
9280                    options: { once: true }
9281                },
9282                {
9283                    event: 'cookiebar-action-allow-finish',
9284                    callback: () => window.AmFB.initPixels(),
9285                    options: { once: true }
9286                }
9287            ];
9288
9289            const isAllowedToRunScript = function () {
9290                const facebookPixelCookieName = '_fbp';
9291                const allowedCookies = hyva.getCookie('amcookie_allowed') || '';
9292                const disallowedCookies = hyva.getCookie('amcookie_disallowed') || '';
9293                return !!allowedCookies.length
9294                    && (!disallowedCookies || disallowedCookies.indexOf(facebookPixelCookieName) === -1);
9295            };
9296
9297            window.AmFB.setDataToSection = new Proxy(window.AmFB.setDataToSection, {
9298                apply(target, thisArg, argArray) {
9299                    if (isAllowedToRunScript()) {
9300                        return target.apply(thisArg, argArray);
9301                    }
9302
9303                    return {
9304                        then: () => {}
9305                    }
9306                }
9307            });
9308
9309            window.AmFB.initPixels = new Proxy(window.AmFB.initPixels, {
9310                apply(target, thisArg, argArray) {
9311                    if (isAllowedToRunScript()) {
9312                        return target.apply(thisArg, argArray);
9313                    }
9314                }
9315            });
9316
9317            window.AmFB = new Proxy(window.AmFB, {
9318                get(target, prop, receiver) {
9319                    if (prop === 'listeners') {
9320                        return [...Reflect.get(...arguments), ...(gdprListeners)];
9321                    }
9322
9323                    return Reflect.get(...arguments);
9324                }
9325            });
9326        })();
9327    }
9328</script>
vendor: 1 bytes, line 9328
9328
9329<script>
9330    'use strict';
9331
9332    (function () {
9333        document.querySelectorAll('[data-amcookie-js="footer-link"]').forEach(link => {
9334            link.addEventListener('click', function (event) {
9335                event.preventDefault();
9336                window.dispatchEvent(new CustomEvent('cookiebar-action-settings'));
9337            });
9338        });
9339    })();
9340</script>
9340
9341
9342<div x-data="initCookieGroupInfo_6abf2258568d1" x-bind="eventListeners">
9343        <div x-cloak
9344         x-bind="overlay"
9345         class="fixed inset-0 flex items-center justify-center text-left bg-gray-500/50 z-70"
9346    >
9347        <div x-ref="classic-am-cookie-group-info"
9348             role="dialog"
9349             aria-labelledby="amcookie-group-info"
9350             class="inline-block max-h-[92vh] max-w-[90vw] overflow-auto
9351                bg-ambar-info-bar-background shadow-xl rounded-lg p-8 text-gray-700 relative"
9352        >
9353                <template x-if="group">
9354                <div id="amcookie-group-info">
9355                    <button @click.stop="closeHandler"
9356                            aria-label="Schlie&#xDF;en"
9357                            class="absolute right-2 top-2 text-gray-300 transition
9358                                hover:text-black focus:drop-shadow-md hover:drop-shadow-md"
9359                    >
9360                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
9361                             stroke="currentColor"
9362                             stroke-width="2">
9363                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
9364                        </svg>
9365                    </button>
9366                    <div class="md:flex md:justify-start pb-4">
9367                        <h3 class="text-xl font-semibold text-ambar-info-bar-title" x-text="group.name"></h3>
9368                    </div>
9369                    <template x-if="group.description">
9370                        <p class="mb-4 text-ambar-info-bar-description" x-html="group.description"></p>
9371                    </template>
9372                    <div class="overflow-x-scroll md:overflow-x-auto">
9373                        <table class="table-auto w-full mb-4 text-body-sm text-left" border="1">
9374                            <thead class="text-ambar-info-bar-table-header">
9375                            <tr>
9376                                <th class="pr-4">Cookie-Name</th>
9377                                <th class="pr-4">Cookie-Anbieter</th>
9378                                <th class="min-w-[30%] pr-4">Cookie-Beschreibung</th>
9379                                <th class="pr-4">Cookie-Lebensdauer</th>
9380                                <th class="pr-4">Cookie-Typ</th>
9381                            </tr>
9382                            </thead>
9383                            <tbody class="text-ambar-info-bar-table-content">
9384                            <template x-for="(item, index) in group.cookies" :key="index">
9385                                <tr>
9386                                    <td x-text="item.name" class="font-semibold pr-4"></td>
9387                                    <td x-text="item.provider" class="pr-4"></td>
9388                                    <td x-html="item.description" class="min-w-[30%] pr-4"></td>
9389                                    <td x-text="item.lifetime" class="pr-4"></td>
9390                                    <td x-text="item.type" class="pr-4"></td>
9391                                </tr>
9392                            </template>
9393                            </tbody>
9394                        </table>
9395                    </div>
9396                </div>
9397            </template>
9398            <div class="flex justify-center mt-8">
9399                <button
9400                        @click.stop="closeHandler"
9401                        aria-label="Fertig"
9402                        class="btn btn-primary justify-center"
9403                >
9404                    Schließen                </button>
9405            </div>
9406            </div>
9407    </div>
9408    
9409</div>
9410<script data-cfasync="false">
9411    'use strict';
9412
9413    function initCookieGroupInfo_6abf2258568d1() {
9414        return {
9415            ...hyva.modal({
9416                dialog: 'classic-am-cookie-group-info'
9417            }),
9418            group: null,
9419            eventListeners: {
9420                ['@classic-close-am-cookie-group-info.window']() {
9421                    this.closeHandler();
9422                },
9423                ['@classic-open-am-cookie-group-info.window'](event) {
9424                    this.group = event.detail;
9425
9426                    if (!!this.group) {
9427                        /*
9428                         If modal have big cookies list this can lead to
9429                         trigger hide event in hyva.modal.eventListeners.click,
9430                         so we should wait till this.group is reassigned
9431                         */
9432                        this.$nextTick(() => this.show('classic-am-cookie-group-info'));
9433                    }
9434                }
9435            },
9436            closeHandler: function () {
9437                this.hide('classic-am-cookie-group-info');
9438            }
9439        }
9440    }
9441
9442    window.addEventListener(
9443        'alpine:init',
9444        () => Alpine.data(
9445            'initCookieGroupInfo_6abf2258568d1',
9446            initCookieGroupInfo_6abf2258568d1        ),
9447        {once: true}
9448    );
9449</script>
9449
9450    
9450<script>
9451        (function () {
9452            var loaded = false;
9453
9454            function getCookie(name) {
9455                var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
9456                return match ? decodeURIComponent(match[2]) : null;
9457            }
9458
9459            function isConsentGiven() {
9460                var cookieState = getCookie('amcookie_allowed');
9461                return cookieState !== null &&
9462                    (cookieState.indexOf('0') !== -1 || cookieState.indexOf('3') !== -1);
9463            }
9464
9465            function loadBadge() {
9466                if (loaded) return;
9467                if (!isConsentGiven()) return;
9468                loaded = true;
9469
9470                window.___gcfg = {lang: 'de_DE'};
9471
9472                window.renderBadge = function () {
9473                    var ratingBadgeContainer = document.createElement('div');
9474                    ratingBadgeContainer.style.position = 'fixed';
9475                    ratingBadgeContainer.style.visibility = 'hidden';
9476                    document.body.appendChild(ratingBadgeContainer);
9477
9478                    var revealed = false;
9479                    var resizeObserver = null;
9480                    var mutationObserver = null;
9481                    var settleTimer = null;
9482                    var maxTimer = null;
9483
9484                    function cleanup() {
9485                        if (resizeObserver) resizeObserver.disconnect();
9486                        if (mutationObserver) mutationObserver.disconnect();
9487                        if (settleTimer) clearTimeout(settleTimer);
9488                        if (maxTimer) clearTimeout(maxTimer);
9489                    }
9490
9491                    function reveal() {
9492                        if (revealed) return;
9493                        revealed = true;
9494                        ratingBadgeContainer.style.visibility = '';
9495                        cleanup();
9496                    }
9497
9498                    function watchSize(target) {
9499                        if (!window.ResizeObserver) return;
9500                        resizeObserver = new ResizeObserver(function () {
9501                            if (settleTimer) clearTimeout(settleTimer);
9502                            // 600 ms ohne Groessenaenderung => Badge gilt als fertig.
9503                            settleTimer = setTimeout(reveal, 600);
9504                        });
9505                        resizeObserver.observe(target);
9506                    }
9507
9508                    window.gapi.load('ratingbadge', function () {
9509                        window.gapi.ratingbadge.render(ratingBadgeContainer, {
9510                            'merchant_id': '5356122627'
9511                        });
9512
9513                        // Google injiziert das iframe asynchron - darauf warten und
9514                        // dessen Groesse beobachten, bis sie stabil ist.
9515                        if (window.MutationObserver) {
9516                            mutationObserver = new MutationObserver(function () {
9517                                var iframe = ratingBadgeContainer.querySelector('iframe');
9518                                if (iframe) {
9519                                    mutationObserver.disconnect();
9520                                    mutationObserver = null;
9521                                    watchSize(iframe);
9522                                }
9523                            });
9524                            mutationObserver.observe(ratingBadgeContainer, {childList: true, subtree: true});
9525                        }
9526                    });
9527
9528                    // Sicherheitsnetz: spaetestens nach 6 s anzeigen.
9529                    maxTimer = setTimeout(reveal, 6000);
9530                };
9531
9532                var script = document.createElement('script');
9533                script.src = 'https://apis.google.com/js/platform.js?onload=renderBadge';
9534                script.async = true;
9535                script.defer = true;
9536                document.body.appendChild(script);
9537            }
9538
9539            document.addEventListener('DOMContentLoaded', loadBadge);
9540            window.addEventListener('amasty-cookie-group-updated', loadBadge);
9541        })();
9542    </script>
9542
9543    
9543<script type="text/json" id="default-section-data">
9544    {"messages":[],"customer":[],"compare-products":[],"last-ordered-items":[],"cart":[],"directory-data":{"AT":{"name":"\u00d6sterreich","regions":{"102":{"code":"BL","name":"Burgenland"},"99":{"code":"KN","name":"K\u00e4rnten"},"96":{"code":"NO","name":"Nieder\u00f6sterreich"},"97":{"code":"OO","name":"Ober\u00f6sterreich"},"98":{"code":"SB","name":"Salzburg"},"100":{"code":"ST","name":"Steiermark"},"101":{"code":"TI","name":"Tirol"},"103":{"code":"VB","name":"Vorarlberg"},"95":{"code":"WI","name":"Wien"}}},"BE":{"name":"Belgien","regions":{"577":{"code":"VAN","name":"Antwerpen"},"578":{"code":"WBR","name":"Brabant wallon"},"579":{"code":"BRU","name":"Brussels-Capital Region"},"580":{"code":"WHT","name":"Hainaut"},"582":{"code":"WLG","name":"Li\u00e8ge"},"581":{"code":"VLI","name":"Limburg"},"583":{"code":"WLX","name":"Luxembourg"},"584":{"code":"WNA","name":"Namur"},"585":{"code":"VOV","name":"Oost-Vlaanderen"},"586":{"code":"VBR","name":"Vlaams-Brabant"},"587":{"code":"VWV","name":"West-Vlaanderen"}}},"BG":{"name":"Bulgarien","regions":{"812":{"code":"BG-01","name":"Blagoevgrad"},"813":{"code":"BG-02","name":"Burgas"},"819":{"code":"BG-08","name":"Dobrich"},"818":{"code":"BG-07","name":"Gabrovo"},"837":{"code":"BG-26","name":"Haskovo"},"820":{"code":"BG-09","name":"Kardzhali"},"821":{"code":"BG-10","name":"Kyustendil"},"822":{"code":"BG-11","name":"Lovech"},"823":{"code":"BG-12","name":"Montana"},"824":{"code":"BG-13","name":"Pazardzhik"},"825":{"code":"BG-14","name":"Pernik"},"826":{"code":"BG-15","name":"Pleven"},"827":{"code":"BG-16","name":"Plovdiv"},"828":{"code":"BG-17","name":"Razgrad"},"829":{"code":"BG-18","name":"Ruse"},"838":{"code":"BG-27","name":"Shumen"},"830":{"code":"BG-19","name":"Silistra"},"831":{"code":"BG-20","name":"Sliven"},"832":{"code":"BG-21","name":"Smolyan"},"833":{"code":"BG-22","name":"Sofia City"},"834":{"code":"BG-23","name":"Sofia Province"},"835":{"code":"BG-24","name":"Stara Zagora"},"836":{"code":"BG-25","name":"Targovishte"},"814":{"code":"BG-03","name":"Varna"},"815":{"code":"BG-04","name":"Veliko Tarnovo"},"816":{"code":"BG-05","name":"Vidin"},"817":{"code":"BG-06","name":"Vratsa"},"839":{"code":"BG-28","name":"Yambol"}}},"CH":{"name":"Schweiz","regions":{"104":{"code":"AG","name":"Aargau"},"106":{"code":"AR","name":"Appenzell Ausserrhoden"},"105":{"code":"AI","name":"Appenzell Innerrhoden"},"108":{"code":"BL","name":"Basel-Landschaft"},"109":{"code":"BS","name":"Basel-Stadt"},"107":{"code":"BE","name":"Bern"},"110":{"code":"FR","name":"Friburg"},"111":{"code":"GE","name":"Geneva"},"112":{"code":"GL","name":"Glarus"},"113":{"code":"GR","name":"Graub\u00fcnden"},"114":{"code":"JU","name":"Jura"},"115":{"code":"LU","name":"Lucerne"},"116":{"code":"NE","name":"Neuch\u00e2tel"},"117":{"code":"NW","name":"Nidwalden"},"118":{"code":"OW","name":"Obwalden"},"120":{"code":"SH","name":"Schaffhausen"},"122":{"code":"SZ","name":"Schwyz"},"121":{"code":"SO","name":"Solothurn"},"119":{"code":"SG","name":"St. Gallen"},"123":{"code":"TG","name":"Thurgau"},"124":{"code":"TI","name":"Ticino"},"125":{"code":"UR","name":"Uri"},"126":{"code":"VD","name":"Vaud"},"127":{"code":"VS","name":"Wallis"},"128":{"code":"ZG","name":"Zug"},"129":{"code":"ZH","name":"Z\u00fcrich"}}},"CY":{"name":"Zypern"},"CZ":{"name":"Tschechien","regions":{"1110":{"code":"CZ-31","name":"Jiho\u010desk\u00fd kraj"},"1118":{"code":"CZ-64","name":"Jihomoravsk\u00fd kraj"},"1112":{"code":"CZ-41","name":"Karlovarsk\u00fd kraj"},"1117":{"code":"CZ-63","name":"Kraj Vyso\u010dina"},"1115":{"code":"CZ-52","name":"Kr\u00e1lov\u00e9hradeck\u00fd kraj"},"1114":{"code":"CZ-51","name":"Libereck\u00fd kraj"},"1121":{"code":"CZ-80","name":"Moravskoslezsk\u00fd kraj"},"1119":{"code":"CZ-71","name":"Olomouck\u00fd kraj"},"1116":{"code":"CZ-53","name":"Pardubick\u00fd kraj"},"1111":{"code":"CZ-32","name":"Plze\u0148sk\u00fd kraj"},"1108":{"code":"CZ-10","name":"Praha, Hlavn\u00ed m\u011bsto"},"1109":{"code":"CZ-20","name":"St\u0159edo\u010desk\u00fd kraj"},"1113":{"code":"CZ-42","name":"\u00dasteck\u00fd kraj"},"1120":{"code":"CZ-72","name":"Zl\u00ednsk\u00fd kraj"}}},"DE":{"name":"Deutschland","regions":{"80":{"code":"BAW","name":"Baden-W\u00fcrttemberg"},"81":{"code":"BAY","name":"Bayern"},"82":{"code":"BER","name":"Berlin"},"83":{"code":"BRG","name":"Brandenburg"},"84":{"code":"BRE","name":"Bremen"},"85":{"code":"HAM","name":"Hamburg"},"86":{"code":"HES","name":"Hessen"},"87":{"code":"MEC","name":"Mecklenburg-Vorpommern"},"79":{"code":"NDS","name":"Niedersachsen"},"88":{"code":"NRW","name":"Nordrhein-Westfalen"},"89":{"code":"RHE","name":"Rheinland-Pfalz"},"90":{"code":"SAR","name":"Saarland"},"91":{"code":"SAS","name":"Sachsen"},"92":{"code":"SAC","name":"Sachsen-Anhalt"},"93":{"code":"SCN","name":"Schleswig-Holstein"},"94":{"code":"THE","name":"Th\u00fcringen"}}},"DK":{"name":"D\u00e4nemark","regions":{"901":{"code":"DK-84","name":"Hovedstaden"},"902":{"code":"DK-82","name":"Midtjylland"},"903":{"code":"DK-81","name":"Nordjylland"},"904":{"code":"DK-85","name":"Sj\u00e6lland"},"905":{"code":"DK-83","name":"Syddanmark"}}},"EE":{"name":"Estland","regions":{"340":{"code":"EE-37","name":"Harjumaa"},"341":{"code":"EE-39","name":"Hiiumaa"},"342":{"code":"EE-44","name":"Ida-Virumaa"}
9544,"344":{"code":"EE-51","name":"J\u00e4rvamaa"},"343":{"code":"EE-49","name":"J\u00f5gevamaa"},"346":{"code":"EE-59","name":"L\u00e4\u00e4ne-Virumaa"},"345":{"code":"EE-57","name":"L\u00e4\u00e4nemaa"},"348":{"code":"EE-67","name":"P\u00e4rnumaa"},"347":{"code":"EE-65","name":"P\u00f5lvamaa"},"349":{"code":"EE-70","name":"Raplamaa"},"350":{"code":"EE-74","name":"Saaremaa"},"351":{"code":"EE-78","name":"Tartumaa"},"352":{"code":"EE-82","name":"Valgamaa"},"353":{"code":"EE-84","name":"Viljandimaa"},"354":{"code":"EE-86","name":"V\u00f5rumaa"}}},"ES":{"name":"Spanien","regions":{"130":{"code":"A Coru\u0441a","name":"A Coru\u00f1a"},"131":{"code":"Alava","name":"Alava"},"132":{"code":"Albacete","name":"Albacete"},"133":{"code":"Alicante","name":"Alicante"},"134":{"code":"Almeria","name":"Almeria"},"135":{"code":"Asturias","name":"Asturias"},"136":{"code":"Avila","name":"Avila"},"137":{"code":"Badajoz","name":"Badajoz"},"138":{"code":"Baleares","name":"Baleares"},"139":{"code":"Barcelona","name":"Barcelona"},"140":{"code":"Burgos","name":"Burgos"},"141":{"code":"Caceres","name":"Caceres"},"142":{"code":"Cadiz","name":"Cadiz"},"143":{"code":"Cantabria","name":"Cantabria"},"144":{"code":"Castellon","name":"Castellon"},"145":{"code":"Ceuta","name":"Ceuta"},"146":{"code":"Ciudad Real","name":"Ciudad Real"},"147":{"code":"Cordoba","name":"Cordoba"},"148":{"code":"Cuenca","name":"Cuenca"},"149":{"code":"Girona","name":"Girona"},"150":{"code":"Granada","name":"Granada"},"151":{"code":"Guadalajara","name":"Guadalajara"},"152":{"code":"Guipuzcoa","name":"Guipuzcoa"},"153":{"code":"Huelva","name":"Huelva"},"154":{"code":"Huesca","name":"Huesca"},"155":{"code":"Jaen","name":"Jaen"},"156":{"code":"La Rioja","name":"La Rioja"},"157":{"code":"Las Palmas","name":"Las Palmas"},"158":{"code":"Leon","name":"Leon"},"159":{"code":"Lleida","name":"Lleida"},"160":{"code":"Lugo","name":"Lugo"},"161":{"code":"Madrid","name":"Madrid"},"162":{"code":"Malaga","name":"Malaga"},"163":{"code":"Melilla","name":"Melilla"},"164":{"code":"Murcia","name":"Murcia"},"165":{"code":"Navarra","name":"Navarra"},"166":{"code":"Ourense","name":"Ourense"},"167":{"code":"Palencia","name":"Palencia"},"168":{"code":"Pontevedra","name":"Pontevedra"},"169":{"code":"Salamanca","name":"Salamanca"},"170":{"code":"Santa Cruz de Tenerife","name":"Santa Cruz de Tenerife"},"171":{"code":"Segovia","name":"Segovia"},"172":{"code":"Sevilla","name":"Sevilla"},"173":{"code":"Soria","name":"Soria"},"174":{"code":"Tarragona","name":"Tarragona"},"175":{"code":"Teruel","name":"Teruel"},"176":{"code":"Toledo","name":"Toledo"},"177":{"code":"Valencia","name":"Valencia"},"178":{"code":"Valladolid","name":"Valladolid"},"179":{"code":"Vizcaya","name":"Vizcaya"},"180":{"code":"Zamora","name":"Zamora"},"181":{"code":"Zaragoza","name":"Zaragoza"}}},"FI":{"name":"Finnland","regions":{"339":{"code":"Ahvenanmaa","name":"Ahvenanmaa"},"333":{"code":"Etel\u00e4-Karjala","name":"Etel\u00e4-Karjala"},"326":{"code":"Etel\u00e4-Pohjanmaa","name":"Etel\u00e4-Pohjanmaa"},"325":{"code":"Etel\u00e4-Savo","name":"Etel\u00e4-Savo"},"337":{"code":"It\u00e4-Uusimaa","name":"It\u00e4-Uusimaa"},"322":{"code":"Kainuu","name":"Kainuu"},"335":{"code":"Kanta-H\u00e4me","name":"Kanta-H\u00e4me"},"330":{"code":"Keski-Pohjanmaa","name":"Keski-Pohjanmaa"},"331":{"code":"Keski-Suomi","name":"Keski-Suomi"},"338":{"code":"Kymenlaakso","name":"Kymenlaakso"},"320":{"code":"Lappi","name":"Lappi"},"334":{"code":"P\u00e4ij\u00e4t-H\u00e4me","name":"P\u00e4ij\u00e4t-H\u00e4me"},"328":{"code":"Pirkanmaa","name":"Pirkanmaa"},"327":{"code":"Pohjanmaa","name":"Pohjanmaa"},"323":{"code":"Pohjois-Karjala","name":"Pohjois-Karjala"},"321":{"code":"Pohjois-Pohjanmaa","name":"Pohjois-Pohjanmaa"},"324":{"code":"Pohjois-Savo","name":"Pohjois-Savo"},"329":{"code":"Satakunta","name":"Satakunta"},"336":{"code":"Uusimaa","name":"Uusimaa"},"332":{"code":"Varsinais-Suomi","name":"Varsinais-Suomi"}}},"GR":{"name":"Griechenland","regions":{"943":{"code":"GR-69","name":"\u00c1gion \u00d3ros"},"930":{"code":"GR-A","name":"Anatolik\u00ed Makedon\u00eda kai Thr\u00e1ki"},"931":{"code":"GR-I","name":"Attik\u00ed"},"932":{"code":"GR-G","name":"Dytik\u00ed Ell\u00e1da"},"933":{"code":"GR-C","name":"Dytik\u00ed Makedon\u00eda"},"934":{"code":"GR-F","name":"Ion\u00eda N\u00edsia"},"935":{"code":"GR-D","name":"\u00cdpeiros"},"936":{"code":"GR-B","name":"Kentrik\u00ed Makedon\u00eda"},"937":{"code":"GR-M","name":"Kr\u00edti"},"938":{"code":"GR-L","name":"N\u00f3tio Aiga\u00edo"},"939":{"code":"GR-J","name":"Pelop\u00f3nnisos"},"940":{"code":"GR-H","name":"Stere\u00e1 Ell\u00e1da"}
9544,"941":{"code":"GR-E","name":"Thessal\u00eda"},"942":{"code":"GR-K","name":"V\u00f3reio Aiga\u00edo"}}},"HR":{"name":"Kroatien","regions":{"518":{"code":"HR-07","name":"Bjelovarsko-bilogorska \u017eupanija"},"523":{"code":"HR-12","name":"Brodsko-posavska \u017eupanija"},"530":{"code":"HR-19","name":"Dubrova\u010dko-neretvanska \u017eupanija"},"532":{"code":"HR-21","name":"Grad Zagreb"},"529":{"code":"HR-18","name":"Istarska \u017eupanija"},"515":{"code":"HR-04","name":"Karlova\u010dka \u017eupanija"},"517":{"code":"HR-06","name":"Koprivni\u010dko-kri\u017eeva\u010dka \u017eupanija"},"513":{"code":"HR-02","name":"Krapinsko-zagorska \u017eupanija"},"520":{"code":"HR-09","name":"Li\u010dko-senjska \u017eupanija"},"531":{"code":"HR-20","name":"Me\u0111imurska \u017eupanija"},"525":{"code":"HR-14","name":"Osje\u010dko-baranjska \u017eupanija"},"522":{"code":"HR-11","name":"Po\u017ee\u0161ko-slavonska \u017eupanija"},"519":{"code":"HR-08","name":"Primorsko-goranska \u017eupanija"},"526":{"code":"HR-15","name":"\u0160ibensko-kninska \u017eupanija"},"514":{"code":"HR-03","name":"Sisa\u010dko-moslava\u010dka \u017eupanija"},"528":{"code":"HR-17","name":"Splitsko-dalmatinska \u017eupanija"},"516":{"code":"HR-05","name":"Vara\u017edinska \u017eupanija"},"521":{"code":"HR-10","name":"Viroviti\u010dko-podravska \u017eupanija"},"527":{"code":"HR-16","name":"Vukovarsko-srijemska \u017eupanija"},"524":{"code":"HR-13","name":"Zadarska \u017eupanija"},"512":{"code":"HR-01","name":"Zagreba\u010dka \u017eupanija"}}},"HU":{"name":"Ungarn"},"IE":{"name":"Irland"},"IT":{"name":"Italien","regions":{"702":{"code":"AG","name":"Agrigento"},"703":{"code":"AL","name":"Alessandria"},"704":{"code":"AN","name":"Ancona"},"705":{"code":"AO","name":"Aosta"},"707":{"code":"AR","name":"Arezzo"},"708":{"code":"AP","name":"Ascoli-Piceno"},"709":{"code":"AT","name":"Asti"},"710":{"code":"AV","name":"Avellino"},"711":{"code":"BA","name":"Bari"},"712":{"code":"BT","name":"Barletta-Andria-Trani"},"713":{"code":"BL","name":"Belluno"},"714":{"code":"BN","name":"Benevento"},"715":{"code":"BG","name":"Bergamo"},"716":{"code":"BI","name":"Biella"},"717":{"code":"BO","name":"Bologna"},"718":{"code":"BZ","name":"Bolzano"},"719":{"code":"BS","name":"Brescia"},"720":{"code":"BR","name":"Brindisi"},"721":{"code":"CA","name":"Cagliari"},"722":{"code":"CL","name":"Caltanissetta"},"723":{"code":"CB","name":"Campobasso"},"724":{"code":"CI","name":"Carbonia Iglesias"},"725":{"code":"CE","name":"Caserta"},"726":{"code":"CT","name":"Catania"},"727":{"code":"CZ","name":"Catanzaro"},"728":{"code":"CH","name":"Chieti"},"729":{"code":"CO","name":"Como"},"730":{"code":"CS","name":"Cosenza"},"731":{"code":"CR","name":"Cremona"},"732":{"code":"KR","name":"Crotone"},"733":{"code":"CN","name":"Cuneo"},"734":{"code":"EN","name":"Enna"},"735":{"code":"FM","name":"Fermo"},"736":{"code":"FE","name":"Ferrara"},"737":{"code":"FI","name":"Firenze"},"738":{"code":"FG","name":"Foggia"},"739":{"code":"FC","name":"Forli-Cesena"},"740":{"code":"FR","name":"Frosinone"},"741":{"code":"GE","name":"Genova"},"742":{"code":"GO","name":"Gorizia"},"743":{"code":"GR","name":"Grosseto"},"744":{"code":"IM","name":"Imperia"},"745":{"code":"IS","name":"Isernia"},"706":{"code":"AQ","name":"L'Aquila"},"746":{"code":"SP","name":"La-Spezia"},"747":{"code":"LT","name":"Latina"},"748":{"code":"LE","name":"Lecce"},"749":{"code":"LC","name":"Lecco"},"750":{"code":"LI","name":"Livorno"},"751":{"code":"LO","name":"Lodi"},"752":{"code":"LU","name":"Lucca"},"753":{"code":"MC","name":"Macerata"},"754":{"code":"MN","name":"Mantova"},"755":{"code":"MS","name":"Massa-Carrara"},"756":{"code":"MT","name":"Matera"},"757":{"code":"VS","name":"Medio Campidano"},"758":{"code":"ME","name":"Messina"},"759":{"code":"MI","name":"Milano"},"760":{"code":"MO","name":"Modena"},"761":{"code":"MB","name":"Monza-Brianza"},"762":{"code":"NA","name":"Napoli"},"763":{"code":"NO","name":"Novara"},"764":{"code":"NU","name":"Nuoro"},"765":{"code":"OG","name":"Ogliastra"},"766":{"code":"OT","name":"Olbia Tempio"},"767":{"code":"OR","name":"Oristano"},"768":{"code":"PD","name":"Padova"},"769":{"code":"PA","name":"Palermo"},"770":{"code":"PR","name":"Parma"},"771":{"code":"PV","name":"Pavia"},"772":{"code":"PG","name":"Perugia"},"773":{"code":"PU","name":"Pesaro-Urbino"},"774":{"code":"PE","name":"Pescara"},"775":{"code":"PC","name":"Piacenza"},"776":{"code":"PI","name":"Pisa"},"777":{"code":"PT","name":"Pistoia"},"778":{"code":"PN","name":"Pordenone"},"779":{"code":"PZ","name":"Potenza"},"780":{"code":"PO","name":"Prato"},"781":{"code":"RG","name":"Ragusa"},"782":{"code":"RA","name":"Ravenna"},"783":{"code":"RC","name":"Reggio-Calabria"},"784":{"code":"RE","name":"Reggio-Emilia"},"785":{"code":"RI","name":"Rieti"},"786":{"code":"RN","name":"Rimini"},"787":{"code":"RM","name":"Roma"},"788":{"code":"RO","name":"Rovigo"},"789":{"code":"SA","name":"Salerno"},"790":{"code":"SS","name":"Sassari"},"791":{"code":"SV","name":"Savona"},"792":{"code":"SI","name":"Siena"},"793":{"code":"SR","name":"Siracusa"},"794":{"code":"SO","name":"Sondrio"},"795":{"code":"TA","name":"Taranto"},"796":{"code":"TE","name":"Teramo"},"797":{"code":"TR","name":"Terni"},"798":{"code":"TO","name":"Torino"},"799":{"code":"TP","name":"Trapani"},"800":{"code":"TN","name":"Trento"},"801":{"code":"TV","name":"Treviso"},"802":{"code":"TS","name":"Trieste"},"803":{"code":"UD","name":"Udine"},"804":{"code":"VA","name":"Varese"},"805":{"code":"VE","name":"Venezia"},"806":{"code":"VB","name":"Verbania"},"807":{"code":"VC","name":"Vercelli"},"808":{"code":"VR","name":"Verona"}
9544,"809":{"code":"VV","name":"Vibo-Valentia"},"810":{"code":"VI","name":"Vicenza"},"811":{"code":"VT","name":"Viterbo"}}},"LT":{"name":"Litauen","regions":{"475":{"code":"LT-AL","name":"Alytaus Apskritis"},"476":{"code":"LT-KU","name":"Kauno Apskritis"},"477":{"code":"LT-KL","name":"Klaip\u0117dos Apskritis"},"478":{"code":"LT-MR","name":"Marijampol\u0117s Apskritis"},"479":{"code":"LT-PN","name":"Panev\u0117\u017eio Apskritis"},"480":{"code":"LT-SA","name":"\u0160iauli\u0173 Apskritis"},"481":{"code":"LT-TA","name":"Taurag\u0117s Apskritis"},"482":{"code":"LT-TE","name":"Tel\u0161i\u0173 Apskritis"},"483":{"code":"LT-UT","name":"Utenos Apskritis"},"484":{"code":"LT-VL","name":"Vilniaus Apskritis"}}},"LU":{"name":"Luxemburg"},"LV":{"name":"Lettland","regions":{"471":{"code":"\u0100da\u017eu novads","name":"\u0100da\u017eu novads"},"366":{"code":"Aglonas novads","name":"Aglonas novads"},"367":{"code":"LV-AI","name":"Aizkraukles novads"},"368":{"code":"Aizputes novads","name":"Aizputes novads"},"369":{"code":"Akn\u012bstes novads","name":"Akn\u012bstes novads"},"370":{"code":"Alojas novads","name":"Alojas novads"},"371":{"code":"Alsungas novads","name":"Alsungas novads"},"372":{"code":"LV-AL","name":"Al\u016bksnes novads"},"373":{"code":"Amatas novads","name":"Amatas novads"},"374":{"code":"Apes novads","name":"Apes novads"},"375":{"code":"Auces novads","name":"Auces novads"},"376":{"code":"Bab\u012btes novads","name":"Bab\u012btes novads"},"377":{"code":"Baldones novads","name":"Baldones novads"},"378":{"code":"Baltinavas novads","name":"Baltinavas novads"},"379":{"code":"LV-BL","name":"Balvu novads"},"380":{"code":"LV-BU","name":"Bauskas novads"},"381":{"code":"Bever\u012bnas novads","name":"Bever\u012bnas novads"},"382":{"code":"Broc\u0113nu novads","name":"Broc\u0113nu novads"},"383":{"code":"Burtnieku novads","name":"Burtnieku novads"},"384":{"code":"Carnikavas novads","name":"Carnikavas novads"},"387":{"code":"LV-CE","name":"C\u0113su novads"},"385":{"code":"Cesvaines novads","name":"Cesvaines novads"},"386":{"code":"Ciblas novads","name":"Ciblas novads"},"388":{"code":"Dagdas novads","name":"Dagdas novads"},"355":{"code":"LV-DGV","name":"Daugavpils"},"389":{"code":"LV-DA","name":"Daugavpils novads"},"390":{"code":"LV-DO","name":"Dobeles novads"},"391":{"code":"Dundagas novads","name":"Dundagas novads"},"392":{"code":"Durbes novads","name":"Durbes novads"},"393":{"code":"Engures novads","name":"Engures novads"},"472":{"code":"\u0112rg\u013cu novads","name":"\u0112rg\u013cu novads"},"394":{"code":"Garkalnes novads","name":"Garkalnes novads"},"395":{"code":"Grobi\u0146as novads","name":"Grobi\u0146as novads"},"396":{"code":"LV-GU","name":"Gulbenes novads"},"397":{"code":"Iecavas novads","name":"Iecavas novads"},"398":{"code":"Ik\u0161\u0137iles novads","name":"Ik\u0161\u0137iles novads"},"399":{"code":"Il\u016bkstes novads","name":"Il\u016bkstes novads"},"400":{"code":"In\u010dukalna novads","name":"In\u010dukalna novads"},"401":{"code":"Jaunjelgavas novads","name":"Jaunjelgavas novads"},"402":{"code":"Jaunpiebalgas novads","name":"Jaunpiebalgas novads"},"403":{"code":"Jaunpils novads","name":"Jaunpils novads"},"357":{"code":"J\u0113kabpils","name":"J\u0113kabpils"},"405":{"code":"LV-JK","name":"J\u0113kabpils novads"},"356":{"code":"LV-JEL","name":"Jelgava"},"404":{"code":"LV-JL","name":"Jelgavas novads"},"358":{"code":"LV-JUR","name":"J\u016brmala"},"406":{"code":"Kandavas novads","name":"Kandavas novads"},"412":{"code":"K\u0101rsavas novads","name":"K\u0101rsavas novads"},"473":{"code":"\u0136eguma novads","name":"\u0136eguma novads"},"474":{"code":"\u0136ekavas novads","name":"\u0136ekavas novads"},"407":{"code":"Kokneses novads","name":"Kokneses novads"},"410":{"code":"LV-KR","name":"Kr\u0101slavas novads"},"408":{"code":"Krimuldas novads","name":"Krimuldas novads"},"409":{"code":"Krustpils novads","name":"Krustpils novads"},"411":{"code":"LV-KU","name":"Kuld\u012bgas novads"},"413":{"code":"Lielv\u0101rdes novads","name":"Lielv\u0101rdes novads"},"359":{"code":"LV-LPX","name":"Liep\u0101ja"},"360":{"code":"LV-LE","name":"Liep\u0101jas novads"},"417":{"code":"L\u012bgatnes novads","name":"L\u012bgatnes novads"},"414":{"code":"LV-LM","name":"Limba\u017eu novads"},"418":{"code":"L\u012bv\u0101nu novads","name":"L\u012bv\u0101nu novads"},"415":{"code":"Lub\u0101nas novads","name":"Lub\u0101nas novads"},"416":{"code":"LV-LU","name":"Ludzas novads"},"419":{"code":"LV-MA","name":"Madonas novads"},"421":{"code":"M\u0101lpils novads","name":"M\u0101lpils novads"},"422":{"code":"M\u0101rupes novads","name":"M\u0101rupes novads"},"420":{"code":"Mazsalacas novads","name":"Mazsalacas novads"},"423":{"code":"Nauk\u0161\u0113nu novads","name":"Nauk\u0161\u0113nu novads"},"424":{"code":"Neretas novads","name":"Neretas novads"},"425":{"code":"N\u012bcas novads","name":"N\u012bcas novads"},"426":{"code":"LV-OG","name":"Ogres novads"},"427":{"code":"Olaines novads","name":"Olaines novads"},"428":{"code":"Ozolnieku novads","name":"Ozolnieku novads"},"432":{"code":"P\u0101rgaujas novads","name":"P\u0101rgaujas novads"},"433":{"code":"P\u0101vilostas novads","name":"P\u0101vilostas novads"},"434":{"code":"P\u013cavi\u0146u novads","name":"P\u013cavi\u0146u novads"},"429":{"code":"LV-PR","name":"Prei\u013cu novads"},"430":{"code":"Priekules novads","name":"Priekules novads"},"431":{"code":"Prieku\u013cu novads","name":"Prieku\u013cu novads"},"435":{"code":"Raunas novads","name":"Raunas novads"},"361":{"code":"LV-REZ","name":"R\u0113zekne"},"442":{"code":"LV-RE","name":"R\u0113zeknes novads"},"436":{"code":"Riebi\u0146u novads","name":"Riebi\u0146u novads"},"362":{"code":"LV-RIX","name":"R\u012bga"},"363":{"code":"LV-RI","name":"R\u012bgas novads"},"437":{"code":"Rojas novads","name":"Rojas novads"},"438":{"code":"Ropa\u017eu novads","name":"Ropa\u017eu novads"},"439":{"code":"Rucavas novads","name":"Rucavas novads"},"440":{"code":"Rug\u0101ju novads","name":"Rug\u0101ju novads"},"443":{"code":"R\u016bjienas novads","name":"R\u016bjienas novads"},"441":{"code":"Rund\u0101les novads","name":"Rund\u0101les novads"},"444":{"code":"Salacgr\u012bvas novads","name":"Salacgr\u012bvas novads"},"445":{"code":"Salas novads","name":"Salas novads"},"446":{"code":"Salaspils novads","name":"Salaspils novads"},"447":{"code":"LV-SA","name":"Saldus novads"},"448":{"code":"Saulkrastu novads","name":"Saulkrastu novads"},"455":{"code":"S\u0113jas novads","name":"S\u0113jas novads"},"449":{"code":"Siguldas novads","name":"Siguldas novads"}
9544,"451":{"code":"Skr\u012bveru novads","name":"Skr\u012bveru novads"},"450":{"code":"Skrundas novads","name":"Skrundas novads"},"452":{"code":"Smiltenes novads","name":"Smiltenes novads"},"453":{"code":"Stopi\u0146u novads","name":"Stopi\u0146u novads"},"454":{"code":"Stren\u010du novads","name":"Stren\u010du novads"},"456":{"code":"LV-TA","name":"Talsu novads"},"458":{"code":"T\u0113rvetes novads","name":"T\u0113rvetes novads"},"457":{"code":"LV-TU","name":"Tukuma novads"},"459":{"code":"Vai\u0146odes novads","name":"Vai\u0146odes novads"},"460":{"code":"LV-VK","name":"Valkas novads"},"364":{"code":"Valmiera","name":"Valmiera"},"461":{"code":"LV-VM","name":"Valmieras novads"},"462":{"code":"Varak\u013c\u0101nu novads","name":"Varak\u013c\u0101nu novads"},"469":{"code":"V\u0101rkavas novads","name":"V\u0101rkavas novads"},"463":{"code":"Vecpiebalgas novads","name":"Vecpiebalgas novads"},"464":{"code":"Vecumnieku novads","name":"Vecumnieku novads"},"365":{"code":"LV-VEN","name":"Ventspils"},"465":{"code":"LV-VE","name":"Ventspils novads"},"466":{"code":"Vies\u012btes novads","name":"Vies\u012btes novads"},"467":{"code":"Vi\u013cakas novads","name":"Vi\u013cakas novads"},"468":{"code":"Vi\u013c\u0101nu novads","name":"Vi\u013c\u0101nu novads"},"470":{"code":"Zilupes novads","name":"Zilupes novads"}}},"MC":{"name":"Monaco"},"MT":{"name":"Malta"},"NL":{"name":"Niederlande"},"PL":{"name":"Polen","regions":{"686":{"code":"PL-02","name":"dolno\u015bl\u0105skie"},"687":{"code":"PL-04","name":"kujawsko-pomorskie"},"688":{"code":"PL-06","name":"lubelskie"},"689":{"code":"PL-08","name":"lubuskie"},"692":{"code":"PL-14","name":"mazowieckie"},"691":{"code":"PL-12","name":"ma\u0142opolskie"},"693":{"code":"PL-16","name":"opolskie"},"694":{"code":"PL-18","name":"podkarpackie"},"695":{"code":"PL-20","name":"podlaskie"},"696":{"code":"PL-22","name":"pomorskie"},"697":{"code":"PL-24","name":"\u015bl\u0105skie"},"698":{"code":"PL-26","name":"\u015bwi\u0119tokrzyskie"},"699":{"code":"PL-28","name":"warmi\u0144sko-mazurskie"},"700":{"code":"PL-30","name":"wielkopolskie"},"701":{"code":"PL-32","name":"zachodniopomorskie"},"690":{"code":"PL-10","name":"\u0142\u00f3dzkie"}}},"PT":{"name":"Portugal","regions":{"1006":{"code":"PT-01","name":"Aveiro"},"1007":{"code":"PT-02","name":"Beja"},"1008":{"code":"PT-03","name":"Braga"},"1009":{"code":"PT-04","name":"Bragan\u00e7a"},"1010":{"code":"PT-05","name":"Castelo Branco"},"1011":{"code":"PT-06","name":"Coimbra"},"1012":{"code":"PT-07","name":"\u00c9vora"},"1013":{"code":"PT-08","name":"Faro"},"1014":{"code":"PT-09","name":"Guarda"},"1015":{"code":"PT-10","name":"Leiria"},"1016":{"code":"PT-11","name":"Lisboa"},"1017":{"code":"PT-12","name":"Portalegre"},"1018":{"code":"PT-13","name":"Porto"},"1025":{"code":"PT-30","name":"Regi\u00e3o Aut\u00f3noma da Madeira"},"1024":{"code":"PT-20","name":"Regi\u00e3o Aut\u00f3noma dos A\u00e7ores"},"1019":{"code":"PT-14","name":"Santar\u00e9m"},"1020":{"code":"PT-15","name":"Set\u00fabal"},"1021":{"code":"PT-16","name":"Viana do Castelo"},"1022":{"code":"PT-17","name":"Vila Real"},"1023":{"code":"PT-18","name":"Viseu"}}},"SE":{"name":"Schweden","regions":{"1036":{"code":"SE-K","name":"Blekinge l\u00e4n"},"1037":{"code":"SE-W","name":"Dalarnas l\u00e4n"},"1039":{"code":"SE-X","name":"G\u00e4vleborgs l\u00e4n"},"1038":{"code":"SE-I","name":"Gotlands l\u00e4n"},"1040":{"code":"SE-N","name":"Hallands l\u00e4n"},"1041":{"code":"SE-Z","name":"J\u00e4mtlands l\u00e4n"},"1042":{"code":"SE-F","name":"J\u00f6nk\u00f6pings l\u00e4n"},"1043":{"code":"SE-H","name":"Kalmar l\u00e4n"},"1044":{"code":"SE-G","name":"Kronobergs l\u00e4n"},"1045":{"code":"SE-BD","name":"Norrbottens l\u00e4n"},"1055":{"code":"SE-T","name":"\u00d6rebro l\u00e4n"},"1056":{"code":"SE-E","name":"\u00d6sterg\u00f6tlands l\u00e4n"},"1046":{"code":"SE-M","name":"Sk\u00e5ne l\u00e4n"},"1048":{"code":"SE-D","name":"S\u00f6dermanlands l\u00e4n"},"1047":{"code":"SE-AB","name":"Stockholms l\u00e4n"},"1049":{"code":"SE-C","name":"Uppsala l\u00e4n"},"1050":{"code":"SE-S","name":"V\u00e4rmlands l\u00e4n"},"1051":{"code":"SE-AC","name":"V\u00e4sterbottens l\u00e4n"},"1052":{"code":"SE-Y","name":"V\u00e4sternorrlands l\u00e4n"},"1053":{"code":"SE-U","name":"V\u00e4stmanlands l\u00e4n"},"1054":{"code":"SE-O","name":"V\u00e4stra G\u00f6talands l\u00e4n"}}},"SI":{"name":"Slowenien"},"SK":{"name":"Slowakei"},"data_id":1790911064},"captcha":[],"instant-purchase":[],"loggedAsCustomer":[],"persistent":[],"review":[],"wishlist":{"items":[]},"hyva_checkout":[],"ammessages":[],"etracker-custom-section":[],"rewards":[],"recently_viewed_product":[],"recently_compared_product":[],"product_data_storage":[],"paypal-billing-agreement":[],"paypal-buyer-country":[]}</script>
9544
9545</div></body>
9546</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.