/* Global base styles */
body {
  margin: 0;
  background: #000;
  overflow-x: hidden;
  overflow-y: auto; /* Allow vertical scroll, keep horizontal hidden */
  font-size: 20px;
}

.page {
  position: relative;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: visible;
}


#page2 {
  position: relative;
  height: calc(var(--vh, 1vh) * 100);
  min-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
  z-index: 118;
}
.scene {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: visible;
}

.season {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 1.8s ease, transform 2.2s ease;
  z-index: 100;
}
.season.active {
  opacity: 1;
  transform: scale(1);
}
.grass {
  background-image: url('../images/Maxi/Maxi5.jpg'); /* Use Maxi5, enlarged lower half */
  background-size: cover;         /* Preserve aspect */
  background-position: center bottom; /* Focus lower area */
  background-repeat: no-repeat;
}

/* Flock container (follows page 2 scroll) */
#flock-page1 {
  position: absolute;  /* Relative to page2 */
  inset: 0;
  pointer-events: none;
  z-index: 2000; /* Above the background */
}

/* Sheep styles */
#flock-page1 .sheep {
  position: absolute;
  display: block;
  z-index: 1;
  width: clamp(288px, 44.8vw, 640px); /* About 20% smaller */
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.45));
  will-change: transform, left, top;
}



/* Hero sheep */
#sheephero-wrapper {
  position: fixed;
  inset: 0;
  left: 50%;                  /* Centered */
  top: 20%;                   /* 20% from viewport top */
  pointer-events: none;
  z-index: 100000;
}

.sheephero {
  position: fixed;
  left: 50%;                  /* Centered */
  top: 20%;                   /* 20% from viewport top */
  transform: translate(-50%, -50%) scale(1);

  width: clamp(360px, 48vw, 800px);  /* Responsive size (tweakable) */
  aspect-ratio: 1/1;
  height: auto;
  object-fit: contain;
  display: block;

  z-index: 99999;
  pointer-events: none;

  opacity: 0;                 /* Hidden initially (avoid flash on page3) */
  transition: opacity 0.4s ease;  /* Soft entry */
}

.hero-text {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translate(60%, -125%); /* Offset right, keep size */
  width: clamp(234px, 34vw, 416px); /* ~1.3x bigger */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 100000; /* Just above hero */
}

.hero-text img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-text.hero-text-wir {
  transform: translate(-120%, -125%); /* Shift left for Wir */
}

.hero-text .hero-text-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  transform: translate(120%, 0); /* Larger right offset */
  display: block;
  z-index: 2; /* Above the main image */
}

.hero-text .hero-text-overlay.show {
  opacity: 1;
}


/* Digger (fixed layer) */
#digger-fixed {
  position: absolute;       /* Anchored inside page 5 */
  top: 50%;                 /* Page midline */
  left: 120%;               /* Start off-screen to the right */
  width: 180px;
  height: 100px;
  pointer-events: none;
  z-index: 3600;          /* Above privat drop, below Kinder/text */
  transform: translate(-50%, -50%) scale(5);
  display: none;         
}

/* Horizontal track container */
.cover-transition-wrapper {
  position: relative;
  width: 100vw;
  height: auto;        /* Let content define height */
  overflow: visible;   /* Normal vertical flow */
  z-index: 4000; /* Keep pages 1/2 above later backgrounds */
}
.cover-h-row,
.cover-h-sticky {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}
.cover-h-track {
  display: flex;
  flex-direction: column;        /* Stack vertically */
  width: 100%;
  height: auto;                  /* Natural height */
  will-change: auto;
  transition: none;
  transform: none !important;
}
.cover-h-track .page {
  flex: 0 0 100vh;               /* Each page fills the viewport height */
  width: 100vw;
  position: relative;
  transform: translateZ(0);
}

