/* Via Veneto · Bausteine
   Was auf der Seite mehrfach vorkommt und nicht zu einem Akt gehört: Filmkorn,
   Blitz, Knöpfe, der Filmstreifen und die Abzüge. Die Akte stehen in seite.css. */

/* ---------- Filmkorn (21st.dev „Animated Fuzzy Overlay", ohne Framer Motion:
   dieselbe Rauschkachel als CSS-Animation) ----------
   Ruhiger gestellt (Lucas 28.09.: „Flimmern runter"): halbe Deckkraft, und die
   Kachel gleitet nicht mehr fünfmal pro Sekunde über die Seite, sondern springt
   dreimal pro Sekunde um wenige Prozent. Das Korn bleibt, das Flimmern nicht. */
.korn {
  position: fixed; inset: -15%; z-index: 40; pointer-events: none;   /* Sprünge bis ±4 %, der Rand reicht */
  background-image: url("img/korn.webp");
  opacity: .05;
  animation: korn 1s steps(3) infinite alternate;
}
@keyframes korn {
  from { transform: translate(-4%, -4%); }
  to   { transform: translate(4%, 4%); }
}

/* ---------- Der Blitz ---------- */
.blitz {
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  background: #fffaf0; opacity: 0;
}
.blitz.feuert { animation: blitz 340ms cubic-bezier(.2,.8,.3,1) both; }
@keyframes blitz {
  0%   { opacity: 0; }
  12%  { opacity: .92; }
  100% { opacity: 0; }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .7rem 1.25rem;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font: 700 var(--sc-t-sm)/1 var(--sc-font-text); letter-spacing: .01em;
  text-decoration: none; white-space: nowrap; border-radius: 2px;
  transition: background-color 140ms ease-out, transform 140ms ease-out;
}
.knopf:hover { background: #ff8a3a; }
.knopf:active { transform: translateY(1px); }
.knopf--gross { min-height: 56px; padding: 1rem 2rem; font-size: var(--sc-t-base); }

/* ---------- Der Filmstreifen (21st.dev „Filmstrip Gallery", umgebaut:
   Lochung, Randbeschriftung und das Entwickeln vom Negativ zum Positiv
   stammen von dort; hier ist er fest am unteren Rand, jeder Rahmen ist ein
   Gang, und belichtet wird durch den Blitz statt durch das Einrasten) ---------- */
.streifen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: calc(var(--streifen) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 1rem; padding: 0 max(1rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle, var(--sc-canvas) 3.2px, transparent 3.6px) 0 5px / 20px 12px repeat-x,
    radial-gradient(circle, var(--sc-canvas) 3.2px, transparent 3.6px) 0 calc(100% - 5px) / 20px 12px repeat-x,
    var(--film);
  border-top: 1px solid #2c2620;
  transition: transform 420ms cubic-bezier(.22,1,.36,1), opacity 300ms ease-out, visibility 0s;
}
/* weg: auch für die Tastatur weg, aber erst nachdem er abgeglitten ist */
.streifen.weg { transform: translateY(110%); opacity: 0; pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, 420ms; }
.streifen__rand {
  position: absolute; left: 1rem; top: 11px; margin: 0;
  font: 600 9px/1 var(--sc-font-text); letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinte); opacity: .7;
}
.streifen__rahmen {
  list-style: none; margin: 0; padding: 14px 0 6px; min-width: 0;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.streifen__rahmen::-webkit-scrollbar { display: none; }
.streifen__rahmen a {
  position: relative; display: block; width: 66px; height: 44px; flex: none;
  border-radius: 2px; overflow: hidden; text-decoration: none;
  background: #0f0d0b;
  box-shadow: inset 0 0 0 1px #3a332b;
}
.rahmen__bild, .abend__bild { position: absolute; inset: 0; }
.rahmen__bild img, .abend__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* unbelichtet: fast schwarzes Negativ */
  filter: invert(1) sepia(.57) saturate(1.2) hue-rotate(-8deg) contrast(.9) brightness(.94);
  opacity: 0; transform: scale(.97);
  transition: filter var(--entwickeln), opacity var(--entwickeln), transform var(--entwickeln);
}
.rahmen__name {
  position: absolute; inset: auto 0 0 0; padding: 0 4px 3px;
  font: italic 400 12px/1.1 var(--sc-font-display); color: var(--tinte);
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
  transition: opacity 300ms ease-out;
}
.streifen__rahmen a[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--tinte), 0 0 0 1px var(--tinte); }
/* belichtet: erst Negativ, dann entwickelt es zum Positiv */
.belichtet .rahmen__bild img, .belichtet .abend__bild img { opacity: 1; }
.entwickelt .rahmen__bild img, .entwickelt .abend__bild img {
  filter: invert(0) sepia(0) saturate(1) hue-rotate(0deg) contrast(1) brightness(1);
  transform: none;
}
.entwickelt .rahmen__name { opacity: 0; }
.streifen__rahmen a:hover .rahmen__name, .streifen__rahmen a:focus-visible .rahmen__name { opacity: 1; }

/* Alles, was unten verankert ist, steht über dem Streifen. */
.sc-copy--lead, .sc-copy--trail { bottom: calc(var(--streifen) + clamp(1.5rem, 6vh, 4rem)); }

/* ---------- Abzüge: Pressefotos mit weißem Rand ---------- */
.abzug { margin: 0; }
.abzug img, .abzug__knips {
  display: block; width: 100%; height: auto;
}
.abzug > img, .abzug__knips {
  background: var(--papier); padding: clamp(6px, .9vw, 12px) clamp(6px, .9vw, 12px) clamp(26px, 3vw, 40px);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.4);
}
.abzug figcaption {
  margin-top: .7rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 44ch;
}
img.sw { filter: var(--sw); transition: filter var(--entwickeln); }
.abzug__knips {
  position: relative; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.abzug__knips img { transition: filter var(--entwickeln); }

[data-im-abend].im-film .abzug img.sw { filter: none; }   /* ein belichteter Gang ist ganz farbig (auch der geknipste Teller) */
.abzug__marke {
  position: absolute; right: clamp(8px, 1vw, 14px); bottom: clamp(6px, .6vw, 10px);
  display: inline-flex; align-items: center; gap: .45rem;
  font: 700 12px/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase;
  color: #2a231c;
}
.abzug__marke::before {
  content: ""; width: 18px; height: 13px; border-radius: 2px;
  background:
    radial-gradient(circle at 50% 56%, transparent 3px, currentColor 3.4px, currentColor 4.4px, transparent 4.8px),
    linear-gradient(currentColor, currentColor) 3px 0 / 5px 3px no-repeat;
  box-shadow: inset 0 0 0 1.4px currentColor;
}
.marke__nach { display: none; color: #9a4a0e; }
.geknipst .marke__vor { display: none; }
.geknipst .marke__nach { display: inline; }
.abzug__knips:hover .marke__vor { color: #9a4a0e; }