/* ==========================================================================
   Salzburger Holzwerk — main stylesheet
   Prefix: hw-   ·  Display: Jost  ·  Text: Epilogue
   Petrol green + honey oak on cool linen, square edges, rule-based layout
   ========================================================================== */

:root {
    /* ink & text */
    --ink: #15201F;
    --ink-2: #22302E;
    --ink-3: #33413E;
    --body: #46534F;
    --muted: #7C8A85;

    /* surfaces */
    --paper: #F8F7F3;
    --linen: #EFEDE5;
    --linen-2: #E4E1D6;
    --white: #FFFFFF;

    /* rules */
    --line: #DCD8CB;
    --line-2: #C8C3B2;
    --line-d: rgba(255, 255, 255, .16);

    /* accents */
    --petrol: #0E4F4A;
    --petrol-d: #0A3B37;
    --petrol-l: #E3EFED;
    --honey: #B8792A;
    --honey-d: #96601F;
    --honey-l: #F7EBDA;

    /* geometry */
    --r: 0px;
    --r-s: 2px;
    --wrap: 1280px;
    --pad: 104px;
    --gut: 32px;

    /* type */
    --ff-d: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
    --ff-b: 'Epilogue', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --sh-s: 0 1px 2px rgba(21, 32, 31, .05);
    --sh-m: 0 14px 34px -22px rgba(21, 32, 31, .45);
    --sh-l: 0 34px 70px -40px rgba(21, 32, 31, .55);
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0 auto;
    max-width: 1920px;
    min-width: 375px;
    overflow-x: clip;
    background: var(--paper);
    color: var(--body);
    font: 400 17px/1.72 var(--ff-b);
    letter-spacing: .001em;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; margin: 0; padding: 0; }

a { color: var(--petrol); text-decoration: none; }
a:hover { color: var(--honey-d); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
    margin: 0;
    font-family: var(--ff-d);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.16;
    letter-spacing: -.012em;
}

h1 { font-size: clamp(2.15rem, 1.35rem + 2.6vw, 3.55rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.12rem, .98rem + .5vw, 1.4rem); }
h4 { font-size: 1.06rem; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

b, strong { font-weight: 600; color: var(--ink-2); }

/* ---------- layout primitives ---------- */
.hw-wrap {
    width: min(var(--wrap), 100% - 56px);
    margin-inline: auto;
}

.hw-sec { padding: var(--pad) 0; }
.hw-sec--tight { padding: calc(var(--pad) * .62) 0; }
.hw-sec--linen { background: var(--linen); }
.hw-sec--paper { background: var(--paper); }

/* section head with running number — the page's signature device */
.hw-shead {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 0 24px;
    align-items: start;
    border-top: 2px solid var(--ink);
    padding-top: 20px;
    margin-bottom: 48px;
}

.hw-shead__no {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .18em;
    color: var(--honey-d);
    padding-top: .35em;
}

.hw-shead__main { min-width: 0; }

.hw-shead__kick {
    display: block;
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.hw-shead h2 { max-width: 22ch; }

.hw-shead__lead {
    margin-top: 16px;
    max-width: 62ch;
    color: var(--body);
    font-size: 1.03rem;
}

.hw-shead--wide h2 { max-width: 30ch; }

/* buttons */
.hw-btn {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: var(--r-s);
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .97rem;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, transform .18s;
}

.hw-btn img { flex: none; }

.hw-btn--solid {
    background: var(--petrol);
    color: #fff;
}
.hw-btn--solid:hover { background: var(--petrol-d); color: #fff; transform: translateY(-1px); }

.hw-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-2);
}
.hw-btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--white); }

.hw-btn--honey {
    background: var(--honey);
    color: #fff;
}
.hw-btn--honey:hover { background: var(--honey-d); color: #fff; }

.hw-btn--light {
    background: #fff;
    color: var(--ink);
}
.hw-btn--light:hover { background: var(--linen); color: var(--ink); }

.hw-btn--wide { width: 100%; justify-content: center; }

/* small inline link with arrow */
.hw-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line-2);
    padding-bottom: 4px;
    transition: border-color .18s, color .18s;
}
.hw-more:hover { color: var(--honey-d); border-color: var(--honey); }

/* reveal on scroll */
.hw-rise {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
}
.hw-rise.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .hw-rise { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hw-top {
    background: var(--ink);
    color: rgba(255, 255, 255, .78);
    font-size: .8rem;
    letter-spacing: .01em;
}

.hw-top__inner {
    width: min(var(--wrap), 100% - 56px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 40px;
    padding: 7px 0;
}

.hw-top__i {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hw-top__i img { opacity: .8; flex: none; }

.hw-top__i strong { color: #fff; font-weight: 600; }

.hw-hd {
    position: sticky;
    top: 0;
    z-index: 900;
    background: rgba(248, 247, 243, .93);
    backdrop-filter: saturate(150%) blur(12px);
    border-bottom: 1px solid var(--line);
    overflow-x: clip;
}

.hw-hd__inner {
    width: min(var(--wrap), 100% - 56px);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 30px;
    min-height: 78px;
}

.hw-hd__brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: var(--ink);
    margin-right: auto;
}

.hw-hd__mark {
    position: relative;
    width: 42px;
    height: 42px;
    flex: none;
    background: var(--petrol);
    display: block;
}

.hw-hd__mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 23px;
    height: 23px;
}

.hw-hd__name {
    display: block;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: var(--ink);
}

.hw-hd__sub {
    display: block;
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

.hw-hd__nav {
    display: flex;
    align-items: center;
    gap: 26px;
}

.hw-hd__link {
    font-family: var(--ff-d);
    font-weight: 500;
    font-size: .95rem;
    color: var(--ink-3);
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color .18s, border-color .18s;
}
.hw-hd__link:hover { color: var(--ink); border-color: var(--honey); }

.hw-hd__tel {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px;
    border: 1px solid var(--line-2);
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .94rem;
    color: var(--ink);
    transition: border-color .18s, background .18s;
}
.hw-hd__tel:hover { border-color: var(--petrol); background: var(--petrol-l); color: var(--ink); }

.hw-hd__burger {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line-2);
    background: transparent;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.hw-hd__burger span {
    position: absolute;
    left: 13px;
    width: 20px;
    height: 1.6px;
    background: var(--ink);
    transition: transform .22s, opacity .22s;
}
.hw-hd__burger span:nth-child(1) { top: 16px; }
.hw-hd__burger span:nth-child(2) { top: 22px; }
.hw-hd__burger span:nth-child(3) { top: 28px; }

.hw-hd__burger.is-x span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hw-hd__burger.is-x span:nth-child(2) { opacity: 0; }
.hw-hd__burger.is-x span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* drawer */
.hw-drw {
    position: fixed;
    top: 0;
    right: 0;
    width: min(360px, 88vw);
    height: 100dvh;
    background: var(--paper);
    border-left: 1px solid var(--line);
    z-index: 1200;
    transform: translateX(105%);
    transition: transform .3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.hw-drw.is-open { transform: none; }

.hw-drw__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
}

.hw-drw__top span {
    font-family: var(--ff-d);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .78rem;
    color: var(--muted);
}

.hw-drw__x {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-2);
    background: transparent;
    cursor: pointer;
    position: relative;
}
.hw-drw__x img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.hw-drw__nav { padding: 10px 0; }

.hw-drw__nav a {
    display: block;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    font-family: var(--ff-d);
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--ink);
}
.hw-drw__nav a:hover { background: var(--linen); }

.hw-drw__foot {
    margin-top: auto;
    padding: 22px 24px 28px;
    display: grid;
    gap: 12px;
}

.hw-drw__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background: var(--petrol);
    color: #fff;
    font-family: var(--ff-d);
    font-weight: 600;
}
.hw-drw__tel:hover { color: #fff; background: var(--petrol-d); }

.hw-scrim {
    position: fixed;
    inset: 0;
    background: rgba(21, 32, 31, .48);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 1100;
}
.hw-scrim.is-on { opacity: 1; visibility: visible; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hw-hero {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 64px 0 0;
    overflow: hidden;
}

.hw-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .86fr);
    gap: 56px;
    align-items: end;
}

