/* Ein durchgehender Kameraflug: Zitronen -> Tomaten -> Wein -> Küste -> Meer */
.origin-journey{
  position:relative;
  /* 720svh waren 6020px Scrollweg — rund 60 Mausrad-Umdrehungen fuer vier
     Kapitel, also 15 pro Bildwechsel. Zu lang: Wer nicht weiss, dass unten
     noch etwas kommt, springt vorher ab. 340svh sind ~2,4 Bildschirmhoehen
     Scrollweg, etwa 7 Umdrehungen je Kapitel — genug fuer eine ruhige
     Ueberblendung, ohne zu ermueden. */
  height:340svh;
  color:#fff;
  background:#062f3c;
}

.journey-sticky{
  position:sticky;
  top:0;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  isolation:isolate;
  background:#062f3c;
}

.journey-media,.journey-scene,.journey-scene img,.journey-shade,.journey-copy{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.journey-media{z-index:0}
.journey-scene{
  display:block;
  margin:0;
  overflow:hidden;
  opacity:0;
  transform:translate3d(0,0,0) scale(1.08);
  transform-origin:50% 50%;
  will-change:transform,opacity,clip-path;
}
.journey-scene:first-child{opacity:1}
.journey-scene img{object-fit:cover;object-position:center;transform:translateZ(0)}
.journey-scene--coast img{object-position:center 56%}
.journey-scene--water img{filter:saturate(.84) brightness(.76);object-position:center 22%}
#journeyMarineCanvas{
  position:absolute;
  z-index:6;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  filter:saturate(.86) contrast(.94);
}

.journey-waterline{
  position:absolute;
  z-index:7;
  left:-5%;
  top:100%;
  width:110%;
  height:4px;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(222,248,239,.75) 28%,#fff 50%,rgba(222,248,239,.65) 73%,transparent);
  box-shadow:0 -12px 34px rgba(216,246,235,.55),0 14px 46px rgba(17,103,122,.7);
  will-change:top,opacity;
}

