/* Projektseite "Skat" im codeMich-Stil (Palette aus css/style.css, wie Kubus).
   Die Fallback-Werte greifen nur lokal ohne codemich-CSS. */
.sk-seite{ padding-bottom:2rem; max-width:var(--breite, 1200px); margin:0 auto; }
.sk-app{ display:grid; gap:2rem; }

.sk-intro,
.sk-karte{
   background:#fff;
   border:var(--border, .1rem solid #e2eef3);
   border-radius:var(--radius, 1.6rem);
   box-shadow:var(--box-shadow, 0 .5rem 1.5rem rgba(0,0,0,.08));
}
.sk-intro{ padding:2.4rem; }
.sk-intro .heading{ margin-bottom:1rem; }

/* Spielfläche: quer 16:10, auf dem Handy hoch */
.sk-spielfeld{
   position:relative; width:100%; aspect-ratio:16/10; max-height:88vh;
   border-radius:var(--radius, 1.6rem); overflow:hidden; background:#0c1210;
   box-shadow:var(--box-shadow, 0 .5rem 1.5rem rgba(0,0,0,.08));
}
.sk-spielfeld:fullscreen{ border-radius:0; max-height:none; }
.sk-rahmen{ display:block; width:100%; height:100%; border:0; }

.sk-start{ position:absolute; inset:0; }
.sk-start img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.sk-start-inhalt{
   position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
   gap:1.2rem; padding:2rem; text-align:center;
}
.sk-start-knopf{ width:auto; font-size:2rem; padding:1.4rem 3.6rem; }
.sk-start-knopf i{ margin-right:.8rem; }
.sk-start-inhalt p{ color:#f0f8ff; font-size:1.5rem; max-width:50rem; }
.sk-vollbild{ display:flex; justify-content:flex-end; gap:1rem; margin-top:-1rem; }
.sk-vollbild [hidden]{ display:none; }

.sk-karten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(30rem,100%),1fr)); gap:2rem; }
.sk-karte{ padding:2.2rem 2.4rem; }
.sk-karte h2{ font-size:2rem; font-weight:600; padding-bottom:1.2rem; }
.sk-karte h2 i{ color:var(--main-color, #17786c); margin-right:.6rem; }
.sk-karte p{ font-size:1.6rem; line-height:1.6; color:#41576a; padding:.4rem 0; }
.sk-klein{ font-size:1.4rem !important; }

.sk-galerie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr)); gap:1.6rem; }
.sk-galerie figure{ margin:0; background:#fff; border-radius:1.2rem; overflow:hidden; box-shadow:var(--box-shadow, 0 .5rem 1.5rem rgba(0,0,0,.08)); }
.sk-galerie img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top; }
.sk-galerie figcaption{ padding:.8rem 1.2rem; font-size:1.4rem; color:var(--light-color, #6b7f8e); }

@media (max-width:700px){
   .sk-spielfeld{ aspect-ratio:auto; height:86vh; }
   .sk-spielfeld:not(.laeuft){ height:auto; aspect-ratio:4/3; }
}
@media (max-width:600px){
   .sk-intro,.sk-karte{ padding:1.8rem; }
   .sk-start-knopf{ font-size:1.7rem; padding:1.1rem 2.4rem; }
   .sk-start-inhalt p{ font-size:1.3rem; }
}