* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background: #F0E6D2;
}

/* The page (dike-strip especially) was only ever tuned against a 2560px-wide
   screen. On a 1920px Full-HD monitor at 100% browser zoom, every element
   still renders at the same px size, so it no longer fits comfortably --
   client reported having to manually zoom the browser out to ~70% for it to
   look right. This reproduces that zoom automatically in the 1920px range,
   while leaving both the 2560px "designed for" width and small/tablet
   viewports (which already get their own responsive treatment) untouched. */
@media (min-width: 1300px) and (max-width: 2300px) {
  body { zoom: 0.7; }
}

/* Positioning anchor for .dike-strip: position:absolute there resolves
   top:0 against this box, which starts exactly at the hero's bottom edge
   in normal flow -- a fixed, content-independent reference. */
main { position: relative; }

/* ---------- Hero header: lighthouse still + rotating double beam ---------- */

.hero {
  position: relative;
  width: 100%;
  /* leuchtturm-header-crop.png is pre-cropped to exactly 1400/710 (left
     margin and bottom beach trimmed in the file itself, see
     scripts/crop-hero-still.mjs) so this ratio needs zero further cropping
     from object-fit:cover -- keeps both axes stable regardless of viewport
     width, instead of flipping which axis gets cropped. Height dropped
     from 860 to 710 to trim the boat's waterline/foreground and shorten
     the hero overall (client request), keeping sea/horizon/lighthouse+masts
     intact -- see .hero__bg's object-position for why the video crops from
     the same edge. */
  aspect-ratio: 1400 / 710;
  overflow: hidden;
  background: #1C2B3A;
}

.hero__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Top-anchored (not 50% 50%) so if the video's own native aspect ratio
     ever differs from the container's, object-fit:cover crops the excess
     off the BOTTOM (boat/waterline) instead of splitting the crop evenly
     top and bottom, which would eat into the sky/lighthouse too. */
  object-position: 50% 0%;
}

/* Lamp position re-measured against leuchtturm-header-crop.png (source
   glass-pane center x=23%/y=16.5% of the raw 1536x1024 PNG, minus the
   136px/32px crop offset). --lamp-left divides by the (unchanged) 1400
   width; --lamp-top divides by the crop's height, which shrank from 860 to
   710 when the bottom (boat waterline) was trimmed -- same absolute pixel
   position (136.96px from top, untouched by a bottom-only crop) is now a
   bigger fraction of the shorter height, so this needed recalculating even
   though the lamp itself didn't move. */
:root {
  --lamp-left: 15.5%;
  --lamp-top: 19.3%;
  --beam-period: 6s;
}

/* Single beam travelling strictly horizontally out of the lamp at a fixed
   height: no rotation at all. Cone-shaped -- a point at the lamp, flaring
   out wide toward the far end -- via clip-path, not a flat rectangle.
   It flashes at the source, grows out toward the viewer ("strahlt auf den
   Zuschauer"), sweeps across the full width, then fades toward the back. */
.hero__beam {
  position: absolute;
  left: var(--lamp-left);
  top: var(--lamp-top);
  width: 80%;
  height: 12.8vmax; /* 20% narrower overall */
  transform-origin: 0% 50%;
  transform: translateY(-50%) scaleX(0);
  clip-path: polygon(0% 47%, 100% 4%, 100% 96%, 0% 53%);
  background: linear-gradient(to right,
    rgba(255, 235, 190, 0.95) 0%,
    rgba(255, 225, 170, 0.55) 30%,
    rgba(255, 220, 160, 0.2) 65%,
    transparent 100%
  );
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: beam-sweep var(--beam-period) linear infinite;
  pointer-events: none;
}

@keyframes beam-sweep {
  0%   { transform: translateY(-50%) scaleX(0);    opacity: 0; } /* nothing yet */
  4%   { transform: translateY(-50%) scaleX(0.04); opacity: 1; } /* flash at the source */
  48%  { transform: translateY(-50%) scaleX(1);    opacity: 1; } /* fully extended */
  52%  { transform: translateY(-50%) scaleX(1);    opacity: 1; } /* brief stop */
  84%  { transform: translateY(-50%) scaleX(0.3);  opacity: 1; } /* retracting, does NOT finish the run */
  85%  { transform: translateY(-50%) scaleX(0.3);  opacity: 0; } /* cuts out here, never reaches the lamp again */
  100% { transform: translateY(-50%) scaleX(0);    opacity: 0; } /* stays gone until the loop restarts */
}

.hero__lamp-glow {
  position: absolute;
  left: var(--lamp-left);
  top: var(--lamp-top);
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -17px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 235, 190, 0.95) 0%, rgba(255, 214, 140, 0.5) 45%, transparent 75%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero__wordmark {
  position: absolute;
  left: 30%;
  top: 12.5%;
  right: 2%;
  margin: 0;
  animation: wordmark-flash var(--beam-period) linear infinite;
}

.hero__wordmark h1 {
  margin: 0;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.35em;
}

.hero__lede {
  color: #FBF6EA;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.78rem, 1.7vw, 1.15rem);
  letter-spacing: 0.03em;
  -webkit-text-stroke: 0.5px rgba(20, 14, 8, 0.55);
  text-shadow:
    0 1px 0 rgba(20, 14, 8, 0.6),
    0 2px 5px rgba(20, 14, 8, 0.7),
    0 4px 14px rgba(0, 0, 0, 0.55);
}

.hero__name {
  color: #FBF6EA;
  font-family: 'Yellowtail', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: clamp(2rem, 6.6vw, 5.2rem);
  letter-spacing: 0.005em;
  -webkit-text-stroke: 0.6px rgba(20, 14, 8, 0.5);
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.45),
    2px 3px 0 rgba(20, 14, 8, 0.55),
    0 3px 18px rgba(0, 0, 0, 0.55);
}

@keyframes wordmark-flash {
  0%, 30%  { filter: brightness(1);   text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
  50%      { filter: brightness(1.6); text-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 30px rgba(255, 225, 160, 0.9); }
  70%, 100%{ filter: brightness(1);   text-shadow: 0 2px 10px rgba(0,0,0,0.35); }
}

/* ---------- Shared type & rhythm ---------- */

h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 400;
  color: #1C2B3A;
  margin: 0 0 1rem;
}

.log__kicker {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #2E5F6B;
  margin: 0 0 0.6rem;
}

.log__kicker--light { color: rgba(240, 230, 210, 0.75); }

/* ---------- Video log: open logbook ---------- */

.log {
  /* 1180px base x 1.2 x 1.1 -- .log__intro has its own independent 640px
     max-width (see below) so widening this only grows .desk-scene/the
     logbook, not the heading/lede text column above it. */
  max-width: 1558px;
  margin: 0 auto;
  /* Top padding (not the intro panel's margin-top) is what makes room above
     the signboard now -- a child's margin-top collapses straight through a
     parent with no padding/border of its own, which was quietly pushing
     <main> itself (and with it .dike-strip, absolutely positioned against
     main) down the page by that same amount, reopening the header gap. */
  padding: 0 1.5rem 3rem;
  /* Reserves at least as much flow height as .dike-strip's absolute 1248px
     box (see .dike-strip), so the next section (Kooperationen) never
     starts before the strip has visually finished, regardless of whether
     the logbook is open or closed. */
  min-height: 1248px;
}

/* A small signboard mounted above the table instead of a heading that just
   sits in the top-left corner, disconnected from the (much wider, centered)
   desk below it. Kept deliberately light -- a parchment wash and two thin
   gold rules, not a full plaque -- so it reads as "maritime" without
   competing with the logbook itself. */
.log__intro {
  max-width: 700px;
  margin: 0 auto 0.75rem;
  padding: 0.625rem 2rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(240, 230, 210, 0.6), rgba(240, 230, 210, 0.15));
  border-top: 1px solid rgba(224, 169, 60, 0.55);
  border-bottom: 1px solid rgba(224, 169, 60, 0.55);
}

.log__intro .log__kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
}

.log__intro .log__kicker::before,
.log__intro .log__kicker::after {
  content: '';
  height: 1px;
  width: 2rem;
  background: rgba(46, 95, 107, 0.35);
}

