@font-face{font-family:"Zalando Sans Expanded";src:url(/werk/schrift/zalando-sans-expanded-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url(/werk/schrift/zalando-sans-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url(/werk/schrift/zalando-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url(/werk/schrift/zalando-sans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Zalando Sans";src:url(/werk/schrift/zalando-sans-700-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
--farbe-feld:#1C0C10;
--farbe-rahmen:#261217;
--farbe-zelle:#311820;
--farbe-zelle-hoch:#3D1E27;
--farbe-funke:#FFAAA6;
--farbe-funke-hell:#FFC2BE;
--farbe-creme:#FCF5D2;
--farbe-sand:#F6D3AD;
--farbe-rose:#EFC0AE;
--farbe-matt:#C99A8E;
--farbe-pfirsich:#FFD7B0;
--farbe-rosa:#F9B8B0;
--farbe-rosa-tief:#7A3A40;
--schrift-weit:"Zalando Sans Expanded","Zalando Sans",system-ui,sans-serif;
--schrift-text:"Zalando Sans",system-ui,sans-serif;
--groesse-titel:clamp(2.5rem,1.4rem + 4.6vw,5.75rem);
--groesse-zwischentitel:clamp(1.75rem,1.3rem + 1.9vw,2.875rem);
--groesse-teiltitel:clamp(1.25rem,1.1rem + .6vw,1.625rem);
--groesse-lead:clamp(1.0625rem,1rem + .3vw,1.25rem);
--groesse-text:1.0625rem;
--groesse-klein:1rem;
--radius-kadr:6px;
--radius-knopf:4px;
--radius-marke:2px;
--rand-seite:clamp(1rem,4vw,2.5rem);
--breite-seite:72rem;
--abstand-block:clamp(4.5rem,3rem + 6vw,9rem);
--gang:cubic-bezier(.22,.7,.2,1)
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--farbe-feld);color:var(--farbe-rose);font:600 var(--groesse-text)/1.6 var(--schrift-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
b{font-weight:700;color:var(--farbe-creme)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--farbe-sand);outline-offset:3px}
::selection{background:var(--farbe-funke);color:var(--farbe-feld)}

.seiten-rahmen{width:min(100% - 2 * var(--rand-seite),var(--breite-seite));margin-inline:auto}
.screen-reader__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

.text-titel{font:800 var(--groesse-titel)/.98 var(--schrift-weit);text-transform:uppercase;letter-spacing:-.01em;color:var(--farbe-creme)}
.text-titel--mittel{font-size:clamp(2rem,1.3rem + 3vw,4rem)}
.text-zwischentitel{font:700 var(--groesse-zwischentitel)/1.08 var(--schrift-text);letter-spacing:-.015em;color:var(--farbe-creme)}
.text-zwischentitel__kursiv{display:block;font-style:italic;color:var(--farbe-sand)}
.text-teiltitel{font:700 var(--groesse-teiltitel)/1.2 var(--schrift-text);color:var(--farbe-creme)}
.text-lead{font:600 var(--groesse-lead)/1.55 var(--schrift-text);color:var(--farbe-rose);max-width:40rem}
.text-fliess{font:500 var(--groesse-text)/1.65 var(--schrift-text);color:var(--farbe-rose);max-width:38rem}
.text-fliess a,.text-lead a{color:var(--farbe-creme);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--farbe-matt)}
.text-fliess a:hover,.text-lead a:hover{text-decoration-color:var(--farbe-sand)}
.text-klein{font:600 var(--groesse-klein)/1.5 var(--schrift-text);color:var(--farbe-matt)}

.aktion-knopf{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.8em 1.6em;border:2px solid var(--farbe-zelle-hoch);border-radius:var(--radius-knopf);background:var(--farbe-rahmen);color:var(--farbe-creme);font:700 1.0625rem/1.2 var(--schrift-text);white-space:nowrap;cursor:pointer;overflow:hidden;isolation:isolate;transition:background-color .4s ease,border-color .4s ease,color .4s ease}
.aktion-knopf::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(252,245,210,.2) 0%,rgba(252,245,210,0) 70%);transform:scale(0);transition:transform .5s ease;pointer-events:none}
.aktion-knopf:hover{background:var(--farbe-zelle);border-color:var(--farbe-matt)}
.aktion-knopf:hover::after{transform:scale(4)}
.aktion-knopf--funke{background:var(--farbe-funke);border-color:var(--farbe-funke);color:var(--farbe-feld)}
.aktion-knopf--funke::after{background:radial-gradient(circle,rgba(255,250,240,.55) 0%,rgba(255,250,240,0) 70%)}
.aktion-knopf--funke:hover{background:var(--farbe-funke-hell);border-color:var(--farbe-funke-hell);color:var(--farbe-feld)}
.aktion-knopf--klein{padding:.55em 1.1em;font-size:1rem}
.aktion-knopf--gross{padding:1em 2.1em;font-size:1.1875rem}
.aktion-knopf--mit-zeichen{padding-inline-end:1.25em}
.aktion-knopf__zeichen{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.klammer-link{display:inline-flex;align-items:baseline;gap:.55em;font:700 1.0625rem/1.3 var(--schrift-text);color:var(--farbe-creme);text-transform:lowercase;transition:color .3s ease,gap .3s var(--gang)}
.klammer-link::before{content:"["}
.klammer-link::after{content:"]"}
.klammer-link::before,.klammer-link::after{color:var(--farbe-sand);font-weight:600}
.klammer-link:hover{gap:.9em;color:var(--farbe-sand)}

.spiel-rahmen{position:relative;display:block;overflow:hidden;border-radius:var(--radius-kadr);background:var(--farbe-funke);aspect-ratio:4/3}
.spiel-rahmen--breit{aspect-ratio:16/9}
.spiel-rahmen__bild{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--gang)}
.spiel-rahmen:hover .spiel-rahmen__bild{transform:scale(1.035)}

.marke-quadrat{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;border-radius:var(--radius-marke);background:var(--farbe-funke);color:var(--farbe-feld)}
.marke-quadrat__zeichen{width:1.375rem;height:1.375rem;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


.ton-pille{display:inline-flex;align-items:center;padding:.5em 1em;border-radius:var(--radius-kadr);background:var(--farbe-zelle);color:var(--farbe-rose);font:600 1rem/1.3 var(--schrift-text)}



@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}