cat-framework-core 0.1.6

package/dist/index.mjs

@@ -0,0 +1,910 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { clsx as Z } from "clsx";
+import { twMerge as J } from "tailwind-merge";
+import { cva as C } from "class-variance-authority";
+import * as x from "react";
+import S, { useState as y, createContext as L, useContext as $, useCallback as Q, useEffect as X } from "react";
+import { Slot as U, createSlot as Y } from "@radix-ui/react-slot";
+import { motion as A } from "framer-motion";
+import * as v from "@radix-ui/react-accordion";
+import { ChevronDown as F, X as ee, Menu as re, Search as te, ChevronRight as ae, Cloud as ne, Star as ie, Check as oe } from "lucide-react";
+import "react-dom";
+function c(...t) {
+  return J(Z(t));
+}
+const se = C("", {
+  variants: {
+    variant: {
+      h1: "font-display text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl",
+      h2: "font-display text-3xl font-bold tracking-tight sm:text-4xl",
+      h3: "font-display text-2xl font-semibold tracking-tight",
+      h4: "font-display text-xl font-semibold",
+      h5: "font-display text-lg font-semibold",
+      h6: "font-display text-base font-semibold",
+      body: "font-body text-base leading-relaxed",
+      "body-sm": "font-body text-sm leading-relaxed",
+      "body-lg": "font-body text-lg leading-relaxed",
+      caption: "font-body text-xs text-muted-foreground",
+      overline: "font-body text-xs font-semibold uppercase tracking-widest text-muted-foreground"
+    },
+    color: {
+      default: "text-foreground",
+      muted: "text-muted-foreground",
+      primary: "text-primary",
+      accent: "text-accent",
+      destructive: "text-destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "body",
+    color: "default"
+  }
+}), de = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  body: "p",
+  "body-sm": "p",
+  "body-lg": "p",
+  caption: "span",
+  overline: "span"
+}, m = S.forwardRef(
+  ({ className: t, variant: a = "body", tone: r = "default", as: o, children: s, ...n }, d) => {
+    const u = o || de[a] || "p";
+    return /* @__PURE__ */ e(
+      u,
+      {
+        ref: d,
+        className: c(se({ variant: a, color: r, className: t })),
+        ...n,
+        children: s
+      }
+    );
+  }
+);
+m.displayName = "Typography";
+const le = C(
+  "inline-flex items-center rounded-full px-3 py-0.5 font-body text-xs font-medium transition-fast",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary/10 text-primary",
+        secondary: "bg-secondary/20 text-secondary",
+        success: "bg-success/10 text-success",
+        warning: "bg-warning/10 text-warning",
+        destructive: "bg-destructive/10 text-destructive",
+        outline: "border border-border text-foreground"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+), ce = S.forwardRef(
+  ({ className: t, variant: a, ...r }, o) => /* @__PURE__ */ e("span", { ref: o, className: c(le({ variant: a, className: t })), ...r })
+);
+ce.displayName = "Badge";
+const me = C(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl font-medium font-body transition-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary-hover",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-muted hover:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-muted hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90"
+      },
+      size: {
+        default: "h-10 px-4 py-2 text-sm",
+        sm: "h-8 rounded-lg px-3 text-xs",
+        lg: "h-12 rounded-xl px-8 text-base",
+        xl: "h-14 rounded-xl px-10 text-lg",
+        icon: "h-10 w-10 rounded-xl"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+), g = x.forwardRef(
+  ({ className: t, variant: a, size: r, asChild: o = !1, ...s }, n) => /* @__PURE__ */ e(o ? U : "button", { className: c(me({ variant: a, size: r, className: t })), ref: n, ...s })
+);
+g.displayName = "Button";
+const Fe = ({
+  headline: t,
+  headlineMobile: a,
+  subheadline: r,
+  subheadlineMobile: o,
+  ctaLabel: s,
+  ctaHref: n = "#",
+  secondaryCtaLabel: d,
+  secondaryCtaHref: u = "#",
+  backgroundImage: h,
+  backgroundImageMobile: p,
+  imageAlt: f = "",
+  className: N,
+  ...z
+}) => /* @__PURE__ */ i("section", { className: c("relative overflow-hidden", N), ...z, children: [
+  /* @__PURE__ */ i("div", { className: "hidden md:flex relative min-h-[420px] md:min-h-[420px] lg:min-h-[600px]", children: [
+    h && /* @__PURE__ */ e(
+      "img",
+      {
+        src: h,
+        alt: f,
+        className: "absolute inset-0 h-full w-full object-cover object-right",
+        loading: "eager"
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-r from-black/80 via-black/50 to-transparent" }),
+    /* @__PURE__ */ e("div", { className: "relative z-10 flex items-center w-full pl-8 lg:pl-16", children: /* @__PURE__ */ i(
+      A.div,
+      {
+        initial: { opacity: 0, y: 16 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.4, ease: "easeOut" },
+        className: "px-6 py-16 lg:px-8 lg:py-20 max-w-[500px] lg:max-w-[480px]",
+        children: [
+          /* @__PURE__ */ e(m, { variant: "h1", className: "text-white drop-shadow-lg", as: "h1", children: t }),
+          r && /* @__PURE__ */ e(m, { variant: "body-lg", className: "mt-4 text-white/85 drop-shadow-md", children: r }),
+          (s || d) && /* @__PURE__ */ i("div", { className: "mt-8 flex flex-wrap gap-4", children: [
+            s && /* @__PURE__ */ e(
+              g,
+              {
+                size: "lg",
+                className: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg",
+                asChild: !0,
+                children: /* @__PURE__ */ e("a", { href: n, children: s })
+              }
+            ),
+            d && /* @__PURE__ */ e(
+              g,
+              {
+                size: "lg",
+                variant: "outline",
+                className: "border-white/40 text-foreground bg-white/90 hover:bg-white shadow-lg",
+                asChild: !0,
+                children: /* @__PURE__ */ e("a", { href: u, children: d })
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
+  ] }),
+  /* @__PURE__ */ i("div", { className: "block md:hidden relative min-h-[85vh] flex flex-col", children: [
+    (p || h) && /* @__PURE__ */ e(
+      "img",
+      {
+        src: p || h,
+        alt: f,
+        className: "absolute inset-0 h-full w-full object-cover object-center",
+        loading: "eager"
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-black/80" }),
+    /* @__PURE__ */ i("div", { className: "relative z-10 flex flex-1 flex-col justify-between px-5 py-10", children: [
+      /* @__PURE__ */ i(
+        A.div,
+        {
+          initial: { opacity: 0, y: 12 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.4 },
+          children: [
+            /* @__PURE__ */ e(m, { variant: "h2", className: "text-white drop-shadow-lg", as: "h1", children: a || t }),
+            (o || r) && /* @__PURE__ */ e(m, { variant: "body-lg", className: "mt-3 text-white/90 drop-shadow-lg font-medium leading-relaxed", children: o || r })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex-1" }),
+      (s || d) && /* @__PURE__ */ i(
+        A.div,
+        {
+          initial: { opacity: 0, y: 12 },
+          animate: { opacity: 1, y: 0 },
+          transition: { duration: 0.4, delay: 0.15 },
+          className: "flex flex-col gap-3",
+          children: [
+            s && /* @__PURE__ */ e(
+              g,
+              {
+                size: "lg",
+                className: "w-full bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg",
+                asChild: !0,
+                children: /* @__PURE__ */ e("a", { href: n, children: s })
+              }
+            ),
+            d && /* @__PURE__ */ e(
+              g,
+              {
+                size: "lg",
+                variant: "outline",
+                className: "w-full border-white/40 text-foreground bg-white/90 hover:bg-white shadow-lg",
+                asChild: !0,
+                children: /* @__PURE__ */ e("a", { href: u, children: d })
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] })
+] }), Se = ({
+  heading: t,
+  text: a,
+  imageSrc: r,
+  imageAlt: o,
+  ctaLabel: s,
+  ctaHref: n = "#",
+  imagePosition: d = "left",
+  className: u,
+  ...h
+}) => /* @__PURE__ */ e("section", { className: c("section-padding", u), ...h, children: /* @__PURE__ */ i(
+  "div",
+  {
+    className: c(
+      "container-wide grid items-center gap-8 md:grid-cols-2 lg:gap-16",
+      d === "right" && "md:[&>*:first-child]:order-2"
+    ),
+    children: [
+      /* @__PURE__ */ e("div", { className: "overflow-hidden rounded-2xl", children: /* @__PURE__ */ e(
+        "img",
+        {
+          src: r,
+          alt: o,
+          className: "h-full w-full object-cover",
+          loading: "lazy"
+        }
+      ) }),
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e(m, { variant: "h2", children: t }),
+        /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mt-4", children: a }),
+        s && /* @__PURE__ */ e(g, { className: "mt-6", asChild: !0, children: /* @__PURE__ */ e("a", { href: n, children: s }) })
+      ] })
+    ]
+  }
+) }), je = ({
+  heading: t,
+  text: a,
+  imageSrc: r,
+  imageAlt: o = "",
+  tag: s,
+  href: n,
+  className: d,
+  ...u
+}) => {
+  const h = n ? "a" : "div", p = n ? { href: n } : {};
+  return /* @__PURE__ */ e(
+    "article",
+    {
+      className: c(
+        "group overflow-hidden rounded-2xl border border-border bg-card shadow-sm transition-fast hover:shadow-lg",
+        n && "cursor-pointer",
+        d
+      ),
+      ...u,
+      children: /* @__PURE__ */ i(h, { ...p, className: "block", children: [
+        r && /* @__PURE__ */ e("div", { className: "aspect-video overflow-hidden", children: /* @__PURE__ */ e(
+          "img",
+          {
+            src: r,
+            alt: o,
+            className: "h-full w-full object-cover transition-fast group-hover:scale-105",
+            loading: "lazy"
+          }
+        ) }),
+        /* @__PURE__ */ i("div", { className: "p-6", children: [
+          s && /* @__PURE__ */ e(m, { variant: "overline", className: "mb-2", children: s }),
+          /* @__PURE__ */ e(m, { variant: "h4", className: "group-hover:text-primary transition-fast", children: t }),
+          /* @__PURE__ */ e(m, { variant: "body-sm", color: "muted", className: "mt-2 line-clamp-3", children: a })
+        ] })
+      ] })
+    }
+  );
+}, he = v.Root, D = x.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(v.Item, { ref: r, className: c("border-b", t), ...a }));
+D.displayName = "AccordionItem";
+const M = x.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e(v.Header, { className: "flex", children: /* @__PURE__ */ i(
+  v.Trigger,
+  {
+    ref: o,
+    className: c(
+      "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+      t
+    ),
+    ...r,
+    children: [
+      a,
+      /* @__PURE__ */ e(F, { className: "h-4 w-4 shrink-0 transition-transform duration-200" })
+    ]
+  }
+) }));
+M.displayName = v.Trigger.displayName;
+const V = x.forwardRef(({ className: t, children: a, ...r }, o) => /* @__PURE__ */ e(
+  v.Content,
+  {
+    ref: o,
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...r,
+    children: /* @__PURE__ */ e("div", { className: c("pb-4 pt-0", t), children: a })
+  }
+));
+V.displayName = v.Content.displayName;
+const De = ({
+  heading: t,
+  items: a,
+  className: r,
+  ...o
+}) => {
+  const s = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: a.map((n) => ({
+      "@type": "Question",
+      name: n.question,
+      acceptedAnswer: { "@type": "Answer", text: n.answer }
+    }))
+  };
+  return /* @__PURE__ */ e("section", { className: c("section-padding", r), ...o, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
+    t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-8 text-center", children: t }),
+    /* @__PURE__ */ e(he, { type: "single", collapsible: !0, className: "w-full", children: a.map((n, d) => /* @__PURE__ */ i(D, { value: `item-${d}`, children: [
+      /* @__PURE__ */ e(M, { className: "font-display text-left font-semibold", children: n.question }),
+      /* @__PURE__ */ e(V, { className: "font-body text-muted-foreground", children: n.answer })
+    ] }, d)) }),
+    /* @__PURE__ */ e(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(s) }
+      }
+    )
+  ] }) });
+}, P = x.forwardRef(
+  ({ className: t, type: a, ...r }, o) => /* @__PURE__ */ e(
+    "input",
+    {
+      type: a,
+      className: c(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        t
+      ),
+      ref: o,
+      ...r
+    }
+  )
+);
+P.displayName = "Input";
+const R = x.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(
+  "textarea",
+  {
+    className: c(
+      "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      t
+    ),
+    ref: r,
+    ...a
+  }
+));
+R.displayName = "Textarea";
+var ue = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+], fe = ue.reduce((t, a) => {
+  const r = Y(`Primitive.${a}`), o = x.forwardRef((s, n) => {
+    const { asChild: d, ...u } = s, h = d ? r : a;
+    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ e(h, { ...u, ref: n });
+  });
+  return o.displayName = `Primitive.${a}`, { ...t, [a]: o };
+}, {}), ge = "Label", H = x.forwardRef((t, a) => /* @__PURE__ */ e(
+  fe.label,
+  {
+    ...t,
+    ref: a,
+    onMouseDown: (r) => {
+      var s;
+      r.target.closest("button, input, select, textarea") || ((s = t.onMouseDown) == null || s.call(t, r), !r.defaultPrevented && r.detail > 1 && r.preventDefault());
+    }
+  }
+));
+H.displayName = ge;
+var T = H;
+const pe = C("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"), k = x.forwardRef(({ className: t, ...a }, r) => /* @__PURE__ */ e(T, { ref: r, className: c(pe(), t), ...a }));
+k.displayName = T.displayName;
+const Me = ({
+  heading: t = "Kontakt",
+  description: a,
+  onSubmit: r,
+  className: o,
+  ...s
+}) => {
+  const [n, d] = y({ name: "", email: "", message: "" }), [u, h] = y(!1), p = (f) => {
+    f.preventDefault(), r == null || r(n), h(!0);
+  };
+  return /* @__PURE__ */ e("section", { className: c("section-padding", o), ...s, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
+    /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2", children: t }),
+    a && /* @__PURE__ */ e(m, { variant: "body", color: "muted", className: "mb-8", children: a }),
+    u ? /* @__PURE__ */ i("div", { className: "rounded-lg border border-success/30 bg-success/5 p-8 text-center", children: [
+      /* @__PURE__ */ e(m, { variant: "h4", color: "accent", children: "Vielen Dank für Ihre Nachricht!" }),
+      /* @__PURE__ */ e(m, { variant: "body-sm", color: "muted", className: "mt-2", children: "Wir melden uns in Kürze bei Ihnen." })
+    ] }) : /* @__PURE__ */ i("form", { onSubmit: p, className: "space-y-6", children: [
+      /* @__PURE__ */ i("div", { className: "grid gap-6 sm:grid-cols-2", children: [
+        /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(k, { htmlFor: "name", children: "Name" }),
+          /* @__PURE__ */ e(
+            P,
+            {
+              id: "name",
+              required: !0,
+              value: n.name,
+              onChange: (f) => d({ ...n, name: f.target.value }),
+              placeholder: "Max Mustermann"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(k, { htmlFor: "email", children: "E-Mail" }),
+          /* @__PURE__ */ e(
+            P,
+            {
+              id: "email",
+              type: "email",
+              required: !0,
+              value: n.email,
+              onChange: (f) => d({ ...n, email: f.target.value }),
+              placeholder: "max@beispiel.de"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ e(k, { htmlFor: "message", children: "Nachricht" }),
+        /* @__PURE__ */ e(
+          R,
+          {
+            id: "message",
+            required: !0,
+            rows: 5,
+            value: n.message,
+            onChange: (f) => d({ ...n, message: f.target.value }),
+            placeholder: "Ihre Nachricht..."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(g, { type: "submit", size: "lg", children: "Nachricht senden" })
+    ] })
+  ] }) });
+}, Ve = ({
+  brand: t,
+  items: a,
+  ctaLabel: r,
+  ctaHref: o = "#",
+  className: s,
+  ...n
+}) => {
+  const [d, u] = y(!1);
+  return /* @__PURE__ */ i(
+    "header",
+    {
+      className: c(
+        "sticky top-0 z-50 border-b border-primary/20 bg-primary text-primary-foreground backdrop-blur",
+        s
+      ),
+      ...n,
+      children: [
+        /* @__PURE__ */ i("nav", { className: "container-wide flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8", "aria-label": "Main", children: [
+          /* @__PURE__ */ e("a", { href: "/", className: "font-display text-lg font-bold text-primary-foreground", children: t }),
+          /* @__PURE__ */ i("ul", { className: "hidden items-center gap-1 md:flex", children: [
+            a.map((h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+              "a",
+              {
+                href: h.href,
+                className: "rounded-full px-4 py-2 font-body text-sm text-primary-foreground/80 transition-fast hover:bg-primary-foreground/10 hover:text-primary-foreground",
+                children: h.label
+              }
+            ) }, h.href)),
+            r && /* @__PURE__ */ e("li", { className: "ml-4", children: /* @__PURE__ */ e(g, { size: "sm", className: "bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: r }) }) })
+          ] }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: "md:hidden rounded-full p-2 text-primary-foreground/80 hover:bg-primary-foreground/10",
+              onClick: () => u(!d),
+              "aria-label": "Menu",
+              children: d ? /* @__PURE__ */ e(ee, { size: 20 }) : /* @__PURE__ */ e(re, { size: 20 })
+            }
+          )
+        ] }),
+        d && /* @__PURE__ */ e("div", { className: "border-t border-primary-foreground/20 bg-primary md:hidden", children: /* @__PURE__ */ i("ul", { className: "container-wide space-y-1 px-4 py-4", children: [
+          a.map((h) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+            "a",
+            {
+              href: h.href,
+              className: "block rounded-xl px-4 py-2 font-body text-sm text-primary-foreground/80 transition-fast hover:bg-primary-foreground/10 hover:text-primary-foreground",
+              onClick: () => u(!1),
+              children: h.label
+            }
+          ) }, h.href)),
+          r && /* @__PURE__ */ e("li", { className: "pt-2", children: /* @__PURE__ */ e(g, { size: "sm", className: "w-full bg-primary-foreground text-primary hover:bg-primary-foreground/90", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: r }) }) })
+        ] }) })
+      ]
+    }
+  );
+}, Re = ({
+  brand: t,
+  columns: a,
+  copyright: r,
+  className: o,
+  ...s
+}) => /* @__PURE__ */ e("footer", { className: c("border-t border-border bg-muted section-padding", o), ...s, children: /* @__PURE__ */ i("div", { className: "container-wide", children: [
+  /* @__PURE__ */ i("div", { className: "grid gap-8 sm:grid-cols-2 lg:grid-cols-4", children: [
+    /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(m, { variant: "h5", children: t }) }),
+    a.map((n) => /* @__PURE__ */ i("div", { children: [
+      /* @__PURE__ */ e(m, { variant: "overline", className: "mb-4", children: n.heading }),
+      /* @__PURE__ */ e("ul", { className: "space-y-2", children: n.links.map((d) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+        "a",
+        {
+          href: d.href,
+          className: "font-body text-sm text-muted-foreground transition-fast hover:text-foreground",
+          children: d.label
+        }
+      ) }, d.href)) })
+    ] }, n.heading))
+  ] }),
+  r && /* @__PURE__ */ e("div", { className: "mt-12 border-t border-border pt-6", children: /* @__PURE__ */ e(m, { variant: "caption", children: r }) })
+] }) }), be = S.forwardRef(
+  ({ className: t, onSearch: a, ...r }, o) => /* @__PURE__ */ i("div", { className: c("relative", t), children: [
+    /* @__PURE__ */ e(te, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+    /* @__PURE__ */ e(
+      P,
+      {
+        ref: o,
+        className: "pl-10",
+        placeholder: "Suchen...",
+        onChange: (s) => a == null ? void 0 : a(s.target.value),
+        ...r
+      }
+    )
+  ] })
+);
+be.displayName = "SearchBar";
+const He = ({ items: t, className: a, ...r }) => {
+  const o = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: t.map((s, n) => ({
+      "@type": "ListItem",
+      position: n + 1,
+      name: s.label,
+      ...s.href ? { item: s.href } : {}
+    }))
+  };
+  return /* @__PURE__ */ i("nav", { "aria-label": "Breadcrumb", className: c("font-body text-sm", a), ...r, children: [
+    /* @__PURE__ */ e("ol", { className: "flex items-center gap-1", children: t.map((s, n) => /* @__PURE__ */ i("li", { className: "flex items-center gap-1", children: [
+      n > 0 && /* @__PURE__ */ e(ae, { className: "h-3 w-3 text-muted-foreground" }),
+      s.href && n < t.length - 1 ? /* @__PURE__ */ e("a", { href: s.href, className: "text-muted-foreground transition-fast hover:text-foreground", children: s.label }) : /* @__PURE__ */ e("span", { className: "text-foreground font-medium", children: s.label })
+    ] }, n)) }),
+    /* @__PURE__ */ e(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(o) }
+      }
+    )
+  ] });
+}, xe = [
+  {
+    id: "50gb",
+    storage: "50 GB",
+    monthlyPrice: 1.29,
+    yearlyPrice: 0.99,
+    hidden: !0,
+    features: [
+      "10.000 Fotos, 4h Videomaterial",
+      "Fotos und Dokumente sichern und teilen",
+      "Hoher deutscher Datenschutz",
+      "Automatische Synchronisation"
+    ],
+    ctaLabel: "Zum Angebot",
+    ctaHref: "#"
+  },
+  {
+    id: "100gb",
+    storage: "100 GB",
+    monthlyPrice: 2.49,
+    yearlyPrice: 1.99,
+    features: [
+      "20.000 Fotos, 8h Videomaterial",
+      "Fotos und Dokumente sichern und teilen",
+      "Hoher deutscher Datenschutz",
+      "Premium-Kunden-Vorteil: 25% günstiger"
+    ],
+    ctaLabel: "Zum Angebot",
+    ctaHref: "#"
+  },
+  {
+    id: "200gb",
+    storage: "200 GB",
+    monthlyPrice: 3.49,
+    yearlyPrice: 2.99,
+    features: [
+      "40.000 Fotos, 16h Videomaterial",
+      "Fotos und Dokumente sichern und teilen",
+      "Hoher deutscher Datenschutz",
+      "Premium-Kunden-Vorteil: 17% günstiger"
+    ],
+    ctaLabel: "Zum Angebot",
+    ctaHref: "#"
+  },
+  {
+    id: "500gb",
+    storage: "500 GB",
+    monthlyPrice: 5.49,
+    yearlyPrice: 4.99,
+    hidden: !0,
+    features: [
+      "100.000 Fotos, 40h Videomaterial",
+      "Fotos und Dokumente sichern und teilen",
+      "Hoher deutscher Datenschutz",
+      "Premium-Kunden-Vorteil: 10% günstiger"
+    ],
+    ctaLabel: "Zum Angebot",
+    ctaHref: "#"
+  },
+  {
+    id: "1tb",
+    storage: "1 TB",
+    monthlyPrice: 10.99,
+    yearlyPrice: 9.99,
+    features: [
+      "200.000 Fotos, 80h Videomaterial",
+      "Fotos und Dokumente sichern und teilen",
+      "Hoher deutscher Datenschutz",
+      "Premium-Kunden-Vorteil: 10% günstiger"
+    ],
+    badge: "Meistgewählt",
+    ctaLabel: "Zum Angebot",
+    ctaHref: "#"
+  }
+], Te = ({
+  heading: t = "Cloud-Speicher erweitern",
+  subheading: a = "Wählen Sie den passenden Tarif für Ihre Bedürfnisse",
+  plans: r = xe,
+  defaultOpenId: o = "100gb",
+  defaultBilling: s = "yearly",
+  className: n,
+  ...d
+}) => {
+  const [u, h] = y(o), [p, f] = y(s), [N, z] = y(!1), E = r.some((l) => l.hidden), _ = N ? r : r.filter((l) => !l.hidden), K = (l) => {
+    h((b) => b === l ? null : l);
+  }, O = (l) => p === "yearly" ? l.yearlyPrice : l.monthlyPrice, W = (l) => {
+    const b = l.monthlyPrice - l.yearlyPrice;
+    return b > 0 ? Math.round(b / l.monthlyPrice * 100) : 0;
+  };
+  return /* @__PURE__ */ e("section", { className: c("section-padding", n), ...d, children: /* @__PURE__ */ i("div", { className: "container-narrow", children: [
+    t && /* @__PURE__ */ e(m, { variant: "h2", className: "mb-2 text-center", children: t }),
+    a && /* @__PURE__ */ e(m, { variant: "body", tone: "muted", className: "mb-8 text-center", children: a }),
+    /* @__PURE__ */ e("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ i("div", { className: "inline-flex rounded-xl border border-border bg-muted p-1 gap-1", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => f("monthly"),
+          className: c(
+            "rounded-lg px-5 py-2.5 font-body text-sm font-medium transition-fast",
+            p === "monthly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: "Monatlich kündbar"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => f("yearly"),
+          className: c(
+            "rounded-lg px-5 py-2.5 font-body text-sm font-medium transition-fast",
+            p === "yearly" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+          ),
+          children: "12 Monate Laufzeit"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "space-y-3", children: _.map((l) => {
+      const b = u === l.id, q = O(l), j = W(l);
+      return /* @__PURE__ */ i(
+        "div",
+        {
+          className: c(
+            "rounded-2xl border transition-fast overflow-hidden",
+            b ? "border-primary bg-card shadow-md ring-1 ring-primary/20" : "border-border bg-card hover:border-primary/40 hover:shadow-sm"
+          ),
+          children: [
+            /* @__PURE__ */ i(
+              "div",
+              {
+                className: "flex items-center gap-4 px-5 py-4 cursor-pointer select-none",
+                onClick: () => K(l.id),
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: c(
+                        "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl transition-fast",
+                        b ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                      ),
+                      children: /* @__PURE__ */ e(ne, { className: "h-5 w-5" })
+                    }
+                  ),
+                  /* @__PURE__ */ i("div", { className: "flex items-center gap-3 min-w-0", children: [
+                    /* @__PURE__ */ e(m, { variant: "h4", className: "whitespace-nowrap", children: l.storage }),
+                    l.badge && /* @__PURE__ */ i("span", { className: "hidden sm:inline-flex items-center gap-1 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary", children: [
+                      /* @__PURE__ */ e(ie, { className: "h-3 w-3" }),
+                      l.badge
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ i("div", { className: "ml-auto flex items-center gap-3", children: [
+                    /* @__PURE__ */ i("div", { className: "text-right", children: [
+                      /* @__PURE__ */ i("span", { className: "font-display text-xl font-bold text-foreground", children: [
+                        q.toFixed(2).replace(".", ","),
+                        " €"
+                      ] }),
+                      /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: "/Monat" })
+                    ] }),
+                    !b && l.ctaHref && /* @__PURE__ */ e(
+                      "a",
+                      {
+                        href: l.ctaHref,
+                        onClick: (B) => B.stopPropagation(),
+                        className: "hidden sm:inline-flex",
+                        children: /* @__PURE__ */ e(g, { size: "sm", variant: "outline", children: l.ctaLabel || "Auswählen" })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      F,
+                      {
+                        className: c(
+                          "h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200",
+                          b && "rotate-180"
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: c(
+                  "grid transition-all duration-200 ease-in-out",
+                  b ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                ),
+                children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ i("div", { className: "px-5 pb-5 pt-1", children: [
+                  p === "monthly" && j > 0 && /* @__PURE__ */ i(
+                    m,
+                    {
+                      variant: "body-sm",
+                      className: "mb-4 text-primary font-medium",
+                      children: [
+                        "Sparen Sie ",
+                        j,
+                        "% im Jahresabo"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ e("ul", { className: "grid grid-cols-1 sm:grid-cols-2 gap-2 mb-5", children: l.features.map((B, G) => /* @__PURE__ */ i(
+                    "li",
+                    {
+                      className: "flex items-start gap-2 font-body text-sm text-muted-foreground",
+                      children: [
+                        /* @__PURE__ */ e(oe, { className: "h-4 w-4 mt-0.5 shrink-0 text-primary" }),
+                        B
+                      ]
+                    },
+                    G
+                  )) }),
+                  l.ctaHref && /* @__PURE__ */ e("a", { href: l.ctaHref, children: /* @__PURE__ */ e(g, { className: "w-full sm:w-auto", size: "lg", children: l.ctaLabel || "Jetzt buchen" }) })
+                ] }) })
+              }
+            )
+          ]
+        },
+        l.id
+      );
+    }) }),
+    E && /* @__PURE__ */ e("div", { className: "flex justify-center mt-4", children: /* @__PURE__ */ i(
+      g,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: () => z((l) => !l),
+        className: "gap-1.5 text-muted-foreground",
+        children: [
+          N ? "Weniger Tarife" : "Weitere Tarife",
+          /* @__PURE__ */ e(
+            F,
+            {
+              className: c(
+                "h-4 w-4 transition-transform duration-200",
+                N && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(m, { variant: "caption", className: "mt-6 block text-center", children: "Alle Preise inkl. MwSt. Kündigung bis 4 Wochen zum Ende der Vertragslaufzeit möglich." })
+  ] }) });
+}, w = [
+  { id: "default", name: "Core Framework" },
+  { id: "webde", name: "WEB.DE" },
+  { id: "gmx", name: "GMX" }
+], I = L({
+  brand: w[0],
+  setBrand: () => {
+  }
+}), ye = () => $(I), Ie = ({
+  children: t,
+  defaultBrand: a = "default"
+}) => {
+  const [r, o] = y(
+    w.find((n) => n.id === a) || w[0]
+  ), s = Q((n) => {
+    const d = w.find((u) => u.id === n);
+    d && o(d);
+  }, []);
+  return X(() => {
+    const n = document.documentElement;
+    return r.id === "default" ? n.removeAttribute("data-brand") : n.setAttribute("data-brand", r.id), () => n.removeAttribute("data-brand");
+  }, [r]), /* @__PURE__ */ e(I.Provider, { value: { brand: r, setBrand: s }, children: t });
+}, Ee = ({ className: t }) => {
+  const { brand: a, setBrand: r } = ye();
+  return /* @__PURE__ */ e("div", { className: c("flex items-center gap-1 rounded-xl border border-border bg-muted p-1", t), children: w.map((o) => /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: () => r(o.id),
+      className: c(
+        "rounded-lg px-3 py-1.5 font-body text-xs font-medium transition-fast",
+        a.id === o.id ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:text-foreground hover:bg-background"
+      ),
+      children: o.name
+    },
+    o.id
+  )) });
+};
+export {
+  ce as Badge,
+  Ie as BrandProvider,
+  Ee as BrandSwitcher,
+  He as Breadcrumb,
+  Me as ContactForm,
+  je as ContentCard,
+  De as FaqAccordion,
+  Re as Footer,
+  Fe as Hero,
+  Se as ImageTextTeaser,
+  Ve as Navbar,
+  be as SearchBar,
+  Te as TariffSelect,
+  m as Typography,
+  w as brands,
+  ye as useBrand
+};
+//# sourceMappingURL=index.mjs.map