/*
  style.css – die EINRICHTUNG der Werteübung (V0.9)

  Hier steht nur, wie alles AUSSIEHT: Farben, Schriftgrößen, Abstände.

  NEU V0.8: die Farben von Erfolgsimpulse (Alinas Wahl, für mehr Markenerkennung):
  - Erfolgsimpulse-Blau für alles, was man antippt oder was führt,
  - Navy (das dunkle Blau aus dem Logo) für Überschriften und Text,
  - Weiß als Grund, ganz helles Blau für Kästen und Kärtchen.
  Die Einführung besteht jetzt aus vier Schritt-Kärtchen.

  NEU V0.9: ein hellblauer Hinweis-Kasten über den Antworten (.frage-hinweis).

  Seit V0.7 gleich geblieben: Überschriften in Georgia, in jeder großen
  Überschrift ein Wort wie mit Textmarker hervorgehoben. Es werden keine
  Schriften aus dem Internet geladen: Georgia ist auf jedem Gerät schon da.
  Das ist schneller und gut für den Datenschutz.

  Aufbau einer Regel:   wer { was: wie; }
  Beispiel:             h1 { font-size: 28px; }  =  "Alle Hauptüberschriften 28 Pixel groß"
*/

/* ----- Die Farben an einer Stelle, damit man sie später leicht tauschen kann ----- */
:root {
  color-scheme: light;          /* die Übung ist immer hell, auch wenn das Handy dunkel eingestellt ist */

  --hintergrund: #FFFFFF;       /* Weiß */
  --karte: #FFFFFF;             /* Karten und helle Knöpfe */
  --text: #001840;              /* Navy aus dem Erfolgsimpulse-Logo */
  --text-mittel: #3E4E66;       /* längere Erklärtexte, etwas weicher */
  --text-leise: #5B6B82;        /* Hinweise */
  --blau: #00A0E0;              /* Erfolgsimpulse-Blau: Knöpfe, Nummern, Balken */
  --blau-schrift: #007DB3;      /* blaue SCHRIFT auf Weiß, eine Spur dunkler, damit man sie gut lesen kann */
  --blau-hell: #CCEDFA;         /* ausgewählte Werte */
  --blau-zart: #EEF8FD;         /* sanfte Kästen und Schritt-Kärtchen */
  --blau-linie: #9FDAF2;        /* blaue Ränder */
  --marker: #BDE8F9;            /* der Textmarker in den Überschriften */
  --rand: #D9E3EC;              /* feine graue Linien */
  --flaeche: #F1F5F9;           /* NEU V0.24: graue Fläche »Und jetzt?« beim Ergebnis */
  --schatten: rgba(0, 24, 64, 0.07);
  --warnung: #B3261E;

  --schrift-buch: Georgia, "Times New Roman", serif;
  --schrift-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Was "hidden" ist, wird nie angezeigt */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Der Inhalt ist höchstens so breit wie ein großes Handy und steht in der Mitte */
main {
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 16px 48px;
}

/* ----- Überschriften in der Buchschrift ----- */
h1 {
  margin: 10px 0 18px;
  font-family: var(--schrift-buch);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}
h2 {
  margin: 32px 0 12px;
  font-family: var(--schrift-buch);
  font-size: 20px;
  font-weight: 400;
}

/* Das markierte Wort – kursiv, wie mit Textmarker unterstrichen */
.markiert {
  padding: 0 0.12em;
  font-style: italic;
  background: linear-gradient(180deg, transparent 52%, var(--marker) 52%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Die kleine Kopfzeile "Werteübung" */
.etikett {
  margin: 0;
  color: var(--blau-schrift);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;    /* in Großbuchstaben angezeigt, im Text steht es normal */
}

/* Der Einleitungssatz (Kompass-Satz) */
.einleitung { color: var(--text-mittel); }

.hinweis { font-size: 15px; color: var(--text-leise); }
.warnung { color: var(--warnung); }

/* Versionsnummer ganz unten auf der Startseite */
.version {
  margin-top: 28px;
  color: var(--text-leise);
  font-size: 13px;
  text-align: center;
}

/* ----- Knöpfe: groß genug für den Daumen ----- */
.knopf {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0 0 12px;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--blau);
  color: #FFFFFF;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.knopf:active { transform: scale(0.98); }
.knopf:disabled {
  background: var(--rand);
  color: var(--text-leise);
  cursor: not-allowed;
}

.knopf.hell {
  background: var(--karte);
  color: var(--text);
  border: 1px solid var(--blau-linie);
  font-weight: 600;
}

.knopf.gross span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  opacity: 0.9;
}

/* Ein kleiner Knopf, der neben ein Eingabefeld passt */
.knopf.klein {
  width: auto;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  font-size: 16px;
}

/* Ein Knopf, der wie ein Link aussieht – bewusst unauffällig */
.knopf-leise {
  display: block;
  margin: 20px auto 0;
  padding: 10px 14px;
  background: none;
  border: 0;
  color: var(--blau-schrift);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  cursor: pointer;
}

/* ----- Einführung als vier Schritt-Kärtchen (V0.8, Texte V0.9) ----- */
#bildschirm-start h2 { margin: 26px 0 10px; }
.schritte {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;             /* keine automatischen Zahlen, wir setzen eigene Kreise */
}
.schritt {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  padding: 14px 16px;
  background: var(--blau-zart);
  border-radius: 16px;
}
.schritt-nr {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blau);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
}
.schritt-titel {
  display: block;
  margin-bottom: 2px;
  font-family: var(--schrift-buch);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.schritt-text {
  display: block;
  color: var(--text-mittel);
  font-size: 16px;
  line-height: 1.45;
}


/* ----- Werte-Kärtchen zum Antippen ----- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 28px;
}
.chip {
  padding: 10px 14px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chip[aria-pressed="true"] {
  background: var(--blau-hell);
  border-color: var(--blau);
  color: var(--text);
  font-weight: 600;
}
.chip:disabled { opacity: 0.35; cursor: not-allowed; }
.chip.eigener { border-style: dashed; border-color: var(--blau); }   /* selbst ergänzte Werte */

/* ----- Eigenen Wert ergänzen ----- */
.eigener-wert label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--schrift-buch);
  font-size: 18px;
}
.eingabe-zeile { display: flex; gap: 8px; }
.eingabe-zeile input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* ab 16 Pixel zoomt das iPhone beim Tippen nicht hinein */
}
.eingabe-zeile input:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

