/* =====================================================================
   Glichekom · Public-Site · Ansprechpartner / Team-Section
   v20260524-team-13 (Avatar via <img>, 800px LANCZOS+UnsharpMask-Quelle,
   100px Avatar, Spotlight scale 1.45, andere Karten translateX ±130vw raus,
   Section-Header beim Hover ausgeblendet damit die Karte freie Buehne hat)
   ===================================================================== */

#team {
  /* WICHTIG: Wenn der Hover die anderen Karten ins Viewport-Aus schiebt, darf
     der Section-Container das nicht abschneiden. */
  overflow: visible !important;
}

/* Section-Header beim Spotlight smooth ausfaden — damit die vergroesserte Karte
   freie Buehne hat und nicht ueber den Header schiesst.
   Wird via body-Klasse gesteuert (siehe JS) — fallback-kompatibel mit :has(). */
#team .gk-section-head {
  transition: opacity 0.55s cubic-bezier(.22,.61,.36,1),
              transform 0.55s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
body.gk-team-focus-active #team .gk-section-head,
#team:has(.gk-team-grid.is-focusing) .gk-section-head {
  opacity: 0;
  transform: translateY(-20px) scale(0.92);
  pointer-events: none;
}
#team .gk-team-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  position: relative;
  z-index: 2;
  perspective: 1200px;
}
/* Body-Overflow erlauben damit translateX(-130vw) wirkt ohne H-Scrollbar */
body.gk-team-spotlight-active {
  overflow-x: hidden;
}

.gk-team-card {
  position: relative;
  padding: 26px 24px 24px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)),
    linear-gradient(180deg, rgba(10,14,22,0.55), rgba(10,14,22,0.85));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.30);
  /* Smoother + langsamer fuer einen ruhigen, premium-feel Hover-Effekt.
     Alle Properties teilen sich dasselbe Easing damit nichts asynchron rumzappelt. */
  transition:
    transform 0.75s cubic-bezier(.22,.61,.36,1),
    opacity 0.65s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.65s cubic-bezier(.22,.61,.36,1),
    border-color 0.5s cubic-bezier(.22,.61,.36,1),
    filter 0.65s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
  will-change: transform, opacity, filter;
}

/* KEIN Hintergrund-Foto mehr in der Karte — nur dezenter orange Accent. */
.gk-team-card::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 100% 0%, rgba(255,122,0,0.10) 0%, rgba(0,0,0,0) 55%);
  z-index: 0;
}

.gk-team-card > * { position: relative; z-index: 2; }

.gk-team-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,122,0,0.30);
  box-shadow: 0 22px 60px rgba(255,122,0,0.10), 0 14px 42px rgba(0,0,0,0.40);
}

/* =====================================================================
   Spotlight-Modus: Eine Karte ist .is-target, der Grid hat .is-focusing.
   - Target-Karte: vergroessert, Foto wird sichtbar, vor allen anderen.
   - Andere Karten: opacity runter, kleiner skaliert, je nach data-push
     nach LINKS oder RECHTS weggeschoben.
   ===================================================================== */

/* Target = die fokussierte Karte: DEUTLICH groesser, dominante Spotlight-Praesenz */
.gk-team-grid.is-focusing .gk-team-card.is-target {
  transform: scale(1.45) translateY(-10px);
  z-index: 10;
  border-color: rgba(255,154,61,0.65);
  box-shadow:
    0 60px 120px rgba(0,0,0,0.65),
    0 30px 80px rgba(255,122,0,0.38),
    inset 0 0 0 1px rgba(255,154,61,0.25);
  filter: none;
}

/* Kein counter-scale mehr — Foto-Quelle ist bereits 320x320 vorab-skaliert,
   sodass auch beim 1.45x-Hover noch genug Pixeldetails da sind. */
/* Target-Karte: nur dezenter Glow ueber dem Accent-Layer, KEIN Foto-Hintergrund. */

/* Nicht-Target-Karten = KOMPLETT aus dem Viewport raus.
   Links/rechts ueber die ganze Viewport-Breite weggeschoben, opacity 0. */
.gk-team-grid.is-focusing .gk-team-card:not(.is-target) {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}
.gk-team-grid.is-focusing .gk-team-card[data-push="left"] {
  transform: scale(0.7) translateX(-130vw);
}
.gk-team-grid.is-focusing .gk-team-card[data-push="right"] {
  transform: scale(0.7) translateX(130vw);
}

/* =====================================================================
   Footer / Container-Regeln aus alter Version uebernommen
   ===================================================================== */
body > main, body > header, body > nav, body > footer { position: relative; z-index: 2; }
#team {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
#team::before, #team::after { background: transparent !important; }
#team .gk-section-head { position: relative; z-index: 3; }

/* Reduce-Motion: keine Animation */
@media (prefers-reduced-motion: reduce) {
  .gk-team-card,
  .gk-team-card::before,
  .gk-team-grid.is-focusing .gk-team-card,
  .gk-team-grid.is-focusing .gk-team-card.is-target,
  .gk-team-grid.is-focusing .gk-team-card[data-push] {
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }
  .gk-team-grid.is-focusing .gk-team-card:not(.is-target) {
    opacity: 0.55 !important;
  }
}

