/* ============================================================
   /allianzen/ - am Original nachgemessen (@1440 & @390, 2026-07-24)
   ============================================================
   Umschaltpunkt exakt 1200px.

   >= 1200px: senkrechter Logo-Index (links, nach Kategorie gruppiert mit
   rechtsbuendiger Haarlinien-Beschriftung) + angeheftete weisse Detailkarte
   (767x540, radius 27, Schatten rgba(0,0,0,.23) 0 0 47px): Titel + Text links,
   Deutschlandkarte mit pulsierendem Standort-Pin rechts, "Zur Website"-Pill
   unten. Beim Scrollen blendet die Karte weich auf den Partner um, dessen Logo
   an der Karten-Mitte steht (JS).

   < 1200px: Filter-Reiter (Vertrieb/Forschung/Technologie/Kooperation) +
   zentrierte Logo-Reihe der aktiven Kategorie. Keine Beschreibung (wie Original).

   Ohne JS: alle Logos (verlinkt) und - auf Desktop - alle Detailtexte sichtbar. */

/* ---- Kopfbereich (wie /unternehmen/ & /referenzen/) ---- */
.section--allianzen-intro { padding-top: 123px; padding-bottom: 0; }
.section--allianzen-intro > .container { max-width: 810px; padding: 0; }
.section--allianzen-intro h1 { margin: 0 0 21px; }
.section--allianzen-intro .section-intro {
  margin: 0; max-width: none;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted);
}
@media (max-width: 1199px) {
  .section--allianzen-intro > .container { padding: 0 var(--container-pad); }
}
@media (max-width: 809px) {
  .section--allianzen-intro { padding-top: 76px; }
}

/* ---- Partnerbereich ---- */
.section--allianzen { padding-top: 74px; padding-bottom: var(--space-9); }

.ally {
  max-width: 1128px; margin: 0 auto; padding: 0 var(--container-pad);
}

/* Filter-Reiter: standardmaessig verborgen, nur < 1200px sichtbar. */
.ally__filters { display: none; }

/* ============================================================
   DESKTOP (>= 1200px): Index + angeheftete Karte
   ============================================================ */
