@startnext/chrome 0.4.9 → 0.4.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +17 -1
  2. package/dist/components/base/BaseComponent.d.ts +5 -0
  3. package/dist/components/base/BaseComponent.d.ts.map +1 -1
  4. package/dist/components/header/StartnextHeader.d.ts +2 -0
  5. package/dist/components/header/StartnextHeader.d.ts.map +1 -1
  6. package/dist/index.js +2 -2
  7. package/dist/index.umd.js +2 -2
  8. package/package.json +9 -8
package/README.md CHANGED
@@ -24,6 +24,22 @@ import '@startnext/chrome';
24
24
  <startnext-footer></startnext-footer>
25
25
  ```
26
26
 
27
+ **React 18 + Next.js (lazy import):** Use explicit string values for boolean attributes to ensure correct SSR serialization and hydration in all React versions:
28
+
29
+ ```jsx
30
+ // ✅ Korrekt: explizite String-Werte → setAttribute() in allen React-Versionen
31
+ <startnext-header
32
+ api-url="https://scs-api.vercel.app"
33
+ light=""
34
+ color-mode="light"
35
+ hide-lang=""
36
+ hide-cta=""
37
+ />
38
+
39
+ // ❌ Bare booleans können in React 18 + lazy import als DOM-Properties (nicht Attribute) gesetzt werden
40
+ <startnext-header light hide-lang />
41
+ ```
42
+
27
43
  ### Via CDN (PHP, Vanilla HTML)
28
44
  ```html
29
45
  <script type="module" src="https://unpkg.com/@startnext/chrome@latest/dist/index.js"></script>
@@ -48,7 +64,7 @@ import '@startnext/chrome';
48
64
  | `authenticated` | `boolean` | `false` | Zeigt User-Avatar statt "Anmelden" Button |
49
65
  | `user-name` | `string` | - | Name des eingeloggten Users |
50
66
  | `user-avatar` | `string` | - | Avatar-URL des Users |
51
- | `color-mode` | `'light' \| 'dark'` | auto | Seitenweiter Farbmodus. Setzt/liest `<html class="dark/light">`. Ohne Attribut: Header scannt `<html>` beim Mount. Der Toggle-Button im Header wechselt `<html>`-Klasse und emittet `color-mode-change` |
67
+ | `color-mode` | `'light' \| 'dark'` | auto | Seitenweiter Farbmodus. Ohne Attribut: Header liest `<html class="dark/light">` beim Mount (Default: `light`). Mit Attribut: Header liest den Wert, schreibt aber die `<html>`-Klasse nicht (Consumer kontrolliert die Seite). Der Toggle-Button im Header wechselt `<html>`-Klasse und emittet `color-mode-change` |
52
68
  | `hide-color-mode` | `boolean` | `false` | Versteckt den Color-Mode Toggle-Button |
53
69
  | `hide-lang` | `boolean` | `false` | Versteckt den Language-Switcher komplett |
54
70
  | `hide-login` | `boolean` | `false` | Versteckt den "Anmelden" Button (auch wenn nicht eingeloggt) |
package/dist/components/base/BaseComponent.d.ts CHANGED
@@ -16,5 +16,10 @@ export declare abstract class BaseComponent extends HTMLElement {
16
16
  protected applyTheme(theme: ThemeVariables): void;
17
17
  /** Create a <style> element from a CSS string. */
18
18
  protected createStyle(css: string): HTMLStyleElement;
19
+ /** Convert pre-registered DOM properties to attributes (React 18 compatibility).
20
+ * React 18 sets boolean props as `element[name] = true` before the custom element
21
+ * is defined. Call this in connectedCallback (with _skipCallback = true) before
22
+ * reading attributes, so that attribute-based reads always find the correct value. */
23
+ protected upgradeBoolProps(props: string[]): void;
19
24
  }
20
25
  //# sourceMappingURL=BaseComponent.d.ts.map
