/* fein-mitte.css – Veredelung der Seitenmitte (Kreise, 01 Der Abend, Durchflug, 02 Die Gänge, 03 In Bildern).
   Eigenständig neben vorlage.html und seite.js. Zusammen mit fein-mitte.js; ohne JS bleibt alles ruhig sichtbar.
   Kupfer nur als feine Linie. */

/* ---------- Kapitelziffern als Gestaltung: große Mediävalziffer, nur Haarlinien-Kontur ---------- */
.gaenge .vor{position:relative}
.fm-ziffer{position:absolute;z-index:-1;pointer-events:none;user-select:none;font-family:G,Garamond,serif;font-style:italic;font-weight:400;
  font-size:clamp(200px,24vw,420px);line-height:.8;letter-spacing:-.04em;font-variant-numeric:oldstyle-nums proportional-nums;
  color:transparent;-webkit-text-stroke:1px rgba(30,43,36,.2);will-change:transform}
.haltung>.fm-ziffer{right:var(--rand);top:calc(var(--luft) * .55)}
.gaenge .vor>.fm-ziffer{left:calc(var(--rand) + 25%);top:calc(var(--luft) * .35)}
.galerie>.fm-ziffer{right:var(--rand);top:calc(var(--luft) * .45)}
.haltung,.gaenge .vor,.galerie{isolation:isolate}

/* ---------- Lot: Kupferlinie verbindet die Sektionskante mit der Kapitelmarke ---------- */
.fm-lot{position:absolute;z-index:1;left:calc(var(--rand) + 6px);top:0;width:1px;height:calc(var(--luft) - 26px);background:var(--kupfer);transform-origin:50% 0;transform:scaleY(var(--fm-l,1));pointer-events:none}

/* ---------- Bilder: sanftes Heranfahren, Lichtkante, Passepartout-Linie ---------- */
.gaenge .sig-r img,.galerie .gal-r img{transition:scale 1.8s var(--ease),filter .9s var(--ease)}
.bildblock .rahmen img{transition:scale 2s var(--ease)}
.gaenge .sig-r:hover img,.galerie .gal-b:hover .gal-r img,.galerie .gal-b:focus-visible .gal-r img{scale:1.045}
.bildblock .rahmen:hover img{scale:1.03}
.galerie .gal-b:hover img{filter:brightness(1.03) saturate(1.02)}
.sig-r:after,.gal-r:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,248,236,0) 38%,rgba(255,248,236,.15) 49%,rgba(255,248,236,.04) 54%,rgba(255,248,236,0) 62%);
  background-size:260% 100%;background-repeat:no-repeat;background-position:var(--fm-lx,130%) 0;opacity:0;
  transition:background-position 1.8s var(--ease),opacity .9s var(--ease)}
.sig-r:before,.gal-r:before{content:"";position:absolute;z-index:2;inset:12px;pointer-events:none;border:1px solid rgba(239,233,223,.55);opacity:0;
  transition:opacity .9s var(--ease),inset 1.2s var(--ease)}
.gaenge .sig-r:hover:after,.galerie .gal-b:hover .gal-r:after,.galerie .gal-b:focus-visible .gal-r:after{opacity:1}
.gaenge .sig-r:hover{--fm-lx:-30%}
.galerie .gal-b:hover .gal-r:not([style*="--fm-lx"]){--fm-lx:-30%}
.gaenge .sig-r:hover:before,.galerie .gal-b:hover .gal-r:before,.galerie .gal-b:focus-visible .gal-r:before{opacity:1;inset:18px}
.galerie .gal-b:focus-visible{outline:0}
.galerie .gal-b:focus-visible .gal-r{outline:1px solid var(--tinte);outline-offset:6px}

