.page-hourcost .sub-head{padding-bottom:40px}
.page-hourcost .sub-head-text::after{background-image:url(img/icon-05-zeitrelais-cut-420.webp)}
.page-hourcost .sheet{padding:44px 0 66px}
.page-hourcost .sheet-body{margin-top:32px}
.page-hourcost .sheet h2{font-size:clamp(30px,3.1vw,44px);line-height:1}
.h-meter{min-width:0;background:var(--paper);border:3px solid var(--ink);box-shadow:10px 10px 0 rgba(20,23,26,.16)}
.h-meter-body{display:grid;gap:14px;padding:14px 18px 16px}
.h-field{position:relative;display:grid;gap:5px;min-width:0;border:0;padding:0;margin:0}
.h-field .caps,.h-field legend{font-size:13.5px}
.h-field legend{padding:0;margin-bottom:5px}
.h-field input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:48px;border:0;border-radius:0;padding:0;background:transparent;color:var(--ink);cursor:pointer}
.h-field input[type="range"]::-webkit-slider-runnable-track{height:14px;border:var(--rule) solid var(--ink);background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 11.111%),#fff}
.h-field input[type="range"]::-moz-range-track{height:10px;border:var(--rule) solid var(--ink);background:#fff}
.h-field input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:34px;margin-top:-12px;border:var(--rule) solid var(--ink);background:var(--yellow);cursor:pointer}
.h-field input[type="range"]::-moz-range-thumb{width:18px;height:30px;border:var(--rule) solid var(--ink);border-radius:0;background:var(--yellow);cursor:pointer}
.h-stake-value{position:absolute;right:0;top:-4px;font-family:var(--slab);font-weight:800;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.h-range-ends{display:flex;justify-content:space-between;gap:12px;font-family:var(--slab);font-weight:700;font-size:15px;line-height:1;margin-top:-6px}
.h-taps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.h-tap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:58px;min-width:0;border:var(--rule) solid var(--ink);background:#fff;padding:8px 4px 5px;cursor:pointer;transition:background-color var(--t-snap) linear,color var(--t-snap) linear}
.h-tap input{position:absolute;left:6px;top:6px;opacity:0;width:1px;height:1px}
.h-tap-key{width:14px;height:14px;flex:none;border:var(--rule) solid var(--ink);background:var(--ground)}
.h-tap-value{font-family:var(--slab);font-weight:700;font-size:17.5px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.h-tap:hover{background:var(--tint)}
.h-tap:has(input:checked){background:var(--tone);color:var(--on-tone)}
.h-tap:has(input:checked) .h-tap-key{background:var(--yellow)}
.h-tap:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 9px var(--yellow);z-index:1}
.h-fixed{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:9px 0 7px;font-size:15.5px;line-height:1.3}
.h-fixed .caps{font-size:13.5px}
.h-fixed strong{font-family:var(--slab);font-weight:700;font-size:19px;line-height:1.1}
.h-fixed .fine{flex-basis:100%}
.h-result{display:grid;gap:6px;min-width:0;border:3px solid var(--ink);background:var(--tint);padding:14px 18px 12px}
.h-result-value{font-family:var(--slab);font-weight:800;font-size:clamp(44px,5vw,66px);line-height:.95;font-variant-numeric:tabular-nums}
.h-gauge{position:relative;margin:4px 14px 0;padding-bottom:22px}
.h-gauge-rule{position:relative;display:block;height:22px;border:var(--rule) solid var(--ink);margin-inline:-14px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 4.1667%) 12px 0/calc(100% - 24px) 8px no-repeat,#fff}
.h-needle{position:absolute;left:calc(12px + (100% - 24px) * var(--at) / 100);top:-8px;width:10px;height:34px;margin-left:-5px;border:var(--rule) solid var(--ink);background:var(--yellow);transition:left var(--t-move) var(--move)}
.h-gauge-marks li{position:absolute;bottom:0;left:var(--at);transform:translateX(-50%);font-family:var(--slab);font-weight:700;font-size:14px;line-height:1;white-space:nowrap}
.h-gauge-marks li::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);width:2px;height:22px;margin-left:-1px;background:var(--ink)}
.h-result-second{font-size:16px;line-height:1.3;border-top:1.5px dotted var(--grey);padding-top:6px}
.h-result-second output{font-family:var(--slab);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.h-meter-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px}
.h-meter-foot .fine{flex:1 1 240px;min-width:0}
html:not(.js) .h-reset{display:none}
.h-compare{width:100%;border-collapse:collapse;background:var(--paper);border:var(--rule) solid var(--ink)}
.h-compare caption{text-align:left;padding:0 0 10px;font-size:15px;color:var(--grey);line-height:1.45}
.h-compare th,.h-compare td{padding:12px 18px 10px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--hair)}
.h-compare thead th{background:var(--tint);border-bottom:var(--rule) solid var(--ink);font-family:var(--slab);font-weight:700;font-size:14.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.h-compare tbody tr:last-child th,.h-compare tbody tr:last-child td{border-bottom:0}
.h-compare tbody th{font-weight:400;white-space:nowrap}
.h-compare .h-col-bar{width:36%}
.h-compare .version-bar{min-width:120px}
.h-cost{font-family:var(--slab);font-weight:800;font-size:27px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.h-way{font-size:15.5px;color:var(--grey);white-space:nowrap;font-variant-numeric:tabular-nums}
.h-set-mark{display:none;margin-left:10px;font-size:12.5px;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);padding:4px 7px 2px;vertical-align:middle}
.h-compare tr.is-set{background:var(--tint)}
.h-compare tr.is-set .h-set-mark{display:inline-block}
.h-compare-foot{margin-top:10px}
@media (prefers-reduced-motion:reduce){
  .h-needle,.h-tap{transition:none}
}
@media (max-width:1180px){
  .h-tap-value{font-size:16px}
}
@media (max-width:1000px){
  .page-hourcost .sub-head.has-feature .sub-head-grid:not(.is-stacked) .sub-head-text{display:contents}
  .h-meter{margin:14px 0 20px}
  .h-tap-value{font-size:17.5px}
}
@media (max-width:860px){
  .h-compare thead{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .h-compare thead tr,.h-compare thead th{display:block;width:1px;height:1px;padding:0;border:0;overflow:hidden}
  .h-compare,.h-compare tbody{display:block}
  .h-compare caption{display:block}
  .h-compare tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:12px 14px 12px;border-bottom:1px solid var(--hair)}
  .h-compare tbody tr:last-child{border-bottom:0}
  .h-compare tbody th,.h-compare tbody td{display:block;padding:0;border:0;min-width:0}
  .h-compare tbody th{white-space:normal}
  .h-compare .h-col-bar,.h-compare .h-col-way{grid-column:1/-1;width:auto}
  .h-way{white-space:normal}
  .h-set-mark{margin:6px 0 0}
}
@media (max-width:760px){
  .page-hourcost .sheet{padding:30px 0 46px}
  .page-hourcost .sheet-body{margin-top:24px}
  .h-meter{box-shadow:5px 5px 0 rgba(20,23,26,.16)}
  .h-meter-body{padding:12px 12px 14px}
  .h-result{padding:12px 12px 10px}
}
@media (max-width:420px){
  .h-taps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h-set-mark{display:none}
  .h-compare tr.is-set .h-set-mark{display:block;width:max-content;margin-left:0}
}