:root {
  --width: clamp(260px, min(94vw - 1.5rem, 600px), 600px);
  --height-1: calc(var(--width) * 2 / 3);
  --depth: calc(var(--width) / 6);
  --height-2: calc(var(--width) / 6);
  --depth-2: calc(var(--width) / 12);
  --depth-3: calc(var(--width) * 250 / 600);
  --tz-front: calc(var(--depth) / 2);
  --tz-side: calc(var(--width) / 4);
  --tz-top: calc(var(--height-1) / 4);
  --font-size-1: 16px;
  --font-size-2: clamp(1.25rem, 2.8vw + 0.75rem, 2.5rem);
  --mini-stick-height: max(5rem, calc(100vh - var(--height-1) - 5vh + 25vh));
}


body, html {
  font-family: Arial, Helvetica, sans-serif; 
  cursor: none; /* Hide default cursor */
  color: black;   
  overflow-x: hidden!important;
}
* {
  cursor: none;
  font-family: Arial, Helvetica, sans-serif; 
}
button, a {
  font-size: var(--font-size-2);
  color: black;
  cursor: none;
  font-weight: bold;
}
.c1 {color: red;}
.cl:hover {
  color: rgb(0, 30, 255);
  cursor: none;
}
.ff-1 {
  font-size: var(--font-size-2);
  font-weight: bold;
}
.ff-2 {
  font-size: var(--font-size-2);
  font-weight: bold;
  color: blue;
  font-style: italic;
  font-family: 'Times New Roman', Times, serif;
}
.Background {
  height: 100vh;
  width: 100vw;
  z-index: 0;
  position: absolute;
  top: 0;
}
.WolkenC {
  width: 100vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  height: 50vh;
  overflow-x: hidden!important;
}
.Wolken {
  width: 100%;
}
.Ground {
  height: 20vh;
  width: 100vw;
  position: absolute;
  top: 0;
  z-index: 100;
  margin-top: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}
.text {
  font-weight: 300;
  font-weight: normal;
} 

.scene {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: clamp(0.5rem, 4vw, 10vw);
  perspective: min(1100px, 140vw);
  perspective-origin: center 72%;
  transform-style: preserve-3d;
  transform-origin: center 42%;
  z-index: 999;
  position: fixed;
  height: 100vh;

  margin-left: -6vw;
  max-width: 100vw;
  box-sizing: border-box;
  /* Klicks durchlassen zu Ground/Menü; nur .box fängt Events */
  pointer-events: none;
}

.BigWrapper {
  width: 100vw;
  left: 0;
  height: auto;
  min-height: 100vh;
  overflow-x: hidden!important;
}

html:has(.BigWrapper),
body:has(.BigWrapper) {
  overflow-x: hidden!important;
  width: 100vw;
  min-height: 100vh;
}

.box-tilt {
  transform-style: preserve-3d;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  width: var(--width);
  margin-top: 120px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: calc(var(--width) / 2);
  transition: transform 0.7s;
  transform: rotateX(5deg) rotateY(29.5769deg);
  pointer-events: auto;
}

.box.show-front  { 
  transform: rotateX(5deg) rotateY(29.5769deg);
}
.box.show-back   { 
  transform: rotateX(5deg) rotateY(-155deg);
}
.box.show-right  { transform: translateZ(calc(-1 * var(--tz-side))) rotateY( -90deg); }
.box.show-left   { transform: translateZ(calc(-1 * var(--tz-side))) rotateY(  90deg); }
.box.show-top    { transform: translateZ(calc(-1 * var(--tz-top))) rotateX( -90deg); }
.box.show-bottom { transform: translateZ(calc(-1 * var(--tz-top))) rotateX(  90deg); }


.box__face {
  position: absolute;
  border: 3px solid black;
  font-size: var(--font-size-2);
  font-weight: bold;
  text-align: center;
  display: flex;
  height: 170vh;

  flex-wrap: wrap;
  text-align: center;
  justify-content: center;
}

