/* Mobile Optimierungen */
    @media (max-width: 900px) {
      .app {
        grid-template-columns: 1fr;
        padding: 12px;
      }
      header {
        flex-direction: column;
        align-items: left; 
        text-align: left;
        gap: 12px;
      }
      .brand {
        flex-direction: column;
        gap: 6px;
      }
      .controls {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
      }
      .controls button {
        flex: 1 1 45%;
        min-width: 120px;
      }
    }
    
    @media (max-width: 600px) {
      /* Allgemeines Layout */
      .app {
        gap: 12px;
      }
      header {
        padding: 10px 12px;
        border-radius: 14px;
      }
      h1 {
        font-size: 18px;
        line-height: 1.3;
      }
    
      /* Karten & KPI */
      .kpis {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .kpi {
        padding: 10px;
        font-size: 0.95em;
      }
      .kpi .v {
        flex-direction: row;
        justify-content: center;
        gap: 6px;
      }
      .kpi .v i {
        font-size: 1.15em !important;
      }
    
      /* Producer */
      .producer {
        padding: 12px;
        border-radius: 12px;
      }
      .producer .name {
        font-size: 1em;
      }
      .producer button {
        font-size: 0.95em;
        padding: 10px;
      }
    
      /* Upgrades rechts */
      #upgrades.custom-scroll {
        max-height: none;
        overflow: visible;
      }
      .upgrade-row {
        padding: 10px;
        font-size: 0.95em;
      }
      .upgrade-row button {
        padding: 10px;
        font-size: 0.95em;
      }
    
      /* 3D Szene – fix für heilen Würfel */
      .scene-wrap {
        height: 320px;
      }
      .island {
        transform: translate(-50%, -50%) rotateX(15deg) scale(0.8);
      }
      .cube .face {
        width: 90px;
        height: 90px;
      }
      .cube .front  { transform: rotateY(0deg) translateZ(45px); }
      .cube .back   { transform: rotateY(180deg) translateZ(45px); }
      .cube .left   { transform: rotateY(-90deg) translateZ(45px); }
      .cube .right  { transform: rotateY(90deg) translateZ(45px); }
      .cube .top    { transform: rotateX(90deg) translateZ(45px); }
      .cube .bottom { transform: rotateX(-90deg) translateZ(45px); }
    
      /* Tabs */
      .tabs {
        flex-wrap: wrap;
      }
      .tab {
        flex: 1 1 auto;
        text-align: center;
        font-size: 0.9em;
        padding: 6px;
      }
    
      /* Docs Modal */
      #docsOverlay .docs-modal {
        padding: 20px 16px;
        max-height: 85vh;
        width: 75%;
        font-size: 0.95em;
      }
    }