/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4,
p, ul, ol, dl,
figure, blockquote {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Design tokens ---------- */
:root {
  --color-bg: #F4F8F7;
  --color-teal: #0E6E68;
  --color-teal-dark: #0A5751;
  --color-aqua: #5FE0D0;
  --color-citrus: #F6C453;
  --color-citrus-dark: #E0AC30;
  --color-ink: #122A2E;
  --color-border: #D9E6E3;
  --color-white: #FFFFFF;

  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(18, 42, 46, 0.08);
  --shadow-md: 0 6px 18px rgba(18, 42, 46, 0.10);
  --shadow-lg: 0 16px 36px rgba(18, 42, 46, 0.14);

  --container-max: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  --reveal-duration: 0.6s;
  --reveal-offset: 30px;
  --word-reveal-duration: 0.4s;
  --word-reveal-offset: 20px;
}

/* Scroll-reveal feels sluggish on mobile once you factor in the shorter,
   faster scroll gestures typical there — shorter duration, less travel
   distance, tighter word-stagger (the stagger itself lives in script.js'
   wrapWords, gated on the same 767px breakpoint). */
@media (max-width: 767px) {
  :root {
    --reveal-duration: 0.45s;
    --reveal-offset: 20px;
    --word-reveal-duration: 0.35s;
    --word-reveal-offset: 18px;
  }
}

body {
  font-family: var(--font-body);
  background: linear-gradient(160deg, #ffffff 0%, #e8f5f0 50%, #d0ece4 100%);
  background-attachment: fixed;
  color: var(--color-ink);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.2;
  font-weight: 600;
}

h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  margin-bottom: var(--space-5);
}

h3 {
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* ---------- Ambient background bubbles ---------- */
.bubbles {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* The hero establishes its own stacking context (position + z-index) to
   layer its photo and gradient overlay, which puts it above the page-level
   .bubbles layer. This scoped copy sits inside that context — above the
   photo/overlay, below the hero text — so bubbles keep drifting over it. */
.hero__bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  background-color: var(--bubble-color, var(--color-aqua));
  opacity: 0;
  animation-name: bubbleDrift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

.bubble--highlight {
  box-shadow:
    inset -2px -3px 5px rgba(10, 40, 38, 0.12),
    inset 3px 4px 6px rgba(255, 255, 255, 0.85);
}

@keyframes bubbleDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: var(--op); }
  50%  { transform: translate(var(--drift), -55vh) scale(1.05); }
  92%  { opacity: var(--op); }
  100% { transform: translate(calc(var(--drift) * -0.4), -110vh) scale(0.92); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bubbles,
  .hero__bubbles {
    display: none;
  }
}

@media (max-width: 767px) {
  .bubbles,
  .hero__bubbles {
    display: none;
  }
}

/* Shared section rhythm — full-bleed background, centered inner content */
#ueber-uns,
#vorteile,
#leistungen,
#bewertungen,
#vorher-nachher,
#kontakt {
  padding-block: var(--space-7);
}

.section-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

#vorher-nachher { text-align: center; }

/* ---------- Top bar ---------- */
.topbar {
  background-color: var(--color-teal);
  color: var(--color-white);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--gutter);
  font-size: 0.85rem;
}

.topbar__item {
  white-space: nowrap;
}

.topbar a {
  font-weight: 600;
}

.topbar a:hover {
  color: var(--color-aqua);
}

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--gutter);
}

.navbar__logo a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  font-size: 0.95rem;
  font-weight: 500;
}

.navbar__nav a {
  position: relative;
  padding-block: var(--space-1);
}

.navbar__nav a:hover {
  color: var(--color-teal);
}

.navbar__cta {
  background-color: var(--color-teal);
  color: var(--color-white);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.navbar__cta:hover {
  background-color: var(--color-teal-dark);
}

/* ---------- Mobile navbar toggle (hamburger / X) ---------- */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 110;
}

.navbar__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-teal);
  transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Mobile menu overlay ---------- */
.mobile-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-7);
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(244, 248, 247, 0.97);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: var(--space-8) var(--gutter);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-menu__nav ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.mobile-menu__nav a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-ink);
}

