dogfather-universe/workspace/assets/css/anleitung.css

/* =====================================================================
   anleitung.css — die Einweisung je Rolle (06.10.2026)
   =====================================================================

   VIER REGELN, DIE HIER ÜBERALL GELTEN:

   1. KEINE EIGENEN FARBEN. Jede Karte trägt den Ton ihrer echten
      Kachel (`data-ton`, gesetzt von anleitung.js). Eine eigene
      Farbwelt hier wäre eine zweite Wahrheit über dieselben Kacheln --
      und man würde die Anleitung nicht mehr mit der Startseite
      zusammenlesen können.

   2. DIE STUFE IST EIN WORT. Sie steht an jeder Karte als Text, nicht
      nur als Farbe. Ein Mensch, der Farben schlecht unterscheidet,
      läse die Seite sonst ohne ihre einzige Ordnung.

   3. MOBILE FIRST ALS REGEL, NICHT ALS ZAHL. Das Kartengitter bricht
      über `auto-fill` um, nicht über eine Schwelle in Pixeln. Eine
      feste Zahl ist eine Rechnung von gestern und wird beim nächsten
      zusätzlichen Element still falsch.

   4. NICHTS UNTER 11,5 PIXELN. Hausregel seit dem 01.09.2026,
      nachgemessen von pruef-css-klassen. Kleinster Wert hier: .78rem.
   ===================================================================== */

.an-seite {
  /* Der Abstand zwischen den großen Blöcken -- einmal gesetzt, überall
     benutzt. Drei verschiedene Abstände sind der Grund, warum eine
     Seite „unruhig" aussieht, ohne dass man sagen kann, woran es liegt. */
  --an-luft: 26px;
}

/* =====================================================================
   OHNE EIGENE FASSUNG (DogFather)
   ===================================================================== */
.an-ohne {
  margin: 18px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  background: var(--flaeche);
  color: var(--text-still);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 62ch;
}

/* =====================================================================
   DER FORTSCHRITT (Etappe 2)
   =====================================================================

   Er zählt nur die Ersten Schritte. Der Balken ist ein echtes
   `progress` -- damit bringt er die Ansage für Vorleseprogramme mit.
   Browser gestalten das Element unterschiedlich, deshalb werden beide
   Schreibweisen gesetzt (`::-webkit-progress-*` und `::-moz-*`); ohne
   sie steht in Firefox ein graues Kästchen in der Hausfarbe von 2010.
   ===================================================================== */
.an-stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 16px;
  padding: 12px 18px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
}

.an-stand__balken {
  flex: 1 1 180px;
  height: 8px;
  min-width: 140px;
  border: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-still) 22%, transparent);
  appearance: none;
}
.an-stand__balken::-webkit-progress-bar {
  background: color-mix(in srgb, var(--text-still) 22%, transparent);
  border-radius: 999px;
}
.an-stand__balken::-webkit-progress-value {
  background: var(--akzent);
  border-radius: 999px;
  transition: width var(--tempo, .18s);
}
.an-stand__balken::-moz-progress-bar {
  background: var(--akzent);
  border-radius: 999px;
}

