/* ==========================================================================
   MrPetzAI Infotainment-Kit v1.0 · Vorher/Nachher-Schaubild (.fx-vs)
   Ein System fuer alle KI-Automation-Seiten: Text -> Bild, kurz, clean.
   Nutzt die CSS-Variablen von style.css (--dk,--tl,--tl2,--cr,--bd,--r).
   ========================================================================== */
.fx-sec{padding:3.6rem 0;background:#fff;border-bottom:1px solid var(--bd)}
.fx-head{max-width:760px;margin:0 0 1.8rem;text-align:left}
.fx-head .eyebrow{justify-content:flex-start}
.fx-head h2{font-size:2rem}
.fx-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;align-items:stretch;max-width:1020px;margin:0}
.fx-col{border-radius:16px;padding:1.7rem 1.8rem;display:flex;flex-direction:column;min-width:0}
.fx-vorher{background:var(--cr);border:1px solid var(--bd)}
.fx-nachher{background:linear-gradient(160deg,#061426 0%,var(--dk) 100%);border:1px solid var(--dk)}
.fx-tag{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:.35rem .8rem;margin-bottom:1.1rem}
.fx-vorher .fx-tag{background:#fff;border:1px solid var(--bd);color:var(--muted)}
.fx-nachher .fx-tag{background:rgba(31,182,201,.15);border:1px solid rgba(31,182,201,.5);color:var(--tl2)}
.fx-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.fx-col li{position:relative;padding-left:2rem;font-size:.96rem;line-height:1.5;min-width:0;overflow-wrap:break-word}
.fx-vorher li{color:#4E5D6C}
.fx-nachher li{color:rgba(255,255,255,.92)}
.fx-col li::before{position:absolute;left:0;top:.05rem;width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:800;line-height:1}
.fx-vorher li::before{content:"\2715";background:#fff;border:1px solid var(--bd);color:#b05555}
.fx-nachher li::before{content:"\2713";background:rgba(31,182,201,.16);border:1px solid rgba(31,182,201,.5);color:var(--tl2)}
.fx-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;padding:0 1.3rem}
.fx-mid svg{width:34px;height:34px;fill:none;stroke:var(--tl);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fx-mid b{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tl);white-space:nowrap}
.fx-foot{max-width:1020px;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;align-items:center;justify-content:center}
.fx-foot a.btn{min-height:42px}
.fx-foot .fx-note{font-size:.85rem;color:var(--muted)}
/* --- Kaufmaennische Kachel: Vollkosten-Rechnung aus Arbeitgebersicht (.fx-roi) --- */
.fx-roi{max-width:1020px;margin:1.2rem 0 0;background:#fff;border:1px solid var(--bd);border-radius:16px;padding:1.6rem 1.8rem}
.fx-roi-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:1.2rem}
.fx-roi-head b{font-family:'Manrope',system-ui,sans-serif;font-size:1.25rem;color:var(--dk)}
.fx-roi-head span{font-size:.82rem;color:var(--muted)}
.fx-roi-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.15fr);gap:.6rem;align-items:stretch}
.fx-roi-cell{background:var(--cr);border:1px solid var(--bd);border-radius:12px;padding:1rem;text-align:center;min-width:0}
.fx-roi-cell b{display:block;font-family:'Manrope',system-ui,sans-serif;font-size:1.55rem;font-weight:800;color:var(--dk);line-height:1.1;margin-bottom:.35rem}
.fx-roi-cell span{display:block;font-size:.78rem;color:var(--muted);line-height:1.4;overflow-wrap:break-word}
.fx-roi-op{display:grid;place-items:center;font-family:'Manrope',system-ui,sans-serif;font-size:1.4rem;font-weight:800;color:var(--tl)}
.fx-roi-sum{background:var(--dk);border-color:var(--dk)}
.fx-roi-sum b{color:var(--tl2);font-size:1.8rem}
.fx-roi-sum span{color:rgba(255,255,255,.75)}
.fx-roi-alt{margin:1.1rem 0 0;font-size:.92rem;color:var(--ink);background:var(--cr);border-left:3px solid var(--tl);border-radius:0;padding:.8rem 1rem}
.fx-roi-note{margin:.7rem 0 0;font-size:.76rem;color:var(--muted)}
@media(max-width:920px){.fx-roi-grid{grid-template-columns:1fr 1fr}.fx-roi-op{display:none}.fx-roi-sum{grid-column:1 / -1}}
@media(max-width:860px){
.fx-sec{padding:2.6rem 0}
.fx-vs{grid-template-columns:1fr}
.fx-mid{padding:.9rem 0}
.fx-mid svg{transform:rotate(90deg)}
.fx-head h2{font-size:1.6rem}
}
@media(max-width:520px){.fx-roi{padding:1.2rem}.fx-roi-grid{grid-template-columns:1fr}}
/* --- Interaktiver ROI-Rechner mit Schiebereglern (.fx-calc) --- */
.fx-calc{max-width:1020px;margin:1.2rem 0 0;background:#fff;border:1px solid var(--bd);border-radius:20px;padding:1.8rem}
.fx-calc-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin-bottom:1.4rem}
.fx-calc-head b{font-family:'Manrope',system-ui,sans-serif;font-size:1.25rem;color:var(--dk)}
.fx-calc-head span{font-size:.82rem;color:var(--muted)}
.fx-calc-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:1.6rem;align-items:stretch}
.fx-calc-sliders{display:grid;gap:1.3rem;align-content:start}
.fx-sl label{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.9rem;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0;margin-bottom:.45rem}
.fx-sl label small{display:block;font-weight:400;font-size:.78rem;color:var(--muted)}
.fx-sl output{font-family:'Manrope',system-ui,sans-serif;font-size:1.15rem;font-weight:800;color:var(--tl);white-space:nowrap}
.fx-sl input[type=range]{width:100%;accent-color:var(--tl2);border:0;padding:0;background:transparent}
.fx-calc-result{background:linear-gradient(160deg,#061426 0%,var(--dk) 100%);border-radius:16px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}
.fx-cr{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:.8rem}
.fx-cr:last-of-type{border-bottom:0;padding-bottom:0}
.fx-cr span{font-size:.82rem;color:rgba(255,255,255,.65)}
.fx-cr b{font-family:'Manrope',system-ui,sans-serif;font-size:1.5rem;font-weight:800;color:var(--tl2);white-space:nowrap}
.fx-cr.fx-cr-jahr b{font-size:2rem}
.fx-calc-alt{margin:1.3rem 0 0;font-size:.92rem;color:var(--ink);background:var(--cr);border-left:3px solid var(--tl);border-radius:0;padding:.8rem 1rem}
.fx-calc-alt b{color:var(--tl)}
@media(max-width:920px){.fx-calc-grid{grid-template-columns:1fr}}
@media(max-width:520px){.fx-calc{padding:1.2rem}}
/* --- App-Karten-Schaubild (.fx-mock): ersetzt Foto-Banner durch echtes HTML --- */
.fx-mock{margin:1.4rem 0;background:#fff;border:1px solid var(--bd);border-radius:14px;box-shadow:0 8px 26px rgba(10,37,64,.06);overflow:hidden;max-width:560px}
.fx-mock-top{display:flex;align-items:center;gap:.45rem;padding:.6rem 1rem;border-bottom:1px solid var(--bd);background:var(--cr)}
.fx-mock-top i{width:9px;height:9px;border-radius:50%;background:#D5DEE7;display:block}
.fx-mock-top b{margin-left:.45rem;font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.02em}
.fx-mock-body{padding:1rem 1.1rem;display:grid;gap:.7rem}
.fx-mrow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) auto;gap:.8rem;align-items:center;font-size:.85rem;color:var(--ink);min-width:0}
.fx-mrow>span:first-child{overflow-wrap:break-word}
.fx-mrow .bar{height:8px;border-radius:999px;background:var(--cr);overflow:hidden}
.fx-mrow .bar i{display:block;height:100%;border-radius:999px;background:var(--tl2)}
.fx-mrow>b{font-size:.85rem;color:var(--dk);white-space:nowrap;text-align:right}
.fx-mrow.done{grid-template-columns:auto minmax(0,1fr) auto}
.fx-mrow.done .ok{width:1.25rem;height:1.25rem;border-radius:50%;background:rgba(24,183,201,.14);border:1px solid rgba(24,183,201,.5);color:var(--tl);display:grid;place-items:center;font-size:.72rem;font-weight:800}
.fx-mock-foot{padding:.75rem 1.1rem;border-top:1px solid var(--bd);font-size:.82rem;color:var(--muted)}
.fx-mock-foot b{color:var(--tl)}
@media(max-width:520px){.fx-mrow{grid-template-columns:minmax(0,1fr) auto}.fx-mrow .bar{display:none}}
/* --- Kompakte Baustein-Links (.fx-links): ersetzt Karten-Grids --- */
.fx-links{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.fx-links b{font-size:.85rem;color:var(--muted);font-weight:700;margin-right:.3rem}
.fx-links a{display:inline-flex;align-items:center;background:#fff;border:1.5px solid var(--bd);color:var(--dk);border-radius:999px;padding:.5rem 1rem;font-size:.88rem;font-weight:700;transition:.16s ease}
.fx-links a:hover{border-color:var(--tl);color:var(--tl);transform:translateY(-1px)}
.fx-links-sec{padding:2.2rem 0;background:var(--cr);border-top:1px solid var(--bd)}
/* --- Texte laufen ueber die volle Containerbreite (kein 760px-Korsett, keine Fruehumbrueche) --- */
.section-head{max-width:none}
.section-head h2{max-width:none;text-wrap:normal}
.section-lead,.section-head p,.section-head > p:not(.eyebrow){max-width:none;text-wrap:normal}
.fx-head{max-width:none}
.fx-head h2{text-wrap:normal}

/* ===== Durchgängigkeit Desktop · Layoutblöcke füllen die Containerbreite =====
   Ursache: .fx-vs / .fx-calc / .fx-roi / .fx-foot standen auf max-width:1020px,
   während .container bei >=1200px auf 1280px und ab 1600px auf 1440px wächst.
   Ergebnis war eine schmale Spalte mit breiten Rändern – auf 13 Seiten.
   Layoutraster füllen ab hier den Container; Textzonen bleiben lesbar begrenzt
   (Master-Skill Punkt 14: Fliesstext nicht über die volle Breite laufen lassen). */
.fx-vs,.fx-calc,.fx-roi,.fx-foot{max-width:none;width:100%}
.fx-head{max-width:820px}
.fx-roi p,.fx-foot p{max-width:1040px}
.fx-calc{--fx-calc-gap:2rem}
@media(min-width:1600px){
  .fx-vs{gap:2.4rem}
}