.mobile-menu__nav a:hover {
  color: var(--color-teal);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.mobile-menu__cta {
  background-color: var(--color-teal);
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.9rem 2.25rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.mobile-menu__cta:hover {
  background-color: var(--color-teal-dark);
}

.mobile-menu__phone {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-teal);
}

body.menu-open {
  overflow: hidden;
}

@media (min-width: 768px) {
  .navbar__toggle,
  .mobile-menu {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .navbar__nav,
  .navbar__cta {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .navbar__toggle-bar {
    transition: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
  padding: var(--space-8) var(--gutter);
  text-align: center;
}

.hero__slogan {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  max-width: 38ch;
  margin-inline: auto;
}

.hero__statement {
  max-width: 56ch;
  margin: var(--space-4) auto 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-white);
  opacity: 0.85;
}

.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__cta-phone,
.hero__cta-button {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.hero__cta-phone {
  background-color: var(--color-citrus);
  color: var(--color-ink);
}

.hero__cta-phone:hover {
  background-color: var(--color-citrus-dark);
}

.hero__cta-button {
  background-color: var(--color-teal);
  color: var(--color-white);
}

.hero__cta-button:hover {
  background-color: var(--color-teal-dark);
}

.hero__trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__trust-badges li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-ink);
}

.hero__trust-badges li::before {
  content: '\2713';
  color: var(--color-teal);
  font-weight: 700;
}

/* ---------- Ueber uns ---------- */
#ueber-uns h2 {
  text-align: center;
}

.ueberuns__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.ueberuns__text p + p {
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .ueberuns__layout {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-7);
  }
}

/* ---------- Vorteile ---------- */
#vorteile h2 {
  text-align: center;
}

.vorteile__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.vorteile__list li {
  display: flex;
  flex-direction: column;
}

.vorteile__list li::before {
  content: '\2713';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--color-teal);
  color: var(--color-white);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.vorteile__list p {
  color: var(--color-ink);
  opacity: 0.85;
}

@media (min-width: 600px) {
  .vorteile__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .vorteile__list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

/* ---------- Leistungen ---------- */
#leistungen h2 {
  text-align: center;
}

.leistungen__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  align-items: stretch;
}

.leistung-card {
  display: flex;
  flex-direction: column;
  flex: 0 1 100%;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.leistung-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.leistung-card h3 {
  color: var(--color-teal);
}

.leistung-card p {
  color: var(--color-ink);
  opacity: 0.85;
  font-size: 0.95rem;
}

@media (min-width: 600px) {
  .leistung-card {
    flex-basis: calc(50% - (var(--space-4) / 2));
    max-width: calc(50% - (var(--space-4) / 2));
  }
}

@media (min-width: 900px) {
  .leistung-card {
    flex-basis: calc(33.333% - (var(--space-4) * 2 / 3));
    max-width: calc(33.333% - (var(--space-4) * 2 / 3));
  }
}


/* ---------- Bewertungen ---------- */
#bewertungen h2 {
  text-align: center;
}

.bewertungen__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 700px) {
  .bewertungen__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bewertung-card {
  position: relative;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-aqua);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.bewertung-card p {
  font-size: 1rem;
  color: var(--color-ink);
  font-style: italic;
}

.bewertung-card footer {
  margin-top: var(--space-3);
  font-weight: 600;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-teal);
}

/* ---------- Vorher/Nachher comparison ---------- */
#vorher-nachher h2 {
  margin-bottom: var(--space-2);
}

.vorher-nachher__subtext {
  max-width: 56ch;
  margin: 0 auto var(--space-6);
  color: var(--color-ink);
  opacity: 0.8;
}

.comparison {
  max-width: 900px;
  margin-inline: auto;
}

.comparison__frame {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  user-select: none;
  --reveal: 50%;
}

@media (min-width: 600px) {
  .comparison__frame {
    height: 380px;
  }
}

@media (min-width: 900px) {
  .comparison__frame {
    height: 480px;
  }
}

.comparison__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  pointer-events: none;
}

.comparison__image--before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}

.comparison__image--after {
  z-index: 1;
}

.comparison__label {
  position: absolute;
  top: var(--space-3);
  z-index: 3;
  background-color: rgba(6, 26, 25, 0.6);
  color: var(--color-white);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-full);
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.comparison__label--before {
  left: var(--space-3);
}

.comparison__label--after {
  right: var(--space-3);
}

.comparison__frame.is-interacted .comparison__label {
  opacity: 0;
}

.comparison__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 36px;
  margin-left: -18px;
  z-index: 4;
  cursor: ew-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison__handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px rgba(18, 42, 46, 0.15);
}

.comparison__handle-grip {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-teal);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.comparison__handle:hover .comparison__handle-grip,
.comparison__handle:focus-visible .comparison__handle-grip {
  background-color: var(--color-teal-dark);
  transform: scale(1.08);
}

