/* === Slices: saubere, einheitliche Regeln === */
:root{
  --left-shift-vw: -12vw;          /* horizontaler Shift in vw (zoom-sicher) */
  --left-shift-px: 0px;            /* optionaler Fein-Shift in px */
  --left-top: 0px;                 /* vertikaler Shift in px */
  --left-zoom: 1;                  /* Zoom/Scale */
}

/* Basisschicht (alle Slices) */
.sk-site-bg__slice{
  position: fixed;
  top:    calc(var(--sk-top-offset) - var(--sk-bleed));
  height: calc(100dvh - var(--sk-top-offset) + var(--sk-bleed) * 2);
  width: auto;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== LEFT: Tower + Beam teilen sich dieselben Werte ===== */
/* Support: neue Klasse (.sk-left …) UND Legacy-Selektor (img.sk-site-bg__slice--left) */
.sk-left,
picture.sk-site-bg__slice--left > img.sk-site-bg__slice--left,
img.sk-site-bg__slice--left{
  position: fixed !important;
  left: 0 !important;
  top: calc(var(--sk-top-offset) - var(--sk-bleed) + var(--left-top)) !important;

  /* sichtbare Höhe: NICHT kompensieren → Zoom wirkt */
  height: calc(100dvh - var(--sk-top-offset) + var(--sk-bleed) * 2) !important;

  transform-origin: 0 0 !important;
  transform:
    translateX( calc(var(--left-shift-vw, 0vw) + var(--left-shift-px, 0px)) )
    scale( var(--left-zoom, 1) ) !important;

  z-index: 1 !important;
  pointer-events: none !important;
  backface-visibility: hidden;

  /* Original-Look: keinerlei Masken/Fades/Filter */
  -webkit-mask: none !important;        mask: none !important;
  -webkit-mask-image: none !important;  mask-image: none !important;
  clip-path: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Layering: Beam über Tower */
.sk-left--tower{ z-index: 1 !important; }
.sk-left--beam {
  z-index: 2 !important;
  /* Licht-Charakter */
  mix-blend-mode: screen !important;
  opacity: .96;
  filter: brightness(1.2) contrast(1.08);
}

/* ===== Global Background (unter allem) ===== */
.sk-bg-picture,
.sk-site-bg__img{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  object-fit: cover !important;
  object-position: 50% 40% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Content / Header über Slices */
.site-header, .site-intro, .site-content{
  position: relative;
  z-index: 2;
}







/* ===== Kontrast-Booster für den Turm ===== */
:root{
  /* Feintuning nach Geschmack */
  --tower-brightness: 1.08;
  --tower-contrast:   1.35;
  --tower-saturate:   1.12;
}

/* nur Turm schärfer & knackiger darstellen */
.sk-left--tower{
  filter:
    brightness(var(--tower-brightness))
    contrast(var(--tower-contrast))
    saturate(var(--tower-saturate)) !important;
}

/* ===== Beam separat positionierbar ===== */
:root{
  /* eigene Offsets NUR für den Beam (startet mit Tower-Werten) */
  --beam-shift-vw:  var(--left-shift-vw); /* +/– in vw, unabhängig vom Zoom */
  --beam-shift-px:  0px;                  /* Feinschliff in px */
  --beam-top:       var(--left-top);      /* vertikal in px */
  --beam-zoom:      var(--left-zoom);     /* eigener Zoom */
  --beam-rotate:    0deg;                 /* optional, in Grad */

  /* Beam-Look */
  --beam-opacity:    .96;
  --beam-brightness: 1.25;
  --beam-contrast:   1.10;
}

/* Beam über dem Turm, eigenständige Lage + Look */
.sk-left--beam{
  /* Drehpunkt ungefähr am Leuchtkopf – bei Bedarf anpassen */
  transform-origin: 12% 14% !important;

  transform:
    translateX(calc(var(--beam-shift-vw) + var(--beam-shift-px)))
    scale(var(--beam-zoom))
    rotate(var(--beam-rotate)) !important;

  /* NICHT die top-Formel anfassen → nutzen eigenen beam-top als Delta */
  top: calc(var(--sk-top-offset) - var(--sk-bleed) + var(--beam-top)) !important;

  mix-blend-mode: screen !important;
  opacity: var(--beam-opacity);
  filter:
    brightness(var(--beam-brightness))
    contrast(var(--beam-contrast)) !important;
}

/* Sicherheitsnetz: keine Masken/Fades irgendwo auf Left-Assets */
.sk-left,
picture.sk-site-bg__slice--left > img.sk-site-bg__slice--left,
img.sk-site-bg__slice--left{
  -webkit-mask:none !important; mask:none !important;
  -webkit-mask-image:none !important; mask-image:none !important;
  clip-path:none !important;
  mix-blend-mode:inherit;
}



/* ===== Look-Regler (Tower + Beam) ===== */
:root{
  --tower-contrast: 1.20;   /* 0.8 – 1.8, Standard 1.20 */
  --tower-saturate: 1.08;   /* optional: 0.8 – 1.6, Standard 1.08 */
  --beam-opacity:  .96;     /* 0 – 1, Standard 0.96 */
}

/* Turm knackiger (nur Kontrast + ggf. Sättigung) */
.sk-left--tower{
  filter:
    contrast(var(--tower-contrast, 1))
    saturate(var(--tower-saturate, 1)) !important;
}

/* Beam Deckkraft aus Regler */
.sk-left--beam{
  opacity: var(--beam-opacity, .96) !important;
}



/* ==== Beam: eigene Offsets (Delta zu den globalen Left-Werten) ==== */
:root{
  --beam-shift-vw: 0vw;  /* +/– in vw → horizontale Zusatzverschiebung nur für den Beam */
  --beam-shift-px: 0px;  /* optionaler Feinschliff in px (falls gewünscht) */
  --beam-top: 0px;       /* +/– in px → vertikale Zusatzverschiebung nur für den Beam */
}

/* Beam übernimmt alles vom Left, plus eigene Deltas */
.sk-left--beam{
  /* gleicher Ursprung wie Left; bei Bedarf anpassen */
  transform-origin: 0 0 !important;

  /* X: globaler Left-Shift + optionaler Left-Fine + Beam-Delta */
  transform:
    translateX(calc(var(--left-shift-vw, 0vw) + var(--left-shift-px, 0px) + var(--beam-shift-vw, 0vw) + var(--beam-shift-px, 0px)))
    scale(var(--left-zoom, 1)) !important;

  /* Y: globales top + Beam-Delta */
  top: calc(var(--sk-top-offset) - var(--sk-bleed) + var(--left-top) + var(--beam-top)) !important;
}

/* ===== RIGHT / Logo: eigene Variablen ===== */
:root{
  --right-shift-vw: 0vw;      /* +/– in vw (unabhängig vom Zoom) */
  --right-shift-px: 0px;      /* Feinschliff in px */
  --right-top: 0px;           /* vertikal in px */
  --right-zoom: 1;            /* Scale */
  --right-scale: var(--right-zoom); /* Alias */
}

/* Gemeinsame Basishöhe greift schon über .sk-site-bg__slice */

/* Right: an rechte Kante ankern, wie Left nur gespiegelt */
.sk-right,
picture.sk-site-bg__slice--right > img.sk-site-bg__slice--right,
img.sk-site-bg__slice--right{
  position: fixed !important;
  right: 0 !important;
  top: calc(var(--sk-top-offset) - var(--sk-bleed) + var(--right-top)) !important;

  height: calc(100dvh - var(--sk-top-offset) + var(--sk-bleed) * 2) !important;

  transform-origin: 100% 0 !important; /* rechter Rand als Ursprung */
  transform:
    translateX( calc(var(--right-shift-vw, 0vw) + var(--right-shift-px, 0px)) )
    scale( var(--right-zoom, var(--right-scale, 1)) ) !important;

  z-index: 1 !important;
  pointer-events: none !important;

  /* Safety: keine Masken/Clips/Filter */
  -webkit-mask: none !important; mask: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  clip-path: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}



/* Right: Breiten-Korrektur (1 = neutral, <1 schmaler, >1 breiter) */
:root{ --right-squash: 1; }

/* nur die X-Achse zusätzlich skalieren */
.sk-right,
picture.sk-site-bg__slice--right > img.sk-site-bg__slice--right,
img.sk-site-bg__slice--right{
  transform-origin: 100% 0 !important; /* rechter Rand */
  transform:
    translateX(calc(var(--right-shift-vw, 0vw) + var(--right-shift-px, 0px)))
    scale(var(--right-zoom, 1))
    scaleX(var(--right-squash, 1)) !important; /* NEU */
}