/* =========================================================================
   GARTENBAU PLATZ – Designsystem
   Farben stammen direkt aus dem Original-Logo:
   Dunkelgrün #183C2E · Blattgrün #7AA434 · Rot #B73920 · Creme #FEFAF1
   ========================================================================= */

/* ------------------------------------------------------------ 1. FONTS */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-variable-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-variable-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ------------------------------------------------------------ 2. TOKEN */
:root {
  /* Marke */
  --gruen-900: #0E2519;
  --gruen-800: #183C2E;
  --gruen-700: #21503C;
  --gruen-600: #2E6A4C;
  --blatt: #7AA434;
  --blatt-dunkel: #547320;  /* WCAG AA: 4.8:1 auf hellen Flächen */
  --blatt-hell: #A5C877;
  --rot: #B73920;
  --creme: #FEFAF1;
  --sand: #F3EEE1;
  --nebel: #EDF3E3;
  --stein: #E4E0D5;

  /* Text */
  --ink: #16221B;
  --text: #4A5750;
  --text-leise: #5F6B65;   /* WCAG AA: 4.8:1 auch auf Sandflächen */
  --auf-dunkel: #E9F0E5;
  --auf-dunkel-leise: #A9BCAE;

  /* Flächen */
  --bg: #FFFFFF;
  --bg-hell: var(--creme);
  --linie: #E2E5DC;
  --linie-stark: #CBD2C5;

  /* Maße */
  --wrap: 1240px;
  --wrap-eng: 780px;
  --r-s: 6px;
  --r-m: 12px;
  --r-l: 20px;
  --r-xl: 28px;

  /* Schatten */
  --sch-1: 0 1px 2px rgba(24, 60, 46, .05), 0 2px 8px rgba(24, 60, 46, .05);
  --sch-2: 0 4px 14px rgba(24, 60, 46, .08), 0 12px 34px rgba(24, 60, 46, .07);
  --sch-3: 0 10px 30px rgba(24, 60, 46, .12), 0 30px 70px rgba(24, 60, 46, .12);

  /* Bewegung */
  --e: cubic-bezier(.22, .61, .36, 1);
  --t: .38s var(--e);

  --kopf-h: 76px;
  --topbar-h: 38px;
}

/* -------------------------------------------------------------- 3. BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-fix { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  color: var(--gruen-800);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.022em;
  margin: 0 0 .55em;
  text-wrap: balance;
  /* Lange deutsche Wörter (z. B. „Datenschutzerklärung") sonst über den Rand */
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.05rem, 6.2vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.95rem); }
h3 { font-size: clamp(1.12rem, 1.9vw, 1.4rem); letter-spacing: -.014em; }
h1 em, h2 em { font-style: normal; color: var(--blatt-dunkel); }

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

a { color: var(--gruen-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blatt-dunkel); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.15em; }
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .88em; background: var(--nebel); padding: .12em .4em; border-radius: 4px; }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--gruen-800); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--r-s) var(--r-s); font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 0; color: #fff; }

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------------------------------------------------------- 4. HILFSKL. */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }

.sek { padding: clamp(64px, 9vw, 118px) 0; position: relative; }
.sek--hell { background: var(--bg-hell); }
.sek--sand { background: var(--sand); }
.sek--dunkel { background: var(--gruen-800); color: var(--auf-dunkel); }
.sek--dunkel h2, .sek--dunkel h3 { color: #fff; }
.sek--dunkel a { color: var(--blatt-hell); }

.k {
  font-family: 'Manrope', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blatt-dunkel); margin: 0 0 .9rem;
  display: flex; align-items: center; gap: .7rem;
}
.k::before { content: ''; width: 26px; height: 2px; background: var(--blatt); flex: none; }
.k--hell { color: var(--blatt-hell); }
.k--hell::before { background: var(--blatt-hell); }

.kopf { max-width: 720px; margin: 0 0 clamp(38px, 5vw, 64px); }
.kopf--hell .kopf__t { color: var(--auf-dunkel-leise); }
.kopf__t { font-size: 1.12rem; color: var(--text-leise); margin: 0; }

.lead { font-size: 1.2rem; color: var(--ink); line-height: 1.6; }
.klein { font-size: .875rem; color: var(--text-leise); }
.mitte { text-align: center; margin-top: clamp(36px, 5vw, 58px); }
.pf { color: var(--rot); font-weight: 600; }
.opt { color: var(--text-leise); font-weight: 400; font-size: .88em; }

.link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--gruen-700); text-decoration: none;
  border-bottom: 2px solid var(--blatt); padding-bottom: 2px;
  transition: gap .25s var(--e), color .25s;
}
.link:hover { gap: .85rem; color: var(--blatt-dunkel); }
.link .ico { width: 1.05em; height: 1.05em; }

.bild-rand { border-radius: var(--r-m); box-shadow: var(--sch-2); }

/* --------------------------------------------------------------- 5. BTN */
.btn {
  --btn-bg: var(--gruen-800);
  --btn-fg: #fff;
  --btn-rand: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: 'Manrope', sans-serif; font-size: .975rem; font-weight: 700;
  line-height: 1.2; letter-spacing: -.01em;
  padding: 15px 26px; border-radius: var(--r-s);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-rand);
  text-decoration: none; cursor: pointer;
  transition: transform .2s var(--e), box-shadow .25s var(--e), background .25s, color .25s, border-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.btn .ico { width: 1.05em; height: 1.05em; transition: transform .25s var(--e); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sch-2); color: var(--btn-fg); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--gruen-800); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--gruen-700); }

