*{box-sizing:border-box}
:root{
  --gold:#ffd21a;
  --gold2:#ff9f00;
  --black:#050505;
  --panel:rgba(0,0,0,.72);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:#fff;
  background:#050505;
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}
.background{
  position:fixed;
  inset:0;
  z-index:-6;
  background:
    radial-gradient(circle at top left, rgba(255,210,26,.18), transparent 30%),
    radial-gradient(circle at top right, rgba(255,210,26,.12), transparent 28%),
    linear-gradient(180deg,#050505,#0a0a0a 40%,#050505);
}
.background::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.58));
}
.gold-lines{
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  background:
    repeating-linear-gradient(115deg, transparent 0 74px, rgba(255,210,26,.14) 75px 78px, transparent 79px 150px),
    linear-gradient(rgba(255,210,26,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,210,26,.035) 1px, transparent 1px);
  background-size:auto, 60px 60px, 60px 60px;
  opacity:.46;
  animation:moveLines 12s ease-in-out infinite alternate;
}
@keyframes moveLines{to{transform:translate(34px,18px)}}

.topbar{
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:24px 4vw 10px;
}
.brand{display:flex;align-items:center;gap:12px;text-transform:uppercase}
.brand-icon{
  width:58px;height:58px;border:2px solid var(--gold);
  border-radius:50%;display:grid;place-items:center;font-size:32px;
  filter:drop-shadow(0 0 15px var(--gold));
  background:rgba(0,0,0,.35);
}
.brand strong{display:block;font-size:25px;line-height:1}
.brand span{display:block;color:var(--gold);font-weight:1000;font-size:22px;line-height:1}
nav{display:flex;gap:26px}
nav a{color:#fff;text-decoration:none;text-transform:uppercase;font-weight:900;text-shadow:0 3px 10px #000}
.status{
  border:1px solid rgba(255,210,26,.5);
  background:rgba(0,0,0,.56);
  border-radius:18px;
  padding:13px 18px;
  min-width:245px;
  box-shadow:0 0 22px rgba(255,210,26,.15);
}
.status b{display:block;color:var(--gold);margin-bottom:5px}
.status span{display:block;font-weight:800;line-height:1.25}

.hero{
  position:relative;
  z-index:2;
  min-height:75vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
  padding:36px 5vw 40px;
}
.hero-text{text-align:center}
.location{
  display:inline-block;
  padding:12px 28px;
  border-radius:999px;
  background:linear-gradient(135deg,#fff36c,var(--gold2));
  color:#000;
  font-size:22px;
  font-weight:1000;
  box-shadow:0 0 38px rgba(255,210,26,.66);
}
.script{
  margin:18px 0 8px;
  color:var(--gold);
  font-family:cursive;
  font-size:30px;
  text-shadow:0 0 18px rgba(255,210,26,.6);
}
h1{
  margin:0;
  font-size:clamp(56px,8vw,116px);
  line-height:.86;
  letter-spacing:-4px;
  text-transform:uppercase;
  text-shadow:0 8px 30px #000, 0 0 22px rgba(255,255,255,.35);
}
h1 span{
  color:var(--gold);
  text-shadow:0 8px 30px #000, 0 0 28px rgba(255,210,26,.55);
}
.subtitle{
  font-size:clamp(20px,2.2vw,31px);
  line-height:1.28;
  font-weight:900;
  text-shadow:0 5px 15px #000;
}
.legal-box{
  position:relative;
  width:min(620px,95%);
  margin:24px auto 20px;
  padding:24px 26px;
  border:1px solid rgba(255,210,26,.55);
  border-radius:22px;
  background:rgba(0,0,0,.72);
  box-shadow:0 0 30px rgba(0,0,0,.65), inset 0 0 28px rgba(255,210,26,.05);
}
.legal-box .heart{
  position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  color:var(--gold);font-size:36px;
  filter:drop-shadow(0 0 12px var(--gold));
}
.legal-box b{display:block;color:var(--gold);font-size:21px;margin:7px 0 10px}
.legal-box p{margin:0;color:#f4f4f4;font-size:16px;line-height:1.48}
.legal-box strong{display:block;color:var(--gold);margin-top:12px}

.main-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  min-width:min(480px,94vw);
  border:0;
  border-radius:18px;
  padding:22px 34px;
  margin:0 auto 22px;
  cursor:pointer;
  background:linear-gradient(135deg,#fff27a,#ffc400,#ff9d00);
  color:#000;
  font-weight:1000;
  font-size:30px;
  box-shadow:0 0 42px rgba(255,210,26,.75);
  position:relative;
  overflow:hidden;
  animation:pulse 1.8s ease-in-out infinite;
}
.main-btn::before{
  content:"";
  position:absolute;top:0;left:-80%;
  width:55%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-22deg);
  animation:shine 2.4s infinite;
}
.main-btn span,.main-btn i{position:relative;z-index:1}
.main-btn i{font-style:normal;font-size:38px}
@keyframes shine{to{left:135%}}
@keyframes pulse{50%{box-shadow:0 0 62px rgba(255,210,26,1);transform:scale(1.015)}}

.pay-box{
  width:min(520px,95%);
  margin:auto;
  padding:17px 22px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,210,26,.42);
  border-radius:18px;
  box-shadow:0 0 24px rgba(0,0,0,.55);
}
.pay-box b{display:block;color:var(--gold);font-size:18px}
.pay-box span{display:block;margin-top:4px;color:#eee}

.hero-visual{
  min-height:590px;
  position:relative;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:4%;
  border:1px solid rgba(255,210,26,.32);
  border-radius:42px;
  background:linear-gradient(180deg,rgba(255,210,26,.11),rgba(0,0,0,.62));
  box-shadow:inset 0 0 70px rgba(255,210,26,.08),0 0 45px rgba(255,210,26,.15);
}
.shop{
  position:absolute;
  width:190px;height:105px;
  border:1px solid var(--gold);
  background:rgba(0,0,0,.72);
  color:var(--gold);
  border-radius:22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:35px;
  box-shadow:0 0 28px rgba(255,210,26,.45);
  text-transform:uppercase;
}
.shop b{font-size:16px;color:#fff;margin-top:8px}
.supermarket{left:20px;top:48px}
.pharmacy{right:20px;top:48px}
.fuel{right:40px;bottom:50px}
.bag{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  width:285px;
  min-height:330px;
  border-radius:38px 38px 58px 58px;
  background:linear-gradient(180deg,#ffd21a,#ffb000 55%,#a66200);
  color:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:0 0 65px rgba(255,210,26,.72);
  font-weight:1000;
}
.bag-logo{
  width:92px;height:92px;
  border:4px solid #000;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:48px;
}
.bag h2{
  font-size:34px;
  line-height:1;
  text-transform:uppercase;
  margin:18px 0 8px;
}
.bag p{font-size:36px;margin:0}
.float{
  position:absolute;
  font-size:46px;
  filter:drop-shadow(0 0 18px var(--gold));
  animation:float 8s ease-in-out infinite;
}
.f1{left:12%;bottom:24%}
.f2{right:10%;top:35%;animation-delay:1s}
.f3{right:28%;bottom:14%;animation-delay:1.8s}
.f4{left:40%;top:13%;animation-delay:2.2s}
@keyframes float{50%{transform:translateY(-30px) rotate(8deg) scale(1.08)}}

.cards{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  padding:10px 5vw 35px;
}
.cards article{
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,210,26,.28);
  border-radius:18px;
  padding:23px 18px;
  box-shadow:0 0 24px rgba(0,0,0,.48);
}
.cards div{font-size:38px;color:var(--gold)}
.cards h3{margin:12px 0 9px;color:var(--gold);font-size:21px}
.cards p{margin:0;color:#eee;line-height:1.42}

.trust{
  position:relative;
  z-index:3;
  width:min(1100px,92vw);
  margin:15px auto 40px;
  padding:25px 30px;
  border:1px solid rgba(255,210,26,.35);
  border-radius:20px;
  background:rgba(0,0,0,.72);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.trust b{display:block;color:var(--gold);font-size:19px;margin-bottom:7px}
.trust span{color:#eee;line-height:1.45}

.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:22px 12px;
  overflow:auto;
  background:rgba(0,0,0,.88);
}
.modal.show{display:flex}
.modal-box{
  width:min(860px,96vw);
  position:relative;
  border:1px solid rgba(255,210,26,.42);
  border-radius:28px;
  padding:28px;
  background:
    radial-gradient(circle at top,rgba(255,210,26,.08),transparent 35%),
    linear-gradient(180deg,rgba(16,16,19,.98),rgba(0,0,0,.98));
  box-shadow:0 0 70px rgba(255,210,26,.22);
}
.close{
  position:absolute;
  top:8px;right:18px;
  background:none;border:0;color:var(--gold);
  font-size:44px;cursor:pointer;
}
.modal-box h2{
  text-align:center;
  color:var(--gold);
  font-size:42px;
  margin:10px 0 8px;
}
.modal-sub{
  text-align:center;
  color:#c8c9d2;
  font-size:22px;
  line-height:1.45;
  margin-bottom:28px;
}
.hidden{display:none}
form{display:grid;gap:16px}
input,textarea{
  width:100%;
  border:2px solid #383845;
  background:#15151b;
  color:#fff;
  border-radius:24px;
  padding:20px 24px;
  font-size:22px;
  outline:none;
}
textarea{resize:vertical}
input:focus,textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(255,210,26,.35);
}
label{
  color:#c8c9d2;
  font-size:21px;
}
.euro{position:relative}
.euro span{
  position:absolute;right:28px;top:50%;
  transform:translateY(-50%);
  color:var(--gold);
  font-size:30px;
  font-weight:1000;
}
.euro input{padding-right:70px}
.total{
  background:#15151b;
  border:2px solid #383845;
  border-radius:24px;
  padding:22px 28px;
}
.total span{display:block;color:#c8c9d2;font-size:20px;line-height:1.35}
.total b{display:block;color:var(--gold);font-size:48px;margin-top:6px}
.reply-box{
  border:1px solid rgba(52,211,153,.38);
  background:rgba(0,70,30,.18);
  border-radius:22px;
  padding:22px;
}
.reply-box b{display:block;color:#86efac;font-size:22px;margin-bottom:8px}
.reply-box p{margin:0;color:#eee;font-size:20px;line-height:1.45}
.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:8px;
}
.actions button{
  border-radius:24px;
  padding:23px;
  border:2px solid #383845;
  font-size:25px;
  font-weight:1000;
  cursor:pointer;
}
.cancel{background:#050505;color:#fff}
.send{
  background:linear-gradient(135deg,#fff06c,#ffc400,#ff9900);
  color:#000;
  box-shadow:0 0 28px rgba(255,210,26,.45);
}
.send small{font-size:16px}

footer{
  position:relative;
  z-index:3;
  width:min(1100px,92vw);
  margin:0 auto 35px;
  padding:16px 22px;
  border:1px solid rgba(255,210,26,.28);
  border-radius:999px;
  background:rgba(0,0,0,.68);
  display:flex;
  justify-content:space-around;
  gap:20px;
  font-weight:800;
}

.thanks-page{
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:20px;
}
.thanks-box{
  width:min(600px,94vw);
  text-align:center;
  border:1px solid rgba(255,210,26,.45);
  border-radius:28px;
  padding:38px;
  background:rgba(0,0,0,.78);
  box-shadow:0 0 50px rgba(255,210,26,.2);
}
.thanks-box h1{color:var(--gold);font-size:56px;margin:0 0 12px}
.thanks-box p{font-size:20px}
.thanks-box a{
  display:inline-block;
  margin-top:16px;
  padding:15px 24px;
  border-radius:16px;
  background:linear-gradient(135deg,#fff06c,#ffc400,#ff9900);
  color:#000;
  font-weight:1000;
  text-decoration:none;
}

@media(max-width:1050px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:15px}
  .hero-visual{min-height:420px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:1fr}
}
@media(max-width:760px){
  .topbar{flex-direction:column;text-align:center;padding:20px 16px}
  nav{gap:14px;flex-wrap:wrap;justify-content:center}
  .status{width:100%;max-width:360px}
  h1{font-size:48px;letter-spacing:-2px}
  .script{font-size:24px}
  .subtitle{font-size:20px}
  .legal-box{padding:23px 18px}
  .main-btn{min-width:100%;font-size:24px;padding:19px}
  .hero{padding:10px 18px 35px}
  .hero-visual{min-height:340px}
  .shop{display:none}
  .bag{width:220px;min-height:245px}
  .bag h2{font-size:27px}
  .float{font-size:34px}
  .cards{grid-template-columns:1fr;padding:10px 18px 35px}
  footer{border-radius:20px;flex-direction:column;text-align:center}
  .modal-box{padding:22px 16px}
  .modal-box h2{font-size:34px}
  .modal-sub{font-size:18px}
  input,textarea{font-size:18px;padding:18px}
  .actions{grid-template-columns:1fr}
}


.hero-visual::before{
  backdrop-filter:none !important;
}

.background{
  filter:none !important;
}

body{
  background:#050505 !important;
}


/* clean business background objects */
.background::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    url('https://cdn-icons-png.flaticon.com/512/3081/3081986.png') no-repeat left 8% top 28%/140px,
    url('https://cdn-icons-png.flaticon.com/512/483/483361.png') no-repeat right 8% top 26%/140px,
    url('https://cdn-icons-png.flaticon.com/512/2972/2972185.png') no-repeat right 10% bottom 18%/150px;
  opacity:.14;
  filter:drop-shadow(0 0 25px rgba(255,210,26,.5));
}


/* BUTTON HIGHER + STRONG GOLD BLINK */
.hero{
  align-items:start !important;
  padding-top:18px !important;
}

.hero-text{
  padding-top:10px !important;
}

.main-btn{
  margin:14px auto 12px !important;
  animation: goldBlink 1.05s infinite ease-in-out, pulse 1.8s infinite ease-in-out !important;
  border:2px solid rgba(255,255,255,.75) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
}

@keyframes goldBlink{
  0%,100%{
    background:linear-gradient(135deg,#fff9a8,#ffd21a,#ff9d00) !important;
    box-shadow:0 0 34px rgba(255,210,26,.9), 0 0 70px rgba(255,210,26,.55) !important;
    filter:brightness(1.08);
  }
  50%{
    background:linear-gradient(135deg,#ffffff,#ffe45c,#ffc000) !important;
    box-shadow:0 0 65px rgba(255,235,90,1), 0 0 120px rgba(255,210,26,.85) !important;
    filter:brightness(1.38);
  }
}

.legal-under-btn{
  margin-top:14px !important;
  margin-bottom:16px !important;
  padding:18px 20px !important;
}

.legal-under-btn b{
  font-size:19px !important;
}

.legal-under-btn p{
  font-size:15px !important;
}

@media(max-width:760px){
  .hero{
    padding-top:4px !important;
  }
  .location{
    margin-top:0 !important;
  }
  .script{
    margin:10px 0 6px !important;
  }
  .subtitle{
    margin-bottom:12px !important;
  }
  .main-btn{
    margin-top:8px !important;
  }
}


/* FINAL BACKGROUND: Supermarkt + Apotheke + Tankstelle */
.topbar{
  justify-content:space-between !important;
}

.topbar nav{
  display:none !important;
}

.shop-background{
  position:fixed;
  inset:0;
  z-index:-5;
  pointer-events:none;
  overflow:hidden;
}

.bg-store{
  position:absolute;
  border:1px solid rgba(255,210,26,.42);
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.38));
  box-shadow:0 0 45px rgba(255,210,26,.22), inset 0 0 30px rgba(255,210,26,.05);
  border-radius:22px;
  text-align:center;
  text-transform:uppercase;
  backdrop-filter:blur(1px);
  opacity:.38;
  filter:drop-shadow(0 0 22px rgba(255,210,26,.42));
}

.bg-store span{
  display:block;
  font-weight:1000;
  letter-spacing:2px;
  line-height:1;
  text-shadow:0 0 18px rgba(255,210,26,.75), 0 4px 14px #000;
}

.bg-store small{
  display:block;
  color:#fff;
  font-weight:900;
  margin-top:10px;
  text-shadow:0 3px 12px #000;
}

.bg-rewe{
  left:4vw;
  top:23vh;
  width:240px;
  height:130px;
  padding-top:27px;
  transform:rotate(-5deg);
}
.bg-rewe span{
  color:#ff3333;
  font-size:56px;
  text-shadow:0 0 18px rgba(255,30,30,.8), 0 5px 18px #000;
}

.bg-apotheke{
  right:4vw;
  top:20vh;
  width:285px;
  height:138px;
  padding-top:25px;
  transform:rotate(4deg);
}
.bg-apotheke span{
  color:#7dff9c;
  font-size:36px;
  text-shadow:0 0 22px rgba(90,255,120,.75), 0 5px 18px #000;
}

.bg-westfalen{
  right:7vw;
  bottom:17vh;
  width:250px;
  height:125px;
  padding-top:27px;
  transform:rotate(-3deg);
}
.bg-westfalen span{
  color:#ffd21a;
  font-size:38px;
}

.background{
  background:
    radial-gradient(circle at 12% 28%, rgba(255,20,20,.18), transparent 22%),
    radial-gradient(circle at 84% 27%, rgba(80,255,120,.16), transparent 24%),
    radial-gradient(circle at 82% 78%, rgba(255,210,26,.18), transparent 25%),
    linear-gradient(180deg,#050505,#0a0a0a 45%,#050505) !important;
}

.background::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(255,210,26,.08) 0 8%, transparent 8% 100%),
    repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.05) 72px 76px, transparent 78px 140px);
  opacity:.45;
}

.background::after{
  background:
    radial-gradient(circle at 50% 20%, rgba(255,210,26,.13), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.62)) !important;
}

@media(max-width:760px){
  .bg-store{
    opacity:.22;
    transform:none !important;
  }
  .bg-rewe{
    left:-28px;
    top:19vh;
    width:170px;
    height:95px;
    padding-top:22px;
  }
  .bg-rewe span{
    font-size:38px;
  }
  .bg-apotheke{
    right:-45px;
    top:27vh;
    width:205px;
    height:95px;
    padding-top:20px;
  }
  .bg-apotheke span{
    font-size:25px;
  }
  .bg-westfalen{
    right:-35px;
    bottom:22vh;
    width:190px;
    height:90px;
    padding-top:20px;
  }
  .bg-westfalen span{
    font-size:27px;
  }
}


/* CLEAN GOLD BACKGROUND */

.background{
  background:
    radial-gradient(circle at top left, rgba(255,210,26,.26), transparent 28%),
    radial-gradient(circle at top right, rgba(255,170,0,.22), transparent 30%),
    radial-gradient(circle at bottom center, rgba(255,210,26,.16), transparent 35%),
    linear-gradient(135deg,#050505 0%,#111111 45%,#050505 100%) !important;
  filter:none !important;
}

.background::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,210,26,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,210,26,.035) 1px, transparent 1px);
  background-size:60px 60px;
  opacity:.55;
}

.background::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 85px,
      rgba(255,210,26,.08) 86px 90px,
      transparent 91px 180px
    );
  opacity:.5;
  animation:goldMove 14s ease-in-out infinite alternate;
}

