/* WOODNIO – Infografiken (Variablen aus main.css/woodnio.css, funktioniert hell und dunkel) */
.ig{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(20px,3vw,36px);position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--line) 70%,transparent) 1px,transparent 0);background-size:22px 22px}
.ig__label{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ig__note{margin:22px 0 0;font-size:.92rem;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ig__note--c{justify-content:center;text-align:center;margin-top:16px}
.ig-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:.9rem;font-weight:500;white-space:nowrap;box-shadow:0 1px 0 rgba(16,29,58,.04)}
.ig-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad)}
.ig-chip--out{border-color:color-mix(in srgb,var(--lime) 40%,var(--line))}
.ig-chip--shared{border-color:var(--violet);background:color-mix(in srgb,var(--violet) 10%,var(--card))}
.ig-link{flex:1;min-width:28px;height:2px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--lime) 0 7px,transparent 7px 14px);background-size:14px 2px;opacity:.75}
.ig-vlink{display:none}

/* Datenfluss */
.ig-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2vw,28px);align-items:center}
.ig-flow__col{display:grid;gap:14px;align-content:center}
.ig-row{display:flex;align-items:center;gap:10px}
.ig-flow__col--out .ig-row{flex-direction:row}
.ig-hub{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:22px 24px;border-radius:16px;border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;min-width:210px;box-shadow:0 18px 50px -26px rgba(8,124,255,.55)}
.ig-hub img{width:64px;height:64px}
.ig-hub strong{font-size:1.15rem;color:var(--ink);letter-spacing:.02em}
.ig-hub ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;font-size:.85rem;color:var(--mute)}
.ig-hub li::before{content:"✓";margin-right:6px;color:var(--lime)}

