/* Color System (red/white, tuned to your logo) */
    :root{
      --red-900:#5a0a0a; /* deep wine */
      --red-800:#7a0b0b;
      --red-700:#9b0f14; /* primary */
      --red-600:#b11226; /* accent */
      --red-500:#cf1f2c;
      --red-100:#fde9eb;
      --ink:#121212;
      --ink-2:#2b2b2b;
      --paper:#ffffff;
    }

    /* Base */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--ink);
      background: var(--paper);
      line-height:1.6;
    }
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}

    /* Subtle gritty texture to echo logo finish (pure CSS, no external files) */
    .texture{
      position:relative; isolation:isolate;
    }
    .texture::after{
      content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
      background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
      background-size:3px 3px; mix-blend-mode:multiply; opacity:.35;
    }

    /* Layout helpers */
    .container{width: min(1100px, 92%); margin-inline:auto}
    .grid{display:grid; gap:1.25rem}
    .grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
    @media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
    @media (max-width:600px){.grid-3{grid-template-columns:1fr}}

    /* Header */
    header{
      position:sticky; top:0; z-index:50;
      background:linear-gradient(0deg, rgba(255,255,255,.85), rgba(255,255,255,.95));
      backdrop-filter:saturate(1.2) blur(6px);
      border-bottom:1px solid #eee;
    }
    .brand{display:flex; align-items:center; gap:.75rem; padding:.6rem 0}
    .brand img{height:42px; width:auto}
    nav ul{display:flex; gap:1.25rem; list-style:none; margin:0; padding:0}
    .nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:.25rem 0}

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      padding:.7rem 1rem; border-radius:999px; font-weight:700; letter-spacing:.3px;
      border:2px solid var(--red-700); color:var(--paper); background:var(--red-700);
      transition:transform .08s ease, box-shadow .2s ease, background .2s ease;
      box-shadow: 0 6px 18px rgba(177,18,38,.25);
    }
    .btn:hover{transform:translateY(-1px)}
    .btn.alt{background:transparent; color:var(--red-700)}

    /* Hero */
    .hero{
      background:
        radial-gradient(1200px 400px at 50% -10%, rgba(177,18,38,.10), transparent 60%),
        linear-gradient(180deg, var(--paper), var(--paper));
    }
    .hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center; padding: clamp(2rem, 5vw, 5rem) 0}
    .hero h1{font-size: clamp(2.2rem, 6vw, 4rem); line-height:1.1; margin:.4rem 0}
    .hero p{font-size: clamp(1rem, 2.4vw, 1.15rem); color:#4a4a4a}
    .hero-logo{
      aspect-ratio: 1/1; display:grid; place-items:center;
      background: radial-gradient(ellipse at center, var(--red-100), transparent 60%);
      border-radius:1.5rem; border:1px solid #eee; padding:1rem;
    }
    .hero-logo img{width:100%; max-width: 420px}

    /* Section heading */
    .sec{padding: clamp(2.25rem, 5vw, 4rem) 0}
    .sec h2{font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin:0 0 .75rem}
    .kicker{font-weight:800; color:var(--red-700); letter-spacing:.14em; text-transform:uppercase; font-size:.8rem}

    /* Feature cards */
    .card{
      border:1px solid #eee; border-radius:1rem; padding:1.25rem; background:#fff;
      box-shadow:0 10px 22px rgba(0,0,0,.04);
    }
    .card h3{margin:.25rem 0 .5rem 0}

    /* Games grid */
    .game{
      background:linear-gradient(180deg, rgba(177,18,38,.08), rgba(177,18,38,.02));
      border:1px solid #eee; border-radius:1rem; overflow:hidden; display:flex; flex-direction:column;
    }
    .game .cover{aspect-ratio: 16/9; background:
      repeating-linear-gradient(45deg, rgba(177,18,38,.18) 0 6px, rgba(177,18,38,.12) 6px 12px),
      radial-gradient(1200px 300px at 100% 0%, rgba(177,18,38,.14), transparent 60%),
      #fafafa; display:grid; place-items:center; font-weight:900; color:var(--red-800);
    }
    .game .meta{padding:1rem}
    .tag{display:inline-block; font-size:.72rem; padding:.35rem .6rem; border-radius:.6rem; border:1px solid var(--red-600); color:var(--red-700); background:#fff}

    /* About */
    .about{display:grid; grid-template-columns: 1.1fr .9fr; gap:1.5rem; align-items:center}
    @media (max-width:900px){.hero-inner, .about{grid-template-columns:1fr}}

    /* Newsletter */
    form.news{display:flex; gap:.6rem; flex-wrap:wrap}
    .input{
      padding:.8rem 1rem; border-radius:.8rem; border:1.5px solid #eaeaea; outline:none; min-width:260px;
    }
    .input:focus{border-color:var(--red-600)}

    /* Footer */
    footer{
      background: var(--ink); color:#e8e8e8; padding:2rem 0; margin-top:2rem;
      border-top: 8px solid var(--red-700);
    }
    .foot{display:grid; grid-template-columns: 1fr auto; align-items:center}
    .foot small{opacity:.8}
    .socials{display:flex; gap:1rem}
    .pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid #444; border-radius:999px; padding:.45rem .8rem}

    /* Anchor offsets for sticky header */
    :target{scroll-margin-top: 84px}

    /* --- Consent Banner / Modal (Schimion Games) --- */
:root{
  --sg-red: var(--red-700, #b11226);
  --sg-red-d: var(--red-800, #7a0b0b);
  --sg-ink: var(--ink, #121212);
  --sg-paper: var(--paper, #ffffff);
}

#sg-consent-root .sg-banner{
  position: fixed; inset:auto 0 0 0; z-index: 9999;
  background: var(--sg-paper);
  border-top: 4px solid var(--sg-red);
  box-shadow: 0 -10px 25px rgba(0,0,0,.08);
  font-size: 0.95rem;
}
#sg-consent-root .sg-container{ width:min(1100px,92%); margin:0 auto; padding:1rem .5rem; display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap }
#sg-consent-root .sg-text{ max-width:760px; color:#333 }
#sg-consent-root .sg-actions{ display:flex; gap:.5rem; flex-wrap:wrap }

#sg-consent-root .sg-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1rem; border-radius:999px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  border:2px solid var(--sg-red); background:var(--sg-red); color:#fff;
  transition: transform .08s ease, box-shadow .2s ease, background .15s ease;
}
#sg-consent-root .sg-btn:hover{ transform: translateY(-1px) }
#sg-consent-root .sg-btn.alt{ background:transparent; color:var(--sg-red) }
#sg-consent-root .sg-link{ color:var(--sg-red); text-decoration:underline; text-underline-offset:2px }

#sg-consent-root .sg-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:10000; display:none;
}
#sg-consent-root .sg-modal{
  position:fixed; inset:0; display:none; place-items:center; z-index:10001;
}
#sg-consent-root .sg-modal .sg-card{
  background:#fff; width:min(640px,92%); border-radius:1rem; border:1px solid #eee; padding:1rem 1rem 1.25rem;
  box-shadow:0 20px 50px rgba(0,0,0,.2);
}
#sg-consent-root .sg-row{ display:flex; gap:.75rem; align-items:flex-start; padding:.5rem 0 }
#sg-consent-root .sg-row label{ font-weight:600 }
#sg-consent-root .sg-row small{ color:#666; display:block; margin-top:.15rem }
#sg-consent-root .sg-modal .sg-actions{ justify-content:flex-end; margin-top:.75rem }

/* --- Gate für externe Embeds (z. B. YouTube) --- */
.sg-embed-gate{
  border:1px dashed var(--sg-red); background:linear-gradient(180deg, rgba(177,18,38,.06), rgba(177,18,38,.02)); color:#333;
  border-radius:1rem; padding:1rem; display:grid; gap:.6rem; place-items:center; text-align:center;
}
.sg-embed-gate .sg-cta{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center }
.sg-embed-gate .sg-hint{ font-size:.9rem; color:#666 }

.cover--embed { position: relative; display: grid; place-items: stretch; }
.cover--embed iframe { width: 100%; height: 100%; display: block; border: 0; }
.cover--embed .sg-embed-gate { height: 100%; display: flex; align-items: center; justify-content: center; }