.comparison__handle:focus-visible {
  outline: none;
}

.comparison__handle:focus-visible .comparison__handle-grip {
  outline: 2px solid var(--color-teal);
  outline-offset: 3px;
}

/* ---------- Kontakt ---------- */
#kontakt h2 {
  text-align: center;
}

.kontakt__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.kontakt__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field label {
  font-weight: 600;
  font-size: 0.9rem;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-ink);
}

.form-field textarea {
  resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-teal);
}

.kontakt__form button[type="submit"] {
  align-self: flex-start;
  background-color: var(--color-teal);
  color: var(--color-white);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: var(--radius-full);
  margin-top: var(--space-2);
}

.kontakt__form button[type="submit"]:hover {
  background-color: var(--color-teal-dark);
}

.kontakt__info address {
  font-style: normal;
  line-height: 1.7;
}

.kontakt__info address a:hover {
  color: var(--color-teal);
}

.kontakt__info h3 {
  margin-top: var(--space-5);
}

.oeffnungszeiten {
  font-size: 0.95rem;
}

.oeffnungszeiten th,
.oeffnungszeiten td {
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.oeffnungszeiten thead th {
  color: var(--color-teal);
  font-family: var(--font-heading);
  font-weight: 600;
}

.oeffnungszeiten__note {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  opacity: 0.85;
}

.social-links {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.social-links a {
  font-weight: 600;
  color: var(--color-teal);
}

.social-links a:hover {
  color: var(--color-teal-dark);
}

@media (min-width: 900px) {
  .kontakt__wrapper {
    grid-template-columns: 1.3fr 1fr;
  }
}

/* ---------- Footer ---------- */
.footer {
  background-color: var(--color-ink);
  color: var(--color-bg);
  padding-block: var(--space-6);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

.footer__col--brand,
.footer__col--links,
.footer__col--legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__tagline {
  font-size: 0.9rem;
  opacity: 0.75;
  max-width: 26ch;
}

.footer__contact {
  font-style: normal;
  line-height: 1.8;
  font-size: 0.95rem;
  max-width: 230px;
  margin-inline: auto;
}

.footer__contact a:hover {
  color: var(--color-aqua);
}

.footer__nav ul,
.footer__legal ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9rem;
}

.footer__nav a:hover,
.footer__legal a:hover {
  color: var(--color-aqua);
}

@media (min-width: 700px) {
  .footer__grid {
    grid-template-columns: repeat(4, auto);
    justify-content: start;
    column-gap: var(--space-7);
    align-items: start;
    text-align: left;
  }

  .footer__col--brand,
  .footer__col--links,
  .footer__col--legal {
    align-items: flex-start;
  }

  .footer__col--contact {
    text-align: left;
  }

  .footer__contact {
    margin-inline: 0;
  }

  .footer__nav ul,
  .footer__legal ul {
    align-items: flex-start;
  }
}

.footer__copyright {
  max-width: var(--container-max);
  margin-inline: auto;
  margin-top: var(--space-6);
  padding-inline: var(--gutter);
  border-top: 1px solid rgba(244, 248, 247, 0.15);
  padding-top: var(--space-4);
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: center;
}

.footer__credit-divider {
  margin-inline: var(--space-2);
  opacity: 0.5;
}

.footer__credit {
  font-size: 0.75rem;
  opacity: 0.85;
}

.footer__credit a {
  text-decoration: underline;
  text-decoration-color: rgba(244, 248, 247, 0.4);
  text-underline-offset: 2px;
}

.footer__credit a:hover {
  color: var(--color-aqua);
  text-decoration-color: currentColor;
}

/* ---------- Logo ---------- */
.logo__icon {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  object-fit: cover;
}

.logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--font-heading);
  line-height: 1.1;
}

.logo__text-line--1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-teal);
}

.logo__text-line--2 {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-teal);
  letter-spacing: 0.02em;
}

.footer__logo .logo__text-line--1,
.footer__logo .logo__text-line--2 {
  color: var(--color-white);
}

/* ---------- Photos ---------- */
/* Sized 124% tall / offset -12% so the JS parallax translate (see
   initParallax in script.js) always has overscan to draw from — the
   photo can shift within that buffer without ever revealing a gap at
   the hero's (overflow: hidden) edges. */
