/* Kokon Webseite, Design "Spielabend" (K1), Stand 24.10.2026
   Farben und Schriften wie in der App (app/src/styles/tokens.css) */
@font-face{font-family:"Fraunces";src:url("fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Karla";src:url("fonts/karla-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F7F2EA;--surface:#FFFDF8;--ink:#2A2420;--muted:#675C53;--line:#E2D8CA;
  --terra:#B34A35;--terra-text:#9E3F2C;
  --peach:#F8DCC8;--sky:#D6E6F0;--sage:#DCE6D3;--rose:#F3D6DA;--sand:#EFE3CC;--lilac:#E3DCEE;--mint:#D3EBE2;
  --shadow:0 2px 4px rgba(60,40,25,.06),0 6px 16px rgba(60,40,25,.09);
  --back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none' stroke='%232A2420' stroke-opacity='.16' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 7c6-4 16-4 22 0M3 16c8-5 18-5 26 0M5 25c6-4 16-4 22 0'/%3E%3C/svg%3E");
  --display:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 "Karla",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img{display:block;max-width:100%}
a{color:var(--terra-text)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
h1,h2,h3,.wm,.score{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-weight:600;letter-spacing:-.005em}
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.06;margin:0 0 14px}
h2{font-size:clamp(26px,3.2vw,36px);line-height:1.12;margin:0 0 14px}
h3{font-size:20px;line-height:1.2;margin:0 0 4px}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:20}
.skip:focus{left:8px}

/* Kopf */
.top .wrap{display:flex;align-items:center;gap:10px;min-height:68px}
.top .home{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.top .wm{font-size:26px}
.top .kokon-maskottchen{width:36px;height:36px}
.top .lang{margin-left:auto;color:var(--ink);text-decoration:none;font-weight:700;font-size:14px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px}

/* Start */
.hero{padding:8px 0 40px;overflow-x:clip}
.hero .wrap{display:grid;gap:12px;text-align:center}
.fan{position:relative;height:290px;margin:4px auto 6px;width:100%;max-width:340px}
.fan .c{position:absolute;top:52px;left:50%;width:138px;aspect-ratio:3/4;border-radius:12px;border:4px solid var(--surface);overflow:hidden;background:var(--sand) var(--back);box-shadow:0 4px 8px rgba(60,40,25,.08),0 16px 32px rgba(60,40,25,.16)}
.fan .c img{width:100%;height:100%;object-fit:cover}
.fan .c1{transform:translateX(-122%) rotate(-12deg) translateY(18px)}
.fan .c2{transform:translateX(-50%);z-index:2}
.fan .c3{transform:translateX(22%) rotate(12deg) translateY(18px)}
.fan .lab{position:absolute;left:7px;right:7px;bottom:7px;background:rgba(255,253,248,.93);border-radius:8px;font-size:13px;font-weight:700;padding:4px 6px;color:var(--ink)}
.fan .kokon-maskottchen{position:absolute;left:50%;top:0;width:76px;height:76px;margin-left:-38px;z-index:3;box-shadow:0 6px 14px rgba(60,40,25,.22)}
.hero .lead{font-size:19px;max-width:520px;margin:0 auto}
.stores{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.store{display:inline-flex;align-items:center;gap:6px;line-height:1.2;background:transparent;color:var(--ink);border:1.5px dashed var(--line-strong,#CDBFAD);border-radius:12px;padding:9px 14px;font-weight:700;font-size:15px;cursor:default}
.store small{font-weight:500;font-size:15px;color:var(--muted)}
.store small::before{content:"\00B7";margin-right:6px}

/* Abschnitte */
.sec{padding:44px 0}
.sec .intro{margin-bottom:18px}
.flips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;perspective:900px;max-width:520px}
.flip{position:relative;aspect-ratio:3/4;cursor:pointer;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1);border:0;padding:0;background:none;font:inherit}
.flip.on{transform:rotateY(180deg)}
.flip>span{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 2px 4px rgba(60,40,25,.08),0 6px 14px rgba(60,40,25,.12);border:3px solid var(--surface)}
.flip .b{background:var(--tone,var(--sand)) var(--back);display:grid;place-items:center;font:600 32px var(--display);color:rgba(42,36,32,.5)}
.flip .f{transform:rotateY(180deg);background:var(--surface)}
.flip .f img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.flip{transition:none}}

.steps{display:grid;gap:12px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;box-shadow:0 1px 2px rgba(60,40,25,.08)}
.step::before{counter-increment:s;content:counter(s);width:42px;height:42px;border-radius:50%;background:var(--terra);color:#fff;display:grid;place-items:center;font:600 21px var(--display)}
.step p{margin:0}
.modes{display:grid;gap:12px}
.mode{border-radius:18px;padding:20px}
.mode.a{background:var(--peach)}.mode.b{background:var(--sky)}
.mode p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{border-radius:999px;padding:8px 14px;font-size:16px;font-weight:500}
.chips li:nth-child(7n+1){background:var(--peach)}.chips li:nth-child(7n+2){background:var(--sky)}.chips li:nth-child(7n+3){background:var(--sage)}.chips li:nth-child(7n+4){background:var(--rose)}.chips li:nth-child(7n+5){background:var(--sand)}.chips li:nth-child(7n+6){background:var(--lilac)}.chips li:nth-child(7n+7){background:var(--mint)}
.cards{display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.card p{margin:0}
.card.result{text-align:center;display:flex;flex-direction:column;justify-content:center}
.score{font-size:76px;line-height:1;color:var(--terra);margin:4px 0 8px}
.two{display:grid;gap:28px}
.why{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.why li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.why li::before{content:"";width:24px;height:24px;border-radius:50%;margin-top:1px;background:var(--terra) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 11.5l3 3 6-7'/%3E%3C/svg%3E") center/100% no-repeat}
details{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:0 0 10px}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;line-height:1;color:var(--terra-text)}
details[open] summary::after{content:"\2212"}
details p{margin:8px 0 0;color:var(--muted)}
.final{text-align:center;padding:56px 0 40px}
.final .kokon-maskottchen{width:84px;height:84px;box-shadow:0 8px 18px rgba(60,40,25,.2)}
.final h2{margin-top:16px}
.btn-tt{display:none;margin-top:16px;background:var(--terra);color:#fff;text-decoration:none;font-weight:700;border-radius:14px;padding:12px 22px}
.has-tt .btn-tt{display:inline-block}

/* Fuss */
.foot{border-top:1px solid var(--line);padding:22px 0 30px;font-size:14px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.foot a{color:var(--muted)}

/* Knopf unten (nur Handy) */
.sticky{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(247,242,234,0),var(--paper) 40%);z-index:10;transition:transform .3s ease,opacity .3s,visibility .3s}
.sticky.weg{transform:translateY(110%);opacity:0;visibility:hidden}
.cta{display:block;text-align:center;background:var(--terra);color:#fff;text-decoration:none;font-weight:700;border-radius:14px;padding:15px;font-size:17px;box-shadow:0 6px 16px rgba(179,74,53,.3)}
body{padding-bottom:84px}

/* Einblenden */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.steps [data-reveal]:nth-child(2){transition-delay:.08s}.steps [data-reveal]:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* Groessere Bildschirme */
@media (min-width:900px){
  body{padding-bottom:0}
  .sticky{display:none}
  .hero{padding:24px 0 56px}
  .hero .wrap{grid-template-columns:1.05fr 1fr;align-items:center;text-align:left;gap:40px}
  .hero .txt{order:1}.fan{order:2}
  .hero .lead{margin:0}
  .stores{justify-content:flex-start}
  .fan{height:400px;max-width:460px}
  .fan .c{width:200px;top:78px}
  .fan .kokon-maskottchen{width:96px;height:96px;margin-left:-48px}
  .sec{padding:56px 0}
  .steps{grid-template-columns:repeat(3,1fr)}
  .modes{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:1fr 1fr 1fr}
  .two{grid-template-columns:1fr 1fr;gap:48px}
  .final .stores{justify-content:center}
}

/* ===== Proberunde mit Lea (spiel.js) ===== */
.spiel{--wash:#F3EADA;background:var(--wash);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--shadow);max-width:600px;color:var(--ink);transition:background .3s;scroll-margin-top:16px}
.spiel[data-tone="sky"]{--wash:#E5EBED}.spiel[data-tone="sage"]{--wash:#E8EBDD}.spiel[data-tone="lilac"]{--wash:#ECE7F1}.spiel[data-tone="rose"]{--wash:#F5E3E1}
.spiel__kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.spiel__ava{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 19px var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;color:#fff;box-shadow:0 0 0 3px var(--surface)}
.spiel__ava--lea{background:#C76B8A}
.spiel__ava--du{background:var(--terra);font-size:14px;font-family:"Karla",system-ui,sans-serif;font-weight:700}
.spiel__fort{flex:1;min-width:0}
.spiel__wer{display:block;font-weight:700;font-size:15px}
.spiel__runde{display:block;font-size:13px;color:var(--muted)}
.spiel__bar{display:block;height:6px;border-radius:3px;background:rgba(42,36,32,.12);margin-top:6px;overflow:hidden}
.spiel__bar::after{content:"";display:block;height:100%;width:var(--p,0%);background:var(--terra);border-radius:3px;transition:width .4s}
.spiel__frage{font-size:23px;margin:2px 0 4px;outline:none}
.spiel__hinweis{color:var(--muted);font-size:15px;margin:0 0 14px}
.spiel__wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.spiel__karte{position:relative;border:3px solid var(--surface);border-radius:12px;padding:0;overflow:hidden;background:var(--surface);cursor:pointer;box-shadow:0 2px 4px rgba(60,40,25,.08),0 6px 14px rgba(60,40,25,.1);transition:transform .15s,opacity .25s,border-color .2s,box-shadow .2s;font:inherit;color:var(--ink)}
.spiel__karte:hover:not(:disabled){transform:translateY(-3px)}
.spiel__karte img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--sand)}
.spiel__karte span{display:block;padding:6px 4px 8px;font-weight:700;font-size:13px;line-height:1.2;text-align:center;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.spiel__karte:disabled{cursor:default}
.spiel__karte.is-gewaehlt{border-color:var(--terra);box-shadow:0 0 0 3px var(--terra),0 10px 22px rgba(179,74,53,.25);transform:translateY(-3px) scale(1.03)}
.spiel__karte.is-aus{opacity:.4}
.spiel__weiter{display:block;width:100%;background:var(--terra);color:#fff;border:0;border-radius:14px;padding:14px 20px;font:700 16px/1.2 "Karla",system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 14px rgba(179,74,53,.25)}
.spiel__weiter:hover{background:var(--terra-text)}
.spiel__weiter--leise{background:transparent;color:var(--terra-text);border:1.5px solid var(--terra);box-shadow:none;margin-top:6px}
.spiel__weiter--leise:hover{background:var(--surface)}
.spiel__titel{text-align:center;font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-weight:600;font-size:26px;margin:0 0 12px;outline:none}
.spiel__werte{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spiel__wert{background:var(--surface);border-radius:16px;padding:12px 8px;text-align:center}
.spiel__wert small{display:block;font-weight:700;font-size:14px;color:var(--muted)}
.spiel__wert b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 50,"WONK" 0,"opsz" 144;font-weight:600;font-size:clamp(28px,8vw,40px);line-height:1.1;color:var(--terra);white-space:nowrap}
.spiel__satz{text-align:center;color:var(--muted);margin:10px 0 4px}
.spiel__runden{display:grid;gap:12px;margin-top:12px}
.spiel__erg{background:var(--surface);border-radius:16px;padding:14px}
.spiel__erg h4{font-family:var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-weight:600;font-size:19px;margin:0 0 10px}
.spiel__zeile{display:grid;grid-template-columns:auto 56px 1fr;gap:10px;align-items:center}
.spiel__zeile+.spiel__zeile{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.spiel__zeile .spiel__ava{width:30px;height:30px;font-size:14px;box-shadow:none}
.spiel__zeile .spiel__ava--du{font-size:11px}
.spiel__zeile img{width:56px;height:70px;object-fit:cover;border-radius:8px}
.spiel__zeile small{display:block;font-size:13px;color:var(--muted)}
.spiel__zeile strong{display:block;font-size:16px;line-height:1.25}
.spiel__zeile p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.spiel__zeile.is-gut p{color:#3F6B4A;font-weight:700}
.spiel__haken{display:inline-block;margin-right:5px;font-weight:700}
.spiel__klein{font-size:13px;color:var(--muted);margin:12px 0 0}
.spiel__app{text-align:center;font-weight:700;margin:6px 0 8px}
@media (prefers-reduced-motion:reduce){.spiel__karte,.spiel__bar::after{transition:none}}

/* Reiter fuer die drei Spielarten */
.spiel__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:rgba(42,36,32,.07);border-radius:14px;padding:4px;margin:0 0 16px}
.spiel__tab{border:0;background:transparent;border-radius:10px;padding:9px 4px;font:700 14px/1.2 "Karla",system-ui,sans-serif;color:var(--muted);cursor:pointer}
.spiel__tab.is-an{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(60,40,25,.15)}
.spiel__tab:hover:not(.is-an){color:var(--ink)}
.spiel__ava--alex{background:#5E8C7A}
.spiel__wahl--q .spiel__karte img{aspect-ratio:1}
/* Paar-Check */
.spiel__liste{display:grid;gap:8px}
.spiel__option{display:block;width:100%;text-align:left;background:var(--surface);border:2px solid var(--surface);border-radius:12px;padding:13px 16px;font:500 16px/1.3 "Karla",system-ui,sans-serif;color:var(--ink);cursor:pointer;box-shadow:0 1px 3px rgba(60,40,25,.1);transition:border-color .2s,opacity .25s,transform .15s}
.spiel__option:hover:not(:disabled){border-color:var(--line)}
.spiel__option:disabled{cursor:default}
.spiel__option.is-gewaehlt{border-color:var(--terra);box-shadow:0 0 0 2px var(--terra);transform:scale(1.01)}
.spiel__option.is-aus{opacity:.45}
.spiel__paar{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 10px}
.spiel__herz{color:var(--terra);font-size:22px;line-height:1}
.spiel__wert--gross b{font-size:clamp(40px,12vw,56px)}
.spiel__erg+.spiel__erg{margin-top:12px}
.spiel__erg--gut,.spiel__erg--reden{margin-top:12px}
.spiel__punkte{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.spiel__punkte li{position:relative;padding-left:26px;font-size:15px;line-height:1.4}
.spiel__punkte li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%}
.spiel__erg--gut .spiel__punkte li::before{background:#DFEADD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%233F6B4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5l2.5 2.5 5-6'/%3E%3C/svg%3E") center/100% no-repeat}
.spiel__erg--reden .spiel__punkte li::before{background:#F6E0D9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='%239C3F2C'%3E%3Ccircle cx='5.5' cy='9' r='1.4'/%3E%3Ccircle cx='9' cy='9' r='1.4'/%3E%3Ccircle cx='12.5' cy='9' r='1.4'/%3E%3C/svg%3E") center/100% no-repeat}
.spiel__klein--mitte{text-align:center;margin:12px 0 4px}
/* Allein: Geschichte */
.spiel__banner{margin:0 0 12px;border-radius:14px;overflow:hidden;box-shadow:0 6px 16px rgba(30,20,40,.18)}
.spiel__banner img{display:block;width:100%;height:170px;object-fit:cover;object-position:50% 22%}
.spiel__story{font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 24;font-size:17px;line-height:1.55;margin:0 0 12px}
.spiel__story--ende{background:var(--surface);border-radius:16px;padding:16px;margin:12px 0 0}
.spiel__drei{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}
.spiel__drei figure{margin:0;text-align:center}
.spiel__drei img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;border:3px solid var(--surface);box-shadow:0 2px 6px rgba(60,40,25,.12)}
.spiel__drei figcaption{font-size:13px;font-weight:700;margin-top:4px;line-height:1.2}
.mode.c{background:var(--lilac)}
@media (min-width:900px){.modes{grid-template-columns:repeat(3,1fr)}.spiel__banner img{height:220px}}
@media (prefers-reduced-motion:reduce){.spiel__option{transition:none}}

/* ===== Farbvarianten (Vorschau) ===== */
.fan .kokon-maskottchen{box-shadow:0 0 0 3px var(--surface),0 6px 14px rgba(60,40,25,.22)}

/* F1: Akzente */
.f1 .fan::before{content:"";position:absolute;left:50%;top:52%;width:min(330px,88vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--terra)}
.f1 h2::after{content:"";display:block;width:52px;height:5px;border-radius:3px;background:var(--terra);margin-top:10px}
.f1 .final h2::after,.f1 .card h2::after{margin-left:auto;margin-right:auto}
.f1 .card h2::after{margin-left:0}
.f1 .sec-spiel{background:var(--accent-band,#F3DDD5)}
.f1 .final{background:var(--terra);color:#fff}

/* F2: Baender */
.f2 .top,.f2 .hero,.f2 .sec-how,.f2 .final{background:var(--terra);color:#fff}
.f2 .sec-why{background:#F3DDD5}
.f2 .top .home{color:#fff}
.f2 .top .lang{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.f2 .top .kokon-maskottchen{box-shadow:0 0 0 2px #FFFDF8}
.f2 .hero .muted{color:rgba(255,255,255,.9)}
.f2 .hero .store{color:#fff;border-color:rgba(255,255,255,.65)}
.f2 .hero .store small{color:rgba(255,255,255,.85)}
.f2 .sec-how .step{color:var(--ink)}

/* F3: Kraeftig */
.f3 body{background:var(--terra);color:#fff}
.f3 .muted{color:rgba(255,255,255,.88)}
.f3 a{color:#fff}
.f3 .top .home{color:#fff}
.f3 .top .lang{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.f3 .kokon-maskottchen{box-shadow:0 0 0 3px #FFFDF8}
.f3 .step,.f3 .card,.f3 details,.f3 .mode,.f3 .chips li{color:var(--ink)}
.f3 .step .muted,.f3 .card .muted,.f3 details p{color:var(--muted)}
.f3 .store{color:#fff;border-color:rgba(255,255,255,.65)}
.f3 .store small{color:rgba(255,255,255,.85)}
.f3 .why li::before{background:#FFFDF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23B34A35' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 11.5l3 3 6-7'/%3E%3C/svg%3E") center/100% no-repeat}
.f3 .foot{color:rgba(255,255,255,.85);border-top-color:rgba(255,255,255,.25)}
.f3 .foot a{color:rgba(255,255,255,.9)}
.f3 .sticky{background:linear-gradient(rgba(179,74,53,0),var(--terra) 40%)}
.f3 .cta{background:#FFFDF8;color:var(--terra-text)}

/* Varianten gemeinsam: Schluss auf Terrakotta */
.f1 .final .muted,.f2 .final .muted{color:rgba(255,255,255,.9)}
.f1 .final .store,.f2 .final .store{color:#fff;border-color:rgba(255,255,255,.65)}
.f1 .final .store small,.f2 .final .store small{color:rgba(255,255,255,.85)}
.f1 .final .kokon-maskottchen,.f2 .final .kokon-maskottchen,.f2 .fan .kokon-maskottchen{box-shadow:0 0 0 3px #FFFDF8,0 8px 18px rgba(0,0,0,.2)}
.f1 .final .btn-tt,.f2 .final .btn-tt,.f3 .final .btn-tt{background:#FFFDF8;color:var(--terra-text)}

@media (min-width:900px){
  .spiel-wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
  .spiel-txt{position:sticky;top:32px}
  .spiel-txt .intro{font-size:19px}
  .f1 .fan::before{width:400px}
}