/* Mi-Casa-Klon — mobiles Menue, 27.09.2026.
 *
 * ADDITIV. klon.css bleibt byte-identisch zum Original.
 *
 * Grund: Das Original (Next.js/Radix) liefert das Menue-Panel gar nicht im
 * HTML aus, sondern baut es erst beim Klick per JavaScript. Die Gestaltung
 * dafuer steht aber vollstaendig im Original-CSS (.mobile-sheet, .mobile-nav,
 * .mobile-sheet-title, .sheet-close, .mobile-phone) — nur die Positionierung
 * kam von Radix-Hilfsklassen. Genau die wird hier nachgetragen, sonst nichts.
 */

.mobile-sheet {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  overflow-y: auto;
  box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
  transform: translateX(100%);
  transition: transform .25s ease;
}

.mobile-sheet[data-state="open"] { transform: none; }

.klon-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, .45);
}

/* Ab der Breite, ab der die Desktop-Navigation wieder sichtbar ist
   (Original: @media max-width 720px versteckt .desktop-nav), darf das
   Panel nie erscheinen. */
@media (min-width: 721px) {
  .mobile-sheet, .klon-sheet-overlay { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-sheet { transition: none; }
}