/* ══════════════════════════════════════════════════════════════════════════
   DAS JAHR — Bildstrecke, perspektivisch gekippt
   ══════════════════════════════════════════════════════════════════════════
   Eine Reihe Fotos laeuft endlos nach links, die Ebene ist nach hinten
   weggekippt. Die Werte sind Brandnamics eigene:

       transform: perspective(1200px) rotateX(15deg) rotateY(20deg)

   Der Kern des Effekts: es sind KEINE einzelnen Karten im Raum, sondern EINE
   flache Ebene, die als Ganzes verzerrt wird. Deshalb werden die Bilder zu
   Trapezen und die Reihe flieht nach rechts weg.

   Kein Swiper, keine Bibliothek — eine CSS-Animation und ~50 Zeilen jahr.js.

   Diese Datei regelt NUR die Bildstrecke. Kopf (Rubrik, Zier, h2, Fliesstext),
   Bandrhythmus und Einblenden kommen aus stil.css / pro.css, genau wie bei
   #haus, #impressionen und #anreise — das Markup nutzt dieselben Klassen
   (.rubrik.stufe, .zier, h2[data-v2], [data-szene="heben"]).

   Warum kein gap, sondern margin-right auf den Bildern: die Spur enthaelt
   ihren Inhalt zweimal und springt per translate3d(-50%) zurueck. Mit flex-gap
   ist die halbe Spurbreite um g/2 falsch (2N Elemente haben nur 2N-1 Luecken)
   und der Loop ruckt sichtbar. Mit margin-right traegt jedes Element seine
   Luecke selbst -> 50% ist exakt eine Inhaltslaenge. Kein Sprung.
   ══════════════════════════════════════════════════════════════════════════ */

