/* ==========================================================================
   Demo site "handwerk" (W6a): an invented installer (name in includes/beispiele.php).
   Loaded after css/beispiele/rahmen.css; read the rules at the top of that file.

   Identity: precise and technical, like a plan from the drawing office.
   Graphite and concrete grey with a copper accent (the pipes), IBM Plex Sans 600
   for headings, IBM Plex Mono for labels, numbers and the title blocks of the
   drawings, square corners, hairlines and a drawing grid behind the illustrations.

   Contrast (WCAG 2.2 AA), measured:
     graphite #1E2226 on white 16.0:1, on concrete #EDEFF0 13.9:1
     text-2 #4A535B on white 7.8:1, on concrete 6.8:1, on copper tint 6.9:1
     copper #A8481A on white 5.8:1, on concrete 5.1:1, white on copper 5.8:1
     light copper #E89A66 on graphite 7.1:1, on graphite-2 5.9:1
     grey #B9C0C6 on graphite 8.7:1
     field borders #7A838B on white 3.9:1 (UI components need 3:1)
   ========================================================================== */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

:root {
    --hw-graphit: #1E2226;
    --hw-graphit-2: #2A3036;      /* cards on graphite */
    --hw-graphit-linie: #4A535B;  /* hairlines on graphite, decorative */
    --hw-text-2: #4A535B;         /* secondary text on light surfaces */
    --hw-hell: #FFFFFF;
    --hw-hell-2: #B9C0C6;         /* secondary text on graphite */
    --hw-weiss: #FFFFFF;
    --hw-beton: #EDEFF0;
    --hw-linie: #C9CED2;          /* hairlines, decorative */
    --hw-raster: #E3E7EA;         /* drawing grid */
    --hw-rand: #7A838B;           /* borders of form controls, 3:1 and more */
    --hw-kupfer: #A8481A;
    --hw-kupfer-dunkel: #8A3A14;
    --hw-kupfer-hell: #E89A66;
    --hw-kupfer-linie: #C2571F;   /* pipes in the drawings */
    --hw-kupfer-zart: #FBEFE7;    /* selected option */
    --hw-stahl: #3E6A85;          /* return and cold water in the drawings */
    --hw-glas: #DCE7EE;
    --hw-fokus: var(--hw-kupfer);
    --hw-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --hw-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}


/* Base ----------------------------------------------------------------------- */

body {
    background: var(--hw-weiss);
    color: var(--hw-graphit);
    font-family: var(--hw-sans);
    font-size: 1rem;
    line-height: 1.6;
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p, ul, ol, dl, dd, figure { margin: 0; }
p { text-wrap: pretty; }   /* no single word on the last line, as on the main site */

a { color: inherit; }

strong { font-weight: 600; }

/* Focus: copper on light surfaces, light copper on graphite, copper again on the white
   form sheet inside the dark booking section */
:focus-visible { outline: 3px solid var(--hw-fokus); outline-offset: 2px; }
.hw-dunkel { --hw-fokus: var(--hw-kupfer-hell); }
.hw-dunkel .hw-blatt { --hw-fokus: var(--hw-kupfer); }

.hw-innen {
    width: 100%;
    max-width: 74rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

.hw-umbruch { overflow-wrap: anywhere; }

@media (min-width: 40em) {
    .hw-innen { padding-inline: 1.5rem; }
}

@media (min-width: 64em) {
    body { font-size: 1.0625rem; }
    .hw-innen { padding-inline: 2rem; }
}


/* Header: wordmark and in-page navigation (not sticky, the banner sticks) ------ */

.hw-kopf {
    background: var(--hw-weiss);
    border-bottom: 1px solid var(--hw-graphit);
}

.hw-kopf__innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 2rem;
    padding-top: 0.75rem;
}

.hw-marke {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    color: var(--hw-graphit);
    text-decoration: none;
}

.hw-marke__zeichen { flex: none; width: 2.5rem; height: 2.5rem; }
.hw-marke__grund { fill: var(--hw-graphit); }
.hw-marke__rohr { fill: none; stroke: var(--hw-kupfer-hell); stroke-width: 5; }
.hw-marke__muffe { fill: var(--hw-weiss); }

.hw-marke__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.hw-marke__zeile {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hw-text-2);
}

