/* Gemeinsames Gerüst der Werklinie-Ablaufschleifen.
   Farben und Typo gespiegelt aus frontend/src/styles/global.css, damit die
   Schleifen aussehen wie die echten Demos.

   Warum eine geteilte Datei und nicht wie bei buero-/angebot-/wissen-loop.html
   je eine Kopie: bei fünf weiteren Schleifen wären das rund dreitausend Zeilen
   Dopplung. Die drei bestehenden bleiben bewusst unangetastet, sie sind
   verifiziert und ausgeliefert; sie später nachzuziehen ist ein eigener,
   getrennt prüfbarer Schritt.

   Jede Schleife bringt darüber hinaus nur noch ihr eigenes Innenleben mit. */

:root {
  --ink: #1b1d1c;
  --ink-soft: #3d4240;
  --muted: #5f645e;
  --canvas: #f3f1ec;
  --surface: #ffffff;
  --surface-alt: #ebe8e1;
  --line: #d4d0c7;
  --brand: #1f5f5b;
  --brand-soft: #2e7d76;
  --chat-head: #686f68;
  --avatar: #c7bfb2;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 28px 20px 40px;
}
.stage { position: relative; max-width: 1080px; margin: 0 auto; }

/* Einbett-Modus (?embed=1): ohne eigenen Kopf und ohne eigenen Hintergrund,
   damit die Schleife in einer Karte der Werkzeugseite sitzt statt als zweite
   Seite darin. Die Höhe meldet die Seite per postMessage nach oben. */
body.embed { background: transparent; padding: 0; }
body.embed .hero { display: none; }
body.embed .cols { margin-top: 0; }
/* Kein Bedienelement in der Einbettung: es ragte unter die Bühne und erzeugte
   dadurch eine Scrollhöhe im Rahmen. Ein Klick auf die Fläche startet ohnehin neu. */
body.embed .replay { display: none; }

