/* ── ENDLOSBAND: hyperrealistische Deko links und rechts ── */

/* Das Band darf über seinen Container hinausragen – sonst schneidet
   das `overflow:hidden` aus style.css die Zweige mit einer schnurgeraden
   Kante ab. Nach innen läuft es weich aus, nach außen deckt der Bildschirmrand. */
.xmas-side {
  overflow: visible !important;
  -webkit-mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,.65) 80%, transparent 100%);
          mask-image: linear-gradient(to right, #000 55%, rgba(0,0,0,.65) 80%, transparent 100%);
}

/* Ein Abschnitt des Bandes. Die Höhe setzt das Skript, die Breite ergibt
   sich aus dem Bild – so bleibt die Girlande unverzerrt. */
.xmas-side .band-abschnitt {
  position: absolute;
  left: 50%;
  width: auto;
  /* Das Tannengrün liegt farblich nah am grünen Seitenhintergrund und würde
     darin untergehen. Etwas Helligkeit, Sättigung und ein satter Schatten
     lösen die Girlande sichtbar vom Hintergrund. */
  filter: brightness(1.14) saturate(1.12) contrast(1.04)
          drop-shadow(0 8px 20px rgba(0, 0, 0, .62));
}

/* ── Platz für das Band schaffen ──
   Das Band liegt über dem Inhalt. Ohne diesen Abstand rutschen
   Überschriften und Fließtext darunter und werden angeschnitten.
   Die Werte folgen der Bandbreite aus style.css (170/120/80 px)
   zuzüglich der Überbreite der Girlande. */
@media (min-width: 751px) {
  #hero      { padding-left: 215px; padding-right: 215px; }
  section    { padding-left: 215px; padding-right: 215px; }
  footer     { padding-left: 200px; padding-right: 200px; }
  nav        { padding-left: 190px; padding-right: 190px; }
}
@media (max-width: 1300px) and (min-width: 1001px) {
  #hero, section { padding-left: 165px; padding-right: 165px; }
  footer         { padding-left: 150px; padding-right: 150px; }
  nav            { padding-left: 140px; padding-right: 140px; }
}
@media (max-width: 1000px) and (min-width: 751px) {
  #hero, section { padding-left: 115px; padding-right: 115px; }
  footer         { padding-left: 100px; padding-right: 100px; }
  nav            { padding-left: 95px;  padding-right: 95px; }
}