/* =====================================================================
   widgets.css - Styling der interaktiven Wissen-Widgets (dp-widget).
   Fuegt sich in das helle Design-System ein (tokens.css). Balken und
   aktive Zustaende nutzen den laufzeit-umschaltbaren --accent.
   Markup wird von public/assets/js/wissen-widgets.js erzeugt.
   ===================================================================== */

.artikel-body .dp-widget{
  border:1px solid var(--line,#ececec);
  border-radius:var(--radius,16px);
  background:var(--wash,#fbfbfb);
  padding:1.3rem 1.4rem;
  margin:2rem 0;
}
.artikel-body .dp-fallback{color:var(--ink-2,#6b6b6b);font-size:.95rem;margin:0}

/* Kopf */
.dpw-head{margin-bottom:1rem}
.dpw-title{font-weight:700;font-size:1.06rem;line-height:1.3}
.dpw-hint{color:var(--ink-2,#6b6b6b);font-size:.9rem;margin-top:.25rem}
.dpw-note{color:var(--ink-2,#6b6b6b);font-size:.82rem;line-height:1.5;margin:.9rem 0 0}

/* --- Eingaben ---------------------------------------------------- */
.dpw-ta{
  width:100%;box-sizing:border-box;resize:vertical;min-height:4.2rem;
  font:inherit;font-size:1rem;line-height:1.5;color:var(--ink,#0a0a0a);
  border:1px solid var(--line,#ececec);border-radius:var(--radius-sm,10px);
  padding:.7rem .85rem;background:var(--paper,#fff);
}
.dpw-ta:focus{outline:2px solid var(--accent,#111114);outline-offset:1px;border-color:transparent}

.dpw-examples{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0}
.dpw-ex{
  font:inherit;font-size:.82rem;cursor:pointer;
  border:1px solid var(--line,#ececec);background:var(--paper,#fff);color:var(--ink,#0a0a0a);
  padding:.32rem .7rem;border-radius:999px;transition:border-color .12s,background .12s;
}
.dpw-ex:hover{border-color:var(--accent,#111114)}
.dpw-ex:focus-visible{outline:2px solid var(--accent,#111114);outline-offset:1px}

/* --- Token-Chips ------------------------------------------------- */
.dpw-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin:.5rem 0;line-height:1.9}
.dpw-chips-sm{margin:.4rem 0 .2rem}
.dpw-tk{
  font-family:var(--mono,ui-monospace,monospace);font-size:.82rem;
  padding:.12rem .35rem;border-radius:6px;white-space:pre;
  color:#20242c;
}
.dpw-tk-0{background:rgba(12,107,138,.14)}
.dpw-tk-1{background:rgba(31,138,91,.16)}
.dpw-tk-2{background:rgba(180,121,31,.16)}
.dpw-tk-3{background:rgba(124,58,173,.14)}
.dpw-tk-4{background:rgba(14,124,124,.16)}
.dpw-tk-5{background:rgba(176,58,91,.14)}
.dpw-tk-ws{opacity:.55}
.dpw-tk-x{font-size:.62em;vertical-align:super;opacity:.7;margin-left:1px}
.dpw-tk-more{font-size:.78rem;color:var(--ink-2,#6b6b6b);align-self:center;padding:.12rem .3rem}

/* --- Kennzahlen -------------------------------------------------- */
.dpw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.9rem}
.dpw-stat{border:1px solid var(--line,#ececec);border-radius:var(--radius-sm,10px);padding:.7rem .8rem;background:var(--paper,#fff)}
.dpw-v{font-size:1.4rem;font-weight:800;line-height:1.1;display:block}
.dpw-v.ok{color:var(--ok,#1f8a5b)}
.dpw-l{font-size:.78rem;color:var(--ink-2,#6b6b6b);margin-top:.15rem;display:block}

/* --- Gewichtung (Balken) ---------------------------------------- */
.dpw-rows{display:flex;flex-direction:column;gap:.55rem}
.dpw-row{cursor:pointer;border:1px solid transparent;border-radius:var(--radius-sm,10px);padding:.5rem .6rem;transition:background .12s}
.dpw-row:hover{background:var(--paper,#fff)}
.dpw-row.open{background:var(--paper,#fff);border-color:var(--line,#ececec)}
.dpw-row:focus-visible{outline:2px solid var(--accent,#111114);outline-offset:1px}
.dpw-rowtop{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.35rem}
.dpw-rowlabel{font-size:.92rem;font-weight:600}
.dpw-rowval{font-size:.82rem;color:var(--ink-2,#6b6b6b);font-family:var(--mono,monospace);white-space:nowrap}
.dpw-bar{height:9px;background:var(--line-2,#f4f4f4);border-radius:999px;overflow:hidden}
.dpw-barfill{height:100%;background:var(--accent,#111114);border-radius:999px;transition:width .3s}

/* --- Kosten-Rechner --------------------------------------------- */
.dpw-models{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.dpw-model{
  text-align:left;cursor:pointer;font:inherit;
  border:1px solid var(--line,#ececec);background:var(--paper,#fff);color:var(--ink,#0a0a0a);
  border-radius:var(--radius-sm,10px);padding:.6rem .7rem;transition:border-color .12s,box-shadow .12s;
}
.dpw-model:hover{border-color:var(--accent,#111114)}
.dpw-model.active{border-color:var(--accent,#111114);box-shadow:inset 0 0 0 1px var(--accent,#111114)}
.dpw-model:focus-visible{outline:2px solid var(--accent,#111114);outline-offset:1px}
.dpw-model-name{display:block;font-weight:700;font-size:.9rem}
.dpw-model-price{display:block;font-size:.76rem;color:var(--ink-2,#6b6b6b);margin-top:.15rem;font-family:var(--mono,monospace)}

.dpw-ctrl{display:block;margin:.8rem 0}
.dpw-ctrl-lab{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;margin-bottom:.3rem}
.dpw-range-val{color:var(--ink-2,#6b6b6b);font-family:var(--mono,monospace);font-size:.8rem;text-align:right}
.dpw-range{width:100%;accent-color:var(--accent,#111114);cursor:pointer}

.dpw-check,.dpw-strat{display:flex;align-items:flex-start;gap:.5rem;font-size:.88rem;margin:.5rem 0;cursor:pointer}
.dpw-check input,.dpw-strat input{margin-top:.15rem;accent-color:var(--accent,#111114);cursor:pointer}

.dpw-result{margin-top:1.1rem;border-top:1px solid var(--line,#ececec);padding-top:1rem}
.dpw-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem}
.dpw-big-usd{font-size:2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dpw-big-eur{color:var(--ink-2,#6b6b6b);font-size:.95rem}
.dpw-sub{margin-top:.5rem;font-size:.9rem}

/* --- Spar-Strategien -------------------------------------------- */
.dpw-strats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.3rem .9rem;margin-bottom:1rem}
.dpw-prompt{
  font-family:var(--mono,ui-monospace,monospace);font-size:.82rem;line-height:1.55;
  background:var(--paper,#fff);border:1px solid var(--line,#ececec);border-radius:var(--radius-sm,10px);
  padding:.8rem .9rem;color:var(--ink,#0a0a0a);white-space:pre-wrap;
  max-height:12rem;overflow:auto;
}
.dpw-saving{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:.9rem}
.dpw-saving-row{border:1px solid var(--line,#ececec);border-radius:var(--radius-sm,10px);padding:.6rem .7rem;background:var(--paper,#fff)}

@media (max-width:560px){
  .dpw-stats,.dpw-models,.dpw-saving{grid-template-columns:1fr 1fr}
  .dpw-big-usd{font-size:1.6rem}
}

/* --- Wo-lohnt-sich-KI-Matrix (dp-matrix) ------------------------- */
.dpw-mx-lib{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .8rem}
.dpw-mx-chip{font:inherit;font-size:.8rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid var(--line,#ececec);background:var(--paper,#fff);color:var(--ink,#0a0a0a);
  padding:.3rem .7rem;border-radius:999px;transition:border-color .12s,background .12s}
.dpw-mx-chip:hover{border-color:var(--accent,#111114)}
.dpw-mx-chip.on{border-color:var(--accent,#111114);background:var(--accent,#111114);color:var(--paper,#fff)}
.dpw-mx-chip:focus-visible{outline:2px solid var(--accent,#111114);outline-offset:1px}
.dpw-mx-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 1rem;
  font-family:var(--mono,monospace);font-size:.75rem;color:var(--ink-3,#a6a6a6)}
.dpw-mx-btn{font-family:var(--mono,monospace);font-size:.72rem;cursor:pointer;
  border:1px solid var(--line,#ececec);background:var(--paper,#fff);color:var(--ink-2,#6b6b6b);
  padding:.3rem .7rem;border-radius:999px;transition:.12s}
.dpw-mx-btn:hover{border-color:var(--accent,#111114);color:var(--ink,#0a0a0a)}

.dpw-mx-grid{display:grid;gap:1.1rem}
@media(min-width:680px){.dpw-mx-grid{grid-template-columns:1fr 1fr;align-items:start}}
.dpw-mx-plotwrap{display:grid;grid-template-columns:18px 1fr;gap:6px}
.dpw-mx-yax{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
  font-family:var(--mono,monospace);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3,#a6a6a6);display:flex;align-items:center;justify-content:center}
.dpw-mx-plot{position:relative;aspect-ratio:1/1;border:1px solid var(--line,#ececec);border-radius:10px;overflow:hidden;
  background:linear-gradient(var(--line,#ececec),var(--line,#ececec)) 0 50%/100% 1px no-repeat,
             linear-gradient(var(--line,#ececec),var(--line,#ececec)) 50% 0/1px 100% no-repeat,
             var(--paper,#fff)}
.dpw-mx-xax{text-align:center;font-family:var(--mono,monospace);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3,#a6a6a6);margin-top:6px;padding-left:24px}
.dpw-mx-ql{position:absolute;font-family:var(--mono,monospace);font-size:8.5px;letter-spacing:.03em;
  text-transform:uppercase;padding:5px 6px;line-height:1.3;pointer-events:none;max-width:47%}
.dpw-mx-bub{position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono,monospace);font-size:11px;font-weight:600;color:#fff;
  border:1.5px solid var(--paper,#fff);box-shadow:0 2px 6px rgba(0,0,0,.16);
  transition:left .45s cubic-bezier(.22,.8,.28,1),top .45s cubic-bezier(.22,.8,.28,1)}

.dpw-mx-ev{border:1px solid var(--line,#ececec);border-radius:10px;padding:.65rem .8rem;background:var(--paper,#fff);margin-bottom:.6rem}
.dpw-mx-evtop{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dpw-mx-evnm{font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:.5rem}
.dpw-mx-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dpw-mx-q{font-family:var(--mono,monospace);font-size:.64rem;text-transform:uppercase;letter-spacing:.03em;
  padding:.15rem .5rem;border-radius:999px;white-space:nowrap}
.dpw-mx-qrow{margin-top:.55rem}
.dpw-mx-qlb{font-size:.78rem;color:var(--ink-2,#6b6b6b);display:block;margin-bottom:.3rem}
.dpw-mx-seg{display:flex;flex-wrap:wrap;gap:3px;border:1px solid var(--line,#ececec);border-radius:999px;padding:2px;background:var(--wash,#fbfbfb)}
.dpw-mx-seg button{flex:1 1 auto;min-width:54px;font-family:var(--mono,monospace);font-size:.64rem;
  border:none;background:transparent;color:var(--ink-2,#6b6b6b);padding:.4rem .3rem;border-radius:999px;cursor:pointer;transition:.12s}
.dpw-mx-seg button:hover{color:var(--ink,#0a0a0a)}
.dpw-mx-seg button[aria-pressed="true"]{background:var(--accent,#111114);color:var(--paper,#fff)}
.dpw-mx-score{margin-top:.6rem;font-family:var(--mono,monospace);font-size:.72rem;color:var(--ink-3,#a6a6a6);font-variant-numeric:tabular-nums}

.dpw-mx-quad{border:1px solid var(--line,#ececec);border-left:3px solid var(--qc,#111114);border-radius:10px;padding:.6rem .75rem;margin-bottom:.5rem}
.dpw-mx-quadh{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.dpw-mx-quadnm{font-weight:600;font-size:.88rem}
.dpw-mx-quadc{font-family:var(--mono,monospace);font-size:.72rem;color:var(--ink-3,#a6a6a6)}
.dpw-mx-quada{font-size:.8rem;color:var(--ink-2,#6b6b6b);margin-top:.25rem;line-height:1.45}
.dpw-mx-quadi{font-family:var(--mono,monospace);font-size:.72rem;color:var(--ink-3,#a6a6a6);margin-top:.35rem;line-height:1.5}