.elementor-kit-4{--e-global-color-primary:#1F3018;--e-global-color-secondary:#5C5318;--e-global-color-text:#2C2A1F;--e-global-color-accent:#C3A24B;--e-global-color-cream:#F7F5EC;--e-global-color-sage:#E2E6DE;--e-global-color-moss:#3B5430;--e-global-color-mist:#D7D8CB;--e-global-color-white:#FFFFFF;--e-global-typography-primary-font-family:"DM Serif Display";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:12px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-letter-spacing:0.28em;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-size:13px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.18em;--e-global-typography-h1-font-family:"DM Serif Display";--e-global-typography-h1-font-size:64px;--e-global-typography-h1-font-weight:400;--e-global-typography-h1-line-height:1.08em;--e-global-typography-h2-font-family:"DM Serif Display";--e-global-typography-h2-font-size:40px;--e-global-typography-h2-font-weight:400;--e-global-typography-h2-line-height:1.1em;--e-global-typography-h3-font-family:"DM Serif Display";--e-global-typography-h3-font-size:22px;--e-global-typography-h3-font-weight:400;--e-global-typography-h3-line-height:1.25em;--e-global-typography-body_sm-font-family:"Manrope";--e-global-typography-body_sm-font-size:15px;--e-global-typography-body_sm-font-weight:400;--e-global-typography-body_sm-line-height:1.55em;--e-global-typography-quote-font-family:"DM Serif Display";--e-global-typography-quote-font-size:22px;--e-global-typography-quote-font-weight:400;--e-global-typography-quote-font-style:italic;--e-global-typography-quote-line-height:1.5em;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-4{--e-global-typography-h1-font-size:48px;--e-global-typography-h2-font-size:36px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{--e-global-typography-h1-font-size:40px;--e-global-typography-h2-font-size:32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Mastergarden — Custom CSS des Elementor-Kits.
   =================================================================
   MASSGEBLICHE FASSUNG. Diese Datei ist die Quelle, nicht die Kopie.

   Am 2026-08-03 stand im Kit nur noch `/* probe *\/` — jemand hatte den
   gesamten Inhalt durch einen Teststring ersetzt. Damit waren das
   Kachel-Raster der Startseite, die Galerie-Raster und die Hero-Bilder
   gleichzeitig weg; sichtbar wurde es erst, als die Startseite ihre
   Kacheln in acht 12,5-%-Spalten quetschte.

   Zurueckgeholt aus /root/pre-update-2026-08-03.sql (09:26 desselben
   Tages) ueber eine Wegwerf-Datenbank. Nur deshalb rekonstruierbar,
   weil zufaellig ein Dump von vor dem Ueberschreiben existierte —
   patch_42 fuehrte lediglich seinen eigenen Block lokal mit, die
   Bloecke 1 bis 9 lagen ausschliesslich in der Datenbank.

   Wer hier etwas aendert: erst diese Datei, dann
   `PATCH /kit/css` mit ihrem VOLLEN Inhalt. Nicht andersherum.
   ================================================================= */

/* ═══════════════════════════════════════════════════════════════════════
   Mastergarden — Komponenten-Contract
   Liegt in der Kit-CSS (PATCH /kit/css). Zweck: keine Seite baut Bauteile
   neu, die es schon gibt. Zwei Sorten Regeln:

   (1) GLOBALE DEFAULTS pro Widget-Typ — ein frisch eingefuegtes Widget sieht
       ohne jede Einstellung richtig aus. Bestehende Elemente mit eigenen
       Inline-Werten bleiben unveraendert (Elementors Per-Element-CSS gewinnt).
   (2) KLASSEN fuer alles, was Varianten hat (hell/dunkel, Spaltenzahl).

   Selektoren tragen Elementors eigene Klassen mit, weil diese Datei vor
   Elementors Stylesheets laedt und bei Gleichstand sonst verliert.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Kachel-Raster ──────────────────────────────────────────────────── */
.elementor-section.mg-tiles > .elementor-container {
  display: grid;
  grid-template-columns: repeat(var(--mg-tile-cols, 2), minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}
.elementor-section.mg-tiles--3 { --mg-tile-cols: 3; }
.elementor-section.mg-tiles--4 { --mg-tile-cols: 4; }
.elementor-section.mg-tiles > .elementor-container > .elementor-column { width: auto; }

.elementor-column.mg-tile > .elementor-widget-wrap {
  background: #FFFFFF;
  border: 1px solid #D7D8CB;
  box-shadow: 0 2px 12px rgba(31, 48, 24, .06);
  padding: 26px 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: box-shadow .25s ease;
}
.elementor-column.mg-tile > .elementor-widget-wrap:hover { box-shadow: 0 8px 24px rgba(31, 48, 24, .12); }
.elementor-column.mg-tile > .elementor-widget-wrap:has(.elementor-widget-image) { padding-top: 0; }
.elementor-column.mg-tile .elementor-widget-image img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; display: block;
}
.elementor-column.mg-tile--portrait .elementor-widget-image img { aspect-ratio: 1 / 1; }
.elementor-column.mg-tile .elementor-widget:not(.elementor-widget-image) {
  padding-left: 22px; padding-right: 22px;
}
.elementor-column.mg-tile .elementor-widget-image + .elementor-widget { margin-top: 20px; }
.elementor-column.mg-tile > .elementor-widget-wrap > .elementor-widget:last-child { margin-top: auto; }

@media (max-width: 767px) {
  .elementor-section.mg-tiles > .elementor-container {
    grid-template-columns: minmax(0, 1fr); gap: 24px;
  }
}

/* ── 2. Sektions-Huelle ────────────────────────────────────────────────
   Bisher 52× als Literale kopiert (Padding + Haarlinie + Grund).          */
.elementor-section.mg-section {
  padding: 100px 32px;
  border-top: 1px solid rgba(195, 162, 75, .4);
}
.elementor-section.mg-section--cream  { background-color: #F7F5EC; }
.elementor-section.mg-section--forest { background-color: #1F3018; }
.elementor-section.mg-section--cta    { padding: 80px 32px; background-color: #1F3018; }
@media (max-width: 767px) {
  .elementor-section.mg-section     { padding: 64px 20px; }
  .elementor-section.mg-section--cta { padding: 56px 20px; }
}

/* ── 3. Sektionskopf: Eyebrow + Regel + Ueberschrift ───────────────────
   Eyebrow bisher 51× kopiert (zwei Farbvarianten).                        */
.elementor-widget.mg-eyebrow .elementor-heading-title {
  font-family: "Manrope", sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: .28em; text-transform: uppercase;
  color: #5C5318;
}
.elementor-widget.mg-eyebrow { margin-bottom: 18px; }
.elementor-widget.mg-eyebrow--light .elementor-heading-title { color: #C3A24B; }

/* Brass-Regel unter dem Eyebrow — 48× identisch kopiert, deshalb Default. */
.elementor-widget-divider .elementor-divider-separator {
  width: 64px; margin-left: 0;
  border-top-width: 2px; border-top-color: #5C5318;
}
.elementor-widget-divider { --divider-color: #5C5318; }

/* ── 4. "Mehr ansehen →" — 24× kopiert ────────────────────────────────── */
.elementor-widget.mg-more .elementor-heading-title {
  font-family: "Manrope", sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: #5C5318;
}
.elementor-widget.mg-more a:hover .elementor-heading-title,
.elementor-widget.mg-more .elementor-heading-title:hover { color: #C3A24B; }

/* ── 5. Button — 17× identisch. Default, keine Klasse noetig. ──────────── */
.elementor-widget-button .elementor-button {
  background-color: #C3A24B;
  color: #1F3018;
  border: 2px solid #C3A24B;
  border-radius: 0;
  font-family: "Manrope", sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 20px 40px;
  transition: background-color .25s ease, color .25s ease;
}
.elementor-widget-button .elementor-button:hover {
  background-color: transparent; color: #C3A24B;
}

/* ── 6. Icon-Liste — 11× identisch. Default. ───────────────────────────── */
.elementor-widget-icon-list .elementor-icon-list-text { color: #2C2A1F; }
.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text,
.elementor-widget-icon-list .elementor-icon-list-item > a {
  font-family: "Manrope", sans-serif; font-size: 17px; line-height: 1.55em;
}
.elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-widget-icon-list .elementor-icon-list-icon svg { color: #C3A24B; fill: #C3A24B; }
.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after { border-color: #D7D8CB; }

/* ── 7. FAQ (Toggle) — 9× identisch. Default. ──────────────────────────── */
.elementor-widget-toggle .elementor-toggle-title {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 22px; font-weight: 400; color: #1F3018;
}
.elementor-widget-toggle .elementor-tab-content {
  font-family: "Manrope", sans-serif; font-size: 17px; line-height: 1.65em;
  color: #2C2A1F; border-color: #D7D8CB;
}
.elementor-widget-toggle .elementor-tab-title { border-color: #D7D8CB; }
.elementor-widget-toggle .elementor-toggle-icon,
.elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon { color: #C3A24B; }

/* ── 8. Galerie — Raster wie die Kacheln, nur ohne Kartenchrome ───────── */
.mg-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mg-gallery .mg-gallery-item { aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
@media (max-width: 900px) { .mg-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .mg-gallery { grid-template-columns: minmax(0, 1fr); } }

/* ── 9. Serifen-Schrift hat nur einen Schnitt — nie synthetisch fetten ── */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-toggle .elementor-toggle-title { font-synthesis-weight: none; }


/* ── Galerie-Varianten bei zu wenig Bildmaterial ─────────────────────────
   Ein 3-Spalten-Raster mit ein oder zwei Bildern wirkt defekt. Diese Klassen
   sind ein Provisorium, bis echte Projektfotos vorliegen — dann Klasse aus
   dem Wrapper nehmen, nicht die Regel loeschen. */
.mg-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-gallery--1 { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
@media (max-width: 540px) {
  .mg-gallery--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ── Galerie-Kacheln als echte Bilder ────────────────────────────────────
   Kacheln waren `background-image`-Divs. Ein Hintergrundbild kann kein `alt`
   tragen — 44 Kacheln site-weit hatten dadurch keinen einzigen Alt-Text.
   Neue Galerien nutzen <figure><img>; die alte Variante bleibt daneben
   gueltig, solange nicht alle umgestellt sind. */
.mg-gallery-item { margin: 0; }
.mg-gallery-item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ── 10. Hero-Bildspalte — feste Groesse, auf Mobil sichtbar ─────────────
   Das Hero-Bild ist der Hintergrund einer sonst leeren Spalte. Daraus zwei
   gemessene Probleme:

   (a) Die Hoehe haengt an der Textlaenge der Nachbarspalte, weil die leere
       Spalte im Flex-Zeilenkontext nur mitgedehnt wird. Dieselbe Datei sah
       auf zwei Seiten verschieden gross aus — `ausstellung.jpg` lag auf
       /kontakt/ und /ausstellung/ in zwei Groessen (Carports zum Vergleich:
       486x275 bei 1280 px Viewport).

   (b) Unter 768 px stapeln die Spalten, der Zeilenkontext entfaellt, und die
       leere Spalte fiel auf 1 px zusammen (gemessen bei 375 px: 311x1, bei
       768 px: 282x400). Auf jedem Handy war kein einziges Hero-Bild sichtbar.

   Feste Hoehe plus `align-self: center` loest beides: gleiche Box auf jeder
   Seite, unabhaengig von der Ueberschriftenlaenge.

   WARUM ID-SELEKTOREN UND KEINE KLASSE: `_css_classes` steht in
   EKS_BLOCKED_FIELDS (includes/class-allowlist.php) — bewusst gesperrt als
   CSS-Injection-Vektor, PATCH liefert 403. Die Sperre bleibt; eine Klasse waere
   huebscher, ist es aber nicht wert, eine Sicherheitsmassnahme aufzuweichen.
   Elementor rendert jede Spalte als `.elementor-element-<id>`, und die IDs sind
   hier sprechend vergeben.

   NEUE SEITE MIT HERO? Deren Spalten-ID unten eintragen, sonst faellt das Bild
   auf dem Handy wieder aus. */
.elementor-element-hero_col_i,
.elementor-element-carports_hc2,
.elementor-element-gartenhaeuser_hc2,
.elementor-element-gartenpflege_hc2,
.elementor-element-kontakt_hc2,
.elementor-element-muelltonnenschraenke_hc2,
.elementor-element-poolbau_hc2,
.elementor-element-sichtschutz-zaeune_hc2,
.elementor-element-terrassenbau_hc2,
.elementor-element-ueberdachungen_hc2,
.elementor-element-ueber-uns_hc2,
.elementor-element-ausstellung_hc2,
.elementor-element-gartengestaltung_hc2,
.elementor-element-heckenschnitt_hc2,
.elementor-element-baumpflege_hc2 {
  align-self: center;
}
.elementor-element-hero_col_i > .elementor-widget-wrap,
.elementor-element-carports_hc2 > .elementor-widget-wrap,
.elementor-element-gartenhaeuser_hc2 > .elementor-widget-wrap,
.elementor-element-gartenpflege_hc2 > .elementor-widget-wrap,
.elementor-element-kontakt_hc2 > .elementor-widget-wrap,
.elementor-element-muelltonnenschraenke_hc2 > .elementor-widget-wrap,
.elementor-element-poolbau_hc2 > .elementor-widget-wrap,
.elementor-element-sichtschutz-zaeune_hc2 > .elementor-widget-wrap,
.elementor-element-terrassenbau_hc2 > .elementor-widget-wrap,
.elementor-element-ueberdachungen_hc2 > .elementor-widget-wrap,
.elementor-element-ueber-uns_hc2 > .elementor-widget-wrap,
.elementor-element-ausstellung_hc2 > .elementor-widget-wrap,
.elementor-element-gartengestaltung_hc2 > .elementor-widget-wrap,
.elementor-element-heckenschnitt_hc2 > .elementor-widget-wrap,
.elementor-element-baumpflege_hc2 > .elementor-widget-wrap {
  height: 360px;
  background-size: cover;
  background-position: center center;
}
@media (max-width: 767px) {
  .elementor-element-hero_col_i > .elementor-widget-wrap,
  .elementor-element-carports_hc2 > .elementor-widget-wrap,
  .elementor-element-gartenhaeuser_hc2 > .elementor-widget-wrap,
  .elementor-element-gartenpflege_hc2 > .elementor-widget-wrap,
  .elementor-element-kontakt_hc2 > .elementor-widget-wrap,
  .elementor-element-muelltonnenschraenke_hc2 > .elementor-widget-wrap,
  .elementor-element-poolbau_hc2 > .elementor-widget-wrap,
  .elementor-element-sichtschutz-zaeune_hc2 > .elementor-widget-wrap,
  .elementor-element-terrassenbau_hc2 > .elementor-widget-wrap,
  .elementor-element-ueberdachungen_hc2 > .elementor-widget-wrap,
  .elementor-element-ueber-uns_hc2 > .elementor-widget-wrap,
  .elementor-element-ausstellung_hc2 > .elementor-widget-wrap,
  .elementor-element-gartengestaltung_hc2 > .elementor-widget-wrap,
  .elementor-element-heckenschnitt_hc2 > .elementor-widget-wrap,
  .elementor-element-baumpflege_hc2 > .elementor-widget-wrap { height: 220px; }
}/* End custom CSS */