.hw-marke__name {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.hw-nav {
    width: 100%;
    margin-top: 0.5rem;
    border-top: 1px solid var(--hw-linie);
}

.hw-nav__liste {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hw-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--hw-graphit);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}
.hw-nav__link:hover { border-bottom-color: var(--hw-kupfer); }

.hw-nav__link--termin { color: var(--hw-kupfer); font-weight: 600; }

@media (min-width: 60em) {
    .hw-kopf__innen { flex-wrap: nowrap; padding-block: 0.875rem; }

    .hw-nav { width: auto; margin-top: 0; border-top: 0; }
    .hw-nav__liste { align-items: center; column-gap: 0.25rem; }
    .hw-nav__link { padding-inline: 0.75rem; }

    .hw-nav__link--termin {
        margin-left: 0.75rem;
        padding-inline: 1.125rem;
        background: var(--hw-graphit);
        color: var(--hw-hell);
        border-bottom: 0;
    }
    .hw-nav__link--termin:hover { background: var(--hw-kupfer); }
}


/* Section labels and buttons --------------------------------------------------- */

.hw-kennung {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hw-kupfer);
}
.hw-kennung::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 2px;
    background: currentColor;
}
.hw-dunkel .hw-kennung { color: var(--hw-kupfer-hell); }

.hw-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

.hw-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.625rem 1.25rem;
    font-family: var(--hw-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    border: 2px solid var(--hw-graphit);
    border-radius: 0;
}

.hw-knopf--kupfer { background: var(--hw-kupfer); border-color: var(--hw-kupfer); color: var(--hw-hell); }
.hw-knopf--kupfer:hover { background: var(--hw-kupfer-dunkel); border-color: var(--hw-kupfer-dunkel); }

.hw-knopf--linie { background: transparent; color: var(--hw-graphit); }
.hw-knopf--linie:hover { background: var(--hw-graphit); color: var(--hw-hell); }

@media (prefers-reduced-motion: no-preference) {
    .hw-knopf, .hw-nav__link, .hw-zeit, .hw-wahl { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
}


/* Hero ---------------------------------------------------------------------------- */

.hw-held {
    padding-block: 2.5rem 3rem;
    border-bottom: 1px solid var(--hw-graphit);
}

.hw-held__raster {
    display: grid;
    gap: 2.5rem;
}

.hw-held h1 {
    font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
}

.hw-held__lead {
    max-width: 34rem;
    margin-top: 1.25rem;
    font-size: 1.125rem;
    color: var(--hw-text-2);
}

@media (min-width: 64em) {
    .hw-held { padding-block: 4.5rem 4rem; }
    .hw-held__raster {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: center;
        gap: 3.5rem;
    }
}

/* Drawing panel with a title block, used in the hero and in the contact section */
.hw-plan {
    border: 1px solid var(--hw-graphit);
    background: var(--hw-weiss);
}

.hw-plan__flaeche,
.hw-referenz__bild {
    background-color: #F7F8F9;
    background-image:
        linear-gradient(to right, var(--hw-raster) 1px, transparent 1px),
        linear-gradient(to bottom, var(--hw-raster) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
}

.hw-plan__flaeche { padding: 1rem; }

.hw-plan svg,
.hw-referenz svg {
    display: block;
    width: 100%;
    height: auto;
}

.hw-schriftfeld {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--hw-graphit);
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.45;
    letter-spacing: 0.04em;
    color: var(--hw-graphit);
}

.hw-schriftfeld__masz {
    flex: none;
    padding-left: 0.875rem;
    border-left: 1px solid var(--hw-graphit);
    color: var(--hw-kupfer);
    white-space: nowrap;
}

/* Key figures */
.hw-daten {
    display: grid;
    margin-top: 2.5rem;
    border-top: 1px solid var(--hw-graphit);
}

.hw-daten > div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    padding-block: 1rem;
    border-bottom: 1px solid var(--hw-linie);
}
.hw-daten > div:last-child { border-bottom: 0; padding-bottom: 0; }

.hw-daten dd {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hw-daten dt {
    margin-top: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--hw-text-2);
}

