/* Aingel Variante 13 – Referenzen als horizontaler Slider (Startseite)
   Owner 13.10.: „dass mehr vom screenshot gezeigt wird und nur ein kleiner text, und bei hover oder draufdrücken könnten
   dann mehr Infos kommen. und auf der Homepage sollen mehr Referenzen sein, am besten mit einem horizontal slides“.
   Die Karten zeichnet das Skript des Workspace (/api/referenzen.js: .aingel-ref-raster > .aingel-ref-karte mit
   .aingel-ref-bild und .aingel-ref-inhalt); hier wird daraus eine Reihe, die an der Kante der Seite beginnt und bis an
   den Bildschirmrand läuft. Der Screenshot füllt die ganze Karte, darauf eine kleine Glasleiste mit Kategorie und
   Titel; Text und Leistungen klappen beim Hover, Fokus oder Antippen (.ist-offen, elemente/referenzen-slider.js) auf. */

.ref-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(32px, 4vw, 48px); }
.ref-kopf .kopfzeile { margin-bottom: 0; }
.ref-steuerung { display: flex; gap: 10px; }
.ref-pfeil {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); cursor: pointer;
  transition: border-color .2s var(--kurve), opacity .2s var(--kurve), transform .2s var(--kurve);
}
.ref-pfeil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .ref-pfeil:hover:not([aria-disabled='true']) { border-color: var(--rolle, var(--code)); transform: translateY(-1px); } }
.ref-pfeil[aria-disabled='true'] { opacity: .35; cursor: default; }
/* Passen alle Karten in die Breite, braucht es weder Pfeile noch Fortschritt */
.ref-passt .ref-steuerung, .ref-passt .ref-fortschritt { visibility: hidden; }

/* ---------- Die Reihe: beginnt an der Kante der Seite (.wrap), läuft bis an den Bildschirmrand ---------- */
.ref-slider { --ref-rand: max(var(--rand), (100% - var(--max)) / 2); --ref-b: clamp(290px, 36vw, 480px); position: relative; }
.ref-slider .aingel-ref-raster {
  display: flex; gap: 16px; grid-template-columns: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ref-rand);
  padding: 6px var(--ref-rand) 10px; scrollbar-width: none;
}
.ref-slider .aingel-ref-raster::-webkit-scrollbar { display: none; }
.ref-slider.ist-ziehen .aingel-ref-raster { scroll-snap-type: none; cursor: grabbing; }
.ref-slider.ist-ziehen .aingel-ref-karte { pointer-events: none; }

/* ---------- Die Karte: der Screenshot ist die Karte ---------- */
/* Owner 13.10. abends: „die Referenzen sollen viereckig sein, sodass man mehr vom Screenshot sieht“ – quadratisch
   statt 16:10; bei gleicher Breite zeigt die Karte ein gutes Drittel mehr der Seite (von oben) */
.ref-slider .aingel-ref-karte {
  position: relative; flex: 0 0 var(--ref-b); aspect-ratio: 1 / 1; scroll-snap-align: start; isolation: isolate;
  overflow: hidden; border-radius: var(--r-l); border: 1px solid var(--linie); background: var(--flaeche-hoch); color: var(--text);
  transform: none; transition: border-color .3s var(--kurve), box-shadow .4s var(--kurve);
}
.ref-slider .aingel-ref-bild {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top center;
  border: 0; background: var(--flaeche-hoch); transition: transform 1.1s var(--kurve), filter .5s var(--kurve);
}
/* Screenshot im Querformat (js: .ist-quer): ganz zu sehen, oben bündig – nie seitlich beschnitten; der Raum darunter
   zeigt dasselbe Bild weich verschwommen, die Glasleiste liegt darauf */
.ref-slider .ist-quer .aingel-ref-bild { object-fit: contain; object-position: top center; background: transparent; }
.ref-slider .aingel-ref-karte.ist-quer::before {
  content: ''; position: absolute; inset: -30px; z-index: -1; pointer-events: none;
  background: var(--ref-bild) center bottom / cover no-repeat; filter: blur(28px) saturate(1.1); opacity: .92;
}
/* Ohne Bild: eine ruhige Fläche in der Farbe des Abschnitts statt eines Lochs */
.ref-slider .aingel-ref-karte:not(:has(.aingel-ref-bild)) { background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--glas, var(--glas-code)) 22%, transparent), transparent 60%), var(--flaeche-hoch); }

