/* Unternehmen-Seite: Split-Screen + Team */

/* SPLIT SCREEN LAYOUT */
.split-layout {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* Linke Seite: Fixiertes Bild (Desktop) */
.split-visual {
  /* Wir nutzen hier calc für eine flexiblere Breite */
  width: 50%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #f0f0f0;
  overflow: hidden;
  /* Sanfter Übergang bei Breitenänderung */
  transition: width 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

.split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Standard-Fokus: Vertikal auf die Köpfe (15%), Horizontal mittig */
  object-position: 50% 15%;
  
  transition: object-position 0.6s ease-in-out;
}

/* Rechte Seite: Scrollbarer Inhalt */
.split-content {
  width: 50%;
  margin-left: 50%;
  background-color: var(--surface);
  padding: 140px 4rem 4rem 4rem;
  min-height: 100vh;
  position: relative;
  z-index: 2;
  transition: width 0.6s cubic-bezier(0.7, 0, 0.3, 1), margin-left 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

/* Content Begrenzung */
.content-constraint {
  width: 100%;
  max-width: 680px; 
  margin-right: auto;
}

.content-block {
  margin-bottom: 5rem;
}

/* TYPOGRAFIE */
h1.page-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  margin-bottom: 2rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.lead-textx {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 2rem;
  font-weight: 400;
}

p { margin-bottom: 1.5rem; color: var(--muted); }

/* Team Grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.team-member {
  display: flex;
  flex-direction: column;
}

.member-image {
  width: 100%;
  aspect-ratio: 3/4;
  background-color: #eee;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 4px;
}

.member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.team-member:hover .member-image img { transform: scale(1.03); }

/* Breites Bild am Ende */
.team-member--wide { 
  grid-column: 1 / -1; 
  max-width: 100%;
}

.team-member--wide .member-image--wide {
  aspect-ratio: auto;
  max-height: 500px;
  overflow: hidden;
}

.team-member--wide .member-image--wide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 25%;
}

.member-name {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0;
}

.member-role {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.2rem 0 0 0;
  line-height: 1.3;
}

/* Vita / Facts */
.section-divider {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 5rem 0;
}

/* RESPONSIVE OPTIMIERUNG */

/* Desktop-Anpassung: Wir halten das Bild breiter, wenn der Screen schmaler wird */
@media (max-width: 1600px) {
  .split-visual { 
    width: 45%; /* Etwas weniger wegschneiden */
  }
  .split-content { 
    width: 55%; 
    margin-left: 45%;
  }
}

/* Die "kritische Zone" (z.B. deine 1410px): 
   Hier geben wir dem Bild eine feste Mindestbreite, damit die Personen Platz haben. */
@media (max-width: 1440px) {
  .split-visual { 
    width: 42%; 
  }
  .split-content { 
    width: 58%; 
    margin-left: 42%; 
    padding-left: 3rem;
    padding-right: 3rem;
  }
  
  /* Fokus auf die rechte Seite des Bildes (da dort oft die Personen sitzen, die sonst rausrutschen) */
  .split-visual img { object-position: 80% 15%; }
}

/* Aggressiverer Schutz für die Personen: 
   Wenn der Platz im Split nicht mehr reicht, brechen wir früher um. */
@media (max-width: 1300px) {
  .split-layout { flex-direction: column; }

  .split-visual {
    position: relative;
    width: 100%;
    /* Im mobilen/vertikalen Modus ist das Querformat ideal */
    height: auto; 
    aspect-ratio: 16 / 9; /* Erzwingt das natürliche Seitenverhältnis */
    min-height: 400px;
    z-index: 1;
    margin-top: var(--main-header-h, 80px); 
  }

  .split-visual img {
    object-position: center 20%;
  }

  .split-content {
    width: 100%;
    margin-left: 0;
    padding: 3rem 1.5rem 4rem 1.5rem;
  }

  .content-constraint {
    margin: 0 auto;
    max-width: 720px; 
  }
}

@media (max-width: 600px) {
  .split-visual { 
    height: auto;
    aspect-ratio: 4/3; /* Auf dem Handy etwas quadratischer für mehr Wirkung */
    min-height: 300px;
  }
  
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .member-name { font-size: 0.95rem; }
  .member-role { font-size: 0.8rem; }
}

/* WICHTIG: Sichtbarkeit */
.content-constraint > * {
  opacity: 1 !important;
  transform: none !important;
}