/* EMBRACE CHANGE — Ebene 3: Seite und Ablauf
 *
 * Mobil ist die Hauptansicht, nicht die verkleinerte Desktopseite:
 * eigene Reihenfolge, eigener Bildausschnitt, Bedienung in der Daumenzone.
 * Ab 720px wird dieselbe Struktur breiter, sie wird nicht umgebaut.
 */

.shell {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---------------------------------------------------------------- Topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding-top: env(safe-area-inset-top);
}

/* Die Wortmarke ist der Heimweg. Als Knopf braucht sie die Browservorgaben
   zurückgesetzt, sonst erbt sie Rahmen und Systemschrift. */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: -.01em;
  cursor: pointer;
}
/* Das App-Icon in klein: dieselbe Collage, die auch auf dem Startbildschirm liegt. */
.brand__icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--exit);
}
.brand:hover .brand__icon { transform: scale(1.06); }

.topbar__note {
  max-width: 15ch;
  color: var(--muted-foreground);
  font-size: .6875rem;
  line-height: 1.3;
  text-align: right;
}

/* ------------------------------------------------------------------ View */

.view { animation: rise var(--enter) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- Startseite */

/* Vier Lebensbereiche als Collage, darüber der Schriftzug. Das Bild sagt,
   worum es geht, bevor ein Wort gelesen ist. */
.hero {
  position: relative;
  margin-top: var(--space-3);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--muted);
  box-shadow: var(--shadow-md);
}

.collage__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--background);
}
.collage__grid img {
  width: 100%;
  aspect-ratio: 1;             /* Platz reserviert, kein Nachrücken beim Laden */
  object-fit: cover;
}

.collage__mark {
  margin: 0;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(250, 246, 238, .94);
  color: var(--foreground);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}


.start__copy { margin-top: var(--space-6); }

.start h1 {
  font-size: clamp(2rem, 8.5vw, 2.75rem);
  line-height: 1.08;
}

.start__sub {
  margin-top: var(--space-2);
  color: var(--ring);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
}

.start__lead {
  margin-top: var(--space-3);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.start__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: .8125rem;
}

.gate { display: grid; gap: var(--space-4); margin-top: var(--space-6); }

/* -------------------------------------------------------- Frage-Bildschirm */

.stage { display: flex; flex-direction: column; min-height: 100svh; }

/* Je Phase eine Kachel aus der Collage, klein und quadratisch neben dem
   Phasennamen. Als breites Band blieb vom quadratischen Foto nur ein
   Streifen übrig (Lukas, 03.09.). */
.band {
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--muted);
  box-shadow: var(--shadow-sm);
}
.band img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--enter);
}

.stage__head {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  align-items: center;
}
.stage__headText { display: grid; gap: var(--space-3); min-width: 0; }

.stage__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--muted-foreground);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.stage__phase { color: var(--ring); }

/* Frage und Antwort stehen auf einer Karte. Das trennt das Gespräch vom
   Rahmen drumherum und gibt jedem Schritt ein eigenes Blatt. */