.journey-shade{
  z-index:8;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 48%,transparent 12%,rgba(1,20,24,.16) 70%,rgba(1,14,19,.42) 100%),
    linear-gradient(180deg,rgba(2,25,31,.2),transparent 28%,transparent 65%,rgba(2,19,24,.38));
}
.journey-shade::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.journey-copy{z-index:9;pointer-events:none}
.journey-chapter{
  position:absolute;
  left:50%;
  top:50%;
  width:min(86vw,920px);
  margin:0;
  text-align:center;
  opacity:0;
  visibility:hidden;
  transform:translate3d(-50%,calc(-50% + 28px),0);
  will-change:transform,opacity,filter;
  text-shadow:0 3px 28px rgba(0,18,22,.76);
}
.journey-chapter:first-child{opacity:1;visibility:visible}
.journey-number{
  position:absolute;
  left:50%;
  top:50%;
  z-index:-1;
  transform:translate(-50%,-57%);
  font-family:var(--display);
  font-size:clamp(12rem,29vw,28rem);
  font-style:italic;
  line-height:.7;
  color:rgba(255,255,255,.07);
  text-shadow:none;
}
.journey-eyebrow{
  margin:0 0 1.1rem;
  color:var(--kunde-gelb);
  /* Gemessen: bei .72rem waren es 9,28px echte Groesse — zu klein fuer
     gelben Text auf hellem Foto (Kontrast 1,90 statt noetiger 4,5).
     Groesser UND enger gesperrt: die weite Sperrung liess die Buchstaben
     einzeln stehen und schwaechte die Lesbarkeit zusaetzlich. */
  font-size:clamp(.86rem,1.5vw,1rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  /* Enger Kern gegen die Buchstabenkante statt weichem Hof: 28px Streuung
     trugen den Text nicht. Zusaetzlich eine dunkle Kontur. */
  text-shadow:
    0 1px 2px rgba(0,14,20,.95),
    0 2px 10px rgba(0,14,20,.9),
    0 0 26px rgba(0,14,20,.7);
}
.journey-chapter h1,.journey-chapter h2{
  max-width:11ch;
  margin:0 auto;
  color:#fff;
  font-family:var(--display);
  font-size:clamp(3rem,8vw,7.4rem);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:.92;
  text-wrap:balance;
}
.journey-chapter h1 em,.journey-chapter h2 em{
  display:block;
  color:var(--kunde-gelb);
  font-weight:500;
}
.journey-chapter>p:not(.journey-eyebrow){
  max-width:43ch;
  margin:1.5rem auto 0;
  color:rgba(255,255,255,.92);
  font-size:clamp(1rem,1.8vw,1.24rem);
  line-height:1.6;
  text-wrap:balance;
}
.journey-chapter--hero{width:min(88vw,820px)}
.journey-chapter--hero h1{font-size:clamp(3.4rem,8.8vw,7.8rem)}
.journey-plaque{
  /* Schwebt langsam auf und ab, mit warmem Schein dahinter — wie auf der
     Kundenseite vinoegusto-alzey.de. position:relative wird fuer den
     Schein gebraucht (::before liegt dahinter). */
  position:relative;
  display:block;
  width:clamp(140px,20vw,220px);
  margin:0 auto 1.2rem;
  line-height:0;
  filter:drop-shadow(0 18px 28px rgba(0,20,25,.34));
  animation:plaqueFloat 7s ease-in-out infinite;
}
/* Gelber Schein: unscharfe Flaeche hinter dem Logo, leicht groesser. */
.journey-plaque::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(234,179,8,.20);
  filter:blur(26px);
  transform:scale(1.10);
  pointer-events:none;
}
@keyframes plaqueFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
/* Wer Bewegung reduziert haben will, bekommt den Schein ohne Schweben. */
@media (prefers-reduced-motion:reduce){
  .journey-plaque{animation:none}
}
.journey-plaque img{display:block;width:100%;height:auto;border-radius:3px}
.journey-actions{
  display:flex;
  justify-content:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin-top:1.8rem;
  pointer-events:auto;
}
.journey-actions .btn{border-color:rgba(255,255,255,.9);color:#fff;background:rgba(0,28,36,.3)}
.journey-actions .btn--fill{background:var(--kunde-gelb);border-color:var(--kunde-gelb);color:var(--blu)}

/* Stillgelegt: Der seitenweite Zaehler (.sektionszaehler) steht an
   derselben Stelle und zaehlt die Kino-Kapitel mit. */
.journey-meter{display:none}
.journey-meter--alt{
  position:absolute;
  z-index:10;
  right:clamp(1rem,3vw,2.8rem);
  top:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  transform:translateY(-50%);
  color:rgba(255,255,255,.78);
}
.journey-meter-track{
  position:relative;
  display:block;
  width:1px;
  height:min(34vh,260px);
  overflow:hidden;
  background:rgba(255,255,255,.3);
}
.journey-meter-track i{
  position:absolute;
  inset:0;
  display:block;
  background:var(--kunde-gelb);
  transform:scaleY(0);
  transform-origin:top;
  will-change:transform;
}
.journey-meter-count{font-size:.64rem;font-weight:700;letter-spacing:.18em;white-space:nowrap}

@media (max-width:740px){
  .origin-journey{height:300svh}
  .journey-sticky{min-height:500px}
  .journey-chapter{width:min(82vw,620px)}
  .journey-chapter h1,.journey-chapter h2{font-size:clamp(2.65rem,13.2vw,5.1rem)}
  .journey-chapter>p:not(.journey-eyebrow){font-size:1rem;line-height:1.5;margin-top:1.2rem}
  .journey-number{font-size:clamp(11rem,56vw,19rem)}
  .journey-plaque{width:132px;margin-bottom:.8rem}
  .journey-chapter--hero .journey-eyebrow{font-size:.58rem;letter-spacing:.18em}
  .journey-actions{margin-top:1.25rem;gap:.5rem}
  .journey-actions .btn{padding:.78rem 1rem;font-size:.65rem}
  .journey-meter{right:.7rem}
  .journey-meter-track{height:23vh}
  .journey-meter-count{display:none}
}

@media (prefers-reduced-motion:reduce){
  .origin-journey{height:auto;background:#062f3c}
  .journey-sticky{position:relative;height:auto;min-height:0;overflow:visible}
  .journey-media,.journey-shade,.journey-meter,.journey-waterline{display:none}
  .journey-copy{position:relative;height:auto}
  .journey-chapter,.journey-chapter:first-child{
    position:relative;
    inset:auto;
    display:flex;
    min-height:88svh;
    width:100%;
    padding:5rem max(8vw,1.5rem);
    flex-direction:column;
    justify-content:center;
    opacity:1;
    visibility:visible;
    transform:none;
    filter:none;
    background:linear-gradient(rgba(2,24,29,.3),rgba(2,20,25,.56)),var(--chapter-image) center/cover no-repeat;
  }
}

/* ================= Kapitel 04: Von der Küste nach Alzey ==============
   Zweispaltig: Text links über dem Meer, Innenraumfoto rechts.
   "nach Alzey" steht OBERHALB des Fotos und teilt sich dessen Breite —
   nur so trifft die Zentrierung die Bildmitte statt die Spaltenmitte. */
.journey-chapter--innen{
  --bildbreite:min(38vw,520px);
  width:min(94vw,1240px);
  display:grid;
  grid-template-columns:1.06fr .94fr;
  gap:clamp(1.4rem,3vw,2.8rem);
  align-items:center;
  text-align:left;
}
/* Alles außer Bild und "nach Alzey" gehört in Spalte 1, mittig ausgerichtet:
   sonst zentriert jedes Element für sich und die Kanten fransen aus. */
.journey-chapter--innen > :not(.journey-innenbild):not(.jt-rechts){
  grid-column:1;
  justify-self:center;
}
.journey-chapter--innen h2.jt-links{
  justify-self:center;
  text-align:center;
  margin:0 0 .8rem;
  line-height:1.04;
  white-space:nowrap;
  font-size:clamp(2.2rem,5vw,4.2rem);
}
.jt-rechts{
  grid-column:2;
  grid-row:2;
  /* Gleiche Kante UND gleiche Breite wie das Foto — das Bild ist schmaler
     als seine Spalte, deshalb würde justify-self:center den Text über der
     SPALTE zentrieren statt über dem BILD. */
  justify-self:end;
  width:var(--bildbreite);
  align-self:end;
  margin:0 0 .5rem;
  text-align:center;
  font-family:var(--display,Georgia,serif);
  font-style:italic;
  font-weight:600;
  font-size:clamp(1.9rem,3.6vw,3.2rem);
  line-height:1;
  color:var(--kunde-gelb,#eab308);
  white-space:nowrap;
  text-shadow:0 2px 14px rgba(0,14,18,.85),0 0 34px rgba(0,14,18,.6);
}
.journey-innenbild{
  grid-column:2;
  grid-row:3 / span 3;
  align-self:start;
  justify-self:end;
  /* <figure> bringt vom Browser margin:1em 40px mit — der rechte 40er
     versetzte das Foto gegen die Spaltenkante, während "nach Alzey"
     bündig stand: die Zentrierung lief um genau 40px daneben. */
  margin:0;
  width:100%;
  max-width:var(--bildbreite);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.34),
    0 26px 60px -18px rgba(0,16,22,.75),
    0 6px 18px rgba(0,16,22,.4);
}
.journey-innenbild picture{display:block;line-height:0}
.journey-innenbild img{display:block;width:100%;height:auto;border-radius:inherit}
/* Kästen nur so breit wie ihr Inhalt — über die volle Spalte gezogen
   blieb rechts eine leere Fläche stehen. */
.journey-chapter--innen > p:not(.journey-eyebrow):not(.journey-aktion){
  width:fit-content;
  max-width:46ch;
  margin:0;
  padding:1.15rem 1.4rem;
  line-height:1.62;
  background:rgba(3,20,26,.78);
  backdrop-filter:blur(3px);
  border-radius:10px;
}
.journey-chapter--innen .journey-fakten{
  width:fit-content;
  max-width:100%;
  flex-wrap:wrap;
  justify-content:center;
  border-radius:10px;
}
.journey-chapter--innen .journey-aktion{text-align:center;margin:1.2rem 0 0}
.journey-chapter--innen .journey-eyebrow{margin-bottom:.2rem}

@media (max-width:900px){
  /* Schmale Schirme: Grid raus, Flex rein. Im Quelltext steht das Bild VOR
     dem Text (für die Desktop-Spalte) — mobil würde damit "nach Alzey" über
     "Von der Küste" landen. order legt die Lesereihenfolge fest. */
  .journey-chapter--innen{display:flex;flex-direction:column;text-align:center;gap:1rem}
  .journey-chapter--innen .journey-eyebrow{order:1}
  .journey-chapter--innen h2.jt-links{order:2;text-align:center}
  .journey-chapter--innen > p:not(.journey-eyebrow):not(.journey-aktion){order:3;margin:0 auto}
  .jt-rechts{order:4;width:auto;align-self:center;margin:.4rem 0 .1rem}
  .journey-innenbild{order:5;max-width:min(72vw,340px);margin:0 auto;align-self:center}
  .journey-chapter--innen .journey-fakten{order:6;margin:0 auto}
  .journey-chapter--innen .journey-aktion{order:7}
}

/* ================= Kennzahlen-Kasten =================================
   Nach dem Zurücksetzen fehlte die Gestaltung — die Werte standen nackt
   auf dem Meer. Dunkler Kasten mit Goldkante, Werte in Kundengelb. */
.journey-fakten{
  display:flex;
  gap:0;
  padding:0;
  background:rgba(6,22,34,.86);
  backdrop-filter:blur(4px);
  border:1px solid rgba(234,179,8,.42);
  border-radius:12px;
  box-shadow:0 14px 34px -12px rgba(0,12,20,.6);
  overflow:hidden;
}
.journey-fakten span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  padding:.85rem clamp(1rem,2.4vw,1.9rem);
  white-space:nowrap;
  /* Feine Trennlinien zwischen den Werten statt Abstand — hält den
     Kasten als eine Einheit zusammen. */
  border-left:1px solid rgba(234,179,8,.22);
  /* Beschriftung unter dem Wert — klein, gesperrt, zurueckgenommen. */
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(247,241,228,.82);
}
.journey-fakten span:first-child{border-left:0}
.journey-fakten b{
  font-family:var(--display,Georgia,serif);
  font-size:clamp(1.35rem,2.6vw,1.75rem);
  font-weight:600;
  line-height:1;
  color:var(--kunde-gelb,#eab308);
}


@media (max-width:900px){
  /* Schmal: untereinander statt nebeneinander, sonst wird jede Spalte
     zu eng. Trennlinien wandern auf die Waagerechte. */
  .journey-fakten{flex-direction:column;width:100%}
  .journey-fakten span{
    flex-direction:row;
    justify-content:space-between;
    gap:1rem;
    border-left:0;
    border-top:1px solid rgba(234,179,8,.22);
    padding:.7rem 1.1rem;
  }
  .journey-fakten span:first-child{border-top:0}
}

/* ================= Lebendiger Hintergrund ============================
   Drei Ebenen, die sich unterschiedlich schnell bewegen — dadurch wirkt
   das Standbild atmend statt eingefroren.

   WICHTIG: Die Bewegung liegt auf dem <img> INNERHALB der Szene, nicht auf
   .journey-scene selbst — dort schreibt journey.js beim Scrollen einen
   Inline-transform, der jede CSS-Animation ueberschreiben wuerde.

   Reines CSS, keine zusaetzliche Rechenlast: transform und opacity laufen
   auf der Grafikkarte. Echte wehende Blaetter braeuchten WebGL und wuerden
   die Seite deutlich schwerer machen. */
/* KEIN Zoom auf den Szenen: journey.js schreibt dort beim Scrollen bei
   jedem Frame selbst einen transform (Zeile ~104). Eine CSS-Animation
   parallel dazu laesst die Ueberblendung stocken — die Lebendigkeit
   kommt stattdessen aus den beiden Licht-Ebenen darueber. */
.journey-scene img{transform-origin:52% 48%}
}
/* Jede Szene startet zeitversetzt, sonst atmen alle im Gleichtakt. */

/* Wandernde Lichtstimmung: heller Schleier, der langsam quer zieht —
   liest sich wie Sonne, die durch ziehende Wolken faellt. */
.journey-sticky::before{
  content:"";
  position:absolute;
  inset:-10%;
  z-index:4;
  pointer-events:none;
  background:
    radial-gradient(55% 42% at 28% 22%, rgba(255,246,214,.34), transparent 60%),
    radial-gradient(42% 35% at 74% 62%, rgba(255,232,180,.26), transparent 62%);
  animation:lichtWandern 13s linear infinite alternate;
  mix-blend-mode:soft-light;
}
@keyframes lichtWandern{
  0%   {transform:translate3d(-14%,-8%,0) scale(1)}
  50%  {transform:translate3d(8%,6%,0) scale(1.18)}
  100% {transform:translate3d(16%,-5%,0) scale(1.06)}
}

/* Feiner Dunst, der gegenlaeufig zieht — gibt der Ferne Tiefe. */
.journey-sticky::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:linear-gradient(102deg,
    transparent 8%, rgba(255,255,255,.14) 34%,
    rgba(255,255,255,.06) 52%, transparent 76%);
  animation:dunstZiehen 15s linear infinite;
}
@keyframes dunstZiehen{
  0%   {transform:translate3d(-38%,0,0)}
  100% {transform:translate3d(38%,0,0)}
}

/* Wer Bewegung reduziert haben will, bekommt das Standbild. */
@media (prefers-reduced-motion:reduce){
  .journey-sticky::before,
  .journey-sticky::after{animation:none}
}