@startnext/chrome 0.2.0 → 0.3.0

package/dist/render.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @startnext/chrome/render — Server-safe rendering utilities.
+ *
+ * All exports in this module are pure string functions with zero browser
+ * dependencies. They can be used server-side (Node / Vercel / Edge) to
+ * produce Declarative Shadow DOM HTML for <startnext-header> and
+ * <startnext-footer>.
+ */
+export { renderHeader, renderBurgerItems, renderUserItems } from './components/header/header.template.js';
+export type { HeaderRenderProps } from './components/header/header.template.js';
+export { renderFooter } from './components/footer/footer.template.js';
+export { headerCSS } from './components/header/header.css.js';
+export { footerCSS } from './components/footer/footer.css.js';
+export { resetCSS } from './components/base/styles.js';
+export { icons, getIcon } from './components/base/icons.js';
+export { getUiString } from './data/uiStrings.js';
+export type { NavigationItem, HeaderData, FooterData, FooterColumn, SocialLink, UserInfo, UserMenu, LogoConfig, CtaButton, LanguageOption, ThemeVariables, } from './types/index.js';
+import type { HeaderData, FooterData } from './types/index.js';
+/** API header data shape (no theme property). */
+export interface ApiHeaderData {
+    mainNavigation: HeaderData['mainNavigation'];
+    burgerMenu: HeaderData['burgerMenu'];
+    userMenu: HeaderData['userMenu'];
+    ctaButton: HeaderData['ctaButton'];
+    logo: HeaderData['logo'];
+    language: string;
+    availableLanguages: HeaderData['availableLanguages'];
+    backLink?: HeaderData['backLink'];
+}
+/** API footer data shape (no theme property). */
+export interface ApiFooterData {
+    socialTitle: string;
+    social: FooterData['social'];
+    statsTitle: string;
+    stats: FooterData['stats'];
+    columns: FooterData['columns'];
+    bcorp: FooterData['bcorp'];
+    funding: FooterData['funding'];
+    payments: FooterData['payments'];
+    claim: string;
+    legalLinks: FooterData['legalLinks'];
+    copyright: string;
+}
+/** Convert API header response → render-ready HeaderData. */
+export declare function toHeaderRenderData(api: ApiHeaderData): HeaderData;
+/** Convert API footer response → render-ready FooterData. */
+export declare function toFooterRenderData(api: ApiFooterData): FooterData;
+/** Render hidden light-DOM nav for header (SEO / AI crawlers). */
+export declare function renderHeaderCrawlerNav(data: HeaderData): string;
+/** Render hidden light-DOM nav for footer (SEO / AI crawlers). */
+export declare function renderFooterCrawlerNav(data: FooterData): string;
+//# sourceMappingURL=render.d.ts.map

package/dist/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAC1G,YAAY,EAAE,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AAChF,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAGtE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGvD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,YAAY,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,SAAS,EACT,cAAc,EACd,cAAc,GACf,MAAM,kBAAkB,CAAC;AAO1B,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAkB,MAAM,kBAAkB,CAAC;AAI/E,iDAAiD;AACjD,MAAM,WAAW,aAAa;IAC5B,cAAc,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC7C,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,kBAAkB,EAAE,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACrD,QAAQ,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;CACnC;AAED,iDAAiD;AACjD,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC3B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAEjE;AAED,6DAA6D;AAC7D,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAEjE;AAWD,kEAAkE;AAClE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAkC/D;AAED,kEAAkE;AAClE,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAgB/D"}

package/dist/render.js

