@startnext/chrome 0.4.5 → 0.4.6

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 (6) hide show
  1. package/README.md +26 -8
  2. package/dist/index.d.ts +7 -0
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/index.umd.js +1 -1
  6. package/package.json +9 -9
package/README.md CHANGED
@@ -40,16 +40,20 @@ import '@startnext/chrome';
40
40
 
41
41
  | Attribute | Type | Default | Description |
42
42
  |---|---|---|---|
43
+ | `api-url` | `string` | - | URL des SCS API (z. B. `https://scs-api.vercel.app` oder relativ `/scs-api`). Ohne Attribut: statische Default-Daten |
43
44
  | `lang` | `string` | `'de'` | Aktive Sprache (beliebiger 2-Buchstaben-Code, z. B. `'de'`, `'en'`, `'fr'`) |
44
- | `languages` | `string` (JSON) | - | JSON-Array von Sprachcodes, auf die der Language-Switcher eingeschränkt wird, z. B. `'["de","en"]'`. Ohne Attribut: alle vom API gelieferten Sprachen. Der Switcher wird automatisch ausgeblendet, wenn nur 1 Sprache verfügbar ist |
45
- | `light` | `boolean` | `false` | Heller Header (weiße Schrift/Icons über dunklem Hero, wechselt automatisch zu dunkel beim Scrollen). Standard ohne Attribut: dunkler Header |
46
- | `large-animation` | `boolean` | `false` | Große Lottie-Logo-Animation mit Claim und horizontaler Navigation |
45
+ | `languages` | `string` | - | Kommagetrennte Liste von Sprachcodes, auf die der Language-Switcher eingeschränkt wird, z. B. `'de,en'`. Ohne Attribut: alle vom API gelieferten Sprachen. Der Switcher wird automatisch ausgeblendet, wenn nach dem Filtern nur noch 1 Sprache übrig bleibt |
46
+ | `light` | `boolean` | `false` | Heller Header (weiße Schrift/Icons über dunklem Hero, wechselt automatisch zu dunkel beim Scrollen) |
47
+ | `large-animation` | `boolean` | `false` | Große Lottie-Logo-Animation mit Claim und horizontaler Navigation (z. B. für die Startseite). Erfordert `api-url` |
47
48
  | `authenticated` | `boolean` | `false` | Zeigt User-Avatar statt "Anmelden" Button |
48
49
  | `user-name` | `string` | - | Name des eingeloggten Users |
49
50
  | `user-avatar` | `string` | - | Avatar-URL des Users |
50
- | `color-mode` | `'light' \| 'dark'` | auto | Farbmodus. Ohne Attribut: Header scannt `<html>` nach Klasse `dark`/`light`. Ohne Klasse: Default `dark` (dunkle Seite, heller Header). Toggle-Button wechselt `<html>`-Klasse und Header-Darstellung |
51
+ | `color-mode` | `'light' \| 'dark'` | auto | Farbmodus. Ohne Attribut: Header scannt `<html>` nach Klasse `dark`/`light`. Ohne Klasse: Default `dark`. Toggle-Button wechselt `<html>`-Klasse und Header-Darstellung |
51
52
  | `hide-color-mode` | `boolean` | `false` | Versteckt den Color-Mode Toggle-Button |
52
53
  | `hide-lang` | `boolean` | `false` | Versteckt den Language-Switcher komplett |
54
+ | `hide-login` | `boolean` | `false` | Versteckt den "Anmelden" Button (auch wenn nicht eingeloggt) |
55
+ | `hide-cta` | `boolean` | `false` | Versteckt den CTA-Button ("Projekt starten") |
56
+ | `show-back-link` | `boolean` | `false` | Zeigt den aus der API gelieferten "Zurück"-Link links neben dem Logo. Nur sichtbar wenn in Notion konfiguriert |
53
57
 
54
58
  **Events:**
55
59
 
@@ -70,20 +74,33 @@ import '@startnext/chrome';
70
74
  <!-- Default: dunkler Header (dunkle Schrift für helle Seiten) -->
71
75
  <startnext-header></startnext-header>
72
76
 
77
+ <!-- Mit Live-Daten vom SCS API -->
78
+ <startnext-header api-url="https://scs-api.vercel.app" lang="de"></startnext-header>
79
+
80
+ <!-- Sprachauswahl auf DE und EN einschränken -->
81
+ <startnext-header api-url="/scs-api" lang="de" languages="de,en"></startnext-header>
82
+
73
83
  <!-- Heller Header (weiße Schrift über dunklem Hero) -->
74
84
  <startnext-header light></startnext-header>
75
85
 
76
86
  <!-- Heller Header + große Animation (z.B. Startseite) -->
77
- <startnext-header light large-animation></startnext-header>
87
+ <startnext-header api-url="/scs-api" light large-animation></startnext-header>
78
88
 
79
89
  <!-- Heller Header + groß + eingeloggt -->
80
90
  <startnext-header
91
+ api-url="/scs-api"
81
92
  light
82
93
  large-animation
83
94
  authenticated
84
95
  user-name="Elias Groesel"
85
96
  user-avatar="https://..."
86
97
  ></startnext-header>
98
+
99
+ <!-- Zurück-Link anzeigen (aus Notion/API, z.B. auf Unterseiten) -->
100
+ <startnext-header api-url="/scs-api" show-back-link></startnext-header>
101
+
102
+ <!-- Nur DE, kein Login, kein CTA -->
103
+ <startnext-header languages="de" hide-login hide-cta></startnext-header>
87
104
  ```
88
105
 
89
106
  ```html
