/* Ergänzungen zur vorhandenen Originalgestaltung; keine neue Farb- oder Schriftdefinition. */
html { scroll-padding-top: var(--nrw-header-offset, 96px); }
[id] { scroll-margin-top: var(--nrw-header-offset, 96px); }
[hidden] { display: none !important; }
.logo img, .footer-brand img { height: auto; object-fit: contain; }
.nrw-technical-image { object-fit: contain; max-height: 560px; width: 100%; }
.nrw-card-image { object-fit: contain; }
.nrw-inhalt { padding-top: 24px; padding-bottom: 24px; }
.nrw-inhalt ul { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-left: 20px; }
.nrw-inhalt a { text-decoration: underline; text-underline-offset: .2em; }
.nrw-cards { margin-top: 24px; margin-bottom: 24px; }
.nrw-cards > .cat-card { min-width: 0; }
.nrw-cards .cat-card-body { display: flex; flex-direction: column; height: 100%; }
.nrw-cards .cat-card-body > .btn, .nrw-cards .link-arrow { margin-top: auto; }
.nrw-table-wrap { max-width: 100%; overflow-x: auto; margin: 24px 0; }
.nrw-table { width: 100%; border-collapse: collapse; font: inherit; color: inherit; }
.nrw-table th, .nrw-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid; border-color: color-mix(in srgb, currentColor 20%, transparent); }
.nrw-table caption { text-align: left; margin-bottom: 12px; }
.nrw-form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.nrw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nrw-field-wide { grid-column: 1 / -1; }
.nrw-field input, .nrw-field select, .nrw-field textarea, .nrw-result textarea { font: inherit; color: inherit; background: transparent; width: 100%; padding: 10px 12px; border: 1px solid; border-color: color-mix(in srgb, currentColor 35%, transparent); border-radius: 8px; box-sizing: border-box; }
.nrw-field textarea, .nrw-result textarea { resize: vertical; }
button.btn { cursor: pointer; font-family: inherit; }
.nrw-result { margin-top: 24px; padding: 20px; border: 1px solid; border-color: color-mix(in srgb, currentColor 25%, transparent); border-radius: 12px; }
.nrw-result .hero-actions { margin-top: 16px; }
.nrw-result ul { padding-left: 22px; }
.nrw-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.nrw-review-heading { margin-bottom: 16px; }
.nrw-result textarea:focus, .nrw-form :is(input,select,textarea,button):focus-visible, .nrw-table-wrap:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nav .has-sub:focus-within > .submenu { display: block; opacity: 1; visibility: visible; pointer-events: auto; }
.nav .has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
@media (max-width: 700px) { .nrw-form { grid-template-columns: minmax(0,1fr); } .nrw-inhalt ul { display: block; } .nrw-inhalt li { margin: 8px 0; } .nrw-result { padding: 14px; } }
@media print { .topbar, .header, .footer, .mobile-cta, .nrw-inhalt, .nrw-plan-actions, .hero-actions, button, form { display: none !important; } .reveal { opacity: 1 !important; transform: none !important; } details > * { display: block !important; } .section { break-inside: auto; } h2,h3 { break-after: avoid; } .nrw-table-wrap { overflow: visible; } }

/* Produktgrafiken im Hero vollständig und mittig anzeigen. */
.hero .hero-media > img.nrw-technical-image {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    object-position: center;
    padding: clamp(16px, 2vw, 32px);
    background-color: #fff;
    transform: none;
}

/* Anwendungsfotos in den Karten behalten ihre flächige Darstellung. */
.cat-card > img.nrw-card-image {
    object-fit: cover;
    object-position: center;
}

/* Technische Produktbilder in Karten nicht beschneiden oder vergrößern. */
.cat-card > img.nrw-card-image:is(
    [src$="-technik.webp"],
    [src$="-detail.webp"],
    [src$="/fenster-rollo.webp"],
    [src$="/lichtschacht-auflieger.webp"],
    [src$="/gittersafe-regenschutz.webp"]
) {
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    padding: 12px;
    background-color: #fff;
    transform: none;
}

@media (max-width: 700px) {
    .hero .hero-media > img.nrw-technical-image {
        padding: 16px;
    }

    .cat-card > img.nrw-card-image:is(
        [src$="-technik.webp"],
        [src$="-detail.webp"],
        [src$="/fenster-rollo.webp"],
        [src$="/lichtschacht-auflieger.webp"],
        [src$="/gittersafe-regenschutz.webp"]
    ) {
        padding: 10px;
    }
}