.btn--line { --btn-bg: transparent; --btn-fg: var(--gruen-800); --btn-rand: var(--linie-stark); }
.btn--line:hover { --btn-bg: var(--gruen-800); --btn-fg: #fff; --btn-rand: var(--gruen-800); }

.btn--line-hell { --btn-bg: transparent; --btn-fg: #fff; --btn-rand: rgba(255,255,255,.42); }
.btn--line-hell:hover { --btn-bg: #fff; --btn-fg: var(--gruen-800); --btn-rand: #fff; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--gruen-800); --btn-rand: transparent; padding-inline: 14px; }
.btn--ghost:hover { --btn-bg: var(--nebel); box-shadow: none; transform: none; }

.btn--glas {
  --btn-fg: #fff; --btn-rand: rgba(255,255,255,.5);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.btn--glas:hover { background: #fff; --btn-fg: var(--gruen-800); --btn-rand: #fff; }

.btn--klar { --btn-bg: transparent; --btn-fg: var(--gruen-700); --btn-rand: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn--klar:hover { --btn-fg: var(--blatt-dunkel); box-shadow: none; }

.btn--sm { padding: 11px 18px; font-size: .9rem; }
.btn--lg { padding: 18px 32px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-laedt { opacity: .62; pointer-events: none; }

/* ------------------------------------------------------------ 6. TOPBAR */
.topbar {
  background: var(--gruen-900); color: var(--auf-dunkel-leise);
  font-size: .82rem; height: var(--topbar-h);
  display: flex; align-items: center;
  position: relative; z-index: 60;
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar__claim { font-family: 'Manrope', sans-serif; font-weight: 600; letter-spacing: .04em; color: var(--blatt-hell); }
.topbar__links { display: flex; gap: 22px; }
.topbar__links a { color: var(--auf-dunkel-leise); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.topbar__links a:hover { color: #fff; }
.topbar__links .ico { width: 1em; height: 1em; }
@media (max-width: 860px) { .topbar { display: none; } }

/* ------------------------------------------------------------ 7. HEADER */
.hd {
  position: sticky; top: 0; z-index: 55;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--linie);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.hd__in { display: flex; align-items: center; gap: 20px; height: var(--kopf-h); }

.hd__logo { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.hd__mark { width: 46px; height: auto; transition: transform .35s var(--e); }
.hd__logo:hover .hd__mark { transform: rotate(-5deg) scale(1.06); }
.hd__name {
  font-family: 'Manrope', sans-serif; font-weight: 800; line-height: 1.02;
  font-size: 1.14rem; letter-spacing: -.025em; display: flex; flex-direction: column;
  color: var(--gruen-800);
}
.hd__name i { font-style: normal; color: var(--blatt-dunkel); }

.hd__nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.hd__nav a {
  display: block; padding: 9px 14px; border-radius: var(--r-s);
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .96rem;
  color: var(--ink); text-decoration: none; position: relative;
  transition: color .2s, background .2s;
}
.hd__nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--blatt); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--e);
}
.hd__nav a:hover { color: var(--gruen-800); }
.hd__nav a:hover::after, .hd__nav a[aria-current]::after { transform: scaleX(1); }
.hd__nav a[aria-current] { color: var(--gruen-800); }

.hd__cta { display: flex; gap: 8px; }

/* Transparenter Header über dem Hero */
.hd[data-transparent="ja"]:not(.is-fest)::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--topbar-h) * -1); height: 210px;
  background: linear-gradient(to bottom, rgba(9, 26, 17, .72) 0%, rgba(9, 26, 17, .42) 46%, rgba(9, 26, 17, 0) 100%);
  pointer-events: none; z-index: -1;
}
.hd[data-transparent="ja"]:not(.is-fest) .hd__in { position: relative; }
.hd[data-transparent="ja"]:not(.is-fest) .hd__nav a,
.hd[data-transparent="ja"]:not(.is-fest) .hd__name { text-shadow: 0 1px 12px rgba(9, 26, 17, .55); }

.hd[data-transparent="ja"]:not(.is-fest) {
  background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  position: fixed; left: 0; right: 0; top: var(--topbar-h);
}
.hd[data-transparent="ja"]:not(.is-fest) .hd__name { color: #fff; }
.hd[data-transparent="ja"]:not(.is-fest) .hd__name i { color: var(--blatt-hell); }
.hd[data-transparent="ja"]:not(.is-fest) .hd__nav a { color: rgba(255, 255, 255, .93); }
.hd[data-transparent="ja"]:not(.is-fest) .btn--ghost { --btn-fg: #fff; }
.hd[data-transparent="ja"]:not(.is-fest) .btn--ghost:hover { --btn-bg: rgba(255,255,255,.16); }
.hd[data-transparent="ja"]:not(.is-fest) .btn--primary { --btn-bg: #fff; --btn-fg: var(--gruen-800); }
.hd[data-transparent="ja"]:not(.is-fest) .burger span { background: #fff; }
.hd.is-fest { box-shadow: 0 1px 0 var(--linie), var(--sch-1); }

@media (max-width: 1080px) { .hd__nav, .hd__cta { display: none; } }

/* Burger */
.burger {
  display: none; width: 46px; height: 46px; border: 0; background: transparent;
  cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  border-radius: var(--r-s);
}
.burger span { width: 24px; height: 2px; background: var(--gruen-800); border-radius: 2px; transition: transform .3s var(--e), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1080px) { .burger { display: flex; } }

/* Mobilmenü */
.mobil {
  position: fixed; inset: 0; z-index: 54;
  background: var(--creme);
  padding: calc(var(--kopf-h) + 28px) clamp(20px, 6vw, 40px) 32px;
  display: flex; flex-direction: column; gap: 26px;
  overflow-y: auto;
  animation: einblenden .3s var(--e);
}
.mobil[hidden] { display: none; }
.mobil ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mobil li { border-bottom: 1px solid var(--linie); }
.mobil a {
  display: block; padding: 17px 2px; text-decoration: none;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.32rem;
  color: var(--gruen-800); letter-spacing: -.02em;
}
.mobil a:active { color: var(--blatt-dunkel); }
.mobil__foot { display: flex; flex-direction: column; gap: 11px; margin-top: auto; }
.mobil__tel {
  display: inline-flex !important; align-items: center; justify-content: center; gap: .6rem;
  font-size: 1.06rem !important; padding: 12px !important; color: var(--text) !important;
}

/* --------------------------------------------------------------- 8. HERO */
.hero {
  position: relative; min-height: min(92vh, 880px);
  display: flex; align-items: flex-end;
  padding: calc(var(--kopf-h) + 96px) 0 clamp(70px, 9vw, 116px);
  overflow: hidden; isolation: isolate;
}
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
/* z-index 1: der Schleier muss ueber dem Bild liegen, nicht darunter.
   Ein negativer Wert wuerde ihn hinter das in-flow-<img> schieben. */
.hero__schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(9, 26, 17, .80) 0%, rgba(9, 26, 17, .74) 44%, rgba(9, 26, 17, .30) 72%, rgba(9, 26, 17, .06) 100%),
    linear-gradient(to top, rgba(9, 26, 17, .52) 0%, rgba(9, 26, 17, .26) 45%, rgba(9, 26, 17, .16) 74%, rgba(9, 26, 17, .42) 100%);
}
.hero__in { position: relative; max-width: 830px; color: #fff; }
.hero__mark {
  width: clamp(54px, 7vw, 82px); margin-bottom: 20px;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .38));
  animation: heroMarke 1s var(--e) both;
}
.hero__k { color: #fff; margin-bottom: 1rem; }
.hero__k::before { background: var(--blatt-hell); }
.hero h1 { color: #fff; margin-bottom: .3em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero__slogan {
  font-family: 'Manrope', sans-serif; font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem); color: var(--blatt-hell);
  letter-spacing: -.015em; margin-bottom: 1.1rem;
  padding-left: 18px; border-left: 3px solid var(--blatt);
}
.hero__t { font-size: clamp(1rem, 1.35vw, 1.13rem); color: rgba(255, 255, 255, .9); max-width: 62ch; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.hero__punkte {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: .93rem; color: rgba(255, 255, 255, .87);
}
.hero__punkte li { display: flex; align-items: center; gap: .5rem; }
.hero__punkte .ico { color: var(--blatt-hell); width: 1.05em; height: 1.05em; }

.hero__runter {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0;
  width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .5);
  border-radius: 14px; display: grid; place-items: start center; padding-top: 7px;
}
.hero__runter span { width: 3px; height: 8px; border-radius: 2px; background: #fff; animation: maus 1.7s infinite; }
@media (max-width: 640px) { .hero__runter { display: none; } }

@keyframes heroMarke { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes maus { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(9px); opacity: .3; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

/* --------------------------------------------------------- 9. SEITENKOPF */
.skopf {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(70px, 10vw, 122px) 0 clamp(52px, 7vw, 84px);
  display: flex; align-items: flex-end;
  min-height: min(48vh, 460px);
}
.skopf__bild { position: absolute; inset: 0; z-index: -2; }
.skopf__bild img { width: 100%; height: 100%; object-fit: cover; }
.skopf__schleier {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(9, 26, 17, .92) 0%, rgba(9, 26, 17, .74) 55%, rgba(9, 26, 17, .62) 100%),
    linear-gradient(to right, rgba(9, 26, 17, .45) 0%, rgba(9, 26, 17, 0) 75%);
}
.skopf__in { position: relative; max-width: 780px; }
.skopf h1 { color: #fff; margin-bottom: .35em; }
.skopf__t { color: rgba(255, 255, 255, .88); font-size: 1.13rem; max-width: 62ch; margin: 0; }

/* ------------------------------------------------------ 10. VORSTELLUNG */
.vorst { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(34px, 6vw, 78px); align-items: center; }
@media (max-width: 900px) { .vorst { grid-template-columns: 1fr; } }

.claim {
  display: flex; gap: 18px; align-items: stretch;
  margin: 26px 0 28px; padding: 22px 24px;
  background: var(--nebel); border-radius: var(--r-m);
}
.claim__strich { width: 4px; border-radius: 3px; background: linear-gradient(var(--blatt), var(--gruen-700)); flex: none; }
.claim__txt {
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.32; color: var(--gruen-700); letter-spacing: -.02em; margin: 0;
}
.claim__txt b { color: var(--gruen-800); }

.vorst__bild { position: relative; }
.vorst__karte {
  position: absolute; right: -14px; bottom: -22px; max-width: 280px;
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 16px 18px; box-shadow: var(--sch-2);
}
.vorst__karte .ico { color: var(--blatt-dunkel); width: 1.6rem; height: 1.6rem; }
.vorst__karte p { margin: 0; font-size: .9rem; line-height: 1.5; }
.vorst__karte b { display: block; font-family: 'Manrope', sans-serif; color: var(--gruen-800); font-size: .98rem; }
.vorst__karte span { color: var(--text-leise); }
@media (max-width: 560px) { .vorst__karte { position: static; margin-top: 14px; max-width: none; } }

/* ------------------------------------------------------- 11. LEISTUNGEN */
.lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 22px; }

.lk {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .35s var(--e), box-shadow .35s var(--e), border-color .35s;
}
.lk:hover { transform: translateY(-5px); box-shadow: var(--sch-3); border-color: var(--blatt-hell); }
.lk__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--nebel); }
.lk__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--e); }
.lk:hover .lk__bild img { transform: scale(1.055); }
.lk__in { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.lk__ico {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--nebel); color: var(--gruen-700); margin-bottom: 16px;
  transition: background .3s, color .3s;
}
.lk__ico .ico { width: 24px; height: 24px; }
.lk:hover .lk__ico { background: var(--gruen-800); color: #fff; }
.lk h3 { margin-bottom: .3em; }
.lk__kurz { font-weight: 600; color: var(--blatt-dunkel); font-size: .95rem; margin-bottom: .7em; }
.lk__text { font-size: .97rem; margin-bottom: 1.1em; }
.lk__punkte { list-style: none; margin: 0 0 1.4em; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.lk__punkte li { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; color: var(--text); }
.lk__punkte .ico { color: var(--blatt); width: 1.05em; height: 1.05em; margin-top: .25em; }
.lk__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .92rem;
  color: var(--gruen-800); text-decoration: none; transition: gap .25s var(--e), color .25s;
}
.lk__cta .ico { width: 1em; height: 1em; }
.lk__cta:hover { gap: .85rem; color: var(--blatt-dunkel); }

/* --------------------------------------------------------- 12. VORTEILE */
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-m); overflow: hidden; }
.vk { background: var(--gruen-800); padding: 30px 28px 34px; transition: background .35s; }
.vk:hover { background: var(--gruen-700); }
.vk__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: rgba(255,255,255,.09); color: var(--blatt-hell); margin-bottom: 16px; }
.vk__ico .ico { width: 22px; height: 22px; }
.vk h3 { font-size: 1.08rem; margin-bottom: .45em; }
.vk p { font-size: .93rem; color: var(--auf-dunkel-leise); margin: 0; line-height: 1.65; }

/* --------------------------------------------------------- 13. HINWEISE */
.hinweis {
  display: flex; gap: 15px; align-items: flex-start;
  background: #fff; border: 1px solid var(--linie); border-left: 4px solid var(--blatt);
  border-radius: var(--r-s); padding: 18px 22px; margin-bottom: 34px;
}
.hinweis .ico { color: var(--blatt-dunkel); width: 1.4rem; height: 1.4rem; margin-top: .15em; }
.hinweis p { margin: 0; font-size: .95rem; }
.hinweis--klein { margin: 22px 0; background: var(--nebel); border-color: var(--blatt-hell); }

/* --------------------------------------------------------- 14. PROJEKTE */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filter__b {
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .9rem;
  padding: 9px 17px; border-radius: 100px; cursor: pointer;
  background: #fff; color: var(--ink); border: 1px solid var(--linie);
  transition: all .25s var(--e);
}
.filter__b:hover { border-color: var(--blatt); color: var(--gruen-800); }
.filter__b.is-aktiv { background: var(--gruen-800); border-color: var(--gruen-800); color: #fff; }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.pk.is-weg { display: none; }
.pk__flaeche {
  display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden;
  transition: transform .35s var(--e), box-shadow .35s var(--e), border-color .3s;
  font: inherit; color: inherit;
}
.pk__flaeche:hover { transform: translateY(-5px); box-shadow: var(--sch-3); border-color: var(--blatt-hell); }
.pk__bild { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nebel); }
.pk__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--e); }
.pk__flaeche:hover .pk__bild img { transform: scale(1.06); }
.pk__ph {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(14, 37, 25, .9); color: #fff; backdrop-filter: blur(4px);
  font-family: 'Manrope', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .28);
}
.pk__lupe {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(14, 37, 25, .42); color: #fff; opacity: 0; transition: opacity .3s;
}
.pk__lupe .ico { width: 2.1rem; height: 2.1rem; }
.pk__flaeche:hover .pk__lupe, .pk__flaeche:focus-visible .pk__lupe { opacity: 1; }
.pk__in { display: block; padding: 20px 22px 24px; }
.pk__kat { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blatt-dunkel); margin-bottom: 7px; }
.pk__titel { display: block; font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.18rem; color: var(--gruen-800); letter-spacing: -.02em; }
.pk__meta { display: block; font-size: .88rem; color: var(--text-leise); margin-top: 5px; }

