@startnext/chrome 0.4.5 → 0.4.7

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 +41 -12
  2. package/dist/components/header/StartnextHeader.d.ts +1 -1
  3. package/dist/components/header/StartnextHeader.d.ts.map +1 -1
  4. package/dist/index.d.ts +7 -0
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/index.umd.js +1 -1
  8. package/package.json +9 -9
package/README.md CHANGED
@@ -40,16 +40,20 @@ import '@startnext/chrome';
40
40
 
41
41
  | Attribute | Type | Default | Description |
42
42
  |---|---|---|---|
43
+ | `api-url` | `string` | - | URL des SCS API (z. B. `https://scs-api.vercel.app` oder relativ `/scs-api`). Ohne Attribut: statische Default-Daten |
43
44
  | `lang` | `string` | `'de'` | Aktive Sprache (beliebiger 2-Buchstaben-Code, z. B. `'de'`, `'en'`, `'fr'`) |
44
- | `languages` | `string` (JSON) | - | JSON-Array von Sprachcodes, auf die der Language-Switcher eingeschränkt wird, z. B. `'["de","en"]'`. Ohne Attribut: alle vom API gelieferten Sprachen. Der Switcher wird automatisch ausgeblendet, wenn nur 1 Sprache verfügbar ist |
45
- | `light` | `boolean` | `false` | Heller Header (weiße Schrift/Icons über dunklem Hero, wechselt automatisch zu dunkel beim Scrollen). Standard ohne Attribut: dunkler Header |
46
- | `large-animation` | `boolean` | `false` | Große Lottie-Logo-Animation mit Claim und horizontaler Navigation |
45
+ | `languages` | `string` | - | Kommagetrennte Liste von Sprachcodes, auf die der Language-Switcher eingeschränkt wird, z. B. `'de,en'`. Ohne Attribut: alle vom API gelieferten Sprachen. Der Switcher wird automatisch ausgeblendet, wenn nach dem Filtern nur noch 1 Sprache übrig bleibt |
46
+ | `light` | `boolean` | `false` | Heller Header: weiße Schrift/Icons (unabhängig von `color-mode`, z. B. über einem dunklen Hero-Bild) |
47
+ | `large-animation` | `boolean` | `false` | Große Lottie-Logo-Animation mit Claim und horizontaler Navigation (z. B. für die Startseite). Erfordert `api-url` |
47
48
  | `authenticated` | `boolean` | `false` | Zeigt User-Avatar statt "Anmelden" Button |
48
49
  | `user-name` | `string` | - | Name des eingeloggten Users |
49
50
  | `user-avatar` | `string` | - | Avatar-URL des Users |
50
- | `color-mode` | `'light' \| 'dark'` | auto | Farbmodus. Ohne Attribut: Header scannt `<html>` nach Klasse `dark`/`light`. Ohne Klasse: Default `dark` (dunkle Seite, heller Header). Toggle-Button wechselt `<html>`-Klasse und Header-Darstellung |
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` |
51
52
  | `hide-color-mode` | `boolean` | `false` | Versteckt den Color-Mode Toggle-Button |
52
53
  | `hide-lang` | `boolean` | `false` | Versteckt den Language-Switcher komplett |
54
+ | `hide-login` | `boolean` | `false` | Versteckt den "Anmelden" Button (auch wenn nicht eingeloggt) |
55
+ | `hide-cta` | `boolean` | `false` | Versteckt den CTA-Button ("Projekt starten") |
56
+ | `show-back-link` | `boolean` | `false` | Zeigt den aus der API gelieferten "Zurück"-Link links neben dem Logo. Nur sichtbar wenn in Notion konfiguriert |
53
57
 
54
58
  **Events:**
55
59
 
@@ -70,29 +74,53 @@ import '@startnext/chrome';
70
74
  <!-- Default: dunkler Header (dunkle Schrift für helle Seiten) -->
71
75
  <startnext-header></startnext-header>
72
76
 
77
+ <!-- Mit Live-Daten vom SCS API -->
78
+ <startnext-header api-url="https://scs-api.vercel.app" lang="de"></startnext-header>
79
+
80
+ <!-- Sprachauswahl auf DE und EN einschränken -->
81
+ <startnext-header api-url="/scs-api" lang="de" languages="de,en"></startnext-header>
82
+
73
83
  <!-- Heller Header (weiße Schrift über dunklem Hero) -->
74
84
  <startnext-header light></startnext-header>
75
85
 
76
86
  <!-- Heller Header + große Animation (z.B. Startseite) -->
77
- <startnext-header light large-animation></startnext-header>
87
+ <startnext-header api-url="/scs-api" light large-animation></startnext-header>
78
88
 
79
89
  <!-- Heller Header + groß + eingeloggt -->
80
90
  <startnext-header
91
+ api-url="/scs-api"
81
92
  light
82
93
  large-animation
83
94
  authenticated
84
95
  user-name="Elias Groesel"
85
96
  user-avatar="https://..."
86
97
  ></startnext-header>
98
+
99
+ <!-- Zurück-Link anzeigen (aus Notion/API, z.B. auf Unterseiten) -->
100
+ <startnext-header api-url="/scs-api" show-back-link></startnext-header>
101
+
102
+ <!-- Nur DE, kein Login, kein CTA -->
103
+ <startnext-header languages="de" hide-login hide-cta></startnext-header>
87
104
  ```
88
105
 
