/* Startseite (25.10.2026, Philipp: „passt. wir nehmen den für die startseite“): Referenzen als Kartenreihe zum
   Seitwärtsblättern nach davidundgoliath.com, bis an den rechten Fensterrand. Die fünf Referenzen der Live-Startseite mit
   denselben Bildern (/bilder/kachel/…) plus FUEL10K und BORZ als Hochformate; die anderen quadratisch oder quer
   (Philipp 25.10.2026, RZT vorne, Rosental hinten). Bild füllt die Karte, unten dunkler Verlauf, darauf Leistung · Branche,
   Projektname und Pille. --hell: weißer Bildgrund wird per multiply auf --grau gedunkelt (Philipp: „nicht mit weißem
   hintergrund sondern auch leicht grau“), die Bilddatei bleibt unverändert. Blättern: public/assets/js/referenzen-slider.js.
   Entwürfe dazu: Nextcloud assi/2026-10-25 entwuerfe-referenzen-startseite/, Git-Tag entwuerfe-referenzen-2026-10-25. */
.rs{--g:clamp(14px,1.8vw,30px);--w:min(80cqw,1620px);--rand:calc((100cqw - var(--w)) / 2);background:#fff;container-type:inline-size}
.rs__wrap{width:80%;max-width:1620px;margin:0 auto;padding:clamp(48px,6vw,96px) 0}
.rs__kopf{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(24px,2.6vw,40px)}
.rs__alle{font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:#0a0a0a;text-decoration:none;white-space:nowrap}
.rs__alle:hover,.rs__alle:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* Karte: Bild füllt die Fläche, Text unten links auf dunklem Verlauf */
.rs__karte{--pad:clamp(20px,2.4vw,40px);position:relative;width:100%;height:100%;box-sizing:border-box;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-width:0;padding:var(--pad);border-radius:16px;overflow:clip;background:var(--grau,#d4d4d4);color:#fff;text-decoration:none}
.rs__bild{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rs__karte::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(10,10,10,.78) 0%,rgba(10,10,10,.42) 30%,rgba(10,10,10,0) 58%);pointer-events:none}
.rs__label{font-size:11px;font-weight:600;line-height:1.3;letter-spacing:.2em;text-transform:uppercase;margin-bottom:clamp(8px,1vw,12px)}
.rs__titel{font-family:var(--font-sans);font-weight:300;font-size:clamp(22px,2vw,34px);line-height:1;letter-spacing:-.03em;margin-bottom:clamp(16px,1.6vw,24px)}
.rs__knopf{display:inline-flex;align-items:center;padding:13px 22px;border:1px solid #fff;border-radius:999px;background:#fff;color:#0a0a0a;font-size:11px;font-weight:600;line-height:1;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background-color .15s linear,color .15s linear}
/* Zustände: Bild rückt näher, Pille auf dunklem Grund schwarz mit weißer Kontur (nie grau) */
.rs__karte:hover .rs__bild,.rs__karte:focus-visible .rs__bild{transform:scale(1.04)}
.rs__karte:hover .rs__knopf,.rs__karte:focus-visible .rs__knopf{background:#0a0a0a;color:#fff}
.rs__karte:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}

/* Störer „Award Winning“ auf der RZT-Karte (Philipp 25.10.2026), verlinkt auf die RZT-Gewinnerseite beim A’ Design Award.
   Korrekturen: Zweige wie die German-Web-Awards-Grafik im Intro, kein Rosé („lorbeerkranz sieht scheiße aus …“), dann
   „award logo wieder mit schwarzem störer. so wenig text wie möglich. award winning würde reichen“: schwarzer Kreis, leicht
   gedreht, weiße Olivenzweige (eigene Zeichnung, gespiegelt per <use>) und nur „Award Winning“, dann „award-winning-design … keine drehung on hover“: Text dreizeilig,
   Hover weiß mit schwarzer Kontur ohne Drehung. */
.rs__stoerer{--d:clamp(96px,7.6vw,130px);position:absolute;top:clamp(14px,1.6vw,26px);left:clamp(14px,1.6vw,26px);z-index:3;display:flex;align-items:center;justify-content:center;width:var(--d);height:var(--d);border-radius:50%;background:#0a0a0a;color:#fff;text-decoration:none;line-height:1;rotate:-12deg;box-shadow:0 8px 22px rgba(10,10,10,.28);transition:background-color .15s linear,color .15s linear}
.rs__zweig{flex:none;width:auto;height:56%;aspect-ratio:52 / 130;fill:currentColor;overflow:visible}
.rs__zweig--rechts{transform:scaleX(-1)}
.rs__stoerer-text{display:flex;flex-direction:column;align-items:center;margin:0 -3px;text-align:center}
.rs__stoerer-titel{font-size:clamp(8px,.6vw,10.5px);font-weight:600;line-height:1.25;letter-spacing:.12em;text-transform:uppercase}
.rs__stoerer:hover,.rs__stoerer:focus-visible{background:#fff;color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a,0 8px 22px rgba(10,10,10,.22)}
.rs__stoerer:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Kartenreihe: läuft bis an den rechten Fensterrand, blättert seitwärts */
.rs__reihe{position:relative;margin-right:calc(var(--rand) * -1)}
.rs__spur{display:flex;gap:var(--g);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:var(--rand)}
.rs__spur::-webkit-scrollbar{display:none}
.rs__spur:focus-visible{outline:2px solid #0a0a0a;outline-offset:4px}
/* Rahmen je Karte trägt Format und Einrasten; die Karte füllt ihn, ein Störer liegt als eigener Link darüber */
.rs__spur > .rs__eintrag{position:relative;flex:0 0 auto;scroll-snap-align:start;height:calc(var(--w) * .42)}
.rs__eintrag--schmal{width:calc(var(--w) * .26)}
.rs__eintrag--breit{width:calc(var(--w) * .62)}
.rs__eintrag--quadrat{width:calc(var(--w) * .42)}
.rs__karte--hell .rs__bild{mix-blend-mode:multiply}
.rs__pfeil{position:absolute;top:50%;translate:0 -50%;z-index:2;display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid #0a0a0a;border-radius:50%;background:#fff;color:#0a0a0a;cursor:pointer;transition:background-color .15s linear,color .15s linear}
.rs__pfeil:hover,.rs__pfeil:focus-visible{background:#0a0a0a;color:#fff}
.rs__pfeil--vor{right:clamp(16px,2vw,32px)}
.rs__pfeil--zurueck{left:-28px}
.rs__pfeil[hidden]{display:none}

/* Tablet: Karten größer im Verhältnis */
@media (max-width:1099px){
  .rs__spur > .rs__eintrag{height:calc(var(--w) * .6)}
  .rs__eintrag--schmal{width:calc(var(--w) * .36)}
  .rs__eintrag--breit{width:calc(var(--w) * .72)}
  .rs__eintrag--quadrat{width:calc(var(--w) * .6)}
}
/* Handy: zum Wischen, Hochformate schmal, die anderen quadratisch oder leicht quer */
@media (max-width:759px){
  .rs__kopf{margin-bottom:20px}
  .rs__spur > .rs__eintrag{height:calc(var(--w) * .9)}
  .rs__eintrag--schmal{width:calc(var(--w) * .55)}
  .rs__eintrag--breit{width:calc(var(--w) * 1.05)}
  .rs__eintrag--quadrat{width:calc(var(--w) * .9)}
  .rs__stoerer{--d:84px}
  .rs__stoerer-titel{font-size:7.5px}
  .rs__karte{--pad:18px}
  .rs__label{display:none}
  .rs__knopf{padding:11px 16px;font-size:10px}
  .rs__pfeil{width:44px;height:44px}
  .rs__pfeil--zurueck{left:-22px}
}
@media (prefers-reduced-motion:reduce){
  .rs__bild,.rs__knopf,.rs__pfeil,.rs__stoerer{transition:none}
}