.stage__card {
  margin-top: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

/* Die Spiegelung ist der Moment, in dem zugehört wurde. Sie bekommt eine
   eigene, ruhige Fläche mit einem Punkt davor, wie eine Sprechblase. */
.mirror {
  position: relative;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 1rem;
  line-height: 1.6;
}
.mirror::before {
  content: "";
  position: absolute;
  left: var(--space-3); top: calc(var(--space-4) + .45em);
  width: 8px; height: 8px;
  border-radius: var(--radius-full);
  background: var(--primary);
}

.question {
  font-size: clamp(1.375rem, 5.8vw, 1.875rem);
  line-height: 1.24;
}

.stage__body { margin-top: var(--space-5); display: grid; gap: var(--space-4); }

/* Freiraum unter dem Inhalt, damit die klebende Leiste am Ende des Scrollens
   nichts verdeckt. Der Wert liegt über der Höhe der Leiste. */
.stage__spacer { flex: 1; min-height: 112px; }

/* Bedienung in der Daumenzone. Sie klebt unten, bleibt aber Teil des Flusses. */
.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-inline: calc(-1 * var(--space-5));
  padding: var(--space-3) var(--space-5)
           calc(var(--space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: blur(12px);
}

/* Zurück links, Hauptaktion rechts daneben. */
.actionbar__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: center;
}
.actionbar__row:has(> [hidden]) { grid-template-columns: 1fr; }

.actionbar__hint {
  display: none;               /* Tastaturkürzel nur, wo es eine Tastatur gibt */
  color: var(--muted-foreground);
  font-size: .75rem;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .actionbar__hint:not([hidden]) { display: block; }
}

/* Leiser Ausstieg. Auffindbar, aber leise genug, dass er niemanden aus dem
   Gespräch zieht. */
.actionbar__reset {
  display: block;
  margin: var(--space-2) auto 0;
  padding: var(--space-1) var(--space-3);
  min-height: 32px;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font-size: .75rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.actionbar__reset:hover { color: var(--foreground); }

.counter { color: var(--muted-foreground); font-size: .75rem; text-align: right; }

/* --------------------------------------------------------------- Ergebnis */

.result { padding-bottom: var(--space-16); }

.result__head {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.result__head > div { display: grid; gap: var(--space-3); min-width: 0; }
.result h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.12; }

/* Die Auswertung ist ein Stapel Blätter: jeder Abschnitt eine Karte mit
   Nummer, die Kernfrage als einziges farbiges Blatt in der Mitte. */
.report { margin-top: var(--space-6); display: grid; gap: var(--space-3); }

.report__part {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.report h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.report__num {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: .75rem;
  letter-spacing: 0;
}

.report p, .report li {
  color: var(--body);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.report p + p { margin-top: var(--space-3); }

/* Die drei Versuche: jeder auf eigener Zeile mit großer Nummer. */
.tries {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: versuch;
  display: grid;
  gap: var(--space-3);
}
.tries li {
  counter-increment: versuch;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--muted);
}
.tries li::before {
  content: counter(versuch);
  color: var(--ring);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
}

/* Die eine Frage ist der Höhepunkt. Sie steht auf Hellblau, größer, und ist
   der einzige farbige Block der ganzen Auswertung. */
.report__part--keystone {
  border-color: transparent;
  background: var(--accent);
  box-shadow: var(--shadow-md);
}
.report__part--keystone h2 { color: var(--accent-foreground); }
.report__part--keystone .report__num { background: var(--accent-foreground); color: var(--accent); }
.report__part--keystone p {
  color: var(--accent-foreground);
  font-size: clamp(1.3125rem, 5.5vw, 1.75rem);
  line-height: 1.3;
}
/* Nur die Frage selbst ist groß. Der Absatz „Sie kommt aus: …" darunter
   belegt, aus welchen Antworten sie entstanden ist, und bleibt Lesegröße. */
.report__part--keystone p + p {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: .9375rem;
  line-height: 1.5;
  opacity: .8;
}

.legal { margin-top: var(--space-8); color: var(--muted-foreground); font-size: .8125rem; }

/* ----------------------------------------------------------------- Footer */

.footer {
  margin-top: var(--space-12);
  padding: var(--space-5) 0 calc(var(--space-6) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: .75rem;
}
.footer__inner { display: grid; gap: var(--space-2); }
.footer a { color: inherit; }

/* ------------------------------------------------------------ Ab Tablet */

@media (min-width: 720px) {
  .shell { max-width: 720px; padding-inline: var(--space-8); }
  .band { width: 64px; height: 64px; }
  .stage__head, .result__head { grid-template-columns: 64px 1fr; }
  .start h1 { font-size: 3rem; }
  .question { font-size: 2.125rem; }
  .stage__card { padding: var(--space-8); }
  .report__part { padding: var(--space-8); }
  .report p, .report li { font-size: 1.125rem; }
}

/* ------------------------------------------------------------ Ab Desktop */

@media (min-width: 1024px) {
  .shell { max-width: 960px; }

  /* Auf breiten Schirmen steht die Collage neben dem Text statt darüber. */
  .start__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    margin-top: var(--space-8);
  }
  .hero { margin-top: 0; }
  .start__copy { margin-top: 0; }
  .start h1 { font-size: 3.25rem; }

  .stage { max-width: 720px; margin-inline: auto; }

  /* Auf dem Desktop gibt es keine Daumenzone: die Leiste löst sich. */
  .actionbar {
    position: static;
    margin-inline: 0;
    padding: var(--space-6) 0 0;
    border-top: 0;
    background: transparent;
    backdrop-filter: none;
  }
  .actionbar__row { grid-template-columns: 1fr auto; align-items: center; }
  .actionbar .btn--ghost { justify-self: start; }
  .actionbar .btn--block { width: auto; min-width: 220px; justify-self: end; }
  .gate .btn--block { width: auto; min-width: 240px; justify-self: start; }
}

/* ------------------------------------------------------------ Die Reise ---
 * Ein Stein je Schritt statt drei Balken. Der Mensch sieht, wo er steht und
 * dass Stationen kommen: die Rauten sind die Zwischenstände.
 */
.rail { display: flex; align-items: center; gap: 6px; }

.stein {
  width: 7px; height: 7px;
  flex: 0 1 auto;
  border-radius: var(--radius-full);
  background: var(--muted);
  transition: background 260ms var(--ease), transform 260ms var(--ease);
}
.stein--halt {
  width: 9px; height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
}
.stein--fertig { background: var(--primary); }
.stein--hier {
  background: var(--ring);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ring) 18%, transparent);
}
.stein--halt.stein--hier { transform: rotate(45deg) scale(1.4); }

/* Tiefenmesser: zeigt, wie viel jemand selbst geschrieben hat. Kein Punktestand. */
.tiefe { margin-top: var(--space-3); display: grid; gap: 6px; }
.tiefe__spur {
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--muted);
  overflow: hidden;
}
.tiefe__spur span {
  display: block;
  height: 100%;
  width: calc(var(--tiefe, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--ring));
  transition: width 700ms var(--ease);
}
.tiefe__text {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: .6875rem; color: var(--muted-foreground);
  letter-spacing: .04em; text-transform: uppercase;
}

