:root {
  --bg-orange: #f57d00;
  --blob-pink: #ff96be;
  --text-lime: #ffe600;
  --text-pink: #ff96be;
  --bg-brown: #6e372d;

  /* ✅ Logo-Höhe + Abstand darunter (Desktop) */
  --logo-height: 220px;
  --logo-gap: 40px;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background: var(--bg-orange);
  color: var(--text-lime);
}

/* ===== STAGE ===== */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ===== BLOBS ===== */
.blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.blob {
  position: absolute;
  width: 650px;
  height: auto;
}

/* Desktop Positionen */
.blob-left {
  left: -200px;
  bottom: -180px;
  transform: rotate(20deg);
  width: 750px;
  height: auto;
}

.blob-right {
  left: 0px;
  top: -870px;
  transform: rotate(50deg);
  width: 1000px;
  height: auto;
}

.blob-bottom {
  right: -280px;
  bottom: -420px;
  transform: rotate(40deg);
  width: 1000px;
  height: auto;
}

/* ===== FIXED LOGO ===== */
.logo-wrapper {
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: 340px;
  height: var(--logo-height);
  /* ✅ nutzt Variable */
}

.logo-bg {
  width: 100%;
  height: auto;
  display: block;
}

.logo {
  position: absolute;
  top: 160px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: auto;
}

.hero {
  position: relative;              /* statt absolute */
  min-height: 100vh;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: calc(var(--logo-height) + var(--logo-gap)) 20px 0; /* Platz fürs Logo */
  box-sizing: border-box;
}

.title {
  font-family: "caraque-melted", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  font-size: clamp(3rem, 8.5vw, 8.5rem);
  margin-bottom: 20px;
  margin-top: 45px;
}

.subtitle {
  font-family: "elza-text", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(0.9rem, 1.5vw, 1.5rem);
}

/* ================= CUP BUTTON ================= */


.cup-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;

  padding: 18px 40px;
  border-radius: 60px;
  border: 5px solid var(--text-pink);

  background: var(--bg-brown);   /* 👈 Brauner Hintergrund */
  color: var(--text-pink);
  text-decoration: none;

  font-family: "elza-text", sans-serif;
  font-weight: 400;

  letter-spacing: 1px;

  transition: background 0.3s ease;
}

.cup-button:hover {
  background: #7b4035; /* minimal heller für Hover */
}

/* ================= TASSE ================= */

.cup-icon {
  width: 80px;
  height: auto;

  animation: cupFloat 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}

/* Dauerhafte leichte Bewegung */
@keyframes cupFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-4px) rotate(-3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Hover verstärkt Bewegung */
.cup-button:hover .cup-icon {
  transform: translateY(-8px) rotate(-12deg);
  animation: none;
}



@media (max-width:768px) {
  :root{
    --logo-height: 160px; /* optional: kleiner auf Mobile */
    --logo-gap: 20px;
  }

  .logo-wrapper { width: 240px; }
  .logo { top: 118px; }

  .title { font-size: 4rem; margin-bottom: 2px; }
  .subtitle { line-height: 1.2; font-size: 0.7rem; }

  .blob-left { left: -50; bottom: -5%; width: 80%; }
  .blob-bottom { right: -20%; bottom: 15%;  width: 80%;}
  .blob-right {display: none;
   
  }
  
}