/* ==========================================================================
   Referenzen als Bühne (Entscheid 17.10.2026, Variante B), seit 18.10.2026 durch Scrollen gesteuert. Nur der Abschnitt #beispiele
   der Startseite, lädt nach premium.css. Ein grosser Markenrahmen wie in der Szene, daneben das Verzeichnis als Messanzeige.
   Liste (ohne Skript, reduzierte Bewegung, zu kleines Fenster): alle vier untereinander. Bühne (Desktop, seit 18.10.2026 auch Handy
   und Tablet): referenzen.js setzt .ref-b--an, hält die Bühne in der Spur fest (sticky) und schaltet die Arbeiten beim Scrollen um.
   Bewegt werden nur opacity und transform. Klassen mit Präfix ref-b, damit nichts aus szene.css oder premium.css greift.
   ========================================================================== */

.ref-b { container-type: inline-size; }                 /* Masse der Bühne in cqw: ohne Bildlaufleiste gerechnet */
.ref-b__buehne, .ref-b__spur { position: relative; z-index: 1; }      /* über dem Messraster (raster.js setzt die Leinwand als erstes Kind) */
/* Spur: so hoch wie die Bühne plus der Scrollweg der vier Arbeiten (setzt referenzen.js); die Bühne bleibt darin stehen */
.ref-b__spur--an > .ref-b--an { position: sticky; top: var(--ref-oben, 88px); }
.ref-b__verzeichnis[hidden] { display: none; }

/* ---------- Die Arbeit: Name, Rahmen, Text (ohne Skript untereinander) ---------- */
.ref-b__arbeiten { display: grid; row-gap: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--rand); }
.ref-b__arbeit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: 32px; align-items: end; }
.ref-b__rahmen { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.ref-b__kopf { grid-column: 9 / -1; grid-row: 1; }
.ref-b__text { grid-column: 9 / -1; grid-row: 2; }
.ref-b__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.85rem, 1.5rem + 1vw, 2.3rem); line-height: 1; letter-spacing: -0.01em; color: #fff; }
.ref-b__art { font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); margin-top: 0.55rem; }
.ref-b__satz { font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.78); margin-top: 0.9rem; max-width: 30em; text-wrap: pretty; }
.ref-b__text .textlink { margin-top: 1.2rem; color: #fff; }

/* Fenster: die Seite oben angeschlagen */
.ref-b__seite { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform: translateY(0); transition: transform 0.9s var(--ease); }

@media (max-width: 900px) {
    .ref-b__arbeit { display: flex; flex-direction: column; align-items: stretch; }
    .ref-b__kopf { order: 2; margin-top: 1.5rem; }
    .ref-b__text { order: 3; }
}

/* ==========================================================================
   Bühne (mit Skript): ein Rahmen sichtbar, die anderen Arbeiten liegen unsichtbar und inert in derselben Rasterzelle.
   Die Arbeiten sind Teilraster (subgrid) der Bühne: Rahmen, Verzeichnis und Text teilen sich dieselben Zeilen.
   ========================================================================== */
.ref-b--an { --ref-einzug: 34px; }
.ref-b--an .ref-b__arbeiten { display: contents; }
.ref-b--an .ref-b__arbeit { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; gap: normal; align-items: stretch; pointer-events: none; }   /* gap normal: Abstände der Bühne übernehmen */
.ref-b--an .ref-b__arbeit > * { pointer-events: auto; }
.ref-b--an .ref-b__arbeit:not(.ist-aktiv) { visibility: hidden; }
.ref-b--an .ref-b__rahmen { align-self: start; }
.ref-b--an .ref-b__text { padding-left: var(--ref-einzug); }
.ref-b--an .ref-b__satz { margin-top: 0; }
/* Name und Art stehen sichtbar im Verzeichnis; in der Arbeit bleiben sie als Überschrift für Screenreader */
.ref-b--an .ref-b__kopf { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Verzeichnis: vier Zeilen mit Haarlinien, Messpunkte auf einer Linie ---------- */
.ref-b__verzeichnis { position: relative; display: flex; flex-direction: column; }
.ref-b__zeile {
    position: relative; flex: 1 1 0; min-height: 64px; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem;
    width: 100%; padding: 0.85rem 0 0.85rem var(--ref-einzug); text-align: left; color: inherit;
    background: linear-gradient(var(--linie-hell), var(--linie-hell)) var(--ref-einzug) 100% / calc(100% - var(--ref-einzug)) 1px no-repeat;
}
.ref-b__zname { position: relative; display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.15rem + 1vw, 2.25rem); line-height: 1.05; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.6); text-wrap: balance; transition: color 0.3s var(--ease); }
.ref-b__zart { display: block; font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.6); text-wrap: balance; transition: color 0.3s var(--ease); }
.ref-b__zeile:last-child { background: none; }   /* Haarlinien nur zwischen den Zeilen, nicht über der ersten und unter der letzten (Wunsch 18.10.) */
@media (hover: hover) { .ref-b__zeile:hover .ref-b__zname { color: rgba(255, 255, 255, 0.88); } }
.ref-b__zeile[aria-selected="true"] .ref-b__zname { color: #fff; }
.ref-b__zeile[aria-selected="true"] .ref-b__zart { color: rgba(255, 255, 255, 0.76); }

/* Messpunkt: offen ein heller Ring, gemessen ein Lime-Ring (wie die Messpunkte im Hero), gewählt die volle Lime-Marke */
.ref-b__punkt { position: absolute; left: calc(-1 * var(--ref-einzug)); top: 0.525em; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--navy); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.42); transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ref-b__zeile.ist-gemessen .ref-b__punkt { box-shadow: inset 0 0 0 2px var(--lime); }
.ref-b__zeile[aria-selected="true"] .ref-b__punkt { background: var(--lime); box-shadow: 0 0 0 3px var(--navy); }

