/* ==========================================================================
   HECKENFRITZ, Gartenpflege Hildesheim
   Stylesheet
   Farbwelt: Tiefgrün (#173522) & Anthrazit, Akzent Messing
   ========================================================================== */

/* ------------------------------------------------------- 0. Schriftarten

   Die Schriften liegen auf dem eigenen Server, es geht keine Verbindung zu
   Google. Das erspart einen Einwilligungsbanner und ist datenschutzrechtlich
   die saubere Lösung.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-VariableFont_wdth,wght.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("fonts/Karla-VariableFont_wght.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Farben */
  --gruen: #173522;
  --gruen-tief: #0E2116;
  --gruen-hell: #2C4F38;
  --anthrazit: #22262A;
  --grau: #5C6660;
  --grau-hell: #8C948F;
  --papier: #F4F6F3;
  --papier-warm: #EAEEE8;
  --linie: #D8DED8;
  --linie-dunkel: rgba(255, 255, 255, 0.14);
  --messing: #B79A5B;
  --weiss: #FFFFFF;

  /* Erweiterte Palette, damit die Seite nicht nur grün und gold ist */
  --stein: #E8E3D8;        /* warmer Steinton, große Flächen */
  --stein-tief: #D6CEC0;   /* Abstufung, Linien auf Stein */
  --sand: #C3B393;         /* Sandton für Bildplatzhalter */
  --salbei: #7E9480;       /* gedecktes Salbeigrün, Zwischenton */
  --rinde: #4A4038;        /* warmes Dunkelbraun, Textalternative */
  --linie-stein: #C9C1B2;

  /* Typografie */
  --display: "Archivo", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Karla", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --fs-xxl: clamp(2.6rem, 7vw, 5.4rem);
  --fs-xl: clamp(2rem, 4.4vw, 3.4rem);
  --fs-l: clamp(1.5rem, 2.6vw, 2.1rem);
  --fs-m: clamp(1.12rem, 1.5vw, 1.28rem);
  --fs-s: 1rem;
  --fs-xs: 0.875rem;
  --fs-label: 0.75rem;

  /* Raster */
  --breite: 1220px;
  --breite-schmal: 780px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --abstand-sektion: clamp(4.5rem, 9vw, 8rem);

  --radius: 4px;
  --radius-gross: 10px;

  --transition: 220ms cubic-bezier(0.4, 0.1, 0.2, 1);
}

/* ------------------------------------------------------------- 2. Basis */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 2rem;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--anthrazit);
  font-family: var(--body);
  font-size: var(--fs-m);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration-color: var(--messing);
  text-underline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-xxl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-l); }
h4 { font-size: var(--fs-m); letter-spacing: -0.01em; }

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

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }

:focus-visible {
  outline: 2px solid var(--messing);
  outline-offset: 3px;
  border-radius: 2px;
}

.visuell-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: var(--messing);
  color: var(--gruen-tief);
  padding: 0.7rem 1.2rem;
  font-family: var(--display);
  font-weight: 600;
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------ 3. Layout */

.wrap {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-schmal {
  max-width: var(--breite-schmal);
}

.sektion {
  padding-block: var(--abstand-sektion);
}

.sektion--kompakt {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.sektion--dunkel {
  background: var(--gruen);
  color: var(--papier);
}

.sektion--tief {
  background: var(--gruen-tief);
  color: var(--papier);
}

.sektion--warm {
  background: var(--papier-warm);
}

.sektion--dunkel h2,
.sektion--tief h2,
.sektion--dunkel h3,
.sektion--tief h3 {
  color: var(--weiss);
}

/* ------------------------------------------------ 4. Wiederkehrende Teile */

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grau);
  margin-bottom: 1.4rem;
}

.label::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--messing);
  flex: none;
}

.sektion--dunkel .label,
.sektion--tief .label {
  color: var(--messing);
}

.versal {
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.sektion-kopf {
  max-width: 62ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lead {
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.55;
  color: var(--grau);
}

.sektion--dunkel .lead,
.sektion--tief .lead {
  color: rgba(244, 246, 243, 0.78);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}

.btn:hover::after {
  animation: btn-schein 0.6s ease forwards;
}

.btn--primaer {
  background: var(--messing);
  color: var(--gruen-tief);
}
.btn--primaer:hover {
  background: #C8AC6C;
  transform: translateY(-1px);
}

.btn--dunkel {
  background: var(--gruen);
  color: var(--papier);
}
.btn--dunkel:hover {
  background: var(--gruen-tief);
  transform: translateY(-1px);
}

.btn--linie {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}
.btn--linie:hover {
  background: var(--messing);
  border-color: var(--messing);
  color: var(--gruen-tief);
  transform: translateY(-1px);
}

.btn-gruppe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* Textlink mit Pfeil */

.pfeil-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--gruen);
  border-bottom: 1px solid var(--messing);
  padding-bottom: 2px;
  transition: gap var(--transition);
}
.pfeil-link:hover { gap: 0.85rem; }

.sektion--dunkel .pfeil-link,
.sektion--tief .pfeil-link { color: var(--messing); }

/* --------------------------------------------------- 5. Kopfleiste

   Es gibt keine eigene, mitscrollende Kopfzeile mehr. Logo, Navigation und
   Telefonnummer sitzen fest im ersten Abschnitt jeder Seite, im Hero auf
   der Startseite, im Seitenkopf auf allen übrigen. Dadurch bleibt das Logo
   groß, ohne dass eine Leiste dauerhaft Platz wegnimmt.
   ------------------------------------------------------------------ */

.kopfleiste {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: clamp(1.5rem, 3vw, 2.4rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
  color: var(--papier);
}

.marke {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--weiss);
}

/* Logo im ersten Abschnitt. Nur die Höhe ist festgelegt,
   die Breite richtet sich nach der Datei. */
.marke__logo {
  height: 118px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  object-position: left center;
  display: block;
}

/* Auf den Unterseiten etwas zurückhaltender */
.seitenkopf .marke__logo { height: 88px; }

