/* fr-szenen.css — Bildfolge zwischen Hero-Film und „Ausgewählte Projekterfahrung“ (13.10.2026).
   Drei großflächige Szenen, je ein Motiv, eine Aussage, ein Link. Die Szenen liegen beim normalen Scrollen wie Blätter
   übereinander (position:sticky): die nächste Szene schiebt sich ruhig über die vorige. Kein Scroll-Snapping, kein Slider. */
.fr-szenen{--fr-nav:0px;position:relative;background:#14120f;border-bottom:1px solid rgba(38,35,29,.14)}
.fr-szene{position:sticky;top:var(--fr-nav);height:calc(100vh - var(--fr-nav));height:calc(100svh - var(--fr-nav));min-height:460px;max-height:1100px;overflow:hidden;isolation:isolate;color:#fff;background:#14120f;box-shadow:0 -26px 56px rgba(10,9,7,.38)}
.fr-szene:first-child{box-shadow:none}
.fr-szene-bild{position:absolute;inset:0;display:block;margin:0}
/* weicher Übergang vom Hero (dunkler Ton) in die erste Szene: nur ein schmaler Verlauf am oberen Rand der ersten Szene */
.fr-szene-1::after{content:"";position:absolute;left:0;right:0;top:0;height:clamp(60px,12vh,130px);z-index:1;pointer-events:none;background:linear-gradient(180deg,#1A1812 0,rgba(26,24,18,.72) 38%,rgba(26,24,18,0) 100%)}
.fr-szene-bild img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:var(--bildpos,50% 50%)}
.fr-szene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--verlauf,none)}
.fr-szene-text{position:relative;z-index:2;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:var(--vert,flex-end);align-items:flex-start;text-align:left;
  padding:clamp(28px,6vh,72px) clamp(24px,6vw,112px) clamp(104px,15vh,160px)}
.fr-szene-in{max-width:min(var(--breite,34rem),100%)}
.fr-szene-h{margin:0;font-weight:650;letter-spacing:-.026em;line-height:1.05;font-size:clamp(32px,3.7vw,60px);text-wrap:balance;hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;color:inherit;text-shadow:0 1px 24px rgba(0,0,0,.28)}
.fr-szene-h .fr-szene-h2{display:block}
.fr-szene-satz{margin:16px 0 0;max-width:34ch;font-size:clamp(16.5px,1.4vw,21px);line-height:1.5;color:inherit;opacity:.94;text-shadow:0 1px 18px rgba(0,0,0,.3)}
.fr-szene-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:20px;padding:0 0 3px;color:inherit;text-decoration:none;font-size:clamp(15.5px,1.15vw,18px);font-weight:600;letter-spacing:.005em;border-bottom:1.5px solid rgba(255,255,255,.9);hyphens:none;text-shadow:0 1px 14px rgba(0,0,0,.3);transition:border-color .2s,gap .2s}
.fr-szene-link:hover{border-bottom-color:#E9A07F;gap:12px}
.fr-szene-link:focus-visible{outline:2px solid #fff;outline-offset:6px;border-bottom-color:transparent}

/* Einzelne Szenen: Textlage und Verlauf je nach Bild */
.fr-szene-1{--breite:31rem;--vert:flex-end;--bildpos:50% 50%;
  --verlauf:linear-gradient(90deg,rgba(8,7,5,.60) 0,rgba(8,7,5,.30) 36%,rgba(8,7,5,0) 60%),linear-gradient(0deg,rgba(8,7,5,.42) 0,rgba(8,7,5,0) 38%)}
.fr-szene-2{--breite:29rem;--vert:flex-end;--bildpos:50% 50%;
  --verlauf:linear-gradient(270deg,rgba(14,12,10,.74) 0,rgba(14,12,10,.52) 34%,rgba(14,12,10,0) 62%),linear-gradient(0deg,rgba(14,12,10,.40) 0,rgba(14,12,10,0) 36%)}
.fr-szene-2 .fr-szene-text{align-items:flex-end;text-align:left}
.fr-szene-2 .fr-szene-in{margin-left:auto}
.fr-szene-3{--breite:27rem;--vert:flex-end;--bildpos:50% 50%;
  --verlauf:linear-gradient(90deg,rgba(14,12,9,.66) 0,rgba(14,12,9,.40) 30%,rgba(14,12,9,0) 52%),linear-gradient(0deg,rgba(14,12,9,.42) 0,rgba(14,12,9,0) 36%)}

/* Einblenden beim Erscheinen (nur wenn Bewegung erlaubt ist und JavaScript läuft; ohne beides steht alles sofort sichtbar) */
@media (prefers-reduced-motion:no-preference){
  .fr-szenen.fr-szenen-anim .fr-szene-in>*{opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
  .fr-szenen.fr-szenen-anim .fr-szene-in>*:nth-child(2){transition-delay:.12s}
  .fr-szenen.fr-szenen-anim .fr-szene-in>*:nth-child(3){transition-delay:.24s}
  .fr-szenen.fr-szenen-anim .fr-szene-bild img{transform:scale(1.045);transition:transform 2.2s cubic-bezier(.2,.6,.2,1)}
  .fr-szenen.fr-szenen-anim .fr-szene.ist-da .fr-szene-in>*{opacity:1;transform:none}
  .fr-szenen.fr-szenen-anim .fr-szene.ist-da .fr-szene-bild img{transform:none}
}

/* Hochformat und Smartphones: Hochformat-Motive, Text unten auf dunklem Verlauf, Platz für Kontaktleiste (58 px) und Projektassistent */
@media (max-width:767px),(max-aspect-ratio:1/1){
  .fr-szene{max-height:none}
  .fr-szene-text{justify-content:flex-end;align-items:flex-start;padding:24px 22px calc(150px + env(safe-area-inset-bottom,0px))}
  .fr-szene-2 .fr-szene-text{align-items:flex-start}
  .fr-szene-2 .fr-szene-in{margin-left:0}
  .fr-szene-in{max-width:100%}
  .fr-szene-h{font-size:clamp(29px,8.4vw,42px);line-height:1.07}
  .fr-szene-satz{max-width:30ch;font-size:16.5px;margin-top:12px}
  .fr-szene-link{margin-top:14px;font-size:16px}
  .fr-szene-1{--bildpos:50% 30%;--verlauf:linear-gradient(0deg,rgba(8,7,5,.86) 0,rgba(8,7,5,.62) 34%,rgba(8,7,5,.12) 62%,rgba(8,7,5,0) 78%)}
  .fr-szene-2{--bildpos:50% 40%;--verlauf:linear-gradient(0deg,rgba(14,12,10,.88) 0,rgba(14,12,10,.64) 36%,rgba(14,12,10,.12) 64%,rgba(14,12,10,0) 80%)}
  .fr-szene-3{--bildpos:50% 35%;--verlauf:linear-gradient(0deg,rgba(14,12,9,.90) 0,rgba(14,12,9,.68) 38%,rgba(14,12,9,.14) 66%,rgba(14,12,9,0) 82%)}
}
/* Niedrige Fenster (Querformat-Smartphones): Szene wächst mit dem Text statt ihn abzuschneiden */
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .fr-szene{height:auto;min-height:calc(100svh - var(--fr-nav))}
  .fr-szene-text{padding-bottom:84px}
  .fr-szene-h{font-size:clamp(24px,3.4vw,34px)}
  .fr-szene-satz{margin-top:8px;font-size:15px}
  .fr-szene-link{margin-top:6px}
}
@media (min-width:1900px){.fr-szene-text{padding-left:max(112px,calc((100vw - 1700px)/2));padding-right:max(112px,calc((100vw - 1700px)/2))}}
@media (prefers-reduced-motion:reduce){.fr-szene{box-shadow:none}}
@media print{.fr-szene{position:relative;top:auto;height:auto;min-height:320px;color:#000}.fr-szene-bild{display:none}.fr-szene::before{display:none}}