/* Merulen — Gartengestaltung und Landschaftsdesign
   Globale Stile auf Basis von Bootstrap 5
   Diese Datei ist für spätere Design-Fixes und Nachjustierungen vorbereitet. */

:root {
  --merulen-moss: #1f3d2b;
  --merulen-moss-deep: #142a1e;
  --merulen-fern: #3f6b4a;
  --merulen-sage: #a7c4a0;
  --merulen-stone: #efeae1;
  --merulen-sand: #e3d9c6;
  --merulen-clay: #b08862;
  --merulen-ink: #1a1d1a;
  --merulen-paper: #f7f4ee;
  --merulen-muted-on-dark: #d4ddcf;

  --merulen-radius-sm: 6px;
  --merulen-radius-md: 14px;
  --merulen-radius-lg: 28px;
  --merulen-shadow-soft: 0 18px 40px -22px rgba(20, 42, 30, 0.45);
  --merulen-shadow-card: 0 8px 22px -14px rgba(20, 42, 30, 0.55);

  --merulen-font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --merulen-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --bs-body-bg: var(--merulen-paper);
  --bs-body-color: var(--merulen-ink);
  --bs-body-font-family: var(--merulen-font-body);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--merulen-font-body);
  background-color: var(--merulen-paper);
  color: var(--merulen-ink);
  line-height: 1.65;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5 {
  font-family: var(--merulen-font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.14;
  color: var(--merulen-moss-deep);
}

h1 { font-size: clamp(2.2rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }

p, li {
  font-size: 1.03rem;
}

a {
  color: var(--merulen-fern);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
  color: var(--merulen-moss);
  text-decoration: underline;
  text-underline-offset: 4px;
}

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

main:focus,
:focus-visible {
  outline: 2px solid var(--merulen-fern);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Layout-Grundgerüst
   Wird später ggf. für Header/Footer-Anpassungen nachgezogen.
   ------------------------------------------------------------------ */

.merulen-section {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  position: relative;
}

.merulen-section--tint {
  background-color: var(--merulen-stone);
}

.merulen-section--dark {
  background-color: var(--merulen-moss);
  color: var(--merulen-paper);
}

.merulen-section--dark h1,
.merulen-section--dark h2,
.merulen-section--dark h3 {
  color: var(--merulen-paper);
}

.merulen-eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--merulen-clay);
  margin-bottom: 0.9rem;
}

.merulen-section--dark .merulen-eyebrow {
  color: var(--merulen-sage);
}

.merulen-lead {
  font-size: 1.14rem;
  max-width: 62ch;
  color: #37423a;
}

.merulen-section--dark .merulen-lead {
  color: var(--merulen-muted-on-dark);
}

/* ------------------------------------------------------------------
   Hero / Slider
   Aktuell statisch, kann bei Bedarf auf Bootstrap-Carousel
   mit eigenen Indikatoren umgestellt werden.
   ------------------------------------------------------------------ */

.merulen-hero {
  position: relative;
  color: var(--merulen-paper);
  padding: clamp(5rem, 14vw, 9rem) 0 clamp(4rem, 9vw, 7rem);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.merulen-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  background: linear-gradient(to top, rgba(20, 42, 30, 0.85), transparent);
  pointer-events: none;
}

.merulen-hero__inner {
  position: relative;
  z-index: 2;
}

.merulen-hero h1 {
  color: #fbf9f4;
  text-shadow: 0 2px 22px rgba(20, 42, 30, 0.35);
}

.merulen-hero p {
  color: #e7ebde;
  max-width: 56ch;
  font-size: 1.16rem;
}

.merulen-hero .merulen-eyebrow {
  color: var(--merulen-sage);
}

/* Slider (eigene schlanke Variante statt Carousel, falls gewünscht) */
.merulen-slider {
  position: relative;
  overflow: hidden;
  border-radius: var(--merulen-radius-lg);
  box-shadow: var(--merulen-shadow-soft);
  background-color: var(--merulen-moss-deep);
}

.merulen-slider__track {
  display: flex;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.merulen-slider__slide {
  flex: 0 0 100%;
  position: relative;
  min-height: 420px;
  background-size: cover;
  background-position: center;
}

.merulen-slider__caption {
  position: absolute;
  left: clamp(1.2rem, 3vw, 2.6rem);
  bottom: clamp(1.2rem, 3vw, 2.2rem);
  right: clamp(1.2rem, 3vw, 2.6rem);
  color: #f6f3ec;
  max-width: 520px;
}

.merulen-slider__caption h3 {
  color: #f6f3ec;
  font-size: 1.5rem;
}

.merulen-slider__caption p {
  color: #dde5d5;
  margin: 0;
}

.merulen-slider__nav {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  padding: 1.4rem 0;
  background-color: var(--merulen-moss);
}

.merulen-slider__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--merulen-sage);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.merulen-slider__dot[aria-selected="true"] {
  background-color: var(--merulen-sage);
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

.merulen-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.merulen-btn--primary {
  background-color: var(--merulen-clay);
  color: #1d130a;
}

.merulen-btn--primary:hover,
.merulen-btn--primary:focus-visible {
  background-color: #c69a72;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -14px rgba(176, 136, 98, 0.7);
  color: #1d130a;
  text-decoration: none;
}

.merulen-btn--ghost {
  background-color: transparent;
  color: var(--merulen-paper);
  border: 1.5px solid rgba(247, 244, 238, 0.65);
}

.merulen-btn--ghost:hover,
.merulen-btn--ghost:focus-visible {
  background-color: rgba(247, 244, 238, 0.12);
  color: var(--merulen-paper);
  text-decoration: none;
}

.merulen-btn--outline {
  background-color: transparent;
  color: var(--merulen-moss);
  border: 1.5px solid var(--merulen-moss);
}

.merulen-btn--outline:hover,
.merulen-btn--outline:focus-visible {
  background-color: var(--merulen-moss);
  color: var(--merulen-paper);
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Karten und Kacheln
   ------------------------------------------------------------------ */

.merulen-card {
  background-color: #fffdf8;
  border-radius: var(--merulen-radius-md);
  overflow: hidden;
  box-shadow: var(--merulen-shadow-card);
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(31, 61, 43, 0.06);
}

.merulen-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -22px rgba(20, 42, 30, 0.55);
}

.merulen-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--merulen-stone);
}

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

