/* ============================================================
   LOCATIONS — Standort-Landingpage-Vorlage (standort-<stadt>.html)
   ------------------------------------------------------------
   Eigene Datei, weil dieses Template unabhängig von den anderen
   Unterseiten geklont wird (siehe standort-hamburg.html). Nur
   neue Klassen — Wiederverwendetes (.page-hero, .locations__map,
   .card, .job-card, .form/.field, .modal, .meta-line …) kommt
   unverändert aus sections.css/karriere.css/components.css/base.css.

   1. standort-hero ..... Splitscreen im .page-hero (Text + Karte)
   2. standort-about .... «Über den Standort» + minimalistische Statistik
   3. standort-jobs ..... Hover-Lift für .job-card auf dieser Seite
   4. team-card-single .. Ansprechpartner-Karte
   5. standort-contact .. Split 50/50: Ansprechpartner + Formular
   6. standort-links .... Verlinkung zu den anderen Standort-Seiten
   ============================================================ */

/* ============================================================
   1. STANDORT-HERO — Splitscreen (Text links, Karte rechts)
   ------------------------------------------------------------
   .page-hero ist immer dunkel (#111, unabhängig vom Theme) —
   deshalb hier bewusst rgba(255,255,255,…) statt --border/--surface,
   genau wie schon bei .page-hero .btn--ghost in karriere.css.
   Die Karte selbst (.locations__map/.map-bar/.map-canvas/.map-pin/
   #map) ist 1:1 aus sections.css übernommen — hier nur die Maße
   für den Splitscreen-Slot.
   ============================================================ */
.standort-hero__grid {
  display: grid;
  gap: 32px;
  padding-block: 44px 52px;
}

/* --- Handy/Tablet: Karte ist der Hintergrund der Sektion ---
   Dasselbe Muster wie .page-hero--split (siehe karriere.css): unter
   1024px verliert die Karte ihren eigenen Platz in der Zeile und
   liegt stattdessen als Vollflächen-Hintergrund hinter dem Text, mit
   dunklerem Scrim für Lesbarkeit. So bleibt der erste Screen kompakt,
   statt Text + separatem Kartenblock untereinander zu stapeln. */
@media (max-width: 1023px) {
  /* Nur eine Untergrenze — die tatsächliche Höhe kommt vom Inhalt
     (Titel/Lead/Buttons, ~400-460px je nach Zeilenumbruch). Ein hoher
     fixer Wert (früher 560px) erzwang dagegen immer diese Höhe, auch
     wenn der Text viel kürzer war — der Rest der Sektion zeigte dann
     nur noch Karte ohne Inhalt, was wie eine leere Lücke vor der
     nächsten Sektion wirkte. */
  .standort-hero { min-height: 350px; }

  .standort-hero__map {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    pointer-events: none;
  }

  .standort-hero__map .map-bar,
  .standort-hero__map .leaflet-control-container {
    display: none;
  }

  .standort-hero__map .map-canvas::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(to bottom,
        rgba(17, 17, 17, 0.92) 0%,
        rgba(17, 17, 17, 0.74) 46%,
        rgba(17, 17, 17, 0.88) 100%),
      radial-gradient(120% 70% at 88% 0%,
        rgba(227, 6, 19, 0.34) 0%, rgba(227, 6, 19, 0) 66%);
  }
}

@media (min-width: 1024px) {
  .standort-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    /* Text (kurz: Titel/Lead/Buttons) neben der Karte (fix 460px hoch)
       vertikal mittig ausrichten statt an der oberen Kante. */
    align-items: center;
    gap: 48px;
    padding-block: 64px 72px;
  }
}

.standort-hero__content {
  position: relative;
  z-index: 1;
}

.standort-hero__map {
  /* .locations__map bringt „grid-area: map“ aus sections.css mit (für
     das Areas-Grid der Standortliste). Dieses Grid hier hat aber keine
     grid-template-areas — der Browser versucht die unbekannte Area
     trotzdem aufzulösen und erzeugt dafür zusätzliche implizite Spalten/
     Zeilen, wodurch die Karte weit nach unten/rechts aus der Zeile
     rutscht. Zurücksetzen platziert sie wieder normal im 2-Spalten-Grid. */
  grid-area: auto;
}