@media (max-width: 940px) {
  .marke__logo { height: 92px; }
  .seitenkopf .marke__logo { height: 74px; }
}

@media (max-width: 560px) {
  .marke__logo { height: 68px; max-width: 62vw; }
  .seitenkopf .marke__logo { height: 60px; }
}

/* Navigation */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
}

.nav a {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  color: rgba(244, 246, 243, 0.85);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.nav a:hover { color: var(--weiss); }

.nav a[aria-current="page"] {
  color: var(--weiss);
  border-bottom-color: var(--messing);
}

.kopfleiste__rechts {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.header__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  white-space: nowrap;
  color: var(--gruen-tief);
  background: var(--messing);
  padding: 0.78rem 1.35rem;
  border-radius: var(--radius);
  transition: background var(--transition);
}
.header__tel:hover { background: #C8AC6C; }

/* Menüschalter */

.burger {
  display: none;
  width: 46px;
  height: 46px;
  background: rgba(14, 33, 22, 0.5);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  position: relative;
}

.burger span {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  background: var(--papier);
  transition: transform var(--transition), opacity var(--transition);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 940px) {
  .burger { display: block; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--gruen-tief);
    border: 1px solid var(--linie-dunkel);
    border-radius: var(--radius-gross);
    padding: 0.4rem 1.4rem 1.2rem;
    box-shadow: 0 20px 44px rgba(14, 33, 22, 0.35);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }

  .nav[data-offen="true"] {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .nav a {
    padding: 0.95rem 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--linie-dunkel);
  }

  .nav a:last-child { border-bottom: none; }
  .nav a[aria-current="page"] { border-bottom-color: var(--messing); }
}

@media (max-width: 560px) {
  .header__tel span { display: none; }
  .header__tel { padding: 0.65rem 0.8rem; }
}

/* -------------------------------------------------------------- 6. Hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(92vh, 900px);
  background: var(--gruen);
  color: var(--papier);
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(9rem, 17vw, 14rem);
}

.hero__eyebrow {
  color: var(--messing);
}

.hero h1 {
  max-width: 16ch;
  color: var(--weiss);
  margin-bottom: 1.5rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--messing);
}

.hero__text {
  max-width: 52ch;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  color: rgba(244, 246, 243, 0.8);
}

/* Signatur: die Schnittkante */

.schnittkante {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(80px, 11vw, 130px);
  z-index: 1;
  display: block;
}

.schnittkante__flaeche { fill: var(--gruen-tief); }
.schnittkante__linie { stroke: var(--messing); stroke-width: 1.5; opacity: 0.65; }

.schnittkante-notiz {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 3;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--messing);
}

@media (max-width: 640px) {
  .schnittkante-notiz { display: none; }
}

/* Kennzahlen-Leiste unter dem Hero */

.fakten {
  background: var(--gruen-tief);
  color: var(--papier);
  border-top: 1px solid var(--linie-dunkel);
}

.fakten__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--linie-dunkel);
}

.fakten__item {
  background: var(--gruen-tief);
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1rem, 2vw, 1.8rem);
}

.fakten__zahl {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--weiss);
  line-height: 1.1;
}

.fakten__text {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: rgba(244, 246, 243, 0.62);
  margin-top: 0.4rem;
}

@media (max-width: 800px) {
  .fakten__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Seitenkopf für Unterseiten */

.seitenkopf {
  background: var(--gruen);
  color: var(--papier);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  position: relative;
}

.seitenkopf h1 {
  color: var(--weiss);
  max-width: 20ch;
  margin-bottom: 1.2rem;
}

.seitenkopf p {
  max-width: 58ch;
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.55;
  color: rgba(244, 246, 243, 0.78);
}

.brotkrumen {
  font-size: var(--fs-xs);
  color: rgba(244, 246, 243, 0.55);
  margin-bottom: 1.6rem;
}
.brotkrumen a { text-decoration: none; }
.brotkrumen a:hover { text-decoration: underline; }

.seitenkopf__vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  margin-top: 1.8rem;
}

.seitenkopf__vertrauen span {
  font-size: var(--fs-xs);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--messing);
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(183, 154, 91, 0.4);
  border-radius: 999px;
}

.kontakt-vertrauen {
  margin-top: 1.4rem;
  background: var(--papier-warm);
  border-radius: var(--radius-gross);
  padding: clamp(1.4rem, 2.5vw, 2rem);
}

.kontakt-vertrauen h3 {
  font-size: 1.05rem;
  margin-bottom: 1rem;
  color: var(--anthrazit);
}

.kontakt-vertrauen__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.kontakt-vertrauen__liste li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-s);
  color: var(--anthrazit);
}

.kontakt-vertrauen__liste svg {
  flex: none;
  color: var(--gruen);
}

.kontakt-tipp {
  margin-top: 1.2rem;
  padding: 1.2rem 1.4rem;
  border-left: 3px solid var(--messing);
  background: rgba(183, 154, 91, 0.07);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.kontakt-tipp p {
  font-size: var(--fs-s);
  color: var(--grau);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.btn--klein {
  padding: 0.55rem 1.1rem;
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* --------------------------------------------------------- 7. Leistungen */

.leistungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 1fr;   /* alle Karten gleich hoch, damit die Trennlinien
                            unten exakt auf einer Höhe sitzen */
  gap: 1.25rem;
}

.karte {
  display: flex;
  flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.karte:hover {
  border-color: var(--gruen-hell);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(14, 33, 22, 0.09);
}

.karte__icon {
  width: 34px;
  height: 34px;
  margin-bottom: 1.4rem;
  color: var(--gruen);
}

.karte h3 {
  font-size: 1.32rem;
  margin-bottom: 0.6rem;
}

.karte p {
  font-size: var(--fs-s);
  color: var(--grau);
  line-height: 1.6;
}

.karte > p:not(.karte__preis),
.karte__inhalt > p:not(.karte__preis) {
  margin-bottom: 1.4rem;
}

.karte__preis {
  margin-top: auto;      /* schiebt den Block ans untere Ende der Karte */
  margin-bottom: 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gruen);
  /* Feste Höhe des Fußblocks: sonst rutscht die Trennlinie nach oben,
     sobald der Text darunter zweizeilig wird. Die Texte sind so gewählt,
     dass sie einzeilig bleiben. */
  min-height: 4.2rem;
}

.karte__preis small {
  display: block;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--grau-hell);
  margin-top: 0.2rem;
}

/* Detaillierte Leistungsblöcke (leistungen.html) */

.leistung-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--linie);
}

