/* Christmas 2026 (seasonal, remove in January together with assets/js/weihnachten.js) */
.brand { position: relative; }
.brand__muetze { position: absolute; right: -14px; top: -13px; width: 30px; height: auto; transform: rotate(14deg); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
@media (max-width: 767px) { .brand__muetze { right: -12px; top: -11px; width: 26px; } }

/* Snow canvas fills its host */
.schnee { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
[data-snow] { position: relative; }
[data-snow] > .container { position: relative; z-index: 2; }

/* Popup: a card in the middle of the page, not full screen; the page stays visible behind a dark veil.
   Photo as the background of the card (man and sleigh on the right), text on the left. */
.xmas { position: fixed; inset: 0; z-index: 120; display: flex; padding: 20px; overflow-y: auto; background: rgba(11, 10, 18, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 420ms var(--ease); }
.xmas.is-open { opacity: 1; }
.xmas-open body { overflow: hidden; }
.xmas__card { position: relative; display: grid; align-items: center; flex: none; width: min(100%, 820px); min-height: min(460px, calc(100dvh - 40px)); margin: auto; padding: 40px 44px; overflow: hidden; border-radius: var(--radius); background: #0B0A12; box-shadow: 0 0 0 1px rgba(244, 244, 244, .14), 0 40px 90px -30px rgba(0, 0, 0, .9); transform: translateY(18px) scale(.98); transition: transform 480ms var(--ease) 80ms; }
.xmas.is-open .xmas__card { transform: none; }
.xmas__bg { position: absolute; inset: 0; z-index: 0; }
.xmas__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.xmas__card::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(11, 10, 18, .82) 0%, rgba(11, 10, 18, .6) 38%, rgba(11, 10, 18, 0) 62%), linear-gradient(0deg, rgba(11, 10, 18, .6) 0%, rgba(11, 10, 18, 0) 35%); }
.xmas .schnee { z-index: 1; }
.xmas__box { position: relative; z-index: 2; width: min(100%, 370px); text-align: left; color: var(--hellgrau); }
.xmas__close { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(16, 11, 11, .55); border-color: rgba(244, 244, 244, .45); }
.xmas__eyebrow { margin: 0 0 4px; font-weight: 700; font-style: normal; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--warmgold); }
.xmas__title { margin: 0 0 14px; font-family: var(--font-accent); font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3rem); line-height: 1; color: var(--weiss); letter-spacing: .01em; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); }
.xmas__text { margin: 0 0 20px; max-width: 30ch; font-size: 1.05rem; line-height: 1.45; color: var(--weiss); text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.xmas__offer { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 14px 16px 12px; border: 2px dashed var(--warmgold); border-radius: var(--radius-s); background: rgba(16, 11, 11, .55); backdrop-filter: blur(6px); }
.xmas__terms { margin: 10px 0 0; max-width: 40ch; font-size: .72rem; line-height: 1.4; color: var(--hellgrau); opacity: .8; font-style: normal; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.xmas__offer-label { margin: 0; font-style: normal; font-weight: 700; font-size: 1rem; letter-spacing: .02em; color: var(--weiss); }
.xmas__offer .xmas__code { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 4px 0 0; border: 0; background: none; }
.xmas__code { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 10px 12px 10px 20px; border: 2px dashed var(--warmgold); border-radius: var(--radius-s); background: rgba(241, 192, 15, .08); color: var(--weiss); cursor: pointer; font: inherit; font-style: normal; transition: background 180ms ease, border-color 180ms ease; }
.xmas__code:hover { background: rgba(241, 192, 15, .16); }
.xmas__offer .xmas__code:hover { background: none; }
.xmas__codeval { font-family: var(--font-accent); font-size: 1.45rem; letter-spacing: .06em; color: var(--warmgold); line-height: 1; white-space: nowrap; }
.xmas__copy { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; border-radius: var(--radius-pill); background: var(--warmgold); color: var(--dunkelgrau); white-space: nowrap; }
.xmas__code.is-copied { border-style: solid; }
.xmas__code.is-copied .xmas__copy { background: var(--weiss); }
/* Phone: a portrait card with the portrait photo; headline at the top, voucher box and terms at the bottom edge */
@media (max-width: 767px) {
  .xmas { padding: 16px; }
  .xmas__card { align-items: stretch; width: min(100%, 400px); min-height: 0; height: min(620px, calc(100dvh - 32px)); padding: 26px 18px 18px; }
  .xmas__bg img { object-position: 50% 100%; }
  .xmas__card::before { background: linear-gradient(180deg, rgba(11, 10, 18, .85) 0%, rgba(11, 10, 18, .55) 22%, rgba(11, 10, 18, 0) 40%), linear-gradient(0deg, rgba(11, 10, 18, .92) 0%, rgba(11, 10, 18, .6) 24%, rgba(11, 10, 18, 0) 42%); }
  .xmas__box { display: flex; flex-direction: column; width: auto; }
  .xmas__title { font-size: clamp(1.8rem, 9vw, 2.3rem); margin-bottom: 10px; padding-right: 40px; }
  .xmas__text { font-size: .95rem; max-width: none; margin-bottom: 14px; }
  .xmas__offer { margin-top: auto; width: 100%; align-items: center; padding: 12px 12px 10px; gap: 6px; }
  .xmas__offer .xmas__code { align-items: center; }
  .xmas__codeval { font-size: 1.3rem; }
  .xmas__terms { max-width: none; font-size: .68rem; }
  .xmas__code { flex-direction: column; gap: 10px; padding: 8px; }
}
/* Offer band directly under the hero */
.xmas-band { background: linear-gradient(90deg, var(--dunkelrot-tief), var(--dunkelrot) 45%, var(--dunkelrot-tief)); color: var(--weiss); border-top: 1px solid rgba(244, 244, 244, .08); border-bottom: 1px solid rgba(0, 0, 0, .3); }
.xmas-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; padding-block: 24px 5px; }
.xmas-band__gift { width: 40px; height: auto; transform-origin: 50% 90%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.xmas-band__gift.is-wiggle { animation: wackeln 900ms ease-in-out; }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-9deg); } 30% { transform: rotate(8deg); } 45% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 75% { transform: rotate(-2deg); } }
.xmas-band__text u { text-decoration-color: var(--warmgold); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.xmas-band__text { margin: 0; font-style: normal; font-weight: 700; font-size: 1rem; }
.xmas-band__deadline { flex-basis: 100%; margin: -4px 0 0; text-align: center; font-size: .9rem; color: var(--weiss); opacity: .9; }
.xmas-band__terms { flex-basis: 100%; max-width: none; white-space: nowrap; margin: 4px 0 0; text-align: center; font-size: .66rem; color: var(--weiss); opacity: .65; font-style: normal; }
.xmas__code--band { margin: 0; gap: 10px; padding: 4px 4px 4px 12px; border-width: 1.5px; border-color: rgba(244, 244, 244, .6); background: rgba(16, 11, 11, .35); }
.xmas__code--band .xmas__codeval { font-size: 1.05rem; }
.xmas__code--band .xmas__copy { font-size: .72rem; padding: 6px 10px; }
.xmas__code--band:hover { background: rgba(16, 11, 11, .55); }
@media (max-width: 760px) { .xmas-band__terms { white-space: normal; } }
@media (max-width: 560px) { .xmas-band__inner { text-align: center; } .xmas__code--band { flex-direction: row; } }
@media (prefers-reduced-motion: reduce) { .xmas, .xmas__card { transition: none; } .xmas-band__gift { animation: none !important; } }