zwischenstand

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

@@ -186,7 +186,6 @@
             width: 100%;
             min-height: 3.6rem;
             padding: 0.6rem;
-            border-radius: 1.2rem;
             padding-bottom: 2.4rem;
             max-height: 12rem;
             line-height: 1.4rem;

frontend/src/lib/components/header/Header.svelte

@@ -169,7 +169,7 @@
 
                     .nav-link-button {
                         border: 1px solid var(--primary-200);
-                        border-radius: 999px;
+                        border-radius: 4px;
                         padding: 0.45rem 1.4rem;
                         font-weight: 600;
                         color: var(--neutral-white);

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

@@ -34,7 +34,20 @@
             color: "#EB5757",
         },
     ]
+    const upperDescriptionChat = `
+        Tippen Sie in das Chat-Fenster und testen Sie unseren KI-Chatbot – live in Ihrem Browser.
+    `
 
+    const lowerDescriptionChat = `
+        Der Bot greift auf dieselbe Wissensbasis wie sein Voice-Pendant zu
+        und beantwortet Anfragen in Sekundenschnelle – rund um die Uhr und
+        auf Wunsch mehrsprachig.<br/><br/>
+
+        Dank des zugrunde liegenden Workflow-Graphs können wir Ihre individuellen
+        Prozesse, Abfragen und Eskalationsregeln detailgenau abbilden. DSGVO-konformes
+        Hosting, belastbare KPIs und optionale A/B-Tests sorgen dafür, dass Ihr
+        digitaler Kundenservice messbar Mehrwert liefert.
+    `
 </script>
 
 <CrinkledSection