.an-stand__satz {
  flex: 0 1 auto;
  margin: 0;
  font-size: .9rem;
  font-weight: 650;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* FERTIG IST EINE EIGENE AUSSAGE, nicht nur ein voller Balken. Der
   Satz wechselt, die Farbe verstärkt ihn nur -- Farbe nie allein. */
.an-stand[data-fertig="ja"] .an-stand__satz { color: var(--k-gut, #5fc99a); }
.an-stand[data-fertig="ja"] .an-stand__balken::-webkit-progress-value {
  background: var(--k-gut, #5fc99a);
}
.an-stand[data-fertig="ja"] .an-stand__balken::-moz-progress-bar {
  background: var(--k-gut, #5fc99a);
}

/* =====================================================================
   BLÖCKE
   =====================================================================

   JEDER TEXTBLOCK BEKOMMT EINE FLÄCHE (06.10.2026, nach dem ersten Bild).

   Der erste Entwurf setzte „In 60 Sekunden", „Erste Schritte",
   „Nicht deins" und „Dein Rhythmus" ohne Hintergrund auf die Seite.
   Auf dem Bild bei 412 px lief der Satz „Fast alles andere füllt deine
   Betreuung für dich" quer über das helle Wasserzeichen des
   Hintergrundbildes und war dort kaum zu lesen.

   Das ist kein Schönheitsfehler, sondern der Grund, warum im Haus
   JEDER Textträger `--flaeche` hat (`rgba(9,13,22,.89)`, also fast
   deckend): Die Startseite hat ein Foto im Hintergrund, und wie hell
   es an einer bestimmten Stelle ist, weiß niemand vorher. Ein
   Kontrast, der vom Bildausschnitt abhängt, ist kein Kontrast.

   Die Fase (`--fase`) statt eines Radius: dieselbe Form wie `.mz-kopf`
   und die übrigen großen Träger im Haus. */
.an-block {
  margin-top: var(--an-luft);
  padding: 16px 18px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
}

.an-block__titel {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
}

.an-leit {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  max-width: 68ch;
}

.an-saetze { margin: 0; padding: 0; list-style: none; }

.an-saetze__zeile {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-leise);
  max-width: 68ch;
}
/* Ein Punkt statt eines Aufzählungszeichens: Die drei Sätze sind keine
   Liste von Dingen, sondern drei Aussagen. Der Punkt gliedert, ohne zu
   zählen. */
.an-saetze__zeile::before {
  content: "";
  position: absolute;
  left: 4px; top: .62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--akzent);
  opacity: .75;
}

/* =====================================================================
   ERSTE SCHRITTE
   ===================================================================== */
.an-schritte {
  margin: 0;
  padding: 0 0 0 1.35em;
  display: grid;
  gap: 9px;
}

/* DIE ZEILE IST ZWEIGETEILT: links der Haken, rechts der Weg. Zwei
   Dinge, zwei Flächen -- wer auf den Namen tippt, will zur Kachel und
   nicht abhaken. */
.an-schritt {
  max-width: 68ch;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

/* ---------------------------------------------------------------------
   DER HAKEN

   Das echte Kästchen bleibt da (Tastatur, Vorleseprogramme, der
   Zustand), wird aber unsichtbar über das gezeichnete gelegt: So
   trifft ein Daumen 44 Pixel, und die Zeichnung lässt sich färben.
   `opacity: 0` statt `display: none` -- ein ausgeblendetes Feld ist
   für die Tastatur nicht erreichbar. */
.an-haken {
  flex: none;
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  cursor: pointer;
}
.an-haken__feld {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.an-haken__zeichen {
  width: 22px; height: 22px;
  border: 2px solid var(--rand-hell, var(--rand));
  border-radius: 6px;
  background: color-mix(in srgb, var(--text-still) 8%, transparent);
  transition: background var(--tempo, .18s), border-color var(--tempo, .18s);
  position: relative;
}
/* Der Haken selbst: zwei Striche, gedreht. Kein Zeichen aus einer
   Schrift -- das sieht auf jedem Gerät anders aus und fehlt manchmal. */
.an-haken__zeichen::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  /* #0a121e fest und nicht ueber eine Variable: `--grund` gibt es im
     Haus nicht (nachgesehen), und eine Variable, die nirgends gesetzt
     wird, liest sich wie eine Zusage, die es nicht gibt. Es ist der
     dunkle Grund, gegen den alle Toene gemessen werden. */
  border-right: 2.5px solid #0a121e;
  border-bottom: 2.5px solid #0a121e;
  transform: rotate(42deg) scale(.4);
  opacity: 0;
  transition: opacity var(--tempo, .18s), transform var(--tempo, .18s);
}
.an-haken__feld:checked + .an-haken__zeichen {
  background: var(--k-gut, #5fc99a);
  border-color: var(--k-gut, #5fc99a);
}
.an-haken__feld:checked + .an-haken__zeichen::after {
  opacity: 1;
  transform: rotate(42deg) scale(1);
}
.an-haken__feld:focus-visible + .an-haken__zeichen {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}
.an-haken__feld:disabled + .an-haken__zeichen { opacity: .5; }

/* ERLEDIGT WIRD LEISER, NICHT DURCHGESTRICHEN. Durchgestrichener Text
   ist schlecht lesbar, und man will nachher noch nachsehen können, was
   man schon gemacht hat. */
.an-schritt[data-erledigt="ja"] .an-schritt__rumpf { opacity: .62; }

/* DIE GANZE ZEILE IST DAS ZIEL, nicht nur das Stichwort.
   Gemessen am 06.10.2026: Der Verweis war 20 px hoch -- die halbe
   Hausgröße für etwas, das ein Daumen treffen soll. 44 px ist die
   Zahl, die im Haus für Berührziele gilt, und sie steht hier als
   Mindesthöhe und nicht als feste: Zwei Zeilen Text dürfen wachsen. */
.an-schritt__rumpf {
  display: block;
  min-height: 44px;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: var(--radius-klein, 12px);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--text-leise);
  text-decoration: none;
  transition: background var(--tempo, .18s);
}
a.an-schritt__rumpf:hover {
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}
a.an-schritt__rumpf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.an-schritt__name {
  font-weight: 700;
  color: var(--text);
  margin-right: .4em;
}
a.an-schritt__rumpf .an-schritt__name { color: var(--akzent); }
a.an-schritt__rumpf:hover .an-schritt__name { text-decoration: underline; }

/* =====================================================================
   DER STUFEN-FILTER
   ===================================================================== */
.an-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--an-luft);
}

.an-filter__knopf {
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  /* 40 Pixel hoch: Die Hausgröße für etwas, das ein Daumen trifft. */
  min-height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  /* NICHT durchsichtig: Der Filter steht zwischen zwei Flaechen und
     damit direkt auf dem Hintergrundbild. Ein durchsichtiger Knopf ist
     genau so gut lesbar, wie der Bildausschnitt es zulaesst -- und das
     weiss niemand vorher. */
  background: var(--flaeche);
  color: var(--text-still);
  cursor: pointer;
  transition: background var(--tempo, .18s), color var(--tempo, .18s),
              border-color var(--tempo, .18s);
}
.an-filter__knopf:hover { border-color: var(--rand-hell, var(--rand)); color: var(--text); }
.an-filter__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* DER GEWÄHLTE ZUSTAND HÄNGT AN `aria-pressed`, NICHT AN EINER KLASSE.
   Damit ist er für Vorleseprogramme und fürs Auge dieselbe Tatsache --
   eine Klasse daneben wäre die, die beim nächsten Umbau vergessen
   wird, und dann sagt der Knopf etwas anderes, als er aussieht. */
.an-filter__knopf[aria-pressed="true"] {
  /* Auf die FLAECHE gemischt und nicht auf `transparent`: Sonst waere
     ausgerechnet der gewaehlte Knopf der durchsichtigste von allen. */
  background: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  color: var(--text);
}

/* =====================================================================
   EIN STUFENBLOCK
   ===================================================================== */
.an-stufe { margin-top: var(--an-luft); }

.an-stufe__falte {
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  background: var(--flaeche);
  overflow: hidden;
}

.an-stufe__griff {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.an-stufe__griff::-webkit-details-marker { display: none; }
.an-stufe__griff:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }

/* Das Dreieck selbst gebaut, weil das eingebaute je nach Browser
   woanders sitzt und sich nicht färben lässt. */
.an-stufe__griff::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-still);
  border-bottom: 2px solid var(--text-still);
  transform: rotate(-45deg);
  transition: transform var(--tempo, .18s);
}
.an-stufe__falte[open] > .an-stufe__griff::before { transform: rotate(45deg); }

.an-stufe__titel {
  flex: 1 1 auto;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}

.an-stufe__zahl {
  flex: none;
  min-width: 26px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-still) 16%, transparent);
  color: var(--text-still);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.an-stufe__unter {
  margin: 0;
  padding: 0 16px 4px;
  font-size: .85rem;
  color: var(--text-still);
}