.merulen-card__body {
  padding: 1.5rem 1.5rem 1.75rem;
}

.merulen-card__title {
  font-size: 1.22rem;
  margin-bottom: 0.5rem;
}

.merulen-card__text {
  color: #4a544c;
  font-size: 0.98rem;
  margin-bottom: 1rem;
}

.merulen-card__link {
  font-weight: 600;
  color: var(--merulen-fern);
}

.merulen-feature {
  padding: 2rem 1.6rem;
  background-color: #fffdf8;
  border-radius: var(--merulen-radius-md);
  height: 100%;
  border-top: 3px solid var(--merulen-clay);
}

.merulen-feature__icon {
  font-size: 1.6rem;
  color: var(--merulen-fern);
  margin-bottom: 1rem;
  display: inline-block;
}

.merulen-feature h3 {
  font-size: 1.18rem;
  margin-bottom: 0.6rem;
}

.merulen-feature p {
  color: #4a544c;
  font-size: 0.97rem;
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Zahlen / Statistik-Block
   ------------------------------------------------------------------ */

.merulen-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.merulen-stat {
  text-align: center;
  padding: 1.6rem 1rem;
  border-radius: var(--merulen-radius-md);
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(167, 196, 160, 0.25);
}

.merulen-section:not(.merulen-section--dark) .merulen-stat {
  background-color: #fffdf8;
  border: 1px solid rgba(31, 61, 43, 0.08);
}

.merulen-stat__num {
  font-family: var(--merulen-font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
  color: var(--merulen-clay);
  line-height: 1;
  display: block;
  margin-bottom: 0.4rem;
}

.merulen-stat__label {
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: #4a544c;
}

.merulen-section--dark .merulen-stat__label {
  color: var(--merulen-muted-on-dark);
}

/* ------------------------------------------------------------------
   Portfolio / Galerie
   ------------------------------------------------------------------ */

.merulen-portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.merulen-portfolio__item {
  position: relative;
  border-radius: var(--merulen-radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--merulen-stone);
}

.merulen-portfolio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.merulen-portfolio__item:hover img {
  transform: scale(1.05);
}

.merulen-portfolio__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.2rem 1.1rem;
  background: linear-gradient(to top, rgba(20, 42, 30, 0.9), transparent);
  color: #f6f3ec;
  font-weight: 600;
  font-size: 0.98rem;
}

.merulen-portfolio__label small {
  display: block;
  font-weight: 400;
  font-size: 0.82rem;
  color: #cfdbc7;
}

/* ------------------------------------------------------------------
   Team
   ------------------------------------------------------------------ */

.merulen-team-member {
  text-align: center;
}

.merulen-team-member__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--merulen-radius-md);
  overflow: hidden;
  background-color: var(--merulen-stone);
  margin-bottom: 1.1rem;
}