.leistung-block:first-of-type { border-top: none; padding-top: 0; }

.leistung-block__nr {
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--messing);
  display: block;
  margin-bottom: 1rem;
}

.leistung-block h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

.leistung-block ul {
  list-style: none;
  padding: 0;
  margin-top: 1.6rem;
}

.leistung-block li {
  position: relative;
  padding-left: 1.7rem;
  font-size: var(--fs-s);
  color: var(--grau);
  margin-bottom: 0.7rem;
}

.leistung-block li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--messing);
}

.preis-box {
  background: var(--papier-warm);
  border: 1px solid var(--linie);
  border-radius: var(--radius-gross);
  padding: clamp(1.5rem, 3vw, 2rem);
}

.preis-box__zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--linie);
  font-size: var(--fs-s);
}

.preis-box__zeile:last-of-type { border-bottom: none; }

.preis-box__wert {
  font-family: var(--display);
  font-weight: 700;
  color: var(--gruen);
  white-space: nowrap;
}

.preis-box__hinweis {
  font-size: var(--fs-xs);
  color: var(--grau-hell);
  margin-top: 1rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .leistung-block { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- 8. Zielgruppen */

.zielgruppen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--linie-dunkel);
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--radius-gross);
  overflow: hidden;
}

.zielgruppe {
  background: var(--gruen);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
}

.zielgruppe h3 {
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
}

.zielgruppe p {
  font-size: var(--fs-s);
  color: rgba(244, 246, 243, 0.72);
  line-height: 1.6;
}

/* ---------------------------------------------------------- 9. Ablauf */

.ablauf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: schritt;
}

.schritt {
  position: relative;
  padding-top: 2.6rem;
  border-top: 2px solid var(--linie);
  counter-increment: schritt;
}

.schritt::before {
  content: counter(schritt, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 0;
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--messing);
}

.schritt::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 42px;
  height: 2px;
  background: var(--messing);
}

.schritt h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.schritt p {
  font-size: var(--fs-s);
  color: var(--grau);
  line-height: 1.6;
}

/* ----------------------------------------------------- 10. Text & Bild */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--eng { align-items: start; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__bild-nur-desktop { display: none; }
}

.bild {
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
  background: var(--gruen);
  aspect-ratio: 4 / 3;
}

.bild--hoch { aspect-ratio: 3 / 4; }

.bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------- 11. Region */

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.orte li {
  margin: 0;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--linie-dunkel);
  border-radius: 100px;
  color: rgba(244, 246, 243, 0.85);
}

/* ------------------------------------------------------------ 12. FAQ */

.faq {
  border-top: 1px solid var(--linie);
}

.faq details {
  border-bottom: 1px solid var(--linie);
}

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--messing);
  transition: transform var(--transition);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq__antwort {
  max-width: 68ch;
  font-size: var(--fs-s);
  color: var(--grau);
  line-height: 1.7;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-bottom: 0;
  transition: max-height 0.48s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.32s ease,
              padding-bottom 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

details[open] .faq__antwort {
  max-height: 600px;
  opacity: 1;
  padding-bottom: 1.7rem;
}

.faq summary:hover { color: var(--gruen-hell); }

/* --------------------------------------------------------- 13. CTA-Band */

.cta-band {
  background: var(--gruen-tief);
  color: var(--papier);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.cta-band h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  max-width: 18ch;
  margin-bottom: 0.6rem;
}

.cta-band p {
  color: rgba(244, 246, 243, 0.72);
  max-width: 46ch;
}

/* -------------------------------------------------------- 14. Kontakt */

.kontakt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .kontakt-grid { grid-template-columns: 1fr; }
}

.formular {
  display: grid;
  gap: 1.1rem;
}

.feld {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.feld label {
  font-family: var(--display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.feld input,
.feld select,
.feld textarea {
  font-family: var(--body);
  font-size: var(--fs-s);
  color: var(--anthrazit);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--gruen-hell);
  outline: none;
  box-shadow: 0 0 0 3px rgba(44, 79, 56, 0.12);
}

.feld textarea { resize: vertical; min-height: 150px; }

.feld-reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

@media (max-width: 560px) {
  .feld-reihe { grid-template-columns: 1fr; }
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--grau);
}

.checkbox input {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--gruen);
}

/* Spamfalle, für Menschen unsichtbar, für Bots ausfüllbar */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rückmeldung nach dem Absenden */
.status {
  font-size: var(--fs-xs);
  line-height: 1.6;
  padding: 0.95rem 1.1rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--grau-hell);
  background: var(--papier-warm);
  margin: 0;
}

.status--erfolg {
  border-left-color: var(--gruen);
  background: rgba(44, 79, 56, 0.09);
  color: var(--gruen);
  font-weight: 600;
}

.status--hinweis {
  border-left-color: var(--messing);
  background: rgba(183, 154, 91, 0.13);
  color: var(--anthrazit);
}

.status--fehler {
  border-left-color: #A33A2A;
  background: rgba(163, 58, 42, 0.09);
  color: #8C2F21;
}

.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"],
.feld textarea[aria-invalid="true"] {
  border-color: #A33A2A;
  background: rgba(163, 58, 42, 0.04);
}

.kontakt-daten {
  background: var(--gruen);
  color: var(--papier);
  border-radius: var(--radius-gross);
  padding: clamp(1.8rem, 3.5vw, 2.5rem);
}

.kontakt-daten h3 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

.kontakt-zeile {
  display: block;
  padding-block: 1rem;
  border-top: 1px solid var(--linie-dunkel);
}

.kontakt-zeile__label {
  display: block;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 0.35rem;
}

