/* Ressourcen (tools/inhalte/ressourcen.py): ROI-Rechner und Vergleich Eywora vs. Doofinder. Präfix re-, aufbauend auf sp-/sx- */
.re h2 em{font-style:normal;color:var(--green);text-shadow:0 0 18px rgba(125,255,168,.55)}
.re-eb{margin:-6px 0 0!important;font-size:12px!important;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-cya)!important}
.re-note{margin:16px 4px 0;font-size:12px;line-height:1.65;color:rgba(255,255,255,.62)}
.re-hero .wrap{align-items:start}
.re-hero .wrap>div:first-child{padding-top:24px}

/* ROI-Rechner: Schieber, zwei Ergebniskarten, Testknopf */
.re-in{padding:22px 24px 6px}
.re-in label{display:block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-cya)}
.re-val{display:flex;align-items:baseline;gap:8px;margin:10px 0 18px;font-family:var(--head);color:#fff}
.re-val b{font-weight:400;font-size:clamp(32px,4vw,44px);text-shadow:0 0 22px rgba(63,216,232,.5);font-variant-numeric:tabular-nums}
.re-val span{font-family:var(--mono);font-size:18px;color:rgba(255,255,255,.75)}
.re-in input[type=range]{--p:10%;-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;margin:0;border-radius:4px;cursor:pointer;
  background:linear-gradient(90deg,var(--sp-cya),var(--sp-vio) var(--p),rgba(207,198,240,.14) var(--p))}
.re-in input[type=range]:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.re-in input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--sp-vio);box-shadow:0 0 0 6px rgba(167,107,255,.25),0 0 18px rgba(167,107,255,.8)}
.re-in input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--sp-vio);box-shadow:0 0 0 6px rgba(167,107,255,.25),0 0 18px rgba(167,107,255,.8)}
.re-scale{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:12px;color:rgba(255,255,255,.62);font-family:var(--mono)}
.re-drag{color:var(--sp-cya)}
.re-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 16px 4px}
.re-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:10px;border:1px dashed rgba(224,75,192,.5);background:rgba(224,75,192,.07)}
.re-card.re-gain{border:1px solid rgba(92,242,160,.5);background:rgba(92,242,160,.08)}
.re-lbl{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#ff8ae4}
.re-gain .re-lbl{color:var(--sp-grn)}
.re-num{display:flex;align-items:baseline;gap:4px;margin:0;font-family:var(--head);color:#fff;white-space:nowrap}
.re-num small{font-family:var(--mono);font-size:16px;color:rgba(255,255,255,.75)}
.re-num b{font-weight:400;font-size:clamp(22px,2.4vw,28px);font-variant-numeric:tabular-nums}
.re-gain .re-num b{color:var(--sp-grn);text-shadow:0 0 16px rgba(92,242,160,.55)}
.re-meta{margin:0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.75)}
.re-go{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;padding:16px 20px 20px}
.re-go small{font-size:12px;color:rgba(255,255,255,.65)}

/* Methodik: große Werte statt Nummern, Formel darunter */
.re-n{font-size:30px}
.re-formel{max-width:900px;margin:40px auto 0;padding:28px 30px;border-radius:16px;border:1px solid rgba(63,216,232,.35);background:rgba(12,6,32,.85);box-shadow:0 0 30px rgba(63,216,232,.12)}
.re-flbl{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--sp-cya)}
.re-eq{display:grid;gap:10px;margin:16px 0}
.re-eq code{display:block;padding:12px 16px;border-radius:8px;border:1px dashed rgba(207,198,240,.3);background:rgba(6,4,14,.6);font-family:var(--mono);font-size:15px;color:#fff;overflow-wrap:anywhere}
.re-eq strong{color:var(--sp-grn)}
.re-formel p{margin:0;font-size:13.5px;line-height:1.7;color:var(--sp-muted)}

/* Beispiele: drei Shopgrößen, die mittlere hervorgehoben */
.re-scs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.re-sc{position:relative;padding:28px 24px 22px;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.7)}
.re-sc.is-self{border-color:rgba(167,107,255,.6);box-shadow:0 0 34px rgba(167,107,255,.22);background:radial-gradient(120% 90% at 50% 0%,rgba(167,107,255,.16),transparent 60%),rgba(24,14,58,.8)}
.re-band{position:absolute;top:-12px;left:24px;padding:5px 12px;border-radius:999px;background:var(--sp-vio);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;box-shadow:0 0 16px rgba(167,107,255,.6)}
.re-sc h3{margin:0;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sp-cya)}
.re-vol{margin:10px 0 18px;font-family:var(--mono);font-weight:700;font-size:24px;color:#fff}
.re-vol span{font-size:14px;color:rgba(255,255,255,.65)}
.re-sc dl{margin:0}
.re-sc dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(207,198,240,.1);font-size:13.5px}
.re-sc dt{color:rgba(255,255,255,.8)}
.re-sc dd{margin:0;font-weight:700;color:#fff;white-space:nowrap}
.re-sc .re-gain dd{color:var(--sp-grn)}
.re-sc .re-meta dd,.re-sc .re-meta dt{color:rgba(255,255,255,.62);font-weight:400}
.re-sc .re-roi{margin-top:4px;border-top:1px solid rgba(167,107,255,.4)}
.re-sc .re-roi dd{font-family:var(--head);font-weight:400;font-size:22px;color:var(--sp-vio);text-shadow:0 0 14px rgba(167,107,255,.7)}

/* Break-even: Text und Balken bis Tag 5 */
.re-be{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 48px;align-items:center;max-width:1100px;margin:0 auto;padding:44px 48px;border-radius:20px;border:1px solid rgba(207,198,240,.16);background:radial-gradient(120% 120% at 100% 0%,rgba(92,242,160,.1),transparent 55%),rgba(24,14,58,.72)}
.re-be h2{margin:18px 0 16px}
.re-be p{margin:0 0 12px;font-size:15px;line-height:1.75;color:var(--sp-muted)}
.re-be strong{color:var(--sp-grn)}
.re-track{position:relative;height:56px;border-radius:12px;border:1px solid rgba(207,198,240,.16);background:repeating-linear-gradient(90deg,rgba(207,198,240,.08) 0 1px,transparent 1px 8.33%),rgba(6,4,14,.6);overflow:hidden}
.re-track i{position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(90deg,var(--sp-grn),var(--sp-cya));box-shadow:0 0 22px rgba(92,242,160,.7)}
.re-track b{position:absolute;left:calc(var(--w,8%) + 14px);top:50%;transform:translateY(-50%);font-family:var(--head);font-weight:400;font-size:18px;color:var(--sp-grn);text-shadow:0 0 12px rgba(92,242,160,.6)}
.re-axis{margin:14px 0 0!important;font-size:12.5px!important;color:rgba(255,255,255,.65)!important}

/* Vergleich: Fazit im Kopf, Tabelle mit zwei Spalten, Karten für Preise und Eignung */
.re-vcs{display:grid;gap:10px;padding:12px 16px 18px}
.re-vc{padding:16px 18px;border-radius:10px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.6)}
.re-vc.is-self{border-color:rgba(92,242,160,.5);background:rgba(92,242,160,.06);box-shadow:0 0 22px rgba(92,242,160,.12)}
.re-vc b{font-family:var(--head);font-weight:400;font-size:18px;color:#fff}
.re-vc>span{display:block;margin:2px 0 10px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sp-cya)}
.re-vc.is-self>span{color:var(--sp-grn)}
.re-vc ul,.re-k ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.re-vc li,.re-k li{position:relative;padding-left:20px;font-size:13.5px;line-height:1.55;color:#fff}
.re-vc li::before,.re-k li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:7px;border-radius:50%;background:rgba(207,198,240,.55)}
.re-vc.is-self li::before,.re-k.is-self li::before{background:var(--sp-grn);box-shadow:0 0 8px var(--sp-grn)}
.re-tbl{max-width:1100px}
table.re-cmp{min-width:0}
.re-cmp td{width:38%}
.re-cmp tbody th{width:24%}
.re-src{max-width:1100px;margin:22px auto 0;text-align:center}
.re-ks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1100px;margin:0 auto}
.re-k{padding:30px 28px;border-radius:16px;border:1px solid rgba(207,198,240,.14);background:rgba(24,14,58,.7)}
.re-k.is-self{border-color:rgba(92,242,160,.5);box-shadow:0 0 30px rgba(92,242,160,.14);background:radial-gradient(120% 100% at 0% 0%,rgba(92,242,160,.1),transparent 55%),rgba(24,14,58,.75)}
.re-ktag{font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sp-ora)}
.re-k.is-self .re-ktag{color:var(--sp-grn)}
.re-k h3{font-family:var(--head);font-weight:400;font-size:19px;line-height:1.4;color:#fff;margin:10px 0 12px}
.re-k p{margin:0 0 18px;font-size:14px;line-height:1.75;color:var(--sp-muted)}

@media(max-width:1100px){.re-scs{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}.re-sc.is-self{margin-top:8px}}
@media(max-width:900px){.re-hero .wrap>div:first-child{padding-top:0}.re-be{grid-template-columns:minmax(0,1fr);padding:32px 24px}.re-ks{grid-template-columns:minmax(0,1fr)}}
/* Handy: Tabelle als Karten je Kriterium, Zellen mit Spaltenname davor */
@media(max-width:700px){
  .re-tbl{overflow:visible;background:none;border:0}
  .re-cmp,.re-cmp tbody,.re-cmp tr,.re-cmp th,.re-cmp td{display:block;width:auto!important}
  .re-cmp thead{display:none}
  .re-cmp tr{margin-bottom:12px;border-radius:14px;border:1px solid rgba(207,198,240,.14);background:rgba(16,9,42,.85);overflow:hidden}
  .re-cmp tbody th{position:static;background:#1a0f42;padding:12px 16px}
  .re-cmp td{padding:12px 16px;border-bottom:0}
  .re-cmp td+td{border-top:1px solid rgba(207,198,240,.08)}
  .re-cmp .hl{box-shadow:none}
  .re-cmp .sp-cell{flex-wrap:wrap}
  .re-cmp .sp-cell::before{content:attr(data-label);flex-basis:100%;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--sp-cya)}
  .re-cmp .hl .sp-cell::before{color:var(--sp-vio)}
  .re-cmp .sp-cell>span{flex:1;min-width:0}
}
@media(max-width:620px){.re-in{padding:18px 16px 4px}.re-res{grid-template-columns:minmax(0,1fr)}.re-formel{padding:22px 18px}.re-eq code{font-size:13.5px}.re-k{padding:24px 20px}.re-sc{padding:26px 18px 18px}}