rebreak-monorepo/apps/marketing/app/pages/account-loeschen.vue

<template>
  <div class="min-h-screen bg-default font-sans pb-16 md:pb-0">
    <!-- Header -->
    <div class="pt-10 pb-8 text-center px-4">
      <div class="inline-flex items-center gap-2 bg-primary-950/60 border border-primary-800/40 rounded-full px-4 py-1.5 text-sm text-primary-300 mb-6">
        <UIcon name="i-heroicons-trash" class="text-primary-400" />
        Konto-Löschung
      </div>
      <h1 class="text-3xl md:text-5xl font-extrabold text-highlighted mb-3">
        Konto und Daten löschen
      </h1>
      <p class="text-muted text-sm">
        Du hast jederzeit das Recht, dein Konto und alle zugehörigen Daten löschen zu lassen (Art. 17 DSGVO).
      </p>
    </div>

    <!-- Content -->
    <article class="px-4 max-w-3xl mx-auto pb-24 text-sm text-muted leading-relaxed space-y-8">

      <!-- Methode 1: In-App -->
      <section>
        <h2 class="text-xl font-bold text-highlighted mb-3">Variante 1: In der App löschen (empfohlen)</h2>
        <ol class="list-decimal list-inside space-y-2">
          <li>Öffne die ReBreak-App auf deinem Gerät</li>
          <li>Tippe auf das Profil-Icon oben rechts</li>
          <li>Wähle <strong>Einstellungen</strong></li>
          <li>Scrolle zu <strong>Konto</strong> und tippe auf <strong>Konto löschen</strong></li>
          <li>Bestätige die Löschung. Alle Daten werden innerhalb von 30 Tagen unwiderruflich entfernt</li>
        </ol>
      </section>

      <!-- Methode 2: Email -->
      <section>
        <h2 class="text-xl font-bold text-highlighted mb-3">Variante 2: Per E-Mail anfordern</h2>
        <p class="mb-3">Falls du keinen Zugriff mehr auf die App hast, schreibe uns:</p>
        <div class="bg-elevated border border-default rounded-xl p-4 not-prose">
          <p>E-Mail: <a href="mailto:datenschutz@rebreak.org" class="text-primary-400 hover:underline">datenschutz@rebreak.org</a></p>
          <p class="mt-2 text-xs">Betreff: <em>„Konto-Löschung ReBreak"</em></p>
          <p class="mt-2 text-xs">Bitte gib die mit deinem Konto verknüpfte E-Mail-Adresse an, damit wir dein Konto eindeutig identifizieren können.</p>
        </div>
        <p class="text-xs italic mt-3">Deine Anfrage wird innerhalb von 30 Tagen bearbeitet. Wir senden dir eine Bestätigung sobald die Löschung abgeschlossen ist.</p>
      </section>

      <!-- Was wird gelöscht -->
      <section>
        <h2 class="text-xl font-bold text-highlighted mb-3">Was wird gelöscht?</h2>
        <ul class="list-disc list-inside space-y-1.5">
          <li>Dein ReBreak-Konto inklusive E-Mail, Nickname und Avatar</li>
          <li>Alle Streak-, Trigger- und Recovery-Daten</li>
          <li>Lyra-KI-Coach Chat-Verlauf und Memories</li>
          <li>Community-Posts und Kommentare</li>
          <li>Mail-Schutz-Verbindungen und gespeicherte IMAP-Tokens</li>
          <li>Custom-Domain-Listen</li>
          <li>Geräte-Registrierungen</li>
          <li>Demographische Profil-Angaben</li>
        </ul>
      </section>

      <!-- Was wird aufbewahrt -->
      <section>
        <h2 class="text-xl font-bold text-highlighted mb-3">Was wird aufbewahrt?</h2>
        <p class="mb-3">Aus rechtlichen Gründen werden folgende Daten weiter gespeichert:</p>
        <ul class="list-disc list-inside space-y-1.5">
          <li><strong>Rechnungsdaten</strong>: 10 Jahre gemäß § 147 AO und § 257 HGB (Abgabenordnung / Handelsgesetzbuch)</li>
          <li><strong>Aggregierte, anonymisierte Statistiken</strong>: Daten ohne jeden Personenbezug, die wir zur Produkt-Verbesserung nutzen (z.B. „durchschnittlich gesperrte Mails pro Tag")</li>
        </ul>
      </section>

      <!-- Teil-Löschung -->
      <section>
        <h2 class="text-xl font-bold text-highlighted mb-3">Nur Teile deiner Daten löschen?</h2>
        <p>Du kannst auch einzelne Daten-Kategorien löschen, ohne dein gesamtes Konto zu schließen:</p>
        <ul class="list-disc list-inside space-y-1.5 mt-3">
          <li>Lyra-Chat-Verlauf: in den App-Einstellungen unter „Lyra → Verlauf löschen"</li>
          <li>Mail-Schutz-Verbindungen: Mail-Tab → Postfach aufklappen → „Trennen"</li>
          <li>Demographische Daten: Profil-Bearbeiten → einzelne Felder leeren + Speichern</li>
          <li>Custom-Domains: Blocker-Tab → Domain auswählen → „Entfernen"</li>
          <li>Geräte: Profil → Geräteverwaltung → „Trennen"</li>
        </ul>
      </section>

      <!-- Footer -->
      <section class="pt-6 border-t border-default text-xs">
        <p class="mb-1"><strong>Verantwortlicher:</strong> Chahine Brini, Lärchenweg 17, 38368 Grasleben</p>
        <p class="mb-1"><strong>Datenschutz:</strong> <a href="mailto:datenschutz@rebreak.org" class="text-primary-400 hover:underline">datenschutz@rebreak.org</a></p>
        <p class="mb-1"><strong>Datenschutzerklärung:</strong> <a href="/datenschutz" class="text-primary-400 hover:underline">staging.rebreak.org/datenschutz</a></p>
        <p class="mt-2"><strong>Stand:</strong> 10. Mai 2026</p>
      </section>
    </article>

    <!-- Mobile Bottom Navigation (gleich wie datenschutz.vue) -->
    <nav class="md:hidden fixed bottom-0 left-0 right-0 z-50 flex border-t border-default bg-default/95 backdrop-blur-md pb-safe">
      <NuxtLink to="/" class="flex-1 flex flex-col items-center justify-center py-2.5 gap-0.5 text-[11px] text-muted">
        <UIcon name="i-heroicons-home" class="size-5" /><span>Start</span>
      </NuxtLink>
      <NuxtLink to="/pricing" class="flex-1 flex flex-col items-center justify-center py-2.5 gap-0.5 text-[11px] text-muted">
        <UIcon name="i-heroicons-credit-card" class="size-5" /><span>Preise</span>
      </NuxtLink>
      <NuxtLink to="/resources" class="flex-1 flex flex-col items-center justify-center py-2.5 gap-0.5 text-[11px] text-muted">
        <UIcon name="i-heroicons-book-open" class="size-5" /><span>Ressourcen</span>
      </NuxtLink>
      <NuxtLink to="/auth/login" class="flex-1 flex flex-col items-center justify-center py-2.5 gap-0.5 text-[11px] text-muted">
        <UIcon name="i-heroicons-user-circle" class="size-5" /><span>Login</span>
      </NuxtLink>
    </nav>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: 'Konto löschen – ReBreak',
  meta: [
    { name: 'description', content: 'Anleitung zum Löschen deines ReBreak-Kontos und aller zugehörigen Daten gemäß Art. 17 DSGVO.' },
    { name: 'robots', content: 'index,follow' },
  ],
});
definePageMeta({
  // public — kein auth nötig
});
</script>