.SmallText {
  text-align: left;
  font-size: var(--font-size-1);
 }
 .Images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
 }
 .Images img {
border: 1px solid black;
 }
.Inner {
  overflow-y: scroll;
  height:  calc(var(--height-1) - 7px);
  /* Touch-Scrolling optimieren */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  /* Bessere Touch-Erkennung */
  touch-action: pan-y;
  /* Scrollbar-Styling für bessere Sichtbarkeit */

}

.box__face .Inner {
  position: relative;
  z-index: 1;
}
.box__face--front .Inner,
.box__face--back .Inner {
  background: transparent;
}

.face-algae-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
  opacity: 0.3;
  filter: blur(3.8px);
  transform: translateZ(0);
}
h1 {
  margin-top: 5px;
}

.box__face--front,
.box__face--back {
  width: var(--width);
  height: var(--height-1);
  overflow: hidden;
}

.box__face--right,
.box__face--left {
  width: var(--depth);
  height: var(--height-1);
  left: var(--height-1);
}
.box__face--left {
  left: var(--height-2);
}
.box__face--right {
  left: var(--height-1);
}

.box__face--top,
.box__face--bottom {
  width: var(--width);
  height: var(--height-2);
  top: var(--depth-2);
}
.box__face--bottom {
  top: var(--depth-3);
}

:root {
  --bg-color-1: rgb(255, 253, 237, 1);
  --bg-color-2: rgb(210, 207, 188);
  --bg-color-3: rgb(228, 225, 204, 1);
  --face-paper-base: #f2efe4;
  /* nur Kanten der großen Box; Front/Back (Text) separat */
  --face-metal-side: #6e6e6e;
  --face-metal-top: #7a7a7a;
  --face-metal-bottom: #4a4a4a;
  /* 0.5–1.12, gesetzt per JS nach Tageszeit */
  --face-metal-brightness: 1;
}
@keyframes blink {
  0% { background-color: var(--bg-color-1); }
  89% { background-color: var(--bg-color-1); }
  91% { background-color: var(--bg-color-2); }
  93% { background-color: var(--bg-color-1); }
  95% { background-color: var(--bg-color-2); }
  97% { background-color: var(--bg-color-1); }
  99% { background-color: var(--bg-color-1); }
}
.blinking {
  animation: blink 1s linear;
}
.box__face--front,
.box__face--back {
  animation-name: blink;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  /* animation-duration will be set via JavaScript */
}
/* Vorder-/Rückseite: Algen-Spots per Canvas (face-algae-canvas), ungleichmäßig */
.box__face--front {
  background-color: var(--bg-color-1);
  box-shadow:
    inset 0 0 60px rgba(85, 78, 58, 0.22),
    inset 0 -28px 50px rgba(0, 0, 0, 0.14),
    inset 0 2px 3px rgba(255, 255, 255, 0.35);
}

.box__face--back {
  background-color: var(--bg-color-1);
  box-shadow: none;
}

.box__face--right,
.box__face--left,
.box__face--top,
.box__face--bottom {
  filter: brightness(var(--face-metal-brightness));
}

