.fls-projektbanner .fls-projektbilder {
  grid-template-columns: minmax(0,1fr);
  gap: clamp(14px,1.7vw,25px);
}

.fls-projektbanner .fls-projektbild {
  grid-column: 1;
  grid-row: auto;
  min-height: 0;
  border-radius: 12px;
}

.fls-projektbanner .fls-projektbild .fls-projektbild-inhalt {
  align-self: center;
  min-width: 0;
}

.fls-projektbanner .fls-projektbilder .fls-projektbild h3 {
  max-width: 19ch;
  margin: .36rem 0 .58rem;
  font-size: clamp(1.9rem,3.8vw,3.65rem);
  line-height: 1.03;
  letter-spacing: -.032em;
}

.fls-projektbanner .fls-projektbild p {
  max-width: 46ch;
  font-size: clamp(.97rem,1.38vw,1.12rem);
  line-height: 1.45;
}

.fls-projektbanner .fls-projektbild-rubrik {
  color: #f5bcc9;
  font-size: .72rem;
  letter-spacing: .14em;
}

.fls-projektbanner .fls-projektbild-aktion {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  margin-top: clamp(.85rem,1.5vw,1.3rem);
  padding: .4rem .82rem;
  border: 1px solid transparent;
  border-radius: 5px;
  font-weight: 700;
}

/* Kino: Das Originalmotiv läuft bis an die Bannerkante. */
.fls-projektbanner-kino {
  --kino-start: #401a26;
  --kino-ton: #351922;
  --kino-ende: #291720;
  --kino-blende-nah: #351922ee;
  --kino-blende-mitte: #35192276;
  --kino-blende-fern: #3519220d;
  --kino-blende-unten: #21101961;
  --kino-blende-mobil: #3519223b;
}

.fls-projektbanner-kino .fls-projektbild {
  position: relative;
  isolation: isolate;
  grid-template: 1fr / minmax(0,1fr);
  min-height: clamp(225px,22vw,320px);
  border-color: #e29bac3b;
  background: linear-gradient(var(--kino-grundrichtung,122deg),var(--kino-start),var(--kino-ende) 67%);
}

.fls-projektbanner-kino .fls-projektbild .fls-projektbild-motiv {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.fls-projektbanner-kino .fls-projektbild .fls-projektbild-motiv img {
  inset: 0 0 0 auto;
  width: 66%;
}

.fls-projektbanner-kino .fls-projektbild-motiv::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--kino-verlauf,90deg),var(--kino-start) 0%,var(--kino-ton) 35%,
      var(--kino-blende-nah) 42%,var(--kino-blende-mitte) 58%,var(--kino-blende-fern) 80%),
    linear-gradient(0deg,var(--kino-blende-unten),transparent 53%);
  content: "";
}

.fls-projektbanner-kino .fls-projektbild .fls-projektbild-inhalt {
  position: relative;
  width: min(58%,41rem);
  padding: clamp(26px,4vw,56px);
}

.fls-projektbanner-kino .fls-projektbild-aktion {
  color: #4c1e2a;
  background: #fbf1f3;
}

@media (min-width: 701px) {
  .fls-projektbanner-wechsel .fls-projektbild:nth-child(even) {
    --kino-grundrichtung: 238deg;
    --kino-verlauf: 270deg;
  }
  .fls-projektbanner-wechsel .fls-projektbild:nth-child(even) .fls-projektbild-motiv img {
    inset: 0 auto 0 0;
  }
  .fls-projektbanner-wechsel .fls-projektbild:nth-child(even) .fls-projektbild-inhalt {
    justify-self: end;
  }
  .fls-projektbanner-graphit .fls-projektbild {
    min-height: clamp(235px,24vw,340px);
  }
}