.hw-hero__copy { min-width: 0; padding-bottom: 64px; }

.hw-hero__kick {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--petrol);
    border-left: 3px solid var(--honey);
    padding-left: 12px;
    margin-bottom: 24px;
}

.hw-hero h1 { margin-bottom: 22px; }
.hw-hero h1 span { color: var(--petrol); display: block; }

.hw-hero__lead {
    font-size: 1.09rem;
    max-width: 56ch;
    color: var(--ink-3);
    margin-bottom: 30px;
}

.hw-hero__acts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

/* fact rail — three ruled columns under the CTAs */
.hw-hero__rail {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line-2);
}

.hw-hero__rail li {
    min-width: 0;
    padding: 20px 20px 4px 0;
    border-right: 1px solid var(--line);
}
.hw-hero__rail li:last-child { border-right: 0; padding-right: 0; }
.hw-hero__rail li:not(:first-child) { padding-left: 20px; }

.hw-hero__rail b {
    display: block;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 6px;
}

.hw-hero__rail span {
    display: block;
    font-size: .87rem;
    color: var(--muted);
    line-height: 1.45;
}

/* art side */
.hw-hero__art {
    position: relative;
    min-width: 0;
    align-self: end;
}

.hw-hero__main {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--linen-2);
}

.hw-hero__main > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-hero__inset {
    position: absolute;
    left: -56px;
    bottom: 46px;
    width: 178px;
    aspect-ratio: 1;
    overflow: hidden;
    border: 6px solid var(--paper);
    background: var(--linen-2);
}

.hw-hero__inset > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-hero__tag {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--white);
    border: 1px solid var(--line);
    padding: 12px 16px;
    box-shadow: var(--sh-m);
}

.hw-hero__tag--a { top: 34px; left: -40px; }
.hw-hero__tag--b { right: -26px; bottom: 118px; }

.hw-hero__tag-ic {
    position: relative;
    width: 38px;
    height: 38px;
    flex: none;
    background: var(--petrol-l);
}

.hw-hero__tag-ic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
}

.hw-hero__tag-tx { min-width: 0; }

.hw-hero__tag-tx b {
    display: block;
    font-family: var(--ff-d);
    font-size: .96rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
}

.hw-hero__tag-tx span {
    display: block;
    font-size: .76rem;
    color: var(--muted);
    margin-top: 2px;
}

/* ==========================================================================
   2 · QUALITY BAND (marken, normen)
   ========================================================================== */
.hw-band {
    background: var(--ink);
    color: rgba(255, 255, 255, .8);
    padding: 62px 0;
}

.hw-band__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 52px;
    align-items: start;
}

.hw-band h2 {
    color: #fff;
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem);
    margin-bottom: 14px;
}

.hw-band__kick {
    display: block;
    font-family: var(--ff-d);
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--honey);
    margin-bottom: 12px;
}

.hw-band__txt { color: rgba(255, 255, 255, .78); }

.hw-band__marks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hw-band__mark {
    font-family: var(--ff-d);
    font-weight: 500;
    font-size: .86rem;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .9);
    border: 1px solid var(--line-d);
    padding: 8px 14px;
}

.hw-band__norms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line-d);
    border: 1px solid var(--line-d);
}

.hw-band__norm {
    background: var(--ink);
    padding: 22px 22px 24px;
    min-width: 0;
}

.hw-band__norm-ic {
    position: relative;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, .07);
}

.hw-band__norm-ic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 19px;
    height: 19px;
}

.hw-band__norm h3 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 7px;
}

.hw-band__norm p {
    font-size: .88rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

/* ==========================================================================
   3 · INTRO
   ========================================================================== */
.hw-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: 56px;
    align-items: start;
}

.hw-intro__copy { min-width: 0; font-size: 1.04rem; }
.hw-intro__copy p + p { margin-top: 1.05em; }

.hw-intro__side {
    min-width: 0;
    background: var(--linen);
    border-left: 3px solid var(--honey);
    padding: 28px 28px 30px;
}

.hw-intro__side h3 { margin-bottom: 14px; font-size: 1.08rem; }

.hw-intro__side li {
    display: flex;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: .93rem;
    line-height: 1.55;
}
.hw-intro__side li:last-child { border-bottom: 0; padding-bottom: 0; }
.hw-intro__side li img { flex: none; margin-top: 3px; }

/* ==========================================================================
   4 · LEISTUNGSVERZEICHNIS — room by room
   ========================================================================== */
.hw-lv { display: grid; gap: 0; border-top: 1px solid var(--line-2); }

.hw-lv__room {
    display: grid;
    grid-template-columns: 88px minmax(0, 300px) minmax(0, 1fr);
    gap: 0 24px;
    padding: 30px 0;
    border-bottom: 1px solid var(--line);
    transition: background .2s;
}
.hw-lv__room:hover { background: var(--white); }

.hw-lv__no {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .84rem;
    letter-spacing: .14em;
    color: var(--honey-d);
    padding-top: .5em;
}

.hw-lv__head { min-width: 0; }

.hw-lv__head-in {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 10px;
}

