/* ==========================================================================
   Baustein: Referenz-Slider mit Filterzeile (Sektion 7)
   Datei: css/bausteine/referenz-slider.css
   Gebraucht auf: index.html
   Bauvorschrift: DESIGN.md, Baustein "Referenz-Slider mit Filterzeile", N9. Skript: js/bausteine/referenz-slider.js
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .slider-* */

/* --------------------------------------------------------------------------
   Sektionskopf, linksbündig (Vorgabe 2026-09-08)
   Stand 2026-09-14 (D20): .slider-head ist im Markup durch .section-head ersetzt,
   der Kopf ist site-weit linksbündig ohne Eyebrow und ohne Kappung. Der Text
   darunter ist Historie.

   Abweichung vom Baustein "Sektionskopf": der setzt die display-2 rechts auf
   76 Prozent Breite, mit dem Eyebrow links daneben. Hier stehen Eyebrow und
   Zeile linksbündig untereinander, also genau das Bild, das .section-head ab
   980 px ohnehin zeigt. Für die anderen zehn Sektionen gilt der Baustein weiter.

   Deshalb .slider-head statt .section-head am Element, und keine Regel auf
   .section-head, .display-2 oder .eyebrow: sonst kippen alle Sektionen mit
   (docs/entwicklung.md, Regel 4).

   Die Klasse trägt bewusst keine eigene Regel. Sie ist nur der Verzicht auf
   .section-head, alles andere kommt aus style.css: .display-2 läuft dann über
   die Breite des Containers, der Abstand unter dem Eyebrow sind die 24 px aus
   .eyebrow. Auch keine Kappung: mit den 860 px des Bausteins bricht die Zeile
   nach "Einsatz" um, ohne Kappung steht sie bis 640 px auf einer Zeile
   (Vorgabe 2026-09-08). Darunter greift der Umbruch wieder, weil die Zeile bei
   64 px Schriftgröße breiter als das Fenster wäre, und ein erzwungenes nowrap
   würde die Seite waagerecht überlaufen lassen (D15).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Bedienzeile: Filter links, Pfeile rechts über der Spur
   -------------------------------------------------------------------------- */
/* Filterzeile und Pfeile tun ohne Skript nichts, deshalb erscheint die ganze
   Bedienzeile erst unter .js (D10). Ohne Skript bleibt die Spur wischbar, mit der
   Tastatur erreichbar, und alle Karten sind da. */
.slider-controls { display: none; }
.js .slider-controls {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  flex-wrap: wrap;
}
.slider-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.slider-arrows { display: flex; gap: var(--gap); }

.slider-filter-title { color: var(--muted); margin-right: 8px; }

