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;
}

.an-nochmal { margin: 16px 0 0; }
.an-nochmal__weg {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text-still);
  font-size: .85rem;
  font-weight: 650;
  text-decoration: none;
}
.an-nochmal__weg:hover { color: var(--text); border-color: var(--akzent); }
.an-nochmal__weg:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* =====================================================================
   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
   ===================================================================== */
/* ZWEI DINGE HIESSEN „an-stufe", UND DAS WAR EINE FALLE (06.10.2026).

   `.an-stufe` war der Kasten einer EINORDNUNG („Das brauchst du
   sofort") UND der Kasten „Deine Stufe" mit Neu, Dabei, Stamm. Der
   Bauplan warnt in Kapitel 14 ausdruecklich davor, die beiden zu
   verwechseln -- im Quelltext taten sie es.

   Aufgefallen beim Messen des Filters: Er musste seine Suche von Hand
   auf `#stufen` eingrenzen, sonst haette „Muss" die Karte „Deine
   Stufe" mit weggeblendet. Eine Regel wie `.an-stufe { display:none }`
   haette denselben Schaden angerichtet, und man haette sie nicht
   kommen sehen.

   Die Mitglieder-Stufe heisst jetzt `an-rang`. In der Oberflaeche
   aendert sich kein Wort -- dort steht weiterhin „Deine Stufe". */
.an-rang { margin-top: var(--an-luft); }
.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; }

/* „aktualisiert am 06.10.2026" — steht NUR in der Pflege unter dem
   Knopf (anleitung.js setzt es hinter `pflegeAn`). Deshalb darf es
   auch aussehen wie eine Randnotiz und nicht wie ein Satz der Karte:
   klein, still, kein eigener Abstand nach oben über die Lücke des
   Karten-`gap` hinaus. Wer die Karte liest, soll die drei Zeilen
   darüber lesen; wer sie pflegt, findet die Angabe genau dort, wo er
   ohnehin hinsieht — direkt beim Ändern-Knopf.

   `--text-still` statt einer eigenen Farbe: Es ist dieselbe Stimme wie
   die Schilder „Wozu" / „Merke", und sie ist gegen `--flaeche` bereits
   geprüft. Eine neue, noch blassere Farbe hier wäre genau der
   Kontrast-Rückschritt, den niemand bemerkt, bis er nicht mehr lesbar
   ist. */
.an-karte__stand {
  margin: 0;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--text-still);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   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); }

/* =====================================================================
   DIE PFLEGE (Etappe 4)
   =====================================================================

   Sie ist LEISE, solange sie aus ist. Wer die Seite liest, soll die
   Einweisung sehen und nicht die Werkzeuge -- deshalb trägt der
   Schalter keine Farbe, bis er gedrückt ist, und die Stift-Knöpfe
   gibt es erst dann überhaupt im Dokument (anleitung.js baut sie nur
   im Bearbeiten-Zustand).
   ===================================================================== */
.an-pflege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px dashed var(--rand);
  background: var(--flaeche);
  clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
}

.an-pflege__knopf {
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: transparent;
  color: var(--text-still);
  cursor: pointer;
  transition: background var(--tempo, .18s), color var(--tempo, .18s);
}
.an-pflege__knopf:hover { color: var(--text); }
.an-pflege__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.an-pflege__knopf[aria-pressed="true"] {
  background: color-mix(in srgb, var(--akzent) 22%, var(--flaeche));
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  color: var(--text);
}

.an-pflege__satz {
  font-size: .85rem;
  color: var(--text-still);
}

/* ---------------------------------------------------------------------
   DER STIFT

   44 Pixel, wie jedes Berührziel im Haus -- auch wenn das Zeichen
   darin klein ist. Ein Knopf, den man dreimal treffen muss, ist auf
   einem Telefon kein Knopf. */
.an-aendern {
  flex: none;
  margin-left: auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: var(--flaeche);
  color: var(--text-still);
  cursor: pointer;
  transition: color var(--tempo, .18s), border-color var(--tempo, .18s);
}
.an-aendern:hover { color: var(--akzent); border-color: var(--akzent); }
.an-aendern:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* In einer Frage sitzt er unten statt rechts: Die Zusammenfassung ist
   der Schalter zum Aufklappen, und ein Knopf darin wäre ein Knopf im
   Knopf. */
.an-frage__aendern { margin: 0 14px 12px; }

/* ---------------------------------------------------------------------
   DIE MARKE „NEU"

   Ein WORT, kein Punkt. Ein farbiger Punkt ohne Wort ist eine Frage
   und keine Auskunft -- und für jemanden, der Farben schlecht
   unterscheidet, ist er gar nichts. */
