/*Über uns Seite overrides*/

/*==Einleitungs Text==*/
.maxwidth100 {
	width: 570px !important;
}

/* Stellt sicher, dass beide Spalten gleich hoch sind und vertikal zentriert werden */
.qx-row-5n2z2.werte {
  display: flex;
  align-items: center; /* vertikal zentrieren */
  justify-content: space-between; /* optional: Abstand zwischen links und rechts */
}

/* Optional: Entferne Standard-Block-Verhalten */
.qx-row-5n2z2.werte > .qx-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* === ZEITSTRAHL STYLES === */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 50px auto;
  padding: 40px 0;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #231d1F, #A11919);
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
  box-sizing: border-box;
}

.timeline-item::before {
  content: "";
  position: absolute;
  top: 20px;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 4px solid #878786;
  border-radius: 50%;
  z-index: 1;
}

.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.left::before {
  right: -10px;
}

.timeline-item.right {
  left: 50%;
  text-align: left;
}

.timeline-item.right::before {
  left: -10px;
}

.timeline-content {
  background: #f5f5f5;
  padding: 15px 20px;
  border-radius: 8px;
  position: relative;
}

.timeline-content h3 {
  margin-top: 0;
  color: #585856;
  font-size: 24px;
}

.timeline-content p {
  margin: 5px 0 0;
  font-size: 16px;
  color: #444;
}

/* Weiße Verbindungslinie vom Punkt zur Box */
.timeline-item::after {
  content: "";
  position: absolute;
  top: 28px; /* vertikal zentriert zum Punkt */
  width: 30px; /* Länge der Linie – ggf. anpassen */
  height: 2px;
  background: #ffffff;
}

.timeline-item.left::after {
	right: 10px;
}

.timeline-item.right::after {
  left: 10px;
}

@media (max-width: 766px) {
  .timeline {
    padding: 20px 0;
  }

  .timeline::before {
    left: 30px; /* Linie links platzieren */
    transform: none;
    z-index: 1; /* Sicherstellen, dass sie sichtbar bleibt */
  }

  .timeline-item {
    width: 100%;
    padding-left: 60px;
    padding-right: 20px;
    text-align: left;
    position: relative;
    left: 0 !important;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0 !important;
  }

  .timeline-dot {
    left: 30px; /* Punkt direkt auf der Linie */
    z-index: 2; /* über der Linie */
  }

  .timeline-line {
    display: none; /* horizontale Linien entfernen */
  }

  .timeline-box {
    margin-left: 20px; /* Abstand zur Linie */
    display: inline-block;
    position: relative;
    z-index: 3; /* vor allem anderen */
  }
   /*==TEXT==*/
  .timeline-item.left {
  	left: 0;
  	text-align: left;
  }

  /*==PUNKTE==*/
  .timeline-item.left::before {
    left: 22px;
  }

  .timeline-item.right::before {
   left: 22px;
  }
  /*==STRICHE==*/
  .timeline-item.left::after {
	left: 30px;
  }

  .timeline-item.right::after {
   left: 30px;
 }
}


.dark-time{
    h1,h2,h4,h5,h6{
        color:#fff !important;
    }
}

*/
/*==WERTE-ABSCHNITT==*/
/* Stellt sicher, dass beide Spalten gleich hoch sind und vertikal zentriert werden */
.werte {
  margin: auto 0; /* vertikal mittig */
}

.werte-box {
  background-color: #070809;
  color: #ffffff;
  border-radius: 8px;
  padding: 0 24px;
  min-height: 70px; /* oder je nach Bedarf */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin: 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: none;
}

.werte-box:hover {
  background-color: #ffffff;
  color: #070809;
  cursor: default;
}

/* Optional: Tablet-spezifische Anpassung */
@media (max-width: 1024px) {
  .werte-box {
    font-size: 15px;
    padding: 8px 16px;
    min-height: auto;
  }
}

@media (max-width: 900px) {
  .werte, 
  .werte-image{
	width: 100%!important;
  }
}

/*==STIMMEN AUS DEM TEAM==*/
#qx-text-pqdt6 p {
  margin: 0 !important;
}

#qx-text-pqdt6 h5 {
  margin: 0 !important;
  padding-bottom: 0px !important;
}

/*==STIMMEN AUS DEM TEAM==*/
.team-quote-wrapper {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 60px 20px;
  color: #fff;
}

