/* ============================================================
   ARTec Armaturen- und Dichtungstechnik — main.css
   Brand: Signalrot #D0001A (Logo) | Technikblau #0090F0 (Logo-"T")
   Typo:  Barlow Condensed (Display) / Barlow (Body) / IBM Plex Mono (Tags)
   ============================================================ */

:root {
  --artec-red: #D0001A;
  --artec-red-dark: #A80014;
  --artec-blue: #0090F0;
  --artec-ink: #14181D;
  --artec-steel: #58616E;
  --artec-surface: #F2F4F6;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', system-ui, sans-serif;
  color: var(--artec-ink);
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Barlow Condensed', 'Barlow', sans-serif; }
.font-mono-tag { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* --- Signature: Norm-Tag / Typenschild-Plakette ------------- */
.norm-tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: 0.2rem 0.55rem;
  display: inline-block;
  line-height: 1.2;
  white-space: nowrap;
}

/* --- Signature: rote Prüfsiegel-Kante (Logo-Linie) ---------- */
.seal-top { border-top: 3px solid var(--artec-red); }
.seal-top-blue { border-top: 3px solid var(--artec-blue); }

/* Rote Linie unter Headlines — Zitat der Logo-Unterstreichung */
.brand-rule {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--artec-red);
  margin-top: 0.75rem;
}
.brand-rule--center { margin-left: auto; margin-right: auto; }

/* --- Header ------------------------------------------------- */
.site-header { transition: box-shadow 0.25s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 14px rgba(20, 24, 29, 0.10); }

.nav-link {
  position: relative;
  font-weight: 500;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--artec-red);
  transition: width 0.2s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: var(--artec-red); }

/* --- Buttons ------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  padding: 0.8rem 1.6rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-red { background: var(--artec-red); color: #fff; }
.btn-red:hover { background: var(--artec-red-dark); }

.btn-outline { border: 2px solid var(--artec-ink); color: var(--artec-ink); }
.btn-outline:hover { background: var(--artec-ink); color: #fff; }

.btn-outline-white { border: 2px solid #fff; color: #fff; }
.btn-outline-white:hover { background: #fff; color: var(--artec-ink); }

/* Express-Button (pulsierender Punkt statt falschem 24h-Versprechen) */
.express-dot {
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #fff;
  animation: express-pulse 1.6s ease-in-out infinite;
}
@keyframes express-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* --- Scroll-Reveal ------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .express-dot { animation: none; }
}

/* --- Fokus-Sichtbarkeit (Tastatur) --------------------------- */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--artec-blue);
  outline-offset: 2px;
}

/* --- Karten ------------------------------------------------- */
.card {
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(20, 24, 29, 0.12);
}

/* --- Hero-Overlay ------------------------------------------- */
.hero-overlay {
  background: linear-gradient(100deg,
    rgba(20, 24, 29, 0.92) 0%,
    rgba(20, 24, 29, 0.78) 45%,
    rgba(20, 24, 29, 0.35) 100%);
}

/* --- Mobile Navigation -------------------------------------- */
#mobile-menu { display: none; }
#mobile-menu.is-open { display: block; }