/* Hardware page specifics — extracted from webroot/redesign/hardware.html. */

/* Hide the legacy DB page header rendered by the layout (header.tpl.php $html
   branch) — the page template ships its own redesign hero instead. */
.controller-hardware #header.ghero,
.controller-hardware #header.header { display: none; }
/* no google review badge on this page (same as /funktionen/) */
.controller-hardware .seals { display: none; }

/* ---------- Hero: sub page variant (Daytona Light H1, final override in prototype) ---------- */
.ghero h1 {
    font-family: "Daytona Pro Condensed Light", "DaytonaPro-Cond", sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: .01em;
    color: #fff;
}
.ghero h1 b { font-family: "Daytona Pro Condensed Bold", "DaytonaPro-CondBold", sans-serif; font-weight: 400; color: var(--yellow, #F5B800); }
.ghero-sub { font-size: 1.25rem; color: #e6edf8; margin-top: 1.2rem; max-width: 56ch; }

.sec-head .lead { max-width: 50ch; }

/* ---------- Hardware sections: media + feature list, two columns ---------- */
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hw-grid--flip .hw-media { order: 2; }
.hw-copy .eyebrow { margin-bottom: 10px; }
.hw-copy h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.05; margin-bottom: 14px; }
.hw-copy .lead { margin-bottom: 20px; }
.hw-copy ul { list-style: none; margin: 0; padding: 0; }
.hw-copy li { position: relative; padding: 6px 0 6px 30px; color: var(--text-mid); font-size: 1rem; }
.hw-copy li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900;
    position: absolute; left: 0; top: 7px; color: var(--success); font-size: .82rem;
}
.hw-price {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 22px;
    background: var(--yellow-soft); color: var(--ink);
    border: 1px solid var(--border);
    border-radius: 999px; padding: 10px 20px;
    font-family: var(--f-body-bold); font-size: .95rem;
}
.hw-price i { color: var(--yellow-dark); }
.hw-media {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 32px; padding: 18px;
    box-shadow: var(--sh-lg);
}
.hw-media video, .hw-media img { width: 100%; display: block; border-radius: 18px; }
.hw-media img { object-fit: contain; }
@media (max-width: 900px) {
    .hw-grid { grid-template-columns: 1fr; gap: 32px; }
    .hw-grid--flip .hw-media { order: 0; }
}

/* Requirements sub card */
.hw-req {
    margin-top: 26px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 24px; padding: 24px 26px;
    box-shadow: var(--sh-sm);
}
.hw-req h5 {
    font-family: var(--f-body-bold);
    font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--yellow-dark); margin-bottom: 12px;
}
.hw-req ul { list-style: none; margin: 0; padding: 0; }
.hw-req li { position: relative; padding: 4px 0 4px 26px; color: var(--text-mid); font-size: .95rem; }
.hw-req li::before {
    content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: 900;
    position: absolute; left: 0; top: 5px; color: var(--success); font-size: .78rem;
}

/* Payment chips */
.hw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hw-chips span {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 999px; padding: 6px 14px;
    font-family: var(--f-body-bold); font-size: .82rem; color: var(--text-mid);
}
.hw-partner { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--blue-dark); font-family: var(--f-body-bold); font-size: .95rem; text-decoration: none; }
.hw-partner:hover { text-decoration: underline; }

.hw-footnote { margin-top: 44px; text-align: center; color: var(--muted); font-size: .9rem; }

/* CTA box: shared partial _cta_box.tpl.php, styled by redesign/base.css */