dogfather-universe/workspace/crew-index.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>Anmeldung · Team Dogi</title>
<meta name="description" content="Privater Arbeitsbereich für DogFather und die Modis." />
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
     Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
     heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
     Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
     eine Flaeche sind statt zweier. -->
<meta name="theme-color" content="#06090f" />

<!-- Die Bühne ist der erste Eindruck. Ohne diesen Hinweis lädt der Browser sie erst,
     nachdem er das CSS gelesen hat - das kostet spürbar Zeit. Quer- und Hochformat
     sind getrennt, damit das Handy nicht die große Fassung zieht.

     Hier steht bewusst WebP und nicht AVIF, obwohl die AVIF-Fassungen erzeugt
     werden und rund ein Drittel kleiner wären: Der ausliefernde Server läuft auf
     Express 4, dessen `send` eine alte MIME-Tabelle ohne AVIF mitbringt. Die
     Dateien kämen als application/octet-stream an und würden wegen des
     nosniff-Headers vom Browser verweigert - die Bühne bliebe leer. Sobald der
     Workspace einen eigenen Server bekommt, kann AVIF wieder eingeschaltet
     werden (die Dateien liegen bereit). -->
<link rel="preload" as="image" href="assets/img/buehne/crew-gate-1920.webp"
      type="image/webp" media="(min-width: 900px)" />
<link rel="preload" as="image" href="assets/img/buehne/crew-gate-hoch-580.webp"
      type="image/webp" media="(max-width: 899px)" />

<link rel="icon" type="image/png" href="/assets/img/app-symbole/crew-32.png?v=202609101459" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/crew-180.png?v=202609101459" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609101459" />
</head>

<body class="gate gate--crew">