.hero__photo {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  z-index: -2;
  will-change: transform;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 30% 38% at 50% 38%, rgba(3, 12, 11, 0.85) 0%, rgba(3, 12, 11, 0.55) 55%, rgba(3, 12, 11, 0) 100%),
    linear-gradient(165deg, rgba(10, 87, 81, 0.55) 0%, rgba(6, 26, 25, 0.78) 100%);
  z-index: -1;
}

/* The wrapper owns the visible size/shape/shadow and clips overflow;
   the img inside is oversized (124% tall, -12% offset) so the JS
   parallax translate (initParallax in script.js) has room to move
   without ever exposing an edge. Splitting these into two elements
   also keeps this continuous parallax transform off the same element
   that the scroll-reveal fade-up (.reveal/.is-visible) animates —
   applying both to one element would fight over the `transform`
   property since the parallax's inline style always wins over the
   CSS class. */
.ueberuns__photo-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  height: 260px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.ueberuns__photo {
  position: absolute;
  top: -12%;
  left: 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  will-change: transform;
}

@media (min-width: 600px) {
  .ueberuns__photo-wrap {
    height: 360px;
  }
}

@media (min-width: 900px) {
  .ueberuns__photo-wrap {
    max-width: none;
    height: 420px;
  }
}

/* Below 768px this wins over the min-width: 600px bump above (equal
   specificity, later in source) — full width with no max-width cap and
   a shorter, mobile-appropriate height across the whole 0–767px range,
   plus a tighter gap from the text above it. */
@media (max-width: 767px) {
  .ueberuns__photo-wrap {
    width: 100%;
    max-width: none;
    height: 250px;
  }

  .ueberuns__layout {
    gap: 24px;
  }
}

.leistung-card__icon {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-3);
  transition: transform 0.25s ease, stroke 0.25s ease;
}

.leistung-card:hover .leistung-card__icon {
  transform: scale(1.12);
  stroke: var(--color-aqua);
}

/* ---------- Navbar scroll state ---------- */
.navbar {
  transition: box-shadow 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
}

.navbar.is-scrolled {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Hero ambient background motion ---------- */
.hero::after {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(95, 224, 208, 0.20) 0%, transparent 58%),
    radial-gradient(circle at 78% 62%, rgba(14, 110, 104, 0.16) 0%, transparent 55%),
    radial-gradient(circle at 48% 88%, rgba(95, 224, 208, 0.14) 0%, transparent 50%);
  animation: heroDrift 26s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-1.5%, 2%) scale(1.04); }
  66% { transform: translate(1.5%, -1.5%) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::after {
    animation: none;
  }
}

/* ---------- Hero wipe-the-glass effect ---------- */
.hero__headline-wrap {
  position: relative;
  display: inline-block;
}

.hero__fog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: none;
  border-radius: var(--radius-md);
}

.hero__hint {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-white);
  opacity: 0.7;
  white-space: nowrap;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hero__hint--hidden {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero__fog,
  .hero__hint {
    display: none;
  }
}

/* ---------- Scroll-reveal (uniform fade-up) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out);
}

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

/* .hero__statement has a deliberately muted resting opacity, plus a
   soft blur-to-sharp transition layered on top of the usual fade-up. */
.hero__statement {
  filter: blur(4px);
}

.hero__statement.reveal {
  transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out), filter var(--reveal-duration) var(--ease-out);
}

.hero__statement.is-visible {
  opacity: 0.85;
  filter: blur(0);
}

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

  .hero__statement {
    opacity: 0.85;
    filter: none;
  }
}

/* ---------- Heading word-stagger ---------- */
/* Section headings split their text into one span per word at runtime
   (see wrapWords() in script.js); each word fades up with a small delay
   after the previous one, triggered by the same scroll-reveal observer. */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--word-reveal-offset));
  transition: opacity var(--word-reveal-duration) var(--ease-out), transform var(--word-reveal-duration) var(--ease-out);
}

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

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

/* ---------- Hero headline gradient sheen ---------- */
/* A slow, barely-noticeable white-to-aqua sheen drifting across the main
   headline text, purely decorative and independent of the wipe effect.
   Uses white rather than the dark teal brand color so the headline stays
   legible against the photo backdrop even before any wipe interaction. */
.hero__slogan {
  background-image: linear-gradient(100deg, #FFFFFF 30%, var(--color-aqua) 50%, #FFFFFF 70%);
  background-size: 250% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: heroSheen 8s linear infinite;
}

@keyframes heroSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slogan {
    animation: none;
    background-position: 50% 50%;
  }
}

