/* ==========================================================================
   corelay - Sektion 5.2: Partnerband (Startseite)
   --------------------------------------------------------------------------
   Flaches Band auf --paper-100 direkt unter dem Hero: links das Label
   „WIR ARBEITEN MIT“, rechts sechs Wortmarken, gleichmaessig verteilt.

   Setzt auf css/tokens.css, css/base.css und css/layout.css auf. Alle
   Selektoren stehen unter dem Praefix .partner, damit nichts kollidiert.

   Ab 900px klappt das Band um: Das Label sitzt dann ueber einer waagerecht
   scrollbaren Logo-Zeile mit ausgeblendeter Bildlaufleiste, die bis an die
   Bildschirmkanten laeuft.

   Inhalt
     1. Sektionsgeruest
     2. Zeile aus Label und Wortmarken
     3. Label
     4. Logo-Reihe
     5. Einfaerbung der Wortmarken
     6. Staffelung des Einblendens
     7. Breakpoint 1200px
     8. Breakpoint 1024px
     9. Breakpoint 900px - Label ueber der scrollbaren Zeile
    10. Breakpoint 700px
    11. Breakpoint 640px - Seitenpadding wechselt auf 20px
    12. Breakpoint 560px
    13. Breakpoint 380px
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest
   --------------------------------------------------------------------------
   Die Spezifikation nennt fuer das Band eine Gesamthoehe von rund 92px.
   Selbst der reduzierte Abstand aus .section--tight waere dafuer zu gross,
   deshalb ersetzt .partner das vertikale Polster durch einen eigenen,
   deutlich flacheren Wert - genau wie es der Hero mit .section macht.
   33px + 26px Inhalt + 33px ergeben die geforderten ca. 92px.
   -------------------------------------------------------------------------- */

.partner {
  display: flex;
  align-items: center;
  min-height: 92px;
  padding-block: clamp(24px, 2.6vw, 33px);
}


/* --------------------------------------------------------------------------
   2. Zeile aus Label und Wortmarken
   -------------------------------------------------------------------------- */

.partner-inner {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3.2vw, 44px);
}


/* --------------------------------------------------------------------------
   3. Label „WIR ARBEITEN MIT“
   --------------------------------------------------------------------------
   Traegt die Klasse .eyebrow (12px/700, Tracking 0.16em, Versalien) und ist
   im Markup eine <h2> - die Farbe kommt hier, weil .section-head das Eyebrow
   sonst blau faerben wuerde und dieses Band keinen Sektionskopf hat.
   -------------------------------------------------------------------------- */

