/**
 * agenic Komponenten-CSS – Logo-Band (Molekül).
 * Kontrakt v2 (10.29.0, 25.09.2026): Projekt-Doc `claude/kontrakt-ag-logo-band-v2-25-09.md`.
 * Quellen: Figma `logo-band` (1529:26954) — 6 Plätze über Contentbreite,
 * `space-between`, Platz 56 hoch, Labels Copy/L in Text/grey(-inverse) ·
 * Figma 0.7 `shelf/ambient-loops` (1248:239) — Laufband: translateX,
 * Inhalt verdoppelt, Motion/loop-marquee linear, Stopp bei Hover UND Fokus
 * (Entscheidung Vincent 01.08.2026, WCAG 2.2.2), Reduced Motion: steht.
 *
 * Aufbau: .ag-logo-band > __rahmen > __spur > __satz (ul) > __item (li)
 *         > [__link (a)] > __logo (img) | __label (span)
 */

.ag-logo-band, .ag-logo-band * { box-sizing: border-box; }

.ag-logo-band {
    --ag-logo-band-fg: var(--color-text-grey);           /* Figma Text/grey */
    --ag-logo-band-space-before: 0px;
    --ag-logo-band-space-after: 0px;

    /* Logo-Box — Quelle `logo-band`: Platz 56 hoch (gemessen 11.08. + 25.09.2026).
       Stufen S/M/XL folgen der Figma-Spacing-Leiter (32 · 40 · 64). */
    --ag-logo-band-hoehe: 56px;

    /* Größenausgleich: h = Box · √(Bezug ÷ Seitenverhältnis), begrenzt auf
       Min … 1. Breite Logos werden flacher, kompakte behalten die volle Höhe.
       Beide Werte sind keine Tokens — Annahme, Finding im Kontrakt v2 §5. */
    --ag-logo-band-bezug: 2.5;                            /* tmp */
    --ag-logo-band-min: 0.5;                              /* tmp */

    /* Farbe „ruhig": Deckkraft im Ruhezustand. Kein Token vorhanden. */
    --ag-logo-band-ruhig-deckkraft: 0.6;                  /* tmp */

    /* Laufband */
    --ag-logo-band-luecke: var(--spacing-xxl);            /* 64 — Abstand zwischen Logos */
    --ag-logo-band-kante: var(--spacing-xxl);             /* 64 — weiche Ausblendung am Rand */
    --ag-logo-band-dauer: var(--motion-duration-loop-marquee); /* Figma Motion/loop-marquee 30 s; JS rechnet je Spurbreite um */

    display: block;
    margin-block-start: var(--ag-logo-band-space-before);
    margin-block-end: var(--ag-logo-band-space-after);
    color: var(--ag-logo-band-fg);
    font-family: var(--font-sans);
}

.ag-logo-band--dark { --ag-logo-band-fg: var(--color-text-grey-inverse); }

.ag-logo-band--gr-s  { --ag-logo-band-hoehe: var(--spacing-l); }    /* 32 */
.ag-logo-band--gr-m  { --ag-logo-band-hoehe: var(--spacing-xl); }   /* 40 */
.ag-logo-band--gr-l  { --ag-logo-band-hoehe: 56px; }                /* Figma logo-band, gemessen — kein Leiterwert */
.ag-logo-band--gr-xl { --ag-logo-band-hoehe: var(--spacing-xxl); }  /* 64 */

/* ── Liste zurücksetzen (Theme/Kit stylen ul/li global) ─────────────── */
.ag-logo-band .ag-logo-band__satz {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ag-logo-band .ag-logo-band__item {
    --ag-logo-ratio: var(--ag-logo-band-bezug);
    --ag-logo-skala: 1;
    --ag-logo-h: var(--ag-logo-band-hoehe);

    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--ag-logo-band-hoehe);
    margin: 0;
    padding: 0;
}
.ag-logo-band .ag-logo-band__item::before,
.ag-logo-band .ag-logo-band__item::marker { content: none; }