/* Pillen wie die Anker-Tagleiste: 36px, --r-pill, Rahmen --line-strong, label-cta */
.slider-pill {
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.slider-pill:hover,
.slider-pill[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
/* Drücken (2026-10-13, Skill apple-design): Rückmeldung beim Herunterdrücken, nicht erst
   beim Loslassen, wie .button in style.css. Gilt auch für die Pfeile unten. */
.slider-pill:active {
  transform: scale(var(--press));
  transition-duration: var(--t-press);
  transition-timing-function: ease-out;
}

/* Pfeile: 42px-Kreise wie in der Expertise-Liste, am Spurende deaktiviert (D9) */
.slider-arrow {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t), transform var(--t);
}
.slider-arrow svg { width: 20px; height: 20px; display: block; }
.slider-arrow:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.slider-arrow:not([disabled]):active {
  transform: scale(var(--press));
  transition-duration: var(--t-press);
  transition-timing-function: ease-out;
}
.slider-arrow[disabled] { opacity: .45; cursor: not-allowed; }
.slider-arrow[disabled]:hover {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}

/* Lädt die Datei nicht, nimmt das Skript die Bedienzeile über hidden heraus */
.js .slider-controls[hidden] { display: none; }

/* Trefferzahl, vom Skript gefüllt. Leer nimmt sie keinen Platz. */
.slider-status { margin-top: 20px; }
.slider-status:empty { display: none; }

/* --------------------------------------------------------------------------
   Spur: beginnt am Containerrand und läuft rechts über ihn hinaus,
   damit sichtbar ist, dass mehr kommt. Kein overflow-x am Body (D15).
   -------------------------------------------------------------------------- */
.slider-track {
  list-style: none;
  /* Die Spur greift links wie rechts um --pad-x über den Container hinaus, bis
     an den Fensterrand. Derselbe Betrag kommt als Innenabstand zurück, deshalb
     steht die erste Karte trotzdem bündig am Containerrand und die letzte hört
     dort auf. Was übersteht, sind zwei leere Rinnen, und in denen liegt die
     Maske unten. Oben und unten 8px Luft, weil eine Spur mit overflow-x auch
     senkrecht beschneidet: sonst schneidet die Kante die 2px Hover-Anhebung und
     den Focus-Ring ab (2px Linie plus 3px Abstand, D9). Die negativen Ränder
     nehmen die Luft wieder heraus, damit die Abstände gleich bleiben. */
  margin: 48px calc(var(--pad-x) * -1) -8px;
  padding: 8px var(--pad-x);
  /* die Karte rastet am Containerrand ein, nicht an der Rinne */
  scroll-padding-left: var(--pad-x);
  display: grid;
  grid-auto-flow: column;
  /* Feste Kartenbreite. Mit minmax(320px, .38fr) wuchs eine Karte, sobald der
     Filter nur eine oder zwei übrig ließ, auf 38 Prozent der Spur (2026-10-02). */
  grid-auto-columns: 320px;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Scrollbalken ausgeblendet, die Pfeile und das Wischen übernehmen */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Weiche Kante statt harter Schnittkante, ausmaskiert mit linear-gradient wie
     die Gitterraster in D11. Der Verlauf ist genau so breit wie die Rinne, er
     liegt also immer außerhalb des Containers: eine Karte im Container wird nie
     abgedunkelt, eine Karte, die hinausläuft, blendet in der Rinne aus. Damit
     braucht die Maske keinen Zustand und keinen Übergang, sie steht fest.
     Der Mittelstopp bei 45 Prozent macht den Verlauf früher deckend als eine
     gerade Rampe, dadurch ist der Übergang dort weich, wo er auf die Karte
     trifft. Zum Nachstellen reichen die Rinnenbreite und dieser eine Stopp. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0,0,0,.62) calc(var(--pad-x) * .45),
    #000 var(--pad-x),
    #000 calc(100% - var(--pad-x)),
    rgba(0,0,0,.62) calc(100% - var(--pad-x) * .45),
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    rgba(0,0,0,.62) calc(var(--pad-x) * .45),
    #000 var(--pad-x),
    #000 calc(100% - var(--pad-x)),
    rgba(0,0,0,.62) calc(100% - var(--pad-x) * .45),
    transparent 100%);
}
.slider-track::-webkit-scrollbar { display: none; }
/* 20px plus die 8px Polsterung von oben ergeben die 28px Abstand zur Bedienzeile */
.js .slider-track { margin-top: 20px; }

/* Ziehen mit der Maus, siehe js/bausteine/referenz-slider.js. Bewusst ohne
   Greifzeiger: der Zeiger bleibt in jeder Lage derselbe, Vorgabe 2026-09-08.

   Einrasten ist aus, solange gezogen wird, und bleibt aus, bis die Spur nach dem
   Loslassen auf die nächste Karte geglitten ist. Sonst springt sie im ersten Bild
   an die Rastermarke, statt hinzugleiten. Das Skript setzt is-settling. */
.slider-track.is-dragging,
.slider-track.is-settling { scroll-snap-type: none; }

.slider-track.is-dragging {
  /* keine Textauswahl unter dem Zug */
  -webkit-user-select: none;
  user-select: none;
}
/* keine Hover-Anhebung, solange die Spur gezogen wird oder nach dem Loslassen gleitet,
   sonst zuckt die Karte, die unter dem Zeiger durchläuft */
.slider-track.is-dragging .slider-card:hover,
.slider-track.is-settling .slider-card:hover { transform: none; }

/* Gummiband an Anfang und Ende (2026-10-13, Skill apple-design): Über die Kante hinaus
   verschiebt das Skript die Karten, nicht die Spur. So bleibt die Maske stehen, und nichts
   ragt über den Fensterrand hinaus (D15). Den Betrag setzt das Skript als --slider-dehnung,
   ohne .is-gedehnt trägt keine Karte eine Verschiebung. Eigene Eigenschaft translate, damit
   nichts mit dem transform der Karte (Hover) zusammenstößt. */
.slider-track.is-gedehnt .slider-item { translate: var(--slider-dehnung, 0px) 0; }

