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

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

/* Spielfläche 16:9 */
.kr-spielfeld{
   position:relative; aspect-ratio:16/9; width:100%;
   border-radius:var(--radius, 1.6rem); overflow:hidden; background:#0f2418;
   box-shadow:var(--box-shadow, 0 .5rem 1.5rem rgba(0,0,0,.08));
}
.kr-spielfeld:fullscreen{ border-radius:0; }
.kr-rahmen{ display:block; width:100%; height:100%; border:0; }

.kr-start{ position:absolute; inset:0; }
.kr-start img{ width:100%; height:100%; object-fit:cover; filter:brightness(.5); }
.kr-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;
}
.kr-start-knopf{ width:auto; font-size:2rem; padding:1.4rem 3.6rem; }
.kr-start-knopf i{ margin-right:.8rem; }
.kr-start-inhalt p{ color:#f0f8ff; font-size:1.5rem; max-width:50rem; }
.kr-vollbild{ display:flex; justify-content:flex-end; gap:1rem; margin-top:-1rem; }
.kr-vollbild [hidden]{ display:none; }

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

/* Rekorde über die ganze Breite */
.kr-rekorde{ grid-column:1 / -1; }
.kr-rekord-raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(22rem,1fr)); gap:1.4rem; }
.kr-rekord{ background:var(--accent-soft, #eef8f6); border-radius:1.2rem; padding:1.2rem 1.4rem; }
.kr-rekord h3{ font-size:1.6rem; font-weight:600; color:var(--black, #1d2b36); margin-bottom:.6rem; }
.kr-rekord h3 small{ font-weight:400; font-size:1.2rem; color:#41576a; margin-left:.4rem; }
.kr-rekord ol{ list-style:none; margin:0; padding:0; counter-reset:platz; }
.kr-rekord li{ display:grid; grid-template-columns:2.2rem 1fr auto auto; gap:.8rem; align-items:baseline;
   font-size:1.4rem; padding:.3rem 0; color:#41576a; counter-increment:platz; }
.kr-rekord li::before{ content:counter(platz) "."; font-weight:600; color:var(--main-color, #17786c); }
.kr-rekord li span{ color:var(--black, #1d2b36); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kr-rekord li em{ font-style:normal; font-size:1.2rem; }
.kr-rekord li b{ font-variant-numeric:tabular-nums; color:var(--black, #1d2b36); }
.kr-leer{ font-size:1.4rem !important; }

.kr-tasten{ width:100%; border-collapse:collapse; font-size:1.5rem; }
.kr-tasten td{ padding:.6rem .4rem; border-bottom:.1rem solid #e2eef3; color:#41576a; vertical-align:top; }
.kr-tasten td:first-child{ white-space:nowrap; padding-right:1.2rem; color:var(--black, #1d2b36); }
.kr-tasten tr:last-child td{ border-bottom:0; }
.kr-seite kbd{
   display:inline-block; min-width:2.4rem; padding:.1rem .7rem; font:600 1.3rem/1.6 inherit; text-align:center;
   color:var(--black, #1d2b36); background:var(--accent-soft, #eef8f6); border:.1rem solid #cfe6e1; border-radius:.6rem;
}

.kr-galerie{ display:grid; grid-template-columns:repeat(auto-fit,minmax(26rem,1fr)); gap:1.6rem; }
.kr-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)); }
.kr-galerie img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.kr-galerie figcaption{ padding:.8rem 1.2rem; font-size:1.4rem; color:var(--light-color, #6b7f8e); }

/* Hinweis "Handy drehen" (nur Touch im Hochformat, wenn das Spiel läuft) */
.kr-drehen{ display:none; }
@media (pointer:coarse) and (orientation:portrait){
   .kr-spielfeld.laeuft .kr-drehen{
      display:flex; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center;
      gap:1.2rem; padding:2rem; text-align:center; background:rgba(15,36,24,.94); color:#f0f8ff;
   }
   .kr-drehen i{ font-size:4.8rem; color:var(--accent, #80d0c7); transform:rotate(90deg); }
   .kr-drehen p{ font-size:1.7rem; }
}

@media (max-width:600px){
   .kr-intro,.kr-karte{ padding:1.8rem; }
   .kr-start-knopf{ font-size:1.7rem; padding:1.1rem 2.4rem; }
   .kr-start-inhalt p{ font-size:1.3rem; }
}

/* Projektseite verweist auf rush.codemich.de (Knopf als Link) */
.kr-start-knopf{ display:inline-block; text-decoration:none; }