/* ----- Leiste unten, bleibt beim Scrollen sichtbar ----- */
.leiste-unten {
  position: sticky;
  bottom: 0;
  margin: 24px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--hintergrund);
  border-top: 1px solid var(--rand);
}
.leiste-unten .knopf { margin-bottom: 0; }
.zaehler {
  margin: 0 0 8px;
  color: var(--blau-schrift);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* ----- Fortschritt über der Frage ----- */
.fortschritt-text {
  margin: 6px 0 0;
  font-size: 15px;
  color: var(--text-leise);
}
.fortschritt {
  height: 6px;
  margin: 8px 0 20px;
  background: var(--rand);
  border-radius: 3px;
  overflow: hidden;
}
#fortschritt-balken {
  width: 0;
  height: 100%;
  background: var(--blau);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ----- NEU V0.9: Hinweis-Kasten über den Antworten ----- */
.frage-hinweis {
  margin: -4px 0 20px;
  padding: 12px 16px;
  background: var(--blau-zart);
  border-radius: 12px;
  color: var(--text-mittel);
  font-size: 16px;
  line-height: 1.45;
}
.frage-hinweis strong { color: var(--text); }

/* ----- Die zwei Antwort-Knöpfe ----- */
.antworten {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
}
.knopf.antwort { min-height: 72px; font-size: 22px; }
.oder {
  margin: 0 0 12px;
  color: var(--text-leise);
  font-family: var(--schrift-buch);
  font-style: italic;
  text-align: center;
}

/* Text-Modus: Der Vorlese-Bereich ist versteckt */
body[data-modus="text"] #audio-bereich { display: none; }

/* Vorlese-Modus: zwei große Felder "1" und "2" nebeneinander, kein "oder" */
body[data-modus="audio"] .oder { display: none; }
body[data-modus="audio"] .antworten { flex-direction: row; gap: 12px; }
body[data-modus="audio"] .knopf.antwort {
  flex: 1;
  min-height: 140px;
  font-family: var(--schrift-buch);
  font-size: 60px;
  font-weight: 400;
}

/* ----- "Gut zu wissen" zum Aufklappen ----- */
.gut-zu-wissen {
  margin-top: 32px;
  padding: 12px 16px;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 12px;
  font-size: 15px;
}
.gut-zu-wissen summary {
  color: var(--blau-schrift);
  font-weight: 600;
  cursor: pointer;
}
.gut-zu-wissen p { margin: 12px 0 0; }

/* ----- Ergebnis als Moderationskarten ----- */
.karten {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
/* Eine Zeile pro Platz: links die Platznummer, rechts eine oder mehrere Karten */
.platz-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.platz-zeile .platz {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blau);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
}
.karten-zeile {
  display: flex;
  flex: 1;
  gap: 8px;
  min-width: 0;
}
.karte {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  background: var(--karte);
  border: 1px solid var(--blau-hell);
  border-radius: 8px;
  box-shadow: 0 1px 2px var(--schatten), 0 4px 14px var(--schatten);
  font-family: var(--schrift-buch);
  font-size: 21px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Gleichrangige Karten nebeneinander, etwas kleiner geschrieben */
.gleichrangig .karte { padding: 14px 12px; font-size: 18px; }

/* ----- Hinweis-Kasten bei gleichrangigen Werten ----- */
.hinweis-box {
  margin: 20px 0;
  padding: 4px 16px;
  background: var(--karte);
  border: 1.5px dashed var(--blau-linie);
  border-radius: 12px;
  color: var(--text-mittel);
  font-size: 15px;
}

/* ----- Hinweis "Momentaufnahme" beim Ergebnis ----- */
.momentaufnahme {
  margin: 20px 0;
  padding: 6px 18px;
  background: var(--blau-zart);
  border-radius: 12px;
  color: var(--text-mittel);
}
.momentaufnahme strong {
  color: var(--text);
  font-family: var(--schrift-buch);
  font-size: 19px;
  font-weight: 400;
  font-style: italic;
}

/* =====================================================================
   NEU V0.11: drei kleine Details
   ===================================================================== */

/* ----- 1. Die Karten erscheinen nacheinander -----
   "@keyframes" beschreibt eine kleine Bewegung: von unsichtbar und etwas
   tiefer zu sichtbar an ihrem Platz. Wann jede Karte startet, setzt app.js
   (animation-delay). Alles mit "danach" kommt erst, wenn alle Karten da sind. */
@keyframes erscheinen {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.platz-zeile.erscheint { animation: erscheinen 0.5s ease-out both; }
#bildschirm-ergebnis .danach { animation: erscheinen 0.5s ease-out var(--danach, 0s) both; }

/* Wer am Handy "weniger Bewegung" eingestellt hat, bekommt alles sofort */
@media (prefers-reduced-motion: reduce) {
  .platz-zeile.erscheint,
  #bildschirm-ergebnis .danach { animation: none; }
}

/* ----- 2. Ergebnis als Bild ----- */
.bild-bereich { margin: 4px 0 16px; text-align: center; }
.bild-bereich .hinweis { margin: 0 0 10px; }
.bild-bereich img {
  width: 70%;
  max-width: 300px;
  border: 1px solid var(--blau-hell);
  border-radius: 12px;
  box-shadow: 0 4px 14px var(--schatten);
}

/* ----- 3. Weitermachen nach dem Schließen ----- */
.weitermachen {
  margin: 6px 0 0;
  padding: 18px 18px 6px;
  background: var(--blau-zart);
  border-radius: 16px;
}
.weitermachen p { margin: 0 0 16px; color: var(--text-mittel); }
.weitermachen .weitermachen-titel {
  margin-bottom: 6px;
  color: var(--text);
  font-family: var(--schrift-buch);
  font-size: 21px;
}

/* =====================================================================
   NEU V0.12
   ===================================================================== */

/* ----- Glanz auf allen Knöpfen (V0.12 nur Start-Knopf, seit V0.13 alle) -----
   Ein heller, schräger Lichtstreifen fliegt alle gut 3 Sekunden über den Knopf.
   "::after" ist ein unsichtbares Extra-Element im Knopf, das nur der Streifen ist.
   Ausgegraute Knöpfe glänzen nicht, sie sind ja noch nicht dran. */
.knopf { position: relative; overflow: hidden; }
.knopf:not(:disabled)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
  transform: skewX(-20deg);
  animation: glanz 3.2s ease-in-out 1s infinite;
  pointer-events: none;
}
/* Auf weißen Knöpfen ist der Streifen hellblau, sonst sähe man ihn nicht */
.knopf.hell:not(:disabled)::after {
  background: linear-gradient(100deg, rgba(204,237,250,0), rgba(159,218,242,0.7), rgba(204,237,250,0));
}
@keyframes glanz {
  0%   { left: -60%; }
  35%  { left: 130%; }
  100% { left: 130%; }
}

/* ----- Konfetti: die Leinwand liegt über allem, man kann aber durchtippen ----- */
.konfetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* Zurück zur Rangfolge: Karten stehen sofort da, ohne neu einzufliegen */
#bildschirm-ergebnis.still .platz-zeile.erscheint,
#bildschirm-ergebnis.still .danach { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .knopf::after { animation: none; display: none; }
}

/* ----- Und jetzt? Deine Werte im Alltag ----- */
.alltag-liste { margin: 18px 0 20px; }
.alltag-eintrag {
  margin-bottom: 14px;
  padding: 14px 14px 12px;
  background: var(--blau-zart);
  border-radius: 14px;
}
.alltag-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.alltag-kopf .platz {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blau);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
}
.alltag-wert { font-family: var(--schrift-buch); font-size: 20px; }
.alltag-feld {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--blau-linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 17px;      /* ab 16 Pixel zoomt das iPhone beim Antippen nicht hinein */
  line-height: 1.4;
  resize: vertical;
}
.alltag-feld:focus { outline: 2px solid var(--blau); outline-offset: 1px; }

