/* SMP Tools: legibility, keyboard access and mobile layout. */
h1, h2, h3 { text-wrap: balance; }
.section-head p, .lead { max-width: 62ch; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #005cff; outline-offset: 4px; }
.page-overview { background: #f3f6fb; border: 1px solid rgba(5,10,18,.09); border-radius: 8px; padding: 20px; margin-bottom: 28px; }
.page-overview ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 24px; list-style: none; padding: 0; margin: 12px 0 0; }
.page-overview a { display: block; color: #003fbd; font-size: .9rem; line-height: 1.5; }
.page-overview a:hover { text-decoration: underline; }
.main-card p, .main-card ul { max-width: 70ch; line-height: 1.75; }
.section-block h2 { scroll-margin-top: 160px; }
@media (max-width: 820px) { .page-overview ol { grid-template-columns: 1fr; } .main-card { padding: 22px !important; } }
@media (max-width: 430px) { h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; } .hero-proof { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } }

@media (max-width:620px) {
  .nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; overflow: visible; }
  .nav a { padding: 8px 3px; text-align: center; font-size: .8rem; }
  .hero-stage { background-image: linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.65) 45%,rgba(0,0,0,.88)),url('../bilder/hero-it-netzwerk.png'); }
}

/* Quieter surfaces and restrained depth. */
:root { --shadow: 0 12px 32px rgba(4,14,34,.065) !important; --shadow-soft: 0 6px 20px rgba(4,14,34,.045) !important; --shadow-deep: 0 18px 46px rgba(4,14,34,.10) !important; }
body { background: #f6f8fb !important; }
body::before, body::after { background: none !important; }
.card, .pillar, .contact-box, .main-card, .side-card, .feature, .product, .product-card, .price-card, .package-card, .checkout-box, .cart-panel, .onsite-panel, .trust-portrait { box-shadow: 0 8px 24px rgba(4,14,34,.055) !important; }
.pillar:hover, .card:hover { box-shadow: 0 12px 30px rgba(4,14,34,.085) !important; }
.topbar { box-shadow: 0 3px 14px rgba(4,14,34,.035) !important; }
.eyebrow, .btn, .premium-icon, .pillar-icon { box-shadow: 0 3px 12px rgba(4,14,34,.04) !important; }