/* DAS GITTER MISST, STATT ZU RECHNEN. `auto-fill` mit einer
   Mindestbreite bricht genau dann um, wenn der Platz nicht reicht --
   auf einem 320er Telefon einspaltig, auf einem breiten Bildschirm
   dreispaltig, ohne eine einzige Schwelle in Pixeln. */
.an-stufe__gitter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  padding: 12px 16px 16px;
}

/* =====================================================================
   EINE KARTE
   ===================================================================== */
.an-karte {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  background: var(--flaeche);
  /* Der Ton der echten Kachel, als schmaler Streifen links. Nicht als
     Fläche: Achtzehn volle Farbflächen untereinander sind ein
     Jahrmarkt, und augenschonend ist etwas anderes. */
  border-left: 3px solid var(--ton, var(--rand));
}

.an-karte__kopf { display: flex; align-items: center; gap: 10px; }

.an-karte__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent);
}
.an-karte__svg { width: 24px; height: 24px; }

.an-karte__namen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  min-width: 0;
}

.an-karte__name {
  margin: 0;
  font-size: .98rem;
  font-weight: 700;
  color: var(--text);
}

.an-karte__stufe {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ton, var(--text-still));
}

.an-karte__zeilen { margin: 0; display: grid; gap: 2px; }

.an-karte__schild {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-still);
}
.an-karte__text {
  margin: 0 0 6px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.an-karte__text:last-child { margin-bottom: 0; }

.an-karte__weg {
  align-self: flex-start;
  margin-top: auto;
  /* 40 Pixel: dieselbe Daumenhöhe wie der Filter. */
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
  color: var(--ton, var(--akzent));
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
  transition: background var(--tempo, .18s);
}
.an-karte__weg:hover { background: color-mix(in srgb, var(--ton, var(--akzent)) 14%, transparent); }
.an-karte__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* =====================================================================
   NICHT DEINS
   ===================================================================== */
.an-nicht { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.an-nicht__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  padding: 10px 14px;
  border: 1px dashed var(--rand);
  border-radius: var(--radius-klein, 12px);
  font-size: .92rem;
  line-height: 1.5;
}
/* Gestrichelt und nicht durchgestrichen: Durchgestrichener Text ist
   schlecht lesbar, und „nicht deins" heißt nicht „erledigt". */
.an-nicht__was { font-weight: 650; color: var(--text-still); }
.an-nicht__wer { color: var(--text-leise); }

/* =====================================================================
   RHYTHMUS
   ===================================================================== */
.an-takt {
  margin: 0;
  display: grid;
  /* Erste Spalte so breit wie ihr längster Eintrag, nicht breiter --
     „Vor und nach dem LIVE" soll nicht umbrechen, und „Täglich" soll
     keine halbe Zeile Leerraum erzeugen. */
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  align-items: baseline;
}
.an-takt__wann {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
}
.an-takt__was {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-leise);
}
/* Auf schmalen Geräten untereinander: Zwei Spalten mit „Vor und nach
   dem LIVE" links lassen rechts vier Wörter übrig. Die Regel misst
   nicht, deshalb hier doch eine Schwelle -- und sie steht direkt an
   dem, was sie betrifft. */
