/* ==========================================================================
   Kundenlogos + Referenzen (Strom: referenzen-leistungen) · Version D, Brief Abschnitte 07 und 08
   - Logozeile zwischen Hero und Bühnen: Haarlinie oben und unten, Titel links, Logos ruhig verteilt.
   - Drei gleichwertige Bühnen untereinander, gleiche Maße, gleiche Komposition: Pflanzando, GMA Tech, Tischlerei Zach (ohne Film: Logo-Kachel und Screenshot-Kachel).
   - Bühne = ruhige, satte Fläche in der Kundenfarbe (--c, einfarbig), r28. Kundenfarben sind die einzige Farbausnahme
     (GMA #1b4471, Pflanzando #1d4c40, Zach #2f3a1c). Helle Töne auf der Bühne = Weiß mit fester Deckkraft:
     --on 100 %, --on-2 80 % (≥ 5,9:1 auf allen drei Kundenfarben).
   - Medien als eigene Geräte-Darstellung echter Screenshots: dunkler Gerätekörper (--bg), schmaler Rand, Radius, Schatten.
     Keine Adressleiste, keine Fensterpunkte. Tiefe nur aus Überlappung und dunklen Schatten.
   Sonst nur Tokens aus base.css.
   ========================================================================== */

/* ---------------- 07 · Kundenlogos ---------------- */
.logos { position: relative; }
.logos__in { display: flex; align-items: center; gap: 1.5rem 3rem; padding-block: clamp(1.75rem, 1.4rem + 1vw, 2.5rem); border-block: 1px solid var(--line-2); }
.logos__title { flex: none; font-size: var(--fs-small); font-weight: 560; line-height: 1.4; color: var(--text-2); }
.logos__list { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.logos__list li { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; }
.logos__list img { width: auto; height: var(--h); max-width: 100%; object-fit: contain; opacity: .82; }

@media (max-width: 1179px) {
  .logos__in { flex-direction: column; gap: 1.5rem; text-align: center; }
  .logos__list { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; gap: 1.5rem 1.25rem; max-width: 46rem; }
}
@media (max-width: 699px) {
  .logos__in { gap: 1.25rem; }
  .logos__list { gap: 1.35rem .75rem; }
  .logos__list li { min-height: 1.75rem; }
  .logos__list img { height: calc(var(--h) * .74); }
}
@media (max-width: 359px) {
  .logos__list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 15rem; }
  .logos__list img { height: calc(var(--h) * .82); }
}

/* ---------------- Liste der Bühnen ----------------
   Die Logozeile trennt bereits vom Hero: die Bühnen folgen mit kleinerem Abstand als eine neue Section. */
.refs { padding-top: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.refs__list { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 2rem); }
/* Ab 1024 px nebeneinander: alle drei Bühnen gleich hoch, auch wenn eine Textspalte länger ist (eine Serie) */
@media (min-width: 1024px) { .refs__list { grid-auto-rows: 1fr; } }

/* ---------------- Bühne ----------------
   Desktop (ab 1024): links Kopf (oben) und Fuß (unten), rechts die Medienkomposition über die volle Höhe.
   Die Höhe ergibt sich nur aus der Medienkomposition (festes Seitenverhältnis): alle drei Bühnen sind gleich hoch. */
.ref {
  --on: #fff;
  --on-2: rgba(255, 255, 255, .8);
  --on-line: rgba(255, 255, 255, .24);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  grid-template-areas: "head media" "foot media";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 1rem + 2.6vw, 4rem);
  padding: clamp(2rem, 1rem + 2.4vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--c);
  color: var(--on);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-2);
}
.ref ::selection { background: rgba(255, 255, 255, .3); }

.ref__head { grid-area: head; display: grid; justify-items: start; align-content: start; }
.ref__logo { width: auto; height: var(--lh, 32px); max-width: 13rem; object-fit: contain; object-position: left center; margin-bottom: 1.75rem; }
/* Case-Headline (Polish 6): eine redaktionelle Zeile aus echten Projektfakten, Branche darin enthalten; kein Zusatz, kein Ort.
   Eine Stufe unter der Section-Headline (36 px bei 1440), damit alle drei von 1440 bis 1024 auf vier Zeilen stehen. */
.ref__title { font-size: calc(var(--fs-h2) * .66); line-height: 1.12; letter-spacing: -.028em; font-weight: 600; color: var(--on); max-width: 15em; text-wrap: balance; }
.ref__foot { grid-area: foot; display: grid; gap: 1.5rem; align-content: end; padding-top: 2rem; }
.ref__feat { display: flex; flex-wrap: wrap; gap: .375rem; }
/* Badges wie im Benchmark (Marcel 15.10): gefüllte, leicht transparente helle Fläche ohne Rand, kleines Icon vor dem Text.
   Einfarbig, kein Verlauf, kein Glas. */