.log__lede { color: #4a4438; line-height: 1.6; }
.log__lede a { color: #A63A2E; }

.desk-scene {
  position: relative;
  background-image: url('../assets/img/desk-wood.png');
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  padding: clamp(0.625rem, 4vw, 1.25rem) clamp(1rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
  /* Tilts the whole desk (wood, logbook, pen, sextant -- everything painted
     inside, including the page-flip's own 3D transforms further in, which
     get flattened into this same plane since transform-style stays the
     default `flat`) back and away from the viewer instead of reading as a
     flat frontal rectangle. Pivoting from the bottom edge keeps the front
     edge (closest to the viewer) anchored in place while the far edge
     recedes and foreshortens, which is what actually sells depth here. */
  transform: perspective(1400px) rotateX(12deg);
  transform-origin: 50% 100%;
  box-shadow: 0 30px 40px -20px rgba(20, 14, 8, 0.45);
}

.desk-scene__pen,
.desk-scene__sextant {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 2;
}

.desk-scene__pen {
  width: min(34%, 422px);
  right: 6%;
  bottom: 8%;
  transform: rotate(-3deg);
}

.desk-scene__sextant {
  width: min(16%, 224px);
  left: 6%;
  top: 10%;
  transform: rotate(6deg);
}

.desk-scene:has(.logbook[data-state="open"]) .desk-scene__pen,
.desk-scene:has(.logbook[data-state="open"]) .desk-scene__sextant {
  opacity: 0;
  transform: scale(0.94);
}

.logbook {
  position: relative;
  width: 100%;
  max-width: 1531px;
}

/* ---------- Closed cover ---------- */

.logbook__cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: 100%;
  max-width: 551px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  background-image: url('../assets/img/logbook-leather.png');
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 0 0 1px rgba(224, 169, 60, 0.35),
    inset 10px 0 18px -12px rgba(0, 0, 0, 0.55),
    0 24px 50px rgba(20, 14, 8, 0.4),
    0 4px 12px rgba(20, 14, 8, 0.25);
  cursor: pointer;
  padding: 2rem 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logbook__cover:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(224, 169, 60, 0.45),
    inset 10px 0 18px -12px rgba(0, 0, 0, 0.55),
    0 30px 56px rgba(20, 14, 8, 0.45),
    0 4px 12px rgba(20, 14, 8, 0.3);
}

.logbook__cover-emblem {
  width: 58%;
  height: auto;
  color: #E0A93C;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)) drop-shadow(0 -1px 0 rgba(255,255,255,0.08));
}

.logbook__cover-title {
  font-family: 'Yellowtail', 'Brush Script MT', cursive;
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: #E0A93C;
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.logbook__cover-subtitle {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.3rem;
  color: #F0E6D2;
  margin-top: -0.6rem;
}

.logbook__cover-cta {
  margin-top: 0.6rem;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F0E6D2;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(224, 169, 60, 0.7);
  box-shadow:
    inset 0 0 0 3px rgba(20, 14, 8, 0.3),
    inset 0 0 0 4px rgba(224, 169, 60, 0.35);
}

.logbook[data-state="open"] .logbook__cover {
  display: none;
}

/* ---------- Open spread ---------- */

.logbook__spread {
  display: none;
  position: relative;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  background-image: url('../assets/img/logbook-leather.png');
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 0 0 1px rgba(224, 169, 60, 0.35),
    0 24px 50px rgba(20, 14, 8, 0.35),
    0 4px 12px rgba(20, 14, 8, 0.25);
  padding: 0.7rem;
  gap: 0.7rem;
}

.logbook[data-state="open"] .logbook__spread {
  display: flex;
}

.logbook__spine {
  flex: 0 0 84px;
  border-radius: 6px;
  background: linear-gradient(to right, rgba(0,0,0,0.32), rgba(0,0,0,0.05) 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 2px 0 6px rgba(0,0,0,0.4), inset -1px 0 0 rgba(255,255,255,0.06);
}

.logbook__emblem {
  width: 100%;
  height: auto;
  padding: 0.6rem 0.3rem;
  color: #E0A93C;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)) drop-shadow(0 -1px 0 rgba(255,255,255,0.08));
}

.logbook__edge {
  flex: 0 0 28px;
  border-radius: 6px;
  background: linear-gradient(to left, rgba(0,0,0,0.28), rgba(0,0,0,0.03) 65%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E0A93C;
  opacity: 0.85;
}

.logbook__edge svg { width: 70%; height: auto; }

.logbook__leafslot {
  position: relative;
  flex: 1;
  height: 871px;
  border-radius: 4px;
  overflow: hidden;
  perspective: 1800px;
  box-shadow: inset 0 0 30px rgba(60, 40, 20, 0.25);
}

.logbook__leaf {
  display: none;
  position: relative;
  height: 100%;
  padding: 2.2rem 2rem 2rem;
  background-color: #F0E6D2;
  transform-origin: 0% 50%;
  backface-visibility: hidden;
  overflow-y: auto;
}

.logbook__leaf.is-active { display: block; }

.logbook__leaf--paper {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 2rem 1.6rem;
  background-image:
    linear-gradient(rgba(224, 169, 60, 0.05) 1px, transparent 1px),
    url('../assets/img/logbook-paper.png');
  background-size: 100% 2.15rem, cover;
  background-position: 0 0.4rem, center;
}

.logbook__leaf--paper.is-active { display: grid; }

.logbook__leaf-title {
  grid-column: 1 / -1;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 1.7rem;
  color: #1C2B3A;
  border-bottom: 1.5px solid rgba(28, 43, 58, 0.3);
  padding-bottom: 0.3rem;
  margin: -0.4rem 0 0.2rem;
}

.logbook__leaf--bio {
  background-image: url('../assets/img/logbook-leather.png');
  background-size: cover;
  background-position: center;
  color: #F0E6D2;
}

.logbook__leaf--bio .log__kicker { color: rgba(240, 230, 210, 0.75); }
.logbook__leaf--bio h2 { color: #F0E6D2; }
.logbook__leaf--bio p { color: rgba(240, 230, 210, 0.85); line-height: 1.65; margin-bottom: 0.9rem; max-width: 46ch; }

.logbook__bio-photo {
  width: 108px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #E0A93C;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.35);
  float: right;
  margin: 0 0 0.8rem 1rem;
}

.logbook__leaf::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 10px 0 24px -14px rgba(40, 26, 14, 0.55);
}

.logbook__leaf.is-turning-next { animation: page-turn-next 0.5s cubic-bezier(.2,.7,.3,1); }
.logbook__leaf.is-turning-prev { animation: page-turn-prev 0.5s cubic-bezier(.2,.7,.3,1); }

@keyframes page-turn-next {
  0%   { opacity: 0; transform: rotateY(10deg) translateX(2%); }
  100% { opacity: 1; transform: rotateY(0) translateX(0); }
}

@keyframes page-turn-prev {
  0%   { opacity: 0; transform: rotateY(-10deg) translateX(-2%); }
  100% { opacity: 1; transform: rotateY(0) translateX(0); }
}

.album__pager[hidden] { display: none; }

/* Centered under the spread (.logbook__spread is position:relative) instead
   of a fixed viewport pixel offset -- stays correctly centered regardless of
   book width/viewport. */
.album__pager {
  display: block;
  font-family: 'Courier New', monospace;
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  transform: translateX(-50%);
}

/* The turn-page buttons live inside their own page (.logbook__leafslot is
   position:relative and overflow:hidden), pinned to that page's bottom
   corner -- left page/prev on its bottom-left, right page/next on its
   bottom-right -- so they always sit on the actual page regardless of
   viewport width, instead of a fixed desk-scene pixel offset that only
   lined up at one specific screen size. */
.logbook__leafslot { position: relative; }
[data-album-prev],
[data-album-next] {
  position: absolute;
  bottom: 1rem;
  z-index: 5;
}
[data-album-prev] { left: 1rem; }
[data-album-next] { right: 1rem; }

.album__btn {
  background: none;
  border: 1px solid rgba(28, 43, 58, 0.35);
  color: #1C2B3A;
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.album__btn:hover { border-color: #A63A2E; background: rgba(166, 58, 46, 0.06); }
.album__btn:disabled { opacity: 0.3; cursor: default; background: none; border-color: rgba(28, 43, 58, 0.35); }

.album__pageno { font-size: 0.85rem; color: #2E5F6B; }

.logbook__entry {
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.logbook__entry:hover,
.logbook__entry:focus-visible {
  transform: rotate(0deg) translateY(-3px);
  filter: brightness(1.03);
  z-index: 3;
}

.logbook__entry:nth-child(4n+1) { --tilt: -2.4deg; }
.logbook__entry:nth-child(4n+2) { --tilt: 1.6deg; }
.logbook__entry:nth-child(4n+3) { --tilt: -1.1deg; }
.logbook__entry:nth-child(4n+4) { --tilt: 2.2deg; }

.logbook__entry::before {
  content: '';
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 2.6rem;
  height: 1.05rem;
  margin-left: -1.3rem;
  background: rgba(224, 169, 60, 0.4);
  border: 1px solid rgba(224, 169, 60, 0.55);
  transform: rotate(-5deg);
  box-shadow: 0 2px 3px rgba(0,0,0,0.15);
}

.logbook__entry:nth-child(even)::before { transform: rotate(4deg); }

.logbook__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: sepia(0.2) saturate(0.88);
  border: 5px solid #FBF6EA;
  box-shadow: 0 3px 8px rgba(28, 20, 10, 0.35);
  margin-bottom: 0.6rem;
}

.logbook__tag {
  align-self: flex-start;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #A63A2E;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  transform: rotate(-2deg);
  margin-bottom: 0.35rem;
}

.logbook__entry--leni .logbook__tag { color: #2E5F6B; }

.logbook__caption {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #1C2B3A;
}

@media (max-width: 720px) {
  .logbook__spread { flex-direction: column; }
  .logbook__spine {
    flex: 0 0 56px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.32), rgba(0,0,0,0.05) 60%);
  }
  .logbook__edge { display: none; }
  .logbook__emblem { width: auto; height: 100%; padding: 0.3rem 0.8rem; }
  .logbook__leaf--paper { grid-template-columns: 1fr; padding: 1.8rem 1.4rem 2rem; gap: 1.8rem; }
  .logbook__leaf--bio { padding: 1.8rem 1.4rem 2rem; }
  .logbook__bio-photo { width: 84px; }
  .desk-scene__pen { width: 46%; right: 2%; bottom: 2%; }
  .desk-scene__sextant { width: 24%; left: 2%; top: 2%; }
}

/* ---------- Deich-Streifen: animierter Radweg mit Schafen ---------- */

.log { position: relative; z-index: 30; }

.dike-strip {
  /* No z-index here on purpose: giving this its own stacking context would
     cap every descendant (including the riders that must cross in front of
     the table) at this layer no matter what z-index they're given. Leaving
     it at auto lets .log's z-index:2 still cover the strip by default
     (auto loses to an explicit z-index the same as before), while specific
     children can opt out with their own explicit z-index. */
  /* Absolutely positioned against <main> (top:0 = flush with the hero,
     which is <main>'s previous sibling) instead of flow + negative
     margin-top. The old approach coupled this strip's position to the
     exact height of everything in .log -- which changes the moment the
     logbook opens (taller spread) or webfonts swap in -- so the strip
     visibly drifted and reopened the header gap. Being absolute removes it
     from flow entirely, so .log's own height can do whatever it wants. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1248px;
  overflow: hidden;
  /* Lets descendants use cqw (container-query width) instead of vw for the
     rider crossing distance -- see @keyframes ride-across. vw is always the
     real browser viewport width, but this container's own width:100% can
     differ from that (e.g. under the Full-HD zoom media query, which
     inflates the effective CSS pixel width here without changing vw),
     which made riders travel too short a distance and stop mid-strip
     instead of exiting. cqw tracks this container's actual width instead. */
  container-type: inline-size;
  background-image: url('../assets/img/dike-strip-tile.webp');
  background-repeat: repeat-x;
  background-size: auto 145%;
  background-position: left bottom;
}

/* Real photo sky, supplied pre-cut with a transparent lower half. Kept at
   full real-world scale (not shrunk to fit the strip) -- .dike-strip grew
   tall enough instead, with most of the extra height hidden behind the
   captain's table like the rest of the sky, so only a believably-scaled
   slice of lighthouse + clouds peeks out on each side. Sized by width with
   height:auto to keep its own aspect (stretching distorted the tower into
   an oval last time), bottom-aligned so its own local horizon lands right
   where the tile's grass starts. Both sides now use the same lighthouse
   photo (left one mirrored + shifted so only its clouds show, tower pushed
   off-canvas) so the sky tone matches and the centre seam disappears. */
.dike-strip__sky {
  position: absolute;
  width: 1500px;
  height: auto;
  z-index: 0;
}

.dike-strip__ship-preview {
  position: absolute;
  /* Starts already mostly on-screen (only the bow/kussmund end, at the
     sprite's own left ~1150px, stays off-screen) instead of fully
     off-screen -- the stern leads (this asset is pre-mirrored for
     stern-first travel) and its rainbow "AIDA" logo sits ~1150-1263px
     into the sprite from the left, so starting further off would hide it
     at the very start of every loop. */
  left: -1150px;
  bottom: 780px;
  width: 1688px;
  height: auto;
  z-index: 12;
  /* cqw (container-query width, tracks .dike-strip's own width), not vw --
     vw is the real browser viewport width and drifts out of sync with a
     width:100% container under the Full-HD zoom media query (see
     @keyframes ride-across for the same fix on the cyclists). */
  animation: ship-cross 600s linear infinite;
}

@keyframes ship-cross {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100cqw + 1688px)); }
}

.dike-strip__sky--right { right: 0; bottom: 611px; }
/* Right-anchored (not left:-430px) so it stays locked to .dike-strip__sky--right's
   own left edge (10px overlap, matches the original left:-430px position
   exactly at the 2560px reference width) regardless of container width --
   two independently left/right-anchored halves drift apart and open a gap
   whenever the container's width differs from that one reference width
   (including the zoom media query's inflated local width). */
.dike-strip__sky--left { right: 1490px; bottom: 611px; transform: scaleX(-1); }

/* Actual standalone crop of just the tower (color-masked free of its sky
   background, not clipped from the full sky image) painted above the
   sheep/lambs so they visibly walk behind the lighthouse instead of in
   front of it, without hiding sheep under the much wider sky/clouds
   rectangle too. A hand-written clip-path (rect or polygon) on the full
   1900x1300 sky image kept landing in the wrong place -- a real cropped
   asset sidesteps that entirely. Its position/size is the same right-edge
   math as .dike-strip__sky--right (right:0, bottom:611px, scale
   1500/1900), just re-based on where this 400x620 crop (natural pixels
   1400-1800, 480-1100) sits inside that original frame. */
.dike-strip__tower-cutout {
  position: absolute;
  right: 79px;
  bottom: 769px;
  width: 316px;
  height: auto;
  z-index: 20;
}

/* Wrapper carries position + movement; the child (img or svg) carries the
   static left/right facing flip. Keeping those on separate elements avoids
   the animation's own transform overwriting a flip set on the same element
   every frame, which is what made reversed sheep appear to walk backwards. */
.dike-strip__critter {
  position: absolute;
  top: var(--y, 60%);
  left: var(--x, 10vw);
  /* Ties stacking to how far up/down the sheep is: further up the pasture
     (smaller --y) reads as further away, so it must stay behind sheep
     lower down (closer to the fence/viewer) wherever they overlap. */
  z-index: var(--z, 1);
  /* The source GIFs' own walk cycle doesn't loop cleanly (each one drifts
     left across its own frames and snaps back), so translating them across
     the strip always eventually showed that snap as the sheep "walking
     backward" no matter how slowly. They graze in place instead -- the
     GIF's own in-frame motion is all the movement now -- then fade out and
     back in a short distance away (--tx/--ty) every so often, never a
     visible slide. */
  animation: graze-inplace var(--dur, 70s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Sheep that actually walk all the way across the strip (see @keyframes
   sheep-cross / sheep-cross-rev below) instead of grazing in place. Base
   `left`/`right` starts them fully off-screen, like the cyclists, so no
   opacity fade-in/out is needed -- entering and exiting the frame IS the
   whole point now. --y/--z still control vertical placement and depth
   stacking, same as the in-place grazers; --x/--tx/--ty are unused here. */
.dike-strip__critter--walk {
  left: -140px;
  animation: sheep-cross var(--walk-dur, 754800ms) linear infinite;
  animation-delay: var(--delay, 0s);
}

.dike-strip__critter--walk.dike-strip__critter--rev {
  left: auto;
  right: -140px;
  animation-name: sheep-cross-rev;
}

.dike-strip__critter--ride {
  top: auto;
  bottom: var(--yb, 7%);
  left: -90px;
  /* Same depth logic as the sheep: further up the path (bigger --yb) reads
     as further away, so it must stay behind a rider lower down (smaller
     --yb, closer to the viewer) wherever their paths cross. Always kept
     above 30 (.log) so every rider still crosses in front of the table. */
  z-index: var(--z, 40);
  animation-name: ride-across;
  animation-timing-function: linear;
}

.dike-strip__sheep-static {
  position: absolute;
  display: block;
  width: 120px;
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}

/* The two lying-sheep source photos are overexposed/glowing (per client
   feedback) -- darkened in-browser via filter rather than reprocessing the
   boomerang GIFs, so it's cheap to re-tune the amount. */
.dike-strip__sheep-static[src*="sheep-lying"] {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)) brightness(0.94) saturate(1.08);
}

.dike-strip__critter--ride.dike-strip__critter--rev {
  left: auto;
  right: -90px;
  animation-name: ride-across-rev;
}

.dike-strip__critter--ride.dike-strip__critter--rev .dike-strip__bike {
  transform: scaleX(-1);
}

.dike-strip__sheep-img {
  display: block;
  width: 34px;
  height: auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}

.dike-strip__sheep-img--lamb { width: 22px; }

/* Animated GIF exports frame the animal closer than the static PNGs did,
   so they need smaller widths to land at the same on-path visual size. */
.dike-strip__sheep-img--anim { width: 120px; }
.dike-strip__sheep-img--anim-lamb { width: 73px; }

.dike-strip__critter--rev .dike-strip__sheep-img { transform: scaleX(-1); }

/* Walking sheep only: sheep-animated.gif's trim (frame 0..101) already gets
   frame 101 close to frame 0's pose, but not identical -- there's still a
   small pose "snap" at the native GIF's own loop restart. A crossfade blend
   of the two poses was tried first and rejected (alpha-blending two
   different leg positions shows as a visible double-exposure ghost, not a
   clean dissolve -- see project memory). This is the fallback: a brief
   opacity dip exactly AT the loop-restart instant hides the snap behind a
   blink instead of blending it. --cycle-ms and --blink-delay are set per
   instance by the phase-restart script further down (same real-time
   reference the script already uses to resync the GIF's own src, so the
   blink and the loop restart land on the same moment). */
.dike-strip__critter--walk .dike-strip__sheep-img--anim,
.dike-strip__sheep-static[data-blink] {
  animation: sheep-loop-blink var(--cycle-ms, 3400ms) linear infinite;
  animation-delay: var(--blink-delay, 0s);
}

@keyframes sheep-loop-blink {
  0%, 0.5% { opacity: 0; }
  1.5%, 98.5% { opacity: 1; }
  99.5%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dike-strip__critter--walk .dike-strip__sheep-img--anim { animation: none; }
}

/* Client-supplied "laufendes Schaf neu.gif" (assets/img/sheep-walk-new-processed.gif):
   walks continuously for its whole 209-frame loop (no stand-and-graze
   phase like the other sheep), so unlike @keyframes sheep-cross it doesn't
   need per-step ramp+hold stops -- a plain linear translateX over the full
   crossing is mathematically identical here since the rate never changes.
   The hoof-drag measurement that originally derived this duration
   (~1,000,960ms) was confirmed WRONG by the client watching it live --
   roughly 12x too slow, cause unclear (possibly the measured stride was
   only a fraction of the true one, or the source video's own apparent
   walking speed just doesn't match its stride geometry the way the other,
   hand-tuned sheep assets do). Client picked the correct speed directly by
   comparing 4 side-by-side candidates (2x/5x/8x/12x the original rate) --
   83413ms is that chosen (12x) duration, kept as a flat number since it's
   now empirical, not derived. */
.dike-strip__critter--walk-new {
  left: -190px;
  animation: sheep-new-cross 83413ms linear infinite;
}

@keyframes sheep-new-cross {
  0% { transform: translateX(0); }
  100% { transform: translateX(2900px); }
}

.dike-strip__sheep-img--anim-new {
  width: 170px;
  /* Blink disabled per client feedback -- too disruptive while the
     speed/scale is still being calibrated. Revisit once the movement
     itself is confirmed correct. */
}

/* TEMPORARY: hides every sheep/lamb except the two already-boomeranged
   lying ones, so the new walking sheep can be judged in isolation while
   its speed is recalibrated. Remove this rule (and the
   dike-strip__critter--hidden-temp class references in index.html) once
   done. */
.dike-strip__critter--hidden-temp { display: none; }

/* KI-Tiere (js/deich-tiere.js). Die Ebene bekommt bewusst KEIN z-index,
   damit sie keinen eigenen Stapelkontext bildet: jedes Tier sortiert sich
   mit seinem eigenen z-index gegen Leuchtturm (20) und Logbuch-Tisch (30). */
.deich-tiere {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.deich-tier {
  position: absolute;
  left: 0;
  will-change: transform;
  transition: opacity 0.6s ease;
}

.deich-tier__clip {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
}

.deich-tier__clip[hidden] { display: none; }

.deich-tier--links .deich-tier__clip { transform: scaleX(-1); }

/* Hinter dem Leuchtturmsockel ausblenden statt hindurchlaufen */
.deich-tier--verdeckt { opacity: 0; }

.dike-strip__bike {
  display: block;
  width: 304px;
  height: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.3));
}

/* Animated GIF export frames the rider closer (bike fills more of the square
   frame than in the static PNG's wide vignette crop), so it needs a smaller
   width to land at the same on-path visual size as the still cyclists. */
.dike-strip__bike--anim { width: 268px; }
.dike-strip__bike--anim2 { width: 253px; }
.dike-strip__bike--anim3 { width: 282px; }

.dike-strip__critter--ride.dike-strip__critter--rev .dike-strip__bike {
  transform: scaleX(-1);
}

/* Lambs graze in place (no measured step data for lamb-animated.gif yet --
   it's mirrored the other way and its front legs aren't spread apart at
   frame 0 the way the sheep's are, so the sheep's step measurements don't
   transfer; see project memory). Holds at the base spot, fades out, jumps
   to a nearby spot (--tx/--ty, invisible during the jump so it's never a
   visible slide), holds there, fades out, jumps back, repeats. 100% is
   spelled out explicitly for both transform and opacity: a property
   missing its final keyframe doesn't hold the last value, it falls back to
   the element's un-animated style (translate(0,0), opacity:1), which
   briefly undid the jump/fade. The big sheep uses a different mechanism
   entirely now -- see .dike-strip__critter--walk / @keyframes sheep-cross
   below -- an actual walk all the way across the strip built from its
   real measured step. */
@keyframes graze-inplace {
  0%    { opacity: 1; transform: translate(0, 0); }
  36%   { opacity: 1; transform: translate(0, 0); }
  40%   { opacity: 0; transform: translate(0, 0); }
  41%   { opacity: 0; transform: translate(var(--tx, 12vw), var(--ty, -2%)); }
  45%   { opacity: 1; transform: translate(var(--tx, 12vw), var(--ty, -2%)); }
  86%   { opacity: 1; transform: translate(var(--tx, 12vw), var(--ty, -2%)); }
  90%   { opacity: 0; transform: translate(var(--tx, 12vw), var(--ty, -2%)); }
  91%   { opacity: 0; transform: translate(0, 0); }
  95%   { opacity: 1; transform: translate(0, 0); }
  100%  { opacity: 1; transform: translate(0, 0); }
}

/* Only the first 28.6% of the (shared, 35s) duration is the actual ride --
   the remaining ~71% holds off-screen at the far end. Every rider uses this
   same shape; --delay alone decides WHEN in the shared 35s cycle each
   one's window falls. Slots are worked out (see index.html) so at most two
   overlap at once, with only a short ~3s breather per cycle instead of a
   long empty stretch. */
/* Generated by scripts/generate-sheep-cross-keyframes.mjs -- do not hand-edit.
   224 steps x 13px = 2912px total travel,
   3400ms per step (1000ms walking ramp + 2400ms grazing hold),
   total loop duration 761600ms (~12.7 min). */
/* Generated by scripts/generate-sheep-cross-keyframes.mjs -- do not hand-edit.
   224 steps x 13px = 2912px total travel,
   3400ms per step (1000ms walking ramp + 2400ms grazing hold),
   total loop duration 761600ms (~12.7 min). */
/* Generated by scripts/generate-sheep-cross-keyframes.mjs -- do not hand-edit.
   222 steps x 13px = 2886px total travel,
   3400ms per step (1000ms walking ramp + 2400ms grazing hold),
   total loop duration 754800ms (~12.6 min).
   Fades to opacity:0 while crossing the lighthouse's 84-96vw
   no-go column (screen x 2184-2496px at the assumed
   2600px viewport), fading back in once clear. */
@keyframes sheep-cross {
  0.0000% { transform: translateX(0px); opacity: 1; }
  0.1325% { transform: translateX(13px); opacity: 1; }
  0.4505% { transform: translateX(13px); opacity: 1; }
  0.5829% { transform: translateX(26px); opacity: 1; }
  0.9009% { transform: translateX(26px); opacity: 1; }
  1.0334% { transform: translateX(39px); opacity: 1; }
  1.3514% { transform: translateX(39px); opacity: 1; }
  1.4838% { transform: translateX(52px); opacity: 1; }
  1.8018% { transform: translateX(52px); opacity: 1; }
  1.9343% { transform: translateX(65px); opacity: 1; }
  2.2523% { transform: translateX(65px); opacity: 1; }
  2.3847% { transform: translateX(78px); opacity: 1; }
  2.7027% { transform: translateX(78px); opacity: 1; }
  2.8352% { transform: translateX(91px); opacity: 1; }
  3.1532% { transform: translateX(91px); opacity: 1; }
  3.2856% { transform: translateX(104px); opacity: 1; }
  3.6036% { transform: translateX(104px); opacity: 1; }
  3.7361% { transform: translateX(117px); opacity: 1; }
  4.0541% { transform: translateX(117px); opacity: 1; }
  4.1865% { transform: translateX(130px); opacity: 1; }
  4.5045% { transform: translateX(130px); opacity: 1; }
  4.6370% { transform: translateX(143px); opacity: 1; }
  4.9550% { transform: translateX(143px); opacity: 1; }
  5.0874% { transform: translateX(156px); opacity: 1; }
  5.4054% { transform: translateX(156px); opacity: 1; }
  5.5379% { transform: translateX(169px); opacity: 1; }
  5.8559% { transform: translateX(169px); opacity: 1; }
  5.9883% { transform: translateX(182px); opacity: 1; }
  6.3063% { transform: translateX(182px); opacity: 1; }
  6.4388% { transform: translateX(195px); opacity: 1; }
  6.7568% { transform: translateX(195px); opacity: 1; }
  6.8892% { transform: translateX(208px); opacity: 1; }
  7.2072% { transform: translateX(208px); opacity: 1; }
  7.3397% { transform: translateX(221px); opacity: 1; }
  7.6577% { transform: translateX(221px); opacity: 1; }
  7.7901% { transform: translateX(234px); opacity: 1; }
  8.1081% { transform: translateX(234px); opacity: 1; }
  8.2406% { transform: translateX(247px); opacity: 1; }
  8.5586% { transform: translateX(247px); opacity: 1; }
  8.6910% { transform: translateX(260px); opacity: 1; }
  9.0090% { transform: translateX(260px); opacity: 1; }
  9.1415% { transform: translateX(273px); opacity: 1; }
  9.4595% { transform: translateX(273px); opacity: 1; }
  9.5919% { transform: translateX(286px); opacity: 1; }
  9.9099% { transform: translateX(286px); opacity: 1; }
  10.0424% { transform: translateX(299px); opacity: 1; }
  10.3604% { transform: translateX(299px); opacity: 1; }
  10.4928% { transform: translateX(312px); opacity: 1; }
  10.8108% { transform: translateX(312px); opacity: 1; }
  10.9433% { transform: translateX(325px); opacity: 1; }
  11.2613% { transform: translateX(325px); opacity: 1; }
  11.3937% { transform: translateX(338px); opacity: 1; }
  11.7117% { transform: translateX(338px); opacity: 1; }
  11.8442% { transform: translateX(351px); opacity: 1; }
  12.1622% { transform: translateX(351px); opacity: 1; }
  12.2946% { transform: translateX(364px); opacity: 1; }
  12.6126% { transform: translateX(364px); opacity: 1; }
  12.7451% { transform: translateX(377px); opacity: 1; }
  13.0631% { transform: translateX(377px); opacity: 1; }
  13.1955% { transform: translateX(390px); opacity: 1; }
  13.5135% { transform: translateX(390px); opacity: 1; }
  13.6460% { transform: translateX(403px); opacity: 1; }
  13.9640% { transform: translateX(403px); opacity: 1; }
  14.0964% { transform: translateX(416px); opacity: 1; }
  14.4144% { transform: translateX(416px); opacity: 1; }
  14.5469% { transform: translateX(429px); opacity: 1; }
  14.8649% { transform: translateX(429px); opacity: 1; }
  14.9974% { transform: translateX(442px); opacity: 1; }
  15.3153% { transform: translateX(442px); opacity: 1; }
  15.4478% { transform: translateX(455px); opacity: 1; }
  15.7658% { transform: translateX(455px); opacity: 1; }
  15.8983% { transform: translateX(468px); opacity: 1; }
  16.2162% { transform: translateX(468px); opacity: 1; }
  16.3487% { transform: translateX(481px); opacity: 1; }
  16.6667% { transform: translateX(481px); opacity: 1; }
  16.7992% { transform: translateX(494px); opacity: 1; }
  17.1171% { transform: translateX(494px); opacity: 1; }
  17.2496% { transform: translateX(507px); opacity: 1; }
  17.5676% { transform: translateX(507px); opacity: 1; }
  17.7001% { transform: translateX(520px); opacity: 1; }
  18.0180% { transform: translateX(520px); opacity: 1; }
  18.1505% { transform: translateX(533px); opacity: 1; }
  18.4685% { transform: translateX(533px); opacity: 1; }
  18.6010% { transform: translateX(546px); opacity: 1; }
  18.9189% { transform: translateX(546px); opacity: 1; }
  19.0514% { transform: translateX(559px); opacity: 1; }
  19.3694% { transform: translateX(559px); opacity: 1; }
  19.5019% { transform: translateX(572px); opacity: 1; }
  19.8198% { transform: translateX(572px); opacity: 1; }
  19.9523% { transform: translateX(585px); opacity: 1; }
  20.2703% { transform: translateX(585px); opacity: 1; }
  20.4028% { transform: translateX(598px); opacity: 1; }
  20.7207% { transform: translateX(598px); opacity: 1; }
  20.8532% { transform: translateX(611px); opacity: 1; }
  21.1712% { transform: translateX(611px); opacity: 1; }
  21.3037% { transform: translateX(624px); opacity: 1; }
  21.6216% { transform: translateX(624px); opacity: 1; }
  21.7541% { transform: translateX(637px); opacity: 1; }
  22.0721% { transform: translateX(637px); opacity: 1; }
  22.2046% { transform: translateX(650px); opacity: 1; }
  22.5225% { transform: translateX(650px); opacity: 1; }
  22.6550% { transform: translateX(663px); opacity: 1; }
  22.9730% { transform: translateX(663px); opacity: 1; }
  23.1055% { transform: translateX(676px); opacity: 1; }
  23.4234% { transform: translateX(676px); opacity: 1; }
  23.5559% { transform: translateX(689px); opacity: 1; }
  23.8739% { transform: translateX(689px); opacity: 1; }
  24.0064% { transform: translateX(702px); opacity: 1; }
  24.3243% { transform: translateX(702px); opacity: 1; }
  24.4568% { transform: translateX(715px); opacity: 1; }
  24.7748% { transform: translateX(715px); opacity: 1; }
  24.9073% { transform: translateX(728px); opacity: 1; }
  25.2252% { transform: translateX(728px); opacity: 1; }
  25.3577% { transform: translateX(741px); opacity: 1; }
  25.6757% { transform: translateX(741px); opacity: 1; }
  25.8082% { transform: translateX(754px); opacity: 1; }
  26.1261% { transform: translateX(754px); opacity: 1; }
  26.2586% { transform: translateX(767px); opacity: 1; }
  26.5766% { transform: translateX(767px); opacity: 1; }
  26.7091% { transform: translateX(780px); opacity: 1; }
  27.0270% { transform: translateX(780px); opacity: 1; }
  27.1595% { transform: translateX(793px); opacity: 1; }
  27.4775% { transform: translateX(793px); opacity: 1; }
  27.6100% { transform: translateX(806px); opacity: 1; }
  27.9279% { transform: translateX(806px); opacity: 1; }
  28.0604% { transform: translateX(819px); opacity: 1; }
  28.3784% { transform: translateX(819px); opacity: 1; }
  28.5109% { transform: translateX(832px); opacity: 1; }
  28.8288% { transform: translateX(832px); opacity: 1; }
  28.9613% { transform: translateX(845px); opacity: 1; }
  29.2793% { transform: translateX(845px); opacity: 1; }
  29.4118% { transform: translateX(858px); opacity: 1; }
  29.7297% { transform: translateX(858px); opacity: 1; }
  29.8622% { transform: translateX(871px); opacity: 1; }
  30.1802% { transform: translateX(871px); opacity: 1; }
  30.3127% { transform: translateX(884px); opacity: 1; }
  30.6306% { transform: translateX(884px); opacity: 1; }
  30.7631% { transform: translateX(897px); opacity: 1; }
  31.0811% { transform: translateX(897px); opacity: 1; }
  31.2136% { transform: translateX(910px); opacity: 1; }
  31.5315% { transform: translateX(910px); opacity: 1; }
  31.6640% { transform: translateX(923px); opacity: 1; }
  31.9820% { transform: translateX(923px); opacity: 1; }
  32.1145% { transform: translateX(936px); opacity: 1; }
  32.4324% { transform: translateX(936px); opacity: 1; }
  32.5649% { transform: translateX(949px); opacity: 1; }
  32.8829% { transform: translateX(949px); opacity: 1; }
  33.0154% { transform: translateX(962px); opacity: 1; }
  33.3333% { transform: translateX(962px); opacity: 1; }
  33.4658% { transform: translateX(975px); opacity: 1; }
  33.7838% { transform: translateX(975px); opacity: 1; }
  33.9163% { transform: translateX(988px); opacity: 1; }
  34.2342% { transform: translateX(988px); opacity: 1; }
  34.3667% { transform: translateX(1001px); opacity: 1; }
  34.6847% { transform: translateX(1001px); opacity: 1; }
  34.8172% { transform: translateX(1014px); opacity: 1; }
  35.1351% { transform: translateX(1014px); opacity: 1; }
  35.2676% { transform: translateX(1027px); opacity: 1; }
  35.5856% { transform: translateX(1027px); opacity: 1; }
  35.7181% { transform: translateX(1040px); opacity: 1; }
  36.0360% { transform: translateX(1040px); opacity: 1; }
  36.1685% { transform: translateX(1053px); opacity: 1; }
  36.4865% { transform: translateX(1053px); opacity: 1; }
  36.6190% { transform: translateX(1066px); opacity: 1; }
  36.9369% { transform: translateX(1066px); opacity: 1; }
  37.0694% { transform: translateX(1079px); opacity: 1; }
  37.3874% { transform: translateX(1079px); opacity: 1; }
  37.5199% { transform: translateX(1092px); opacity: 1; }
  37.8378% { transform: translateX(1092px); opacity: 1; }
  37.9703% { transform: translateX(1105px); opacity: 1; }
  38.2883% { transform: translateX(1105px); opacity: 1; }
  38.4208% { transform: translateX(1118px); opacity: 1; }
  38.7387% { transform: translateX(1118px); opacity: 1; }
  38.8712% { transform: translateX(1131px); opacity: 1; }
  39.1892% { transform: translateX(1131px); opacity: 1; }
  39.3217% { transform: translateX(1144px); opacity: 1; }
  39.6396% { transform: translateX(1144px); opacity: 1; }
  39.7721% { transform: translateX(1157px); opacity: 1; }
  40.0901% { transform: translateX(1157px); opacity: 1; }
  40.2226% { transform: translateX(1170px); opacity: 1; }
  40.5405% { transform: translateX(1170px); opacity: 1; }
  40.6730% { transform: translateX(1183px); opacity: 1; }
  40.9910% { transform: translateX(1183px); opacity: 1; }
  41.1235% { transform: translateX(1196px); opacity: 1; }
  41.4414% { transform: translateX(1196px); opacity: 1; }
  41.5739% { transform: translateX(1209px); opacity: 1; }
  41.8919% { transform: translateX(1209px); opacity: 1; }
  42.0244% { transform: translateX(1222px); opacity: 1; }
  42.3423% { transform: translateX(1222px); opacity: 1; }
  42.4748% { transform: translateX(1235px); opacity: 1; }
  42.7928% { transform: translateX(1235px); opacity: 1; }
  42.9253% { transform: translateX(1248px); opacity: 1; }
  43.2432% { transform: translateX(1248px); opacity: 1; }
  43.3757% { transform: translateX(1261px); opacity: 1; }
  43.6937% { transform: translateX(1261px); opacity: 1; }
  43.8262% { transform: translateX(1274px); opacity: 1; }
  44.1441% { transform: translateX(1274px); opacity: 1; }
  44.2766% { transform: translateX(1287px); opacity: 1; }
  44.5946% { transform: translateX(1287px); opacity: 1; }
  44.7271% { transform: translateX(1300px); opacity: 1; }
  45.0450% { transform: translateX(1300px); opacity: 1; }
  45.1775% { transform: translateX(1313px); opacity: 1; }
  45.4955% { transform: translateX(1313px); opacity: 1; }
  45.6280% { transform: translateX(1326px); opacity: 1; }
  45.9459% { transform: translateX(1326px); opacity: 1; }
  46.0784% { transform: translateX(1339px); opacity: 1; }
  46.3964% { transform: translateX(1339px); opacity: 1; }
  46.5289% { transform: translateX(1352px); opacity: 1; }
  46.8468% { transform: translateX(1352px); opacity: 1; }
  46.9793% { transform: translateX(1365px); opacity: 1; }
  47.2973% { transform: translateX(1365px); opacity: 1; }
  47.4298% { transform: translateX(1378px); opacity: 1; }
  47.7477% { transform: translateX(1378px); opacity: 1; }
  47.8802% { transform: translateX(1391px); opacity: 1; }
  48.1982% { transform: translateX(1391px); opacity: 1; }
  48.3307% { transform: translateX(1404px); opacity: 1; }
  48.6486% { transform: translateX(1404px); opacity: 1; }
  48.7811% { transform: translateX(1417px); opacity: 1; }
  49.0991% { transform: translateX(1417px); opacity: 1; }
  49.2316% { transform: translateX(1430px); opacity: 1; }
  49.5495% { transform: translateX(1430px); opacity: 1; }
  49.6820% { transform: translateX(1443px); opacity: 1; }
  50.0000% { transform: translateX(1443px); opacity: 1; }
  50.1325% { transform: translateX(1456px); opacity: 1; }
  50.4505% { transform: translateX(1456px); opacity: 1; }
  50.5829% { transform: translateX(1469px); opacity: 1; }
  50.9009% { transform: translateX(1469px); opacity: 1; }
  51.0334% { transform: translateX(1482px); opacity: 1; }
  51.3514% { transform: translateX(1482px); opacity: 1; }
  51.4838% { transform: translateX(1495px); opacity: 1; }
  51.8018% { transform: translateX(1495px); opacity: 1; }
  51.9343% { transform: translateX(1508px); opacity: 1; }
  52.2523% { transform: translateX(1508px); opacity: 1; }
  52.3847% { transform: translateX(1521px); opacity: 1; }
  52.7027% { transform: translateX(1521px); opacity: 1; }
  52.8352% { transform: translateX(1534px); opacity: 1; }
  53.1532% { transform: translateX(1534px); opacity: 1; }
  53.2856% { transform: translateX(1547px); opacity: 1; }
  53.6036% { transform: translateX(1547px); opacity: 1; }
  53.7361% { transform: translateX(1560px); opacity: 1; }
  54.0541% { transform: translateX(1560px); opacity: 1; }
  54.1865% { transform: translateX(1573px); opacity: 1; }
  54.5045% { transform: translateX(1573px); opacity: 1; }
  54.6370% { transform: translateX(1586px); opacity: 1; }
  54.9550% { transform: translateX(1586px); opacity: 1; }
  55.0874% { transform: translateX(1599px); opacity: 1; }
  55.4054% { transform: translateX(1599px); opacity: 1; }
  55.5379% { transform: translateX(1612px); opacity: 1; }
  55.8559% { transform: translateX(1612px); opacity: 1; }
  55.9883% { transform: translateX(1625px); opacity: 1; }
  56.3063% { transform: translateX(1625px); opacity: 1; }
  56.4388% { transform: translateX(1638px); opacity: 1; }
  56.7568% { transform: translateX(1638px); opacity: 1; }
  56.8892% { transform: translateX(1651px); opacity: 1; }
  57.2072% { transform: translateX(1651px); opacity: 1; }
  57.3397% { transform: translateX(1664px); opacity: 1; }
  57.6577% { transform: translateX(1664px); opacity: 1; }
  57.7901% { transform: translateX(1677px); opacity: 1; }
  58.1081% { transform: translateX(1677px); opacity: 1; }
  58.2406% { transform: translateX(1690px); opacity: 1; }
  58.5586% { transform: translateX(1690px); opacity: 1; }
  58.6910% { transform: translateX(1703px); opacity: 1; }
  59.0090% { transform: translateX(1703px); opacity: 1; }
  59.1415% { transform: translateX(1716px); opacity: 1; }
  59.4595% { transform: translateX(1716px); opacity: 1; }
  59.5919% { transform: translateX(1729px); opacity: 1; }
  59.9099% { transform: translateX(1729px); opacity: 1; }
  60.0424% { transform: translateX(1742px); opacity: 1; }
  60.3604% { transform: translateX(1742px); opacity: 1; }
  60.4928% { transform: translateX(1755px); opacity: 1; }
  60.8108% { transform: translateX(1755px); opacity: 1; }
  60.9433% { transform: translateX(1768px); opacity: 1; }
  61.2613% { transform: translateX(1768px); opacity: 1; }
  61.3937% { transform: translateX(1781px); opacity: 1; }
  61.7117% { transform: translateX(1781px); opacity: 1; }
  61.8442% { transform: translateX(1794px); opacity: 1; }
  62.1622% { transform: translateX(1794px); opacity: 1; }
  62.2946% { transform: translateX(1807px); opacity: 1; }
  62.6126% { transform: translateX(1807px); opacity: 1; }
  62.7451% { transform: translateX(1820px); opacity: 1; }
  63.0631% { transform: translateX(1820px); opacity: 1; }
  63.1955% { transform: translateX(1833px); opacity: 1; }
  63.5135% { transform: translateX(1833px); opacity: 1; }
  63.6460% { transform: translateX(1846px); opacity: 1; }
  63.9640% { transform: translateX(1846px); opacity: 1; }
  64.0964% { transform: translateX(1859px); opacity: 1; }
  64.4144% { transform: translateX(1859px); opacity: 1; }
  64.5469% { transform: translateX(1872px); opacity: 1; }
  64.8649% { transform: translateX(1872px); opacity: 1; }
  64.9974% { transform: translateX(1885px); opacity: 1; }
  65.3153% { transform: translateX(1885px); opacity: 1; }
  65.4478% { transform: translateX(1898px); opacity: 1; }
  65.7658% { transform: translateX(1898px); opacity: 1; }
  65.8983% { transform: translateX(1911px); opacity: 1; }
  66.2162% { transform: translateX(1911px); opacity: 1; }
  66.3487% { transform: translateX(1924px); opacity: 1; }
  66.6667% { transform: translateX(1924px); opacity: 1; }
  66.7992% { transform: translateX(1937px); opacity: 1; }
  67.1171% { transform: translateX(1937px); opacity: 1; }
  67.2496% { transform: translateX(1950px); opacity: 1; }
  67.5676% { transform: translateX(1950px); opacity: 1; }
  67.7001% { transform: translateX(1963px); opacity: 1; }
  68.0180% { transform: translateX(1963px); opacity: 1; }
  68.1505% { transform: translateX(1976px); opacity: 1; }
  68.4685% { transform: translateX(1976px); opacity: 1; }
  68.6010% { transform: translateX(1989px); opacity: 1; }
  68.9189% { transform: translateX(1989px); opacity: 1; }
  69.0514% { transform: translateX(2002px); opacity: 1; }
  69.3694% { transform: translateX(2002px); opacity: 1; }
  69.5019% { transform: translateX(2015px); opacity: 1; }
  69.8198% { transform: translateX(2015px); opacity: 1; }
  69.9523% { transform: translateX(2028px); opacity: 1; }
  70.2703% { transform: translateX(2028px); opacity: 1; }
  70.4028% { transform: translateX(2041px); opacity: 1; }
  70.7207% { transform: translateX(2041px); opacity: 1; }
  70.8532% { transform: translateX(2054px); opacity: 1; }
  71.1712% { transform: translateX(2054px); opacity: 1; }
  71.3037% { transform: translateX(2067px); opacity: 1; }
  71.6216% { transform: translateX(2067px); opacity: 1; }
  71.7541% { transform: translateX(2080px); opacity: 1; }
  72.0721% { transform: translateX(2080px); opacity: 1; }
  72.2046% { transform: translateX(2093px); opacity: 1; }
  72.5225% { transform: translateX(2093px); opacity: 1; }
  72.6550% { transform: translateX(2106px); opacity: 1; }
  72.9730% { transform: translateX(2106px); opacity: 1; }
  73.1055% { transform: translateX(2119px); opacity: 1; }
  73.4234% { transform: translateX(2119px); opacity: 1; }
  73.5559% { transform: translateX(2132px); opacity: 1; }
  73.8739% { transform: translateX(2132px); opacity: 1; }
  74.0064% { transform: translateX(2145px); opacity: 1; }
  74.3243% { transform: translateX(2145px); opacity: 1; }
  74.4568% { transform: translateX(2158px); opacity: 1; }
  74.7748% { transform: translateX(2158px); opacity: 1; }
  74.9073% { transform: translateX(2171px); opacity: 1; }
  75.2252% { transform: translateX(2171px); opacity: 1; }
  75.3577% { transform: translateX(2184px); opacity: 1; }
  75.6757% { transform: translateX(2184px); opacity: 1; }
  75.8082% { transform: translateX(2197px); opacity: 1; }
  76.1261% { transform: translateX(2197px); opacity: 1; }
  76.2586% { transform: translateX(2210px); opacity: 1; }
  76.5766% { transform: translateX(2210px); opacity: 1; }
  76.7091% { transform: translateX(2223px); opacity: 1; }
  77.0270% { transform: translateX(2223px); opacity: 1; }
  77.1595% { transform: translateX(2236px); opacity: 1; }
  77.4775% { transform: translateX(2236px); opacity: 1; }
  77.6100% { transform: translateX(2249px); opacity: 1; }
  77.9279% { transform: translateX(2249px); opacity: 1; }
  78.0604% { transform: translateX(2262px); opacity: 1; }
  78.3784% { transform: translateX(2262px); opacity: 1; }
  78.3789% { transform: translateX(2262px); opacity: 0; }
  78.5109% { transform: translateX(2275px); opacity: 0; }
  78.8288% { transform: translateX(2275px); opacity: 0; }
  78.9613% { transform: translateX(2288px); opacity: 0; }
  79.2793% { transform: translateX(2288px); opacity: 0; }
  79.4118% { transform: translateX(2301px); opacity: 0; }
  79.7297% { transform: translateX(2301px); opacity: 0; }
  79.8622% { transform: translateX(2314px); opacity: 0; }
  80.1802% { transform: translateX(2314px); opacity: 0; }
  80.3127% { transform: translateX(2327px); opacity: 0; }
  80.6306% { transform: translateX(2327px); opacity: 0; }
  80.7631% { transform: translateX(2340px); opacity: 0; }
  81.0811% { transform: translateX(2340px); opacity: 0; }
  81.2136% { transform: translateX(2353px); opacity: 0; }
  81.5315% { transform: translateX(2353px); opacity: 0; }
  81.6640% { transform: translateX(2366px); opacity: 0; }
  81.9820% { transform: translateX(2366px); opacity: 0; }
  82.1145% { transform: translateX(2379px); opacity: 0; }
  82.4324% { transform: translateX(2379px); opacity: 0; }
  82.5649% { transform: translateX(2392px); opacity: 0; }
  82.8829% { transform: translateX(2392px); opacity: 0; }
  83.0154% { transform: translateX(2405px); opacity: 0; }
  83.3333% { transform: translateX(2405px); opacity: 0; }
  83.4658% { transform: translateX(2418px); opacity: 0; }
  83.7838% { transform: translateX(2418px); opacity: 0; }
  83.9163% { transform: translateX(2431px); opacity: 0; }
  84.2342% { transform: translateX(2431px); opacity: 0; }
  84.3667% { transform: translateX(2444px); opacity: 0; }
  84.6847% { transform: translateX(2444px); opacity: 0; }
  84.8172% { transform: translateX(2457px); opacity: 0; }
  85.1351% { transform: translateX(2457px); opacity: 0; }
  85.2676% { transform: translateX(2470px); opacity: 0; }
  85.5856% { transform: translateX(2470px); opacity: 0; }
  85.7181% { transform: translateX(2483px); opacity: 0; }
  86.0360% { transform: translateX(2483px); opacity: 0; }
  86.1685% { transform: translateX(2496px); opacity: 0; }
  86.4865% { transform: translateX(2496px); opacity: 0; }
  86.6190% { transform: translateX(2509px); opacity: 0; }
  86.9369% { transform: translateX(2509px); opacity: 0; }
  87.0694% { transform: translateX(2522px); opacity: 0; }
  87.3874% { transform: translateX(2522px); opacity: 0; }
  87.5199% { transform: translateX(2535px); opacity: 0; }
  87.8378% { transform: translateX(2535px); opacity: 0; }
  87.9703% { transform: translateX(2548px); opacity: 0; }
  88.2883% { transform: translateX(2548px); opacity: 0; }
  88.4208% { transform: translateX(2561px); opacity: 0; }
  88.7387% { transform: translateX(2561px); opacity: 0; }
  88.8712% { transform: translateX(2574px); opacity: 0; }
  89.1892% { transform: translateX(2574px); opacity: 0; }
  89.1897% { transform: translateX(2574px); opacity: 1; }
  89.3217% { transform: translateX(2587px); opacity: 1; }
  89.6396% { transform: translateX(2587px); opacity: 1; }
  89.7721% { transform: translateX(2600px); opacity: 1; }
  90.0901% { transform: translateX(2600px); opacity: 1; }
  90.2226% { transform: translateX(2613px); opacity: 1; }
  90.5405% { transform: translateX(2613px); opacity: 1; }
  90.6730% { transform: translateX(2626px); opacity: 1; }
  90.9910% { transform: translateX(2626px); opacity: 1; }
  91.1235% { transform: translateX(2639px); opacity: 1; }
  91.4414% { transform: translateX(2639px); opacity: 1; }
  91.5739% { transform: translateX(2652px); opacity: 1; }
  91.8919% { transform: translateX(2652px); opacity: 1; }
  92.0244% { transform: translateX(2665px); opacity: 1; }
  92.3423% { transform: translateX(2665px); opacity: 1; }
  92.4748% { transform: translateX(2678px); opacity: 1; }
  92.7928% { transform: translateX(2678px); opacity: 1; }
  92.9253% { transform: translateX(2691px); opacity: 1; }
  93.2432% { transform: translateX(2691px); opacity: 1; }
  93.3757% { transform: translateX(2704px); opacity: 1; }
  93.6937% { transform: translateX(2704px); opacity: 1; }
  93.8262% { transform: translateX(2717px); opacity: 1; }
  94.1441% { transform: translateX(2717px); opacity: 1; }
  94.2766% { transform: translateX(2730px); opacity: 1; }
  94.5946% { transform: translateX(2730px); opacity: 1; }
  94.7271% { transform: translateX(2743px); opacity: 1; }
  95.0450% { transform: translateX(2743px); opacity: 1; }
  95.1775% { transform: translateX(2756px); opacity: 1; }
  95.4955% { transform: translateX(2756px); opacity: 1; }
  95.6280% { transform: translateX(2769px); opacity: 1; }
  95.9459% { transform: translateX(2769px); opacity: 1; }
  96.0784% { transform: translateX(2782px); opacity: 1; }
  96.3964% { transform: translateX(2782px); opacity: 1; }
  96.5289% { transform: translateX(2795px); opacity: 1; }
  96.8468% { transform: translateX(2795px); opacity: 1; }
  96.9793% { transform: translateX(2808px); opacity: 1; }
  97.2973% { transform: translateX(2808px); opacity: 1; }
  97.4298% { transform: translateX(2821px); opacity: 1; }
  97.7477% { transform: translateX(2821px); opacity: 1; }
  97.8802% { transform: translateX(2834px); opacity: 1; }
  98.1982% { transform: translateX(2834px); opacity: 1; }
  98.3307% { transform: translateX(2847px); opacity: 1; }
  98.6486% { transform: translateX(2847px); opacity: 1; }
  98.7811% { transform: translateX(2860px); opacity: 1; }
  99.0991% { transform: translateX(2860px); opacity: 1; }
  99.2316% { transform: translateX(2873px); opacity: 1; }
  99.5495% { transform: translateX(2873px); opacity: 1; }
  100% { transform: translateX(2886px); opacity: 1; }
}

@keyframes sheep-cross-rev {
  0.0000% { transform: translateX(0px); opacity: 1; }
  0.1325% { transform: translateX(-13px); opacity: 1; }
  0.4505% { transform: translateX(-13px); opacity: 1; }
  0.5829% { transform: translateX(-26px); opacity: 1; }
  0.9009% { transform: translateX(-26px); opacity: 1; }
  1.0334% { transform: translateX(-39px); opacity: 1; }
  1.3514% { transform: translateX(-39px); opacity: 1; }
  1.4838% { transform: translateX(-52px); opacity: 1; }
  1.8018% { transform: translateX(-52px); opacity: 1; }
  1.9343% { transform: translateX(-65px); opacity: 1; }
  2.2523% { transform: translateX(-65px); opacity: 1; }
  2.3847% { transform: translateX(-78px); opacity: 1; }
  2.7027% { transform: translateX(-78px); opacity: 1; }
  2.8352% { transform: translateX(-91px); opacity: 1; }
  3.1532% { transform: translateX(-91px); opacity: 1; }
  3.2856% { transform: translateX(-104px); opacity: 1; }
  3.6036% { transform: translateX(-104px); opacity: 1; }
  3.7361% { transform: translateX(-117px); opacity: 1; }
  4.0541% { transform: translateX(-117px); opacity: 1; }
  4.1865% { transform: translateX(-130px); opacity: 1; }
  4.5045% { transform: translateX(-130px); opacity: 1; }
  4.6370% { transform: translateX(-143px); opacity: 1; }
  4.9550% { transform: translateX(-143px); opacity: 1; }
  5.0874% { transform: translateX(-156px); opacity: 1; }
  5.4054% { transform: translateX(-156px); opacity: 1; }
  5.5379% { transform: translateX(-169px); opacity: 1; }
  5.8559% { transform: translateX(-169px); opacity: 1; }
  5.9883% { transform: translateX(-182px); opacity: 1; }
  6.3063% { transform: translateX(-182px); opacity: 1; }
  6.3068% { transform: translateX(-182px); opacity: 0; }
  6.4388% { transform: translateX(-195px); opacity: 0; }
  6.7568% { transform: translateX(-195px); opacity: 0; }
  6.8892% { transform: translateX(-208px); opacity: 0; }
  7.2072% { transform: translateX(-208px); opacity: 0; }
  7.3397% { transform: translateX(-221px); opacity: 0; }
  7.6577% { transform: translateX(-221px); opacity: 0; }
  7.7901% { transform: translateX(-234px); opacity: 0; }
  8.1081% { transform: translateX(-234px); opacity: 0; }
  8.2406% { transform: translateX(-247px); opacity: 0; }
  8.5586% { transform: translateX(-247px); opacity: 0; }
  8.6910% { transform: translateX(-260px); opacity: 0; }
  9.0090% { transform: translateX(-260px); opacity: 0; }
  9.1415% { transform: translateX(-273px); opacity: 0; }
  9.4595% { transform: translateX(-273px); opacity: 0; }
  9.5919% { transform: translateX(-286px); opacity: 0; }
  9.9099% { transform: translateX(-286px); opacity: 0; }
  10.0424% { transform: translateX(-299px); opacity: 0; }
  10.3604% { transform: translateX(-299px); opacity: 0; }
  10.4928% { transform: translateX(-312px); opacity: 0; }
  10.8108% { transform: translateX(-312px); opacity: 0; }
  10.9433% { transform: translateX(-325px); opacity: 0; }
  11.2613% { transform: translateX(-325px); opacity: 0; }
  11.3937% { transform: translateX(-338px); opacity: 0; }
  11.7117% { transform: translateX(-338px); opacity: 0; }
  11.8442% { transform: translateX(-351px); opacity: 0; }
  12.1622% { transform: translateX(-351px); opacity: 0; }
  12.2946% { transform: translateX(-364px); opacity: 0; }
  12.6126% { transform: translateX(-364px); opacity: 0; }
  12.7451% { transform: translateX(-377px); opacity: 0; }
  13.0631% { transform: translateX(-377px); opacity: 0; }
  13.1955% { transform: translateX(-390px); opacity: 0; }
  13.5135% { transform: translateX(-390px); opacity: 0; }
  13.6460% { transform: translateX(-403px); opacity: 0; }
  13.9640% { transform: translateX(-403px); opacity: 0; }
  14.0964% { transform: translateX(-416px); opacity: 0; }
  14.4144% { transform: translateX(-416px); opacity: 0; }
  14.5469% { transform: translateX(-429px); opacity: 0; }
  14.8649% { transform: translateX(-429px); opacity: 0; }
  14.9974% { transform: translateX(-442px); opacity: 0; }
  15.3153% { transform: translateX(-442px); opacity: 0; }
  15.4478% { transform: translateX(-455px); opacity: 0; }
  15.7658% { transform: translateX(-455px); opacity: 0; }
  15.8983% { transform: translateX(-468px); opacity: 0; }
  16.2162% { transform: translateX(-468px); opacity: 0; }
  16.3487% { transform: translateX(-481px); opacity: 0; }
  16.6667% { transform: translateX(-481px); opacity: 0; }
  16.7992% { transform: translateX(-494px); opacity: 0; }
  17.1171% { transform: translateX(-494px); opacity: 0; }
  17.1176% { transform: translateX(-494px); opacity: 1; }
  17.2496% { transform: translateX(-507px); opacity: 1; }
  17.5676% { transform: translateX(-507px); opacity: 1; }
  17.7001% { transform: translateX(-520px); opacity: 1; }
  18.0180% { transform: translateX(-520px); opacity: 1; }
  18.1505% { transform: translateX(-533px); opacity: 1; }
  18.4685% { transform: translateX(-533px); opacity: 1; }
  18.6010% { transform: translateX(-546px); opacity: 1; }
  18.9189% { transform: translateX(-546px); opacity: 1; }
  19.0514% { transform: translateX(-559px); opacity: 1; }
  19.3694% { transform: translateX(-559px); opacity: 1; }
  19.5019% { transform: translateX(-572px); opacity: 1; }
  19.8198% { transform: translateX(-572px); opacity: 1; }
  19.9523% { transform: translateX(-585px); opacity: 1; }
  20.2703% { transform: translateX(-585px); opacity: 1; }
  20.4028% { transform: translateX(-598px); opacity: 1; }
  20.7207% { transform: translateX(-598px); opacity: 1; }
  20.8532% { transform: translateX(-611px); opacity: 1; }
  21.1712% { transform: translateX(-611px); opacity: 1; }
  21.3037% { transform: translateX(-624px); opacity: 1; }
  21.6216% { transform: translateX(-624px); opacity: 1; }
  21.7541% { transform: translateX(-637px); opacity: 1; }
  22.0721% { transform: translateX(-637px); opacity: 1; }
  22.2046% { transform: translateX(-650px); opacity: 1; }
  22.5225% { transform: translateX(-650px); opacity: 1; }
  22.6550% { transform: translateX(-663px); opacity: 1; }
  22.9730% { transform: translateX(-663px); opacity: 1; }
  23.1055% { transform: translateX(-676px); opacity: 1; }
  23.4234% { transform: translateX(-676px); opacity: 1; }
  23.5559% { transform: translateX(-689px); opacity: 1; }
  23.8739% { transform: translateX(-689px); opacity: 1; }
  24.0064% { transform: translateX(-702px); opacity: 1; }
  24.3243% { transform: translateX(-702px); opacity: 1; }
  24.4568% { transform: translateX(-715px); opacity: 1; }
  24.7748% { transform: translateX(-715px); opacity: 1; }
  24.9073% { transform: translateX(-728px); opacity: 1; }
  25.2252% { transform: translateX(-728px); opacity: 1; }
  25.3577% { transform: translateX(-741px); opacity: 1; }
  25.6757% { transform: translateX(-741px); opacity: 1; }
  25.8082% { transform: translateX(-754px); opacity: 1; }
  26.1261% { transform: translateX(-754px); opacity: 1; }
  26.2586% { transform: translateX(-767px); opacity: 1; }
  26.5766% { transform: translateX(-767px); opacity: 1; }
  26.7091% { transform: translateX(-780px); opacity: 1; }
  27.0270% { transform: translateX(-780px); opacity: 1; }
  27.1595% { transform: translateX(-793px); opacity: 1; }
  27.4775% { transform: translateX(-793px); opacity: 1; }
  27.6100% { transform: translateX(-806px); opacity: 1; }
  27.9279% { transform: translateX(-806px); opacity: 1; }
  28.0604% { transform: translateX(-819px); opacity: 1; }
  28.3784% { transform: translateX(-819px); opacity: 1; }
  28.5109% { transform: translateX(-832px); opacity: 1; }
  28.8288% { transform: translateX(-832px); opacity: 1; }
  28.9613% { transform: translateX(-845px); opacity: 1; }
  29.2793% { transform: translateX(-845px); opacity: 1; }
  29.4118% { transform: translateX(-858px); opacity: 1; }
  29.7297% { transform: translateX(-858px); opacity: 1; }
  29.8622% { transform: translateX(-871px); opacity: 1; }
  30.1802% { transform: translateX(-871px); opacity: 1; }
  30.3127% { transform: translateX(-884px); opacity: 1; }
  30.6306% { transform: translateX(-884px); opacity: 1; }
  30.7631% { transform: translateX(-897px); opacity: 1; }
  31.0811% { transform: translateX(-897px); opacity: 1; }
  31.2136% { transform: translateX(-910px); opacity: 1; }
  31.5315% { transform: translateX(-910px); opacity: 1; }
  31.6640% { transform: translateX(-923px); opacity: 1; }
  31.9820% { transform: translateX(-923px); opacity: 1; }
  32.1145% { transform: translateX(-936px); opacity: 1; }
  32.4324% { transform: translateX(-936px); opacity: 1; }
  32.5649% { transform: translateX(-949px); opacity: 1; }
  32.8829% { transform: translateX(-949px); opacity: 1; }
  33.0154% { transform: translateX(-962px); opacity: 1; }
  33.3333% { transform: translateX(-962px); opacity: 1; }
  33.4658% { transform: translateX(-975px); opacity: 1; }
  33.7838% { transform: translateX(-975px); opacity: 1; }
  33.9163% { transform: translateX(-988px); opacity: 1; }
  34.2342% { transform: translateX(-988px); opacity: 1; }
  34.3667% { transform: translateX(-1001px); opacity: 1; }
  34.6847% { transform: translateX(-1001px); opacity: 1; }
  34.8172% { transform: translateX(-1014px); opacity: 1; }
  35.1351% { transform: translateX(-1014px); opacity: 1; }
  35.2676% { transform: translateX(-1027px); opacity: 1; }
  35.5856% { transform: translateX(-1027px); opacity: 1; }
  35.7181% { transform: translateX(-1040px); opacity: 1; }
  36.0360% { transform: translateX(-1040px); opacity: 1; }
  36.1685% { transform: translateX(-1053px); opacity: 1; }
  36.4865% { transform: translateX(-1053px); opacity: 1; }
  36.6190% { transform: translateX(-1066px); opacity: 1; }
  36.9369% { transform: translateX(-1066px); opacity: 1; }
  37.0694% { transform: translateX(-1079px); opacity: 1; }
  37.3874% { transform: translateX(-1079px); opacity: 1; }
  37.5199% { transform: translateX(-1092px); opacity: 1; }
  37.8378% { transform: translateX(-1092px); opacity: 1; }
  37.9703% { transform: translateX(-1105px); opacity: 1; }
  38.2883% { transform: translateX(-1105px); opacity: 1; }
  38.4208% { transform: translateX(-1118px); opacity: 1; }
  38.7387% { transform: translateX(-1118px); opacity: 1; }
  38.8712% { transform: translateX(-1131px); opacity: 1; }
  39.1892% { transform: translateX(-1131px); opacity: 1; }
  39.3217% { transform: translateX(-1144px); opacity: 1; }
  39.6396% { transform: translateX(-1144px); opacity: 1; }
  39.7721% { transform: translateX(-1157px); opacity: 1; }
  40.0901% { transform: translateX(-1157px); opacity: 1; }
  40.2226% { transform: translateX(-1170px); opacity: 1; }
  40.5405% { transform: translateX(-1170px); opacity: 1; }
  40.6730% { transform: translateX(-1183px); opacity: 1; }
  40.9910% { transform: translateX(-1183px); opacity: 1; }
  41.1235% { transform: translateX(-1196px); opacity: 1; }
  41.4414% { transform: translateX(-1196px); opacity: 1; }
  41.5739% { transform: translateX(-1209px); opacity: 1; }
  41.8919% { transform: translateX(-1209px); opacity: 1; }
  42.0244% { transform: translateX(-1222px); opacity: 1; }
  42.3423% { transform: translateX(-1222px); opacity: 1; }
  42.4748% { transform: translateX(-1235px); opacity: 1; }
  42.7928% { transform: translateX(-1235px); opacity: 1; }
  42.9253% { transform: translateX(-1248px); opacity: 1; }
  43.2432% { transform: translateX(-1248px); opacity: 1; }
  43.3757% { transform: translateX(-1261px); opacity: 1; }
  43.6937% { transform: translateX(-1261px); opacity: 1; }
  43.8262% { transform: translateX(-1274px); opacity: 1; }
  44.1441% { transform: translateX(-1274px); opacity: 1; }
  44.2766% { transform: translateX(-1287px); opacity: 1; }
  44.5946% { transform: translateX(-1287px); opacity: 1; }
  44.7271% { transform: translateX(-1300px); opacity: 1; }
  45.0450% { transform: translateX(-1300px); opacity: 1; }
  45.1775% { transform: translateX(-1313px); opacity: 1; }
  45.4955% { transform: translateX(-1313px); opacity: 1; }
  45.6280% { transform: translateX(-1326px); opacity: 1; }
  45.9459% { transform: translateX(-1326px); opacity: 1; }
  46.0784% { transform: translateX(-1339px); opacity: 1; }
  46.3964% { transform: translateX(-1339px); opacity: 1; }
  46.5289% { transform: translateX(-1352px); opacity: 1; }
  46.8468% { transform: translateX(-1352px); opacity: 1; }
  46.9793% { transform: translateX(-1365px); opacity: 1; }
  47.2973% { transform: translateX(-1365px); opacity: 1; }
  47.4298% { transform: translateX(-1378px); opacity: 1; }
  47.7477% { transform: translateX(-1378px); opacity: 1; }
  47.8802% { transform: translateX(-1391px); opacity: 1; }
  48.1982% { transform: translateX(-1391px); opacity: 1; }
  48.3307% { transform: translateX(-1404px); opacity: 1; }
  48.6486% { transform: translateX(-1404px); opacity: 1; }
  48.7811% { transform: translateX(-1417px); opacity: 1; }
  49.0991% { transform: translateX(-1417px); opacity: 1; }
  49.2316% { transform: translateX(-1430px); opacity: 1; }
  49.5495% { transform: translateX(-1430px); opacity: 1; }
  49.6820% { transform: translateX(-1443px); opacity: 1; }
  50.0000% { transform: translateX(-1443px); opacity: 1; }
  50.1325% { transform: translateX(-1456px); opacity: 1; }
  50.4505% { transform: translateX(-1456px); opacity: 1; }
  50.5829% { transform: translateX(-1469px); opacity: 1; }
  50.9009% { transform: translateX(-1469px); opacity: 1; }
  51.0334% { transform: translateX(-1482px); opacity: 1; }
  51.3514% { transform: translateX(-1482px); opacity: 1; }
  51.4838% { transform: translateX(-1495px); opacity: 1; }
  51.8018% { transform: translateX(-1495px); opacity: 1; }
  51.9343% { transform: translateX(-1508px); opacity: 1; }
  52.2523% { transform: translateX(-1508px); opacity: 1; }
  52.3847% { transform: translateX(-1521px); opacity: 1; }
  52.7027% { transform: translateX(-1521px); opacity: 1; }
  52.8352% { transform: translateX(-1534px); opacity: 1; }
  53.1532% { transform: translateX(-1534px); opacity: 1; }
  53.2856% { transform: translateX(-1547px); opacity: 1; }
  53.6036% { transform: translateX(-1547px); opacity: 1; }
  53.7361% { transform: translateX(-1560px); opacity: 1; }
  54.0541% { transform: translateX(-1560px); opacity: 1; }
  54.1865% { transform: translateX(-1573px); opacity: 1; }
  54.5045% { transform: translateX(-1573px); opacity: 1; }
  54.6370% { transform: translateX(-1586px); opacity: 1; }
  54.9550% { transform: translateX(-1586px); opacity: 1; }
  55.0874% { transform: translateX(-1599px); opacity: 1; }
  55.4054% { transform: translateX(-1599px); opacity: 1; }
  55.5379% { transform: translateX(-1612px); opacity: 1; }
  55.8559% { transform: translateX(-1612px); opacity: 1; }
  55.9883% { transform: translateX(-1625px); opacity: 1; }
  56.3063% { transform: translateX(-1625px); opacity: 1; }
  56.4388% { transform: translateX(-1638px); opacity: 1; }
  56.7568% { transform: translateX(-1638px); opacity: 1; }
  56.8892% { transform: translateX(-1651px); opacity: 1; }
  57.2072% { transform: translateX(-1651px); opacity: 1; }
  57.3397% { transform: translateX(-1664px); opacity: 1; }
  57.6577% { transform: translateX(-1664px); opacity: 1; }
  57.7901% { transform: translateX(-1677px); opacity: 1; }
  58.1081% { transform: translateX(-1677px); opacity: 1; }
  58.2406% { transform: translateX(-1690px); opacity: 1; }
  58.5586% { transform: translateX(-1690px); opacity: 1; }
  58.6910% { transform: translateX(-1703px); opacity: 1; }
  59.0090% { transform: translateX(-1703px); opacity: 1; }
  59.1415% { transform: translateX(-1716px); opacity: 1; }
  59.4595% { transform: translateX(-1716px); opacity: 1; }
  59.5919% { transform: translateX(-1729px); opacity: 1; }
  59.9099% { transform: translateX(-1729px); opacity: 1; }
  60.0424% { transform: translateX(-1742px); opacity: 1; }
  60.3604% { transform: translateX(-1742px); opacity: 1; }
  60.4928% { transform: translateX(-1755px); opacity: 1; }
  60.8108% { transform: translateX(-1755px); opacity: 1; }
  60.9433% { transform: translateX(-1768px); opacity: 1; }
  61.2613% { transform: translateX(-1768px); opacity: 1; }
  61.3937% { transform: translateX(-1781px); opacity: 1; }
  61.7117% { transform: translateX(-1781px); opacity: 1; }
  61.8442% { transform: translateX(-1794px); opacity: 1; }
  62.1622% { transform: translateX(-1794px); opacity: 1; }
  62.2946% { transform: translateX(-1807px); opacity: 1; }
  62.6126% { transform: translateX(-1807px); opacity: 1; }
  62.7451% { transform: translateX(-1820px); opacity: 1; }
  63.0631% { transform: translateX(-1820px); opacity: 1; }
  63.1955% { transform: translateX(-1833px); opacity: 1; }
  63.5135% { transform: translateX(-1833px); opacity: 1; }
  63.6460% { transform: translateX(-1846px); opacity: 1; }
  63.9640% { transform: translateX(-1846px); opacity: 1; }
  64.0964% { transform: translateX(-1859px); opacity: 1; }
  64.4144% { transform: translateX(-1859px); opacity: 1; }
  64.5469% { transform: translateX(-1872px); opacity: 1; }
  64.8649% { transform: translateX(-1872px); opacity: 1; }
  64.9974% { transform: translateX(-1885px); opacity: 1; }
  65.3153% { transform: translateX(-1885px); opacity: 1; }
  65.4478% { transform: translateX(-1898px); opacity: 1; }
  65.7658% { transform: translateX(-1898px); opacity: 1; }
  65.8983% { transform: translateX(-1911px); opacity: 1; }
  66.2162% { transform: translateX(-1911px); opacity: 1; }
  66.3487% { transform: translateX(-1924px); opacity: 1; }
  66.6667% { transform: translateX(-1924px); opacity: 1; }
  66.7992% { transform: translateX(-1937px); opacity: 1; }
  67.1171% { transform: translateX(-1937px); opacity: 1; }
  67.2496% { transform: translateX(-1950px); opacity: 1; }
  67.5676% { transform: translateX(-1950px); opacity: 1; }
  67.7001% { transform: translateX(-1963px); opacity: 1; }
  68.0180% { transform: translateX(-1963px); opacity: 1; }
  68.1505% { transform: translateX(-1976px); opacity: 1; }
  68.4685% { transform: translateX(-1976px); opacity: 1; }
  68.6010% { transform: translateX(-1989px); opacity: 1; }
  68.9189% { transform: translateX(-1989px); opacity: 1; }
  69.0514% { transform: translateX(-2002px); opacity: 1; }
  69.3694% { transform: translateX(-2002px); opacity: 1; }
  69.5019% { transform: translateX(-2015px); opacity: 1; }
  69.8198% { transform: translateX(-2015px); opacity: 1; }
  69.9523% { transform: translateX(-2028px); opacity: 1; }
  70.2703% { transform: translateX(-2028px); opacity: 1; }
  70.4028% { transform: translateX(-2041px); opacity: 1; }
  70.7207% { transform: translateX(-2041px); opacity: 1; }
  70.8532% { transform: translateX(-2054px); opacity: 1; }
  71.1712% { transform: translateX(-2054px); opacity: 1; }
  71.3037% { transform: translateX(-2067px); opacity: 1; }
  71.6216% { transform: translateX(-2067px); opacity: 1; }
  71.7541% { transform: translateX(-2080px); opacity: 1; }
  72.0721% { transform: translateX(-2080px); opacity: 1; }
  72.2046% { transform: translateX(-2093px); opacity: 1; }
  72.5225% { transform: translateX(-2093px); opacity: 1; }
  72.6550% { transform: translateX(-2106px); opacity: 1; }
  72.9730% { transform: translateX(-2106px); opacity: 1; }
  73.1055% { transform: translateX(-2119px); opacity: 1; }
  73.4234% { transform: translateX(-2119px); opacity: 1; }
  73.5559% { transform: translateX(-2132px); opacity: 1; }
  73.8739% { transform: translateX(-2132px); opacity: 1; }
  74.0064% { transform: translateX(-2145px); opacity: 1; }
  74.3243% { transform: translateX(-2145px); opacity: 1; }
  74.4568% { transform: translateX(-2158px); opacity: 1; }
  74.7748% { transform: translateX(-2158px); opacity: 1; }
  74.9073% { transform: translateX(-2171px); opacity: 1; }
  75.2252% { transform: translateX(-2171px); opacity: 1; }
  75.3577% { transform: translateX(-2184px); opacity: 1; }
  75.6757% { transform: translateX(-2184px); opacity: 1; }
  75.8082% { transform: translateX(-2197px); opacity: 1; }
  76.1261% { transform: translateX(-2197px); opacity: 1; }
  76.2586% { transform: translateX(-2210px); opacity: 1; }
  76.5766% { transform: translateX(-2210px); opacity: 1; }
  76.7091% { transform: translateX(-2223px); opacity: 1; }
  77.0270% { transform: translateX(-2223px); opacity: 1; }
  77.1595% { transform: translateX(-2236px); opacity: 1; }
  77.4775% { transform: translateX(-2236px); opacity: 1; }
  77.6100% { transform: translateX(-2249px); opacity: 1; }
  77.9279% { transform: translateX(-2249px); opacity: 1; }
  78.0604% { transform: translateX(-2262px); opacity: 1; }
  78.3784% { transform: translateX(-2262px); opacity: 1; }
  78.5109% { transform: translateX(-2275px); opacity: 1; }
  78.8288% { transform: translateX(-2275px); opacity: 1; }
  78.9613% { transform: translateX(-2288px); opacity: 1; }
  79.2793% { transform: translateX(-2288px); opacity: 1; }
  79.4118% { transform: translateX(-2301px); opacity: 1; }
  79.7297% { transform: translateX(-2301px); opacity: 1; }
  79.8622% { transform: translateX(-2314px); opacity: 1; }
  80.1802% { transform: translateX(-2314px); opacity: 1; }
  80.3127% { transform: translateX(-2327px); opacity: 1; }
  80.6306% { transform: translateX(-2327px); opacity: 1; }
  80.7631% { transform: translateX(-2340px); opacity: 1; }
  81.0811% { transform: translateX(-2340px); opacity: 1; }
  81.2136% { transform: translateX(-2353px); opacity: 1; }
  81.5315% { transform: translateX(-2353px); opacity: 1; }
  81.6640% { transform: translateX(-2366px); opacity: 1; }
  81.9820% { transform: translateX(-2366px); opacity: 1; }
  82.1145% { transform: translateX(-2379px); opacity: 1; }
  82.4324% { transform: translateX(-2379px); opacity: 1; }
  82.5649% { transform: translateX(-2392px); opacity: 1; }
  82.8829% { transform: translateX(-2392px); opacity: 1; }
  83.0154% { transform: translateX(-2405px); opacity: 1; }
  83.3333% { transform: translateX(-2405px); opacity: 1; }
  83.4658% { transform: translateX(-2418px); opacity: 1; }
  83.7838% { transform: translateX(-2418px); opacity: 1; }
  83.9163% { transform: translateX(-2431px); opacity: 1; }
  84.2342% { transform: translateX(-2431px); opacity: 1; }
  84.3667% { transform: translateX(-2444px); opacity: 1; }
  84.6847% { transform: translateX(-2444px); opacity: 1; }
  84.8172% { transform: translateX(-2457px); opacity: 1; }
  85.1351% { transform: translateX(-2457px); opacity: 1; }
  85.2676% { transform: translateX(-2470px); opacity: 1; }
  85.5856% { transform: translateX(-2470px); opacity: 1; }
  85.7181% { transform: translateX(-2483px); opacity: 1; }
  86.0360% { transform: translateX(-2483px); opacity: 1; }
  86.1685% { transform: translateX(-2496px); opacity: 1; }
  86.4865% { transform: translateX(-2496px); opacity: 1; }
  86.6190% { transform: translateX(-2509px); opacity: 1; }
  86.9369% { transform: translateX(-2509px); opacity: 1; }
  87.0694% { transform: translateX(-2522px); opacity: 1; }
  87.3874% { transform: translateX(-2522px); opacity: 1; }
  87.5199% { transform: translateX(-2535px); opacity: 1; }
  87.8378% { transform: translateX(-2535px); opacity: 1; }
  87.9703% { transform: translateX(-2548px); opacity: 1; }
  88.2883% { transform: translateX(-2548px); opacity: 1; }
  88.4208% { transform: translateX(-2561px); opacity: 1; }
  88.7387% { transform: translateX(-2561px); opacity: 1; }
  88.8712% { transform: translateX(-2574px); opacity: 1; }
  89.1892% { transform: translateX(-2574px); opacity: 1; }
  89.3217% { transform: translateX(-2587px); opacity: 1; }
  89.6396% { transform: translateX(-2587px); opacity: 1; }
  89.7721% { transform: translateX(-2600px); opacity: 1; }
  90.0901% { transform: translateX(-2600px); opacity: 1; }
  90.2226% { transform: translateX(-2613px); opacity: 1; }
  90.5405% { transform: translateX(-2613px); opacity: 1; }
  90.6730% { transform: translateX(-2626px); opacity: 1; }
  90.9910% { transform: translateX(-2626px); opacity: 1; }
  91.1235% { transform: translateX(-2639px); opacity: 1; }
  91.4414% { transform: translateX(-2639px); opacity: 1; }
  91.5739% { transform: translateX(-2652px); opacity: 1; }
  91.8919% { transform: translateX(-2652px); opacity: 1; }
  92.0244% { transform: translateX(-2665px); opacity: 1; }
  92.3423% { transform: translateX(-2665px); opacity: 1; }
  92.4748% { transform: translateX(-2678px); opacity: 1; }
  92.7928% { transform: translateX(-2678px); opacity: 1; }
  92.9253% { transform: translateX(-2691px); opacity: 1; }
  93.2432% { transform: translateX(-2691px); opacity: 1; }
  93.3757% { transform: translateX(-2704px); opacity: 1; }
  93.6937% { transform: translateX(-2704px); opacity: 1; }
  93.8262% { transform: translateX(-2717px); opacity: 1; }
  94.1441% { transform: translateX(-2717px); opacity: 1; }
  94.2766% { transform: translateX(-2730px); opacity: 1; }
  94.5946% { transform: translateX(-2730px); opacity: 1; }
  94.7271% { transform: translateX(-2743px); opacity: 1; }
  95.0450% { transform: translateX(-2743px); opacity: 1; }
  95.1775% { transform: translateX(-2756px); opacity: 1; }
  95.4955% { transform: translateX(-2756px); opacity: 1; }
  95.6280% { transform: translateX(-2769px); opacity: 1; }
  95.9459% { transform: translateX(-2769px); opacity: 1; }
  96.0784% { transform: translateX(-2782px); opacity: 1; }
  96.3964% { transform: translateX(-2782px); opacity: 1; }
  96.5289% { transform: translateX(-2795px); opacity: 1; }
  96.8468% { transform: translateX(-2795px); opacity: 1; }
  96.9793% { transform: translateX(-2808px); opacity: 1; }
  97.2973% { transform: translateX(-2808px); opacity: 1; }
  97.4298% { transform: translateX(-2821px); opacity: 1; }
  97.7477% { transform: translateX(-2821px); opacity: 1; }
  97.8802% { transform: translateX(-2834px); opacity: 1; }
  98.1982% { transform: translateX(-2834px); opacity: 1; }
  98.3307% { transform: translateX(-2847px); opacity: 1; }
  98.6486% { transform: translateX(-2847px); opacity: 1; }
  98.7811% { transform: translateX(-2860px); opacity: 1; }
  99.0991% { transform: translateX(-2860px); opacity: 1; }
  99.2316% { transform: translateX(-2873px); opacity: 1; }
  99.5495% { transform: translateX(-2873px); opacity: 1; }
  100% { transform: translateX(-2886px); opacity: 1; }
}


@keyframes ride-across {
  0%     { transform: translateX(-90px) translateY(0); }
  1.7%   { transform: translateX(-60px) translateY(-2px); }
  3.4%   { transform: translateX(-30px) translateY(0); }
  28.6%  { transform: translateX(calc(100cqw + 90px)) translateY(0); }
  100%   { transform: translateX(calc(100cqw + 90px)) translateY(0); }
}

@keyframes ride-across-rev {
  0%     { transform: translateX(90px) translateY(0); }
  1.7%   { transform: translateX(60px) translateY(-2px); }
  3.4%   { transform: translateX(30px) translateY(0); }
  28.6%  { transform: translateX(calc(-100cqw - 90px)) translateY(0); }
  100%   { transform: translateX(calc(-100cqw - 90px)) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .dike-strip__critter { animation: none; }
  .dike-strip__sheep-img,
  .dike-strip__bike { animation: none; background-position: 0 0; }
}

/* Flagpole + waving East Frisian flag (black/red/blue horizontal stripes,
   per the Ostfriesische Landschaft's flag). Pole is a static gradient bar;
   the flag is 3 stacked stripe <rect>s inside one <svg>, skew-animated as a
   single unit with transform-origin pinned to the pole-side edge so it
   reads as flapping away from the pole -- wind from the left, flag
   streaming right, matching the scene's established wind direction. */
.dike-strip__flagpole {
  position: absolute;
  z-index: 20;
  pointer-events: none;
}

.dike-strip__flagpole-mast {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to right, #7a7a7a, #d8d8d8 40%, #9a9a9a);
  border-radius: 2px;
  box-shadow: 1px 0 2px rgba(0,0,0,0.3);
}

.dike-strip__flag {
  position: absolute;
  left: 5px;
  top: 6px;
  width: 100px;
  height: 59px;
  transform-origin: 0% 50%;
  animation: flag-wave 2.2s ease-in-out infinite;
  filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.25));
}

.dike-strip__flag-img { display: block; width: 100%; height: 100%; object-fit: fill; }

@keyframes flag-wave {
  0%, 100% { transform: skewY(6deg) scaleX(0.97); }
  50% { transform: skewY(-5deg) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .dike-strip__flag { animation: none; }
}

/* Real photorealistic dune/beach grass (assets/img/dune-grass-tuft.png,
   AI-generated via scripts/generate-dune-grass.mjs, not a drawn shape --
   the project's photorealism rule was about fake-looking assets, so a real
   photographic clump animated by CSS is fine, same as the flag). Placed at
   the lighthouse's base to cover a rough/dark crop edge in the background
   photo there. Sways from its own base (transform-origin bottom-center),
   unlike the flag which sways from its pole-side edge. Each instance gets
   its own randomized timing (same reasoning as the sheep steps and grass
   this session already ran into: identical timing across nearby instances
   reads as one synchronized twitch, not independent plants). */
.dike-strip__dune-grass {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 20;
  transform-origin: 50% 100%;
  animation: dune-grass-sway var(--sway-dur, 4.5s) ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
}

@keyframes dune-grass-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(2.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dike-strip__dune-grass { animation: none; }
}

.dike-strip__sign {
  position: absolute;
  bottom: 23%;
  z-index: 1;
  width: 140px;
}

.dike-strip__sign--left { left: 2%; }
.dike-strip__sign--right { right: 2%; }

.dike-strip__sign-img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.3));
}