@media (min-width: 36em) {
    .hw-daten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hw-daten > div { padding: 1.25rem 1rem 0 0; border-bottom: 0; }
    .hw-daten > div + div { padding-left: 1.25rem; border-left: 1px solid var(--hw-linie); }
}

@media (min-width: 64em) {
    .hw-daten { margin-top: 3.5rem; }
    .hw-daten dd { font-size: 2.25rem; }
}


/* Sections ------------------------------------------------------------------------ */

.hw-abschnitt {
    padding-block: 3.5rem;
    border-bottom: 1px solid var(--hw-graphit);
}

.hw-abschnitt--beton { background: var(--hw-beton); }

.hw-abschnitt--dunkel {
    background: var(--hw-graphit);
    color: var(--hw-hell);
    border-bottom-color: var(--hw-graphit);
}

.hw-abschnitt h2 { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); }

.hw-abschnitt__kopf {
    display: grid;
    gap: 1rem;
    margin-bottom: 2.25rem;
}

.hw-abschnitt__lead {
    max-width: 36rem;
    font-size: 1.0625rem;
    color: var(--hw-text-2);
}

@media (min-width: 56em) {
    .hw-abschnitt { padding-block: 5.5rem; }
    .hw-abschnitt__kopf {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: end;
        gap: 3rem;
        margin-bottom: 3rem;
    }
}


/* 01 Services: a grid of hairline cells ------------------------------------------ */

.hw-leistungen {
    display: grid;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hw-graphit);
    border-left: 1px solid var(--hw-graphit);
}

.hw-leistung {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem 1.25rem 1.75rem;
    background: var(--hw-weiss);
    border-right: 1px solid var(--hw-graphit);
    border-bottom: 1px solid var(--hw-graphit);
}

.hw-leistung h3 { font-size: 1.25rem; letter-spacing: -0.01em; }

.hw-leistung__nr {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hw-kupfer);
}

.hw-leistung__text { color: var(--hw-text-2); }

.hw-leistung--hervor {
    background: var(--hw-graphit);
    color: var(--hw-hell);
}
.hw-leistung--hervor .hw-leistung__nr { color: var(--hw-kupfer-hell); }
.hw-leistung--hervor .hw-leistung__text { color: var(--hw-hell-2); }

.hw-preis {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--hw-graphit-linie);
}

.hw-preis__wert {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hw-preis__label {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hw-hell-2);
}

.hw-preis__betrag {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--hw-hell);
    white-space: nowrap;
}

.hw-preis__waehrung { margin-left: 0.2em; font-size: 0.75em; }

.hw-preis__info {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--hw-hell-2);
}

.hw-leistung__link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--hw-kupfer-hell);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.hw-leistung__link:hover { text-decoration-thickness: 2px; }

@media (min-width: 40em) {
    .hw-leistungen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
    .hw-leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hw-leistung { padding: 1.75rem 1.75rem 2rem; }
}


/* 02 References: drawings instead of photos ---------------------------------------- */

.hw-referenzen {
    display: grid;
    gap: 1.5rem;
    padding: 0;
    list-style: none;
}

.hw-referenz {
    display: flex;
    flex-direction: column;
    background: var(--hw-weiss);
    border: 1px solid var(--hw-graphit);
}

.hw-referenz__bild {
    padding: 0.75rem;
    border-bottom: 1px solid var(--hw-graphit);
}

.hw-referenz__text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
}

.hw-referenz h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.hw-referenz__text > p:last-child { color: var(--hw-text-2); }

/* The heading comes first in the source, the reference number and year above it */
.hw-referenz__meta {
    order: -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hw-text-2);
}
.hw-referenz__meta > :first-child { color: var(--hw-kupfer); }

@media (min-width: 40em) {
    .hw-referenzen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
    .hw-referenzen { gap: 2rem; }
    .hw-referenz__bild { padding: 1rem 1.25rem; }
    .hw-referenz__text { padding: 1.5rem 1.75rem 1.75rem; }
}


/* 03 Process ------------------------------------------------------------------------ */

.hw-schritte {
    display: grid;
    gap: 2rem;
    padding: 0;
    list-style: none;
}

.hw-schritt {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--hw-graphit);
}