.an-karte__neu {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 999px;
  color: #0a121e;
  background: var(--k-gut, #5fc99a);
}

/* ---------------------------------------------------------------------
   FEHLENDE EINTRÄGE */
.an-fehlend { border-style: dashed; }
.an-fehlend__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.an-fehlend__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.an-fehlend__name { font-weight: 650; color: var(--text); font-size: .95rem; }
.an-fehlend__knopf {
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  background: transparent;
  color: var(--akzent);
  cursor: pointer;
}
.an-fehlend__knopf:hover { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.an-fehlend__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.an-fehlend__knopf:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------------------
   DAS FENSTER */
.an-form { display: grid; gap: 14px; padding: 20px; }

.an-feld { display: grid; gap: 5px; }
.an-feld__schild {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-still);
}
.an-feld input,
.an-feld textarea,
.an-feld select {
  font: inherit;
  font-size: .95rem;
  /* 44 Pixel: dieselbe Daumenhöhe wie überall. Bei `textarea` wirkt
     sie als Mindesthöhe, der Text darf wachsen. */
  min-height: 44px;
  padding: 9px 12px;
  border-radius: var(--radius-klein, 12px);
  border: 1px solid var(--rand);
  background: color-mix(in srgb, var(--text-still) 8%, transparent);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
.an-feld textarea { resize: vertical; line-height: 1.5; }
.an-feld input:focus-visible,
.an-feld textarea:focus-visible,
.an-feld select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.an-form__fehler {
  margin: 0;
  min-height: 1.2em;
  font-size: .9rem;
  color: var(--k-warn, #f0868f);
}

/* ---------------------------------------------------------------------
   WER IST WIE WEIT */
.an-wer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
  font-size: .92rem;
}
.an-wer:last-child { border-bottom: none; }
.an-wer__name { font-weight: 650; color: var(--text); min-width: 7em; }
.an-wer__rolle { color: var(--text-still); font-size: .85rem; }
.an-wer__stand { margin-left: auto; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.an-wer__wann { color: var(--text-still); font-size: .85rem; font-variant-numeric: tabular-nums; }
/* Fertig ist eine Aussage, kein Haken: Das Wort steht in `__stand`,
   die Farbe verstärkt es nur. */
.an-wer[data-fertig="ja"] .an-wer__stand { color: var(--k-gut, #5fc99a); font-weight: 650; }

/* =====================================================================
   DER RUNDGANG (Etappe 6)
   =====================================================================

   KEIN LOCH IN EINER ABDECKUNG. Ein ausgeschnittenes Fenster müsste
   bei jedem Scrollen neu gerechnet werden und sitzt beim ersten
   Bildaufbau garantiert falsch. Stattdessen: Die ganze Seite wird
   leiser (`body[data-rundgang]`), und das Ziel bleibt hell und
   bekommt einen Rahmen. Dasselbe Ergebnis, ohne eine einzige
   gerechnete Koordinate.

   Fällt dieses Skript mittendrin aus, ist die Seite trotzdem heil:
   Das Merkmal hängt am `body` und ist beim nächsten Laden weg. */
body[data-rundgang="ja"] main > *,
body[data-rundgang="ja"] .kopfleiste {
  opacity: .34;
  filter: saturate(.5);
  transition: opacity var(--tempo, .18s);
}
body[data-rundgang="ja"] [data-rundgang-ziel="ja"] {
  opacity: 1;
  filter: none;
  position: relative;
  z-index: 2;
  outline: 2px solid var(--akzent);
  outline-offset: 6px;
  border-radius: 4px;
}
/* Im letzten Schritt leuchten nur die Muss-Kacheln. Die Gruppe selbst
   ist dann das Ziel, die einzelnen Kacheln darin werden gedämpft --
   außer diesen. */
body[data-rundgang="ja"] [data-rundgang-ziel="ja"] .kachel { opacity: .3; }
body[data-rundgang="ja"] [data-rundgang-ziel="ja"] .kachel[data-rundgang-muss="ja"] {
  opacity: 1;
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

.rg {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  width: min(460px, calc(100vw - 24px));
}

.rg__kasten {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--akzent) 45%, var(--rand));
  background: var(--flaeche);
  border-radius: var(--radius-klein, 12px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .55);
}

.rg__zaehler {
  margin: 0 0 4px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--akzent);
}
.rg__titel { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.rg__text { margin: 0 0 14px; font-size: .95rem; line-height: 1.55; color: var(--text-leise); }

.rg__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.rg__still {
  font: inherit;
  font-size: .9rem;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--rand);
  background: transparent;
  color: var(--text-still);
  cursor: pointer;
}
.rg__still:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.rg__weiter { min-height: 44px; }

.rg-gruss__rumpf { padding: 22px; display: grid; gap: 12px; }
.rg-gruss__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-leise);
  max-width: 44ch;
}

/* =====================================================================
   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-pflege__knopf,
  .an-aendern,
  body[data-rundgang="ja"] main > *,
  body[data-rundgang="ja"] .kopfleiste,
  .an-stand__balken::-webkit-progress-value,
  .an-karte__weg { transition: none; }
}

/* =====================================================================
   DREI DINGE VORWEG  (06.10.2026, Bauplan Kapitel 04)
   =====================================================================

   Nur die Community sieht diesen Abschnitt. Er steht ganz oben und
   erklärt nichts — er sagt, woran sich alle halten. Deshalb KEIN
   gestrichelter Rahmen wie bei „Nicht deins" (das ist eine Absage)
   und keine Warnfarbe (es ist kein Alarm): eine ruhige Kante in der
   Hausfarbe, mehr braucht es nicht.
   ===================================================================== */
.an-vorweg__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.an-vorweg__zeile {
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  padding: 12px 15px;
  border: 1px solid var(--rand);
  border-left: 3px solid color-mix(in srgb, var(--akzent) 55%, transparent);
  border-radius: var(--radius-klein, 12px);
  background: rgba(255, 255, 255, .03);
  line-height: 1.55;
}
/* `--text`, nicht `--text-leise`: Diese drei Sätze MÜSSEN gelesen
   werden. Was man wegen seiner Farbe überfliegt, hätte man sich
   sparen können. */
.an-vorweg__was { font-weight: 650; color: var(--text); font-size: 1rem; }
.an-vorweg__text { color: var(--text-leise); font-size: .95rem; }

/* =====================================================================
   DEINE STUFE  (06.10.2026, Bauplan Kapitel 04)
   =====================================================================

   Beantwortet die Frage, die sich sonst an jeder zweiten Karte
   stellt: „Warum geht das bei mir noch nicht?"

   DIE EIGENE STUFE IST HERVORGEHOBEN, die anderen bleiben ruhig --
   man soll auf einen Blick sehen, wo man steht, ohne zu lesen. Die
   Hervorhebung läuft über `data-jetzt` und nicht über die Reihenfolge:
   Wer die Reihen einmal anders sortiert, hätte sonst die falsche
   markiert.
   ===================================================================== */
.an-rang__jetzt {
  margin: 0 0 10px; font-weight: 650; color: var(--text); font-size: 1rem;
}
.an-rang__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.an-rang__zeile {
  display: grid;
  /* Am Handy untereinander, ab 560 px Name und „ab wann" nebeneinander
     -- eine Tabelle quer zu scrollen ist auf dem Telefon das
     Schlimmste, was man dem Text antun kann. */
  grid-template-columns: 1fr;
  gap: 2px 12px;
  padding: 11px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein, 12px);
  line-height: 1.5;
}
.an-rang__zeile[data-jetzt="ja"] {
  border-color: color-mix(in srgb, var(--akzent) 48%, transparent);
  background: color-mix(in srgb, var(--akzent) 10%, transparent);
}
.an-rang__name { font-weight: 650; color: var(--text); }
.an-rang__zeile[data-jetzt="ja"] .an-rang__name { color: var(--akzent); }
.an-rang__ab { color: var(--text-still); font-size: .88rem; }
.an-rang__kann { color: var(--text-leise); font-size: .92rem; }
/* „frühestens ab 13.10.2026" — eine Zusage mit Datum, nicht „bald". */
.an-rang__wann {
  color: var(--akzent); font-size: .88rem; font-variant-numeric: tabular-nums;
}