/* Die kleine Glasleiste: Kategorie und Titel; der Rest klappt auf */
.ref-slider .aingel-ref-inhalt {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1; gap: 3px; padding: 12px 16px 13px;
  border-radius: var(--r-m); border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--flaeche) 76%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
  transition: background-color .3s var(--kurve);
}
.ref-slider .aingel-ref-kategorie { font: 500 11px/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-leise); opacity: 1; }
/* Schrift in Glasplaketten höchstens 15 px */
.ref-slider .aingel-ref-titel { font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 26px; }
.ref-slider .aingel-ref-text, .ref-slider .aingel-ref-leistungen {
  max-height: 0; opacity: 0; overflow: hidden; margin: 0;
  transition: max-height .5s var(--kurve), opacity .3s var(--kurve), margin .5s var(--kurve);
}
.ref-slider .aingel-ref-text { font-size: 14.5px; line-height: 1.5; color: var(--text-leise); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.ref-slider .aingel-ref-leistung { font: 400 11.5px/1.2 var(--mono); color: var(--text-leise); border-color: var(--linie); }
/* Das Zeichen „mehr“ rechts in der Leiste: ein Plus, das beim Aufklappen zum Minus wird */
.ref-slider .aingel-ref-inhalt::after {
  content: ''; position: absolute; right: 14px; top: 17px; width: 12px; height: 12px;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat;
  color: var(--text-leise); transition: transform .35s var(--kurve);
}
/* Link zur Seite des Projekts: ein Pfeil oben rechts, sobald die Karte offen ist */
.ref-slider a.aingel-ref-karte::after {
  content: '↗'; position: absolute; z-index: 1; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font: 500 15px/1 var(--schrift); color: var(--text);
  background: color-mix(in srgb, var(--flaeche) 76%, transparent); border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
  opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--kurve), transform .3s var(--kurve);
}

/* Offen: beim Hover (Maus), mit der Tastatur oder nach dem ersten Antippen */
.ref-slider .aingel-ref-karte.ist-offen, .ref-slider .aingel-ref-karte:focus-visible { border-color: color-mix(in srgb, var(--rolle, var(--code)) 50%, var(--linie)); }
.ref-slider .ist-offen .aingel-ref-bild, .ref-slider .aingel-ref-karte:focus-visible .aingel-ref-bild { transform: scale(1.035); filter: brightness(.82); }
.ref-slider .ist-offen .aingel-ref-titel, .ref-slider .aingel-ref-karte:focus-visible .aingel-ref-titel { white-space: normal; }
.ref-slider .ist-offen .aingel-ref-text, .ref-slider .aingel-ref-karte:focus-visible .aingel-ref-text { max-height: 7em; opacity: 1; margin-top: 6px; }
.ref-slider .ist-offen .aingel-ref-leistungen, .ref-slider .aingel-ref-karte:focus-visible .aingel-ref-leistungen { max-height: 5em; opacity: 1; margin-top: 8px; }
.ref-slider .ist-offen .aingel-ref-inhalt, .ref-slider .aingel-ref-karte:focus-visible .aingel-ref-inhalt { background: color-mix(in srgb, var(--flaeche) 88%, transparent); }
.ref-slider .ist-offen .aingel-ref-inhalt::after, .ref-slider .aingel-ref-karte:focus-visible .aingel-ref-inhalt::after { transform: rotate(90deg); background-size: 12px 1.6px, 0 0; }
.ref-slider a.ist-offen::after, .ref-slider a.aingel-ref-karte:focus-visible::after { opacity: 1; transform: none; }
.ref-slider .aingel-ref-karte:focus-visible { outline: 2px solid var(--code); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .ref-slider .aingel-ref-karte:hover { border-color: color-mix(in srgb, var(--rolle, var(--code)) 50%, var(--linie)); }
  .ref-slider .aingel-ref-karte:hover .aingel-ref-bild { transform: scale(1.035); filter: brightness(.82); }
  .ref-slider .aingel-ref-karte:hover .aingel-ref-titel { white-space: normal; }
  .ref-slider .aingel-ref-karte:hover .aingel-ref-text { max-height: 7em; opacity: 1; margin-top: 6px; }
  .ref-slider .aingel-ref-karte:hover .aingel-ref-leistungen { max-height: 5em; opacity: 1; margin-top: 8px; }
  .ref-slider .aingel-ref-karte:hover .aingel-ref-inhalt { background: color-mix(in srgb, var(--flaeche) 88%, transparent); }
  .ref-slider .aingel-ref-karte:hover .aingel-ref-inhalt::after { transform: rotate(90deg); background-size: 12px 1.6px, 0 0; }
  .ref-slider a.aingel-ref-karte:hover::after { opacity: 1; transform: none; }
  .ref-slider .aingel-ref-raster { cursor: grab; }
}

/* ---------- Unter der Reihe: der Fortschritt und der Link zur Referenzseite ---------- */
.ref-fuss { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; }
.ref-fuss .weiter { margin-top: 0; flex: none; }
.ref-fortschritt { position: relative; flex: 0 1 220px; height: 2px; border-radius: var(--r-pille); background: var(--linie); overflow: hidden; }
.ref-fortschritt i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--anteil, .3) * 100%); border-radius: inherit; background: var(--rolle, var(--code)); transform: translateX(calc(var(--stand, 0) * (100% / var(--anteil, .3) - 100%))); transition: transform .15s linear; }

@media (max-width: 760px) {
  .ref-slider { --ref-b: 84vw; }
  .ref-slider .aingel-ref-raster { gap: 12px; }
  .ref-steuerung { display: none; }
  .ref-slider .aingel-ref-inhalt { left: 8px; right: 8px; bottom: 8px; padding: 10px 14px 11px; }
  .ref-fortschritt { flex-basis: 120px; }
}