/* Down arrow: pages 1-6 (only appears on page1 after Maxi5 is revealed) */
.down-arrow {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  z-index: 120000;
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.down-arrow.show {
  opacity: 1;
  pointer-events: auto;
}
.down-arrow .arrow-stem {
  display: block;
  margin: 0 auto;
  width: 6px;
  height: 28px;
  background: #ff8ac5;
  border-radius: 3px;
  animation: bounce 1.6s ease-in-out infinite;
}
.down-arrow .arrow-head {
  display: block;
  width: 0;
  height: 0;
  margin: 6px auto 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #ff8ac5;
  animation: bounce 1.6s ease-in-out infinite;
  transform: translateY(6px);
}

/* Page 2 */

/* Background containers (static fill, no transition) */
.Besuche1,
.Besuche2 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 1 !important;        /* Always opaque */
  transition: none !important;
}

/* Background images */
.Besuche1 { background-image: url('../images/Maxi/Maxi2.jpg'); }
.Besuche2 { background-image: url('../images/Maxi/Maxi3.jpg'); }


/* Page 5 */
#page5 { position: relative; }
.backgroundtop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.05);
  z-index: 0;
}
#page5 .p3-anim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
#page1 .text-group-right {
  opacity: 0;
  transition: opacity 0.6s ease 0.1s;
  pointer-events: none;
}
#page1 .text-group-right.show {
  opacity: 1;
  pointer-events: auto;
}
.text-group-right {
  position: absolute;
  right: 10%;
  bottom: 90%;
  width: 30vw;
  text-align: right;
  z-index: 20;
  font-size: 8rem; /* 4x larger than original */
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform 1.2s cubic-bezier(.7,0,.3,1);
}
.text-group-left {
  position: absolute;
  left: 10%;
  bottom: 70%;
  width: 30vw;
  text-align: left;
  z-index: 20;
  font-size: 8rem; /* 4x larger than original */
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform 1.2s cubic-bezier(.7,0,.3,1);
}

#page7 .text-group-right {
  bottom: 42%;               /* Further up */
  right: 55%;                /* Shift left */
  width: clamp(160px, 28vw, 360px);
  font-size: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 5200;             /* Above other overlays */
  pointer-events: none;       /* Always pass through; keep hand clickable */
}

#page7 .page7-yiyun-img {
  display: block;
  width: 100%;
  height: auto;
}

#page7 #page7Yiyun.show {
  opacity: 1;
  pointer-events: none;       /* Stay passthrough so clicks reach the hand area */
}

/* Raise text layer on page 5 */
#page5 .text-group-left {
  z-index: 3100; /* Above digger/privat */
}
.text {
  margin-top: 1em;
  margin-bottom: 1em;
  color: #ff9800 !important; /* Orange */
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}

#page2 .title-fixed .title {
  color: #ff9800; /* Orange */
}

/* Pin page6 copy to the top */
#page6 .text-group-left {
  top: 2%;
  bottom: auto;
}

/* Page 6 */
#page3 { position: relative; }
.page3-title-overlay {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translate(-50%, -20%);
  z-index: 120000; /* Above hero and foreground to stay visible */
  pointer-events: none;
}
.page3-title-overlay img {
  display: block;
  width: min(90vw, 1040px);
  height: auto;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.3));
}
.backgroundbottom {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(1.05);
  z-index: 0;
}
.fade-to-black {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 10;
  transition: background 1s ease-out;
}

/* Page 4: eye interaction block */
.sheep-outline {
  position: absolute;
  inset: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;

  /* Shrink + shift left */
  transform-origin: left center;
  transform: translateX(-8vw) scale(1);
}
.sheep-outline.scatter-out {
  animation: sheepScatter 1s ease forwards;
}

