/* Quest-Abschnitt: alles, was nur der Selbstlauf im Gerät braucht.
   Eigene Datei statt Anbau an app-ui.css, weil app-ui.css die App-Oberfläche
   nachbaut (und auf mehreren Seiten steckt), der Film hier ist reine Website.
   Gehört in index.html direkt nach app-ui.css eingebunden.

   Farben: --primary #5fb5ab, --pop #ff8a3d, Gerätehintergrund #0e1213.
   Alles, was sich bewegt, steht unten im reduced-motion-Block noch einmal still. */

/* ---------- Fortschrittslinie ---------- */
/* Der einzige Hinweis darauf, dass die Quest von selbst läuft. Bewusst nur zwei
   Pixel oben am Bildschirmrand: Ein Play-Knopf würde aus dem Handy eine
   Video-Vorschau machen und vom Inhalt ablenken. quest.js schiebt sie über
   scaleX vorwärts und blendet sie aus, sobald jemand selbst übernimmt. */
.q-lauf {
  position: absolute; inset: 0 0 auto 0; z-index: 4;
  display: block; height: 2px;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #5fb5ab 0%, #5fb5ab 58%, #ff8a3d 100%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.q-phone--eigen .q-lauf { opacity: 0 !important; }

/* ---------- Schreibmaschine ---------- */
/* Der blinkende Cursor hängt an der Stelle, die gerade getippt wird, dadurch
   sieht man, wo der Text weitergeht, ohne dass etwas springt. Höhe in em, damit
   er in Überschrift und Fliesstext gleich gut sitzt. */
.a-screen--quest [data-tipp].is-tippt::after {
  content: '';
  display: inline-block;
  width: 2px; height: .95em;
  margin-left: 3px;
  vertical-align: -.12em;
  border-radius: 1px;
  background: #5fb5ab;
  animation: qBlink .95s steps(1, end) infinite;
}
@keyframes qBlink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* Stellen, die noch gar nicht getippt sind, nehmen auch keinen Platz weg. Sonst
   stünde vor dem Text ein leerer grauer Kasten und der Abstand wäre schon da,
   bevor irgendetwas drinsteht. */
.a-screen--quest [data-tipp]:empty { display: none; }

/* Während sich die Antwort ins Feld schreibt, atmet der Rahmen leicht. Das Feld
   bekommt dabei keinen echten Fokus (sonst würde die Seite dorthin springen),
   der Puls ersetzt die fehlende Fokus-Rückmeldung. */
.a-screen--quest .a-qfeld input.is-tippt {
  border-color: rgba(95, 181, 171, .75);
  background: rgba(95, 181, 171, .07);
  animation: qFeldPuls 1.1s ease-in-out infinite;
}
@keyframes qFeldPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 181, 171, 0) }
  50%      { box-shadow: 0 0 0 3px rgba(95, 181, 171, .16) }
}

/* ---------- Bild zur Sunk-Cost-Falle ---------- */
/* Der Punkt läuft über die Strecke, die schon bezahlt ist, erreicht die Marke,
   und läuft trotzdem weiter in die gestrichelte Leere. Genau der Denkfehler, um
   den es in der Quest geht, ohne einen einzigen zusätzlichen Satz Text. */
/* margin-top:auto schiebt das Bild an den unteren Rand des Textbereichs, direkt
   über die Quellenzeile. Zwei Gründe: Der freie Platz sammelt sich nicht mehr
   unter dem Bild, und beim Tippen bleibt das Bild stehen, statt Zeile für Zeile
   nach unten zu rutschen. Dafür gibt die Quellenzeile ihr eigenes auto ab. */
.q-sunk { display: block; flex: none; min-height: 46px; margin-top: auto; overflow: visible; }
.a-screen--quest .a-qquelle { margin-top: 0; }

/* Die Leerstrecke marschiert vorwärts: Sie führt nirgendwohin, hört aber nie auf. */
.q-sunk__leer { animation: qMarsch 1.15s linear infinite; }
@keyframes qMarsch { to { stroke-dashoffset: -12 } }

