*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0; transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0; transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.hero-grid-bg {
  background-image:
    linear-gradient(rgba(15,118,110,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: gridShift 35s linear infinite;
}
@keyframes gridShift { 0%{background-position:0 0} 100%{background-position:64px 64px} }

@keyframes pulseGlow { 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.75;transform:scale(1.04)} }
.glow-orb { animation: pulseGlow 7s ease-in-out infinite; }
.glow-orb-2 { animation: pulseGlow 9s ease-in-out infinite 2.5s; }

.gradient-text {
  background: linear-gradient(135deg, #134e4a 0%, #0f766e 45%, #14b8a6 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

@keyframes float { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-10px) rotate(.5deg)} 66%{transform:translateY(5px) rotate(-.5deg)} }
.float { animation: float 9s ease-in-out infinite; }

.service-card {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(7,27,58,.11); border-color: rgba(11,45,100,.25); }

.line-accent::before {
  content:''; position:absolute; left:0; top:0; width:3px; height:100%;
  background: linear-gradient(180deg,#0f766e,#2dd4bf); border-radius:3px;
}

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #ecfdf5; }
::-webkit-scrollbar-thumb { background: rgba(15,118,110,.22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,118,110,.38); }

@keyframes mapPulse { 0%,100%{box-shadow:0 0 0 0 rgba(11,45,100,.5)} 50%{box-shadow:0 0 0 8px rgba(11,45,100,0)} }
.map-dot { animation: mapPulse 2.5s ease-in-out infinite; }

@keyframes certScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.animate-scroll { animation: certScroll 40s linear infinite; }
.animate-scroll:hover { animation-play-state: paused; }

/* Zertifikate: zugefrorener See + Frost-Glas-Karten */
.cert-frozen {
  background-color: #0f172a;
}

.text-shadow-frozen-heading {
  text-shadow:
    0 2px 24px rgba(15, 23, 42, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.45);
}

.cert-card-frozen {
  position: relative;
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.09) 42%,
    rgba(186, 230, 253, 0.14) 100%
  );
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow:
    0 10px 36px rgba(15, 23, 42, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(15, 23, 42, 0.12);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.cert-card-frozen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 42%,
    transparent 58%,
    rgba(255, 255, 255, 0.06) 100%
  );
  opacity: 0.5;
  pointer-events: none;
}

.cert-card-frozen > * {
  position: relative;
  z-index: 1;
}

.cert-card-frozen:hover {
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow:
    0 14px 44px rgba(15, 23, 42, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(15, 23, 42, 0.14);
  transform: translateY(-2px);
}

/* Parallax-Hintergründe (Bewegung per JS, siehe initParallax) */
.parallax-section {
  position: relative;
  overflow: hidden;
}
.parallax-section .js-parallax-move {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 110%;
  height: 124%;
  object-fit: cover;
  object-position: center;
  transform: translate3d(-50%, 0, 0);
  transform-origin: center center;
  will-change: transform;
  pointer-events: none;
}
.parallax-fallback .js-parallax-move {
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Lange Parallax-Sektion: mehr Bildfläche zum Mitscrollen */
.parallax-deep .js-parallax-move {
  top: -22%;
  width: 120%;
  height: 145%;
  object-position: center center;
}

/* Scroll-Scrub: niedrige Sektion, Bild höher als View — wird per JS vertikal mitgescrollt */
.parallax-scrub {
  width: 100%;
  max-width: 100vw;
}
.parallax-scrub .js-parallax-scrub-move {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  min-width: 100%;
  height: 185%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
  pointer-events: none;
}

/* CTA über Footer: Flasche von unten, etwas mehr vertikaler Scrub-Raum */
.parallax-scrub--cta .js-parallax-scrub-move {
  height: 200%;
  object-position: center bottom;
}

/* Hero: Überschrift direkt auf dem Bild — starker Schatten für Lesbarkeit */
.hero-slide-content .hero-slide-title {
  text-shadow:
    0 2px 28px rgba(0, 0, 0, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Hero-Slider: Steuerung (eigenes Layout — Ring-Buttons, Striche, Teal-Fortschritt) */
.hero-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1.5px solid rgba(45, 212, 191, 0.42);
  background: transparent;
  color: rgb(204 251 241);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hero-nav-btn:hover {
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(45, 212, 191, 0.78);
  color: rgb(240 253 250);
}
.hero-nav-btn:active {
  transform: scale(0.96);
}

.hero-dot {
  display: block;
  height: 0.22rem;
  min-height: 4px;
  border-radius: 9999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: width 0.35s ease, background 0.25s ease, box-shadow 0.25s ease;
  width: 1.35rem;
  background: rgba(255, 255, 255, 0.22);
}
.hero-dot:hover {
  background: rgba(255, 255, 255, 0.38);
}
.hero-dot.is-active {
  width: 2.25rem;
  background: rgb(94 234 212);
  box-shadow: 0 0 18px rgba(45, 212, 191, 0.42);
}

.hero-progress-track {
  width: 7rem;
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.hero-progress-bar {
  height: 100%;
  border-radius: inherit;
  width: 0;
  background: linear-gradient(90deg, rgb(20 184 166), rgb(125 211 252));
}

.hero-counter-chip {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(204, 251, 241, 0.88);
  padding: 0.35rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 23, 42, 0.35);
}

/* Hero: Beschreibung — Backdrop-Blur; eigene Compositing-Layer (kein „späteres“ Einblenden nach Slide-Wechsel) */
.hero-slide-content {
  transition: none;
}
.hero-frost-compact {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 23, 42, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 12px 32px rgba(7, 27, 58, 0.12);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero-frost-lead {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hero-CTAs: Frost direkt auf den Links, kein umschließender Frost-Container */
.hero-cta-frost {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 28px rgba(7, 27, 58, 0.14);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.hero-cta-frost--primary {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-cta-frost--ghost {
  background: rgba(255, 255, 255, 0.12);
}
.hero-cta-frost--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Nur Sektion #quelle: Frosted-Glass hinter den drei Quellen-Karten */
.card-frost-text {
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(15, 76, 74, 0.42);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 14px 40px rgba(7, 27, 58, 0.22);
}
.card-frost-text h3 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.card-frost-text p {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .parallax-section .js-parallax-move {
    transform: translate3d(-50%, 0, 0) !important;
  }
  .parallax-deep .js-parallax-move {
    top: -22%;
    width: 120%;
    height: 145%;
  }
  .parallax-scrub .js-parallax-scrub-move {
    left: 0;
    width: 100%;
    height: 100%;
    object-position: center center;
    transform: none !important;
  }
  .parallax-scrub--cta .js-parallax-scrub-move {
    object-position: center bottom;
  }
}