/* Baum */
.ig-tree{display:grid;justify-items:center}
.ig-node{display:grid;gap:2px;text-align:center;padding:14px 26px;border-radius:14px;border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;position:relative}
.ig-node strong{color:var(--ink)}.ig-node span{font-size:.85rem;color:var(--mute)}
.ig-node::after{content:"";position:absolute;left:50%;top:100%;height:26px;border-left:2px dashed var(--line)}
.ig-tree__kids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;position:relative;margin-top:26px;padding-top:26px}
.ig-tree__kids::before{content:"";position:absolute;top:0;left:16.66%;right:16.66%;border-top:2px dashed var(--line)}
.ig-proj{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.ig-proj::before{content:"";position:absolute;top:-26px;left:50%;height:26px;border-left:2px dashed var(--line)}
.ig-proj__t{font-weight:600;color:var(--ink);font-size:.95rem}
.ig-proj .ig-chip{font-size:.82rem;padding:6px 11px}

/* Freigabe-Schritte */
.ig-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.ig-step{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.ig-step:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:22px;z-index:2;width:12px;text-align:center;color:var(--lime);font-weight:700}
.ig-step__no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:.85rem}
.ig-step h3{margin:0;font-size:1rem}
.ig-mock{margin-top:auto;padding:12px;border-radius:10px;background:var(--bg-soft);border:1px solid var(--line);font-size:.85rem;color:var(--ink-2);display:grid;gap:6px;min-height:92px;align-content:center}
.ig-bubble{display:block;padding:10px 12px;border-radius:12px 12px 12px 4px;background:var(--card);border:1px solid var(--line);line-height:1.4}
.ig-mock small{color:var(--mute);font-size:.78rem}
.ig-mock--diff .from{color:var(--mute);text-decoration:line-through}.ig-mock--diff .to{color:var(--lime-text)}.ig-mock--diff i{font-style:normal;color:var(--mute)}
.ig-mock--appr{grid-template-columns:auto 1fr;align-items:center;column-gap:10px}
.ig-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:.8rem}
.ig-btn{grid-column:1/-1;justify-self:start;padding:6px 14px;border-radius:8px;background:var(--lime);color:#fff;font-weight:600;font-size:.82rem}
.ig-mock--log .ok{color:var(--lime-text)}

/* MCP-Weg */
.ig-seq{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:8px}
.ig-seq__node{display:grid;gap:2px;text-align:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);min-width:128px}
.ig-seq__node:nth-child(3){border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.ig-seq__node strong{color:var(--ink);font-size:.92rem;font-family:var(--mono)}
.ig-seq__node span{font-size:.78rem;color:var(--mute)}
.ig-seq__link{display:grid;gap:6px;justify-items:center;min-width:56px}
.ig-seq__link .ig-link{width:100%}
.ig-seq__link small{font-size:.72rem;color:var(--mute);text-align:center;line-height:1.25}

/* Balken */
.ig-bars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
.ig-bars__g h3{font-size:.95rem;margin:0 0 14px;color:var(--ink)}
.ig-bar{display:grid;grid-template-columns:62px 1fr 34px;align-items:center;gap:10px;margin-bottom:10px;font-size:.85rem}
.ig-bar__n{color:var(--mute)}
.ig-bar__t{height:12px;border-radius:999px;background:var(--bg-soft);overflow:hidden;border:1px solid var(--line)}
.ig-bar__t i{display:block;height:100%;width:var(--w);border-radius:999px;background:var(--grad)}
.ig-bar b{color:var(--ink);text-align:right}

/* Schichten */
.ig-layers{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(18px,3vw,40px);align-items:center}
.ig-box{border:2px dashed var(--line);border-radius:16px;padding:16px}
.ig-box--1{background:color-mix(in srgb,var(--lime) 5%,var(--card))}
.ig-box--2{margin-top:12px;background:color-mix(in srgb,var(--lime) 7%,var(--card));border-color:color-mix(in srgb,var(--lime) 35%,var(--line))}
.ig-box--3{margin-top:12px;border-style:solid;border-color:var(--lime);background:var(--card)}
.ig-box__t{display:block;font-size:.8rem;font-weight:600;color:var(--mute);margin-bottom:6px;letter-spacing:.02em}
.ig-box__chips{display:flex;flex-wrap:wrap;gap:8px}
.ig-layers__side{display:grid;gap:16px}
.ig-block{display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.ig-block__t{font-size:.9rem;color:var(--ink);font-weight:500}
.ig-block__r{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--mute);font-family:var(--mono)}
.ig-block__r i{width:18px;height:18px;border-radius:50%;background:#e5484d;position:relative;flex:none}
.ig-block__r i::before,.ig-block__r i::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:2px;background:#fff;transform:translate(-50%,-50%) rotate(45deg)}
.ig-block__r i::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ig-vault{display:flex;gap:14px;align-items:center;padding:16px;border-radius:12px;border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box}
.ig-vault svg{width:28px;height:28px;color:var(--lime);flex:none}
.ig-vault strong{display:block;color:var(--ink)}.ig-vault span{font-size:.85rem;color:var(--mute)}

/* Kennzahlen-Band (wie WOODPLAN) */
.statband{background:linear-gradient(135deg,#087CFF 0%,#713BFF 100%);color:#fff;padding:clamp(28px,4vw,48px) 0}
.statband__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.statband strong{display:block;font-size:clamp(1.8rem,2.6vw + .6rem,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.statband span{display:block;margin-top:6px;font-size:.92rem;opacity:.9}

/* Reihen mit Text und Grafik */
.frow{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,5vw,72px);align-items:center}
.frow--rev{grid-template-columns:1.2fr .8fr}.frow--rev>:first-child{order:2}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:var(--bg-soft);color:var(--lime-text);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}

@media (max-width:1000px){.ig-steps{grid-template-columns:1fr 1fr}.ig-step:not(:last-child)::after{display:none}.frow,.frow--rev{grid-template-columns:1fr}.frow--rev>:first-child{order:0}.ig-seq{grid-template-columns:1fr;justify-items:stretch}.ig-seq__link{min-height:46px}.ig-seq__link .ig-link{width:2px;height:28px;min-width:0;flex:none;background:repeating-linear-gradient(180deg,var(--lime) 0 7px,transparent 7px 14px);background-size:2px 14px;animation:igFlowY 1s linear infinite}}
@media (max-width:800px){
  .ig-flow{grid-template-columns:1fr;justify-items:center}
  .ig-flow__col{width:100%}.ig-row{justify-content:center}.ig-row .ig-link{display:none}.ig-flow__col>.ig__label{text-align:center}
  .ig-vlink{display:block;width:2px;height:34px;background:repeating-linear-gradient(180deg,var(--lime) 0 7px,transparent 7px 14px);background-size:2px 14px;animation:igFlowY 1s linear infinite}
  .ig-tree__kids{grid-template-columns:1fr}.ig-tree__kids::before,.ig-proj::before{display:none}
  .ig-bars,.ig-layers,.statband__grid{grid-template-columns:1fr}.statband__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){.ig-steps{grid-template-columns:1fr}}

@keyframes igFlow{to{background-position:14px 0}}
@keyframes igFlowY{to{background-position:0 14px}}
@keyframes igStep{0%,22%{border-color:var(--lime);box-shadow:0 12px 34px -18px rgba(8,124,255,.65);transform:translateY(-3px)}28%,100%{border-color:var(--line);box-shadow:none;transform:none}}
@keyframes igGrow{from{width:0}to{width:var(--w)}}
@keyframes igPulse{0%,100%{box-shadow:0 0 0 0 rgba(8,124,255,.35)}60%{box-shadow:0 0 0 12px rgba(8,124,255,0)}}
@keyframes igIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .js .ig:not(.is-in){opacity:0}
  .js .ig.is-in{animation:igIn .7s var(--ease-out) both}
  .ig-link{animation:igFlow 1s linear infinite}
  .ig-hub{animation:igPulse 3.2s ease-in-out infinite}
  .ig-step{animation:igStep 12s ease-in-out infinite}
  .ig-step:nth-child(2){animation-delay:3s}.ig-step:nth-child(3){animation-delay:6s}.ig-step:nth-child(4){animation-delay:9s}
  .js .ig-bar__t i{width:0}
  .js .ig.is-in .ig-bar__t i{animation:igGrow 1.1s var(--ease-out) .25s both}
  .js .ig.is-in .ig-bars__g:nth-child(2) .ig-bar__t i{animation-delay:.45s}.js .ig.is-in .ig-bars__g:nth-child(3) .ig-bar__t i{animation-delay:.65s}
  .ig-chip--shared{animation:igPulse 3s ease-in-out infinite}
}