.hw-schritt__nr {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--hw-kupfer);
}

.hw-schritt h3 { margin-top: 0.5rem; font-size: 1.1875rem; letter-spacing: -0.01em; }
.hw-schritt > p:last-child { color: var(--hw-text-2); }

@media (min-width: 40em) {
    .hw-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

@media (min-width: 64em) {
    .hw-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; }
    .hw-schritt__nr { font-size: 2.75rem; }
}


/* 04 Booking: dark section with a white form sheet ---------------------------------- */

.hw-termin {
    display: grid;
    gap: 2.5rem;
}

.hw-termin h2 { color: var(--hw-hell); }

.hw-termin__lead {
    margin-top: 1rem;
    max-width: 32rem;
    font-size: 1.0625rem;
    color: var(--hw-hell-2);
}

.hw-punkte {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 1.25rem 0 0;
    list-style: none;
    border-top: 1px solid var(--hw-graphit-linie);
    color: var(--hw-hell-2);
}

.hw-punkte li {
    position: relative;
    padding-left: 1.25rem;
}
.hw-punkte li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--hw-kupfer-hell);
}
.hw-punkte strong { color: var(--hw-hell); }

.hw-blatt {
    padding: 1.25rem 1rem 1.5rem;
    background: var(--hw-weiss);
    color: var(--hw-graphit);
    border-top: 4px solid var(--hw-kupfer-hell);
}

.hw-blatt__titel { font-size: 1.375rem; letter-spacing: -0.01em; }

@media (min-width: 40em) {
    .hw-blatt { padding: 1.75rem 2rem 2rem; }
}

@media (min-width: 64em) {
    .hw-termin {
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        align-items: start;
        gap: 3.5rem;
    }
}

/* The intro stays in view next to the long form, below the sticky banner, but only where the
   window is tall enough to show all of it: on a short screen its last lines would stay hidden */
@media (min-width: 64em) and (min-height: 50em) {
    .hw-termin__intro {
        position: sticky;
        top: calc(var(--bsp-banner-hoehe, 4rem) + 2rem);
    }
}

/* Form */
.hw-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.hw-form legend { padding: 0; }

/* The legend sits in the top rule of its part, like a heading in a title block */
.hw-form .hw-form__teil {
    margin-top: 1.75rem;
    border-top: 1px solid var(--hw-linie);
}

.hw-form .hw-form__legende {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    padding-right: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 600;
}

.hw-form__nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.875rem;
    background: var(--hw-graphit);
    color: var(--hw-hell);
}

.hw-form__hilfe,
.hw-feld__hilfe {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--hw-text-2);
}
.hw-form__hilfe { margin: -0.25rem 0 1rem; }

/* Radio options: the native radio stays visible and takes the focus ring */
.hw-wahlen {
    display: grid;
    gap: 0.75rem;
}

.hw-wahl,
.hw-zeit {
    display: flex;
    gap: 0.75rem;
    min-height: 2.75rem;
    border: 1px solid var(--hw-rand);
    background: var(--hw-weiss);
    cursor: pointer;
}

.hw-wahl { align-items: flex-start; padding: 0.875rem 1rem; }
.hw-zeit { align-items: center; padding: 0.5rem 0.75rem; }

.hw-wahl:hover,
.hw-zeit:hover { border-color: var(--hw-graphit); }

.hw-wahl:has(input:checked),
.hw-zeit:has(input:checked) {
    border-color: var(--hw-kupfer);
    box-shadow: inset 0 0 0 1px var(--hw-kupfer);
    background: var(--hw-kupfer-zart);
}

.hw-form input[type="radio"] {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--hw-kupfer);
}
.hw-wahl input[type="radio"] { margin-top: 0.125rem; }

.hw-wahl__titel { display: block; font-weight: 600; line-height: 1.35; }
.hw-wahl__info { display: block; margin-top: 0.125rem; font-size: 0.875rem; line-height: 1.45; color: var(--hw-text-2); }

/* Free slots: one column per day from tablet width, like a week planner */
.hw-tage {
    display: grid;
    gap: 1.25rem 1rem;
}

.hw-form .hw-tag__legende {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.5rem;
    padding-top: 0.5rem;
    border-top: 2px solid var(--hw-graphit);
}