.q-sunk__punkt {
  transform-box: view-box; transform-origin: 0 0;
  animation: qFahrt 4.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes qFahrt {
  0%   { transform: translateX(0);     opacity: 0;  fill: #5fb5ab }
  7%   { opacity: 1 }
  40%  { transform: translateX(146px); fill: #5fb5ab }
  52%  { fill: #ff8a3d }
  92%  { transform: translateX(340px); opacity: .9; fill: #ff8a3d }
  100% { transform: translateX(352px); opacity: 0;  fill: #ff8a3d }
}

/* Die Marke leuchtet kurz auf, wenn der Punkt sie überfährt, der Moment, in dem
   man hätte aussteigen können. */
.q-sunk__halt { animation: qHalt 4.6s linear infinite; }
@keyframes qHalt { 0%, 38% { opacity: .45 } 45% { opacity: 1 } 62%, 100% { opacity: .45 } }

.q-sunk__t--leer { animation: qLeer 4.6s linear infinite; }
@keyframes qLeer { 0%, 42% { opacity: .22 } 58%, 100% { opacity: .85 } }

/* ---------- Bedienbarkeit ---------- */
/* Das Gerät ist echt bedienbar, also braucht es auch einen sichtbaren Fokus.
   Orange statt Türkis, damit der Ring auf dem türkisen Knopf nicht verschwindet. */
.a-screen--quest .a-qbtn:focus-visible,
.a-screen--quest .a-qzurueck:focus-visible,
.a-screen--quest .a-qfeld input:focus-visible {
  outline: 2px solid #ff8a3d;
  outline-offset: 2px;
}

/* ---------- Ohne Bewegung ---------- */
/* Wer Bewegung abbestellt hat, bekommt sofort den vollen Text und bedient die
   Quest selbst (quest.js schaltet den Selbstlauf dann gar nicht erst ein).
   Hier bleibt nur noch stillzustellen, was rein über CSS läuft. */
@media (prefers-reduced-motion: reduce) {
  .q-lauf { display: none; }
  .a-screen--quest [data-tipp].is-tippt::after { display: none; }
  .a-screen--quest .a-qfeld input.is-tippt,
  .q-sunk__leer, .q-sunk__punkt, .q-sunk__halt, .q-sunk__t--leer { animation: none; }
}

/* Das Gerät ist bedienbar: Zeigerereignisse müssen bis zum Knopf und zum Feld
   durchkommen, sonst kann niemand den Selbstlauf übernehmen. Markieren bleibt
   aus, damit ein Wischen über das Gerät scrollt und nicht Text blau einfärbt.
   Das Eingabefeld ist davon ausgenommen: dort muss man korrigieren können. */
.q-phone .iphone__screen{user-select:none}
.q-phone .a-qfeld input{user-select:text}

/* ---------- Der Satz unter dem Gerät ---------- */
/* Bühne und Gerätegrösse stehen in site.css (.quest-buehne, .q-phone): Dort
   ist bewusst entschieden, dass das Gerät kleiner ist als ein echtes Handy. */
.quest-hinweis{margin:14px auto 0;max-width:340px;text-align:center;
  font-size:13px;line-height:1.5;color:var(--muted)}

/* ---------- Trefferflächen ----------
   Alles im Gerät ist um Gerätebreite/390 verkleinert: Auf dem Handy schrumpft
   der Knopf auf rund 38px und der Pfeil auf rund 25px. Sichtbar soll beides
   genau so bleiben wie in der App, greifbar aber mindestens 44px sein. Darum
   legt sich um beide eine unsichtbare Fläche, die nur den Finger fängt. */
.a-screen--quest .a-qbtn,
.a-screen--quest .a-qzurueck{position:relative}
.a-screen--quest .a-qbtn::after{content:'';position:absolute;inset:-9px}
.a-screen--quest .a-qzurueck::after{content:'';position:absolute;inset:-13px}


/* ---------- Der Abschluss ----------
   Vorher stand am Ende nur eine Zahl im Gerät. Jetzt reagiert das Gerät selbst:
   ein kurzer Ruck wie beim Vibrieren, dazu ein Leuchten, das um den Rahmen
   aufgeht, dasselbe Grün, mit dem die App einen Abschluss feiert. */
.q-phone--feier { animation: qRuck .5s ease-in-out, qGlanz 1.6s cubic-bezier(.2,.7,.3,1); }
@keyframes qRuck {
  0%, 100% { transform: translateX(0) rotate(0); }
  10%      { transform: translateX(-3.5px) rotate(-.55deg); }
  26%      { transform: translateX(3.5px) rotate(.55deg); }
  44%      { transform: translateX(-2.4px) rotate(-.35deg); }
  62%      { transform: translateX(2.4px) rotate(.35deg); }
  80%      { transform: translateX(-1.1px) rotate(0); }
}
@keyframes qGlanz {
  0%   { filter: drop-shadow(0 0 0 rgba(95,181,171,0)); }
  16%  { filter: drop-shadow(0 0 30px rgba(95,181,171,.8)); }
  46%  { filter: drop-shadow(0 0 18px rgba(95,181,171,.45)); }
  100% { filter: drop-shadow(0 0 0 rgba(95,181,171,0)); }
}
@media (prefers-reduced-motion: reduce) {
  .q-phone--feier { animation: none; }
}