.box__face--right {
  background-color: var(--face-metal-side);
  background-image:
    radial-gradient(ellipse 14% 10% at 18% 28%, rgba(38, 72, 42, 0.42) 0%, transparent 72%),
    radial-gradient(ellipse 9% 12% at 62% 71%, rgba(28, 58, 38, 0.38) 0%, transparent 68%),
    radial-gradient(ellipse 11% 7% at 84% 44%, rgba(45, 85, 48, 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 6% 8% at 40% 88%, rgba(32, 62, 40, 0.32) 0%, transparent 65%),
    radial-gradient(ellipse 10% 6% at 52% 12%, rgba(48, 88, 52, 0.34) 0%, transparent 68%),
    radial-gradient(ellipse 7% 11% at 8% 55%, rgba(24, 52, 34, 0.36) 0%, transparent 64%),
    radial-gradient(ellipse 12% 8% at 95% 18%, rgba(34, 68, 40, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 5% 6% at 33% 48%, rgba(55, 95, 58, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 8% 9% at 71% 38%, rgba(30, 58, 38, 0.33) 0%, transparent 66%),
    radial-gradient(ellipse 5% 7% at 24% 58%, rgba(42, 78, 44, 0.36) 0%, transparent 58%),
    radial-gradient(ellipse 11% 5% at 46% 6%, rgba(28, 54, 34, 0.34) 0%, transparent 62%),
    radial-gradient(ellipse 7% 10% at 92% 52%, rgba(48, 88, 50, 0.3) 0%, transparent 64%),
    radial-gradient(ellipse 9% 6% at 14% 82%, rgba(34, 64, 40, 0.38) 0%, transparent 60%),
    radial-gradient(ellipse 4% 5% at 58% 64%, rgba(58, 98, 58, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse 12% 7% at 30% 14%, rgba(22, 48, 32, 0.32) 0%, transparent 66%),
    radial-gradient(ellipse 6% 11% at 76% 92%, rgba(36, 70, 42, 0.35) 0%, transparent 62%),
    radial-gradient(ellipse 8% 6% at 4% 22%, rgba(44, 82, 46, 0.3) 0%, transparent 58%),
    radial-gradient(ellipse 52% 42% at 18% 38%, rgba(34, 64, 38, 0.2) 0%, transparent 82%),
    radial-gradient(ellipse 46% 36% at 72% 58%, rgba(26, 52, 34, 0.22) 0%, transparent 81%),
    radial-gradient(ellipse 40% 48% at 48% 22%, rgba(42, 78, 44, 0.18) 0%, transparent 84%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, transparent 42%, rgba(255, 255, 255, 0.06) 100%),
    linear-gradient(180deg, #8a8a8a 0%, #6a6a6a 48%, #525252 100%);
  box-shadow:
    inset 6px 0 16px rgba(0, 0, 0, 0.28),
    inset -3px 0 8px rgba(255, 255, 255, 0.06);
}

.box__face--left {
  background-color: var(--face-metal-side);
  background-image:
    radial-gradient(ellipse 12% 9% at 78% 33%, rgba(34, 68, 40, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 10% 11% at 22% 66%, rgba(26, 52, 36, 0.36) 0%, transparent 66%),
    radial-gradient(ellipse 8% 6% at 55% 18%, rgba(42, 78, 46, 0.3) 0%, transparent 72%),
    radial-gradient(ellipse 7% 9% at 38% 91%, rgba(30, 58, 36, 0.28) 0%, transparent 64%),
    radial-gradient(ellipse 11% 7% at 12% 44%, rgba(44, 82, 48, 0.35) 0%, transparent 68%),
    radial-gradient(ellipse 6% 10% at 88% 78%, rgba(28, 56, 36, 0.32) 0%, transparent 62%),
    radial-gradient(ellipse 9% 8% at 48% 52%, rgba(52, 92, 54, 0.26) 0%, transparent 65%),
    radial-gradient(ellipse 8% 5% at 65% 8%, rgba(36, 70, 42, 0.38) 0%, transparent 58%),
    radial-gradient(ellipse 13% 9% at 28% 72%, rgba(22, 48, 32, 0.34) 0%, transparent 70%),
    radial-gradient(ellipse 6% 8% at 64% 46%, rgba(40, 75, 44, 0.36) 0%, transparent 60%),
    radial-gradient(ellipse 10% 6% at 8% 28%, rgba(26, 52, 36, 0.33) 0%, transparent 64%),
    radial-gradient(ellipse 5% 9% at 42% 8%, rgba(50, 90, 52, 0.3) 0%, transparent 56%),
    radial-gradient(ellipse 9% 7% at 91% 64%, rgba(32, 62, 38, 0.37) 0%, transparent 62%),
    radial-gradient(ellipse 7% 5% at 18% 54%, rgba(46, 85, 48, 0.29) 0%, transparent 58%),
    radial-gradient(ellipse 11% 8% at 52% 96%, rgba(24, 50, 34, 0.36) 0%, transparent 66%),
    radial-gradient(ellipse 4% 6% at 74% 22%, rgba(55, 95, 58, 0.27) 0%, transparent 52%),
    radial-gradient(ellipse 8% 11% at 34% 38%, rgba(36, 68, 42, 0.32) 0%, transparent 64%),
    radial-gradient(ellipse 48% 38% at 78% 32%, rgba(32, 62, 36, 0.21) 0%, transparent 82%),
    radial-gradient(ellipse 42% 44% at 22% 68%, rgba(40, 75, 44, 0.19) 0%, transparent 83%),
    radial-gradient(ellipse 54% 32% at 52% 48%, rgba(28, 54, 36, 0.2) 0%, transparent 82%),
    linear-gradient(270deg, rgba(0, 0, 0, 0.2) 0%, transparent 48%, rgba(255, 255, 255, 0.05) 100%),
    linear-gradient(180deg, #868686 0%, #656565 52%, #4e4e4e 100%);
  box-shadow:
    inset -6px 0 16px rgba(0, 0, 0, 0.26),
    inset 3px 0 8px rgba(255, 255, 255, 0.05);
}

.box__face--top {
  background-color: var(--face-metal-top);
  background-image:
    radial-gradient(ellipse 16% 11% at 30% 40%, rgba(40, 75, 44, 0.36) 0%, transparent 72%),
    radial-gradient(ellipse 10% 14% at 72% 58%, rgba(28, 58, 38, 0.34) 0%, transparent 68%),
    radial-gradient(ellipse 8% 7% at 48% 22%, rgba(48, 88, 50, 0.26) 0%, transparent 70%),
    radial-gradient(ellipse 9% 8% at 88% 78%, rgba(32, 62, 40, 0.3) 0%, transparent 65%),
    radial-gradient(ellipse 12% 9% at 15% 68%, rgba(36, 68, 42, 0.33) 0%, transparent 68%),
    radial-gradient(ellipse 7% 12% at 55% 85%, rgba(26, 54, 36, 0.37) 0%, transparent 64%),
    radial-gradient(ellipse 11% 6% at 82% 28%, rgba(46, 85, 50, 0.29) 0%, transparent 66%),
    radial-gradient(ellipse 6% 8% at 38% 12%, rgba(34, 64, 40, 0.31) 0%, transparent 60%),
    radial-gradient(ellipse 9% 10% at 62% 42%, rgba(24, 50, 34, 0.35) 0%, transparent 67%),
    radial-gradient(ellipse 7% 9% at 8% 18%, rgba(38, 72, 42, 0.34) 0%, transparent 62%),
    radial-gradient(ellipse 12% 6% at 44% 72%, rgba(28, 56, 36, 0.33) 0%, transparent 68%),
    radial-gradient(ellipse 5% 7% at 96% 36%, rgba(46, 85, 50, 0.31) 0%, transparent 56%),
    radial-gradient(ellipse 10% 8% at 24% 88%, rgba(32, 62, 40, 0.36) 0%, transparent 64%),
    radial-gradient(ellipse 6% 5% at 68% 8%, rgba(52, 92, 54, 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 8% 12% at 52% 48%, rgba(22, 48, 32, 0.3) 0%, transparent 60%),
    radial-gradient(ellipse 4% 8% at 78% 14%, rgba(42, 78, 46, 0.32) 0%, transparent 54%),
    radial-gradient(ellipse 11% 7% at 14% 56%, rgba(34, 64, 40, 0.35) 0%, transparent 66%),
    radial-gradient(ellipse 56% 40% at 28% 42%, rgba(36, 68, 40, 0.2) 0%, transparent 84%),
    radial-gradient(ellipse 38% 50% at 74% 62%, rgba(26, 52, 34, 0.19) 0%, transparent 82%),
    radial-gradient(ellipse 44% 36% at 58% 28%, rgba(46, 85, 48, 0.17) 0%, transparent 83%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 52%),
    linear-gradient(198deg, #909090 0%, #6c6c6c 100%);
  box-shadow:
    inset 0 8px 20px rgba(0, 0, 0, 0.2),
    inset 0 -4px 10px rgba(255, 255, 255, 0.08);
}

.box__face--bottom {
  background-color: var(--face-metal-bottom);
  background-image:
    radial-gradient(ellipse 13% 10% at 25% 62%, rgba(36, 68, 42, 0.45) 0%, transparent 70%),
    radial-gradient(ellipse 11% 8% at 68% 38%, rgba(24, 50, 34, 0.4) 0%, transparent 68%),
    radial-gradient(ellipse 9% 12% at 45% 85%, rgba(44, 82, 48, 0.32) 0%, transparent 66%),
    radial-gradient(ellipse 7% 7% at 90% 72%, rgba(30, 58, 38, 0.35) 0%, transparent 62%),
    radial-gradient(ellipse 10% 9% at 12% 35%, rgba(42, 78, 46, 0.42) 0%, transparent 65%),
    radial-gradient(ellipse 8% 11% at 78% 82%, rgba(32, 62, 40, 0.38) 0%, transparent 64%),
    radial-gradient(ellipse 12% 7% at 52% 18%, rgba(50, 90, 54, 0.33) 0%, transparent 68%),
    radial-gradient(ellipse 6% 9% at 35% 48%, rgba(28, 56, 36, 0.4) 0%, transparent 58%),
    radial-gradient(ellipse 11% 8% at 92% 48%, rgba(38, 72, 44, 0.36) 0%, transparent 66%),
    radial-gradient(ellipse 6% 10% at 58% 28%, rgba(44, 82, 48, 0.4) 0%, transparent 62%),
    radial-gradient(ellipse 9% 6% at 22% 78%, rgba(26, 52, 36, 0.38) 0%, transparent 64%),
    radial-gradient(ellipse 5% 6% at 82% 18%, rgba(48, 88, 52, 0.33) 0%, transparent 56%),
    radial-gradient(ellipse 12% 9% at 38% 8%, rgba(30, 58, 38, 0.36) 0%, transparent 68%),
    radial-gradient(ellipse 7% 7% at 6% 88%, rgba(36, 68, 42, 0.37) 0%, transparent 60%),
    radial-gradient(ellipse 8% 11% at 70% 62%, rgba(24, 50, 34, 0.39) 0%, transparent 64%),
    radial-gradient(ellipse 4% 5% at 46% 44%, rgba(55, 95, 58, 0.3) 0%, transparent 52%),
    radial-gradient(ellipse 10% 7% at 88% 82%, rgba(32, 62, 40, 0.34) 0%, transparent 62%),
    radial-gradient(ellipse 6% 8% at 14% 12%, rgba(40, 75, 44, 0.35) 0%, transparent 58%),
    radial-gradient(ellipse 52% 38% at 42% 55%, rgba(32, 60, 38, 0.24) 0%, transparent 82%),
    radial-gradient(ellipse 42% 46% at 18% 28%, rgba(44, 82, 46, 0.22) 0%, transparent 81%),
    radial-gradient(ellipse 48% 34% at 82% 72%, rgba(24, 50, 34, 0.23) 0%, transparent 81%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0%, transparent 48%),
    linear-gradient(15deg, #4c4c4c 0%, #5e5e5e 42%, #3a3a3a 100%);
  box-shadow:
    inset 0 -12px 28px rgba(0, 0, 0, 0.35),
    inset 0 3px 6px rgba(255, 255, 255, 0.04);
}

.mini-face {
  position: absolute;
  width: 30px;
  height: var(--mini-stick-height);
  background-color: #b0b0b0;
  background-image:
    repeating-linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.022) 1px, transparent 2px),
    linear-gradient(180deg, #c6c6c6 0%, #9a9a9a 100%);
  box-shadow:
    inset 0 0 6px rgba(0, 0, 0, 0.12),
    inset 0 -12px 24px rgba(0, 0, 0, 0.08);
  border: 0.5px solid rgb(99, 99, 99);
}

.mini-right {
  background-color: #a8a8a8;
  background-image:
    radial-gradient(ellipse 16% 11% at 22% 28%, rgba(38, 72, 42, 0.4) 0%, transparent 72%),
    radial-gradient(ellipse 11% 15% at 68% 68%, rgba(28, 58, 38, 0.36) 0%, transparent 68%),
    radial-gradient(ellipse 14% 9% at 85% 42%, rgba(45, 85, 48, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 9% 11% at 42% 88%, rgba(32, 62, 40, 0.34) 0%, transparent 65%),
    radial-gradient(ellipse 13% 8% at 52% 12%, rgba(48, 88, 52, 0.33) 0%, transparent 68%),
    radial-gradient(ellipse 8% 12% at 8% 52%, rgba(24, 52, 34, 0.35) 0%, transparent 64%),
    radial-gradient(ellipse 50% 40% at 28% 42%, rgba(34, 64, 38, 0.2) 0%, transparent 82%),
    radial-gradient(ellipse 44% 46% at 72% 58%, rgba(26, 52, 34, 0.22) 0%, transparent 81%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0%, transparent 60%),
    linear-gradient(180deg, #c2c2c2 0%, #9a9a9a 100%);
  box-shadow: inset 2px 0 6px rgba(0, 0, 0, 0.15);
}

.mini-left {
  background-color: #a8a8a8;
  background-image:
    radial-gradient(ellipse 15% 10% at 78% 32%, rgba(34, 68, 40, 0.38) 0%, transparent 70%),
    radial-gradient(ellipse 12% 14% at 24% 66%, rgba(26, 52, 36, 0.35) 0%, transparent 66%),
    radial-gradient(ellipse 10% 8% at 55% 18%, rgba(42, 78, 46, 0.3) 0%, transparent 72%),
    radial-gradient(ellipse 9% 11% at 40% 92%, rgba(30, 58, 36, 0.32) 0%, transparent 64%),
    radial-gradient(ellipse 14% 9% at 12% 46%, rgba(44, 82, 48, 0.34) 0%, transparent 68%),
    radial-gradient(ellipse 8% 13% at 88% 76%, rgba(28, 56, 36, 0.32) 0%, transparent 62%),
    radial-gradient(ellipse 48% 38% at 72% 38%, rgba(32, 62, 36, 0.2) 0%, transparent 82%),
    radial-gradient(ellipse 42% 44% at 28% 72%, rgba(40, 75, 44, 0.19) 0%, transparent 83%),
    linear-gradient(270deg, rgba(0, 0, 0, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, #bebebe 0%, #989898 100%);
  box-shadow: inset -2px 0 6px rgba(0, 0, 0, 0.14);
}

.mini-front {
  background-color: #c4c4c4;
  background-image:
    radial-gradient(ellipse 14% 10% at 35% 22%, rgba(36, 68, 40, 0.34) 0%, transparent 70%),
    radial-gradient(ellipse 11% 13% at 72% 58%, rgba(28, 56, 36, 0.32) 0%, transparent 68%),
    radial-gradient(ellipse 12% 9% at 18% 72%, rgba(44, 82, 46, 0.3) 0%, transparent 66%),
    radial-gradient(ellipse 46% 40% at 52% 48%, rgba(34, 64, 38, 0.16) 0%, transparent 82%),
    repeating-linear-gradient(-10deg, transparent, rgba(0, 0, 0, 0.02) 1px, transparent 2px),
    linear-gradient(165deg, rgba(255, 255, 255, 0.32) 0%, transparent 55%),
    linear-gradient(180deg, #d6d6d6 0%, #9a9a9a 100%);
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.1),
    inset 0 3px 10px rgba(255, 255, 255, 0.22);
}

.mini-back {
  background-color: #a8a8a8;
  background-image:
    radial-gradient(ellipse 13% 11% at 62% 28%, rgba(32, 62, 38, 0.36) 0%, transparent 70%),
    radial-gradient(ellipse 12% 12% at 28% 68%, rgba(26, 52, 34, 0.33) 0%, transparent 66%),
    radial-gradient(ellipse 10% 9% at 48% 82%, rgba(40, 75, 44, 0.31) 0%, transparent 65%),
    radial-gradient(ellipse 44% 42% at 48% 42%, rgba(28, 54, 36, 0.18) 0%, transparent 81%),
    repeating-linear-gradient(8deg, transparent, rgba(0, 0, 0, 0.02) 1px, transparent 2px),
    linear-gradient(175deg, rgba(255, 255, 255, 0.14) 0%, transparent 50%),
    linear-gradient(180deg, #b8b8b8 0%, #868686 100%);
  box-shadow:
    inset 0 0 26px rgba(0, 0, 0, 0.12),
    inset 0 -4px 14px rgba(0, 0, 0, 0.14);
}

.mini-top {
  background-color: #d0d0d0;
  background-image:
    radial-gradient(ellipse 18% 12% at 32% 38%, rgba(40, 75, 44, 0.34) 0%, transparent 72%),
    radial-gradient(ellipse 12% 16% at 72% 58%, rgba(28, 58, 38, 0.32) 0%, transparent 68%),
    radial-gradient(ellipse 14% 10% at 48% 22%, rgba(48, 88, 50, 0.28) 0%, transparent 70%),
    radial-gradient(ellipse 10% 11% at 88% 78%, rgba(32, 62, 40, 0.31) 0%, transparent 65%),
    radial-gradient(ellipse 52% 38% at 28% 62%, rgba(36, 68, 42, 0.19) 0%, transparent 82%),
    radial-gradient(ellipse 40% 48% at 74% 38%, rgba(26, 52, 34, 0.18) 0%, transparent 83%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.38) 0%, transparent 52%),
    linear-gradient(195deg, #e4e4e4 0%, #b4b4b4 100%);
  box-shadow:
    inset 0 6px 14px rgba(0, 0, 0, 0.11),
    inset 0 -3px 8px rgba(255, 255, 255, 0.15);
}

.mini-bottom {
  background-color: #909090;
  background-image:
    radial-gradient(ellipse 15% 11% at 28% 62%, rgba(36, 68, 42, 0.4) 0%, transparent 70%),
    radial-gradient(ellipse 13% 9% at 68% 38%, rgba(24, 50, 34, 0.36) 0%, transparent 68%),
    radial-gradient(ellipse 11% 13% at 46% 85%, rgba(44, 82, 48, 0.32) 0%, transparent 66%),
    radial-gradient(ellipse 9% 9% at 88% 72%, rgba(30, 58, 38, 0.34) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 42% 48%, rgba(32, 60, 38, 0.22) 0%, transparent 81%),
    radial-gradient(ellipse 42% 44% at 18% 32%, rgba(44, 82, 46, 0.2) 0%, transparent 80%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, transparent 52%),
    linear-gradient(12deg, #888888 0%, #6e6e6e 100%);
  box-shadow:
    inset 0 -8px 18px rgba(0, 0, 0, 0.22),
    inset 0 2px 6px rgba(255, 255, 255, 0.06);
}

.box__face--front, .mini-front  { transform: rotateY(  0deg) translateZ(var(--tz-front)); }
.box__face--back, .mini-back   { transform: rotateY(180deg) translateZ(var(--tz-front)); }

.box__face--right  { transform: rotateY( 90deg) translateZ(var(--tz-side)); }
.box__face--left   { transform: rotateY(-90deg) translateZ(var(--tz-side)); }

.box__face--top    { transform: rotateX( 90deg) translateZ(var(--tz-top)); }
.box__face--bottom { transform: rotateX(-90deg) translateZ(var(--tz-top)); }

label { margin-right: 10px; }


.mini-cube {
  position: relative;
  width: 30px;
  height: 40px;
  left: calc(var(--width) / 2 - 10px);
  transform-style: preserve-3d;
  padding-top: calc(var(--height-1) + 0px);
}
.mini-cube-2 {
  width: 30px;
  height: 40px;
  left: 20px;
}

/* Front & back */
.mini-front  { transform: rotateY(0deg)    translateZ(15px); }
.mini-back   { transform: rotateY(180deg)  translateZ(15px); }

/* Left & right */
.mini-left   { 
  transform: rotateY(-90deg)  translateZ(50px); 
  left: 35px;
}
.mini-right  { 
  transform: rotateY(90deg)   translateZ(50px); 
  left: -35px;
}

.lol {
  width: min(var(--width), 100vw, 400px);
  max-width: 400px;
  height: auto;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  overflow-y: hidden;
  margin-top: 15px;
  margin-left: 0;
  margin-bottom: -123px;
  pointer-events: none;
}
.lol2 {
  z-index: 100;
}
.menu {
  padding: 10px;
  width: 100vw;
  z-index: 9999;
  position: relative;
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  mix-blend-mode: difference;
  color: white;
  pointer-events: auto;
}
.menu * {
  font-size: var(--font-size-1);
  color: white;
  font-weight: normal;
}
.menu a:hover {
  color: red
}

@media screen and (max-width:900px){

  :root {
    --width: clamp(260px, 92vw - 0.5rem, 520px);
    --font-size-1: 14px;
    --font-size-2: clamp(1.1rem, 4vw + 0.6rem, 1.9rem);
    --mini-stick-height: max(4.5rem, calc(100vh - var(--height-1) - 20vh + 30vh));
  }

  #background {
    padding-top: env(safe-area-inset-top);
  }
  .Background {
    height: 110vh;
    width: 100vw;
    z-index: 0;
    top: 0;
  }
  .Ground {
    height: 25vh;
    width: 100vw;
    z-index: 100;
    margin-top: 87vh;
  }
  .lol {
    width: min(100vw, 400px);
    max-width: 400px;
    z-index: 1000;
    margin-top: 23px;
    margin-bottom: -3vw;
  }
  .lol2 {
    z-index: 100;
  }
}

@media screen and (max-width:700px){
  .scene {
    padding-inline: 1vw;
    margin-left: 4vw;
  }
}

@media screen and (max-width: 520px) {
  .Images {
    grid-template-columns: 1fr;
  }
  .menu {
    flex-wrap: wrap;
    justify-content: flex-start;
    flex-direction: column;

   gap: 0!important;

   left: 0!important;
   line-height: 1!important;
  }
}




.tri {
  position: absolute;
}
.tri span {
  margin-top: -360px;
  position: absolute;
  color: #483318;
  user-select: none;
}


/* CURSOR */
#custom-cursor {
  position: fixed;
  pointer-events: none;
  width: 100px;
  height: 100px;
  font-size: 140px;
  z-index: 9999;
}
.cursor-pointer {
  background: black;
  height: 0px;
  width: 0px;
  box-shadow: 0px 8px 8px 8px rgba(0, 0, 0, 0.589);
  cursor: none;
  border-radius: 5px;
}
.hammer {
  padding-top: -130px;
  margin-left: -4px;
  margin-top: -105px;
}
@media screen and (max-width:700px){
  #custom-cursor {
    display: none;
  }
}
.cloud {
  position: absolute;
  opacity: 0.9;
  animation: moveClouds 60s linear infinite;
}

@keyframes moveClouds {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100vw);
  }
}



/* Haufen-PNGs aus: Regel löschen oder auskommentieren, um wieder anzuzeigen */
img.lol {
  display: none !important;
}

.TextPage {
  padding: 10px;
  cursor: auto!important;
}

.TextPage *{
 font-size: var(--font-size-1);
 cursor: auto!important;
 font-weight: normal;
}