/* Hedgehog AI – interaktive Infografik. Reines CSS, keine externen Requests, keine Bibliothek. */

.igx{--igx-line:rgba(201,168,76,.22);position:relative}
.igx .igx-head{max-width:820px}
.igx h2{margin-bottom:10px}
.igx .igx-lead{color:var(--white-dim);font-size:16px;max-width:760px}

/* ---------- Reiter ---------- */
.igx-tabs{display:flex;gap:6px;margin:26px 0 0;padding:5px;border:1px solid var(--white-faint);border-radius:10px;background:rgba(10,22,40,.55);overflow-x:auto;scrollbar-width:none}
.igx-tabs::-webkit-scrollbar{display:none}
.igx-tab{flex:1 1 0;min-width:130px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border:0;border-radius:7px;background:transparent;color:var(--white-dim);font:600 13.5px/1.2 'IBM Plex Sans',sans-serif;letter-spacing:.01em;cursor:pointer;transition:background .22s,color .22s;white-space:nowrap}
.igx-tab .igx-tab-n{font-family:'IBM Plex Mono',monospace;font-size:10.5px;opacity:.55}
.igx-tab:hover{color:var(--white);background:rgba(255,255,255,.045)}
.igx-tab[aria-selected="true"]{background:var(--gold);color:var(--navy)}
.igx-tab[aria-selected="true"] .igx-tab-n{opacity:.6}
.igx-tab:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}