/* ---------------------------------------------------- 15. VORHER/NACHHER */
.vn { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(28px, 5vw, 60px); align-items: center; margin-top: clamp(48px, 7vw, 84px); }
@media (max-width: 900px) { .vn { grid-template-columns: 1fr; } }
.vn__hint { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--text-leise); margin-top: 1em; }
.vn__hint .ico { color: var(--blatt-dunkel); margin-top: .18em; }

.vn__wrap { position: relative; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sch-3); aspect-ratio: 16 / 10; user-select: none; }
.vn__vorher, .vn__nachher { position: absolute; inset: 0; }
.vn__vorher img, .vn__nachher img { width: 100%; height: 100%; object-fit: cover; }
.vn__nachher { clip-path: inset(0 0 0 var(--pos)); }
.vn__label {
  position: absolute; bottom: 14px; z-index: 3;
  background: rgba(14, 37, 25, .85); color: #fff; backdrop-filter: blur(4px);
  font-family: 'Manrope', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 4px;
}
.vn__label--l { left: 14px; }
.vn__label--r { right: 14px; }
.vn__regler {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5;
  margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.vn__regler::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 100%; cursor: ew-resize; }
.vn__regler::-moz-range-thumb { width: 46px; height: 999px; border: 0; background: transparent; cursor: ew-resize; }
.vn__griff {
  position: absolute; top: 0; bottom: 0; left: var(--griff, 50%); z-index: 4;
  width: 3px; background: #fff; translate: -50% 0; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(14, 37, 25, .18);
}
.vn__griff i {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  box-shadow: var(--sch-2); display: block;
}
.vn__griff i::before, .vn__griff i::after {
  content: ''; position: absolute; top: 50%; translate: 0 -50%;
  border: 6px solid transparent;
}
.vn__griff i::before { left: 8px; border-right-color: var(--gruen-800); }
.vn__griff i::after { right: 8px; border-left-color: var(--gruen-800); }

