/* ===================================================================
   0. TOKENS
=================================================================== */
 :root {
   --teal: #134f59;
   --teal-2: #0d3c44;
   --lime: #b3d335;
   --lime-2: #9bbc3a;
   --lime-2-t: rgba(155, 188, 58, 0.3);
   --orange: #fb7c4d;
   --orange-2: #f16336;
   --bg-light: #eef0f1;
   --ink: #26383e;
   --muted: #66757a;
   --white: #ffffff;
   --radius: 0px;
   --gap: 2rem;
   --container: 1200px;
   --pad-x: clamp(1.25rem, 6vw, 6.5rem);
   --section-y: clamp(2.75rem, 6vw, 6.5rem);
   --ff: 'Open Sans', sans-serif;
   --ease: cubic-bezier(.4, 0, .2, 1);
 }

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v44-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



 /* ===================================================================
   1. RESET & BASE
=================================================================== */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
   overflow-x: hidden;
 }

 body {
   margin: 0;
   font-family: var(--ff);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.7;
   color: var(--muted);
   background: var(--white);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
 }

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

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

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

 button {
   font: inherit;
   cursor: pointer;
   border: none;
   background: none;
 }

 /* Überschriften: EINE Stelle für alle Größen/Gewichte */
 h1,
 h2,
 h3 {
   font-family: var(--ff);
   color: var(--teal);
   font-weight: 700;
   line-height: 1.3;
   margin: 0 0 1rem;
 }

 h1 {
   font-size: clamp(1.85rem, 3.4vw, 2.5rem);
 }

 h2 {
   font-size: clamp(1.45rem, 2.3vw, 1.9rem);
   font-weight: 400;
 }

 h3 {
   font-size: 1.05rem;
   font-weight: 400;
   text-transform: uppercase;
   letter-spacing: .04em;
   padding-bottom: .7rem;
   position: relative;
   display: inline-block;
 }

 h3::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 1.9rem;
   height: 2px;
   background: var(--lime);
 }

 p {
   margin: 0 0 1rem;
   max-width: 67ch;
   font-weight: 400;
 }

 p:last-child {
   margin-bottom: 0;
 }

 strong {
   color: inherit;
   font-weight: 700;
 }

 /* ===================================================================
   2. LAYOUT-GRUNDBAUSTEINE (bewusst wenige, dafür überall wiederverwendet)
=================================================================== */
 .container {
   max-width: var(--container);
   margin-inline: auto;
   padding-inline: var(--pad-x);
 }

 .section {
   padding-block: var(--section-y);
 }

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



 .cards {
   display: flex;
   flex-wrap: wrap;
   gap: var(--gap);
 }

 .cards>* {
   flex: 1 1 280px;
 }

 /* Split: EIN Muster für alle "Bild links/rechts + Inhalt daneben"-Sektionen.
   Flexbox statt verschachteltem Grid, damit sich Layouts nie gegenseitig stören. */
 .split {
   display: flex;
   flex-wrap: wrap;
 }

 .split__media {
   flex: 1 1 480px;
 }

 .split__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .split__body {
   flex: 1 1 480px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 2.75rem var(--pad-x);
 }

 /* Modifier: Medienspalte nimmt nur ~1/3 ein, Inhalt den Rest */
 .split--narrow .split__media {
   flex: 1 1 33%;
 }

 .split--narrow .split__body {
   flex: 1 1 64%;
 }

 #intro .offset {
   max-width: 640px;
   margin-bottom: 2rem;
   margin-top: 3rem;
 }

 .intro__team-img {
   margin-top: 2.5rem;
 }

 .intro__team-img img {
   width: 100%;
   aspect-ratio: 5/2;
   object-fit: cover;
   object-position: center;
 }

 .team-header {
   text-align: center;
   max-width: 640px;
   margin-inline: auto;
   margin-bottom: 2.5rem;
 }

 .team-header p {
   max-width: none;
 }



 .bg-teal {
   background: var(--teal);
   color: rgba(255, 255, 255, .82);
 }

 .bg-teal h1,
 .bg-teal h2,
 .bg-teal h3 {
   color: var(--white);
 }

 .bg-teal p {
   color: rgba(255, 255, 255, .78);
 }

 .bg-light {
   background: var(--bg-light);
 }

 .bg-lime {
   background: var(--lime);
   color: var(--teal-2);
 }

 .bg-lime p {
   color: var(--teal-2);
 }

 /* ===================================================================
   3. TYPO-ELEMENTE
=================================================================== */
 .eyebrow {
   display: block;
   font-family: var(--ff);
   text-transform: uppercase;
   letter-spacing: .09em;
   font-size: 1rem;
   font-weight: 400;
   color: var(--lime);
   margin-bottom: .6rem;
 }

 .bg-teal .eyebrow {
   color: var(--lime);
 }

 .heading-underline {
   position: relative;
   display: inline-block;
   padding-bottom: .5rem;
 }

 .heading-underline::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 55%;
   height: 2px;
   background: var(--lime);
 }

 /* ===================================================================
   4. BUTTONS
=================================================================== */
 .btn {
   display: inline-block;
   padding: .95rem 2.1rem;
   font-family: var(--ff);
   font-weight: 600;
   font-size: .92rem;
   border-radius: var(--radius);
   transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
 }

 .btn--orange {
   background: var(--orange);
   color: var(--white);
 }

 .btn--orange:hover {
   background: var(--orange-2);
   transform: translateY(-3px);
   box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .4);
 }

 /* ===================================================================
   5. BILDPLATZHALTER  (eine Klasse für jedes Platzhalterbild)
=================================================================== */
 .ph {
   position: relative;
   width: 100%;
   min-height: 180px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: repeating-linear-gradient(135deg, #dde2e3 0 16px, #e9ecec 16px 32px);
 }

 .ph::after {
   content: "";
   position: absolute;
   inset: 8px;
   border: 1px dashed rgba(19, 79, 89, .25);
   pointer-events: none;
 }

 .ph__inner {
   position: relative;
   z-index: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .5rem;
   padding: .75rem 1.25rem;
   text-align: center;
 }

 .ph__inner svg {
   width: 32px;
   height: 32px;
   stroke: #8b9598;
   fill: none;
 }

 .ph__inner span {
   font-size: .72rem;
   font-weight: 600;
   letter-spacing: .02em;
   color: #697578;
 }

 /* ===================================================================
   6. ICON-BADGE (Kreis für Leistungs-Karten)
=================================================================== */
 .icon-badge {
   width: 66px;
   height: 66px;
   border-radius: 50%;
   border: 1.5px solid var(--lime);
   background: var(--teal);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .icon-badge svg {
   width: 35px;
   height: 35px;
   stroke: var(--white);
   fill: none;
 }

 /* ===================================================================
   7. HEADER
=================================================================== */
 .topbar {
   height: 6px;
   background: var(--orange);
 }

 #stickyWrap {
   position: relative;
   z-index: 50;
 }

 #stickyWrap.is-sticky {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   width: 100%;
   animation: slideDown .35s var(--ease) both;
 }

 @keyframes slideDown {
   from { transform: translateY(-100%); }
   to   { transform: translateY(0); }
 }

 #headerSpacer {
   height: 0;
 }

 .site-header {
   position: relative;
   z-index: 50;
   background: var(--white);
   transition: box-shadow .3s var(--ease);
 }

 .site-header.is-scrolled {
   box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .28);
 }

 .header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 88px;
   gap: 1rem;
 }

 .logo {
   font-size: 1.05rem;
   font-weight: 700;
   letter-spacing: .04em;
   color: var(--ink);
   line-height: 1;
   position: relative;
   padding-bottom: .35rem;
   white-space: nowrap;
   text-transform: uppercase;
 }

 .logo::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 2px;
   background: var(--lime);
 }

 .main-nav {
   display: flex;
   align-items: center;
   gap: 1.75rem;
 }

 .main-nav ul {
   display: flex;
   gap: 2.25rem;
   align-items: center;
 }

 .main-nav a {
   font-size: 1.02rem;
   font-weight: 600;
   color: var(--teal-2);
   line-height: 1;
   padding-bottom: .35rem;
   position: relative;
 }

 .main-nav::after {
   content: "";
   flex-shrink: 0;
   width: 100px;
   height: 100px;
   background: url('../images/logo.webp') no-repeat center / contain;
   align-self: flex-end;
   transform: translateY(16px);
 }

 .main-nav a.is-active::after,
 .main-nav a:hover::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 2px;
   background: var(--lime);
 }

 .nav-toggle {
   display: none;
   width: 32px;
   height: 24px;
   position: relative;
   flex-shrink: 0;
   z-index: 51;
 }

 .nav-toggle span,
 .nav-toggle span::before,
 .nav-toggle span::after {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--teal);
   transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
 }

 .nav-toggle span {
   top: 12px;
 }

 .nav-toggle span::before {
   top: -9px;
 }

 .nav-toggle span::after {
   top: 9px;
 }

 /* Burger -> X: beide Linien treffen sich exakt in der Button-Mitte (12px) */
 /* background statt opacity: opacity würde auch die ::before/::after-Kinder
   (also die sichtbaren X-Linien) mit ausblenden, da sie zum selben Element gehören. */
 .nav-toggle.is-open span {
   background: transparent;
 }

 .nav-toggle.is-open span::before {
   transform: translateY(9px) rotate(45deg);
 }

 .nav-toggle.is-open span::after {
   transform: translateY(-9px) rotate(-45deg);
 }




 /* ===================================================================
   8. HERO
=================================================================== */
 .hero {
   position: relative;
   color: var(--white);
 }

 .hero__media {
   width: 100%;
   position: relative;
   overflow: hidden;
   aspect-ratio: 16/10;
   min-height: 380px;
   max-height: 100vh;
 }

 .hero__slide {
   position: absolute;
   inset: 0;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   opacity: 0;
   animation: hero-slide 18s infinite;
 }

 .hero__slide:nth-child(1) {
   animation-delay: 0s;
 }

 .hero__slide:nth-child(2) {
   animation-delay: 6s;
 }

 .hero__slide:nth-child(3) {
   animation-delay: 12s;
 }

 @keyframes hero-slide {
   0% {
     opacity: 0;
   }

   8% {
     opacity: 1;
   }

   30% {
     opacity: 1;
   }

   38% {
     opacity: 0;
   }

   100% {
     opacity: 0;
   }
 }

 .hero__content {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 9rem;
   max-width: var(--container);
   margin-inline: auto;
   padding-inline: var(--pad-x);
   animation: fade-up .8s var(--ease) both;
   text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
 }

 .hero__content .eyebrow {
   font-size: 1.5rem;
   color: #fff;
 }


 .hero h1 {
   color: var(--white);
   max-width: 26ch;
   margin: 0;
 }

 .hero h1 u {
  text-decoration: none;
  border-bottom: 2px solid var(--lime)
 }

 .hero__fabs {
   position: fixed;
   z-index: 99;
   right: 0;
   top: 36%;
   display: flex;
   flex-direction: column;
   gap: .5rem;
 }

 .hero__fabs a {
   width: 56px;
   height: 56px;
   aspect-ratio: 1/1;
   flex-shrink: 0;
   background: var(--lime);
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .2s var(--ease);
 }

 .hero__fabs a:hover {
   background: var(--orange);
 }

 .hero__fabs svg {
   width: 24px;
   height: 24px;
   stroke: var(--white);
   fill: none;
 }

 .hero__bar {
   position: relative;
 }

 .hero__bar-box {
   max-width: calc(var(--container) - 2px);
   margin-inline: auto;
   background: var(--teal);
   padding: 2.1rem var(--pad-x);
 }

 .hero__bar ul {
   display: flex;
   flex-wrap: wrap;
 }

 .hero__bar li {
   flex: 1 1 140px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: .65rem;
   text-align: center;
   padding-inline: .5rem;
 }

 .hero__bar svg {
   width: 46px;
   height: 46px;
   stroke: var(--lime);
   fill: none;
 }

 .hero__bar span {
   font-size: .84rem;
   font-weight: 600;
   color: var(--white);
 }

 .parallax {
   background: linear-gradient(90deg, var(--lime-2-t), var(--lime-2-t)), url('../images/gepflegter-garten.webp')no-repeat center/cover;
   background-attachment: fixed;
 }

 .parallax-2 {
   background: linear-gradient(90deg, var(--lime-2-t), var(--lime-2-t)), url('../images/moderne-wohnanlage-mit-gruen.webp')no-repeat center/cover;
   background-attachment: fixed;
 }

 /* Ab Desktop-Breite überlappt die Box den Header um 50% ihrer eigenen Höhe.
   Da Fabs/Content jetzt im Bild selbst verankert sind (nicht mehr im ganzen Header),
   bleibt deren Position stabil, egal ob die Box hier im Fluss oder absolut ist. */


 @keyframes fade-up {
   from {
     opacity: 0;
     transform: translateY(18px);
   }

   to {
     opacity: 1;
     transform: none;
   }
 }

 /* ===================================================================
   9. SCROLL-REVEAL (eine Regel für alle Sektionen)
=================================================================== */
 .reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .7s var(--ease), transform .7s var(--ease);
 }

 .reveal.is-visible {
   opacity: 1;
   transform: none;
 }

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

   .hero__content {
     animation: none;
   }

   .hero__slide {
     animation: none;
     opacity: 1;
   }

   .hero__slide:not(:first-child) {
     display: none;
   }
 }

 /* ===================================================================
   10. INTRO
=================================================================== */

 /* ===================================================================
   11. BILD-BANNER MIT OVERLAY-TEXT
=================================================================== */
 .banner {
   position: relative;
   color: var(--white);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   min-height: 50vh;
 }

 .banner__content {
   position: relative;
   z-index: 1;
   text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
 }

 .banner h2 {
   color: var(--white);
   margin: 0;
   font-size: clamp(1.6rem, 2.8vw, 2.3rem);
 }

 .banner .eyebrow {
   color: var(--white);
   font-size: 1.05rem;
 }

 /* ===================================================================
   12. LEISTUNGEN
=================================================================== */
 .services {
   position: relative;
   overflow: hidden;
 }

 .services__bg {
   position: absolute;
   top: 45px;
   right: 0;
   bottom: 75px;
   width: 34%;
   z-index: 0;
 }

 .services__bg img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }

 .services__intro {
   position: relative;
   z-index: 1;
   /* Platz für das rechts liegende Bild reservieren, damit der Text es nie überlappt.
   min() statt reinem Prozentwert: die Reservierung wächst mit dem Bild mit,
   deckelt sich aber bei ca. 1200px Breite – sonst würde sie auf sehr breiten
   Screens (bezogen auf die volle, unbegrenzte Sektionsbreite) den Text zusammenquetschen. */
   padding-right: min(38%, 420px);
 }

 .services__intro p {
   max-width: none;
 }

 .services__cards-wrap {
   position: relative;
   z-index: 1;
   margin-top: 4rem;
 }

 .service-card {
   position: relative;
   background: var(--teal-2);
   border: 1px solid rgba(179, 211, 53, .5);
   padding: 2.75rem 1.75rem 1.75rem;
   margin-bottom: 1rem;
 }

 .service-card .icon-badge {
   position: absolute;
   top: 0;
   left: 2rem;
   transform: translateY(-50%);
 }

 .service-card h3 {
   color: var(--white);
 }

 .service-card p {
   font-size: .92rem;
   max-width: none;
 }

 .cards-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--gap);
 }

 .service-card--featured {
   background: var(--lime);
   border-color: var(--lime);
 }

 .cards-grid .service-card:nth-child(3) { grid-column: 1; grid-row: 2; }
 .cards-grid .service-card:nth-child(4) { grid-column: 2; grid-row: 2; }
 .cards-grid .service-card:nth-child(5) { grid-column: 3; grid-row: 2; }

 .service-card--featured h3,
 .service-card--featured p,
 .service-card--featured li {
   color: var(--teal-2);
 }

 .service-card--featured h3::after {
   background: var(--teal-2);
 }

 .service-card ul {
   margin: 0;
 }

 .service-card li {
   position: relative;
   padding-left: 1.1rem;
   margin-bottom: .5rem;
   font-size: .92rem;
 }

 .service-card li::before {
   content: "–";
   position: absolute;
   left: 0;
 }

 .service-card li:last-child {
   margin-bottom: 0;
 }

 /* ===================================================================
   13. CTA-STREIFEN
=================================================================== */
 .cta-strip {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
 }

 .cta-strip p {
   font-weight: 400;
   color: var(--ink);
   text-transform: uppercase;
   letter-spacing: .03em;
   font-size: 1.1rem;
   max-width: none;
 }

 /* ===================================================================
   14. VORTEILE
=================================================================== */
 .adv-row {
   display: flex;
   flex-wrap: wrap;
 }

 .adv-row>* {
   flex: 1 1 300px;
 }

 .adv-photo {
   min-height: 340px;
 }

 .adv-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 /* Rechte Seite: blaue Textbox oben, orangene Icon-Liste darunter */
 .adv-side {
   display: flex;
   flex-direction: column;
 }

 .adv-panel {
   padding: 2.5rem var(--pad-x);
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex: 1.4 1 0;
 }

 .adv-perks {
   background: var(--orange);
   padding: 2.25rem var(--pad-x);
   flex: 1 1 0;
   display: flex;
   align-items: center;
 }

 .adv-perks ul {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.4rem 1.5rem;
   width: 100%;
 }



 .adv-perks li {
   display: flex;
   align-items: center;
   gap: .75rem;
 }

 .adv-perks svg {
   width: 26px;
   height: 26px;
   stroke: var(--white);
   fill: none;
   flex-shrink: 0;
 }

 .adv-perks span {
   color: var(--white);
   font-weight: 600;
   font-size: .88rem;
   line-height: 1.3;
 }

 /* ===================================================================
   15. REFERENZEN-GALERIE
=================================================================== */
 .ref-layout {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 2rem 0;
 }

 .ref-text {
   flex: 1 1 380px;
   padding-left: max(var(--pad-x), calc((100% - var(--container)) / 2 + var(--pad-x)));
   padding-right: 1.5rem;
 }

 /* Fließtext etwas höher setzen – nur solange Text und Galerie nebeneinander stehen */


 /* Sobald Text und Galerie untereinanderstehen, braucht die Galerie seitliches Padding,
   damit sie nicht am Bildschirmrand klebt. */


 .ref-gallery__track {
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }

 .ref-gallery__track::-webkit-scrollbar {
   display: none;
   height: 0;
 }

 .gallery-thumb {
   position: relative;
   flex: 0 0 calc((100% - 2rem) / 3);
   aspect-ratio: 3/4.3;
   overflow: hidden;
   cursor: pointer;
   scroll-snap-align: start;
   background: var(--bg-light);
 }



 .gallery-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .35s var(--ease);
 }

 .gallery-thumb:hover img {
   transform: scale(1.05);
 }

 /* Pfeile liegen über der Galerie, nur bei Hover sichtbar */
 .ref-nav-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 2;
   width: 42px;
   height: 42px;
   background: rgba(255, 255, 255, .9);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s var(--ease), visibility .25s;
 }

 .ref-gallery:hover .ref-nav-btn {
   opacity: 1;
   visibility: visible;
 }

 .ref-nav-btn:hover {
   background: var(--white);
 }

 .ref-nav-btn--prev {
   left: .75rem;
 }

 .ref-nav-btn--next {
   right: .75rem;
 }

 .ref-nav-btn svg {
   width: 16px;
   height: 16px;
   stroke: var(--teal);
   fill: none;
 }

 .lightbox {
   position: fixed;
   inset: 0;
   background: rgba(10, 22, 22, .92);
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity .25s var(--ease), visibility .25s;
 }

 .lightbox.is-open {
   opacity: 1;
   visibility: visible;
 }

 .lightbox img {
   max-width: 82vw;
   max-height: 86vh;
   width: auto;
   height: auto;
   object-fit: contain;
 }

 .lightbox__close {
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
   width: 44px;
   height: 44px;
   background: rgba(255, 255, 255, .12);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .lightbox__close svg {
   width: 18px;
   height: 18px;
   stroke: var(--white);
   fill: none;
 }

 .lightbox__nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 50px;
   height: 50px;
   background: rgba(255, 255, 255, .12);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .lightbox__nav:hover {
   background: rgba(255, 255, 255, .22);
 }

 .lightbox__nav--prev {
   left: 1.5rem;
 }

 .lightbox__nav--next {
   right: 1.5rem;
 }

 .lightbox__nav svg {
   width: 20px;
   height: 20px;
   stroke: var(--white);
   fill: none;
 }

 /* Platzhalter-Fläche unten in der Sektion, exakt so hoch wie das section-Padding-bottom –
   Reserviert für ein späteres Hintergrundbild. */
 #referenzen {
   position: relative;
 }

 #referenzen::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: var(--section-y);
   background: #e4e7e8;
   z-index: -1;
 }

 /* ===================================================================
   16. KONTAKT
=================================================================== */
 .checklist {
   display: flex;
   flex-wrap: wrap;
   gap: 1.1rem 2rem;
   margin-top: 1.4rem;
 }

 .checklist li {
   display: flex;
   align-items: center;
   gap: .55rem;
   font-weight: 400;
   color: var(--white);
   font-size: .92rem;
 }

 .checklist svg {
   width: 15px;
   height: 15px;
   stroke: var(--lime);
   fill: none;
   flex-shrink: 0;
 }

 /* ===================================================================
   17. FOOTER
=================================================================== */
 .site-footer {
   background: var(--lime-2);
   color: var(--white);
 }

 footer h2 {
   color: #fff;
   margin-bottom: 0.3rem;
 }

 footer h2+p {
   text-transform: uppercase;
 }

 footer .logo {
   color: #fff;
   margin-bottom: 0.5rem;
 }

 footer .logo + p {
   text-transform: uppercase;
 }

 .footer-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 2rem 1.5rem;
 }

 .footer-grid>* {
   flex: 1 1 200px;
 }

 .footer-grid>*:first-child {
   flex-basis: 100%;
 }

 .site-footer h3 {
   color: var(--white);
   font-size: .95rem;
   margin-bottom: .3rem;
   padding-bottom: 0;
 }

 .site-footer h3::after {
   display: none;
 }

 .site-footer p {
   color: var(--white);
   font-size: .92rem;
   max-width: none;
 }

 .site-footer a:hover {
   text-decoration: underline;
 }

 .footer-label {
   font-weight: 700;
   font-size: .76rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   margin-bottom: .5rem;
   display: block;
   color: var(--white);
 }

 .footer-legal {
   background: rgba(0,0,0,.25);
   padding: .75rem 0;
 }

 .footer-legal .container {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: .5rem 1.5rem;
 }

 .footer-legal p {
   color: rgba(255,255,255,.75);
   font-size: .8rem;
   margin: 0;
   max-width: none;
 }

 .footer-legal nav {
   display: flex;
   gap: 1.25rem;
 }

 .footer-legal nav a {
   color: rgba(255,255,255,.75);
   font-size: .8rem;
   text-decoration: none;
 }

 .footer-legal nav a:hover {
   color: var(--white);
   text-decoration: underline;
 }

 /* ===================================================================
   18. BACK TO TOP
=================================================================== */
 .to-top {
   position: fixed;
   right: 1.5rem;
   bottom: 1.5rem;
   z-index: 40;
   width: 46px;
   height: 46px;
   background: var(--teal);
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transform: translateY(10px);
   transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
 }

 .to-top.is-visible {
   opacity: 1;
   visibility: visible;
   transform: none;
 }

 .to-top svg {
   width: 18px;
   height: 18px;
   stroke: var(--white);
   fill: none;
 }

 /* ===================================================================
   19. HILFKLASSEN (ehemals Inline-Styles)
=================================================================== */
 .svg-sprite {
   position: absolute;
 }

 .ph__inner--overlay {
   position: absolute;
   opacity: .7;
 }

 .svg-flipped {
   transform: rotate(180deg);
 }

 .split__body .btn {
   width: fit-content;
 }

 .split__body>.grid-2 {
   margin-bottom: 1.75rem;
 }


 #kontakt .split__media {
   aspect-ratio: 4/3;
 }

 .site-footer .section {
   padding-block: 3rem;
 }

 @media screen and (max-width:900px) {
   .hero__content {
     bottom: 10%;
   }
   .gallery-thumb {
     flex: 0 0 calc((100% - 1rem) / 2);
   }

   .services {
     display: flex;
     flex-direction: column;
     overflow: visible;
   }

   .services__intro {
     order: 1;
     /* Nicht auf 0 setzen: das .container-Padding gilt links wie rechts gleich –
   sonst klebt der Text am Handy einseitig rechts am Bildschirmrand. */
     padding-right: var(--pad-x);
   }

   .services__cards-wrap {
     order: 2;
     margin-top: 2.5rem;
   }

   .services__bg {
     position: static;
     width: calc(100% - 2 * var(--pad-x));
     margin-inline: auto;
     height: 280px;
     order: 3;
     margin-top: 2.5rem;
   }

   .cards-grid {
     grid-template-columns: 1fr;
   }

   .cards-grid .service-card {
     grid-column: 1 !important;
     grid-row: auto !important;
   }
 }

  @media(min-width:900px) {
   .hero__bar {
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     transform: translateY(50%);
     z-index: 2;
   }
 }

 @media(min-width:861px) {
   .ref-text {
     margin-top: calc(var(--section-y) * -0.5);
   }
 }

 .ref-gallery {
   flex: 1 1 480px;
   position: relative;
   overflow: hidden;
 }

  @media(max-width:860px) {
   .ref-gallery {
     padding-inline: var(--pad-x);
   }

   #intro .offset {
     margin-top: 0;
   }
 }

 @media(max-width:1000px) {
   .nav-toggle {
     display: block;
   }

   .main-nav {
     position: fixed;
     inset: 94px 0 0 0;
     background: var(--teal);
     z-index: 45;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-12px);
     transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease);
   }

   .main-nav.is-open {
     opacity: 1;
     visibility: visible;
     transform: none;
   }

   .main-nav ul {
     flex-direction: column;
     gap: 1.75rem;
     align-items: center;
     padding: 0;
   }

   .main-nav a {
     display: block;
     padding: 0;
     font-size: 1.15rem;
     color: var(--white);
   }

   .main-nav a::after {
     background: var(--white);
   }

   .main-nav::after {
     display: none;
   }
 }

  @media(min-width:760px) {
   .grid-2 {
     grid-template-columns: 1fr 1fr;
   }
 }

  @media(max-width:700px) {
   .split--narrow {
     flex-direction: column;
   }

   .hero__fabs a {
     width: 36px;
     height: 36px;
   }

   .split--narrow .split__media,
   .split--narrow .split__body {
     flex: 1 1 auto;
   }

   .split--narrow .split__media:has(img) {
     height: 320px;
   }
 }

 @media screen and (max-width:600px) {
   .hero__content .eyebrow {
     font-size: 1.0rem;
   }

   h1 {
     font-size: 1.5rem;
   }
 }

  @media(max-width:560px) {
   .gallery-thumb {
     flex: 0 0 100%;
   }
 }


   

 @media(max-width:520px) {
   .adv-perks ul {
     grid-template-columns: 1fr;
   }
 }

.cursor-pointer { cursor: pointer; }