zwischenstand

frontend/src/config.ts

@@ -28,5 +28,6 @@ export const headerLinks: HeaderLink[] = [
     { label: "Überblick", sectionId: "leistungen" },
     { label: "Voicebot", sectionId: "voicebot-demo" },
     { label: "Chatbot", sectionId: "chatbot-demo" },
+    { label: "Angebote", sectionId: "angebote" },
     { label: "Kontakt", sectionId: "kontakt", type: "button" },
 ]

frontend/src/lib/components/chatbotDemo/InputRow.svelte

@@ -96,6 +96,8 @@
 </div>
 
 <style lang="less">
+    @import "../../assets/css/variables.less";
+
     .input-row {
         width: 100%;
         display: flex;
@@ -107,32 +109,56 @@
         .quick-actions {
             width: 100%;
             display: grid;
-            gap: 0.65rem;
+            gap: 0.9rem;
-            flex-wrap: wrap;
+            padding: 0 0.6rem;
-            justify-content: flex-start;
+            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-            padding: 0px 0.6rem;
-            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
 
             .quick-chip {
                 display: inline-flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: flex-start;
-                padding: 0.65rem 0.95rem;
+                padding: 0.9rem 1.15rem;
                 border-radius: 4px;
-                background: var(--bg-200);
+                position: relative;
-                color: white;
+                overflow: hidden;
-                border: 1px solid var(--bg-100);
+                background:
+                    radial-gradient(140% 160% at 15% -10%, rgba(173, 81, 76, 0.38) 0%, rgba(13, 12, 12, 0.88) 55%),
+                    rgba(13, 12, 12, 0.82);
+                color: var(--neutral-white);
+                border: 1px solid rgba(255, 255, 255, 0.12);
+                box-shadow:
+                    0 18px 36px rgba(0, 0, 0, 0.4),
+                    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+                backdrop-filter: blur(12px);
                 cursor: pointer;
-                gap: 0.25rem;
+                gap: 0.35rem;
                 transition:
-                    background 0.3s ease,
+                    transform 0.3s ease,
-                    transform 0.3s ease;
+                    box-shadow 0.3s ease,
+                    border-color 0.3s ease;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    inset: 0;
+                    border-radius: inherit;
+                    background: linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 60%);
+                    opacity: 0;
+                    transition: opacity 0.3s ease;
+                    pointer-events: none;
+                }
 
                 &:hover:not(:disabled) {
-                    background: var(--bg-100);
+                    transform: translateY(-4px);
-                    border: 1px solid var(--bg-200);
+                    box-shadow:
-                    transform: translateY(-1px);
+                        0 24px 48px rgba(0, 0, 0, 0.5),
+                        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+                    border-color: rgba(173, 81, 76, 0.55);
+
+                    &::after {
+                        opacity: 1;
+                    }
                 }
 
                 &:disabled {
@@ -141,15 +167,16 @@
                 }
 
                 .title {
-                    font-size: 0.8rem;
+                    font-size: 0.78rem;
-                    letter-spacing: 0.01em;
+                    letter-spacing: 0.08em;
-                    opacity: 0.8;
+                    text-transform: uppercase;
+                    color: rgba(255, 255, 255, 0.7);
                 }
 
                 .highlight {
-                    font-size: 0.95rem;
+                    font-size: 1rem;
                     font-weight: 600;
-                    color: var(--neutral-white);
+                    color: var(--text-200);
                     text-transform: capitalize;
                 }
             }

frontend/src/lib/components/staticPageRows/ChatbotPreview.svelte

@@ -34,6 +34,7 @@
             color: "#EB5757",
         },
     ]
+
 </script>
 
 <CrinkledSection
@@ -60,3 +61,17 @@
         </ProductCategoryFrame>
     {/snippet}
 </CrinkledSection>
+
+<style lang="less">
+    @import "../../assets/css/variables.less";
+
+    .card-wrapper {
+        min-width: 100%;
+    }
+
+    @media @mobile {
+        .card-wrapper {
+            min-width: 100%;
+        }
+    }
+</style>

frontend/src/lib/components/staticPageRows/ContactFormRow.svelte

@@ -91,10 +91,11 @@
             <div class="contact-wrapper">
                 <div class="copy">
                     <small>Kontakt</small>
-                    <h2>Kontaktieren Sie uns</h2>
+                    <h2>Jetzt unverbindlich anfragen</h2>
                     <p>
-                        Ob Fragen zu unseren Lösungen oder konkrete Projektideen – schreiben Sie uns und wir melden uns
+                        Sie haben Fragen oder wollen Ihr Projekt direkt besprechen? <br />
-                        schnellstmöglich bei Ihnen.
+                        Schreiben Sie uns – wir antworten innerhalb von 24&nbsp;Stunden und zeigen Ihnen den schnellsten
+                        Weg zum produktiven Chat- oder Voicebot.
                     </p>
                 </div>
                 <form