.ref__feat li { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem .55rem .7rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .12); font-size: .9375rem; font-weight: 560; line-height: 1.25; color: var(--on); }
.ref__feat svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--on); opacity: .9; }
.ref__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
/* „Projekt ansehen“: transparente Kontur in voller Höhe, Pfeil ohne eigene Kachel (Marcel 15.10: weniger prominent).
   Beim Hover bleibt der Pfeil hell und rückt leicht nach rechts. */
.ref .ref__case { gap: .8rem; padding-inline: 1.5rem 1.35rem; }
.ref__arr { width: 1rem; height: 1rem; flex: none; transition: transform var(--t-mid) var(--ease); }
.ref .ref__case:hover { color: var(--on); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.ref .ref__case:hover .ref__arr { transform: translateX(3px); }
/* Hauptaktion (Polish 6): gemeinsame transparente Konturaktion .btn--line aus base.css, ohne eigene Variante. */
.ref__ph { flex: none; }
.ref :focus-visible { outline-color: var(--on); }

/* ---------------- Medienkomposition (Polish 7) ----------------
   Drei Medien je Bühne, jedes zeigt eine andere Seite der Arbeit, gleiche Anordnung bei allen drei Kunden.
   Maße in Prozent der Kompositionsbreite W (Höhe = 72 % W):
   Website-Hauptansicht 80 % W (16:10) oben rechts · Kundenfilm 42 % W (16:9) unten links · Website-Bewegung 36 % W (16:9)
   unten rechts mit etwas Luft zum Gerät. Die Bewegung liegt ganz unter der Hauptansicht, der Film überdeckt nur ihren Rand (< 1 %, kein Inhalt).
   Das Smartphone (echte Mobilansicht) erscheint nur mobil. Keine Neigung, keine Parallaxe. */
.ref__media { grid-area: media; position: relative; aspect-ratio: 100 / 72; align-self: center; }
.ref__media > figure { position: absolute; margin: 0; }
.ref__shot { top: 0; right: 0; width: 80%; z-index: 1; }
.ref__film { left: 0; bottom: 0; width: 42%; z-index: 2; box-shadow: var(--shadow-3); container-type: inline-size; }
.ref__motion { right: 0; bottom: 0; width: 36%; z-index: 3; aspect-ratio: 16 / 9; box-shadow: var(--shadow-3); }
.ref__phone { display: none; }
/* Website-Bewegung: stumme Schleife, nur sichtbar; Pause oben rechts (WCAG 2.2.2) */
.ref__motion video { position: absolute; inset: 0; }
.ref__mctl { position: absolute; top: .5rem; right: .5rem; z-index: 2; width: 2.25rem; height: 2.25rem; opacity: .0; transition: opacity var(--t-mid) var(--ease), background var(--t-fast); }
.ref__mctl svg { width: 1rem; height: 1rem; }
.ref__motion:hover .ref__mctl, .ref__mctl:focus-visible, .ref__mctl.is-paused { opacity: 1; }
@media (hover: none) { .ref__mctl { opacity: 1; } }
/* Geräte: dunkler Körper, schmaler gleichmäßiger Rand, Bildschirm mit innerem Radius. Ohne Browser-Rahmen. */
.dev { --bz: 7px; padding: var(--bz); background: var(--bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), var(--shadow-3); }
.dev__screen { position: relative; overflow: hidden; background: var(--surface-2); }
.dev__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dev--desk { border-radius: var(--r-lg); }
.dev--desk .dev__screen { aspect-ratio: 16 / 10; border-radius: calc(var(--r-lg) - var(--bz)); }
.dev--phone { --bz: 5px; border-radius: var(--r-xl); }
.dev--phone .dev__screen { aspect-ratio: 390 / 845; border-radius: calc(var(--r-xl) - var(--bz)); }

/* Kundenfilm-Platzhalter: QA = markierte Fassung wie überall (.media-ph aus base.css). Founder = ruhige Fläche in der
   Kundenfarbe (eine Stufe dunkler als die Bühne) mit dem weißen Kundenlogo, ohne Abspiel-Symbol. */
.ref__film .media-ph span { color: var(--text-3); font-size: var(--fs-meta); }
.ref__film-id { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), var(--c); }
.ref__film-id > div { display: grid; place-items: center; height: 100%; }
.ref__film-id img { width: auto; height: calc(var(--lh, 28px) * 1.15); max-width: 55%; object-fit: contain; opacity: .9; }