.kontakt-zeile a,
.kontakt-zeile span {
  font-size: var(--fs-s);
  color: var(--weiss);
  text-decoration: none;
  line-height: 1.55;
}

.kontakt-zeile a:hover { text-decoration: underline; }

/* Hover-Highlight auf Kontakt-Zeilen (dunkle Karte) */
.kontakt-daten .kontakt-zeile {
  transition: background var(--transition), padding-inline var(--transition), border-radius var(--transition);
}
.kontakt-daten .kontakt-zeile:hover {
  background: rgba(255,255,255,0.06);
  padding-inline: 0.65rem;
  border-radius: var(--radius);
}

/* Hover-Lift auf Trust-Liste */
.kontakt-vertrauen__liste li {
  transition: transform var(--transition), color var(--transition);
  cursor: default;
}
.kontakt-vertrauen__liste li:hover {
  transform: translateX(5px);
}
.kontakt-vertrauen__liste li:hover span {
  color: var(--gruen);
  font-weight: 600;
}
.kontakt-vertrauen__liste svg {
  transition: transform var(--transition), color var(--transition);
}
.kontakt-vertrauen__liste li:hover svg {
  transform: scale(1.2);
  color: var(--gruen);
}

/* Seitenkopf — dekorative Ringe */
.seitenkopf__deko {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.seitenkopf__deko::before,
.seitenkopf__deko::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.seitenkopf__deko::before {
  right: -80px;
  top: -80px;
  width: 440px;
  height: 440px;
  border: 1.5px solid rgba(183, 154, 91, 0.14);
  animation: deko-drehen 55s linear infinite;
}
.seitenkopf__deko::after {
  right: 100px;
  top: 60px;
  width: 230px;
  height: 230px;
  border: 1px solid rgba(183, 154, 91, 0.07);
  animation: deko-drehen 32s linear infinite reverse;
}

/* Trust-Badges: gestaffeltes Einblenden beim Laden */
.seitenkopf__vertrauen span {
  animation: sanft-einblenden 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.seitenkopf__vertrauen span:nth-child(1) { animation-delay: 0.25s; }
.seitenkopf__vertrauen span:nth-child(2) { animation-delay: 0.4s; }
.seitenkopf__vertrauen span:nth-child(3) { animation-delay: 0.55s; }
.seitenkopf__vertrauen span:nth-child(4) { animation-delay: 0.7s; }

/* Form-Felder: verfeinerter Hover */
.feld input:hover:not(:focus),
.feld select:hover:not(:focus),
.feld textarea:hover:not(:focus) {
  border-color: var(--grau-hell);
  box-shadow: 0 2px 10px rgba(23, 53, 34, 0.07);
}

/* WhatsApp-Button: Puls-Ring */
@keyframes wa-puls {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.35); }
  60%  { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.btn[href*="wa.me"] {
  animation: wa-puls 2.8s ease infinite;
}

/* --------------------------------------------------------- 15. Footer */

.footer {
  background: var(--gruen-tief);
  color: rgba(244, 246, 243, 0.7);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: var(--fs-s);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linie-dunkel);
}

@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__marke {
  display: block;
  height: 148px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 1.4rem;
}

.footer h4 {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 1.1rem;
}

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

.footer li { margin-bottom: 0.55rem; }

.footer a {
  text-decoration: none;
  color: rgba(244, 246, 243, 0.7);
  transition: color var(--transition);
}

.footer a:hover { color: var(--weiss); }

.footer__text {
  max-width: 34ch;
  font-size: var(--fs-xs);
  line-height: 1.7;
  margin-top: 1.2rem;
}

.footer__adresse {
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.9;
  margin-top: 1rem;
  color: rgba(244, 246, 243, 0.65);
}

.footer__adresse a {
  color: rgba(244, 246, 243, 0.7);
}

.footer__zeiten {
  font-size: var(--fs-xs);
  color: rgba(244, 246, 243, 0.45);
  margin-top: 0.75rem;
}

.footer__orte {
  columns: 2;
  column-gap: 0.8rem;
}

.footer__orte-mehr {
  font-size: var(--fs-xs);
  color: rgba(244, 246, 243, 0.4);
  margin-top: 0.6rem;
}

.footer__h4-nachfolger {
  margin-top: 1.6rem;
}

.footer__seo {
  border-top: 1px solid var(--linie-dunkel);
  padding-top: 1.6rem;
  padding-bottom: 1.4rem;
  font-size: var(--fs-xs);
  color: rgba(244, 246, 243, 0.38);
  line-height: 1.8;
}

.footer__seo strong {
  color: rgba(244, 246, 243, 0.52);
  font-weight: 500;
}

.footer__unten {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linie-dunkel);
  font-size: var(--fs-xs);
  color: rgba(244, 246, 243, 0.45);
}

/* ------------------------------------------------------- 16. Animation */

[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 380ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].ist-sichtbar {
  opacity: 1;
  transform: none;
}

@keyframes btn-schein {
  0%   { left: -120%; }
  100% { left: 160%; }
}

@keyframes deko-drehen {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sanft-einblenden {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------- 17. Rechtstexte */

.rechtstext {
  max-width: 72ch;
}

.rechtstext h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  margin-top: 2.8rem;
}

.rechtstext h3 {
  font-size: 1.15rem;
  margin-top: 1.8rem;
}

.rechtstext p,
.rechtstext li {
  font-size: var(--fs-s);
  color: var(--grau);
  line-height: 1.75;
}

.hinweis {
  background: var(--papier-warm);
  border-left: 3px solid var(--messing);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.2rem 1.4rem;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--grau);
  margin-bottom: 2rem;
}

.hinweis strong { color: var(--anthrazit); }