/* Die Frage entsteht sichtbar, mit einem Strich am Ende. */
.question--tippt::after {
  content: "";
  display: inline-block;
  width: 2px; height: .95em;
  margin-left: 2px;
  vertical-align: -.1em;
  background: var(--ring);
  animation: blinken 900ms steps(2, start) infinite;
}
@keyframes blinken { 50% { opacity: 0; } }

.mirror--auf { animation: heben 420ms var(--ease) both; }
@keyframes heben {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Finale ---
 * Die eine Frage bekommt den Bildschirm für sich, bevor der Rest kommt.
 */
/* Während der Bühne verschwindet der Rest der Seite. */
.result--buehne .result__head,
.result--buehne .note,
.result--buehne .report,
.result--buehne #heimUnten,
.result--buehne .legal { display: none; }

.result--buehne { display: flex; flex-direction: column; justify-content: center; min-height: 82svh; }

.buehne {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  margin: var(--space-4) 0;
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--accent);
  box-shadow: var(--shadow-lg);
  animation: buehneAuf 620ms var(--ease) both;
}
@keyframes buehneAuf {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* Die Kinder kommen nacheinander: Kicker, Frage, Zahlen, Knopf. */
.buehne > * { animation: buehneAuf 520ms var(--ease) both; }
.buehne > *:nth-child(1) { animation-delay: 120ms; }
.buehne > *:nth-child(2) { animation-delay: 260ms; }
.buehne > *:nth-child(3) { animation-delay: 620ms; }
.buehne > *:nth-child(4) { animation-delay: 780ms; }
.buehne--zu { animation: buehneZu 240ms var(--ease) both; }
@keyframes buehneZu {
  to { opacity: 0; transform: translateY(-10px); }
}

.buehne__kicker {
  color: var(--accent-foreground);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  opacity: .7;
}
.buehne__frage {
  color: var(--accent-foreground);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 6.4vw, 2.25rem);
  line-height: 1.28;
  text-wrap: balance;
}
.buehne__zahlen {
  color: var(--accent-foreground);
  font-size: .8125rem;
  opacity: .65;
}
.buehne .btn { background: var(--accent-foreground); color: var(--accent); }
.buehne .btn:hover { background: var(--foreground); }

@media (min-width: 720px) {
  .buehne { padding: var(--space-12) var(--space-10); }
}
@media (prefers-reduced-motion: reduce) {
  .buehne, .buehne > * { animation: none; }
}