/* Ausgleich nur, wo der Browser sqrt() kennt — sonst bleibt die volle
   Boxhöhe. Ohne @supports würde ein unbekanntes sqrt() die Höhe auf `auto`
   fallen lassen, und das Bild stünde in Originalgröße da. */
@supports (width: calc(sqrt(4) * 1px)) {
    .ag-logo-band .ag-logo-band__item {
        --ag-logo-h: calc(var(--ag-logo-band-hoehe) * var(--ag-logo-skala) * clamp(var(--ag-logo-band-min), sqrt(var(--ag-logo-band-bezug) / var(--ag-logo-ratio)), 1));
    }
}

/* ── Bild ─────────────────────────────────────────────────────────────
   Imagify packt das <img> in ein <picture> und verschiebt die Klasse dorthin
   (gemessen 25.09.2026, CRM-Seite 1711: <img> ohne Klasse, 662 × 326).
   Darum greift die Regel am <img> in der Box, nicht an der Klasse, und das
   <picture> tritt aus dem Layout zurück. (0,2,1) schlägt `.elementor img`. */
.ag-logo-band .ag-logo-band__item picture { display: contents; }
.ag-logo-band .ag-logo-band__item img {
    display: block;
    width: auto;
    height: var(--ag-logo-h);
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    object-fit: contain;
    object-position: left center;
}

/* ── Text-Platzhalter (Quelle: Copy/L) ──────────────────────────────── */
.ag-logo-band .ag-logo-band__label {
    font-size: var(--fs-600);                            /* Copy/L 24/32 Light */
    line-height: calc(32 / 24);
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;
}
.ag-logo-band--laufband .ag-logo-band__label { white-space: nowrap; }

/* ── Link (Doppelklasse gegen Kit-Linkregeln (0,1,1)) ───────────────── */
.ag-logo-band .ag-logo-band__link,
.ag-logo-band .ag-logo-band__link:hover,
.ag-logo-band .ag-logo-band__link:focus,
.ag-logo-band .ag-logo-band__link:visited {
    display: flex;
    align-items: center;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.ag-logo-band .ag-logo-band__link:focus-visible {
    outline: var(--border-width-s) solid currentColor;   /* Fokus per outline (0.7-Muster), nie box-shadow */
    outline-offset: var(--spacing-xs);
}

/* ── Farbe ─────────────────────────────────────────────────────────────
   Nur filter/opacity bewegen sich (0.7: keine Layout-Eigenschaften). */
.ag-logo-band--farbe-ruhig .ag-logo-band__item img,
.ag-logo-band--farbe-ruhig .ag-logo-band__label,
.ag-logo-band--farbe-weiss .ag-logo-band__item img {
    transition: filter var(--motion-hover) var(--motion-ease-standard),
                opacity var(--motion-hover) var(--motion-ease-standard);
}
.ag-logo-band--farbe-ruhig .ag-logo-band__item img {
    filter: grayscale(1);
    opacity: var(--ag-logo-band-ruhig-deckkraft);
}
.ag-logo-band--farbe-ruhig .ag-logo-band__label { opacity: var(--ag-logo-band-ruhig-deckkraft); }
.ag-logo-band--farbe-ruhig .ag-logo-band__item:hover img,
.ag-logo-band--farbe-ruhig .ag-logo-band__item:focus-within img,
.ag-logo-band--farbe-ruhig .ag-logo-band__item:hover .ag-logo-band__label,
.ag-logo-band--farbe-ruhig .ag-logo-band__item:focus-within .ag-logo-band__label {
    filter: none;
    opacity: 1;
}
/* Weiß: Filter wie ag_logo_stats_testimonial (`--logos-weiss`); steht gedämpft
   wie „ruhig" und wird beim Drüberfahren voll — gleiche Mechanik, eine Regel. */
.ag-logo-band--farbe-weiss .ag-logo-band__item img {
    filter: brightness(0) invert(1);
    opacity: var(--ag-logo-band-ruhig-deckkraft);
}
.ag-logo-band--farbe-weiss .ag-logo-band__item:hover img,
.ag-logo-band--farbe-weiss .ag-logo-band__item:focus-within img { opacity: 1; }

/* ── Darstellung: Reihe (Default, Quelle `logo-band`) ─────────────────── */
.ag-logo-band--reihe .ag-logo-band__satz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-ml) var(--spacing-xl);
}
.ag-logo-band--reihe .ag-logo-band__item { flex: 0 1 auto; }