@@ -0,0 +1,7 @@
+/**
+ * @license lucide-static v0.564.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+function n(n,e){return n.replace(/\n\s*/g," ").replace(/\s+>/g,">").replace(/width="24"/,`width="${e}"`).replace(/height="24"/,`height="${e}"`)}const e={burger:'<svg width="24" height="20" viewBox="0 0 23 20" fill="currentColor"><path d="M0.821428571,4 L22.1785714,4 C22.6322567,4 23,3.60205556 23,3.11111111 L23,0.888888889 C23,0.397944444 22.6322567,0 22.1785714,0 L0.821428571,0 C0.367743304,0 0,0.397944444 0,0.888888889 L0,3.11111111 C0,3.60205556 0.367743304,4 0.821428571,4 Z M0.821428571,12 L22.1785714,12 C22.6322567,12 23,11.6020556 23,11.1111111 L23,8.88888889 C23,8.39794444 22.6322567,8 22.1785714,8 L0.821428571,8 C0.367743304,8 0,8.39794444 0,8.88888889 L0,11.1111111 C0,11.6020556 0.367743304,12 0.821428571,12 Z M0.821428571,20 L22.1785714,20 C22.6322567,20 23,19.6020556 23,19.1111111 L23,16.8888889 C23,16.3979444 22.6322567,16 22.1785714,16 L0.821428571,16 C0.367743304,16 0,16.3979444 0,16.8888889 L0,19.1111111 C0,19.6020556 0.367743304,20 0.821428571,20 Z"/></svg>',angleDown:'<svg width="16" height="16" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',angleDownSmall:'<svg width="11" height="11" viewBox="0 0 320.1 190.7" fill="currentColor"><path d="m151.5 187.1-148-146.8c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0l119.7 118.5 119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z"/></svg>',arrowLeft:n('\n<svg\n  class="lucide lucide-arrow-left"\n  xmlns="http://www.w3.org/2000/svg"\n  width="24"\n  height="24"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="m12 19-7-7 7-7" />\n  <path d="M19 12H5" />\n</svg>\n',16),close:n('\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:n('\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:n('\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":n('\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:n('\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":n('\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:n('\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:n('\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:n('\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":n('\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:n('\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:n('\n<svg\n  class="lucide lucide-moon"\n  xmlns="http://www.w3.org/2000/svg"\n  width="24"\n  height="24"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />\n</svg>\n',20),facebook:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>',twitter:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',instagram:'<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>',linkedin:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>',youtube:'<svg width="20" height="20" viewBox="0 0 1792 1280" fill="currentColor"><path d="M711 872l484-250l-484-253v503zM896 10q168 0 324.5 4.5T1450 24l73 4q1 0 17 1.5t23 3t23.5 4.5t28.5 8t28 13t31 19.5t29 26.5q6 6 15.5 18.5t29 58.5t26.5 101q8 64 12.5 136.5T1792 532v176q1 145-18 290q-7 55-25 99.5t-32 61.5l-14 17q-14 15-29 26.5t-31 19t-28 12.5t-28.5 8t-24 4.5t-23 3t-16.5 1.5q-251 19-627 19q-207-2-359.5-6.5T336 1256l-49-4l-36-4q-36-5-54.5-10t-51-21t-56.5-41q-6-6-15.5-18.5t-29-58.5T18 998q-8-64-12.5-136.5T0 748V572q-1-145 18-290q7-55 25-99.5T75 121l14-17q14-15 29-26.5T149 58t28-13t28.5-8t23.5-4.5t23-3t17-1.5q251-18 627-18z"/></svg>',tiktok:'<svg width="20" height="20" viewBox="4 4 24 28" fill="currentColor"><path d="m28.029852 15.355c-.229338.02229-.459584.03396-.69.035-2.527359.000353-4.884553-1.273562-6.269-3.388v11.537c0 7.597274-9.18476 11.400626-14.5561926 6.029193-5.371433-5.371433-1.568081-14.556193 6.0291926-14.556193.178 0 .352.016.527.027v4.202c-.175-.021-.347-.053-.527-.053-5.8026636 0-5.8026636 8.704 0 8.704 2.404 0 4.527-1.894 4.527-4.298l.042-19.594h4.02c.379071 3.604935 3.285837 6.420719 6.901 6.685v4.67"/></svg>',threads:'<svg width="20" height="20" viewBox="0 0 192 192" fill="currentColor"><path d="m141.537 88.9883c-.827-.3964-1.667-.7779-2.518-1.1432-1.482-27.3069-16.403-42.9401-41.4571-43.1001-.1135-.0007-.2264-.0007-.3399-.0007-14.9856 0-27.4489 6.3966-35.12 18.0364l13.779 9.4521c5.7306-8.6945 14.7242-10.548 21.3476-10.548.0765 0 .1533 0 .229.0007 8.2494.0526 14.4744 2.4511 18.5034 7.1285 2.932 3.4053 4.893 8.111 5.864 14.0498-7.314-1.2431-15.224-1.6253-23.68-1.1405-23.8203 1.3721-39.1339 15.2646-38.1054 34.5687.5219 9.792 5.4001 18.216 13.7354 23.719 7.0474 4.652 16.124 6.927 25.5573 6.412 12.4577-.683 22.2307-5.436 29.0487-14.127 5.178-6.6 8.453-15.153 9.899-25.93 5.937 3.583 10.337 8.298 12.767 13.966 4.132 9.635 4.373 25.468-8.546 38.376-11.319 11.308-24.925 16.2-45.4875 16.351-22.8093-.169-40.0597-7.484-51.2754-21.742-10.5026-13.351-15.9304-32.635-16.1329-57.317.2025-24.6822 5.6303-43.9664 16.1329-57.3173 11.2157-14.2578 28.4658-21.5727 51.2751-21.7422 22.9748.1708 40.5258 7.5209 52.1708 21.8475 5.71 7.0256 10.015 15.8608 12.853 26.1623l16.147-4.3081c-3.44-12.68-8.853-23.6065-16.219-32.6682-14.929-18.36732-36.763-27.778852-64.8955-27.974h-.1126c-28.0753.19447-49.6648 9.6418-64.1686 28.0793-12.9064 16.4071-19.5639 39.2364-19.7876 67.8532l-.0007.0675.0007.0675c.2237 28.6165 6.8812 51.4465 19.7876 67.8535 14.5038 18.437 36.0933 27.885 64.1686 28.079h.1126c24.9605-.173 42.5545-6.708 57.0485-21.189 18.963-18.945 18.392-42.692 12.142-57.27-4.484-10.454-13.033-18.9448-24.723-24.5527zm-43.0965 40.5187c-10.44.588-21.2861-4.098-21.8209-14.135-.3964-7.442 5.2962-15.746 22.4616-16.7352 1.9658-.1134 3.8948-.1688 5.7898-.1688 6.235 0 12.068.6057 17.371 1.765-1.978 24.702-13.58 28.713-23.8015 29.274z"/></svg>',spotify:'<svg width="20" height="20" viewBox="0 0 496 512" fill="currentColor"><path d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"/></svg>',zoom:'<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M4.585 6.836a2.25 2.25 0 0 0-2.25 2.25v5.828a2.25 2.25 0 0 0 2.25 2.25h8.33a2.25 2.25 0 0 0 2.25-2.25v-1.956l4.013 2.869a.75.75 0 0 0 1.187-.61V8.783a.75.75 0 0 0-1.187-.61l-4.013 2.869V9.086a2.25 2.25 0 0 0-2.25-2.25z"/></svg>',"startnext-s":'<svg width="20" height="20" viewBox="0 0 375 477" fill="currentColor"><g transform="translate(363 312)"><path d="m12-312-23.8 199.9-230.6 19.7c-54.5 4.7-102.6-35.6-107.2-90.1s35.7-102.3 90.2-106.8z"/><path d="m-98.7 142.4-264.3 22.6 23.6-200.5 223.7-19.1c54.6-4.7 102.7 35.6 107.3 90.1 4.9 54.4-35.7 102.2-90.3 106.9"/></g></svg>'};function a(n,a){const t=e[n];return t&&a?t.replace(/width="\d+"/,`width="${a}"`).replace(/height="\d+"/,`height="${a}"`):t||""}function t(n){return`\n    <header class="headbar${n.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="${n.ui("menuOpen")}" aria-expanded="false">\n        ${e.burger}\n      </div>\n\n      \x3c!-- CTA --\x3e\n      <div class="headerbar__btn">\n        <a href="${n.data.ctaButton.url}" class="cta-link" aria-label="${n.data.ctaButton.label}">\n          <span class="headerbar__btn--text">${n.data.ctaButton.label}</span>\n          <span class="headerbar__btn--icon">${e.rocket}</span>\n        </a>\n      </div>\n\n      \x3c!-- Main Nav (large mode only) --\x3e\n      ${n.isLarge?`<ul class="headbar__menu headbar__action--hide" aria-label="${n.ui("mainNav")}">\n        ${n.data.mainNavigation.sort((n,e)=>n.order-e.order).map(n=>`<li class="headbar__menu-item"><a class="headbar__menu-link" href="${n.url}"${n.target?` target="${n.target}"`:""} data-nav-id="${n.id}">${n.label}</a></li>`).join("")}\n      </ul>`:""}\n\n      \x3c!-- Logo --\x3e\n      <a href="/" aria-label="${n.ui("homepage")}" class="headbar__pageLogo--animation${n.isLarge?" headbar__pageLogo--animation-large":""}">\n        <div id="page-logo-animation"></div>\n      </a>\n      ${n.isLarge?`<div class="headbar__claim headbar__claim--large">${n.ui("claimLarge")}</div>`:""}\n\n      \x3c!-- Right --\x3e\n      <div class="headbar__right">\n        ${n.showBackLink&&n.backUrl?`<a href="${n.backUrl}" class="headbar__back-link">\n          <span class="headbar__back-arrow">${e.arrowLeft}</span>\n          <span class="headbar__back-text">${n.backLabel}</span>\n        </a>`:""}\n        ${n.hideColorMode?"":`<button class="headbar__color-mode" aria-label="${n.ui("colorMode")}" title="${n.ui("colorMode")}">\n          <span class="headbar__color-mode-sun">${e.sun}</span>\n          <span class="headbar__color-mode-moon">${e.moon}</span>\n        </button>`}\n        ${n.hideLang?"":`<div class="headbar__lang">\n          <button class="headbar__lang-toggle" aria-label="${n.ui("langSelect")}" aria-expanded="false" aria-haspopup="listbox">\n            <span class="headbar__lang-code">${n.currentLang.toUpperCase()}</span>\n            <span class="headbar__lang-arrow">${e.angleDownSmall}</span>\n          </button>\n          <div class="headbar__lang-menu" role="listbox" aria-label="${n.ui("langSelect")}">\n            ${n.data.availableLanguages.map(e=>`<button class="headbar__lang-option${e.code===n.currentLang?" headbar__lang-option--active":""}"\n                 role="option" aria-selected="${e.code===n.currentLang}" data-lang="${e.code}">\n                ${e.label}\n              </button>`).join("")}\n          </div>\n        </div>`}\n        ${n.hideLogin?"":n.isAuth?`<button class="user-avatar-btn" aria-label="${n.ui("userMenu")}" style="background:none;border:none;padding:0;cursor:pointer;">\n              <img src="${n.userAvatar}" alt="${n.userName}" class="headbar__avatar">\n            </button>`:`<button class="headbar__login" aria-label="${n.ui("login")}">\n              <span class="headbar__login-text">${n.ui("login")}</span>\n              <span class="headbar__login-icon">${e["circle-user-round"]}</span>\n            </button>`}\n      </div>\n    </header>\n\n    <div class="overlay" aria-hidden="true"></div>\n\n    \x3c!-- Burger Drawer --\x3e\n    <nav class="drawer drawer--left" role="dialog" aria-label="${n.ui("mainMenu")}" aria-modal="true">\n      <div class="drawer__nav">${n.burgerItemsHtml}</div>\n    </nav>\n\n    ${n.isAuth?`\n    <nav class="drawer drawer--right" role="dialog" aria-label="${n.ui("userMenu")}" aria-modal="true">\n      <div class="drawer__user">\n        <img src="${n.userAvatar}" alt="" class="drawer__user-avatar">\n        <span class="drawer__user-name">${n.userName}</span>\n      </div>\n      <div class="drawer__nav">${n.userItemsHtml}</div>\n    </nav>`:""}\n  `}function r(n,a){return n.burgerMenu.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const t=["drawer__item"];n.highlighted&&t.push("drawer__item--highlighted"),n.small&&t.push("drawer__item--small");const r=n.expandable||n.children&&n.children.length>0,o=a.has(n.id),i=!n.highlighted&&!n.small&&!r&&n.url;let l=`<${n.url&&!r?"a":"button"} class="${t.join(" ")}"\n      ${n.url&&!r?`href="${n.url}"${n.target?` target="${n.target}"`:""}`:""}\n      ${r?`data-expand-id="${n.id}" aria-expanded="${o}"`:""}\n      data-burger-id="${n.id}">\n      ${n.label}\n      ${r?`<span class="drawer__item-expand${o?" expanded":""}">${e.angleDownSmall}</span>`:""}\n      ${i?`<span class="drawer__item-nav-arrow">${e.angleDown}</span>`:""}\n    </${n.url&&!r?"a":"button"}>`;return n.children&&n.children.length>0&&(l+=`<div class="drawer__children${o?" expanded":""}" data-children-for="${n.id}">\n        ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n      </div>`),l}).join("")}function o(n,a){return n.userMenu.items.sort((n,e)=>n.order-e.order).map(n=>{if("divider"===n.type)return'<div class="drawer__divider" role="separator"></div>';const t=["drawer__item"];n.disabled&&t.push("drawer__item--disabled"),"outline"===n.style&&t.push("drawer__item--outline");const r=n.children&&n.children.length>0,o=a.has(n.id),i="logout"===n.action,l=i?"button":n.url&&!r?"a":"button";let s=`<${l} class="${t.join(" ")}"\n      ${!n.url||r||i?"":`href="${n.url}"${n.target?` target="${n.target}"`:""}`}\n      ${n.disabled?'aria-disabled="true" tabindex="-1"':""}\n      ${r?`data-expand-id="${n.id}" aria-expanded="${o}"`:""}\n      ${i?'data-action="logout"':""}\n      data-user-id="${n.id}">\n      ${n.icon?`<span class="drawer__item-icon">${e[n.icon]||""}</span>`:""}\n      ${n.label}\n      ${n.badge?`<span class="drawer__item-badge">${n.badge}</span>`:""}\n      ${r||n.expandable?`<span class="drawer__item-expand${o?" expanded":""}">${e.angleDown}</span>`:""}\n    </${l}>`;return r&&(s+=`<div class="drawer__children${o?" expanded":""}" data-children-for="${n.id}">\n        ${n.children.map(n=>`<a href="${n.url}"${n.target?` target="${n.target}"`:""} class="drawer__child" data-nav-id="${n.id}">${n.label}</a>`).join("")}\n      </div>`),s}).join("")}function i(n){return`\n    <footer class="footer" role="contentinfo">\n      \x3c!-- Social --\x3e\n      <div class="footer__part">\n        <h3 class="footer__title">${n.socialTitle}</h3>\n        <div class="footer__social" aria-label="Soziale Medien">\n          ${n.social.map(n=>`\n            <a href="${n.url}"\n               class="footer__social-link"\n               target="_blank"\n               rel="noopener noreferrer"\n               aria-label="${n.platform}">\n              ${a(n.platform,32)}\n            </a>\n          `).join("")}\n        </div>\n      </div>\n\n      \x3c!-- Stats --\x3e\n      <div class="footer__part">\n        <h3 class="footer__title">${n.statsTitle}</h3>\n        <div class="footer__stats">\n          ${n.stats.map(n=>`\n            <div class="footer__stat-item">\n              <span class="footer__stat-value">${n.value}</span>\n              <span class="footer__stat-caption">${n.caption}</span>\n            </div>\n          `).join("")}\n        </div>\n      </div>\n\n      \x3c!-- Navigation columns + B Corp --\x3e\n      <div class="footer__part">\n        <div class="footer__columns">\n          ${n.columns.map(n=>`\n            <div class="footer__column">\n              <h4 class="footer__nav-title">${n.title}</h4>\n              <ul class="footer__nav">\n                ${n.links.map(n=>`<li><a href="${n.url}" class="footer__link">${n.label}</a></li>`).join("")}\n              </ul>\n            </div>\n          `).join("")}\n          <div class="footer__bcorp">\n            <div class="footer__bcorp-badge"><svg viewBox="0 0 120 160" fill="currentColor" xmlns="http://www.w3.org/2000/svg">\n  <rect x="2" y="2" width="116" height="156" rx="8" fill="none" stroke="currentColor" stroke-width="3"/>\n  <text x="60" y="55" text-anchor="middle" font-size="50" font-weight="800" fill="currentColor">B</text>\n  <line x1="20" y1="80" x2="100" y2="80" stroke="currentColor" stroke-width="2"/>\n  <text x="60" y="105" text-anchor="middle" font-size="13" font-weight="600" fill="currentColor">Corporation</text>\n</svg></div>\n            <div>\n              <div class="footer__bcorp-label">${n.bcorp.label}</div>\n              <div class="footer__bcorp-text">${n.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">${n.funding.title}</div>\n          <div class="footer__funding-text">${n.funding.text}</div>\n        </div>\n      </div>\n\n      \x3c!-- Payment methods --\x3e\n      <div class="footer__part">\n        <div class="footer__payments-title">${n.payments.title}</div>\n        <div class="footer__payments">\n          ${n.payments.methods.map(n=>`<span class="footer__payment">${n}</span>`).join("")}\n        </div>\n      </div>\n\n      \x3c!-- Logo --\x3e\n      <div class="footer__part footer__part--sm">\n        <a href="/" aria-label="Startnext Homepage" class="footer__logo">\n          ${a("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">${n.claim}</div>\n      </div>\n\n      \x3c!-- Legal + Copyright --\x3e\n      <div class="footer__part footer__dim">\n        <div class="footer__legal">\n          ${n.legalLinks.map(n=>`<a href="${n.url}" class="footer__link">${n.label}</a>`).join("")}\n        </div>\n        <p class="footer__copyright">${n.copyright}</p>\n      </div>\n    </footer>\n  `}const l='\n  *, *::before, *::after {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  :host {\n    display: block;\n    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);\n    font-size: var(--font-size-base, 16px);\n    line-height: 1.5;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  a {\n    color: inherit;\n    text-decoration: none;\n  }\n\n  button {\n    font: inherit;\n    cursor: pointer;\n    border: none;\n    background: none;\n    color: inherit;\n  }\n\n  ul, ol {\n    list-style: none;\n  }\n\n  img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n',s=`\n  ${l}\n\n  :host {\n    display: block;\n  }\n\n  /* ── Headbar ─────────────────────────────────────────────────────────── */\n  .headbar {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 100px;\n    z-index: var(--header-z-index, 12);\n    transition: transform 0.3s ease, opacity 0.3s ease, backdrop-filter 0.3s linear;\n    will-change: transform, opacity, backdrop-filter;\n  }\n\n  .headbar::after {\n    content: "";\n    position: absolute;\n    inset: 0;\n    background-color: #FFFFFF;\n    z-index: -1;\n    opacity: 0;\n    transition: opacity 0.3s linear;\n  }\n\n  @media (min-width: 768px) {\n    .headbar > * {\n      transition: transform 0.3s ease, opacity 0.3s ease;\n    }\n  }\n\n  /* ── States ─────────────────────────────────────────────────────────── */\n  .headbar--light .headbar__icon {\n    fill: #FFFFFF;\n    color: #FFFFFF;\n  }\n\n  .headbar--light a,\n  .headbar--light button {\n    color: #FFFFFF;\n  }\n\n  .headbar--tight::after {\n    opacity: 0.8;\n  }\n\n  .headbar--tight {\n    backdrop-filter: blur(2px);\n  }\n\n  .headbar--tight .headbar__action--hide {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  .headbar--slide-up {\n    pointer-events: none;\n    opacity: 0;\n    transform: translateY(-100%);\n  }\n\n  /* ── Left (Burger) ──────────────────────────────────────────────────── */\n  .headbar__left {\n    position: absolute;\n    left: 16px;\n    top: 34px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    z-index: 2;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__left {\n      left: 24px;\n    }\n  }\n\n  /* ── Right ──────────────────────────────────────────────────────────── */\n  .headbar__right {\n    position: absolute;\n    right: 16px;\n    top: 38px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    z-index: 2;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__right {\n      right: 24px;\n      gap: 12px;\n    }\n  }\n\n  /* ── Icons ──────────────────────────────────────────────────────────── */\n  .headbar__icon {\n    fill: var(--text-primary, #304b50);\n    color: var(--text-primary, #304b50);\n    transition: fill 0.3s linear, color 0.3s linear;\n    will-change: fill, color;\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__icon svg {\n    width: 24px;\n    height: 24px;\n  }\n\n  .headbar__icon--clickable {\n    cursor: pointer;\n    padding: 4px;\n    border-radius: 4px;\n  }\n\n  .headbar__icon--clickable:hover {\n    opacity: 0.7;\n  }\n\n  /* ── CTA Button ─────────────────────────────────────────────────────── */\n  .headerbar__btn {\n    position: absolute;\n    left: 54px;\n    top: 34px;\n    background-color: var(--btn-primary-bg, #06E481);\n    height: 32px;\n    border-radius: 16px;\n    padding: 0 15px;\n    font-size: 16px;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    opacity: 0;\n    transition: all 300ms ease-out;\n    will-change: transform, opacity, max-width;\n    z-index: 2;\n    overflow: hidden;\n  }\n\n  .headerbar__btn--loaded {\n    opacity: 1;\n  }\n\n  .headerbar__btn a {\n    display: flex;\n    align-items: center;\n    white-space: nowrap;\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .headerbar__btn:hover {\n    background-color: var(--btn-primary-hover, #00B86F);\n  }\n\n  .headerbar__btn--text {\n    fill: var(--text-primary, #304b50);\n    transition: all 300ms ease-out;\n  }\n\n  .headerbar__btn--icon {\n    opacity: 0;\n    width: 0;\n    transition: all 300ms ease-out;\n    display: flex;\n    align-items: center;\n  }\n\n  @media (max-width: 767px) {\n    .headbar--tight .headerbar__btn--text {\n      width: 0;\n      overflow: hidden;\n    }\n    .headbar--tight .headerbar__btn--icon {\n      width: 24px;\n      opacity: 1;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .headerbar__btn {\n      left: 80px;\n    }\n  }\n\n  /* ── Main Nav (desktop > 1100px) ────────────────────────────────────── */\n  .headbar__menu {\n    display: none;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__menu {\n      position: absolute;\n      left: 50%;\n      transform: translateX(-50%);\n      height: 100%;\n      display: flex;\n      align-items: center;\n      transition: all 300ms ease-out;\n      max-width: fit-content;\n      will-change: transform, opacity, max-width;\n    }\n\n    .headbar__menu--faded {\n      transform: translateX(calc(-50% - 60px));\n      max-width: 0;\n      opacity: 0;\n    }\n  }\n\n  .headbar__menu-item {\n    list-style: none;\n  }\n\n  .headbar__menu-link {\n    display: inline-block;\n    padding: 8px 15px;\n    position: relative;\n    font-size: 16px;\n    color: var(--text-primary, #304b50);\n    text-decoration: none;\n    transition: color 0.3s;\n  }\n\n  .headbar--light .headbar__menu-link {\n    color: #FFFFFF;\n  }\n\n  .headbar__menu-link::after {\n    content: "";\n    position: absolute;\n    left: 15px;\n    right: 15px;\n    bottom: 2px;\n    height: 2px;\n    background-color: var(--text-primary, #304b50);\n    opacity: 0;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__menu-link::after {\n    background-color: #FFFFFF;\n  }\n\n  .headbar__menu-link:hover::after {\n    opacity: 1;\n  }\n\n  /* ── Logo (Lottie) ──────────────────────────────────────────────────── */\n  .headbar__pageLogo--animation {\n    width: 100%;\n    max-width: 200px;\n    margin: 0 auto;\n    display: block;\n    position: relative;\n    top: 110px;\n    transform: translateY(-110px) scale(0.65);\n    z-index: 1;\n    text-decoration: none;\n  }\n\n  .headbar__pageLogo--animation svg {\n    transform: unset !important;\n  }\n\n  .headbar__pageLogo--animation svg path[fill] {\n    fill: var(--text-primary, #304b50);\n  }\n  .headbar__pageLogo--animation svg path[stroke] {\n    stroke: var(--text-primary, #304b50);\n  }\n\n  .headbar--light .headbar__pageLogo--animation svg path[fill] {\n    fill: #FFFFFF;\n  }\n  .headbar--light .headbar__pageLogo--animation svg path[stroke] {\n    stroke: #FFFFFF;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__pageLogo--animation {\n      max-width: 300px;\n      transform: translateY(-115px) scale(0.5);\n      top: 100px;\n    }\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__pageLogo--animation {\n      top: 120px;\n      transform: translateY(-140px) scale(0.5);\n    }\n  }\n\n  .headbar__pageLogo--animation-large {\n    transform: translateY(0) scale(1);\n  }\n\n  /* ── Claim ──────────────────────────────────────────────────────────── */\n  .headbar__claim {\n    font-size: 14px;\n    transition: all 0.3s;\n    width: 100%;\n    text-align: center;\n    color: var(--text-primary, #304b50);\n  }\n\n  .headbar--light .headbar__claim {\n    color: #FFFFFF;\n  }\n\n  .headbar__claim--large {\n    position: absolute;\n    top: 201px;\n    left: 50%;\n    transform: translate(-50%);\n    white-space: nowrap;\n    z-index: 1;\n  }\n\n  .headbar--tight .headbar__claim--large {\n    pointer-events: none;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__claim--large {\n      top: 232px;\n    }\n  }\n\n  @media (min-width: 1100px) {\n    .headbar__claim--large {\n      top: 252px;\n    }\n  }\n\n  /* ── User Avatar ────────────────────────────────────────────────────── */\n  .headbar__avatar {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    object-fit: cover;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: border-color 0.3s;\n  }\n\n  .headbar--light .headbar__avatar {\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  .headbar__avatar:hover {\n    opacity: 0.85;\n  }\n\n  /* ── Login Button ───────────────────────────────────────────────────── */\n  .headbar__login {\n    padding: 4px 6px;\n    font-size: 16px;\n    font-family: inherit;\n    white-space: nowrap;\n    border: none;\n    cursor: pointer;\n    background: none;\n    color: var(--text-primary, #304b50);\n    transition: opacity 0.2s;\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar--light .headbar__login {\n    color: #FFFFFF;\n  }\n\n  .headbar__login:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__login-icon {\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__login-text {\n    display: none;\n  }\n\n  .headbar__login-icon {\n    display: flex;\n  }\n\n  @media (min-width: 768px) {\n    .headbar__login-text {\n      display: inline;\n    }\n    .headbar__login-icon {\n      display: none;\n    }\n  }\n\n  /* ── Language Dropdown ────────────────────────────────────────────── */\n  .headbar__lang {\n    position: relative;\n  }\n\n  .headbar__lang-toggle {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-family: inherit;\n    font-size: 16px;\n    padding: 4px 6px;\n    border: none;\n    background: none;\n    color: var(--text-primary, #304b50);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__lang-toggle {\n    color: #FFFFFF;\n  }\n\n  .headbar__lang-toggle:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__lang-arrow {\n    display: flex;\n    align-items: center;\n    position: relative;\n    top: -1px;\n    left: 2px;\n    transition: transform 0.25s ease;\n  }\n\n  .headbar__lang-arrow.open {\n    transform: rotate(180deg);\n  }\n\n  .headbar__lang-menu {\n    position: absolute;\n    top: calc(100% + 6px);\n    left: 50%;\n    min-width: 120px;\n    background: #FFFFFF;\n    border-radius: 8px;\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    padding: 4px 0;\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(-50%) translateY(-8px);\n    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;\n    z-index: 10;\n  }\n\n  .headbar__lang-menu.open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateX(-50%) translateY(0);\n  }\n\n  .headbar__lang-option {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    width: 100%;\n    padding: 8px 14px;\n    font-family: inherit;\n    font-size: 13px;\n    font-weight: 500;\n    color: #304b50;\n    background: none;\n    border: none;\n    cursor: pointer;\n    transition: background 0.15s, color 0.15s;\n    text-align: left;\n  }\n\n  .headbar__lang-option:hover {\n    color: var(--btn-primary-bg, #06E481);\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .headbar__lang-option--active {\n    font-weight: 700;\n    color: var(--btn-primary-bg, #06E481);\n  }\n\n  .headbar--light .headbar__lang-option {\n    color: #304b50;\n  }\n\n  .headbar--light .headbar__lang-option:hover,\n  .headbar--light .headbar__lang-option--active {\n    color: var(--btn-primary-bg, #06E481);\n  }\n\n  /* ── Back Link ────────────────────────────────────────────────────────── */\n  .headbar__back-link {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    text-decoration: none;\n    color: var(--text-primary, #304b50);\n    font-size: 16px;\n    white-space: nowrap;\n    transition: opacity 0.2s;\n  }\n\n  .headbar--light .headbar__back-link {\n    color: #FFFFFF;\n  }\n\n  .headbar__back-link:hover {\n    opacity: 0.75;\n  }\n\n  .headbar__back-arrow {\n    display: flex;\n    align-items: center;\n    position: relative;\n    top: -1px;\n  }\n\n  @media (max-width: 768px) {\n    .headbar__back-text { display: none; }\n  }\n\n  /* ── Color Mode Toggle ──────────────────────────────────────────────── */\n  .headbar__color-mode {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-radius: 50%;\n    color: var(--text-primary, #304b50);\n    transition: opacity 0.2s, color 0.3s;\n  }\n\n  .headbar--light .headbar__color-mode {\n    color: #FFFFFF;\n  }\n\n  .headbar__color-mode:hover {\n    opacity: 0.7;\n  }\n\n  .headbar__color-mode-sun,\n  .headbar__color-mode-moon {\n    display: flex;\n    align-items: center;\n  }\n\n  .headbar__color-mode-moon {\n    display: none;\n  }\n\n  :host([color-mode="dark"]) .headbar__color-mode-sun {\n    display: none;\n  }\n\n  :host([color-mode="dark"]) .headbar__color-mode-moon {\n    display: flex;\n  }\n\n  /* ── Overlay ────────────────────────────────────────────────────────── */\n  .overlay {\n    position: fixed;\n    inset: 0;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: var(--overlay-z-index, 1050);\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),\n                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .overlay.open {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  /* ── Drawer (shared) ────────────────────────────────────────────────── */\n  .drawer {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    width: 320px;\n    max-width: 85vw;\n    background: #FFFFFF;\n    z-index: var(--drawer-z-index, 1100);\n    overflow-y: auto;\n    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    color: var(--text-primary, #304b50);\n  }\n\n  .drawer--left {\n    left: 0;\n    transform: translateX(-100%);\n    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer--right {\n    right: 0;\n    transform: translateX(100%);\n    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer.open {\n    transform: translateX(0);\n  }\n\n  .drawer__user {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color, #E5E7EB);\n  }\n\n  .drawer__user-avatar {\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n\n  .drawer__user-name {\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  .drawer__nav {\n    padding: 8px 0;\n  }\n\n  .drawer__item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    font-size: 16px;\n    font-weight: 500;\n    transition: background-color 0.15s;\n    cursor: pointer;\n    width: 100%;\n    text-align: left;\n    color: var(--text-primary, #304b50);\n    text-decoration: none;\n    border: none;\n    background: none;\n    font-family: inherit;\n  }\n\n  .drawer__item:hover {\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .drawer__item--highlighted {\n    color: #FFFFFF;\n    background: var(--btn-primary-bg, #06E481);\n    margin: 8px 16px;\n    border-radius: 8px;\n    justify-content: center;\n    font-weight: 600;\n    width: auto;\n  }\n\n  .drawer__item--highlighted:hover {\n    background: var(--btn-primary-hover, #00B86F);\n  }\n\n  .drawer__item--small {\n    font-size: 14px;\n    color: var(--text-secondary, #6B7280);\n    padding: 8px 20px;\n    font-weight: 400;\n  }\n\n  .drawer__item--disabled {\n    color: var(--text-disabled, #D1D5DB);\n    pointer-events: none;\n  }\n\n  .drawer__item--outline {\n    margin: 8px 16px;\n    border: 1.5px solid var(--border-color, #E5E7EB);\n    border-radius: 8px;\n    justify-content: center;\n    width: auto;\n    background: none;\n  }\n\n  .drawer__item--outline:hover {\n    border-color: var(--text-secondary, #6B7280);\n    background: var(--hover-bg, #F3F4F6);\n  }\n\n  .drawer__item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 20px;\n    height: 20px;\n    flex-shrink: 0;\n  }\n\n  .drawer__item-badge {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 22px;\n    height: 22px;\n    border-radius: 50%;\n    background: var(--btn-primary-bg, #06E481);\n    color: #FFFFFF;\n    font-size: 12px;\n    font-weight: 700;\n  }\n\n  .drawer__item-expand {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    transform: rotate(0deg);\n    transition: transform 0.3s ease;\n  }\n\n  .drawer__item-expand.expanded {\n    transform: rotate(180deg);\n  }\n\n  .drawer__item-nav-arrow {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    transform: rotate(-90deg);\n  }\n\n  .drawer__divider {\n    height: 1px;\n    background: var(--border-color, #E5E7EB);\n    margin: 8px 20px;\n  }\n\n  .drawer__children {\n    max-height: 0;\n    overflow: hidden;\n    transition: max-height 0.3s ease;\n  }\n\n  .drawer__children.expanded {\n    max-height: 500px;\n  }\n\n  .drawer__child {\n    display: block;\n    padding: 10px 20px 10px 52px;\n    font-size: 14px;\n    color: var(--text-secondary, #6B7280);\n    transition: background-color 0.15s, color 0.15s;\n    text-decoration: none;\n  }\n\n  .drawer__child:hover {\n    background: var(--hover-bg, #F3F4F6);\n    color: var(--text-primary, #304b50);\n  }\n\n  /* ── Focus ──────────────────────────────────────────────────────────── */\n  .headbar__icon--clickable:focus-visible,\n  .headerbar__btn:focus-visible,\n  .headbar__login:focus-visible,\n  .headbar__menu-link:focus-visible,\n  .drawer__item:focus-visible,\n  .drawer__child:focus-visible {\n    outline: 2px solid var(--btn-primary-bg, #06E481);\n    outline-offset: 2px;\n  }\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n`,d=`\n  ${l}\n\n  :host {\n    display: block;\n    background: var(--footer-bg, #304b50);\n    color: var(--footer-text, #FFFFFF);\n  }\n\n  .footer {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 60px 24px 40px;\n    text-align: center;\n  }\n\n  /* ── Sections ── */\n  .footer__part + .footer__part {\n    margin-top: 40px;\n  }\n\n  .footer__part--sm + .footer__part--sm {\n    margin-top: 20px;\n  }\n\n  /* ── Title ── */\n  .footer__title {\n    font-size: 18px;\n    font-weight: 600;\n    margin-bottom: 24px;\n    color: var(--footer-text, #FFFFFF);\n  }\n\n  /* ── Social ── */\n  .footer__social {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 8px;\n  }\n\n  .footer__social-link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    color: var(--footer-text, #FFFFFF);\n    transition: transform 0.3s ease;\n  }\n\n  .footer__social-link:hover {\n    animation: logoScale 0.5s linear 1;\n  }\n\n  .footer__social-link:focus-visible {\n    outline: 2px solid var(--footer-link-hover, #06E481);\n    outline-offset: 2px;\n    border-radius: 4px;\n  }\n\n  @keyframes logoScale {\n    0% { transform: scale(1); }\n    50% { transform: scale(1.2); }\n    100% { transform: scale(1); }\n  }\n\n  @media (min-width: 576px) {\n    .footer__social {\n      gap: 24px;\n    }\n  }\n\n  /* ── Stats ── */\n  .footer__stats {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 16px 48px;\n  }\n\n  .footer__stat-item {\n    text-align: center;\n  }\n\n  .footer__stat-value {\n    display: block;\n    font-size: 32px;\n    font-weight: 800;\n    line-height: 1;\n  }\n\n  .footer__stat-caption {\n    display: block;\n    font-size: 13px;\n    margin-top: 8px;\n    opacity: 0.8;\n  }\n\n  /* ── Navigation columns ── */\n  .footer__columns {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 32px;\n    text-align: left;\n  }\n\n  .footer__nav-title {\n    font-size: 15px;\n    font-weight: 800;\n    margin-bottom: 12px;\n    color: var(--footer-text, #FFFFFF);\n  }\n\n  .footer__nav {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    line-height: 1.8;\n  }\n\n  .footer__nav a {\n    font-size: 15px;\n    color: var(--footer-text, #FFFFFF);\n    text-decoration: none;\n    transition: opacity 0.2s;\n  }\n\n  .footer__nav a:hover {\n    opacity: 0.7;\n  }\n\n  .footer__nav a:focus-visible {\n    outline: 2px solid var(--footer-link-hover, #06E481);\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  /* ── B Corp ── */\n  .footer__bcorp {\n    display: flex;\n    align-items: flex-start;\n    gap: 16px;\n  }\n\n  .footer__bcorp-badge {\n    flex-shrink: 0;\n    width: 80px;\n    height: auto;\n  }\n\n  .footer__bcorp-badge svg {\n    width: 80px;\n    height: auto;\n    display: block;\n  }\n\n  .footer__bcorp-label {\n    font-size: 15px;\n    font-weight: 800;\n    margin-bottom: 4px;\n  }\n\n  .footer__bcorp-text {\n    font-size: 14px;\n    line-height: 1.5;\n    opacity: 0.85;\n  }\n\n  .footer__bcorp-line {\n    width: 100%;\n    max-width: 180px;\n    height: 3px;\n    background: var(--footer-text, #FFFFFF);\n    margin-top: 12px;\n  }\n\n  /* ── Funding notice ── */\n  .footer__funding {\n    text-align: left;\n    max-width: 900px;\n    margin: 0 auto;\n  }\n\n  .footer__funding-title {\n    font-size: 15px;\n    font-weight: 700;\n    margin-bottom: 8px;\n  }\n\n  .footer__funding-text {\n    font-size: 14px;\n    line-height: 1.6;\n    opacity: 0.85;\n  }\n\n  /* ── Payments ── */\n  .footer__payments-title {\n    font-size: 16px;\n    font-weight: 700;\n    margin-bottom: 16px;\n  }\n\n  .footer__payments {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 8px 40px;\n  }\n\n  .footer__payment {\n    font-size: 15px;\n    opacity: 0.85;\n  }\n\n  /* ── Logo ── */\n  .footer__logo {\n    display: inline-flex;\n    color: var(--footer-text, #FFFFFF);\n  }\n\n  .footer__logo:hover {\n    opacity: 0.8;\n  }\n\n  .footer__logo:focus-visible {\n    outline: 2px solid var(--footer-link-hover, #06E481);\n    outline-offset: 4px;\n    border-radius: 4px;\n  }\n\n  /* ── Claim ── */\n  .footer__claim {\n    font-size: 20px;\n    font-weight: 600;\n  }\n\n  /* ── Dimmed section (legal + copyright) ── */\n  .footer__dim {\n    opacity: 0.5;\n  }\n\n  .footer__dim a {\n    color: var(--footer-text, #FFFFFF);\n    text-decoration: none;\n    transition: opacity 0.2s;\n  }\n\n  .footer__dim a:hover {\n    opacity: 0.7;\n  }\n\n  .footer__legal {\n    display: flex;\n    justify-content: center;\n    flex-wrap: wrap;\n    gap: 4px 20px;\n    font-size: 14px;\n    margin-bottom: 8px;\n  }\n\n  .footer__copyright {\n    font-size: 14px;\n  }\n\n  /* ── Responsive ── */\n  @media (max-width: 767px) {\n    .footer__columns {\n      grid-template-columns: 1fr 1fr;\n      gap: 32px 24px;\n    }\n\n    .footer__bcorp {\n      grid-column: 1 / -1;\n      justify-content: center;\n    }\n\n    .footer__stat-value {\n      font-size: 26px;\n    }\n\n    .footer__funding {\n      text-align: center;\n    }\n  }\n\n  @media (max-width: 479px) {\n    .footer {\n      padding: 40px 16px 32px;\n    }\n\n    .footer__columns {\n      grid-template-columns: 1fr;\n      text-align: center;\n    }\n\n    .footer__bcorp {\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n    }\n\n    .footer__bcorp-line {\n      margin-left: auto;\n      margin-right: auto;\n    }\n\n    .footer__stats {\n      flex-direction: column;\n      gap: 24px;\n    }\n  }\n`,c={menuOpen:{de:"Menü öffnen",en:"Open menu"},menuClose:{de:"Menü schließen",en:"Close menu"},mainMenu:{de:"Hauptmenü",en:"Main menu"},mainNav:{de:"Hauptnavigation",en:"Main navigation"},userMenu:{de:"Benutzermenü",en:"User menu"},login:{de:"Anmelden",en:"Sign In"},homepage:{de:"Startnext Homepage",en:"Startnext Homepage"},langSelect:{de:"Sprache",en:"Language"},claimTop:{de:"Crowdfinanzieren",en:"Crowdfunding"},claimLarge:{de:"Crowdfinanziert seit 2010",en:"Crowdfunded since 2010"},colorMode:{de:"Farbmodus wechseln",en:"Toggle color mode"}};function p(n,e){return c[n]?.[e]||c[n]?.de||n}const h={};function g(n){return{...n,theme:h}}function _(n){return{...n,theme:h}}function x(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function b(n){const e=[],a=n.mainNavigation.map(n=>`<a href="${x(n.url)}">${x(n.label)}</a>`).join("");e.push(`<div data-section="main-navigation">${a}<a href="${x(n.ctaButton.url)}">${x(n.ctaButton.label)}</a></div>`);const t=[];for(const a of n.burgerMenu)if("divider"!==a.type&&"logout"!==a.action&&a.url)if(a.children){const n=a.children.filter(n=>n.url).map(n=>`<a href="${x(n.url)}">${x(n.label)}</a>`).join("");e.push(`<div data-section="${x(a.label.toLowerCase())}"><a href="${x(a.url)}">${x(a.label)}</a>${n}</div>`)}else a.small&&t.push(a);if(t.length>0){const n=t.map(n=>`<a href="${x(n.url)}">${x(n.label)}</a>`).join("");e.push(`<div data-section="legal">${n}</div>`)}return`<nav data-crawler-nav aria-hidden="true" style="display:none">${e.join("")}</nav>`}function u(n){const e=[];for(const a of n.columns){const n=a.links.map(n=>`<a href="${x(n.url)}">${x(n.label)}</a>`).join("");e.push(`<div data-section="${x(a.title.toLowerCase())}">${n}</div>`)}const a=n.legalLinks.map(n=>`<a href="${x(n.url)}">${x(n.label)}</a>`).join("");return e.push(`<div data-section="legal">${a}</div>`),`<nav data-crawler-nav aria-hidden="true" style="display:none">${e.join("")}</nav>`}export{d as footerCSS,a as getIcon,p as getUiString,s as headerCSS,e as icons,r as renderBurgerItems,i as renderFooter,u as renderFooterCrawlerNav,t as renderHeader,b as renderHeaderCrawlerNav,o as renderUserItems,l as resetCSS,_ as toFooterRenderData,g as toHeaderRenderData};

package/dist/types/index.d.ts

@@ -47,6 +47,10 @@ export interface HeaderData {
     theme: ThemeVariables;
     language: string;
     availableLanguages: LanguageOption[];
+    backLink?: {
+        label: string;
+        url: string;
+    };
 }
 export interface FooterColumn {
     title: string;

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "@startnext/chrome",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "Startnext Chrome Web Components",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "unpkg": "dist/index.umd.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./render": {
+      "import": "./dist/render.js",
+      "types": "./dist/render.d.ts"
+    }
+  },
   "files": [
     "dist",
     "README.md"
   ],
-  "scripts": {
-    "dev": "rollup -c -w",
-    "build": "rollup -c",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "pnpm run build",
-    "lint": "eslint src --ext .ts"
-  },
   "keywords": [
     "web-components",
     "header",
@@ -44,5 +47,11 @@
   "dependencies": {
     "lottie-web": "^5.13.0",
     "lucide-static": "^0.564.0"
+  },
+  "scripts": {
+    "dev": "rollup -c -w",
+    "build": "rollup -c",
+    "clean": "rm -rf dist",
+    "lint": "eslint src --ext .ts"
   }
-}
+}