/* Messlinie: Haarlinie von Messpunkt zu Messpunkt, Lime füllt bis zur gewählten Arbeit (Lage per JS in px) */
.ref-b__linie { position: absolute; left: 5px; top: 0; height: 0; width: 1px; background: rgba(255, 255, 255, 0.2); pointer-events: none; }
.ref-b__linie i { position: absolute; left: -0.5px; top: 0; width: 2px; height: 100%; background: var(--lime); transform: scaleY(0); transform-origin: 50% 0; }


/* ---------- Wechsel «Ausschalten, Einschalten» wie im Hero: das Fenster wird Navy, dann schaltet die neue Seite ein.
   Die Adresse tauscht hart wie in einem echten Browser; der Text unter dem Rahmen blendet mit ---------- */
.ref-b__fenster::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #0E223F; opacity: 0; pointer-events: none; transition: opacity 0.42s var(--ease); }
.ref-b--an .ref-b__text { transition: opacity 0.42s var(--ease); }
.ref-b__arbeit.ist-aus .ref-b__fenster::after { opacity: 1; transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1); }
.ref-b--an .ref-b__arbeit.ist-aus .ref-b__text { opacity: 0; transition: opacity 0.16s cubic-bezier(0.4, 0, 1, 1); }
.ref-b__arbeit.ist-erst .ref-b__fenster::after, .ref-b--an .ref-b__arbeit.ist-erst .ref-b__text { transition-duration: 0.9s; }
.ref-b--sofort, .ref-b--sofort *, .ref-b--sofort *::after { transition: none !important; }

/* Abwärtsfahren beim Zeigen (abgenommen 14.10.): erst nach echter Zeigerbewegung im Fenster (referenzen.js setzt .ist-faehrt) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .ref-b__arbeit.ist-faehrt .ref-b__seite { transform: translateY(-56%); transition: transform 7s cubic-bezier(0.45, 0, 0.4, 1); }
}

/* ---------- Desktop ab 1000 px: Verzeichnis auf der Titelachse, rechts der Rahmen so gross wie die Fläche erlaubt, darunter das Band ----------
   Fenster 16:10 wie der Rahmen der Szene: genau der erste Bildschirm der Live-Seite. Breiter als 1066 px wird es nie (1600 Quellpixel / 1,5). */
@media (min-width: 1000px) {
    .ref-b--an {
        --ref-links: max(var(--rand), calc((100cqw - var(--wrap)) / 2 + var(--rand)));   /* Titelachse der Seite */
        --ref-iw: clamp(270px, 19.5cqw, 360px);
        --ref-gap: clamp(32px, 3cqw, 56px);
        --ref-band: 96px;                                                                 /* Band unter dem Rahmen samt Abstand */
        --ref-bw: calc(100cqw - var(--ref-links) - var(--ref-iw) - var(--ref-gap) - var(--rand));
        --ref-bh: max(340px, calc(100svh - 72px - 40px - var(--ref-band) - 64px));        /* Leiste, Rahmenleiste, Band, Luft 2 × 32 */
        --ref-w: min(var(--ref-bw), calc(var(--ref-bh) * 1.6), 1066px);
        display: grid; grid-template-columns: var(--ref-iw) var(--ref-w); grid-template-rows: auto auto; column-gap: var(--ref-gap);
        width: calc(var(--ref-iw) + var(--ref-gap) + var(--ref-w)); margin-left: var(--ref-links);
    }
    .ref-b--an .ref-b__verzeichnis { grid-column: 1; grid-row: 1; }
    .ref-b--an .ref-b__rahmen { grid-column: 2; grid-row: 1; }
    /* Derselbe Rahmen wie in der Szene: Leiste 40 px, Radius 14 */
    .ref-b--an .ref-b__rahmen, .ref-b--an .ref-b__rahmen::after { border-radius: 14px; }
    .ref-b--an .rahmen__leiste { height: 40px; grid-template-columns: 64px minmax(0, 1fr) 64px; padding: 0 14px; }
    .ref-b--an .rahmen__punkte i { width: 10px; height: 10px; }
    .ref-b--an .rahmen__adresse { width: min(100%, 380px); padding: 5px 12px; font-size: 12px; }
    .ref-b--an .ref-b__fenster { aspect-ratio: 16 / 10; }
    /* Band: ein Satz (was die Firma anbietet und wofür sie steht) und der Link, oben eine Haarlinie (Wunsch 18.10.: nur ein Satz) */
    .ref-b--an .ref-b__text {
        grid-column: 2; grid-row: 2; align-self: start; display: grid; grid-template-columns: minmax(0, 1fr) max-content; column-gap: 48px;
        margin-top: 20px; padding: 16px 0 0; border-top: 1px solid var(--linie-hell);
    }
    .ref-b--an .ref-b__satz { max-width: 62ch; font-size: 1.0625rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); text-wrap: pretty; }
    .ref-b--an .ref-b__text .textlink { margin-top: 0; align-self: start; white-space: nowrap; }
    .ref-b--an .ref-b__zname { font-size: min(2.25rem, calc((var(--ref-iw) - var(--ref-einzug)) / 8.1)); line-height: 1.04; }   /* der längste Name bleibt einzeilig */
}

