.elementor-kit-8{--e-global-color-primary:#DF2312;--e-global-color-secondary:#61C4DC;--e-global-color-text:#000000;--e-global-color-accent:#000000;--e-global-color-9e70518:#FCFCFC;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:#444444;font-size:18px;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 h1{font-size:72px;}.elementor-kit-8 h2{font-size:56px;}.elementor-kit-8 h3{font-size:48px;}.elementor-kit-8 h4{font-size:28px;}.elementor-kit-8 h5{font-size:20px;}.elementor-kit-8 h6{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end: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-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}/* Start custom CSS *//* ============================================================
   Mobile: globale Typografie-Regeln für Elementor
   Ziel: Einheitliche Schriftgrössen und Abstände auf Smartphones
   Breakpoint: max-width 767px (Standard-Mobile in Elementor)
   ============================================================ */
@media (max-width: 767px) {

  /* H1–H2 Überschriften sollen immer 38px gross sein */
  .elementor .elementor-widget-heading h1.elementor-heading-title,
  .elementor h1,
  .elementor h2 {
    font-size: 38px !important;
    line-height: 1.2em; /* engerer Zeilenabstand für bessere Lesbarkeit */
  }

  /* H3–H6 Überschriften mit 28px (einheitlich kleiner als H1–H2) */
  .elementor .elementor-widget-heading h3.elementor-heading-title,
  .elementor h3,
  .elementor h4,
  .elementor h5,
  .elementor h6 {
    font-size: 28px !important;
    line-height: 1.2em;
  }

  /* Subtitles (Untertitel/Section-Titel) auf 18px */
  .elementor .elementor-element .section-title-wrapper .sub-title,
  .elementor .section-title-wrapper .sub-title,
  .elementor .elementor-heading-title.section-subtitle,
  .elementor .subtitle {
    font-size: 18px !important;
    line-height: 1.5em !important;       /* etwas mehr Abstand für Lesbarkeit */
    letter-spacing: 0 !important;        /* überschreibt evtl. Elementor Defaults */
    text-transform: none !important;     /* verhindert Zwang zu GROSSBUCHSTABEN */
  }
}


/* ============================================================
   Tablet: Typografie-Regeln für mittlere Breakpoints
   Ziel: Anpassung für Portrait-/Landscape-Tablets
   Breakpoint: 768px – 1024px
   ============================================================ */
@media (max-width: 1024px) and (min-width: 768px) {

  /* H1–H2 Überschriften etwas grösser als auf Mobile */
  .elementor h1, .elementor h2 { 
    font-size: 42px !important; 
  }

  /* H3–H6 auf 36px für bessere Hierarchie */
  .elementor h3, .elementor h4, .elementor h5, .elementor h6 { 
    font-size: 36px !important; 
  }

  /* Subtitles einheitlich 18px */
  .elementor .section-title-wrapper .sub-title { 
    font-size: 18px !important; 
  }
}


/* ============================================================
   Mobile: Container + Inhalt zentrieren
   Ziel: Alle Container und Widgets mittig ausrichten
   Breakpoint: max-width 767px
   ============================================================ */
@media (max-width: 767px) {

  /* Elementor-Container und Subcontainer werden per Flexbox zentriert */
  .elementor .elementor-container,
  .elementor .elementor-element.e-con,
  .elementor .elementor-widget-container {
    justify-content: center !important; /* horizontal zentrieren */
    align-items: center !important;     /* vertikal zentrieren (falls Flex aktiv) */
    text-align: center !important;      /* Texte in den Containern ebenfalls zentriert */
  }

  /* Widgets mit eigenem Text (Überschrift, Texteditor) auch mittig */
  .elementor .elementor-widget,
  .elementor .elementor-widget-heading,
  .elementor .elementor-widget-text-editor {
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  .section-title {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

@media (max-width: 767px) {
  .feature-box-inner {
    border-width: 10px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .elementor-heading-title {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}/* End custom CSS */