<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>Regeln</h1>
        </div>
      </router-link>
      <HeaderAdBanner />
    </header>

    <main class="content-page">
      <h2>Chat-Regeln</h2>
      <p>
        Damit der private Single Chat freundlich und sicher bleibt, gelten ein paar einfache Regeln. Wer wiederholt dagegen
        verstößt, kann blockiert oder vom Chat ausgeschlossen werden.
      </p>
      <p>
        Ergänzende Hinweise zum anonymen Chatten findest du unter
        <router-link to="/sicherheit">Sicherheit &amp; Privatsphäre</router-link>.
      </p>

      <h3>1) Respekt</h3>
      <p>
        Keine Beleidigungen, Hassrede, Diskriminierung oder gezielte Belästigung. Unterschiedliche Meinungen sind okay
        – respektloser Umgang nicht.
      </p>

      <h3>2) Keine illegalen Inhalte</h3>
      <p>
        Keine strafbaren Inhalte, keine Aufrufe zu Gewalt, keine extremistischen Inhalte. Bei klaren Verstößen behalten
        wir uns weitere Schritte vor.
      </p>

      <h3>3) Keine unerwünschte Werbung/Spam</h3>
      <p>
        Kein Spam, keine Massen-Nachrichten und keine automatisierten Werbe-Links. Partnerlinks sind nur nach Absprache
        erlaubt.
      </p>

      <h3>4) Bilder</h3>
      <p>
        Sende nur Bilder, für die du die Rechte hast. Keine belästigenden Inhalte. Wenn dein Gegenüber keine Bilder
        möchte, respektiere das.
      </p>

      <h3>5) Privatsphäre</h3>
      <p>
        Teile keine privaten Daten (Telefon, Adresse, E‑Mail, Passwörter). Bitte respektiere auch die Privatsphäre
        anderer und veröffentliche keine Chat-Inhalte außerhalb der Plattform.
      </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 {
  margin: 0 0 10px;
  color: #18201b;
}

.content-page h3 {
  margin: 18px 0 6px;
  color: #18201b;
}

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

