@startnext/chrome 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -46,7 +46,7 @@ import '@startnext/chrome';
46
46
  | `authenticated` | `boolean` | `false` | Zeigt User-Avatar statt "Anmelden" Button |
47
47
  | `user-name` | `string` | - | Name des eingeloggten Users |
48
48
  | `user-avatar` | `string` | - | Avatar-URL des Users |
49
- | `color-mode` | `'light' \| 'dark'` | auto | Farbmodus. Ohne Attribut: Header scannt `<body>` nach Klasse `dark`/`light`. Ohne Klasse: Default `dark` (dunkler Body, heller Header). Toggle-Button im Header wechselt Body-Klasse und Header-Darstellung |
49
+ | `color-mode` | `'light' \| 'dark'` | auto | Farbmodus. Ohne Attribut: Header scannt `<html>` nach Klasse `dark`/`light`. Ohne Klasse: Default `dark` (dunkle Seite, heller Header). Toggle-Button wechselt `<html>`-Klasse und Header-Darstellung |
50
50
  | `hide-color-mode` | `boolean` | `false` | Versteckt den Color-Mode Toggle-Button |
51
51
  | `hide-lang` | `boolean` | `false` | Versteckt den Language-Switcher |
52
52
 
@@ -86,12 +86,12 @@ import '@startnext/chrome';
86
86
  ```
87
87
 
88
88
  ```html
89
- <!-- Color Mode: Header scannt <body> automatisch -->
90
- <!-- body.dark → heller Header, body.light → dunkler Header -->
89
+ <!-- Color Mode: Header scannt <html> automatisch -->
90
+ <!-- html.dark → heller Header, html.light → dunkler Header -->
91
91
  <!-- Toggle-Button (Sun/Moon) im Header wechselt den Modus -->
92
- <body class="dark">
92
+ <html class="dark">
93
93
  <startnext-header light large-animation></startnext-header>
94
- </body>
94
+ </html>
95
95
  ```
96
96
 
97
97
  ```javascript
