#gewinnspiel {
    width: 100%;
    min-height: 100svh;
    padding: 6rem 1rem;
    color: var(--text-farbe);
    width: 100%;
}

/*--------------------------------------------------------------
# Gewinnspiel
--------------------------------------------------------------*/
#gewinnspiel{
  color: var(--text-farbe);

   background: var(--hintergrund-farbe);
}

#gewinnspiel .container{
  width: min(1400px, 95vw);
  margin: 0 auto;
}

/* bessere Anchor-Offsets (sticky header) */
#gewinnspiel .sektion{
  scroll-margin-top: 84px;
}

.g4hl {
  color: var(--text-farbe);
  font-family: var(--akzent-schrift);
}
/* ---------- Header ---------- */
#gewinnspiel .kopfzeile{
  position: sticky;
  top: 10px;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--hintergrund) 92%, transparent);
  border: 1px solid color-mix(in oklab, var(--text-farbe) 10%, transparent);
  
}

#gewinnspiel .marke{
  margin-left: 1rem;
  display:flex;
  align-items:center;
  gap:10px;
  
  letter-spacing:.2px;
  font-size: 1rem;
  color: var(--akzent-farbe);
  white-space: nowrap;
}

#gewinnspiel .marke span{
   font-family: var(--akzent-schrift);
}

#gewinnspiel .markenpunkt{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--akzent-farbe);
  box-shadow: 0 0 0 5px rgba(130,0,205,.12);
}


#gewinnspiel .kopfaktionen{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* ---------- Buttons ---------- */
#gewinnspiel .knopf{
  cursor:pointer; 
  padding: 5px 25px;
  border-radius: 999px;
  background: var(--hintergrund-farbe);
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  box-shadow: var(--schatten-knopf);
  font-family: var(--text-schrift);
  box-shadow: var();
  transition: transform .10s ease, box-shadow .15s ease, filter .15s ease;
  border: 1px solid color-mix(in oklab, var(--text-farbe) 10%, transparent);
  transition: 0.3s ease;
}

#gewinnspiel .knopf:hover{ filter: brightness(1.04); 
  box-shadow: var(--schatten-knopf-hover), 0px 0px 8px #8200cd;
  border: 1px solid color-mix(in oklab, var(--akzent-farbe) 75%, transparent);
}

#gewinnspiel .knopf:active{
  transform: translateY(1px);
  box-shadow: inset 6px 6px 14px rgba(0,0,0,.18),
              inset -6px -6px 14px rgba(255,255,255,.55);
}

#gewinnspiel .knopf.akzent{
  color:#e8e8e8;
  background: linear-gradient(135deg, rgba(130,0,205,1), rgba(130,0,205,.78));
  box-shadow: inset 3px 3px 5px #ffffff70, inset -3px -3px 5px #00000055 ,0px 3px 5px #00000040;
  border: none;
}

/* ---------- Cards (endlich sichtbar) ---------- */
#gewinnspiel .box,
#gewinnspiel .box-inset,
#gewinnspiel .kachel,
#gewinnspiel details{
  background: var(--hintergrund);
  border: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}

#gewinnspiel .box{
  border-radius: 22px;
  padding: clamp(18px, 2.2vw, 26px);
  box-shadow: var(--schatten-panel);
}

#gewinnspiel .box-inset{
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--schatten-btn-inset);
}

/* ---------- Hero Layout ---------- */
/* Mobile-first: untereinander */
#gewinnspiel .anzeige{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
  min-width: 0;
}
#gewinnspiel .anzeige > *{ min-width: 0; }

/* Desktop: 2 Spalten, aber mit MIN-Breiten -> keine Wort-für-Wort Headline */
@media (min-width: 980px){
  #gewinnspiel .anzeige{
    grid-template-columns: minmax(520px, 1.15fr) minmax(320px, .85fr);
    gap: 18px;
    align-items: start;
  }
}

