/* ====================  css/vergleich.css  ====================
   Vorher-nachher-Vergleich (05.10.2026, Seite /bild-automatik/): ein Regler über zwei deckungsgleichen
   Bildern, dazu Bildreihen „vorher → nachher“ für Motive, die sich nicht überlagern lassen (Szenen).
   Das Verhalten steht in js/vergleich.js: Maus springt beim Drücken an die Stelle, der Finger zieht erst nach
   einer waagerechten Bewegung (senkrecht scrollt die Seite weiter), Tastatur über das versteckte Schiebefeld.
   Bilder kommen aus bau.py ({{BILD:…}}) und liegen hier nur übereinander. */

.bv{ margin: 0; position: relative }
.bv-buehne{
  --pos: 50%;
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px;
  background: var(--papier);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 1px rgba(140,170,240,.18), 0 30px 80px -30px rgba(0,0,0,.85);
}
.bv-buehne img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  pointer-events: none; -webkit-user-drag: none;
}
.bv-nachher{ position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)) }
.bv-linie{
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: #fff; box-shadow: 0 0 0 1px rgba(5,6,12,.14); pointer-events: none;
}
.bv-griff{
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; background: rgba(255,255,255,.96);
  box-shadow: 0 2px 14px rgba(5,6,12,.38);
  transition: transform .12s ease-out;
}
/* zwei Winkel: nach links und nach rechts ziehen */
.bv-griff::before, .bv-griff::after{
  content: ""; position: absolute; top: 50%; width: 7px; height: 7px;
  border: solid var(--tinte); border-width: 0 0 2px 2px;
}
.bv-griff::before{ left: 12px; transform: translateY(-50%) rotate(45deg) }
.bv-griff::after{ right: 12px; transform: translateY(-50%) rotate(-135deg) }
.bv-buehne.zieht .bv-griff{ transform: scale(1.08) }
.bv-buehne:has(.bv-regler:focus-visible) .bv-griff{ outline: 2px solid var(--blau); outline-offset: 3px }
.bv-marke{
  position: absolute; top: 12px; padding: 5px 9px; border-radius: 2px; pointer-events: none;
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  color: #fff; background: rgba(5,6,12,.72);
  transition: opacity .18s linear;
}
.bv-marke--vorher{ left: 12px }
.bv-marke--nachher{ right: 12px }
/* Schild ausblenden, wenn seine Seite fast verschwunden ist */
.bv-buehne[data-seite="nachher"] .bv-marke--vorher, .bv-buehne[data-seite="vorher"] .bv-marke--nachher{ opacity: 0 }
/* Das Schiebefeld ist nur für Tastatur und Vorleseprogramme da; Zeiger und Finger übernimmt das Skript */
.bv-regler{
  position: absolute; inset: auto 0 0 0; width: 100%; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.bv figcaption, .bv-bild figcaption{
  margin-top: 12px; font-size: .86rem; line-height: 1.45; color: var(--text-leise); max-width: none;
}
.bv figcaption .b, .bv-bild figcaption .b{ color: var(--text); font-weight: 500 }

/* ---------- Mehrere Vergleiche nebeneinander ---------- */
.bv-raster{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
  position: relative;
}
@media (max-width: 900px){ .bv-raster{ grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px){ .bv-raster{ grid-template-columns: minmax(0, 1fr) } }

/* ---------- Bildreihen: vorher → nachher (→ Szene) ----------
   Das Handyfoto ist hochkant (9:16): Seine Spalte ist 0,5625-mal so breit wie die quadratischen, dann sind
   alle Bilder einer Reihe gleich hoch. */
.bv-reihe{
  display: grid; align-items: end; gap: 0 clamp(10px, 1.6vw, 20px);
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.bv-reihe--drei{ grid-template-columns: minmax(0, .5625fr) auto minmax(0, 1fr) auto minmax(0, 1fr) }
.bv-bild{ margin: 0; min-width: 0 }
.bv-rahmen{
  position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--papier);
  box-shadow: 0 0 0 1px rgba(140,170,240,.18), 0 24px 60px -30px rgba(0,0,0,.85);
}
.bv-rahmen--hoch{ aspect-ratio: 9 / 16 }
.bv-rahmen img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.bv-pfeil{
  align-self: center; margin-bottom: 2.4em;      /* Höhe der Bildunterschrift ausgleichen */
  font-size: 1.4rem; color: var(--text-leise); line-height: 1;
}
.bv-stufe{
  display: inline-block; margin-right: .5em; padding: 2px 7px; border-radius: 2px;
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; vertical-align: 1px;
  border: 1px solid var(--linie); color: var(--text-leise);
}
.bv-stufe--nachher{ border-color: var(--blau); color: var(--text) }
.bv-gruppe + .bv-gruppe{ margin-top: clamp(40px, 6vh, 72px) }
.bv-gruppe > h3{ font-size: clamp(1.1rem, 1.5vw, 1.35rem); text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 18px }
.bv-gruppe{ position: relative }
.bv-gruppe::before{
  content: ""; position: absolute; inset: -4vh -5vw; z-index: -1; pointer-events: none;
  background: radial-gradient(115% 92% at 40% 50%, rgba(5,6,12,.95) 0%, rgba(5,6,12,.84) 55%, transparent 86%);
}
.bv-paare{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) }
/* Ein einzelnes Paar nicht über die ganze Breite: sonst stünde es doppelt so groß wie die Paare darüber */
.bv-gruppe > .bv-reihe:not(.bv-reihe--drei){ max-width: 760px }
@media (max-width: 900px){ .bv-paare{ grid-template-columns: minmax(0, 1fr) } }

@media (max-width: 640px){
  .bv-reihe--drei{ grid-template-columns: minmax(0, 1fr); gap: 10px }
  .bv-reihe--drei .bv-bild:first-child .bv-rahmen{ width: 56.25%; margin-inline: auto }
  .bv-reihe--drei .bv-bild:first-child figcaption{ text-align: center }
  .bv-reihe--drei .bv-pfeil{ justify-self: center; margin: 0; transform: rotate(90deg) }
}

@media (prefers-reduced-motion: reduce){
  .bv-griff, .bv-marke{ transition: none }
}

/* ---------- „Vergrößern“ (js/lupe.js) ----------
   Am Regler selbst bewegt Ziehen den Regler — deshalb öffnet hier ein eigener Knopf die Großansicht. */
.bv-gross{
  position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%; cursor: zoom-in;
  background: rgba(5,6,12,.72); color: #fff;
  transition: background-color .15s linear, transform .1s ease-out;
}
.bv-gross:hover{ background: rgba(5,6,12,.9) }
.bv-gross:active{ transform: scale(.94) }
.bv-gross:focus-visible{ outline: 2px solid var(--blau); outline-offset: 3px }
/* Lupe aus zwei Strichen: Ring und Griff */
.bv-gross::before{
  content: ""; position: absolute; left: 11px; top: 11px; width: 13px; height: 13px;
  border: 1.6px solid currentColor; border-radius: 50%;
}
.bv-gross::after{
  content: ""; position: absolute; left: 24px; top: 25px; width: 7px; height: 1.6px;
  background: currentColor; transform: rotate(45deg); transform-origin: left center;
}
.lupe .bv-buehne{ cursor: ew-resize }