/* ==========================================================================
   innovio – Werkzeuge (Phase 1)
   Ergaenzt site.css, ersetzt nichts. Nur was diese Seite zusaetzlich braucht:
   Chatverlauf, Praemienaufteilung und die Kacheln fuer Kommendes.
   Alle Farben und Masse kommen aus den Tokens von site.css.

   Bewegung ist hier ueberall inhaltlich: Der Tippindikator zeigt, dass der Bot
   erst sucht und dann formuliert, die Balken zeigen die Verschiebung zwischen
   Sparen und Kosten. Nichts bewegt sich zur Zierde.
   ========================================================================== */

/* --- Statusmarke ---------------------------------------------------------- *
   Keine Pille mit Punkt davor: Diese Form ist auf jeder zweiten Website zu
   sehen und traegt nichts bei. Stattdessen eine gesperrte Versalzeile mit
   einer Haarlinie, die den Rest der Breite ausfuellt. Das nimmt die
   Linien-Sprache der Marke auf und braucht keine zweite Farbflaeche.

   Einzige Fassung: "Bald verfuegbar". Interne Begriffe wie Phasen oder
   Bauzustaende gehoeren nicht auf eine Seite fuer Kundinnen und Kunden. */

.wz-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--matcha-700);
  margin: 0 0 14px;
}
.wz-status::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

/* --- Zwei Spalten: Text links, Vorfuehrung rechts ------------------------- */

.wz-duo {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .wz-duo {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
  .wz-duo--flip > :first-child {
    order: 2;
  }
}
.wz-duo__text > * + * {
  margin-top: 16px;
}

/* --- Belegliste ----------------------------------------------------------- */

.wz-facts {
  display: grid;
  gap: 2px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.wz-facts li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.wz-facts li:last-child {
  border-bottom: 1px solid var(--line-soft);
}
.wz-facts b {
  flex: none;
  min-width: 5.6em;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Chatverlauf ---------------------------------------------------------- */

.wz-chat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.wz-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.02em;
}
.wz-chat__head svg {
  width: 17px;
  height: 17px;
  flex: none;
  stroke: var(--matcha-500);
}

/* Feste Mindesthoehe, damit die Seite beim Wechsel des Beispiels nicht
   springt. Der Wert ist die Hoehe der laengsten Antwort, nicht mehr: Jede
   zusaetzliche Hoehe waere eine Leerflaeche unter dem Verlauf. */
.wz-chat__stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  min-height: 214px;
}

.wz-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 15px;
  font-size: 0.875rem;
  line-height: 1.55;
}
.wz-msg--q {
  align-self: flex-end;
  background: var(--matcha);
  color: var(--ink);
  border-bottom-right-radius: 5px;
}
.wz-msg--a {
  align-self: flex-start;
  background: var(--paper-2);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.wz-msg b {
  font-weight: 600;
}

/* Quellenzeile: Der Beleg gehoert sichtbar an die Antwort, nicht in eine
   Fussnote. Das ist der Unterschied zu einem allgemeinen Sprachmodell. */
.wz-src {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: -4px;
  padding: 4px 11px;
  border-radius: var(--pill);
  border: 1px solid var(--line);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--matcha-700);
  font-variant-numeric: tabular-nums;
}
.wz-src svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.wz-src--keine {
  color: var(--text-faint);
}

.wz-typing {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 14px;
  background: var(--paper-2);
  border-radius: 15px;
  border-bottom-left-radius: 5px;
}
.wz-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  animation: wz-tippen 1.25s infinite ease-in-out;
}
.wz-typing span:nth-child(2) {
  animation-delay: 0.16s;
}
.wz-typing span:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes wz-tippen {
  0%, 65%, 100% {
    opacity: 0.28;
  }
  32% {
    opacity: 1;
  }
}

.wz-chat__ask {
  border-top: 1px solid var(--line-soft);
  padding: 16px 18px 18px;
  background: var(--paper);
}
.wz-chat__label {
  margin: 0 0 11px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Zwei Spalten statt Flusssatz: Vier verschieden lange Beschriftungen
   untereinander ergeben eine ausgefranste rechte Kante. Im Raster stehen die
   Kanten, und der Block wird halb so hoch. */
.wz-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 460px) {
  .wz-chips {
    grid-template-columns: 1fr;
  }
}
.wz-chips button {
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
  padding: 9px 14px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.wz-chips button:hover {
  border-color: var(--matcha-300);
  color: var(--text);
}
.wz-chips button[aria-pressed="true"] {
  border-color: var(--matcha-500);
  color: var(--text);
  background: var(--matcha-50);
}
.wz-chips button[disabled] {
  opacity: 0.5;
  cursor: default;
}

/* --- Praemienaufteilung --------------------------------------------------- */

.wz-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2.4vw, 26px);
}

.wz-split {
  margin: 4px 0 0;
}
.wz-split__bar {
  display: flex;
  height: 46px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--paper-2);
}
.wz-split__seg {
  transition: width 0.55s var(--ease);
  min-width: 2px;
}
.wz-split__seg--sparen {
  background: var(--matcha-500);
}
.wz-split__seg--risiko {
  background: var(--matcha);
}
.wz-split__seg--kosten {
  background: var(--ink);
}

.wz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.wz-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Farbwuerfel der Legende als Klassen, nicht als style-Attribut: Die
   Content-Security-Policy der Site erlaubt kein inline style (style-src 'self'),
   die Wuerfel blieben sonst farblos. */