.hw-lv__ic {
    position: relative;
    width: 40px;
    height: 40px;
    flex: none;
    background: var(--petrol-l);
}

.hw-lv__ic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 21px;
    height: 21px;
}

.hw-lv__head h3 { font-size: 1.22rem; }

.hw-lv__head p {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--muted);
    max-width: 34ch;
}

.hw-lv__list {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: start;
    padding-top: 4px;
}

.hw-lv__item {
    font-family: var(--ff-d);
    font-weight: 500;
    font-size: .9rem;
    color: var(--ink-3);
    background: var(--linen);
    border: 1px solid var(--line);
    padding: 8px 14px;
    transition: background .18s, border-color .18s, color .18s;
}
.hw-lv__room:hover .hw-lv__item { background: var(--linen-2); }
.hw-lv__item--key {
    background: var(--petrol);
    border-color: var(--petrol);
    color: #fff;
}
.hw-lv__room:hover .hw-lv__item--key { background: var(--petrol-d); }

.hw-lv__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 34px;
}

.hw-lv__foot p { max-width: 62ch; font-size: .97rem; color: var(--body); }

/* ==========================================================================
   5 · HOLZ-BIBLIOTHEK
   ========================================================================== */
.hw-holz__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.hw-holz__card {
    background: var(--paper);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hw-holz__sw {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--linen-2);
}

.hw-holz__sw > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-holz__body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }

.hw-holz__body h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.hw-holz__lat {
    font-family: var(--ff-b);
    font-size: .78rem;
    font-weight: 400;
    font-style: italic;
    color: var(--muted);
    letter-spacing: 0;
}

.hw-holz__body > p { font-size: .93rem; line-height: 1.62; margin-bottom: 16px; }

.hw-holz__spec {
    margin-top: auto;
    display: grid;
    gap: 7px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.hw-holz__spec div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: .84rem;
}

.hw-holz__spec dt, .hw-holz__spec span:first-child { color: var(--muted); }
.hw-holz__spec span:last-child { color: var(--ink-2); font-weight: 600; text-align: right; }

/* ==========================================================================
   6 · OBJEKT-SZENARIEN
   ========================================================================== */
.hw-obj__banner {
    position: relative;
    aspect-ratio: 21 / 9;
    max-height: 340px;
    overflow: hidden;
    background: var(--linen-2);
    margin-bottom: 44px;
}

.hw-obj__banner > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-obj__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
}

.hw-obj__card {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--line);
    padding: 30px 32px 32px;
    display: flex;
    flex-direction: column;
}

.hw-obj__tag {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 9px;
    font-family: var(--ff-d);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--honey-d);
    background: var(--honey-l);
    padding: 7px 12px;
    margin-bottom: 18px;
}

.hw-obj__card h3 { margin-bottom: 12px; }
.hw-obj__card p { font-size: .96rem; }

/* ==========================================================================
   7 · ABLAUF
   ========================================================================== */
.hw-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.hw-flow__step {
    background: var(--paper);
    padding: 30px 28px 34px;
    min-width: 0;
    position: relative;
}

.hw-flow__n {
    position: relative;
    width: 46px;
    height: 46px;
    background: var(--ink);
    margin-bottom: 18px;
}

.hw-flow__n b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1rem;
    color: #fff;
    line-height: 1;
}

.hw-flow__step h3 { margin-bottom: 10px; }
.hw-flow__step p { font-size: .94rem; line-height: 1.62; }

.hw-flow__step time {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--ff-d);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--petrol);
}

/* ==========================================================================
   8 · WERKSTATT / ÜBER UNS
   ========================================================================== */
.hw-abt__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.hw-abt__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--linen-2);
    min-width: 0;
}

.hw-abt__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-abt__copy { min-width: 0; }
.hw-abt__copy h2 { margin-bottom: 18px; }
.hw-abt__copy p { font-size: 1.01rem; }

.hw-abt__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 30px;
}

.hw-abt__fact {
    background: var(--paper);
    padding: 20px 22px 22px;
    min-width: 0;
}

.hw-abt__fact b {
    display: block;
    font-family: var(--ff-d);
    font-size: 1.34rem;
    font-weight: 600;
    color: var(--petrol);
    line-height: 1.1;
    margin-bottom: 5px;
}

.hw-abt__fact span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   9 · REFERENZEN
   ========================================================================== */
.hw-ref__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.hw-ref__card {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
}

.hw-ref__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--linen-2);
}

.hw-ref__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.hw-ref__card:hover .hw-ref__media > img { transform: scale(1.04); }

.hw-ref__place {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--ink);
    color: #fff;
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 8px 13px;
}
.hw-ref__place img { flex: none; }

.hw-ref__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.hw-ref__body h3 { margin-bottom: 11px; }
.hw-ref__body p { font-size: .93rem; line-height: 1.62; margin-bottom: 18px; }

.hw-ref__facts {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    display: grid;
    gap: 7px;
}

.hw-ref__facts div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: .84rem;
}
.hw-ref__facts span:first-child { color: var(--muted); }
.hw-ref__facts span:last-child { color: var(--ink-2); font-weight: 600; text-align: right; }

/* ==========================================================================
   10 · VORHER / NACHHER
   ========================================================================== */
.hw-va { display: grid; gap: 34px; }

.hw-va__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .85fr);
    gap: 22px;
    align-items: stretch;
    border-top: 1px solid var(--line);
    padding-top: 28px;
}

.hw-va__shot {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--linen-2);
    min-width: 0;
}

.hw-va__shot > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-va__lbl {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--ff-d);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 7px 12px;
    background: rgba(21, 32, 31, .82);
    color: #fff;
}
.hw-va__lbl--after { background: var(--petrol); }

.hw-va__note { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.hw-va__note h3 { margin-bottom: 11px; }
.hw-va__note p { font-size: .94rem; line-height: 1.62; }

.hw-va__meta {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hw-va__meta span {
    font-family: var(--ff-d);
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-3);
    border: 1px solid var(--line-2);
    padding: 6px 11px;
}

/* ==========================================================================
   11 · PREISE (Leistungsverzeichnis)
   ========================================================================== */
.hw-pr__table {
    border: 1px solid var(--line-2);
    background: var(--white);
}

.hw-pr__row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 210px);
    gap: 0 20px;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
}
.hw-pr__row:last-child { border-bottom: 0; }
.hw-pr__row:hover { background: var(--linen); }

.hw-pr__row--head {
    background: var(--ink);
    border-bottom: 0;
}

.hw-pr__row--head span {
    font-family: var(--ff-d);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
}

.hw-pr__head-val { text-align: right; }