/* Druck */
@media print {
  .header, .footer, .cta-band, .burger { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   18. BILDGETRIEBENE BAUSTEINE
   Alle Bildflächen funktionieren auch ohne Foto: fehlt die Datei, entfernt
   main.js das <img> und der gestaltete Platzhalter darunter bleibt stehen.
   ========================================================================== */

/* ------------------------------------------- 18.1 Farbton hinter dem Bild */
/* Sichtbar nur, falls eine Bilddatei einmal fehlt. */

.bild--stein  { background: var(--stein-tief); }
.bild--sand   { background: var(--sand); }
.bild--salbei { background: var(--salbei); }

.bild--breit   { aspect-ratio: 16 / 9; }
.bild--quadrat { aspect-ratio: 1 / 1; }

/* -------------------------------------------------- 18.2 Hero mit Foto */

.hero__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--gruen);
}

.hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.hero__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(14, 33, 22, 0.92) 0%,
      rgba(14, 33, 22, 0.70) 46%,
      rgba(23, 53, 34, 0.22) 100%);
}

.hero__inner { position: relative; z-index: 3; }
.schnittkante { z-index: 4; }
.schnittkante-notiz { z-index: 5; }

/* -------------------------------------------- 18.3 Karte mit Bildkopf */

.karte--bild { padding: 0; overflow: hidden; }

.karte--bild .karte__foto {
  position: relative;
  aspect-ratio: 16 / 10;
  margin: 0;
  border-radius: 0;
}

.karte--bild .karte__inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 2.6vw, 1.9rem);
}

.karte--bild h3 { margin-bottom: 0.5rem; }

/* Kleines Emblem, das auf dem Bild sitzt */
.karte__marke {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--gruen);
  color: var(--weiss);
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 0 var(--radius) 0 0;
}

/* -------------------------------------- 18.4 Zielgruppen mit Icon oben */

.zielgruppen-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.zielgruppe-karte {
  display: flex;
  flex-direction: column;
}

.zielgruppe-karte {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--linie-stein);
  border-radius: var(--radius-gross);
  padding: clamp(1.8rem, 3.5vw, 2.4rem);
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}

.zielgruppe-karte:hover {
  border-color: var(--salbei);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(74, 64, 56, 0.10);
}

.zielgruppe-karte h3 {
  font-size: 1.3rem;
  color: var(--gruen-tief);
  margin-bottom: 0.6rem;
}

.zielgruppe-karte p {
  font-size: var(--fs-s);
  color: #6A6055;
  line-height: 1.65;
  margin: 0 0 1.3rem;
}

.zielgruppe-karte__punkte {
  list-style: none;
  padding: 1.1rem 0 0;
  margin: auto 0 0;       /* auto oben: schiebt den Block ans untere Kartenende */
  border-top: 1px solid var(--linie-stein);
  /* Feste Höhe des Punkteblocks, damit die Trennlinie in allen drei
     Karten auf exakt derselben Höhe sitzt. */
  min-height: 6.5rem;
}

.zielgruppe-karte__punkte li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.55rem;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--rinde);
}

.zielgruppe-karte__punkte li:last-child { margin-bottom: 0; }

.zielgruppe-karte__punkte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  background: var(--messing);
}

/* Icon-Plakette über der Überschrift */
.icon-plakette {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1.5rem;
  border-radius: var(--radius);
  background: var(--gruen);
  color: var(--papier);
}

.icon-plakette svg {
  width: 32px;
  height: 32px;
  display: block;
}

.zielgruppe-karte:hover .icon-plakette { background: var(--gruen-tief); }

/* ---------------------------------------------------- 18.5 Bildergalerie */

.galerie {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 15vw, 210px);
  gap: 1rem;
}

.galerie .bild {
  aspect-ratio: auto;
  height: 100%;
  margin: 0;
}

.galerie__gross { grid-column: span 2; grid-row: span 2; }
.galerie__breit { grid-column: span 2; }

@media (max-width: 900px) {
  .galerie { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .galerie { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .galerie__gross,
  .galerie__breit { grid-column: span 1; grid-row: span 1; }
}

/* Bildunterschrift innerhalb einer Bildfläche */
.bild__notiz {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--weiss);
  background: rgba(14, 33, 22, 0.82);
  padding: 0.45rem 0.85rem;
  border-radius: 0 var(--radius) 0 0;
}

/* ------------------------------------------------- 18.6 Steinabschnitte */

.sektion--stein {
  background: var(--stein);
  color: var(--rinde);
}

.sektion--stein h2,
.sektion--stein h3 { color: var(--gruen-tief); }

.sektion--stein .lead { color: #6A6055; }

.sektion--stein .karte {
  background: rgba(255, 255, 255, 0.62);
  border-color: var(--linie-stein);
}

.sektion--stein .orte li {
  border-color: var(--linie-stein);
  color: var(--rinde);
  background: rgba(255, 255, 255, 0.45);
}

.sektion--stein .schritt { border-top-color: var(--linie-stein); }
.sektion--stein .schritt p { color: #6A6055; }

.sektion--stein .faq,
.sektion--stein .faq details { border-color: var(--linie-stein); }
.sektion--stein .faq__antwort { color: #6A6055; }

/* -------------------------------------------- 18.7 Bildband über volle Breite */

.bildband {
  position: relative;
  min-height: clamp(300px, 42vw, 480px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gruen);
}

.bildband .bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 0;
}

.bildband__schleier {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg,
      rgba(14, 33, 22, 0.95) 0%,
      rgba(14, 33, 22, 0.88) 42%,
      rgba(14, 33, 22, 0.34) 100%),
    linear-gradient(180deg,
      rgba(14, 33, 22, 0.30) 0%,
      rgba(14, 33, 22, 0) 45%);
}

.bildband__inhalt {
  position: relative;
  z-index: 4;
  color: var(--papier);
  padding-block: clamp(3rem, 6vw, 5rem);
  max-width: 56ch;
}

.bildband__inhalt h2 {
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(14, 33, 22, 0.55);
}

.bildband__inhalt p {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 1px 12px rgba(14, 33, 22, 0.5);
}

.bildband .label { color: var(--messing); }

/* CTA-Band mit Foto im Hintergrund */
.cta-band { position: relative; overflow: hidden; }
.cta-band .bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 0;
}
.cta-band__inner { position: relative; z-index: 4; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(90deg,
    rgba(14, 33, 22, 0.90) 0%,
    rgba(14, 33, 22, 0.55) 100%);
}

/* --------------------------------------------- 18.8 Fakten auf Steinton */

.fakten--stein { background: var(--stein); border-top: none; }
.fakten--stein .fakten__grid { background: var(--linie-stein); }
.fakten--stein .fakten__item { background: var(--stein); }
.fakten--stein .fakten__zahl { color: var(--gruen-tief); }
.fakten--stein .fakten__text { color: #6A6055; }

.fakten__ikon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  color: var(--messing);
  margin-bottom: 1rem;
}
.fakten--stein .fakten__ikon {
  background: rgba(23, 53, 34, 0.09);
  color: var(--gruen);
}
.fakten__ikon svg { width: 20px; height: 20px; flex: none; }

/* --------------------------------------------- 19. Startseite Leistungskacheln */

.leistungen-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 3rem 0 2.5rem;
}