@media (min-width: 560px) {
  .an-rang__zeile { grid-template-columns: auto 1fr; align-items: baseline; }
  .an-rang__kann, .an-rang__wann { grid-column: 1 / -1; }
}

/* Die Karte, auf die „Neu für dich" gesprungen ist (06.10.2026).
   Eine ruhige Umrandung für ein paar Sekunden — kein Blinken, kein
   Leuchten: Sie beantwortet die Frage „welche war gemeint?" und
   verschwindet dann wieder. */
.an-karte[data-gesucht="ja"] {
  border-color: color-mix(in srgb, var(--akzent) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--akzent) 28%, transparent);
}

/* „ab Dabei" / „ab Stamm" an einer Karte (06.10.2026, Bauplan
   Kapitel 04).

   RUHIG UND NICHT ROT: Es ist keine Sperre und kein Fehler, sondern
   eine Auskunft über die Zeit — „das kommt noch". Rot wäre hier die
   falsche Sprache, und wer jeden Tag etwas Rotes sieht, sieht bald
   gar nichts mehr. Deshalb dieselbe stille Form wie die Marke der
   Einordnung daneben, nur in der leisen Textfarbe. */
.an-karte__abstufe {
  flex: none;
  padding: 2px 9px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--text-leise);
  font-size: .72rem; line-height: 1.5; white-space: nowrap;
}