dogfather-universe/workspace/notizen.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>Notizen · Team 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=202609301127" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609301127" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609301127" />
<link rel="stylesheet" href="assets/css/start.css?v=202609301127" />
<link rel="stylesheet" href="assets/css/notizen.css?v=202609301127" />
<link rel="stylesheet" href="assets/css/module.css?v=202609301127" />
<link rel="stylesheet" href="assets/css/haus.css?v=202609301127" />
</head>

<body class="start" data-ton="46">

<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">Team&nbsp;Dogi</a> · Notizen</span></p>
  <div class="kopfleiste__rechts">
    <span class="wer" id="wer">…</span>
    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
  </div>
</header>

<!-- ======================================================================
     DER BLOCK (26.09.2026)

     Filipe: „ich will dass du das auch wie ein notizblock erstellst.
     ich will dass es übelst geil und einzigartig ist."

     ZWEI SPALTEN AUF DEM RECHNER, EINE AUF DEM HANDY. Links der
     Stapel, rechts das aufgeschlagene Blatt. Auf dem Handy wäre
     nebeneinander beides zu schmal; dort ist der Stapel die Seite,
     und ein Blatt legt sich darüber. Der Zurück-Knopf der Kopfleiste
     schließt es wieder — das ist die Geste, die jeder kennt.

     KEIN SPEICHERN-KNOPF. Nirgends. Wer einen Block aufschlägt und
     lostippt, drückt hinterher nicht auf „sichern"; er klappt ihn zu.
     Die Anzeige unten rechts sagt, was gerade passiert, und ist der
     einzige Ort, an dem das Thema überhaupt vorkommt.
     ====================================================================== -->