/* =====================================================================
   Avatare einheitlich auf Kopfhoehe — final v12:
   - Avatar 100px (groesser fuer mehr Pixel-Details)
   - Foto als <img> Element (Browser-natives Resampling = scharf)
   - Foto-Quelle = 320x320 LANCZOS-Vorab-Thumbnail (siehe _avatar.jpg)
   - Orange-Hintergrund bleibt unten sichtbar wo Foto nicht voll deckt
   - KEINE image-rendering-Filter, KEIN translateZ — Default-Rendering scharf
   ===================================================================== */
.gk-team-avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,154,61,0.85) 0%, rgba(255,122,0,1) 60%, rgba(230,108,0,1) 100%);
  background-color: #ff7a00;
  color: #1a0f04;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  box-shadow:
    0 12px 30px rgba(255,122,0,0.32),
    inset 0 0 0 2px rgba(255,255,255,0.18);
  position: relative;
  flex-shrink: 0;
  overflow: hidden;            /* Foto wird sauber durch den Kreis beschnitten */
}

/* Foto als <img>: liegt UEBER dem Orange-Kreis */
.gk-team-avatar > img.gk-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  z-index: 1;
  /* GANZ WICHTIG: kein image-rendering-Filter, kein transform-translateZ.
     Browser-Default ist die hoechste Qualitaet. */
}
.gk-team-avatar.has-photo {
  color: transparent;
  border: 2px solid rgba(255,154,61,0.55);
}
/* Wenn Foto nicht da: keine border, Initialen-Text sichtbar */
.gk-team-avatar:not(.has-photo) { color: #1a0f04; }

.gk-team-avatar--silent {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  box-shadow: 0 8px 22px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08);
}

.gk-team-role {
  color: #ff9a3d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.gk-team-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 700;
  color: #ecf2f8;
  letter-spacing: -0.005em;
}

.gk-team-card p {
  color: #9ba9b9;
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
}

.gk-team-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
  font-size: 13px;
}
.gk-team-contact a {
  color: #ff9a3d;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  word-break: break-all;
}
.gk-team-contact a:hover { text-decoration: underline; }
.gk-team-contact span,
.gk-team-contact a.gk-team-phone {
  color: #d3dbe5;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gk-team-contact a.gk-team-phone {
  color: #ffd6a3;
  text-decoration: none;
}
.gk-team-contact a.gk-team-phone:hover {
  color: #ff9a3d;
}
.gk-team-contact a.gk-team-phone::before {
  content: "☎ ";
  font-size: 11px;
  margin-right: 2px;
  opacity: 0.75;
}

.gk-team-card--quiet {
  opacity: 0.88;
}
.gk-team-card--quiet:hover { opacity: 1; }

/* ─── Mobile-Optimierung ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Auf Tablet: Spotlight-Effekt etwas sanfter — Karte ist kleinerer Scale,
     andere Karten trotzdem komplett raus. */
  .gk-team-grid.is-focusing .gk-team-card.is-target {
    transform: scale(1.25) translateY(-6px);
  }
  .gk-team-grid.is-focusing .gk-team-card[data-push="left"] {
    transform: scale(0.7) translateX(-130vw);
  }
  .gk-team-grid.is-focusing .gk-team-card[data-push="right"] {
    transform: scale(0.7) translateX(130vw);
  }
}

@media (max-width: 720px) {
  /* Mobile: Tap aktiviert Foto-Hintergrund, andere Karten nur abdimmen, nicht schieben */
  #team .gk-team-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 24px;
  }
  .gk-team-card {
    padding: 20px 18px 18px;
    border-radius: 18px;
  }
  .gk-team-avatar {
    width: 64px; height: 64px;
    font-size: 18px;
    margin-bottom: 14px;
  }
  .gk-team-card h3 {
    font-size: 19px;
    margin-bottom: 8px;
  }
  .gk-team-card p {
    font-size: 13px;
    line-height: 1.5;
  }
  .gk-team-role {
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .gk-team-contact {
    padding-top: 12px;
    font-size: 13px;
  }
  .gk-team-grid.is-focusing .gk-team-card.is-target {
    transform: none;
    border-color: rgba(255,154,61,0.55);
    box-shadow: 0 20px 50px rgba(255,122,0,0.18);
  }
  .gk-team-grid.is-focusing .gk-team-card.is-target::before {
    opacity: 0.35;
  }
  .gk-team-grid.is-focusing .gk-team-card:not(.is-target) {
    transform: none;
    opacity: 0.40;
    filter: none;
  }
}

/* Sehr schmale Geräte (≤ 380px) */
@media (max-width: 380px) {
  .gk-team-card {
    padding: 18px 14px 14px;
  }
  .gk-team-card h3 {
    font-size: 18px;
  }
  .gk-team-contact a {
    font-size: 12px;
  }
}