.elementor-kit-7{--e-global-color-primary:#660E36;--e-global-color-secondary:#2E7041;--e-global-color-text:#16221A;--e-global-color-accent:#FBBE69;--e-global-color-ink:#16221A;--e-global-color-bordeaux:#660E36;--e-global-color-gruen:#2E7041;--e-global-color-pink:#E491A6;--e-global-color-amber:#FBBE69;--e-global-color-ground:#FBF8F1;--e-global-color-white:#FFFFFF;--e-global-color-tintgruen:#E9F2EB;--e-global-color-tintpink:#FCEDF1;--e-global-color-tintamber:#FEF3DF;--e-global-color-muted:#3E4A42;--e-global-color-grey:#6B746E;--e-global-color-hellgruen:#DCEBDF;--e-global-color-footertext:#B7C2BA;--e-global-typography-primary-font-family:"Fredoka";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Fredoka";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Figtree";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Figtree";--e-global-typography-accent-font-weight:600;--e-global-typography-h1-font-family:"Fredoka";--e-global-typography-h1-font-size:96px;--e-global-typography-h1-font-weight:700;--e-global-typography-h1-line-height:1.02em;--e-global-typography-h1-letter-spacing:-0.02em;--e-global-typography-h2-font-family:"Fredoka";--e-global-typography-h2-font-size:56px;--e-global-typography-h2-font-weight:700;--e-global-typography-h2-line-height:1.02em;--e-global-typography-h2-letter-spacing:-0.01em;--e-global-typography-h3-font-family:"Fredoka";--e-global-typography-h3-font-size:30px;--e-global-typography-h3-font-weight:600;--e-global-typography-h3-line-height:1.1em;--e-global-typography-h4-font-family:"Fredoka";--e-global-typography-h4-font-size:24px;--e-global-typography-h4-font-weight:600;--e-global-typography-h4-line-height:1.2em;--e-global-typography-lead-font-family:"Figtree";--e-global-typography-lead-font-size:20px;--e-global-typography-lead-font-weight:400;--e-global-typography-lead-line-height:1.55em;--e-global-typography-body-font-family:"Figtree";--e-global-typography-body-font-size:18px;--e-global-typography-body-font-weight:400;--e-global-typography-body-line-height:1.6em;--e-global-typography-small-font-family:"Figtree";--e-global-typography-small-font-size:15px;--e-global-typography-small-font-weight:500;--e-global-typography-small-line-height:1.55em;--e-global-typography-label-font-family:"Fredoka";--e-global-typography-label-font-size:16px;--e-global-typography-label-font-weight:600;--e-global-typography-label-line-height:1.2em;--e-global-typography-button-font-family:"Fredoka";--e-global-typography-button-font-size:19px;--e-global-typography-button-font-weight:600;--e-global-typography-button-line-height:1.2em;--e-global-typography-badge-font-family:"Fredoka";--e-global-typography-badge-font-size:24px;--e-global-typography-badge-font-weight:700;--e-global-typography-badge-line-height:1em;background-color:#FBF8F1;color:#16221A;font-family:"Figtree", Sans-serif;font-size:18px;line-height:1.6em;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#2E7041;}.elementor-kit-7 a:hover{color:#1F5330;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;--container-default-padding-top:0px;--container-default-padding-right:40px;--container-default-padding-bottom:0px;--container-default-padding-left:40px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-kit-7{--e-global-typography-h1-font-size:64px;--e-global-typography-h2-font-size:44px;--e-global-typography-h3-font-size:26px;--e-global-typography-h4-font-size:22px;--e-global-typography-lead-font-size:18px;--e-global-typography-body-font-size:17px;--e-global-typography-small-font-size:15px;--e-global-typography-label-font-size:16px;--e-global-typography-button-font-size:18px;--e-global-typography-badge-font-size:22px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-h1-font-size:44px;--e-global-typography-h2-font-size:34px;--e-global-typography-h3-font-size:24px;--e-global-typography-h4-font-size:20px;--e-global-typography-lead-font-size:17px;--e-global-typography-body-font-size:16px;--e-global-typography-small-font-size:14px;--e-global-typography-label-font-size:15px;--e-global-typography-button-font-size:17px;--e-global-typography-badge-font-size:20px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* === bildungsgaertner-c:start === */
/* ============================================================
   bildungsgärtner.de – Richtung C „Living Garden“
   Alle Scroll-Effekte sind reines CSS (Scroll-driven Animations).
   Jede Klasse wird in Elementor über Advanced › CSS-Klassen vergeben.
   Farben: --e-global-color-<id> kommen aus Site Settings › Global Colors.
   ============================================================ */

/* --- Keyframes --- */
@keyframes c-bob      { 0%,100% { transform: translateY(0) }  50% { transform: translateY(-12px) } }
@keyframes c-bob2     { 0%,100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-9px) rotate(3deg) } }
@keyframes c-wiggle   { 0% { rotate: 0deg } 30% { rotate: -3deg } 60% { rotate: 3deg } 100% { rotate: 0deg } }
@keyframes c-marquee  { to { transform: translateX(-50%) } }
@keyframes c-progress { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes c-slide    { to { transform: translateX(calc(100vw - 100% - 80px)) } }
@keyframes c-fill     { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* --- Schwebende Symbole (Hero, Prozess, CTA): Bild-Widget bekommt c-bob / c-bob2 --- */
.c-bob  img, .c-bob  svg { animation: c-bob 4.5s ease-in-out infinite; }
.c-bob2 img, .c-bob2 svg { animation: c-bob2 5.5s ease-in-out infinite; }

/* --- Wackeln beim Hover (Buttons, Pills, Karten): Klasse c-wig --- */
.c-wig:hover { animation: c-wiggle .5s ease-in-out; }

/* --- Sticker-Wort in der H1: <span class="c-sticker c-sticker--amber">…</span> --- */
.c-sticker { display: inline-block; padding: 0 .22em; border-radius: .35em; border: 2px solid var(--e-global-color-ink);
             box-shadow: 6px 6px 0 var(--e-global-color-ink); rotate: -2deg; }
.c-sticker--amber { background: var(--e-global-color-amber); }
.c-sticker--pink  { background: var(--e-global-color-pink); }
.c-sticker--gruen { background: var(--e-global-color-tintgruen); }

/* --- Laufschrift „Für …“: Container c-marquee (Inhalt 2× anlegen) --- */
.c-marquee { width: max-content !important; max-width: none !important; white-space: nowrap; animation: c-marquee 42s linear infinite; }
.c-marquee:hover { animation-play-state: paused; }
.c-marquee .elementor-widget { width: auto; }

/* --- Polka-Dot-Muster auf der grünen Angebote-Strecke: Klasse c-dots --- */
.c-dots { background-image: radial-gradient(#3F8A54 2.5px, transparent 2.5px); background-size: 30px 30px; }

/* --- Scroll-gesteuerte Effekte (Chrome/Edge/Safari 26+, sonst statisch sichtbar) --- */
.c-hs { view-timeline-name: --c-hs; view-timeline-axis: block; }
.c-hs-track { width: max-content !important; max-width: none !important; }
@supports (animation-timeline: view()) {
  /* Fortschrittsbalken oben (Container c-progress, position: fixed) */
  .c-progress { transform: scaleX(0); transform-origin: left center; animation: c-progress linear both; animation-timeline: scroll(root); }
  /* Vision-Text füllt sich von grau nach dunkel (Heading c-fill) */
  .c-fill .elementor-heading-title { color: transparent !important;
    background: linear-gradient(90deg, var(--e-global-color-ink) 0 50%, #C9C5B8 50% 100%) 0 0 / 200% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text;
    animation: c-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  /* Angebote-Strecke fährt horizontal, solange das Panel gepinnt ist (Container c-hs-track im Sticky-Panel) */
  .c-hs-track { animation: c-slide linear both; animation-timeline: --c-hs; animation-range: contain 0% contain 100%; }
}

/* --- Mobil: Strecke wird zum normalen Stapel, Sticky aus --- */
@media (max-width: 1024px) {
  .c-hs { min-height: 0 !important; }
  .c-hs > .e-con { position: static !important; min-height: 0 !important; overflow: visible !important; }
  .c-hs-track { width: 100% !important; flex-wrap: wrap !important; animation: none !important; }
  .c-hs-track > .e-con { rotate: 0deg; transform: none !important; }
  .c-marquee { animation-duration: 28s; }
}

/* --- Barrierefreiheit: reduzierte Bewegung --- */
@media (prefers-reduced-motion: reduce) {
  .c-bob img, .c-bob2 img, .c-bob svg, .c-bob2 svg, .c-wig, .c-marquee, .c-progress, .c-fill .elementor-heading-title, .c-hs-track { animation: none !important; }
  .c-progress { transform: scaleX(1); }
}

/* === bildungsgaertner-c:end === */

/* === bildungsgaertner-fix:start === */
/* Header ueber allen anderen Sticky-Elementen (Angebote-Panel, Prozess-Karten bekommen von Elementor ebenfalls z-index 99) */
#site-header.elementor-sticky, #site-header.elementor-sticky--active { z-index: 1000 !important; }

/* Telefonlinks in der gruenen Kontakt-Karte: Linkfarbe Gruen war auf Gruen unsichtbar */
#cta a:not(.elementor-button) { color: var(--e-global-color-amber); text-decoration: underline; text-underline-offset: 3px; }

/* Unterseiten: Listen mit Blatt statt Punkt (Klasse bg-liste am Text-Editor; bg-liste--2sp = zwei Spalten) */
.elementor-widget.bg-liste { align-self: stretch; width: 100%; }
.bg-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 40px; }
.bg-liste--2sp ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bg-liste li { position: relative; margin: 0; padding-left: 32px; }
.bg-liste li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px;
  background: url(https://xn--bildungsgrtner-eib.de/wp-content/uploads/2026/10/leaf-gruen.svg) no-repeat center / contain; }
.bg-liste--amber li::before { background-image: url(https://xn--bildungsgrtner-eib.de/wp-content/uploads/2026/10/leaf-amber.svg); }
.bg-liste--pink li::before { background-image: url(https://xn--bildungsgrtner-eib.de/wp-content/uploads/2026/10/leaf-pink.svg); }
@media (max-width: 767px) { .bg-liste--2sp ul { grid-template-columns: 1fr; } }

/* Handy: lange deutsche Woerter in Ueberschriften trennen statt ueber den Kartenrand zu laufen */
@media (max-width: 767px) { .elementor-heading-title { hyphens: auto; -webkit-hyphens: auto; } }

/* Prozess-Beet: Symbole stehen unten auf der Bodenlinie, gleiche Hoehe fuer alle drei */
.bg-beet-symbol img { height: 150px; width: auto; max-width: 100%; object-fit: contain; object-position: left bottom; display: block; }
@media (max-width: 1024px) { .bg-beet-symbol img { height: 118px; } }
@media (max-width: 767px) { .bg-beet-symbol img { height: 108px; } }

/* Fallende Blaetter im Hero (Elementor Motion Effects): bei reduzierter Bewegung stillhalten */
@media (prefers-reduced-motion: reduce) { .bg-blatt, .bg-blatt * { transform: none !important; } }
.bg-blatt { pointer-events: none; }

/* Hero: Blaetter duerfen nach unten in die naechsten Abschnitte fallen, seitlich bleibt alles im Bild */
#hero.bg-hero-laub { overflow-x: clip; overflow-y: visible; position: relative; z-index: 3; }

/* Beet waechst beim Scrollen: Bodenlinie zieht sich von links nach rechts, dann wachsen Samen, Jungpflanze, Baeume.
   Nur wo Scroll-Animationen gehen (sonst: fertiges Beet) und nur ohne reduzierte Bewegung. */
#prozess-stapel { overflow: clip; }  /* nicht hidden: das waere ein Scroll-Container und stoppt view() */
@keyframes bg-linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bg-wachsen { from { transform: scale(.12); opacity: 0; } 35% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bg-beet-feld { position: relative; border-bottom-color: transparent !important; }
    .bg-beet-feld::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: #660E36;
      transform-origin: left center; animation: bg-linie linear both; animation-timeline: view(); }
    .bg-beet-feld .bg-beet-symbol img { transform-origin: left bottom; animation: bg-wachsen linear both; animation-timeline: view(); }
    .bg-beet-1::after { animation-range: cover 2% cover 22%; }
    .bg-beet-2::after { animation-range: cover 22% cover 42%; }
    .bg-beet-3::after { animation-range: cover 42% cover 58%; }
    .bg-beet-1 .bg-beet-symbol img { animation-range: cover 10% cover 32%; }
    .bg-beet-2 .bg-beet-symbol img { animation-range: cover 30% cover 52%; }
    .bg-beet-3 .bg-beet-symbol img { animation-range: cover 48% cover 68%; }
    @media (max-width: 767px) {
      .bg-beet-1::after, .bg-beet-2::after, .bg-beet-3::after { animation-range: cover 4% cover 40%; }
      .bg-beet-1 .bg-beet-symbol img, .bg-beet-2 .bg-beet-symbol img, .bg-beet-3 .bg-beet-symbol img { animation-range: cover 12% cover 62%; }
    }
  }
}

/* Sprungziele (Menue 'Wir ueber uns' -> /#selbstverstaendnis) nicht unter dem Sticky-Header verstecken */
#selbstverstaendnis, #angebote, #team, #prozess { scroll-margin-top: 110px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Angebote: Kachel mit Detailseite ist selbst der Link -> Schatten waechst beim Hover, klarer Fokusrahmen */
a.bg-kachel-link { text-decoration: none; transition: box-shadow .18s ease; }
a.bg-kachel-link:hover { box-shadow: 13px 13px 0 0 #16221A !important; }
a.bg-kachel-link:focus-visible { outline: 3px solid #FBBE69; outline-offset: 4px; }

/* Hero: Blaetter fallen durchgehend in Schleife (oben unsichtbar rein, unten ausblenden, wieder von vorn).
   Phasen versetzt, damit ab Sekunde 0 alle unterwegs sind. Laeuft innen am Icon. */
@keyframes bg-laub-a {
  0%   { transform: translate(-30px, -75vh) rotate(-150deg); opacity: 0; }
  10%  { opacity: 1; }
  30%  { transform: translate(50px, -38vh) rotate(-60deg); }
  55%  { transform: translate(-40px, 2vh) rotate(30deg); }
  80%  { transform: translate(35px, 40vh) rotate(110deg); opacity: 1; }
  100% { transform: translate(-15px, 70vh) rotate(170deg); opacity: 0; } }
@keyframes bg-laub-b {
  0%   { transform: translate(35px, -75vh) rotate(140deg); opacity: 0; }
  10%  { opacity: 1; }
  30%  { transform: translate(-45px, -36vh) rotate(55deg); }
  55%  { transform: translate(40px, 4vh) rotate(-35deg); }
  80%  { transform: translate(-30px, 42vh) rotate(-115deg); opacity: 1; }
  100% { transform: translate(10px, 70vh) rotate(-170deg); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
    #hero .bg-blatt:nth-child(1) .elementor-icon-wrapper { animation: bg-laub-a 11s linear -2.0s infinite; }
    #hero .bg-blatt:nth-child(2) .elementor-icon-wrapper { animation: bg-laub-b 13s linear -7.5s infinite; }
    #hero .bg-blatt:nth-child(3) .elementor-icon-wrapper { animation: bg-laub-a 9.5s linear -4.0s infinite; }
    #hero .bg-blatt:nth-child(4) .elementor-icon-wrapper { animation: bg-laub-b 12s linear -1.0s infinite; }
    #hero .bg-blatt:nth-child(5) .elementor-icon-wrapper { animation: bg-laub-a 15s linear -9.0s infinite; }
    #hero .bg-blatt:nth-child(6) .elementor-icon-wrapper { animation: bg-laub-b 10s linear -5.5s infinite; }
    #hero .bg-blatt:nth-child(7) .elementor-icon-wrapper { animation: bg-laub-b 14s linear -3.0s infinite; }
    #hero .bg-blatt:nth-child(8) .elementor-icon-wrapper { animation: bg-laub-a 12.5s linear -10.0s infinite; }
}

/* Hero: Blaetter immer hinter dem Text (auf Tablet/Handy lagen sie teils davor) */
#hero .bg-blatt { z-index: 0 !important; }
#hero > .e-con-inner > .e-con, #hero > .e-con { position: relative; z-index: 2; }

/* Buttons nie mitten im Text umbrechen (Handy: 'Unsere Angebote' stand zweizeilig) */
.elementor-button { white-space: nowrap; }
.elementor-button .elementor-button-text { white-space: nowrap; }

/* Aufgeklapptes Menue (Tablet/Handy) im Stil der Seite: Kontur, Radius, harter Schatten */
#hauptnavigation .elementor-nav-menu--dropdown.elementor-nav-menu__container { border: 2px solid #16221A; border-radius: 24px;
  box-shadow: 6px 6px 0 #16221A; overflow: hidden; background: #FFFFFF; }
#hauptnavigation .elementor-nav-menu--dropdown .elementor-item { justify-content: flex-start; }
#hauptnavigation .elementor-menu-toggle { padding: 8px; }
/* Handy: Burger ohne eigenen Rand -- kein zweiter schwarzer Ring dicht am runden Pillen-Ende */
@media (max-width: 767px) { #hauptnavigation .elementor-menu-toggle { border-width: 0 !important; } }
/* Menue-Widget nicht schrumpfen lassen (wurde auf 26 px gequetscht, der Kreis lief rechts aus der Pille) */
@media (max-width: 1024px) { #hauptnavigation { flex-shrink: 0; } }
/* Schmale Handys (360 px): bei Platzmangel gibt das Logo nach, nicht der Kontakt-Button */
@media (max-width: 767px) {
  #header-pille .elementor-element-f2dd869 { flex-shrink: 1; min-width: 0; }
  #header-pille .elementor-element-f2dd869 img { max-width: 100%; height: auto; }
  #header-pille .elementor-element-8d7844d { flex-shrink: 0; padding: 0 !important; justify-content: flex-end; }
}
/* Rechtstexte: Zwischenueberschriften und Listen im Text-Editor */
.bg-rechtstext h3 { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 20px; color: var(--e-global-color-ink); margin: 1.4em 0 .4em; }
.bg-rechtstext ul { margin: .4em 0 1em; padding-left: 1.2em; }
.bg-rechtstext > *:first-child h3:first-child, .bg-rechtstext h3:first-child { margin-top: 0; }

/* Noch auszufuellende Angaben sichtbar markieren (vor Livegang entfernen) */
.bg-platzhalter { background: #FEF3DF; outline: 2px dashed #FBBE69; border-radius: 4px; padding: 0 .25em; }
/* === bildungsgaertner-fix:end === *//* End custom CSS */