.slider-item { display: flex; scroll-snap-align: start; }
/* Filter blendet über das hidden-Attribut aus, Grid darf das nicht überstimmen */
.slider-item[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Karte: ein Link auf ihre Story, mindestens 300px hoch
   -------------------------------------------------------------------------- */
.slider-card {
  width: 100%;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  background: var(--white); /* D17 */
  border: 1px solid var(--line-card);
  border-radius: var(--r-md);
  /* beschneidet nur die Kunstfläche, die Karte klebt nicht (D15) */
  overflow: hidden;
  transition: transform var(--t), border-color var(--t);
}
/* abgeleitet: die Vorlage kennt keinen Karten-Hover. Anhebung wie am Button (D9),
   dazu die Kontur eine Stufe kräftiger. Keine neue Farbe, kein Schatten. */
.slider-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

/* Kunstfläche 160px nach D11, rein dekorativ und aria-hidden im Markup */
.slider-art {
  position: relative;
  display: block;
  height: 160px;
  flex: none;
  overflow: hidden;
}
/* Verläufe nach D11 und D17: Blau aus den drei Blau-Token, Pastell aus --paper zu --white */
.slider-art--blue { background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 45%, var(--blue-light) 100%); }
.slider-art--pastel { background: linear-gradient(150deg, var(--paper) 0%, var(--white) 100%); }

.slider-art-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 85%);
  mask-image: linear-gradient(to bottom right, #000, transparent 85%);
}
.slider-art--pastel .slider-art-grid {
  background-image:
    linear-gradient(rgba(16,17,19,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,17,19,.1) 1px, transparent 1px);
}

/* Glasflächen nach D11: Verlauf, 1px Rahmen, blur, Rotation bis 9 Grad */
.slider-art-tile {
  position: absolute;
  left: 24px;
  bottom: -34px;
  width: 190px;
  height: 96px;
  border: 1px solid rgba(255,255,255,.52);
  /* --r-md statt der 10px, die die Lieferung an Deko-Karten hart eintrug (D15) */
  border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(255,255,255,.5), rgba(255,255,255,.12));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: skewY(-8deg) rotate(-6deg);
}
.slider-art-tile--b {
  left: auto;
  right: -46px;
  bottom: auto;
  top: -30px;
  width: 150px;
  height: 84px;
  transform: skewY(9deg) rotate(7deg);
}
.slider-art--pastel .slider-art-tile { border-color: rgba(255,255,255,.7); }

/* Geliefertes Bild aus assets/data/references.json (image.src): ersetzt die
   Kunstfläche in derselben Höhe und füllt sie randlos */
.slider-image {
  display: block;
  height: 160px;
  flex: none;
}
.slider-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .4s ease;
}
/* Farbe bei Hover und Tastaturfokus, eingeblendet statt umgeschaltet (DEV-1673).
   Bei reduzierter Bewegung kürzt style.css die Dauer, die Farbe kommt dann sofort. */
.slider-card:hover .slider-image img,
.slider-card:focus-visible .slider-image img { filter: grayscale(0); }

/* Body ohne Trennlinie zur Kunstfläche (Vorgabe 2026-10-02) */
.slider-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}
.slider-kunde { color: var(--ink); }
.slider-copy { max-width: 280px; }

/* Tags als Mikropillen: 24px, --r-xs, label, Rahmen --line */
.slider-tags {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.slider-tag {
  height: 24px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  color: var(--muted);
  white-space: nowrap;
}

/* Verweis für den Fall ohne Karten: ohne Skript sichtbar, mit Skript nur, wenn
   die Datei nicht lädt (is-shown setzt das Skript) */
.slider-notice { margin-top: 48px; }
/* Unterstrichen, damit der Link nicht nur an der Farbe hängt (WCAG 1.4.1) */
.slider-notice a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.js .slider-notice { display: none; }
.js .slider-notice.is-shown { display: block; margin-top: 20px; }

/* --------------------------------------------------------------------------
   Breakpoint 980px
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .slider-controls { margin-top: 42px; }
}

/* --------------------------------------------------------------------------
   Breakpoint 640px: schmalere Karten, Pfeile unter die Filterzeile
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .slider-controls { margin-top: 36px; align-items: flex-start; }
  /* eine Karte darf nie breiter als das Fenster sein */
  .slider-track { grid-auto-columns: 272px; }
  .slider-card-body { padding: 20px; }
}