package/dist/components/base/BaseComponent.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;GAGG;AACH,8BAAsB,aAAc,SAAQ,WAAW;IACrD,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;;IAO7B,kFAAkF;IAClF,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,OAAO;IAWnD;;6EAEyE;IACzE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAS9D,6DAA6D;IAC7D,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMjD,kDAAkD;IAClD,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB;CAKrD"}
1
+ {"version":3,"file":"BaseComponent.d.ts","sourceRoot":"","sources":["../../../src/components/base/BaseComponent.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D;;;GAGG;AACH,8BAAsB,aAAc,SAAQ,WAAW;IACrD,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;;IAO7B,kFAAkF;IAClF,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,OAAO;IAWnD;;6EAEyE;IACzE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,OAAO;IAS9D,6DAA6D;IAC7D,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI;IAMjD,kDAAkD;IAClD,SAAS,CAAC,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,gBAAgB;IAMpD;;;0FAGsF;IACtF,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;CAWlD"}
package/dist/components/header/StartnextHeader.d.ts CHANGED
@@ -23,6 +23,8 @@ export declare class StartnextHeader extends BaseComponent {
23
23
  private get requestedLanguages();
24
24
  /** True when header should show white text (dark page / hero background). */
25
25
  private get isLightHeader();
26
+ set light(v: boolean | string | null | undefined);
27
+ get light(): boolean;
26
28
  private ui;
27
29
  connectedCallback(): void;
28
30
  /** Return cached API data if available, otherwise defaults (theme only). */
package/dist/components/header/StartnextHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAQzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,qGAAqG;IACrG,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAiC;IACxD,uGAAuG;IACvG,OAAO,CAAC,MAAM,CAAC,cAAc,CAAoC;IAEjE,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,kBAAkB,GAI7B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAgBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAqDzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,aAAa,CAAS;IAE9B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAa5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;YAUZ,UAAU;IA8BxB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,YAAY;CAkErB"}
1
+ {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAQzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,qGAAqG;IACrG,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAiC;IACxD,uGAAuG;IACvG,OAAO,CAAC,MAAM,CAAC,cAAc,CAAoC;IAEjE,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,kBAAkB,GAI7B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAExB;IAOD,IAAI,KAAK,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAM/C;IACD,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAwBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAqDzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,aAAa,CAAS;IAE9B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAgB5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;YAUZ,UAAU;IA8BxB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,YAAY;CAkErB"}
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
- class n extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}emit(n,e){return this.dispatchEvent(new CustomEvent(n,{detail:e,bubbles:!0,composed:!0,cancelable:!0}))}getBoolAttr(n,e=!1){if(this.hasAttribute(n))return"false"!==this.getAttribute(n);const t=this[n];return void 0!==t?!1!==t&&"false"!==t:e}applyTheme(n){for(const[e,t]of Object.entries(n))this.style.setProperty(e,t)}createStyle(n){const e=document.createElement("style");return e.textContent=n,e}}const e={menuOpen:{de:"Menü öffnen",en:"Open menu"},menuClose:{de:"Menü schließen",en:"Close menu"},mainMenu:{de:"Hauptmenü",en:"Main menu"},mainNav:{de:"Hauptnavigation",en:"Main navigation"},userMenu:{de:"Benutzermenü",en:"User menu"},login:{de:"Anmelden",en:"Sign In"},homepage:{de:"Startnext Homepage",en:"Startnext Homepage"},langSelect:{de:"Sprache",en:"Language"},claimTop:{de:"Crowdfinanzieren",en:"Crowdfunding"},claimLarge:{de:"Crowdfinanziert seit 2010",en:"Crowdfunded since 2010"},colorMode:{de:"Farbmodus wechseln",en:"Toggle color mode"}};const t='\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :host {\n display: block;\n font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);\n font-size: var(--font-size-base, 16px);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font: inherit;\n cursor: pointer;\n border: none;\n background: none;\n color: inherit;\n }\n\n ul, ol {\n list-style: none;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n',a=`\n ${t}\n\n :host {\n display: block;\n }\n\n /* ── Headbar ─────────────────────────────────────────────────────────── */\n .headbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n z-index: var(--header-z-index, 12);\n transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n will-change: transform, opacity, backdrop-filter;\n }\n\n .headbar::after {\n content: "";\n position: absolute;\n inset: 0;\n background-color: #FFFFFF;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s linear;\n }\n\n @media (min-width: 768px) {\n .headbar > * {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n }\n\n /* ── States ─────────────────────────────────────────────────────────── */\n .headbar--light .headbar__icon {\n fill: #FFFFFF;\n color: #FFFFFF;\n }\n\n .headbar--light a,\n .headbar--light button {\n color: #FFFFFF;\n }\n\n .headbar--tight::after {\n opacity: 0.8;\n }\n\n .headbar--tight {\n backdrop-filter: blur(2px);\n }\n\n .headbar--tight .headbar__action--hide {\n opacity: 0;\n pointer-events: none;\n }\n\n .headbar--slide-up {\n pointer-events: none;\n opacity: 0;\n transform: translateY(-100%);\n }\n\n /* ── Left (Burger) ──────────────────────────────────────────────────── */\n .headbar__left {\n position: absolute;\n left: 16px;\n top: 34px;\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__left {\n left: 24px;\n }\n }\n\n /* ── Right ──────────────────────────────────────────────────────────── */\n .headbar__right {\n position: absolute;\n right: 16px;\n top: 38px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 6px;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__right {\n right: 24px;\n gap: 24px;\n }\n }\n\n /* ── Icons ──────────────────────────────────────────────────────────── */\n .headbar__icon {\n fill: var(--text-primary, #304b50);\n color: var(--text-primary, #304b50);\n transition: fill 0.3s linear, color 0.3s linear;\n will-change: fill, color;\n display: flex;\n align-items: center;\n }\n\n .headbar__icon svg {\n width: 24px;\n height: 24px;\n }\n\n .headbar__icon--clickable {\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n }\n\n .headbar__icon--clickable:hover {\n opacity: 0.7;\n }\n\n /* ── CTA Button ─────────────────────────────────────────────────────── */\n .headerbar__btn {\n position: absolute;\n left: 54px;\n top: 34px;\n background-color: var(--btn-primary-bg, #06E481);\n height: 32px;\n border-radius: 16px;\n padding: 0 15px;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n opacity: 0;\n transition: all 300ms ease-out;\n will-change: transform, opacity, max-width;\n z-index: 2;\n overflow: hidden;\n }\n\n .headerbar__btn--loaded {\n opacity: 1;\n }\n\n .headerbar__btn a {\n display: flex;\n align-items: center;\n white-space: nowrap;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n }\n\n .headerbar__btn:hover {\n background-color: var(--btn-primary-hover, #00B86F);\n }\n\n .headerbar__btn--text {\n fill: var(--text-primary, #304b50);\n transition: all 300ms ease-out;\n }\n\n .headerbar__btn--icon {\n opacity: 0;\n width: 0;\n transition: all 300ms ease-out;\n display: flex;\n align-items: center;\n }\n\n @media (max-width: 767px) {\n .headbar--tight .headerbar__btn--text {\n width: 0;\n overflow: hidden;\n }\n .headbar--tight .headerbar__btn--icon {\n width: 24px;\n opacity: 1;\n }\n }\n\n @media (min-width: 768px) {\n .headerbar__btn {\n left: 80px;\n }\n }\n\n /* ── Main Nav (desktop > 1100px) ────────────────────────────────────── */\n .headbar__menu {\n display: none;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n @media (min-width: 1100px) {\n .headbar__menu {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n height: 100%;\n display: flex;\n align-items: center;\n transition: all 300ms ease-out;\n max-width: fit-content;\n will-change: transform, opacity, max-width;\n }\n\n .headbar__menu--faded {\n transform: translateX(calc(-50% - 60px));\n max-width: 0;\n opacity: 0;\n }\n }\n\n .headbar__menu-item {\n list-style: none;\n }\n\n .headbar__menu-link {\n display: inline-block;\n padding: 8px 15px;\n position: relative;\n font-size: 16px;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n transition: color 0.3s;\n }\n\n .headbar--light .headbar__menu-link {\n color: #FFFFFF;\n }\n\n .headbar__menu-link::after {\n content: "";\n position: absolute;\n left: 15px;\n right: 15px;\n bottom: 2px;\n height: 2px;\n background-color: var(--text-primary, #304b50);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__menu-link::after {\n background-color: #FFFFFF;\n }\n\n .headbar__menu-link:hover::after {\n opacity: 1;\n }\n\n /* ── Logo (Lottie) ──────────────────────────────────────────────────── */\n .headbar__pageLogo--animation {\n width: 100%;\n max-width: 200px;\n margin: 0 auto;\n display: block;\n position: relative;\n top: 110px;\n transform: translateY(-110px) scale(0.65);\n z-index: 1;\n text-decoration: none;\n }\n\n .headbar__pageLogo--animation svg {\n transform: unset !important;\n }\n\n .headbar__pageLogo--animation svg path[fill] {\n fill: var(--text-primary, #304b50);\n }\n .headbar__pageLogo--animation svg path[stroke] {\n stroke: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__pageLogo--animation svg path[fill] {\n fill: #FFFFFF;\n }\n .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n stroke: #FFFFFF;\n }\n\n @media (min-width: 768px) {\n .headbar__pageLogo--animation {\n max-width: 300px;\n transform: translateY(-115px) scale(0.5);\n top: 100px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__pageLogo--animation {\n top: 120px;\n transform: translateY(-140px) scale(0.5);\n }\n }\n\n .headbar__pageLogo--animation-large {\n transform: translateY(0) scale(1);\n }\n\n /* ── Claim ──────────────────────────────────────────────────────────── */\n .headbar__claim {\n font-size: 14px;\n transition: all 0.3s;\n width: 100%;\n text-align: center;\n color: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__claim {\n color: #FFFFFF;\n }\n\n .headbar__claim--large {\n position: absolute;\n top: 201px;\n left: 50%;\n transform: translate(-50%);\n white-space: nowrap;\n z-index: 1;\n }\n\n .headbar--tight .headbar__claim--large {\n pointer-events: none;\n }\n\n @media (min-width: 768px) {\n .headbar__claim--large {\n top: 232px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__claim--large {\n top: 252px;\n }\n }\n\n /* ── User Avatar ────────────────────────────────────────────────────── */\n .headbar__avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .headbar--light .headbar__avatar {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n .headbar__avatar:hover {\n opacity: 0.85;\n }\n\n /* ── Login Button ───────────────────────────────────────────────────── */\n .headbar__login {\n padding: 4px 6px;\n font-size: 16px;\n font-family: inherit;\n white-space: nowrap;\n border: none;\n cursor: pointer;\n background: none;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s;\n display: flex;\n align-items: center;\n }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\n }\n\n .headbar__login-icon {\n display: flex;\n align-items: center;\n }\n\n .headbar__login-text {\n display: none;\n }\n\n .headbar__login-icon {\n display: flex;\n }\n\n @media (min-width: 768px) {\n .headbar__login-text {\n display: inline;\n }\n .headbar__login-icon {\n display: none;\n }\n }\n\n /* ── Language Dropdown ────────────────────────────────────────────── */\n .headbar__lang {\n position: relative;\n }\n\n .headbar__lang-toggle {\n display: flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-size: 16px;\n padding: 4px 6px;\n border: none;\n background: none;\n color: var(--text-primary, #304b50);\n cursor: pointer;\n border-radius: 4px;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__lang-toggle {\n color: #FFFFFF;\n }\n\n .headbar__lang-toggle:hover {\n opacity: 0.75;\n }\n\n .headbar__lang-arrow {\n display: flex;\n align-items: center;\n position: relative;\n top: -1px;\n left: 2px;\n transition: transform 0.25s ease;\n }\n\n .headbar__lang-arrow.open {\n transform: rotate(180deg);\n }\n\n .headbar__lang-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n min-width: 120px;\n background: #FFFFFF;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n padding: 4px 0;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-50%) translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n z-index: 10;\n }\n\n .headbar__lang-menu.open {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .headbar__lang-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: #304b50;\n background: none;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n }\n\n .headbar__lang-option:hover {\n font-weight: 600;\n }\n\n .headbar__lang-option--active {\n font-weight: 700;\n color: var(--btn-primary-bg, #06E481);\n }\n\n .headbar--light .headbar__lang-option {\n color: #304b50;\n }\n\n .headbar--light .headbar__lang-option:hover,\n .headbar--light .headbar__lang-option--active {\n color: var(--btn-primary-bg, #06E481);\n }\n\n /* ── Color Mode Toggle ──────────────────────────────────────────────── */\n .headbar__color-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n border-radius: 50%;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s, color 0.3s;\n }\n\n .headbar--light .headbar__color-mode {\n color: #FFFFFF;\n }\n\n .headbar__color-mode:hover {\n opacity: 0.7;\n }\n\n .headbar__color-mode-sun,\n .headbar__color-mode-moon {\n display: flex;\n align-items: center;\n }\n\n .headbar__color-mode-moon {\n display: none;\n }\n\n :host([color-mode="dark"]) .headbar__color-mode-sun {\n display: none;\n }\n\n :host([color-mode="dark"]) .headbar__color-mode-moon {\n display: flex;\n }\n\n /* ── Back Link ──────────────────────────────────────────────────────── */\n .headbar__back-link {\n display: flex;\n align-items: center;\n gap: 6px;\n text-decoration: none;\n color: inherit;\n font-size: 16px;\n white-space: nowrap;\n transition: opacity 0.2s;\n }\n\n .headbar__back-link:hover {\n opacity: 0.7;\n }\n\n .headbar__back-arrow {\n display: flex;\n position: relative;\n top: -1px;\n }\n\n @media (max-width: 768px) {\n .headbar__back-text { display: none; }\n }\n\n /* ── Overlay ────────────────────────────────────────────────────────── */\n .overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: var(--overlay-z-index, 1050);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .overlay.open {\n opacity: 1;\n visibility: visible;\n }\n\n /* ── Drawer (shared) ────────────────────────────────────────────────── */\n .drawer {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 320px;\n max-width: 85vw;\n background: #FFFFFF;\n z-index: var(--drawer-z-index, 1100);\n overflow-y: auto;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--text-primary, #304b50);\n }\n\n .drawer--left {\n left: 0;\n transform: translateX(-100%);\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer--right {\n right: 0;\n transform: translateX(100%);\n box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer.open {\n transform: translateX(0);\n }\n\n .drawer__user {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid var(--border-color, #E5E7EB);\n }\n\n .drawer__user-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n object-fit: cover;\n }\n\n .drawer__user-name {\n font-weight: 600;\n font-size: 16px;\n }\n\n .drawer__nav {\n padding: 8px 0;\n }\n\n .drawer__item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 500;\n transition: background-color 0.15s;\n cursor: pointer;\n width: 100%;\n text-align: left;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n border: none;\n background: none;\n font-family: inherit;\n }\n\n .drawer__item:hover {\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item--highlighted {\n color: #FFFFFF;\n background: var(--btn-primary-bg, #06E481);\n margin: 8px 16px;\n border-radius: 8px;\n justify-content: center;\n font-weight: 600;\n width: auto;\n }\n\n .drawer__item--highlighted:hover {\n background: var(--btn-primary-hover, #00B86F);\n }\n\n .drawer__item--small {\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n padding: 8px 20px;\n font-weight: 400;\n }\n\n .drawer__item--disabled {\n color: var(--text-disabled, #D1D5DB);\n pointer-events: none;\n }\n\n .drawer__item--outline {\n margin: 8px 16px;\n border: 1.5px solid var(--border-color, #E5E7EB);\n border-radius: 8px;\n justify-content: center;\n width: auto;\n background: none;\n }\n\n .drawer__item--outline:hover {\n border-color: var(--text-secondary, #6B7280);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n .drawer__item-badge {\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--btn-primary-bg, #06E481);\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n .drawer__item-expand {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .drawer__item-expand.expanded {\n transform: rotate(180deg);\n }\n\n .drawer__item-nav-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n }\n\n .drawer__divider {\n height: 1px;\n background: var(--border-color, #E5E7EB);\n margin: 8px 20px;\n }\n\n .drawer__children {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .drawer__children.expanded {\n max-height: 500px;\n }\n\n .drawer__child {\n display: block;\n padding: 10px 20px 10px 52px;\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n transition: background-color 0.15s, color 0.15s;\n text-decoration: none;\n }\n\n .drawer__child:hover {\n background: var(--hover-bg, #F3F4F6);\n color: var(--text-primary, #304b50);\n }\n\n /* ── Focus ──────────────────────────────────────────────────────────── */\n .headbar__icon--clickable:focus-visible,\n .headerbar__btn:focus-visible,\n .headbar__login:focus-visible,\n .headbar__menu-link:focus-visible,\n .drawer__item:focus-visible,\n .drawer__child:focus-visible {\n outline: 2px solid var(--btn-primary-bg, #06E481);\n outline-offset: 2px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n`
1
+ class n extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"})}emit(n,e){return this.dispatchEvent(new CustomEvent(n,{detail:e,bubbles:!0,composed:!0,cancelable:!0}))}getBoolAttr(n,e=!1){if(this.hasAttribute(n))return"false"!==this.getAttribute(n);const t=this[n];return void 0!==t?!1!==t&&"false"!==t:e}applyTheme(n){for(const[e,t]of Object.entries(n))this.style.setProperty(e,t)}createStyle(n){const e=document.createElement("style");return e.textContent=n,e}upgradeBoolProps(n){for(const e of n)if(Object.prototype.hasOwnProperty.call(this,e)){const n=this[e];delete this[e],!1!==n&&"false"!==n&&null!=n&&this.setAttribute(e,"")}}}const e={menuOpen:{de:"Menü öffnen",en:"Open menu"},menuClose:{de:"Menü schließen",en:"Close menu"},mainMenu:{de:"Hauptmenü",en:"Main menu"},mainNav:{de:"Hauptnavigation",en:"Main navigation"},userMenu:{de:"Benutzermenü",en:"User menu"},login:{de:"Anmelden",en:"Sign In"},homepage:{de:"Startnext Homepage",en:"Startnext Homepage"},langSelect:{de:"Sprache",en:"Language"},claimTop:{de:"Crowdfinanzieren",en:"Crowdfunding"},claimLarge:{de:"Crowdfinanziert seit 2010",en:"Crowdfunded since 2010"},colorMode:{de:"Farbmodus wechseln",en:"Toggle color mode"}};const t='\n *, *::before, *::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n }\n\n :host {\n display: block;\n font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);\n font-size: var(--font-size-base, 16px);\n line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n button {\n font: inherit;\n cursor: pointer;\n border: none;\n background: none;\n color: inherit;\n }\n\n ul, ol {\n list-style: none;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n }\n',a=`\n ${t}\n\n :host {\n display: block;\n }\n\n /* ── Headbar ─────────────────────────────────────────────────────────── */\n .headbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 100px;\n z-index: var(--header-z-index, 12);\n transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n will-change: transform, opacity, backdrop-filter;\n }\n\n .headbar::after {\n content: "";\n position: absolute;\n inset: 0;\n background-color: #FFFFFF;\n z-index: -1;\n opacity: 0;\n transition: opacity 0.3s linear;\n }\n\n @media (min-width: 768px) {\n .headbar > * {\n transition: transform 0.3s ease, opacity 0.3s ease;\n }\n }\n\n /* ── States ─────────────────────────────────────────────────────────── */\n .headbar--light .headbar__icon {\n fill: #FFFFFF;\n color: #FFFFFF;\n }\n\n .headbar--light a,\n .headbar--light button {\n color: #FFFFFF;\n }\n\n .headbar--tight::after {\n opacity: 0.8;\n }\n\n .headbar--tight {\n backdrop-filter: blur(2px);\n }\n\n .headbar--tight .headbar__action--hide {\n opacity: 0;\n pointer-events: none;\n }\n\n .headbar--slide-up {\n pointer-events: none;\n opacity: 0;\n transform: translateY(-100%);\n }\n\n /* ── Left (Burger) ──────────────────────────────────────────────────── */\n .headbar__left {\n position: absolute;\n left: 16px;\n top: 34px;\n display: flex;\n align-items: center;\n cursor: pointer;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__left {\n left: 24px;\n }\n }\n\n /* ── Right ──────────────────────────────────────────────────────────── */\n .headbar__right {\n position: absolute;\n right: 16px;\n top: 38px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 6px;\n z-index: 2;\n }\n\n @media (min-width: 768px) {\n .headbar__right {\n right: 24px;\n gap: 24px;\n }\n }\n\n /* ── Icons ──────────────────────────────────────────────────────────── */\n .headbar__icon {\n fill: var(--text-primary, #304b50);\n color: var(--text-primary, #304b50);\n transition: fill 0.3s linear, color 0.3s linear;\n will-change: fill, color;\n display: flex;\n align-items: center;\n }\n\n .headbar__icon svg {\n width: 24px;\n height: 24px;\n }\n\n .headbar__icon--clickable {\n cursor: pointer;\n padding: 4px;\n border-radius: 4px;\n }\n\n .headbar__icon--clickable:hover {\n opacity: 0.7;\n }\n\n /* ── CTA Button ─────────────────────────────────────────────────────── */\n .headerbar__btn {\n position: absolute;\n left: 54px;\n top: 34px;\n background-color: var(--btn-primary-bg, #06E481);\n height: 32px;\n border-radius: 16px;\n padding: 0 15px;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n opacity: 0;\n transition: all 300ms ease-out;\n will-change: transform, opacity, max-width;\n z-index: 2;\n overflow: hidden;\n }\n\n .headerbar__btn--loaded {\n opacity: 1;\n }\n\n .headerbar__btn a {\n display: flex;\n align-items: center;\n white-space: nowrap;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n }\n\n .headerbar__btn:hover {\n background-color: var(--btn-primary-hover, #00B86F);\n }\n\n .headerbar__btn--text {\n fill: var(--text-primary, #304b50);\n transition: all 300ms ease-out;\n }\n\n .headerbar__btn--icon {\n opacity: 0;\n width: 0;\n transition: all 300ms ease-out;\n display: flex;\n align-items: center;\n }\n\n @media (max-width: 767px) {\n .headbar--tight .headerbar__btn--text {\n width: 0;\n overflow: hidden;\n }\n .headbar--tight .headerbar__btn--icon {\n width: 24px;\n opacity: 1;\n }\n }\n\n @media (min-width: 768px) {\n .headerbar__btn {\n left: 80px;\n }\n }\n\n /* ── Main Nav (desktop > 1100px) ────────────────────────────────────── */\n .headbar__menu {\n display: none;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n @media (min-width: 1100px) {\n .headbar__menu {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n height: 100%;\n display: flex;\n align-items: center;\n transition: all 300ms ease-out;\n max-width: fit-content;\n will-change: transform, opacity, max-width;\n }\n\n .headbar__menu--faded {\n transform: translateX(calc(-50% - 60px));\n max-width: 0;\n opacity: 0;\n }\n }\n\n .headbar__menu-item {\n list-style: none;\n }\n\n .headbar__menu-link {\n display: inline-block;\n padding: 8px 15px;\n position: relative;\n font-size: 16px;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n transition: color 0.3s;\n }\n\n .headbar--light .headbar__menu-link {\n color: #FFFFFF;\n }\n\n .headbar__menu-link::after {\n content: "";\n position: absolute;\n left: 15px;\n right: 15px;\n bottom: 2px;\n height: 2px;\n background-color: var(--text-primary, #304b50);\n opacity: 0;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__menu-link::after {\n background-color: #FFFFFF;\n }\n\n .headbar__menu-link:hover::after {\n opacity: 1;\n }\n\n /* ── Logo (Lottie) ──────────────────────────────────────────────────── */\n .headbar__pageLogo--animation {\n width: 100%;\n max-width: 200px;\n margin: 0 auto;\n display: block;\n position: relative;\n top: 110px;\n transform: translateY(-110px) scale(0.65);\n z-index: 1;\n text-decoration: none;\n }\n\n .headbar__pageLogo--animation svg {\n transform: unset !important;\n }\n\n .headbar__pageLogo--animation svg path[fill] {\n fill: var(--text-primary, #304b50);\n }\n .headbar__pageLogo--animation svg path[stroke] {\n stroke: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__pageLogo--animation svg path[fill] {\n fill: #FFFFFF;\n }\n .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n stroke: #FFFFFF;\n }\n\n @media (min-width: 768px) {\n .headbar__pageLogo--animation {\n max-width: 300px;\n transform: translateY(-115px) scale(0.5);\n top: 100px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__pageLogo--animation {\n top: 120px;\n transform: translateY(-140px) scale(0.5);\n }\n }\n\n .headbar__pageLogo--animation-large {\n transform: translateY(0) scale(1);\n }\n\n /* ── Claim ──────────────────────────────────────────────────────────── */\n .headbar__claim {\n font-size: 14px;\n transition: all 0.3s;\n width: 100%;\n text-align: center;\n color: var(--text-primary, #304b50);\n }\n\n .headbar--light .headbar__claim {\n color: #FFFFFF;\n }\n\n .headbar__claim--large {\n position: absolute;\n top: 201px;\n left: 50%;\n transform: translate(-50%);\n white-space: nowrap;\n z-index: 1;\n }\n\n .headbar--tight .headbar__claim--large {\n pointer-events: none;\n }\n\n @media (min-width: 768px) {\n .headbar__claim--large {\n top: 232px;\n }\n }\n\n @media (min-width: 1100px) {\n .headbar__claim--large {\n top: 252px;\n }\n }\n\n /* ── User Avatar ────────────────────────────────────────────────────── */\n .headbar__avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n object-fit: cover;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .headbar--light .headbar__avatar {\n border-color: rgba(255, 255, 255, 0.3);\n }\n\n .headbar__avatar:hover {\n opacity: 0.85;\n }\n\n /* ── Login Button ───────────────────────────────────────────────────── */\n .headbar__login {\n padding: 4px 6px;\n font-size: 16px;\n font-family: inherit;\n white-space: nowrap;\n border: none;\n cursor: pointer;\n background: none;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s;\n display: flex;\n align-items: center;\n }\n\n .headbar--light .headbar__login {\n color: #FFFFFF;\n }\n\n .headbar__login:hover {\n opacity: 0.75;\n }\n\n .headbar__login-icon {\n display: flex;\n align-items: center;\n }\n\n .headbar__login-text {\n display: none;\n }\n\n .headbar__login-icon {\n display: flex;\n }\n\n @media (min-width: 768px) {\n .headbar__login-text {\n display: inline;\n }\n .headbar__login-icon {\n display: none;\n }\n }\n\n /* ── Language Dropdown ────────────────────────────────────────────── */\n .headbar__lang {\n position: relative;\n }\n\n .headbar__lang-toggle {\n display: flex;\n align-items: center;\n gap: 4px;\n font-family: inherit;\n font-size: 16px;\n padding: 4px 6px;\n border: none;\n background: none;\n color: var(--text-primary, #304b50);\n cursor: pointer;\n border-radius: 4px;\n transition: opacity 0.2s;\n }\n\n .headbar--light .headbar__lang-toggle {\n color: #FFFFFF;\n }\n\n .headbar__lang-toggle:hover {\n opacity: 0.75;\n }\n\n .headbar__lang-arrow {\n display: flex;\n align-items: center;\n position: relative;\n top: -1px;\n left: 2px;\n transition: transform 0.25s ease;\n }\n\n .headbar__lang-arrow.open {\n transform: rotate(180deg);\n }\n\n .headbar__lang-menu {\n position: absolute;\n top: calc(100% + 6px);\n left: 50%;\n min-width: 120px;\n background: #FFFFFF;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n padding: 4px 0;\n opacity: 0;\n visibility: hidden;\n transform: translateX(-50%) translateY(-8px);\n transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n z-index: 10;\n }\n\n .headbar__lang-menu.open {\n opacity: 1;\n visibility: visible;\n transform: translateX(-50%) translateY(0);\n }\n\n .headbar__lang-option {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 8px 14px;\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: #304b50;\n background: none;\n border: none;\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n text-align: left;\n }\n\n .headbar__lang-option:hover {\n font-weight: 600;\n }\n\n .headbar__lang-option--active {\n font-weight: 700;\n color: var(--btn-primary-bg, #06E481);\n }\n\n .headbar--light .headbar__lang-option {\n color: #304b50;\n }\n\n .headbar--light .headbar__lang-option:hover,\n .headbar--light .headbar__lang-option--active {\n color: var(--btn-primary-bg, #06E481);\n }\n\n /* ── Color Mode Toggle ──────────────────────────────────────────────── */\n .headbar__color-mode {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n background: none;\n cursor: pointer;\n border-radius: 50%;\n color: var(--text-primary, #304b50);\n transition: opacity 0.2s, color 0.3s;\n }\n\n .headbar--light .headbar__color-mode {\n color: #FFFFFF;\n }\n\n .headbar__color-mode:hover {\n opacity: 0.7;\n }\n\n .headbar__color-mode-sun,\n .headbar__color-mode-moon {\n display: flex;\n align-items: center;\n }\n\n .headbar__color-mode-moon {\n display: none;\n }\n\n :host([color-mode="dark"]) .headbar__color-mode-sun {\n display: none;\n }\n\n :host([color-mode="dark"]) .headbar__color-mode-moon {\n display: flex;\n }\n\n /* ── Back Link ──────────────────────────────────────────────────────── */\n .headbar__back-link {\n display: flex;\n align-items: center;\n gap: 6px;\n text-decoration: none;\n color: inherit;\n font-size: 16px;\n white-space: nowrap;\n transition: opacity 0.2s;\n }\n\n .headbar__back-link:hover {\n opacity: 0.7;\n }\n\n .headbar__back-arrow {\n display: flex;\n position: relative;\n top: -1px;\n }\n\n @media (max-width: 768px) {\n .headbar__back-text { display: none; }\n }\n\n /* ── Overlay ────────────────────────────────────────────────────────── */\n .overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n z-index: var(--overlay-z-index, 1050);\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .overlay.open {\n opacity: 1;\n visibility: visible;\n }\n\n /* ── Drawer (shared) ────────────────────────────────────────────────── */\n .drawer {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 320px;\n max-width: 85vw;\n background: #FFFFFF;\n z-index: var(--drawer-z-index, 1100);\n overflow-y: auto;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n color: var(--text-primary, #304b50);\n }\n\n .drawer--left {\n left: 0;\n transform: translateX(-100%);\n box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer--right {\n right: 0;\n transform: translateX(100%);\n box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n }\n\n .drawer.open {\n transform: translateX(0);\n }\n\n .drawer__user {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 20px;\n border-bottom: 1px solid var(--border-color, #E5E7EB);\n }\n\n .drawer__user-avatar {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n object-fit: cover;\n }\n\n .drawer__user-name {\n font-weight: 600;\n font-size: 16px;\n }\n\n .drawer__nav {\n padding: 8px 0;\n }\n\n .drawer__item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n font-size: 16px;\n font-weight: 500;\n transition: background-color 0.15s;\n cursor: pointer;\n width: 100%;\n text-align: left;\n color: var(--text-primary, #304b50);\n text-decoration: none;\n border: none;\n background: none;\n font-family: inherit;\n }\n\n .drawer__item:hover {\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item--highlighted {\n color: #FFFFFF;\n background: var(--btn-primary-bg, #06E481);\n margin: 8px 16px;\n border-radius: 8px;\n justify-content: center;\n font-weight: 600;\n width: auto;\n }\n\n .drawer__item--highlighted:hover {\n background: var(--btn-primary-hover, #00B86F);\n }\n\n .drawer__item--small {\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n padding: 8px 20px;\n font-weight: 400;\n }\n\n .drawer__item--disabled {\n color: var(--text-disabled, #D1D5DB);\n pointer-events: none;\n }\n\n .drawer__item--outline {\n margin: 8px 16px;\n border: 1.5px solid var(--border-color, #E5E7EB);\n border-radius: 8px;\n justify-content: center;\n width: auto;\n background: none;\n }\n\n .drawer__item--outline:hover {\n border-color: var(--text-secondary, #6B7280);\n background: var(--hover-bg, #F3F4F6);\n }\n\n .drawer__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n }\n\n .drawer__item-badge {\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 22px;\n height: 22px;\n border-radius: 50%;\n background: var(--btn-primary-bg, #06E481);\n color: #FFFFFF;\n font-size: 12px;\n font-weight: 700;\n }\n\n .drawer__item-expand {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(0deg);\n transition: transform 0.3s ease;\n }\n\n .drawer__item-expand.expanded {\n transform: rotate(180deg);\n }\n\n .drawer__item-nav-arrow {\n margin-left: auto;\n display: flex;\n align-items: center;\n transform: rotate(-90deg);\n }\n\n .drawer__divider {\n height: 1px;\n background: var(--border-color, #E5E7EB);\n margin: 8px 20px;\n }\n\n .drawer__children {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.3s ease;\n }\n\n .drawer__children.expanded {\n max-height: 500px;\n }\n\n .drawer__child {\n display: block;\n padding: 10px 20px 10px 52px;\n font-size: 14px;\n color: var(--text-secondary, #6B7280);\n transition: background-color 0.15s, color 0.15s;\n text-decoration: none;\n }\n\n .drawer__child:hover {\n background: var(--hover-bg, #F3F4F6);\n color: var(--text-primary, #304b50);\n }\n\n /* ── Focus ──────────────────────────────────────────────────────────── */\n .headbar__icon--clickable:focus-visible,\n .headerbar__btn:focus-visible,\n .headbar__login:focus-visible,\n .headbar__menu-link:focus-visible,\n .drawer__item:focus-visible,\n .drawer__child:focus-visible {\n outline: 2px solid var(--btn-primary-bg, #06E481);\n outline-offset: 2px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n`
2
2
  /**
3
3
  * @license lucide-static v0.564.0 - ISC
4
4
  *
5
5
  * This source code is licensed under the ISC license.
6
6
  * See the LICENSE file in the root directory of this source tree.
7
- */;function i(n,e){return n.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const r={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:i('\n<svg\n class="lucide lucide-x"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 6 6 18" />\n <path d="m6 6 12 12" />\n</svg>\n',24),globe:i('\n<svg\n class="lucide lucide-globe"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="10" />\n <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />\n <path d="M2 12h20" />\n</svg>\n',16),search:i('\n<svg\n class="lucide lucide-search"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m21 21-4.34-4.34" />\n <circle cx="11" cy="11" r="8" />\n</svg>\n',20),"circle-user-round":i('\n<svg\n class="lucide lucide-circle-user-round"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 20a6 6 0 0 0-12 0" />\n <circle cx="12" cy="10" r="4" />\n <circle cx="12" cy="12" r="10" />\n</svg>\n',20),mail:i('\n<svg\n class="lucide lucide-mail"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />\n <rect x="2" y="4" width="20" height="16" rx="2" />\n</svg>\n',20),"list-checks":i('\n<svg\n class="lucide lucide-list-checks"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M13 5h8" />\n <path d="M13 12h8" />\n <path d="M13 19h8" />\n <path d="m3 17 2 2 4-4" />\n <path d="m3 7 2 2 4-4" />\n</svg>\n',20),heart:i('\n<svg\n class="lucide lucide-heart"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />\n</svg>\n',20),rocket:i('\n<svg\n class="lucide lucide-rocket"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />\n <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />\n <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />\n <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />\n</svg>\n',20),settings:i('\n<svg\n class="lucide lucide-settings"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />\n <circle cx="12" cy="12" r="3" />\n</svg>\n',20),"log-out":i('\n<svg\n class="lucide lucide-log-out"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m16 17 5-5-5-5" />\n <path d="M21 12H9" />\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />\n</svg>\n',20),sun:i('\n<svg\n class="lucide lucide-sun"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="4" />\n <path d="M12 2v2" />\n <path d="M12 20v2" />\n <path d="m4.93 4.93 1.41 1.41" />\n <path d="m17.66 17.66 1.41 1.41" />\n <path d="M2 12h2" />\n <path d="M20 12h2" />\n <path d="m6.34 17.66-1.41 1.41" />\n <path d="m19.07 4.93-1.41 1.41" />\n</svg>\n',20),moon:i('\n<svg\n class="lucide lucide-moon"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />\n</svg>\n',20),arrowLeft:i('\n<svg\n class="lucide lucide-arrow-left"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m12 19-7-7 7-7" />\n <path d="M19 12H5" />\n</svg>\n',16),facebook:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>',twitter:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',instagram:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>',linkedin:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>',youtube:'<svg width="20" height="20" viewBox="0 0 1792 1280" fill="currentColor"><path d="M711 872l484-250l-484-253v503zM896 10q168 0 324.5 4.5T1450 24l73 4q1 0 17 1.5t23 3t23.5 4.5t28.5 8t28 13t31 19.5t29 26.5q6 6 15.5 18.5t29 58.5t26.5 101q8 64 12.5 136.5T1792 532v176q1 145-18 290q-7 55-25 99.5t-32 61.5l-14 17q-14 15-29 26.5t-31 19t-28 12.5t-28.5 8t-24 4.5t-23 3t-16.5 1.5q-251 19-627 19q-207-2-359.5-6.5T336 1256l-49-4l-36-4q-36-5-54.5-10t-51-21t-56.5-41q-6-6-15.5-18.5t-29-58.5T18 998q-8-64-12.5-136.5T0 748V572q-1-145 18-290q7-55 25-99.5T75 121l14-17q14-15 29-26.5T149 58t28-13t28.5-8t23.5-4.5t23-3t17-1.5q251-18 627-18z"/></svg>',tiktok:'<svg width="20" height="20" viewBox="4 4 24 28" fill="currentColor"><path d="m28.029852 15.355c-.229338.02229-.459584.03396-.69.035-2.527359.000353-4.884553-1.273562-6.269-3.388v11.537c0 7.597274-9.18476 11.400626-14.5561926 6.029193-5.371433-5.371433-1.568081-14.556193 6.0291926-14.556193.178 0 .352.016.527.027v4.202c-.175-.021-.347-.053-.527-.053-5.8026636 0-5.8026636 8.704 0 8.704 2.404 0 4.527-1.894 4.527-4.298l.042-19.594h4.02c.379071 3.604935 3.285837 6.420719 6.901 6.685v4.67"/></svg>',threads:'<svg width="20" height="20" viewBox="0 0 192 192" fill="currentColor"><path d="m141.537 88.9883c-.827-.3964-1.667-.7779-2.518-1.1432-1.482-27.3069-16.403-42.9401-41.4571-43.1001-.1135-.0007-.2264-.0007-.3399-.0007-14.9856 0-27.4489 6.3966-35.12 18.0364l13.779 9.4521c5.7306-8.6945 14.7242-10.548 21.3476-10.548.0765 0 .1533 0 .229.0007 8.2494.0526 14.4744 2.4511 18.5034 7.1285 2.932 3.4053 4.893 8.111 5.864 14.0498-7.314-1.2431-15.224-1.6253-23.68-1.1405-23.8203 1.3721-39.1339 15.2646-38.1054 34.5687.5219 9.792 5.4001 18.216 13.7354 23.719 7.0474 4.652 16.124 6.927 25.5573 6.412 12.4577-.683 22.2307-5.436 29.0487-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.4875 16.351-22.8093-.169-40.0597-7.484-51.2754-21.742-10.5026-13.351-15.9304-32.635-16.1329-57.317.2025-24.6822 5.6303-43.9664 16.1329-57.3173 11.2157-14.2578 28.4658-21.5727 51.2751-21.7422 22.9748.1708 40.5258 7.5209 52.1708 21.8475 5.71 7.0256 10.015 15.8608 12.853 26.1623l16.147-4.3081c-3.44-12.68-8.853-23.6065-16.219-32.6682-14.929-18.36732-36.763-27.778852-64.8955-27.974h-.1126c-28.0753.19447-49.6648 9.6418-64.1686 28.0793-12.9064 16.4071-19.5639 39.2364-19.7876 67.8532l-.0007.0675.0007.0675c.2237 28.6165 6.8812 51.4465 19.7876 67.8535 14.5038 18.437 36.0933 27.885 64.1686 28.079h.1126c24.9605-.173 42.5545-6.708 57.0485-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.9448-24.723-24.5527zm-43.0965 40.5187c-10.44.588-21.2861-4.098-21.8209-14.135-.3964-7.442 5.2962-15.746 22.4616-16.7352 1.9658-.1134 3.8948-.1688 5.7898-.1688 6.235 0 12.068.6057 17.371 1.765-1.978 24.702-13.58 28.713-23.8015 29.274z"/></svg>',spotify:'<svg width="20" height="20" viewBox="0 0 496 512" fill="currentColor"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>',zoom:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.585 6.836a2.25 2.25 0 0 0-2.25 2.25v5.828a2.25 2.25 0 0 0 2.25 2.25h8.33a2.25 2.25 0 0 0 2.25-2.25v-1.956l4.013 2.869a.75.75 0 0 0 1.187-.61V8.783a.75.75 0 0 0-1.187-.61l-4.013 2.869V9.086a2.25 2.25 0 0 0-2.25-2.25z"/></svg>',"startnext-s":'<svg width="20" height="20" viewBox="0 0 375 477" fill="currentColor"><g transform="translate(363 312)"><path d="m12-312-23.8 199.9-230.6 19.7c-54.5 4.7-102.6-35.6-107.2-90.1s35.7-102.3 90.2-106.8z"/><path d="m-98.7 142.4-264.3 22.6 23.6-200.5 223.7-19.1c54.6-4.7 102.7 35.6 107.3 90.1 4.9 54.4-35.7 102.2-90.3 106.9"/></g></svg>'};function o(n,e){const t=r[n];return t&&e?t.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):t||""}function s(n,e){return n.userMenu.items.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const t=["drawer__item"];n.disabled&&t.push("drawer__item--disabled"),"outline"===n.style&&t.push("drawer__item--outline");const a=n.children&&n.children.length>0,i=e.has(n.id),o="logout"===n.action,s=o?"button":n.url&&!a?"a":"button";let l=`<${s} class="${t.join(" ")}"\n ${!n.url||a||o?"":`href="${n.url}"${n.target?` target="${n.target}"`:""}`}\n ${n.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${n.id}" aria-expanded="${i}"`:""}\n ${o?'data-action="logout"':""}\n data-user-id="${n.id}">\n ${n.icon?`<span class="drawer__item-icon">${r[n.icon]||""}</span>`:""}\n ${n.label}\n ${n.badge?`<span class="drawer__item-badge">${n.badge}</span>`:""}\n ${a||n.expandable?`<span class="drawer__item-expand${i?" expanded":""}">${r.angleDown}</span>`:""}\n </${s}>`;return a&&(l+=`<div class="drawer__children${i?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),l}).join("")}class l extends n{constructor(){super(...arguments),this.burgerOpen=!1,this.userMenuOpen=!1,this.langMenuOpen=!1,this.isTight=!1,this.isSlideUp=!1,this.lastScrollY=0,this.expandedSections=new Set,this.lottieAnim=null,this.pendingRaf=null,this.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this),this._skipCallback=!1}static get observedAttributes(){return["lang","languages","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","hide-cta","show-back-link","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get requestedLanguages(){const n=this.getAttribute("languages");return n?n.split(",").map(n=>n.trim()).filter(Boolean):null}get isLightHeader(){return this.getBoolAttr("light",!1)}ui(n){return function(n,t){return e[n]?.[t]||e[n]?.de||n}(n,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),window.addEventListener("scroll",this.handleScrollBound,{passive:!0}),window.addEventListener("resize",this.handleResizeBound,{passive:!0}),document.addEventListener("keydown",this.handleKeydownBound),document.addEventListener("click",this.handleDocClickBound),this.schedulePostRender(),this.loadApiData()}getHeaderData(){const n=l.apiCache.get(this.currentLang);return n||function(n="de"){return{mainNavigation:[],burgerMenu:[],userMenu:{user:{name:"",avatar:""},items:[]},ctaButton:{label:"",url:"",style:"primary"},logo:{src:"",alt:"Startnext",href:"/"},theme:{"--header-bg":"transparent","--header-bg-scrolled":"#FFFFFF","--header-text":"#FFFFFF","--header-text-scrolled":"#304b50","--header-height":"64px","--header-padding":"0 16px","--btn-primary-bg":"#06E481","--btn-primary-text":"#FFFFFF","--btn-primary-hover":"#05C972","--burger-icon-color":"#FFFFFF","--drawer-bg":"#FFFFFF","--drawer-width":"320px","--drawer-shadow":"4px 0 12px rgba(0,0,0,0.1)","--font-size-base":"16px","--font-size-small":"14px","--primary-color":"#06E481","--text-primary":"#304b50","--text-secondary":"#6B7280","--text-disabled":"#D1D5DB","--border-color":"#E5E7EB","--hover-bg":"#F3F4F6","--transition-speed":"0.3s","--drawer-transition":"0.4s cubic-bezier(0.4, 0, 0.2, 1)","--header-z-index":"1000","--drawer-z-index":"1100","--overlay-z-index":"1050"},language:n,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(l.apiCache.has(e))return;if(l.pendingFetches.has(e))return await l.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&l.apiCache.has(e)&&(this.data=l.apiCache.get(e),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()));const t=(async()=>{const t=await fetch(`${n}/api/header?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};l.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender())})();l.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextHeader] API fetch failed, using fallback data",n)}finally{l.pendingFetches.delete(e)}}disconnectedCallback(){window.removeEventListener("scroll",this.handleScrollBound),window.removeEventListener("resize",this.handleResizeBound),document.removeEventListener("keydown",this.handleKeydownBound),document.removeEventListener("click",this.handleDocClickBound),null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.lottieAnim?.destroy(),this.querySelector("[data-crawler-nav]")?.remove()}attributeChangedCallback(n){!this._skipCallback&&this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==n&&"api-url"!==n||this.loadApiData())}restoreScrollState(){const n=this.shadow.querySelector(".headbar");n&&(n.classList.toggle("headbar--tight",this.isTight),n.classList.toggle("headbar--slide-up",this.isSlideUp),n.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight))}schedulePostRender(){null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.pendingRaf=requestAnimationFrame(()=>{this.pendingRaf=null,this.shadow.querySelector(".headerbar__btn")?.classList.add("headerbar__btn--loaded"),this.initLottie()})}async initLottie(){const n=this.shadow.querySelector("#page-logo-animation");if(!n)return;const e=this.getAttribute("api-url");if(!e)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const{default:t}=await import("./lottie_light-BkFx3xP_.js").then(function(n){return n.l}),a=this.isLightHeader?"logo-white.json":"logo-blue.json";this.lottieAnim=t.loadAnimation({container:n,renderer:"svg",loop:!1,autoplay:!1,path:`${e}/assets/lottie/${a}`}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const n=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let t=!1;const a=n>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),t=!0);const i=n-this.lastScrollY,r=document.querySelector("main, [data-content], .page-content"),o=r?.getBoundingClientRect().top??1/0,s=this.getBoolAttr("large-animation",!1);i>8&&o<-90&&n>(s?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),t=!0):i<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),t=!0),Math.abs(i)>8&&(this.lastScrollY=n),this.updateLogoAnimation(n),t&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(n){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,t=e+400,a=Math.max(0,Math.min(1,(n-e)/(t-e))),i=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const r=this.shadow.querySelector(".headbar__pageLogo--animation-large"),o=this.shadow.querySelector(".headbar__claim--large");if(!r)return;const s=window.innerWidth,l=s<768?-110:s<1100?-120:-140,d=s<768?.65:.5;o&&(o.style.opacity=String(1-Math.min(1,a/.05)));const h=Math.max(0,Math.min(1,(a-.05)/.25)),c=1-Math.pow(1-h,4);r.style.transform=`translateY(${c*l}px) scale(${1+c*(d-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(n){"Escape"===n.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(n){if(!this.langMenuOpen)return;const e=n.composedPath(),t=this.shadow.querySelector(".headbar__lang");t&&!e.includes(t)&&this.toggleLangMenu(!1)}toggleBurger(n){this.burgerOpen=n??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(n){this.userMenuOpen=n??!this.userMenuOpen,this.updateDrawerStates(),this.emit("user-menu-toggle",{open:this.userMenuOpen}),this.userMenuOpen&&this.trapFocus("user")}updateDrawerStates(){this.shadow.querySelector(".overlay")?.classList.toggle("open",this.burgerOpen||this.userMenuOpen),this.shadow.querySelector(".drawer--left")?.classList.toggle("open",this.burgerOpen),this.shadow.querySelector(".drawer--right")?.classList.toggle("open",this.userMenuOpen),document.body.style.overflow=this.burgerOpen||this.userMenuOpen?"hidden":""}trapFocus(n){const e=this.shadow.querySelector("burger"===n?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(n,e){this.emit("navigation-click",{item:n})||e.preventDefault()}handleCtaClick(n){this.emit("cta-click",{url:this.data.ctaButton.url})||n.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(n){this.emit("language-change",{language:n})}toggleLangMenu(n){this.langMenuOpen=n??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),t=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),t?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(n){this.expandedSections.has(n)?this.expandedSections.delete(n):this.expandedSections.add(n),this.updateExpandStates()}updateExpandStates(){for(const n of this.shadow.querySelectorAll("[data-expand-id]")){const e=n.getAttribute("data-expand-id"),t=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",t),n.querySelector(".drawer__item-expand")?.classList.toggle("expanded",t),n.setAttribute("aria-expanded",String(t))}}initColorMode(){const n=document.documentElement;let e;e=this.hasAttribute("color-mode")?this.getAttribute("color-mode"):n.classList.contains("dark")?"dark":n.classList.contains("light")?"light":"dark",n.classList.remove("light","dark"),n.classList.add(e),this._skipCallback=!0,this.setAttribute("color-mode",e),this.hasAttribute("light")||"dark"!==e||this.setAttribute("light",""),this._skipCallback=!1}toggleColorMode(){const n="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(n),this.emit("color-mode-change",{mode:n})}applyColorMode(n){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(n),this._skipCallback=!0,this.setAttribute("color-mode",n),"dark"===n?this.setAttribute("light",""):this.removeAttribute("light"),this._skipCallback=!1,this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";const e=e=>{const t=document.createElement("div");return t.setAttribute("data-section",e),n.appendChild(t),t},t=(n,e,t)=>{const a=document.createElement("a");a.href=e,a.textContent=t,n.appendChild(a)},a=e("main-navigation");for(const n of this.data.mainNavigation)t(a,n.url,n.label);t(a,this.data.ctaButton.url,this.data.ctaButton.label);const i=[];for(const n of this.data.burgerMenu)if("divider"!==n.type&&"logout"!==n.action&&n.url)if(n.children){const a=e(n.label.toLowerCase());t(a,n.url,n.label);for(const e of n.children)e.url&&t(a,e.url,e.label)}else n.small&&i.push(n);if(i.length){const n=e("legal");for(const e of i)t(n,e.url,e.label)}this.appendChild(n)}render(){const n=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,t=this.getBoolAttr("large-animation",!1),i=this.getBoolAttr("hide-color-mode",!1),o=this.getBoolAttr("hide-lang",!1),l=this.getBoolAttr("hide-login",!1),d=this.getBoolAttr("hide-cta",!1),h=this.getBoolAttr("show-back-link",!1),c=this.data.backLink?.url||"",g=this.data.backLink?.label||"",p=this.getAttribute("user-name")||this.data.userMenu.user.name,u=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar,b=this.requestedLanguages,m=b?this.data.availableLanguages.filter(n=>b.includes(n.code)):this.data.availableLanguages;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(a));const _=document.createElement("div");var f,x,v;_.innerHTML=`\n <header class="headbar${(f={isAuth:n,isLight:e,isLarge:t,hideColorMode:i,hideLang:o,hideLogin:l,hideCta:d,showBackLink:h,backUrl:c,backLabel:g,userName:p,userAvatar:u,data:this.data,availableLanguages:m,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,v=this.expandedSections,x.burgerMenu.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];n.highlighted&&e.push("drawer__item--highlighted"),n.small&&e.push("drawer__item--small");const t=n.expandable||n.children&&n.children.length>0,a=v.has(n.id),i=!n.highlighted&&!n.small&&!t&&n.url;let o=`<${n.url&&!t?"a":"button"} class="${e.join(" ")}"\n ${n.url&&!t?`href="${n.url}"${n.target?` target="${n.target}"`:""}`:""}\n ${t?`data-expand-id="${n.id}" aria-expanded="${a}"`:""}\n data-burger-id="${n.id}">\n ${n.label}\n ${t?`<span class="drawer__item-expand${a?" expanded":""}">${r.angleDownSmall}</span>`:""}\n ${i?`<span class="drawer__item-nav-arrow">${r.angleDown}</span>`:""}\n </${n.url&&!t?"a":"button"}>`;return n.children&&n.children.length>0&&(o+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),o}).join("")),userItemsHtml:s(this.data,this.expandedSections)}).isLight?" headbar--light":""}" role="banner">\n \x3c!-- Burger --\x3e\n <div class="headbar__left headbar__icon headbar__icon--clickable burger-btn"\n role="button" tabindex="0" aria-label="${f.ui("menuOpen")}" aria-expanded="false">\n ${r.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n ${f.hideCta?"":`<div class="headerbar__btn">\n <a href="${f.data.ctaButton.url}" class="cta-link" aria-label="${f.data.ctaButton.label}">\n <span class="headerbar__btn--text">${f.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${r.rocket}</span>\n </a>\n </div>`}\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${f.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${f.ui("mainNav")}">\n ${f.data.mainNavigation.sort((n,e)=>n.order-e.order).map(n=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${n.url}"${n.target?` target="${n.target}"`:""} data-nav-id="${n.id}">${n.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${f.ui("homepage")}" class="headbar__pageLogo--animation${f.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${f.isLarge?`<div class="headbar__claim headbar__claim--large">${f.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${f.showBackLink&&f.backUrl?`<a href="${f.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${r.arrowLeft}</span>\n <span class="headbar__back-text">${f.backLabel}</span>\n </a>`:""}\n ${f.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${f.ui("colorMode")}" title="${f.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${r.sun}</span>\n <span class="headbar__color-mode-moon">${r.moon}</span>\n </button>`}\n ${!f.hideLang&&f.availableLanguages.length>1?`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${f.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${f.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${r.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.availableLanguages.map(n=>`<button class="headbar__lang-option${n.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${n.code===f.currentLang}" data-lang="${n.code}">\n ${n.label}\n </button>`).join("")}\n </div>\n </div>`:""}\n ${f.hideLogin?"":f.isAuth?`<button class="user-avatar-btn" aria-label="${f.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${f.userAvatar}" alt="${f.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${f.ui("login")}">\n <span class="headbar__login-text">${f.ui("login")}</span>\n <span class="headbar__login-icon">${r["circle-user-round"]}</span>\n </button>`}\n </div>\n </header>\n\n <div class="overlay" aria-hidden="true"></div>\n\n \x3c!-- Burger Drawer --\x3e\n <nav class="drawer drawer--left" role="dialog" aria-label="${f.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${f.burgerItemsHtml}</div>\n </nav>\n\n ${f.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${f.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${f.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${f.userName}</span>\n </div>\n <div class="drawer__nav">${f.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(_),this.attachEvents()}attachEvents(){this.shadow.querySelector(".headbar__color-mode")?.addEventListener("click",()=>this.toggleColorMode()),this.shadow.querySelector(".burger-btn")?.addEventListener("click",()=>this.toggleBurger()),this.shadow.querySelector(".headbar__back-link")?.addEventListener("click",n=>{const e=n.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||n.preventDefault()}),this.shadow.querySelector(".overlay")?.addEventListener("click",()=>{this.toggleBurger(!1),this.toggleUserMenu(!1)}),this.shadow.querySelector(".user-avatar-btn")?.addEventListener("click",()=>this.toggleUserMenu()),this.shadow.querySelector(".headbar__login")?.addEventListener("click",()=>{this.emit("navigation-click",{item:{id:"login",label:"Anmelden",url:"/login",order:0}})}),this.shadow.querySelector(".cta-link")?.addEventListener("click",n=>this.handleCtaClick(n));for(const n of this.shadow.querySelectorAll(".headbar__menu-link"))n.addEventListener("click",e=>{const t=this.data.mainNavigation.find(e=>e.id===n.getAttribute("data-nav-id"));t&&this.handleNavClick(t,e)});for(const n of this.shadow.querySelectorAll("[data-burger-id]"))n.addEventListener("click",e=>{const t=this.data.burgerMenu.find(e=>e.id===n.getAttribute("data-burger-id"));t&&(t.expandable||t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll("[data-user-id]"))n.addEventListener("click",e=>{if("logout"===n.getAttribute("data-action"))return void this.handleLogout();const t=this.data.userMenu.items.find(e=>e.id===n.getAttribute("data-user-id"));t&&(t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):t.disabled||this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll(".drawer__child"))n.addEventListener("click",e=>{const t=n.getAttribute("data-nav-id");if(t)for(const n of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=n.children?.find(n=>n.id===t);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const n of this.shadow.querySelectorAll(".headbar__lang-option"))n.addEventListener("click",()=>{const e=n.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}l.apiCache=new Map,l.pendingFetches=new Map,customElements.define("startnext-header",l);const d=`\n ${t}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 24px 40px;\n text-align: center;\n }\n\n /* ── Sections ── */\n .footer__part + .footer__part {\n margin-top: 40px;\n }\n\n .footer__part--sm + .footer__part--sm {\n margin-top: 20px;\n }\n\n /* ── Title ── */\n .footer__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 24px;\n color: var(--footer-text, #FFFFFF);\n }\n\n /* ── Social ── */\n .footer__social {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .footer__social-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n color: var(--footer-text, #FFFFFF);\n transition: transform 0.3s ease;\n }\n\n .footer__social-link:hover {\n animation: logoScale 0.5s linear 1;\n }\n\n .footer__social-link:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n @keyframes logoScale {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n @media (min-width: 576px) {\n .footer__social {\n gap: 24px;\n }\n }\n\n /* ── Stats ── */\n .footer__stats {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 16px 48px;\n }\n\n .footer__stat-item {\n text-align: center;\n }\n\n .footer__stat-value {\n display: block;\n font-size: 32px;\n font-weight: 800;\n line-height: 1;\n }\n\n .footer__stat-caption {\n display: block;\n font-size: 13px;\n margin-top: 8px;\n opacity: 0.8;\n }\n\n /* ── Navigation columns ── */\n .footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n text-align: left;\n }\n\n .footer__nav-title {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__nav {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.8;\n }\n\n .footer__nav a {\n font-size: 15px;\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__nav a:hover {\n opacity: 0.7;\n }\n\n .footer__nav a:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n /* ── B Corp ── */\n .footer__bcorp {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__bcorp-badge {\n flex-shrink: 0;\n width: 80px;\n height: auto;\n }\n\n .footer__bcorp-badge svg {\n width: 80px;\n height: auto;\n display: block;\n }\n\n .footer__bcorp-label {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 4px;\n }\n\n .footer__bcorp-text {\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.85;\n }\n\n .footer__bcorp-line {\n width: 100%;\n max-width: 180px;\n height: 3px;\n background: var(--footer-text, #FFFFFF);\n margin-top: 12px;\n }\n\n /* ── Funding notice ── */\n .footer__funding {\n text-align: left;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .footer__funding-title {\n font-size: 15px;\n font-weight: 700;\n margin-bottom: 8px;\n }\n\n .footer__funding-text {\n font-size: 14px;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* ── Payments ── */\n .footer__payments-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .footer__payments {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px 40px;\n }\n\n .footer__payment {\n font-size: 15px;\n opacity: 0.85;\n }\n\n /* ── Logo ── */\n .footer__logo {\n display: inline-flex;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__logo:hover {\n opacity: 0.8;\n }\n\n .footer__logo:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n /* ── Claim ── */\n .footer__claim {\n font-size: 20px;\n font-weight: 600;\n }\n\n /* ── Dimmed section (legal + copyright) ── */\n .footer__dim {\n opacity: 0.5;\n }\n\n .footer__dim a {\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__dim a:hover {\n opacity: 0.7;\n }\n\n .footer__legal {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 4px 20px;\n font-size: 14px;\n margin-bottom: 8px;\n }\n\n .footer__copyright {\n font-size: 14px;\n }\n\n /* ── Responsive ── */\n @media (max-width: 767px) {\n .footer__columns {\n grid-template-columns: 1fr 1fr;\n gap: 32px 24px;\n }\n\n .footer__bcorp {\n grid-column: 1 / -1;\n justify-content: center;\n }\n\n .footer__stat-value {\n font-size: 26px;\n }\n\n .footer__funding {\n text-align: center;\n }\n }\n\n @media (max-width: 479px) {\n .footer {\n padding: 40px 16px 32px;\n }\n\n .footer__columns {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .footer__bcorp {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .footer__bcorp-line {\n margin-left: auto;\n margin-right: auto;\n }\n\n .footer__stats {\n flex-direction: column;\n gap: 24px;\n }\n }\n`;class h extends n{constructor(){super(...arguments),this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(n){this.isConnected&&("lang-sync"!==n?(this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==n&&"api-url"!==n||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=n=>{this.setAttribute("lang",n.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const n=h.apiCache.get(this.currentLang);return n||(this.currentLang,{socialTitle:"",social:[],statsTitle:"",stats:[],columns:[],bcorp:{label:"",description:""},funding:{title:"",text:""},payments:{title:"",methods:[]},claim:"",legalLinks:[],copyright:"",theme:{"--footer-bg":"#304b50","--footer-text":"#FFFFFF","--footer-link-hover":"#06E481","--footer-border":"rgba(255, 255, 255, 0.15)"}})}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(h.apiCache.has(e))return;if(h.pendingFetches.has(e))return await h.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&h.apiCache.has(e)&&(this.data=h.apiCache.get(e),this.render(),this.renderLightDomNav()));const t=(async()=>{const t=await fetch(`${n}/api/footer?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};h.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.render(),this.renderLightDomNav())})();h.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextFooter] API fetch failed, using fallback data",n)}finally{h.pendingFetches.delete(e)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";for(const e of this.data.columns){const t=document.createElement("div");t.setAttribute("data-section",e.title.toLowerCase());for(const n of e.links){const e=document.createElement("a");e.href=n.url,e.textContent=n.label,t.appendChild(e)}n.appendChild(t)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const n of this.data.legalLinks){const t=document.createElement("a");t.href=n.url,t.textContent=n.label,e.appendChild(t)}n.appendChild(e),this.appendChild(n)}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const n=document.createElement("div");var e;n.innerHTML=`\n <footer class="footer" role="contentinfo">\n \x3c!-- Social --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${(e=this.data).socialTitle}</h3>\n <div class="footer__social" aria-label="Soziale Medien">\n ${e.social.map(n=>`\n <a href="${n.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${n.platform}">\n ${o(n.platform,32)}\n </a>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Stats --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${e.statsTitle}</h3>\n <div class="footer__stats">\n ${e.stats.map(n=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${n.value}</span>\n <span class="footer__stat-caption">${n.caption}</span>\n </div>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Navigation columns + B Corp --\x3e\n <div class="footer__part">\n <div class="footer__columns">\n ${e.columns.map(n=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${n.title}</h4>\n <ul class="footer__nav">\n ${n.links.map(n=>`<li><a href="${n.url}" class="footer__link">${n.label}</a></li>`).join("")}\n </ul>\n </div>\n `).join("")}\n <div class="footer__bcorp">\n <div class="footer__bcorp-badge"><svg viewBox="0 0 120 160" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="116" height="156" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>\n <text x="60" y="55" text-anchor="middle" font-size="50" font-weight="800" fill="currentColor">B</text>\n <line x1="20" y1="80" x2="100" y2="80" stroke="currentColor" stroke-width="2"/>\n <text x="60" y="105" text-anchor="middle" font-size="13" font-weight="600" fill="currentColor">Corporation</text>\n</svg></div>\n <div>\n <div class="footer__bcorp-label">${e.bcorp.label}</div>\n <div class="footer__bcorp-text">${e.bcorp.description}</div>\n <div class="footer__bcorp-line"></div>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Funding notice --\x3e\n <div class="footer__part">\n <div class="footer__funding">\n <div class="footer__funding-title">${e.funding.title}</div>\n <div class="footer__funding-text">${e.funding.text}</div>\n </div>\n </div>\n\n \x3c!-- Payment methods --\x3e\n <div class="footer__part">\n <div class="footer__payments-title">${e.payments.title}</div>\n <div class="footer__payments">\n ${e.payments.methods.map(n=>`<span class="footer__payment">${n}</span>`).join("")}\n </div>\n </div>\n\n \x3c!-- Logo --\x3e\n <div class="footer__part footer__part--sm">\n <a href="/" aria-label="Startnext Homepage" class="footer__logo">\n ${o("startnext-s",64)}\n </a>\n </div>\n\n \x3c!-- Claim --\x3e\n <div class="footer__part footer__part--sm">\n <div class="footer__claim">${e.claim}</div>\n </div>\n\n \x3c!-- Legal + Copyright --\x3e\n <div class="footer__part footer__dim">\n <div class="footer__legal">\n ${e.legalLinks.map(n=>`<a href="${n.url}" class="footer__link">${n.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(n),this.attachEvents()}attachEvents(){for(const n of this.shadow.querySelectorAll(".footer__link"))n.addEventListener("click",e=>{const t=n.getAttribute("href")||"",a=n.textContent?.trim()||"";this.emit("navigation-click",{item:{url:t,label:a}})||e.preventDefault()})}}h.observedAttributes=["lang","api-url","lang-sync"],h.apiCache=new Map,h.pendingFetches=new Map,customElements.define("startnext-footer",h);export{h as StartnextFooter,l as StartnextHeader};
7
+ */;function i(n,e){return n.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const r={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:i('\n<svg\n class="lucide lucide-x"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 6 6 18" />\n <path d="m6 6 12 12" />\n</svg>\n',24),globe:i('\n<svg\n class="lucide lucide-globe"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="10" />\n <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />\n <path d="M2 12h20" />\n</svg>\n',16),search:i('\n<svg\n class="lucide lucide-search"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m21 21-4.34-4.34" />\n <circle cx="11" cy="11" r="8" />\n</svg>\n',20),"circle-user-round":i('\n<svg\n class="lucide lucide-circle-user-round"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 20a6 6 0 0 0-12 0" />\n <circle cx="12" cy="10" r="4" />\n <circle cx="12" cy="12" r="10" />\n</svg>\n',20),mail:i('\n<svg\n class="lucide lucide-mail"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />\n <rect x="2" y="4" width="20" height="16" rx="2" />\n</svg>\n',20),"list-checks":i('\n<svg\n class="lucide lucide-list-checks"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M13 5h8" />\n <path d="M13 12h8" />\n <path d="M13 19h8" />\n <path d="m3 17 2 2 4-4" />\n <path d="m3 7 2 2 4-4" />\n</svg>\n',20),heart:i('\n<svg\n class="lucide lucide-heart"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />\n</svg>\n',20),rocket:i('\n<svg\n class="lucide lucide-rocket"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />\n <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />\n <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />\n <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />\n</svg>\n',20),settings:i('\n<svg\n class="lucide lucide-settings"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />\n <circle cx="12" cy="12" r="3" />\n</svg>\n',20),"log-out":i('\n<svg\n class="lucide lucide-log-out"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m16 17 5-5-5-5" />\n <path d="M21 12H9" />\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />\n</svg>\n',20),sun:i('\n<svg\n class="lucide lucide-sun"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="4" />\n <path d="M12 2v2" />\n <path d="M12 20v2" />\n <path d="m4.93 4.93 1.41 1.41" />\n <path d="m17.66 17.66 1.41 1.41" />\n <path d="M2 12h2" />\n <path d="M20 12h2" />\n <path d="m6.34 17.66-1.41 1.41" />\n <path d="m19.07 4.93-1.41 1.41" />\n</svg>\n',20),moon:i('\n<svg\n class="lucide lucide-moon"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />\n</svg>\n',20),arrowLeft:i('\n<svg\n class="lucide lucide-arrow-left"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m12 19-7-7 7-7" />\n <path d="M19 12H5" />\n</svg>\n',16),facebook:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>',twitter:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',instagram:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>',linkedin:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>',youtube:'<svg width="20" height="20" viewBox="0 0 1792 1280" fill="currentColor"><path d="M711 872l484-250l-484-253v503zM896 10q168 0 324.5 4.5T1450 24l73 4q1 0 17 1.5t23 3t23.5 4.5t28.5 8t28 13t31 19.5t29 26.5q6 6 15.5 18.5t29 58.5t26.5 101q8 64 12.5 136.5T1792 532v176q1 145-18 290q-7 55-25 99.5t-32 61.5l-14 17q-14 15-29 26.5t-31 19t-28 12.5t-28.5 8t-24 4.5t-23 3t-16.5 1.5q-251 19-627 19q-207-2-359.5-6.5T336 1256l-49-4l-36-4q-36-5-54.5-10t-51-21t-56.5-41q-6-6-15.5-18.5t-29-58.5T18 998q-8-64-12.5-136.5T0 748V572q-1-145 18-290q7-55 25-99.5T75 121l14-17q14-15 29-26.5T149 58t28-13t28.5-8t23.5-4.5t23-3t17-1.5q251-18 627-18z"/></svg>',tiktok:'<svg width="20" height="20" viewBox="4 4 24 28" fill="currentColor"><path d="m28.029852 15.355c-.229338.02229-.459584.03396-.69.035-2.527359.000353-4.884553-1.273562-6.269-3.388v11.537c0 7.597274-9.18476 11.400626-14.5561926 6.029193-5.371433-5.371433-1.568081-14.556193 6.0291926-14.556193.178 0 .352.016.527.027v4.202c-.175-.021-.347-.053-.527-.053-5.8026636 0-5.8026636 8.704 0 8.704 2.404 0 4.527-1.894 4.527-4.298l.042-19.594h4.02c.379071 3.604935 3.285837 6.420719 6.901 6.685v4.67"/></svg>',threads:'<svg width="20" height="20" viewBox="0 0 192 192" fill="currentColor"><path d="m141.537 88.9883c-.827-.3964-1.667-.7779-2.518-1.1432-1.482-27.3069-16.403-42.9401-41.4571-43.1001-.1135-.0007-.2264-.0007-.3399-.0007-14.9856 0-27.4489 6.3966-35.12 18.0364l13.779 9.4521c5.7306-8.6945 14.7242-10.548 21.3476-10.548.0765 0 .1533 0 .229.0007 8.2494.0526 14.4744 2.4511 18.5034 7.1285 2.932 3.4053 4.893 8.111 5.864 14.0498-7.314-1.2431-15.224-1.6253-23.68-1.1405-23.8203 1.3721-39.1339 15.2646-38.1054 34.5687.5219 9.792 5.4001 18.216 13.7354 23.719 7.0474 4.652 16.124 6.927 25.5573 6.412 12.4577-.683 22.2307-5.436 29.0487-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.4875 16.351-22.8093-.169-40.0597-7.484-51.2754-21.742-10.5026-13.351-15.9304-32.635-16.1329-57.317.2025-24.6822 5.6303-43.9664 16.1329-57.3173 11.2157-14.2578 28.4658-21.5727 51.2751-21.7422 22.9748.1708 40.5258 7.5209 52.1708 21.8475 5.71 7.0256 10.015 15.8608 12.853 26.1623l16.147-4.3081c-3.44-12.68-8.853-23.6065-16.219-32.6682-14.929-18.36732-36.763-27.778852-64.8955-27.974h-.1126c-28.0753.19447-49.6648 9.6418-64.1686 28.0793-12.9064 16.4071-19.5639 39.2364-19.7876 67.8532l-.0007.0675.0007.0675c.2237 28.6165 6.8812 51.4465 19.7876 67.8535 14.5038 18.437 36.0933 27.885 64.1686 28.079h.1126c24.9605-.173 42.5545-6.708 57.0485-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.9448-24.723-24.5527zm-43.0965 40.5187c-10.44.588-21.2861-4.098-21.8209-14.135-.3964-7.442 5.2962-15.746 22.4616-16.7352 1.9658-.1134 3.8948-.1688 5.7898-.1688 6.235 0 12.068.6057 17.371 1.765-1.978 24.702-13.58 28.713-23.8015 29.274z"/></svg>',spotify:'<svg width="20" height="20" viewBox="0 0 496 512" fill="currentColor"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>',zoom:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.585 6.836a2.25 2.25 0 0 0-2.25 2.25v5.828a2.25 2.25 0 0 0 2.25 2.25h8.33a2.25 2.25 0 0 0 2.25-2.25v-1.956l4.013 2.869a.75.75 0 0 0 1.187-.61V8.783a.75.75 0 0 0-1.187-.61l-4.013 2.869V9.086a2.25 2.25 0 0 0-2.25-2.25z"/></svg>',"startnext-s":'<svg width="20" height="20" viewBox="0 0 375 477" fill="currentColor"><g transform="translate(363 312)"><path d="m12-312-23.8 199.9-230.6 19.7c-54.5 4.7-102.6-35.6-107.2-90.1s35.7-102.3 90.2-106.8z"/><path d="m-98.7 142.4-264.3 22.6 23.6-200.5 223.7-19.1c54.6-4.7 102.7 35.6 107.3 90.1 4.9 54.4-35.7 102.2-90.3 106.9"/></g></svg>'};function o(n,e){const t=r[n];return t&&e?t.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):t||""}function s(n,e){return n.userMenu.items.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const t=["drawer__item"];n.disabled&&t.push("drawer__item--disabled"),"outline"===n.style&&t.push("drawer__item--outline");const a=n.children&&n.children.length>0,i=e.has(n.id),o="logout"===n.action,s=o?"button":n.url&&!a?"a":"button";let l=`<${s} class="${t.join(" ")}"\n ${!n.url||a||o?"":`href="${n.url}"${n.target?` target="${n.target}"`:""}`}\n ${n.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${n.id}" aria-expanded="${i}"`:""}\n ${o?'data-action="logout"':""}\n data-user-id="${n.id}">\n ${n.icon?`<span class="drawer__item-icon">${r[n.icon]||""}</span>`:""}\n ${n.label}\n ${n.badge?`<span class="drawer__item-badge">${n.badge}</span>`:""}\n ${a||n.expandable?`<span class="drawer__item-expand${i?" expanded":""}">${r.angleDown}</span>`:""}\n </${s}>`;return a&&(l+=`<div class="drawer__children${i?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),l}).join("")}class l extends n{constructor(){super(...arguments),this.burgerOpen=!1,this.userMenuOpen=!1,this.langMenuOpen=!1,this.isTight=!1,this.isSlideUp=!1,this.lastScrollY=0,this.expandedSections=new Set,this.lottieAnim=null,this.pendingRaf=null,this.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this),this._skipCallback=!1}static get observedAttributes(){return["lang","languages","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","hide-cta","show-back-link","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get requestedLanguages(){const n=this.getAttribute("languages");return n?n.split(",").map(n=>n.trim()).filter(Boolean):null}get isLightHeader(){return this.getBoolAttr("light",!1)}set light(n){null!=n&&!1!==n&&"false"!==n?this.setAttribute("light",""):this.removeAttribute("light")}get light(){return this.hasAttribute("light")}ui(n){return function(n,t){return e[n]?.[t]||e[n]?.de||n}(n,this.currentLang)}connectedCallback(){this._skipCallback=!0,this.upgradeBoolProps(["light","large-animation","authenticated","hide-color-mode","hide-lang","hide-login","hide-cta","show-back-link"]),this._skipCallback=!1,this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),window.addEventListener("scroll",this.handleScrollBound,{passive:!0}),window.addEventListener("resize",this.handleResizeBound,{passive:!0}),document.addEventListener("keydown",this.handleKeydownBound),document.addEventListener("click",this.handleDocClickBound),this.schedulePostRender(),this.loadApiData()}getHeaderData(){const n=l.apiCache.get(this.currentLang);return n||function(n="de"){return{mainNavigation:[],burgerMenu:[],userMenu:{user:{name:"",avatar:""},items:[]},ctaButton:{label:"",url:"",style:"primary"},logo:{src:"",alt:"Startnext",href:"/"},theme:{"--header-bg":"transparent","--header-bg-scrolled":"#FFFFFF","--header-text":"#FFFFFF","--header-text-scrolled":"#304b50","--header-height":"64px","--header-padding":"0 16px","--btn-primary-bg":"#06E481","--btn-primary-text":"#FFFFFF","--btn-primary-hover":"#05C972","--burger-icon-color":"#FFFFFF","--drawer-bg":"#FFFFFF","--drawer-width":"320px","--drawer-shadow":"4px 0 12px rgba(0,0,0,0.1)","--font-size-base":"16px","--font-size-small":"14px","--primary-color":"#06E481","--text-primary":"#304b50","--text-secondary":"#6B7280","--text-disabled":"#D1D5DB","--border-color":"#E5E7EB","--hover-bg":"#F3F4F6","--transition-speed":"0.3s","--drawer-transition":"0.4s cubic-bezier(0.4, 0, 0.2, 1)","--header-z-index":"1000","--drawer-z-index":"1100","--overlay-z-index":"1050"},language:n,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(l.apiCache.has(e))return;if(l.pendingFetches.has(e))return await l.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&l.apiCache.has(e)&&(this.data=l.apiCache.get(e),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()));const t=(async()=>{const t=await fetch(`${n}/api/header?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};l.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender())})();l.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextHeader] API fetch failed, using fallback data",n)}finally{l.pendingFetches.delete(e)}}disconnectedCallback(){window.removeEventListener("scroll",this.handleScrollBound),window.removeEventListener("resize",this.handleResizeBound),document.removeEventListener("keydown",this.handleKeydownBound),document.removeEventListener("click",this.handleDocClickBound),null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.lottieAnim?.destroy(),this.querySelector("[data-crawler-nav]")?.remove()}attributeChangedCallback(n){!this._skipCallback&&this.isConnected&&("color-mode"===n&&this.initColorMode(),this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==n&&"api-url"!==n||this.loadApiData())}restoreScrollState(){const n=this.shadow.querySelector(".headbar");n&&(n.classList.toggle("headbar--tight",this.isTight),n.classList.toggle("headbar--slide-up",this.isSlideUp),n.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight))}schedulePostRender(){null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.pendingRaf=requestAnimationFrame(()=>{this.pendingRaf=null,this.shadow.querySelector(".headerbar__btn")?.classList.add("headerbar__btn--loaded"),this.initLottie()})}async initLottie(){const n=this.shadow.querySelector("#page-logo-animation");if(!n)return;const e=this.getAttribute("api-url");if(!e)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const{default:t}=await import("./lottie_light-BkFx3xP_.js").then(function(n){return n.l}),a=this.isLightHeader?"logo-white.json":"logo-blue.json";this.lottieAnim=t.loadAnimation({container:n,renderer:"svg",loop:!1,autoplay:!1,path:`${e}/assets/lottie/${a}`}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const n=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let t=!1;const a=n>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),t=!0);const i=n-this.lastScrollY,r=document.querySelector("main, [data-content], .page-content"),o=r?.getBoundingClientRect().top??1/0,s=this.getBoolAttr("large-animation",!1);i>8&&o<-90&&n>(s?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),t=!0):i<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),t=!0),Math.abs(i)>8&&(this.lastScrollY=n),this.updateLogoAnimation(n),t&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(n){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,t=e+400,a=Math.max(0,Math.min(1,(n-e)/(t-e))),i=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const r=this.shadow.querySelector(".headbar__pageLogo--animation-large"),o=this.shadow.querySelector(".headbar__claim--large");if(!r)return;const s=window.innerWidth,l=s<768?-110:s<1100?-120:-140,d=s<768?.65:.5;o&&(o.style.opacity=String(1-Math.min(1,a/.05)));const h=Math.max(0,Math.min(1,(a-.05)/.25)),c=1-Math.pow(1-h,4);r.style.transform=`translateY(${c*l}px) scale(${1+c*(d-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(n){"Escape"===n.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(n){if(!this.langMenuOpen)return;const e=n.composedPath(),t=this.shadow.querySelector(".headbar__lang");t&&!e.includes(t)&&this.toggleLangMenu(!1)}toggleBurger(n){this.burgerOpen=n??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(n){this.userMenuOpen=n??!this.userMenuOpen,this.updateDrawerStates(),this.emit("user-menu-toggle",{open:this.userMenuOpen}),this.userMenuOpen&&this.trapFocus("user")}updateDrawerStates(){this.shadow.querySelector(".overlay")?.classList.toggle("open",this.burgerOpen||this.userMenuOpen),this.shadow.querySelector(".drawer--left")?.classList.toggle("open",this.burgerOpen),this.shadow.querySelector(".drawer--right")?.classList.toggle("open",this.userMenuOpen),document.body.style.overflow=this.burgerOpen||this.userMenuOpen?"hidden":""}trapFocus(n){const e=this.shadow.querySelector("burger"===n?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(n,e){this.emit("navigation-click",{item:n})||e.preventDefault()}handleCtaClick(n){this.emit("cta-click",{url:this.data.ctaButton.url})||n.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(n){this.emit("language-change",{language:n})}toggleLangMenu(n){this.langMenuOpen=n??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),t=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),t?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(n){this.expandedSections.has(n)?this.expandedSections.delete(n):this.expandedSections.add(n),this.updateExpandStates()}updateExpandStates(){for(const n of this.shadow.querySelectorAll("[data-expand-id]")){const e=n.getAttribute("data-expand-id"),t=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",t),n.querySelector(".drawer__item-expand")?.classList.toggle("expanded",t),n.setAttribute("aria-expanded",String(t))}}initColorMode(){const n=document.documentElement,e=this.hasAttribute("color-mode");let t;t=e?this.getAttribute("color-mode"):n.classList.contains("dark")?"dark":(n.classList.contains("light"),"light"),e||(n.classList.remove("light","dark"),n.classList.add(t)),this._skipCallback=!0,this.setAttribute("color-mode",t),this.hasAttribute("light")||"dark"!==t||this.setAttribute("light",""),this._skipCallback=!1}toggleColorMode(){const n="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(n),this.emit("color-mode-change",{mode:n})}applyColorMode(n){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(n),this._skipCallback=!0,this.setAttribute("color-mode",n),"dark"===n?this.setAttribute("light",""):this.removeAttribute("light"),this._skipCallback=!1,this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";const e=e=>{const t=document.createElement("div");return t.setAttribute("data-section",e),n.appendChild(t),t},t=(n,e,t)=>{const a=document.createElement("a");a.href=e,a.textContent=t,n.appendChild(a)},a=e("main-navigation");for(const n of this.data.mainNavigation)t(a,n.url,n.label);t(a,this.data.ctaButton.url,this.data.ctaButton.label);const i=[];for(const n of this.data.burgerMenu)if("divider"!==n.type&&"logout"!==n.action&&n.url)if(n.children){const a=e(n.label.toLowerCase());t(a,n.url,n.label);for(const e of n.children)e.url&&t(a,e.url,e.label)}else n.small&&i.push(n);if(i.length){const n=e("legal");for(const e of i)t(n,e.url,e.label)}this.appendChild(n)}render(){const n=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,t=this.getBoolAttr("large-animation",!1),i=this.getBoolAttr("hide-color-mode",!1),o=this.getBoolAttr("hide-lang",!1),l=this.getBoolAttr("hide-login",!1),d=this.getBoolAttr("hide-cta",!1),h=this.getBoolAttr("show-back-link",!1),c=this.data.backLink?.url||"",g=this.data.backLink?.label||"",p=this.getAttribute("user-name")||this.data.userMenu.user.name,u=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar,b=this.requestedLanguages,m=b?this.data.availableLanguages.filter(n=>b.includes(n.code)):this.data.availableLanguages;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(a));const _=document.createElement("div");var f,x,v;_.innerHTML=`\n <header class="headbar${(f={isAuth:n,isLight:e,isLarge:t,hideColorMode:i,hideLang:o,hideLogin:l,hideCta:d,showBackLink:h,backUrl:c,backLabel:g,userName:p,userAvatar:u,data:this.data,availableLanguages:m,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,v=this.expandedSections,x.burgerMenu.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];n.highlighted&&e.push("drawer__item--highlighted"),n.small&&e.push("drawer__item--small");const t=n.expandable||n.children&&n.children.length>0,a=v.has(n.id),i=!n.highlighted&&!n.small&&!t&&n.url;let o=`<${n.url&&!t?"a":"button"} class="${e.join(" ")}"\n ${n.url&&!t?`href="${n.url}"${n.target?` target="${n.target}"`:""}`:""}\n ${t?`data-expand-id="${n.id}" aria-expanded="${a}"`:""}\n data-burger-id="${n.id}">\n ${n.label}\n ${t?`<span class="drawer__item-expand${a?" expanded":""}">${r.angleDownSmall}</span>`:""}\n ${i?`<span class="drawer__item-nav-arrow">${r.angleDown}</span>`:""}\n </${n.url&&!t?"a":"button"}>`;return n.children&&n.children.length>0&&(o+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),o}).join("")),userItemsHtml:s(this.data,this.expandedSections)}).isLight?" headbar--light":""}" role="banner">\n \x3c!-- Burger --\x3e\n <div class="headbar__left headbar__icon headbar__icon--clickable burger-btn"\n role="button" tabindex="0" aria-label="${f.ui("menuOpen")}" aria-expanded="false">\n ${r.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n ${f.hideCta?"":`<div class="headerbar__btn">\n <a href="${f.data.ctaButton.url}" class="cta-link" aria-label="${f.data.ctaButton.label}">\n <span class="headerbar__btn--text">${f.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${r.rocket}</span>\n </a>\n </div>`}\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${f.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${f.ui("mainNav")}">\n ${f.data.mainNavigation.sort((n,e)=>n.order-e.order).map(n=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${n.url}"${n.target?` target="${n.target}"`:""} data-nav-id="${n.id}">${n.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${f.ui("homepage")}" class="headbar__pageLogo--animation${f.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${f.isLarge?`<div class="headbar__claim headbar__claim--large">${f.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${f.showBackLink&&f.backUrl?`<a href="${f.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${r.arrowLeft}</span>\n <span class="headbar__back-text">${f.backLabel}</span>\n </a>`:""}\n ${f.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${f.ui("colorMode")}" title="${f.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${r.sun}</span>\n <span class="headbar__color-mode-moon">${r.moon}</span>\n </button>`}\n ${!f.hideLang&&f.availableLanguages.length>1?`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${f.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${f.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${r.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.availableLanguages.map(n=>`<button class="headbar__lang-option${n.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${n.code===f.currentLang}" data-lang="${n.code}">\n ${n.label}\n </button>`).join("")}\n </div>\n </div>`:""}\n ${f.hideLogin?"":f.isAuth?`<button class="user-avatar-btn" aria-label="${f.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${f.userAvatar}" alt="${f.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${f.ui("login")}">\n <span class="headbar__login-text">${f.ui("login")}</span>\n <span class="headbar__login-icon">${r["circle-user-round"]}</span>\n </button>`}\n </div>\n </header>\n\n <div class="overlay" aria-hidden="true"></div>\n\n \x3c!-- Burger Drawer --\x3e\n <nav class="drawer drawer--left" role="dialog" aria-label="${f.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${f.burgerItemsHtml}</div>\n </nav>\n\n ${f.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${f.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${f.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${f.userName}</span>\n </div>\n <div class="drawer__nav">${f.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(_),this.attachEvents()}attachEvents(){this.shadow.querySelector(".headbar__color-mode")?.addEventListener("click",()=>this.toggleColorMode()),this.shadow.querySelector(".burger-btn")?.addEventListener("click",()=>this.toggleBurger()),this.shadow.querySelector(".headbar__back-link")?.addEventListener("click",n=>{const e=n.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||n.preventDefault()}),this.shadow.querySelector(".overlay")?.addEventListener("click",()=>{this.toggleBurger(!1),this.toggleUserMenu(!1)}),this.shadow.querySelector(".user-avatar-btn")?.addEventListener("click",()=>this.toggleUserMenu()),this.shadow.querySelector(".headbar__login")?.addEventListener("click",()=>{this.emit("navigation-click",{item:{id:"login",label:"Anmelden",url:"/login",order:0}})}),this.shadow.querySelector(".cta-link")?.addEventListener("click",n=>this.handleCtaClick(n));for(const n of this.shadow.querySelectorAll(".headbar__menu-link"))n.addEventListener("click",e=>{const t=this.data.mainNavigation.find(e=>e.id===n.getAttribute("data-nav-id"));t&&this.handleNavClick(t,e)});for(const n of this.shadow.querySelectorAll("[data-burger-id]"))n.addEventListener("click",e=>{const t=this.data.burgerMenu.find(e=>e.id===n.getAttribute("data-burger-id"));t&&(t.expandable||t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll("[data-user-id]"))n.addEventListener("click",e=>{if("logout"===n.getAttribute("data-action"))return void this.handleLogout();const t=this.data.userMenu.items.find(e=>e.id===n.getAttribute("data-user-id"));t&&(t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):t.disabled||this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll(".drawer__child"))n.addEventListener("click",e=>{const t=n.getAttribute("data-nav-id");if(t)for(const n of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=n.children?.find(n=>n.id===t);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const n of this.shadow.querySelectorAll(".headbar__lang-option"))n.addEventListener("click",()=>{const e=n.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}l.apiCache=new Map,l.pendingFetches=new Map,customElements.define("startnext-header",l);const d=`\n ${t}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 24px 40px;\n text-align: center;\n }\n\n /* ── Sections ── */\n .footer__part + .footer__part {\n margin-top: 40px;\n }\n\n .footer__part--sm + .footer__part--sm {\n margin-top: 20px;\n }\n\n /* ── Title ── */\n .footer__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 24px;\n color: var(--footer-text, #FFFFFF);\n }\n\n /* ── Social ── */\n .footer__social {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .footer__social-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n color: var(--footer-text, #FFFFFF);\n transition: transform 0.3s ease;\n }\n\n .footer__social-link:hover {\n animation: logoScale 0.5s linear 1;\n }\n\n .footer__social-link:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n @keyframes logoScale {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n @media (min-width: 576px) {\n .footer__social {\n gap: 24px;\n }\n }\n\n /* ── Stats ── */\n .footer__stats {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 16px 48px;\n }\n\n .footer__stat-item {\n text-align: center;\n }\n\n .footer__stat-value {\n display: block;\n font-size: 32px;\n font-weight: 800;\n line-height: 1;\n }\n\n .footer__stat-caption {\n display: block;\n font-size: 13px;\n margin-top: 8px;\n opacity: 0.8;\n }\n\n /* ── Navigation columns ── */\n .footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n text-align: left;\n }\n\n .footer__nav-title {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__nav {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.8;\n }\n\n .footer__nav a {\n font-size: 15px;\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__nav a:hover {\n opacity: 0.7;\n }\n\n .footer__nav a:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n /* ── B Corp ── */\n .footer__bcorp {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__bcorp-badge {\n flex-shrink: 0;\n width: 80px;\n height: auto;\n }\n\n .footer__bcorp-badge svg {\n width: 80px;\n height: auto;\n display: block;\n }\n\n .footer__bcorp-label {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 4px;\n }\n\n .footer__bcorp-text {\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.85;\n }\n\n .footer__bcorp-line {\n width: 100%;\n max-width: 180px;\n height: 3px;\n background: var(--footer-text, #FFFFFF);\n margin-top: 12px;\n }\n\n /* ── Funding notice ── */\n .footer__funding {\n text-align: left;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .footer__funding-title {\n font-size: 15px;\n font-weight: 700;\n margin-bottom: 8px;\n }\n\n .footer__funding-text {\n font-size: 14px;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* ── Payments ── */\n .footer__payments-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .footer__payments {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px 40px;\n }\n\n .footer__payment {\n font-size: 15px;\n opacity: 0.85;\n }\n\n /* ── Logo ── */\n .footer__logo {\n display: inline-flex;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__logo:hover {\n opacity: 0.8;\n }\n\n .footer__logo:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n /* ── Claim ── */\n .footer__claim {\n font-size: 20px;\n font-weight: 600;\n }\n\n /* ── Dimmed section (legal + copyright) ── */\n .footer__dim {\n opacity: 0.5;\n }\n\n .footer__dim a {\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__dim a:hover {\n opacity: 0.7;\n }\n\n .footer__legal {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 4px 20px;\n font-size: 14px;\n margin-bottom: 8px;\n }\n\n .footer__copyright {\n font-size: 14px;\n }\n\n /* ── Responsive ── */\n @media (max-width: 767px) {\n .footer__columns {\n grid-template-columns: 1fr 1fr;\n gap: 32px 24px;\n }\n\n .footer__bcorp {\n grid-column: 1 / -1;\n justify-content: center;\n }\n\n .footer__stat-value {\n font-size: 26px;\n }\n\n .footer__funding {\n text-align: center;\n }\n }\n\n @media (max-width: 479px) {\n .footer {\n padding: 40px 16px 32px;\n }\n\n .footer__columns {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .footer__bcorp {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .footer__bcorp-line {\n margin-left: auto;\n margin-right: auto;\n }\n\n .footer__stats {\n flex-direction: column;\n gap: 24px;\n }\n }\n`;class h extends n{constructor(){super(...arguments),this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(n){this.isConnected&&("lang-sync"!==n?(this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==n&&"api-url"!==n||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=n=>{this.setAttribute("lang",n.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const n=h.apiCache.get(this.currentLang);return n||(this.currentLang,{socialTitle:"",social:[],statsTitle:"",stats:[],columns:[],bcorp:{label:"",description:""},funding:{title:"",text:""},payments:{title:"",methods:[]},claim:"",legalLinks:[],copyright:"",theme:{"--footer-bg":"#304b50","--footer-text":"#FFFFFF","--footer-link-hover":"#06E481","--footer-border":"rgba(255, 255, 255, 0.15)"}})}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(h.apiCache.has(e))return;if(h.pendingFetches.has(e))return await h.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&h.apiCache.has(e)&&(this.data=h.apiCache.get(e),this.render(),this.renderLightDomNav()));const t=(async()=>{const t=await fetch(`${n}/api/footer?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};h.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.render(),this.renderLightDomNav())})();h.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextFooter] API fetch failed, using fallback data",n)}finally{h.pendingFetches.delete(e)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";for(const e of this.data.columns){const t=document.createElement("div");t.setAttribute("data-section",e.title.toLowerCase());for(const n of e.links){const e=document.createElement("a");e.href=n.url,e.textContent=n.label,t.appendChild(e)}n.appendChild(t)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const n of this.data.legalLinks){const t=document.createElement("a");t.href=n.url,t.textContent=n.label,e.appendChild(t)}n.appendChild(e),this.appendChild(n)}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const n=document.createElement("div");var e;n.innerHTML=`\n <footer class="footer" role="contentinfo">\n \x3c!-- Social --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${(e=this.data).socialTitle}</h3>\n <div class="footer__social" aria-label="Soziale Medien">\n ${e.social.map(n=>`\n <a href="${n.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${n.platform}">\n ${o(n.platform,32)}\n </a>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Stats --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${e.statsTitle}</h3>\n <div class="footer__stats">\n ${e.stats.map(n=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${n.value}</span>\n <span class="footer__stat-caption">${n.caption}</span>\n </div>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Navigation columns + B Corp --\x3e\n <div class="footer__part">\n <div class="footer__columns">\n ${e.columns.map(n=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${n.title}</h4>\n <ul class="footer__nav">\n ${n.links.map(n=>`<li><a href="${n.url}" class="footer__link">${n.label}</a></li>`).join("")}\n </ul>\n </div>\n `).join("")}\n <div class="footer__bcorp">\n <div class="footer__bcorp-badge"><svg viewBox="0 0 120 160" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="116" height="156" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>\n <text x="60" y="55" text-anchor="middle" font-size="50" font-weight="800" fill="currentColor">B</text>\n <line x1="20" y1="80" x2="100" y2="80" stroke="currentColor" stroke-width="2"/>\n <text x="60" y="105" text-anchor="middle" font-size="13" font-weight="600" fill="currentColor">Corporation</text>\n</svg></div>\n <div>\n <div class="footer__bcorp-label">${e.bcorp.label}</div>\n <div class="footer__bcorp-text">${e.bcorp.description}</div>\n <div class="footer__bcorp-line"></div>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Funding notice --\x3e\n <div class="footer__part">\n <div class="footer__funding">\n <div class="footer__funding-title">${e.funding.title}</div>\n <div class="footer__funding-text">${e.funding.text}</div>\n </div>\n </div>\n\n \x3c!-- Payment methods --\x3e\n <div class="footer__part">\n <div class="footer__payments-title">${e.payments.title}</div>\n <div class="footer__payments">\n ${e.payments.methods.map(n=>`<span class="footer__payment">${n}</span>`).join("")}\n </div>\n </div>\n\n \x3c!-- Logo --\x3e\n <div class="footer__part footer__part--sm">\n <a href="/" aria-label="Startnext Homepage" class="footer__logo">\n ${o("startnext-s",64)}\n </a>\n </div>\n\n \x3c!-- Claim --\x3e\n <div class="footer__part footer__part--sm">\n <div class="footer__claim">${e.claim}</div>\n </div>\n\n \x3c!-- Legal + Copyright --\x3e\n <div class="footer__part footer__dim">\n <div class="footer__legal">\n ${e.legalLinks.map(n=>`<a href="${n.url}" class="footer__link">${n.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(n),this.attachEvents()}attachEvents(){for(const n of this.shadow.querySelectorAll(".footer__link"))n.addEventListener("click",e=>{const t=n.getAttribute("href")||"",a=n.textContent?.trim()||"";this.emit("navigation-click",{item:{url:t,label:a}})||e.preventDefault()})}}h.observedAttributes=["lang","api-url","lang-sync"],h.apiCache=new Map,h.pendingFetches=new Map,customElements.define("startnext-footer",h);export{h as StartnextFooter,l as StartnextHeader};