#page1 {
  position: relative;
}
.eye-interaction-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/Maxi/Maxi5.jpg');
  background-size: cover;       /* Preserve ratio, no stretch */
  background-position: center top; /* Focus upper area */
  background-repeat: no-repeat;
}
.eye-interaction-container.show-maxi {
  background-image: url('../images/Maxi/Maxi5.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.eye-layer-stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eye-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 50%; /* Slight left shift */
  pointer-events: none;
}
.eye-layer-base {
  display: none;
}

.eye-layer-middle {
  z-index: 2;
  opacity: 0;
  --cut: 0%;
  mask-image: radial-gradient(circle at 50% 50%,
    transparent 0%,
    transparent var(--cut, 0%),
    black calc(var(--cut, 0%) + 2%),
    black 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    transparent 0%,
    transparent var(--cut, 0%),
    black calc(var(--cut, 0%) + 2%),
    black 100%);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
}
.eye-layer-middle.dissolve {
  animation: eyeMiddleDissolve 1s ease-in forwards;
}
.eye-layer-top {
  z-index: 3;
  opacity: 1;
  object-fit: cover;          /* Match eye layer, avoid jumps */
  object-position: 42% 50%;
}

/* Click icon */
.click-icon {
  position: absolute;
  --click-translate-x: 0;
  --click-translate-y: -50%;
  right: 50%;
  top: 50%;
  transform: translate(var(--click-translate-x), var(--click-translate-y));
  width: 64px;
  height: 64px;
  z-index: 10;
  cursor: pointer;
  opacity: 0.8;
  pointer-events: auto;

  /* Subtle up/down float */
  animation: clickBounce 1.6s ease-in-out infinite;
}

.click-icon.is-hidden {
  opacity: 0;
  animation: none;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.click-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Pages 6/7: autumn halves */
#page3 .backgroundtop {
  background-image: url('../images/autumn.jpg') !important;
  background-size: cover !important;           /* Scale to fill, avoid side gaps */
  background-position: center top !important;  /* Align upper half */
  background-repeat: no-repeat !important;
}
#page4 .backgroundbottom {
  background-image: url('../images/autumn.jpg') !important;
  background-size: cover !important;             /* Fill width consistently */
  background-position: center bottom !important; /* Lower half to stitch with above */
  background-repeat: no-repeat !important;
}


/* Pages 8/9 */
#page5, #page6 {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
#page5 {
  overflow: visible; /* Allow Kinder/text/building to rise without clipping */
  z-index: 2500;
}
#page6 {
  overflow: visible;
}
#page5 .backgroundtop {
  background-image: url('../images/baustelle.jpg') !important;
  background-size: 100% 200% !important;      /* Stretch height to 2x, show upper half */
  background-position: center 0% !important;  /* Anchor to top half */
  background-repeat: no-repeat !important;
}
#page6 .backgroundbottom {
  background-image: url('../images/baustelle.jpg') !important;
  background-size: 100% 200% !important;       /* Stretch height to 2x, show lower half */
  background-position: center 100% !important; /* Anchor to bottom half */
  background-repeat: no-repeat !important;
}

/* Hide page5 Kinder/dialog/text once in page6+ */
body.page6-plus #page5 .kinder-wrap,
body.page6-plus #page5 #dialogOverlay,
body.page6-plus #page5 .text-group-left {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Fallback to prevent collapse if inline style is missing */
#page5 .backgroundtop,
#page6 .backgroundbottom {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Page6 privat drop */
.privat-drop {
  position: fixed; /* Leave local stacking to sit above page layers */
  left: 50%;
  top: 0;
  transform: translate(-50%, -200vh) scale(1); /* Start far above viewport */
  opacity: 0;
  pointer-events: none;
  z-index: 1400; /* Below digger/Kinder text */
}
.privat-drop .privat-img {
  width: 560px; /* Scaled up */
  height: auto;
  display: block;
}
.privat-drop.show {
  animation: privatFall 0.9s ease-out forwards;
}

/* block67 split background (reusable) */
.block67-top .backgroundtop {
  position: absolute;
  inset: 0;
  background-size: 100% 200%;
  background-position: center 0%;
  background-repeat: no-repeat;
  filter: saturate(1.05);
  z-index: 0;
}
.block67-bottom .backgroundbottom {
  position: absolute;
  inset: 0;
  background-size: 100% 200%;
  background-position: center 100%;
  background-repeat: no-repeat;
  filter: saturate(1.05);
  z-index: 0;
}

/* Container defines movement bounds relative to bottom */
.kinder-wrap {
  position: absolute;
  left: 40%;
  bottom: 0%;               /* Bottom of page 7 */
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 3800; /* Above digger, below dialog */

}

/* Actual Kinder image */
.kinder-img {
  display: block;
  width: min(100vw, 800px); /* Adjustable size */
  max-width: 800px;
  height: auto;

  /* Start hidden below page7 */
  transform: translateY(100%);
  will-change: transform;
}

#dialogOverlay {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4000; /* Above Kinder/text */
}

