:root{
  --gsl-bg: #fffbca;
  --gsl-fg: #e7e7ea;
  --gsl-fg-dim: #b3b3b9;
  --gsl-card: rgba(24,24,27,0.65);
  --gsl-border: rgba(255,255,255,0.08);
  --gsl-accent-1: #9333EA; /* beige */
  --gsl-accent-2: #fffbca; /* violet */
  --gsl-accent-3: #9333EA; /* cyan */
}

.gsl-container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.gsl-hero{
  position:relative;overflow:hidden;
  background: radial-gradient(1200px 600px at -10% -10%, rgba(217,70,239,.15), transparent 60%),
              radial-gradient(1200px 600px at 110% 110%, rgba(34,211,238,.15), transparent 60%),
              linear-gradient(#0a0a0b,#0a0a0b);
  color:var(--gsl-fg);padding:3rem 0 2rem;min-height:40vh
}
.gsl-orb{position:absolute;border-radius:9999px;filter:blur(60px);opacity:.18;pointer-events:none}
.gsl-orb--left{width:26rem;height:26rem;background:var(--gsl-accent-1);top:-6rem;left:-6rem}
.gsl-orb--right{width:30rem;height:30rem;background:var(--gsl-accent-3);right:-8rem;bottom:-8rem}

.gsl-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.5rem}
.gsl-logo{display:flex;align-items:center;gap:.6rem}
.gsl-logo__glyph{font-size:1.4rem;display:grid;place-items:center;background:#17171a;border-radius:16px;padding:.5rem;border:1px solid var(--gsl-border)}
.gsl-logo__text{font-weight:700;letter-spacing:.2px}
.gsl-links{display:none;gap:1rem}
.gsl-links a{color:var(--gsl-fg-dim);text-decoration:none}
.gsl-links a:hover{color:var(--gsl-fg)}
@media(min-width:768px){.gsl-links{display:flex}}

.gsl-title{color: #fffbca;font-size:2.2rem;line-height:1.0;font-weight:900;text-align:center;margin:2rem 0 1rem}
@media(min-width:768px){.gsl-title{font-size:3.4rem}}
.gsl-gradient{
  display:block;
  background:linear-gradient(90deg,var(--gsl-accent-1),var(--gsl-accent-2),var(--gsl-accent-3));
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.gsl-subtitle{color:var(--gsl-fg-dim);text-align:center;max-width:720px;margin:0 auto}
.gsl-cta{display:flex;gap:.75rem;justify-content:center;margin:1.25rem 0 0}
.gsl-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border-radius:14px;border:1px solid var(--gsl-border);
  padding:.8rem 1.1rem;text-decoration:none;transition:transform .12s ease, background .2s ease, opacity .2s ease
}
.gsl-btn--primary{background:#1f1f23;color:var(--gsl-fg)}
.gsl-btn--primary:hover{transform:translateY(-1px);opacity:.95}
.gsl-btn--ghost{background:rgba(255,255,255,.04);color:var(--gsl-fg-dim)}
.gsl-btn--ghost:hover{color:var(--gsl-fg)}
.gsl-arrow{display:inline-block;transform:translateX(0);transition:transform .2s ease}
.gsl-btn:hover .gsl-arrow{transform:translateX(2px)}

.gsl-games{background:linear-gradient(#0a0a0b,#0b0b0c);color:var(--gsl-fg);padding:2rem 0 3rem}
.gsl-head{display:flex;justify-content:space-between;align-items:end;margin:.5rem 0 1rem}
.gsl-head h2{font-size:1.6rem;margin:0}
.gsl-hint{font-size:.85rem;color:var(--gsl-fg-dim)}
.gsl-grid{display:grid;gap:1rem}
@media(min-width:640px){.gsl-grid{grid-template-columns:repeat(2,1fr)}}

.gsl-card{
  position:relative;overflow:hidden;border-radius:20px;
  background:var(--gsl-card);border:1px solid var(--gsl-border);
  min-height:240px;isolation:isolate;transition:box-shadow .2s ease, transform .2s ease
}
.gsl-card:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(0,0,0,.35)}

.gsl-card__bg{
  position:absolute;inset:0;background-image:var(--gsl-img);
  background-size: contain;          /* <— statt cover */
  background-repeat: no-repeat;      /* wichtig bei contain */
  background-position: center;
  opacity: .35;
  transform: none;
  transition: opacity .25s ease;     /* optionales, dezentes Hover */
}
.gsl-card:hover .gsl-card__bg{ opacity: .4; }
.gsl-card__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.05));z-index:0}
.gsl-card__content{position:relative;z-index:1;padding:1.2rem 1.2rem 1.4rem}
.gsl-card__title{font-size:1.4rem;margin:.2rem 0 .4rem}
.gsl-card__desc{color:var(--gsl-fg-dim);margin:0 0 1rem;max-width:55ch}
.gsl-card__cover{position:absolute;inset:0;z-index:2}
.gsl-card .gsl-btn{position:relative;z-index:3}

.gsl-features{border-top:1px solid var(--gsl-border);background:#0c0c0e;padding:2.5rem 0}
.gsl-features__grid{display:grid;gap:1rem}
@media(min-width:768px){.gsl-features__grid{grid-template-columns:repeat(3,1fr)}}
.gsl-feature{background:rgba(255,255,255,.04);border:1px solid var(--gsl-border);border-radius:16px;padding:1rem}
.gsl-feature h4{margin:.2rem 0 .4rem}
.gsl-feature p{color:var(--gsl-fg-dim);margin:0}

.gsl-footer{border-top:1px solid var(--gsl-border);background:#0a0a0b;color:var(--gsl-fg-dim)}
.gsl-footer__inner{display:flex;flex-direction:column;gap:.75rem;align-items:center;justify-content:space-between;padding:1rem 0}
@media(min-width:768px){.gsl-footer__inner{flex-direction:row}}
.gsl-footer__links{display:flex;gap:1rem}
.gsl-footer__links a{color:inherit;text-decoration:none}
.gsl-footer__links a:hover{color:var(--gsl-fg)}

/* ===== Split-Layout (ohne Container) ===== */
.gsl-split-hero{
  background:
    radial-gradient(900px 500px at -10% -10%, rgba(255, 251, 202, 1), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(32, 23, 45, 1), transparent 60%),
    /*linear-gradient(#fffbca,#20172d);*/
  color:var(--gsl-fg);
  padding:2.5rem 0 1.5rem;
}
.gsl-split-hero__inner{max-width:1100px;margin:0 auto;padding:0 5.5rem}

.gsl-split{
  position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:62vh;
}
@media (max-width: 900px){
  .gsl-split{grid-template-columns:1fr;min-height:unset}
}

.gsl-split__side{
  position:relative;display:grid;place-items:center;overflow:hidden;
  text-decoration:none;isolation:isolate;
  /* sanftes Trennen der Hälften */
  border-right:1px solid var(--gsl-border);
}
.gsl-split__side:last-child{border-right:0;border-left:1px solid var(--gsl-border)}
@media (max-width: 900px){
  .gsl-split__side{border-right:0;border-left:0;border-bottom:1px solid var(--gsl-border)}
  .gsl-split__side:last-child{border-bottom:0}
}

.gsl-split__img{
  width:80%;height:80%;object-fit:contain;object-position:center;
  transform:scale(1);transition:transform .35s ease, filter .35s ease, opacity .35s ease;
  opacity:.95;
}
.gsl-split__side:hover .gsl-split__img{
  transform:scale(1.03);
  /* Glow: leichtes Leuchten, ohne harte Konturen */
  filter: drop-shadow(0 0 18px rgba(255, 251, 202, 1)) drop-shadow(0 0 32px rgba(32, 23, 45, 1));
  opacity:1;
}

.gsl-split__label{
  position:absolute;inset:auto 0 2rem 0;display:flex;justify-content:center;pointer-events:none;
}
.gsl-split__side:hover .gsl-split__title{
  transform:translateY(-2px);
  border-color:rgba(255, 251, 202, 1);
}

/* leichte Fokus-Styles für Tastaturbedienung */
.gsl-split__side:focus-visible .gsl-split__title{
  outline:2px solid var(--gsl-accent-3);
  outline-offset:3px;
}