/* ── Kopf, nur außerhalb der Einbettung sichtbar ── */
.hero {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand); margin: 0;
}
h1 { margin: 6px 0 0; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.stake { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.lede { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }

/* ── Zwei Spalten: links was reinkommt, rechts was rauskommt ── */
.cols {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  align-items: start;
}
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

.card-in {
  border: 1px solid var(--line); background: var(--surface-alt);
  border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.card-in header { background: var(--chat-head); color: #fff; padding: 12px 16px; }
.lbl { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.lbl-sub { font-size: 11px; line-height: 1.3; color: rgba(255,255,255,.6); }
.who { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.avatar {
  width: 36px; height: 36px; border-radius: 999px; background: var(--avatar);
  color: #3c3a35; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.who-name { font-size: 14px; font-weight: 700; }
.who-meta { font-size: 11px; color: rgba(255,255,255,.75); }
.chip {
  margin-left: auto; flex: none; font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.85);
  padding: 4px 8px; border-radius: 999px;
}
.body-in { padding: 16px; }

.bubble {
  background: var(--surface); border-radius: 16px 16px 16px 4px;
  padding: 10px 12px; max-width: 92%;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 14px; line-height: 1.55;
}
.bubble.mine { border-radius: 16px 16px 4px 16px; margin-left: auto; font-size: 15px; }
.time { margin: 4px 0 0; text-align: right; font-size: 10px; color: var(--muted); }

/* Mikrofon mit Pegel, für die Schleifen mit Spracheingabe */
.mic-row { display: flex; align-items: center; gap: 12px; }
.mic {
  width: 42px; height: 42px; border-radius: 999px; flex: none;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.levels { display: flex; align-items: center; gap: 4px; height: 26px; }
.levels span {
  width: 3px; border-radius: 999px; background: var(--brand-soft); opacity: .55;
  animation: bounce 1.1s ease-in-out infinite;
}
.levels span:nth-child(1) { height: 10px; animation-delay: 0s }
.levels span:nth-child(2) { height: 20px; animation-delay: .12s }
.levels span:nth-child(3) { height: 26px; animation-delay: .24s }
.levels span:nth-child(4) { height: 14px; animation-delay: .36s }
.levels span:nth-child(5) { height: 22px; animation-delay: .48s }
.levels span:nth-child(6) { height: 9px;  animation-delay: .6s }
@keyframes bounce { 0%,100% { transform: scaleY(.5) } 50% { transform: scaleY(1) } }

.btn-ask {
  margin-top: 12px; width: 100%; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--brand); color: #fff; border: 0; border-radius: 16px;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 14px 30px rgba(31,95,91,.3);
  transition: transform .12s ease, filter .12s ease;
}
.btn-ask.press { transform: scale(.975); filter: brightness(1.12); }

/* Eingabezeile wie in der echten Oberfläche: Text links, Senden rechts. */
.composer {
  margin-top: 14px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 6px 6px 6px 16px;
}
.composer p { margin: 0; flex: 1; min-width: 0; font-size: 14px; color: var(--muted); }
.btn-send {
  width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px;
  background: var(--brand); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px rgba(31,95,91,.3);
  transition: transform .12s ease, filter .12s ease;
}
.btn-send.press { transform: scale(.94); filter: brightness(1.12); }

/* Die Ergebniskarte hält von Anfang an ungefähr die Höhe, die sie am Ende
   braucht. Die einbettende Karte übernimmt nur wachsende Höhen, damit sie nicht
   alle 15 Sekunden springt; ohne Reserve hinterließe die kurze Wartephase
   dadurch ein großes Loch unter der Schleife. Die Reserve sitzt bewusst an der
   Karte und nicht an der Wartefläche selbst: eine riesige gestrichelte Fläche
   mit einer Zeile Text darin liest sich als Fehler. Den Wert setzt jede
   Schleife selbst, gemessen statt geschätzt. */
.card-out {
  border: 2px solid var(--brand); background: var(--surface);
  border-radius: 18px; padding: 18px;
  box-shadow: 0 20px 55px rgba(31,95,91,.18);
}
.out-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lbl-out { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.lbl-out-sub { font-size: 11px; color: var(--muted); line-height: 1.3; }
h2 { margin: 4px 0 0; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.out-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 190px; text-align: center;
  border: 1px dashed var(--line); border-radius: 16px; background: var(--canvas);
  padding: 32px 16px;
}
.placeholder p { margin: 12px 0 0; font-size: 14px; font-weight: 600; }

.loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 190px; text-align: center;
  border: 1px dashed rgba(31,95,91,.45); border-radius: 16px;
  background: rgba(31,95,91,.08); padding: 32px 16px;
}
.loading p { margin: 12px 0 0; font-size: 14px; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 999px; background: var(--brand); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* Formularzeilen, wie sie die Prüfen-und-Korrigieren-Ansicht der Demos zeigt */
.feld { margin-top: 10px; }
.feld-lbl { display: block; font-size: 11px; font-weight: 600; color: var(--muted); }
.feld-box {
  margin-top: 3px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 8px 11px; font-size: 15px; font-weight: 600;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld-box.leer { color: var(--muted); font-weight: 500; }
.feld-box.press { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(31,95,91,.18); }
.feld-paar { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.flash { animation: flash 1.1s ease-out; }
@keyframes flash {
  from { background: rgba(31,95,91,.22); }
  to   { background: transparent; }
}

.notice {
  margin: 0 0 12px; border: 1px solid rgba(31,95,91,.45);
  background: rgba(31,95,91,.12); border-radius: 12px;
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--brand);
}
.fineprint { margin: 10px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); }

/* Kurzfassung einzelner Textstellen. Gestapelt zählt die Pointe, nicht der
   ausformulierte Satz; ein Paar aus langer und kurzer Fassung ist lesbarer als
   ein Satz, den man auf dem Handy dreimal umbrechen lässt. */
.nur-schmal { display: none; }

/* Auftritt der Stufen */
.step { opacity: 0; transform: translateY(6px); }
.step.on { opacity: 1; transform: none; transition: opacity .28s ease, transform .28s cubic-bezier(.22,1,.36,1); }
[hidden] { display: none !important; }

/* Mauszeiger, damit im Film sichtbar ist, dass geklickt wird */
.cursor {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px;
  pointer-events: none; opacity: 0; z-index: 5;
  transition: transform .75s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.cursor.on { opacity: 1; }
.ring {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border-radius: 999px; border: 2px solid var(--brand); opacity: 0; z-index: 4; pointer-events: none;
}
.ring.go { animation: ripple .5s ease-out; }
@keyframes ripple {
  from { opacity: .7; transform: scale(.3); }
  to   { opacity: 0;  transform: scale(1.5); }
}

/* Standardmäßig unsichtbar, damit eine Bildschirmaufnahme sauber bleibt.
   Erscheint erst, wenn die Maus über der Bühne ist. */
.replay {
  position: absolute; right: 0; top: -22px; color: var(--muted);
  background: none; border: 0; font: inherit; font-size: 11px; cursor: pointer;
  opacity: 0; transition: opacity .2s ease;
}
.stage:hover .replay { opacity: .55; }
.replay:hover { opacity: 1; }
.replay:focus-visible { opacity: 1; outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── Handy-Kurzfassung ──
   Gestapelt ist die volle Fassung höher als ein Handybildschirm. Auf schmalen
   Geräten zeigt die Schleife deshalb die Pointe statt jedes Detail. Ziel ist
   ein Daumenwisch. Was darüber hinaus wegfällt, entscheidet jede Schleife. */
@media (max-width: 860px) {
  /* Die Unterzeile im Kopf erklärt, was die Überschrift darüber schon sagt.
     Gestapelt kostet sie in jeder Schleife rund 14px. */
  .avatar, .who-meta, .out-sub, .fineprint, .time, .lbl-sub, .nur-breit { display: none; }
  .nur-schmal { display: inline; }
  .card-in header { padding: 10px 14px; }
  .who { margin-top: 6px; }
  .body-in { padding: 14px; }
  .mic { width: 36px; height: 36px; }
  .card-out { padding: 14px; }
  h2 { font-size: 19px; }
  .bubble { max-width: 100%; }
  .feld { margin-top: 8px; }
  .feld-box { padding: 7px 10px; font-size: 14px; }
  .placeholder, .loading { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .step, .step.on { opacity: 1; transform: none; transition: none; }
  .cursor, .ring { display: none; }
  .dot, .levels span, .flash { animation: none; }
}