/* NEU V0.13: Was nur beim Vorlesen wichtig ist, sieht man beim Selbst-Lesen nicht */
body[data-modus="text"] .nur-vorlesen { display: none; }

/* NEU V0.14: Rückmeldung nach "Als Text sichern" */
.text-hinweis {
  margin: -2px 0 12px;
  padding: 10px 14px;
  background: var(--blau-zart);
  border-radius: 12px;
  color: var(--text-mittel);
}

/* NEU V0.15: Während der Fragen glänzt nichts (Alina: lenkt beim Antworten ab).
   Das gilt für 1 und 2, "Frage nochmal anhören" und auch die Prüffragen,
   die auf demselben Bildschirm laufen. */
#bildschirm-frage .knopf::after { display: none; }

/* =====================================================================
   NEU V0.16: Der Türsteher (tuer.html)
   Die erste Seite im Internet: Code eingeben, dann geht es zur Übung.
   ===================================================================== */
.tuer-form { margin: 26px 0 18px; }
.tuer-form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--schrift-buch);
  font-size: 19px;
}
.tuer-form input {
  display: block;
  width: 100%;
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 20px;            /* ab 16 Pixel zoomt das iPhone beim Tippen nicht hinein */
  letter-spacing: 0.06em;
}
.tuer-form input:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
/* Falscher Code: kurzer roter Satz direkt unter dem Feld */
.tuer-fehler {
  margin: -6px 0 14px;
  color: var(--warnung);
  font-size: 16px;
}