/* ---------- Bühne ---------- */
.igx-stage{position:relative;margin-top:18px;border:1px solid var(--white-faint);border-radius:14px;background:linear-gradient(180deg,#0c1a2f,#0a1628);overflow:hidden}
.igx-panel{display:none;padding:26px}
.igx-panel.on{display:block;animation:igxIn .38s cubic-bezier(.22,.61,.36,1) both}
@keyframes igxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.igx-ph{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.igx-pt{font-family:'DM Serif Display',serif;font-size:clamp(20px,2.4vw,27px);line-height:1.22;margin-bottom:16px}
.igx-pt em{color:var(--gold);font-style:normal}

/* ---------- 1) Vorher / Nachher ---------- */
.igx-cmp{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--white-faint);user-select:none;touch-action:pan-y}
.igx-cmp-side{position:relative;padding:22px 24px 26px;min-height:330px}
.igx-cmp-b{background:linear-gradient(160deg,#141c28,#0f1622)}
.igx-cmp-a{position:absolute;inset:0;background:linear-gradient(160deg,#12233f,#0c1a30);clip-path:inset(0 0 0 var(--igx-x,50%));transition:clip-path .06s linear}
.igx-cmp.anim .igx-cmp-a{transition:clip-path .9s cubic-bezier(.5,0,.2,1)}
.igx-cmp-inner{max-width:520px}
.igx-cmp-a .igx-cmp-inner{margin-left:auto;text-align:right}
.igx-cmp-tag{display:inline-block;font:600 12px/1 'IBM Plex Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:4px;margin-bottom:12px}
.igx-cmp-b .igx-cmp-tag{background:rgba(255,255,255,.09);color:var(--white-dim)}
.igx-cmp-a .igx-cmp-tag{background:var(--gold);color:var(--navy)}
.igx-cmp h4{font-family:'DM Serif Display',serif;font-size:21px;font-weight:400;margin-bottom:4px}
.igx-cmp-b h4{color:rgba(240,237,232,.72)}
.igx-cmp-sub{font-size:13px;color:var(--white-dim);margin-bottom:18px}
.igx-pain{list-style:none;display:flex;flex-direction:column;gap:9px}
.igx-pain li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:rgba(240,237,232,.78);cursor:default;padding:7px 10px;border-radius:6px;border:1px solid transparent;transition:background .2s,border-color .2s}
.igx-pain li:hover,.igx-pain li:focus-visible{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);outline:none}
.igx-pain b{flex:none;color:#8b98ab;font-size:15px;line-height:1.35}
.igx-pain span{display:block}
.igx-pain small{display:block;color:var(--white-dim);font-size:12px;margin-top:3px;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .25s,margin .3s}
.igx-pain li:hover small,.igx-pain li:focus-visible small,.igx-pain li.open small{max-height:80px;opacity:1}
.igx-chain{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end;margin-bottom:18px}
.igx-chain i{font-style:normal;font-size:12px;padding:6px 10px;border:1px solid var(--igx-line);border-radius:5px;color:var(--gold-light);background:rgba(201,168,76,.07);animation:igxPop .5s both}
.igx-chain i::after{content:"→";margin-left:8px;opacity:.4}
.igx-chain i:last-child::after{content:""}
@keyframes igxPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.igx-res{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.igx-res span{font:600 13px/1 'IBM Plex Sans',sans-serif;color:var(--gold);border-bottom:1px solid var(--igx-line);padding-bottom:5px}
.igx-store{margin-top:20px;padding:12px 14px;border:1px dashed var(--igx-line);border-radius:8px;background:rgba(201,168,76,.045)}
.igx-store b{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-family:'IBM Plex Mono',monospace;margin-bottom:8px}
.igx-store div{display:flex;flex-wrap:wrap;gap:6px}
.igx-store em{font-style:normal;font-size:12px;color:var(--white-dim);padding:4px 9px;border-radius:4px;background:rgba(255,255,255,.05)}

.igx-handle{position:absolute;top:0;bottom:0;left:var(--igx-x,50%);width:2px;background:var(--gold);transform:translateX(-1px);z-index:3;cursor:ew-resize}
.igx-cmp.anim .igx-handle{transition:left .9s cubic-bezier(.5,0,.2,1)}
.igx-handle::before{content:"";position:absolute;left:-16px;right:-16px;top:0;bottom:0}
.igx-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--navy);border:0;display:grid;place-items:center;font-size:15px;font-weight:700;cursor:ew-resize;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.igx-knob:focus-visible{outline:3px solid var(--white);outline-offset:2px}
.igx-hint{margin-top:10px;font-size:12.5px;color:var(--white-dim);display:flex;align-items:center;gap:7px}
.igx-hint b{color:var(--gold);font-weight:600}

/* ---------- 2) Ablauf ---------- */
.igx-flowwrap{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
.igx-steps{display:flex;flex-direction:column;gap:0}
.igx-step{position:relative;display:flex;gap:13px;align-items:flex-start;padding:12px 14px;border:1px solid transparent;border-radius:9px;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.igx-step:not(:last-child)::after{content:"";position:absolute;left:31px;top:46px;bottom:-4px;width:2px;background:linear-gradient(180deg,var(--igx-line),rgba(201,168,76,.06))}
.igx-step:hover{background:rgba(255,255,255,.04)}
.igx-step[aria-current="true"]{background:rgba(201,168,76,.1);border-color:var(--igx-line)}
.igx-step:focus-visible{outline:2px solid var(--gold-light);outline-offset:1px}
.igx-dot{position:relative;z-index:2;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--igx-line);background:#0d1a30;display:grid;place-items:center;color:var(--gold);font:600 12px/1 'IBM Plex Mono',monospace;transition:background .25s,transform .25s}
.igx-step[aria-current="true"] .igx-dot{background:var(--gold);color:var(--navy);transform:scale(1.08)}
.igx-step[data-done="1"] .igx-dot{border-color:rgba(201,168,76,.5);color:var(--gold-light)}
.igx-step b{display:block;font-size:14.5px;font-weight:600;margin-top:8px}
.igx-step small{display:block;font-size:11.5px;color:var(--white-dim);font-family:'IBM Plex Mono',monospace;margin-top:2px}
.igx-detail{position:sticky;top:96px;border:1px solid var(--igx-line);border-radius:11px;background:rgba(201,168,76,.05);padding:18px}
.igx-detail .igx-dq{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.igx-detail h5{font-family:'DM Serif Display',serif;font-weight:400;font-size:19px;margin-bottom:8px}
.igx-detail p{font-size:13.5px;color:rgba(240,237,232,.8)}
.igx-detail .igx-src{margin-top:14px;padding-top:12px;border-top:1px solid var(--white-faint);font-size:12px;color:var(--white-dim)}
.igx-detail .igx-src b{color:var(--gold-light);font-weight:600}
.igx-ctrl{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.igx-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1px solid var(--igx-line);border-radius:6px;background:transparent;color:var(--gold);font:600 12.5px/1 'IBM Plex Sans',sans-serif;cursor:pointer;transition:background .2s}
.igx-btn:hover{background:rgba(201,168,76,.12)}
.igx-btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.igx-bar{flex:1;min-width:110px;height:3px;border-radius:2px;background:rgba(255,255,255,.09);overflow:hidden}
.igx-bar i{display:block;height:100%;width:0;background:var(--gold);border-radius:2px}
.igx-bar.run i{animation:igxRun 4.2s linear forwards}
@keyframes igxRun{from{width:0}to{width:100%}}

/* ---------- 3) Nutzen ---------- */
.igx-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.igx-kpi{position:relative;padding:16px 15px 15px;border:1px solid var(--white-faint);border-radius:10px;background:rgba(255,255,255,.025);cursor:default;transition:border-color .25s,transform .25s,background .25s}
.igx-kpi:hover,.igx-kpi:focus-within{border-color:var(--igx-line);transform:translateY(-3px);background:rgba(201,168,76,.055)}
.igx-kpi .igx-arrow{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--white-dim);display:flex;align-items:center;gap:6px;margin-bottom:9px}
.igx-kpi .igx-arrow s{color:rgba(240,237,232,.4)}
.igx-kpi .igx-arrow u{text-decoration:none;color:var(--gold)}
.igx-kpi .igx-big{font-family:'DM Serif Display',serif;font-size:clamp(26px,3.4vw,34px);line-height:1;color:var(--gold);letter-spacing:-.01em}
.igx-kpi .igx-lbl{font-size:12.5px;color:rgba(240,237,232,.82);margin-top:7px;line-height:1.4}
.igx-kpi .igx-det{font-size:12px;color:var(--white-dim);max-height:0;opacity:0;overflow:hidden;transition:max-height .32s,opacity .28s,margin .32s}
.igx-kpi:hover .igx-det,.igx-kpi:focus-within .igx-det{max-height:120px;opacity:1;margin-top:9px}
.igx-kpi .igx-meter{margin-top:10px;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.igx-kpi .igx-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-light));transition:width 1.1s cubic-bezier(.2,.7,.3,1)}
.igx-branchen{margin-top:22px;padding-top:18px;border-top:1px solid var(--white-faint)}
.igx-branchen b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.igx-branchen div{display:flex;flex-wrap:wrap;gap:7px}
.igx-branchen span{font-size:12.5px;color:rgba(240,237,232,.78);padding:6px 11px;border:1px solid var(--white-faint);border-radius:20px;transition:border-color .2s,color .2s}
.igx-branchen span:hover{border-color:var(--igx-line);color:var(--gold-light)}

/* ---------- 4) Pakete ---------- */
.igx-pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.igx-pkg{position:relative;display:flex;flex-direction:column;text-align:left;padding:17px 16px;border:1px solid var(--white-faint);border-radius:11px;background:rgba(255,255,255,.025);color:inherit;font:inherit;cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.igx-pkg:hover{transform:translateY(-3px);border-color:var(--igx-line)}
.igx-pkg[aria-pressed="true"]{border-color:var(--gold);background:rgba(201,168,76,.09)}
.igx-pkg:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.igx-pkg .igx-chip{position:absolute;top:-9px;left:16px;font:600 10.5px/1 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:4px;background:var(--navy-light);color:var(--white-dim)}
.igx-pkg.gold .igx-chip{background:var(--gold);color:var(--navy)}
.igx-pkg .igx-st{font-family:'DM Serif Display',serif;font-size:15px;color:var(--gold);margin-bottom:2px}
.igx-pkg h5{font-size:15.5px;font-weight:600;margin-bottom:9px}
.igx-pkg .igx-pr{font-family:'DM Serif Display',serif;font-size:25px;color:var(--white)}
.igx-pkg .igx-du{font-size:11.5px;color:var(--white-dim);font-family:'IBM Plex Mono',monospace;margin-top:3px}
.igx-pkgdetail{margin-top:14px;border:1px solid var(--igx-line);border-radius:11px;background:rgba(201,168,76,.05);padding:18px}
.igx-pkgdetail h5{font-family:'DM Serif Display',serif;font-weight:400;font-size:19px;margin-bottom:12px}
.igx-pkgdetail ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px 20px}
.igx-pkgdetail li{display:flex;gap:9px;font-size:13.5px;color:rgba(240,237,232,.82);animation:igxIn .3s both}
.igx-pkgdetail li b{color:var(--gold);flex:none}
.igx-extra{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.igx-ein{border:1px solid var(--white-faint);border-radius:10px;padding:14px 15px;background:rgba(255,255,255,.02)}
.igx-ein u{text-decoration:none;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.igx-ein u b{font-size:14px;font-weight:600}
.igx-ein u i{font-style:normal;font-family:'DM Serif Display',serif;font-size:20px;color:var(--gold)}
.igx-ein p{font-size:12.5px;color:var(--white-dim);margin-top:6px}
.igx-hw{margin-top:12px;font-size:12.5px;color:var(--white-dim);border-left:2px solid var(--igx-line);padding-left:12px}
.igx-hw b{color:var(--gold-light)}
.igx-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--white-faint);display:flex;gap:14px;align-items:flex-start;font-size:13px;color:rgba(240,237,232,.75)}
.igx-foot svg{flex:none;margin-top:1px}
.igx-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* ---------- Fußzeile der Bühne ---------- */
.igx-legend{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--white-dim)}
.igx-legend a{color:var(--gold);text-decoration:none;border-bottom:1px solid var(--igx-line)}

/* ---------- Reaktionsfähig ---------- */
@media(max-width:900px){
  .igx-flowwrap{grid-template-columns:1fr}
  .igx-detail{position:static}
  .igx-pkgs{grid-template-columns:1fr}
  .igx-extra{grid-template-columns:1fr}
  .igx-cmp-a .igx-cmp-inner{text-align:left;margin-left:0}
  .igx-chain,.igx-res{justify-content:flex-start}
}
@media(max-width:640px){
  .igx-panel{padding:18px 15px}
  .igx-tab{min-width:112px;font-size:12.5px;padding:10px 9px}
  .igx-cmp-side{padding:18px 16px 22px;min-height:auto}
  .igx-cmp-a{position:relative;clip-path:none!important;margin-top:0}
  .igx-handle,.igx-hint{display:none}
  .igx-kpis{grid-template-columns:1fr 1fr}
  .igx-kpi .igx-det{max-height:none;opacity:1;margin-top:9px}
  .igx-pain small{max-height:none;opacity:1;margin-top:3px}
}
@media(max-width:420px){.igx-kpis{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .igx-panel.on,.igx-chain i,.igx-pkgdetail li{animation:none}
  .igx-cmp .igx-cmp-a,.igx-cmp .igx-handle,.igx-kpi,.igx-pkg,.igx-dot{transition:none}
  .igx-bar.run i{animation:none;width:100%}
}

/* Quadratische Infografiken (Motive ab v12) etwas schmaler setzen,
   damit sie das interaktive Modul darunter nicht aus dem Blickfeld schieben. */
.ig.ig-quad .ig-frame{max-width:900px;margin-inline:auto}
.ig.ig-quad figcaption{max-width:900px;margin-inline:auto}