/* Headline: schöner Umbruch */
#gewinnspiel .anzeige h2{
  margin:0;
  font-size: clamp(24px, 5.6vw, 44px);
  line-height: 1.06;
  letter-spacing: .2px;
  font-family: var(--akzent-schrift);
  color: var(--akzent-farbe);
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#gewinnspiel .anzeige p{
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 1.65;
  opacity: .90;
  font-family: var(--inter), Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Hero Buttons */
#gewinnspiel .hero-actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

#gewinnspiel .mini-hinweis{
  margin-top: 12px;
  font-size: 13px;
  opacity: .75;
}

/* ---------- Badges ---------- */
#gewinnspiel .abzeichenzeile{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

#gewinnspiel .abzeichen{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:9px 12px;
  border-radius:999px;
  box-shadow: var(--box-shadow-btn-hover);
  font-weight: 900;
  font-size: 13px;
}

#gewinnspiel .punkt{
  width:10px;height:10px;border-radius:50%;
  background: color-mix(in oklab, var(--accent) 85%, #fff 15%);
  box-shadow: 2px 2px 6px rgba(0,0,0,.18), -2px -2px 6px rgba(255,255,255,.55);
}

/* ---------- Rechte Spalte ---------- */
#gewinnspiel .anzeige-rechts{
  display:grid;
  gap: 12px;
}

#gewinnspiel .kachel{
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--box-shadow-btn);
  margin: 0; /* wichtig */
}

#gewinnspiel .kachel h3{
  margin:0;
  font-size: 22px;
  font-weight: 1000;
}

#gewinnspiel .kachel p{
  margin: 8px 0 0;
  opacity: .86;
  font-size: 1rem;
  line-height: 1.55;
}

/* ---------- Sektionen ---------- */
#gewinnspiel .sektion{
  margin-top: clamp(18px, 3vw, 30px);
}

#gewinnspiel .sektionkopf{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

#gewinnspiel .sektiontitel{
  margin:1rem;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing:.2px;
}

#gewinnspiel .sektionuntertitel{
  margin:0;
  opacity:.75;
  font-size:14px;
  line-height:1.4;
}

/* Ablauf Grid */
#gewinnspiel .gitter{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 980px){
  #gewinnspiel .gitter{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  
}

/* Stepcard: klarer, hochwertiger */
#gewinnspiel .stepcard{
  position: relative;
  padding-top: 16px;
}

#gewinnspiel .stepnum{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--accent) 16%, var(--hintergrund) 84%);
  color: var(--accent);
  font-weight: 1000;
  box-shadow: var(--box-shadow-btn-hover);
}

#gewinnspiel .stepcard h3{
  margin: 10px 0 8px;
  font-weight: 1000;
}

#gewinnspiel .liste{
  margin:0;
  padding-left: 18px;
  line-height: 1.55;
  opacity: .9;
}
#gewinnspiel .liste li{ margin: 8px 0; }

/* ---------- FAQ ---------- */
#gewinnspiel .faq{
  display:grid;
  gap: 10px;
}

#gewinnspiel details{
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--box-shadow-btn-hover);
}

#gewinnspiel summary{
  cursor:pointer;
  font-weight: 1000;
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
#gewinnspiel summary::-webkit-details-marker{display:none;}

#gewinnspiel summary::after{
  content:"▾";
  opacity:.65;
  transform: translateY(-1px);
}
#gewinnspiel details[open] summary::after{
  content:"▴";
}

#gewinnspiel details p{
  margin: 10px 0 0;
  opacity: .86;
  line-height: 1.55;
  font-size: 14px;
}

/* ---------- Footer ---------- */
#gewinnspiel .fusszeile{
  margin-top: 22px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  opacity: .75;
  font-size: 13px;
}
/*--------------------------------------------------------------
# Gewinnspiel
--------------------------------------------------------------*/


.title-section {
  margin-top: 1rem;
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 600;
  font-family: var(--akzent-schrift);
  text-align: center;
  color: var(--text-farbe);
}