/* galerie: Blaettern mit Doppelbelichtung, 1:1 aus dem ausgelieferten Late Summer Update
   (VERMILION-Showcase/vorschau/index.html, CSS Zeilen 23-60 und 150-175). Einziger Unterschied:
   die Zustaende haengen an der Wurzel .galerie statt an body, damit dieselbe Mechanik im
   Showcase UND im Fenster der Bereichsseiten laeuft. Haengt an tokens.css. */
.galerie{position:relative;width:100%;height:100%;overflow:hidden;background:var(--grund);--auf:30%}
.galerie .buehne{position:absolute;inset:0;overflow:hidden;background:var(--grund)}
.galerie .tafel{position:absolute;inset:0;opacity:0;pointer-events:none;background:var(--grund)}
.galerie.mit-effekt .tafel.active{background:transparent}
.galerie .tafel.active{opacity:1;pointer-events:auto;z-index:3}
.galerie.mit-effekt.rechts .tafel.next{opacity:1;z-index:2}
.galerie.mit-effekt.links  .tafel.prev{opacity:1;z-index:2}
.galerie .blatt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  /* Blatt so gross wie moeglich (Chris, 26.09.2026): oben und unten nur Rand + Schriftzeile + 16 px,
     damit keine Beschriftung das Blatt beruehrt; seitlich der Rand. Groesser als im Late Summer Update. */
  padding:calc(var(--rand) + var(--t-klein) + 16px) var(--rand)}
.galerie .stapel{position:relative;aspect-ratio:var(--ar);height:100%;width:auto;max-width:100%}
.galerie .stapel img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.galerie .stapel video,.galerie .stapel .bewegt{position:absolute}
.galerie .stapel .bewegt{z-index:1}
.galerie .stapel > video:only-child{inset:0;width:100%;height:100%;object-fit:contain}
.galerie .tafel.active .blatt .stapel{
  mask:linear-gradient(90deg,transparent 0%,#000 var(--lm,0%),#000 var(--rm,100%),transparent 100%);
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 var(--lm,0%),#000 var(--rm,100%),transparent 100%);
  transition:mask .55s cubic-bezier(.22,1,.36,1),-webkit-mask .55s cubic-bezier(.22,1,.36,1)}
.galerie.rechts.mit-effekt .tafel.active .blatt .stapel{--rm:calc(100% - var(--auf))}
.galerie.links.mit-effekt  .tafel.active .blatt .stapel{--lm:var(--auf)}

/* Kopf und Fuss: wie im Showcase, nur innerhalb der Wurzel */
.galerie .kopf,.galerie .fuss{position:absolute;left:var(--rand);right:var(--rand);z-index:12;
  display:flex;justify-content:space-between;align-items:baseline;pointer-events:none}
.galerie .kopf{top:var(--rand)} .galerie .fuss{bottom:var(--rand)}
.galerie .kopf > *,.galerie .fuss > *{pointer-events:auto}
.galerie .kopf .mitte,.galerie .fuss .mitte{position:absolute;left:var(--mitte);white-space:nowrap}
/* Streckentitel unten in der Uhr-Spalte (Chris, 29.10.2026), statt Kennung und Ghost Numeral oben rechts */
.galerie .fuss .streckentitel{transition:opacity .3s ease}
.galerie .kennung{display:none}
.galerie .fuss .rechts{display:flex;gap:clamp(14px,1.6vw,30px)}
.galerie .zaehler{font-variant-numeric:tabular-nums}

/* Kennung: Strecke ueber dem Ghost Numeral (Showcase Z. 90-101) */
.galerie .kennung{position:absolute;top:var(--rand);right:var(--rand);z-index:11;text-align:right;
  pointer-events:none;opacity:0;transition:opacity .4s ease}
.galerie .tafel.active .kennung{opacity:1}
.galerie .kennung .ghostnum{position:absolute;top:-.14em;right:-.03em;z-index:-1;
  font-family:var(--schrift);font-weight:700;font-family:var(--schrift-display);word-spacing:.145em;font-size:clamp(84px,8.8vw,158px);line-height:calc(.72 * var(--lh-faktor));letter-spacing:var(--sperrung-display);-webkit-text-stroke:var(--strich) currentColor;
  color:#E3E3E3;font-variant-numeric:tabular-nums;white-space:nowrap}
.galerie .kennung .titel,.galerie .kennung .kunde{position:relative;z-index:2;display:block}
.galerie .kennung .kunde{margin-top:4px;color:var(--leise)}
.galerie .kennung .kunde:empty{display:none}

/* Kassettentasten */
.galerie .zone{position:absolute;top:50%;z-index:15;transform:translateY(-50%);opacity:0;
  transition:opacity .3s ease;pointer-events:none;color:var(--tinte);display:flex;align-items:center}
.galerie .z-l{left:var(--rand)} .galerie .z-r{right:var(--rand)}
.galerie .taste{height:calc(var(--marke) * .86);width:auto;display:block}
.galerie.links.kann-zurueck .z-l{opacity:1}
.galerie.rechts.kann-vor .z-r{opacity:1}
.galerie.rechts{cursor:e-resize} .galerie.links{cursor:w-resize}

/* INDEX */
.galerie .index{position:absolute;inset:0;z-index:40;background:var(--grund);
  padding:calc(var(--rand) * 2.6) var(--rand) var(--rand);display:none;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(12px,1.6vw,26px);align-content:start;overflow-y:auto}
.galerie .index.offen{display:grid}
.galerie .index figure{cursor:pointer;margin:0}
.galerie .index img{width:100%;height:auto;display:block;transition:opacity .25s ease}
.galerie .index figure:hover img{opacity:.5}
.galerie .index figcaption{margin-top:6px;color:var(--leise)}
@media (max-width:900px){.galerie .zone{display:none}}
/* Die Blaetter des Late Summer Update liegen auf reinweissem Papier (255). Auf dem Off-White-Grund (251)
   stuenden sie als hellere Rechtecke ab. brightness(251/255) macht ihr Papier genau zum Grund und dunkelt
   alles andere um 1,6 % ab - unsichtbar, ohne die Dateien des Showcase anzufassen. */
.galerie .tafel img,.galerie .tafel video{filter:brightness(.98431)}