/* ---------- Bildunterschriften setzen sich beim Erreichen ---------- */
.fm .gal-f figcaption .mikro,.fm .bildblock .unterschrift{letter-spacing:.46em;transition:letter-spacing 2s var(--ease),opacity 1.2s var(--ease)}
.fm .gal-f figcaption.fm-gesetzt .mikro,.fm .bildblock .unterschrift.fm-gesetzt{letter-spacing:.24em}
.gal-f figcaption .gal-nr:after{content:"";display:inline-block;width:26px;height:1px;margin:0 0 0 12px;vertical-align:.32em;background:var(--kupfer);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.5s var(--ease) .2s}
.gal-f figcaption.fm-gesetzt .gal-nr:after,html:not(.fm) .gal-f figcaption .gal-nr:after{transform:scaleX(1)}
.bildblock .unterschrift:before{transform-origin:0 50%;transition:transform 1.5s var(--ease) .2s}
.fm .bildblock .unterschrift:not(.fm-gesetzt):before{transform:scaleX(0)}

/* ---------- Kreise: Haarlinienring zeichnet sich beim Darüberfahren ---------- */
.fm-ring{position:absolute;z-index:2;left:-14px;top:-14px;width:calc(var(--d) + 28px);height:calc(var(--d) + 28px);overflow:visible;pointer-events:none;transform:rotate(-90deg)}
.fm-ring circle{fill:none;stroke:var(--tinte);stroke-opacity:.45;stroke-width:.24;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.6s var(--ease),opacity .4s var(--ease)}
.kreis:hover .fm-ring circle,.kreis:focus-visible .fm-ring circle{stroke-dashoffset:0;opacity:1}

/* ---------- Durchflug: beim Flug durch die Schrift bleibt nur die feine Kontur ---------- */
.sz1.sz1-an .sz1-titel{text-shadow:0 2px 30px rgba(10,14,12,calc(.35 * var(--fm-f,1)))}
.sz1.sz1-an .sz1-titel h2{color:rgba(239,233,223,var(--fm-f,1));-webkit-text-stroke:var(--fm-w,0px) rgba(239,233,223,.9)}

/* ---------- Zeiger: ruhiges „Ansehen“ über den Galeriebildern ---------- */
.zeiger.an.wort.fm-sehen i{transform:scale(1);width:96px;height:96px;left:-48px;top:-48px}
.zeiger.fm-sehen b{font-size:9px}

/* ---------- Galerie: Tiefe beim Neigen ---------- */
.galerie .gal-b{perspective:1400px}
.galerie .gal-r{transform-style:flat}

@media (max-width:820px){
 .fm-ziffer{font-size:clamp(150px,44vw,220px);-webkit-text-stroke:1px rgba(30,43,36,.16)}
 .haltung>.fm-ziffer{right:var(--rand);top:calc(var(--luft) * .3)}
 .gaenge .vor>.fm-ziffer{left:auto;right:var(--rand);top:auto;bottom:calc(var(--luft) * .2)}
 .galerie>.fm-ziffer{right:var(--rand);top:calc(var(--luft) * .3)}
 .fm-lot{left:calc(var(--rand) + 5px)}
 .fm .gal-f figcaption .mikro,.fm .bildblock .unterschrift{letter-spacing:.34em}
 .fm .gal-f figcaption.fm-gesetzt .mikro,.fm .bildblock .unterschrift.fm-gesetzt{letter-spacing:.2em}
 .sig-r:before,.gal-r:before{inset:8px}
}
@media (hover:none){.sig-r:before,.gal-r:before,.sig-r:after,.gal-r:after{display:none}}
@media (prefers-reduced-motion:reduce){
 .gaenge .sig-r img,.galerie .gal-r img,.bildblock .rahmen img{transition:none}
 .gaenge .sig-r:hover img,.galerie .gal-b:hover .gal-r img,.bildblock .rahmen:hover img{scale:1}
 .sig-r:after,.gal-r:after,.sig-r:before,.gal-r:before,.fm-ring circle,.gal-f figcaption .gal-nr:after{transition:none}
 .fm .gal-f figcaption .mikro,.fm .bildblock .unterschrift{transition:none}
 .fm-lot{transform:none}
}