/* mypacing — erststart.css
 *
 * Das Aussehen der Erst-Einfuehrung: Willkommensbildschirm, EIN kontextueller Ersthinweis
 * je Bildschirm, die Checkliste "Erste Schritte" und der Baustein fuer sprechende
 * Leerzustaende. Das Verhalten steht in assets/erststart.js, die Begruendung fuer den
 * ganzen Ansatz ebenfalls dort.
 *
 * BEWEGUNG. Hier bewegt sich genau eine Sache: eine Einblendung ueber Deckkraft und acht
 * Pixel Versatz, 150 ms, einmalig. WAS "reduziert" global bedeutet, steht in
 * assets/modern.css; OB reduziert wird, entscheidet assets/nav.js. Der Block ganz unten
 * ist deshalb bewusst eine ALLEINSTEHENDE Bedingung -- nur solche schreibt nav.js um, wenn
 * jemand in der Fusszeile "immer ruhig" oder "Bewegung erlauben" waehlt. Eine
 * zusammengesetzte Bedingung (etwa Breite UND Bewegung) waere fuer die Einstellung
 * unerreichbar; tests/gruppen/bewegung.php laesst das gar nicht erst durch.
 *
 * DER SCHLEIER HINTER DEN DIALOGEN bleibt absichtlich der des Browsers. Er ist dort ein
 * sehr leichtes Abdunkeln und funktioniert in hell wie dunkel; eine eigene Flaeche haette
 * eine eigene Farbe gebraucht, und die einzige dafuer passende Umkehr-Farbe im Tokensatz
 * ist im Dunkelmodus HELL -- ein aufblitzender heller Schleier ist genau das, was auf
 * dieser Seite niemand bekommen soll.
 *
 * Farben ausschliesslich ueber Token (hell und dunkel schalten damit zwangslaeufig
 * zusammen), Schriftgroessen ausschliesslich ueber die Skala aus type-tokens.css.
 * Jedes Tippziel ist mindestens 44 px hoch, auch bei 320 px Breite.
 */

/* ===================================================================== *
 * 1) Der kontextuelle Ersthinweis
 *    Steht IM Lesefluss, nicht darueber: er verdeckt nichts, faengt keinen Fokus ab und
 *    laesst sich ueberscrollen wie jeder andere Absatz. Ein Sprechblasen-Overlay haette
 *    genau das nicht gekonnt -- und dafuer CSS Anchor Positioning gebraucht, das noch
 *    zu wenige Browser koennen.
 * ===================================================================== */
.mp-es-hinweis{
  margin:var(--raum-4) 0;
  padding:var(--karte-innen);
  background:var(--accent-surface);
  border:1px solid var(--border);
  border-radius:var(--radius-karte);
  color:var(--text-primary);
  font-family:Inter,system-ui,sans-serif;
  font-size:var(--fs-fuss);
  line-height:var(--lh-text);
  animation:mpEsAuf .15s ease-out;
}
.mp-es-hinweis p{margin:0}
.mp-es-hinweis b{color:var(--text-primary)}

/* ===================================================================== *
 * 2) Knoepfe und Textknoepfe
 *    EINE Knopfklasse fuer alles. Der Willkommensbildschirm stellt zwei Wege zur Wahl;
 *    saehe einer davon nach Empfehlung aus, waere die Wahl keine. Deshalb gibt es hier
 *    bewusst KEINE zweite, hervorgehobene Knopfform.
 * ===================================================================== */
.mp-es-knopf{
  min-height:44px;
  padding:var(--raum-3) var(--raum-4);
  border:1px solid var(--field-border);
  border-radius:var(--radius-feld);
  background:var(--surface-card);
  color:var(--text-primary);
  font-family:Inter,system-ui,sans-serif;
  font-weight:700;
  font-size:var(--fs-knopf);
  line-height:var(--lh-eng);
  text-align:left;
  cursor:pointer;
  transition:opacity .15s ease;
}
.mp-es-knopf:hover{border-color:var(--accent);color:var(--accent-ink)}
.mp-es-knopf:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mp-es-knopf .mp-es-dazu{
  display:block;
  margin-top:var(--raum-1);
  font-weight:500;
  font-size:var(--fs-mikro);
  line-height:var(--lh-text);
  color:var(--text-secondary);
}

.mp-es-textknopf{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:var(--raum-2) 0;
  border:0;
  background:none;
  color:var(--accent-ink);
  font-family:Inter,system-ui,sans-serif;
  font-weight:600;
  font-size:var(--fs-nav);
  line-height:var(--lh-eng);
  text-align:left;
  text-decoration:underline;
  cursor:pointer;
}
.mp-es-textknopf:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Die Zeile unter einem Hinweis: wegklicken oder alle abschalten. Beide sind Tippziele,
   beide brechen bei 320 px sauber untereinander um. */
.mp-es-fuss{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--raum-2) var(--raum-4);
  margin-top:var(--raum-3);
}

/* ===================================================================== *
 * 3) Die Dialoge (Willkommen, Erste Schritte)
 *    <dialog> statt eines nachgebauten Overlays: Fokusfalle, Escape und ein inerter
 *    Hintergrund kommen damit vom Browser und muessen nicht in JavaScript nachgebildet
 *    werden -- nachgebildet werden sie erfahrungsgemaess unvollstaendig.
 * ===================================================================== */