@@ -205,6 +206,7 @@
             .row {
                 display: flex;
                 flex-direction: column;
+                padding: 0px;
                 gap: 0.4rem;
             }
 
@@ -222,7 +224,7 @@
             }
 
             button {
-                align-self: flex-start;
+                align-self: flex-end;
             }
         }
     }

frontend/src/lib/components/staticPageRows/CoreSellingPoints.svelte

@@ -57,8 +57,8 @@
             color: "#741e20",
         },
         {
-            title: "Sorglos",
+            title: "Sorgloser",
-            alias: "Sorglos",
+            alias: "Sorgloser",
             shortDescription:
                 "Alles aus einer Hand: Kick-off-Workshop, Datenaufbereitung, Implementierung und Kanalintegration. Hosting im deutschen Rechenzentrum, 24/7-Monitoring, automatisierte Tests und kontinuierliche Optimierung sind für uns Standard.",
             color: "#ffffff",

frontend/src/lib/components/staticPageRows/OfferPackages.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">
+    import CrinkledSection from "../CrinkledSection.svelte"
+    import CardWrapper from "../widgets/CardWrapper.svelte"
+    import Icon from "../widgets/Icon.svelte"
+    import { mdiCheckCircleOutline } from "@mdi/js"
+
+    const offers: Array<{
+        title: string
+        tagline: string
+        badge?: string
+        accent?: boolean
+        features: string[]
+        note?: string
+    }> = [
+        {
+            title: "Kontextwerk Starter",
+            tagline: "„Schnell live, komplett gemanagt“",
+            badge: "Beliebtestes Paket",
+            accent: true,
+            features: [
+                "Einmalige Bot-Entwicklung inkl. Workshop &amp; Integration: <strong>ab 2 500 €</strong>",
+                "Hosting &amp; Monitoring im deutschen Rechenzentrum: <strong>99 €/Monat</strong>",
+                "Transparente Nutzungskosten: ca. <strong>2 €</strong> pro 100 Chat-Sessions bzw. <strong>5 €</strong> pro 100 Voice-Calls*",
+                "Optionales Optimierungspaket (Prompt- &amp; KPI-Tuning): <strong>ab 250 €/Monat</strong>",
+                "Vollständig DSGVO-konform, kündbar mit 30 Tagen Frist",
+            ],
+            note: "*ca. 10 Minuten Dialogdauer pro Session; tatsächliche API-Preise werden 1:1 durchgereicht.",
+        },
+        {
+            title: "Kontextwerk Enterprise",
+            tagline: "„Volle Kontrolle in Ihrer Umgebung“",
+            badge: "Für komplexe Landschaften",
+            features: [
+                "On-Premise- oder Private-Cloud-Deployment (Kubernetes/Docker)",
+                "Schulung &amp; Enablement Ihres Teams: <strong>1–3 Tage</strong>, feste Tagessätze",
+                "Plattform-Lizenz nach Server-Knoten oder CPU/VRAM-Paketen",
+                "Premium-Support &amp; individuelle SLA bis <strong>24/7</strong> verfügbar",
+                "Gleicher Funktionsumfang wie Starter, jedoch mit eigener Datenhoheit und Möglichkeit, firmeneigene LLMs anzubinden.",
+            ],
+        },
+    ]
+</script>
+
+<CrinkledSection
+    brightBackground={false}
+    border={true}
+    activated={true}
+>
+    {#snippet contentSnippet()}
+        <section
+            class="offer-row"
+            id="angebote"
+        >
+            <header class="intro">
+                <small>Pakete</small>
+                <h2>Unsere Angebotsmodelle</h2>
+                <p>
+                    Wählen Sie zwischen einem voll gemanagten Einstieg oder maximaler Eigenkontrolle: Beide Pakete
+                    bieten den kompletten Funktionsumfang unserer KI-Plattform.
+                </p>
+            </header>
+
+            <div class="offer-cards">
+                {#each offers as offer}
+                    <CardWrapper>
+                        {#snippet contentSnippet()}
+                            <article
+                                class="offer-card"
+                                class:offer-card--accented={offer.accent}
+                            >
+                                {#if offer.badge}
+                                    <span class="offer-card__badge">{offer.badge}</span>
+                                {/if}
+                                <header>
+                                    <h3>{offer.title}</h3>
+                                    <p class="tagline">{offer.tagline}</p>
+                                </header>
+                                <ul>
+                                    {#each offer.features as feature}
+                                        <li>
+                                            <span class="icon">
+                                                <Icon
+                                                    path={mdiCheckCircleOutline}
+                                                    size="1.1rem"
+                                                />
+                                            </span>
+                                            <span>{@html feature}</span>
+                                        </li>
+                                    {/each}
+                                </ul>
+                                {#if offer.note}
+                                    <p class="footnote">{offer.note}</p>
+                                {/if}
+                            </article>
+                        {/snippet}
+                    </CardWrapper>
+                {/each}
+            </div>
+        </section>
+    {/snippet}
+</CrinkledSection>
+
+<style lang="less">
+    @import "../../assets/css/variables.less";
+
+    .offer-row {
+        display: flex;
+        flex-direction: column;
+        gap: 3rem;
+        max-width: var(--small-max-width);
+        margin: 0 auto;
+        width: 100%;
+        color: var(--neutral-white);
+
+        .intro {
+            display: flex;
+            flex-direction: column;
+            gap: 0.8rem;
+            max-width: 720px;
+
+            small {
+                font-size: 0.8rem;
+                letter-spacing: 0.12em;
+                text-transform: uppercase;
+                color: var(--text-200);
+                font-weight: 600;
+            }
+
+            h2 {
+                margin: 0;
+                font-size: clamp(2rem, 3vw, 2.75rem);
+                color: var(--neutral-white);
+            }
+
+            p {
+                margin: 0;
+                color: var(--text-200);
+                line-height: 1.6;
+            }
+        }
+    }
+
+    .offer-cards {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+        gap: 2.4rem;
+        width: 100%;
+
+        .card-wrapper {
+            .header {
+                display: none;
+            }
+
+            .body {
+                border: none;
+                border-radius: 1.6rem;
+                padding: 0;
+                background: transparent;
+            }
+        }
+    }
+
+    .offer-card {
+        position: relative;
+        overflow: hidden;
+        padding: 2.4rem 2.2rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1.6rem;
+        border-radius: 1.4rem;
+        color: var(--neutral-white);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        background:
+            radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.35) 0%, rgba(13, 12, 12, 0.75) 55%),
+            rgba(13, 12, 12, 0.86);
+        box-shadow:
+            0 18px 40px rgba(0, 0, 0, 0.45),
+            inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+        backdrop-filter: blur(12px);
+        transition:
+            transform 0.3s ease,
+            box-shadow 0.3s ease,
+            border-color 0.3s ease;
+
+        &::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(
+                140deg,
+                rgba(255, 255, 255, 0.08) 0%,
+                rgba(173, 81, 76, 0.18) 45%,
+                transparent 90%
+            );
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+
+        &:hover {
+            transform: translateY(-6px);
+            box-shadow:
+                0 24px 60px rgba(0, 0, 0, 0.55),
+                inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+
+            &::after {
+                opacity: 1;
+            }
+        }
+
+        header {
+            display: flex;
+            flex-direction: column;
+            gap: 0.35rem;
+
+            h3 {
+                margin: 0;
+                font-size: 1.5rem;
+                letter-spacing: -0.02em;
+            }
+
+            .tagline {
+                margin: 0;
+                font-weight: 500;
+                color: var(--text-200);
+            }
+        }
+
+        ul {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            display: flex;
+            flex-direction: column;
+            gap: 0.9rem;
+
+            li {
+                display: grid;
+                grid-template-columns: auto 1fr;
+                align-items: flex-start;
+                gap: 0.9rem;
+                line-height: 1.55;
+
+                .icon {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 1.6rem;
+                    height: 1.6rem;
+                    border-radius: 50%;
+                    background: rgba(173, 81, 76, 0.2);
+                    box-shadow: inset 0 0 0 1px rgba(173, 81, 76, 0.55);
+                    svg {
+                        filter: drop-shadow(0 0 6px rgba(173, 81, 76, 0.45));
+                    }
+                }
+
+                strong {
+                    color: var(--text-200);
+                    font-weight: 600;
+                }
+            }
+        }
+
+        .footnote {
+            margin: 0;
+            font-size: 0.85rem;
+            color: var(--text-200);
+            opacity: 0.85;
+        }
+    }
+
+    .offer-card__badge {
+        align-self: flex-start;
+        padding: 0.35rem 0.9rem;
+        border-radius: 999px;
+        background: linear-gradient(135deg, rgba(173, 81, 76, 0.95), rgba(255, 82, 82, 0.7));
+        color: var(--neutral-white);
+        font-size: 0.75rem;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        box-shadow: 0 10px 24px rgba(173, 81, 76, 0.35);
+    }
+
+    .offer-card--accented {
+        border-color: rgba(173, 81, 76, 0.5);
+
+        &:hover {
+            border-color: rgba(255, 82, 82, 0.65);
+        }
+
+        .icon {
+            background: rgba(255, 82, 82, 0.16);
+            box-shadow: inset 0 0 0 1px rgba(255, 82, 82, 0.4);
+        }
+    }
+
+    @media @mobile {
+        .offer-row {
+            gap: 2.4rem;
+        }
+
+        .offer-card {
+            padding: 2.1rem 1.7rem;
+        }
+    }
+</style>

frontend/src/lib/components/staticPageRows/VoicebotPreview.svelte

@@ -28,7 +28,21 @@
             color: "#EB5757",
         },
     ]
+    const upperDescription = `
+        Klicken Sie auf den grünen Hörer  
+        und sprechen Sie jetzt live mit unserer  
+        KontextWerk-Expertin – direkt hier im Browser.
+    `
+    const lowerDescription = `
+        Die Demo liefert exakt die Gesprächsqualität, die wir später als Telefon-Bot auf
+        Ihrer Hotline bereitstellen: 24/7 verfügbar, auf Ihr Unternehmenswissen trainiert
+        und bei Bedarf mit nahtloser Übergabe an Ihr Serviceteam.<br/><br/>
 
+        Im Hintergrund steuert ein individuell von uns programmierter Workflow-Graph jeden Schritt des Dialogs –
+        von der Bedarfsklärung bis zur Datenerfassung – genau so, wie es ein Mitarbeiter
+        am Telefon tun würde. DSGVO-konformes Hosting in Deutschland, minimale Latenz und
+        offene Schnittstellen machen Ihren Kundenservice zuverlässig, sicher und skalierbar.
+    `
     const controller = createVoicebotPreviewController()
     const { status, statusHint, toggle, setup, teardown } = controller
 
@@ -54,8 +68,8 @@
             properties={voiceProperties}
             title="Voicebot Demo"
             sectionId="voicebot-demo"
-            upperDescription="Unsere Voicebots sind rund um die Uhr für Ihre Kunden da und bieten maßgeschneiderte Lösungen, die perfekt auf Ihre Bedürfnisse abgestimmt sind."
+            {upperDescription}
-            lowerDescription="Durch den Einsatz modernster KI-Technologien gewährleisten wir eine intelligente und effiziente Kommunikation, die den höchsten Datenschutzstandards entspricht."
+            {lowerDescription}
         >
             {#snippet primaryContent()}
                 <div

frontend/src/lib/components/widgets/ProductCategoryFrame.svelte

@@ -7,12 +7,14 @@
         upperDescription,
         lowerDescription,
         reverse = false,
+        large = false,
         sectionId,
         primaryContent,
     }: {
         properties: Array<{ title: string; icon: string; color: string }>
         title: string
         upperDescription: string
+        large?: boolean
         reverse?: boolean
         lowerDescription: string
         sectionId?: string
@@ -25,7 +27,10 @@
     id={sectionId}
     class:reverse
 >
-    <div class="wrapper">
+    <div
+        class="wrapper"
+        class:large
+    >
         {#if !reverse}
             <div class="primary">
                 {@render primaryContent()}
@@ -69,21 +74,24 @@
         justify-content: center;
         align-items: center;
         gap: 2.4rem;
-        max-width: 100%;
+
         height: 100%;
         width: 100%;
         padding-bottom: 4.8rem;
 
         .wrapper {
-            width: var(--small-max-width);
+            width: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
             gap: 2.4rem;
-
+            max-width: var(--small-max-width);
+            &.large {
+                max-width: var(--normal-max-width);
+            }
             .primary {
-                width: 400px;
+                width: min(100%, 400px);
-                min-width: 400px;
+                min-width: min(100%, 400px);
                 max-height: 100%;
                 height: 100%;
                 img {
@@ -170,6 +178,10 @@
             p {
                 color: var(--text-100) !important;
             }
+            .primary {
+                width: min(100%, 700px);
+                min-width: min(100%, 700px);
+            }
         }
     }
 </style>

frontend/src/routes/StaticHomepage.svelte

@@ -3,10 +3,12 @@
     import ContactFormRow from "../lib/components/staticPageRows/ContactFormRow.svelte"
     import CoreSellingPoints from "../lib/components/staticPageRows/CoreSellingPoints.svelte"
     import VoicebotPreview from "../lib/components/staticPageRows/VoicebotPreview.svelte"
+    import OfferPackages from "../lib/components/staticPageRows/OfferPackages.svelte"
 </script>
 
 <CoreSellingPoints />
 
 <VoicebotPreview />
 <ChatbotPreview />
+<OfferPackages />
 <ContactFormRow />