#f1h-tool{--f-bg:#f6f6f8;--f-card:#fff;--f-line:#dfdfe6;--f-text:#15151e;--f-mute:#5e5e6e;--f-acc:#d0021b;--f-acc-soft:#fdeaec;--f-dark:#15151e;--f-grn:#12744a;--f-grn-soft:#e3f4ea;--f-red:#b3261e;--f-red-soft:#fce9e7;--f-gold:#855c00;--f-gold-soft:#fcf3d9;
font-family:inherit;color:var(--f-text);background:var(--f-bg);border:1px solid var(--f-line);border-radius:14px;padding:22px;margin:28px 0;box-sizing:border-box;max-width:100%;line-height:1.5}
#f1h-tool *{box-sizing:border-box}
#f1h-tool h2{margin:0 0 6px;font-size:1.5em;line-height:1.2;color:var(--f-text)}
#f1h-tool h3{margin:0 0 10px;font-size:1.05em;color:var(--f-text)}
#f1h-tool p{margin:0}
#f1h-tool .f-sub{color:var(--f-mute);margin:0 0 18px;font-size:.96em}
#f1h-tool .f-badge{display:inline-block;font-size:.72em;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--f-acc);border-radius:4px;padding:3px 10px;margin-bottom:10px}
#f1h-tool .f-card{background:var(--f-card);border:1px solid var(--f-line);border-radius:12px;padding:16px;margin-bottom:14px}
#f1h-tool .f-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--f-dark);color:#fff;font-size:.78em;margin-right:8px;vertical-align:1px}
#f1h-tool .f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
#f1h-tool label{display:block;font-size:.8em;color:var(--f-mute);margin-bottom:4px}
#f1h-tool input[type=text],#f1h-tool select{background:#fff;border:1px solid var(--f-line);color:var(--f-text);border-radius:7px;padding:9px 10px;font-size:.95em;font-family:inherit;margin:0;width:100%;height:auto}
#f1h-tool input[type=text]:focus,#f1h-tool select:focus{outline:2px solid var(--f-acc-soft);border-color:var(--f-acc)}
#f1h-tool .f-hint{font-size:.78em;color:var(--f-mute);margin-top:4px}
#f1h-tool .f-note{font-size:.8em;color:var(--f-mute);margin-top:10px}
#f1h-tool .f-sec{font-size:.78em;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--f-acc);margin:14px 0 8px}
#f1h-tool .f-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
#f1h-tool .f-stat{background:var(--f-bg);border:1px solid var(--f-line);border-radius:10px;padding:12px}
#f1h-tool .f-stat .k{font-size:.74em;color:var(--f-mute);text-transform:uppercase;letter-spacing:.05em}
#f1h-tool .f-stat .v{font-size:1.35em;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:3px;color:var(--f-text)}
#f1h-tool .f-stat .s{font-size:.8em;color:var(--f-mute)}
#f1h-tool .f-stat.hl{background:var(--f-acc-soft);border-color:#f5c2c8}
#f1h-tool .pos{color:var(--f-grn)!important}
#f1h-tool .neg{color:var(--f-red)!important}
#f1h-tool .f-verdict{border-radius:10px;padding:12px 14px;margin-top:12px;font-size:.93em}
#f1h-tool .f-verdict.good{background:var(--f-grn-soft);border:1px solid #b9e0c9}
#f1h-tool .f-verdict.mid{background:var(--f-gold-soft);border:1px solid #efd9a0}
#f1h-tool .f-verdict.bad{background:var(--f-red-soft);border:1px solid #f3c3bd}
#f1h-tool .f-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
#f1h-tool table{border-collapse:collapse;width:100%;font-size:.9em;margin:0}
#f1h-tool th,#f1h-tool td{padding:8px 7px;border-bottom:1px solid var(--f-line);text-align:left;vertical-align:middle;background:transparent;color:var(--f-text)}
#f1h-tool th{font-size:.74em;text-transform:uppercase;letter-spacing:.05em;color:var(--f-mute);font-weight:700;white-space:nowrap}
#f1h-tool td.r,#f1h-tool th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#f1h-tool tr.sel td{background:var(--f-acc-soft);font-weight:600}
#f1h-tool input[type=range]{width:100%;accent-color:var(--f-acc);margin:6px 0 0}
#f1h-tool .f-range{display:flex;justify-content:space-between;font-size:.78em;color:var(--f-mute)}
#f1h-tool details{margin-top:6px;font-size:.88em;color:var(--f-mute)}
#f1h-tool summary{cursor:pointer;color:var(--f-text);font-weight:600}
#f1h-tool details p{margin:8px 0 0}
#f1h-tool .f-foot{margin-top:14px;font-size:.78em;color:var(--f-mute);border-top:1px solid var(--f-line);padding-top:10px}
@media (max-width:600px){#f1h-tool{padding:14px;border-radius:12px}#f1h-tool h2{font-size:1.22em}#f1h-tool .f-card{padding:12px}#f1h-tool .f-stat .v{font-size:1.15em}}

/* ===== Mobile sizing / WordPress containment ===== */
#f1h-tool {
  width:100%;
  max-width:100%;
  min-width:0;
}
#f1h-tool .f-card,
#f1h-tool .f-stats,
#f1h-tool .f-grid,
#f1h-tool .f-stat,
#f1h-tool .f-tw {
  min-width:0;
  max-width:100%;
}
#f1h-tool .f-grid > *,
#f1h-tool .f-stats > * { min-width:0; }
#f1h-tool .f-grid { grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); }
#f1h-tool .f-stats { grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); }
#f1h-tool .f-tw {
  display:block;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
