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

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

/* Startfläche 16:9 mit Bild aus dem Spiel */
.km-spielfeld{
   position:relative; aspect-ratio:16/9; width:100%;
   border-radius:var(--radius, 1.6rem); overflow:hidden; background:#0c141d;
   box-shadow:var(--box-shadow, 0 .5rem 1.5rem rgba(0,0,0,.08));
}
.km-spielfeld img{ width:100%; height:100%; object-fit:cover; filter:brightness(.55); }
.km-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;
}
.km-start-knopf{ width:auto; font-size:2rem; padding:1.4rem 3.6rem; }
.km-start-knopf i{ margin-right:.8rem; }
.km-start-inhalt p{ color:#f0f8ff; font-size:1.5rem; max-width:50rem; }
.km-neues-fenster{ display:flex; justify-content:flex-end; gap:1rem; margin-top:-1rem; }

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

.km-tasten{ width:100%; border-collapse:collapse; font-size:1.5rem; }
.km-tasten td{ padding:.6rem .4rem; border-bottom:.1rem solid #e2eef3; color:#41576a; vertical-align:top; }
.km-tasten td:first-child{ white-space:nowrap; padding-right:1.2rem; color:var(--black, #1d2b36); }
.km-tasten tr:last-child td{ border-bottom:0; }
.km-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;
}

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

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

/* Codebeispiel */
.km-code{
   margin:0 0 1rem; padding:1.4rem 1.6rem; overflow-x:auto; border-radius:1rem;
   background:#0c1a26; color:#d9ecf2; font:1.4rem/1.6 ui-monospace, Consolas, monospace;
}
.km-neues-fenster{ flex-wrap:wrap; }
.km-app > *, .km-karten > *{ min-width:0; }
/* codemich setzt Schrift, Großschreibung und Blocksatz global; hier gezielt zurück */
.km-seite .km-code, .km-seite .km-code code{
   font-family:ui-monospace, "DejaVu Sans Mono", Consolas, monospace; white-space:pre; text-transform:none; text-align:left;
}
.km-start-inhalt p{ text-align:center; }
.km-karte p, .km-liste li{ text-align:left; }
.km-seite .km-code{ font-size:1.4rem; }
.km-start-inhalt p{ background:rgba(9,17,29,.78); padding:.9rem 1.6rem; border-radius:1rem; }
/* Codekarte über die ganze Breite: Code links, Erklärung rechts */
.km-karte--code{ grid-column:1/-1; }
.km-code-zeile{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:2.4rem; align-items:start; }
.km-code-zeile .km-code{ margin:0; }
@media (max-width:800px){ .km-code-zeile{ grid-template-columns:minmax(0,1fr); gap:1.2rem; } }
.km-karten{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:800px){ .km-karten{ grid-template-columns:minmax(0,1fr); } }
.km-karte a{ color:var(--main-color, #17786c); text-decoration:underline; }