<template>
  <div class="chat-container">
    <header class="header">
      <router-link to="/" class="app-brand app-brand-link">
        <span class="app-brand-mark">S</span>
        <div class="app-brand-copy">
          <span class="app-brand-eyebrow">SingleChat</span>
          <h1>Ratgeber</h1>
        </div>
      </router-link>
      <HeaderAdBanner />
    </header>

    <main class="content-page">
      <h2>Sicher chatten: Datenschutz im Alltag</h2>
      <p>
        Privater Chat funktioniert am besten, wenn du bewusst entscheidest, welche Informationen du teilst. Viele
        Risiken lassen sich mit wenigen Regeln vermeiden, ohne dass der Chat unpersoenlich wird.
      </p>
      <p>
        Sicherheit ist kein einmaliger Schritt, sondern ein Verhalten ueber den gesamten Kontakt hinweg. Je klarer deine
        Grenzen von Beginn an sind, desto entspannter bleibt das Gespraech.
      </p>

      <h3>Was du nicht teilen solltest</h3>
      <ul>
        <li>Telefonnummer, private E-Mail und Social-Media-Handles beim ersten Kontakt.</li>
        <li>Adresse, Arbeitgeber, Schule oder feste Tagesroutinen.</li>
        <li>Dokumente, Ticket-Screenshots oder Fotos mit sichtbaren sensiblen Daten.</li>
      </ul>

      <h3>Was du stattdessen teilen kannst</h3>
      <ul>
        <li>Allgemeine Interessen und Hobbys ohne Ortsbezug.</li>
        <li>Unkritische Alltagsthemen wie Musik, Serien oder Sport.</li>
        <li>Persoenliche Meinungen, solange keine sensiblen Daten enthalten sind.</li>
      </ul>

      <h3>Warnzeichen bei Gespraechen</h3>
      <p>
        Sei vorsichtig, wenn dein Gegenueber schnell Druck aufbaut, Geldthemen anspricht oder versucht, dich auf externe
        Plattformen zu ziehen. Das sind haeufige Muster bei Spam und Betrug.
      </p>

      <h3>Schrittfolge bei einem Vorfall</h3>
      <ol>
        <li>Keine weiteren Daten senden und den Verlauf ruhig halten.</li>
        <li>Kontakt sofort blockieren, wenn Druck oder Manipulation entsteht.</li>
        <li>Auffaellige Nachrichten per Screenshot sichern.</li>
        <li>Vorfall ueber <router-link to="/feedback">Feedback</router-link> melden.</li>
      </ol>

      <h3>So reagierst du richtig</h3>
      <ol>
        <li>Gespraech beenden, wenn es sich unwohl anfuehlt.</li>
        <li>Nutzer blockieren und problematische Inhalte nicht weiterverbreiten.</li>
        <li>Vorfall kurz dokumentieren und ueber Feedback melden.</li>
      </ol>

      <p>
        Ergaenzend empfehlen wir die Seite <router-link to="/sicherheit">Sicherheit</router-link> und den Artikel
        <router-link to="/ratgeber/red-flags">Red Flags im Online-Chat</router-link>.
      </p>

      <p class="content-meta">
        Redaktion: SingleChat Team · Zuletzt aktualisiert: 07.05.2026
      </p>
    </main>

    <ImprintContainer />
  </div>
</template>

<script setup>
import HeaderAdBanner from '../components/HeaderAdBanner.vue';
import ImprintContainer from '../components/ImprintContainer.vue';
</script>

<style scoped>
.content-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 14px 36px;
  line-height: 1.6;
  color: #344038;
}

.content-page h2,
.content-page h3 {
  color: #18201b;
}

.content-page a {
  color: #245c3a;
}

.content-meta {
  margin-top: 18px;
  font-size: 12px;
  color: #637067;
}

.app-brand-link {
  text-decoration: none;
}
</style>