#f1h-tool .f-tw table { min-width:520px; }
#f1h-tool .f-stat .v,
#f1h-tool .f-verdict { overflow-wrap:anywhere; }
/* A WordPress Custom HTML block can be a grid or flex child. */
.wp-block-html:has(> #f1h-tool) { min-width:0; max-width:100%; }
@media (max-width:600px) {
  /* Show comparison results as stacked cards instead of a 520px table. */
  #f1h-tool .f-tw { overflow-x:visible; }
  #f1h-tool .f-tw table { min-width:0!important; width:100%; border-collapse:separate; }
  #f1h-tool .f-tw thead { display:none; }
  #f1h-tool .f-tw tbody { display:block; width:100%; }
  #f1h-tool .f-tw tr {
    display:block;
    width:100%;
    margin-bottom:10px;
    padding:9px 12px;
    border:1px solid var(--f-line);
    border-radius:9px;
    background:var(--f-card);
  }
  #f1h-tool .f-tw tr.sel { border-color:var(--f-acc); background:var(--f-acc-soft); }
  #f1h-tool .f-tw td,
  #f1h-tool .f-tw td.r {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    text-align:right;
    white-space:normal;
    border-bottom:1px solid var(--f-line);
    padding:7px 0;
    overflow-wrap:anywhere;
  }
  #f1h-tool .f-tw td:last-child { border-bottom:0; }
  #f1h-tool .f-tw td:first-child {
    display:block;
    text-align:left;
    font-weight:700;
    padding:4px 0 8px;
  }
  #f1h-tool .f-tw td:not(:first-child)::before {
    flex:0 1 55%;
    text-align:left;
    font-weight:500;
    font-size:.85em;
    color:var(--f-mute);
    white-space:normal;
  }
  #f1h-tool .f-tw td:nth-child(2)::before { content:"Hedge-Einsatz"; }
  #f1h-tool .f-tw td:nth-child(3)::before { content:"Ihre Auswahl gewinnt"; }
  #f1h-tool .f-tw td:nth-child(4)::before { content:"Gegenseite gewinnt"; }
  #f1h-tool .f-tw td:nth-child(5)::before { content:"Erwartungswert"; }
}