@startnext/chrome 0.4.11 → 0.5.1

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 +36 -26
  2. package/dist/components/header/StartnextHeader.d.ts +0 -2
  3. package/dist/components/header/StartnextHeader.d.ts.map +1 -1
  4. package/dist/index.d.ts +1 -1
  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 +8 -9
package/README.md CHANGED
@@ -24,20 +24,23 @@ import '@startnext/chrome';
24
24
  <startnext-footer></startnext-footer>
25
25
  ```
26
26
 
27
- **React 18 + Next.js (lazy import):** Use explicit string values for boolean attributes to ensure correct SSR serialization and hydration in all React versions:
27
+ **React 18 + Next.js (lazy import):**
28
28
 
29
29
  ```jsx
30
- // ✅ Korrekt: explizite String-Werte → setAttribute() in allen React-Versionen
31
- <startnext-header
32
- api-url="https://scs-api.vercel.app"
33
- light=""
34
- color-mode="light"
35
- hide-lang=""
36
- hide-cta=""
37
- />
38
-
39
- // ❌ Bare booleans können in React 18 + lazy import als DOM-Properties (nicht Attribute) gesetzt werden
40
- <startnext-header light hide-lang />
30
+ import { useEffect } from 'react';
31
+
32
+ export function ChromeHeader() {
33
+ useEffect(() => { import('@startnext/chrome'); }, []);
34
+
35
+ return (
36
+ <startnext-header
37
+ api-url="https://scs-api.vercel.app"
38
+ color-mode="light"
39
+ light-header
40
+ hide-lang hide-cta hide-color-mode show-back-link
41
+ />
42
+ );
43
+ }
41
44
  ```
42
45
 
43
46
  ### Via CDN (PHP, Vanilla HTML)
@@ -59,12 +62,12 @@ import '@startnext/chrome';
59
62
  | `api-url` | `string` | - | URL des SCS API (z. B. `https://scs-api.vercel.app` oder relativ `/scs-api`). Ohne Attribut: statische Default-Daten |
60
63
  | `lang` | `string` | `'de'` | Aktive Sprache (beliebiger 2-Buchstaben-Code, z. B. `'de'`, `'en'`, `'fr'`) |
61
64
  | `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 |
62
- | `light` | `boolean` | `false` | Heller Header: weiße Schrift/Icons (unabhängig von `color-mode`, z. B. über einem dunklen Hero-Bild) |
65
+ | `light-header` | `boolean` | `false` | Weiße Schrift/Icons im Header (unabhängig von `color-mode`, z. B. über einem dunklen Hero-Bild) |
63
66
  | `large-animation` | `boolean` | `false` | Große Lottie-Logo-Animation mit Claim und horizontaler Navigation (z. B. für die Startseite). Erfordert `api-url` |
64
67
  | `authenticated` | `boolean` | `false` | Zeigt User-Avatar statt "Anmelden" Button |
65
68
  | `user-name` | `string` | - | Name des eingeloggten Users |
66
69
  | `user-avatar` | `string` | - | Avatar-URL des Users |
67
- | `color-mode` | `'light' \| 'dark'` | auto | Seitenweiter Farbmodus. Ohne Attribut: Header liest `<html class="dark/light">` beim Mount (Default: `light`). Mit Attribut: Header liest den Wert, schreibt aber die `<html>`-Klasse nicht (Consumer kontrolliert die Seite). Der Toggle-Button im Header wechselt `<html>`-Klasse und emittet `color-mode-change` |
70
+ | `color-mode` | `'light' \| 'dark'` | auto | Seitenweiter Farbmodus. Ohne Attribut: Header liest `<html class="dark/light">` beim Mount (Default: `light`). Mit Attribut: Header respektiert den Wert und schreibt die `<html>`-Klasse nicht (Consumer kontrolliert die Seite). Der Toggle-Button im Header wechselt `<html>`-Klasse und emittet `color-mode-change` |
68
71
  | `hide-color-mode` | `boolean` | `false` | Versteckt den Color-Mode Toggle-Button |
69
72
  | `hide-lang` | `boolean` | `false` | Versteckt den Language-Switcher komplett |
70
73
  | `hide-login` | `boolean` | `false` | Versteckt den "Anmelden" Button (auch wenn nicht eingeloggt) |
@@ -97,15 +100,15 @@ import '@startnext/chrome';
97
100
  <startnext-header api-url="/scs-api" lang="de" languages="de,en"></startnext-header>
98
101
 
99
102
  <!-- Heller Header (weiße Schrift über dunklem Hero) -->
100
- <startnext-header light></startnext-header>
103
+ <startnext-header light-header></startnext-header>
101
104
 
102
105
  <!-- Heller Header + große Animation (z.B. Startseite) -->
103
- <startnext-header api-url="/scs-api" light large-animation></startnext-header>
106
+ <startnext-header api-url="/scs-api" light-header large-animation></startnext-header>
104
107
 
105
108
  <!-- Heller Header + groß + eingeloggt -->
106
109
  <startnext-header
107
110
  api-url="/scs-api"
108
- light
111
+ light-header
109
112
  large-animation
110
113
  authenticated
111
114
  user-name="Elias Groesel"
@@ -120,22 +123,21 @@ import '@startnext/chrome';
120
123
  ```
121
124
 
122
125
  ```html
123
- <!-- light und color-mode sind unabhängig voneinander -->
126
+ <!-- light-header und color-mode sind unabhängig voneinander -->
124
127
 
125
128
  <!-- Heller Header über dunklem Hero, Seite selbst im Light Mode -->
126
129
  <html class="light">
127
- <startnext-header light large-animation></startnext-header>
130
+ <startnext-header light-header large-animation></startnext-header>
128
131
  </html>
129
132
 
130
- <!-- Seite im Dark Mode (html.dark), Header ebenfalls hell -->
133
+ <!-- Seite im Dark Mode (html.dark), Header dennoch weiße Schrift -->
131
134
  <html class="dark">
132
- <startnext-header color-mode="dark" light large-animation></startnext-header>
135
+ <startnext-header color-mode="dark" light-header large-animation></startnext-header>
133
136
  </html>
134
137
 
135
- <!-- Seite im Dark Mode, Header dunkel (z.B. nach dem Scrollen) -->
136
- <!-- light wird nicht gesetzt → Header zeigt dunkle Schrift -->
138
+ <!-- Seite dunkel, Header mit explizit gesetztem color-mode (schreibt html-Klasse nicht) -->
137
139
  <html class="dark">
138
- <startnext-header color-mode="dark"></startnext-header>
140
+ <startnext-header color-mode="light"></startnext-header>
139
141
  </html>
140
142
  ```
141
143
 
@@ -186,7 +188,14 @@ Override CSS Custom Properties:
186
188
  startnext-header {
187
189
  --primary-color: #0066FF;
188
190
  --btn-primary-bg: #0066FF;
189
- --header-bg-scrolled: #FAFAFA;
191
+
192
+ /* Header-Hintergrund */
193
+ --header-bg: transparent; /* Standard-Hintergrund (Default: transparent) */
194
+ --header-bg-scrolled: #FAFAFA; /* Hintergrund wenn gescrollt */
195
+
196
+ /* Textfarben — überschreiben --text-primary gezielt für den Headbar */
197
+ --header-text: #FFFFFF; /* Textfarbe Standard (z.B. weiß über Hero) */
198
+ --header-text-scrolled: #304b50; /* Textfarbe wenn gescrollt */
190
199
  }