.dike-strip__sign-text {
  position: absolute;
  color: #211d18;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* Font sizes reduced from the shared 1.05rem so neither label touches the
   sign's black border -- "Rest der Welt" (3 words) needed more reduction
   than the single word "Ostfriesland" at the same nominal size. */
.dike-strip__sign-text--left { top: 24%; left: 14%; font-size: 0.89rem; }
.dike-strip__sign-text--right { top: 27%; left: 14%; font-size: 0.945rem; }

/* ---------- Kooperationen ---------- */

.coop {
  background: #1C2B3A;
  color: #F0E6D2;
  padding: 4rem 1.5rem;
  text-align: center;
}

.coop h2 { color: #F0E6D2; }

.coop__lede {
  max-width: 560px;
  margin: 0 auto 2.5rem;
  color: rgba(240, 230, 210, 0.85);
  line-height: 1.6;
}

.coop__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
  margin-bottom: 0.8rem;
}

.coop__stat { display: flex; flex-direction: column; }

.coop__stat-value {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: #E0A93C;
}

.coop__stat-label {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 230, 210, 0.7);
  margin-top: 0.3rem;
}

.coop__note {
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: rgba(240, 230, 210, 0.5);
  margin-bottom: 2.5rem;
}

.coop__cta {
  display: inline-block;
  border: 1px solid #E0A93C;
  color: #E0A93C;
  text-decoration: none;
  padding: 0.85rem 1.8rem;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.06em;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.coop__cta:hover { background: #E0A93C; color: #1C2B3A; }

/* ---------- Social links ---------- */

.social {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  text-align: center;
}

.social__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.social__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  border: 1px solid rgba(28, 43, 58, 0.25);
  padding: 1rem 1.6rem;
  min-width: 200px;
  text-decoration: none;
  color: #1C2B3A;
  transition: border-color 0.2s, background 0.2s;
}

.social__link:hover { border-color: #A63A2E; background: rgba(166, 58, 46, 0.06); }

.social__name {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A63A2E;
}

.social__handle { font-size: 1.05rem; }

/* ---------- Blog teaser (homepage) ---------- */

.blog-teaser {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  text-align: center;
}

.blog-teaser h2 { color: #1C2B3A; margin-bottom: 0.6rem; }

.blog-teaser__lede {
  max-width: 560px;
  margin: 0 auto 2.5rem;
  color: #3c362c;
  line-height: 1.6;
}

.blog-teaser__list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.blog-teaser__card {
  display: block;
  text-align: left;
  border: 1px solid rgba(28, 43, 58, 0.18);
  padding: 1.5rem 1.8rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, background 0.2s;
}

.blog-teaser__card:hover { border-color: #A63A2E; background: rgba(166, 58, 46, 0.05); }

.blog-teaser__date {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A63A2E;
}

.blog-teaser__title {
  font-size: 1.25rem;
  color: #1C2B3A;
  margin: 0.4rem 0 0.5rem;
}

.blog-teaser__excerpt { color: #3c362c; line-height: 1.6; }

.blog-teaser__all {
  display: inline-block;
  color: #A63A2E;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.blog-teaser__all:hover { text-decoration: underline; }

/* ---------- Blog overview + article pages ---------- */

.blog-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

.blog-page__back {
  display: inline-block;
  margin-bottom: 2rem;
  color: #A63A2E;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
}

.blog-page h1 { color: #1C2B3A; margin-bottom: 0.3rem; }

.blog-page__kicker {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: #2E5F6B;
  margin-bottom: 2.5rem;
}

.blog-page .blog-teaser__list { text-align: left; }

.blog-post__meta {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #A63A2E;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.blog-post h1 { margin-bottom: 1.5rem; }

.blog-post p {
  color: #3c362c;
  line-height: 1.75;
  margin-bottom: 1.2rem;
  max-width: 680px;
}

.blog-post__videos {
  border: 1px solid rgba(28, 43, 58, 0.18);
  padding: 1.4rem 1.7rem;
  margin: 2.2rem 0 2.5rem;
  max-width: 680px;
  background: rgba(166, 58, 46, 0.04);
}

.blog-post__videos h2 {
  font-family: 'Courier New', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A63A2E;
  margin-bottom: 0.8rem;
}

.blog-post__videos ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.blog-post__videos a {
  color: #1C2B3A;
  text-decoration: none;
  line-height: 1.5;
}

.blog-post__videos a:hover { color: #A63A2E; text-decoration: underline; }

/* ---------- Footer / Kontakt + Impressum ---------- */

.site-footer {
  background: #14202B;
  color: rgba(240, 230, 210, 0.75);
  padding: 3rem 1.5rem 2rem;
}

.site-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.site-footer h3 {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E0A93C;
  font-weight: 400;
  margin-bottom: 0.7rem;
}

.site-footer p { line-height: 1.6; }
.site-footer a { color: #F0E6D2; }

.site-footer__legal {
  max-width: 1180px;
  margin: 2.5rem auto 0;
  font-family: 'Courier New', monospace;
  font-size: 0.7rem;
  color: rgba(240, 230, 210, 0.4);
}

/* ---------- Impressum / legal page ---------- */

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;
}

.legal__back {
  display: inline-block;
  margin-bottom: 2rem;
  color: #A63A2E;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
}

.legal h1 { color: #1C2B3A; margin-bottom: 0.3rem; }

.legal__kicker {
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  color: #2E5F6B;
  margin-bottom: 2.5rem;
}

.legal h2 {
  font-size: 1.05rem;
  color: #1C2B3A;
  margin: 2rem 0 0.5rem;
}

.legal p { color: #3c362c; line-height: 1.7; }
.legal a { color: #A63A2E; }

.legal__todo {
  background: rgba(224, 169, 60, 0.15);
  border-left: 3px solid #E0A93C;
  padding: 0.6rem 0.9rem;
}

/* ---------- Umbau 04.10.: kein Hero-Header mehr ----------
   Der Deich-Streifen ist jetzt der Seitenkopf. Er rückt um --deich-himmel
   nach unten, darüber zeigt sich der Teil der Himmelfotos, der bisher
   oben abgeschnitten war (die Fotos reichen ~390 px über den Streifen).
   overflow-x:clip statt hidden, damit der Himmel nach oben sichtbar bleibt,
   Radfahrer und Schiff an den Seiten aber weiter abgeschnitten werden. */
:root { --deich-himmel: 200px; }
.dike-strip {
  top: var(--deich-himmel);
  overflow: visible;
  overflow-x: clip;
}
.log { min-height: calc(1248px + var(--deich-himmel)); }

.deich-slogan {
  position: absolute;
  top: 64px; /* 04.10.: etwas tiefer, damit der Strahl das Schild besser trifft */
  left: 0;
  right: 0;
  z-index: 31; /* über .log (z 30), sonst fängt der Abschnitt alle Klicks ab; Strahl (z 24) bleibt dahinter */
  text-align: center;
  pointer-events: none;
}
.deich-slogan h1 {
  margin: 0;
  line-height: 1;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35em;
}
/* Schild 30 % größer (04.10.): Schrift x1.3, Kasten zusätzlich breiter. */
.deich-slogan .hero__lede { font-size: calc(1.3 * clamp(0.78rem, 1.7vw, 1.15rem)); }
.deich-slogan .hero__name { font-size: calc(1.3 * clamp(2rem, 6.6vw, 5.2rem)); }

/* Leuchtturm deutlich größer (04.10.): wächst vom Sockel aus nach oben.
   Der vergrößerte Ausschnitt deckt den kleineren Turm im Himmelfoto
   dahinter vollständig ab. */
.dike-strip__tower-cutout {
  /* dike-tower-crop-full.png: kompletter Turm bis zum Fuß (natürlich
     x1400-1800, y480-1300 im Himmelfoto), damit beim Vergrößern kein
     kleiner Sockel aus dem Foto darunter hervorschaut. Untere Kante =
     Unterkante des Himmelfotos (bottom 611px). */
  right: 79px;
  bottom: 611px;
  transform: scale(var(--turm-scale, 1.3));
  transform-origin: 50% 100%;
}

/* Lichtstrahl des Leuchtturms (04.10.). KI-Bild auf reinem Schwarz, per
   screen-Mischung bleibt nur das Licht. Lichtpunkt im Bild (1181|265 von
   1376x768) sitzt auf der Laterne: Laterne = Turm-Ausschnitt Punkt
   (197|225) bei Anzeigefaktor 316/400*1.3 -> 240 px vom rechten Rand,
   26 px unter der Streifen-Oberkante. Bildbreite 1800 px (Faktor 1.308). */
.deich-strahl {
  position: absolute;
  width: 1800px;
  height: auto;
  right: -15px;
  top: -321px;
  z-index: 21;
  opacity: 0.85;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Neuer rot-weißer Leuchtturm (04.10., Flow, freigestellt: assets/img/
   leuchtturm-rotweiss.png 360x1210). Ersetzt den Pilsumer Turm; das rechte
   Himmelfoto ist dafür die turmfreie Fassung. Faktor 0.67 -> 241x811 px,
   Fuß an derselben Stelle wie vorher (bottom 611px). */
.dike-strip__tower-cutout--rotweiss {
  right: 120px;
  bottom: 631px; /* 04.10.: 20 px höher, Fuß bei 617 (siehe build-leuchtfeuer-dreh.py) */
  width: 241px;
  transform: none;
}
/* Fahne am Mast oben auf dem Turm (Mastspitze im Bild bei 53|16 ->
   35|11 px ab Turm-Oberkante). Die eigene Stange entfällt; die Fahne
   weht nach links vom Turm weg. */
.dike-strip__flagpole--turm {
  right: 326px;
  top: -180px;
  height: 60px;
}
.dike-strip__flagpole--turm .dike-strip__flagpole-mast { display: none; }
.dike-strip__flagpole--turm .dike-strip__flag {
  left: auto;
  right: 0;
  top: 0;
  width: 84px;
  height: 50px;
  transform-origin: 100% 50%;
}
.dike-strip__flagpole--turm .dike-strip__flag-img { transform: scaleX(-1); }

/* Slogan auf dunklem Kasten (04.10.): Nachtblau der Seite (#1C2B3A),
   leicht durchscheinend, dünner Goldrahmen (#E0A93C wie die CTA-Buttons).
   Dunkel genug, dass der Leuchtturm-Strahl beim Darüberstreichen sichtbar
   aufhellt (.deich-slogan__kasten--hell, gesetzt vom Strahl-Skript). */
.deich-slogan h1 {
  padding: 0.55em 2.2em 0.65em; /* 04.10.: breiter (vorher 1.4em seitlich) */
  background: rgba(28, 43, 58, 0.94); /* fast deckend: Leuchtfeuer verschwindet dahinter */
  border: 1px solid rgba(224, 169, 60, 0.85);
  box-shadow: inset 0 0 0 4px rgba(28, 43, 58, 0.78), inset 0 0 0 5px rgba(224, 169, 60, 0.45), 0 6px 24px rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Leuchtfeuer (04.10.): Lichtquelle im Clip bei 985|405 von 1280x720, Anzeige-
   faktor 1.6 (2048 px breit). Liegt auf der Linse des rot-weißen Turms
   (240 px vom rechten Rand, 3 px über der Streifen-Oberkante) -- rechts
   verankert wie der Turm. Über dem Slogan-Kasten (z 26), damit der Strahl
   ihn beim Überstreichen sichtbar aufhellt. */
.deich-leuchtfeuer {
  position: absolute;
  right: -232px;
  top: -651px;
  width: 2048px;
  height: 1152px;
  z-index: 26;
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
  /* Ränder weich ausblenden: komprimiertes Schwarz ist nicht ganz 0 und
     zeichnete sonst die Videokanten als feine Linie in den Himmel. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 92%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 92%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 18%, #000 80%, transparent 100%);
  mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
  .deich-leuchtfeuer { display: none; }
}

/* Wegweiser-Text (04.10.): zwei Zeilen (Ort + km), zentriert im gelben
   Schildfeld. Schriftgröße hängt an der Schildbreite (font-size am Schild =
   Breite / 10), damit sie auch auf dem kleineren Weener-Schild passt.
   Schildfeld im Bild: rechts zeigend x 8-84 %, links zeigend x 16-92 %,
   y 21-48 % (innerhalb der schwarzen Kante). */
.dike-strip__sign { font-size: 14px; }
.dike-strip__sign .dike-strip__sign-text {
  top: 21%;
  height: 27%;
  width: 76%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.05;
  font-size: 1em;
  letter-spacing: -0.04em;
}
.dike-strip__sign .dike-strip__sign-text--right { left: 8%; }
.dike-strip__sign .dike-strip__sign-text--left { left: 16%; }
.dike-strip__sign--left .dike-strip__sign-text { font-size: 0.88em; }
.dike-strip__sign-km {
  display: block;
  font-size: 0.82em;
  margin-top: 0.1em;
}

/* Easter Egg: Wegweiser nach Weener (Rheiderland, auf der anderen Seite der
   Ems). Gleiches Schild, um den Pfosten (x ~45 % im Bild) perspektivisch
   gedreht, so dass der Pfeil schräg nach hinten über den Deich zeigt.
   Steht weiter oben auf dem Deich -> kleiner als die vorderen Schilder. */
.dike-strip__sign--weener {
  bottom: auto;
  top: 475px;
  right: 360px;
  width: 146px;
  z-index: 12;
  font-size: 16px; /* etwas größer als Breite/10, damit lesbar */
  /* Pfeil zeigt nach links über den Deich: linkes Ende vorn (größer), rechtes
     Ende nach hinten gedreht (so gewählt 04.10.); dazu leicht nach oben Richtung Deichkrone
     angehoben (skewY im Schild selbst, hält den Pfosten senkrecht). Pfosten im Bild bei ~55 %. */
  transform: perspective(300px) rotateY(-60deg) skewY(12deg); /* vom User gewählt (Variante D); Scherung statt Drehung: Pfosten bleibt senkrecht */
  transform-origin: 55% 50%;
}

/* Schrift auf dem gedrehten Weener-Schild etwas kräftiger (perspektivisch
   gestaucht wirkt sie sonst dünn) */
.dike-strip__sign--weener .dike-strip__sign-text {
  top: 18%; /* minimal höher, sonst steht "1 km" auf dem schwarzen Rand */
  font-weight: 900;
  letter-spacing: 0.06em;
  -webkit-text-stroke: 0.4px #211d18;
}

/* ===== Rollo unter dem Slogan-Schild (04.10.) =====
   Zugschnur hängt an der Unterkante des Schilds. Klick: der Stoff rollt aus
   dem Wickelrohr herunter bis etwa zur Deichkrone, darauf je Seite ein Thema
   mit 4 Videos aus dem alten Logbuch. "Weiter": einmal hoch, Seite wechseln,
   wieder runter. Bewegt wird nur transform (Stoff + Schnur synchron);
   --rollo-h misst deich-rollo.js. Personen (Bine zieht) kommen später dazu. */
.deich-schild {
  position: relative;
  display: inline-block;
}
.rollo {
  --rollo-h: 300px;
  --rollo-stab: 14px;
  --rollo-ease-auf: cubic-bezier(0.32, 0.72, 0, 1);
  --rollo-ease-zu: cubic-bezier(0.23, 1, 0.32, 1);
  position: absolute;
  top: 100%;
  left: 18px;
  right: 18px;
  text-align: left;
  pointer-events: none;
}
.rollo__rohr {
  position: relative;
  z-index: 2;
  height: 12px;
  margin: 0 -6px;
  border-radius: 6px;
  background: linear-gradient(#f4efe4, #cfc6b4 55%, #a99f8c);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.rollo__schacht {
  position: relative; /* malt über dem Aussichtsturm (der steht im DOM davor) */
  overflow: hidden;
  margin-top: -3px;
}
.rollo__stoff {
  pointer-events: auto;
  transform: translateY(calc(-100% + var(--rollo-stab)));
  transition: transform 380ms var(--rollo-ease-zu);
  padding: 16px 20px 0;
  background:
    repeating-linear-gradient(0deg, rgba(120, 100, 70, 0.05) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06), transparent 8%, transparent 92%, rgba(0, 0, 0, 0.06)),
    #f3ebda;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  color: #1C2B3A;
}
.rollo[data-state="offen"] .rollo__stoff {
  transform: translateY(0);
  transition: transform 700ms var(--rollo-ease-auf);
}
/* Zwei Reihen je Seite (wie eine Logbuch-Doppelseite): Thema links als
   Randnotiz, daneben die 4 Videos. */
.rollo__reihe {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: start;
}
.rollo__reihe + .rollo__reihe {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(107, 90, 68, 0.35);
}
.rollo__titel {
  margin: 4px 0 0;
  font-family: 'Caveat', cursive;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: #1C2B3A;
}
.rollo__videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.rollo__video {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms ease-out;
}
.rollo__video:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .rollo__video:hover { transform: translateY(-2px); }
  .rollo__video:hover img { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); }
}
.rollo__video img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: box-shadow 160ms ease-out;
}
.rollo__tag {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8741c;
}
.rollo__caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.1em;
  font-family: 'Caveat', cursive;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.05;
}
/* Videos erscheinen leicht gestaffelt, sobald der Stoff unten ist */
.rollo__video {
  opacity: 0;
  translate: 0 6px;
  transition: transform 160ms ease-out, opacity 0s, translate 0s;
}
.rollo[data-state="offen"] .rollo__video {
  opacity: 1;
  translate: 0 0;
  transition: transform 160ms ease-out, opacity 300ms ease-out, translate 300ms ease-out;
}
.rollo[data-state="offen"] .rollo__video:nth-child(1) { transition-delay: 0s, 380ms, 380ms; }
.rollo[data-state="offen"] .rollo__video:nth-child(2) { transition-delay: 0s, 430ms, 430ms; }
.rollo[data-state="offen"] .rollo__video:nth-child(3) { transition-delay: 0s, 480ms, 480ms; }
.rollo[data-state="offen"] .rollo__video:nth-child(4) { transition-delay: 0s, 530ms, 530ms; }
.rollo[data-state="offen"] .rollo__video:nth-child(5) { transition-delay: 0s, 580ms, 580ms; }
.rollo[data-state="offen"] .rollo__video:nth-child(6) { transition-delay: 0s, 630ms, 630ms; }
.rollo[data-state="offen"] .rollo__video:nth-child(7) { transition-delay: 0s, 680ms, 680ms; }
.rollo[data-state="offen"] .rollo__video:nth-child(8) { transition-delay: 0s, 730ms, 730ms; }

/* Fallstab unten am Stoff: die Leiste mit Zähler und "Weiter"; ihre unteren
   14 px bleiben bei hochgezogenem Rollo unter dem Rohr sichtbar. */
.rollo__leiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px -20px 0;
  padding: 6px 20px calc(var(--rollo-stab) + 4px);
  background: linear-gradient(transparent calc(100% - var(--rollo-stab)), #8a6a43 calc(100% - var(--rollo-stab)), #6b5032);
}
.rollo__zaehler {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: #6b5a44;
}
.rollo__weiter {
  font: 700 13px/1 system-ui, sans-serif;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border: 1px solid rgba(224, 169, 60, 0.85);
  border-radius: 3px;
  background: #1C2B3A;
  color: #FBF6EA;
  cursor: pointer;
  transition: transform 160ms ease-out, background-color 160ms ease;
}
.rollo__weiter:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .rollo__weiter:hover { background: #2a3f54; }
}

/* Zugschnur: hängt mittig am Fallstab und fährt mit ihm (gleiche Dauer und
   Kurve wie der Stoff). */
.rollo__schnur {
  pointer-events: auto;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -22px;
  width: 44px;
  height: 74px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(calc(var(--rollo-stab) - var(--rollo-h)));
  transition: transform 380ms var(--rollo-ease-zu);
  -webkit-tap-highlight-color: transparent;
}
.rollo[data-state="offen"] .rollo__schnur {
  transform: translateY(0);
  transition: transform 700ms var(--rollo-ease-auf);
}
.rollo__schnur-faden,
.rollo__schnur-griff {
  position: absolute;
  left: 50%;
  transform-origin: 50% 0;
}
.rollo__schnur-faden {
  top: -4px;
  width: 2px;
  height: 52px;
  margin-left: -1px;
  background: repeating-linear-gradient(#e9dfc9 0 3px, #b9ab8e 3px 5px);
}
.rollo__schnur-griff {
  top: 46px;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  border-radius: 7px / 9px;
  background: radial-gradient(circle at 35% 30%, #f3d58f, #E0A93C 45%, #8a5f17);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease-out;
}
.rollo__schnur:active .rollo__schnur-griff { transform: translateY(5px); }
.rollo__schnur-text {
  position: absolute;
  top: 48px;
  left: 34px;
  white-space: nowrap;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  font-weight: 700;
  color: #FBF6EA;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.rollo__schnur:focus-visible { outline: none; }
.rollo__schnur:focus-visible .rollo__schnur-griff { outline: 2px solid #FBF6EA; outline-offset: 2px; }
/* sanftes Pendeln als Hinweis, nur solange zu */
.rollo[data-state="zu"] .rollo__schnur-faden,
.rollo[data-state="zu"] .rollo__schnur-griff {
  animation: rollo-pendeln 3.2s ease-in-out infinite;
}
.rollo[data-state="zu"] .rollo__schnur-griff { transform-origin: 50% -50px; }
@keyframes rollo-pendeln {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3deg; }
}

@media (max-width: 760px) {
  .rollo { left: 8px; right: 8px; }
  .rollo__stoff { padding: 12px 12px 0; }
  .rollo__videos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rollo__reihe { grid-template-columns: 1fr; gap: 6px; }
  .rollo__leiste { margin: 10px -12px 0; padding-left: 12px; padding-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .rollo__stoff, .rollo__schnur, .rollo[data-state="offen"] .rollo__stoff,
  .rollo[data-state="offen"] .rollo__schnur { transition-duration: 0s; }
  .rollo__schnur-faden, .rollo__schnur-griff { animation: none !important; }
}

/* Zug-Animation beim ersten Öffnen (04.10.): Aussichtsturm taucht auf, Bine
   steht oben, springt, packt den Griff und fährt mit dem Rollo herunter.
   Bine hängt in der Schnur (fährt dadurch exakt mit), der Turm steht fest.
   Maße für die 2560-px-Ansicht ausgemessen: Griff zu bei y 281, Deichkrone
   ~660; Bine 230 px hoch (Faust-Griff im Bild bei 50|30 von 317x1324). */
.rollo__turm {
  position: absolute;
  left: calc(50% - 41px);
  top: 241px; /* Plattform unter Bines Füßen im Stand: 15 px tiefer als hängend, Griff nur im Sprung erreichbar */
  width: 126px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform-origin: 92% 100%; /* kippt über den rechten Fuß */
}
.rollo__person {
  position: absolute;
  left: 13px;
  top: 41px;
  width: 55px;
  height: auto;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
}
.rollo--zug .rollo__stoff,
.rollo--zug .rollo__schnur,
.rollo--zug[data-state="offen"] .rollo__stoff,
.rollo--zug[data-state="offen"] .rollo__schnur {
  transition-duration: 1300ms;
  /* langsam anziehen, dann gleichmäßig runter (Gewicht statt Sturz) */
  transition-timing-function: cubic-bezier(0.5, 0, 0.2, 1);
}
.rollo__schnur-griff { transition: transform 160ms ease-out, opacity 120ms linear; }
.rollo--haelt .rollo__schnur-griff { opacity: 0; }
.rollo--haelt .rollo__schnur-faden,
.rollo--haelt .rollo__schnur-griff { animation: none; }
.rollo--intro .rollo__schnur-text { opacity: 0; }

/* KI-Sprung (04.10., Clip v5 mit Luft nach oben, Schnur herausgerechnet):
   letztes Bild deckt sich mit .rollo__person (sprung.json: Griff-Oberkante
   17.5 px, Fußmitte 38.75 px bei 76 px Breite; Datei ab Bild 44) */
.rollo__sprung {
  position: absolute;
  left: -0.4px;
  top: 43.5px; /* Hand am Sprung-Höhepunkt (Bild 20, Hand 2,5 px) = Griff-Oberkante 46 */
  width: 76px;
  height: auto;
  max-width: none;
  opacity: 0;
  pointer-events: none;
}