/* Kundenfilm (Pflanzando): stumme Schleife; Name links unten auf dunklem Lesbarkeitsverlauf, „Ansehen“ rechts unten,
   Pause oben rechts. Nach dem Klick: voller Film mit Ton, Ton-Schalter und rote Fortschrittslinie, Name und Knopf treten weg. */
.ref__film video { position: absolute; inset: 0; }
.ref__film[data-voice]::before { content: ""; position: absolute; inset: auto 0 0; height: 55%; z-index: 1; background: linear-gradient(to top, var(--scrim), transparent); pointer-events: none; transition: opacity var(--t-mid); }
.ref__who { position: absolute; left: 1rem; bottom: .9rem; z-index: 2; max-width: calc(100% - 11rem); display: grid; gap: .1rem; font-size: var(--fs-meta); line-height: 1.35; color: var(--text-2); transition: opacity var(--t-mid); }
.ref__who b { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.ref__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Der Kundenname wird nie gekürzt; wenn es eng wird, bricht er um */
.ref__who b { line-height: 1.25; }
/* Schmaler Film (< 380 px): „Ansehen“ wird zur kompakten Abspiel-Kachel (Dauer steht im aria-label), der Name bekommt den Platz */
@container (max-width: 379px) {
  .ref__play { gap: 0; padding: .25rem; }
  .ref__pl { display: none; }
  .ref__who { left: .8rem; bottom: .75rem; max-width: calc(100% - 4.5rem); }
}
@container (max-width: 259px) { .ref__who span { display: none; } }
.ref__play { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; transition: opacity var(--t-mid), background var(--t-mid) var(--ease); }
.ref__play .btn__k svg { width: .85rem; height: .85rem; }
.ref__ctl { position: absolute; top: .6rem; right: .6rem; z-index: 2; display: flex; gap: .4rem; }
.ref__ctl .ctl { width: 2.5rem; height: 2.5rem; }
.ref__snd { display: none; }
.ref__bar { position: absolute; inset: auto 0 0; z-index: 2; height: 2px; background: rgba(255, 255, 255, .14); opacity: 0; transition: opacity var(--t-mid); }
.ref__bar i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(var(--pr, 0)); }
.ref__film.is-playing::before, .ref__film.is-playing .ref__who, .ref__film.is-playing .ref__play { opacity: 0; pointer-events: none; }
.ref__film.is-playing .ref__snd { display: grid; }
.ref__film.is-playing .ref__bar { opacity: 1; }

/* ---------------- Benchmark-Anordnung (Feinschliff 15.10, Marcel; zuerst nur GMA Tech) ----------------
   Zwei gleich breite Spalten. Links: Logo, Website-Hauptansicht, Headline, Badges, Aktionen.
   Rechts: oben der kleine Kundenfilm-Platz (halbe Spaltenbreite, 16:9) mit kurzer Einordnung daneben, darunter groß die
   Website-Bewegung, die bis zum unteren Rand der linken Spalte reicht (Video füllt per object-fit: cover).
   Gleiche Fläche, Geräte, Badges und Aktionen wie die übrigen Bühnen; keine neuen Effekte. */