191
200
 
192
201
  startnext-footer {
@@ -195,6 +204,8 @@ startnext-footer {
195
204
  }
196
205
  ```
197
206
 
207
+ `--header-text` und `--header-text-scrolled` sind eine Alternative zu `light-header` wenn mehr Kontrolle über die Textfarbe gewünscht ist (z. B. transparenter Header über dunklem Bild mit weißem Text, aber weißem Header-Hintergrund nach dem Scrollen mit dunklem Text).
208
+
198
209
  ## Fonts
199
210
 
200
211
  Standardmäßig nutzen die Components System-Fonts als Fallback. Für eigene Schriftarten `@font-face` im eigenen CSS deklarieren und `--font-family` setzen:
@@ -278,4 +289,3 @@ packages/
278
289
  scs-web-component/ ← this package
279
290
  scs-api/ ← Express API service
280
291
  ```
281
-
package/dist/components/header/StartnextHeader.d.ts CHANGED
@@ -23,8 +23,6 @@ export declare class StartnextHeader extends BaseComponent {
23
23
  private get requestedLanguages();
24
24
  /** True when header should show white text (dark page / hero background). */
25
25
  private get isLightHeader();
26
- set light(v: boolean | string | null | undefined);
27
- get light(): boolean;
28
26
  private ui;
29
27
  connectedCallback(): void;
30
28
  /** Return cached API data if available, otherwise defaults (theme only). */
package/dist/components/header/StartnextHeader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAQzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,qGAAqG;IACrG,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAiC;IACxD,uGAAuG;IACvG,OAAO,CAAC,MAAM,CAAC,cAAc,CAAoC;IAEjE,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,kBAAkB,GAI7B;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAExB;IAOD,IAAI,KAAK,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAM/C;IACD,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAwBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAqDzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,aAAa,CAAS;IAE9B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAgB5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;YAUZ,UAAU;IA8BxB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,YAAY;CAkErB"}
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;IAyBzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAqDzB,oBAAoB,IAAI,IAAI;IAU5B,OAAO,CAAC,aAAa,CAAS;IAE9B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAgB5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;YAUZ,UAAU;IA8BxB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAsCd,OAAO,CAAC,YAAY;CAkErB"}
package/dist/index.d.ts CHANGED
@@ -4,7 +4,7 @@ export type { NavigationItem, HeaderData, FooterData, FooterColumn, SocialLink,
4
4
  interface StartnextHeaderAttributes {
5
5
  lang?: string;
6
6
  languages?: string;
7
- light?: boolean | string;
7
+ 'light-header'?: boolean | string;
8
8
  'large-animation'?: boolean | string;
9
9
  authenticated?: boolean | string;
10
10
  'user-name'?: 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,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"}
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,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAClC,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","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get requestedLanguages(){const n=this.getAttribute("languages");return n?n.split(",").map(n=>n.trim()).filter(Boolean):null}get isLightHeader(){return this.getBoolAttr("light",!1)}set light(n){null!=n&&!1!==n&&"false"!==n?this.setAttribute("light",""):this.removeAttribute("light")}get light(){return this.hasAttribute("light")}ui(n){return function(n,t){return e[n]?.[t]||e[n]?.de||n}(n,this.currentLang)}connectedCallback(){this._skipCallback=!0,this.upgradeBoolProps(["light","large-animation","authenticated","hide-color-mode","hide-lang","hide-login","hide-cta","show-back-link"]),this._skipCallback=!1,this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),window.addEventListener("scroll",this.handleScrollBound,{passive:!0}),window.addEventListener("resize",this.handleResizeBound,{passive:!0}),document.addEventListener("keydown",this.handleKeydownBound),document.addEventListener("click",this.handleDocClickBound),this.schedulePostRender(),this.loadApiData()}getHeaderData(){const n=l.apiCache.get(this.currentLang);return n||function(n="de"){return{mainNavigation:[],burgerMenu:[],userMenu:{user:{name:"",avatar:""},items:[]},ctaButton:{label:"",url:"",style:"primary"},logo:{src:"",alt:"Startnext",href:"/"},theme:{"--header-bg":"transparent","--header-bg-scrolled":"#FFFFFF","--header-text":"#FFFFFF","--header-text-scrolled":"#304b50","--header-height":"64px","--header-padding":"0 16px","--btn-primary-bg":"#06E481","--btn-primary-text":"#FFFFFF","--btn-primary-hover":"#05C972","--burger-icon-color":"#FFFFFF","--drawer-bg":"#FFFFFF","--drawer-width":"320px","--drawer-shadow":"4px 0 12px rgba(0,0,0,0.1)","--font-size-base":"16px","--font-size-small":"14px","--primary-color":"#06E481","--text-primary":"#304b50","--text-secondary":"#6B7280","--text-disabled":"#D1D5DB","--border-color":"#E5E7EB","--hover-bg":"#F3F4F6","--transition-speed":"0.3s","--drawer-transition":"0.4s cubic-bezier(0.4, 0, 0.2, 1)","--header-z-index":"1000","--drawer-z-index":"1100","--overlay-z-index":"1050"},language:n,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(l.apiCache.has(e))return;if(l.pendingFetches.has(e))return await l.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&l.apiCache.has(e)&&(this.data=l.apiCache.get(e),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()));const t=(async()=>{const t=await fetch(`${n}/api/header?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};l.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender())})();l.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextHeader] API fetch failed, using fallback data",n)}finally{l.pendingFetches.delete(e)}}disconnectedCallback(){window.removeEventListener("scroll",this.handleScrollBound),window.removeEventListener("resize",this.handleResizeBound),document.removeEventListener("keydown",this.handleKeydownBound),document.removeEventListener("click",this.handleDocClickBound),null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.lottieAnim?.destroy(),this.querySelector("[data-crawler-nav]")?.remove()}attributeChangedCallback(n){!this._skipCallback&&this.isConnected&&("color-mode"===n&&this.initColorMode(),this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==n&&"api-url"!==n||this.loadApiData())}restoreScrollState(){const n=this.shadow.querySelector(".headbar");n&&(n.classList.toggle("headbar--tight",this.isTight),n.classList.toggle("headbar--slide-up",this.isSlideUp),n.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight))}schedulePostRender(){null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.pendingRaf=requestAnimationFrame(()=>{this.pendingRaf=null,this.shadow.querySelector(".headerbar__btn")?.classList.add("headerbar__btn--loaded"),this.initLottie()})}async initLottie(){const n=this.shadow.querySelector("#page-logo-animation");if(!n)return;const e=this.getAttribute("api-url");if(!e)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const{default:t}=await import("./lottie_light-BkFx3xP_.js").then(function(n){return n.l}),a=this.isLightHeader?"logo-white.json":"logo-blue.json";this.lottieAnim=t.loadAnimation({container:n,renderer:"svg",loop:!1,autoplay:!1,path:`${e}/assets/lottie/${a}`}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const n=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let t=!1;const a=n>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),t=!0);const i=n-this.lastScrollY,r=document.querySelector("main, [data-content], .page-content"),o=r?.getBoundingClientRect().top??1/0,s=this.getBoolAttr("large-animation",!1);i>8&&o<-90&&n>(s?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),t=!0):i<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),t=!0),Math.abs(i)>8&&(this.lastScrollY=n),this.updateLogoAnimation(n),t&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(n){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,t=e+400,a=Math.max(0,Math.min(1,(n-e)/(t-e))),i=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const r=this.shadow.querySelector(".headbar__pageLogo--animation-large"),o=this.shadow.querySelector(".headbar__claim--large");if(!r)return;const s=window.innerWidth,l=s<768?-110:s<1100?-120:-140,d=s<768?.65:.5;o&&(o.style.opacity=String(1-Math.min(1,a/.05)));const h=Math.max(0,Math.min(1,(a-.05)/.25)),c=1-Math.pow(1-h,4);r.style.transform=`translateY(${c*l}px) scale(${1+c*(d-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(n){"Escape"===n.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(n){if(!this.langMenuOpen)return;const e=n.composedPath(),t=this.shadow.querySelector(".headbar__lang");t&&!e.includes(t)&&this.toggleLangMenu(!1)}toggleBurger(n){this.burgerOpen=n??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(n){this.userMenuOpen=n??!this.userMenuOpen,this.updateDrawerStates(),this.emit("user-menu-toggle",{open:this.userMenuOpen}),this.userMenuOpen&&this.trapFocus("user")}updateDrawerStates(){this.shadow.querySelector(".overlay")?.classList.toggle("open",this.burgerOpen||this.userMenuOpen),this.shadow.querySelector(".drawer--left")?.classList.toggle("open",this.burgerOpen),this.shadow.querySelector(".drawer--right")?.classList.toggle("open",this.userMenuOpen),document.body.style.overflow=this.burgerOpen||this.userMenuOpen?"hidden":""}trapFocus(n){const e=this.shadow.querySelector("burger"===n?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(n,e){this.emit("navigation-click",{item:n})||e.preventDefault()}handleCtaClick(n){this.emit("cta-click",{url:this.data.ctaButton.url})||n.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(n){this.emit("language-change",{language:n})}toggleLangMenu(n){this.langMenuOpen=n??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),t=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),t?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(n){this.expandedSections.has(n)?this.expandedSections.delete(n):this.expandedSections.add(n),this.updateExpandStates()}updateExpandStates(){for(const n of this.shadow.querySelectorAll("[data-expand-id]")){const e=n.getAttribute("data-expand-id"),t=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",t),n.querySelector(".drawer__item-expand")?.classList.toggle("expanded",t),n.setAttribute("aria-expanded",String(t))}}initColorMode(){const n=document.documentElement,e=this.hasAttribute("color-mode");let t;t=e?this.getAttribute("color-mode"):n.classList.contains("dark")?"dark":(n.classList.contains("light"),"light"),e||(n.classList.remove("light","dark"),n.classList.add(t)),this._skipCallback=!0,this.setAttribute("color-mode",t),this.hasAttribute("light")||"dark"!==t||this.setAttribute("light",""),this._skipCallback=!1}toggleColorMode(){const n="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(n),this.emit("color-mode-change",{mode:n})}applyColorMode(n){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(n),this._skipCallback=!0,this.setAttribute("color-mode",n),"dark"===n?this.setAttribute("light",""):this.removeAttribute("light"),this._skipCallback=!1,this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";const e=e=>{const t=document.createElement("div");return t.setAttribute("data-section",e),n.appendChild(t),t},t=(n,e,t)=>{const a=document.createElement("a");a.href=e,a.textContent=t,n.appendChild(a)},a=e("main-navigation");for(const n of this.data.mainNavigation)t(a,n.url,n.label);t(a,this.data.ctaButton.url,this.data.ctaButton.label);const i=[];for(const n of this.data.burgerMenu)if("divider"!==n.type&&"logout"!==n.action&&n.url)if(n.children){const a=e(n.label.toLowerCase());t(a,n.url,n.label);for(const e of n.children)e.url&&t(a,e.url,e.label)}else n.small&&i.push(n);if(i.length){const n=e("legal");for(const e of i)t(n,e.url,e.label)}this.appendChild(n)}render(){const n=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,t=this.getBoolAttr("large-animation",!1),i=this.getBoolAttr("hide-color-mode",!1),o=this.getBoolAttr("hide-lang",!1),l=this.getBoolAttr("hide-login",!1),d=this.getBoolAttr("hide-cta",!1),h=this.getBoolAttr("show-back-link",!1),c=this.data.backLink?.url||"",g=this.data.backLink?.label||"",p=this.getAttribute("user-name")||this.data.userMenu.user.name,u=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar,b=this.requestedLanguages,m=b?this.data.availableLanguages.filter(n=>b.includes(n.code)):this.data.availableLanguages;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(a));const _=document.createElement("div");var f,x,v;_.innerHTML=`\n <header class="headbar${(f={isAuth:n,isLight:e,isLarge:t,hideColorMode:i,hideLang:o,hideLogin:l,hideCta:d,showBackLink:h,backUrl:c,backLabel:g,userName:p,userAvatar:u,data:this.data,availableLanguages:m,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,v=this.expandedSections,x.burgerMenu.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];n.highlighted&&e.push("drawer__item--highlighted"),n.small&&e.push("drawer__item--small");const t=n.expandable||n.children&&n.children.length>0,a=v.has(n.id),i=!n.highlighted&&!n.small&&!t&&n.url;let o=`<${n.url&&!t?"a":"button"} class="${e.join(" ")}"\n ${n.url&&!t?`href="${n.url}"${n.target?` target="${n.target}"`:""}`:""}\n ${t?`data-expand-id="${n.id}" aria-expanded="${a}"`:""}\n data-burger-id="${n.id}">\n ${n.label}\n ${t?`<span class="drawer__item-expand${a?" expanded":""}">${r.angleDownSmall}</span>`:""}\n ${i?`<span class="drawer__item-nav-arrow">${r.angleDown}</span>`:""}\n </${n.url&&!t?"a":"button"}>`;return n.children&&n.children.length>0&&(o+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),o}).join("")),userItemsHtml:s(this.data,this.expandedSections)}).isLight?" headbar--light":""}" role="banner">\n \x3c!-- Burger --\x3e\n <div class="headbar__left headbar__icon headbar__icon--clickable burger-btn"\n role="button" tabindex="0" aria-label="${f.ui("menuOpen")}" aria-expanded="false">\n ${r.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n ${f.hideCta?"":`<div class="headerbar__btn">\n <a href="${f.data.ctaButton.url}" class="cta-link" aria-label="${f.data.ctaButton.label}">\n <span class="headerbar__btn--text">${f.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${r.rocket}</span>\n </a>\n </div>`}\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${f.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${f.ui("mainNav")}">\n ${f.data.mainNavigation.sort((n,e)=>n.order-e.order).map(n=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${n.url}"${n.target?` target="${n.target}"`:""} data-nav-id="${n.id}">${n.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${f.ui("homepage")}" class="headbar__pageLogo--animation${f.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${f.isLarge?`<div class="headbar__claim headbar__claim--large">${f.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${f.showBackLink&&f.backUrl?`<a href="${f.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${r.arrowLeft}</span>\n <span class="headbar__back-text">${f.backLabel}</span>\n </a>`:""}\n ${f.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${f.ui("colorMode")}" title="${f.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${r.sun}</span>\n <span class="headbar__color-mode-moon">${r.moon}</span>\n </button>`}\n ${!f.hideLang&&f.availableLanguages.length>1?`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${f.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${f.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${r.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.availableLanguages.map(n=>`<button class="headbar__lang-option${n.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${n.code===f.currentLang}" data-lang="${n.code}">\n ${n.label}\n </button>`).join("")}\n </div>\n </div>`:""}\n ${f.hideLogin?"":f.isAuth?`<button class="user-avatar-btn" aria-label="${f.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${f.userAvatar}" alt="${f.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${f.ui("login")}">\n <span class="headbar__login-text">${f.ui("login")}</span>\n <span class="headbar__login-icon">${r["circle-user-round"]}</span>\n </button>`}\n </div>\n </header>\n\n <div class="overlay" aria-hidden="true"></div>\n\n \x3c!-- Burger Drawer --\x3e\n <nav class="drawer drawer--left" role="dialog" aria-label="${f.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${f.burgerItemsHtml}</div>\n </nav>\n\n ${f.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${f.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${f.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${f.userName}</span>\n </div>\n <div class="drawer__nav">${f.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(_),this.attachEvents()}attachEvents(){this.shadow.querySelector(".headbar__color-mode")?.addEventListener("click",()=>this.toggleColorMode()),this.shadow.querySelector(".burger-btn")?.addEventListener("click",()=>this.toggleBurger()),this.shadow.querySelector(".headbar__back-link")?.addEventListener("click",n=>{const e=n.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||n.preventDefault()}),this.shadow.querySelector(".overlay")?.addEventListener("click",()=>{this.toggleBurger(!1),this.toggleUserMenu(!1)}),this.shadow.querySelector(".user-avatar-btn")?.addEventListener("click",()=>this.toggleUserMenu()),this.shadow.querySelector(".headbar__login")?.addEventListener("click",()=>{this.emit("navigation-click",{item:{id:"login",label:"Anmelden",url:"/login",order:0}})}),this.shadow.querySelector(".cta-link")?.addEventListener("click",n=>this.handleCtaClick(n));for(const n of this.shadow.querySelectorAll(".headbar__menu-link"))n.addEventListener("click",e=>{const t=this.data.mainNavigation.find(e=>e.id===n.getAttribute("data-nav-id"));t&&this.handleNavClick(t,e)});for(const n of this.shadow.querySelectorAll("[data-burger-id]"))n.addEventListener("click",e=>{const t=this.data.burgerMenu.find(e=>e.id===n.getAttribute("data-burger-id"));t&&(t.expandable||t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll("[data-user-id]"))n.addEventListener("click",e=>{if("logout"===n.getAttribute("data-action"))return void this.handleLogout();const t=this.data.userMenu.items.find(e=>e.id===n.getAttribute("data-user-id"));t&&(t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):t.disabled||this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll(".drawer__child"))n.addEventListener("click",e=>{const t=n.getAttribute("data-nav-id");if(t)for(const n of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=n.children?.find(n=>n.id===t);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const n of this.shadow.querySelectorAll(".headbar__lang-option"))n.addEventListener("click",()=>{const e=n.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}l.apiCache=new Map,l.pendingFetches=new Map,customElements.define("startnext-header",l);const d=`\n ${t}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 24px 40px;\n text-align: center;\n }\n\n /* ── Sections ── */\n .footer__part + .footer__part {\n margin-top: 40px;\n }\n\n .footer__part--sm + .footer__part--sm {\n margin-top: 20px;\n }\n\n /* ── Title ── */\n .footer__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 24px;\n color: var(--footer-text, #FFFFFF);\n }\n\n /* ── Social ── */\n .footer__social {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .footer__social-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n color: var(--footer-text, #FFFFFF);\n transition: transform 0.3s ease;\n }\n\n .footer__social-link:hover {\n animation: logoScale 0.5s linear 1;\n }\n\n .footer__social-link:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n @keyframes logoScale {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n @media (min-width: 576px) {\n .footer__social {\n gap: 24px;\n }\n }\n\n /* ── Stats ── */\n .footer__stats {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 16px 48px;\n }\n\n .footer__stat-item {\n text-align: center;\n }\n\n .footer__stat-value {\n display: block;\n font-size: 32px;\n font-weight: 800;\n line-height: 1;\n }\n\n .footer__stat-caption {\n display: block;\n font-size: 13px;\n margin-top: 8px;\n opacity: 0.8;\n }\n\n /* ── Navigation columns ── */\n .footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n text-align: left;\n }\n\n .footer__nav-title {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__nav {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.8;\n }\n\n .footer__nav a {\n font-size: 15px;\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__nav a:hover {\n opacity: 0.7;\n }\n\n .footer__nav a:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n /* ── B Corp ── */\n .footer__bcorp {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__bcorp-badge {\n flex-shrink: 0;\n width: 80px;\n height: auto;\n }\n\n .footer__bcorp-badge svg {\n width: 80px;\n height: auto;\n display: block;\n }\n\n .footer__bcorp-label {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 4px;\n }\n\n .footer__bcorp-text {\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.85;\n }\n\n .footer__bcorp-line {\n width: 100%;\n max-width: 180px;\n height: 3px;\n background: var(--footer-text, #FFFFFF);\n margin-top: 12px;\n }\n\n /* ── Funding notice ── */\n .footer__funding {\n text-align: left;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .footer__funding-title {\n font-size: 15px;\n font-weight: 700;\n margin-bottom: 8px;\n }\n\n .footer__funding-text {\n font-size: 14px;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* ── Payments ── */\n .footer__payments-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .footer__payments {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px 40px;\n }\n\n .footer__payment {\n font-size: 15px;\n opacity: 0.85;\n }\n\n /* ── Logo ── */\n .footer__logo {\n display: inline-flex;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__logo:hover {\n opacity: 0.8;\n }\n\n .footer__logo:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n /* ── Claim ── */\n .footer__claim {\n font-size: 20px;\n font-weight: 600;\n }\n\n /* ── Dimmed section (legal + copyright) ── */\n .footer__dim {\n opacity: 0.5;\n }\n\n .footer__dim a {\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__dim a:hover {\n opacity: 0.7;\n }\n\n .footer__legal {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 4px 20px;\n font-size: 14px;\n margin-bottom: 8px;\n }\n\n .footer__copyright {\n font-size: 14px;\n }\n\n /* ── Responsive ── */\n @media (max-width: 767px) {\n .footer__columns {\n grid-template-columns: 1fr 1fr;\n gap: 32px 24px;\n }\n\n .footer__bcorp {\n grid-column: 1 / -1;\n justify-content: center;\n }\n\n .footer__stat-value {\n font-size: 26px;\n }\n\n .footer__funding {\n text-align: center;\n }\n }\n\n @media (max-width: 479px) {\n .footer {\n padding: 40px 16px 32px;\n }\n\n .footer__columns {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .footer__bcorp {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .footer__bcorp-line {\n margin-left: auto;\n margin-right: auto;\n }\n\n .footer__stats {\n flex-direction: column;\n gap: 24px;\n }\n }\n`;class h extends n{constructor(){super(...arguments),this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(n){this.isConnected&&("lang-sync"!==n?(this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==n&&"api-url"!==n||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=n=>{this.setAttribute("lang",n.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const n=h.apiCache.get(this.currentLang);return n||(this.currentLang,{socialTitle:"",social:[],statsTitle:"",stats:[],columns:[],bcorp:{label:"",description:""},funding:{title:"",text:""},payments:{title:"",methods:[]},claim:"",legalLinks:[],copyright:"",theme:{"--footer-bg":"#304b50","--footer-text":"#FFFFFF","--footer-link-hover":"#06E481","--footer-border":"rgba(255, 255, 255, 0.15)"}})}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(h.apiCache.has(e))return;if(h.pendingFetches.has(e))return await h.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&h.apiCache.has(e)&&(this.data=h.apiCache.get(e),this.render(),this.renderLightDomNav()));const t=(async()=>{const t=await fetch(`${n}/api/footer?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};h.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.render(),this.renderLightDomNav())})();h.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextFooter] API fetch failed, using fallback data",n)}finally{h.pendingFetches.delete(e)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";for(const e of this.data.columns){const t=document.createElement("div");t.setAttribute("data-section",e.title.toLowerCase());for(const n of e.links){const e=document.createElement("a");e.href=n.url,e.textContent=n.label,t.appendChild(e)}n.appendChild(t)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const n of this.data.legalLinks){const t=document.createElement("a");t.href=n.url,t.textContent=n.label,e.appendChild(t)}n.appendChild(e),this.appendChild(n)}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const n=document.createElement("div");var e;n.innerHTML=`\n <footer class="footer" role="contentinfo">\n \x3c!-- Social --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${(e=this.data).socialTitle}</h3>\n <div class="footer__social" aria-label="Soziale Medien">\n ${e.social.map(n=>`\n <a href="${n.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${n.platform}">\n ${o(n.platform,32)}\n </a>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Stats --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${e.statsTitle}</h3>\n <div class="footer__stats">\n ${e.stats.map(n=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${n.value}</span>\n <span class="footer__stat-caption">${n.caption}</span>\n </div>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Navigation columns + B Corp --\x3e\n <div class="footer__part">\n <div class="footer__columns">\n ${e.columns.map(n=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${n.title}</h4>\n <ul class="footer__nav">\n ${n.links.map(n=>`<li><a href="${n.url}" class="footer__link">${n.label}</a></li>`).join("")}\n </ul>\n </div>\n `).join("")}\n <div class="footer__bcorp">\n <div class="footer__bcorp-badge"><svg viewBox="0 0 120 160" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="116" height="156" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>\n <text x="60" y="55" text-anchor="middle" font-size="50" font-weight="800" fill="currentColor">B</text>\n <line x1="20" y1="80" x2="100" y2="80" stroke="currentColor" stroke-width="2"/>\n <text x="60" y="105" text-anchor="middle" font-size="13" font-weight="600" fill="currentColor">Corporation</text>\n</svg></div>\n <div>\n <div class="footer__bcorp-label">${e.bcorp.label}</div>\n <div class="footer__bcorp-text">${e.bcorp.description}</div>\n <div class="footer__bcorp-line"></div>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Funding notice --\x3e\n <div class="footer__part">\n <div class="footer__funding">\n <div class="footer__funding-title">${e.funding.title}</div>\n <div class="footer__funding-text">${e.funding.text}</div>\n </div>\n </div>\n\n \x3c!-- Payment methods --\x3e\n <div class="footer__part">\n <div class="footer__payments-title">${e.payments.title}</div>\n <div class="footer__payments">\n ${e.payments.methods.map(n=>`<span class="footer__payment">${n}</span>`).join("")}\n </div>\n </div>\n\n \x3c!-- Logo --\x3e\n <div class="footer__part footer__part--sm">\n <a href="/" aria-label="Startnext Homepage" class="footer__logo">\n ${o("startnext-s",64)}\n </a>\n </div>\n\n \x3c!-- Claim --\x3e\n <div class="footer__part footer__part--sm">\n <div class="footer__claim">${e.claim}</div>\n </div>\n\n \x3c!-- Legal + Copyright --\x3e\n <div class="footer__part footer__dim">\n <div class="footer__legal">\n ${e.legalLinks.map(n=>`<a href="${n.url}" class="footer__link">${n.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(n),this.attachEvents()}attachEvents(){for(const n of this.shadow.querySelectorAll(".footer__link"))n.addEventListener("click",e=>{const t=n.getAttribute("href")||"",a=n.textContent?.trim()||"";this.emit("navigation-click",{item:{url:t,label:a}})||e.preventDefault()})}}h.observedAttributes=["lang","api-url","lang-sync"],h.apiCache=new Map,h.pendingFetches=new Map,customElements.define("startnext-footer",h);export{h as StartnextFooter,l as StartnextHeader};
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-header","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-header",!1)}ui(n){return function(n,t){return e[n]?.[t]||e[n]?.de||n}(n,this.currentLang)}connectedCallback(){this._skipCallback=!0,this.upgradeBoolProps(["large-animation","authenticated","hide-color-mode","hide-lang","hide-login","hide-cta","show-back-link"]),this._skipCallback=!1,this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),this.restoreScrollState(),window.addEventListener("scroll",this.handleScrollBound,{passive:!0}),window.addEventListener("resize",this.handleResizeBound,{passive:!0}),document.addEventListener("keydown",this.handleKeydownBound),document.addEventListener("click",this.handleDocClickBound),this.schedulePostRender(),this.loadApiData()}getHeaderData(){const n=l.apiCache.get(this.currentLang);return n||function(n="de"){return{mainNavigation:[],burgerMenu:[],userMenu:{user:{name:"",avatar:""},items:[]},ctaButton:{label:"",url:"",style:"primary"},logo:{src:"",alt:"Startnext",href:"/"},theme:{"--header-bg":"transparent","--header-bg-scrolled":"#FFFFFF","--header-text":"#FFFFFF","--header-text-scrolled":"#304b50","--header-height":"64px","--header-padding":"0 16px","--btn-primary-bg":"#06E481","--btn-primary-text":"#FFFFFF","--btn-primary-hover":"#05C972","--burger-icon-color":"#FFFFFF","--drawer-bg":"#FFFFFF","--drawer-width":"320px","--drawer-shadow":"4px 0 12px rgba(0,0,0,0.1)","--font-size-base":"16px","--font-size-small":"14px","--primary-color":"#06E481","--text-primary":"#304b50","--text-secondary":"#6B7280","--text-disabled":"#D1D5DB","--border-color":"#E5E7EB","--hover-bg":"#F3F4F6","--transition-speed":"0.3s","--drawer-transition":"0.4s cubic-bezier(0.4, 0, 0.2, 1)","--header-z-index":"1000","--drawer-z-index":"1100","--overlay-z-index":"1050"},language:n,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(l.apiCache.has(e))return;if(l.pendingFetches.has(e))return await l.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&l.apiCache.has(e)&&(this.data=l.apiCache.get(e),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()));const t=(async()=>{const t=await fetch(`${n}/api/header?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};l.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender())})();l.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextHeader] API fetch failed, using fallback data",n)}finally{l.pendingFetches.delete(e)}}disconnectedCallback(){window.removeEventListener("scroll",this.handleScrollBound),window.removeEventListener("resize",this.handleResizeBound),document.removeEventListener("keydown",this.handleKeydownBound),document.removeEventListener("click",this.handleDocClickBound),null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.lottieAnim?.destroy(),this.querySelector("[data-crawler-nav]")?.remove()}attributeChangedCallback(n){!this._skipCallback&&this.isConnected&&("color-mode"===n&&this.initColorMode(),this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==n&&"api-url"!==n||this.loadApiData())}restoreScrollState(){const n=this.shadow.querySelector(".headbar");n&&(n.classList.toggle("headbar--tight",this.isTight),n.classList.toggle("headbar--slide-up",this.isSlideUp),n.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight))}schedulePostRender(){null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.pendingRaf=requestAnimationFrame(()=>{this.pendingRaf=null,this.shadow.querySelector(".headerbar__btn")?.classList.add("headerbar__btn--loaded"),this.initLottie()})}async initLottie(){const n=this.shadow.querySelector("#page-logo-animation");if(!n)return;const e=this.getAttribute("api-url");if(!e)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const{default:t}=await import("./lottie_light-BkFx3xP_.js").then(function(n){return n.l}),a=this.isLightHeader?"logo-white.json":"logo-blue.json";this.lottieAnim=t.loadAnimation({container:n,renderer:"svg",loop:!1,autoplay:!1,path:`${e}/assets/lottie/${a}`}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const n=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let t=!1;const a=n>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),t=!0);const i=n-this.lastScrollY,r=document.querySelector("main, [data-content], .page-content"),o=r?.getBoundingClientRect().top??1/0,s=this.getBoolAttr("large-animation",!1);i>8&&o<-90&&n>(s?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),t=!0):i<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),t=!0),Math.abs(i)>8&&(this.lastScrollY=n),this.updateLogoAnimation(n),t&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(n){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,t=e+400,a=Math.max(0,Math.min(1,(n-e)/(t-e))),i=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const r=this.shadow.querySelector(".headbar__pageLogo--animation-large"),o=this.shadow.querySelector(".headbar__claim--large");if(!r)return;const s=window.innerWidth,l=s<768?-110:s<1100?-120:-140,d=s<768?.65:.5;o&&(o.style.opacity=String(1-Math.min(1,a/.05)));const h=Math.max(0,Math.min(1,(a-.05)/.25)),c=1-Math.pow(1-h,4);r.style.transform=`translateY(${c*l}px) scale(${1+c*(d-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(n){"Escape"===n.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(n){if(!this.langMenuOpen)return;const e=n.composedPath(),t=this.shadow.querySelector(".headbar__lang");t&&!e.includes(t)&&this.toggleLangMenu(!1)}toggleBurger(n){this.burgerOpen=n??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(n){this.userMenuOpen=n??!this.userMenuOpen,this.updateDrawerStates(),this.emit("user-menu-toggle",{open:this.userMenuOpen}),this.userMenuOpen&&this.trapFocus("user")}updateDrawerStates(){this.shadow.querySelector(".overlay")?.classList.toggle("open",this.burgerOpen||this.userMenuOpen),this.shadow.querySelector(".drawer--left")?.classList.toggle("open",this.burgerOpen),this.shadow.querySelector(".drawer--right")?.classList.toggle("open",this.userMenuOpen),document.body.style.overflow=this.burgerOpen||this.userMenuOpen?"hidden":""}trapFocus(n){const e=this.shadow.querySelector("burger"===n?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(n,e){this.emit("navigation-click",{item:n})||e.preventDefault()}handleCtaClick(n){this.emit("cta-click",{url:this.data.ctaButton.url})||n.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(n){this.emit("language-change",{language:n})}toggleLangMenu(n){this.langMenuOpen=n??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),t=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),t?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(n){this.expandedSections.has(n)?this.expandedSections.delete(n):this.expandedSections.add(n),this.updateExpandStates()}updateExpandStates(){for(const n of this.shadow.querySelectorAll("[data-expand-id]")){const e=n.getAttribute("data-expand-id"),t=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",t),n.querySelector(".drawer__item-expand")?.classList.toggle("expanded",t),n.setAttribute("aria-expanded",String(t))}}initColorMode(){const n=document.documentElement,e=this.hasAttribute("color-mode");let t;t=e?this.getAttribute("color-mode"):n.classList.contains("dark")?"dark":(n.classList.contains("light"),"light"),e||(n.classList.remove("light","dark"),n.classList.add(t)),this._skipCallback=!0,this.setAttribute("color-mode",t),this.hasAttribute("light-header")||"dark"!==t||this.setAttribute("light-header",""),this._skipCallback=!1}toggleColorMode(){const n="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(n),this.emit("color-mode-change",{mode:n})}applyColorMode(n){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(n),this._skipCallback=!0,this.setAttribute("color-mode",n),"dark"===n?this.setAttribute("light-header",""):this.removeAttribute("light-header"),this._skipCallback=!1,this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";const e=e=>{const t=document.createElement("div");return t.setAttribute("data-section",e),n.appendChild(t),t},t=(n,e,t)=>{const a=document.createElement("a");a.href=e,a.textContent=t,n.appendChild(a)},a=e("main-navigation");for(const n of this.data.mainNavigation)t(a,n.url,n.label);t(a,this.data.ctaButton.url,this.data.ctaButton.label);const i=[];for(const n of this.data.burgerMenu)if("divider"!==n.type&&"logout"!==n.action&&n.url)if(n.children){const a=e(n.label.toLowerCase());t(a,n.url,n.label);for(const e of n.children)e.url&&t(a,e.url,e.label)}else n.small&&i.push(n);if(i.length){const n=e("legal");for(const e of i)t(n,e.url,e.label)}this.appendChild(n)}render(){const n=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,t=this.getBoolAttr("large-animation",!1),i=this.getBoolAttr("hide-color-mode",!1),o=this.getBoolAttr("hide-lang",!1),l=this.getBoolAttr("hide-login",!1),d=this.getBoolAttr("hide-cta",!1),h=this.getBoolAttr("show-back-link",!1),c=this.data.backLink?.url||"",g=this.data.backLink?.label||"",p=this.getAttribute("user-name")||this.data.userMenu.user.name,u=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar,b=this.requestedLanguages,m=b?this.data.availableLanguages.filter(n=>b.includes(n.code)):this.data.availableLanguages;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(a));const _=document.createElement("div");var f,x,v;_.innerHTML=`\n <header class="headbar${(f={isAuth:n,isLight:e,isLarge:t,hideColorMode:i,hideLang:o,hideLogin:l,hideCta:d,showBackLink:h,backUrl:c,backLabel:g,userName:p,userAvatar:u,data:this.data,availableLanguages:m,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,v=this.expandedSections,x.burgerMenu.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];n.highlighted&&e.push("drawer__item--highlighted"),n.small&&e.push("drawer__item--small");const t=n.expandable||n.children&&n.children.length>0,a=v.has(n.id),i=!n.highlighted&&!n.small&&!t&&n.url;let o=`<${n.url&&!t?"a":"button"} class="${e.join(" ")}"\n ${n.url&&!t?`href="${n.url}"${n.target?` target="${n.target}"`:""}`:""}\n ${t?`data-expand-id="${n.id}" aria-expanded="${a}"`:""}\n data-burger-id="${n.id}">\n ${n.label}\n ${t?`<span class="drawer__item-expand${a?" expanded":""}">${r.angleDownSmall}</span>`:""}\n ${i?`<span class="drawer__item-nav-arrow">${r.angleDown}</span>`:""}\n </${n.url&&!t?"a":"button"}>`;return n.children&&n.children.length>0&&(o+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),o}).join("")),userItemsHtml:s(this.data,this.expandedSections)}).isLight?" headbar--light":""}" role="banner">\n \x3c!-- Burger --\x3e\n <div class="headbar__left headbar__icon headbar__icon--clickable burger-btn"\n role="button" tabindex="0" aria-label="${f.ui("menuOpen")}" aria-expanded="false">\n ${r.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n ${f.hideCta?"":`<div class="headerbar__btn">\n <a href="${f.data.ctaButton.url}" class="cta-link" aria-label="${f.data.ctaButton.label}">\n <span class="headerbar__btn--text">${f.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${r.rocket}</span>\n </a>\n </div>`}\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${f.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${f.ui("mainNav")}">\n ${f.data.mainNavigation.sort((n,e)=>n.order-e.order).map(n=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${n.url}"${n.target?` target="${n.target}"`:""} data-nav-id="${n.id}">${n.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${f.ui("homepage")}" class="headbar__pageLogo--animation${f.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${f.isLarge?`<div class="headbar__claim headbar__claim--large">${f.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${f.showBackLink&&f.backUrl?`<a href="${f.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${r.arrowLeft}</span>\n <span class="headbar__back-text">${f.backLabel}</span>\n </a>`:""}\n ${f.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${f.ui("colorMode")}" title="${f.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${r.sun}</span>\n <span class="headbar__color-mode-moon">${r.moon}</span>\n </button>`}\n ${!f.hideLang&&f.availableLanguages.length>1?`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${f.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${f.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${r.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.availableLanguages.map(n=>`<button class="headbar__lang-option${n.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${n.code===f.currentLang}" data-lang="${n.code}">\n ${n.label}\n </button>`).join("")}\n </div>\n </div>`:""}\n ${f.hideLogin?"":f.isAuth?`<button class="user-avatar-btn" aria-label="${f.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${f.userAvatar}" alt="${f.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${f.ui("login")}">\n <span class="headbar__login-text">${f.ui("login")}</span>\n <span class="headbar__login-icon">${r["circle-user-round"]}</span>\n </button>`}\n </div>\n </header>\n\n <div class="overlay" aria-hidden="true"></div>\n\n \x3c!-- Burger Drawer --\x3e\n <nav class="drawer drawer--left" role="dialog" aria-label="${f.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${f.burgerItemsHtml}</div>\n </nav>\n\n ${f.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${f.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${f.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${f.userName}</span>\n </div>\n <div class="drawer__nav">${f.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(_),this.attachEvents()}attachEvents(){this.shadow.querySelector(".headbar__color-mode")?.addEventListener("click",()=>this.toggleColorMode()),this.shadow.querySelector(".burger-btn")?.addEventListener("click",()=>this.toggleBurger()),this.shadow.querySelector(".headbar__back-link")?.addEventListener("click",n=>{const e=n.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||n.preventDefault()}),this.shadow.querySelector(".overlay")?.addEventListener("click",()=>{this.toggleBurger(!1),this.toggleUserMenu(!1)}),this.shadow.querySelector(".user-avatar-btn")?.addEventListener("click",()=>this.toggleUserMenu()),this.shadow.querySelector(".headbar__login")?.addEventListener("click",()=>{this.emit("navigation-click",{item:{id:"login",label:"Anmelden",url:"/login",order:0}})}),this.shadow.querySelector(".cta-link")?.addEventListener("click",n=>this.handleCtaClick(n));for(const n of this.shadow.querySelectorAll(".headbar__menu-link"))n.addEventListener("click",e=>{const t=this.data.mainNavigation.find(e=>e.id===n.getAttribute("data-nav-id"));t&&this.handleNavClick(t,e)});for(const n of this.shadow.querySelectorAll("[data-burger-id]"))n.addEventListener("click",e=>{const t=this.data.burgerMenu.find(e=>e.id===n.getAttribute("data-burger-id"));t&&(t.expandable||t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll("[data-user-id]"))n.addEventListener("click",e=>{if("logout"===n.getAttribute("data-action"))return void this.handleLogout();const t=this.data.userMenu.items.find(e=>e.id===n.getAttribute("data-user-id"));t&&(t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):t.disabled||this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll(".drawer__child"))n.addEventListener("click",e=>{const t=n.getAttribute("data-nav-id");if(t)for(const n of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=n.children?.find(n=>n.id===t);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const n of this.shadow.querySelectorAll(".headbar__lang-option"))n.addEventListener("click",()=>{const e=n.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}l.apiCache=new Map,l.pendingFetches=new Map,customElements.define("startnext-header",l);const d=`\n ${t}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 24px 40px;\n text-align: center;\n }\n\n /* ── Sections ── */\n .footer__part + .footer__part {\n margin-top: 40px;\n }\n\n .footer__part--sm + .footer__part--sm {\n margin-top: 20px;\n }\n\n /* ── Title ── */\n .footer__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 24px;\n color: var(--footer-text, #FFFFFF);\n }\n\n /* ── Social ── */\n .footer__social {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .footer__social-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n color: var(--footer-text, #FFFFFF);\n transition: transform 0.3s ease;\n }\n\n .footer__social-link:hover {\n animation: logoScale 0.5s linear 1;\n }\n\n .footer__social-link:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n @keyframes logoScale {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n @media (min-width: 576px) {\n .footer__social {\n gap: 24px;\n }\n }\n\n /* ── Stats ── */\n .footer__stats {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 16px 48px;\n }\n\n .footer__stat-item {\n text-align: center;\n }\n\n .footer__stat-value {\n display: block;\n font-size: 32px;\n font-weight: 800;\n line-height: 1;\n }\n\n .footer__stat-caption {\n display: block;\n font-size: 13px;\n margin-top: 8px;\n opacity: 0.8;\n }\n\n /* ── Navigation columns ── */\n .footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n text-align: left;\n }\n\n .footer__nav-title {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__nav {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.8;\n }\n\n .footer__nav a {\n font-size: 15px;\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__nav a:hover {\n opacity: 0.7;\n }\n\n .footer__nav a:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n /* ── B Corp ── */\n .footer__bcorp {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__bcorp-badge {\n flex-shrink: 0;\n width: 80px;\n height: auto;\n }\n\n .footer__bcorp-badge svg {\n width: 80px;\n height: auto;\n display: block;\n }\n\n .footer__bcorp-label {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 4px;\n }\n\n .footer__bcorp-text {\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.85;\n }\n\n .footer__bcorp-line {\n width: 100%;\n max-width: 180px;\n height: 3px;\n background: var(--footer-text, #FFFFFF);\n margin-top: 12px;\n }\n\n /* ── Funding notice ── */\n .footer__funding {\n text-align: left;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .footer__funding-title {\n font-size: 15px;\n font-weight: 700;\n margin-bottom: 8px;\n }\n\n .footer__funding-text {\n font-size: 14px;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* ── Payments ── */\n .footer__payments-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .footer__payments {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px 40px;\n }\n\n .footer__payment {\n font-size: 15px;\n opacity: 0.85;\n }\n\n /* ── Logo ── */\n .footer__logo {\n display: inline-flex;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__logo:hover {\n opacity: 0.8;\n }\n\n .footer__logo:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n /* ── Claim ── */\n .footer__claim {\n font-size: 20px;\n font-weight: 600;\n }\n\n /* ── Dimmed section (legal + copyright) ── */\n .footer__dim {\n opacity: 0.5;\n }\n\n .footer__dim a {\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__dim a:hover {\n opacity: 0.7;\n }\n\n .footer__legal {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 4px 20px;\n font-size: 14px;\n margin-bottom: 8px;\n }\n\n .footer__copyright {\n font-size: 14px;\n }\n\n /* ── Responsive ── */\n @media (max-width: 767px) {\n .footer__columns {\n grid-template-columns: 1fr 1fr;\n gap: 32px 24px;\n }\n\n .footer__bcorp {\n grid-column: 1 / -1;\n justify-content: center;\n }\n\n .footer__stat-value {\n font-size: 26px;\n }\n\n .footer__funding {\n text-align: center;\n }\n }\n\n @media (max-width: 479px) {\n .footer {\n padding: 40px 16px 32px;\n }\n\n .footer__columns {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .footer__bcorp {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .footer__bcorp-line {\n margin-left: auto;\n margin-right: auto;\n }\n\n .footer__stats {\n flex-direction: column;\n gap: 24px;\n }\n }\n`;class h extends n{constructor(){super(...arguments),this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(n){this.isConnected&&("lang-sync"!==n?(this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==n&&"api-url"!==n||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=n=>{this.setAttribute("lang",n.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const n=h.apiCache.get(this.currentLang);return n||(this.currentLang,{socialTitle:"",social:[],statsTitle:"",stats:[],columns:[],bcorp:{label:"",description:""},funding:{title:"",text:""},payments:{title:"",methods:[]},claim:"",legalLinks:[],copyright:"",theme:{"--footer-bg":"#304b50","--footer-text":"#FFFFFF","--footer-link-hover":"#06E481","--footer-border":"rgba(255, 255, 255, 0.15)"}})}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(h.apiCache.has(e))return;if(h.pendingFetches.has(e))return await h.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&h.apiCache.has(e)&&(this.data=h.apiCache.get(e),this.render(),this.renderLightDomNav()));const t=(async()=>{const t=await fetch(`${n}/api/footer?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};h.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.render(),this.renderLightDomNav())})();h.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextFooter] API fetch failed, using fallback data",n)}finally{h.pendingFetches.delete(e)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";for(const e of this.data.columns){const t=document.createElement("div");t.setAttribute("data-section",e.title.toLowerCase());for(const n of e.links){const e=document.createElement("a");e.href=n.url,e.textContent=n.label,t.appendChild(e)}n.appendChild(t)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const n of this.data.legalLinks){const t=document.createElement("a");t.href=n.url,t.textContent=n.label,e.appendChild(t)}n.appendChild(e),this.appendChild(n)}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const n=document.createElement("div");var e;n.innerHTML=`\n <footer class="footer" role="contentinfo">\n \x3c!-- Social --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${(e=this.data).socialTitle}</h3>\n <div class="footer__social" aria-label="Soziale Medien">\n ${e.social.map(n=>`\n <a href="${n.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${n.platform}">\n ${o(n.platform,32)}\n </a>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Stats --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${e.statsTitle}</h3>\n <div class="footer__stats">\n ${e.stats.map(n=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${n.value}</span>\n <span class="footer__stat-caption">${n.caption}</span>\n </div>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Navigation columns + B Corp --\x3e\n <div class="footer__part">\n <div class="footer__columns">\n ${e.columns.map(n=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${n.title}</h4>\n <ul class="footer__nav">\n ${n.links.map(n=>`<li><a href="${n.url}" class="footer__link">${n.label}</a></li>`).join("")}\n </ul>\n </div>\n `).join("")}\n <div class="footer__bcorp">\n <div class="footer__bcorp-badge"><svg viewBox="0 0 120 160" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="116" height="156" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>\n <text x="60" y="55" text-anchor="middle" font-size="50" font-weight="800" fill="currentColor">B</text>\n <line x1="20" y1="80" x2="100" y2="80" stroke="currentColor" stroke-width="2"/>\n <text x="60" y="105" text-anchor="middle" font-size="13" font-weight="600" fill="currentColor">Corporation</text>\n</svg></div>\n <div>\n <div class="footer__bcorp-label">${e.bcorp.label}</div>\n <div class="footer__bcorp-text">${e.bcorp.description}</div>\n <div class="footer__bcorp-line"></div>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Funding notice --\x3e\n <div class="footer__part">\n <div class="footer__funding">\n <div class="footer__funding-title">${e.funding.title}</div>\n <div class="footer__funding-text">${e.funding.text}</div>\n </div>\n </div>\n\n \x3c!-- Payment methods --\x3e\n <div class="footer__part">\n <div class="footer__payments-title">${e.payments.title}</div>\n <div class="footer__payments">\n ${e.payments.methods.map(n=>`<span class="footer__payment">${n}</span>`).join("")}\n </div>\n </div>\n\n \x3c!-- Logo --\x3e\n <div class="footer__part footer__part--sm">\n <a href="/" aria-label="Startnext Homepage" class="footer__logo">\n ${o("startnext-s",64)}\n </a>\n </div>\n\n \x3c!-- Claim --\x3e\n <div class="footer__part footer__part--sm">\n <div class="footer__claim">${e.claim}</div>\n </div>\n\n \x3c!-- Legal + Copyright --\x3e\n <div class="footer__part footer__dim">\n <div class="footer__legal">\n ${e.legalLinks.map(n=>`<a href="${n.url}" class="footer__link">${n.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(n),this.attachEvents()}attachEvents(){for(const n of this.shadow.querySelectorAll(".footer__link"))n.addEventListener("click",e=>{const t=n.getAttribute("href")||"",a=n.textContent?.trim()||"";this.emit("navigation-click",{item:{url:t,label:a}})||e.preventDefault()})}}h.observedAttributes=["lang","api-url","lang-sync"],h.apiCache=new Map,h.pendingFetches=new Map,customElements.define("startnext-footer",h);export{h as StartnextFooter,l as StartnextHeader};