/* Alpine scenes for the German pages: winter snow (October to 20 March), spring meadows (rest of the year).
   Colours come from the season; everything is decoration (aria-hidden). */
/* mascot colours */
:root{--cat:#1E1814;--cat-w:#FFFDF8;--cat-line:#000}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--cat:#120E0B;--cat-line:#9C8A78}}
:root[data-theme="dark"]{--cat:#120E0B;--cat-line:#9C8A78}
:root,:root[data-season="winter"]{
  --a-ground:#FBFAF6; --a-ground-2:#E4EAEC; --a-far:#CBD6DB; --a-far-2:#B2C2CA; --a-cap:#FFFFFF;
  --a-tree:#2E4A3B; --a-tree-2:#3D5E4B; --a-wood:#8A5A3A; --a-roof:#5B3524; --a-window:#F2C14E; --a-smoke:#D8D2C9;
  --a-cable:#4B3A30; --a-flower-1:#FFFFFF; --a-flower-2:#F2C14E; --a-flower-3:#E9A3B4; --a-cow:#FFFDF8; --a-cow-2:#7A4A2E;
}
:root[data-season="spring"]{
  --a-ground:#B4CF86; --a-ground-2:#98B96A; --a-far:#BCC7CC; --a-far-2:#A2B1B9; --a-cap:#FFFFFF;
  --a-tree:#2E4A3B; --a-tree-2:#3D5E4B; --a-wood:#8A5A3A; --a-roof:#5B3524; --a-window:#F2C14E; --a-smoke:#D8D2C9;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]),:root:not([data-theme="light"])[data-season="winter"]{
    --a-ground:#6B6660; --a-ground-2:#5A5651; --a-far:#3E474B; --a-far-2:#343C40; --a-cap:#D9D4CC;
    --a-tree:#1D3326; --a-tree-2:#294536; --a-wood:#6E4A31; --a-roof:#3E2418; --a-window:#E3B25A; --a-smoke:#77706A; --a-cable:#C8B39E; --a-cow:#E8DFD3}
  :root:not([data-theme="light"])[data-season="spring"]{--a-ground:#4F6A3A; --a-ground-2:#435C31; --a-far:#3E474B; --a-far-2:#343C40}
}
:root[data-theme="dark"],:root[data-theme="dark"][data-season="winter"]{
  --a-ground:#6B6660; --a-ground-2:#5A5651; --a-far:#3E474B; --a-far-2:#343C40; --a-cap:#D9D4CC;
  --a-tree:#1D3326; --a-tree-2:#294536; --a-wood:#6E4A31; --a-roof:#3E2418; --a-window:#E3B25A; --a-smoke:#77706A; --a-cable:#C8B39E; --a-cow:#E8DFD3}
:root[data-theme="dark"][data-season="spring"]{--a-ground:#4F6A3A; --a-ground-2:#435C31}

.alpen{position:relative;display:block;width:100%;height:max(150px,22.6vw);overflow:hidden;pointer-events:none;--after:var(--paper);margin-bottom:-1px}
.alpen[data-after="paper-2"]{--after:var(--paper-2)}
.alpen[data-after="pine"]{--after:var(--pine)}
.alpen > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.alpen:not(.alpen-hero)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--after)}   /* hides the hairline seam under the torn edge */
.alpen-hero{position:absolute;left:0;right:0;bottom:0;height:max(70px,10.9vw);z-index:0}
.hero.has-alpen{padding-bottom:calc(clamp(40px,6vw,80px) + max(50px,9vw))}

/* the scene height follows the width (viewBox 1200 x 270), so wide screens never cut the mountains off */
/* small life in the scenes */
.a-smoke circle{transform-box:fill-box;transform-origin:center;animation:a-smoke 5.5s linear infinite;opacity:0}
.a-smoke circle:nth-child(2){animation-delay:1.8s}.a-smoke circle:nth-child(3){animation-delay:3.6s}
@keyframes a-smoke{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.85}100%{transform:translate(-18px,-40px) scale(1.7);opacity:0}}
.a-window{animation:a-glow 4s ease-in-out infinite alternate}
@keyframes a-glow{from{opacity:.75}to{opacity:1}}
.a-flag{transform-box:fill-box;transform-origin:left center;animation:a-flag 2.4s ease-in-out infinite alternate}
@keyframes a-flag{from{transform:skewY(-4deg) scaleX(.94)}to{transform:skewY(3deg) scaleX(1)}}
.a-tail{transform-box:fill-box;transform-origin:top center;animation:a-tail 1.6s ease-in-out infinite alternate}
@keyframes a-tail{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.a-bell{transform-box:fill-box;transform-origin:top center;animation:a-tail 1.1s ease-in-out infinite alternate}
.a-pop{transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.a-pop:not(.up){transform:translateY(22px)}
.a-flake{animation:a-fall 9s linear infinite}
@keyframes a-fall{from{transform:translateY(-30px)}to{transform:translateY(290px)}}
@media (prefers-reduced-motion:reduce){.a-smoke circle,.a-window,.a-flag,.a-tail,.a-bell,.a-flake{animation:none}.a-smoke circle{opacity:.6}.a-pop{transition:none}}

/* German page: "Warum nicht einfach aus dem Supermarkt?" */
#unterschied{padding-bottom:0}
#unterschied .lede-sm{margin-top:12px;max-width:60ch;color:var(--ink-soft)}
.diff{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:32px}
.diff-card{background:var(--card);padding:22px 22px 24px;transform:rotate(var(--r,0deg));box-shadow:3px 6px 16px -10px rgba(58,42,32,.45);border-top:6px solid var(--red)}
.diff-card:nth-child(2){border-top-color:var(--gold)}.diff-card:nth-child(3){border-top-color:var(--pine-2)}
.diff-card svg{width:64px;height:48px;color:var(--ink);display:block}
.diff-card h3{margin-top:12px;font-size:1.25rem}
.diff-card p{margin-top:6px;color:var(--ink-soft);font-size:.98rem}
.diff-note{margin-top:28px;font-size:1.2rem;max-width:70ch}
@media (max-width:860px){.diff{grid-template-columns:minmax(0,1fr)}}

/* German page: Swiss Chocolate Grand Tour journey */
.reise-lede{margin-top:14px;max-width:62ch}
.reise{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,56px);align-items:center;margin-top:28px}
.reise-map{display:block}
.reise .route{opacity:.35}
.reise .route-draw{fill:none;stroke:var(--red);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.reise .stations circle{fill:var(--card);stroke:var(--c);stroke-width:3;transition:fill .3s,r .3s}
.reise .stations circle.on{fill:var(--c);r:8}
.reise .pass path{fill:var(--snow);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.reise .pass-name{font-size:13px;fill:var(--ink-soft)}
.etappen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.etappen li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;background:var(--card);padding:10px 14px;box-shadow:2px 4px 12px -8px rgba(58,42,32,.45);opacity:.55;transition:opacity .4s,transform .4s}
.etappen li.on{opacity:1;transform:translateX(-4px)}
.etappen .stamp-no{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-hand);font-weight:700;font-size:1.15rem;color:var(--ink-soft);border:2px dashed var(--line);transition:all .4s}
.etappen li.on .stamp-no{color:var(--red);border:2.5px solid var(--red);transform:rotate(-12deg)}
.etappen b{font-family:var(--f-display);font-weight:400;font-size:1.15rem}
.etappen small{color:var(--ink-soft);font-family:var(--f-hand);font-size:.95rem;margin-left:4px}
.etappen span:not(.stamp-no){display:block;font-size:.92rem;color:var(--ink-soft);line-height:1.4}
.reise-note{margin-top:18px}
.notebook .etappe{display:block;font-family:var(--f-hand);font-size:.95rem;color:var(--red);line-height:1.1}
@media (max-width:860px){.reise{grid-template-columns:minmax(0,1fr)}.etappen li.on{transform:none}}
@media (prefers-reduced-motion:reduce){.etappen li,.etappen .stamp-no{transition:none}}

/* German hero: full-width alpine stage with the open Grand Tour box */
:root,:root[data-season="winter"]{--a-sky1:#C9DAE3;--a-sky2:#F6F2EA;--a-road:#9AA2A4;--a-sun:#F2C14E}
:root[data-season="spring"]{--a-sky1:#B9D6E6;--a-sky2:#F5EEDF;--a-road:#8B7B6B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--a-sky1:#10171C;--a-sky2:#2A2019;--a-road:#4F4741;--a-sun:#E9DFC8}}
:root[data-theme="dark"]{--a-sky1:#10171C;--a-sky2:#2A2019;--a-road:#4F4741;--a-sun:#E9DFC8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gt-stage{--road-h:118px;padding:0;min-height:clamp(660px,calc(100svh - 104px),940px);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--a-sky1),var(--a-sky2) 62%)}
.gt-scene{position:absolute;inset:0;overflow:hidden}
.gt-l{position:absolute;inset:-30px -60px 0;transform:translate3d(calc(var(--mx,0) * var(--m) * -70px),calc(var(--sy,0) * var(--d) * 1px),0);will-change:transform}
.gt-l svg{position:absolute;inset:0;width:100%;height:100%;display:block;animation:gt-rise 1.4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .16s)}
@keyframes gt-rise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
.gt-stage canvas{z-index:3}
.gt-stage-grid{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(16px,3vw,40px);align-items:center;padding-block:clamp(28px,4vw,56px) calc(var(--road-h) + 6px)}
.gt-copy{position:relative}
.gt-copy::before{content:"";position:absolute;inset:-12% -18% -12% -30%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--a-sky2) 82%,transparent),transparent);pointer-events:none}
.gt-copy > *{animation:gt-up .9s cubic-bezier(.2,.7,.2,1) both}
.gt-copy > :nth-child(2){animation-delay:.12s}.gt-copy > :nth-child(3){animation-delay:.24s}.gt-copy > :nth-child(4){animation-delay:.36s}.gt-copy > :nth-child(5){animation-delay:.48s}
@keyframes gt-up{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.gt-kicker{display:inline-flex;white-space:nowrap;align-items:center;gap:10px;margin:0;font-family:var(--f-body);font-weight:600;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding-bottom:8px;border-bottom:2px solid var(--gold)}
.gt-kicker svg{width:20px;height:20px;flex:none}
.gt-stage h1{margin-top:18px;font-size:clamp(3rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.01em}
.gt-sub{margin-top:20px;font-size:clamp(1.08rem,1.4vw,1.25rem);max-width:34em;line-height:1.5}
.gt-sub b{font-family:var(--f-display);font-weight:400;color:var(--red)}
.gt-stage .ctas{margin-top:28px}
.gt-trust{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.95rem;color:var(--ink-soft)}
.gt-trust li{display:flex;align-items:center;gap:7px}
.gt-trust svg{width:17px;height:17px;fill:var(--gold);flex:none}
.gt-box{margin:0 0 calc(-1 * var(--road-h) + 62px);position:relative;align-self:end;justify-self:center;width:100%;max-width:640px;perspective:1400px;animation:gt-drop 1.3s .35s cubic-bezier(.2,.8,.25,1.05) both}
@keyframes gt-drop{from{transform:translateY(-60px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.gt-box-svg{display:block;width:100%;height:auto;overflow:visible;transform:rotateY(calc(var(--mx,0) * 5deg)) rotateX(calc(var(--my,0) * -3deg));transition:transform .5s ease-out}
.gt-num{font-family:var(--f-display);font-size:40px}
.gt-bname{font-family:var(--f-display);font-size:15px}
.gt-btown{font-family:var(--f-hand);font-size:13px}
.gt-band{font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:3px;fill:#fff}
.gt-lid-small{font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:5px}
.gt-lid-big{font-family:var(--f-display);font-size:52px;letter-spacing:6px}
.gt-lid-hand{font-family:var(--f-hand);font-size:17px}
.gt-lid-ed{font-family:var(--f-body);font-weight:600;font-size:11px;letter-spacing:4px}
.gt-seal-t{font-family:var(--f-body);font-weight:700;font-size:8.6px;letter-spacing:1.6px}
:root[data-season="spring"] .gt-lid-snow{display:none}
.gt-bar{animation:gt-bar .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(1.1s + var(--i) * .13s)}
@keyframes gt-bar{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}
.gt-shine{opacity:0;transform-box:fill-box}
.gt-bar.lit .gt-shine{animation:gt-shine 1.1s ease-out}
@keyframes gt-shine{0%{opacity:0;transform:translateX(-60%)}30%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
.gt-seal{animation:gt-seal 1s 1.9s cubic-bezier(.3,1.6,.5,1) both}
.gt-seal{transform-origin:0 0}
@keyframes gt-seal{from{opacity:0;transform:scale(1.8) rotate(-40deg)}}
.gt-road{position:absolute;left:0;right:0;bottom:0;height:var(--road-h);z-index:2}
.gt-road svg{display:block;width:100%;height:100%;overflow:visible}
.gt-road .rd{fill:none;stroke:var(--a-road);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.gt-road .rd-mid{fill:none;stroke:var(--a-ground);stroke-width:1.6;stroke-dasharray:7 8;opacity:.9}
.gt-road .st circle{fill:var(--card);stroke:var(--c);stroke-width:3;transition:fill .35s,transform .35s;transform-box:fill-box;transform-origin:center}
.gt-road .st.on circle{fill:var(--c);transform:scale(1.15)}
.gt-road .st text{font-family:var(--f-hand);fill:var(--ink)}
.gt-road .st .n{font-size:14px;font-weight:700;fill:var(--ink-soft);transition:fill .35s}
.gt-road .st.on .n{fill:#fff}
.gt-road .st .t{font-size:15px}
.gt-road .pass{font-family:var(--f-hand);font-size:12.5px;fill:var(--ink-soft)}
.gt-road .torn{fill:var(--paper-2)}
html[lang="de"] .gt-road .torn{fill:var(--paper)}   /* German page: the parcels (plain paper) follow the hero */
@media (max-width:980px){.gt-stage-grid{grid-template-columns:minmax(0,1fr);gap:0;align-content:start}.gt-copy{display:contents}.gt-stage .gt-kicker{order:1;justify-self:start}.gt-stage h1{order:2}.gt-box{order:3;max-width:520px;margin:10px auto 4px}.gt-sub{order:4}.gt-stage .ctas{order:5}.gt-trust{order:6}}
@media (max-width:560px){.gt-stage{--road-h:104px}.gt-kicker{white-space:normal;font-size:.74rem;letter-spacing:.12em}.gt-road .st .t{font-size:12.5px}.gt-road .pass{display:none}.gt-trust{font-size:.9rem}}
@media (prefers-reduced-motion:reduce){.gt-l svg,.gt-copy > *,.gt-box,.gt-bar,.gt-seal{animation:none}.gt-l{transform:none}.gt-box-svg{transform:none}}

/* "Für wen?": example gift cards */
.anlass-lede{margin-top:12px;max-width:56ch;color:var(--ink-soft)}
.gcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:36px}
.gcard{margin:0;position:relative;background:var(--card);padding:26px 22px 24px;transform:rotate(var(--r,0deg));transition:transform .35s ease,box-shadow .35s ease;
  box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--gold),4px 10px 24px -12px rgba(58,42,32,.5)}
.gcard:hover{transform:rotate(0deg) translateY(-6px);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--gold),6px 18px 30px -14px rgba(58,42,32,.55)}
.gcard .pm{position:absolute;top:14px;right:12px;width:96px;height:52px;color:var(--red);opacity:.55;transform:rotate(-8deg)}
.gcard .pm text{font-family:var(--f-body);font-weight:600}
.gcard .occ{margin:0;font-family:var(--f-display);font-size:1.5rem;line-height:1.1;color:var(--red);max-width:9ch}
.gcard .who{margin:8px 0 0;font-size:.95rem;color:var(--ink-soft);min-height:2.8em}
.gcard .msg{margin:18px 0 0;padding:14px 0 0;border:0;border-top:1.5px dashed var(--line);background:none;border-radius:0;quotes:none;font-family:var(--f-hand);font-size:1.3rem;line-height:1.4;color:var(--ink)}
.gcard .msg::before,.gcard .msg::after{content:none}
.gcard .msg p{margin:0}
.gcard .msg .sig{margin-top:8px;text-align:right;color:var(--ink-soft)}
.gcard .msg .sig::before{content:"— "}
.anlass-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.anlass-cta p{margin:0;max-width:52ch}
@media (max-width:1020px){.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gcards{grid-template-columns:minmax(0,1fr);gap:20px}.gcard .occ{max-width:none}}
@media (prefers-reduced-motion:reduce){.gcard{transition:none}}

/* "Manufaktur statt Supermarkt": illustrated workshop, bean to bar */
.ws-sec{padding-block:clamp(56px,7vw,96px) clamp(48px,6vw,80px)}
.ws-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:clamp(12px,2.5vw,36px);align-items:center;padding-left:max(18px,calc((100vw - 1140px) / 2 + 18px))}
.ws-head h2{margin-top:18px;font-size:clamp(2rem,3.3vw,3.2rem);line-height:1.06}
.ws-lede{margin-top:16px;max-width:40ch;font-size:1.12rem;color:var(--ink-soft)}
.ws-scene{position:relative;overflow:hidden}
.ws-scene > svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ws-scene{aspect-ratio:1400/990;height:auto}
@media (max-width:960px){.ws-grid{grid-template-columns:minmax(0,1fr);padding-left:0}.ws-head{padding-inline:18px;max-width:1140px}.ws-scene{margin-top:20px}}
@media (max-width:700px){.ws-scene{aspect-ratio:auto;height:440px}}
.ws-sack{font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:3px;fill:#6B4A26}
.ws-spin{transform-box:fill-box;transform-origin:center;animation:ws-spin 4s linear infinite}
@keyframes ws-spin{to{transform:rotate(360deg)}}
.ws-swirl{animation:ws-spin 6s linear infinite}
.ws-glow{animation:ws-glow 1.6s ease-in-out infinite alternate}
.ws-glow2{animation:ws-glow 3s ease-in-out infinite alternate}
@keyframes ws-glow{from{opacity:.4}to{opacity:1}}
.ws-led{animation:ws-led 1.2s steps(2) infinite}
@keyframes ws-led{50%{opacity:.25}}
.ws-beans ellipse{animation:ws-drop 1.35s ease-in infinite;opacity:0}
@keyframes ws-drop{0%{transform:translateY(-10px);opacity:0}20%{opacity:1}85%{opacity:1}100%{transform:translateY(22px);opacity:0}}
.ws-bob{animation:ws-bob 1.6s ease-in-out infinite alternate}
@keyframes ws-bob{to{transform:translateY(-1.5px)}}
.ws-temper,.ws-pack{transform-box:fill-box;transform-origin:0 0}
.ws-temper{animation:ws-temper 1.8s ease-in-out infinite alternate}
@keyframes ws-temper{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.ws-pack{animation:ws-pack 1.4s ease-in-out infinite alternate}
@keyframes ws-pack{from{transform:rotate(-30deg)}to{transform:rotate(10deg)}}
.ws-scoop{transform-box:fill-box;transform-origin:100% 0;animation:ws-scoop 2.2s ease-in-out infinite}
@keyframes ws-scoop{0%,100%{transform:rotate(0)}40%{transform:rotate(-28deg)}60%{transform:rotate(-28deg)}}
.ws-puddle{transform-box:fill-box;transform-origin:center;animation:ws-puddle 1.8s ease-in-out infinite alternate}
@keyframes ws-puddle{from{transform:scaleX(.8)}to{transform:scaleX(1.1)}}
.ws-belt > g{animation:ws-belt 9s linear infinite}
@keyframes ws-belt{0%{transform:translate(0,0);opacity:0}6%{opacity:1}92%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.ws-curtain path{stroke-dasharray:4 3;animation:ws-flow .5s linear infinite}
@keyframes ws-flow{to{stroke-dashoffset:-7}}
.ws-walk{animation:ws-walk 14s ease-in-out infinite}
@keyframes ws-walk{0%,4%{transform:translate(0,0)}46%,54%{transform:translate(var(--wx),var(--wy))}96%,100%{transform:translate(0,0)}}
.ws-face{transform-box:fill-box;transform-origin:center;animation:ws-face 14s steps(1) infinite}
@keyframes ws-face{0%{transform:scaleX(-1)}50%{transform:scaleX(1)}}
.ws-legs rect{transform-box:fill-box;transform-origin:50% 0;animation:ws-leg .45s ease-in-out infinite alternate}
.ws-legs .lg2{animation-direction:alternate-reverse}
@keyframes ws-leg{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.ws-tail{transform-box:fill-box;transform-origin:100% 100%;animation:ws-tail 2.4s ease-in-out infinite alternate}
@keyframes ws-tail{from{transform:rotate(-10deg)}to{transform:rotate(22deg)}}
.ws-zzz text,.ws-notes text{font-family:var(--f-hand);font-weight:700;font-size:15px;fill:var(--ink-soft);opacity:0;animation:ws-float 3.3s ease-out infinite}
.ws-notes text{font-size:16px;fill:#B23A36}
@keyframes ws-float{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(14px,-34px);opacity:0}}
.ws-leaves path{transform-origin:0 -26px;animation:ws-leaf 3.4s ease-in-out infinite alternate}
@keyframes ws-leaf{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.ws-pend{transform-origin:0 .3px;animation:ws-pend 1s ease-in-out infinite alternate}
@keyframes ws-pend{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
.ws-flag{transform-box:fill-box;transform-origin:50% 100%;animation:ws-flag 2.6s ease-in-out infinite alternate}
@keyframes ws-flag{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.ws-dot{animation:ws-dot 3s ease-in-out infinite}
@keyframes ws-dot{0%,100%{opacity:.35}15%{opacity:1}}
.ws-snow{animation:ws-snow 6s linear infinite}
@keyframes ws-snow{from{transform:translateY(-10px)}to{transform:translateY(110px)}}
.ws-bird{animation:ws-bird 12s linear infinite}
@keyframes ws-bird{0%{transform:translate(-30px,10px)}50%{transform:translate(90px,-6px)}100%{transform:translate(220px,12px)}}
.ws-bubble{transform-box:fill-box;transform-origin:center;animation:ws-bubble 1.5s ease-out infinite;opacity:0}
@keyframes ws-bubble{0%{transform:scale(.3);opacity:0}40%{opacity:1}100%{transform:translateY(-5px) scale(1.2);opacity:0}}
.ws-box{animation:ws-boxb 1.4s ease-in-out infinite alternate}
@keyframes ws-boxb{to{transform:translateY(-2px)}}
.ws-lamp{animation:ws-lamp 4s ease-in-out infinite alternate}
@keyframes ws-lamp{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.ws-step circle{fill:var(--card);stroke:#4A2919;stroke-width:.08;transition:fill .4s}
.ws-step.on circle{fill:#4A2919}
.ws-step .n{font-family:var(--f-hand);font-weight:700;font-size:21px;fill:var(--ink-soft);transition:fill .4s;pointer-events:none}
.ws-step.on .n{fill:#FFF6EA}
.ws-step .t{font-family:var(--f-hand);font-size:24px;fill:var(--ink);paint-order:stroke;stroke:var(--paper-2);stroke-width:4px;stroke-linejoin:round}
.ws-points{list-style:none;margin:clamp(32px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);counter-reset:ws}
.ws-points li{counter-increment:ws;border-top:2px solid var(--gold);padding-top:16px}
.ws-points li::before{content:"0" counter(ws);display:block;font-family:var(--f-display);font-size:1.1rem;color:var(--red)}
.ws-points b{display:block;margin-top:6px;font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1.2}
.ws-points span{display:block;margin-top:8px;color:var(--ink-soft);line-height:1.55}
@media (max-width:860px){.ws-points{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ws-scene *{animation:none!important}.ws-beans ellipse,.ws-bubble{opacity:0}}

/* the mascot cat, a different pose in every section */
.cat{position:absolute;z-index:4;pointer-events:none;display:block}
.cat svg{display:block;width:100%;height:auto;overflow:visible}
.cat-eyes{animation:cat-blink 5.5s infinite}
@keyframes cat-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.cat-ear{animation:cat-ear 7s infinite}
@keyframes cat-ear{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-14deg)}92%{transform:rotate(0)}94%{transform:rotate(-10deg)}}
.cat-tail{animation:cat-tail 2.8s ease-in-out infinite alternate}
@keyframes cat-tail{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}
.cat-breathe{animation:cat-breathe 3.4s ease-in-out infinite alternate}
@keyframes cat-breathe{to{transform:scale(1.03,1.06)}}
.cat-wave{animation:cat-wave .9s ease-in-out infinite alternate}
@keyframes cat-wave{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.cat-peek{animation:cat-peek 6s ease-in-out infinite}
@keyframes cat-peek{0%,100%{transform:translateY(10px)}20%,70%{transform:translateY(0)}}
.cat-stretch{animation:cat-stretch 4.5s ease-in-out infinite alternate}
@keyframes cat-stretch{to{transform:scaleX(1.06)}}
.cat-legs .cl-a{animation:cat-leg .5s ease-in-out infinite alternate}
.cat-legs .cl-b{animation:cat-leg .5s ease-in-out infinite alternate-reverse}
@keyframes cat-leg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
.cat-q{font-family:var(--f-display);font-size:26px;fill:var(--red);animation:cat-q 2.4s ease-in-out infinite}
@keyframes cat-q{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(-6px);opacity:1}}
.cat-print{fill:var(--cat);opacity:0;animation:cat-print 6s ease-in-out infinite}
@keyframes cat-print{0%{opacity:0}8%,60%{opacity:.35}80%,100%{opacity:0}}
.cat .ws-zzz text{font-size:16px}
/* placements */
.cat-hero{left:1%;bottom:2%;width:clamp(58px,7.5vw,92px)}
.cat-parcels{top:-58px;right:34px;width:88px}
.cat-anlass{top:-52px;right:-10px;width:104px}
#route,#how,#companies,#news{position:relative}
.cat-route{bottom:10px;left:0;width:112px;animation:cat-cross 46s linear infinite}
@keyframes cat-cross{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 20px))}}
.cat-inside{top:-50px;right:40px;width:120px}
.cat-letter{top:-44px;right:-34px;width:104px}
.cat-how{top:clamp(40px,6vw,80px);right:max(18px,calc((100vw - 1140px) / 2 + 18px));width:96px}
.cat-companies{top:clamp(40px,6vw,80px);right:max(18px,calc((100vw - 1140px) / 2 + 18px));width:86px}
#shipping .wrap{position:relative}
.cat-shipping{top:-6px;right:24px;width:84px}
.cat.cat-faq{position:relative;width:110px;margin-top:22px}
.cat-news{bottom:6px;left:max(18px,calc((100vw - 1140px) / 2 + 18px));width:min(420px,70vw)}
@media (max-width:860px){.cat-how,.cat-companies{width:64px;top:28px}.cat-inside{width:90px;top:-38px}.cat-letter{width:80px;right:-8px;top:-36px}.cat-parcels{width:70px;top:-46px}.cat-anlass{width:84px;top:-42px}.cat-shipping{width:60px;top:-4px}}
@media (prefers-reduced-motion:reduce){.cat *,.cat{animation:none!important}.cat-print{opacity:.35}.cat-route{left:40%}}

/* "Die ganze Schweiz in einer Box": four regions */
#sprachen{padding-block:clamp(64px,8vw,110px)}
.sp-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.sp-head h2{margin-top:18px;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.05}
.sp-cycle{position:relative;margin:10px 0 0;height:clamp(3.4rem,7vw,5.6rem);width:100%;font-family:var(--f-display);font-size:clamp(2.8rem,7vw,5.4rem);line-height:1}
.sp-cycle span{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(40%) rotateX(-70deg);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.9,.3,1.2)}
.sp-cycle span[data-r="de"]{color:var(--de)}.sp-cycle span[data-r="fr"]{color:var(--fr)}.sp-cycle span[data-r="it"]{color:var(--it)}.sp-cycle span[data-r="rm"]{color:var(--rm)}
.sp-cycle span.on{opacity:1;transform:none}
.sp-map{position:relative;max-width:1110px;margin:clamp(12px,2vw,28px) auto 0}
.sp-map svg{display:block;width:100%;height:auto;overflow:visible}
.sp-ghost polygon{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 5}
.sp-move{transition:none;will-change:transform}
.sp-land{fill:var(--c);fill-opacity:.82;stroke:var(--paper);stroke-width:3;stroke-linejoin:round;transition:fill-opacity .4s,filter .4s}
.sp-piece.hl .sp-land{fill-opacity:1;filter:drop-shadow(0 6px 10px rgba(58,42,32,.35))}
.sp-pop{opacity:0;transform:scale(.4) translateY(10px);transition:opacity .4s,transform .55s cubic-bezier(.3,1.6,.5,1)}
.sp-piece.in .sp-pop{opacity:1;transform:none}
.sp-piece.hl .sp-pop{animation:sp-bob 1.2s ease-in-out infinite alternate}
@keyframes sp-bob{to{transform:translateY(-6px)}}
.sp-greet{font-family:var(--f-hand);font-weight:700;font-size:22px;fill:#FFF8EE;paint-order:stroke;stroke:rgba(40,25,15,.55);stroke-width:4px;stroke-linejoin:round}
.sp-cities circle{fill:var(--ink)}
.sp-cities text{font-family:var(--f-hand);font-size:14px;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.sp-label .sp-line,.sp-label .sp-tip{fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sp-label .sp-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.5,0,.3,1) .45s}
.sp-label .sp-tip{opacity:0;transition:opacity .2s 1.2s}
.sp-name{font-family:var(--f-hand);font-weight:700;fill:var(--c)}
.sp-sub{font-family:var(--f-hand);fill:var(--ink-soft)}
.sp-label text{clip-path:inset(-20% 100% -20% 0);transition:clip-path .7s steps(14,end)}
.sp-label .sp-sub{transition-delay:.35s}
.sp-label.in .sp-line{stroke-dashoffset:0}
.sp-label.in .sp-tip{opacity:1}
.sp-label.in text{clip-path:inset(-20% -2% -20% 0)}
.sp-label>g{transition:transform .5s cubic-bezier(.3,1.6,.5,1);transform-box:fill-box;transform-origin:center}
.sp-label.hl .sp-name{animation:sp-wig 1.2s ease-in-out infinite alternate}
@keyframes sp-wig{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg) translateY(-3px)}}
.sp-label .sp-name{transform-box:fill-box;transform-origin:center}
.sp-note{text-align:center;margin:clamp(24px,3vw,40px) auto 0;font-size:1.1rem;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.sp-cycle span,.sp-pop,.sp-label .sp-line,.sp-label .sp-tip,.sp-label text{transition:none}.sp-piece.hl .sp-pop,.sp-label.hl .sp-name{animation:none}}