@startnext/chrome 0.3.0 → 0.3.2
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.
- package/README.md +121 -8
- package/dist/components/footer/StartnextFooter.d.ts +2 -0
- package/dist/components/footer/StartnextFooter.d.ts.map +1 -1
- package/dist/components/header/StartnextHeader.d.ts +3 -0
- package/dist/components/header/StartnextHeader.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.umd.js +1 -1
- package/package.json +9 -8
package/README.md
CHANGED
|
@@ -14,22 +14,37 @@ pnpm add @startnext/chrome
|
|
|
14
14
|
|
|
15
15
|
## Quick Start
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Es gibt zwei Integrationsmodi:
|
|
18
|
+
|
|
19
|
+
1. **Client-Side Rendering** — Web Component fetcht Daten selbst (einfach, kein Server noetig)
|
|
20
|
+
2. **Server-Side Rendering** — Server holt fertig gerendertes HTML von der API (sofort sichtbar ohne JS, bessere Performance + SEO)
|
|
21
|
+
|
|
22
|
+
### Client-Side: Via CDN (PHP, Vanilla HTML)
|
|
23
|
+
```html
|
|
24
|
+
<script type="module" src="https://unpkg.com/@startnext/chrome@latest/dist/index.js"></script>
|
|
25
|
+
|
|
26
|
+
<startnext-header api-url="https://scs-api.vercel.app"></startnext-header>
|
|
27
|
+
<startnext-footer api-url="https://scs-api.vercel.app"></startnext-footer>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Client-Side: Modern JavaScript (React, Vue, etc.)
|
|
18
31
|
```javascript
|
|
19
32
|
import '@startnext/chrome';
|
|
20
33
|
```
|
|
21
34
|
|
|
22
35
|
```html
|
|
23
|
-
<startnext-header></startnext-header>
|
|
24
|
-
<startnext-footer></startnext-footer>
|
|
36
|
+
<startnext-header api-url="https://scs-api.vercel.app"></startnext-header>
|
|
37
|
+
<startnext-footer api-url="https://scs-api.vercel.app"></startnext-footer>
|
|
25
38
|
```
|
|
26
39
|
|
|
27
|
-
###
|
|
28
|
-
```html
|
|
29
|
-
<script type="module" src="https://unpkg.com/@startnext/chrome@latest/dist/index.js"></script>
|
|
40
|
+
### Server-Side Rendering (empfohlen)
|
|
30
41
|
|
|
31
|
-
|
|
32
|
-
|
|
42
|
+
SSR-HTML von der API holen und direkt einbinden. Die Web Component JS hydriert anschliessend (haengt Events an, statt DOM neu zu rendern). Siehe Abschnitt [SSR mit React / Next.js](#ssr-mit-react--nextjs-app-router) oder [SSR — PHP / ESI](#ssr--php-beispiel) weiter unten.
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
# SSR-HTML holen (z.B. serverseitig per fetch, file_get_contents, ESI)
|
|
46
|
+
curl "https://scs-api.vercel.app/api/header/render?lang=de&large-animation"
|
|
47
|
+
curl "https://scs-api.vercel.app/api/footer/render?lang=de"
|
|
33
48
|
```
|
|
34
49
|
|
|
35
50
|
## API
|
|
@@ -244,6 +259,104 @@ Wenn der Server HTML mit Declarative Shadow DOM (`<template shadowrootmode="open
|
|
|
244
259
|
<script type="module" src="@startnext/chrome"></script>
|
|
245
260
|
```
|
|
246
261
|
|
|
262
|
+
### SSR mit React / Next.js (App Router)
|
|
263
|
+
|
|
264
|
+
React's `dangerouslySetInnerHTML` nutzt intern `innerHTML`, das Declarative Shadow DOM **nicht** parsed. Daher muss nach der Hydration `setHTMLUnsafe()` als Fallback aufgerufen werden.
|
|
265
|
+
|
|
266
|
+
**1. Layout (Server Component) — SSR HTML von der API fetchen:**
|
|
267
|
+
|
|
268
|
+
```tsx
|
|
269
|
+
// app/[locale]/layout.tsx
|
|
270
|
+
async function fetchChromeHtml(path: string): Promise<string> {
|
|
271
|
+
try {
|
|
272
|
+
const res = await fetch(`${process.env.NEXT_PUBLIC_SCS_API_URL}${path}`, {
|
|
273
|
+
next: { revalidate: 60 },
|
|
274
|
+
});
|
|
275
|
+
if (!res.ok) return "";
|
|
276
|
+
return await res.text();
|
|
277
|
+
} catch {
|
|
278
|
+
return "";
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
export default async function Layout({ children, params }) {
|
|
283
|
+
const { locale } = await params;
|
|
284
|
+
const [headerHtml, footerHtml] = await Promise.all([
|
|
285
|
+
fetchChromeHtml(`/api/header/render?lang=${locale}&large-animation`),
|
|
286
|
+
fetchChromeHtml(`/api/footer/render?lang=${locale}`),
|
|
287
|
+
]);
|
|
288
|
+
|
|
289
|
+
return (
|
|
290
|
+
<html lang={locale}>
|
|
291
|
+
<body>
|
|
292
|
+
<ChromeHeader ssrHtml={headerHtml} />
|
|
293
|
+
<main>{children}</main>
|
|
294
|
+
<ChromeFooter ssrHtml={footerHtml} />
|
|
295
|
+
</body>
|
|
296
|
+
</html>
|
|
297
|
+
);
|
|
298
|
+
}
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
**2. Client Component — SSR HTML rendern + DSD Fallback + Hydration:**
|
|
302
|
+
|
|
303
|
+
```tsx
|
|
304
|
+
// components/ChromeHeader.tsx
|
|
305
|
+
"use client";
|
|
306
|
+
import { useEffect, useRef, useState } from "react";
|
|
307
|
+
|
|
308
|
+
export function ChromeHeader({ ssrHtml }: { ssrHtml?: string }) {
|
|
309
|
+
const containerRef = useRef<HTMLDivElement>(null);
|
|
310
|
+
const [mounted, setMounted] = useState(false);
|
|
311
|
+
|
|
312
|
+
useEffect(() => {
|
|
313
|
+
const container = containerRef.current;
|
|
314
|
+
if (container && ssrHtml) {
|
|
315
|
+
// Falls DSD nicht geparsed wurde (innerHTML parsed kein DSD),
|
|
316
|
+
// setHTMLUnsafe() als Fallback nutzen
|
|
317
|
+
const header = container.querySelector("startnext-header");
|
|
318
|
+
if (!header?.shadowRoot && "setHTMLUnsafe" in Element.prototype) {
|
|
319
|
+
container.setHTMLUnsafe(ssrHtml);
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
import("@startnext/chrome"); // Web Component JS laden → Hydration
|
|
323
|
+
setMounted(true);
|
|
324
|
+
}, [ssrHtml]);
|
|
325
|
+
|
|
326
|
+
if (ssrHtml) {
|
|
327
|
+
return (
|
|
328
|
+
<div
|
|
329
|
+
ref={containerRef}
|
|
330
|
+
style={{ display: "contents" }}
|
|
331
|
+
suppressHydrationWarning
|
|
332
|
+
dangerouslySetInnerHTML={{ __html: ssrHtml }}
|
|
333
|
+
/>
|
|
334
|
+
);
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
// Fallback: Client-Side Rendering (wenn SSR HTML nicht verfuegbar)
|
|
338
|
+
return <startnext-header api-url={process.env.NEXT_PUBLIC_SCS_API_URL} />;
|
|
339
|
+
}
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
**Wichtig:** `dangerouslySetInnerHTML` sorgt dafuer, dass das SSR-HTML im initialen HTML-Stream enthalten ist (fuer Crawler und First Paint). `setHTMLUnsafe()` stellt sicher, dass DSD auch nach React-Hydration oder Client-Side-Navigation korrekt geparsed wird.
|
|
343
|
+
|
|
344
|
+
**Render-Endpoints (Query-Parameter):**
|
|
345
|
+
|
|
346
|
+
| Parameter | Typ | Beschreibung |
|
|
347
|
+
|-----------|-----|-------------|
|
|
348
|
+
| `lang` | `de` \| `en` | Sprache |
|
|
349
|
+
| `light` | flag | Heller Header |
|
|
350
|
+
| `large-animation` | flag | Grosse Logo-Animation |
|
|
351
|
+
| `hide-color-mode` | flag | Color-Mode Toggle verstecken |
|
|
352
|
+
| `hide-lang` | flag | Language-Switcher verstecken |
|
|
353
|
+
| `hide-login` | flag | Login-Button verstecken |
|
|
354
|
+
| `show-back-link` | flag | Back-Link anzeigen |
|
|
355
|
+
| `back-url` | string | Back-Link URL |
|
|
356
|
+
| `back-label` | string | Back-Link Text |
|
|
357
|
+
|
|
358
|
+
Beispiel: `GET /api/header/render?lang=de&large-animation&hide-login&show-back-link`
|
|
359
|
+
|
|
247
360
|
## Browser Support
|
|
248
361
|
|
|
249
362
|
- Chrome/Edge 90+ (Declarative Shadow DOM: Chrome 90+, Firefox 123+, Safari 16.4+)
|
|
@@ -4,6 +4,8 @@ export declare class StartnextFooter extends BaseComponent {
|
|
|
4
4
|
private data;
|
|
5
5
|
/** Cached API data per language. */
|
|
6
6
|
private apiCache;
|
|
7
|
+
/** True while SSR content should be preserved (between hydration and first API data load). */
|
|
8
|
+
private _preserveSsrContent;
|
|
7
9
|
/** Bound handler for document-level language-change events. */
|
|
8
10
|
private _langSyncHandler;
|
|
9
11
|
private get currentLang();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,WAAoC;IAE7D,OAAO,CAAC,IAAI,CAAc;IAC1B,oCAAoC;IACpC,OAAO,CAAC,QAAQ,CAAiC;IACjD,+DAA+D;IAC/D,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,iBAAiB,IAAI,IAAI;
|
|
1
|
+
{"version":3,"file":"StartnextFooter.d.ts","sourceRoot":"","sources":["../../../src/components/footer/StartnextFooter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAMzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,MAAM,CAAC,kBAAkB,WAAoC;IAE7D,OAAO,CAAC,IAAI,CAAc;IAC1B,oCAAoC;IACpC,OAAO,CAAC,QAAQ,CAAiC;IACjD,8FAA8F;IAC9F,OAAO,CAAC,mBAAmB,CAAS;IACpC,+DAA+D;IAC/D,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,iBAAiB,IAAI,IAAI;IAmBzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAqB5C,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,gBAAgB;IAOxB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IAwBzB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,MAAM;IAkBd,OAAO,CAAC,YAAY;CAUrB"}
|
|
@@ -12,6 +12,9 @@ export declare class StartnextHeader extends BaseComponent {
|
|
|
12
12
|
private pendingRaf;
|
|
13
13
|
/** Cached API data per language, so we don't re-fetch on every re-render. */
|
|
14
14
|
private apiCache;
|
|
15
|
+
/** True while SSR content should be preserved (between hydration and first API data load).
|
|
16
|
+
* Prevents attribute changes from triggering a full re-render with empty default data. */
|
|
17
|
+
private _preserveSsrContent;
|
|
15
18
|
private handleScrollBound;
|
|
16
19
|
private handleKeydownBound;
|
|
17
20
|
private handleResizeBound;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAiC;
|
|
1
|
+
{"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAWzD,qBAAa,eAAgB,SAAQ,aAAa;IAChD,OAAO,CAAC,IAAI,CAAc;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,UAAU,CAA8B;IAChD,OAAO,CAAC,UAAU,CAAuB;IACzC,6EAA6E;IAC7E,OAAO,CAAC,QAAQ,CAAiC;IACjD;+FAC2F;IAC3F,OAAO,CAAC,mBAAmB,CAAS;IAEpC,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,aAAa,CAAS;IAE9B,OAAO,KAAK,WAAW,GAEtB;IAED,6EAA6E;IAC7E,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IA4BzB,4EAA4E;IAC5E,OAAO,CAAC,aAAa;IAMrB,mEAAmE;YACrD,WAAW;IA8BzB,oBAAoB,IAAI,IAAI;IAU5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAqB5C,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA0BlB,OAAO,CAAC,YAAY;IAgDpB,OAAO,CAAC,mBAAmB;IAoC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAK5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,iBAAiB;IAsDzB,OAAO,CAAC,MAAM;IAuCd,OAAO,CAAC,YAAY;CAkErB"}
|
package/dist/index.js
CHANGED
|
@@ -4,4 +4,4 @@ class t extends HTMLElement{constructor(){super();const t=this.shadowRoot;this.s
|
|
|
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 d(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const c={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>',arrowLeft:d('\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),close:d('\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:d('\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:d('\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":d('\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:d('\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":d('\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:d('\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:d('\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:d('\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":d('\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:d('\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:d('\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),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 m(t,e){const i=c[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function f(t,e){return t.userMenu.items.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const i=["drawer__item"];t.disabled&&i.push("drawer__item--disabled"),"outline"===t.style&&i.push("drawer__item--outline");const a=t.children&&t.children.length>0,n=e.has(t.id),s="logout"===t.action,r=s?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||s?"":`href="${t.url}"${t.target?` target="${t.target}"`:""}`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${n}"`:""}\n ${s?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${c[t.icon]||""}</span>`:""}\n ${t.label}\n ${t.badge?`<span class="drawer__item-badge">${t.badge}</span>`:""}\n ${a||t.expandable?`<span class="drawer__item-expand${n?" expanded":""}">${c.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${n?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class u extends t{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.apiCache=new Map,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","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","show-back-link","back-url","back-label","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get isLightHeader(){const t=this.getAttribute("color-mode");return t?"dark"===t:this.getBoolAttr("light",!1)}ui(t){return function(t,i){return e[t]?.[i]||e[t]?.de||t}(t,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.querySelector("[data-crawler-nav]")||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 t=this.apiCache.get(this.currentLang);return t||function(t="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:t,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/header?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this.data=i,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()}catch(t){console.warn("[StartnextHeader] API fetch failed, using fallback data",t)}}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(t){!this._skipCallback&&this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==t&&"api-url"!==t||this.loadApiData())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),t.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()})}initLottie(){const t=this.shadow.querySelector("#page-logo-animation");if(!t)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const e=this.isLightHeader?o:h;this.lottieAnim=r.loadAnimation({container:t,renderer:"svg",loop:!1,autoplay:!1,animationData:e}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const t=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let i=!1;const a=t>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),i=!0);const n=t-this.lastScrollY,s=document.querySelector("main, [data-content], .page-content"),r=s?.getBoundingClientRect().top??1/0,o=this.getBoolAttr("large-animation",!1);n>8&&r<-90&&t>(o?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):n<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(n)>8&&(this.lastScrollY=t),this.updateLogoAnimation(t),i&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(t){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,i=e+400,a=Math.max(0,Math.min(1,(t-e)/(i-e))),n=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(n,!0),!this.getBoolAttr("large-animation",!1))return;const s=this.shadow.querySelector(".headbar__pageLogo--animation-large"),r=this.shadow.querySelector(".headbar__claim--large");if(!s)return;const o=window.innerWidth,h=o<768?-110:o<1100?-120:-140,l=o<768?.65:.5;r&&(r.style.opacity=String(1-Math.min(1,a/.05)));const p=Math.max(0,Math.min(1,(a-.05)/.25)),d=1-Math.pow(1-p,4);s.style.transform=`translateY(${d*h}px) scale(${1+d*(l-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(t){"Escape"===t.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(t){if(!this.langMenuOpen)return;const e=t.composedPath(),i=this.shadow.querySelector(".headbar__lang");i&&!e.includes(i)&&this.toggleLangMenu(!1)}toggleBurger(t){this.burgerOpen=t??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(t){this.userMenuOpen=t??!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(t){const e=this.shadow.querySelector("burger"===t?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(t,e){this.emit("navigation-click",{item:t})||e.preventDefault()}handleCtaClick(t){this.emit("cta-click",{url:this.data.ctaButton.url})||t.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(t){this.setAttribute("lang",t),this.emit("language-change",{language:t})}toggleLangMenu(t){this.langMenuOpen=t??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),i=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),i?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(t){this.expandedSections.has(t)?this.expandedSections.delete(t):this.expandedSections.add(t),this.updateExpandStates()}updateExpandStates(){for(const t of this.shadow.querySelectorAll("[data-expand-id]")){const e=t.getAttribute("data-expand-id"),i=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",i),t.querySelector(".drawer__item-expand")?.classList.toggle("expanded",i),t.setAttribute("aria-expanded",String(i))}}initColorMode(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const t=document.documentElement;t.classList.contains("dark")?this.applyColorMode("dark"):t.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(t),this._skipCallback=!0,this.setAttribute("color-mode",t),"dark"===t?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 t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";const e=e=>{const i=document.createElement("div");return i.setAttribute("data-section",e),t.appendChild(i),i},i=(t,e,i)=>{const a=document.createElement("a");a.href=e,a.textContent=i,t.appendChild(a)},a=e("main-navigation");for(const t of this.data.mainNavigation)i(a,t.url,t.label);i(a,this.data.ctaButton.url,this.data.ctaButton.label);const n=[];for(const t of this.data.burgerMenu)if("divider"!==t.type&&"logout"!==t.action&&t.url)if(t.children){const a=e(t.label.toLowerCase());i(a,t.url,t.label);for(const e of t.children)e.url&&i(a,e.url,e.label)}else t.small&&n.push(t);if(n.length){const t=e("legal");for(const e of n)i(t,e.url,e.label)}this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();const t=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),n=this.getBoolAttr("hide-lang",!1),s=this.getBoolAttr("hide-login",!1),r=this.getBoolAttr("show-back-link",!1),o=this.getAttribute("back-url")||this.data.backLink?.url||"",h=this.getAttribute("back-label")||this.data.backLink?.label||"",l=this.getAttribute("user-name")||this.data.userMenu.user.name,d=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(p));const m=document.createElement("div");var u,x,g;m.innerHTML=`\n <header class="headbar${(u={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:n,hideLogin:s,showBackLink:r,backUrl:o,backLabel:h,userName:l,userAvatar:d,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,g=this.expandedSections,x.burgerMenu.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];t.highlighted&&e.push("drawer__item--highlighted"),t.small&&e.push("drawer__item--small");const i=t.expandable||t.children&&t.children.length>0,a=g.has(t.id),n=!t.highlighted&&!t.small&&!i&&t.url;let s=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"${t.target?` target="${t.target}"`:""}`:""}\n ${i?`data-expand-id="${t.id}" aria-expanded="${a}"`:""}\n data-burger-id="${t.id}">\n ${t.label}\n ${i?`<span class="drawer__item-expand${a?" expanded":""}">${c.angleDownSmall}</span>`:""}\n ${n?`<span class="drawer__item-nav-arrow">${c.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(s+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),s}).join("")),userItemsHtml:f(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="${u.ui("menuOpen")}" aria-expanded="false">\n ${c.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <div class="headerbar__btn">\n <a href="${u.data.ctaButton.url}" class="cta-link" aria-label="${u.data.ctaButton.label}">\n <span class="headerbar__btn--text">${u.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${c.rocket}</span>\n </a>\n </div>\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${u.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${u.ui("mainNav")}">\n ${u.data.mainNavigation.sort((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}"${t.target?` target="${t.target}"`:""} data-nav-id="${t.id}">${t.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${u.ui("homepage")}" class="headbar__pageLogo--animation${u.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${u.isLarge?`<div class="headbar__claim headbar__claim--large">${u.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${u.showBackLink&&u.backUrl?`<a href="${u.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${c.arrowLeft}</span>\n <span class="headbar__back-text">${u.backLabel}</span>\n </a>`:""}\n ${u.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${u.ui("colorMode")}" title="${u.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${c.sun}</span>\n <span class="headbar__color-mode-moon">${c.moon}</span>\n </button>`}\n ${u.hideLang?"":`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${u.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${u.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${c.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${u.ui("langSelect")}">\n ${u.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===u.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===u.currentLang}" data-lang="${t.code}">\n ${t.label}\n </button>`).join("")}\n </div>\n </div>`}\n ${u.hideLogin?"":u.isAuth?`<button class="user-avatar-btn" aria-label="${u.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${u.userAvatar}" alt="${u.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${u.ui("login")}">\n <span class="headbar__login-text">${u.ui("login")}</span>\n <span class="headbar__login-icon">${c["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="${u.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${u.burgerItemsHtml}</div>\n </nav>\n\n ${u.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${u.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${u.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${u.userName}</span>\n </div>\n <div class="drawer__nav">${u.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(m),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",t=>{const e=t.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||t.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",t=>this.handleCtaClick(t));for(const t of this.shadow.querySelectorAll(".headbar__menu-link"))t.addEventListener("click",e=>{const i=this.data.mainNavigation.find(e=>e.id===t.getAttribute("data-nav-id"));i&&this.handleNavClick(i,e)});for(const t of this.shadow.querySelectorAll("[data-burger-id]"))t.addEventListener("click",e=>{const i=this.data.burgerMenu.find(e=>e.id===t.getAttribute("data-burger-id"));i&&(i.expandable||i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll("[data-user-id]"))t.addEventListener("click",e=>{if("logout"===t.getAttribute("data-action"))return void this.handleLogout();const i=this.data.userMenu.items.find(e=>e.id===t.getAttribute("data-user-id"));i&&(i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):i.disabled||this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll(".drawer__child"))t.addEventListener("click",e=>{const i=t.getAttribute("data-nav-id");if(i)for(const t of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=t.children?.find(t=>t.id===i);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const t of this.shadow.querySelectorAll(".headbar__lang-option"))t.addEventListener("click",()=>{const e=t.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}customElements.define("startnext-header",u);const x=`\n ${l}\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 g extends t{constructor(){super(...arguments),this.apiCache=new Map,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.querySelector("[data-crawler-nav]")||this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(t){if(this.isConnected){if("lang-sync"===t)return void(this.langSyncEnabled?this.setupLangSync():this.teardownLangSync());this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==t&&"api-url"!==t||this.loadApiData()}}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=t=>{this.setAttribute("lang",t.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const t=this.apiCache.get(this.currentLang);return t||(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 t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/footer?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this.data=i,this.render(),this.renderLightDomNav()}catch(t){console.warn("[StartnextFooter] API fetch failed, using fallback data",t)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";for(const e of this.data.columns){const i=document.createElement("div");i.setAttribute("data-section",e.title.toLowerCase());for(const t of e.links){const e=document.createElement("a");e.href=t.url,e.textContent=t.label,i.appendChild(e)}t.appendChild(i)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const t of this.data.legalLinks){const i=document.createElement("a");i.href=t.url,i.textContent=t.label,e.appendChild(i)}t.appendChild(e),this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(x));const t=document.createElement("div");var e;t.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(t=>`\n <a href="${t.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${t.platform}">\n ${m(t.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(t=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${t.value}</span>\n <span class="footer__stat-caption">${t.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(t=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${t.title}</h4>\n <ul class="footer__nav">\n ${t.links.map(t=>`<li><a href="${t.url}" class="footer__link">${t.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(t=>`<span class="footer__payment">${t}</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 ${m("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(t=>`<a href="${t.url}" class="footer__link">${t.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(t),this.attachEvents()}attachEvents(){for(const t of this.shadow.querySelectorAll(".footer__link"))t.addEventListener("click",e=>{const i=t.getAttribute("href")||"",a=t.textContent?.trim()||"";this.emit("navigation-click",{item:{url:i,label:a}})||e.preventDefault()})}}g.observedAttributes=["lang","api-url","lang-sync"],customElements.define("startnext-footer",g);export{g as StartnextFooter,u as StartnextHeader};
|
|
7
|
+
*/;function d(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const c={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>',arrowLeft:d('\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),close:d('\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:d('\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:d('\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":d('\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:d('\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":d('\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:d('\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:d('\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:d('\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":d('\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:d('\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:d('\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),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 m(t,e){const i=c[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function f(t,e){return t.userMenu.items.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const i=["drawer__item"];t.disabled&&i.push("drawer__item--disabled"),"outline"===t.style&&i.push("drawer__item--outline");const a=t.children&&t.children.length>0,n=e.has(t.id),s="logout"===t.action,r=s?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||s?"":`href="${t.url}"${t.target?` target="${t.target}"`:""}`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${n}"`:""}\n ${s?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${c[t.icon]||""}</span>`:""}\n ${t.label}\n ${t.badge?`<span class="drawer__item-badge">${t.badge}</span>`:""}\n ${a||t.expandable?`<span class="drawer__item-expand${n?" expanded":""}">${c.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${n?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class u extends t{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.apiCache=new Map,this._preserveSsrContent=!1,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","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","show-back-link","back-url","back-label","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get isLightHeader(){const t=this.getAttribute("color-mode");return t?"dark"===t:this.getBoolAttr("light",!1)}ui(t){return function(t,i){return e[t]?.[i]||e[t]?.de||t}(t,this.currentLang)}connectedCallback(){const t=this.isHydrating;this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),t&&(this._preserveSsrContent=!0),this.querySelector("[data-crawler-nav]")||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 t=this.apiCache.get(this.currentLang);return t||function(t="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:t,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/header?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this._preserveSsrContent=!1,this.data=i,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()}catch(t){console.warn("[StartnextHeader] API fetch failed, using fallback data",t)}}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(t){!this._skipCallback&&this.isConnected&&(this._preserveSsrContent||(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()),"lang"!==t&&"api-url"!==t||this.loadApiData())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),t.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()})}initLottie(){const t=this.shadow.querySelector("#page-logo-animation");if(!t)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const e=this.isLightHeader?o:h;this.lottieAnim=r.loadAnimation({container:t,renderer:"svg",loop:!1,autoplay:!1,animationData:e}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const t=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let i=!1;const a=t>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),i=!0);const n=t-this.lastScrollY,s=document.querySelector("main, [data-content], .page-content"),r=s?.getBoundingClientRect().top??1/0,o=this.getBoolAttr("large-animation",!1);n>8&&r<-90&&t>(o?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):n<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(n)>8&&(this.lastScrollY=t),this.updateLogoAnimation(t),i&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(t){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,i=e+400,a=Math.max(0,Math.min(1,(t-e)/(i-e))),n=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(n,!0),!this.getBoolAttr("large-animation",!1))return;const s=this.shadow.querySelector(".headbar__pageLogo--animation-large"),r=this.shadow.querySelector(".headbar__claim--large");if(!s)return;const o=window.innerWidth,h=o<768?-110:o<1100?-120:-140,l=o<768?.65:.5;r&&(r.style.opacity=String(1-Math.min(1,a/.05)));const p=Math.max(0,Math.min(1,(a-.05)/.25)),d=1-Math.pow(1-p,4);s.style.transform=`translateY(${d*h}px) scale(${1+d*(l-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(t){"Escape"===t.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(t){if(!this.langMenuOpen)return;const e=t.composedPath(),i=this.shadow.querySelector(".headbar__lang");i&&!e.includes(i)&&this.toggleLangMenu(!1)}toggleBurger(t){this.burgerOpen=t??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(t){this.userMenuOpen=t??!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(t){const e=this.shadow.querySelector("burger"===t?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(t,e){this.emit("navigation-click",{item:t})||e.preventDefault()}handleCtaClick(t){this.emit("cta-click",{url:this.data.ctaButton.url})||t.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(t){this.setAttribute("lang",t),this.emit("language-change",{language:t})}toggleLangMenu(t){this.langMenuOpen=t??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),i=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),i?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(t){this.expandedSections.has(t)?this.expandedSections.delete(t):this.expandedSections.add(t),this.updateExpandStates()}updateExpandStates(){for(const t of this.shadow.querySelectorAll("[data-expand-id]")){const e=t.getAttribute("data-expand-id"),i=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",i),t.querySelector(".drawer__item-expand")?.classList.toggle("expanded",i),t.setAttribute("aria-expanded",String(i))}}initColorMode(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const t=document.documentElement;t.classList.contains("dark")?this.applyColorMode("dark"):t.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(t),this._skipCallback=!0,this.setAttribute("color-mode",t),"dark"===t?this.setAttribute("light",""):this.removeAttribute("light"),this._skipCallback=!1,this.isConnected&&!this.isHydrating&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";const e=e=>{const i=document.createElement("div");return i.setAttribute("data-section",e),t.appendChild(i),i},i=(t,e,i)=>{const a=document.createElement("a");a.href=e,a.textContent=i,t.appendChild(a)},a=e("main-navigation");for(const t of this.data.mainNavigation)i(a,t.url,t.label);i(a,this.data.ctaButton.url,this.data.ctaButton.label);const n=[];for(const t of this.data.burgerMenu)if("divider"!==t.type&&"logout"!==t.action&&t.url)if(t.children){const a=e(t.label.toLowerCase());i(a,t.url,t.label);for(const e of t.children)e.url&&i(a,e.url,e.label)}else t.small&&n.push(t);if(n.length){const t=e("legal");for(const e of n)i(t,e.url,e.label)}this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();const t=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),n=this.getBoolAttr("hide-lang",!1),s=this.getBoolAttr("hide-login",!1),r=this.getBoolAttr("show-back-link",!1),o=this.getAttribute("back-url")||this.data.backLink?.url||"",h=this.getAttribute("back-label")||this.data.backLink?.label||"",l=this.getAttribute("user-name")||this.data.userMenu.user.name,d=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(p));const m=document.createElement("div");var u,x,g;m.innerHTML=`\n <header class="headbar${(u={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:n,hideLogin:s,showBackLink:r,backUrl:o,backLabel:h,userName:l,userAvatar:d,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,g=this.expandedSections,x.burgerMenu.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];t.highlighted&&e.push("drawer__item--highlighted"),t.small&&e.push("drawer__item--small");const i=t.expandable||t.children&&t.children.length>0,a=g.has(t.id),n=!t.highlighted&&!t.small&&!i&&t.url;let s=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"${t.target?` target="${t.target}"`:""}`:""}\n ${i?`data-expand-id="${t.id}" aria-expanded="${a}"`:""}\n data-burger-id="${t.id}">\n ${t.label}\n ${i?`<span class="drawer__item-expand${a?" expanded":""}">${c.angleDownSmall}</span>`:""}\n ${n?`<span class="drawer__item-nav-arrow">${c.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(s+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),s}).join("")),userItemsHtml:f(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="${u.ui("menuOpen")}" aria-expanded="false">\n ${c.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <div class="headerbar__btn">\n <a href="${u.data.ctaButton.url}" class="cta-link" aria-label="${u.data.ctaButton.label}">\n <span class="headerbar__btn--text">${u.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${c.rocket}</span>\n </a>\n </div>\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${u.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${u.ui("mainNav")}">\n ${u.data.mainNavigation.sort((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}"${t.target?` target="${t.target}"`:""} data-nav-id="${t.id}">${t.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${u.ui("homepage")}" class="headbar__pageLogo--animation${u.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${u.isLarge?`<div class="headbar__claim headbar__claim--large">${u.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${u.showBackLink&&u.backUrl?`<a href="${u.backUrl}" class="headbar__back-link">\n <span class="headbar__back-arrow">${c.arrowLeft}</span>\n <span class="headbar__back-text">${u.backLabel}</span>\n </a>`:""}\n ${u.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${u.ui("colorMode")}" title="${u.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${c.sun}</span>\n <span class="headbar__color-mode-moon">${c.moon}</span>\n </button>`}\n ${u.hideLang?"":`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${u.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${u.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${c.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${u.ui("langSelect")}">\n ${u.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===u.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===u.currentLang}" data-lang="${t.code}">\n ${t.label}\n </button>`).join("")}\n </div>\n </div>`}\n ${u.hideLogin?"":u.isAuth?`<button class="user-avatar-btn" aria-label="${u.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${u.userAvatar}" alt="${u.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${u.ui("login")}">\n <span class="headbar__login-text">${u.ui("login")}</span>\n <span class="headbar__login-icon">${c["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="${u.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${u.burgerItemsHtml}</div>\n </nav>\n\n ${u.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${u.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${u.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${u.userName}</span>\n </div>\n <div class="drawer__nav">${u.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(m),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",t=>{const e=t.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||t.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",t=>this.handleCtaClick(t));for(const t of this.shadow.querySelectorAll(".headbar__menu-link"))t.addEventListener("click",e=>{const i=this.data.mainNavigation.find(e=>e.id===t.getAttribute("data-nav-id"));i&&this.handleNavClick(i,e)});for(const t of this.shadow.querySelectorAll("[data-burger-id]"))t.addEventListener("click",e=>{const i=this.data.burgerMenu.find(e=>e.id===t.getAttribute("data-burger-id"));i&&(i.expandable||i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll("[data-user-id]"))t.addEventListener("click",e=>{if("logout"===t.getAttribute("data-action"))return void this.handleLogout();const i=this.data.userMenu.items.find(e=>e.id===t.getAttribute("data-user-id"));i&&(i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):i.disabled||this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll(".drawer__child"))t.addEventListener("click",e=>{const i=t.getAttribute("data-nav-id");if(i)for(const t of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=t.children?.find(t=>t.id===i);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const t of this.shadow.querySelectorAll(".headbar__lang-option"))t.addEventListener("click",()=>{const e=t.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}customElements.define("startnext-header",u);const x=`\n ${l}\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 g extends t{constructor(){super(...arguments),this.apiCache=new Map,this._preserveSsrContent=!1,this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){const t=this.isHydrating;this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),t&&(this._preserveSsrContent=!0),this.querySelector("[data-crawler-nav]")||this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(t){this.isConnected&&("lang-sync"!==t?(this._preserveSsrContent||(this.data=this.getFooterData(),this.render(),this.renderLightDomNav()),"lang"!==t&&"api-url"!==t||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=t=>{this.setAttribute("lang",t.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const t=this.apiCache.get(this.currentLang);return t||(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 t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/footer?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this._preserveSsrContent=!1,this.data=i,this.render(),this.renderLightDomNav()}catch(t){console.warn("[StartnextFooter] API fetch failed, using fallback data",t)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";for(const e of this.data.columns){const i=document.createElement("div");i.setAttribute("data-section",e.title.toLowerCase());for(const t of e.links){const e=document.createElement("a");e.href=t.url,e.textContent=t.label,i.appendChild(e)}t.appendChild(i)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const t of this.data.legalLinks){const i=document.createElement("a");i.href=t.url,i.textContent=t.label,e.appendChild(i)}t.appendChild(e),this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(x));const t=document.createElement("div");var e;t.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(t=>`\n <a href="${t.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${t.platform}">\n ${m(t.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(t=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${t.value}</span>\n <span class="footer__stat-caption">${t.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(t=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${t.title}</h4>\n <ul class="footer__nav">\n ${t.links.map(t=>`<li><a href="${t.url}" class="footer__link">${t.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(t=>`<span class="footer__payment">${t}</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 ${m("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(t=>`<a href="${t.url}" class="footer__link">${t.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(t),this.attachEvents()}attachEvents(){for(const t of this.shadow.querySelectorAll(".footer__link"))t.addEventListener("click",e=>{const i=t.getAttribute("href")||"",a=t.textContent?.trim()||"";this.emit("navigation-click",{item:{url:i,label:a}})||e.preventDefault()})}}g.observedAttributes=["lang","api-url","lang-sync"],customElements.define("startnext-footer",g);export{g as StartnextFooter,u as StartnextHeader};
|
package/dist/index.umd.js
CHANGED
|
@@ -4,4 +4,4 @@
|
|
|
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 c(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const m={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>',arrowLeft:c('\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),close:c('\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:c('\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:c('\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":c('\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:c('\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":c('\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:c('\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:c('\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:c('\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":c('\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:c('\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:c('\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),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 f(t,e){const i=m[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function u(t,e){return t.userMenu.items.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const i=["drawer__item"];t.disabled&&i.push("drawer__item--disabled"),"outline"===t.style&&i.push("drawer__item--outline");const a=t.children&&t.children.length>0,n=e.has(t.id),s="logout"===t.action,r=s?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||s?"":`href="${t.url}"${t.target?` target="${t.target}"`:""}`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${n}"`:""}\n ${s?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${m[t.icon]||""}</span>`:""}\n ${t.label}\n ${t.badge?`<span class="drawer__item-badge">${t.badge}</span>`:""}\n ${a||t.expandable?`<span class="drawer__item-expand${n?" expanded":""}">${m.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${n?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class x extends e{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.apiCache=new Map,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","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","show-back-link","back-url","back-label","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get isLightHeader(){const t=this.getAttribute("color-mode");return t?"dark"===t:this.getBoolAttr("light",!1)}ui(t){return function(t,e){return i[t]?.[e]||i[t]?.de||t}(t,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),this.querySelector("[data-crawler-nav]")||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 t=this.apiCache.get(this.currentLang);return t||function(t="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:t,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/header?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this.data=i,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()}catch(t){console.warn("[StartnextHeader] API fetch failed, using fallback data",t)}}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(t){!this._skipCallback&&this.isConnected&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender(),"lang"!==t&&"api-url"!==t||this.loadApiData())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),t.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()})}initLottie(){const t=this.shadow.querySelector("#page-logo-animation");if(!t)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const e=this.isLightHeader?h:l;this.lottieAnim=o.loadAnimation({container:t,renderer:"svg",loop:!1,autoplay:!1,animationData:e}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const t=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let i=!1;const a=t>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),i=!0);const n=t-this.lastScrollY,s=document.querySelector("main, [data-content], .page-content"),r=s?.getBoundingClientRect().top??1/0,o=this.getBoolAttr("large-animation",!1);n>8&&r<-90&&t>(o?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):n<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(n)>8&&(this.lastScrollY=t),this.updateLogoAnimation(t),i&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(t){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,i=e+400,a=Math.max(0,Math.min(1,(t-e)/(i-e))),n=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(n,!0),!this.getBoolAttr("large-animation",!1))return;const s=this.shadow.querySelector(".headbar__pageLogo--animation-large"),r=this.shadow.querySelector(".headbar__claim--large");if(!s)return;const o=window.innerWidth,h=o<768?-110:o<1100?-120:-140,l=o<768?.65:.5;r&&(r.style.opacity=String(1-Math.min(1,a/.05)));const p=Math.max(0,Math.min(1,(a-.05)/.25)),d=1-Math.pow(1-p,4);s.style.transform=`translateY(${d*h}px) scale(${1+d*(l-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(t){"Escape"===t.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(t){if(!this.langMenuOpen)return;const e=t.composedPath(),i=this.shadow.querySelector(".headbar__lang");i&&!e.includes(i)&&this.toggleLangMenu(!1)}toggleBurger(t){this.burgerOpen=t??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(t){this.userMenuOpen=t??!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(t){const e=this.shadow.querySelector("burger"===t?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(t,e){this.emit("navigation-click",{item:t})||e.preventDefault()}handleCtaClick(t){this.emit("cta-click",{url:this.data.ctaButton.url})||t.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(t){this.setAttribute("lang",t),this.emit("language-change",{language:t})}toggleLangMenu(t){this.langMenuOpen=t??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),i=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),i?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(t){this.expandedSections.has(t)?this.expandedSections.delete(t):this.expandedSections.add(t),this.updateExpandStates()}updateExpandStates(){for(const t of this.shadow.querySelectorAll("[data-expand-id]")){const e=t.getAttribute("data-expand-id"),i=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",i),t.querySelector(".drawer__item-expand")?.classList.toggle("expanded",i),t.setAttribute("aria-expanded",String(i))}}initColorMode(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const t=document.documentElement;t.classList.contains("dark")?this.applyColorMode("dark"):t.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(t),this._skipCallback=!0,this.setAttribute("color-mode",t),"dark"===t?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 t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";const e=e=>{const i=document.createElement("div");return i.setAttribute("data-section",e),t.appendChild(i),i},i=(t,e,i)=>{const a=document.createElement("a");a.href=e,a.textContent=i,t.appendChild(a)},a=e("main-navigation");for(const t of this.data.mainNavigation)i(a,t.url,t.label);i(a,this.data.ctaButton.url,this.data.ctaButton.label);const n=[];for(const t of this.data.burgerMenu)if("divider"!==t.type&&"logout"!==t.action&&t.url)if(t.children){const a=e(t.label.toLowerCase());i(a,t.url,t.label);for(const e of t.children)e.url&&i(a,e.url,e.label)}else t.small&&n.push(t);if(n.length){const t=e("legal");for(const e of n)i(t,e.url,e.label)}this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();const t=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),n=this.getBoolAttr("hide-lang",!1),s=this.getBoolAttr("hide-login",!1),r=this.getBoolAttr("show-back-link",!1),o=this.getAttribute("back-url")||this.data.backLink?.url||"",h=this.getAttribute("back-label")||this.data.backLink?.label||"",l=this.getAttribute("user-name")||this.data.userMenu.user.name,p=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const c=document.createElement("div");var f,x,g;c.innerHTML=`\n <header class="headbar${(f={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:n,hideLogin:s,showBackLink:r,backUrl:o,backLabel:h,userName:l,userAvatar:p,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,g=this.expandedSections,x.burgerMenu.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];t.highlighted&&e.push("drawer__item--highlighted"),t.small&&e.push("drawer__item--small");const i=t.expandable||t.children&&t.children.length>0,a=g.has(t.id),n=!t.highlighted&&!t.small&&!i&&t.url;let s=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"${t.target?` target="${t.target}"`:""}`:""}\n ${i?`data-expand-id="${t.id}" aria-expanded="${a}"`:""}\n data-burger-id="${t.id}">\n ${t.label}\n ${i?`<span class="drawer__item-expand${a?" expanded":""}">${m.angleDownSmall}</span>`:""}\n ${n?`<span class="drawer__item-nav-arrow">${m.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(s+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),s}).join("")),userItemsHtml:u(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 ${m.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <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">${m.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((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}"${t.target?` target="${t.target}"`:""} data-nav-id="${t.id}">${t.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">${m.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">${m.sun}</span>\n <span class="headbar__color-mode-moon">${m.moon}</span>\n </button>`}\n ${f.hideLang?"":`<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">${m.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===f.currentLang}" data-lang="${t.code}">\n ${t.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">${m["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(c),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",t=>{const e=t.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||t.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",t=>this.handleCtaClick(t));for(const t of this.shadow.querySelectorAll(".headbar__menu-link"))t.addEventListener("click",e=>{const i=this.data.mainNavigation.find(e=>e.id===t.getAttribute("data-nav-id"));i&&this.handleNavClick(i,e)});for(const t of this.shadow.querySelectorAll("[data-burger-id]"))t.addEventListener("click",e=>{const i=this.data.burgerMenu.find(e=>e.id===t.getAttribute("data-burger-id"));i&&(i.expandable||i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll("[data-user-id]"))t.addEventListener("click",e=>{if("logout"===t.getAttribute("data-action"))return void this.handleLogout();const i=this.data.userMenu.items.find(e=>e.id===t.getAttribute("data-user-id"));i&&(i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):i.disabled||this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll(".drawer__child"))t.addEventListener("click",e=>{const i=t.getAttribute("data-nav-id");if(i)for(const t of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=t.children?.find(t=>t.id===i);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const t of this.shadow.querySelectorAll(".headbar__lang-option"))t.addEventListener("click",()=>{const e=t.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}customElements.define("startnext-header",x);const g=`\n ${p}\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 k extends e{constructor(){super(...arguments),this.apiCache=new Map,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.querySelector("[data-crawler-nav]")||this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(t){if(this.isConnected){if("lang-sync"===t)return void(this.langSyncEnabled?this.setupLangSync():this.teardownLangSync());this.data=this.getFooterData(),this.render(),this.renderLightDomNav(),"lang"!==t&&"api-url"!==t||this.loadApiData()}}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=t=>{this.setAttribute("lang",t.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const t=this.apiCache.get(this.currentLang);return t||(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 t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/footer?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this.data=i,this.render(),this.renderLightDomNav()}catch(t){console.warn("[StartnextFooter] API fetch failed, using fallback data",t)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";for(const e of this.data.columns){const i=document.createElement("div");i.setAttribute("data-section",e.title.toLowerCase());for(const t of e.links){const e=document.createElement("a");e.href=t.url,e.textContent=t.label,i.appendChild(e)}t.appendChild(i)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const t of this.data.legalLinks){const i=document.createElement("a");i.href=t.url,i.textContent=t.label,e.appendChild(i)}t.appendChild(e),this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(g));const t=document.createElement("div");var e;t.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(t=>`\n <a href="${t.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${t.platform}">\n ${f(t.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(t=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${t.value}</span>\n <span class="footer__stat-caption">${t.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(t=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${t.title}</h4>\n <ul class="footer__nav">\n ${t.links.map(t=>`<li><a href="${t.url}" class="footer__link">${t.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(t=>`<span class="footer__payment">${t}</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 ${f("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(t=>`<a href="${t.url}" class="footer__link">${t.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(t),this.attachEvents()}attachEvents(){for(const t of this.shadow.querySelectorAll(".footer__link"))t.addEventListener("click",e=>{const i=t.getAttribute("href")||"",a=t.textContent?.trim()||"";this.emit("navigation-click",{item:{url:i,label:a}})||e.preventDefault()})}}k.observedAttributes=["lang","api-url","lang-sync"],customElements.define("startnext-footer",k),t.StartnextFooter=k,t.StartnextHeader=x});
|
|
7
|
+
*/;function c(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const m={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>',arrowLeft:c('\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),close:c('\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:c('\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:c('\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":c('\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:c('\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":c('\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:c('\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:c('\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:c('\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":c('\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:c('\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:c('\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),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 f(t,e){const i=m[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function u(t,e){return t.userMenu.items.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const i=["drawer__item"];t.disabled&&i.push("drawer__item--disabled"),"outline"===t.style&&i.push("drawer__item--outline");const a=t.children&&t.children.length>0,n=e.has(t.id),s="logout"===t.action,r=s?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||s?"":`href="${t.url}"${t.target?` target="${t.target}"`:""}`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${n}"`:""}\n ${s?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${m[t.icon]||""}</span>`:""}\n ${t.label}\n ${t.badge?`<span class="drawer__item-badge">${t.badge}</span>`:""}\n ${a||t.expandable?`<span class="drawer__item-expand${n?" expanded":""}">${m.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${n?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class x extends e{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.apiCache=new Map,this._preserveSsrContent=!1,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","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang","hide-login","show-back-link","back-url","back-label","api-url"]}get currentLang(){return this.getAttribute("lang")||"de"}get isLightHeader(){const t=this.getAttribute("color-mode");return t?"dark"===t:this.getBoolAttr("light",!1)}ui(t){return function(t,e){return i[t]?.[e]||i[t]?.de||t}(t,this.currentLang)}connectedCallback(){const t=this.isHydrating;this.initColorMode(),this.data=this.getHeaderData(),this.applyTheme(this.data.theme),this.render(),t&&(this._preserveSsrContent=!0),this.querySelector("[data-crawler-nav]")||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 t=this.apiCache.get(this.currentLang);return t||function(t="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:t,availableLanguages:[{code:"de",label:"DE"},{code:"en",label:"EN"}]}}(this.currentLang)}async loadApiData(){const t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/header?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this._preserveSsrContent=!1,this.data=i,this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()}catch(t){console.warn("[StartnextHeader] API fetch failed, using fallback data",t)}}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(t){!this._skipCallback&&this.isConnected&&(this._preserveSsrContent||(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.renderLightDomNav(),this.restoreScrollState(),this.schedulePostRender()),"lang"!==t&&"api-url"!==t||this.loadApiData())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),t.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()})}initLottie(){const t=this.shadow.querySelector("#page-logo-animation");if(!t)return;this.lottieAnim&&(this.lottieAnim.destroy(),this.lottieAnim=null);const e=this.isLightHeader?h:l;this.lottieAnim=o.loadAnimation({container:t,renderer:"svg",loop:!1,autoplay:!1,animationData:e}),this.lottieAnim.addEventListener("data_ready",()=>{this.updateLogoAnimation(window.scrollY)})}handleScroll(){const t=window.scrollY,e=this.shadow.querySelector(".headbar");if(!e)return;let i=!1;const a=t>45;a!==this.isTight&&(this.isTight=a,e.classList.toggle("headbar--tight",this.isTight),e.classList.toggle("headbar--light",this.isLightHeader&&!this.isTight),i=!0);const n=t-this.lastScrollY,s=document.querySelector("main, [data-content], .page-content"),r=s?.getBoundingClientRect().top??1/0,o=this.getBoolAttr("large-animation",!1);n>8&&r<-90&&t>(o?445:400)&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):n<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(n)>8&&(this.lastScrollY=t),this.updateLogoAnimation(t),i&&this.emit("scroll-state-change",{scrolled:this.isTight,slideUp:this.isSlideUp})}updateLogoAnimation(t){if(!this.lottieAnim||!this.lottieAnim.totalFrames)return;const e=this.getBoolAttr("large-animation",!1)?45:0,i=e+400,a=Math.max(0,Math.min(1,(t-e)/(i-e))),n=Math.floor(a*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(n,!0),!this.getBoolAttr("large-animation",!1))return;const s=this.shadow.querySelector(".headbar__pageLogo--animation-large"),r=this.shadow.querySelector(".headbar__claim--large");if(!s)return;const o=window.innerWidth,h=o<768?-110:o<1100?-120:-140,l=o<768?.65:.5;r&&(r.style.opacity=String(1-Math.min(1,a/.05)));const p=Math.max(0,Math.min(1,(a-.05)/.25)),d=1-Math.pow(1-p,4);s.style.transform=`translateY(${d*h}px) scale(${1+d*(l-1)})`}handleResize(){this.updateLogoAnimation(window.scrollY)}handleKeydown(t){"Escape"===t.key&&(this.langMenuOpen?this.toggleLangMenu(!1):this.userMenuOpen?this.toggleUserMenu(!1):this.burgerOpen&&this.toggleBurger(!1))}handleDocClick(t){if(!this.langMenuOpen)return;const e=t.composedPath(),i=this.shadow.querySelector(".headbar__lang");i&&!e.includes(i)&&this.toggleLangMenu(!1)}toggleBurger(t){this.burgerOpen=t??!this.burgerOpen,this.updateDrawerStates(),this.emit("burger-menu-toggle",{open:this.burgerOpen}),this.burgerOpen&&this.trapFocus("burger")}toggleUserMenu(t){this.userMenuOpen=t??!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(t){const e=this.shadow.querySelector("burger"===t?".drawer--left":".drawer--right");requestAnimationFrame(()=>e?.querySelector('button, a, [tabindex="0"]')?.focus())}handleNavClick(t,e){this.emit("navigation-click",{item:t})||e.preventDefault()}handleCtaClick(t){this.emit("cta-click",{url:this.data.ctaButton.url})||t.preventDefault()}handleLogout(){this.emit("logout",{}),this.toggleUserMenu(!1)}handleLanguageChange(t){this.setAttribute("lang",t),this.emit("language-change",{language:t})}toggleLangMenu(t){this.langMenuOpen=t??!this.langMenuOpen;const e=this.shadow.querySelector(".headbar__lang-toggle"),i=this.shadow.querySelector(".headbar__lang-menu"),a=this.shadow.querySelector(".headbar__lang-arrow");e?.setAttribute("aria-expanded",String(this.langMenuOpen)),i?.classList.toggle("open",this.langMenuOpen),a?.classList.toggle("open",this.langMenuOpen)}toggleExpand(t){this.expandedSections.has(t)?this.expandedSections.delete(t):this.expandedSections.add(t),this.updateExpandStates()}updateExpandStates(){for(const t of this.shadow.querySelectorAll("[data-expand-id]")){const e=t.getAttribute("data-expand-id"),i=this.expandedSections.has(e);this.shadow.querySelector(`[data-children-for="${e}"]`)?.classList.toggle("expanded",i),t.querySelector(".drawer__item-expand")?.classList.toggle("expanded",i),t.setAttribute("aria-expanded",String(i))}}initColorMode(){if(this.hasAttribute("color-mode"))return void this.applyColorMode(this.getAttribute("color-mode"));const t=document.documentElement;t.classList.contains("dark")?this.applyColorMode("dark"):t.classList.contains("light")?this.applyColorMode("light"):this.applyColorMode("dark")}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(t),this._skipCallback=!0,this.setAttribute("color-mode",t),"dark"===t?this.setAttribute("light",""):this.removeAttribute("light"),this._skipCallback=!1,this.isConnected&&!this.isHydrating&&(this.data=this.getHeaderData(),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";const e=e=>{const i=document.createElement("div");return i.setAttribute("data-section",e),t.appendChild(i),i},i=(t,e,i)=>{const a=document.createElement("a");a.href=e,a.textContent=i,t.appendChild(a)},a=e("main-navigation");for(const t of this.data.mainNavigation)i(a,t.url,t.label);i(a,this.data.ctaButton.url,this.data.ctaButton.label);const n=[];for(const t of this.data.burgerMenu)if("divider"!==t.type&&"logout"!==t.action&&t.url)if(t.children){const a=e(t.label.toLowerCase());i(a,t.url,t.label);for(const e of t.children)e.url&&i(a,e.url,e.label)}else t.small&&n.push(t);if(n.length){const t=e("legal");for(const e of n)i(t,e.url,e.label)}this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();const t=this.getBoolAttr("authenticated",!1),e=this.isLightHeader,i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),n=this.getBoolAttr("hide-lang",!1),s=this.getBoolAttr("hide-login",!1),r=this.getBoolAttr("show-back-link",!1),o=this.getAttribute("back-url")||this.data.backLink?.url||"",h=this.getAttribute("back-label")||this.data.backLink?.label||"",l=this.getAttribute("user-name")||this.data.userMenu.user.name,p=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(d));const c=document.createElement("div");var f,x,g;c.innerHTML=`\n <header class="headbar${(f={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:n,hideLogin:s,showBackLink:r,backUrl:o,backLabel:h,userName:l,userAvatar:p,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(x=this.data,g=this.expandedSections,x.burgerMenu.sort((t,e)=>t.order-e.order).map(t=>{if("divider"===t.type)return'<div class="drawer__divider" role="separator"></div>';const e=["drawer__item"];t.highlighted&&e.push("drawer__item--highlighted"),t.small&&e.push("drawer__item--small");const i=t.expandable||t.children&&t.children.length>0,a=g.has(t.id),n=!t.highlighted&&!t.small&&!i&&t.url;let s=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"${t.target?` target="${t.target}"`:""}`:""}\n ${i?`data-expand-id="${t.id}" aria-expanded="${a}"`:""}\n data-burger-id="${t.id}">\n ${t.label}\n ${i?`<span class="drawer__item-expand${a?" expanded":""}">${m.angleDownSmall}</span>`:""}\n ${n?`<span class="drawer__item-nav-arrow">${m.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(s+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}"${t.target?` target="${t.target}"`:""} class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),s}).join("")),userItemsHtml:u(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 ${m.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <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">${m.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((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}"${t.target?` target="${t.target}"`:""} data-nav-id="${t.id}">${t.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">${m.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">${m.sun}</span>\n <span class="headbar__color-mode-moon">${m.moon}</span>\n </button>`}\n ${f.hideLang?"":`<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">${m.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${f.ui("langSelect")}">\n ${f.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===f.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===f.currentLang}" data-lang="${t.code}">\n ${t.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">${m["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(c),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",t=>{const e=t.currentTarget;this.emit("navigation-click",{item:{id:"back",label:e.textContent?.trim()||"",url:e.href,order:0}})||t.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",t=>this.handleCtaClick(t));for(const t of this.shadow.querySelectorAll(".headbar__menu-link"))t.addEventListener("click",e=>{const i=this.data.mainNavigation.find(e=>e.id===t.getAttribute("data-nav-id"));i&&this.handleNavClick(i,e)});for(const t of this.shadow.querySelectorAll("[data-burger-id]"))t.addEventListener("click",e=>{const i=this.data.burgerMenu.find(e=>e.id===t.getAttribute("data-burger-id"));i&&(i.expandable||i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll("[data-user-id]"))t.addEventListener("click",e=>{if("logout"===t.getAttribute("data-action"))return void this.handleLogout();const i=this.data.userMenu.items.find(e=>e.id===t.getAttribute("data-user-id"));i&&(i.children&&i.children.length>0?(e.preventDefault(),this.toggleExpand(i.id)):i.disabled||this.handleNavClick(i,e))});for(const t of this.shadow.querySelectorAll(".drawer__child"))t.addEventListener("click",e=>{const i=t.getAttribute("data-nav-id");if(i)for(const t of[...this.data.burgerMenu,...this.data.userMenu.items]){const a=t.children?.find(t=>t.id===i);if(a){this.handleNavClick(a,e);break}}});this.shadow.querySelector(".headbar__lang-toggle")?.addEventListener("click",()=>this.toggleLangMenu());for(const t of this.shadow.querySelectorAll(".headbar__lang-option"))t.addEventListener("click",()=>{const e=t.getAttribute("data-lang");e&&e!==this.currentLang&&(this.setAttribute("lang",e),this.handleLanguageChange(e)),this.toggleLangMenu(!1)})}}customElements.define("startnext-header",x);const g=`\n ${p}\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 k extends e{constructor(){super(...arguments),this.apiCache=new Map,this._preserveSsrContent=!1,this._langSyncHandler=null}get currentLang(){return this.getAttribute("lang")||"de"}get langSyncEnabled(){return"false"!==this.getAttribute("lang-sync")}connectedCallback(){const t=this.isHydrating;this.data=this.getFooterData(),this.applyTheme(this.data.theme),this.render(),t&&(this._preserveSsrContent=!0),this.querySelector("[data-crawler-nav]")||this.renderLightDomNav(),this.loadApiData(),this.setupLangSync()}disconnectedCallback(){this.querySelector("[data-crawler-nav]")?.remove(),this.teardownLangSync()}attributeChangedCallback(t){this.isConnected&&("lang-sync"!==t?(this._preserveSsrContent||(this.data=this.getFooterData(),this.render(),this.renderLightDomNav()),"lang"!==t&&"api-url"!==t||this.loadApiData()):this.langSyncEnabled?this.setupLangSync():this.teardownLangSync())}setupLangSync(){!this._langSyncHandler&&this.langSyncEnabled&&(this._langSyncHandler=t=>{this.setAttribute("lang",t.detail.language)},document.addEventListener("language-change",this._langSyncHandler))}teardownLangSync(){this._langSyncHandler&&(document.removeEventListener("language-change",this._langSyncHandler),this._langSyncHandler=null)}getFooterData(){const t=this.apiCache.get(this.currentLang);return t||(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 t=this.getAttribute("api-url");if(t&&!this.apiCache.has(this.currentLang))try{const e=await fetch(`${t}/api/footer?lang=${encodeURIComponent(this.currentLang)}`);if(!e.ok)throw new Error(`HTTP ${e.status}`);const i={...await e.json(),theme:this.data.theme};if(this.apiCache.set(this.currentLang,i),!this.isConnected)return;this._preserveSsrContent=!1,this.data=i,this.render(),this.renderLightDomNav()}catch(t){console.warn("[StartnextFooter] API fetch failed, using fallback data",t)}}renderLightDomNav(){this.querySelector("[data-crawler-nav]")?.remove();const t=document.createElement("nav");t.setAttribute("data-crawler-nav",""),t.setAttribute("aria-hidden","true"),t.style.display="none";for(const e of this.data.columns){const i=document.createElement("div");i.setAttribute("data-section",e.title.toLowerCase());for(const t of e.links){const e=document.createElement("a");e.href=t.url,e.textContent=t.label,i.appendChild(e)}t.appendChild(i)}const e=document.createElement("div");e.setAttribute("data-section","legal");for(const t of this.data.legalLinks){const i=document.createElement("a");i.href=t.url,i.textContent=t.label,e.appendChild(i)}t.appendChild(e),this.appendChild(t)}render(){if(this.isHydrating)return this.isHydrating=!1,void this.attachEvents();this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(g));const t=document.createElement("div");var e;t.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(t=>`\n <a href="${t.url}"\n class="footer__social-link"\n target="_blank"\n rel="noopener noreferrer"\n aria-label="${t.platform}">\n ${f(t.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(t=>`\n <div class="footer__stat-item">\n <span class="footer__stat-value">${t.value}</span>\n <span class="footer__stat-caption">${t.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(t=>`\n <div class="footer__column">\n <h4 class="footer__nav-title">${t.title}</h4>\n <ul class="footer__nav">\n ${t.links.map(t=>`<li><a href="${t.url}" class="footer__link">${t.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(t=>`<span class="footer__payment">${t}</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 ${f("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(t=>`<a href="${t.url}" class="footer__link">${t.label}</a>`).join("")}\n </div>\n <p class="footer__copyright">${e.copyright}</p>\n </div>\n </footer>\n `,this.shadow.appendChild(t),this.attachEvents()}attachEvents(){for(const t of this.shadow.querySelectorAll(".footer__link"))t.addEventListener("click",e=>{const i=t.getAttribute("href")||"",a=t.textContent?.trim()||"";this.emit("navigation-click",{item:{url:i,label:a}})||e.preventDefault()})}}k.observedAttributes=["lang","api-url","lang-sync"],customElements.define("startnext-footer",k),t.StartnextFooter=k,t.StartnextHeader=x});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@startnext/chrome",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Startnext Chrome Web Components",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -21,6 +21,13 @@
|
|
|
21
21
|
"dist",
|
|
22
22
|
"README.md"
|
|
23
23
|
],
|
|
24
|
+
"scripts": {
|
|
25
|
+
"dev": "rollup -c -w",
|
|
26
|
+
"build": "rollup -c",
|
|
27
|
+
"clean": "rm -rf dist",
|
|
28
|
+
"prepublishOnly": "pnpm run build",
|
|
29
|
+
"lint": "eslint src --ext .ts"
|
|
30
|
+
},
|
|
24
31
|
"keywords": [
|
|
25
32
|
"web-components",
|
|
26
33
|
"header",
|
|
@@ -47,11 +54,5 @@
|
|
|
47
54
|
"dependencies": {
|
|
48
55
|
"lottie-web": "^5.13.0",
|
|
49
56
|
"lucide-static": "^0.564.0"
|
|
50
|
-
},
|
|
51
|
-
"scripts": {
|
|
52
|
-
"dev": "rollup -c -w",
|
|
53
|
-
"build": "rollup -c",
|
|
54
|
-
"clean": "rm -rf dist",
|
|
55
|
-
"lint": "eslint src --ext .ts"
|
|
56
57
|
}
|
|
57
|
-
}
|
|
58
|
+
}
|