.hw-pr__no {
    font-family: var(--ff-d);
    font-size: .82rem;
    font-weight: 600;
    color: var(--honey-d);
    min-width: 0;
}

.hw-pr__what { min-width: 0; }

.hw-pr__what b {
    display: block;
    font-family: var(--ff-d);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.hw-pr__what small {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-top: 3px;
}

.hw-pr__desc { min-width: 0; font-size: .89rem; line-height: 1.55; color: var(--body); }

.hw-pr__val {
    min-width: 0;
    text-align: right;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--petrol);
    line-height: 1.3;
}

.hw-pr__val small {
    display: block;
    font-family: var(--ff-b);
    font-weight: 400;
    font-size: .76rem;
    color: var(--muted);
    margin-top: 2px;
}

.hw-pr__notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 30px;
}

.hw-pr__note {
    min-width: 0;
    border-top: 2px solid var(--line-2);
    padding-top: 16px;
}

.hw-pr__note h4 { margin-bottom: 8px; font-size: .98rem; }
.hw-pr__note p { font-size: .88rem; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   12 · KOSTENFAKTOREN
   ========================================================================== */
.hw-cost__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 56px;
}

.hw-cost__item { min-width: 0; display: grid; grid-template-columns: 54px 1fr; gap: 20px; }

.hw-cost__ic {
    position: relative;
    width: 54px;
    height: 54px;
    border: 1px solid var(--line-2);
}

.hw-cost__ic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
}

.hw-cost__item h3 { margin-bottom: 9px; }
.hw-cost__item p { font-size: .95rem; line-height: 1.65; }

/* ==========================================================================
   13 · KOSTENRECHNER
   ========================================================================== */
.hw-calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 0;
    border: 1px solid var(--line-2);
}

.hw-calc__form {
    background: var(--white);
    padding: 40px 44px 44px;
    min-width: 0;
}

.hw-calc__form h3 { margin-bottom: 8px; }
.hw-calc__form > p { font-size: .92rem; color: var(--muted); margin-bottom: 26px; }

.hw-calc__field { margin-bottom: 20px; min-width: 0; }

.hw-calc__field label {
    display: block;
    font-family: var(--ff-d);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.hw-calc__field select,
.hw-calc__field input {
    width: 100%;
    min-width: 0;
    padding: 13px 15px;
    border: 1px solid var(--line-2);
    background: var(--paper);
    border-radius: var(--r-s);
    font-size: .97rem;
    color: var(--ink);
}

.hw-calc__field select:focus,
.hw-calc__field input:focus { outline: 2px solid var(--petrol); outline-offset: -2px; }

.hw-calc__two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.hw-calc__range { display: flex; align-items: center; gap: 14px; }
.hw-calc__range input[type="range"] { flex: 1; min-width: 0; padding: 0; accent-color: var(--petrol); }

.hw-calc__range output {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    min-width: 74px;
    text-align: right;
}

.hw-calc__out {
    background: var(--ink);
    color: rgba(255, 255, 255, .78);
    padding: 40px 40px 44px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hw-calc__out h3 { color: #fff; margin-bottom: 6px; }
.hw-calc__out > p { font-size: .88rem; color: rgba(255, 255, 255, .6); margin-bottom: 26px; }

.hw-calc__sum {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
}

.hw-calc__unit {
    font-size: .84rem;
    color: var(--honey);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-family: var(--ff-d);
    font-weight: 500;
    margin-bottom: 26px;
    display: block;
}

.hw-calc__lines {
    display: grid;
    gap: 10px;
    border-top: 1px solid var(--line-d);
    padding-top: 20px;
    margin-bottom: 26px;
}

.hw-calc__lines div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: .88rem;
}
.hw-calc__lines span:first-child { color: rgba(255, 255, 255, .6); }
.hw-calc__lines span:last-child { color: #fff; font-weight: 600; text-align: right; }

.hw-calc__out .hw-btn { margin-top: auto; }

.hw-calc__hint { font-size: .78rem; color: rgba(255, 255, 255, .5); margin-top: 14px; line-height: 1.55; }

/* ==========================================================================
   14 · PLANUNG & CHECKLISTE
   ========================================================================== */
.hw-plan__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 52px;
    align-items: start;
}

.hw-plan__copy { min-width: 0; font-size: 1.01rem; }
.hw-plan__copy h3 { margin: 26px 0 11px; }
.hw-plan__copy h3:first-child { margin-top: 0; }

.hw-plan__check {
    min-width: 0;
    background: var(--petrol);
    color: rgba(255, 255, 255, .84);
    padding: 32px 32px 36px;
}

.hw-plan__check h3 { color: #fff; margin-bottom: 6px; }
.hw-plan__check > p { font-size: .89rem; color: rgba(255, 255, 255, .68); margin-bottom: 20px; }

.hw-plan__check li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: .93rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}
.hw-plan__check li:last-child { border-bottom: 0; }
.hw-plan__check li img { flex: none; margin-top: 3px; }

/* ==========================================================================
   15 · HÄUFIGE FEHLER
   ========================================================================== */
.hw-err__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.hw-err__card {
    background: var(--white);
    padding: 30px 30px 34px;
    min-width: 0;
}

.hw-err__no {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .16em;
    color: var(--honey-d);
    display: block;
    margin-bottom: 14px;
}

.hw-err__card h3 { margin-bottom: 11px; }
.hw-err__card p { font-size: .93rem; line-height: 1.63; }

.hw-err__fix {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    font-size: .89rem;
    line-height: 1.55;
    color: var(--ink-2);
}
.hw-err__fix img { flex: none; margin-top: 3px; }

/* ==========================================================================
   16 · VORTEILE (dark)
   ========================================================================== */
.hw-adv {
    background: var(--petrol-d);
    color: rgba(255, 255, 255, .8);
}

.hw-adv .hw-shead { border-top-color: rgba(255, 255, 255, .5); }
.hw-adv .hw-shead__no { color: var(--honey); }
.hw-adv .hw-shead__kick { color: rgba(255, 255, 255, .6); }
.hw-adv .hw-shead h2 { color: #fff; }
.hw-adv .hw-shead__lead { color: rgba(255, 255, 255, .76); }

.hw-adv__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .17);
}

.hw-adv__card {
    background: var(--petrol-d);
    padding: 32px 30px 36px;
    min-width: 0;
}

.hw-adv__ic {
    position: relative;
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, .09);
    margin-bottom: 18px;
}

.hw-adv__ic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 23px;
    height: 23px;
}