.dialog-img {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease;
  max-width: 14vw; /* Half size */
  height: auto;
}

#schauLeft {
  left: 2%;
  top: 35%; /* Lowered */
}

#schauRight {
  right: 20%; /* Nudged right */
  top: 35%; /* Lowered */

  
}

#page6 .schild-wrap {
  position: absolute;
  top: 4%;
  right: 4%;
  width: clamp(156px, 31vw, 351px); /* About 1.3x larger */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 3600; /* Above building layers */
}

#page6 .schild-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

body.page6-plus #page6 .schild-wrap {
  opacity: 1;
  transform: translateY(0);
}

#page6 .nur-overlay {
  position: absolute;
  top: 38%;
  left: 35%;
  transform: translate(-50%, -50%); /* Shift left */
  width: clamp(182px, 36vw, 338px); /* About 1.3x larger */
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3700; /* Above building layers */
}

#page6 .nur-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

#page6 .nur-overlay.show {
  opacity: 1;
}

.house-video-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2500; /* Above background and privat, below Kinder/dialog */
}
.house-video-wrap.visible {
  opacity: 1;
}
.house-video-wrap .building-layer {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translate(-50%, 10%); /* Match new top offset */
  max-width: 45vw;
  width: 45vw;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

/* Page6 bottom car (loops left-right) */
.car-wrap {
  position: absolute;
  left: 0;
  bottom: -10%;
  width: 960px;
  height: auto;
  z-index: 2600; /* Above building, below Kinder/text */
  pointer-events: none;
  animation: carDrive 14s linear infinite; /* Right-to-left loop */
}
.car-video {
  width: 100%;
  height: auto;
  display: block;
}

/* === Page1 handhandy (grass hand) === */
#page2 .handhandy-wrap {
  position: absolute;
  bottom: 70%;
  left: 100%;
  transform: translateY(100%);
  z-index: 1000;
  overflow: visible;
}
#page2 .handhandy-img {
  width: 200px;
  height: auto;
  transform-origin: bottom right;
  transform: translateX(0) scale(2);
  transition: transform 1s ease-out, opacity 0.5s ease-out;
  opacity: 0;
  transition-delay: 2s;
}
#page2 .handhandy-img.visible {
  transform: translateX(-100%) scale(2);
  opacity: 1;
}

/* Hand-with-grass animation (page 6) */
#page3 .hand-wrap {
  position: absolute;
  bottom: 50%;  /* Move toward middle of page */
  left: 100%;
  transform: translateY(100%);  /* Adjust to 80%/60% if too low */
  z-index: 1000;
  overflow: visible;
}

#page3 .hand-img {
  width: 200px;
  height: auto;
  transform-origin: bottom right;
  transform: translateX(0) scale(2);
  transition: transform 1s ease-out, opacity 0.5s ease-out;
  opacity: 0;
  
}

#page3 .hand-img.visible {
  transform: translateX(-100%) scale(2);
  opacity: 1;
}



/* ===== Final page ===== */
#page7 {
  background: #000;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* Sheep full-screen */
.sheep-outline-base {

  position: absolute;
  inset: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;

  /* Shrink + shift left */
  transform-origin: left center;
  transform: translateX(-8vw) scale(0.7);
}


/* Click-to-reveal text */
.final-text {
  position: absolute;
  left: 30%;
  top: 55%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.2;
  z-index: 4;
  opacity: 0;
  transition: opacity .6s ease;
}

/* Final page: visibility class for click text */
.final-text.show {
  opacity: 1;
}

#page7 .eimal-overlay {
  position: absolute;
  top: 30%; /* Move up */
  left: 60%;
  transform: translate(-50%, -50%);
  width: clamp(140px, 28vw, 320px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 5000; /* Above background strokes, etc. */
}

#page7 .eimal-overlay img {
  display: block;
  width: 100%;
  height: auto;
}

#page7 .eimal-overlay.show {
  opacity: 1;
}

#page7 .end-image {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: clamp(90px, 17vw, 210px);
  z-index: 4800;
  pointer-events: none;
}

#page7 .end-image img {
  display: block;
  width: 100%;
  height: auto;
}



