:root{
  --primary-color:#007bff;
  --info-color:   #17a2b8;
  --success-color:#28a745;
  --warning-color:#ffc107;
  --danger-color: #dc3545;
  --grey-color:   #ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:monospace;color:#d1d1d1;min-height:100vh;overflow-x:hidden}

/* Hintergrundbild */
.bg-cover{position:fixed;inset:0;background:url('imgs/mcw2.png') center/cover no-repeat;z-index:-1}

/* Überschrift */
.headline{text-align:center;font-size:clamp(3rem,9vw,6rem);font-weight:700;margin:40px 0 40px;color:#fff}

/* Glasige Menü-Leiste */
.menu-container{
  width:min(95vw,960px);
  margin:0 auto;
  padding:24px 32px;
  border-radius:36px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:
    0 1px 2px rgba(255, 255, 255, 0.192) inset,
    0 0 10px rgba(255, 255, 255, 0.164) inset,
    0 6px 18px rgba(0,0,0,.15);
  position:relative;
  overflow:hidden;
}

/* Button-Liste */
.menu-list{display:flex;flex-wrap:wrap;gap:48px;justify-content:center;list-style:none}
.menu-list li{position:relative}
.menu-list a{
  display:inline-block;
  padding:10px 16px;
  font-size:1.35rem;
  font-weight:600;
  color:var(--grey-color);
  text-decoration:none;
  position:relative;
  z-index:1;
}

/* Farbzuweisung pro Button (auch für Bubble-Tint) */
.menu-list li:nth-child(1){--menu-link-active-color:var(--primary-color)}
.menu-list li:nth-child(2){--menu-link-active-color:var(--info-color)}
.menu-list li:nth-child(3){--menu-link-active-color:var(--success-color)}
.menu-list li:nth-child(4){--menu-link-active-color:var(--warning-color)}
.menu-list li:nth-child(5){--menu-link-active-color:var(--danger-color)}

/* Bubble */
.menu-bubble{
  --bubble-bg:rgba(255,255,255,.10);
  --bubble-border:rgba(255, 255, 255, 0.13);

  position:absolute;top:0;left:0;width:160px;height:48px;border-radius:32px;
  background:var(--bubble-bg);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--bubble-border);
  box-shadow:
    0 1px 4px rgba(255, 255, 255, 0.192) inset,
    0 0 12px rgba(255, 255, 255, 0.13) inset,
    0 6px 16px rgba(0,0,0,.18);
  pointer-events:none;
  opacity:0;
  transform:translate(-9999px,-9999px);
  transition:opacity .3s;
}
.menu-bubble::after{
  content:"";
  position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 30% 25%,
            rgba(255, 255, 255, 0.418)0%,
            rgba(255,255,255,.25)40%,
            transparent 65%);
  mix-blend-mode:overlay;
}

/* Responsive Anpassungen */
@media(max-width:768px){
  .menu-container{padding:16px 20px;border-radius:30px}
  .menu-list{gap:24px}
  .menu-list a{font-size:1.1rem}
  .headline{margin:24px 0 88px;font-size:clamp(2.2rem,8vw,4rem)}
  .menu-bubble{border-radius:26px}
}

.slogan{
text-align:center;
font-size:clamp(.5rem,3vw,1.5rem);
font-weight:700;
margin:0px 0 50px;
color:#cfaa8c;
font-family: 'Courier New';
}

/*buy me a coffee button*/
/* === Buy me a coffee Button === */
.buy-coffee-btn{
  position:fixed;
  right:1.2rem;
  bottom:1.2rem;

  display:inline-flex;
  align-items:center;
  gap:.6rem;

  padding:.9rem 1.2rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px;

  /* Glasig + kräftiger Kaffee-Farbakzent */
  background:
    linear-gradient(135deg,#ffe29a 0%,#ffc107 55%,#ff8c00 100%);
  color:#2a1b0a;
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);

  /* Auffälliger Glow */
  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 4px 14px rgba(255,193,7,.65);

  transition:
    transform .15s ease,
    box-shadow .2s ease,
    filter .2s ease,
    opacity .2s ease;
  z-index:9999;
}

.buy-coffee-btn::before{
  content:"☕";
  font-size:1.5rem;
  transform:translateY(1px);
}

/* Pulsierende Aura, damit der Button heraussticht */
.buy-coffee-btn::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  background:
    radial-gradient(circle,
      rgba(255,193,7,.55) 0%,
      rgba(255,193,7,0) 60%);
  filter:blur(10px);
  opacity:.65;
  z-index:-1;
  animation:coffeePulse 1.8s ease-in-out infinite;
}

.buy-coffee-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    0 18px 34px rgba(0,0,0,.4),
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 6px 18px rgba(255,193,7,.75);
}

.buy-coffee-btn:active{
  transform:translateY(0);
  filter:brightness(.98);
  box-shadow:
    0 10px 18px rgba(0,0,0,.38),
    0 0 0 2px rgba(255,255,255,.06) inset,
    0 4px 12px rgba(255,140,0,.65);
}

.buy-coffee-btn:focus-visible{
  outline:3px solid rgba(255,193,7,.55);
  outline-offset:3px;
}

/* Mobile: etwas größerer Tap-Target und höher platziert */
@media (max-width:768px){
  .buy-coffee-btn{
    right:1rem;
    bottom:1.6rem;
    padding:1rem 1.25rem;
    font-size:1rem;
  }
}

/* Sanfter Puls */
@keyframes coffeePulse{
  0%,100%{opacity:.55; transform:scale(.98)}
  50%{opacity:.9; transform:scale(1.02)}
}

/* Barrierefreiheit: Animationen reduzieren */
@media (prefers-reduced-motion:reduce){
  .buy-coffee-btn{transition:none}
  .buy-coffee-btn::after{animation:none; opacity:.5}

}