.hw-adv__card h3 { color: #fff; margin-bottom: 10px; }
.hw-adv__card p { font-size: .93rem; line-height: 1.65; color: rgba(255, 255, 255, .74); }

/* ==========================================================================
   17 · GARANTIE
   ========================================================================== */
.hw-gar__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
}

.hw-gar__copy { min-width: 0; }
.hw-gar__copy h2 { margin-bottom: 16px; }
.hw-gar__copy > p { font-size: 1.01rem; margin-bottom: 24px; }

.hw-gar__list { display: grid; gap: 14px; }

.hw-gar__item {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    align-items: start;
    background: var(--white);
    border: 1px solid var(--line);
    padding: 18px 20px;
}

.hw-gar__ic {
    position: relative;
    width: 46px;
    height: 46px;
    background: var(--honey-l);
}

.hw-gar__ic img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
}

.hw-gar__item h4 { margin-bottom: 5px; }
.hw-gar__item p { font-size: .89rem; line-height: 1.58; color: var(--muted); }

.hw-gar__media {
    position: relative;
    min-width: 0;
}

.hw-gar__shot {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--linen-2);
}

.hw-gar__shot > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-gar__seal {
    position: absolute;
    right: 18px;
    bottom: 18px;
    background: var(--ink);
    color: #fff;
    padding: 16px 20px;
    max-width: 58%;
}

.hw-gar__seal b {
    display: block;
    font-family: var(--ff-d);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.hw-gar__seal span { font-size: .82rem; color: rgba(255, 255, 255, .7); line-height: 1.5; display: block; }

/* ==========================================================================
   18 · EINSATZGEBIET
   ========================================================================== */
.hw-geo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 52px;
    align-items: start;
}

.hw-geo__copy { min-width: 0; }
.hw-geo__copy p { font-size: 1.01rem; }

.hw-geo__zones {
    display: grid;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 26px;
}

.hw-geo__zone {
    background: var(--paper);
    padding: 18px 22px;
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 18px;
    align-items: baseline;
}

.hw-geo__zone b {
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .96rem;
    color: var(--ink);
    min-width: 0;
}

.hw-geo__zone span { font-size: .89rem; color: var(--muted); line-height: 1.55; min-width: 0; }

.hw-geo__panel { min-width: 0; }

.hw-geo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.hw-geo__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ff-d);
    font-weight: 500;
    font-size: .9rem;
    color: var(--ink-3);
    background: var(--white);
    border: 1px solid var(--line);
    padding: 9px 14px;
}

.hw-geo__chip::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--honey);
    flex: none;
}

.hw-geo__note {
    margin-top: 22px;
    background: var(--ink);
    color: rgba(255, 255, 255, .8);
    padding: 24px 26px 26px;
}

.hw-geo__note h4 { color: #fff; margin-bottom: 9px; }
.hw-geo__note p { font-size: .91rem; line-height: 1.62; color: rgba(255, 255, 255, .74); }

/* ==========================================================================
   19 · TEAM
   ========================================================================== */
.hw-team__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.hw-team__card { min-width: 0; }

.hw-team__ph {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--linen-2);
    margin-bottom: 18px;
}

.hw-team__ph > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9);
}

.hw-team__card h3 { font-size: 1.08rem; margin-bottom: 4px; }

.hw-team__role {
    display: block;
    font-family: var(--ff-d);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--petrol);
    margin-bottom: 11px;
}

.hw-team__card p { font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   20 · BEWERTUNGEN
   ========================================================================== */
.hw-rev__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid var(--line-2);
    background: var(--white);
    padding: 20px 26px;
    margin-bottom: 30px;
}

.hw-rev__score {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.hw-rev__stars { color: var(--honey); font-size: 1.15rem; letter-spacing: .1em; }

.hw-rev__score > span:not(.hw-rev__stars) { font-size: .93rem; color: var(--muted); }
.hw-rev__score b { font-family: var(--ff-d); font-size: 1.05rem; color: var(--ink); }

.hw-rev__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.hw-rev__card {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--line);
    padding: 28px 28px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.hw-rev__q {
    position: absolute;
    right: 24px;
    top: 24px;
    opacity: .22;
}

.hw-rev__who {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.hw-rev__ava {
    position: relative;
    width: 46px;
    height: 46px;
    flex: none;
    background: var(--petrol);
}

.hw-rev__ava b {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    line-height: 1;
}

.hw-rev__who > div { min-width: 0; }
.hw-rev__who h3 { font-size: 1rem; margin-bottom: 2px; }
.hw-rev__who > div span { display: block; font-size: .8rem; color: var(--muted); }

.hw-rev__rate { color: var(--honey); font-size: .95rem; letter-spacing: .08em; margin-bottom: 12px; }

.hw-rev__body { font-size: .95rem; line-height: 1.68; margin-bottom: 18px; }

.hw-rev__date {
    margin-top: auto;
    font-size: .8rem;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.hw-rev__foot { margin-top: 30px; }

/* ==========================================================================
   21 · RATGEBER
   ========================================================================== */
.hw-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.hw-blog__card {
    min-width: 0;
    background: var(--white);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    color: var(--body);
    transition: border-color .2s, transform .2s;
}
.hw-blog__card:hover { border-color: var(--line-2); transform: translateY(-2px); color: var(--body); }

.hw-blog__media {
    position: relative;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--linen-2);
}

.hw-blog__media > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-blog__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.hw-blog__tag {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--ff-d);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--petrol);
    background: var(--petrol-l);
    padding: 6px 10px;
    margin-bottom: 13px;
}

.hw-blog__body h3 { font-size: 1.06rem; margin-bottom: 10px; }
.hw-blog__body p { font-size: .9rem; line-height: 1.6; color: var(--muted); margin-bottom: 16px; }

.hw-blog__read {
    margin-top: auto;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: .87rem;
    color: var(--ink);
}

.hw-blog__foot { margin-top: 30px; }

/* ==========================================================================
   22 · FAQ
   ========================================================================== */
.hw-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 52px;
    align-items: start;
}

.hw-faq__side { min-width: 0; }
.hw-faq__side p { font-size: 1rem; }

.hw-faq__call {
    margin-top: 24px;
    border: 1px solid var(--line-2);
    background: var(--white);
    padding: 24px 26px 26px;
}

.hw-faq__call h4 { margin-bottom: 8px; }
.hw-faq__call p { font-size: .91rem; color: var(--muted); margin-bottom: 16px; }

.hw-faq__list { min-width: 0; border-top: 1px solid var(--line-2); }

.hw-faq__item { border-bottom: 1px solid var(--line); }

.hw-faq__q {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: transparent;
    border: 0;
    padding: 22px 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1.04rem;
    color: var(--ink);
    line-height: 1.4;
}
.hw-faq__q:hover { color: var(--petrol); }