.partner-label {
  flex: none;
  margin: 0;
  color: var(--t-on-light-mute);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   4. Logo-Reihe
   --------------------------------------------------------------------------
   --partner-bleed haelt fest, um wie viel die Zeile im mobilen Zustand nach
   links und rechts ueber das Seitenpadding von .wrap hinauslaufen darf. Der
   Wert wird bei 640px mitgezogen, weil .wrap dort von 24px auf 20px wechselt.
   -------------------------------------------------------------------------- */

.partner-logos {
  --partner-bleed: var(--wrap-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-item {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}


/* --------------------------------------------------------------------------
   5. Einfaerbung der Wortmarken
   --------------------------------------------------------------------------
   Die Dateien img/logo-*.svg zeichnen mit fill="currentColor". Als <img>
   eingebunden erben sie keine Farbe von der Seite und kaemen schwarz an.
   Die Filterkette rechnet Schwarz exakt in das geforderte Grau-Blau um:

     brightness(0)       zieht jeden Ausgangston auf Schwarz - die Kette
                         bleibt damit unabhaengig von der Standardfarbe des
                         Browsers (z. B. bei erzwungenem Dunkelmodus)
     invert(.5)          Schwarz wird zu neutralem Grau   rgb(128,128,128)
     sepia(1)            faerbt das Grau warm ein         rgb(173,154,120)
     hue-rotate(180deg)  dreht den Warmton auf Blau       rgb(138,157,191)
     saturate(.8)        nimmt die Buntheit zurueck       rgb(142,157,184)
     brightness(.93)     Endwert                          rgb(132,146,171)

   Das entspricht --t-on-light-mute (#8494AB). Der Alphakanal bleibt dabei
   unangetastet, die Konturen bleiben also gestochen scharf. Grundzustand
   0.75 Deckkraft, im Hover volle Deckkraft (Spezifikation 5.2).
   -------------------------------------------------------------------------- */

.partner-logo {
  display: block;
  width: auto;
  height: 24px;
  max-width: none;
  flex: none;
  opacity: .75;
  filter:
    brightness(0)
    invert(.5)
    sepia(1)
    hue-rotate(180deg)
    saturate(.8)
    brightness(.93);
  transition: opacity var(--dur) var(--ease);
}

@media (hover: hover) {

  .partner-item:hover .partner-logo {
    opacity: 1;
  }
}


/* --------------------------------------------------------------------------
   6. Staffelung des Einblendens
   --------------------------------------------------------------------------
   .reveal und .is-visible kommen aus css/base.css, js/main.js setzt den
   Zustand. Hier wird nur die Reihenfolge festgelegt.
   -------------------------------------------------------------------------- */

.partner-label.reveal {
  --reveal-delay: 0ms;
}

.partner-logos.reveal {
  --reveal-delay: 90ms;
}


/* --------------------------------------------------------------------------
   7. Breakpoint 1200px - Abstaende ruecken zusammen
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {

  .partner-inner {
    gap: clamp(20px, 2.8vw, 34px);
  }

  .partner-logos {
    gap: clamp(18px, 2.8vw, 34px);
  }
}


/* --------------------------------------------------------------------------
   8. Breakpoint 1024px - Wortmarken leicht kleiner
   -------------------------------------------------------------------------- */

@media (max-width: 1023.98px) {

  .partner-logos {
    gap: 26px;
  }

  .partner-logo {
    height: 23px;
  }
}


/* --------------------------------------------------------------------------
   9. Breakpoint 900px - Label ueber der scrollbaren Zeile
   --------------------------------------------------------------------------
   Ab hier stehen Label und Logos untereinander. Die Logo-Zeile scrollt
   waagerecht, laeuft ueber die negativen Aussenabstaende bis an die
   Bildschirmkanten und blendet ihre Bildlaufleiste aus. Das seitliche
   Innenpolster haelt die erste und letzte Wortmarke auf Hoehe des
   uebrigen Seiteninhalts.
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {

  .partner {
    min-height: 0;
    padding-block: clamp(26px, 4vw, 34px);
  }

  .partner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .partner-logos {
    align-self: stretch;
    justify-content: flex-start;
    gap: 34px;
    margin-inline: calc(var(--partner-bleed) * -1);
    padding-inline: var(--partner-bleed);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* Bildlaufleiste ausblenden - Firefox und alte Edge */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* Bildlaufleiste ausblenden - WebKit und Blink */
  .partner-logos::-webkit-scrollbar {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   10. Breakpoint 700px
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {

  .partner-inner {
    gap: 16px;
  }

  .partner-logos {
    gap: 30px;
  }

  .partner-logo {
    height: 22px;
  }
}


/* --------------------------------------------------------------------------
   11. Breakpoint 640px - Seitenpadding von .wrap wechselt auf 20px
   -------------------------------------------------------------------------- */

@media (max-width: 639.98px) {

  .partner-logos {
    --partner-bleed: var(--wrap-pad-sm);
  }
}


/* --------------------------------------------------------------------------
   12. Breakpoint 560px
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  .partner {
    padding-block: 28px;
  }

  .partner-inner {
    gap: 15px;
  }

  .partner-logos {
    gap: 28px;
  }

  .partner-logo {
    height: 21px;
  }
}


/* --------------------------------------------------------------------------
   13. Breakpoint 380px
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .partner {
    padding-block: 24px;
  }

  .partner-inner {
    gap: 14px;
  }

  .partner-logos {
    gap: 24px;
  }

  .partner-logo {
    height: 20px;
  }

  .partner-label {
    font-size: 11.5px;
    letter-spacing: .14em;
  }
}


/* --------------------------------------------------------------------------
   Markenhinweis unter dem Band
   --------------------------------------------------------------------------
   Rechtlich noetig, optisch nachrangig: kleiner, ruhiger Grauton, mittig
   unter den Wortmarken und in der Breite begrenzt, damit die Zeile nicht
   quer ueber die ganze Flaeche laeuft.
   -------------------------------------------------------------------------- */

.partner-hinweis {
  max-width: 62ch;
  margin: var(--sp-6) auto 0;
  color: var(--t-on-light-soft);
  text-align: center;
}