@@ -113,7 +113,7 @@ header.addEventListener('logout', () => {
113
113
 
114
114
  header.addEventListener('color-mode-change', (e) => {
115
115
  console.log(`Color mode: ${e.detail.mode}`); // 'light' | 'dark'
116
- // Body-Klasse wird automatisch vom Header gesetzt
116
+ // <html>-Klasse wird automatisch vom Header gesetzt
117
117
  });
118
118
  ```
119
119
 
@@ -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;AAUzD,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;IAEzC,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAS5B,wBAAwB,IAAI,IAAI;IAWhC,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,YAAY;IA4CpB,OAAO,CAAC,mBAAmB;IAmC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAsBrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,MAAM;IA0Bd,OAAO,CAAC,YAAY;CA4DrB"}
1
+ {"version":3,"file":"StartnextHeader.d.ts","sourceRoot":"","sources":["../../../src/components/header/StartnextHeader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAUzD,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;IAEzC,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,iBAAiB,CAAgC;IACzD,OAAO,CAAC,mBAAmB,CAAkC;IAE7D,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,EAAE;IAIV,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAS5B,wBAAwB,IAAI,IAAI;IAWhC,gEAAgE;IAChE,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,YAAY;IA4CpB,OAAO,CAAC,mBAAmB;IAmC3B,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,kBAAkB;IAO1B,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,oBAAoB;IAI5B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,MAAM;IA0Bd,OAAO,CAAC,YAAY;CA4DrB"}
package/dist/index.js CHANGED
@@ -4,4 +4,4 @@ class t extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow(
4
4
  *
5
5
  * This source code is licensed under the ISC license.
6
6
  * See the LICENSE file in the root directory of this source tree.
7
- */;function u(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const x={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:u('\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:u('\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:u('\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":u('\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:u('\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":u('\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:u('\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:u('\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:u('\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":u('\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:u('\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:u('\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>',"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 g(t,e){const i=x[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function k(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,s=e.has(t.id),n="logout"===t.action,r=n?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||n?"":`href="${t.url}"`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${s}"`:""}\n ${n?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${x[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${s?" expanded":""}">${x.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${s?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class y 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.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this)}static get observedAttributes(){return["lang","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang"]}get currentLang(){return this.getAttribute("lang")||"de"}ui(t){return function(t,e){return a[t]?.[e]||a[t]?.de||t}(t,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=s(this.currentLang),this.applyTheme(this.data.theme),this.render(),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()}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()}attributeChangedCallback(){this.isConnected&&(this.data=s(this.currentLang),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),this.getBoolAttr("light",!1)&&t.classList.toggle("headbar--light",!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.getBoolAttr("light",!1)?d:m;this.lottieAnim=p.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),this.getBoolAttr("light",!1)&&e.classList.toggle("headbar--light",!this.isTight),i=!0);const s=t-this.lastScrollY,n=document.querySelector("main, [data-content], .page-content"),r=n?.getBoundingClientRect().top??1/0;s>8&&r<-90&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):s<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(s)>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=Math.max(0,Math.min(1,(t-45)/400)),i=Math.floor(e*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const a=this.shadow.querySelector(".headbar__pageLogo--animation-large"),s=this.shadow.querySelector(".headbar__claim--large");if(!a)return;const n=window.innerWidth,r=n<768?-110:n<1100?-120:-180,o=n<768?.65:.5;s&&(s.style.opacity=String(1-Math.min(1,e/.05)));const h=Math.max(0,Math.min(1,(e-.05)/.25)),l=1-Math.pow(1-h,4);a.style.transform=`translateY(${l*r}px) scale(${1+l*(o-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.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(){this.hasAttribute("color-mode")?this.applyColorMode(this.getAttribute("color-mode")):document.body.classList.contains("dark")?(this.setAttribute("color-mode","dark"),this.setAttribute("light","")):document.body.classList.contains("light")?(this.setAttribute("color-mode","light"),this.removeAttribute("light")):(this.setAttribute("color-mode","dark"),this.setAttribute("light",""),document.body.classList.add("dark"))}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.setAttribute("color-mode",t),this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.body.classList.remove("light","dark"),document.body.classList.add(t),"dark"===t?this.setAttribute("light",""):this.removeAttribute("light")}render(){const t=this.getBoolAttr("authenticated",!1),e=this.getBoolAttr("light",!1),i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),s=this.getBoolAttr("hide-lang",!1),n=this.getAttribute("user-name")||this.data.userMenu.user.name,r=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(f));const o=document.createElement("div");var h,l,p;o.innerHTML=`\n <header class="headbar${(h={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:s,userName:n,userAvatar:r,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(l=this.data,p=this.expandedSections,l.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=p.has(t.id),s=!t.highlighted&&!t.small&&!i&&t.url;let n=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"`:""}\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":""}">${x.angleDownSmall}</span>`:""}\n ${s?`<span class="drawer__item-nav-arrow">${x.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(n+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),n}).join("")),userItemsHtml:k(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="${h.ui("menuOpen")}" aria-expanded="false">\n ${x.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <div class="headerbar__btn">\n <a href="${h.data.ctaButton.url}" class="cta-link" aria-label="${h.data.ctaButton.label}">\n <span class="headerbar__btn--text">${h.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${x.rocket}</span>\n </a>\n </div>\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${h.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${h.ui("mainNav")}">\n ${h.data.mainNavigation.sort((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}" data-nav-id="${t.id}">${t.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${h.ui("homepage")}" class="headbar__pageLogo--animation${h.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${h.isLarge?`<div class="headbar__claim headbar__claim--large">${h.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${h.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${h.ui("colorMode")}" title="${h.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${x.sun}</span>\n <span class="headbar__color-mode-moon">${x.moon}</span>\n </button>`}\n ${h.hideLang?"":`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${h.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${h.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${x.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${h.ui("langSelect")}">\n ${h.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===h.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===h.currentLang}" data-lang="${t.code}">\n ${t.label}\n </button>`).join("")}\n </div>\n </div>`}\n ${h.isAuth?`<button class="user-avatar-btn" aria-label="${h.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${h.userAvatar}" alt="${h.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${h.ui("login")}">${h.ui("login")}</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="${h.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${h.burgerItemsHtml}</div>\n </nav>\n\n ${h.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${h.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${h.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${h.userName}</span>\n </div>\n <div class="drawer__nav">${h.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(o),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(".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",y);const v=`\n ${c}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n font-family: var(--font-family, "PFDin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);\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 b extends t{get currentLang(){return this.getAttribute("lang")||"de"}connectedCallback(){this.data=n(this.currentLang),this.applyTheme(this.data.theme),this.render()}attributeChangedCallback(){this.isConnected&&(this.data=n(this.currentLang),this.render())}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(v));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 ${g(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 ${g("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()})}}b.observedAttributes=["lang"],customElements.define("startnext-footer",b);export{b as StartnextFooter,y as StartnextHeader};
7
+ */;function u(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const x={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:u('\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:u('\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:u('\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":u('\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:u('\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":u('\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:u('\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:u('\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:u('\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":u('\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:u('\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:u('\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>',"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 g(t,e){const i=x[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function k(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,s=e.has(t.id),n="logout"===t.action,r=n?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||n?"":`href="${t.url}"`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${s}"`:""}\n ${n?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${x[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${s?" expanded":""}">${x.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${s?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class y 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.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this)}static get observedAttributes(){return["lang","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang"]}get currentLang(){return this.getAttribute("lang")||"de"}ui(t){return function(t,e){return a[t]?.[e]||a[t]?.de||t}(t,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=s(this.currentLang),this.applyTheme(this.data.theme),this.render(),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()}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()}attributeChangedCallback(){this.isConnected&&(this.data=s(this.currentLang),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),this.getBoolAttr("light",!1)&&t.classList.toggle("headbar--light",!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.getBoolAttr("light",!1)?d:m;this.lottieAnim=p.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),this.getBoolAttr("light",!1)&&e.classList.toggle("headbar--light",!this.isTight),i=!0);const s=t-this.lastScrollY,n=document.querySelector("main, [data-content], .page-content"),r=n?.getBoundingClientRect().top??1/0;s>8&&r<-90&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):s<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(s)>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=Math.max(0,Math.min(1,(t-45)/400)),i=Math.floor(e*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const a=this.shadow.querySelector(".headbar__pageLogo--animation-large"),s=this.shadow.querySelector(".headbar__claim--large");if(!a)return;const n=window.innerWidth,r=n<768?-110:n<1100?-120:-180,o=n<768?.65:.5;s&&(s.style.opacity=String(1-Math.min(1,e/.05)));const h=Math.max(0,Math.min(1,(e-.05)/.25)),l=1-Math.pow(1-h,4);a.style.transform=`translateY(${l*r}px) scale(${1+l*(o-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.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.setAttribute("color-mode","dark"),this.setAttribute("light","")):t.classList.contains("light")?(this.setAttribute("color-mode","light"),this.removeAttribute("light")):(this.setAttribute("color-mode","dark"),this.setAttribute("light",""),t.classList.add("dark"))}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.setAttribute("color-mode",t),this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(t),"dark"===t?this.setAttribute("light",""):this.removeAttribute("light")}render(){const t=this.getBoolAttr("authenticated",!1),e=this.getBoolAttr("light",!1),i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),s=this.getBoolAttr("hide-lang",!1),n=this.getAttribute("user-name")||this.data.userMenu.user.name,r=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(f));const o=document.createElement("div");var h,l,p;o.innerHTML=`\n <header class="headbar${(h={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:s,userName:n,userAvatar:r,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(l=this.data,p=this.expandedSections,l.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=p.has(t.id),s=!t.highlighted&&!t.small&&!i&&t.url;let n=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"`:""}\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":""}">${x.angleDownSmall}</span>`:""}\n ${s?`<span class="drawer__item-nav-arrow">${x.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(n+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),n}).join("")),userItemsHtml:k(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="${h.ui("menuOpen")}" aria-expanded="false">\n ${x.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <div class="headerbar__btn">\n <a href="${h.data.ctaButton.url}" class="cta-link" aria-label="${h.data.ctaButton.label}">\n <span class="headerbar__btn--text">${h.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${x.rocket}</span>\n </a>\n </div>\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${h.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${h.ui("mainNav")}">\n ${h.data.mainNavigation.sort((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}" data-nav-id="${t.id}">${t.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${h.ui("homepage")}" class="headbar__pageLogo--animation${h.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${h.isLarge?`<div class="headbar__claim headbar__claim--large">${h.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${h.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${h.ui("colorMode")}" title="${h.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${x.sun}</span>\n <span class="headbar__color-mode-moon">${x.moon}</span>\n </button>`}\n ${h.hideLang?"":`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${h.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${h.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${x.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${h.ui("langSelect")}">\n ${h.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===h.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===h.currentLang}" data-lang="${t.code}">\n ${t.label}\n </button>`).join("")}\n </div>\n </div>`}\n ${h.isAuth?`<button class="user-avatar-btn" aria-label="${h.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${h.userAvatar}" alt="${h.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${h.ui("login")}">${h.ui("login")}</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="${h.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${h.burgerItemsHtml}</div>\n </nav>\n\n ${h.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${h.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${h.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${h.userName}</span>\n </div>\n <div class="drawer__nav">${h.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(o),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(".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",y);const v=`\n ${c}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n font-family: var(--font-family, "PFDin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);\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 b extends t{get currentLang(){return this.getAttribute("lang")||"de"}connectedCallback(){this.data=n(this.currentLang),this.applyTheme(this.data.theme),this.render()}attributeChangedCallback(){this.isConnected&&(this.data=n(this.currentLang),this.render())}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(v));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 ${g(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 ${g("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()})}}b.observedAttributes=["lang"],customElements.define("startnext-footer",b);export{b as StartnextFooter,y 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 x(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const g={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:x('\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:x('\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:x('\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":x('\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:x('\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":x('\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:x('\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:x('\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:x('\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":x('\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:x('\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:x('\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>',"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 k(t,e){const i=g[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function y(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,s=e.has(t.id),n="logout"===t.action,r=n?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||n?"":`href="${t.url}"`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${s}"`:""}\n ${n?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${g[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${s?" expanded":""}">${g.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${s?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class v 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.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this)}static get observedAttributes(){return["lang","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang"]}get currentLang(){return this.getAttribute("lang")||"de"}ui(t){return function(t,e){return s[t]?.[e]||s[t]?.de||t}(t,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=n(this.currentLang),this.applyTheme(this.data.theme),this.render(),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()}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()}attributeChangedCallback(){this.isConnected&&(this.data=n(this.currentLang),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),this.getBoolAttr("light",!1)&&t.classList.toggle("headbar--light",!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.getBoolAttr("light",!1)?m:c;this.lottieAnim=d.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),this.getBoolAttr("light",!1)&&e.classList.toggle("headbar--light",!this.isTight),i=!0);const s=t-this.lastScrollY,n=document.querySelector("main, [data-content], .page-content"),r=n?.getBoundingClientRect().top??1/0;s>8&&r<-90&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):s<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(s)>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=Math.max(0,Math.min(1,(t-45)/400)),i=Math.floor(e*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const a=this.shadow.querySelector(".headbar__pageLogo--animation-large"),s=this.shadow.querySelector(".headbar__claim--large");if(!a)return;const n=window.innerWidth,r=n<768?-110:n<1100?-120:-180,o=n<768?.65:.5;s&&(s.style.opacity=String(1-Math.min(1,e/.05)));const h=Math.max(0,Math.min(1,(e-.05)/.25)),l=1-Math.pow(1-h,4);a.style.transform=`translateY(${l*r}px) scale(${1+l*(o-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.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(){this.hasAttribute("color-mode")?this.applyColorMode(this.getAttribute("color-mode")):document.body.classList.contains("dark")?(this.setAttribute("color-mode","dark"),this.setAttribute("light","")):document.body.classList.contains("light")?(this.setAttribute("color-mode","light"),this.removeAttribute("light")):(this.setAttribute("color-mode","dark"),this.setAttribute("light",""),document.body.classList.add("dark"))}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.setAttribute("color-mode",t),this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.body.classList.remove("light","dark"),document.body.classList.add(t),"dark"===t?this.setAttribute("light",""):this.removeAttribute("light")}render(){const t=this.getBoolAttr("authenticated",!1),e=this.getBoolAttr("light",!1),i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),s=this.getBoolAttr("hide-lang",!1),n=this.getAttribute("user-name")||this.data.userMenu.user.name,r=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(u));const o=document.createElement("div");var h,l,p;o.innerHTML=`\n <header class="headbar${(h={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:s,userName:n,userAvatar:r,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(l=this.data,p=this.expandedSections,l.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=p.has(t.id),s=!t.highlighted&&!t.small&&!i&&t.url;let n=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"`:""}\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":""}">${g.angleDownSmall}</span>`:""}\n ${s?`<span class="drawer__item-nav-arrow">${g.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(n+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),n}).join("")),userItemsHtml:y(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="${h.ui("menuOpen")}" aria-expanded="false">\n ${g.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <div class="headerbar__btn">\n <a href="${h.data.ctaButton.url}" class="cta-link" aria-label="${h.data.ctaButton.label}">\n <span class="headerbar__btn--text">${h.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${g.rocket}</span>\n </a>\n </div>\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${h.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${h.ui("mainNav")}">\n ${h.data.mainNavigation.sort((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}" data-nav-id="${t.id}">${t.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${h.ui("homepage")}" class="headbar__pageLogo--animation${h.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${h.isLarge?`<div class="headbar__claim headbar__claim--large">${h.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${h.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${h.ui("colorMode")}" title="${h.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${g.sun}</span>\n <span class="headbar__color-mode-moon">${g.moon}</span>\n </button>`}\n ${h.hideLang?"":`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${h.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${h.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${g.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${h.ui("langSelect")}">\n ${h.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===h.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===h.currentLang}" data-lang="${t.code}">\n ${t.label}\n </button>`).join("")}\n </div>\n </div>`}\n ${h.isAuth?`<button class="user-avatar-btn" aria-label="${h.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${h.userAvatar}" alt="${h.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${h.ui("login")}">${h.ui("login")}</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="${h.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${h.burgerItemsHtml}</div>\n </nav>\n\n ${h.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${h.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${h.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${h.userName}</span>\n </div>\n <div class="drawer__nav">${h.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(o),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(".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",v);const b=`\n ${f}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n font-family: var(--font-family, "PFDin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);\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 _ extends e{get currentLang(){return this.getAttribute("lang")||"de"}connectedCallback(){this.data=r(this.currentLang),this.applyTheme(this.data.theme),this.render()}attributeChangedCallback(){this.isConnected&&(this.data=r(this.currentLang),this.render())}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(b));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 ${k(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 ${k("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()})}}_.observedAttributes=["lang"],customElements.define("startnext-footer",_),t.StartnextFooter=_,t.StartnextHeader=v});
7
+ */;function x(t,e){return t.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const g={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',close:x('\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:x('\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:x('\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":x('\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:x('\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":x('\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:x('\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:x('\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:x('\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":x('\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:x('\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:x('\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>',"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 k(t,e){const i=g[t];return i&&e?i.replace(/width="\d+"/,`width="${e}"`).replace(/height="\d+"/,`height="${e}"`):i||""}function y(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,s=e.has(t.id),n="logout"===t.action,r=n?"button":t.url&&!a?"a":"button";let o=`<${r} class="${i.join(" ")}"\n ${!t.url||a||n?"":`href="${t.url}"`}\n ${t.disabled?'aria-disabled="true" tabindex="-1"':""}\n ${a?`data-expand-id="${t.id}" aria-expanded="${s}"`:""}\n ${n?'data-action="logout"':""}\n data-user-id="${t.id}">\n ${t.icon?`<span class="drawer__item-icon">${g[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${s?" expanded":""}">${g.angleDown}</span>`:""}\n </${r}>`;return a&&(o+=`<div class="drawer__children${s?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),o}).join("")}class v 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.handleScrollBound=this.handleScroll.bind(this),this.handleKeydownBound=this.handleKeydown.bind(this),this.handleResizeBound=this.handleResize.bind(this),this.handleDocClickBound=this.handleDocClick.bind(this)}static get observedAttributes(){return["lang","authenticated","user-name","user-avatar","light","large-animation","color-mode","hide-color-mode","hide-lang"]}get currentLang(){return this.getAttribute("lang")||"de"}ui(t){return function(t,e){return s[t]?.[e]||s[t]?.de||t}(t,this.currentLang)}connectedCallback(){this.initColorMode(),this.data=n(this.currentLang),this.applyTheme(this.data.theme),this.render(),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()}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()}attributeChangedCallback(){this.isConnected&&(this.data=n(this.currentLang),this.lottieAnim?.destroy(),this.lottieAnim=null,this.render(),this.restoreScrollState(),this.schedulePostRender())}restoreScrollState(){const t=this.shadow.querySelector(".headbar");t&&(t.classList.toggle("headbar--tight",this.isTight),t.classList.toggle("headbar--slide-up",this.isSlideUp),this.getBoolAttr("light",!1)&&t.classList.toggle("headbar--light",!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.getBoolAttr("light",!1)?m:c;this.lottieAnim=d.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),this.getBoolAttr("light",!1)&&e.classList.toggle("headbar--light",!this.isTight),i=!0);const s=t-this.lastScrollY,n=document.querySelector("main, [data-content], .page-content"),r=n?.getBoundingClientRect().top??1/0;s>8&&r<-90&&!this.isSlideUp?(this.isSlideUp=!0,e.classList.add("headbar--slide-up"),i=!0):s<-8&&this.isSlideUp&&(this.isSlideUp=!1,e.classList.remove("headbar--slide-up"),i=!0),Math.abs(s)>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=Math.max(0,Math.min(1,(t-45)/400)),i=Math.floor(e*(this.lottieAnim.totalFrames-1));if(this.lottieAnim.goToAndStop(i,!0),!this.getBoolAttr("large-animation",!1))return;const a=this.shadow.querySelector(".headbar__pageLogo--animation-large"),s=this.shadow.querySelector(".headbar__claim--large");if(!a)return;const n=window.innerWidth,r=n<768?-110:n<1100?-120:-180,o=n<768?.65:.5;s&&(s.style.opacity=String(1-Math.min(1,e/.05)));const h=Math.max(0,Math.min(1,(e-.05)/.25)),l=1-Math.pow(1-h,4);a.style.transform=`translateY(${l*r}px) scale(${1+l*(o-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.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.setAttribute("color-mode","dark"),this.setAttribute("light","")):t.classList.contains("light")?(this.setAttribute("color-mode","light"),this.removeAttribute("light")):(this.setAttribute("color-mode","dark"),this.setAttribute("light",""),t.classList.add("dark"))}toggleColorMode(){const t="dark"===this.getAttribute("color-mode")?"light":"dark";this.setAttribute("color-mode",t),this.applyColorMode(t),this.emit("color-mode-change",{mode:t})}applyColorMode(t){document.documentElement.classList.remove("light","dark"),document.documentElement.classList.add(t),"dark"===t?this.setAttribute("light",""):this.removeAttribute("light")}render(){const t=this.getBoolAttr("authenticated",!1),e=this.getBoolAttr("light",!1),i=this.getBoolAttr("large-animation",!1),a=this.getBoolAttr("hide-color-mode",!1),s=this.getBoolAttr("hide-lang",!1),n=this.getAttribute("user-name")||this.data.userMenu.user.name,r=this.getAttribute("user-avatar")||this.data.userMenu.user.avatar;this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(u));const o=document.createElement("div");var h,l,p;o.innerHTML=`\n <header class="headbar${(h={isAuth:t,isLight:e,isLarge:i,hideColorMode:a,hideLang:s,userName:n,userAvatar:r,data:this.data,currentLang:this.currentLang,ui:this.ui.bind(this),burgerItemsHtml:(l=this.data,p=this.expandedSections,l.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=p.has(t.id),s=!t.highlighted&&!t.small&&!i&&t.url;let n=`<${t.url&&!i?"a":"button"} class="${e.join(" ")}"\n ${t.url&&!i?`href="${t.url}"`:""}\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":""}">${g.angleDownSmall}</span>`:""}\n ${s?`<span class="drawer__item-nav-arrow">${g.angleDown}</span>`:""}\n </${t.url&&!i?"a":"button"}>`;return t.children&&t.children.length>0&&(n+=`<div class="drawer__children${a?" expanded":""}" data-children-for="${t.id}">\n ${t.children.map(t=>`<a href="${t.url}" class="drawer__child" data-nav-id="${t.id}">${t.label}</a>`).join("")}\n </div>`),n}).join("")),userItemsHtml:y(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="${h.ui("menuOpen")}" aria-expanded="false">\n ${g.burger}\n </div>\n\n \x3c!-- CTA --\x3e\n <div class="headerbar__btn">\n <a href="${h.data.ctaButton.url}" class="cta-link" aria-label="${h.data.ctaButton.label}">\n <span class="headerbar__btn--text">${h.data.ctaButton.label}</span>\n <span class="headerbar__btn--icon">${g.rocket}</span>\n </a>\n </div>\n\n \x3c!-- Main Nav (large mode only) --\x3e\n ${h.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${h.ui("mainNav")}">\n ${h.data.mainNavigation.sort((t,e)=>t.order-e.order).map(t=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${t.url}" data-nav-id="${t.id}">${t.label}</a></li>`).join("")}\n </ul>`:""}\n\n \x3c!-- Logo --\x3e\n <a href="/" aria-label="${h.ui("homepage")}" class="headbar__pageLogo--animation${h.isLarge?" headbar__pageLogo--animation-large":""}">\n <div id="page-logo-animation"></div>\n </a>\n ${h.isLarge?`<div class="headbar__claim headbar__claim--large">${h.ui("claimLarge")}</div>`:""}\n\n \x3c!-- Right --\x3e\n <div class="headbar__right">\n ${h.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${h.ui("colorMode")}" title="${h.ui("colorMode")}">\n <span class="headbar__color-mode-sun">${g.sun}</span>\n <span class="headbar__color-mode-moon">${g.moon}</span>\n </button>`}\n ${h.hideLang?"":`<div class="headbar__lang">\n <button class="headbar__lang-toggle" aria-label="${h.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n <span class="headbar__lang-code">${h.currentLang.toUpperCase()}</span>\n <span class="headbar__lang-arrow">${g.angleDownSmall}</span>\n </button>\n <div class="headbar__lang-menu" role="listbox" aria-label="${h.ui("langSelect")}">\n ${h.data.availableLanguages.map(t=>`<button class="headbar__lang-option${t.code===h.currentLang?" headbar__lang-option--active":""}"\n role="option" aria-selected="${t.code===h.currentLang}" data-lang="${t.code}">\n ${t.label}\n </button>`).join("")}\n </div>\n </div>`}\n ${h.isAuth?`<button class="user-avatar-btn" aria-label="${h.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n <img src="${h.userAvatar}" alt="${h.userName}" class="headbar__avatar">\n </button>`:`<button class="headbar__login" aria-label="${h.ui("login")}">${h.ui("login")}</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="${h.ui("mainMenu")}" aria-modal="true">\n <div class="drawer__nav">${h.burgerItemsHtml}</div>\n </nav>\n\n ${h.isAuth?`\n <nav class="drawer drawer--right" role="dialog" aria-label="${h.ui("userMenu")}" aria-modal="true">\n <div class="drawer__user">\n <img src="${h.userAvatar}" alt="" class="drawer__user-avatar">\n <span class="drawer__user-name">${h.userName}</span>\n </div>\n <div class="drawer__nav">${h.userItemsHtml}</div>\n </nav>`:""}\n `,this.shadow.appendChild(o),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(".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",v);const b=`\n ${f}\n\n :host {\n display: block;\n background: var(--footer-bg, #304b50);\n color: var(--footer-text, #FFFFFF);\n font-family: var(--font-family, "PFDin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);\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 _ extends e{get currentLang(){return this.getAttribute("lang")||"de"}connectedCallback(){this.data=r(this.currentLang),this.applyTheme(this.data.theme),this.render()}attributeChangedCallback(){this.isConnected&&(this.data=r(this.currentLang),this.render())}render(){this.shadow.innerHTML="",this.shadow.appendChild(this.createStyle(b));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 ${k(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 ${k("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()})}}_.observedAttributes=["lang"],customElements.define("startnext-footer",_),t.StartnextFooter=_,t.StartnextHeader=v});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@startnext/chrome",
3
- "version": "0.1.5",
3
+ "version": "0.1.6",
4
4
  "type": "module",
5
5
  "description": "Startnext Chrome Web Components",
6
6
  "main": "dist/index.js",