.hw-faq__sign {
    position: relative;
    width: 26px;
    height: 26px;
    flex: none;
    margin-top: 2px;
}

.hw-faq__sign::before,
.hw-faq__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--ink);
    transition: transform .25s;
}
.hw-faq__sign::before { width: 15px; height: 1.6px; transform: translate(-50%, -50%); }
.hw-faq__sign::after { width: 1.6px; height: 15px; transform: translate(-50%, -50%); }

.hw-faq__item.is-open .hw-faq__sign::after { transform: translate(-50%, -50%) scaleY(0); }

.hw-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .32s ease;
}

.hw-faq__a p {
    font-size: .96rem;
    line-height: 1.7;
    padding-bottom: 24px;
    max-width: 68ch;
}

/* ==========================================================================
   23 · KONTAKT
   ========================================================================== */
.hw-kt {
    position: relative;
    background: var(--ink);
    color: rgba(255, 255, 255, .8);
    padding: var(--pad) 0;
    overflow: hidden;
}

.hw-kt__bg { position: absolute; inset: 0; }

.hw-kt__bg > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
}

.hw-kt__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(21, 32, 31, .96) 32%, rgba(21, 32, 31, .68) 100%);
}

.hw-kt__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: start;
}

.hw-kt__info { min-width: 0; }
.hw-kt__info h2 { color: #fff; margin-bottom: 16px; }
.hw-kt__info > p { color: rgba(255, 255, 255, .78); font-size: 1.01rem; margin-bottom: 26px; }

.hw-kt__kick {
    display: block;
    font-family: var(--ff-d);
    font-size: .76rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--honey);
    margin-bottom: 12px;
}

.hw-kt__list { display: grid; gap: 1px; background: var(--line-d); border: 1px solid var(--line-d); }

.hw-kt__list li {
    background: var(--ink);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .84);
    min-width: 0;
}
.hw-kt__list li img { flex: none; opacity: .85; }
.hw-kt__list a { color: #fff; overflow-wrap: anywhere; }
.hw-kt__list span { min-width: 0; overflow-wrap: break-word; }
.hw-kt__list a:hover { color: var(--honey); }

.hw-kt__hint {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    font-size: .9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
}
.hw-kt__hint img { flex: none; margin-top: 3px; opacity: .8; }

.hw-kt__panel {
    min-width: 0;
    background: var(--paper);
    padding: 38px 40px 42px;
}

.hw-kt__panel h3 { margin-bottom: 6px; }
.hw-kt__panel > p { font-size: .9rem; color: var(--muted); margin-bottom: 24px; }

.hw-kt__two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.hw-kt__field { margin-bottom: 16px; min-width: 0; }

.hw-kt__input,
.hw-kt__area {
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line-2);
    background: var(--white);
    border-radius: var(--r-s);
    font-size: .97rem;
    color: var(--ink);
}

.hw-kt__input::placeholder,
.hw-kt__area::placeholder { color: var(--muted); }

.hw-kt__input:focus,
.hw-kt__area:focus { outline: 2px solid var(--petrol); outline-offset: -2px; }

.hw-kt__area { resize: vertical; min-height: 118px; }

.hw-kt__err { font-size: .8rem; color: #B3321F; margin-top: 6px; }

.hw-kt__ok {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--petrol-l);
    border: 1px solid var(--petrol);
    color: var(--petrol-d);
    font-size: .93rem;
}

.hw-kt__submit { width: 100%; justify-content: center; margin-top: 4px; }

.hw-kt__legal { font-size: .78rem; color: var(--muted); margin-top: 14px; line-height: 1.55; }

/* ==========================================================================
   24 · SEO TEXT
   ========================================================================== */
.hw-seo { background: var(--linen); }

.hw-seo__inner {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.hw-seo__toc {
    position: sticky;
    top: 98px;
    min-width: 0;
    border-top: 2px solid var(--ink);
    padding-top: 18px;
}

.hw-seo__toc span {
    display: block;
    font-family: var(--ff-d);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

.hw-seo__toc a {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .89rem;
    color: var(--ink-3);
}
.hw-seo__toc a:hover { color: var(--petrol); }

.hw-seo__body { min-width: 0; max-width: 78ch; }
.hw-seo__body h2 { margin-bottom: 20px; }
.hw-seo__body h3 { margin: 32px 0 12px; }
.hw-seo__body p { font-size: 1.01rem; }

.hw-seo__box {
    background: var(--white);
    border-left: 3px solid var(--honey);
    padding: 26px 28px 28px;
    margin: 28px 0;
}

.hw-seo__box h4 { margin-bottom: 14px; }

.hw-seo__box li {
    display: flex;
    gap: 11px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
    font-size: .94rem;
    line-height: 1.55;
}
.hw-seo__box li:last-child { border-bottom: 0; padding-bottom: 0; }
.hw-seo__box li img { flex: none; margin-top: 3px; }

.hw-seo__box--dark {
    background: var(--ink);
    border-left-color: var(--honey);
    color: rgba(255, 255, 255, .82) !important;
}

.hw-seo__box--dark h4 { color: #fff !important; }
.hw-seo__box--dark p { color: rgba(255, 255, 255, .82) !important; }
.hw-seo__box--dark a { color: var(--honey) !important; }
.hw-seo__box--dark a:hover { color: #fff !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.hw-ft {
    background: var(--ink);
    color: rgba(255, 255, 255, .7);
    padding: 72px 0 34px;
}

.hw-ft__top {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 44px;
    align-items: start;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line-d);
}

.hw-ft__brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.hw-ft__mark {
    position: relative;
    width: 42px;
    height: 42px;
    flex: none;
    background: var(--petrol);
}

.hw-ft__mark img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
}

.hw-ft__name {
    display: block;
    font-family: var(--ff-d);
    font-weight: 600;
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.15;
}

.hw-ft__sub {
    display: block;
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-top: 3px;
}

.hw-ft__about { font-size: .94rem; line-height: 1.7; max-width: 62ch; color: rgba(255, 255, 255, .7); }

.hw-ft__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hw-ft__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
    padding: 40px 0;
    border-bottom: 1px solid var(--line-d);
}

.hw-ft__col { min-width: 0; }

.hw-ft__col h4 {
    color: #fff;
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.hw-ft__links { display: grid; gap: 10px; }

.hw-ft__links a {
    font-size: .91rem;
    color: rgba(255, 255, 255, .68);
    line-height: 1.5;
    overflow-wrap: break-word;
}
.hw-ft__links a:hover { color: var(--honey); }

.hw-ft__contact { display: grid; gap: 13px; }

.hw-ft__contact div {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: .91rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .68);
    min-width: 0;
}
.hw-ft__contact img { flex: none; margin-top: 2px; opacity: .7; }
.hw-ft__contact a { color: rgba(255, 255, 255, .88); overflow-wrap: anywhere; }
.hw-ft__contact span { overflow-wrap: break-word; }
.hw-ft__contact a:hover { color: var(--honey); }