@media (min-width: 1200px) {
  /* Unterkante am Original nachgemessen (fo-zone.mjs 2026-07-28): nach dem
     letzten Logo folgt ein leeres 135px-Element und 123px Luft bis zur
     Pfadleiste = 258px. Bei uns: 61,5px Logo-Marge + 196,5px Polster.
     Mit den frueheren 96px sass die Fusszeile 80px zu hoch (dh -80). */
  .section--allianzen { padding-bottom: 196.5px; }

  .ally {
    display: grid;
    grid-template-columns: 265px minmax(0, 767px);
    column-gap: 96px;
    align-items: start;
    padding: 0;
  }

  /* ---- Logo-Index ---- */
  .ally__index { display: flex; flex-direction: column; align-items: center; }

  /* Vertikalrhythmus am Original nachgemessen (Vergleichslauf 2026-07-24,
     az-measure5.mjs @1440): konstant 123px Luft zwischen den Logos
     (Logo-Schritt 165/174 je nach Logohoehe 42/51), Kategorienwechsel =
     Logo-Unterkante -> 96px -> Label -> 51px -> naechstes Logo. Daraus:
     Logo-Margin 61.5px beidseitig (61.5+61.5=123), Label 34.5px oben
     (61.5+34.5=96) und -10.5px unten (61.5-10.5=51). */
  .ally__cat {
    display: flex; align-items: center; gap: 16px;
    width: 100%; margin: 34.5px 0 -10.5px;
    font-size: var(--fs-micro); line-height: var(--lh-micro);
    font-weight: var(--fw-regular); color: var(--color-text-faint);
    text-align: right; white-space: nowrap;
  }
  .ally__cat:first-child { margin-top: 0; }
  .ally__cat-rule { flex: 1; height: 1px; background: var(--color-border); }

  .ally__logo {
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin: 61.5px 0; text-decoration: none;
  }
  /* Index-Logos sind entsaettigt (wie im Original); NUR das aktive erscheint
     in voller Markenfarbe. Hover-Sweep 2026-07: das Original gibt den Logos
     beim Hover KEINE Rueckmeldung (getComputedStyle nach 1,5s Hover
     unveraendert, Wechsel nur per Klick) - Hover-Kolorierung und Anhebung
     waren erfunden und sind entfernt. Fokus koloriert weiter (Tastatur-Spur). */
  /* KEIN height:auto - das ueberschrieb die lw/lh-Attribute und liess die
     Logos im Naturseitenverhaeltnis auf 43/52px wachsen; das Original setzt
     FESTE 42/51px (leicht gestaucht). Der 1px-Fehler summierte sich pro
     Sektion auf +4..+6px Kettenversatz (Lauf 5, 2026-07-28). */
  .ally__logo img {
    display: block; width: var(--lw); height: var(--lh); max-width: 100%; opacity: .55;
    filter: grayscale(1);
    transition: opacity var(--duration-hover) var(--ease-smooth),
                filter var(--duration-hover) var(--ease-smooth);
  }
  .ally__logo:focus-visible img { opacity: .9; filter: grayscale(0); }
  .ally__logo.is-active img { opacity: 1; filter: grayscale(0); }
  .ally__logo:focus-visible {
    outline: 2px solid var(--color-brand-blue-text); outline-offset: 4px;
    border-radius: var(--radius-md);
  }

  /* ---- Angeheftete Detailkarte ---- */
  .ally__stage { position: sticky; top: 147px; align-self: start; }

  .ally-card {
    background: var(--color-bg); border-radius: 27px;
    box-shadow: 0 0 47px 0 rgba(0, 0, 0, 0.23);
    padding: 39px; display: flex; flex-direction: column; gap: 24px;
  }
  .ally-card__top { display: flex; gap: 69px; align-items: flex-start; }

  .ally-card__text { width: 347px; flex: none; position: relative; }
  .ally-panel__title {
    margin: 0 0 20px;
    font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-bold);
    text-align: center; color: var(--color-text);
  }
  .ally-panel__desc {
    margin: 0; font-size: var(--fs-body); line-height: var(--lh-body);
    text-align: left; color: var(--color-text-muted);
  }

  /* Deutschlandkarte + Standort-Pin */
  .ally-card__map { width: 273px; height: 362px; flex: none; position: relative; }
  .ally-card__map-img {
    display: block; width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.23));
  }
  .ally-card__pin {
    position: absolute; left: 18%; top: 52%;
    width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border-radius: 50%; background: var(--color-brand-pink);
    box-shadow: 0 0 0 4px rgba(226, 0, 116, 0.25);
    transition: left var(--reveal-duration) var(--ease-smooth),
                top var(--reveal-duration) var(--ease-smooth);
  }
  .ally-card__pin::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    background: var(--color-brand-pink); opacity: .5;
    animation: allyPulse 2.4s ease-out infinite;
  }
  @keyframes allyPulse {
    0%   { transform: scale(1);   opacity: .5; }
    70%  { transform: scale(3.2); opacity: 0; }
    100% { transform: scale(3.2); opacity: 0; }
  }

  /* "Zur Website"-Pill */
  .ally-card__foot { display: flex; }

  /* Cross-fade der Detailtexte (nur mit JS). */
  .ally.is-enhanced .ally-panel {
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    transition: opacity var(--reveal-duration) var(--ease-smooth);
  }
  .ally.is-enhanced .ally-panel.is-active { opacity: 1; pointer-events: auto; }
}

/* CTA-Pill: geteilt (Optik identisch auf allen Breiten) */
.ally-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 16px; border: 1px solid #cfcfcf; border-radius: var(--radius-md);
  background: var(--color-bg); text-decoration: none;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted);
  transition: box-shadow var(--duration-hover) var(--ease-smooth),
              color var(--duration-hover) var(--ease-smooth);
}
/* Hover-Sweep 2026-07 (Original gemessen): "Zur Website" = Standard-Pill-Hover
   (Glow 0 0 47px .23 + Text #818181->#333 + Pfeil-Swap), keine Anhebung. */
