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

body {
  min-height: 100vh;
  background: #ff0000;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;

  padding-top: 120px;
}

main {
  position: relative;
}

/* Hintergrundbild */
.home-background {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);

  width: 3500px;
  height: 100vh;

  background-image: url("assets/img/background.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 3500px auto;

  z-index: 0;
  pointer-events: none;
}

/* Echte Startseite beginnt unter dem Bild */
.home-content {
  position: relative;
  z-index: 1;

  min-height: 1780px;

  padding-top: 600px;

  background: linear-gradient(
    to bottom,
    transparent 0px,
    transparent 600px,
    #000000 600px,
    #ff6a00 400%
  );
}

/* Slogan */
.slogan-box {
  position: fixed;
  top: 300px;
  left: 50%;

  transform: translateX(-50%) scale(1);
  transform-origin: center;

  width: 900px;

  color: #ffffff;
  -webkit-text-stroke: 5px #000000;

  font-weight: 900;
  z-index: 0;

  pointer-events: none;
}

.slogan-main {
  font-size: 80px;
  line-height: 1;
}

.slogan-main:nth-child(1) {
  transform: translateX(0px);
}

.slogan-main:nth-child(2) {
  transform: translateX(200px);
}

.slogan-main:nth-child(3) {
  transform: translateX(400px);
}


/* Container frei positionierbar */
.image-buttons {
  position: relative;
}

/* Container frei positionierbar */
.image-buttons {
  position: relative;
}

/* Zentrale Button-Basis für ALLE Bildbuttons */
.img-btn {
  position: absolute;

  top: var(--top);
  left: calc(50% + var(--x));

  width: var(--width);
  height: auto;

  transform: translateX(-50%) scale(1);
  transition: transform 0.2s ease;

  cursor: pointer;
}

.img-btn:hover {
  transform: translateX(-50%) scale(1.1);
}

.img-btn > img:first-child {
  width: 100%;
  height: auto;
  display: block;
}

/* Button 1: links von der Mitte */
.img-btn-1 {
  --top: 85px;
  --x: -650px;
  --width: 500px;
}

/* Button 2: exakt Mitte */
.img-btn-2 {
  --top: 85px;
  --x: 0px;
  --width: 500px;
}

/* Button 3: rechts von der Mitte */
.img-btn-3 {
  --top: 85px;
  --x: 650px;
  --width: 500px;
}

/* Button 4: links von der Mitte */
.img-btn-4 {
  --top: 545px;
  --x: -650px;
  --width: 500px;
}




.img-btn-glass {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(78, 78, 78, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 0; /* oder gleich wie dein Bild wenn nötig */

  pointer-events: none;
}

.img-btn-label {
  position: absolute;

  top: 150px;   /* global steuerbar */
  left: 50%;  /* global steuerbar */
  transform: translateX(-50%);
  text-align: center;

  font-size: 32px;
  font-weight: 900;
  color: #ffffff;

  padding: 12px 20px;
}