/* Separate colour-photo version.
   Loaded after styles-sw.css so every layout, component and monochrome UI
   treatment remains unchanged; only photographic media and the contrast
   immediately around overlaid text are adjusted. */

img,
.instagram-preview {
  filter: none;
}

.hero,
.subpage-hero {
  filter: none;
}

/* Keep the decorative city skyline monochrome in the colour version. */
.bottom-skyline,
.bottom-skyline img {
  filter: grayscale(100%);
}

/* The colour hero has more tonal variation than the grayscale treatment.
   A slightly stronger left-hand veil and existing text shadow preserve the
   white name lock-up without changing its position or typography. */
.hero::before {
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.04)),
    url("../assets/hero-sw.jpg");
}

.hero::after {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.04) 42%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

.logo-lockup {
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.92),
    0 7px 20px rgba(0, 0, 0, 0.76),
    0 18px 44px rgba(0, 0, 0, 0.62);
}

/* Text sits directly on these photographs. Retain the established teal veil,
   but increase its opacity slightly and add a restrained shadow. */
.card-content {
  background: linear-gradient(
    to top,
    rgba(0, 52, 71, 0.94),
    rgba(0, 52, 71, 0.64) 54%,
    rgba(0, 52, 71, 0)
  );
}

.card-content h3,
.card-content p,
.subpage-hero h1,
.subpage-hero p,
.ziele-media figcaption {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.ziele-media figcaption {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}