@media (max-width: 460px) {
  .an-takt { grid-template-columns: 1fr; gap: 2px; }
  .an-takt__was { margin-bottom: 8px; }
}

/* =====================================================================
   FRAGEN
   ===================================================================== */
.an-fragen { display: grid; gap: 8px; }

.an-frage {
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  background: var(--flaeche);
  overflow: hidden;
}
.an-frage__frage {
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  font-size: .94rem;
  font-weight: 650;
  color: var(--text);
}
.an-frage__frage::-webkit-details-marker { display: none; }
.an-frage__frage:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
.an-frage__antwort {
  margin: 0;
  padding: 0 14px 13px;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--text-leise);
  max-width: 68ch;
}

/* =====================================================================
   HILFE
   ===================================================================== */
.an-hilfe {
  margin: var(--an-luft) 0 0;
  /* Dieselbe Flaeche wie die Bloecke darueber, aus demselben Grund --
     nur leiser: kein Titel, kleinere Schrift. Ein Schlusssatz soll
     lesbar sein, ohne sich wie ein weiterer Abschnitt aufzufuehren. */
  padding: 14px 18px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
  font-size: .9rem;
  line-height: 1.6;
  color: var(--text-still);
}
.an-hilfe a { color: var(--akzent); }

/* =====================================================================
   WENIGER BEWEGUNG, WENN JEMAND DAS SO EINGESTELLT HAT
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .an-filter__knopf,
  .an-schritt__rumpf,
  .an-stufe__griff::before,
  .an-haken__zeichen,
  .an-haken__zeichen::after,
  .an-stand__balken::-webkit-progress-value,
  .an-karte__weg { transition: none; }
}