/* Engagement-Wert-Rechner: Eingabe, Ergebnis, Grafik */
.ew-sec{padding:56px 0 72px;}
.ew-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:start;}
.ew-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;margin:0 0 20px;}
.ew-box h2{font-size:1.2rem;color:var(--dark);margin:0 0 4px;}
.ew-box .hilfe{color:var(--grey);font-size:.9rem;line-height:1.5;margin:0 0 16px;}
.ew-feld{display:block;margin:0 0 14px;}
.ew-feld > span{display:block;font-weight:700;color:var(--dark);font-size:.92rem;margin-bottom:6px;}
.ew-feld small{font-weight:400;color:var(--grey);}
.ew-sec input[type=text],.ew-sec select{width:100%;padding:10px 11px;font:inherit;font-size:.95rem;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);}
.ew-sec input[type=text]:focus,.ew-sec select:focus{outline:3px solid var(--red);outline-offset:1px;border-color:var(--red);}
.ew-sec input:disabled{background:var(--cream);color:var(--grey);}
.ew-zwei{display:grid;grid-template-columns:1fr 140px;gap:14px;}
.ew-zeilen{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.ew-zeile{display:grid;grid-template-columns:minmax(0,1.5fr) 76px 104px 118px 34px;gap:8px;align-items:end;padding-bottom:12px;border-bottom:1px dashed var(--line);}
.ew-zeile label span{display:block;font-size:.78rem;font-weight:700;color:var(--grey);margin-bottom:4px;white-space:nowrap;}
.ew-zeile .x{width:34px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:transparent;border:1.5px solid var(--line);border-radius:8px;color:var(--grey);cursor:pointer;}
.ew-zeile .x:hover{color:var(--red);border-color:var(--red);}
.ew-zeile .x svg{width:16px;height:16px;}
.ew-zeile .x[hidden]{display:inline-flex;visibility:hidden;}
.ew-plus{margin-top:14px;background:none;border:0;padding:6px 0;font:inherit;font-weight:700;color:var(--red);cursor:pointer;}
.ew-plus:hover{color:var(--red-deep);}
.ew-radio{display:flex;gap:10px;align-items:flex-start;padding:8px 0;cursor:pointer;line-height:1.45;}
.ew-radio input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--red);flex:0 0 auto;}
.ew-radio b{color:var(--dark);}
.ew-ml-sel{font:inherit;font-weight:700;padding:2px 4px;border:1.5px solid var(--line);border-radius:6px;background:#fff;color:var(--dark);}
.ew-eigen{margin:4px 0 0 28px;max-width:180px;}
.ew-hinweis{color:var(--grey);font-size:.85rem;line-height:1.5;margin:12px 0 0;}

/* Ergebnis */
.ew-ergebnis{position:sticky;top:96px;}
.ew-leer{background:var(--cream);border:1px dashed var(--line);border-radius:14px;padding:28px;color:var(--grey);line-height:1.6;}
.ew-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 16px;}
.ew-zahl{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:16px;}
.ew-zahl .z{display:block;font-size:1.9rem;font-weight:700;color:var(--dark);line-height:1.1;}
.ew-zahl .l{display:block;color:var(--grey);font-size:.85rem;margin-top:4px;}
.ew-zahl.gross{grid-column:1 / -1;background:var(--red);border-color:var(--red);}
.ew-zahl.gross .z{color:#fff;font-size:2.6rem;}
.ew-zahl.gross .l{color:#fff;opacity:.9;}
.ew-satz{background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:10px;padding:16px 18px;line-height:1.6;margin:0 0 12px;}
.ew-knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px;}
.ew-knoepfe button{cursor:pointer;font:inherit;font-weight:700;}
.ew-knoepfe .btn-primary{border:0;}
.ew-teile-box h3,.ew-grafik h3{font-size:1rem;color:var(--dark);margin:0 0 10px;}
.ew-teile{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px;}
.ew-teile li{display:grid;grid-template-columns:minmax(0,130px) 1fr 84px;gap:10px;align-items:center;font-size:.9rem;}
.ew-teile .n{font-weight:700;color:var(--dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ew-teile .h{text-align:right;color:var(--grey);}
.ew-bar{display:block;height:10px;border-radius:5px;background:var(--line);overflow:hidden;}
.ew-bar span{display:block;height:100%;background:var(--red);border-radius:5px;}
.ew-grafik canvas{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--cream);}
.ew-grafik-opt{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:12px 0 0;}
.ew-grafik-opt label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:700;color:var(--grey);}
.ew-grafik-opt select{width:auto;}
.ew-grafik-opt input[type=color]{display:block;width:52px;height:40px;padding:2px;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;}
.ew-farbwahl{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:700;color:var(--grey);}
.ew-farbe-paar{display:flex;gap:6px;}
.ew-grafik-opt input#ew-hex{width:100px;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;}
.ew-grafik-opt input#ew-hex[aria-invalid="true"]{border-color:var(--red);background:#fff4f4;}
.ew-grafik-opt .btn{border:0;cursor:pointer;font:inherit;font-weight:700;}

/* Methode */
.ew-methode{max-width:820px;}
.ew-methode h2{font-size:1.5rem;color:var(--dark);margin:0 0 12px;}
.ew-methode p,.ew-methode li{line-height:1.65;}
.ew-methode ul{padding-left:20px;}

@media (max-width:960px){
  .ew-grid{grid-template-columns:1fr;}
  .ew-ergebnis{position:static;}
}
@media (max-width:600px){
  .ew-box{padding:18px;}
  .ew-zeile{grid-template-columns:1fr 1fr 34px;}
  .ew-zeile .b{grid-column:1 / 3;}
  .ew-zeile .x{grid-column:3;grid-row:1;}
  .ew-zeile .z{grid-column:1 / 3;}
  .ew-zwei{grid-template-columns:1fr;}
  .ew-zahl.gross .z{font-size:2.1rem;}
  .ew-teile li{grid-template-columns:1fr 70px;}
  .ew-teile .ew-bar{grid-column:1 / -1;grid-row:2;}
}