dogfather-universe/workspace/unsere-seiten.html

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Unsere Seiten · Der Treff</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609191035" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609191035" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609191035" />
<link rel="stylesheet" href="assets/css/start.css?v=202609191035" />
<link rel="stylesheet" href="assets/css/module.css?v=202609191035" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609191035" />
<link rel="stylesheet" href="assets/css/unsere-seiten.css?v=202609191035" />
</head>

<body class="start">

<div class="schleier" aria-hidden="true"></div>

<header class="kopfleiste">
  <button type="button" class="zurueck-knopf" id="zurueck" hidden>
    <svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14.5 5.5 8 12l6.5 6.5" />
    </svg>
    <span class="zurueck-knopf__text">Zurück</span>
  </button>
  <p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Der&nbsp;Treff</a> · Unsere Seiten</span></p>
  <div class="kopfleiste__rechts">
    <span class="wer" id="wer">…</span>
    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
  </div>
</header>

<main class="inhalt inhalt--breit">

  <section class="kopf-zeile">
    <div>
      <p class="marke">Der Treff · Unsere Seiten</p>
      <h1 class="titel">Unsere Seiten</h1>
      <p class="unterzeile">
        Was es außerhalb vom Treff noch gibt — und wo dein Rabatt wartet.
      </p>
    </div>
  </section>

  <!-- ==================================================================
       WARUM DIESE SEITE EXISTIERT (19.09.2026)

       Filipe: "ich brauch im community bereich noch eine kachel, die
       wenn man drauf drückt dan kacheln hat die auf die website von
       dogfather universe geht ... und die shop site von vanvan."

       ZWEI GRUENDE, WARUM DAS EINE EIGENE SEITE IST und nicht zwei
       Kacheln direkt in der Uebersicht:

       1. Die sieben Kacheln im Treff fuehren alle NACH INNEN -- auf
          ein Brett, auf dem man liest und schreibt. Zwei Kacheln
          dazwischen, die den Browser verlassen, waeren ein Bruch: Man
          tippt auf etwas, das aussieht wie ein Brett, und ist
          ploetzlich woanders. Eine eigene Seite sagt vorher, was
          passiert.

       2. Ein Rabattcode braucht Platz. Er muss gross, kopierbar und
          mit seinen Bedingungen dastehen -- sonst wird er falsch
          erinnert und jemand steht enttaeuscht an der Kasse.

       DER CODE IST ECHT UND WURDE NACHGESEHEN, nicht abgeschrieben:
       Er steht in partnercodes.json von VanVans Shop als DOGI10, 10
       Prozent, aktiv, ohne Ablaufdatum, mit der Notiz "Zum weitergeben
       an Community, Zuschauer, Freunde etc." -- und mit
       "giltAufSale": false. Genau deshalb steht der Satz zu den
       reduzierten Artikeln hier drunter. Ein Rabatt, der an der Kasse
       anders ausfaellt als angekuendigt, kostet mehr Vertrauen, als
       er Umsatz bringt.

       Der zweite Code in derselben Datei ist als "Nur fuer Filipe
       persoenlich" vermerkt und steht deshalb NIRGENDWO auf dieser
       Seite.
       ============================================================== -->

  <div class="seiten-gitter">

    <!-- ---- DOGFATHER UNIVERSE ------------------------------------ -->
    <article class="aussen aussen--dogi" data-weg="https://dogfather-universe.com/">
      <div class="aussen__schein" aria-hidden="true"></div>
      <!-- DIE SCHWEBENDEN LOGOS (19.09.2026).

           Filipe: "die sollen paar mal sein in der kacheln und so wie
           schweben, sich ganz leicht bewegen."

           VIER STUECK, VERSCHIEDEN GROSS UND VERSCHIEDEN SCHNELL. Alle
           gleich waere ein Muster, und ein Muster sieht nach Tapete
           aus. Verschieden heisst: Man nimmt Tiefe wahr, ohne dass
           etwas ablenkt.

           Sie tragen KEINE Farbe: Das PNG ist eine Maske, die Farbe
           kommt aus dem CSS (--aussen-ton). Deshalb passt dasselbe
           Logo in jede Kachel, egal welchen Ton sie hat.

           `aria-hidden`, weil sie nichts sagen -- wer die Seite
           vorlesen laesst, soll nicht viermal "Logo" hoeren. -->
      <div class="logo-feld" aria-hidden="true">
        <span class="logo-feld__stueck" data-n="1"></span>
        <span class="logo-feld__stueck" data-n="2"></span>
        <span class="logo-feld__stueck" data-n="3"></span>
        <span class="logo-feld__stueck" data-n="4"></span>
      </div>
      <div class="aussen__kopf">
        <span class="aussen__zeichen" aria-hidden="true">
          <svg viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="8.4" />
            <path d="M3.6 12h16.8M12 3.6c2.4 2.5 2.4 13.9 0 16.8M12 3.6c-2.4 2.5-2.4 13.9 0 16.8" />
          </svg>
        </span>
        <div>
          <p class="aussen__marke">Die Website</p>
          <h2 class="aussen__titel">DogFather&nbsp;Universe</h2>
        </div>
      </div>
      <p class="aussen__satz">
        Die Heimat von DogFather als Streamer, der HasiDog-Community
        und seiner Arbeit als Manager bei Spicy Media.
      </p>

      <!-- WAS ES DORT GIBT -- ABGELESEN, NICHT AUSGEDACHT.
           Die Punkte stammen aus der Navigation von
           dogfather-universe.com (streamplan.html, hasidog.html,
           zeitreise.html, stimmen.html). Eine erfundene Aufzählung
           wäre beim ersten Klick als Lüge aufgeflogen.

           UND SIE SIND KEINE LINKS: Die ganze Karte führt zur
           Startseite; einzelne Links darin würden diesen Klick
           zerschneiden und wären auf dem Handy außerdem zu kleine
           Ziele. -->
      <ul class="aussen__liste">
        <li>Der Streamplan – wann was läuft</li>
        <li>HasiDog: die Community rund um Dogi</li>
        <li>Die Zeitreise durch alles Bisherige</li>
        <li>Stimmen von Leuten, die dabei waren</li>
      </ul>

      <p class="aussen__weg">
        <span class="aussen__adresse">dogfather-universe.com</span>
        <a class="aussen__knopf" href="https://dogfather-universe.com/"
           target="_blank" rel="noopener noreferrer">Seite öffnen&nbsp;→</a>
      </p>
    </article>

    <!-- ---- VANVANS SHOP ------------------------------------------ -->
    <article class="aussen aussen--shop" data-weg="https://vans-diy-bastelbedarf.com/">
      <div class="aussen__schein" aria-hidden="true"></div>
      <div class="logo-feld" aria-hidden="true">
        <span class="logo-feld__stueck" data-n="1"></span>
        <span class="logo-feld__stueck" data-n="2"></span>
        <span class="logo-feld__stueck" data-n="3"></span>
        <span class="logo-feld__stueck" data-n="4"></span>
      </div>
      <div class="aussen__kopf">
        <span class="aussen__zeichen" aria-hidden="true">
          <svg viewBox="0 0 24 24">
            <path d="M5 8h14l-1.1 11.2a1.4 1.4 0 0 1-1.4 1.3H7.5a1.4 1.4 0 0 1-1.4-1.3z" />
            <path d="M9 8V6.4a3 3 0 0 1 6 0V8" />
          </svg>
        </span>
        <div>
          <p class="aussen__marke">Der Shop</p>
          <!-- NAME UND BESCHREIBUNG STAMMEN VON DER SEITE SELBST
               (og:site_name und meta description). Meine erste Fassung
               hieß „Van's DIY Bastelbedarf" und nannte „Perlen,
               Anhänger, Werkzeug" — beides ausgedacht und beides
               falsch. Der Laden heißt mit „&", und er verkauft vor
               allem Handgemachtes. -->
          <h2 class="aussen__titel">Van's&nbsp;DIY &amp; Bastelbedarf</h2>
        </div>
      </div>
      <p class="aussen__satz">
        VanVans eigener Laden: handgemachte Häkelwerke, Plushies,
        Schmuck und Bastelzubehör.
      </p>

      <!-- Der Rabatt. Eigener Block, weil er das Wichtigste auf
           dieser Karte ist -- und kopierbar, weil niemand einen Code
           abtippen soll, den er sich vorher merken muss. -->
      <div class="gutschein">
        <p class="gutschein__zeile">
          <span class="gutschein__prozent">10&nbsp;%</span>
          <span class="gutschein__wofuer">für alle aus der Community</span>
        </p>
        <button type="button" class="gutschein__code" id="code-knopf"
                data-code="DOGI10"
                aria-label="Rabattcode DOGI10 kopieren">
          <span class="gutschein__wort">DOGI10</span>
          <span class="gutschein__hinweis" id="code-hinweis">tippen zum Kopieren</span>
        </button>
        <p class="gutschein__klein">
          Beim Bestellen im Feld für den Gutscheincode eintragen.
          Gilt nicht auf bereits reduzierte Artikel.
        </p>
      </div>

      <p class="aussen__weg">
        <span class="aussen__adresse">vans-diy-bastelbedarf.com</span>
        <a class="aussen__knopf" href="https://vans-diy-bastelbedarf.com/"
           target="_blank" rel="noopener noreferrer">Shop öffnen&nbsp;→</a>
      </p>
    </article>

  </div>

  <p class="seiten-fuss">
    Beide Seiten öffnen sich in einem neuen Fenster — der Treff bleibt
    also offen.
  </p>

</main>

<script src="assets/js/wahl.js?v=202609191035" defer></script>
<script src="assets/js/bereiche.js?v=202609191035" defer></script>
<script src="assets/js/kopf.js?v=202609191035" defer></script>
<script src="assets/js/unsere-seiten.js?v=202609191035" defer></script>
</body>
</html>