/* KI-Karten (fki): „Mit KI ändern“ aus dem echten Dashboard (ki.js kiSeite, editor.js kiHtml/kiLos/handyCheck), dazu die helle Demo-Seite von Kessler Coaching (Petrol #17857D) */

/* ---------- Formular wie im Dashboard (set-title, box, fld, set-foot) ---------- */
.fki-t0{margin-top:0}
.fki-box{padding:calc(12 * var(--e)) calc(13 * var(--e)) calc(13 * var(--e))}
.fki-lab{display:block;margin-bottom:calc(6 * var(--e));font-size:calc(9 * var(--e));font-weight:500;line-height:1.3;color:#A9A7A1}
.fki-lab~.fki-lab{margin-top:calc(11 * var(--e))}
.fki-sel{display:flex;align-items:center;gap:calc(8 * var(--e));height:calc(26 * var(--e));padding:0 calc(9 * var(--e)) 0 calc(10 * var(--e));border-radius:calc(7 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09);font-size:calc(9.5 * var(--e));color:#F4F3F0}
.fki-sel>span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fki-sel svg{flex:none;width:calc(7 * var(--e));height:calc(5 * var(--e));fill:none;stroke:#A9A7A1;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fki-ta{position:relative;min-height:calc(46 * var(--e));padding:calc(7 * var(--e)) calc(10 * var(--e));border-radius:calc(7 * var(--e));background:#0B0B0C;border:1px solid rgba(244,243,240,.09);font-size:calc(10 * var(--e));line-height:1.5;color:#F4F3F0;transition:border-color .2s,opacity .25s}
.fki-ta.fokus{border-color:rgba(244,243,240,.2)}
.fki-ta.aus{opacity:.6}
.fki-ta2{min-height:calc(50 * var(--e))}
.fki-ta3{min-height:calc(58 * var(--e))}
.fki-ph{position:absolute;left:calc(10 * var(--e));right:calc(10 * var(--e));top:calc(7 * var(--e));color:#6F6D68;opacity:0}
.fki-ta.leer .fki-ph{opacity:1;transition:opacity .3s ease}
.fki-tx{transition:opacity .45s ease}
.fki-ta.leer .fki-tx{opacity:0;transition:none}
.fki-car{display:none;width:1.5px;height:1em;margin-left:1px;background:#F4F3F0;vertical-align:-.12em}
.tippt .fki-car{display:inline-block}
.fki-foot{display:flex;flex-wrap:wrap;align-items:center;gap:calc(6 * var(--e));margin-top:calc(10 * var(--e))}
.fki-foot .d-btn{transition:transform .14s ease,background .2s,opacity .25s,color .2s}
.fki-foot .d-btn.aus{opacity:.3}
.d-btn.g.hov{background:#242428;box-shadow:inset 0 0 0 1px rgba(244,243,240,.16)}

/* ---------- HERO: Ergebnis und Vorschau ---------- */
.fki-erg{display:grid;margin-top:calc(12 * var(--e));padding-top:calc(11 * var(--e));border-top:1px solid rgba(244,243,240,.09)}
.fki-erg>*{grid-area:1/1;opacity:0}
.fki-erg[data-z="baut"] .fki-baut,.fki-erg[data-z="fertig"] .fki-fertig{opacity:1;transition:opacity .35s ease}
.fki-erg[data-z=""]{border-top-color:transparent}
.fki-baut{font-size:calc(9.5 * var(--e));line-height:1.45;color:#A9A7A1}
.fki-fertig>b,.fki-erg2>b{display:block;font-size:calc(10 * var(--e));font-weight:600;line-height:1.4;color:#F4F3F0}
.fki-fertig .fki-foot,.fki-erg2 .fki-foot{margin-top:calc(8 * var(--e))}
.fki-vor{margin-top:calc(12 * var(--e));padding:calc(15 * var(--e)) calc(15 * var(--e)) calc(16 * var(--e));border-radius:calc(12 * var(--e));background:#F4EFE7;color:#132523;font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;box-shadow:0 0 0 1px rgba(244,243,240,.06);transition:opacity .4s ease}
.fki-vor.dim{opacity:.55}
.fki-h2{font-size:calc(15 * var(--e));font-weight:700;line-height:1.1;letter-spacing:-.03em;color:#132523}
.fki-reihe{display:flex;margin-top:calc(10 * var(--e))}
.fki-k{flex:1 1 0;min-width:0;height:calc(100 * var(--e));border-radius:calc(10 * var(--e));background:#fff;box-shadow:0 0 0 1px rgba(19,37,35,.06),0 calc(12 * var(--e)) calc(22 * var(--e)) calc(-16 * var(--e)) rgba(19,37,35,.4);overflow:hidden;
  transition:flex-grow .8s var(--ease),margin .8s var(--ease),opacity .5s ease,box-shadow .5s ease}
.fki-k+.fki-k{margin-left:calc(8 * var(--e))}
.fki-k>div{padding:calc(10 * var(--e)) calc(10 * var(--e)) 0}
.fki-k4>div{width:calc(98 * var(--e))}
.fki-nr{display:block;font-size:calc(7.5 * var(--e));font-weight:600;line-height:1;color:#17857D}
.fki-k b{display:block;margin-top:calc(6 * var(--e));font-size:calc(10.5 * var(--e));font-weight:700;line-height:1.15;letter-spacing:-.02em;hyphens:manual}
.fki-k p{margin-top:calc(4 * var(--e));font-size:calc(8 * var(--e));line-height:1.45;color:#5A6663;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fki-vor:not(.vier) .fki-k4{flex-grow:0;margin-left:0;opacity:0}
.fki-k4.fki-neu{box-shadow:0 0 0 1.5px #FF4800,0 0 calc(18 * var(--e)) rgba(255,72,0,.35),0 calc(12 * var(--e)) calc(22 * var(--e)) calc(-16 * var(--e)) rgba(19,37,35,.4)}

/* ---------- S2: Editor, links die Handy-Prüfung (375 px), rechts das KI-Feld ---------- */
.fn-dk.fki-s2{display:flex;padding:0}
.fki-buehne{position:relative;flex:none;width:calc(196 * var(--e));background:#0B0B0C;overflow:hidden}
.fki-handy{position:absolute;left:50%;top:calc(16 * var(--e));bottom:calc(-24 * var(--e));width:calc(140 * var(--e));margin-left:calc(-70 * var(--e));border-radius:calc(18 * var(--e));background:#F4EFE7;overflow:hidden;color:#132523;
  font-family:-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;box-shadow:0 0 0 calc(5 * var(--e)) #1C1C1F,0 calc(14 * var(--e)) calc(36 * var(--e)) rgba(0,0,0,.5)}
.fki-hn{display:flex;align-items:center;gap:calc(3 * var(--e));height:calc(26 * var(--e));padding:0 calc(10 * var(--e));border-bottom:1px solid rgba(19,37,35,.07);font-size:calc(8.5 * var(--e));line-height:1;letter-spacing:-.02em;white-space:nowrap}
.fki-hn svg{width:calc(11 * var(--e));height:calc(10 * var(--e));flex:none}
.fki-hn b{font-weight:700}
.fki-hn span{color:#5A6663}
.fki-lay{position:absolute;left:0;right:0;top:calc(26 * var(--e));padding:calc(12 * var(--e)) calc(10 * var(--e));opacity:0}
.fki-handy[data-l="a"] [data-l="a"],.fki-handy[data-l="b"] [data-l="b"],.fki-handy[data-l="c"] [data-l="c"]{opacity:1;transition:opacity .4s ease}
.fki-lay .fki-h2{font-size:calc(12 * var(--e));line-height:1.12}
.fki-st{display:grid;gap:calc(5 * var(--e));margin-top:calc(9 * var(--e))}
.fki-mk{padding:calc(7 * var(--e)) calc(8 * var(--e)) calc(8 * var(--e));border-radius:calc(7 * var(--e));background:#fff;box-shadow:0 0 0 1px rgba(19,37,35,.06),0 calc(6 * var(--e)) calc(12 * var(--e)) calc(-9 * var(--e)) rgba(19,37,35,.35);transition:box-shadow .5s ease}
.fki-mk b{display:block;margin-top:calc(4 * var(--e));font-size:calc(9 * var(--e));font-weight:700;line-height:1.15;letter-spacing:-.02em}
.fki-mk .fki-nr{font-size:calc(7 * var(--e))}
.fki-quer{display:flex;gap:calc(5 * var(--e));width:calc(292 * var(--e));margin-top:calc(9 * var(--e));outline:1.5px dashed #E5484D;outline-offset:calc(3 * var(--e));border-radius:calc(3 * var(--e))}
.fki-quer .fki-mk{flex:1 1 0;min-width:0}
.fki-mk4.fki-neu{box-shadow:0 0 0 1.5px #FF4800,0 0 calc(14 * var(--e)) rgba(255,72,0,.35)}
.fki-panel{flex:1;min-width:0;padding:calc(16 * var(--e)) calc(14 * var(--e));background:#141416;border-left:1px solid rgba(244,243,240,.09)}
.fki-sek span{display:block;font-size:calc(7.5 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#6F6D68}
.fki-sek b{display:block;margin:calc(3 * var(--e)) 0 calc(10 * var(--e));font-size:calc(10 * var(--e));font-weight:600;color:#F4F3F0}
.fki-panel .fki-ta{min-height:calc(60 * var(--e));font-size:calc(9.5 * var(--e))}
.fki-hws{display:grid;margin-top:calc(11 * var(--e))}
.fki-hw{grid-area:1/1;font-size:calc(9 * var(--e));line-height:1.5;color:#A9A7A1;opacity:0}
.fki-hws[data-h="1"] [data-h="1"],.fki-hws[data-h="2"] [data-h="2"],.fki-hws[data-h="3"] [data-h="3"]{opacity:1;transition:opacity .35s ease}
.fki-hw u{color:#F4F3F0;text-underline-offset:.2em}

/* ---------- S1: Sprechen statt tippen ---------- */
.fki-mic .fki-punkt{display:none;width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:#FF5A52;flex:none}
.fki-mic.an{background:#3a1416;color:#ffd9d4;box-shadow:none}
.fki-mic.an svg{display:none}
.fki-mic.an .fki-punkt{display:block}
.fki-wandelt{font-size:calc(8.5 * var(--e));color:#A9A7A1;opacity:0;transition:opacity .25s ease}
.fki-wandelt.zeig{opacity:1}

/* ---------- S3: Ergebnis mit Zusammenfassung ---------- */
.fki-erg2{margin-top:calc(12 * var(--e));padding-top:calc(11 * var(--e));border-top:1px solid rgba(244,243,240,.09)}
.fki-auf>div>*{margin-bottom:0}

/* ---------- Handy ---------- */
@container (max-width:460px){
  .fn-stat.fki-hero{--e:calc(100cqw / 350)}
  .fki-hero .d-sub{display:none}
  .fki-hero .d-head{margin-bottom:calc(10 * var(--e))}
  .fki-vor{padding:calc(13 * var(--e)) calc(12 * var(--e)) calc(13 * var(--e))}
  .fki-k{height:calc(50 * var(--e))}
  .fki-k+.fki-k{margin-left:calc(6 * var(--e))}
  .fki-k>div{padding:calc(8 * var(--e)) calc(7 * var(--e)) 0}
  .fki-k4>div{width:calc(66 * var(--e))}
  .fki-k b{font-size:calc(9 * var(--e))}
  .fki-k p{display:none}
  .fki-hero .fki-foot .d-btn{padding:0 calc(8 * var(--e));font-size:calc(9 * var(--e))}
}
@container (max-width:400px){
  .fn-dk.fki-s1,.fn-dk.fki-s2,.fn-dk.fki-s3{--e:calc(100cqw / 360);aspect-ratio:360/330}
  .fki-buehne{width:calc(168 * var(--e))}
  .fki-handy{width:calc(132 * var(--e));margin-left:calc(-66 * var(--e))}
  .fki-quer{width:calc(276 * var(--e))}
}
@media (prefers-reduced-motion:reduce){.fki-k,.fki-lay,.fki-hw,.fki-erg>*,.fki-vor,.fki-tx,.fki-ta,.fki-wandelt,.fki-mk{transition:none!important}}