ocelot.social/docs/de/README.md

---
home: true
# layout: BlogHome
icon: home
# title: Ocelot.Social
heroFullScreen: false
# heroImage: /logo.svg
# heroText: Das freie soziale Open-Source-Netzwerk für eine aktive Zivilgesellschaft.
tagLine: 
# actions:
#   - text: Demo
#     link: https://stage.ocelot.social/
---

<div class="hero-container">
  <div class="hero-container-inner">
    <div class="hero-container-content">
      <img id="logo" src="/logo.svg" alt="ocelot.social" />
      <div id="slogan-container">
        <span id="slogan-1" class="slogan">Freie Open-Source-Software</span>
        <span id="slogan-2" class="slogan">für dein soziales Netzwerk</span>
      </div>
      <a href="#benefits">
        <Button class="hero-button">
          Entdecke mehr
        </Button>
      </a>
    </div>
  </div>
</div>

<h2 id="benefits" class="large-header">Warum Ocelot.Social?</h2>

<div class="benefits-grid">
  <figure>
    <HopeIcon icon="fa-solid fa-face-smile" />
    <figcapture>
      <h3>Freie Open-Source-Software</h3>
      Du kannst die Software nutzen und weiterentwickeln.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-people-group" />
    <figcapture>
      <h3>Für alle</h3>
      Ocelot.social eignet sich für die Zivilgesellschaft sowie für staatliche und private Organisationen.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-filter" />
    <figcapture>
      <h3>Selbstbestimmtes Filtern</h3>
      Du wählst selber, welchen Inhalt du siehst – keine undurchschaubare Auswahl.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-gears" />
    <figcapture>
      <h3>Konfigurierbar</h3>
      Als Betreiber kannst du das Design und die Funktionen nach deinen Wünschen einstellen.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-code" />
    <figcapture>
      <h3>Erweiterbar</h3>
      Neue Funktionen können hinzuprogrammiert werden, die allen zugute kommen.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-up-right-and-down-left-from-center" />
    <figcapture>
      <h3>Skalierbar</h3>
      Dank neuster Technik kannst du die Software für alle Netzwerkgrößen einsetzen.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="home" />
    <figcapture>
      <h3>Flexibles Hosting</h3>
      Du kannst dein Netzwerk selber hosten oder von deinem Dienstleister hosten lassen.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-hand-middle-finger" />
    <figcapture>
      <h3>Deine eigenen Regeln</h3>
      Bestimme die Nutzungsbedingungen für dein Netzwerk selber.
    </figcapture>
  </figure>
  <figure>
    <HopeIcon icon="fa-solid fa-shuttle-space" />
    <figcapture>
      <h3>Neueste Technologie</h3>
      Die Software ist technologisch am Puls der Zeit – flexibel, zuverlässig, performant.
    </figcapture>
  </figure>
</div>

<h2 id="feature-headline" class="large-header">Wichtigste Funktionen</h2>

<div class="image-grid">
  <figure>
    <img src="./assets/login.png" />
    <figcapture>
        Login
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/newsfeed.png" />
    <figcapture>
        Beitragsübersicht (Newsfeed)
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/single-post.png" />
    <figcapture>
        Einzelner Beitrag
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/single-event.png" />
    <figcapture>
        Einzelne Veranstaltung
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/user-profile.png" />
    <figcapture>
        Nutzerprofil
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/user-settings.png" />
    <figcapture>
        Einstellungen des Nutzerkontos
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/group-list.png" />
    <figcapture>
        Gruppenübersicht
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/group-profile.png" />
    <figcapture>
        Gruppenprofil
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/1-to-1-chat.png" />
    <figcapture>
        Eins-zu-Eins-Chat
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/notifications.png" />
    <figcapture>
        Benachrichtigungen
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/map.png" />
    <figcapture>
        Landkarte
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/language-selection.png" />
    <figcapture>
        Mehrsprachigkeit
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/moderation.png" />
    <figcapture>
        Moderation
    </figcapture>
  </figure>
  <figure>
    <img src="./assets/system-administration.png" />
    <figcapture>
        Systemverwaltung
    </figcapture>
  </figure>
</div>

<div class="all-features">
  <a id="hero-button" href="/de/features/">
    <Button>
      Alle Funktionen ansehen
    </Button>
  </a>
</div>

<h2 class="large-header">Probier es aus</h2>

<!--
| E-Mail                  | Passwort | Benutzerrolle   |
| :---                    | :---     | :---            |
| `user@example.org`      | 1234     | normaler Nutzer |
| `moderator@example.org` | 1234     | Moderator       |
| `admin@example.org`     | 1234     | Administrator   |
-->

<div class="center">
  <p>
    Teste die Live-Demo auf
    <a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
    mit den folgenden Zugangsdaten:
  </p>

  <table><thead><tr><th style="text-align:left;">E-Mail</th><th style="text-align:left;">Passwort</th><th style="text-align:left;">Benutzerrolle</th></tr></thead><tbody><tr><td style="text-align:left;"><code>user@example.org</code></td><td style="text-align:left;">1234</td><td style="text-align:left;">normaler Nutzer</td></tr><tr><td style="text-align:left;"><code>moderator@example.org</code></td><td style="text-align:left;">1234</td><td style="text-align:left;">Moderator</td></tr><tr><td style="text-align:left;"><code>admin@example.org</code></td><td style="text-align:left;">1234</td><td style="text-align:left;">Administrator</td></tr></tbody></table>
</div>

<h2 class="large-header">Loslegen</h2>

<div class="center">
  <p>
    <i>Ocelot.social</i> kannst du auf einem eigenen Server hosten oder es hosten lassen.  
    Schau dir an, welche Möglichkeiten es gibt:<br>
  </p>
  <a id="hero-button" href="/de/get-started/">
    <Button>
      Los geht's
    </Button>
  </a>
</div>

<!-- ## Testimonials

XXX -->

<h2 class="large-header">Spenden</h2>

<div class="center">
  <p>
    Die Software des Netzwerks ist frei verfügbar – Betrieb, Unterhalt und Weiterentwicklung kosten hingegen Geld.
  </p>
  <p>
    Der Verein <a href="https://busfaktor.org/de/" target="_blank">busFaktor() e.V.</a> koordiniert und fördert die Programmierung von <i>ocelot.social</i>.
    Unterstütze die Nachhaltigkeit  der Software und deren Netzwerke gerne mit einer Einmal- oder Dauerspende:
  </p>
  <a href="https://busfaktor.org/de/spenden" target="_blank">
    <Button class="donate-button">
      Hier spenden
    </Button>
  </a>
</div>

<h2 class="large-header">Kontakt</h2>

<div class="center">
  <p>
    Hast du Fragen, Anregungen oder Wünsche, nehme gerne <a href="/de/contact/" target="_blank">Kontakt</a> mit uns auf.
  </p>
</div>