/* ============================================
   SEITENLAYOUT
   ============================================ */

.wir-area{
  display: grid;
  grid-template-columns: 1.2fr 640px; /* rechte Spalte fest wie Home */
  gap: 18px;
  align-items: start;
}

.wir-left{ min-width: 0; }

/* rechte Spalte (Kacheln) soll die Breite wirklich nutzen */
.wir-area > .tiles{
  width: 100%;
  max-width: 640px;
}

/* ============================================
   HERO-BLOCK (Bild + Mitglieder)
   ============================================ */

.wir-hero-row{
  display:flex;
  gap:0;
  border:2px solid #111;
  background:#000;
  overflow:hidden;
}

/* Bildbox: startet bei max 600x500, schrumpft bei kleinen Screens */
.wir-hero{
  position:relative;
  width:100%;
  max-width:600px;
  : 6 / 5;      /* 600x500 */
  overflow:hidden;
  background:#000;
}

.wir-hero img{
  width:100%;
  height:100%;
  object-fit:cover;         /* keine Verzerrung */
  display:block;
}

.wir-hero-title{
  position:absolute;
  top:16px;
  left:18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size:2.4rem;
  font-weight:600;
  color:#d8ff00;
  text-shadow:0 3px 12px rgba(0,0,0,0.75);
}

/* ============================================
   MITGLIEDER-PANEL
   ============================================ */

.wir-members{
  width:320px;
  padding:18px;
  padding-left: 60px; /* wenn zu viel: 18px */
  border-left:1px solid rgba(255,255,255,0.15);
}

.wir-members-title{
  margin:0 0 14px 0;
  font:1.5rem Arial, Helvetica, sans-serif;
  font-weight:600;
  color:#d8ff00;
}

.wir-members-list{
  list-style:none;
  margin:0;
  padding:0;
  column-count:2;
  column-gap:22px;
}

.wir-members-list li{
  break-inside:avoid;
  margin-bottom:10px;
  font:1.3rem Arial, Helvetica, sans-serif;
  color:#9be678;
}

/* ============================================
   TEXT
   ============================================ */

.wir-text{
  background:#07121b;
  border-top:3px solid #111;
  padding:24px;
}

.wir-copy{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.18rem;
  line-height: 1.15;
  color: #bcd8b5;
  max-width: 75ch;
}

.wir-copy p{
  margin: 0 0 14px 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width:1100px){
  .wir-area{
    grid-template-columns: 1fr;
  }

  .wir-area > .tiles{
    max-width: none;
  }
}

@media (max-width:900px){
  .wir-hero-row{
    flex-direction: column;  /* FLEX (nicht grid-template-columns) */
  }

  .wir-hero{
    max-width: none;
  }

  .wir-members{
    width:100%;
    padding-left: 18px;      /* 60px wäre hier zu viel */
    border-left:none;
    border-top:1px solid rgba(255,255,255,0.15);
  }

  .wir-members-list{
    column-count:2;
  }
}

@media (max-width:600px){
  .wir-members-list{
    column-count:1;
  }

  .wir-hero-title{
    font-size:2rem;
  }

  .wir-copy{
    font-size:1.05rem;
  }
}