:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
}

.bg-soft-gradient {
  background: linear-gradient(135deg, #006872 0%, #00838f 100%);
}

.brand-logo {
  align-items: center;
  display: inline-flex;
  gap: 0.55rem;
  line-height: 1;
}

.brand-logo__mark {
  display: block;
  height: 1.35rem;
  object-fit: contain;
  width: auto;
}

.brand-logo__wordmark {
  display: block;
  filter: brightness(0) saturate(100%) invert(23%) sepia(33%) saturate(1382%) hue-rotate(148deg) brightness(93%) contrast(95%);
  height: 1.35rem;
  object-fit: contain;
  width: auto;
}

.brand-logo--footer .brand-logo__mark,
.brand-logo--footer .brand-logo__wordmark {
  height: 1.25rem;
}

.hero-rotator {
  display: inline-block;
  min-width: 15.5ch;
  white-space: nowrap;
}

.hero-rotator--fade {
  transition: opacity 240ms ease, transform 240ms ease;
}

.hero-rotator--fade.is-changing {
  opacity: 0;
  transform: translateY(0.12em);
}

.hero-rotator--type.is-typing::after {
  animation: hero-caret 900ms steps(1, end) infinite;
  content: "";
  border-right: 0.08em solid currentColor;
  margin-left: 0.05em;
}

.reveal,
.reveal-cta {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 650ms cubic-bezier(.22, 1, .36, 1),
    transform 650ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 250ms ease,
    background-color 220ms ease,
    color 220ms ease,
    border-color 250ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible,
.reveal-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-image {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 700ms cubic-bezier(.22, 1, .36, 1),
    transform 700ms cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-image.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-card {
  will-change: transform, opacity;
}

.reveal-card:hover {
  box-shadow: 0 22px 55px rgba(28, 28, 25, 0.09);
  transform: translateY(-3px);
}

.reveal-card.is-visible:hover {
  transform: translateY(-3px);
}

.reveal-cta.is-visible:hover {
  box-shadow: 0 18px 38px rgba(0, 104, 114, 0.16);
  transform: translateY(-2px) scale(1.015);
}

.motion-photo {
  overflow: hidden;
  transform: rotate(var(--photo-rotate, 0deg));
  transition:
    transform 520ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 520ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.motion-photo > img,
.motion-photo picture > img {
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.motion-photo:hover {
  box-shadow: 0 28px 65px rgba(28, 28, 25, 0.14);
  transform: translateY(-4px) rotate(var(--photo-hover-rotate, 0deg)) scale(1.01);
}

.motion-photo:hover > img,
.motion-photo:hover picture > img {
  transform: scale(1.035);
}

.value-flow-bg {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.value-flow-bg::before,
.value-flow-bg::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.value-flow-bg::before {
  background-image:
    radial-gradient(circle at 21% 58%, rgba(0, 125, 134, 0.16) 0 3px, transparent 4px),
    radial-gradient(circle at 38% 48%, rgba(245, 166, 35, 0.18) 0 3px, transparent 4px),
    radial-gradient(circle at 54% 61%, rgba(0, 125, 134, 0.14) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 48%, rgba(245, 166, 35, 0.16) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 57%, rgba(0, 125, 134, 0.14) 0 3px, transparent 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M60 215 C185 145 265 150 370 185 S575 250 700 178 S945 98 1140 168' stroke='%23007d86' stroke-opacity='.16' stroke-width='3'/%3E%3Cpath d='M92 148 C244 218 348 228 470 176 S692 91 815 146 S1012 255 1135 202' stroke='%23f5a623' stroke-opacity='.13' stroke-width='2.4'/%3E%3Cpath d='M125 274 C295 268 395 230 520 226 S756 252 895 205 S1050 142 1170 150' stroke='%2318243d' stroke-opacity='.08' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size:
    auto,
    auto,
    auto,
    auto,
    auto,
    min(1180px, 108vw) auto;
  opacity: 0.95;
  animation: value-flow-breathe 18s ease-in-out infinite alternate;
}

.value-flow-bg::after {
  background-image:
    linear-gradient(102deg, transparent 18%, rgba(0, 125, 134, 0.11) 30%, rgba(245, 166, 35, 0.10) 46%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.78), transparent 32%);
  filter: blur(10px);
  opacity: 0;
  transform: translateX(-34%);
  animation: value-flow-pulse 14s cubic-bezier(.22, 1, .36, 1) infinite;
}

.value-flow-bg > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 640px) {
  .hero-rotator {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .reveal-cta {
    max-width: 100%;
    white-space: normal;
  }

  .motion-photo,
  .motion-photo:hover {
    transform: none;
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  .hero-rotator {
    min-width: 0;
    white-space: normal;
  }
}

@keyframes hero-caret {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}

.section {
  padding: 5rem 0;
}

.eyebrow {
  color: #007d86;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(24, 36, 61, 0.08);
}

.metric {
  border-left: 3px solid #00c2cb;
  padding-left: 1rem;
}

.cookie-consent {
  bottom: 1rem;
  left: 1rem;
  max-width: 34rem;
  position: fixed;
  right: 1rem;
  z-index: 60;
}

.cookie-consent__panel {
  background: #ffffff;
  border: 1px solid rgba(24, 36, 61, 0.16);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(24, 36, 61, 0.22);
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
}

.cookie-consent__option {
  align-items: flex-start;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem;
}

.cookie-consent__option input {
  margin-top: 0.25rem;
}

.cookie-consent__option span {
  display: grid;
  gap: 0.15rem;
}

.cookie-consent__option small {
  color: #5e6b7a;
  line-height: 1.45;
}

.form-message {
  border-radius: 8px;
  display: none;
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.9rem 1rem;
}

.form-message.is-visible {
  display: block;
}

.form-message.is-success {
  background: #e8fbf7;
  color: #0f766e;
}

.form-message.is-error {
  background: #fff1f2;
  color: #be123c;
}

.mobile-nav summary {
  list-style: none;
}

.mobile-nav summary::-webkit-details-marker {
  display: none;
}

.mobile-nav__panel {
  animation: mobile-nav-in 140ms ease-out;
}

@keyframes mobile-nav-in {
  from {
    opacity: 0;
    transform: translateY(-0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  nav {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  nav > div > a[href="kontakt.html"] {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 3.5rem 0;
  }

  .cookie-consent {
    bottom: 0;
    left: 0;
    right: 0;
  }

  .cookie-consent__panel {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

@keyframes value-flow-breathe {
  from {
    opacity: 0.78;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 1;
    transform: translateY(-6px) scale(1.012);
  }
}

@keyframes value-flow-pulse {
  0%,
  24% {
    opacity: 0;
    transform: translateX(-36%);
  }

  46% {
    opacity: 0.72;
  }

  76%,
  100% {
    opacity: 0;
    transform: translateX(36%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-cta,
  .reveal-image {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-card:hover,
  .reveal-card.is-visible:hover,
  .reveal-cta:hover,
  .motion-photo,
  .motion-photo:hover,
  .motion-photo > img,
  .motion-photo:hover > img {
    transform: none;
  }

  .value-flow-bg::before,
  .value-flow-bg::after {
    animation: none;
  }
}

/* =========================================================================
   Enhancements (Branch website-improvements) – aufbauend auf dem Bestand,
   ruhig und markenkonform. Alles unten ist prefers-reduced-motion-aware.
   ========================================================================= */

/* Dezente Scroll-Fortschrittsleiste am oberen Rand */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #006872 0%, #00838f 60%, #f5a623 100%);
  z-index: 60;
  pointer-events: none;
  will-change: transform;
}

/* Schwebende Nav verdichtet sich beim Scrollen minimal */
nav.is-scrolled {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  background-color: rgba(252, 249, 244, 0.85);
  box-shadow: 0 14px 32px rgba(28, 28, 25, 0.12);
}

/* Primaere CTAs: sanfter Glanzlauf beim Hover (Originalfarben, nur Position wandert) */
a.bg-soft-gradient,
button.bg-soft-gradient {
  background-image: linear-gradient(110deg, #006872 0%, #00838f 50%, #006872 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  transition:
    background-position 650ms cubic-bezier(.22, 1, .36, 1),
    transform 200ms ease,
    box-shadow 250ms ease;
}

a.bg-soft-gradient:hover,
button.bg-soft-gradient:hover {
  background-position: 100% 50%;
}

/* Count-up-Kennzahlen: stabile Ziffernbreite, kein Springen waehrend der Animation */
[data-countup] {
  font-variant-numeric: tabular-nums;
}

/* Skip-Link: erst bei Tastatur-Fokus sichtbar */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 80;
  transform: translateY(-160%);
  transition: transform 180ms ease;
  background: #006872;
  color: #ffffff;
  padding: 0.65rem 1.1rem;
  border-radius: 0.85rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(28, 28, 25, 0.18);
}

.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }

  a.bg-soft-gradient,
  button.bg-soft-gradient {
    transition: none;
  }

  a.bg-soft-gradient:hover,
  button.bg-soft-gradient:hover {
    background-position: 0% 50%;
  }

  .skip-link {
    transition: none;
  }
}