.leistung-kachel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--stein);
  border-radius: var(--radius-gross);
  border: 1px solid var(--linie-stein);
  text-decoration: none;
  color: inherit;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 220ms, border-color 220ms;
}

.leistung-kachel:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(74, 64, 56, 0.12);
  border-color: var(--salbei);
}

.leistung-kachel__ikon {
  width: 48px;
  height: 48px;
  background: rgba(23, 53, 34, 0.09);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gruen);
  margin-bottom: 1.2rem;
  flex: none;
  transition: background var(--transition), color var(--transition),
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.leistung-kachel__ikon svg { width: 24px; height: 24px; flex: none; }
.leistung-kachel:hover .leistung-kachel__ikon {
  background: var(--gruen);
  color: var(--messing);
  transform: scale(1.08) rotate(-4deg);
}

.leistung-kachel__name {
  display: block;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--gruen-tief);
  margin-bottom: 0.5rem;
  transition: color var(--transition);
}
.leistung-kachel:hover .leistung-kachel__name { color: var(--gruen); }

.leistung-kachel__text {
  font-size: var(--fs-xs);
  color: var(--grau);
  line-height: 1.55;
  flex: 1;
  margin: 0 0 1.3rem;
}

.leistung-kachel__mehr {
  font-size: var(--fs-xs);
  font-family: var(--display);
  font-weight: 600;
  color: var(--messing);
  letter-spacing: 0.02em;
  transition: letter-spacing 200ms;
}
.leistung-kachel:hover .leistung-kachel__mehr { letter-spacing: 0.05em; }

@media (max-width: 860px) {
  .leistungen-showcase { grid-template-columns: repeat(2, 1fr); }
  .leistung-kachel:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 480px; margin-inline: auto; width: 100%; }
}
@media (max-width: 500px) {
  .leistungen-showcase { grid-template-columns: 1fr; }
  .leistung-kachel:last-child:nth-child(odd) { max-width: none; margin-inline: 0; }
}


/* ==========================================================================
   20. ZURÜCK NACH OBEN
   Erscheint erst, wenn nach unten gescrollt wurde. Weil es keine
   mitscrollende Kopfzeile mehr gibt, ist das der Weg zurück zur Navigation.
   ========================================================================== */

.nach-oben {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid rgba(244, 246, 243, 0.18);
  border-radius: 50%;
  background: var(--gruen);
  color: var(--papier);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(14, 33, 22, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition), background var(--transition);
}

.nach-oben[data-sichtbar="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nach-oben:hover {
  background: var(--messing);
  color: var(--gruen-tief);
}

.nach-oben svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 560px) {
  .nach-oben { width: 48px; height: 48px; }
}

@media print {
  .nach-oben { display: none; }
}


/* ==========================================================================
   21. RESPONSIVE FEINSCHLIFF
   Durchgang von 320 px bis 2560 px. Umbruchpunkte: 1200, 940, 860, 700,
   560, 400 px.
   ========================================================================== */

/* Nichts darf horizontal überstehen */
img, svg, video, table, pre { max-width: 100%; }
h1, h2, h3, h4, p, li, summary, td, th { overflow-wrap: break-word; }

/* Sehr breite Bildschirme: Zeilen nicht endlos laufen lassen */
@media (min-width: 1600px) {
  :root { --breite: 1320px; }
  .hero__text, .seitenkopf p { max-width: 56ch; }
}

/* Tablet quer */
@media (max-width: 1200px) {
  .kontakt-grid { gap: clamp(2rem, 4vw, 3rem); }
  .galerie { grid-auto-rows: clamp(130px, 16vw, 190px); }
}

/* Kopfleiste umbrechen lassen, bevor etwas gequetscht wird */
@media (max-width: 940px) {
  .kopfleiste {
    flex-wrap: wrap;
    row-gap: 1rem;
  }
  .marke { flex: 1 1 auto; }
}

