/* Projektseite "Der letzte Korridor" im codeMich-Stil (Palette aus css/style.css). */
.korridor-seite{ padding-bottom:2rem; }
.korridor-seite,
section.korridor-seite{ max-width:var(--breite); }

.korridor-app{ display:grid; gap:2rem; }

.korridor-intro,
.korridor-karte{
   background:#fff;
   border:var(--border);
   border-radius:var(--radius);
   box-shadow:var(--box-shadow);
}
.korridor-intro{ padding:2.4rem; }
.korridor-intro .heading{ margin-bottom:1rem; }

/* Spielfläche: 16:9 wie das Spiel (1280 x 720) */
.korridor-spielfeld{
   position:relative;
   aspect-ratio:16/9;
   width:100%;
   border-radius:var(--radius);
   overflow:hidden;
   background:#131713;
   box-shadow:var(--box-shadow);
}
.korridor-spielfeld:fullscreen{ border-radius:0; }
.korridor-rahmen{ display:block; width:100%; height:100%; border:0; }

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

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

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

.korridor-download{
   display:flex; gap:1.4rem; align-items:center; margin-bottom:1.2rem; padding:1.2rem 1.6rem;
   border-radius:1.2rem; background:var(--accent-soft); color:var(--black); font-size:1.6rem;
   transition:background .15s ease;
}
.korridor-download:hover{ background:var(--accent); }
.korridor-download i{ font-size:3rem; color:var(--main-color); width:3.4rem; text-align:center; }
.korridor-download small{ font-size:1.3rem; color:#41576a; }
.korridor-klein{ font-size:1.4rem !important; }

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

/* Hinweis "Handy drehen": nur wenn das Spiel läuft, auf Touch-Geräten im Hochformat (z. B. iPhone,
   wo sich das Querformat nicht festlegen lässt). */
.korridor-drehen{ display:none; }
@media (pointer:coarse) and (orientation:portrait){
   .korridor-spielfeld.laeuft .korridor-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(19,23,19,.94); color:#f0f8ff;
   }
   .korridor-drehen i{ font-size:4.8rem; color:var(--accent); transform:rotate(90deg); }
   .korridor-drehen p{ font-size:1.7rem; }
}

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