.ally-card__cta:hover { box-shadow: 0 0 47px rgba(0, 0, 0, .23); color: var(--color-text); }
.ally-card__cta:focus-visible { outline: 2px solid var(--color-brand-blue-text); outline-offset: 3px; }
.ally-card__arrow { display: inline-block; }
@keyframes hov-arrow-swap {
  0%   { transform: translateX(0);     opacity: 1; }
  45%  { transform: translateX(18px);  opacity: 0; }
  55%  { transform: translateX(-18px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}
.ally-card__cta:hover .ally-card__arrow {
  animation: hov-arrow-swap calc(var(--duration-hover) * 2.5) var(--ease-smooth);
}

/* ============================================================
   TABLET / MOBIL (< 1200px): Filter-Reiter + Logo-Reihe
   ============================================================ */
@media (max-width: 1199px) {
  .ally { padding: 0 var(--container-pad); }

  .ally__stage { display: none; }

  .ally__filters {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 16px 27px; margin-bottom: 40px;
  }
  .ally__chip {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding: 12px 16px; border-radius: var(--radius-md);
    background: var(--color-bg); border: 1px solid #cfcfcf;
    font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-body);
    color: var(--color-text-muted);
    transition: box-shadow var(--duration-hover) var(--ease-smooth),
                color var(--duration-hover) var(--ease-smooth),
                border-color var(--duration-hover) var(--ease-smooth);
  }
  .ally__chip:hover { color: var(--color-text); }
  .ally__chip.is-active {
    border-color: transparent; color: var(--color-text);
    box-shadow: 0 0 47px 0 rgba(0, 0, 0, 0.23);
  }
  .ally__chip:focus-visible { outline: 2px solid var(--color-brand-blue-text); outline-offset: 2px; }

  .ally__cat { display: none; }
  .ally__cat-rule { display: none; }

  .ally__index {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 24px 39px;
  }
  .ally__logo {
    display: flex; align-items: center; justify-content: center;
    padding: 8px; text-decoration: none;
  }
  .ally__logo img { display: block; width: auto; max-height: 36px; max-width: 130px; height: auto; }
  /* Hover-Sweep 2026-07: keine Logo-Anhebung - das Original ist statisch. */
  .ally__logo:focus-visible {
    outline: 2px solid var(--color-brand-blue-text); outline-offset: 4px;
    border-radius: var(--radius-md);
  }

  /* Nur die Logos der aktiven Kategorie zeigen (JS setzt data-cat). */
  .ally[data-cat="0"] .ally__logo:not([data-cat="0"]),
  .ally[data-cat="1"] .ally__logo:not([data-cat="1"]),
  .ally[data-cat="2"] .ally__logo:not([data-cat="2"]),
  .ally[data-cat="3"] .ally__logo:not([data-cat="3"]) { display: none; }
}

/* ============================================================
   MOBIL (<= 809px): am Original nachgemessen @390 (Lauf 5, 2026-07-28,
   fo-zone.mjs + DOM-Walk framer-f7acmr):
   - Seitenpolster hier 23px (nicht 39): Intro 344px breit (4 Zeilen),
     Chips und Logos beginnen bei x=23
   - Chips in EINER Reihe ohne Umbruch (84/100/116/117 x47, 27px Luecken),
     laeuft rechts aus dem Bild (Kooperation ab x=404)
   - Logos der aktiven Kategorie in EINER Reihe in DESKTOP-Groesse
     (Telekom 115x42, EDAG 170x42, REHAU 159x51, Swisscom 187x51),
     39px Luecken, ebenfalls ueberlaufend
   - Kette: Intro -51- Sektion -51- Chips(47) -39-51- Logozeile(51)
     -39-96- Pfadleiste  => Sektion pt 102 / Chips-mb 90 / pb 135 */
@media (max-width: 809px) {
  .section--allianzen-intro > .container { padding: 0 23px; }
  .section--allianzen { padding-top: 102px; padding-bottom: 135px; }
  .ally { padding: 0 23px; }
  .ally__filters {
    flex-wrap: nowrap; justify-content: flex-start; gap: 27px;
    margin-bottom: 90px; overflow-x: auto;
  }
  .ally__chip { padding: 11px; flex: 0 0 auto; white-space: nowrap; }
  .ally__index {
    flex-wrap: nowrap; justify-content: flex-start; align-items: center;
    gap: 39px; overflow-x: auto;
  }
  .ally__logo { padding: 0; flex: 0 0 auto; }
  /* Feste Original-Masse aus allianzen.json (via --lw/--lh am img). */
  .ally__logo img { width: var(--lw); height: var(--lh); max-width: none; max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ally__logo, .ally__logo img, .ally-card__cta, .ally-card__arrow,
  .ally-card__pin, .ally.is-enhanced .ally-panel, .ally__chip {
    transition: none !important;
  }
  .ally-card__cta:hover .ally-card__arrow { animation: none; }
  .ally-card__pin::before { animation: none; }
}

/* Lauf 7b (2026-07-30): @320 haelt das Original die H1 einzeilig
   (white-space: pre im Titel-Wrapper, Zeile 38,4) - bei uns brach
   "Unsere Allianzen" zweizeilig um (+38,4px docH). */
@media (max-width: 359px) {
  .section--allianzen-intro h1 { white-space: nowrap; }
}