/* ----------------------------------------------------------- 16. ABLAUF */
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 2px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; }
.schritt { background: #fff; padding: 32px 28px 34px; display: flex; gap: 18px; align-items: flex-start; position: relative; transition: background .3s; }
.schritt:hover { background: var(--bg-hell); }
.schritt__nr {
  font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 2.1rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--blatt); letter-spacing: -.04em; flex: none;
  transition: color .35s;
}
.schritt:hover .schritt__nr { color: var(--blatt); }
.schritt h3 { margin-bottom: .35em; }
.schritt p { font-size: .95rem; margin: 0; }

/* --------------------------------------------------------- 17. ÜBER UNS */
.ueber { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(34px, 6vw, 74px); align-items: center; }
@media (max-width: 900px) { .ueber { grid-template-columns: 1fr; } }
.ueber__bilder { position: relative; padding-bottom: 60px; padding-right: 50px; }
.ueber__b2 { position: absolute; right: 0; bottom: 0; width: 56%; border: 6px solid var(--sand); }
@media (max-width: 560px) { .ueber__bilder { padding: 0; } .ueber__b2 { position: static; width: 100%; margin-top: 12px; border: 0; } }

.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; margin: 26px 0; padding: 22px 0; border-top: 1px solid var(--linie-stark); border-bottom: 1px solid var(--linie-stark); }
.fakten dt { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--text-leise); margin-bottom: 4px; }
.fakten dd { margin: 0; font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--gruen-800); font-size: 1.02rem; }

