dogfather-universe/workspace/start.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>Dogfather Universe · Creator Workspace</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#0674b9" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png" />
<link rel="stylesheet" href="assets/css/gate.css?v=202609052040" />
<link rel="stylesheet" href="assets/css/start.css?v=202609052040" />
</head>

<body class="start">

<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
     Ecken, siehe start.css). Ein eigenes Element statt eines dritten
     Pseudo-Elements -- body hat nur ::before und ::after. -->
<div class="schleier" aria-hidden="true"></div>

<header class="kopfleiste">
  <p class="marke"><span class="marke__text">Dogfather&nbsp;Universe · Creator&nbsp;Workspace</span></p>
  <div class="kopfleiste__rechts">
    <span class="wer" id="wer">…</span>
    <button type="button" class="abmelden" id="abmelden">Abmelden</button>
  </div>
</header>

<!-- Volle Breite: Bei 880 px waren drei Kacheln je 285 px breit, und in
     den groesseren Schriften brach der Text ab. Mehr Breite ist hier die
     ehrlichere Loesung als kleinere Schrift. -->
<main class="inhalt inhalt--breit">
  <!-- Die Begrüßung sagt jetzt etwas. "Angemeldet" stand vorher da, obwohl
       man das oben rechts ohnehin sieht – die Zeile war verschenkt. An
       ihrer Stelle steht der Tag, die Kalenderwoche und, wenn der Tag
       einen Charakter hat, ein kurzes Wort dazu (neue Woche, Endspurt,
       Wochenende). Darunter die Lage in einem Satz. -->
  <section class="willkommen">
    <p class="marke willkommen__datum">
      <span id="datum">…</span>
      <span class="willkommen__marker" id="tagesmarker" hidden></span>
    </p>
    <div class="willkommen__reihe">
      <span class="willkommen__plakette" id="plakette" aria-hidden="true"></span>
      <div class="willkommen__text">
        <h1 class="titel" id="gruss">Willkommen</h1>
        <p class="unterzeile">
          <span id="rollentext">…</span>
          <span class="willkommen__lage" id="lage" hidden></span>
        </p>
      </div>
    </div>
  </section>

  <!-- Was ist dran? Steht VOR den Zahlen, weil es der Unterschied
       zwischen "wie viel liegt an" und "was muss ich jetzt tun" ist.
       Bleibt komplett weg, wenn nichts anliegt. -->
  <!-- DER TAGESBLICK (05.09.2026).
       Wunsch: "eine ganze kachel, links die sachen die du da siehst und
       rechts die termine vom tag, in der mitte gesplittet."

       WARUM DIE BEIDEN ZUSAMMENGEHÖREN: Links steht, was zu TUN ist,
       rechts, was schon FESTSTEHT. Zusammen ergeben sie die einzige
       Frage, die man morgens hat -- wie sieht mein Tag aus. Getrennt
       untereinander musste man scrollen, um sie zu beantworten.

       Eine Kachel und nicht zwei nebeneinander: Zwei Kacheln mit Rand
       und Abstand lesen sich als zwei Themen. Der Trenner in der Mitte
       sagt "zwei Seiten derselben Sache".

       <section> mit Überschrift je Hälfte, damit ein Vorleseprogramm
       die beiden Bereiche ansagen und anspringen kann -- ein Raster
       allein ist für ihn nur eine Reihenfolge. -->
  <section class="tagesblick" id="dran-block" hidden
           aria-labelledby="tagesblick-titel">
    <h2 class="tagesblick__titel" id="tagesblick-titel">Dein Tag</h2>

    <div class="tagesblick__seite tagesblick__seite--dran" id="dran-seite">
      <div class="klapp-kopf tagesblick__kopf">
        <p class="feldschild" id="dran-titel">Was ist dran</p>
        <button type="button" class="knopf-still" id="dran-schalter"
                aria-expanded="false" aria-controls="dran" hidden>
          <span id="dran-schalter-text">Alle zeigen</span>
          <svg class="klapp-pfeil" viewBox="0 0 24 24" aria-hidden="true">
            <path d="m6 9.5 6 6 6-6" />
          </svg>
        </button>
      </div>
      <ul class="dran__liste" id="dran" data-klapp="zu"
          aria-labelledby="dran-titel"></ul>
      <!-- Steht nur da, wenn wirklich nichts offen ist. Eine leere
           Hälfte ohne Wort sieht aus wie ein Ladefehler. -->
      <p class="tagesblick__leer" id="dran-leer" hidden>
        Nichts offen – der Tag ist frei von Rückständen.
      </p>
    </div>

    <div class="tagesblick__seite tagesblick__seite--heute" id="heute-seite">
      <div class="klapp-kopf tagesblick__kopf">
        <p class="feldschild" id="heute-titel">Heute</p>
        <a class="knopf-still tagesblick__mehr" href="kalender.html">
          <span>Kalender</span>
          <svg class="klapp-pfeil tagesblick__mehr-pfeil" viewBox="0 0 24 24" aria-hidden="true">
            <path d="m9.5 6 6 6-6 6" />
          </svg>
        </a>
      </div>
      <ol class="tagesliste" id="tagestermine" aria-labelledby="heute-titel"></ol>
      <p class="tagesblick__leer" id="heute-leer" hidden>
        Heute steht nichts an.
      </p>
    </div>
  </section>

  <!-- Zahlen zuerst: Das Konzept will "Prioritäten statt Datenfriedhof".
       Sind alle sechs null, steht dort ein Satz statt sechs Nullen. -->
  <section class="zahlen-block" id="zahlen-block">
    <p class="feldschild">Deine Aufgaben</p>
    <ul class="zahlen" id="zahlen"></ul>
    <!-- Kein Grau-in-Grau, wenn alles erledigt ist: Ein leerer Posteingang
         ist eine gute Nachricht und darf auch so aussehen. -->
    <div class="zahlen-leer" id="zahlen-leer" hidden>
      <span class="zahlen-leer__haken" aria-hidden="true">
        <svg viewBox="0 0 24 24"><path d="m5 12.6 4.4 4.4L19 7.4" /></svg>
      </span>
      <span>
        <strong>Nichts offen.</strong>
        <span class="zahlen-leer__still">Alles abgearbeitet – gönn dir was.</span>
      </span>
    </div>
  </section>

  <!-- Die Bereiche, in drei Gruppen: was man täglich braucht, was zu
       einem Creator gehört, was den Laden am Laufen hält. Aufgebaut von
       start.js – dort steht auch, warum. -->
  <div id="bereiche"></div>

  <p class="fuss">
    „Was ist dran" führt keine eigene Liste, sondern zeigt, was in den Bereichen
    schon liegt – ein Punkt verschwindet von selbst, sobald die Sache erledigt ist.
    Angezeigt wird nur, was du ohnehin sehen darfst.
  </p>
</main>

<script src="assets/js/wahl.js?v=202609052040" defer></script>
<script src="assets/js/bereiche.js?v=202609052040" defer></script>
<script src="assets/js/kopf.js?v=202609052040" defer></script>
<script src="assets/js/glocke.js?v=202609052040" defer></script>
<script src="assets/js/start.js?v=202609052040" defer></script>
</body>
</html>