/* ---------- Animated link underlines ---------- */
/* A thin bar that draws in from left to right on hover/focus instead of
   a static text-decoration underline. */
.navbar__nav a,
.footer__nav a,
.footer__legal a,
.social-links a,
.footer__contact a,
.kontakt__info address a,
.topbar a {
  position: relative;
}

.navbar__nav a::after,
.footer__nav a::after,
.footer__legal a::after,
.social-links a::after,
.footer__contact a::after,
.kontakt__info address a::after,
.topbar a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.navbar__nav a:hover::after,
.navbar__nav a:focus-visible::after,
.footer__nav a:hover::after,
.footer__nav a:focus-visible::after,
.footer__legal a:hover::after,
.footer__legal a:focus-visible::after,
.social-links a:hover::after,
.social-links a:focus-visible::after,
.footer__contact a:hover::after,
.footer__contact a:focus-visible::after,
.kontakt__info address a:hover::after,
.kontakt__info address a:focus-visible::after,
.topbar a:hover::after,
.topbar a:focus-visible::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .navbar__nav a::after,
  .footer__nav a::after,
  .footer__legal a::after,
  .social-links a::after,
  .footer__contact a::after,
  .kontakt__info address a::after,
  .topbar a::after {
    transition: none;
  }
}

/* ---------- Contact form success state ---------- */
.kontakt__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-7) var(--space-4);
}

.kontakt__success-circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transition: stroke-dashoffset 0.6s ease;
}

.kontakt__success-check {
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  transition: stroke-dashoffset 0.4s ease 0.5s;
}

.kontakt__success.is-visible .kontakt__success-circle,
.kontakt__success.is-visible .kontakt__success-check {
  stroke-dashoffset: 0;
}

.kontakt__success-text {
  font-weight: 600;
  color: var(--color-teal);
  font-size: 1.05rem;
}

@media (prefers-reduced-motion: reduce) {
  .kontakt__success-circle,
  .kontakt__success-check {
    transition: none;
  }
}

/* ---------- Button ripple effect ---------- */
.hero__cta-phone,
.hero__cta-button,
.navbar__cta,
.mobile-menu__cta,
.kontakt__form button[type="submit"] {
  position: relative;
  overflow: hidden;
}

/* Light-background buttons (citrus) get a teal-tinted ripple instead of
   the default white one used on dark/teal buttons. */
.hero__cta-phone {
  --ripple-color: rgba(14, 110, 104, 0.15);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background-color: var(--ripple-color, rgba(255, 255, 255, 0.35));
  pointer-events: none;
  animation: rippleExpand 0.6s ease-out;
}

@keyframes rippleExpand {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

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

/* ---------- Custom cursor (desktop / fine-pointer only) ---------- */
/* initCustomCursor (script.js) only creates .custom-cursor and adds
   the html.custom-cursor-active class when both (pointer: fine) and
   prefers-reduced-motion: no-preference hold, so the blanket
   cursor: none below never applies on touch devices or when motion
   is reduced — the native cursor is the fallback in both cases. */
html.custom-cursor-active,
html.custom-cursor-active * {
  cursor: none !important;
}

/* Text-entry fields keep the native I-beam — the custom cursor is a
   navigation/click affordance, not a replacement for the text-insertion
   caret cue people expect when typing. */
html.custom-cursor-active input,
html.custom-cursor-active textarea,
html.custom-cursor-active select {
  cursor: auto !important;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), margin 0.25s var(--ease-out), opacity 0.2s ease;
}

.custom-cursor.is-visible {
  opacity: 1;
}

/* Hidden while over a text field so only the native I-beam shows. */
.custom-cursor.is-native {
  opacity: 0 !important;
}

.custom-cursor.is-hover {
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
}

.custom-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}

.custom-cursor__droplet {
  opacity: 1;
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom-cursor__sparkle {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.6) rotate(-25deg);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.custom-cursor.is-hover .custom-cursor__droplet {
  opacity: 0;
  transform: scale(0.6);
}

.custom-cursor.is-hover .custom-cursor__sparkle {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ---------- Page transition flash (enhanced anchor-link scrolling) ---------- */
/* A very brief white flash masks the instant scroll jump performed by
   initSmoothSectionTransitions (script.js) between initiating an
   in-page anchor click and the target section appearing, so the jump
   itself is never seen — only the fade in/out is. */
.page-transition-flash {
  position: fixed;
  inset: 0;
  background-color: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 9998;
  transition: opacity 0.2s ease;
}

.page-transition-flash.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}