/* Tablet hoch */
@media (max-width: 860px) {
  .fakten__grid { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .cta-band__inner .btn-gruppe { width: 100%; }
  .leistung-block .preis-box { max-width: 520px; }
}

/* Kleine Tablets und große Handys */
@media (max-width: 700px) {
  .hero { min-height: auto; }
  .hero__inner { padding-bottom: clamp(7rem, 22vw, 10rem); }
  .zielgruppen-icons,
  .leistungen-grid { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr 1fr; }
  .footer__unten { flex-direction: column; gap: .5rem; }
  .orte li { font-size: .85rem; padding: 0.45rem 0.8rem; }
}

/* Handy */
@media (max-width: 560px) {
  .btn-gruppe { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .btn-gruppe .pfeil-link { width: auto; }
  .fakten__grid { grid-template-columns: 1fr; }
  .ablauf { grid-template-columns: 1fr; }
  .faq summary { gap: 1rem; font-size: 1.02rem; }
  .preis-box__zeile { flex-direction: column; gap: .2rem; align-items: flex-start; }
  .kontakt-daten { padding: 1.4rem; }
  .schnittkante-notiz { display: none; }
}

/* Sehr schmale Geräte, iPhone SE und älter */
@media (max-width: 400px) {
  :root { --gutter: 1.1rem; }
  .marke__logo { height: 58px; max-width: 58vw; }
  .header__tel { padding: 0.6rem 0.7rem; }
  .burger { width: 42px; height: 42px; }
  .burger span { left: 11px; }
  .nach-oben { width: 44px; height: 44px; }
  .galerie { grid-auto-rows: 170px; }
}

/* Querformat auf dem Handy: Hero darf nicht die ganze Höhe fressen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .marke__logo { height: 56px; }
}

/* Touch-Bedienung: Ziele groß genug */
@media (hover: none) {
  .nav a { padding-block: 0.7rem; }
  .footer a, .brotkrumen a { display: inline-block; padding-block: 0.15rem; }
}


/* Einspaltige Darstellung: dort stehen die Karten untereinander, eine feste
   Höhe für die Fußblöcke würde nur Leerraum erzeugen. */
@media (max-width: 700px) {
  .karte__preis { min-height: 0; }
  .zielgruppe-karte__punkte { min-height: 0; }
}


/* ==========================================================================
   22. ÜBER UNS — Gartenthema
   Speziell für ueber-uns.html: Hecken-Übergang, Jahresrhythmus,
   Karten-Icons, Vogelschutz-Box.
   ========================================================================== */

/* Hecken-Silhouette zwischen Header und erstem Abschnitt */
.hecke-uebergang {
  background: var(--papier);
  line-height: 0;
  position: relative;
  z-index: 2;
  margin-top: -1px;
}
.hecke-uebergang svg {
  display: block;
  width: 100%;
  height: clamp(38px, 5.5vw, 68px);
}

/* Wert-Icons und Werkzeug-Icons in Karten */
.wert-ikon {
  width: 48px;
  height: 48px;
  background: rgba(23, 53, 34, 0.08);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
  color: var(--gruen);
  transition: background var(--transition), color var(--transition),
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.karte:hover .wert-ikon {
  background: var(--gruen);
  color: var(--messing);
  transform: scale(1.1) rotate(-6deg);
}

.wert-ikon svg {
  width: 22px;
  height: 22px;
  flex: none;
}

/* Jahresrhythmus-Abschnitt */
.jahres-band {
  background: var(--gruen);
  color: var(--papier);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.jahres-band .sektion-kopf {
  max-width: 64ch;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.jahres-band .label { color: var(--messing); }
.jahres-band h2 { color: var(--weiss); }
.jahres-band .lead { color: rgba(244, 246, 243, 0.72); }

.jahres-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

@media (max-width: 960px) {
  .jahres-grid { grid-template-columns: 1fr 1fr; }
}

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

.jahres-karte {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-gross);
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition);
}

.jahres-karte:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(183, 154, 91, 0.3);
  transform: translateY(-2px);
}

.jahres-karte__ikon {
  width: 42px;
  height: 42px;
  background: rgba(183, 154, 91, 0.14);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--messing);
  margin-bottom: 1.1rem;
  flex: none;
  transition: background var(--transition);
}

.jahres-karte:hover .jahres-karte__ikon {
  background: rgba(183, 154, 91, 0.26);
}

.jahres-karte__ikon svg {
  width: 20px;
  height: 20px;
}

.jahres-karte__saison {
  font-family: var(--display);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--messing);
  margin-bottom: 0.1rem;
}

.jahres-karte__monate {
  font-size: var(--fs-xs);
  color: rgba(244, 246, 243, 0.38);
  margin-bottom: 0.9rem;
}

.jahres-karte h3 {
  color: var(--weiss);
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
}

.jahres-karte ul {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
}

.jahres-karte li {
  font-size: 0.875rem;
  color: rgba(244, 246, 243, 0.66);
  padding-left: 1.05rem;
  position: relative;
  margin-bottom: 0.38rem;
  line-height: 1.5;
}

.jahres-karte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 4px;
  height: 4px;
  background: var(--messing);
  border-radius: 50%;
}

.jahres-karte__hinweis {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.77rem;
  color: rgba(244, 246, 243, 0.33);
  font-style: italic;
  line-height: 1.55;
}

/* Vogelschutz-Infobox im Naturschutz-Abschnitt */
.vogel-box {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--papier-warm);
  border-left: 3px solid var(--messing);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem;
  margin-top: 1.8rem;
}

.vogel-box__ikon {
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--gruen);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--messing);
}

.vogel-box__ikon svg {
  width: 18px;
  height: 18px;
}

.vogel-box__text {
  font-size: var(--fs-xs);
  color: var(--grau);
  line-height: 1.65;
}

.vogel-box__text strong {
  color: var(--anthrazit);
}

/* Naturschutz-Abschnitt: Heckenfoto als Vollbild-Hintergrund */
.natur-bildband {
  position: relative;
  min-height: clamp(480px, 68vw, 700px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--gruen-tief);
}

.natur-bildband .bild {
  position: absolute;
  inset: 0;
  margin: 0;
  aspect-ratio: auto;
  border-radius: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.natur-bildband .bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.natur-bildband__schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(14, 33, 22, 0.97) 0%,
      rgba(14, 33, 22, 0.90) 40%,
      rgba(14, 33, 22, 0.42) 100%),
    linear-gradient(180deg,
      rgba(14, 33, 22, 0.50) 0%,
      rgba(14, 33, 22, 0) 50%);
}

.natur-bildband__inhalt {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  max-width: 60ch;
  color: var(--papier);
}

.natur-bildband .label { color: var(--messing); }
.natur-bildband h2 { color: #fff; text-shadow: 0 2px 18px rgba(14, 33, 22, 0.6); }
.natur-bildband p { color: rgba(244, 246, 243, 0.84); text-shadow: 0 1px 10px rgba(14, 33, 22, 0.5); }

.natur-bildband .vogel-box {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--messing);
}
.natur-bildband .vogel-box__ikon { background: rgba(183, 154, 91, 0.2); }
.natur-bildband .vogel-box__text { color: rgba(244, 246, 243, 0.76); }
.natur-bildband .vogel-box__text strong { color: var(--messing); }

/* ==========================================================================
   23. LEISTUNGEN — Aufgehübschte Einzelsektionen
   ========================================================================== */