/* ---------------------------------------------------- 18. KUNDENSTIMMEN */
.sgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px; }
.sk { margin: 0; background: #fff; border: 1px dashed var(--linie-stark); border-radius: var(--r-m); padding: 28px 26px; }
.sk--leer { display: flex; flex-direction: column; gap: 14px; }
.sk__marke { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nebel); color: var(--blatt-dunkel); }
.sk__txt { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--text-leise); font-size: 1.02rem; margin: 0; }
.sk__f { margin-top: auto; font-style: normal; }
.sk__f span { display: block; font-weight: 600; color: var(--gruen-800); font-size: .95rem; }
.sk__f small { color: var(--text-leise); font-size: .84rem; }

.vertrauen { margin-top: 42px; background: var(--nebel); border-radius: var(--r-m); padding: 30px clamp(22px, 4vw, 38px); }
.vertrauen h3 { font-size: 1.02rem; margin-bottom: 1em; }
.vertrauen__l { list-style: none; margin: 0 0 1em; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.vertrauen__l li { display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--text-leise); }
.vertrauen__l .ico { color: var(--blatt-dunkel); margin-top: .18em; }
.vertrauen__l b { display: block; color: var(--gruen-800); font-family: 'Manrope', sans-serif; }
.vertrauen__t { font-size: .86rem; color: var(--text-leise); margin: 0; }

/* -------------------------------------------------------------- 19. FAQ */
.faq { max-width: 880px; border-top: 1px solid var(--linie-stark); }
.fq { border-bottom: 1px solid var(--linie-stark); }
.fq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(1.02rem, 1.7vw, 1.17rem);
  color: var(--gruen-800); letter-spacing: -.015em;
  transition: color .2s;
}
.fq summary::-webkit-details-marker { display: none; }
.fq summary:hover { color: var(--blatt-dunkel); }
.fq summary .ico { flex: none; color: var(--blatt-dunkel); transition: transform .3s var(--e); }
.fq[open] summary .ico { transform: rotate(45deg); }
.fq__a { padding: 0 4px 24px; max-width: 74ch; animation: aufklappen .32s var(--e); }
.fq__a p { margin: 0; }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq__rest { margin-top: 30px; font-size: .96rem; color: var(--text-leise); }

/* Rasterkinder duerfen schmaler werden als ihr Inhalt – sonst schiebt
   ein breites Element (z. B. der Kalender) die ganze Seite auf. */
.vorst > *, .ueber > *, .fgrid > *, .rgrid > *, .vn > *, .lgrid > *, .pgrid > * { min-width: 0; }

/* ---------------------------------------------------------- 20. FORMULAR */
.fgrid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.fgrid--breit { grid-template-columns: .75fr 1.25fr; }
@media (max-width: 950px) { .fgrid, .fgrid--breit { grid-template-columns: 1fr; } }

.fliste { list-style: none; margin: 26px 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.fliste li { display: flex; gap: 13px; align-items: flex-start; }
.fliste .ico { color: var(--blatt-dunkel); margin-top: .2em; }
.fliste b { display: block; font-family: 'Manrope', sans-serif; color: var(--gruen-800); font-size: .98rem; }
.fliste span { font-size: .93rem; color: var(--text-leise); line-height: 1.55; }

.fkontakt { border-top: 1px solid var(--linie); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fkontakt p { margin: 0 6px 0 0; font-weight: 600; color: var(--ink); }

.fbox { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-l); padding: clamp(24px, 3.6vw, 40px); box-shadow: var(--sch-2); }
.fbox--klein { padding: clamp(22px, 3vw, 32px); }
.sek--hell .fbox, .sek--sand .fbox { background: #fff; }

.form { display: flex; flex-direction: column; gap: 18px; }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .reihe { grid-template-columns: 1fr; } }

.feld { display: flex; flex-direction: column; gap: 7px; position: relative; }
.feld > label, .feld .label { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .9rem; color: var(--gruen-800); }

.feld input[type="text"], .feld input[type="email"], .feld input[type="tel"],
.feld select, .feld textarea {
  font: inherit; font-size: 1rem;
  padding: 13px 15px; border-radius: var(--r-s);
  border: 1.5px solid var(--linie-stark); background: #fff; color: var(--ink);
  width: 100%; transition: border-color .2s, box-shadow .2s, background .2s;
}
.feld textarea { resize: vertical; min-height: 110px; line-height: 1.62; }
.feld select { appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23183C2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--blatt-hell); }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--blatt); box-shadow: 0 0 0 4px rgba(122, 164, 52, .16);
}
.feld input::placeholder, .feld textarea::placeholder { color: #A9B2AB; }

.feld.is-fehler input, .feld.is-fehler select, .feld.is-fehler textarea { border-color: var(--rot); background: #FDF6F4; }
.feld.is-fehler input:focus, .feld.is-fehler select:focus, .feld.is-fehler textarea:focus { box-shadow: 0 0 0 4px rgba(183, 57, 32, .13); }

.hilfe { font-size: .84rem; color: var(--text-leise); line-height: 1.5; }
.fehler { font-size: .84rem; color: var(--rot); font-weight: 600; display: none; }
.feld.is-fehler .fehler { display: block; }
.zaehler { position: absolute; right: 4px; bottom: -18px; font-size: .76rem; color: var(--text-leise); }

.feld--check { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: start; }
.feld--check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gruen-700); cursor: pointer; flex: none; }
.feld--check label { font-family: 'Inter', sans-serif; font-weight: 400; font-size: .92rem; color: var(--text); line-height: 1.55; cursor: pointer; }
.feld--check .fehler { grid-column: 1 / -1; }

.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.form__fuss { display: flex; gap: .6rem; align-items: flex-start; font-size: .83rem; color: var(--text-leise); margin: 0; }
.form__fuss .ico { color: var(--blatt-dunkel); margin-top: .15em; flex: none; }

