/* ============================================================
   ADVENTS GIVEAWAY — Weihnachts-Bausteine
   Brutalist-editoriale Zusatz-Styles. Keine Effekte, nur Form.
   ============================================================ */

/* ---------- 1. ZACKEN-KANTE ----------
   Sektions-Trennkante wie abgerissenes Papier / Schneekante.
   Wird als eigenes Element oben (--oben) oder unten (--unten)
   an eine Sektion gesetzt; die Zähne zeigen in die Sektion hinein.
   Die Füllfarbe erbt den Hintergrund des Elternelements. */

.xmas-zacken{
  position:relative;
  height:20px;
  background:inherit;
  overflow:hidden;
}

.xmas-zacken--oben{
  clip-path:polygon(
    0 0,
    100% 0,
    95% 100%,
    90% 0,
    85% 100%,
    80% 0,
    75% 100%,
    70% 0,
    65% 100%,
    60% 0,
    55% 100%,
    50% 0,
    45% 100%,
    40% 0,
    35% 100%,
    30% 0,
    25% 100%,
    20% 0,
    15% 100%,
    10% 0,
    5% 100%,
    0 0
  );
}

.xmas-zacken--unten{
  clip-path:polygon(
    0 100%,
    100% 100%,
    95% 0,
    90% 100%,
    85% 0,
    80% 100%,
    75% 0,
    70% 100%,
    65% 0,
    60% 100%,
    55% 0,
    50% 100%,
    45% 0,
    40% 100%,
    35% 0,
    30% 100%,
    25% 0,
    20% 100%,
    15% 0,
    10% 100%,
    5% 0,
    0 100%
  );
}


/* ---------- 2. SCHNEEFLOCKEN-TEXTUR ----------
   Dezentes Punktmuster aus zwei Punktgrössen. Als Overlay auf
   dunklen Sektionen gedacht. Im Grundzustand statisch. */

.xmas-flocken{
  position:relative;
}

.xmas-flocken::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    radial-gradient(circle,var(--white) 1px,transparent 1px),
    radial-gradient(circle,var(--white) 1.5px,transparent 1.5px);
  background-size:24px 24px,56px 56px;
  background-position:center top,center top;
  opacity:.12;
}

.xmas-flocken--fall::before{
  animation:xmas-flocken-fall 72s linear infinite;
}

@keyframes xmas-flocken-fall{
  to{
    background-position:center 240px,center 280px;
  }
}


/* ---------- 3. LICHTERKETTEN-GIRLANDE ----------
   Schlichte Lichterkette als Trenner: schwarze Leitung,
   daran gelb/rot abwechselnde Glühbirnen mit schwarzer Kontur. */

.xmas-girlande{
  position:relative;
  height:30px;
  border-top:var(--bd-thick);
  margin-block:1.5rem;
}

.xmas-girlande::after{
  content:"";
  position:absolute;
  top:-4px;
  left:0;
  right:0;
  height:30px;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0 11px,
      var(--black) 11px 13px,
      transparent 13px 43px,
      var(--black) 43px 45px,
      transparent 45px 64px
    ),
    radial-gradient(circle at 12px 22px,var(--yellow) 0 6px,var(--black) 6px 8px,transparent 8px),
    radial-gradient(circle at 44px 22px,var(--red) 0 6px,var(--black) 6px 8px,transparent 8px);
  background-size:64px 14px,64px 30px,64px 30px;
  background-position:center top,center top,center top;
  background-repeat:repeat-x;
}


/* ---------- 4. ADVENTSKALENDER-RASTER ---------- */

.adv-raster{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(4,1fr);
  margin-top:2.5rem;
}

@media(min-width:600px){
  .adv-raster{grid-template-columns:repeat(6,1fr)}
}

@media(min-width:900px){
  .adv-raster{grid-template-columns:repeat(8,1fr)}
}

.adv-tuer{
  aspect-ratio:1;
  background:var(--paper);
  border:var(--bd-thick);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  cursor:pointer;
  transition:background .15s ease,transform .12s ease,box-shadow .12s ease;
}

.adv-tuer:hover{
  background:var(--yellow);
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--black);
}

.adv-tuer__n{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,4vw,2rem);
  line-height:1;
  color:var(--black);
}


/* ---------- 5. REDUCED MOTION ---------- */

@media (prefers-reduced-motion:reduce){
  .xmas-flocken--fall::before{
    animation:none;
  }
  .adv-tuer{
    transition:none;
  }
  .adv-tuer:hover{
    transform:none;
    box-shadow:var(--shadow);
  }
}

/* ---------- Einbindung in die Seite ----------
   Das Flocken-Overlay deckt die ganze Sektion ab und bleibt hinter dem
   Inhalt. Ohne diese Regeln waere das leere <div> nur 0 Pixel hoch. */
.section .xmas-flocken{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.section .xmas-flocken ~ *{position:relative;z-index:1}

/* Girlande als Abschluss unter dem Adventskalender-Raster */
.adv-raster + .xmas-girlande{margin-top:2rem}

/* Zackenkante am oberen Sektionsrand platzieren. Sie traegt die Farbe der
   darueberliegenden hellen Sektion, damit die Zacken in die dunkle
   Sektion hineinragen. */
.section .xmas-zacken--oben{
  position:absolute;
  top:0;left:0;right:0;
  height:18px;
  background:var(--paper);
  z-index:1;
}