/* AO7 – App zum Ausprobieren: KI-Mitarbeiter live (Software). (Spot-Generator am 07.10. entfernt, Code in quelle/alt/.)
   Beide laufen komplett im Browser; die App-Fenster sind bewusst immer dunkel (wie ein echtes Programm). */

.unsichtbar { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================== KI-Mitarbeiter live =========================== */
.ki { --ki-grund: #0A0C13; --ki-flaeche: #11141F; --ki-flaeche2: #171B29; --ki-linie: rgba(156, 144, 242, .16); --ki-linie2: rgba(156, 144, 242, .28);
  --ki-tinte: #EEF0FF; --ki-leise: #9AA0B8; --ki-akzent: #9C90F2; --ki-gruen: #3DDC97; --ki-gelb: #FFC83D;
  position: relative; width: min(1120px, 100%); border-radius: 22px; overflow: hidden; background: var(--ki-grund); color: var(--ki-tinte);
  box-shadow: 0 0 0 1px var(--ki-linie), 0 40px 110px -40px rgba(91, 72, 208, .65); font-size: 14px; text-align: left; }
.ki::before { content: ""; position: absolute; inset: -40% -10% auto; height: 70%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(124, 108, 240, .22), transparent 70%); }
.ki-leiste { position: relative; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255, 255, 255, .025); border-bottom: 1px solid var(--ki-linie); font-size: 13px; }
.ki-leiste > i { width: 10px; height: 10px; border-radius: 50%; background: rgba(238, 240, 255, .16); }
.ki-leiste b { margin-left: 8px; font-weight: 700; }
.ki-status { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; color: var(--ki-gruen); font-weight: 600; }
.ki-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ki-gruen); box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: ki-puls 1.8s ease-out infinite; }
.ki.wartet .ki-status { color: var(--ki-leise); } .ki.wartet .ki-punkt { background: var(--ki-leise); animation: none; }
@keyframes ki-puls { from { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } to { box-shadow: 0 0 0 9px rgba(61, 220, 151, 0); } }
.ki-uhr { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ki-leise); font-weight: 600; }
.ki-demo { padding: 4px 10px; border-radius: 99px; font-size: 11.5px; background: rgba(156, 144, 242, .14); color: var(--ki-akzent); }