@@ -126,7 +143,7 @@ header.addEventListener('color-mode-change', (e) => {
126
143
  |---|---|---|---|
127
144
  | `lang` | `string` | `'de'` | Aktive Sprache (beliebiger 2-Buchstaben-Code) |
128
145
  | `api-url` | `string` | - | URL des SCS API. Ohne Attribut: statische Default-Daten |
129
- | `lang-sync` | `boolean` | `true` | Synchronisiert `lang` automatisch beim `language-change`-Event des Headers |
146
+ | `lang-sync` | `boolean` | `true` | Synchronisiert `lang` automatisch beim `language-change`-Event des Headers. Mit `lang-sync="false"` deaktivieren |
130
147
 
131
148
  **Events:**
132
149
 
@@ -191,7 +208,7 @@ pnpm --filter @startnext/chrome build
191
208
  pnpm --filter @startnext/chrome lint
192
209
  ```
193
210
 
194
- Demo-Seite öffnen: `packages/sn-chrome-web-component/examples/vanilla/index.html`
211
+ Demo-Seite öffnen: `packages/scs-web-component/demo/index.html`
195
212
 
196
213
  ## Architecture
197
214
 
@@ -213,7 +230,8 @@ src/
213
230
  │ ├── footer.css.ts # CSS als Template-Literal-Export
214
231
  │ └── footer.template.ts # Render-Funktion (HTML-String)
215
232
  ├── data/
216
- │ └── mockData.ts # Mock-Daten
233
+ │ ├── defaults.ts # Statische Default-Daten (ohne API)
234
+ │ └── uiStrings.ts # ARIA-Labels / UI-Strings (de/en)
217
235
  ├── types/
218
236
  │ └── index.ts # Alle TypeScript-Interfaces
219
237
  └── index.ts # Barrel-Export
package/dist/index.d.ts CHANGED
@@ -3,6 +3,7 @@ export { StartnextFooter } from './components/footer/StartnextFooter.js';
3
3
  export type { NavigationItem, HeaderData, FooterData, FooterColumn, SocialLink, UserInfo, UserMenu, LogoConfig, CtaButton, LanguageOption, ThemeVariables, } from './types/index.js';
4
4
  interface StartnextHeaderAttributes {
5
5
  lang?: string;
6
+ languages?: string;
6
7
  light?: boolean | string;
7
8
  'large-animation'?: boolean | string;
8
9
  authenticated?: boolean | string;
@@ -11,6 +12,10 @@ interface StartnextHeaderAttributes {
11
12
  'color-mode'?: 'light' | 'dark' | string;
12
13
  'hide-color-mode'?: boolean | string;
13
14
  'hide-lang'?: boolean | string;
15
+ 'hide-login'?: boolean | string;
16
+ 'hide-cta'?: boolean | string;
17
+ 'show-back-link'?: boolean | string;
18
+ 'api-url'?: string;
14
19
  children?: unknown;
15
20
  ref?: unknown;
16
21
  class?: string;
@@ -21,6 +26,8 @@ interface StartnextHeaderAttributes {
21
26
  }
22
27
  interface StartnextFooterAttributes {
23
28
  lang?: string;
29
+ 'api-url'?: string;
30
+ 'lang-sync'?: boolean | string;
24
31
  children?: unknown;
25
32
  ref?: unknown;
26
33
  class?: string;
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AACzE,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAG1B,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACzC,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAGD,OAAO,QAAQ,OAAO,CAAC;IAErB,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IAEb,UAAU,GAAG,CAAC;QACZ,UAAU,iBAAiB;YACzB,kBAAkB,EAAE,yBAAyB,CAAC;YAC9C,kBAAkB,EAAE,yBAAyB,CAAC;SAC/C;KACF;CACF"}
package/dist/index.js CHANGED
@@ -4,4 +4,4 @@ class n extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow(
4
4
  *
5
5
  * This source code is licensed under the ISC license.
6
6
  * See the LICENSE file in the root directory of this source tree.
7
- */;function i(n,e){return n.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const r={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:i('\n<svg\n class="lucide lucide-x"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 6 6 18" />\n <path d="m6 6 12 12" />\n</svg>\n',24),globe:i('\n<svg\n class="lucide lucide-globe"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="10" />\n <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />\n <path d="M2 12h20" />\n</svg>\n',16),search:i('\n<svg\n class="lucide lucide-search"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m21 21-4.34-4.34" />\n <circle cx="11" cy="11" r="8" />\n</svg>\n',20),"circle-user-round":i('\n<svg\n class="lucide lucide-circle-user-round"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 20a6 6 0 0 0-12 0" />\n <circle cx="12" cy="10" r="4" />\n <circle cx="12" cy="12" r="10" />\n</svg>\n',20),mail:i('\n<svg\n class="lucide lucide-mail"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />\n <rect x="2" y="4" width="20" height="16" rx="2" />\n</svg>\n',20),"list-checks":i('\n<svg\n class="lucide lucide-list-checks"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M13 5h8" />\n <path d="M13 12h8" />\n <path d="M13 19h8" />\n <path d="m3 17 2 2 4-4" />\n <path d="m3 7 2 2 4-4" />\n</svg>\n',20),heart:i('\n<svg\n class="lucide lucide-heart"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />\n</svg>\n',20),rocket:i('\n<svg\n class="lucide lucide-rocket"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />\n <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />\n <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />\n <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />\n</svg>\n',20),settings:i('\n<svg\n class="lucide lucide-settings"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />\n <circle cx="12" cy="12" r="3" />\n</svg>\n',20),"log-out":i('\n<svg\n class="lucide lucide-log-out"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m16 17 5-5-5-5" />\n <path d="M21 12H9" />\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />\n</svg>\n',20),sun:i('\n<svg\n class="lucide lucide-sun"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="4" />\n <path d="M12 2v2" />\n <path d="M12 20v2" />\n <path d="m4.93 4.93 1.41 1.41" />\n <path d="m17.66 17.66 1.41 1.41" />\n <path d="M2 12h2" />\n <path d="M20 12h2" />\n <path d="m6.34 17.66-1.41 1.41" />\n <path d="m19.07 4.93-1.41 1.41" />\n</svg>\n',20),moon:i('\n<svg\n class="lucide lucide-moon"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />\n</svg>\n',20),arrowLeft:i('\n<svg\n class="lucide lucide-arrow-left"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m12 19-7-7 7-7" />\n <path d="M19 12H5" />\n</svg>\n',16),facebook:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>',twitter:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',instagram:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>',linkedin:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>',youtube:'<svg width="20" height="20" viewBox="0 0 1792 1280" fill="currentColor"><path d="M711 872l484-250l-484-253v503zM896 10q168 0 324.5 4.5T1450 24l73 4q1 0 17 1.5t23 3t23.5 4.5t28.5 8t28 13t31 19.5t29 26.5q6 6 15.5 18.5t29 58.5t26.5 101q8 64 12.5 136.5T1792 532v176q1 145-18 290q-7 55-25 99.5t-32 61.5l-14 17q-14 15-29 26.5t-31 19t-28 12.5t-28.5 8t-24 4.5t-23 3t-16.5 1.5q-251 19-627 19q-207-2-359.5-6.5T336 1256l-49-4l-36-4q-36-5-54.5-10t-51-21t-56.5-41q-6-6-15.5-18.5t-29-58.5T18 998q-8-64-12.5-136.5T0 748V572q-1-145 18-290q7-55 25-99.5T75 121l14-17q14-15 29-26.5T149 58t28-13t28.5-8t23.5-4.5t23-3t17-1.5q251-18 627-18z"/></svg>',tiktok:'<svg width="20" height="20" viewBox="4 4 24 28" fill="currentColor"><path d="m28.029852 15.355c-.229338.02229-.459584.03396-.69.035-2.527359.000353-4.884553-1.273562-6.269-3.388v11.537c0 7.597274-9.18476 11.400626-14.5561926 6.029193-5.371433-5.371433-1.568081-14.556193 6.0291926-14.556193.178 0 .352.016.527.027v4.202c-.175-.021-.347-.053-.527-.053-5.8026636 0-5.8026636 8.704 0 8.704 2.404 0 4.527-1.894 4.527-4.298l.042-19.594h4.02c.379071 3.604935 3.285837 6.420719 6.901 6.685v4.67"/></svg>',threads:'<svg width="20" height="20" viewBox="0 0 192 192" fill="currentColor"><path d="m141.537 88.9883c-.827-.3964-1.667-.7779-2.518-1.1432-1.482-27.3069-16.403-42.9401-41.4571-43.1001-.1135-.0007-.2264-.0007-.3399-.0007-14.9856 0-27.4489 6.3966-35.12 18.0364l13.779 9.4521c5.7306-8.6945 14.7242-10.548 21.3476-10.548.0765 0 .1533 0 .229.0007 8.2494.0526 14.4744 2.4511 18.5034 7.1285 2.932 3.4053 4.893 8.111 5.864 14.0498-7.314-1.2431-15.224-1.6253-23.68-1.1405-23.8203 1.3721-39.1339 15.2646-38.1054 34.5687.5219 9.792 5.4001 18.216 13.7354 23.719 7.0474 4.652 16.124 6.927 25.5573 6.412 12.4577-.683 22.2307-5.436 29.0487-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.4875 16.351-22.8093-.169-40.0597-7.484-51.2754-21.742-10.5026-13.351-15.9304-32.635-16.1329-57.317.2025-24.6822 5.6303-43.9664 16.1329-57.3173 11.2157-14.2578 28.4658-21.5727 51.2751-21.7422 22.9748.1708 40.5258 7.5209 52.1708 21.8475 5.71 7.0256 10.015 15.8608 12.853 26.1623l16.147-4.3081c-3.44-12.68-8.853-23.6065-16.219-32.6682-14.929-18.36732-36.763-27.778852-64.8955-27.974h-.1126c-28.0753.19447-49.6648 9.6418-64.1686 28.0793-12.9064 16.4071-19.5639 39.2364-19.7876 67.8532l-.0007.0675.0007.0675c.2237 28.6165 6.8812 51.4465 19.7876 67.8535 14.5038 18.437 36.0933 27.885 64.1686 28.079h.1126c24.9605-.173 42.5545-6.708 57.0485-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.9448-24.723-24.5527zm-43.0965 40.5187c-10.44.588-21.2861-4.098-21.8209-14.135-.3964-7.442 5.2962-15.746 22.4616-16.7352 1.9658-.1134 3.8948-.1688 5.7898-.1688 6.235 0 12.068.6057 17.371 1.765-1.978 24.702-13.58 28.713-23.8015 29.274z"/></svg>',spotify:'<svg width="20" height="20" viewBox="0 0 496 512" fill="currentColor"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>',zoom:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.585 6.836a2.25 2.25 0 0 0-2.25 2.25v5.828a2.25 2.25 0 0 0 2.25 2.25h8.33a2.25 2.25 0 0 0 2.25-2.25v-1.956l4.013 2.869a.75.75 0 0 0 1.187-.61V8.783a.75.75 0 0 0-1.187-.61l-4.013 2.869V9.086a2.25 2.25 0 0 0-2.25-2.25z"/></svg>',"startnext-s":'<svg width="20" height="20" viewBox="0 0 375 477" fill="currentColor"><g transform="translate(363 312)"><path d="m12-312-23.8 199.9-230.6 19.7c-54.5 4.7-102.6-35.6-107.2-90.1s35.7-102.3 90.2-106.8z"/><path d="m-98.7 142.4-264.3 22.6 23.6-200.5 223.7-19.1c54.6-4.7 102.7 35.6 107.3 90.1 4.9 54.4-35.7 102.2-90.3 106.9"/></g></svg>'};function o(n,e){const t=r[n];return t&&e?t.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):t||""}function s(n,e){return n.userMenu.items.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const t=["drawer__item"];n.disabled&&t.push("drawer__item--disabled"),"outline"===n.style&&t.push("drawer__item--outline");const a=n.children&&n.children.length>0,i=e.has(n.id),o="logout"===n.action,s=o?"button":n.url&&!a?"a":"button";let l=`<${s} class="${t.join(" ")}"\n ${!n.url||a||o?"":`href="${n.url}"${n.target?` target="${n.target}"`:""}`}\n ${n.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${n.id}" aria-expanded="${i}"`:""}\n ${o?'data-action="logout"':""}\n data-user-id="${n.id}">\n ${n.icon?`<span class="drawer__item-icon">${r[n.icon]||""}</span>`:""}\n ${n.label}\n ${n.badge?`<span class="drawer__item-badge">${n.badge}</span>`:""}\n ${a||n.expandable?`<span class="drawer__item-expand${i?" expanded":""}">${r.angleDown}</span>`:""}\n </${s}>`;return a&&(l+=`<div class="drawer__children${i?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),l}).join("")}class l extends n{constructor(){super(...arguments),this.burgerOpen=!1,this.userMenuOpen=!1,this.langMenuOpen=!1,this.isTight=!1,this.isSlideUp=!1,this.lastScrollY=0,this.expandedSections=new Set,this.lottieAnim=null,this.pendingRaf=null,this.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this),this._skipCallback=!1}static get observedAttributes(){return["lang","languages","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","hide-cta","show-back-link","back-url","back-label","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get requestedLanguages(){const n=this.getAttribute("languages");return n?n.split(",").map(n=>n.trim()).filter(Boolean):null}get isLightHeader(){const n=this.getAttribute("color-mode");return n?"dark"===n:this.getBoolAttr("light",!1)}ui(n){return function(n,t){return e[n]?.[t]||e[n]?.de||n}(n,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),window.addEventListener("scroll",this.handleScrollBound,{passive:!0}),window.addEventListener("resize",this.handleResizeBound,{passive:!0}),document.addEventListener("keydown",this.handleKeydownBound),document.addEventListener("click",this.handleDocClickBound),this.schedulePostRender(),this.loadApiData()}getHeaderData(){const n=l.apiCache.get(this.currentLang);return n||function(n="de"){return{mainNavigation:[],burgerMenu:[],userMenu:{user:{name:"",avatar:""},items:[]},ctaButton:{label:"",url:"",style:"primary"},logo:{src:"",alt:"Startnext",href:"/"},theme:{"--header-bg":"transparent","--header-bg-scrolled":"#FFFFFF","--header-text":"#FFFFFF","--header-text-scrolled":"#304b50","--header-height":"64px","--header-padding":"0 16px","--btn-primary-bg":"#06E481","--btn-primary-text":"#FFFFFF","--btn-primary-hover":"#05C972","--burger-icon-color":"#FFFFFF","--drawer-bg":"#FFFFFF","--drawer-width":"320px","--drawer-shadow":"4px 0 12px rgba(0,0,0,0.1)","--font-size-base":"16px","--font-size-small":"14px","--primary-color":"#06E481","--text-primary":"#304b50","--text-secondary":"#6B7280","--text-disabled":"#D1D5DB","--border-color":"#E5E7EB","--hover-bg":"#F3F4F6","--transition-speed":"0.3s","--drawer-transition":"0.4s cubic-bezier(0.4, 0, 0.2, 1)","--header-z-index":"1000","--drawer-z-index":"1100","--overlay-z-index":"1050"},language:n,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(l.apiCache.has(e))return;if(l.pendingFetches.has(e))return await l.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&l.apiCache.has(e)&&(this.data=l.apiCache.get(e),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()));const t=(async()=>{const t=await fetch(`${n}/api/header?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};l.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender())})();l.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextHeader] API fetch failed, using fallback data",n)}finally{l.pendingFetches.delete(e)}}disconnectedCallback(){window.removeEventListener("scroll",this.handleScrollBound),window.removeEventListener("resize",this.handleResizeBound),document.removeEventListener("keydown",this.handleKeydownBound),document.removeEventListener("click",this.handleDocClickBound),null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.lottieAnim?.destroy(),this.querySelector("[data-crawler-nav]")?.remove()}attributeChangedCallback(n){!this._skipCallback&&this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==n&&"api-url"!==n||this.loadApiData())}restoreScrollState(){const n=this.shadow.querySelector(".headbar");n&&(n.classList.toggle("headbar--tight",this.isTight),n.classList.toggle("headbar--slide-up",this.isSlideUp),n.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight))}schedulePostRender(){null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.pendingRaf=requestAnimationFrame(()=>{this.pendingRaf=null,this.shadow.querySelector(".headerbar__btn")?.classList.add("headerbar__btn--loaded"),this.initLottie()})}async initLottie(){const n=this.shadow.querySelector("#page-logo-animation");if(!n)return;const e=this.getAttribute("api-url");if(!e)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const{default:t}=await import("./lottie_light-BkFx3xP_.js").then(function(n){return n.l}),a=this.isLightHeader?"logo-white.json":"logo-blue.json";this.lottieAnim=t.loadAnimation({container:n,renderer:"svg",loop:!1,autoplay:!1,path:`${e}/assets/lottie/${a}`}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const n=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let t=!1;const a=n>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),t=!0);const i=n-this.lastScrollY,r=document.querySelector("main, [data-content], .page-content"),o=r?.getBoundingClientRect().top??1/0,s=this.getBoolAttr("large-animation",!1);i>8&&o<-90&&n>(s?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),t=!0):i<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),t=!0),Math.abs(i)>8&&(this.lastScrollY=n),this.updateLogoAnimation(n),t&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(n){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,t=e+400,a=Math.max(0,Math.min(1,(n-e)/(t-e))),i=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const r=this.shadow.querySelector(".headbar__pageLogo--animation-large"),o=this.shadow.querySelector(".headbar__claim--large");if(!r)return;const s=window.innerWidth,l=s<768?-110:s<1100?-120:-140,d=s<768?.65:.5;o&&(o.style.opacity=String(1-Math.min(1,a/.05)));const h=Math.max(0,Math.min(1,(a-.05)/.25)),c=1-Math.pow(1-h,4);r.style.transform=`translateY(${c*l}px) scale(${1+c*(d-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(n){"Escape"===n.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(n){if(!this.langMenuOpen)return;const e=n.composedPath(),t=this.shadow.querySelector(".headbar__lang");t&&!e.includes(t)&&this.toggleLangMenu(!1)}toggleBurger(n){this.burgerOpen=n??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(n){this.userMenuOpen=n??!this.userMenuOpen,this.updateDrawerStates(),this.emit("user-menu-toggle",{open:this.userMenuOpen}),this.userMenuOpen&&this.trapFocus("user")}updateDrawerStates(){this.shadow.querySelector(".overlay")?.classList.toggle("open",this.burgerOpen||this.userMenuOpen),this.shadow.querySelector(".drawer--left")?.classList.toggle("open",this.burgerOpen),this.shadow.querySelector(".drawer--right")?.classList.toggle("open",this.userMenuOpen),document.body.style.overflow=this.burgerOpen||this.userMenuOpen?"hidden":""}trapFocus(n){const e=this.shadow.querySelector("burger"===n?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(n,e){this.emit("navigation-click",{item:n})||e.preventDefault()}handleCtaClick(n){this.emit("cta-click",{url:this.data.ctaButton.url})||n.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(n){this.emit("language-change",{language:n})}toggleLangMenu(n){this.langMenuOpen=n??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),t=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),t?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(n){this.expandedSections.has(n)?this.expandedSections.delete(n):this.expandedSections.add(n),this.updateExpandStates()}updateExpandStates(){for(const n of this.shadow.querySelectorAll("[data-expand-id]")){const e=n.getAttribute("data-expand-id"),t=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",t),n.querySelector(".drawer__item-expand")?.classList.toggle("expanded",t),n.setAttribute("aria-expanded",String(t))}}initColorMode(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const n=document.documentElement;n.classList.contains("dark")?this.applyColorMode("dark"):n.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}toggleColorMode(){const n="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(n),this.emit("color-mode-change",{mode:n})}applyColorMode(n){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(n),this._skipCallback=!0,this.setAttribute("color-mode",n),"dark"===n?this.setAttribute("light",""):this.removeAttribute("light"),this._skipCallback=!1,this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";const e=e=>{const t=document.createElement("div");return t.setAttribute("data-section",e),n.appendChild(t),t},t=(n,e,t)=>{const a=document.createElement("a");a.href=e,a.textContent=t,n.appendChild(a)},a=e("main-navigation");for(const n of this.data.mainNavigation)t(a,n.url,n.label);t(a,this.data.ctaButton.url,this.data.ctaButton.label);const i=[];for(const n of this.data.burgerMenu)if("divider"!==n.type&&"logout"!==n.action&&n.url)if(n.children){const a=e(n.label.toLowerCase());t(a,n.url,n.label);for(const e of n.children)e.url&&t(a,e.url,e.label)}else n.small&&i.push(n);if(i.length){const n=e("legal");for(const e of i)t(n,e.url,e.label)}this.appendChild(n)}render(){const n=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,t=this.getBoolAttr("large-animation",!1),i=this.getBoolAttr("hide-color-mode",!1),o=this.getBoolAttr("hide-lang",!1),l=this.getBoolAttr("hide-login",!1),d=this.getBoolAttr("hide-cta",!1),h=this.getBoolAttr("show-back-link",!1),c=this.getAttribute("back-url")||this.data.backLink?.url||"",g=this.getAttribute("back-label")||this.data.backLink?.label||"",p=this.getAttribute("user-name")||this.data.userMenu.user.name,u=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar,b=this.requestedLanguages,m=b?this.data.availableLanguages.filter(n=>b.includes(n.code)):this.data.availableLanguages;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(a));const _=document.createElement("div");var f,x,v;_.innerHTML=`\n <header class="headbar${(f={isAuth:n,isLight:e,isLarge:t,hideColorMode:i,hideLang:o,hideLogin:l,hideCta:d,showBackLink:h,backUrl:c,backLabel:g,userName:p,userAvatar:u,data:this.data,availableLanguages:m,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,v=this.expandedSections,x.burgerMenu.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];n.highlighted&&e.push("drawer__item--highlighted"),n.small&&e.push("drawer__item--small");const t=n.expandable||n.children&&n.children.length>0,a=v.has(n.id),i=!n.highlighted&&!n.small&&!t&&n.url;let o=`<${n.url&&!t?"a":"button"} class="${e.join(" ")}"\n ${n.url&&!t?`href="${n.url}"${n.target?` target="${n.target}"`:""}`:""}\n ${t?`data-expand-id="${n.id}" aria-expanded="${a}"`:""}\n data-burger-id="${n.id}">\n ${n.label}\n ${t?`<span class="drawer__item-expand${a?" expanded":""}">${r.angleDownSmall}</span>`:""}\n ${i?`<span class="drawer__item-nav-arrow">${r.angleDown}</span>`:""}\n </${n.url&&!t?"a":"button"}>`;return n.children&&n.children.length>0&&(o+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),o}).join("")),userItemsHtml:s(this.data,this.expandedSections)}).isLight?" headbar--light":""}" role="banner">\n \x3c!-- Burger --\x3e\n <div class="headbar__left headbar__icon headbar__icon--clickable burger-btn"\n role="button" tabindex="0" aria-label="${f.ui("menuOpen")}" aria-expanded="false">\n ${r.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n ${f.hideCta?"":`<div class="headerbar__btn">\n <a href="${f.data.ctaButton.url}" class="cta-link" aria-label="${f.data.ctaButton.label}">\n <span class="headerbar__btn--text">${f.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${r.rocket}</span>\n </a>\n </div>`}\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${f.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${f.ui("mainNav")}">\n ${f.data.mainNavigation.sort((n,e)=>n.order-e.order).map(n=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${n.url}"${n.target?` target="${n.target}"`:""} data-nav-id="${n.id}">${n.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${f.ui("homepage")}" class="headbar__pageLogo--animation${f.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${f.isLarge?`<div class="headbar__claim headbar__claim--large">${f.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${f.showBackLink&&f.backUrl?`<a href="${f.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${r.arrowLeft}</span>\n <span class="headbar__back-text">${f.backLabel}</span>\n </a>`:""}\n ${f.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${f.ui("colorMode")}" title="${f.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${r.sun}</span>\n <span class="headbar__color-mode-moon">${r.moon}</span>\n </button>`}\n ${!f.hideLang&&f.availableLanguages.length>1?`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${f.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${f.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${r.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.availableLanguages.map(n=>`<button class="headbar__lang-option${n.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${n.code===f.currentLang}" data-lang="${n.code}">\n ${n.label}\n </button>`).join("")}\n </div>\n </div>`:""}\n ${f.hideLogin?"":f.isAuth?`<button class="user-avatar-btn" aria-label="${f.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${f.userAvatar}" alt="${f.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${f.ui("login")}">\n <span class="headbar__login-text">${f.ui("login")}</span>\n <span class="headbar__login-icon">${r["circle-user-round"]}</span>\n </button>`}\n </div>\n </header>\n\n <div class="overlay" aria-hidden="true"></div>\n\n \x3c!-- Burger Drawer --\x3e\n <nav class="drawer drawer--left" role="dialog" aria-label="${f.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${f.burgerItemsHtml}</div>\n </nav>\n\n ${f.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${f.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${f.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${f.userName}</span>\n </div>\n <div class="drawer__nav">${f.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(_),this.attachEvents()}attachEvents(){this.shadow.querySelector(".headbar__color-mode")?.addEventListener("click",()=>this.toggleColorMode()),this.shadow.querySelector(".burger-btn")?.addEventListener("click",()=>this.toggleBurger()),this.shadow.querySelector(".headbar__back-link")?.addEventListener("click",n=>{const e=n.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||n.preventDefault()}),this.shadow.querySelector(".overlay")?.addEventListener("click",()=>{this.toggleBurger(!1),this.toggleUserMenu(!1)}),this.shadow.querySelector(".user-avatar-btn")?.addEventListener("click",()=>this.toggleUserMenu()),this.shadow.querySelector(".headbar__login")?.addEventListener("click",()=>{this.emit("navigation-click",{item:{id:"login",label:"Anmelden",url:"/login",order:0}})}),this.shadow.querySelector(".cta-link")?.addEventListener("click",n=>this.handleCtaClick(n));for(const n of this.shadow.querySelectorAll(".headbar__menu-link"))n.addEventListener("click",e=>{const t=this.data.mainNavigation.find(e=>e.id===n.getAttribute("data-nav-id"));t&&this.handleNavClick(t,e)});for(const n of this.shadow.querySelectorAll("[data-burger-id]"))n.addEventListener("click",e=>{const t=this.data.burgerMenu.find(e=>e.id===n.getAttribute("data-burger-id"));t&&(t.expandable||t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll("[data-user-id]"))n.addEventListener("click",e=>{if("logout"===n.getAttribute("data-action"))return void this.handleLogout();const t=this.data.userMenu.items.find(e=>e.id===n.getAttribute("data-user-id"));t&&(t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):t.disabled||this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll(".drawer__child"))n.addEventListener("click",e=>{const t=n.getAttribute("data-nav-id");if(t)for(const n of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=n.children?.find(n=>n.id===t);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const n of this.shadow.querySelectorAll(".headbar__lang-option"))n.addEventListener("click",()=>{const e=n.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}l.apiCache=new Map,l.pendingFetches=new Map,customElements.define("startnext-header",l);const d=`\n ${t}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 24px 40px;\n text-align: center;\n }\n\n /* ── Sections ── */\n .footer__part + .footer__part {\n margin-top: 40px;\n }\n\n .footer__part--sm + .footer__part--sm {\n margin-top: 20px;\n }\n\n /* ── Title ── */\n .footer__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 24px;\n color: var(--footer-text, #FFFFFF);\n }\n\n /* ── Social ── */\n .footer__social {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .footer__social-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n color: var(--footer-text, #FFFFFF);\n transition: transform 0.3s ease;\n }\n\n .footer__social-link:hover {\n animation: logoScale 0.5s linear 1;\n }\n\n .footer__social-link:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n @keyframes logoScale {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n @media (min-width: 576px) {\n .footer__social {\n gap: 24px;\n }\n }\n\n /* ── Stats ── */\n .footer__stats {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 16px 48px;\n }\n\n .footer__stat-item {\n text-align: center;\n }\n\n .footer__stat-value {\n display: block;\n font-size: 32px;\n font-weight: 800;\n line-height: 1;\n }\n\n .footer__stat-caption {\n display: block;\n font-size: 13px;\n margin-top: 8px;\n opacity: 0.8;\n }\n\n /* ── Navigation columns ── */\n .footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n text-align: left;\n }\n\n .footer__nav-title {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__nav {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.8;\n }\n\n .footer__nav a {\n font-size: 15px;\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__nav a:hover {\n opacity: 0.7;\n }\n\n .footer__nav a:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n /* ── B Corp ── */\n .footer__bcorp {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__bcorp-badge {\n flex-shrink: 0;\n width: 80px;\n height: auto;\n }\n\n .footer__bcorp-badge svg {\n width: 80px;\n height: auto;\n display: block;\n }\n\n .footer__bcorp-label {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 4px;\n }\n\n .footer__bcorp-text {\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.85;\n }\n\n .footer__bcorp-line {\n width: 100%;\n max-width: 180px;\n height: 3px;\n background: var(--footer-text, #FFFFFF);\n margin-top: 12px;\n }\n\n /* ── Funding notice ── */\n .footer__funding {\n text-align: left;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .footer__funding-title {\n font-size: 15px;\n font-weight: 700;\n margin-bottom: 8px;\n }\n\n .footer__funding-text {\n font-size: 14px;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* ── Payments ── */\n .footer__payments-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .footer__payments {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px 40px;\n }\n\n .footer__payment {\n font-size: 15px;\n opacity: 0.85;\n }\n\n /* ── Logo ── */\n .footer__logo {\n display: inline-flex;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__logo:hover {\n opacity: 0.8;\n }\n\n .footer__logo:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n /* ── Claim ── */\n .footer__claim {\n font-size: 20px;\n font-weight: 600;\n }\n\n /* ── Dimmed section (legal + copyright) ── */\n .footer__dim {\n opacity: 0.5;\n }\n\n .footer__dim a {\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__dim a:hover {\n opacity: 0.7;\n }\n\n .footer__legal {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 4px 20px;\n font-size: 14px;\n margin-bottom: 8px;\n }\n\n .footer__copyright {\n font-size: 14px;\n }\n\n /* ── Responsive ── */\n @media (max-width: 767px) {\n .footer__columns {\n grid-template-columns: 1fr 1fr;\n gap: 32px 24px;\n }\n\n .footer__bcorp {\n grid-column: 1 / -1;\n justify-content: center;\n }\n\n .footer__stat-value {\n font-size: 26px;\n }\n\n .footer__funding {\n text-align: center;\n }\n }\n\n @media (max-width: 479px) {\n .footer {\n padding: 40px 16px 32px;\n }\n\n .footer__columns {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .footer__bcorp {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .footer__bcorp-line {\n margin-left: auto;\n margin-right: auto;\n }\n\n .footer__stats {\n flex-direction: column;\n gap: 24px;\n }\n }\n`;class h extends n{constructor(){super(...arguments),this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(n){this.isConnected&&("lang-sync"!==n?(this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==n&&"api-url"!==n||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=n=>{this.setAttribute("lang",n.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const n=h.apiCache.get(this.currentLang);return n||(this.currentLang,{socialTitle:"",social:[],statsTitle:"",stats:[],columns:[],bcorp:{label:"",description:""},funding:{title:"",text:""},payments:{title:"",methods:[]},claim:"",legalLinks:[],copyright:"",theme:{"--footer-bg":"#304b50","--footer-text":"#FFFFFF","--footer-link-hover":"#06E481","--footer-border":"rgba(255, 255, 255, 0.15)"}})}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(h.apiCache.has(e))return;if(h.pendingFetches.has(e))return await h.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&h.apiCache.has(e)&&(this.data=h.apiCache.get(e),this.render(),this.renderLightDomNav()));const t=(async()=>{const t=await fetch(`${n}/api/footer?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};h.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.render(),this.renderLightDomNav())})();h.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextFooter] API fetch failed, using fallback data",n)}finally{h.pendingFetches.delete(e)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";for(const e of this.data.columns){const t=document.createElement("div");t.setAttribute("data-section",e.title.toLowerCase());for(const n of e.links){const e=document.createElement("a");e.href=n.url,e.textContent=n.label,t.appendChild(e)}n.appendChild(t)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const n of this.data.legalLinks){const t=document.createElement("a");t.href=n.url,t.textContent=n.label,e.appendChild(t)}n.appendChild(e),this.appendChild(n)}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const n=document.createElement("div");var e;n.innerHTML=`\n <footer class="footer" role="contentinfo">\n \x3c!-- Social --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${(e=this.data).socialTitle}</h3>\n <div class="footer__social" aria-label="Soziale Medien">\n ${e.social.map(n=>`\n <a href="${n.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${n.platform}">\n ${o(n.platform,32)}\n </a>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Stats --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${e.statsTitle}</h3>\n <div class="footer__stats">\n ${e.stats.map(n=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${n.value}</span>\n <span class="footer__stat-caption">${n.caption}</span>\n </div>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Navigation columns + B Corp --\x3e\n <div class="footer__part">\n <div class="footer__columns">\n ${e.columns.map(n=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${n.title}</h4>\n <ul class="footer__nav">\n ${n.links.map(n=>`<li><a href="${n.url}" class="footer__link">${n.label}</a></li>`).join("")}\n </ul>\n </div>\n `).join("")}\n <div class="footer__bcorp">\n <div class="footer__bcorp-badge"><svg viewBox="0 0 120 160" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="116" height="156" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>\n <text x="60" y="55" text-anchor="middle" font-size="50" font-weight="800" fill="currentColor">B</text>\n <line x1="20" y1="80" x2="100" y2="80" stroke="currentColor" stroke-width="2"/>\n <text x="60" y="105" text-anchor="middle" font-size="13" font-weight="600" fill="currentColor">Corporation</text>\n</svg></div>\n <div>\n <div class="footer__bcorp-label">${e.bcorp.label}</div>\n <div class="footer__bcorp-text">${e.bcorp.description}</div>\n <div class="footer__bcorp-line"></div>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Funding notice --\x3e\n <div class="footer__part">\n <div class="footer__funding">\n <div class="footer__funding-title">${e.funding.title}</div>\n <div class="footer__funding-text">${e.funding.text}</div>\n </div>\n </div>\n\n \x3c!-- Payment methods --\x3e\n <div class="footer__part">\n <div class="footer__payments-title">${e.payments.title}</div>\n <div class="footer__payments">\n ${e.payments.methods.map(n=>`<span class="footer__payment">${n}</span>`).join("")}\n </div>\n </div>\n\n \x3c!-- Logo --\x3e\n <div class="footer__part footer__part--sm">\n <a href="/" aria-label="Startnext Homepage" class="footer__logo">\n ${o("startnext-s",64)}\n </a>\n </div>\n\n \x3c!-- Claim --\x3e\n <div class="footer__part footer__part--sm">\n <div class="footer__claim">${e.claim}</div>\n </div>\n\n \x3c!-- Legal + Copyright --\x3e\n <div class="footer__part footer__dim">\n <div class="footer__legal">\n ${e.legalLinks.map(n=>`<a href="${n.url}" class="footer__link">${n.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(n),this.attachEvents()}attachEvents(){for(const n of this.shadow.querySelectorAll(".footer__link"))n.addEventListener("click",e=>{const t=n.getAttribute("href")||"",a=n.textContent?.trim()||"";this.emit("navigation-click",{item:{url:t,label:a}})||e.preventDefault()})}}h.observedAttributes=["lang","api-url","lang-sync"],h.apiCache=new Map,h.pendingFetches=new Map,customElements.define("startnext-footer",h);export{h as StartnextFooter,l as StartnextHeader};
7
+ */;function i(n,e){return n.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const r={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:i('\n<svg\n class="lucide lucide-x"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 6 6 18" />\n <path d="m6 6 12 12" />\n</svg>\n',24),globe:i('\n<svg\n class="lucide lucide-globe"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="10" />\n <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />\n <path d="M2 12h20" />\n</svg>\n',16),search:i('\n<svg\n class="lucide lucide-search"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m21 21-4.34-4.34" />\n <circle cx="11" cy="11" r="8" />\n</svg>\n',20),"circle-user-round":i('\n<svg\n class="lucide lucide-circle-user-round"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M18 20a6 6 0 0 0-12 0" />\n <circle cx="12" cy="10" r="4" />\n <circle cx="12" cy="12" r="10" />\n</svg>\n',20),mail:i('\n<svg\n class="lucide lucide-mail"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />\n <rect x="2" y="4" width="20" height="16" rx="2" />\n</svg>\n',20),"list-checks":i('\n<svg\n class="lucide lucide-list-checks"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M13 5h8" />\n <path d="M13 12h8" />\n <path d="M13 19h8" />\n <path d="m3 17 2 2 4-4" />\n <path d="m3 7 2 2 4-4" />\n</svg>\n',20),heart:i('\n<svg\n class="lucide lucide-heart"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />\n</svg>\n',20),rocket:i('\n<svg\n class="lucide lucide-rocket"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />\n <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />\n <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />\n <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />\n</svg>\n',20),settings:i('\n<svg\n class="lucide lucide-settings"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />\n <circle cx="12" cy="12" r="3" />\n</svg>\n',20),"log-out":i('\n<svg\n class="lucide lucide-log-out"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m16 17 5-5-5-5" />\n <path d="M21 12H9" />\n <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />\n</svg>\n',20),sun:i('\n<svg\n class="lucide lucide-sun"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <circle cx="12" cy="12" r="4" />\n <path d="M12 2v2" />\n <path d="M12 20v2" />\n <path d="m4.93 4.93 1.41 1.41" />\n <path d="m17.66 17.66 1.41 1.41" />\n <path d="M2 12h2" />\n <path d="M20 12h2" />\n <path d="m6.34 17.66-1.41 1.41" />\n <path d="m19.07 4.93-1.41 1.41" />\n</svg>\n',20),moon:i('\n<svg\n class="lucide lucide-moon"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />\n</svg>\n',20),arrowLeft:i('\n<svg\n class="lucide lucide-arrow-left"\n xmlns="http://www.w3.org/2000/svg"\n width="24"\n height="24"\n viewBox="0 0 24 24"\n fill="none"\n stroke="currentColor"\n stroke-width="2"\n stroke-linecap="round"\n stroke-linejoin="round"\n>\n <path d="m12 19-7-7 7-7" />\n <path d="M19 12H5" />\n</svg>\n',16),facebook:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>',twitter:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',instagram:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>',linkedin:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>',youtube:'<svg width="20" height="20" viewBox="0 0 1792 1280" fill="currentColor"><path d="M711 872l484-250l-484-253v503zM896 10q168 0 324.5 4.5T1450 24l73 4q1 0 17 1.5t23 3t23.5 4.5t28.5 8t28 13t31 19.5t29 26.5q6 6 15.5 18.5t29 58.5t26.5 101q8 64 12.5 136.5T1792 532v176q1 145-18 290q-7 55-25 99.5t-32 61.5l-14 17q-14 15-29 26.5t-31 19t-28 12.5t-28.5 8t-24 4.5t-23 3t-16.5 1.5q-251 19-627 19q-207-2-359.5-6.5T336 1256l-49-4l-36-4q-36-5-54.5-10t-51-21t-56.5-41q-6-6-15.5-18.5t-29-58.5T18 998q-8-64-12.5-136.5T0 748V572q-1-145 18-290q7-55 25-99.5T75 121l14-17q14-15 29-26.5T149 58t28-13t28.5-8t23.5-4.5t23-3t17-1.5q251-18 627-18z"/></svg>',tiktok:'<svg width="20" height="20" viewBox="4 4 24 28" fill="currentColor"><path d="m28.029852 15.355c-.229338.02229-.459584.03396-.69.035-2.527359.000353-4.884553-1.273562-6.269-3.388v11.537c0 7.597274-9.18476 11.400626-14.5561926 6.029193-5.371433-5.371433-1.568081-14.556193 6.0291926-14.556193.178 0 .352.016.527.027v4.202c-.175-.021-.347-.053-.527-.053-5.8026636 0-5.8026636 8.704 0 8.704 2.404 0 4.527-1.894 4.527-4.298l.042-19.594h4.02c.379071 3.604935 3.285837 6.420719 6.901 6.685v4.67"/></svg>',threads:'<svg width="20" height="20" viewBox="0 0 192 192" fill="currentColor"><path d="m141.537 88.9883c-.827-.3964-1.667-.7779-2.518-1.1432-1.482-27.3069-16.403-42.9401-41.4571-43.1001-.1135-.0007-.2264-.0007-.3399-.0007-14.9856 0-27.4489 6.3966-35.12 18.0364l13.779 9.4521c5.7306-8.6945 14.7242-10.548 21.3476-10.548.0765 0 .1533 0 .229.0007 8.2494.0526 14.4744 2.4511 18.5034 7.1285 2.932 3.4053 4.893 8.111 5.864 14.0498-7.314-1.2431-15.224-1.6253-23.68-1.1405-23.8203 1.3721-39.1339 15.2646-38.1054 34.5687.5219 9.792 5.4001 18.216 13.7354 23.719 7.0474 4.652 16.124 6.927 25.5573 6.412 12.4577-.683 22.2307-5.436 29.0487-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.4875 16.351-22.8093-.169-40.0597-7.484-51.2754-21.742-10.5026-13.351-15.9304-32.635-16.1329-57.317.2025-24.6822 5.6303-43.9664 16.1329-57.3173 11.2157-14.2578 28.4658-21.5727 51.2751-21.7422 22.9748.1708 40.5258 7.5209 52.1708 21.8475 5.71 7.0256 10.015 15.8608 12.853 26.1623l16.147-4.3081c-3.44-12.68-8.853-23.6065-16.219-32.6682-14.929-18.36732-36.763-27.778852-64.8955-27.974h-.1126c-28.0753.19447-49.6648 9.6418-64.1686 28.0793-12.9064 16.4071-19.5639 39.2364-19.7876 67.8532l-.0007.0675.0007.0675c.2237 28.6165 6.8812 51.4465 19.7876 67.8535 14.5038 18.437 36.0933 27.885 64.1686 28.079h.1126c24.9605-.173 42.5545-6.708 57.0485-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.9448-24.723-24.5527zm-43.0965 40.5187c-10.44.588-21.2861-4.098-21.8209-14.135-.3964-7.442 5.2962-15.746 22.4616-16.7352 1.9658-.1134 3.8948-.1688 5.7898-.1688 6.235 0 12.068.6057 17.371 1.765-1.978 24.702-13.58 28.713-23.8015 29.274z"/></svg>',spotify:'<svg width="20" height="20" viewBox="0 0 496 512" fill="currentColor"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>',zoom:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.585 6.836a2.25 2.25 0 0 0-2.25 2.25v5.828a2.25 2.25 0 0 0 2.25 2.25h8.33a2.25 2.25 0 0 0 2.25-2.25v-1.956l4.013 2.869a.75.75 0 0 0 1.187-.61V8.783a.75.75 0 0 0-1.187-.61l-4.013 2.869V9.086a2.25 2.25 0 0 0-2.25-2.25z"/></svg>',"startnext-s":'<svg width="20" height="20" viewBox="0 0 375 477" fill="currentColor"><g transform="translate(363 312)"><path d="m12-312-23.8 199.9-230.6 19.7c-54.5 4.7-102.6-35.6-107.2-90.1s35.7-102.3 90.2-106.8z"/><path d="m-98.7 142.4-264.3 22.6 23.6-200.5 223.7-19.1c54.6-4.7 102.7 35.6 107.3 90.1 4.9 54.4-35.7 102.2-90.3 106.9"/></g></svg>'};function o(n,e){const t=r[n];return t&&e?t.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):t||""}function s(n,e){return n.userMenu.items.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const t=["drawer__item"];n.disabled&&t.push("drawer__item--disabled"),"outline"===n.style&&t.push("drawer__item--outline");const a=n.children&&n.children.length>0,i=e.has(n.id),o="logout"===n.action,s=o?"button":n.url&&!a?"a":"button";let l=`<${s} class="${t.join(" ")}"\n ${!n.url||a||o?"":`href="${n.url}"${n.target?` target="${n.target}"`:""}`}\n ${n.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${n.id}" aria-expanded="${i}"`:""}\n ${o?'data-action="logout"':""}\n data-user-id="${n.id}">\n ${n.icon?`<span class="drawer__item-icon">${r[n.icon]||""}</span>`:""}\n ${n.label}\n ${n.badge?`<span class="drawer__item-badge">${n.badge}</span>`:""}\n ${a||n.expandable?`<span class="drawer__item-expand${i?" expanded":""}">${r.angleDown}</span>`:""}\n </${s}>`;return a&&(l+=`<div class="drawer__children${i?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),l}).join("")}class l extends n{constructor(){super(...arguments),this.burgerOpen=!1,this.userMenuOpen=!1,this.langMenuOpen=!1,this.isTight=!1,this.isSlideUp=!1,this.lastScrollY=0,this.expandedSections=new Set,this.lottieAnim=null,this.pendingRaf=null,this.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this),this._skipCallback=!1}static get observedAttributes(){return["lang","languages","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","hide-cta","show-back-link","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get requestedLanguages(){const n=this.getAttribute("languages");return n?n.split(",").map(n=>n.trim()).filter(Boolean):null}get isLightHeader(){const n=this.getAttribute("color-mode");return n?"dark"===n:this.getBoolAttr("light",!1)}ui(n){return function(n,t){return e[n]?.[t]||e[n]?.de||n}(n,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),window.addEventListener("scroll",this.handleScrollBound,{passive:!0}),window.addEventListener("resize",this.handleResizeBound,{passive:!0}),document.addEventListener("keydown",this.handleKeydownBound),document.addEventListener("click",this.handleDocClickBound),this.schedulePostRender(),this.loadApiData()}getHeaderData(){const n=l.apiCache.get(this.currentLang);return n||function(n="de"){return{mainNavigation:[],burgerMenu:[],userMenu:{user:{name:"",avatar:""},items:[]},ctaButton:{label:"",url:"",style:"primary"},logo:{src:"",alt:"Startnext",href:"/"},theme:{"--header-bg":"transparent","--header-bg-scrolled":"#FFFFFF","--header-text":"#FFFFFF","--header-text-scrolled":"#304b50","--header-height":"64px","--header-padding":"0 16px","--btn-primary-bg":"#06E481","--btn-primary-text":"#FFFFFF","--btn-primary-hover":"#05C972","--burger-icon-color":"#FFFFFF","--drawer-bg":"#FFFFFF","--drawer-width":"320px","--drawer-shadow":"4px 0 12px rgba(0,0,0,0.1)","--font-size-base":"16px","--font-size-small":"14px","--primary-color":"#06E481","--text-primary":"#304b50","--text-secondary":"#6B7280","--text-disabled":"#D1D5DB","--border-color":"#E5E7EB","--hover-bg":"#F3F4F6","--transition-speed":"0.3s","--drawer-transition":"0.4s cubic-bezier(0.4, 0, 0.2, 1)","--header-z-index":"1000","--drawer-z-index":"1100","--overlay-z-index":"1050"},language:n,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(l.apiCache.has(e))return;if(l.pendingFetches.has(e))return await l.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&l.apiCache.has(e)&&(this.data=l.apiCache.get(e),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()));const t=(async()=>{const t=await fetch(`${n}/api/header?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};l.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender())})();l.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextHeader] API fetch failed, using fallback data",n)}finally{l.pendingFetches.delete(e)}}disconnectedCallback(){window.removeEventListener("scroll",this.handleScrollBound),window.removeEventListener("resize",this.handleResizeBound),document.removeEventListener("keydown",this.handleKeydownBound),document.removeEventListener("click",this.handleDocClickBound),null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.lottieAnim?.destroy(),this.querySelector("[data-crawler-nav]")?.remove()}attributeChangedCallback(n){!this._skipCallback&&this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==n&&"api-url"!==n||this.loadApiData())}restoreScrollState(){const n=this.shadow.querySelector(".headbar");n&&(n.classList.toggle("headbar--tight",this.isTight),n.classList.toggle("headbar--slide-up",this.isSlideUp),n.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight))}schedulePostRender(){null!==this.pendingRaf&&cancelAnimationFrame(this.pendingRaf),this.pendingRaf=requestAnimationFrame(()=>{this.pendingRaf=null,this.shadow.querySelector(".headerbar__btn")?.classList.add("headerbar__btn--loaded"),this.initLottie()})}async initLottie(){const n=this.shadow.querySelector("#page-logo-animation");if(!n)return;const e=this.getAttribute("api-url");if(!e)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const{default:t}=await import("./lottie_light-BkFx3xP_.js").then(function(n){return n.l}),a=this.isLightHeader?"logo-white.json":"logo-blue.json";this.lottieAnim=t.loadAnimation({container:n,renderer:"svg",loop:!1,autoplay:!1,path:`${e}/assets/lottie/${a}`}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const n=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let t=!1;const a=n>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),t=!0);const i=n-this.lastScrollY,r=document.querySelector("main, [data-content], .page-content"),o=r?.getBoundingClientRect().top??1/0,s=this.getBoolAttr("large-animation",!1);i>8&&o<-90&&n>(s?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),t=!0):i<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),t=!0),Math.abs(i)>8&&(this.lastScrollY=n),this.updateLogoAnimation(n),t&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(n){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,t=e+400,a=Math.max(0,Math.min(1,(n-e)/(t-e))),i=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const r=this.shadow.querySelector(".headbar__pageLogo--animation-large"),o=this.shadow.querySelector(".headbar__claim--large");if(!r)return;const s=window.innerWidth,l=s<768?-110:s<1100?-120:-140,d=s<768?.65:.5;o&&(o.style.opacity=String(1-Math.min(1,a/.05)));const h=Math.max(0,Math.min(1,(a-.05)/.25)),c=1-Math.pow(1-h,4);r.style.transform=`translateY(${c*l}px) scale(${1+c*(d-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(n){"Escape"===n.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(n){if(!this.langMenuOpen)return;const e=n.composedPath(),t=this.shadow.querySelector(".headbar__lang");t&&!e.includes(t)&&this.toggleLangMenu(!1)}toggleBurger(n){this.burgerOpen=n??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(n){this.userMenuOpen=n??!this.userMenuOpen,this.updateDrawerStates(),this.emit("user-menu-toggle",{open:this.userMenuOpen}),this.userMenuOpen&&this.trapFocus("user")}updateDrawerStates(){this.shadow.querySelector(".overlay")?.classList.toggle("open",this.burgerOpen||this.userMenuOpen),this.shadow.querySelector(".drawer--left")?.classList.toggle("open",this.burgerOpen),this.shadow.querySelector(".drawer--right")?.classList.toggle("open",this.userMenuOpen),document.body.style.overflow=this.burgerOpen||this.userMenuOpen?"hidden":""}trapFocus(n){const e=this.shadow.querySelector("burger"===n?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(n,e){this.emit("navigation-click",{item:n})||e.preventDefault()}handleCtaClick(n){this.emit("cta-click",{url:this.data.ctaButton.url})||n.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(n){this.emit("language-change",{language:n})}toggleLangMenu(n){this.langMenuOpen=n??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),t=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),t?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(n){this.expandedSections.has(n)?this.expandedSections.delete(n):this.expandedSections.add(n),this.updateExpandStates()}updateExpandStates(){for(const n of this.shadow.querySelectorAll("[data-expand-id]")){const e=n.getAttribute("data-expand-id"),t=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",t),n.querySelector(".drawer__item-expand")?.classList.toggle("expanded",t),n.setAttribute("aria-expanded",String(t))}}initColorMode(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const n=document.documentElement;n.classList.contains("dark")?this.applyColorMode("dark"):n.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}toggleColorMode(){const n="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(n),this.emit("color-mode-change",{mode:n})}applyColorMode(n){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(n),this._skipCallback=!0,this.setAttribute("color-mode",n),"dark"===n?this.setAttribute("light",""):this.removeAttribute("light"),this._skipCallback=!1,this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";const e=e=>{const t=document.createElement("div");return t.setAttribute("data-section",e),n.appendChild(t),t},t=(n,e,t)=>{const a=document.createElement("a");a.href=e,a.textContent=t,n.appendChild(a)},a=e("main-navigation");for(const n of this.data.mainNavigation)t(a,n.url,n.label);t(a,this.data.ctaButton.url,this.data.ctaButton.label);const i=[];for(const n of this.data.burgerMenu)if("divider"!==n.type&&"logout"!==n.action&&n.url)if(n.children){const a=e(n.label.toLowerCase());t(a,n.url,n.label);for(const e of n.children)e.url&&t(a,e.url,e.label)}else n.small&&i.push(n);if(i.length){const n=e("legal");for(const e of i)t(n,e.url,e.label)}this.appendChild(n)}render(){const n=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,t=this.getBoolAttr("large-animation",!1),i=this.getBoolAttr("hide-color-mode",!1),o=this.getBoolAttr("hide-lang",!1),l=this.getBoolAttr("hide-login",!1),d=this.getBoolAttr("hide-cta",!1),h=this.getBoolAttr("show-back-link",!1),c=this.data.backLink?.url||"",g=this.data.backLink?.label||"",p=this.getAttribute("user-name")||this.data.userMenu.user.name,u=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar,m=this.requestedLanguages,b=m?this.data.availableLanguages.filter(n=>m.includes(n.code)):this.data.availableLanguages;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(a));const _=document.createElement("div");var f,x,v;_.innerHTML=`\n <header class="headbar${(f={isAuth:n,isLight:e,isLarge:t,hideColorMode:i,hideLang:o,hideLogin:l,hideCta:d,showBackLink:h,backUrl:c,backLabel:g,userName:p,userAvatar:u,data:this.data,availableLanguages:b,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,v=this.expandedSections,x.burgerMenu.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];n.highlighted&&e.push("drawer__item--highlighted"),n.small&&e.push("drawer__item--small");const t=n.expandable||n.children&&n.children.length>0,a=v.has(n.id),i=!n.highlighted&&!n.small&&!t&&n.url;let o=`<${n.url&&!t?"a":"button"} class="${e.join(" ")}"\n ${n.url&&!t?`href="${n.url}"${n.target?` target="${n.target}"`:""}`:""}\n ${t?`data-expand-id="${n.id}" aria-expanded="${a}"`:""}\n data-burger-id="${n.id}">\n ${n.label}\n ${t?`<span class="drawer__item-expand${a?" expanded":""}">${r.angleDownSmall}</span>`:""}\n ${i?`<span class="drawer__item-nav-arrow">${r.angleDown}</span>`:""}\n </${n.url&&!t?"a":"button"}>`;return n.children&&n.children.length>0&&(o+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${n.id}">\n ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n </div>`),o}).join("")),userItemsHtml:s(this.data,this.expandedSections)}).isLight?" headbar--light":""}" role="banner">\n \x3c!-- Burger --\x3e\n <div class="headbar__left headbar__icon headbar__icon--clickable burger-btn"\n role="button" tabindex="0" aria-label="${f.ui("menuOpen")}" aria-expanded="false">\n ${r.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n ${f.hideCta?"":`<div class="headerbar__btn">\n <a href="${f.data.ctaButton.url}" class="cta-link" aria-label="${f.data.ctaButton.label}">\n <span class="headerbar__btn--text">${f.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${r.rocket}</span>\n </a>\n </div>`}\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${f.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${f.ui("mainNav")}">\n ${f.data.mainNavigation.sort((n,e)=>n.order-e.order).map(n=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${n.url}"${n.target?` target="${n.target}"`:""} data-nav-id="${n.id}">${n.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${f.ui("homepage")}" class="headbar__pageLogo--animation${f.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${f.isLarge?`<div class="headbar__claim headbar__claim--large">${f.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${f.showBackLink&&f.backUrl?`<a href="${f.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${r.arrowLeft}</span>\n <span class="headbar__back-text">${f.backLabel}</span>\n </a>`:""}\n ${f.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${f.ui("colorMode")}" title="${f.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${r.sun}</span>\n <span class="headbar__color-mode-moon">${r.moon}</span>\n </button>`}\n ${!f.hideLang&&f.availableLanguages.length>1?`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${f.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${f.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${r.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.availableLanguages.map(n=>`<button class="headbar__lang-option${n.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${n.code===f.currentLang}" data-lang="${n.code}">\n ${n.label}\n </button>`).join("")}\n </div>\n </div>`:""}\n ${f.hideLogin?"":f.isAuth?`<button class="user-avatar-btn" aria-label="${f.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${f.userAvatar}" alt="${f.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${f.ui("login")}">\n <span class="headbar__login-text">${f.ui("login")}</span>\n <span class="headbar__login-icon">${r["circle-user-round"]}</span>\n </button>`}\n </div>\n </header>\n\n <div class="overlay" aria-hidden="true"></div>\n\n \x3c!-- Burger Drawer --\x3e\n <nav class="drawer drawer--left" role="dialog" aria-label="${f.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${f.burgerItemsHtml}</div>\n </nav>\n\n ${f.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${f.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${f.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${f.userName}</span>\n </div>\n <div class="drawer__nav">${f.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(_),this.attachEvents()}attachEvents(){this.shadow.querySelector(".headbar__color-mode")?.addEventListener("click",()=>this.toggleColorMode()),this.shadow.querySelector(".burger-btn")?.addEventListener("click",()=>this.toggleBurger()),this.shadow.querySelector(".headbar__back-link")?.addEventListener("click",n=>{const e=n.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||n.preventDefault()}),this.shadow.querySelector(".overlay")?.addEventListener("click",()=>{this.toggleBurger(!1),this.toggleUserMenu(!1)}),this.shadow.querySelector(".user-avatar-btn")?.addEventListener("click",()=>this.toggleUserMenu()),this.shadow.querySelector(".headbar__login")?.addEventListener("click",()=>{this.emit("navigation-click",{item:{id:"login",label:"Anmelden",url:"/login",order:0}})}),this.shadow.querySelector(".cta-link")?.addEventListener("click",n=>this.handleCtaClick(n));for(const n of this.shadow.querySelectorAll(".headbar__menu-link"))n.addEventListener("click",e=>{const t=this.data.mainNavigation.find(e=>e.id===n.getAttribute("data-nav-id"));t&&this.handleNavClick(t,e)});for(const n of this.shadow.querySelectorAll("[data-burger-id]"))n.addEventListener("click",e=>{const t=this.data.burgerMenu.find(e=>e.id===n.getAttribute("data-burger-id"));t&&(t.expandable||t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll("[data-user-id]"))n.addEventListener("click",e=>{if("logout"===n.getAttribute("data-action"))return void this.handleLogout();const t=this.data.userMenu.items.find(e=>e.id===n.getAttribute("data-user-id"));t&&(t.children&&t.children.length>0?(e.preventDefault(),this.toggleExpand(t.id)):t.disabled||this.handleNavClick(t,e))});for(const n of this.shadow.querySelectorAll(".drawer__child"))n.addEventListener("click",e=>{const t=n.getAttribute("data-nav-id");if(t)for(const n of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=n.children?.find(n=>n.id===t);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const n of this.shadow.querySelectorAll(".headbar__lang-option"))n.addEventListener("click",()=>{const e=n.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}l.apiCache=new Map,l.pendingFetches=new Map,customElements.define("startnext-header",l);const d=`\n ${t}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer {\n max-width: 1200px;\n margin: 0 auto;\n padding: 60px 24px 40px;\n text-align: center;\n }\n\n /* ── Sections ── */\n .footer__part + .footer__part {\n margin-top: 40px;\n }\n\n .footer__part--sm + .footer__part--sm {\n margin-top: 20px;\n }\n\n /* ── Title ── */\n .footer__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 24px;\n color: var(--footer-text, #FFFFFF);\n }\n\n /* ── Social ── */\n .footer__social {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px;\n }\n\n .footer__social-link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n color: var(--footer-text, #FFFFFF);\n transition: transform 0.3s ease;\n }\n\n .footer__social-link:hover {\n animation: logoScale 0.5s linear 1;\n }\n\n .footer__social-link:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 4px;\n }\n\n @keyframes logoScale {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n\n @media (min-width: 576px) {\n .footer__social {\n gap: 24px;\n }\n }\n\n /* ── Stats ── */\n .footer__stats {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 16px 48px;\n }\n\n .footer__stat-item {\n text-align: center;\n }\n\n .footer__stat-value {\n display: block;\n font-size: 32px;\n font-weight: 800;\n line-height: 1;\n }\n\n .footer__stat-caption {\n display: block;\n font-size: 13px;\n margin-top: 8px;\n opacity: 0.8;\n }\n\n /* ── Navigation columns ── */\n .footer__columns {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n text-align: left;\n }\n\n .footer__nav-title {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 12px;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__nav {\n list-style: none;\n padding: 0;\n margin: 0;\n line-height: 1.8;\n }\n\n .footer__nav a {\n font-size: 15px;\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__nav a:hover {\n opacity: 0.7;\n }\n\n .footer__nav a:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n /* ── B Corp ── */\n .footer__bcorp {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n\n .footer__bcorp-badge {\n flex-shrink: 0;\n width: 80px;\n height: auto;\n }\n\n .footer__bcorp-badge svg {\n width: 80px;\n height: auto;\n display: block;\n }\n\n .footer__bcorp-label {\n font-size: 15px;\n font-weight: 800;\n margin-bottom: 4px;\n }\n\n .footer__bcorp-text {\n font-size: 14px;\n line-height: 1.5;\n opacity: 0.85;\n }\n\n .footer__bcorp-line {\n width: 100%;\n max-width: 180px;\n height: 3px;\n background: var(--footer-text, #FFFFFF);\n margin-top: 12px;\n }\n\n /* ── Funding notice ── */\n .footer__funding {\n text-align: left;\n max-width: 900px;\n margin: 0 auto;\n }\n\n .footer__funding-title {\n font-size: 15px;\n font-weight: 700;\n margin-bottom: 8px;\n }\n\n .footer__funding-text {\n font-size: 14px;\n line-height: 1.6;\n opacity: 0.85;\n }\n\n /* ── Payments ── */\n .footer__payments-title {\n font-size: 16px;\n font-weight: 700;\n margin-bottom: 16px;\n }\n\n .footer__payments {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 8px 40px;\n }\n\n .footer__payment {\n font-size: 15px;\n opacity: 0.85;\n }\n\n /* ── Logo ── */\n .footer__logo {\n display: inline-flex;\n color: var(--footer-text, #FFFFFF);\n }\n\n .footer__logo:hover {\n opacity: 0.8;\n }\n\n .footer__logo:focus-visible {\n outline: 2px solid var(--footer-link-hover, #06E481);\n outline-offset: 4px;\n border-radius: 4px;\n }\n\n /* ── Claim ── */\n .footer__claim {\n font-size: 20px;\n font-weight: 600;\n }\n\n /* ── Dimmed section (legal + copyright) ── */\n .footer__dim {\n opacity: 0.5;\n }\n\n .footer__dim a {\n color: var(--footer-text, #FFFFFF);\n text-decoration: none;\n transition: opacity 0.2s;\n }\n\n .footer__dim a:hover {\n opacity: 0.7;\n }\n\n .footer__legal {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n gap: 4px 20px;\n font-size: 14px;\n margin-bottom: 8px;\n }\n\n .footer__copyright {\n font-size: 14px;\n }\n\n /* ── Responsive ── */\n @media (max-width: 767px) {\n .footer__columns {\n grid-template-columns: 1fr 1fr;\n gap: 32px 24px;\n }\n\n .footer__bcorp {\n grid-column: 1 / -1;\n justify-content: center;\n }\n\n .footer__stat-value {\n font-size: 26px;\n }\n\n .footer__funding {\n text-align: center;\n }\n }\n\n @media (max-width: 479px) {\n .footer {\n padding: 40px 16px 32px;\n }\n\n .footer__columns {\n grid-template-columns: 1fr;\n text-align: center;\n }\n\n .footer__bcorp {\n flex-direction: column;\n align-items: center;\n text-align: center;\n }\n\n .footer__bcorp-line {\n margin-left: auto;\n margin-right: auto;\n }\n\n .footer__stats {\n flex-direction: column;\n gap: 24px;\n }\n }\n`;class h extends n{constructor(){super(...arguments),this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(n){this.isConnected&&("lang-sync"!==n?(this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==n&&"api-url"!==n||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=n=>{this.setAttribute("lang",n.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const n=h.apiCache.get(this.currentLang);return n||(this.currentLang,{socialTitle:"",social:[],statsTitle:"",stats:[],columns:[],bcorp:{label:"",description:""},funding:{title:"",text:""},payments:{title:"",methods:[]},claim:"",legalLinks:[],copyright:"",theme:{"--footer-bg":"#304b50","--footer-text":"#FFFFFF","--footer-link-hover":"#06E481","--footer-border":"rgba(255, 255, 255, 0.15)"}})}async loadApiData(){const n=this.getAttribute("api-url");if(!n)return;const e=this.currentLang;if(h.apiCache.has(e))return;if(h.pendingFetches.has(e))return await h.pendingFetches.get(e).catch(()=>{}),void(this.isConnected&&this.currentLang===e&&h.apiCache.has(e)&&(this.data=h.apiCache.get(e),this.render(),this.renderLightDomNav()));const t=(async()=>{const t=await fetch(`${n}/api/footer?lang=${encodeURIComponent(e)}`);if(!t.ok)throw new Error(`HTTP ${t.status}`);const a={...await t.json(),theme:this.data.theme};h.apiCache.set(e,a),this.isConnected&&this.currentLang===e&&(this.data=a,this.render(),this.renderLightDomNav())})();h.pendingFetches.set(e,t);try{await t}catch(n){console.warn("[StartnextFooter] API fetch failed, using fallback data",n)}finally{h.pendingFetches.delete(e)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const n=document.createElement("nav");n.setAttribute("data-crawler-nav",""),n.setAttribute("aria-hidden","true"),n.style.display="none";for(const e of this.data.columns){const t=document.createElement("div");t.setAttribute("data-section",e.title.toLowerCase());for(const n of e.links){const e=document.createElement("a");e.href=n.url,e.textContent=n.label,t.appendChild(e)}n.appendChild(t)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const n of this.data.legalLinks){const t=document.createElement("a");t.href=n.url,t.textContent=n.label,e.appendChild(t)}n.appendChild(e),this.appendChild(n)}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const n=document.createElement("div");var e;n.innerHTML=`\n <footer class="footer" role="contentinfo">\n \x3c!-- Social --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${(e=this.data).socialTitle}</h3>\n <div class="footer__social" aria-label="Soziale Medien">\n ${e.social.map(n=>`\n <a href="${n.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${n.platform}">\n ${o(n.platform,32)}\n </a>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Stats --\x3e\n <div class="footer__part">\n <h3 class="footer__title">${e.statsTitle}</h3>\n <div class="footer__stats">\n ${e.stats.map(n=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${n.value}</span>\n <span class="footer__stat-caption">${n.caption}</span>\n </div>\n `).join("")}\n </div>\n </div>\n\n \x3c!-- Navigation columns + B Corp --\x3e\n <div class="footer__part">\n <div class="footer__columns">\n ${e.columns.map(n=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${n.title}</h4>\n <ul class="footer__nav">\n ${n.links.map(n=>`<li><a href="${n.url}" class="footer__link">${n.label}</a></li>`).join("")}\n </ul>\n </div>\n `).join("")}\n <div class="footer__bcorp">\n <div class="footer__bcorp-badge"><svg viewBox="0 0 120 160" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n <rect x="2" y="2" width="116" height="156" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>\n <text x="60" y="55" text-anchor="middle" font-size="50" font-weight="800" fill="currentColor">B</text>\n <line x1="20" y1="80" x2="100" y2="80" stroke="currentColor" stroke-width="2"/>\n <text x="60" y="105" text-anchor="middle" font-size="13" font-weight="600" fill="currentColor">Corporation</text>\n</svg></div>\n <div>\n <div class="footer__bcorp-label">${e.bcorp.label}</div>\n <div class="footer__bcorp-text">${e.bcorp.description}</div>\n <div class="footer__bcorp-line"></div>\n </div>\n </div>\n </div>\n </div>\n\n \x3c!-- Funding notice --\x3e\n <div class="footer__part">\n <div class="footer__funding">\n <div class="footer__funding-title">${e.funding.title}</div>\n <div class="footer__funding-text">${e.funding.text}</div>\n </div>\n </div>\n\n \x3c!-- Payment methods --\x3e\n <div class="footer__part">\n <div class="footer__payments-title">${e.payments.title}</div>\n <div class="footer__payments">\n ${e.payments.methods.map(n=>`<span class="footer__payment">${n}</span>`).join("")}\n </div>\n </div>\n\n \x3c!-- Logo --\x3e\n <div class="footer__part footer__part--sm">\n <a href="/" aria-label="Startnext Homepage" class="footer__logo">\n ${o("startnext-s",64)}\n </a>\n </div>\n\n \x3c!-- Claim --\x3e\n <div class="footer__part footer__part--sm">\n <div class="footer__claim">${e.claim}</div>\n </div>\n\n \x3c!-- Legal + Copyright --\x3e\n <div class="footer__part footer__dim">\n <div class="footer__legal">\n ${e.legalLinks.map(n=>`<a href="${n.url}" class="footer__link">${n.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(n),this.attachEvents()}attachEvents(){for(const n of this.shadow.querySelectorAll(".footer__link"))n.addEventListener("click",e=>{const t=n.getAttribute("href")||"",a=n.textContent?.trim()||"";this.emit("navigation-click",{item:{url:t,label:a}})||e.preventDefault()})}}h.observedAttributes=["lang","api-url","lang-sync"],h.apiCache=new Map,h.pendingFetches=new Map,customElements.define("startnext-footer",h);export{h as StartnextFooter,l as StartnextHeader};