.hero {
  background:
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(79,163,217,.10), transparent 70%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 56px 56px;
}
.section { border-top: 1px solid rgba(255,255,255,.06); scroll-margin-top: 72px; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 5rem 1.25rem; }
@media (min-width: 640px) { .wrap { padding: 7rem 2rem; } }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #4fa3d9; }
.section-title { margin-top: .75rem; font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 600; color: #fff; letter-spacing: -.02em; }
.section-lead { margin-top: 1rem; max-width: 40rem; color: #94a3b8; line-height: 1.7; }

.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.nav-link { position: relative; padding: .4rem 0; color: #cbd5e1; transition: color .2s; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: #4fa3d9; transform: scaleX(0); transition: transform .25s; }
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }
.mobile-link { padding: .85rem .25rem; color: #e2e8f0; border-bottom: 1px solid rgba(255,255,255,.05); }

.btn-primary, .btn-secondary, .btn-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .9rem 1.5rem; border-radius: .6rem; font-weight: 500; transition: background .2s, border-color .2s, box-shadow .2s;
}
.btn-sm { padding: .6rem 1.1rem; font-size: .9rem; }
.btn-primary { background: #4fa3d9; color: #fff; box-shadow: 0 6px 20px -8px rgba(79,163,217,.6); }
.btn-primary:hover { background: #3d8fc4; }
.btn-wa { background: rgba(37,211,102,.1); border: 1px solid rgba(37,211,102,.35); color: #b9f5cf; }
.btn-wa:hover { background: rgba(37,211,102,.18); }
.btn-secondary { border: 1px solid rgba(255,255,255,.14); color: #e2e8f0; }
.btn-secondary:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.03); }

.fact { background: #0e1116; padding: 1rem 1.25rem; }
.fact dt { font-size: .75rem; color: #64748b; }
.fact dd { margin-top: .2rem; color: #e2e8f0; font-weight: 500; }

.card { background: #10141a; border: 1px solid rgba(255,255,255,.07); border-radius: 1rem; padding: 2rem; transition: border-color .2s; }
.card:hover { border-color: rgba(79,163,217,.28); }
.card h3 { margin-top: 1.25rem; font-size: 1.1rem; font-weight: 600; color: #fff; }
.card p { margin-top: .5rem; color: #94a3b8; line-height: 1.65; }
.icon { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: .6rem; background: rgba(79,163,217,.1); color: #4fa3d9; }
.icon .ico { width: 22px; height: 22px; }
.mini-list { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.06); display: grid; gap: .5rem; font-size: .875rem; color: #cbd5e1; }
.mini-list li { display: flex; gap: .6rem; align-items: center; }
.mini-list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #4fa3d9; }

.value { border-left: 2px solid #4fa3d9; padding-left: 1rem; }
.value-h { color: #fff; font-weight: 600; }
.value p:last-child { font-size: .875rem; color: #94a3b8; margin-top: .25rem; }

.stack { margin-top: 1.75rem; display: grid; gap: 1.4rem; }
.stack-h { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: #64748b; margin: 0 0 .6rem !important; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags span { font-size: .85rem; padding: .35rem .75rem; border-radius: .45rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #e2e8f0; }

.contact-row { display: flex; gap: 1rem; align-items: flex-start; }
.contact-row .ico { margin-top: .2rem; }
.contact-h { font-size: .75rem; color: #64748b; margin-bottom: .15rem; }

.map { position: relative; width: 100%; height: clamp(280px, 55vw, 420px); border-radius: 1rem; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: #10141a; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.3) invert(.9) hue-rotate(180deg); }

.footer-h { color: #fff; font-weight: 500; margin-bottom: .5rem; }

/* Rechtstexte */
.legal h1 { margin-top: .75rem; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; color: #fff; letter-spacing: -.02em; }
.legal h2 { margin-top: 2.5rem; font-size: 1.1rem; font-weight: 600; color: #fff; }
.legal p { margin-top: .75rem; line-height: 1.75; color: #94a3b8; }
.legal a { color: #4fa3d9; }
.legal mark { background: rgba(250,204,21,.15); color: #fde68a; padding: 0 .25rem; border-radius: .25rem; }