89
106
  ```html
90
- <!-- Color Mode: Header scannt <html> automatisch -->
91
- <!-- html.dark → heller Header, html.light → dunkler Header -->
92
- <!-- Toggle-Button (Sun/Moon) im Header wechselt den Modus -->
93
- <html class="dark">
107
+ <!-- light und color-mode sind unabhängig voneinander -->
108
+
109
+ <!-- Heller Header über dunklem Hero, Seite selbst im Light Mode -->
110
+ <html class="light">
94
111
  <startnext-header light large-animation></startnext-header>
95
112
  </html>
113
+
114
+ <!-- Seite im Dark Mode (html.dark), Header ebenfalls hell -->
115
+ <html class="dark">
116
+ <startnext-header color-mode="dark" light large-animation></startnext-header>
117
+ </html>
118
+
119
+ <!-- Seite im Dark Mode, Header dunkel (z.B. nach dem Scrollen) -->
120
+ <!-- light wird nicht gesetzt → Header zeigt dunkle Schrift -->
121
+ <html class="dark">
122
+ <startnext-header color-mode="dark"></startnext-header>
123
+ </html>
96
124
  ```
97
125
 
98
126
  ```javascript
@@ -126,7 +154,7 @@ header.addEventListener('color-mode-change', (e) => {
126
154
  |---|---|---|---|
127
155
  | `lang` | `string` | `'de'` | Aktive Sprache (beliebiger 2-Buchstaben-Code) |
128
156
  | `api-url` | `string` | - | URL des SCS API. Ohne Attribut: statische Default-Daten |
129
- | `lang-sync` | `boolean` | `true` | Synchronisiert `lang` automatisch beim `language-change`-Event des Headers |
157
+ | `lang-sync` | `boolean` | `true` | Synchronisiert `lang` automatisch beim `language-change`-Event des Headers. Mit `lang-sync="false"` deaktivieren |
130
158
 
131
159
  **Events:**
132
160
 
@@ -191,7 +219,7 @@ pnpm --filter @startnext/chrome build
191
219
  pnpm --filter @startnext/chrome lint
192
220
  ```
193
221
 
194
- Demo-Seite öffnen: `packages/sn-chrome-web-component/examples/vanilla/index.html`
222
+ Demo-Seite öffnen: `packages/scs-web-component/demo/index.html`
195
223
 
196
224
  ## Architecture
197
225
 
@@ -213,7 +241,8 @@ src/
213
241
  │ ├── footer.css.ts # CSS als Template-Literal-Export
214
242
  │ └── footer.template.ts # Render-Funktion (HTML-String)
215
243
  ├── data/
216
- │ └── mockData.ts # Mock-Daten
244
+ │ ├── defaults.ts # Statische Default-Daten (ohne API)
245
+ │ └── uiStrings.ts # ARIA-Labels / UI-Strings (de/en)
217
246
  ├── types/
218
247
  │ └── index.ts # Alle TypeScript-Interfaces
219
248
  └── index.ts # Barrel-Export
package/dist/components/header/StartnextHeader.d.ts CHANGED
@@ -19,7 +19,6 @@ export declare class StartnextHeader extends BaseComponent {
19
19
  private handleResizeBound;
20
20
  private handleDocClickBound;
21
21
  static get observedAttributes(): string[];
22
- private _skipCallback;
23
22
  private get currentLang();
24
23
  private get requestedLanguages();
25
24
  /** True when header should show white text (dark page / hero background). */
@@ -31,6 +30,7 @@ export declare class StartnextHeader extends BaseComponent {
31
30
  /** If api-url is set, fetch header data from API and re-render. */
32
31
  private loadApiData;
33
32
  disconnectedCallback(): void;
33
+ private _skipCallback;
34
34
  attributeChangedCallback(name: string): void;
35
35
  /** Re-apply scroll-dependent classes after a full re-render. */
36
36
  private restoreScrollState;
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,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,kBAAkB,GAI7B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAgBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAqDzB,oBAAoB,IAAI,IAAI;IAU5B,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;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,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;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;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,YAAY;CAkErB"}
package/dist/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export { StartnextFooter } from './components/footer/StartnextFooter.js';
3
3
  export type { NavigationItem, HeaderData, FooterData, FooterColumn, SocialLink, UserInfo, UserMenu, LogoConfig, CtaButton, LanguageOption, ThemeVariables, } from './types/index.js';
4
4
  interface StartnextHeaderAttributes {
5
5
  lang?: string;
6
+ languages?: string;
6
7
  light?: boolean | string;
7
8
  'large-animation'?: boolean | string;
8
9
  authenticated?: boolean | string;
@@ -11,6 +12,10 @@ interface StartnextHeaderAttributes {
11
12
  'color-mode'?: 'light' | 'dark' | string;
12
13
  'hide-color-mode'?: boolean | string;
13
14
  'hide-lang'?: boolean | string;
15
+ 'hide-login'?: boolean | string;
16
+ 'hide-cta'?: boolean | string;
17
+ 'show-back-link'?: boolean | string;
18
+ 'api-url'?: string;
14
19
  children?: unknown;
15
20
  ref?: unknown;
16
21
  class?: string;
@@ -21,6 +26,8 @@ interface StartnextHeaderAttributes {
21
26
  }
22
27
  interface StartnextFooterAttributes {
23
28
  lang?: string;
29
+ 'api-url'?: string;
30
+ 'lang-sync'?: boolean | string;
24
31
  children?: unknown;
25
32
  ref?: unknown;
26
33
  class?: string;
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}
package/dist/index.js CHANGED
@@ -4,4 +4,4 @@ class n extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow(
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","back-url","back-label","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(){const n=this.getAttribute("color-mode");return n?"dark"===n: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(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const n=document.documentElement;n.classList.contains("dark")?this.applyColorMode("dark"):n.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}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.getAttribute("back-url")||this.data.backLink?.url||"",g=this.getAttribute("back-label")||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)}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(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const n=document.documentElement;n.classList.contains("dark")?this.applyColorMode("dark"):n.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}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,m=this.requestedLanguages,b=m?this.data.availableLanguages.filter(n=>m.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:b,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};