/* Arbeitsband (28.10.2026, Über uns): Ansichten der Cases als Laufband. Die Bänder bewegt quelle/arbeitsband.js über transform;
   ohne Skript oder bei reduzierter Bewegung stehen sie still (reihen lassen sich dann waagerecht wischen). */
.ab { position: relative; overflow: hidden; --ab-luft: 12px; }
.ab-spur { overflow: visible; }
.ab-band { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ab-luft); width: max-content; will-change: transform; }
.ab-band li { flex: none; }
.ab-bild { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: rgb(var(--hg2-k)); box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .13); text-decoration: none; }
.ab-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: scale .7s var(--aus), opacity .4s var(--aus); }
.ab-bild::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(var(--vg-k) / .13); pointer-events: none; transition: box-shadow .3s var(--aus); }
.ab-name { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: var(--radius); background: rgb(var(--hg-k) / .82); color: var(--sand);
           font: 500 13px/1 var(--schrift); opacity: 0; translate: 0 6px; transition: opacity .3s var(--aus), translate .3s var(--aus); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .ab-bild:hover img { scale: 1.035; }
  .ab-bild:hover::after { box-shadow: inset 0 0 0 1px var(--sonne); }
  .ab-bild:hover .ab-name { opacity: 1; translate: 0 0; }
}
.ab-bild:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.ab-bild:focus-visible .ab-name { opacity: 1; translate: 0 0; }

/* reihen: waagerecht, über die ganze Breite, an den Rändern ausgeblendet */
.ab-reihen .ab-flaeche { display: grid; gap: var(--ab-luft); }
.ab-reihen { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ab-reihen .ab-band li { width: clamp(260px, 18vw + 120px, 440px); }

/* saeulen: drei Spalten senkrecht, oben und unten ausgeblendet; die Höhe gibt der Rahmen vor */
.ab-saeulen .ab-flaeche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ab-luft); height: 100%; overflow: hidden; }
.ab-saeulen { height: 100%;
              -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.ab-saeulen .ab-band { flex-direction: column; width: 100%; }
.ab-saeulen .ab-spur:nth-child(2) { margin-top: -28%; }   /* versetzt, damit die Kanten nicht auf einer Linie stehen */

/* ebene: Reihen auf einer geneigten Fläche, die nach hinten wegläuft */
.ab-ebene { perspective: 1600px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
.ab-ebene .ab-flaeche { display: grid; gap: var(--ab-luft); width: 150%; margin-left: -25%; transform: rotateX(30deg) rotateZ(-8deg); transform-origin: 50% 40%; }
.ab-ebene .ab-band li { width: clamp(220px, 14vw + 100px, 360px); }

@media (prefers-reduced-motion: reduce) {
  .ab-reihen .ab-spur { overflow-x: auto; scrollbar-width: none; }
  .ab-bild img, .ab-name { transition: none; }
}

/* ---------- Heros mit dem Arbeitsband ---------- */
/* Über uns: Text links, rechts die Wand aus drei Spalten über die volle Höhe */
.uh { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); min-height: min(100svh, 980px);
      padding: 0 var(--rand); border-bottom: 1px solid var(--zl); }
.uh-text { align-self: center; padding: calc(var(--kopf) + 48px) 0 64px; }
.uh .lh-satz { max-width: 34ch; margin-left: 0; text-align: left; }
.uh .lh-handlung { justify-content: flex-start; }
.uh-wand { position: relative; height: min(100svh, 980px); padding-top: var(--kopf); }
@media (max-width: 860px) {
  .uh { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .uh-text { padding: calc(var(--kopf) + 40px) 0 8px; }
  .uh-wand { height: 72svh; padding-top: 0; margin: 0 calc(var(--rand) * -1); padding-bottom: 24px; }
}
/* Arbeiten: Titel mittig, darunter das Laufband als geneigte Fläche über die ganze Breite */
.uc { padding: calc(var(--kopf) + clamp(56px, 9vh, 112px)) 0 0; border-bottom: 1px solid var(--zl); text-align: center; }
.uc-text { padding: 0 var(--rand); }
.uc .lh-satz { margin-left: auto; margin-right: auto; }
.uc .lh-handlung { justify-content: center; }
.uc .ab-ebene { height: clamp(360px, 46svh, 560px); margin-top: clamp(24px, 4vh, 48px); }
/* Titel beider Heros: so groß wie auf /arbeiten; relative, damit die Pixel-Welle aus quelle/leistung.js am Titel sitzt (ohne lief sie oben
   rechts durchs Bild, Jonahs Bildschirmfoto vom 28.10.) */
:is(.uh, .uc) .lh-titel { position: relative; margin-top: 22px; font-size: clamp(52px, 12px + 6vw, 136px); line-height: .98; }
.uc .lh-titel { margin-left: auto; margin-right: auto; }
:is(.uh, .uc) .lh-satz { margin-top: clamp(18px, 2.4vh, 26px); }
:is(.uh, .uc) .lh-handlung { margin-top: clamp(24px, 3.4vh, 36px); }
/* Auftritt wie die übrigen Heros (case.css, branche.css): der Titel bleibt verborgen, bis quelle/leistung.js die Pixel-Welle startet; ohne
   das stand er während des Seitenwechsels schon da und verschwand dann kurz (28.10.) */
.js :is(.uh, .uc).da .lh-wort:not(.ganz) { clip-path: polygon(-10% -40%, -10% -40%, -10% 140%, -10% 140%); }
.js :is(.uh, .uc) .lh-wort { opacity: 0; }
.js :is(.uh, .uc).da .lh-wort { opacity: 1; }
.js :is(.uh, .uc) .lh-wort.auf { animation: lh-glut 1.2s cubic-bezier(.3, 0, .2, 1) both; }
.js :is(.uh, .uc) :is(.lh-etikett, .lh-satz, .lh-handlung) { opacity: 0; translate: 0 10px; }
.js :is(.uh, .uc).da :is(.lh-etikett, .lh-satz, .lh-handlung) { opacity: 1; translate: 0 0; transition: opacity .8s var(--aus) .35s, translate .8s var(--aus) .35s; }
@media (prefers-reduced-motion: reduce) {
  .js :is(.uh, .uc) .lh-wort, .js :is(.uh, .uc).da .lh-wort:not(.ganz), .js :is(.uh, .uc) :is(.lh-etikett, .lh-satz, .lh-handlung) { opacity: 1; translate: none; animation: none; clip-path: none; }
}