.form__status { display: none; border-radius: var(--r-m); padding: 20px 22px; font-size: .95rem; }
.form__status.is-an { display: block; animation: aufklappen .35s var(--e); }
.form__status.is-ok { background: var(--nebel); border: 1px solid var(--blatt-hell); color: var(--gruen-800); }
.form__status.is-fehler { background: #FDF3F0; border: 1px solid #E8BFB4; color: #8A2A16; }
.form__status.is-info { background: var(--sand); border: 1px solid var(--linie-stark); color: var(--ink); }
.form__status b { font-family: 'Manrope', sans-serif; display: block; margin-bottom: .3em; font-size: 1.05rem; }
.form__status a { font-weight: 600; }

/* Upload */
.upload { position: relative; border: 2px dashed var(--linie-stark); border-radius: var(--r-m); background: var(--bg-hell); transition: border-color .25s, background .25s; }
.upload:hover, .upload.is-drueber { border-color: var(--blatt); background: var(--nebel); }
.upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload__ui { padding: 26px 20px; text-align: center; pointer-events: none; }
.upload__ui .ico { width: 1.9rem; height: 1.9rem; color: var(--blatt-dunkel); margin: 0 auto .6rem; }
.upload__ui p { margin: 0 0 .25em; font-size: .96rem; }
.upload__ui b { color: var(--gruen-800); font-family: 'Manrope', sans-serif; }
.upload__ui small { color: var(--text-leise); font-size: .82rem; }
.upload__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.upload__liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--nebel); border-radius: var(--r-s); padding: 9px 13px; font-size: .87rem; }
.upload__liste li.is-fehler { background: #FDF3F0; color: #8A2A16; }
.upload__liste button { border: 0; background: transparent; cursor: pointer; color: var(--text-leise); font-size: 1.2rem; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.upload__liste button:hover { color: var(--rot); background: rgba(183,57,32,.08); }

/* --------------------------------------------------------- 21. KALENDER */
.kal { border: 1.5px solid var(--linie-stark); border-radius: var(--r-m); padding: 16px; background: #fff; }
.kal__kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kal__kopf strong { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--gruen-800); font-size: 1.05rem; }
.kal__nav { width: 38px; height: 38px; border-radius: var(--r-s); border: 1px solid var(--linie-stark); background: #fff; color: var(--gruen-800); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: all .2s; }
.kal__nav:hover:not([disabled]) { background: var(--gruen-800); color: #fff; border-color: var(--gruen-800); }
.kal__nav[disabled] { opacity: .35; cursor: not-allowed; }
.kal__wt, .kal__tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.kal__wt { margin-bottom: 6px; }
.kal__wt span { text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: var(--text-leise); text-transform: uppercase; }
.kal__t {
  min-height: 40px; min-width: 0; border-radius: var(--r-s);
  border: 1px solid transparent; background: var(--bg-hell); color: var(--ink);
  font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer;
  display: grid; place-items: center; transition: all .18s var(--e);
}
.kal__t:hover:not([disabled]) { background: var(--nebel); border-color: var(--blatt); transform: translateY(-1px); }
.kal__t[disabled] { background: transparent; color: #C3CBC5; cursor: not-allowed; }
.kal__t.is-leer { background: transparent; border: 0; cursor: default; }
.kal__t.is-heute { border-color: var(--blatt-hell); }
.kal__t.is-gewaehlt { background: var(--gruen-800); color: #fff; border-color: var(--gruen-800); box-shadow: var(--sch-2); }
@media (min-width: 480px) { .kal__t { aspect-ratio: 1; } }
.kal__hint { font-size: .8rem; color: var(--text-leise); margin: 12px 0 0; }
.kal__wahl { font-size: .92rem; color: var(--text-leise); margin: 0; }
.kal__wahl.is-gesetzt { color: var(--gruen-800); font-weight: 600; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.slot { position: relative; }
.slot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.slot span {
  display: grid; place-items: center; padding: 12px 6px; border-radius: var(--r-s);
  border: 1.5px solid var(--linie-stark); background: #fff; cursor: pointer;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: .95rem; color: var(--ink);
  transition: all .2s var(--e);
}
.slot span:hover { border-color: var(--blatt); background: var(--nebel); }
.slot input:checked + span { background: var(--gruen-800); border-color: var(--gruen-800); color: #fff; }
.slot input:focus-visible + span { outline: 3px solid var(--blatt); outline-offset: 2px; }

/* --------------------------------------------------------- 22. RÜCKRUF */
.rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
@media (max-width: 860px) { .rgrid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- 23. KONTAKT */
.kgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-bottom: 42px; }
.kk {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 26px 24px 24px; text-decoration: none; color: inherit; font: inherit; cursor: pointer;
  transition: transform .3s var(--e), box-shadow .3s var(--e), border-color .3s;
}
.kk:hover { transform: translateY(-4px); box-shadow: var(--sch-2); border-color: var(--blatt-hell); color: inherit; }
.kk__ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--nebel); color: var(--gruen-700); margin-bottom: 12px; transition: background .3s, color .3s; }
.kk:hover .kk__ico { background: var(--gruen-800); color: #fff; }
.kk h3 { font-size: 1.06rem; margin: 0 0 .2em; }
.kk__wert { font-size: .96rem; color: var(--text); margin: 0 0 12px; word-break: break-word; }
.kk__cta { margin-top: auto; display: inline-flex; align-items: center; gap: .45rem; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: .87rem; color: var(--blatt-dunkel); }
.kk__cta .ico { width: 1em; height: 1em; transition: transform .25s var(--e); }
.kk:hover .kk__cta .ico { transform: translateX(3px); }
.kk--btn { text-align: left; }

.adressblock { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-l); padding: clamp(26px, 4vw, 42px); }
.adressblock h3 { display: flex; align-items: center; gap: .6rem; font-size: 1.02rem; margin-bottom: .9em; }
.adressblock h3 .ico { color: var(--blatt-dunkel); }
.adressblock address { font-style: normal; line-height: 1.75; }
.adressblock address b { font-family: 'Manrope', sans-serif; color: var(--gruen-800); }
.zeiten { margin: 0 0 12px; }
.zeiten div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--linie); font-size: .93rem; }
.zeiten dt { color: var(--text); }
.zeiten dd { margin: 0; font-weight: 600; color: var(--gruen-800); text-align: right; }
.gebiet { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .93rem; }
.gebiet li { display: flex; gap: .6rem; align-items: center; }
.gebiet .ico { color: var(--blatt); width: 1em; height: 1em; }

/* ------------------------------------------------------------ 24. KARTE */
.karte { position: relative; border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--linie); background: var(--nebel); min-height: 380px; }
.karte iframe { width: 100%; height: 440px; border: 0; display: block; }
.karte__sperre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 34px 24px; background:
  linear-gradient(rgba(237, 243, 227, .96), rgba(237, 243, 227, .96)),
  repeating-linear-gradient(45deg, transparent 0 14px, rgba(24, 60, 46, .05) 14px 28px); }
.karte__sperre .ico { width: 2.2rem; height: 2.2rem; color: var(--gruen-700); }
.karte__sperre h3 { margin: 0; font-size: 1.14rem; }
.karte__sperre p { max-width: 52ch; font-size: .93rem; margin: 0; }
.karte__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.anfahrt { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0 12px; }

/* --------------------------------------------------------- 25. SCHLUSS */
.schluss { background: var(--gruen-800); color: var(--auf-dunkel); padding: clamp(60px, 8vw, 98px) 0; position: relative; overflow: hidden; }
.schluss::before {
  content: ''; position: absolute; right: -80px; top: 50%; translate: 0 -50%;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 164, 52, .22), transparent 68%);
  pointer-events: none;
}
.schluss__in { position: relative; max-width: 760px; }
.schluss__k { font-family: 'Manrope', sans-serif; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blatt-hell); margin: 0 0 .9rem; }
.schluss h2 { color: #fff; }
.schluss__t { color: var(--auf-dunkel-leise); font-size: 1.1rem; max-width: 56ch; }
.schluss__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------------------------------------------------------- 26. FOOTER */
.ft { background: var(--gruen-900); color: var(--auf-dunkel-leise); font-size: .93rem; padding: clamp(48px, 6vw, 76px) 0 0; }
.ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.35fr; gap: clamp(28px, 4vw, 52px); padding-bottom: 46px; }
@media (max-width: 980px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft__grid { grid-template-columns: 1fr; } }

