/* ================================================================
   gewinnspiel-styles.css
   ================================================================
   VERSION: 4
   ABLAGEORT: /site/templates/styles/gewinnspiel-styles.css
   ================================================================ */

.gewinnspiel{background:var(--navy);color:#fff;margin-top:36px;}
.gw-inner{max-width:1180px;margin:0 auto;padding:70px 40px;}
.gw-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.gw-eyebrow{color:var(--accent);font-size:32px;}
.gw-left h2{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:34px;margin-top:8px;line-height:1.08;}
.gw-left p{font-size:17px;color:#D5D8DF;font-weight:300;line-height:1.7;margin:16px 0 26px;max-width:440px;}

.gw-countdown-left{border-bottom:1px dotted rgba(255,255,255,.2);padding-bottom:22px;margin-bottom:26px;max-width:440px;}
.gw-countdown-left .cd-label{font-size:14px;color:#C6CAD4;display:block;margin-bottom:12px;}
.gw-countdown{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.gw-countdown .cd-box{background:var(--navy-2);border-radius:2px;padding:12px 14px;text-align:center;min-width:64px;}
.gw-countdown .cd-box b{display:block;font-family:'Oswald',sans-serif;font-weight:600;font-size:24px;color:var(--accent);}
.gw-countdown .cd-box span{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#9AA0AE;}

.gw-left .gw-field{margin-bottom:16px;}
.gw-left .gw-field label{display:block;font-size:14px;color:#C6CAD4;margin-bottom:6px;}
.gw-left .gw-field input[type="text"],
.gw-left .gw-field input[type="email"]{
  width:100%;font-family:'Barlow',sans-serif;font-size:16px;color:#fff;
  background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.25);padding:9px 2px;
  transition:border-color .3s var(--ease);
}
.gw-left .gw-field input:focus{outline:none;border-color:var(--accent);}

.gw-login-hint{font-size:14px;color:#C6CAD4;margin-top:18px;line-height:1.5;}

.gw-right-box{background:var(--surface);color:var(--text);border-radius:3px;padding:32px 34px;box-shadow:var(--shadow-2);}
.gw-question{font-size:15px;font-weight:600;color:var(--text);margin:0 0 10px;}
.gw-options{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;}
.gw-options label{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-muted);cursor:pointer;}
.gw-options input{accent-color:var(--accent-deep);width:16px;height:16px;cursor:pointer;}
.gw-options-locked label{cursor:default;opacity:.55;}
.gw-options-locked input{cursor:default;}
.gw-right-box .btn{width:100%;text-align:center;}
.gw-fine{font-size:12px;color:var(--text-muted);margin-top:14px;line-height:1.5;}

.gw-auth-actions{display:flex;flex-direction:column;gap:12px;}
.gw-auth-actions .btn{width:100%;text-align:center;}
.gw-auth-secondary{
  display:block;text-align:center;font-size:13.5px;font-weight:600;
  color:var(--accent-deep);transition:color .25s var(--ease);
}
.gw-auth-secondary:hover{color:var(--text);}

.gw-error{
  max-width:1180px;margin:0 auto;padding:0 40px 20px;
  color:#F5A9A0;font-size:14px;
}

.gw-prize{display:flex;gap:16px;align-items:center;background:var(--navy-2);border-radius:2px;padding:16px 20px;margin-top:20px;}
.gw-prize .ph-flat{flex:0 0 64px;height:64px;border:none;background:var(--navy-3);}
.gw-prize .ph-flat .ph-n{font-size:11px;}
.gw-prize .ph-flat .ph-l{font-size:11px;}
.gw-prize-txt h4{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:16px;color:#fff;}
.gw-prize-txt span{font-size:14px;color:var(--accent);}

/* ---------- Erfolgs-Ansicht: Briefumschlag-Animation ---------- */
.gw-success{display:none;text-align:center;padding:30px 0 10px;}
.gw-success.show{display:block;}
.gw-success h4{
  font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:22px;color:var(--accent);
  opacity:0;animation:gwTextIn .6s var(--ease) forwards;animation-delay:1.5s;
}
.gw-success p{
  font-size:16px;color:#C6CAD4;margin-top:8px;
  opacity:0;animation:gwTextIn .6s var(--ease) forwards;animation-delay:1.65s;
}
@keyframes gwTextIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

.envelope-wrap{margin-bottom:26px;}
.envelope{
  position:relative;width:150px;height:104px;margin:0 auto;
  transform:scale(.4);opacity:0;
  animation:envPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes envPop{to{transform:scale(1);opacity:1;}}

.env-body{
  position:absolute;left:0;right:0;bottom:0;top:24px;background:var(--accent);border-radius:3px;
  box-shadow:0 14px 30px rgba(0,0,0,.35);z-index:1;
}
.env-letter{
  position:absolute;left:50%;top:30px;width:66%;height:56px;
  background:#fff;border-radius:2px;box-shadow:0 6px 14px rgba(0,0,0,.2);
  transform:translate(-50%,10px);opacity:0;z-index:2;
  animation:letterRise .5s ease-out forwards;animation-delay:.9s;
}
@keyframes letterRise{to{transform:translate(-50%,-20px);opacity:1;}}
.env-flap{
  position:absolute;top:24px;left:0;width:100%;height:56px;
  background:var(--accent-deep);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top center;
  animation:flapOpen .5s ease-in forwards;animation-delay:.55s;
  z-index:3;
}
@keyframes flapOpen{
  0%{transform:scaleY(1);opacity:1;}
  100%{transform:scaleY(0);opacity:0;}
}

@media(max-width:900px){
  .gw-grid{grid-template-columns:1fr;gap:34px;}
  .gw-inner{padding:50px 30px;}
}