.merulen-team-member__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.merulen-team-member h3 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.merulen-team-member p {
  color: #4a544c;
  font-size: 0.94rem;
  margin: 0;
}

/* ------------------------------------------------------------------
   Prozess / Schritte
   ------------------------------------------------------------------ */

.merulen-steps {
  counter-reset: mstep;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.4rem;
}

.merulen-step {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 4.2rem;
  background-color: #fffdf8;
  border-radius: var(--merulen-radius-md);
  border-left: 3px solid var(--merulen-fern);
  box-shadow: var(--merulen-shadow-card);
}

.merulen-step::before {
  counter-increment: mstep;
  content: counter(mstep, decimal-leading-zero);
  position: absolute;
  left: 1.3rem;
  top: 1.4rem;
  font-family: var(--merulen-font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--merulen-clay);
}

.merulen-step h3 {
  font-size: 1.08rem;
  margin-bottom: 0.4rem;
}

.merulen-step p {
  margin: 0;
  color: #4a544c;
  font-size: 0.97rem;
}

/* ------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------ */

.merulen-faq .accordion-item {
  border: 1px solid rgba(31, 61, 43, 0.12);
  border-radius: var(--merulen-radius-sm) !important;
  margin-bottom: 0.8rem;
  overflow: hidden;
  background-color: #fffdf8;
}

.merulen-faq .accordion-button {
  font-family: var(--merulen-font-display);
  font-weight: 600;
  font-size: 1.06rem;
  color: var(--merulen-moss-deep);
  background-color: #fffdf8;
}

.merulen-faq .accordion-button:not(.collapsed) {
  background-color: var(--merulen-stone);
  color: var(--merulen-moss-deep);
  box-shadow: none;
}

.merulen-faq .accordion-button:focus {
  box-shadow: 0 0 0 2px rgba(63, 107, 74, 0.35);
}

.merulen-faq .accordion-body {
  color: #3f4a42;
  font-size: 0.98rem;
}

/* ------------------------------------------------------------------
   Formulare
   ------------------------------------------------------------------ */

.merulen-form {
  background-color: #fffdf8;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: var(--merulen-radius-lg);
  box-shadow: var(--merulen-shadow-soft);
}

.merulen-form .form-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--merulen-moss);
  margin-bottom: 0.4rem;
}

.merulen-form .form-control,
.merulen-form .form-select {
  border-radius: var(--merulen-radius-sm);
  border: 1px solid rgba(31, 61, 43, 0.22);
  padding: 0.75rem 0.9rem;
  background-color: var(--merulen-paper);
  color: var(--merulen-ink);
}

.merulen-form .form-control:focus,
.merulen-form .form-select:focus {
  border-color: var(--merulen-fern);
  box-shadow: 0 0 0 3px rgba(63, 107, 74, 0.18);
}

.merulen-form .form-check-label {
  font-size: 0.9rem;
  color: #3f4a42;
}

.merulen-form__fineprint {
  font-size: 0.82rem;
  color: #55605a;
  margin-top: 0.9rem;
}

/* ------------------------------------------------------------------
   Newsletter
   ------------------------------------------------------------------ */

.merulen-newsletter {
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: var(--merulen-radius-lg);
  background-color: var(--merulen-moss);
  color: var(--merulen-paper);
}

.merulen-newsletter h2 {
  color: var(--merulen-paper);
}

.merulen-newsletter p {
  color: var(--merulen-muted-on-dark);
}