.jahr-band{
  /* Stellschrauben — 1:1 die Werte von brandnamic.com */
  --jahr-persp: 1200px;   /* kleiner = staerkere Flucht                     */
  --jahr-rx: 15deg;       /* Kippung nach hinten                            */
  --jahr-ry: 20deg;       /* Drehung: links kommt vor, rechts laeuft weg    */
  --jahr-breite: 20vw;    /* Bildbreite (Brandnamic: 20vw)                  */
  --jahr-hoehe: 34vw;     /* Bildhoehe — Hochformat                         */
  --jahr-luft: 15px;      /* Abstand zwischen den Bildern (Brandnamic: 15)  */
  /* Umlaufzeit. Brandnamic schiebt eine Bildbreite in 8 s weiter; bei zwoelf
     Bildern à 20vw+15px ergibt das rund 96 s fuer die volle Runde. */
  --jahr-tempo: 96s;
  /* ⭐ Grundfarbe ERBT die Hausfarbe (David 19.09.): Hier stand fest
     #101713 — Brandnamics eigener, fast schwarzer Ton. Der Abschnitt
     traegt aber `band tief`, und `.tief` setzt `--fels` (die dunkle
     Hausfarbe). Weil `.jahr-band` spaeter kommt, gewann das Schwarz —
     bei Hotel Heidi #101713 statt #141b14. Das las sich als schwarzer
     Balken statt als dunkles Hausgruen. Jetzt: --fels, sofern gesetzt.
     `--jahr-dunkel` bleibt als Uebersteuerung je Haus moeglich. */
  --jahr-grund: var(--jahr-dunkel, var(--fels, #101713));  /* dunkler Brandnamic-Grund */  /* Grundfarbe der Sektion        */
  /* Naht zu den Nachbarn. Oben liegt .nach-titel in Creme, unten liegt
     #anreise — das ist selbst schon dunkel (--fels), dort braucht es keinen
     Verlauf. Ein heller waere dort sogar falsch: ein leuchtender Streifen
     zwischen zwei dunklen Baendern. */
  --jahr-naht-oben: var(--creme,#f7f5f0);
  --jahr-naht-unten: transparent;

  /* Bewusst KEIN eigenes padding: .band setzt den Rhythmus aller Baender
     (bei 1440px sind das 172.8px oben/unten und 72px seitlich). Erbt die
     Sektion ihn, steht sie automatisch im gleichen Raster wie #haus,
     #impressionen und #anreise — auch wenn der Wert spaeter angepasst wird.
     Eine Kurzform wie `padding:6rem 0` wuerde den seitlichen Einzug
     plattmachen und der Kopftext klebte am Bildschirmrand. */
  position:relative; isolation:isolate;
  background:var(--jahr-grund);
  overflow:hidden;                 /* faengt die weit ausgeworfene Ebene ab */
}

/* Weiche Naht zum hellen Band darueber — eine harte Kante wuerde die Sektion
   wie ein fremdes Einsprengsel wirken lassen. */
.jahr-band::before,
.jahr-band::after{
  content:""; position:absolute; left:0; right:0; height:clamp(2rem,3.4vw,3.6rem);
  pointer-events:none; z-index:3;
}
.jahr-band::before{ top:0;    background:linear-gradient(180deg,var(--jahr-naht-oben) 0,transparent 100%); }
.jahr-band::after { bottom:0; background:linear-gradient(0deg,  var(--jahr-naht-unten) 0,transparent 100%); }

/* ── Buehne ──────────────────────────────────────────────────────────────── */
.jahr-lauf{
  position:relative;
  /* Aus dem seitlichen Bandeinzug heraus auf die volle Breite: 50% ist die
     halbe Inhaltsbreite, 50vw die halbe Fensterbreite — die Differenz ist
     genau das Padding, egal wie gross es gerade ist. */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-top:clamp(3rem,6vw,5.5rem);
  padding:clamp(2rem,4vw,4rem) 0;
}

/* Seitliche Verlaeufe: die Strecke laeuft ins Nichts statt an eine Kante zu
   stossen. (Brandnamic schneidet hart ab — das hier ist ruhiger.)
   Bewusst zwei aufgelegte Verlaeufe in der Grundfarbe statt mask-image: die
   Maske muss in Safari mit -webkit- doppelt gefahren werden, wird auf einem
   transformierten Nachbarn unzuverlaessig gerastert und verschluckt hier
   gelegentlich gar nichts. Der Grund ist einfarbig — aufgelegte Verlaeufe
   sehen identisch aus und greifen ueberall. Sie verdecken zugleich die harte
   Schnittkante der Buehne. */
.jahr-lauf::before,
.jahr-lauf::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(70px,13%,220px);
  z-index:2; pointer-events:none;
}
.jahr-lauf::before{ left:0;  background:linear-gradient(90deg,var(--jahr-grund) 0,transparent 100%); }
.jahr-lauf::after { right:0; background:linear-gradient(270deg,var(--jahr-grund) 0,transparent 100%); }

.jahr-buehne{
  /* ── Der entscheidende Punkt ──────────────────────────────────────────────
     overflow:hidden MUSS hier stehen, auf demselben Element wie die
     Transformation. Grund: es clippt im lokalen Koordinatensystem, also BEVOR
     perspective() wirkt. Ohne das ist die zu verzerrende Ebene so breit wie
     die ganze Spur (~7600px); ihre Raender liegen dann rechnerisch fast auf
     der Kameraebene, die Bilder werden zehnfach aufgeblasen aus dem Bild
     geworfen und der Compositor zeichnet die Flaeche gar nicht mehr.
     Mit dem Clip ist die Ebene immer nur bildschirmbreit — die Verzerrung
     bleibt gleichmaessig und die Spur darf beliebig lang laufen.
     Etwas breiter als der Viewport, damit die harte Schnittkante ausserhalb
     der weichen Seitenverlaeufe liegt. */
  width:152%; margin-left:-26%; overflow:hidden;

  transform:perspective(var(--jahr-persp)) rotateX(var(--jahr-rx)) rotateY(var(--jahr-ry));
  transform-origin:50% 50%;
  transition:transform 1.6s var(--ruhig,cubic-bezier(.22,.61,.36,1)),
             opacity 1.2s var(--ruhig,cubic-bezier(.22,.61,.36,1));
}
/* Aufrichten beim Eintreten: die Ebene liegt zuerst flacher und dreht sich
   in ihre Endlage — die Strecke "hebt" sich in den Blick.
   Die Regel haengt an .jahr-an-bord, die jahr.js als Erstes auf <html> setzt.
   Laedt das Skript nicht (Fehler, Blocker, alter Browser), greift sie nicht
   und die Strecke steht einfach fertig da, statt unsichtbar zu bleiben.
   Dieselbe Mechanik wie html.pro im Onepager. */
.jahr-an-bord .jahr-band:not(.an) .jahr-buehne{
  opacity:0;
  transform:perspective(var(--jahr-persp)) rotateX(calc(var(--jahr-rx) + 8deg)) rotateY(var(--jahr-ry)) translateY(60px);
}

/* ── Spur ────────────────────────────────────────────────────────────────── */
.jahr-spur{
  display:flex; width:max-content;
  animation:jahr-zug var(--jahr-tempo) linear infinite;
}
@keyframes jahr-zug{ to{ transform:translate3d(-50%,0,0) } }

/* Ausserhalb des Blicks steht alles still — spart Rechenzeit auf schwachen
   Geraeten und im Hintergrundtab. */
.jahr-band:not(.sichtbar) .jahr-spur,
.jahr-band.pausiert .jahr-spur{ animation-play-state:paused; }

/* ── Bilder ──────────────────────────────────────────────────────────────── */
.jahr-bild{
  position:relative; flex:none; margin:0 var(--jahr-luft) 0 0;
  width:var(--jahr-breite); height:var(--jahr-hoehe);
  overflow:hidden; background:#0b1d28;
}
.jahr-bild img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:saturate(.94) contrast(1.03) brightness(.97);
  transition:filter .6s var(--ruhig,cubic-bezier(.22,.61,.36,1)),
             transform .9s var(--ruhig,cubic-bezier(.22,.61,.36,1));
}
@media (hover:hover){
  .jahr-bild:hover img{ filter:saturate(1.04) contrast(1.03) brightness(1.06); transform:scale(1.045); }
}

/* ── Kleinere Schirme ────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .jahr-band{ --jahr-breite:32vw; --jahr-hoehe:46vw; --jahr-ry:22deg; --jahr-persp:1000px; }
}
@media (max-width:640px){
  .jahr-band{ --jahr-breite:52vw; --jahr-hoehe:70vw; --jahr-ry:25deg; --jahr-persp:700px; --jahr-luft:10px; }
}

/* ── Bewegung aus ────────────────────────────────────────────────────────── */
@media not all{
  .jahr-spur{ animation:none }
  .jahr-buehne,
  .jahr-an-bord .jahr-band:not(.an) .jahr-buehne{
    transform:perspective(var(--jahr-persp)) rotateX(var(--jahr-rx)) rotateY(var(--jahr-ry));
    opacity:1; transition:none;
  }
}