/* Mobil: zwei gleich breite Spalten statt Flatterzeilen, linksbündig
   (CD-Regel 21.09.2026: kein zentrierter Inhalt). --bp-md 768 ist TMP (A5). */
@media (max-width: 767px) {
    .ag-logo-band--reihe .ag-logo-band__satz {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-items: start;
        gap: var(--spacing-ml) var(--spacing-l);
    }
}

/* ── Darstellung: Laufband (0.7 `ambient-loops`) ──────────────────────── */
.ag-logo-band--laufband .ag-logo-band__rahmen {
    overflow: hidden;
    /* Maske wirkt nur über die Deckkraft — `black` ist hier keine Farbe. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--ag-logo-band-kante), black calc(100% - var(--ag-logo-band-kante)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black var(--ag-logo-band-kante), black calc(100% - var(--ag-logo-band-kante)), transparent 100%);
}
.ag-logo-band--laufband .ag-logo-band__spur {
    display: flex;
    width: max-content;
    animation: ag-logo-band-lauf var(--ag-logo-band-dauer) var(--motion-ease-linear, linear) infinite;
}
.ag-logo-band--laufband .ag-logo-band__satz {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ag-logo-band-luecke);
    /* Lücke auch hinter dem letzten Logo — sonst stößt die Kopie an. */
    padding-inline-end: var(--ag-logo-band-luecke);
}
.ag-logo-band--laufband .ag-logo-band__item { flex: none; }

/* Mobil: engere Lücke und schmalere Randausblendung — bei 64/64 blieb auf
   390 px Breite gut ein Logo sichtbar (gemessen 25.09.2026, Render-Abgleich). */
@media (max-width: 767px) {
    .ag-logo-band--laufband {
        --ag-logo-band-luecke: var(--spacing-l);          /* 32 */
        --ag-logo-band-kante: var(--spacing-ml);          /* 24 */
    }
}
.ag-logo-band--laufband .ag-logo-band__item img { max-width: none; }

/* Weg: ohne JS −50 % (genau ein Satz von zweien), mit JS die gemessene
   Satzbreite in px — dann stimmt es auch bei drei und mehr Kopien. */
@keyframes ag-logo-band-lauf {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--ag-logo-band-weg, -50%)); }
}

/* WCAG 2.2.2 — Entscheidung 01.08.2026: Stopp bei Hover und Fokus.
   `is-pausiert` setzt logo-band.js außerhalb des Viewports. */
.ag-logo-band--laufband:hover .ag-logo-band__spur,
.ag-logo-band--laufband:focus-within .ag-logo-band__spur,
.ag-logo-band--laufband.is-pausiert .ag-logo-band__spur {
    animation-play-state: paused;
}

/* Reduced Motion: nichts bewegt sich. Kopien verschwinden, die Reihe lässt
   sich stattdessen wischen. */
