/* ============================================================
   Startseite Hochzeitsspiele – Design wie die Foto-Galerie
   ============================================================ */
:root{
  --creme:#faf5ee; --karte:#fff; --tinte:#3a3530; --leise:#8c8378; --rand:#e8dfd2;
  --schatten:0 14px 40px rgba(80,70,55,.10); --schatten-l:0 8px 22px rgba(80,70,55,.12);
  --lavendel:#9b7fd4; --lavendel-hell:#ece4f7; --lavendel-dunkel:#7a5cb8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Mulish',system-ui,-apple-system,sans-serif;color:var(--tinte);
  background-color:var(--creme);
  background-image:radial-gradient(circle at 18% 0%,rgba(184,155,110,.06),transparent 42%),
                   radial-gradient(circle at 88% 100%,rgba(155,127,212,.07),transparent 46%);
  line-height:1.6;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100vh;
}
.huelle{max-width:560px;margin:0 auto;padding:20px 18px 56px;min-height:100vh;display:flex;flex-direction:column}

/* Kopf */
.kopf{text-align:center;margin:8px 0 22px}
.kopf-deko{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:6px}
.kopf-deko .deko{height:84px;width:auto;flex-shrink:1;min-width:0;object-fit:contain}
.paar-kreis{width:108px;height:108px;border-radius:50%;overflow:hidden;flex-shrink:0;border:3px solid #fff;box-shadow:var(--schatten-l);background:var(--lavendel-hell)}
.paar-kreis img{width:100%;height:100%;object-fit:cover;display:block}
.logo{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2.1rem,7vw,3rem);letter-spacing:.5px;margin:0;line-height:1.05}
.untertitel{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;color:var(--leise);margin:2px 0 0}
@media (max-width:400px){.kopf-deko .deko{height:62px}.paar-kreis{width:92px;height:92px}}

.einleitung{text-align:center;color:var(--leise);font-size:1rem;margin:0 auto 22px;max-width:360px}

/* Spiele-Kacheln */
.spiele-raster{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.spiel-kachel{display:block;text-decoration:none;color:inherit;background:var(--karte);border:1px solid var(--rand);
  border-radius:20px;overflow:hidden;box-shadow:var(--schatten);transition:transform .1s ease,box-shadow .2s ease}
.spiel-kachel:active{transform:scale(.98)}
.spiel-kachel:hover{box-shadow:var(--schatten),0 0 0 2px var(--lavendel-hell)}
.spiel-bild{aspect-ratio:1/1;display:block}
.spiel-bild svg,.spiel-bild img{width:100%;height:100%;display:block;object-fit:cover}
.spiel-name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.5rem;text-align:center;
  padding:12px 8px 16px;line-height:1.1}
.spiel-name .pfeil{color:var(--lavendel);font-size:1.1rem}

@media (max-width:360px){.spiele-raster{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.spiel-platzhalter{display:flex;align-items:center;justify-content:center;height:100%;background:#ece4f7;color:#7a5cb8;font-family:'Cormorant Garamond',serif;font-size:1.4rem;text-align:center;padding:14px}