/*
 * Photo grade: a light, warm tone over every photograph of the site, so
 * daylight shots sit with the dark-and-gold design. The files stay as they
 * are; only this rule changes how they look.
 *
 *   --photo-warmth         strength: 1 = as designed, 0.5 = half, 0 = off
 *                          (to switch it off: set it to 0 below — one line)
 *   --photo-warmth-hero    the home page's left hero photo, a daylight shot
 *                          beside the bar at night: this many times the tone,
 *                          plus a little less green and a little darker (evening)
 *   --photo-warmth-wasser  the same for the large "Am Wasser" photo, which
 *                          also gets its own golden-hour look, each part on
 *                          its own (1 or 0 = back to plain):
 *     --wasser-brightness  1 = as it is, 0.85 = 15 % darker
 *     --wasser-contrast    1 = as it is
 *     --wasser-vignette    0 = none, 1 = top and right edge a little darker
 *
 * Photographs only: <img> in the page's <main> and the lightbox — not the
 * SVG logos, not the event pop-up posters, not the menu's canvas animations,
 * not the admin panel (it has its own document).
 *
 * The tone goes in front of the image's own Tailwind filters (brightness-…,
 * contrast-…, saturate-…, hover effects): they set --tw-* and keep working.
 */
:root {
  --photo-warmth: 1;
  --photo-warmth-hero: 2.2;
  --photo-warmth-wasser: 2.4;
  --wasser-brightness: 0.82;
  --wasser-contrast: 1.08;
  --wasser-vignette: 1;
}
main img:not([src*=".svg"]):not([src*="popups"]),
[role="dialog"][aria-modal="true"] img:not([src*=".svg"]):not([src*="popups"]) {
  --w: var(--photo-warmth);
  --photo-grade-tw: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  filter: sepia(calc(var(--w) * 0.14)) saturate(calc(1 - var(--w) * 0.05)) hue-rotate(calc(var(--w) * -4deg)) contrast(calc(1 + var(--w) * 0.03)) var(--photo-grade-tw);
}
/* Daylight photos given the evening's warmth: warmer, a little less green, a little darker. */
[data-hero-scene] .grid > div:first-child img,
#am-wasser .aw-photo img {
  filter: sepia(calc(var(--w) * 0.14)) saturate(calc(1 - var(--w) * 0.08)) hue-rotate(calc(var(--w) * -4deg)) contrast(calc(1 + var(--w) * 0.03)) brightness(calc(1 - var(--w) * 0.06)) var(--photo-grade-tw);
}
[data-hero-scene] .grid > div:first-child img {
  --w: calc(var(--photo-warmth) * var(--photo-warmth-hero));
}
#am-wasser .aw-photo img {
  --w: calc(var(--photo-warmth) * var(--photo-warmth-wasser));
  filter: sepia(calc(var(--w) * 0.14)) saturate(calc(1 - var(--w) * 0.08)) hue-rotate(calc(var(--w) * -4deg)) contrast(calc(1 + var(--w) * 0.03)) brightness(calc(1 - var(--w) * 0.06)) brightness(var(--wasser-brightness)) contrast(var(--wasser-contrast)) var(--photo-grade-tw);
}
/* The vignette: top and right edge a little darker, the table in the middle
   stays bright; the dark fade on the left is the section's own (am-wasser.php). */
#am-wasser .aw-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--wasser-vignette);
  background:
    linear-gradient(to bottom, rgba(5, 7, 11, 0.5), rgba(5, 7, 11, 0) 32%),
    linear-gradient(to left, rgba(5, 7, 11, 0.45), rgba(5, 7, 11, 0) 30%),
    radial-gradient(120% 95% at 42% 62%, rgba(5, 7, 11, 0) 55%, rgba(5, 7, 11, 0.35) 100%);
}