/* Bilderflug 23.10.2026 – eigene Sektion zwischen „01 Der Abend" und „02 Der erste Abend" (Präfix fl-)
   Ohne JS, ohne GSAP und bei prefers-reduced-motion: ein ruhiges Raster, der Satz steht auf dem letzten Bild.
   Mit Bewegung (.fl-an, von flug.js gesetzt): eine gepinnte Bühne. Die Bilder kommen aus der Tiefe auf den
   Betrachter zu und ziehen an den Rändern vorbei; zuletzt öffnet sich ein Bild zum Vollbild mit dem Satz.
   Jedes Bild ist in seiner größten Darstellung gesetzt und wird nur verkleinert – so bleibt es scharf. */

.flug{position:relative;background:radial-gradient(80% 70% at 50% 46%,#22322a 0%,var(--gruen) 45%,var(--nacht) 100%);color:var(--papier);overflow:hidden}
.fl-buehne{position:relative;padding:14vh var(--rand) 12vh}
.fl-kopf{text-align:center;max-width:1100px;margin:0 auto 9vh}
.fl-klein{display:inline-flex;align-items:center;gap:16px;margin:0;opacity:.82}
.fl-klein:before,.fl-klein:after{content:"";width:40px;height:1px;background:var(--kupfer)}
.fl-titel{font-weight:400;font-size:clamp(44px,6vw,108px);line-height:1.02;letter-spacing:-.018em;margin:3.2vh 0 0}
.fl-titel em{opacity:.62}
.fl-feld{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.fl-b{margin:0;overflow:hidden;background:var(--nacht)}
.fl-b{aspect-ratio:4/5}
.fl-b:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.fl-b img{display:block;width:100%;height:100%;object-fit:cover}
.fl-voll{position:relative;margin:clamp(40px,8vh,90px) 0 0;overflow:hidden;background:var(--nacht)}
.fl-voll img{display:block;width:100%;height:auto}
.fl-voll:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(62% 58% at 84% 16%,rgba(18,26,22,.9) 0,rgba(18,26,22,.72) 45%,rgba(18,26,22,0) 100%),linear-gradient(180deg,rgba(18,26,22,.5) 0,rgba(18,26,22,0) 40%)}
.fl-satz{position:absolute;right:clamp(28px,5vw,96px);top:clamp(70px,12vh,140px);z-index:2;width:min(41vw,760px);margin:0}
.fl-satz-t{display:block;font-weight:400;font-size:clamp(30px,3.25vw,62px);line-height:1.08;letter-spacing:-.012em}
.fl-satz-t em{opacity:.66}
.fl-satz-t>span{display:block}
.fl-satz-u{display:flex;align-items:center;gap:14px;margin-top:3.4vh;opacity:.8}
.fl-satz-u:before{content:"";width:40px;height:1px;background:var(--kupfer);flex:none}
.fl-lauf{display:none}

@media (max-width:820px){
 .fl-buehne{padding:11vh var(--rand) 9vh}
 .fl-feld{grid-template-columns:repeat(2,1fr)}
 .fl-titel{font-size:clamp(40px,11vw,62px)}
 .fl-voll:after{background:linear-gradient(180deg,rgba(18,26,22,.92) 0,rgba(18,26,22,.7) 30%,rgba(18,26,22,0) 56%)}
 .fl-satz{left:var(--rand);right:var(--rand);top:clamp(46px,9vh,90px);width:auto}
 .fl-satz-t{font-size:clamp(32px,9.2vw,50px)}
}

/* ============ Bewegung ============ */
.fl-an .flug{height:100vh;height:100svh}
.fl-an .fl-buehne{position:absolute;inset:0;padding:0;overflow:hidden;perspective:none}
.fl-an .fl-kopf{position:absolute;left:50%;top:50%;width:min(92vw,1200px);margin:0;transform:translate(-50%,-50%);z-index:60;pointer-events:none}
.fl-an .fl-feld{display:block;position:absolute;inset:0}
.fl-an .fl-b,.fl-an .fl-b:first-child{aspect-ratio:auto;position:absolute;left:0;top:0;width:calc(var(--w) * var(--smax) * 1vw);visibility:hidden;transform-origin:50% 50%;will-change:transform,opacity;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.75)}
.fl-an .fl-b:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(239,233,223,.06)}
.fl-an .fl-voll{position:absolute;inset:0;margin:0;z-index:50;visibility:hidden;background:none;will-change:clip-path}
.fl-an .fl-voll picture,.fl-an .fl-voll img{width:100%;height:100%}
.fl-an .fl-b img{height:auto;object-fit:fill}
.fl-an .fl-voll img{object-fit:cover;object-position:30% 50%;will-change:transform;transform-origin:30% 78%}
.fl-an .fl-voll:after{opacity:var(--schleier,0)}
.fl-an .fl-satz{z-index:3;opacity:0}
.fl-an .fl-satz-t>span{display:block}
.fl-an .fl-lauf{display:block;position:absolute;left:var(--rand);right:var(--rand);bottom:30px;height:1px;background:rgba(239,233,223,.14);z-index:70}
.fl-an .fl-lauf i{position:absolute;inset:0;background:var(--kupfer);transform-origin:0 50%;transform:scaleX(0)}

@media (max-width:820px){
 .fl-an .fl-kopf{top:44%}
 .fl-an .fl-voll img{object-position:50% 50%;transform-origin:50% 70%}
 .fl-an .fl-lauf{bottom:calc(22px + env(safe-area-inset-bottom))}
}