:root{--red:#f21b16;--black:#111;--dark:#1d1d1f;--light:#f5f5f6;--line:#e4e4e7;--grey:#666;--white:#fff}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Verdana,Arial,Helvetica,sans-serif;color:#111;background:#f5f5f6;line-height:1.55}
a{text-decoration:none;color:inherit}.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
header{background:#fff;border-bottom:1px solid var(--line)}
.header-inner{min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo img{width:285px;max-width:68vw;max-height:70px;object-fit:contain;object-position:left center}
.back{font-size:14px;font-weight:700;color:var(--red)}
.hero{background:linear-gradient(135deg,#151515,#2c2c2c);color:#fff;padding:27px 0}
h1{font-size:34px;line-height:1.15;margin:0 0 7px}.hero p{margin:0;color:#ddd}
main{padding:26px 0 44px}
.game-shell{max-width:960px;margin:0 auto;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 12px 34px rgba(0,0,0,.16)}
.game-frame{display:block;width:100%;border:0;background:#000}
.content{max-width:960px;margin:22px auto 0;display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
.box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.box h2{font-size:22px;margin:0 0 10px}.box p{color:#555;margin:0}
.facts{display:grid;gap:9px}.fact{background:#f5f5f5;border-radius:8px;padding:10px 12px;font-size:13px}
.related{max-width:960px;margin:22px auto 0}
.related h2{font-size:22px;margin:0 0 13px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.related-card{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.related-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.related-card strong{display:block;padding:9px 10px;font-size:13px}
.notice{max-width:960px;margin:15px auto 0;color:#777;font-size:11px}
footer{background:#111;color:#ddd;padding:23px 0;font-size:13px}
.footer-row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
@media(max-width:760px){.content{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr 1fr}h1{font-size:27px}.wrap{padding:0 13px}.logo img{width:210px}.header-inner{min-height:70px}.hero{padding:22px 0}.game-shell{border-radius:7px}}

.game-frame{aspect-ratio:var(--game-ratio,4 / 3);max-height:82vh}

.brand{display:flex;align-items:center;gap:9px}.brand img{width:46px;height:52px;object-fit:contain}.brand-copy{line-height:1}.brand-name{font-size:23px;font-weight:900}.brand-name .fak{color:var(--red)}.brand-tag{display:block;margin-top:4px;font-size:7px;font-weight:800;color:#555}.brand-tag b{color:var(--red)}
.consent-placeholder{aspect-ratio:800/600;max-height:82vh;display:flex;align-items:center;justify-content:center;padding:28px;background:radial-gradient(circle at 50% 35%,#242832,#080a0e 70%);color:#fff;text-align:center}.consent-placeholder-inner{max-width:620px}.consent-placeholder h2{margin:0 0 10px;font-size:25px}.consent-placeholder p{margin:0 0 16px;color:#d6dae2}.consent-button{display:inline-block;background:var(--red);color:#fff;border-radius:9px;padding:11px 16px;font-weight:800;font-size:13px}.related-card img:not([src]){background:linear-gradient(135deg,#222833,#15171d);aspect-ratio:4/3}.legal-links{display:flex;gap:14px;flex-wrap:wrap}.legal-links a:hover{color:#fff}.footer-cookie{cursor:pointer}



/* === FAKHANDY MOBILE OPTIMIERUNG 2026-08-18 === */
@media (max-width:760px){
  html,body{max-width:100%;overflow-x:hidden}
  body{-webkit-text-size-adjust:100%;font-family:Arial,Helvetica,sans-serif}
  a,button{touch-action:manipulation}
  .wrap{padding:0 12px}
  header{position:sticky;top:0;z-index:60}
  .header-inner{min-height:58px;gap:8px}
  .brand{gap:8px;min-width:0}
  .brand img{width:31px;height:36px;flex:0 0 auto}
  .brand-copy{min-width:0}
  .brand-name{font-size:19px;white-space:nowrap}
  .brand-tag{display:none}
  .back{
    flex:0 0 auto;
    min-height:40px;
    display:flex;align-items:center;
    font-size:12px;
    padding:7px 4px;
  }
  .hero{padding:15px 0}
  h1{font-size:clamp(24px,7vw,30px);line-height:1.08;margin-bottom:4px}
  .hero p{font-size:12px;line-height:1.35}
  main{padding:12px 0 28px}
  .game-shell{
    width:calc(100% + 24px);
    margin-left:-12px;
    border-radius:0;
    box-shadow:none;
  }
  .game-frame{
    width:100%;
    aspect-ratio:4/3;
    max-height:none;
    min-height:0;
  }
  .consent-placeholder{
    aspect-ratio:4/3;
    max-height:none;
    padding:18px 14px;
  }
  .consent-placeholder-inner{max-width:520px}
  .consent-placeholder h2{font-size:20px;line-height:1.12;margin-bottom:8px}
  .consent-placeholder p{font-size:12px;line-height:1.42;margin-bottom:13px}
  .consent-button{
    min-height:44px;
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 14px;
    font-size:12px;
  }
  .content{
    display:block;
    margin-top:14px;
  }
  .content>.box+.box{margin-top:10px}
  .box{padding:15px;border-radius:10px}
  .box h2{font-size:19px;margin-bottom:7px}
  .box p{font-size:13px;line-height:1.5}
  .facts{gap:7px}
  .fact{font-size:12px;padding:9px 10px}
  .related{margin-top:17px}
  .related h2{font-size:19px;margin-bottom:9px}
  .related-grid{
    display:flex;
    gap:9px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .related-grid::-webkit-scrollbar{display:none}
  .related-card{
    flex:0 0 72%;
    scroll-snap-align:start;
    border-radius:9px;
  }
  .related-card strong{padding:8px 9px;font-size:12px}
  .notice{margin-top:12px;font-size:10px;line-height:1.45}
  footer{padding:17px 0}
  .footer-row{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
    font-size:10px;
  }
  .legal-links{justify-content:center;gap:12px}
}
@media (max-width:390px){
  .wrap{padding:0 9px}
  .game-shell{width:calc(100% + 18px);margin-left:-9px}
  .brand img{width:29px;height:33px}
  .brand-name{font-size:18px}
  .consent-placeholder h2{font-size:18px}
  .consent-placeholder p{font-size:11px}
  .related-card{flex-basis:82%}
}
@media (max-width:760px) and (orientation:landscape){
  .game-frame,.consent-placeholder{
    max-height:calc(100vh - 58px);
    aspect-ratio:auto;
    min-height:calc(100vh - 58px);
  }
}


/* === FAKHANDY MOBILE GAME FULLSCREEN 2026-08-19 === */
@media (max-width:760px){
  body.game-fullscreen-open{overflow:hidden!important}
  .hero{display:none}
  main{padding-top:0}
  .game-shell{
    position:relative;
    width:calc(100% + 24px);
    height:calc(100dvh - 58px);
    min-height:calc(100svh - 58px);
    max-height:none;
    margin-left:-12px;
    margin-top:0;
    border-radius:0;
    box-shadow:none;
    background:#000;
  }
  .game-frame,
  .consent-placeholder{
    display:block;
    width:100%;
    height:100%;
    min-height:100%;
    max-height:none;
    aspect-ratio:auto;
    border:0;
  }
  .game-fullscreen-btn{
    position:absolute;
    z-index:40;
    right:10px;
    top:10px;
    min-height:40px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:9px;
    background:rgba(10,10,12,.82);
    color:#fff;
    font:700 12px/1 Arial,Helvetica,sans-serif;
    box-shadow:0 4px 16px rgba(0,0,0,.28);
    cursor:pointer;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .game-shell.mobile-fullscreen{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100svh!important;
    margin:0!important;
    z-index:2147483000!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .game-shell.mobile-fullscreen .game-frame,
  .game-shell.mobile-fullscreen .consent-placeholder{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
  }
  .game-shell.mobile-fullscreen .game-fullscreen-btn{
    position:fixed;
    right:max(10px,env(safe-area-inset-right));
    top:max(10px,env(safe-area-inset-top));
  }
}
@media (max-width:390px){
  .game-shell{
    width:calc(100% + 18px);
    margin-left:-9px;
  }
}
@media (max-width:760px) and (orientation:landscape){
  header{display:none}
  .game-shell{
    height:100dvh;
    min-height:100svh;
  }
}