.hw-ft__regions { padding: 30px 0; border-bottom: 1px solid var(--line-d); }

.hw-ft__regions-lbl {
    display: block;
    font-family: var(--ff-d);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 14px;
}

.hw-ft__regions-row { display: flex; flex-wrap: wrap; gap: 9px; }

.hw-ft__region {
    font-size: .87rem;
    color: rgba(255, 255, 255, .74);
    border: 1px solid var(--line-d);
    padding: 7px 13px;
}
.hw-ft__region:hover { color: #fff; border-color: rgba(255, 255, 255, .4); }

.hw-ft__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 26px;
}

.hw-ft__copy { font-size: .87rem; color: rgba(255, 255, 255, .55); margin: 0; }

.hw-ft__legal { display: flex; gap: 20px; }
.hw-ft__legal a { font-size: .87rem; color: rgba(255, 255, 255, .62); }
.hw-ft__legal a:hover { color: var(--honey); }

/* fixed call button */
.hw-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
}

.hw-fab__btn {
    position: relative;
    display: block;
    width: 65px;
    height: 65px;
    background: var(--honey);
    box-shadow: 0 12px 30px -10px rgba(21, 32, 31, .6);
}

.hw-fab__btn img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    height: 28px;
}

.hw-fab__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--honey);
    animation: hw-pulse 2.4s ease-out infinite;
    z-index: -1;
}

