/* ==========================================================================
   Interaktion & Bewegung
   Ergaenzt site.css um Druck-Feedback, unterbrechbare Bewegung und die
   fehlenden Darstellungs-Praeferenzen. Laedt NACH site.css und ueberschreibt
   gezielt; bewusst separat gehalten, damit diese Schicht nachvollziehbar ist.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Response — Feedback beim Druecken, nicht beim Loslassen
   --------------------------------------------------------------------------
   Die Seite hatte 31 :hover-Regeln und null :active. Auf dem Handy gibt es
   kein Hover: jeder Button war zwischen Tippen und Ergebnis vollkommen tot.
   Das hier ist der wichtigste einzelne Fix der ganzen Datei.

   100ms ease-out, weil Feedback sofort da sein muss — alles darueber fuehlt
   sich nach Verzoegerung an.
   -------------------------------------------------------------------------- */

.btn,
.carousel__arrow,
.lang button,
.lightbox__nav button,
[data-lb-close] {
  transition: color var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    transform 100ms var(--ease-out);
  /* Der Browser soll den Tap sofort durchreichen, nicht 300ms auf einen
     moeglichen Doppeltipp warten. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn:active,
.carousel__arrow:active,
.lang button:active,
.lightbox__nav button:active,
[data-lb-close]:active {
  transform: scale(0.97);
}

/* Der Acid-Fill lief bisher nur auf :hover hoch — auf Touch also nie.
   Jetzt faehrt er auch beim Druecken hoch, und zwar schneller: ein Druck
   ist eine direkte Handlung, keine beilaeufige Mausbewegung. */
.btn:active::before {
  transform: translateY(0);
  transition: transform 140ms var(--ease-out);
}
.btn:active {
  color: var(--acid-ink);
  border-color: var(--acid);
}
.btn--primary:active {
  color: var(--acid-ink);
  border-color: var(--ink);
}

/* Navigation: dezenter, weil Links keine Flaeche haben, die man stauchen kann.
   Stattdessen faerbt sich der Link sofort ein. */
.bar__nav a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 90ms var(--ease-out);
}
.bar__nav a:active {
  color: var(--acid);
}

/* Karussell-Kacheln: leichter Druck nach innen. Die Skalierung ist kleiner
   als bei Buttons (0.985 statt 0.97), weil die Kacheln viel groesser sind —
   gleiche Prozentzahl waere auf grosser Flaeche ein Sprung. */
.carousel__item {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.carousel__item.is-pressed {
  filter: brightness(1.06);
}

.skip-link:active {
  transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   2. Karussell — Uebergabe an die Spring-Engine in site.js
   --------------------------------------------------------------------------
   Die CSS-Transition muss weg. Eine feste 0.65s-Transition laesst sich nicht
   mitten im Flug greifen und umlenken; genau das ist aber das wichtigste
   Bewegung ueberhaupt. site.js treibt die Kacheln stattdessen pro Frame
   per requestAnimationFrame.
   -------------------------------------------------------------------------- */

.carousel__stage.is-spring .carousel__item {
  transition: opacity 0.5s var(--ease-out), border-color 0.4s var(--ease-out);
  /* transform bewusst NICHT in der Liste — das macht jetzt der Spring. */
}

.carousel__stage.is-dragging {
  cursor: grabbing;
}
.carousel__stage.is-dragging .carousel__item {
  cursor: grabbing;
  /* Waehrend des Ziehens klebt alles am Finger — auch die Deckkraft darf
     nicht hinterherlaufen, sonst flackert es bei schnellen Wechseln. */
  transition: border-color 0.4s var(--ease-out);
}

/* --------------------------------------------------------------------------
   3. Lightbox — als Material aufziehen, nicht aufploppen
   --------------------------------------------------------------------------
   Vorher: hidden = true/false auf einem display:grid-Element. Die Ansicht
   erschien schlagartig, ohne raeumlichen Bezug zur angetippten Kachel.
   Jetzt waechst sie aus der Kachel und baut sich als Flaeche auf.
   -------------------------------------------------------------------------- */

.lightbox {
  /* transform-origin setzt site.js pro Oeffnung auf die Kachel, aus der
     die Ansicht kommt. Der Wert hier ist nur der Rueckfall. */
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.lightbox__figure,
.lightbox img,
.lightbox video {
  will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Typografie — die zwei Ausreisser
   --------------------------------------------------------------------------
   Laufweite ist groessenabhaengig, nie ein fester Wert fuer alle Groessen.
   Die Seite macht das fast ueberall vorbildlich (-0.035em am Hero, -0.025em
   an den Sektionstiteln) — nur h1 und h2 wurden vergessen. Grosse Schrift
   ohne negatives Tracking wirkt auseinandergezogen.
   -------------------------------------------------------------------------- */

h1 {
  letter-spacing: -0.03em;
}
h2 {
  line-height: 1.02;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   5. Die zwei fehlenden Accessibility-Signale
   --------------------------------------------------------------------------
   prefers-reduced-motion war bereits sauber umgesetzt. Die beiden anderen
   Signale fehlten ganz, obwohl sechs backdrop-filter-Ebenen im Einsatz sind.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  /* Milchglas wird undurchsichtig. Der Blur faellt weg, die Flaeche bleibt. */
  .is-scrolled .bar {
    background: #050505;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lightbox {
    background: #030303;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  /* Nahezu deckende Flaechen mit klarer Kante. */
  :root {
    --line: rgba(255, 255, 255, 0.42);
    --line-strong: rgba(255, 255, 255, 0.72);
    --ink-dim: rgba(255, 255, 255, 0.92);
    --ink-faint: rgba(255, 255, 255, 0.78);
  }
  .is-scrolled .bar {
    background: #000;
    border-bottom: 1px solid var(--line-strong);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .btn {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Reduzierte Bewegung heisst nicht "kein Feedback", sondern sanfteres
     Feedback. Der Druck-Effekt bleibt, aber ohne Skalierung — eine
     Helligkeitsaenderung loest keinen vestibulaeren Reiz aus. */
  .btn:active,
  .carousel__arrow:active,
  .lang button:active,
  .lightbox__nav button:active,
  [data-lb-close]:active,
  .skip-link:active {
    transform: none;
    filter: brightness(1.25);
  }
}