.ref--bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; column-gap: clamp(1.5rem, .8rem + 2vw, 3rem); }
.ref--bench .ref__col { display: flex; flex-direction: column; min-width: 0; }
.ref--bench .ref__logo { margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.75rem); }
.ref--bench .ref__shot { position: relative; width: 100%; }
/* Website-Hauptansicht ohne dunklen Geräterand (Marcel 15.10): nur der Screenshot mit Radius und Schatten */
.ref--bench .ref__shot.dev { padding: 0; background: none; box-shadow: var(--shadow-3); }
.ref--bench .ref__shot .dev__screen { border-radius: var(--r-lg); }
.ref--bench .ref__title { margin-top: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); max-width: 22em; }
.ref--bench .ref__foot { padding-top: 1.5rem; align-content: start; }
.ref--bench .ref__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(1rem, .6rem + 1vw, 1.75rem); margin-bottom: clamp(1rem, .6rem + 1vw, 1.5rem); }
.ref--bench .ref__film { position: relative; inset: auto; width: 100%; box-shadow: var(--shadow-2); }
.ref--bench .ref__about { display: grid; gap: .3rem; margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--on-2); }
.ref--bench .ref__about b { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--on); }
/* Im kleinen Filmfeld steht nur „Ansehen“; Name und Rolle stehen daneben in der Einordnung */
.ref--bench .ref__who { display: none; }
/* Steuerung wie beim Hero-Video: Pause oben rechts, unten links „Mit Ton ansehen“ (hero__listen aus hero.css), kein zweites Play-Symbol */
.ref--bench .ref__play { left: .6rem; right: auto; bottom: .6rem; gap: .55rem; min-height: 2.5rem; padding: .2rem .85rem .2rem .2rem; font-size: .875rem; }
.ref--bench .ref__play .hero__listen-k { width: 2rem; height: 2rem; border-radius: 8px; }
.ref--bench .ref__play .hero__listen-k svg { width: .95rem; height: .95rem; }
.ref--bench .ref__film[data-voice]::before { height: 35%; }
.ref--bench .ref__motion { position: relative; inset: auto; width: 100%; flex: 1 1 auto; min-height: 16rem; aspect-ratio: auto; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); }
.ref--bench .ref__motion video { width: 100%; height: 100%; object-fit: cover; }
/* Tablet und mobil: eine Spalte in Lesereihenfolge; die große Bewegung entfällt mobil wie bei den anderen Bühnen. */
@media (max-width: 1023px) {
  .ref--bench { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .ref--bench .ref__motion { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 599px) {
  .ref--bench .ref__top { grid-template-columns: minmax(0, 1fr); }
  .ref--bench .ref__motion { display: none; }
  .ref--bench .ref__col--r { order: 0; }
}

/* ---------------- Abschluss: eine zentrierte Aktion ---------------- */
.refs__more { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem); }

@media (min-width: 1024px) and (max-width: 1179px) {
  .ref { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}

/* ---------------- Tablet: Kopf über den Medien, Fuß darunter; gleiche Medienkomposition ---------------- */
@media (max-width: 1023px) {
  .ref { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "foot"; grid-template-rows: auto; }
  .ref__head { margin-bottom: 2.25rem; }
  .ref__logo { margin-bottom: 1.25rem; }
  .ref__title { max-width: 34rem; }
  .ref__foot { padding-top: 2.25rem; }
}

/* ---------------- Mobil: Bildschirm (bei echter Mobilansicht mit Smartphone davor), darunter der Film voll breit.
   Die Website-Bewegung entfällt mobil (16:9-Desktopmotiv, zu klein zum Lesen). ---------------- */
@media (max-width: 599px) {
  .ref { padding: 1.5rem 1rem 1.5rem; border-radius: var(--r-lg); }
  .ref__head { margin-bottom: 1.5rem; }
  .ref__logo { max-width: 10rem; height: calc(var(--lh, 32px) * .85); margin-bottom: 1rem; }
  .ref__media { aspect-ratio: auto; display: grid; gap: .75rem; }
  .ref__media > figure { position: relative; inset: auto; width: auto; }
  .ref__media > .ref__shot { grid-area: 1 / 1; width: 86%; justify-self: start; align-self: start; margin-bottom: 14%; }
  .ref__media > .ref__phone { display: block; grid-area: 1 / 1; width: 27%; justify-self: end; align-self: end; }
  .ref__media > .ref__motion { display: none; }
  .ref__media > .ref__film { grid-area: 2 / 1; width: 100%; }
  .ref__media:not(:has(.ref__phone)) > .ref__shot { width: 100%; margin-bottom: 0; }
  .dev { --bz: 5px; }
  .dev--desk { border-radius: var(--r-md); }
  .dev--desk .dev__screen { border-radius: calc(var(--r-md) - var(--bz)); }
  .dev--phone { --bz: 4px; border-radius: var(--r-lg); }
  .dev--phone .dev__screen { border-radius: calc(var(--r-lg) - var(--bz)); }
  .dev__screen .media-ph > :not(svg) { display: none; }
  .ref__foot { grid-template-columns: minmax(0, 1fr); padding-top: 1.5rem; gap: 1.25rem; }
  .ref__acts { justify-content: flex-start; gap: .25rem 1.25rem; }
  .ref__feat { gap: .4rem; }
  .ref__feat li { padding: .25rem .55rem; font-size: var(--fs-meta); }
}

/* Bühne ohne Film und ohne Website-Bewegung (Tischlerei Zach, Marcel 24.10): Logofläche in der Kundenfarbe statt Film,
   Screenshot-Kachel statt Bewegung. Gleiche Maße wie die anderen Bühnen. */
.ref__film--id .ref__film-id { display: block; }
.ref--bench .ref__tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }