/* module.css */
.referenz-slider-wrapper {
/*  padding: 4rem 1rem; */
  color: #004B5C;
/*  padding: 50px 20px 20px 20px; */  /* Anpassung an Abstände bei anderen Modulen */
  padding: 50px 64px; /* globaler Abstand zum Rand */
}

.referenz-slider-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0;
  box-sizing: border-box;
}

.referenz-heading {
  font-size: 2rem;
  text-align: center; /* sorgt für Zentrierung */
  margin-bottom: 1rem;
}

/* Hintergrundfarben */
.bg-pink    { background-color: #FFF0F5; }
.bg-yellow  { background-color: #FFFAD2; }
.bg-orange  { background-color: #FFE8D4; }
.bg-blue    { background-color: #E5F1F1; }
.bg-white   { background-color: #FFFFFF; }
.bg-black   { background-color: #000000; color: #FFFFFF; }

/* Dynamische Textfarben basierend auf Hintergrund */
.bg-pink .referenz-heading,
.bg-pink .referenz-intro {
  color: #660033 !important;
}

.bg-yellow .referenz-heading,
.bg-yellow .referenz-intro,
.bg-orange .referenz-heading,
.bg-orange .referenz-intro {
  color: #4F1400 !important;
}

.bg-blue .referenz-heading,
.bg-blue .referenz-intro {
  color: #004B5C !important;
}

.bg-white .referenz-heading,
.bg-white .referenz-intro {
  color: #000000 !important;
}

.bg-black .referenz-heading,
.bg-black .referenz-intro {
  color: #FFFFFF !important;
}

.highlight {
  padding: 0.1em 0.2em;
  border-radius: 0.3em;
  margin-left: 0.1em;
}

/* Überschrift */
.highlight-words-heading {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 1rem;
}

/* Wort-Highlights */
.highlight-chw {
  padding: 0.2em 0.25em;            /* Innenabstand oben/unten 0.1em, rechts/links 0.25em */
  border-radius: 0.2em;             /* Leicht abgerundete Ecken */
  margin: 0 0.1em;                  /* Kleiner horizontaler Abstand zwischen mehreren Highlights */
  display: inline-block;                  /* Verhalten wie normaler Text im Fliesstext */
  line-height: 1;                   /* Zeilenhöhe exakt passend zur Schriftgröße */
}

/* Introtext */
.referenz-intro {
  text-align: center;


}

.referenz-intro-wrapper {
  max-width: 800px;
  margin: 0 auto 2rem;
  padding: 0 1rem; /* für mobile Sicherheit bei Randabstand */
  box-sizing: border-box;
}

/* Slider */
.referenz-slider {
  overflow: hidden;
  position: relative;
  width: 100
    
}

.referenz-slide {
  background: #FFFFFF;
  border-radius: 1rem;
  flex: 0 0 100%; /* Subtrahiere den Abstand */
  max-width: 100%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 3rem;
}

.referenz-slide-container {
  cursor: grab;
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
  gap: 2rem; /* <--- Abstand zwischen Slides */  
  padding: 0 0rem;   /* Abstand links/rechts */
  box-sizing: border-box;  
}


.referenz-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.referenz-image {
  flex: 1 1 45%;
  display: flex;
  padding: 0.5rem;    
}

.referenz-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.75rem 0 0 0.75rem; 
}

.referenz-text {
  padding: 2rem;   
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.referenz-text h3 {
/*  font-size: 1.5rem; */
  margin-bottom: 1rem;
  color: #004B5C;
}

/* Tags */
.referenz-tags {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.tag {
  padding: 0.3rem 0.6rem;
  border-radius: 1rem;
  font-weight: bold;
  font-size: 0.9rem;
  margin-right: 0.5rem;
}
.tag-yellow { background: #FFEB3B; color: #004B5C; }
.tag-blue { background: #B1DEDE; color: #004B5C; }

/* Namen & Beschreibung */
.referenz-names {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.referenz-label-block {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.label_left,
.label_right {
  font-size: 1rem;
  font-weight: 600;
  border-radius: 1rem;
  padding: 0.3rem .6rem; /* Erste Zahl: höhe der farbigen Flächen, zweite Zahl: Breite der Farbigen Fläche */
  display: inline-block;
  width: auto; 
  max-width: max-content;

}

.label_left {
  background-color: #FFEB3B;
  color: #004B5C;
}

.label_right {
  background-color: #B1DEDE;
  color: #004B5C;
}

.name_left,
.name_right {
  font-size: 1rem;
  color: #004B5C;
  margin-left: 0.5rem;
}

.referenz-description {
  font-size: 1rem;
  line-height: 1.5;
}

.referenz-description p {
  font-size: 1rem;
  line-height: 1.5;
  color: #004B5C;
}

/* Pfeile */

.referenz-arrows .arrow i {
  font-size: 1.5rem;
  color: inherit;
}

.referenz-arrows {

      position: relative;
  bottom: 1.5rem;
  right: 1.5rem;
  text-align: right;
  display: flex;
    justify-content: flex-end;
  gap: 1rem;
  z-index: 2;
  
      padding-top: 0.1rem;
    padding-right: 1.5rem;
  margin-top: 0rem; /* optional je nach Abstandswunsch */
  margin-right: 1.5rem !important;

}

.arrow {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: currentColor;
}

.referenz-arrows .arrow:hover {
  transform: translateX(4px); /* für den rechten Pfeil */
  transition: transform 0.3s ease;
}
.referenz-arrows .arrow.prev:hover {
  transform: translateX(-4px); /* für den linken Pfeil */
}  

/* Responsive */
@media (min-width: 769px) {

  .referenz-slide-container {
    gap: 0;
    padding: 0;
  }

  .referenz-slide {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 2rem; /* optisch sauberer Abstand */
    box-sizing: border-box;
  }

  .referenz-slide:last-child {
    padding-right: 0; /* letzter Slide bündig */
  }  
  
}  

@media (min-width: 769px) and (max-width: 1024px) {

    .referenz-slide {
    flex-direction: row;
    margin: 0 auto 2rem;
    width: 100%;
  }

  .referenz-image {
    flex: 1 1 45%;
    padding: 0.5rem;
  }

  .referenz-text {
    flex: 1 1 50%;
  padding: 1rem 2rem 1rem 0.5rem;
  }

  .referenz-arrows {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    justify-content: flex-end;
    padding: 1rem;
  }
  
  
  .referenz-grid {
    gap: 0.5rem !important; /* oder 0.5rem, je nach gewünschtem Abstand */
  }


}

@media (max-width: 768px) {
  
  .referenz-slider-inner {
 /* padding: 0 -2rem; */ /* oder 1.5rem, wenn es besser passt */
} 
  
  .referenz-grid {
    flex-direction: column;
  }

.referenz-slider-wrapper {
  padding: 50px 2rem 50px 2rem !important; /* Oben Rechts Unten Links */
}  

.referenz-slide-container {
  padding: 0rem 0rem 0rem 0rem; /* Oben Rechts Unten Links */
  gap: 0rem; /*Abstand zwischen zwei Slides */
}
  
  .referenz-slide {
    flex-direction: column; /* macht Mobile Slider 1-spaltig */
    margin: 0 auto 2.2rem;
 /*   padding: 0 1rem; '/ /* Links/Rechts Abstand */    
    width: 100%; /* oder z. B. 95% */
  }
  
  .referenz-image {
    order: 1;
    flex: 1 1 auto;
    padding: 0.5rem;
 
  }

  .referenz-image img {
    width: 100%;        /* Bild füllt die Breite */
    height: auto !important;       /* Höhe passt sich proportional an */
       max-height: 300px;
    object-fit: cover; /* Optional: Vermeidet Abschneiden */
    border-radius: 0.75rem 0.75rem 0 0; /* Oben abgerundet auf Mobile */
  }

  .referenz-text {
    order: 2;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem; /* Etwas weniger Padding auf Mobile */
  }
    .referenz-names {
    margin-bottom: -0.1rem !important; /* vorher z. B. 1rem – jetzt enger */
  }
  
  .referenz-arrows {
    position: absolute;
    top: 50%;
    left: 0rem;
    right: -1.5rem;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 0rem;
    z-index: 3;
    pointer-events: none; /* wichtig für klickbare Pfeile innerhalb der Buttons */
  }

  .referenz-arrows .arrow {
    pointer-events: auto; /* erlaubt Klicks */

    border-radius: 50%;
    padding: 0.2rem !important;
  }
  
  @media (max-width: 768px) {
  .bg-black .referenz-arrows .arrow i {
    color: #F37021; /* smino orange */
  }
}

}