/* Wrapper */
.innernewhire {
  max-width: 1200px;
  margin: auto;
  padding: 40px 20px;
}

/* Grid für die beiden Personen */
.newhire-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}

/* Einzelne Karten */
.newhire-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Bilder */
.newhire-img {
  width: 220px;
  height: auto;
  border-radius: 10px;
  margin-bottom: 1rem;
  object-fit: cover;
}

/* Responsive */
@media (max-width: 900px) {
  .newhire-grid {
    grid-template-columns: 1fr;
  }
  .newhire-card {
    text-align: center;
    align-items: center;
  }
}
/* bestehend aus deiner Version … */
.innernewhire { max-width: 1200px; margin: auto; padding: 40px 20px; }
.newhire-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; }
.newhire-card { position:relative; border-radius:12px; padding:1.5rem; text-align:center; }
.newhire-img { width:220px; height:auto; border-radius:0; margin-bottom:1rem; object-fit:cover; }
@media (max-width: 900px){ .newhire-grid{ grid-template-columns:1fr; } }

/* === Filmstreifen-Look === */
.filmstrip {
  background: #322E26;               /* dunkles Band */
  color: #fff;                    /* bessere Lesbarkeit */
  overflow: hidden;
}

/* helle „Perforationslöcher“ links & rechts */
.filmstrip::before,
.filmstrip::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 26px;                    /* Breite der Lochleiste */
  background:
     url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNicgaGVpZ2h0PSc0OCc+PHJlY3QgeD0nMycgeT0nMTQnIHdpZHRoPScyMCcgaGVpZ2h0PScxNCcgcng9JzMnIHJ5PSczJyBmaWxsPScjQzlDOUM3Jy8+PC9zdmc+") 0 0 / 100% 48px repeat-y,
    #322E26;                        /* Grundfarbe Band */    
    margin-left: 5px;
    margin-right: 5px;
}

/* links */
.filmstrip::before { left: 0; }
/* rechts */
.filmstrip::after { right: 0; }

/* etwas Innenabstand, damit Text/Bild nicht in die Lochleiste ragt */
.filmstrip { padding-left: 2.5rem; padding-right: 2.5rem; }

/* feine, helle Mittellinie wie auf echtem Film */
.filmstrip {
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 calc(50% - 1px);    /* mittig */
}

/* Bild leicht „gerahmt“ für mehr Tiefe */
.filmstrip .newhire-img {
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}

/* Textfarbe innerhalb Filmstreifen (falls deine .text global dunkel ist) */
.filmstrip .text { color: #f8f8f8; }

/* Responsive – schmalere Lochleisten und Polster auf Handy */
@media (max-width: 520px) {
  .filmstrip::before, .filmstrip::after { 
          width: 18px; 
        --rail: 20px;
        --hole: 6px;
        --step: 42px;}
  }
  
  .filmstrip { padding-left: 1.25rem; padding-right: 1.25rem; }

@media (max-width: 1300px) {
  .newhire-grid { gap: 1.5rem; }
  .innernewhire { padding: 36px 18px; }
  .filmstrip { --rail: 24px; --hole: 6.5px; --step: 46px; }
  .innernewhire { max-width: 90%;}
}


/* Tablet quer (≤992px) */
@media (max-width: 992px) {
  .newhire-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .newhire-card { padding: 1.25rem; }
  .newhire-img { width: clamp(180px, 40vw, 240px); }
  .filmstrip { --rail: 22px; --hole: 6px; --step: 44px; }
}

/* Tablet hoch / kleines Laptop (≤900px): einspaltig stapeln */
@media (max-width: 900px) {
  .newhire-grid { grid-template-columns: 1fr; }
  .newhire-card { text-align: left; }
  .filmstrip { --rail: 20px; --hole: 6px; --step: 42px; }
}

/* Großes Phone / Galaxy Z Fold 5 Cover-Screen (~412px Breite) (≤430px) */
@media (max-width: 430px) {
  .innernewhire { padding: 28px 14px; }
  .newhire-card { padding: 1rem; }
  .newhire-img { width: clamp(160px, 70vw, 220px); }
  .filmstrip { --rail: 18px; --hole: 5.5px; --step: 40px; }
  .filmstrip { padding-left: calc(var(--rail) + 12px); padding-right: calc(var(--rail) + 12px); }
}

/* Sehr schmale Phones (≤360px) */
@media (max-width: 360px) {
  .innernewhire { padding: 24px 12px; }
  .newhire-img { width: clamp(150px, 72vw, 200px); }
  .filmstrip { --rail: 16px; --hole: 5px; --step: 36px; }
  .filmstrip { padding-left: calc(var(--rail) + 10px); padding-right: calc(var(--rail) + 10px); }
}

/* Optional: Nutzer wünscht weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .newhire-card, .newhire-img { transition: none !important; }
}