/* Christmas card page (/weihnachtskarten), loaded after the homepage stylesheets. Type and components come from
   styles.css, theme-monochrome.css, brand.css and home.css; this file adds layout and the Christmas colours below
   (docs/reviews/christmas-cards/README.md). */
#hand,#auswahl,#motive,#eigenes-motiv,#ablauf,#anfragen,#fragen{scroll-margin-top:28px}
.why-points .text-button{display:inline-block;margin-top:12px}
#auswahl .why-points li{padding-left:0}
#hand,#motive{border-top:1px solid var(--line)}
.design-grid .reference-caption{margin:10px 0 0}
.design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:30px 0 0;padding:0}
.design-grid li{min-width:0}
.design-grid img{display:block;width:100%;height:auto}

/* Christmas colours and touches, this page only (Florian, 16 October). Red replaces the orange accent in its five places
   (heading second lines, button hover and tap, focus ring, selection); green marks the small labels, the step numbers and
   the sprig by the wordmark; light snow falls inside the header card. On black: red 5.0:1, black text on red 4.5:1,
   green 6.0:1. The rest of the site keeps the orange accent. */
:root{--accent:#e63946;--pine:#3a9a5f}
.eyebrow,.hero-with-form .eyebrow,.why-points .detail-number{color:var(--pine)}
.site-header{position:relative;isolation:isolate;overflow:hidden}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background-image:radial-gradient(circle,#fff 0 1.3px,transparent 1.8px),radial-gradient(circle,#fff 0 .9px,transparent 1.4px),radial-gradient(circle,#fff 0 1.1px,transparent 1.6px),radial-gradient(circle,#fff 0 .7px,transparent 1.2px),radial-gradient(circle,#fff 0 .8px,transparent 1.3px);
 background-size:137px 101px,193px 149px,89px 67px,251px 173px,61px 47px;
 background-position:23px 0,97px 31px,41px 12px,160px 55px,11px 29px;
 animation:kant-snow 16s linear infinite}
@keyframes kant-snow{to{background-position:23px 101px,97px 180px,41px 146px,160px 228px,11px 170px}}
.site-header .wordmark{position:relative}
.sprig{position:absolute;right:-44px;top:-15px;width:46px;height:29px;overflow:visible}
.sprig-branch,.sprig-needles{fill:none;stroke:var(--pine);stroke-width:1.6;stroke-linecap:round}
.sprig-berry{fill:var(--accent)}
@media(prefers-reduced-motion:reduce){.site-header::before{animation:none}}

@media(pointer:coarse){.why-points .text-button{display:inline-flex;align-items:center;min-height:44px;margin-top:4px}}
@media(max-width:760px){
 .design-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .sprig{right:-33px;top:-11px;width:35px;height:22px}
}