.hw-tag__name { font-weight: 600; }

.hw-tag__datum {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--hw-text-2);
}

.hw-tag__zeiten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
    gap: 0.5rem;
}

.hw-zeit {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.9375rem;
}

/* Always four days (handwerk.php), so four fixed columns: an auto-fit grid would drop the last
   day onto a row of its own where the form sheet is narrow */
@media (min-width: 40em) {
    .hw-wahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-tage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hw-form .hw-tag__legende { flex-direction: column; }
    .hw-tag__zeiten { grid-template-columns: minmax(0, 1fr); }
}

/* Text fields; side by side, the inputs line up at the bottom even when one hint wraps */
.hw-felder {
    display: grid;
    gap: 1.25rem;
}

.hw-feld {
    display: flex;
    flex-direction: column;
}
.hw-feld input { margin-top: auto; }

.hw-feld label,
.hw-form .hw-gruppe__legende {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 600;
}

/* Street and town under one legend; the hint sits below the legend like below a label */
.hw-gruppe .hw-feld label { font-weight: 500; }

.hw-feld__optional { font-weight: 400; color: var(--hw-text-2); }

.hw-feld__hilfe { margin: -0.125rem 0 0.5rem; }

.hw-feld input,
.hw-feld textarea {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.75rem;
    background: var(--hw-weiss);
    color: var(--hw-graphit);
    border: 1px solid var(--hw-rand);
    border-radius: 0;
    line-height: 1.4;
}
.hw-feld textarea { min-height: 7.5rem; resize: vertical; }

.hw-feld input:hover,
.hw-feld textarea:hover { border-color: var(--hw-graphit); }
.hw-feld input:focus-visible,
.hw-feld textarea:focus-visible { border-color: var(--hw-kupfer); }

@media (min-width: 40em) {
    .hw-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hw-feld--breit { grid-column: 1 / -1; }
}

/* Submit row: the button is disabled on purpose, the note says so */
.hw-senden {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hw-linie);
}

.hw-knopf--senden {
    background: var(--hw-raster);
    color: var(--hw-text-2);
    border: 2px dashed var(--hw-rand);
    cursor: not-allowed;
}

/* Shown in the wording W6a asks for, so no text-transform */
.hw-deaktiviert {
    padding: 0.25rem 0.625rem;
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--hw-kupfer);
    border: 1px solid var(--hw-kupfer);
}

.hw-form__info {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--hw-text-2);
}


/* 05 Contact ---------------------------------------------------------------------- */

.hw-kontakt {
    display: grid;
    gap: 2.5rem;
}

.hw-kontakt .hw-abschnitt__lead { margin-top: 1rem; }

.hw-kontaktdaten {
    margin-top: 2rem;
    border-top: 1px solid var(--hw-graphit);
}

.hw-kontaktdaten > div {
    display: grid;
    gap: 0.25rem;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--hw-linie);
}

.hw-kontaktdaten dt {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hw-text-2);
}

.hw-kontaktdaten dd { font-size: 1.0625rem; }

.hw-karte { max-width: 26rem; width: 100%; justify-self: center; }

@media (min-width: 40em) {
    .hw-kontaktdaten > div { grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
}

@media (min-width: 56em) {
    .hw-kontakt {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: start;
        gap: 4rem;
    }
    .hw-karte { justify-self: end; }
}


/* Footer of the business ------------------------------------------------------------ */

.hw-fuss {
    padding-block: 3rem 1.5rem;
    background: var(--hw-graphit);
    color: var(--hw-hell-2);
    font-size: 0.9375rem;
}

.hw-fuss__raster {
    display: grid;
    gap: 2rem;
}

.hw-marke--fuss { margin-bottom: 0.75rem; color: var(--hw-hell); }
.hw-marke--fuss .hw-marke__zeile { color: var(--hw-hell-2); }
.hw-marke--fuss .hw-marke__grund { fill: var(--hw-graphit-2); }

.hw-fuss__satz { max-width: 24rem; }

.hw-fuss__titel {
    margin-bottom: 0.5rem;
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hw-kupfer-hell);
}

