/* S&K Chemie — Custom CSS (ergänzend zu Tailwind) */

:root {
  --brand-cyan: #00B4D8;
  --brand-cyandark: #0077A8;
  --brand-deep: #003B5C;
  --brand-black: #0A0A0A;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #0A0A0A;
}

/* Skip-Link für Accessibility */
.skip-link {
  position: absolute;
  top: -50px;
  left: 0;
  background: var(--brand-deep);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 1000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* Hero Gradient */
.hero-gradient {
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 180, 216, 0.35), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0, 119, 168, 0.45), transparent 50%),
    linear-gradient(135deg, #003B5C 0%, #0A0A0A 100%);
}

/* Lotus-Effekt Hintergrund-Pattern (rein CSS, abstrakt) */
.dot-pattern {
  background-image: radial-gradient(circle, rgba(0,180,216,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Card Hover Lift */
.card-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(0, 119, 168, 0.35);
}

/* Animated underline für Nav-Links */
.nav-link {
  position: relative;
  padding: 0.25rem 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0;
  background: var(--brand-cyan);
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

/* Fokus sichtbar überall */
:focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Mobile-Menü via <details> */
details.mobile-nav summary {
  list-style: none;
  cursor: pointer;
}
details.mobile-nav summary::-webkit-details-marker {
  display: none;
}
details.mobile-nav[open] summary .icon-open { display: none; }
details.mobile-nav summary .icon-close { display: none; }
details.mobile-nav[open] summary .icon-close { display: inline-block; }

/* Gradient Border für Akzent-Karten */
.accent-top {
  position: relative;
  overflow: hidden;
}
.accent-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-cyandark));
}

/* Tropfen / Wasser-Animation für Lotus-Hero (rein CSS) */
@keyframes drop-rise {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50% { transform: translateY(-8px); opacity: 1; }
}
.water-drop {
  animation: drop-rise 3s ease-in-out infinite;
}

/* Print */
@media print {
  header, footer, nav, .no-print { display: none !important; }
  body { color: #000; background: #fff; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}