/* Icon über der Leistungsnummer */
.leistung-ikon {
  width: 52px;
  height: 52px;
  background: rgba(23, 53, 34, 0.08);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gruen);
  margin-bottom: 1.2rem;
  transition: background var(--transition), color var(--transition),
              transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sektion--stein .leistung-ikon { background: rgba(23, 53, 34, 0.1); }
.leistung-ikon svg { width: 26px; height: 26px; flex: none; }

/* Kein Trennstrich wenn leistung-block in eigener Sektion */
.sektion > .wrap > article.leistung-block {
  border-top: none;
  padding-top: 0;
}

/* Dunkles Zwischenband */
.leistung-band {
  background: var(--gruen);
  color: var(--papier);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
}
.leistung-band .label { color: var(--messing); }
.leistung-band h2 {
  color: #fff;
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: 1rem;
}
.leistung-band p {
  color: rgba(244, 246, 243, 0.78);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 0;
}

/* ========================================== 26. Marquee-Ticker */

.marquee-band {
  background: var(--gruen);
  overflow: hidden;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.marquee-spur {
  display: inline-flex;
  align-items: center;
  width: max-content;
  animation: marquee-lauf 38s linear infinite;
}

.marquee-spur:hover { animation-play-state: paused; }

.marquee-item {
  padding: 0 1.6rem;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 246, 243, 0.55);
  white-space: nowrap;
}

.marquee-punkt {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--messing);
  flex: none;
}

@keyframes marquee-lauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

/* ======================================= 27. Horizontale Galerie */

.galerie-horizontal {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--gutter) 1rem;
  margin-top: 2.5rem;
  cursor: grab;
}

.galerie-horizontal::after {
  content: "";
  flex: none;
  width: var(--gutter);
  height: 1px;
}

.galerie-horizontal.ist-aktiv { cursor: grabbing; }
.galerie-horizontal::-webkit-scrollbar { display: none; }

.galerie-horizontal figure {
  flex: none;
  width: clamp(240px, 34vw, 400px);
  height: clamp(180px, 24vw, 280px);
  scroll-snap-align: start;
  border-radius: var(--radius-gross);
  overflow: hidden;
  margin: 0;
}

.galerie-horizontal figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 500ms ease;
}

.galerie-horizontal:not(.ist-aktiv) figure:hover img {
  transform: scale(1.07);
}

/* ========================================= 28. Hero-Animationen */

.hero__foto img {
  transform-origin: center center;
  animation: hero-kenburns 16s ease-out forwards;
}

.hero__schleier {
  animation: hero-schleier 3s ease forwards;
}

.hero__eyebrow {
  animation: hero-aufsteigen 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.hero h1 {
  animation: hero-aufsteigen 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.hero__text {
  animation: hero-aufsteigen 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.78s both;
}

.hero__inner .btn-gruppe {
  animation: hero-aufsteigen 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
}

@keyframes hero-kenburns {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

@keyframes hero-schleier {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

@keyframes hero-aufsteigen {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__foto img,
  .hero__schleier,
  .hero__eyebrow,
  .hero h1,
  .hero__text,
  .hero__inner .btn-gruppe {
    animation: none;
  }
}

/* ========================================= 29. Cookie-Popup */

.cookie-hinweis[hidden] {
  display: none;
}

.cookie-hinweis {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14,33,22,0.55);
  padding: 1.5rem;
  backdrop-filter: blur(2px);
}

.cookie-hinweis__inner {
  background: var(--papier);
  border-radius: 12px;
  padding: 2rem 2rem 1.75rem;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 8px 48px rgba(0,0,0,0.28);
}

.cookie-hinweis__titel {
  display: block;
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gruen);
  margin: 0 0 0.75rem;
}

.cookie-hinweis p {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--rinde);
}

.cookie-hinweis a {
  color: var(--messing);
  text-decoration: underline;
}

.cookie-hinweis__btn {
  background: var(--gruen);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.7rem 1.5rem;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  width: 100%;
}

.cookie-hinweis__btn:hover {
  background: var(--gruen-tief);
}

/* ========================================= 33. Aufbau-Hinweis */

.aufbau-hinweis {
  background: var(--stein);
  border-left: 3px solid var(--messing);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
  margin-bottom: 2.5rem;
  font-size: 0.9rem;
  color: var(--rinde);
  line-height: 1.55;
}

.aufbau-hinweis p { margin: 0; }

/* ========================================= 30. Bewertungen */

.bewertungen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.bewertung-karte {
  background: var(--papier);
  border: 1px solid var(--linie-stein);
  border-radius: 10px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bewertung-karte__sterne {
  color: #FBBC04;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1;
}

.bewertung-karte__text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--rinde);
  flex: 1;
}

.bewertung-karte__autor {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gruen);
}

.bewertung-karte__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #8a8070;
  border-top: 1px solid var(--linie-stein);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}

.bewertungen-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ========================================= 31. Referenzen */

.referenz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.referenz-karte {
  background: var(--papier);
  border: 1px solid var(--linie-stein);
  border-radius: 10px;
  overflow: hidden;
}

.referenz-karte__bilder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 200px;
}

.referenz-karte__bild {
  position: relative;
  background: var(--stein);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  overflow: hidden;
}

.referenz-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.referenz-karte__bild-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(14,33,22,0.72);
  color: #fff;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.25rem 0.5rem;
}

.referenz-karte__platzhalter {
  color: var(--salbei);
  font-size: 0.78rem;
  text-align: center;
}

.referenz-karte__inhalt {
  padding: 1.25rem;
}

.referenz-karte__leistung {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--messing);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.referenz-karte__titel {
  font-family: 'Archivo', Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gruen);
  margin: 0 0 0.4rem;
}

.referenz-karte__ort {
  font-size: 0.85rem;
  color: var(--salbei);
  margin-bottom: 0.6rem;
}

.referenz-karte__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--rinde);
  margin: 0;
}

/* ========================================= 32. FAQ-Gruppen */

.faq-gruppen {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.faq-gruppe__titel {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--messing);
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--linie-stein);
}