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

.ds-intro,
.ds-karte,
.ds-spiel{
   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));
}
.ds-intro{ padding:2.4rem; }
.ds-intro .heading{ margin-bottom:1rem; }

/* Spielekacheln mit Bildschirmfoto */
.ds-spiele{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(32rem,100%),1fr)); gap:2rem; }
.ds-spiel{
   display:flex; flex-direction:column; overflow:hidden; text-decoration:none; color:inherit;
   transition:transform .15s ease, box-shadow .15s ease;
}
.ds-spiel:hover{ transform:translateY(-.3rem); box-shadow:0 .8rem 2rem rgba(0,0,0,.12); }
.ds-spiel img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:top; background:#f4f6fa; border-bottom:var(--border, .1rem solid #e2eef3); }
.ds-spiel-text{ display:flex; flex-direction:column; gap:.8rem; padding:1.8rem 2rem 2rem; flex:1; }
.ds-spiel-text h2{ font-size:2rem; font-weight:600; color:var(--black, #1d2b36); }
.ds-spiel-text h2 i{ color:var(--main-color, #17786c); margin-right:.4rem; }
.ds-spiel-text p{ font-size:1.5rem; line-height:1.55; color:#41576a; flex:1; text-align:left; }
.ds-knopf{ align-self:flex-start; width:auto; margin-top:.4rem; padding:.9rem 2.4rem; }

.ds-karten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(30rem,100%),1fr)); gap:2rem; }
.ds-karte{ padding:2.2rem 2.4rem; }
.ds-karte h2{ font-size:2rem; font-weight:600; padding-bottom:1.2rem; }
.ds-karte h2 i{ color:var(--main-color, #17786c); margin-right:.6rem; }
.ds-karte p{ font-size:1.6rem; line-height:1.6; color:#41576a; padding:.4rem 0; text-align:left; }
.ds-klein{ font-size:1.4rem !important; }
.ds-liste{ margin:0; padding-left:1.8rem; }
.ds-liste li{ font-size:1.5rem; line-height:1.55; color:#41576a; padding:.3rem 0; }
.ds-liste b{ color:var(--black, #1d2b36); }
.ds-seite kbd{
   display:inline-block; padding:.1rem .6rem; font:600 1.3rem/1.5 inherit;
   color:var(--black, #1d2b36); background:var(--accent-soft, #eef8f6); border:.1rem solid #cfe6e1; border-radius:.6rem;
}

@media (max-width:600px){
   .ds-intro,.ds-karte{ padding:1.8rem; }
   .ds-spiele{ grid-template-columns:1fr; }
}