.hw-fuss__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--hw-hell);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
.hw-fuss__link:hover { text-decoration-thickness: 2px; }

.hw-fuss__unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hw-graphit-linie);
    font-size: 0.875rem;
}

@media (min-width: 48em) {
    .hw-fuss__raster { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 3rem; }
}


/* Drawings (inline SVG): the palette lives here, not in the markup ------------------ */

.z-weiss { fill: var(--hw-weiss); }
.z-grau { fill: #E4E8EB; }
.z-mittel { fill: var(--hw-linie); }
.z-dunkel { fill: var(--hw-graphit); }
.z-kupfer { fill: var(--hw-kupfer-linie); }
.z-stahl { fill: var(--hw-stahl); }

.z-flaeche { fill: var(--hw-weiss); stroke: var(--hw-graphit); stroke-width: 2; }
.z-wand { fill: none; stroke: var(--hw-graphit); stroke-width: 2; }
.z-wand-dick { stroke-width: 5; }
.z-duenn { fill: none; stroke: var(--hw-rand); stroke-width: 1; }
.z-fuge { fill: none; stroke: #D3D8DC; stroke-width: 1; }
.z-masz { fill: none; stroke: var(--hw-text-2); stroke-width: 1; }

.z-vl, .z-rl, .z-daemm, .z-rohr, .z-vl-duenn {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.z-vl { stroke: var(--hw-kupfer-linie); stroke-width: 4; }
.z-rl { stroke: var(--hw-stahl); stroke-width: 4; }
.z-vl-duenn { stroke: var(--hw-kupfer-linie); stroke-width: 3; }
.z-daemm { stroke: var(--hw-linie); stroke-width: 11; }
.z-rohr { stroke: var(--hw-graphit); stroke-width: 3; }

.z-wasser { fill: none; stroke: var(--hw-stahl); stroke-width: 1.5; stroke-dasharray: 5 7; stroke-linecap: round; }
.z-glas { fill: var(--hw-glas); stroke: var(--hw-stahl); stroke-width: 1; }
.z-spiegel { fill: #EEF3F6; stroke: var(--hw-graphit); stroke-width: 2; }
.z-pumpe { fill: var(--hw-weiss); stroke: var(--hw-graphit); stroke-width: 2; }
.z-ventil { fill: var(--hw-weiss); stroke: var(--hw-graphit); stroke-width: 1.5; stroke-linejoin: round; }

.z-strasse { fill: none; stroke: var(--hw-linie); stroke-width: 3; stroke-linecap: round; }
.z-ring { fill: none; stroke: var(--hw-kupfer-linie); stroke-width: 2; stroke-dasharray: 6 6; }
.z-ring-voll { fill: none; stroke: var(--hw-kupfer-linie); stroke-width: 2; }

/* A halo in the paper colour cuts lines that cross a label, as on a printed plan */
.z-schrift {
    font-family: var(--hw-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.04em;
    fill: var(--hw-graphit);
    stroke: #F7F8F9;
    stroke-width: 4px;
    stroke-linejoin: round;
    paint-order: stroke fill;
}
/* Labels of the hero section drawing: at phone width the 560-unit drawing is scaled to about
   half, so they are drawn larger there to stay legible (about 11 px on a 390 px screen) */
.z-schrift--plan { font-size: 20px; }

@media (min-width: 40em) {
    .z-schrift--plan { font-size: 14px; }
}


/* Windows contrast themes: keep borders and the selected option visible ------------- */

@media (forced-colors: active) {
    .hw-knopf, .hw-wahl, .hw-zeit, .hw-feld input, .hw-feld textarea { border-color: ButtonText; }
    /* An author system colour beats the browser's GrayText for :disabled, so set it again */
    .hw-knopf--senden { border-color: GrayText; color: GrayText; }
    .hw-wahl:has(input:checked), .hw-zeit:has(input:checked) { border-color: Highlight; }
    .hw-kennung::before, .hw-punkte li::before { background: CanvasText; }
}


/* Print: no navigation, no booking form --------------------------------------------- */

@media print {
    .hw-nav, .hw-blatt { display: none; }
    .hw-abschnitt--dunkel, .hw-leistung--hervor, .hw-fuss { background: none; color: #000; }
}