/* Hardware & Infrastruktur (Präfix hw-), baut auf ui.css auf. */
.hw-hero{padding:72px 0 64px;background:var(--ui-bg-soft);color:var(--ui-text);font-family:var(--ui-font)}
.hw-hero h1{font-weight:700;font-size:clamp(2rem,4vw,2.9rem);line-height:1.15;margin:0 0 1rem;color:var(--ui-text)}
.hw-lead{color:var(--ui-mute);font-size:1.05rem;max-width:560px}

/* Rack-Grafik mit blinkenden LEDs */
.hw-rack-wrap{display:flex;gap:22px;align-items:center;justify-content:center}
.hw-rack{width:230px;flex:none;background:var(--ui-ink);border-radius:16px;padding:14px;box-shadow:0 24px 48px rgba(0,0,0,.18)}
.hw-ru{height:34px;border-radius:6px;background:var(--ui-ink-2);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;border:1px solid #232a3a}
.hw-ru:last-child{margin-bottom:0}
.hw-bays{display:flex;gap:4px}
.hw-bays i{width:12px;height:18px;border-radius:2px;background:#232a3a;border:1px solid #2d3548}
.hw-leds{display:flex;gap:5px}
.hw-leds b{width:7px;height:7px;border-radius:50%;background:#35c27a;box-shadow:0 0 6px #35c27a;animation:hw-blink 2.4s infinite}
.hw-leds b:nth-child(2){animation-delay:.8s;background:var(--ui-y);box-shadow:0 0 6px var(--ui-y)}
.hw-ru:nth-child(2) .hw-leds b{animation-delay:.4s}
.hw-ru:nth-child(3) .hw-leds b{animation-delay:1.1s}
.hw-ru:nth-child(4) .hw-leds b{animation-delay:1.7s}
@keyframes hw-blink{0%,100%{opacity:1}50%{opacity:.35}}
.hw-callouts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.hw-callouts li{background:var(--ui-card);border:1px solid var(--ui-line);border-radius:12px;padding:.5rem .8rem;font-size:.84rem;display:flex;gap:.55rem;align-items:center;box-shadow:0 6px 18px rgba(0,0,0,.05);color:var(--ui-text)}
.hw-callouts i{color:var(--ui-y-ink);width:18px;text-align:center}
@media (max-width:575px){.hw-rack{width:170px}.hw-bays i:nth-child(n+6){display:none}}

/* Produktlinien */
.hw-line{border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-card);height:100%;overflow:hidden;display:flex;flex-direction:column}
.hw-line--highlight{border:2px solid var(--ui-y)}
.hw-line-top{padding:20px 22px 14px}
.hw-line--highlight .hw-line-top{background:var(--ui-y-soft)}
.hw-line-top h3{font-weight:700;font-size:1.15rem;margin:0;color:var(--ui-text)}
.hw-line-top small{color:var(--ui-mute)}
.hw-spec{list-style:none;margin:0;padding:6px 22px 18px;flex:1}
.hw-spec li{display:flex;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--ui-line);font-size:.9rem;color:var(--ui-text)}
.hw-spec li:last-child{border-bottom:0}
.hw-spec i{width:18px;color:var(--ui-mute);margin-top:3px;text-align:center}
.hw-spec span{color:var(--ui-mute);font-size:.78rem;display:block}
.hw-line-foot{padding:0 22px 20px}
.hw-subhead{font-size:1.25rem;font-weight:600;margin:3rem 0 .25rem;color:var(--ui-text)}
.hw-dedi{display:flex;gap:.9rem;align-items:center;padding:16px 18px;border-radius:14px;border:1px solid var(--ui-line);background:var(--ui-card);text-decoration:none;color:var(--ui-text);height:100%;transition:border-color .2s ease,transform .2s ease}
.hw-dedi:hover,.hw-dedi:focus-visible{border-color:var(--ui-y);transform:translateY(-2px);color:var(--ui-text)}
.hw-dedi-icon{flex:none;width:40px;height:40px;border-radius:10px;background:var(--ui-y-soft);display:flex;align-items:center;justify-content:center}
.hw-dedi:hover .hw-dedi-icon{background:var(--ui-y);color:#000}
.hw-dedi b{display:block;font-weight:600}
.hw-dedi span span{font-size:.8rem;color:var(--ui-mute)}

/* Redundanz-Kacheln */
.hw-layer{padding:24px;border-radius:16px;background:var(--ui-card);border:1px solid var(--ui-line);height:100%}
.hw-layer-num{font-size:2.2rem;font-weight:700;line-height:1;color:var(--ui-text)}
.hw-layer-num em{font-style:normal;color:var(--ui-y-ink)}
.hw-layer-viz{display:flex;gap:6px;margin:14px 0}
.hw-layer-viz i{flex:1;height:10px;border-radius:5px;background:var(--ui-y)}
.hw-layer-viz i.is-off{background:var(--ui-line)}
.hw-layer h3{font-weight:600;font-size:1rem;margin-bottom:.35rem;color:var(--ui-text)}
.hw-layer p{color:var(--ui-mute);font-size:.88rem;margin:0}

/* Monitoring */
.hw-h2{font-weight:700;color:var(--ui-text)}
.hw-checks{list-style:none;padding:0;margin:1.2rem 0 0}
.hw-checks li{display:flex;gap:.7rem;padding:.45rem 0;color:var(--ui-text)}
.hw-checks i{color:var(--ui-ok);margin-top:4px}
.hw-monitor{background:var(--ui-ink);color:#fff;border-radius:18px;padding:22px;box-shadow:0 24px 48px rgba(0,0,0,.18)}
html[data-theme-mode='dark'] .hw-monitor{background:var(--ui-card);border:1px solid var(--ui-line)}
.hw-monitor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.hw-monitor-head span{color:#9aa0ad;font-size:.78rem}
.hw-monitor-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid #232a3a;font-size:.88rem}
.hw-monitor-row:last-of-type{border-bottom:0}
.hw-ok{color:#35c27a;font-weight:600}
.hw-dot{width:8px;height:8px;border-radius:50%;background:#35c27a;display:inline-block;margin-right:.45rem;box-shadow:0 0 6px #35c27a}
.hw-oncall{margin-top:14px;background:var(--ui-y);color:#000;border-radius:12px;padding:14px;display:flex;gap:.8rem;align-items:center}
.hw-oncall b{display:block}
.hw-guarantee{font-size:.875rem;margin:1rem 0 0}

@media (prefers-reduced-motion:reduce){.hw-leds b{animation:none}.hw-dedi{transition:none}.hw-dedi:hover{transform:none}}