.team-image {
  width: 80px;
  height: 80px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.team-name-stimmen {
  font-size: 20px;
  margin: 0;
}

.team-role {
  font-size: 14px;
  color: #878786;
  margin: 0px 0 0px;
}

.team-quote {
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  position: relative;
  padding: 0 20px;
}

body{
	 h5{
		padding-bottom: 0px !important;
	}
	 h4{
		padding-bottom: 0px !important;
	}
}

/*==TEAMSLIDER==*/
/* ================================
   Team-Slider – Basisvariablen
   ================================ */
:root{
  --cols-desktop: 5;
  --cols-tablet: 3;
  --cols-mobile: 1;
  --gap: 24px;

  --white: #ffffff;
  --dark-grey: #1c1c1c;
  --light-grey: #9aa0a6;
}

/* ================================
   Wrapper & Pfeile
   ================================ */
.team-slider-wrapper{
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;               /* Platz für Pfeile links/rechts */
}

/* Navigationspfeile */
.team-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.92);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  font-size: 28px;
  line-height: 42px;
  text-align: center;
  color: #333;
  cursor: pointer;
  z-index: 3;
}
.team-nav.prev{ left: 12px; }
.team-nav.next{ right: 12px; }

/* ================================
   Bühne/Track (nativer Horizontal-Slider)
   ================================ */
.team-track{
  display: grid;
  grid-auto-flow: column;
  /* Spaltenbreite so berechnen, dass X Karten pro View sichtbar sind */
  grid-auto-columns: calc(
    (100% - var(--gap) * (var(--cols-desktop) - 1))
    / var(--cols-desktop)
  );
  gap: var(--gap);

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  padding: 0;
  scrollbar-width: none;         /* Firefox: Scrollbar ausblenden */
  cursor: grab;                  /* Drag-Hinweis */
}
.team-track::-webkit-scrollbar{ display: none; }
.team-track.is-dragging{ cursor: grabbing; }

/* ================================
   Karten / Slides
   ================================ */
.team-card{
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always;      /* immer sauber einrasten */
  transition: transform .3s ease, opacity .3s ease, filter .3s ease;
}

/* Bild: 1:1, sauberer Zuschnitt */
.team-card img{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;           /* 500x500 → bleibt Quadrat (z.B. ~322px) */
  object-fit: cover;
  border-radius: 8px;            /* falls runde Ecken gewünscht: 50% */
  -webkit-user-drag: none;
  user-select: none;
}

/* Nicht-zentrierte Karten dezent zurücknehmen */
.team-card:not(.is-center) img{
  filter: grayscale(100%);
  opacity: .75;
  transform: scale(.96);
}

/* ================================
   Weißer Namens-Container (nur Mitte)
   ================================ */
