/* arbeitswolke – kleine animierte Visuals (Bausteine für visuals.js)
   Einbinden NACH aw.css: <link rel="stylesheet" href="…/assets/visuals.css">
   Nutzt nur die Variablen aus aw.css, keine externen Ressourcen, keine Marken-Logos. */

.awv {
  --awv-rand: var(--linie, #dfe5e2);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: #fff; border: 1px solid var(--awv-rand); border-radius: 18px;
  box-shadow: var(--schatten, 0 8px 24px rgba(20,40,35,.08));
  overflow: hidden; color: var(--tinte, #1f2c2e); font-size: 15px; line-height: 1.45;
  width: 100%; max-width: 560px; min-width: 0;
}
.awv * { box-sizing: border-box; }
.awv__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--awv-rand); font-size: .8rem; color: var(--grau, #66736f); }
.awv__kopf b { color: var(--tinte); font-size: .88rem; }
.awv__kopf-links { display: flex; align-items: center; gap: 10px; min-width: 0; }
.awv__kopf-links > span { min-width: 0; }
.awv__kopf-links b, .awv__kopf-links small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awv__kopf-links small { font-size: .74rem; }
.awv__marke { flex: none; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--flaeche, #f5f7f4); color: var(--grau); white-space: nowrap; }
.awv__buehne { padding: 16px; }
.awv__fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px 12px; border-top: 1px solid var(--awv-rand); }
.awv__fuss p { margin: 0; font-size: .74rem; color: var(--grau); flex: 1 1 180px; }
.awv__nochmal {
  font: inherit; font-size: .82rem; font-weight: 700; color: var(--tinte); background: #fff; cursor: pointer;
  border: 2px solid var(--awv-rand); border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
.awv__nochmal:hover { border-color: var(--gruen); }
.awv__nochmal:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
.awv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sofort-Modus (reduzierte Bewegung / Endzustand): keine Übergänge */
.awv--sofort *, .awv--sofort *::before, .awv--sofort *::after { transition: none !important; animation: none !important; }

/* Ein-/Ausblenden: Elemente bleiben im Fluss (kein Springen der Höhe) */
.awv-tritt { transition: opacity .45s ease, transform .45s ease; }
.awv-warte { opacity: 0; transform: translateY(8px); }

.awv-ava { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .74rem; background: var(--gruen); color: #fff; }
.awv-ava--grau { background: #e8ecea; color: #5b6865; }
.awv-ok { color: var(--ok, #1f8a5b); }

/* Tipp-Indikator */
.awv-tippt { display: none; gap: 4px; padding: 6px 0; }
.awv-tippt i { width: 7px; height: 7px; border-radius: 50%; background: #9aa6a2; animation: awvHupf 1s infinite ease-in-out; }
.awv-tippt i:nth-child(2) { animation-delay: .15s; } .awv-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes awvHupf { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.is-tippend .awv-tippt { display: flex; }
.is-tippend .awv-inhalt { display: none; }

/* ---------- 1 Betreuung: Chat ---------- */
.awv-chat { display: grid; gap: 12px; background: var(--flaeche); margin: -16px; padding: 16px; }
.awv-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 92%; }
.awv-msg--sie { justify-self: end; flex-direction: row-reverse; }
.awv-blase { background: #fff; border: 1px solid var(--awv-rand); border-radius: 14px 14px 14px 4px; padding: 9px 13px; min-width: 0; }
.awv-msg--sie .awv-blase { background: var(--gruen-hell); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.awv-blase p { margin: 0; }
.awv-zeit { display: block; font-size: .7rem; color: var(--grau); margin-top: 3px; text-align: right; }
.awv-msg--breit { max-width: 100%; }
.awv-msg--breit .awv-blase { flex: 1; }
.awv-check { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 4px; }
.awv-check li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 4px 0; font-size: .9rem; transition: opacity .35s ease; }
.awv-check li small { display: block; font-size: .74rem; color: var(--grau); }
.awv-haken { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--awv-rand); display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: transparent; margin-top: 1px; transition: background .3s, border-color .3s, color .3s, transform .3s; }
.awv-check li.is-arbeit .awv-haken { border-color: var(--gruen); border-right-color: transparent; animation: awvDreh .8s linear infinite; }
.awv-check li.is-ok .awv-haken { background: var(--ok); border-color: var(--ok); color: #fff; transform: scale(1.05); }
.awv-check li.awv-blass { opacity: .38; }
@keyframes awvDreh { to { transform: rotate(360deg); } }
.awv-erfolg { background: var(--gruen); color: #fff; border: 0; }
.awv-msg .awv-erfolg .awv-zeit { color: rgba(255,255,255,.75); }

/* ---------- 2 Offboarding ---------- */
.awv-person { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.awv-person b { display: block; line-height: 1.2; }
.awv-person span { font-size: .8rem; color: var(--grau); }
.awv-zaehler { margin-left: auto; text-align: center; flex: none; border-radius: 12px; padding: 6px 12px; background: var(--rot-hell); color: var(--rot); transition: background .4s, color .4s; }
.awv-zaehler b { display: block; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.awv-zaehler span { font-size: .7rem; font-weight: 700; color: inherit; }
.awv-zaehler.is-ok { background: var(--gruen-hell); color: var(--gruen); }
.awv-zugaenge { list-style: none; margin: 0; padding: 0; border: 1px solid var(--awv-rand); border-radius: 12px; }
.awv-zugang { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-top: 1px solid var(--awv-rand); transition: background .4s ease; }
.awv-zugang:first-child { border-top: 0; }
.awv-zugang__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--gruen-hell); color: var(--gruen); font-weight: 800; font-size: .8rem; transition: background .4s, color .4s; }
.awv-zugang__ico svg { width: 16px; height: 16px; }
.awv-zugang b { display: block; font-size: .92rem; line-height: 1.25; transition: color .4s; }
.awv-zugang small { display: block; font-size: .74rem; color: var(--grau); }
.awv-schalter { display: flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; color: var(--gruen); white-space: nowrap; }
.awv-schalter i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--gruen); transition: background .35s; flex: none; }
.awv-schalter i::after { content: ''; position: absolute; top: 3px; left: 17px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .35s; }
.awv-zugang.is-aus { background: var(--flaeche); }
.awv-zugang.is-aus .awv-zugang__ico { background: #e8ecea; color: #8a9692; }
.awv-zugang.is-aus b { color: var(--grau); }
.awv-zugang.is-aus .awv-schalter { color: var(--grau); }
.awv-zugang.is-aus .awv-schalter i { background: #b9c3bf; }
.awv-zugang.is-aus .awv-schalter i::after { left: 3px; }
.awv-zugang.is-uebergabe .awv-schalter { color: var(--gruen); }
.awv-zugang.is-uebergabe .awv-schalter i { background: var(--gelb); }
.awv-abschluss { margin-top: 12px; padding: 11px 14px; border-radius: 12px; background: var(--gruen-hell); color: var(--gruen-dunkel); font-size: .88rem; font-weight: 600; }

/* ---------- 3 Schulung ---------- */
.awv-schulung { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 14px; align-items: start; }
.awv-post { border: 1px solid var(--awv-rand); border-radius: 12px; overflow: hidden; }
.awv-post__kopf { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--flaeche); font-size: .74rem; font-weight: 700; color: var(--grau); }
.awv-post__zahl { padding: 12px 12px 4px; }
.awv-post__zahl b { display: block; font-size: 2rem; line-height: 1; font-weight: 800; color: var(--rot); font-variant-numeric: tabular-nums; transition: color .5s; }
.awv-post__zahl span { font-size: .78rem; color: var(--grau); }
.awv-post.is-ok .awv-post__zahl b { color: var(--gruen); }
.awv-balken { height: 6px; margin: 8px 12px 10px; border-radius: 99px; background: var(--rot-hell); overflow: hidden; }
.awv-balken i { display: block; height: 100%; width: 100%; background: var(--rot); border-radius: inherit; transition: width .7s ease, background .5s; }
.awv-post.is-ok .awv-balken i { background: var(--gruen); }
.awv-ordner { list-style: none; margin: 0; padding: 4px 0 6px; border-top: 1px solid var(--awv-rand); }
.awv-ordner li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 12px; font-size: .82rem; }
.awv-ordner li span:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--farbe, var(--gruen)); margin-right: 8px; vertical-align: 1px; }
.awv-ordner li b { font-variant-numeric: tabular-nums; color: var(--grau); font-weight: 700; }
.awv-chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.awv-chips__titel { width: 100%; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gruen); margin-bottom: 2px; }
.awv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--gelb-hell); color: #6b4f00; font-size: .82rem; font-weight: 700; }
.awv-chip::before { content: '✓'; font-size: .72rem; }
.awv-banner { grid-column: 1 / -1; padding: 11px 14px; border-radius: 12px; background: var(--gruen); color: #fff; font-weight: 700; font-size: .95rem; }

/* ---------- 4 Einrichtung ---------- */
.awv-fortschritt { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: .78rem; font-weight: 700; color: var(--grau); }
.awv-fortschritt .awv-balken { flex: 1; margin: 0; height: 8px; background: var(--gruen-hell); }
.awv-fortschritt .awv-balken i { background: var(--gruen); width: 0; }
.awv-fortschritt b { min-width: 3.2em; text-align: right; color: var(--gruen); font-variant-numeric: tabular-nums; }
.awv-schritte { list-style: none; margin: 0; padding: 0; position: relative; }
.awv-schritte::before { content: ''; position: absolute; left: 10px; top: 12px; bottom: 12px; width: 2px; background: var(--awv-rand); }
.awv-schritt { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 6px 0; }
.awv-schritt .awv-haken { background: #fff; position: relative; z-index: 1; }
.awv-schritt.is-arbeit .awv-haken { border-color: var(--gruen); border-right-color: transparent; animation: awvDreh .8s linear infinite; }
.awv-schritt.is-ok .awv-haken { background: var(--ok); border-color: var(--ok); color: #fff; }
.awv-schritt__zeit { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; color: var(--grau); letter-spacing: .02em; }
.awv-schritt b { display: block; font-size: .92rem; line-height: 1.3; transition: color .3s; }
.awv-schritt small { display: block; font-size: .76rem; color: var(--grau); }
.awv-schritt:not(.is-ok):not(.is-arbeit) b { color: var(--grau); }
.awv-namen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.awv-namen span { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--gruen-hell); color: var(--gruen-dunkel); transition: opacity .3s, transform .3s; }
.awv-schritt--ziel.is-ok b { color: var(--gruen); }
.awv-schritt--ziel.is-ok { background: var(--gruen-hell); border-radius: 10px; margin: 4px -8px 0; padding: 8px; }

@media (max-width: 520px) {
  .awv { font-size: 14px; border-radius: 14px; }
  .awv__buehne { padding: 12px; }
  .awv-chat { margin: -12px; padding: 12px; }
  .awv__kopf, .awv__fuss { padding-left: 12px; padding-right: 12px; }
  .awv__kopf-links b { white-space: normal; line-height: 1.25; }
  .awv-schulung { grid-template-columns: 1fr; }
  .awv-zugang { grid-template-columns: 28px 1fr; padding: 8px 10px; }
  .awv-zugang__ico { width: 28px; height: 28px; }
  .awv-schalter { grid-column: 2; }
  .awv-person .awv-ava { display: none; }
  .awv-msg { max-width: 100%; }
  .awv-schritt--ziel.is-ok { margin-left: -4px; margin-right: -4px; padding: 8px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .awv-tritt, .awv-check li, .awv-haken, .awv-zugang, .awv-zugang__ico, .awv-schalter i, .awv-schalter i::after,
  .awv-balken i, .awv-zaehler, .awv-post__zahl b, .awv-namen span { transition: none !important; }
  .awv-tippt i, .awv-check li.is-arbeit .awv-haken, .awv-schritt.is-arbeit .awv-haken { animation: none !important; }
}