@keyframes hw-pulse {
    0% { transform: scale(1); opacity: .55; }
    70% { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* ==========================================================================
   EMPHASIS ON DARK SURFACES
   the global `b, strong { color: var(--ink-2) }` must be restated here
   ========================================================================== */
.hw-top b, .hw-top strong,
.hw-band b, .hw-band strong, .hw-band em,
.hw-adv b, .hw-adv strong, .hw-adv em,
.hw-plan__check b, .hw-plan__check strong, .hw-plan__check em,
.hw-calc__out b, .hw-calc__out strong, .hw-calc__out em,
.hw-geo__note b, .hw-geo__note strong, .hw-geo__note em,
.hw-gar__seal b, .hw-gar__seal strong,
.hw-kt__info b, .hw-kt__info strong, .hw-kt__info em,
.hw-kt__hint b, .hw-kt__hint strong,
.hw-seo__box--dark b, .hw-seo__box--dark strong, .hw-seo__box--dark em,
.hw-ft b, .hw-ft strong, .hw-ft em { color: #fff; }

.hw-band em, .hw-adv em, .hw-calc__out em,
.hw-kt__info em, .hw-seo__box--dark em, .hw-ft em { font-style: normal; font-weight: 600; }

.hw-band a:not(.hw-btn), .hw-adv a:not(.hw-btn), .hw-plan__check a:not(.hw-btn),
.hw-calc__out a:not(.hw-btn), .hw-geo__note a:not(.hw-btn),
.hw-kt__hint a:not(.hw-btn) { color: var(--honey); }

/* a button keeps its own colour on any surface, and its label inherits it */
.hw-btn span { color: inherit; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
    :root { --pad: 84px; --wrap: 1120px; }

    .hw-wrap,
    .hw-hd__inner,
    .hw-top__inner { width: min(var(--wrap), 100% - 44px); }

    .hw-hd__nav { gap: 18px; }
    .hw-hd__link { font-size: .9rem; }

    .hw-hero__grid { gap: 40px; }
    .hw-hero__inset { left: -32px; width: 152px; }
    .hw-hero__tag--a { left: -20px; }
    .hw-hero__tag--b { right: -12px; }

    .hw-lv__room { grid-template-columns: 64px minmax(0, 260px) minmax(0, 1fr); }
    .hw-shead { grid-template-columns: 64px 1fr; }

    .hw-pr__row { grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 180px); }

    .hw-seo__inner { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 1024px) {
    :root { --pad: 72px; }

    /* mobile chrome: no desktop nav, no header phone */
    .hw-hd__nav,
    .hw-hd__tel { display: none; }
    .hw-hd__burger { display: block; }
    .hw-hd__inner { min-height: 68px; }

    /* topbar collapses to one centred line before it disappears entirely */
    .hw-top__i { display: none; }
    .hw-top__i--keep { display: inline-flex; }
    .hw-top__inner { justify-content: center; min-height: 34px; }

    .hw-hero { padding-top: 44px; }
    .hw-hero__grid { grid-template-columns: 1fr; gap: 44px; }
    .hw-hero__copy { padding-bottom: 0; }
    .hw-hero__art { max-width: 560px; margin-inline: auto; width: 100%; }
    .hw-hero__main { aspect-ratio: 4 / 3; }
    .hw-hero__inset { left: auto; right: 18px; bottom: -26px; width: 128px; }
    .hw-hero__tag--a { left: 14px; top: 18px; }
    .hw-hero__tag--b { left: 14px; right: auto; bottom: 18px; }

    .hw-band__grid,
    .hw-intro__grid,
    .hw-abt__grid,
    .hw-gar__grid,
    .hw-geo__grid,
    .hw-faq__grid,
    .hw-plan__grid,
    .hw-kt__grid { grid-template-columns: 1fr; gap: 38px; }

    .hw-abt__media,
    .hw-gar__media { max-width: 620px; }

    .hw-holz__grid,
    .hw-flow,
    .hw-ref__grid,
    .hw-err__grid,
    .hw-adv__grid,
    .hw-rev__grid,
    .hw-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hw-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .hw-calc__grid { grid-template-columns: 1fr; }
    .hw-calc__form { padding: 32px 30px 34px; }
    .hw-calc__out { padding: 32px 30px 36px; }

    .hw-va__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-va__note { grid-column: span 2; }

    .hw-seo__inner { grid-template-columns: 1fr; gap: 32px; }
    .hw-seo__toc { position: static; }
    .hw-seo__toc a { display: inline-block; border-bottom: 0; margin-right: 18px; }

    .hw-ft__top { grid-template-columns: 1fr; gap: 28px; }
    .hw-ft__cta { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 768px) {
    :root { --pad: 58px; }

    body { font-size: 16px; }

    .hw-wrap,
    .hw-hd__inner,
    .hw-top__inner { width: min(var(--wrap), 100% - 32px); }

    /* the topbar is desktop/tablet chrome only — gone on phones */
    .hw-top { display: none; }

    .hw-shead {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 34px;
        padding-top: 16px;
    }
    .hw-shead__no { padding-top: 0; }

    .hw-hero__rail { grid-template-columns: 1fr; }
    .hw-hero__rail li {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 15px 0 15px;
        display: grid;
        grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
        gap: 14px;
        align-items: baseline;
    }
    .hw-hero__rail li:not(:first-child) { padding-left: 0; }
    .hw-hero__rail li:last-child { border-bottom: 0; }
    .hw-hero__rail b { font-size: 1.24rem; margin-bottom: 0; }

    .hw-lv__room {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 22px 0;
    }
    .hw-lv__no { padding-top: 0; }
    .hw-lv__head p { max-width: none; }

    /* one chip per row eats the whole screen — pack them two across instead */
    .hw-lv__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding-top: 0;
    }
    .hw-lv__item {
        font-size: .8rem;
        line-height: 1.35;
        padding: 8px 10px;
        overflow-wrap: break-word;
    }

    .hw-band__norms { grid-template-columns: 1fr; }

    .hw-holz__grid,
    .hw-flow,
    .hw-ref__grid,
    .hw-err__grid,
    .hw-adv__grid,
    .hw-rev__grid,
    .hw-blog__grid,
    .hw-obj__grid,
    .hw-cost__grid { grid-template-columns: 1fr; }

    .hw-cost__grid { gap: 28px; }

    .hw-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

    .hw-pr__table { border: 0; }
    .hw-pr__row--head { display: none; }
    .hw-pr__row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 18px 20px;
        border: 1px solid var(--line);
        margin-bottom: -1px;
    }
    .hw-pr__val { text-align: left; font-size: 1.05rem; }
    .hw-pr__notes { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }

    .hw-va__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .hw-geo__zone { grid-template-columns: 1fr; gap: 5px; }

    .hw-kt { padding: 58px 0; }
    .hw-kt__panel { padding: 28px 24px 30px; }
    .hw-kt__two { grid-template-columns: 1fr; gap: 0; }

    .hw-calc__two { grid-template-columns: 1fr; gap: 0; }
    .hw-calc__two .hw-calc__field { margin-bottom: 20px; }

    .hw-intro__side,
    .hw-plan__check { padding: 24px 22px 26px; }

    .hw-obj__banner { aspect-ratio: 16 / 9; margin-bottom: 30px; }

    /* the seal covered most of the photo as an overlay — put it below instead */
    .hw-gar__seal {
        position: static;
        max-width: none;
        padding: 16px 18px 18px;
    }
    .hw-gar__seal b { font-size: .98rem; }
    .hw-gar__seal span { font-size: .84rem; }

    /* footer CTA: two ragged shrink-to-fit buttons look broken — stack them full width */
    .hw-ft__cta { flex-direction: column; align-items: stretch; }
    .hw-ft__cta .hw-btn { width: 100%; justify-content: center; }

    /* footer stays two columns on phones; the FAB must not cover the last row */
    .hw-ft { padding: 52px 0 96px; }
    .hw-ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 22px; }
    .hw-ft__bottom { flex-direction: column; align-items: flex-start; }

    /* contact details need the full width — e-mail and area line are long */
    .hw-ft__col--contact { grid-column: 1 / -1; }
    .hw-ft__col--contact .hw-ft__contact { gap: 12px; }
}

@media (max-width: 560px) {
    /* floating hero badges must not dominate the photo */
    .hw-hero__tag { padding: 8px 11px; gap: 8px; }
    .hw-hero__tag-ic { width: 26px; height: 26px; }
    .hw-hero__tag-ic img { width: 15px; height: 15px; }
    .hw-hero__tag-tx b { font-size: .8rem; }
    .hw-hero__tag-tx span { font-size: .68rem; }
    .hw-hero__tag--a { left: 10px; top: 12px; }
    .hw-hero__tag--b { left: 10px; right: auto; bottom: 12px; }
    .hw-hero__inset { width: 96px; right: 12px; bottom: -18px; border-width: 4px; }
    .hw-hero { padding-top: 32px; }

    .hw-team__grid { grid-template-columns: 1fr; gap: 26px; }

    .hw-rev__top {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }
    .hw-rev__score {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 18px 20px;
    }
    .hw-rev__stars { font-size: 1.05rem; }
    .hw-rev__score > span:not(.hw-rev__stars) { font-size: .88rem; }
    .hw-rev__top .hw-more {
        border-top: 1px solid var(--line);
        border-bottom: 0;
        padding: 15px 20px;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    :root { --pad: 48px; }

    .hw-wrap,
    .hw-hd__inner,
    .hw-top__inner { width: min(var(--wrap), 100% - 26px); }

    .hw-hd__sub { display: none; }
    .hw-hd__mark { width: 38px; height: 38px; }

    .hw-hero__acts { gap: 10px; }
    .hw-hero__acts .hw-btn { flex: 1 1 100%; justify-content: center; }

    .hw-btn { padding: 14px 20px; font-size: .93rem; }

    .hw-holz__body,
    .hw-ref__body,
    .hw-blog__body { padding: 20px 20px 22px; }

    .hw-err__card,
    .hw-adv__card,
    .hw-obj__card,
    .hw-flow__step { padding: 24px 22px 26px; }

    .hw-rev__card { padding: 22px 20px 24px; }

    .hw-va__row { grid-template-columns: 1fr; }
    .hw-va__note { grid-column: auto; }



    .hw-faq__q { font-size: .98rem; padding: 18px 0; gap: 14px; }

    .hw-fab { right: 16px; bottom: 16px; }
    .hw-fab__btn { width: 55px; height: 55px; }
    .hw-fab__btn img { width: 24px; height: 24px; }
}

@media (max-width: 375px) {
    .hw-wrap,
    .hw-hd__inner,
    .hw-top__inner { width: min(var(--wrap), 100% - 20px); }

    .hw-lv__item { font-size: .76rem; padding: 7px 9px; }

    .hw-ft__grid { gap: 24px 16px; }
    .hw-ft__col h4 { font-size: .74rem; letter-spacing: .12em; }
    .hw-ft__links a,
    .hw-ft__contact div { font-size: .86rem; }

    h1 { font-size: 1.98rem; }

    .hw-hero__rail li { grid-template-columns: 1fr; gap: 2px; }
    .hw-hero__inset { width: 84px; }
    .hw-geo__chip { font-size: .84rem; padding: 8px 11px; }
    .hw-calc__range { flex-wrap: wrap; }
    .hw-calc__range output { min-width: 0; }
}