/* Hilfsklassen – ersetzen die frueheren Inline-Styles.
   Muss als LETZTES Stylesheet eingebunden werden.
   Die svg-Selektoren sind bewusst mit Elementtyp qualifiziert (Spezifitaet 0,1,1),
   damit sie – wie zuvor der Inline-Style – die Regeln wie
   ".nd-card-icon svg { height:24px }" schlagen. Bewusst OHNE width, weil der
   frühere Inline-Style ebenfalls keines gesetzt hat. */
svg.icon-inline{display:inline-block;height:1em;overflow:visible;vertical-align:-.125em}
svg.icon-inline--w18{width:18px}
.icon-fixed{width:16px}
.mb-28{margin-bottom:28px}
.mt-16{margin:16px 0 0}

/* Mobile-Navigation: Hamburger + Vollbild-Menü bis 1100px (Tablets, Smartphones quer) */
@media(max-width:1100px){
 html{scroll-padding-top:85px}
 .header{height:78px;padding:0 22px}
 .brand img{width:180px}
 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;background:none;border:1px solid var(--line);border-radius:0;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s}
 .menu-toggle:hover,.menu-toggle[aria-expanded="true"]{border-color:var(--blue);color:var(--blue)}
 .menu-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
 .burger{position:relative;width:22px;height:14px;display:block}
 .burger i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .25s,opacity .2s,top .25s}
 .burger i:nth-child(1){top:0}.burger i:nth-child(2){top:6px}.burger i:nth-child(3){top:12px}
 .menu-toggle[aria-expanded="true"] .burger i:nth-child(1){top:6px;transform:rotate(45deg)}
 .menu-toggle[aria-expanded="true"] .burger i:nth-child(2){opacity:0}
 .menu-toggle[aria-expanded="true"] .burger i:nth-child(3){top:6px;transform:rotate(-45deg)}
 .header nav{display:flex;position:absolute;top:100%;left:0;right:0;height:calc(100vh - 78px);height:calc(100dvh - 78px);flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 40px;background:#fff;border-top:1px solid var(--line);box-shadow:none;font-size:1.25rem;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
 .header nav.open{display:flex;opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .2s}
 .header nav a{min-height:62px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-weight:500}
 .header nav a::after{content:"→";color:var(--blue);font-size:1rem}
 body.menu-open{overflow:hidden}
}
@media(max-width:440px){.hero h1{font-size:clamp(2rem,10.5vw,2.5rem);overflow-wrap:break-word;hyphens:auto}}
@media(prefers-reduced-motion:reduce){.header nav,.burger i{transition:none}}

/* CTA-Hintergrund: eigenes Anlagenbild statt Wiederholung des Hero-Bilds */
.na-cta{background:image-set(url('assets/dtkt01.webp') type('image/webp'),url('assets/dtkt01.jpg') type('image/jpeg')) center 60%/cover no-repeat;background-attachment:scroll}
.na-cta::before{background:rgba(1,22,39,.72)}
@media(max-width:900px){.na-cta{background-image:image-set(url('assets/dtkt01-900.webp') type('image/webp'),url('assets/dtkt01.jpg') type('image/jpeg'))}}