/* Graphit: Die Farbe der Originalmotive bleibt im Vordergrund. */
.fls-projektbanner-graphit {
  --kino-start: #252627;
  --kino-ton: #1c1d1e;
  --kino-ende: #191a1b;
  --kino-blende-nah: #1c1d1eea;
  --kino-blende-mitte: #1c1d1e62;
  --kino-blende-fern: #1c1d1e08;
  --kino-blende-unten: #14151636;
  --kino-blende-mobil: #1c1d1e36;
}

.fls-projektbanner-graphit .fls-projektmagazin { --magazin-rot: #c2c1ba; }

.fls-projektbanner-graphit .fls-projektbild { border-color: #ffffff25; }

.fls-projektbanner-graphit .fls-projektbild-rubrik {
  color: #cbc9c2;
  letter-spacing: .105em;
}

.fls-projektbanner-graphit .fls-projektbilder .fls-projektbild h3 { color: #f7f5ef; }
.fls-projektbanner-graphit .fls-projektbilder .fls-projektbild p { color: #e0dfda !important; }

.fls-projektbanner-graphit .fls-projektbild-aktion {
  min-height: 39px;
  color: #f2f0e9;
  border-color: #ffffff4f;
  border-radius: 6px;
  background: #ffffff0d;
}

.fls-projektbanner-graphit .fls-projektbild-hoebel .fls-projektbild-motiv img {
  object-position: 50% 11%;
}

/* Studio: Text und Bildfeld sind getrennt und wechseln sich ab. */
.fls-projektbanner-studio .fls-projektbild {
  grid-template: auto / minmax(0,1fr) minmax(0,1.12fr);
  grid-template-areas: "text bild";
  align-items: center;
  gap: clamp(15px,3vw,48px);
  padding: clamp(16px,2.6vw,36px) clamp(18px,3vw,45px);
  border-color: #ffffff26;
  background: radial-gradient(ellipse at 88% 15%,#3b3039,#232126 56%,#1c1b20 100%);
}

.fls-projektbanner-studio .fls-projektbild:nth-child(even) {
  grid-template-columns: minmax(0,1.12fr) minmax(0,1fr);
  grid-template-areas: "bild text";
  background: radial-gradient(ellipse at 12% 15%,#3b3039,#232126 56%,#1c1b20 100%);
}

.fls-projektbanner-studio .fls-projektbild .fls-projektbild-motiv {
  grid-area: bild;
  aspect-ratio: 2.15;
  border: 1px solid #ffffff32;
  border-radius: 8px;
  box-shadow: 0 13px 30px #0004;
}

.fls-projektbanner-studio .fls-projektbild .fls-projektbild-inhalt {
  grid-area: text;
  padding: clamp(8px,1.4vw,22px) 0;
}

.fls-projektbanner-studio .fls-projektbilder .fls-projektbild h3 {
  font-size: clamp(1.85rem,3.4vw,3.25rem);
}

.fls-projektbanner-studio .fls-projektbild-aktion {
  color: #ffdbe4;
  border-color: #e4a3b461;
  background: #e8a2b311;
}

.fls-projektbanner-studio .fls-projektbild-bau .fls-projektbild-motiv img:first-child {
  filter: blur(7px) brightness(.47);
  transform: scale(1.08);
}

.fls-projektbanner-studio .fls-projektbild-bau .fls-projektbild-motiv .fls-projektbanner-website,
.fls-projektbanner-studio .fls-projektbild-bau .fls-projektbild-motiv .fls-projektbanner-handy {
  inset: auto;
  width: auto;
  max-width: none;
  object-fit: contain;
  border: 1px solid #fff7;
  border-radius: 4px;
  box-shadow: 0 8px 20px #0009;
  animation: none;
}

.fls-projektbanner-studio .fls-projektbild-bau .fls-projektbild-motiv .fls-projektbanner-website {
  top: 9%;
  left: 9%;
  height: 82%;
}

.fls-projektbanner-studio .fls-projektbild-bau .fls-projektbild-motiv .fls-projektbanner-handy {
  right: 8%;
  bottom: 7%;
  height: 72%;
}

@media (max-width: 700px) {
  .fls-projektbanner-kino .fls-projektbild {
    grid-template-rows: auto 1fr;
    min-height: 0;
    background: var(--kino-ton);
  }
  .fls-projektbanner-kino .fls-projektbild .fls-projektbild-motiv {
    position: relative;
    inset: auto;
    aspect-ratio: 2.2;
  }
  .fls-projektbanner-kino .fls-projektbild .fls-projektbild-motiv img { width: 100%; }
  .fls-projektbanner-kino .fls-projektbild-motiv::after {
    background: linear-gradient(0deg,var(--kino-ton) 0%,var(--kino-blende-mobil) 32%,transparent 68%);
  }
  .fls-projektbanner-kino .fls-projektbild .fls-projektbild-inhalt {
    width: auto;
    padding: 8px 20px 22px;
  }
  .fls-projektbanner-studio .fls-projektbild:nth-child(n) {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "bild" "text";
    gap: 14px;
    padding: 13px;
  }
  .fls-projektbanner-studio .fls-projektbild .fls-projektbild-inhalt {
    padding: 0 7px 8px;
  }
}

/* Dasselbe Motiv bildet den weichen Hintergrund und das scharfe Foto. */
.fls-projektbanner-bildtiefe .fls-projektbild .fls-projektbild-motiv {
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(14px,2.3vw,34px);
}

.fls-projektbanner-bildtiefe .fls-projektbild .fls-projektbild-motiv .fls-projektbild-hintergrund {
  inset: -26px;
  width: calc(100% + 52px);
  height: calc(100% + 52px);
  filter: blur(22px) brightness(.68) saturate(.85);
  animation: none;
}

.fls-projektbanner-bildtiefe .fls-projektbild-motiv::after { z-index: 1; }

.fls-projektbanner-bildtiefe .fls-projektbild-foto {
  position: relative;
  z-index: 2;
  display: block;
  width: min(52%,560px);
  aspect-ratio: 1.74;
  overflow: hidden;
  border: 1px solid #ffffff38;
  border-radius: 8px;
  background: #28282c;
  box-shadow: 0 15px 34px #0008;
}

.fls-projektbanner-bildtiefe .fls-projektbild .fls-projektbild-motiv .fls-projektbild-foto img {
  inset: 0;
  width: 100%;
}

.fls-projektbanner-bildtiefe .fls-projektbild-hoebel .fls-projektbild-foto {
  width: min(45%,418px);
  aspect-ratio: 1.36;
}

@media (min-width: 701px) {
  .fls-projektbanner-bildtiefe .fls-projektbild { min-height: clamp(290px,29vw,420px); }
  .fls-projektbanner-bildtiefe .fls-projektbild:nth-child(even) .fls-projektbild-motiv {
    justify-content: flex-start;
  }
  .fls-projektbanner-bildtiefe .fls-projektbild .fls-projektbild-inhalt {
    width: min(48%,39rem);
  }
}

@media (max-width: 700px) {
  .fls-projektbanner-bildtiefe .fls-projektbild .fls-projektbild-motiv { aspect-ratio: auto; }
  .fls-projektbanner-bildtiefe .fls-projektbild .fls-projektbild-foto {
    width: 100%;
    aspect-ratio: 1.67;
  }
  .fls-projektbanner-bildtiefe .fls-projektbild .fls-projektbild-inhalt { padding-top: 14px; }
}

/* Bildkomposition: Schärfe läuft ohne zusätzlichen Bildrahmen aus. */
.fls-projektbanner-bildkomposition .fls-projektbild .fls-projektbild-motiv {
  isolation: isolate;
}

.fls-projektbanner-bildkomposition .fls-projektbild-hintergrund {
  filter: blur(18px) brightness(.76);
  animation: none;
}

.fls-projektbanner-bildkomposition .fls-projektbild-scharf {
  -webkit-mask-image: radial-gradient(ellipse 74% 68% at 50% 50%,#000 41%,#000e 58%,transparent 100%);
  mask-image: radial-gradient(ellipse 74% 68% at 50% 50%,#000 41%,#000e 58%,transparent 100%);
}

.fls-projektbanner-bildkomposition .fls-projektbild-bau .fls-projektbild-hintergrund {
  object-position: 58% 46%;
  filter: blur(18px) brightness(.83) saturate(.8);
  transform: scale(1.1);
  transform-origin: right center;
}

.fls-projektbanner-bildkomposition .fls-projektbild-motiv::after { z-index: 1; }

.fls-projektbanner-bildkomposition .fls-projektbild .fls-projektbild-motiv :is(.fls-projektbanner-website,.fls-projektbanner-handy) {
  z-index: 2;
  inset: auto;
  height: auto;
  border: 1px solid #ffffffa3;
  border-radius: 5px;
  box-shadow: 0 10px 26px #0009;
  transform: translateY(-50%);
  animation: none;
}

.fls-projektbanner-bildkomposition .fls-projektbild .fls-projektbild-motiv .fls-projektbanner-website {
  top: 46%;
  right: 11%;
  width: min(41%,525px);
}

.fls-projektbanner-bildkomposition .fls-projektbild .fls-projektbild-motiv .fls-projektbanner-handy {
  top: 54%;
  right: 4.5%;
  width: min(11%,138px);
}

@media (min-width: 701px) {
  .fls-projektbanner-bildkomposition .fls-projektbild { min-height: clamp(290px,29vw,420px); }
  .fls-projektbanner-bildkomposition .fls-projektbild-bau .fls-projektbild-inhalt {
    width: min(48%,39rem);
  }
}

@media (max-width: 700px) {
  .fls-projektbanner-bildkomposition .fls-projektbild .fls-projektbild-motiv { aspect-ratio: 1.64; }
  .fls-projektbanner-bildkomposition .fls-projektbild .fls-projektbild-motiv .fls-projektbanner-website {
    right: 13%;
    width: 81%;
  }
  .fls-projektbanner-bildkomposition .fls-projektbild .fls-projektbild-motiv .fls-projektbanner-handy {
    right: 6%;
    width: 23%;
  }
}

.fls-projektbanner-hauptmotive .fls-projektbild:not(.fls-projektbild-bau) .fls-projektbild-hintergrund {
  filter: blur(25px) brightness(.55) saturate(.8);
}

.fls-projektbanner-hauptmotive .fls-projektbild .fls-projektbild-motiv img.fls-projektbild-vordergrund {
  z-index: 2;
  inset: 50% 5% auto auto;
  width: min(47%,600px);
  height: 88%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 20px #0007);
  transform: translateY(-50%);
  animation: none;
}

@media (min-width: 701px) {
  .fls-projektbanner-hauptmotive .fls-projektbild:nth-child(even) img.fls-projektbild-vordergrund {
    right: auto;
    left: 5%;
  }
  .fls-projektbanner-hauptmotive .fls-projektbild .fls-projektbild-inhalt { width: min(48%,39rem); }
}

@media (max-width: 700px) {
  .fls-projektbanner-hauptmotive .fls-projektbild:not(.fls-projektbild-bau) .fls-projektbild-motiv {
    aspect-ratio: 1.4;
  }
  .fls-projektbanner-hauptmotive .fls-projektbild .fls-projektbild-motiv img.fls-projektbild-vordergrund {
    width: 90%;
  }
}

.fls-projektbanner-hauptmotive .fls-projektbild-kemeny { --projekt-ausschnitt: 50% 57%; }
.fls-projektbanner-hauptmotive .fls-projektbild-race { --projekt-ausschnitt: 48% 58%; }
.fls-projektbanner-hauptmotive .fls-projektbild-weinfleck { --projekt-ausschnitt: 52% 47%; }

.fls-projektbanner-hauptmotive .fls-projektbild:is(.fls-projektbild-kemeny,.fls-projektbild-race,.fls-projektbild-weinfleck)
.fls-projektbild-motiv img.fls-projektbild-vordergrund {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: var(--projekt-ausschnitt);
}