/* /projekte · Variante A „Schaufenster“ (Release 2026-10-22-verkaufsstark, Modul referenzen).
   Große Projekte im Wechsel, einheitliche 16:10-Aufnahmen im gezeichneten Rahmen, keine Domainleiste.
   Farben nur aus den vorhandenen Tokens (Fallback = Designsystem/css/tokens.css). */

.schau-liste { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; gap: clamp(80px, 9vw, 150px); }
.schau { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 5.5vw, 88px); align-items: center; }
.schau:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.schau:nth-child(even) .schau__bild { order: 2; }

.schau__bild { position: relative; display: block; aspect-ratio: 16 / 10; }
.schau__bild::before { content: ""; position: absolute; inset: 0; transform: translate(14px, 14px); background: var(--canvas-3, #E7E0D8); border-radius: 14px 10px 16px 12px; transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
a.schau__bild:hover::before { transform: translate(8px, 8px); } /* nur verlinkte Bilder reagieren (FLiiTS: Bild ohne Link) */
.schau__shot { position: relative; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; border-radius: 18px; background: #fff; }
.schau__rahmen { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); max-width: none; pointer-events: none; }

.schau__text { display: grid; justify-items: start; }
.schau__text > .eyebrow { margin: 0; }
.schau__satz { margin: 14px 0 0; font-size: clamp(30px, 3.1vw, 46px); font-weight: 700; line-height: 1.08; letter-spacing: -0.022em; text-wrap: balance; color: var(--ink, #19191C); }
.schau__name { margin: 16px 0 0; font-size: 18px; font-weight: 600; color: var(--ink-2, #2B2B2F); }
.schau__partner { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink-2, #2B2B2F); }
.schau__partner a { color: inherit; text-decoration: underline; text-decoration-color: var(--cta, #22C7D6); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.schau__partner a:hover { text-decoration-color: var(--cta-tief, #0E8A97); }
.schau__leistungen { list-style: none; margin: 22px 0 30px; padding: 0; display: grid; gap: 10px; font-size: 17px; line-height: 1.4; color: var(--ink, #19191C); }
.schau__leistungen li { display: flex; gap: 12px; align-items: flex-start; }
.schau__leistungen li::before { content: ""; flex: none; width: 24px; height: 24px; margin-top: -1px; background: url("/assets/img/zeichen/deko-haken-68f31da71755.svg") no-repeat center / contain; }

.schau__link { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ink, #19191C); text-decoration: underline; text-decoration-color: var(--cta, #22C7D6); text-decoration-thickness: 3px; text-underline-offset: .28em; }
.schau__link:hover { text-decoration-color: var(--cta-tief, #0E8A97); }
.schau__link:focus-visible, .schau__partner a:focus-visible, .mehr__eintrag a:focus-visible { outline: 3px solid var(--cta-tief, #0E8A97); outline-offset: 4px; border-radius: 6px; }

.schau-quelle { margin: clamp(48px, 5vw, 72px) 0 0; max-width: 70ch; font-size: 13px; line-height: 1.5; color: var(--muted, #6E6A66); }

/* Weitere Zusammenarbeit: sechs gleich große 16:10-Einträge in drei Spalten (2 Reihen), mobil als Wischreihe */
.mehr { margin-top: clamp(96px, 10vw, 160px); }
.mehr__kopf { display: grid; gap: 10px; margin-bottom: 32px; }
.mehr__kopf > .eyebrow { margin: 0; }
.mehr__kopf h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
.mehr__liste { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.mehr__eintrag a, .mehr__eintrag > div { display: grid; align-content: start; gap: 6px; color: var(--ink, #19191C); text-decoration: none; }
.mehr__bild { position: relative; aspect-ratio: 16 / 10; margin-bottom: 14px; }
.mehr__bild::before { content: ""; position: absolute; inset: 0; transform: translate(9px, 9px); background: var(--canvas-3, #E7E0D8); border-radius: 12px 9px 13px 10px; transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
.mehr__eintrag a:hover .mehr__bild::before { transform: translate(5px, 5px); }
.mehr__bild > img:first-child { position: relative; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; border-radius: 14px; background: #fff; }
.mehr__marke { position: relative; width: 100%; height: 100%; display: grid; place-items: center; border-radius: 14px; background: var(--ink, #19191C); }
.mehr__marke img { width: 58%; height: auto; }
.mehr__name { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.mehr__art { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2, #2B2B2F); }
.mehr__status { margin: 0; font-size: 15px; font-weight: 600; color: var(--accent, #097078); }
.mehr__pfeil { color: var(--muted, #6E6A66); font-weight: 600; }
/* r2: Beim Hereinscrollen per Tastatur 12 px Luft über/unter der Karte, damit der Fokusrahmen (7 px) nicht am
   Fensterrand abgeschnitten wird */
.mehr__eintrag, .mehr__eintrag > a { scroll-margin-block: 12px; }

@media (max-width: 900px) {
  .schau, .schau:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .schau:nth-child(even) .schau__bild { order: 0; }
  .schau__bild::before { transform: translate(9px, 9px); }
  a.schau__bild:hover::before { transform: translate(9px, 9px); }
  .schau__satz { font-size: 30px; }
  .schau__leistungen { margin-bottom: 26px; }
  /* r2: 10 px Innenraum oben und links (durch negativen Außenabstand ausgeglichen) und 10 px scroll-padding, damit
     der Fokusrahmen (3 px + 4 px Abstand) in der Wischreihe ganz sichtbar bleibt; das Hereinholen der fokussierten
     Karte macht referenzen-wischreihe-…js. */
  .mehr__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 10px; gap: 20px; margin: -10px calc(-1 * var(--gutter, 20px)) 0 -10px; padding: 10px var(--gutter, 20px) 18px 10px; }
  .mehr__eintrag { scroll-snap-align: start; }
  /* ohne JavaScript: Raster statt Wischreihe, damit jede Karte per Tastatur ganz sichtbar ist */
  .no-js .mehr__liste { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 32px 20px; overflow-x: visible; scroll-snap-type: none; margin: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .schau__bild::before, .mehr__bild::before { transition: none; }
}

/* Abschluss: vorhandener gezeichneter Pfeil zeigt auf den Knopf (Text und Knopf unverändert) */
.abschluss-handlung { position: relative; display: inline-block; }
.abschluss-handlung__pfeil { position: absolute; right: calc(100% + 8px); bottom: 12px; width: 124px; height: auto; transform: rotate(-4deg); pointer-events: none; }
@media (max-width: 560px) {
  .abschluss-handlung__pfeil { width: 52px; right: calc(100% + 2px); bottom: 20px; }
}

/* Kopfbereich: Der feste Seitenkopf (76–88 px) verdeckte bisher das Label „Referenzen · acessio“
   (padding-top 48px!important aus persoenlich-…css). Abstand wie auf /branchen/. */
main.references-overview > .references-overview__hero { padding-top: clamp(112px, 9vw, 136px) !important; }