@import url("soli-kontur.css?v=2");

body {
  --szene: url("szene-garten.webp");
  --akzent: #254a41;
  --papier: #f8f4e9;
  --tinte: #25362e;
  --flieder: #e6eee3;
  --saisonfuss: #e3eade;
}
body.saison-winter {
  --szene: url("szene-winter.webp");
  --akzent: #244555;
  --papier: #f4f5f0;
  --tinte: #1d343a;
  --flieder: #e1eaec;
  --saisonfuss: #e2ebeb;
}
body.saison-weihnachten {
  --szene: url("szene-weihnachten.webp");
  --akzent: #674239;
  --papier: #f8f1e6;
  --tinte: #24382d;
  --flieder: #eee5d8;
  --saisonfuss: #e9e3d4;
}
body.saison-fruehling {
  --szene: url("szene-fruehling.webp");
  --akzent: #355242;
  --papier: #faf4ed;
  --tinte: #263b31;
  --flieder: #f0e4e2;
  --saisonfuss: #e9efe2;
}
body.saison-sommer {
  --szene: url("szene-sommer.webp");
  --akzent: #5e4561;
  --papier: #f9f2e5;
  --tinte: #332b39;
  --flieder: #ebe1ee;
  --saisonfuss: #eee3d9;
}
body.saison-herbst {
  --szene: url("szene-herbst.webp");
  --akzent: #624231;
  --papier: #f8efe2;
  --tinte: #382c23;
  --flieder: #efe0cc;
  --saisonfuss: #ebdfce;
}
body { background: var(--papier); color: var(--tinte); }
.originalmarke { display: block; width: 58px; height: 58px; border-radius: 50%; }
.seitenkopf { background: var(--papier); }
.seitenfuss { background: var(--saisonfuss); }
.knopf:hover { background: var(--tinte); }
.designhinweis { padding: .65rem 1rem; text-align: center; background: #23453c; color: #fff7e6; }
.designhinweis a { display: inline-block; margin-left: .8rem; }
.gartenseite, .soliseite {
  background:
    radial-gradient(ellipse at 0 45%, color-mix(in srgb, var(--saisonfuss) 72%, transparent), transparent 45%),
    radial-gradient(ellipse at 100% 83%, #dec5a930, transparent 40%),
    var(--papier);
}
.gartenhero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: clamp(465px, 46vw, 610px);
  margin-top: 1.35rem;
  border-radius: 1rem;
  background: #23392d var(--szene) center 65% / cover;
  color: #fff9ea;
  box-shadow: 0 16px 55px #2f3a2a23;
}
.gartenhero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #101d17ed 0%, #16241ac9 35%, #1b281a38 65%, transparent);
}
.saisonmotiv { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gartentext { align-self: center; z-index: 2; padding: clamp(1.5rem, 6vw, 5rem); padding-right: .7rem; }
.gartentext h1 { font: 500 clamp(2.8rem, 6.2vw, 5.7rem)/.95 "DM Serif Text", Georgia, serif; letter-spacing: -.052em; margin-bottom: .32em; text-wrap: balance; }
.gartentext p { max-width: 36ch; font-size: clamp(1rem, 1.6vw, 1.18rem); color: #fff6e3; }
.gartentext .knopf { background: #f5e8c9; color: #20372e; }
.gartentext .knopf:hover { background: #fff8e8; }
.gartenfigur { position: relative; display: block; min-width: 0; isolation: isolate; text-decoration: none; }
.gartenfigur-soli::before, .soli-szene::before {
  content: "";
  position: absolute;
  inset: auto 13% 8% auto;
  width: 65%;
  height: 12%;
  background: radial-gradient(ellipse, #15201cb3 0%, transparent 68%);
  transform: rotate(-5deg);
}
.gartenfigur-soli img, .soli-szene img {
  position: absolute;
  left: 54%;
  bottom: -13%;
  width: clamp(415px, 52vw, 610px);
  max-width: none;
  height: auto;
  transform: translateX(-46%);
}
.gartenfigur-foto { display: grid; place-items: center; }
.gartenfigur-foto img { width: min(76%, 330px); max-height: 75%; object-fit: contain; border-radius: .85rem; }
.figurhinweis { position: absolute; right: 1rem; bottom: 1rem; padding: .5rem .85rem; border-radius: 2rem; color: #fff9ea; background: #182b23e8; font-weight: 700; font-size: .9rem; }
.portalbereich { margin-top: clamp(2.5rem, 7vw, 5.5rem); }
.portalkopf { text-align: center; margin-bottom: 1.8rem; }
.portalkopf h2 { margin: 0; }
.portal {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(305px, 31vw, 410px);
  overflow: hidden;
  border-radius: 48% 48% .8rem .8rem / 27% 27% .8rem .8rem;
  text-decoration: none;
  color: #fff9ed;
  background: #30463b var(--portal, var(--szene)) center 57% / cover;
  box-shadow: 0 10px 24px #24382525;
}
.portal-deko { --portal: url("portal-deko.webp"); }
.portal-weihnachten { --portal: url("portal-weihnachten.webp"); }
.portal-schluesselanhaenger { --portal: url("portal-schluesselanhaenger.webp"); }
.portal img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portal::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(transparent 21%, #13201978 53%, #101c16fa); }
.portaltext { padding: 1.35rem; }
.portal h3 { font: 500 clamp(1.45rem, 3vw, 2rem)/1.05 "DM Serif Text", Georgia, serif; }
.portal p { font-size: .9rem; }
.portalaktion { color: #fff0c8; font-size: .85rem; font-weight: 750; }
.portal:hover .portalaktion { text-decoration: underline; text-underline-offset: .25em; }
.gartengeschichte article { background: color-mix(in srgb, var(--papier) 80%, white); }
.soliseite .detail { gap: clamp(1rem, 5vw, 4rem); }
.soli-szene {
  min-height: clamp(350px, 47vw, 560px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #243b2d var(--szene) 80% 66% / cover;
}
.soli-szene img { width: clamp(425px, 49vw, 590px); bottom: -14%; left: 51%; }
.soli-szene::before { right: 14%; bottom: 8%; }
.soliseite .galerie > a { background: var(--papier); }
.soliseite .galerie > a span { display: block; padding: .5rem; font-size: .8rem; }
.soliseite .produktkauf { background: var(--flieder); }
.soli-zeile { font: italic clamp(1.25rem, 3vw, 1.7rem)/1.2 Georgia, serif; color: var(--akzent); }

@media (max-width: 670px) {
  .originalmarke { width: 46px; height: 46px; }
  .gartenhero { grid-template-columns: 1fr; grid-template-rows: auto minmax(280px, 1fr); min-height: 0; background-position: 68% 64%; }
  .gartenhero::before { background: linear-gradient(#111f19ee, #17281aa8 40%, transparent 75%); }
  .gartentext { padding: 1.65rem 1.25rem .7rem; }
  .gartentext h1 { font-size: clamp(2.75rem, 11vw, 4rem); text-wrap: initial; }
  .gartenfigur-soli img { width: clamp(345px, 92vw, 485px); bottom: -23%; }
  .gartenfigur-soli::before { bottom: 5%; }
  .gartenfigur-foto img { max-height: 220px; }
  .weltenraster { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
  .portal { min-height: 315px; }
  .soli-szene img { width: clamp(375px, 100vw, 510px); }
  .soli-szene { min-height: 365px; }
}

/* Carry the winter landscape through the site chrome and the whole landing page. */
body.saison-kulisse {
  --wald: #10251f;
  --waldlicht: #213a31;
  --waldtext: #fff5e2;
  --waldgold: #ead6a8;
  --waldkante: #e4c88a52;
  --waldpfad: url("winter-waldpfad.webp");
  --kartenmotiv: url("winterwelt-soli.webp");
  --kaufpapier: #f7efdf;
  --kartentext-hintergrund: #f5eddb;
  --produktpapier: #f4ebd7;
  --kopfverlauf: linear-gradient(95deg, #10251ffc, #19342be6 64%, #19342bc9);
  --heroverlauf: linear-gradient(90deg, #10211cf7 0%, #142820db 31%, #162b2260 57%, transparent 84%);
  --heroverlauf-mobil: linear-gradient(#10251ff2, #162b22bb 35%, transparent 74%);
  background:
    radial-gradient(ellipse at 95% 35%, #dce9e5 0%, transparent 48%),
    var(--papier);
}
body.saison-weihnachten {
  --wald: #1d2720;
  --waldlicht: #3a3d2a;
  --waldtext: #fff2dd;
  --waldgold: #f1d2a1;
}
body.saison-kulisse :is(.seitenkopf, .seitenfuss) {
  background: var(--wald);
  color: var(--waldtext);
  border-color: var(--waldkante);
}
body.saison-kulisse .seitenkopf {
  background: linear-gradient(95deg, var(--wald), var(--waldlicht));
}
body.saison-kulisse :is(.korblink, .fuss) { border-color: var(--waldkante); }
body.saison-kulisse .widerrufslink { color: var(--waldgold); }
body.saison-kulisse :is(.seitenkopf, .seitenfuss, .gartenhero) :focus-visible {
  outline-color: var(--waldgold);
}
body.saison-kulisse .sprunglink { color: var(--tinte); }

body.saison-kulisse.gartenseite {
  color: var(--waldtext);
  background:
    radial-gradient(ellipse at 8% 44%, #56746938, transparent 44%),
    radial-gradient(ellipse at 90% 70%, #997e5122, transparent 36%),
    linear-gradient(var(--wald), var(--waldlicht) 65%, var(--wald));
}
body.saison-kulisse.gartenseite #inhalt { width: 100%; }
body.saison-kulisse.gartenseite #inhalt > :not(.gartenhero) {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}
body.saison-kulisse .gartenhero {
  --szenenrand: max(1rem, calc((100% - 1120px) / 2));
  padding-inline: var(--szenenrand);
  margin-top: 0;
  min-height: clamp(510px, 50vw, 690px);
  border-radius: 0;
  box-shadow: none;
  background-position: center 60%;
}
body.saison-kulisse .gartenhero::before {
  background:
    linear-gradient(0deg, var(--wald), transparent 24%),
    var(--heroverlauf);
}
body.saison-kulisse .gartentext { padding-left: clamp(.5rem, 4vw, 3.5rem); }
body.saison-kulisse .gartenfigur { z-index: 1; }
body.saison-kulisse .figurhinweis { bottom: 1.65rem; }
body.saison-kulisse.gartenseite :is(.abschnittkopf .textlink, .filter a) { color: var(--waldtext); }
body.saison-kulisse.gartenseite .filter a { border-color: var(--waldkante); }
body.saison-kulisse.gartenseite .filter a[aria-current] {
  background: var(--waldgold);
  color: var(--wald);
}
body.saison-kulisse.gartenseite .karte { background: #faf5e9; color: var(--tinte); }
body.saison-kulisse .gartengeschichte article {
  background: #ffffff0b;
  border-color: var(--waldkante);
}
body.saison-kulisse.gartenseite .portalbereich {
  margin-top: clamp(1.3rem, 4vw, 3rem);
}

.schneefall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: .78;
}
.schneefall::before, .schneefall::after {
  content: "";
  position: absolute;
  inset: -230px -45px 0;
  background-repeat: repeat;
  animation: winterflocken 9s linear infinite;
}
.schneefall::before {
  background-size: 270px 230px;
  background-image:
    radial-gradient(circle at 15% 12%, #fff7e1 1px, transparent 2.1px),
    radial-gradient(circle at 44% 53%, #f5fafa 1.5px, transparent 2.8px),
    radial-gradient(circle at 85% 23%, #fff 1px, transparent 2px),
    radial-gradient(circle at 69% 89%, #fff6dc 1px, transparent 2.5px),
    radial-gradient(circle at 10% 77%, #fff 1px, transparent 2px);
}
.schneefall::after {
  background-size: 190px 230px;
  background-image:
    radial-gradient(circle at 24% 36%, #fff 1px, transparent 2px),
    radial-gradient(circle at 63% 71%, #fff8e8 1.3px, transparent 2.6px),
    radial-gradient(circle at 79% 18%, #fff 1px, transparent 2px);
  opacity: .53;
  animation-duration: 14s;
  animation-delay: -5s;
}
@keyframes winterflocken {
  to { transform: translate(23px, 230px); }
}
.schneeschalter {
  position: absolute;
  z-index: 3;
  left: var(--szenenrand);
  bottom: .8rem;
  padding: .35rem .65rem;
  min-height: 36px;
  border-radius: 2rem;
  border: 1px solid #fff5da66;
  color: #fff6e5;
  background: #10251ff0;
  font-size: .78rem;
}
.schneeschalter[aria-pressed="true"] { border-color: var(--waldgold); }
.schneeschalter[aria-pressed="false"] { color: #e1e2d6; }
@media (max-width: 670px) {
  body.saison-kulisse .gartenhero {
    min-height: 0;
    grid-template-rows: auto minmax(295px, 1fr);
    background-position: 68% 58%;
  }
  body.saison-kulisse .gartenhero::before {
    background:
      linear-gradient(0deg, var(--wald), transparent 17%),
      var(--heroverlauf-mobil);
  }
}
@media (prefers-reduced-motion: reduce) {
  .schneefall, .schneeschalter { display: none; }
}

.gartenfigur-foto .figurenbuehne { display: contents; }

/* Align the figure to a point in the background: at matching percentage
   positions the point stays fixed even when cover crops the photograph. */
.saison-winter .gartenhero { --stand-x: 72%; --stand-y: 70%; --szene-mobil: url("szene-winter-mobil.webp"); }
.saison-weihnachten .gartenhero { --stand-x: 72%; --stand-y: 82%; --szene-mobil: url("szene-weihnachten-mobil.webp"); }
body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) {
  background-position: var(--stand-x) var(--stand-y);
}
body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) .gartenfigur-soli {
  position: static;
}
body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) .gartenfigur-soli::before {
  content: none;
}
body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) .gartenfigur-soli .figurenbuehne {
  position: absolute;
  left: var(--stand-x);
  top: var(--stand-y);
  width: clamp(340px, 44vw, 560px);
  transform: translateX(-50%);
  isolation: isolate;
}
body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) .gartenfigur-soli .figurenbuehne::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 0;
  width: 31%;
  height: clamp(12px, 2vw, 24px);
  transform: translate(-50%, -36%);
  background: radial-gradient(ellipse, #14241fcc 0%, #14241f79 36%, transparent 72%);
}
body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) .gartenfigur-soli .figurenbuehne img {
  z-index: 2;
  top: 0;
  left: 50%;
  bottom: auto;
  width: 100%;
  transform: translate(-43.1%, -86.5%);
}

body.saison-kulisse.gartenseite #inhalt > .waldpfad {
  width: 100%;
  min-height: clamp(230px, 31vw, 460px);
  margin-block: 0;
  background:
    linear-gradient(180deg, var(--waldlicht) 0%, transparent 29%, transparent 68%, var(--waldlicht) 100%),
    var(--waldpfad) center 55% / cover no-repeat;
}
body.saison-kulisse.gartenseite .portalbereich { margin-bottom: 0; }
body.saison-kulisse.gartenseite #sortiment { margin-top: clamp(.8rem, 3vw, 2rem); }
.soli-kartenmotiv {
  position: relative;
  overflow: hidden;
  background: #253e33 var(--szene) 78% 64% / cover no-repeat;
}
.soli-kartenmotiv img {
  position: absolute;
  top: 90%;
  left: 50%;
  width: 71%;
  transform: translate(-43%, -86.5%);
}

.schneefall {
  position: fixed;
  z-index: 4;
  opacity: .52;
}
.schneeschalter {
  position: fixed;
  z-index: 6;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(.85rem, env(safe-area-inset-bottom));
}
.schneeschalter span { padding-left: .25em; font-weight: 750; }
body.saison-kulisse .seitenfuss .fuss { padding-bottom: 4rem; }

@media (max-width: 670px) {
  .saison-winter .gartenhero { --stand-x: 52.44%; --stand-y: 82.7%; }
  .saison-weihnachten .gartenhero { --stand-x: 52.44%; --stand-y: 85.42%; }
  body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) { background-image: var(--szene-mobil, var(--szene)); }
  body.saison-kulisse .gartenhero:not(:has(.saisonmotiv)) .gartenfigur-soli .figurenbuehne {
    width: clamp(245px, 72vw, 350px);
  }
  .schneeschalter { min-height: 40px; }
}

body.saison-kulisse {
  --saison-gartenportal: url("winterwelt-garten.webp");
  --saison-weihnachtsportal: url("winterwelt-weihnachten.webp");
  --saison-wiesenportal: url("winterwelt-wiese.webp");
}
body.saison-kulisse .portal-deko { --portal: var(--saison-gartenportal); }
body.saison-kulisse .portal-weihnachten { --portal: var(--saison-weihnachtsportal); }
body.saison-kulisse .portal-schluesselanhaenger { --portal: var(--saison-wiesenportal); }
body.saison-kulisse.weltenseite {
  color: var(--waldtext);
  background:
    radial-gradient(ellipse at 75% 50%, #5a776838, transparent 45%),
    linear-gradient(var(--wald), var(--waldlicht) 65%, var(--wald));
}
body.saison-kulisse.weltenseite .weltbanner {
  position: relative;
  isolation: isolate;
  min-height: clamp(245px, 34vw, 410px);
  background: var(--wald) var(--portal, var(--szene)) center 60% / cover;
}
body.saison-kulisse.weltenseite .weltbanner::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #10221bea, #10221b45 83%);
}
body.saison-kulisse.weltenseite .weltbanner:has(img) { grid-template-columns: 1fr; }
body.saison-kulisse.weltenseite .weltbanner > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  max-height: none;
}
body.saison-kulisse.weltenseite .karte {
  background: #faf5e9;
  color: var(--tinte);
}
body.saison-kulisse .soli-kartenmotiv {
  --karten-stand: 78%;
  background-image: var(--kartenmotiv);
  background-position: 50% var(--karten-stand);
}
body.saison-kulisse .soli-kartenmotiv::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--karten-stand);
  width: 23%;
  height: 8%;
  transform: translate(-50%, -35%);
  background: radial-gradient(ellipse, #24342fc2, transparent 72%);
}
body.saison-kulisse .soli-kartenmotiv img {
  top: var(--karten-stand);
  width: 60%;
}

/* A short page still ends at the footer, including an empty basket. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1; }
body > .seitenfuss { flex: none; }
.korbartikel { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.korbartikel h2 { margin: 0 0 .25rem; font: 750 1.15rem/1.3 system-ui, sans-serif; }
.korbartikel h2 a { text-decoration: none; }
.korbartikel h2 a:hover { text-decoration: underline; }
.korbartikel p { margin: 0; }
.korbartikel img { flex: none; width: 74px; height: 74px; object-fit: contain; border-radius: .55rem; background: #f9f2e5; }
.kassenlayout { display: grid; gap: 1rem; }
.kassenuebersicht .gesamt { margin-bottom: .55rem; }
.kassenuebersicht p:last-child { margin-bottom: 0; }

body.saison-kulisse .seitenkopf {
  background:
    var(--kopfverlauf),
    var(--szene) right 24% / cover;
}
body.saison-kulisse .kopf { min-height: 72px; padding-block: .65rem; }
body.saison-kulisse .kopf .marke {
  font: 500 clamp(1.1rem, 2.5vw, 1.45rem)/1.1 Georgia, serif;
  letter-spacing: -.025em;
  gap: .65rem;
}
body.saison-kulisse .kopf nav a { padding: .45rem .55rem; }
body.saison-kulisse .kopf nav .korblink {
  padding-inline: .9rem;
  background: #f1dfb414;
}
body.saison-kulisse .kopf nav .korblink[aria-current="page"] {
  background: var(--waldgold);
  color: var(--wald);
}
body.saison-kulisse .seitenfuss .fuss {
  margin-top: 0;
  border-top: 1px solid var(--waldkante);
  row-gap: .9rem;
}
body.saison-kulisse .fuss a { text-underline-offset: .23em; }

body.saison-kulisse:is(.produktseite, .kaufseite) {
  color: var(--waldtext);
  background:
    radial-gradient(ellipse at 75% 48%, #52706132, transparent 55%),
    linear-gradient(var(--wald), var(--waldlicht) 66%, var(--wald));
}
body.saison-kulisse.weltenseite .raster {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
}
body.saison-kulisse :is(.raster .karte, .galeriebild) {
  border-color: #ddc79763;
}
body.saison-kulisse .kartentext {
  background: var(--kartentext-hintergrund);
  color: #24372d;
  border-top: 1px solid #d7c597;
  padding: 1.05rem 1.15rem 1.2rem;
}
body.saison-kulisse .kartentext h3 {
  font: 500 clamp(1.3rem, 2.8vw, 1.7rem)/1.13 Georgia, serif;
  margin-bottom: .5rem;
}
body.saison-kulisse .kartentext p { font-weight: 700; }

body.saison-kulisse.produktseite .detail {
  align-items: start;
  gap: clamp(1.1rem, 4vw, 3.1rem);
}
body.saison-kulisse.produktseite .produktinfo {
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid var(--waldkante);
  border-radius: 1rem;
  background: #112820a8;
}
body.saison-kulisse.produktseite :is(.kicker, .soli-zeile) { color: var(--waldgold); }
body.saison-kulisse.produktseite .produktinfo h1 {
  font-size: clamp(2.4rem, 5vw, 4.1rem);
}
body.saison-kulisse.produktseite .produktinfo details { border-color: var(--waldkante); }
body.saison-kulisse.produktseite .produktkauf {
  background: var(--produktpapier);
  color: #23382e;
  padding: clamp(.85rem, 2.5vw, 1.3rem);
}
body.saison-kulisse.produktseite :is(.produktkauf select, .galeriebild) { border-color: #a7956d; }
body.saison-kulisse.produktseite .galerie > a { background: var(--produktpapier); color: #23382e; }

body.saison-kulisse.kaufseite .kauf { max-width: 900px; margin-block: clamp(1.6rem, 5vw, 3.1rem); }
body.saison-kulisse.kaufseite .kaufflaeche {
  background: var(--kaufpapier);
  color: #22362d;
  padding: clamp(.9rem, 3vw, 1.6rem);
  border: 1px solid #d8c491;
  border-radius: 1rem;
}
body.saison-kulisse.kaufseite .korbflaeche > :first-child { padding-top: 0; }
body.saison-kulisse.kaufseite .korbflaeche > :last-child { border-bottom: 0; margin-bottom: 0; }
body.saison-kulisse.kaufseite .korbsumme { margin-top: 1.1rem; }
body.saison-kulisse.kaufseite :is(.korbsumme, .kauf > form) .knopf {
  background: var(--waldgold);
  color: var(--wald);
}
body.saison-kulisse.kaufseite :is(.kaufzeile, .endbetrag) { border-color: #a78d635b; }
body.saison-kulisse.kaufseite .hinweis {
  background: #e7d8b7;
  color: #21372e;
}
body.saison-kulisse.kaufseite .lieferformular { max-width: none; }
body.saison-kulisse.kaufseite :is(input:not([type="radio"]), fieldset, .nebentaste) { border-color: #a7956d; }
body.saison-kulisse.kaufseite .errorlist { color: #7c251d; }
body.saison-kulisse.kaufseite .kassenuebersicht { align-self: start; }
@media (min-width: 740px) {
  body.saison-kulisse.kaufseite .kassenlayout {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  }
}

/* Christmas uses the same layout as Winterzauber with its own festive palette. */
body.saison-weihnachten {
  --wald: #1b2820;
  --waldlicht: #3c3227;
  --waldtext: #fff3dc;
  --waldgold: #f3d4a0;
  --waldkante: #e3ac655e;
  --akzent: #6d352f;
  --saison-gartenportal: url("festwelt-garten.webp");
  --saison-weihnachtsportal: url("festwelt-weihnachten.webp");
  --saison-wiesenportal: url("festwelt-wiese.webp");
}
body.saison-weihnachten .seitenkopf {
  background: linear-gradient(95deg, #1b2820fa, #332a21ed 65%, #452b24bf), var(--szene) right 24% / cover;
}
body.saison-weihnachten .gartenhero::before {
  background:
    linear-gradient(0deg, var(--wald), transparent 21%),
    linear-gradient(90deg, #1a271cf7, #202b20cf 34%, #412b1b45 67%, transparent 89%);
}
body.saison-weihnachten.gartenseite #inhalt > .waldpfad {
  background:
    linear-gradient(180deg, var(--waldlicht), transparent 29%, transparent 68%, var(--waldlicht)),
    url("festwelt-pfad.webp") center 55% / cover no-repeat;
}
body.saison-weihnachten :is(.portal, .weltbanner, .raster .karte, .galeriebild) {
  box-shadow: 0 12px 28px #150d0b48;
}
body.saison-weihnachten :is(.kartentext, .produktseite .produktkauf, .kaufseite .kaufflaeche) {
  background: #fbefd9;
  border-color: #ddbb82;
}
body.saison-weihnachten .gartengeschichte article {
  background: linear-gradient(140deg, #683e3229, #301d1866);
}
body.saison-weihnachten .soli-kartenmotiv { background-image: url("festwelt-pfad.webp"); }
@media (max-width: 670px) {
  body.saison-weihnachten .gartenhero::before {
    background:
      linear-gradient(0deg, var(--wald), transparent 18%),
      linear-gradient(#1b281fed, #30271eb2 36%, transparent 74%);
  }
}

body.saison-fruehling {
  --wald: #20352a;
  --waldlicht: #3c5140;
  --waldtext: #fff5e9;
  --waldgold: #f2d9d1;
  --waldkante: #e4bcac66;
  --akzent: #554d3e;
  --kaufpapier: #f9f1e7;
  --kartentext-hintergrund: #f8ece3;
  --produktpapier: #f9ede5;
  --kopfverlauf: linear-gradient(95deg, #21372bf9, #3c4b34d9 69%, #54483da8);
  --heroverlauf: linear-gradient(90deg, #21352bed, #253b30b5 33%, #6a523f20 65%, transparent 86%);
  --heroverlauf-mobil: linear-gradient(#20352af0, #344c39a6 38%, transparent 72%);
  --saison-gartenportal: url("fruehlingswelt-garten.webp");
  --saison-weihnachtsportal: url("fruehlingswelt-huette.webp");
  --saison-wiesenportal: url("fruehlingswelt-wiese.webp");
  --waldpfad: url("fruehlingswelt-pfad.webp");
  --nahszene: url("szene-fruehling-mobil.webp");
  --kartenmotiv: var(--nahszene);
  --nah-stand-x: 55%;
  --nah-stand-y: 82.19%;
}
body.saison-sommer {
  --wald: #263b24;
  --waldlicht: #505635;
  --waldtext: #fff7e5;
  --waldgold: #f3d394;
  --waldkante: #d8b36c73;
  --akzent: #485030;
  --kaufpapier: #fcf1d9;
  --kartentext-hintergrund: #faedcf;
  --produktpapier: #faf0d6;
  --kopfverlauf: linear-gradient(95deg, #263b24fc, #4f5136db 67%, #766438a9);
  --heroverlauf: linear-gradient(90deg, #263b25f4, #34482bbd 33%, #57452730 65%, transparent 87%);
  --heroverlauf-mobil: linear-gradient(#263b24f5, #424c2fba 36%, transparent 73%);
  --saison-gartenportal: url("sommerwelt-garten.webp");
  --saison-weihnachtsportal: url("sommerwelt-huette.webp");
  --saison-wiesenportal: url("sommerwelt-wiese.webp");
  --waldpfad: url("sommerwelt-pfad.webp");
  --nahszene: url("szene-sommer-mobil.webp");
  --kartenmotiv: var(--nahszene);
  --nah-stand-x: 53.03%;
  --nah-stand-y: 81.3%;
}
body.saison-herbst {
  --wald: #342820;
  --waldlicht: #533729;
  --waldtext: #fff1db;
  --waldgold: #f5cf9c;
  --waldkante: #edb16c69;
  --akzent: #6b3d27;
  --kaufpapier: #fbecd9;
  --kartentext-hintergrund: #f7e5cf;
  --produktpapier: #fae9d4;
  --kopfverlauf: linear-gradient(95deg, #342820fa, #4b3024ec 62%, #6a402ac9);
  --heroverlauf: linear-gradient(90deg, #30261df4, #3a2c23d7 32%, #64422929 68%, transparent 87%);
  --heroverlauf-mobil: linear-gradient(#342820f4, #493224ba 36%, transparent 74%);
  --saison-gartenportal: url("herbstwelt-garten.webp");
  --saison-weihnachtsportal: url("herbstwelt-huette.webp");
  --saison-wiesenportal: url("herbstwelt-wiese.webp");
  --waldpfad: url("herbstwelt-pfad.webp");
  --nahszene: url("szene-herbst-mobil.webp");
  --kartenmotiv: var(--nahszene);
  --nah-stand-x: 54.69%;
  --nah-stand-y: 83.17%;
}
.saison-fruehling .gartenhero { --stand-x: 75%; --stand-y: 81%; }
.saison-sommer .gartenhero { --stand-x: 73%; --stand-y: 77%; }
.saison-herbst .gartenhero { --stand-x: 75%; --stand-y: 82%; }

body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .gartenhero {
  --szene-mobil: var(--nahszene);
}
body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .soli-kartenmotiv {
  --karten-stand: var(--nah-stand-y);
  background-position: var(--nah-stand-x) var(--karten-stand);
}
body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .soli-kartenmotiv img,
body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .soli-kartenmotiv::before {
  left: var(--nah-stand-x);
}
body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .soli-szene {
  background: var(--wald) var(--nahszene) var(--nah-stand-x) var(--nah-stand-y) / cover;
}
body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .soli-szene img {
  top: var(--nah-stand-y);
  left: var(--nah-stand-x);
  bottom: auto;
  width: clamp(330px, 43vw, 540px);
  transform: translate(-43.1%, -86.5%);
}
body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .soli-szene::before {
  right: auto;
  bottom: auto;
  left: var(--nah-stand-x);
  top: var(--nah-stand-y);
  width: 24%;
  height: 5%;
  transform: translate(-50%, -35%);
}
@media (max-width: 670px) {
  :is(.saison-fruehling, .saison-sommer, .saison-herbst) .gartenhero {
    --stand-x: var(--nah-stand-x);
    --stand-y: var(--nah-stand-y);
  }
}

@media (max-width: 670px) {
  body:is(.saison-fruehling, .saison-sommer, .saison-herbst) .gartenhero:not(:has(.saisonmotiv)) .gartenfigur-soli .figurenbuehne {
    width: clamp(220px, 62vw, 320px);
  }
}

.saisonflug {
  position: fixed;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.saisonflug i {
  position: absolute;
  left: var(--start, 7%);
  top: -2rem;
  opacity: 0;
  animation: saisonwind var(--dauer, 15s) var(--versatz, -3s) linear infinite;
}
.saisonflug i:nth-child(2) { --start: 22%; --dauer: 19s; --versatz: -11s; }
.saisonflug i:nth-child(3) { --start: 40%; --dauer: 17s; --versatz: -6s; }
.saisonflug i:nth-child(4) { --start: 58%; --dauer: 21s; --versatz: -16s; }
.saisonflug i:nth-child(5) { --start: 76%; --dauer: 14s; --versatz: -3s; }
.saisonflug i:nth-child(6) { --start: -6%; --dauer: 18s; --versatz: -14s; }
.saisonflug i:nth-child(7) { --start: 34%; --dauer: 16s; --versatz: -12s; }
.saisonflug i:nth-child(8) { --start: 64%; --dauer: 20s; --versatz: -8s; }
.bluetenwind i {
  width: 10px;
  height: 15px;
  border-radius: 65% 38% 64% 35%;
  background: linear-gradient(135deg, #fff3e5, #e492ac 87%);
}
.bluetenwind i:nth-child(even) { width: 7px; height: 11px; }
.blaetterwind i {
  width: 12px;
  height: 17px;
  border-radius: 8% 72% 13% 72%;
  background: linear-gradient(50deg, #a34b26 44%, #e8a252 49%, #d08139 54%);
}
.blaetterwind i:nth-child(even) {
  width: 9px;
  height: 14px;
  background: linear-gradient(50deg, #c58236 44%, #f7c46c 49%, #b8622d 54%);
}
@keyframes saisonwind {
  0% { transform: translate(-5vw, 0) rotate(-24deg); opacity: 0; }
  14% { opacity: .75; }
  38% { transform: translate(8vw, 34vh) rotate(112deg); }
  68% { transform: translate(11vw, 67vh) rotate(248deg); }
  86% { opacity: .72; }
  100% { transform: translate(25vw, 105vh) rotate(385deg); opacity: 0; }
}
.wiesenflug i {
  top: var(--flughoehe, 35%);
  left: -2rem;
  font: normal 1.15rem/1 system-ui, sans-serif;
  animation-name: wiesenrunde;
}
.wiesenflug i:nth-child(2) { --flughoehe: 69%; --dauer: 21s; --versatz: -8s; font-size: .95rem; }
.wiesenflug i:nth-child(3) { --flughoehe: 57%; --dauer: 24s; --versatz: -16s; }
.wiesenflug i:nth-child(4) { --flughoehe: 24%; --dauer: 19s; --versatz: -12s; font-size: .95rem; }
@keyframes wiesenrunde {
  0% { transform: translate(0, 6vh) rotate(-12deg); opacity: 0; }
  17% { opacity: .82; }
  30% { transform: translate(31vw, -3vh) rotate(9deg); }
  62% { transform: translate(64vw, 3vh) rotate(-10deg); }
  88% { opacity: .78; }
  100% { transform: translate(110vw, -7vh) rotate(4deg); opacity: 0; }
}
@media (max-width: 670px) {
  .saisonflug i:nth-child(n+5) { display: none; }
  .wiesenflug i { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .saisonflug { display: none; }
}

.gartenfigur-sommer img {
  width: min(100%, 530px);
  max-height: 100%;
}
.verwandte-bahn {
  overflow-x: auto;
  padding-block-end: .6rem;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--linien) transparent;
}
.verwandte-bahn .raster {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: clamp(15rem, 34vw, 22rem);
}
.verwandte-bahn .karte { scroll-snap-align: start; }
body.saison-weihnachten .raster .karte {
  background: #2b3028;
  border-color: #86704e;
}
body.saison-weihnachten .raster .kartentext {
  background: #30352c;
  color: #f7eddb;
}
body.saison-weihnachten .raster .kartentext small { color: #e3c89e; }
body.saison-weihnachten .raster .platzhalter {
  background: #3d4033;
  color: #efe0c7;
}
body.saison-weihnachten .galeriebild { background: #293128; }

.weihnachtsduo {
  position: absolute;
  z-index: 1;
  right: clamp(1.25rem, 5vw, 5rem);
  bottom: 5%;
  width: min(50%, 40rem);
  height: 64%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 12px #182019a6);
  pointer-events: none;
}
@media (max-width: 670px) {
  .weihnachtsduo {
    right: 8%;
    bottom: 2.5%;
    width: 84%;
    height: 42%;
  }
}

.saison-weihnachten .gartenhero-weihnachtsszene {
  --szene: url("szene-weihnachten-mit-duo.webp");
  --szene-mobil: var(--szene);
  --stand-x: 75%;
  --stand-y: 82%;
}
@media (max-width: 670px) {
  .saison-weihnachten .gartenhero-weihnachtsszene { --stand-x: 92%; }
}