/* =====================================================================
   NEU V0.21: Abschluss-Seite
   Knopf "Übung abschließen" bei "Und jetzt?", danach Haken, der sich
   einmal selbst zeichnet, und Alinas Unterschrift (malt app.js, Teil 17).
   ===================================================================== */
.knopf.abschliessen { margin-top: 28px; }

.haken { display: block; width: 88px; height: 88px; margin: 22px 0 4px; }
.haken circle { fill: var(--blau-zart); stroke: var(--blau-linie); stroke-width: 2; }
.haken path {
  fill: none;
  stroke: var(--blau);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 80;           /* der Haken ist ein Strich von gut 70 Einheiten Länge … */
  stroke-dashoffset: 80;          /* … der zuerst ganz versteckt ist … */
  animation: haken-zeichnen 0.7s ease-out 0.3s forwards;   /* … und sich dann einmal zeichnet */
}
@keyframes haken-zeichnen { to { stroke-dashoffset: 0; } }

.unterschrift { display: block; margin: 4px 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .haken path { animation: none; stroke-dashoffset: 0; }
}


/* ----- NEU V0.23: »So geht es weiter« beim Ergebnis, zwei Wege zur Auswahl (Alina, 09.11.2026) ----- */
.weg {
  margin: 14px 0 0;
  padding: 16px;
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: var(--karte);
}
.weg.empfohlen { border: 2px solid var(--blau); }   /* Alinas Empfehlung (V0.24: weiß mit blauem Rand) */
.weg-etikett {
  margin: 0 0 4px;
  color: var(--blau-schrift);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.weg h3 { margin: 0 0 6px; font-family: var(--schrift-buch); font-size: 21px; }
.weg-text { margin: 0 0 10px; color: var(--text-mittel); }
.weg-hinweis { margin: 0 0 14px; }
.weg .knopf { margin: 0; }
.weg-text + .knopf { margin-top: 4px; }

/* ----- NEU V0.24: »Und jetzt? Was machst du damit?« auf eigener grauer Fläche über die ganze Breite ----- */
.weiter-band {
  margin: 34px -16px 0;          /* -16px: so breit wie der Bildschirm (main hat 16px Rand) */
  padding: 8px 16px 26px;
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.weiter-band h2 { margin: 22px 0 6px; }
.weiter-band .einleitung { margin: 0 0 4px; }
.weg .knopf.zweiter { margin-top: 10px; }
.weg .bild-bereich { margin-top: 12px; }

/* ----- NEU V0.26: Bei »Mir reicht meine Rangfolge« glänzt nichts, der Blick geht nur auf »Zum nächsten Schritt« (Alina) ----- */
.weg:not(.empfohlen) .knopf::after { display: none; }