/* Interview „Schritt für Schritt einstellen“ (promptgen.js): Box im Studio + großes Fenster mit Baum, Fragen, Vorschau */
.iv-box { display: grid; gap: 10px; padding: 14px; border-radius: var(--r); border: 1px solid #2f4a5a; background: linear-gradient(180deg, #0f1c24, var(--panel-2) 70%); }
.iv-box .sec-t { margin: 0; flex-wrap: wrap; }
.iv-box .sec-t .ic { width: 18px; height: 18px; color: var(--accent); }
.iv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.iv-sum { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 10px; background: #10241a; border: 1px solid #1f5a3a; font-size: 13px; color: #cfeedd; }
.iv-sum .ic { width: 16px; height: 16px; color: var(--ok, #3ddc84); flex: none; margin-top: 2px; }

.iv-dlg { background: var(--panel); color: var(--text); border: 1px solid var(--line-2); border-radius: 18px; padding: 0; width: min(1320px, calc(100vw - 24px)); height: calc(100vh - 32px); max-height: calc(100vh - 32px); box-shadow: 0 30px 80px -20px #000; }
.iv-dlg::backdrop { background: #000b; }
.iv-win { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.iv-head { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.iv-head > b { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.iv-head > b .ic { width: 19px; height: 19px; color: var(--accent); }
.iv-lv { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.iv-lvt { color: var(--dim); font-size: 12.5px; font-weight: 650; }
.iv-lv .seg-btn { min-height: 38px; padding: 0 12px; font-weight: 650; }
.iv-x { border: 0; background: none; color: var(--muted); width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
.iv-x:hover { background: var(--panel-3); color: var(--text); }
.iv-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 0; }
.iv-left { border-right: 1px solid var(--line); overflow: auto; padding: 12px; }
.iv-main { display: grid; grid-template-rows: minmax(150px, 30vh) minmax(0, 1fr); min-height: 0; min-width: 0; }
.iv-stage { position: relative; background: #050608; border-bottom: 1px solid var(--line); }
.iv-stage canvas { width: 100%; height: 100%; display: block; }
.iv-play { position: absolute; left: 12px; bottom: 12px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink, #1a1205); display: grid; place-items: center; }
.iv-play .ic { width: 20px; height: 20px; }
.iv-wait { position: absolute; right: 12px; top: 10px; padding: 4px 10px; border-radius: 999px; background: #000a; color: var(--muted); font-size: 12.5px; }
.iv-content { overflow: auto; padding: 18px 20px 24px; min-width: 0; }
.iv-foot { display: grid; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.iv-said { margin: 0; font-size: 13.5px; color: #d7dbe3; max-height: 4.4em; overflow: auto; }
.iv-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.iv-sp { flex: 1; }
/* Hilfe im Fenster: eigener Knopf im Kopf (öffnet den Interview-Artikel) statt des angedockten Knopfs unten rechts,
   der sonst „Weiter“/„Übernehmen“ verdeckt (hilfe/panel.js dockt in jedes modale Fenster) */
.iv-dlg > .hf-dock { display: none; }
.iv-head .iv-help { min-height: 40px; padding: 0 12px 0 8px; border-radius: 999px; }

/* „Mit KI ergänzen“ auf der Seite „Fertig“ (freiwillig, 1 Anfrage) */
.iv-ki { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--panel-2)), var(--panel-2) 70%); }
.iv-ki .iv-subh { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; color: var(--text); }
.iv-ki .iv-subh .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.iv-ki .say-meta { font-size: 13px; line-height: 1.45; }
.iv-kita { display: block; width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; padding: 10px 12px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 15px/1.4 var(--font); }
.iv-kita::placeholder { color: var(--dim); }
.iv-kita:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.iv-ki-go { min-height: 44px; }
.iv-ki-go .ic { width: 17px; height: 17px; }

/* Baum „Dein Weg“ */
.iv-tree h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; color: var(--muted); }
.iv-tree h3 .ic { width: 17px; height: 17px; color: var(--accent); }
.iv-tr, .iv-tr ul { list-style: none; margin: 0; padding: 0; }
.iv-tr { display: grid; gap: 4px; }
.iv-tb > button { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-weight: 650; font-size: 13.5px; text-align: left; }
.iv-tb > button .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.iv-tb > button span { flex: 1; min-width: 0; }
.iv-tb.on > button { border-color: var(--accent); }
.iv-tb em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); }
.iv-tb em.st-ja { color: #9fe9bf; border-color: #1f5a3a; background: #10241a; }
.iv-tb ul { margin: 4px 0 6px 18px; border-left: 1px solid var(--line-2); display: grid; gap: 2px; }
.iv-tn > button { position: relative; width: 100%; display: grid; text-align: left; min-height: 36px; padding: 4px 8px 4px 14px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 13px; }
.iv-tn > button::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; border-top: 1px solid var(--line-2); }
.iv-tn.d2 > button { padding-left: 26px; } .iv-tn.d2 > button::before { width: 22px; }
.iv-tn.d3 > button { padding-left: 38px; } .iv-tn.d3 > button::before { width: 34px; }
.iv-tn small { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-tn.done > button { color: var(--text); } .iv-tn.done small { color: #9fe9bf; }
.iv-tn.cur > button { background: #2a2110; color: var(--accent); }

/* Seiten */
.iv-page { display: grid; gap: 14px; max-width: 980px; }
.iv-q { display: grid; gap: 4px; }
.iv-q h2 { margin: 0; font-size: 23px; letter-spacing: -.01em; text-transform: none; color: var(--text); font-weight: 750; }
.iv-q p { margin: 0; color: var(--muted); }
.iv-lvl { justify-self: start; font-size: 11.5px; font-weight: 700; color: var(--accent); background: #2a2110; border: 1px solid #5a4415; border-radius: 999px; padding: 1px 9px; margin-bottom: 4px; }
.iv-subh { margin: 4px 0 -4px; font-size: 13px; color: var(--muted); font-weight: 700; }
.iv-big { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.iv-big.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.iv-yn { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.iv-opt { position: relative; display: grid; gap: 6px; justify-items: start; align-content: start; text-align: left; min-height: 96px; padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); }
.iv-yn .iv-opt { min-height: 118px; } .iv-yn .iv-opt b { font-size: 19px; }
.iv-big.small .iv-opt { min-height: 82px; }
.iv-opt .ic { width: 28px; height: 28px; color: var(--accent); }
.iv-opt b { font-size: 15.5px; }
.iv-opt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.iv-opt .iv-pal { display: flex; width: 100%; height: 32px; border-radius: 8px; overflow: hidden; }
.iv-opt .iv-pal i { flex: 1; }
.iv-opt .iv-curve { width: 100%; height: 52px; }
.iv-fit { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #10241a; color: #9fe9bf; border: 1px solid #1f5a3a; }
.iv-opt.on { border-color: var(--accent); background: #2a2110; box-shadow: 0 0 0 1px var(--accent) inset; }
.iv-opt.multi.on::after { content: "✓"; position: absolute; bottom: 10px; right: 12px; color: var(--accent); font-weight: 800; }
.iv-opt:hover { border-color: #4a5263; } .iv-opt.on:hover { border-color: var(--accent); }
.iv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.iv-chip { display: inline-grid; gap: 3px; min-height: 44px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-weight: 600; font-size: 14px; text-align: left; }
.iv-chip.fit { border-color: #3a5a2a; }
.iv-chip.on { border-color: var(--accent); background: #2a2110; box-shadow: 0 0 0 1px var(--accent) inset; }
.iv-sw { display: flex; height: 7px; border-radius: 3px; overflow: hidden; min-width: 40px; }
.iv-sw i { flex: 1; }
.iv-strip { display: flex; gap: 2px; height: 30px; border-radius: 7px; overflow: hidden; }
.iv-strip span { min-width: 0; padding: 6px 5px 0; color: #fff; font: 650 10.5px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .75; }
.iv-strip span.on { opacity: 1; outline: 2px solid var(--accent); outline-offset: -2px; }
.iv-strip .k-ruhig, .iv-opt .k-ruhig { background: #24476b; } .iv-strip .k-groove, .iv-opt .k-groove { background: #2f6b4a; } .iv-strip .k-build, .iv-opt .k-build { background: #8a6a1c; }
.iv-strip .k-drop, .iv-opt .k-drop { background: #9c2f52; } .iv-strip .k-breakdown, .iv-opt .k-breakdown { background: #4a3a78; }
.iv-final { font-size: 18px; line-height: 1.5; margin: 0; padding: 16px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line-2); }

/* kleine Vorschau in den Karten: läuft nur bei der gewählten Karte (Vorschau erst nach dem Klick) */
.iv-mini { display: flex; gap: 4px; height: 14px; align-items: flex-end; }
.iv-mini i { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); opacity: .35; }
.iv-opt.on .iv-mini i { opacity: 1; }
.iv-opt.on .an-puls i { animation: ivp .45s ease-out infinite; }
.iv-opt.on .an-atmen i, .iv-opt.on .an-funkeln i { animation: iva 2s ease-in-out infinite; }
.iv-opt.on .an-funkeln i:nth-child(odd) { animation-delay: -.6s; }
.iv-opt.on .an-lauf i, .iv-opt.on .an-tubes i { animation: ivl 1.2s linear infinite; }
.iv-opt.on .an-lauf i:nth-child(2), .iv-opt.on .an-tubes i:nth-child(2) { animation-delay: -.96s; } .iv-opt.on .an-lauf i:nth-child(3), .iv-opt.on .an-tubes i:nth-child(3) { animation-delay: -.72s; }
.iv-opt.on .an-lauf i:nth-child(4), .iv-opt.on .an-tubes i:nth-child(4) { animation-delay: -.48s; } .iv-opt.on .an-lauf i:nth-child(5), .iv-opt.on .an-tubes i:nth-child(5) { animation-delay: -.24s; }
.iv-opt.on .an-sanft i, .iv-opt.on .an-hart i, .iv-opt.on .an-strobe i, .iv-opt.on .an-voll i { background: #fff; animation: ivs .16s steps(1) infinite; }
.iv-opt.on .an-sanft i { animation-duration: .4s; }
.an-dim i { opacity: .3 !important; } .an-halb i { opacity: .6 !important; } .an-aus i, .an-bo i { background: #333 !important; }
.an-weiss i { background: #fff; } .an-ruhig i { opacity: .4 !important; } .an-hell i { background: #ffe9b0; }
.iv-mini[class*="mv-"] i { width: 5px; height: 14px; border-radius: 3px; transform-origin: 50% 0; }
.iv-opt.on .mv-kreisen i { animation: ivk 1.4s ease-in-out infinite alternate; }
.iv-opt.on .mv-publikum i, .iv-opt.on .mv-schwenk i { animation: ivw 1.8s ease-in-out infinite alternate; }
.iv-opt.on .mv-faecher i:nth-child(1), .iv-opt.on .mv-kreuzen i:nth-child(3) { animation: ivf1 1.6s ease-in-out infinite alternate; }
.iv-opt.on .mv-faecher i:nth-child(3), .iv-opt.on .mv-kreuzen i:nth-child(1) { animation: ivf2 1.6s ease-in-out infinite alternate; }
.iv-opt.on .mv-wippe i { animation: ivwp 1s ease-in-out infinite alternate; }
@keyframes ivp { 0% { opacity: 1; } 70%, 100% { opacity: .15; } }
@keyframes iva { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes ivl { 0%, 20% { opacity: 1; } 40%, 100% { opacity: .15; } }
@keyframes ivs { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ivk { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
@keyframes ivw { from { transform: rotate(-45deg); } to { transform: rotate(45deg); } }
@keyframes ivf1 { from { transform: rotate(0); } to { transform: rotate(40deg); } }
@keyframes ivf2 { from { transform: rotate(0); } to { transform: rotate(-40deg); } }
@keyframes ivwp { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .iv-mini i { animation: none !important; } }

@media (max-width: 900px) {
  .iv-dlg { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .iv-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .iv-left { border-right: 0; border-bottom: 1px solid var(--line); max-height: 22vh; }
  .iv-main { grid-template-rows: minmax(120px, 24vh) minmax(0, 1fr); }
  .iv-content { padding: 14px; }
  .iv-q h2 { font-size: 19px; }
  .iv-big { grid-template-columns: 1fr 1fr; }
}