.ki-kopf { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--ki-linie); }
.ki-kugel { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 0deg, #7C6CF0, #3D9BFF, #3DDC97, #FF5CA8, #7C6CF0); animation: ki-dreh 6s linear infinite; }
.ki-kugel::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #2A2F48, #0C0E18 70%); }
.ki-kugel span { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 6px rgba(156, 144, 242, .75); animation: ki-atmen 1.6s ease-in-out infinite; }
.ki.wartet .ki-kugel { animation-duration: 18s; } .ki.wartet .ki-kugel span { animation: none; opacity: .55; }
@keyframes ki-dreh { to { transform: rotate(1turn); } }
@keyframes ki-atmen { 50% { transform: scale(.72); opacity: .8; } }
.ki-gedanke small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ki-akzent); }
.ki-gedanke p { margin: 3px 0 0; font-size: 16px; font-weight: 600; min-height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-gedanke p::after { content: "▍"; margin-left: 2px; color: var(--ki-akzent); animation: ki-blink 1s steps(1) infinite; }
@keyframes ki-blink { 50% { opacity: 0; } }
.ki-zahl { text-align: right; line-height: 1.1; }
.ki-zahl b { display: block; font: 700 28px/1 "Syncopate", sans-serif; font-variant-numeric: tabular-nums; transition: transform .35s cubic-bezier(.2, .7, .2, 1), color .35s; }
.ki-zahl b.hoch { transform: scale(1.25); color: var(--ki-gruen); }
.ki-zahl small { font-size: 11.5px; color: var(--ki-leise); }

.ki-spalten { position: relative; display: grid; grid-template-columns: 1fr 1.45fr 1fr; height: 410px; }
.ki-spalte { min-width: 0; padding: 14px 14px 10px; overflow: hidden; }
.ki-spalte + .ki-spalte { border-left: 1px solid var(--ki-linie); }
.ki-spalte h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ki-leise); }
.ki-spalte h4 span { padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ki-spalte ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* kleine Karte (Eingang / Erledigt) */
.ki-karte { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 12px; border-radius: 14px;
  background: var(--ki-flaeche); box-shadow: inset 0 0 0 1px var(--ki-linie); will-change: transform, opacity; }
.ki-karte .ki-ic { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(156, 144, 242, .14); color: var(--ki-akzent); }
.ki-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ki-karte b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-karte span { font-size: 12.5px; color: var(--ki-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-karte.neu { animation: ki-rein .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ki-rein { from { opacity: 0; transform: translateY(-14px) scale(.96); box-shadow: inset 0 0 0 1px var(--ki-akzent), 0 0 0 4px rgba(156, 144, 242, .25); } }
.ki-karte.eigen { box-shadow: inset 0 0 0 1.5px var(--ki-gelb); }
.ki-karte.eigen .ki-ic { background: rgba(255, 200, 61, .16); color: var(--ki-gelb); }
.ki-karte .ki-marke { position: absolute; top: -8px; right: 10px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 700; background: var(--ki-gelb); color: #1A1406; }
.ki-fertig .ki-karte .ki-ic { background: rgba(61, 220, 151, .14); color: var(--ki-gruen); }
.ki-fertig .ki-karte span { color: #CFF5E3; }
.ki-fertig .ki-karte i { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 11px; color: var(--ki-leise); font-variant-numeric: tabular-nums; }

/* grosse Karte (In Arbeit) */
.ki-arbeitskarte { border-radius: 18px; padding: 16px; background: linear-gradient(180deg, var(--ki-flaeche2), var(--ki-flaeche)); box-shadow: inset 0 0 0 1px var(--ki-linie2), 0 18px 40px -24px rgba(124, 108, 240, .6);
  animation: ki-gross .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ki-gross { from { opacity: 0; transform: translateX(-26px) scale(.96); } }
.ki-arbeitskarte.weg { animation: ki-weg .45s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes ki-weg { to { opacity: 0; transform: translateX(26px) scale(.97); } }
.ki-ak-kopf { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: center; margin-bottom: 12px; }
.ki-ak-kopf .ki-ic { grid-row: span 2; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(156, 144, 242, .16); color: var(--ki-akzent); }
.ki-ak-kopf b { font-size: 15px; } .ki-ak-kopf span { font-size: 13px; color: var(--ki-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ki-text { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); color: #D5D9EC; font-size: 13px; line-height: 1.5; }
.ki-text mark { background: rgba(156, 144, 242, .28); color: #fff; border-radius: 4px; padding: 0 2px; transition: background .4s; }
.ki-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ki-schritte li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; color: var(--ki-leise); transition: color .3s; }
.ki-schritte li::before { content: ""; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(238, 240, 255, .25); }
.ki-schritte li.wartet::before { opacity: .5; }
.ki-skelett { display: block; height: 10px; margin-top: 4px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.11), rgba(255,255,255,.06)); background-size: 200% 100%; animation: ki-schimmer 1.6s linear infinite; }
@keyframes ki-schimmer { to { background-position: -200% 0; } }
.ki-fertig .ki-karte b { padding-right: 44px; }
.ki-schritte li.laeuft { color: var(--ki-tinte); }
.ki-schritte li.laeuft::before { box-shadow: inset 0 0 0 2px rgba(156, 144, 242, .25); border-top: 2px solid var(--ki-akzent); border-radius: 50%; animation: ki-dreh .7s linear infinite; }
.ki-schritte li.fertig { color: #DDE2F5; }
.ki-schritte li.fertig::before { background: var(--ki-gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0C13' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: none; animation: ki-haken .35s cubic-bezier(.2, .7, .2, 1.4); }
@keyframes ki-haken { from { transform: scale(.4); } }
.ki-antwort { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(61, 220, 151, .07); box-shadow: inset 0 0 0 1px rgba(61, 220, 151, .22); font-size: 13px; line-height: 1.5; color: #E6F8EF; min-height: 3em; }
.ki-antwort small { display: block; margin-bottom: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ki-gruen); }
.ki-antwort .ki-cursor::after { content: "▍"; color: var(--ki-gruen); animation: ki-blink 1s steps(1) infinite; }
.ki-leer { display: grid; place-items: center; height: 100%; color: var(--ki-leise); font-size: 13px; }

.ki-auftrag { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--ki-linie); background: rgba(255, 255, 255, .02); }
.ki-auftrag input { min-width: 0; font: 500 15px/1.4 "Plus Jakarta Sans", sans-serif; color: var(--ki-tinte); background: var(--ki-flaeche2); border: 0; border-radius: 12px; padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--ki-linie2); }
.ki-auftrag input::placeholder { color: #7E849C; }
.ki-auftrag input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ki-akzent); }
.ki-vorschlaege { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ki-vorschlaege button { padding: 7px 12px; border: 0; border-radius: 99px; cursor: pointer; font: 600 12.5px/1 "Plus Jakarta Sans", sans-serif; color: #D5D9EC; background: rgba(255, 255, 255, .06); transition: background .2s, color .2s; }
.ki-vorschlaege button:hover { background: rgba(156, 144, 242, .22); color: #fff; }
.ki-vorschlaege span { align-self: center; margin-right: 2px; font-size: 12px; color: var(--ki-leise); }

@media (max-width: 760px) {
  .ki { border-radius: 18px; font-size: 13px; }
  .ki-leiste .ki-demo, .ki-leiste > i { display: none; }
  .ki-leiste b { margin-left: 0; }
  .ki-kopf { gap: 12px; padding: 12px 14px; }
  .ki-kugel { width: 38px; height: 38px; }
  .ki-gedanke p { font-size: 14px; }
  .ki-zahl b { font-size: 22px; }
  .ki-spalten { grid-template-columns: 1fr; height: auto; }
  .ki-spalte + .ki-spalte { border-left: 0; border-top: 1px solid var(--ki-linie); }
  .ki-arbeit { order: -1; min-height: 318px; }
  .ki-eingang ol { grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ki-eingang ol::-webkit-scrollbar { display: none; }
  .ki-fertig ol li:nth-child(n + 4) { display: none; }
  .ki-auftrag { grid-template-columns: 1fr; }
  .ki-auftrag .knopf { justify-self: stretch; }
}