.elementor-kit-6{--e-global-color-primary:#587258;--e-global-color-secondary:#F2EAE6;--e-global-color-text:#1C3320;--e-global-color-accent:#FC880E;--e-global-color-43fb56d:#2F4230;--e-global-color-89f7cd5:#E8EDE7;--e-global-color-d92bbf3:#FEF0DC;--e-global-color-84495c7:#5A6B58;--e-global-color-4c18554:#F7F7F5;--e-global-color-da01ba9:#FFFFFF;--e-global-color-a16959c:#4E2107;--e-global-color-c0f803f:#D4D1CB;--e-global-color-6e861b2:#D06A00;--e-global-color-d0000ac:#00000000;--e-global-color-4f3c5df:#4E210714;--e-global-color-7bbd8bc:#4E210799;--e-global-color-c6aa329:#4E210724;--e-global-typography-primary-font-family:"Moderne";--e-global-typography-primary-font-size:2.875rem;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.15em;--e-global-typography-primary-letter-spacing:-0.02em;--e-global-typography-secondary-font-family:"Moderne";--e-global-typography-secondary-font-size:2.125rem;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-0.01em;--e-global-typography-text-font-family:"Moderne";--e-global-typography-text-font-size:1.063rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.75em;--e-global-typography-accent-font-family:"Moderne";--e-global-typography-accent-font-size:0.938rem;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0.01em;background-color:var( --e-global-color-4c18554 );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 a{color:var( --e-global-color-accent );}.elementor-kit-6 a:hover{color:var( --e-global-color-6e861b2 );}.elementor-kit-6 h1{font-family:"Moderne", Sans-serif;font-size:2.875rem;font-weight:700;line-height:1.15em;letter-spacing:-0.02em;}.elementor-kit-6 h2{font-family:"Moderne", Sans-serif;font-size:2.125rem;font-weight:700;line-height:1.2em;letter-spacing:-0.01em;}.elementor-kit-6 h3{font-family:"Moderne", Sans-serif;font-size:1.625rem;font-weight:700;line-height:1.25em;}.elementor-kit-6 h4{font-family:"Moderne", Sans-serif;font-size:1.3rem;font-weight:700;line-height:1.3em;}.elementor-kit-6 h5{font-family:"Moderne", Sans-serif;font-size:0.813rem;line-height:1.5em;}.elementor-kit-6 h6{font-family:"Moderne", Sans-serif;font-size:0.875rem;line-height:1em;letter-spacing:0.01em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{border-radius:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{border-radius:0px 0px 0px 0px;}.elementor-kit-6 label{color:var( --e-global-color-da01ba9 );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{font-family:"Moderne", Sans-serif;font-weight:400;color:var( --e-global-color-text );accent-color:var( --e-global-color-accent );background-color:var( --e-global-color-da01ba9 );border-radius:6px 6px 6px 6px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.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-6{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 label{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-6{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-6 label{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --H1-Headline:2.875rem; --H2-Subline:2.125rem; --H3-Title:1.625rem; --H4-CardTitle:1.3rem; --H5-Caption:0.813rem; --H6-Eyebrow:0.875rem; --PrimaryGreen:#587258; --SecondaryCream:#F2EAE6; --TextGreen:#1C3320; --AccentOrange:#FC880E; --DarkGreen:#2F4230; --GreenTint:#E8EDE7; --OrangeTint:#FEF0DC; --TextMuted:#5A6B58; --WarmAccent:#4E2107; --Background:#F7F7F5; --WhiteSurface:#FFFFFF; --Borders:#D4D1CB; --DarkAccent:#D06A00; --Transparent:rgba(0, 0, 0, 0); --Body:1.063rem; --e-gv-6c8eb22:#587258; --Shadow-SoftWarm:rgba(78,33,7,0.08); --Shadow-DarkWarm:rgba(78, 33, 7, 0.6); --e-gv-6394ce6:2.125rem; --e-gv-259f81e:#FFFFFF; --e-gv-5cacf07:#E8EDE7; --e-gv-1787fe8:1.3rem; --e-gv-5ec7b0d:#587258; --e-gv-74ade7b:#FC880E; --e-gv-2df3a61:#D06A00; --e-gv-7dde142:#F2EAE6; --e-gv-d0adfe5:rgba(0, 0, 0, 0); --MegaMenu-Card-Title:1.1rem; --GreenLight:#C8D6C6; --GreenDeep:#3A5040; --GreenAbyss:#0E1F12; --GreenMid:#9BB89A; --OrangeMidTint:#FCCF8A; --WarmDeep:#2E1204; --NeutralMid:#A8A49C; --NeutralDark:#6B6760; --Shadow-GreenSoft:rgba(28,51,32,0.40); --Shadow-GreenStrong:rgba(28,51,32,0.80); --Shadow-ButtonGlow:rgba(252,136,14,0.25); }
/* Start custom CSS *//* ============================================================
   STEFANIE SCHNIER — Global CSS
   Von: Sebastian Hesse / Big Bang & Whisper
   Stand: 25. Juni 2026 (Atomic Ready V4)
   Einfügen unter: Elementor → Site Settings → Custom CSS
   ============================================================ */


/* ── 1. RESPONSIVE FONT SCALING ─────────────────────────────── */

html {
  font-size: clamp(13px, 0.9vw, 16px);
}


/* ── 2. HERO SECTION ─────────────────────────────────────────── */

/* ── HERO TITLE — Globale Klassen ───────────────────────────────── */

/* Desktop */
.hero-title-startseite {
  font-size: 5rem !important;
  font-weight: bold !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.hero-title {
  font-size: 4rem !important;
  font-weight: bold !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

.hero-title-span {
  display: block !important;
  font-size: 2rem !important;
  font-weight: normal !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
  margin-top: 1rem !important;
  text-align: left !important;
}

@media (max-width: 1024px) {
  .elementor-widget-html .hero-title,
  .elementor-widget-html h1.hero-title {
    font-size: 4rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  .elementor-widget-html .hero-title-span {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-top: 0.8rem !important;
    display: block !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .elementor-widget-html .hero-title,
  .elementor-widget-html h1.hero-title {
    font-size: 2rem !important;
    text-align: center !important;
    width: 100% !important;
  }

  .elementor-widget-html .hero-title-span {
    font-size: 1.3rem !important;
    text-align: center !important;
  }
}

/* Fallback Container-Sicherung für den Hero */
.hero-section {
  position: relative;
  overflow: hidden;
}


/* ── 3. DESIGN TOKENS (SLOT-SYSTEM FÜR UNABHÄNGIGE HINTERGRUND-KREISE) ───── */

/* 3.1 Basis-Setup für den umgebenden Container */
.bg-token-wrapper {
  position: relative !important;
  overflow: hidden;
  z-index: 0;
}

/* Gemeinsame Basis für die Pseudo-Elemente */
.bg-token-wrapper.has-tr::before,
.bg-token-wrapper.has-bl::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================
   SLOT 1: OBEN RECHTS (TR) via ::before
   ========================================== */
.bg-token-wrapper.has-tr::before {
  top: var(--tr-offset-y, -50px);
  right: var(--tr-offset-x, -50px);
  left: auto !important;   /* FIX: Überschreibt Elementor-Vererbung */
  bottom: auto !important; /* FIX: Überschreibt Elementor-Vererbung */
  width: var(--tr-size, 300px);
  height: var(--tr-size, 300px);
  background: var(--tr-color, rgba(0,0,0,0.05));
}

/* TR - Größen */
.tr-size-sm { --tr-size: 120px; --tr-offset-x: -30px; --tr-offset-y: -30px; }
.tr-size-md { --tr-size: 240px; --tr-offset-x: -120px; --tr-offset-y: -120px; }
.tr-size-lg { --tr-size: 720px; --tr-offset-x: -120px; --tr-offset-y: -120px; }
.tr-size-hero { --tr-size: 1600px; --tr-offset-x: -200px; --tr-offset-y: -40px; }

/* TR - Farben */
.tr-color-white-7 { --tr-color: rgba(255, 255, 255, 0.07); }
.tr-color-white-4 { --tr-color: rgba(255, 255, 255, 0.04); }
.tr-color-greentint { --tr-color: rgba(232, 237, 231, 0.06); }
.tr-color-accent { --tr-color: rgba(252, 136, 14, 0.05); }


/* ==========================================
   SLOT 2: UNTEN LINKS (BL) via ::after
   ========================================== */
.bg-token-wrapper.has-bl::after {
  bottom: var(--bl-offset-y, -50px);
  left: var(--bl-offset-x, -50px);
  right: auto !important; /* FIX: Überschreibt Elementor-Vererbung */
  top: auto !important;   /* FIX: Überschreibt Elementor-Vererbung */
  width: var(--bl-size, 300px);
  height: var(--bl-size, 300px);
  background: var(--bl-color, rgba(0,0,0,0.05));
}

/* BL - Größen */
.bl-size-sm { --bl-size: 120px; --bl-offset-x: -30px; --bl-offset-y: -30px; }
.bl-size-md { --bl-size: 240px; --bl-offset-x: -120px; --bl-offset-y: -120px; }
.bl-size-lg { --bl-size: 720px; --bl-offset-x: -120px; --bl-offset-y: -120px; }
.bl-size-hero { --bl-size: 1600px; --bl-offset-x: -200px; --bl-offset-y: -40px; }

/* BL - Farben */
.bl-color-white-7 { --bl-color: rgba(255, 255, 255, 0.07); }
.bl-color-white-4 { --bl-color: rgba(255, 255, 255, 0.04); }
.bl-color-greentint { --bl-color: rgba(232, 237, 231, 0.06); }
.bl-color-accent { --bl-color: rgba(252, 136, 14, 0.05); }


/* ── 4. NAVIGATION ───────────────────────────────────────────── */

/* Mega-Menü Abschnitts-Label (Klasse: is-heading-link) */
.is-heading-link {
  pointer-events: none;
  cursor: default;
  color: #5A6B58 !important;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 14px;
  padding-bottom: 4px;
  opacity: 1 !important;
  background: transparent !important;
}

/* Mega-Menü Trennlinie (Klasse: is-heading-divider) */
.is-heading-divider {
  border-top: 0.5px solid #D4D1CB;
  margin-top: 6px;
  padding-top: 14px;
}

/* Tab Widget — Selected Border Fix */
.elementor .e-tab-base.e--selected {
  border-color: var(--Borders) !important;
}


/* ── 5. PERSONA CARDS ────────────────────────────────────────── */

.persona-a {
  border-left: 3px solid #587258 !important;
  border-radius: 0 8px 8px 0;
}
.persona-b {
  border-left: 3px solid #9BB89A !important;
  border-radius: 0 8px 8px 0;
}
.persona-c {
  border-left: 3px solid #FC880E !important;
  border-radius: 0 8px 8px 0;
}


/* ── 6. TESTIMONIALS ─────────────────────────────────────────── */

/* Card-Stil (Klasse: testimonial-card) */
.testimonial-card {
  border-left: 3px solid #FC880E;
  border-radius: 0 8px 8px 0;
}

/* Slider Wrapper — visuelles Sichtfenster (Klasse: testimonial-wrapper) */
.testimonial-wrapper {
  overflow: clip !important;
  width: 100%;
}

/* Slider Track — scrollende Schiene (Klasse: testimonial-track) */
.testimonial-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: scroll !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.testimonial-track::-webkit-scrollbar {
  display: none;
}

/* Slider Slides — einzelne Cards (Klasse: testimonial-slide) */
.testimonial-slide {
  flex-shrink: 0 !important;
  flex-basis: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  scroll-snap-align: start !important;
}


/* ── 7. MAINTENANCE PAGE ─────────────────────────────────────── */

@keyframes gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.maintenance-bg {
  background: linear-gradient(
    -45deg,
    #E8EDE7,
    #F2EAE6,
    #9BB89A,
    #FEF0DC,
    #F2EAE6,
    #C4D3C2
  ) !important;
  background-size: 400% 400% !important;
  animation: gradient 18s ease infinite !important;
}


/* ── 8. UTILITY ──────────────────────────────────────────────── */

/* Z-Index Ebene über dekorativen Elementen (Klasse: z-content) */
.z-content {
  position: relative;
  z-index: 1;
}


/* ── 9. Ueber mich - Timeline (Screen Freeze / Virtual Scroll) ──────────────────── */

@media (max-width: 767px) {
    .timeline-six-cols { display: none !important; }
}

@media (min-width: 768px) {
    .timeline-six-cols {
        flex-wrap: nowrap !important;
        overflow-x: hidden !important; /* Versteckt die Scrollbar zwingend */
        overflow-y: hidden !important;
        scroll-behavior: auto !important;
    }
    .timeline-six-cols .milestone-item {
        flex-shrink: 0 !important; 
    }
}

/* Desktop & Tablet Breitenberechnung */
@media (min-width: 1025px) {
    .timeline-six-cols .milestone-item {
        flex: 0 0 calc((100% - (5 * 8px)) / 6) !important;
        max-width: calc((100% - (5 * 8px)) / 6) !important;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .timeline-six-cols .milestone-item {
        flex: 0 0 calc((100% - (3 * 8px)) / 4) !important;
        max-width: calc((100% - (3 * 8px)) / 4) !important;
    }
}


/* ── 10. CSS für das Highlight-Banner ──────────────────────────────────────────────── */

/* 1. Das Banner standardmäßig immer unsichtbar machen */
.featured-event-banner {
    display: none !important;
}

/* 2. Nur einblenden, wenn es sich innerhalb eines aktiven Highlight-Loops befindet */
.e-loop-item.is-featured-event .featured-event-banner {
    display: flex !important;
}


/* ── 11. 3 Auslassungspunkte ... nach 10 Zeilen im blog-card-excerpt ──────────────────────────────────────────────── */

.blog-card-excerpt.text-limit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10; /* Anzahl der Zeilen, nach denen abgeschnitten wird */
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ── 12. Border-Top Utility Classes ─────────────────────────
   Einsatz: Style Tab → CSS Classes in Elementor
   Alle Cards haben border-radius: 16px und
   border: 1px solid #D4D1CB als Basis-Styles
──────────────────────────────────────────────────────── */

.border-top-primarygreen {
  border-top: 3px solid #587258 !important;
}

.border-top-secondarycreamy {
  border-top: 3px solid #F2EAE6 !important;
}

.border-top-greentint {
  border-top: 3px solid #E8EDE7 !important;
}

.border-top-accentorange {
  border-top: 3px solid #FC880E !important;
}

.border-top-warmaccent {
  border-top: 3px solid #4E2107 !important;
}

/* ==========================================================================
   13. GLOBAL ATOMIC DESIGN: CTA-BANNER (Template ID 2615)
   ========================================================================= */

/* Überschrift zentrieren, Schriftfarbe Reinweiß erzwingen */
.cta-banner-content-title {
    color: #ffffff !important;
    text-align: center !important;
}

/* Subline / Begleittext zentrieren und im exakten Brand-Farbton GreenTint rendern */
.cta-banner-content-subline,
.e-con-a-atomic-element p {
    color: #e8ede7 !important;
    text-align: center !important;
}

/* Flexbox-Ausrichtung des Atomic-Containers für perfekte Zentrierung aller Elemente */
.e-con-a-atomic-element {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}


/* ============================================================
   KLASSENZUWEISUNG — SCHNELLREFERENZ

   Layout- & Struktur-Elemente                  CSS-Klasse
   ────────────────────────────────────────────────────────────
   Inner Container über Deko-Elementen          z-content
   Testimonial Section BG                       dot-pattern
   Testimonial Card                             testimonial-card
   Testimonial Wrapper                          testimonial-wrapper
   Testimonial Track                            testimonial-track
   Testimonial Slide                            testimonial-slide
   Persona Card A                               persona-a
   Persona Card B                               persona-b
   Persona Card C                               persona-c
   Maintenance Page                             maintenance-bg
   Nav Dropdown-Label                           is-heading-link
   Nav Dropdown-Divider                         is-heading-divider

   NEUES TOKEN SYSTEM (Kombinierbar unter Advanced → CSS Classes)
   ────────────────────────────────────────────────────────────
   1. Basis immer:                              bg-token-wrapper
   2. Position wählen:                          token-circle-tr ODER token-circle-bl
   3. Größe wählen:                             token-size-sm, -md, -lg, -hero
   4. Farbe wählen:                             token-color-white-7, -white-4, -greentint, -accent

   BEISPIELE FÜR DIE PRAXIS:
   Hero Sektion (Weiß 7%, Riesig, Oben rechts):
   bg-token-wrapper token-circle-tr token-size-hero token-color-white-7

   Dark Section (Greentint, Mittel, Unten links):
   bg-token-wrapper token-circle-bl token-size-md token-color-greentint

   Accent Card (Orange, Klein, Oben rechts):
   bg-token-wrapper token-circle-tr token-size-sm token-color-accent
   ============================================================ *//* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Moderne';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://stefanieschnier.de/wp-content/uploads/2026/06/ModerneLLTT-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'Moderne';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://stefanieschnier.de/wp-content/uploads/2026/06/ModerneLLTT-Book.woff2') format('woff2');
}
/* End Custom Fonts CSS */