@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/pages/AccordionGroupPage.vue

@@ -1,873 +1,873 @@
-<template>
-  <div class="page">
-    <div class="element-container">
-      <div class="controls">
-        <h2>Testing Domain: {{ currentDomain }}</h2>
-        <div class="button-group">
-          <button
-            @click="switchToDental"
-            class="control-btn"
-          >
-            Switch to Wunschlachen (Dental)
-          </button>
-          <button
-            @click="switchToCocoon"
-            class="control-btn"
-          >
-            Switch to White Cocoon
-          </button>
-          <button
-            @click="resetDomain"
-            class="control-btn reset"
-          >
-            Reset to Auto-Detect
-          </button>
-        </div>
-      </div>
-
-      <!-- Default Preset Examples -->
-      <div class="treatment-section">
-        <h3 class="section-title">Default Preset (Flat with Dividers)</h3>
-        <div class="matrix-container">
-          <AccordionGroup
-            v-model="accordionOutlined"
-            headline="Häufig gestellte Fragen"
-            :headline-color="dentalColors.accordion_title_color"
-            :divider-color="dentalColors.accordion_divider_color"
-            :icon-color="dentalColors.accordion_icon_color"
-          >
-          <AccordionItem
-            titleColor="#FF0000"
-            title="Terminbuchung"
-            text="Buchen Sie Ihren Wunschtermin ganz einfach online. W�hlen Sie aus verf�gbaren Zeiten und erhalten Sie eine sofortige Best�tigung per E-Mail. Unsere flexiblen Terminoptionen erm�glichen es Ihnen, Ihre Behandlung an Ihren Zeitplan anzupassen."
-            value="1"
-            :content-color="dentalColors.accordion_content_color"
-            :divider-props="{ color: '#FF0000', thickness: 2, opacity: 1}"
-            :icon-color="dentalColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="Behandlungsablauf"
-            text="Jede Behandlung beginnt mit einer gr�ndlichen Untersuchung und Beratung. Wir erkl�ren Ihnen jeden Schritt und beantworten all Ihre Fragen. Ihre Gesundheit und Ihr Wohlbefinden stehen bei uns an erster Stelle."
-            value="2"
-            :title-color="dentalColors.accordion_title_color"
-            :content-color="dentalColors.accordion_content_color"
-            :divider-color="dentalColors.accordion_divider_color"
-            :icon-color="dentalColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="Versicherung & Kosten"
-            text="Wir akzeptieren alle g�ngigen Versicherungen und bieten transparente Kostenvoranschl�ge. Auf Wunsch erstellen wir einen detaillierten Heil- und Kostenplan f�r Sie. Ratenzahlung ist nach Vereinbarung m�glich."
-            value="3"
-            :title-color="dentalColors.accordion_title_color"
-            :content-color="dentalColors.accordion_content_color"
-            :divider-color="dentalColors.accordion_divider_color"
-            :icon-color="dentalColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="Notfalltermine"
-            text="F�r akute Beschwerden halten wir t�glich Notfalltermine bereit. Rufen Sie uns an, und wir finden schnellstm�glich einen Termin f�r Sie."
-            value="4"
-            :title-color="dentalColors.accordion_title_color"
-            :content-color="dentalColors.accordion_content_color"
-            :divider-color="dentalColors.accordion_divider_color"
-            :icon-color="dentalColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="�ffnungszeiten"
-            text="Montag bis Freitag: 8:00 - 18:00 Uhr. Samstag: Nach Vereinbarung. An Feiertagen geschlossen."
-            value="5"
-            variant="end"
-            :title-color="dentalColors.accordion_title_color"
-            :content-color="dentalColors.accordion_content_color"
-            :divider-color="dentalColors.accordion_divider_color"
-            :icon-color="dentalColors.accordion_icon_color"
-          />
-        </AccordionGroup>
-
-        <AccordionGroup
-          v-model="accordionOutlined2"
-          headline="Frequently Asked Questions (FAQs)"
-          :headline-color="cocoonColors.accordion_title_color"
-          :divider-color="cocoonColors.accordion_divider_color"
-          :icon-color="cocoonColors.accordion_icon_color"
-        >
-          <AccordionItem
-            title="Terminbuchung"
-            text="Buchen Sie Ihren Wunschtermin ganz einfach online. Wählen Sie aus verfügbaren Zeiten und erhalten Sie eine sofortige Bestätigung per E-Mail. Unsere flexiblen Terminoptionen ermöglichen es Ihnen, Ihre Behandlung an Ihren Zeitplan anzupassen."
-            value="1"
-            variant="default"
-            :title-color="cocoonColors.accordion_title_color"
-            :content-color="cocoonColors.accordion_content_color"
-            :divider-color="cocoonColors.accordion_divider_color"
-            :icon-color="cocoonColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="Behandlungsablauf"
-            text="Jede Behandlung beginnt mit einer gründlichen Untersuchung und Beratung. Wir erklären Ihnen jeden Schritt und beantworten all Ihre Fragen. Ihre Gesundheit und Ihr Wohlbefinden stehen bei uns an erster Stelle."
-            value="2"
-            variant="default"
-            :title-color="cocoonColors.accordion_title_color"
-            :content-color="cocoonColors.accordion_content_color"
-            :divider-color="cocoonColors.accordion_divider_color"
-            :icon-color="cocoonColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="Versicherung & Kosten"
-            text="Wir akzeptieren alle gängigen Versicherungen und bieten transparente Kostenvoranschläge. Auf Wunsch erstellen wir einen detaillierten Heil- und Kostenplan für Sie. Ratenzahlung ist nach Vereinbarung möglich."
-            value="3"
-            variant="default"
-            :title-color="cocoonColors.accordion_title_color"
-            :content-color="cocoonColors.accordion_content_color"
-            :divider-color="cocoonColors.accordion_divider_color"
-            :icon-color="cocoonColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="Notfalltermine"
-            text="Für akute Beschwerden halten wir täglich Notfalltermine bereit. Rufen Sie uns an, und wir finden schnellstmöglich einen Termin für Sie."
-            value="4"
-            variant="default"
-            :title-color="cocoonColors.accordion_title_color"
-            :content-color="cocoonColors.accordion_content_color"
-            :divider-color="cocoonColors.accordion_divider_color"
-            :icon-color="cocoonColors.accordion_icon_color"
-          />
-          <AccordionItem
-            title="Öffnungszeiten"
-            text="Montag bis Freitag: 8:00 - 18:00 Uhr. Samstag: Nach Vereinbarung. An Feiertagen geschlossen."
-            value="5"
-            variant="end"
-            :title-color="cocoonColors.accordion_title_color"
-            :content-color="cocoonColors.accordion_content_color"
-            :divider-color="cocoonColors.accordion_divider_color"
-            :icon-color="cocoonColors.accordion_icon_color"
-          />
-        </AccordionGroup>
-        </div>
-      </div>
-
-      <!-- Filled Preset Variant -->
-      <div class="treatment-section">
-        <h3 class="section-title">Filled Preset (Admin Settings Style)</h3>
-        <div class="filled-container">
-          <AccordionGroup
-            :multiple="false"
-            v-model="filledPanel"
-            headline="Settings"
-            :headline-color="dentalColors.accordion_title_color"
-          >
-            <AccordionItem
-              value="account"
-              preset="filled"
-              :icon-color="dentalColors.accordion_icon_color"
-            >
-              <template #title>
-                <div class="filled-header">
-                  <v-icon icon="heroicons:user-circle" color="var(--Dental-Blue-0)"></v-icon>
-                  <h4>Account Settings</h4>
-                </div>
-              </template>
-              <template #text>
-                <div class="filled-content">
-                  <div class="settings-row">
-                    <div class="settings-info">
-                      <h5>Account</h5>
-                      <p>Manage your account settings and preferences</p>
-                    </div>
-                    <Button label="Edit" variant="flat" size="small" />
-                  </div>
-                </div>
-              </template>
-            </AccordionItem>
-            <AccordionItem
-              value="notifications"
-              preset="filled"
-              :icon-color="dentalColors.accordion_icon_color"
-            >
-              <template #title>
-                <div class="filled-header">
-                  <v-icon icon="heroicons:bell" color="var(--Dental-Blue-0)"></v-icon>
-                  <h4>Notifications</h4>
-                </div>
-              </template>
-              <template #text>
-                <div class="filled-content">
-                  <div class="settings-row">
-                    <div class="settings-info">
-                      <h5>Email Notifications</h5>
-                      <p>Receive email updates about your appointments</p>
-                    </div>
-                    <Checkbox v-model="notificationsEnabled" />
-                  </div>
-                </div>
-              </template>
-            </AccordionItem>
-            <AccordionItem
-              value="security"
-              preset="filled"
-              :icon-color="dentalColors.accordion_icon_color"
-            >
-              <template #title>
-                <div class="filled-header">
-                  <v-icon icon="heroicons:shield-check" color="var(--Dental-Blue-0)"></v-icon>
-                  <h4>Security</h4>
-                </div>
-              </template>
-              <template #text>
-                <div class="filled-content">
-                  <div class="settings-row">
-                    <div class="settings-info">
-                      <h5>Two-Factor Authentication</h5>
-                      <p>Add an extra layer of security to your account</p>
-                    </div>
-                    <Button label="Enable" variant="flat" size="small" />
-                  </div>
-                </div>
-              </template>
-            </AccordionItem>
-          </AccordionGroup>
-        </div>
-      </div>
-
-      <!-- Shadow Override Examples -->
-      <div class="treatment-section">
-        <h3 class="section-title">Shadow Override Examples</h3>
-        <div class="shadow-examples">
-          <div class="shadow-column">
-            <h4 class="shadow-label">Elevated (default shadow)</h4>
-            <AccordionGroup :multiple="false" v-model="shadowExample1">
-              <AccordionItem
-                value="1"
-                preset="elevated"
-                title="Default Elevated Shadow"
-                text="Uses the default shadow: 0 2px 8px rgba(0,0,0,0.1)"
-              />
-            </AccordionGroup>
-          </div>
-          <div class="shadow-column">
-            <h4 class="shadow-label">Elevated (no shadow)</h4>
-            <AccordionGroup :multiple="false" v-model="shadowExample2">
-              <AccordionItem
-                value="1"
-                preset="elevated"
-                shadow="none"
-                title="Elevated Without Shadow"
-                text="Shadow disabled with shadow='none'"
-              />
-            </AccordionGroup>
-          </div>
-          <div class="shadow-column">
-            <h4 class="shadow-label">Filled (custom shadow)</h4>
-            <AccordionGroup :multiple="false" v-model="shadowExample3">
-              <AccordionItem
-                value="1"
-                preset="filled"
-                shadow="0 4px 16px rgba(0, 0, 0, 0.15)"
-                title="Filled With Custom Shadow"
-                text="Custom shadow added to filled preset"
-              />
-            </AccordionGroup>
-          </div>
-          <div class="shadow-column">
-            <h4 class="shadow-label">Elevated (heavy shadow)</h4>
-            <AccordionGroup :multiple="false" v-model="shadowExample4">
-              <AccordionItem
-                value="1"
-                preset="elevated"
-                shadow="0 8px 24px rgba(0, 0, 0, 0.25)"
-                title="Heavy Custom Shadow"
-                text="Stronger shadow for more emphasis"
-              />
-            </AccordionGroup>
-          </div>
-        </div>
-      </div>
-
-      <!-- Divider Control Examples -->
-      <div class="treatment-section">
-        <h3 class="section-title">Divider Control (showTopDivider / showBottomDivider)</h3>
-        <div class="divider-examples">
-          <div class="divider-column">
-            <h4 class="divider-label">Top divider only</h4>
-            <AccordionGroup :multiple="false" v-model="dividerExample1">
-              <AccordionItem
-                value="1"
-                :show-top-divider="true"
-                :show-bottom-divider="false"
-                preset="plain"
-                title="Top Divider Only"
-                text="This item shows only the top divider"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
-              />
-              <AccordionItem
-                value="2"
-                :show-top-divider="true"
-                :show-bottom-divider="false"
-                preset="plain"
-                title="Another Item"
-                text="Also with only top divider"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
-              />
-            </AccordionGroup>
-          </div>
-          <div class="divider-column">
-            <h4 class="divider-label">Bottom divider only</h4>
-            <AccordionGroup :multiple="false" v-model="dividerExample2">
-              <AccordionItem
-                value="1"
-                :show-top-divider="false"
-                :show-bottom-divider="true"
-                title="Bottom Divider Only"
-                text="This item shows only the bottom divider"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
-                preset="plain"
-              />
-              <AccordionItem
-                value="2"
-                :show-top-divider="false"
-                :show-bottom-divider="true"
-                title="Another Item"
-                text="Also with only bottom divider"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
-                preset="plain"
-              />
-            </AccordionGroup>
-          </div>
-          <div class="divider-column">
-            <h4 class="divider-label">Both dividers</h4>
-            <AccordionGroup :multiple="false" v-model="dividerExample3">
-              <AccordionItem
-                value="1"
-                :show-top-divider="true"
-                :show-bottom-divider="true"
-                title="Both Dividers"
-                text="This item shows both top and bottom dividers"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
-                preset="plain"
-              />
-              <AccordionItem
-                value="2"
-                :show-top-divider="true"
-                :show-bottom-divider="true"
-                title="Another Item"
-                text="Also with both dividers"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
-                preset="plain"
-              />
-            </AccordionGroup>
-          </div>
-          <div class="divider-column">
-            <h4 class="divider-label">No dividers</h4>
-            <AccordionGroup :multiple="false" v-model="dividerExample4">
-              <AccordionItem
-                value="1"
-                :show-top-divider="false"
-                :show-bottom-divider="false"
-                title="No Dividers"
-                text="This item shows no dividers at all"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                preset="plain"
-              />
-              <AccordionItem
-                value="2"
-                :show-top-divider="false"
-                :show-bottom-divider="false"
-                title="Another Item"
-                text="Also with no dividers"
-                :title-color="dentalColors.accordion_title_color"
-                :content-color="dentalColors.accordion_content_color"
-                preset="plain"
-              />
-            </AccordionGroup>
-          </div>
-        </div>
-      </div>
-
-      <!-- Plain Preset Example -->
-      <div class="treatment-section">
-        <h3 class="section-title">Plain Preset (Minimal Style)</h3>
-        <div class="plain-container">
-          <AccordionGroup
-            :multiple="false"
-            v-model="plainPanel"
-            headline="FAQ"
-            :headline-color="dentalColors.accordion_title_color"
-          >
-            <AccordionItem
-              value="faq1"
-              preset="plain"
-              title="What is your return policy?"
-              text="You can return any item within 30 days of purchase for a full refund. Items must be in their original condition with tags attached."
-              :title-color="dentalColors.accordion_title_color"
-              :content-color="dentalColors.accordion_content_color"
-              :icon-color="dentalColors.accordion_icon_color"
-            />
-            <AccordionItem
-              value="faq2"
-              preset="plain"
-              title="How long does shipping take?"
-              text="Standard shipping takes 5-7 business days. Express shipping is available for an additional fee and arrives within 2-3 business days."
-              :title-color="dentalColors.accordion_title_color"
-              :content-color="dentalColors.accordion_content_color"
-              :icon-color="dentalColors.accordion_icon_color"
-            />
-            <AccordionItem
-              value="faq3"
-              preset="plain"
-              title="Do you offer international shipping?"
-              text="Yes, we ship to over 50 countries worldwide. International shipping rates and delivery times vary by location."
-              :title-color="dentalColors.accordion_title_color"
-              :content-color="dentalColors.accordion_content_color"
-              :icon-color="dentalColors.accordion_icon_color"
-            />
-          </AccordionGroup>
-        </div>
-      </div>
-
-      <!-- Treatment Patient Counts Variant -->
-      <div class="treatment-section">
-        <h3 class="section-title">Elevated Preset (Treatment Patient Counts)</h3>
-        <div class="treatment-container">
-          <AccordionGroup
-            :multiple="false"
-            v-model="treatmentPanel"
-            headline="Behandlungen"
-            :headline-color="dentalColors.accordion_title_color"
-          >
-            <template v-for="item in computedTreatmentPatientCounts" :key="item.templateName">
-              <AccordionItem :value="item.templateName" variant="default" preset="elevated" v-if="item.count > 0">
-                <!-- Accordion Header -->
-                <template #title>
-                  <div class="treatment-header">
-                    <Checkbox v-model="item.selected" />
-                    <h3 class="treatment-title">{{ item.templateName }}</h3>
-                    <!-- Badge showing overdue labor work count -->
-                    <span v-if="item.overdueCount > 0" class="labor-overdue-badge">
-                      {{ item.overdueCount }} Laborarbeit überfällig
-                    </span>
-                  </div>
-                </template>
-
-                <!-- Accordion Content -->
-                <template #text>
-                  <div class="treatment-content">
-                    <h4>Patienten: {{ item.count }}</h4>
-                    <ul class="patient-list">
-                      <li
-                        v-for="patient in item.patients"
-                        :key="patient.name"
-                        class="patient-item"
-                      >
-                        <span class="bullet">•</span>
-                        <span>{{ patient.name }}</span>
-                        <!-- Red dot for patients with overdue labor work -->
-                        <span v-if="patient.hasOverdue" class="overdue-dot"></span>
-                        <span v-if="patient.count > 1" class="patient-count">({{ patient.count }})</span>
-                      </li>
-                    </ul>
-                  </div>
-                </template>
-              </AccordionItem>
-            </template>
-          </AccordionGroup>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, reactive } from "vue";
-import {
-  domain,
-  setTestingDomain,
-  clearTestingDomain,
-  getColorsForDomain,
-  siteColors
-} from "@/utils/index";
-
-import Background from "@/components/Background/Background.vue";
-import Button from "@/components/Button/Button.vue";
-import Checkbox from "@/components/CheckBox/Checkbox.vue";
-import AccordionGroup from "@/components/Accordion/AccordionGroup.vue";
-import AccordionItem from "@/components/Accordion/AccordionItem.vue";
-
-const currentDomain = computed(() => domain.value);
-
-const switchToDental = () => {
-  setTestingDomain("domain-dental");
-};
-
-const switchToCocoon = () => {
-  setTestingDomain("domain-cocoon");
-};
-
-const resetDomain = () => {
-  clearTestingDomain();
-};
-
-const dentalColors = getColorsForDomain("domain-dental");
-const cocoonColors = getColorsForDomain("domain-cocoon");
-
-const accordionOutlined = ref(null);
-const accordionOutlined2 = ref(null);
-const accordionPlain = ref(null);
-const accordionMultiple = ref([1, 2]);
-const accordionComplex = ref(null);
-
-// Filled preset data
-const filledPanel = ref(null);
-const notificationsEnabled = ref(true);
-
-// Shadow examples data
-const shadowExample1 = ref(null);
-const shadowExample2 = ref(null);
-const shadowExample3 = ref(null);
-const shadowExample4 = ref(null);
-
-// Divider examples data
-const dividerExample1 = ref(null);
-const dividerExample2 = ref(null);
-const dividerExample3 = ref(null);
-const dividerExample4 = ref(null);
-
-// Plain preset data
-const plainPanel = ref(null);
-
-// Treatment Patient Counts data
-const treatmentPanel = ref(null);
-
-const computedTreatmentPatientCounts = reactive([
-  {
-    templateName: "Zahnreinigung",
-    selected: false,
-    count: 4,
-    overdueCount: 2,
-    patients: [
-      { name: "Max Mustermann", hasOverdue: true, count: 2 },
-      { name: "Anna Schmidt", hasOverdue: false, count: 1 },
-      { name: "Peter Weber", hasOverdue: true, count: 1 },
-    ],
-  },
-  {
-    templateName: "Kontrolluntersuchung",
-    selected: false,
-    count: 3,
-    overdueCount: 0,
-    patients: [
-      { name: "Lisa Müller", hasOverdue: false, count: 1 },
-      { name: "Thomas Bauer", hasOverdue: false, count: 1 },
-      { name: "Sarah Klein", hasOverdue: false, count: 1 },
-    ],
-  },
-  {
-    templateName: "Implantologie",
-    selected: false,
-    count: 2,
-    overdueCount: 1,
-    patients: [
-      { name: "Michael Hoffmann", hasOverdue: true, count: 1 },
-      { name: "Julia Fischer", hasOverdue: false, count: 1 },
-    ],
-  },
-  {
-    templateName: "Kieferorthopädie",
-    selected: false,
-    count: 0,
-    overdueCount: 0,
-    patients: [],
-  },
-]);
-</script>
-
-<style scoped>
-.page {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100vw;
-  min-height: 100vh;
-  background-color: #f5f5f5;
-  padding: 2rem 0;
-  overflow-y: auto;
-}
-
-.element-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  width: 95%;
-  max-width: 1400px;
-  gap: 2rem;
-}
-
-.controls {
-  width: 100%;
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  text-align: center;
-}
-
-.controls h2 {
-  margin: 0 0 1rem 0;
-  color: #333;
-  font-size: 1.5rem;
-}
-
-.button-group {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.control-btn {
-  padding: 0.75rem 1.5rem;
-  font-size: 1rem;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  background-color: #4caf50;
-  color: white;
-  transition: background-color 0.3s ease;
-  font-weight: 500;
-}
-
-.control-btn:hover {
-  background-color: #45a049;
-}
-
-.control-btn.reset {
-  background-color: #f44336;
-}
-
-.control-btn.reset:hover {
-  background-color: #da190b;
-}
-
-.matrix-container {
-  width: 100%;
-  overflow-x: auto;
-  display: flex;
-  gap: 20px;
-  justify-content: space-between;
-}
-
-/* Treatment Section Styles */
-.treatment-section {
-  width: 100%;
-  background: white;
-  padding: 1.5rem;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.section-title {
-  margin: 0 0 1rem 0;
-  color: #333;
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.treatment-container {
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 10px;
-}
-
-.treatment-header {
-  display: flex;
-  width: 100%;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.treatment-title {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--Dental-Blue-0, #172774);
-}
-
-.labor-overdue-badge {
-  background-color: #fef2f2;
-  color: #dc2626;
-  padding: 0.25rem 0.75rem;
-  border-radius: 9999px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin-left: auto;
-}
-
-.treatment-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  padding: 0 1rem;
-}
-
-.treatment-content h4 {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #333;
-}
-
-.patient-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.patient-item {
-  display: flex;
-  align-items: center;
-  padding: 0.25rem 0;
-  padding-left: 1rem;
-  color: var(--Dental-Blue-0, #172774);
-  font-size: 0.875rem;
-}
-
-.bullet {
-  position: absolute;
-  left: 0;
-  color: var(--Dental-Blue-0, #172774);
-  font-size: 1.25rem;
-}
-
-.patient-item {
-  position: relative;
-  padding-left: 1rem;
-}
-
-.overdue-dot {
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background-color: var(--Power-Red-0, #dc2626);
-  margin-left: 0.5rem;
-  flex-shrink: 0;
-}
-
-.patient-count {
-  margin-left: 0.25rem;
-  color: #666;
-}
-
-/* Filled Preset Styles */
-.filled-container {
-  max-width: 500px;
-}
-
-.filled-header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.filled-header h4 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--Dental-Blue-0, #172774);
-}
-
-.filled-content {
-  padding: 0.5rem 0;
-}
-
-.settings-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.settings-info h5 {
-  margin: 0 0 0.25rem 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #333;
-}
-
-.settings-info p {
-  margin: 0;
-  font-size: 0.8125rem;
-  color: #666;
-}
-
-/* Shadow Examples Styles */
-.shadow-examples {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
-  background-color: #f5f5f5;
-}
-
-.shadow-column {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.shadow-label {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #555;
-}
-
-@media (max-width: 768px) {
-  .shadow-examples {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Divider Examples Styles */
-.divider-examples {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
-}
-
-.divider-column {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.divider-label {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #555;
-}
-
-@media (max-width: 768px) {
-  .divider-examples {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Plain Preset Styles */
-.plain-container {
-  max-width: 600px;
-}
-</style>
+<template>
+  <div class="page">
+    <div class="element-container">
+      <div class="controls">
+        <h2>Testing Domain: {{ currentDomain }}</h2>
+        <div class="button-group">
+          <button
+            @click="switchToDental"
+            class="control-btn"
+          >
+            Switch to Wunschlachen (Dental)
+          </button>
+          <button
+            @click="switchToCocoon"
+            class="control-btn"
+          >
+            Switch to White Cocoon
+          </button>
+          <button
+            @click="resetDomain"
+            class="control-btn reset"
+          >
+            Reset to Auto-Detect
+          </button>
+        </div>
+      </div>
+
+      <!-- Default Preset Examples -->
+      <div class="treatment-section">
+        <h3 class="section-title">Default Preset (Flat with Dividers)</h3>
+        <div class="matrix-container">
+          <AccordionGroup
+            v-model="accordionOutlined"
+            headline="Häufig gestellte Fragen"
+            :headline-color="dentalColors.accordion_title_color"
+            :divider-color="dentalColors.accordion_divider_color"
+            :icon-color="dentalColors.accordion_icon_color"
+          >
+          <AccordionItem
+            titleColor="#FF0000"
+            title="Terminbuchung"
+            text="Buchen Sie Ihren Wunschtermin ganz einfach online. W�hlen Sie aus verf�gbaren Zeiten und erhalten Sie eine sofortige Best�tigung per E-Mail. Unsere flexiblen Terminoptionen erm�glichen es Ihnen, Ihre Behandlung an Ihren Zeitplan anzupassen."
+            value="1"
+            :content-color="dentalColors.accordion_content_color"
+            :divider-props="{ color: '#FF0000', thickness: 2, opacity: 1}"
+            :icon-color="dentalColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="Behandlungsablauf"
+            text="Jede Behandlung beginnt mit einer gr�ndlichen Untersuchung und Beratung. Wir erkl�ren Ihnen jeden Schritt und beantworten all Ihre Fragen. Ihre Gesundheit und Ihr Wohlbefinden stehen bei uns an erster Stelle."
+            value="2"
+            :title-color="dentalColors.accordion_title_color"
+            :content-color="dentalColors.accordion_content_color"
+            :divider-color="dentalColors.accordion_divider_color"
+            :icon-color="dentalColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="Versicherung & Kosten"
+            text="Wir akzeptieren alle g�ngigen Versicherungen und bieten transparente Kostenvoranschl�ge. Auf Wunsch erstellen wir einen detaillierten Heil- und Kostenplan f�r Sie. Ratenzahlung ist nach Vereinbarung m�glich."
+            value="3"
+            :title-color="dentalColors.accordion_title_color"
+            :content-color="dentalColors.accordion_content_color"
+            :divider-color="dentalColors.accordion_divider_color"
+            :icon-color="dentalColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="Notfalltermine"
+            text="F�r akute Beschwerden halten wir t�glich Notfalltermine bereit. Rufen Sie uns an, und wir finden schnellstm�glich einen Termin f�r Sie."
+            value="4"
+            :title-color="dentalColors.accordion_title_color"
+            :content-color="dentalColors.accordion_content_color"
+            :divider-color="dentalColors.accordion_divider_color"
+            :icon-color="dentalColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="�ffnungszeiten"
+            text="Montag bis Freitag: 8:00 - 18:00 Uhr. Samstag: Nach Vereinbarung. An Feiertagen geschlossen."
+            value="5"
+            variant="end"
+            :title-color="dentalColors.accordion_title_color"
+            :content-color="dentalColors.accordion_content_color"
+            :divider-color="dentalColors.accordion_divider_color"
+            :icon-color="dentalColors.accordion_icon_color"
+          />
+        </AccordionGroup>
+
+        <AccordionGroup
+          v-model="accordionOutlined2"
+          headline="Frequently Asked Questions (FAQs)"
+          :headline-color="cocoonColors.accordion_title_color"
+          :divider-color="cocoonColors.accordion_divider_color"
+          :icon-color="cocoonColors.accordion_icon_color"
+        >
+          <AccordionItem
+            title="Terminbuchung"
+            text="Buchen Sie Ihren Wunschtermin ganz einfach online. Wählen Sie aus verfügbaren Zeiten und erhalten Sie eine sofortige Bestätigung per E-Mail. Unsere flexiblen Terminoptionen ermöglichen es Ihnen, Ihre Behandlung an Ihren Zeitplan anzupassen."
+            value="1"
+            variant="default"
+            :title-color="cocoonColors.accordion_title_color"
+            :content-color="cocoonColors.accordion_content_color"
+            :divider-color="cocoonColors.accordion_divider_color"
+            :icon-color="cocoonColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="Behandlungsablauf"
+            text="Jede Behandlung beginnt mit einer gründlichen Untersuchung und Beratung. Wir erklären Ihnen jeden Schritt und beantworten all Ihre Fragen. Ihre Gesundheit und Ihr Wohlbefinden stehen bei uns an erster Stelle."
+            value="2"
+            variant="default"
+            :title-color="cocoonColors.accordion_title_color"
+            :content-color="cocoonColors.accordion_content_color"
+            :divider-color="cocoonColors.accordion_divider_color"
+            :icon-color="cocoonColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="Versicherung & Kosten"
+            text="Wir akzeptieren alle gängigen Versicherungen und bieten transparente Kostenvoranschläge. Auf Wunsch erstellen wir einen detaillierten Heil- und Kostenplan für Sie. Ratenzahlung ist nach Vereinbarung möglich."
+            value="3"
+            variant="default"
+            :title-color="cocoonColors.accordion_title_color"
+            :content-color="cocoonColors.accordion_content_color"
+            :divider-color="cocoonColors.accordion_divider_color"
+            :icon-color="cocoonColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="Notfalltermine"
+            text="Für akute Beschwerden halten wir täglich Notfalltermine bereit. Rufen Sie uns an, und wir finden schnellstmöglich einen Termin für Sie."
+            value="4"
+            variant="default"
+            :title-color="cocoonColors.accordion_title_color"
+            :content-color="cocoonColors.accordion_content_color"
+            :divider-color="cocoonColors.accordion_divider_color"
+            :icon-color="cocoonColors.accordion_icon_color"
+          />
+          <AccordionItem
+            title="Öffnungszeiten"
+            text="Montag bis Freitag: 8:00 - 18:00 Uhr. Samstag: Nach Vereinbarung. An Feiertagen geschlossen."
+            value="5"
+            variant="end"
+            :title-color="cocoonColors.accordion_title_color"
+            :content-color="cocoonColors.accordion_content_color"
+            :divider-color="cocoonColors.accordion_divider_color"
+            :icon-color="cocoonColors.accordion_icon_color"
+          />
+        </AccordionGroup>
+        </div>
+      </div>
+
+      <!-- Filled Preset Variant -->
+      <div class="treatment-section">
+        <h3 class="section-title">Filled Preset (Admin Settings Style)</h3>
+        <div class="filled-container">
+          <AccordionGroup
+            :multiple="false"
+            v-model="filledPanel"
+            headline="Settings"
+            :headline-color="dentalColors.accordion_title_color"
+          >
+            <AccordionItem
+              value="account"
+              preset="filled"
+              :icon-color="dentalColors.accordion_icon_color"
+            >
+              <template #title>
+                <div class="filled-header">
+                  <v-icon icon="heroicons:user-circle" color="var(--Dental-Blue-0)"></v-icon>
+                  <h4>Account Settings</h4>
+                </div>
+              </template>
+              <template #text>
+                <div class="filled-content">
+                  <div class="settings-row">
+                    <div class="settings-info">
+                      <h5>Account</h5>
+                      <p>Manage your account settings and preferences</p>
+                    </div>
+                    <Button label="Edit" variant="flat" size="small" />
+                  </div>
+                </div>
+              </template>
+            </AccordionItem>
+            <AccordionItem
+              value="notifications"
+              preset="filled"
+              :icon-color="dentalColors.accordion_icon_color"
+            >
+              <template #title>
+                <div class="filled-header">
+                  <v-icon icon="heroicons:bell" color="var(--Dental-Blue-0)"></v-icon>
+                  <h4>Notifications</h4>
+                </div>
+              </template>
+              <template #text>
+                <div class="filled-content">
+                  <div class="settings-row">
+                    <div class="settings-info">
+                      <h5>Email Notifications</h5>
+                      <p>Receive email updates about your appointments</p>
+                    </div>
+                    <Checkbox v-model="notificationsEnabled" />
+                  </div>
+                </div>
+              </template>
+            </AccordionItem>
+            <AccordionItem
+              value="security"
+              preset="filled"
+              :icon-color="dentalColors.accordion_icon_color"
+            >
+              <template #title>
+                <div class="filled-header">
+                  <v-icon icon="heroicons:shield-check" color="var(--Dental-Blue-0)"></v-icon>
+                  <h4>Security</h4>
+                </div>
+              </template>
+              <template #text>
+                <div class="filled-content">
+                  <div class="settings-row">
+                    <div class="settings-info">
+                      <h5>Two-Factor Authentication</h5>
+                      <p>Add an extra layer of security to your account</p>
+                    </div>
+                    <Button label="Enable" variant="flat" size="small" />
+                  </div>
+                </div>
+              </template>
+            </AccordionItem>
+          </AccordionGroup>
+        </div>
+      </div>
+
+      <!-- Shadow Override Examples -->
+      <div class="treatment-section">
+        <h3 class="section-title">Shadow Override Examples</h3>
+        <div class="shadow-examples">
+          <div class="shadow-column">
+            <h4 class="shadow-label">Elevated (default shadow)</h4>
+            <AccordionGroup :multiple="false" v-model="shadowExample1">
+              <AccordionItem
+                value="1"
+                preset="elevated"
+                title="Default Elevated Shadow"
+                text="Uses the default shadow: 0 2px 8px rgba(0,0,0,0.1)"
+              />
+            </AccordionGroup>
+          </div>
+          <div class="shadow-column">
+            <h4 class="shadow-label">Elevated (no shadow)</h4>
+            <AccordionGroup :multiple="false" v-model="shadowExample2">
+              <AccordionItem
+                value="1"
+                preset="elevated"
+                shadow="none"
+                title="Elevated Without Shadow"
+                text="Shadow disabled with shadow='none'"
+              />
+            </AccordionGroup>
+          </div>
+          <div class="shadow-column">
+            <h4 class="shadow-label">Filled (custom shadow)</h4>
+            <AccordionGroup :multiple="false" v-model="shadowExample3">
+              <AccordionItem
+                value="1"
+                preset="filled"
+                shadow="0 4px 16px rgba(0, 0, 0, 0.15)"
+                title="Filled With Custom Shadow"
+                text="Custom shadow added to filled preset"
+              />
+            </AccordionGroup>
+          </div>
+          <div class="shadow-column">
+            <h4 class="shadow-label">Elevated (heavy shadow)</h4>
+            <AccordionGroup :multiple="false" v-model="shadowExample4">
+              <AccordionItem
+                value="1"
+                preset="elevated"
+                shadow="0 8px 24px rgba(0, 0, 0, 0.25)"
+                title="Heavy Custom Shadow"
+                text="Stronger shadow for more emphasis"
+              />
+            </AccordionGroup>
+          </div>
+        </div>
+      </div>
+
+      <!-- Divider Control Examples -->
+      <div class="treatment-section">
+        <h3 class="section-title">Divider Control (showTopDivider / showBottomDivider)</h3>
+        <div class="divider-examples">
+          <div class="divider-column">
+            <h4 class="divider-label">Top divider only</h4>
+            <AccordionGroup :multiple="false" v-model="dividerExample1">
+              <AccordionItem
+                value="1"
+                :show-top-divider="true"
+                :show-bottom-divider="false"
+                preset="plain"
+                title="Top Divider Only"
+                text="This item shows only the top divider"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
+              />
+              <AccordionItem
+                value="2"
+                :show-top-divider="true"
+                :show-bottom-divider="false"
+                preset="plain"
+                title="Another Item"
+                text="Also with only top divider"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
+              />
+            </AccordionGroup>
+          </div>
+          <div class="divider-column">
+            <h4 class="divider-label">Bottom divider only</h4>
+            <AccordionGroup :multiple="false" v-model="dividerExample2">
+              <AccordionItem
+                value="1"
+                :show-top-divider="false"
+                :show-bottom-divider="true"
+                title="Bottom Divider Only"
+                text="This item shows only the bottom divider"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
+                preset="plain"
+              />
+              <AccordionItem
+                value="2"
+                :show-top-divider="false"
+                :show-bottom-divider="true"
+                title="Another Item"
+                text="Also with only bottom divider"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
+                preset="plain"
+              />
+            </AccordionGroup>
+          </div>
+          <div class="divider-column">
+            <h4 class="divider-label">Both dividers</h4>
+            <AccordionGroup :multiple="false" v-model="dividerExample3">
+              <AccordionItem
+                value="1"
+                :show-top-divider="true"
+                :show-bottom-divider="true"
+                title="Both Dividers"
+                text="This item shows both top and bottom dividers"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
+                preset="plain"
+              />
+              <AccordionItem
+                value="2"
+                :show-top-divider="true"
+                :show-bottom-divider="true"
+                title="Another Item"
+                text="Also with both dividers"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                :divider-props="{ color: 'var(--Dental-Blue-0)', thickness: 1, opacity: 1 }"
+                preset="plain"
+              />
+            </AccordionGroup>
+          </div>
+          <div class="divider-column">
+            <h4 class="divider-label">No dividers</h4>
+            <AccordionGroup :multiple="false" v-model="dividerExample4">
+              <AccordionItem
+                value="1"
+                :show-top-divider="false"
+                :show-bottom-divider="false"
+                title="No Dividers"
+                text="This item shows no dividers at all"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                preset="plain"
+              />
+              <AccordionItem
+                value="2"
+                :show-top-divider="false"
+                :show-bottom-divider="false"
+                title="Another Item"
+                text="Also with no dividers"
+                :title-color="dentalColors.accordion_title_color"
+                :content-color="dentalColors.accordion_content_color"
+                preset="plain"
+              />
+            </AccordionGroup>
+          </div>
+        </div>
+      </div>
+
+      <!-- Plain Preset Example -->
+      <div class="treatment-section">
+        <h3 class="section-title">Plain Preset (Minimal Style)</h3>
+        <div class="plain-container">
+          <AccordionGroup
+            :multiple="false"
+            v-model="plainPanel"
+            headline="FAQ"
+            :headline-color="dentalColors.accordion_title_color"
+          >
+            <AccordionItem
+              value="faq1"
+              preset="plain"
+              title="What is your return policy?"
+              text="You can return any item within 30 days of purchase for a full refund. Items must be in their original condition with tags attached."
+              :title-color="dentalColors.accordion_title_color"
+              :content-color="dentalColors.accordion_content_color"
+              :icon-color="dentalColors.accordion_icon_color"
+            />
+            <AccordionItem
+              value="faq2"
+              preset="plain"
+              title="How long does shipping take?"
+              text="Standard shipping takes 5-7 business days. Express shipping is available for an additional fee and arrives within 2-3 business days."
+              :title-color="dentalColors.accordion_title_color"
+              :content-color="dentalColors.accordion_content_color"
+              :icon-color="dentalColors.accordion_icon_color"
+            />
+            <AccordionItem
+              value="faq3"
+              preset="plain"
+              title="Do you offer international shipping?"
+              text="Yes, we ship to over 50 countries worldwide. International shipping rates and delivery times vary by location."
+              :title-color="dentalColors.accordion_title_color"
+              :content-color="dentalColors.accordion_content_color"
+              :icon-color="dentalColors.accordion_icon_color"
+            />
+          </AccordionGroup>
+        </div>
+      </div>
+
+      <!-- Treatment Patient Counts Variant -->
+      <div class="treatment-section">
+        <h3 class="section-title">Elevated Preset (Treatment Patient Counts)</h3>
+        <div class="treatment-container">
+          <AccordionGroup
+            :multiple="false"
+            v-model="treatmentPanel"
+            headline="Behandlungen"
+            :headline-color="dentalColors.accordion_title_color"
+          >
+            <template v-for="item in computedTreatmentPatientCounts" :key="item.templateName">
+              <AccordionItem :value="item.templateName" variant="default" preset="elevated" v-if="item.count > 0">
+                <!-- Accordion Header -->
+                <template #title>
+                  <div class="treatment-header">
+                    <Checkbox v-model="item.selected" />
+                    <h3 class="treatment-title">{{ item.templateName }}</h3>
+                    <!-- Badge showing overdue labor work count -->
+                    <span v-if="item.overdueCount > 0" class="labor-overdue-badge">
+                      {{ item.overdueCount }} Laborarbeit überfällig
+                    </span>
+                  </div>
+                </template>
+
+                <!-- Accordion Content -->
+                <template #text>
+                  <div class="treatment-content">
+                    <h4>Patienten: {{ item.count }}</h4>
+                    <ul class="patient-list">
+                      <li
+                        v-for="patient in item.patients"
+                        :key="patient.name"
+                        class="patient-item"
+                      >
+                        <span class="bullet">•</span>
+                        <span>{{ patient.name }}</span>
+                        <!-- Red dot for patients with overdue labor work -->
+                        <span v-if="patient.hasOverdue" class="overdue-dot"></span>
+                        <span v-if="patient.count > 1" class="patient-count">({{ patient.count }})</span>
+                      </li>
+                    </ul>
+                  </div>
+                </template>
+              </AccordionItem>
+            </template>
+          </AccordionGroup>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, reactive } from "vue";
+import {
+  domain,
+  setTestingDomain,
+  clearTestingDomain,
+  getColorsForDomain,
+  siteColors
+} from "@/utils/index";
+
+import Background from "@/components/Background/Background.vue";
+import Button from "@/components/Button/Button.vue";
+import Checkbox from "@/components/CheckBox/Checkbox.vue";
+import AccordionGroup from "@/components/Accordion/AccordionGroup.vue";
+import AccordionItem from "@/components/Accordion/AccordionItem.vue";
+
+const currentDomain = computed(() => domain.value);
+
+const switchToDental = () => {
+  setTestingDomain("domain-dental");
+};
+
+const switchToCocoon = () => {
+  setTestingDomain("domain-cocoon");
+};
+
+const resetDomain = () => {
+  clearTestingDomain();
+};
+
+const dentalColors = getColorsForDomain("domain-dental");
+const cocoonColors = getColorsForDomain("domain-cocoon");
+
+const accordionOutlined = ref(null);
+const accordionOutlined2 = ref(null);
+const accordionPlain = ref(null);
+const accordionMultiple = ref([1, 2]);
+const accordionComplex = ref(null);
+
+// Filled preset data
+const filledPanel = ref(null);
+const notificationsEnabled = ref(true);
+
+// Shadow examples data
+const shadowExample1 = ref(null);
+const shadowExample2 = ref(null);
+const shadowExample3 = ref(null);
+const shadowExample4 = ref(null);
+
+// Divider examples data
+const dividerExample1 = ref(null);
+const dividerExample2 = ref(null);
+const dividerExample3 = ref(null);
+const dividerExample4 = ref(null);
+
+// Plain preset data
+const plainPanel = ref(null);
+
+// Treatment Patient Counts data
+const treatmentPanel = ref(null);
+
+const computedTreatmentPatientCounts = reactive([
+  {
+    templateName: "Zahnreinigung",
+    selected: false,
+    count: 4,
+    overdueCount: 2,
+    patients: [
+      { name: "Max Mustermann", hasOverdue: true, count: 2 },
+      { name: "Anna Schmidt", hasOverdue: false, count: 1 },
+      { name: "Peter Weber", hasOverdue: true, count: 1 },
+    ],
+  },
+  {
+    templateName: "Kontrolluntersuchung",
+    selected: false,
+    count: 3,
+    overdueCount: 0,
+    patients: [
+      { name: "Lisa Müller", hasOverdue: false, count: 1 },
+      { name: "Thomas Bauer", hasOverdue: false, count: 1 },
+      { name: "Sarah Klein", hasOverdue: false, count: 1 },
+    ],
+  },
+  {
+    templateName: "Implantologie",
+    selected: false,
+    count: 2,
+    overdueCount: 1,
+    patients: [
+      { name: "Michael Hoffmann", hasOverdue: true, count: 1 },
+      { name: "Julia Fischer", hasOverdue: false, count: 1 },
+    ],
+  },
+  {
+    templateName: "Kieferorthopädie",
+    selected: false,
+    count: 0,
+    overdueCount: 0,
+    patients: [],
+  },
+]);
+</script>
+
+<style scoped>
+.page {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+  padding: 2rem 0;
+  overflow-y: auto;
+}
+
+.element-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 95%;
+  max-width: 1400px;
+  gap: 2rem;
+}
+
+.controls {
+  width: 100%;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.controls h2 {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1.5rem;
+}
+
+.button-group {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.control-btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: #4caf50;
+  color: white;
+  transition: background-color 0.3s ease;
+  font-weight: 500;
+}
+
+.control-btn:hover {
+  background-color: #45a049;
+}
+
+.control-btn.reset {
+  background-color: #f44336;
+}
+
+.control-btn.reset:hover {
+  background-color: #da190b;
+}
+
+.matrix-container {
+  width: 100%;
+  overflow-x: auto;
+  display: flex;
+  gap: 20px;
+  justify-content: space-between;
+}
+
+/* Treatment Section Styles */
+.treatment-section {
+  width: 100%;
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+  margin: 0 0 1rem 0;
+  color: #333;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.treatment-container {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.treatment-header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.treatment-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--Dental-Blue-0, #172774);
+}
+
+.labor-overdue-badge {
+  background-color: #fef2f2;
+  color: #dc2626;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-left: auto;
+}
+
+.treatment-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0 1rem;
+}
+
+.treatment-content h4 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.patient-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.patient-item {
+  display: flex;
+  align-items: center;
+  padding: 0.25rem 0;
+  padding-left: 1rem;
+  color: var(--Dental-Blue-0, #172774);
+  font-size: 0.875rem;
+}
+
+.bullet {
+  position: absolute;
+  left: 0;
+  color: var(--Dental-Blue-0, #172774);
+  font-size: 1.25rem;
+}
+
+.patient-item {
+  position: relative;
+  padding-left: 1rem;
+}
+
+.overdue-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--Power-Red-0, #dc2626);
+  margin-left: 0.5rem;
+  flex-shrink: 0;
+}
+
+.patient-count {
+  margin-left: 0.25rem;
+  color: #666;
+}
+
+/* Filled Preset Styles */
+.filled-container {
+  max-width: 500px;
+}
+
+.filled-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.filled-header h4 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--Dental-Blue-0, #172774);
+}
+
+.filled-content {
+  padding: 0.5rem 0;
+}
+
+.settings-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.settings-info h5 {
+  margin: 0 0 0.25rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.settings-info p {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: #666;
+}
+
+/* Shadow Examples Styles */
+.shadow-examples {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+  background-color: #f5f5f5;
+}
+
+.shadow-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.shadow-label {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #555;
+}
+
+@media (max-width: 768px) {
+  .shadow-examples {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Divider Examples Styles */
+.divider-examples {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1.5rem;
+}
+
+.divider-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.divider-label {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #555;
+}
+
+@media (max-width: 768px) {
+  .divider-examples {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Plain Preset Styles */
+.plain-container {
+  max-width: 600px;
+}
+</style>