@@ -45,11 +58,12 @@
     {#snippet contentSnippet()}
         <ProductCategoryFrame
             properties={voiceProperties}
-            title="Chatbot Demo"
+            subtitle="Demoversion"
+            title="Chatbot"
             reverse={true}
             sectionId="chatbot-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={upperDescriptionChat}
-            lowerDescription="Durch den Einsatz modernster KI-Technologien gewährleisten wir eine intelligente und effiziente Kommunikation, die den höchsten Datenschutzstandards entspricht."
+            lowerDescription={lowerDescriptionChat}
         >
             {#snippet primaryContent()}
                 <CardWrapper>

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

@@ -3,6 +3,7 @@
     import CardWrapper from "../widgets/CardWrapper.svelte"
     import Icon from "../widgets/Icon.svelte"
     import { mdiCheckCircleOutline } from "@mdi/js"
+    import SectionTitle from "../widgets/SectionTitle.svelte"
 
     const offers: Array<{
         title: string
@@ -51,49 +52,42 @@
             class="offer-row"
             id="angebote"
         >
-            <header class="intro">
+            <SectionTitle
-                <small>Pakete</small>
+                subtitle="Pakete"
-                <h2>Unsere Angebotsmodelle</h2>
+                title="Unsere Angebotsmodelle"
-                <p>
+                description="Wählen Sie zwischen einem voll gemanagten Einstieg oder maximaler Eigenkontrolle: Beide Pakete bieten den kompletten Funktionsumfang unserer KI-Plattform."
-                    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>
+                    <article
-                        {#snippet contentSnippet()}
+                        class="offer-card"
-                            <article
+                        class:offer-card--accented={offer.accent}
-                                class="offer-card"
+                    >
-                                class:offer-card--accented={offer.accent}
+                        {#if offer.badge}
-                            >
+                            <span class="offer-card__badge">{offer.badge}</span>
-                                {#if offer.badge}
+                        {/if}
-                                    <span class="offer-card__badge">{offer.badge}</span>
+                        <header>
-                                {/if}
+                            <h3>{offer.title}</h3>
-                                <header>
+                            <p class="tagline">{offer.tagline}</p>
-                                    <h3>{offer.title}</h3>
+                        </header>
-                                    <p class="tagline">{offer.tagline}</p>
+                        <ul>
-                                </header>
+                            {#each offer.features as feature}
-                                <ul>
+                                <li>
-                                    {#each offer.features as feature}
+                                    <span class="icon">
-                                        <li>
+                                        <Icon
-                                            <span class="icon">
+                                            path={mdiCheckCircleOutline}
-                                                <Icon
+                                            size="1.1rem"
-                                                    path={mdiCheckCircleOutline}
+                                        />
-                                                    size="1.1rem"
+                                    </span>
-                                                />
+                                    <span>{@html feature}</span>
-                                            </span>
+                                </li>
-                                            <span>{@html feature}</span>
+                            {/each}
-                                        </li>
+                        </ul>
-                                    {/each}
+                        {#if offer.note}
-                                </ul>
+                            <p class="footnote">{offer.note}</p>
-                                {#if offer.note}
+                        {/if}
-                                    <p class="footnote">{offer.note}</p>
+                    </article>
-                                {/if}
-                            </article>
-                        {/snippet}
-                    </CardWrapper>
                 {/each}
             </div>
         </section>
@@ -111,33 +105,6 @@
         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 {
@@ -167,7 +134,7 @@
         display: flex;
         flex-direction: column;
         gap: 1.6rem;
-        border-radius: 1.4rem;
+        border-radius: 4px;
         color: var(--neutral-white);
         border: 1px solid rgba(255, 255, 255, 0.08);
         background:

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

@@ -66,7 +66,8 @@
     {#snippet contentSnippet()}
         <ProductCategoryFrame
             properties={voiceProperties}
-            title="Voicebot Demo"
+            title="Voicebot"
+            subtitle="Demoversion"
             sectionId="voicebot-demo"
             {upperDescription}
             {lowerDescription}

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

@@ -1,9 +1,11 @@
 <script lang="ts">
     import Icon from "./Icon.svelte"
+    import SectionTitle from "./SectionTitle.svelte"
 
     let {
         properties,
         title,
+        subtitle = "",
         upperDescription,
         lowerDescription,
         reverse = false,
@@ -13,6 +15,7 @@
     }: {
         properties: Array<{ title: string; icon: string; color: string }>
         title: string
+        subtitle?: string
         upperDescription: string
         large?: boolean
         reverse?: boolean
@@ -38,7 +41,11 @@
         {/if}
 
         <div class="content">
-            <h2 class="h1">{title}</h2>
+            <SectionTitle
+                {title}
+                {subtitle}
+                brightBackground={!reverse}
+            />
             <p>{@html upperDescription}</p>
             <ul>
                 {#each properties as property}

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

@@ -0,0 +1,148 @@
+<script lang="ts">
+    let {
+        contentSnippet,
+        accent = false,
+    }: {
+        contentSnippet: () => any
+        accent?: boolean
+    } = $props()
+</script>
+
+<div
+    class="red-card-wrapper"
+    class:red-card-wrapper--accent={accent}
+>
+    <div class="red-card-shell">
+        <div class="red-card-body">
+            {@render contentSnippet()}
+        </div>
+    </div>
+</div>
+
+<style lang="less">
+    @import "../../assets/css/variables.less";
+
+    .red-card-wrapper {
+        display: flex;
+        width: 100%;
+        height: 100%;
+    }
+
+    .red-card-shell {
+        position: relative;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: stretch;
+        width: 100%;
+        border-radius: 1.4rem;
+        background:
+            radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.38) 0%, rgba(13, 12, 12, 0.78) 55%),
+            rgba(13, 12, 12, 0.9);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-top-color: rgba(173, 81, 76, 0.38);
+        padding: 3.4rem 2.2rem 2.4rem;
+        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);
+        overflow: visible;
+        transition:
+            transform 0.3s ease,
+            box-shadow 0.3s ease,
+            border-color 0.3s ease;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: -1.9rem;
+            left: -1px;
+            right: -1px;
+            height: 2.9rem;
+            border-radius: 1.4rem 1.4rem 0 0;
+            clip-path: polygon(0 0, calc(100% - 2.6rem) 0, 100% 100%, 0% 100%);
+            background:
+                radial-gradient(140% 160% at 15% -30%, rgba(173, 81, 76, 0.5) 0%, rgba(13, 12, 12, 0.92) 68%),
+                rgba(13, 12, 12, 0.96);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-bottom: none;
+            box-shadow:
+                0 18px 36px rgba(0, 0, 0, 0.4),
+                inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+            pointer-events: none;
+            z-index: 0;
+            transition: border-color 0.3s ease;
+        }
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: -1.9rem;
+            left: -1px;
+            right: -1px;
+            bottom: -1px;
+            border-radius: inherit;
+            clip-path: polygon(0 0, calc(100% - 2.6rem) 0, 100% 2.6rem, 100% 100%, 0% 100%);
+            background: linear-gradient(
+                140deg,
+                rgba(255, 255, 255, 0.12) 0%,
+                rgba(173, 81, 76, 0.2) 40%,
+                transparent 90%
+            );
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            pointer-events: none;
+        }
+    }
+
+    .red-card-body {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 1.6rem;
+        width: 100%;
+        color: var(--neutral-white);
+    }
+
+    .red-card-wrapper:hover .red-card-shell {
+        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;
+        }
+
+        &::before {
+            border-bottom-color: rgba(219, 96, 88, 0.65);
+        }
+    }
+
+    .red-card-wrapper--accent .red-card-shell {
+        border-color: rgba(173, 81, 76, 0.5);
+        border-top-color: rgba(219, 96, 88, 0.65);
+        background:
+            radial-gradient(120% 130% at 20% 10%, rgba(173, 81, 76, 0.5) 0%, rgba(13, 12, 12, 0.78) 55%),
+            rgba(13, 12, 12, 0.9);
+    }
+
+    .red-card-wrapper--accent .red-card-shell::before {
+        background:
+            radial-gradient(140% 160% at 15% -30%, rgba(173, 81, 76, 0.68) 0%, rgba(13, 12, 12, 0.92) 68%),
+            rgba(13, 12, 12, 0.96);
+        border-color: rgba(173, 81, 76, 0.5);
+        border-bottom-color: rgba(219, 96, 88, 0.65);
+    }
+
+    .red-card-wrapper--accent:hover .red-card-shell {
+        border-color: rgba(255, 82, 82, 0.65);
+    }
+
+    @media @mobile {
+        .red-card-shell {
+            padding: 3rem 1.8rem 2.1rem;
+        }
+    }
+</style>

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

@@ -0,0 +1,61 @@
+<script lang="ts">
+    let {
+        title,
+        subtitle = "",
+        description = "",
+        brightBackground = false,
+    }: {
+        title: string
+        subtitle?: string
+        description?: string
+        brightBackground?: boolean
+    } = $props()
+</script>
+
+<header
+    class="intro"
+    class:brightBackground
+>
+    <small>{subtitle}</small>
+    <h2 class="h1">{title}</h2>
+    {#if description}
+        <p>{description}</p>
+    {/if}
+</header>
+
+<style lang="less">
+    .intro {
+        display: flex;
+        flex-direction: column;
+        gap: 0.8rem;
+
+        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(--primary-100) !important;
+        }
+
+        p {
+            margin: 0;
+            color: var(--text-200);
+            line-height: 1.6;
+        }
+        &.brightBackground {
+            small {
+                color: var(--text-invers-100);
+            }
+
+            p {
+                color: var(--text-invers-100);
+            }
+        }
+    }
+</style>