.merulen-newsletter .form-control {
  background-color: #fffdf8;
  border: 1px solid transparent;
}

/* ------------------------------------------------------------------
   Testimonials
   ------------------------------------------------------------------ */

.merulen-quote {
  background-color: #fffdf8;
  padding: 2rem 1.8rem;
  border-radius: var(--merulen-radius-md);
  box-shadow: var(--merulen-shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.merulen-quote__stars {
  color: var(--merulen-clay);
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}

.merulen-quote__text {
  color: #37423a;
  font-style: italic;
  flex-grow: 1;
  margin-bottom: 1.2rem;
}

.merulen-quote__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.merulen-quote__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--merulen-stone);
  flex-shrink: 0;
}

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

.merulen-quote__name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--merulen-moss-deep);
  margin: 0;
}

.merulen-quote__role {
  font-size: 0.82rem;
  color: #55605a;
  margin: 0;
}

/* ------------------------------------------------------------------
   Kontakt / Karte
   ------------------------------------------------------------------ */

.merulen-contact-card {
  background-color: #fffdf8;
  border-radius: var(--merulen-radius-md);
  padding: 1.8rem;
  box-shadow: var(--merulen-shadow-card);
  height: 100%;
}

.merulen-contact-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.merulen-contact-card p,
.merulen-contact-card a {
  color: #3f4a42;
  font-size: 0.98rem;
  margin-bottom: 0.2rem;
}

.merulen-map-frame {
  border: 0;
  width: 100%;
  min-height: 380px;
  border-radius: var(--merulen-radius-md);
  filter: saturate(0.9);
}

/* ------------------------------------------------------------------
   Rechtsseiten
   ------------------------------------------------------------------ */

.merulen-legal h2 {
  font-size: 1.45rem;
  margin-top: 2.2rem;
  margin-bottom: 0.9rem;
}

.merulen-legal h3 {
  font-size: 1.15rem;
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
}

.merulen-legal p,
.merulen-legal li {
  color: #37423a;
  font-size: 1rem;
}

.merulen-legal ul {
  padding-left: 1.2rem;
}

/* ------------------------------------------------------------------
   Cookie-Banner (Garten-Theme, einzigartig für Merulen)
   Erscheint nur auf der Startseite.
   ------------------------------------------------------------------ */

.merulen-garten-cookie {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 30px);
  width: min(680px, calc(100% - 28px));
  background-color: var(--merulen-moss-deep);
  color: var(--merulen-paper);
  border-radius: var(--merulen-radius-lg);
  padding: 1.5rem 1.6rem 1.4rem;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(167, 196, 160, 0.28);
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.merulen-garten-cookie.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.merulen-garten-cookie__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}

.merulen-garten-cookie__head i {
  color: var(--merulen-sage);
  font-size: 1.25rem;
}

.merulen-garten-cookie__title {
  font-family: var(--merulen-font-display);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--merulen-paper);
  margin: 0;
}

.merulen-garten-cookie__text {
  font-size: 0.93rem;
  color: var(--merulen-muted-on-dark);
  margin-bottom: 1.1rem;
}