@media (prefers-reduced-motion: reduce) {
    .ag-logo-band--laufband .ag-logo-band__rahmen {
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .ag-logo-band--laufband .ag-logo-band__spur { animation: none; }
    .ag-logo-band--laufband .ag-logo-band__satz[aria-hidden="true"] { display: none; }
    .ag-logo-band--laufband .ag-logo-band__item { scroll-snap-align: start; }
    .ag-logo-band--farbe-ruhig .ag-logo-band__item img,
    .ag-logo-band--farbe-ruhig .ag-logo-band__label,
    .ag-logo-band--farbe-weiss .ag-logo-band__item img { transition: none; }
}

/* ── Wandern beim Scrollen, seit 26.09.2026 (Auftrag Vincent) ────────────
   Übertragen aus ag_stats_band (dort am selben Tag zurückgenommen). Die
   Reihe rutscht, an den Scrollfortschritt gekoppelt, seitlich: Band kommt
   unten ins Bild → +Weg, Mitte des Durchlaufs → Ruhelage, oben hinaus →
   −Weg. Scrollt niemand, steht alles. Rein CSS (scroll-driven animation) —
   kein Skript. Browser ohne `animation-timeline` zeigen die Reihe still.
   Ränder: weich ausgeblendet (Entscheidung Vincent, 26.09.2026). Die Reihe
   rückt dafür um den Weg nach innen, damit in der Ruhelage kein Logo in der
   Ausblendung steht — nur solange das Wandern wirklich läuft.
   Weg: spacing/l 32 — ein Leiterwert, deshalb kein tmp. Gewählt ohne
   Figma-Quelle (Rückspielpunkt 0.8).
   Aus: im Editor (Klasse fehlt), unter 768 (zwei Spalten) und bei
   reduzierter Bewegung. Default an, auch für bestehende Bänder —
   Entscheidung Vincent, 26.09.2026.
   ───────────────────────────────────────────────────────────────────────── */
.ag-logo-band--wandern {
    --ag-logo-band-wandern-weg: var(--spacing-l);          /* 32 */
}
@keyframes ag-logo-band-wandern {
    from { transform: translateX(var(--ag-logo-band-wandern-weg)); }
    to   { transform: translateX(calc(var(--ag-logo-band-wandern-weg) * -1)); }
}
@supports (animation-timeline: view()) {
    @media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
        .ag-logo-band--wandern .ag-logo-band__rahmen {
            overflow-x: clip;
            view-timeline: --ag-logo-band-wandern block;
            /* Maske wirkt nur über die Deckkraft — `black` ist hier keine Farbe. */
            -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--ag-logo-band-wandern-weg), black calc(100% - var(--ag-logo-band-wandern-weg)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black var(--ag-logo-band-wandern-weg), black calc(100% - var(--ag-logo-band-wandern-weg)), transparent 100%);
        }
        .ag-logo-band--wandern .ag-logo-band__satz {
            padding-inline: var(--ag-logo-band-wandern-weg);
            animation: ag-logo-band-wandern linear both;
            animation-timeline: --ag-logo-band-wandern;
            animation-range: cover 0% cover 100%;
        }
    }
}

/* Einblendung */
html.ag-anim-ready .ag-logo-band[data-ag-anim="reveal"] {
    transition: opacity var(--motion-reveal) var(--motion-ease-standard),
                transform var(--motion-reveal) var(--motion-ease-standard);
}
html.ag-anim-ready .ag-logo-band[data-ag-anim="reveal"]:not(.is-inview) {
    opacity: 0;
    transform: translateY(var(--motion-distance-reveal));
}
@media (prefers-reduced-motion: reduce) {
    html.ag-anim-ready .ag-logo-band[data-ag-anim="reveal"],
    html.ag-anim-ready .ag-logo-band[data-ag-anim="reveal"]:not(.is-inview) {
        transition: none; transform: none; opacity: 1;
    }
}

/* ── Innenabstand steuerbar (3.88.0) ─────────────────────────────────────
   Entscheidung Vincent, 24.08.2026: Der Innenabstand soll bei jedem Widget
   am Control liegen, nicht nur der Außenabstand. Dieses Widget führt im
   Design kein Blockpolster — die Vorgabe ist deshalb 0, und die Regel wird
   erst wirksam, wenn jemand am Control etwas wählt.
   Steht bewusst am Dateiende: gleiche Spezifität wie die Regeln oben, die
   spätere gewinnt. Nur oben und unten; seitlich begrenzt die Content-Breite. */
.ag-logo-band {
    padding-block: var(--ag-logo-band-pad-oben, 0px) var(--ag-logo-band-pad-unten, 0px);
}