.mp-es-dialog{
  width:min(34rem, calc(100vw - 2 * var(--raum-4)));
  max-height:calc(100dvh - 2 * var(--raum-5));
  padding:0;
  border:1px solid var(--border);
  border-radius:var(--radius-karte);
  background:var(--surface-card);
  color:var(--text-primary);
  box-shadow:var(--shadow);
  overflow:auto;
}
.mp-es-dialog[open]{animation:mpEsAuf .15s ease-out}
.mp-es-rumpf{
  padding:var(--karte-innen);
  font-family:Inter,system-ui,sans-serif;
  font-size:var(--fs-body);
  line-height:var(--lh-text);
}
.mp-es-dialog h2{
  margin:0 0 var(--raum-3);
  font-size:var(--fs-h2);
  line-height:var(--lh-titel);
  color:var(--text-primary);
}
.mp-es-dialog p{margin:0 0 var(--raum-4)}
.mp-es-dialog p:last-child{margin-bottom:0}
.mp-es-dialog form{margin:0}

/* Die beiden gleichwertigen Wege. Ab etwa 480 px stehen sie nebeneinander, darunter
   untereinander -- in beiden Faellen gleich breit und gleich schwer. */
.mp-es-wahl{
  display:flex;
  flex-wrap:wrap;
  gap:var(--raum-3);
  margin:var(--raum-5) 0 0;
}
.mp-es-wahl .mp-es-knopf{flex:1 1 13rem}

/* ===================================================================== *
 * 4) Die Checkliste
 *    Kein Fortschrittsbalken, kein Zaehler, keine Reihenfolge. Ein Haken ist eine Notiz
 *    fuer die Person selbst, keine Quittung fuer uns.
 * ===================================================================== */
.mp-es-liste{margin:var(--raum-5) 0 0;padding:0;list-style:none}
.mp-es-liste li{padding:var(--raum-3) 0;border-top:1px solid var(--border)}
.mp-es-liste li:last-child{border-bottom:1px solid var(--border)}
.mp-es-punkt{display:flex;align-items:flex-start;gap:var(--raum-3)}
.mp-es-haken{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  border:1px solid var(--field-border);
  border-radius:var(--radius-feld);
  background:var(--surface-card);
  color:var(--text-primary);
  font-size:var(--fs-body);
  line-height:var(--lh-eng);
  cursor:pointer;
}
.mp-es-haken span{visibility:hidden}
.mp-es-haken[aria-pressed="true"]{
  background:var(--accent-surface);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.mp-es-haken[aria-pressed="true"] span{visibility:visible}
.mp-es-haken:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mp-es-text{flex:1 1 10rem;min-width:0}
.mp-es-text a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--accent-ink);
  font-weight:700;
  font-size:var(--fs-body);
  line-height:var(--lh-eng);
  text-decoration:underline;
}
.mp-es-text a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mp-es-was{
  margin:0;
  color:var(--text-secondary);
  font-size:var(--fs-fuss);
  line-height:var(--lh-text);
}
/* Der Zustand steht als WORT da, nicht nur als Farbe -- wer Gruen und Grau nicht
   unterscheidet, muss "erledigt" trotzdem lesen koennen. Leer, solange nichts zu sagen ist. */
.mp-es-stand{
  margin:var(--raum-1) 0 0;
  color:var(--accent-ink);
  font-size:var(--fs-mikro);
  font-weight:700;
  line-height:var(--lh-eng);
}
.mp-es-stand:empty{display:none}

/* ===================================================================== *
 * 5) Sprechender Leerzustand
 *    Eine Karte, die sich mangels Daten selbst ausblendet, sagt gar nichts -- man erfaehrt
 *    nicht einmal, dass es sie gibt. Dieser Baustein sagt an ihrer Stelle, WAS dort
 *    erscheinen wird und WIE es dorthin kommt.
 * ===================================================================== */
.mp-es-leer{
  margin:var(--karte-luft) 0;
  padding:var(--karte-innen);
  border:1px dashed var(--border-strong);
  border-radius:var(--radius-kachel);
  background:var(--surface-sunken);
  color:var(--text-secondary);
  font-family:Inter,system-ui,sans-serif;
  font-size:var(--fs-fuss);
  line-height:var(--lh-text);
}
.mp-es-leer b{color:var(--text-primary)}
.mp-es-leer p{margin:0 0 var(--raum-2)}
.mp-es-leer p:last-child{margin-bottom:0}
.mp-es-leer a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--accent-ink);
  font-weight:700;
  text-decoration:underline;
}
.mp-es-leer a:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ===================================================================== *
 * 6) Der Rueckweg zur Checkliste
 * ===================================================================== */
.mp-es-rueckweg{margin:var(--raum-6) 0 0}

/* ===================================================================== *
 * 7) Bewegung
 *    Acht Pixel und Deckkraft, 150 ms, einmalig. Mehr gibt es hier nicht -- und der Block
 *    darunter nimmt auch das weg.
 * ===================================================================== */
@keyframes mpEsAuf{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .mp-es-hinweis{animation:none}
  .mp-es-dialog[open]{animation:none}
  .mp-es-knopf{transition:none}
}