.team-name{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--white);
  color: var(--dark-grey);
  border-radius: 10px;
  padding: 8px 16px;
  min-width: 70%;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  pointer-events: none;          /* blockiert Drag nicht */
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}
.team-card.is-center .team-name{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Typo in der Box */
.team-name-inner .desc-label{
  font-size: 1.5rem;             /* ca. 24px */
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.team-name-inner p{
  margin: 0;
  font-size: .95rem;
  line-height: 1.3;
  color: #444;
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 1200px){
  .team-track{
    grid-auto-columns: calc(
      (100% - var(--gap) * (var(--cols-tablet) - 1))
      / var(--cols-tablet)
    );
  }
  .team-name{ min-width: 80%; bottom: 12px; padding: 8px 12px; }
  .team-name-inner .desc-label{ font-size: 1.25rem; } /* ~20px */
}

@media (max-width: 768px){
  .team-track{
    grid-auto-columns: calc(
      (100% - var(--gap) * (var(--cols-mobile) - 1))
      / var(--cols-mobile)
    );                            /* 1 Karte pro View */
  }
  .team-card:not(.is-center) img{ transform: scale(.98); opacity: .9; }
  .team-name{ min-width: 86%; }
}

/* ===== Größere Karten (weniger Spalten) ===== */
:root{
  /* vorher 5 → 4 Karten pro View = jede Karte breiter */
  --cols-desktop: 4;
  --gap: 24px;          /* etwas kleinerer Abstand (vorher 24px) */
}

/* (optional) auf sehr breiten Screens wieder 5 Karten zeigen */
@media (min-width: 1600px){
  :root{ --cols-desktop: 5; }
}

/* Rand der Bühne etwas kompakter, damit mehr Platz für Bilder bleibt */
.team-slider-wrapper{ padding: 0 48px; }

/* Mittlere Karte leicht größer, andere minimal kleiner (mehr Fokus) */
.team-card.is-center img{
  transform: scale(1.07);        /* größer als vorher */
  filter: grayscale(0);
  opacity: 1;
}
.team-card:not(.is-center) img{
  transform: scale(.94);         /* etwas kleiner als vorher */
  opacity: .8;
}

/* ===== Kleinere Name-Box ===== */
.team-name{
  bottom: 10px;                  /* dichter am Bildrand */
  padding: 6px 10px;             /* kompakter */
  min-width: 90%;                /* vorher ~70–80% */
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
.team-name-inner .desc-label{
  font-size: .9rem;            /* ~20px (vorher 1.5rem) */
  margin-bottom: 2px;
}
.team-name-inner p{
  font-size: .75rem;
}

/* ===== Tablet/Mobile Feinschliff ===== */
@media (max-width: 1200px){
  .team-name{ min-width: 90%; padding: 6px 10px; }
  .team-name-inner .desc-label{ font-size: .8rem; }
}
@media (max-width: 768px){
  /* 1 Karte pro View bleibt, Fokus etwas geringer skalieren */
  .team-card.is-center img{ transform: scale(1.04); }
  .team-name{ min-width: 80%; }
}

/* === Größen/Abstände – gern anpassen === */
:root{
  --gap: 24px;
  --card-size-desktop: 250px;   /* Bild/Karte Desktop */
  --card-size-tablet: 190px;    /* Tablet */
  --card-size-mobile: 80vw;     /* Mobile */
}

/* Bühne/Track: Flex + sanftes Snap (proximity) */
.team-track{
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;     /* smoother als mandatory bei Auto-Drift */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;               /* Seite kann vertikal scrollen */
  cursor: grab;
}
.team-track::-webkit-scrollbar{ display:none; }
.team-slider-wrapper.is-dragging .team-track{ cursor: grabbing; }

/* Karten gleich breit (macht die Bilder wieder groß) */
.team-card{
  flex: 0 0 auto;
  width: var(--card-size-desktop);
  scroll-snap-align: center;
  position: relative;
  transition: transform .3s ease, opacity .3s ease, filter .3s ease;
}
@media (max-width: 1200px){
  .team-card{ width: var(--card-size-tablet); }
}
@media (max-width: 768px){
  .team-card{ width: var(--card-size-mobile); }
}

/* Bilder: quadratisch, groß, sauber gecroppt */
.team-card img{
  display:block;
  width:100%;
  height: auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:8px;                /* bei Wunsch 50% für Kreis */
  -webkit-user-drag:none;
  user-select:none;
}

/* Fokusoptik: Mitte kräftig, Ränder dezent */
.team-card:not(.is-center) img{
  filter: grayscale(100%);
  opacity: .78;
  transform: scale(.96);
}
.team-card.is-center img{
  filter:none;
  opacity:1;
  transform: scale(1.07);           /* Mitte größer */
}

/* Name-Box kompakter */
.team-name{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  background:#fff; color:#1c1c1c;
  border-radius:8px; padding:6px 10px;
  text-align:center;
  box-shadow:0 6px 18px rgba(0,0,0,.16);
  pointer-events:none; opacity:0; transition:opacity .25s ease;
  z-index:2;
}
.team-card.is-center .team-name{ opacity:1; }

.team-name-inner .desc-label{ margin:0 0 2px; font-weight:900; text-transform:uppercase; }
.team-name-inner p{ margin:0; color:#444; }

/* Pfeile bleiben wie gehabt; bei Bedarf leicht anpassen */

/* Globale Slider-Variablen */
.team-slider-wrapper{
  --gap: 18px;        /* Abstand zwischen Karten */
  --sidepad: 48px;    /* linker/rechter Innenabstand des Wrappers */
  --cols: 5;          /* Standard: Desktop = 4 */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--sidepad);
}

/* Kartenbreite exakt ausrechnen:
   min(100vw, 1400px) = sichtbare Breite des Wrappers,
   abzüglich Padding & Gaps, geteilt durch Spaltenzahl */
.team-track { gap: var(--gap); }

.team-card{
  flex: 0 0 auto;
  width: calc(
    (min(100vw, 1400px) - (var(--sidepad) * 2) - (var(--gap) * (var(--cols) - 1)))
    / var(--cols)
  );
}

/* Tablet: 3 Spalten */
@media (max-width: 1200px){
  .team-slider-wrapper{ --cols: 3; }
}

/* Mobil: 2 Spalten */
@media (max-width: 768px){
  .team-slider-wrapper{ --cols: 2; }
}