/* aspect-ratio/border/box-shadow gehören ausschließlich in den
   Splitscreen ab 1024px — unconditional gesetzt, überschrieben sie
   (gleiche Spezifität, aber später im Quelltext) das aspect-ratio:auto/
   border:0/box-shadow:none aus dem Mobile-Vollflächen-Hintergrund oben
   und rissen die Karte auf eine feste 4:3-Breite, die dann vom
   overflow:hidden der Sektion abgeschnitten wurde. */
@media (min-width: 1024px) {
  .standort-hero__map {
    /* Feste Höhe statt height: 100% — ohne align-items: stretch (siehe
       oben, jetzt "start") hat die Karte keine Zeilenhöhe, an der sich
       ein Prozentwert orientieren könnte, und würde auf ihren Inhalt
       (praktisch 0) zusammenfallen. */
    aspect-ratio: auto;
    height: 460px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: var(--shadow-float);
  }
}

/* ============================================================
   2. STANDORT-ABOUT — «Über den Standort»
   ------------------------------------------------------------
   Bewusst ohne Karten-Optik (kein .card, kein Rahmen): eine Zeile
   großer Zahlen mit Bildunterschrift, wie schon .hero__stats auf
   der Startseite — hier nur als eigene Klasse, weil vier statt drei
   Werte und eine andere Spaltenzahl auf Mobile gebraucht werden.
   ============================================================ */
.standort-about {
  max-width: 760px;
}

.standort-about__title {
  margin-top: 14px;
  font-size: clamp(1.75rem, 3.2vw, 2.375rem);
}

.standort-about__lead {
  margin-top: 18px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

.standort-stats {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--border-strong);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

@media (min-width: 640px) {
  .standort-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.standort-stat__value {
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.standort-stat__label {
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* ============================================================
   3. STANDORT-JOBS — .job-card ist global (karriere.css); hier nur
      der Hover-Lift, den die dort bereits deklarierte transition
      (transform) noch nicht ausgelöst hat.
   ============================================================ */
.job-card:hover {
  transform: translateY(-4px);
}

/* ============================================================
   4. TEAM-CARD-SINGLE — Ansprechpartner
   ------------------------------------------------------------
   Immer vertikal: großes quadratisches Foto oben, Name/Rolle/Kontakt
   darunter — unabhängig von der Breite, damit die Karte in der sticky
   linken Spalte von .standort-contact (siehe §5) schmal bleiben kann.
   ============================================================ */
.team-card-single {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
}

.team-card-single__avatar {
  flex-shrink: 0;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  overflow: hidden;
}

/* Aktuell ein SVG-Platzhalter statt eines echten Fotos — sobald ein Foto
   vorliegt, hier ein <img class="team-card-single__avatar-img"> mit
   width:100%; height:100%; object-fit:cover einsetzen. */
.team-card-single__avatar svg {
  width: 34%;
  height: 34%;
}

.team-card-single__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-single__name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.team-card-single__role {
  margin-top: 3px;
  font-size: 14px;
  color: var(--muted);
}

.team-card-single__contact {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.team-card-single__contact a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease);
}

.team-card-single__contact a:hover { color: var(--accent); }

.team-card-single__contact svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

/* ============================================================
   5. STANDORT-CONTACT — Ansprechpartner + Formular, Split 50/50
   ============================================================ */
.standort-contact {
  display: grid;
  gap: 40px;
}

@media (min-width: 1024px) {
  .standort-contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
}

.standort-contact__person {
  align-self: start;
}

@media (min-width: 1024px) {
  .standort-contact__person {
    position: sticky;
    top: 100px;
  }
}

/* Kein .form__note nötig (anders als kontakt.html) — der Button
   darf hier die ganze Breite einnehmen. */
.standort-contact__form .form__foot .btn {
  width: 100%;
}

/* ============================================================
   6. STANDORT-LINKS — Verlinkung zu den anderen Standort-Seiten
   ============================================================ */
.standort-links__inner {
  text-align: center;
}

.standort-links__list {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 16px;
  font-size: 1.0625rem;
}

.standort-links__list a {
  font-weight: 700;
  transition: color var(--dur-fast) var(--ease);
}

.standort-links__list a:hover { color: var(--accent); }

.standort-links__list span[aria-hidden] {
  color: var(--faint);
}