.wz-legend i {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
}
.wz-legend i.is-sparen {
  background: var(--matcha-500);
}
.wz-legend i.is-risiko {
  background: var(--matcha);
}
.wz-legend i.is-kosten {
  background: var(--ink);
}
.wz-legend b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.wz-out {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}
@media (min-width: 560px) {
  .wz-out {
    grid-template-columns: 1fr 1fr;
  }
}
.wz-out__box {
  background: var(--paper-2);
  border-radius: var(--r);
  padding: 15px 17px;
}
.wz-out__box span {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-faint);
}
.wz-out__box b {
  display: block;
  margin-top: 5px;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* --- Kommendes ------------------------------------------------------------ *
   Die Kacheln nutzen .features und .tile aus site.css, damit sie exakt wie auf
   der Startseite sitzen. Hier steht nur, was der innoScore-Block zusaetzlich
   braucht: Er ist eine breite Kachel mit Ring links und Text rechts. */

.wz-scoreteaser {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
@media (min-width: 700px) {
  .wz-scoreteaser {
    grid-template-columns: auto minmax(0, 1fr);
  }
}
.wz-scoreteaser h3 {
  font-size: 1.18rem;
  margin: 0 0 8px;
}
.wz-scoreteaser p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.62;
}

/* --- Der Weg: drei Stationen, scrollgesteuert ----------------------------- *
   Die Fuellung der Schiene folgt der Scrollposition. Das ist keine Zierde: Sie
   zeigt, wie weit der Weg vom heutigen Stand bis zum Vollprodukt reicht und wo
   man dabei gerade steht. Ohne JavaScript oder bei reduzierter Bewegung ist
   die Schiene voll und alle Stationen sind hell.

   Masse: Schiene 3px ab 8px, Mitte also bei 9.5. Der Punkt misst 15px, seine
   Mitte liegt 7.5 unter seiner Oberkante, er beginnt also bei 2. Wegen
   border-box zaehlt der Rand in die 15px hinein; rechnet man ihn obendrauf,
   sitzt der Punkt zwei Pixel zu hoch.                                       */

.wz-weg {
  --fortschritt: 0%;
  position: relative;
  margin: 0;
  padding: 4px 0 0 0;
  list-style: none;
  display: grid;
  gap: clamp(26px, 3.5vw, 44px);
}

.wz-weg::before,
.wz-weg::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 2px;
}
.wz-weg::before {
  background: rgba(55, 58, 56, 0.15);
}
.wz-weg::after {
  background: var(--matcha-700);
  bottom: auto;
  height: var(--fortschritt);
  max-height: calc(100% - 28px);
  transition: height 0.1s linear;
}

.wz-weg__station {
  position: relative;
  padding-left: 42px;
}
.wz-weg__station::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid rgba(55, 58, 56, 0.18);
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
/* Erreicht: gefuellt, mit Hof und leicht groesser. Der Sprung muss beim
   Scrollen auffallen, sonst merkt niemand, dass sich etwas bewegt. */
.wz-weg__station.is-erreicht::before {
  background: var(--matcha-700);
  border-color: var(--matcha-700);
  box-shadow: 0 0 0 5px rgba(74, 102, 66, 0.16);
  transform: scale(1.12);
}

.wz-weg__wann {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.wz-weg__station.is-erreicht .wz-weg__wann {
  color: var(--matcha-700);
}
.wz-weg__station h3 {
  margin: 0 0 6px;
  font-size: 1.06rem;
}
.wz-weg__station p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 46ch;
}

/* Ab Tablet laeuft der Weg waagrecht: Drei Stationen untereinander lassen ein
   breites Band halb leer, und "Heute nach Ziel" liest sich von links nach
   rechts natuerlicher als von oben nach unten. */
@media (min-width: 760px) {
  .wz-weg {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(22px, 3vw, 44px);
    padding-top: 44px;
  }
  .wz-weg::before,
  .wz-weg::after {
    left: 7.5px;
    right: 7.5px;
    top: 8px;
    bottom: auto;
    width: auto;
    height: 3px;
    max-height: none;
  }
  .wz-weg::after {
    right: auto;
    width: var(--fortschritt);
    max-width: calc(100% - 15px);
    transition: width 0.1s linear;
  }
  .wz-weg__station {
    padding-left: 0;
  }
  .wz-weg__station::before {
    left: 0;
    top: -42px;
  }
  .wz-weg__station p {
    max-width: none;
  }
}

/* --- Sicherung fuer sehr schmale Geraete ---------------------------------- *
   site.css zwingt die Hero-Buttons unter 560px nebeneinander (nowrap). Das ist
   auf die kurzen Beschriftungen der Startseite abgestimmt. Damit diese Seite
   bei laengeren Beschriftungen oder grosser Systemschrift nie ueber den
   Viewport hinauslaeuft, darf die Reihe unter 400px wieder umbrechen. */

@media (max-width: 400px) {
  .hero--center .btn-row--center {
    flex-wrap: wrap;
  }
}

/* --- Bewegung aus, wenn der Nutzer sie abbestellt hat --------------------- */

@media (prefers-reduced-motion: reduce) {
  .wz-typing span {
    animation: none;
    opacity: 0.55;
  }
  .wz-split__seg {
    transition: none;
  }
}