.elementor-kit-5{--e-global-color-primary:#B41E29;--e-global-color-secondary:#C6C6C6;--e-global-color-text:#7A7A7A;--e-global-color-accent:#B41E29;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:700;--e-global-typography-primary-font-style:italic;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-font-style:italic;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:500;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:500;color:#757575;font-family:"Montserrat", Sans-serif;font-size:1.1em;font-weight:400;background-image:url("https://wpdl.dplp.de/wp-content/uploads/2025/11/Hintergrund-1-scaled.jpg");background-position:center center;background-repeat:repeat;background-size:55% auto;}.elementor-kit-5 a{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;}.elementor-kit-5 a:hover{font-family:"Montserrat", Sans-serif;}.elementor-kit-5 h1{color:#B41E29;font-family:"Montserrat", Sans-serif;font-size:1.5em;font-weight:700;text-transform:uppercase;}.elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:1.3em;font-weight:400;font-style:italic;line-height:1em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{font-family:"Montserrat", Sans-serif;font-weight:900;text-transform:uppercase;color:#FFFFFF;background-color:var( --e-global-color-primary );border-radius:5px 5px 5px 5px;padding:5px 5px 5px 5px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{color:#FFFFFF;background-color:var( --e-global-color-secondary );}.elementor-kit-5 label{font-family:"Montserrat", Sans-serif;}.elementor-kit-5 input:not([type="button"]):not([type="submit"]),.elementor-kit-5 textarea,.elementor-kit-5 .elementor-field-textual{font-family:"Montserrat", Sans-serif;font-weight:400;}.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){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}@media(min-width:1025px){.elementor-kit-5{background-attachment:fixed;}}@media(max-width:1024px){.elementor-kit-5{font-size:1em;}.elementor-kit-5 h1{font-size:1.2em;}.elementor-kit-5 h2{font-size:1.4em;line-height:1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:1.3em;--e-global-typography-secondary-font-size:1.1em;--e-global-typography-text-font-size:1em;--e-global-typography-accent-font-size:1em;font-size:1em;}.elementor-kit-5 h1{font-size:1.3em;}.elementor-kit-5 h2{font-size:1.1em;line-height:1em;letter-spacing:0px;word-spacing:0em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Haupt-Container, der alle Flipboxen enthält */
.flip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  --widgets-spacing: 0px; /* Elementor-Widget-Abstand auf 0 setzen */
}

/* JEDES direkte Kind (egal ob Widget, innerer Container etc.) */
.flip-grid > * {
  flex: 0 0 calc(100% / 7);  /* 7 nebeneinander */
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* Tablet: 4 nebeneinander */
@media (max-width: 1300px) {
  .flip-grid > * {
    flex: 0 0 25%;
  }
}

/* Mobil: 1 pro Reihe */
@media (max-width: 768px) {
  .flip-grid > * {
    flex: 0 0 100%;
  }
}

/* Alle typischen Elementor-Wrapper in diesem Bereich zusammenstutzen */
.flip-grid .elementor-widget-container,
.flip-grid .elementor-flip-box,
.flip-grid .elementor-flip-box__front,
.flip-grid .elementor-flip-box__back {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.flip-grid img {
  display: block;
  width: 100%;
  height: auto;
}


/* Gesamtes Slide: Rahmen, Hintergrund, Abstand */
.left-slide .swiper-slide {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 30px;
  box-sizing: border-box;
  border-bottom: 2px solid #b41e29;
  background-color: #ffffff;
}

/* Bild links mit Abstand */
.left-slide .swiper-slide .swiper-slide-bg {
  width: 40% !important;          
  height: auto !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat;
  margin-right: 30px;             /* Abstand zum Text rechts */
  
  /* Abstand zu den Rändern hinzufügen */
  padding: 10px;                  /* Abstand oben, unten, links fürs Bild selbst */
  box-sizing: border-box;
}

/* Textblock rechts daneben */
.left-slide .swiper-slide .elementor-slide-content {
  width: 60% !important;
  text-align: left !important;
  
  
  /* Textbereich fix nach rechts begrenzen */
.left-slide .elementor-slide-content {
  position: relative !important;
  flex: 1 1 auto;
  max-width: 60% !important;        /* Text nur im rechten Bereich */
  text-align: left !important;
  overflow-wrap: break-word;        /* lange Wörter umbrechen */
  word-wrap: break-word;
  z-index: 2;                       /* ganz sicher über deinen anderen Elementen */
}

.left-slide .elementor-slide-heading,
.left-slide .elementor-slide-description,
.left-slide .elementor-slide-button {
  text-align: left !important;
}

@media (max-width: 767px) {
  /* Slide-Inhalt mobil: untereinander statt nebeneinander/überlagert */
  .left-slide .elementor-slide-inner {
    display: block !important;
    padding: 16px !important;
  }

  /* Bild oben, als „Block“, mit Abstand nach unten */
  .left-slide .swiper-slide-bg {
    position: relative !important;
    width: 100% !important;
    height: 180px; /* nach Geschmack anpassen */
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center top !important;
    margin: 0 0 12px 0 !important; /* Abstand unter dem Bild */
  }

  /* Textblock danach in voller Breite */
  .left-slide .elementor-slide-content {
    position: relative !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .left-slide .elementor-slide-heading,
  .left-slide .elementor-slide-description {
    text-align: left !important;
  }
}



/* --- MOBILANPASSUNG FÜR SLIDES (bis 767px) --- */
@media (max-width: 767px) {

  /* GANZ WICHTIG:
     Desktop-Flex-Layout deaktivieren */
  .left-slide .elementor-slide-inner {
    display: block !important;
    padding: 20px 16px !important;
    box-sizing: border-box;
  }

  /* Hintergrundbild als Block-Element oben
     (Swiper erzeugt hier .swiper-slide-bg) */
  .left-slide .swiper-slide-bg {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;

    /* Höhe des Bildbereichs */
    height: 180px;  /* <- bei Bedarf ändern (150, 200, etc.) */

    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center top !important;

    margin: 0 0 16px 0 !important; /* Abstand unter dem Bild */
  }

  /* Textblock komplett unter dem Bild,
     kein Überlappen mehr möglich */
  .left-slide .elementor-slide-content {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    text-align: left !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    z-index: 5 !important;
  }

  /* Titel & Beschreibung linksbündig */
  .left-slide .elementor-slide-heading,
  .left-slide .elementor-slide-description {
    text-align: left !important;
    max-width: 100% !important;
  }

}/* End custom CSS */