/* === Page6 pole (bottom-right, slides in from right) === */
#page3 .pole-wrap {
  position: absolute;
  right: 0;
  bottom:-40%;
  z-index: 1000;
  overflow: visible;
}
#page3 .pole-img {
  width: 240px;             /* Adjustable */
  height: auto;
  transform-origin: bottom right;
  transform: translateX(0) scale(2); /* Starts outside right edge (pairs with visible -100%) */
  transition: transform 1s ease-out, opacity 0.5s ease-out;
  opacity: 0;
}
#page3 .pole-img.visible {
  transform: translateX(0%) scale(2); /* Slide inward */
  opacity: 1;
}

/* === Page7 pol1 (bottom-left slide-in) === */
#page4 .pol1-wrap {
  position: absolute;
  right: 12%;               /* Higher value moves further left */
  bottom: -20%;             /* Raised upward */
  z-index: 2600;            /* Above page5 background */
  overflow: visible;
}
#page4 .pol1-img {
  width: 340px;             /* Adjustable */
  height: auto;
  transform-origin: bottom left;
  transform: translateX(-140%) scaleX(-1) scale(2.4);  /* Further left start, slide right */
  transition: transform 1s ease-out;
  opacity: 1; /* No opacity control to avoid flicker when exiting left */
}
#page4 .pol1-img.visible {
  transform: translateX(-55%) scaleX(-1) scale(2.4); /* End position, tweak as needed */
}




/* Final page handflower position */
#page7 .handflower-wrap {
  position: absolute;
  right: 0;
  bottom: clamp(10%, 14vh, 18%);
  z-index: 2000;
  pointer-events: auto;
  width: clamp(320px, 48vw, 720px);   /* Larger tap target */
  height: clamp(320px, 42vh, 560px);  /* Larger tap target */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: clamp(16px, 2vw, 32px);
}

/* Initial: hidden to the right (positive direction = outside container) */
#page7 .last-handflower {
  width: clamp(140px, 22vw, 240px);
  transform-origin: bottom right;
  transform: translateX(32%) scale(1.6); /* Further right start */
  opacity: 0;
  transition: transform .8s ease-out, opacity .6s ease-out;
  pointer-events: auto;
}

/* Visible: slide back into view */
#page7 .last-handflower.visible {
  transform: translateX(32%) scale(1.6); /* Back to position */
  opacity: 1;
}

@media (max-width: 1100px) {
  #page7 .handflower-wrap {
    right: 0;
    bottom: clamp(8%, 12vh, 16%);
    width: clamp(280px, 52vw, 640px);
    height: clamp(280px, 46vh, 520px);
    padding: clamp(12px, 2.5vw, 28px);
  }
  #page7 .last-handflower {
    transform: translateX(24%) scale(1.45);
  }
  #page7 .last-handflower.visible {
    transform: translateX(24%) scale(1.45);
  }
}

@media (max-width: 820px) {
  #page7 .handflower-wrap {
    right: 0;
    bottom: clamp(6%, 10vh, 14%);
    width: clamp(240px, 56vw, 580px);
    height: clamp(240px, 48vh, 480px);
    padding: clamp(10px, 3vw, 24px);
  }
  #page7 .last-handflower {
    transform: translateX(18%) scale(1.3);
  }
  #page7 .last-handflower.visible {
    transform: translateX(18%) scale(1.3);
  }
}


.click-pos-bottom-center {
  position: absolute;
  left: 86%;
  right: auto;
  bottom: 65%;
  top: auto;
  --click-translate-x: -50%;
  --click-translate-y: 0;
  z-index: 10;
}

.volume-toggle {
  position: fixed;
  right: 4%;
  bottom: 6%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  z-index: 50000;
}

.volume-toggle:hover {
  background: rgba(0,0,0,0.6);
  transform: scale(1.05);
}

.volume-toggle:active {
  transform: scale(0.96);
}

.volume-toggle.muted {
  border-color: #ff8f8f;
}

/* Page1 title: Hier war ich einmal */
.title-fixed {
  position: absolute;
  top: 15%;
  left: 10%;
  z-index: 2000; /* Above the flock */
}

.title-fixed .title {
  font-size: 3rem;
  color: #000000;
  text-shadow: 0 4px 8px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}