<!-- ====================================================================
     DIE DREI ZEICHEN DIESER WAND (10.09.2026)

     Filipe: "3 rollen. dogfather. rechte hand und modis."

     Von den fuenf Zeichen der anderen Wand bleibt nur der Husky -- die
     uebrigen gehoeren zu Rollen, die es hier nicht gibt, und ihre
     Namen haetten im Quelltext nichts verloren.

     ZWEIMAL DERSELBE HUSKY, und das ist Absicht: Filipe am 09.09.2026
     zum Rollenbild: "das modi symbol soll das gleiche sein wie bei
     dogfather." Unterschieden wird ueber Name und Farbe, nicht ueber
     das Zeichen -- so wie `profil` auf der Startseite ohnehin schon
     zweimal steht.

     DIE PFOTE fuer die Stellvertretung ist neu. Sie ist das Zeichen,
     das am naechsten an "rechte Hand" liegt, ohne eine Hand zu sein --
     eine menschliche Hand waere in diesem Zeichensatz der einzige
     Fremdkoerper. Vier Zehen und ein Ballen tragen bei 22 px, weil es
     fuenf klar getrennte Flaechen sind und keine Innenzeichnung.
     ================================================================= -->
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true"><defs>

  <!-- Der Husky ist ein FOTO, kein Pfad. Der Filter zieht ihn auf zwei
       Toene zusammen (dunkles Blaugrau -> Silber), damit er neben
       gezeichneten Zeichen nicht wie ein Fremdkoerper wirkt. -->
  <filter id="rs-husky-duo" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.165 0.910"/>
      <feFuncG type="table" tableValues="0.212 0.933"/>
      <feFuncB type="table" tableValues="0.267 0.965"/>
    </feComponentTransfer>
  </filter>
  <g id="r-husky">
    <image href="assets/img/marke-husky.webp" x="0" y="0" width="24" height="24"
           preserveAspectRatio="xMidYMid meet" filter="url(#rs-husky-duo)"/>
    <circle fill="#7ec8f2" cx="7.73" cy="12.1" r="1.05"/>
    <circle fill="#16232f" cx="7.73" cy="12.1" r="0.52"/>
    <circle fill="#ffffff" opacity=".85" cx="7.5" cy="11.85" r="0.2"/>
  </g>

  <!-- Der Ton der Pfote ist der Modi-Ton (#5f8a9f) nach oben
       aufgehellt: dasselbe Blau wie das App-Symbol, nur heller, damit
       es bei 22 px gegen den dunklen Grund steht. -->
  <linearGradient id="rs-pfote" x1="0" y1="0" x2=".35" y2="1">
    <stop offset="0" stop-color="#cfe4ef"/>
    <stop offset=".55" stop-color="#8fb6c8"/>
    <stop offset="1" stop-color="#5f8a9f"/>
  </linearGradient>
  <g id="r-pfote">
    <ellipse fill="url(#rs-pfote)" cx="12" cy="15.9" rx="5.3" ry="4.4"/>
    <ellipse fill="url(#rs-pfote)" cx="6.5" cy="10.1" rx="2" ry="2.6"
             transform="rotate(-20 6.5 10.1)"/>
    <ellipse fill="url(#rs-pfote)" cx="10.1" cy="7.4" rx="2.05" ry="2.7"/>
    <ellipse fill="url(#rs-pfote)" cx="13.9" cy="7.4" rx="2.05" ry="2.7"/>
    <ellipse fill="url(#rs-pfote)" cx="17.5" cy="10.1" rx="2" ry="2.6"
             transform="rotate(20 17.5 10.1)"/>
    <!-- Ein Lichtstreifen oben links auf dem Ballen -- ohne ihn ist er
         eine flache Flaeche. -->
    <path fill="rgba(255,255,255,.32)"
          d="M8.4 13.6c1-1.3 2.6-2 4.2-1.9-1.7.5-3 1.6-3.6 2.9z"/>
  </g>
</defs></svg>


<!-- ---------- Bühne: Bild + Schleier ---------------------------------- -->
<div class="buehne" aria-hidden="true">
  <picture>
    <!-- BIS 2560 PIXEL (07.09.2026). Vorher endete die Reihe bei 1600 --
         auf einem 2550 px breiten Schirm rechnete der Browser das Bild
         also um das 1,6-fache hoch, und jede Kante wurde weich. Genau
         das sah man als "nicht hochwertig", ohne es benennen zu koennen.
         Eine hoehere Bildguete haette daran nichts geaendert: Man kann
         keine Bildpunkte zurueckholen, die nie ausgeliefert wurden.
         Ueber srcset laedt trotzdem jeder nur die Stufe, die er
         braucht -- ein Handy weiterhin 32 KB. -->
    <source media="(min-width: 900px)" type="image/webp"
            srcset="assets/img/buehne/crew-gate-960.webp 960w,
                    assets/img/buehne/crew-gate-1280.webp 1280w,
                    assets/img/buehne/crew-gate-1600.webp 1600w,
                    assets/img/buehne/crew-gate-1920.webp 1920w,
                    assets/img/buehne/crew-gate-2560.webp 2560w" sizes="100vw" />
    <source type="image/webp"
            srcset="assets/img/buehne/crew-gate-hoch-440.webp 440w,
                    assets/img/buehne/crew-gate-hoch-580.webp 580w,
                    assets/img/buehne/crew-gate-hoch-900.webp 900w" sizes="100vw" />
    <img class="buehne__bild" src="assets/img/buehne/crew-gate-1280.webp" alt=""
         width="1647" height="955" fetchpriority="high" decoding="async" />
  </picture>
  <div class="buehne__schleier"></div>
</div>

<!-- ---------- Tafel ----------------------------------------------------

     DER ANKER (06.09.2026). Im Motiv steht rechts eine LEERE TAFEL mit
     Neonrahmen -- dort gehoert die Anmeldekarte hinein, und zwar genau
     hinein, nicht ungefaehr.

     Das geht nur, wenn man weiss, wo die gemalte Tafel auf dem
     Bildschirm landet. Das Bild liegt mit `object-fit: cover` darunter;
     je nach Fensterform schneidet der Browser oben/unten oder
     links/rechts etwas ab. Dieser Anker rechnet genau dieselbe
     Cover-Geometrie noch einmal nach (siehe gate.css) -- er ist damit
     deckungsgleich mit dem Bild, und die Karte kann in Prozent des
     BILDES sitzen statt in Prozent des Fensters.

     Er faengt keine Klicks ab (pointer-events: none); nur die Karte
     darin ist bedienbar. -->
<div class="tafel-anker">
<main class="tafel" id="tafel">
  <div class="tafel__kante" aria-hidden="true"></div>

  <!-- 10.09.2026, Wunsch Filipe: hier soll alles auf DogFather und sein
       Team zugeschnitten sein.

       Zwei Namen und ein Zeichen dazwischen -- nebeneinander, nicht
       uebereinander. Dogi steht hier nicht ueber den Modis, sie machen
       das zusammen.

       Das "x" steht als eigenes Element, damit es kleiner und in der
       Zwischenfarbe gesetzt werden kann -- so liest man zwei Namen und
       ein Zeichen dazwischen, nicht drei gleich laute Wörter. Es trägt
       aria-hidden nicht: Vorgelesen wird "DogFather x Team Dogi", und
       genau so spricht man es auch aus. -->
  <header class="kopf">
    <p class="marke marke--paar">
      <span class="marke__dogi">DogFather</span>
      <span class="marke__x">×</span>
      <span class="marke__crew">Team&nbsp;Dogi</span>
    </p>
    <h1 class="titel">Team&nbsp;Dogi</h1>
    <p class="unterzeile">Privater Bereich für DogFather und die Modis.</p>
  </header>

  <div class="rollen" role="radiogroup" aria-labelledby="rollen-schild">
    <p class="feldschild" id="rollen-schild">Womit meldest du dich an?</p>

    <button type="button" class="rolle" data-rolle="admin" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-husky"/></svg>
      <span class="rolle__text">
        <span class="rolle__name">DogFather</span>
        <span class="rolle__zusatz">Überblick &amp; Entscheidungen</span>
      </span>
    </button>

    <!-- Der Untertitel beschreibt eine AUFGABE, kein Recht -- dieselbe
         Ueberlegung wie auf der anderen Wand: Wer vor der Auswahl
         steht, fragt sich nicht, was er duerfte, sondern was er hier
         tut. Und er stellt niemanden ueber jemanden: "vertritt und
         koordiniert" ist eine Taetigkeit, kein Rang. -->
    <button type="button" class="rolle" data-rolle="hand" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-pfote"/></svg>
      <span class="rolle__text">
        <span class="rolle__name">Rechte Hand</span>
        <span class="rolle__zusatz">Vertritt und koordiniert</span>
      </span>
    </button>

    <button type="button" class="rolle" data-rolle="modi" role="radio" aria-checked="false">
      <svg class="rolle__zeichen" viewBox="0 0 24 24" aria-hidden="true"><use href="#r-husky"/></svg>
      <span class="rolle__text">
        <span class="rolle__name">Modi</span>
        <span class="rolle__zusatz">Chat, Live und eigene Aufgaben</span>
      </span>
    </button>
  </div>

  

  <form class="formular" id="formular" novalidate>
    <label class="feldschild" for="code">
      Persönlicher Zugangscode <span class="fuer" id="fuer" hidden></span>
    </label>

    <div class="feld">
      <input type="password" id="code" name="code" inputmode="text"
             autocomplete="current-password" spellcheck="false"
             placeholder="Code eingeben" aria-describedby="hinweis fehler" />
      <button type="button" class="feld__auge" id="auge"
              aria-label="Code anzeigen" aria-pressed="false">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path class="strich" d="M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12Z"/>
          <circle class="strich" cx="12" cy="12" r="2.9"/>
          <path class="strich durch" d="m4 20 16-16"/>
        </svg>
      </button>
    </div>

    <p class="hinweis" id="hinweis" hidden>Feststelltaste ist aktiv.</p>
    <p class="fehler" id="fehler" role="alert" aria-live="polite"></p>

    <button type="submit" class="knopf" id="knopf">
      <span class="knopf__text">Anmelden</span>
      <span class="knopf__laden" aria-hidden="true"></span>
    </button>
  </form>

  <p class="fuss">
    Verschlüsselte Verbindung · Zugriffe werden protokolliert
  </p>
</main>
</div>

<script src="assets/js/gate.js?v=202609101459" defer></script>
</body>
</html>