/* Startseite: Stil 7b (hell) und 7c „Glut“ (dunkel) der App – Archivo, harte Schatten, eine Farbe je Spiel. */
:root{--blob:#ffd0e1;--red:#ff3d1f;--redD:#b51e05;--orange:#ff9a1f;--orangeD:#b35e00;--green:#138a4a;--greenD:#0a5230;--lime:#c6e81f;--limeD:#6f8a00;--tint:#fff4e6;--phone:#1c0f0a;--final:#1c0f0a;--onFinal:#fff6ec}
@media (prefers-color-scheme:dark){:root{--blob:#2e1220;--red:#ff5b2e;--orange:#ffa53a;--green:#22a35c;--lime:#b9d83a;--tint:#fff4e6;--phone:#000;--final:#120805;--onFinal:#fbefe2}}
html:has(body.landing),body.landing{overflow-x:clip}
.landing h1,.landing h2,.landing h3{font-weight:900;text-transform:uppercase;color:var(--ink);margin:0}

/* Navigation */
.nav{max-width:1180px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:18px;letter-spacing:.01em}
.brand img{border-radius:22.4%;box-shadow:0 3px 0 var(--pinkD)}
.nav nav{display:flex;gap:6px;align-items:center}
.nav nav a{color:var(--ink);text-decoration:none;font-weight:800;font-size:15px;padding:8px 12px;border-radius:999px}
.nav nav a:hover{background:var(--card)}
.nav nav a.lang{border:2.5px solid var(--line);box-shadow:0 3px 0 var(--shadow);background:var(--card);padding:6px 12px}
@media (max-width:720px){.nav nav a:not(.lang){display:none}}

/* Hero */
.hero{max-width:1180px;margin:0 auto;padding:22px 20px 56px;display:grid;grid-template-columns:1fr;gap:10px}
.pill-kicker{display:inline-block;margin:0 0 6px;padding:7px 14px;border:2.5px solid var(--line);border-radius:999px;background:var(--card);box-shadow:0 3px 0 var(--shadow);font-size:13px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.hero h1{font-size:clamp(40px,11.2vw,150px);font-stretch:125%;line-height:.84;letter-spacing:-.015em;margin:14px 0 18px;text-shadow:0 .055em 0 var(--pink);white-space:nowrap}
.claim{font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:clamp(26px,4.2vw,50px);line-height:.95;color:var(--ink);margin:0 0 16px;max-width:16ch}
.sub{font-size:clamp(17px,1.6vw,20px);font-weight:700;color:var(--ink2);max-width:36ch;margin:0 0 26px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 26px;border:3px solid var(--line);border-radius:999px;font-weight:900;font-stretch:112%;text-transform:uppercase;font-size:16px;text-decoration:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s cubic-bezier(.2,.8,.2,1)}
.btn-primary{background:var(--pink);color:#1c0f0a;box-shadow:0 5px 0 var(--pinkD)}
.btn-ghost{background:var(--card);color:var(--ink);box-shadow:0 5px 0 var(--shadow)}
.btn-ink{background:var(--onFinal);color:#1c0f0a;border-color:var(--onFinal);box-shadow:0 5px 0 var(--pink);text-transform:none;font-stretch:100%}
a.btn:hover{transform:translateY(-2px)}
a.btn:active{transform:translateY(5px);box-shadow:none}
@media (min-width:980px){
  .hero{grid-template-columns:1.05fr 1fr;column-gap:40px;align-items:center}
  .hero-head{grid-column:1/-1}
  .hero-copy{grid-column:1}
  .stage{grid-column:2;margin-top:0}
}
.stage::before{content:"";position:absolute;left:50%;top:46%;width:430px;height:430px;margin:-215px 0 0 -215px;border-radius:50%;background:var(--blob);border:3px solid var(--line)}
@media (max-width:560px){.stage::before{width:330px;height:330px;margin:-165px 0 0 -165px}}

/* Bühne mit Handy und Karten */
.stage{position:relative;height:540px;margin-top:22px}
.phone,.card{position:absolute;transform:rotate(var(--r));z-index:1;animation:pop .6s cubic-bezier(.2,.8,.2,1) var(--delay) both}
@keyframes pop{0%{transform:rotate(var(--r)) scale(.3)}55%{transform:rotate(var(--r)) scale(1.08)}80%{transform:rotate(var(--r)) scale(.97)}100%{transform:rotate(var(--r)) scale(1)}}
.phone{left:50%;top:0;width:250px;height:510px;margin-left:-125px;background:var(--phone);border-radius:46px;padding:11px;box-shadow:0 10px 0 var(--pinkD)}
.screen{height:100%;background:var(--tint);border-radius:36px;padding:46px 16px 16px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.screen::before{content:"";position:absolute;top:12px;left:50%;width:84px;height:22px;margin-left:-42px;border-radius:999px;background:var(--phone)}
.screen-top{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#7a3f00}
.screen-top .dot{width:12px;height:12px;border-radius:50%;background:var(--orange);border:2px solid #1c0f0a}
.prompt{background:#fff;border:3px solid #1c0f0a;border-radius:20px;padding:16px 14px;font-size:20px;font-weight:900;line-height:1.2;color:#1c0f0a;box-shadow:0 4px 0 #b35e00}
.blank{display:inline-block;width:46px;height:20px;border:2.5px dashed #b35e00;border-radius:6px;vertical-align:-3px}
.field{display:flex;align-items:center;height:52px;padding:0 16px;background:#fff;border:3px solid #1c0f0a;border-radius:16px;font-weight:700;font-size:15px;color:#6b6152}
.caret{width:2px;height:22px;background:#1c0f0a;margin-left:3px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{visibility:hidden}}
.send{display:flex;align-items:center;justify-content:center;height:54px;border:3px solid #1c0f0a;border-radius:999px;background:var(--orange);font-weight:900;font-stretch:112%;text-transform:uppercase;font-size:16px;color:#1c0f0a;box-shadow:0 4px 0 #b35e00}
.status{margin-top:auto;font-weight:800;font-size:13px;color:#4d463c;text-align:center}
.status b{color:#b35e00}
.card{z-index:2;background:var(--card);border:3px solid var(--line);border-radius:22px;padding:14px 16px;box-shadow:0 6px 0 var(--shadow);display:flex;flex-direction:column;gap:6px;width:228px}
.card-kicker{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.card-text{font-weight:900;font-size:18px;line-height:1.15;color:var(--ink)}
.card-scale{left:-18px;top:246px;border-color:#1c0f0a;background:var(--pink);box-shadow:0 6px 0 var(--pinkD)}
.card-scale .card-kicker,.card-scale .card-text,.card-hive .card-kicker,.card-hive .card-text{color:#1c0f0a}
.scale{display:grid;grid-template-columns:1fr 1fr;row-gap:7px;font-size:11px;font-weight:900;text-transform:uppercase;color:#1c0f0a;margin-top:4px}
.scale span:last-child{text-align:right}
.scale-bar{grid-column:1/-1;grid-row:1;height:14px;border:2.5px solid #1c0f0a;border-radius:999px;background:#ffd0e1;position:relative}
.scale-bar i{position:absolute;left:68%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#1c0f0a;box-shadow:0 0 0 3px #ffd0e1}
.card-tier{right:-10px;top:330px}
.tiers{display:flex;align-items:flex-end;gap:5px;height:44px}
.tiers i{flex:1;border-radius:6px;background:var(--green);border:2.5px solid #1c0f0a}
.tiers i:nth-child(1){height:40%}.tiers i:nth-child(2){height:70%}.tiers i:nth-child(3){height:100%}
.tier-ends{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:900;text-transform:uppercase;color:var(--ink3)}
.card-hive{left:0;bottom:6px;width:200px;background:var(--lime);box-shadow:0 6px 0 var(--limeD);border-color:#1c0f0a}
@media (max-width:560px){
  .stage{height:560px}
  .phone{width:220px;height:450px;margin-left:-110px}
  .prompt{font-size:17px}
  .card{width:200px;padding:12px 13px}
  .card-text{font-size:15px}
  .scale,.tier-ends{font-size:10px}
  .card-scale{left:-8px;top:206px}
  .card-tier{right:-8px;top:322px}
  .card-hive{left:-4px;width:170px}
}

/* Band */
.band{background:var(--final);color:var(--onFinal);transform:rotate(-1.6deg);margin:24px -20px 10px;padding:18px 24px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;font-weight:900;font-stretch:115%;text-transform:uppercase;font-size:clamp(14px,1.7vw,19px);border-top:3px solid var(--line);border-bottom:3px solid var(--line)}
.band i{width:14px;height:14px;border-radius:50%;background:var(--c);border:2px solid var(--onFinal)}

/* Abschnitte */
.section{max-width:1180px;margin:0 auto;padding:80px 20px}
.section-kicker{font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px}
.section h2,.final h2{font-size:clamp(30px,6.2vw,74px);font-stretch:118%;line-height:.9;max-width:15ch;margin-bottom:18px}
.section-sub{font-size:19px;font-weight:700;color:var(--ink2);max-width:46ch;margin:0 0 34px}
.steps{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:18px}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--card);border:3px solid var(--line);border-radius:28px;padding:26px 24px 28px;box-shadow:0 6px 0 var(--shadow)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--c);border:3px solid #1c0f0a;box-shadow:0 4px 0 var(--d);font-weight:900;font-size:28px;color:#1c0f0a;margin-bottom:18px}
.step:nth-child(3) .step-num{color:#1c0f0a}
.step h3{font-size:24px;font-stretch:115%;line-height:.95;margin-bottom:10px}
.step p{margin:0;font-size:16.5px}

/* Spiele */
.games{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.gbox{background:var(--c);color:var(--on);border:3px solid #1c0f0a;border-radius:28px;padding:20px 22px 24px;box-shadow:0 7px 0 var(--d);display:flex;flex-direction:column;min-height:270px;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s cubic-bezier(.2,.8,.2,1)}
.gbox:hover{transform:translateY(-4px);box-shadow:0 11px 0 var(--d)}
.gbox:hover .shape{transform:rotate(-8deg) scale(1.06)}
.gbox-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:22px}
.gbox-tag{font-size:11.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:2.5px solid #1c0f0a;border-radius:999px;background:#fff6ec;color:#1c0f0a}
.shape{flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.gbox h3{color:var(--on);font-size:28px;font-stretch:112%;line-height:.9;margin-top:auto;margin-bottom:10px}
.gbox p{color:var(--on);margin:0;font-size:15.5px;font-weight:700;opacity:.92}

/* Ein Handy oder alle */
.modes{display:grid;gap:18px;padding-top:20px}
@media (min-width:860px){.modes{grid-template-columns:1fr 1fr}}
.mode{border:3px solid #1c0f0a;border-radius:32px;padding:30px 28px 32px;box-shadow:0 7px 0 var(--d)}
.mode-many{background:var(--pink);--d:var(--pinkD)}
.mode-one{background:var(--orange);--d:var(--orangeD)}
.mode h3{color:#1c0f0a;font-size:clamp(26px,3.4vw,38px);font-stretch:118%;line-height:.92;margin:22px 0 10px}
.mode p{color:#1c0f0a;margin:0;font-size:17px;max-width:40ch}
.mode-phones{display:flex;gap:10px;height:96px;align-items:flex-end}
.mode-phones i{width:52px;height:92px;border-radius:14px;background:#1c0f0a;position:relative;box-shadow:0 4px 0 rgba(0,0,0,.25)}
.mode-phones i::after{content:"";position:absolute;inset:6px;border-radius:9px;background:#fff6ec}
.mode-phones i:nth-child(2){transform:translateY(-6px) rotate(4deg)}
.mode-phones i:nth-child(3){transform:rotate(-5deg)}
.mode-phones i:nth-child(4){transform:translateY(-3px) rotate(6deg)}
.mode-phones.one i{transform:rotate(-12deg)}

/* Abschluss */
.final{background:var(--final);color:var(--onFinal);text-align:center;padding:90px 20px 96px;margin-top:40px;display:flex;flex-direction:column;align-items:center}
.final h2{color:var(--onFinal);margin:26px auto 16px}
.final p{color:var(--onFinal);opacity:.86;max-width:44ch;font-size:18px;margin:0 auto 30px}
.final-icon{border-radius:22.4%;box-shadow:0 8px 0 var(--pink)}

/* Fußzeile */
.site-footer{max-width:1180px;margin:0 auto;padding:28px 20px 40px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.site-footer .brand{font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-links a{color:var(--ink);text-decoration:none;font-weight:800;font-size:15px}
.foot-links a:hover{text-decoration:underline}
.foot-note{width:100%;margin:0;font-size:13px;color:var(--ink3)}

@media (prefers-reduced-motion:reduce){
  .phone,.card{animation:none}
  .caret{animation:none}
  .btn,.gbox,.shape{transition:none}
}