<main class="inhalt inhalt--breit notizblock" id="block">

  <!-- ---------- Die Kopfzeile der Seite ---------------------------- -->
  <section class="kopf-zeile n-kopf">
    <div>
      <p class="marke">Notizen</p>
      <h1 class="titel">Dein Block</h1>
      <p class="unterzeile">
        Schreib hinein, was dir einfällt. Es sichert sich von selbst —
        und niemand außer dir sieht es.
      </p>
    </div>
    <div class="n-kopf__griffe">
      <label class="n-suche" for="suche">
        <svg class="n-suche__zeichen" viewBox="0 0 24 24" aria-hidden="true">
          <circle cx="10.5" cy="10.5" r="6" />
          <path d="M15.2 15.2 20 20" />
        </svg>
        <input type="search" id="suche" class="n-suche__feld" placeholder="Suchen"
               autocomplete="off" spellcheck="false" />
      </label>
      <button type="button" class="knopf n-neu" id="neu">
        <span aria-hidden="true">+</span> Neues Blatt
      </button>
    </div>
  </section>

  <p class="fehler" id="fehler" role="alert" aria-live="polite" hidden></p>

  <div class="n-raum">

    <!-- ---------- Links: der Stapel ------------------------------- -->
    <aside class="n-stapel" id="stapel-spalte" aria-label="Deine Blätter">
      <div class="n-stapel__kopf">
        <h2 class="n-stapel__titel">Blätter <span class="n-zahl" id="anzahl">–</span></h2>
        <button type="button" class="n-korb-knopf" id="korb-auf" hidden>
          Papierkorb <span class="n-zahl" id="korb-zahl">0</span>
        </button>
      </div>
      <ol class="n-liste" id="liste" aria-live="polite"></ol>
      <p class="n-leer" id="leer" hidden>
        Noch nichts drauf. <button type="button" class="n-leer__knopf" id="leer-neu">Fang an</button>
      </p>
    </aside>

    <!-- ---------- Rechts: das aufgeschlagene Blatt ---------------- -->
    <section class="n-blatt" id="blatt" hidden aria-label="Das aufgeschlagene Blatt">

      <!-- Die Perforation. Reine Zierde, deshalb aria-hidden — sie
           sagt dem Auge „Block", einer Vorlesefunktion nichts. -->
      <div class="n-blatt__perforation" aria-hidden="true"></div>

      <header class="n-blatt__kopf">
        <h2 class="n-blatt__titel" id="blatt-titel">Ohne Titel</h2>
        <div class="n-blatt__griffe">
          <!-- Die Haken-Bilanz. Sie erscheint nur, wenn es welche
               gibt: Eine Null neben einer Notiz ohne Aufgaben wäre
               eine Zahl, die etwas behauptet. -->
          <span class="n-haken-stand" id="haken-stand" hidden></span>
          <button type="button" class="n-griff" id="anheften" aria-pressed="false"
                  title="Oben anheften">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M9 3.6h6l-.9 5.2 3.4 3.1H6.5l3.4-3.1z" />
              <path d="M12 11.9v8.5" />
            </svg>
            <span class="n-griff__text">Anheften</span>
          </button>
          <div class="n-farben" id="farben" role="group" aria-label="Papierfarbe"></div>
          <button type="button" class="n-griff n-griff--weg" id="wegtun" title="In den Papierkorb">
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M5.5 7h13" />
              <path d="M7.5 7V5.2h9V7" />
              <path d="M6.8 7.6 7.7 20h8.6l.9-12.4" />
            </svg>
            <span class="n-griff__text">Wegtun</span>
          </button>
        </div>
      </header>

      <!-- ==================================================================
           DAS BLATT SELBST — ein Schreibfeld mit einer Deckschicht

           Das Feld trägt den Text und den Cursor, sieht ihn aber
           nicht: `color: transparent`. Sichtbar ist die Deckschicht
           darüber, die denselben Text noch einmal zeichnet — nur mit
           Haken, Überschriften, Strichen und Links.

           WARUM DIESER UMWEG: Ein `contenteditable` kann all das
           direkt, bricht aber beim Einfügen aus fremden Programmen,
           beim Rückgängigmachen und bei jeder Tastatur, die über
           eine Zwischenzeile schreibt. Ein Schreibfeld tut nichts
           davon — es ist das Bauteil, das der Browser seit dreißig
           Jahren richtig hinbekommt.

           DAMIT DAS AUFGEHT, müssen beide Schichten auf den Pixel
           gleich fließen: gleiche Schrift, gleiche Zeilenhöhe,
           gleicher Innenabstand, gleicher Umbruch. Und die Auszeichnung
           darf die BREITE eines Zeichens nie ändern — kein Fettdruck,
           keine andere Schriftgröße, kein Sperren. Erlaubt sind nur
           Farbe, Durchstreichen, Schatten und Rahmen. Genau danach
           ist die Gestaltung gebaut, und pruef-notizen misst es nach.
           ================================================================== -->
      <div class="n-papier" id="papier">
        <div class="n-papier__deck" id="deck" aria-hidden="true"></div>
        <textarea class="n-papier__feld" id="feld" spellcheck="true"
                  autocomplete="off" autocapitalize="sentences"
                  aria-label="Text dieses Blattes"></textarea>
      </div>

      <footer class="n-blatt__fuss">
        <span class="n-stand" id="stand" aria-live="polite"></span>
        <span class="n-wann" id="wann"></span>
      </footer>
    </section>

    <!-- ---------- Der Papierkorb ---------------------------------- -->
    <section class="n-korb" id="korb" hidden aria-label="Papierkorb">
      <header class="n-korb__kopf">
        <h2 class="n-blatt__titel">Papierkorb</h2>
        <button type="button" class="knopf-still" id="korb-zu">Zurück zum Block</button>
      </header>
      <p class="n-korb__satz" id="korb-satz"></p>
      <ol class="n-liste n-liste--korb" id="korb-liste" aria-live="polite"></ol>
    </section>

  </div>
</main>

<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und kopf.js
     liest daraus die Leitungsrollen. -->
<script src="assets/js/bereiche.js?v=202609301127" defer></script>
<script src="assets/js/wahl.js?v=202609301127" defer></script>
<script src="assets/js/nachfrage.js?v=202609301127" defer></script>
<script src="assets/js/installieren.js?v=202609301127" defer></script>
<script src="assets/js/kopf.js?v=202609301127" defer></script>
<script src="assets/js/glocke.js?v=202609301127" defer></script>
<script src="assets/js/notizen.js?v=202609301127" defer></script>
</body>
</html>