dogfather-universe/workspace/support.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>Support · Spicy &amp; Dogi</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=202609301052" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609301052" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609301052" />
<link rel="stylesheet" href="assets/css/start.css?v=202609301052" />
<link rel="stylesheet" href="assets/css/support.css?v=202609301052" />
<link rel="stylesheet" href="assets/css/module.css?v=202609301052" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609301052" />
</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">Creator&nbsp;Workspace</a> · Support</span></p>
  <div class="kopfleiste__rechts">
    <span class="wer" id="wer">…</span>
    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
  </div>
</header>

<!-- `support-seite` (25.09.2026): Filipe wollte fuer diese Kachel
     einen eigenen Stil in Babyblau mit Lila. Die Klasse traegt ihn --
     alle Regeln dazu haengen daran und gelten damit NUR hier. Ohne
     sie muesste man dieselben Farben an dreissig Stellen einzeln
     setzen, und die einunddreissigste waere vergessen. -->
<main class="inhalt inhalt--breit support-seite">

  <section class="kopf-zeile">
    <div>
      <p class="marke">Support</p>
      <h1 class="titel" id="seiten-titel">Etwas stimmt nicht?</h1>
      <p class="unterzeile" id="seiten-unter">
        Schreib es hin, häng ein Bild dran, fertig. DogFather und die
        rechte Hand kümmern sich darum.
      </p>
    </div>
  </section>

  <!-- ==================================================================
       ZWEI SEITEN, EINE DATEI (24.09.2026)

       Filipe: „bei dogfather und der rechten hand soll die kachel
       anders gebaut sein weil die sind die die sich um die probleme
       kümmern."

       Beide Ansichten stehen hier, und support.js blendet die aus, die
       nicht gilt. Zwei getrennte Dateien wären die naheliegende
       Aufteilung — und die zweite wäre die, in der ein Umbau vergessen
       wird. Dieselbe Entscheidung wie bei hilfe.html.

       Was der SERVER liefert, entscheidet das ohnehin: Wer nicht zur
       Leitung gehört, bekommt fremde Meldungen gar nicht erst. Das
       Ausblenden hier ist Aufräumen, keine Sicherung.
       ================================================================== -->

  <!-- ---------- MELDEN: sehen und benutzen alle --------------------- -->
  <section class="s-melden" id="melden-block">
    <h2 class="s-titel">Was ist los?</h2>
    <form id="melden" novalidate>
      <label class="s-feld">
        <span class="s-feld__schild">Beschreib es kurz</span>
        <textarea id="text" rows="4" maxlength="2000"
          placeholder="z. B. Auf der Aufgabenseite lässt sich der Haken nicht setzen – der Knopf reagiert nicht."></textarea>
      </label>

      <!-- EIN BILD, NICHT FÜNF. Wer drei Bildschirmfotos anhängt,
           erklärt damit nichts besser — er verschiebt die Arbeit nur
           zu dem, der sie ansehen muss. -->
      <div class="s-bild">
        <input type="file" id="bild" accept="image/png,image/jpeg,image/webp,image/gif" hidden />
        <button type="button" class="schritt" id="bild-waehlen">Bild anhängen</button>
        <span class="s-bild__name" id="bild-name"></span>
        <button type="button" class="schritt" id="bild-weg" hidden>Bild weg</button>
      </div>
      <div class="s-vorschau" id="vorschau" hidden>
        <img id="vorschau-bild" alt="Vorschau des angehängten Bildes" />
      </div>

      <p class="fehler" id="melden-fehler" role="alert" aria-live="polite"></p>
      <div class="s-knopfreihe">
        <button type="submit" class="knopf" id="senden">Abschicken</button>
        <span class="s-hinweis" id="melden-hinweis"></span>
      </div>
    </form>
  </section>

  <!-- ---------- MEINE MELDUNGEN: für alle außer der Leitung --------- -->
  <section class="s-meine" id="meine-block" hidden>
    <h2 class="s-titel">Deine Meldungen <span class="s-zahl" id="meine-zahl">0</span></h2>
    <div id="meine-liste" aria-live="polite"></div>
  </section>

  <!-- ---------- DER EINGANG: nur DogFather und die rechte Hand ------ -->
  <section class="s-eingang" id="eingang-block" hidden>
    <div class="s-eingang__kopf">
      <h2 class="s-titel">Eingang</h2>
      <!-- Die Zahlen stehen VOR der Liste, nicht darunter: Wer
           hereinkommt, will zuerst wissen, ob etwas liegen geblieben
           ist — und erst dann, was genau. -->
      <div class="s-bilanz" id="bilanz"></div>
    </div>
    <div class="s-filter" id="filter" role="group" aria-label="Nach Stand filtern"></div>
    <p class="fehler" id="eingang-fehler" role="alert" aria-live="polite"></p>
    <div id="eingang-liste" aria-live="polite"></div>
  </section>

</main>

<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und
     kopf.js liest daraus die Leitungsrollen. Ohne sie stuerzt jede
     Seite mit der Meldung „Cannot read properties of undefined
     (reading 'LEITUNG')" ab -- gemessen am 24.09.2026, als diese
     Zeile beim Anlegen der Seite fehlte. Die Kopfleiste kam
     trotzdem, deshalb sah man es nur in der Browserkonsole. -->
<script src="assets/js/bereiche.js?v=202609301052" defer></script>
<!-- wahl.js gehoert zu kopf.js: Der Sicht-Umschalter in der
     Kopfleiste baut daraus seine Liste. pruef-css-klassen setzt das
     seit dem 07.09.2026 durch -- damals fehlte es auf chat.html und
     uebersicht.html, und heute hier. -->
<script src="assets/js/wahl.js?v=202609301052" defer></script>
<script src="assets/js/nachfrage.js?v=202609301052" defer></script>
<script src="assets/js/installieren.js?v=202609301052" defer></script>
<script src="assets/js/kopf.js?v=202609301052" defer></script>
<script src="assets/js/glocke.js?v=202609301052" defer></script>
<script src="assets/js/support.js?v=202609301052" defer></script>
</body>
</html>