.ft__logo { width: 220px; height: auto; margin-bottom: 16px; }
.ft__slogan { font-family: 'Manrope', sans-serif; font-weight: 700; color: var(--blatt-hell); font-size: 1rem; margin-bottom: .8em; }
.ft__text { color: var(--auf-dunkel-leise); max-width: 42ch; font-size: .9rem; }
.ft__soz { display: flex; gap: 9px; margin-top: 18px; }
.soz { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--auf-dunkel); transition: all .25s var(--e); }
.soz:hover { background: var(--blatt); color: var(--gruen-900); transform: translateY(-2px); }
.soz[data-leer] { opacity: .45; }

.ft__sp h3 { color: #fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.2em; }
.ft__sp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ft__sp a { color: var(--auf-dunkel-leise); text-decoration: none; transition: color .2s, padding-left .2s; }
.ft__sp a:hover { color: #fff; padding-left: 4px; }

.ft__ko { display: flex; flex-direction: column; gap: 14px; }
.ft__ko li { display: flex; gap: 11px; align-items: flex-start; }
.ft__ko .ico { color: var(--blatt); margin-top: .18em; flex: none; }
.ft__ko b { color: #fff; font-family: 'Manrope', sans-serif; }
.ft__ko a { color: var(--auf-dunkel-leise); text-decoration: none; }
.ft__ko a:hover { color: #fff; }

.ft__unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; }
.ft__unten p { margin: 0; }
.ft__unten nav { display: flex; flex-wrap: wrap; gap: 22px; }
.ft__unten a { color: var(--auf-dunkel-leise); text-decoration: none; }
.ft__unten a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 640px) { .ft { padding-bottom: 78px; } }

/* ----------------------------------------------------------- 27. MODAL */
.modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__bg { position: absolute; inset: 0; background: rgba(9, 26, 17, .68); backdrop-filter: blur(5px); animation: einblenden .25s var(--e); }
.modal__box {
  position: relative; width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
  background: #fff; border-radius: var(--r-l); padding: clamp(26px, 4vw, 38px);
  box-shadow: var(--sch-3); animation: modalAuf .34s var(--e);
}
@keyframes modalAuf { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
.modal__x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--nebel); color: var(--gruen-800); cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s; }
.modal__x:hover { background: var(--gruen-800); color: #fff; transform: rotate(90deg); }
.modal__t { font-size: .96rem; color: var(--text-leise); margin-bottom: 22px; }
.modal h2 { font-size: 1.55rem; }

/* --------------------------------------------------------- 28. LIGHTBOX */
.lb { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 20px; }
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: rgba(9, 26, 17, .82); backdrop-filter: blur(6px); animation: einblenden .25s var(--e); }
.lb__box { position: relative; width: min(1000px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--r-l); box-shadow: var(--sch-3); animation: modalAuf .34s var(--e); display: grid; grid-template-columns: 1.25fr .75fr; }
@media (max-width: 800px) { .lb__box { grid-template-columns: 1fr; } }
.lb__x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--gruen-800); cursor: pointer; display: grid; place-items: center; transition: transform .2s, background .2s; }
.lb__x:hover { background: #fff; transform: rotate(90deg); }
.lb__bild { background: var(--nebel); }
.lb__bild img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.lb__in { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.lb__kat { font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blatt-dunkel); margin: 0; }
.lb__in h2 { font-size: 1.5rem; margin: 0; }
.lb__meta { font-size: .9rem; color: var(--text-leise); margin: 0; }
.lb__txt { font-size: .96rem; margin: 8px 0 0; }
.lb__leist { font-size: .88rem; color: var(--text-leise); margin: 0 0 14px; }
.lb__in .btn { align-self: flex-start; margin-top: auto; }

/* ----------------------------------------------------------- 29. COOKIE */
.cookie { position: fixed; inset: 0; z-index: 95; display: grid; place-items: end center; padding: clamp(12px, 3vw, 26px); background: rgba(9, 26, 17, .32); backdrop-filter: blur(2px); animation: einblenden .3s var(--e); }
.cookie[hidden] { display: none; }
.cookie__box { width: min(720px, 100%); min-width: 0; max-width: 100%; max-height: 92vh; overflow-y: auto; background: #fff; border-radius: var(--r-l); padding: clamp(22px, 3.4vw, 34px); box-shadow: var(--sch-3); animation: cookieAuf .4s var(--e); }
@keyframes cookieAuf { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.cookie__kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cookie__kopf .ico { width: 1.7rem; height: 1.7rem; color: var(--blatt-dunkel); }
.cookie__kopf h2 { margin: 0; font-size: 1.3rem; }
.cookie__box > p { font-size: .93rem; color: var(--text); }
.cookie__opt { display: flex; flex-direction: column; gap: 2px; margin: 18px 0 22px; border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; }
.schalter { display: flex; gap: 14px; align-items: flex-start; padding: 15px 18px; background: #fff; cursor: pointer; border-bottom: 1px solid var(--linie); }
.schalter:last-child { border-bottom: 0; }
.schalter:hover { background: var(--bg-hell); }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter__ui { width: 46px; height: 26px; border-radius: 100px; background: var(--linie-stark); position: relative; flex: none; transition: background .25s var(--e); margin-top: 2px; }
.schalter__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--sch-1); transition: transform .25s var(--e); }
.schalter input:checked + .schalter__ui { background: var(--blatt); }
.schalter input:checked + .schalter__ui::after { transform: translateX(20px); }
.schalter input:focus-visible + .schalter__ui { outline: 3px solid var(--blatt); outline-offset: 2px; }
.schalter.is-fix { cursor: default; }
.schalter.is-fix .schalter__ui { background: var(--gruen-700); opacity: .65; }
.schalter__txt { min-width: 0; overflow-wrap: anywhere; }
.schalter__txt b { display: block; font-family: 'Manrope', sans-serif; color: var(--gruen-800); font-size: .97rem; }
.schalter__txt small { color: var(--text-leise); font-size: .85rem; line-height: 1.5; display: block; }
.cookie__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie__btns .btn { flex: 1 1 auto; }
.cookie__links a { display: inline-block; padding: 5px 2px; }
.cookie__links { margin: 16px 0 0; font-size: .85rem; color: var(--text-leise); }

/* ------------------------------------------------- 30. HOCH & MOBILBAR */
.hoch {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gruen-800); color: #fff; display: grid; place-items: center;
  box-shadow: var(--sch-2); opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .3s, transform .3s var(--e), background .25s;
}
.hoch .ico { transform: rotate(-90deg); }
.hoch.is-an { opacity: 1; pointer-events: auto; transform: none; }
.hoch:hover { background: var(--blatt-dunkel); color: #fff; }
@media (max-width: 640px) { .hoch { bottom: 76px; right: 14px; width: 44px; height: 44px; } }

.mobilbar { display: none; }
@media (max-width: 640px) {
  .mobilbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: rgba(255, 255, 255, .97); backdrop-filter: blur(12px);
    border-top: 1px solid var(--linie);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobilbar a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 4px 9px; text-decoration: none; color: var(--gruen-800);
    font-size: .72rem; font-weight: 600; font-family: 'Manrope', sans-serif;
    border-right: 1px solid var(--linie);
  }
  .mobilbar a:last-child { border-right: 0; }
  .mobilbar a:active { background: var(--nebel); }
  .mobilbar .ico { width: 1.35rem; height: 1.35rem; }
}

/* ------------------------------------------------ 30b. TIPPFLÄCHEN MOBIL */
@media (max-width: 767px) {
  .ft__sp a, .ft__unten a, .ft__ko a { display: inline-block; padding: 7px 0; }
  .link, .lk__cta { padding-top: 9px; padding-bottom: 9px; }
  .faq__rest a, .recht a:not(.btn), .mitteseite p a:not(.btn) { padding: 6px 0; display: inline-block; }
  .feld--check input { width: 28px; height: 28px; }
  .fq summary { padding-block: 20px; }
  .cookie__btns .btn { flex: 1 1 100%; }
  .schalter { padding: 14px 15px; gap: 12px; }
  .kal { padding: 12px; }
  .kal__wt, .kal__tage { gap: 4px; }
  .fbox { padding: 22px 18px; }
  .topbar__links a { padding: 6px 0; }
}

/* ------------------------------------------------------- 31. RECHTSTEXT */
.recht { padding: clamp(48px, 7vw, 86px) 0; }
.recht__in { max-width: var(--wrap-eng); }
.recht h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.2em; padding-top: 1.4em; border-top: 1px solid var(--linie); }
.recht h2:first-of-type { margin-top: 1em; }
.recht h3 { font-size: 1.08rem; margin-top: 1.8em; }
.recht p, .recht li { font-size: .98rem; }
.recht ul { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.recht .ph { background: #FFF6E0; border-bottom: 2px solid #E8C25F; padding: 1px 5px; border-radius: 3px; font-weight: 600; color: #6B4C00; }
.recht__box { background: var(--nebel); border-radius: var(--r-m); padding: 22px 26px; margin: 26px 0; }
.recht__box p:last-child { margin-bottom: 0; }
.recht__inhalt { background: var(--bg-hell); border: 1px solid var(--linie); border-radius: var(--r-m); padding: 22px 26px; margin-bottom: 34px; }
.recht__inhalt h2 { border: 0; margin: 0 0 .8em; padding: 0; font-size: 1.05rem; }
.recht__inhalt ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 30px; }
@media (max-width: 620px) { .recht__inhalt ol { columns: 1; } }
.recht__inhalt a { text-decoration: none; }
.recht__inhalt a:hover { text-decoration: underline; }

/* --------------------------------------------------------- 32. 404 / DANK */
.mitteseite { min-height: 62vh; display: grid; place-items: center; text-align: center; padding: clamp(60px, 9vw, 110px) 0; }
.mitteseite__in { max-width: 620px; }
.mitteseite img { width: 130px; margin: 0 auto 24px; }
.mitteseite .btn { margin-top: 8px; }
.mitteseite__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.gross { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--nebel); letter-spacing: -.04em; margin: 0 0 -.2em; }

/* --------------------------------------------------------- 33. REVEAL */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--e) var(--verzug, 0ms), transform .7s var(--e) var(--verzug, 0ms); will-change: opacity, transform; }
[data-reveal].is-da { opacity: 1; transform: none; }
.js-aus [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------ 34. PRINT */
@media print {
  .topbar, .hd, .mobil, .mobilbar, .hoch, .cookie, .modal, .lb, .schluss, .hero__runter { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .sek { padding: 18px 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}