.merulen-garten-cookie__text a {
  color: var(--merulen-sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.merulen-garten-cookie__text a:hover {
  color: var(--merulen-paper);
}

.merulen-garten-cookie__actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.merulen-garten-cookie__actions button {
  font-family: var(--merulen-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.merulen-garten-cookie__decline {
  background-color: transparent;
  color: var(--merulen-paper);
  border-color: rgba(247, 244, 238, 0.45);
}

.merulen-garten-cookie__decline:hover {
  background-color: rgba(247, 244, 238, 0.12);
}

.merulen-garten-cookie__accept {
  background-color: var(--merulen-clay);
  color: #1d130a;
}

.merulen-garten-cookie__accept:hover {
  background-color: #c69a72;
}

/* ------------------------------------------------------------------
   Kopfzeile und Navigation (optional, falls im Header verwendet)
   ------------------------------------------------------------------ */

.merulen-site-header {
  background-color: var(--merulen-paper);
  border-bottom: 1px solid rgba(31, 61, 43, 0.08);
}

.merulen-site-header__meta {
  font-size: 0.83rem;
  color: #4a544c;
}

.merulen-site-header__meta a {
  color: var(--merulen-moss);
}

.merulen-nav-link {
  font-weight: 500;
  color: var(--merulen-moss-deep);
  font-size: 0.96rem;
  padding: 0.5rem 0.8rem;
}

.merulen-nav-link:hover {
  color: var(--merulen-fern);
}

/* ------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------ */

.merulen-divider {
  height: 1px;
  background-color: rgba(31, 61, 43, 0.14);
  border: 0;
  margin: 0;
}

.merulen-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background-color: var(--merulen-sand);
  color: var(--merulen-moss-deep);
}

.merulen-link-arrow i {
  font-size: 0.75rem;
  margin-left: 0.35rem;
  transition: transform 0.2s ease;
}

.merulen-link-arrow:hover i {
  transform: translateX(3px);
}

@media (max-width: 767.98px) {
  .merulen-hero {
    padding-top: clamp(4rem, 22vw, 6rem);
  }
  .merulen-garten-cookie {
    bottom: 12px;
    padding: 1.3rem 1.2rem 1.2rem;
  }
  .merulen-garten-cookie__actions {
    justify-content: stretch;
  }
  .merulen-garten-cookie__actions button {
    flex: 1 1 auto;
  }
  .merulen-step {
    padding-left: 3.4rem;
  }
}

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

/* QA_GRID_COLUMN_FIX .merulen-stats.row */
.merulen-stats.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.merulen-stats.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}
/* QA_GRID_COLUMN_FIX .merulen-portfolio.row */
.merulen-portfolio.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.merulen-portfolio.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}
/* QA_GRID_COLUMN_FIX .merulen-steps.row */
.merulen-steps.row{--bs-gutter-x:0;--bs-gutter-y:0;margin-left:0;margin-right:0}
.merulen-steps.row>:is([class^="col-"],[class*=" col-"]){width:100%;max-width:100%;min-width:0;flex:none;padding-left:0;padding-right:0;margin-top:0}

/* QA_DARK_SECTION_LINK_CONTRAST — light text for links inside dark sections (footer) */
.merulen-section--dark .merulen-nav-link,
.merulen-section--dark .merulen-nav-link:hover,
.merulen-section--dark .merulen-nav-link:focus-visible {
  color: var(--merulen-muted-on-dark);
}

.merulen-section--dark a:not(.merulen-btn):not(.navbar-brand),
.merulen-section--dark a:not(.merulen-btn):not(.navbar-brand):hover,
.merulen-section--dark a:not(.merulen-btn):not(.navbar-brand):focus-visible {
  color: #d8e4d2;
  text-decoration-color: currentColor;
}

.merulen-section--dark .merulen-card__link {
  color: #d8e4d2;
}

.merulen-section--dark .merulen-nav-link:hover,
.merulen-section--dark .merulen-nav-link:focus-visible {
  color: #ffffff;
}

/* QA_FOOTER_LINK_CONTRAST — dark footer needs light link colours */
footer.merulen-section--dark a,
footer.merulen-section--dark a.merulen-nav-link,
footer.merulen-section--dark .merulen-nav-link,
.merulen-section--dark footer a {
  color: #eaf1e4;
}

footer.merulen-section--dark a:hover,
footer.merulen-section--dark a:focus-visible,
footer.merulen-section--dark .merulen-nav-link:hover,
footer.merulen-section--dark .merulen-nav-link:focus-visible {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* QA_PORTFOLIO_GRID — keep portfolio cards at full track width (no scaled/shrunk items) */
.merulen-portfolio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.merulen-portfolio > [class^="col-"],
.merulen-portfolio > [class*=" col-"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
}

.merulen-portfolio > [data-aos] {
  transform: none;
}

.merulen-portfolio > [data-aos].aos-animate {
  transform: none;
}

/* ------------------------------------------------------------------
   QA-Fix: Link-Kontrast in dunklen Bereichen (Footer / Philosophy)
   ------------------------------------------------------------------ */
.merulen-section--dark .merulen-nav-link,
.merulen-section--dark a:not(.merulen-btn) {
  color: #e7ebde;
}

.merulen-section--dark .merulen-nav-link:hover,
.merulen-section--dark .merulen-nav-link:focus-visible,
.merulen-section--dark a:not(.merulen-btn):hover,
.merulen-section--dark a:not(.merulen-btn):focus-visible,
.merulen-section--dark a:not(.merulen-btn):active {
  color: #ffffff;
}

.merulen-section--dark .merulen-nav-link:visited,
.merulen-section--dark a:not(.merulen-btn):visited {
  color: #e7ebde;
}

/* ------------------------------------------------------------------
   QA-Fix: Portfolio-Grid – Bootstrap-Spalten füllen ihre Grid-Tracks
   (Raster bleibt repeat(auto-fit, minmax(240px, 1fr)) mit 1.25rem gap)
   ------------------------------------------------------------------ */
.merulen-portfolio > :is([class^="col-"], [class*=" col-"]) {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Dropdown-Umschalter im Header erbt Linkfarbe der Navigation */
.merulen-site-header .dropdown-toggle.nav-link {
  color: var(--merulen-moss-deep);
  font-weight: 500;
  cursor: pointer;
}

.merulen-site-header .dropdown-toggle.nav-link:hover,
.merulen-site-header .dropdown-toggle.nav-link:focus-visible {
  color: var(--merulen-fern);
  text-decoration: none;
}

/* QA_FIX: Rückmeldung nach dem Absenden der Formulare */
.merulen-form__note {
  display: block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--merulen-radius-sm);
  background-color: rgba(63, 107, 74, 0.12);
  border-left: 3px solid var(--merulen-fern);
  color: var(--merulen-moss-deep);
  font-size: 0.95rem;
  font-weight: 500;
}

/* QA_FIX: "Leistungen"-Umschalter als Button erbt das Link-Erscheinungsbild */
.merulen-site-header button.dropdown-toggle.nav-link {
  background: none;
  border: 0;
  font-family: var(--merulen-font-body);
  font-size: 0.96rem;
  line-height: inherit;
  text-align: left;
}

/* QA_FIX_SLIDER_CAPTION_OVERLAP — Bildunterschrift im Karussell
   Die Caption ist ein normal fließendes <p> innerhalb der Folie (keine
   Overlay-Positionierung). Die alte Slot-Regel (absolute Positionierung +
   right: …) darf hier nicht greifen, damit kein Text über Text bzw. über
   das Bild gelegt wird. */
.merulen-slider .merulen-slider__slide {
  overflow: hidden;
}

.merulen-slider .merulen-slider__slide > .container {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  position: relative;
  z-index: 2;
}

.merulen-slider .merulen-slider__caption {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  top: auto;
  max-width: 100%;
  margin: 0 0 0.5rem;
  color: #f6f3ec;
  font-family: var(--merulen-font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 14px rgba(20, 42, 30, 0.45);
}

.merulen-slider .merulen-slider__caption.h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
}

@media (max-width: 991.98px) {
  .merulen-slider .merulen-slider__caption {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------
   FIX: Ablauf-Sektion ("Vier Schritte von der Anfrage zum Garten")
   Die Grid-Fix-Regel hat .merulen-steps.row auf eine einspaltige
   Grid-Vollbreite gezwungen, wodurch die vier Schritte untereinander
   als überdimensionierte, leere Karten standen. Hier wird das
   beabsichtigte 4-Spalten-Kartenraster wiederhergestellt.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .merulen-steps.row {
    display: flex;
    flex-wrap: wrap;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    gap: 0;
  }

  .merulen-steps.row > :is([class^="col-"], [class*=" col-"]) {
    width: 25%;
    max-width: 25%;
    flex: 0 0 25%;
    min-width: 0;
    padding-left: calc(0.5 * var(--bs-gutter-x));
    padding-right: calc(0.5 * var(--bs-gutter-x));
    margin-top: var(--bs-gutter-y);
  }
}

/* Zwischengrößen: zwei Spalten, wie im Markup vorgesehen (col-md-6) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .merulen-steps.row {
    display: flex;
    flex-wrap: wrap;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    gap: 0;
  }

  .merulen-steps.row > :is([class^="col-"], [class*=" col-"]) {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
    min-width: 0;
    padding-left: calc(0.5 * var(--bs-gutter-x));
    padding-right: calc(0.5 * var(--bs-gutter-x));
    margin-top: var(--bs-gutter-y);
  }
}

/* Auf kleinen Screens: vollbreite Karten untereinander */
@media (max-width: 767.98px) {
  .merulen-steps.row {
    display: flex;
    flex-wrap: wrap;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    margin-left: calc(-0.5 * var(--bs-gutter-x));
    margin-right: calc(-0.5 * var(--bs-gutter-x));
    gap: 0;
  }

  .merulen-steps.row > :is([class^="col-"], [class*=" col-"]) {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    min-width: 0;
    padding-left: calc(0.5 * var(--bs-gutter-x));
    padding-right: calc(0.5 * var(--bs-gutter-x));
    margin-top: var(--bs-gutter-y);
  }
}

/* Karteninhalt der Schritte: normale Innenabstände statt Platzhalter-Optik */
.merulen-steps .merulen-step {
  padding: 1.5rem;
  padding-left: 4.2rem;
  border-left: 3px solid var(--merulen-fern);
}

.merulen-steps .merulen-step .merulen-card__body {
  padding: 0;
}

.merulen-steps .merulen-step .merulen-card__title {
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
}

.merulen-steps .merulen-step .merulen-card__text {
  font-size: 0.96rem;
  margin-bottom: 0;
  color: #4a544c;
}

@media (max-width: 767.98px) {
  .merulen-steps .merulen-step {
    padding-left: 3.6rem;
  }
}

/* ------------------------------------------------------------------
   FIX: Ablauf-Sektion sichtbar machen
   Die Karten waren im Layout vorhanden, blieben aber unsichtbar, weil
   die Reveal-Skripte/Kartenstile (opacity/transform, overflow:hidden)
   den Inhalt ausblendeten. Hier wird der Inhalt der Schritte-Sektion
   robust sichtbar gemacht.
   ------------------------------------------------------------------ */
.merulen-steps,
.merulen-steps .merulen-step,
.merulen-steps .merulen-step > .merulen-card__body {
  opacity: 1 !important;
  visibility: visible !important;
}

.merulen-steps .merulen-step {
  transform: none !important;
  overflow: visible;
  display: block;
  min-height: 0;
  height: auto;
}

.merulen-steps .merulen-step > .merulen-card__body {
  position: static;
  transform: none !important;
}

/* ------------------------------------------------------------------
   FIX: Ablauf-Sektion – Inhalt darf nicht überlagert/ausgeblendet werden
   (Falls ein Overlay oder ein AOS-/Reveal-Zustand den Bereich abdeckt,
   wird der komplette Blockinhalt zuverlässig nach oben gelegt.)
   ------------------------------------------------------------------ */
section.merulen-section:has(.merulen-steps) {
  z-index: 1;
  isolation: isolate;
}

section.merulen-section:has(.merulen-steps) > .container {
  position: relative;
  z-index: 2;
}

section.merulen-section:has(.merulen-steps) [data-aos] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

section.merulen-section:has(.merulen-steps) .merulen-steps.row {
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------------
   FIX: Ablauf-Sektion – Textebene der Schritt-Karten
   Die generische Karten-Regel setzt um .merulen-card einen Stapelkontext
   (transition/transform/overflow). Liegt der Inhalt (.merulen-card__body)
   darunter, wird der Kartentext durch Scroll-Reveal-Overlays verdeckt und
   die Karten wirken als leere weiße Flächen. Hier wird die Inhaltsebene
   der Schritte zuverlässig nach oben gelegt (nur Ablauf-Karten).
   ------------------------------------------------------------------ */
.merulen-steps .merulen-step {
  position: relative;
  z-index: 1;
}

.merulen-steps .merulen-step > .merulen-card__body {
  position: relative;
  z-index: 2;
  display: block;
  height: auto;
}

.merulen-steps .merulen-step > .merulen-card__body > * {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}

/* Kein zusätzlicher Leerraum durch überhöhte Karten auf kleinen Screens */
@media (max-width: 767.98px) {
  .merulen-steps .merulen-step {
    padding: 1.35rem 1.25rem 1.35rem 3.6rem;
    min-height: 0;
  }

  .merulen-steps .merulen-step::before {
    top: 1.25rem;
  }
}

/* ------------------------------------------------------------------
   FIX: Cookie-Hinweis auf kleinen Screens
   Der Kopfbereich war als Flex-Zeile angelegt, wodurch Titel und Text
   nebeneinander in schmalen Spalten standen und das Banner sehr hoch
   über die Seiteninhalte (u. a. Ablauf-Karten) wuchs. Auf kleinen
   Screens wird der Inhalt untereinander gestapelt und das Banner
   kompakt gehalten.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .merulen-garten-cookie__head {
    display: block;
  }

  .merulen-garten-cookie__title {
    display: block;
    width: 100%;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .merulen-garten-cookie__text {
    display: block;
    width: 100%;
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
  }

  .merulen-garten-cookie__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .merulen-garten-cookie__actions button {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
   FIX: Kontrast der Absatztexte mit var(--merulen-stone)
   --merulen-stone (#efeae1) ist ein Flächen-/Sandton und als Textfarbe
   auf dem hellen Papier (#f7f4ee) praktisch unsichtbar (Kontrast ~1.1:1).
   Betroffen sind Absätze mit Inline-Farbe --merulen-stone in hellen
   Sektionen (z. B. Intro-Text unter "Ablauf", "Projekte", "Leistungen",
   "Stimmen"). Auf dunklen Sektionen und auf Karten bleibt alles wie
   gehabt; global wird nichts umgefärbt.
   ------------------------------------------------------------------ */
.merulen-section:not(.merulen-section--dark) > .container p[style*="--merulen-stone"] {
  color: #4a544c !important;
}

.merulen-section--tint > .container p[style*="--merulen-stone"] {
  color: #3f4a42 !important;
}

/* ------------------------------------------------------------------
   FIX: Kontrast der Eyebrow-Labels auf hellen Flächen
   --merulen-clay (#b08862) erreicht auf dem Papier-Ton (#f7f4ee)
   nur ~2.9:1. Für Eyebrows auf hellen Sektionen (z. B. "Ablauf")
   wird ein dunklerer Clay-Ton (#7d5b3a, ~5:1) verwendet. Dunkle
   Sektionen und der Hero behalten ihre bisherige Farbe, alle
   übrigen Texte bleiben unverändert.
   ------------------------------------------------------------------ */
.merulen-section:not(.merulen-section--dark) .merulen-eyebrow {
  color: #7d5b3a;
}

/* ------------------------------------------------------------------
   FIX: Eyebrow-Label im Projekt-Slider (Bildunterschrift auf Foto)
   Die zuvor eingeführte dunklere Clay-Farbe (#7d5b3a) für Eyebrows in
   hellen Sektionen greift auch innerhalb des Karussells, wo der Text
   aber auf einem dunkel abgedunkelten Foto liegt (~1.8:1). Hier wird
   nur dieses Label wieder auf den hellen Sage-Ton gesetzt, der auf dem
   dunklen Bildhintergrund ausreichend Kontrast bietet. Gilt für alle
   Folien des Sliders; andere Texte bleiben unverändert.
   ------------------------------------------------------------------ */
.merulen-slider .merulen-slider__slide .merulen-eyebrow {
  color: var(--merulen-sage);
  text-shadow: 0 2px 14px rgba(20, 42, 30, 0.55);
}

/* ------------------------------------------------------------------
   FIX: Eyebrow-Label im Projekt-Slider (Kontrast auf Foto-Hintergrund)
   Das Label "Reihenhausgarten" (und die Labels der weiteren Folien)
   liegt auf einem abgedunkelten Foto, wurde aber durch die hellen
   Sektionen-Regel mit dem dunklen Clay-Ton (#7d5b3a) eingefärbt
   (~2.5:1 auf dem Bild). Hier gilt nur für Eyebrows innerhalb der
   Slider-Folien wieder der helle Sage-Ton mit weichem Schatten.
   Andere Texte und Sektionen bleiben unverändert.
   ------------------------------------------------------------------ */
.merulen-slider .carousel-inner .merulen-slider__slide .merulen-eyebrow,
.merulen-section .merulen-slider .merulen-slider__slide .merulen-eyebrow {
  color: var(--merulen-sage);
  text-shadow: 0 2px 14px rgba(20, 42, 30, 0.75);
}