/* ---------- Schmaler: Rahmen oben, darunter Verzeichnis und Text ---------- */
@media (max-width: 999px) {
    .ref-b--an { --ref-einzug: 30px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--rand); }
    .ref-b--an .ref-b__rahmen { grid-column: 1; grid-row: 1; }
    .ref-b--an .ref-b__verzeichnis { grid-column: 1; grid-row: 2; margin-top: 1.5rem; }
    .ref-b--an .ref-b__text { grid-column: 1; grid-row: 3; margin-top: 0.9rem; }
    .ref-b--an .ref-b__satz { display: none; }   /* Tablet: Rahmen, Verzeichnis, Link */
    .ref-b--an .ref-b__zeile { flex: none; min-height: 60px; padding-block: 0.7rem; }
    .ref-b--an .ref-b__zname { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem); }
    .ref-b--an .ref-b__fenster { width: 100%; aspect-ratio: 16 / 10; max-height: calc(100svh - 330px); min-height: 240px; }   /* wie am Desktop: genau der erste Bildschirm */
}
/* Handy: Hochformat mit den Handy-Aufnahmen (390 × 664 bei DPR 3: der erste Bildschirm, wie ihn ein iPhone mit eingeblendeten
   Safari-Leisten zeigt). In der Liste je Arbeit ein Rahmen, darunter Name und Text.
   Bühne (fest seit 18.10.2026): wie am Desktop links das Verzeichnis, rechts der Rahmen, darunter Satz und Link über die ganze Breite.
   Die Rahmenbreite folgt der kleinen Fensterhöhe (svh), damit alles auch bei eingeblendeten Safari-Leisten unter die Leiste passt
   (iPhone SE 375 × 548 bis Pro Max 430 × 739); unter 150 px Rahmenbreite nimmt referenzen.js die Liste. */
@media (max-width: 640px) {
    .ref-b__buehne:not(.ref-b--an) .ref-b__rahmen { align-self: center; width: min(100%, 300px); }
    .ref-b__buehne:not(.ref-b--an) .ref-b__fenster { aspect-ratio: 390 / 664; }
    .ref-b__buehne:not(.ref-b--an) .ref-b__kopf { margin-top: 1.25rem; }
    .ref-b--an {
        --ref-einzug: 22px;
        --ref-rw: clamp(150px, calc((100svh - 280px) * 0.5873), 60%);   /* Näherung; referenzen.js rechnet die Breite genau aus der freien Höhe */
        grid-template-columns: minmax(0, 1fr) var(--ref-rw); grid-template-rows: auto auto; column-gap: 16px;
    }
    .ref-b--an .ref-b__verzeichnis { grid-column: 1; grid-row: 1; margin-top: 0; }
    .ref-b--an .ref-b__rahmen { grid-column: 2; grid-row: 1; justify-self: stretch; }
    .ref-b--an .ref-b__fenster { aspect-ratio: 390 / 664; min-height: 0; max-height: none; }
    /* Im Handy-Browser gibt es keine Fensterknöpfe: die Adresse bekommt die ganze Leiste */
    .ref-b--an .rahmen__leiste { grid-template-columns: minmax(0, 1fr); }
    .ref-b--an .rahmen__punkte { display: none; }
    .ref-b--an .rahmen__adresse { width: 100%; }
    .ref-b--an .rahmen__pfad { display: none; }   /* nur die Domain, wie der Handy-Browser sie zeigt */
    .ref-b--an .ref-b__zeile { flex: 1 1 0; min-height: 48px; padding-block: 0.45rem; gap: 0; }
    .ref-b--an .ref-b__zname { font-size: clamp(1.15rem, 0.6rem + 3vw, 1.45rem); line-height: 1.08; }
    /* Die Art bleibt im Namen des Tabs (Screenreader), sichtbar sagt es der Satz unter dem Rahmen */
    .ref-b--an .ref-b__zart { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .ref-b--an .ref-b__text { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; padding: 0.8rem 0 0; border-top: 1px solid var(--linie-hell); }
    .ref-b--an .ref-b__satz { display: block; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.86); max-width: none; }
    .ref-b--an .ref-b__text .textlink { margin-top: 0.6rem; font-size: 0.9375rem; }   /* Satz und Link gleich gross (Wunsch 18.10.) */
}