@keyframes goldMove{
  to{
    transform:translate(35px,20px);
  }
}

.shop-background,
.bg-store{
  display:none !important;
}


.tip-error{
  display:none;
  margin-top:-8px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(255,0,0,.16);
  border:1px solid rgba(255,80,80,.55);
  color:#ffb3b3;
  font-weight:900;
  font-size:17px;
}

.thanks-box b{
  color:#ffd21a;
}


.success-screen{
  position:fixed;
  inset:0;
  z-index:999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:
    radial-gradient(circle at top, rgba(255,210,26,.18), transparent 35%),
    rgba(0,0,0,.92);
}

.success-screen.show{
  display:flex;
}

.success-box{
  width:min(620px,94vw);
  text-align:center;
  background:rgba(0,0,0,.86);
  border:1px solid rgba(255,210,26,.55);
  border-radius:28px;
  padding:38px 26px;
  box-shadow:0 0 60px rgba(255,210,26,.25);
}

.success-box h2{
  color:#ffd21a;
  font-size:48px;
  margin:0 0 16px;
}

.success-box p{
  font-size:21px;
  line-height:1.45;
}

.success-box b{
  color:#ffd21a;
}

.success-box button{
  margin-top:18px;
  border:0;
  border-radius:18px;
  padding:16px 24px;
  background:linear-gradient(135deg,#fff06c,#ffc400,#ff9900);
  color:#000;
  font-size:20px;
  font-weight:1000;
}